/* Shared stylesheet — used by Landing + Verdict + Pricing + Prop Firms + Onboarding */
:root{
  --bg-void:#0A0B1A;
  --bg-surface:#111329;
  --bg-surface-2:#181B35;
  --bg-surface-3:#1E2144;
  --teal:#26D9B3;
  --mint:#4FFFD2;
  --magenta:#C13CFF;
  --indigo:#5B6CFF;
  --red:#FF4D6A;
  --amber:#FFB547;
  --tp:#F2F4FF;
  --ts:#A0A7C8;
  --tm:#5A6188;
  --tdim:#3A4070;
  --b-sub:rgba(255,255,255,0.06);
  --b-soft:rgba(255,255,255,0.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-void);color:var(--tp);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{font-size:16px;line-height:1.5}
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;letter-spacing:-0.02em;margin:0}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.g-text{background:linear-gradient(135deg,#4FFFD2 0%,#26D9B3 35%,#C13CFF 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-text-2{background:linear-gradient(120deg,#26D9B3,#C13CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.dot-grid{background-image:radial-gradient(rgba(160,167,200,0.12) 1px,transparent 1px);background-size:28px 28px}
::selection{background:rgba(38,217,179,.35);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0A0B1A}
::-webkit-scrollbar-thumb{background:#1E2144;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#2a2f5c}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
@media (max-width:768px){.wrap{padding:0 20px}}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:56px;padding:0 28px;font-size:16px;font-weight:600;letter-spacing:-0.01em;
  color:#0A0B1A;
  background:linear-gradient(135deg,#4FFFD2 0%,#26D9B3 55%,#26D9B3 100%);
  border-radius:12px;
  box-shadow:0 0 0 1px rgba(79,255,210,.35), 0 10px 30px rgba(38,217,179,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;position:relative;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(79,255,210,.5),0 14px 40px rgba(38,217,179,.55),inset 0 1px 0 rgba(255,255,255,.5);filter:brightness(1.05)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;height:56px;padding:0 20px;font-size:16px;font-weight:500;color:var(--tp);border:1px solid var(--b-sub);border-radius:12px;background:rgba(255,255,255,0.02);transition:border-color .2s, background .2s}
.btn-ghost:hover{border-color:rgba(79,255,210,.35);background:rgba(79,255,210,.05)}
.btn-sm{height:40px;font-size:14px;padding:0 16px;border-radius:10px}

section{position:relative;z-index:2}
.sec-pad{padding:120px 0}
@media (max-width:768px){.sec-pad{padding:64px 0}}

.card{background:linear-gradient(180deg,rgba(24,27,53,.85),rgba(17,19,41,.85));border:1px solid var(--b-sub);border-radius:18px;backdrop-filter:blur(12px)}
.card-grad{position:relative;border-radius:18px;background:linear-gradient(180deg,rgba(24,27,53,.9),rgba(17,19,41,.9))}
.card-grad::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(135deg,#26D9B3 0%,rgba(193,60,255,.6) 50%,#C13CFF 100%);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

@keyframes float1{0%,100%{transform:translate3d(0,0,0) rotateX(var(--rx)) rotateY(var(--ry))}50%{transform:translate3d(0,-8px,0) rotateX(var(--rx)) rotateY(var(--ry))}}
@keyframes pulseGlow{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes aurora{0%{transform:translate(-10%,-10%) rotate(0deg) scale(1)}50%{transform:translate(10%,5%) rotate(180deg) scale(1.2)}100%{transform:translate(-10%,-10%) rotate(360deg) scale(1)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}

.aurora{position:absolute;inset:-20%;pointer-events:none;z-index:0;filter:blur(80px);opacity:.55}
.aurora::before,.aurora::after{content:"";position:absolute;border-radius:50%;animation:aurora 18s ease-in-out infinite}
.aurora::before{width:60%;height:60%;left:10%;top:10%;background:radial-gradient(circle,#26D9B3 0%,transparent 60%)}
.aurora::after{width:55%;height:55%;right:5%;bottom:5%;background:radial-gradient(circle,#C13CFF 0%,transparent 60%);animation-delay:-9s}

.lift{transition:transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s, border-color .35s}
.lift:hover{transform:translateY(-4px);border-color:rgba(38,217,179,.25);box-shadow:0 30px 60px rgba(0,0,0,.4), 0 0 40px rgba(38,217,179,.08)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--teal);padding:6px 12px;border-radius:999px;border:1px solid rgba(38,217,179,.25);background:rgba(38,217,179,.06)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:pulseGlow 2s ease-in-out infinite}

.nav{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;transition:border-color .2s, background .2s}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-links{display:flex;gap:28px;color:var(--ts);font-size:14px;font-weight:500}
.nav-links a{position:relative;transition:color .2s}
.nav-links a:hover{color:var(--tp)}
.nav-scrolled{background:rgba(10,11,26,.72);backdrop-filter:blur(16px);border-bottom:1px solid rgba(38,217,179,.15)}
@media (max-width:900px){.nav-links.desk, a.desk{display:none!important} .mob-menu{display:flex!important}}

.logo{display:inline-flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;letter-spacing:-0.02em}
.logo-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#5B6CFF 0%,#C13CFF 55%,#26D9B3 100%);display:flex;align-items:center;justify-content:center;font-size:15px;color:#0A0B1A;box-shadow:0 0 20px rgba(193,60,255,.45), inset 0 1px 0 rgba(255,255,255,.4);font-weight:800}
.logo-mark span{transform:translateY(-.5px)}

.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:500;background:rgba(255,255,255,.04);border:1px solid var(--b-sub);color:var(--ts)}
.kpi-tile{padding:18px;border-radius:14px;background:linear-gradient(180deg,rgba(24,27,53,.8),rgba(17,19,41,.8));border:1px solid var(--b-sub)}
.spark{height:36px;width:100%;display:block}

.g-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.g-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1024px){.g-3,.g-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.top-glow{position:absolute;left:50%;top:0;transform:translateX(-50%);width:80%;height:1px;background:linear-gradient(90deg,transparent,rgba(38,217,179,.5),rgba(193,60,255,.5),transparent)}

.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:72px;animation:marquee 40s linear infinite;width:max-content}

.feat-chip{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:12px;border:1px solid var(--b-sub);background:rgba(24,27,53,.4);transition:border-color .2s, transform .2s, background .2s}
.feat-chip:hover{border-color:rgba(38,217,179,.4);background:rgba(38,217,179,.04);transform:translateY(-2px)}
.feat-chip .fi{width:28px;height:28px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(38,217,179,.08);color:var(--teal);border:1px solid rgba(38,217,179,.2)}
.feat-chip .fn{font-size:14px;font-weight:600;color:var(--tp);margin-bottom:3px;letter-spacing:-0.01em}
.feat-chip .fd{font-size:12px;color:var(--tm);line-height:1.45}

.ring{position:relative;margin:0 auto}
.ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.ring-num .n{font-family:'Space Grotesk';font-size:44px;font-weight:700;letter-spacing:-0.03em}
.ring-num .t{font-size:11px;letter-spacing:.2em;color:var(--tm);text-transform:uppercase;margin-top:4px}

details{border-bottom:1px solid var(--b-sub)}
details summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:600;color:var(--tp);gap:20px}
details summary::-webkit-details-marker{display:none}
details[open] summary .faq-plus{transform:rotate(45deg)}
.faq-plus{width:22px;height:22px;border-radius:6px;border:1px solid var(--b-soft);display:flex;align-items:center;justify-content:center;color:var(--ts);transition:transform .25s ease, color .2s;flex:none}
details[open] .faq-plus{color:var(--teal);border-color:rgba(38,217,179,.35)}
details .faq-body{padding:0 0 24px 0;color:var(--ts);font-size:15px;line-height:1.65;max-width:720px}

.dropzone{border:1.5px dashed rgba(79,255,210,.35);border-radius:18px;padding:48px;text-align:center;background:linear-gradient(180deg,rgba(38,217,179,.04),rgba(193,60,255,.04));transition:all .25s;cursor:pointer}
.dropzone:hover, .dropzone.drag{border-color:var(--mint);background:linear-gradient(180deg,rgba(38,217,179,.1),rgba(193,60,255,.08));box-shadow:0 0 60px rgba(38,217,179,.15)}

.tweak-panel{position:fixed;right:24px;bottom:24px;width:300px;background:rgba(17,19,41,.96);backdrop-filter:blur(18px);border:1px solid rgba(193,60,255,.25);border-radius:16px;padding:18px;z-index:100;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.tweak-panel h5{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:0 0 12px 0;font-weight:600}
.tweak-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;color:var(--ts)}
.tweak-row select,.tweak-row input[type=range]{background:#0A0B1A;color:var(--tp);border:1px solid var(--b-sub);border-radius:8px;padding:6px 10px;font-size:12px;font-family:inherit}
.tweak-row input[type=range]{padding:0;width:120px}
.swatches{display:flex;gap:8px}
.sw{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s}
.sw.active{border-color:#fff;transform:scale(1.1)}

.mason{columns:3;column-gap:20px}
@media (max-width:1024px){.mason{columns:2}}
@media (max-width:640px){.mason{columns:1}}
.mason > *{break-inside:avoid;margin-bottom:20px}

.price-popular{position:relative}
.price-popular::before{content:"";position:absolute;inset:-1px;border-radius:19px;padding:1.5px;background:linear-gradient(135deg,#4FFFD2 0%,#C13CFF 100%);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:gradientShift 6s ease infinite;background-size:200% 200%}

/* Mobile typography + hero adjustments */
@media (max-width:768px){
  .hero-grid{grid-template-columns:1fr!important;gap:32px!important}
  h1, h2{letter-spacing:-.025em!important}
  .btn-primary, .btn-ghost{width:100%;justify-content:center}
  .btn-primary.btn-sm, .btn-ghost.btn-sm{width:auto}
  .sec-pad{padding:56px 0}
  .wrap{padding:0 18px}
  .card{border-radius:14px}
  .feat-chip{padding:12px}
  details summary{font-size:16px;padding:18px 0;gap:12px}
  .nav{height:58px}
  .logo span{font-size:15px!important}
  .logo-mark{width:30px;height:30px;font-size:13px}
  input,select,textarea,button{font-size:15px!important}
  /* hide top-right glow blurs on mobile */
  .aurora{opacity:.3!important;filter:blur(60px)!important}
  /* shrink huge display type */
  .ring-num .n{font-size:32px!important}
  /* footer stack */
  .foot-grid{grid-template-columns:1fr 1fr!important;gap:28px!important}
  /* tables / matrices — horizontal scroll rather than crush */
  .matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px}
  .matrix-scroll > *{min-width:720px}
  /* kpi tiles shrink */
  .kpi-tile{padding:14px}
  /* chips wrap */
  .chip{font-size:11px;padding:3px 8px}
  /* eyebrow wraps */
  .eyebrow{font-size:11px;letter-spacing:.14em;padding:5px 10px}
  /* tight columns for any g-2 on mobile */
  .g-2{grid-template-columns:1fr!important}
  /* marquee slows / shrinks gap */
  .marquee-track{gap:36px!important}
  /* pricing + ring cards get full width */
  .price-card{min-width:0!important}
  /* any masonry collapses clean */
  .mason{columns:1!important}
  /* cases cards already break via their own rule at 820px */
  /* reduce hero paddingTop where set inline */
  section[style*="paddingTop:96"], section[style*="padding-top:96"]{padding-top:44px!important}
  section[style*="paddingTop:72"]{padding-top:36px!important}
  section[style*="paddingTop:60"]{padding-top:32px!important}
  /* stop huge display numbers from overflowing */
  .mono[style*="font-size:60"], .mono[style*="fontSize:60"]{font-size:40px!important}
  /* make svg illustrations fit */
  svg{max-width:100%;height:auto}
  /* icon grids collapse to 2 */
  [style*="grid-template-columns:repeat(3,"]:not(.keep-grid),
  [style*="gridTemplateColumns:\"repeat(3,"]:not(.keep-grid){grid-template-columns:repeat(2,1fr)!important}
  /* the step nav in onboarding */
  .onboard-steps{overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px!important;padding-bottom:8px}
  .onboard-steps > *{flex:0 0 auto}
  /* compare category sticky nav */
  .cat-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px 18px!important;gap:8px!important;scrollbar-width:none}
  .cat-nav::-webkit-scrollbar{display:none}
  .cat-nav > *{flex:0 0 auto}
  /* tweak panel */
  .tweak-panel{right:12px;bottom:12px;width:calc(100vw - 24px);max-height:70vh;overflow-y:auto}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr!important}
  .g-3, .g-4{grid-template-columns:1fr!important}
  /* display 1s step down further */
  h1{font-size:clamp(32px,9vw,44px)!important}
  h2{font-size:clamp(26px,7vw,36px)!important}
}

/* horizontal overflow guard */
@media (max-width:900px){
  body, #app{overflow-x:hidden}
}

.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
@media (max-width:1024px){.hero-grid{grid-template-columns:1fr}}