/* ============================================================
   Algrythm FX — landing page
   Tokens: near-black base + mint/violet dual accent (mint continues the
   app's own brand color; violet is new here, giving the marketing site
   a distinct two-tone signature rather than a single generic accent).
   Type: Space Grotesk (display) + Inter (body) + JetBrains Mono (data).
   ============================================================ */

:root {
  --bg: #060708;
  --bg-2: #0a0c10;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-raised: rgba(255, 255, 255, 0.065);
  --glass-border: rgba(255, 255, 255, 0.09);

  --fg: #f3f5f9;
  --fg-secondary: #b7bccb;
  --muted: #7d8398;

  --mint: #00e68a;
  --mint-dim: rgba(0, 230, 138, 0.13);
  --violet: #7c5cff;
  --violet-dim: rgba(124, 92, 255, 0.14);
  --gold: #fbbf24;

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

  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 220ms;

  --content-w: 1180px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--mint-dim); color: var(--mint); }

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--mint); color: #04140d;
  padding: 12px 20px; z-index: 200; font-weight: 600; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.icon { width: 20px; height: 20px; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 30px; height: 30px; }

/* --- Background mesh: fixed behind everything, gives glass surfaces
   something with real color/depth to blur. --- */
#app-bg {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 70%);
}
#app-bg::before, #app-bg::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(110px);
}
#app-bg::before { width: 50vw; height: 50vw; top: -15%; left: 8%; background: rgba(0, 230, 138, 0.09); }
#app-bg::after { width: 46vw; height: 46vw; top: 8%; right: -12%; background: rgba(124, 92, 255, 0.09); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .chart-card, .strategy-card, .feature, .pricing-col, .trust-item { background: var(--bg-2) !important; }
}

/* --- Typography --- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.eyebrow {
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--mint);
  margin-bottom: 14px; display: block;
}
.section-title { font-size: clamp(1.75rem, 3.2vw, 2.75rem); margin-bottom: 16px; max-width: 700px; }
.section-sub { font-size: 1.0625rem; color: var(--fg-secondary); max-width: 620px; margin-bottom: 48px; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-full);
  font-weight: 600; font-size: 0.9375rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), background var(--dur), border-color var(--dur);
  white-space: nowrap;
}
.btn-lg { padding: 15px 28px; font-size: 1rem; }
.btn-primary {
  background: linear-gradient(135deg, var(--mint) 0%, #00c97a 100%);
  color: #04140d;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(0, 230, 138, 0.45); }
.btn-primary:active { transform: translateY(0) scale(0.97); }
.btn-ghost {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--fg);
}
.btn-ghost:hover { background: var(--glass-raised); border-color: rgba(255, 255, 255, 0.16); }
.btn-ghost:active { transform: scale(0.97); }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6, 7, 8, 0.6);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--glass-border);
}
.nav-inner {
  max-width: var(--content-w); margin: 0 auto;
  padding: 16px 24px;
  display: flex; align-items: center; gap: 32px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--mint), var(--violet));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #04140d; font-size: 1.05rem;
}
.brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
.brand-fx { color: var(--mint); margin-left: 2px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 0.9375rem; color: var(--fg-secondary); transition: color var(--dur); }
.nav-links a:hover { color: var(--fg); }
.nav-cta { display: flex; gap: 10px; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 34px; height: 34px; align-items: center; justify-content: center; }
.nav-toggle span { width: 20px; height: 2px; background: var(--fg); border-radius: 2px; transition: transform var(--dur), opacity var(--dur); }
.nav-mobile {
  display: none; flex-direction: column; gap: 4px;
  padding: 8px 24px 20px;
  border-top: 1px solid var(--glass-border);
}
.nav-mobile a { padding: 12px 4px; font-size: 0.9375rem; color: var(--fg-secondary); }
.nav-mobile .btn { margin-top: 8px; width: 100%; }

@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-mobile.is-open { display: flex; }
}

/* ============ HERO ============ */
.hero { padding: 72px 24px 40px; }
.hero-inner {
  max-width: var(--content-w); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 24px;
}
.hero-sub { font-size: 1.125rem; color: var(--fg-secondary); max-width: 520px; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-trust { display: flex; gap: 24px; flex-wrap: wrap; }
.hero-trust span { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--muted); }
.hero-trust .icon { color: var(--mint); }

.hero-visual { position: relative; }
.chart-card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-radius: var(--radius-lg);
  padding: 24px 24px 60px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}
.chart-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.chart-pair { font-family: var(--font-mono); font-weight: 600; font-size: 0.9375rem; }
.chart-live { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--mint); font-family: var(--font-mono); }
.chart-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.chart-svg { width: 100%; height: 200px; overflow: visible; }
#chartLine {
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: draw-line 2.2s forwards 0.3s;
  animation-timing-function: var(--ease);
}
#chartFill { opacity: 0; animation: fade-in 1s ease forwards 1.6s; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #chartLine { stroke-dashoffset: 0; animation: none; }
  #chartFill { opacity: 1; animation: none; }
}

.chart-floaters { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.chip {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-raised);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-full);
  padding: 8px 14px 8px 10px;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  /* A custom property (var(--ease)) as an unlabeled token inside the
     `animation` SHORTHAND is a known cross-browser parsing hazard — the
     parser has to identify each token's type at parse time, before var()
     substitution happens, and some engines silently invalidate the whole
     declaration rather than guess. Confirmed this actually breaking
     during testing, not just a theoretical risk. Fix: keep var(--ease)
     out of the shorthand entirely, set it via the longhand
     animation-timing-function property instead — longhand properties
     don't have this ambiguity. */
  animation: float 5s infinite, chip-in 0.6s forwards;
  animation-timing-function: ease-in-out, var(--ease);
}
.chip .icon { color: var(--mint); }
.chip b.up { color: var(--mint); font-weight: 600; }
.chip-a { top: 22%; left: -4%; animation-delay: 2.0s, 2.0s; }
.chip-b { top: 52%; right: -8%; animation-delay: 2.3s, 2.3s; }
.chip-c { bottom: 4%; left: 4%; animation-delay: 2.6s, 2.6s; }
@keyframes chip-in { to { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .chip { opacity: 1; animation: none; }
}
@media (max-width: 640px) {
  .chip-a, .chip-b, .chip-c { position: static; margin: 8px 6px 0 0; display: inline-flex; }
  .chart-floaters { position: static; display: flex; flex-wrap: wrap; padding-top: 16px; }
  .chart-card { padding-bottom: 24px; }
}

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
}

/* ============ TRUST STRIP ============ */
.trust-strip { padding: 8px 24px 64px; }
.trust-inner {
  max-width: var(--content-w); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.trust-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-full);
  padding: 10px 18px;
  font-size: 0.875rem; color: var(--fg-secondary);
}
.trust-item .icon { color: var(--mint); width: 18px; height: 18px; }

/* ============ SECTIONS ============ */
.section { padding: 88px 24px; }
.section-alt { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015) 15%, rgba(255,255,255,0.015) 85%, transparent); }
.section-inner { max-width: var(--content-w); margin: 0 auto; }

/* --- Strategies --- */
.strategy-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.strategy-card {
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur);
}
.strategy-card:hover {
  transform: translateY(-4px);
  border-color: hsla(var(--accent-hue, 152), 80%, 60%, 0.35);
  box-shadow: 0 20px 40px -20px hsla(var(--accent-hue, 152), 80%, 55%, 0.25);
}
.strategy-icon {
  color: hsl(var(--accent-hue, 152) 80% 60%);
  margin-bottom: 18px;
}
.strategy-card h3 { font-size: 1.125rem; margin-bottom: 10px; }
.strategy-card p { font-size: 0.9375rem; color: var(--fg-secondary); }

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

/* --- Steps --- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { position: relative; padding-top: 8px; }
.step-num {
  display: block; font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600;
  color: var(--muted); margin-bottom: 16px;
}
.step h3 { font-size: 1.0625rem; margin-bottom: 10px; }
.step p { font-size: 0.9375rem; color: var(--fg-secondary); }
.step:not(:last-child)::after {
  content: ''; position: absolute; top: 14px; left: calc(100% + 12px); width: calc(24px - 12px);
  border-top: 1px dashed var(--glass-border);
  display: none;
}
@media (min-width: 861px) { .step:not(:last-child)::after { display: block; } }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 36px; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* --- Feature grid --- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature {
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  padding: 30px;
  transition: border-color var(--dur), transform var(--dur) var(--ease);
}
.feature:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.16); }
.feature .icon { color: var(--violet); margin-bottom: 16px; }
.feature h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.feature p { font-size: 0.9375rem; color: var(--fg-secondary); }
@media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* --- Pricing teaser --- */
.pricing-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.pricing-col {
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
}
.pricing-col h3 { font-size: 1.125rem; margin-bottom: 12px; }
.pricing-col p { font-size: 0.9375rem; color: var(--fg-secondary); }
.pricing-col-featured {
  border-color: rgba(0, 230, 138, 0.35);
  background: linear-gradient(160deg, var(--mint-dim), var(--glass) 60%);
}
.pricing-badge {
  position: absolute; top: -12px; left: 28px;
  background: var(--mint); color: #04140d;
  font-size: 0.75rem; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-full);
}
.pricing-cta { text-align: center; }
@media (max-width: 860px) { .pricing-compare { grid-template-columns: 1fr; } }

/* ============ FINAL CTA ============ */
.final-cta { padding: 100px 24px; }
.final-cta-inner {
  max-width: 780px; margin: 0 auto; text-align: center;
  background: linear-gradient(160deg, var(--mint-dim), var(--violet-dim));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 32px;
  padding: 64px 40px;
}
.final-cta h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 32px; }

/* ============ FOOTER ============ */
.footer { padding: 40px 24px 32px; border-top: 1px solid var(--glass-border); }
.footer-inner {
  max-width: var(--content-w); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { font-size: 0.875rem; color: var(--fg-secondary); transition: color var(--dur); }
.footer-links a:hover { color: var(--fg); }
.footer-copy { width: 100%; font-size: 0.8125rem; color: var(--muted); margin-top: 8px; }

/* ============ SCROLL REVEAL ============ */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}