/* =====================================================================
   TRACKRECORD — public site design system
   Premium dark navy · crisp white type · electric blue · gold for winning
   ===================================================================== */
:root{
  --bg:#03060d; --bg2:#060b18; --panel:#0a1224; --panel2:#0d1730; --line:rgba(112,142,208,.22); --line2:rgba(112,142,208,.38);
  --txt:#eef3ff; --mut:#a3b3d9; --dim:#6f7ea3;
  --blue:#2f8bff; --blue2:#4d9bff; --cyan:#5cc9ff; --gold:#f5c24a; --gold2:#ffd569; --green:#3ee08c; --pink:#ff4fa3; --violet:#8b7bff; --red:#ff5a72;
  --maxw:1240px; --nav:72px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--txt); font-family:'Montserrat','Inter','Segoe UI',system-ui,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
body::before{content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(1200px 700px at 78% -10%, rgba(44,90,190,.30), transparent 60%), radial-gradient(900px 620px at 0% 30%, rgba(22,58,140,.20), transparent 60%), linear-gradient(180deg,#060b18 0%,#03060d 55%);}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%;}
button{font-family:inherit;}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

/* ---------- type ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:800; letter-spacing:.3em; text-transform:uppercase; color:var(--blue2);}
.eyebrow::before{content:''; width:34px; height:2px; background:linear-gradient(90deg,transparent,var(--blue2)); }
.h1{margin:18px 0 0; font-weight:900; text-transform:uppercase; letter-spacing:-.018em; line-height:1.02; font-size:clamp(36px,6.1vw,90px);}
.h2{margin:14px 0 0; font-weight:900; text-transform:uppercase; letter-spacing:-.012em; line-height:1.05; font-size:clamp(32px,4.9vw,68px);}
.h3{margin:10px 0 0; font-weight:800; text-transform:uppercase; letter-spacing:-.005em; line-height:1.1; font-size:clamp(26px,3.1vw,40px);}
.lead{font-size:clamp(16px,1.5vw,20px); color:var(--mut); font-weight:500; max-width:680px;}
.grad-gold{background:linear-gradient(180deg,#fff4cf 0%,#f7cf6a 52%,#d9992c 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.grad-blue{background:linear-gradient(90deg,#9cc8ff,#2f8bff 70%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.script{font-family:'Mrs Saint Delafield','Allura','Brush Script MT',cursive; font-weight:400; text-transform:none; letter-spacing:0;}
.center{text-align:center;} .center .lead{margin-left:auto; margin-right:auto;} .center .eyebrow::after{content:''; width:34px; height:2px; background:linear-gradient(270deg,transparent,var(--blue2));}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border-radius:14px; font-weight:800; font-size:14px; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; border:1.5px solid transparent; cursor:pointer; transition:transform .25s, box-shadow .25s, background .25s, border-color .25s;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{color:#fff; background:linear-gradient(180deg,#3d97ff,#1f6fe0); box-shadow:0 10px 34px -8px rgba(47,139,255,.8), inset 0 1px 0 rgba(255,255,255,.28);}
.btn-primary:hover{box-shadow:0 16px 44px -8px rgba(47,139,255,.95), inset 0 1px 0 rgba(255,255,255,.3);}
.btn-gold{color:#241703; background:linear-gradient(180deg,#ffe08a,#e7a93a); box-shadow:0 10px 34px -8px rgba(245,194,74,.7), inset 0 1px 0 rgba(255,255,255,.5);}
.btn-gold:hover{box-shadow:0 16px 44px -8px rgba(245,194,74,.9);}
.btn-ghost{color:#fff; background:rgba(255,255,255,.04); border-color:var(--line2);}
.btn-ghost:hover{background:rgba(255,255,255,.09); border-color:rgba(160,190,245,.6);}
.btn-lg{padding:19px 34px; font-size:15px; border-radius:16px;}
.btn-sm{padding:11px 18px; font-size:12.5px; border-radius:12px;}
.btn-block{width:100%;}
.arrow{transition:transform .25s;} .btn:hover .arrow{transform:translateX(4px);}

/* ---------- navigation ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav); display:flex; align-items:center; transition:background .3s, border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent;}
.nav.solid{background:rgba(4,8,18,.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom-color:var(--line);}
.nav-in{display:flex; align-items:center; gap:34px; width:100%;}
.logo{display:flex; align-items:center; gap:11px; font-weight:900; font-size:21px; letter-spacing:.02em; white-space:nowrap;}
.logo svg{width:30px; height:30px; flex:none; filter:drop-shadow(0 0 10px rgba(47,139,255,.55));}
.logo b{color:#fff; font-weight:900;} .logo i{font-style:normal; color:var(--blue2); font-weight:900;}
.nav-links{display:flex; gap:6px; margin-right:auto;}
.nav-links a{padding:9px 14px; border-radius:10px; font-size:13.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--mut); transition:color .2s, background .2s;}
.nav-links a:hover, .nav-links a.on{color:#fff; background:rgba(255,255,255,.06);}
.nav-cta{display:flex; align-items:center; gap:10px;}
.burger{display:none; width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line2); background:rgba(255,255,255,.04); cursor:pointer; padding:0; position:relative;}
.burger span, .burger::before, .burger::after{content:''; position:absolute; left:12px; right:12px; height:2px; background:#fff; border-radius:2px; transition:transform .3s, opacity .3s, top .3s;}
.burger::before{top:15px;} .burger span{top:21px;} .burger::after{top:27px;}
.burger.open::before{top:21px; transform:rotate(45deg);} .burger.open::after{top:21px; transform:rotate(-45deg);} .burger.open span{opacity:0;}
.mnav{position:fixed; inset:var(--nav) 0 0 0; z-index:99; background:rgba(3,6,13,.97); backdrop-filter:blur(14px); padding:26px 24px; display:none; flex-direction:column; gap:6px; overflow:auto;}
.mnav.open{display:flex;}
.mnav a.l{padding:16px 6px; font-size:22px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line);}
.mnav .btn{margin-top:14px;}

/* ---------- hero ---------- */
.hero{position:relative; padding:calc(var(--nav) + 50px) 0 70px; overflow:hidden;}
.hero::before{content:''; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(112,142,208,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(112,142,208,.10) 1px, transparent 1px); background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, #000, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, #000, transparent 75%);}
.hero-glow{position:absolute; z-index:-1; border-radius:50%; filter:blur(90px); pointer-events:none; animation:drift 14s ease-in-out infinite alternate;}
.hero-glow.a{width:620px; height:620px; left:-160px; top:40px; background:rgba(47,139,255,.28);}
.hero-glow.b{width:520px; height:520px; right:-120px; top:240px; background:rgba(245,194,74,.12); animation-delay:-6s;}
@keyframes drift{to{transform:translate(60px,40px) scale(1.12);}}
.hero-copy{text-align:center; max-width:1240px; margin:0 auto;}
.hero .h1{font-size:clamp(28px,4.7vw,70px);}
.hero-copy .lead{margin:26px auto 0; max-width:720px;}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px;}
.hero-note{margin-top:18px; font-size:13px; color:var(--dim); font-weight:600; letter-spacing:.05em;}
.tv{position:relative; max-width:1240px; margin:56px auto 0; padding:0 28px;}
.tv-bezel{position:relative; padding:11px; border-radius:24px; background:linear-gradient(150deg,#1d2640,#080c18 60%); border:1px solid rgba(165,190,240,.28);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.85), 0 0 150px -24px rgba(47,139,255,.5), inset 0 1px 0 rgba(255,255,255,.12);}
.tv-screen{border-radius:14px; overflow:hidden; background:#03060d; box-shadow:0 0 0 1px rgba(0,0,0,.6);}
.tv-reflect{position:absolute; left:6%; right:6%; bottom:-34px; height:60px; background:radial-gradient(ellipse at center, rgba(47,139,255,.4), transparent 70%); filter:blur(18px); z-index:-1;}
.tv-badge{position:absolute; z-index:3; top:-16px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:9px; padding:8px 18px; border-radius:30px; background:rgba(5,10,24,.95); border:1px solid var(--line2); font-size:11.5px; font-weight:800; letter-spacing:.2em; color:var(--mut); white-space:nowrap;}
.dot-live{width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.45; transform:scale(.8);}}

/* ---------- sections ---------- */
.sec{position:relative; padding:clamp(80px,11vw,150px) 0;}
.sec-head{max-width:900px;}
.sec-head.center{margin:0 auto;}
.band{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(13,23,48,.55),rgba(5,9,20,.55));}

/* scoreboard story */
.story-lines{margin:34px 0 0; display:grid; gap:2px;}
.story-lines p{margin:0; font-size:clamp(20px,2.7vw,36px); font-weight:800; text-transform:uppercase; letter-spacing:.01em; color:#dbe6ff;}
.story-lines p.live{color:var(--green); text-shadow:0 0 30px rgba(62,224,140,.5); font-size:clamp(30px,4.6vw,64px); font-weight:900; letter-spacing:.02em;}
.anat{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:34px; align-items:start; margin-top:56px;}
.anat-list{display:grid; gap:7px; counter-reset:n;}
.anat-item{display:flex; gap:14px; align-items:flex-start; text-align:left; padding:13px 16px; border-radius:14px; border:1.5px solid transparent; background:rgba(255,255,255,.025); color:var(--mut); cursor:pointer; transition:all .3s; width:100%;}
.anat-item::before{counter-increment:n; content:counter(n); flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; background:#27324f; color:#cfd9f2; transition:all .3s;}
.anat-item b{display:block; font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#e6eeff;}
.anat-item span{display:block; font-size:13px; line-height:1.45; margin-top:2px;}
.anat-item.on{background:rgba(47,139,255,.1); border-color:rgba(77,155,255,.6); box-shadow:0 0 30px -10px rgba(47,139,255,.7);}
.anat-item.on::before{background:linear-gradient(180deg,#5cc9ff,#2f8bff); color:#fff;}
.anat-item.on b{color:#fff;}
.anat-tv{position:sticky; top:96px; align-self:start;}
.anat-tv .tv{padding:0; margin:0;}
.sb-spot{position:absolute; z-index:40; pointer-events:none; border-radius:16px; border:2px solid rgba(120,185,255,.95); box-shadow:0 0 0 9999px rgba(3,6,13,.68), 0 0 44px rgba(77,155,255,.65); opacity:0; transition:left .65s cubic-bezier(.22,1,.36,1), top .65s cubic-bezier(.22,1,.36,1), width .65s cubic-bezier(.22,1,.36,1), height .65s cubic-bezier(.22,1,.36,1), opacity .4s;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px;}

/* transition */
.trans{text-align:center; padding:clamp(90px,12vw,170px) 0;}
.trans .h2{font-size:clamp(30px,5.2vw,76px);}
.trans .h2 span{display:block;}

/* feature sections */
.feat{padding:clamp(60px,8vw,110px) 0;}
.feat-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(34px,5vw,80px); align-items:center;}
.feat.flip .feat-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.feat.flip .feat-copy{order:2;}
.feat-tag{display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:30px; background:rgba(47,139,255,.1); border:1px solid rgba(77,155,255,.35); font-size:12.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#cfe2ff;}
.feat-copy p{color:var(--mut); font-size:17px; margin:18px 0 0;}
.chips{display:flex; flex-wrap:wrap; gap:9px; margin:26px 0 0; padding:0; list-style:none;}
.chips li{padding:9px 15px; border-radius:11px; font-size:13px; font-weight:700; letter-spacing:.03em; background:rgba(255,255,255,.045); border:1px solid var(--line); color:#dbe6ff;}
.feat-visual{position:relative;}
.feat-visual::before{content:''; position:absolute; inset:-8% -4%; z-index:-1; background:radial-gradient(ellipse at center, rgba(47,139,255,.18), transparent 68%);}
.crop-frame{border-radius:20px; overflow:hidden; border:1px solid var(--line2); box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 80px -30px rgba(47,139,255,.55);}
.sample-tag{margin-top:12px; font-size:11px; font-weight:800; letter-spacing:.2em; color:var(--dim); text-transform:uppercase;}

/* product-style UI previews */
.app{min-width:0; max-width:100%; border-radius:20px; background:linear-gradient(180deg,#0d1730,#070d1e); border:1px solid var(--line2); box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 80px -30px rgba(47,139,255,.5); overflow:hidden;}
.app-bar{display:flex; align-items:center; gap:8px; padding:13px 18px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.025);}
.app-bar i{width:11px; height:11px; border-radius:50%; background:#2a3555;} .app-bar i:nth-child(1){background:#ff5a72;} .app-bar i:nth-child(2){background:#f5c24a;} .app-bar i:nth-child(3){background:#3ee08c;}
.app-bar span{margin-left:10px; font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--dim); text-transform:uppercase;}
.app-body{padding:22px;}
.m-title{font-size:12px; font-weight:800; letter-spacing:.2em; color:var(--dim); text-transform:uppercase; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center;}
.m-row{display:grid; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid rgba(112,142,208,.14);}
.m-row:last-child{border-bottom:none;}
.m-av{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:15px; color:#0b1020; background-image:linear-gradient(135deg,rgba(255,255,255,.28),rgba(0,0,0,.18));}
.m-name{font-weight:800; font-size:15px;} .m-sub{font-size:12px; color:var(--dim); font-weight:600;}
.m-bar{height:8px; border-radius:5px; background:rgba(255,255,255,.09); overflow:hidden;}
.m-bar i{display:block; height:100%; width:0; border-radius:5px; background:var(--c,#4d9bff); box-shadow:0 0 10px var(--c,#4d9bff); transition:width 1.3s cubic-bezier(.22,1,.36,1);}
.m-num{font-weight:900; font-size:18px; text-align:right; font-variant-numeric:tabular-nums;}
.m-num small{font-size:12px; color:var(--dim); font-weight:700;}
.m-tabs{display:inline-flex; gap:3px; padding:3px; border-radius:20px; background:rgba(5,9,20,.8); border:1px solid var(--line);}
.m-tabs button{font-size:11.5px; font-weight:800; letter-spacing:.08em; color:var(--dim); background:none; border:1.5px solid transparent; padding:6px 13px; border-radius:16px; cursor:pointer; text-transform:uppercase;}
.m-tabs button.on{color:#fff; border-color:var(--blue2); background:rgba(47,139,255,.14);}
.pill{display:inline-block; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;}
.pill.g{background:rgba(62,224,140,.14); color:var(--green);} .pill.y{background:rgba(245,194,74,.14); color:var(--gold2);} .pill.b{background:rgba(77,155,255,.16); color:#9cc8ff;} .pill.r{background:rgba(255,90,114,.14); color:#ff8a9b;}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px;}
.kpi{padding:14px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line);}
.kpi .l{font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--dim); text-transform:uppercase;}
.kpi .v{font-size:26px; font-weight:900; margin-top:2px; font-variant-numeric:tabular-nums;}
.kpi .d{font-size:12px; font-weight:700; color:var(--green);}
.chart{width:100%; height:auto; display:block;}
.chart .bar{fill:url(#cbar); transition:height .8s cubic-bezier(.22,1,.36,1), y .8s cubic-bezier(.22,1,.36,1);}
.chart .ln{fill:none; stroke:var(--gold2); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px rgba(245,194,74,.6));}
.chart text{fill:var(--dim); font-size:11px; font-weight:700; font-family:inherit;}
table.m-t{width:100%; border-collapse:collapse; font-size:13.5px;}
table.m-t th{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-align:left; padding:0 10px 10px 0;}
table.m-t td{padding:12px 10px 12px 0; border-top:1px solid rgba(112,142,208,.14); font-weight:700; font-variant-numeric:tabular-nums;}
table.m-t th:last-child, table.m-t td:last-child{text-align:right; padding-right:0;}
.roi{display:flex; align-items:center; gap:10px;} .roi .m-bar{flex:1; min-width:70px;}
.clock{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px; border-radius:16px; background:linear-gradient(135deg,rgba(47,139,255,.18),rgba(47,139,255,.04)); border:1px solid rgba(77,155,255,.4); margin-bottom:16px;}
.clock .t{font-size:38px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:.02em;}
.clock .s{font-size:12px; font-weight:700; color:var(--mut);}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.mini-card{padding:16px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line);}

/* positioning */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:64px auto 0; max-width:1040px; position:relative;}
.flow::before{content:''; position:absolute; left:12.5%; right:12.5%; top:46px; height:3px; background:linear-gradient(90deg,var(--blue),var(--cyan),var(--gold)); border-radius:3px; opacity:.55;}
.flow::after{content:''; position:absolute; left:12.5%; top:43px; width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 14px #fff, 0 0 30px var(--cyan); animation:travel 4.5s ease-in-out infinite;}
@keyframes travel{0%{left:12.5%; opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{left:87.5%; opacity:0;}}
.flow-step{text-align:center; padding:0 10px; position:relative;}
.flow-node{width:92px; height:92px; margin:0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:34px; background:radial-gradient(circle at 30% 25%,#1c2c55,#0a1228); border:2px solid var(--c,#4d9bff); box-shadow:0 0 36px -6px var(--c,#4d9bff); position:relative; z-index:1;}
.flow-step b{display:block; margin-top:20px; font-size:clamp(14px,1.7vw,20px); font-weight:900; letter-spacing:.1em; text-transform:uppercase;}
.flow-step span{display:block; margin-top:6px; font-size:14px; color:var(--mut);}
.keep{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:54px;}
.keep span{padding:10px 18px; border-radius:30px; border:1px solid var(--line2); background:rgba(255,255,255,.04); font-size:13px; font-weight:700; letter-spacing:.06em; color:#dbe6ff;}
.keep span b{color:var(--green);}

/* pricing */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:60px; align-items:stretch;}
.plan{position:relative; display:flex; flex-direction:column; padding:34px 30px 32px; border-radius:26px; background:linear-gradient(180deg,rgba(17,28,56,.9),rgba(8,14,30,.96)); border:1.5px solid var(--line); transition:translate .3s, border-color .3s, opacity .8s, transform .8s;}
.plan:hover{translate:0 -6px; border-color:var(--line2);}
.plan.rec{border-color:rgba(245,194,74,.85); background:linear-gradient(180deg,rgba(54,42,14,.72),rgba(10,16,32,.97) 55%); box-shadow:0 0 0 1px rgba(245,194,74,.3), 0 30px 90px -20px rgba(245,194,74,.4), 0 0 120px -30px rgba(47,139,255,.4); margin:-16px 0; padding-top:50px; padding-bottom:48px;}
.plan.rec:hover{translate:0 -6px;}
.plan-flag{position:absolute; top:-15px; left:50%; transform:translateX(-50%); padding:7px 20px; border-radius:30px; font-size:11.5px; font-weight:900; letter-spacing:.18em; color:#241703; background:linear-gradient(180deg,#ffe08a,#e7a93a); box-shadow:0 8px 26px -6px rgba(245,194,74,.8); white-space:nowrap;}
.plan-name{font-size:14px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:var(--blue2);}
.plan.rec .plan-name{color:var(--gold2);}
.plan-price{display:flex; align-items:baseline; gap:6px; margin-top:16px;}
.plan-price b{font-size:62px; font-weight:900; line-height:1; letter-spacing:-.02em;}
.plan-price span{font-size:16px; font-weight:700; color:var(--mut);}
.plan-setup{margin-top:8px; align-self:flex-start; display:inline-block; padding:5px 12px; border-radius:20px; background:rgba(245,194,74,.12); color:var(--gold2); font-size:11.5px; font-weight:800; letter-spacing:.12em;}
.plan-head{margin:20px 0 0; font-size:19px; font-weight:800; line-height:1.3; min-height:50px;}
.plan-intro{margin:20px 0 4px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);}
.plan ul{list-style:none; margin:14px 0 28px; padding:0; display:grid; gap:11px; flex:1;}
.plan li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; font-weight:600; color:#d6e1fb;}
.plan li::before{content:'✓'; flex:none; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:1px; font-size:11px; font-weight:900; color:#04101f; background:var(--green);}
.plan.rec li::before{background:var(--gold2);}
.plan-note{margin-top:34px; text-align:center; color:var(--mut); font-weight:600; font-size:15px;}

/* founder */
.founder{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(34px,6vw,90px); align-items:center;}
.founder-mark{position:relative; aspect-ratio:1; max-width:440px; width:100%; margin:0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(circle at 35% 28%, rgba(47,139,255,.28), rgba(10,18,40,.2) 60%); border:1px solid var(--line2); box-shadow:0 0 120px -30px rgba(47,139,255,.6), inset 0 0 80px -30px rgba(47,139,255,.5);}
.founder-mark::before{content:''; position:absolute; inset:-14px; border-radius:50%; border:1px dashed rgba(112,142,208,.3); animation:spin 60s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.founder-mark .big{font-size:clamp(96px,14vw,170px); line-height:.9; font-weight:900; letter-spacing:-.04em;}
.founder-mark small{display:block; margin-top:8px; font-size:12px; font-weight:800; letter-spacing:.3em; color:var(--dim);}
.founder .h2{font-size:clamp(28px,3.6vw,52px);}
.founder-copy p{font-size:clamp(16px,1.5vw,19px); color:#cfdaf5; margin:0 0 18px; font-weight:500;}
.sig{margin-top:30px;}
.sig .script{font-size:clamp(54px,6vw,84px); line-height:1; background:linear-gradient(180deg,#fff4cf,#f7cf6a 55%,#d9992c); -webkit-background-clip:text; background-clip:text; color:transparent;}
.sig .t{margin-top:6px; font-size:13px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--mut);}

/* final cta + footer */
.final{text-align:center; padding:clamp(90px,12vw,160px) 0; position:relative; overflow:hidden;}
.final::before{content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse 60% 70% at 50% 100%, rgba(47,139,255,.28), transparent 70%);}
.foot{border-top:1px solid var(--line); padding:44px 0 56px; background:rgba(3,6,13,.8);}
.foot-in{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;}
.foot-links{display:flex; gap:22px; flex-wrap:wrap;}
.foot-links a{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mut);} .foot-links a:hover{color:#fff;}
.foot-copy{margin-top:26px; font-size:12.5px; color:var(--dim); font-weight:600; letter-spacing:.04em;}

/* reveal on scroll */
[data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); transition-delay:var(--d,0s);}
[data-reveal].in{opacity:1; transform:none;}
.no-js [data-reveal]{opacity:1; transform:none;}

/* ---------- pricing page ---------- */
.page-head{padding:calc(var(--nav) + 80px) 0 20px; text-align:center;}
.matrix{margin-top:70px; border-radius:24px; border:1.5px solid var(--line); background:linear-gradient(180deg,rgba(13,23,48,.7),rgba(6,11,24,.8)); overflow:hidden;}
.matrix-scroll{overflow-x:auto;}
.mx{width:100%; min-width:720px; border-collapse:collapse;}
.mx th, .mx td{padding:14px 20px; text-align:center; border-top:1px solid rgba(112,142,208,.14); font-size:14.5px;}
.mx thead th{border-top:none; padding:24px 20px; font-size:13px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; background:rgba(255,255,255,.03); position:sticky; top:0;}
.mx thead th small{display:block; margin-top:6px; font-size:20px; letter-spacing:0; color:#fff; font-weight:900;}
.mx thead th.rec{color:var(--gold2); background:rgba(245,194,74,.08);}
.mx td:first-child, .mx th:first-child{text-align:left; font-weight:700; color:#dbe6ff;}
.mx tr.grp td{background:rgba(47,139,255,.07); font-size:12px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:#cfe2ff; padding:12px 20px;}
.mx td.rec{background:rgba(245,194,74,.04);}
.yes{color:var(--green); font-weight:900; font-size:18px;} .no{color:#3a4668; font-weight:700;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:54px;}
.step{padding:28px; border-radius:22px; background:rgba(255,255,255,.035); border:1px solid var(--line);}
.step .n{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; background:linear-gradient(180deg,#5cc9ff,#2f8bff); box-shadow:0 0 26px -4px rgba(47,139,255,.8);}
.step b{display:block; margin-top:18px; font-size:18px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;}
.step p{margin:8px 0 0; color:var(--mut); font-size:15px;}
.faq{max-width:860px; margin:54px auto 0; display:grid; gap:12px;}
.faq details{border-radius:16px; background:rgba(255,255,255,.035); border:1px solid var(--line); padding:0 24px;}
.faq summary{list-style:none; cursor:pointer; padding:20px 0; font-weight:800; font-size:16.5px; display:flex; justify-content:space-between; gap:16px; align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; font-size:24px; color:var(--blue2); transition:transform .3s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:0 0 22px; color:var(--mut); font-size:15.5px;}

/* ---------- /demo page ---------- */
.demo-top{padding:calc(var(--nav) + 34px) 0 22px;}
.demo-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.badge-demo{display:inline-flex; align-items:center; gap:10px; padding:9px 18px; border-radius:30px; background:rgba(47,139,255,.12); border:1px solid rgba(77,155,255,.5); font-size:12px; font-weight:900; letter-spacing:.2em; color:#cfe2ff; text-transform:uppercase;}
.demo-title{margin:16px 0 0; font-size:clamp(34px,5.4vw,72px); font-weight:900; text-transform:uppercase; letter-spacing:-.015em; line-height:1;}
.demo-sub{margin:12px 0 0; color:var(--mut); font-size:16px; font-weight:500; max-width:600px;}
.demo-ctrl{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.demo-stage{padding:6px 0 30px;}
.demo-stage .tv{margin:0 auto; padding:0 28px; max-width:1560px;}
.demo-hint{text-align:center; margin-top:26px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);}
.convert{position:fixed; left:50%; bottom:22px; z-index:90; width:min(920px, calc(100% - 28px)); transform:translate(-50%, 140%); opacity:0; transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .5s; pointer-events:none;}
.convert.show{transform:translate(-50%,0); opacity:1; pointer-events:auto;}
.convert-in{position:relative; display:flex; align-items:center; gap:22px; padding:22px 26px; border-radius:22px; background:linear-gradient(180deg,rgba(24,38,74,.97),rgba(8,14,30,.98)); border:1.5px solid rgba(245,194,74,.7); box-shadow:0 30px 90px -10px rgba(0,0,0,.85), 0 0 70px -14px rgba(245,194,74,.55);}
.convert h3{margin:0; font-size:clamp(15px,1.9vw,22px); font-weight:900; text-transform:uppercase; letter-spacing:.01em; line-height:1.2;}
.convert p{margin:6px 0 0; font-size:13.5px; font-weight:700; color:var(--mut); letter-spacing:.04em;}
.convert .acts{display:flex; gap:10px; flex-wrap:wrap; margin-left:auto;}
.convert .x{position:absolute; top:8px; right:12px; width:30px; height:30px; border-radius:50%; border:none; background:rgba(255,255,255,.07); color:#aab8d8; font-size:16px; cursor:pointer; line-height:1;}
.convert .x:hover{background:rgba(255,255,255,.16); color:#fff;}
.demo-end{padding:70px 0 90px; text-align:center;}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .nav-links{display:none;} .burger{display:block;} .nav-cta .btn-ghost{display:none;} .nav-in{gap:14px;} .nav-cta{margin-left:auto;}
  .anat{grid-template-columns:minmax(0,1fr);} .anat-list{grid-template-columns:1fr 1fr;}
  .feat-grid, .feat.flip .feat-grid{grid-template-columns:minmax(0,1fr);} .feat.flip .feat-copy{order:0;}
  .anat-tv{position:static;}
  .plans{grid-template-columns:minmax(0,1fr); max-width:520px; margin-left:auto; margin-right:auto;} .plan.rec{margin:0; padding-top:34px; padding-bottom:32px;}
  .founder{grid-template-columns:minmax(0,1fr); text-align:center;} .founder-mark{max-width:300px;} .sig{display:flex; flex-direction:column; align-items:center;}
  .steps{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:700px){
  .wrap{padding:0 20px;}
  .nav-cta .btn-primary{padding:10px 14px; font-size:11.5px;}
  .hero{padding-top:calc(var(--nav) + 44px);} .tv{padding:0 12px; margin-top:54px;} .tv-bezel{padding:6px; border-radius:16px;} .tv-screen{border-radius:10px;}
  .btn-lg{padding:17px 24px; font-size:14px; width:100%;} .hero-cta{flex-direction:column; align-items:stretch;}
  .anat-list{grid-template-columns:1fr;} .kpis{grid-template-columns:1fr 1fr 1fr; gap:6px;} .kpi{padding:10px;} .kpi .v{font-size:19px;}
  .two{grid-template-columns:minmax(0,1fr);} .app-body{padding:16px; overflow-x:auto;}
  .kpis[style]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .m-row[style]{grid-template-columns:34px minmax(0,1fr) 62px 52px !important; gap:10px !important;}
  .m-row .m-sub{font-size:11px;} .m-num{font-size:15px;}
  table.m-t{font-size:12px;} table.m-t th{font-size:10px; letter-spacing:.08em; padding-right:6px;} table.m-t td{padding:10px 6px 10px 0;}
  .roi .m-bar{min-width:34px;} .roi{gap:6px;} .clock{padding:14px;} .clock .t{font-size:30px;}
  .plan-flag{font-size:10.5px;} .keep span{font-size:12px; padding:9px 14px;} .flow-node{width:76px; height:76px; font-size:28px;}
  .flow{grid-template-columns:1fr 1fr; gap:34px 0;} .flow::before, .flow::after{display:none;}
  .convert-in{flex-direction:column; align-items:stretch; gap:14px; padding:20px 18px;} .convert .acts{margin-left:0;} .convert .acts .btn{flex:1; padding:14px 10px; font-size:12px;}
  .demo-ctrl{width:100%;} .demo-ctrl .btn{flex:1;}
  .plan{padding:30px 22px 26px;} .plan-price b{font-size:54px;}
  .mx th, .mx td{padding:12px 14px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  [data-reveal]{opacity:1; transform:none;}
}

/* ---------- /demo controls ---------- */
.demo-ctrl-wrap{padding:6px 0 26px;}
.demo-ctrl{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.sale-msg{font-size:13.5px; font-weight:800; letter-spacing:.04em; color:var(--green); opacity:0; transform:translateX(-8px); transition:opacity .35s, transform .35s; min-height:1.2em;}
.sale-msg.on{opacity:1; transform:none;}
@media (max-width:700px){
  .demo-ctrl-wrap{position:sticky; top:var(--nav); z-index:80; padding:10px 0; background:rgba(3,6,13,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); margin-bottom:12px;}
  .demo-ctrl .btn-lg{flex:1 1 100%; width:auto;} .demo-ctrl .btn{flex:1;} .sale-msg{flex:1 1 100%; font-size:12px; min-height:0;}
  .demo-top{padding-top:calc(var(--nav) + 20px);}
}

@media (max-width:420px){
  .nav-in{gap:8px;} .logo{font-size:18px; gap:8px;} .logo svg{width:26px; height:26px;}
  .nav-cta .btn-primary{padding:9px 11px; font-size:10.5px; letter-spacing:.06em;} .burger{width:40px; height:40px;}
  .burger span, .burger::before, .burger::after{left:10px; right:10px;} .burger::before{top:13px;} .burger span{top:19px;} .burger::after{top:25px;}
  .burger.open::before, .burger.open::after{top:19px;}
}

/* the founder ring rotates; clip each section horizontally so its animated bounding box can never widen the page (clip, unlike hidden, keeps sticky working) */
.sec, .band, .final, .feat{overflow-x:clip;}
.founder{padding:20px 0;}

/* phone demo: give the scoreboard the full width and keep the sticky controls compact */
@media (max-width:700px){
  .demo-stage .tv{padding:0 6px;} .demo-stage .tv-bezel{padding:4px; border-radius:14px;} .demo-stage .tv-screen{border-radius:10px;}
  .demo-ctrl{gap:8px;} .demo-ctrl .btn-lg{padding:13px 18px; font-size:13.5px;} .demo-ctrl .btn:not(.btn-lg){padding:10px 8px; font-size:11.5px;}
}