/* Salesbord landing page. Builds on app.css theme variables (light/dark). */
body.landing{background:var(--bg); overflow-x:hidden;}
.landing{--sb1:#4f46e5; --sb2:#8b5cf6; --sb3:#ec4899; --sbgrad:linear-gradient(120deg,var(--sb1),var(--sb2) 55%,var(--sb3)); --accent:#6d5cf0;}
.skip{position:absolute; left:-999px; top:8px; z-index:99; background:var(--surface); padding:8px 12px; border-radius:8px;} .skip:focus{left:8px;}
.lwrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.sb-mark{width:34px; height:34px; flex:none; filter:drop-shadow(0 6px 14px rgba(99,102,241,.35));}
.sb-word{font-weight:850; font-size:21px; letter-spacing:-.03em; color:var(--text);} .sb-word b{font-weight:850; background:var(--sbgrad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.lbrand{display:inline-flex; align-items:center; gap:10px; color:inherit;} .lbrand:hover{text-decoration:none;}
/* nav */
.lnav{position:sticky; top:0; z-index:30; transition:background .25s, box-shadow .25s, border-color .25s; border-bottom:1px solid transparent;}
.lnav.scrolled{background:color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom-color:var(--border);}
.lnav-in{display:flex; align-items:center; gap:18px; height:68px;}
.llinks{display:flex; gap:4px; margin-left:18px;} .llinks a{color:var(--text-2); font-weight:600; font-size:14px; padding:7px 12px; border-radius:999px; transition:background .18s, color .18s;} .llinks a:hover{background:var(--chip); color:var(--text); text-decoration:none;}
.lactions{margin-left:auto; display:flex; gap:8px; align-items:center;}
.btn.big{padding:13px 22px; font-size:15px; border-radius:13px;}
.landing .btn{background:var(--sbgrad); box-shadow:0 10px 24px -12px var(--sb2);} .landing .btn.secondary,.landing .btn.ghost{background:var(--surface); box-shadow:none;} .landing .btn.ghost{background:transparent;}
/* hero */
.lhero{position:relative; padding:56px 0 90px; overflow:hidden;}
.glow{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; pointer-events:none;}
.g1{width:560px; height:560px; left:-160px; top:-220px; background:radial-gradient(circle, color-mix(in oklab, var(--sb1) 55%, transparent), transparent 70%); animation:drift 18s ease-in-out infinite alternate;}
.g2{width:520px; height:520px; right:-140px; top:60px; background:radial-gradient(circle, color-mix(in oklab, var(--sb3) 38%, transparent), transparent 70%); animation:drift 22s ease-in-out infinite alternate-reverse;}
@keyframes drift{to{transform:translate(60px,40px) scale(1.08);}}
.gridbg{position:absolute; inset:0; background-image:linear-gradient(var(--grid) 1px, transparent 1px),linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); pointer-events:none;}
.lhero-in{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:48px; align-items:center;}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:650; color:var(--text-2); padding:7px 14px; border-radius:999px; background:color-mix(in oklab, var(--surface) 80%, transparent); border:1px solid var(--border); box-shadow:var(--shadow);}
.pulse{width:8px; height:8px; border-radius:50%; background:#10b981; box-shadow:0 0 0 0 rgba(16,185,129,.6); animation:pulse 2s infinite;}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(16,185,129,0);} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0);}}
.lhero h1{font-size:clamp(34px,4.6vw,58px); line-height:1.04; letter-spacing:-.035em; font-weight:850; margin:20px 0 18px;}
.grad{background:var(--sbgrad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.lead{font-size:clamp(16px,1.5vw,19px); color:var(--text-2); line-height:1.6; max-width:560px;}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px;}
.ticks{list-style:none; padding:0; display:flex; gap:18px; flex-wrap:wrap; margin-top:22px; color:var(--muted); font-size:13.5px;}
.ticks li::before{content:"✓"; color:#10b981; font-weight:800; margin-right:6px;}
/* preview */
.lhero-visual{position:relative;}
.preview{position:relative; border-radius:20px; background:var(--surface); border:1px solid var(--border); box-shadow:0 40px 80px -40px rgba(49,46,129,.55),0 0 0 1px color-mix(in oklab, var(--sb2) 12%, transparent); overflow:hidden; transform:perspective(1400px) rotateY(-7deg) rotateX(3deg); transition:transform .6s var(--ease);}
.lhero-visual:hover .preview{transform:perspective(1400px) rotateY(0) rotateX(0);}
.pv-bar{display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); background:var(--surface-2); font-size:12.5px;}
.dots{display:flex; gap:6px;} .dots i{width:10px; height:10px; border-radius:50%; background:#ef4444;} .dots i:nth-child(2){background:#f59e0b;} .dots i:nth-child(3){background:#10b981;}
.pv-title{font-weight:700; color:var(--text-2);} .pv-tag{margin-left:auto; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:color-mix(in oklab, #f59e0b 18%, transparent); color:color-mix(in oklab, #b45309 85%, var(--text)); border:1px dashed color-mix(in oklab, #f59e0b 50%, transparent);}
.pv-body{padding:16px;}
.pv-kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.pv-kpi{border-radius:14px; padding:11px 12px; background:var(--surface-2); border:1px solid var(--border); color:var(--sb1); min-width:0;}
.pv-kpi span{display:block; font-size:11.5px; color:var(--text-2); font-weight:600;} .pv-kpi b{display:block; font-size:22px; font-weight:850; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap;}
.pv-kpi.accent{background:var(--sbgrad); border-color:transparent;} .pv-kpi.accent span{color:rgba(255,255,255,.85);} .pv-kpi.accent b{color:#fff;}
.pv-spark{display:block; width:100%; height:26px; margin-top:4px;}
.js .draw{stroke-dasharray:400; stroke-dashoffset:400;} .in .draw,.in.draw{animation:draw 1.8s var(--ease) forwards .2s;}
@keyframes draw{to{stroke-dashoffset:0;}}
.pv-prog{height:7px; border-radius:999px; background:var(--chip); margin-top:9px; overflow:hidden;} .pv-prog i{display:block; height:100%; width:0; border-radius:999px; background:var(--sbgrad); transition:width 1.8s var(--ease);}
.pv-kpi small{font-size:11px; font-weight:700;} .onpace{color:var(--good);}
.pv-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:10px; margin-top:10px;}
.pv-card{border-radius:14px; padding:12px; background:var(--surface-2); border:1px solid var(--border); min-width:0;}
.pv-h{font-size:12px; font-weight:750; margin-bottom:8px;}
.race{position:relative; height:136px;}
.race-row{position:absolute; left:0; right:0; height:28px; display:grid; grid-template-columns:18px minmax(0,1fr) 62px; grid-template-rows:auto 6px; column-gap:8px; align-items:center; transition:transform .8s var(--ease); font-size:11.5px;}
.race-row .rk{grid-row:1/3; font-weight:800; color:var(--muted);} .race-row .nm{font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.race-row .val{grid-row:1/3; grid-column:3; text-align:right; font-weight:800; font-variant-numeric:tabular-nums;}
.race-row .track{grid-column:2; height:6px; border-radius:999px; background:var(--chip); overflow:hidden;} .race-row .track i{display:block; height:100%; width:0; border-radius:999px; transition:width .8s var(--ease);}
.mini-podium{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; align-items:end; height:136px;}
.mp{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; min-width:0;}
.mp .av{width:34px; height:34px; font-size:12px;} .mp1 .av{width:42px; height:42px; font-size:14px;}
.mpn{font-size:11px; font-weight:700; white-space:nowrap;} .mpv{font-size:11.5px; font-weight:800; color:var(--sb2); font-variant-numeric:tabular-nums;}
.step{width:100%; border-radius:8px 8px 0 0; display:grid; place-items:center; color:#fff; font-weight:850; font-size:13px; margin-top:4px; transform-origin:bottom; transition:transform .9s var(--ease);}
.mp1 .step{height:44px; background:linear-gradient(180deg,#f5b301,#d97706);} .mp2 .step{height:30px; background:linear-gradient(180deg,#b6bfd0,#8391a8);} .mp3 .step{height:20px; background:linear-gradient(180deg,#e0a06a,#b8743c);}
.js .step{transform:scaleY(0);} .js .in .step{transform:scaleY(1);} .in .mp2 .step{transition-delay:.15s;} .in .mp3 .step{transition-delay:.3s;}
.av{display:inline-grid; place-items:center; border-radius:50%; color:#fff; font-weight:800; width:30px; height:30px; font-size:11px; flex:none;}
.av0{background:linear-gradient(135deg,#a855f7,#ec4899);} .av1{background:linear-gradient(135deg,#6366f1,#8b5cf6);} .av2{background:linear-gradient(135deg,#0ea5e9,#2563eb);}
.float{position:absolute; font-size:12.5px; font-weight:700; padding:9px 13px; border-radius:12px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-hover); white-space:nowrap; animation:bob 5s ease-in-out infinite;}
.f1{left:-22px; bottom:-18px;} .f2{right:24px; bottom:-40px; animation-delay:-2.5s;} .f2 b{color:var(--good);}
@keyframes bob{50%{transform:translateY(-8px);}}
/* sections */
.lsec{padding:96px 0; position:relative;} .lsec.alt{background:linear-gradient(180deg, transparent, color-mix(in oklab, var(--sb2) 6%, var(--bg-2)) 20%, color-mix(in oklab, var(--sb2) 6%, var(--bg-2)) 80%, transparent);}
.sec-head{text-align:center; max-width:720px; margin:0 auto 46px;}
.kicker{display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; background:var(--sbgrad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:10px;}
.lsec h2{font-size:clamp(28px,3.4vw,42px); line-height:1.1; letter-spacing:-.03em; font-weight:850; margin-bottom:14px;}
.lsec p{color:var(--text-2); font-size:16px; line-height:1.65;}
.fgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}
.fcard{position:relative; padding:24px; border-radius:20px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;}
.fcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:color-mix(in oklab, var(--sb2) 35%, var(--border));}
.fcard h3{font-size:17px; font-weight:780; margin:14px 0 8px; letter-spacing:-.01em;} .fcard p{font-size:14.5px;}
.fic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#fff; background:var(--sbgrad); box-shadow:0 10px 22px -12px var(--sb2);}
.ficon{width:24px; height:24px;}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center;}
.split.rev>:first-child{order:0;}
.checks{list-style:none; padding:0; margin-top:18px; display:flex; flex-direction:column; gap:11px; color:var(--text-2); font-size:15px; line-height:1.5;}
.checks li{position:relative; padding-left:30px;} .checks li::before{content:"✓"; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:900; color:#fff; background:var(--sbgrad);}
/* hierarchy tree */
.tree{padding:30px; border-radius:24px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-hover); display:flex; flex-direction:column; align-items:center; color:var(--muted);}
.node{display:inline-flex; align-items:center; gap:9px; padding:11px 16px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); font-weight:750; color:var(--text); font-size:14px;}
.node.co{font-size:15.5px; box-shadow:0 12px 28px -16px var(--sb2);} .tmark{width:26px; height:26px;}
.links{width:100%; height:48px;}
.agrow{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%;} .agrow .node{justify-content:center; font-size:13px; padding:10px 8px;}
.node .sw{width:10px; height:10px; border-radius:50%;} .ag0 .sw{background:#6366f1;} .ag1 .sw{background:#0ea5e9;} .ag2 .sw{background:#10b981;}
.avrow{display:grid; grid-template-columns:repeat(9,1fr); gap:6px; width:100%; margin-top:16px; justify-items:center;}
.avrow .av{width:30px; height:30px; transition:all .5s var(--ease);} .js .avrow .av{opacity:0; transform:translateY(8px) scale(.8);} .js .tree.in .avrow .av{opacity:1; transform:none;}
.tree.in .avrow .av:nth-child(n){transition-delay:calc(var(--i, 0) * 60ms);}
/* TV mock */
.tvmock{display:flex; flex-direction:column; align-items:center;}
.tvscreen{position:relative; width:100%; aspect-ratio:16/9; border-radius:18px; padding:14px; background:radial-gradient(600px 300px at 0 0, rgba(99,102,241,.35), transparent 60%),radial-gradient(500px 300px at 100% 100%, rgba(236,72,153,.25), transparent 60%),#070912; border:8px solid #14161f; box-shadow:0 40px 80px -40px rgba(0,0,0,.7); overflow:hidden;}
.tvslides{position:relative; height:calc(100% - 8px);}
.tvs{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:4px 10px; opacity:0; transform:translateY(10px) scale(.98); transition:opacity .6s, transform .6s var(--ease);}
.tvs.on{opacity:1; transform:none;}
.tvs em{font-style:normal; color:#c7cbe8; font-weight:800; font-size:clamp(14px,1.6vw,20px); margin-bottom:4px;}
.tb{display:block; height:14%; border-radius:8px; width:0; transition:width 1s var(--ease);} .tb0{background:#6366f1;} .tb1{background:#0ea5e9;} .tb2{background:#10b981;} .tb3{background:#f59e0b;}
.tvpod{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:end; height:65%;} .tvpod span{border-radius:10px 10px 0 0;} .tvpod .p1{height:100%; background:linear-gradient(180deg,#f5b301,rgba(245,179,1,.2));} .tvpod .p2{height:72%; background:linear-gradient(180deg,#b6bfd0,rgba(182,191,208,.15));} .tvpod .p3{height:52%; background:linear-gradient(180deg,#e0a06a,rgba(224,160,106,.15));}
.tvk{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;} .tvk b{color:#fff; font-size:clamp(20px,2.6vw,34px); font-weight:850; padding:14px 10px; border-radius:12px; background:rgba(255,255,255,.06); text-align:center;}
.tvprog{position:absolute; left:14px; right:14px; bottom:10px; height:3px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden;} .tvprog i{display:block; height:100%; width:0; background:var(--sbgrad);}
.tvprog i.run{width:100%; transition:width 3.6s linear;}
.tvstand{width:22%; height:14px; background:linear-gradient(180deg,#1b1e2a,#0e1017); border-radius:0 0 10px 10px;}
/* steps */
.steps3{list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; counter-reset:s; position:relative;}
.steps3 li{position:relative; padding:26px 24px; border-radius:20px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);}
.steps3 .num{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; font-weight:850; font-size:18px; color:#fff; background:var(--sbgrad); box-shadow:0 10px 22px -10px var(--sb2);}
.steps3 h3{font-size:18px; font-weight:780; margin:14px 0 8px;} .steps3 p{font-size:14.5px;}
/* request form */
.reqcard{padding:28px; border-radius:24px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-hover); position:relative;}
.reqcard::before{content:""; position:absolute; inset:-1px; border-radius:25px; padding:1px; background:var(--sbgrad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; pointer-events:none;}
.reqcard .form label{margin-top:12px;}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
.req-ok{text-align:center; padding:26px 10px;} .big-check{width:64px; height:64px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:30px; font-weight:900; background:linear-gradient(135deg,#10b981,#34d399); animation:pop .6s var(--ease);} .req-ok h3{font-size:20px; margin-bottom:6px;}
@keyframes pop{from{transform:scale(.4); opacity:0;}}
/* footer */
.lfoot{border-top:1px solid var(--border); padding:40px 0 30px; margin-top:20px;}
.lfoot-in{display:grid; grid-template-columns:1fr auto; gap:18px 30px; align-items:start;}
.flinks{display:flex; gap:18px; flex-wrap:wrap;} .flinks a{color:var(--text-2); font-weight:600; font-size:14px;}
.fine{grid-column:1/-1; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:12.5px; padding-top:18px; border-top:1px solid var(--border);}
/* reveal */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);} .js .reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important;} .reveal{opacity:1; transform:none;} .draw{stroke-dashoffset:0;} .step{transform:none;} .avrow .av{opacity:1; transform:none;} }
/* responsive */
@media (max-width:1000px){ .lhero-in,.split{grid-template-columns:minmax(0,1fr); gap:44px;} .preview{transform:none;} .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));} .split.rev>:first-child{order:1;} }
@media (max-width:720px){
  .lwrap{padding:0 16px;} .llinks{display:none;} .hide-xs{display:none;} .lnav-in{height:60px;}
  .lhero{padding:30px 0 70px;} .fgrid,.steps3{grid-template-columns:minmax(0,1fr);} .lsec{padding:64px 0;}
  .pv-kpis{grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;} .pv-kpi{padding:9px;} .pv-kpi b{font-size:16px;} .pv-grid{grid-template-columns:minmax(0,1fr);}
  .f1{left:6px; bottom:-20px;} .f2{right:6px; bottom:-20px;} .two{grid-template-columns:minmax(0,1fr);} .lfoot-in{grid-template-columns:1fr;}
  .avrow{grid-template-columns:repeat(9,minmax(0,1fr)); gap:3px;} .avrow .av{width:26px; height:26px; font-size:9.5px;} .tree{padding:20px 14px;} .reqcard{padding:20px;}
}
.split .note{margin-top:16px;}
html[data-theme="dark"] .pv-tag{color:#fcd34d; background:rgba(245,158,11,.14);}