/*
  Visual Identity:
  Palette: #36 — Vibrant electric blues, warm oranges, creative purples
  Typography: Slab + Mono (Rokkitt + Fira Code)
  Spatial: Grid with Bleed
  Texture: Dot/Line Patterns
  Animation: Choreographed Entrance
*/

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Rokkitt:wght@300;400;700;900&display=swap');

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

/* ============================================
   RESET
   ============================================ */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    min-block-size: 100dvh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-inline-size: 100%;
  }

  img {
    block-size: auto;
  }

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

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

  a {
    color: inherit;
    text-decoration: none;
  }

  ul,
  ol {
    list-style: none;
  }

  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  p {
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  fieldset {
    border: none;
  }

  details > summary {
    cursor: pointer;
    list-style: none;
  }

  details > summary::-webkit-details-marker {
    display: none;
  }
}

/* ============================================
   BASE — Custom Properties + Base Styles
   ============================================ */
@layer base {
  :root {
    /* Color tokens — from dice.json palette #36 (8 colors) */
    --color-light: #F9F9F9;
    --color-mist: #AEA6B6;
    --color-brand: #5152EF;
    --color-accent: #FA573E;
    --color-dark: #181922;
    --color-glow: #FE8A18;
    --color-creative: #D739AF;
    --color-sky: #0FB2D8;

    /* Spacing scale — balanced density */
    --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --space-sm: clamp(0.5rem, 1vw, 0.75rem);
    --space-md: clamp(1rem, 2vw, 1.5rem);
    --space-lg: clamp(1.5rem, 3vw, 2.5rem);
    --space-xl: clamp(2.5rem, 5vw, 4rem);
    --space-2xl: clamp(4rem, 8vw, 7rem);

    /* Typography — Slab + Mono */
    --font-display: 'Rokkitt', 'Georgia', serif;
    --font-body: 'Rokkitt', 'Georgia', serif;
    --font-mono: 'Fira Code', 'Courier New', monospace;
    --size-display: clamp(2.75rem, 5vw + 1rem, 5rem);
    --size-h1: clamp(2.25rem, 4vw + 0.5rem, 4rem);
    --size-h2: clamp(1.75rem, 3vw + 0.25rem, 2.75rem);
    --size-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.625rem);
    --size-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
    --size-small: clamp(0.8125rem, 0.25vw + 0.75rem, 0.9375rem);
    --size-xs: clamp(0.6875rem, 0.25vw + 0.625rem, 0.8125rem);

    /* Animation */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 600ms;
    --duration-dramatic: 1200ms;

    /* Z-index */
    --z-base: 1;
    --z-above: 10;
    --z-cookie: 90;
    --z-header: 100;
    --z-backdrop: 110;
    --z-mobile-nav: 120;
    --z-nav-toggle: 130;
    --z-scroll-top: 80;

    /* Radius — geometric shape: sharp, 2-4px */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;

    /* Shadow — subtle depth */
    --shadow-sm: 0 1px 3px rgba(24, 25, 34, 0.08);
    --shadow-md: 0 3px 10px rgba(24, 25, 34, 0.1);
    --shadow-lg: 0 6px 24px rgba(24, 25, 34, 0.12);

    /* Container */
    --container-max: 72rem;
    --container-padding: clamp(1.25rem, 4vw, 3rem);
  }

  body {
    font-family: var(--font-body);
    font-size: var(--size-body);
    font-weight: 400;
    color: var(--color-dark);
    background-color: var(--color-light);
    line-height: 1.6;
  }

  ::selection {
    background-color: var(--color-brand);
    color: var(--color-light);
  }

  :focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
  }

  /* Typography hierarchy */
  h1 {
    font-family: var(--font-display);
    font-size: var(--size-h1);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-dark);
  }

  h2 {
    font-family: var(--font-display);
    font-size: var(--size-h2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-dark);
  }

  h3 {
    font-family: var(--font-display);
    font-size: var(--size-h3);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-dark);
  }

  h4 {
    font-family: var(--font-mono);
    font-size: var(--size-small);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-mist);
  }

  p {
    max-inline-size: 65ch;
  }

  a:not([class]) {
    color: var(--color-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color var(--duration-fast) var(--ease-smooth);
  }

  a:not([class]):hover {
    color: var(--color-creative);
  }

  strong {
    font-weight: 700;
  }

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

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

/* ============================================
   LAYOUT
   ============================================ */
@layer layout {
  .section-contained {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-block: clamp(5rem, 10vw, 8rem);
  }

  .section-full {
    padding-block: clamp(5rem, 10vw, 8rem);
  }

  .section-light {
    padding-block: clamp(5rem, 10vw, 8rem);
  }

  .section-inner {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .section-intro {
    font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
    color: rgba(24, 25, 34, 0.6);
    margin-block-start: var(--space-sm);
    margin-block-end: var(--space-lg);
    max-inline-size: 55ch;
  }

  /* Dark section variant */
  .section-dark {
    background-color: var(--color-dark);
    color: var(--color-light);
    padding-block: clamp(5rem, 10vw, 8rem);
  }

  .section-dark h2,
  .section-dark h3 {
    color: var(--color-light);
  }

  .section-dark .section-intro {
    color: var(--color-mist);
  }

  /* Diagonal / Angled section dividers */
  [data-angle="right"] {
    position: relative;
  }

  [data-angle="left"] {
    position: relative;
  }

  /* Grid with Bleed — content occasionally breaks container */
  .bleed-right {
    margin-inline-end: calc(var(--container-padding) * -1);
  }

  .bleed-left {
    margin-inline-start: calc(var(--container-padding) * -1);
  }

  .bleed-full {
    margin-inline: calc(var(--container-padding) * -1);
  }
}

/* ============================================
   COMPONENTS
   ============================================ */
@layer components {

  /* --- Skip Link --- */
  .skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--space-md);
    background-color: var(--color-brand);
    color: var(--color-light);
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--size-small);
    border-radius: var(--radius-md);
    z-index: 9999;
    transition: inset-block-start var(--duration-normal) var(--ease-out);
  }

  .skip-link:focus {
    inset-block-start: var(--space-md);
  }

  /* --- Buttons --- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--size-small);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.03em;
    padding: 0.875em 1.75em;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--duration-normal) var(--ease-smooth),
      color var(--duration-normal) var(--ease-smooth),
      border-color var(--duration-normal) var(--ease-smooth),
      transform var(--duration-fast) var(--ease-bounce),
      box-shadow var(--duration-normal) var(--ease-smooth);
    position: relative;
    overflow: hidden;
  }

  .btn--accent {
    background-color: var(--color-accent);
    color: var(--color-light);
    border-color: var(--color-accent);
  }

  .btn--accent:hover {
    background-color: var(--color-glow);
    border-color: var(--color-glow);
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(250, 87, 62, 0.3);
  }

  .btn--accent:active {
    transform: scale(0.97);
  }

  .btn--brand {
    background-color: var(--color-brand);
    color: var(--color-light);
    border-color: var(--color-brand);
  }

  .btn--brand:hover {
    background-color: var(--color-sky);
    border-color: var(--color-sky);
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(81, 82, 239, 0.3);
  }

  .btn--brand:active {
    transform: scale(0.97);
  }

  .btn--outline {
    background-color: transparent;
    color: var(--color-brand);
    border-color: var(--color-brand);
  }

  .btn--outline:hover {
    background-color: var(--color-brand);
    color: var(--color-light);
    transform: scale(1.04);
  }

  .btn--outline:active {
    transform: scale(0.97);
  }

  .section-dark .btn--outline {
    color: var(--color-light);
    border-color: var(--color-light);
  }

  .section-dark .btn--outline:hover {
    background-color: var(--color-light);
    color: var(--color-dark);
  }

  .btn--ghost {
    background-color: transparent;
    color: var(--color-mist);
    border-color: transparent;
  }

  .btn--ghost:hover {
    color: var(--color-dark);
    background-color: rgba(174, 166, 182, 0.12);
  }

  .btn--nav {
    background-color: var(--color-accent);
    color: var(--color-light);
    border-color: var(--color-accent);
    padding: 0.625em 1.25em;
    font-size: var(--size-xs);
  }

  .btn--nav:hover {
    background-color: var(--color-glow);
    border-color: var(--color-glow);
    transform: scale(1.04);
  }

  .btn--sm {
    padding: 0.5em 1em;
    font-size: var(--size-xs);
  }

  .btn--lg {
    padding: 1em 2.25em;
    font-size: var(--size-body);
  }

  /* --- Icons (SVG sprite) --- */
  .icon {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
    flex-shrink: 0;
    vertical-align: middle;
  }

  .icon-sm {
    width: 1em;
    height: 1em;
  }

  .icon-lg {
    width: 2em;
    height: 2em;
  }

  /* --- Header — hidden until scroll --- */
  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-header);
    background-color: rgba(24, 25, 34, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateY(-100%);
    transition: transform var(--duration-slow) var(--ease-out);
    border-block-end: 1px solid rgba(249, 249, 249, 0.06);
  }

  .site-header.is-visible {
    transform: translateY(0);
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-block: var(--space-sm);
    min-block-size: 3.5rem;
  }

  .logo img {
    block-size: 2rem;
    inline-size: auto;
    object-fit: contain;
  }

  .desktop-nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }

  .desktop-nav a:not(.btn) {
    font-family: var(--font-mono);
    font-size: var(--size-small);
    color: var(--color-light);
    letter-spacing: 0.02em;
    position: relative;
    transition: color var(--duration-fast) var(--ease-smooth);
  }

  .desktop-nav a:not(.btn)::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: -4px;
    block-size: 2px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-normal) var(--ease-out);
  }

  .desktop-nav a:not(.btn):hover {
    color: var(--color-accent);
  }

  .desktop-nav a:not(.btn):hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* --- Burger button --- */
  .burger {
    width: 44px;
    height: 44px;
    position: relative;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    z-index: var(--z-nav-toggle);
    -webkit-tap-highlight-color: transparent;
    color: var(--color-light);
  }

  .burger span {
    position: absolute;
    width: 28px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  .burger span:nth-child(1) { top: 12px; }
  .burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .burger span:nth-child(3) { bottom: 12px; }

  /* --- Nav Backdrop --- */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(24, 25, 34, 0.6);
    z-index: var(--z-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-normal) var(--ease-smooth), visibility var(--duration-normal);
    -webkit-tap-highlight-color: transparent;
    display: none;
  }

  .nav-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
  }

  /* --- Mobile Nav --- */
  .mobile-nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    block-size: 100dvh;
    inline-size: min(80vw, 22rem);
    background-color: var(--color-dark);
    z-index: var(--z-mobile-nav);
    display: none;
    flex-direction: column;
    padding-block-start: 5rem;
    padding-inline: var(--space-lg);
    gap: var(--space-xs);
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform var(--duration-slow) cubic-bezier(0.4, 0, 0.2, 1),
      visibility var(--duration-slow);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .mobile-nav a {
    font-family: var(--font-mono);
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: var(--color-light);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-smooth);
  }

  .mobile-nav a:hover,
  .mobile-nav a[aria-current="page"] {
    background-color: rgba(81, 82, 239, 0.15);
    color: var(--color-sky);
  }

  /* --- Forms --- */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .form-group label {
    font-family: var(--font-mono);
    font-size: var(--size-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-light);
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-family: var(--font-body);
    font-size: var(--size-body);
    padding: 0.75em 1em;
    background-color: rgba(249, 249, 249, 0.06);
    border: 1px solid rgba(249, 249, 249, 0.15);
    border-radius: var(--radius-md);
    color: var(--color-light);
    transition:
      border-color var(--duration-fast) var(--ease-smooth),
      background-color var(--duration-fast) var(--ease-smooth),
      box-shadow var(--duration-fast) var(--ease-smooth);
  }

  .form-group input::placeholder,
  .form-group textarea::placeholder {
    color: var(--color-mist);
    opacity: 0.6;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    outline: none;
    border-color: var(--color-brand);
    background-color: rgba(249, 249, 249, 0.1);
    box-shadow: 0 0 0 3px rgba(81, 82, 239, 0.2);
  }

  .form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23AEA6B6' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1em center;
    padding-inline-end: 2.5em;
    cursor: pointer;
  }

  .form-group select option {
    color: var(--color-dark);
    background-color: var(--color-light);
  }

  .form-group textarea {
    resize: vertical;
    min-block-size: 6rem;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  .form-checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .form-checkbox input[type="checkbox"] {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    padding: 0;
    border: 2px solid var(--color-mist);
    border-radius: var(--radius-sm);
    background-color: transparent;
    cursor: pointer;
    margin-block-start: 0.1em;
    transition:
      background-color var(--duration-fast) var(--ease-smooth),
      border-color var(--duration-fast) var(--ease-smooth);
    position: relative;
  }

  .form-checkbox input[type="checkbox"]:checked {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
  }

  .form-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 5px;
    width: 5px;
    height: 9px;
    border: 2px solid var(--color-light);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .form-checkbox label {
    font-family: var(--font-body);
    font-size: var(--size-small);
    line-height: 1.5;
    color: var(--color-mist);
    cursor: pointer;
  }

  .form-checkbox label a {
    color: var(--color-sky);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }

  .form-checkbox label a:hover {
    color: var(--color-light);
  }

  /* --- Footer --- */
  .site-footer {
    background-color: var(--color-dark);
    color: var(--color-light);
    padding-block: var(--space-2xl) var(--space-lg);
    position: relative;
  }

  .site-footer::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: linear-gradient(
      90deg,
      var(--color-brand) 0%,
      var(--color-creative) 33%,
      var(--color-accent) 66%,
      var(--color-glow) 100%
    );
  }

  .footer-inner {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .footer-brand {
    margin-block-end: var(--space-xl);
  }

  .footer-brand .logo img {
    block-size: 1.75rem;
    inline-size: auto;
    margin-block-end: var(--space-sm);
  }

  .footer-tagline {
    font-family: var(--font-display);
    font-size: var(--size-body);
    font-weight: 300;
    font-style: italic;
    color: var(--color-mist);
    max-inline-size: none;
  }

  .footer-nav {
    display: flex;
    gap: var(--space-2xl);
    margin-block-end: var(--space-xl);
    flex-wrap: wrap;
  }

  .footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-inline-size: 10rem;
  }

  .footer-col h4 {
    margin-block-end: var(--space-xs);
  }

  .footer-col a {
    font-size: var(--size-small);
    color: var(--color-mist);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    transition: color var(--duration-fast) var(--ease-smooth);
  }

  .footer-col a:hover {
    color: var(--color-light);
  }

  .footer-bottom {
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid rgba(249, 249, 249, 0.18);
  }

  .footer-bottom p {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    color: var(--color-mist);
    max-inline-size: none;
  }

  /* --- Cookie Popup --- */
  .cookie-popup {
    position: fixed;
    inset-block-end: var(--space-md);
    inset-inline-start: var(--space-md);
    inset-inline-end: var(--space-md);
    max-inline-size: 32rem;
    background-color: var(--color-dark);
    color: var(--color-light);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(249, 249, 249, 0.08);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-cookie);
    display: none;
  }

  .cookie-popup.is-visible {
    display: block;
  }

  .cookie-popup p {
    font-size: var(--size-small);
    line-height: 1.5;
    margin-block-end: var(--space-sm);
    color: var(--color-mist);
    max-inline-size: none;
  }

  .cookie-popup p a {
    color: var(--color-sky);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }

  .cookie-popup p a:hover {
    color: var(--color-light);
  }

  .cookie-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
  }

  /* --- Scroll Top --- */
  .scroll-top {
    position: fixed;
    inset-block-end: var(--space-lg);
    inset-inline-end: var(--space-lg);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-brand);
    color: var(--color-light);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    z-index: var(--z-scroll-top);
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition:
      opacity var(--duration-normal) var(--ease-smooth),
      visibility var(--duration-normal) var(--ease-smooth),
      transform var(--duration-normal) var(--ease-out),
      background-color var(--duration-fast) var(--ease-smooth);
    box-shadow: var(--shadow-md);
  }

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

  .scroll-top:hover {
    background-color: var(--color-sky);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }

  .scroll-top:active {
    transform: translateY(0) scale(0.95);
  }

  .scroll-top .icon {
    width: 1.25em;
    height: 1.25em;
  }

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

/* ============================================
   ANIMATIONS
   ============================================ */
@layer animations {

  /* Choreographed Entrance — staggered reveal */
  @keyframes entrance-rise {
    from {
      opacity: 0;
      transform: translateY(2.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes entrance-slide-left {
    from {
      opacity: 0;
      transform: translateX(-2rem);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes entrance-slide-right {
    from {
      opacity: 0;
      transform: translateX(2rem);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes entrance-scale {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes entrance-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Counter fill for statistics */
  @keyframes fill-bar {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  /* Marquee scroll for partner tags */
  @keyframes marquee-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  /* Dot pattern pulse — subtle texture life */
  @keyframes dot-pulse {
    0%, 100% {
      opacity: 0.04;
    }
    50% {
      opacity: 0.07;
    }
  }

  /* Accordion chevron rotation */
  @keyframes chevron-rotate {
    to {
      transform: rotate(180deg);
    }
  }

  /* Cookie popup entrance */
  @keyframes cookie-rise {
    from {
      opacity: 0;
      transform: translateY(1.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .cookie-popup.is-visible {
    animation: cookie-rise var(--duration-slow) var(--ease-out) both;
  }

  /* Data-animate elements — initial hidden state for JS orchestration */
  [data-animate] {
    opacity: 0;
  }

  [data-animate].is-revealed {
    animation: entrance-rise var(--duration-slow) var(--ease-out) both;
    animation-delay: calc(var(--stagger, 0) * 120ms);
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    [data-animate] {
      opacity: 1;
    }
  }
}

/* ============================================
   UTILITIES
   ============================================ */
@layer utilities {

  /* Dot/Line Pattern texture backgrounds */
  .pattern-dots {
    position: relative;
  }

  .pattern-dots::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
      circle,
      var(--color-brand) 1px,
      transparent 1px
    );
    background-size: 24px 24px;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
  }

  .pattern-lines {
    position: relative;
  }

  .pattern-lines::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      var(--color-mist) 10px,
      var(--color-mist) 11px
    );
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
  }

  .pattern-grid {
    position: relative;
  }

  .pattern-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(var(--color-brand) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-brand) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
  }

  .pattern-cross {
    position: relative;
  }

  .pattern-cross::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle, var(--color-creative) 1px, transparent 1px),
      radial-gradient(circle, var(--color-creative) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: 0 0, 16px 16px;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
  }

  /* Ensure pattern pseudo-elements don't cover content */
  .pattern-dots > *,
  .pattern-lines > *,
  .pattern-grid > *,
  .pattern-cross > * {
    position: relative;
    z-index: 1;
  }

  /* Text alignment utilities */
  .text-center {
    text-align: center;
  }

  .text-center p {
    margin-inline: auto;
  }

  /* Visually hidden but accessible */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

/* ============================================
   DARK SCHEME SUPPORT
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }

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

/* ============================================
   SCROLL LOCK — used by mobile nav JS
   ============================================ */
html.scroll-locked {
  overflow: hidden;
}

/* ============================================
   BURGER ANIMATION — variant #7 X Slide (elastic)
   ============================================ */
.burger[aria-expanded="true"] span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) scale(0);
}

.burger[aria-expanded="true"] span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* ============================================
   RESPONSIVE — Base Components
   Approach: desktop-first (max-width)
   Breakpoints: 480 / 768 / 1024 / 1280
   ============================================ */

@media (max-width: 1023px) {
  .footer-nav {
    gap: var(--space-lg);
  }
}

@media (max-width: 767px) {
  /* Navigation swap: desktop → burger + mobile panel */
  .desktop-nav { display: none; }
  .burger { display: flex; }
  .nav-backdrop { display: block; }
  .mobile-nav { display: flex; }

  .header-inner {
    min-block-size: 3rem;
  }

  /* Form rows stack on mobile */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Footer columns stack */
  .footer-nav {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .footer-col {
    min-inline-size: 0;
  }

  /* Cookie popup full width */
  .cookie-popup {
    inset-inline-start: var(--space-sm);
    inset-inline-end: var(--space-sm);
    max-inline-size: none;
    padding: var(--space-md);
  }

  .cookie-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-actions .btn {
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 479px) {
  .logo img {
    block-size: 1.5rem;
  }

  .scroll-top {
    width: 40px;
    height: 40px;
    inset-inline-end: var(--space-md);
    inset-block-end: var(--space-md);
  }

  .btn--lg {
    padding: 0.75em 1.5em;
    font-size: var(--size-small);
  }
}

/* ============================================
   REDUCED MOTION — burger & mobile nav
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .nav-backdrop,
  .burger span {
    transition: none !important;
  }
}