/* =====================================================================
   HERO APPS — marketing site
   Dark-glass surface grounded in the HeroNet Design System tokens.
   Hero Purple is the brand signature; blue / cyan / violet are the
   electric accents the brief asks for; navy→indigo→violet is the
   sanctioned rich-dark gradient.
   ===================================================================== */

/* ---------- Fonts (self-hosted subset) ---------- */
@font-face { font-family:'Urbanist'; src:url('./fonts/Urbanist-Medium.ttf') format('truetype');    font-weight:500; font-display:swap; }
@font-face { font-family:'Urbanist'; src:url('./fonts/Urbanist-SemiBold.ttf') format('truetype');  font-weight:600; font-display:swap; }
@font-face { font-family:'Urbanist'; src:url('./fonts/Urbanist-Bold.ttf') format('truetype');      font-weight:700; font-display:swap; }
@font-face { font-family:'Urbanist'; src:url('./fonts/Urbanist-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }
@font-face { font-family:'Urbanist'; src:url('./fonts/Urbanist-Black.ttf') format('truetype');     font-weight:900; font-display:swap; }
@font-face { font-family:'Inter'; src:url('./fonts/Inter-Regular.ttf') format('truetype');  font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('./fonts/Inter-Medium.ttf') format('truetype');   font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('./fonts/Inter-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('./fonts/Inter-Bold.ttf') format('truetype');     font-weight:700; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('./fonts/JetBrainsMono-Regular.ttf') format('truetype');  font-weight:400; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('./fonts/JetBrainsMono-Medium.ttf') format('truetype');   font-weight:500; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('./fonts/JetBrainsMono-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }

:root{
  /* fonts */
  --font-display:'Urbanist', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* brand */
  --hero-purple-300:#B888DD;
  --hero-purple-400:#9A5FCF;
  --hero-purple-500:#7A3CBE;
  --hero-purple-600:#6329A8;
  --hero-purple-700:#4B1F82;

  --navy-500:#0F1A2E;
  --navy-700:#09101C;
  --navy-grad-indigo:#1A1F4A;
  --navy-grad-violet:#2A1A52;

  /* electric accents */
  --blue-400:#60A5FA;
  --blue-500:#2563EB;
  --cyan-300:#67E8F9;
  --cyan-500:#22D3EE;
  --violet-300:#C4B5FD;
  --violet-400:#A78BFA;
  --violet-500:#8B5CF6;
  --indigo-400:#818CF8;
  --teal-300:#5EEAD4;
  --amber-400:#FBBF24;
  --rose-500:#F43F5E;
  --danger-500:#EF4444;
  --success-400:#34D399;

  /* dark surface system */
  --ink-980:#05070E;
  --ink-950:#080B16;
  --ink-900:#0B1020;
  --panel:#0E1428;

  /* glass */
  --glass-fill:rgba(255,255,255,0.045);
  --glass-fill-2:rgba(255,255,255,0.07);
  --glass-line:rgba(255,255,255,0.10);
  --glass-line-2:rgba(255,255,255,0.16);

  /* foreground on dark */
  --fg-1:#F4F7FF;   /* headings */
  --fg-2:#C2CCE0;   /* body */
  --fg-3:#8E9ABA;   /* secondary */
  --fg-4:#5E6A88;   /* meta */

  /* radii */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-2xl:24px;
  --radius-pill:9999px;

  /* motion */
  --ease-out-quart:cubic-bezier(0.22,1,0.36,1);
  --ease-spring:cubic-bezier(0.16,1,0.3,1);

  /* shadows */
  --shadow-purple-glow:0 18px 50px -16px rgba(122,60,190,0.65);
  --shadow-card:0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 50px -24px rgba(0,0,0,0.85);

  --maxw:1240px;
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--fg-2);
  background:var(--ink-980);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--fg-1); margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:rgba(154,95,207,0.4); color:#fff; }

/* ---------- page background field ---------- */
.bg-field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(122,60,190,0.30), transparent 60%),
    radial-gradient(1000px 640px at 10% 6%, rgba(37,99,235,0.20), transparent 58%),
    radial-gradient(900px 800px at 50% 110%, rgba(34,211,238,0.10), transparent 60%),
    linear-gradient(180deg, var(--ink-980) 0%, var(--ink-950) 38%, #0a0a18 100%);
}
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.5;
  background-image:radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(circle at 50% 22%, #000 0%, transparent 72%);
          mask-image:radial-gradient(circle at 50% 22%, #000 0%, transparent 72%);
}
.bg-blob{ position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter:blur(90px); opacity:0.5; }
.blob-a{ width:520px; height:520px; top:-120px; right:-80px; background:radial-gradient(circle, rgba(139,92,246,0.55), transparent 70%); }
.blob-b{ width:480px; height:480px; top:520px; left:-160px; background:radial-gradient(circle, rgba(37,99,235,0.45), transparent 70%); }
.blob-c{ width:560px; height:560px; bottom:-160px; right:5%; background:radial-gradient(circle, rgba(34,211,238,0.25), transparent 70%); }

/* floating particles */
.particles{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.particle{ position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(190,200,255,0.7);
  box-shadow:0 0 8px 1px rgba(150,170,255,0.6); animation:drift linear infinite; }
@keyframes drift{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:0.8; }
  90%{ opacity:0.8; }
  100%{ transform:translateY(-120px) translateX(18px); opacity:0; }
}

#root{ position:relative; z-index:1; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
section{ position:relative; }
section[id]{ scroll-margin-top: 88px; }
.section-pad{ padding:96px 0; }

/* scroll progress bar */
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0; z-index:60; pointer-events:none;
  background:linear-gradient(90deg, var(--hero-purple-400), var(--violet-400), var(--cyan-300));
  box-shadow:0 0 10px rgba(139,92,246,0.6); transition:width .1s linear; }
@media (max-width:760px){ .section-pad{ padding:64px 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--violet-300);
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--violet-400);
  box-shadow:0 0 10px 1px var(--violet-400); }

.section-head{ max-width:720px; }
.section-head h2{ font-size:clamp(28px,4vw,46px); font-weight:800; letter-spacing:-0.02em; line-height:1.06; margin-top:16px; }
.section-head p{ font-size:18px; line-height:1.6; color:var(--fg-3); margin-top:16px; }

.grad-text{
  background:linear-gradient(94deg,#fff 0%, var(--violet-300) 42%, var(--cyan-300) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:600; font-size:15px; line-height:1;
  padding:13px 20px; border-radius:var(--radius-pill); border:1px solid transparent;
  cursor:pointer; transition:transform var(--dur,180ms) var(--ease-out-quart), box-shadow .18s, background .18s, border-color .18s;
  white-space:nowrap; }
.btn svg{ width:17px; height:17px; }
.btn-primary{ color:#fff; background:linear-gradient(180deg, var(--hero-purple-400), var(--hero-purple-600));
  box-shadow:var(--shadow-purple-glow); border-color:rgba(255,255,255,0.14); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 22px 60px -16px rgba(139,92,246,0.85); }
.btn-ghost{ color:var(--fg-1); background:var(--glass-fill-2); border-color:var(--glass-line-2); backdrop-filter:blur(8px); }
.btn-ghost:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.28); }
.btn:focus-visible{ outline:2px solid var(--violet-400); outline-offset:3px; }
.btn .arrow{ transition:transform .2s var(--ease-out-quart); }
.btn:hover .arrow{ transform:translateX(3px); }

/* ---------- glass card ---------- */
.glass{
  position:relative; background:var(--glass-fill); border:1px solid var(--glass-line);
  border-radius:var(--radius-xl); backdrop-filter:blur(14px);
  box-shadow:var(--shadow-card);
}
.glass::before{ /* subtle top sheen */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%);
}

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out-quart), transform .7s var(--ease-out-quart); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.07s; } .reveal.d2{ transition-delay:.14s; }
.reveal.d3{ transition-delay:.21s; } .reveal.d4{ transition-delay:.28s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s, border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(8,11,22,0.72); backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--glass-line); }
.nav-inner{ height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand-shield{ width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 3px 10px rgba(139,92,246,0.55)); }
.brand-name{ font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-0.01em; color:#fff; }
.brand-name span{ color:var(--violet-300); }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{ font-size:14.5px; font-weight:500; color:var(--fg-3); padding:9px 13px; border-radius:var(--radius-pill); transition:color .18s, background .18s; }
.nav-links a:hover{ color:#fff; background:var(--glass-fill-2); }
.nav-links a.active{ color:#fff; background:var(--glass-fill-2); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; }
@media (max-width:920px){
  .nav-links{ display:none; }
  .nav-cta .btn-ghost{ display:none; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{ padding:128px 0 72px; position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:36px; } }
.hero-pill{ display:inline-flex; align-items:center; gap:9px; padding:7px 7px 7px 14px; border-radius:var(--radius-pill);
  background:var(--glass-fill-2); border:1px solid var(--glass-line-2); font-size:13px; color:var(--fg-2); }
.hero-pill .leaf{ font-size:14px; }
.hero-pill b{ display:inline-flex; align-items:center; gap:6px; background:rgba(122,60,190,0.28); color:#EBDEFB;
  padding:3px 10px; border-radius:var(--radius-pill); font-weight:600; font-size:12px; border:1px solid rgba(154,95,207,0.4); }
.hero h1{ font-size:clamp(38px,5.6vw,68px); font-weight:800; line-height:1.04; letter-spacing:-0.025em; margin:22px 0 0; color:#fff; }
.hero h1 .grad-text{ display:inline; }
.hero-sub{ font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:var(--fg-3); margin-top:22px; max-width:560px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
.hero-stats{ display:flex; gap:30px; margin-top:40px; flex-wrap:wrap; }
.hero-stat .n{ font-family:var(--font-display); font-weight:800; font-size:30px; color:#fff; letter-spacing:-0.02em; }
.hero-stat .l{ font-size:13px; color:var(--fg-4); margin-top:3px; }
.hero-stat .n em{ font-style:normal; color:var(--violet-300); }

/* =====================================================================
   ORBIT (hero visual)
   ===================================================================== */
.orbit-stage{ position:relative; width:100%; aspect-ratio:1/1; max-width:520px; margin:0 auto; }
.orbit-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--glass-line); }
.orbit-ring.r1{ inset:14%; }
.orbit-ring.r2{ inset:30%; border-color:rgba(255,255,255,0.07); }
.orbit-ring.dashed{ border-style:dashed; border-color:rgba(154,95,207,0.22); }
.orbit-spin{ position:absolute; inset:0; animation:spin 38s linear infinite; }
.orbit-spin.rev{ animation-duration:30s; animation-direction:reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.orbit-core{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34%; aspect-ratio:1; display:grid; place-items:center; }
.orbit-core .halo{ position:absolute; inset:-22%; border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,0.5), transparent 65%); animation:pulse 4.5s ease-in-out infinite; }
.orbit-core img{ width:100%; position:relative; filter:drop-shadow(0 10px 26px rgba(139,92,246,0.6)); }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.75; } 50%{ transform:scale(1.12); opacity:1; } }
.orbit-node{ position:absolute; top:50%; left:50%; }
.orbit-node .chip{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:8px;
  padding:8px 13px 8px 9px; border-radius:var(--radius-pill); background:rgba(14,20,40,0.86);
  border:1px solid var(--glass-line-2); backdrop-filter:blur(8px); box-shadow:0 10px 30px -12px rgba(0,0,0,0.8);
  white-space:nowrap; animation:counterspin 38s linear infinite; }
.orbit-spin.rev .orbit-node .chip{ animation-duration:30s; animation-direction:reverse; }
@keyframes counterspin{ to{ transform:translate(-50%,-50%) rotate(-360deg); } }
.orbit-node .dot{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; }
.orbit-node .dot svg{ width:15px; height:15px; color:#fff; }
.orbit-node .lab{ font-size:13px; font-weight:600; color:var(--fg-1); }
.orbit-line{ position:absolute; top:50%; left:50%; height:1px; transform-origin:left center;
  background:linear-gradient(90deg, rgba(154,95,207,0.05), rgba(154,95,207,0.5)); }
@media (prefers-reduced-motion:reduce){
  .orbit-spin, .orbit-node .chip, .orbit-core .halo{ animation:none !important; }
}

/* =====================================================================
   ECOSYSTEM MAP
   ===================================================================== */
.eco{ }
.eco-stage{ position:relative; margin-top:52px; border-radius:var(--radius-2xl); overflow:hidden;
  background:linear-gradient(150deg, rgba(15,26,46,0.7), rgba(42,26,82,0.45)); border:1px solid var(--glass-line);
  padding:18px; }
.eco-svg{ display:block; width:100%; height:auto; }
.eco-pulse{ stroke-dasharray:5 11; animation:dash 1.6s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-32; } }
@media (prefers-reduced-motion:reduce){ .eco-pulse{ animation:none; } }
.eco-legend{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:22px; }
.eco-legend .item{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-3); }
.eco-legend .sw{ width:10px; height:10px; border-radius:3px; }

/* =====================================================================
   PRODUCT CARDS
   ===================================================================== */
.products-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:22px; margin-top:52px; }
.pcard{ grid-column:span 3; display:flex; flex-direction:column; padding:26px; overflow:hidden;
  transition:transform .35s var(--ease-out-quart), box-shadow .35s, border-color .35s; }
.pcard.wide{ grid-column:span 6; }
.pcard:hover{ transform:translateY(-4px); border-color:var(--glass-line-2);
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.9), 0 0 0 1px var(--ac-soft) inset; }
.pcard .accent-rail{ position:absolute; top:0; left:0; right:0; height:3px; opacity:0; transition:opacity .35s;
  background:linear-gradient(90deg, var(--ac), transparent); }
.pcard:hover .accent-rail{ opacity:1; }
@media (max-width:980px){ .products-grid{ grid-template-columns:1fr; } .pcard, .pcard.wide{ grid-column:span 1; } }

.pcard-head{ display:flex; align-items:center; gap:13px; }
.pcard-ico{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--ac-bg); border:1px solid var(--ac-line); box-shadow:0 8px 20px -10px var(--ac); }
.pcard-ico svg{ width:23px; height:23px; color:var(--ac); }
.pcard-name{ font-family:var(--font-display); font-weight:800; font-size:21px; color:#fff; letter-spacing:-0.01em; }
.pcard-tenant{ font-family:var(--font-mono); font-size:11.5px; color:var(--ac); margin-top:2px; }
.pcard-pos{ font-size:15.5px; line-height:1.55; color:var(--fg-2); margin-top:16px; font-weight:500; }

.pcard-vis{ margin-top:20px; }

.pcard-meta{ margin-top:18px; display:grid; gap:12px; }
.meta-row{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; }
.meta-k{ font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-4); padding-top:2px; white-space:nowrap; }
.meta-v{ font-size:13.5px; line-height:1.5; color:var(--fg-3); }
.wide .pcard-cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:760px){ .wide .pcard-cols{ grid-template-columns:1fr; } }

.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.chip{ font-size:12px; font-weight:500; color:var(--fg-2); padding:5px 11px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.05); border:1px solid var(--glass-line); }
.chip .d{ display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:6px; background:var(--ac); vertical-align:middle; }

.pcard-foot{ margin-top:22px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.link-cta{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; color:#fff;
  padding:11px 17px; border-radius:var(--radius-pill); background:var(--ac-bg); border:1px solid var(--ac-line);
  transition:transform .2s var(--ease-out-quart), background .2s, gap .2s; }
.link-cta:hover{ transform:translateY(-2px); gap:11px; background:var(--ac-bg-2); }
.link-cta svg{ width:15px; height:15px; }
.sec-note{ font-size:12.5px; color:var(--fg-4); }
.sec-note code{ font-family:var(--font-mono); color:var(--ac); font-size:12px; }

/* store buttons */
.store-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.store-btn{ display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:12px;
  background:#0c0f1c; border:1px solid var(--glass-line-2); transition:transform .2s, border-color .2s; }
.store-btn:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,0.3); }
.store-btn.soon{ opacity:0.62; cursor:default; }
.store-btn.soon:hover{ transform:none; border-color:var(--glass-line-2); }
.store-btn.soon .s1{ color:var(--amber-400); }
.store-btn svg{ width:20px; height:20px; color:#fff; }
.store-btn .st{ line-height:1.1; }
.store-btn .st .s1{ display:block; font-size:9px; color:var(--fg-4); letter-spacing:0.04em; }
.store-btn .st .s2{ display:block; font-size:13px; font-weight:600; color:#fff; }
.placeholder-flag{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--amber-400);
  background:rgba(251,191,36,0.1); border:1px dashed rgba(251,191,36,0.4); padding:4px 10px; border-radius:var(--radius-pill); }

/* =====================================================================
   PRODUCT-SPECIFIC VISUALS
   ===================================================================== */
.vis-frame{ border-radius:var(--radius-lg); border:1px solid var(--glass-line); background:rgba(5,7,14,0.55);
  padding:16px; overflow:hidden; position:relative; }

/* HeroNet tenant pill cycler */
.tenant-pill{ display:flex; align-items:center; gap:0; font-family:var(--font-mono); font-size:14px;
  background:#0a0d18; border:1px solid var(--glass-line-2); border-radius:var(--radius-pill); padding:10px 16px; }
.tenant-pill .lock{ width:14px; height:14px; color:var(--success-400); margin-right:9px; flex:0 0 auto; }
.tenant-pill .scheme{ color:var(--fg-4); }
.tenant-pill .tid{ color:var(--cyan-300); font-weight:600; min-width:0; }
.tenant-pill .host{ color:var(--fg-2); }
.tenant-cycle{ position:relative; display:inline-block; }
.tenant-caret{ display:inline-block; width:2px; height:15px; background:var(--cyan-300); margin-left:1px; vertical-align:-2px;
  animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.tenant-sub{ display:flex; gap:7px; margin-top:13px; flex-wrap:wrap; }
.tenant-sub .ws{ flex:1; min-width:78px; height:46px; border-radius:10px; background:rgba(255,255,255,0.035);
  border:1px solid var(--glass-line); display:flex; flex-direction:column; gap:5px; padding:9px; }
.tenant-sub .ws .bar{ height:5px; border-radius:3px; background:rgba(154,95,207,0.5); }
.tenant-sub .ws .bar.s{ width:60%; background:rgba(255,255,255,0.16); }

/* Hero Voice waveform */
.voice-wave{ display:flex; align-items:flex-end; gap:4px; height:48px; }
.voice-wave .b{ flex:1; height:100%; border-radius:3px; transform-origin:bottom; background:linear-gradient(180deg,var(--cyan-300),var(--blue-500)); animation:wave 1.1s ease-in-out infinite; }
@keyframes wave{ 0%,100%{ transform:scaleY(0.28); } 50%{ transform:scaleY(1); } }
.voice-rows{ display:grid; gap:9px; margin-top:14px; }
.voice-bubble{ display:flex; gap:9px; align-items:flex-start; }
.voice-bubble .av{ width:26px; height:26px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--ac-bg); border:1px solid var(--ac-line); }
.voice-bubble .av svg{ width:14px; height:14px; color:var(--ac); }
.voice-bubble .msg{ font-size:12px; line-height:1.45; color:var(--fg-2); background:rgba(255,255,255,0.05);
  border:1px solid var(--glass-line); border-radius:10px; border-top-left-radius:3px; padding:8px 11px; }
.voice-route{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--fg-3); margin-top:4px; }
.voice-route svg{ width:13px; height:13px; color:var(--success-400); }
.voice-route .tag{ font-family:var(--font-mono); color:var(--cyan-300); }

/* Hero MSP dashboard */
.msp-dash{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.msp-tile{ border-radius:11px; background:rgba(255,255,255,0.04); border:1px solid var(--glass-line); padding:11px 12px; }
.msp-tile .t-top{ display:flex; align-items:center; justify-content:space-between; }
.msp-tile .t-ic{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; background:var(--ti-bg); }
.msp-tile .t-ic svg{ width:13px; height:13px; color:var(--ti); }
.msp-tile .t-n{ font-family:var(--font-display); font-weight:800; font-size:21px; color:#fff; margin-top:9px; letter-spacing:-0.02em; }
.msp-tile .t-l{ font-size:11px; color:var(--fg-4); margin-top:1px; }
.msp-tile .t-delta{ font-size:10.5px; font-weight:600; }
.msp-bars{ display:flex; align-items:flex-end; gap:3px; height:24px; margin-top:8px; }
.msp-bars span{ flex:1; border-radius:2px; background:var(--ac); opacity:.55; }

/* MSP Voice — real screenshot + app identity + connection rows */
.mspv{ padding:0; overflow:hidden; }
.mspv-grid{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:stretch; padding:18px 18px 0 18px; }
.mspv-phone{ position:relative; width:138px; height:200px; overflow:hidden; align-self:end; }
.mspv-phone img{ display:block; width:138px;
  filter:drop-shadow(0 20px 36px rgba(0,0,0,0.55)); animation:floaty 6s ease-in-out infinite; }
.mspv-fade{ position:absolute; left:0; right:0; bottom:0; height:54px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(5,7,14,0.95)); }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@media (prefers-reduced-motion:reduce){ .mspv-phone img{ animation:none; } }
.mspv-info{ display:flex; flex-direction:column; justify-content:center; gap:12px; padding:0 0 18px 0; }
.mspv-id{ display:flex; align-items:center; gap:12px; }
.mspv-appicon{ width:48px; height:48px; border-radius:13px; flex:0 0 auto;
  box-shadow:0 8px 22px -8px rgba(37,99,235,0.7); border:1px solid rgba(255,255,255,0.14); }
.mspv-name{ font-family:var(--font-display); font-weight:800; font-size:19px; color:#fff; letter-spacing:-0.01em; }
.mspv-by{ font-size:12px; color:var(--fg-4); margin-top:2px; }
.mspv-conn{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,0.04); border:1px solid var(--glass-line); }
.mspv-conn .pc-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--ac-bg); border:1px solid var(--ac-line); }
.mspv-conn .pc-ic svg{ color:var(--ac); }
.mspv-conn b{ display:block; font-size:13px; font-weight:600; color:#fff; }
.mspv-conn span{ display:block; font-size:11.5px; color:var(--fg-4); margin-top:1px; }
@media (max-width:420px){
  .mspv-grid{ grid-template-columns:1fr; }
  .mspv-phone{ width:100%; height:150px; }
  .mspv-phone img{ width:138px; margin:0 auto; }
  .mspv-info{ padding:0; }
}

/* EscapeOS control room */
.esc-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:10px; }
.esc-rooms{ display:grid; gap:8px; }
.esc-room{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px;
  background:rgba(255,255,255,0.04); border:1px solid var(--glass-line); }
.esc-room .rdot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.esc-room .rn{ font-size:12px; font-weight:600; color:var(--fg-1); flex:1; }
.esc-room .rt{ font-family:var(--font-mono); font-size:13px; font-weight:600; }
.esc-cams{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.esc-cam{ aspect-ratio:4/3; border-radius:9px; position:relative; overflow:hidden; border:1px solid var(--glass-line);
  background:repeating-linear-gradient(135deg,#0e1322,#0e1322 8px,#10162a 8px,#10162a 16px); }
.esc-cam .rec{ position:absolute; top:5px; left:6px; display:flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:8px; color:#fff; }
.esc-cam .rec .rd{ width:5px; height:5px; border-radius:50%; background:var(--rose-500); animation:pulse 1.6s infinite; }
.esc-cam .scan{ position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(103,232,249,0.7),transparent); animation:scan 3s linear infinite; }
@keyframes scan{ 0%{ top:0; } 100%{ top:100%; } }
.esc-time{ margin-top:11px; }
.esc-time .track{ height:6px; border-radius:4px; background:rgba(255,255,255,0.08); position:relative; overflow:hidden; }
.esc-time .fill{ position:absolute; top:0; left:0; bottom:0; border-radius:4px; width:64%;
  background:linear-gradient(90deg,var(--violet-500),var(--cyan-300)); }
.esc-time .stops{ display:flex; justify-content:space-between; margin-top:7px; }
.esc-time .stops span{ font-size:9.5px; color:var(--fg-4); }
.esc-time .stops span.on{ color:var(--cyan-300); font-weight:600; }
@media (prefers-reduced-motion:reduce){ .esc-cam .scan, .voice-wave .b, .esc-cam .rec .rd{ animation:none !important; } }

/* =====================================================================
   PILLARS / OPERATORS
   ===================================================================== */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
@media (max-width:860px){ .pillars{ grid-template-columns:1fr; } }
.pillar{ padding:28px; }
.pillar:hover{ transform:translateY(-4px); transition:transform .35s var(--ease-out-quart); }
.pillar-ic{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--pc-bg); border:1px solid var(--pc-line); }
.pillar-ic svg{ width:25px; height:25px; color:var(--pc); }
.pillar h3{ font-size:20px; font-weight:700; margin-bottom:9px; }
.pillar p{ font-size:14.5px; line-height:1.6; color:var(--fg-3); }

/* =====================================================================
   SUITE / IMMERSIVE feature bands
   ===================================================================== */
.band{ border-radius:var(--radius-2xl); overflow:hidden; position:relative; padding:48px; margin-top:0; }
.band.suite{ background:
  radial-gradient(700px 400px at 90% 0%, rgba(37,99,235,0.28), transparent 60%),
  linear-gradient(150deg, rgba(15,26,46,0.86), rgba(26,31,74,0.7)); border:1px solid var(--glass-line); }
.band.immersive{ background:
  radial-gradient(700px 460px at 8% 100%, rgba(139,92,246,0.32), transparent 60%),
  radial-gradient(500px 300px at 95% 10%, rgba(244,63,94,0.18), transparent 60%),
  linear-gradient(150deg, rgba(20,9,40,0.9), rgba(12,10,30,0.86)); border:1px solid var(--glass-line); }
.band-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
@media (max-width:920px){ .band-grid{ grid-template-columns:1fr; gap:30px; } .band{ padding:34px 26px; } }
.band h2{ font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-0.02em; line-height:1.08; margin-top:14px; }
.band p.lead{ font-size:17px; line-height:1.6; color:var(--fg-2); margin-top:16px; }
.suite-apps{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.suite-app{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:13px;
  background:rgba(255,255,255,0.04); border:1px solid var(--glass-line); transition:transform .25s, border-color .25s; cursor:default; }
.suite-app:hover{ transform:translateY(-3px); border-color:var(--glass-line-2); }
.suite-app .sa-ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--ac-bg); border:1px solid var(--ac-line); }
.suite-app .sa-ic svg{ width:19px; height:19px; color:var(--ac); }
.suite-app .sa-n{ font-weight:700; font-size:14.5px; color:#fff; }
.suite-app .sa-d{ font-size:11.5px; color:var(--fg-4); margin-top:1px; }

.flow-list{ display:grid; gap:10px; }
.flow-item{ display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:12px;
  background:rgba(255,255,255,0.035); border:1px solid var(--glass-line); }
.flow-item .fi-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background:rgba(139,92,246,0.16); border:1px solid rgba(139,92,246,0.32); }
.flow-item .fi-ic svg{ width:17px; height:17px; color:var(--violet-300); }
.flow-item .fi-t{ font-weight:600; font-size:14px; color:#fff; }
.flow-item .fi-d{ font-size:12px; color:var(--fg-4); margin-top:1px; }
.flow-arrow{ display:grid; place-items:center; color:var(--fg-4); }
.flow-arrow svg{ width:16px; height:16px; }

/* =====================================================================
   FINAL CTA
   ===================================================================== */
.finalcta{ border-radius:var(--radius-2xl); position:relative; overflow:hidden; padding:64px 48px; text-align:center;
  background:
    radial-gradient(600px 360px at 50% -10%, rgba(139,92,246,0.4), transparent 60%),
    radial-gradient(500px 300px at 15% 120%, rgba(34,211,238,0.18), transparent 60%),
    linear-gradient(160deg, rgba(15,26,46,0.9), rgba(42,26,82,0.7)); border:1px solid var(--glass-line-2); }
@media (max-width:760px){ .finalcta{ padding:44px 24px; } }
.finalcta h2{ font-size:clamp(28px,4.4vw,50px); font-weight:800; letter-spacing:-0.025em; line-height:1.05; color:#fff; max-width:760px; margin:18px auto 0; }
.finalcta p{ font-size:18px; color:var(--fg-3); margin:18px auto 0; max-width:560px; }
.finalcta-btns{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:34px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{ border-top:1px solid var(--glass-line); margin-top:96px; padding:56px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer .brand{ margin-bottom:16px; }
.footer-about{ font-size:14px; line-height:1.6; color:var(--fg-3); max-width:300px; }
.footer-loc{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--fg-3); margin-top:14px; }
.footer-loc svg{ width:15px; height:15px; color:var(--rose-500); }
.footer-col h4{ font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-4); margin-bottom:14px; }
.footer-col a{ display:block; font-size:14px; color:var(--fg-3); padding:6px 0; transition:color .18s, padding-left .18s; }
.footer-col a:hover{ color:#fff; padding-left:4px; }
.footer-col a .ext{ font-family:var(--font-mono); font-size:11px; color:var(--fg-4); display:block; margin-top:1px; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:44px; padding-top:24px; border-top:1px solid var(--glass-line); font-size:13px; color:var(--fg-4); }
.footer-bottom .made{ display:inline-flex; align-items:center; gap:7px; }
.footer-bottom .leaf{ color:var(--rose-500); }

/* generic */
.mono{ font-family:var(--font-mono); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }