:root{
  /* surfaces */
  --bg:#060a14;
  --bg-2:#080d16;
  --bg-3:#0b1220;
  /* text (all WCAG AA+ on --bg, cool-tinted, never muddy gray) */
  --ink:#f2f6ff;        /* primary 18.3:1  - headings + emphasis */
  --ink-dim:#cad5ea;    /* secondary 13.4:1 - standard running body */
  --ink-faint:#9fb0cc;  /* muted 9.0:1 - captions, meta, labels only */
  --ink-ghost:#7c8aa6;  /* dimmest text still passing AA (~5.9:1) */
  /* lines / glass */
  --line:rgba(159,176,204,0.14);
  --line-strong:rgba(159,176,204,0.30);
  --glass:rgba(16,24,42,0.55);
  --glass-2:rgba(20,30,52,0.72);
  /* brand */
  --cyan:#22d3ee;
  --cyan-lite:#67e8f9;
  --blue:#3b82f6;
  --violet:#8b5cf6;
  --violet-text:#a78bfa;  /* violet for TEXT (raw violet fails as small text) */
  --red:#ff3b57;
  --green:#34d399;
  --gold:#e0b64a;
  --amber:#ffb020;
  /* type */
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
  --measure:68ch;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
:focus-visible{outline:3px solid var(--amber); outline-offset:4px;}
.skip-link{
  position:fixed; top:10px; left:12px; z-index:200;
  padding:0.65rem 0.9rem; background:var(--amber); color:#111827;
  font-family:var(--mono); font-size:12px; font-weight:700; text-decoration:none;
  transform:translateY(-160%);
}
.skip-link:focus{transform:translateY(0);}
body{
  margin:0; background:var(--bg); color:var(--ink-dim);
  font-family:var(--font); font-size:17px; line-height:1.65; font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 1, "cv05" 1;
}
.mono{font-family:var(--mono); font-feature-settings:"liga" 0, "tnum" 1;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display); color:var(--ink); text-wrap:balance;}
p{max-width:var(--measure);}
em{font-style:normal; color:var(--violet-text); font-weight:500;}
strong{color:var(--ink); font-weight:600;}
::selection{background:rgba(34,211,238,0.25); color:#fff;}

/* ---------- ambient background ---------- */
.bg-scene{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:radial-gradient(120% 90% at 50% -10%, #0c1730 0%, var(--bg) 55%);}
.bg-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 100% 70% at 50% 0%, black 20%, transparent 75%);
  opacity:0.4;
}
.bg-glow{position:absolute; border-radius:50%; filter:blur(64px); opacity:0.45; animation:breathe 16s ease-in-out infinite;}
.bg-glow--1{width:620px; height:620px; top:-200px; left:-140px; background:radial-gradient(circle, rgba(59,130,246,0.32), transparent 70%);}
.bg-glow--2{width:560px; height:560px; top:22%; right:-180px; background:radial-gradient(circle, rgba(139,92,246,0.28), transparent 70%); animation-delay:-6s;}
.bg-glow--3{width:520px; height:520px; bottom:-160px; left:30%; background:radial-gradient(circle, rgba(34,211,238,0.20), transparent 70%); animation-delay:-11s;}
@keyframes breathe{0%,100%{transform:scale(1) translate(0,0);}50%{transform:scale(1.14) translate(20px,25px);}}

.pulse{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px 1px var(--cyan); display:inline-block; animation:blink 1.8s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.3;}}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.05rem 2rem;
  background:rgba(6,10,20,0.62); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.nav__mark{width:12px; height:12px; border-radius:3px; background:linear-gradient(135deg,var(--cyan),var(--violet)); box-shadow:0 0 14px rgba(34,211,238,0.6);}
.nav__name{font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:0.04em; color:var(--ink);}
.nav__links{display:flex; gap:1.7rem; font-size:12px; letter-spacing:0.08em;}
.nav__links a{color:var(--ink-faint); text-decoration:none; transition:color .2s;}
.nav__links a:hover{color:var(--cyan);}
.nav__status{display:flex; align-items:center; gap:0.5rem; font-size:11px; letter-spacing:0.08em; color:var(--ink-faint);}

main{position:relative; z-index:1;}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; background:radial-gradient(125% 92% at 60% -8%, #0c1730 0%, #060a14 62%);}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1;}
/* left scrim: keeps the hero copy crisp over the 3D scene, no text/object overlap */
.hero::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg, var(--bg) 0%, rgba(6,10,20,0.9) 34%, rgba(6,10,20,0.45) 54%, transparent 72%);}
.hero__content{position:relative; z-index:5; max-width:660px; padding:8rem 2rem 6rem; margin-left:max(2rem, 6vw);}
.hero__kicker{display:inline-flex; align-items:center; gap:0.6rem; font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--cyan); margin:0 0 1.6rem; padding:0.45rem 0.9rem; border:1px solid var(--line-strong); border-radius:4px; background:rgba(8,13,22,0.5);}
.hero h1{font-size:clamp(2.5rem, 5.8vw, 4.4rem); font-weight:700; line-height:1.05; letter-spacing:-0.022em; margin:0 0 1.5rem; color:var(--ink); text-shadow:0 2px 40px rgba(6,10,20,0.6);}
.hero__sub{font-size:19px; line-height:1.6; color:var(--ink-dim); max-width:56ch; margin:0 0 2.4rem;}
.hero__cta{display:flex; gap:0.9rem; flex-wrap:wrap;}
.hero__scrollhint{position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:5; font-family:var(--mono); font-size:10.5px; letter-spacing:0.32em; color:var(--ink-ghost); animation:floaty 2.4s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translate(-50%,0); opacity:0.5;}50%{transform:translate(-50%,6px); opacity:1;}}

/* ---------- hero HUD callouts (instrument grammar, not glass pills) ---------- */
.hero__hud{position:absolute; inset:0; z-index:3; pointer-events:none;}
.hud{position:absolute; display:flex; align-items:center; font-family:var(--mono);}
.hud__node{width:7px; height:7px; flex:none; position:relative; border:1px solid var(--cyan); border-radius:50%; box-shadow:0 0 8px rgba(34,211,238,0.5);}
.hud__node::after{content:""; position:absolute; inset:2px; border-radius:50%; background:var(--cyan); animation:blink 2.2s ease-in-out infinite;}
.hud__lead{width:34px; height:1px; flex:none; background:linear-gradient(90deg, var(--cyan) 0%, var(--line-strong) 55%, transparent 100%); opacity:0.75;}
.hud__frame{position:relative; padding:7px 12px 8px; margin-left:2px;}
.hud__frame::before,.hud__frame::after{content:""; position:absolute; width:9px; height:9px; border:1px solid var(--line-strong);}
.hud__frame::before{top:0; left:0; border-right:0; border-bottom:0;}
.hud__frame::after{bottom:0; right:0; border-left:0; border-top:0;}
.hud__label{display:block; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap;}
.hud__val{display:block; font-size:15px; letter-spacing:0.01em; color:var(--ink); font-variant-numeric:tabular-nums; margin-top:3px; white-space:nowrap;}
.hud__val b{font-weight:600; color:var(--cyan);}      /* the live/measured value */
.hud__val i{font-style:normal; color:var(--ink-faint); font-size:12px;}  /* unit */
/* positions - all on the right side, clear of the hero text on the left */
.hud--rsrp{top:16%; right:7%;}
.hud--pci{top:35%; right:4%;}
.hud--sinr{bottom:32%; right:8%;}
.hud--gnss{bottom:16%; right:22%;}
@media (max-width:1100px){ .hud--sinr{display:none;} }
@media (max-width:820px){ .hero__hud{display:none;} }

/* ---------- telemetry strip (docked scanner readout) ---------- */
.telemetry{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; gap:0; height:44px;
  padding:0 1.4rem; overflow:hidden;
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.04em;
  color:var(--ink-dim); font-variant-numeric:tabular-nums;
  background:linear-gradient(0deg, rgba(6,10,20,0.92), rgba(6,10,20,0.35));
  border-top:1px solid var(--line);
}
.telemetry__tag{color:var(--cyan); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; padding-right:1rem; white-space:nowrap;}
.telemetry__track{flex:1; overflow:hidden; margin:0 1rem; -webkit-mask:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);}
.telemetry__scroll{display:inline-flex; align-items:center; white-space:nowrap; animation:ticker 34s linear infinite; will-change:transform;}
.telemetry__group{display:inline-flex; align-items:center; gap:1.4rem; padding-right:1.4rem;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.telemetry__field{display:inline-flex; align-items:center; gap:0.45rem;}
.telemetry__field span{color:var(--ink-faint);}
.telemetry__field b{color:var(--ink); font-weight:500;}
.telemetry__field .hot{color:var(--cyan);}
.telemetry__sep{width:1px; height:14px; background:var(--line-strong); flex:none;}
.telemetry__spark{width:74px; height:22px; flex:none; margin-left:auto;}
@media (max-width:820px){ .telemetry{display:none;} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:0.6rem; text-decoration:none; font-family:var(--mono); font-size:12.5px; letter-spacing:0.05em; padding:0.9rem 1.5rem; border-radius:8px; transition:transform .2s, box-shadow .2s, border-color .2s, color .2s;}
.btn--primary{background:linear-gradient(135deg,var(--cyan),var(--blue)); color:#04121f; font-weight:700; box-shadow:0 10px 30px -10px rgba(34,211,238,0.5);}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(34,211,238,0.7);}
.btn--ghost{border:1px solid var(--line-strong); color:var(--ink); background:var(--glass);}
.btn--ghost:hover{border-color:var(--cyan); color:var(--cyan);}

/* ---------- sections ---------- */
.section{max-width:1140px; margin:0 auto; padding:clamp(72px,10vw,132px) 2rem;}
.section--flush{padding-bottom:2rem;}
.section__head{max-width:780px; margin:0 0 3.4rem;}
.tag{font-family:var(--mono); color:var(--cyan); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; margin:0 0 1.1rem;}
h2{font-size:clamp(1.9rem, 4vw, 2.75rem); font-weight:600; letter-spacing:-0.015em; line-height:1.14; margin:0 0 1rem;}
.section__lead{color:var(--ink-dim); font-size:19px; line-height:1.6; max-width:62ch; margin:0.8rem 0 0;}

/* ---------- expertise cards ---------- */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem;}
.card--wide{grid-column:1 / -1;}
.card{
  background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:2.1rem 2rem;
  backdrop-filter:blur(14px); position:relative; overflow:hidden;
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.card::after{content:""; position:absolute; inset:0; border-radius:16px; padding:1px; background:linear-gradient(135deg, rgba(34,211,238,0.5), transparent 42%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s;}
.card:hover{transform:translateY(-4px); border-color:var(--line-strong); box-shadow:0 30px 60px -30px rgba(34,211,238,0.35);}
.card:hover::after{opacity:1;}
.card__icon{width:54px; height:54px; margin-bottom:1.2rem; display:block; filter:drop-shadow(0 0 10px rgba(34,211,238,0.25));}
.ic-wave{animation:icWave 2.6s ease-in-out infinite;}
@keyframes icWave{0%,100%{opacity:0.35;}50%{opacity:0.95;}}
.ic-blink{animation:icBlink 2s ease-in-out infinite;}
.ic-blink:nth-of-type(2){animation-delay:0.4s;}
.ic-blink:nth-of-type(3){animation-delay:0.8s;}
@keyframes icBlink{0%,100%{opacity:1;}50%{opacity:0.3;}}
.ic-spin{transform-origin:24px 24px; animation:icSpin 14s linear infinite;}
@keyframes icSpin{to{transform:rotate(360deg);}}
.card h3{font-size:1.35rem; font-weight:600; margin:0 0 0.8rem; letter-spacing:-0.01em;}
.card p{color:var(--ink-dim); font-size:15.5px; line-height:1.6; margin:0 0 1rem; max-width:none;}
.card__meta{font-family:var(--mono); color:var(--cyan); font-size:12.5px; letter-spacing:0.03em; margin:0; opacity:0.9;}
@media (max-width:760px){ .cards{grid-template-columns:1fr;} }

/* ---------- HiCellTek product ---------- */
.product{display:grid; grid-template-columns:1.05fr 1fr; gap:3.5rem; align-items:center;}
.product__text p{color:var(--ink-dim); font-size:17px; line-height:1.65; margin:0 0 1.6rem;}
.product__feats{list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:1rem; font-size:15px; color:var(--ink-dim);}
.product__feats li{display:flex; align-items:center; gap:0.75rem;}
.dot{width:8px; height:8px; border-radius:50%; flex:none;}
.dot--cyan{background:var(--cyan); box-shadow:0 0 10px var(--cyan);}
.dot--violet{background:var(--violet); box-shadow:0 0 10px var(--violet);}
.dot--blue{background:var(--blue); box-shadow:0 0 10px var(--blue);}
.product__demo{display:flex; flex-direction:column; align-items:center; justify-content:center;}
.phone-mock{width:284px; height:568px; border-radius:38px; background:linear-gradient(160deg,#0e1830,#0a1120); border:1px solid var(--line-strong); padding:14px; position:relative; box-shadow:0 40px 80px -30px rgba(0,0,0,0.8), 0 0 60px -20px rgba(34,211,238,0.3);}
.phone-mock__notch{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#060a14; border-radius:0 0 14px 14px; z-index:2;}
.phone-mock__screen{width:100%; height:100%; border-radius:26px; background:#050b16; overflow:hidden; position:relative;}
.pm-shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
.phone-cap{margin-top:1.2rem; text-align:center; font-family:var(--mono); font-size:11.5px; letter-spacing:0.03em; color:var(--ink-faint); max-width:none;}
@media (max-width:860px){ .product{grid-template-columns:1fr; gap:2.8rem;} }

/* ---------- about + portrait ---------- */
.about{display:grid; grid-template-columns:0.98fr 1.02fr; gap:3.2rem; align-items:center;}
.about__figure{position:relative; margin:0;}
.about__portrait{width:100%; height:auto; display:block; border-radius:14px; border:1px solid var(--line-strong); box-shadow:0 40px 90px -40px rgba(0,0,0,0.85);}
.about__figure::after{content:""; position:absolute; inset:0; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(34,211,238,0.12); pointer-events:none;}
.about__loc{display:flex; align-items:center; justify-content:center; gap:0.55rem; margin:1.1rem 0 0; font-family:var(--mono); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint);}
.about__text p{color:var(--ink-dim); font-size:18px; line-height:1.68; margin:0 0 1.4rem;}
.about__text p.about__lead{font-size:21px; color:var(--ink); line-height:1.55;}
.about__sig{font-family:var(--mono); font-size:13px; color:var(--ink-faint); letter-spacing:0.04em; margin-top:1.6rem;}
@media (max-width:860px){ .about{grid-template-columns:1fr; gap:2.4rem;} .about__figure{max-width:360px;} }

/* ---------- validation RAN drive-test tour (sticky scroll-scrub) ---------- */
.tour-spacer{position:relative; height:420vh;}
.tour{position:sticky; top:0; height:100vh; width:100%; overflow:hidden; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); background:radial-gradient(120% 100% at 60% 0%, #0c1830 0%, var(--bg) 70%);}
.route-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.tour::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, var(--bg) 0%, rgba(6,10,20,0.86) 40%, rgba(6,10,20,0.4) 52%, transparent 64%);}
.tour__stop{position:absolute; left:6%; top:50%; transform:translateY(-50%); z-index:2; max-width:430px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, visibility 0s linear .18s;}
.tour__stop.active{opacity:1; visibility:visible; transition:opacity .18s ease, visibility 0s linear 0s;}
.tour__date{font-family:var(--mono); font-size:12.5px; letter-spacing:0.08em; margin:0 0 0.7rem;}
.tour__stop[data-color="cyan"] .tour__date{color:var(--cyan);}
.tour__stop[data-color="violet"] .tour__date{color:var(--violet-text);}
.tour__stop[data-color="red"] .tour__date{color:var(--red);}
.tour__stop h3{font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:600; margin:0 0 0.9rem; line-height:1.12; letter-spacing:-0.01em;}
.tour__stop p{font-size:16px; line-height:1.6; color:var(--ink-dim); margin:0 0 1rem; max-width:42ch;}
.tour__rf{display:inline-flex; font-family:var(--mono); font-size:12px; letter-spacing:0.03em; color:var(--cyan); background:rgba(34,211,238,0.08); border:1px solid var(--line-strong); padding:0.45rem 0.75rem; border-radius:5px; margin:0; font-variant-numeric:tabular-nums;}
.tour__handover{position:absolute; top:1.6rem; left:50%; transform:translate(-50%,-10px); z-index:3; font-family:var(--mono); background:linear-gradient(135deg,var(--cyan),var(--blue)); color:#04121f; font-weight:700; font-size:11.5px; letter-spacing:0.04em; padding:0.5rem 1rem; border-radius:99px; opacity:0; transition:opacity .2s, transform .2s; white-space:nowrap;}
.tour__handover.show{opacity:1; transform:translate(-50%,0);}
.tour__progress{position:absolute; top:1.6rem; right:1.6rem; z-index:2; display:flex; align-items:center; gap:0.75rem; font-family:var(--mono); font-size:11px; color:var(--ink-faint);}
.tour__bar{width:120px; height:3px; background:var(--line); border-radius:99px; overflow:hidden; display:block;}
.tour__bar-fill{display:block; height:100%; width:5%; background:linear-gradient(90deg,var(--cyan),var(--violet)); border-radius:99px;}
.tour__hint{position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--ink-ghost);}
@media (max-width:760px){ .tour__stop{left:5%; right:5%; max-width:none;} .tour-spacer{height:360vh;} }

/* ---------- leadership ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-bottom:2.4rem;}
.stat{background:var(--glass); border:1px solid var(--line); border-radius:14px; padding:1.5rem; backdrop-filter:blur(10px);}
.stat b{display:block; font-family:var(--font-display); font-size:2.6rem; font-weight:700; background:linear-gradient(90deg,var(--cyan),var(--violet-text)); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; font-variant-numeric:tabular-nums;}
.stat span{display:block; font-size:13px; color:var(--ink-faint); margin-top:0.6rem;}
.lead-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.lead-card{background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:1.8rem; backdrop-filter:blur(10px);}
.lead-card h3{font-size:1.2rem; font-weight:600; margin:0 0 0.9rem; letter-spacing:-0.01em;}
.lead-card p{font-size:15px; line-height:1.62; color:var(--ink-dim); margin:0; max-width:none;}
.lead-card p.mono{font-family:var(--mono); font-size:12.5px; color:var(--cyan); line-height:2;}
.lead-top{display:grid; grid-template-columns:auto 1fr; gap:3rem; align-items:center; margin-bottom:3.4rem;}
.lead-figure{margin:0; position:relative; width:300px; max-width:100%;}
.lead-photo{width:100%; height:auto; display:block; border-radius:16px; border:1px solid var(--line-strong); box-shadow:0 40px 90px -40px rgba(0,0,0,0.85);}
.lead-head .tag{margin-top:0;}
.lead-intro{color:var(--ink-dim); font-size:18px; line-height:1.65; margin:1.2rem 0 0; max-width:50ch;}
@media (max-width:860px){ .stats{grid-template-columns:repeat(2,1fr);} .lead-grid{grid-template-columns:1fr;} .lead-top{grid-template-columns:1fr; gap:2rem;} .lead-figure{max-width:340px;} }

/* ---------- social row ---------- */
.social{display:flex; gap:0.8rem; flex-wrap:wrap; justify-content:center; margin:2.2rem 0 0;}
.social a{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.04em; text-decoration:none;
  color:var(--ink); background:var(--glass); border:1px solid var(--line-strong);
  padding:0.7rem 1.05rem; border-radius:8px; transition:border-color .2s, color .2s, transform .2s, background .2s;
}
.social a:hover{border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); background:rgba(34,211,238,0.06);}
.social svg{width:16px; height:16px; flex:none;}

/* ---------- resources ---------- */
.resources{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.res-card{display:flex; flex-direction:column; gap:0.7rem; min-height:210px; background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:1.9rem 1.8rem; text-decoration:none; color:inherit; backdrop-filter:blur(12px); transition:transform .25s, border-color .25s, box-shadow .25s;}
.res-card:hover{transform:translateY(-5px); border-color:var(--cyan); box-shadow:0 26px 54px -30px rgba(34,211,238,0.42);}
.res-card__icon{width:38px; height:38px; color:var(--cyan); filter:drop-shadow(0 0 10px rgba(34,211,238,0.3));}
.res-card h3{font-size:1.2rem; font-weight:600; margin:0.3rem 0 0; letter-spacing:-0.01em;}
.res-card p{font-size:15px; line-height:1.6; color:var(--ink-dim); margin:0; max-width:none;}
.res-card__go{margin-top:auto; font-size:12px; letter-spacing:0.04em; color:var(--cyan);}
@media (max-width:820px){ .resources{grid-template-columns:1fr;} }

/* ---------- contact ---------- */
.section--contact{padding-bottom:8rem;}
.contact{text-align:center; max-width:760px; margin:0 auto;}
.contact h2{text-wrap:balance;}
.contact__lead{color:var(--ink-dim); font-size:19px; line-height:1.6; margin:0 auto 2.4rem; max-width:56ch;}
.contact__links{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}
.contact__foot{font-family:var(--mono); margin-top:2.4rem; color:var(--ink-faint); font-size:12.5px; letter-spacing:0.03em; max-width:none;}
.contact--split{display:grid; grid-template-columns:0.72fr 1.28fr; gap:3.4rem; align-items:center; max-width:1040px; text-align:left;}
.contact__figure{margin:0;}
.contact__photo{width:100%; height:auto; max-height:560px; object-fit:cover; object-position:top center; display:block; border-radius:16px; border:1px solid var(--line-strong); box-shadow:0 40px 90px -40px rgba(0,0,0,0.85);}
.contact--split .contact__lead{margin-left:0; margin-right:0;}
.contact--split .contact__links, .contact--split .social{justify-content:flex-start;}
@media (max-width:820px){ .contact--split{grid-template-columns:1fr; gap:2rem; text-align:center;} .contact__figure{max-width:320px; margin:0 auto;} .contact--split .contact__lead{margin-left:auto; margin-right:auto;} .contact--split .contact__links, .contact--split .social{justify-content:center;} }

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(26px);}

@media (prefers-reduced-motion: reduce){
  .bg-glow, .pulse, .hero__scrollhint, .hud__node::after, .telemetry__scroll{animation:none !important;}
  .reveal{opacity:1; transform:none;}
  html{scroll-behavior:auto;}
}

/* ---------- nav theme toggle ---------- */
.nav__actions{display:flex; align-items:center; gap:0.6rem;}
.nav__lang{font-family:var(--mono); font-size:12px; letter-spacing:0.08em; color:var(--ink-faint); text-decoration:none; padding:0.45rem 0.6rem; border:1px solid var(--line-strong); border-radius:8px; transition:color .2s, border-color .2s;}
.nav__lang:hover{color:var(--cyan); border-color:var(--cyan);}
.nav__btn{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border-radius:8px; border:1px solid var(--line-strong); background:transparent; color:var(--ink-dim); cursor:pointer; transition:color .2s, border-color .2s;}
.nav__btn:hover{color:var(--cyan); border-color:var(--cyan);}
.nav__menu{display:none; width:auto; min-width:54px; padding:0 0.65rem; font-size:10px; letter-spacing:0.06em;}
.nav__btn svg{width:18px; height:18px;}
.nav__btn .ic-moon{display:none;}
html[data-theme="light"] .nav__btn .ic-sun{display:none;}
html[data-theme="light"] .nav__btn .ic-moon{display:inline-block;}

@media (max-width:900px){
  .nav{padding:0.85rem 1rem;}
  .nav__links{
    position:fixed; top:65px; left:0; right:0;
    display:grid; gap:0; padding:0.55rem 1rem 1.1rem;
    background:var(--bg-2); border-bottom:1px solid var(--line-strong);
    transform:translateY(-125%); visibility:hidden;
    transition:transform .28s cubic-bezier(.16,1,.3,1), visibility .28s;
  }
  .nav__links.is-open{transform:translateY(0); visibility:visible;}
  .nav__links a{padding:0.9rem 0.25rem; border-bottom:1px solid var(--line);}
  .nav__menu{display:inline-flex;}
}

@media (max-width:520px){
  .nav__name{font-size:13px;}
  .nav__lang{display:none;}
}

/* ================= LIGHT THEME (toggle, hybride) =================
   Contenu en clair ; nav + hero + drive-test restent sombres (zones 3D). */
html[data-theme="light"]{
  --bg:#eef1f7; --bg-2:#e6ebf4; --bg-3:#dde4f0;
  --ink:#0f1a2e; --ink-dim:#33425c; --ink-faint:#5c6b85; --ink-ghost:#7987a0;
  --line:rgba(20,40,80,0.14); --line-strong:rgba(20,40,80,0.24);
  --glass:rgba(255,255,255,0.72); --glass-2:rgba(255,255,255,0.9);
  --cyan:#0e7490; --cyan-lite:#0891b2; --violet-text:#6d28d9;
  color-scheme:light;
}
/* keep the 3D showcase zones dark: restore the dark tokens on those scopes */
html[data-theme="light"] .nav,
html[data-theme="light"] .hero,
html[data-theme="light"] .tour{
  --bg:#060a14; --bg-2:#0a1120;
  --ink:#f2f6ff; --ink-dim:#cad5ea; --ink-faint:#9fb0cc; --ink-ghost:#7c8aa6;
  --line:rgba(159,176,204,0.14); --line-strong:rgba(159,176,204,0.30);
  --glass:rgba(16,24,42,0.55); --glass-2:rgba(20,30,52,0.72);
  --cyan:#22d3ee; --cyan-lite:#67e8f9; --violet-text:#a78bfa;
}
html[data-theme="light"] .bg-scene{background:radial-gradient(120% 90% at 50% -10%, #ffffff 0%, var(--bg) 58%);}
html[data-theme="light"] .bg-glow{opacity:0.16; filter:blur(80px);}
html[data-theme="light"] .card,
html[data-theme="light"] .stat,
html[data-theme="light"] .lead-card,
html[data-theme="light"] .res-card{box-shadow:0 18px 44px -32px rgba(20,40,80,0.32);}
html[data-theme="light"] .about__portrait,
html[data-theme="light"] .lead-photo,
html[data-theme="light"] .contact__photo{box-shadow:0 30px 70px -42px rgba(20,40,80,0.38);}
html[data-theme="light"] .about__figure::after{box-shadow:inset 0 0 0 1px rgba(14,116,144,0.16);}
html[data-theme="light"] ::selection{background:rgba(14,116,144,0.22); color:#0f1a2e;}