/* ============================================================
   ADOPTIVA — Digital Adoption Platform
   Design system v2 — BOLD COLORFUL GRADIENTS
   Light, loud, saturated: sunset-gradient brand, vivid dark
   sections, oversized type, tinted cards, colorful shadows.
   ============================================================ */

:root{
  --bg:#FDFDFF;
  --bg-soft:#F5F3FF;
  --bg-tint:#EDE9FE;
  --bg-peach:#FFF4ED;
  --bg-sky:#EDFAFF;
  --bg-rose:#FDF1F7;
  --ink:#171233;
  --ink-soft:#4E4A6E;
  --ink-faint:#8B87AB;
  --brand:#7C3AED;
  --brand-2:#DB2777;
  --brand-3:#06B6D4;
  --accent-amber:#F59E0B;
  --success:#059669;
  --warning:#D97706;
  --border:#E7E3F8;
  --grad-brand:linear-gradient(100deg,#7C3AED 0%,#DB2777 52%,#FB923C 108%);
  --grad-brand-soft:linear-gradient(100deg,rgba(124,58,237,.12),rgba(219,39,119,.12));
  --grad-ai:linear-gradient(100deg,#06B6D4 0%,#6366F1 100%);
  --grad-sun:linear-gradient(100deg,#F59E0B 0%,#EF4444 100%);
  --grad-sea:linear-gradient(100deg,#06B6D4 0%,#10B981 100%);
  --grad-grape:linear-gradient(100deg,#6366F1 0%,#A855F7 100%);
  --grad-candy:linear-gradient(100deg,#EC4899 0%,#F97316 100%);
  --grad-vivid:linear-gradient(135deg,#312E81 0%,#6D28D9 46%,#BE185D 108%);
  --grad-vivid-2:linear-gradient(140deg,#1E1B4B 0%,#5B21B6 55%,#9D174D 115%);
  --glass:rgba(255,255,255,.78);
  --dark-bg:#1E1B4B;
  --dark-bg-2:rgba(255,255,255,.07);
  --dark-ink:#FFFFFF;
  --dark-ink-soft:rgba(255,255,255,.78);
  --dark-border:rgba(255,255,255,.16);
  --shadow:0 10px 36px rgba(124,58,237,.10);
  --shadow-lg:0 26px 70px rgba(124,58,237,.20);
  --shadow-pop:0 18px 50px rgba(219,39,119,.28);
  --r:20px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --maxw:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;line-height:1.08;letter-spacing:-.025em;font-weight:700}
::selection{background:rgba(219,39,119,.22)}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.dark-section .grad,.page-hero .grad,.calc-results .grad{background-image:linear-gradient(100deg,#C4B5FD 0%,#F9A8D4 50%,#FDBA74 100%)}
.lead{font-size:19px;color:var(--ink-soft);max-width:640px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--grad-brand);padding:7px 15px;border-radius:999px;margin-bottom:18px;box-shadow:0 6px 18px rgba(219,39,119,.3)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.center{text-align:center;margin-inline:auto}
.center .lead{margin-inline:auto}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad-brand);z-index:1001;transition:width .1s linear}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:700;font-size:15px;padding:15px 30px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s;white-space:nowrap}
.btn-primary{background:var(--grad-brand);background-size:180% 180%;color:#fff;box-shadow:0 10px 28px rgba(219,39,119,.4)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(219,39,119,.5);animation:gradient-shift 3s ease infinite}
.btn-secondary{background:#fff;border:2px solid var(--border);color:var(--ink);box-shadow:var(--shadow)}
.btn-secondary:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.btn-ghost{border:2px solid rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:translateY(-3px)}
.btn-lg{padding:18px 36px;font-size:16px}
.btn-xl{padding:21px 44px;font-size:17px}
.btn-sm{padding:11px 22px;font-size:14px}
.btn-xs{padding:8px 17px;font-size:13px}
@keyframes gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.text-link{font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:4px}
.text-link span,.text-link .arr{transition:transform .2s var(--ease)}
.text-link:hover span{transform:translateX(4px)}
.text-link:hover{color:var(--brand-2)}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce-bar{position:relative;background:var(--grad-brand);background-size:160% 160%;animation:gradient-shift 8s ease infinite;color:rgba(255,255,255,.92);font-size:14px;text-align:center;padding:12px 48px;z-index:1000;transition:transform .4s var(--ease);transform:translateY(0)}
.announce-bar p a{color:#fff;font-weight:700;margin-left:6px}
.announce-bar p a .arr{display:inline-block;transition:transform .2s}
.announce-bar p a:hover .arr{transform:translateX(4px)}
.announce-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.8);font-size:14px;padding:4px;border-radius:6px}
.announce-close:hover{color:#fff}
.announce-bar.hidden{transform:translateY(-100%)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:sticky;top:0;z-index:900;background:transparent;transition:background .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(253,253,255,.86);backdrop-filter:blur(16px);border-bottom-color:var(--border);box-shadow:0 6px 28px rgba(124,58,237,.08)}
.header-inner{display:flex;align-items:center;gap:28px;height:74px;position:relative;z-index:895}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{filter:drop-shadow(0 5px 14px rgba(219,39,119,.4))}
.logo-text{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.03em}
.main-nav{margin-left:auto}
.nav-list{display:flex;gap:4px;list-style:none}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;font-weight:600;font-size:15px;color:var(--ink);border-radius:10px;transition:background .2s,color .2s}
.nav-link:hover{background:var(--bg-tint);color:var(--brand)}
.nav-link .chev{font-size:10px;color:var(--ink-faint);transition:transform .25s}
.nav-item:hover .chev{transform:rotate(180deg)}

/* Mega panels */
.mega-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(12px);background:#fff;border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lg);padding:22px;min-width:720px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.nav-item:hover .mega-panel,.nav-item:focus-within .mega-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-panel .mega-head{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}
.mega-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:20px}
.mega-grid.cols-4{grid-template-columns:1fr 1fr 1fr .9fr}
.mega-grid.cols-2{grid-template-columns:1fr .9fr}
.mega-col{display:flex;flex-direction:column;gap:2px}
.mega-link{display:flex;gap:12px;align-items:flex-start;padding:10px 10px;border-radius:14px;transition:background .2s}
.mega-link:hover{background:var(--bg-soft)}
.mega-link .mega-icon{font-size:20px;line-height:1.4;width:32px;text-align:center}
.mega-link strong{display:block;font-size:15px}
.mega-link em{font-style:normal;font-size:13px;color:var(--ink-faint)}
.mega-cta{color:var(--brand);font-weight:700;margin-top:8px}
.mega-simple{display:block;padding:8px 10px;border-radius:10px;font-size:14.5px;color:var(--ink-soft);transition:background .2s,color .2s}
.mega-simple:hover{background:var(--bg-soft);color:var(--brand)}
.mega-promo{background:var(--grad-grape);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px;color:#fff;box-shadow:0 14px 34px rgba(124,58,237,.35)}
.mega-promo.dark-promo{background:var(--grad-vivid-2)}
.mega-promo h4{font-size:18px;color:#fff}
.mega-promo p{font-size:14px;color:rgba(255,255,255,.85)}
.mega-promo a{color:#fff;font-weight:700;font-size:14.5px}
.promo-chip{display:inline-block;align-self:flex-start;background:#fff;color:var(--brand);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;animation:shimmer 2.6s linear infinite}
@keyframes shimmer{0%{filter:brightness(1)}50%{filter:brightness(1.18)}100%{filter:brightness(1)}}

/* Apps mega menu */
.mega-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.app-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:14px;font-size:13px;font-weight:600;transition:background .2s,transform .2s}
.app-tile:hover{background:var(--bg-soft);transform:translateY(-2px)}
.mega-foot{font-size:13px;color:var(--ink-faint);margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.mega-foot a{color:var(--brand);font-weight:700}

.app-logo{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:#fff;box-shadow:0 4px 12px rgba(23,18,51,.18)}
.app-logo.sap{background:#0FAAFF}
.app-logo.s4{background:#00B8B0}
.app-logo.sf{background:#00A1E0}
.app-logo.wd{background:#F5812F}
.app-logo.oracle{background:#EA1F2B}
.app-logo.dyn{background:#005D8F}
.app-logo.ms{background:#00A4EF}
.app-logo.sn{background:#48A7B0}
.app-logo.coupa{background:#133E52}
.app-logo.jira{background:#0052CC}
.app-logo.gws{background:#34A853}
.app-logo.pbi{background:#F2C811;color:#171233}

.header-actions{display:flex;align-items:center;gap:14px;margin-left:12px}
.signin{font-weight:600;font-size:14.5px;color:var(--ink-soft)}
.signin:hover{color:var(--brand)}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;border-radius:8px}
.hamburger span{width:22px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .3s,opacity .3s}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Mobile menu */
.mobile-menu{position:fixed;inset:0;top:0;background:var(--bg);z-index:890;padding:96px 24px 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu nav{display:flex;flex-direction:column}
.m-acc{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 4px;font-size:17px;font-weight:700;border-bottom:1px solid var(--border);color:var(--ink)}
.m-acc span{transition:transform .3s;color:var(--ink-faint)}
.m-acc.open span{transform:rotate(180deg)}
.m-acc-body{display:none;flex-direction:column;gap:2px;padding:6px 8px 14px}
.m-acc-body a{padding:9px 4px;color:var(--ink-soft);font-size:15px}
.m-acc-body a:hover{color:var(--brand)}
.m-link{display:block;padding:16px 4px;font-size:17px;font-weight:700;border-bottom:1px solid var(--border)}
.m-actions{display:flex;flex-direction:column;gap:12px;margin-top:28px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--bg);overflow:hidden;padding:80px 0 96px}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 520px at 12% -8%,rgba(124,58,237,.16),transparent 60%),radial-gradient(800px 500px at 95% 8%,rgba(219,39,119,.14),transparent 60%),radial-gradient(700px 460px at 70% 105%,rgba(251,146,60,.16),transparent 62%),radial-gradient(600px 420px at 20% 100%,rgba(6,182,212,.12),transparent 60%);pointer-events:none}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.orb{position:absolute;border-radius:50%;filter:blur(95px);pointer-events:none;opacity:.6;animation:orb-drift 14s ease-in-out infinite alternate}
.orb-4{width:420px;height:420px;background:rgba(251,146,60,.32);top:-120px;right:-100px}
.orb-5{width:520px;height:520px;background:rgba(124,58,237,.42);top:-160px;left:-120px}
.orb-6{width:460px;height:460px;background:rgba(236,72,153,.32);bottom:-180px;right:-140px;animation-delay:-6s}
@keyframes orb-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,-30px) scale(1.08)}}

.eyebrow-chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--glass);backdrop-filter:blur(8px);border:1.5px solid var(--border);border-radius:999px;padding:9px 18px;margin-bottom:28px;box-shadow:var(--shadow)}
.badge-new{background:var(--grad-sun);color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;letter-spacing:.05em}

.hero-h1{font-size:clamp(46px,6.6vw,84px);line-height:.98;margin-bottom:22px;letter-spacing:-.035em}
.hero-h1 .mask{display:block;overflow:hidden}
.hero-h1 .line{display:inline-block}

.hero-rotator{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,2.4vw,27px);font-weight:700;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;min-height:1.4em;margin-bottom:18px}
.hero-rotator::after{content:"▍";color:var(--brand-2);-webkit-text-fill-color:var(--brand-2);animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.hero-sub{font-size:18.5px;color:var(--ink-soft);max-width:530px;margin-bottom:34px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:14px;color:var(--ink-soft)}
.hero-trust strong{color:var(--ink)}
.avatar-stack{display:flex}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:#fff;font-size:13px;font-weight:700;border:2.5px solid #fff;margin-left:-10px;box-shadow:0 4px 12px rgba(23,18,51,.15)}
.avatar:first-child{margin-left:0}
.g2-badge{background:#fff;border:1.5px solid var(--border);border-radius:999px;padding:6px 13px;font-weight:700;font-size:13px;box-shadow:var(--shadow)}
.leader-chip{background:rgba(5,150,105,.12);color:var(--success);border-radius:999px;padding:6px 13px;font-weight:700;font-size:13px}

/* Hero media */
.hero-media{position:relative}
.browser-frame{background:#fff;border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lg),0 40px 90px rgba(219,39,119,.14);overflow:hidden;transform:rotate(0);transition:transform .4s var(--ease)}
.hero-media:hover .browser-frame{transition:box-shadow .4s var(--ease)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.dot{width:11px;height:11px;border-radius:50%}
.dot.r{background:#FF5F57}.dot.y{background:#FEBC2E}.dot.g{background:#28C840}
.browser-url{flex:1;text-align:center;background:var(--bg-tint);border-radius:7px;font-size:12.5px;color:var(--ink-faint);padding:4px 10px;font-family:'JetBrains Mono',monospace}
.browser-body{display:flex;min-height:360px}
.app-sidebar{width:58px;background:var(--bg-soft);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 0}
.sb-logo{width:26px;height:26px;border-radius:8px;background:var(--grad-brand);margin-bottom:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800}
.sb-item{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--ink-faint)}
.sb-item svg{width:17px;height:17px}
.sb-item.active{color:var(--brand);background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--border)}
.app-main{flex:1;padding:22px;position:relative}
.fake-app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.fah-title{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.fah-btn{display:inline-flex;align-items:center;height:26px;padding:0 14px;border-radius:999px;background:var(--grad-brand);color:#fff;font-size:11.5px;font-weight:700;animation:btn-glow 3s ease-in-out infinite}
.tour-bubble{position:relative;display:flex;gap:10px;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;box-shadow:0 14px 34px rgba(23,18,51,.25);padding:12px 34px 12px 12px;margin-bottom:18px;animation:float-card 5s ease-in-out infinite;width:100%;box-sizing:border-box}
  .tb-avatar{width:34px;height:34px;border-radius:50%;background:var(--grad-ai);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;animation:avatar-pulse 2.6s ease-in-out infinite}
  .tb-content strong{display:block;font-size:13px;margin-bottom:3px;color:var(--ink)}
  .tb-content p{font-size:12px;color:var(--ink-soft);margin-bottom:0;line-height:1.45}
  .tb-close{position:absolute;top:8px;right:10px;font-size:11px;color:var(--ink-soft);opacity:.6;line-height:1}
.tb-btn{display:inline-block;background:var(--grad-brand);color:#fff;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;animation:btn-glow 3s ease-in-out infinite}
@keyframes float-card{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes avatar-pulse{0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.35)}50%{box-shadow:0 0 0 9px rgba(124,58,237,0)}}
@keyframes btn-glow{0%,100%{box-shadow:0 0 0 0 rgba(219,39,119,.4)}50%{box-shadow:0 0 14px 2px rgba(219,39,119,.28)}}
@keyframes ff-flicker{0%,100%{opacity:.7}50%{opacity:1}}
.fake-form{display:flex;flex-direction:column;gap:10px}
.ff-row{display:flex;flex-direction:column;gap:5px}
.ff-label{width:auto;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);height:auto;background:none;animation:ff-flicker 2.4s ease-in-out infinite}
.ff-field{width:100%;display:block;font-size:13.5px;color:#fff;padding:9px 13px;border-radius:9px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);animation:ff-flicker 2.8s ease-in-out infinite;animation-delay:.15s;line-height:1.4}
.ff-field.short{width:60%}
.ff-actions{display:flex;align-items:center;gap:14px;margin-top:4px;flex-wrap:wrap}
.ff-action{display:inline-flex;align-items:center;justify-content:center;width:auto;height:34px;border-radius:999px;background:var(--grad-brand);padding:0 18px;font-size:12.5px;font-weight:700;color:#fff;margin-top:0;animation:btn-glow 3s ease-in-out infinite}
.ff-action.pulse{position:relative;animation:btn-glow 2.2s ease-in-out infinite}
.ff-action.pulse::after{content:"✎";font-size:10px;margin-left:8px;animation:ff-flicker 1.1s ease-in-out infinite}
.ff-action.saved{background:linear-gradient(90deg,#059669,#10B981);box-shadow:0 0 16px rgba(16,185,129,.35)}
.ff-tip{font-size:11.5px;color:#6EE7B7;font-weight:600;animation:ff-flicker 2.4s ease-in-out infinite}
.wt-steps{display:flex;gap:7px;margin-bottom:16px}
.wt-steps.v{flex-direction:column;margin-bottom:14px}
.wt-step{flex:1;display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.4);padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.wt-step.done{color:#6EE7B7;background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.25)}
.wt-step.now{color:#fff;background:rgba(124,58,237,.16);border-color:rgba(139,92,246,.5);animation:step-now 2.2s ease-in-out infinite}
.spot-form{display:flex;flex-direction:column;gap:10px}
.sf-row{display:flex;align-items:center;gap:10px;background:rgba(23,18,51,.35);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:9px 13px}
.sf-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.5);width:86px;flex-shrink:0}
.sf-field{font-size:13.5px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:8px 12px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-row .sf-check{opacity:0;transition:opacity .3s;margin-left:auto;width:19px;height:19px;border-radius:50%;background:rgba(16,185,129,.18);color:#6EE7B7;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sf-row.filled .sf-check{opacity:1;animation:chk-pop 2.6s ease-in-out infinite}
@keyframes chk-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.sf-row.empty .sf-field{color:rgba(255,255,255,.3)}
.sf-row.typing .sf-field{border-color:rgba(167,139,250,.7)}
.sf-cursor{width:2px;height:16px;border-radius:2px;background:#A78BFA;display:inline-block;vertical-align:text-bottom;margin-left:3px;animation:cursor-blink .9s steps(2) infinite}
@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}
.sf-row.typing{border-color:rgba(139,92,246,.6);box-shadow:0 0 0 3px rgba(139,92,246,.18);animation:spot-pulse 2.4s ease-in-out infinite}
.sf-row.typing .sf-field{border-color:rgba(167,139,250,.7)}
.sf-cursor{width:2px;height:17px;border-radius:2px;background:#A78BFA;animation:ff-flicker 1.1s ease-in-out infinite}
@keyframes spot-pulse{0%,100%{box-shadow:0 0 0 3px rgba(139,92,246,.14)}50%{box-shadow:0 0 0 6px rgba(139,92,246,.26)}}
.wt-player{display:flex;align-items:center;gap:10px;margin-top:14px}
.wt-bar{flex:1;height:5px;border-radius:999px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
.wt-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:75%;border-radius:999px;background:linear-gradient(90deg,#8B5CF6,#DB2777);animation:wt-progress 6s ease-in-out infinite}
@keyframes wt-progress{0%{width:6%}28%{width:28%}52%{width:52%}78%{width:75%}88%{width:75%}100%{width:6%}}
.wt-num{font-size:11.5px;color:rgba(255,255,255,.6);font-family:'JetBrains Mono',monospace}
.wt-pause{font-size:12px;color:rgba(255,255,255,.55)}
.app-bar{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:11px 15px;margin-bottom:16px;animation:card-flicker 3s ease-in-out infinite}
.ab-title{font-size:13.5px;font-weight:700;color:#fff;display:flex;align-items:center;gap:9px}
.ab-title::before{content:"◇";font-size:11px;color:#A78BFA}
.ab-userar{width:26px;height:26px;border-radius:50%;background:var(--grad-ai);display:block;flex-shrink:0}
.checklist{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-faint);padding:8px 12px;border-radius:11px;background:var(--bg-soft)}
.chk span{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:#fff}
.chk.done span{background:var(--success)}
.chk.done{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:rgba(5,150,105,.4)}
.chk.active span{background:var(--brand);animation:glow-pulse 2.4s infinite}
.chk.active{color:var(--ink);background:rgba(124,58,237,.08);border:1.5px solid rgba(124,58,237,.3)}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.5)}50%{box-shadow:0 0 0 6px rgba(124,58,237,0)}}
/* ---- Hero config panel (light) ---- */
.cfg-panel{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.cfg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-soft);border:1px solid var(--border);border-radius:11px;padding:8px 12px}
.cfg-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.cfg-value{font-size:13px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px 12px;display:inline-flex;align-items:center;gap:8px;animation:card-flicker 3s ease-in-out infinite}
.cfg-value i{font-style:normal;font-size:9px;color:var(--ink-faint)}
.cfg-toggle{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink)}
.cfg-toggle b{width:36px;height:20px;border-radius:999px;background:var(--grad-brand);position:relative;display:inline-block;box-shadow:inset 0 0 6px rgba(0,0,0,.08)}
.cfg-toggle b::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .3s;animation:knob-wiggle 4s ease-in-out infinite}
@keyframes knob-wiggle{0%,100%{left:3px}12%{left:19px}30%,100%{left:19px}60%{left:19px}68%{left:3px}82%,100%{left:3px}}
.cfg-chips{display:flex;gap:6px}
.cfg-chips em{font-style:normal;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;background:#fff;border:1px solid var(--border);color:var(--ink-soft)}
.cfg-chips em:first-child{background:var(--grad-brand);color:#fff;border-color:transparent;animation:chip-pulse 4s ease-in-out infinite}
@keyframes chip-pulse{0%,100%{box-shadow:0 0 0 0 rgba(219,39,119,.3)}50%{box-shadow:0 0 12px 1px rgba(219,39,119,.25)}}
.cfg-actions{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cfg-dots{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.cfg-dot{width:6px;height:6px;border-radius:99px;background:var(--border);transition:all .35s;cursor:pointer;position:relative}
.cfg-dot::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(.9);background:var(--ink);color:#fff;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20}
.cfg-dot:hover::after{opacity:1;transform:translateX(-50%) scale(1)}
.cfg-dot.active{width:20px;background:var(--grad-brand)}
.app-main.hvr-swap{animation:hvr-fade .55s var(--ease)}
@keyframes hvr-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.erp-dash{display:flex;flex-direction:column;gap:10px}
.erp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.erp-kpi{background:var(--bg-soft);border:1px solid var(--border);border-radius:11px;padding:9px 10px;position:relative;overflow:hidden;animation:kpi-in .5s var(--ease) both}
.erp-kpi:nth-child(1){animation-delay:.05s}
.erp-kpi:nth-child(2){animation-delay:.15s}
.erp-kpi:nth-child(3){animation-delay:.25s}
.erp-kpi:nth-child(4){animation-delay:.35s}
.erp-kpi::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 2.8s ease-in-out infinite}
@keyframes kpi-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{left:-60%}55%,100%{left:130%}}
.erp-kpi b{display:block;font-size:16px;color:var(--ink);line-height:1.2}
.erp-kpi span{font-size:10px;color:var(--ink-faint);font-weight:600}
.erp-kpi i{font-style:normal;color:#16A34A}
.erp-mid{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;align-items:center}
.erp-chart{display:flex;align-items:flex-end;gap:6px;height:96px;background:var(--bg-soft);border:1px solid var(--border);border-radius:11px;padding:10px 12px}
.erp-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.erp-bar i{display:block;width:100%;max-width:22px;border-radius:6px 6px 3px 3px;background:var(--grad-brand);animation:bar-grow 3.2s ease-in-out infinite}
.erp-bar:last-child i{background:var(--brand-2)}
.erp-bar em{font-style:normal;font-size:9px;color:var(--ink-faint);font-weight:600}
.erp-donut{width:96px;height:96px;position:relative;margin:auto;display:flex;align-items:center;justify-content:center}
.erp-ring{width:100%;height:100%;animation:donut-ring-spin 6s linear infinite}
.erp-ring circle{fill:none;stroke-width:11}
.erp-ring-bg{stroke:var(--border);opacity:.55}
.erp-ring-fg{stroke:url(#erpGrad);stroke-linecap:round}
@keyframes donut-ring-spin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
.erp-donut-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.erp-donut-core b{font-size:17px;color:var(--ink)}
.erp-donut-core span{font-size:10px;color:var(--ink-faint);font-weight:600}
.erp-table{display:flex;flex-direction:column;gap:5px}
.erp-tr{display:grid;grid-template-columns:78px 1fr auto auto;gap:8px;align-items:center;background:var(--bg-soft);border:1px solid var(--border);border-radius:9px;padding:6px 10px;font-size:11.5px;animation:row-in .45s var(--ease) both}
.erp-tr:nth-child(1){animation-delay:.15s}
.erp-tr:nth-child(2){animation-delay:.28s}
.erp-tr:nth-child(3){animation-delay:.41s}
@keyframes row-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.erp-tr span:first-child{font-weight:800;color:var(--ink)}
.erp-tr span:nth-child(2){color:var(--ink-soft)}
.erp-tr b{font-size:12px;color:var(--ink)}
.erp-tr em{font-style:normal;font-weight:700;font-size:10px;padding:3px 8px;border-radius:99px}
.erp-tr em.ok{background:#DCFCE7;color:#16A34A}
.erp-tr em.warn{background:#FEF3C7;color:#D97706}
.erp-tr em.bad{background:#FEE2E2;color:#DC2626}
.erp-tr em{animation:badge-pulse 2.4s ease-in-out infinite}
@keyframes badge-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.dash-live{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.08em;color:#16A34A;background:#DCFCE7;border-radius:99px;padding:4px 10px}
.dash-live i{width:7px;height:7px;border-radius:50%;background:#16A34A;animation:live-blink 1.2s ease-in-out infinite}
@keyframes live-blink{0%,100%{opacity:1}50%{opacity:.25}}
.cfg-generate{display:inline-flex;align-items:center;justify-content:center;height:36px;border-radius:999px;background:var(--grad-brand);padding:0 18px;font-size:13px;font-weight:700;color:#fff;animation:btn-glow 2.8s ease-in-out infinite}
.cfg-status{font-size:12.5px;font-weight:600;color:var(--ink-faint);animation:ff-flicker 2.4s ease-in-out infinite}
@keyframes float-card{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.float-card{position:absolute;background:var(--glass);backdrop-filter:blur(12px);border:1.5px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:13px 17px;font-size:13.5px;color:var(--ink);z-index:2}
.float-card strong{font-size:16px;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.fc-1{top:6%;left:-34px;animation:float-card 5s ease-in-out infinite}
.fc-2{top:44%;right:-30px;animation:float-card 6s ease-in-out infinite .8s}
.fc-3{bottom:4%;left:14%;animation:float-card 5.5s ease-in-out infinite 1.6s}

/* ============================================================
   REVEAL (scroll) system — hidden states only apply when GSAP
   is present (html.has-gsap). Without GSAP content stays visible.
   ============================================================ */
html.has-gsap .reveal{opacity:0;transform:translateY(28px)}
html.has-gsap .reveal.in{opacity:1;transform:none}
html.has-gsap .hero-reveal{opacity:0}
html:not(.has-gsap) .hero-reveal{opacity:0;animation:hero-in .8s var(--ease-expo) forwards;animation-delay:var(--d,0ms)}
@keyframes hero-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal,.hero-reveal{opacity:1;transform:none}
}
/* -- keep the brand zoom cascade alive even with reduced motion -- */
@media (prefers-reduced-motion:reduce){
  .logos-wallwrap .mlogo.zoom{animation-duration:var(--dur,3s) !important;animation-iteration-count:infinite !important}
  .cfg-toggle b::after{animation-duration:4s !important;animation-iteration-count:infinite !important}
  .cfg-chips em:first-child{animation-duration:4s !important;animation-iteration-count:infinite !important}
  .cfg-generate{animation-duration:2.8s !important;animation-iteration-count:infinite !important}
  .erp-bar i{animation-duration:3.2s !important;animation-iteration-count:infinite !important}
  .erp-ring{animation-duration:6s !important;animation-iteration-count:infinite !important}
  .erp-tr em{animation-duration:2.4s !important;animation-iteration-count:infinite !important}
  .erp-kpi::after{animation-duration:2.8s !important;animation-iteration-count:infinite !important}
  .dash-live i{animation-duration:1.2s !important;animation-iteration-count:infinite !important}
  }
/* -- business HUD: keep the impact loop animated even with reduced motion -- */
@media (prefers-reduced-motion:reduce){
  .biz-hud .ch-path{transition-duration:1.5s !important}
  .biz-hud .ch-area,.biz-hud .ch-dot,.biz-hud .ch-tooltip{transition-duration:.5s !important}
  .biz-hud .j-line{transition-duration:.6s !important}
  .biz-hud .j-seg{transition-duration:.35s !important}
  .biz-hud .fitem,.biz-hud .fbar i{transition-duration:.4s !important}
}
/* -- tour demo windows: keep the AI-generation loop animated even with reduced motion -- */
@media (prefers-reduced-motion:reduce){
  .demo-window .ds-line{animation-duration:1.6s !important;animation-iteration-count:infinite !important}
  .demo-window .dm-bars span{animation-duration:3.2s !important;animation-iteration-count:infinite !important}
  .demo-window .ds-eta i{animation-duration:1.2s !important;animation-iteration-count:infinite !important}
  .demo-window .dm-step{animation-duration:6s !important;animation-iteration-count:infinite !important}
  .demo-window .dm-step i::before{animation-duration:6s !important;animation-iteration-count:infinite !important}
  .demo-window .tb-avatar,.demo-window .fah-btn,.demo-window .tb-btn,.demo-window .ff-action,
  .demo-window .sandbox-tag,.demo-window .score-chip,.demo-window .roi-bar span{animation-iteration-count:infinite !important}
  .demo-window .tour-bubble{animation-duration:5s !important;animation-iteration-count:infinite !important}
  .demo-window .fah-title,.demo-window .ff-label,.demo-window .ff-field,.demo-window .hw-search,
  .demo-window .hw-link,.demo-window .roi-title,.demo-window .roi-row strong{animation-duration:2.6s !important;animation-iteration-count:infinite !important}
  .demo-window .ff-tip{animation-duration:2.4s !important;animation-iteration-count:infinite !important}
  .demo-window .sb-step.now{animation-duration:2.2s !important;animation-iteration-count:infinite !important}
  .demo-window .wt-step.now,.demo-window .sf-row.lit,.demo-window .sf-row.typing{animation-duration:2.2s !important;animation-iteration-count:infinite !important}
  .demo-window .sf-row.filled{animation-duration:.5s !important;animation-iteration-count:1 !important}
  .demo-window .sf-check{animation-duration:2.6s !important;animation-iteration-count:infinite !important}
  .demo-window .sf-cursor{animation-duration:.9s !important;animation-iteration-count:infinite !important}
  .demo-window .hw-caret{animation-duration:.9s !important;animation-iteration-count:infinite !important}
  .demo-window .hw-dots i{animation-duration:1s !important;animation-iteration-count:infinite !important}
  .demo-window .roi-note.show{animation-duration:2.4s !important;animation-iteration-count:infinite !important}
  .demo-window .ff-action.pulse{animation-duration:2.2s !important;animation-iteration-count:infinite !important}
  .demo-window .sf-cursor{animation-duration:1.1s !important;animation-iteration-count:infinite !important}
  .demo-window .wt-bar::after{animation-duration:6s !important;animation-iteration-count:infinite !important}
  .demo-window .app-bar{animation-duration:3s !important;animation-iteration-count:infinite !important}
  .demo-window .roi-bar span{animation-duration:3.6s !important;animation-iteration-count:infinite !important}
}

/* ============================================================
   (custom cursor system removed — native cursor restored)
   ============================================================ */

/* ============================================================
   LOGO MARQUEE
   ============================================================ */
.logos{padding:60px 0 76px;border-bottom:1px solid var(--border);text-align:center}
.logos-label{text-align:center;font-family:'Cambria Math',STIXGeneral,'Space Grotesk',serif;font-size:clamp(26px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;margin-bottom:40px;
  background:linear-gradient(180deg,#7C3AED,#DB2777);-webkit-background-clip:text;background-clip:text;color:transparent}
.marquee-row{overflow:hidden;margin-bottom:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 40s linear infinite}
.marquee-row.rev .marquee-track{animation:marquee 50s linear infinite reverse}
.marquee-row:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mlogo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:25px;color:var(--ink);opacity:.5;transition:opacity .2s,color .2s,transform .2s;white-space:nowrap;cursor:default}
.mlogo.dim{opacity:.26}
.mlogo:hover{opacity:1;color:var(--brand);transform:translateY(-2px)}
/* ---- Emblem grid wall (logos) ---- */
.logos-wallwrap{display:grid;grid-template-columns:repeat(6,1fr);gap:26px;max-width:1010px;margin:0 auto}
.logos-wallwrap .mlogo{display:flex;align-items:center;justify-content:center;position:relative;background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;height:70px;min-width:0;width:100%;padding:0 18px;font-size:15px;font-weight:700;color:var(--ink-soft);opacity:1;will-change:transform;transition:transform .25s,background .25s,box-shadow .25s,color .25s,border-color .25s;white-space:nowrap;cursor:default}
.logos-wallwrap .mlogo:hover{transform:translateY(-5px);color:var(--ink);border-color:color-mix(in srgb,var(--lgo,#7C3AED) 45%,var(--border));background:#fff;box-shadow:0 14px 34px color-mix(in srgb,var(--lgo,#7C3AED) 26%,transparent)}
.logos-wallwrap .mlogo.zoom{animation:logoZoom var(--dur,3s) ease-in-out var(--delay,0s) infinite}
@keyframes logoZoom{0%{transform:scale(1)}18%{transform:scale(1.22);z-index:2;color:var(--ink);background:#fff;border-color:var(--lgo,#7C3AED);box-shadow:0 24px 52px rgba(124,58,237,.28);opacity:1}52%{transform:scale(1.06)}100%{transform:scale(1)}}
@media(max-width:900px){.logos-wallwrap{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.logos-wallwrap{grid-template-columns:repeat(2,1fr)}.logos-wallwrap .mlogo{height:58px;padding:0 18px;font-size:14px}}

/* ============================================================
   VIVID DARK SECTIONS (problem, tour, app wall, stats, CTA)
   ============================================================ */
.dark-section{position:relative;background:var(--grad-vivid);color:var(--dark-ink);overflow:hidden}
.dark-section::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 420px at 85% 0%,rgba(251,146,60,.28),transparent 60%),radial-gradient(640px 420px at 8% 100%,rgba(6,182,212,.22),transparent 60%);pointer-events:none}
.dark-section .eyebrow{background:rgba(255,255,255,.14);box-shadow:none;border:1px solid rgba(255,255,255,.25)}
.dark-section .lead{color:var(--dark-ink-soft)}
.problem{padding:116px 0}
.problem-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;position:relative;z-index:1}
.problem-left h2{font-size:clamp(36px,4.4vw,54px);margin-bottom:22px}
.problem-left .lead{color:var(--dark-ink-soft)}
.problem-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative;z-index:1}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:32px;box-shadow:var(--shadow);transition:transform .3s var(--ease),border-color .3s,background .3s,box-shadow .3s}
.stat-card:hover{transform:translateY(-6px);border-color:rgba(124,58,237,.35);box-shadow:var(--shadow-lg)}
.dark-section .stat-card,.page-hero .stat-card{background:rgba(255,255,255,.08);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);box-shadow:none}
.dark-section .stat-card:hover,.page-hero .stat-card:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.12);box-shadow:none}
.stat-num{font-family:'Space Grotesk',sans-serif;font-size:52px;font-weight:700;line-height:1;margin-bottom:14px}
.stat-card p{color:var(--ink-soft);font-size:14.5px}
.dark-section .stat-card p,.page-hero .stat-card p{color:var(--dark-ink-soft)}
.spotlight{position:absolute;inset:0;pointer-events:none;opacity:.2;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(251,146,60,.7),transparent 40%)}

/* ============================================================
   PILLARS
   ============================================================ */
.pillars{padding:116px 0;position:relative}
.section-head{margin-bottom:60px}
.section-head h2{font-size:clamp(34px,4.4vw,54px);margin-bottom:18px;letter-spacing:-.03em}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pillar-rows{display:grid;gap:14px}
.pillar-row{display:grid;grid-template-columns:64px 1fr auto;gap:22px;align-items:center;background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:22px 26px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.pillar-row:hover{transform:translateX(8px);border-color:rgba(124,58,237,.4);box-shadow:var(--shadow-md)}
.pillar-row .icon{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--grad-brand);box-shadow:0 10px 24px rgba(124,58,237,.28)}
.pillar-row .mid h3{margin:0 0 6px;font-size:17px}
.pillar-row .mid p{margin:0;font-size:13.5px;line-height:1.55;color:#5A546E}
.pillar-row .mid .ai-chip{margin-bottom:6px}
.pillar-row .right{display:flex;flex-direction:column;align-items:flex-end;gap:12px;min-width:190px}
@media (max-width:820px){.pillar-row{grid-template-columns:56px 1fr;grid-template-rows:auto auto}.pillar-row .right{grid-column:2;flex-direction:row;align-items:center;gap:18px}}
@media (max-width:620px){.pillar-row{grid-template-columns:1fr;text-align:center}.pillar-row .icon{margin:0 auto}.pillar-row .right{grid-column:1;flex-direction:column;align-items:center}}
.pillar-card{position:relative;background:#fff;border:1.5px solid var(--border);border-radius:26px;padding:36px 28px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;display:flex;flex-direction:column;gap:14px}
.pillar-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.35)}
.pillar-card:nth-child(1){background:linear-gradient(180deg,#F5F3FF 0%,#fff 62%)}
.pillar-card:nth-child(2){background:linear-gradient(180deg,#EDFAFF 0%,#fff 62%)}
.pillar-card:nth-child(3){background:linear-gradient(180deg,#FDF1F7 0%,#fff 62%)}
.pillar-card:nth-child(4){background:linear-gradient(180deg,#FFF4ED 0%,#fff 62%)}
.pillar-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;box-shadow:0 10px 24px rgba(124,58,237,.3)}
.pillar-card:nth-child(1) .pillar-icon{background:var(--grad-grape)}
.pillar-card:nth-child(2) .pillar-icon{background:var(--grad-sea)}
.pillar-card:nth-child(3) .pillar-icon{background:var(--grad-candy)}
.pillar-card:nth-child(4) .pillar-icon{background:var(--grad-sun)}
.pillar-card h3{font-size:21px;margin-top:6px}
.pillar-card p{color:var(--ink-soft);font-size:15px;flex:1}
.pillar-card ul{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.pillar-card ul li{font-size:14px;color:var(--ink-soft);display:flex;gap:8px}
.pillar-card ul li::before{content:"✓";color:var(--success);font-weight:800}
.pillar-card.ai{border-color:rgba(219,39,119,.4);background:linear-gradient(180deg,#FDF1F7 0%,#fff 65%)}
.ai-chip{display:inline-block;align-self:flex-start;background:var(--grad-ai);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;box-shadow:0 5px 14px rgba(6,182,212,.35)}
.metric-chip{display:inline-block;align-self:flex-start;background:rgba(5,150,105,.12);color:var(--success);font-size:12.5px;font-weight:800;padding:6px 13px;border-radius:999px}

/* ============================================================
   TOUR (vivid, tabs)
   ============================================================ */
.tour{padding:0;height:220vh;overflow:visible}
.tour-inner{display:flex;flex-direction:column;gap:28px;position:sticky;top:0;height:100vh;z-index:1;padding:56px 0 48px}
.tour-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center;flex:1;min-height:0}
.tour-label{margin-bottom:0;text-align:center}
.tour-label h2{font-size:clamp(32px,3.8vw,46px)}
.tour-tabs{display:flex;flex-direction:column;gap:8px}
.tour-tab{position:relative;text-align:left;padding:22px 20px 22px 40px;border-radius:18px;transition:background .3s;overflow:hidden}
.tour-tab .tp-bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#FDBA74,#F9A8D4);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.tour-tab.active{background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2)}
.tour-tab.active .tp-bar{transform:scaleY(1)}
.tour-tab.active .tp-title{color:#fff}
.tour-tab.active .tp-bar.playing{animation:tab-progress 5s linear forwards}
@keyframes tab-progress{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.tp-title{display:block;font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;color:rgba(255,255,255,.72);transition:color .3s}
.tp-desc{display:block;font-size:14px;color:rgba(255,255,255,.68);margin-top:6px;max-width:430px}
.tour-panels{position:static;min-width:0}
.tour-panel{display:none;animation:panel-in .45s var(--ease)}
.tour-panel.active{display:block}
@keyframes panel-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.demo-window{background:rgba(255,255,255,.08);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:24px;height:460px;display:flex;gap:20px;box-shadow:0 30px 70px rgba(23,18,51,.3)}
.demo-side{width:40%;display:flex;flex-direction:column;gap:14px;justify-content:center}
.ds-chip{align-self:flex-start;background:var(--grad-ai);color:#fff;font-size:12px;font-weight:800;padding:6px 13px;border-radius:999px}
.ds-prompt{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:14px;font-size:13.5px;color:#fff}
.ds-result{background:rgba(23,18,51,.35);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.ds-output{font-size:12.5px;line-height:1.5;color:#C4B5FD;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-output i{font-style:normal;color:#6EE7B7}
.ds-line{height:9px;border-radius:4px;background:rgba(255,255,255,.2);animation:ds-shimmer 1.6s ease-in-out infinite}
.ds-line:nth-child(2){animation-delay:.12s}.ds-line:nth-child(3){animation-delay:.24s}
.ds-line:nth-child(4){animation-delay:.36s}.ds-line:nth-child(5){animation-delay:.48s}
.ds-line.short{width:62%}
@keyframes ds-shimmer{0%,100%{opacity:.35;transform:scaleX(.65);transform-origin:left}50%{opacity:1;transform:scaleX(1)}}
.ds-eta{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.04em}
.ds-eta i{width:8px;height:8px;border-radius:50%;background:#67E8F9;animation:ds-pulse 1.2s ease-in-out infinite}
@keyframes ds-pulse{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}}
.demo-main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px}
.dm-bars{display:flex;align-items:flex-end;gap:10px;height:140px}
.dm-bars span{flex:1;border-radius:9px 9px 0 0;background:linear-gradient(180deg,#FDBA74,#F472B6 60%,#A78BFA);animation:bar-grow 3.2s var(--ease-expo) infinite}
.dm-bars span:nth-child(2){animation-delay:.4s}.dm-bars span:nth-child(3){animation-delay:.8s}
.dm-bars span:nth-child(4){animation-delay:1.2s}.dm-bars span:nth-child(5){animation-delay:1.6s}
.dm-bars span:nth-child(6){animation-delay:2.0s}
@keyframes bar-grow{0%{transform:scaleY(0)}55%{transform:scaleY(1)}72%{transform:scaleY(.55)}100%{transform:scaleY(1)}}
.dm-steps{display:flex;flex-direction:column;gap:9px}
.dm-step{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dark-ink-soft);opacity:.45;animation:dm-step 6s ease-in-out infinite}
.dm-step:nth-child(2){animation-delay:1.5s}.dm-step:nth-child(3){animation-delay:3s}
.dm-step i{flex:none;width:17px;height:17px;border-radius:50%;border:2px solid rgba(255,255,255,.4);display:grid;place-items:center}
.dm-step i::before{content:"✓";font-size:10px;font-weight:800;line-height:1;color:#6EE7B7;opacity:0;transform:scale(.3);animation:dm-chk 6s ease-in-out infinite}
.dm-step:nth-child(2) i::before{animation-delay:1.5s}.dm-step:nth-child(3) i::before{animation-delay:3s}
@keyframes dm-step{0%,10%{opacity:.45}18%,68%{opacity:1}82%,100%{opacity:.45}}
@keyframes dm-chk{0%,12%{opacity:0;transform:scale(.3)}24%,60%{opacity:1;transform:scale(1)}74%,100%{opacity:0;transform:scale(1)}}
.dm-stats{display:flex;flex-wrap:wrap;gap:8px}
.dm-stat{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:11px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--dark-ink-soft)}
.dm-stat b{color:#fff;font-family:'JetBrains Mono',monospace;font-weight:700}
.demo-main p{color:var(--dark-ink-soft);font-size:14px}
.sandbox-tag{display:inline-block;align-self:flex-start;background:rgba(251,191,36,.18);color:#FDE68A;font-size:12px;font-weight:800;padding:6px 13px;border-radius:999px;letter-spacing:.06em;animation:tag-blink 3.2s ease-in-out infinite}
.score-chip{align-self:flex-start;background:rgba(16,185,129,.18);color:#6EE7B7;font-size:14px;font-weight:700;padding:9px 15px;border-radius:13px;animation:score-pulse 2.8s ease-in-out infinite}
@keyframes tag-blink{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.3)}50%{box-shadow:0 0 12px 0 rgba(251,191,36,.35)}}
@keyframes score-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.sb-sim{display:flex;flex-direction:column;gap:8px}
.sb-step{display:flex;align-items:center;gap:9px;font-size:12.5px;color:rgba(255,255,255,.45);padding:7px 11px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid transparent}
.sb-step>span:nth-child(2){flex:1}
.sb-step.done{color:#6EE7B7;background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.25)}
.sb-step.now{color:#fff;background:rgba(124,58,237,.16);border-color:rgba(139,92,246,.45);animation:step-now 2.2s ease-in-out infinite}
@keyframes step-now{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.35)}50%{box-shadow:0 0 14px 0 rgba(139,92,246,.3)}}
.sandbox-window{background:rgba(23,18,51,.35);border:1px solid rgba(255,255,255,.18);border-radius:16px;overflow:hidden}
.sw-top{display:flex;gap:4px;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.14);padding:8px 10px}
.sw-tab{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);padding:6px 12px;border-radius:8px}
.sw-tab.active{background:rgba(139,92,246,.25);color:#fff}
.sw-body{display:flex;flex-direction:column;gap:10px;padding:16px}
.sw-field{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.55);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 13px}
.sw-field strong{color:#fff;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600}
.sw-field strong.sw-ok{color:#6EE7B7}
.help-widget{background:rgba(23,18,51,.35);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px}
.hw-search{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:12px 14px;font-size:14px;color:#fff;animation:card-flicker 2.6s ease-in-out infinite;min-height:24px}
.hw-caret{display:inline-block;width:2px;height:15px;background:#67E8F9;margin-left:3px;vertical-align:text-bottom;animation:cursor-blink .9s steps(2) infinite}
.hw-dots{display:none;gap:5px;align-items:center;padding:0 2px}
.hw-dots.show{display:flex}
.hw-dots i{width:7px;height:7px;border-radius:50%;background:#67E8F9;animation:dot-bounce 1s ease-in-out infinite}
.hw-dots i:nth-child(2){animation-delay:.2s}.hw-dots i:nth-child(3){animation-delay:.4s}
@keyframes dot-bounce{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-5px);opacity:1}}
.hw-answer{font-size:14px;color:var(--dark-ink-soft);line-height:1.5;display:none}
.hw-answer.show{display:block;animation:panel-in .4s both}
.hw-answer strong{color:#fff}
.hw-links{display:flex;flex-direction:column;gap:8px;display:none}
.hw-links.show{display:flex;animation:panel-in .4s both}
.hw-answer{font-size:14px;color:var(--dark-ink-soft);line-height:1.5}
.hw-answer strong{color:#fff}
.hw-links{display:flex;flex-direction:column;gap:8px}
.hw-link{font-size:13px;color:#67E8F9;font-weight:600;display:inline-block;animation:ff-flicker 2.6s ease-in-out infinite}
.hw-links .hw-link:nth-child(2){animation-delay:.4s}
@keyframes card-flicker{0%,100%{opacity:.8}50%{opacity:1}}
.roi-box{background:rgba(23,18,51,.35);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:12px}
.roi-title{font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.6);animation:card-flicker 2.8s ease-in-out infinite}
.roi-note{font-size:11.5px;color:#6EE7B7;font-weight:600;opacity:0;transition:opacity .4s}
.roi-note.show{opacity:1;animation:ff-flicker 2.4s ease-in-out infinite}
.roi-row{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:8px;color:var(--dark-ink-soft)}
.roi-row strong{color:#fff;font-family:'JetBrains Mono',monospace;animation:ff-flicker 3s ease-in-out infinite}
.roi-row:nth-of-type(3) strong{animation-delay:.35s}
.roi-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.roi-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#FDBA74,#F472B6);animation:bar-fill-loop 3.6s var(--ease-expo) infinite}
@keyframes bar-fill{from{width:0}}
@keyframes bar-fill-loop{0%{width:0}55%{width:82%}88%{width:78%}100%{width:0}}

/* ============================================================
   AI SECTION
   ============================================================ */
.ai-section{position:relative;padding:116px 0;overflow:hidden}
.ai-section::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 90% 10%,rgba(6,182,212,.1),transparent 60%),radial-gradient(600px 380px at 5% 90%,rgba(124,58,237,.1),transparent 60%);pointer-events:none}
.ai-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:48px;position:relative}
.ai-card{position:relative;background:#fff;border:1.5px solid var(--border);border-radius:24px;padding:32px 24px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.ai-card:nth-child(1){background:linear-gradient(180deg,#EDFAFF 0%,#fff 60%)}
.ai-card:nth-child(2){background:linear-gradient(180deg,#F5F3FF 0%,#fff 60%)}
.ai-card:nth-child(3){background:linear-gradient(180deg,#FDF1F7 0%,#fff 60%)}
.ai-card:nth-child(4){background:linear-gradient(180deg,#FFF4ED 0%,#fff 60%)}
.ai-card:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg);border-color:rgba(6,182,212,.4)}
.ai-card .ai-chip{position:absolute;top:18px;right:18px}
.ai-card h3{font-size:19px;margin:14px 0 10px}
.ai-card p{color:var(--ink-soft);font-size:14.5px;margin-bottom:16px}
.ai-cta-banner{background:var(--grad-ai);border-radius:28px;padding:48px 52px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#fff;box-shadow:0 26px 64px rgba(6,182,212,.4);position:relative;overflow:hidden}
.ai-cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 240px at 88% 20%,rgba(255,255,255,.25),transparent 60%);pointer-events:none}
.ai-cta-banner h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:8px}
.ai-cta-banner p{font-size:15px;opacity:.94}
.ai-cta-banner .btn-primary{background:#fff;color:#0E7490;box-shadow:0 10px 26px rgba(23,18,51,.25)}
.ai-cta-banner .btn-primary:hover{background:var(--bg-sky)}

/* ============================================================
   USE CASES
   ============================================================ */
.usecases{padding:116px 0;background:var(--bg-soft);position:relative;overflow:hidden}
.use-flip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;perspective:1200px}
.use-flip{height:288px}
.use-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.use-flip:hover .use-flip-inner,.use-flip:focus-within .use-flip-inner{transform:rotateY(180deg)}
.use-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;padding:26px 24px;display:flex;flex-direction:column}
.use-front{background:#fff;border:1.5px solid var(--border)}
.use-fnum{font-size:42px;font-weight:900;letter-spacing:-.04em;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:auto}
.use-front h3{font-size:19px;margin-bottom:8px}
.use-front p{font-size:12.5px;line-height:1.55;color:#5A546E}
.use-back{background:linear-gradient(150deg,#241A4D,#3B2470);color:#fff;transform:rotateY(180deg)}
.use-back h3{font-size:17px;margin-bottom:10px}
.use-back .metric-chip{margin-bottom:10px}
.use-back ul{margin-bottom:14px;padding-left:18px;display:grid;gap:7px}
.use-back li{font-size:12.5px;color:#E4E0F5}
.use-back li::marker{color:#34D399}
.use-back .text-link{color:#A78BFA;margin-top:auto}
@media (prefers-reduced-motion:reduce){.use-flip-inner{transition-duration:.8s !important}}
@media (max-width:960px){.use-flip-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.use-flip-grid{grid-template-columns:1fr}.use-flip{height:310px}}
.usecases::before{content:"";position:absolute;inset:0;background:radial-gradient(760px 460px at 100% 0%,rgba(219,39,119,.09),transparent 60%),radial-gradient(680px 420px at 0% 100%,rgba(124,58,237,.1),transparent 60%);pointer-events:none}
.usecase-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;position:relative}
.sticky-head{position:sticky;top:120px}
.sticky-head h2{font-size:clamp(34px,4.4vw,52px);margin-bottom:24px}
.use-nav{display:flex;gap:8px;margin-top:28px}
.use-dot{width:10px;height:10px;border-radius:50%;background:rgba(124,58,237,.25);transition:background .3s,transform .3s}
.use-dot.active{background:var(--brand-2);transform:scale(1.35)}
.usecase-stack{display:flex;flex-direction:column;gap:22px}
.use-card{background:#fff;border:1.5px solid var(--border);border-radius:26px;padding:36px 34px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;box-shadow:var(--shadow)}
.use-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(219,39,119,.35)}
.use-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.use-num{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.use-card h3{font-size:25px;margin-bottom:10px}
.use-card p{color:var(--ink-soft);font-size:15px;margin-bottom:16px}
.use-card ul{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.use-card ul li{font-size:13px;font-weight:600;background:var(--bg-soft);border:1px solid var(--border);border-radius:999px;padding:6px 13px;color:var(--ink-soft)}

/* ============================================================
   APP WALL (vivid)
   ============================================================ */
.app-wall{padding:116px 0}
.app-marquee{overflow:hidden;margin:16px 0 36px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);position:relative;z-index:1}
.app-track{display:flex;gap:18px;width:max-content;animation:marquee 46s linear infinite}
.app-marquee:hover .app-track{animation-play-state:paused}
.app-logo-box{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.09);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:15px 22px;font-size:15px;font-weight:700;color:#fff;opacity:.9;transition:opacity .25s,transform .25s,border-color .25s,background .25s;white-space:nowrap}
.app-logo-box .app-logo{width:34px;height:34px;font-size:11px}
.app-logo-box:hover{opacity:1;transform:translateY(-3px);border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.15)}
.featured-apps{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;position:relative;z-index:1}
.featured-apps a{color:rgba(255,255,255,.85);font-size:14.5px;font-weight:600;padding:11px 20px;border:1.5px solid rgba(255,255,255,.28);border-radius:999px;transition:color .2s,border-color .2s,transform .2s,background .2s}
.featured-apps a span{display:inline-block;transition:transform .2s}
.featured-apps a:hover{color:#fff;border-color:#fff;transform:translateY(-2px);background:rgba(255,255,255,.1)}
.featured-apps a:hover span{transform:translateX(3px)}
.featured-apps a.all{color:#fff;background:var(--grad-candy);border:none;font-weight:700;box-shadow:0 10px 26px rgba(236,72,153,.4)}

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industries{padding:116px 0}
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ind-card{position:relative;background:#fff;border:1.5px solid var(--border);border-radius:24px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;display:flex;flex-direction:column}
.ind-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.35)}
.ind-img{height:112px;display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;overflow:hidden}
.ind-glyph{filter:drop-shadow(0 6px 14px rgba(23,18,51,.28));transition:transform .4s var(--ease)}
.ind-card:hover .ind-glyph{transform:scale(1.16) rotate(-5deg)}
.ind-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.ind-body .metric-chip{align-self:flex-start}
.ind-body h3{font-size:19px}
.ind-body p{color:var(--ink-soft);font-size:14px;flex:1}
.grad-card{background:var(--grad-brand);border:none;align-items:center;justify-content:center;box-shadow:var(--shadow-pop)}
.grad-card .ind-body{justify-content:center;align-items:center;text-align:center}
.grad-card h3{color:#fff;font-size:22px}
.grad-card p{color:rgba(255,255,255,.92)}
.ind-card.grad-card:hover{transform:translateY(-7px) scale(1.02);box-shadow:0 28px 70px rgba(219,39,119,.45)}

/* ============================================================
   TESTIMONIALS (liquid cards)
   ============================================================ */
.testimonials{padding:116px 0;background:var(--bg-rose);position:relative;overflow:hidden}
.testimonials::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 420px at 10% 0%,rgba(236,72,153,.1),transparent 60%),radial-gradient(640px 400px at 95% 100%,rgba(124,58,237,.1),transparent 60%);pointer-events:none}
.liquid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;position:relative;z-index:1}
.liquid-card{position:relative;padding:32px 30px;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.liquid-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.35)}
.liquid-card .stars{font-size:15px;letter-spacing:4px;color:#F59E0B;margin-bottom:16px;line-height:1}
.liquid-card .quote{font-size:1rem;line-height:1.65;color:var(--ink-soft);margin-bottom:24px}
.liquid-card .author{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--border)}
.liquid-card .avatar{width:44px;height:44px;border-radius:50%;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.95rem;flex:none}
.liquid-card .author-info{flex:1;min-width:0}
.liquid-card .author-name{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.95rem;color:var(--ink)}
.liquid-card .author-role{color:var(--ink-faint);font-size:.8rem;margin-top:2px}
.liquid-card .live-dot{width:10px;height:10px;border-radius:50%;background:#22D3EE;box-shadow:0 0 15px #22D3EE;animation:pulseDot 2s ease infinite;flex:none}
.li-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;background:#fff;box-shadow:0 1px 3px rgba(10,102,194,.25);flex:none}

/* ============================================================
   STATS BAND
   ============================================================ */
.stats-band{padding:96px 0}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;text-align:center;position:relative;z-index:1}
.stat-big{font-family:'Space Grotesk',sans-serif;font-size:clamp(42px,5vw,62px);font-weight:700;line-height:1;margin-bottom:12px}
.stat p{color:var(--dark-ink-soft);font-size:14px;max-width:200px;margin:0 auto}

/* ============================================================
   AWARDS
   ============================================================ */
.awards{padding:116px 0}
.award-row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-bottom:28px}
.award-badge{display:flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(180deg,var(--bg-soft),#fff);border:1.5px solid var(--border);border-radius:20px;padding:24px 30px;min-width:164px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.award-badge:hover{transform:translateY(-6px) rotate(1deg);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.4)}
.aw-logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.01em}
.award-badge em{font-style:normal;font-size:12px;color:var(--ink-faint);text-align:center}
.award-row-2{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.award-trophy{font-size:14px;font-weight:700;color:var(--ink-soft);border:1.5px solid var(--border);border-radius:999px;padding:11px 22px;transition:transform .2s,border-color .2s,color .2s;background:#fff}
.award-trophy:hover{transform:translateY(-2px);border-color:var(--brand-2);color:var(--brand-2)}

/* ============================================================
   SECURITY STRIP
   ============================================================ */
.security{padding:80px 0}
.sec-inner{display:flex;justify-content:space-between;align-items:center;gap:48px;flex-wrap:wrap;position:relative;z-index:1}
.sec-left h3{font-size:clamp(26px,3vw,36px);margin-bottom:12px}
.sec-left p{color:var(--dark-ink-soft);font-size:15px;max-width:480px}
.sec-badges{display:flex;flex-wrap:wrap;gap:12px;max-width:560px}
.sec-badge{font-size:13px;font-weight:700;color:#fff;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);backdrop-filter:blur(6px);border-radius:999px;padding:10px 18px;transition:border-color .2s,background .2s,transform .2s}
.sec-badge:hover{border-color:#fff;background:rgba(255,255,255,.16);transform:translateY(-2px)}

/* ============================================================
   RESOURCES
   ============================================================ */
.resources{padding:116px 0}
.resources .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.resource-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:22px}
.res-card{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--border);border-radius:24px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.res-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.35)}
.res-thumb{position:relative;height:172px;display:flex;align-items:center;justify-content:center;font-size:54px;color:#fff}
.res-thumb.ebook{background:var(--grad-brand)}
.res-thumb.case{background:var(--grad-sea)}
.res-thumb.webinar{background:var(--grad-sun)}
.res-tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.res-card h3{font-size:17px;line-height:1.4;padding:20px 22px 10px;flex:1}
.res-meta{font-size:13px;color:var(--ink-faint);padding:0 22px 22px}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{padding:136px 0;text-align:center}
.final-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(800px 460px at 50% 115%,rgba(251,146,60,.3),transparent 62%);pointer-events:none}
.final-inner{position:relative;z-index:1}
.final-cta h2{font-size:clamp(38px,5.4vw,66px);margin-bottom:18px;letter-spacing:-.03em}
.final-cta .lead{color:var(--dark-ink-soft);margin:0 auto 38px}
.final-cta .hero-cta{justify-content:center;margin-bottom:22px}
.final-cta .btn-primary{background:#fff;color:var(--brand);box-shadow:0 14px 36px rgba(23,18,51,.35)}
.final-cta .btn-primary:hover{background:var(--bg-soft)}
.small{color:rgba(255,255,255,.72);font-size:14px}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{padding:84px 0 36px;background:linear-gradient(180deg,#1E1B4B 0%,#171233 100%)}
.site-footer::before{background:radial-gradient(700px 380px at 85% 0%,rgba(124,58,237,.25),transparent 60%),radial-gradient(560px 340px at 8% 100%,rgba(219,39,119,.16),transparent 60%)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr 1.4fr;gap:36px;margin-bottom:56px;position:relative;z-index:1}
.footer-brand .logo{margin-bottom:14px}
.footer-brand .logo-text{color:#fff}
.footer-tag{font-family:'Space Grotesk',sans-serif;background:linear-gradient(100deg,#C4B5FD,#F9A8D4 55%,#FDBA74);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;font-size:15px;margin-bottom:10px}
.footer-desc{color:rgba(255,255,255,.66);font-size:14px;max-width:260px;margin-bottom:20px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:38px;height:38px;border-radius:11px;border:1.5px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(255,255,255,.75);transition:background .2s,color .2s,border-color .2s,transform .2s}
.footer-social a:hover{background:var(--grad-brand);color:#fff;border-color:transparent;transform:translateY(-3px)}
.f-head{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:16px}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14.5px;color:rgba(255,255,255,.72);transition:color .2s,transform .2s;display:inline-flex;align-items:center;gap:4px}
.footer-col a:hover{color:#fff;transform:translateX(3px)}
.footer-news p{color:rgba(255,255,255,.66);font-size:14px;margin-bottom:14px}
.news-form{display:flex;gap:8px}
.news-form input{flex:1;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);border-radius:999px;padding:11px 16px;color:#fff;font-size:14px;outline:none}
.news-form input::placeholder{color:rgba(255,255,255,.45)}
.news-form input:focus{border-color:#F9A8D4}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);padding-top:26px;font-size:13.5px;color:rgba(255,255,255,.5);position:relative;z-index:1}
.footer-legal{display:flex;gap:20px}
.footer-legal a:hover{color:#fff}

/* ---------- Cookie card ---------- */
.cookie-card{position:fixed;bottom:20px;left:20px;z-index:950;background:#fff;border:1.5px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);padding:18px 20px;max-width:360px;font-size:13.5px;color:var(--ink-soft);display:flex;flex-direction:column;gap:14px;transform:translateY(140%);transition:transform .5s var(--ease)}
.cookie-card.show{transform:translateY(0)}
.cookie-card a{color:var(--brand);font-weight:700}
.cookie-card > div{display:flex;gap:10px}

/* ---------- Back to top ---------- */
.to-top{position:fixed;bottom:22px;right:22px;z-index:940;width:48px;height:48px;border-radius:50%;background:var(--grad-brand);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px rgba(219,39,119,.45);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-3px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .main-nav{display:none}
  .hamburger{display:flex}
  .header-actions .signin{display:none}
  .pillar-grid{grid-template-columns:1fr 1fr}
  .ai-grid{grid-template-columns:1fr 1fr}
  .industry-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .tour{height:auto;padding:96px 0}
  .tour-inner{grid-template-columns:1fr;gap:36px;position:static;height:auto;align-items:start}
  .tour-grid{grid-template-columns:1fr;gap:36px}
.tour-panels{position:static;min-width:0}
  .problem-inner{grid-template-columns:1fr;gap:44px}
  .usecase-inner{grid-template-columns:1fr;gap:44px}
  .sticky-head{position:static}
  .hero-inner{grid-template-columns:1fr;gap:48px}
  .float-card.fc-1{left:4px}
  .float-card.fc-2{right:4px}
  .resource-grid{grid-template-columns:1fr 1fr}
  .res-card.featured{grid-column:1/-1}
}
@media (max-width:720px){
  .hero{padding:52px 0 68px}
  .hero-h1{font-size:44px}
  .pillar-grid,.ai-grid,.industry-grid,.stats-grid,.resource-grid{grid-template-columns:1fr}
  .stats-grid{gap:36px}
  .problem-inner{grid-template-columns:1fr;gap:44px}
  .problem-stats{grid-template-columns:1fr 1fr;gap:14px}
  .stat-card{padding:24px}
  .stat-num{font-size:36px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-news{grid-column:1/-1}
  .news-form input{flex:1;min-width:0}
  .announce-bar{font-size:12.5px;padding:10px 36px}
  .tour-tab{padding-left:34px}
  .demo-window{flex-direction:column}
  .demo-side{width:100%}
  .ai-cta-banner{flex-direction:column;text-align:center;padding:34px}
  .featured-apps a{font-size:13px}
  .mega-panel{display:none}
}

/* ============================================================
   ACTIVE NAV
   ============================================================ */
.nav-link.is-active{color:var(--brand);background:var(--bg-tint)}

/* ============================================================
   PAGE HERO (subpages) — vivid gradient + Three.js canvas
   ============================================================ */
.page-hero{position:relative;background:var(--grad-vivid-2);color:var(--dark-ink);padding:150px 0 100px;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(760px 440px at 88% 0%,rgba(251,146,60,.26),transparent 60%),radial-gradient(640px 400px at 5% 100%,rgba(6,182,212,.2),transparent 60%);pointer-events:none}
.page-hero canvas.bg-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.page-hero .spotlight{position:absolute;inset:0;pointer-events:none;opacity:.2;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(251,146,60,.75),transparent 40%)}
.page-hero-inner{position:relative;z-index:1;max-width:840px}
.page-hero .eyebrow{background:rgba(255,255,255,.14);box-shadow:none;border:1px solid rgba(255,255,255,.25)}
.page-hero h1{font-size:clamp(40px,5.6vw,68px);margin-bottom:20px;letter-spacing:-.03em}
.page-hero .lead{color:var(--dark-ink-soft)}
.page-hero .hero-cta{margin-top:34px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:rgba(255,255,255,.55);margin-bottom:22px}
.breadcrumb a{color:rgba(255,255,255,.8);transition:color .2s}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{opacity:.5}
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-chips .metric-chip{background:rgba(16,185,129,.2);color:#6EE7B7}
.page-hero .app-hero-logo{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:18px;font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;color:#fff;margin-bottom:22px;box-shadow:0 14px 44px rgba(23,18,51,.45)}
.page-hero .ind-hero-glyph{font-size:58px;margin-bottom:18px;display:block;filter:drop-shadow(0 10px 26px rgba(23,18,51,.45))}

/* ============================================================
   GENERIC SUBPAGE SECTIONS
   ============================================================ */
.section{padding:100px 0}
.section.tinted{background:var(--bg-soft)}
.section.dark{background:var(--grad-vivid);color:var(--dark-ink)}
.section.dark .lead{color:var(--dark-ink-soft)}
.section-head h2{font-size:clamp(32px,4vw,48px);letter-spacing:-.03em}

/* Split feature rows (alternating) */
.split-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:60px 0}
.split-row + .split-row{border-top:1.5px solid var(--border)}
.split-row.flip .split-copy{order:2}
.split-copy h3{font-size:clamp(25px,2.8vw,34px);margin-bottom:14px}
.split-copy p{color:var(--ink-soft);font-size:16.5px;margin-bottom:18px}
.split-copy ul{display:flex;flex-direction:column;gap:10px}
.split-copy ul li{display:flex;gap:10px;color:var(--ink-soft);font-size:15px}
.split-copy ul li::before{content:"✓";color:var(--success);font-weight:800}
.split-visual{position:relative;border-radius:26px;min-height:320px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1.5px solid var(--border);box-shadow:var(--shadow)}
.split-visual .sv-emoji{font-size:92px;filter:drop-shadow(0 14px 32px rgba(23,18,51,.22))}
.split-visual.grad-1{background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(219,39,119,.2))}
.split-visual.grad-2{background:linear-gradient(135deg,rgba(6,182,212,.22),rgba(99,102,241,.2))}
.split-visual.grad-3{background:linear-gradient(135deg,rgba(16,185,129,.22),rgba(6,182,212,.2))}
.split-visual.grad-4{background:linear-gradient(135deg,rgba(245,158,11,.24),rgba(236,72,153,.22))}
.split-visual.dark-vis{background:var(--grad-vivid-2);border-color:transparent}

/* Feature card grids (reusable) */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.feature-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.feature-card{background:#fff;border:1.5px solid var(--border);border-radius:24px;padding:32px 28px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.feature-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.35)}
.feature-card .f-icon{width:52px;height:52px;border-radius:15px;background:var(--grad-grape);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px;box-shadow:0 8px 20px rgba(124,58,237,.3)}
.feature-card:nth-child(3n+2) .f-icon{background:var(--grad-candy);box-shadow:0 8px 20px rgba(236,72,153,.3)}
.feature-card:nth-child(3n) .f-icon{background:var(--grad-sea);box-shadow:0 8px 20px rgba(6,182,212,.3)}
.feature-card h3{font-size:19px;margin-bottom:10px}
.feature-card p{color:var(--ink-soft);font-size:14.5px}

/* Steps / timeline */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.steps.cols-3{grid-template-columns:repeat(3,1fr)}
.step-card{position:relative;background:#fff;border:1.5px solid var(--border);border-radius:24px;padding:32px 28px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.step-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:rgba(219,39,119,.35)}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--grad-brand);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;margin-bottom:16px;box-shadow:0 8px 20px rgba(219,39,119,.35)}
.step-card h3{font-size:18px;margin-bottom:8px}
.step-card p{color:var(--ink-soft);font-size:14.5px}

/* Metric band (light) */
.metric-band{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.metric-band .stat-big{font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,4.2vw,54px);font-weight:700;line-height:1;margin-bottom:10px;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.metric-band p{color:var(--ink-soft);font-size:14px}

/* Big quote / case card */
.case-card{display:grid;grid-template-columns:1.2fr .8fr;gap:0;background:#fff;border:1.5px solid var(--border);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.case-card .case-quote{padding:50px}
.case-card blockquote{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,2.2vw,27px);line-height:1.38;font-weight:600;margin-bottom:24px}
.case-card .case-who{display:flex;align-items:center;gap:14px}
.case-card .case-who strong{display:block}
.case-card .case-who em{font-style:normal;color:var(--ink-faint);font-size:14px}
.case-card .case-side{background:var(--grad-brand);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:46px}
.case-card .case-side .big-stat{font-family:'Space Grotesk',sans-serif;font-size:46px;font-weight:700}
.case-card .case-side p{font-size:14.5px;opacity:.94}

/* Related pills */
.related-pills{display:flex;flex-wrap:wrap;gap:12px}
.related-pills a{border:1.5px solid var(--border);border-radius:999px;padding:12px 22px;font-size:14.5px;font-weight:600;color:var(--ink-soft);transition:all .2s;background:#fff}
.related-pills a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}

/* CTA band (light variant) */
.cta-band{background:var(--grad-brand);border-radius:32px;padding:68px 56px;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-pop)}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 260px at 12% 0%,rgba(255,255,255,.22),transparent 60%),radial-gradient(420px 260px at 90% 100%,rgba(255,255,255,.16),transparent 60%);pointer-events:none}
.cta-band h2{font-size:clamp(30px,3.8vw,46px);margin-bottom:14px}
.cta-band p{font-size:17px;opacity:.95;margin-bottom:32px}
.cta-band .btn-primary{background:#fff;color:var(--brand);box-shadow:0 12px 30px rgba(23,18,51,.3)}
.cta-band .btn-primary:hover{background:var(--bg-soft)}
.cta-band .btn-ghost{border-color:rgba(255,255,255,.55)}

/* ============================================================
   TABLES (pricing comparison, compare pages)
   ============================================================ */
.data-table{width:100%;border-collapse:collapse;background:#fff;border:1.5px solid var(--border);border-radius:22px;overflow:hidden;font-size:15px}
.data-table-wrap{overflow-x:auto;border-radius:22px;box-shadow:var(--shadow)}
.data-table th,.data-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--border)}
.data-table thead th{background:var(--bg-soft);font-family:'Space Grotesk',sans-serif;font-size:15px}
.data-table thead th.us{background:var(--grad-brand);color:#fff}
.data-table td.us{background:rgba(124,58,237,.07);font-weight:700}
.data-table .yes{color:var(--success);font-weight:800}
.data-table .no{color:#E11D48;font-weight:800}
.data-table .partial{color:var(--warning);font-weight:800}
.data-table tbody tr:hover{background:var(--bg-soft)}
.data-table tbody tr:last-child td{border-bottom:none}

/* ============================================================
   FORMS (book demo, contact)
   ============================================================ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--border);border-radius:14px;padding:13px 16px;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(124,58,237,.14)}
.field textarea{min-height:120px;resize:vertical}
.form-note{font-size:13px;color:var(--ink-faint);margin-top:14px}
.form-panel{background:#fff;border:1.5px solid var(--border);border-radius:28px;box-shadow:var(--shadow-lg);padding:46px}
.proof-rail{display:flex;flex-direction:column;gap:16px}
.proof-item{display:flex;gap:14px;align-items:flex-start;background:var(--bg-soft);border:1.5px solid var(--border);border-radius:18px;padding:18px}
.proof-item .p-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:74px}
.proof-item p{font-size:14px;color:var(--ink-soft)}

/* ============================================================
   FILTER CHIPS + SEARCH (integrations, resources)
   ============================================================ */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:38px}
.filter-chip{border:1.5px solid var(--border);background:#fff;border-radius:999px;padding:10px 20px;font-size:14px;font-weight:600;color:var(--ink-soft);transition:all .2s}
.filter-chip:hover{border-color:var(--brand);color:var(--brand)}
.filter-chip.active{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(219,39,119,.35)}
.search-input{position:relative;margin-left:auto}
.search-input input{border:1.5px solid var(--border);border-radius:999px;padding:10px 18px 10px 42px;font-size:14.5px;width:250px;outline:none;transition:border-color .2s,box-shadow .2s;background:#fff}
.search-input input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(124,58,237,.14)}
.search-input::before{content:"🔍";position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.6}

.int-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.int-card{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:18px 20px;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.int-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(124,58,237,.45)}
.int-card .app-logo{width:40px;height:40px;font-size:12px;flex-shrink:0}
.int-card strong{display:block;font-size:15px}
.int-card em{font-style:normal;font-size:12.5px;color:var(--ink-faint)}
.int-card .pop{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(217,119,6,.14);color:var(--warning);padding:4px 10px;border-radius:999px}

/* ============================================================
   ACCORDION (FAQ)
   ============================================================ */
.acc-list{display:flex;flex-direction:column;gap:12px;max-width:860px;margin:0 auto}
.acc-item{background:#fff;border:1.5px solid var(--border);border-radius:18px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.acc-item.open{border-color:rgba(124,58,237,.5);box-shadow:var(--shadow)}
.acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;padding:20px 24px;font-size:16.5px;font-weight:700;font-family:'Space Grotesk',sans-serif;color:var(--ink)}
.acc-q .acc-icon{width:30px;height:30px;border-radius:50%;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--brand);transition:transform .3s var(--ease),background .3s,color .3s;flex-shrink:0}
.acc-item.open .acc-icon{transform:rotate(45deg);background:var(--grad-brand);color:#fff}
.acc-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.acc-a p{padding:0 24px 22px;color:var(--ink-soft);font-size:15px}

/* ============================================================
   PRICING
   ============================================================ */
.billing-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:46px;font-size:15px;font-weight:600}
.switch{position:relative;width:54px;height:29px}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--border);border-radius:999px;cursor:pointer;transition:background .3s}
.switch .slider::before{content:"";position:absolute;width:23px;height:23px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .3s var(--ease);box-shadow:0 2px 8px rgba(23,18,51,.25)}
.switch input:checked + .slider{background:var(--grad-brand)}
.switch input:checked + .slider::before{transform:translateX(25px)}
.save-chip{background:rgba(5,150,105,.12);color:var(--success);font-size:12.5px;font-weight:800;padding:5px 11px;border-radius:999px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan-card{background:#fff;border:1.5px solid var(--border);border-radius:28px;padding:40px 34px;display:flex;flex-direction:column;gap:18px;transition:transform .3s var(--ease),box-shadow .3s}
.plan-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.plan-card.popular{border:2.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad-brand) border-box;box-shadow:var(--shadow-pop);position:relative}
.plan-card .pop-chip{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--grad-brand);color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:7px 18px;border-radius:999px;box-shadow:0 8px 20px rgba(219,39,119,.4)}
.plan-card h3{font-size:23px}
.plan-price{font-family:'Space Grotesk',sans-serif;font-size:44px;font-weight:700;letter-spacing:-.03em}
.plan-price em{font-style:normal;font-size:15px;color:var(--ink-faint);font-weight:500}
.plan-card ul{display:flex;flex-direction:column;gap:10px;flex:1}
.plan-card ul li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-soft)}
.plan-card ul li::before{content:"✓";color:var(--success);font-weight:800}
body.annual .price-monthly{display:none}
body:not(.annual) .price-annual{display:none}

/* ============================================================
   ROI CALCULATOR
   ============================================================ */
.calc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.calc-inputs{display:flex;flex-direction:column;gap:26px}
.calc-field label{display:flex;justify-content:space-between;font-size:14.5px;font-weight:700;margin-bottom:10px}
.calc-field label output{color:var(--brand);font-family:'JetBrains Mono',monospace}
.calc-field input[type=range]{width:100%;accent-color:var(--brand);height:6px}
.calc-results{background:var(--grad-vivid-2);color:var(--dark-ink);border-radius:28px;padding:46px;position:sticky;top:110px;overflow:hidden;box-shadow:var(--shadow-lg)}
.calc-results::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 260px at 90% 0%,rgba(251,146,60,.3),transparent 60%);pointer-events:none}
.calc-results .orb{opacity:.4}
.calc-results h3{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:24px}
.calc-big{font-family:'Space Grotesk',sans-serif;font-size:clamp(46px,5vw,66px);font-weight:700;line-height:1;margin-bottom:8px}
.calc-sub{color:var(--dark-ink-soft);font-size:15px;margin-bottom:30px}
.calc-rows{display:flex;flex-direction:column;gap:14px;margin-bottom:30px;position:relative}
.calc-row{display:flex;justify-content:space-between;font-size:15px;color:var(--dark-ink-soft);border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:12px}
.calc-row strong{color:#fff;font-family:'JetBrains Mono',monospace}

/* ============================================================
   BLOG / RESOURCES GRIDS
   ============================================================ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blog-card{background:#fff;border:1.5px solid var(--border);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.blog-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.35)}
.blog-thumb{height:182px;display:flex;align-items:center;justify-content:center;font-size:58px;color:#fff}
.bt-1{background:var(--grad-brand)}
.bt-2{background:var(--grad-sea)}
.bt-3{background:var(--grad-sun)}
.bt-4{background:linear-gradient(135deg,#10B981,#06B6D4)}
.bt-5{background:var(--grad-candy)}
.bt-6{background:var(--grad-grape)}
.blog-card .blog-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-cat{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.blog-card h3{font-size:18px;line-height:1.35;flex:1}
.blog-meta{font-size:13px;color:var(--ink-faint)}

/* News list */
.news-list{display:flex;flex-direction:column;gap:0;max-width:900px;margin:0 auto}
.news-item{display:grid;grid-template-columns:130px 1fr auto;gap:24px;align-items:center;padding:26px 8px;border-bottom:1.5px solid var(--border);transition:background .2s}
.news-item:hover{background:var(--bg-soft)}
.news-date{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink-faint)}
.news-item h3{font-size:17.5px;line-height:1.4}
.news-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--bg-tint);color:var(--brand);padding:6px 13px;border-radius:999px;white-space:nowrap}

/* Glossary */
.glossary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.gloss-item{background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:28px 30px;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.gloss-item:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(124,58,237,.35)}
.gloss-item h3{font-size:18px;margin-bottom:8px}
.gloss-item p{color:var(--ink-soft);font-size:14.5px}
.alpha-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:38px}
.alpha-nav span{width:38px;height:38px;border-radius:11px;background:var(--bg-soft);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--ink-faint)}
.alpha-nav span.on{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(219,39,119,.35)}

/* ============================================================
   COMPANY PAGES
   ============================================================ */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.timeline-v{position:relative;max-width:760px;margin:0 auto;padding-left:36px}
.timeline-v::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:3px;background:var(--grad-brand);border-radius:2px}
.tl-item{position:relative;padding:0 0 40px 24px}
.tl-item::before{content:"";position:absolute;left:-33px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--grad-brand);box-shadow:0 0 0 6px rgba(219,39,119,.18)}
.tl-item .tl-year{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--brand-2);font-weight:700}
.tl-item h3{font-size:19px;margin:6px 0 8px}
.tl-item p{color:var(--ink-soft);font-size:15px}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.team-card{background:#fff;border:1.5px solid var(--border);border-radius:24px;padding:32px 24px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.team-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:rgba(124,58,237,.35)}
.team-card .avatar{width:78px;height:78px;font-size:22px;margin:0 auto 16px;border:none;box-shadow:0 10px 24px rgba(124,58,237,.3)}
.team-card strong{display:block;font-size:16.5px}
.team-card em{font-style:normal;font-size:13.5px;color:var(--ink-faint)}
.office-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.office-card{background:#fff;border:1.5px solid var(--border);border-radius:24px;padding:30px;text-align:center;transition:transform .25s var(--ease),box-shadow .25s}
.office-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.office-card .o-pin{font-size:36px;margin-bottom:12px;display:block}
.office-card h3{font-size:18px;margin-bottom:6px}
.office-card p{font-size:14px;color:var(--ink-soft)}
.job-list{display:flex;flex-direction:column;gap:14px;max-width:860px;margin:0 auto}
.job-item{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:22px 26px;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.job-item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(124,58,237,.45)}
.job-item h3{font-size:17.5px;margin-bottom:4px}
.job-item .job-meta{font-size:13.5px;color:var(--ink-faint)}
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.si-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.si-logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;color:var(--ink);opacity:.6;background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:18px 30px;transition:opacity .2s,transform .2s,box-shadow .2s}
.si-logo:hover{opacity:1;transform:translateY(-3px);box-shadow:var(--shadow)}

/* ============================================================
   LEGAL
   ============================================================ */
.legal-body{max-width:820px;margin:0 auto}
.legal-body h2{font-size:24px;margin:40px 0 14px}
.legal-body p,.legal-body li{color:var(--ink-soft);font-size:15.5px;margin-bottom:12px}
.legal-body ul{list-style:disc;padding-left:22px}
.legal-summary{background:var(--bg-soft);border:1.5px solid var(--border);border-radius:18px;padding:24px 28px;margin-bottom:20px;font-size:15px;color:var(--ink-soft)}

/* ============================================================
   RESPONSIVE (subpages)
   ============================================================ */
@media (max-width:1080px){
  .split-row{grid-template-columns:1fr;gap:36px}
  .split-row.flip .split-copy{order:0}
  .feature-grid,.feature-grid.cols-4{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .metric-band{grid-template-columns:1fr 1fr;gap:36px}
  .int-grid{grid-template-columns:1fr 1fr}
  .case-card{grid-template-columns:1fr}
  .calc-wrap{grid-template-columns:1fr}
  .calc-results{position:static}
  .blog-grid{grid-template-columns:1fr 1fr}
  .value-grid,.team-grid,.office-grid{grid-template-columns:1fr 1fr}
  .plan-grid{grid-template-columns:1fr}
  .partner-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .page-hero{padding:120px 0 72px}
  .feature-grid,.feature-grid.cols-2,.feature-grid.cols-4,.steps,.steps.cols-3,.metric-band,.int-grid,.blog-grid,.glossary-grid,.value-grid,.team-grid,.office-grid,.partner-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-panel{padding:28px}
  .news-item{grid-template-columns:1fr;gap:8px}
  .search-input{margin-left:0;width:100%}
  .search-input input{width:100%}
  .cta-band{padding:46px 26px}
  .case-card .case-quote{padding:30px}
}

/* ============================================================
   V4 POLISH — depth, glow hovers, shimmer, micro-detail
   Layered on top of the base system; applies site-wide.
   ============================================================ */

/* ---------- Deeper, colored shadow system ---------- */
:root{
  --shadow:0 10px 30px rgba(124,58,237,.10),0 4px 10px rgba(23,18,51,.05);
  --shadow-lg:0 30px 70px rgba(124,58,237,.18),0 10px 24px rgba(23,18,51,.08);
  --shadow-pop:0 22px 60px rgba(219,39,119,.30);
}

/* ---------- Gradient text shimmer (hero + page hero H1s) ---------- */
.hero-h1 .grad,.page-hero h1 .grad,.final-cta h2 .grad,.section-head h2 .grad{
  background-size:200% 100%;
  animation:grad-pan 7s linear infinite alternate
}
@keyframes grad-pan{from{background-position:0% 50%}to{background-position:200% 50%}}

/* ---------- Card depth: inner top highlight + stronger hover glow ---------- */
.pillar-card,.ai-card,.ind-card,.feature-card,.step-card,.use-card,.res-card,.blog-card,.team-card,.plan-card,.int-card,.gloss-item,.case-card,.form-panel,.acc-item,.office-card,.job-item{
  box-shadow:0 1px 2px rgba(23,18,51,.04),0 10px 30px rgba(124,58,237,.08);
}
.pillar-card::before,.ai-card::before,.feature-card::before,.step-card::before,.use-card::before,.res-card::before,.blog-card::before,.team-card::before,.plan-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 26%);
  opacity:0;transition:opacity .35s
}
.pillar-card,.ai-card,.feature-card,.step-card,.use-card,.res-card,.blog-card,.team-card,.plan-card{position:relative}
.pillar-card:hover::before,.ai-card:hover::before,.feature-card:hover::before,.step-card:hover::before,.use-card:hover::before,.res-card:hover::before,.blog-card:hover::before,.team-card:hover::before,.plan-card:hover::before{opacity:1}
.pillar-card:hover,.ai-card:hover,.feature-card:hover,.step-card:hover{
  box-shadow:0 26px 60px rgba(124,58,237,.22),0 0 0 1px rgba(124,58,237,.22)
}
.use-card:hover,.res-card:hover,.blog-card:hover,.team-card:hover{
  box-shadow:0 26px 60px rgba(219,39,119,.20),0 0 0 1px rgba(219,39,119,.22)
}
.plan-card:hover{box-shadow:0 30px 70px rgba(124,58,237,.24),0 0 0 1px rgba(124,58,237,.22)}
.step-card .step-num{transition:transform .35s var(--ease)}
.step-card:hover .step-num{transform:scale(1.12) rotate(-6deg)}
.feature-card .f-icon,.pillar-icon{transition:transform .35s var(--ease)}
.feature-card:hover .f-icon,.pillar-card:hover .pillar-icon{transform:translateY(-4px) scale(1.06)}

/* ---------- Primary button: shine sweep + glow ---------- */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-90%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);z-index:1;pointer-events:none;
  animation:btn-shine 3.8s var(--ease) infinite
}
@keyframes btn-shine{0%{left:-90%}55%,100%{left:150%}}
.btn-primary > *{position:relative;z-index:2}
.btn-primary:hover{box-shadow:0 18px 44px rgba(219,39,119,.55)}

/* ---------- Eyebrow glow pulse ---------- */
.eyebrow{animation:eyebrow-glow 3.2s ease-in-out infinite}
@keyframes eyebrow-glow{0%,100%{box-shadow:0 6px 18px rgba(219,39,119,.3)}50%{box-shadow:0 6px 28px rgba(219,39,119,.58)}}

/* ---------- Hero: livelier orbs + rotator glow ---------- */
.orb{opacity:.68;animation-duration:12s}
@keyframes orb-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(46px,-34px) scale(1.14)}}
.hero-rotator{filter:drop-shadow(0 6px 22px rgba(219,39,119,.25))}
.browser-frame{box-shadow:0 40px 90px rgba(124,58,237,.22),0 40px 110px rgba(219,39,119,.16)}

/* ---------- Marquee logos: more presence ---------- */
.mlogo{opacity:.62}
.mlogo.dim{opacity:.32}

/* ---------- Dark sections: subtle tech grid texture ---------- */
.dark-section::after,.page-hero::before,.site-footer::after,.calc-results::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 78%)
}
.page-hero::before{z-index:0}
.calc-results::after{border-radius:inherit}

/* ---------- Section heads: gradient underline flourish ---------- */
.section-head h2::after,.sticky-head h2::after{
  content:"";display:block;width:64px;height:5px;border-radius:99px;
  background:var(--grad-brand);margin-top:18px;
  transform-origin:left center
}
.center h2::after{margin-left:auto;margin-right:auto}
.dark-section .section-head h2::after,.section.dark h2::after,.page-hero h1::after{
  background:linear-gradient(90deg,#FDBA74,#F9A8D4,#C4B5FD)
}

/* ---------- Focus visibility (a11y polish) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(124,58,237,.45);outline-offset:3px;border-radius:6px
}

/* ---------- Branded scrollbar ---------- */
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--bg-soft)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7C3AED,#DB2777);border-radius:99px;border:3px solid var(--bg-soft)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#6D28D9,#BE185D)}

/* ---------- Hero headline: 3D line reveal stage ---------- */
.hero-h1 .mask{perspective:900px}
.hero-h1 .line{transform-style:preserve-3d}

/* ---------- Reduced motion guards for v4 ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-h1 .grad,.page-hero h1 .grad,.final-cta h2 .grad,.section-head h2 .grad,
  .btn-primary::after,.eyebrow,.orb{animation:none}
}

/* ============================================================
   BUSINESS IMPACT HUD (merged from business-demo.html)
   Light theme dashboard showing adoption → business outcomes
   ============================================================ */
.biz-section{padding:72px 0 84px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#FFFFFF 0%,#F7F5FF 40%,#FDF4FA 100%)}
.biz-wrap{max-width:1120px;margin:0 auto}
.biz-head{text-align:center;margin-bottom:36px}
.biz-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#7C3AED;background:rgba(124,58,237,.10);border:1px solid rgba(124,58,237,.25);padding:7px 14px;border-radius:999px;margin-bottom:16px}
.biz-head h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.biz-head h2 .grad{background:linear-gradient(90deg,#7C3AED,#DB2777,#F59E0B);-webkit-background-clip:text;background-clip:text;color:transparent}
.biz-head p{color:var(--ink-faint);max-width:640px;margin:12px auto 0;font-size:15.5px;line-height:1.65}

.biz-hud{max-width:1120px;margin:0 auto;background:linear-gradient(180deg,#fff,#F0F3FB);
  border:1px solid rgba(124,58,237,.18);border-radius:18px;overflow:hidden;position:relative;
  box-shadow:0 40px 90px -40px rgba(49,46,129,.25),0 24px 60px -24px rgba(139,92,246,.18)}
.biz-hud .hud-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;
  border-bottom:1px solid #E4E9F5;
  background:linear-gradient(90deg,rgba(124,58,237,.06),rgba(219,39,119,.04) 50%,rgba(6,182,212,.05))}
.biz-hud .hh-left{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:600;color:var(--ink)}
.biz-hud .hh-logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#7C3AED,#DB2777,#F59E0B);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;box-shadow:0 4px 14px rgba(139,92,246,.35)}
.biz-hud .hh-live{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:#059669;
  background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.3);padding:5px 12px;border-radius:999px}
.biz-hud .hh-live i{width:7px;height:7px;border-radius:50%;background:#10B981;animation:blip 1.6s ease-in-out infinite}
@keyframes blip{50%{opacity:.25}}
.biz-hud .hh-uppercase{font-size:11px;color:#7A88AA;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.biz-hud .hh-cur{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;color:#7C3AED}

.biz-hud .hud-body{display:grid;grid-template-columns:284px minmax(0,1fr) 268px;gap:1px;background:#E4E9F5}
.biz-hud .col{background:linear-gradient(180deg,#fff,#F2F5FC);padding:16px;display:flex;flex-direction:column;gap:12px;min-height:420px}
.biz-hud .col-title{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:#7A88AA}
.biz-hud .col-title b{color:var(--ink)}

/* metric cards */
.biz-hud .mcard{position:relative;background:#fff;border:1px solid #E4E9F5;border-radius:13px;padding:13px 15px 13px 18px;
  animation:pop .45s cubic-bezier(.34,1.56,.64,1) both;overflow:hidden;transition:border-color .25s,transform .25s;
  box-shadow:0 6px 16px -8px rgba(49,46,129,.12)}
.biz-hud .mcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:13px 0 0 13px}
.biz-hud .mcard:nth-child(1)::before{background:linear-gradient(180deg,#10B981,#0EA5E9)}
.biz-hud .mcard:nth-child(2)::before{background:linear-gradient(180deg,#EC4899,#DB2777)}
.biz-hud .mcard:nth-child(3)::before{background:linear-gradient(180deg,#F59E0B,#F97316)}
.biz-hud .mcard:nth-child(4)::before{background:linear-gradient(180deg,#8B5CF6,#7C3AED)}
.biz-hud .mcard:hover{transform:translateY(-2px)}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(8px)}}
.biz-hud .mcard .mrow{display:flex;align-items:baseline;justify-content:space-between}
.biz-hud .mnum{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.biz-hud .mcard:nth-child(1) .mnum{background:linear-gradient(90deg,#059669,#0891B2);-webkit-background-clip:text;background-clip:text;color:transparent}
.biz-hud .mcard:nth-child(2) .mnum{background:linear-gradient(90deg,#DB2777,#EC4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.biz-hud .mcard:nth-child(3) .mnum{background:linear-gradient(90deg,#D97706,#EA580C);-webkit-background-clip:text;background-clip:text;color:transparent}
.biz-hud .mcard:nth-child(4) .mnum{background:linear-gradient(90deg,#7C3AED,#6D28D9);-webkit-background-clip:text;background-clip:text;color:transparent}
.biz-hud .mdir{font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px}
.biz-hud .mcard .mlab{font-size:11.5px;color:#5A6B8C;margin-top:4px}
.biz-hud .mcard .mbar{height:5px;border-radius:999px;background:#EAEFF9;margin-top:9px;overflow:hidden}
.biz-hud .mcard .mbar i{display:block;height:100%;width:0;border-radius:999px;transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.biz-hud .mcard:nth-child(1) .mbar i{background:linear-gradient(90deg,#10B981,#06B6D4)}
.biz-hud .mcard:nth-child(2) .mbar i{background:linear-gradient(90deg,#F472B6,#EC4899)}
.biz-hud .mcard:nth-child(3) .mbar i{background:linear-gradient(90deg,#FBBF24,#F97316)}
.biz-hud .mcard:nth-child(4) .mbar i{background:linear-gradient(90deg,#A78BFA,#7C3AED)}

/* chart */
.biz-hud .chart-panel{background:linear-gradient(180deg,rgba(124,58,237,.05),rgba(255,255,255,.6));
  border:1px solid rgba(124,58,237,.15);border-radius:13px;padding:14px 16px 12px;height:100%;display:flex;flex-direction:column}
.biz-hud .ch-leg{display:flex;align-items:center;gap:16px;font-size:11px;color:#5A6B8C;font-weight:600;margin-bottom:6px}
.biz-hud .ch-leg span{display:flex;align-items:center;gap:6px}
.biz-hud .ch-leg i{width:12px;height:3px;border-radius:2px}
.biz-hud .ch-svgwrap{flex:1;position:relative}
.biz-hud .ch-svg{width:100%;height:100%;display:block}
.biz-hud .ch-grid line{stroke:#DCE4F5;stroke-width:1}
.biz-hud .ch-grid text{fill:#8B96B5;font-size:9.5px;font-family:Inter,sans-serif}
.biz-hud .ch-path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.biz-hud .ch-area{opacity:0;transition:opacity 1s}
.biz-hud .ch-dot{opacity:0;transition:opacity .4s;transform-origin:center}
.biz-hud .ch-tooltip{position:absolute;pointer-events:none;background:#2A2A52;border:1px solid rgba(139,92,246,.5);color:#fff;
  font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:9px;box-shadow:0 8px 20px rgba(0,0,0,.3);
  opacity:0;transform:translate(-50%,-125%);transition:all .45s cubic-bezier(.22,1,.36,1);font-family:Space Grotesk,sans-serif}
.biz-hud .ch-tooltip small{display:block;color:#A78BFA;font-weight:600;font-size:10px;letter-spacing:.05em;margin-bottom:1px}

/* insight feed */
.biz-hud .feed{flex:1;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.biz-hud .fitem{position:relative;background:#fff;border:1px solid #E4E9F5;border-radius:12px;padding:11px 13px;
  animation:pop .45s cubic-bezier(.34,1.56,.64,1) both;transition:border-color .25s,transform .25s;
  box-shadow:0 5px 14px -8px rgba(49,46,129,.10)}
.biz-hud .fitem:hover{transform:translateY(-2px)}
.biz-hud .fitem .ficon{float:left;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;margin-right:10px}
.biz-hud .fitem h4{font-size:12.5px;font-weight:700;line-height:1.35;color:var(--ink)}
.biz-hud .fitem p{font-size:11px;color:#5A6B8C;margin-top:3px}
.biz-hud .fitem .fmeta{font-size:10px;color:#8B96B5;margin-top:6px;font-weight:600;letter-spacing:.04em}
.biz-hud .fitem .fbar{height:4px;border-radius:999px;background:#EAEFF9;margin-top:7px;overflow:hidden}
.biz-hud .fitem .fbar i{display:block;height:100%;width:0;border-radius:999px;transition:width .9s cubic-bezier(.22,1,.36,1)}
.biz-hud .fitem.hot{border-color:rgba(219,39,119,.35);background:linear-gradient(180deg,rgba(236,72,153,.06),#fff)}

/* journey */
.biz-hud .journey{border-top:1px solid #E4E9F5;padding:14px 20px 12px;background:linear-gradient(180deg,#F0F3FB,#fff)}
.biz-hud .j-title{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:#7A88AA;margin-bottom:10px}
.biz-hud .j-title em{font-style:normal;color:#7C3AED}
.biz-hud .j-track{position:relative;display:flex;justify-content:space-between}
.biz-hud .j-track::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:#E0E6F5;border-radius:2px}
.biz-hud .j-line{position:absolute;left:0;top:7px;height:2px;border-radius:2px;width:0;
  background:linear-gradient(90deg,#8B5CF6,#EC4899,#F59E0B);transition:width 1s cubic-bezier(.22,1,.36,1)}
.biz-hud .j-seg{position:relative;text-align:center;width:16%;flex:none}
.biz-hud .j-dot{width:16px;height:16px;border-radius:50%;margin:0 auto;background:#DCE3F4;border:2px solid #C6CEE8;
  transition:all .5s cubic-bezier(.34,1.56,.64,1)}
.biz-hud .j-seg.lit .j-dot{background:linear-gradient(135deg,#A78BFA,#7C3AED);border-color:#fff;box-shadow:0 0 14px rgba(139,92,246,.55),0 0 28px rgba(139,92,246,.3);transform:scale(1.15)}
.biz-hud .j-day{font-family:'Space Grotesk',sans-serif;font-size:9.5px;font-weight:700;color:#8B96B5;margin-top:6px;transition:color .5s}
.biz-hud .j-seg.lit .j-day{color:var(--ink)}
.biz-hud .j-label{font-size:9px;color:#A6AEC8;margin-top:1px;font-weight:600;letter-spacing:.02em}
.biz-hud .j-seg.lit .j-label{color:#7C3AED}

/* final banner */
.biz-hud .win-banner{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(90deg,#F0F6F3,#F7FBF8 45%,#F0F6F3);
  border-top:1px solid rgba(16,185,129,.4);padding:0 20px;display:flex;align-items:center;justify-content:center;gap:14px;
  height:0;opacity:0;overflow:hidden;transition:all .6s cubic-bezier(.22,1,.36,1)}
.biz-hud.banner .win-banner{height:62px;opacity:1}
.biz-hud .win-banner .b-ico{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#10B981,#34D399);display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff;flex:none;animation:pop .5s cubic-bezier(.34,1.56,.64,1) both;box-shadow:0 0 16px rgba(52,211,153,.4)}
.biz-hud .win-banner b{font-family:'Space Grotesk',sans-serif;font-size:18px;color:#059669}
.biz-hud .win-banner span{font-size:12.5px;color:var(--ink)}
.biz-hud .win-banner em{color:#7C3AED}

@media(max-width:980px){
  .biz-hud .hud-body{grid-template-columns:1fr}
  .biz-hud .col{min-height:0}
}
@media(max-width:640px){
  .biz-hud .hud-body{grid-template-columns:1fr}
}