/* InvestorsAlgo — coming soon page */
:root {
  --background: #0b0b0b;
  --foreground: #f1f5f3;
  --primary: #3df2a5;
  --primary-foreground: #04150d;
  --muted: #181a19;
  --muted-foreground: #8b9791;
  --border: #272b29;
  --red: #ff5c6c;
  --pulse-shadow: 0 0 8px rgba(61, 242, 165, .6);
  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; border-color: var(--border); }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--primary); color: var(--background); }

.launch-page { min-height: 100svh; overflow: hidden; position: relative; }

/* Ticker */
.ticker { border-bottom: 1px solid var(--border); background: var(--muted); overflow: hidden; white-space: nowrap; height: 34px; display: flex; align-items: center; }
.ticker-track { display: inline-flex; gap: 0; animation: scroll 38s linear infinite; will-change: transform; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.tick { display: inline-flex; align-items: center; gap: 9px; padding: 0 26px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; border-right: 1px solid var(--border); }
.tick .name { color: var(--muted-foreground); }
.tick .val { color: var(--foreground); }
.tick .chg.up { color: var(--primary); }
.tick .chg.down { color: var(--red); }

/* Header */
.page-header { max-width: 1440px; margin: auto; height: 92px; padding: 0 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-icon { width: 34px; height: 38px; color: var(--primary); }
.brand-name { font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: 1px; }
.brand-name span { display: block; color: var(--muted-foreground); font-size: 10px; font-weight: 500; letter-spacing: 2px; }
.header-right { display: flex; gap: 10px; align-items: center; }
.status, .market-status { display: flex; gap: 9px; align-items: center; border: 1px solid var(--border); padding: 9px 13px; border-radius: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); }
.market-status .ist { color: var(--foreground); }
.market-status.closed .status-dot { background: var(--red); box-shadow: 0 0 8px rgba(255, 92, 108, .6); animation: none; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); box-shadow: var(--pulse-shadow); animation: blink 2s infinite; flex: none; }

/* Hero */
.launch-main { text-align: center; position: relative; max-width: 1440px; margin: auto; padding-top: 30px; }
.eyebrow { display: flex; justify-content: center; align-items: center; gap: 12px; font-family: var(--font-mono); text-transform: uppercase; color: var(--primary); font-size: 10px; letter-spacing: 2.5px; }
.eyebrow::before, .eyebrow::after { content: ''; width: 25px; height: 1px; background: var(--primary); opacity: .45; }
h1 { margin: 22px 16px 0; font-size: 66px; font-weight: 500; line-height: 1.1; letter-spacing: 0; }
h1 span { color: var(--primary); }
.subtitle { margin: 20px 20px 0; color: var(--muted-foreground); font-size: 14px; line-height: 1.8; }

.heart-stage { height: 365px; position: relative; margin-top: 0; }
.heart-image { position: absolute; height: 420px; width: 630px; max-width: none; object-fit: contain; left: 50%; top: -25px; transform: translateX(-50%); animation: heartbeat 3.2s infinite; }
.pulse-grid { position: absolute; inset: 38px 7% 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 54px 54px; opacity: .13; -webkit-mask-image: radial-gradient(ellipse, #000, transparent 72%); mask-image: radial-gradient(ellipse, #000, transparent 72%); }
.market-pulse { position: absolute; width: 100%; height: 170px; left: 0; top: 98px; overflow: visible; }
.pulse-base { fill: none; stroke: var(--primary); stroke-width: 1; opacity: .12; }
.pulse-line { fill: none; stroke: var(--primary); stroke-width: 1.6; filter: drop-shadow(var(--pulse-shadow)); stroke-dasharray: 1450; animation: trace 3.2s linear infinite; }
.stage-note { position: absolute; top: 122px; color: var(--muted-foreground); text-align: left; font-family: var(--font-mono); font-size: 9px; line-height: 2; letter-spacing: 1px; }
.stage-note b { display: block; color: var(--primary); font-weight: 400; font-size: 10px; }
.stage-note.left { left: 8%; }
.stage-note.right { right: 8%; text-align: right; top: 208px; }

.coming-block { position: relative; padding-bottom: 50px; }
.coming-label { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--primary); font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; }
.coming-block h2 { margin: 14px 0 12px; font-size: 32px; font-weight: 500; }
.coming-block p { margin: 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.8; }

.features { margin: 0 64px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; justify-content: center; padding: 23px 0; }
.feature { display: flex; align-items: center; justify-content: center; gap: 11px; width: 240px; font-size: 10px; color: var(--muted-foreground); letter-spacing: 1.5px; font-family: var(--font-mono); }
.feature + .feature { border-left: 1px solid var(--border); }
.feature svg { width: 15px; height: 15px; color: var(--primary); }

.page-footer { max-width: 1440px; margin: auto; padding: 25px 64px; display: flex; justify-content: space-between; gap: 20px; font-size: 10px; color: var(--muted-foreground); line-height: 1.6; }
.footer-right { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.footer-right svg { width: 11px; height: 11px; color: var(--primary); }

/* Animations */
@keyframes trace { 0% { stroke-dashoffset: 2900; opacity: .15; } 30% { opacity: .85; } 90% { opacity: .85; } 100% { stroke-dashoffset: 0; opacity: .15; } }
@keyframes heartbeat { 0%, 24%, 44%, 100% { transform: translateX(-50%) scale(1); } 30% { transform: translateX(-50%) scale(1.035); } 37% { transform: translateX(-50%) scale(1.012); } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes scroll { to { transform: translateX(-50%); } }

@media (min-width: 1500px) {
  .launch-main { padding-top: 55px; }
  .heart-stage { height: 410px; }
  .heart-image { height: 460px; width: 690px; }
}
@media (max-width: 900px) {
  .page-header { padding: 0 28px; }
  .market-status { display: none; }
}
@media (max-width: 640px) {
  .page-header { height: 80px; padding: 0 22px; }
  .brand-name { font-size: 11px; }
  .brand-icon { width: 29px; }
  .status { font-size: 8px; gap: 6px; padding: 8px; }
  .launch-main { padding-top: 34px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
  h1 { font-size: 42px; line-height: 1.15; margin-top: 23px; }
  .subtitle { font-size: 12px; max-width: 280px; margin: 18px auto 0; }
  .heart-stage { height: 325px; margin-top: 10px; }
  .heart-image { height: 360px; width: 540px; top: -15px; }
  .market-pulse { top: 82px; height: 140px; width: 160%; left: -30%; }
  .stage-note { font-size: 7px; top: 94px; }
  .stage-note b { font-size: 8px; }
  .stage-note.left { left: 6%; }
  .stage-note.right { right: 6%; top: 234px; }
  .coming-block { padding-bottom: 34px; }
  .coming-block h2 { font-size: 29px; }
  .coming-block p { font-size: 11px; padding: 0 15px; }
  .features { margin: 0 22px; padding: 20px 0; }
  .feature { gap: 7px; font-size: 7px; letter-spacing: .6px; width: auto; flex: 1; }
  .feature svg { width: 12px; height: 12px; }
  .page-footer { padding: 22px; font-size: 8px; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }
