:root {
        /* Colors */
        --color-bg: #F7F7F4;
        --color-text: #26251E;
        --color-accent: #2563eb; /* blue rectangle */

        /* Type */
        --font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial,
          sans-serif;
        --font-weight: 400;

        /* Layout */
        --container-max: 72rem; /* 1152px */
        --gutter: 1.5rem; /* 24px */
        --grid-columns: 12;
        --grid-gap: 1rem; /* 16px */

        /* Sizing + spacing (mobile defaults) */
        --svg-width: 6.25rem; /* 100px */
        --space-logo-headline: 1.5rem; /* 24px */
        --space-headline-subhead: 1.5rem; /* 24px */

        /* Font sizes (mobile defaults) */
        --fs-headline: 1.5rem; /* 24px */
        --fs-subhead: 0.875rem; /* 14px */

        /* Breakpoint */
        --bp-md: 48rem; /* 768px */
      }

      @media (min-width: 48rem) {
        :root {
          --svg-width: 7.5rem; /* 120px */
          --space-logo-headline: 2rem; /* 32px (not specified; safe bump for desktop) */
          --space-headline-subhead: 3rem; /* 48px */
          --fs-headline: 2.25rem; /* 36px */
          --fs-subhead: 1rem; /* 16px */
        }
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html {
        color-scheme: dark;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }

      body {
        margin: 0;
        min-height: 100svh;
        background: var(--color-bg);
        color: var(--color-text);
        font-family: var(--font-family);
        font-weight: var(--font-weight);
        line-height: 1.4;
      }

      /* Simple column system (12-col grid) */
      .container {
        width: min(100%, var(--container-max));
        margin-inline: auto;
        padding-inline: var(--gutter);
      }

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

      .col-12 {
        grid-column: span 12;
      }

      /* Centered hero */
      .hero {
        min-height: 100svh;
        display: grid;
        place-items: center;
        text-align: center;
      }

      .hero__content {
        max-width: 42rem;
        margin-inline: auto;
        display: grid;
        justify-items: center;
      }

      /* "SVG" placeholder: blue rectangle with responsive width */
      .hero__logo {
        width: var(--svg-width);
        height: auto;
        display: block;
      }

      .hero__headline {
        margin: var(--space-logo-headline) 0 0;
        font-size: var(--fs-headline);
        font-weight: var(--font-weight);
        line-height: 1.1;
        letter-spacing: -0.02em;
      }

      .hero__subhead {
        margin: var(--space-headline-subhead) 0 0;
        font-size: var(--fs-subhead);
        font-weight: var(--font-weight);
        line-height: 1.5;
        opacity: 0.92;
      }

      /* a11y helper */
      .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;
      }