/* ============================================================
   askotter v5.0 - Light/Dark + Modern UI + Animations
   Space Grotesk (headings/body) + DM Mono (data/terminal/tags)
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;transition:background .35s ease, color .35s ease}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* ==================== LIGHT THEME (default) ==================== */
:root{
  --bg:#FFFFFF;--bg-alt:#F5F5F5;--bg-card:#FFFFFF;
  --text:#1A1A1A;--text-body:#3A3A3A;--text-muted:#666666;--text-faint:#888888;
  --border:#DDDDDD;--border-hover:#BBBBBB;--border-focus:#1A1A1A;
  --accent:#00CC6A;--accent-hover:#00AA55;--accent-soft:rgba(0,255,136,0.06);
  --accent-glow:rgba(0,255,136,0.15);
  --success:#16A34A;--warning:#D97706;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.1);
  --shadow-btn:0 1px 3px rgba(0,204,106,.15),0 4px 12px rgba(0,204,106,.1);
  --shadow-btn-hover:0 2px 8px rgba(0,204,106,.2),0 8px 24px rgba(0,204,106,.18);
  --nav-bg:rgba(255,255,255,.88);
  --grid-line:rgba(0,0,0,.018);
  --c1:#0077CC;--c1-soft:rgba(0,119,204,0.06);--c1-border:rgba(0,119,204,0.22);
  --c2:#E85D00;--c2-soft:rgba(232,93,0,0.06);--c2-border:rgba(232,93,0,0.22);
  --c3:#7C3AED;--c3-soft:rgba(124,58,237,0.06);--c3-border:rgba(124,58,237,0.22);
  --c4:#0F766E;--c4-soft:rgba(15,118,110,0.06);--c4-border:rgba(15,118,110,0.22);
  --c5:#1A1A1A;--c5-soft:rgba(26,26,26,0.04);--c5-border:rgba(26,26,26,0.15);
  --f-sans:'Space Grotesk','Outfit',system-ui,-apple-system,sans-serif;
  --f-mono:'DM Mono',monospace;
  --fs-body:1.0625rem;--fs-mid:0.9375rem;--fs-small:0.875rem;
  --fs-mono:0.875rem;--fs-mono-sm:0.8125rem;--fs-mono-xs:0.75rem;
  --lh-body:1.7;--lh-ui:1.5;
  --radius:8px;--radius-sm:6px;--radius-lg:12px;
  --btn-gradient:linear-gradient(135deg,#00CC6A 0%,#00AA55 100%);
  --btn-gradient-hover:linear-gradient(135deg,#00FF88 0%,#00CC6A 100%);
}

/* ==================== DARK THEME ==================== */
[data-theme="dark"]{
  --bg:#0A0A0A;--bg-alt:#111110;--bg-card:#1A1A18;
  --text:#E8E9EC;--text-body:#A8ABB3;--text-muted:#6E7179;--text-faint:#4A4D55;
  --border:#262A33;--border-hover:#3A3F4A;--border-focus:#E8E9EC;
  --accent:#00FF88;--accent-hover:#00CC6A;--accent-soft:rgba(0,255,136,0.08);
  --accent-glow:rgba(0,255,136,0.2);
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  --shadow-btn:0 1px 3px rgba(0,255,136,.2),0 4px 14px rgba(0,255,136,.12);
  --shadow-btn-hover:0 2px 8px rgba(0,255,136,.25),0 10px 30px rgba(0,255,136,.2);
  --nav-bg:rgba(11,13,17,.88);
  --grid-line:rgba(255,255,255,.025);
  --c1:#4DA3FF;--c1-soft:rgba(77,163,255,0.08);--c1-border:rgba(77,163,255,0.2);
  --c2:#FF8C42;--c2-soft:rgba(255,140,66,0.08);--c2-border:rgba(255,140,66,0.2);
  --c3:#A78BFA;--c3-soft:rgba(167,139,250,0.08);--c3-border:rgba(167,139,250,0.2);
  --c4:#2DD4BF;--c4-soft:rgba(45,212,191,0.08);--c4-border:rgba(45,212,191,0.2);
  --c5:#E8E9EC;--c5-soft:rgba(232,233,236,0.05);--c5-border:rgba(232,233,236,0.12);
  --success:#34D399;--warning:#FBBF24;
  --btn-gradient:linear-gradient(135deg,#00FF88 0%,#00CC6A 100%);
  --btn-gradient-hover:linear-gradient(135deg,#33FFaa 0%,#00FF88 100%);
}

.container{max-width:1200px;margin:0 auto;padding:0 2.5rem}
.grid-bg{position:fixed;inset:0;z-index:-1;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}

/* ==================== TOP BAR ==================== */
.top-bar{background:var(--bg-alt);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1001;transition:background .35s ease,border-color .35s ease}
.top-bar-inner{max-width:1200px;margin:0 auto;padding:0 2.5rem;height:36px;display:flex;align-items:center;justify-content:space-between}
.top-bar-values{display:flex;align-items:center;gap:0;overflow:hidden;flex:1;min-width:0}
.top-bar-item{font-family:var(--f-mono);font-size:10px;letter-spacing:0.5px;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;padding:0 12px}
.top-bar-sep{width:1px;height:12px;background:var(--border);flex-shrink:0}
.top-bar .theme-toggle{width:28px;height:28px;flex-shrink:0;margin-left:12px}
.top-bar .theme-toggle svg{width:14px;height:14px}
@media(max-width:768px){
  .top-bar-inner{height:32px;padding:0 1rem}
  .top-bar-item:nth-child(n+6){display:none}
  .top-bar-item{font-size:9px;padding:0 8px}
}
@media(max-width:480px){
  .top-bar-item:nth-child(n+4){display:none}
  .top-bar-sep:nth-child(n+3){display:none}
}

/* ==================== NAV ==================== */
nav{position:sticky;top:36px;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border-bottom:1px solid var(--border);transition:background .35s ease,border-color .35s ease}
@media(max-width:768px){nav{top:32px}}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 2.5rem;height:72px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:var(--f-mono);font-weight:700;font-size:1rem;color:var(--text);letter-spacing:-.02em;display:flex;align-items:center}
.nav-logo span{color:var(--text-faint)}
/* Logo switching: light mode shows black text, dark mode shows white text */
.logo-light{display:block}.logo-dark{display:none}
[data-theme="dark"] .logo-light{display:none}
[data-theme="dark"] .logo-dark{display:block}
.nav-links{display:flex;align-items:center;gap:0.5rem}
.nav-links>a,.nav-dd>a{font-family:var(--f-sans);font-size:0.8125rem;font-weight:400;color:var(--text-muted);transition:all .2s ease;padding:8px 18px;border-radius:8px;letter-spacing:0.01em}
.nav-links>a:hover,.nav-dd>a:hover,.nav-links>a.active,.nav-dd>a.active{color:var(--text);background:var(--bg-alt)}
@media(min-width:769px){
  .nav-dd>a::after{content:'';display:inline-block;width:4px;height:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:4px;margin-bottom:2px;opacity:.75;transition:transform .2s,opacity .2s}
  .nav-dd:hover>a::after{transform:rotate(-135deg);opacity:1}
  .nav-links>a.active,.nav-dd>a.active{position:relative}
  .nav-links>a.active::before,.nav-dd>a.active::before{content:'';position:absolute;bottom:2px;left:14px;right:14px;height:1.5px;background:var(--accent);border-radius:1px}
}

/* Theme toggle - sun/moon visibility */
.theme-toggle{background:none;border:1px solid var(--border);border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:all .3s cubic-bezier(.22,1,.36,1);flex-shrink:0;line-height:1;position:relative;overflow:hidden}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-glow)}
.theme-toggle svg{width:18px;height:18px;position:absolute;transition:all .4s cubic-bezier(.22,1,.36,1)}
/* Light mode: show sun, hide moon */
.icon-sun{opacity:1;transform:rotate(0) scale(1)}
.icon-moon{opacity:0;transform:rotate(-90deg) scale(0.5)}
/* Dark mode: show moon, hide sun */
[data-theme="dark"] .icon-sun{opacity:0;transform:rotate(90deg) scale(0.5)}
[data-theme="dark"] .icon-moon{opacity:1;transform:rotate(0) scale(1)}
[data-theme="dark"] .mega-menu{box-shadow:0 8px 40px rgba(0,0,0,.4),0 2px 12px rgba(0,0,0,.25);border-color:rgba(255,255,255,.08)}

.nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--text);transition:all .2s}
.nav-toggle:hover{border-color:var(--text-muted)}
.nav-sep{display:none}

/* ==================== SECTIONS ==================== */
.section{padding:6rem 0}
.section-alt{padding:6rem 0;background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .35s ease}
.page-hero{padding:5rem 0 4rem;border-bottom:1px solid var(--border);text-align:center}
.hero-sub{font-size:var(--fs-body);color:var(--text-body);line-height:var(--lh-body);margin-left:auto;margin-right:auto;text-align:center}
h1{font-family:var(--f-sans);font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.12;color:var(--text);letter-spacing:-.03em;margin-bottom:.75rem}
h2{font-family:var(--f-sans);font-size:clamp(1.875rem,3.5vw,2.5rem);font-weight:800;line-height:1.15;margin-bottom:.75rem;color:var(--text);letter-spacing:-.03em;text-align:center}
h3{font-family:var(--f-sans);font-size:1.125rem;font-weight:700;margin-bottom:.5rem;color:var(--text)}
.eyebrow{font-family:var(--f-mono);font-size:var(--fs-mono-xs);letter-spacing:2px;text-transform:uppercase;margin-bottom:1.25rem;color:var(--text-faint);text-align:center}
.desc{font-size:var(--fs-body);color:var(--text-body);line-height:var(--lh-body);max-width:800px;margin-left:auto;margin-right:auto;margin-bottom:3rem;text-align:center}
.ssub{font-size:var(--fs-body);color:var(--text-body);line-height:var(--lh-body);max-width:800px;margin-left:auto;margin-right:auto;text-align:center}

/* ==================== HERO ==================== */
.hero{background:var(--bg);padding:6rem 0 5rem;border-bottom:1px solid var(--border);transition:background .35s ease}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero h1{font-size:clamp(2.5rem,5vw,3.5rem)}
.hero-desc{font-size:var(--fs-body);color:var(--text-body);line-height:var(--lh-body);margin-bottom:2.5rem;max-width:500px}
.hero-actions{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}

/* ==================== BUTTONS (modern v2) ==================== */
.btn-p{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 30px;
  background:var(--btn-gradient);color:#0A0A0A;border:none;
  border-radius:50px;
  font-family:var(--f-sans);font-size:var(--fs-small);font-weight:600;
  cursor:pointer;
  box-shadow:var(--shadow-btn);
  transition:all .3s cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;
  letter-spacing:0.01em;
}
.btn-p::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0) 50%);
  border-radius:50px;pointer-events:none;
  transition:opacity .3s;
}
.btn-p:hover{
  background:var(--btn-gradient-hover);
  box-shadow:var(--shadow-btn-hover);
  transform:translateY(-2px);
}
.btn-p:active{transform:translateY(0);box-shadow:var(--shadow-sm)}

.btn-s{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 30px;
  background:transparent;color:var(--text);
  border:1.5px solid var(--border-hover);
  border-radius:50px;
  font-family:var(--f-sans);font-size:var(--fs-small);font-weight:500;
  cursor:pointer;
  transition:all .3s cubic-bezier(.22,1,.36,1);
  letter-spacing:0.01em;
}
.btn-s:hover{border-color:var(--text);background:var(--bg-alt);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-s:active{transform:translateY(0)}

.nav-cta{
  padding:10px 28px;
  background:var(--btn-gradient);border:none;
  border-radius:8px;color:#fff;
  font-family:var(--f-sans);font-size:0.8125rem;font-weight:500;
  cursor:pointer;letter-spacing:0.01em;
  box-shadow:var(--shadow-btn);
  transition:all .3s cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;
}
.nav-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0) 50%);
  border-radius:8px;pointer-events:none;
}
.nav-cta:hover{background:var(--btn-gradient-hover);box-shadow:var(--shadow-btn-hover);transform:translateY(-1px)}

/* ==================== SCROLL ANIMATIONS ==================== */
/* Above-fold content should never be hidden by reveal */
.page-hero .reveal,.hero .reveal,.hero-enter{opacity:1!important;transform:none!important}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.reveal-stagger.visible>*{opacity:1;transform:translateY(0)}
.reveal-stagger.visible>*:nth-child(1){transition-delay:.06s}
.reveal-stagger.visible>*:nth-child(2){transition-delay:.13s}
.reveal-stagger.visible>*:nth-child(3){transition-delay:.2s}
.reveal-stagger.visible>*:nth-child(4){transition-delay:.27s}
.reveal-stagger.visible>*:nth-child(5){transition-delay:.34s}
.reveal-stagger.visible>*:nth-child(6){transition-delay:.41s}
.reveal-stagger.visible>*:nth-child(7){transition-delay:.48s}
.reveal-stagger.visible>*:nth-child(8){transition-delay:.55s}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal-right{opacity:0;transform:translateX(30px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal-left.visible,.reveal-right.visible{opacity:1;transform:translateX(0)}

/* Hero entrance - plays once on load */
.hero-enter .eyebrow{opacity:0;transform:translateY(16px);animation:heroFade .6s cubic-bezier(.22,1,.36,1) .1s forwards}
.hero-enter h1{opacity:0;transform:translateY(20px);animation:heroFade .7s cubic-bezier(.22,1,.36,1) .2s forwards}
.hero-enter .hero-desc{opacity:0;transform:translateY(16px);animation:heroFade .7s cubic-bezier(.22,1,.36,1) .35s forwards}
.hero-enter .hero-actions{opacity:0;transform:translateY(16px);animation:heroFade .6s cubic-bezier(.22,1,.36,1) .5s forwards}
.hero-enter .llm-grid{opacity:0;transform:translateY(12px);animation:heroFade .6s cubic-bezier(.22,1,.36,1) .6s forwards}
.hero-enter .img-placeholder{opacity:0;transform:translateX(30px);animation:heroSlideIn .8s cubic-bezier(.22,1,.36,1) .3s forwards}
@keyframes heroFade{to{opacity:1;transform:translateY(0)}}
@keyframes heroSlideIn{to{opacity:1;transform:translateX(0)}}

/* ==================== LLM BADGES ==================== */
.llm-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.llm-badge{font-family:var(--f-mono);font-size:var(--fs-mono-xs);padding:5px 12px;border:1px solid var(--border);border-radius:50px;color:var(--text-muted);display:flex;align-items:center;gap:8px;transition:all .25s}
.llm-badge:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.llm-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse-dot 2.5s ease infinite}
@keyframes pulse-dot{0%,100%{opacity:.6;box-shadow:0 0 0 0 var(--accent-glow)}50%{opacity:1;box-shadow:0 0 0 4px transparent}}

/* ==================== IMAGE PLACEHOLDERS ==================== */
.img-placeholder{border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--bg-alt);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 2rem;min-height:320px;text-align:center;transition:background .35s ease,border-color .35s ease}
.img-placeholder .ph-label{font-family:var(--f-mono);font-size:var(--fs-mono-xs);letter-spacing:2px;text-transform:uppercase;color:var(--text-faint)}
.img-placeholder .ph-desc{font-size:var(--fs-mid);color:var(--text-muted);line-height:var(--lh-body);max-width:400px}
.img-placeholder .ph-size{font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--border-hover)}

/* ==================== TERMINAL FRAME ==================== */
.terminal{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.terminal-bar{background:#131313;padding:10px 16px;display:flex;align-items:center;gap:6px;border-bottom:1px solid rgba(255,255,255,.06)}
.td{width:9px;height:9px;border-radius:50%}
.td:nth-child(1){background:#FF5F56}.td:nth-child(2){background:#FFBD2E}.td:nth-child(3){background:#27C93F}
.terminal-title{font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:#555;margin-left:auto;letter-spacing:1px}
.terminal-body{background:#0A0A0A;padding:2.5rem;min-height:320px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem}

/* ==================== PRODUCT FRAMES ==================== */
.pf{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.pf:hover{border-color:var(--border-hover);box-shadow:var(--shadow-sm)}
.pf-bar{padding:10px 16px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border);background:var(--bg-alt)}
.pf-t{font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--text-faint);margin-left:auto;letter-spacing:1px}
.pf-body{padding:2.5rem;min-height:260px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.25rem}
.pf-note{font-size:var(--fs-small);color:var(--text-muted);text-align:center;font-style:italic}
.pf-sub{font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--text-faint);letter-spacing:2px;text-transform:uppercase}
.pf-c1{border-color:var(--c1-border)}.pf-c1 .pf-bar{background:var(--c1-soft)}.pf-c1:hover{border-color:var(--c1)}
.pf-c2{border-color:var(--c2-border)}.pf-c2 .pf-bar{background:var(--c2-soft)}.pf-c2:hover{border-color:var(--c2)}
.pf-c3{border-color:var(--c3-border)}.pf-c3 .pf-bar{background:var(--c3-soft)}.pf-c3:hover{border-color:var(--c3)}
.pf-c4{border-color:var(--c4-border)}.pf-c4 .pf-bar{background:var(--c4-soft)}.pf-c4:hover{border-color:var(--c4)}
.pf-c5{border-color:var(--c5-border)}.pf-c5 .pf-bar{background:var(--c5-soft)}.pf-c5:hover{border-color:var(--c5)}

/* ==================== PLACEHOLDER ANIMATIONS ==================== */
.anim-bars{display:flex;gap:10px;align-items:flex-end;height:90px}
.anim-bar{width:28px;border-radius:4px 4px 0 0;animation:bp 2s ease-in-out infinite}
.anim-bar:nth-child(1){background:var(--c1);height:40%;animation-delay:0s}
.anim-bar:nth-child(2){background:var(--c2);height:70%;animation-delay:.2s}
.anim-bar:nth-child(3){background:var(--c3);height:50%;animation-delay:.4s}
.anim-bar:nth-child(4){background:var(--c4);height:85%;animation-delay:.6s}
.anim-bar:nth-child(5){background:var(--c5);height:60%;animation-delay:.8s}
@keyframes bp{0%,100%{opacity:.7;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.15)}}
.flow-dots{display:flex;gap:14px;align-items:center}
.fdot{width:12px;height:12px;border-radius:50%;animation:fp 3s ease infinite}
.fdot:nth-child(1){background:var(--c1);animation-delay:0s}
.fdot:nth-child(3){background:var(--c2);animation-delay:.5s}
.fdot:nth-child(5){background:var(--c3);animation-delay:1s}
.fdot:nth-child(7){background:var(--c4);animation-delay:1.5s}
.fdot:nth-child(9){background:var(--c5);animation-delay:2s}
.fa{color:var(--text-muted);font-family:var(--f-mono);font-size:12px}
@keyframes fp{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.ph-scan{display:flex;gap:6px;align-items:center}
.ph-sd{width:8px;height:8px;border-radius:50%;background:var(--c5);animation:sb 1.2s ease infinite}
.ph-sd:nth-child(2){animation-delay:.2s}.ph-sd:nth-child(3){animation-delay:.4s}
@keyframes sb{0%,100%{opacity:.2}50%{opacity:1}}

/* ==================== CARDS ==================== */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;transition:all .3s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);border-radius:var(--radius-lg) var(--radius-lg) 0 0;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-md);transform:translateY(-3px)}.card:hover::before{transform:scaleX(1)}
.card h3{font-size:1.125rem;font-weight:700;margin-bottom:.5rem;color:var(--text)}
.card p{font-size:var(--fs-mid);color:var(--text-body);line-height:var(--lh-body)}
.card-num{font-family:var(--f-mono);font-size:2.5rem;font-weight:700;color:var(--border);margin-bottom:1rem;line-height:1;transition:color .3s}
.card:hover .card-num{color:var(--accent)}

/* ==================== CAPABILITY CARDS (STACKED ACCORDION) ==================== */
.agent-grid{display:flex;flex-direction:column;gap:0;position:relative}
.ac{border:1px solid var(--border);overflow:hidden;transition:all .3s cubic-bezier(.22,1,.36,1);cursor:pointer}
.ac:first-child{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.ac:last-child{border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.ac+.ac{border-top:0}
.ac-h{padding:1rem 1.5rem;display:flex;align-items:center;gap:.75rem;position:relative;user-select:none}
.ac-step{font-family:var(--f-mono);font-size:.7rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);margin-right:.25rem}
.ac-icon{font-size:1.25rem}.ac-fn{font-weight:700;font-size:var(--fs-mid)}
.ac-arrow{margin-left:auto;font-size:.75rem;color:var(--text-faint);transition:transform .3s ease}
.ac.open .ac-arrow{transform:rotate(180deg)}
.ac-flow{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.5rem}
.ac-flow-line{width:24px;height:1px;background:var(--border)}
.ac-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1),padding .3s ease;padding:0 1.5rem;background:var(--bg-card)}
.ac.open .ac-body{max-height:200px;padding:1.25rem 1.5rem;border-top:1px solid var(--border)}
.ac-body p{font-size:var(--fs-mid);color:var(--text-body);line-height:var(--lh-body);margin:0}
.ac-tandem{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;font-family:var(--f-mono);font-size:.7rem;color:var(--text-faint);letter-spacing:.5px}
.ac-tandem span{color:var(--accent)}
.ac1 .ac-h{background:var(--c1-soft)}.ac1 .ac-fn{color:var(--c1)}.ac1.open{border-color:var(--c1)}
.ac2 .ac-h{background:var(--c2-soft)}.ac2 .ac-fn{color:var(--c2)}.ac2.open{border-color:var(--c2)}
.ac3 .ac-h{background:var(--c3-soft)}.ac3 .ac-fn{color:var(--c3)}.ac3.open{border-color:var(--c3)}
.ac4 .ac-h{background:var(--c4-soft)}.ac4 .ac-fn{color:var(--c4)}.ac4.open{border-color:var(--c4)}
.ac5 .ac-h{background:var(--c5-soft)}.ac5 .ac-fn{color:var(--c5)}.ac5.open{border-color:var(--c5)}

/* ==================== STATS ==================== */
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem}
.sc{border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;text-align:center;transition:all .3s cubic-bezier(.22,1,.36,1);background:var(--bg-card)}
.sc:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.sc-l{font-family:var(--f-mono);font-size:var(--fs-mono-xs);letter-spacing:2px;text-transform:uppercase;color:var(--text-faint);margin-bottom:.5rem}
.sc-v{font-family:var(--f-mono);font-size:2.5rem;font-weight:700;line-height:1;color:var(--accent)}
.sc-m{font-size:var(--fs-small);color:var(--text-muted);margin-top:.35rem}

/* Animated stat counter */
.sc-v[data-count]{transition:color .3s}

/* ==================== INTEGRATIONS ==================== */
.int-grid{display:flex;flex-wrap:wrap;gap:10px}
.ii{display:flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--text-body);padding:10px 16px;border:1px solid var(--border);border-radius:50px;transition:all .25s;background:var(--bg-card)}
.ii:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);transform:translateY(-1px)}
.id{width:7px;height:7px;border-radius:50%}.id.live{background:var(--success)}.id.coming{background:var(--warning)}
.is{font-family:var(--f-mono);font-size:var(--fs-mono-xs);letter-spacing:1px;margin-left:4px}
.is.live{color:var(--success)}.is.coming{color:var(--warning)}

/* ==================== ROLE CARDS ==================== */
.rg{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.rc{border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;transition:all .3s cubic-bezier(.22,1,.36,1);background:var(--bg-card)}
.rc:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.rc-t{font-family:var(--f-mono);font-size:var(--fs-mono-xs);letter-spacing:2px;text-transform:uppercase;color:var(--text-faint);margin-bottom:.5rem}
.rc-n{font-size:1.25rem;font-weight:700;margin-bottom:.5rem;color:var(--text)}
.rc-d{font-size:var(--fs-mid);color:var(--text-body);line-height:var(--lh-body);margin-bottom:1rem}
.rc-tags{display:flex;gap:6px;flex-wrap:wrap}
.rt{font-family:var(--f-mono);font-size:var(--fs-mono-xs);padding:4px 10px;border-radius:50px}
.rt1{color:var(--c1);border:1px solid var(--c1-border);background:var(--c1-soft)}
.rt2{color:var(--c2);border:1px solid var(--c2-border);background:var(--c2-soft)}
.rt3{color:var(--c3);border:1px solid var(--c3-border);background:var(--c3-soft)}
.rt4{color:var(--c4);border:1px solid var(--c4-border);background:var(--c4-soft)}
.rt5{color:var(--c5);border:1px solid var(--c5-border);background:var(--c5-soft)}

/* ==================== SERVICE DETAIL ==================== */
.svc-detail{border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:1.5rem;transition:all .3s;overflow:hidden;background:var(--bg-card)}
.svc-detail:hover{border-color:var(--border-hover);box-shadow:var(--shadow-sm)}
.svc-head{padding:1.5rem 2rem;display:flex;align-items:center;gap:1.25rem;cursor:pointer;border-bottom:1px solid var(--border)}
.svc-head .svc-icon{font-family:var(--f-mono);font-size:1.5rem;color:var(--accent)}
.svc-head h3{flex:1;font-size:1.125rem;margin-bottom:0}
.svc-head .svc-tag{font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--text-faint);letter-spacing:1px}
.svc-body{padding:2rem;display:grid;grid-template-columns:2fr 1fr;gap:2.5rem}
.svc-body p{font-size:var(--fs-mid);color:var(--text-body);line-height:var(--lh-body);margin-bottom:1rem}
.svc-list{list-style:none;padding:0}.svc-list li{font-size:var(--fs-mid);color:var(--text-body);padding:.35rem 0;display:flex;gap:.5rem}
.svc-list li::before{content:'→';color:var(--accent);font-weight:600}
.svc-meta{display:flex;flex-direction:column;gap:1rem}
.svc-meta-item{border:1px solid var(--border);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:.25rem;background:var(--bg-alt)}
.svc-meta-label{font-family:var(--f-mono);font-size:var(--fs-mono-xs);letter-spacing:2px;text-transform:uppercase;color:var(--text-faint)}
.svc-meta-val{font-size:var(--fs-mid);color:var(--text-body)}

/* ==================== PRICE CARDS ==================== */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.price-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;transition:all .3s cubic-bezier(.22,1,.36,1);background:var(--bg-card)}
.price-card:hover{border-color:var(--border-hover);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.price-card.featured{border-color:var(--accent);position:relative}
.price-card.featured::before{content:'POPULAR';position:absolute;top:0;right:0;font-family:var(--f-mono);font-size:var(--fs-mono-xs);letter-spacing:1px;padding:6px 12px;background:var(--accent);color:#fff;border-radius:0 var(--radius-lg) 0 var(--radius)}
.price-name{font-family:var(--f-mono);font-size:var(--fs-mono-xs);letter-spacing:2px;color:var(--text-faint);margin-bottom:.75rem}
.price-val{font-family:var(--f-mono);font-size:2.5rem;font-weight:700;color:var(--text);margin-bottom:.25rem}
.price-val span{font-size:var(--fs-mid);font-weight:400;color:var(--text-muted)}
.price-desc{font-size:var(--fs-mid);color:var(--text-muted);margin-bottom:1.5rem;line-height:var(--lh-body)}
.price-features{list-style:none;padding:0;margin-bottom:2rem}
.price-features li{font-size:var(--fs-mid);color:var(--text-body);padding:.4rem 0;display:flex;gap:.5rem}
.price-features li::before{content:'→';color:var(--accent);font-weight:600}

/* ==================== CHAT SHOWCASE ==================== */
.chat-demo{border:1px solid var(--accent);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 20px var(--accent-glow)}
.chat-bar{background:var(--accent-soft);padding:12px 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--accent)}
.chat-bar-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse-dot 2.5s ease infinite}
.chat-bar-title{font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--accent);letter-spacing:1px}
.chat-body{padding:2rem;background:var(--bg-card);display:flex;flex-direction:column;gap:1.25rem}
.chat-msg{max-width:75%;padding:12px 18px;font-size:var(--fs-mid);line-height:var(--lh-body);border-radius:var(--radius-lg)}
.chat-user{align-self:flex-end;background:var(--accent);color:#fff;border-radius:var(--radius-lg) var(--radius-lg) 4px var(--radius-lg)}
.chat-ai{align-self:flex-start;background:var(--bg-alt);border:1px solid var(--border);color:var(--text-body);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px}
.chat-ai .chat-source{font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--text-faint);margin-top:.5rem;letter-spacing:1px}
.chat-input{display:flex;gap:0;border-top:1px solid var(--border);background:var(--bg-alt)}
.chat-input input{flex:1;padding:14px 20px;border:none;background:transparent;font-family:var(--f-sans);font-size:var(--fs-mid);outline:none;color:var(--text);border-radius:0 0 0 var(--radius-lg)}
.chat-input button{padding:14px 24px;background:var(--accent);color:#fff;border:none;font-family:var(--f-sans);font-size:var(--fs-small);font-weight:600;cursor:pointer;border-radius:0 0 var(--radius-lg) 0;transition:background .2s}
.chat-input button:hover{background:var(--accent-hover)}

/* ==================== PRODUCT WIDGETS ==================== */
/* Base widget (matches chat-demo style) */
.pw{border:1px solid var(--accent);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 20px var(--accent-glow)}
.pw-bar{background:var(--accent-soft);padding:10px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--accent)}
.pw-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
.pw-dot.live{animation:pulse-dot 2.5s ease infinite}
.pw-title{font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--accent);letter-spacing:1px}
.pw-bar-r{margin-left:auto;font-family:var(--f-mono);font-size:0.6875rem;color:var(--text-faint)}
.pw-body{background:var(--bg-card);padding:0}

/* Browser Chrome */
.browser-chrome{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.browser-top{background:var(--bg-alt);padding:10px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.browser-dots{display:flex;gap:6px}
.browser-dots span{width:10px;height:10px;border-radius:50%;border:1px solid var(--border)}
.browser-dots span:first-child{background:#ff5f57;border-color:#e0443e}
.browser-dots span:nth-child(2){background:#febc2e;border-color:#dea123}
.browser-dots span:last-child{background:#28c840;border-color:#1aab29}
.browser-url{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:5px 12px;font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--text-muted);display:flex;align-items:center;gap:6px}
.browser-url .lock{color:var(--success);font-size:0.625rem}
.browser-viewport{background:var(--bg-card);padding:0;position:relative}

/* Browser with sidebar layout */
.bv-layout{display:grid;grid-template-columns:200px 1fr;min-height:420px}
@media(max-width:768px){.bv-layout{grid-template-columns:1fr;min-height:auto}}
.bv-sidebar{background:var(--bg-alt);border-right:1px solid var(--border);padding:16px 0;display:flex;flex-direction:column}
@media(max-width:768px){.bv-sidebar{display:none}}
.bv-logo{padding:0 16px 16px;font-family:var(--f-mono);font-size:var(--fs-mono-sm);font-weight:700;color:var(--text);border-bottom:1px solid var(--border);margin-bottom:8px}
.bv-nav-item{padding:7px 16px;font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--text-muted);display:flex;align-items:center;gap:8px;cursor:default;transition:all .15s}
.bv-nav-item:hover{background:var(--bg-card);color:var(--text)}
.bv-nav-item.active{background:var(--accent-soft);color:var(--accent);border-right:2px solid var(--accent)}
.bv-nav-icon{width:14px;text-align:center;font-size:0.75rem}
.bv-main{padding:20px;overflow:hidden;display:flex;flex-direction:column;gap:16px}
.bv-main-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bv-main-title{font-family:var(--f-mono);font-size:var(--fs-mono-sm);font-weight:700;color:var(--text)}
.bv-main-badge{font-family:var(--f-mono);font-size:0.625rem;padding:2px 8px;background:rgba(22,163,74,.1);color:var(--success);border:1px solid rgba(22,163,74,.2);border-radius:3px;letter-spacing:.5px}

/* Feed items */
.pw-feed{display:flex;flex-direction:column}
.pw-row{padding:9px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);transition:background .15s}
.pw-row:last-child{border-bottom:none}
.pw-row:hover{background:var(--bg-alt)}
.pw-sev{font-family:var(--f-mono);font-size:0.625rem;font-weight:700;letter-spacing:.5px;padding:2px 6px;border-radius:3px;flex-shrink:0;margin-top:1px}
.pw-sev.crit{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
.pw-sev.warn{background:rgba(234,179,8,.08);color:#ca8a04;border:1px solid rgba(234,179,8,.18)}
.pw-sev.info{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(0,102,255,.18)}
.pw-sev.ok{background:rgba(22,163,74,.08);color:var(--success);border:1px solid rgba(22,163,74,.18)}
[data-theme="dark"] .pw-sev.crit{background:rgba(239,68,68,.12);color:#f87171}
[data-theme="dark"] .pw-sev.warn{background:rgba(234,179,8,.1);color:#facc15}
.pw-txt{flex:1;color:var(--text-body);line-height:1.45}
.pw-txt strong{color:var(--text);font-weight:600}
.pw-time{font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--text-faint);flex-shrink:0;margin-top:2px}
.pw-src{font-family:var(--f-mono);font-size:0.625rem;color:var(--text-faint);margin-top:2px;letter-spacing:.5px}

/* Metric grid */
.pw-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media(max-width:600px){.pw-metrics{grid-template-columns:repeat(2,1fr)}}
.pw-metric{padding:14px 16px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.pw-metric:nth-child(3n){border-right:none}
.pw-metric:nth-last-child(-n+3){border-bottom:none}
@media(max-width:600px){.pw-metric:nth-child(3n){border-right:1px solid var(--border)}.pw-metric:nth-child(2n){border-right:none}}
.pw-m-label{font-family:var(--f-mono);font-size:0.625rem;color:var(--text-faint);letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.pw-m-val{font-family:var(--f-mono);font-size:1.125rem;font-weight:700;color:var(--text)}
.pw-m-delta{font-family:var(--f-mono);font-size:var(--fs-mono-xs);margin-top:2px}
.pw-m-delta.up{color:var(--success)}
.pw-m-delta.down{color:#ef4444}
.pw-m-delta.flat{color:var(--text-faint)}

/* Sparkline */
.pw-spark{display:flex;align-items:flex-end;gap:2px;height:24px;margin-top:5px}
.pw-spark b{width:4px;border-radius:1px;background:var(--accent);opacity:.35}
.pw-spark b:last-child{opacity:1}

/* Agent log */
.pw-log-row{padding:7px 16px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-small)}
.pw-log-row:last-child{border-bottom:none}
.pw-log-ts{font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--text-faint);flex-shrink:0;min-width:48px;margin-top:1px}
.pw-log-agent{font-family:var(--f-mono);font-size:0.5625rem;padding:2px 5px;border-radius:3px;flex-shrink:0;font-weight:700;letter-spacing:.5px;margin-top:1px}
.pw-log-agent.a-journey{background:var(--c1-soft);color:var(--c1);border:1px solid var(--c1-border)}
.pw-log-agent.a-change{background:var(--c2-soft);color:var(--c2);border:1px solid var(--c2-border)}
.pw-log-agent.a-forecast{background:var(--c3-soft);color:var(--c3);border:1px solid var(--c3-border)}
.pw-log-agent.a-root{background:var(--c4-soft);color:var(--c4);border:1px solid var(--c4-border)}
.pw-log-agent.a-strategy{background:var(--c5-soft);color:var(--c5);border:1px solid var(--c5-border)}
[data-theme="dark"] .pw-log-agent.a-strategy{color:var(--text-muted)}
.pw-log-msg{flex:1;color:var(--text-body);line-height:1.45}

/* Sync rows */
.pw-sync-row{padding:9px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-size:var(--fs-small)}
.pw-sync-row:last-child{border-bottom:none}
.pw-sync-icon{width:26px;height:26px;border-radius:5px;background:var(--bg-alt);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:0.6875rem;flex-shrink:0}
.pw-sync-name{font-weight:600;color:var(--text);flex:1;font-size:var(--fs-small)}
.pw-sync-badge{font-family:var(--f-mono);font-size:0.5625rem;padding:2px 7px;border-radius:3px;letter-spacing:.5px;font-weight:600}
.pw-sync-badge.synced{background:rgba(22,163,74,.08);color:var(--success);border:1px solid rgba(22,163,74,.18)}
.pw-sync-badge.syncing{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(0,102,255,.18);animation:pw-pulse 2s ease infinite}
.pw-sync-badge.queued{background:var(--bg-alt);color:var(--text-faint);border:1px solid var(--border)}
.pw-sync-ago{font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--text-faint)}
@keyframes pw-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* Tab bar inside widgets */
.pw-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg-alt)}
.pw-tab{padding:8px 14px;font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--text-muted);letter-spacing:.5px;border-bottom:2px solid transparent;cursor:default;transition:all .15s}
.pw-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--bg-card)}

/* ==================== DATA FLOW ANIMATION ==================== */
.df{position:relative;padding:2rem 0}
.df-row{display:flex;align-items:center;justify-content:center;gap:0}
@media(max-width:768px){.df-row{flex-direction:column;gap:2rem}}

/* Source / output nodes */
.df-nodes{display:flex;flex-direction:column;gap:8px;flex-shrink:0;width:200px}
@media(max-width:768px){.df-nodes{flex-direction:row;flex-wrap:wrap;justify-content:center;width:auto}}
.df-node{display:flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--border);border-radius:8px;font-family:var(--f-mono);font-size:0.75rem;color:var(--text-muted);background:var(--bg-card);transition:all .3s;white-space:nowrap;overflow:visible}
.df-node:hover{border-color:var(--accent);color:var(--accent)}
.df-node .df-ico{width:32px;height:32px;min-width:32px;border-radius:6px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg-alt);padding:6px;overflow:hidden;box-sizing:border-box}
.df-node .df-ico svg{width:18px;height:18px;display:block;flex-shrink:0}
.df-node .df-lbl{flex-shrink:0;overflow:hidden;text-overflow:ellipsis}
.df-node.active{border-color:var(--accent);background:var(--accent-soft)}
.df-node.active .df-ico{border-color:var(--accent);background:var(--accent-soft)}

/* Flow lines */
.df-line{flex:1;min-width:60px;height:2px;background:var(--border);position:relative;overflow:visible}
@media(max-width:768px){.df-line{min-width:2px;width:2px;height:40px;flex:none}}
.df-line::after{content:'';position:absolute;top:-2px;left:0;width:6px;height:6px;border-radius:50%;background:var(--accent);animation:df-dot-lr 2.5s linear infinite;box-shadow:0 0 6px var(--accent)}
.df-line.reverse::after{animation:df-dot-rl 2.5s linear infinite}
@media(max-width:768px){.df-line::after{animation:df-dot-tb 2.5s linear infinite}.df-line.reverse::after{animation:df-dot-bt 2.5s linear infinite}}
.df-line.d1::after{animation-delay:0s}
.df-line.d2::after{animation-delay:.4s}
.df-line.d3::after{animation-delay:.8s}
.df-line.d4::after{animation-delay:1.2s}
@keyframes df-dot-lr{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes df-dot-rl{0%{left:100%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:0;opacity:0}}
@keyframes df-dot-tb{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
@keyframes df-dot-bt{0%{top:100%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:0;opacity:0}}

/* Multi-line fanout */
.df-fan{display:flex;flex-direction:column;gap:6px;flex:1;min-width:40px;max-width:100px;position:relative}
@media(max-width:768px){.df-fan{flex-direction:row;min-width:auto;max-width:none;min-height:30px;gap:4px}}
.df-fan .df-line{flex:none;height:2px;width:100%}
@media(max-width:768px){.df-fan .df-line{height:30px;width:2px}}

/* Hub node (data lake center) */
.df-hub{width:140px;height:140px;border-radius:50%;border:2px solid var(--accent);background:var(--accent-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:2;box-shadow:0 0 30px var(--accent-glow);transition:transform .3s ease}
.df-hub::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--accent);opacity:.3;animation:df-hub-pulse 3s ease infinite}
@keyframes df-hub-pulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.1;transform:scale(1.06)}}
.df-hub-icon{font-size:1.5rem;margin-bottom:2px}
.df-hub-label{font-family:var(--f-mono);font-size:0.625rem;letter-spacing:1.5px;color:var(--accent);font-weight:700}
.df-hub-sub{font-family:var(--f-mono);font-size:0.5625rem;color:var(--text-faint);margin-top:2px}

/* Output nodes (right side) */
.df-out{display:flex;flex-direction:column;gap:8px;flex-shrink:0;width:210px}
@media(max-width:768px){.df-out{flex-direction:row;flex-wrap:wrap;justify-content:center;width:auto}}
.df-out .df-node{border-left:3px solid var(--accent);border-radius:0 6px 6px 0}
.df-out .df-node.c1{border-left-color:var(--c1)}
.df-out .df-node.c2{border-left-color:var(--c2)}
.df-out .df-node.c3{border-left-color:var(--c3)}
.df-out .df-node.c4{border-left-color:var(--c4)}
.df-out .df-node.c5{border-left-color:var(--c5)}
.df-out .df-node.active{background:var(--accent-soft);border-color:var(--accent)}

/* ==================== ANIMATED DATA FLOW (SVG) ==================== */
.adf{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);padding:1.5rem}
.adf-svg{display:block}
.adf-hub-ring{transition:filter .3s}
.adf-hub-pulse{animation:adf-pulse 3s ease infinite}
.adf-hub-pulse2{animation:adf-pulse 3s ease infinite .5s}
@keyframes adf-pulse{0%,100%{r:68;opacity:.15}50%{r:78;opacity:.05}}

/* ── KPI Counter Strip ── */
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden}
.kpi{background:var(--bg-card);padding:14px 12px;text-align:center;transition:background .3s ease}
.kpi-val{font-family:var(--f-mono);font-size:1.125rem;font-weight:700;color:var(--text);display:block;transition:color .2s,text-shadow .2s;min-height:1.4em}
.kpi-label{font-family:var(--f-mono);font-size:0.5625rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-faint);margin-top:4px;display:block}
.kpi.kpi-flash{background:var(--accent-soft)}
.kpi.kpi-flash .kpi-val{color:var(--accent);text-shadow:0 0 10px var(--accent-glow)}

@media(max-width:768px){
  .adf{padding:.75rem;min-height:auto!important}
  .adf-svg{min-height:280px}
  .adf-strip{flex-wrap:wrap;gap:8px!important}
  .adf-strip svg{width:40px!important}
  .kpi-strip{grid-template-columns:repeat(2,1fr)}
  .kpi-val{font-size:0.9rem}
}
@media(max-width:768px){.df-out .df-node{border-left:none;border-top:3px solid var(--accent);border-radius:0 0 6px 6px}}

/* ==================== ANIMATED CHAT ==================== */
.otter-chat-wrap{max-width:680px;margin:0 auto}
.split .otter-chat-wrap{max-width:100%}
.otter-chat-wrap .chat-body{min-height:320px;position:relative;overflow:hidden;padding:1.5rem}
.otter-chat-wrap .chat-msg{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease;max-width:82%}
.otter-chat-wrap .chat-msg.msg-visible{opacity:1;transform:translateY(0)}
.otter-chat-wrap .chat-msg.msg-exit{opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease}

/* Thinking dots */
.otter-thinking{align-self:flex-start;display:flex;gap:5px;padding:14px 20px;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease}
.otter-thinking.msg-visible{opacity:1;transform:translateY(0)}
.otter-thinking span{width:7px;height:7px;border-radius:50%;background:var(--text-faint);animation:think-bounce 1.2s ease infinite}
.otter-thinking span:nth-child(2){animation-delay:.15s}
.otter-thinking span:nth-child(3){animation-delay:.3s}
@keyframes think-bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-6px);opacity:1}}

/* Typing cursor in input field */
.chat-typing-field{flex:1;padding:14px 20px;font-family:var(--f-sans);font-size:var(--fs-mid);color:var(--text);min-height:20px;display:flex;align-items:center}
.chat-typing-field::after{content:'';display:inline-block;width:2px;height:1.1em;background:var(--accent);margin-left:1px;animation:blink-cursor .7s step-end infinite;vertical-align:text-bottom}
.chat-typing-field.idle::after{display:none}
@keyframes blink-cursor{50%{opacity:0}}

/* Role tag on AI messages */
.chat-role{font-family:var(--f-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;display:block}

/* ==================== FORM ==================== */
.fg{margin-bottom:1.25rem}
.fl{display:block;font-family:var(--f-mono);font-size:var(--fs-mono-xs);letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:.5rem}
.fi{width:100%;padding:12px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--f-sans);font-size:var(--fs-mid);transition:all .25s;outline:none}
.fi:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.fi::placeholder{color:var(--text-faint)}
textarea.fi{resize:vertical}

/* ==================== WIDGET THEME (dark default, light when site is dark) ==================== */
.wt{
  --bg:#0B0D11;--bg-alt:#13161C;--bg-card:#161921;
  --text:#E8E9EC;--text-body:#A8ABB3;--text-muted:#6E7179;--text-faint:#4A4D55;
  --border:#262A33;--border-hover:#3A3F4A;--border-focus:#E8E9EC;
  --accent:#4D94FF;--accent-hover:#70AAFF;--accent-soft:rgba(77,148,255,0.08);
  --accent-glow:rgba(77,148,255,0.2);
  --success:#34D399;--warning:#FBBF24;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  --shadow-btn:0 1px 3px rgba(77,148,255,.2),0 4px 14px rgba(77,148,255,.12);
  --nav-bg:rgba(11,13,17,.88);
  --grid-line:rgba(255,255,255,.025);
  --c1:#4DA3FF;--c1-soft:rgba(77,163,255,0.08);--c1-border:rgba(77,163,255,0.2);
  --c2:#FF8C42;--c2-soft:rgba(255,140,66,0.08);--c2-border:rgba(255,140,66,0.2);
  --c3:#A78BFA;--c3-soft:rgba(167,139,250,0.08);--c3-border:rgba(167,139,250,0.2);
  --c4:#2DD4BF;--c4-soft:rgba(45,212,191,0.08);--c4-border:rgba(45,212,191,0.2);
  --c5:#E8E9EC;--c5-soft:rgba(232,233,236,0.05);--c5-border:rgba(232,233,236,0.12);
  --btn-gradient:linear-gradient(135deg,#4D94FF 0%,#3378E0 100%);
  background:var(--bg);color:var(--text);border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border);transition:all .35s ease;
}
[data-theme="dark"] .wt{
  --bg:#FFFFFF;--bg-alt:#F5F5F5;--bg-card:#FFFFFF;
  --text:#1A1A1A;--text-body:#3A3A3A;--text-muted:#666666;--text-faint:#888888;
  --border:#DDDDDD;--border-hover:#BBBBBB;--border-focus:#1A1A1A;
  --accent:#00CC6A;--accent-hover:#00AA55;--accent-soft:rgba(0,255,136,0.06);
  --accent-glow:rgba(0,255,136,0.15);
  --success:#16A34A;--warning:#D97706;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.1);
  --shadow-btn:0 1px 3px rgba(0,204,106,.15),0 4px 12px rgba(0,204,106,.1);
  --nav-bg:rgba(255,255,255,.88);
  --grid-line:rgba(0,0,0,.018);
  --c1:#0077CC;--c1-soft:rgba(0,119,204,0.06);--c1-border:rgba(0,119,204,0.22);
  --c2:#E85D00;--c2-soft:rgba(232,93,0,0.06);--c2-border:rgba(232,93,0,0.22);
  --c3:#7C3AED;--c3-soft:rgba(124,58,237,0.06);--c3-border:rgba(124,58,237,0.22);
  --c4:#0F766E;--c4-soft:rgba(15,118,110,0.06);--c4-border:rgba(15,118,110,0.22);
  --c5:#1A1A1A;--c5-soft:rgba(26,26,26,0.04);--c5-border:rgba(26,26,26,0.15);
  --btn-gradient:linear-gradient(135deg,#00CC6A 0%,#00AA55 100%);
}

/* ==================== DASHBOARD CHROME (shared across pages) ==================== */
.dash-chrome{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35);position:relative}
.dash-top{background:var(--bg-alt);padding:10px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.dash-top .d-dots{display:flex;gap:6px}
.dash-top .d-dots span{width:10px;height:10px;border-radius:50%}
.dash-top .d-dots span:first-child{background:#ff5f57}.dash-top .d-dots span:nth-child(2){background:#febc2e}.dash-top .d-dots span:last-child{background:#28c840}
.dash-top .d-url{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:5px 12px;font-family:var(--f-mono);font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.dash-top .d-url .d-lock{color:var(--success);font-size:10px}
.dash-vp{background:var(--bg);position:relative}
.dash-lay{display:grid;grid-template-columns:180px 1fr;min-height:480px}
@media(max-width:768px){.dash-lay{grid-template-columns:1fr}.dash-sb{display:none!important}}
.dash-sb{background:var(--bg-alt);border-right:1px solid var(--border);padding:16px 0;display:flex;flex-direction:column}
.dash-sb-logo{padding:4px 16px 14px;font-family:var(--f-mono);font-weight:700;font-size:13px;color:var(--text)}
.dash-sb-item{padding:7px 16px;font-family:var(--f-mono);font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:8px;cursor:default;transition:all .15s}
.dash-sb-item:hover{background:var(--bg-card);color:var(--text)}
.dash-sb-item.act{background:var(--accent-soft);color:var(--accent);border-right:2px solid var(--accent)}
.dash-sb-icon{width:14px;text-align:center;font-size:12px}
.dash-mn{padding:20px;overflow:hidden;display:flex;flex-direction:column;gap:14px}
.dash-mn-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dash-mn-title{font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--text)}
.dash-mn-badge{font-family:var(--f-mono);font-size:9px;padding:2px 8px;background:rgba(52,211,153,.1);color:var(--success);border:1px solid rgba(52,211,153,.2);border-radius:3px;letter-spacing:.5px}
.dp-sev{font-family:var(--f-mono);font-size:8px;font-weight:700;letter-spacing:.5px;padding:2px 5px;border-radius:3px;flex-shrink:0;margin-top:1px}
.dp-sev.cr{background:rgba(248,113,113,.1);color:#f87171;border:1px solid rgba(248,113,113,.2)}
.dp-sev.wr{background:rgba(251,191,36,.08);color:#fbbf24;border:1px solid rgba(251,191,36,.18)}
.dp-sev.in{background:rgba(77,148,255,.08);color:var(--accent);border:1px solid rgba(77,148,255,.18)}
.dp-sev.ok{background:rgba(52,211,153,.08);color:var(--success);border:1px solid rgba(52,211,153,.18)}

/* ==================== CTA ==================== */
.cta{background:var(--bg-alt);padding:5rem 0;text-align:center;border-top:1px solid var(--border);transition:background .35s ease}
.cta h2{margin-bottom:1rem}.cta .desc{margin:0 auto 2.5rem;text-align:center}

/* ==================== FOOTER ==================== */
footer{background:var(--bg);padding:4rem 0 2rem;border-top:1px solid var(--border);transition:background .35s ease}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem}
.f-brand{font-family:var(--f-mono);font-size:1.125rem;font-weight:700;margin-bottom:.75rem;color:var(--text)}
.f-tag{font-size:var(--fs-mid);color:var(--text-muted);line-height:1.7}
.f-ct{font-family:var(--f-mono);font-size:var(--fs-mono-xs);letter-spacing:3px;text-transform:uppercase;color:var(--text-faint);margin-bottom:1rem}
.f-link{display:block;font-size:var(--fs-mid);color:var(--text-muted);text-decoration:none;margin-bottom:.5rem;transition:color .2s}
.f-link:hover{color:var(--accent)}
.f-bot{display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;border-top:1px solid var(--border);font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--text-faint)}
.f-legal{display:flex;gap:1.25rem}
.f-legal .f-link{display:inline;margin-bottom:0;font-size:var(--fs-mono-xs);font-family:var(--f-mono)}

/* ==================== LAYOUT ==================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.split>*{min-width:0}
.split-text h3{font-size:1.375rem;font-weight:700;margin-bottom:.75rem;color:var(--text);letter-spacing:-.02em}
.split-text p{font-size:var(--fs-body);color:var(--text-body);line-height:var(--lh-body)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}

/* ==================== COMPARISON TABLE ==================== */
.comp-table{width:100%;border-collapse:collapse;margin-bottom:2rem}
.comp-table th{font-family:var(--f-mono);font-size:var(--fs-mono-xs);letter-spacing:2px;text-transform:uppercase;color:var(--text-faint);padding:1rem;text-align:left;border-bottom:2px solid var(--border)}
.comp-table td{padding:1rem;font-size:var(--fs-mid);color:var(--text-body);border-bottom:1px solid var(--border);vertical-align:top}
.comp-table tr:last-child td{border-bottom:none}
.comp-table .highlight-col{background:var(--accent-soft);color:var(--text);font-weight:600}

/* ==================== PSEO PAGES ==================== */
.breadcrumbs{font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--text-faint);margin-bottom:1.5rem;letter-spacing:1px}
.breadcrumbs a{color:var(--accent);text-decoration:none}.breadcrumbs a:hover{text-decoration:underline}
.feature-list{list-style:none;padding:0;margin:0}
.feature-list li{font-size:var(--fs-mid);color:var(--text-body);padding:.5rem 0;display:flex;gap:.75rem;align-items:flex-start;line-height:var(--lh-body)}
.feature-list li::before{content:'→';color:var(--accent);font-weight:700;flex-shrink:0}

/* ==================== RESPONSIVE ==================== */
@media(max-width:1024px){.stat-grid{grid-template-columns:repeat(3,1fr)}.rg{grid-template-columns:repeat(2,1fr)}.price-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .hero-grid,.split,.card-grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}.rg{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}.container{padding:0 1.5rem}
  .bv-main [style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
  .bv-main [style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
  .bv-main [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
  .bv-main [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  .browser-viewport [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
  .browser-viewport [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  .nav-inner{height:60px}.nav-toggle{display:block}
  .svc-body{grid-template-columns:1fr}.comp-table{font-size:.8rem}
  .f-bot{flex-direction:column;gap:.5rem}
  .mega-menu{position:static!important;box-shadow:none!important;border:none!important;padding:0!important;background:transparent!important;border-radius:0!important;display:none!important;max-height:60vh;overflow-y:auto;transform:none!important;opacity:1!important;pointer-events:auto!important}
  .mega-menu::before{display:none!important}
  .nav-dd.open>.mega-menu{display:block!important}
  .mm-inner{flex-direction:column!important;padding:0!important;gap:0!important;padding-left:1rem!important}
  .mm-col{min-width:auto!important;padding:0.75rem 0 0.5rem!important;border-right:none!important;border-bottom:1px solid var(--border)!important}.mm-col:last-child{border-bottom:none!important}
  .mm-label{margin-bottom:0.5rem!important;font-size:0.5625rem!important;border-bottom:none!important;padding-bottom:0!important}
  .mm-link{white-space:normal!important;padding:6px 8px!important;font-size:0.8rem!important;text-align:left!important;margin:0!important}
  .mm-desc{display:none!important}
  .mm-more{margin-top:0.25rem!important;padding-top:0.5rem!important}
  .nav-dd{width:100%}
  .nav-dd>a{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left}
  .nav-dd>a::after{content:'＋';font-size:12px;color:var(--text-muted);margin-left:auto;flex-shrink:0}
  .nav-dd.open>a::after{content:'－'}
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:var(--bg);flex-direction:column;padding:1rem 1.5rem;border-bottom:1px solid var(--border);gap:0;backdrop-filter:blur(20px);text-align:left;z-index:999}
  .nav-links.open{display:flex}
  .nav-links>a,.nav-dd>a{padding:10px 0!important;border-bottom:1px solid var(--border);border-radius:0!important;background:none!important}
  .nav-links>a:last-of-type{border-bottom:none}
  .nav-cta{width:100%;text-align:center;margin-top:0.75rem;border-radius:8px}
  .checkbox-grid,.radio-grid{grid-template-columns:1fr!important}.checkbox-grid.compact{grid-template-columns:repeat(2,1fr)!important}
  .hero{padding:4rem 0 3rem}.section,.section-alt{padding:4rem 0}
  h1{font-size:clamp(1.75rem,5vw,2.5rem)}.hero h1{font-size:clamp(2rem,6vw,3rem)}
  .btn-p,.btn-s{padding:12px 24px;font-size:var(--fs-small)}
}

/* ==================== MEGA MENUS ==================== */
.nav-dd{position:relative}.nav-dd>a{cursor:pointer}
.mega-menu{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);z-index:1001;min-width:480px;padding:0;overflow:visible;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.mega-menu::before{content:'';position:absolute;top:-12px;left:0;right:0;height:14px;background:transparent}
.mega-menu.mm-sm{min-width:320px}
@media(min-width:769px){.nav-dd:hover .mega-menu{display:block;opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}}
.mm-inner{display:flex;gap:0;padding:0;overflow:hidden;border-radius:12px}
.mm-col{min-width:180px;padding:1.25rem 1.5rem;border-right:1px solid var(--border)}.mm-col:last-child{border-right:none}
.mm-label{font-family:var(--f-mono);font-size:0.5625rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-faint);margin-bottom:0.75rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border)}
.mm-link{display:flex;align-items:center;gap:0.5rem;padding:7px 8px;margin:0 -8px;font-family:var(--f-sans);font-size:0.8125rem;font-weight:400;color:var(--text-muted);transition:all .15s ease;white-space:nowrap;border-radius:6px}.mm-link:hover{color:var(--text);background:var(--bg-alt)}
.mm-desc{font-family:var(--f-sans);font-size:0.6875rem;font-weight:400;color:var(--text-faint);margin-left:auto;opacity:.7;transition:opacity .15s}.mm-link:hover .mm-desc{opacity:1}
.mm-badge{font-family:var(--f-mono);font-size:0.5625rem;font-weight:600;letter-spacing:1px;padding:2px 6px;border-radius:4px;margin-left:auto}
.mm-badge.live{background:rgba(22,163,74,.08);color:var(--success)}.mm-badge.coming-soon{background:rgba(217,119,6,.06);color:var(--warning)}
.mm-dot{font-size:0.5rem;line-height:1}
.mm-more{color:var(--accent)!important;font-weight:500;margin-top:0.5rem;border-top:1px solid var(--border);padding-top:0.75rem}

/* ==================== MULTI-STEP FORM ==================== */
.form-step{display:none;overflow:hidden}.form-step.active{display:block;animation:fadeStep .35s ease}
@keyframes fadeStep{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.form-nav{display:flex;gap:1rem;margin-top:2rem;align-items:center}
.step-label{font-family:var(--f-mono);font-size:var(--fs-mono-xs);color:var(--text-muted);letter-spacing:1px}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;min-width:0}
.checkbox-grid.compact{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;min-width:0}
.cb-card{display:flex;align-items:flex-start;gap:0.75rem;padding:1rem;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .25s;user-select:none;background:var(--bg-card);min-width:0;overflow:hidden}
.cb-card:hover{border-color:var(--border-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.cb-card input[type="checkbox"]{margin-top:3px;accent-color:var(--accent);flex-shrink:0}
.cb-card input[type="checkbox"]:checked + .cb-content .cb-title{color:var(--accent)}
.cb-card:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.cb-card.compact{padding:0.75rem}
.cb-content{min-width:0}
.cb-title{font-size:var(--fs-small);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.cb-desc{font-size:0.75rem;color:var(--text-faint);margin-top:0.25rem;line-height:1.4}
.radio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:0.5rem;margin-bottom:1rem}
.radio-card{display:flex;align-items:center;gap:0.5rem;padding:0.65rem 0.75rem;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .25s;font-size:var(--fs-small);user-select:none;background:var(--bg-card);min-width:0}
.radio-card:hover{border-color:var(--border-hover);transform:translateY(-1px)}
.radio-card input[type="radio"]{accent-color:var(--accent);flex-shrink:0}
.radio-card:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.radio-card span{white-space:normal;overflow:hidden;text-overflow:ellipsis;line-height:1.3}

/* ==================== INNER LINK GRIDS ==================== */
.inner-links{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}.inner-links h3{font-size:1rem;margin-bottom:1rem}
.il-grid{display:flex;flex-wrap:wrap;gap:0.5rem}
.il-grid a{font-size:0.8125rem;padding:6px 14px;border:1px solid var(--border);border-radius:50px;color:var(--text-muted);transition:all .25s;white-space:nowrap}
.il-grid a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ==================== LAKE DEMO (Homepage Chat + Sources) ==================== */
.lake-demo{max-width:740px;margin:0 auto;position:relative}
.lake-sources{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:1rem;padding:0 0.5rem}
.lake-node{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--border);border-radius:50px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.5px;color:var(--text-faint);background:var(--bg-card);transition:all .4s ease;opacity:0.5}
.lake-node-dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);transition:all .4s ease;flex-shrink:0}
.lake-node-name{white-space:nowrap}
.lake-node.pulling{opacity:1;border-color:var(--accent);color:var(--accent);background:var(--accent-soft);transform:scale(1.05)}
.lake-node.pulling .lake-node-dot{background:var(--accent);box-shadow:0 0 8px var(--accent-glow);animation:node-pulse 0.8s ease infinite}
.lake-node.done{opacity:0.7;border-color:var(--accent);color:var(--accent)}
.lake-node.done .lake-node-dot{background:var(--accent)}
@keyframes node-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.4)}}

.lake-status{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:0.75rem;font-family:var(--f-mono);font-size:11px;letter-spacing:1px;color:var(--text-faint);transition:color .3s}
.lake-status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);transition:all .3s}
.lake-status.active{color:var(--accent)}
.lake-status.active .lake-status-dot{background:var(--accent);box-shadow:0 0 8px var(--accent-glow);animation:node-pulse 1s ease infinite}

.lake-demo .chat-demo{border:1px solid var(--accent);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 20px var(--accent-glow)}
.lake-demo .chat-body{min-height:320px;position:relative;overflow:hidden;padding:1.5rem}
.lake-demo .chat-msg{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease;max-width:82%}
.lake-demo .chat-msg.msg-visible{opacity:1;transform:translateY(0)}
.lake-demo .chat-msg.msg-exit{opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease}

.chat-credits{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:1px;color:var(--accent);opacity:0;transition:opacity .4s}
.chat-credits.show{opacity:1}

@media(max-width:600px){
  .lake-sources{gap:6px;padding:0}
  .lake-node{padding:4px 8px;font-size:10px}
  .lake-demo .chat-body{min-height:260px;padding:1rem}
}

/* ==================== REDUCED MOTION ==================== */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  .reveal,.reveal-stagger>*,.reveal-scale,.reveal-left,.reveal-right{opacity:1!important;transform:none!important}
  .hero-enter .eyebrow,.hero-enter h1,.hero-enter .hero-desc,.hero-enter .hero-actions,.hero-enter .llm-grid,.hero-enter .img-placeholder{opacity:1!important;transform:none!important;animation:none!important}
  .hero-ripple{display:none!important}
}
/* JS fallback: if observer never fires, reveal after 0.5s */
@keyframes reveal-fallback{to{opacity:1;transform:none}}
.reveal,.reveal-stagger>*,.reveal-scale,.reveal-left,.reveal-right{animation:reveal-fallback 0s .5s forwards}
.reveal.visible,.reveal-stagger.visible>*,.reveal-scale.visible,.reveal-left.visible,.reveal-right.visible{animation:none}

/* ==================== HERO RIPPLE EFFECT ==================== */
.hero,.page-hero{position:relative;overflow:hidden}
.hero-ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--accent-glow) 0%,rgba(0,102,255,0.06) 40%,transparent 70%);transform:translate(-50%,-50%) scale(0);animation:hero-ripple-expand 1s cubic-bezier(.22,1,.36,1) forwards;pointer-events:none;z-index:2;width:800px;height:800px}
[data-theme="dark"] .hero-ripple{background:radial-gradient(circle,rgba(77,148,255,0.25) 0%,rgba(77,148,255,0.08) 40%,transparent 70%)}
@keyframes hero-ripple-expand{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.7}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* ==================== INTERACTIVE WIDGET CONTRAST ==================== */
/* Light mode: darken interactive controls so they stand out */
.theme-toggle{border-color:var(--text-muted);color:var(--text)}
.nav-toggle{border-color:var(--text-muted);color:var(--text)}
.btn-s{border-color:var(--text-muted);color:var(--text)}
.fi{border-color:var(--border-hover)}
.cb-card{border-color:var(--border-hover)}
.radio-card{border-color:var(--border-hover)}
.chat-input{border-top-color:var(--border-hover)}
.pw-tab{color:var(--text-body)}
/* Dark mode: lighten interactive controls so they stand out */
[data-theme="dark"] .theme-toggle{border-color:var(--text-muted);color:var(--text)}
[data-theme="dark"] .nav-toggle{border-color:var(--text-muted);color:var(--text)}
[data-theme="dark"] .btn-s{border-color:var(--text-muted);color:var(--text)}
[data-theme="dark"] .fi{border-color:var(--border-hover)}
[data-theme="dark"] .cb-card{border-color:var(--border-hover)}
[data-theme="dark"] .radio-card{border-color:var(--border-hover)}
[data-theme="dark"] .chat-input{border-top-color:var(--border-hover)}
[data-theme="dark"] .pw-tab{color:var(--text-body)}

/* ==================== CASE STUDIES / RESULTS ==================== */
.results-agg{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:3rem}
.results-agg-item{background:var(--bg);padding:28px 20px;text-align:center}
.results-agg-value{font-family:var(--f-mono);font-size:clamp(1.25rem,3vw,2rem);font-weight:700;color:var(--accent);margin-bottom:6px}
.results-agg-label{font-family:var(--f-mono);font-size:10px;color:var(--text-muted);letter-spacing:0.08em;text-transform:uppercase}
.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1.5rem}
.results-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;background:var(--bg-card);position:relative;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease}
.results-card:hover{border-color:#4A4A46;box-shadow:var(--shadow-md)}
.results-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.results-card-domain{font-family:var(--f-mono);font-size:var(--fs-mono-sm);font-weight:500;color:var(--text)}
.results-card-industry{font-family:var(--f-mono);font-size:10px;color:var(--text-muted);margin-top:3px}
.results-card-status{font-family:var(--f-mono);font-size:10px;color:var(--accent);border:1px solid var(--accent-soft);padding:2px 8px;border-radius:var(--radius-sm);letter-spacing:0.05em;white-space:nowrap}
.results-card-metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.results-card-metric-value{font-family:var(--f-mono);font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:2px}
.results-card-metric-label{font-family:var(--f-mono);font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em}
.results-card-metric-change{font-family:var(--f-mono);font-size:11px;margin-top:2px}
.results-card-metric-change.up{color:var(--accent)}
.results-card-chart{height:60px;position:relative;margin-bottom:12px}
.results-card-chart svg{width:100%;height:100%}
.results-card-chart-line{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.results-card-chart-area{fill:url(#resultsGreenGrad);opacity:0.15}
.results-card-chart-label{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:9px;color:var(--text-faint);margin-top:4px}
.results-card-note{font-family:var(--f-mono);font-size:11px;color:var(--text-muted);border-top:1px solid var(--border);padding-top:14px;line-height:1.5}
.results-card-note em{font-style:normal;color:var(--accent);font-weight:500}
.results-cost-strip{display:inline-flex;align-items:center;gap:14px;margin-top:1.5rem;padding:12px 20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-alt);font-family:var(--f-mono);font-size:var(--fs-mono-sm)}
.results-cost-old{color:var(--text-muted);text-decoration:line-through;text-decoration-color:var(--c2)}
.results-cost-arrow{color:var(--text-faint)}
.results-cost-new{color:var(--accent);font-weight:700}
.results-cost-tag{color:var(--text-muted);font-size:10px;letter-spacing:0.05em}
.results-mini .results-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.results-mini .results-card{padding:20px}
.results-mini .results-card-metrics{gap:10px;margin-bottom:14px}
.results-mini .results-card-metric-value{font-size:1rem}
.results-mini .results-card-chart{height:48px;margin-bottom:8px}
@media(max-width:768px){.results-agg{grid-template-columns:repeat(2,1fr)}.results-grid{grid-template-columns:1fr}.results-cost-strip{flex-direction:column;gap:6px;align-items:flex-start}}
@media(max-width:480px){.results-agg{grid-template-columns:1fr}}