/* ═══ CRGRAm CLOUD — SITE.CSS v7 "Signal" (dark ops console) ═══ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:112.5%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:1rem;line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(16,185,129,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(34,211,238,0.06), transparent 55%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* fine grid + grain overlay for depth */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 100% 80% at 50% 0%, #000 30%, transparent 80%);
}
body>*{position:relative;z-index:1}
img,svg{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:none}
a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(52,211,153,0.3);text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
a:hover{text-decoration-color:var(--accent)}
ul,ol{padding-left:1.3em}
::selection{background:rgba(16,185,129,0.3);color:#fff}

:root{
  --bg:#08090c;
  --bg-2:#0c0e12;
  --bg-3:#101318;
  --surface:#111419;
  --surface-2:#161a21;
  --line:#1c2129;
  --line-2:#272d37;
  --line-3:#323a46;

  --ink:#f2f4f7;
  --ink-2:#b9c1ce;
  --ink-3:#a4adbe;
  --ink-4:#6e7585;

  --accent:#10b981;
  --accent-2:#34d399;
  --accent-deep:#059669;
  --accent-glow:rgba(16,185,129,0.35);
  --cyan:#22d3ee;

  --amber:#f59e0b; --red:#f43f5e; --violet:#8b5cf6; --pink:#ec4899;

  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-sans:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --container:1120px;
  --radius:14px;
  --radius-sm:10px;
  --shadow-soft:0 1px 0 0 rgba(255,255,255,0.04) inset, 0 12px 40px rgba(0,0,0,0.5);
}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;color:var(--ink);letter-spacing:-0.025em;line-height:1.06;margin:0 0 16px}
h1{font-size:clamp(2.4rem,5.6vw,4.25rem);font-weight:800;letter-spacing:-0.035em}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
h3{font-size:1.2rem;font-weight:600;letter-spacing:-0.015em}
p{margin:0 0 14px}
.lead{font-size:1.15rem;color:var(--ink-2);max-width:58ch;line-height:1.6}
.t-mono{font-family:var(--font-mono);font-size:0.85em}
.t-small{font-size:0.82rem;color:var(--ink-2)}
strong{color:var(--ink);font-weight:600}

.container{max-width:var(--container);margin:0 auto;padding:0 28px}
.section{padding:88px 0}
.section-sm{padding:56px 0}
.text-center{text-align:center}

/* eyebrow / mono section label */
.eyebrow,.step-num{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:0.76rem;font-weight:600;
  color:var(--accent-2);text-transform:uppercase;letter-spacing:0.12em;
  margin-bottom:14px;
}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--accent);opacity:0.6}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;border-radius:10px;border:1px solid transparent;font-family:var(--font-sans);font-weight:600;font-size:0.9rem;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);white-space:nowrap;letter-spacing:-0.01em}
.btn:active{transform:translateY(1px)}
.btn-accent{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#04130d;box-shadow:0 0 0 1px rgba(52,211,153,0.4),0 6px 20px var(--accent-glow)}
.btn-accent:hover{box-shadow:0 0 0 1px rgba(52,211,153,0.6),0 10px 28px var(--accent-glow);transform:translateY(-1px)}
.btn-outline{background:rgba(255,255,255,0.02);color:var(--ink);border-color:var(--line-2)}
.btn-outline:hover{border-color:var(--line-3);background:rgba(255,255,255,0.05)}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:transparent}
.btn-ghost:hover{color:var(--ink);background:rgba(255,255,255,0.04)}
.btn-sm{padding:8px 15px;font-size:0.82rem}
.btn-lg{padding:14px 28px;font-size:0.98rem}
.btn-block{width:100%}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#04130d;padding:8px 14px;z-index:10000;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* Header / nav */
header{
  position:sticky;top:0;z-index:1000;
  background:rgba(8,9,12,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:var(--container);margin:0 auto;height:62px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.logo-mark{width:26px;height:26px;border-radius:7px;filter:drop-shadow(0 0 8px rgba(16,185,129,0.4))}
.logo-word{font-family:var(--font-display);font-weight:700;font-size:1.08rem;letter-spacing:-0.02em}
.logo-word .dot{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin:0}
.nav-link{padding:7px 13px;border-radius:8px;font-size:0.88rem;font-weight:500;color:var(--ink-2);text-decoration:none;transition:all .15s}
.nav-link:hover{color:var(--ink);background:rgba(255,255,255,0.04)}
.nav-link.active{color:var(--ink)}
.nav-cta-row{display:flex;align-items:center;gap:10px}
.nav-hamburger{display:none;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:9px;color:var(--ink)}
.nav-hamburger:hover{border-color:var(--line-3)}
#nav-drawer{position:fixed;inset:62px 0 0 0;background:var(--bg);padding:22px 28px;display:flex;flex-direction:column;gap:2px;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:999;overflow-y:auto;border-left:1px solid var(--line)}
#nav-drawer.open{transform:translateX(0)}
.drawer-link{display:block;padding:14px 8px;color:var(--ink);font-family:var(--font-display);font-size:1.3rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
@media(max-width:880px){.nav-links{display:none}.nav-hamburger{display:inline-flex}.nav-cta-row .btn:not(.always-show):not(.nav-hamburger){display:none}}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.35)}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes typing-dot{0%,60%,100%{opacity:.25}30%{opacity:1}}
@keyframes glow{0%,100%{opacity:.5}50%{opacity:.9}}
.animate-up{animation:fadeInUp .6s cubic-bezier(.4,0,.2,1) both}
.animate-up:nth-child(2){animation-delay:.08s}
.animate-up:nth-child(3){animation-delay:.16s}
.animate-up:nth-child(4){animation-delay:.24s}
.pulse-dot{animation:pulse-dot 2s ease-in-out infinite}
.typing-dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent-2);margin:0 1px;animation:typing-dot 1.4s infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}

/* Hero */
.hero{padding:72px 0 48px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:-6%;z-index:0;background-image:linear-gradient(180deg,rgba(8,9,12,0.7) 0%,rgba(8,9,12,0.88) 55%,var(--bg) 100%),radial-gradient(ellipse 70% 60% at 65% 30%,rgba(8,9,12,0.5),transparent 70%),url(/assets/img/hero-bg.webp);background-size:cover;background-position:center 30%;background-repeat:no-repeat;animation:kenburns 32s ease-in-out infinite alternate;will-change:transform}
.hero::before{content:'';position:absolute;top:-220px;right:-180px;width:520px;height:520px;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 62%);filter:blur(70px);pointer-events:none;animation:glow 7s ease-in-out infinite;opacity:.45;z-index:1}
.hero::after{content:'';position:absolute;top:120px;left:-200px;width:520px;height:520px;background:radial-gradient(circle,rgba(34,211,238,0.12) 0%,transparent 60%);filter:blur(80px);pointer-events:none;z-index:1}
.hero>.container{position:relative;z-index:2}
@keyframes kenburns{from{transform:scale(1.01)}to{transform:scale(1.09) translate(-1.2%,-1.5%)}}

/* trust strip */
.trust-strip{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;font-family:var(--font-mono);font-size:0.8rem;color:var(--ink-3);letter-spacing:0.02em}
.trust-strip .dot-sep{color:var(--ink-4)}
.trust-strip .live{display:inline-flex;align-items:center;gap:6px;color:var(--accent-2)}
.trust-strip .live .pip{width:6px;height:6px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 8px var(--accent-2);animation:pulse-dot 2s infinite}

/* Product window (was product-frame) — now native to dark canvas */
.product-frame{
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  border-radius:16px;overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-soft),0 0 80px rgba(16,185,129,0.06);
  position:relative;
}
.product-frame::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0.7;animation:shimmer 5s ease-in-out infinite}
.product-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,0.015)}
.product-bar .tdot{width:10px;height:10px;border-radius:50%;background:var(--line-3)}
.product-bar .tdot:nth-child(1){background:#f43f5e80}.product-bar .tdot:nth-child(2){background:#f59e0b80}.product-bar .tdot:nth-child(3){background:#10b98180}
.product-bar .url{margin-left:10px;font-family:var(--font-mono);font-size:0.72rem;color:var(--ink-3)}

/* Dark cards (product visuals) */
.dark-card{
  background:linear-gradient(180deg,var(--surface),var(--bg-3));
  border-radius:14px;padding:26px;
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-soft);
  position:relative;overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.dark-card:hover{transform:translateY(-3px);border-color:var(--line-3);box-shadow:var(--shadow-soft),0 0 50px rgba(16,185,129,0.05)}
.dark-card::before{content:'';position:absolute;inset:0;border-radius:14px;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,0.06),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.dark-row{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:7px;transition:all .2s;display:flex;justify-content:space-between;align-items:center}
.dark-row:last-child{margin-bottom:0}
.dark-row:hover{border-color:var(--line-2);background:var(--surface-2)}

/* status pills (semantic) */
.dpill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:0.68rem;font-weight:600;border:1px solid transparent;white-space:nowrap;letter-spacing:0.01em}
.dpill .pip{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.dpill-pay{background:rgba(236,72,153,.1);color:#f9a8d4;border-color:rgba(236,72,153,.22)}.dpill-pay .pip{background:#ec4899}
.dpill-bring{background:rgba(139,92,246,.1);color:#c4b5fd;border-color:rgba(139,92,246,.22)}.dpill-bring .pip{background:#8b5cf6}
.dpill-stuck{background:rgba(245,158,11,.1);color:#fcd34d;border-color:rgba(245,158,11,.22)}.dpill-stuck .pip{background:#f59e0b}
.dpill-missed{background:rgba(244,63,94,.1);color:#fda4af;border-color:rgba(244,63,94,.22)}.dpill-missed .pip{background:#f43f5e}
.dpill-hot{background:rgba(239,68,68,.1);color:#fca5a5;border-color:rgba(239,68,68,.22)}.dpill-hot .pip{background:#ef4444}
.dpill-active{background:rgba(16,185,129,.1);color:#6ee7b7;border-color:rgba(16,185,129,.22)}.dpill-active .pip{background:#10b981}
.dpill-cold{background:rgba(100,116,139,.12);color:#cbd5e1;border-color:rgba(100,116,139,.25)}.dpill-cold .pip{background:#64748b}

/* Feature grid */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:840px){.feature-grid{grid-template-columns:1fr;gap:36px}}
.divider{border:0;border-top:1px solid var(--line);margin:0}

/* how-it-works steps */
.steps{display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:18px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step-num-badge{width:38px;height:38px;border-radius:11px;background:linear-gradient(180deg,rgba(16,185,129,0.18),rgba(16,185,129,0.06));border:1px solid rgba(16,185,129,0.3);color:var(--accent-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1rem;flex-shrink:0}

/* Beta / pricing cards */
.beta-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}@media(max-width:780px){.beta-grid{grid-template-columns:1fr}}
.beta-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
@media(max-width:780px){.beta-grid-3{grid-template-columns:1fr}}
.beta-card{border:1px solid var(--line-2);border-radius:16px;padding:30px;background:linear-gradient(180deg,var(--surface),var(--bg-3));transition:transform .2s,border-color .2s,box-shadow .2s;display:flex;flex-direction:column}
.beta-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.beta-foot{margin-top:auto;padding-top:14px}
.beta-card.featured{border-color:rgba(16,185,129,0.5);background:linear-gradient(180deg,rgba(16,185,129,0.07),var(--bg-3));box-shadow:0 0 0 1px rgba(16,185,129,0.2),0 20px 50px rgba(16,185,129,0.08)}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line);padding:20px 0}
.faq-item:last-child{border-bottom:none}
.faq-item h3{font-size:1.1rem;font-weight:600;margin-bottom:8px;cursor:pointer;color:var(--ink)}
.faq-item p{color:var(--ink-2);font-size:1rem;margin:0;line-height:1.6}

/* stat row */
.stat-row{display:flex;gap:40px;justify-content:center;flex-wrap:wrap}
.stat .num{font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:var(--accent-2);margin:0;letter-spacing:-0.02em}
.stat .lbl{font-size:0.82rem;color:var(--ink-3);margin:5px 0 0}

/* Footer */
footer{background:var(--bg-2);color:var(--ink-3);padding:60px 0 28px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid var(--line)}
@media(max-width:780px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-brand h2,.footer-brand h3{font-family:var(--font-display);color:var(--ink);font-size:1.2rem;font-weight:600;margin:0 0 8px;letter-spacing:-0.02em}
.footer-brand h2 .dot,.footer-brand h3 .dot{color:var(--accent)}
.footer-brand p{color:var(--ink-3);font-size:0.9rem;max-width:260px;line-height:1.55}
.footer-label{font-family:var(--font-mono);font-size:0.78rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:9px}
.footer-links a{color:var(--ink-2);font-size:0.9rem;text-decoration:none;transition:color .15s}
.footer-links a:hover{color:var(--ink)}
.footer-bottom{padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:0.84rem;color:var(--ink-3)}
.footer-bottom a{color:var(--ink-4);text-decoration:none}
.footer-bottom a:hover{color:var(--ink-2)}

/* Forms */
.field{margin-bottom:16px}
.field label{display:block;font-size:0.88rem;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.input,.textarea{width:100%;background:var(--bg-3);border:1px solid var(--line-2);color:var(--ink);padding:11px 13px;border-radius:10px;font-family:inherit;font-size:0.94rem;transition:border-color .15s,box-shadow .15s}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(16,185,129,0.15)}
.textarea{min-height:90px;resize:vertical}

/* Prose (legal/text pages) */
.prose{max-width:700px}
.prose h2{margin-top:44px;margin-bottom:14px;font-size:1.45rem}
.prose h3{margin-top:28px;margin-bottom:10px}
.prose p{color:var(--ink-2);line-height:1.7;margin-bottom:15px}
.prose a{color:var(--accent-2)}
.prose code{font-family:var(--font-mono);font-size:0.85em;background:var(--surface-2);border:1px solid var(--line);padding:1px 6px;border-radius:5px}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{color:var(--ink-2);line-height:1.7}
.prose-page{max-width:740px;margin:0 auto;padding:56px 28px}

/* CTA dark band */
.cta-dark{background:radial-gradient(800px 400px at 50% 0%,rgba(16,185,129,0.12),transparent 70%),var(--bg-2);border-top:1px solid var(--line);color:var(--ink);padding:80px 0}
.cta-dark h2{color:var(--ink)}
.cta-dark p{color:var(--ink-2)}

/* Reveal-on-scroll */
[data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
[data-reveal].in{opacity:1;transform:translateY(0)}

.hidden{display:none!important}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:24px}.mt-6{margin-top:32px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:24px}.mb-6{margin-bottom:32px}
.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}

/* Comparison (folders vs CRgraM) */
.cmp-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line)}
.cmp-row:last-child{border-bottom:none}
.cmp-row.hd{padding:14px 24px;background:var(--bg-3)}
.cmp-cap{font-weight:600;color:var(--ink);font-size:1.05rem;line-height:1.4}
.cmp-no,.cmp-yes{font-size:1rem;color:var(--ink-3);line-height:1.4}
.cmp-no b{color:#fda4af;font-weight:600}
.cmp-yes b{color:var(--accent-2);font-weight:600}
.cmp-row.hd .cmp-cap,.cmp-row.hd .cmp-no,.cmp-row.hd .cmp-yes{font-family:var(--font-mono);font-size:0.9rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-2);font-weight:600}
@media(max-width:680px){.cmp-row{grid-template-columns:1fr;gap:6px;padding:16px 18px}.cmp-row.hd{display:none}}

/* ═══ Mobile ═══ */
@media(max-width:780px){
  .container{padding:0 20px}
  .section{padding:60px 0}
  .section-sm{padding:44px 0}
  .hero{padding:52px 0 36px}
  .hero-grid{gap:34px}
  h1{font-size:clamp(1.95rem,8.5vw,2.5rem)}
  h2{font-size:clamp(1.45rem,6vw,1.85rem)}
  .feature-grid{gap:36px}
  .hero .btn-lg{flex:1 1 100%}
  /* interactive dashboard: stack — sidebar becomes wrapping filter chips */
  .demo-body{flex-direction:column!important}
  .demo-side{width:auto!important;max-width:none!important;display:flex!important;flex-direction:row;flex-wrap:wrap!important;gap:6px;padding:12px!important;border-right:none!important;border-bottom:1px solid var(--line)!important}
  .demo-side>*:not(.demo-side-item){display:none!important}
  .demo-side-item{white-space:nowrap!important}
  .demo-main{width:100%!important;padding:14px!important}
  .demo-row-main{flex-wrap:wrap}
  .demo-row-main>div:first-child{min-width:0;flex:1 1 100%}
  .trust-strip{font-size:0.68rem;gap:7px 12px}
  .beta-card{padding:24px}
  .stat-row{gap:22px}
  .product-bar .url{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cta-dark{padding:60px 0}
}
@media(max-width:480px){
  .container{padding:0 16px}
  .section{padding:48px 0}
  .hero{padding:44px 0 32px}
  .hero .btn-lg{width:100%}
  .demo-side-item{font-size:0.8rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ═══ Interactive hero dashboard ═══ */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.demo{position:relative;z-index:2}
.demo .product-frame{animation:fadeInUp .6s cubic-bezier(.4,0,.2,1) .2s both}
.demo-body{display:flex;min-height:360px}
.demo-side{width:184px;background:var(--bg-2);border-right:1px solid var(--line);padding:14px 10px;flex-shrink:0}
.demo-side-item{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 9px;border-radius:8px;font-size:0.85rem;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s;border:1px solid transparent;user-select:none}
.demo-side-item:hover{background:var(--surface-2);color:var(--ink)}
.demo-side-item .ct{font-family:var(--font-mono);font-weight:600;color:var(--ink-3);font-size:0.78rem}
.demo-side-item.active{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.24);color:var(--ink);font-weight:500}
.demo-side-item.active .ct{color:var(--accent-2)}
.demo-main{flex:1;padding:16px 18px}
.demo-row{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:7px;cursor:pointer;transition:background .15s,border-color .15s}
.demo-row:hover{border-color:var(--line-2);background:var(--surface-2)}
.demo-row:last-child{margin-bottom:0}
.demo-row-main{display:flex;justify-content:space-between;align-items:center;gap:10px}
.demo-summary{display:none;padding:10px 2px 0;margin-top:9px;border-top:1px solid var(--line)}
.demo-row.open{background:var(--surface-2);border-color:var(--line-2)}
.demo-row.open .demo-summary{display:block}
.demo-ai{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:0.62rem;font-weight:600;color:#c4b5fd;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px}
.demo-summary p{margin:0;font-size:0.82rem;color:var(--ink-2);line-height:1.55}
.demo-hint{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:0.6rem;color:var(--ink-4);letter-spacing:0.04em;margin-top:12px;justify-content:center}
.demo-hint .pulse{width:5px;height:5px;border-radius:50%;background:var(--accent-2);animation:pulse-dot 2s infinite}

/* ═══ Real demo screenshots ═══ */
.demo-shot{border-radius:12px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 20px 60px rgba(0,0,0,.45);position:relative;background:#0e1621}
.demo-shot img{display:block;width:100%;height:auto}
.demo-shot .shot-glow{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px rgba(42,171,238,.06);border-radius:12px}
.shot-browser{border-radius:12px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 24px 70px rgba(0,0,0,.5);background:#0e1621}
.shot-browser .sb-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#17212b;border-bottom:1px solid #243042}
.shot-browser .sb-dots{display:flex;gap:6px}
.shot-browser .sb-dots span{width:11px;height:11px;border-radius:50%}
.shot-browser .sb-dots span:nth-child(1){background:#ff5f57}
.shot-browser .sb-dots span:nth-child(2){background:#febc2e}
.shot-browser .sb-dots span:nth-child(3){background:#28c840}
.shot-browser .sb-url{flex:1;text-align:center;font-family:var(--font-mono);font-size:0.72rem;color:var(--ink-3);background:#0e1621;padding:4px 12px;border-radius:6px;border:1px solid #243042}
.shot-browser img{display:block;width:100%;height:auto}
@media(max-width:1000px){.shot-browser .sb-url{font-size:0.66rem}}

/* ═══ Coded demo mockups (Telegram-skeleton) ═══ */
.tg{--t-bg:#0e1621;--t-bg2:#17212b;--t-bg3:#1c2733;--t-line:#243042;--t-line2:#324160;--t-ink:#eaf1f8;--t-ink2:#b8c8db;--t-ink3:#8fa4bd;--t-ink4:#6c8199;--t-accent:#2aabee;--t-accent2:#5eb5f7;--t-ok:#6fb88a;--t-warn:#e8a838;--t-bad:#e07a76;--t-info:#5b9ed8;--t-bubIn:#1a2738;--t-bubOut:#2b5278;background:var(--t-bg);border-radius:14px;overflow:hidden;border:1px solid var(--t-line);font-family:'Inter',system-ui,sans-serif;color:var(--t-ink);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.tg *{box-sizing:border-box}
.tg-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--t-bg2);border-bottom:1px solid var(--t-line)}
.tg-bar .ham{font-size:1rem;color:var(--t-ink3);cursor:pointer;user-select:none}
.tg-bar .ttl{font-weight:600;font-size:0.88rem;color:var(--t-ink)}
.tg-bar .srch{flex:1;background:var(--t-bg3);border:1px solid var(--t-line);border-radius:8px;padding:6px 10px;font-size:0.8rem;color:var(--t-ink3);font-family:inherit}
.tg-bar .srch::placeholder{color:var(--t-ink4)}
.tg-body{display:flex;min-height:0}
.tg-views{width:150px;background:var(--t-bg2);border-right:1px solid var(--t-line);display:flex;flex-direction:column;gap:1px;padding:8px 6px;flex-shrink:0}
.tg-vi{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;font-size:0.78rem;color:var(--t-ink3);cursor:pointer;transition:background .12s,color .12s;border:none;background:none;font-family:inherit;text-align:left;width:100%}
.tg-vi:hover{background:var(--t-bg3);color:var(--t-ink2)}
.tg-vi.on{background:var(--t-accent);color:#fff}
.tg-vi .ic{font-size:0.92rem;flex-shrink:0;width:18px;text-align:center}
.tg-vi .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-vi .ct{font-family:'JetBrains Mono',monospace;font-size:0.6rem;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0}
.tg-vi:not(.on) .ct{background:var(--t-bad);color:#fff}
.tg-vi.on .ct{background:var(--t-bg);color:var(--t-accent)}
.tg-list{flex:1;overflow-y:auto;min-width:0;border-right:1px solid var(--t-line)}
.tg-cl{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--t-line)}
.tg-cl:hover{background:var(--t-bg2)}
.tg-cl.on{background:var(--t-bg3)}
.tg-cl .av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;flex-shrink:0;color:#fff}
.tg-cl .info{flex:1;min-width:0}
.tg-cl .info .top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.tg-cl .info .nm{font-weight:600;font-size:0.82rem;color:var(--t-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-cl .info .tm{font-size:0.66rem;color:var(--t-ink4);flex-shrink:0;font-family:'JetBrains Mono',monospace}
.tg-cl .info .sub{font-size:0.72rem;color:var(--t-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.tg-cl .pill{font-size:0.58rem;font-weight:700;padding:2px 6px;border-radius:5px;white-space:nowrap;flex-shrink:0;letter-spacing:0.03em}
.tg-cockpit{width:240px;background:var(--t-bg2);padding:14px;overflow-y:auto;flex-shrink:0}
.tg-cockpit .ck-sec{font-family:'JetBrains Mono',monospace;font-size:0.58rem;color:var(--t-ink4);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--t-line)}
.tg-cockpit .ck-sum{font-size:0.78rem;color:var(--t-ink2);line-height:1.5;margin-bottom:14px}
.tg-cockpit .ck-kv{display:flex;justify-content:space-between;align-items:center;padding:6px 9px;background:var(--t-bg3);border-radius:6px;margin-bottom:4px;font-size:0.72rem}
.tg-cockpit .ck-kv .k{color:var(--t-ink3)}
.tg-cockpit .ck-kv .v{color:var(--t-ink);font-family:'JetBrains Mono',monospace;font-size:0.7rem}
.tg-cockpit .ck-ai{background:rgba(42,171,238,.06);border:1px solid rgba(42,171,238,.2);border-radius:8px;padding:10px 12px;margin-bottom:14px}
.tg-cockpit .ck-ai .lb{font-family:'JetBrains Mono',monospace;font-size:0.56rem;font-weight:600;color:var(--t-accent2);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px}
.tg-cockpit .ck-ai .tx{font-size:0.76rem;color:var(--t-ink2);line-height:1.5;font-style:italic}
.tg-cockpit .ck-draft{background:rgba(111,184,138,.06);border:1px solid rgba(111,184,138,.2);border-radius:8px;padding:10px 12px}
.tg-cockpit .ck-draft .lb{font-family:'JetBrains Mono',monospace;font-size:0.56rem;font-weight:600;color:var(--t-ok);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px}
.tg-cockpit .ck-draft .tx{font-size:0.76rem;color:var(--t-ink);line-height:1.5}
.tg-cockpit .ck-act{display:flex;align-items:flex-start;gap:7px;font-size:0.74rem;color:var(--t-ink2);line-height:1.4;margin-bottom:5px}
.tg-cockpit .ck-act .dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--t-ink4);flex-shrink:0;margin-top:1px;cursor:pointer}
.tg-cockpit .ck-act.done .dot{background:var(--t-ok);border-color:var(--t-ok)}
.tg-cockpit .ck-act.done .tx{text-decoration:line-through;color:var(--t-ink4)}
.tg-people{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:0.72rem}
.tg-people .av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.56rem;font-weight:700;color:#fff;flex-shrink:0}
.tg-people .nm{color:var(--t-ink);font-weight:500}
.tg-people .rl{color:var(--t-ink4);font-size:0.66rem}
.tg-people .tm{margin-left:auto;color:var(--t-ink4);font-size:0.62rem;font-family:'JetBrains Mono',monospace}
.tg-metrics{display:flex;gap:6px;padding:6px 12px;background:var(--t-bg2);border-bottom:1px solid var(--t-line)}
.tg-metric{flex:1;text-align:center;padding:5px 4px;border-radius:6px;font-size:0.58rem}
.tg-metric .lb{color:var(--t-ink4);text-transform:uppercase;letter-spacing:0.04em;font-family:'JetBrains Mono',monospace;margin-bottom:2px}
.tg-metric .vl{font-weight:700;font-size:0.72rem;font-family:'JetBrains Mono',monospace}
.tg-bubbles{padding:12px 14px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1}
.tg-bub{max-width:80%;padding:8px 12px;border-radius:12px;font-size:0.8rem;line-height:1.45}
.tg-bub.in{background:var(--t-bubIn);align-self:flex-start;border-bottom-left-radius:4px}
.tg-bub.out{background:var(--t-bubOut);align-self:flex-end;border-bottom-right-radius:4px}
.tg-bub .snd{font-size:0.66rem;font-weight:700;margin-bottom:2px}
.tg-bub.in .snd{color:var(--t-accent2)}
.tg-bub.out .snd{color:#a5d4ff}
.tg-bub .meta{font-size:0.58rem;color:var(--t-ink4);margin-top:3px;font-family:'JetBrains Mono',monospace}
.tg-bub.del{background:rgba(224,122,118,.06);border:1px solid rgba(224,122,118,.2)}
.tg-bub.del .tx{text-decoration:line-through;color:var(--t-ink4)}
.tg-bub.del .tag{font-size:0.56rem;font-weight:700;color:var(--t-bad);background:rgba(224,122,118,.15);padding:1px 5px;border-radius:4px;display:inline-block;margin-bottom:4px}
.tg-compose{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--t-bg2);border-top:1px solid var(--t-line)}
.tg-compose .inp{flex:1;background:var(--t-bg3);border:1px solid var(--t-line);border-radius:10px;padding:8px 12px;font-size:0.8rem;color:var(--t-ink3);font-family:inherit}
.tg-compose .inp::placeholder{color:var(--t-ink4)}
.tg-compose .send{width:34px;height:34px;border-radius:50%;background:var(--t-accent);border:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.9rem;cursor:pointer;flex-shrink:0}
.tg-compose .ai-btn{padding:5px 10px;border-radius:8px;background:rgba(111,184,138,.12);border:1px solid rgba(111,184,138,.25);color:var(--t-ok);font-size:0.66rem;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.tg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;padding:10px}
.tg-card{background:var(--t-bg2);border:1px solid var(--t-line);border-radius:10px;padding:12px}
.tg-card .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tg-card .nm{font-weight:600;font-size:0.82rem;color:var(--t-ink)}
.tg-card .meta{font-size:0.62rem;color:var(--t-ink4);font-family:'JetBrains Mono',monospace;margin-bottom:8px}
.tg-card .row{display:flex;justify-content:space-between;font-size:0.7rem;margin-bottom:3px}
.tg-card .row .k{color:var(--t-ink3)}
.tg-card .row .v{color:var(--t-ink);font-family:'JetBrains Mono',monospace}
.tg-srch-bar{display:flex;align-items:center;gap:9px;padding:10px 14px;background:var(--t-bg2);border-bottom:1px solid var(--t-line)}
.tg-srch-bar .inp{flex:1;background:var(--t-bg3);border:1px solid var(--t-line);border-radius:8px;padding:7px 10px;font-size:0.8rem;color:var(--t-ink);font-family:inherit}
.tg-srch-bar .cnt{font-size:0.66rem;color:var(--t-ink4);font-family:'JetBrains Mono',monospace}
.tg-srch-res{padding:10px 14px}
.tg-srch-item{background:var(--t-bg2);border:1px solid var(--t-line);border-radius:10px;padding:12px;margin-bottom:7px;cursor:pointer;transition:border-color .12s}
.tg-srch-item:hover{border-color:var(--t-line2)}
.tg-srch-item .q{font-size:0.8rem;color:var(--t-ink);line-height:1.45;margin-bottom:5px}
.tg-srch-item .src{display:flex;gap:10px;font-size:0.6rem;color:var(--t-ink4);font-family:'JetBrains Mono',monospace}
.tg-srch-item .src .match{color:var(--t-accent2)}
.tg-srch-item mark{background:rgba(42,171,238,.2);color:var(--t-accent2);padding:0 3px;border-radius:3px}
.tg-today{padding:10px 14px}
.tg-today-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--t-bg2);border:1px solid var(--t-line);border-radius:10px;margin-bottom:6px;cursor:pointer;transition:border-color .12s,background .12s}
.tg-today-item:hover{border-color:var(--t-line2);background:var(--t-bg3)}
.tg-today-item .av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.68rem;font-weight:700;color:#fff;flex-shrink:0}
.tg-today-item .info{flex:1;min-width:0}
.tg-today-item .info .nm{font-weight:600;font-size:0.8rem;color:var(--t-ink)}
.tg-today-item .info .act{font-size:0.72rem;color:var(--t-ink3);margin-top:1px}
.tg-today-item .pill{font-size:0.56rem;font-weight:700;padding:2px 6px;border-radius:5px;flex-shrink:0}
.tg-today-item .tm{font-size:0.62rem;color:var(--t-ink4);font-family:'JetBrains Mono',monospace;flex-shrink:0}
.tg-themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;padding:10px}
.tg-theme{background:var(--t-bg2);border:2px solid var(--t-line);border-radius:10px;padding:10px;cursor:pointer;transition:border-color .12s}
.tg-theme:hover{border-color:var(--t-line2)}
.tg-theme.on{border-color:var(--t-accent)}
.tg-theme .swatches{display:flex;gap:3px;margin-bottom:7px}
.tg-theme .sw{width:18px;height:18px;border-radius:4px}
.tg-theme .nm{font-size:0.72rem;font-weight:600;color:var(--t-ink)}
.tg-theme .desc{font-size:0.62rem;color:var(--t-ink4);margin-top:2px}
.tg-toggles{padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.tg-toggle{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--t-bg2);border:1px solid var(--t-line);border-radius:8px}
.tg-toggle .lb{font-size:0.78rem;color:var(--t-ink2)}
.tg-toggle .sw{width:34px;height:18px;border-radius:9px;background:var(--t-bg3);border:1px solid var(--t-line);position:relative;cursor:pointer;transition:background .15s}
.tg-toggle .sw::after{content:'';position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%;background:var(--t-ink4);transition:left .15s,background .15s}
.tg-toggle.on .sw{background:var(--t-accent)}
.tg-toggle.on .sw::after{left:17px;background:#fff}
.tg-money-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px}
.tg-money-stat{background:var(--t-bg2);border:1px solid var(--t-line);border-radius:8px;padding:10px;text-align:center}
.tg-money-stat .lb{font-size:0.56rem;color:var(--t-ink4);text-transform:uppercase;letter-spacing:0.04em;font-family:'JetBrains Mono',monospace;margin-bottom:4px}
.tg-money-stat .vl{font-size:1rem;font-weight:800;font-family:'JetBrains Mono',monospace}
.tg-money-stat.bad .vl{color:var(--t-bad)}
.tg-money-stat.ok .vl{color:var(--t-ok)}
.tg-money-stat.warn .vl{color:var(--t-warn)}
.tg-money-rows{padding:0 10px 10px}
.tg-money-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--t-bg2);border:1px solid var(--t-line);border-radius:8px;margin-bottom:5px}
.tg-money-row .av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.62rem;font-weight:700;color:#fff;flex-shrink:0}
.tg-money-row .info{flex:1;min-width:0}
.tg-money-row .nm{font-weight:600;font-size:0.76rem;color:var(--t-ink)}
.tg-money-row .sub{font-size:0.62rem;color:var(--t-ink4);font-family:'JetBrains Mono',monospace}
.tg-money-row .amt{font-weight:700;font-size:0.76rem;font-family:'JetBrains Mono',monospace;color:var(--t-ink)}
.tg-money-row.overdue .amt{color:var(--t-bad)}
@media(max-width:780px){
  .tg-views{display:none}
  .tg-cockpit{display:none}
  .tg-list{border-right:none}
  .tg-money-stats{grid-template-columns:repeat(2,1fr)}
  .tg-cards{grid-template-columns:1fr}
  .tg-themes{grid-template-columns:repeat(2,1fr)}
}

.footer-company{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:0.72rem;line-height:1.5;color:var(--ink-4)}