/* CopyRadar — WHITE / light theme (Jay's direction, Oct 27, 2026 retheme).
   Bright fintech-light: white base, violet/teal/amber palette, soft coloured
   shadows, subtle gradient borders. Mobile-first. Supersedes the dark theme. */
:root{
  --bg:#ffffff; --bg2:#f7f8fc; --panel:#ffffff; --panel-tint:#f1f3fa;
  --ink:#14182b; --muted:#4b5468; --faint:#7a8199;
  --violet:#7c3aed; --violet-deep:#6d28d9; --teal:#0d9488; --teal-bright:#14b8a6;
  --amber:#d97706; --amber-bright:#f59e0b;
  --pos:#0a9665; --neg:#d92d20;
  --stroke:#e3e6f2; --stroke-strong:#cfd4e8;
  --shadow:0 18px 44px rgba(109,40,217,.10), 0 4px 14px rgba(20,24,43,.06);
  --shadow-hover:0 28px 60px rgba(109,40,217,.16), 0 6px 18px rgba(13,148,136,.10);
  --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
#bg3d{position:fixed; inset:0; width:100%; height:100%; z-index:-2; display:block}
.bg-fallback{position:fixed; inset:0; z-index:-3; background:
    radial-gradient(55% 42% at 12% 0%, rgba(124,58,237,.10), transparent 62%),
    radial-gradient(48% 40% at 92% 6%, rgba(20,184,166,.10), transparent 62%),
    radial-gradient(60% 50% at 85% 100%, rgba(245,158,11,.07), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--bg2) 78%, #ffffff);}
a{color:var(--violet-deep); text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.pos{color:var(--pos)} .neg{color:var(--neg)}
.grad{background:linear-gradient(92deg, var(--violet-deep), var(--violet) 38%, var(--teal) 72%, var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.8rem 1.1rem;
  background:rgba(255,255,255,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--stroke)}
.brand{display:flex; align-items:center; gap:.55rem; color:var(--ink); font-weight:700; font-size:1.22rem; letter-spacing:.2px}
.brand:hover{text-decoration:none}
.brand em{font-style:normal; color:var(--violet)}
.nav-links{display:flex; gap:.35rem}
.nav-links a{color:var(--muted); padding:.45rem .8rem; border-radius:999px; font-size:.95rem}
.nav-links a:hover{color:var(--ink); text-decoration:none; background:var(--panel-tint)}
.nav-links a.active{color:var(--violet-deep); background:#efe9fd; box-shadow:inset 0 0 0 1px #ddd0fb}

main{max-width:1120px; margin:0 auto; padding:0 1.1rem 3rem}

/* ---------- bright cards + depth ---------- */
.glass{
  background:linear-gradient(165deg, #ffffff, #fbfbfe 60%);
  border:1px solid var(--stroke); border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
}
.glass::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg, rgba(124,58,237,.55), rgba(20,184,166,.45) 55%, rgba(245,158,11,.4)); opacity:.55}
.tilt{transform-style:preserve-3d; will-change:transform; transition:transform .35s ease, box-shadow .35s ease}
.tilt:hover{box-shadow:var(--shadow-hover)}

/* ---------- hero ---------- */
.hero{padding:3.2rem 0 1.4rem; text-align:left; position:relative}
.hero-media{position:absolute; inset:-1.2rem -1.1rem auto -1.1rem; height:calc(100% + 1.2rem);
  z-index:-1; overflow:hidden; border-radius:0 0 28px 28px;
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 98%);
          mask-image:linear-gradient(180deg, #000 55%, transparent 98%)}
.hero-video, .hero-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.hero-poster{display:none}
.hero-shade{position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,.72) 20%, rgba(255,255,255,.28) 55%, rgba(255,255,255,.05) 80%),
             linear-gradient(0deg, rgba(255,255,255,.55), transparent 45%)}
.eyebrow{color:var(--violet-deep); font-size:.78rem; letter-spacing:.22em; font-weight:700; margin:0 0 .9rem}
.hero h1, .page-head h1{font-size:clamp(2.1rem, 6.5vw, 3.6rem); line-height:1.08; margin:0 0 1rem; letter-spacing:-.01em}
.hero-sub{color:var(--muted); font-size:clamp(1rem, 2.6vw, 1.15rem); max-width:44rem; margin:0 0 1.8rem}
.hero-sub strong{color:var(--ink)}
.scoreboard{display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem 1rem; padding:1.2rem 1.3rem; max-width:820px}
.stat{display:flex; flex-direction:column; gap:.15rem; padding:.4rem .2rem}
.stat-label{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:700}
.stat-value{font-size:clamp(1.45rem, 4.5vw, 2rem); font-weight:800; font-variant-numeric:tabular-nums}
.snapshot-note{color:var(--faint); font-size:.9rem; margin-top:.9rem}
.page-head{padding:2.6rem 0 .6rem}

/* ---------- feeds & cards ---------- */
.feed-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin:2.6rem 0 1.1rem; flex-wrap:wrap}
.feed-head h2{margin:0; font-size:clamp(1.4rem, 4vw, 1.9rem)}
.feed-badge{font-size:.68rem; letter-spacing:.14em; vertical-align:middle; color:#fff; background:var(--violet);
  padding:.22rem .55rem; border-radius:999px; font-weight:800; margin-left:.5rem}
.feed-badge.alt{background:var(--teal)}
.feed-badge.record{background:var(--amber)}
.record-note{background:#fdf6ec; border:1px solid #f0d9ae; color:#7c4a03; border-radius:14px;
  padding:.85rem 1rem; font-size:.94rem; margin:0 0 1.1rem; max-width:48rem}
.record-note strong{color:#5f3802}
.feed-tag{color:var(--muted); margin:.35rem 0 .2rem; max-width:38rem}
.feed-meta{color:var(--faint); font-size:.92rem; margin:.15rem 0 0}
.feed-meta strong{color:var(--ink)}
.delay-note{color:var(--faint); font-size:.9rem; margin:0}
.card-grid{display:grid; grid-template-columns:1fr; gap:1.1rem; perspective:1200px}
.alert-card{padding:1.25rem 1.3rem 1.35rem; position:relative}
.card-top{display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-bottom:.7rem}
.whale-chip{font-weight:700; font-size:.92rem; color:var(--violet-deep); background:rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.30); padding:.28rem .7rem; border-radius:999px; max-width:65%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.whale-chip.fast{color:var(--teal); background:rgba(13,148,136,.08); border-color:rgba(13,148,136,.32)}
.open-chip{font-size:.72rem; letter-spacing:.1em; font-weight:800; color:var(--amber)}
.open-chip.done{color:var(--pos)}
.alert-card .market{margin:.1rem 0 .3rem; font-size:1.12rem; line-height:1.35}
.outcome{margin:0 0 .9rem; color:var(--muted)}
.outcome strong{color:var(--ink)}
.price-row{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; padding:.8rem .9rem;
  background:var(--panel-tint); border:1px solid var(--stroke); border-radius:14px;
  box-shadow:inset 0 1px 4px rgba(20,24,43,.05)}
.p-label{display:block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:700}
.p-value{display:block; font-size:1.06rem; font-weight:800; font-variant-numeric:tabular-nums; margin-top:.15rem}
.price-trio{display:flex; align-items:center; gap:.55rem; padding:.8rem .9rem;
  background:var(--panel-tint); border:1px solid var(--stroke); border-radius:14px;
  box-shadow:inset 0 1px 4px rgba(20,24,43,.05)}
.pt-step{flex:1 1 0; min-width:0}
.pt-arrow{flex:0 0 auto; color:var(--faint); font-weight:800}
.gap-line{margin:.7rem 0 0; color:var(--muted); font-size:.92rem}
.gap-line strong{font-variant-numeric:tabular-nums}
.stale-flag{margin:0 0 .8rem; padding:.65rem .8rem; border-radius:12px; font-size:.9rem; font-weight:700;
  background:#fdf0e7; border:1px solid #f5cf9f; color:#8a4d05}
.card-meta{color:var(--faint); font-size:.86rem; margin:.85rem 0 .6rem}
.market-link{font-weight:700; font-size:.95rem}

.ad-slot{margin:2rem 0 .4rem; padding:1.1rem; text-align:center; color:var(--faint); font-size:.78rem;
  letter-spacing:.22em; border:1px dashed var(--stroke-strong); border-radius:14px; background:var(--bg2)}

/* ---------- how it works ---------- */
.how{margin-top:2.8rem; padding:1.6rem 1.5rem; overflow:hidden}
.how h2{margin:.1rem 0 1rem}
.steps{margin:0; padding-left:1.25rem; color:var(--muted); display:grid; gap:.7rem}
.steps strong{color:var(--ink)}
.how-media{display:none}

/* ---------- record ---------- */
.record-feed{margin-top:2.4rem}
.record-head{display:grid; gap:1rem; margin-bottom:1rem}
.record-head h2{margin:.1rem 0 .4rem; font-size:clamp(1.35rem, 4vw, 1.8rem)}
.spark{width:100%; max-width:560px; height:auto; display:block}
.table-wrap{overflow-x:auto; padding:.4rem}
table{border-collapse:collapse; width:100%; min-width:760px; font-size:.9rem}
th, td{padding:.6rem .7rem; text-align:left; border-bottom:1px solid var(--stroke); vertical-align:top}
th{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
td{font-variant-numeric:tabular-nums}
td a{word-break:break-all}
.exit-note{color:var(--muted); min-width:180px}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:1.6rem}
.plan{padding:1.7rem 1.6rem; position:relative}
.plan.pro{border-color:#c9b3f8; box-shadow:var(--shadow), 0 0 0 1px #ddd0fb, 0 22px 50px rgba(109,40,217,.14)}
.plan-badge{position:absolute; top:-.7rem; right:1.2rem; background:linear-gradient(92deg, var(--violet), var(--teal));
  color:#fff; font-weight:800; font-size:.7rem; letter-spacing:.12em; padding:.3rem .7rem; border-radius:999px; z-index:2}
.plan h2{margin:.1rem 0 .2rem}
.price{font-size:2.4rem; font-weight:800; margin:.2rem 0 .8rem}
.price .per{font-size:1rem; color:var(--muted); font-weight:600}
.plan ul{margin:0 0 1.3rem; padding-left:1.15rem; color:var(--muted); display:grid; gap:.45rem}
.btn{display:inline-block; border:0; cursor:pointer; font-weight:700; font-size:.98rem;
  padding:.72rem 1.35rem; border-radius:999px; color:#fff; background:linear-gradient(92deg, var(--violet), var(--teal))}
.btn:hover{text-decoration:none; filter:brightness(1.08)}
.btn.ghost{background:#fff; color:var(--violet-deep); box-shadow:inset 0 0 0 1.5px #c9b3f8}
.waitlist{display:flex; flex-direction:column; gap:.6rem}
.waitlist input{background:#fff; border:1px solid var(--stroke-strong); border-radius:999px;
  padding:.72rem 1.1rem; color:var(--ink); font-size:1rem; width:100%}
.waitlist input::placeholder{color:var(--faint)}
.waitlist input:focus{outline:2px solid var(--teal-bright); outline-offset:1px}
.fine{color:var(--faint); font-size:.85rem}
.flash{padding:.9rem 1.1rem; border-radius:14px; margin-top:1.2rem; font-weight:600}
.flash.ok{background:#e8f8f1; border:1px solid #9fe3c3; color:#0b6b43}
.flash.warn{background:#fdf0e7; border:1px solid #f5cf9f; color:#8a4d05}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--stroke); margin-top:3.5rem; background:var(--bg2)}
.footer-inner{max-width:1120px; margin:0 auto; padding:1.8rem 1.1rem 2.4rem}
.foot-brand{font-weight:800; margin:0 0 .6rem}
.disclaimer{color:var(--muted); font-size:.88rem; max-width:56rem; margin:0 0 .7rem}
.foot-meta{color:var(--faint); font-size:.82rem; margin:0}

/* ---------- motion ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .hero-video{display:none}
  .hero-poster{display:block}
}

/* ---------- small screens: poster fallback + one-line nav ---------- */
@media (max-width:719px){
  .hero-video{display:none}
  .hero-poster{display:block}
}
@media (max-width:560px){
  .nav{padding:.7rem .8rem; gap:.5rem}
  .brand{font-size:1.08rem; gap:.4rem}
  .brand-mark svg{width:24px; height:24px}
  .nav-links{gap:.1rem}
  .nav-links a{padding:.4rem .55rem; font-size:.88rem}
  main{padding:0 .9rem 2.4rem}
  .hero-media{inset:-1.2rem -.9rem auto -.9rem}
  .price-row{gap:.4rem; padding:.7rem .6rem}
  .p-value{font-size:.98rem}
}

/* ---------- desktop ---------- */
@media (min-width:720px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .scoreboard{grid-template-columns:repeat(4,1fr)}
  .plans{grid-template-columns:1fr 1fr}
  .record-head{grid-template-columns:1.2fr .8fr; align-items:center}
  .hero{padding-top:4.2rem}
  .how{display:grid; grid-template-columns:1.25fr .75fr; gap:1.6rem; align-items:center}
  .how-media{display:block; border-radius:16px; overflow:hidden; position:relative;
    box-shadow:0 16px 36px rgba(13,148,136,.16); border:1px solid var(--stroke)}
  .how-media video, .how-media img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1}
}
@media (min-width:1024px){
  .card-grid{grid-template-columns:repeat(3,1fr)}
}