/* ==========================================================================
   AI INDICATOR LAB — Design tokens
   Direction: dark fintech, gradient glow accents (violet/pink/cyan)
   Display: Space Grotesk · Body: Inter · Data/code: JetBrains Mono
   ========================================================================== */

:root{
  color-scheme: dark;

  /* --- palette --- */
  --bg-0:#07050D;          /* base canvas, deeper than a "dark theme" default */
  --bg-1:#0F0B1B;          /* raised panel */
  --bg-2:#151024;          /* card */
  --bg-3:#1C1530;          /* elevated card / hover state */
  --line:#282136;          /* hairline border */
  --line-soft: rgba(255,255,255,0.06);
  --line-strong: rgba(255,255,255,0.14);

  --violet:#8B5CF6;
  --violet-dim:#6D46D1;
  --pink:#EC4899;
  --cyan:#22D3EE;
  --gold:#F0C36D;          /* premium accent: featured tier, top-shelf badges only */
  --green:#34D399;         /* used sparingly: bullish / positive states only */
  --red:#F87171;           /* used sparingly: bearish / risk states only */

  --text-0:#F6F4FB;        /* primary text */
  --text-1:#B3ABC9;        /* secondary text */
  --text-2:#6D6389;        /* muted / captions */

  --grad-primary: linear-gradient(115deg, var(--violet) 0%, var(--pink) 55%, var(--cyan) 100%);
  --grad-soft: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(236,72,153,0.10), rgba(34,211,238,0.12));
  --grad-line: linear-gradient(115deg, var(--violet), var(--cyan));
  --grad-gold: linear-gradient(120deg, #C99A3F 0%, var(--gold) 50%, #FBE3AE 100%);

  /* --- elevation --- */
  --shadow-s: 0 10px 24px -14px rgba(0,0,0,0.55);
  --shadow-m: 0 26px 50px -22px rgba(0,0,0,0.6);
  --shadow-l: 0 44px 90px -32px rgba(0,0,0,0.7);
  --glow-violet: 0 8px 30px -8px rgba(139,92,246,0.55);
  --glow-pink: 0 14px 34px -8px rgba(236,72,153,0.5);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- type --- */
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  /* --- scale --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-xl: 30px;

  --container: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  background:var(--bg-0);
  color:var(--text-0);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* background atmosphere: soft gradient mesh, fixed, behind everything.
   Slightly tighter/darker radii than a generic "AI gradient blob" hero -
   the mesh sits low-key behind content rather than being the first thing
   you notice. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 12% 6%, rgba(139,92,246,0.16), transparent 38%),
    radial-gradient(circle at 88% 14%, rgba(34,211,238,0.11), transparent 36%),
    radial-gradient(circle at 50% 92%, rgba(236,72,153,0.09), transparent 42%);
  pointer-events:none;
}

/* fine grain overlay: breaks up flat gradient banding on large dark
   panels (hero, scope, waitlist) so they read as a considered surface
   rather than a plain CSS gradient. Pure SVG noise, no image asset. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:0.035;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--space-3);
}

section{ position:relative; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.12;
  color:var(--text-0);
}

h1{ font-size:clamp(2.7rem, 5.4vw, 4.9rem); font-weight:700; letter-spacing:-0.025em; }
h2{ font-size:clamp(2rem, 3.4vw, 3rem); }
h3{ font-size:1.35rem; }

p{ color:var(--text-1); }

/* small caps label, e.g. "SMART MONEY", "TRENDING" - used for the
   marketplace category rail as well as section eyebrows, so the two
   share one visual language instead of inventing a second label style. */
.label-tag{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-2);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cyan);
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--grad-primary);
  box-shadow:0 0 10px 1px rgba(139,92,246,0.6);
}

.grad-text{
  background:var(--grad-primary);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.grad-text-gold{
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.section-head{
  max-width:640px;
  margin-bottom:var(--space-5);
}
.section-head p{ margin-top:var(--space-2); font-size:1.05rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0.85rem 1.6rem;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  border:1px solid transparent;
  transition:transform 0.22s var(--ease), box-shadow 0.22s var(--ease), background 0.22s ease, border-color 0.2s ease;
  white-space:nowrap;
}

.btn-primary{
  position:relative;
  background:var(--grad-primary);
  color:#0B0812;
  box-shadow:var(--glow-violet);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--glow-pink); }
.btn-primary:active{ transform:translateY(0); }
/* faint animated sheen sweeping the gradient on hover - reads as
   "premium fintech" rather than a static flat-color button. Purely
   decorative, respects prefers-reduced-motion via the global rule above. */
.btn-primary::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  opacity:0;
  transition:opacity 0.3s ease;
  pointer-events:none;
}
.btn-primary:hover::after{ opacity:1; }

.btn-ghost{
  background:rgba(255,255,255,0.03);
  border-color:var(--line);
  color:var(--text-0);
}
.btn-ghost:hover{ border-color:var(--cyan); background:rgba(34,211,238,0.06); transform:translateY(-1px); }

.btn-gold{
  background:var(--grad-gold);
  color:#241605;
  box-shadow:0 10px 28px -10px rgba(240,195,109,0.5);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(240,195,109,0.6); }

.btn-block{ width:100%; }

.btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}
.btn:disabled::after{ display:none; }

/* ==========================================================================
   Nav
   ========================================================================== */

.nav{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(16px) saturate(150%);
  background:rgba(7,5,13,0.68);
  border-bottom:1px solid var(--line-soft);
  transition:border-color 0.2s ease, background 0.2s ease;
}

.nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-0.01em;
}
.brand-mark{
  width:30px; height:30px;
  border-radius:9px;
  background:var(--grad-primary);
  position:relative;
  flex-shrink:0;
}
.brand-mark::after{
  content:"";
  position:absolute; inset:6px;
  border-radius:5px;
  background:var(--bg-0);
  clip-path:polygon(0 100%, 30% 40%, 55% 65%, 100% 0, 100% 100%);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:var(--space-4);
}
.nav-links a{
  font-size:0.92rem;
  color:var(--text-1);
  transition:color 0.15s ease;
}
.nav-links a:hover{ color:var(--text-0); }

.nav-actions{ display:flex; align-items:center; gap:14px; }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line);
  border-radius:8px;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  color:var(--text-0);
}

/* Log in / Sign up / Get early access appear as buttons in nav-actions
   on desktop, and as plain links (or a full-width button, for the CTA)
   inside the mobile dropdown instead, so they're always reachable but
   never duplicated on screen at once. This also keeps the collapsed
   top bar down to just the brand + hamburger on narrow phones, the
   previous markup kept the "Get early access" pill in nav-actions at
   every width, which on phones narrower than roughly 360px pushed the
   hamburger button past the edge of the screen and made it look like
   the nav had no login/signup access at all. */
.nav-links-mobile-only{ display:none; }
.nav-cta-desktop{ display:inline-flex; }

@media (max-width: 860px){
  .nav-links{
    position:fixed;
    top:76px; left:0; right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-2);
    background:var(--bg-1);
    border-bottom:1px solid var(--line);
    padding:var(--space-3);
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease, transform 0.2s ease;
    max-height:80vh;
    overflow-y:auto;
  }
  .nav-links.open{
    opacity:1; transform:translateY(0); pointer-events:auto;
  }
  .nav-links-mobile-only{ display:block; width:100%; }
  .nav-links-mobile-only a{
    display:block;
    padding:0.6rem 0;
    font-weight:600;
    color:var(--text-0);
    border-top:1px solid var(--line-soft);
  }
  .nav-cta-mobile{ border-top:none; padding-top:var(--space-2); }
  .nav-cta-mobile a{ padding:0; border-top:none; }
  .nav-toggle{ display:flex; }
  .nav-actions-desktop-only, .nav-cta-desktop{ display:none; }
}

.sr-only{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{ padding:var(--space-6) 0 var(--space-5); }

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:var(--space-5);
  align-items:center;
}

.hero-copy h1{ margin-bottom:var(--space-3); }
.hero-sub{ font-size:1.1rem; max-width:520px; margin-bottom:var(--space-4); }
.eyebrow{ margin-bottom:var(--space-3); }

.hero-form{
  display:flex;
  gap:10px;
  max-width:460px;
  margin-bottom:var(--space-2);
}
.hero-form input{
  flex:1;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:999px;
  padding:0.85rem 1.2rem;
  color:var(--text-0);
  font-family:var(--font-body);
  font-size:0.95rem;
}
.hero-form input::placeholder{ color:var(--text-2); }

.hero-note{ font-size:0.85rem; color:var(--text-2); margin-bottom:var(--space-4); }

.hero-trust{
  display:flex;
  gap:var(--space-4);
  flex-wrap:wrap;
  padding-top:var(--space-3);
  border-top:1px solid var(--line-soft);
}
.trust-item{
  font-size:0.82rem;
  color:var(--text-2);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.trust-item strong{
  font-family:var(--font-display);
  color:var(--text-0);
  font-size:0.95rem;
}

@media (max-width: 860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-form{ flex-direction:column; }
}

/* --- hero visual: chat -> indicator, the signature element --- */

.hero-visual{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.visual-card{
  position:relative;
  background:linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-3);
  box-shadow:var(--shadow-l);
}
/* hairline gradient rim instead of a flat border - the corner glows
   read as "product screenshot", not "bordered div" */
.visual-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(160deg, rgba(139,92,246,0.35), rgba(255,255,255,0.02) 40%, rgba(34,211,238,0.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.chat-card{ position:relative; }
.chat-dot{
  position:absolute; top:18px; right:18px;
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(52,211,153,0.15);
}

.chat-line{ margin-bottom:14px; max-width:88%; }
.chat-line.ai{ margin-left:auto; }
.chat-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-2);
  margin-bottom:4px;
}
.chat-tag.ai{ color:var(--cyan); }

/* .chat-body is the single bubble for a whole message, it can contain
   several <p>/<ul>/<ol>/<pre> children (a multi-paragraph or list-formatted
   reply) without each one getting its own separate bubble. */
.chat-body{
  background:var(--bg-1);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
  padding:10px 14px;
  font-size:0.88rem;
  color:var(--text-0);
  line-height:1.5;
}
.chat-line.ai .chat-body{
  background:linear-gradient(135deg, rgba(139,92,246,0.14), rgba(34,211,238,0.10));
  border-color:rgba(139,92,246,0.25);
}
.chat-body p{ margin:0 0 8px; }
.chat-body p:last-child{ margin-bottom:0; }
.chat-body ul,
.chat-body ol{ margin:6px 0 10px; padding-left:1.2em; }
.chat-body li{ margin-bottom:4px; }
.chat-body li:last-child{ margin-bottom:0; }
.chat-body strong{ color:var(--text-0); font-weight:600; }
.chat-body em{ font-style:italic; }
.chat-body code{
  font-family:var(--font-mono);
  font-size:0.82em;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line-soft);
  border-radius:4px;
  padding:1px 5px;
}
.chat-body pre.chat-code-block{
  margin:8px 0;
  padding:10px 12px;
  background:var(--bg-0);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-s);
  overflow-x:auto;
}
.chat-body pre.chat-code-block code{
  background:none;
  border:none;
  padding:0;
  font-size:0.8rem;
  color:var(--text-0);
  white-space:pre;
}

.chat-typing{ display:flex; gap:4px; padding-left:2px; }
.chat-typing span{
  width:6px; height:6px; border-radius:50%;
  background:var(--text-2);
  animation:typing 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2){ animation-delay:0.2s; }
.chat-typing span:nth-child(3){ animation-delay:0.4s; }
@keyframes typing{
  0%, 60%, 100%{ opacity:0.25; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-2px); }
}

.indicator-card{ position:relative; }
.ic-head{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--text-1);
  margin-bottom:var(--space-2);
}
.ic-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--grad-primary);
}
.ic-chart{ width:100%; height:auto; }
.ic-badge{
  position:absolute; bottom:18px; right:18px;
  background:rgba(52,211,153,0.14);
  border:1px solid rgba(52,211,153,0.35);
  color:var(--green);
  font-family:var(--font-mono);
  font-size:0.72rem;
  padding:5px 12px;
  border-radius:999px;
}

@media (max-width: 860px){
  .hero-visual{ margin-top:var(--space-2); }
}

/* ==========================================================================
   How it works
   ========================================================================== */

.how{ padding:var(--space-6) 0; }

.how-steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-3);
}

.how-step{
  position:relative;
  background:linear-gradient(165deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-4);
  overflow:hidden;
  transition:border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.how-step:hover{ border-color:rgba(139,92,246,0.4); transform:translateY(-5px); box-shadow:var(--shadow-m); }
/* oversized ghost numeral bleeding off the card corner - gives the
   three steps a distinct visual identity instead of three identical
   boxes differing only by text */
.how-step::after{
  content:attr(data-n);
  position:absolute; right:-6px; bottom:-22px;
  font-family:var(--font-display);
  font-size:6.5rem;
  font-weight:700;
  color:rgba(255,255,255,0.03);
  line-height:1;
  pointer-events:none;
}

.how-num{
  display:block;
  font-family:var(--font-mono);
  font-size:0.85rem;
  background:var(--grad-primary);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:var(--space-2);
  position:relative;
}
.how-step h3{ margin-bottom:10px; }
.how-step p{ font-size:0.94rem; }

@media (max-width: 860px){
  .how-steps{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Scope (trading-only AI)
   ========================================================================== */

.scope{ padding:var(--space-6) 0; }

.scope-inner{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:var(--space-5);
  align-items:center;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-5);
}

.scope-visual{ display:flex; justify-content:center; }
.scope-ring{
  width:200px; height:200px;
  border-radius:50%;
  background:var(--bg-0);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.scope-ring::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:50%;
  background:conic-gradient(from 0deg, var(--violet), var(--pink), var(--cyan), var(--violet));
  z-index:-1;
  padding:1px;
  animation:spin 9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.scope-core{
  font-family:var(--font-mono);
  font-size:0.85rem;
  text-align:center;
  color:var(--text-0);
  padding:0 20px;
}

.scope-copy h2{ margin-bottom:var(--space-2); }
.scope-copy p{ margin-bottom:var(--space-3); }
.scope-list{ display:flex; flex-direction:column; gap:12px; }
.scope-list li{
  padding-left:22px;
  position:relative;
  font-size:0.94rem;
  color:var(--text-1);
}
.scope-list li::before{
  content:"";
  position:absolute; left:0; top:7px;
  width:9px; height:9px;
  border-radius:2px;
  background:var(--grad-primary);
}

@media (max-width: 860px){
  .scope-inner{ grid-template-columns:1fr; padding:var(--space-4); text-align:center; }
  .scope-list{ text-align:left; }
}

/* ==========================================================================
   Before / after comparison
   ========================================================================== */

.compare{ padding:var(--space-6) 0; }
.compare-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:var(--space-3);
  align-items:center;
}
.compare-card{
  border-radius:var(--radius-l);
  padding:var(--space-4);
  border:1px solid var(--line);
}
.compare-before{ background:var(--bg-2); opacity:0.75; }
.compare-after{
  background:linear-gradient(160deg, var(--bg-2), rgba(34,211,238,0.08));
  border-color:rgba(34,211,238,0.35);
  box-shadow:0 26px 55px -28px rgba(34,211,238,0.3);
}
.compare-card .label-tag{ display:inline-block; margin-bottom:var(--space-3); }
.compare-list{ display:flex; flex-direction:column; gap:12px; }
.compare-list li{ font-size:0.92rem; color:var(--text-1); padding-left:22px; position:relative; }
.compare-before .compare-list li::before{ content:"×"; position:absolute; left:0; top:0; color:var(--text-2); }
.compare-after .compare-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--cyan); }
.compare-arrow{ display:flex; justify-content:center; color:var(--violet); }
@media (max-width:860px){
  .compare-grid{ grid-template-columns:1fr; }
  .compare-arrow{ transform:rotate(90deg); }
}

/* ==========================================================================
   Features
   ========================================================================== */

.features{ padding:var(--space-6) 0; }

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:1fr;
  gap:var(--space-3);
}

.feature-card{
  position:relative;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-4);
  transition:border-color 0.25s ease, background 0.25s ease, transform 0.25s var(--ease);
}
.feature-card:hover{ border-color:rgba(236,72,153,0.35); background:var(--bg-3); transform:translateY(-3px); }
.feature-card h3{ margin-bottom:10px; font-size:1.15rem; }
.feature-card p{ font-size:0.92rem; }

/* small icon chip above the title - breaks up the "title + paragraph"
   monotony the audit flagged; each card's chip color rotates through
   the accent palette via nth-child so no two adjacent cards match */
.feature-icon{
  width:42px; height:42px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--space-3);
  background:rgba(139,92,246,0.12);
  border:1px solid rgba(139,92,246,0.3);
  color:var(--violet);
}
.feature-card:nth-child(2) .feature-icon{ background:rgba(34,211,238,0.12); border-color:rgba(34,211,238,0.3); color:var(--cyan); }
.feature-card:nth-child(3) .feature-icon{ background:rgba(236,72,153,0.12); border-color:rgba(236,72,153,0.3); color:var(--pink); }
.feature-card:nth-child(4) .feature-icon{ background:rgba(52,211,153,0.12); border-color:rgba(52,211,153,0.3); color:var(--green); }
.feature-card:nth-child(6) .feature-icon{ background:rgba(240,195,109,0.12); border-color:rgba(240,195,109,0.3); color:var(--gold); }

.feature-lg{ grid-row:span 1; }

@media (max-width: 860px){
  .feature-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing{ padding:var(--space-6) 0; }

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-3);
  align-items:stretch;
}

.price-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-4);
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform 0.25s var(--ease), border-color 0.25s ease;
}
.price-card:not(.price-featured):hover{ transform:translateY(-4px); border-color:var(--line-strong); }

.price-featured{
  background:linear-gradient(165deg, var(--bg-3), rgba(139,92,246,0.12));
  border-color:rgba(240,195,109,0.45);
  transform:translateY(-14px);
  box-shadow:0 34px 70px -25px rgba(139,92,246,0.4), 0 0 0 1px rgba(240,195,109,0.15) inset;
}
.price-featured:hover{ transform:translateY(-16px); }

.price-badge{
  position:absolute; top:-13px; left:var(--space-4);
  background:var(--grad-gold);
  color:#241605;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:999px;
  box-shadow:0 8px 20px -6px rgba(240,195,109,0.6);
}

.price-card h3{ margin-bottom:8px; }
.price-tag{ font-family:var(--font-display); font-size:1rem; color:var(--text-1); margin-bottom:12px; }
.price-tag span{ font-size:2.4rem; color:var(--text-0); font-weight:700; }
.price-desc{ font-size:0.9rem; margin-bottom:var(--space-3); min-height:44px; }

.price-list{
  display:flex; flex-direction:column; gap:11px;
  margin-bottom:var(--space-4);
  flex-grow:1;
}
.price-list li{
  font-size:0.88rem;
  color:var(--text-1);
  padding-left:22px;
  position:relative;
}
.price-list li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--cyan);
  font-size:0.8rem;
}

@media (max-width: 860px){
  .pricing-grid{ grid-template-columns:1fr; }
  .price-featured{ transform:none; }
}

/* ==========================================================================
   Shared primitives: badges, trust bar, testimonials, skeletons, empty
   states. Added for the design-system pass so every later page (landing
   rebuild, dashboard, checkout) draws from one component set instead of
   each page inventing its own card/badge treatment.
   ========================================================================== */

.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono);
  font-size:0.72rem;
  padding:4px 11px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--bg-2);
  color:var(--text-1);
}
.pill-violet{ color:var(--violet); border-color:rgba(139,92,246,0.35); background:rgba(139,92,246,0.1); }
.pill-cyan{ color:var(--cyan); border-color:rgba(34,211,238,0.35); background:rgba(34,211,238,0.1); }
.pill-gold{ color:var(--gold); border-color:rgba(240,195,109,0.4); background:rgba(240,195,109,0.1); }
.pill-green{ color:var(--green); border-color:rgba(52,211,153,0.35); background:rgba(52,211,153,0.1); }

/* --- trust / logo bar --- */
.trust-bar{
  display:flex; align-items:center; justify-content:center;
  gap:var(--space-5);
  flex-wrap:wrap;
  padding:var(--space-3) 0;
  opacity:0.75;
}
.trust-bar span{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.06em;
  color:var(--text-2);
  text-transform:uppercase;
}

/* --- testimonials --- */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-3);
}
.testimonial-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-4);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.testimonial-stars{ display:flex; gap:3px; color:var(--gold); font-size:0.85rem; }
.testimonial-card blockquote{ font-size:0.95rem; color:var(--text-0); line-height:1.55; }
.testimonial-author{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.testimonial-avatar{
  width:36px; height:36px; border-radius:50%;
  background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:0.85rem;
  color:#0B0812;
  flex-shrink:0;
}
.testimonial-name{ font-size:0.86rem; color:var(--text-0); font-weight:600; }
.testimonial-role{ font-size:0.78rem; color:var(--text-2); }
@media (max-width:860px){ .testimonial-grid{ grid-template-columns:1fr; } }

/* --- skeleton loaders --- */
.skel{
  position:relative;
  overflow:hidden;
  background:var(--bg-2);
  border-radius:var(--radius-s);
}
.skel::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation:skelSweep 1.4s ease infinite;
}
@keyframes skelSweep{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }

/* --- empty state --- */
.empty-state{
  text-align:center;
  padding:var(--space-5) var(--space-3);
  color:var(--text-2);
}
.empty-state-icon{
  width:52px; height:52px; margin:0 auto var(--space-3);
  border-radius:14px;
  background:var(--bg-2);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-2);
}
.empty-state h3{ color:var(--text-0); font-size:1.1rem; margin-bottom:6px; }
.empty-state p{ font-size:0.9rem; max-width:360px; margin:0 auto var(--space-3); }

/* --- marketplace category rail (Task: prompt/template marketplace) --- */
.category-rail{
  display:flex; gap:10px; overflow-x:auto;
  padding-bottom:6px;
  margin-bottom:var(--space-3);
  scrollbar-width:none;
}
.category-rail::-webkit-scrollbar{ display:none; }
.category-chip{
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono);
  font-size:0.76rem;
  letter-spacing:0.05em;
  padding:0.55rem 1rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--bg-2);
  color:var(--text-1);
  min-height:40px;
  transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.category-chip:hover{ color:var(--text-0); border-color:var(--line-strong); }
.category-chip.active{
  background:var(--grad-soft);
  border-color:rgba(139,92,246,0.4);
  color:var(--text-0);
}
.category-chip .dot{ width:6px; height:6px; border-radius:50%; }
.category-chip[data-cat="trending"] .dot{ background:var(--pink); }
.category-chip[data-cat="smart-money"] .dot{ background:var(--gold); }
.category-chip[data-cat="scalping"] .dot{ background:var(--cyan); }
.category-chip[data-cat="reversals"] .dot{ background:var(--violet); }
.category-chip[data-cat="professional"] .dot{ background:var(--green); }

/* --- checkout / crypto payment (Task: crypto checkout flow) --- */
.pay-network-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
  gap:10px;
}
.pay-option{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:0.9rem 0.6rem;
  border-radius:var(--radius-m);
  border:1px solid var(--line);
  background:var(--bg-2);
  color:var(--text-1);
  font-size:0.82rem;
  min-height:44px;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.pay-option:hover{ border-color:var(--line-strong); }
.pay-option.selected{
  border-color:rgba(34,211,238,0.5);
  background:rgba(34,211,238,0.08);
  color:var(--text-0);
}
.pay-address-box{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:0.85rem 1rem;
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--text-0);
  word-break:break-all;
}
.pay-qr{
  width:150px; height:150px;
  border-radius:var(--radius-m);
  background:#fff;
  padding:8px;
  margin:0 auto;
}
.pay-summary-row{ display:flex; justify-content:space-between; padding:0.6rem 0; border-bottom:1px solid var(--line-soft); font-size:0.9rem; }
.pay-summary-row:last-child{ border-bottom:none; }
.pay-summary-row dt{ color:var(--text-2); }
.pay-summary-row dd{ color:var(--text-0); font-family:var(--font-mono); }

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials{ padding:var(--space-6) 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq{ padding:var(--space-6) 0; }

.faq-list{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }

.faq-item{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
}

.faq-q{
  width:100%;
  background:none; border:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.3rem;
  color:var(--text-0);
  font-family:var(--font-display);
  font-size:1rem;
  text-align:left;
}
.faq-icon{
  font-family:var(--font-mono);
  color:var(--cyan);
  font-size:1.1rem;
  transition:transform 0.2s ease;
}
.faq-q[aria-expanded="true"] .faq-icon{ transform:rotate(45deg); }

.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.25s ease;
  padding:0 1.3rem;
}
.faq-a p{ font-size:0.92rem; padding-bottom:1.1rem; }
.faq-a a{ color:var(--cyan); text-decoration:underline; }

/* ==========================================================================
   Waitlist CTA
   ========================================================================== */

.waitlist{ padding:var(--space-6) 0; }
.waitlist-inner{
  max-width:640px;
  margin:0 auto;
  text-align:center;
  background:var(--grad-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-5);
}
.waitlist-inner h2{ margin:var(--space-2) 0; }
.waitlist-inner > p{ margin-bottom:var(--space-3); }

.waitlist-form{
  display:flex; gap:10px;
  max-width:420px;
  margin:0 auto;
}
.waitlist-form input{
  flex:1;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:999px;
  padding:0.85rem 1.2rem;
  color:var(--text-0);
  font-size:0.95rem;
}
.waitlist-success{
  margin-top:var(--space-2);
  font-size:0.9rem;
  color:var(--green);
  min-height:1.2em;
}

@media (max-width: 640px){
  .waitlist-form{ flex-direction:column; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer{
  border-top:1px solid var(--line-soft);
  padding:var(--space-5) 0 var(--space-3);
  margin-top:var(--space-5);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:var(--space-4);
  margin-bottom:var(--space-4);
}
.footer-brand p{ margin-top:var(--space-2); font-size:0.88rem; max-width:280px; }
.footer-col h4{ font-size:0.85rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--space-2); }
.footer-col a{ display:block; font-size:0.9rem; color:var(--text-1); margin-bottom:10px; }
.footer-col a:hover{ color:var(--text-0); }

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:var(--space-3);
  padding-top:var(--space-3);
  border-top:1px solid var(--line-soft);
  font-size:0.78rem;
  color:var(--text-2);
}
.footer-risk{ max-width:480px; text-align:right; }

@media (max-width: 700px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
  .footer-risk{ text-align:left; }
}

/* ==========================================================================
   Modals (signup gate + Telegram prompt)
   ========================================================================== */

.modal-overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-3);
  background:rgba(11,8,18,0.72);
  backdrop-filter:blur(6px);
  animation:modalFadeIn 0.18s ease;
  /* Without this, a modal taller than the visible viewport (e.g. the
     iOS keyboard open on a password-entry modal shrinking the visual
     viewport) has no escape - the card just gets cut off with no way to
     scroll to its own close/confirm buttons. overflow-y here lets the
     whole centered layout scroll as a last resort. */
  overflow-y:auto;
}
.modal-overlay[hidden]{ display:none; }

@keyframes modalFadeIn{ from{ opacity:0; } to{ opacity:1; } }

.modal-card{
  position:relative;
  width:100%; max-width:420px;
  max-height:calc(100vh - 2 * var(--space-3));
  overflow-y:auto;
  background:linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-4);
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.7);
  animation:modalPopIn 0.22s ease;
}
@keyframes modalPopIn{
  from{ opacity:0; transform:translateY(10px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.modal-close{
  position:absolute; top:6px; right:6px;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--text-1);
  font-size:1.2rem;
  line-height:1;
}
.modal-close:hover{ color:var(--text-0); border-color:var(--cyan); }

.modal-card .eyebrow{ margin-bottom:var(--space-2); }
.modal-card h3{ margin-bottom:8px; font-size:1.3rem; }
.modal-sub{ font-size:0.92rem; margin-bottom:var(--space-3); }

#signupModalForm{ display:flex; flex-direction:column; gap:10px; }
#signupModalForm input{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:999px;
  padding:0.85rem 1.2rem;
  color:var(--text-0);
  font-size:0.95rem;
}

.modal-icon{
  width:52px; height:52px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(34,211,238,0.18), rgba(139,92,246,0.14));
  border:1px solid rgba(34,211,238,0.35);
  color:var(--cyan);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--space-3);
}

.modal-card-telegram .btn-block + .btn-block{ margin-top:10px; }
.modal-dismiss{ font-size:0.88rem; padding:0.7rem 1.6rem; }

/* ==========================================================================
   Legal pages
   ========================================================================== */

.legal-main{ padding:var(--space-5) 0 var(--space-6); }
.legal-header{ max-width:720px; margin:0 auto var(--space-5); text-align:center; }
.legal-header h1{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom:10px; }
.legal-updated{ font-family:var(--font-mono); font-size:0.8rem; color:var(--text-2); }

.legal-callout{
  max-width:760px;
  margin:0 auto var(--space-5);
  background:rgba(248,113,113,0.08);
  border:1px solid rgba(248,113,113,0.35);
  border-radius:var(--radius-m);
  padding:var(--space-3);
}
.legal-callout p{ font-size:0.92rem; color:var(--text-0); }
.legal-callout strong{ color:var(--red); }

.legal-body{
  max-width:760px;
  margin:0 auto;
}
.legal-body h2{ font-size:1.3rem; margin-top:var(--space-4); margin-bottom:10px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ font-size:0.95rem; margin-bottom:12px; }
.legal-body ul{ margin:0 0 12px 0; padding-left:0; display:flex; flex-direction:column; gap:8px; }
.legal-body li{ font-size:0.95rem; color:var(--text-1); padding-left:20px; position:relative; }
.legal-body li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%;
  background:var(--grad-primary);
}
.legal-body a{ color:var(--cyan); text-decoration:underline; }