/* =========================================================================
   Arveon Cloud — Design System
   Theme: Deep dark with warm undertones · Mint accent · Serif italic display
   ========================================================================= */

@layer reset, tokens, base, layout, components, utilities;

/* ----- Reset ------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; line-height: 1.15; }
  table { border-collapse: collapse; border-spacing: 0; }
}

/* ----- Tokens ------------------------------------------------------------ */
@layer tokens {
  :root {
    /* Color — surfaces */
    --bg-base: #0a0b0d;
    --bg-raised: #111317;
    --bg-elevated: #161922;
    --bg-overlay: #1c2030;
    --bg-inset: #07080a;

    /* Color — borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-mint: rgba(127, 255, 212, 0.28);

    /* Color — text */
    --text-primary: #f1f2f4;
    --text-secondary: #aeb3bf;
    --text-tertiary: #7c8392;
    --text-muted: #565d6c;
    --text-disabled: #3b4150;

    /* Color — accent */
    --mint: #7FFFD4;
    --mint-soft: #5cd6b0;
    --mint-glow: rgba(127, 255, 212, 0.18);
    --mint-faint: rgba(127, 255, 212, 0.06);
    --cobalt: #4a6cf7;
    --cobalt-faint: rgba(74, 108, 247, 0.08);
    --amber: #f5b545;
    --rose: #f06f6f;
    --green: #5fcf80;

    /* Type */
    --font-display: "Instrument Serif", "Iowan Old Style", "Apple Garamond", "Baskerville", serif;
    --font-body: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    /* Scale — display (serif) */
    --fs-display-xl: clamp(3.4rem, 7vw + 1rem, 7.2rem);
    --fs-display-lg: clamp(2.6rem, 5vw + 1rem, 5rem);
    --fs-display-md: clamp(2rem, 3.6vw + 1rem, 3.4rem);
    --fs-display-sm: clamp(1.6rem, 2vw + 1rem, 2.2rem);

    /* Scale — body */
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;

    /* Layout */
    --container: 1280px;
    --container-narrow: 960px;
    --container-prose: 720px;
    --nav-h: 64px;
    --status-h: 36px;

    /* Radii */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 22px;
    --r-pill: 999px;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
    --shadow-mint: 0 0 0 1px var(--border-mint), 0 8px 32px var(--mint-glow);
  }
}

/* ----- Base -------------------------------------------------------------- */
@layer base {
  html {
    background: var(--bg-base);
    color-scheme: dark;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--text-primary);
    background: var(--bg-base);
    font-feature-settings: "ss01", "cv01", "cv11";
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
  }

  /* Ambient light wash — fixed, subtle */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 80% 50% at 50% -10%, rgba(127, 255, 212, 0.06), transparent 60%),
      radial-gradient(ellipse 60% 40% at 100% 30%, rgba(74, 108, 247, 0.05), transparent 55%);
  }

  /* Grain overlay — subtle */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

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

  ::selection { background: var(--mint); color: var(--bg-base); }

  :focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 2px;
    border-radius: var(--r-xs);
  }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg-base); }
  ::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: var(--r-pill);
    border: 2px solid var(--bg-base);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
}

/* ----- Layout primitives ------------------------------------------------- */
@layer layout {
  .container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-6);
  }
  .container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--sp-6);
  }
  .container-prose {
    max-width: var(--container-prose);
    margin: 0 auto;
    padding: 0 var(--sp-6);
  }

  section { padding: var(--sp-24) 0; }
  section.tight { padding: var(--sp-16) 0; }
  section.loose { padding: var(--sp-32) 0; }

  @media (max-width: 768px) {
    section { padding: var(--sp-16) 0; }
    section.loose { padding: var(--sp-20) 0; }
  }
}

/* ----- Typography -------------------------------------------------------- */
@layer base {
  .display {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.02;
    color: var(--text-primary);
  }
  .display em, .serif-em {
    font-style: italic;
    color: var(--mint);
    font-weight: 400;
  }
  h1.display { font-size: var(--fs-display-xl); }
  h2.display { font-size: var(--fs-display-lg); }
  h3.display { font-size: var(--fs-display-md); }
  h4.display { font-size: var(--fs-display-sm); }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
  }
  .eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--mint);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--mint-glow);
  }

  .lead {
    font-size: var(--fs-xl);
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 60ch;
  }

  .mono { font-family: var(--font-mono); font-size: 0.92em; }

  .text-mint { color: var(--mint); }
  .text-secondary { color: var(--text-secondary); }
  .text-tertiary { color: var(--text-tertiary); }
  .text-muted { color: var(--text-muted); }
}

/* ----- Buttons ----------------------------------------------------------- */
@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 40px;
    padding: 0 var(--sp-5);
    font-size: var(--fs-base);
    font-weight: 500;
    letter-spacing: -0.005em;
    border-radius: var(--r-md);
    transition: all 0.18s var(--ease-out);
    white-space: nowrap;
    line-height: 1;
    position: relative;
    isolation: isolate;
  }
  .btn svg { width: 14px; height: 14px; flex-shrink: 0; }

  .btn-primary {
    background: var(--mint);
    color: #082823;
    box-shadow:
      inset 0 -1px 0 rgba(0,0,0,0.18),
      inset 0 1px 0 rgba(255,255,255,0.25),
      0 1px 0 rgba(127, 255, 212, 0.05),
      0 0 0 1px rgba(127, 255, 212, 0.4),
      0 6px 20px rgba(127, 255, 212, 0.18);
  }
  .btn-primary:hover {
    background: #93ffdb;
    transform: translateY(-1px);
    box-shadow:
      inset 0 -1px 0 rgba(0,0,0,0.18),
      inset 0 1px 0 rgba(255,255,255,0.25),
      0 0 0 1px rgba(127, 255, 212, 0.5),
      0 12px 28px rgba(127, 255, 212, 0.28);
  }

  .btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
  }
  .btn-secondary:hover {
    background: var(--bg-overlay);
    border-color: var(--border-strong);
  }

  .btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    padding: 0 var(--sp-3);
  }
  .btn-ghost:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
  }

  .btn-sm { height: 32px; padding: 0 var(--sp-4); font-size: var(--fs-sm); border-radius: var(--r-sm); }
  .btn-lg { height: 48px; padding: 0 var(--sp-6); font-size: var(--fs-md); }

  .btn-arrow svg { transition: transform 0.2s var(--ease-out); }
  .btn-arrow:hover svg { transform: translateX(3px); }
}

/* ----- Badges & chips ---------------------------------------------------- */
@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 22px;
    padding: 0 var(--sp-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--r-xs);
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-secondary);
  }
  .badge-mint { color: var(--mint); border-color: var(--border-mint); background: var(--mint-faint); }
  .badge-amber { color: var(--amber); border-color: rgba(245, 181, 69, 0.25); background: rgba(245, 181, 69, 0.08); }
  .badge-rose  { color: var(--rose);  border-color: rgba(240, 111, 111, 0.25); background: rgba(240, 111, 111, 0.08); }
  .badge-cobalt{ color: #8aa1ff;     border-color: rgba(74, 108, 247, 0.3);   background: var(--cobalt-faint); }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 30px;
    padding: 0 var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--r-pill);
    transition: all 0.15s var(--ease-out);
  }
  .chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
  .chip[aria-pressed="true"], .chip.active {
    background: var(--mint-faint);
    border-color: var(--border-mint);
    color: var(--mint);
  }
}

/* ----- Status dot -------------------------------------------------------- */
@layer components {
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    position: relative;
    flex-shrink: 0;
  }
  .dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.5;
    animation: pulse 2.4s var(--ease-out) infinite;
  }
  .dot.amber { background: var(--amber); }
  .dot.rose  { background: var(--rose); }

  @keyframes pulse {
    0%   { transform: scale(0.8); opacity: 0.5; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { opacity: 0; }
  }
}

/* ----- Status bar -------------------------------------------------------- */
@layer components {
  .status-bar {
    height: var(--status-h);
    background: var(--bg-inset);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 60;
  }
  .status-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
  }
  .status-bar a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-secondary);
    transition: color 0.15s;
  }
  .status-bar a:hover { color: var(--text-primary); }
  .status-bar .sep {
    display: inline-block;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--text-disabled);
    margin: 0 var(--sp-3);
    vertical-align: middle;
  }
  .status-bar .right { display: flex; align-items: center; gap: var(--sp-4); }
  @media (max-width: 720px) { .status-bar .right .hide-sm { display: none; } }
}

/* ----- Navigation -------------------------------------------------------- */
@layer components {
  .nav {
    height: var(--nav-h);
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 11, 13, 0.72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--border-subtle);
  }
  .nav .container {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-8);
  }
  .nav-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }
  .nav-logo svg { width: 22px; height: 22px; }
  .nav-logo .word { font-style: italic; padding-left: 2px; }

  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-left: var(--sp-4);
  }
  .nav-link {
    height: 32px;
    padding: 0 var(--sp-3);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-base);
    color: var(--text-secondary);
    border-radius: var(--r-sm);
    transition: all 0.15s;
    position: relative;
  }
  .nav-link:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); }
  .nav-link.active { color: var(--text-primary); }
  .nav-link.active::after {
    content: "";
    position: absolute;
    left: var(--sp-3); right: var(--sp-3); bottom: -10px;
    height: 1px;
    background: var(--mint);
  }
  .nav-link svg { width: 12px; height: 12px; opacity: 0.6; }

  .nav-cta { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

  /* Mega menu */
  .has-mega { position: relative; }
  .mega {
    position: absolute;
    top: calc(100% + 8px);
    left: -200px;
    width: 720px;
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    padding: var(--sp-3);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
  }
  .has-mega:hover .mega,
  .has-mega:focus-within .mega { opacity: 1; transform: translateY(0); pointer-events: auto; }

  .mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-1);
  }
  .mega-item {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    transition: background 0.15s;
  }
  .mega-item:hover { background: var(--bg-elevated); }
  .mega-icon {
    width: 32px; height: 32px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    color: var(--mint);
    flex-shrink: 0;
  }
  .mega-icon svg { width: 16px; height: 16px; }
  .mega-title { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
  .mega-desc  { font-size: var(--fs-sm); color: var(--text-tertiary); line-height: 1.4; }

  .mega-footer {
    margin-top: var(--sp-2);
    padding: var(--sp-3);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
  }
  .mega-footer a { color: var(--mint); }

  /* Mobile nav toggle */
  .nav-toggle { display: none; }
  @media (max-width: 920px) {
    .nav-links, .nav-cta .hide-md { display: none; }
    .nav-toggle {
      display: inline-flex;
      width: 36px; height: 36px;
      align-items: center; justify-content: center;
      color: var(--text-secondary);
      border: 1px solid var(--border-default);
      border-radius: var(--r-sm);
      margin-left: auto;
    }
  }
}

/* ----- Cards ------------------------------------------------------------- */
@layer components {
  .card {
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    transition: border-color 0.2s, transform 0.3s var(--ease-out), background 0.2s;
    position: relative;
    overflow: hidden;
  }
  .card:hover { border-color: var(--border-strong); }
  .card.tilt-hover:hover { transform: translateY(-3px); }
  .card.accent-hover:hover { border-color: var(--border-mint); }

  .card-icon {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    background: var(--bg-elevated);
    color: var(--mint);
    margin-bottom: var(--sp-5);
  }
  .card-icon svg { width: 18px; height: 18px; }

  .card-title {
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
    letter-spacing: -0.005em;
  }
  .card-desc {
    font-size: var(--fs-base);
    color: var(--text-tertiary);
    line-height: 1.55;
  }
}

/* ----- Section heads ----------------------------------------------------- */
@layer components {
  .section-head {
    max-width: 760px;
    margin-bottom: var(--sp-12);
  }
  .section-head .eyebrow { margin-bottom: var(--sp-5); }
  .section-head h2.display { margin-bottom: var(--sp-5); }
  .section-head .lead { color: var(--text-secondary); }
  .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  .section-head.center .lead { margin-left: auto; margin-right: auto; }
  .section-head.center .eyebrow { justify-content: center; }
}

/* ----- Code blocks ------------------------------------------------------- */
@layer components {
  .code-frame {
    background: var(--bg-inset);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    position: relative;
  }
  .code-head {
    height: 36px;
    padding: 0 var(--sp-3) 0 var(--sp-4);
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
  }
  .code-tabs { display: flex; align-items: center; gap: var(--sp-1); }
  .code-tab {
    height: 24px;
    padding: 0 var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    border-radius: var(--r-xs);
    transition: all 0.12s;
  }
  .code-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.04); }
  .code-tab[aria-selected="true"] {
    color: var(--mint);
    background: var(--mint-faint);
  }
  .code-actions { display: flex; align-items: center; gap: var(--sp-1); }
  .code-btn {
    height: 24px;
    padding: 0 var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    border-radius: var(--r-xs);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    transition: all 0.12s;
  }
  .code-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
  .code-btn svg { width: 12px; height: 12px; }

  .code-body {
    padding: var(--sp-5);
    color: var(--text-secondary);
    overflow-x: auto;
    line-height: 1.65;
  }
  .code-body pre { font-family: inherit; font-size: inherit; }
  .code-body .ln { color: var(--text-disabled); user-select: none; padding-right: var(--sp-4); display: inline-block; width: 2.4em; text-align: right; }
  .code-body .c-key { color: #c995ff; }
  .code-body .c-str { color: #a3e6c0; }
  .code-body .c-num { color: #f5b545; }
  .code-body .c-cmt { color: var(--text-disabled); font-style: italic; }
  .code-body .c-fn  { color: #8aa1ff; }
  .code-body .c-op  { color: var(--text-tertiary); }
  .code-body .c-tag { color: var(--mint); }
  .code-body .c-prompt { color: var(--mint); user-select: none; }

  .code-tab-panel { display: none; }
  .code-tab-panel.active { display: block; }
}

/* ----- Terminal --------------------------------------------------------- */
@layer components {
  .terminal {
    background: linear-gradient(180deg, #0c0e12 0%, #0a0c10 100%);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    overflow: hidden;
    font-family: var(--font-mono);
    box-shadow: var(--shadow-lg);
    position: relative;
  }
  .terminal::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 60% at 50% -10%, var(--mint-faint), transparent 60%);
  }
  .terminal-head {
    height: 32px;
    padding: 0 var(--sp-4);
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
  .terminal-dots { display: flex; gap: 6px; }
  .terminal-dots span {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--bg-overlay);
  }
  .terminal-title {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-22px);
  }
  .terminal-body {
    padding: var(--sp-5);
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
    min-height: 280px;
  }
  .terminal-body .prompt { color: var(--mint); }
  .terminal-body .arrow { color: var(--cobalt); }
  .terminal-body .ok { color: var(--green); }
  .terminal-body .dim { color: var(--text-muted); }

  .caret {
    display: inline-block;
    width: 8px; height: 1em;
    background: var(--mint);
    vertical-align: -2px;
    margin-left: 2px;
    animation: blink 1.1s steps(2) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }
}

/* ----- Footer ------------------------------------------------------------ */
@layer components {
  .footer {
    border-top: 1px solid var(--border-subtle);
    padding: var(--sp-20) 0 var(--sp-8);
    margin-top: var(--sp-24);
    background: var(--bg-base);
    position: relative;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: var(--sp-12);
  }
  .footer-brand .nav-logo { font-size: 1.4rem; }
  .footer-brand p {
    margin-top: var(--sp-4);
    color: var(--text-tertiary);
    font-size: var(--fs-sm);
    line-height: 1.55;
    max-width: 30ch;
  }
  .footer-col h4 {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
    font-weight: 500;
  }
  .footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
  .footer-col a {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    transition: color 0.15s;
  }
  .footer-col a:hover { color: var(--text-primary); }

  .footer-bottom {
    margin-top: var(--sp-16);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--text-muted);
  }
  .compliance { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .compliance-badge {
    height: 28px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border-default);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
  }

  @media (max-width: 880px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
  }
  @media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
  }
}

/* ----- Utility ----------------------------------------------------------- */
@layer utilities {
  .stack-1 > * + * { margin-top: var(--sp-1); }
  .stack-2 > * + * { margin-top: var(--sp-2); }
  .stack-3 > * + * { margin-top: var(--sp-3); }
  .stack-4 > * + * { margin-top: var(--sp-4); }
  .stack-5 > * + * { margin-top: var(--sp-5); }
  .stack-6 > * + * { margin-top: var(--sp-6); }
  .stack-8 > * + * { margin-top: var(--sp-8); }

  .row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .row-tight { display: flex; align-items: center; gap: var(--sp-2); }
  .between { justify-content: space-between; }
  .grow { flex: 1 1 auto; }

  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
  @media (max-width: 920px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

  .hide-sm { @media (max-width: 720px) { display: none !important; } }
  .hide-md { @media (max-width: 920px) { display: none !important; } }

  .divider { height: 1px; background: var(--border-subtle); border: 0; }
}

/* ----- Reveal-on-scroll ------------------------------------------------- */
@layer utilities {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.in {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }
}

/* ----- Hero ------------------------------------------------------------- */
@layer components {
  .hero {
    padding: var(--sp-24) 0 var(--sp-16);
    position: relative;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-16);
    align-items: center;
  }
  .hero-headline { margin-top: var(--sp-6); margin-bottom: var(--sp-6); }
  .hero-cta-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-top: var(--sp-8); }
  .hero-meta { display: flex; gap: var(--sp-4); align-items: center; margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-tertiary); }

  .hero-kpis {
    margin-top: var(--sp-20);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--sp-8) 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-8);
  }
  .kpi-num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }
  .kpi-num em { font-style: italic; color: var(--mint); }
  .kpi-num .unit { font-size: 0.5em; color: var(--text-tertiary); margin-left: 4px; }
  .kpi-label {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
  }

  @media (max-width: 920px) {
    .hero-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
    .hero-kpis { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  }
}

/* ----- Logo strip ------------------------------------------------------- */
@layer components {
  .logo-strip {
    padding: var(--sp-12) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
  }
  .logo-strip-label {
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: var(--sp-6);
    font-family: var(--font-mono);
  }
  .logo-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--sp-8);
    align-items: center;
    justify-items: center;
    opacity: 0.55;
  }
  .logo-row svg { height: 22px; width: auto; max-width: 100%; }
  @media (max-width: 920px) { .logo-row { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } }
}

/* ----- Globe ------------------------------------------------------------ */
@layer components {
  .globe-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    background:
      radial-gradient(ellipse at center, var(--bg-raised) 0%, var(--bg-base) 100%);
    border: 1px solid var(--border-default);
    border-radius: var(--r-xl);
    overflow: hidden;
  }
  .globe-wrap svg { width: 100%; height: 100%; }
  .region-pin {
    fill: var(--mint);
    transform-origin: center;
  }
  .region-pulse {
    transform-origin: center;
    animation: ringpulse 2.6s var(--ease-out) infinite;
    fill: none;
    stroke: var(--mint);
    stroke-width: 1;
    opacity: 0.6;
  }
  @keyframes ringpulse {
    0%   { r: 2; opacity: 0.65; }
    80%  { r: 14; opacity: 0; }
    100% { r: 14; opacity: 0; }
  }
}

/* ----- Toast ------------------------------------------------------------ */
@layer components {
  .toast-stack {
    position: fixed;
    bottom: var(--sp-6);
    right: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    z-index: 1000;
    pointer-events: none;
  }
  .toast {
    pointer-events: auto;
    min-width: 220px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    animation: toastIn 0.25s var(--ease-out);
  }
  .toast.mint { border-color: var(--border-mint); }
  .toast .icon { color: var(--mint); display: inline-flex; }
  @keyframes toastIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .toast.out { animation: toastOut 0.2s forwards; }
  @keyframes toastOut {
    to { opacity: 0; transform: translateY(8px); }
  }
}

/* ----- Cookie banner ---------------------------------------------------- */
@layer components {
  .cookie {
    position: fixed;
    bottom: var(--sp-4);
    left: var(--sp-4);
    max-width: 380px;
    padding: var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    z-index: 80;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
  }
  .cookie h5 {
    font-size: var(--fs-base);
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
    font-weight: 500;
  }
  .cookie p { line-height: 1.5; margin-bottom: var(--sp-4); }
  .cookie .row { gap: var(--sp-2); }
  .cookie.hidden { display: none; }
  @media (max-width: 520px) {
    .cookie { left: var(--sp-2); right: var(--sp-2); max-width: none; }
  }
}

/* ----- Form fields ------------------------------------------------------ */
@layer components {
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .field label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    font-weight: 500;
  }
  .field .hint {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
  }
  .input, .textarea, .select {
    width: 100%;
    height: 40px;
    padding: 0 var(--sp-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-family: inherit;
    transition: all 0.15s;
  }
  .input::placeholder { color: var(--text-muted); }
  .input:hover, .textarea:hover { border-color: var(--border-strong); }
  .input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--mint);
    box-shadow: 0 0 0 3px var(--mint-faint);
  }
  .textarea { height: auto; min-height: 96px; padding: var(--sp-3) var(--sp-4); resize: vertical; }
  .input-group { display: flex; gap: var(--sp-2); }
  .input-group .input { flex: 1; }

  .check { display: inline-flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; }
  .check input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--mint);
    margin-top: 2px;
  }

  .toggle {
    --on: var(--mint);
    width: 38px; height: 22px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--r-pill);
    position: relative;
    cursor: pointer;
    transition: background 0.18s;
    flex-shrink: 0;
  }
  .toggle::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: all 0.18s var(--ease-out);
  }
  .toggle[aria-checked="true"] { background: var(--mint-faint); border-color: var(--border-mint); }
  .toggle[aria-checked="true"]::after { left: 18px; background: var(--mint); }
}

/* ----- Tables ---------------------------------------------------------- */
@layer components {
  .table-wrap {
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-raised);
  }
  table.data {
    width: 100%;
    font-size: var(--fs-sm);
    border-collapse: collapse;
  }
  table.data th, table.data td {
    padding: var(--sp-4) var(--sp-5);
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
  }
  table.data thead th {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    font-weight: 500;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-default);
  }
  table.data tbody tr:last-child td { border-bottom: 0; }
  table.data tbody tr:hover { background: var(--bg-elevated); }
  table.data td.num { font-family: var(--font-mono); color: var(--text-primary); }
  table.data .sort-btn {
    display: inline-flex; align-items: center; gap: 4px;
    color: inherit;
  }
}

/* ----- Pricing tier card ------------------------------------------------ */
@layer components {
  .tier {
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    padding: var(--sp-8);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.2s var(--ease-out);
  }
  .tier:hover { border-color: var(--border-strong); }
  .tier.featured {
    border-color: var(--border-mint);
    background: linear-gradient(180deg, rgba(127,255,212,0.04) 0%, var(--bg-raised) 50%);
  }
  .tier .tier-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    margin-bottom: var(--sp-2);
  }
  .tier h3.display { font-size: 2rem; margin-bottom: var(--sp-3); }
  .tier .tier-desc { color: var(--text-tertiary); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
  .tier .tier-price {
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-2);
  }
  .tier .tier-price .unit { font-size: 0.4em; color: var(--text-tertiary); margin-left: 4px; }
  .tier .tier-meta { color: var(--text-tertiary); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
  .tier ul.features { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-8); flex: 1; }
  .tier .features li {
    display: flex; gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
  }
  .tier .features li::before {
    content: "";
    width: 14px; height: 14px;
    flex-shrink: 0;
    margin-top: 3px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FFFD4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
  }
}

/* ----- Stat strip ----------------------------------------------------- */
@layer components {
  .stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-raised);
  }
  .stat-strip > div {
    padding: var(--sp-6);
    border-right: 1px solid var(--border-subtle);
  }
  .stat-strip > div:last-child { border-right: 0; }
  .stat-strip .num { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; }
  .stat-strip .num em { font-style: italic; color: var(--mint); }
  .stat-strip .lbl { font-size: var(--fs-sm); color: var(--text-tertiary); margin-top: var(--sp-2); }
  @media (max-width: 720px) {
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
    .stat-strip > div:nth-child(2) { border-right: 0; }
    .stat-strip > div:nth-child(1), .stat-strip > div:nth-child(2) { border-bottom: 1px solid var(--border-subtle); }
  }
}

/* ----- Specs table ----------------------------------------------------- */
@layer components {
  .spec-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;
    border-top: 1px solid var(--border-subtle);
  }
  .spec-grid dt, .spec-grid dd {
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-sm);
  }
  .spec-grid dt { color: var(--text-tertiary); }
  .spec-grid dd { color: var(--text-primary); font-family: var(--font-mono); }
}

/* ----- Timeline (changelog) ------------------------------------------- */
@layer components {
  .timeline { position: relative; padding-left: var(--sp-8); }
  .timeline::before {
    content: "";
    position: absolute;
    left: 7px; top: 8px; bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, var(--border-default), transparent);
  }
  .tl-month {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: var(--sp-12) 0 var(--sp-6);
    position: relative;
  }
  .tl-month:first-child { margin-top: 0; }
  .tl-entry {
    position: relative;
    padding-bottom: var(--sp-10);
  }
  .tl-entry::before {
    content: "";
    position: absolute;
    left: -28px; top: 6px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--bg-base);
    border: 2px solid var(--border-strong);
  }
  .tl-entry.new::before { border-color: var(--mint); background: var(--mint-faint); }
  .tl-entry.improved::before { border-color: #8aa1ff; }
  .tl-entry.fixed::before { border-color: var(--amber); }
  .tl-entry.deprecated::before { border-color: var(--rose); }
  .tl-entry .tl-date {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
  }
  .tl-entry h3 {
    font-size: var(--fs-lg);
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
    font-weight: 500;
  }
  .tl-entry p { color: var(--text-tertiary); font-size: var(--fs-sm); line-height: 1.6; max-width: 70ch; }
  .tl-entry .badge { margin-bottom: var(--sp-3); }
}

/* ----- Docs layout ----------------------------------------------------- */
@layer components {
  .docs-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--sp-12);
    align-items: start;
  }
  .docs-side {
    position: sticky;
    top: calc(var(--nav-h) + var(--status-h) + var(--sp-6));
    max-height: calc(100vh - var(--nav-h) - var(--status-h) - var(--sp-12));
    overflow-y: auto;
    padding-right: var(--sp-2);
  }
  .docs-side h5 {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 500;
    margin: var(--sp-5) 0 var(--sp-2);
  }
  .docs-side h5:first-child { margin-top: 0; }
  .docs-side a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
    border-radius: var(--r-sm);
    border-left: 1px solid var(--border-subtle);
    transition: all 0.12s;
  }
  .docs-side a:hover { color: var(--text-primary); border-left-color: var(--border-strong); }
  .docs-side a.active { color: var(--mint); border-left-color: var(--mint); }

  .docs-content { max-width: 760px; }
  .docs-content h1 { font-family: var(--font-display); font-size: var(--fs-display-md); margin-bottom: var(--sp-3); letter-spacing: -0.01em; }
  .docs-content h2 { font-family: var(--font-display); font-size: 1.7rem; margin: var(--sp-12) 0 var(--sp-4); letter-spacing: -0.01em; scroll-margin-top: 100px; }
  .docs-content h3 { font-size: var(--fs-xl); margin: var(--sp-8) 0 var(--sp-3); font-weight: 500; scroll-margin-top: 100px; }
  .docs-content p, .docs-content ul, .docs-content ol {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--sp-4);
    font-size: var(--fs-md);
  }
  .docs-content ul, .docs-content ol { padding-left: var(--sp-6); }
  .docs-content ul li { list-style: disc; }
  .docs-content ol li { list-style: decimal; }
  .docs-content code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    padding: 2px 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xs);
    color: var(--mint);
  }
  .docs-content .code-frame { margin: var(--sp-5) 0; }
  .docs-content .code-frame code { background: none; border: 0; color: inherit; padding: 0; font-size: inherit; }

  .callout {
    margin: var(--sp-6) 0;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    display: flex;
    gap: var(--sp-4);
  }
  .callout.info { border-color: rgba(74, 108, 247, 0.3); background: var(--cobalt-faint); }
  .callout.warn { border-color: rgba(245, 181, 69, 0.3); background: rgba(245, 181, 69, 0.06); }
  .callout .icon { flex-shrink: 0; padding-top: 2px; }
  .callout p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; }

  .toc-right {
    position: sticky;
    top: calc(var(--nav-h) + var(--status-h) + var(--sp-6));
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
  }
  .toc-right h5 {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
  }
  .toc-right a { display: block; padding: var(--sp-1) 0; color: var(--text-tertiary); }
  .toc-right a:hover { color: var(--text-primary); }

  @media (max-width: 1100px) {
    .docs-shell { grid-template-columns: 1fr; }
    .docs-side { position: static; max-height: none; }
  }
}

/* ----- Status page bars ----------------------------------------------- */
@layer components {
  .uptime-bars {
    display: flex;
    gap: 2px;
    align-items: stretch;
    height: 28px;
  }
  .uptime-bars i {
    flex: 1;
    background: var(--green);
    border-radius: 2px;
    transition: transform 0.15s;
  }
  .uptime-bars i.down  { background: var(--rose); }
  .uptime-bars i.warn  { background: var(--amber); }
  .uptime-bars i.partial { background: linear-gradient(180deg, var(--green) 70%, var(--amber) 70%); }
  .uptime-bars i:hover { transform: scaleY(1.15); }

  .svc-row {
    padding: var(--sp-4) var(--sp-5);
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--sp-4);
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
  }
  .svc-row:last-child { border-bottom: 0; }
  .svc-row .name { font-size: var(--fs-base); color: var(--text-primary); }
  .svc-row .meta { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
  .svc-row .state { font-size: var(--fs-sm); color: var(--green); display: inline-flex; align-items: center; gap: var(--sp-2); }
  .svc-row .state.degraded { color: var(--amber); }
}

/* ----- Auth page split layout ----------------------------------------- */
@layer components {
  .auth-shell {
    min-height: calc(100vh - var(--nav-h) - var(--status-h));
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .auth-form-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-12);
  }
  .auth-form { width: 100%; max-width: 380px; }
  .auth-form h1 {
    font-family: var(--font-display);
    font-size: 2.4rem;
    margin-bottom: var(--sp-3);
    letter-spacing: -0.01em;
  }
  .auth-form .sub { color: var(--text-tertiary); font-size: var(--fs-base); margin-bottom: var(--sp-8); }
  .auth-form .field + .field { margin-top: var(--sp-4); }
  .auth-divider {
    display: flex; align-items: center; gap: var(--sp-3);
    margin: var(--sp-6) 0;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .auth-divider::before, .auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--border-subtle);
  }
  .oauth-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
  .oauth-btn {
    height: 40px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    transition: all 0.15s;
  }
  .oauth-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
  .oauth-btn svg { width: 14px; height: 14px; }

  .auth-side {
    background:
      radial-gradient(ellipse 60% 80% at 80% 30%, rgba(74, 108, 247, 0.18), transparent 60%),
      radial-gradient(ellipse 50% 50% at 30% 80%, rgba(127, 255, 212, 0.14), transparent 65%),
      var(--bg-inset);
    border-left: 1px solid var(--border-subtle);
    padding: var(--sp-12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
  }
  .auth-side .grid-bg {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
  }
  .auth-side > * { position: relative; }
  .auth-quote { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.25; max-width: 32ch; }
  .auth-quote em { font-style: italic; color: var(--mint); }
  .auth-quote-meta { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-tertiary); }

  @media (max-width: 920px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-side { display: none; }
  }
}

/* ----- Region map ----------------------------------------------------- */
@layer components {
  .map-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--r-xl);
    padding: var(--sp-6);
    position: relative;
  }
  .map-svg { width: 100%; height: auto; aspect-ratio: 16/9; }
  .map-tip {
    position: absolute;
    background: var(--bg-overlay);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -110%);
    transition: opacity 0.12s;
    box-shadow: var(--shadow-md);
    min-width: 180px;
  }
  .map-tip.show { opacity: 1; }
  .map-tip .name { font-family: var(--font-mono); color: var(--mint); margin-bottom: 2px; }
  .map-tip .meta { color: var(--text-tertiary); }

  .map-region-dot {
    fill: var(--mint);
    cursor: pointer;
    transition: all 0.15s;
  }
  .map-region-dot:hover { fill: #fff; }
}

/* ----- Blog ----------------------------------------------------------- */
@layer components {
  .post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
  }
  @media (max-width: 920px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }

  .post-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
  }
  .post-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
  .post-cover {
    aspect-ratio: 16/9;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
  }
  .post-card .body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
  .post-card .meta { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
  .post-card h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1.15;
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }
  .post-card .excerpt { color: var(--text-tertiary); font-size: var(--fs-sm); line-height: 1.55; }
  .post-card .footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); font-size: var(--fs-xs); color: var(--text-muted); }

  .post-prose {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--sp-12) var(--sp-6) var(--sp-24);
  }
  .post-prose h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin-bottom: var(--sp-6);
  }
  .post-prose h1 em { font-style: italic; color: var(--mint); }
  .post-prose .post-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--sp-12);
  }
  .post-prose p {
    color: var(--text-secondary);
    font-size: 1.0625rem;
    line-height: 1.75;
    margin-bottom: var(--sp-5);
  }
  .post-prose p.lead { font-size: var(--fs-xl); color: var(--text-primary); }
  .post-prose .dropcap::first-letter {
    font-family: var(--font-display);
    font-size: 4.4em;
    line-height: 0.85;
    float: left;
    padding: 8px 12px 0 0;
    color: var(--mint);
    font-style: italic;
  }
  .post-prose h2 {
    font-family: var(--font-display);
    font-size: 1.9rem;
    letter-spacing: -0.01em;
    margin: var(--sp-12) 0 var(--sp-4);
  }
  .post-prose h3 { font-size: 1.3rem; font-weight: 500; margin: var(--sp-8) 0 var(--sp-3); }
  .post-prose blockquote {
    border-left: 2px solid var(--mint);
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
    margin: var(--sp-8) 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--text-primary);
  }
  .post-prose ul, .post-prose ol {
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: var(--sp-5);
    padding-left: var(--sp-6);
  }
  .post-prose ul li { list-style: disc; padding-left: var(--sp-2); margin-bottom: var(--sp-2); }
  .post-prose code {
    font-family: var(--font-mono);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    padding: 2px 6px;
    border-radius: var(--r-xs);
    font-size: 0.88em;
    color: var(--mint);
  }
  .post-prose .code-frame { margin: var(--sp-6) 0; }

  .post-author {
    margin-top: var(--sp-16);
    padding: var(--sp-6);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    background: var(--bg-raised);
    display: flex;
    gap: var(--sp-4);
  }
  .post-author .avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint), var(--cobalt));
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }
  .post-author .avatar::after {
    content: attr(data-initials);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    color: var(--bg-inset);
    font-size: 1.2rem;
  }
  .post-author .name { font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
  .post-author .role { font-size: var(--fs-sm); color: var(--text-tertiary); }
  .post-author p { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--sp-2); line-height: 1.6; }
}

/* ----- 404 ------------------------------------------------------------ */
@layer components {
  .err-shell {
    min-height: calc(100vh - var(--nav-h) - var(--status-h));
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--sp-16) var(--sp-6);
  }
  .err-num {
    font-family: var(--font-display);
    font-size: clamp(8rem, 22vw, 16rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
  }
  .err-num em { font-style: italic; color: var(--mint); }
  .err-line { color: var(--text-secondary); font-size: var(--fs-xl); margin-top: var(--sp-4); max-width: 50ch; margin-inline: auto; }
}

/* ----- Misc ----------------------------------------------------------- */
@layer components {
  .accordion-item {
    border-bottom: 1px solid var(--border-subtle);
  }
  .accordion-trigger {
    width: 100%;
    text-align: left;
    padding: var(--sp-5) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    font-size: var(--fs-lg);
    color: var(--text-primary);
    font-weight: 500;
  }
  .accordion-trigger svg { transition: transform 0.2s; flex-shrink: 0; color: var(--text-tertiary); }
  .accordion-item[data-open="true"] .accordion-trigger svg { transform: rotate(45deg); color: var(--mint); }
  .accordion-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s var(--ease-out);
  }
  .accordion-content > div {
    padding: 0 0 var(--sp-5);
    color: var(--text-tertiary);
    font-size: var(--fs-base);
    line-height: 1.65;
    max-width: 70ch;
  }
  .accordion-item[data-open="true"] .accordion-content { max-height: 400px; }
}

@layer components {
  .quote-card {
    padding: var(--sp-8);
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
  }
  .quote-card blockquote {
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--text-primary);
  }
  .quote-card blockquote em { font-style: italic; color: var(--mint); }
  .quote-card .who { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
  .quote-card .avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint), var(--cobalt));
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
  }
  .quote-card .avatar::after {
    content: attr(data-initials);
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--bg-inset);
  }
  .quote-card .name { font-size: var(--fs-sm); color: var(--text-primary); }
  .quote-card .role { font-size: var(--fs-xs); color: var(--text-tertiary); }
}

/* ----- Mesh / animated bg --------------------------------------------- */
@layer components {
  .mesh-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
  }
  .mesh-bg::before, .mesh-bg::after {
    content: "";
    position: absolute;
    width: 50vw; height: 50vw;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
  }
  .mesh-bg::before { background: var(--mint); top: -10vw; left: -10vw; animation: drift 22s var(--ease-in-out) infinite alternate; }
  .mesh-bg::after  { background: var(--cobalt); bottom: -15vw; right: -10vw; animation: drift 28s var(--ease-in-out) infinite alternate-reverse; }
  @keyframes drift {
    from { transform: translate(0, 0); }
    to   { transform: translate(8vw, -6vw); }
  }
}