/* =====================================================================
   My Local Everything — homepage sections (Gulf Nightfall)
   ===================================================================== */

/* ---------------------------------------------------------------- HERO */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding-top:74px; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__layer{ position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ease); }
[data-theme="day"] .hero__layer--day{ opacity:1; }
[data-theme="night"] .hero__layer--night{ opacity:1; }
.hero__still,.hero__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__vid{ opacity:0; transition:opacity .8s var(--ease); }
.hero__vid.playing{ opacity:1; }
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .9s var(--ease); }
.hero__canvas.running{ opacity:1; }
.hero__veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background:var(--veil); }
/* hero text legibility + cinematic glow */
[data-theme="day"] .hero h1{ text-shadow:0 1px 22px rgba(247,241,228,.55); }
[data-theme="night"] .hero h1{ text-shadow:0 0 2px rgba(4,6,12,.55), 0 8px 44px rgba(4,6,12,.9); }
[data-theme="night"] .hero__lede,[data-theme="night"] .hero__badge,[data-theme="night"] .hero__meta{ text-shadow:0 2px 18px rgba(4,6,12,.85); }
.hero__inner::before{ content:""; position:absolute; left:-12%; top:-12%; width:78%; height:135%; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 60% at 32% 46%, var(--hero-text-haze), transparent 72%); opacity:0; transition:opacity .5s; }
[data-theme="night"] .hero__inner::before{ opacity:1; }
.hero__inner{ position:relative; z-index:2; padding-block:clamp(2rem,8vh,5rem); }
.hero__badge{
  display:inline-flex; align-items:center; gap:.6rem; padding:.5rem 1rem; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:var(--glass); backdrop-filter:blur(8px);
  font-size:.82rem; color:var(--foam); margin-bottom:1.8rem;
}
.hero__badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.45; transform:scale(1.5);} }
.hero h1{ max-width:18ch; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:inline-block; }
.hero__lede{ margin-top:1.6rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin-top:3rem; padding-top:1.8rem; border-top:1px solid var(--line); max-width:640px; }
.hero__meta div{ display:flex; flex-direction:column; }
.hero__meta b{ font-family:var(--f-display); font-size:1.5rem; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__meta small{ color:var(--foam-2); font-size:.82rem; letter-spacing:.04em; }
.scroll-cue{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--foam-2); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; }
.scroll-cue .bar{ width:1px; height:42px; background:linear-gradient(var(--teal),transparent); animation:cue 2s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top;} 45%{ transform:scaleY(1); transform-origin:top;} 55%{ transform:scaleY(1); transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* ---------------------------------------------------------------- MARQUEE / trust */
.marquee{ border-block:1px solid var(--line); padding-block:1.6rem; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee__track{ display:flex; gap:3.5rem; width:max-content; animation:marq 32s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; color:var(--foam-2); white-space:nowrap; display:flex; align-items:center; gap:3.5rem; }
.marquee__track span::after{ content:"✦"; color:var(--teal); font-size:.7rem; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------- section head */
.sec-head{ max-width:none; display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:clamp(2.4rem,5vw,4rem); }
.sec-head .lede{ margin-top:.4rem; }
@media (min-width:900px){ .sec-head.split{ grid-template-columns:1fr 1fr; align-items:end; gap:2rem; } }

/* ---------------------------------------------------------------- SERVICES (bento) */
.services-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.2rem; }
.svc{ grid-column:span 6; min-height:240px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.svc.feature{ grid-column:span 6; grid-row:span 2; }
.svc__num{ font-family:var(--f-display); font-size:.8rem; color:var(--teal); letter-spacing:.2em; }
.svc__icon{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.2rem;
  background:radial-gradient(120% 120% at 30% 20%, rgba(31,182,201,.22), rgba(244,184,96,.06)); border:1px solid var(--line-strong); }
.svc__icon svg{ width:26px; height:26px; stroke:var(--teal-hi); }
.svc h3{ font-size:1.35rem; margin-bottom:.5rem; }
.svc p{ color:var(--foam); font-size:.96rem; }
.svc__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.svc__tags li{ font-size:.74rem; color:var(--foam-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:.3rem .7rem; }
.svc__glow{ position:absolute; width:240px; height:240px; right:-60px; bottom:-60px; border-radius:50%;
  background:radial-gradient(circle, rgba(31,182,201,.18), transparent 70%); opacity:0; transition:opacity .5s; pointer-events:none; }
.svc:hover .svc__glow{ opacity:1; }
@media (max-width:760px){ .svc, .svc.feature{ grid-column:span 12; grid-row:auto; } }

/* ---------------------------------------------------------------- WHY / split */
.why{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.why__list{ display:grid; gap:1.2rem; margin-top:1.8rem; }
.why__item{ display:flex; gap:1rem; }
.why__item .tick{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--grad-brand); color:var(--btn-ink); font-weight:800; }
.why__item h4{ font-family:var(--f-display); font-size:1.05rem; margin-bottom:.2rem; }
.why__item p{ color:var(--foam); font-size:.92rem; }
.why__visual{ position:relative; aspect-ratio:1/1; border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden;
  background:radial-gradient(80% 80% at 70% 20%, rgba(31,182,201,.18), transparent 60%), var(--base-2); display:grid; place-items:center; }
.orbit{ position:relative; width:78%; aspect-ratio:1; }
.orbit .core{ position:absolute; inset:0; margin:auto; width:96px; height:96px; border-radius:24px; background:var(--grad-brand); display:grid; place-items:center; color:var(--btn-ink); font-family:var(--f-display); font-weight:800; box-shadow:var(--glow-teal); }
.orbit .ring{ position:absolute; inset:0; border:1px dashed var(--line-strong); border-radius:50%; animation:spin 24s linear infinite; }
.orbit .ring.r2{ inset:16%; animation-duration:18s; animation-direction:reverse; }
.orbit .ring.r3{ inset:32%; animation-duration:12s; }
.orbit .node{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:40px; height:40px; border-radius:11px; background:var(--base-3); border:1px solid var(--line-strong); display:grid; place-items:center; }
.orbit .node svg{ width:20px; height:20px; stroke:var(--teal-hi); }
.orbit .r2 .node{ background:var(--base-3); }
@keyframes spin{ to{ transform:rotate(360deg); } }
/* local photo variant of the why-visual */
.why__visual--photo{ display:block; }
.why__visual--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
[data-theme="night"] .why__visual--photo img{ filter:brightness(.72) saturate(1.1) hue-rotate(8deg); }
.why__tag{ position:absolute; left:14px; bottom:14px; z-index:2; display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:var(--r-pill); background:var(--glass); backdrop-filter:blur(10px);
  border:1px solid var(--line-strong); font-family:var(--f-display); font-weight:600; font-size:.82rem; color:var(--ink); }
.why__tag svg{ width:15px; height:15px; stroke:var(--teal); flex:0 0 auto; }
@media (max-width:820px){ .why{ grid-template-columns:1fr; } .why__visual{ max-width:420px; } }

/* ---------------------------------------------------------------- STAT BAND */
.stats{ border-block:1px solid var(--line); background:linear-gradient(180deg, rgba(31,182,201,.04), transparent); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.stat{ background:var(--base); padding:clamp(1.6rem,3vw,2.6rem); text-align:center; }
.stat b{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.2rem,4.5vw,3.4rem); line-height:1;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; }
.stat small{ display:block; margin-top:.7rem; color:var(--foam); font-size:.9rem; letter-spacing:.02em; }
@media (max-width:760px){ .stats-grid{ grid-template-columns:1fr 1fr; } }

/* ---------------------------------------------------------------- PROCESS */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; counter-reset:step; }
.step{ position:relative; padding-top:2.4rem; }
.step::before{ counter-increment:step; content:"0" counter(step); font-family:var(--f-display); font-weight:800;
  font-size:2.4rem; color:transparent; -webkit-text-stroke:1px var(--teal); display:block; margin-bottom:.6rem; }
.step::after{ content:""; position:absolute; top:2.9rem; left:2.6rem; right:-.6rem; height:1px; background:linear-gradient(90deg,var(--line-strong),transparent); }
.step:last-child::after{ display:none; }
.step h4{ font-family:var(--f-display); font-size:1.15rem; margin-bottom:.4rem; }
.step p{ color:var(--foam); font-size:.92rem; }
@media (max-width:820px){ .process{ grid-template-columns:1fr 1fr; } .step::after{ display:none; } }
@media (max-width:480px){ .process{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- PORTFOLIO */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.work{ display:block; overflow:hidden; padding:0; }
.work__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--base-3); }
.work__media .frame{ position:absolute; inset:0; display:grid; place-content:center; gap:.4rem; text-align:center; padding:1rem;
  background:linear-gradient(135deg, rgba(31,182,201,.12), rgba(244,184,96,.08)); }
.work__media .frame b{ font-family:var(--f-display); font-size:1.25rem; color:var(--ink); letter-spacing:-.01em; }
.work__media .frame span{ font-size:.78rem; color:var(--foam); }
.work__media::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 120%, var(--media-veil), transparent); }
.work__body{ padding:1.2rem 1.4rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.work__body h4{ font-family:var(--f-display); font-size:1.05rem; }
.work__body span{ display:block; color:var(--foam-2); font-size:.82rem; margin-top:.15rem; }
.work__arrow{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; transition:.4s var(--ease); }
.work__arrow svg{ width:16px; height:16px; stroke:var(--teal-hi); transition:.4s var(--ease); }
.work:hover .work__arrow{ background:var(--grad-brand); border-color:transparent; }
.work:hover .work__arrow svg{ stroke:var(--btn-ink); transform:translate(2px,-2px); }
@media (max-width:880px){ .work-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .work-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- TESTIMONIALS */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.quote{ display:flex; flex-direction:column; gap:1.2rem; }
.quote p{ font-size:1.02rem; color:var(--ink); }
.quote .mark{ font-family:var(--f-display); font-size:2.6rem; color:var(--teal); line-height:.4; height:1rem; }
.quote footer{ display:flex; align-items:center; gap:.8rem; margin-top:auto; }
.quote .av{ width:40px; height:40px; border-radius:50%; background:var(--grad-brand); display:grid; place-items:center; color:var(--btn-ink); font-family:var(--f-display); font-weight:800; }
.quote cite{ font-style:normal; font-family:var(--f-display); font-weight:600; font-size:.92rem; }
.quote cite small{ display:block; color:var(--foam-2); font-weight:400; font-size:.8rem; }
@media (max-width:880px){ .quotes{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- FAQ */
.faq{ max-width:820px; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.4rem 0; font-family:var(--f-display); font-weight:600; font-size:1.1rem; }
.faq__q .ic{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong); position:relative; transition:.3s; }
.faq__q .ic::before,.faq__q .ic::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--teal-hi); transition:.3s var(--ease); }
.faq__q .ic::before{ width:12px; height:2px; } .faq__q .ic::after{ width:2px; height:12px; }
.faq__item.open .ic{ background:var(--grad-brand); border-color:transparent; }
.faq__item.open .ic::before,.faq__item.open .ic::after{ background:var(--btn-ink); }
.faq__item.open .ic::after{ transform:rotate(90deg); opacity:0; }
.faq__a{ overflow:hidden; height:0; transition:height .4s var(--ease); }
.faq__a p{ padding:0 0 1.4rem; color:var(--foam); max-width:68ch; }

/* ---------------------------------------------------------------- CTA / contact */
.cta{ position:relative; overflow:hidden; }
.cta__panel{ position:relative; border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:clamp(2.4rem,6vw,5rem);
  background:radial-gradient(90% 120% at 50% 0%, rgba(31,182,201,.14), transparent 60%), var(--base-2); text-align:center; overflow:hidden; }
.cta__panel::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:var(--grad-brand); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.4; }
.cta__panel h2{ max-width:18ch; margin-inline:auto; }
.cta__panel .lede{ margin:1.2rem auto 0; }
.cta__panel .hero__cta{ justify-content:center; }
.cta__form{ display:flex; gap:.8rem; max-width:460px; margin:2rem auto 0; flex-wrap:wrap; }
.cta__form input{ flex:1; min-width:200px; padding:.95rem 1.2rem; border-radius:var(--r-pill); border:1px solid var(--line-strong);
  background:var(--glass); color:var(--ink); font:inherit; }
.cta__form input::placeholder{ color:var(--foam-2); }
.cta__form input:focus{ outline:none; border-color:var(--teal); box-shadow:var(--glow-teal); }
.cta__note{ margin-top:1rem; color:var(--foam-2); font-size:.82rem; }

/* ---------------------------------------------------------------- utility */
.center{ text-align:center; }
.mt-l{ margin-top:2.4rem; }

/* =====================================================================
   CINEMATIC KIT (v4) — globe, masked reveals, spotlight, tilt, parallax, band
   ===================================================================== */

/* ---- 3D globe / reach section ---- */
.reach{ position:relative; overflow:hidden; }
.reach::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(48% 58% at 76% 50%, var(--globe-glow), transparent 70%); }
.reach-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.reach-points{ display:grid; gap:1.1rem; margin-top:2rem; }
.reach-points li{ display:flex; flex-direction:column; gap:.1rem; padding-left:1rem; border-left:2px solid var(--line-strong); }
.reach-points b{ font-family:var(--f-display); font-weight:700; font-size:1.15rem; }
.reach-points span{ color:var(--foam); font-size:.9rem; }
.reach-stage{ position:relative; width:100%; max-width:560px; aspect-ratio:1; margin-inline:auto; }
.reach-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
.reach-glow{ position:absolute; inset:10%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, var(--globe-glow), transparent 64%); filter:blur(10px);
  animation:pulseGlow 6s var(--ease) infinite; }
@keyframes pulseGlow{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.07); opacity:1; } }
@media (max-width:820px){ .reach-grid{ grid-template-columns:1fr; } .reach-stage{ max-width:400px; } }

/* ---- masked headline reveal (JS adds .in) ---- */
.reveal-mask{ overflow:hidden; padding-bottom:.08em; }
.reveal-mask > span{ display:inline-block; transform:translateY(115%); will-change:transform; }
html.no-js .reveal-mask > span{ transform:none; }

/* ---- card cursor spotlight ---- */
.card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4; opacity:0;
  transition:opacity .45s var(--ease);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), var(--spot), transparent 62%); }
.card:hover::after{ opacity:1; }

/* ---- tilt (JS-driven transform) ---- */
.tilt{ transform-style:preserve-3d; }

/* ---- parallax ---- */
[data-parallax]{ will-change:transform; }

/* ---- living atmosphere: slowly drifting bloom ---- */
body::before{ animation:bloomDrift 26s ease-in-out infinite alternate; }
@keyframes bloomDrift{ 0%{ transform:translate3d(0,0,0) scale(1); } 100%{ transform:translate3d(-2%,1.5%,0) scale(1.06); } }

/* ---- dramatic parallax divider band ---- */
.band{ position:relative; min-height:66vh; display:grid; place-items:center; overflow:hidden; text-align:center; isolation:isolate; }
.band__bg{ position:absolute; inset:-20% 0; z-index:0; }
.band__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s var(--ease); }
[data-theme="day"] .band__bg .b-day{ opacity:1; }
[data-theme="night"] .band__bg .b-night{ opacity:1; }
.band__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(2,6,12,.62) 0%, rgba(2,6,12,.34) 48%, rgba(2,6,12,.74) 100%); }
.band__inner{ position:relative; z-index:2; color:#fff; padding-block:clamp(3rem,8vw,6rem); }
.band__inner .eyebrow{ color:#7DF6FF; justify-content:center; }
.band__inner h2{ color:#fff; max-width:16ch; margin-inline:auto; text-shadow:0 4px 40px rgba(0,0,0,.55); }
.band__inner .lede{ color:rgba(255,255,255,.85); margin:1.2rem auto 0; }

/* =====================================================================
   ENTRY GATE — Local vs Global (v5)
   ===================================================================== */
.gate{ position:fixed; inset:0; z-index:10000; background:#05080F; color:#fff;
  display:flex; flex-direction:column; opacity:1; transition:opacity .7s var(--ease); }
.gate[hidden]{ display:none; }
.gate.hide{ opacity:0; pointer-events:none; }
.gate__head{ position:absolute; inset:0 0 auto 0; z-index:3; text-align:center;
  padding:clamp(1.4rem,4vw,2.6rem) 1rem 0; pointer-events:none; }
.gate__brand{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-display); font-weight:700; font-size:1rem; }
.gate__brand .mark{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(100deg,#1FB6C9,#F4B860); color:#04222a; font-weight:800; }
.gate__q{ font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; font-size:clamp(1.7rem,4.4vw,2.9rem); margin-top:1.1rem; }
.gate__sub{ color:rgba(255,255,255,.68); font-size:.96rem; margin-top:.5rem; }
.gate__doors{ flex:1; display:grid; grid-template-columns:1fr 1fr; }
.gate__door{ position:relative; overflow:hidden; isolation:isolate; cursor:pointer; border:none; color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.7rem; text-align:left;
  padding:clamp(2rem,5vw,4.5rem); min-height:62vh; transition:flex-grow .5s var(--ease); }
.gate__door::before{ content:""; position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
  transform:scale(1.06); transition:transform .9s var(--ease), filter .6s; }
.door-local::before{ background-image:linear-gradient(0deg, rgba(8,30,42,.72), rgba(8,30,42,.18)), url('assets/img/day-hero.webp'); }
.door-global::before{ background-image:linear-gradient(0deg, rgba(2,4,10,.78), rgba(2,4,10,.3)), url('assets/img/ai-core.webp'); filter:saturate(1.1); }
.gate__door::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:.85; transition:opacity .5s; }
.door-local::after{ background:linear-gradient(130deg, rgba(31,182,201,.34), rgba(244,184,96,.20)); }
.door-global::after{ background:linear-gradient(130deg, rgba(39,206,224,.22), rgba(124,77,255,.30)); }
.gate__door:hover::before{ transform:scale(1.13); }
.gate__door:hover::after{ opacity:.6; }
.gate__door:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }
.gate__icon{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(6px); }
.gate__icon svg{ width:28px; height:28px; }
.gate__lab{ font-family:var(--f-display); font-weight:800; letter-spacing:-.02em; font-size:clamp(2.4rem,6vw,4rem); line-height:1; }
.gate__desc{ max-width:34ch; color:rgba(255,255,255,.9); font-size:1.02rem; line-height:1.5; }
.gate__go{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.6rem; font-family:var(--f-display); font-weight:600;
  padding:.7rem 1.2rem; border-radius:var(--r-pill); background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  align-self:flex-start; transition:background .3s, transform .3s var(--ease); }
.gate__go svg{ width:1.05em; height:1.05em; transition:transform .3s var(--ease); }
.gate__door:hover .gate__go{ background:rgba(255,255,255,.26); transform:translateY(-2px); }
.gate__door:hover .gate__go svg{ transform:translateX(3px); }
@media (min-width:820px){ .gate__door:hover{ flex-grow:1.18; } }
@media (max-width:820px){ .gate__doors{ grid-template-columns:1fr; } .gate__door{ min-height:42vh; } .gate__head{ position:static; padding-bottom:1.4rem; } .gate{ overflow:auto; } }
@media (prefers-reduced-motion:reduce){ .gate,.gate__door::before,.gate__go{ transition:none; } }

/* =====================================================================
   HERO two-column + SIGNATURE INTERACTIVE SIM (award playbook v6)
   ===================================================================== */
.hero__inner{ display:grid; grid-template-columns:1.05fr .92fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero__copy{ min-width:0; }
.hero__sim{ position:relative; }
.sim{ background:var(--glass); border:1px solid var(--line-strong); border-radius:var(--r-lg); overflow:hidden;
  backdrop-filter:blur(16px) saturate(1.2); box-shadow:var(--shadow); }
.sim__bar{ display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); }
.sim__dot{ width:10px; height:10px; border-radius:50%; background:var(--line-strong); }
.sim__title{ margin-left:.5rem; font-family:var(--f-mono); font-size:.73rem; color:var(--foam-2); letter-spacing:.02em; }
.sim__body{ padding:1.1rem; min-height:298px; display:flex; flex-direction:column; gap:.7rem; font-size:.9rem; }
.sim__body--mono{ font-family:var(--f-mono); font-size:.8rem; line-height:1.55; gap:.3rem; color:var(--foam); }
.sim-msg{ max-width:84%; padding:.6rem .85rem; border-radius:14px; line-height:1.4; opacity:0; transform:translateY(8px); animation:simIn .45s var(--ease) forwards; }
.sim-msg.them{ align-self:flex-start; background:rgba(127,170,190,.14); border:1px solid var(--line); border-bottom-left-radius:5px; color:var(--ink); }
.sim-msg.ai{ align-self:flex-end; background:var(--grad-brand); color:var(--btn-ink); border-bottom-right-radius:5px; }
.sim-meta{ align-self:center; margin-top:.2rem; font-size:.72rem; color:var(--foam-2); font-family:var(--f-mono); opacity:0; animation:simIn .4s var(--ease) forwards; }
.sim-line{ opacity:0; transform:translateY(4px); animation:simIn .3s var(--ease) forwards; white-space:pre-wrap; }
.sim-line .ok{ color:#46d39a; } .sim-line .k{ color:var(--teal-hi); } .sim-line .v{ color:var(--gold); }
@keyframes simIn{ to{ opacity:1; transform:none; } }
html.reduce-motion .sim-msg, html.reduce-motion .sim-line, html.reduce-motion .sim-meta{ animation:none !important; opacity:1 !important; transform:none !important; }
@media (max-width:980px){ .hero__inner{ grid-template-columns:1fr; } .hero__sim{ display:none; } }

/* global hero headline rendered as styled heading (keeps a single real <h1>) */
.hero .hero-h{ font-family:var(--f-display); font-weight:700; line-height:1.04; letter-spacing:-.02em; max-width:18ch; }
.hero .hero-h .line{ display:block; overflow:hidden; }
.hero .hero-h .line > span{ display:inline-block; }
[data-theme="day"] .hero .hero-h{ text-shadow:0 1px 22px rgba(247,241,228,.55); }
[data-theme="night"] .hero .hero-h{ text-shadow:0 0 2px rgba(4,6,12,.55), 0 8px 44px rgba(4,6,12,.9); }

/* =====================================================================
   LOCAL / BEACHY unique effects (Day only) — v7
   ===================================================================== */
/* ambient sunlight caustics dappling the whole day page */
.caustics{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0; mix-blend-mode:soft-light; filter:blur(22px);
  transition:opacity .6s var(--ease);
  background:
    radial-gradient(38% 28% at 18% 28%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(34% 24% at 68% 58%, rgba(255,255,255,.45), transparent 62%),
    radial-gradient(30% 22% at 46% 82%, rgba(31,182,201,.35), transparent 62%),
    radial-gradient(26% 20% at 84% 22%, rgba(244,184,96,.30), transparent 62%);
  animation:caustic 16s ease-in-out infinite alternate; }
[data-theme="day"] .caustics{ opacity:.55; }
@keyframes caustic{ 0%{ transform:translate3d(0,0,0) scale(1); } 100%{ transform:translate3d(3%,-2.5%,0) scale(1.12); } }

/* animated SVG wave divider (beachy section separator) */
.wave-sep{ height:56px; width:100%; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='56' viewBox='0 0 1200 56'%3E%3Cpath d='M0 30 C150 4 300 56 450 30 S750 4 900 30 1050 56 1200 30 V56 H0 Z' fill='%231FB6C9' opacity='0.22'/%3E%3Cpath d='M0 36 C150 14 300 58 450 36 S750 14 900 36 1050 58 1200 36 V56 H0 Z' fill='%23F4B860' opacity='0.16'/%3E%3C/svg%3E") repeat-x;
  background-size:1200px 100%; animation:waveMove 14s linear infinite; }
@keyframes waveMove{ to{ background-position:1200px 0; } }
[data-theme="night"] .wave-sep{ display:none; }
html.reduce-motion .caustics, html.reduce-motion .wave-sep{ animation:none !important; }

/* gentle "tide line" animated underline under the local why-tag */
[data-theme="day"] .why__tag::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:linear-gradient(90deg, transparent, var(--teal), transparent); background-size:200% 100%; animation:tide 5s linear infinite; }
@keyframes tide{ to{ background-position:200% 0; } }

/* =====================================================================
   GLOBAL scroll-scrubbed neural connection section (v7)
   ===================================================================== */
.neural{ position:relative; height:300vh; }
.neural__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; align-items:center; }
.neural__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.neural__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(60% 70% at 50% 50%, transparent 30%, rgba(4,6,12,.55) 75%),
            linear-gradient(90deg, rgba(4,6,12,.85), transparent 55%); }
.neural__overlay{ position:relative; z-index:2; }
.neural__overlay .h-lg{ max-width:18ch; }
.neural__nodes{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; max-width:640px; margin-top:2.5rem; }
.neural__nodes li{ opacity:.28; transform:translateY(10px); transition:opacity .55s var(--ease), transform .55s var(--ease), border-color .4s, box-shadow .5s;
  padding:1rem 1.2rem; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--glass); backdrop-filter:blur(10px); }
.neural__nodes li.lit{ opacity:1; transform:none; border-color:var(--teal); box-shadow:var(--glow-teal); }
.neural__nodes b{ font-family:var(--f-display); display:block; margin-bottom:.15rem; }
.neural__nodes span{ color:var(--foam); font-size:.82rem; font-family:var(--f-mono); }
@media (max-width:760px){
  .neural{ height:auto; }
  .neural__sticky{ position:relative; height:auto; min-height:78vh; padding-block:clamp(3rem,9vw,5rem); }
  .neural__nodes{ grid-template-columns:1fr; }
}