/* ═══════════════════════════════════════════════
   symbol-main.css — Prestige Design v5 "WOW"
   Award-worthy · Enterprise Premium · Original
   Chargé via functions.php → wp_enqueue_style()
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,opsz,wght@0,8..18,300;0,8..18,400;0,8..18,500;0,8..18,600;0,8..18,700;0,8..18,800;0,8..18,900;1,8..18,400&family=DM+Mono:wght@300;400;500&display=swap');

/* ════════════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════════════ */
:root {
  --orange:        #ff6b2b;
  --orange-bright: #ff8444;
  --orange-strong: #f55200;
  --orange-deep:   #c94400;
  --orange-glow:   rgba(255,107,43,0.35);
  --orange-soft:   rgba(255,107,43,0.08);
  --orange-light:  #ff8c55;

  --bg:          #04050d;
  --bg-2:        #070918;
  --bg-surface:  #0c0e1c;
  --bg-elevated: #101325;
  --black:       #060811;

  --light:       #f7f8fc;
  --white:       #ffffff;

  --border-dark:  rgba(255,255,255,0.07);
  --border-light: rgba(0,0,0,0.07);

  --text:         #ffffff;
  --text-muted:   rgba(255,255,255,0.55);
  --text-faint:   rgba(255,255,255,0.25);
  --text-dark:    #0c0e18;
  --text-gray:    #636c7e;

  --violet: #8b5cf6;
  --cyan:   #06b6d4;
  --amber:  #f59e0b;

  --shadow-sm:     0 2px 8px rgba(0,0,0,0.12);
  --shadow-md:     0 8px 32px rgba(0,0,0,0.18);
  --shadow-lg:     0 24px 64px rgba(0,0,0,0.35);
  --shadow-xl:     0 48px 120px rgba(0,0,0,0.55);
  --shadow-card:   0 1px 3px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.10);
  --shadow-orange: 0 20px 64px rgba(255,107,43,0.42), 0 4px 16px rgba(255,107,43,0.22);
  --glow-orange:   0 0 80px rgba(255,107,43,0.28);

  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 9999px;

  --font:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'DM Mono', 'SF Mono', Menlo, monospace;
  --font-display: 'Plus Jakarta Sans', sans-serif;

  --max-w: 1240px;
  --px:    48px;

  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Legacy compat */
  --navy-dark: #080a1a;
  --midnight:  #090c18;
  --max-width: 1200px;
}

/* ════════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.wp-caption, figure { margin: 0; }
button { font-family: inherit; cursor: pointer; border: none; }

.container { width: min(var(--max-w), calc(100% - var(--px) * 2)); margin: 0 auto; }
.section { padding: 120px 0; position: relative; }

/* ════════════════════════════════════════════════
   KEYFRAMES
════════════════════════════════════════════════ */
@keyframes fadeUp   { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes pulse    { 0%,100%{ opacity:.6; transform:scale(1); } 50%{ opacity:1; transform:scale(1.3); } }
@keyframes dotPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(255,107,43,.6); } 50%{ box-shadow:0 0 0 6px rgba(255,107,43,0); } }
@keyframes shimmer  { from { background-position:-200% center; } to { background-position:200% center; } }
@keyframes marquee  { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes marqueeR { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@keyframes floatUp  { 0%{ transform:translateY(0) scale(1); opacity:.6; } 100%{ transform:translateY(-130px) scale(.6); opacity:0; } }
@keyframes scanLine { 0%{ top:-140px; } 100%{ top:110%; } }
@keyframes orb      { 0%,100%{ transform:translate(0,0) scale(1); opacity:.5; } 40%{ transform:translate(24px,-16px) scale(1.04); opacity:.7; } 70%{ transform:translate(-18px,8px) scale(.96); opacity:.4; } }

@keyframes aurora1 {
  0%   { transform:translate(0,0) scale(1); }
  33%  { transform:translate(70px,-50px) scale(1.12); }
  66%  { transform:translate(-50px,35px) scale(0.94); }
  100% { transform:translate(0,0) scale(1); }
}
@keyframes aurora2 {
  0%   { transform:translate(0,0) scale(1); }
  50%  { transform:translate(-80px,60px) scale(1.18); }
  100% { transform:translate(0,0) scale(1); }
}
@keyframes aurora3 {
  0%,100%{ transform:translate(0,0); opacity:.4; }
  50%    { transform:translate(60px,-40px); opacity:.7; }
}

/* ════════════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════════════ */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal:has(.section-tag) { text-align:center; }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1!important; transform:none!important; transition:none!important; } }
.no-js .reveal { opacity:1; transform:none; }

/* ════════════════════════════════════════════════
   CURSOR SPOTLIGHT
════════════════════════════════════════════════ */
.cursor-spotlight {
  position:fixed; width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,107,43,.055) 0%, rgba(255,107,43,.02) 35%, transparent 65%);
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  mix-blend-mode:screen; transition:opacity .3s;
}

/* ════════════════════════════════════════════════
   SCROLL PROGRESS BAR
════════════════════════════════════════════════ */
.scroll-progress {
  position:fixed; top:72px; left:0; width:0%; height:2px; z-index:101;
  background:linear-gradient(90deg, var(--orange-deep), var(--orange), var(--orange-bright));
  box-shadow:0 0 12px rgba(255,107,43,.7); pointer-events:none;
  transition:width .08s linear;
}

/* ════════════════════════════════════════════════
   SKIP LINK — Accessibility (WCAG 2.4.1)
════════════════════════════════════════════════ */
.screen-reader-text {
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute; word-wrap:normal !important;
}
.skip-link {
  position:absolute; top:-100px; left:8px; z-index:99999;
  padding:12px 24px; border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--orange); color:#fff;
  font-size:14px; font-weight:700; text-decoration:none;
  transition:top .2s var(--ease-out);
}
.skip-link:focus { top:0; }

/* ════════════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════════════ */
.nav {
  position:sticky; top:0; z-index:100;
  background:rgba(4,5,13,.72);
  backdrop-filter:blur(28px) saturate(200%);
  -webkit-backdrop-filter:blur(28px) saturate(200%);
  border-bottom:1px solid rgba(255,255,255,.055);
  box-shadow:none;
  transition:background .25s var(--ease-smooth), box-shadow .25s var(--ease-smooth);
}
.nav.is-scrolled {
  background:rgba(4,5,13,.97);
  box-shadow:0 4px 40px rgba(0,0,0,.45);
}
.nav::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,107,43,.55) 30%, rgba(255,107,43,.8) 50%, rgba(255,107,43,.55) 70%, transparent 100%);
  opacity:.65;
}
.nav-inner { height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }

.brand { display:flex; align-items:center; gap:12px; font-size:22px; font-weight:900; letter-spacing:-.04em; color:var(--text); flex-shrink:0; }
.brand a, .brand .custom-logo-link { display:flex; align-items:center; }
.brand img.custom-logo { height:32px; width:auto; filter:brightness(0) invert(1); }
.brand-logo { height:38px; width:auto; object-fit:contain; display:block; }
.brand-logo-light { height:44px; }
/* Footer logo — larger than nav for better brand presence */
.footer .brand-logo { height:50px; }
.footer .brand-logo-light { height:58px; }
.brand-mark {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, var(--orange-light), var(--orange-strong));
  box-shadow:0 0 0 1px rgba(255,107,43,.35), 0 4px 16px rgba(255,107,43,.4);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.nav-links { display:flex; align-items:center; gap:2px; }
/* :not(.nav-cta) avoids specificity conflicts — no !important needed on .nav-cta */
.nav-links a:not(.nav-cta) { padding:8px 14px; border-radius:var(--r-sm); color:var(--text-muted); font-size:14px; font-weight:600; letter-spacing:-.01em; transition:color .15s, background .15s; }
.nav-links a:not(.nav-cta):hover { color:var(--orange-light); background:rgba(255,255,255,.06); }
.nav-links a.is-active { color:var(--orange-light); }

.nav-cta {
  background:var(--orange); color:#fff; font-weight:700;
  padding:10px 22px; border-radius:var(--r-sm); font-size:14px;
  box-shadow:0 0 0 1px rgba(255,107,43,.4), var(--shadow-orange);
  transition:all .22s; position:relative; overflow:hidden;
}
.nav-cta::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  background-size:200% 100%; background-position:200% center; transition:background-position .5s ease;
}
.nav-cta:hover { background:var(--orange-deep); transform:translateY(-1px); box-shadow:0 0 0 1px rgba(255,107,43,.6), 0 16px 48px rgba(255,107,43,.65); }
.nav-cta:hover::before { background-position:-200% center; }

/* Book a Demo — outline button in nav */
.nav-book-demo {
  padding:9px 18px; border-radius:var(--r-sm); font-size:14px; font-weight:700;
  border:1.5px solid var(--orange); color:var(--orange);
  background:transparent; transition:all .22s;
  white-space:nowrap; margin-left:8px;
}
.nav-book-demo:hover {
  background:var(--orange); color:#fff;
  transform:translateY(-1px); box-shadow:0 8px 24px rgba(255,107,43,.35);
}
[data-theme="light"] .nav-book-demo { border-color:var(--orange); color:var(--orange); }
[data-theme="dark"]  .nav-book-demo { border-color:var(--orange-light); color:var(--orange-light); }

.hamburger { display:none; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-sm); padding:0; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.hamburger span { display:block; width:20px; height:2px; background:rgba(255,255,255,.8); border-radius:2px; transition:all .3s; }

/* ════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════ */
.hero {
  background:var(--bg); color:var(--text);
  padding:100px 0 0; overflow:hidden;
  min-height:100vh;
  min-height:100svh; /* stable on mobile — doesn't jump with address bar */
  display:flex; flex-direction:column;
  position:relative;
}

/* ─── Aurora blobs ─── */
.hero-aurora { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.aurora-blob { position:absolute; border-radius:50%; filter:blur(90px); will-change:transform; }
.aurora-blob:nth-child(1) {
  width:900px; height:900px; top:-280px; left:-180px;
  background:radial-gradient(circle, rgba(255,107,43,.14) 0%, transparent 70%);
  animation:aurora1 20s ease-in-out infinite;
}
.aurora-blob:nth-child(2) {
  width:720px; height:720px; top:-80px; right:-160px;
  background:radial-gradient(circle, rgba(139,92,246,.09) 0%, transparent 70%);
  animation:aurora2 26s ease-in-out infinite;
}
.aurora-blob:nth-child(3) {
  width:600px; height:600px; bottom:80px; left:28%;
  background:radial-gradient(circle, rgba(6,182,212,.065) 0%, transparent 70%);
  animation:aurora3 22s ease-in-out infinite;
}

/* ─── Dot grid ─── */
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 40%, black 20%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 40%, black 20%, transparent 100%);
}
.hero::after {
  content:''; position:absolute; top:-180px; right:-220px; width:720px; height:720px;
  background:radial-gradient(circle, rgba(79,142,247,.06) 0%, transparent 65%);
  border-radius:50%; pointer-events:none; animation:aurora2 18s ease-in-out infinite reverse;
}

/* ─── Bottom glow ─── */
.hero-bottom-glow {
  position:absolute; bottom:0; left:0; right:0; height:300px;
  background:linear-gradient(180deg, transparent 0%, rgba(255,107,43,.07) 100%);
  pointer-events:none; z-index:1;
}
.hero-bottom-glow::after {
  content:''; position:absolute; bottom:0; left:15%; right:15%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,107,43,.5), rgba(255,107,43,.7), rgba(255,107,43,.5), transparent);
}

.hero .container { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }

/* ─── Eyebrow pill ─── */
.hero .eyebrow {
  display:inline-flex; align-items:center; gap:8px; padding:8px 18px 8px 12px;
  border-radius:var(--r-pill); background:rgba(255,107,43,.08); border:1px solid rgba(255,107,43,.22);
  color:rgba(255,200,155,.95); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; font-family:var(--font-mono); margin-bottom:38px;
  animation:fadeIn .6s ease both; backdrop-filter:blur(8px);
  transition:background .25s, border-color .25s, box-shadow .25s; cursor:default;
}
.hero .eyebrow:hover { background:rgba(255,107,43,.14); border-color:rgba(255,107,43,.4); box-shadow:var(--glow-orange); }
.hero .eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px var(--orange); animation:dotPulse 2s infinite; }

/* ─── Hero headline ─── */
.hero-inner { text-align:center; max-width:920px; margin:0 auto; padding-bottom:72px; }

.hero h1 { font-size:clamp(52px,7.2vw,100px); line-height:1.0; letter-spacing:-.056em; font-weight:900; animation:fadeUp .85s var(--ease-out) .1s both; }
.hero h1 .line {
  display:block;
  background:linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.72) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero h1 .accent {
  display:block;
  background:linear-gradient(120deg, var(--orange) 0%, #ff8c55 45%, #ffd4a3 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  background-size:200%; animation:fadeUp .85s var(--ease-out) .18s both, shimmer 4.5s linear 1.2s infinite;
}

.hero .lead { font-size:clamp(17px,2vw,21px); color:var(--text-muted); max-width:620px; margin:32px auto 0; line-height:1.78; font-weight:400; animation:fadeUp .85s var(--ease-out) .28s both; }
.hero .btn-row { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:48px; animation:fadeUp .85s var(--ease-out) .42s both; }

/* ─── Hero visual ─── */
.hero-visual { width:100%; max-width:1060px; margin:0 auto; position:relative; animation:fadeUp 1s var(--ease-out) .58s both; }
.hero-visual::before {
  content:''; position:absolute; bottom:0; left:8%; right:8%; height:120px;
  background:radial-gradient(ellipse, rgba(255,107,43,.45) 0%, transparent 70%);
  filter:blur(28px); pointer-events:none; z-index:0;
}
.hero-visual::after {
  content:''; position:absolute; top:15%; left:-80px; right:-80px; bottom:-30px;
  background:radial-gradient(ellipse at 5% 50%, rgba(139,92,246,.1) 0%, transparent 40%),
             radial-gradient(ellipse at 95% 50%, rgba(6,182,212,.08) 0%, transparent 40%);
  pointer-events:none; z-index:0;
}

/* ─── Dashboard frame ─── */
.dashboard-frame {
  position:relative; z-index:1;
  background:rgba(10,12,24,.94); border:1px solid rgba(255,255,255,.1); border-bottom:none;
  border-radius:20px 20px 0 0; overflow:hidden;
  box-shadow:0 -4px 140px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
}
.dashboard-frame::after {
  content:''; position:absolute; left:0; right:0; height:140px;
  background:linear-gradient(180deg, rgba(255,107,43,.025) 0%, transparent 100%);
  animation:scanLine 5s linear infinite; pointer-events:none; z-index:10;
}

.dashboard-bar {
  height:44px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; gap:7px; padding:0 18px;
}
.dashboard-dot { width:12px; height:12px; border-radius:50%; }
.dashboard-dot:nth-child(1) { background:#ff5f57; box-shadow:0 0 8px rgba(255,95,87,.6); }
.dashboard-dot:nth-child(2) { background:#febc2e; box-shadow:0 0 8px rgba(254,188,46,.5); }
.dashboard-dot:nth-child(3) { background:#28c840; box-shadow:0 0 8px rgba(40,200,64,.5); }
.dashboard-bar::after {
  content:'app.symbol.cloud/overview'; margin-left:18px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); border-radius:6px;
  padding:4px 16px; font-size:12px; color:rgba(255,255,255,.22); font-family:var(--font-mono);
  flex:1; max-width:280px;
}

.dashboard-body { display:grid; grid-template-columns:200px 1fr; gap:0; min-height:340px; }
.dash-sidebar { border-right:1px solid rgba(255,255,255,.05); padding:16px 12px; display:flex; flex-direction:column; gap:3px; }
.dash-sidebar::before { content:'SYMBOL'; display:block; font-family:var(--font-mono); font-size:10px; font-weight:700; color:rgba(255,255,255,.18); letter-spacing:.15em; padding:8px 14px 14px; }
.dash-sidebar-item { padding:9px 14px; border-radius:8px; font-size:12px; font-weight:600; color:rgba(255,255,255,.32); display:flex; align-items:center; gap:10px; transition:all .2s; cursor:pointer; }
.dash-sidebar-item:hover:not(.active) { background:rgba(255,107,43,.06); color:rgba(255,200,150,.8); }
.dash-sidebar-item.active { background:linear-gradient(135deg, rgba(255,107,43,.18), rgba(255,107,43,.08)); color:#ff9055; border:1px solid rgba(255,107,43,.15); }
.dash-sidebar-item .ico { width:16px; height:16px; border-radius:4px; background:rgba(255,255,255,.07); flex-shrink:0; }
.dash-sidebar-item.active .ico { background:rgba(255,107,43,.3); box-shadow:0 0 8px rgba(255,107,43,.3); }

.dash-main { display:flex; flex-direction:column; gap:16px; padding:20px; }
.dash-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.dash-stat { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:14px 16px; transition:border-color .25s, background .25s; cursor:default; }
.dash-stat:hover { border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.05); }
.dash-stat .val { font-size:24px; font-weight:800; color:#fff; letter-spacing:-.03em; line-height:1; }
.dash-stat .lbl { font-size:10px; color:rgba(255,255,255,.26); margin-top:6px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; font-family:var(--font-mono); }
.dash-stat.highlight { background:linear-gradient(135deg, rgba(255,107,43,.12), rgba(255,107,43,.05)); border-color:rgba(255,107,43,.2); }
.dash-stat.highlight .val { color:#ff9055; }

.dash-chart { flex:1; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); border-radius:12px; padding:16px 20px; position:relative; overflow:hidden; }
.dash-chart::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 1px, transparent 1px, transparent 40px),
             repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 1px, transparent 1px, transparent 60px);
}
.dash-chart-title { font-size:11px; font-weight:700; color:rgba(255,255,255,.26); text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; font-family:var(--font-mono); position:relative; z-index:1; }
.chart-bars { display:flex; align-items:flex-end; gap:7px; height:100px; position:relative; z-index:1; }
.chart-bar { flex:1; border-radius:4px 4px 0 0; }
.chart-bar.a { background:linear-gradient(180deg, var(--orange-bright) 0%, var(--orange) 100%); opacity:.9; box-shadow:0 0 14px rgba(255,107,43,.35); }
.chart-bar.b { background:rgba(255,255,255,.07); }

/* ─── Floating particles ─── */
.hero-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.hero-particles span { position:absolute; bottom:-10px; border-radius:50%; animation:floatUp linear infinite; }
.hero-particles span:nth-child(1) { left:10%; width:3px; height:3px; background:rgba(255,107,43,.7); animation-duration:7s; animation-delay:0s; }
.hero-particles span:nth-child(2) { left:25%; width:5px; height:5px; background:rgba(139,92,246,.55); animation-duration:6s; animation-delay:1.2s; }
.hero-particles span:nth-child(3) { left:42%; width:4px; height:4px; background:rgba(255,107,43,.65); animation-duration:8s; animation-delay:2.4s; }
.hero-particles span:nth-child(4) { left:60%; width:3px; height:3px; background:rgba(245,158,11,.55); animation-duration:5.5s; animation-delay:.7s; }
.hero-particles span:nth-child(5) { left:76%; width:5px; height:5px; background:rgba(255,107,43,.5); animation-duration:7.5s; animation-delay:3s; }
.hero-particles span:nth-child(6) { left:89%; width:3px; height:3px; background:rgba(6,182,212,.55); animation-duration:6.5s; animation-delay:1.8s; }

/* ════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:12px; font-size:14px; font-weight:700;
  border:none; cursor:pointer; transition:all .25s var(--ease-out);
  font-family:var(--font); letter-spacing:-.01em; position:relative; overflow:hidden; white-space:nowrap;
}
.btn .arrow { transition:transform .2s; display:inline-block; }
.btn:hover .arrow { transform:translateX(5px); }

.btn-primary { background:#fff; color:var(--bg); box-shadow:0 2px 12px rgba(255,255,255,.15); font-weight:800; }
.btn-primary:hover { background:rgba(255,255,255,.9); color:#0c0e1c; transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.18); }

.btn-ghost { background:rgba(255,255,255,.07); color:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(12px); }
.btn-ghost:hover { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.22); transform:translateY(-2px); }
/* Book a Demo secondary CTA — white outline on dark hero background */
.btn-outline-hero {
  background:transparent; color:#fff;
  border:1.5px solid rgba(255,255,255,.35);
  backdrop-filter:blur(12px);
}
.btn-outline-hero:hover {
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.65);
  transform:translateY(-2px);
}
[data-theme="light"] .btn-outline-hero { color:rgba(12,14,28,.82); border-color:rgba(0,0,0,.2); background:transparent; }
[data-theme="light"] .btn-outline-hero:hover { background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.35); }

.btn-orange { background:var(--orange); color:#fff; box-shadow:var(--shadow-orange); font-weight:800; }
.btn-orange::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  background-size:200% 100%; background-position:200% center; transition:background-position .5s ease;
}
.btn-orange:hover { background:var(--orange-deep); transform:translateY(-3px); box-shadow:0 30px 80px rgba(255,107,43,.58), 0 4px 24px rgba(255,107,43,.32); }
.btn-orange:hover::before { background-position:-200% center; }

.btn-outline { background:transparent; color:var(--text-dark); border:1px solid rgba(0,0,0,.15); }
.btn-outline:hover { border-color:var(--orange); color:var(--orange); }

/* ════════════════════════════════════════════════
   PROOF / LOGOS STRIP
════════════════════════════════════════════════ */
.proof-strip { background:var(--bg-surface); border-top:1px solid var(--border-dark); border-bottom:1px solid var(--border-dark); padding:56px 0; position:relative; overflow:hidden; }
.proof-strip::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 120%, rgba(255,107,43,.06) 0%, transparent 55%); pointer-events:none; }
.proof-strip::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:2; background:linear-gradient(90deg, var(--bg-surface) 0%, transparent 12%, transparent 88%, var(--bg-surface) 100%); }
.proof-inner { display:flex; flex-direction:column; align-items:center; gap:28px; position:relative; z-index:1; }
.proof-label { font-size:11px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.15em; font-family:var(--font-mono); }
.proof-track { display:flex; overflow:hidden; width:100%; }
.proof-logos { display:flex; align-items:center; gap:72px; flex-shrink:0; padding-right:72px; animation:marquee 32s linear infinite; }
.proof-track:hover .proof-logos { animation-play-state:paused; }
.proof-logo { display:flex; align-items:center; gap:10px; opacity:.3; filter:grayscale(.5); transition:opacity .3s, filter .3s; white-space:nowrap; }
.proof-logo:hover { opacity:.75; filter:grayscale(0); }
.proof-logo-text { font-size:16px; font-weight:700; color:rgba(255,255,255,.8); letter-spacing:.02em; }
.proof-logo:hover .proof-logo-text { color:var(--orange-bright); }

/* ════════════════════════════════════════════════
   SECTION SHARED ELEMENTS
════════════════════════════════════════════════ */
.section-tag {
  display:inline-flex; align-items:center; gap:8px; padding:5px 14px; border-radius:var(--r-pill);
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  font-family:var(--font-mono); margin-bottom:20px;
}
.section-tag.light { background:rgba(255,107,43,.07); border:1px solid rgba(255,107,43,.16); color:var(--orange-deep); }
.section-tag.dark  { background:rgba(255,107,43,.08); border:1px solid rgba(255,107,43,.18); color:rgba(255,200,150,.9); transition:background .25s, border-color .25s, box-shadow .25s; cursor:default; }
.section-tag.dark:hover { background:rgba(255,107,43,.14); border-color:rgba(255,107,43,.35); box-shadow:0 0 20px rgba(255,107,43,.18); }
/* Override light tags on newly-darkened sections */
.problem-section .section-tag,
.how-section .section-tag,
.use-section .section-tag,
.persona-section .section-tag { color:rgba(255,200,150,.92); background:rgba(255,107,43,.08); border-color:rgba(255,107,43,.2); }
/* Ensure section titles are white on all dark sections */
.problem-section .section-title,
.how-section .section-title,
.use-section .section-title,
.persona-section .section-title { color:#fff !important; }
/* Ensure section descriptions are readable on all dark sections */
.problem-section .section-desc,
.how-section .section-desc,
.use-section .section-desc,
.persona-section .section-desc { color:rgba(255,255,255,.58) !important; }
/* Use cases card titles */
.use-card h3,
.problem-card h4,
.step h4 { color:#fff !important; }
.use-card p,
.problem-card p,
.step p { color:rgba(255,255,255,.6) !important; }

.section-title { font-size:clamp(30px,3.8vw,54px); line-height:1.04; letter-spacing:-.046em; font-weight:900; margin-bottom:16px; text-align:center; }
.section-desc { font-size:17px; color:var(--text-gray); max-width:680px; line-height:1.82; text-align:center; margin-left:auto; margin-right:auto; }

.section-title::after { content:''; display:block; margin:14px auto 0; width:44px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--orange), var(--orange-bright)); }
.cap-section .section-title::after, .why-section .section-title::after,
.problem-section .section-title::after, .how-section .section-title::after,
.use-section .section-title::after, .persona-section .section-title::after { box-shadow:0 2px 18px rgba(255,107,43,.5); width:52px; }

/* ════════════════════════════════════════════════
   PROBLEM SECTION
════════════════════════════════════════════════ */
body .problem-section {
  background:linear-gradient(180deg, #08091c 0%, #0a0c1f 100%) !important;
  position:relative; overflow:hidden;
}
.problem-section::after {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:48px 48px; pointer-events:none;
  mask-image:radial-gradient(ellipse 90% 100% at 50% 0%, black 20%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 100% at 50% 0%, black 20%, transparent 100%);
}
.problem-section .section-desc { color:rgba(255,255,255,.55); }

.problem-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:stretch; margin-top:72px; }
.problem-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.problem-stat-wrap { display:flex; flex-direction:column; justify-content:center; }

.problem-card {
  padding:28px; border-radius:var(--r-lg); border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04); box-shadow:0 4px 24px rgba(0,0,0,.3);
  transition:transform .35s var(--ease-spring), box-shadow .35s, border-color .3s, background .3s;
  position:relative; overflow:hidden; cursor:default;
}
.problem-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--orange), var(--orange-bright), transparent); opacity:0; transition:opacity .3s; }
.problem-card:hover { transform:translateY(-7px); background:rgba(255,107,43,.06); border-color:rgba(255,107,43,.22); box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,107,43,.1); }
.problem-card:hover::before { opacity:1; }
.problem-card .num { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px; background:rgba(255,107,43,.08); border:1px solid rgba(255,107,43,.15); color:var(--orange); font-size:11px; font-weight:800; margin-bottom:16px; font-family:var(--font-mono); }
.problem-card h4 { font-size:16px; font-weight:700; margin-bottom:8px; letter-spacing:-.022em; color:#fff; }
.problem-card p  { font-size:14px; color:rgba(255,255,255,.58); line-height:1.65; }

.problem-stat-wrap { text-align:center; background:rgba(255,107,43,.05); border:1px solid rgba(255,107,43,.2); border-radius:var(--r-xl); padding:56px 48px; position:relative; overflow:hidden; }
.problem-stat-wrap::before { content:''; position:absolute; top:-70px; right:-70px; width:260px; height:260px; background:radial-gradient(circle, rgba(255,107,43,.22) 0%, transparent 70%); pointer-events:none; }
.problem-stat-num { font-size:clamp(80px,9.5vw,124px); font-weight:900; letter-spacing:-.06em; line-height:1; background:linear-gradient(135deg, var(--orange) 0%, var(--orange-bright) 55%, #ffd4a3 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.problem-stat-desc   { font-size:16px; color:rgba(255,255,255,.7); margin-top:16px; line-height:1.7; }
.problem-stat-source { font-size:11px; color:rgba(255,255,255,.4); margin-top:12px; font-family:var(--font-mono); }

/* ════════════════════════════════════════════════
   HOW IT WORKS
════════════════════════════════════════════════ */
body .how-section { background:linear-gradient(180deg, #060810 0%, #080b1d 100%) !important; position:relative; overflow:hidden; }
.how-section::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 10% 50%, rgba(255,107,43,.07) 0%, transparent 50%),
             radial-gradient(ellipse at 90% 50%, rgba(139,92,246,.06) 0%, transparent 50%);
  pointer-events:none;
}
.how-section .section-desc { color:rgba(255,255,255,.55); }
.steps-row { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:80px; position:relative; }
.steps-row::before { content:''; position:absolute; top:36px; left:12.5%; right:12.5%; height:2px; z-index:0; background:linear-gradient(90deg, transparent 0%, rgba(255,107,43,.55) 20%, var(--orange) 50%, rgba(255,107,43,.55) 80%, transparent 100%); box-shadow:0 0 20px rgba(255,107,43,.3); }
.step { text-align:center; position:relative; z-index:1; padding:0 20px; }
.step-num {
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg, rgba(255,107,43,.14), rgba(255,107,43,.05));
  border:1.5px solid rgba(255,107,43,.25);
  display:flex; align-items:center; justify-content:center; margin:0 auto 28px;
  font-size:22px; font-weight:900; color:var(--orange); font-family:var(--font-mono);
  transition:all .35s var(--ease-spring); box-shadow:0 0 40px rgba(255,107,43,.18), 0 4px 24px rgba(0,0,0,.3); position:relative; z-index:1;
}
.step-num::before { content:''; position:absolute; inset:-7px; border-radius:50%; border:1px solid rgba(255,107,43,0); transition:border-color .35s, box-shadow .35s; }
.step:hover .step-num { border-color:var(--orange); background:linear-gradient(135deg, rgba(255,107,43,.26), rgba(255,107,43,.12)); box-shadow:0 0 60px rgba(255,107,43,.42), 0 12px 44px rgba(0,0,0,.4); transform:scale(1.12); }
.step:hover .step-num::before { border-color:rgba(255,107,43,.35); box-shadow:0 0 0 8px rgba(255,107,43,.07); }
.step h4 { font-size:16px; font-weight:700; margin-bottom:10px; letter-spacing:-.015em; color:#fff; position:relative; z-index:1; }
.step p  { font-size:14px; color:rgba(255,255,255,.55); max-width:220px; margin:0 auto; line-height:1.65; position:relative; z-index:1; }

/* ════════════════════════════════════════════════
   STATS BAR
════════════════════════════════════════════════ */
.stats-bar { background:linear-gradient(130deg, #c94000 0%, var(--orange) 45%, #ff9055 100%); padding:80px 0; position:relative; overflow:hidden; }
.stats-bar::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events:none; }
.stats-bar::after { content:''; position:absolute; top:-100%; left:-10%; width:50%; height:300%; background:radial-gradient(ellipse, rgba(255,255,255,.09) 0%, transparent 60%); pointer-events:none; }

.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; color:#fff; position:relative; z-index:1; }
.stat-item { position:relative; padding:0 16px; cursor:default; transition:transform .25s var(--ease-spring); }
.stat-item:hover { transform:translateY(-5px); }
.stat-item::after { content:''; position:absolute; right:0; top:15%; bottom:15%; width:1px; background:rgba(255,255,255,.22); }
.stat-item:last-child::after { display:none; }
.stat-item::before { content:''; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%) scaleX(0); width:60px; height:3px; border-radius:3px; background:rgba(255,255,255,.6); transition:transform .3s var(--ease-spring); transform-origin:center; }
.stat-item:hover::before { transform:translateX(-50%) scaleX(1); }
.stat-item .stat-val { font-size:clamp(40px,4.8vw,66px); font-weight:900; letter-spacing:-.03em; line-height:1; color:#fff; display:flex; align-items:baseline; justify-content:center; gap:.08em; }
.stat-unit { font-size:1em; font-weight:900; color:rgba(255,255,255,.8); margin-left:.05em; }
.stat-sep  { font-size:.7em; font-weight:400; color:rgba(255,255,255,.7); }
.stat-item .stat-label { font-size:13px; color:rgba(255,255,255,.75); margin-top:12px; font-weight:600; letter-spacing:.01em; }
.stat-item:hover .stat-val { text-shadow:0 0 32px rgba(255,255,255,.5); }
.stat-item:hover .stat-label { color:#fff; }

/* ════════════════════════════════════════════════
   CAPABILITIES — BENTO GRID
════════════════════════════════════════════════ */
body .cap-section { background:linear-gradient(160deg, #07091a 0%, var(--bg) 55%, #100c0f 100%) !important; color:var(--text); position:relative; overflow:hidden; }
.cap-section::before { content:''; position:absolute; top:-200px; right:-160px; width:720px; height:720px; background:radial-gradient(circle, rgba(79,142,247,.07) 0%, transparent 65%); border-radius:50%; pointer-events:none; }
.cap-section::after  { content:''; position:absolute; bottom:-190px; left:-90px; width:620px; height:620px; background:radial-gradient(circle, rgba(255,107,43,.08) 0%, transparent 65%); border-radius:50%; pointer-events:none; }
.cap-section .container { position:relative; z-index:1; }

/* Bento grid */
.cap-bento { display:grid; grid-template-columns:1.6fr 1fr; gap:20px; margin-top:60px; }
.cap-stack  { display:flex; flex-direction:column; gap:20px; }
/* Legacy compat for cap-grid (Elementor etc.) */
.cap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }

.cap-card {
  background:linear-gradient(145deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid var(--border-dark); border-radius:var(--r-lg); padding:42px;
  transition:transform .35s var(--ease-spring), border-color .3s, box-shadow .3s;
  position:relative; overflow:hidden; cursor:default;
}
.cap-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,107,43,.55), transparent); opacity:0; transition:opacity .35s; }
.cap-card::after  { content:''; position:absolute; left:0; top:16px; bottom:16px; width:3px; background:linear-gradient(180deg, transparent, var(--orange), transparent); border-radius:0 3px 3px 0; opacity:0; transition:opacity .35s; }
.cap-card:hover { transform:translateY(-9px); border-color:rgba(255,107,43,.24); box-shadow:0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,107,43,.1), var(--glow-orange); }
.cap-card:hover::before { opacity:1; }
.cap-card:hover::after  { opacity:1; }

.cap-featured { display:flex; flex-direction:column; }
.watermark { position:absolute; bottom:-40px; right:-20px; font-size:220px; font-weight:900; line-height:1; letter-spacing:-.06em; color:rgba(255,107,43,.03); pointer-events:none; user-select:none; }

.cap-icon { width:54px; height:54px; border-radius:14px; background:linear-gradient(135deg, rgba(255,107,43,.15), rgba(255,107,43,.06)); border:1px solid rgba(255,107,43,.18); color:var(--orange); display:flex; align-items:center; justify-content:center; margin-bottom:24px; transition:all .3s; }
.cap-card:hover .cap-icon { background:linear-gradient(135deg, rgba(255,107,43,.28), rgba(255,107,43,.14)); border-color:rgba(255,107,43,.42); box-shadow:0 0 32px rgba(255,107,43,.28); }
.cap-card h3 { font-size:22px; font-weight:800; margin-bottom:14px; letter-spacing:-.03em; color:#fff; transition:color .3s; }
.cap-card p  { font-size:15px; color:rgba(255,255,255,.6); line-height:1.75; flex:1; transition:color .3s; }
.cap-card:hover h3 { color:#fff; }
.cap-card:hover p  { color:rgba(255,255,255,.72); }
.cap-card .tag-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; }
.cap-tag { padding:5px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.35); font-size:11px; font-weight:600; font-family:var(--font-mono); transition:all .25s; }
.cap-card:hover .cap-tag { border-color:rgba(255,107,43,.18); color:rgba(255,200,150,.65); }

/* Smaller cards in stack */
.cap-stack .cap-card { padding:32px; }
.cap-stack .cap-card h3 { font-size:18px; }

/* Mid CTA */
.mid-cta {
  background:linear-gradient(135deg, rgba(255,107,43,.1), rgba(255,107,43,.04));
  border:1px solid rgba(255,107,43,.22); border-radius:var(--r-xl); padding:56px 60px;
  display:flex; align-items:center; justify-content:space-between; gap:48px; margin-top:72px;
  position:relative; overflow:hidden; transition:border-color .3s, box-shadow .3s;
}
.mid-cta::before { content:''; position:absolute; top:-80px; right:-80px; width:360px; height:360px; background:radial-gradient(circle, rgba(255,107,43,.12) 0%, transparent 70%); pointer-events:none; }
.mid-cta:hover { border-color:rgba(255,107,43,.32); box-shadow:0 0 80px rgba(255,107,43,.08); }
.mid-cta h3 { font-size:26px; font-weight:800; color:var(--text); letter-spacing:-.03em; line-height:1.22; }
.mid-cta p  { font-size:15px; color:rgba(255,255,255,.6); margin-top:12px; line-height:1.65; max-width:500px; }

/* ════════════════════════════════════════════════
   USE CASES
════════════════════════════════════════════════ */
body .use-section { background:linear-gradient(180deg, #070918 0%, #090b1b 100%) !important; position:relative; overflow:hidden; }
.use-section::before { content:''; position:absolute; bottom:-200px; right:-200px; width:700px; height:700px; background:radial-gradient(circle, rgba(139,92,246,.08) 0%, transparent 65%); pointer-events:none; }
.use-section .section-desc { color:rgba(255,255,255,.55); }
.use-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:64px; }
.use-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-lg);
  padding:40px; box-shadow:0 4px 24px rgba(0,0,0,.25);
  transition:transform .35s var(--ease-spring), box-shadow .35s, border-color .3s, background .3s;
  position:relative; overflow:hidden; cursor:default;
}
.use-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--orange), var(--orange-bright)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out); }
.use-card:hover { transform:translateY(-7px); background:rgba(255,107,43,.05); border-color:rgba(255,107,43,.2); box-shadow:0 30px 80px rgba(0,0,0,.5), var(--glow-orange); }
.use-card:hover::after { transform:scaleX(1); }
.use-card .use-num { font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--orange); letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
.use-card h3 { font-size:19px; font-weight:800; margin-bottom:12px; letter-spacing:-.022em; line-height:1.3; color:#fff; }
.use-card p  { font-size:15px; color:rgba(255,255,255,.6); line-height:1.75; }
.use-card-full { grid-column:1 / -1; }

/* ════════════════════════════════════════════════
   PERSONAS
════════════════════════════════════════════════ */
body .persona-section { background:linear-gradient(180deg, #060810 0%, #080b1c 100%) !important; position:relative; overflow:hidden; }
.persona-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% -20%, rgba(255,107,43,.1) 0%, transparent 55%); pointer-events:none; }
.persona-section .section-desc { color:rgba(255,255,255,.55); }
.persona-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:64px; }
.persona-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-lg);
  padding:36px 40px; box-shadow:0 4px 24px rgba(0,0,0,.25);
  transition:transform .35s var(--ease-spring), box-shadow .35s, border-color .3s, background .3s;
  text-align:left; cursor:default; position:relative; overflow:hidden;
  /* Grid: icon left spanning 2 rows, h4+p stacked on right */
  display:grid; grid-template-columns:68px 1fr; gap:8px 24px; align-items:start;
}
.persona-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,107,43,.07), transparent 60%); opacity:0; transition:opacity .3s; }
.persona-card:hover { transform:translateY(-5px); background:rgba(255,107,43,.05); border-color:rgba(255,107,43,.22); box-shadow:0 30px 80px rgba(0,0,0,.45), var(--glow-orange); }
.persona-card:hover::before { opacity:1; }
.persona-icon { width:64px; height:64px; border-radius:18px; background:linear-gradient(135deg, rgba(255,107,43,.12), rgba(255,107,43,.05)); border:1px solid rgba(255,107,43,.16); color:var(--orange); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .3s; grid-row:span 2; align-self:center; }
.persona-card:hover .persona-icon { background:linear-gradient(135deg, rgba(255,107,43,.24), rgba(255,107,43,.1)); border-color:rgba(255,107,43,.38); box-shadow:0 8px 32px rgba(255,107,43,.28); }
.persona-card h4 { font-size:16px; font-weight:800; margin-bottom:4px; letter-spacing:-.015em; color:#fff; align-self:end; }
.persona-card p  { font-size:14px; color:rgba(255,255,255,.6); line-height:1.65; align-self:start; }

/* ════════════════════════════════════════════════
   WHY SYMBOL
════════════════════════════════════════════════ */
body .why-section { background:linear-gradient(175deg, #0b0e1f 0%, #090d1d 60%, #110e1e 100%) !important; color:var(--text); position:relative; overflow:hidden; }
.why-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 78% 20%, rgba(255,107,43,.1) 0%, transparent 50%), radial-gradient(ellipse at 22% 80%, rgba(79,142,247,.07) 0%, transparent 50%); pointer-events:none; }
.why-section .container { position:relative; z-index:1; }
/* ─── Connected panel grid ─── */
.why-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:64px;
  border:1px solid rgba(255,255,255,.09); border-radius:var(--r-xl); overflow:hidden;
}
.why-card {
  background:rgba(255,255,255,.028); border:none;
  border-right:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:44px; transition:background .3s;
  position:relative; overflow:hidden; cursor:default;
}
.why-card:nth-child(3),.why-card:nth-child(6) { border-right:none; }
.why-card:nth-child(4),.why-card:nth-child(5),.why-card:nth-child(6) { border-bottom:none; }
.why-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,107,43,.08), transparent 60%); opacity:0; transition:opacity .35s; }
.why-card::after  { content:''; position:absolute; left:0; top:20%; bottom:20%; width:2px; background:linear-gradient(180deg, transparent, var(--orange), transparent); opacity:0; transition:opacity .35s; }
.why-card:hover { background:rgba(255,107,43,.05); }
.why-card:hover::before { opacity:1; }
.why-card:hover::after  { opacity:1; }
/* First card gets a subtle orange tint to signal it's the hero card */
.why-card:nth-child(1) { background:rgba(255,107,43,.04); }
.why-card:nth-child(1) .why-num { background:rgba(255,107,43,.16); border-color:rgba(255,107,43,.32); color:var(--orange-bright); }
.why-num { display:inline-flex; align-items:center; justify-content:center; width:36px; height:28px; border-radius:7px; background:rgba(255,107,43,.09); border:1px solid rgba(255,107,43,.14); font-family:var(--font-mono); font-size:11px; font-weight:700; color:rgba(255,107,43,.7); letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; transition:all .3s; }
.why-card:hover .why-num { background:rgba(255,107,43,.22); border-color:rgba(255,107,43,.45); color:#ff9055; box-shadow:0 4px 20px rgba(255,107,43,.28); }
.why-card h3 { font-size:17px; font-weight:700; margin-bottom:12px; letter-spacing:-.022em; color:#fff; transition:color .3s; }
.why-card p  { font-size:14px; color:rgba(255,255,255,.55); line-height:1.75; transition:color .3s; }
.why-card:hover h3 { color:#fff; }
.why-card:hover p  { color:rgba(255,255,255,.72); }

/* ════════════════════════════════════════════════
   FINAL CTA
════════════════════════════════════════════════ */
body .cta-section { padding:80px 0 128px; background:linear-gradient(180deg, #0a0c1f 0%, #070918 100%) !important; }
.cta-wrap {
  background:linear-gradient(135deg, #c94000 0%, var(--orange) 35%, var(--orange-bright) 70%, #ffa574 100%);
  border-radius:var(--r-xl); padding:100px 72px; text-align:center; color:#fff;
  box-shadow:var(--shadow-orange), var(--shadow-xl);
  position:relative; overflow:hidden; transition:transform .35s var(--ease-spring), box-shadow .35s;
}
.cta-wrap:hover { transform:translateY(-5px); box-shadow:0 60px 140px rgba(255,107,43,.58), 0 12px 50px rgba(200,68,0,.35); }
.cta-wrap::before { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-size:200px 200px; mix-blend-mode:overlay; pointer-events:none; }
.cta-wrap::after { content:''; position:absolute; top:-50%; right:-10%; width:60%; height:200%; background:radial-gradient(ellipse, rgba(255,255,255,.16) 0%, transparent 65%); pointer-events:none; }
.cta-wrap > * { position:relative; z-index:1; }
.cta-wrap h2 { font-size:clamp(30px,4vw,56px); font-weight:900; letter-spacing:-.05em; line-height:1.04; color:#fff; -webkit-text-fill-color:#fff; }
.cta-wrap p  { font-size:18px; color:rgba(255,255,255,.8); margin:24px auto 0; max-width:520px; line-height:1.75; }
.cta-wrap .btn-row { display:flex; justify-content:center; gap:12px; margin-top:48px; flex-wrap:wrap; }
.cta-wrap .btn-primary { background:#fff; color:var(--orange-deep); box-shadow:0 4px 24px rgba(0,0,0,.15); font-weight:800; }
.cta-wrap .btn-primary:hover { background:#fff; color:var(--orange-strong); box-shadow:0 8px 40px rgba(0,0,0,.2); transform:translateY(-3px); }
.cta-wrap .btn-ghost { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.35); color:#fff; }
.cta-wrap .btn-ghost:hover { background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.6); }

/* ════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════ */
.footer { background:var(--bg); color:rgba(255,255,255,.38); padding:80px 0 56px; border-top:1px solid var(--border-dark); position:relative; overflow:hidden; }
.footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--orange), rgba(255,107,43,.5), transparent); opacity:.4; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:56px; }
.footer h5 { font-size:11px; font-weight:700; color:rgba(255,255,255,.2); text-transform:uppercase; letter-spacing:.12em; margin-bottom:22px; font-family:var(--font-mono); }
.footer a { display:block; font-size:14px; color:rgba(255,255,255,.4); margin-bottom:12px; transition:color .2s; position:relative; }
.footer a:hover { color:var(--orange-bright); }
.footer-about { font-size:14px; line-height:1.82; max-width:280px; color:rgba(255,255,255,.38); margin-top:16px; }
.footer-bottom { margin-top:56px; padding-top:28px; border-top:1px solid rgba(255,255,255,.05); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-bottom small { font-size:13px; color:rgba(255,255,255,.2); font-family:var(--font-mono); }

/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width:1100px) {
  :root { --px: 32px; }
  .problem-grid     { grid-template-columns:1fr; }
  .cap-bento        { grid-template-columns:1fr; }
  .cap-stack        { flex-direction:row; }
  .cap-grid         { grid-template-columns:1fr 1fr; }
  .why-grid         { grid-template-columns:1fr 1fr; }
  .steps-row        { grid-template-columns:repeat(2,1fr); gap:48px; }
  .steps-row::before{ display:none; }
  .stats-row        { grid-template-columns:repeat(2,1fr); }
  .stat-item::after { display:none; }
  .persona-grid     { grid-template-columns:1fr 1fr; }
  .footer-grid      { grid-template-columns:1fr 1fr; }
  .dashboard-body   { grid-template-columns:1fr; }
  .dash-sidebar     { flex-direction:row; overflow-x:auto; padding-bottom:8px; }
  .dash-sidebar::before { display:none; }
  .dash-stat-row    { grid-template-columns:repeat(2,1fr); }
  .mid-cta          { flex-direction:column; align-items:flex-start; gap:32px; }
  /* why-grid connected panel: reset to individual cards at tablet */
  .why-card         { border-right:1px solid rgba(255,255,255,.07) !important; border-bottom:1px solid rgba(255,255,255,.07) !important; }
  .why-card:nth-child(2n){ border-right:none !important; }
  .why-card:nth-child(5),.why-card:nth-child(6) { border-bottom:none !important; }
}
@media (max-width:768px) {
  :root { --px: 20px; }
  .section           { padding:80px 0; }
  .nav-links                { display:none; }
  .nav-links.is-open         {
    display:flex; flex-direction:column;
    position:fixed; top:72px; left:0; right:0;
    background:rgba(4,5,13,.98);
    backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
    padding:24px 20px;
    border-bottom:1px solid rgba(255,255,255,.07);
    z-index:99; gap:4px;
  }
  [data-theme="light"] .nav-links.is-open {
    background:rgba(245,247,252,.98);
    border-bottom-color:rgba(0,0,0,.08);
  }
  .hamburger         { display:flex; }
  /* Theme toggle: push it right next to the hamburger */
  .theme-toggle      { margin-left:auto; }
  .cap-bento, .cap-stack, .cap-grid,
  .why-grid, .use-grid, .problem-cards,
  .steps-row, .persona-grid { grid-template-columns:1fr; flex-direction:column; }
  .why-card          { border-right:none !important; }
  .why-card:last-child{ border-bottom:none !important; }
  .persona-card      { flex-direction:column; text-align:center; gap:16px; }
  .persona-icon      { margin:0 auto; }
  .stats-row         { grid-template-columns:1fr 1fr; gap:24px; }
  .mid-cta           { padding:40px 32px; }
  .cta-wrap          { padding:64px 28px; }
  /* CTA buttons: equal width, stacked */
  .cta-wrap .btn-row { flex-direction:column; align-items:stretch; gap:12px; }
  .cta-wrap .btn-row .btn { width:100%; justify-content:center; }
  .footer-grid       { grid-template-columns:1fr; gap:40px; }
  .use-card-full     { grid-column:auto; }
  .hero              { padding:80px 0 0; }
  .problem-grid      { gap:40px; }
  .hero h1           { font-size:clamp(44px,11vw,72px); }
  .dashboard-body    { min-height:200px; }
  /* Disable hover transforms on touch — prevents accidental page jumps */
  .cta-wrap:hover, .stat-item:hover, .problem-card:hover,
  .use-card:hover, .why-card:hover, .persona-card:hover,
  .step:hover .step-num { transform:none !important; box-shadow:none; }
}

/* ════════════════════════════════════════════════
   THEME TOGGLE BUTTON
════════════════════════════════════════════════ */
.theme-toggle {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7); cursor:pointer;
  transition:background .25s var(--ease-out), border-color .25s, color .2s, transform .2s;
}
.theme-toggle:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.22); color:#fff; transform:scale(1.08); }
.theme-toggle svg { pointer-events:none; }
.theme-toggle .icon-moon { display:none; }

/* ════════════════════════════════════════════════
   LIGHT MODE
════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:          #f5f7fc;
  --bg-2:        #eceff7;
  --bg-surface:  #ffffff;
  --bg-elevated: #ffffff;
  --black:       #f5f7fc;
  --text:         #0c0e1c;
  --text-muted:   rgba(12,14,28,0.56);
  --text-faint:   rgba(12,14,28,0.28);
  --text-gray:    #5e6880;
  --border-dark:  rgba(0,0,0,0.08);
  --border-light: rgba(0,0,0,0.06);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:    0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg:    0 24px 64px rgba(0,0,0,0.16);
  --shadow-card:  0 1px 4px rgba(0,0,0,0.05), 0 8px 32px rgba(0,0,0,0.09);
}

/* Toggle button in light mode */
[data-theme="light"] .theme-toggle { background:rgba(12,14,28,.06); border-color:rgba(12,14,28,.1); color:rgba(12,14,28,.6); }
[data-theme="light"] .theme-toggle:hover { background:rgba(12,14,28,.12); border-color:rgba(12,14,28,.2); color:#0c0e1c; }
[data-theme="light"] .theme-toggle .icon-sun  { display:none; }
[data-theme="light"] .theme-toggle .icon-moon { display:block; }

/* Logo swap */
.brand-logo-light { display:none; }
[data-theme="light"] .brand-logo-dark  { display:none; }
[data-theme="light"] .brand-logo-light { display:block; }
/* Custom logo (set via WordPress Customizer) */
[data-theme="light"] .brand img.custom-logo { filter:none; }

/* Base */
[data-theme="light"] body { background:#f5f7fc; color:#0c0e1c; }
[data-theme="light"] .nav { background:rgba(245,247,252,.85); border-bottom-color:rgba(0,0,0,.08); }
[data-theme="light"] .nav.is-scrolled { background:rgba(245,247,252,.97); box-shadow:0 4px 40px rgba(0,0,0,.12); }
[data-theme="light"] .nav::after { opacity:.4; }
[data-theme="light"] .nav-links a:not(.nav-cta):hover { color:var(--orange); background:rgba(0,0,0,.06); }
[data-theme="light"] .nav-links a.is-active { color:var(--orange-deep); }
[data-theme="light"] .hamburger { background:rgba(12,14,28,.04); border-color:rgba(12,14,28,.12); }
[data-theme="light"] .hamburger span { background:rgba(12,14,28,.7); }

/* Hero */
[data-theme="light"] .hero { background:#f5f7fc; }
[data-theme="light"] .hero::before { background-image:radial-gradient(circle,rgba(0,0,0,.025) 1px,transparent 1px); }
[data-theme="light"] .hero h1 .line { background:linear-gradient(180deg,#0c0e1c 0%,rgba(12,14,28,.78) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
[data-theme="light"] .hero .lead { color:rgba(12,14,28,.62); }
[data-theme="light"] .hero .eyebrow { color:var(--orange-deep); background:rgba(255,107,43,.06); }
[data-theme="light"] .btn-ghost { background:rgba(0,0,0,.06); color:rgba(12,14,28,.8); border-color:rgba(0,0,0,.12); backdrop-filter:none; }
[data-theme="light"] .btn-ghost:hover { background:rgba(0,0,0,.1); border-color:rgba(0,0,0,.2); color:#0c0e1c; }
[data-theme="light"] .btn-primary { color:#fff; background:var(--orange); box-shadow:var(--shadow-orange); }
[data-theme="light"] .btn-primary:hover { background:var(--orange-deep); }

/* Proof strip */
[data-theme="light"] .proof-strip { background:#fff; border-color:rgba(0,0,0,.07); }
[data-theme="light"] .proof-strip::after { background:linear-gradient(90deg,#fff 0%,transparent 12%,transparent 88%,#fff 100%); }
[data-theme="light"] .proof-label { color:rgba(12,14,28,.28); }
[data-theme="light"] .proof-logo { opacity:.45; }
[data-theme="light"] .proof-logo:hover { opacity:.8; }
[data-theme="light"] .proof-logo-text { color:rgba(12,14,28,.6); }

/* Section shared */
[data-theme="light"] .section-title { color:#0c0e1c; }
[data-theme="light"] .section-desc  { color:#5e6880; }
[data-theme="light"] .section-tag.dark { color:var(--orange-deep); background:rgba(255,107,43,.07); border-color:rgba(255,107,43,.18); }
[data-theme="light"] .section-tag.dark:hover { background:rgba(255,107,43,.12); box-shadow:none; }

/* Problem section */
[data-theme="light"] body .problem-section { background:linear-gradient(180deg,#eceff7 0%,#f0f3fa 100%) !important; }
[data-theme="light"] .problem-section::after { display:none; }
[data-theme="light"] .problem-section .section-title { color:#0c0e1c !important; }
[data-theme="light"] .problem-section .section-desc  { color:#5e6880 !important; }
[data-theme="light"] .problem-section .section-tag   { color:var(--orange-deep) !important; background:rgba(255,107,43,.07) !important; border-color:rgba(255,107,43,.18) !important; }
[data-theme="light"] .problem-card { background:#fff; border-color:rgba(0,0,0,.08); box-shadow:0 2px 16px rgba(0,0,0,.07); }
[data-theme="light"] .problem-card h4 { color:#0c0e1c !important; }
[data-theme="light"] .problem-card p  { color:rgba(12,14,28,.62) !important; }
[data-theme="light"] .problem-stat-wrap { background:rgba(255,107,43,.04); border-color:rgba(255,107,43,.15); }
[data-theme="light"] .problem-stat-desc   { color:rgba(12,14,28,.72); }
[data-theme="light"] .problem-stat-source { color:rgba(12,14,28,.38); }

/* How it works */
[data-theme="light"] body .how-section { background:linear-gradient(180deg,#f5f7fc 0%,#eceff7 100%) !important; }
[data-theme="light"] .how-section::before { display:none; }
[data-theme="light"] .how-section .section-title { color:#0c0e1c !important; }
[data-theme="light"] .how-section .section-desc  { color:#5e6880 !important; }
[data-theme="light"] .how-section .section-tag   { color:var(--orange-deep) !important; background:rgba(255,107,43,.07) !important; border-color:rgba(255,107,43,.18) !important; }
[data-theme="light"] .step h4 { color:#0c0e1c !important; }
[data-theme="light"] .step p  { color:rgba(12,14,28,.62) !important; }
[data-theme="light"] .step-num { border-color:rgba(255,107,43,.28); background:linear-gradient(135deg,rgba(255,107,43,.08),rgba(255,107,43,.03)); box-shadow:none; }
[data-theme="light"] .steps-row::before { opacity:.3; }

/* Capabilities */
[data-theme="light"] body .cap-section { background:linear-gradient(160deg,#f5f7fc 0%,#ecf0f8 55%,#f0f3fa 100%) !important; }
[data-theme="light"] .cap-section::before, [data-theme="light"] .cap-section::after { display:none; }
[data-theme="light"] .cap-section .section-title { color:#0c0e1c !important; }
[data-theme="light"] .cap-section .section-desc  { color:#5e6880 !important; }
[data-theme="light"] .cap-card { background:#fff; border-color:rgba(0,0,0,.08); box-shadow:0 2px 20px rgba(0,0,0,.07); }
[data-theme="light"] .cap-card h3 { color:#0c0e1c; }
[data-theme="light"] .cap-card p  { color:rgba(12,14,28,.62); }
[data-theme="light"] .cap-card:hover { border-color:rgba(255,107,43,.25); box-shadow:0 20px 60px rgba(0,0,0,.12),0 0 0 1px rgba(255,107,43,.1),var(--glow-orange); }
[data-theme="light"] .cap-tag { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); color:rgba(12,14,28,.45); }
[data-theme="light"] .cap-card:hover .cap-tag { color:var(--orange-deep); border-color:rgba(255,107,43,.2); }
[data-theme="light"] .mid-cta { background:linear-gradient(135deg,rgba(255,107,43,.07),rgba(255,107,43,.03)); }
[data-theme="light"] .mid-cta h3 { color:#0c0e1c; }
[data-theme="light"] .mid-cta p  { color:rgba(12,14,28,.62); }

/* Use cases */
[data-theme="light"] body .use-section { background:linear-gradient(180deg,#eceff7 0%,#f0f3fa 100%) !important; }
[data-theme="light"] .use-section::before { display:none; }
[data-theme="light"] .use-section .section-title { color:#0c0e1c !important; }
[data-theme="light"] .use-section .section-desc  { color:#5e6880 !important; }
[data-theme="light"] .use-section .section-tag   { color:var(--orange-deep) !important; background:rgba(255,107,43,.07) !important; border-color:rgba(255,107,43,.18) !important; }
[data-theme="light"] .use-card { background:#fff; border-color:rgba(0,0,0,.08); box-shadow:0 2px 16px rgba(0,0,0,.07); }
[data-theme="light"] .use-card h3 { color:#0c0e1c !important; }
[data-theme="light"] .use-card p  { color:rgba(12,14,28,.62) !important; }

/* Persona */
[data-theme="light"] body .persona-section { background:linear-gradient(180deg,#f0f3fa 0%,#eceff7 100%) !important; }
[data-theme="light"] .persona-section::before { display:none; }
[data-theme="light"] .persona-section .section-title { color:#0c0e1c !important; }
[data-theme="light"] .persona-section .section-desc  { color:#5e6880 !important; }
[data-theme="light"] .persona-section .section-tag   { color:var(--orange-deep) !important; background:rgba(255,107,43,.07) !important; border-color:rgba(255,107,43,.18) !important; }
[data-theme="light"] .persona-card { background:#fff; border-color:rgba(0,0,0,.08); box-shadow:0 2px 16px rgba(0,0,0,.07); }
[data-theme="light"] .persona-card h4 { color:#0c0e1c !important; }
[data-theme="light"] .persona-card p  { color:rgba(12,14,28,.62) !important; }
[data-theme="light"] .persona-icon { color:var(--orange); }

/* Why Symbol */
[data-theme="light"] body .why-section { background:linear-gradient(160deg,#f5f7fc 0%,#eceff7 55%,#f0f3fa 100%) !important; }
[data-theme="light"] .why-section::before, [data-theme="light"] .why-section::after { display:none; }
[data-theme="light"] .why-section .section-title { color:#0c0e1c !important; }
[data-theme="light"] .why-section .section-desc  { color:#5e6880 !important; }
[data-theme="light"] .why-card { background:#fff; border-color:rgba(0,0,0,.08) !important; box-shadow:0 2px 16px rgba(0,0,0,.07); }
[data-theme="light"] .why-card h3 { color:#0c0e1c !important; }
[data-theme="light"] .why-card p  { color:rgba(12,14,28,.62) !important; }

/* Footer */
[data-theme="light"] .footer { background:#fff !important; border-top-color:rgba(0,0,0,.08); color:rgba(12,14,28,.45); }
[data-theme="light"] .footer::before { opacity:.2; }
[data-theme="light"] .footer h5 { color:rgba(12,14,28,.22); }
[data-theme="light"] .footer a { color:rgba(12,14,28,.45); }
[data-theme="light"] .footer a:hover { color:var(--orange); }
[data-theme="light"] .footer-about { color:rgba(12,14,28,.45); }
[data-theme="light"] .footer-bottom { border-top-color:rgba(0,0,0,.06); }
[data-theme="light"] .footer-bottom small { color:rgba(12,14,28,.26); }

/* Hide cursor spotlight in light mode */
[data-theme="light"] .cursor-spotlight { opacity:0 !important; pointer-events:none; }

/* ════════════════════════════════════════════════
   AGENT SHOWCASE SECTION
════════════════════════════════════════════════ */
body .showcase-section {
  background:linear-gradient(170deg,#07091a 0%,#090d1f 50%,#0a0c1e 100%) !important;
  position:relative; overflow:hidden;
}
.showcase-section::before {
  content:''; position:absolute; top:-200px; left:-100px; width:800px; height:800px;
  background:radial-gradient(circle,rgba(255,107,43,.08) 0%,transparent 65%);
  border-radius:50%; pointer-events:none;
}
.showcase-section::after {
  content:''; position:absolute; bottom:-200px; right:-100px; width:700px; height:700px;
  background:radial-gradient(circle,rgba(79,142,247,.07) 0%,transparent 65%);
  border-radius:50%; pointer-events:none;
}
.showcase-section .container { position:relative; z-index:1; }
.showcase-section .section-title::after { box-shadow:0 2px 18px rgba(255,107,43,.5); width:52px; }

/* ── Agent tabs ── */
.agent-tabs {
  display:flex; gap:8px; margin-top:52px; padding:6px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; width:fit-content;
}
.agent-tab {
  display:flex; align-items:center; gap:10px; padding:12px 22px;
  border-radius:10px; background:transparent; border:none;
  color:rgba(255,255,255,.42); font-size:14px; font-weight:700;
  cursor:pointer; transition:all .22s var(--ease-out); letter-spacing:-.01em;
  font-family:var(--font); position:relative; white-space:nowrap;
}
.agent-tab-icon { display:flex; color:inherit; flex-shrink:0; }
.agent-tab-badge {
  padding:3px 9px; border-radius:20px;
  font-size:10px; font-weight:800; letter-spacing:.06em;
  font-family:var(--font-mono); text-transform:uppercase;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.28); transition:all .22s;
}
.agent-tab.is-active {
  background:rgba(255,107,43,.12); color:var(--orange-bright);
  box-shadow:0 0 0 1px rgba(255,107,43,.22),0 4px 20px rgba(255,107,43,.14);
}
.agent-tab.is-active .agent-tab-badge { background:rgba(255,107,43,.2); color:rgba(255,200,150,.9); }
.agent-tab:not(.is-active):hover { color:rgba(255,255,255,.75); background:rgba(255,255,255,.06); }

/* ── Showcase body ── */
.showcase-body {
  display:grid; grid-template-columns:1fr 1.15fr; gap:44px; margin-top:40px; align-items:start;
}

/* ── Info panels ── */
.showcase-panels { position:relative; min-height:420px; }
.showcase-panel { display:none; }
.showcase-panel.is-active { display:block; animation:fadeUp .5s var(--ease-out) both; }
.showcase-panel h3 {
  font-size:26px; font-weight:800; letter-spacing:-.04em;
  color:#fff; margin-bottom:14px; line-height:1.18;
}
.showcase-panel > p {
  font-size:15px; color:rgba(255,255,255,.58); line-height:1.78; margin-bottom:28px;
}
.showcase-features { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:32px; }
.showcase-features li {
  display:flex; align-items:flex-start; gap:12px;
  font-size:15px; color:rgba(255,255,255,.7); line-height:1.55;
}
.feat-check {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; min-width:22px; border-radius:7px;
  background:rgba(255,107,43,.12); border:1px solid rgba(255,107,43,.25);
  color:var(--orange); font-size:12px; font-weight:900; margin-top:1px;
}
.showcase-metric {
  display:inline-flex; align-items:center; gap:18px;
  background:rgba(255,107,43,.07); border:1px solid rgba(255,107,43,.18);
  border-radius:var(--r-lg); padding:20px 28px; margin-top:4px;
}
.showcase-metric-num {
  font-size:52px; font-weight:900; letter-spacing:-.06em; line-height:1;
  background:linear-gradient(135deg,var(--orange) 0%,var(--orange-bright) 60%,#ffd4a3 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  white-space:nowrap;
}
.showcase-metric-label { font-size:13px; color:rgba(255,255,255,.58); line-height:1.55; max-width:200px; }

/* ── Agent terminal ── */
.agent-terminal { position:sticky; top:100px; }
.terminal-frame {
  background:rgba(7,9,20,.98); border:1px solid rgba(255,255,255,.1); border-radius:18px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 32px 100px rgba(0,0,0,.65),0 8px 40px rgba(0,0,0,.4);
}
.terminal-bar {
  height:48px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:8px; padding:0 16px;
}
.terminal-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.terminal-dot:nth-child(1) { background:#ff5f57; box-shadow:0 0 6px rgba(255,95,87,.5); }
.terminal-dot:nth-child(2) { background:#febc2e; box-shadow:0 0 6px rgba(254,188,46,.4); }
.terminal-dot:nth-child(3) { background:#28c840; box-shadow:0 0 6px rgba(40,200,64,.4); }
.terminal-title-text {
  flex:1; font-size:12px; color:rgba(255,255,255,.28); font-family:var(--font-mono);
  font-weight:600; margin-left:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.terminal-agent-name { color:rgba(255,150,80,.85); }
.terminal-live {
  display:flex; align-items:center; gap:5px; font-size:10px; font-weight:800;
  font-family:var(--font-mono); letter-spacing:.08em; color:rgba(40,200,64,.9);
  background:rgba(40,200,64,.08); border:1px solid rgba(40,200,64,.2);
  border-radius:20px; padding:3px 10px; text-transform:uppercase; flex-shrink:0;
}
.terminal-live-dot {
  width:6px; height:6px; min-width:6px; border-radius:50%;
  background:#28c840; box-shadow:0 0 8px rgba(40,200,64,.9); animation:pulse 1.8s ease-in-out infinite;
}
.terminal-body {
  min-height:320px; max-height:420px; padding:24px;
  display:flex; flex-direction:column; gap:16px;
  font-family:var(--font-mono); font-size:13px; line-height:1.65;
  overflow-y:auto; scroll-behavior:smooth;
}
.terminal-body::-webkit-scrollbar { width:4px; }
.terminal-body::-webkit-scrollbar-track { background:transparent; }
.terminal-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:4px; }

/* Messages */
.t-msg { display:flex; flex-direction:column; gap:5px; width:100%; }
.t-msg-label { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.22); }
.t-msg.user .t-msg-label { text-align:right; }
.t-msg-bubble {
  padding:11px 15px; border-radius:12px; font-size:13px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; max-width:88%;
}
.t-msg.user .t-msg-bubble {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.8); margin-left:auto; border-radius:12px 12px 3px 12px;
}
.t-msg.agent .t-msg-bubble {
  background:rgba(255,107,43,.09); border:1px solid rgba(255,107,43,.2);
  color:rgba(255,220,190,.9); border-radius:3px 12px 12px 12px; max-width:100%;
}
.t-msg.system .t-msg-bubble {
  background:transparent; border:none; color:rgba(255,255,255,.25);
  font-size:11px; text-align:center; max-width:100%; padding:4px 0;
}
.t-msg.system .t-msg-label { display:none; }

/* Thinking dots */
.t-thinking {
  display:flex; align-items:center; gap:5px; padding:12px 16px;
  max-width:fit-content; background:rgba(255,107,43,.07); border:1px solid rgba(255,107,43,.15);
  border-radius:3px 12px 12px 12px;
}
.t-thinking span {
  width:7px; height:7px; border-radius:50%; background:var(--orange); opacity:.4;
  animation:thinkDot 1.3s ease-in-out infinite;
}
.t-thinking span:nth-child(2) { animation-delay:.22s; }
.t-thinking span:nth-child(3) { animation-delay:.44s; }
@keyframes thinkDot { 0%,100%{ opacity:.3; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.1); } }

/* Typing cursor */
.t-cursor {
  display:inline-block; width:2px; height:13px;
  background:var(--orange); margin-left:1px; vertical-align:middle;
  animation:cursorBlink .75s step-start infinite;
}
@keyframes cursorBlink { 0%,100%{ opacity:1; } 50%{ opacity:0; } }

.terminal-footer { padding:11px 16px; border-top:1px solid rgba(255,255,255,.05); background:rgba(255,255,255,.015); }
.terminal-input-hint { font-size:12px; color:rgba(255,255,255,.2); font-family:var(--font-mono); font-style:italic; }

/* ── Showcase responsive ── */
@media (max-width:1100px) {
  .showcase-body { grid-template-columns:1fr; }
  .agent-terminal { position:static; }
  .showcase-panels { min-height:auto; }
}
@media (max-width:768px) {
  .agent-tabs { flex-wrap:wrap; width:100%; }
  .agent-tab { flex:1 1 auto; min-width:90px; justify-content:center; padding:10px 14px; font-size:13px; }
  .agent-tab-badge { display:none; }
  .showcase-metric { flex-direction:column; text-align:center; gap:8px; padding:16px 20px; }
  .showcase-metric-num { font-size:40px; }
  .showcase-metric-label { max-width:100%; }
}

/* ── Light mode — showcase ── */
[data-theme="light"] body .showcase-section {
  background:linear-gradient(170deg,#f5f7fc 0%,#eceff7 50%,#f0f3fa 100%) !important;
}
[data-theme="light"] .showcase-section::before,
[data-theme="light"] .showcase-section::after { display:none; }
[data-theme="light"] .showcase-section .section-title { color:#0c0e1c !important; }
[data-theme="light"] .showcase-section .section-desc  { color:#5e6880 !important; }
[data-theme="light"] .showcase-section .section-tag   { color:var(--orange-deep) !important; background:rgba(255,107,43,.07) !important; border-color:rgba(255,107,43,.18) !important; }
[data-theme="light"] .agent-tabs { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); }
[data-theme="light"] .agent-tab { color:rgba(12,14,28,.42); }
[data-theme="light"] .agent-tab-badge { background:rgba(0,0,0,.06); color:rgba(12,14,28,.35); }
[data-theme="light"] .agent-tab.is-active { background:rgba(255,107,43,.1); color:var(--orange-deep); box-shadow:0 0 0 1px rgba(255,107,43,.2); }
[data-theme="light"] .agent-tab.is-active .agent-tab-badge { background:rgba(255,107,43,.14); color:var(--orange-deep); }
[data-theme="light"] .agent-tab:not(.is-active):hover { background:rgba(0,0,0,.05); color:rgba(12,14,28,.7); }
[data-theme="light"] .showcase-panel h3 { color:#0c0e1c; }
[data-theme="light"] .showcase-panel > p { color:rgba(12,14,28,.62); }
[data-theme="light"] .showcase-features li { color:rgba(12,14,28,.7); }
[data-theme="light"] .feat-check { background:rgba(255,107,43,.08); border-color:rgba(255,107,43,.2); }
[data-theme="light"] .showcase-metric { background:rgba(255,107,43,.05); border-color:rgba(255,107,43,.15); }
[data-theme="light"] .showcase-metric-label { color:rgba(12,14,28,.6); }
[data-theme="light"] .terminal-frame {
  background:#13162a; border-color:rgba(255,255,255,.12);
  box-shadow:0 0 0 1px rgba(0,0,0,.1),0 32px 100px rgba(0,0,0,.2),0 8px 40px rgba(0,0,0,.15);
}

/* ════════════════════════════════════════════════
   CAPABILITIES + LIVE COMBINED SECTION
════════════════════════════════════════════════ */
body .capabilities-live-section {
  background:linear-gradient(170deg,#07091a 0%,#090d1f 50%,#0a0c1e 100%) !important;
  position:relative; overflow:hidden;
}
.capabilities-live-section::before {
  content:''; position:absolute; top:-200px; left:-100px; width:800px; height:800px;
  background:radial-gradient(circle,rgba(255,107,43,.08) 0%,transparent 65%);
  border-radius:50%; pointer-events:none;
}
.capabilities-live-section::after {
  content:''; position:absolute; bottom:-200px; right:-100px; width:700px; height:700px;
  background:radial-gradient(circle,rgba(79,142,247,.07) 0%,transparent 65%);
  border-radius:50%; pointer-events:none;
}
.capabilities-live-section .container { position:relative; z-index:1; }
.capabilities-live-section .section-title::after { box-shadow:0 2px 18px rgba(255,107,43,.5); width:52px; }

/* ── Three agent cards ── */
.cap-live-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px;
}
.cap-live-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:20px; padding:32px; cursor:pointer;
  transition:all .3s var(--ease-out); position:relative; overflow:hidden;
}
.cap-live-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--orange),var(--orange-bright),transparent);
  opacity:0; transition:opacity .3s;
}
.cap-live-card:hover { background:rgba(255,107,43,.06); border-color:rgba(255,107,43,.22); transform:translateY(-5px); box-shadow:0 20px 60px rgba(0,0,0,.4); }
.cap-live-card.is-active { background:rgba(255,107,43,.1); border-color:rgba(255,107,43,.38); transform:translateY(-5px); box-shadow:0 0 0 1px rgba(255,107,43,.2),0 24px 64px rgba(255,107,43,.16),0 8px 32px rgba(0,0,0,.4); }
.cap-live-card:hover::before { opacity:.6; }
.cap-live-card.is-active::before { opacity:1; }

.clc-header { display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
.clc-icon {
  width:48px; height:48px; min-width:48px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(255,107,43,.15),rgba(255,107,43,.06));
  border:1px solid rgba(255,107,43,.2); color:var(--orange);
  display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.cap-live-card:hover .clc-icon,
.cap-live-card.is-active .clc-icon { background:linear-gradient(135deg,rgba(255,107,43,.28),rgba(255,107,43,.14)); border-color:rgba(255,107,43,.45); box-shadow:0 0 24px rgba(255,107,43,.28); }
.clc-head-text { flex:1; }
.clc-badge {
  display:inline-block; padding:3px 9px; border-radius:20px; margin-bottom:6px;
  font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  font-family:var(--font-mono); background:rgba(255,107,43,.1);
  border:1px solid rgba(255,107,43,.2); color:rgba(255,200,150,.85);
}
.cap-live-card h3 { font-size:17px; font-weight:800; color:#fff; letter-spacing:-.025em; line-height:1.2; }
.cap-live-card > p { font-size:14px; color:rgba(255,255,255,.58); line-height:1.72; margin-bottom:20px; margin-top:14px; }

.clc-features { list-style:none; display:flex; flex-direction:column; gap:8px; }
.clc-features li { display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(255,255,255,.6); line-height:1.4; transition:color .25s; }
.clc-features li::before { content:''; display:block; width:5px; height:5px; min-width:5px; border-radius:50%; background:var(--orange); opacity:.6; flex-shrink:0; transition:opacity .25s; }
.cap-live-card.is-active .clc-features li { color:rgba(255,255,255,.82); }
.cap-live-card.is-active .clc-features li::before { opacity:1; }

.clc-footer { display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.07); }
.clc-metric { padding:5px 12px; border-radius:var(--r-pill); background:rgba(255,107,43,.07); border:1px solid rgba(255,107,43,.15); font-size:12px; font-weight:700; color:var(--orange-bright); font-family:var(--font-mono); }
.clc-active-label { font-size:11px; font-weight:700; font-family:var(--font-mono); color:rgba(40,200,64,.9); letter-spacing:.08em; text-transform:uppercase; opacity:0; transition:opacity .35s; }
.cap-live-card.is-active .clc-active-label { opacity:1; }

/* ── Full-width terminal ── */
.cap-live-terminal { margin-top:20px; }
.cap-live-terminal .terminal-frame { border-radius:18px; }
.cap-live-terminal .terminal-body { min-height:280px; max-height:360px; }
.cap-live-terminal .terminal-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* ── Platform-style WHITE terminal (matches Symbol app UI) ── */
.cap-live-terminal .terminal-frame {
  background:#ffffff; border-color:rgba(0,0,0,.1);
  box-shadow:0 2px 24px rgba(0,0,0,.1),0 8px 40px rgba(0,0,0,.07);
}
.cap-live-terminal .terminal-bar {
  background:#f8f9fa; border-bottom-color:rgba(0,0,0,.08); gap:6px;
}
.cap-live-terminal .terminal-symbol-icon {
  display:flex; align-items:center; flex-shrink:0; margin-right:2px;
}
.cap-live-terminal .terminal-logo-img {
  height:28px; width:auto; display:block; object-fit:contain;
}
.cap-live-terminal .terminal-title-sep {
  color:rgba(0,0,0,.2); font-size:13px; font-family:var(--font-mono);
  padding:0 4px; flex-shrink:0;
}
.cap-live-terminal .terminal-agent-name {
  flex:1; font-size:12px; color:#ef4444; font-family:var(--font-mono);
  font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cap-live-terminal .terminal-body {
  background:#ffffff;
  scrollbar-color:rgba(0,0,0,.12) transparent;
}
.cap-live-terminal .terminal-body::-webkit-scrollbar-thumb { background:rgba(0,0,0,.12); }
.cap-live-terminal .terminal-footer {
  background:#f8f9fa; border-top-color:rgba(0,0,0,.08);
}
.cap-live-terminal .terminal-input-hint { color:rgba(0,0,0,.28); }

/* Messages — platform bubble style */
.cap-live-terminal .t-msg-label {
  display:flex; align-items:center; gap:5px; color:rgba(0,0,0,.38);
}
.cap-live-terminal .t-msg.user .t-msg-label { justify-content:flex-end; }
.cap-live-terminal .t-msg.user .t-msg-bubble {
  background:#ef4444; border:none; color:#ffffff;
  border-radius:20px 20px 4px 20px;
}
.cap-live-terminal .t-msg.agent .t-msg-bubble {
  background:#ffffff; border:1px solid rgba(0,0,0,.1); color:rgba(0,0,0,.82);
  border-radius:4px 20px 20px 20px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.cap-live-terminal .t-msg.system .t-msg-bubble { color:rgba(0,0,0,.28); }
.cap-live-terminal .t-thinking { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); }
.cap-live-terminal .t-cursor { background:#ef4444; }

/* IAC widget — light */
.cap-live-terminal .t-iac-card { background:#f8f9fa; border-color:rgba(0,0,0,.1); }
.cap-live-terminal .t-iac-repo-hdr { background:#fff; border-color:rgba(0,0,0,.08); color:rgba(0,0,0,.7); }
.cap-live-terminal .t-iac-tabs { background:#fff; border-color:rgba(0,0,0,.08); }
.cap-live-terminal .t-iac-tab { color:rgba(0,0,0,.38); }
.cap-live-terminal .t-iac-tab.is-active { color:#4f8ef7; border-bottom-color:#4f8ef7; background:rgba(79,142,247,.06); }
.cap-live-terminal .t-iac-tab:not(.is-active):hover { color:rgba(0,0,0,.65); background:rgba(0,0,0,.03); }
.cap-live-terminal .t-iac-code { background:#f0f4ff; }
.cap-live-terminal .t-code-h1 { color:#1a56db; }
.cap-live-terminal .t-code-h2 { color:#0891b2; }
.cap-live-terminal .t-code-line,
.cap-live-terminal .t-code-item,
.cap-live-terminal .t-code-step { color:rgba(0,0,0,.65); }
.cap-live-terminal .t-code-item strong { color:#1a56db; }
.cap-live-terminal .t-code-step code { background:rgba(0,0,0,.07); color:#1a56db; }
.cap-live-terminal .t-iac-cost-hdr { background:#fff; border-color:rgba(0,0,0,.07); color:rgba(0,0,0,.55); }
.cap-live-terminal .t-iac-cost-total { background:rgba(34,197,94,.07); border-color:rgba(34,197,94,.18); color:rgba(0,0,0,.75); }
.cap-live-terminal .t-iac-table th { color:rgba(0,0,0,.38); }
.cap-live-terminal .t-iac-table tr { border-color:rgba(0,0,0,.06); }
.cap-live-terminal .t-iac-table tr:hover { background:rgba(0,0,0,.02); }
.cap-live-terminal .t-iac-svc { color:rgba(0,0,0,.8); }
.cap-live-terminal .t-iac-res { color:#4f8ef7; }
.cap-live-terminal .t-iac-dl-row { background:#f8f9fa; border-color:rgba(0,0,0,.07); }

/* FinOps widget — light */
.cap-live-terminal .t-finops-stat { background:#fff; border-color:rgba(0,0,0,.09); box-shadow:0 2px 8px rgba(0,0,0,.05); }
.cap-live-terminal .t-finops-stat-lbl { color:rgba(0,0,0,.4); }
.cap-live-terminal .t-finops-stat-val { color:#0f172a; }
.cap-live-terminal .t-finops-svc-name { color:#4f8ef7; }
.cap-live-terminal .t-finops-chart-card { background:#fff; border-color:rgba(0,0,0,.09); box-shadow:0 2px 8px rgba(0,0,0,.05); }
.cap-live-terminal .t-finops-chart-title { color:rgba(0,0,0,.65); }
.cap-live-terminal .t-finops-lgnd-name { color:rgba(0,0,0,.7); }
.cap-live-terminal .t-finops-lgnd-val { color:rgba(0,0,0,.5); }
.cap-live-terminal .t-donut-center { color:rgba(0,0,0,.75); }
.cap-live-terminal .t-chart-anomaly { background:rgba(239,68,68,.05); border-color:rgba(239,68,68,.15); color:rgba(160,40,40,.85); }
.cap-live-terminal .t-chart-anomaly strong { color:rgba(160,40,40,.95); }

/* Pipeline widget — light */
.cap-live-terminal .t-pipe-list { border-color:rgba(0,0,0,.1); }
.cap-live-terminal .t-pipe-row { background:#fff; border-color:rgba(0,0,0,.06); }
.cap-live-terminal .t-pipe-row:hover { background:rgba(0,0,0,.02); }
.cap-live-terminal .t-pipe-name { color:rgba(0,0,0,.78); }
.cap-live-terminal .t-pipe-time { color:rgba(0,0,0,.35); }
.cap-live-terminal .t-pipe-dur { color:rgba(0,0,0,.32); }
.cap-live-terminal .t-pipe-hint { background:rgba(79,142,247,.06); border-color:rgba(79,142,247,.2); color:rgba(30,60,130,.75); }
.cap-live-terminal .t-pipe-hint strong { color:rgba(30,60,130,.92); }
.cap-live-terminal .t-pipe-hint-icon { color:rgba(79,142,247,.8); }
.terminal-try-btn {
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  padding:7px 18px; border-radius:9px; font-size:13px; font-weight:700;
  background:var(--orange); color:#fff; text-decoration:none; font-family:var(--font);
  transition:background .2s,transform .2s; box-shadow:0 4px 16px rgba(255,107,43,.3);
}
.terminal-try-btn:hover { background:var(--orange-deep); transform:translateY(-1px); }

/* ── Responsive ── */
@media (max-width:1100px) {
  .cap-live-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .cap-live-grid { grid-template-columns:1fr; gap:12px; }
  .cap-live-card { padding:24px; }
  .cap-live-terminal .terminal-body { min-height:220px; max-height:300px; }
}

/* ── Light mode — combined section ── */
[data-theme="light"] body .capabilities-live-section {
  background:linear-gradient(170deg,#f5f7fc 0%,#eceff7 50%,#f0f3fa 100%) !important;
}
[data-theme="light"] .capabilities-live-section::before,
[data-theme="light"] .capabilities-live-section::after { display:none; }
[data-theme="light"] .capabilities-live-section .section-title { color:#0c0e1c !important; }
[data-theme="light"] .capabilities-live-section .section-desc  { color:#5e6880 !important; }
[data-theme="light"] .capabilities-live-section .section-tag   { color:var(--orange-deep) !important; background:rgba(255,107,43,.07) !important; border-color:rgba(255,107,43,.18) !important; }
[data-theme="light"] .cap-live-card { background:#fff; border-color:rgba(0,0,0,.09); box-shadow:0 2px 16px rgba(0,0,0,.07); }
[data-theme="light"] .cap-live-card:hover { background:rgba(255,107,43,.04); border-color:rgba(255,107,43,.2); box-shadow:0 12px 40px rgba(0,0,0,.1); }
[data-theme="light"] .cap-live-card.is-active { background:rgba(255,107,43,.06); border-color:rgba(255,107,43,.32); box-shadow:0 0 0 1px rgba(255,107,43,.18),0 20px 56px rgba(255,107,43,.12); }
[data-theme="light"] .cap-live-card h3 { color:#0c0e1c; }
[data-theme="light"] .cap-live-card > p { color:rgba(12,14,28,.62); }
[data-theme="light"] .clc-features li { color:rgba(12,14,28,.65); }
[data-theme="light"] .clc-features li::before { opacity:.8; }
[data-theme="light"] .cap-live-card.is-active .clc-features li { color:rgba(12,14,28,.82); }
[data-theme="light"] .clc-footer { border-top-color:rgba(0,0,0,.08); }
[data-theme="light"] .clc-active-label { color:rgba(20,160,60,.9); }

/* ════════════════════════════════════════════════
   TERMINAL RICH WIDGETS
════════════════════════════════════════════════ */
.t-widget {
  width:100%; animation:tWidgetIn .28s ease both;
}
@keyframes tWidgetIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ── Download card (Landing Zone IaC output) ── */
.t-dl-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; overflow:hidden; font-size:12.5px;
}
.t-dl-header {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.7); font-weight:600;
}
.t-dl-header svg { color:var(--orange); flex-shrink:0; }
.t-dl-badge {
  margin-left:auto; padding:2px 8px; border-radius:20px;
  background:rgba(255,107,43,.1); border:1px solid rgba(255,107,43,.2);
  color:var(--orange-bright); font-size:11px; font-weight:700; font-family:var(--font-mono);
}
.t-dl-files { list-style:none; padding:0; margin:0; }
.t-dl-file {
  display:flex; align-items:center; gap:8px;
  padding:7px 14px; border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .15s;
}
.t-dl-file:last-child { border-bottom:none; }
.t-dl-file:hover { background:rgba(255,255,255,.03); }
.t-dl-file svg { color:rgba(255,107,43,.55); flex-shrink:0; }
.t-dl-filename { flex:1; color:rgba(255,255,255,.72); font-family:var(--font-mono); font-size:12px; }
.t-dl-size { color:rgba(255,255,255,.25); font-family:var(--font-mono); font-size:11px; }
.t-dl-footer {
  padding:10px 14px; display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,.02); border-top:1px solid rgba(255,255,255,.05);
}
.t-dl-compliance {
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:rgba(40,200,80,.8); font-family:var(--font-mono);
}
.t-dl-compliance svg { color:rgba(40,200,80,.8); }
.t-dl-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:8px; font-size:12px; font-weight:700;
  background:linear-gradient(135deg,rgba(255,107,43,.18),rgba(255,107,43,.1));
  border:1px solid rgba(255,107,43,.3); color:var(--orange-bright);
  cursor:default; font-family:var(--font); text-decoration:none; user-select:none;
  transition:all .2s;
}
.t-dl-btn:hover { background:linear-gradient(135deg,rgba(255,107,43,.26),rgba(255,107,43,.16)); box-shadow:0 4px 16px rgba(255,107,43,.2); }

/* ── Bar chart (FinOps cost analysis) ── */
.t-chart-wrap {
  padding:14px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08); border-radius:12px;
}
.t-chart-title {
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.3); font-family:var(--font-mono); margin-bottom:13px;
}
.t-chart-row { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.t-chart-row:last-of-type { margin-bottom:0; }
.t-chart-label { width:66px; font-size:12px; color:rgba(255,255,255,.45); text-align:right; flex-shrink:0; font-family:var(--font-mono); }
.t-chart-track { flex:1; height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.t-chart-bar { height:100%; border-radius:4px; width:0; transition:width 1s cubic-bezier(.4,0,.2,1); }
.t-chart-bar.primary   { background:linear-gradient(90deg,var(--orange),#ff9a5c); }
.t-chart-bar.secondary { background:linear-gradient(90deg,#4f8ef7,#7bb3ff); }
.t-chart-bar.tertiary  { background:linear-gradient(90deg,#8b5cf6,#a78bfa); }
.t-chart-bar.quaternary{ background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.35)); }
.t-chart-val { width:46px; font-size:12px; color:rgba(255,255,255,.65); font-family:var(--font-mono); font-weight:600; }
.t-chart-anomaly {
  display:flex; align-items:flex-start; gap:9px; margin-top:11px;
  padding:9px 12px; border-radius:9px;
  background:rgba(239,68,68,.07); border:1px solid rgba(239,68,68,.18);
  font-size:11.5px; color:rgba(255,140,140,.82); font-family:var(--font-mono); line-height:1.55;
}
.t-chart-anomaly strong { color:rgba(255,160,160,.95); }
.t-chart-anomaly-dot { width:8px; height:8px; min-width:8px; border-radius:50%; background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.6); margin-top:4px; }

/* ── Pipeline status list (DevOps) ── */
.t-pipe-list { border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; }
.t-pipe-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; background:rgba(255,255,255,.025);
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:12px; font-family:var(--font-mono); transition:background .15s;
}
.t-pipe-row:last-child { border-bottom:none; }
.t-pipe-row:hover { background:rgba(255,255,255,.04); }
.t-pipe-dot { width:8px; height:8px; min-width:8px; border-radius:50%; flex-shrink:0; }
.t-pipe-row.success .t-pipe-dot { background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.55); }
.t-pipe-row.partial .t-pipe-dot { background:#f59e0b; box-shadow:0 0 8px rgba(245,158,11,.55); }
.t-pipe-row.failed  .t-pipe-dot { background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.55); }
.t-pipe-name { flex:1; color:rgba(255,255,255,.75); }
.t-pipe-time { color:rgba(255,255,255,.28); font-size:11px; }
.t-pipe-badge { padding:2px 7px; border-radius:5px; font-size:10px; font-weight:800; letter-spacing:.05em; }
.t-pipe-row.success .t-pipe-badge { background:rgba(34,197,94,.12);  color:#4ade80; }
.t-pipe-row.partial .t-pipe-badge { background:rgba(245,158,11,.12); color:#fbbf24; }
.t-pipe-row.failed  .t-pipe-badge { background:rgba(239,68,68,.12);  color:#f87171; }
.t-pipe-dur { color:rgba(255,255,255,.22); font-size:11px; min-width:90px; text-align:right; }
.t-pipe-hint {
  display:flex; align-items:flex-start; gap:9px; margin-top:8px;
  padding:9px 12px; border-radius:9px;
  background:rgba(79,142,247,.07); border:1px solid rgba(79,142,247,.18);
  font-size:11.5px; color:rgba(150,190,255,.78); font-family:var(--font-mono); line-height:1.55;
}
.t-pipe-hint strong { color:rgba(190,220,255,.95); }
.t-pipe-hint-icon { flex-shrink:0; color:rgba(150,190,255,.7); margin-top:2px; }

/* ════════════════════════════════════════════════
   IAC AGENT WIDGET  (matches platform UI)
════════════════════════════════════════════════ */
.t-iac-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09);
  border-radius:12px; overflow:hidden; font-size:12.5px;
}
.t-iac-repo-hdr {
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; border-bottom:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.65); font-weight:600; font-size:12px;
  background:rgba(255,255,255,.025);
}
.t-iac-repo-hdr svg { color:var(--orange); flex-shrink:0; }

/* File tabs */
.t-iac-tabs {
  display:flex; gap:0; border-bottom:1px solid rgba(255,255,255,.07);
  overflow-x:auto; scrollbar-width:none; background:rgba(255,255,255,.02);
}
.t-iac-tabs::-webkit-scrollbar { display:none; }
.t-iac-tab {
  padding:7px 14px; font-size:12px; font-family:var(--font-mono);
  color:rgba(255,255,255,.35); cursor:default; white-space:nowrap;
  border-bottom:2px solid transparent; transition:color .15s;
  user-select:none;
}
.t-iac-tab.is-active { color:#4f8ef7; border-bottom-color:#4f8ef7; background:rgba(79,142,247,.06); }
.t-iac-tab:not(.is-active):hover { color:rgba(255,255,255,.55); background:rgba(255,255,255,.03); }

/* Code viewer */
.t-iac-code {
  padding:12px 14px; font-family:var(--font-mono); font-size:12px;
  line-height:1.7; max-height:170px; overflow-y:auto;
  background:rgba(0,0,0,.25); scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.1) transparent;
}
.t-iac-code::-webkit-scrollbar { width:3px; }
.t-iac-code::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }
.t-code-h1  { color:#4f8ef7; font-weight:700; margin-bottom:2px; }
.t-code-h2  { color:#22c55e; font-weight:700; margin-top:6px; margin-bottom:2px; }
.t-code-line{ color:rgba(255,255,255,.55); }
.t-code-item{ color:rgba(255,255,255,.6); padding-left:8px; }
.t-code-item strong { color:rgba(255,200,130,.85); }
.t-code-step{ color:rgba(255,255,255,.6); padding-left:4px; }
.t-code-step code { background:rgba(255,255,255,.08); padding:1px 5px; border-radius:4px; color:rgba(255,200,130,.9); font-size:11px; }

/* Cost estimate */
.t-iac-cost-section { border-top:1px solid rgba(255,255,255,.07); }
.t-iac-cost-hdr {
  display:flex; align-items:center; gap:7px;
  padding:9px 14px; font-weight:700; font-size:12px;
  color:rgba(255,255,255,.5); background:rgba(255,255,255,.02);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.t-iac-cost-hdr svg { color:#22c55e; }
.t-iac-cost-total {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; margin:0;
  background:rgba(34,197,94,.07); border-bottom:1px solid rgba(34,197,94,.15);
  font-size:13px; font-weight:600; color:rgba(255,255,255,.75);
}
.t-iac-total-val { color:#4ade80; font-weight:800; font-family:var(--font-mono); font-size:14px; }
.t-iac-table { width:100%; border-collapse:collapse; font-size:12px; }
.t-iac-table thead tr { border-bottom:1px solid rgba(255,255,255,.07); }
.t-iac-table th {
  padding:7px 14px; text-align:left; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.3);
}
.t-iac-table th:last-child { text-align:right; }
.t-iac-table tr { border-bottom:1px solid rgba(255,255,255,.04); transition:background .12s; }
.t-iac-table tr:last-child { border-bottom:none; }
.t-iac-table tr:hover { background:rgba(255,255,255,.03); }
.t-iac-svc  { padding:7px 14px; color:rgba(255,255,255,.75); font-weight:500; }
.t-iac-res  { padding:7px 14px; color:#4f8ef7; font-family:var(--font-mono); font-size:11.5px; }
.t-iac-cost-cell { padding:7px 14px; text-align:right; color:#4ade80; font-family:var(--font-mono); font-weight:700; }

/* Download button — lavender/purple like platform */
.t-iac-dl-row { padding:10px 14px; border-top:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); }
.t-iac-dl-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 16px; border-radius:8px; font-size:12.5px; font-weight:700;
  background:rgba(139,92,246,.15); border:1px solid rgba(139,92,246,.3);
  color:rgba(196,167,255,.9); text-decoration:none; font-family:var(--font);
  cursor:default; user-select:none; transition:all .2s;
}
.t-iac-dl-btn:hover { background:rgba(139,92,246,.25); box-shadow:0 4px 16px rgba(139,92,246,.2); }
.t-iac-dl-btn svg { color:rgba(196,167,255,.8); }

/* ════════════════════════════════════════════════
   FINOPS AGENT WIDGET — Donut chart (matches platform)
════════════════════════════════════════════════ */
.t-finops-card { display:flex; flex-direction:column; gap:10px; }

/* Two stat cards */
.t-finops-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.t-finops-stat {
  padding:12px 16px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.t-finops-stat-lbl { font-size:11px; color:rgba(255,255,255,.38); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; }
.t-finops-stat-val { font-size:20px; font-weight:800; color:#fff; letter-spacing:-.03em; }
.t-finops-svc-name { color:#4f8ef7; }

/* Chart card */
.t-finops-chart-card {
  padding:14px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
}
.t-finops-chart-title {
  font-size:12px; font-weight:700; color:rgba(255,255,255,.6); margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.t-finops-chart-badge {
  padding:2px 7px; border-radius:20px; font-size:10px; font-weight:700;
  background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.22);
  color:#fbbf24; font-family:var(--font-mono);
}
.t-finops-chart-body { display:flex; align-items:center; gap:20px; }

/* Donut ring — CSS conic-gradient */
.t-donut-wrap {
  position:relative; width:110px; height:110px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.t-donut-ring {
  position:absolute; inset:0; border-radius:50%;
  -webkit-mask:radial-gradient(transparent 40%, #000 41%);
  mask:radial-gradient(transparent 40%, #000 41%);
}
.t-donut-center {
  position:relative; z-index:1; font-size:12px; font-weight:800;
  color:rgba(255,255,255,.8); text-align:center; pointer-events:none;
  font-family:var(--font-mono);
}

/* Legend */
.t-finops-legend { list-style:none; display:flex; flex-direction:column; gap:7px; flex:1; }
.t-finops-legend li { display:flex; align-items:center; gap:7px; font-size:12px; }
.t-finops-dot { width:9px; height:9px; min-width:9px; border-radius:50%; flex-shrink:0; }
.t-finops-lgnd-name { flex:1; color:rgba(255,255,255,.65); }
.t-finops-lgnd-val  { color:rgba(255,255,255,.5); font-family:var(--font-mono); font-size:11.5px; font-weight:600; }