/* =========================================================
   MOBILEXY · BASE + COMPONENTS
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
/* Geist via separate import (handles its own subset) */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg-page);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

/* Subtle radial backdrop — “signal field” */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(255,163,98,0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 110%, rgba(61,182,201,0.05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(8,201,123,0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 110%, rgba(232,112,42,0.04), transparent 60%);
}

main, header, footer { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-hi);
  margin: 0;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  font-weight: 600;
}
.t-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.035em; font-weight: 600; }
.t-h1 { font-size: var(--fs-h1); letter-spacing: -0.025em; font-weight: 600; }
.t-h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; font-weight: 600; }
.t-h3 { font-size: var(--fs-h3); }
.t-h4 { font-size: var(--fs-h4); }
.t-h5 { font-size: var(--fs-h5); font-weight: 500; }
.t-h6 { font-size: var(--fs-h6); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-mute); }

.t-body-l { font-size: var(--fs-body-l); line-height: var(--lh-loose); }
.t-body-m { font-size: var(--fs-body-m); line-height: var(--lh-body); }
.t-body-s { font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--text-mute); }
.t-caption { font-size: var(--fs-caption); line-height: 1.4; letter-spacing: var(--tracking-wide); color: var(--text-mute); text-transform: uppercase; font-weight: 500; }
.t-mono { font-family: var(--font-mono); font-feature-settings: "ss01"; }

p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

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

/* Focus */
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* =========================================================
   LAYOUT
   ========================================================= */

.shell {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--s-9) 0;
  border-top: 1px solid var(--border-subtle);
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
  flex-wrap: wrap;
}
.section-head h2 { max-width: 720px; }
.section-head .lede { color: var(--text-mute); max-width: 480px; }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
  margin-bottom: var(--s-4);
  text-transform: uppercase;
}
.section-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent-glow);
}

/* =========================================================
   NAVBAR
   ========================================================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px) saturate(180%);
  background: color-mix(in srgb, var(--bg-page) 78%, transparent);
  border-bottom: 1px solid var(--border-subtle);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 64px;
}
.topbar nav {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.topbar nav a {
  color: var(--text-mute);
  font-size: 13px;
  font-weight: 500;
}
.topbar nav a:hover { color: var(--text); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  color: var(--text-mute);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.theme-toggle .dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.theme-toggle:hover { color: var(--text); }

/* =========================================================
   LOGO
   ========================================================= */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--text-hi);
  letter-spacing: -0.01em;
}
.logo-mark {
  position: relative;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.logo-mark::before, .logo-mark::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.logo-mark::before {
  width: 12px; height: 12px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  top: 4px; left: 4px;
}
.logo-mark::after {
  width: 14px; height: 14px;
  border: 1.5px solid var(--text);
  bottom: 2px; right: 2px;
}
.logo-x, .logo-y { font-weight: 500; }
.logo-x { color: var(--accent); }
.logo-y { color: var(--text); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  --btn-bg: var(--neutral-3);
  --btn-fg: var(--text-hi);
  --btn-bd: var(--border-default);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0 var(--s-5);
  height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: translateY(0.5px) scale(0.99); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--r-sm); }
.btn-lg { height: 48px; padding: 0 var(--s-6); font-size: 15px; border-radius: var(--r-md); }

/* primary — CTA (warm amber) */
.btn-primary {
  --btn-bg: var(--cta);
  --btn-fg: var(--cta-ink);
  --btn-bd: transparent;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px rgba(255,163,98,0.30);
}
.btn-primary:hover { --btn-bg: var(--cta-hover); }
.btn-primary:active { --btn-bg: var(--cta-press); }

/* accent — mint, used for confirmations / success-y actions */
.btn-accent {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --btn-bd: transparent;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 22px var(--accent-glow);
}
.btn-accent:hover { --btn-bg: var(--accent-hover); }
.btn-accent:active { --btn-bg: var(--accent-press); }

/* secondary — neutral fill */
.btn-secondary {
  --btn-bg: var(--neutral-3);
  --btn-fg: var(--text-hi);
  --btn-bd: var(--border-default);
}
.btn-secondary:hover { --btn-bg: var(--neutral-4); --btn-bd: var(--border-strong); }
.btn-secondary:active { --btn-bg: var(--neutral-5); }

/* ghost */
.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: transparent;
}
.btn-ghost:hover { --btn-bg: var(--neutral-2); --btn-fg: var(--text-hi); }
.btn-ghost:active { --btn-bg: var(--neutral-3); }

/* destructive */
.btn-destructive {
  --btn-bg: var(--error);
  --btn-fg: #1a0508;
  --btn-bd: transparent;
  font-weight: 600;
}
.btn-destructive:hover { --btn-bg: #FF8794; }
.btn-destructive:active { --btn-bg: #E55668; }

/* icon-only */
.btn-icon {
  width: 40px; padding: 0;
}
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-lg { width: 48px; }

/* loading */
.btn[data-loading="true"] { color: transparent; position: relative; pointer-events: none; }
.btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--btn-fg);
  animation: spin 0.7s linear infinite;
}
.btn-primary[data-loading="true"]::after,
.btn-accent[data-loading="true"]::after { color: var(--accent-ink); }

@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   INPUTS
   ========================================================= */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 12px;
  color: var(--text-mute);
  font-weight: 500;
}
.input {
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: var(--bg-raised);
  color: var(--text-hi);
  font-family: var(--font-body);
  font-size: 14px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-dim); }
.input:hover { border-color: var(--border-strong); }
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input:disabled { opacity: 0.5; cursor: not-allowed; }
.input[data-state="error"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-soft);
}

.input-search {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23818d9d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px 50%;
  padding-left: 38px;
}

/* OTP */
.otp {
  display: inline-flex;
  gap: var(--s-2);
}
.otp .otp-cell {
  width: 48px; height: 56px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  color: var(--text-hi);
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.otp .otp-cell:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  transform: translateY(-1px);
}
.otp .otp-cell[data-filled="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Country selector trigger */
.country-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  height: 44px;
  padding: 0 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-hi);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  width: 100%;
}
.country-trigger:hover { border-color: var(--border-strong); }
.country-trigger .flag { width: 24px; height: 18px; border-radius: 3px; flex: none; }
.country-trigger .caret { margin-left: auto; color: var(--text-mute); }

/* =========================================================
   FLAG STAND-IN  (geometric, no real flags)
   Two-tone diagonal block, country code overlay.
   ========================================================= */
.flag {
  position: relative;
  display: inline-block;
  background: var(--neutral-5);
  border-radius: 3px;
  overflow: hidden;
  flex: none;
}
.flag svg { display: block; width: 100%; height: 100%; }

/* =========================================================
   BADGES & CHIPS
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-family: var(--font-body);
}
.badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-active   { background: var(--success-soft); color: var(--success); }
.badge-expiring { background: var(--warning-soft); color: var(--warning); }
.badge-expired  { background: var(--neutral-3);    color: var(--text-mute); }
.badge-info     { background: var(--info-soft);    color: var(--info); }
.badge-popular  { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.badge-5g       { background: var(--secondary-soft); color: var(--secondary); }
.badge-4g       { background: var(--neutral-3); color: var(--text-mute); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-default);
  background: var(--bg-raised);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.chip:hover { border-color: var(--border-strong); color: var(--text-hi); }
.chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* =========================================================
   CARDS
   ========================================================= */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: relative;
}
.card-raised { background: var(--bg-raised); box-shadow: var(--elev-2); }

/* plan card */
.plan {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.plan:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.plan.is-popular {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-surface) 60%);
  box-shadow: var(--elev-mint);
}
.plan-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.plan-flag-row { display: flex; align-items: center; gap: var(--s-3); }
.plan-flag-row .flag { width: 32px; height: 24px; }
.plan-country { font-family: var(--font-display); font-weight: 600; color: var(--text-hi); font-size: 16px; line-height: 1.2; }
.plan-region { color: var(--text-mute); font-size: 12px; }

.plan-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  border-top: 1px dashed var(--border-subtle);
  border-bottom: 1px dashed var(--border-subtle);
}
.plan-stat .k { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.plan-stat .v { font-family: var(--font-mono); font-size: 16px; color: var(--text-hi); font-weight: 500; }

.plan-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3);
}
.plan-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  color: var(--text-hi);
  letter-spacing: -0.02em;
  line-height: 1;
}
.plan-price .cur { font-size: 14px; color: var(--text-mute); font-weight: 500; margin-right: 2px; vertical-align: top; }
.plan-pergb {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); letter-spacing: var(--tracking-wide);
}

/* virtual number card */
.vnum {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.vnum-head { display: flex; align-items: center; gap: var(--s-3); }
.vnum-head .flag { width: 28px; height: 21px; }
.vnum-number {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--text-hi);
  letter-spacing: 0.02em;
}
.vnum-meta { display: flex; justify-content: space-between; color: var(--text-mute); font-size: 12px; }
.vnum-svc {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text);
}
.vnum-svc-dot { width: 18px; height: 18px; border-radius: 4px; background: var(--accent); display: inline-block; }

/* =========================================================
   DATA USAGE METER
   ========================================================= */
.usage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.usage-track {
  height: 8px;
  background: var(--neutral-3);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
.usage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--secondary) 100%);
  border-radius: var(--r-pill);
  box-shadow: 0 0 12px var(--accent-glow);
  position: relative;
  transition: width var(--dur-long) var(--ease-out);
}
.usage-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.usage-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.usage-big { font-family: var(--font-mono); font-size: 32px; font-weight: 500; color: var(--text-hi); letter-spacing: -0.01em; }
.usage-big .unit { font-size: 14px; color: var(--text-mute); margin-left: 4px; }
.usage-sub { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); }

/* warning state when low */
.usage[data-state="low"] .usage-fill { background: linear-gradient(90deg, var(--warning), #FFA757); box-shadow: 0 0 12px rgba(255,200,87,0.35); }
.usage[data-state="critical"] .usage-fill { background: linear-gradient(90deg, var(--error), #FF8794); box-shadow: 0 0 12px rgba(255,107,126,0.35); }

/* =========================================================
   NAV — bottom tab bar + sidebar
   ========================================================= */
.tabbar {
  display: flex;
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: 8px;
  gap: 4px;
  box-shadow: var(--elev-3);
  backdrop-filter: blur(20px);
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: var(--r-md);
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.tabbar-item svg { width: 20px; height: 20px; }
.tabbar-item:hover { color: var(--text); }
.tabbar-item[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-soft);
}

.sidebar {
  width: 240px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.sidebar-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s-3); }
.sidebar-group-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: 8px 12px 4px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.sidebar-item svg { width: 16px; height: 16px; color: var(--text-mute); }
.sidebar-item:hover { background: var(--neutral-3); color: var(--text-hi); }
.sidebar-item[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}
.sidebar-item[aria-current="page"] svg { color: var(--accent); }
.sidebar-item .pill {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mute);
  background: var(--neutral-3);
  padding: 2px 6px;
  border-radius: var(--r-pill);
}

/* =========================================================
   TOAST / MODAL / SKELETON / EMPTY
   ========================================================= */
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  min-width: 320px;
  max-width: 420px;
}
.toast-icon {
  flex: none;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toast.success .toast-icon { background: var(--success-soft); color: var(--success); }
.toast.info    .toast-icon { background: var(--info-soft);    color: var(--info); }
.toast.warning .toast-icon { background: var(--warning-soft); color: var(--warning); }
.toast.error   .toast-icon { background: var(--error-soft);   color: var(--error); }
.toast-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.toast-title { color: var(--text-hi); font-weight: 500; font-size: 13px; }
.toast-desc  { color: var(--text-mute); font-size: 12px; }

.modal {
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  box-shadow: var(--elev-4);
  max-width: 440px;
  width: 100%;
}
.modal-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.modal-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.modal h4 { margin-bottom: 4px; }
.modal-body { color: var(--text-mute); font-size: 14px; margin-bottom: var(--s-5); }
.modal-foot { display: flex; gap: var(--s-2); justify-content: flex-end; }

.skel {
  background: linear-gradient(90deg, var(--neutral-2) 0%, var(--neutral-3) 50%, var(--neutral-2) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  animation: skel 1.4s linear infinite;
}
@keyframes skel { to { background-position: -200% 0; } }

.empty {
  text-align: center;
  padding: var(--s-7) var(--s-5);
  border: 1px dashed var(--border-default);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.empty-glyph {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--neutral-2);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  color: var(--text-mute);
  position: relative;
}
.empty-glyph::after {
  content: "";
  position: absolute; inset: -8px;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--r-xl);
}

/* =========================================================
   TOKEN GRID HELPERS  (used in showcase only)
   ========================================================= */
.token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-3);
}
.swatch {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-surface);
}
.swatch .chip-bg {
  height: 88px;
}
.swatch .meta {
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.swatch .name { font-size: 12px; color: var(--text-hi); font-weight: 500; }
.swatch .val  { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); }

.scale-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.scale-row:last-child { border-bottom: none; }
.scale-row .scale-chip {
  flex: none;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
}
.scale-row .scale-name { font-size: 13px; color: var(--text-hi); width: 120px; }
.scale-row .scale-val { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); margin-left: auto; }

/* spacing chips */
.spacing-bar {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r-xs);
  height: 32px;
}

/* radius preview */
.radius-tile {
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  width: 88px; height: 88px;
  display: inline-flex; align-items: flex-end; justify-content: center;
  padding-bottom: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-mute);
}

/* shadow tile */
.elev-tile {
  background: var(--bg-raised);
  border-radius: var(--r-md);
  width: 100%;
  height: 88px;
  display: inline-flex; align-items: flex-end; justify-content: center;
  padding-bottom: 10px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-mute);
}

/* =========================================================
   GLOBE / MAP COVERAGE
   ========================================================= */
.globe {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,163,98,0.10), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(61,182,201,0.08), transparent 55%),
    var(--neutral-2);
  border: 1px solid var(--border-default);
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5), var(--elev-3);
}
.globe svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe .node {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: translate(-50%, -50%);
}
.globe .node::after {
  content: "";
  position: absolute; inset: -6px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0.5;
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
  0% { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(3); opacity: 0; }
}

/* =========================================================
   PURCHASE FLOW STEPPER
   ========================================================= */
.stepper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-3);
}
.step {
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  position: relative;
}
.step .step-no {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: var(--tracking-wide);
}
.step .step-title { color: var(--text-hi); font-weight: 500; font-size: 15px; }
.step .step-desc { color: var(--text-mute); font-size: 13px; }
.step[data-state="done"] { border-color: var(--accent); }
.step[data-state="done"] .step-no { color: var(--accent); }
.step[data-state="current"] { border-color: var(--cta); background: linear-gradient(180deg, var(--cta-soft) 0%, var(--bg-surface) 70%); }
.step[data-state="current"] .step-no { color: var(--cta); }

/* QR placeholder */
.qr {
  width: 200px; height: 200px;
  background:
    conic-gradient(from 0deg, var(--text-hi) 25%, var(--bg-page) 25% 50%, var(--text-hi) 50% 75%, var(--bg-page) 75%) 0 0/16px 16px;
  border-radius: var(--r-md);
  border: 8px solid var(--text-hi);
  position: relative;
  display: inline-block;
}
.qr-corner {
  position: absolute;
  width: 36px; height: 36px;
  border: 6px solid var(--text-hi);
  background: var(--bg-page);
}
.qr-corner::after {
  content: ""; position: absolute; inset: 6px;
  background: var(--text-hi);
}
.qr .tl { top: 0; left: 0; }
.qr .tr { top: 0; right: 0; }
.qr .bl { bottom: 0; left: 0; }
.qr-logo {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-page);
  padding: 6px;
  border-radius: var(--r-xs);
}

/* =========================================================
   SMS INBOX
   ========================================================= */
.inbox {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-surface);
}
.sms-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-fast);
}
.sms-row:last-child { border-bottom: none; }
.sms-row:hover { background: var(--neutral-2); }
.sms-svc {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-ink);
  background: var(--accent);
}
.sms-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sms-head { display: flex; align-items: baseline; gap: var(--s-2); }
.sms-from { color: var(--text-hi); font-weight: 500; font-size: 14px; }
.sms-time { color: var(--text-mute); font-size: 11px; font-family: var(--font-mono); }
.sms-preview { color: var(--text-mute); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-preview code {
  font-family: var(--font-mono);
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  margin-right: 6px;
}
.sms-copy {
  border: 1px solid var(--border-default);
  background: var(--bg-raised);
  color: var(--text);
  border-radius: var(--r-pill);
  height: 28px;
  padding: 0 10px 0 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.sms-copy:hover { color: var(--accent); border-color: var(--accent); }
.sms-copy[data-copied="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* =========================================================
   PHONE FRAME — used to show mobile-specific patterns
   ========================================================= */
.phone {
  width: 320px;
  height: 660px;
  background: var(--bg-page);
  border: 8px solid var(--neutral-5);
  border-radius: 44px;
  padding: 18px 14px;
  box-shadow: var(--elev-4);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phone::before {
  content: "";
  position: absolute;
  top: 16px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 22px;
  background: var(--neutral-5);
  border-radius: 14px;
  z-index: 2;
}
.phone-status {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--text);
  padding: 0 16px 0 12px;
  height: 22px;
}
.phone-screen { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-top: 14px; overflow: hidden; }

/* =========================================================
   MOTION DEMO
   ========================================================= */
.motion-card {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-surface);
}
.motion-curve { height: 56px; }
.motion-name { font-family: var(--font-mono); font-size: 12px; color: var(--text-hi); }
.motion-val  { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); }
.motion-bar {
  height: 4px;
  background: var(--neutral-3);
  border-radius: var(--r-pill);
  position: relative;
  overflow: hidden;
}
.motion-bar::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 30%;
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  animation: slide 2.4s var(--ease-out) infinite;
}
@keyframes slide {
  0%, 10%   { transform: translateX(0); }
  50%, 60%  { transform: translateX(230%); }
  100%      { transform: translateX(0); }
}

/* =========================================================
   PRINCIPLE TILES
   ========================================================= */
.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.principle {
  padding: var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.principle-no {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: var(--tracking-caps);
}
.principle h4 { color: var(--text-hi); font-size: 18px; line-height: 1.2; }
.principle p { color: var(--text-mute); font-size: 13px; line-height: 1.55; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  padding: var(--s-10) 0 var(--s-9);
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.hero h1 { font-size: clamp(48px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p.lede { font-size: 18px; color: var(--text-mute); max-width: 520px; line-height: 1.55; margin-top: var(--s-5); }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-mute);
  margin-top: var(--s-6);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--s-4);
}
.hero-meta span strong { color: var(--text-hi); font-weight: 500; }

/* =========================================================
   GRID UTILS
   ========================================================= */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.col { display: flex; flex-direction: column; gap: var(--s-3); }

/* =========================================================
   FOOTER
   ========================================================= */
.foot {
  padding: var(--s-7) 0;
  border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; gap: var(--s-4);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-mute);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
  :root { --fs-display: 56px; --fs-h1: 44px; --fs-h2: 32px; }
  .hero-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .stepper { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .principles { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .section { padding: var(--s-7) 0; }
}