/* ==========================================================================
   The Code Gate — Design System
   --------------------------------------------------------------------------
   Brand palette is derived from the company mark: teal #0C6559 + coral #F36F5A.
   Everything below is token-driven so light and dark themes stay in sync.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   Clash Grotesk ships in Extralight/Light/Regular/Medium only. Medium is
   mapped to 500/600/700 as well so the browser never synthesises a fake bold.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Clash Grotesk";
    src: url("../fonts/ClashGrotesk-Extralight.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Clash Grotesk";
    src: url("../fonts/ClashGrotesk-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Clash Grotesk";
    src: url("../fonts/ClashGrotesk-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Clash Grotesk";
    src: url("../fonts/ClashGrotesk-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Clash Grotesk";
    src: url("../fonts/ClashGrotesk-Medium.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Clash Grotesk";
    src: url("../fonts/ClashGrotesk-Medium.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand ramps -------------------------------------------------------- */
    --teal-50:  #EFFBF9;
    --teal-100: #D8F4F0;
    --teal-200: #B3E6DF;
    --teal-300: #7FD2C7;
    --teal-400: #3BBAA9;
    --teal-500: #1C9282;
    --teal-600: #11796B;
    --teal-700: #0C6559;  /* brand mark */
    --teal-800: #094E45;
    --teal-900: #063831;

    --coral-300: #F9A797;
    --coral-400: #F68A76;
    --coral-500: #F36F5A;  /* brand dot */
    --coral-600: #DF503A;
    --coral-700: #C13925;

    --ink-950: #050D0C;

    /* Typography --------------------------------------------------------- */
    --font-sans: "Clash Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    /* Fluid type scale */
    --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
    --step-0:  clamp(0.95rem, 0.91rem + 0.2vw, 1.06rem);
    --step-1:  clamp(1.12rem, 1.05rem + 0.34vw, 1.32rem);
    --step-2:  clamp(1.35rem, 1.22rem + 0.62vw, 1.72rem);
    --step-3:  clamp(1.62rem, 1.4rem + 1.05vw, 2.25rem);
    --step-4:  clamp(1.95rem, 1.58rem + 1.72vw, 2.95rem);
    --step-5:  clamp(2.35rem, 1.75rem + 2.8vw, 3.9rem);
    --step-6:  clamp(2.8rem, 1.85rem + 4.4vw, 5rem);

    /* Spacing ------------------------------------------------------------ */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);
    --container: 1200px;
    --container-wide: 1360px;

    /* Radii -------------------------------------------------------------- */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-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.4, 0.64, 1);
    --dur-fast: 160ms;
    --dur: 280ms;
    --dur-slow: 620ms;

    --header-h: 76px;
}

/* Dark is the default experience -------------------------------------- */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    --surface-0: #070F0E;
    --surface-1: #0C1614;
    --surface-2: #122120;
    --surface-3: #182D2A;

    --text-strong: #F2F8F7;
    --text: #DEE9E7;
    --text-soft: #A9BCB8;
    --text-faint: #7B8F8B;

    --accent: var(--teal-400);
    --accent-strong: var(--teal-300);
    --accent-contrast: #04201C;
    --accent-soft: rgba(59, 186, 169, 0.14);
    --accent-softer: rgba(59, 186, 169, 0.07);
    --accent-line: rgba(59, 186, 169, 0.28);

    --coral: var(--coral-500);
    --coral-soft: rgba(243, 111, 90, 0.15);

    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);

    --card: rgba(255, 255, 255, 0.032);
    --card-hover: rgba(255, 255, 255, 0.058);
    --card-solid: #0C1614;

    --field: rgba(255, 255, 255, 0.04);
    --field-focus: rgba(255, 255, 255, 0.07);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 12px 28px -12px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 30px 70px -28px rgba(0, 0, 0, 0.85);
    --shadow-accent: 0 18px 46px -20px rgba(59, 186, 169, 0.55);

    --mesh-1: rgba(28, 146, 130, 0.20);
    --mesh-2: rgba(243, 111, 90, 0.11);
    --mesh-3: rgba(59, 186, 169, 0.10);
    --grid-line: rgba(255, 255, 255, 0.032);
}

:root[data-theme="light"] {
    color-scheme: light;

    --surface-0: #F7FAF9;
    --surface-1: #FFFFFF;
    --surface-2: #F1F7F5;
    --surface-3: #E7F1EE;

    --text-strong: #061B17;
    --text: #16302B;
    --text-soft: #4C625D;
    --text-faint: #71847F;

    --accent: var(--teal-700);
    --accent-strong: var(--teal-800);
    --accent-contrast: #FFFFFF;
    --accent-soft: rgba(12, 101, 89, 0.09);
    --accent-softer: rgba(12, 101, 89, 0.045);
    --accent-line: rgba(12, 101, 89, 0.20);

    --coral: var(--coral-700);
    --coral-soft: rgba(193, 57, 37, 0.10);

    --border: rgba(6, 56, 49, 0.11);
    --border-strong: rgba(6, 56, 49, 0.2);

    --card: #FFFFFF;
    --card-hover: #FFFFFF;
    --card-solid: #FFFFFF;

    --field: #FFFFFF;
    --field-focus: #FFFFFF;

    --shadow-sm: 0 1px 2px rgba(6, 56, 49, 0.06);
    --shadow-md: 0 12px 28px -14px rgba(6, 56, 49, 0.22);
    --shadow-lg: 0 30px 70px -30px rgba(6, 56, 49, 0.28);
    --shadow-accent: 0 18px 40px -20px rgba(12, 101, 89, 0.45);

    --mesh-1: rgba(12, 101, 89, 0.10);
    --mesh-2: rgba(243, 111, 90, 0.10);
    --mesh-3: rgba(59, 186, 169, 0.10);
    --grid-line: rgba(6, 56, 49, 0.045);
}

/* --------------------------------------------------------------------------
   3. Legacy token aliases
   The previous stylesheet exposed these names to every page-level <style>
   block. They are remapped rather than removed so nothing regresses.
   -------------------------------------------------------------------------- */
:root {
    --bg-dark: var(--surface-0);
    --bg-card: var(--surface-1);
    --primary-green: var(--accent);
    --secondary-green: var(--accent-strong);
    --accent-glow: var(--accent-strong);
    --text-main: var(--text-strong);
    --text-muted: var(--text-soft);
    --border-color: var(--border);
    --glass-bg: var(--card);
    --glass-border: var(--border);
    --glass-blur: 18px;
    --shadow-glow: var(--shadow-accent);
    --shadow-card: var(--shadow-md);
    --card-bg-transparent: var(--card);
    --card-bg-hover: var(--card-hover);
    --placeholder-color: var(--text-faint);
    --code-bg: var(--surface-2);
    --section-bg: var(--surface-2);
    --input-bg: var(--field);
    --accent-bg: var(--accent-soft);
    --accent-bg-subtle: var(--accent-softer);
    --icon-bg: var(--accent-soft);
    --visual-bg: var(--surface-2);
    --gradient-end: var(--accent-softer);
}

/* --------------------------------------------------------------------------
   4. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 24px);
    /* Reveal transforms and deliberate card overhangs can briefly extend past
       the right edge. `clip` contains them without creating a scroll container,
       so it cannot break `position: sticky` the way `hidden` does. */
    overflow-x: clip;
}

body {
    font-family: var(--font-sans);
    font-size: var(--step-0);
    font-weight: 400;
    line-height: 1.65;
    color: var(--text);
    background-color: var(--surface-0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    transition: background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
}

/* Ambient brand wash behind every page */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(58rem 40rem at 12% -6%, var(--mesh-1), transparent 62%),
        radial-gradient(46rem 34rem at 92% 4%, var(--mesh-2), transparent 60%),
        radial-gradient(52rem 40rem at 50% 108%, var(--mesh-3), transparent 62%);
    transition: opacity var(--dur) var(--ease-out);
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

ul,
ol {
    list-style: none;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
}

::selection {
    background: var(--accent-soft);
    color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   5. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-strong);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.015em; }
h4 { font-size: var(--step-1); letter-spacing: -0.01em; }
h5 { font-size: var(--step-0); letter-spacing: 0; }
h6 { font-size: var(--step--1); letter-spacing: 0; }

p { text-wrap: pretty; }

strong, b { font-weight: 500; color: var(--text-strong); }

small { font-size: var(--step--1); }

code, pre, kbd {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.lead {
    font-size: var(--step-1);
    color: var(--text-soft);
    line-height: 1.6;
    font-weight: 300;
}

/* Teal-only ramp: mixing in coral produced a muddy mid-tone that also failed
   contrast. Coral stays as a small accent (the mark's dot, status pills). */
.text-gradient {
    background: linear-gradient(100deg, var(--accent) 0%, var(--accent-strong) 52%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Safari occasionally clips descenders on clipped-background text */
.text-gradient { padding-bottom: 0.06em; }

.text-accent { color: var(--accent); }
.text-soft   { color: var(--text-soft); }

/* --------------------------------------------------------------------------
   6. Layout primitives
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.15rem, 0.6rem + 2.4vw, 2rem);
}

.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: 820px; }

.section {
    position: relative;
    padding-block: var(--section-y);
}

.section--tight { padding-block: calc(var(--section-y) * 0.62); }

.section--alt {
    background: var(--surface-2);
    border-block: 1px solid var(--border);
}

.section-head {
    max-width: 720px;
    margin-bottom: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head h2 {
    margin-bottom: var(--space-4);
}

.section-head p {
    color: var(--text-soft);
    font-size: var(--step-1);
    font-weight: 300;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: var(--space-4);
    padding: 0.4rem 0.9rem 0.4rem 0.65rem;
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
}

.eyebrow .dot,
.badge-pill .dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: pulse-dot 2.4s var(--ease-out) infinite;
}

/* Legacy alias used by existing page markup */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.95rem 0.4rem 0.7rem;
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--step--1);
    font-weight: 500;
}

@keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

@media (max-width: 980px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Decorative dot/grid backdrop for feature areas */
.bg-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
            mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
}

/* --------------------------------------------------------------------------
   7. Surfaces & cards
   -------------------------------------------------------------------------- */
.card,
.glass-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .glass-card {
    -webkit-backdrop-filter: blur(var(--glass-blur));
            backdrop-filter: blur(var(--glass-blur));
}

.card--pad { padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }

.card--lift:hover,
.card--lift:focus-within {
    transform: translateY(-4px);
    border-color: var(--accent-line);
    background: var(--card-hover);
    box-shadow: var(--shadow-md);
}

/* Gradient hairline that appears on hover, used on feature cards */
.card--glow::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, var(--accent), transparent 46%, var(--coral));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
}

.card--glow:hover::before,
.card--glow:focus-within::before { opacity: 0.85; }

/* Icon tile ---------------------------------------------------------------- */
.icon-tile,
.icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: none;
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.35rem;
    transition: transform var(--dur) var(--ease-spring),
                background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
}

.icon-tile--lg { width: 64px; height: 64px; font-size: 1.6rem; border-radius: var(--radius-md); }
.icon-tile--round { border-radius: 50%; }

.card:hover .icon-tile,
.card:hover .icon-wrapper,
.card--lift:hover .icon-tile {
    transform: translateY(-2px) scale(1.04);
    background: var(--accent);
    color: var(--accent-contrast);
}

/* Chips / tags ------------------------------------------------------------- */
.chip,
.feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: var(--step--1);
    line-height: 1.4;
    transition: all var(--dur-fast) var(--ease-out);
}

.chip:hover,
.feature-tag:hover {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent);
    transform: translateY(-1px);
}

/* Bulleted feature list ---------------------------------------------------- */
.tick-list { display: grid; gap: 0.7rem; }

.tick-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--text-soft);
}

.tick-list li i,
.tick-list li svg {
    flex: none;
    margin-top: 0.28em;
    color: var(--accent);
    font-size: 0.85em;
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--step-0);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    isolation: isolate;
    overflow: hidden;
    transition: transform var(--dur-fast) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.btn i, .btn svg { font-size: 0.9em; transition: transform var(--dur) var(--ease-out); }
.btn:hover i.fa-arrow-right, .btn:hover svg.arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    box-shadow: var(--shadow-accent);
}

/* Sheen sweep on hover */
.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform var(--dur-slow) var(--ease-out);
}

.btn-primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--accent-contrast);
    transform: translateY(-2px);
}

.btn-primary:hover::after { transform: translateX(120%); }

.btn-outline,
.btn-secondary {
    background: var(--card);
    border-color: var(--border-strong);
    color: var(--text-strong);
}

:root[data-theme="dark"] .btn-outline,
:root[data-theme="dark"] .btn-secondary {
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
}

.btn-outline:hover,
.btn-secondary:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    transform: translateY(-2px);
}

.btn-coral {
    background: var(--coral-500);
    border-color: var(--coral-500);
    color: #2A0B05;
}

.btn-coral:hover {
    background: var(--coral-400);
    border-color: var(--coral-400);
    transform: translateY(-2px);
}

.btn-ghost { color: var(--text-soft); }
.btn-ghost:hover { color: var(--accent); background: var(--accent-soft); }

.btn-lg { padding: 1rem 1.9rem; font-size: var(--step-1); }
.btn-sm { padding: 0.55rem 1.05rem; font-size: var(--step--1); }
.btn-block { display: flex; width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Arrow link --------------------------------------------------------------- */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 24px;
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
    transition: gap var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.link-arrow:hover { gap: 0.85rem; color: var(--accent-strong); }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 0.45rem; margin-bottom: var(--space-5); }

.field label,
.form-group label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--text-soft);
    font-size: var(--step--1);
    font-weight: 500;
}

.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
select.form-control,
textarea.form-control {
    width: 100%;
    padding: 0.85rem 1.05rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--field);
    color: var(--text-strong);
    font-family: inherit;
    /* Never below 16px: iOS Safari zooms the viewport when focusing a smaller
       control, which throws the user out of the layout mid-form. */
    font-size: max(1rem, var(--step-0));
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.form-control::placeholder { color: var(--text-faint); opacity: 1; }

.form-control:hover { border-color: var(--accent-line); }

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--field-focus);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

textarea.form-control { min-height: 140px; resize: vertical; }

select.form-control {
    appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237B8F8B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.05rem center;
}

select.form-control option {
    background: var(--surface-1);
    color: var(--text-strong);
}

.form-grid,
.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-5);
}

@media (max-width: 640px) {
    .form-grid,
    .form-row { grid-template-columns: minmax(0, 1fr); }
}

.form-group { margin-bottom: var(--space-5); }

.error-message,
.field-error {
    display: block;
    margin-top: 0.3rem;
    color: var(--coral-600);
    font-size: var(--step--1);
}

:root[data-theme="light"] .error-message,
:root[data-theme="light"] .field-error { color: var(--coral-700); }

.alert {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.1rem;
    margin-bottom: var(--space-5);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--step--1);
}

.alert-success { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }

.alert-error {
    border-color: color-mix(in srgb, var(--coral-600) 35%, transparent);
    background: var(--coral-soft);
    color: var(--coral);
}

/* --------------------------------------------------------------------------
   10. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion { display: grid; gap: 0.85rem; }

.accordion-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.accordion-item:hover { border-color: var(--accent-line); }
.accordion-item.is-open { border-color: var(--accent-line); background: var(--card-hover); }

.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: 1.2rem 1.4rem;
    color: var(--text-strong);
    font-size: var(--step-0);
    font-weight: 500;
    text-align: left;
    line-height: 1.45;
}

.accordion-icon {
    position: relative;
    flex: none;
    width: 26px;
    height: 26px;
    border: 1px solid var(--accent-line);
    border-radius: 50%;
    background: var(--accent-soft);
    transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease-out);
}

.accordion-icon::before,
.accordion-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 1.6px;
    border-radius: 2px;
    background: var(--accent);
    transform: translate(-50%, -50%);
    transition: opacity var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.accordion-item.is-open .accordion-icon { transform: rotate(180deg); background: var(--accent); }
.accordion-item.is-open .accordion-icon::before,
.accordion-item.is-open .accordion-icon::after { background: var(--accent-contrast); }
.accordion-item.is-open .accordion-icon::after { opacity: 0; }

.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur) var(--ease-out);
}

.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }

.accordion-panel > div { overflow: hidden; }

.accordion-panel p {
    padding: 0 1.4rem 1.3rem;
    color: var(--text-soft);
    margin: 0;
}

/* --------------------------------------------------------------------------
   11. Header
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 2000;
    padding: 0.7rem 1.15rem;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 500;
    transition: top var(--dur) var(--ease-out);
}

.skip-link:focus-visible { top: 1rem; }

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding-top: clamp(0.6rem, 0.4rem + 0.6vw, 1rem);
    transition: padding var(--dur) var(--ease-out);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    height: var(--header-h);
    padding-inline: clamp(1rem, 0.6rem + 1.2vw, 1.6rem);
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    transition: background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                backdrop-filter var(--dur) var(--ease-out);
}

.site-header.is-stuck { padding-top: 0.5rem; }

.site-header.is-stuck .site-header__inner {
    border-color: var(--border);
    background: color-mix(in srgb, var(--surface-1) 78%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
            backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--shadow-md);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex: none;
}

.brand img,
.sidebar-main-company-logo {
    width: auto;
    height: 34px;
    transition: transform var(--dur) var(--ease-spring);
}

.brand:hover img { transform: scale(1.04); }

/* Two marks, one visible per theme — the deep-teal original would disappear
   against the dark surface. */
.brand,
.footer-brand { position: relative; }

.brand__mark--light,
:root[data-theme="light"] .brand__mark--dark { display: block; }

.brand__mark--dark,
:root[data-theme="light"] .brand__mark--light { display: none; }

.nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-pill);
    color: var(--text-soft);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.nav__link:hover { color: var(--text-strong); background: var(--accent-softer); }

.nav__link.is-active { color: var(--accent); }

.nav__link.is-active::after {
    content: "";
    position: absolute;
    bottom: 0.28rem;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: translateX(-50%);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--card);
    color: var(--text-soft);
    transition: all var(--dur) var(--ease-out);
}

.icon-btn:hover {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent);
    transform: translateY(-1px);
}

/* Theme toggle: sun and moon crossfade so the control never "jumps".
   The icon shows the theme you will get, matching the button's aria-label. */
.theme-toggle { position: relative; overflow: hidden; }

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    display: grid;
    place-items: center;
    inset: 0;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}

/* Dark theme -> offer the sun */
.theme-toggle .icon-sun  { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle .icon-moon { opacity: 0; transform: rotate(70deg) scale(0.5); }

/* Light theme -> offer the moon */
:root[data-theme="light"] .theme-toggle .icon-sun  { opacity: 0; transform: rotate(-70deg) scale(0.5); }
:root[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }

/* The header CTA collapses before the nav does, so the bar never crowds */
@media (max-width: 1180px) { .header-cta { display: none; } }

.nav-toggle { display: none; }

.nav-toggle__bars {
    position: relative;
    width: 17px;
    height: 11px;
}

.nav-toggle__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.7px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle__bars span:nth-child(3) { bottom: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(4.7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-4.6px) rotate(-45deg); }

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 990;
    background: rgba(2, 10, 9, 0.55);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}

body.nav-open .nav-scrim { opacity: 1; visibility: visible; }

@media (max-width: 1024px) {
    .nav-toggle { display: inline-flex; }

    .nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1001;
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
        width: min(340px, 86vw);
        height: 100dvh;
        padding: calc(var(--header-h) + 1.6rem) 1.4rem 2rem;
        border-left: 1px solid var(--border);
        background: var(--surface-1);
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
        transform: translateX(102%);
        transition: transform var(--dur-slow) var(--ease-out);
    }

    body.nav-open .nav { transform: translateX(0); }

    .nav__link {
        padding: 0.9rem 1rem;
        border-radius: var(--radius-sm);
        font-size: var(--step-1);
    }

    .nav__link.is-active { background: var(--accent-soft); }
    .nav__link.is-active::after { display: none; }

    .nav__cta { margin-top: 1rem; }
}

@media (min-width: 1025px) {
    .nav__cta { display: none; }
}

/* --------------------------------------------------------------------------
   12. Main
   -------------------------------------------------------------------------- */
.main-content {
    display: block;
    min-height: 60vh;
    padding-top: calc(var(--header-h) + 1rem);
}

/* Interior page hero shared by About/Services/Contact/Blog/Legal */
.page-hero {
    position: relative;
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(2.5rem, 2rem + 2vw, 4rem);
    overflow: hidden;
}

.page-hero__inner {
    max-width: 780px;
    margin-inline: auto;
    text-align: center;
}

.page-hero h1 { margin-bottom: var(--space-4); }

.page-hero p {
    color: var(--text-soft);
    font-size: var(--step-1);
    font-weight: 300;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: var(--space-5);
    font-size: var(--step--1);
    color: var(--text-faint);
}

/* min-height keeps these above the WCAG 2.2 target-size minimum (24px) */
.breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--text-faint);
}

.breadcrumb a:hover { color: var(--accent); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 24px; }
.breadcrumb li + li::before { content: "/"; color: var(--border-strong); }
.breadcrumb [aria-current="page"] { color: var(--text-soft); }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    margin-top: var(--section-y);
    border-top: 1px solid var(--border);
    background: var(--surface-1);
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(760px, 90%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: translateX(-50%);
    opacity: 0.6;
}

.site-footer::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -55%;
    width: min(900px, 120%);
    aspect-ratio: 1;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-softer), transparent 62%);
    transform: translateX(-50%);
}

.site-footer > * { position: relative; z-index: 1; }

/* Newsletter band */
.footer-cta {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
    align-items: center;
    padding: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
    margin-block: var(--space-8) var(--space-8);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, var(--accent-soft), transparent 55%),
        var(--surface-2);
}

.footer-cta h2 { font-size: var(--step-3); margin-bottom: 0.5rem; }
.footer-cta p { color: var(--text-soft); font-size: var(--step-0); }

.newsletter-form { display: grid; gap: 0.7rem; }

.newsletter-form .newsletter-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--field);
    color: var(--text-strong);
    font-size: max(1rem, var(--step-0));
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.newsletter-form input[type="email"]::placeholder { color: var(--text-faint); }

.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.newsletter-form small { color: var(--text-faint); font-size: var(--step--1); }

@media (max-width: 860px) {
    .footer-cta { grid-template-columns: minmax(0, 1fr); }
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr) 1.2fr;
    gap: clamp(1.75rem, 1rem + 2.6vw, 3rem);
    padding-bottom: var(--space-8);
}

@media (max-width: 1080px) {
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-col--contact { grid-column: span 3; }
}

@media (max-width: 700px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-col--brand,
    .footer-col--contact { grid-column: span 2; }
}

.footer-col h3 {
    margin-bottom: var(--space-4);
    color: var(--text-strong);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Scoped to the link columns only: the brand column's social/badge lists lay
   themselves out horizontally and must not inherit this grid. */
nav.footer-col ul { display: grid; gap: 0.62rem; }

.footer-col a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 24px;
    color: var(--text-soft);
    font-size: var(--step--1);
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.footer-col a:hover { color: var(--accent); transform: translateX(3px); }

.footer-col--brand p {
    max-width: 38ch;
    color: var(--text-soft);
    font-size: var(--step--1);
}

.footer-brand { display: inline-flex; align-items: center; margin-bottom: var(--space-4); }
.footer-brand img { height: 32px; width: auto; }

.footer-contact { display: grid; gap: 0.85rem; }

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-height: 24px;
    color: var(--text-soft);
    font-size: var(--step--1);
}

.footer-contact a { display: inline-flex; align-items: center; min-height: 24px; }

.footer-contact i {
    flex: none;
    margin-top: 0.3em;
    color: var(--accent);
    font-size: 0.85em;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: var(--space-5);
}

.social-links a,
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-soft);
    text-decoration: none;
    transition: all var(--dur) var(--ease-out);
}

.social-links a:hover,
.social-link:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
    transform: translateY(-3px);
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--space-5);
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.42rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.footer-badge i { color: var(--accent); font-size: 0.85em; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-top: 1px solid var(--border);
    color: var(--text-faint);
    font-size: var(--step--1);
}

.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }

.footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--text-faint);
}

.footer-bottom a:hover { color: var(--accent); }

/* Back to top -------------------------------------------------------------- */
.back-to-top {
    position: fixed;
    right: clamp(1rem, 0.5rem + 1.4vw, 1.8rem);
    bottom: clamp(1rem, 0.5rem + 1.4vw, 1.8rem);
    z-index: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface-1) 85%, transparent);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    color: var(--text-soft);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: all var(--dur) var(--ease-out);
}

.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

.back-to-top:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
    transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   14. Motion
   -------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out), filter 0.75s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

[data-reveal="blur"] { filter: blur(9px); transform: translateY(14px); }
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="zoom"]  { transform: scale(0.955); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-revealed {
    opacity: 1;
    filter: none;
    transform: none;
}

/* Legacy .fade-in: previously a fire-once CSS animation. Now driven by the
   same IntersectionObserver so content below the fold animates when reached
   and never stays invisible if JS is unavailable. */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}

.fade-in.is-revealed { opacity: 1; transform: none; }

.no-js .fade-in,
.no-js [data-reveal] { opacity: 1; filter: none; transform: none; }

@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

@keyframes float-y-sm {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

@keyframes drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(3%, -4%) scale(1.06); }
    66%  { transform: translate(-3%, 3%) scale(0.96); }
    100% { transform: translate(0, 0) scale(1); }
}

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

@keyframes shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.float { animation: float-y 7s var(--ease-in-out) infinite; }
.float-sm { animation: float-y-sm 5.5s var(--ease-in-out) infinite; }

/* Logo / tech marquee ------------------------------------------------------ */
.marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
    display: flex;
    width: max-content;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    animation: marquee 34s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-faint);
    font-size: var(--step-0);
    white-space: nowrap;
    transition: color var(--dur) var(--ease-out);
}

.marquee__item:hover { color: var(--accent); }
.marquee__item i { font-size: 1.35em; }

/* --------------------------------------------------------------------------
   15. Utilities (replaces the handful of Bootstrap classes still in markup)
   -------------------------------------------------------------------------- */
.container-fluid { width: 100%; margin-inline: auto; padding-inline: 1rem; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-primary { color: var(--accent); }
.text-muted   { color: var(--text-soft); }

.d-flex { display: flex; }
.d-none { display: none; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.mx-auto { margin-inline: auto; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-4); }
.mt-4 { margin-top: var(--space-5); }
.mt-5 { margin-top: var(--space-7); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-4); }
.mb-4 { margin-bottom: var(--space-5); }
.mb-5 { margin-bottom: var(--space-7); }

.py-1 { padding-block: var(--space-1); }
.py-2 { padding-block: var(--space-2); }
.py-3 { padding-block: var(--space-4); }
.py-4 { padding-block: var(--space-6); }
.py-5 { padding-block: var(--section-y); }

.w-full { width: 100%; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   16. Accessibility
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Only suppress the ring for pointer interaction, never for keyboards */
:focus:not(:focus-visible) { outline: none; }

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal],
    .fade-in {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}

@media (prefers-contrast: more) {
    :root { --border: rgba(255, 255, 255, 0.3); --border-strong: rgba(255, 255, 255, 0.45); }
    :root[data-theme="light"] { --border: rgba(6, 56, 49, 0.3); --border-strong: rgba(6, 56, 49, 0.5); }
}

/* --------------------------------------------------------------------------
   17. Print
   -------------------------------------------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    .back-to-top,
    .nav-scrim { display: none !important; }

    body { background: #fff; color: #000; }
    body::before { display: none; }
    .main-content { padding-top: 0; }
    [data-reveal], .fade-in { opacity: 1 !important; transform: none !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* --------------------------------------------------------------------------
   18. Honeypot
   Off-screen rather than display:none — some bots skip hidden inputs, and a
   field they can see but a human cannot is the whole point. Never focusable.
   -------------------------------------------------------------------------- */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}