/* ==========================================================================
   Flokk — design tokens
   Flat, clinical product UI. Landing page may extend with gradients/glow.
   Palette per the Flokk style guide (Swiss banking meets developer tooling).
   ========================================================================== */

:root {
  --bg:            #F7F8FA;
  --surface:       #FFFFFF;
  --surface2:      #EEF0F4;
  --border:        #D4D8E1;
  --border-hover:  #B8BCC8;
  --text:          #0F1729;
  --text-muted:    #6B7186;
  --text-hint:     #9BA0B2;
  --accent:        #16825D;
  --accent-hover:  #12704F;
  --accent-light:  #E8F5EF;
  --accent-text:   #0A5C3F;
  --danger:        #D4342A;
  --danger-light:  #FDF0EF;
  --danger-text:   #8C1D16;
  --warning:       #B8860B;
  --warning-light: #FEF8E7;
  --warning-text:  #7A590A;
  --success:       #16825D;
  --success-light: #E8F5EF;

  --font:  system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono:  ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, monospace;
  /* Landing page only: a distinctive serif for editorial headline. */
  --font-display: ui-serif, 'Iowan Old Style', 'Charter', 'Apple Garamond',
                  'Baskerville', 'Times New Roman', Georgia, serif;

  --radius:    8px;
  --radius-lg: 12px;
}

[data-theme="dark"] {
  --bg:            #0C0F18;
  --surface:       #141825;
  --surface2:      #1C2133;
  --border:        #2A3049;
  --border-hover:  #3A4160;
  --text:          #E4E7F0;
  --text-muted:    #8B90A6;
  --text-hint:     #5D6280;
  --accent:        #2DD4A0;
  --accent-hover:  #25B888;
  --accent-light:  #0F2A22;
  --accent-text:   #2DD4A0;
  --danger:        #F87171;
  --danger-light:  #2A1519;
  --danger-text:   #F87171;
  --warning:       #FBBF24;
  --warning-light: #2A2210;
  --warning-text:  #FBBF24;
  --success:       #2DD4A0;
  --success-light: #0F2A22;
}

/* ==========================================================================
   Base reset
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { min-height: 100%; }

html { background: var(--bg); }
body {
  font-family: var(--font);
  background: transparent;
  color: var(--text);
  line-height: 1.5;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Page-wide backdrop
   Three stacked fixed divs, painted behind all content. Kept as concrete
   elements (rather than body pseudos) so there's no ambiguity about which
   stacking context they belong to. .page-bg is the wrapper; children are
   the individual layers stacked in DOM order.
   ========================================================================== */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.page-bg > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-bg__aurora {
  background:
    radial-gradient(55% 45% at 18% 30%, rgba(45, 212, 160, 0.22), transparent 60%),
    radial-gradient(45% 55% at 80% 20%, rgba(37, 184, 136, 0.20), transparent 62%),
    radial-gradient(60% 50% at 65% 80%, rgba(22, 130, 93, 0.18),  transparent 65%);
  filter: blur(20px) saturate(130%);
  animation: aurora-drift 32s ease-in-out infinite alternate;
}

.page-bg__grid {
  background-image:
    linear-gradient(to right, rgba(228, 231, 240, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(228, 231, 240, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at center, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, black 40%, transparent 85%);
}

.page-bg__grain {
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Every direct child of body after .page-bg needs its own stacking layer
   so it sits ABOVE the backdrop. .navbar is excluded because it has its
   own position:fixed + z-index:100 and shouldn't be reset. */
body > *:not(.page-bg):not(.navbar) {
  position: relative;
  z-index: 1;
}

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

.muted { color: var(--text-muted); font-size: 12px; }

/* ==========================================================================
   Layout
   ========================================================================== */

.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }

/* ==========================================================================
   Nav (shared)
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 56px;
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
}
.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  max-width: 960px;
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-header nav a {
  color: var(--text-muted);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 160ms, color 160ms;
}
.site-header nav a:hover { color: var(--text); background: var(--surface2); }
.site-header nav a.active {
  background: var(--accent-light);
  color: var(--accent-text);
  font-weight: 500;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.brand-dot  { color: var(--accent); }
.brand-mark { flex-shrink: 0; display: block; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius);
  border: 0.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; }
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover { background: var(--surface2); border-color: var(--border-hover); }
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger-light); }
.btn-small { padding: 4px 10px; font-size: 12px; }

/* ==========================================================================
   Cards / stat cards / list rows
   ========================================================================== */

.card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card-header {
  padding: 16px 20px;
  border-bottom: 0.5px solid var(--border);
  font-size: 14px;
  font-weight: 500;
}
.card-body { padding: 20px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.stat-label { font-size: 12px; color: var(--text-muted); }
.stat-value { font-size: 22px; font-weight: 500; color: var(--text); line-height: 1.2; margin-top: 4px; }
.stat-sub { font-size: 11px; color: var(--text-hint); margin-top: 4px; }

.list { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  transition: background 160ms;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--surface2); }

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--surface2);
  color: var(--text-muted);
}
.badge-pro       { background: var(--accent-light);  color: var(--accent-text); }
.badge-dedicated { background: var(--warning-light); color: var(--warning-text); }
.badge-status    { background: var(--success-light); color: var(--accent-text); }

/* ==========================================================================
   Code / mono
   ========================================================================== */

code, .mono {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--surface2);
  color: var(--text);
  padding: 2px 6px;
  border-radius: 6px;
}
.code-block {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--surface2);
  padding: 10px 14px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  word-break: break-all;
}

/* ==========================================================================
   Inputs
   ========================================================================== */

.input, select.input {
  background: var(--surface2);
  color: var(--text);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font);
}
.input:hover { border-color: var(--border-hover); }
.input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }

/* ==========================================================================
   Status dot
   ========================================================================== */

.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
}
.dot-warning { background: var(--warning); }
.dot-danger  { background: var(--danger); }

/* ==========================================================================
   HTMX
   ========================================================================== */

.htmx-indicator { opacity: 0; transition: opacity 200ms; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-request { opacity: 0.6; pointer-events: none; }
button.htmx-request, .btn.htmx-request { opacity: 0.6; pointer-events: none; }
form.htmx-request button[type="submit"],
form.htmx-request .btn { opacity: 0.6; pointer-events: none; }

/* ==========================================================================
   Dashboard layout
   ========================================================================== */

.dash-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
}
.dash-nav__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.dash-nav__links { display: flex; gap: 4px; }
.dash-nav__links a {
  color: var(--text-muted);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 160ms, background 160ms;
}
.dash-nav__links a:hover { color: var(--text); background: var(--surface2); }
.dash-nav__links a.active {
  background: var(--accent-light);
  color: var(--accent-text);
  font-weight: 500;
}
.dash-nav__right { display: flex; align-items: center; gap: 12px; }

.dash-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.dash-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

.breadcrumb {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span { color: var(--text); }

/* Tabs */
.tabs {
  display: flex;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: -0.5px;
}
.tab {
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
  transition: color 160ms, border-color 160ms;
}
.tab:hover { color: var(--text); }
.tab--active {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
  font-weight: 500;
}

/* Fields */
.field { display: block; margin-bottom: 16px; }
.field__label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Dialog */
.dash-dialog {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  padding: 0;
  width: 480px;
  max-width: 90vw;
  /* Center the dialog on screen */
  margin: auto;
  position: fixed;
  inset: 0;
  height: fit-content;
}
.dash-dialog::backdrop { background: rgba(0,0,0,0.6); }
.dash-dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 0.5px solid var(--border);
}
.dash-dialog__head h2 { font-size: 14px; font-weight: 500; }
.dash-dialog__body { padding: 20px; }
.dash-dialog__foot {
  padding: 12px 20px;
  border-top: 0.5px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* Credential rows (shown once after database creation) */
.cred-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: var(--radius);
  border: 0.5px solid var(--border);
}
.cred-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-hint);
  min-width: 64px;
  flex-shrink: 0;
}
.cred-value {
  flex: 1;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  user-select: all;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cred-copy {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 160ms, background 160ms;
  flex-shrink: 0;
}
.cred-copy:hover { color: var(--text); background: var(--border); }
.cred-copy.copied { color: var(--accent); }

/* Highlight the currently-active plan card */
.active-plan {
  border-color: var(--accent);
  background: var(--accent-light);
}

/* ==========================================================================
   Legal pages
   ========================================================================== */

.legal-nav {
  height: 56px;
  border-bottom: 0.5px solid var(--border);
  background: var(--surface);
}
.legal-nav__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.legal-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 96px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.legal-content h1 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
}
.legal-content h2 {
  font-size: 16px;
  font-weight: 500;
  margin-top: 40px;
  margin-bottom: 12px;
  color: var(--text);
}
.legal-content h3 {
  font-size: 14px;
  font-weight: 500;
  margin-top: 24px;
  margin-bottom: 8px;
}
.legal-content p {
  margin-bottom: 12px;
  color: var(--text-muted);
}
.legal-content ul {
  margin-bottom: 12px;
  padding-left: 20px;
}
.legal-content li {
  margin-bottom: 6px;
  color: var(--text-muted);
}
.legal-content a { color: var(--accent-text); }
.legal-content a:hover { color: var(--accent-hover); }
.legal-updated {
  font-size: 12px;
  color: var(--text-hint);
  margin-bottom: 32px;
}
.legal-table {
  overflow-x: auto;
  margin: 16px 0;
}
.legal-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.legal-table th {
  text-align: left;
  font-weight: 500;
  color: var(--text);
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--border);
}
.legal-table td {
  color: var(--text-muted);
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--border);
}

/* ==========================================================================
   Landing page — extended styles (gradients/glow/decoration allowed here)
   Uses the same design tokens above for color coherence.
   ========================================================================== */

/* Landing page always uses dark palette for the hero backdrop to make the
   aurora read well, regardless of the user's theme preference. */
.landing {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #E4E7F0; /* --text dark */
  /* Establish a local stacking context so descendant z-indexes (.euromap,
     .hero-hit, .cta-row .btn) are measured against each other rather than
     leaking into the root context. */
  isolation: isolate;
}
.landing .site-header {
  background: transparent;
  border-bottom: none;
  position: relative;
}
.landing .site-header nav a { color: #8B90A6; }
.landing .site-header nav a:hover { color: #E4E7F0; background: transparent; }
.landing .brand { color: #E4E7F0; }
.landing .brand-dot { color: #2DD4A0; }

@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1);     opacity: 0.9; }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(2%, -2%, 0) scale(1.02); opacity: 0.85; }
}

.landing > * { position: relative; z-index: 2; }

/* Stacking rules for the hero.
   .landing > *  already puts main + .euromap at z-index 2, and the .euromap
   wins visually because it's later in DOM order. That's the trigger layer.
   Problem: main.container (z:2 + position:relative) is itself a stacking
   context, so any z-index we give .cta-row gets trapped inside main and
   can't rise above .euromap. Undo the stacking context on main with
   z-index:auto, then promote .cta-row into .landing's own context at z:3
   so the buttons stay above the map.                                        */
.landing main.container {
  z-index: auto; /* keeps position:relative but drops the stacking context */
  pointer-events: none;
}
.landing .hero-editorial,
.landing .display,
.landing .eyebrow,
.landing .lede {
  pointer-events: none;
}
/* The cta-row itself rises above the trigger layer so its buttons paint
   on top, but stays pointer-events: none so the empty gaps between the
   buttons still forward events to the hero-hit below. Only the buttons
   themselves re-enable events. (cta-row already has its own stacking
   context via opacity/animation, so the z-index has to go on cta-row
   itself — a z-index on the child buttons would be trapped inside.)     */
.landing .cta-row {
  position: relative;
  z-index: 3;
  pointer-events: none;
}
.landing .cta-row > .btn {
  pointer-events: auto;
}

/* Status pill in landing nav */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: #8B90A6;
  padding: 6px 10px;
  border: 0.5px solid #2A3049;
  border-radius: 20px;
}
.status-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2DD4A0;
  box-shadow: 0 0 10px #2DD4A0;
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Hero */
.hero-editorial {
  padding: 64px 0 96px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: #8B90A6;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: rise 900ms cubic-bezier(.2,.7,.1,1) 100ms forwards;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: #25B888; }
.eyebrow .coord { color: #2DD4A0; }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.25rem, 9.5vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-top: 24px;
  max-width: 14ch;
  color: #E4E7F0;
}
.display .line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  animation: rise 1000ms cubic-bezier(.2,.7,.1,1) forwards;
}
.display .line:nth-child(1) { animation-delay: 220ms; }
.display .line:nth-child(2) { animation-delay: 360ms; }
.display em {
  font-style: italic;
  color: #2DD4A0;
  position: relative;
}
.display em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.08em;
  height: 0.08em;
  background: linear-gradient(90deg, transparent, #2DD4A0 30%, #2DD4A0 70%, transparent);
  opacity: 0.4;
}

.lede {
  margin-top: 32px;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.45;
  max-width: 38ch;
  color: #8B90A6;
  font-style: italic;
  opacity: 0;
  animation: rise 1000ms cubic-bezier(.2,.7,.1,1) 520ms forwards;
  border-left: 1px solid #25B888;
  padding-left: 16px;
}

.cta-row {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  animation: rise 1000ms cubic-bezier(.2,.7,.1,1) 680ms forwards;
}

/* Landing-only CTA: pill-shaped, glowing variants of the shared buttons */
.landing .btn {
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
}
.landing .btn-primary {
  background: #2DD4A0;
  color: #06211A;
  border-color: #2DD4A0;
  box-shadow: 0 0 0 1px rgba(45,212,160,0.5),
              0 10px 40px -12px rgba(45,212,160,0.55),
              inset 0 1px 0 rgba(255,255,255,0.3);
}
.landing .btn-primary:hover {
  background: #5AE3BA;
  border-color: #5AE3BA;
  color: #06211A;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(45,212,160,0.7),
              0 14px 50px -12px rgba(45,212,160,0.7),
              inset 0 1px 0 rgba(255,255,255,0.4);
}
.landing .btn-primary .arrow { transition: transform 240ms ease; }
.landing .btn-primary:hover .arrow { transform: translateX(4px); }
.landing .btn-outline {
  background: transparent;
  color: #E4E7F0;
  border-color: #2A3049;
}
.landing .btn-outline:hover {
  background: rgba(228,231,240,0.04);
  border-color: #3A4160;
  color: #E4E7F0;
}

@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* European map backdrop.
   Base outline is an <img> referencing the recolored simplemaps Europe SVG.
   A sibling <svg> with the same 1000×684 viewBox draws city markers on top —
   as long as both use preserveAspectRatio xMidYMid meet inside the same box,
   they stay aligned at every screen size. */
.euromap {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: clamp(0px, 22%, 280px);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: rise 1600ms cubic-bezier(.2,.7,.1,1) 500ms forwards;
}
.euromap .euromap-base,
.euromap .euromap-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.euromap .euromap-base { user-select: none; }

/* The overlay SVG (cities, links, focus blob) must not block hover on the
   base SVG's countries. Everything inside it stays decorative. */
.euromap .euromap-overlay { pointer-events: none; }

/* Country paths are decorative only — real hit detection happens on the
   full-hero .hero-hit overlay via JS + elementsFromPoint. The per-path
   :hover is still wired as a fallback in case JS fails. */
.euromap .euromap-base path {
  pointer-events: all;
  transition: fill 220ms ease, stroke 220ms ease, filter 220ms ease;
}
.euromap .euromap-base path.focused,
.euromap .euromap-base path:hover {
  fill: rgba(45, 212, 160, 0.14);
  stroke: rgba(45, 212, 160, 0.65);
  stroke-width: 0.9;
  filter: drop-shadow(0 0 6px rgba(45, 212, 160, 0.35));
}

/* Full-hero trigger surface. Absolutely covers the whole hero section so
   the mint cursor shows and country hover works no matter where the mouse
   is (including over the headline and lede). Invisible — no background,
   no border. */
.landing .hero-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
  background: transparent;
  border: none;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><defs><radialGradient id='g' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%232DD4A0' stop-opacity='1'/><stop offset='40%25' stop-color='%232DD4A0' stop-opacity='0.6'/><stop offset='100%25' stop-color='%232DD4A0' stop-opacity='0'/></radialGradient></defs><circle cx='14' cy='14' r='12' fill='url(%23g)'/><circle cx='14' cy='14' r='2.5' fill='%232DD4A0'/></svg>") 14 14, default;
}

/* Focus path: a clone of the hovered country painted by JS into one of two
   alternating overlays. Crossfading them with a blur filter creates the
   illusion of a glowing blob drifting between countries. */
.euromap .focus-path {
  fill: rgba(45, 212, 160, 0.28);
  stroke: rgba(45, 212, 160, 0.75);
  stroke-width: 1;
  stroke-linejoin: round;
  filter: blur(2px) drop-shadow(0 0 6px rgba(45, 212, 160, 0.35));
  opacity: 0;
  pointer-events: none;
  /* Fade out over 1s for a lingering after-glow; fade in quickly (260ms)
     so the highlight tracks the cursor responsively. */
  transition: opacity 1000ms cubic-bezier(.2, .7, .1, 1);
}
.euromap .focus-path.active {
  opacity: 1;
  transition: opacity 260ms cubic-bezier(.2, .7, .1, 1);
}

/* Dotted faded lines between all city pairs. Very subtle — just enough
   to suggest a constellation. */
.euromap .city-links line {
  stroke: rgba(45, 212, 160, 0.12);
  stroke-width: 0.4;
  stroke-dasharray: 0.8 3;
  stroke-linecap: round;
  fill: none;
  animation: city-link-flow 32s linear infinite;
}
@keyframes city-link-flow { to { stroke-dashoffset: -60; } }

.euromap .city--soon circle {
  fill: rgba(228, 231, 240, 0.28);
}
.euromap .city-soon-labels text {
  font-family: var(--mono);
  fill: #5D6280;
  letter-spacing: 0.08em;
}

.euromap .city--live .core {
  fill: #2DD4A0;
  filter: drop-shadow(0 0 14px rgba(45, 212, 160, 0.95));
  transform-box: fill-box;
  transform-origin: center;
  animation: city-pulse 2.8s ease-in-out infinite;
}
.euromap .city--live .halo {
  fill: none;
  stroke: #2DD4A0;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: halo-ring 3.4s ease-out infinite;
}
.euromap .city--live .halo--1 { animation-delay: 0s; }
.euromap .city--live .halo--2 { animation-delay: 0.6s; }
.euromap .city--live .halo--3 { animation-delay: 1.2s; }

.euromap .city-label {
  font-family: var(--mono);
  font-size: 6px;
  fill: #2DD4A0;
  letter-spacing: 0.16em;
}
.euromap .city-soon-labels text { font-size: 6px; }

@keyframes city-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@keyframes halo-ring {
  0%   { opacity: 0.7; transform: scale(0.3); }
  100% { opacity: 0;   transform: scale(2.2); }
}

@media (max-width: 900px) {
  .euromap { display: none; }
}

/* Landing meta strip */
.meta-strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 0;
  border-top: 0.5px solid #2A3049;
  z-index: 2;
}
.meta-strip .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: #5D6280;
}
.meta-strip .sep { color: #25B888; padding: 0 8px; }

/* ==========================================================================
   Navbar (fixed, transparent → solid after scroll)
   ========================================================================== */

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 64px;
  background: transparent;
  border-bottom: 0.5px solid transparent;
  transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}
.navbar--scrolled {
  background: rgba(12, 15, 24, 0.6);
  border-bottom-color: var(--border);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.navbar__inner {
  max-width: 1180px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.navbar__links {
  display: flex;
  gap: 6px;
}
.navbar__links a {
  color: var(--text-muted);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 160ms, background 160ms;
}
.navbar__links a:hover { color: var(--text); background: rgba(228,231,240,0.04); }
.navbar__cta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-signin {
  color: var(--text-muted);
  font-size: 13px;
  transition: color 160ms;
}
.nav-signin:hover { color: var(--text); }
.btn-nav { padding: 7px 14px; font-size: 13px; }

@media (max-width: 780px) {
  .navbar__links { display: none; }
  .nav-signin    { display: none; }
}

/* Hero: add top offset so content clears the fixed navbar */
.landing { padding-top: 64px; }

/* ==========================================================================
   Sections (base)
   ========================================================================== */

.section {
  padding: 96px 0;
  border-top: 0.5px solid var(--border);
  background: transparent;
  position: relative;
}
/* No divider line directly under the hero. */
.landing + .section { border-top: none; }
/* Subtle tints on alternating sections so rhythm is still readable over
   the aurora, without hiding the backdrop entirely. */
.section--alt { background: rgba(20, 24, 37, 0.35); }
.section--cta { background: rgba(28, 33, 51, 0.45); }

.section__container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.section__head {
  text-align: center;
  margin-bottom: 56px;
}
.section__head h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 22ch;
  margin: 0 auto 12px;
}
.section__lead {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto;
}

/* ==========================================================================
   Feature grid
   ========================================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 780px) {
  .feature-grid { grid-template-columns: 1fr; }
}
.feature {
  background: var(--surface);
  padding: 28px 28px 32px;
}
.feature .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}
.feature h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.feature p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}
.feature code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface2);
  color: var(--text);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ==========================================================================
   Steps (how it works)
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 12%;
  right: 12%;
  border-top: 1px dashed var(--border);
  z-index: 0;
}
@media (max-width: 780px) {
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .steps::before { display: none; }
}
.step { position: relative; z-index: 1; text-align: center; }
.step__num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent-text);
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border: 0.5px solid var(--border);
}
.step h3 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text);
}
.step p {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 32ch;
  margin: 0 auto;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.price-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  margin-top: 28px;
}
.price-toggle button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms, color 160ms;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.price-toggle button.active {
  background: var(--accent-light);
  color: var(--accent-text);
}
.price-toggle .save {
  font-size: 10px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(45,212,160,0.12);
  padding: 2px 6px;
  border-radius: 999px;
}

/* Show/hide prices based on selected cycle */
[data-cycle="annual"]  .price-monthly { display: none; }
[data-cycle="monthly"] .price-annual  { display: none; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
.plan {
  position: relative;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.plan--popular {
  background: var(--accent-light);
  border: 0.5px solid var(--accent);
}
.plan__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #05241a;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.plan__name {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: none;
  margin-bottom: 12px;
}
.plan__price {
  font-size: 40px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.plan__price .currency { font-size: 24px; font-weight: 500; margin-right: 2px; }
.plan__price .per      { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-left: 2px; }
.plan__price .from     { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-right: 4px; }
.plan__hint {
  font-size: 12px;
  color: var(--text-hint);
  margin-top: 6px;
  margin-bottom: 24px;
}
.plan__features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
}
.plan__features li {
  font-size: 13px;
  color: var(--text);
  padding: 8px 0 8px 22px;
  border-bottom: 0.5px solid var(--border);
  position: relative;
}
.plan__features li:last-child { border-bottom: none; }
.plan__features li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 14px;
  width: 10px;
  height: 5px;
  border-left: 1.2px solid var(--accent);
  border-bottom: 1.2px solid var(--accent);
  transform: rotate(-45deg);
}
.btn-block { display: flex; justify-content: center; width: 100%; }

.pricing-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 32px;
}

/* ==========================================================================
   Compliance / Trust
   ========================================================================== */

.compliance-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .compliance-grid { grid-template-columns: 1fr; }
}
.trust-list { display: grid; gap: 12px; }
.trust-item {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.trust-item .icon {
  width: 18px; height: 18px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.trust-item h3 { font-size: 14px; font-weight: 500; margin-bottom: 4px; color: var(--text); }
.trust-item p  { font-size: 13px; color: var(--text-muted); }

.residency-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: sticky;
  top: 96px;
}
.residency-card__head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--border);
}
.residency-card__head .icon {
  width: 24px; height: 24px;
  color: var(--accent);
  flex-shrink: 0;
}
.residency-card__title { font-size: 14px; font-weight: 500; color: var(--text); }
.residency-card__sub   { font-size: 12px; color: var(--text-muted); font-family: var(--mono); }
.residency-card__body  { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }

.subproc { margin-bottom: 24px; }
.subproc__label {
  font-size: 11px;
  color: var(--text-hint);
  letter-spacing: 0.08em;
  text-transform: none;
  margin-bottom: 10px;
  font-family: var(--mono);
}
.subproc ul { list-style: none; padding: 0; margin: 0; }
.subproc li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
}
.subproc li:last-child { border-bottom: none; }
.subproc .loc { color: var(--text-hint); font-family: var(--mono); font-size: 12px; }

/* ==========================================================================
   Region voting
   ========================================================================== */

.region-current {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.region-current .live-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse-dot 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.region-current__name { font-size: 14px; font-weight: 500; color: var(--text); }
.region-current__state {
  font-size: 11px;
  color: var(--accent);
  font-family: var(--mono);
  letter-spacing: 0.12em;
}

.region-votes {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}
.region-vote {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  transition: border-color 160ms;
}
.region-vote:hover { border-color: var(--border-hover); }
.region-vote__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.region-vote__name  { font-size: 14px; font-weight: 500; color: var(--text); }
.region-vote__count { font-size: 12px; color: var(--text-muted); font-family: var(--mono); }
.vote-bar {
  height: 4px;
  background: var(--surface2);
  border-radius: 2px;
  overflow: hidden;
}
.vote-bar__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.region-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-hint);
  margin-top: 24px;
}

/* ==========================================================================
   Open source / tech stack
   ========================================================================== */

/* Infinite horizontal marquee.
   Track = two identical groups side by side. Animating translateX from 0
   to -50% keeps the content seamless because by the time the first group
   has fully exited, the second has taken its place. Pauses on hover so
   users can actually read the logos. */
.oss-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  margin-bottom: 32px;
}
.oss-track {
  display: flex;
  width: max-content;
  animation: oss-scroll 42s linear infinite;
}
.oss-marquee:hover .oss-track { animation-play-state: paused; }
.oss-group {
  display: flex;
  align-items: center;
  gap: 72px;
  padding: 0 36px;
  flex-shrink: 0;
}
/* Each logo is a fixed-size slot holding both a mask-colored icon and a
   text label, absolutely stacked. The icon is a <span> that uses the
   logo SVG as a CSS mask over a solid accent background, so we can paint
   it in mint and layer a drop-shadow glow exactly like the country
   highlights. On hover the two elements crossfade. */
.oss-logo {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 40px;
}
.oss-logo .oss-icon,
.oss-logo .oss-name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 280ms ease, transform 280ms ease, filter 280ms ease;
}
.oss-logo .oss-icon {
  background-color: #2DD4A0;
  -webkit-mask: var(--mask) center / contain no-repeat;
          mask: var(--mask) center / contain no-repeat;
  opacity: 0.85;
  filter: drop-shadow(0 0 10px rgba(45, 212, 160, 0.35));
}
.oss-logo .oss-name {
  opacity: 0;
  transform: scale(0.96);
  font-family: var(--mono);
  font-size: 13px;
  color: #2DD4A0;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(45, 212, 160, 0.35);
}
.oss-logo:hover .oss-icon {
  opacity: 0;
  transform: scale(1.04);
}
.oss-logo:hover .oss-name {
  opacity: 1;
  transform: scale(1);
}
@keyframes oss-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.oss-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto;
}

/* ==========================================================================
   Final CTA
   ========================================================================== */

.final-cta { text-align: center; }
.final-cta h2 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--text);
}
.cta-row--center {
  margin-top: 32px;
  justify-content: center;
}
.section--cta .cta-row { opacity: 1; transform: none; animation: none; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer-v2 {
  background: rgba(12, 15, 24, 0.6);
  border-top: 0.5px solid var(--border);
  padding: 64px 0 40px;
  position: relative;
}
.site-footer-v2__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.2fr 2.4fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .site-footer-v2__inner { grid-template-columns: 1fr; gap: 32px; }
}
.footer-brand .muted { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 540px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
.footer-cols h4 {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.footer-cols a {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  padding: 5px 0;
  transition: color 160ms;
}
.footer-cols a:hover { color: var(--text); }

.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
@media (max-width: 900px) { .footer-meta { align-items: flex-start; } }
.made-in {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.footer-github {
  color: var(--text-muted);
  display: inline-flex;
  transition: color 160ms;
}
.footer-github:hover { color: var(--text); }

/* ==========================================================================
   Auth pages (login / register)
   ========================================================================== */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.auth-brand {
  margin-bottom: 32px;
  display: block;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.auth-card h1 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
}
.auth-github {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  background: var(--surface2);
  color: var(--text);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
.auth-github:hover { background: var(--bg); border-color: var(--border-hover); }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--text-hint);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--border);
}
.auth-card .field { margin-bottom: 14px; }
.auth-card .input { width: 100%; }
.auth-submit {
  width: 100%;
  margin-top: 4px;
  justify-content: center;
}
.auth-passkey {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 16px;
  padding: 8px;
  font-size: 12px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 160ms;
}
.auth-passkey:hover { color: var(--text); }
.auth-alt {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-muted);
}
.auth-alt a { color: var(--accent-text); }
.auth-error {
  font-size: 13px;
  color: var(--danger);
  padding: 8px 12px;
  background: var(--danger-light);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.auth-field-error {
  display: block;
  font-size: 12px;
  color: var(--danger);
  margin-top: 4px;
}

/* ==========================================================================
   Status page
   ========================================================================== */

.status-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.status-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.status-header h1 { font-size: 20px; font-weight: 500; }

/* ==========================================================================
   Documentation
   ========================================================================== */

.docs-nav {
  height: 56px;
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.docs-nav__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.docs-nav__label {
  font-size: 13px;
  color: var(--text-muted);
  padding-left: 16px;
  border-left: 0.5px solid var(--border);
}

.docs-layout {
  display: flex;
  min-height: calc(100vh - 56px);
}

/* Sidebar */
.docs-sidebar {
  width: 220px;
  flex-shrink: 0;
  padding: 24px 12px;
  border-right: 0.5px solid var(--border);
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  background: var(--surface);
}
.docs-sidebar__section {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-hint);
  padding: 0 10px;
  margin: 24px 0 6px;
}
.docs-sidebar__section:first-child { margin-top: 0; }
.docs-sidebar a {
  display: block;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-muted);
  border-radius: 6px;
  transition: color 160ms, background 160ms;
}
.docs-sidebar a:hover { color: var(--text); background: var(--surface2); }
.docs-sidebar a.active {
  background: var(--accent-light);
  color: var(--accent-text);
  font-weight: 500;
}

/* Content */
.docs-content {
  flex: 1;
  max-width: 720px;
  padding: 40px 48px 96px;
  font-size: 14px;
  line-height: 1.7;
}
.docs-content h1 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
}
.docs-content h2 {
  font-size: 16px;
  font-weight: 500;
  margin-top: 40px;
  margin-bottom: 12px;
  color: var(--text);
}
.docs-content h3 {
  font-size: 14px;
  font-weight: 500;
  margin-top: 24px;
  margin-bottom: 8px;
}
.docs-content p {
  margin-bottom: 12px;
  color: var(--text-muted);
}
.docs-content ul, .docs-content ol {
  margin-bottom: 12px;
  padding-left: 20px;
}
.docs-content li {
  margin-bottom: 6px;
  color: var(--text-muted);
}
.docs-content a { color: var(--accent-text); }
.docs-content a:hover { color: var(--accent-hover); }
.docs-content strong { font-weight: 500; color: var(--text); }
.docs-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 16px 0;
}
.docs-content th {
  text-align: left;
  font-weight: 500;
  color: var(--text);
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--border);
}
.docs-content td {
  padding: 10px 12px;
  color: var(--text-muted);
  border-bottom: 0.5px solid var(--border);
}

/* Code blocks */
.docs-code {
  background: var(--surface2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  margin: 12px 0;
  white-space: pre;
}
.docs-code .kw  { color: var(--accent-text); }
.docs-code .str { color: #FBBF24; }
.docs-code .cm  { color: var(--text-hint); font-style: italic; }
.docs-code .fn  { color: #93C5FD; }
.docs-code .num { color: #F87171; }
.docs-code .op  { color: var(--text-muted); }

/* Inline code in docs content */
.docs-content code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text);
}

/* Search trigger */
.docs-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--surface2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 160ms, color 160ms;
}
.docs-search-trigger:hover { border-color: var(--border-hover); color: var(--text); }
.docs-search-trigger kbd {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-hint);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  border: 0.5px solid var(--border);
}

/* Search overlay */
.docs-search-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);
}
.docs-search-modal {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 201;
  width: 520px;
  max-width: 90vw;
  max-height: 440px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.docs-search-input {
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--font);
  border: none;
  border-bottom: 0.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  outline: none;
  width: 100%;
}
.docs-search-results {
  overflow-y: auto;
  padding: 8px;
}
.docs-search-result {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms;
}
.docs-search-result:hover { background: var(--surface2); }
.docs-search-result__section { font-size: 11px; color: var(--text-hint); }
.docs-search-result__title { font-size: 14px; color: var(--text); }
.docs-search-empty {
  padding: 16px 12px;
  font-size: 13px;
  color: var(--text-hint);
  text-align: center;
}

/* Hamburger: hidden on desktop */
.docs-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

/* Mobile */
@media (max-width: 768px) {
  .docs-hamburger { display: flex; }

  .docs-sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 220ms ease;
  }
  .docs-sidebar--open { transform: translateX(0); }

  .docs-sidebar__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }

  .docs-content {
    padding: 24px 16px 64px;
    max-width: 100%;
    min-width: 0;
  }
  .docs-content pre.docs-code {
    font-size: 12px;
    padding: 12px 14px;
  }
  .docs-nav__label { display: none; }
}

/* Prevent code blocks from blowing out the layout on any screen */
.docs-code { max-width: 100%; }

/* Sidebar backdrop hidden on desktop */
@media (min-width: 769px) {
  .docs-sidebar__backdrop { display: none; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .display .line, .eyebrow, .lede, .cta-row, .euromap { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}