/* ============================================
     SYNTHZ — DESIGN TOKENS
     ============================================ */

  :root {
    --color-bg:       #FFFFFF;
    --color-surface:  #F0EFE9;
    --color-text:     #000000;
    --color-white:    #FFFFFF;
    --color-black:    #000000;

    --font-body:  'DM Sans', sans-serif;
    --font-mono:  'DM Mono', monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.25rem;
    --text-xl:   1.75rem;
    --text-2xl:  2.5rem;
    --text-3xl:  3.5rem;

    --weight-regular: 400;
    --weight-medium:  500;
    --weight-bold:    700;

    --leading-tight:  1.2;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    --letter-spacing-ui: 0.06em;

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    --max-width:     860px;
    --max-width-wide: 1500px;
    --section-pad-v: var(--space-24);
    --section-pad-h: 3.5rem;

    --radius-sm:   4px;
    --radius-base: 8px;
    --radius-lg:   12px;
    --border:      2px solid #000000;
    --border-light: 1px solid #C0BFB8;
  }

  /* ============================================
     RESET
     ============================================ */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 72px; }

  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
  }

  /* Establish a block formatting context on main — prevents
     margin/padding collapsing through the sticky header */
  main { display: flow-root; }

  img { max-width: 100%; display: block; }
  a { color: var(--color-black); text-decoration: none; }

  /* ============================================
     LAYOUT UTILITIES
     ============================================ */

  .container {
    width: 100%;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--section-pad-h);
    padding-right: var(--section-pad-h);
  }

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

  .section {
    padding-top: var(--section-pad-v);
    padding-bottom: var(--section-pad-v);
  }

  .stack { display: flex; flex-direction: column; }
  .stack-2  { gap: var(--space-2); }
  .stack-4  { gap: var(--space-4); }
  .stack-6  { gap: var(--space-6); }
  .stack-8  { gap: var(--space-8); }
  .stack-12 { gap: var(--space-12); }

  .row { display: flex; flex-wrap: wrap; gap: var(--space-6); }
  .row > * { flex: 1 1 280px; }

  /* ============================================
     TYPOGRAPHY
     ============================================ */

  .t-hero    { font-size: var(--text-3xl); font-weight: var(--weight-bold);    line-height: var(--leading-tight); }
  .t-title   { font-size: var(--text-2xl); font-weight: var(--weight-bold);    line-height: var(--leading-tight); }
  .t-section { font-size: var(--text-xl);  font-weight: var(--weight-medium);  line-height: var(--leading-tight); }
  .t-lead    { font-size: var(--text-lg);  font-weight: var(--weight-regular); line-height: var(--leading-loose); }
  .t-body    { font-size: var(--text-base); line-height: var(--leading-normal); }
  .t-small   { font-size: var(--text-sm); }
  .t-label   { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--letter-spacing-ui); text-transform: uppercase; }
  .t-mono    { font-family: var(--font-mono); font-size: var(--text-sm); }

  /* ============================================
     COMPONENTS
     ============================================ */

  .btn {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-base);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--letter-spacing-ui);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
    border: 2px solid #000;
  }
  .btn:hover { opacity: 0.7; }
  .btn-primary   { background: #000; color: #fff; }
  .btn-secondary { background: #fff; color: #000; }

  .tag {
    display: inline-block;
    background: var(--color-surface);
    color: #000;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--letter-spacing-ui);
    text-transform: uppercase;
    padding: var(--space-1) var(--space-3);
    border-radius: 99px;
  }

  .card {
    background: #fff;
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
  }

  code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--color-surface);
    border: var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
  }

  .code-block {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-base);
    padding: var(--space-6);
    line-height: var(--leading-loose);
    overflow-x: auto;
    white-space: pre;
  }

  /* ============================================
     HEADER
     ============================================ */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .site-header__logo img {
    height: 32px;
    width: auto;
  }

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

  .site-nav a {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--letter-spacing-ui);
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    transition: opacity 0.15s ease;
  }
  .site-nav a:hover { opacity: 0.5; }
  .site-nav .btn-primary { color: #fff; }
  .site-nav .btn-secondary { color: #000; }

  /* Hamburger — mobile only */
  .nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
  }
  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #000;
    transition: all 0.2s ease;
  }

  /* Mobile nav */
  @media (max-width: 640px) {
    .nav-toggle { display: flex; }

    .site-nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #fff;
      border-bottom: var(--border);
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      padding: var(--space-4) 0;
    }

    .site-nav.is-open { display: flex; }

    .site-nav a {
      width: 100%;
      padding: var(--space-3) var(--space-6);
    }

    .site-nav .btn {
      margin: var(--space-3) var(--space-6);
      width: calc(100% - var(--space-12));
      text-align: center;
    }
  }

  /* ============================================
     FOOTER
     ============================================ */

  .site-footer {
    background: #000;
    border-top: var(--border);
  }

  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .site-footer__logo img {
    height: 28px;
    width: auto;
  }

  .site-footer__copy {
    font-size: var(--text-sm);
    color: #fff;
    opacity: 0.6;
  }

  .site-footer__links {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
  }

  .site-footer__links a {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--letter-spacing-ui);
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.15s ease;
  }
  .site-footer__links a:hover { opacity: 1; }

  /* ============================================
     MAIN PLACEHOLDER
     ============================================ */

  .placeholder {
    background: var(--color-surface);
    border-top: var(--border-light);
    border-bottom: var(--border-light);
    padding: var(--space-32) var(--space-6);
    text-align: center;
    color: #888;
    font-size: var(--text-sm);
    letter-spacing: var(--letter-spacing-ui);
    text-transform: uppercase;
  }
  /* ============================================
     HERO
     ============================================ */

  .hero.section {
    padding-top: calc(var(--section-pad-v) / 4);
  }

  .hero__inner {
    display: flex;
    align-items: center;
    gap: var(--space-12);
  }

  .hero__content {
    flex: 1 1 50%;
    min-width: 0;
  }

  .hero__label {
    display: block;
    margin-bottom: var(--space-4);
    color: #000;
    opacity: 0.5;
  }

  .hero__heading {
    font-size: clamp(2.4rem, 5vw, 3.5rem);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-6);
  }

  .hero__heading-accent {
    display: inline-block;
  }

  .hero__body {
    margin-bottom: var(--space-8);
    color: #000;
    opacity: 0.75;
    line-height: 1.5em;
  }

  .hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  /* --- Right column: image cluster --- */

  /*
   * MOBILE SAFETY STRATEGY
   * ─────────────────────────────────────────────
   * .hero__images-outer  → flex item, constrains max width
   * .hero__images        → aspect-ratio:1 square + overflow:hidden
   * All circle centres are % of .hero__images width/height.
   * Circle size = 38%, so radius = 19%.
   * All centres kept between 20%–80% so no circle ever clips the edge.
   */

  .hero__images-outer {
    flex: 0 0 auto;
    width: min(480px, 46%);
  }

  .hero__images {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: visible;
  }

  .hero__circle {
    position: absolute;
    width: 38%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translate(-50%, -50%) scale(1);
    /* Transition opacity too — needed for the dim-siblings effect */
    transition: transform 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease;
    cursor: pointer;
  }

  /*
   * DIM-SIBLINGS TECHNIQUE — no z-index changes, no flicker.
   * When the cursor enters the cluster, all circles fade to 50%.
   * The hovered circle snaps back to full opacity and scales up.
   * Everything transitions — nothing jumps.
   */
  .hero__images:hover .hero__circle {
    opacity: 0.5;
  }

  .hero__images:hover .hero__circle:hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.10);
    box-shadow: 0 16px 48px rgba(0,0,0,0.22);
  }

  .hero__circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.28s ease;
  }

  .hero__images:hover .hero__circle:hover img {
    filter: brightness(1.08) contrast(1.04);
  }

  /*
   * Cluster layout — centres (left, top)
   * Circle radius = 19% → centres must be between 20% and 80%
   *
   *    [1]     [2]
   *  [3]   [4]   [5]
   *    [6]     [7]
   */
  .hero__circle--1 { left: 32%; top: 20%; }
  .hero__circle--2 { left: 68%; top: 20%; }
  .hero__circle--3 { left: 20%; top: 50%; }
  .hero__circle--4 { left: 50%; top: 50%; }
  .hero__circle--5 { left: 80%; top: 50%; }
  .hero__circle--6 { left: 32%; top: 80%; }
  .hero__circle--7 { left: 68%; top: 80%; }

  /* ---- Mobile: stack vertically ---- */
  @media (max-width: 700px) {
    .hero__inner {
      flex-direction: column;
      gap: var(--space-8);
      text-align: center;
    }

    .hero__images-outer {
      width: min(360px, 90vw);
      align-self: center;
    }

    .hero__body {
      max-width: 100%;
    }

    .hero__actions {
      justify-content: center;
    }
  }

  /* Reduce container horizontal padding on small screens */
  @media (max-width: 700px) {
    .container, .container--wide {
      padding-left: var(--space-6);
      padding-right: var(--space-6);
    }

    /* Global mobile centering rule —
       any .section on mobile centres its text and flex children */
    .section {
      text-align: center;
    }

    .section .btn,
    .section .hero__actions,
    .section [class*="__actions"] {
      justify-content: center;
    }
  }

/* ============================================
   HERO — PROBLEM GRAPHIC (right column)
   ============================================ */

.hero__problem-outer {
  flex: 1 1 50%;
  min-width: 0;
}

.hero__problem {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.14);
}

/* Terminal window — top half */
.hero__prompt-window {
  background: #1a1a1a;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.hero__prompt-body {
  padding: var(--space-6);
}

.hero__prompt-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: #e0e0e0;
  line-height: var(--leading-loose);
}

.hero__prompt-text em {
  color: #f97583;
  font-style: italic;
}

/* Photo — bottom half, flush beneath window */
.hero__problem-image img {
  width: 100%;
  display: block;
}

/* ---- Mobile: full width, below left column ---- */
@media (max-width: 700px) {
  .hero__problem-outer {
    width: 100%;
  }
}