/* ============================================================================
   Rack Invest — design system
   Dark navy canvas + spring-green accent (sampled from brand_assets/dash.jpg).
   Display: Space Grotesk · Body: Inter · Data/numbers: JetBrains Mono
   ========================================================================== */

:root {
  /* Surfaces (base → elevated → floating) */
  --ink:      #04070d;
  --navy-950: #050b16;
  --navy-900: #0a1322;
  --navy-850: #0d1626;
  --navy-800: #0f1a2e;
  --navy-750: #15233b;
  --line:     #1d2c47;
  --line-soft:#16223a;
  /* Data accent — charts and gradients only; green stays the action color */
  --blue:     #57a1ff;

  /* Accent */
  --green:        #34e07f;
  --green-bright: #5cf0a0;
  --green-deep:   #19a35f;
  --green-ink:    #04140a;   /* text on green */
  --green-glow:   rgba(52, 224, 127, 0.16);

  /* Text */
  --text:   #e9eef6;
  --text-2: #aab4c8;
  --muted:  #7c8aa3;
  --faint:  #56627a;

  /* Semantic */
  --red:    #ff6b6b;
  --amber:  #ffc24b;

  /* Type */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Radius + shadow */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow:    0 18px 50px -24px rgba(0,0,0,0.7);
  --shadow-green: 0 20px 60px -22px var(--green-glow);

  /* Spacing scale */
  --gap: 16px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--navy-950);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Faint grain overlay for depth (kept very subtle). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

p { margin: 0; }

::selection { background: var(--green); color: var(--green-ink); }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--green);
  opacity: 0.7;
}

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 13px 22px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--text);
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  --btn-bg: linear-gradient(180deg, var(--green-bright), var(--green) 55%);
  background: var(--btn-bg);
  color: var(--green-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 30px -10px var(--green-glow), 0 2px 8px -2px rgba(0,0,0,0.5);
}
.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 16px 40px -10px var(--green-glow), 0 2px 8px -2px rgba(0,0,0,0.5);
  transform: translateY(-1px);
}

.btn-ghost { color: var(--text-2); }
.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,0.04); }

.btn-outline { border-color: var(--line); color: var(--text); }
.btn-outline:hover { border-color: var(--green); color: var(--green-bright); background: rgba(52,224,127,0.05); transform: translateY(-1px); }

.btn-block { width: 100%; }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-sm { padding: 9px 14px; font-size: 13px; border-radius: var(--r-sm); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-danger { color: var(--red); border-color: rgba(255,107,107,0.3); }
.btn-danger:hover { background: rgba(255,107,107,0.08); border-color: var(--red); }

/* ── Cards / surfaces ─────────────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, var(--navy-850), var(--navy-900));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.surface { background: var(--navy-850); border: 1px solid var(--line); border-radius: var(--r); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 16px; }
.field > label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 7px;
}
.input, .select, textarea.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 14px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.input::placeholder { color: var(--faint); }
.input:focus, .select:focus, textarea.input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(52,224,127,0.14);
  background: var(--navy-750);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c8aa3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Badges / pills ───────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-2);
  background: var(--navy-800);
}
.badge.green  { color: var(--green-bright); border-color: rgba(52,224,127,0.35); background: rgba(52,224,127,0.08); }
.badge.amber  { color: var(--amber); border-color: rgba(255,194,75,0.3); background: rgba(255,194,75,0.07); }
.badge.red    { color: var(--red); border-color: rgba(255,107,107,0.3); background: rgba(255,107,107,0.07); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Toast ────────────────────────────────────────────────────────────────── */
#toast-wrap {
  position: fixed; z-index: 80; right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 10px; max-width: 360px;
}
.toast {
  background: var(--navy-750);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--r);
  padding: 13px 16px;
  font-size: 14px; color: var(--text);
  box-shadow: var(--shadow);
  animation: toast-in 0.25s cubic-bezier(.2,.8,.2,1);
}
.toast.error { border-left-color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Helpers ──────────────────────────────────────────────────────────────── */
.muted { color: var(--muted); }
.text-2 { color: var(--text-2); }
.green { color: var(--green-bright); }
.center { text-align: center; }
.hidden { display: none !important; }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25); border-top-color: #fff;
  animation: spin 0.7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Social-proof alert popups ────────────────────────────────────────────── */
#proof-host {
  position: fixed; z-index: 90; left: 14px; bottom: 14px;
  max-width: min(290px, calc(100vw - 90px));
  opacity: 0; transform: translateY(14px) scale(0.98);
  transition: opacity 0.3s cubic-bezier(.2,.8,.2,1), transform 0.3s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
#proof-host.show { opacity: 1; transform: none; }
/* Metallic orange proof bubble — bright specular gradient + sweeping sheen */
.proof-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(165deg, #ffd28d 0%, #ffa438 24%, #ff7d05 52%, #e26000 78%, #ff9633 100%);
  border: 1px solid #ffc06a;
  border-radius: var(--r);
  padding: 8px 12px 8px 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(120,45,0,0.35),
    0 14px 40px -12px rgba(255,125,5,0.55),
    0 20px 50px -18px rgba(0,0,0,0.7);
}
/* The "swift" metal sheen sweeping across */
.proof-card::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 46%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: skewX(-18deg);
  animation: proof-sheen 2.6s cubic-bezier(.3,.6,.4,1) infinite;
  pointer-events: none;
}
@keyframes proof-sheen { 0% { left: -55%; } 60%, 100% { left: 125%; } }
.proof-ic {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(60,22,0,0.28); color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.proof-ic svg { width: 15px; height: 15px; }
.proof-line { font-size: 12px; color: #4a2000; line-height: 1.4; position: relative; }
.proof-line strong { color: #2b1200; font-weight: 700; }
.proof-amt { font-family: var(--font-mono); color: #fff !important; text-shadow: 0 1px 2px rgba(120,45,0,0.55); }
.proof-coin { font-family: var(--font-mono); font-size: 10px; color: #2b1200; border: 1px solid rgba(60,22,0,0.35); border-radius: 5px; padding: 0 4px; margin-left: 2px; background: rgba(255,255,255,0.22); }
.proof-meta { font-size: 10.5px; color: #6b3300; margin-top: 2px; position: relative; }
.proof-check { color: #2b1200; font-weight: 600; }

/* ── Scroll-reveal (hidden state only when JS confirms with .rv on <html>,
      so content is never lost without JS; transform/opacity only) ─────────── */
.rv .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1); }
.rv .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}