/* ============================================================================
   einax — custom design system (UI Pro, no NovaDark / no Tailwind build)
   Hand-authored tokens + components. Two themes via [data-theme].

   LIGHT  : faithful recreation of the legacy einax look
            (navy hero #283982, white content sections, Montserrat + Roboto).
   DARK   : bespoke premium palette built around the navy / purple / teal brand.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. Fonts (loaded via <link> in base.html; @import fallback kept minimal)
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  /* Brand palette (legacy einax) */
  --brand-navy:    #283982;
  --brand-navy-2:  #1d2a63;   /* deeper navy for gradients */
  --brand-teal:    #159A78;   /* basic voucher / success  */
  --brand-purple:  #6D43B1;   /* binding voucher          */
  --brand-info:    #66B4D4;   /* airdrop                  */
  --brand-warning: #C7A175;
  --brand-danger:  #BF5682;

  /* Semantic roles — LIGHT */
  --accent:        var(--brand-navy);
  --accent-hover:  #31459b;
  --accent-contrast: #ffffff;

  --bg-0: #ffffff;            /* page canvas            */
  --bg-1: #f5f7fb;            /* subtle section band    */
  --bg-2: #eef1f7;            /* alt band / inputs      */
  --surface: #ffffff;        /* cards                  */
  --surface-raised: #ffffff;

  --text-1: #1b2030;         /* primary text  (~13:1)  */
  --text-2: #4a5266;         /* secondary     (~7:1)   */
  --text-3: #6b7488;         /* muted         (~4.7:1) */
  --text-on-dark: #eaf0ff;   /* text over navy hero    */
  --text-on-dark-2: #aab6e0;

  --border: #e3e8f2;
  --border-strong: #cfd6e6;

  --ring: rgba(40, 57, 130, 0.45);

  /* Hero (navy, both themes share this dark hero) */
  --hero-from: #2b3d8c;
  --hero-to:   #1a245a;
  --hero-text: #ffffff;
  --hero-text-2: #b9c4ee;

  --shadow-sm: 0 1px 2px rgba(20, 28, 60, .06), 0 1px 3px rgba(20, 28, 60, .08);
  --shadow-md: 0 6px 18px rgba(20, 28, 60, .10);
  --shadow-lg: 0 18px 50px rgba(20, 28, 60, .16);
  --shadow-card: 0 2px 2px rgba(40,57,130,.10);
  --shadow-card-hover: 0 16px 38px rgba(40,57,130,.28);

  --radius-xs: 6px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --font-head: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale */
  --t-hero: clamp(2.4rem, 1.6rem + 3.6vw, 4rem);
  --t-h1:   clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --t-h2:   clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --t-h3:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --t-lg:   1.125rem;
  --t-base: 1rem;
  --t-sm:   0.875rem;
  --t-xs:   0.75rem;

  --container: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* z-scale */
  --z-nav: 50; --z-overlay: 40; --z-raised: 10;

  color-scheme: light;
}

[data-theme="dark"] {
  --accent:        #8d7bff;          /* lifted purple, reads on dark */
  --accent-hover:  #a394ff;
  --accent-contrast: #0e1020;

  --bg-0: #0b0e1a;            /* near-black navy canvas */
  --bg-1: #0f1424;
  --bg-2: #141a30;
  --surface: #151b30;
  --surface-raised: #1a2138;

  --text-1: #eef1fb;
  --text-2: #b6bfde;
  --text-3: #8390b8;
  --text-on-dark: #eef1fb;
  --text-on-dark-2: #aab6e0;

  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);

  --ring: rgba(141, 123, 255, 0.55);

  --hero-from: #1a2150;
  --hero-to:   #0b0e1a;
  --hero-text: #ffffff;
  --hero-text-2: #b9c4ee;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
  --shadow-card: 0 2px 8px rgba(0,0,0,.4);
  --shadow-card-hover: 0 18px 44px rgba(0,0,0,.65);

  color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   2. Base / reset
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--text-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; color: var(--text-1); margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1rem; color: var(--text-2); }
a { color: var(--accent); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(56px, 8vw, 110px); }
.section--tint { background: var(--bg-1); }
.eyebrow { font-family: var(--font-head); font-weight: 600; font-size: var(--t-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: var(--t-lg); color: var(--text-2); }
.muted { color: var(--text-3); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: 28px; }
@media (min-width: 720px){ .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} }

/* ----------------------------------------------------------------------------
   3. Buttons
   ---------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent); --btn-fg: var(--accent-contrast); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-head); font-weight: 600; font-size: var(--t-base);
  line-height: 1; cursor: pointer; user-select: none; white-space: nowrap;
  padding: .8rem 1.4rem; min-height: 44px;
  border: 1.5px solid var(--btn-bd); border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn--pill { border-radius: var(--radius-pill); padding-inline: 1.8rem; }
.btn--lg { font-size: var(--t-lg); padding: 1rem 2rem; min-height: 52px; }
.btn--sm { font-size: var(--t-sm); padding: .5rem .9rem; min-height: 36px; }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-contrast); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--accent); --btn-bd: var(--border-strong); }
.btn--secondary:hover { --btn-bd: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text-2); --btn-bd: transparent; }
.btn--ghost:hover { --btn-fg: var(--text-1); background: var(--bg-2); box-shadow: none; transform: none; }
.btn--on-dark { --btn-bg: #fff; --btn-fg: var(--brand-navy); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ----------------------------------------------------------------------------
   4. Navbar
   ---------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--bg-0) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; gap: 20px; height: 68px; }
.nav__brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; color: var(--text-1); }
.nav__brand:hover { color: var(--text-1); }
.nav__brand .dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-teal), var(--brand-purple)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-purple) 20%, transparent); }
.nav__links { display: none; align-items: center; gap: 6px; margin-inline-start: 14px; }
.nav__links a { padding: .5rem .8rem; border-radius: var(--radius-xs); font-weight: 500; color: var(--text-2); font-family: var(--font-head); font-size: var(--t-sm); }
.nav__links a:hover { color: var(--text-1); background: var(--bg-1); }
.nav__links a[aria-current="page"] { color: var(--accent); }
.nav__spacer { flex: 1; }
.nav__actions { display: inline-flex; align-items: center; gap: 10px; }
@media (min-width: 920px){ .nav__links{display:inline-flex} }

/* language switcher */
/* Language switcher — <details> dropdown */
.lang { position: relative; }
.lang__toggle {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; user-select: none;
  font-family: var(--font-head); font-size: var(--t-sm); font-weight: 600; letter-spacing: .02em;
  color: var(--text-2); background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: .42rem .7rem; line-height: 1;
  transition: color .2s, border-color .2s, background-color .2s;
}
.lang__toggle::-webkit-details-marker { display: none; }
.lang__toggle::marker { content: ""; }
.lang__toggle:hover { color: var(--text-1); border-color: var(--border-strong); }
.lang__toggle .globe { color: var(--text-3); }
.lang__toggle .chev { transition: transform .22s var(--ease); }
.lang[open] .lang__toggle { color: var(--text-1); border-color: var(--accent); }
.lang[open] .lang__toggle .globe { color: var(--accent); }
.lang[open] .lang__toggle .chev { transform: rotate(180deg); }
.lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  display: flex; flex-direction: column; gap: 2px; min-width: 178px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 6px;
  animation: lang-in .16s var(--ease);
}
@keyframes lang-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lang__item {
  display: flex; align-items: center; gap: .55rem; width: 100%; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: var(--t-sm); color: var(--text-2);
  background: none; border: none; border-radius: 10px; padding: .5rem .6rem;
  transition: background-color .15s, color .15s;
}
.lang__item:hover { background: var(--bg-1); color: var(--text-1); }
.lang__item.is-active { color: var(--text-1); font-weight: 600; }
.lang__abbr {
  font-family: var(--font-head); font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em;
  color: var(--text-3); width: 1.7rem; flex: none;
}
.lang__item.is-active .lang__abbr { color: var(--accent); }
.lang__item .check { margin-left: auto; color: var(--accent); flex: none; }

/* theme toggle */
.theme-toggle { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-1); color: var(--text-2); cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.theme-toggle:hover { color: var(--text-1); border-color: var(--border-strong); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* mobile menu (checkbox hack, no JS dependency) */
.nav__burger { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-xs); border: 1px solid var(--border); background: var(--bg-1); color: var(--text-1); cursor: pointer; }
@media (min-width: 920px){ .nav__burger{display:none} }

/* ----------------------------------------------------------------------------
   5. Hero (navy, shared by both themes)
   ---------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; color: var(--hero-text); background: linear-gradient(150deg, var(--hero-from), var(--hero-to)); }
.hero::before { /* faint topographic wave texture */
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
    radial-gradient(60% 50% at 80% 10%, rgba(109,67,177,.35), transparent 60%),
    radial-gradient(50% 40% at 10% 90%, rgba(21,154,120,.25), transparent 60%);
}
.hero::after { /* concentric wave lines */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.12;
  background:
    repeating-radial-gradient(circle at 85% 20%, transparent 0 38px, rgba(255,255,255,.6) 38px 39px);
  mask-image: linear-gradient(120deg, transparent 30%, #000 60%);
}
.hero__inner { position: relative; z-index: var(--z-raised); display: grid; gap: 40px; align-items: center; padding-block: clamp(48px, 8vw, 96px); }
@media (min-width: 980px){ .hero__inner{ grid-template-columns: 1.05fr .95fr; } }
.hero h1 { color: var(--hero-text); font-size: var(--t-hero); max-width: 14ch; }
.hero p { color: var(--hero-text-2); font-size: var(--t-lg); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero__logo { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.6rem,2rem+3vw,4rem); letter-spacing: -.03em; line-height: 1; }
.hero__logo small { display:block; font-size: .8rem; letter-spacing:.5em; font-weight:600; color: var(--hero-text-2); margin-top:.4rem; text-transform: uppercase; }

/* phone + coins composition */
.hero__art { position: relative; min-height: 420px; display:grid; place-items:center; }
.phone { position: relative; width: min(280px, 70vw); aspect-ratio: 9/18.5; border-radius: 38px; background: linear-gradient(160deg,#f7f8ff,#dfe4fb); padding: 12px; box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.6); transform: rotate(8deg); }
.phone::before { content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:46%; height:18px; background:#11163a; border-radius:0 0 14px 14px; }
.phone__screen { height:100%; border-radius: 28px; background: linear-gradient(165deg, #6D43B1, #283982 70%); overflow:hidden; position:relative; }
.coin { position:absolute; border-radius:50%; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; color:#5a3d12; background: radial-gradient(circle at 35% 30%, #ffe79a, #e8b54b 60%, #b9842f); box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.6); }
.coin--1{ width:74px; height:74px; right:-6%; top:8%; font-size:1.4rem; animation: float 6s var(--ease) infinite; }
.coin--2{ width:52px; height:52px; right:14%; top:-4%; font-size:1rem; animation: float 7s var(--ease) infinite .6s; }
.coin--3{ width:40px; height:40px; right:-10%; top:34%; font-size:.8rem; animation: float 5.5s var(--ease) infinite .3s; }
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }

/* Animated exchange card inside the phone — BTC → ETH → USD */
.phone__screen.fx { display:flex; flex-direction:column; padding:18px; gap:14px;
  background: radial-gradient(120% 80% at 80% 0%, #2b2152 0%, #1a1442 38%, #11163a 100%); }
.fx__head { display:flex; align-items:center; justify-content:space-between; color:#fff; }
.fx__brand { font-family:var(--font-head); font-weight:800; letter-spacing:-.02em; font-size:1.05rem; }
.fx__live { display:inline-flex; align-items:center; gap:6px; font-size:.62rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.72); }
.fx__live i { width:7px; height:7px; border-radius:50%; background:#42d6a4;
  box-shadow:0 0 0 0 rgba(66,214,164,.6); animation: fxpulse 1.8s var(--ease) infinite; }
@keyframes fxpulse { 0%{ box-shadow:0 0 0 0 rgba(66,214,164,.55) } 70%,100%{ box-shadow:0 0 0 7px rgba(66,214,164,0) } }

.fx__stage { position:relative; flex:1; perspective:1000px; }
.fx__card {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:8px;
  border-radius:18px; padding:20px; color:#fff; isolation:isolate;
  box-shadow:0 18px 36px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);
  transform-style:preserve-3d; backface-visibility:hidden;
  opacity:0; animation: fxswap 9s cubic-bezier(.65,.05,.25,1) infinite;
}
.fx__card::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:.5;
  background: radial-gradient(80% 60% at 85% 12%, rgba(255,255,255,.35), transparent 60%); }
.fx__card--btc { background:linear-gradient(150deg,#f7931a,#b5610a); animation-delay:0s; }
.fx__card--eth { background:linear-gradient(150deg,#6d7ff0,#3a3a8f); animation-delay:3s; }
.fx__card--usd { background:linear-gradient(150deg,#1aa179,#0e6b51); animation-delay:6s; }
.fx__row { display:flex; align-items:center; gap:10px; }
.fx__coin { width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:#fff;
  background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); }
.fx__tkr { font-family:var(--font-head); font-weight:700; letter-spacing:.06em; font-size:.85rem; opacity:.92; }
.fx__amt { font-family:var(--font-head); font-weight:800; font-size:2rem; line-height:1; letter-spacing:-.02em; }
.fx__amt small { font-size:1.1rem; opacity:.75; font-weight:700; }
.fx__fiat { font-size:.8rem; opacity:.82; }
.fx__swap { position:absolute; right:16px; bottom:-14px; z-index:2; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; color:var(--brand-navy); background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.3); animation: fxspin 9s cubic-bezier(.65,.05,.25,1) infinite; }
/* each card: flip in, hold, flip out (one third of the 9s loop) */
@keyframes fxswap {
  0%      { opacity:0; transform: rotateY(-90deg) translateZ(0) scale(.94); }
  6%, 28% { opacity:1; transform: rotateY(0deg) scale(1); }
  34%,100%{ opacity:0; transform: rotateY(90deg) scale(.94); }
}
@keyframes fxspin { 0%,28%{ transform:rotate(0) } 33%{ transform:rotate(180deg) } 61%{ transform:rotate(180deg) }
  66%{ transform:rotate(360deg) } 94%{ transform:rotate(360deg) } 100%{ transform:rotate(540deg) } }

@media (prefers-reduced-motion: reduce) {
  .fx__card, .fx__swap, .fx__live i, .coin { animation: none; }
  .fx__card--btc { opacity:1; }            /* show a single static card */
  .fx__card--eth, .fx__card--usd { opacity:0; }
}

/* ----------------------------------------------------------------------------
   6. Voucher card (signature component) — 3 variants
   ---------------------------------------------------------------------------- */
.voucher {
  --vc: var(--brand-teal);
  position: relative; color:#fff; border-radius: 16px; padding: 18px 20px;
  background: linear-gradient(140deg, var(--vc), color-mix(in srgb, var(--vc) 62%, #11163a));
  box-shadow: var(--shadow-lg); overflow: hidden; min-height: 188px;
  display:flex; flex-direction:column; gap: 14px; isolation:isolate;
}
.voucher::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background: radial-gradient(60% 80% at 90% 10%, rgba(255,255,255,.25), transparent 60%); }
.voucher--basic   { --vc: var(--brand-teal); }
.voucher--binding { --vc: var(--brand-purple); }
.voucher--airdrop { --vc: var(--brand-info); }
.voucher__top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.voucher__brand { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-head); font-weight:700; letter-spacing:.02em; opacity:.92; }
.voucher__amount { font-family:var(--font-head); font-weight:800; font-size:1.5rem; line-height:1; }
.voucher__amount span { font-size:.8rem; font-weight:600; opacity:.8; margin-inline-start:.25rem; }
.voucher__code { font-family:var(--font-mono); font-size:1.05rem; letter-spacing:.12em; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.voucher__code .pin { opacity:.7; }
.voucher__meta { display:flex; align-items:center; justify-content:space-between; font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.08em; opacity:.85; }
.voucher__foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid rgba(255,255,255,.22); padding-top:12px; }
.voucher__type { display:inline-flex; align-items:center; gap:.4rem; font-size:var(--t-xs); font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.voucher__action { background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius: var(--radius-pill); padding:.35rem .8rem; font-family:var(--font-head); font-size:var(--t-xs); font-weight:600; cursor:pointer; transition: background-color .2s; }
.voucher__action:hover { background:rgba(255,255,255,.28); }
.voucher.is-bound { filter: grayscale(.5) opacity(.8); }
.qr { width:54px; height:54px; border-radius:8px; background:
   conic-gradient(from 0deg, #fff 0 25%, transparent 0 50%, #fff 0 75%, transparent 0) 0 0/18px 18px,
   #fff; box-shadow: inset 0 0 0 4px #fff; opacity:.96; }

/* ----------------------------------------------------------------------------
   7. Cards / features / stats
   ---------------------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.feature__icon { width:56px; height:56px; border-radius: 16px; display:grid; place-items:center; margin-bottom:18px; color:#fff; background: linear-gradient(135deg, var(--brand-navy), var(--brand-purple)); }
.feature--teal .feature__icon { background: linear-gradient(135deg, var(--brand-teal), #0f7a5f); }
.feature--purple .feature__icon { background: linear-gradient(135deg, var(--brand-purple), #4a2c86); }
.feature--info .feature__icon { background: linear-gradient(135deg, var(--brand-info), #3f93b8); }
.feature h3 { font-size: var(--t-h3); }
.feature p { margin: 0; }

.stat { text-align:center; }
.stat__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); color: var(--text-1); line-height:1; }
.stat__label { color: var(--text-3); font-size: var(--t-sm); margin-top:.4rem; }

.illus { color: var(--accent); opacity:.92; }
[data-theme="dark"] .illus { color: var(--text-2); }

/* split feature row (alternating text / illustration) */
.split { display:grid; gap:36px; align-items:center; }
@media (min-width: 860px){ .split{ grid-template-columns: 1fr 1fr; } .split--reverse > :first-child{ order:2 } }

/* ----------------------------------------------------------------------------
   8. Forms
   ---------------------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.label { display:block; font-family: var(--font-head); font-weight:600; font-size: var(--t-sm); margin-bottom:6px; color: var(--text-2); }
.input, .textarea, .select {
  width:100%; font-family: var(--font-body); font-size: var(--t-base); color: var(--text-1);
  background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius);
  padding: .75rem .9rem; min-height: 46px; transition: border-color .2s, box-shadow .2s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .textarea:focus, .select:focus { outline:none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.textarea { min-height: 120px; resize: vertical; }
.form-error { color: var(--brand-danger); font-size: var(--t-sm); margin-top: 4px; }
.help { color: var(--text-3); font-size: var(--t-sm); }
.inline-form { display:flex; gap:10px; flex-wrap:wrap; }
.inline-form .input { flex:1; min-width: 220px; }

/* ---- narrow form pages: auth (allauth), contact, profile ---- */
/* These render Django form fields via {{ field }}, so we auto-style the
   bare <input>/<select>/<textarea> to match the .input component without
   needing widget classes. Keeps every page on the same design system. */
.form-page { padding-block: clamp(48px, 7vw, 88px); }
.form-narrow { max-width: 520px; margin-inline: auto; }
.auth-card { max-width: 460px; margin-inline: auto; padding: clamp(28px, 4vw, 40px); }
.form-card__head { margin-bottom: 24px; }
.form-card__head h1 { margin: 6px 0 0; }
.form-card__head .muted { margin-top: 6px; }
.form-auto :where(
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),
  select, textarea) {
  width:100%; font-family: var(--font-body); font-size: var(--t-base); color: var(--text-1);
  background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius);
  padding: .75rem .9rem; min-height: 46px; transition: border-color .2s, box-shadow .2s;
}
.form-auto :where(input, select, textarea):focus {
  outline:none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring);
}
.form-auto textarea { min-height: 120px; resize: vertical; }
.form-auto .field { margin-bottom: 18px; }
.form-auto label:not(.label) {
  display:block; font-family: var(--font-head); font-weight:600;
  font-size: var(--t-sm); margin-bottom:6px; color: var(--text-2);
}
.form-auto ul.errorlist { list-style:none; margin:6px 0 0; padding:0; }
.form-auto .form-error li, .form-auto ul.errorlist li { color: var(--brand-danger); font-size: var(--t-sm); }
.form-divider { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
.form-alt { margin-top: 20px; font-size: var(--t-sm); color: var(--text-2); }
.form-alt a { color: var(--accent); font-weight: 600; }

/* newsletter band */
.band { background: linear-gradient(135deg, var(--bg-2), var(--bg-1)); border-block: 1px solid var(--border); }

/* badges / pills */
.badge { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-head); font-size:var(--t-xs); font-weight:600; padding:.3rem .7rem; border-radius:var(--radius-pill); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.badge--teal { background: color-mix(in srgb, var(--brand-teal) 14%, transparent); color: var(--brand-teal); }
.badge--purple { background: color-mix(in srgb, var(--brand-purple) 14%, transparent); color: var(--brand-purple); }
.badge--dot::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; }

/* ----------------------------------------------------------------------------
   9. Footer
   ---------------------------------------------------------------------------- */
.footer { background: var(--bg-1); border-top: 1px solid var(--border); padding-block: 56px 32px; color: var(--text-2); }
.footer__grid { display:grid; gap:32px; grid-template-columns: 1.4fr; }
@media (min-width: 760px){ .footer__grid{ grid-template-columns: 1.6fr repeat(3, 1fr); } }
.footer h4 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing:.1em; color: var(--text-3); margin-bottom: 14px; }
.footer a { display:block; color: var(--text-2); padding:.25rem 0; font-size: var(--t-sm); }
.footer a:hover { color: var(--accent); }
.footer__bottom { margin-top: 36px; padding-top: 22px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; color: var(--text-3); font-size: var(--t-sm); }
.social { display:inline-flex; gap:10px; }
.social a { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--border); color: var(--text-2); }
.social a:hover { color: var(--accent); border-color: var(--accent); }

/* ----------------------------------------------------------------------------
   10. Utilities / reveal
   ---------------------------------------------------------------------------- */
/* Reveal is a progressive enhancement: hidden state only applies when JS is
   active (html.js). Without JS — or for reduced motion — content is fully
   visible, so nothing is ever permanently hidden. */
.js .reveal { opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.js .reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; } }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:.6rem 1rem; border-radius:0 0 var(--radius) 0; z-index: 100; }
.skip-link:focus { left:0; }
.text-on-dark { color: var(--text-on-dark) !important; }
.hidden-vis { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ----------------------------------------------------------------------------
   11. Trading terminal — market bar, chart, order book, tape, order pad
   ---------------------------------------------------------------------------- */
.trade { --up:#16a974; --down:#e2466a; }
[data-theme="dark"] .trade { --up:#26d39a; --down:#ff5c79; }
.up { color: var(--up); }
.down { color: var(--down); }

/* Standalone buy/sell text colours (no --up/--down parent needed) — used in
   the order-history table on the operations page. */
.txt-up { color:#16a974; }
.txt-down { color:#e2466a; }
[data-theme="dark"] .txt-up { color:#26d39a; }
[data-theme="dark"] .txt-down { color:#ff5c79; }

/* Market bar: pair tabs + price + 24h stats */
.market-bar { display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
  padding:16px 20px; border:1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); }
.pair-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.pair-tab { font-family: var(--font-head); font-weight:600; font-size: var(--t-sm);
  padding:8px 14px; border-radius: var(--radius-pill); border:1.5px solid var(--border-strong);
  color: var(--text-2); background:transparent; cursor:pointer; transition: all .2s var(--ease); }
.pair-tab:hover { border-color: var(--accent); color: var(--text-1); }
.pair-tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.market-price { font-family: var(--font-mono); font-size: 1.6rem; font-weight:600; line-height:1; }
.market-stats { display:flex; gap:22px; margin-left:auto; flex-wrap:wrap; }
.market-stat { display:flex; flex-direction:column; gap:3px; }
.market-stat .k { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--text-3); }
.market-stat .v { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--text-1); }

/* Trading layout */
.trade-grid { display:grid; gap:16px; margin-top:16px;
  grid-template-columns: minmax(0,1fr) 300px 290px; align-items:start; }
.trade-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width:1100px){ .trade-grid{ grid-template-columns: minmax(0,1fr) 300px; } .order-pad{ grid-column: span 2; } }
@media (max-width:760px){ .trade-grid, .trade-grid--2{ grid-template-columns:1fr; } .order-pad{ grid-column:auto; } }
.trade .card { padding:16px 18px; }
.trade .card h3 { font-size:1rem; margin:0 0 12px; display:flex; align-items:center; justify-content:space-between; }
.card__sub { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--text-3); font-weight:400; }

/* Chart */
.chart-toolbar { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.tf-btn { font-family: var(--font-mono); font-size:.8rem; padding:5px 11px; border-radius: var(--radius-xs);
  border:1px solid var(--border-strong); background:transparent; color: var(--text-2); cursor:pointer; transition: all .15s var(--ease); }
.tf-btn:hover { color: var(--text-1); border-color: var(--accent); }
.tf-btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.chart-box { width:100%; height:380px; }
@media (max-width:760px){ .chart-box{ height:300px; } }

/* Order book ladder */
.book__head, .book__row { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px;
  font-family: var(--font-mono); font-size:.8rem; }
.book__head { color: var(--text-3); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  padding:0 4px 6px; border-bottom:1px solid var(--border); }
.book__head span:nth-child(2), .book__head span:nth-child(3),
.book__row span:nth-child(2), .book__row span:nth-child(3) { text-align:right; }
.book__row { position:relative; padding:3px 4px; isolation:isolate; }
.book__row .bar { position:absolute; top:0; bottom:0; right:0; z-index:-1; border-radius:3px;
  width: calc(var(--w, 0) * 1%); transition: width .3s var(--ease); }
.book__row--ask .price { color: var(--down); }
.book__row--ask .bar { background: color-mix(in srgb, var(--down) 14%, transparent); }
.book__row--bid .price { color: var(--up); }
.book__row--bid .bar { background: color-mix(in srgb, var(--up) 14%, transparent); }
.book__rows--ask { display:flex; flex-direction:column-reverse; }
.book__spread { display:flex; align-items:center; justify-content:space-between;
  padding:8px 4px; margin:4px 0; font-family: var(--font-mono); font-size:.8rem;
  border-block:1px dashed var(--border); color: var(--text-3); }
.book__spread .last { font-size:1rem; font-weight:600; }

/* Trade tape */
.tape { font-family: var(--font-mono); font-size:.8rem; }
.tape__row { display:grid; grid-template-columns: 1fr 1fr auto; gap:8px; padding:3px 4px; }
.tape__row span:nth-child(2){ text-align:right; }
.tape__row span:nth-child(3){ text-align:right; color: var(--text-3); }

/* Order pad (buy/sell) */
.pad-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.pad-tab { font-family: var(--font-head); font-weight:700; padding:10px; border-radius: var(--radius);
  border:1.5px solid var(--border-strong); background:transparent; color: var(--text-2); cursor:pointer; transition: all .15s var(--ease); }
.pad-tab--buy.is-active { background: var(--up); border-color: var(--up); color:#fff; }
.pad-tab--sell.is-active { background: var(--down); border-color: var(--down); color:#fff; }
.order-pad .btn--buy { background: var(--up); border-color: var(--up); color:#fff; }
.order-pad .btn--sell { background: var(--down); border-color: var(--down); color:#fff; }
.pad-bal { display:flex; justify-content:space-between; font-size:.78rem; color: var(--text-3);
  font-family: var(--font-mono); margin:-4px 0 12px; }

/* Landing markets table */
.markets { width:100%; border-collapse:collapse; margin-top:32px; }
.markets th { text-align:left; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-3); font-weight:600; padding:10px 14px; border-bottom:1px solid var(--border); }
.markets th:nth-child(n+3), .markets td:nth-child(n+3){ text-align:right; }
.markets td { padding:14px; border-bottom:1px solid var(--border); font-family: var(--font-mono); font-size: var(--t-sm); color: var(--text-1); }
.markets tr { transition: background .15s var(--ease); }
.markets tbody tr:hover { background: var(--bg-1); }
.market-coin { display:flex; align-items:center; gap:10px; font-family: var(--font-head); font-weight:600; }
.market-coin .sym { display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background: var(--bg-2); font-size:.9rem; color: var(--accent); }
.market-coin small { display:block; color: var(--text-3); font-weight:400; font-family: var(--font-body); }
.spark { width:80px; height:28px; vertical-align:middle; }