/* Shared component finishes adapted from tok.html. Layouts live in site.css. */
:root {
  --surface-glass: rgba(11, 15, 25, .72);
  --border-glass: rgba(255, 255, 255, .08);
  --brand-glow: rgba(16, 185, 129, .22);
}
body {
  background:
    radial-gradient(at 0% 0%, #10b9811f, transparent 50%),
    radial-gradient(at 100% 10%, #6366f124, transparent 50%),
    radial-gradient(at 80% 90%, #10b98117, transparent 50%),
    #030508;
}
::selection { background: #10b981; color: #030508; }
.site-header {
  background: var(--surface-glass);
  border-color: var(--border-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.brand { background: transparent; }
.button, .nav-cta, .rate-select, .copy-code { border-radius: 12px; }
.button, .nav-cta {
  font-weight: 800;
  transition: transform .25s, background .25s, border-color .25s, box-shadow .25s;
}
.primary, .nav-cta {
  background: linear-gradient(110deg, #10b981, #34d399 65%, #5eead4);
  box-shadow: 0 10px 28px #10b98126;
}
.primary:hover, .nav-cta:hover { box-shadow: 0 12px 32px #10b98140; }
.button:active, .nav-cta:active { transform: scale(.98); }
.secondary, .light { background: #111726e6; border-color: #ffffff1a; }
.secondary:hover, .light:hover { background: #1a2236; border-color: #ffffff33; }
.announcement {
  background: linear-gradient(100deg, #10b9811a, #10b98126, #6366f11a);
  border-color: #10b9814d;
  color: #a7f3d0;
}
.accent-word {
  background-image: linear-gradient(135deg, #fff 15%, #d1fae5 60%, #34d399);
}
.feature-card, .resource, .checkout-card, .event-card, .product-flow,
.code-window, .developer-workspace, .calculator, .legacy-details {
  background: linear-gradient(135deg, #1a223666, #0b0f1999);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px #ffffff04;
}
.feature-card, .resource, .savings-preview {
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), border-color .4s, box-shadow .4s;
}
.feature-card:hover, .resource:hover, .savings-preview:hover {
  border-color: #34d39966;
  box-shadow: 0 20px 40px -15px #10b98133, 0 0 20px #10b9810d;
}
.checkout-card { border-radius: 24px; box-shadow: 0 24px 64px #0006; }
.float-label, .mini-payment, .toast {
  background: #0b0f19eb;
  border-color: var(--border-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.coin-tab, .rate-select, .demo-address { background: #111726cc; border-color: #ffffff1a; }
.coin-tab.active, .code-tabs button.active {
  color: #f8fafc;
  background: #10b98133;
  border-color: #10b981;
}
.rate-select { min-height: 44px; }
.rate-select option { background: #111726; }
.calculator-result, .savings-preview, .closing {
  background: radial-gradient(ellipse at 100% 0, #10b9811f, transparent 65%), linear-gradient(135deg, #0b0f19, #070a11);
  border-color: #10b9814d;
}
.toast { border-color: #10b98180; border-radius: 16px; }
.code-toolbar, .window-bar { background: #070a1180; border-color: var(--border-glass); }
.security-banner, .notice, .demo-stage, .product-checkout { border-color: #34d39926; }
.menu-toggle { background: #111726; border-color: #ffffff1a; border-radius: 12px; }
:is(a, button, input, select, summary):focus-visible { outline: 2px solid #6ee7b7; outline-offset: 4px; }
@media (min-width: 851px) {
  nav { gap: 2px; padding: 6px; background: #0b0f19cc; border: 1px solid #ffffff0d; border-radius: 999px; }
  nav a { padding: 9px 13px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
  nav a:hover, nav a[aria-current] { color: #fff; background: #ffffff0d; }
  nav a[aria-current]:after { display: none; }
  .nav-wrap { gap: 20px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .feature-card:hover, .resource:hover { transform: translateY(-5px); }
}
@media (max-width: 850px) {
  nav { background: #070a11f5; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
}
@media (prefers-reduced-motion: reduce) {
  .button:active, .nav-cta:active { transform: none; }
}

/* Navigation matches the original Toknex pill reference. */
#site-nav a { display: flex; align-items: center; gap: 9px; font-weight: 700; color: #cbd0da; }
.nav-demo-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #6ed6a7; }
.header-account { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.login-link { color: #cbd0da; font-size: 12px; font-weight: 700; padding-block: 12px; }
.login-link:hover { color: #6ee7b7; }
@media (min-width: 851px) {
  #site-nav {
    justify-content: space-between;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #ffffff0a;
    border-radius: 999px;
    background: #0b0f19cc;
    box-shadow: inset 0 0 0 1px #ffffff02;
  }
  #site-nav a { padding: 10px 14px; font-size: 13px; line-height: 1.5; }
  #site-nav a:hover, #site-nav a[aria-current] { color: #fff; background: #ffffff05; }
}
@media (min-width: 851px) and (max-width: 1100px) {
  .nav-wrap { gap: 10px; }
  .nav-wrap .brand { padding-inline: 4px; }
  .nav-wrap .brand-logo { width: 112px; }
  #site-nav { gap: 0; padding: 6px; }
  #site-nav a { padding: 10px 9px; font-size: 11px; gap: 6px; }
  .nav-cta { padding: 10px 12px; gap: 9px; font-size: 11px; }
  .header-account { gap: 9px; }
  #site-nav a { padding-inline: 6px; }
}
@media (max-width: 600px) {
  .header-account { margin-left: auto; gap: 10px; }
  .header-account .nav-cta { display: inline-flex; padding: 9px 12px; font-size: 11px; }
  .header-account .nav-cta span { display: none; }
  .login-link { font-size: 11px; }
  .nav-wrap .brand-logo { width: 100px; }
  .nav-wrap .brand { padding-inline: 0; }
}