@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');
/* Hitch Interactive — visual v2 "carbon & signal"
   Light content sections; carbon-black hero/stats/footer; lime #C4FF2F as
   signal accent (dark surfaces only); blue-violet #4F71FF as primary.
   NOTE: legacy var names --red/--gold now point at the blue primary so every
   page inherits the rebrand without markup changes. */
:root{
  --bg:#FFFFFF; --alt:#F6F7F9; --ink:#333333; --muted:#5C6675; --faint:#9AA5B1;
  --red:#4F71FF; --red-dk:#3A5AE8; --line:#E5E8EC; --card:#FFFFFF; --gold:#4F71FF;
  --carbon:#0E1116; --carbon-2:#161B22; --carbon-line:#252C36;
  --lime:#C4FF2F;
  --hi-cream:#FFFCF7; --hi-lime:#C4FF2F; --hi-green:#00C566; --hi-blue:#4F71FF;
  --hi-orange:#FF6400; --hi-sky:#D1ECFF; --btn-dark:#16191E;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Open Sans','Segoe UI',system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;font-size:17px}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-dk)}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* nav — carbon, static (scrolls away with the page), fuses with the hero */
header{background:var(--carbon);border-bottom:1px solid var(--carbon-line)}
.nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:74px;gap:8px}
.nav > nav{justify-self:center}
.nav .logo{justify-self:start}
.nav .logo img{height:44px}
.nav ul{display:flex;gap:4px;list-style:none;align-items:center}
.nav ul a{display:block;padding:10px 16px;border-radius:0;color:#D7DEE6;font-weight:600;font-size:15px}
.nav ul a:hover{background:var(--carbon-2);color:#fff}
.nav ul a.active{color:var(--lime)}
.nav .actions{justify-self:end;display:flex;gap:10px;align-items:center}
.nav .actions .cta,.nav .actions .langbtn{display:inline-block;box-sizing:border-box;min-width:118px;text-align:center;padding:8.5px 16px;border:1.5px solid transparent;border-radius:0;font-weight:600;font-size:15px;line-height:1.45;cursor:pointer;font-family:inherit;margin:0}
.nav .actions .cta{background:var(--lime);border-color:var(--lime);color:#111}
.nav .actions .cta:hover{background:#fff;border-color:#fff;color:#111}
.nav .actions .langbtn{background:none;border-color:#4A5563;color:#D7DEE6}
.nav .actions .langbtn:hover{background:#fff;border-color:#fff;color:#111}
.ext:after{content:" ↗";font-size:12px;color:var(--faint)}

/* hero (photo with dark overlay, white text — like the site's video hero) */
.hero{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;background:var(--carbon)}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.hero:before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.5) 42%,rgba(0,0,0,0) 78%),linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 50%,rgba(0,0,0,0) 92%)}
.hero img.fg{position:absolute;right:6%;bottom:0;height:90%;width:auto;z-index:1}
.hero .wrap{position:relative;z-index:3;padding-top:70px;padding-bottom:70px}
@media(max-width:900px){.hero img.fg{right:-6%;height:62%;opacity:.5}}
.hero .kicker{color:var(--lime)}
.hero h1{color:#fff}
.hero .sub{color:#E7ECF2}
.kicker{color:var(--red);font-weight:700;letter-spacing:3px;font-size:13px;text-transform:uppercase}
h1{font-size:50px;font-weight:700;line-height:1.15;color:var(--ink);margin:14px 0 18px;max-width:850px}
h1 .r{color:var(--lime)}
.sub{font-size:18px;color:var(--muted);max-width:760px}
.btns{margin-top:28px;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px}
.btn{display:inline-block;padding:13px 26px;border-radius:0;font-weight:700;font-size:15px;border:1.5px solid transparent;text-align:center;white-space:nowrap}
.btn.primary{background:var(--btn-dark);color:#fff}
.btn.primary:hover{background:var(--red);color:#fff}
.btn.ghost{border:1.5px solid #fff;color:#fff}
.btn.ghost:hover{background:#fff;color:var(--ink)}
section .btn.ghost,section.alt .btn.ghost{border-color:var(--red);color:var(--red)}
section .btn.ghost:hover,section.alt .btn.ghost:hover{background:var(--red);color:#fff}

/* sections */
section{padding:72px 0}
section.alt{background:var(--alt)}
h2{font-size:34px;font-weight:400;color:var(--ink);margin-bottom:10px}
h3{color:var(--ink)}
.lead{color:var(--muted);max-width:820px;margin-bottom:36px;font-size:17px}
.grid{display:grid;gap:22px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:0;padding:26px;box-shadow:0 2px 10px rgba(20,30,45,.05)}
.card .tag{color:var(--red);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.card h3{font-size:20px;margin:8px 0 10px}
.card p{color:var(--muted);font-size:14.5px}
.card .go{display:inline-block;margin-top:14px;font-weight:700;font-size:14px}
.icon{margin-bottom:14px;color:#9AA5B1}
.icon svg{width:34px;height:34px;display:block}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stats.s5{grid-template-columns:repeat(5,1fr)}
.stats.s6{grid-template-columns:repeat(6,1fr)}
.stat b{display:block;font-size:36px;color:var(--red);font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:-.5px}
.stat span{color:var(--muted);font-size:13.5px}

/* catalog */
.prod{display:flex;flex-direction:column}
.prod .ph{height:150px;border-radius:0;background:linear-gradient(135deg,#EEF1F5,#E4E9F0);display:flex;align-items:center;justify-content:center;font-size:44px;margin-bottom:16px}
.prod .series{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:1.5px}
.prod ul{list-style:none;margin:10px 0 14px;color:var(--muted);font-size:13.5px}
.prod ul li:before{content:"— ";color:var(--red)}
.prod .mail{margin-top:auto;text-align:center;background:var(--btn-dark);color:#fff;border:none;cursor:pointer;border-radius:0;padding:11px;font-weight:700;font-size:14px;font-family:inherit}
.prod .mail:hover{background:var(--red);color:#fff}

/* course */
.course{border-left:3px solid var(--red);padding-left:18px;margin-bottom:26px}
.course .meta{color:var(--faint);font-size:13px}
details{margin-top:8px;color:var(--muted);font-size:14px}
summary{cursor:pointer;color:var(--red);font-weight:600}
details ol{margin:10px 0 0 22px}

/* banner strip */
.strip{background:var(--alt);border:1px solid var(--line);border-radius:0;padding:26px 30px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
section.alt .strip{background:#fff}
.strip img{height:52px}
.strip p{color:var(--muted);flex:1;min-width:260px}
.strip b{color:var(--ink)}

/* footer */
footer{border-top:1px solid var(--carbon-line);padding:44px 0;color:#9AA5B1;font-size:14px;background:var(--carbon)}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:26px}
footer h4{color:#fff;margin-bottom:10px;font-size:15px}
footer a{display:block;color:#B8C2CC;margin-bottom:6px}
footer a:hover{color:var(--lime)}
.fineprint{border-top:1px solid var(--carbon-line);padding-top:18px;font-size:12.5px;color:#6B7684}

/* language toggle */

/* news carousel */
.news-wrap{position:relative}
.news-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.news-card{scroll-snap-align:start;flex:0 0 340px;background:#fff;border:1px solid var(--line);border-radius:0;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(20,30,45,.06)}
.news-card img{height:170px;width:100%;object-fit:cover}
.news-card .ph{height:170px;display:flex;align-items:center;justify-content:center;font-size:46px;background:linear-gradient(135deg,#EEF1F5,#E4E9F0)}
.news-card .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.news-card .date{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.news-card h3{font-size:17px;margin:8px 0 8px;line-height:1.35}
.news-card p{color:var(--muted);font-size:13.5px;flex:1}
.news-card a{margin-top:12px;font-weight:700;font-size:13.5px;display:none}
.news-nav{position:absolute;top:-58px;right:0;display:flex;gap:8px}
.news-nav button{width:40px;height:40px;border-radius:0;border:1.5px solid var(--red);background:none;color:var(--red);font-size:18px;cursor:pointer}
.news-nav button:hover{background:var(--red);color:#fff}

@media(max-width:900px){
  .g4,.g3,.stats,.stats.s5,.stats.s6,footer .cols{grid-template-columns:repeat(2,1fr)}
  h1{font-size:36px}
  .nav{display:flex;flex-wrap:wrap;height:auto;padding:10px 0;gap:6px;justify-content:space-between}
  .nav ul{flex-wrap:wrap}
  .nav ul a{padding:8px 10px;font-size:13.5px}
}
@media(max-width:600px){
  .g4,.g3,.g2,.stats,.stats.s5,.stats.s6,footer .cols{grid-template-columns:1fr}
  .btns{grid-auto-flow:row;width:100%}
  .btn{white-space:normal}
  .nav{justify-content:center}
  .nav ul{justify-content:center}
  .nav .actions{width:100%;justify-content:center}
  .news-card{flex-basis:82vw}
}

/* product stock images */
.prod img.shot{height:170px;width:100%;object-fit:cover;object-position:center;border-radius:0;margin-bottom:16px;background:#F1F3F6;border:1px solid var(--line)}

/* inquiry modal */
.inq-overlay{display:none;position:fixed;inset:0;background:rgba(20,28,40,.55);z-index:100;align-items:center;justify-content:center;padding:20px}
.inq-box{background:#fff;border-radius:0;padding:30px;max-width:440px;width:100%;box-shadow:0 18px 60px rgba(10,18,30,.3)}
.inq-box h3{font-size:20px;color:var(--ink);margin-bottom:14px}
.inq-box input,.inq-box textarea{width:100%;border:1px solid var(--line);border-radius:0;padding:11px 13px;margin-bottom:11px;font:inherit;font-size:14.5px;color:var(--ink);background:#FBFCFD}
.inq-box input:focus,.inq-box textarea:focus{outline:none;border-color:var(--red)}
.inq-note{font-size:12px;color:var(--faint);margin:2px 0 12px}
.inq-actions{display:flex;gap:10px;justify-content:flex-end}
.inq-btn{border-radius:0;padding:11px 20px;font-weight:700;font-size:14.5px;cursor:pointer;border:none}
.inq-btn.primary{background:var(--btn-dark);color:#fff}
.inq-btn.primary:hover{background:var(--red)}
.inq-btn.ghost{background:none;border:1.5px solid var(--line);color:var(--muted)}
.inq-prod{display:none}

/* partner university logo band */
.uniband{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 32px}
.uniband img{height:70px;width:auto;opacity:.88}
@media(max-width:1100px){.uniband{gap:24px 30px}.uniband img{height:56px}}
@media(max-width:700px){.uniband{gap:20px 24px}.uniband img{height:46px}}

/* ===== section bands — v2: candy colors retired, carbon takes over =====
   band-cream: light gray content band (news).
   band-sky:   carbon "telemetry" band (trust stats) — lime numbers, white heads.
   band-lime/green/orange (subpage headers) + band-black (CTA): unified carbon. */
section.band-cream{background:var(--alt)}
section.band-sky,section.band-lime,section.band-green,section.band-blue,section.band-orange,section.band-black{background:var(--carbon)}
/* light text on carbon bands */
section.band-sky h1,section.band-lime h1,section.band-green h1,section.band-blue h1,section.band-orange h1,section.band-black h1,
section.band-sky h2,section.band-lime h2,section.band-green h2,section.band-blue h2,section.band-orange h2,section.band-black h2{color:#fff}
section.band-sky .lead,section.band-lime .lead,section.band-green .lead,section.band-blue .lead,section.band-orange .lead,section.band-black .lead{color:#B8C2CC}
section.band-sky .kicker,section.band-lime .kicker,section.band-green .kicker,section.band-blue .kicker,section.band-orange .kicker,section.band-black .kicker{color:var(--lime)}
section.band-cream .kicker{color:var(--red)}
/* trust band: lime telemetry numbers, white logos straight on carbon */
section.band-sky h2,section.band-sky .lead{text-align:center;margin-left:auto;margin-right:auto}
section.band-sky .stat b{color:var(--lime)}
section.band-sky .stat span{color:#9AA5B1}
/* carbon band strip + buttons */
section.band-black .strip{background:var(--carbon-2);border-color:var(--carbon-line)}
section.band-black .strip p{color:#C9D2DC}
section.band-black .strip b{color:#fff}
section.band-sky .btn.ghost,section.band-lime .btn.ghost,section.band-green .btn.ghost,section.band-orange .btn.ghost,section.band-black .btn.ghost{border-color:#fff;color:#fff}
section.band-sky .btn.ghost:hover,section.band-lime .btn.ghost:hover,section.band-green .btn.ghost:hover,section.band-orange .btn.ghost:hover,section.band-black .btn.ghost:hover{background:var(--lime);border-color:var(--lime);color:#111}
/* brand-coded cards (Four ways in): white card + brand hue as a thin top rule */
.card.tint{background:#fff;border:1px solid var(--line);border-top:3px solid var(--line);box-shadow:0 2px 10px rgba(20,30,45,.05)}
.card.tint .go{font-weight:700}
.card.tint-blue,.card.tint-orange,.card.tint-green,.card.tint-lime{border-top-color:var(--hi-blue)}
.card.tint .tag{color:var(--hi-blue)}

/* rover price rows */
.prod .price{font-weight:800;font-size:17px;color:var(--ink);margin:2px 0 4px}
.prod .price small{font-weight:600;color:var(--muted);font-size:12.5px}
.usbadge{display:inline-block;background:#EAF4FF;color:#1B4E8A;border:1px solid #BBD8F5;border-radius:0;font-size:12px;font-weight:700;padding:3px 9px;margin-bottom:8px}
.prod .ext-link{font-size:13px;font-weight:700;margin-bottom:10px;display:inline-block}