.c-hero {
    background: var(--color-ink-deep);
    color: var(--color-on-ink);
    position: relative; overflow: hidden;
  }
  .c-hero::before {
    content: ""; position: absolute; top: -30%; left: 55%;
    width: 55%; height: 140%;
    background: radial-gradient(ellipse at 50% 50%,
      rgba(232, 93, 74, 0.35) 0%,
      rgba(58, 74, 168, 0.16) 50%,
      rgba(10, 18, 48, 0) 78%);
    filter: blur(40px); pointer-events: none;
  }
  .c-hero .content {
    position: relative; z-index: 2;
    max-width: 1200px; margin: 0 auto;
    padding: 48px var(--space-3xl) 56px;
  }
  .c-hero .eyebrow { color: var(--color-coral-soft); }
  .c-hero h1 {
    font-size: clamp(38px, 5.2vw, 60px);
    line-height: 1.06; letter-spacing: -0.03em;
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--space-lg); max-width: 760px;
  }
  .c-hero h1 em { font-style: normal; color: var(--color-coral); }
  .c-hero .lead { font-size: 20px; color: rgba(236, 233, 222, 0.78); max-width: 640px; margin: 0; }

  .contact-grid {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-5xl);
    align-items: start;
  }

  /* ── Form ───────────────────────────────────────────────────── */
  form.partner {
    background: var(--color-bone);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    display: grid; gap: var(--space-lg);
  }
  .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  /* min-width:0 lets a grid child shrink below its content size. Without it a
     wide <select> option ("Authentication / access tokens") forces its column
     past 1fr and the row stops being even. */
  .f-field { display: grid; gap: var(--space-sm); min-width: 0; }
  .f-field label { font-size: var(--text-label); font-weight: var(--weight-semibold); }
  .f-field input, .f-field select, .f-field textarea {
    font-family: inherit; font-size: var(--text-body);
    background: var(--color-bone-2);
    color: var(--color-ink);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    min-height: 44px;
    /* Fill the grid column. Form controls do NOT stretch by default - they size
       to intrinsic content (a text input to its `size`, roughly 20 characters;
       a select to its widest option), so the columns were even while the
       controls inside them were not. */
    width: 100%;
  }
  .f-field textarea { resize: vertical; min-height: 120px; }
  .f-field input:focus-visible, .f-field select:focus-visible, .f-field textarea:focus-visible {
    outline: 2px solid var(--color-bluex); outline-offset: 3px;
  }
  form.partner .actions { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
  form.partner .privacy { font-size: var(--text-eyebrow); color: rgba(14, 18, 64, 0.55); }

  /* ── Side panel ─────────────────────────────────────────────── */
  .side { display: grid; gap: var(--space-lg); }
  .side .card h3 { margin: 0 0 var(--space-sm); font-size: var(--text-h3); letter-spacing: -0.01em; }
  .side .card p { margin: 0; font-size: 15px; color: rgba(14, 18, 64, 0.62); }
  .side .card a.text-link { display: inline-block; margin-top: var(--space-md); }

  @media (max-width: 920px) {
    .c-hero .content { padding: 40px var(--space-xl) 48px; }
    .contact-grid { grid-template-columns: 1fr; }
    .f-row { grid-template-columns: 1fr; }
  }

  .s1 { width:28px;height:28px; }

  /* Contact form: Turnstile widget + submit status */
  .cf-turnstile { margin: var(--space-base) 0; }
  .form-status {
    margin: 0 0 var(--space-base);
    padding: var(--space-md) var(--space-base);
    border-radius: var(--radius-md);
    font-size: var(--text-body-sm);
  }
  .form-status.is-ok  { background: rgba(31, 122, 77, 0.12);  color: #1F7A4D; }
  .form-status.is-err { background: rgba(181, 58, 38, 0.12);  color: #B53A26; }