/* =========================================================
     PARAT — Landing Page
     Direction A · Editorial Stack
     Helvetica Neue · cream + ink · gold used once
     ========================================================= */

  :root{
    --ink:        #0E0E0E;
    --cream:      #F0EAE0;
    --cream-2:    #ebe4d6;
    --beat:       #E8C547;
    --white:      #FFFFFF;
    --muted:      #6B6B6B;
    --muted-ink:  #8a8275;
    --rule:       #1A1A1A;
    --rule-soft:  rgba(14,14,14,.12);
    --rule-on-ink:rgba(240,234,224,.18);

    --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --pad-x: clamp(24px, 6vw, 96px);
    --section-y: clamp(96px, 14vh, 160px);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  html,body{ margin:0; padding:0; }
  body{
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    overflow-x: hidden;
    position: relative;
  }
  /* Subtle grain overlay across the whole page */
  body::after{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    opacity: .35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
  }
  /* Slightly less grain on ink sections so it doesn’t crush the type */
  .ink-bg::before{
    content:"";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .18;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
  }
  .ink-bg > *{ position: relative; z-index: 2; }
  ::selection{ background: var(--ink); color: var(--cream); }

  a{ color: inherit; text-decoration: none; }
  button{ font-family: inherit; }

  /* ============ NAV ============ */
  .nav{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 18px var(--pad-x);
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(240,234,224,.78);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, background .25s ease;
  }
  .nav.scrolled{
    border-bottom-color: var(--rule-soft);
  }
  .nav-brand{
    --nb: 22px;
    display: inline-flex; align-items: center; gap: calc(var(--nb) * 0.36);
    height: var(--nb);
    line-height: 1;
  }
  .nav-brand .nb-c{
    width: var(--nb); height: var(--nb); border-radius: 50%; flex: none; display: block;
  }
  .nav-brand .nb-c.fill{ background: var(--ink); }
  .nav-brand .nb-c.open{ box-shadow: inset 0 0 0 2.6px var(--ink); background: transparent; }
  .nav-brand .nb-word{
    font-weight: 900;
    letter-spacing: -.04em;
    font-size: calc(var(--nb) * 1.38);
    line-height: 1;
    color: var(--ink);
    margin-left: calc(var(--nb) * 0.18);
    transform: translateY(-1.5%);
  }
  .nav-cta{
    appearance: none; border: 0;
    background: var(--ink); color: var(--cream);
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 11px 20px; border-radius: 999px; cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease;
  }
  .nav-cta:hover{ background: var(--cream); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

  /* ============ SHARED ============ */
  section{
    padding: var(--section-y) var(--pad-x);
    position: relative;
  }
  .section-inner{
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
  }
  .ink-bg{ background: var(--ink); color: var(--cream); }
  .ink-bg .muted{ color: rgba(240,234,224,.62); }
  .white-bg{ background: var(--white); }
  .cream-bg{ background: var(--cream); }

  .label{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .ink-bg .label{ color: rgba(240,234,224,.55); }

  .display{
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .92;
    margin: 0;
    text-wrap: balance;
  }
  .display-xl{ font-size: clamp(56px, 11vw, 168px); }
  .display-lg{ font-size: clamp(48px, 8.4vw, 128px); }
  .display-md{ font-size: clamp(40px, 6.4vw, 96px); }
  .display-sm{ font-size: clamp(32px, 4.6vw, 64px); }

  .sub-en{
    margin: 18px 0 0;
    font-weight: 300;
    font-style: italic;
    color: var(--muted);
    letter-spacing: -.01em;
    font-size: clamp(18px, 2.2vw, 28px);
    line-height: 1.25;
  }
  .ink-bg .sub-en{ color: rgba(240,234,224,.6); }

  .body{
    font-size: clamp(16px, 1.18vw, 19px);
    line-height: 1.6;
    color: var(--ink);
    max-width: 64ch;
  }
  .ink-bg .body{ color: rgba(240,234,224,.84); }

  /* ============ REVEAL ============ */
  .reveal{
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
  }
  .reveal.in{ opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  /* =========================================================
     SECTION 1 — HERO
     ========================================================= */
  .hero{
    min-height: 100vh;
    padding-top: clamp(120px, 18vh, 200px);
    padding-bottom: clamp(80px, 12vh, 140px);
    display: flex; align-items: center;
    position: relative;
    overflow: hidden;
  }
  /* Watermark letterforms behind the hero */
  .hero-watermark{
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
  }
  .hero-watermark .wm{
    position: absolute;
    font-weight: 900;
    letter-spacing: -.06em;
    line-height: .8;
    color: var(--ink);
    opacity: .03;
    user-select: none;
    white-space: nowrap;
  }
  .hero-watermark .wm.big{
    font-size: clamp(280px, 42vw, 720px);
    right: -4vw;
    bottom: -8vh;
  }
  .hero-watermark .wm.small{
    font-size: clamp(120px, 18vw, 320px);
    left: -2vw;
    top: 8vh;
    font-style: italic;
    font-weight: 300;
    opacity: .045;
  }
  /* big outlined-circle watermark on the right */
  .hero-watermark .wm-circle{
    position: absolute;
    width: clamp(420px, 50vw, 780px);
    aspect-ratio: 1;
    right: -14vw;
    top: 8vh;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--ink);
    opacity: .05;
  }
  .hero .section-inner{ position: relative; z-index: 1; }
  .hero-grid{
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    width: 100%;
  }
  .hero-logo{
    margin-bottom: clamp(24px, 4vw, 56px);
  }
  .hero h1{
    margin: 0;
  }
  .hero .descriptor{
    margin-top: clamp(28px, 4vh, 40px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .hero-cta{
    margin-top: clamp(36px, 6vh, 56px);
    display: inline-flex; align-items: center; gap: 14px;
  }
  .pill-cta{
    appearance: none; border: 0; cursor: pointer;
    background: var(--ink); color: var(--cream);
    padding: 22px 36px;
    border-radius: 999px;
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    transition: background .3s ease, color .3s ease, transform .3s ease;
    position: relative; overflow: hidden;
  }
  .pill-cta:hover{
    background: var(--cream);
    color: var(--ink);
    box-shadow: inset 0 0 0 1.6px var(--ink);
  }
  .pill-cta .en{
    display:block; font-size: 10px; font-weight: 400; font-style: italic;
    letter-spacing: 0; text-transform: none; opacity:.6; margin-top: 3px;
  }

  /* ---- LOGO ANIMATION (CSS/SVG) ---- */
  .takt-anim{
    --circle: clamp(72px, 8.5vw, 120px);
    --gap-c: calc(var(--circle) * 0.16);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-c);
    height: var(--circle);
    line-height: 1;
  }
  .takt-anim .c1,
  .takt-anim .c2{
    width: var(--circle);
    height: var(--circle);
    border-radius: 50%;
    flex: none;
    display: block;
  }
  .takt-anim .c1{
    background: var(--ink);
    animation: c1-cycle 5.2s ease-in-out infinite;
  }
  .takt-anim .c2{
    background: transparent;
    box-shadow: inset 0 0 0 calc(var(--circle) * 0.115) var(--ink);
    animation: c2-cycle 5.2s ease-in-out infinite;
  }
  .takt-anim .word{
    font-weight: 900;
    letter-spacing: -.04em;
    font-size: calc(var(--circle) * 1.38);
    line-height: 1;
    color: var(--ink);
    margin-left: calc(var(--gap-c) * 0.4);
    animation: word-cycle 5.2s ease-in-out infinite;
    white-space: nowrap;
    transform: translateY(-1.5%);
  }
  /* The PILL — a true pill (height stays = circle, width grows) */
  .takt-anim .pill{
    position: absolute;
    left: 0;
    top: 0;
    height: var(--circle);
    width: var(--circle);
    background: var(--ink);
    border-radius: 999px;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pill-cycle 5.2s cubic-bezier(.65,.05,.36,1) infinite;
  }
  .takt-anim .pill .check{
    width: calc(var(--circle) * 0.5);
    height: calc(var(--circle) * 0.5);
    display: block;
    opacity: 0;
    animation: check-cycle 5.2s ease-in-out infinite;
  }
  .takt-anim .pill .check path{
    fill: none;
    stroke: var(--cream);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: check-draw 5.2s ease-in-out infinite;
  }

  /* PHASES (total 5.2s):
     0–22%   rest  ( ● ○ PARAT )
     22–36%  c2 blinks 3× then fills
     38–50%  pill grows from circle width → full lockup width
     50–62%  pill at full width
     62–78%  pill shrinks back to circle
     74–88%  checkmark draws + holds
     88–96%  fade pill out, return ● ○ PARAT
     96–100% rest
  */
  @keyframes c1-cycle{
    0%, 38%   { opacity: 1; }
    40%, 92%  { opacity: 0; }
    96%, 100% { opacity: 1; }
  }
  @keyframes c2-cycle{
    0%, 21%   { background: transparent; transform: scale(1); opacity: 1; }
    23%       { background: transparent; transform: scale(1.07); }
    25%       { background: transparent; transform: scale(1); }
    28%       { background: transparent; transform: scale(1.07); }
    30%       { background: transparent; transform: scale(1); }
    33%       { background: transparent; transform: scale(1.07); }
    35%       { background: var(--ink);  transform: scale(1); opacity: 1; }
    40%       { background: var(--ink);  opacity: 0; }
    92%       { background: transparent; opacity: 0; }
    96%, 100% { background: transparent; opacity: 1; }
  }
  @keyframes word-cycle{
    0%, 40%   { opacity: 1; }
    46%, 92%  { opacity: 0; }
    96%, 100% { opacity: 1; }
  }
  @keyframes pill-cycle{
    0%, 36%   { opacity: 0; width: var(--circle); }
    38%       { opacity: 1; width: var(--circle); }
    50%, 62%  { opacity: 1; width: 100%; }
    78%, 90%  { opacity: 1; width: var(--circle); }
    94%, 100% { opacity: 0; width: var(--circle); }
  }
  @keyframes check-cycle{
    0%, 70%   { opacity: 0; }
    78%, 88%  { opacity: 1; }
    93%, 100% { opacity: 0; }
  }
  @keyframes check-draw{
    0%, 70%   { stroke-dashoffset: 120; }
    82%, 88%  { stroke-dashoffset: 0; }
    93%, 100% { stroke-dashoffset: 120; }
  }

  @media (prefers-reduced-motion: reduce){
    .takt-anim .c1, .takt-anim .c2, .takt-anim .word, .takt-anim .pill, .takt-anim .check, .takt-anim .check path{
      animation: none !important;
    }
    .takt-anim .pill{ opacity: 0; }
  }

  /* =========================================================
     SECTION 2 — PROBLEM (ink) with Beat-gold pull-quote tile
     ========================================================= */
  .problem-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  .problem-copy{
    padding-top: 4px;
  }
  .problem-en{
    margin: 22px 0 0;
    font-size: clamp(20px, 2.2vw, 30px);
    font-style: italic;
    font-weight: 300;
    color: rgba(240,234,224,.6);
    letter-spacing: -.01em;
    line-height: 1.2;
  }
  .problem-body{
    margin-top: clamp(36px, 5vh, 56px);
    display: grid; gap: 22px;
    max-width: 56ch;
    color: rgba(240,234,224,.78);
    font-size: clamp(16px, 1.18vw, 19px);
    line-height: 1.65;
  }

  /* The Beat-gold tile */
  .offline-tile{
    background: var(--beat);
    color: var(--ink);
    padding: clamp(36px, 4.5vw, 64px);
    border-radius: 4px;
    position: relative;
    align-self: stretch;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: clamp(360px, 48vh, 520px);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
  }
  .offline-tile .label-tile{
    font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
    color: var(--ink); opacity:.65;
  }
  .offline-tile h3{
    margin: 0;
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .92;
    font-size: clamp(40px, 5.6vw, 84px);
    color: var(--ink);
  }
  .offline-tile .tile-en{
    margin-top: 14px;
    font-size: clamp(16px, 1.4vw, 20px);
    font-style: italic;
    font-weight: 300;
    color: rgba(14,14,14,.62);
    letter-spacing: -.01em;
  }
  .offline-tile .tile-dots{
    display: inline-flex; gap: 10px; margin-top: clamp(24px, 4vw, 36px);
  }
  .offline-tile .tile-dots span{
    width: 14px; height: 14px; border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--ink);
  }
  .offline-tile .tile-dots span.f{ background: var(--ink); box-shadow: none; }

  @media (max-width: 900px){
    .problem-grid{ grid-template-columns: 1fr; }
    .offline-tile{ min-height: 360px; }
  }

  /* =========================================================
     SECTION 3 — DOT RHYTHM
     ========================================================= */
  .rhythm{
    padding: clamp(96px, 14vh, 160px) var(--pad-x);
    background: var(--cream);
    text-align: center;
  }
  .dot-row{
    display: flex; align-items: center; justify-content: center;
    gap: clamp(10px, 1.8vw, 24px);
    margin: 0 auto;
    max-width: 1100px;
    flex-wrap: nowrap;
  }
  .dot-row .d{
    width: clamp(20px, 3.4vw, 44px);
    height: clamp(20px, 3.4vw, 44px);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2.4px var(--ink);
    background: transparent;
    transition: background .5s ease, transform .5s ease;
  }
  .dot-row .d.f{
    background: var(--ink);
  }
  /* Stagger fill on entry */
  .dot-row.animate .d{
    animation: dot-pulse 2.2s ease-in-out infinite;
  }
  .dot-row.animate .d:nth-child(1){ animation-delay: 0s; }
  .dot-row.animate .d:nth-child(2){ animation-delay: .15s; }
  .dot-row.animate .d:nth-child(3){ animation-delay: .3s; }
  .dot-row.animate .d:nth-child(4){ animation-delay: .45s; }
  .dot-row.animate .d:nth-child(5){ animation-delay: .6s; }
  .dot-row.animate .d:nth-child(6){ animation-delay: .75s; }
  .dot-row.animate .d:nth-child(7){ animation-delay: .9s; }
  .dot-row.animate .d:nth-child(8){ animation-delay: 1.05s; }
  .dot-row.animate .d:nth-child(9){ animation-delay: 1.2s; }
  .dot-row.animate .d:nth-child(10){ animation-delay: 1.35s; }
  .dot-row.animate .d:nth-child(11){ animation-delay: 1.5s; }
  .dot-row.animate .d:nth-child(12){ animation-delay: 1.65s; }

  @keyframes dot-pulse{
    0%, 100%{
      background: transparent;
      box-shadow: inset 0 0 0 2.4px var(--ink);
      transform: scale(1);
    }
    35%{
      background: var(--ink);
      box-shadow: inset 0 0 0 2.4px var(--ink);
      transform: scale(1.06);
    }
    70%{
      background: var(--ink);
      transform: scale(1);
    }
  }

  .rhythm-caption{
    margin-top: clamp(40px, 6vh, 64px);
    font-size: 11px; font-weight: 700;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--muted);
  }
  .rhythm-caption .sep{ margin: 0 14px; opacity: .55; }

  @media (prefers-reduced-motion: reduce){
    .dot-row.animate .d{ animation: none; }
    .dot-row.animate .d:nth-child(-n+6){ background: var(--ink); }
  }

  /* =========================================================
     SECTION 4 — HOW IT WORKS (B-style: 3 rows, num / DE / body)
     ========================================================= */
  .how{
    background: var(--cream);
  }
  .how-head{
    margin-bottom: clamp(64px, 9vh, 96px);
    display: flex; align-items: end; justify-content: space-between;
    gap: 32px; flex-wrap: wrap;
  }
  .how-head h2{
    margin: 14px 0 0;
  }
  .how-head .head-right{
    max-width: 340px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
  }
  .how-row{
    display: grid;
    grid-template-columns: 64px minmax(220px, 1fr) minmax(0, 1.2fr) clamp(150px, 16vw, 220px);
    gap: clamp(20px, 3vw, 56px);
    padding: clamp(36px, 6vh, 64px) 0;
    border-top: 1px solid var(--rule-soft);
    align-items: center;
  }
  .how-row:last-of-type{ border-bottom: 1px solid var(--rule-soft); }

  /* Visual cell on the right of each row */
  .how-vis{
    width: 100%;
    aspect-ratio: 1.05 / 1;
    position: relative;
    display: flex; align-items: center; justify-content: center;
  }
  .how-vis svg{ width: 100%; height: 100%; display: block; }
  .how-vis .label-tiny{
    position: absolute;
    bottom: -2px; left: 0;
    font-size: 10px; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
  }
  .how-num{
    font-weight: 900;
    font-size: clamp(20px, 1.8vw, 26px);
    color: var(--muted);
    letter-spacing: -.02em;
    padding-top: 8px;
  }
  .how-title{
    margin: 0;
  }
  .how-title .de{
    display: block;
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .92;
    font-size: clamp(36px, 4.6vw, 64px);
  }
  .how-title .en{
    display: block;
    margin-top: 10px;
    font-weight: 300; font-style: italic;
    color: var(--muted);
    font-size: clamp(16px, 1.4vw, 20px);
    letter-spacing: -.01em;
  }
  .how-body{
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.65;
    color: var(--ink);
    padding-top: 6px;
    max-width: 56ch;
  }
  .how-close{
    margin-top: clamp(56px, 8vh, 96px);
    padding-top: clamp(28px, 4vh, 40px);
    border-top: 1px solid var(--rule-soft);
    display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  }
  .how-close .de{
    font-weight: 900;
    letter-spacing: -.045em;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1;
  }
  .how-close .en{
    font-style: italic; font-weight: 300;
    color: var(--muted);
    font-size: clamp(16px, 1.4vw, 20px);
    letter-spacing: -.01em;
  }
  @media (max-width: 900px){
    .how-row{ grid-template-columns: 56px 1fr; gap: 16px 20px; align-items: start; }
    .how-row .how-body{ grid-column: 1 / -1; }
    .how-row .how-vis{ grid-column: 1 / -1; max-width: 240px; }
    .how-num{ padding-top: 0; }
  }

  /* =========================================================
     SECTION 5 — BONICE (product proof)
     ========================================================= */
  .bonice{
    background: var(--white);
  }
  .bonice-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(48px, 7vw, 112px);
    align-items: center;
  }
  .bonice-copy h2{
    margin: 14px 0 0;
  }
  .bonice-copy .body{ margin-top: clamp(28px, 4vh, 36px); display:grid; gap: 20px; max-width: 58ch; }

  /* Phone */
  .phone-stage{
    display: flex; align-items: center; justify-content: center;
    perspective: 1200px;
  }
  .phone{
    --phone-w: clamp(280px, 28vw, 360px);
    width: var(--phone-w);
    aspect-ratio: 9 / 19;
    background: #111;
    border-radius: 44px;
    padding: 14px;
    box-shadow:
      0 1px 0 1px #1a1a1a inset,
      0 0 0 1.5px #2a2a2a inset,
      0 40px 80px -20px rgba(0,0,0,.35),
      0 20px 40px -25px rgba(0,0,0,.25);
    position: relative;
  }
  .phone::before{
    content: "";
    position: absolute;
    top: 22px; left: 50%; transform: translateX(-50%);
    width: 96px; height: 28px;
    background: #050505;
    border-radius: 999px;
    z-index: 5;
  }
  .phone-screen{
    background: linear-gradient(180deg, #111 0%, #161616 60%, #1a1a1a 100%);
    border-radius: 32px;
    height: 100%;
    padding: 64px 14px 18px;
    display: flex; flex-direction: column;
    overflow: hidden;
    position: relative;
  }
  .phone-status{
    position: absolute;
    top: 18px; left: 24px; right: 24px;
    display: flex; justify-content: space-between;
    font-size: 11px; font-weight: 600;
    color: var(--cream);
    letter-spacing: -.01em;
  }
  .phone-status .icons{
    display: inline-flex; align-items: center; gap: 5px;
  }
  .phone-status .icons span{
    display: inline-block; width: 14px; height: 9px;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px var(--cream);
    position: relative;
  }
  .phone-status .icons span.bat::after{
    content:""; position:absolute; right:-3px; top:2px;
    width:1.5px; height:5px; background: var(--cream); border-radius: 1px;
  }
  .phone-status .icons span.bat::before{
    content:""; position:absolute; left:1.5px; top:1.5px;
    width: 8px; height: 6px; background: var(--cream); border-radius: 1px;
  }

  /* Pass card */
  .pass{
    background: var(--cream);
    color: var(--ink);
    border-radius: 18px;
    padding: 18px 18px 16px;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.25);
    display: flex; flex-direction: column; gap: 14px;
    margin-top: auto;
    margin-bottom: 8px;
  }
  .pass-head{
    display: flex; align-items: center; justify-content: space-between;
  }
  .pass-brand{
    display: inline-flex; align-items: center; gap: 5px;
    font-weight: 900; font-size: 12px; letter-spacing: -.04em;
  }
  .pass-brand .d{ width: 7px; height: 7px; border-radius: 50%; }
  .pass-brand .d.fill{ background: var(--ink); }
  .pass-brand .d.open{ box-shadow: inset 0 0 0 1.2px var(--ink); }
  .pass-brand .w{ margin-left: 2px; }
  .pass-type{
    font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
  }
  .pass-merchant{
    font-weight: 900; font-size: 19px; letter-spacing: -.035em;
    line-height: 1.05;
  }
  .pass-customer{
    font-size: 11px; font-weight: 500; color: var(--muted); margin-top: -6px;
    letter-spacing: -.01em;
  }
  .pass-stamps{
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    padding: 10px 0 2px;
    border-top: 1px dashed rgba(14,14,14,.18);
  }
  .pass-stamps span{
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.4px var(--ink);
    background: transparent;
  }
  .pass-stamps span.f{ background: var(--ink); box-shadow: none; }
  .pass-stamps-label{
    display: flex; justify-content: space-between;
    font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted);
    margin-top: -4px;
  }

  .live-block{
    background: var(--ink);
    color: var(--cream);
    border-radius: 10px;
    padding: 10px 12px 11px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .live-tag{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: var(--beat);
  }
  .live-tag .pulse{
    width: 6px; height: 6px; border-radius: 50%; background: var(--beat);
    box-shadow: 0 0 0 0 rgba(232,197,71,.7);
    animation: pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse{
    0%, 100%{ box-shadow: 0 0 0 0 rgba(232,197,71,.65); }
    50%{ box-shadow: 0 0 0 5px rgba(232,197,71,0); }
  }
  .live-msg{
    font-size: 12.5px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3;
  }

  @media (max-width: 900px){
    .bonice-grid{ grid-template-columns: 1fr; }
    .phone-stage{ order: 2; }
  }

  /* =========================================================
     SECTION 6 — WHY NOW
     ========================================================= */
  .why-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(48px, 7vw, 112px);
    align-items: start;
  }
  .why-copy h2{ margin: 14px 0 0; }
  .why-copy .body{ margin-top: clamp(28px, 4vh, 36px); display:grid; gap: 20px; max-width: 58ch; }

  .why-pullquote{
    border-top: 1px solid var(--rule-soft);
    padding-top: clamp(28px, 4vh, 40px);
    margin-top: 8px;
  }
  .why-pullquote .quote{
    font-weight: 900;
    font-size: clamp(28px, 3.6vw, 46px);
    letter-spacing: -.04em;
    line-height: 1.05;
    margin: 0;
    text-wrap: balance;
  }
  .why-pullquote .quote .accent{
    background-image: linear-gradient(transparent 60%, var(--beat) 60%);
    background-repeat: no-repeat;
    padding: 0 .06em;
  }
  .why-pullquote .cite{
    margin-top: 18px;
    font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
  }

  @media (max-width: 900px){
    .why-grid{ grid-template-columns: 1fr; }
  }

  /* =========================================================
     SECTION 7 — WHO IT'S FOR (ink)
     ========================================================= */
  .who h2{ margin: 14px 0 0; }
  .who-sub{
    margin: 18px 0 0;
    font-size: clamp(20px, 2.2vw, 30px);
    font-style: italic;
    font-weight: 300;
    color: rgba(240,234,224,.6);
    letter-spacing: -.01em;
  }
  .who-grid{
    margin-top: clamp(64px, 9vh, 96px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
  }
  .who-col h3{
    margin: 0 0 22px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .28em; text-transform: uppercase;
  }
  .who-col.yes h3{ color: var(--beat); }
  .who-col.no h3{ color: rgba(240,234,224,.55); }
  .who-col ul{
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 18px;
  }
  .who-col li{
    font-size: clamp(17px, 1.5vw, 22px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.02em;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule-on-ink);
    display: flex; align-items: baseline; gap: 14px;
  }
  .who-col li:last-child{ border-bottom: none; }
  .who-col li::before{
    content: "";
    flex: none;
    width: 9px; height: 9px;
    border-radius: 50%;
    transform: translateY(-2px);
  }
  .who-col.yes li::before{ background: var(--cream); }
  .who-col.no li::before{ box-shadow: inset 0 0 0 1.5px rgba(240,234,224,.5); }

  .who-footnote{
    margin-top: clamp(64px, 9vh, 96px);
    padding-top: 28px;
    border-top: 1px solid var(--rule-on-ink);
    font-size: 13px;
    color: rgba(240,234,224,.62);
    letter-spacing: -.005em;
  }
  .who-footnote span{ margin-right: 22px; display:inline-block; }
  .who-footnote span::after{ content: "·"; margin-left: 22px; color: rgba(240,234,224,.3); }
  .who-footnote span:last-child::after{ content: ""; }

  @media (max-width: 720px){
    .who-grid{ grid-template-columns: 1fr; }
  }

  /* =========================================================
     SECTION 8 — CONTACT
     ========================================================= */
  .contact{
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: space-between;
    padding-bottom: 0;
  }
  .contact-inner{
    padding-top: clamp(40px, 6vh, 80px);
  }
  .contact-logo{
    --logo-h: clamp(56px, 6.5vw, 84px);
    margin-bottom: clamp(48px, 8vh, 96px);
  }
  .contact h2{ margin: 0; }
  .contact .body{
    margin-top: clamp(28px, 4vh, 40px);
    max-width: 56ch;
    color: var(--ink);
  }
  .email-link{
    display: inline-block;
    margin-top: clamp(48px, 7vh, 80px);
    font-weight: 900;
    letter-spacing: -.05em;
    font-size: clamp(40px, 7.5vw, 112px);
    line-height: .95;
    color: var(--ink);
    position: relative;
    text-decoration: none;
    padding-bottom: 6px;
  }
  .email-link::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--ink);
    transform-origin: left center;
    transition: transform .35s ease;
  }
  .email-link:hover::after{
    transform: scaleX(.5);
  }
  .contact-footnote{
    margin-top: clamp(40px, 6vh, 56px);
    font-size: 12px;
    color: var(--muted);
    letter-spacing: -.005em;
  }

  /* Footer */
  .footer{
    margin-top: clamp(80px, 12vh, 140px);
    padding: 28px var(--pad-x);
    border-top: 1px solid var(--rule-soft);
    display: flex; justify-content: space-between; align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
  }
  .footer .left{
    font-weight: 900; letter-spacing: -.04em; font-size: 16px; color: var(--ink);
  }
  .footer .right{
    display: inline-flex; gap: 22px;
  }
  .footer .right a:hover{ color: var(--ink); }

  /* =========================================================
     RESPONSIVE TWEAKS
     ========================================================= */
  @media (max-width: 720px){
    :root{ --section-y: clamp(72px, 12vh, 120px); }
    .nav-cta{ padding: 9px 14px; font-size: 11px; }
  }

  /* =========================================================
     YOU PRESS PLAY — human-in-the-loop console
     ========================================================= */
  .play-head h2{ margin: 14px 0 0; }
  .play-head .sub-en{ margin-top: 14px; }
  .play-head .body{ margin-top: clamp(24px, 3.5vh, 32px); }

  .console{
    margin-top: clamp(44px, 7vh, 80px);
    width: 100%;
    max-width: 560px;
    background: linear-gradient(180deg, #1f1f1f 0%, #141414 100%);
    border-radius: 20px;
    padding: clamp(20px, 3vw, 30px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.07) inset,
      0 0 0 1px rgba(255,255,255,.05) inset,
      0 44px 80px -34px rgba(0,0,0,.7);
  }
  .console-display{
    background: #0b0b0b;
    border-radius: 11px;
    padding: clamp(16px, 2.4vw, 22px);
    box-shadow:
      inset 0 2px 10px rgba(0,0,0,.7),
      inset 0 0 0 1px rgba(255,255,255,.035);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .console-readout{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .console-status{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(240,234,224,.5);
    transition: color .25s ease;
  }
  .console-status.is-playing{ color: var(--beat); }
  .console-speed{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(240,234,224,.32);
    font-variant-numeric: tabular-nums;
  }
  .console-beats{
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.3vw, 11px);
  }
  .console-beats .cb{
    flex: 1 1 0;
    max-width: 24px;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.6px rgba(240,234,224,.3);
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .console-beats .cb.on{
    background: var(--cream);
    box-shadow: none;
    transform: scale(1.08);
  }
  .console-beats .cb.cursor{
    box-shadow: inset 0 0 0 1.8px var(--beat), 0 0 10px rgba(232,197,71,.45);
  }
  .console-transport{
    margin-top: clamp(18px, 2.6vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 3.4vw, 30px);
  }
  .tbtn{
    appearance: none;
    border: 0;
    cursor: pointer;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2d2d2d 0%, #1c1c1c 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.09) inset,
      0 -2px 3px rgba(0,0,0,.5) inset,
      0 7px 16px -5px rgba(0,0,0,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream);
    transition: transform .1s ease, box-shadow .12s ease, background .2s ease;
  }
  .tbtn svg{ width: 19px; height: 19px; display: block; fill: currentColor; }
  .tbtn:hover{ background: linear-gradient(180deg, #353535 0%, #232323 100%); }
  .tbtn:active{
    transform: translateY(1.5px);
    box-shadow:
      0 3px 8px rgba(0,0,0,.6) inset,
      0 1px 2px rgba(0,0,0,.5);
  }
  .tbtn-main{
    width: 78px;
    height: 78px;
    background: linear-gradient(180deg, #f4eee3 0%, #ddd3c0 100%);
    color: var(--ink);
    box-shadow:
      0 2px 0 rgba(255,255,255,.65) inset,
      0 -3px 6px rgba(0,0,0,.18) inset,
      0 12px 26px -7px rgba(0,0,0,.7);
  }
  .tbtn-main svg{ width: 28px; height: 28px; }
  .tbtn-main:hover{ background: linear-gradient(180deg, #fffaf0 0%, #e7ddc8 100%); }
  .tbtn-main:active{
    transform: translateY(1.5px);
    box-shadow:
      0 4px 10px rgba(0,0,0,.35) inset,
      0 2px 4px rgba(0,0,0,.4);
  }
  .tbtn .ic-pause{ display: none; }
  .console.is-playing .tbtn-main .ic-play{ display: none; }
  .console.is-playing .tbtn-main .ic-pause{ display: block; }
  .tbtn:focus-visible{
    outline: 2px solid var(--beat);
    outline-offset: 4px;
  }
  .console-hint{
    margin-top: 16px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(240,234,224,.32);
  }
  @media (prefers-reduced-motion: reduce){
    .console-beats .cb{ transition: none; }
  }

  /* =========================================================
     PHOTOGRAPHY — editorial plates + contact sheet
     ========================================================= */
  .plate{
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .plate-img{
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--cream-2);
    box-shadow: inset 0 0 0 1px var(--rule-soft);
  }
  .plate-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .plate-cap{
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .plate-fig{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .plate-fig .idx{ color: var(--ink); }
  .plate-label{
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--ink);
  }
  .plate-label .en{
    display: block;
    margin-top: 3px;
    font-weight: 300;
    font-style: italic;
    font-size: 12.5px;
    letter-spacing: -.005em;
    color: var(--muted);
  }

  /* Contact-sheet section */
  .field{ background: var(--white); }
  .field-head{
    margin-bottom: clamp(48px, 7vh, 84px);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }
  .field-head h2{ margin: 14px 0 0; }
  .field-head .head-right{
    max-width: 340px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
  }
  .field-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(24px, 2.6vw, 38px) clamp(16px, 1.8vw, 26px);
  }
  @media (max-width: 900px){
    .field-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 460px){
    .field-grid{ grid-template-columns: 1fr; }
  }

  /* Bonice product-proof plate (wide format) */
  .bonice-photo{
    margin: clamp(56px, 9vh, 110px) 0 0;
  }
  .bonice-photo .plate-img{
    aspect-ratio: 16 / 9;
  }

  /* =========================================================
     LANGUAGE TOGGLE (DE / EN)
     ========================================================= */
  html.lang-de [data-lang="en"]{ display: none; }
  html.lang-en [data-lang="de"]{ display: none; }
  /* No-JS / pre-class fallback: prefer DE */
  html:not(.lang-en) [data-lang="en"]{ display: none; }

  .nav-right{
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 1.4vw, 14px);
  }
  .lang-toggle{
    display: inline-flex;
    align-items: stretch;
    background: rgba(14,14,14,.06);
    border-radius: 999px;
    padding: 3px;
    font-family: inherit;
  }
  .lang-toggle button{
    appearance: none;
    border: 0;
    cursor: pointer;
    background: transparent;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    padding: 6px 11px;
    border-radius: 999px;
    transition: background .2s ease, color .2s ease;
    line-height: 1;
  }
  html.lang-de .lang-toggle [data-set-lang="de"],
  html.lang-en .lang-toggle [data-set-lang="en"]{
    background: var(--ink);
    color: var(--cream);
  }
  .lang-toggle button:focus-visible{
    outline: 2px solid var(--beat);
    outline-offset: 2px;
  }

  /* =========================================================
     MOBILE — tighten across the board
     ========================================================= */
  @media (max-width: 720px){
    :root{
      --pad-x: clamp(20px, 5vw, 32px);
    }
    /* Hero logo: scale down on small screens so the lockup fits */
    .hero-logo{
      --circle: clamp(54px, 14vw, 110px) !important;
    }
    .hero{
      padding-top: clamp(100px, 16vh, 160px);
      padding-bottom: clamp(64px, 10vh, 120px);
    }
    .nav{ padding: 14px var(--pad-x); }
    .nav-brand{ --nb: 18px; }
    .nav-cta{ padding: 8px 12px; font-size: 10.5px; letter-spacing: .06em; }
    .lang-toggle button{ padding: 5px 8px; font-size: 10px; }
    .pill-cta{ padding: 18px 26px; font-size: 12px; }
    .display-xl{ font-size: clamp(44px, 12vw, 96px); }
    .display-lg{ font-size: clamp(40px, 10vw, 80px); }
    .display-md{ font-size: clamp(34px, 8vw, 64px); }
    .display-sm{ font-size: clamp(28px, 6.4vw, 48px); }

    .problem-body{ font-size: 15.5px; }
    .body{ font-size: 15.5px; }

    /* Dot rhythm — shrink dots + gaps so 12 fit on small screens */
    .dot-row{
      gap: clamp(5px, 1.6vw, 14px);
    }
    .dot-row .d{
      width: clamp(13px, 3vw, 28px);
      height: clamp(13px, 3vw, 28px);
      box-shadow: inset 0 0 0 1.8px var(--ink);
    }
    .rhythm-caption{
      font-size: 10px;
      letter-spacing: .2em;
    }
    .rhythm-caption .sep{ margin: 0 8px; }

    /* How-it-works rows: single column, vis becomes a top hint */
    .how-row{
      grid-template-columns: 44px 1fr;
      gap: 8px 18px;
      padding: 32px 0;
      align-items: start;
    }
    .how-num{ padding-top: 4px; font-size: 18px; }
    .how-title .de{ font-size: clamp(34px, 9vw, 56px); }
    .how-title .en{ font-size: 16px; margin-top: 6px; }
    .how-body{ font-size: 15.5px; }
    .how-row .how-vis{ max-width: 200px; margin-top: 12px; }
    .how-close{
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
    .how-close .de{ font-size: clamp(26px, 7vw, 40px); }

    /* Play console: shrink controls, keep beats readable */
    .console{
      padding: 18px;
      border-radius: 16px;
    }
    .console-display{ padding: 14px 14px 16px; }
    .console-readout{ gap: 8px; }
    .console-status, .console-speed{ font-size: 9.5px; letter-spacing: .22em; }
    .console-beats{ gap: 5px; }
    .console-beats .cb{ max-width: 18px; }
    .tbtn{ width: 50px; height: 50px; }
    .tbtn-main{ width: 64px; height: 64px; }
    .tbtn svg{ width: 16px; height: 16px; }
    .tbtn-main svg{ width: 22px; height: 22px; }
    .console-transport{ gap: 16px; }
    .console-hint{ font-size: 9.5px; letter-spacing: .18em; }

    /* Bonice phone: rein in the pass typography for small screens */
    .phone{ --phone-w: min(280px, 78vw); }
    .pass-merchant{ font-size: 17px; }
    .pass-stamps{ gap: 5px; }
    .bonice-photo .plate-img{ aspect-ratio: 4 / 3; }

    /* Field plates: tighter caption block */
    .field-head{ gap: 22px; }
    .field-head .head-right{ font-size: 14px; }
    .plate-cap{ margin-top: 10px; padding-top: 9px; gap: 4px; }
    .plate-fig{ font-size: 9.5px; letter-spacing: .14em; }
    .plate-label{ font-size: 13px; }
    .plate-label .en{ font-size: 11.5px; }

    /* Who-it's-for items */
    .who-col h3{ letter-spacing: .2em; }
    .who-col li{
      font-size: 16px;
      gap: 10px;
      padding-bottom: 14px;
    }
    .who-col ul{ gap: 14px; }
    .who-footnote{ font-size: 12px; line-height: 1.55; }
    .who-footnote span{ margin-right: 10px; }
    .who-footnote span::after{ margin-left: 10px; }

    /* Contact: keep the email link readable */
    .email-link{
      font-size: clamp(28px, 8.5vw, 72px);
      letter-spacing: -.04em;
      word-break: break-word;
    }
    .contact-footnote{ font-size: 11.5px; line-height: 1.55; }
    .footer{ padding: 22px var(--pad-x); font-size: 11px; gap: 10px; }
    .footer .left{ font-size: 14px; }
    .footer .right{ gap: 14px; }

    /* Problem tile */
    .offline-tile{ min-height: 320px; padding: 28px; }
    .offline-tile h3{ font-size: clamp(34px, 9vw, 64px); }
  }

  @media (max-width: 380px){
    .nav-cta{ padding: 7px 10px; font-size: 10px; letter-spacing: .04em; }
    .lang-toggle{ padding: 2px; }
    .lang-toggle button{ padding: 5px 7px; }
    .nav-right{ gap: 6px; }
    .dot-row{ gap: 4px; }
    .dot-row .d{ width: 12px; height: 12px; }
  }
  /* =========================================================
     PROBLEM — gold-lens treatment
     ========================================================= */
  .problem-photo{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .problem-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(.46) saturate(.55) contrast(1.05);
    opacity: .55;
  }
  .problem-photo::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14,14,14,.58) 0%, rgba(14,14,14,.78) 100%);
  }
  .problem-with-photo .section-inner{
    position: relative;
    z-index: 2;
  }
  .offline-tile.lens-tile{
    overflow: hidden;
  }
  .offline-tile-lens{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .offline-tile-lens img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: multiply;
    filter: brightness(1.55) contrast(1.1) saturate(1);
    opacity: .92;
  }
  .offline-tile.lens-tile > *:not(.offline-tile-lens){
    position: relative;
    z-index: 1;
  }

  /* =========================================================
     UPPER-SECTION PHOTO PLATES (How / Play / Why)
     ========================================================= */
  .how-plate{
    margin: clamp(24px, 4vh, 48px) 0 clamp(16px, 2.5vh, 24px);
  }
  .how-plate .plate-img{
    aspect-ratio: 16 / 9;
  }

  .why-plate{
    margin-top: clamp(40px, 6vh, 80px);
  }
  .why-plate .plate-img{
    aspect-ratio: 21 / 9;
  }

  .play-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
  }
  .play-grid > .play-head{ grid-column: 1; }
  .play-grid > .console{ grid-column: 1; }
  .play-plate{
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: clamp(20px, 3vh, 36px);
  }
  .play-plate .plate-img{
    aspect-ratio: 3 / 4;
  }
  /* Plate captions on ink need cream text */
  .play-plate .plate-cap{ border-top-color: rgba(240,234,224,.22); }
  .play-plate .plate-fig{ color: rgba(240,234,224,.55); }
  .play-plate .plate-fig .idx{ color: var(--cream); }
  .play-plate .plate-label{ color: var(--cream); }
  .play-plate .plate-label .en{ color: rgba(240,234,224,.62); }

  @media (max-width: 900px){
    .play-grid{ grid-template-columns: 1fr; }
    .play-plate{
      grid-column: 1;
      grid-row: auto;
      margin-top: 0;
    }
    .play-plate .plate-img{ aspect-ratio: 4 / 3; }
    .why-plate .plate-img{ aspect-ratio: 16 / 9; }
  }


  /* =========================================================
     USE CASES — section + 3-card grid
     ========================================================= */
  .usecases{
    background: var(--cream);
  }
  .usecases-head{
    margin-bottom: clamp(48px, 7vh, 84px);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }
  .usecases-head h2{ margin: 14px 0 0; }
  .usecases-head .head-right{
    max-width: 360px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
  }
  .usecases-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 2.4vw, 32px);
  }
  .usecase-card{
    display: flex;
    flex-direction: column;
    background: var(--white);
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--rule-soft);
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .usecase-card:hover{
    border-color: var(--ink);
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -18px rgba(0,0,0,.18);
  }
  .usecase-vis{
    background: var(--cream-2);
    padding: clamp(24px, 3vw, 36px);
    border-bottom: 1px solid var(--rule-soft);
  }
  .usecase-vis svg{
    width: 100%;
    height: auto;
    display: block;
    max-height: 160px;
  }
  .usecase-cap{
    padding: clamp(24px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
  }
  .usecase-fig{
    display: flex;
    gap: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
  }
  .usecase-fig .idx{ color: var(--ink); }
  .usecase-title{
    margin: 6px 0 0;
    font-weight: 900;
    letter-spacing: -.045em;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.05;
    text-wrap: balance;
  }
  .usecase-desc{
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink);
  }
  .usecase-cta{
    margin-top: auto;
    padding-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .usecase-card:hover .usecase-cta{
    color: var(--ink);
  }
  @media (max-width: 1180px){
    .usecases-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px){
    .usecases-grid{ grid-template-columns: 1fr; }
    .usecase-vis svg{ max-height: 120px; }
  }

  /* =========================================================
     SUBPAGE — generic use-case detail
     ========================================================= */
  .uc-hero{
    padding-top: clamp(140px, 18vh, 200px);
    padding-bottom: clamp(64px, 10vh, 120px);
  }
  .uc-hero .label{ margin-bottom: 14px; }
  .uc-hero h1{ margin: 0; max-width: 18ch; }
  .uc-hero .uc-tagline{
    margin-top: clamp(28px, 4vh, 40px);
    font-style: italic;
    font-weight: 300;
    color: var(--muted);
    letter-spacing: -.01em;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.3;
    max-width: 36ch;
  }
  .uc-section{
    padding: clamp(72px, 11vh, 130px) var(--pad-x);
  }
  .uc-section h2{
    margin: 0 0 clamp(24px, 4vh, 40px);
    font-weight: 900;
    letter-spacing: -.045em;
    font-size: clamp(32px, 4.2vw, 56px);
    line-height: .95;
    text-wrap: balance;
  }
  .uc-section .body{
    display: grid;
    gap: 22px;
    max-width: 64ch;
    font-size: clamp(16px, 1.18vw, 18px);
    line-height: 1.65;
  }
  .uc-grid-2{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  .uc-grid-2 .uc-aside h3{
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .uc-grid-2 .uc-aside ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
  }
  .uc-grid-2 .uc-aside li{
    font-size: 16px;
    line-height: 1.4;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule-soft);
    display: flex;
    gap: 12px;
    align-items: baseline;
  }
  .uc-grid-2 .uc-aside li::before{
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink);
    transform: translateY(-1px);
  }
  .uc-grid-2 .uc-aside li:last-child{ border-bottom: 0; }
  .ink-bg.uc-section .uc-aside li{ border-bottom-color: var(--rule-on-ink); }
  .ink-bg.uc-section .uc-aside li::before{ background: var(--cream); }

  .uc-stepgrid{
    display: grid;
    gap: clamp(0px, 0vw, 0px);
  }
  .uc-step{
    display: grid;
    grid-template-columns: 64px minmax(220px, 1fr) minmax(0, 1.4fr);
    gap: clamp(20px, 3vw, 56px);
    padding: clamp(28px, 5vh, 48px) 0;
    border-top: 1px solid var(--rule-soft);
    align-items: baseline;
  }
  .uc-step:last-child{ border-bottom: 1px solid var(--rule-soft); }
  .ink-bg.uc-section .uc-step{ border-top-color: var(--rule-on-ink); }
  .ink-bg.uc-section .uc-step:last-child{ border-bottom-color: var(--rule-on-ink); }
  .uc-step .num{
    font-weight: 900;
    font-size: clamp(20px, 1.8vw, 26px);
    color: var(--muted);
    letter-spacing: -.02em;
  }
  .uc-step h3{
    margin: 0;
    font-weight: 900;
    letter-spacing: -.045em;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.05;
  }
  .uc-step h3 .en{
    display: block;
    margin-top: 6px;
    font-weight: 300;
    font-style: italic;
    color: var(--muted);
    font-size: clamp(14px, 1.2vw, 17px);
    letter-spacing: -.01em;
  }
  .uc-step p{
    margin: 0;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.6;
    max-width: 58ch;
  }
  @media (max-width: 900px){
    .uc-grid-2{ grid-template-columns: 1fr; }
    .uc-step{ grid-template-columns: 48px 1fr; }
    .uc-step p{ grid-column: 1 / -1; }
  }

  .uc-footer-cta{
    padding: clamp(80px, 12vh, 140px) var(--pad-x);
    text-align: left;
  }
  .uc-footer-cta h2{
    font-weight: 900;
    letter-spacing: -.045em;
    font-size: clamp(34px, 5vw, 72px);
    line-height: .95;
    margin: 0 0 clamp(20px, 3vh, 32px);
    text-wrap: balance;
  }
  .uc-footer-cta a.email{
    display: inline-block;
    font-weight: 900;
    letter-spacing: -.04em;
    font-size: clamp(28px, 5vw, 56px);
    color: var(--ink);
    text-decoration: none;
    margin-top: 14px;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 4px;
  }
  .uc-back{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    margin-top: clamp(40px, 6vh, 64px);
  }
  .uc-back::before{ content: "←"; }

  /* =========================================================
     NAV MENU + HAMBURGER
     ========================================================= */
  .nav-menu{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.8vw, 28px);
  }
  .nav-menu > li{
    position: relative;
  }
  .nav-menu > li > a,
  .nav-menu > li > .submenu-toggle{
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity .2s ease;
    line-height: 1;
  }
  .nav-menu > li > a:hover,
  .nav-menu > li > .submenu-toggle:hover{ opacity: .6; }

  .submenu-toggle .chev{
    width: 9px;
    height: 6px;
    display: block;
    transition: transform .25s ease;
  }
  .has-submenu.open .submenu-toggle .chev,
  .has-submenu:hover .submenu-toggle .chev{
    transform: rotate(180deg);
  }

  /* Desktop dropdown */
  .submenu{
    list-style: none;
    margin: 0;
    padding: 8px 0;
    position: absolute;
    top: calc(100% + 8px);
    left: -16px;
    min-width: 280px;
    background: var(--cream);
    border: 1px solid var(--rule-soft);
    border-radius: 6px;
    box-shadow: 0 22px 44px -18px rgba(0,0,0,.22), 0 6px 14px -6px rgba(0,0,0,.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    z-index: 10;
  }
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu,
  .has-submenu.open .submenu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .submenu li a{
    display: block;
    padding: 12px 20px;
    font-size: 13.5px;
    letter-spacing: -.01em;
    text-transform: none;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.25;
    transition: background .15s ease, color .15s ease;
  }
  .submenu li a:hover{
    background: var(--cream-2);
  }
  .submenu li a .sub{
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 300;
    font-style: italic;
    color: var(--muted);
    letter-spacing: -.005em;
  }

  /* Hamburger button — hidden on desktop */
  .nav-hamburger{
    appearance: none;
    border: 0;
    background: transparent;
    width: 38px;
    height: 38px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
    z-index: 101;
    position: relative;
  }
  .nav-hamburger span{
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .3s ease, opacity .25s ease;
    transform-origin: center;
  }
  body.menu-open .nav-hamburger span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
  }
  body.menu-open .nav-hamburger span:nth-child(2){
    opacity: 0;
  }
  body.menu-open .nav-hamburger span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Mobile overlay menu */
  @media (max-width: 1024px){
    .nav-menu{
      position: fixed;
      inset: 0;
      background: var(--cream);
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      gap: 0;
      padding: 96px var(--pad-x) clamp(48px, 8vh, 96px);
      overflow-y: auto;
      z-index: 99;
      transform: translateX(100%);
      transition: transform .4s cubic-bezier(.5, 0, .15, 1);
      visibility: hidden;
    }
    body.menu-open .nav-menu{
      transform: translateX(0);
      visibility: visible;
    }
    .nav-menu > li{
      width: 100%;
      border-bottom: 1px solid var(--rule-soft);
    }
    .nav-menu > li:first-child{
      border-top: 1px solid var(--rule-soft);
    }
    .nav-menu > li > a,
    .nav-menu > li > .submenu-toggle{
      padding: 22px 0;
      font-size: 20px;
      letter-spacing: -.015em;
      text-transform: none;
      width: 100%;
      justify-content: space-between;
    }
    .has-submenu .submenu-toggle .chev{
      width: 12px;
      height: 8px;
    }
    .submenu{
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      background: transparent;
      border: 0;
      box-shadow: none;
      padding: 0 0 18px;
      margin: 0;
      min-width: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease, padding .25s ease;
    }
    .has-submenu.open .submenu{
      max-height: 600px;
      padding: 0 0 18px;
    }
    .submenu li a{
      padding: 12px 0 12px 18px;
      font-size: 16px;
      color: var(--ink);
      border-left: 2px solid var(--rule-soft);
      font-weight: 700;
    }
    .submenu li a .sub{
      font-size: 12.5px;
      margin-top: 2px;
    }
    .submenu li a:hover{ background: transparent; }
    .nav-hamburger{ display: inline-flex; }
    .nav-cta{ display: none; }
    .nav-right{ gap: 10px; }
    body.menu-open{ overflow: hidden; }
  }

  /* Smaller mobile — keep brand + lang + burger tight */
  @media (max-width: 480px){
    .nav-right{ gap: 6px; }
    .lang-toggle button{ padding: 5px 7px; font-size: 9.5px; }
    .nav-hamburger{ width: 32px; height: 32px; }
    .nav-hamburger span{ width: 20px; }
  }

  /* =========================================================
     SUBPAGE PHOTO BAND — wide editorial plate between sections
     ========================================================= */
  .uc-photoband{
    padding: clamp(40px, 6vh, 84px) var(--pad-x);
  }
  .uc-photoband .plate{ margin: 0; }
  .uc-photoband .plate-img{
    aspect-ratio: 16 / 9;
  }
  .uc-photoband.tall .plate-img{
    aspect-ratio: 4 / 5;
    max-width: 720px;
  }
  /* Ink-bg plate captions: light text */
  .ink-bg .plate-cap{ border-top-color: rgba(240,234,224, 0.22); }
  .ink-bg .plate-fig{ color: rgba(240,234,224, 0.55); }
  .ink-bg .plate-fig .idx{ color: var(--cream); }
  .ink-bg .plate-label{ color: var(--cream); }
  .ink-bg .plate-label .en{ color: rgba(240,234,224, 0.62); }

  @media (max-width: 720px){
    .uc-photoband{ padding-top: clamp(24px, 4vh, 48px); padding-bottom: clamp(24px, 4vh, 48px); }
    .uc-photoband .plate-img{ aspect-ratio: 4 / 3; }
  }