/* ==========================================================================
   Kova Website v2 — shared tokens, base, global UI and components
   Source of truth: Developer Handoff v2.0 (pp. 4–9)
   ========================================================================== */

@font-face { font-family: "Geist"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  --k-green: #22DD6E; --k-green-ink: #03200E; --k-green-deep: #0E2317;
  --k-ground: #000; --k-ground-alt: #050505; --k-stage-alt: #0A0A0A;
  --k-surface: #141414; --k-surface-2: #1A1A1A; --k-line: #262626;
  --k-text: #FFF; --k-text-2: #D4D4D4; --k-muted: #A3A3A3; --k-legal: #8A8A8A;
  --k-orange: #FF8A3D;
  --k-glow: radial-gradient(circle, rgba(34,221,110,.28), transparent 65%);

  --r-pill: 999px; --r-panel: 36px; --r-tile: 28px; --r-box: 22px; --r-card: 18px;

  --gutter: 64px; --maxw: 1312px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --ease-pop: cubic-bezier(.34,1.56,.64,1);
  --t-micro: 120ms; --t-ui: 240ms; --t-reveal: 480ms; --t-scene: 800ms;

  --f-ui: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-display: var(--f-ui);

  color-scheme: dark;
}
@media (max-width: 1279px) { :root { --gutter: 40px; } }
@media (max-width: 767px)  { :root { --gutter: 20px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--k-ground); color: var(--k-text);
  font-family: var(--f-ui); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; text-wrap: balance; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
.num, [data-count] { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--k-green); color: var(--k-green-ink); padding: 10px 16px; border-radius: var(--r-pill); font-weight: 500; }
.skip:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--k-green); outline-offset: 3px; }
[data-theme="green"] :focus-visible, .on-green :focus-visible { outline-color: var(--k-green-ink); }

.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.legal-link { font-size: 12px; color: var(--k-muted); text-decoration: underline; text-underline-offset: 4px; transition: text-underline-offset var(--t-micro), opacity var(--t-micro); }
.legal-link:hover { text-underline-offset: 2px; opacity: .85; }
[data-theme="green"] .legal-link { color: var(--k-green-ink); }

/* JS-driven reveals: hidden only when JS will reveal them */
.js [data-ml] { visibility: hidden; }
.js [data-ml].ml-ready { visibility: visible; }
.ml { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.ml-i { display: inline-block; will-change: transform; }

/* Loops pause off-screen / reduced motion */
.paused, .paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Buttons & links (p. 5, p. 7) ---------- */
.btn {
  --bg: transparent; --fg: var(--k-text); --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  font-family: var(--f-ui); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-micro) var(--ease-out), transform var(--t-micro) var(--ease-out), border-color var(--t-micro), color var(--t-micro);
}
.btn:active { transform: scale(.97); }
.btn .arr { display: inline-block; font-size: 12px; transition: transform var(--t-micro) var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }
.btn-primary { --bg: var(--k-green); --fg: var(--k-green-ink); }
.btn-primary:hover { --bg: color-mix(in srgb, var(--k-green), #fff 6%); }
.btn-invert { --bg: #fff; --fg: #000; height: 42px; }
.btn-invert:hover { --bg: #EDEDED; }
.btn-outline { --bd: #fff; }
.btn-outline:hover { --bg: rgba(255,255,255,.08); }
.btn-ink { --bg: var(--k-green-ink); --fg: #fff; }
.btn-ink:hover { --bg: color-mix(in srgb, var(--k-green-ink), #fff 8%); }
.btn-outline-ink { --bd: var(--k-green-ink); --fg: var(--k-green-ink); }
.btn-outline-ink:hover { --bg: rgba(3,32,14,.08); }
.btn-icon { width: 46px; padding: 0; --bg: #fff; --fg: #000; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 13px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 20px; letter-spacing: -.02em; }
.logo-mark { width: 36px; height: 36px; border-radius: 50%; background: var(--k-green); color: var(--k-green-ink); display: grid; place-items: center; font-size: 17px; font-weight: 600; letter-spacing: 0; transition: background-color var(--t-ui) var(--ease-io), color var(--t-ui) var(--ease-io); }

/* ---------- Navigation (p. 7) ---------- */
.nav { z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--gutter); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-links { display: flex; gap: 28px; font-size: 14px; color: var(--k-text-2); }
.nav-links a { text-decoration: none; transition: color var(--t-micro); }
.nav-links a:hover { color: #fff; }
.nav .btn-outline { --bd: #3A3A3A; }
.nav .btn-outline:hover { --bd: #fff; }
.nav-menu-btn { display: none; }

/* A · floating nav */
.nav-float { position: fixed; top: 24px; left: 0; right: 0; }
.nav-float .btn, .nav-float .logo-mark, .nav-float .logo { transition: background-color var(--t-ui) var(--ease-io), color var(--t-ui) var(--ease-io), border-color var(--t-ui) var(--ease-io); }
.nav-float .nav-menu-btn { display: inline-flex; }
.nav-float.on-green .logo { color: var(--k-green-ink); }
.nav-float.on-green .logo-mark { background: var(--k-green-ink); color: var(--k-green); }
.nav-float.on-green .btn-primary { --bg: var(--k-green-ink); --fg: #fff; }
.nav-float.on-green .btn-outline { --bd: var(--k-green-ink); --fg: var(--k-green-ink); }
.nav-float.on-green .btn-outline:hover { --bg: rgba(3,32,14,.08); }
.nav-float.on-green .btn-icon { --bg: var(--k-green-ink); --fg: #fff; }
.nav-float.on-green :focus-visible { outline-color: var(--k-green-ink); }

/* B / C · bar nav, sticky after 24px */
.nav-bar { position: sticky; top: 0; height: 92px; border-bottom: 1px solid transparent;
  transition: background-color var(--t-ui) var(--ease-io), border-color var(--t-ui) var(--ease-io), backdrop-filter var(--t-ui); }
.nav-bar.is-stuck { background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: var(--k-line); }
.nav-bar .nav-links { position: absolute; left: 50%; transform: translateX(-50%); }
.nav-bar.nav-links-right .nav-links { position: static; transform: none; margin-left: auto; margin-right: 12px; }

@media (max-width: 1279px) {
  .nav-bar { height: 76px; }
  .nav-links { display: none !important; }
  .nav-menu-btn { display: inline-flex; }
}
@media (max-width: 767px) {
  .nav-float { top: 16px; }
  .nav .nav-hide-sm { display: none; }
  .nav .btn { height: 44px; }
  .nav .btn-icon { width: 44px; }
  .logo { font-size: 18px; }
}

/* Full-screen menu */
.menu { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; padding: 24px var(--gutter) 40px;
  visibility: hidden; opacity: 0; transition: opacity var(--t-ui) var(--ease-io), visibility 0s linear var(--t-ui); }
.menu.is-open { visibility: visible; opacity: 1; transition: opacity var(--t-ui) var(--ease-io); }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-links { margin-top: auto; margin-bottom: auto; display: flex; flex-direction: column; gap: 4px; }
.menu-links a { font-size: clamp(40px, 7vw, 52px); font-weight: 400; letter-spacing: -.035em; line-height: 1.15; text-decoration: none; display: block; width: fit-content; }
.menu-links a:hover { color: var(--k-green); }
.menu-foot { display: flex; gap: 8px; flex-wrap: wrap; }
body.menu-open { overflow: hidden; }

/* ---------- @name claim input (p. 7) ---------- */
.claim { position: relative; width: 100%; max-width: 420px; }
.claim-pill { display: flex; align-items: center; height: 60px; padding: 0 7px 0 22px; border-radius: var(--r-pill);
  background: var(--k-surface); border: 1px solid #333; transition: border-color 200ms var(--ease-out); }
.claim-pill:focus-within { border-color: var(--k-green); }
.claim-at { color: var(--k-muted); font-size: 16px; padding-right: 4px; cursor: text; }
.claim input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; font-size: 16px; caret-color: var(--k-green); }
.claim input::placeholder { color: #6B6B6B; }
.claim-state { width: 22px; height: 22px; margin-right: 10px; display: grid; place-items: center; flex: none; }
.claim-state .dots { display: flex; gap: 3px; }
.claim-state .dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--k-muted); animation: dotpulse 900ms var(--ease-io) infinite; }
.claim-state .dots i:nth-child(2) { animation-delay: 150ms; } .claim-state .dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes dotpulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.claim-state .ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; animation: popin 320ms var(--ease-pop) both; }
.claim-state .ico.ok { background: var(--k-green); color: var(--k-green-ink); }
.claim-state .ico.no { background: var(--k-orange); color: #1a0a00; }
@keyframes popin { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.claim .btn { height: 46px; flex: none; }
.claim-status { min-height: 20px; margin-top: 10px; font-size: 13px; color: var(--k-muted); padding-left: 22px; text-align: left; }
.claim-status.ok { color: var(--k-green); } .claim-status.no { color: var(--k-orange); }
.claim-sugg { display: flex; gap: 6px; flex-wrap: wrap; padding-left: 16px; margin-top: 8px; }
.claim-sugg button { height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--k-line); background: var(--k-surface-2); font-size: 13px; }
.claim-sugg button:hover { border-color: var(--k-green); }
/* ink variant — claim on green */
.claim.ink .claim-pill { background: var(--k-green-ink); border-color: var(--k-green-ink); }
.claim.ink .claim-pill:focus-within { border-color: #fff; }
.claim.ink .claim-at { color: var(--k-green); }
.claim.ink input { color: #fff; }
.claim.ink input::placeholder { color: rgba(255,255,255,.45); }
.claim.ink .claim-status { color: var(--k-green-ink); }
.claim.ink .claim-status.no { color: #7A2E00; }
.claim.ink .claim-sugg button { background: rgba(3,32,14,.12); border-color: rgba(3,32,14,.3); color: var(--k-green-ink); }

/* Store pills — text stand-ins (replace with official badges) */
.stores { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { background: #000; padding: 48px var(--gutter) 40px; border-top: 1px solid var(--k-line); scroll-margin-top: 96px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-word { font-weight: 500; font-size: 18px; letter-spacing: -.02em; text-decoration: none; }
.footer-links { display: flex; gap: 24px; font-size: 13px; color: var(--k-text-2); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-legal { margin-top: 20px; font-size: 12px; line-height: 1.6; color: var(--k-legal); max-width: 900px; }

/* ==========================================================================
   KovaPhone (p. 8) — 320 × 660, bezel #1C1C1C 9px, radius 54/46
   Scale with --s on the slot; the phone itself is drawn at native size.
   ========================================================================== */
.kp-slot { --s: 1; position: relative; width: calc(320px * var(--s)); height: calc(660px * var(--s)); flex: none; }
.kphone { position: absolute; left: 0; top: 0; width: 320px; height: 660px; transform: scale(var(--s)); transform-origin: 0 0;
  padding: 9px; border-radius: 54px; background: #1C1C1C; box-shadow: 0 0 0 1px #2E2E2E, 0 60px 120px -40px rgba(0,0,0,.9);
  font-family: var(--f-ui); color: #fff; font-size: 13px; line-height: 1.3; letter-spacing: 0; text-align: left; user-select: none; }
.ks { position: relative; height: 100%; border-radius: 46px; overflow: hidden; background: #0A0A0A; display: flex; flex-direction: column; }
.ks b { font-weight: 500; }
.ks .box { background: var(--k-surface); border-radius: 16px; }

/* home */
.ks-home { padding: 30px 16px 0; }
.ks-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.ks-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--k-green); color: var(--k-green-ink); display: grid; place-items: center; font-size: 9px; font-weight: 600; }
.ks-top svg { margin-left: auto; width: 16px; height: 16px; }
.ks-label { margin-top: 18px; font-size: 10px; color: var(--k-muted); }
.ks-balance { font-size: 34px; letter-spacing: -.04em; font-weight: 500; line-height: 1.15; }
.ks-actions { display: flex; gap: 8px; margin-top: 12px; }
.ks-actions span { flex: 1; height: 34px; border-radius: 99px; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.ks-actions .g { background: var(--k-green); color: var(--k-green-ink); }
.ks-actions .d { background: var(--k-surface-2); }
.ks-split { margin-top: 12px; padding: 12px; }
.ks-bars { display: flex; gap: 4px; height: 5px; }
.ks-bars i { display: block; height: 100%; border-radius: 9px; transform-origin: left center; }
.ks-bars .evm { width: 62%; background: #fff; } .ks-bars .sol { flex: 1; background: var(--k-green); }
.ks-lbls { display: flex; justify-content: space-between; margin-top: 7px; font-size: 9px; color: var(--k-muted); }
.ks-lbls b { color: #fff; }
.ks-row { margin-top: 8px; display: flex; align-items: center; gap: 12px; padding: 12px; font-size: 11px; }
.ks-row small, .ks-asset small { display: block; font-size: 9px; color: var(--k-muted); }
.ks-mini-card { width: 38px; height: 25px; border-radius: 5px; background: var(--k-green); flex: none; }
.ks-row svg { margin-left: auto; width: 12px; height: 12px; color: var(--k-muted); }
.ks-list { margin-top: 8px; padding: 0 12px; }
.ks-asset { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 11px; }
.ks-asset + .ks-asset { border-top: 1px solid var(--k-line); }
.ks-asset .amt { margin-left: auto; font-weight: 500; }
.ks-coin { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 6px; font-weight: 700; flex: none; }
.ks-coin.usdc { background: #0E2317; color: var(--k-green); } .ks-coin.sol { background: var(--k-green); color: var(--k-green-ink); }
.ks-asset .t { display: flex; gap: 4px; align-items: baseline; } .ks-asset .t small { display: inline; }
.ks-tabbar { margin: auto -16px 0; height: 66px; border-top: 1px solid var(--k-line); display: flex; align-items: center; justify-content: space-around; padding: 0 16px 6px; color: var(--k-muted); }
.ks-tabbar svg { width: 16px; height: 16px; }
.ks-tabbar .on { color: #fff; }
.ks-tabbar .at { width: 34px; height: 34px; border-radius: 50%; background: var(--k-green); color: var(--k-green-ink); display: grid; place-items: center; font-size: 15px; font-weight: 600; }

/* pay */
.ks-pay { background: var(--k-green); color: var(--k-green-ink); padding: 26px 18px 18px; }
.ks-pay-top { position: relative; display: flex; justify-content: center; align-items: center; height: 28px; }
.ks-pay-top .x { position: absolute; left: 4px; font-size: 18px; }
.ks-to { background: rgba(3,32,14,.12); border-radius: 99px; padding: 5px 12px; font-size: 10px; font-weight: 500; }
.ks-amount { margin-top: 64px; text-align: center; font-size: 72px; font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.ks-sub { text-align: center; margin-top: 12px; font-size: 9.5px; }
.ks-keypad { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 4px; }
.ks-keypad span { height: 44px; display: grid; place-items: center; font-size: 19px; font-weight: 400; border-radius: 14px; transition: background-color 150ms; }
.ks-keypad span.hit { background: rgba(3,32,14,.12); }
.ks-pay-actions { display: flex; gap: 8px; margin-top: 12px; }
.ks-pay-actions span { flex: 1; height: 44px; border-radius: 99px; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.ks-pay-actions .req { background: rgba(3,32,14,.1); }
.ks-pay-actions .pay { background: var(--k-green-ink); color: var(--k-green); }

/* card */
.ks-cardscr { padding: 36px 16px 20px; }
.ks-h { font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.ks-cardscr .kc-mini { margin-top: 14px; }
.ks-meter { margin-top: 12px; padding: 12px; font-size: 10px; color: var(--k-muted); }
.ks-meter .r { display: flex; justify-content: space-between; } .ks-meter b { color: #fff; font-size: 11px; }
.ks-meter .bar { height: 5px; border-radius: 9px; background: var(--k-surface-2); margin: 10px 0 7px; overflow: hidden; }
.ks-meter .bar i { display: block; height: 100%; width: 27.5%; background: var(--k-green); border-radius: 9px; transform-origin: left; }
.ks-wbtn, .ks-obtn { margin-top: 10px; height: 38px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.ks-wbtn { margin-top: 14px; background: #fff; color: #000; } .ks-obtn { border: 1px solid #3A3A3A; }
.ks-freeze { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.ks-toggle { width: 34px; height: 20px; border-radius: 99px; background: #fff; position: relative; }
.ks-toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #000; }

/* ==========================================================================
   KovaCard (p. 9) — 340 × 214, radius 18
   ========================================================================== */
.kc-slot { --s: 1; position: relative; width: calc(340px * var(--s)); height: calc(214px * var(--s)); flex: none; }
.kc-slot > .kcard { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--s)); }
.kc-slot > .kc-tilt { position: absolute; left: 0; top: 0; width: 340px; height: 214px; transform-origin: 0 0; scale: var(--s); }
.kcard { --fg: #fff; --ring: rgba(255,255,255,.14);
  position: relative; width: 340px; height: 214px; border-radius: var(--r-card); overflow: hidden; color: var(--fg);
  padding: 22px; font-family: var(--f-ui); box-shadow: 0 30px 60px -24px rgba(0,0,0,.85); isolation: isolate; text-align: left; }
.kc-tilt { width: 100%; height: 100%; transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 400ms var(--ease-out); transform-style: preserve-3d; }
.kc-tilt.tilting { transition: transform 120ms var(--ease-out); }
.kcard .kc-word { position: absolute; left: 22px; top: 18px; font-size: 22px; font-weight: 600; letter-spacing: -.04em; }
.kcard .kc-nfc { position: absolute; right: 20px; top: 20px; width: 18px; height: 18px; }
.kcard .kc-name { position: absolute; left: 22px; bottom: 44px; font-size: 15px; font-weight: 500; }
.kcard .kc-num { position: absolute; left: 22px; bottom: 20px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; opacity: .85; }
.kcard .kc-debit { position: absolute; right: 22px; bottom: 20px; font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.kcard .kc-ring { position: absolute; border-radius: 50%; border: 2px solid var(--ring); z-index: -1; }
.kcard .kc-ring.r1 { width: 260px; height: 260px; right: -40px; top: -60px; }
.kcard .kc-ring.r2 { width: 160px; height: 160px; right: 10px; top: -10px; }
.kcard .kc-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 240ms;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.2), transparent 55%); }
.kc-tilt.tilting .kc-sheen { opacity: 1; }
.kcard.mint { --fg: var(--k-green-ink); --ring: rgba(3,32,14,.12); background: var(--k-green); }
.kcard.obsidian { background: radial-gradient(120% 90% at 100% 0%, rgba(34,221,110,.28), transparent 55%), #0E0E0E; box-shadow: inset 0 0 0 1px rgba(34,221,110,.45), 0 30px 60px -24px rgba(0,0,0,.85); --ring: rgba(34,221,110,.2); }
.kcard.glow { background-color: #101820; --ring: rgba(255,255,255,.3);
  background-image: radial-gradient(40% 55% at 20% 95%, rgba(34,221,110,.95), transparent 70%), radial-gradient(38% 60% at 88% 8%, rgba(58,123,255,.95), transparent 70%), radial-gradient(34% 44% at 55% 60%, rgba(242,242,90,.9), transparent 70%);
  background-size: 140% 140%; background-position: 0% 0%; animation: blobdrift 8s var(--ease-io) infinite alternate; }
@keyframes blobdrift { to { background-position: 100% 60%; } }
.kcard.paper { --fg: #111; --ring: rgba(0,0,0,.08); background: #F4F4F0; }
.kcard.chrome { --fg: #111; --ring: rgba(0,0,0,.12); background: linear-gradient(115deg, #8E949A 0%, #B9BEC3 30%, rgba(255,255,255,.85) 45%, #A3A9AE 58%, #8E949A 100%); }
/* mini card inside phone */
.kc-mini { position: relative; height: 102px; border-radius: 10px; overflow: hidden; background: var(--k-green); color: var(--k-green-ink); padding: 10px 12px; }
.kc-mini .w { font-weight: 600; font-size: 13px; letter-spacing: -.03em; }
.kc-mini .n { position: absolute; left: 12px; bottom: 10px; font-family: var(--f-mono); font-size: 8px; }
.kc-mini .r { position: absolute; border-radius: 50%; border: 1.5px solid rgba(3,32,14,.13); }
.kc-mini .r.a { width: 120px; height: 120px; right: -20px; top: -24px; } .kc-mini .r.b { width: 72px; height: 72px; right: 4px; top: 0; }

/* ---------- Shared chips (Geist UI) ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 5px; border-radius: var(--r-pill); font-family: var(--f-ui); font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: 0 20px 40px -16px rgba(3,32,14,.45); }
.chip .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 600; }
.chip-white { background: #fff; color: #000; } .chip-white .av { background: #000; color: #fff; }
.chip-ink { background: var(--k-green-ink); color: #fff; padding-left: 14px; } .chip-ink .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--k-green); }
.chip-dark { background: var(--k-surface-2); color: #fff; } .chip-dark .av { background: var(--k-green); color: var(--k-green-ink); }