@font-face{
    font-family:'Lexend';
    src:url('/home3d/lexend.woff2') format('woff2');
    font-weight:100 900; font-style:normal; font-display:swap;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }

  /* ── design unit: 1u === 1px on the 1600 × 880 reference frame ───────── */
  :root{
    /* width- or height-limited: whichever runs out first, so the whole frame
       (and the hero, min-height 880u) always fits the first view */
    --u: min(calc(100vw / 1600), calc(100svh / 880));

    --ink:            #ffffff;
    --ink-soft:       rgba(255,255,255,.62);
    --ink-faint:      rgba(255,255,255,.44);
    --rule:           rgba(255,255,255,.055);

    --card:           #f2f3ef;
    --card-ink:       #23261f;
    --card-label:     #7c8177;

    --ease: cubic-bezier(.22,.61,.36,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
  }
  @media (min-width:1900px){ :root{ --u: min(calc(1900px / 1600), calc(100svh / 880)); } }

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

  html{ background:#04202f; }
  body{
    font-family:'Lexend',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-weight:300;
    color:var(--ink);
    background:#04202f;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  /* ── hero shell ──────────────────────────────────────────────────────── */
  .hero{
    position:relative;
    width:100%;
    height:100svh;
    min-height:calc(880 * var(--u));
    overflow:hidden;
    isolation:isolate;
    /* the reference screen reads a near-flat #4a4d44 corner to corner —
       all the modelling comes from the light pool the root sits in */
    /* deep water: a sunlit surface up top falling away to a dark seabed */
    background:
      radial-gradient(92% 66% at 50% -14%, rgba(156,233,255,.32) 0%, rgba(86,192,234,.11) 34%, rgba(86,192,234,0) 62%),
      radial-gradient(58% 42% at 84% 4%,  rgba(120,214,255,.10) 0%, rgba(120,214,255,0) 60%),
      linear-gradient(178deg, #0a5f81 0%, #084c69 20%, #063a54 42%, #052c43 64%, #03202f 84%, #021826 100%);
  }
  /* The floor of light the root stands in. Sampled off the reference: the
     background climbs from 73 luma at the nav to ~128 at y 850, brightest
     around the middle of the bottom edge. */
  .hero::after{
    content:'';
    position:absolute; inset:0;
    /* light pooling down from the surface + the dark of the deep gathering below */
    background:
      radial-gradient(78% 42% at 50% -6%, rgba(198,246,255,.24) 0%, rgba(150,225,255,.06) 46%, rgba(150,225,255,0) 74%),
      radial-gradient(90% 60% at 50% 122%, rgba(2,16,28,.55) 0%, rgba(2,16,28,0) 66%);
    pointer-events:none; z-index:0;
  }

  /* ── underwater atmosphere (z 3 — over the transparent scene, under the copy) ── */
  .ocean{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
  /* a blue depth tint so the whole world reads as if seen through water */
  .ocean .tint{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(22,124,168,.10) 0%, rgba(11,78,114,.16) 55%, rgba(3,32,52,.30) 100%);
    mix-blend-mode:multiply;
  }
  /* slow shafts of light drifting down from the surface */
  .ocean .rays{
    position:absolute; inset:-22% -16% 0;
    /* two wide, heavily-blurred pools of light — a diffuse surface glow, no hard shafts */
    background:
      linear-gradient(102deg, transparent 8%, rgba(190,240,255,.05) 32%, transparent 58%),
      linear-gradient(88deg,  transparent 50%, rgba(212,248,255,.04) 72%, transparent 94%);
    mix-blend-mode:screen; filter:blur(26px);
    transform-origin:50% 0;
    animation:ocean-rays 18s ease-in-out infinite alternate;
  }
  @keyframes ocean-rays{
    from{ transform:translateX(-2.5%) skewX(-2.5deg); opacity:.8; }
    to{   transform:translateX(2.5%)  skewX(2.5deg);  opacity:1;  }
  }
  /* bubbles rising from the deep */
  .ocean .bubbles{ position:absolute; inset:0; }
  .ocean .bubbles b{
    position:absolute; bottom:-8%; left:var(--x);
    width:var(--s); height:var(--s); border-radius:50%;
    background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), rgba(190,235,255,.22) 46%, rgba(160,220,255,.05) 70%, transparent 72%);
    box-shadow:inset 0 0 calc(var(--s) * .28) rgba(255,255,255,.30);
    opacity:0;
    animation:bubble-rise var(--t) linear var(--delay) infinite;
    will-change:transform, opacity;
  }
  @keyframes bubble-rise{
    0%{   transform:translate(0,0) scale(.65); opacity:0; }
    10%{  opacity:.7; }
    50%{  transform:translate(var(--drift), -54svh) scale(1); }
    88%{  opacity:.5; }
    100%{ transform:translate(calc(var(--drift) * -1), -108svh) scale(1.08); opacity:0; }
  }

  /* The whole composition lives on a centred 1600 × 880 stage.
     Centred with margins rather than a transform on purpose: a transform would
     open a stacking context and trap every child below #scene. */
  .stage{
    position:absolute; left:50%; top:50%;
    margin-left:calc(-800 * var(--u));
    margin-top:calc(-440 * var(--u));
    width:calc(1600 * var(--u));
    height:calc(880 * var(--u));
  }

  /* ── column guides (z 1) ─────────────────────────────────────────────── */
  .guides{ position:absolute; inset:calc(-40 * var(--u)) 0; z-index:1; pointer-events:none; opacity:.28; }
  .guides i{
    position:absolute; top:0; bottom:0; width:1px;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--rule) 12%, var(--rule) 78%, rgba(255,255,255,0) 100%);
  }

  /* ── ghost wordmark (z 1) ────────────────────────────────────────────── */
  .ghost{
    position:absolute; z-index:1;
    left:50%; top:45%; transform:translate(-50%, -50%);
    font-size:calc(360 * var(--u));
    line-height:1;
    font-weight:200;
    letter-spacing:calc(60 * var(--u));
    color:rgba(255,255,255,.018);
    white-space:nowrap; user-select:none; pointer-events:none;
  }

  /* ── three.js canvas (z 3 — above card 1, below everything else) ─────── */
  #scene{
    position:absolute; inset:0; z-index:3;
    width:100%; height:100%;
    pointer-events:none;
    opacity:0; transition:opacity .7s var(--ease);
  }
  .is-ready #scene{ opacity:1; }

  /* ── menu bar (z 50) ─────────────────────────────────────────────────
     A macOS-style menu bar: a thin strip of dark glass fixed to the top edge,
     the mark where the Apple logo sits, the studio's name in bold, plain
     menu titles after it and the language switcher on the right where the
     status items go. It lives outside .hero (whose isolation would trap it
     under .below once the page scrolls) and takes no parallax — a menu bar
     that drifts with the pointer stops reading as one.
     The links fill the bar's height so the hit area is the whole strip; the
     rounded highlight is a ::before inset from it, like a menu title's. */
  :root{ --mb-h:28px; }
  .menubar{
    position:fixed; z-index:50; top:0; left:0; right:0;
    height:calc(var(--mb-h) + env(safe-area-inset-top, 0px));
    padding:env(safe-area-inset-top, 0px) max(6px, env(safe-area-inset-right, 0px)) 0 max(6px, env(safe-area-inset-left, 0px));
    display:flex; align-items:stretch; justify-content:space-between; gap:8px;
    font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,'Lexend',sans-serif;
    font-size:13px; font-weight:500; line-height:1; letter-spacing:0;
    color:rgba(255,255,255,.92);
    text-shadow:0 1px 2px rgba(0,12,22,.28);
    /* dark enough to keep white text legible over the pale product cards
       once the page scrolls (white is 5.2:1 over #f2f3ef), light enough that the
       water still shows through it over the hero */
    background:rgba(4,22,34,.6);
    -webkit-backdrop-filter:blur(22px) saturate(170%);
            backdrop-filter:blur(22px) saturate(170%);
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.09), 0 1px 0 rgba(0,10,18,.18);
  }
  .mb-menus{ display:flex; align-items:stretch; min-width:0; }
  .mb-item{
    position:relative; isolation:isolate;
    display:flex; align-items:center; flex:none;
    padding:0 10px;
    color:inherit; text-decoration:none; white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
  }
  .mb-item::before{
    content:''; position:absolute; z-index:-1; inset:3px 0;
    border-radius:5px; background:transparent;
    transition:background-color .1s linear;
  }
  .mb-item:hover::before, .mb-item.is-active::before{ background:rgba(255,255,255,.14); }
  .mb-item:active::before{ background:rgba(255,255,255,.2); }
  /* the ring sits on the highlight, not on the full-height link; the
     transparent outline is what forced-colors mode paints instead */
  .mb-item:focus-visible{ outline:2px solid transparent; outline-offset:-3px; border-radius:0; }
  .mb-item:focus-visible::before{ background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 2px rgba(150,212,255,.95); }
  .mb-app{ font-weight:700; padding:0 11px 0 9px; }
  .mb-mark{ padding:0 9px 0 11px; }
  .mb-mark svg{ display:block; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1px rgba(0,12,22,.28)); }
  /* status items: tighter, and the current language reads as set, not open */
  .menubar .lang-switch--bar{ display:flex; align-items:stretch; gap:0; flex:none; }
  .menubar .lang-switch--bar a{ font-size:13px; padding:0 8px; color:rgba(255,255,255,.88); }
  .menubar .lang-switch--bar a:hover{ color:rgba(255,255,255,.95); }
  .menubar .lang-switch--bar a[aria-current="true"]{ color:#fff; font-weight:700; }
  /* phones and tablets: a taller strip so every target is a real tap
     target; the four menu titles go at phone width (they are all one
     scroll away, and macOS too drops menus when the bar runs out) */
  @media (max-width:1024px), (pointer:coarse){
    :root{ --mb-h:36px; }
    .mb-item::before{ inset:5px 0; border-radius:6px; }
  }
  @media (max-width:640px){
    .mb-sect{ display:none; }
    .menubar .lang-switch--bar a{ padding:0 9px; }
  }
  .sect, .principles, .tools{ scroll-margin-top:calc(var(--mb-h) + env(safe-area-inset-top, 0px)); }

  /* ── hero copy (z 4) ─────────────────────────────────────────────────── */
  .headline{
    position:absolute; z-index:4;
    left:calc(100 * var(--u)); top:calc(240 * var(--u));
    font-size:calc(82 * var(--u)); line-height:1.05;
    font-weight:200; letter-spacing:calc(-1.5 * var(--u));
    max-width:calc(700 * var(--u));
    color:var(--ink);
  }
  .headline span{ display:block; padding-bottom:.04em; }
  .headline span:first-child i{ font-weight:300; color:var(--ink); display:inline-block; font-style:normal; }
  .headline span:last-child i{ font-weight:300; color:rgba(255,255,255,.45); display:inline-block; font-style:normal; }

  .lede{
    position:absolute; z-index:4;
    left:calc(105 * var(--u)); top:calc(460 * var(--u));
    width:calc(380 * var(--u));
    font-size:calc(18 * var(--u)); line-height:1.6;
    font-weight:300; color:rgba(255,255,255,.5);
    letter-spacing:calc(0.2 * var(--u));
  }

  /* ── liquid-metal controls ──────────────────────────────────────────
     The original five-pass WebGL2 renderer now mounts directly in this
     document. Its canvas, sizing, glass plate, shader constants and input
     model are unchanged; only the iframe boundary has been removed. */
  .pill-clip{
    position:absolute; z-index:4;
    left:calc(245 * var(--u)); top:calc(610 * var(--u));
    width:calc(410 * var(--u)); height:calc(270 * var(--u));
    margin:calc(-135 * var(--u)) 0 0 calc(-205 * var(--u));
    clip-path:inset(calc(72 * var(--u)) calc(60 * var(--u))
                    calc(26 * var(--u)) calc(60 * var(--u)) round calc(62 * var(--u)));
  }
  .pill{
    position:absolute; inset:0; --mr:calc(150 * var(--u));
    display:grid; place-items:center;
  }

  .liquid-stage{
    --lu:calc(var(--h) / 516);
    --bh:var(--h);
    --pad:calc(900 * var(--lu));
    position:relative;
    width:max-content; height:max-content;
    padding:var(--pad);
    display:grid; place-items:center;
    touch-action:manipulation;
    font-family:'Lexend','Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
    font-optical-sizing:auto;
    -webkit-font-smoothing:antialiased;
  }
  .liquid-stage--explore{ --h:calc(60.156 * var(--u)); }
  .liquid-stage--play{ --h:calc(88.2288 * var(--u)); }

  .liquid-plate{
    position:absolute;
    inset:var(--pad);
    border-radius:999px;
    background:
      linear-gradient(180deg, rgba(210,238,255,.09), rgba(210,238,255,.014) 44%, rgba(210,238,255,0) 64%),
      rgba(7,20,29,.46);
    box-shadow:
      0 calc(var(--h) * 0.08) calc(var(--h) * 0.18) rgba(0,0,0,.38),
      0 calc(var(--h) * 0.24) calc(var(--h) * 0.50) rgba(0,0,0,.28),
      0 calc(var(--h) * 0.48) calc(var(--h) * 0.96) rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.13),
      inset 0 calc(var(--h) * -0.02) calc(var(--h) * 0.05) rgba(255,255,255,.05);
    transition:box-shadow .38s cubic-bezier(.22,.61,.36,1),
               background .38s cubic-bezier(.22,.61,.36,1);
  }
  .liquid-stage.hot .liquid-plate{
    background:
      linear-gradient(180deg, rgba(210,238,255,.11), rgba(210,238,255,.02) 44%, rgba(210,238,255,0) 64%),
      rgba(5,17,25,.52);
    box-shadow:
      0 calc(var(--h) * 0.10) calc(var(--h) * 0.22) rgba(0,0,0,.44),
      0 calc(var(--h) * 0.32) calc(var(--h) * 0.66) rgba(0,0,0,.34),
      0 calc(var(--h) * 0.66) calc(var(--h) * 1.32) rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.17),
      inset 0 calc(var(--h) * -0.02) calc(var(--h) * 0.05) rgba(255,255,255,.06);
  }
  .liquid-fx{ position:absolute; inset:0; width:100%; height:100%; display:block; }

  .liquid-button{
    position:relative;
    height:var(--bh);
    border:0; background:none;
    border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    font-family:inherit; font-weight:500; line-height:1; letter-spacing:0;
    cursor:pointer; -webkit-tap-highlight-color:transparent; outline:none;
  }
  .liquid-button:focus-visible{
    outline:calc(4 * var(--lu)) solid rgba(255,255,255,.55);
    outline-offset:calc(10 * var(--lu));
  }
  .liquid-button .ico{ display:block; flex:none; overflow:visible; }
  .liquid-button .lbl{ display:block; transform:translateY(calc(2 * var(--lu))); }
  .liquid-button--explore{
    padding:0 calc(224 * var(--lu)) 0 calc(95 * var(--lu));
    gap:calc(112 * var(--lu));
    font-size:calc(140 * var(--lu));
  }
  .liquid-button--explore .ico{
    width:calc(150 * var(--lu)); height:calc(150 * var(--lu));
  }
  .liquid-button--play{
    width:var(--bh); height:var(--bh); padding:0;
  }
  .liquid-button--play .ico{
    width:calc(176 * var(--lu)); height:calc(176 * var(--lu));
    margin-left:calc(14 * var(--lu));
  }
  .liquid-button--play .lbl{ display:none; }
  .liquid-stage.press .liquid-plate{
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.01) 44%, rgba(255,255,255,0) 64%),
      rgba(7,9,7,.55);
    box-shadow:
      0 calc(var(--h) * 0.04) calc(var(--h) * 0.11) rgba(0,0,0,.46),
      0 calc(var(--h) * 0.13) calc(var(--h) * 0.32) rgba(0,0,0,.36),
      0 calc(var(--h) * 0.27) calc(var(--h) * 0.62) rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.10);
    transition-duration:.10s;
  }

  /* ── play button (z 4) ─────────────────────────────────────────────── */
  .play-wrap{
    position:absolute; z-index:4; pointer-events:none;
    left:calc(1300 * var(--u)); top:calc(260 * var(--u));
    width:calc(170 * var(--u)); height:calc(170 * var(--u));
  }
  .play-wrap > *{ pointer-events:auto; }
  .play-clip{
    position:absolute; left:50%; top:50%;
    width:calc(396 * var(--u)); height:calc(396 * var(--u));
    margin:calc(-198 * var(--u)) 0 0 calc(-198 * var(--u));
    clip-path:inset(calc(131 * var(--u)) calc(106 * var(--u))
                    calc(73 * var(--u)) calc(106 * var(--u)) round calc(92 * var(--u)));
  }
  .play-glass{ position:absolute; inset:0; display:grid; place-items:center; }
  .play-ring{
    position:absolute; inset:0; pointer-events:none;
    border:1px solid rgba(255,255,255,.17); border-radius:50%;
  }
  .play-ring::after{
    content:''; position:absolute; inset:calc(-1 * var(--u));
    border:1px solid rgba(255,255,255,.32); border-radius:50%;
    opacity:0; transform:scale(.86);
    transition:opacity .7s var(--ease), transform .9s var(--ease-out);
  }
  .play-clip:hover ~ .play-ring::after,
  .play-clip:focus-within ~ .play-ring::after{ opacity:1; transform:scale(1.06); }

  /* ── stats (z 4) ─────────────────────────────────────────────────────── */

  /* ── cards removed ─────────────────────────────────────────────────── */

  /* ── scroll cue (z 4) ────────────────────────────────────────────────── */
  .scroll{
    position:absolute; z-index:4;
    left:50%; bottom:calc(60 * var(--u)); transform:translateX(-50%); top:auto;
    display:flex; flex-direction:column; align-items:center; gap:calc(16 * var(--u));
    font-size:calc(10.5 * var(--u)); font-weight:500;
    letter-spacing:calc(4 * var(--u));
    color:rgba(255,255,255,.4);
    text-transform:uppercase; text-decoration:none;
  }
  .scroll .track{ position:relative; width:1px; height:calc(48 * var(--u)); background:rgba(255,255,255,.12); overflow:hidden; }
  .scroll .track::after{
    content:''; position:absolute; inset:0 0 auto; width:100%; height:40%;
    background:rgba(255,255,255,.8);
    animation:trickle 2.6s var(--ease) infinite;
  }
  @keyframes trickle{
    0%   { transform:translateY(-105%); opacity:0; }
    22%  { opacity:1; }
    78%  { opacity:1; }
    100% { transform:translateY(255%); opacity:0; }
  }

  /* ── entrance: everything is wiped in behind a mask ───────────────────
     Transform is reserved for the pointer parallax, so the reveal is done
     with clip-path. Once the intro has run, .intro-done drops the clip
     entirely — a live clip-path would open a stacking context on the About
     card and trap its knob under the moss. */
  .js .mask{ clip-path:inset(100% 0 0 0 round var(--mr,0px)); }
  .is-ready .mask{
    clip-path:inset(0 0 0 0 round var(--mr,0px));
    transition:clip-path 1.05s var(--ease-out) var(--d,0ms);
  }
  .js .mask-circle{ clip-path:circle(0% at 50% 50%); }
  .is-ready .mask-circle{
    clip-path:circle(76% at 50% 50%);
    transition:clip-path 1.1s var(--ease-out) var(--d,0ms);
  }
  .js .fade{ opacity:0; }
  .is-ready .fade{ opacity:1; transition:opacity 1.3s var(--ease) var(--d,0ms); }

  .intro-done .mask, .intro-done .mask-circle{ clip-path:none; transition:none; }

  

  /* the menu bar only fades in with the intro — it is chrome, not content */
  .js .menubar{ opacity:0; }
  .is-ready .menubar{ opacity:1; transition:opacity .8s var(--ease) 80ms; }

  /* A short rise under a fade rather than a full-height wipe: with nothing
     cropping it, a 105% travel would start line one sitting on top of line
     two. .headline itself carries the pointer parallax, so the transform has
     to go on the inner <i>. */
  .js .headline span i{ opacity:0; transform:translateY(calc(16 * var(--u))); }
  .is-ready .headline span i{
    opacity:1; transform:none;
    transition:opacity 1.05s var(--ease) var(--d,0ms),
               transform 1.25s var(--ease-out) var(--d,0ms);
  }



  /* No clip on the canvas: the root draws itself in behind the survey pulse,
     and a CSS wipe on top of that would be two reveals fighting each other.
     The fade is only here to cover the first compiled frame. */
  .is-ready #scene{ transition:opacity .45s var(--ease); }

  /* ── pointer parallax ────────────────────────────────────────────────
     --px / --py are written on .hero once per frame (-1…1). Each layer
     declares how far it rides (--pd, px at full deflection) and how much
     it turns (--pr, degrees), which is what gives the plane its depth. */
  .par{
    transform:
      perspective(1400px)
      translate3d(calc(var(--px,0) * var(--pd,0) * -1px),
                  calc(var(--py,0) * var(--pd,0) * -0.62px),
                  0)
      rotateY(calc(var(--px,0) * var(--pr,0) * 1deg))
      rotateX(calc(var(--py,0) * var(--pr,0) * -0.7deg));
  }
  


  /* ── hero polish ─────────────────────────────────────────────────────── */
  .headline{ font-weight:300; text-shadow:0 calc(2 * var(--u)) calc(34 * var(--u)) rgba(1,22,36,.5); }
  .headline span:first-child i{ font-weight:300; }
  .headline span:last-child i{
    font-weight:300;
    background:linear-gradient(92deg,#d8f3ff 0%,#8fdcff 46%,#a9f0da 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    text-shadow:none; filter:drop-shadow(0 calc(2 * var(--u)) calc(26 * var(--u)) rgba(1,22,36,.45));
  }
  .lede{ color:rgba(236,248,255,.86); text-shadow:0 1px calc(18 * var(--u)) rgba(1,22,36,.65); }

  .eyebrow-hero{
    position:absolute; z-index:4;
    left:calc(104 * var(--u)); top:calc(196 * var(--u));
    display:flex; align-items:center; gap:calc(12 * var(--u));
    font-size:calc(11.5 * var(--u)); font-weight:600; letter-spacing:calc(3.4 * var(--u));
    text-transform:uppercase; color:rgba(200,240,255,.9);
    text-shadow:0 1px calc(14 * var(--u)) rgba(1,22,36,.7);
  }
  .eyebrow-hero i{ display:block; width:calc(34 * var(--u)); height:1px; background:linear-gradient(90deg,rgba(160,230,255,.9),rgba(160,230,255,0)); }

  /* ── the hero is a home screen ────────────────────────────────────────
     The 3D world is the wallpaper. On it: widgets (two image widgets and a
     frosted medium one), an icon grid with names under the icons, page dots, a
     Search pill and a glass dock — laid out on the same 4-column grid iOS
     uses (icon 70, gutter 26; a 2×2 widget is two icons wide). */
  .hs-cluster{
    position:absolute; z-index:4;
    left:calc(1128 * var(--u)); top:calc(168 * var(--u));
    display:grid; grid-template-columns:repeat(4, calc(70 * var(--u))); column-gap:calc(26 * var(--u)); row-gap:calc(26 * var(--u));
    grid-auto-rows:calc(166 * var(--u));
    font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Lexend',sans-serif;
  }
  .hs-cluster a, .hs-bottom a{ color:#fff; text-decoration:none; -webkit-tap-highlight-color:transparent; }
  .hs-w{
    position:relative; display:block; overflow:hidden; border-radius:calc(30 * var(--u));
    box-shadow:0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(1,14,26,.42), inset 0 0 0 1px rgba(255,255,255,.22);
    transition:transform .45s var(--ease-out), box-shadow .3s var(--ease);
  }
  .hs-w--sq{ grid-column:span 2; }
  /* zoom into the 3D scene of the app screenshot: the status bar, the title and the toolbar fall outside the widget */
  .hs-mok img{ object-position:50% 16%; transform:scale(1.32); transform-origin:50% 26%; }
  a.hs-w:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 calc(22 * var(--u)) calc(44 * var(--u)) rgba(1,14,26,.5), inset 0 0 0 1px rgba(255,255,255,.32); }
  a.hs-w:active, .hs-grid a:active, .hs-dock a:active{ transform:scale(.94); }
  .hs-w img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  a.hs-w::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,8,18,0) 34%,rgba(0,8,18,.78) 100%); }
  .hs-cap{ position:absolute; z-index:2; left:calc(16 * var(--u)); right:calc(12 * var(--u)); bottom:calc(13 * var(--u)); display:flex; flex-direction:column; gap:1px; text-shadow:0 1px calc(8 * var(--u)) rgba(0,0,0,.5); }
  .hs-cap b{ font-size:calc(15 * var(--u)); font-weight:600; letter-spacing:.01em; }
  .hs-cap i{ font-style:normal; font-size:calc(11.5 * var(--u)); opacity:.82; }

  .hs-glass{
    padding:calc(16 * var(--u)) calc(22 * var(--u)); display:flex; flex-direction:column; justify-content:space-between;
    background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.09));
    backdrop-filter:blur(26px) saturate(1.7); -webkit-backdrop-filter:blur(26px) saturate(1.7);
  }
  .hs-head{ display:flex; align-items:center; gap:calc(8 * var(--u)); font-size:calc(12 * var(--u)); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.78); }
  .hs-head svg{ width:calc(17 * var(--u)); height:calc(17 * var(--u)); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
  .hs-stats{ display:grid; gap:calc(9 * var(--u)); }
  .hs-stats div{ display:flex; justify-content:space-between; align-items:baseline; gap:calc(8 * var(--u)); }
  .hs-stats dt{ font-size:max(10px, calc(10.5 * var(--u))); font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.72); }
  .hs-stats dd{ font-size:calc(15 * var(--u)); font-weight:600; letter-spacing:-.01em; color:#fff; line-height:1; white-space:nowrap; }
  @media (min-width:901px){ .hs-stats{ gap:calc(7 * var(--u)); } .hs-stats div{ display:block; } .hs-stats dt{ margin-bottom:calc(2 * var(--u)); font-size:max(10px, calc(9.5 * var(--u))); } .hs-stats dd{ font-size:max(12px, calc(14 * var(--u))); } .hs-glass{ padding:calc(14 * var(--u)) calc(18 * var(--u)); } }

  .hs-grid{ display:contents; list-style:none; }
  .hs-grid li{ display:block; align-self:start; }
  .hs-grid a{ display:flex; flex-direction:column; align-items:center; gap:calc(8 * var(--u)); transition:transform .18s var(--ease-out); }
  .hs-grid img, .hs-dock img{
    display:block; width:calc(70 * var(--u)); height:calc(70 * var(--u)); border-radius:22.37%; object-fit:cover;
    box-shadow:0 calc(5 * var(--u)) calc(14 * var(--u)) rgba(1,12,30,.42), inset 0 0 0 .5px rgba(255,255,255,.34);
    transition:filter .15s var(--ease), transform .35s var(--ease-out);
  }
  .hs-grid span{ font-size:max(10.5px, calc(12 * var(--u))); font-weight:500; line-height:1.1; text-shadow:0 1px 5px rgba(0,8,20,.7); white-space:nowrap; }
  .hs-grid a:hover img, .hs-dock a:hover img{ transform:translateY(-3px) scale(1.06); }
  .hs-grid a:active img, .hs-dock a:active img{ filter:brightness(.74); }

  .hs-bottom{
    position:absolute; z-index:4; left:calc(800 * var(--u)); top:calc(692 * var(--u)); margin-left:calc(-215 * var(--u));
    width:calc(430 * var(--u)); display:flex; flex-direction:column; align-items:center; gap:calc(12 * var(--u));
    font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Lexend',sans-serif;
  }
  .hs-dots{ display:flex; gap:calc(8 * var(--u)); }
  .hs-dots i{ width:calc(7 * var(--u)); height:calc(7 * var(--u)); border-radius:50%; background:rgba(255,255,255,.45); box-shadow:0 0 6px rgba(0,10,22,.4); }
  .hs-dots i.on{ background:#fff; }
  .hs-search{
    display:flex; align-items:center; justify-content:center; gap:calc(8 * var(--u)); width:calc(150 * var(--u)); height:calc(34 * var(--u)); border-radius:999px;
    font-size:calc(13.5 * var(--u)); font-weight:500; color:rgba(255,255,255,.94);
    background:rgba(255,255,255,.2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  .hs-search svg{ width:calc(13 * var(--u)); height:calc(13 * var(--u)); }
  .hs-dock{
    list-style:none; width:100%; display:flex; justify-content:space-between; align-items:center;
    padding:calc(17 * var(--u)) calc(22 * var(--u)); border-radius:calc(40 * var(--u));
    background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.14));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.14), 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(1,14,26,.4);
    backdrop-filter:blur(26px) saturate(1.7); -webkit-backdrop-filter:blur(26px) saturate(1.7);
  }
  .hs-dock img{ width:calc(66 * var(--u)); height:calc(66 * var(--u)); }
  .hs-dock a{ display:block; transition:transform .18s var(--ease-out); }

  .scroll{ color:rgba(226,247,255,.78); text-shadow:0 1px calc(12 * var(--u)) rgba(1,22,36,.8); }
  .scroll .track{ background:rgba(255,255,255,.28); }
  @media (min-width:901px){ .scroll{ display:none; } }
  /* short phones: widgets and dock only — the icon row is the first to go */
  @media (max-width:900px) and (min-aspect-ratio:21/40){ .hs-grid{ display:none; } }

  /* the world is seen through water: a soft vignette, a little film grain
     (an inline SVG, no request) and — when the page scrolls away — the
     deep closing over it (--sink, written by the scene's frame loop) */
  .ocean .vignette{
    position:absolute; inset:0;
    background:radial-gradient(120% 95% at 50% 46%, rgba(2,20,32,0) 52%, rgba(2,18,30,.34) 82%, rgba(1,12,22,.62) 100%);
  }
  .ocean .grain{
    position:absolute; inset:0; opacity:.085; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.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 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size:220px 220px;
  }
  .ocean .floor{ position:absolute; left:0; right:0; bottom:0; height:17%; background:linear-gradient(180deg, rgba(4,32,47,0) 0%, rgba(4,32,47,.55) 62%, #04202f 100%); }
  .ocean .sink{ position:absolute; inset:0; background:#03202f; opacity:calc(var(--sink, 0) * .9); }
  .ocean .rays{ opacity:.6; }

  /* ── keyboard focus ──────────────────────────────────────────────────── */
  a:focus-visible, button:focus-visible{
    outline:2px solid rgba(255,255,255,.85);
    outline-offset:calc(4 * var(--u));
    border-radius:calc(6 * var(--u));
  }
  

  @media (prefers-reduced-motion:reduce){
    .mask,.mask-circle,.fade,#scene,
    .menubar,
    .headline span i{ opacity:1 !important; clip-path:none !important; transform:none !important; transition:none !important; }
    .par{ transform:none !important; }
    .mb-item::before{ transition:none; }
    
    .scroll .track::after{ animation:none; }
    #scene{ transition:none; }
    .ocean .rays{ animation:none; }
    .ocean .bubbles b{ animation:none; opacity:0; }
  }

  /* ── narrow screens: one column, the moss becomes a band between the
        copy and the cards (760 design units wide) ───────────────────────── */
  @media (max-width:900px){
    /* the 760u column fits the width, and 1250u of it (copy, a gap of world,
       widgets, dock) fits the height — short phones shrink everything
       instead of pushing the dock below the fold */
    :root{ --u: min(calc(100vw / 760), calc(100svh / 1250)); }
    .hero{ height:100svh; min-height:0; }
    .stage{
      position:relative; left:auto; top:auto; margin:0 auto;
      width:calc(760 * var(--u)); height:100%;
    }
    .hero::after{
      background:
        radial-gradient(90% 30% at 50% 74%, rgba(238,243,231,.40) 0%, rgba(238,243,231,.14) 46%, rgba(238,243,231,0) 82%),
        linear-gradient(180deg, rgba(238,243,231,0) 62%, rgba(238,243,231,.05) 100%);
    }
    .guides i:nth-child(3){ display:none; }
    .guides i:nth-child(1){ left:calc(253 * var(--u)) !important; }
    .guides i:nth-child(2){ left:calc(506 * var(--u)) !important; }

    .headline{ left:calc(40 * var(--u)); top:calc(160 * var(--u)); font-size:calc(68 * var(--u)); line-height:1.05; letter-spacing:calc(-1.5 * var(--u)); max-width:calc(600 * var(--u)); }
    .lede{ left:calc(40 * var(--u)); top:calc(340 * var(--u)); width:calc(460 * var(--u)); font-size:calc(22 * var(--u)); line-height:1.6; }
    /* one column: the frame keeps its aspect, re-anchored to the left rail */
    .pill-clip{
      left:calc(45 * var(--u)); top:calc(540 * var(--u));
      width:calc(506 * var(--u)); height:calc(334 * var(--u));
      margin:calc(-167 * var(--u)) 0 0 calc(-79 * var(--u));
      clip-path:inset(calc(93 * var(--u)) calc(74 * var(--u)) calc(1 * var(--u)) calc(74 * var(--u)) round calc(76 * var(--u)));
    }
    .liquid-stage--explore{ --h:calc(74.4152 * var(--u)); }
    .play-wrap{ display:none; }


    .eyebrow-hero{ display:none; }
    .headline{ top:calc(160 * var(--u)); }
    .hs-cluster{ left:calc(40 * var(--u)); top:auto; bottom:calc(202 * var(--u)); grid-template-columns:repeat(4, calc(134 * var(--u))); column-gap:calc(36 * var(--u)); row-gap:calc(34 * var(--u)); grid-auto-rows:auto; }
    .hs-w{ border-radius:calc(54 * var(--u)); }
    .hs-w--sq{ height:calc(304 * var(--u)); }
    .hs-cap{ left:calc(24 * var(--u)); bottom:calc(20 * var(--u)); }
    .hs-cap b{ font-size:calc(26 * var(--u)); } .hs-cap i{ font-size:calc(19 * var(--u)); }
    .hs-grid img{ width:calc(134 * var(--u)); height:calc(134 * var(--u)); }
    .hs-stats dt{ font-size:max(10.5px, calc(15 * var(--u))); }
    .hs-head{ font-size:calc(17 * var(--u)); } .hs-head svg{ width:calc(22 * var(--u)); height:calc(22 * var(--u)); }
    .hs-glass{ padding:calc(24 * var(--u)) calc(30 * var(--u)); }
    .hs-stats{ gap:calc(14 * var(--u)); } .hs-stats dt{ font-size:calc(15 * var(--u)); } .hs-stats dd{ font-size:calc(22 * var(--u)); }
    .hs-grid span{ font-size:max(10.5px, calc(20 * var(--u))); }
    .hs-bottom{ left:calc(40 * var(--u)); top:auto; bottom:calc(24 * var(--u)); margin-left:0; width:calc(680 * var(--u)); gap:0; }
    .hs-dots, .hs-search{ display:none; }
    .hs-dock{ padding:calc(20 * var(--u)) calc(34 * var(--u)); border-radius:calc(58 * var(--u)); }
    .hs-dock img{ width:calc(104 * var(--u)); height:calc(104 * var(--u)); }
    .scroll{ display:none; }

    .scroll{ left:50%; top:auto; bottom:calc(60 * var(--u)); transform:translateX(-50%); }
    .ghost{ font-size:calc(220 * var(--u)); letter-spacing:calc(20 * var(--u)); top:40%; left:50%; }
  }

  /* Landscape phones: fitting the one-column frame to a ~390px-tall screen
     scaled it to a third, a 7px lede in a 240px column. Size it as if the
     phone were upright (the short side sets the unit) and let the hero run
     taller than the screen instead — it scrolls like the rest of the page. */
  @media (max-width:900px) and (orientation:landscape) and (max-height:500px){
    :root{ --u: calc(100svh / 760); }
    .hero{ height:calc(1250 * var(--u)); }
  }

  /* ── below-hero content: products · principles · web tools · footer ──── */
  .below{ position:relative; z-index:2; background:#062a3d; color:var(--ink); font-weight:300; overflow:hidden; }
  .below .wrap{ max-width:1160px; margin:0 auto; padding:0 32px; }
  .sect{ padding:clamp(80px,12vw,160px) 0; border-top:1px solid var(--rule); }
  
  .platforms-band{
    /* flex, not inline text: the names sit flush against each other in the
       markup, so as text they were one unbreakable word that ran off the
       side of a phone */
    display:flex; flex-wrap:wrap; justify-content:center; row-gap:10px;
    text-align:center; padding:32px 24px;
    font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft);
    border-bottom:1px solid var(--rule); font-weight:400;
  }
  .platforms-band .dot{ margin:0 14px; opacity:0.4; }
  
  .sect-head{ margin:0 0 64px; }
  .sect-head h2{ font-size:clamp(32px,5vw,56px); font-weight:300; letter-spacing:-.02em; margin:0; line-height:1.1; }
  
  .products-list{ display:grid; gap:64px; }
  .product-block{
    display:grid; grid-template-columns:1fr 1.2fr; gap:48px;
    background:var(--card); color:var(--card-ink);
    border-radius:32px; padding:48px;
    align-items:center;
  }
  .product-block--alt{ grid-template-columns:1.2fr 1fr; }
  .product-block--alt .product-content{ order:2; }
  .product-block--alt .product-media{ order:1; }
  @media (max-width:1024px){
    .product-block, .product-block--alt{ grid-template-columns:1fr; gap:40px; padding:32px; }
    .product-block--alt .product-content, .product-block .product-content{ order:1; }
    .product-block--alt .product-media, .product-block .product-media{ order:2; }
  }
  
  .product-header{ display:flex; align-items:center; gap:16px; margin:0 0 24px; }
  .product-icon{ width:64px; height:64px; border-radius:16px; box-shadow:0 4px 12px rgba(0,0,0,0.08); }
  .product-icon-placeholder{ width:64px; height:64px; border-radius:16px; background:#d7dbce; display:grid; place-content:center; gap:4px; grid-template-columns:1fr 1fr; padding:12px; box-shadow:0 4px 12px rgba(0,0,0,0.08); }
  .toy-circle{ width:16px; height:16px; border-radius:50%; background:#f0b45a; }
  .toy-square{ width:16px; height:16px; background:#e26b5d; border-radius:3px; }
  .toy-triangle{ width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:16px solid #669e7a; grid-column:span 2; justify-self:center; }
  .product-header h3{ font-size:32px; font-weight:400; letter-spacing:-.01em; margin:0; }
  
  .product-lead{ font-size:20px; font-weight:400; line-height:1.4; margin:0 0 24px; color:var(--card-ink); }
  .product-bullets{ list-style:none; padding:0; margin:0 0 32px; font-size:15px; line-height:1.6; color:#4a4e45; }
  .product-bullets li{ position:relative; padding-left:20px; margin-bottom:12px; }
  .product-bullets li::before{ content:'•'; position:absolute; left:0; color:#9aa48f; font-size:18px; }
  
  .product-meta{ display:flex; flex-direction:column; gap:16px; margin:0 0 32px; padding-top:24px; border-top:1px solid rgba(0,0,0,0.06); }
  .product-chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .product-chips span{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--card-label); border:1px solid rgba(0,0,0,0.1); border-radius:999px; padding:6px 12px; font-weight:500; }
  .product-status{ font-size:13px; color:var(--card-label); }
  .store-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .store-links a{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--card-ink, #1f2a26); background:rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.12); border-radius:999px; padding:6px 12px; font-weight:600; text-decoration:none; }
  .store-links a:hover{ background:rgba(0,0,0,0.09); }
  .store-links a.is-beta{ background:transparent; border-style:dashed; font-weight:500; }
  .store-beta-note{ margin:8px 0 0; font-size:13px; color:var(--card-label); }
  .store-beta-note a{ color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
  
  .product-link{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:#fff; background:#0b3a53; padding:12px 24px; border-radius:999px; text-decoration:none; transition:background .25s var(--ease), transform .25s var(--ease); }
  .product-link:hover{ background:#06222f; transform:translateY(-1px); }
  .product-link .arr{ transition:transform .25s var(--ease); }
  .product-link:hover .arr{ transform:translateX(4px); }
  
  .product-media{ position:relative; min-height:420px; display:flex; align-items:center; justify-content:center; perspective:1000px; width:100%; }
  .product-media--reader{ min-height:540px; }
  
  .desktop-frame{ position:relative; width:100%; max-width:540px; background:#fff; border-radius:12px; box-shadow:0 12px 32px rgba(16,21,13,0.12), 0 1px 2px rgba(16,21,13,0.06); z-index:1; }
  .desktop-titlebar{ height:28px; background:#f2f2f2; display:flex; align-items:center; padding:0 12px; gap:6px; border-bottom:1px solid #e1e1e1; border-top-left-radius:12px; border-top-right-radius:12px; }
  .desktop-titlebar .dot{ width:10px; height:10px; border-radius:50%; background:#d1d1d1; }
  .desktop-titlebar .dot:nth-child(1){ background:#ff5f56; }
  .desktop-titlebar .dot:nth-child(2){ background:#ffbd2e; }
  .desktop-titlebar .dot:nth-child(3){ background:#27c93f; }
  .desktop-frame img{ width:100%; height:auto; display:block; border-bottom-left-radius:12px; border-bottom-right-radius:12px; }
  
  .tablet-frame{ position:relative; width:100%; max-width:500px; aspect-ratio:1200/838; border:14px solid #111; border-radius:24px; box-shadow:0 16px 40px rgba(16,21,13,0.15); z-index:1; background:#000; box-sizing:border-box; }
  .tablet-frame img{ width:100%; height:100%; display:block; object-fit:cover; border-radius:calc(24px - 14px); }
  
  .phone-frame{ --phone-r:30px; position:relative; width:220px; aspect-ratio:620/1348; border:5px solid #0a0a0a; border-radius:var(--phone-r); box-shadow:0 16px 48px rgba(16,21,13,0.18), 0 2px 8px rgba(16,21,13,0.1); z-index:2; flex-shrink:0; background:#0a0a0a; box-sizing:border-box; }
  .phone-frame::before{ content:''; position:absolute; inset:0; border:1px solid rgba(255,255,255,0.14); border-radius:calc(var(--phone-r) - 5px); pointer-events:none; z-index:3; }
  .phone-notch{ position:absolute; top:7px; left:50%; transform:translateX(-50%); width:28%; max-width:74px; height:13px; background:#000; border-radius:999px; z-index:4; }
  .phone-frame img{ width:100%; height:100%; display:block; object-fit:cover; object-position:top; border-radius:calc(var(--phone-r) - 5px); }
  
  .phone-frame--overlay{ --phone-r:22px; position:absolute; bottom:-10%; right:-5%; width:160px; transform:rotate(-4deg); }
  .phone-frame--overlay2{ --phone-r:25px; position:absolute; top:-5%; left:-5%; width:180px; transform:rotate(3deg); }
  @media (max-width:1024px){
    .phone-frame--overlay{ --phone-r:19px; right:0; width:140px; }
    .phone-frame--overlay2{ --phone-r:21px; left:0; width:150px; }
    .product-media{ min-height:340px; }
    .product-media--reader{ min-height:440px; }
  }
  
  .product-media--reader .phone-frame{ --phone-r:26px; position:absolute; width:190px; }
  .product-media--reader .phone-frame--stack1{ transform:translateX(-45%) rotate(-6deg); z-index:1; }
  .product-media--reader .phone-frame--stack2{ transform:translateX(0); z-index:2; box-shadow:0 24px 64px rgba(16,21,13,0.25); }
  .product-media--reader .phone-frame--stack3{ transform:translateX(45%) rotate(6deg); z-index:1; }
  
  .wooden-pattern{ width:100%; height:100%; min-height:300px; display:grid; place-items:center; background:#d7dbce; border-radius:24px; position:relative; overflow:hidden; }
  .wood-block{ position:absolute; box-shadow:inset 0 0 20px rgba(0,0,0,0.05), 4px 12px 24px rgba(0,0,0,0.1); border:1px solid rgba(0,0,0,0.05); }
  .wood-block-1{ width:100px; height:100px; border-radius:50%; top:20%; left:20%; transform:rotate(12deg); background:#f2c385; }
  .wood-block-2{ width:120px; height:70px; border-radius:8px; bottom:25%; right:20%; transform:rotate(-8deg); background:#e89082; }
  .wood-block-3{ width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:80px solid #8cb39d; top:35%; right:35%; transform:rotate(24deg); background:none; box-shadow:none; border:none; filter:drop-shadow(4px 12px 16px rgba(0,0,0,0.1)); }

  .principles{ background:#04212f; padding:clamp(80px,12vw,140px) 0; border-top:1px solid var(--rule); }
  .principles .sect-head h2{ color:#fff; }
  .vals{ display:grid; gap:32px; grid-template-columns:repeat(4, 1fr); counter-reset:principle; }
  @media (max-width:1024px){ .vals{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:640px){ .vals{ grid-template-columns:1fr; } }
  .val{ padding:32px; border:1px solid rgba(255,255,255,0.06); border-radius:24px; background:rgba(255,255,255,0.015); position:relative; transition:background .3s var(--ease); }
  .val:hover{ background:rgba(255,255,255,0.03); }
  .val::before{ counter-increment:principle; content:"0" counter(principle); display:block; font-size:14px; font-weight:500; letter-spacing:.05em; color:#aeb7a3; margin-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:12px; }
  .val h3{ font-size:22px; font-weight:400; margin:0 0 12px; color:var(--ink); }
  .val p{ color:var(--ink-soft); font-size:15px; font-weight:300; line-height:1.6; margin:0; }

  .tools{ padding:clamp(80px,12vw,140px) 0; border-top:1px solid var(--rule); }
  .tool{
    display:flex; flex-direction:column; align-items:flex-start; padding:48px;
    border:1px solid var(--rule); border-radius:32px;
    background:linear-gradient(145deg, rgba(255,255,255,0.02) 0%, transparent 100%);
    max-width:800px; margin:0 auto;
  }
  .tool h3{ font-size:28px; font-weight:400; margin:0 0 16px; color:var(--ink); }
  .tool p{ color:var(--ink-soft); font-size:18px; font-weight:300; line-height:1.6; margin:0 0 32px; max-width:54ch; }
  .tool a{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:var(--ink); background:rgba(255,255,255,0.05); padding:12px 24px; border-radius:999px; text-decoration:none; transition:background .25s var(--ease), transform .25s var(--ease); border:1px solid rgba(255,255,255,0.1); }
  .tool a:hover{ background:rgba(255,255,255,0.1); transform:translateY(-1px); }

  .foot-site{ padding:80px 0 64px; border-top:1px solid var(--rule); background:#04212f; }
  .foot-wrap{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:64px; max-width:1160px; margin:0 auto; padding:0 32px; }
  @media (max-width:768px){ .foot-wrap{ grid-template-columns:1fr; gap:48px; } }
  .foot-col h4{ font-size:14px; font-weight:500; letter-spacing:.05em; color:#aeb7a3; text-transform:uppercase; margin:0 0 24px; }
  .foot-col p{ color:var(--ink-soft); font-size:15px; font-weight:300; line-height:1.6; margin:0 0 16px; max-width:32ch; }
  .foot-nav{ display:flex; flex-direction:column; gap:12px; }
  .foot-nav a{ color:var(--ink-soft); text-decoration:none; font-size:15px; transition:color .25s var(--ease); }
  .foot-nav a:hover{ color:var(--ink); }
  
  .foot-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:80px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.06); max-width:1160px; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px; }
  .foot-bottom span{ color:var(--ink-faint); font-size:13px; }
  
  @media (prefers-reduced-motion:reduce){
    .product-link,.product-link .arr,.val,.tool a,.foot-nav a{ transition:none !important; }
    .product-link:hover, .tool a:hover{ transform:none !important; }
  }

/* Language switcher (homepage) and CJK fallback. Lexend still serves Latin glyphs;
   the OS font covers kana and kanji. */
.lang-switch{ display:flex; gap:14px; align-items:center; }
.lang-switch a{ color:var(--ink-soft); text-decoration:none; font-size:15px; }
.lang-switch a[aria-current="true"]{ color:var(--ink); font-weight:600; pointer-events:none; }
html:lang(ja) body{ font-family:'Lexend',-apple-system,BlinkMacSystemFont,'Hiragino Sans','Yu Gothic UI','Yu Gothic',Meiryo,'Noto Sans CJK JP',sans-serif; }
/* the 日本語 item is set in the OS's own CJK face, footer and menu bar alike */
.lang-switch a:lang(ja){ font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic',Meiryo,'Noto Sans CJK JP','Noto Sans JP',sans-serif; }

/* ── homepage in Vietnamese and Japanese ──────────────────────────────────
   Everything below is scoped to html:lang(vi|ja); the English page is untouched.
   The hero stacks are class-level (they do not inherit the body's CJK fallback)
   and are sized in design units for Latin text, so CJK/Vietnamese headlines
   are set smaller to stay on two lines. */
html:lang(ja) .menubar,
html:lang(ja) .liquid-stage,
html:lang(ja) .hs-cluster,
html:lang(ja) .hs-bottom{
  font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic',Meiryo,'Noto Sans CJK JP','Noto Sans JP','SF Pro Text','Lexend',sans-serif;
}
html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3, html:lang(ja) h4,
html:lang(ja) .lede, html:lang(ja) .product-lead, html:lang(ja) .product-bullets,
html:lang(ja) .val p, html:lang(ja) .tool p, html:lang(ja) .foot-col p{ line-break:strict; word-break:auto-phrase; }
html:lang(vi) .headline span, html:lang(ja) .headline span{ white-space:nowrap; }
html:lang(vi) .headline{ font-size:calc(64 * var(--u)); }
html:lang(ja) .headline{ font-size:calc(50 * var(--u)); line-height:1.2; letter-spacing:0; }
html:lang(vi) .lede, html:lang(ja) .lede{ font-size:calc(16 * var(--u)); line-height:1.55; }
html:lang(ja) .lede{ letter-spacing:0; }
@media (max-width:900px){
  html:lang(vi) .headline{ font-size:calc(56 * var(--u)); max-width:none; }
  html:lang(ja) .headline{ font-size:calc(46 * var(--u)); max-width:none; }
  html:lang(vi) .lede, html:lang(ja) .lede{ font-size:calc(21 * var(--u)); width:calc(520 * var(--u)); }
}