/* ============================================================
   Mr.T Technologies — AI Tools
   Design tokens
   ============================================================ */

:root{
  /* Color palette — locked brand identity, do not drift from these */
  --bg-deep:      #050B16;
  --bg-secondary: #111827;
  --blue-electric:#00D4FF;
  --blue-deep:    #2563EB;
  --neon-blue:    #3B82F6;
  --gold:         #E7B550;
  --neon-purple:  #8B5CF6;
  --tech-green:   #2BE870;
  --white:        #FFFFFF;
  --gray-light:   #9CA3AF;
  --gray-dark:    #1F2937;

  /* Derived */
  --glass-bg: rgba(31,41,55,0.45);
  --glass-border: rgba(0,212,255,0.18);
  --glass-border-strong: rgba(0,212,255,0.35);

  /* Accessible variant of blue-electric, for the specific case of white text
     sitting directly on top of it (gradient buttons/badges). Plain
     blue-electric is correctly used everywhere else in this file as an icon
     color / border / glow / text-on-dark-background accent — all of those
     already pass WCAG contrast and must NOT be repointed at this darker
     value. This token exists only because white-on-#00D4FF measures
     ~1.77:1 (fails even the lenient 3:1 large-text floor), while
     white-on-#007F99 measures ~4.67:1 (passes normal-text AA) at the same
     hue. Use this instead of --blue-electric wherever a gradient stop sits
     directly under white/light label text. */
  --blue-electric-on-white: #007F99;

  /* Type */
  --font-brand: 'Orbitron', sans-serif;
  --font-head:  'Cairo', sans-serif;
  --font-body:  'Tajawal', sans-serif;
  --font-mono:  'JetBrains Mono', monospace;

  /* Rhythm */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --container: 1200px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg-deep);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
  position:relative;
  -webkit-tap-highlight-color: transparent;
}

body[dir="rtl"]{ direction:rtl; text-align:right; }

img{ max-width:100%; height:auto; display:block; }
/* Safety net for any large embedded media (not the small inline SVG
   icons, which already have explicit fixed sizes everywhere they're
   used and don't need — or want — a forced `display:block`, which could
   affect their inline alignment in a handful of contexts). */
canvas,video,iframe{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea{ font-family:inherit; }

::selection{ background:var(--blue-electric); color:var(--bg-deep); }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--blue-electric);
  outline-offset:3px;
  border-radius:4px;
}

/* Touch devices: swap hover affordances for a tactile :active press state
   instead (hover has no meaningful equivalent on touchscreens, and can get
   "stuck" after a tap on iOS/Android). */
@media (hover:none){
  .btn:hover{ box-shadow:none; transform:none; }
  .btn:active{ transform:scale(0.97); }
  .glass:hover{ transform:none; box-shadow:inherit; }
  .card:active, .glass:active{ transform:scale(0.98); }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   Background system: animated grid + glow blobs + particles
   ============================================================ */

.bg-fixed{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 15% -10%, rgba(0,212,255,0.14), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 10%, rgba(139,92,246,0.12), transparent 60%),
    radial-gradient(ellipse 60% 60% at 50% 110%, rgba(37,99,235,0.10), transparent 60%),
    var(--bg-deep);
}

.bg-grid{
  position:absolute; inset:-10%;
  background-image:
    linear-gradient(rgba(0,212,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.055) 1px, transparent 1px);
  background-size:46px 46px;
  animation: gridDrift 40s linear infinite;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 30%, black 40%, transparent 85%);
}
@keyframes gridDrift{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(46px,46px); }
}

#particles{ position:absolute; inset:0; opacity:.55; }

/* ============================================================
   Typography
   ============================================================ */

.brand-wordmark{
  font-family:var(--font-brand);
  letter-spacing:0.02em;
  font-weight:700;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:800;
  line-height:1.25;
  margin:0 0 .5em;
}

h1{ font-size:clamp(2.1rem, 5.5vw, 3.6rem); font-weight:900; }
h2{ font-size:clamp(1.7rem, 3.6vw, 2.5rem); }
h3{ font-size:clamp(1.2rem, 2.2vw, 1.5rem); }

p{ color:var(--gray-light); margin:0 0 1em; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue-electric);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:"";
  width:24px; height:1px;
  background:linear-gradient(90deg, var(--blue-electric), transparent);
}
body[dir="rtl"] .eyebrow::before{
  background:linear-gradient(270deg, var(--blue-electric), transparent);
}

.gradient-text{
  background:linear-gradient(90deg, var(--blue-electric) 0%, var(--neon-purple) 55%, var(--gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% auto;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

.mono{ font-family:var(--font-mono); }

/* ============================================================
   Layout helpers
   ============================================================ */

.container{
  /* Fluid width instead of a fixed max-width + fixed padding: the
     container is always "full viewport minus a 32px gutter", capped at
     --container on large screens — one expression that self-adjusts
     across the whole 320px–3840px+ range instead of relying on padding
     to create the small-screen gutter. */
  width:min(100% - 32px, var(--container));
  margin-inline:auto;
}

section{ position:relative; padding:clamp(56px, 9vw, 96px) 0; }
section.tight{ padding:clamp(40px, 7vw, 64px) 0; }

.section-head{
  max-width:640px;
  margin:0 0 3rem;
}
.section-head.center{ margin-inline:auto; text-align:center; }

.grid{ display:grid; gap:clamp(16px, 3vw, 24px); }
/* auto-fit/minmax replaces the old fixed-breakpoint column counts below —
   the grid now reflows continuously with the container's actual width
   instead of snapping at hardcoded widths, while the minmax basis for
   each grid is calibrated so it still lands on the SAME column counts
   the design was built around (4/3 desktop → 2 tablet → 1 mobile),
   since with 3–4 real items auto-fit can never exceed the item count.
   .grid-2 uses a wider basis (it holds exactly 2 wide text+icon cards,
   not a longer repeating row) so it drops to 1 column earlier, matching
   its original ~767px breakpoint rather than lingering as 2 cramped
   columns down to very small widths. */
.grid-2{ grid-template-columns:repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.grid > *{ height:100%; } /* uniform card height within a row */

/* ============================================================
   Glassmorphism card
   ============================================================ */

.glass{
  background:var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.glass:hover{
  border-color:var(--glass-border-strong);
  box-shadow:0 0 40px rgba(0,212,255,0.12), 0 20px 40px -20px rgba(0,0,0,0.6);
}

.card{ padding:clamp(20px, 4vw, 32px); }

.icon-badge{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, rgba(0,212,255,0.14), rgba(139,92,246,0.10));
  border:1px solid var(--glass-border);
  margin-bottom:1.25rem;
  color:var(--blue-electric);
  filter: drop-shadow(0 0 6px rgba(0,212,255,0.45));
}
.icon-badge svg{ width:24px; height:24px; }

/* ============================================================
   Buttons
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:14px 30px;
  border-radius:999px;
  font-weight:700;
  font-family:var(--font-head);
  font-size:.95rem;
  border:1px solid transparent;
  transition: all .3s var(--ease);
  white-space:nowrap;
  position:relative;
  z-index:0; /* establishes a local stacking context so .btn-ripple-layer's
                negative z-index stays contained inside this button only */
}
.btn svg{ width:18px; height:18px; position:relative; z-index:1; }

/* Ripple effect on click — contained in its own clipped layer, painted
   behind the label/icon (z-index:-1 within .btn's own stacking context)
   so it never sits on top of the text and never forces overflow:hidden
   onto .btn itself (which would clip the hover box-shadow glow). */
.btn-ripple-layer{
  position:absolute; inset:0;
  z-index:-1;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
}
.btn .ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  animation:rippleAnim .6s linear;
  background:rgba(255,255,255,0.45);
  pointer-events:none;
}
@keyframes rippleAnim{ to{ transform:scale(3.2); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .btn .ripple{ display:none; } }

/* Gold underline reveal for footer/inline links */
.footer-col a, .footer-brand a{
  position:relative;
  background-image:linear-gradient(var(--gold), var(--gold));
  background-repeat:no-repeat;
  background-size:0% 1px;
  background-position:0 100%;
  transition:background-size .35s var(--ease), color .25s ease;
}
.footer-col a:hover, .footer-brand a:hover{ background-size:100% 1px; color:var(--white); }

.btn-primary{
  /* was: linear-gradient(90deg, var(--blue-deep), var(--blue-electric)) —
     white text on the blue-electric end measured ~1.77:1 (a real WCAG AA
     failure on the site's primary CTA, used on every page including the
     waitlist submit button). --blue-electric-on-white keeps the same cyan
     hue at a depth that passes with white text (~4.67:1). */
  background:linear-gradient(90deg, var(--blue-deep), var(--blue-electric-on-white));
  color:var(--white);
  box-shadow:0 0 0 rgba(0,212,255,0);
}
.btn-primary:hover{
  box-shadow:0 0 28px rgba(0,212,255,0.55);
  transform:translateY(-2px);
}

.btn-ghost{
  background:transparent;
  border-color:var(--glass-border-strong);
  color:var(--white);
}
.btn-ghost:hover{
  border-color:var(--blue-electric);
  box-shadow:0 0 22px rgba(0,212,255,0.28);
  transform:translateY(-2px);
}

.btn-gold{
  background:linear-gradient(90deg,#8a6d24,var(--gold));
  color:#1a1305;
}
.btn-gold:hover{ box-shadow:0 0 28px rgba(231,181,80,0.5); transform:translateY(-2px); }

.btn-row{ display:flex; gap:16px; flex-wrap:wrap; }

/* ============================================================
   Nav
   ============================================================ */

.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(5,11,22,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.nav-logo{
  display:flex; align-items:center; gap:.6em;
  font-size:1.15rem;
}
@media (max-width:480px){ .nav-logo{ font-size:1rem; } }
.nav-logo .dot{ color:var(--blue-electric); }
.nav-links{
  display:flex; align-items:center; gap:2rem;
}
.nav-links a{
  font-size:.92rem; font-weight:600; color:var(--gray-light);
  transition:color .2s;
  position:relative;
}
.nav-links a:hover, .nav-links a.active{ color:var(--white); }
.nav-links a.active::after{
  content:""; position:absolute; bottom:-8px; inset-inline:0;
  height:2px; background:var(--blue-electric);
  box-shadow:0 0 8px var(--blue-electric);
}
.nav-cta{ display:flex; align-items:center; gap:12px; }

.lang-switch{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  min-height:44px;
  padding:9px 15px; border-radius:999px;
  border:1px solid var(--glass-border-strong);
  font-family:var(--font-mono); font-size:.78rem; font-weight:600; letter-spacing:.03em;
  color:var(--gray-light); transition:all .25s var(--ease); white-space:nowrap;
}
.lang-switch svg{ width:14px; height:14px; }
.lang-switch:hover{ color:var(--blue-electric); border-color:var(--blue-electric); box-shadow:0 0 14px rgba(0,212,255,0.28); }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--glass-border-strong);
  border-radius:8px; width:44px; height:44px;
  align-items:center; justify-content:center;
  color:var(--white);
}

@media (max-width:1023px){
  .nav-links{
    position:fixed; top:76px; bottom:0;
    inset-inline-end:0;
    width:min(320px, 82vw);
    background:rgba(5,11,22,0.97);
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    flex-direction:column; align-items:stretch;
    padding:1.6rem 24px 2rem;
    gap:1.1rem;
    overflow-y:auto;
    /* Anchored at the LOGICAL "end" edge (right in LTR, left in RTL) via
       inset-inline-end above. transform:translateX() always moves along the
       PHYSICAL x-axis regardless of dir — it is NOT itself a logical
       property — so the closed-state offset must flip sign per direction
       to push the drawer past whichever physical edge it's anchored to:
         LTR (anchored right) → translateX(+100%) slides it off past the right edge
         RTL (anchored left)  → translateX(-100%) slides it off past the left edge
       js/main.js sets this same value as an inline style at runtime (the
       authoritative source once JS is running); this CSS default only
       covers the instant before JS attaches, so there's never a flash of
       a visible/mis-parked drawer either way. */
    transform:translateX(100%);
    opacity:1; pointer-events:none;
    transition:transform .35s cubic-bezier(0.4, 0, 0.2, 1);
    border-inline-start:1px solid rgba(255,255,255,0.08);
    box-shadow:0 0 40px rgba(0,0,0,0.5);
  }
  [dir="rtl"] .nav-links{ transform:translateX(-100%); }
  .nav-links.open{ transform:translateX(0); pointer-events:auto; z-index:200; }
  .nav-links a{ padding-block:12px; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn-ghost{ display:none; }
}
/* Prevent background scroll while the mobile drawer is open */
body.nav-open{ overflow:hidden; }

/* Below ~600px the header row (logo + lang-switch + primary CTA + hamburger)
   no longer has room for the full "<icon> Join the Waitlist" button without
   wrapping/overflowing — and the same destination is already one tap away
   inside the drawer (see the "waitlist" link in .nav-links), so it's fully
   redundant to keep fighting for space with it here. */
@media (max-width:600px){
  .nav-cta .btn-primary{ display:none; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero{
  padding:clamp(72px, 14vw, 110px) 0 clamp(56px, 11vw, 90px);
  position:relative;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px, 5vw, 56px); align-items:center;
}
@media (max-width:1023px){ .hero-grid{ grid-template-columns:1fr; } }

.hero h1{ margin-bottom:.4em; }
.hero-wordmark{
  font-family:var(--font-brand); font-weight:900;
  font-size:clamp(2.5rem, 6.6vw, 4.4rem);
  line-height:1.05; letter-spacing:.005em;
  margin-bottom:.32em;
}
.brand-gradient{
  background:linear-gradient(90deg, var(--blue-electric) 0%, var(--blue-deep) 55%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation:gradientShift 8s ease infinite;
}
.hero-sub{ font-size:1.15rem; max-width:520px; }
.hero-tagline{
  font-family:var(--font-mono);
  color:var(--blue-electric);
  font-size:.95rem;
  min-height:1.4em;
  margin-bottom:1.4rem;
}
.hero-tagline .cursor{
  display:inline-block; width:2px; height:1em; background:var(--blue-electric);
  margin-inline-start:2px; vertical-align:-2px;
  animation: blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.hero-proof{
  margin-top:2rem; font-size:.85rem; color:var(--gray-light);
  display:flex; align-items:center; gap:.6em;
}
.hero-proof svg{ width:16px; height:16px; color:var(--tech-green); }

/* ============================================================
   DEVICE SHOWCASE — Cinematic 3D iPhone 17 Pro Max integration
   Real product photo (transparent PNG) over a luxurious stage:
   volumetric halo, gold-tinted grid, animated scan sweep, and
   cinematic corner brackets. No fake mockup frame anymore.
   ============================================================ */
.device-scan{
  position:relative; width:100%; max-width:360px; margin-inline:auto;
  aspect-ratio: 9/17;
  perspective: 1400px;
}
.device-stage{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:38px;
  overflow:visible;
  isolation:isolate;
}
/* Volumetric gold + cyan halo behind the device — carries the cinematic glow */
.device-halo{
  position:absolute; inset:-6%;
  background:
    radial-gradient(ellipse 55% 42% at 50% 42%, rgba(212,175,55,0.28), transparent 65%),
    radial-gradient(ellipse 70% 55% at 50% 58%, rgba(0,212,255,0.14), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(155,93,229,0.08), transparent 80%);
  filter: blur(6px);
  animation: haloBreathe 6s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes haloBreathe{
  0%,100%{ opacity:.85; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.04); }
}
/* Faint tech grid — reinforces the "diagnostic bay" feel */
.device-grid{
  position:absolute; inset:8% 6%;
  background-image:
    linear-gradient(rgba(212,175,55,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  opacity:.55;
  border-radius:32px;
  pointer-events:none;
  z-index:1;
}
/* The actual 3D iPhone photo — floats with a subtle levitation */
.device-photo{
  position:relative;
  width:88%; height:auto;
  max-height:100%;
  object-fit:contain;
  z-index:2;
  filter:
    drop-shadow(0 30px 40px rgba(0,0,0,0.55))
    drop-shadow(0 0 22px rgba(212,175,55,0.22))
    drop-shadow(0 0 40px rgba(0,212,255,0.10));
  animation: deviceFloat 6.5s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
@keyframes deviceFloat{
  0%,100%{ transform: translateY(0) rotateX(0deg) rotateZ(0deg); }
  50%{ transform: translateY(-10px) rotateX(1.2deg) rotateZ(0.4deg); }
}
/* Animated horizontal scan line that sweeps the device top→bottom */
.device-scanline{
  position:absolute; inset-inline:8%; top:10%;
  height:2px; z-index:3;
  background: linear-gradient(90deg,
    transparent,
    rgba(212,175,55,0.85) 30%,
    rgba(0,212,255,0.95) 50%,
    rgba(212,175,55,0.85) 70%,
    transparent);
  box-shadow:
    0 0 18px 2px rgba(212,175,55,0.55),
    0 0 28px 4px rgba(0,212,255,0.35);
  animation: deviceScan 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes deviceScan{
  0%{ top:10%; opacity:0; }
  10%{ opacity:1; }
  50%{ top:86%; opacity:1; }
  60%{ opacity:0; }
  100%{ top:10%; opacity:0; }
}
/* Cinematic gold corner brackets — HUD-style "target locked" feel */
.device-corner{
  position:absolute; width:26px; height:26px; z-index:4;
  border:2px solid var(--gold);
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.6));
  pointer-events:none;
  animation: cornerPulse 3s ease-in-out infinite;
}
.device-corner.tl{ top:4%;    inset-inline-start:4%; border-inline-end:none; border-bottom:none; border-radius:6px 0 0 0; }
.device-corner.tr{ top:4%;    inset-inline-end:4%;   border-inline-start:none; border-bottom:none; border-radius:0 6px 0 0; }
.device-corner.bl{ bottom:4%; inset-inline-start:4%; border-inline-end:none; border-top:none;    border-radius:0 0 0 6px; }
.device-corner.br{ bottom:4%; inset-inline-end:4%;   border-inline-start:none; border-top:none;    border-radius:0 0 6px 0; }
@keyframes cornerPulse{
  0%,100%{ opacity:.6; }
  50%{ opacity:1; }
}
.scan-readout{
  position:absolute; bottom:14px; inset-inline:18px;
  font-family:var(--font-mono); font-size:.62rem; color:var(--tech-green);
  opacity:.85; line-height:1.55; z-index:5;
  text-shadow: 0 0 8px rgba(0,255,148,0.35);
  letter-spacing:.02em;
}

/* device + spec card duo — pairs the phone mockup with a concrete "scan complete" readout */
.device-showcase{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.device-spec-card{
  width:100%; max-width:340px; padding:clamp(16px, 3vw, 22px) clamp(18px, 3.5vw, 24px);
}
.spec-status{
  display:flex; align-items:center; gap:.6em; font-family:var(--font-head); font-weight:700;
  font-size:.85rem; color:var(--tech-green); margin-bottom:1em;
  padding-bottom:1em; border-bottom:1px solid rgba(255,255,255,0.08);
}
.spec-status .dot-live{ width:8px; height:8px; border-radius:50%; background:var(--tech-green); box-shadow:0 0 8px var(--tech-green); animation:dotBlink 1.8s ease-in-out infinite; flex-shrink:0; }
.spec-list{ display:grid; gap:.65em; }
.spec-list li{ display:flex; align-items:center; justify-content:space-between; gap:1em; font-size:.82rem; }
.spec-list li span{ color:var(--gray-light); }
.spec-list li strong{ font-family:var(--font-mono); font-weight:500; color:var(--white); text-align:end; }
@media (min-width:960px){
  .device-showcase{ flex-direction:row; align-items:center; gap:28px; }
  .device-scan{ margin-inline:0; flex-shrink:0; }
  .device-spec-card{ max-width:220px; }
}

/* ============================================================
   Hero globe — "digital intelligence" signature element
   ============================================================ */

.hero-globe-wrap{
  position:relative; width:100%; max-width:440px; aspect-ratio:1/1; margin-inline:auto;
}
.hero-globe-wrap::before{ /* ambient bloom behind the globe */
  content:""; position:absolute; inset:-16%; border-radius:50%;
  background: radial-gradient(circle, rgba(0,212,255,0.20), rgba(139,92,246,0.09) 45%, transparent 72%);
  filter: blur(14px);
  z-index:-1;
}
.hero-globe{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  border:1px solid var(--glass-border-strong);
  box-shadow: inset 0 0 46px rgba(0,212,255,0.16), 0 0 55px rgba(0,212,255,0.14);
  background:
    radial-gradient(circle at 32% 28%, rgba(0,212,255,0.22), transparent 55%),
    radial-gradient(circle at 68% 72%, rgba(139,92,246,0.16), transparent 55%),
    radial-gradient(circle, rgba(17,24,39,0.92), rgba(5,8,14,0.98) 72%);
}
.hero-globe::after{ /* faux latitude bands — visible before/without the canvas */
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 16%, rgba(0,212,255,0.07) 16.4%);
  mix-blend-mode:screen;
}
.globe-canvas{
  /* No !important needed: js/globe.js calls renderer.setSize(w,h,false),
     so Three.js never writes an inline width/height style to override. */
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:1;
  filter: drop-shadow(0 0 20px rgba(0,212,255,0.25));
}
.radar-sweep{
  position:absolute; inset:0; border-radius:50%; z-index:2; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(0,212,255,0.32), transparent 22%);
  mix-blend-mode:screen;
  animation: radarSpin 7s linear infinite;
}
@keyframes radarSpin{ to{ transform:rotate(360deg); } }

.hud-corner{ position:absolute; width:20px; height:20px; border-color:var(--blue-electric); opacity:.55; pointer-events:none; }
.hud-corner.tl{ top:-6px; inset-inline-start:-6px; border-top:1.5px solid; border-inline-start:1.5px solid; }
.hud-corner.tr{ top:-6px; inset-inline-end:-6px; border-top:1.5px solid; border-inline-end:1.5px solid; }
.hud-corner.bl{ bottom:-6px; inset-inline-start:-6px; border-bottom:1.5px solid; border-inline-start:1.5px solid; }
.hud-corner.br{ bottom:-6px; inset-inline-end:-6px; border-bottom:1.5px solid; border-inline-end:1.5px solid; }

.hud-readout{
  position:absolute; font-size:.62rem; letter-spacing:.08em; color:var(--gray-light);
  display:flex; align-items:center; gap:.5em; text-transform:uppercase; z-index:3; pointer-events:none;
}
.hud-readout.top-start{ top:16px; inset-inline-start:6px; }
.hud-readout.bottom-end{ bottom:16px; inset-inline-end:6px; }
.hud-dot{
  width:6px; height:6px; border-radius:50%; background:var(--tech-green);
  box-shadow:0 0 6px var(--tech-green); animation: nodePulse 2s ease-in-out infinite;
}

@media (max-width:1023px){
  .hero-globe-wrap{ display:none; }
}
@media (max-width:640px){
  .hero-globe-wrap{ max-width:300px; }
}

/* ============================================================
   Platform brief — two-column feature checklist + device visual
   ============================================================ */

.platform-brief-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
@media (max-width:960px){ .platform-brief-grid{ grid-template-columns:1fr; } }

/* logo marquee */
.marquee{
  overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:clamp(18px, 4vw, 28px) 0;
}
.marquee-track{
  display:flex; gap:64px; width:max-content;
  animation:marquee 26s linear infinite;
  font-family:var(--font-brand);
  font-size:1.05rem;
  color:var(--gray-light);
  letter-spacing:.04em;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* ============================================================
   Feature checklist
   ============================================================ */

.check-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem 2rem; }
@media (max-width:640px){ .check-list{ grid-template-columns:1fr; } }
.check-list li{
  display:flex; align-items:center; gap:.7em;
  color:var(--white); font-weight:600; font-size:.95rem;
}
.check-list svg{ width:18px; height:18px; color:var(--tech-green); flex-shrink:0; }

/* ============================================================
   Stats
   ============================================================ */

.stat-card{
  text-align:center; padding:clamp(24px, 4vw, 36px) clamp(14px, 3vw, 20px);
}
.stat-num{
  font-family:var(--font-brand); font-weight:700;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  color:var(--blue-electric);
  text-shadow:0 0 24px rgba(0,212,255,0.35);
}
.stat-label{ color:var(--gray-light); font-size:.88rem; margin-top:.4em; }

/* ============================================================
   Testimonials
   ============================================================ */

.testi-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px;
  scrollbar-width:thin; scrollbar-color:var(--glass-border-strong) transparent;
}
.testi-track::-webkit-scrollbar{ height:6px; }
.testi-track::-webkit-scrollbar-thumb{ background:var(--glass-border-strong); border-radius:3px; }
.testi-card{
  scroll-snap-align:start; min-width:min(320px, 85vw); max-width:380px; padding:clamp(20px, 4vw, 28px);
}
.testi-stars{ color:var(--gold); font-size:.85rem; margin-bottom:.8em; letter-spacing:.15em; }
.testi-quote{ color:var(--white); font-size:.98rem; }
.testi-author{ margin-top:1.2em; font-size:.85rem; color:var(--gray-light); display:flex; align-items:center; gap:.6em; }
.testi-avatar{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-electric), var(--neon-purple));
}

/* ============================================================
   Pricing
   ============================================================ */

.pricing-card{
  padding:clamp(22px, 4vw, 32px) clamp(18px, 3.5vw, 28px); display:flex; flex-direction:column; position:relative;
}
.pricing-card.featured{
  border-color:var(--blue-electric);
  box-shadow:0 0 40px rgba(0,212,255,0.18);
}
.pricing-card.ultra{
  border-color:var(--gold);
  animation: goldPulse 3.2s ease-in-out infinite;
}
@keyframes goldPulse{
  0%,100%{ box-shadow:0 0 20px rgba(231,181,80,0.18); }
  50%{ box-shadow:0 0 34px rgba(231,181,80,0.45); }
}
@media (prefers-reduced-motion: reduce){
  .pricing-card.ultra{ animation:none; box-shadow:0 0 30px rgba(231,181,80,0.25); }
}
.pricing-badge{
  position:absolute; top:-13px; inset-inline:0; margin-inline:auto; width:fit-content;
  /* was linear-gradient(90deg, var(--blue-deep), var(--blue-electric)) —
     same white-text contrast failure as
     .btn-primary above, and worse here: badge text is .72rem/~11.5px, too
     small to qualify for the large-text exemption even at font-weight:700. */
  background:linear-gradient(90deg, var(--blue-deep), var(--blue-electric-on-white));
  color:var(--white);
  font-family:var(--font-head); font-weight:700; font-size:.72rem;
  padding:5px 16px; border-radius:999px;
}
.pricing-badge.gold{ background:linear-gradient(90deg,#8a6d24,var(--gold)); color:#1a1305; }
.plan-name{ font-family:var(--font-head); font-weight:800; font-size:1.1rem; margin-bottom:.3em; }
.plan-tagline{ font-size:.76rem; color:var(--blue-electric); letter-spacing:.02em; margin-top:-.4em; margin-bottom:1em; }
.plan-price{ font-family:var(--font-brand); font-size:clamp(1.7rem, 5vw, 2rem); color:var(--white); margin-bottom:.1em; }
.plan-price span{ font-size:.9rem; color:var(--gray-light); font-family:var(--font-body); }
.plan-credits{ font-size:.85rem; color:var(--blue-electric); margin-bottom:1.4em; }
.plan-features{ flex:1; margin-bottom:1.6em; }
.plan-features li{ display:flex; gap:.6em; align-items:flex-start; font-size:.88rem; color:var(--gray-light); margin-bottom:.7em; }
.plan-features svg{ width:15px; height:15px; color:var(--tech-green); flex-shrink:0; margin-top:2px; }

.credits-note{ padding:clamp(20px, 4vw, 28px) clamp(20px, 4vw, 32px); }
.credits-note ul{ display:grid; gap:.7em; }
.credits-note li{ display:flex; gap:.7em; font-size:.92rem; color:var(--gray-light); }
.credits-note svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; margin-top:3px; }

/* ============================================================
   FAQ Accordion
   ============================================================ */

.faq-item{ border-bottom:1px solid rgba(255,255,255,0.08); }
.faq-item:first-child{ border-top:1px solid rgba(255,255,255,0.08); }
.faq-q{
  width:100%; background:none; border:none; color:var(--white);
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 4px; font-family:var(--font-head); font-weight:700; font-size:1rem; text-align:start;
}
.faq-q svg{ width:20px; height:20px; color:var(--blue-electric); flex-shrink:0; transition:transform .3s var(--ease); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{
  max-height:0; overflow:hidden; transition:max-height .35s var(--ease);
}
.faq-a-inner{ padding:0 4px 22px; color:var(--gray-light); font-size:.94rem; max-width:820px; }

/* ============================================================
   Release timeline
   ============================================================ */

.timeline{ position:relative; padding-inline-start:28px; }
.timeline::before{
  content:""; position:absolute; inset-inline-start:6px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--blue-electric), transparent);
}
.timeline-item{ position:relative; padding-bottom:44px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; inset-inline-start:-28px; top:4px;
  width:12px; height:12px; border-radius:50%;
  background:var(--bg-deep); border:2px solid var(--blue-electric);
  box-shadow:0 0 10px var(--blue-electric);
}
/* font-weight:700 pinned explicitly (not just inherited) — Orbitron is only
   loaded at 600/700/900, and at 1.2rem/19.2px this needs to reliably read as
   "large bold text" for WCAG contrast purposes: the .v-purple variant below
   sits at ~4.2:1 against the translucent .glass card surface, which clears
   the 3:1 bold-large threshold but not the 4.5:1 normal-text one. */
.release-version{ font-family:var(--font-brand); font-weight:700; color:var(--blue-electric); font-size:1.2rem; }
.release-date{ font-family:var(--font-mono); font-size:.78rem; color:var(--gray-light); margin-bottom:1em; }
.release-tag{
  display:inline-block; font-family:var(--font-mono); font-size:.7rem; color:var(--tech-green);
  border:1px solid rgba(43,232,112,0.35); padding:2px 10px; border-radius:999px; margin-bottom:1em;
}

/* version accent colors — each named release gets its own signature color */
.timeline-item.v-gold::before{ border-color:var(--gold); box-shadow:0 0 10px var(--gold); }
.timeline-item.v-gold .release-version{ color:var(--gold); }
.timeline-item.v-gold .glass{ border-color:rgba(231,181,80,0.3); }
.timeline-item.v-blue::before{ border-color:var(--blue-electric); box-shadow:0 0 10px var(--blue-electric); }
.timeline-item.v-blue .release-version{ color:var(--blue-electric); }
.timeline-item.v-purple::before{ border-color:var(--neon-purple); box-shadow:0 0 10px var(--neon-purple); }
.timeline-item.v-purple .release-version{ color:var(--neon-purple); }
.timeline-item.v-purple .glass{ border-color:rgba(139,92,246,0.3); }

/* ============================================================
   Blog
   ============================================================ */

.blog-card{ overflow:hidden; }
.blog-thumb{
  height:170px; position:relative;
  background:linear-gradient(135deg, rgba(0,212,255,0.16), rgba(139,92,246,0.14));
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--glass-border);
}
.blog-thumb svg{ width:44px; height:44px; color:var(--blue-electric); opacity:.85; }
.blog-body{ padding:clamp(18px, 3.5vw, 26px); }
.blog-meta{
  display:flex; gap:14px; flex-wrap:wrap; font-family:var(--font-mono); font-size:.72rem;
  color:var(--gray-light); margin-bottom:.8em;
}
.blog-meta span{ display:flex; align-items:center; gap:.4em; }
.blog-meta svg{ width:13px; height:13px; }
.blog-cat{ color:var(--blue-electric); }
.blog-title{ font-size:1.08rem; margin-bottom:.5em; }
.blog-excerpt{ font-size:.9rem; }
.read-more{
  display:inline-flex; align-items:center; gap:.4em; font-size:.85rem; font-weight:700;
  color:var(--blue-electric); margin-top:.6em;
}
.read-more svg{ width:15px; height:15px; transition:transform .2s; }
body[dir="rtl"] .read-more svg{ transform:scaleX(-1); }
.read-more:hover svg{ transform:translateX(4px); }
body[dir="rtl"] .read-more:hover svg{ transform:scaleX(-1) translateX(4px); }

.blog-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:2.5rem; }
.filter-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  padding:8px 18px; border-radius:999px; border:1px solid var(--glass-border-strong);
  font-size:.85rem; color:var(--gray-light); background:transparent; transition:all .2s;
}
.filter-pill.active, .filter-pill:hover{ background:var(--blue-electric); color:var(--bg-deep); border-color:var(--blue-electric); }

.search-row{ display:flex; gap:12px; max-width:420px; margin-bottom:3rem; }
.search-row input{
  flex:1; padding:13px 18px; border-radius:999px; border:1px solid var(--glass-border-strong);
  background:rgba(255,255,255,0.03); color:var(--white); font-size:.9rem;
}
.search-row input::placeholder{ color:var(--gray-light); }

/* ============================================================
   Platform feature table
   ============================================================ */

.feature-table{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:800px){ .feature-table{ grid-template-columns:1fr; } }
.feature-cell{ padding:clamp(18px, 3.5vw, 28px); }
.feature-cell h3{ display:flex; align-items:center; gap:.6em; font-size:1.05rem; margin-bottom:.5em; }
.feature-cell h3 svg{ width:20px; height:20px; color:var(--blue-electric); }

/* ============================================================
   Release requirement lists
   ============================================================ */

.req-list{ display:grid; gap:.8rem; }
.req-list li{ display:flex; gap:.7em; font-size:.94rem; color:var(--gray-light); }
.req-list svg{ width:16px; height:16px; color:var(--blue-electric); flex-shrink:0; margin-top:3px; }

/* ============================================================
   Team / About
   ============================================================ */

.team-card{ text-align:center; padding:clamp(22px, 4vw, 32px) clamp(14px, 3vw, 20px); }
.team-avatar{
  width:84px; height:84px; border-radius:50%; margin:0 auto 1em;
  background:linear-gradient(135deg, var(--blue-electric), var(--neon-purple));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-brand); font-size:1.5rem;
  /* Overrides the white inherited from .brand-wordmark on purpose: white
     text on this gradient measures as low as ~1.8:1 against the
     blue-electric end (fails WCAG's 3:1 large-text floor by a wide margin).
     bg-deep instead gives 4.65:1–11.1:1 across the whole gradient. */
  color:var(--bg-deep);
}
.value-pill{
  display:inline-flex; align-items:center; gap:.5em;
  padding:10px 20px; border-radius:999px; border:1px solid var(--glass-border-strong);
  font-size:.88rem; font-weight:700;
}
.value-row{ display:flex; flex-wrap:wrap; gap:14px; }
.value-row svg{ width:16px; height:16px; color:var(--blue-electric); }

.cert-list{ display:grid; gap:1rem; }
.cert-list li{ display:flex; gap:.8em; align-items:center; font-size:.95rem; }
.cert-list svg{ width:20px; height:20px; color:var(--tech-green); flex-shrink:0; }

/* ============================================================
   Legal pages
   ============================================================ */

.legal-summary{
  padding:clamp(20px, 4vw, 30px) clamp(18px, 4vw, 32px); margin-bottom:3rem;
  border-color:var(--glass-border-strong);
}
.legal-summary .eyebrow{ color:var(--gold); }
.legal-summary .eyebrow::before{ background:linear-gradient(90deg, var(--gold), transparent); }

.legal-body h2{
  font-size:1.15rem; margin-top:2.4em; padding-top:1.4em;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; gap:.5em;
}
.legal-body h2:first-child{ margin-top:0; padding-top:0; border-top:none; }
.legal-body h2 .num{ font-family:var(--font-mono); color:var(--blue-electric); font-size:.85em; }
.legal-body p, .legal-body li{ color:var(--gray-light); font-size:.95rem; }
.legal-body strong{ color:var(--white); }
.legal-body ul{ margin:1em 0; padding-inline-start:1.4em; list-style:disc; }
.legal-body ul li{ margin-bottom:.5em; }
.legal-updated{ font-family:var(--font-mono); font-size:.8rem; color:var(--gray-light); margin-bottom:2rem; }

.pdf-cta{
  margin-top:3rem; padding:clamp(18px, 4vw, 26px) clamp(18px, 4vw, 30px);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}

/* ============================================================
   CTA band
   ============================================================ */

.cta-band{
  text-align:center; padding:clamp(44px, 8vw, 70px) clamp(20px, 5vw, 40px); position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(0,212,255,0.12), transparent 70%);
}

/* ============================================================
   Footer
   ============================================================ */

footer{
  border-top:1px solid rgba(255,255,255,0.07);
  padding:clamp(40px, 8vw, 64px) 0 clamp(20px, 4vw, 32px);
  margin-top:clamp(36px, 7vw, 60px);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(24px, 5vw, 40px);
  padding-bottom:clamp(24px, 5vw, 40px); border-bottom:1px solid rgba(255,255,255,0.07);
}
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand p{ font-size:.88rem; max-width:280px; }
.footer-col h4{ font-family:var(--font-head); font-size:.85rem; color:var(--white); margin-bottom:1.1em; letter-spacing:.03em; }
.footer-col a{ display:block; font-size:.87rem; color:var(--gray-light); margin-bottom:.75em; transition:color .2s; }
.footer-col a:hover{ color:var(--blue-electric); }
.footer-email{ display:flex; align-items:center; gap:.6em; font-size:.87rem; color:var(--gray-light); margin-bottom:1.2em; }
.footer-email svg{ width:16px; height:16px; color:var(--blue-electric); }
.social-row{ display:flex; gap:10px; }
.social-btn{
  width:44px; height:44px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--glass-border-strong); color:var(--gray-light);
  transition:all .25s var(--ease);
}
.social-btn:hover{ color:var(--blue-electric); border-color:var(--blue-electric); box-shadow:0 0 16px rgba(0,212,255,0.35); transform:translateY(-2px); }
.social-btn svg{ width:18px; height:18px; }
.footer-bottom{
  padding-top:28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.8rem; color:var(--gray-light);
}

/* ============================================================
   Reveal on scroll
   ============================================================ */

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============================================================
   Page header (inner pages)
   ============================================================ */

.page-header{ padding:clamp(88px, 16vw, 130px) 0 clamp(36px, 7vw, 60px); text-align:center; }
.page-header p{ max-width:560px; margin-inline:auto; }

/* ============================================================
   Utility
   ============================================================ */

.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.gap-sm{ gap:8px; }

/* ============================================================
   Coming Soon: ambient orbs, badge, countdown, waitlist
   ============================================================ */

.ambient-orbs{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.orb{
  position:absolute;
  width:340px; height:340px;
  border-radius:50%;
  filter:blur(120px);
  opacity:.55;
  animation: orbFloat 22s ease-in-out infinite;
}
.orb.orb-a{ top:-60px; inset-inline-start:-40px; background:var(--blue-electric); }
.orb.orb-b{ bottom:-80px; inset-inline-end:-60px; background:var(--neon-purple); animation-duration:28s; animation-delay:-6s; }
@keyframes orbFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(40px,30px) scale(1.08); }
  66%{ transform:translate(-30px,20px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce){ .orb{ animation:none; } }

.coming-soon-badge{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 16px; border-radius:999px; margin-bottom:1em;
  background:rgba(0,212,255,0.08);
  border:1px solid var(--glass-border-strong);
  color:var(--blue-electric);
}
.coming-soon-badge .dot-live{
  width:7px; height:7px; border-radius:50%; background:var(--tech-green);
  box-shadow:0 0 8px var(--tech-green);
  animation:dotBlink 1.6s ease-in-out infinite;
}
@keyframes dotBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.countdown{
  display:flex; gap:14px; margin:1.4em 0; flex-wrap:wrap;
}
.countdown.launched{
  font-family:var(--font-head); font-weight:800; font-size:1.2rem;
  color:var(--tech-green);
}
.countdown .cd-unit{
  min-width:70px; text-align:center;
  padding:12px 8px;
  border-radius:var(--radius-md);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.countdown .cd-num{
  font-family:var(--font-brand); font-size:1.6rem; font-weight:700;
  color:var(--white); line-height:1;
}
.countdown .cd-label{ font-size:.68rem; color:var(--gray-light); text-transform:uppercase; letter-spacing:.08em; margin-top:.4em; }

.waitlist-section{ padding:clamp(44px, 8vw, 70px) 0; }
.waitlist-card{
  max-width:640px; margin-inline:auto; text-align:center; padding:clamp(28px, 5vw, 44px) clamp(20px, 4vw, 36px);
}
.waitlist-form{
  display:flex; gap:12px; margin-top:1.6em; max-width:460px; margin-inline:auto;
}
.waitlist-form input[type="email"]{
  flex:1;
  padding:14px 20px;
  border-radius:999px;
  border:1px solid var(--glass-border-strong);
  background:rgba(255,255,255,0.04);
  color:var(--white);
  font-family:var(--font-body);
  font-size:.95rem;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
/* Honeypot: kept off-screen (not display:none) so it still "exists" to a
   scripted form-filler that skips hidden inputs, while never being seen
   or reachable by real visitors (tabindex -1, aria-hidden, no focus ring). */
.hp-field{
  position:absolute; inset-inline-start:-9999px; width:1px; height:1px;
  opacity:0; overflow:hidden; pointer-events:none;
}
.waitlist-form input[type="email"]::placeholder{ color:var(--gray-light); }
.waitlist-form input[type="email"]:focus{ outline:none; border-color:var(--blue-electric); box-shadow:0 0 0 3px rgba(0,212,255,0.15); }
.waitlist-msg{ margin-top:1em; font-size:.9rem; min-height:1.4em; }
.waitlist-msg:empty{ margin-top:0; }
.waitlist-msg.success{
  display:inline-flex; align-items:center; gap:.5em;
  padding:10px 20px;
  border-radius:999px;
  color:var(--tech-green);
  background:rgba(43,232,112,0.08);
  border:1px solid rgba(43,232,112,0.35);
  box-shadow:0 0 28px rgba(43,232,112,0.35);
  animation:waitlistSuccessPop .4s var(--ease);
}
.waitlist-msg.error{
  display:inline-flex; align-items:center; gap:.5em;
  padding:10px 20px;
  border-radius:999px;
  color:#f87171;
  background:rgba(248,113,113,0.08);
  border:1px solid rgba(248,113,113,0.3);
  animation:waitlistSuccessPop .3s var(--ease);
}
@keyframes waitlistSuccessPop{
  from{ opacity:0; transform:translateY(4px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* Submit spinner — shown on .btn while a form request is in flight.
   Keeps the button's original size (no layout shift): label/icon fade
   out via opacity, a centered ring spinner fades in via ::after. */
.btn.is-submitting{ pointer-events:none; }
.btn.is-submitting > svg,
.btn.is-submitting{ color:transparent; }
.btn.is-submitting::after{
  content:"";
  position:absolute; inset:0; margin:auto;
  width:18px; height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  animation:btnSpin .7s linear infinite;
}
@keyframes btnSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn.is-submitting::after{ animation-duration:1.4s; }
}

@media (max-width:560px){
  .waitlist-form{ flex-direction:column; }
  .countdown{ justify-content:center; }
  .countdown .cd-unit{ min-width:60px; }
}

/* ============================================================
   Accessibility: skip-to-content link
   ============================================================ */
.skip-link{
  position:fixed;
  top:-60px; inset-inline-start:16px;
  z-index:1000;
  background:var(--blue-electric);
  color:var(--bg-deep);
  font-family:var(--font-body); font-weight:700; font-size:.9rem;
  padding:12px 22px;
  border-radius:var(--radius-sm);
  transition:top .25s var(--ease);
  text-decoration:none;
}
.skip-link:focus{
  top:16px;
  outline:2px solid var(--white);
  outline-offset:3px;
}

/* ============================================================
   Mobile nav backdrop — dims page content behind the off-canvas
   menu and gives the user a large "tap outside to close" target.

   Architecture note: .nav-backdrop and .nav-links are intentionally
   direct children of <body> (moved there in markup, not nested inside
   <header class="nav">). A position:fixed element's containing block —
   and an ancestor with its own stacking context (e.g. a positioned
   element with an explicit z-index, like the sticky header) — can hijack
   a fixed descendant's sizing and paint order. Living inside the header
   previously caused the drawer to size itself against the ~76px header
   box instead of the full viewport. Being top-level siblings makes that
   entire bug class structurally impossible, regardless of what the
   header's own styling does now or in the future.
   ============================================================ */
.nav-backdrop{ display:none; }
@media (max-width:1023px){
  .nav-backdrop{
    display:block;
    position:fixed; inset:0; top:76px;
    background:rgba(0,0,0,0.55);
    opacity:0; pointer-events:none;
    transition:opacity .32s var(--ease);
    z-index:150;
  }
  .nav-backdrop.open{ opacity:1; pointer-events:auto; }
}
@media (prefers-reduced-motion: reduce){
  .nav-backdrop{ transition:none; }
}

/* ============================================================
   Back-to-top floating button
   ============================================================ */
.back-to-top{
  position:fixed;
  inset-inline-end:24px; bottom:24px;
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg);
  border:1px solid var(--glass-border-strong);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--blue-electric);
  box-shadow:0 4px 24px rgba(0,0,0,0.35);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, border-color .25s var(--ease), box-shadow .25s var(--ease);
  z-index:60;
  cursor:pointer;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ border-color:var(--blue-electric); box-shadow:0 4px 28px rgba(0,212,255,0.4); }
.back-to-top:focus-visible{ outline:2px solid var(--blue-electric); outline-offset:3px; }
.back-to-top svg{ width:20px; height:20px; }
@media (max-width:600px){
  .back-to-top{ inset-inline-end:16px; bottom:16px; width:46px; height:46px; }
}
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition:opacity .01ms linear, visibility .01ms linear; }
}

/* ============================================================
   Skeleton loading — brief shimmer placeholder shown on cards and
   counters while webfonts/icons finish initializing. Pure CSS +
   a single "skeleton-active" class toggled on <body> by main.js;
   no extra markup needed on any page.
   ============================================================ */
body.skeleton-active .glass{
  position:relative;
  overflow:hidden;
}
body.skeleton-active .glass > *{
  opacity:0;
}
body.skeleton-active .glass::before{
  content:"";
  position:absolute; inset:16px;
  background:var(--glass-border);
  border-radius:var(--radius-md);
  opacity:.45;
}
body.skeleton-active .glass::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes skeletonShimmer{
  0%{ background-position:150% 0; }
  100%{ background-position:-50% 0; }
}
@media (prefers-reduced-motion: reduce){
  body.skeleton-active .glass::after{ animation:none; opacity:.5; }
}

/* ============================================================
   404 page
   ============================================================ */
.not-found-section{ display:flex; align-items:center; min-height:calc(100dvh - 76px); padding:clamp(40px, 8vw, 64px) 0; }
.not-found-card{
  max-width:640px; margin:0 auto; padding:clamp(28px, 6vw, 56px) clamp(20px, 5vw, 40px); text-align:center;
}
.not-found-num{
  font-family:var(--font-brand);
  font-size:clamp(4.5rem, 14vw, 7.5rem);
  font-weight:900; line-height:1; margin:.2em 0;
  letter-spacing:.02em;
}
.not-found-card h2{ margin-bottom:.6em; }
.not-found-card p{ color:var(--gray-light); max-width:460px; margin-inline:auto; margin-bottom:2em; }
.not-found-card .btn-row{ margin-bottom:2em; }
.not-found-links{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
  font-size:.85rem; color:var(--gray-light); border-top:1px solid var(--glass-border); padding-top:1.6em;
}
.not-found-links a{ color:var(--gray-light); transition:color .2s; }
.not-found-links a:hover{ color:var(--blue-electric); }

/* ============================================================
   Small-phone refinements (iPhone SE/mini/11/12/13/14 range and
   similar — roughly 320–428px). Everything above this already
   reflows fluidly via clamp()/min()/auto-fit; these are the few
   spots where a hard cutover still reads better than a curve:
   trimming a secondary wordmark label, tightening button padding
   so longer Arabic/English CTA labels never approach the edge of
   the viewport, and shrinking a couple of decorative elements that
   don't need to stay full-size on the smallest phones.
   ============================================================ */
@media (max-width:428px){
  /* Drop the "TECHNOLOGIES" sub-label, keep just the "Mr.T" wordmark —
     frees up real width in the header row next to the lang switch and
     hamburger button. */
  .nav-logo span:not(.dot){ display:none; }

  .btn{ padding:13px 22px; font-size:.9rem; }

  .icon-badge{ width:44px; height:44px; }
  .icon-badge svg{ width:20px; height:20px; }

  .section-head{ margin-bottom:2rem; }

  .hero-proof{ flex-wrap:wrap; row-gap:.5em; }
}