/* 2RSYSTEMS — shared design tokens & components (nav, footer, buttons, section shell, fact list, model cards, product hero, cta band) */
:root{
  --navy:#0B2233;
  --navy-2:#142E42;
  --ivory:#F5F3EE;
  --sky:#1F9DE3;
  --sky-deep:#0C7ABF;
  --graphite:#4B5563;
  --alu:#C7CDD4;
  --alu-line: rgba(199,205,212,0.35);
  --max: 1240px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ivory);
  color:var(--navy);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Space Grotesk', sans-serif; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
img{max-width:100%; display:block;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

/* ---------- GRID OVERLAY (technical watermark) ---------- */
.grid-overlay{
  position:absolute; inset:0; opacity:.10; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(var(--alu-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--alu-line) 1px, transparent 1px);
  background-size:64px 64px;
}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.solid{
  background:rgba(245,243,238,0.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-bottom:1px solid rgba(11,34,51,0.08);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; position:relative;}
.logo{font-family:'Space Grotesk'; font-weight:700; font-size:20px; letter-spacing:-0.02em; display:flex; align-items:center; gap:10px; color:var(--ivory); transition:color .3s ease;}
.logo span{color:var(--sky);}
.navlinks{display:flex; gap:34px; align-items:center; font-size:14.5px; font-weight:500;}
.navlinks a{color:var(--ivory); opacity:.85; transition:opacity .2s, color .3s ease;}
.navlinks a:hover{opacity:1; color:var(--sky);}
header.solid .logo{color:var(--navy);}
header.solid .navlinks a{color:var(--navy);}
header.solid .navlinks a:hover{color:var(--sky-deep);}
.navcta{
  background:var(--navy); color:var(--ivory); padding:11px 22px; border-radius:2px;
  font-size:14px; font-weight:600; letter-spacing:.02em;
  transition:background .2s;
  white-space:nowrap;
}
.navcta:hover{background:var(--sky-deep);}
.nav-right{display:flex; align-items:center; gap:14px;}

.hamburger{
  display:none; width:40px; height:40px; border:1px solid rgba(245,243,238,0.35);
  background:none; border-radius:2px; position:relative; flex:none; cursor:pointer;
  transition:border-color .3s ease;
}
.hamburger span{
  position:absolute; left:10px; right:10px; height:2px; background:var(--ivory);
  transition:transform .25s ease, opacity .2s ease, background .3s ease;
}
.hamburger span:nth-child(1){top:14px;}
.hamburger span:nth-child(2){top:19px;}
.hamburger span:nth-child(3){top:24px;}
header.solid .hamburger{border-color:rgba(11,34,51,0.2);}
header.solid .hamburger span{background:var(--navy);}
.hamburger.open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

.mobile-panel{
  display:flex; position:fixed; inset:0; z-index:99;
  background:var(--ivory);
  padding:100px 32px 40px;
  flex-direction:column; gap:6px;
  transform:translateY(-8px); opacity:0;
  transition:transform .25s ease, opacity .2s ease;
  pointer-events:none;
}
.mobile-panel.open{opacity:1; transform:translateY(0); pointer-events:auto;}
.mobile-panel a{
  font-family:'Space Grotesk'; font-size:26px; font-weight:600; padding:16px 0;
  border-bottom:1px solid rgba(11,34,51,0.08); color:var(--navy);
}
.mobile-panel .navcta{margin-top:26px; text-align:center; font-size:15px; padding:16px; color:var(--ivory);}
body.nav-open{overflow:hidden;}

/* ---------- BUTTONS ---------- */
.hero-ctas{display:flex; gap:16px; margin-top:40px;}
.btn-primary{background:var(--sky); color:var(--navy); padding:15px 28px; font-weight:600; font-size:14.5px; border-radius:2px; transition:background .2s, transform .2s;}
.btn-primary:hover{background:#3fb0ee; transform:translateY(-1px);}
.btn-ghost{border:1px solid rgba(245,243,238,0.3); padding:15px 26px; font-weight:600; font-size:14.5px; border-radius:2px; transition:border-color .2s, background .2s;}
.btn-ghost:hover{border-color:var(--ivory); background:rgba(245,243,238,0.06);}

/* ---------- SECTION SHELL ---------- */
section{padding:120px 0;}
.section-head{max-width:640px; margin-bottom:60px;}
.eyebrow-dark{font-family:'IBM Plex Mono'; font-size:12.5px; letter-spacing:.12em; color:var(--sky-deep); text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.eyebrow-dark::before{content:''; width:26px; height:1px; background:var(--sky-deep);}
.section-head h2{font-size:clamp(28px,3vw,40px); font-weight:600;}
.section-head p{margin-top:16px; color:var(--graphite); font-size:16px; line-height:1.6;}

/* ---------- BREADCRUMB (product subpages) ---------- */
.breadcrumb{font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(245,243,238,.55); display:flex; align-items:center; gap:8px; margin-bottom:32px;}
.breadcrumb a{color:var(--sky);}
.breadcrumb a:hover{text-decoration:underline;}

/* ---------- PRODUCT HERO (product subpages) ---------- */
.product-hero{position:relative; background:linear-gradient(180deg, var(--navy) 0%, #0E2A3E 100%); color:var(--ivory); padding:158px 0 96px; overflow:hidden;}
.product-grid{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.product-hero h1{font-size:clamp(32px,4.4vw,52px); font-weight:600; line-height:1.05;}
.product-badge{font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sky); display:inline-block; margin-top:16px;}
.product-hero p.lead{margin-top:18px; font-size:16px; line-height:1.65; color:rgba(245,243,238,.72); max-width:460px;}
.media-panel{position:relative; aspect-ratio:4/3; border:1px solid rgba(245,243,238,.16); background:#EFECE4; overflow:hidden;}
.media-panel img{width:100%; height:100%; object-fit:contain;}

/* ---------- DARK PANEL (fact list — why-choose-us / product features) ---------- */
.dark-panel{background:var(--navy); color:var(--ivory);}
.dark-panel .eyebrow-dark{color:var(--sky);}
.dark-panel .eyebrow-dark::before{background:var(--sky);}
.dark-panel .section-head h2{color:var(--ivory);}
.fact-list{border-top:1px solid rgba(245,243,238,0.14);}
.fact-row{display:grid; grid-template-columns:100px 1fr; gap:28px; padding:32px 0; border-bottom:1px solid rgba(245,243,238,0.14); align-items:baseline; transition:padding-left .25s ease, border-color .25s ease;}
.fact-row:hover{padding-left:14px; border-color:var(--sky);}
.fact-idx{font-size:14px; color:var(--sky);}
.fact-body h3{font-size:20px; font-weight:600;}
.fact-body p{margin-top:8px; color:rgba(245,243,238,0.62); font-size:14.5px; line-height:1.6; max-width:580px;}

/* ---------- SPEC GRID (big-number facts — engineering / product spec sheet) ---------- */
.eng-facts{display:grid; grid-template-columns:1fr 1fr; gap:20px 32px; margin-top:32px;}
.fact .n{font-family:'Space Grotesk'; font-size:26px; font-weight:600; color:var(--navy);}
.fact .l{font-family:'IBM Plex Mono'; font-size:12px; color:var(--graphite); margin-top:4px;}

/* ---------- MODEL CARDS (systems tabs / related systems) ---------- */
.model-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:8px;}
.model-card{border:1px solid rgba(11,34,51,0.1); display:flex; flex-direction:column; transition:border-color .25s ease, transform .25s ease;}
.model-card:hover{border-color:var(--sky); transform:translateY(-3px);}
.model-img{aspect-ratio:4/3; background-size:cover; background-position:center; background-color:#EFECE4;}
.model-body{padding:20px 22px; display:flex; flex-direction:column; flex:1;}
.model-badge{font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:.08em; color:var(--sky-deep); text-transform:uppercase;}
.model-card h4{font-family:'Space Grotesk'; font-size:17px; font-weight:600; margin-top:8px;}
.model-card p{font-size:13px; color:var(--graphite); margin-top:8px; line-height:1.55; flex:1;}
.mini-specs{list-style:none; display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(11,34,51,0.08);}
.mini-specs li{font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--navy); white-space:nowrap;}
.mini-specs li::before{content:'— '; color:var(--sky-deep);}
.model-link{margin-top:14px; font-size:12.5px; font-weight:600; color:var(--sky-deep); display:inline-block; border-bottom:1px solid transparent;}
.model-link:hover{border-color:var(--sky-deep);}

/* ---------- CTA BAND ---------- */
.cta-band{position:relative; background:var(--navy); color:var(--ivory); padding:90px 0; text-align:center; overflow:hidden;}
.cta-band .grid-overlay{opacity:.14;}
.cta-band h2{position:relative; z-index:2; font-size:clamp(26px,3vw,38px); font-weight:600;}
.cta-band p{position:relative; z-index:2; margin-top:14px; font-size:16px; color:rgba(245,243,238,0.7);}
.cta-band .btn-primary{position:relative; z-index:2; margin-top:28px; display:inline-block;}

/* ---------- FOOTER ---------- */
footer{background:var(--navy); color:rgba(245,243,238,0.7); padding:70px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
footer h4{color:var(--ivory); font-family:'IBM Plex Mono'; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px;}
footer ul{list-style:none;}
footer li{margin-bottom:10px; font-size:14px;}
footer li a:hover{color:var(--sky);}
.footer-bottom{border-top:1px solid rgba(245,243,238,0.12); margin-top:56px; padding-top:24px; display:flex; justify-content:space-between; font-size:12.5px; flex-wrap:wrap; gap:12px;}

/* ---------- TABLET ---------- */
@media (max-width:960px){
  .wrap{padding:0 24px;}
  section{padding:88px 0;}
  .model-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:1fr; gap:36px;}
  .product-hero{padding:140px 0 72px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px 24px;}
  .navlinks{display:none;}
  .hamburger{display:block;}
  .fact-row{grid-template-columns:70px 1fr; gap:20px;}
}

/* ---------- PHONE ---------- */
@media (max-width:600px){
  .wrap{padding:0 20px;}
  header{padding:16px 0;}
  header.solid{padding:12px 0;}
  .logo{font-size:17px;}
  .nav-right{gap:10px;}
  .navcta{padding:9px 14px; font-size:12.5px;}
  section{padding:64px 0;}
  .hero-ctas{flex-direction:column; gap:12px; margin-top:30px;}
  .hero-ctas a{text-align:center; width:100%;}
  .section-head{margin-bottom:36px;}
  .fact-row{grid-template-columns:1fr; gap:8px;}
  .fact-idx{opacity:.6;}
  .model-grid{grid-template-columns:1fr;}
  .eng-facts{gap:16px 20px;}
  .product-hero{padding:120px 0 56px;}
  .cta-band{padding:56px 0;}
  .footer-grid{grid-template-columns:1fr; gap:32px;}
  .footer-bottom{flex-direction:column;}
  .mobile-panel{padding:90px 24px 32px;}
  .mobile-panel a{font-size:22px; padding:14px 0;}
}