/* Home page ("Check the record"): linevex.app, also where the ads link. */
:root{
  --bg:#050f1c;--band:#061426;--surface:#0a1a2c;--well:#071526;
  --line:#1b3350;--line-strong:#1e3a5c;--line-soft:#132840;--divider:#10243b;
  --text:#ffffff;--body:#eef4fb;--text-2:#b7c6d8;--muted:#7f93ab;
  --cyan:#3fd0f5;--blue:#087dfa;--ink:#04101f;--link:#5cc8f5;
  --cta:linear-gradient(135deg,#0a6fe0,#1740ed);
  --sans:"Outfit","Avenir Next",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--link)}a:hover{color:#9be3ff}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid #14d3f8;outline-offset:3px}

.page{position:relative;isolation:isolate;overflow:hidden;min-height:100vh}
.wrap{max-width:1120px;margin:0 auto;padding-inline:24px}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--cyan)}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:var(--cta);color:#fff;text-decoration:none;font-weight:700}
.btn:hover{color:#fff}
.btn-lg{min-height:56px;padding:0 32px;font-size:18px}
.btn-md{min-height:48px;padding:0 22px}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px;border-radius:10px}
.card{background:var(--surface);border:1px solid var(--line-strong);border-radius:20px;padding:28px}
.h2{font-size:38px;line-height:1.1;letter-spacing:-.03em;color:var(--text)}
.chip{font-family:var(--mono);font-size:13px;font-weight:700;padding:4px 10px;border-radius:6px}
.chip-win{color:var(--ink);background:var(--cyan)}
.chip-loss{color:#fff;border:1px solid #4a6280;padding:3px 10px}
.badge{font-family:var(--mono);font-size:12px;padding:3px 9px;border-radius:999px}
.badge-live{color:var(--ink);background:var(--cyan);font-weight:700}
.badge-research{color:var(--text-2);border:1px solid var(--line-strong);padding:2px 9px}

/* Header: sticks, and gains a backdrop once the page scrolls */
.header{position:sticky;top:0;z-index:20;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px;transition:padding .3s ease}
.header.scrolled{background:rgba(5,15,28,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--divider)}
.header.scrolled .header-in{padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;min-height:44px}
.brand:hover{color:#fff}
.wordmark{font-weight:800;font-size:25px;letter-spacing:-.035em}
.wordmark span{color:#14d3f8}

/* Hero */
.hero{max-width:880px;margin:0 auto;padding:64px 24px 48px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.hero h1{font-size:clamp(40px,6.4vw,72px);line-height:1.02;letter-spacing:-.035em;font-weight:800;color:#fff}
.hero h1 span{color:var(--cyan)}
.hero .lead{font-size:19px;color:var(--text-2);max-width:600px}
.micro{font-size:14px;color:var(--muted)}

/* Ticker */
.ticker{border-block:1px solid var(--divider);background:rgba(6,20,38,.85);overflow:hidden;margin-bottom:56px}
.ticker-track{display:flex;width:max-content;padding:14px 0}
.tick{display:inline-flex;align-items:center;gap:12px;padding:0 28px;white-space:nowrap;font-family:var(--mono);font-size:14px;border-right:1px solid var(--line-soft)}
.tick .m{color:var(--muted)}.tick .p{color:#fff}
.tick .chip{font-size:14px;padding:2px 8px;border-radius:5px}
.tick .chip-loss{padding:1px 8px}

/* Proof row */
.proof{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch;padding-bottom:80px}
.record{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:22px}
.tabs{display:flex;gap:6px;background:var(--well);border:1px solid var(--line-soft);border-radius:12px;padding:4px}
.tab{flex:1;min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--text-2);font:inherit;font-weight:500;cursor:pointer}
.tab[aria-selected="true"]{background:#1740ed;color:#fff;font-weight:700}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.stat{display:flex;flex-direction:column;gap:2px}
.stat span:first-child{font-size:13px;color:var(--muted)}
.stat span:last-child{font-family:var(--mono);font-size:30px;color:#fff}
.stat .up{color:var(--cyan)!important}
.record-foot{font-size:14px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:16px}

.feed{flex:1.4 1 460px;min-width:0;display:flex;flex-direction:column;gap:14px}
.pick{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.pick:last-child{border-bottom:0}
.pick div{display:flex;flex-direction:column}
.pick strong{font-weight:600;color:#fff}
.pick small{font-size:14px;color:var(--muted)}
.locked{position:relative;display:flex;flex-direction:column}
.locked-rows{filter:blur(6px);opacity:.55}
.locked-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(180deg,rgba(10,26,44,.2),rgba(10,26,44,.92) 55%);text-align:center}
.locked-cover strong{color:#fff;font-weight:600}

/* How it works */
.band{background:var(--band);border-block:1px solid var(--divider)}
.band .wrap{padding-block:72px;display:flex;flex-direction:column;gap:36px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.step{display:flex;flex-direction:column;gap:10px}
.step b{font-family:var(--mono);font-size:15px;font-weight:400;color:var(--cyan)}
.step strong{font-size:21px;color:#fff}
.step span{color:var(--text-2)}

/* Insured */
.insured{display:flex;flex-wrap:wrap;gap:32px;align-items:center;padding-block:80px}
.insured-copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:14px}
.insured-copy p:last-child{color:var(--text-2)}
.weeks{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:10px;font-family:var(--mono);font-size:15px}
.week{display:flex;justify-content:space-between;padding:16px 20px;border:1px solid var(--line);border-radius:12px}
.week span:first-child{color:var(--text-2)}
.week span:last-child{color:#fff}
.week-free{border-color:var(--blue);background:#08182b}
.week-free span:last-child{color:var(--cyan)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:28px;padding-bottom:80px}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px 40px}
.faq h3{font-size:19px;color:#fff;margin-bottom:6px}
.faq p{color:var(--text-2)}

/* Final CTA */
.final{padding-bottom:88px}
.final .card{border-radius:24px;padding:56px 32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.final h2{font-size:36px;letter-spacing:-.03em;color:#fff}

/* Footer */
.footer{padding-block:32px 48px;border-top:1px solid var(--divider);display:flex;flex-direction:column;gap:12px;font-size:13px;color:var(--muted);line-height:1.6}

@media (max-width:600px){
  .hero{padding-top:40px}
  .h2{font-size:30px}
  .card{padding:22px}
  .stat span:last-child{font-size:24px}
}

/* ---------- Motion ---------- */
@keyframes lxUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.lx-up{opacity:0;animation:lxUp .7s cubic-bezier(.2,.8,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.27s}.d4{animation-delay:.4s}.d5{animation-delay:.52s}.d6{animation-delay:.65s}.d7{animation-delay:.8s}.d8{animation-delay:1.15s}.d9{animation-delay:1.35s}
@keyframes lxPulse{0%{box-shadow:0 0 0 0 rgba(63,208,245,.6)}70%{box-shadow:0 0 0 9px rgba(63,208,245,0)}100%{box-shadow:0 0 0 0 rgba(63,208,245,0)}}
.badge-live{animation:lxPulse 2s ease-out infinite}
@keyframes lxStamp{0%{opacity:0;transform:scale(1.7) rotate(-6deg)}60%{opacity:1;transform:scale(.92)}100%{opacity:1;transform:none}}
.lx-stamp{display:inline-block;opacity:0;animation:lxStamp .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes lxMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-track{animation:lxMarq 45s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes lxShine{0%{transform:translateX(-150%) skewX(-20deg)}55%,100%{transform:translateX(380%) skewX(-20deg)}}
.lx-shine{position:relative;overflow:hidden}
.lx-shine::after{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:lxShine 3.8s ease-in-out 1.5s infinite;pointer-events:none}
.btn{transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(23,64,237,.45)}
@keyframes lxSweep{from{transform:translateY(-100%)}to{transform:translateY(180%)}}
.lx-scan{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lx-scan::before{content:"";position:absolute;left:0;right:0;top:0;height:55%;background:linear-gradient(180deg,transparent,rgba(63,208,245,.13),transparent);animation:lxSweep 2.8s linear infinite}
@keyframes lxDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,50px) scale(1.1)}}
.lx-glow{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;animation:lxDrift 16s ease-in-out infinite}
.glow-a{width:760px;height:760px;top:-300px;right:-160px;background:radial-gradient(circle,rgba(8,125,250,.24),transparent 65%)}
.glow-b{width:560px;height:560px;top:120px;left:-220px;background:radial-gradient(circle,rgba(20,211,248,.12),transparent 65%);animation-delay:-8s}
@keyframes lxRow{0%,100%{box-shadow:0 0 0 0 rgba(8,125,250,0)}50%{box-shadow:0 0 30px 2px rgba(8,125,250,.38)}}
.week-free{animation:lxRow 3s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  .lx-up,.lx-stamp{opacity:1!important;animation:none!important;transform:none!important}
  .badge-live,.ticker-track,.lx-shine::after,.lx-scan::before,.lx-glow,.week-free{animation:none!important}
  .btn{transition:none}
  html{scroll-behavior:auto}
}

/* Wiring: hidden until live data fills them */
[hidden]{display:none!important}
.stat .down{color:#ff8a95!important}

/* ---------- Scroll mechanics ---------- */
/* Reading progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:30;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#14d3f8,#1740ed);pointer-events:none}

/* Reveal on scroll: blocks rise in; lists rise in one after another */
.rv,.rv-stagger>*{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 110ms)}
.rv.in,.rv-stagger.in>*{opacity:1;transform:none}
.rv-zoom{transform:translateY(28px) scale(.96)}
.rv-zoom.in{transform:none}

/* How it works: each step's number draws a line as it arrives */
.step b{display:flex;align-items:center;gap:12px}
.step b::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--cyan),transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.2,.8,.2,1) .3s}
.steps.in .step b::after{transform:scaleX(1)}

/* Insured weeks: the free week slides in after the paid one */
.weeks>.week{transform:translateX(36px)}
.weeks.in>.week{transform:none}

/* Glows drift a little slower than the page */
.lx-glow{translate:0 var(--parallax,0px)}

/* Sticky sign-up bar once the hero button scrolls away */
.sticky-cta{position:fixed;left:50%;bottom:16px;z-index:25;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 20px;border-radius:16px;border:1px solid var(--line-strong);background:rgba(10,26,44,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 40px rgba(0,0,0,.45);color:#fff;font-weight:600;white-space:nowrap;transform:translate(-50%,140%);transition:transform .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.sticky-cta.show{transform:translate(-50%,0);pointer-events:auto}
@media (max-width:420px){.sticky-cta span{display:none}.sticky-cta{padding:8px}}

@media (prefers-reduced-motion: reduce){
  .rv,.rv-stagger>*,.weeks>.week,.rv-zoom{opacity:1!important;transform:none!important;transition:none!important}
  .step b::after{transform:scaleX(1);transition:none}
  .header,.header-in,.sticky-cta{transition:none}
  .lx-glow{translate:none}
}

/* overflow:hidden on .page would stop the header from sticking; clip trims the glows without that */
@supports (overflow: clip) { .page { overflow: clip; } }

/* Header: a quiet log-in link beside the sign-up button, for people who already have an account */
.header-actions{display:flex;align-items:center;gap:6px}
.login-link{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;color:var(--text-2);text-decoration:none;font-weight:500;font-size:15px}
.login-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.header-actions .btn,.login-link{white-space:nowrap}
@media (max-width:400px){
  .wordmark{font-size:21px}
  .header-actions{gap:2px}
  .login-link{padding:0 8px;font-size:14px}
  .header-actions .btn-sm{padding:0 12px;font-size:14px}
}
