/* Generated from landing_preview/index.html – iter22A new hero (chart-as-background) */
  /* ─────────────────────────────────────────────────────────────────────
     Tokens — kept compatible with the existing landing.css palette so the
     new hero can drop into the live page without theme drift.
     ───────────────────────────────────────────────────────────────────── */
  :root {
    --lp-bg: #0a0c12;
    --lp-bg-2: #0f1320;
    --lp-surface: #14182a;
    --lp-border: #232838;
    --lp-text: #e6ebf5;
    --lp-text-muted: #8a96ac;
    --lp-text-dim: #5b6680;
    --lp-accent: #4fd1a5;
    --lp-accent-glow: rgba(79,209,165,0.35);
    --lp-green: #4fd1a5;
    --lp-red: #ff6b8a;
    --lp-amber: #ffce5a;
    --lp-purple: #c178ff;
  }


  /* ─── Hero ───────────────────────────────────────────────────────── */
  .lp-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 28px 96px;
    min-height: auto; /* iter22A: was calc(100vh - 60px); let content set height to avoid empty gap below */
    display: flex;
    align-items: center;
  }
  /* Ambient background: radial accent glow + faint grid */
  .lp-hero::before {
    content: '';
    position: absolute;
    inset: -200px;
    background:
      radial-gradient(ellipse 720px 480px at 25% 30%, rgba(79,209,165,0.16), transparent 60%),
      radial-gradient(ellipse 640px 480px at 80% 80%, rgba(95,168,255,0.10), transparent 60%);
    pointer-events: none;
    z-index: 0;
  }
  .lp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
  }

  .lp-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
  }

  /* Left column ─────────────────────────────────────── */
  .lp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--lp-accent);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    margin-bottom: 22px;
    padding: 6px 12px;
    border: 1px solid rgba(79,209,165,0.22);
    border-radius: 999px;
    background: rgba(79,209,165,0.04);
  }
  .lp-hero-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lp-accent); box-shadow: 0 0 6px var(--lp-accent); }

  .lp-hero h1 {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(36px, 5.2vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 800;
    color: #fff;
    margin-bottom: 22px;
  }
  .lp-hero h1 .accent {
    color: var(--lp-accent);
    background: linear-gradient(120deg, #4fd1a5 0%, #6ee7c0 50%, #4fd1a5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .lp-hero-sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--lp-text-muted);
    max-width: 540px;
    margin-bottom: 28px;
  }

  /* Promise bullets */
  .lp-hero-promises {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
    max-width: 520px;
  }
  .lp-promise {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    color: var(--lp-text);
    line-height: 1.45;
  }
  .lp-promise-check {
    flex: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(79,209,165,0.14);
    border: 1px solid rgba(79,209,165,0.35);
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
  }
  .lp-promise-check svg { width: 11px; height: 11px; stroke: var(--lp-accent); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .lp-promise b { color: #fff; font-weight: 650; }
  .lp-promise span { color: var(--lp-text-muted); }

  /* CTAs */
  .lp-hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 36px; }
  .lp-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 22px;
    border-radius: 10px;
    font-weight: 600; font-size: 14.5px;
    text-decoration: none;
    transition: transform 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .lp-btn-primary {
    background: var(--lp-accent);
    color: #08110d;
    box-shadow: 0 6px 24px rgba(79,209,165,0.3), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .lp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(79,209,165,0.42); }
  .lp-btn-primary svg { stroke: #08110d; }
  .lp-btn-secondary {
    background: transparent;
    color: var(--lp-text);
    border-color: rgba(255,255,255,0.18);
  }
  .lp-btn-secondary:hover { border-color: rgba(79,209,165,0.5); color: var(--lp-accent); }
  .lp-btn svg { width: 14px; height: 14px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

  /* Trust strip */
  .lp-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding-top: 28px;
    border-top: 1px solid var(--lp-border);
    max-width: 540px;
  }
  .lp-trust-item .v {
    font-family: 'Inter Tight', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .lp-trust-item .l {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--lp-text-dim);
    margin-top: 6px;
    font-weight: 600;
  }
  .lp-trust-item .v .unit { color: var(--lp-accent); font-size: 14px; font-weight: 700; margin-left: 2px; }

  .lp-risk {
    margin-top: 28px;
    font-size: 11.5px;
    color: var(--lp-text-dim);
    line-height: 1.5;
    max-width: 540px;
  }
  .lp-risk a { color: var(--lp-text-muted); }

  /* ───── Right column — carousel  ─────────────────────────────────── */
  .lp-hero-visual {
    position: relative;
    height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Carousel stage (scaled down version of standalone carousel) */
  .scene { width: 100%; height: 100%; perspective: 1500px; display: flex; align-items: center; justify-content: center; position: relative; }
  .carousel { width: 240px; height: 320px; position: relative; transform-style: preserve-3d; }
  .card {
    position: absolute; width: 240px; height: 320px; border-radius: 22px; overflow: hidden;
    border: 1px solid rgba(79,209,165,0.08); box-shadow: 0 12px 48px rgba(0,0,0,0.65);
    background: #0d1320; cursor: pointer;
    transition:
      transform 0.85s cubic-bezier(0.25,0.46,0.45,0.94),
      opacity 0.85s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .card.active-card { border-color: rgba(79,209,165,0.4); box-shadow: 0 16px 64px rgba(79,209,165,0.22), 0 0 0 1px rgba(79,209,165,0.15); }
  .card-visual { width: 100%; height: 56%; position: relative; overflow: hidden; }
  .card-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(13,19,32,0.85) 100%); pointer-events: none; }
  .card-icon { position: absolute; top: 12px; left: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 9px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); }
  .card-icon svg { width: 16px; height: 16px; }
  .card-pill { position: absolute; top: 14px; right: 12px; z-index: 2; font-size: 8.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; padding: 4px 8px; border-radius: 999px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.5); display: flex; align-items: center; gap: 5px; }
  .card-pill .pulse { width: 5px; height: 5px; border-radius: 50%; background: #4fd1a5; box-shadow: 0 0 6px #4fd1a5; animation: pulse 1.6s ease-in-out infinite; }

  .bg-overview { background: linear-gradient(135deg, #0a1a32 0%, #133a6e 55%, #0b2548 100%); }
  .bg-sectors  { background: linear-gradient(135deg, #0a2010 0%, #1d4a26 55%, #0e2e16 100%); }
  .bg-macro    { background: linear-gradient(135deg, #2a160a 0%, #5a3115 55%, #341a0a 100%); }
  .bg-sent     { background: linear-gradient(135deg, #1b0a2c 0%, #3c1a5f 55%, #200c34 100%); }
  .bg-ai       { background: linear-gradient(135deg, #061d27 0%, #0e3a4e 55%, #07252e 100%); }
  .bg-stock    { background: linear-gradient(135deg, #0c1830 0%, #1a2a4a 55%, #0e1a30 100%); }
  .bg-watch    { background: linear-gradient(135deg, #1a0a26 0%, #3a1857 55%, #1f0c30 100%); }
  .bg-port     { background: linear-gradient(135deg, #0a1f26 0%, #14515f 55%, #0c2a32 100%); }
  .bg-conv     { background: linear-gradient(135deg, #2a0a1f 0%, #5c1a4f 55%, #340e26 100%); }

  .mini-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
  .card-body { padding: 14px 16px 16px; height: 44%; display: flex; flex-direction: column; justify-content: space-between; }
  .card-tag { font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #4fd1a5; margin-bottom: 5px; }
  .card-title { font-size: 13.5px; font-weight: 650; color: #dde4f0; line-height: 1.35; }
  .card-desc { font-size: 11px; color: #828c9f; line-height: 1.4; margin-top: 5px; }
  .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
  .card-link { font-size: 10px; color: #4fd1a5; text-decoration: none; letter-spacing: 0.06em; opacity: 0.85; }
  .card-arrow { width: 26px; height: 26px; border-radius: 50%; background: rgba(79,209,165,0.12); display: flex; align-items: center; justify-content: center; }
  .card-arrow svg { width: 12px; height: 12px; stroke: #4fd1a5; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

  /* Visual-area decorative content */
  .ticker-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font-size: 10px; font-family: 'JetBrains Mono', monospace; border-bottom: 1px solid rgba(255,255,255,0.04); }
  .ticker-row .sym { color: #dde4f0; font-weight: 600; letter-spacing: 0.04em; }
  .ticker-row .val { color: #b0bacc; }
  .ticker-row .chg.up { color: #4fd1a5; }
  .ticker-row .chg.dn { color: #ff6b8a; }
  .heatmap { position: absolute; inset: 36px 12px auto 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; z-index: 1; }
  .heat-cell { aspect-ratio: 1; border-radius: 4px; font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; letter-spacing: 0.04em; }
  .brief-text { position: absolute; inset: 50px 14px 14px 14px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
  .brief-line { height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(79,209,165,0.5), rgba(79,209,165,0.1)); }
  .brief-line:nth-child(2) { width: 88%; }
  .brief-line:nth-child(3) { width: 72%; background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04)); }
  .brief-line:nth-child(4) { width: 84%; background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04)); }
  .brief-line:nth-child(5) { width: 66%; background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04)); }
  .stock-panel { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: rgba(8,11,18,0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
  .stock-row { display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; font-family: 'JetBrains Mono', monospace; }
  .stock-row .k { color: rgba(255,255,255,0.58); text-transform: uppercase; letter-spacing: 0.06em; font-size: 8px; }
  .stock-row .v { color: #fff; font-weight: 600; }
  .stock-row .v.up { color: #4fd1a5; }
  .watch-list { position: absolute; inset: 50px 0 10px 0; z-index: 1; display: flex; flex-direction: column; }
  .conv-list { position: absolute; inset: 48px 14px 14px 14px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
  .conv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; font-family: 'JetBrains Mono', monospace; }
  .conv-row .t { font-size: 10px; font-weight: 700; color: #fff; }
  .conv-row .s { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.06em; }
  .conv-row .s.buy { background: rgba(79,209,165,0.2); color: #4fd1a5; border: 1px solid rgba(79,209,165,0.4); }
  .conv-row .s.hold { background: rgba(232,179,58,0.18); color: #ffce5a; border: 1px solid rgba(232,179,58,0.4); }
  .conv-row .s.sell { background: rgba(255,107,138,0.18); color: #ff6b8a; border: 1px solid rgba(255,107,138,0.4); }
  .conv-row .sc { font-size: 9.5px; color: rgba(255,255,255,0.7); }

  /* Controls */
  .controls { position: absolute; bottom: -8px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 18px; }
  .ctrl { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(79,209,165,0.22); background: rgba(79,209,165,0.05); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #4fd1a5; transition: background 0.2s, border-color 0.2s, transform 0.15s; }
  .ctrl:hover { background: rgba(79,209,165,0.14); border-color: rgba(79,209,165,0.5); }
  .ctrl svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .dots { display: flex; gap: 5px; align-items: center; }
  .dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(79,209,165,0.22); cursor: pointer; transition: background 0.3s, transform 0.3s; }
  .dot.active { background: #4fd1a5; transform: scale(1.5); }
  .card-label { position: absolute; bottom: -48px; left: 0; right: 0; text-align: center; font-size: 12px; color: #4fd1a5; letter-spacing: 0.06em; }

  /* ─── Responsive: collapse to single column ─────────────────────── */
  @media (max-width: 980px) {
    .lp-hero { padding: 40px 20px 60px; }
    .lp-hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .lp-hero-visual { height: 480px; order: 2; }
    .lp-trust { grid-template-columns: repeat(2, 1fr); }
  }

  /* ─── Section that follows hero (kept the same as live page) ────── */