:root{
  --ink:#0E0E10;
  --ink-2:#15151A;
  --ink-3:#1E1E24;
  --bone:#F4F1EA;
  --cream:#FAF7F0;
  --paper:#EEEAE0;
  --gold:#E4B649;
  --gold-deep:#B8893D;
  --gold-soft:#F2D88A;
  --muted:#6B6B70;
  --muted-2:#9A968D;
  --line-d:rgba(255,255,255,0.08);
  --line-l:rgba(14,14,16,0.10);
  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,0.45);
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-xl:42px;
  --font-sans:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --font-serif:'Fraunces', Georgia, serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden}
body{
  font-family:var(--font-sans);
  background:var(--ink);
  color:var(--bone);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.005em;
  line-height:1.45;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:1320px;margin:0 auto;padding:0 32px}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(228,182,73,0.15)}
h1,h2,h3,h4{font-weight:600;letter-spacing:-0.025em;margin:0;line-height:1.05;overflow-wrap:break-word;word-break:normal;text-wrap: pretty;}
p{margin:0;text-wrap: pretty;}

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;
  font-weight:600;font-size:15px;letter-spacing:-0.01em;
  transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--gold);color:#1a1408;box-shadow:0 10px 30px -10px rgba(228,182,73,0.6), inset 0 1px 0 rgba(255,255,255,0.3)}
.btn-primary:hover{transform:translateY(-2px);background:var(--gold-soft)}
.btn-ghost{background:transparent;color:var(--bone);border:1px solid var(--line-d)}
.btn-ghost:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.18)}
.btn-dark{background:var(--ink);color:var(--bone)}
.btn-dark:hover{background:#000}
.btn-light{background:var(--bone);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translateX(3px)}

/* ========== NAV ========== */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background:rgba(14,14,16,0.72);
  border-bottom:1px solid var(--line-d);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-0.02em}
.logo-mark{
  width:240px;
  height:42px;
  border-radius:12px;
  background:none;
  position:relative;
  display:grid;
  place-items:center;
  box-shadow:none;
}
.logo-mark::after{
  display:none;
}

.wa-avatar,
.chat-head .av,
.mock-ai-badge .ic,
.cm.bot .av{
  background:none;
}

.wa-avatar img,
.chat-head .av img,
.mock-ai-badge .ic img,
.cm.bot .av img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.chat-head .av::after{
  display:none;
}
.logo .dot{color:var(--gold)}
.nav-links{display:flex;gap:34px;font-size:14px;color:var(--muted-2)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--bone)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .signin{font-size:14px;color:var(--muted-2)}
.nav-cta .signin:hover{color:var(--bone)}

/* ========== HERO ========== */
.hero{
  position:relative;overflow:hidden;
  padding:64px 0 100px;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(228,182,73,0.10), transparent 60%),
    radial-gradient(700px 400px at 10% 30%, rgba(228,182,73,0.05), transparent 60%);
  pointer-events:none;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent 80%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns: 1.05fr 1fr;gap:60px;align-items:center}
.hero h1{
  font-size:clamp(42px, 6.2vw, 72px);
  font-weight:500;
  letter-spacing:-0.035em;
  line-height:0.98;
  margin-top:28px;
}
.hero h1 em{font-style:normal;color:var(--gold);font-family:var(--font-serif);font-weight:300;font-style:italic;letter-spacing:-0.02em}
.hero-sub{
  margin-top:28px;font-size:19px;color:var(--muted-2);max-width:520px;line-height:1.55;
}
.hero-ctas{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{
  margin-top:42px;display:flex;align-items:center;gap:28px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
}
.hero-meta .dot-sep{width:4px;height:4px;border-radius:50%;background:var(--muted)}
.hero-stats{
  margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-top:36px;border-top:1px solid var(--line-d);max-width:560px;
}
.hero-stats .stat-num{font-size:32px;font-weight:600;letter-spacing:-0.03em;color:var(--bone)}
.hero-stats .stat-num span{color:var(--gold)}
.hero-stats .stat-lbl{margin-top:6px;font-size:12px;color:var(--muted);font-family:var(--font-mono);letter-spacing:0.06em}

/* ========== Hero mockup ========== */
.mock-stage{position:relative;height:640px}
.mock-card{
  position:absolute;
  background:linear-gradient(180deg,#1A1A20 0%, #0F0F13 100%);
  border:1px solid var(--line-d);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}

.mock-dash{
  inset:0 0 80px 60px;
  padding:18px;
}
.mock-dash-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line-d)}
.mock-dash-top .tabs{display:flex;gap:6px}
.mock-dash-top .tabs span{width:9px;height:9px;border-radius:50%;background:#2a2a32}
.mock-dash-top .tabs span:first-child{background:var(--gold)}
.mock-dash-top .url{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.mock-dash-top .live{font-family:var(--font-mono);font-size:10px;color:#7CD992;display:flex;align-items:center;gap:6px}
.mock-dash-top .live::before{content:"";width:6px;height:6px;border-radius:50%;background:#7CD992;box-shadow:0 0 0 3px rgba(124,217,146,0.18);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.dash-body{display:grid;grid-template-columns:160px 1fr;gap:14px;margin-top:14px;height:calc(100% - 50px)}
.dash-side{display:flex;flex-direction:column;gap:6px}
.dash-side .nav-item{
  font-size:12px;color:var(--muted-2);padding:8px 10px;border-radius:8px;
  display:flex;align-items:center;gap:9px;
}
.dash-side .nav-item.active{background:rgba(228,182,73,0.10);color:var(--gold)}
.dash-side .nav-item .ic{width:14px;height:14px;border-radius:4px;background:#252530}
.dash-side .nav-item.active .ic{background:var(--gold)}
.dash-side .sep{height:1px;background:var(--line-d);margin:6px 4px}
.dash-side .lbl{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px}

.dash-main{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start}
.dash-tile{
  background:rgba(255,255,255,0.025);
  border:1px solid var(--line-d);
  border-radius:14px;padding:14px;
}
.dash-tile .lab{font-family:var(--font-mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.12em}
.dash-tile .val{margin-top:8px;font-size:24px;font-weight:600;letter-spacing:-0.02em}
.dash-tile .val span{color:var(--gold)}
.dash-tile .delta{margin-top:4px;font-family:var(--font-mono);font-size:10px;color:#7CD992}
.dash-tile.wide{grid-column:span 2;padding-bottom:10px}
.dash-tile.wide .lab{margin-bottom:8px}
.spark{height:54px;display:flex;align-items:end;gap:3px}
.spark span{flex:1;background:linear-gradient(180deg,var(--gold) 0%, rgba(228,182,73,0.3) 100%);border-radius:2px 2px 0 0;opacity:0.85}

.mock-wa{
  width:260px;
  right:-10px;bottom:0;
  top:90px;
  border-radius:36px;
  border:8px solid #1c1c22;
  background:#0a0a0c;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,0.7);
}
.mock-wa::before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:90px;height:22px;background:#1c1c22;border-radius:0 0 14px 14px;z-index:3;
}
.wa-head{
  padding:34px 14px 12px;background:#1F2C33;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid #2a3942;
}
.wa-avatar{width:32px;height:32px;border-radius:50%;background:none;display:grid;place-items:center;font-size:11px;font-weight:700;color:#1a1408}
.wa-name{font-size:13px;font-weight:600;color:#E9EDEF}
.wa-status{font-size:10px;color:#8696A0;display:flex;align-items:center;gap:6px}
.wa-status::before{content:"";width:6px;height:6px;background:#25D366;border-radius:50%}
.wa-body{
  background:#0B141A;
  padding:14px 12px 14px;
  display:flex;flex-direction:column;gap:8px;
  min-height:280px;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.02), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(228,182,73,0.04), transparent 40%);
}
.bub{font-size:11.5px;line-height:1.35;padding:8px 11px;border-radius:9px;max-width:78%;color:#E9EDEF;position:relative}
.bub.them{background:#1F2C33;align-self:flex-start;border-top-left-radius:2px}
.bub.us{background:#005C4B;align-self:flex-end;border-top-right-radius:2px}
.bub small{display:block;margin-top:3px;font-size:9px;color:#8696A0;text-align:right}
.bub.them small{color:#8696A0}
.bub.us small{color:#a8d8c5}
.typing{align-self:flex-start;background:#1F2C33;padding:10px 12px;border-radius:9px;display:flex;gap:4px}
.typing span{width:5px;height:5px;background:#8696A0;border-radius:50%;animation:typing 1.4s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.mock-ai-badge{
  position:absolute;left:-20px;top:30px;z-index:3;
  background:rgba(20,20,26,0.85);
  backdrop-filter:blur(20px);
  border:1px solid var(--line-d);
  padding:12px 16px;border-radius:14px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 20px 60px -10px rgba(0,0,0,0.6);
}
.mock-ai-badge .ic{
  width:32px;height:32px;border-radius:9px;
  background:none;
  display:grid;place-items:center;color:#1a1408;font-weight:700;font-size:13px;
  position:relative;
}
.mock-ai-badge .txt{font-size:11px;color:var(--muted-2);font-family:var(--font-mono);letter-spacing:0.06em}
.mock-ai-badge .txt strong{display:block;color:var(--bone);font-family:var(--font-sans);font-size:13px;letter-spacing:-0.01em;font-weight:600}

.mock-lead{
  position:absolute;right:-30px;bottom:80px;z-index:4;
  background:rgba(20,20,26,0.92);
  backdrop-filter:blur(20px);
  border:1px solid var(--line-d);
  padding:14px 16px;border-radius:14px;
  width:220px;
  box-shadow:0 20px 60px -10px rgba(0,0,0,0.6);
}
.mock-lead .top{display:flex;align-items:center;justify-content:space-between}
.mock-lead .tag{font-family:var(--font-mono);font-size:9px;color:var(--gold);letter-spacing:0.12em;text-transform:uppercase}
.mock-lead .pill{font-family:var(--font-mono);font-size:9px;color:#7CD992;background:rgba(124,217,146,0.10);padding:3px 8px;border-radius:999px}
.mock-lead .name{margin-top:8px;font-size:14px;font-weight:600;letter-spacing:-0.01em}
.mock-lead .det{margin-top:3px;font-size:11px;color:var(--muted)}
.mock-lead .meta{margin-top:12px;display:flex;gap:8px}
.mock-lead .meta span{font-family:var(--font-mono);font-size:9px;color:var(--muted-2);padding:3px 7px;border:1px solid var(--line-d);border-radius:6px}

/* Logos strip */
.logos{
  padding:50px 0 70px;border-top:1px solid var(--line-d);
}
.logos-lbl{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:0.16em;text-transform:uppercase;text-align:center}
.logos-row{
  margin-top:30px;display:grid;grid-template-columns:repeat(6,1fr);gap:30px;align-items:center;
  opacity:.55;
}
.logos-row .lg{font-family:var(--font-serif);font-style:italic;font-size:22px;color:var(--bone);text-align:center;letter-spacing:-0.02em;font-weight:400}
.logos-row .lg.sans{font-family:var(--font-sans);font-style:normal;font-weight:700;letter-spacing:-0.04em}
.logos-row .lg.mono{font-family:var(--font-mono);font-style:normal;font-size:14px;letter-spacing:0.1em;text-transform:uppercase;font-weight:500}

/* ========== SECTIONS ========== */
section{position:relative}
.section{padding:120px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:60px;margin-bottom:60px}
.section-head h2{
  font-size:clamp(40px,4.6vw,64px);
  font-weight:500;letter-spacing:-0.03em;line-height:1.02;max-width:780px;
}
.section-head h2 em{font-family:var(--font-serif);font-style:italic;font-weight:300;color:var(--gold)}
.section-head .lede{font-size:17px;color:var(--muted-2);max-width:380px;line-height:1.55}

/* Light section */
.light{background:var(--bone);color:var(--ink)}
.light .eyebrow{color:var(--gold-deep)}
.light .eyebrow::before{background:var(--gold-deep);box-shadow:0 0 0 4px rgba(184,137,61,0.15)}
.light .section-head h2 em{color:var(--gold-deep)}
.light .section-head .lede{color:#5a5650}

/* ========== PROBLEMS ========== */
.problems-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-l);
  border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;
}
.problem{
  background:var(--bone);padding:38px 32px 32px;position:relative;min-height:240px;
  transition:background .3s;
}
.problem:hover{background:var(--cream)}
.problem .num{
  font-family:var(--font-mono);font-size:11px;color:var(--gold-deep);
  letter-spacing:0.16em;text-transform:uppercase;
}
.problem h3{margin-top:60px;font-size:22px;font-weight:600;letter-spacing:-0.02em;line-height:1.2;max-width:280px}
.problem p{margin-top:12px;font-size:14px;color:#5a5650;line-height:1.5;max-width:300px}
.problem .ic{
  position:absolute;top:32px;right:32px;width:42px;height:42px;
  border-radius:12px;background:var(--paper);
  display:grid;place-items:center;color:var(--ink);
}
.problem .ic svg{width:20px;height:20px}

/* ========== SERVICES ========== */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.service{
  background:linear-gradient(180deg,var(--ink-2) 0%, var(--ink) 100%);
  border:1px solid var(--line-d);
  border-radius:var(--r-lg);
  padding:42px;
  position:relative;overflow:hidden;
  transition:border-color .3s, transform .3s;
  min-height:340px;
  display:flex;flex-direction:column;
}
.service:hover{border-color:rgba(228,182,73,0.30);transform:translateY(-3px)}
.service::before{
  content:"";position:absolute;inset:auto -40% -40% auto;width:300px;height:300px;
  background:radial-gradient(circle, rgba(228,182,73,0.10) 0%, transparent 70%);
  opacity:0;transition:opacity .4s;
}
.service:hover::before{opacity:1}
.service .top{display:flex;align-items:start;justify-content:space-between;gap:20px}
.service .ic{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg, rgba(228,182,73,0.18) 0%, rgba(228,182,73,0.04) 100%);
  border:1px solid rgba(228,182,73,0.20);
  display:grid;place-items:center;color:var(--gold);
}
.service .ic svg{width:24px;height:24px}
.service .nbr{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:0.16em}
.service h3{margin-top:42px;font-size:30px;font-weight:600;letter-spacing:-0.025em;line-height:1.1}
.service p{margin-top:14px;font-size:15px;color:var(--muted-2);max-width:380px;line-height:1.55}
.service .bullet-list{margin-top:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.service .bullet-list li{
  list-style:none;font-size:13px;color:var(--muted-2);
  display:flex;align-items:center;gap:10px;font-family:var(--font-mono);letter-spacing:0.02em;
}
.service .bullet-list li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0;
}
.service .cta-row{
  margin-top:30px;display:flex;align-items:center;gap:8px;
  font-size:14px;color:var(--bone);font-weight:500;
}
.service .cta-row .arr{transition:transform .25s}
.service:hover .cta-row .arr{transform:translateX(4px)}

/* ========== STAR SERVICE (Chat IA) ========== */
.star{background:linear-gradient(180deg, var(--ink) 0%, #0A0A0C 100%);position:relative;overflow:hidden;border-top:1px solid var(--line-d)}
.star::before{
  content:"";position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:1100px;height:1100px;border-radius:50%;
  background:radial-gradient(circle, rgba(228,182,73,0.06) 0%, transparent 60%);
  pointer-events:none;
}
.star-inner{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center}
.star h2{font-size:clamp(40px,4.4vw,60px);font-weight:500;letter-spacing:-0.03em;line-height:1.02;margin-top:24px}
.star h2 em{font-family:var(--font-serif);font-style:italic;color:var(--gold);font-weight:300}
.star .lede{margin-top:24px;font-size:17px;color:var(--muted-2);line-height:1.55;max-width:480px}
.star-feats{margin-top:36px;display:flex;flex-direction:column;gap:18px}
.star-feat{display:flex;align-items:start;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line-d)}
.star-feat:last-child{border-bottom:none}
.star-feat .ic{
  width:36px;height:36px;border-radius:10px;
  background:rgba(228,182,73,0.10);border:1px solid rgba(228,182,73,0.18);
  display:grid;place-items:center;color:var(--gold);flex-shrink:0;
}
.star-feat .ic svg{width:16px;height:16px}
.star-feat h4{font-size:16px;font-weight:600;letter-spacing:-0.01em}
.star-feat p{margin-top:4px;font-size:13.5px;color:var(--muted-2);line-height:1.5}
.star-cta{margin-top:36px}

/* Chat IA visual */
.chat-stage{position:relative;display:grid;gap:18px}
.chat-card{
  background:linear-gradient(180deg, var(--ink-2) 0%, #0E0E12 100%);
  border:1px solid var(--line-d);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.chat-head{padding:16px 22px;border-bottom:1px solid var(--line-d);display:flex;align-items:center;justify-content:space-between}
.chat-head .ttl{display:flex;align-items:center;gap:12px}
.chat-head .av{width:32px;height:32px;border-radius:50%;background:none;position:relative;display:grid;place-items:center;color:#1a1408;font-weight:700;font-size:12px}
.chat-head .av::after{display:none}
.chat-head .name{font-size:13px;font-weight:600}
.chat-head .desc{font-size:11px;color:var(--muted);font-family:var(--font-mono);letter-spacing:0.04em}
.chat-head .ctrl{display:flex;gap:8px;font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase}
.chat-head .ctrl .live{color:#7CD992;display:flex;align-items:center;gap:6px}
.chat-head .ctrl .live::before{content:"";width:5px;height:5px;border-radius:50%;background:#7CD992;animation:pulse 1.6s infinite}

.chat-body{padding:24px 22px;display:flex;flex-direction:column;gap:14px;min-height:420px}
.cm{display:flex;gap:10px;max-width:78%}
.cm.user{align-self:flex-end;flex-direction:row-reverse}
.cm .av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:11px;font-weight:600}
.cm.bot .av{background:none;color:inherit}
.cm.user .av{background:#2a2a32;color:var(--bone)}
.cm .msg{padding:12px 16px;border-radius:14px;font-size:14px;line-height:1.45}
.cm.bot .msg{background:var(--ink-3);border-top-left-radius:4px;color:var(--bone)}
.cm.user .msg{background:rgba(228,182,73,0.12);border:1px solid rgba(228,182,73,0.20);border-top-right-radius:4px;color:var(--bone)}
.cm .msg em{color:var(--gold);font-style:normal;font-weight:500}
.cm .time{margin-top:5px;font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:0.06em;display:block}
.cm.user .time{text-align:right}

.chat-quick{
  margin-top:6px;display:flex;flex-wrap:wrap;gap:8px;padding-left:38px;
}
.chat-quick .q{
  font-size:12px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line-d);background:rgba(255,255,255,0.02);
  color:var(--muted-2);font-family:var(--font-mono);letter-spacing:0.02em;
}

.chat-input{
  padding:14px 22px 16px;border-top:1px solid var(--line-d);
  display:flex;align-items:center;gap:12px;
}
.chat-input .field{
  flex:1;background:var(--ink-3);border:1px solid var(--line-d);
  border-radius:999px;padding:10px 16px;font-size:13px;color:var(--muted-2);
}
.chat-input .send{
  width:36px;height:36px;border-radius:50%;background:var(--gold);
  display:grid;place-items:center;color:#1a1408;
}

.chat-foot{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.foot-tile{
  background:linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  border:1px solid var(--line-d);
  border-radius:var(--r-md);padding:18px;
}
.foot-tile .lab{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase}
.foot-tile .val{margin-top:8px;font-size:22px;font-weight:600;letter-spacing:-0.02em}
.foot-tile .val span{color:var(--gold)}
.foot-tile .sub{margin-top:3px;font-size:11px;color:var(--muted);font-family:var(--font-mono)}

/* ========== HOW IT WORKS ========== */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  position:relative;
}
.steps::before{
  content:"";position:absolute;top:38px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(184,137,61,0.4) 20%, rgba(184,137,61,0.4) 80%, transparent);
}
.step{padding:0 22px;position:relative}
.step:first-child{padding-left:0}
.step:last-child{padding-right:0}
.step .num{
  position:relative;z-index:1;
  width:76px;height:76px;border-radius:50%;
  background:var(--bone);
  border:1px solid var(--line-l);
  display:grid;place-items:center;
  font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:32px;color:var(--ink);
  letter-spacing:-0.02em;
}
.step.is-current .num{background:var(--gold);border-color:var(--gold-deep);box-shadow:0 0 0 8px rgba(228,182,73,0.15)}
.step h3{margin-top:32px;font-size:22px;font-weight:600;letter-spacing:-0.02em;line-height:1.15}
.step p{margin-top:12px;font-size:14px;color:#5a5650;line-height:1.55;max-width:260px}
.step .tag{margin-top:18px;font-family:var(--font-mono);font-size:10px;color:var(--gold-deep);letter-spacing:0.16em;text-transform:uppercase}

/* ========== BENEFITS ========== */
.benefits{padding:120px 0;background:var(--ink);position:relative;overflow:hidden}
.benefits::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:120px 120px;
  mask-image:radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
}
.benefits-inner{position:relative}
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:var(--r-lg);overflow:hidden}
.benefit{background:var(--ink);padding:48px 36px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;transition:background .3s}
.benefit:hover{background:var(--ink-2)}
.benefit .met{display:flex;align-items:baseline;gap:6px}
.benefit .num{font-size:56px;font-weight:500;letter-spacing:-0.035em;color:var(--gold);line-height:1;font-family:var(--font-serif);font-style:italic;font-weight:300}
.benefit .suf{font-size:24px;color:var(--gold);font-weight:600;letter-spacing:-0.02em}
.benefit h3{margin-top:24px;font-size:20px;font-weight:600;letter-spacing:-0.02em;line-height:1.25}
.benefit p{margin-top:10px;font-size:13.5px;color:var(--muted-2);line-height:1.5}

/* ========== USE CASES ========== */
.uc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.uc{
  background:var(--cream);border:1px solid var(--line-l);
  border-radius:var(--r-lg);padding:36px;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:300px;position:relative;overflow:hidden;
  transition:transform .35s;
}
.uc:hover{transform:translateY(-3px)}
.uc.span-7{grid-column:span 7}
.uc.span-5{grid-column:span 5}
.uc.span-4{grid-column:span 4}
.uc.span-8{grid-column:span 8}
.uc.span-6{grid-column:span 6}
.uc.dark{background:var(--ink);color:var(--bone);border-color:var(--line-d)}
.uc.dark p{color:var(--muted-2)}
.uc.gold{background:var(--gold);color:#1a1408;border-color:var(--gold-deep)}
.uc.gold p{color:rgba(26,20,8,0.7)}
.uc .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-deep)}
.uc.dark .tag{color:var(--gold)}
.uc.gold .tag{color:#1a1408;opacity:.7}
.uc h3{margin-top:18px;font-size:28px;font-weight:600;letter-spacing:-0.025em;line-height:1.1;max-width:380px}
.uc p{margin-top:14px;font-size:14px;color:#5a5650;line-height:1.5;max-width:380px}
.uc .visual{margin-top:20px;flex:1;display:flex;align-items:end}

.uc-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.5);backdrop-filter:blur(10px);padding:8px 14px;border-radius:999px;font-size:12px;font-family:var(--font-mono);letter-spacing:0.04em}
.uc.dark .uc-pill{background:rgba(255,255,255,0.06)}
.uc-pill .d{width:6px;height:6px;border-radius:50%;background:#7CD992;animation:pulse 1.6s infinite}

.uc-flow{display:flex;align-items:center;gap:10px;width:100%}
.uc-node{padding:8px 12px;background:var(--ink);color:var(--bone);border-radius:8px;font-size:11px;font-family:var(--font-mono);letter-spacing:0.04em;white-space:nowrap}
.uc.dark .uc-node{background:rgba(228,182,73,0.12);color:var(--gold);border:1px solid rgba(228,182,73,0.20)}
.uc-arrow{flex-shrink:0;color:var(--muted)}
.uc.dark .uc-arrow{color:var(--muted-2)}

.uc-bars{display:flex;align-items:end;gap:6px;height:80px;width:100%}
.uc-bars span{flex:1;background:var(--ink);border-radius:3px 3px 0 0;opacity:.9}
.uc-bars span.hl{background:var(--gold-deep)}
.uc.dark .uc-bars span{background:rgba(255,255,255,0.10)}
.uc.dark .uc-bars span.hl{background:var(--gold)}

.uc-doc{
  width:100%;background:rgba(255,255,255,0.6);border:1px solid var(--line-l);
  border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;
}
.uc-doc .ln{height:6px;background:rgba(14,14,16,0.15);border-radius:3px}
.uc-doc .ln.s{width:50%}
.uc-doc .ln.m{width:75%}
.uc-doc .ln.hl{background:var(--gold-deep)}

/* ========== CTA FINAL ========== */
.cta{
  background:var(--ink);position:relative;overflow:hidden;
  padding:140px 0;
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(800px 500px at 50% 100%, rgba(228,182,73,0.18) 0%, transparent 60%),
    radial-gradient(600px 400px at 20% 30%, rgba(228,182,73,0.06) 0%, transparent 60%);
}
.cta-inner{position:relative;text-align:center;max-width:880px;margin:0 auto}
.cta h2{
  font-size:clamp(48px,6vw,84px);
  font-weight:500;letter-spacing:-0.035em;line-height:0.98;
}
.cta h2 em{font-family:var(--font-serif);font-style:italic;font-weight:300;color:var(--gold)}
.cta .lede{margin-top:28px;font-size:18px;color:var(--muted-2);max-width:580px;margin-left:auto;margin-right:auto;line-height:1.55}
.cta-buttons{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-trust{
  margin-top:60px;padding-top:36px;border-top:1px solid var(--line-d);
  display:flex;justify-content:center;gap:48px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;
}
.cta-trust span{display:flex;align-items:center;gap:8px}
.cta-trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ========== FOOTER ========== */
.footer{padding:80px 0 40px;background:#08080A;border-top:1px solid var(--line-d)}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:60px;padding-bottom:60px;border-bottom:1px solid var(--line-d)}
.footer-brand p{margin-top:18px;font-size:13.5px;color:var(--muted);max-width:280px;line-height:1.6}
.footer h5{font-size:11px;font-family:var(--font-mono);letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.footer ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.footer ul a{font-size:14px;color:var(--muted-2);transition:color .2s}
.footer ul a:hover{color:var(--bone)}
.footer-bot{padding-top:30px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.footer-bot .sm{font-size:12px;color:var(--muted);font-family:var(--font-mono);letter-spacing:0.04em}

/* Reveal animations */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .9s ease, transform .9s ease}
[data-reveal].in{opacity:1;transform:translateY(0)}

/* Responsive */
@media (max-width: 1100px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .mock-stage{height:560px;max-width:540px;margin:0 auto;width:100%}
  .star-inner{grid-template-columns:1fr;gap:50px}
  .services-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr);gap:50px 24px}
  .step{padding:0}
  .step:first-child,.step:last-child{padding:0}
  .steps::before{display:none}
  .problems-grid{grid-template-columns:repeat(2,1fr)}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .uc.span-7,.uc.span-5,.uc.span-4,.uc.span-8,.uc.span-6{grid-column:span 12}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
  .nav-links{display:none}
  .section-head{flex-direction:column;align-items:start;gap:24px}
  .logos-row{grid-template-columns:repeat(3,1fr);gap:24px 16px}
  .uc-flow{flex-wrap:wrap}
}
@media (max-width:900px){
  .nav-inner{padding:14px 0;gap:12px}
  .nav-cta .signin{display:none}
  .nav-demo{padding:10px 14px;font-size:13px}
}
@media (max-width:520px){
  .nav-demo{padding:9px 14px;font-size:12px;letter-spacing:-0.01em}
  .nav-demo .arr{display:none}
  .logo{font-size:15px;gap:8px}
  .logo-mark{width:160px;height:26px;border-radius:7px}
  .logo-mark::after{width:9px;height:9px}
}
@media (max-width:640px){
  .container{padding:0 20px}
  .section{padding:80px 0}
  .hero{padding:40px 0 60px}
  .hero h1{font-size:44px}
  .problems-grid,.benefits-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:36px}
  .step .num{width:62px;height:62px;font-size:26px}
  .chat-foot{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr;gap:20px}
  .mock-stage{height:520px}
  .mock-wa{width:220px}
  .mock-lead{right:-10px;width:190px}
  .mock-ai-badge{left:0}
  .uc-flow{flex-direction:column;align-items:flex-start;gap:8px}
  .uc-flow .uc-arrow{transform:rotate(90deg)}
}