/* =====================================================================
   LoopLlama — shared styles (v9)
   Telvoip-style: Poppins, vibrant purple + orange CTA,
   white text surfaces on a softly textured page
   ===================================================================== */

/* ---------- Fonts (Poppins, SIL OFL — see assets/fonts/Poppins-LICENSE.txt) ---------- */
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Radius + spacing scale (Telvoip) */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px;
  --radius-full: 9999px; --radius-pill: 9999px; --radius-circle: 50%;
  --telvoip-control-radius: var(--radius-full);
  --telvoip-surface-radius: var(--radius-md);
  --space-2xs: 4px;  --space-xs: 8px;   --space-s: 12px;   --space-m: 16px;   --space-l: 24px;
  --space-xl: 32px;  --space-2xl: 48px; --space-3xl: 56px; --space-4xl: 64px;
  --telvoip-content-max-width: 1360px;
  --content-max: var(--telvoip-content-max-width);
  --container: 1200px;

  /* Brand primitives (Telvoip) */
  --telvoip-primary-legacy: #7a59c4;         --telvoip-primary-legacy-light: #9478d1;
  --telvoip-primary-legacy-lighter: #b4a0df; --telvoip-primary-legacy-dark: #6543ad;
  --telvoip-primary-legacy-muted: rgba(122,89,196,0.14); --telvoip-primary-legacy-rgb: 122,89,196;
  --telvoip-primary-vibrant: #a300e3;        --telvoip-primary-vibrant-light: #b533e9;
  --telvoip-primary-vibrant-lighter: #c842ee; --telvoip-primary-vibrant-dark: #8b00c1;
  --telvoip-primary-vibrant-muted: rgba(163,0,227,0.14); --telvoip-primary-vibrant-rgb: 163,0,227;
  --telvoip-active-primary: var(--telvoip-primary-vibrant);
  --telvoip-active-primary-light: var(--telvoip-primary-vibrant-light);
  --telvoip-active-primary-lighter: var(--telvoip-primary-vibrant-lighter);
  --telvoip-active-primary-dark: var(--telvoip-primary-vibrant-dark);
  --telvoip-active-primary-muted: var(--telvoip-primary-vibrant-muted);
  --telvoip-active-primary-rgb: var(--telvoip-primary-vibrant-rgb);
  --telvoip-brand-primary: var(--telvoip-active-primary, #7a59c4);
  --telvoip-brand-primary-light: var(--telvoip-active-primary-light, #9478d1);
  --telvoip-brand-primary-lighter: var(--telvoip-active-primary-lighter, #b4a0df);

  /* Text (Telvoip; dark-theme values added) */
  --telvoip-text-primary:   light-dark(#1a1a2e, #f4f1fa);
  --telvoip-text-secondary: light-dark(#374151, #dcd6e6);
  --telvoip-text-muted:     light-dark(#5c6670, #aaa3b9);
  --telvoip-text-inverse: #ffffff;
  --telvoip-text-on-primary: #ffffff;
  --telvoip-text-on-dark-muted: rgba(255,255,255,0.72);
  --telvoip-text-on-dark: rgba(255,255,255,0.88);
  --telvoip-text-on-dark-strong: rgba(255,255,255,0.92);
  --telvoip-text-link: light-dark(#6543ad, #d99af5);

  /* Semantic roles used by the components */
  --paper:   light-dark(#ffffff, #0f0b16);
  --paper-2: light-dark(#f8f6fc, #160f20);
  --surface: light-dark(#ffffff, #1a1326);
  --ink:     var(--telvoip-text-primary);
  --text:    var(--telvoip-text-secondary);
  --muted:   var(--telvoip-text-muted);
  --line:    light-dark(#ece8f3, #2b2238);
  --line-2:  light-dark(#ddd6ea, #3a2f4a);

  --primary:         var(--telvoip-primary-vibrant);
  --primary-light:   var(--telvoip-primary-vibrant-light);
  --primary-lighter: var(--telvoip-primary-vibrant-lighter);
  --primary-dark:    var(--telvoip-primary-vibrant-dark);
  --primary-text:    light-dark(#8b00c1, #d99af5);
  --primary-muted:   light-dark(rgb(163 0 227 / .08), rgb(163 0 227 / .18));
  --cta:             #cc4400;                 /* orange buttons, 4.8:1 with white */
  --cta-hover:       #b33c00;
  --band:            linear-gradient(135deg, #4a0a7a 0%, #7a00b8 45%, #a300e3 100%);
  --success:         light-dark(#15803d, #4ade80);

  /* Big numbers: purple on light surfaces, white on dark ones (matches the purple sections) */
  --num-strong: light-dark(#8b00c1, #ffffff);
  --num-soft:   light-dark(rgb(200 66 238 / .7), #ffffff);

  /* Gold accent for highlighted words. Light-theme stops stay ≥ 3:1 on white (large text only). */
  --gold:        light-dark(#a97c00, #ffcf5c);
  --gold-line:   light-dark(#f2b705, #ffcf5c);
  --gold-glow:   light-dark(rgb(242 183 5 / .45), rgb(255 207 92 / .35));
  --gold-text:   linear-gradient(100deg, light-dark(#a97c00, #ffd77a) 0%, light-dark(#bf8a00, #fff3d1) 25%, light-dark(#9c6f00, #ffc94a) 50%, light-dark(#bf8a00, #fff3d1) 75%, light-dark(#a97c00, #ffd77a) 100%);
  --gold-on-dark: linear-gradient(100deg, #ffffff 0%, #ffe3a1 25%, #ffc94a 50%, #ffe3a1 75%, #ffffff 100%);

  --on-dark:         var(--telvoip-text-on-dark);
  --on-dark-muted:   rgb(255 255 255 / .74);

  /* Paper texture: fine grain + dot grid + soft brand glow. Text sits on solid white surfaces above it. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .04 0 0 0 0 .48 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --dots: radial-gradient(light-dark(rgb(122 89 196 / .16), rgb(255 255 255 / .06)) 1px, transparent 1.4px);
  --dots-size: 24px 24px;

  /* Legacy names used in page markup → mapped into this palette */
  --accent: var(--primary); --accent-text: var(--primary-text); --accent-soft: var(--primary-muted);
  --lime: var(--primary-muted); --pink: var(--primary-muted); --cyan: var(--primary-muted);
  --yellow: var(--primary-muted); --orange: var(--primary-muted); --purple: var(--primary); --on-neon: var(--ink);

  --font: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: var(--font);

  --fs-hero: clamp(2.125rem, 1.4rem + 3vw, 3.75rem);
  --fs-h1:   clamp(1.875rem, 1.35rem + 2.4vw, 3.25rem);
  --fs-h2:   clamp(1.625rem, 1.3rem + 1.3vw, 2.375rem);

  --r: var(--radius-md);
  --r-lg: var(--radius-lg);
  --shadow-sm: 0 1px 2px light-dark(#1a1a2e0d, #00000066);
  --shadow:    0 2px 6px light-dark(#1a1a2e0a, #00000066), 0 12px 32px light-dark(#4a0a7a14, #00000080);
  --shadow-lg: 0 4px 12px light-dark(#1a1a2e0f, #00000066), 0 30px 70px light-dark(#4a0a7a2e, #000000a0);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  box-sizing: inherit; margin: 0; padding: 0; font-family: var(--font); font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--text);
  background-color: var(--paper);
  background-image: var(--grain), var(--dots), radial-gradient(1200px 700px at 100% 0%, light-dark(rgb(163 0 227 / .05), transparent), transparent 70%);
  background-size: 220px 220px, var(--dots-size), auto;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; text-shadow: rgba(0, 0, 0, .004) 1px 1px 1px; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--primary); color: #fff; }
:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 3px; border-radius: 6px; }
section[id] { scroll-margin-top: 84px; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 300; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--primary); color: #fff; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 16px; }
.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.icon { width: 18px; height: 18px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typography helpers ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-text); }
.marker, .gradient-text { font-style: normal; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 var(--space-l); border: 1px solid transparent; border-radius: var(--radius-full);
  font: 600 1rem/1 var(--font); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: var(--cta); color: #fff; box-shadow: 0 8px 22px #cc44003d; }
.btn-primary:hover { background: var(--cta-hover); box-shadow: 0 12px 28px #cc440052; }
.btn-dark { background: #1a1a2e; color: #fff; }
.btn-dark:hover { background: #2c2c48; }
.btn-paper { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-paper:hover { border-color: var(--primary); color: var(--primary-text); }
.btn-light { background: #fff; color: #4a0a7a; }
.btn-light:hover { background: #f6ebfc; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: .875rem; }
.btn-block { width: 100%; }
.btn .icon { width: 16px; height: 16px; }

/* ---------- Ticker ---------- */
.ticker { background: #2a0a45; color: var(--on-dark-muted); overflow: hidden; font-size: 13px; }
.ticker a { text-decoration: none; }
.ticker-track { display: flex; width: max-content; gap: 48px; padding: 8px 0; animation: tick 40s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-track span { display: inline-flex; align-items: center; gap: 48px; white-space: nowrap; }
.ticker-track span::after { content: "✦"; color: var(--primary-lighter); font-size: 10px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- Header + nav ---------- */
.header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.nav { width: min(100% - 32px, var(--content-max)); display: flex; align-items: center; gap: var(--space-l); height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; flex: none; }
.brand img { width: 32px; height: 32px; transition: transform .5s var(--ease); }
.brand:hover img { transform: rotate(-8deg); }
.nav-links { display: flex; gap: 2px; }
.nav-item { position: relative; }
.nav-top {
  display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 0 12px; border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--text); font: 500 .875rem var(--font); text-decoration: none; cursor: pointer; transition: color .2s, background-color .2s;
}
.nav-top:hover, .nav-item.open > .nav-top { color: var(--primary-text); background: var(--primary-muted); }
.nav-top[aria-current="page"] { color: var(--primary-text); }
.nav-top .chev { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav-item.open > .nav-top .chev { transform: rotate(180deg); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-m); }
.nav-wa { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: .875rem; font-weight: 500; text-decoration: none; }
.nav-wa svg { color: #16a34a; }
.nav-wa:hover { color: var(--primary-text); }
.menu-btn { display: none; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: var(--radius-full); background: var(--surface); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.menu-btn span { width: 16px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.dd {
  position: absolute; top: calc(100% + 14px); left: -12px; z-index: 120; min-width: 300px; padding: var(--space-s);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.dd::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-item.open > .dd { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s; }
.dd-wide { display: grid; grid-template-columns: 1fr 1fr 210px; gap: 6px; width: 780px; }
.dd-mid  { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 620px; }
.dd-col { display: flex; flex-direction: column; gap: 2px; }
.dd-head { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dd-link { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; transition: background-color .2s; }
.dd-link:hover, .dd-link:focus-visible { background: var(--paper-2); }
.dd-ico { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--primary-muted) !important; color: var(--primary-text); font-size: 16px; transition: background-color .2s, color .2s; }
.dd-ico svg { width: 17px; height: 17px; }
.dd-link:hover .dd-ico { background: var(--primary) !important; color: #fff; }
.dd-link b { display: block; font-size: .875rem; font-weight: 600; color: var(--ink); }
.dd-link small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.dd-feature { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 18px; border-radius: var(--radius-md); color: #fff; text-decoration: none; min-height: 200px; background: var(--band); }
.dd-feature img { position: absolute; right: -14px; top: -8px; width: 100px; opacity: .3; transition: transform .5s var(--ease); }
.dd-feature:hover img { transform: rotate(6deg); }
.dd-feature small { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.dd-feature b { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.dd-feature span { font-size: 12.5px; color: var(--on-dark-muted); }
.dd-feature em { margin-top: 6px; font-style: normal; font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.dd-feature em svg { width: 14px; height: 14px; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(var(--space-3xl), 8vw, 96px); }
.head { max-width: 42rem; margin: 0 auto clamp(var(--space-xl), 4vw, var(--space-2xl)); text-align: center; display: flex; flex-direction: column; align-items: center; }
.head h2 { margin-top: var(--space-s); font-size: var(--fs-h2); }
.head p { margin-top: var(--space-m); color: var(--muted); font-size: 1.125rem; line-height: 1.55; max-width: 36rem; }

/* ---------- Hero (purple band) ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate; color: var(--on-dark);
  padding: clamp(var(--space-3xl), 7vw, 88px) 0 clamp(var(--space-3xl), 7vw, 88px);
  background: var(--band); border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 360px at 80% 0%, rgb(200 66 238 / .45), transparent 70%), radial-gradient(600px 300px at 0% 100%, rgb(74 10 122 / .6), transparent 70%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgb(255 255 255 / .12) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%); }
.hero h1, .hero h2 { color: #fff; }
.hero .eyebrow { color: var(--on-dark-muted); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(var(--space-xl), 5vw, var(--space-4xl)); align-items: center; }
.hero h1 { font-size: var(--fs-hero); line-height: 1.125; transform-origin: center; will-change: transform; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.08em; }
.hero h1 .line > span { display: inline-block; transform: translateY(105%); animation: rise .9s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { transform: none; } }
.hero-sub { margin-top: var(--space-l); max-width: 36rem; font-size: 1.125rem; line-height: 1.55; color: var(--on-dark-muted); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-xl); }
.hero .btn-paper { background: transparent; color: #fff; border-color: rgb(255 255 255 / .45); }
.hero .btn-paper:hover { border-color: #fff; color: #fff; background: rgb(255 255 255 / .08); }
.hero-meta { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--on-dark-muted); }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgb(255 255 255 / .16); color: #fff; font-size: 10px; font-weight: 700; }
.hero-note { margin-top: var(--space-m); font-size: 14px; color: var(--on-dark-muted); }
.hero-note a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.fade-in { opacity: 0; animation: fadeIn .9s var(--ease) forwards; animation-delay: var(--d, .4s); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sparkle, .blob { display: none; }

/* Homepage: centred hero + dashboard overlapping the band */
.hero-home { padding-bottom: clamp(180px, 20vw, 260px); }
.hero-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-center h1 { max-width: 20ch; }
.hero-center .hero-sub { margin-inline: auto; }
.hero-center .hero-ctas, .hero-center .hero-meta { justify-content: center; }
.hero-device { position: relative; z-index: 2; margin-top: calc(-1 * clamp(150px, 17vw, 220px)); }
.hero-device .stage { max-width: 820px; margin-inline: auto; }
.tagline { margin-top: clamp(var(--space-xl), 5vw, var(--space-3xl)); text-align: center; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); letter-spacing: -0.02em; }

/* Rotating text badge */
.badge-spin { position: absolute; width: 112px; height: 112px; display: grid; place-items: center; z-index: 3; }
.badge-spin svg { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.badge-spin text { font: 600 9.5px var(--font); letter-spacing: .1em; fill: var(--primary-text); }
.badge-spin .disc { position: absolute; inset: 0; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-lg); }
.badge-spin .core { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--cta); display: grid; place-items: center; font: 700 14px var(--font); color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 3D tilt */
.stage { position: relative; perspective: 1200px; }
.tilt { transform-style: preserve-3d; transition: transform .3s var(--ease); will-change: transform; }

/* Activity mockup */
.device { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.device-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.device-bar b { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.duty { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: var(--radius-full); background: #16a34a1f; color: light-dark(#15803d, #4ade80); font-size: 12px; font-weight: 600; }
.duty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.feed { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-m); min-height: 316px; }
.event { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--space-s); align-items: center; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); animation: pop .5s var(--ease); }
.event.leaving { animation: out .35s var(--ease) forwards; }
@keyframes pop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes out { to { opacity: 0; transform: translateY(8px); } }
.event .ei { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: var(--primary-muted) !important; }
.event b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.event small { font-size: 12px; color: var(--muted); }
.event time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.typing { display: inline-flex; gap: 4px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--paper-2); align-self: flex-start; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: bounce 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Stats row */
.chips-row { display: grid; grid-template-columns: repeat(4, 1fr); width: min(100% - 32px, var(--container)); margin: clamp(var(--space-2xl), 6vw, var(--space-4xl)) auto 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.chip-stat { padding: var(--space-l) var(--space-m); text-align: center; background: var(--surface); }
.chip-stat + .chip-stat { border-left: 1px solid var(--line); }
.chip-stat strong { display: block; font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; color: var(--num-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
.chip-stat > span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

/* ---------- Kinetic statement ---------- */
.statement { padding-block: clamp(var(--space-2xl), 7vw, 96px); }
.statement .container { padding: clamp(40px, 7vw, 88px) clamp(20px, 5vw, var(--space-4xl)); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); }
.statement p { font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.2; letter-spacing: -0.03em; max-width: 26ch; margin-inline: auto; text-align: center; color: var(--ink); }
.statement .w { opacity: .5; transition: opacity .3s linear; } /* .5 keeps unlit words at 3:1+ contrast (large text) */
.statement .w.on { opacity: 1; }
.statement .w.em { font-style: normal; }

/* ---------- Marquees ---------- */
.marquee { overflow: hidden; padding-block: var(--space-m); }
.marquee.alt { padding-block: var(--space-xs); }
.marquee-track { display: flex; width: max-content; gap: var(--space-s); will-change: transform; }
.mq { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface) !important; color: var(--ink); font-size: .9375rem; font-weight: 500; white-space: nowrap; text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color .2s, color .2s; }
.mq span { font-size: 1.15em; }
a.mq:hover { border-color: var(--primary); color: var(--primary-text); }
.marquee.alt { background: var(--band); padding-block: 22px; }
.mq-text { font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); letter-spacing: -0.03em; color: #fff; white-space: nowrap; display: inline-flex; gap: 32px; align-items: center; }
.mq-text i { font-style: normal; color: #f0c6ff; font-size: .6em; }
.trust-title { text-align: center; font-weight: 600; font-size: 1.0625rem; color: var(--primary-text); margin-bottom: var(--space-m); }

/* ---------- Purple texture + animation layer ---------- */
.fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit; }
.fx-aurora { position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; will-change: transform; }
.fx-aurora.a1 { background: #c842ee; top: -30%; left: -10%; animation: drift1 18s ease-in-out infinite alternate; }
.fx-aurora.a2 { background: #6d5dfc; bottom: -35%; right: -10%; opacity: .5; animation: drift2 22s ease-in-out infinite alternate; }
.fx-aurora.a3 { background: #ff6ad5; top: 20%; left: 45%; width: 30%; opacity: .3; animation: drift3 16s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(25%, 20%) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-30%, -15%) scale(1.1); } }
@keyframes drift3 { to { transform: translate(-60%, 30%) scale(1.3); } }
.fx-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
.hero .fx-net { mask-image: radial-gradient(ellipse 42% 38% at 50% 38%, transparent 35%, #000 80%); -webkit-mask-image: radial-gradient(ellipse 42% 38% at 50% 38%, transparent 35%, #000 80%); }
.ind-hero .fx-net { mask-image: linear-gradient(90deg, transparent 10%, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 60%); }
.auto-feature .fx-net, .auto-purple .fx-net, .cta .fx-net, .band .fx-net { opacity: .5; }
.fx-links path { fill: none; stroke: rgb(255 255 255 / .1); stroke-width: 1.2; }
.fx-pulse { fill: none; stroke: rgb(255 255 255 / .85); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 1200; stroke-dashoffset: 1210; animation: pulse-run linear infinite; filter: drop-shadow(0 0 4px #f0c6ff); }
@keyframes pulse-run { to { stroke-dashoffset: 0; } }
.fx-nodes circle { fill: rgb(255 255 255 / .55); transform-box: fill-box; transform-origin: center; animation: node 4s ease-in-out infinite; }
@keyframes node { 50% { transform: scale(1.8); fill: rgb(255 255 255 / .9); } }
.fx-spot { position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 20%), rgb(255 255 255 / .12), transparent 60%); transition: background-position .2s; }
.fx-noise { position: absolute; inset: -50%; opacity: .22; mix-blend-mode: overlay; animation: grain 1.2s steps(6) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-5%, 3%); } 40% { transform: translate(4%, -4%); } 60% { transform: translate(-3%, -6%); } 80% { transform: translate(6%, 4%); } 100% { transform: translate(-2%, 2%); } }
.auto-feature, .auto-purple { overflow: hidden; isolation: isolate; }
.cta::before, .band::before { z-index: -2; }

/* ---------- Five automations ---------- */
.autos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-m); }
.auto { position: relative; padding: var(--space-xl) var(--space-l); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; scroll-margin-top: 90px; }
.auto:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.auto h3 { font-size: 1.5rem; line-height: 1.25; }
.auto p { margin-top: var(--space-xs); color: var(--muted); }
.auto .auto-hook { margin-top: 4px; color: var(--primary-text); font-weight: 600; }
.auto-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--primary-muted); color: var(--primary-text); margin-bottom: var(--space-m); transition: transform .3s var(--ease), background-color .3s, color .3s; }
.auto-ico svg { width: 22px; height: 22px; }
.auto:hover .auto-ico, .auto-mini:hover .auto-ico { background: var(--primary); color: #fff; transform: rotate(-6deg); }
.auto-num { position: absolute; top: var(--space-l); right: var(--space-l); margin: 0 !important; font-weight: 600; font-size: 2.5rem; line-height: 1; letter-spacing: -0.04em; color: light-dark(var(--primary-muted), rgb(255 255 255 / .1)) !important; -webkit-text-stroke: 1px light-dark(#c842ee80, rgb(255 255 255 / .55)); }
.best-label { margin-top: var(--space-m) !important; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.best { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.best li { padding: 3px 11px; border-radius: var(--radius-full); background: var(--paper-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--text); }
.auto-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-2xl); align-items: center; padding: clamp(var(--space-l), 4vw, var(--space-2xl)); background: var(--band); border-color: transparent; color: var(--on-dark); }
.auto-feature h3 { color: #fff; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
.auto-purple { background: var(--band); border-color: transparent; color: var(--on-dark); }
.auto-purple h3 { color: #fff; }
.auto-feature p, .auto-purple p { color: var(--on-dark-muted); }
.auto-feature .auto-hook, .auto-purple .auto-hook { color: #f0c6ff; }
.auto-feature .best-label, .auto-purple .best-label { color: var(--on-dark-muted); }
.auto-feature .best li, .auto-purple .best li { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .2); color: #fff; }
.auto-feature .auto-num, .auto-purple .auto-num { color: rgb(255 255 255 / .1) !important; -webkit-text-stroke: 1px rgb(255 255 255 / .5); }
.auto-purple .fx-net { opacity: .32; }
.auto-purple .auto-ico { background: rgb(255 255 255 / .14); color: #fff; }
.auto-purple:hover .auto-ico { background: #fff; color: var(--primary-dark); }
.auto-purple:hover { box-shadow: var(--shadow-lg); }
.auto-feature .auto-num { display: none; }
.auto-flag { display: inline-block; margin-bottom: var(--space-m); padding: 4px 12px; border-radius: var(--radius-full); background: var(--cta); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.sms { padding: var(--space-m); border-radius: var(--radius-lg); background: #fff; color: #1e1e1e; box-shadow: 0 30px 70px rgb(26 10 46 / .35); display: flex; flex-direction: column; gap: 8px; }
.sms-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #ece8f3; color: #666 !important; font-size: 13px; margin: 0 !important; }
.sms-head svg { width: 16px; height: 16px; }
.bub { max-width: 85%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.4; margin: 0 !important; }
.bub.out { align-self: flex-end; background: #a300e3; color: #fff !important; border-bottom-right-radius: 4px; }
.bub.in { align-self: flex-start; background: #f1eef6; color: #1e1e1e !important; border-bottom-left-radius: 4px; }
.sms-done { align-self: center; margin-top: 4px !important; padding: 4px 12px; border-radius: var(--radius-full); background: #16a34a1a; color: #15803d !important; font-size: 12.5px; font-weight: 600; }
.js .auto-feature.in .bub { animation: bubIn .5s var(--ease) both; }
.js .auto-feature.in .bub:nth-of-type(2) { animation-delay: .3s; } .js .auto-feature.in .bub:nth-of-type(3) { animation-delay: .9s; }
.js .auto-feature.in .bub:nth-of-type(4) { animation-delay: 1.5s; } .js .auto-feature.in .bub:nth-of-type(5) { animation-delay: 2.1s; }
.js .auto-feature.in .sms-done { animation: bubIn .5s 2.7s var(--ease) both; }
@keyframes bubIn { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.stack { margin-top: var(--space-xl); display: grid; grid-template-columns: 1fr auto; gap: var(--space-l) var(--space-xl); align-items: center; padding: var(--space-xl); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.stack h3 { font-size: 1.25rem; }
.stack > div p { margin-top: 4px; color: var(--muted); }
.stack ol { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: none; }
.stack ol li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--line); font-size: .9375rem; color: var(--ink); }
.stack ol li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; }
.stack ol li:not(:last-child)::after { content: "→"; margin-left: 6px; color: var(--muted); }
.stack .btn { grid-column: 2; grid-row: 1; }
.auto-mini h3 { font-size: 1.25rem; }

/* ---------- 3D cube ---------- */
.cube-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-xl), 6vw, 80px); align-items: center; }
.cube-stage { --size: min(230px, 56vw); height: calc(var(--size) * 1.65); display: grid; place-items: center; perspective: 1000px; touch-action: none; cursor: grab; user-select: none; }
.cube-stage:active { cursor: grabbing; }
.cube { position: relative; width: var(--size); height: var(--size); transform-style: preserve-3d; will-change: transform; }
.face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 18px;
  border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); backface-visibility: hidden;
  font-weight: 600; font-size: 1.125rem;
}
.face svg { width: 34px; height: 34px; color: var(--primary-text); }
.face small { font-weight: 400; font-size: 12.5px; color: var(--muted); max-width: 16ch; line-height: 1.45; }
.f1, .f3, .f5 { background: var(--band); color: #fff; border-color: transparent; }
.f1 svg, .f3 svg, .f5 svg { color: #fff; }
.f1 small, .f3 small, .f5 small { color: var(--on-dark-muted); }
.f1 { transform: translateZ(calc(var(--size) / 2)); }
.f2 { transform: rotateY(90deg)  translateZ(calc(var(--size) / 2)); }
.f3 { transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
.f4 { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
.f5 { transform: rotateX(90deg)  translateZ(calc(var(--size) / 2)); }
.f6 { transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); }
.cube-hint { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }
.cube-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-l); }
.cube-controls button { min-height: 38px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--radius-full); background: var(--surface); color: var(--text); font: 500 .8125rem var(--font); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.cube-controls button:hover { border-color: var(--primary); color: var(--primary-text); }
.cube-controls button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Cards ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-m); }
.tile {
  position: relative; grid-column: span 3; padding: var(--space-xl) var(--space-l); border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.tile.span-2 { grid-column: span 2; } .tile.span-4 { grid-column: span 4; } .tile.span-6 { grid-column: span 6; }
.tile.neon { background: var(--surface); }
.tile h3 { font-size: 1.25rem; line-height: 1.4; }
.tile p { margin-top: var(--space-xs); color: var(--muted); font-size: 1rem; }
.tile .big-emoji { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--primary-muted); font-size: 22px; margin-bottom: var(--space-m); transition: transform .3s var(--ease); }
.tile:hover .big-emoji { transform: scale(1.08); }
.tile .num { font-weight: 300; font-size: 3rem; line-height: 1; color: var(--num-soft); margin: 0 0 var(--space-s); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-m); }
.tags li { padding: 3px 11px; border-radius: var(--radius-full); background: var(--primary-muted); color: var(--primary-text); font-size: 12px; font-weight: 500; }
.tile .eyebrow { margin: 0; background: none !important; color: var(--primary-text) !important; }

/* ---------- Purple band (automation) ---------- */
.band { background: var(--band); color: var(--on-dark); position: relative; isolation: isolate; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 320px at 85% 0%, rgb(200 66 238 / .4), transparent 70%); }
.band h2, .band h3, .band h4 { color: #fff; }
.band .eyebrow { color: var(--on-dark-muted); }
.band .head p { color: var(--on-dark-muted); }
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
.process li { padding: var(--space-l); border: 1px solid rgb(255 255 255 / .16); border-radius: var(--radius-md); background: rgb(255 255 255 / .08); transition: background-color .3s, transform .3s var(--ease); }
.process li:hover { background: rgb(255 255 255 / .13); transform: translateY(-4px); }
.process .pn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: #fff; color: var(--primary-dark); font-weight: 700; margin-bottom: var(--space-m); }
.process small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.process h3 { margin-top: 4px; font-size: 1.25rem; line-height: 1.4; }
.process p { margin-top: var(--space-xs); color: var(--on-dark-muted); font-size: .9375rem; }

.levels { margin-top: clamp(var(--space-2xl), 6vw, 72px); }
.levels > h3 { text-align: center; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.levels > p { text-align: center; margin: 10px auto 0; max-width: 34rem; color: var(--on-dark-muted); }
.tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: var(--space-l) auto 0; padding: 4px; width: fit-content; max-width: 100%; border-radius: var(--radius-full); background: rgb(255 255 255 / .1); }
.tab { min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--on-dark); font: 500 .875rem var(--font); cursor: pointer; transition: background-color .2s, color .2s; }
.tab:hover { background: rgb(255 255 255 / .1); }
.tab[aria-selected="true"] { background: #fff; color: var(--primary-dark); }
.panel { margin-top: var(--space-l); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; padding: clamp(var(--space-l), 3.5vw, 40px); border-radius: var(--radius-lg); background: #fff; color: #374151; box-shadow: 0 30px 70px rgb(26 10 46 / .3); }
.panel[hidden] { display: none; }
.panel.show { animation: fadeIn .45s var(--ease); }
.panel h4 { color: #1a1a2e; margin-top: 8px; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.panel .lvl { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8b00c1; }
.panel p { margin-top: 8px; color: #5c6670; }
.panel .eg { margin-top: var(--space-m); padding: 14px 16px; border-radius: var(--radius-sm); background: #f6ebfc; color: #1a1a2e; }
.panel .eg b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8b00c1; }
.flow { display: flex; flex-direction: column; }
.node { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #ece8f3; border-radius: var(--radius-sm); background: #fff; font-size: .875rem; font-weight: 500; color: #1a1a2e; box-shadow: 0 2px 8px #1a1a2e0d; }
.node span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: #f6ebfc !important; flex: none; }
.link { position: relative; height: 24px; margin-left: 31px; width: 2px; background: #ece8f3; overflow: hidden; }
.link::after { content: ""; position: absolute; left: 0; width: 2px; height: 10px; background: #a300e3; animation: down 1.3s linear infinite; }
@keyframes down { from { top: -10px; } to { top: 24px; } }
.brief { margin-top: var(--space-l); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); padding: var(--space-l) var(--space-xl); border-radius: var(--radius-md); background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); }
.brief h3 { font-size: 1.125rem; }
.brief ol { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; color: var(--on-dark-muted); font-size: .9375rem; }
.brief li { display: flex; align-items: center; gap: 8px; }
.brief li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--primary-dark); font-weight: 700; font-size: 12px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
.step { padding: var(--space-l); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step .big { display: block; font-weight: 300; font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem); line-height: 1; color: var(--num-soft); letter-spacing: -0.04em; }
.step h3 { margin-top: var(--space-s); font-size: 1.25rem; line-height: 1.4; }
.step p { margin-top: 6px; color: var(--muted); font-size: .9375rem; }
.risk { margin-top: var(--space-xl); display: flex; gap: 14px; align-items: center; padding: var(--space-m) var(--space-l); border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); color: var(--ink); font-size: .9375rem; }
.risk span { font-size: 22px; }

/* ---------- Integrations orbit ---------- */
.orbit-section { position: relative; overflow: hidden; isolation: isolate; }
.orbit-section::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 58%; width: min(960px, 130vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, light-dark(rgb(163 0 227 / .12), rgb(163 0 227 / .22)) 0%, transparent 62%);
}
.orbit-box { position: relative; width: min(100% - 24px, 600px); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.orbit-ring { position: absolute; z-index: 1; inset: 6%; border-radius: 50%; border: 1.5px dashed light-dark(#dcb5f3, #5a2f78); animation: spin 40s linear infinite; }
.orbit-ring.inner { inset: 25%; animation-duration: 28s; animation-direction: reverse; }
.orbit-halo { position: absolute; inset: 15%; border-radius: 50%; border: 1px solid light-dark(#f0dcfb, #2f1d42); }
.orbit-core {
  position: absolute; inset: 35%; border-radius: 50%; display: grid; place-items: center; background: var(--band);
  box-shadow: 0 0 0 14px light-dark(#f4e3fd, #2a1438), 0 0 0 30px light-dark(#faf1fe, #1d1029), 0 24px 70px rgb(163 0 227 / .4);
  animation: breathe 4s ease-in-out infinite;
}
.orbit-core img { width: 66%; filter: drop-shadow(0 6px 14px #0000004d); }
@keyframes breathe { 50% { box-shadow: 0 0 0 22px light-dark(#f4e3fd, #2a1438), 0 0 0 44px light-dark(#faf1fe00, #1d102900), 0 24px 70px rgb(163 0 227 / .4); } }
.sat { position: absolute; top: 50%; left: 50%; --sz: max(13cqw, 50px); width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2); transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))); }
.sat > div {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-content: center; text-align: center; padding: 4px;
  background: var(--surface); color: var(--ink); box-shadow: 0 2px 6px #1a1a2e0f, 0 12px 30px light-dark(rgb(74 10 122 / .16), #00000080);
  font-size: clamp(8.5px, 1.7cqw, 12px); font-weight: 600; line-height: 1.15; animation: spin 40s linear infinite reverse;
}
.orbit-ring.inner .sat > div { animation-duration: 28s; animation-direction: normal; }
.sat span { display: block; font-size: clamp(17px, 4cqw, 26px); margin-bottom: 2px; }
.orbit-foot { margin-top: clamp(var(--space-l), 3vw, 40px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.orbit-foot p { max-width: 34rem; color: var(--muted); }

/* ---------- Pricing ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--space-xl) var(--space-l); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); transition: transform .3s var(--ease), box-shadow .3s; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan h3 { font-size: 1.25rem; }
.plan .desc { margin-top: 2px; color: var(--muted); font-size: .875rem; }
.plan .price { margin: var(--space-l) 0; font-size: 2.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan .price small { font-size: .875rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.feat { display: grid; gap: 10px; margin-top: var(--space-l); padding-top: var(--space-l); border-top: 1px solid var(--line); font-size: .875rem; }
.feat li { display: flex; gap: 10px; align-items: flex-start; }
.feat li::before { content: "✓"; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-muted); color: var(--primary-text); font-size: 10px; font-weight: 700; }
.plan-pop { background: var(--band); color: var(--on-dark); border-color: transparent; box-shadow: var(--shadow-lg); }
.plan-pop h3, .plan-pop .price { color: #fff; }
.plan-pop .desc, .plan-pop .price small { color: var(--on-dark-muted); }
.plan-pop .feat { border-color: rgb(255 255 255 / .2); }
.plan-pop .feat li::before { background: rgb(255 255 255 / .18); color: #fff; }
.plan-pop .btn-light { background: var(--cta); color: #fff; }
.plan-pop .btn-light:hover { background: var(--cta-hover); }
.pop-badge { position: absolute; top: 20px; right: 20px; padding: 3px 10px; border-radius: var(--radius-full); background: #fff; color: var(--primary-dark); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fine { margin-top: var(--space-l); text-align: center; color: var(--muted); font-size: 13px; }

/* ---------- Demos ---------- */
.demos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
.demo { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
.demo:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.demo-thumb { aspect-ratio: 16 / 10; display: grid; place-items: center; font-size: 48px; background: var(--band) !important; }
.demo-thumb span { transition: transform .5s var(--ease); }
.demo:hover .demo-thumb span { transform: scale(1.15); }
.demo-info { padding: var(--space-l); display: flex; flex-direction: column; flex: 1; }
.demo-info h3 { font-size: 1.25rem; line-height: 1.4; }
.demo-info p { margin-top: 4px; color: var(--muted); font-size: .9375rem; }
.more { margin-top: auto; padding-top: var(--space-m); display: inline-flex; align-items: center; gap: 6px; color: var(--primary-text); font-weight: 600; font-size: .875rem; }
.more svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.demo:hover .more svg, .tile:hover .more svg { transform: translateX(4px); }

/* ---------- Timeline (industry pages) ---------- */
.timeline { position: relative; max-width: 700px; margin-inline: auto; display: grid; gap: var(--space-s); }
.timeline::before { content: ""; position: absolute; left: 39px; top: 14px; bottom: 14px; width: 2px; background: var(--primary-muted); }
.tl { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: var(--space-m); align-items: start; }
.tl time { position: relative; z-index: 1; display: grid; place-items: center; height: 32px; margin-top: 12px; border-radius: var(--radius-full); background: var(--primary) !important; color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl div { padding: var(--space-m) var(--space-l); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.tl b { display: block; font-weight: 600; color: var(--ink); font-size: .9375rem; }
.tl p { margin-top: 2px; color: var(--muted); font-size: .875rem; }

/* ---------- Industry hero ---------- */
.ind-hero h1 { font-size: var(--fs-h1); }
.ind-badge { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.ind-card { position: relative; width: 82%; aspect-ratio: 1; border-radius: var(--radius-xl); background: rgb(255 255 255 / .12) !important; border: 1px solid rgb(255 255 255 / .25); backdrop-filter: blur(8px); box-shadow: 0 30px 70px rgb(26 10 46 / .35); display: grid; place-items: center; transform-style: preserve-3d; }
.ind-card .emo { font-size: clamp(4.5rem, 3rem + 5vw, 7rem); transform: translateZ(50px); }
.ind-card .lbl { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%) translateZ(30px); padding: 4px 12px; border-radius: var(--radius-full); background: #fff; color: var(--primary-dark); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--on-dark-muted); margin-bottom: var(--space-m); }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: #fff; }
.note { margin-top: var(--space-m); padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); font-size: .875rem; color: var(--text); }

/* ---------- CTA + footer ---------- */
.cta { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(var(--space-2xl), 7vw, 80px) clamp(20px, 5vw, var(--space-4xl)); border-radius: var(--radius-xl); background: var(--band); color: var(--on-dark); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 300px at 50% 0%, rgb(200 66 238 / .45), transparent 70%); }
.cta h2 { color: #fff; font-size: var(--fs-h2); max-width: 24ch; margin: var(--space-s) auto 0; }
.cta p { margin: var(--space-s) auto 0; max-width: 32rem; color: var(--on-dark-muted); }
.cta .eyebrow { color: var(--on-dark-muted); }
.cta .hero-ctas { justify-content: center; }
.cta .btn-paper { background: transparent; color: #fff; border-color: rgb(255 255 255 / .45); }
.cta .btn-paper:hover { border-color: #fff; color: #fff; }
.cta-meta { margin-top: var(--space-m); color: var(--on-dark-muted); font-size: .875rem; }
.cta-meta a { color: #fff; font-weight: 600; text-underline-offset: 3px; }

.footer { margin-top: clamp(var(--space-4xl), 8vw, 96px); border-top: 1px solid var(--line); background: var(--paper); }
.foot-grid { width: min(100% - 32px, var(--container)); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-xl); padding-top: var(--space-2xl); }
.footer .container { width: auto; }
.foot-grid p { margin-top: var(--space-s); color: var(--muted); max-width: 22rem; font-size: .875rem; }
.foot-grid .foot-h { font-size: .9375rem; font-weight: 600; color: var(--ink); margin-bottom: var(--space-s); }
.foot-grid ul a { color: var(--muted); text-decoration: none; display: inline-block; padding: 3px 0; font-size: .875rem; }
.foot-grid ul a:hover { color: var(--primary-text); }
.wordmark { display: none; }
.foot-bottom { width: min(100% - 32px, var(--container)); margin: var(--space-2xl) auto 0; padding: var(--space-l) 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.foot-bottom a { color: inherit; }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav-wa { display: none; }
  .dd-wide { width: 640px; grid-template-columns: 1fr 1fr; }
  .dd-wide .dd-feature { display: none; }
}
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .nav { gap: 12px; }
  .nav-links {
    display: none; position: absolute; left: 16px; right: 16px; top: calc(100% + 8px); flex-direction: column; gap: 2px; padding: 8px;
    max-height: calc(100dvh - 130px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  }
  .nav-links.open { display: flex; animation: fadeIn .3s var(--ease); }
  .nav-top { width: 100%; justify-content: space-between; min-height: 48px; font-size: .9375rem; border-radius: var(--radius-sm); }
  .nav-top .chev { width: 18px; height: 18px; }
  .dd, .nav-item.open > .dd { position: static; display: none; width: auto; min-width: 0; padding: 2px 0 6px; border: 0; box-shadow: none; border-radius: 0; opacity: 1; visibility: visible; transform: none; transition: none; background: transparent; }
  .nav-item.open > .dd { display: flex; flex-direction: column; }
  .dd::before, .dd-feature { display: none; }
  .hero-grid, .cube-grid, .panel, .auto-feature { grid-template-columns: 1fr; }
  .autos { grid-template-columns: 1fr; }
  .stack { grid-template-columns: 1fr; }
  .stack .btn { grid-column: 1; grid-row: 3; justify-self: start; }
  .process, .steps, .pricing, .demos { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .tile, .tile.span-2, .tile.span-4 { grid-column: span 6; }
  .chips-row { grid-template-columns: repeat(2, 1fr); }
  .chip-stat:nth-child(3) { border-left: 0; }
  .chip-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .badge-spin { width: 92px; height: 92px; }
  .badge-spin .core { width: 44px; height: 44px; font-size: 12px; }
  .stage .badge-spin { top: auto !important; left: auto !important; right: -4px !important; bottom: -34px !important; }
}
@media (max-width: 560px) {
  .hero { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn { width: 100%; }
  .nav-actions .btn { padding: 0 14px; }
  .hide-sm { display: none; }
  .event { grid-template-columns: 36px 1fr; }
  .event time { display: none; }
  .brief .btn { width: 100%; }
  .tl { grid-template-columns: 64px 1fr; gap: 12px; }
  .timeline::before { left: 31px; }
  .tl time { font-size: 12px; }
  .plan, .tile { padding: var(--space-l); }
}
.show-sm { display: none; }
@media (max-width: 560px) { .show-sm { display: inline; } }


/* =====================================================================
   v9 additions
   ===================================================================== */

/* ---------- White text surfaces over the textured page ---------- */
.head, .trust-title, .tagline, .fine, .cube-grid > div:first-child { position: relative; }
.head::before, .trust-title::before, .tagline::before, .fine::before, .cube-grid > div:first-child::before {
  content: ""; position: absolute; z-index: -1; inset: -32px 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--paper) 62%, transparent);
}
.band .head::before, .hero .head::before { display: none; }

/* ---------- Scroll progress ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 400; pointer-events: none; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary-dark), var(--primary-lighter), var(--cta)); transform-origin: left; transform: scaleX(var(--sp, 0)); }

/* ---------- Button shine ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
}
.btn-primary:hover::after { transform: translateX(120%); transition: transform .7s var(--ease); }
.hero .btn-primary::after, .cta .btn-primary::after { animation: shine 5s var(--ease) 2s infinite; }
@keyframes shine { 0% { transform: translateX(-120%); } 18%, 100% { transform: translateX(120%); } }

/* ---------- Highlighted words: gold shimmer (white → gold on purple) ---------- */
.marker, .gradient-text, .statement .w.em {
  color: var(--gold);                                   /* fallback if text clipping is unsupported */
  background-image: var(--gold-text); background-size: 250% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: goldshift 8s ease-in-out infinite alternate;
}
:is(.hero, .band, .cta, .auto-feature, .auto-purple, .eng-close, .plan-pop) :is(.marker, .gradient-text) { color: #ffe3a1; background-image: var(--gold-on-dark); }
@keyframes goldshift { to { background-position: 100% 50%; } }

/* Gold underline fades in when the heading scrolls into view */
.marker { text-decoration: underline var(--gold-line); text-decoration-thickness: .12em; text-underline-offset: .16em; text-decoration-skip-ink: none; }
.marker, .gradient-text, .statement .w.em { filter: drop-shadow(0 0 14px var(--gold-glow)); }
.js .reveal .marker, .js .tagline .marker { text-decoration-color: transparent; transition: text-decoration-color .9s var(--ease) .35s; }
.js .reveal.in .marker { text-decoration-color: var(--gold-line); }
.hero .marker { text-decoration-color: #ffcf5c; animation: goldshift 8s ease-in-out infinite alternate, line-in 1s var(--ease) 1s both; }
@keyframes line-in { from { text-decoration-color: transparent; } }

@media (forced-colors: active) {
  .marker, .gradient-text, .statement .w.em { background: none; -webkit-text-fill-color: currentColor; }
}

/* ---------- Pointer glow on white cards ---------- */
.glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), rgb(163 0 227 / .09), transparent 60%);
}
.glow:hover::after { opacity: 1; }
.plan-pop.glow::after { background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .12), transparent 60%); }

/* ---------- Lead-to-revenue engine ---------- */
.journey { padding: clamp(20px, 3vw, var(--space-xl)); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.j-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); }
.j-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.j-live { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: blink 1.6s infinite; }
.j-play, .motion-btn {
  min-height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--radius-full); background: var(--surface);
  color: var(--text); font: 500 .8125rem var(--font); cursor: pointer; transition: border-color .2s, color .2s;
}
.j-play:hover, .motion-btn:hover { border-color: var(--primary); color: var(--primary-text); }
.j-rail { position: relative; margin-top: var(--space-l); }
.j-stages { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-s); }
.j-track { position: absolute; left: 10%; right: 10%; top: 27px; height: 3px; border-radius: var(--radius-full); background: var(--line); }
.j-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--primary-dark), var(--primary-lighter)); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .9s var(--ease); }
.j-runner { position: absolute; inset: 0; transform: translateX(calc(var(--p, 0) * 100%)); transition: transform .9s var(--ease); }
.j-runner::before { content: ""; position: absolute; left: -8px; top: -6.5px; width: 16px; height: 16px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 6px rgb(204 68 0 / .18); }
.j-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 0 0 4px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: var(--radius-sm); }
.j-node {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line-2); color: var(--muted);
  transition: transform .4s var(--ease), background-color .4s, border-color .4s, color .4s, box-shadow .4s;
}
.j-node > svg { width: 22px; height: 22px; }
.j-tick { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--success); color: #fff; transform: scale(0); transition: transform .35s var(--ease); }
.j-tick svg { width: 12px; height: 12px; }
.j-btn:hover .j-node { border-color: var(--primary); color: var(--primary-text); }
.j-stage.is-done .j-node { background: var(--primary-muted); border-color: var(--primary); color: var(--primary-text); }
.j-stage.is-done .j-tick { transform: scale(1); }
.j-stage.is-active .j-node { background: var(--primary); border-color: var(--primary); color: #fff; transform: scale(1.08); box-shadow: 0 10px 24px rgb(163 0 227 / .35); }
.j-stage.is-active .j-node::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--primary); animation: ping 1.6s var(--ease) infinite; }
@keyframes ping { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.j-text { display: flex; flex-direction: column; align-items: center; }
.j-time { margin-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.j-name { font-weight: 600; color: var(--ink); }
.j-stage.is-active .j-name { color: var(--primary-text); }
.j-desc { margin-top: 2px; text-align: center; font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.j-chat { margin-top: var(--space-l); min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--space-m); border-radius: var(--radius-md); background: var(--paper-2); }
.j-bub { max-width: min(100%, 34rem); padding: 10px 16px; border-radius: 18px; font-size: .9375rem; line-height: 1.45; text-align: center; animation: bubIn .5s var(--ease) both; }
.j-in { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.j-out { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.j-done { background: color-mix(in srgb, #16a34a 14%, var(--surface)); color: var(--success); font-weight: 600; }
.j-meta { font-size: 12px; color: var(--muted); animation: fadeIn .5s var(--ease) .15s both; }

.engine-cols { margin-top: var(--space-m); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
.eng-card { position: relative; overflow: hidden; isolation: isolate; padding: clamp(var(--space-l), 3.5vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.eng-card h3 { margin-top: 14px; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
.eng-card header p { margin-top: 6px; color: var(--muted); }
.eng-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: var(--radius-full); background: var(--primary-muted); color: var(--primary-text); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.eng-tag svg { width: 16px; height: 16px; }
.eng-list { margin-top: var(--space-l); display: grid; gap: var(--space-2xs); }
.eng-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 14px; border-radius: var(--radius-md); transition: background-color .25s; }
.eng-list li:hover { background: var(--paper-2); }
.js .eng-list li.reveal.in:hover { transform: translateX(4px); transition: transform .25s var(--ease), background-color .25s; transition-delay: 0s; }
.eng-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-muted); color: var(--primary-text); transition: transform .3s var(--ease), background-color .3s, color .3s; }
.eng-ico svg { width: 20px; height: 20px; }
.eng-list li:hover .eng-ico { transform: rotate(-6deg); background: var(--primary); color: #fff; }
.eng-list h4 { font-size: 1rem; line-height: 1.35; }
.eng-list p { margin-top: 2px; font-size: .9375rem; color: var(--muted); }
.eng-close { background: var(--band); border-color: transparent; color: var(--on-dark); }
.eng-close h3, .eng-close h4 { color: #fff; }
.eng-close p, .eng-close header p { color: var(--on-dark-muted); }
.eng-close .eng-tag, .eng-close .eng-ico { background: rgb(255 255 255 / .14); color: #fff; }
.eng-close .eng-list li:hover { background: rgb(255 255 255 / .08); }
.eng-close .eng-list li:hover .eng-ico { background: #fff; color: var(--primary-dark); }
.eng-close .fx-net { opacity: .4; }
.eng-foot { margin-top: var(--space-m); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); padding: var(--space-l) var(--space-xl); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.eng-promises { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.eng-promises li { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 500; color: var(--ink); }
.eng-promises svg { width: 18px; height: 18px; color: var(--primary-text); flex: none; }

@media (max-width: 760px) {
  .j-stages { grid-template-columns: 1fr; gap: var(--space-m); }
  .j-track { left: 27px; right: auto; top: 28px; bottom: 28px; width: 3px; height: auto; }
  .j-fill { transform-origin: top; transform: scaleY(var(--p, 0)); }
  .j-runner { display: none; }
  .j-btn { flex-direction: row; gap: 14px; text-align: left; padding: 0; }
  .j-text { align-items: flex-start; }
  .j-time { margin-top: 0; }
  .j-desc { margin-top: -8px; padding-left: 70px; text-align: left; }
  .eng-card { padding: var(--space-l) var(--space-m); }
  .eng-list li { grid-template-columns: 36px 1fr; gap: 12px; padding: 12px 8px; }
  .eng-ico { width: 36px; height: 36px; }
  .engine-cols { grid-template-columns: 1fr; }
  .eng-foot { padding: var(--space-l); }
  .eng-foot .btn { width: 100%; }
}

/* ---------- Footer ---------- */
.foot-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
.motion-btn { min-height: 32px; font-size: 13px; color: var(--muted); }

/* ---------- Long button labels wrap instead of overflowing on phones ---------- */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; }
  .stack .btn { width: 100%; justify-self: stretch; }
}

/* ---------- Narrow phones: keep the header inside 320px ---------- */
@media (max-width: 400px) {
  .nav, .nav-actions { gap: 8px; }
  .brand { font-size: 1.0625rem; gap: 6px; }
  .brand img { width: 28px; height: 28px; }
  .nav-actions .btn { padding: 0 12px; font-size: .8125rem; min-height: 40px; }
  .menu-btn { width: 40px; height: 40px; }
}
@media (max-width: 359px) { .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* ---------- User-controlled pause (WCAG 2.2.2) ---------- */
.motion-paused :is(.marker, .gradient-text, .statement .w.em, .ticker-track, .duty, .badge-spin svg, .fx-aurora, .fx-pulse, .fx-nodes circle, .fx-noise, .typing i, .orbit-ring, .orbit-core, .sat > div, .j-live),
.motion-paused :is(.duty, .link, .j-node, .btn-primary)::before,
.motion-paused :is(.link, .j-node, .btn-primary)::after { animation-play-state: paused !important; }

/* ---------- Purple cards on industry pages (same scheme as the automation cards) ---------- */
.lvl-line { margin-top: 20px; color: var(--ink); font-size: 1.1875rem; font-weight: 600; }
.tile-purple { overflow: hidden; isolation: isolate; background: var(--band) !important; border-color: transparent; color: var(--on-dark); }
.tile-purple::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(420px 240px at 85% 0%, rgb(200 66 238 / .45), transparent 70%); }
.tile-purple .fx-net { opacity: .32; }
.tile-purple:hover { box-shadow: var(--shadow-lg); }
.tile-purple h3, .tile-purple .lvl-line { color: #fff; }
.tile-purple p { color: var(--on-dark-muted); }
.tile-purple .big-emoji, .tile-purple .auto-ico { background: rgb(255 255 255 / .14); color: #fff; }
.tile-purple:hover .auto-ico { background: #fff; color: var(--primary-dark); }
.tile-purple .num { color: #fff; }
.tile-purple .tags li { background: rgb(255 255 255 / .14); color: #fff; }
.tile-purple .eyebrow { color: #f0c6ff !important; }
.tile-purple .more { color: #fff; }
.tile-purple :is(.marker, .gradient-text) { color: #ffe3a1; background-image: var(--gold-on-dark); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero h1 .line > span, .fade-in { transform: none; opacity: 1; }
  .statement .w { opacity: 1; }
}
@media (forced-colors: active) {
  .btn, .tile, .plan, .tab, .face { border: 1px solid CanvasText; }
}

/* ---------- Pricing without fixed prices ---------- */
.plan .price-talk { font-size: 1.75rem; }

/* ---------- Lead form (contact section) ---------- */
.lead-form { position: relative; max-width: 40rem; margin: var(--space-xl) auto 0; text-align: left; }
.lf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
.lf-wide { grid-column: 1 / -1; }
.lf-field label { display: block; margin-bottom: var(--space-2xs); font-size: .875rem; font-weight: 600; color: #fff; }
.lf-field label span { font-weight: 400; color: var(--on-dark-muted); }
.lf-field :is(input, textarea) { display: block; width: 100%; min-height: 48px; padding: var(--space-s) var(--space-m); border: 1px solid rgb(255 255 255 / .55); border-radius: var(--radius-sm); background: rgb(255 255 255 / .1); color: #fff; font: inherit; font-size: 1rem; }
.lf-field textarea { resize: vertical; }
.lf-field :is(input, textarea):focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-color: #fff; }
.lf-field :is(input, textarea):user-invalid { border-color: #ffb4a8; box-shadow: 0 0 0 1px #ffb4a8; }
.lead-form .btn { width: 100%; margin-top: var(--space-l); }
.lead-form[aria-busy="true"] .btn { opacity: .75; cursor: progress; }
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cta .lf-status { max-width: none; margin-top: var(--space-m); padding: var(--space-s) var(--space-m); border-radius: var(--radius-sm); background: rgb(255 255 255 / .12); color: #fff; }
.cta .lf-status:empty { display: none; }
.lf-status[data-state="ok"] { background: rgb(21 128 61 / .55); }
.lf-status[data-state="error"] { background: rgb(153 27 27 / .55); }
.lf-status a, .cta .lf-fine a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.cta .lf-fine { max-width: none; margin-top: var(--space-s); text-align: center; font-size: .8125rem; }
.lead-form + .hero-ctas { margin-top: var(--space-l); }
@media (max-width: 560px) { .lf-grid { grid-template-columns: 1fr; } }

/* ---------- Simple pages: privacy, terms, 404 ---------- */
.page-hero { padding-block: clamp(var(--space-2xl), 6vw, 72px); }
.page-hero h1 { margin-top: var(--space-s); font-size: var(--fs-h1); }
.prose { max-width: 70ch; color: var(--text); font-size: 1.0625rem; line-height: 1.7; }
.prose h2 { margin-top: var(--space-xl); font-size: 1.375rem; color: var(--ink); }
.prose p, .prose ul { margin-top: var(--space-s); }
.prose ul { padding-left: 1.25em; list-style: disc; }
.prose li + li { margin-top: var(--space-2xs); }
.prose a { color: var(--primary-text); text-underline-offset: 3px; }
.prose .prose-meta { margin-top: 0; color: var(--muted); font-size: .875rem; }
.prose .hero-ctas { margin-top: var(--space-l); }
.foot-bottom span a { color: inherit; text-underline-offset: 3px; }

/* ---------- Performance: decorative motion only runs while on screen ---------- */
.js :is(.fx, .orbit-box, .badge-spin, .ticker):not(.is-live),
.js :is(.fx, .orbit-box, .badge-spin, .ticker):not(.is-live) *,
.js :is(.fx, .orbit-box, .badge-spin, .ticker):not(.is-live) *::before,
.js :is(.fx, .orbit-box, .badge-spin, .ticker):not(.is-live) *::after { animation-play-state: paused !important; }
/* Touch, small-screen and low-power devices keep the same look, minus the effects that repaint every frame */
.lite :is(.fx-pulse, .fx-noise) { display: none; }
.lite :is(.fx-nodes circle, .fx-aurora, .marker, .gradient-text, .statement .w.em, .orbit-core) { animation: none; }
.lite .hero .marker { animation: line-in 1s var(--ease) 1s both; }
.lite .fx-aurora { will-change: auto; }

/* ---------- Social profile buttons (footer) ---------- */
.social { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }
.foot-grid .social a, .social a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius-full); color: var(--ink); background: var(--surface); transition: color .2s, border-color .2s, background .2s; }
.foot-grid .social a:hover, .social a:hover { color: #fff; border-color: var(--primary); background: var(--primary); }
.social .icon { width: 20px; height: 20px; }