/* ============================================================
   Trade Ally 2.0 — Landing redesign · shared primitives
   Ported from the claude.ai design project "Trade Ally 2.0"
   (landing-redesign/styles.css, direction C).

   Deviation from the design source: the design loaded Parkinsans
   and Hanken Grotesk from Google Fonts. This repo already ships
   both as self-hosted variable woff2 under static/theme2/fonts/
   (see theme2-tokens.css), so we reuse those and drop the CDN.
   ============================================================ */

/* Parkinsans — variable weight 300–800 */
@font-face {
  font-family: "Parkinsans";
  src: url("../theme2/fonts/parkinsans-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* Hanken Grotesk — variable weight 400–700 */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../theme2/fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Indigo (platform / structure) */
  --indigo-50:#eef0f9; --indigo-100:#d6daf0; --indigo-200:#aab2e0;
  --indigo-300:#7c87cc; --indigo-400:#535fae; --indigo-500:#3a4493;
  --indigo-600:#29317c; --indigo-700:#222a6a; --indigo-800:#1a2052; --indigo-900:#12163a;
  /* Coral (Ali / energy) */
  --coral-50:#fdeced; --coral-100:#fbd2d5; --coral-200:#f5a3a9; --coral-300:#ef757d;
  --coral-400:#e85a63; --coral-500:#e64952; --coral-600:#cf3640; --coral-700:#aa2932;
  /* Electric blue lives only in the rain */
  --electric-500:#021d92;
  /* Ink ramp (warm-cool neutral) */
  --ink-900:#1a1a22; --ink-800:#2a2a33; --ink-700:#434343; --ink-600:#595959;
  --ink-500:#767680; --ink-400:#9a9aa3; --ink-300:#c4c4cc; --ink-200:#e0e0e6;
  --ink-100:#eeeeee; --ink-50:#f6f6f8; --white:#fff;

  /* Semantic */
  --surface-page:#f7f7fb;
  --surface-card:#fff;
  --text-strong:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --green-500:#1f8a5b; --green-50:#e6f4ee;

  /* Radii — friendly */
  --r-md:12px; --r-lg:16px; --r-xl:22px; --r-2xl:28px; --r-pill:999px;
  /* Indigo-tinted shadows */
  --sh-sm:0 2px 6px rgba(26,22,58,.08);
  --sh-md:0 6px 18px rgba(26,22,58,.10);
  --sh-lg:0 14px 34px rgba(26,22,58,.14);
  --sh-xl:0 28px 60px rgba(26,22,58,.18);
  --sh-brand:0 12px 28px rgba(41,49,124,.28);
  --sh-coral:0 12px 28px rgba(230,73,82,.34);
  --ease:cubic-bezier(.2,.8,.2,1);

  --display:'Parkinsans',-apple-system,'Segoe UI',sans-serif;
  --body:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  font-size:17px; line-height:1.6;
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ---- Display type ---- */
.disp{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.0;color:var(--text-strong);text-wrap:balance;}
.disp em{font-style:normal;color:var(--coral-500);}

/* ---- Eyebrow ---- */
.eyebrow{
  display:inline-block;font-family:var(--body);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral-600);
}
.eyebrow.on-dark{color:var(--coral-300);}

/* ---- Container ---- */
.wrap{max-width:1200px;margin:0 auto;padding:0 56px;}
@media(max-width:700px){.wrap{padding:0 22px;}}

/* ---- Buttons (pills) ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:-.01em;
  padding:13px 24px;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.btn.lg{padding:16px 30px;font-size:16px;}
.btn-coral{background:var(--coral-500);color:#fff;box-shadow:var(--sh-coral);}
.btn-coral:hover{background:var(--coral-600);transform:translateY(-2px);}
.btn-indigo{background:var(--indigo-600);color:#fff;box-shadow:var(--sh-brand);}
.btn-indigo:hover{background:var(--indigo-700);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--indigo-700);border-color:var(--ink-300);}
.btn-ghost:hover{border-color:var(--indigo-600);transform:translateY(-2px);}
.btn-on-dark{background:#fff;color:var(--indigo-700);}
.btn-on-dark:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);}
.btn-outline-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.btn-outline-dark:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px);}

/* ---- Brand hero background: deep indigo + coral depth glow + masked rain accent ----
   Texture is masked to the top-right so headlines sit on clean indigo and pop. */
.rain{
  position:relative;
  background:
    radial-gradient(78% 90% at 80% 14%, rgba(230,73,82,.20), transparent 52%),
    linear-gradient(158deg, var(--indigo-700) 0%, var(--indigo-900) 72%);
}
.rain::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url(pattern-rain-indigo.png) top right / 300px;
  opacity:.22;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(250deg,#000 0%,rgba(0,0,0,.35) 38%,transparent 60%);
  mask-image:linear-gradient(250deg,#000 0%,rgba(0,0,0,.35) 38%,transparent 60%);
}
.rain > *{position:relative;z-index:2;}

/* ---- NAV (shared) ---- */
.nav{position:sticky;top:0;z-index:100;background:rgba(247,247,251,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-100);}
.nav.on-dark{background:rgba(18,22,58,.55);border-bottom:1px solid rgba(255,255,255,.12);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;}
.nav-logo{height:26px;width:auto;}
.nav-brandwrap{display:flex;align-items:center;gap:11px;}
.nav-appicon{width:32px;height:32px;border-radius:9px;background:var(--indigo-800);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nav-appicon img{width:18px;height:auto;}
.nav-links{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:600;color:var(--ink-600);}
.nav.on-dark .nav-links{color:rgba(255,255,255,.82);}
.nav-links a.lnk:hover{color:var(--indigo-600);}
.nav.on-dark .nav-links a.lnk:hover{color:#fff;}
@media(max-width:820px){.nav-links .lnk{display:none;}}

/* ---- FOOTER (shared) ---- */
.foot{background:var(--indigo-900);color:rgba(255,255,255,.62);padding:54px 0;}
.foot .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;}
.foot-mark{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.foot-mark img{height:22px;}
.foot p{font-size:13.5px;line-height:1.7;}
.foot-links{display:flex;gap:26px;font-size:14px;font-weight:600;color:rgba(255,255,255,.8);}
.foot-links a:hover{color:#fff;}
@media(max-width:700px){.foot .wrap{flex-direction:column;align-items:flex-start;}}

/* ---- Image placeholder (honest, no fake screenshots) ---- */
.ph{
  position:relative;background:
    repeating-linear-gradient(135deg,var(--indigo-50),var(--indigo-50) 11px,#fff 11px,#fff 22px);
  border:1.5px solid var(--indigo-100);border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--indigo-500);overflow:hidden;
}
.ph span{font-family:'Courier New',monospace;font-size:12px;line-height:1.5;letter-spacing:.02em;
  background:rgba(247,247,251,.92);padding:7px 12px;border-radius:8px;max-width:84%;}

/* ---- Reveal (kept inert for capture/PDF fidelity; subtle live fade only) ---- */
.rv{opacity:1;}
@media(prefers-reduced-motion:no-preference){
  .rv.in{animation:rv-in .7s var(--ease) both;}
  @keyframes rv-in{from{opacity:.001;transform:translateY(20px);}to{opacity:1;transform:none;}}
}