/* ──────────────────────────────────────────────
   ROOT & RESET
────────────────────────────────────────────── */
:root {
  --black:    #000000;
  --black2:   #050608;
  --black3:   #0b0d10;
  --black4:   #14171c;
  --accent:   #60aeff;
  --accent2:  #3080ff;
  --accentlt: #a8d0ff;
  --accent3:  #6effc8;
  --white:    #ffffff;
  --offwhite: #d4d8e0;
  --muted:    #6e7480;
  --muted2:   #4a4f59;
  --border:   rgba(96,174,255,0.14);
  --border2:  rgba(255,255,255,0.06);
  --glow:     0 0 20px rgba(96,174,255,0.55), 0 0 50px rgba(96,174,255,0.25);
  --glow-sm:  0 0 8px rgba(96,174,255,0.5), 0 0 18px rgba(96,174,255,0.18);
  --glow-txt: 0 0 8px rgba(96,174,255,0.65), 0 0 22px rgba(96,174,255,0.35);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  overflow-x: hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body {
  font-family:'Figtree',sans-serif;
  font-feature-settings:'ss01','ss02';
  background:var(--black);
  color:var(--white);
  overflow-x:hidden;
  line-height:1.5;
}
body.mob-open { overflow:hidden }
body.no-scroll { overflow:hidden }

::selection { background:var(--accent); color:#000 }

/* Scanlines */
body::before {
  content:'';
  position:fixed; inset:0; z-index:9999;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,0.025) 3px, rgba(0,0,0,0.025) 4px
  );
  pointer-events:none;
}

/* ──────────────────────────────────────────────
   GRAIN OVERLAY
────────────────────────────────────────────── */
#grain {
  position:fixed; inset:-50%; z-index:9998;
  pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
  mix-blend-mode:overlay;
}
@keyframes grain {
  0%,100% { transform:translate(0,0) }
  10%     { transform:translate(-3%,-2%) }
  20%     { transform:translate(2%,1%) }
  30%     { transform:translate(-1%,3%) }
  40%     { transform:translate(3%,-1%) }
  50%     { transform:translate(-2%,2%) }
  60%     { transform:translate(2%,-3%) }
  70%     { transform:translate(-3%,1%) }
  80%     { transform:translate(1%,-2%) }
  90%     { transform:translate(-2%,3%) }
}

/* ──────────────────────────────────────────────
   LOADER
────────────────────────────────────────────── */
#loader {
  position:fixed; inset:0; z-index:99998;
  background:var(--black);
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  gap:1.5rem;
  transition:opacity .8s var(--ease-out), visibility .8s;
}
#loader.done { opacity:0; visibility:hidden; pointer-events:none }
.loader-mark {
  font-family:'Outfit',sans-serif;
  font-size:5rem; font-weight:900;
  letter-spacing:-.03em;
  color:var(--accent);
  text-shadow:var(--glow-txt);
  text-align:center;
  line-height:1;
}
.loader-letter {
  display:inline-block;
  animation:loader-letter 1.2s var(--ease-out) infinite alternate;
}
.loader-letter:nth-child(2) { animation-delay:.15s }
@keyframes loader-letter {
  from { transform:translateY(0); opacity:1 }
  to   { transform:translateY(-8px); opacity:.4 }
}
.loader-bar {
  width:200px; height:1px;
  background:rgba(255,255,255,0.08);
  position:relative; overflow:hidden;
}
.loader-bar-fill {
  position:absolute; left:0; top:0; bottom:0;
  width:0%; background:var(--accent);
  box-shadow:var(--glow-sm);
  animation:loader-bar 1.4s var(--ease-soft) forwards;
}
@keyframes loader-bar { to { width:100% } }
.loader-tag {
  font-size:.62rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted);
}

/* ──────────────────────────────────────────────
   CANVAS
────────────────────────────────────────────── */
#c3d {
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
}

/* ──────────────────────────────────────────────
   PROGRESS
────────────────────────────────────────────── */
#prog {
  position:fixed; top:0; left:0; height:1.5px; width:0%;
  background:linear-gradient(90deg, var(--accent2), var(--accent), var(--accentlt));
  box-shadow:var(--glow-sm);
  z-index:10000;
  transition:width .12s linear;
}

/* ──────────────────────────────────────────────
   SIDE NAV (minimal rail)
────────────────────────────────────────────── */
#sec-nav {
  position:fixed; right:1.5rem; top:50%; transform:translateY(-50%);
  z-index:4000;
}
.sec-list {
  list-style:none;
  display:flex; flex-direction:column; gap:.2rem;
  align-items:flex-end;
}
.s-item {
  display:flex; align-items:center; justify-content:flex-end; gap:.6rem;
  padding:.6rem 0 .6rem 2rem;
  text-decoration:none;
  color:rgba(255,255,255,0.28);
  font-size:.6rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  
  transition:color .3s var(--ease-out);
}
.s-name {
  opacity:.55;
  transition:opacity .3s, transform .3s var(--ease-out);
  font-variant-numeric:tabular-nums;
}
.s-line {
  width:12px; height:1px;
  background:currentColor;
  flex-shrink:0;
  transition:width .35s var(--ease-out), background .3s, box-shadow .3s;
}
.s-item:hover {
  color:rgba(255,255,255,0.7);
}
.s-item:hover .s-name { opacity:1 }
.s-item:hover .s-line { width:18px }
.s-item.active {
  color:var(--accent);
}
.s-item.active .s-name {
  opacity:1;
  text-shadow:var(--glow-txt);
}
.s-item.active .s-line {
  width:26px;
  background:var(--accent);
  box-shadow:var(--glow-sm);
}

/* ──────────────────────────────────────────────
   FLOATING SECTION INDICATOR (top-left badge)
────────────────────────────────────────────── */
#sec-indicator {
  position:fixed; left:5vw; bottom:2rem;
  z-index:4000;
  display:flex; align-items:center; gap:.85rem;
  padding:.7rem 1.1rem;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);
  opacity:0; transform:translateY(10px);
  pointer-events:none;
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
#sec-indicator.visible { opacity:1; transform:translateY(0) }
.si-num {
  font-family:'Outfit',sans-serif; font-weight:900;
  font-size:.8rem; color:var(--accent);
  text-shadow:var(--glow-txt);
  font-variant-numeric:tabular-nums;
  min-width:1.5em;
}
.si-divider {
  width:1px; height:14px;
  background:rgba(96,174,255,0.4);
}
.si-name {
  font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--white);
}

/* ──────────────────────────────────────────────
   BACK TO TOP
────────────────────────────────────────────── */
#back-top {
  position:fixed; bottom:1.75rem; right:1.75rem; z-index:4000;
  width:42px; height:42px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease-out), border-color .25s, box-shadow .25s, transform .25s;
}
#back-top.visible { opacity:1; pointer-events:auto }
#back-top:hover {
  border-color:var(--accent);
  box-shadow:var(--glow-sm);
  transform:translateY(-3px);
}

/* ──────────────────────────────────────────────
   NAV
────────────────────────────────────────────── */
nav#nav {
  position:fixed; top:0; left:0; right:0; z-index:5000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem 5vw;
  transition:background .5s var(--ease-out), border-color .5s, padding .35s var(--ease-out);
}
nav#nav.on {
  background:rgba(0,0,0,0.78);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  padding:.85rem 5vw;
}

.nav-logo {
  display:flex; align-items:center; gap:.75rem;
  text-decoration:none; z-index:1;
  transition:transform .25s var(--ease-out);
}
.nav-logo:hover { transform:translateX(2px) }
.logo-mark {
  width:42px; height:42px;
  border:2px solid var(--accent);
  box-shadow:var(--glow-sm);
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-weight:900; font-size:.95rem;
  color:var(--accent);
  animation:logo-flicker 8s ease-in-out infinite;
  position:relative;
}
.logo-mark::after {
  content:''; position:absolute; inset:-3px;
  border:1px solid rgba(96,174,255,0.2);
  opacity:0; transition:opacity .3s, inset .3s var(--ease-out);
}
.nav-logo:hover .logo-mark::after { opacity:1; inset:-6px }
@keyframes logo-flicker {
  0%,93%,100% { box-shadow:var(--glow-sm); opacity:1 }
  94%         { opacity:.5; box-shadow:none }
  95%         { opacity:1; box-shadow:var(--glow-sm) }
  96%         { opacity:.7; box-shadow:none }
  97%         { opacity:1; box-shadow:var(--glow-sm) }
}
.logo-text {
  font-family:'Outfit',sans-serif; font-weight:900; font-size:.95rem;
  color:var(--white); letter-spacing:0.1em; text-transform:uppercase;
}

.nav-links { display:flex; gap:2.25rem; align-items:center }
.nav-links a {
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  transition:color .25s, text-shadow .25s;
   position:relative;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:-4px;
  width:0; height:1px; background:var(--accent);
  box-shadow:var(--glow-sm);
  transition:width .35s var(--ease-out);
}
.nav-links a:hover, .nav-links a.active {
  color:var(--accent);
  text-shadow:var(--glow-txt);
}
.nav-links a:hover::after,
.nav-links a.active::after { width:100% }

.nav-cta-btn {
  border:1px solid var(--accent) !important;
  color:var(--accent) !important;
  padding:.55rem 1.4rem;
  box-shadow:var(--glow-sm) !important;
  transition:background .25s, box-shadow .25s, color .25s, transform .2s !important;
}
.nav-cta-btn::after { display:none !important }
.nav-cta-btn:hover {
  background:var(--accent) !important;
  color:#000 !important;
  box-shadow:var(--glow) !important;
  transform:translateY(-1px);
}

#mob-menu {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none;  padding:6px; z-index:1;
}
#mob-menu span {
  display:block; width:22px; height:1.5px;
  background:var(--white);
  transition:transform .35s var(--ease-out), opacity .25s, width .25s;
  transform-origin:center;
}
#mob-menu.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
#mob-menu.open span:nth-child(2) { opacity:0; width:0 }
#mob-menu.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* ──────────────────────────────────────────────
   MOBILE OVERLAY
────────────────────────────────────────────── */
#mob-overlay {
  position:fixed; inset:0; z-index:4500;
  background:rgba(0,0,0,0.97);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease-out);
}
#mob-overlay.open { opacity:1; pointer-events:auto }
.mob-inner { display:flex; flex-direction:column; align-items:center; gap:2.5rem }
.mob-inner a {
  font-family:'Outfit',sans-serif;
  font-size:2.5rem; font-weight:900; letter-spacing:-.03em;
  color:var(--white); text-decoration:none; text-transform:uppercase;
  transition:color .25s, text-shadow .25s, transform .25s;
}
.mob-inner a:hover { color:var(--accent); text-shadow:var(--glow-txt); transform:translateX(6px) }

/* ──────────────────────────────────────────────
   HERO
────────────────────────────────────────────── */
#hero {
  position:relative; z-index:2;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:9rem calc(5vw + 60px) 6rem 5vw;
  overflow:hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 5rem;
  align-items: center;
  width: 100%;
}

.ma-bg {
  position:absolute;
  right:-3vw; top:50%;
  transform:translateY(-50%);
  font-family:'Outfit',sans-serif; font-weight:900;
  font-size:clamp(20rem,40vw,56rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(96,174,255,0.05);
  pointer-events:none; user-select:none;
  letter-spacing:-0.06em;
  animation:ma-pulse 5s ease-in-out infinite;
  will-change:transform;
}
@keyframes ma-pulse {
  0%,100% { -webkit-text-stroke:1px rgba(96,174,255,0.05) }
  50%     { -webkit-text-stroke:1px rgba(96,174,255,0.12) }
}

.hero-line {
  width:80px; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent);
  box-shadow:var(--glow-sm);
  margin-bottom:2.25rem;
}

.hero-eyebrow {
  font-size:.72rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent);
  text-shadow:var(--glow-txt);
  margin-bottom:1.75rem;
  display:inline-flex; align-items:center; gap:.75rem;
}
.hero-eyebrow::before {
  content:''; width:6px; height:6px;
  background:var(--accent); border-radius:50%;
  box-shadow:var(--glow-sm);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { transform:scale(1); opacity:1 }
  50%     { transform:scale(1.4); opacity:.6 }
}

.hero-h1 {
  font-family:'Outfit',sans-serif;
  font-size:clamp(3rem,9vw,9.5rem);
  font-weight:900; line-height:.9; letter-spacing:-0.045em;
  margin-bottom:2.25rem;
}
.line-white { display:block; color:var(--white) }
.line-neon  {
  display:block;
  color:var(--accent);
  text-shadow:var(--glow-txt);
  animation:neon-pulse 3.5s ease-in-out infinite;
}
.line-outline {
  display:block;
  color:transparent;
  -webkit-text-stroke:1.5px var(--accent);
  font-weight:300;
  text-shadow:none;
  filter:drop-shadow(0 0 6px rgba(96,174,255,0.5));
}
@keyframes neon-pulse {
  0%,100% { text-shadow:var(--glow-txt) }
  50%     { text-shadow:0 0 20px var(--accent),0 0 60px var(--accent),0 0 100px var(--accentlt) }
}

.hero-sub {
  font-size:clamp(.95rem,1.4vw,1.1rem);
  color:var(--offwhite); max-width:46ch; line-height:1.85;
  margin-bottom:3rem; font-weight:400;
}

.hero-btns { display:flex; gap:1rem; flex-wrap:wrap }

/* Buttons */
.btn-neon {
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--accent); color:#000;
  padding:1.05rem 2.3rem; font-size:.88rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; 
  position:relative; overflow:hidden;
  box-shadow:var(--glow);
  transition:box-shadow .35s, transform .25s var(--ease-out);
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}
.btn-neon::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform:translateX(-100%); transition:transform .7s var(--ease-out);
}
.btn-neon:hover {
  box-shadow:0 0 30px var(--accent),0 0 80px var(--accent2);
  transform:translateY(-3px);
}
.btn-neon:hover::before { transform:translateX(100%) }

.btn-outline {
  display:inline-flex; align-items:center; gap:.7rem;
  background:transparent; color:var(--white);
  border:1px solid rgba(255,255,255,0.18);
  padding:1.05rem 2.1rem; font-size:.88rem; font-weight:600;
  text-decoration:none; 
  letter-spacing:.04em;
  transition:border-color .25s, color .25s, transform .25s var(--ease-out), box-shadow .25s, background .25s;
}
.btn-outline:hover {
  border-color:var(--accent); color:var(--accent);
  background:rgba(96,174,255,0.04);
  box-shadow:var(--glow-sm); transform:translateY(-3px);
}

/* Hero right column */
.hero-right {
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
}
.hero-right .hero-btns { margin-bottom:0 }
.hero-stats-label {
  font-size:.6rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent);
  text-shadow:var(--glow-txt);
  display:flex; align-items:center; gap:.6rem;
  opacity:.7;
}
.hero-stats-label::before {
  content:''; width:18px; height:1px;
  background:var(--accent); box-shadow:var(--glow-sm);
}

/* Stat chips */
.f-chips {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
}
.f-chip {
  border:1px solid var(--border);
  background:rgba(96,174,255,0.03);
  padding:1.4rem 1.6rem 1.5rem;
  position:relative;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  transition:background .3s, border-color .3s, transform .3s var(--ease-out);
}
.f-chip::before {
  content:''; position:absolute; top:0; left:0;
  width:100%; height:1px; background:var(--accent);
  box-shadow:var(--glow-sm);
}
.f-chip:hover {
  background:rgba(96,174,255,0.08);
  border-color:rgba(96,174,255,0.35);
}
.f-chip-num {
  font-family:'Outfit',sans-serif; font-size:2.4rem;
  font-weight:900; color:var(--accent); letter-spacing:-.03em;
  line-height:1; text-shadow:var(--glow-txt);
}
.f-chip-lbl {
  font-size:.66rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  margin-top:.5rem;
}

/* ── Hero entrance — triggered by .hero-animate class ── */
@keyframes hero-fade-up {
  from { opacity:0; transform:translateY(22px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes hero-line-in {
  from { transform:scaleX(0) }
  to   { transform:scaleX(1) }
}
@keyframes hero-h1-in {
  from { opacity:0; transform:translateY(55px) }
  to   { opacity:1; transform:translateY(0) }
}

/* Elements are visible by default — animations only play after loader */
#hero.hero-animate .hero-line     { transform-origin:left; animation:hero-line-in  .9s  cubic-bezier(0.22,1,0.36,1) 0s    both }
#hero.hero-animate .hero-eyebrow  { animation:hero-fade-up .7s  cubic-bezier(0.22,1,0.36,1) .15s  both }
#hero.hero-animate .hero-h1 > span:nth-child(1) { animation:hero-h1-in .95s cubic-bezier(0.22,1,0.36,1) .25s both }
#hero.hero-animate .hero-h1 > span:nth-child(2) { animation:hero-h1-in .95s cubic-bezier(0.22,1,0.36,1) .37s both }
#hero.hero-animate .hero-h1 > span:nth-child(3) { animation:hero-h1-in .95s cubic-bezier(0.22,1,0.36,1) .49s both }
#hero.hero-animate .hero-sub      { animation:hero-fade-up .7s  cubic-bezier(0.22,1,0.36,1) .65s  both }
#hero.hero-animate .hero-btns     { animation:hero-fade-up .7s  cubic-bezier(0.22,1,0.36,1) .8s   both }
#hero.hero-animate .hero-stats-label { animation:hero-fade-up .6s cubic-bezier(0.22,1,0.36,1) .8s  both }
#hero.hero-animate .f-chip:nth-child(1) { animation:hero-fade-up .55s cubic-bezier(0.34,1.56,0.64,1) .9s  both }
#hero.hero-animate .f-chip:nth-child(2) { animation:hero-fade-up .55s cubic-bezier(0.34,1.56,0.64,1) 1.0s both }
#hero.hero-animate .f-chip:nth-child(3) { animation:hero-fade-up .55s cubic-bezier(0.34,1.56,0.64,1) 1.1s both }
#hero.hero-animate .f-chip:nth-child(4) { animation:hero-fade-up .55s cubic-bezier(0.34,1.56,0.64,1) 1.2s both }

/* Scroll hint */
.scroll-hint {
  position:absolute; bottom:3rem; left:5vw;
  display:flex; align-items:center; gap:1rem;
  color:var(--muted);
  font-size:.65rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
}
.scroll-hint-text { display:inline-block; animation:scroll-hint-text 2.5s ease-in-out infinite }
.scroll-hint-line {
  width:60px; height:1px; background:rgba(255,255,255,0.15); position:relative; overflow:hidden;
}
.scroll-hint-line::after {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:30%; background:var(--accent);
  box-shadow:var(--glow-sm);
  animation:scroll-hint-line 2.5s ease-in-out infinite;
}
@keyframes scroll-hint-line {
  0%   { transform:translateX(-100%) }
  100% { transform:translateX(333%) }
}
@keyframes scroll-hint-text {
  0%,100% { opacity:.6 }
  50%     { opacity:1; color:var(--accent) }
}

/* ──────────────────────────────────────────────
   TICKER
────────────────────────────────────────────── */
#ticker {
  position:relative; z-index:2;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:1rem 0; overflow:hidden;
  background:rgba(96,174,255,0.015);
}
#ticker::before,#ticker::after {
  content:''; position:absolute; top:0; bottom:0;
  width:140px; z-index:2;
}
#ticker::before { left:0; background:linear-gradient(90deg,#000,transparent) }
#ticker::after  { right:0; background:linear-gradient(-90deg,#000,transparent) }
.ticker-track {
  display:flex; gap:3.5rem;
  white-space:nowrap;
  animation:ticker 32s linear infinite;
}
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.tick-item {
  font-size:.7rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(96,174,255,.5);
  display:flex; align-items:center; gap:.85rem; flex-shrink:0;
  transition:color .3s;
}
.tick-item:hover { color:var(--accent) }
.tick-dot { width:4px; height:4px; border-radius:50%; background:var(--accent); box-shadow:var(--glow-sm) }

/* ──────────────────────────────────────────────
   SECTIONS BASE — viewport-locked
────────────────────────────────────────────── */
section {
  position:relative; z-index:2;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Skip rendering off-screen sections until near viewport.
   `auto` lets the browser remember the actual size after first paint,
   so the estimate is accurate on subsequent layouts (no shift). */
section:not(#hero) {
  content-visibility: auto;
  contain-intrinsic-size: auto 100vh;
}
.sec {
  padding:7vh calc(5vw + 60px) 7vh 5vw;
  width:100%;
  max-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
}

.sec-tag {
  font-size:.62rem; font-weight:700; letter-spacing:.25em;
  text-transform:uppercase; color:var(--accent);
  text-shadow:var(--glow-txt);
  margin-bottom:1rem; display:inline-flex; align-items:center; gap:.6rem;
}
.sec-tag::before {
  content:''; width:24px; height:1px;
  background:var(--accent); box-shadow:var(--glow-sm);
}
.sec-h2 {
  font-family:'Outfit',sans-serif;
  font-size:clamp(2rem,4.5vw,4.5rem);
  font-weight:900; line-height:.95; letter-spacing:-.045em;
  color:var(--white); margin-bottom:1.25rem;
}
.sec-h2 .o  { color:var(--accent); text-shadow:var(--glow-txt) }
.sec-h2 .ol {
  color:transparent;
  -webkit-text-stroke:1.2px var(--accent);
  font-weight:300;
  filter:drop-shadow(0 0 5px rgba(96,174,255,0.5));
}
.sec-lead {
  font-size:clamp(.95rem,1.3vw,1.05rem);
  color:var(--offwhite); max-width:50ch; line-height:1.85;
  font-weight:400;
}

/* ──────────────────────────────────────────────
   LEAD TYPES
────────────────────────────────────────────── */
#lead-types {
  background:radial-gradient(ellipse 80% 50% at 50% 0%, rgba(96,174,255,0.05), transparent);
}
.lt-intro {
  display:flex; justify-content:space-between;
  align-items:flex-end; gap:2rem; flex-wrap:wrap;
  margin-bottom:2rem;
}
.lt-intro-right {
  font-size:.8rem; color:var(--muted);
  max-width:32ch; line-height:1.7; text-align:right;
  font-weight:400;
}
.lt-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.lt-card {
  background:linear-gradient(180deg, var(--black3) 0%, var(--black2) 100%);
  border:1px solid rgba(96,174,255,0.08);
  overflow:hidden; position:relative;
  transition:border-color .4s var(--ease-out), transform .4s var(--ease-out), box-shadow .4s;
   will-change:transform;
}
.lt-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--bar-color, var(--accent));
  box-shadow:0 0 14px var(--bar-color, var(--accent));
  transition:box-shadow .35s, height .35s;
}
.lt-card::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(96,174,255,0.06), transparent 50%);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.lt-card:hover {
  border-color:rgba(96,174,255,0.25);
  box-shadow:0 30px 60px rgba(0,0,0,.6), 0 0 30px rgba(96,174,255,.06);
}
.lt-card:hover::before { box-shadow:0 0 28px var(--bar-color, var(--accent)); height:4px }
.lt-card:hover::after { opacity:1 }
.lt-card-head {
  display:flex; align-items:flex-start; gap:.8rem;
  padding:1.1rem 1.1rem .9rem;
  border-bottom:1px solid rgba(255,255,255,0.04);
  position:relative; z-index:1;
}
.lt-icon {
  width:36px; height:36px; flex-shrink:0;
  border:1px solid rgba(96,174,255,0.22);
  background:rgba(96,174,255,0.04);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
  transition:border-color .3s, background .3s;
}
.lt-icon svg { width:16px; height:16px }
.lt-card:hover .lt-icon {
  border-color:rgba(96,174,255,0.5);
  background:rgba(96,174,255,0.08);
}
.lt-card-title {
  font-family:'Outfit',sans-serif;
  font-size:.92rem; font-weight:800;
  color:var(--white); margin-bottom:.2rem;
}
.lt-card-sub { font-size:.7rem; color:var(--muted); line-height:1.45 }
.lt-card-body {
  padding:.9rem 1.1rem 1.1rem;
  display:flex; flex-direction:column; gap:.45rem;
  position:relative; z-index:1;
}
.lt-row {
  display:flex; align-items:center; gap:.55rem;
  font-size:.72rem; color:rgba(255,255,255,.55);
}
.lt-row svg { color:var(--accent); flex-shrink:0; opacity:.7; width:11px; height:11px }
.lt-badge {
  margin-top:.4rem; display:inline-block;
  border:1px solid rgba(96,174,255,0.25);
  color:var(--accent);
  font-size:.58rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .75rem;
  background:rgba(96,174,255,0.04);
  align-self:flex-start;
}

/* ──────────────────────────────────────────────
   PROBLEM
────────────────────────────────────────────── */
#problem {
  background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(96,174,255,0.04), transparent);
}
.p-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1.25rem; margin-top:2.5rem;
}
.n-card {
  position:relative;
  background:linear-gradient(180deg, var(--black3) 0%, var(--black2) 100%);
  border:1px solid rgba(96,174,255,0.08);
  padding:1.75rem 2rem; overflow:hidden;
  transition:border-color .4s, transform .4s var(--ease-out), box-shadow .4s;
   will-change:transform;
}
.n-card::before,.n-card::after {
  content:''; position:absolute;
  width:24px; height:24px;
  border-color:var(--accent); border-style:solid;
  box-shadow:var(--glow-sm);
  transition:width .4s var(--ease-out), height .4s var(--ease-out);
}
.n-card::before { top:0; left:0; border-width:2px 0 0 2px }
.n-card::after  { bottom:0; right:0; border-width:0 2px 2px 0 }
.n-card:hover::before, .n-card:hover::after { width:48px; height:48px }
.n-card:hover {
  border-color:rgba(96,174,255,0.3);
  box-shadow:0 0 50px rgba(96,174,255,0.08), inset 0 0 50px rgba(96,174,255,0.02);
}
.n-card .sweep {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(96,174,255,0.06),transparent 60%);
  opacity:0; transition:opacity .4s;
}
.n-card:hover .sweep { opacity:1 }
.n-card-icon {
  width:44px; height:44px; margin-bottom:1rem;
  border:1px solid rgba(96,174,255,0.3);
  background:rgba(96,174,255,0.04);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); position:relative; z-index:1;
  transition:border-color .3s, background .3s, transform .3s var(--ease-out);
}
.n-card:hover .n-card-icon {
  border-color:var(--accent);
  background:rgba(96,174,255,0.1);
  transform:rotate(-4deg) scale(1.05);
}
.n-card h3 {
  font-family:'Outfit',sans-serif; font-size:1.05rem; font-weight:800;
  color:var(--white); margin-bottom:.55rem; position:relative; z-index:1;
  letter-spacing:-.01em;
}
.n-card p {
  font-size:.84rem; color:var(--muted); line-height:1.65;
  position:relative; z-index:1;
}

/* ──────────────────────────────────────────────
   SOLUTION
────────────────────────────────────────────── */
#solution {
  background:radial-gradient(ellipse 60% 60% at 80% 50%, rgba(96,174,255,0.04), transparent);
}
.sol-split {
  display:grid; grid-template-columns:1fr 1fr;
  gap:3rem; align-items:center; margin-top:2rem;
}
.step-list { display:flex; flex-direction:column; gap:.25rem }
.step {
  display:flex; gap:1.1rem; align-items:flex-start;
  padding:.85rem 1rem; border:1px solid transparent;
  position:relative; cursor:default;
  transition:border-color .35s, background .35s, transform .35s var(--ease-out);
}
.step::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:2px; background:transparent;
  transition:background .3s, box-shadow .3s;
}
.step:hover {
  border-color:rgba(96,174,255,0.12);
  background:rgba(96,174,255,0.025);
  transform:translateX(8px);
}
.step:hover::before { background:var(--accent); box-shadow:var(--glow-sm) }
.step-n {
  width:36px; height:36px; flex-shrink:0;
  border:1px solid var(--accent); box-shadow:var(--glow-sm);
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-size:.74rem; font-weight:900;
  color:var(--accent);
  transition:background .3s, color .3s;
}
.step:hover .step-n { background:var(--accent); color:#000 }
.step h3 {
  font-family:'Outfit',sans-serif; font-size:.95rem; font-weight:700;
  color:var(--white); margin-bottom:.25rem;
}
.step p { font-size:.78rem; color:var(--muted); line-height:1.55 }

/* Dashboard */
.dash-wrap { perspective:1100px }
.dash {
  background:linear-gradient(180deg, #0a0c10, #050608);
  border:1px solid rgba(96,174,255,0.18);
  box-shadow:
    0 0 0 1px rgba(96,174,255,0.04),
    30px 30px 80px rgba(0,0,0,0.85),
    0 0 80px rgba(96,174,255,0.05);
  border-radius:6px; padding:2rem;
  transform:rotateY(-12deg) rotateX(8deg);
  transform-style:preserve-3d;
  transition:transform .8s var(--ease-out);
  
}
.dash:hover { transform:rotateY(-2deg) rotateX(2deg) }
.d-header { display:flex; align-items:center; gap:.5rem; margin-bottom:1.85rem }
.d-dot { width:10px; height:10px; border-radius:50% }
.d-dot.r{background:#FF5F57}.d-dot.y{background:#FEBC2E}.d-dot.g{background:#28C840}
.d-title {
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-left:auto;
}
.d-metrics { display:flex; gap:.85rem; margin-bottom:1.25rem }
.d-m {
  flex:1; background:#0a0d12;
  border:1px solid rgba(96,174,255,0.1);
  padding:1rem 1.1rem;
  transform:translateZ(14px);
}
.d-m-lbl { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem }
.d-m-val {
  font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:900;
  color:var(--white); letter-spacing:-.02em;
}
.d-m-val .o { color:var(--accent); text-shadow:var(--glow-txt) }
.d-badge {
  font-size:.62rem; font-weight:700; color:#22C55E;
  background:rgba(34,197,94,.1); padding:3px 7px;
  display:inline-block; margin-top:.35rem;
}
.d-bars { margin-top:1.4rem }
.d-bl { display:flex; justify-content:space-between; font-size:.66rem; color:var(--muted); margin-bottom:.45rem; font-weight:500 }
.d-bt { height:4px; background:rgba(255,255,255,0.05); margin-bottom:.85rem; overflow:hidden }
.d-bf {
  height:100%;
  background:linear-gradient(90deg, var(--accent2), var(--accent), var(--accentlt));
  box-shadow:0 0 6px var(--accent);
  animation:bf 1.5s ease-out both;
}
@keyframes bf { from{width:0!important} }
.d-chart { margin-top:1.4rem; transform:translateZ(18px) }
.d-bars-mini { display:flex; align-items:flex-end; gap:4px; height:55px }
.d-bar {
  flex:1; background:rgba(96,174,255,0.12);
  animation:bup 1s ease-out both;
  transition:background .3s;
}
.d-bar:last-child { background:var(--accent); box-shadow:0 0 10px var(--accent) }
@keyframes bup { from{transform:scaleY(0);transform-origin:bottom} }
.d-chart-lbl { font-size:.62rem; color:var(--muted); text-align:center; margin-top:.6rem; letter-spacing:.05em }

/* ──────────────────────────────────────────────
   SERVICES
────────────────────────────────────────────── */
#services {
  background:radial-gradient(ellipse 70% 50% at 20% 50%, rgba(96,174,255,0.03), transparent);
}
.srv-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.25rem; margin-top:2.5rem;
}
.flip {
  height:300px; 
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.flip:hover { transform:rotateY(180deg) }
.f-front,.f-back {
  position:absolute; inset:0;
  backface-visibility:hidden; padding:2.5rem;
}
.f-front {
  background:linear-gradient(180deg, var(--black3), var(--black2));
  border:1px solid rgba(96,174,255,0.1);
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.f-front::before,.f-front::after {
  content:''; position:absolute; width:18px; height:18px;
  border-color:var(--accent); border-style:solid;
  transition:width .35s var(--ease-out), height .35s var(--ease-out);
}
.f-front::before { top:0; left:0; border-width:2px 0 0 2px; box-shadow:-2px -2px 8px rgba(96,174,255,.25) }
.f-front::after  { bottom:0; right:0; border-width:0 2px 2px 0; box-shadow:2px 2px 8px rgba(96,174,255,.25) }
.f-icon-bg {
  position:absolute; top:1.5rem; right:1.5rem;
  font-family:'Outfit',sans-serif; font-size:5.5rem; font-weight:900;
  color:transparent; -webkit-text-stroke:1px rgba(96,174,255,.08);
  line-height:1; user-select:none;
}
.f-front h3 {
  font-family:'Outfit',sans-serif; font-size:1.25rem; font-weight:800;
  color:var(--white); margin-bottom:.6rem; position:relative; z-index:1;
  letter-spacing:-.01em;
}
.f-front p { font-size:.85rem; color:var(--muted); line-height:1.7; position:relative; z-index:1 }
.f-hint {
  font-size:.62rem; color:rgba(96,174,255,.5); letter-spacing:.12em;
  margin-top:1.25rem; text-transform:uppercase; position:relative; z-index:1;
  font-weight:600;
}
.f-back {
  background:linear-gradient(160deg, var(--black2), #050810);
  border:1px solid var(--accent);
  box-shadow:inset 0 0 50px rgba(96,174,255,0.04), 0 0 50px rgba(96,174,255,.18);
  transform:rotateY(180deg);
  display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center;
}
.f-back h3 {
  font-family:'Outfit',sans-serif; font-size:1.4rem; font-weight:900;
  color:var(--accent); text-shadow:var(--glow-txt); margin-bottom:1.1rem;
  letter-spacing:-.02em;
}
.f-back p { font-size:.88rem; color:var(--offwhite); line-height:1.75; margin-bottom:1.75rem }
.f-back-btn {
  border:1px solid var(--accent); color:var(--accent);
  padding:.7rem 1.6rem; font-size:.76rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; 
  box-shadow:var(--glow-sm);
  transition:background .25s, color .25s, transform .2s;
}
.f-back-btn:hover { background:var(--accent); color:#000; transform:translateY(-2px) }

/* ──────────────────────────────────────────────
   TESTIMONIALS
────────────────────────────────────────────── */
#testi {
  background:radial-gradient(ellipse 50% 60% at 50% 100%, rgba(96,174,255,0.04), transparent);
}
.t-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.25rem; margin-top:2.5rem;
}
.t-card {
  background:linear-gradient(180deg, var(--black3), var(--black2));
  border:1px solid rgba(96,174,255,0.08);
  padding:1.75rem; position:relative; overflow:hidden;
  transition:transform .4s var(--ease-out), box-shadow .4s, border-color .35s;
  
}
.t-card::before {
  content:'"';
  position:absolute; top:1rem; right:1.4rem;
  font-family:'Outfit',sans-serif;
  font-size:5rem; font-weight:900;
  color:rgba(96,174,255,0.08);
  line-height:1; pointer-events:none;
}
.t-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0; transition:opacity .35s;
}
.t-card:hover {
  border-color:rgba(96,174,255,.28);
  box-shadow:0 25px 60px rgba(0,0,0,.7), 0 0 50px rgba(96,174,255,.07);
}
.t-card:hover::after { opacity:1 }
.t-stars {
  color:var(--accent); text-shadow:var(--glow-txt);
  font-size:.9rem; margin-bottom:1.25rem; letter-spacing:4px;
}
.t-q {
  font-size:.86rem; color:rgba(255,255,255,.78);
  line-height:1.7; margin-bottom:1.25rem; font-style:italic;
  font-weight:400;
}
.t-auth { display:flex; align-items:center; gap:.85rem }
.t-av {
  width:42px; height:42px; border:1px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-size:.74rem; font-weight:900;
  color:var(--accent); flex-shrink:0; box-shadow:var(--glow-sm);
}
.t-name { font-size:.88rem; font-weight:700; color:var(--white); letter-spacing:-.005em }
.t-role { font-size:.72rem; color:var(--muted); margin-top:.15rem }

/* ──────────────────────────────────────────────
   RESULTS
────────────────────────────────────────────── */
#results {
  text-align:center;
  background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(96,174,255,0.04), transparent);
}
.r-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.25rem; margin-top:2.5rem;
}
.r-card {
  background:linear-gradient(180deg, var(--black3), var(--black2));
  border:1px solid rgba(96,174,255,0.1);
  padding:2rem 1.25rem 1.75rem;
  position:relative; overflow:hidden;
  transition:transform .4s var(--ease-out), box-shadow .4s, border-color .4s;
  
}
.r-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0; transition:opacity .35s;
}
.r-card::after {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:0; height:2px; background:var(--accent);
  box-shadow:var(--glow-sm); transition:width .45s var(--ease-out);
}
.r-card:hover::before { opacity:1 }
.r-card:hover::after { width:80% }
.r-card:hover {
  border-color:rgba(96,174,255,.3);
  box-shadow:0 30px 70px rgba(0,0,0,.75), 0 0 60px rgba(96,174,255,.08);
}
.r-num {
  font-family:'Outfit',sans-serif;
  font-size:clamp(2.2rem,3.6vw,3.8rem);
  font-weight:900; letter-spacing:-.045em;
  color:var(--accent); text-shadow:var(--glow-txt);
  line-height:1; margin-bottom:.5rem;
}
.r-label {
  font-size:.76rem; color:var(--muted); line-height:1.5;
  font-weight:500;
}

.r-images {
  margin-top:2rem;
  display:flex;
  justify-content:center;
  width:100%;
}
.r-img-wrap { width:68%; max-height:none }
.r-img-wrap img { width:100%; height:auto; max-height:none; object-fit:contain; display:block }
.r-img-wrap {
  border:1px solid var(--border);
  border-radius:6px; overflow:hidden;
  box-shadow:0 0 25px rgba(96,174,255,0.05);
  transition:transform .45s var(--ease-out), box-shadow .45s, border-color .35s;
   position:relative;
}
.r-img-wrap::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4));
  opacity:.5; transition:opacity .35s; pointer-events:none;
}
.r-img-wrap:hover {
  box-shadow:var(--glow), 0 25px 60px rgba(0,0,0,.6);
  border-color:rgba(96,174,255,0.4);
}
.r-img-wrap:hover::after { opacity:.2 }

/* ──────────────────────────────────────────────
   CTA
────────────────────────────────────────────── */
#cta .sec { padding-bottom:6rem }
.cta-box {
  max-width:960px; margin:0 auto;
  background:linear-gradient(180deg, var(--black3), var(--black2));
  border:1px solid rgba(96,174,255,0.22);
  padding:6.5rem 5rem; text-align:center;
  position:relative; overflow:hidden;
  box-shadow:0 0 0 1px rgba(96,174,255,.04), 0 0 100px rgba(96,174,255,.07);
}
/* SVG stroke that travels around the actual perimeter at constant velocity —
   no corner stagger because the path follows the rectangle outline,
   not an angular sweep from the center. */
.cta-border {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  overflow:visible;
  z-index:0;
}
.cta-border rect {
  fill:none;
  stroke:var(--accent);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  /* --perim is set by JS once the box has a real size.
     The dasharray then fits the perimeter EXACTLY once,
     so only ONE line is ever visible at a time. */
  --perim:2700px;
  stroke-dasharray:calc(var(--perim) * 0.25) calc(var(--perim) * 0.75);
  stroke-dashoffset:0;
  filter:drop-shadow(0 0 4px rgba(96,174,255,0.55))
         drop-shadow(0 0 10px rgba(96,174,255,0.3));
  animation:cta-line-travel 10s linear infinite;
}
@keyframes cta-line-travel {
  to { stroke-dashoffset:calc(var(--perim) * -1) }
}
.cta-content { position:relative; z-index:1 }
.cta-box .sec-tag { margin-bottom:1rem }
.cta-box h2 { margin-bottom:1.5rem }
.cta-sub { color:var(--offwhite); font-size:1.05rem; line-height:1.85; margin-bottom:2.75rem; max-width:60ch; margin-left:auto; margin-right:auto }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }

/* ──────────────────────────────────────────────
   FOOTER
────────────────────────────────────────────── */
footer {
  position:relative; z-index:2;
  border-top:1px solid rgba(96,174,255,0.22);
  padding:5rem calc(5vw + 80px) 2.5rem 5vw;
  background:
    radial-gradient(ellipse 60% 55% at 15% 100%, rgba(96,174,255,0.09), transparent 60%),
    radial-gradient(ellipse 50% 45% at 90% 20%, rgba(96,174,255,0.05), transparent 60%),
    linear-gradient(180deg, var(--black) 0%, #050709 100%);
  box-shadow:0 -1px 0 rgba(96,174,255,0.06), 0 -10px 40px rgba(96,174,255,0.04);
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  scroll-snap-align:start;
  overflow:hidden;
}

/* Hide the corner-bracket element (kept for backwards compatibility) */
.ft-corner-br { display:none }

.ft {
  display:flex; justify-content:flex-start;
  align-items:flex-start; gap:3.5rem; flex-wrap:wrap;
  padding-bottom:3rem;
  margin-bottom:1.5rem;
  position:relative; z-index:1;
}
/* Glowing gradient divider — grows and shrinks */
.ft::after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(96,174,255,0.5) 20%,
    var(--accent) 50%,
    rgba(96,174,255,0.5) 80%,
    transparent 100%);
  box-shadow:0 0 12px rgba(96,174,255,0.25);
  transform-origin:center;
  animation:line-pulse 3.6s ease-in-out infinite;
}
@keyframes line-pulse {
  0%, 100% { transform:scaleX(0.55); opacity:.45 }
  50%      { transform:scaleX(1);    opacity:1 }
}

/* Copyright row — left-aligned copyright, centered attribution */
.fb {
  position:relative; z-index:1;
  padding-top:2.25rem;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  font-size:.72rem;
  color:rgba(255,255,255,0.4);
  letter-spacing:.05em;
  gap:1rem;
}
.fb > span:first-child  { justify-self:start }
.fb > span:nth-child(2) { justify-self:center }

/* "Powered by Wakeel Web" link */
.fb-link {
  color:inherit;
  text-decoration:none;
  
  position:relative;
  transition:color .25s, text-shadow .25s;
}
.fb-link::after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1px;
  background:var(--accent);
  box-shadow:var(--glow-sm);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .3s var(--ease-out);
}
.fb-link:hover {
  color:var(--accent);
  text-shadow:var(--glow-txt);
}
.fb-link:hover::after { transform:scaleX(1) }
@media (pointer: coarse) { .fb-link { cursor:auto } }

/* Accent eyebrow line above the logo */
.ft-logo {
  position:relative;
  padding-top:1.25rem;
}
.ft-logo::before {
  content:'';
  position:absolute; top:0; left:0;
  width:48px; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent);
  box-shadow:var(--glow-sm);
}

/* Column heading with mini accent line */
.ft-col h4 {
  position:relative;
  padding-left:1rem;
}
.ft-col h4::before {
  content:'';
  position:absolute; left:0; top:50%;
  width:8px; height:1px;
  background:var(--accent);
  box-shadow:var(--glow-sm);
  transform:translateY(-50%);
}

/* Animated arrow on column link hover */
.ft-col ul a {
  position:relative;
  display:inline-flex; align-items:center;
}
.ft-col ul a::before {
  content:'→';
  display:inline-block;
  width:0;
  opacity:0;
  margin-right:0;
  color:var(--accent);
  text-shadow:var(--glow-txt);
  transition:width .3s var(--ease-out), opacity .3s, margin-right .3s var(--ease-out);
  overflow:hidden;
}
.ft-col ul a:hover {
  padding-left:0 !important;
}
.ft-col ul a:hover::before {
  width:1em;
  opacity:1;
  margin-right:.45rem;
}

/* MA background design for footer — brighter, with pulse animation */
.ma-bg-footer {
  position:absolute;
  right:200px; top:50%;
  transform:translateY(-50%);
  font-family:'Outfit',sans-serif; font-weight:900;
  font-size:clamp(14rem, 30vw, 38rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:2px rgba(96,174,255,0.22);
  pointer-events:none; user-select:none;
  letter-spacing:-0.06em;
  z-index:0;
  filter:drop-shadow(0 0 40px rgba(96,174,255,0.08));
  animation:ma-bright-pulse 5s ease-in-out infinite;
}
@keyframes ma-bright-pulse {
  0%, 100% {
    -webkit-text-stroke:2px rgba(96,174,255,0.22);
    filter:drop-shadow(0 0 40px rgba(96,174,255,0.08));
  }
  50% {
    -webkit-text-stroke:2px rgba(96,174,255,0.48);
    filter:drop-shadow(0 0 60px rgba(96,174,255,0.22));
  }
}
.ft-logo {
  font-family:'Outfit',sans-serif; font-size:1.35rem; font-weight:900;
  color:var(--white); letter-spacing:.05em; display:block; margin-bottom:1rem;
}
.ft-logo span { color:var(--accent); text-shadow:var(--glow-txt) }
.ft-desc { font-size:.84rem; color:var(--muted); line-height:1.85; max-width:260px }
.ft-col h4 {
  font-size:.6rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(96,174,255,.55); margin-bottom:1.2rem;
}
.ft-col ul { list-style:none; display:flex; flex-direction:column; gap:.7rem }
.ft-col ul a {
  font-size:.86rem; color:var(--muted); text-decoration:none;
  transition:color .25s, text-shadow .25s, padding .25s var(--ease-out); 
}
.ft-col ul a:hover { color:var(--accent); text-shadow:var(--glow-txt); padding-left:6px }

/* ──────────────────────────────────────────────
   LEGAL / LONG-FORM PAGES (privacy, terms)
────────────────────────────────────────────── */
body.legal-page {
  background: var(--black);
  min-height: 100vh;
}

.legal-header {
  position: relative; z-index: 2;
  padding: 9rem 5vw 3rem;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(96,174,255,0.06), transparent 70%);
}
.legal-inner {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.legal-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--white);
  margin: 1rem 0 1rem;
}
.legal-title .o { color: var(--accent); text-shadow: var(--glow-txt) }
.legal-meta {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.legal-meta time { color: var(--accent) }

.legal-main {
  position: relative; z-index: 2;
  padding: 4rem 5vw 6rem;
}
.legal-body {
  font-family: 'Figtree', sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--offwhite);
  font-weight: 400;
}
.legal-lead {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--white);
  font-weight: 400;
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border2);
}
.legal-body p {
  margin: 0 0 1.4rem;
  color: rgba(255,255,255,0.78);
}
.legal-body h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--white);
  margin: 2.75rem 0 1rem;
  padding-top: 1rem;
  position: relative;
}
.legal-body h2::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
  box-shadow: var(--glow-sm);
}
.legal-body ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}
.legal-body ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .7rem;
  color: rgba(255,255,255,0.78);
}
.legal-body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .75em;
  width: 8px; height: 1px;
  background: var(--accent);
  box-shadow: var(--glow-sm);
}
.legal-quote {
  border-left: 2px solid var(--accent);
  background: rgba(96,174,255,0.04);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 1.75rem;
  font-style: italic;
  color: var(--offwhite);
  font-size: .98rem;
  box-shadow: inset 0 0 30px rgba(96,174,255,0.03);
}
.legal-strong {
  font-size: .84rem;
  letter-spacing: .015em;
  line-height: 1.75;
  color: rgba(255,255,255,0.66);
  margin-bottom: 1.25rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border2);
}
.legal-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(96,174,255,0.35);
  transition: border-color .25s, text-shadow .25s;
}
.legal-link:hover {
  border-bottom-color: var(--accent);
  text-shadow: var(--glow-txt);
}
.legal-back {
  margin-top: 3.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--border2);
}

@media(max-width:768px) {
  .legal-header {
    padding: 6rem 5vw 1.75rem;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(96,174,255,0.05), transparent 65%);
  }
  .legal-header .sec-tag { font-size: .58rem; margin-bottom: .65rem }
  .legal-title  { font-size: clamp(2.1rem, 9vw, 3rem); margin: .75rem 0 .85rem }
  .legal-meta   { font-size: .65rem; letter-spacing: .14em }
  .legal-main   { padding: 2rem 5vw 3.25rem }
  .legal-inner  { max-width: none }
  .legal-lead   {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .legal-body   { font-size: .94rem; line-height: 1.72 }
  .legal-body p { margin-bottom: 1.15rem }
  .legal-body h2 {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    margin: 2rem 0 .85rem;
    padding-top: .85rem;
  }
  .legal-body h2::before { width: 28px }
  .legal-body ul { margin-bottom: 1.2rem }
  .legal-body ul li {
    padding-left: 1.25rem;
    margin-bottom: .6rem;
    line-height: 1.65;
  }
  .legal-body ul li::before { top: .65em }
  .legal-quote {
    padding: 1rem 1.1rem;
    font-size: .88rem;
    line-height: 1.7;
    margin: 1.25rem 0 1.5rem;
  }
  .legal-strong {
    font-size: .76rem;
    line-height: 1.7;
    letter-spacing: .02em;
    padding-left: .85rem;
    margin-bottom: 1rem;
  }
  .legal-link {
    word-break: break-word;
  }
  .legal-back {
    margin-top: 2.5rem;
    padding-top: 2rem;
  }
  .legal-back .btn-outline {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
    font-size: .82rem;
  }
}

@media(max-width:480px) {
  .legal-header { padding: 5.5rem 5vw 1.5rem }
  .legal-title  { font-size: clamp(1.85rem, 9.5vw, 2.6rem) }
  .legal-meta   { font-size: .62rem }
  .legal-main   { padding: 1.5rem 5vw 2.5rem }
  .legal-lead   { font-size: .96rem }
  .legal-body   { font-size: .9rem; line-height: 1.7 }
  .legal-body p { margin-bottom: .95rem }
  .legal-body h2 {
    font-size: clamp(1.1rem, 5.5vw, 1.35rem);
    margin: 1.75rem 0 .7rem;
    padding-top: .75rem;
  }
  .legal-body h2::before { width: 24px }
  .legal-quote {
    padding: .85rem 1rem;
    font-size: .84rem;
    line-height: 1.65;
  }
  .legal-strong { font-size: .72rem; letter-spacing: .025em }
}

/* ──────────────────────────────────────────────
   GLITCH
────────────────────────────────────────────── */
@keyframes glitch {
  0%,90%,100% { clip-path:inset(0 0 100% 0); transform:translateX(0) }
  91%          { clip-path:inset(20% 0 50% 0); transform:translateX(-4px); color:var(--accent) }
  92%          { clip-path:inset(60% 0 10% 0); transform:translateX(4px)  }
  93%          { clip-path:inset(40% 0 40% 0); transform:translateX(-2px) }
  94%          { clip-path:inset(0 0 100% 0);  transform:translateX(0) }
}
.glitch { position:relative }
.glitch::after {
  content:attr(data-text);
  position:absolute; inset:0;
  color:var(--accent); text-shadow:none;
  animation:glitch 8s ease-in-out infinite;
  pointer-events:none;
}

/* ──────────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────────── */
@media(max-width:1200px){
  #sec-nav { display:none }
  .sec  { padding:7vh 5vw }
  #hero { padding:9rem 5vw 6rem }
}
@media(max-width:1024px){
  .hero-grid { grid-template-columns:1fr; gap:2.5rem }
  #hero      { place-items:start center }
  .lt-grid   { grid-template-columns:repeat(2,1fr) }
  .srv-grid  { grid-template-columns:repeat(2,1fr) }
  .r-grid    { grid-template-columns:repeat(2,1fr) }
  .sol-split { grid-template-columns:1fr; gap:3.5rem }
  .t-grid    { grid-template-columns:1fr }
  .sec       { padding:6.5rem 5vw }
  #hero      { padding:9rem 5vw 6rem }
}

/* ── TOUCH DEVICES: hide cursor reliably regardless of viewport ── */
/* ── MOBILE: flow naturally, no snap, single-source padding ── */
@media(max-width:768px){
  /* Kill desktop scroll-snap so touch momentum feels native */
  html       { scroll-snap-type:none }
  section    { scroll-snap-align:none; scroll-snap-stop:normal }

  /* ── No motion on mobile. Disable every animation except the loader bar
     (which signals real loading progress) and the CTA box's rotating
     accent border (the moving blue line on the "Book Your Free Call"
     section). 3D tilt is pointer-driven so never fires on touch. ── */
  *, *::before, *::after { animation: none !important }
  .loader-bar-fill        { animation: loader-bar 1.4s var(--ease-soft) forwards !important }
  .cta-border rect        { animation: cta-line-travel 10s linear infinite !important }

  /* Loader on mobile — static, centered */
  .loader-letter { animation: none }
  #grain { display: none }
  #ticker { display: none }
  .glitch::after { display: none }
  #c3d { display: none }

  /* Loader — proportional for small screens */
  .loader-mark { font-size:3.2rem; gap:.04em }
  .loader-bar  { width:160px }
  .loader-tag  { font-size:.58rem; letter-spacing:.25em }

  /* Sections size to content with consistent rhythm */
  section    { min-height:auto; padding:0; overflow:visible }
  .sec       { padding:4rem 5vw; max-height:none }

  /* Hero — content-height, balanced vertical rhythm */
  #hero {
    min-height:auto;
    padding:5.5rem 5vw 3rem;
    place-items:start stretch;
  }
  .hero-grid    { grid-template-columns:1fr; gap:2rem }
  .hero-line    { margin-bottom:1.25rem; width:60px }
  .hero-eyebrow { margin-bottom:1rem; font-size:.66rem }
  .hero-h1      { font-size:clamp(2.5rem,9.5vw,3.6rem); margin-bottom:1.25rem }
  .hero-sub     { font-size:.92rem; margin-bottom:0; line-height:1.7 }
  .hero-right   { gap:1.25rem; margin-top:.5rem }
  .hero-stats-label { font-size:.55rem }

  /* Hero buttons — full-width touch targets */
  .hero-btns { flex-direction:column; width:100%; gap:.65rem }
  .hero-btns .btn-neon,
  .hero-btns .btn-outline { width:100%; justify-content:center; padding:.95rem 1.5rem }

  /* Stat chips — 2x2 grid, evenly spaced */
  .f-chips    { grid-template-columns:repeat(2,1fr); gap:.65rem }
  .f-chip     { padding:1rem .85rem }
  .f-chip-num { font-size:1.6rem }
  .f-chip-lbl { font-size:.58rem; margin-top:.35rem }

  /* Section heading rhythm */
  .sec-tag   { margin-bottom:.65rem; font-size:.58rem }
  .sec-h2    { font-size:clamp(1.9rem,7.5vw,3rem); margin-bottom:1rem; line-height:1 }
  .sec-lead  { font-size:.92rem; line-height:1.7 }

  /* Grids → single column for readability */
  .p-grid, .srv-grid, .t-grid, .lt-grid { grid-template-columns:1fr; gap:.85rem; margin-top:1.5rem }
  .r-grid    { grid-template-columns:repeat(2,1fr); gap:.75rem; margin-top:1.5rem }
  .r-card    { padding:1.5rem 1rem }
  .r-num     { font-size:clamp(1.7rem,7vw,2.4rem) }
  .r-label   { font-size:.7rem; line-height:1.4 }

  /* Cards — tighter padding on mobile */
  .n-card    { padding:1.5rem 1.25rem }
  .t-card    { padding:1.5rem 1.25rem }
  .lt-card-head { padding:1rem }
  .lt-card-body { padding:.85rem 1rem 1rem }

  /* Solution split — stack with breathing room */
  .sol-split { grid-template-columns:1fr; gap:2rem; margin-top:1.5rem }
  .step      { padding:.75rem; gap:.85rem }
  .step h3   { font-size:.9rem }
  .step p    { font-size:.78rem }
  .step-n    { width:32px; height:32px; font-size:.7rem }
  .dash      { transform:none; padding:1.25rem }
  .dash:hover{ transform:none }
  .d-metrics { flex-direction:column; gap:.65rem }

  /* Service flip cards — flip disabled on mobile (touch :hover sticky bug) */
  .flip {
    height:230px;
    transform:none !important;
    transition:none !important;
    transform-style:flat;
  }
  .flip:hover { transform:none !important }
  .f-back     { display:none }
  .f-hint     { display:none }
  .f-front {
    padding:1.35rem;
    backface-visibility:visible;
  }
  .f-icon-bg { font-size:3.6rem; top:1rem; right:1rem }
  .f-front h3 { font-size:1.05rem }
  .f-front p  { font-size:.78rem }

  /* Lead types */
  .lt-intro       { flex-direction:column; align-items:flex-start; gap:1rem; margin-bottom:1.5rem }
  .lt-intro-right { text-align:left; max-width:100%; font-size:.78rem }

  /* Result images */
  .r-images   { grid-template-columns:1fr; max-height:none; gap:.85rem; margin-top:1.5rem }
  .r-img-wrap { max-height:none }
  .r-img-wrap img { max-height:none }

  /* CTA */
  #cta .sec  { padding:3rem 5vw }
  .cta-box   { padding:2.5rem 1.5rem }
  .cta-sub   { font-size:.9rem; margin-bottom:1.75rem; line-height:1.7 }
  .cta-btns  { flex-direction:column; width:100%; gap:.65rem }
  .cta-btns .btn-neon,
  .cta-btns .btn-outline { width:100%; justify-content:center }

  /* Nav + chrome */
  .nav-links { display:none }
  #mob-menu  { display:flex }
  #sec-nav, #sec-indicator { display:none }
  #back-top  { right:1rem; bottom:5rem; width:38px; height:38px } /* lifted above chat widget */
  .scroll-hint { display:none }
  .ma-bg     { display:none }
  nav#nav    { padding:1rem 5vw }
  nav#nav.on { padding:.7rem 5vw }

  /* Ticker — tighter padding */
  #ticker    { padding:.85rem 0 }
  .ticker-track { gap:2.5rem }
  .tick-item { font-size:.62rem }

  /* Footer */
  .ft        { flex-direction:column; gap:1.75rem; padding-bottom:2rem }
  .ft > div  { width:100% }
  .ft-desc   { max-width:none }
  .fb        { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; font-size:.65rem; grid-template-columns:none }
  footer     { padding:2.5rem 5vw 1.5rem; min-height:auto; display:block; scroll-snap-align:none; overflow:visible }
  .ma-bg-footer { display:none }
  .ft-logo { padding-top:0 }
  .ft-logo::before { display:none }
  .ft::after { background:rgba(96,174,255,0.12); box-shadow:none; transform:none; animation:none }
  .ft-col h4 { padding-left:0 }
  .ft-col h4::before { display:none }
  .ft-col ul a::before { display:none }
}

/* ── EXTRA SMALL (≤480px): tighten further ── */
@media(max-width:480px){
  .sec       { padding:3rem 5vw }
  #hero      { padding:5rem 5vw 2.5rem }
  .hero-h1   { font-size:clamp(2.2rem,10vw,3rem) }
  .sec-h2    { font-size:clamp(1.7rem,7.5vw,2.4rem) }
  .f-chips   { grid-template-columns:repeat(2,1fr); gap:.55rem }
  .f-chip    { padding:.85rem .65rem }
  .f-chip-num{ font-size:1.4rem }
  .f-chip-lbl{ font-size:.55rem }
  .r-grid    { grid-template-columns:1fr }
  .flip      { height:210px }
  .loader-mark { font-size:2.8rem }
  .loader-bar  { width:140px }
}

@media(max-height:600px){
  .mob-inner { gap:1.25rem }
  .mob-inner a { font-size:1.75rem }
}