* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --ink: #16304a;
    --ink-soft: #1d3f5e;
    --text-2: #46606e;
    --text-3: #5c727f;
    --bg: #fbfcfd;
    --bg-soft: #f3f6f8;
    --surface: #ffffff;
    --border: #e4eaee;
    --border-soft: #edf1f4;
    --accent: #16304a;
    --accent-dark: #16304a;
    --accent-darker: #1d3f5e;
    --accent-light: #f1f4f6;
    --accent-mid: #dbe2e7;
    --shadow-card: 0 1px 2px rgba(11,28,38,0.04), 0 8px 24px rgba(11,28,38,0.05);
    --shadow-pop: 0 2px 6px rgba(11,28,38,0.06), 0 24px 60px rgba(11,28,38,0.10);
}
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
::selection { background: var(--accent-mid); }
.mono { font-family: 'JetBrains Mono', monospace; }

.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--accent-dark); color: white;
    padding: 13px 26px; border-radius: 10px;
    font-family: inherit; font-size: 0.9rem; font-weight: 600;
    text-decoration: none; border: none; cursor: pointer;
    letter-spacing: -0.005em;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* `color` is restated here as a guard. Until BAR-1444, page.css's global
   `a:hover` set `var(--ink)` and outranked `.btn-primary`'s own white —
   every primary CTA outside index was an <a>, so without this the label
   dropped to 1.59:1 on hover and disappeared. a:hover sets no colour now,
   but any future anchor styled as a button should keep the same guard. */
.btn-primary:hover {
    background: var(--accent-darker);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(12,25,41,0.25);
}

/* Two turquoise lights travelling opposite each other around the button
   edge. `@property` is what makes it work: only a registered custom
   property can be animated, so an unregistered --angle would sit still.
   Chrome 85+, Safari 16.4+, Firefox 128+; without support the ring simply
   does not appear and the button behaves as it does today. */
@property --btn-ring-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.btn-primary {
    position: relative;
    isolation: isolate;
}

/* The ring itself. Painted ONLY in a 2px border band: the two mask layers
   cancel each other everywhere except that band, so nothing sits behind the
   button and no light leaks from under it. `repeating-conic-gradient` with a
   0.5turn period is what produces two lights rather than one.

   The trail and the resting edge are turquoise, not white. The ring is
   painted over the button's own navy, so white at low opacity composites
   to navy and disappears; the frame was in the gradient and invisible.
   0.95 keeps the trail lit well past the head, 0.22 leaves a resting edge
   so the button's outline is present all the way round rather than two
   dots travelling through nothing.

   Restored 2026-09-08 after 389664c recoloured the head to navy tones;
   the turquoise is the point, not a leftover. */
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: repeating-conic-gradient(
        from var(--btn-ring-angle),
        #1fd4bd 0turn,
        #0d9488 0.04turn,
        rgba(31, 212, 189, 0.95) 0.14turn,
        rgba(31, 212, 189, 0.22) 0.49turn,
        rgba(31, 212, 189, 0.22) 0.5turn
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    filter: blur(0.4px);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* A narrow bloom that travels WITH the lights rather than sitting evenly
   around the button. Kept to a tenth of each half-turn and 15% opacity: any
   wider or stronger and it stops reading as light and starts reading as a
   soft panel behind the button. */
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 10px;
    background: repeating-conic-gradient(
        from var(--btn-ring-angle),
        rgba(31, 212, 189, 0.9) 0turn,
        rgba(13, 148, 136, 0.5) 0.04turn,
        transparent 0.1turn,
        transparent 0.5turn
    );
    filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.btn-primary:hover::before,
.btn-primary:focus-visible::before {
    opacity: 1;
    animation: btn-ring-spin 2s linear infinite;
}

.btn-primary:hover::after,
.btn-primary:focus-visible::after {
    opacity: 0.15;
    animation: btn-ring-spin 2s linear infinite;
}

@keyframes btn-ring-spin {
    to { --btn-ring-angle: 1turn; }
}

/* Someone who has asked the system for less motion still gets the hover
   feedback — the ring appears, it just does not travel. */
@media (prefers-reduced-motion: reduce) {
    .btn-primary:hover::before,
    .btn-primary:focus-visible::before,
    .btn-primary:hover::after,
    .btn-primary:focus-visible::after { animation: none; }
}

.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--surface); color: var(--ink);
    padding: 13px 26px; border-radius: 10px;
    font-family: inherit; font-size: 0.9rem; font-weight: 600;
    text-decoration: none; border: 1px solid var(--border); cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-secondary:hover { border-color: #c8d4da; transform: translateY(-1px); box-shadow: var(--shadow-card); }

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--accent-dark);
    outline-offset: 3px;
    border-radius: 8px;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 12px; z-index: 300;
    background: var(--surface); color: var(--ink);
    padding: 10px 16px; border-radius: 8px;
    box-shadow: var(--shadow-card); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}