/* ==========================================================================
   WIZKET — website.css · Website service page, build scene
   One pinned stage + one 3D device (js/website.js drives every transform):
   keyboard → laptop → tablet → phone.
   Prefixes: ws- (scene copy/space) · dv- (device) · kb- (keys) · cd- (code editor)
             st- (site mockups) · fx- (features app) · cr- (care app) · orb- (care orbit)
   Page chrome uses the tokens; the screens keep their own palettes on purpose.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Stage + space
   -------------------------------------------------------------------------- */
.ws { position: relative; }

.ws__stage {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 46%, var(--petrol) 0%, transparent 70%),
    var(--bg);                                   /* same as the home hero */
  transition: background-color 0.6s var(--ease-io);
}

/* device palette (follows the theme; keys and bezel stay black — Wizket ink) */
:root,
:root[data-theme="dark"] {
  --dv-body: #2a3137;
  --dv-body2: #1a1f23;
  --dv-edge: #11161a;
  --dv-pad: #222a2f;
  --dv-dots: rgba(0, 0, 0, 0.55);
  --dv-shadow: rgba(0, 0, 0, 0.6);
}
:root[data-theme="light"] {
  --dv-body: #e3e6e8;
  --dv-body2: #c8cdd1;
  --dv-edge: #aab0b5;
  --dv-pad: #d5dadd;
  --dv-dots: rgba(23, 26, 28, 0.32);
  --dv-shadow: rgba(23, 26, 28, 0.26);
}

.ws-space { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ws-giant {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  font: 400 clamp(7rem, 24vw, 28rem)/0.8 var(--font-display);
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--line2);
  translate: -50% -50%;
  opacity: 0;
}
/* the device's floor shadow — flat, under the device, placed by website.js */
.ws-shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--dv-shadow), transparent);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   2. Shared copy pieces
   -------------------------------------------------------------------------- */
.ws-eyebrow {
  margin: 0 0 clamp(14px, 2.2vh, 22px);
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
}
.ws-eyebrow i { font-style: normal; color: var(--accent); }
.ws-eyebrow__rule { width: 36px; height: 1px; background: var(--line2); }

.ws-hl, .ws-dot { font-style: normal; color: var(--accent); -webkit-text-fill-color: var(--accent); -webkit-text-stroke: 0; }
.is-outline {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: clamp(1px, 0.1vw, 1.6px) var(--text);
}

.ws-copy { position: absolute; z-index: 3; }

/* --------------------------------------------------------------------------
   3. Hero — layered around the keyboard
   .ws-hero has NO z-index/transform on purpose: its parts join the stage's
   stacking order, so the giant word (z 1) sits behind the device (z 2) while
   "we build" / "that sell." and the controls (z 3) sit in front of it.
   -------------------------------------------------------------------------- */
.ws-hero {
  --top: calc(var(--nav-top) + var(--nav-h) + clamp(40px, 8vh, 84px));
  --a: clamp(2.2rem, min(4.8vw, 8.4vh), 5.6rem);
  --big: min(20.5vw, 33vh);
  --side: clamp(20px, 6vw, 110px);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ws-hero a, .ws-hero button { pointer-events: auto; }
.ws-hero__eyebrow { position: absolute; z-index: 3; top: calc(var(--top) - 38px); left: 0; right: 0; margin: 0; justify-content: center; }
.ws-hero__title { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: var(--text); }
.ws-hero__a, .ws-hero__big, .ws-hero__c { position: absolute; display: block; white-space: nowrap; line-height: 0.86; letter-spacing: 0.004em; }
.ws-hero__a { z-index: 3; top: var(--top); left: var(--side); font-size: var(--a); }
.ws-hero__big {
  z-index: 1;
  top: calc(var(--top) + var(--a) * 0.8);
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--big);
  line-height: 0.8;
  color: var(--accent);
  perspective: 900px;
}
.ws-hero__big .ws-ch { display: inline-block; }
.ws-hero__c { z-index: 3; top: calc(var(--top) + var(--a) * 0.8 + var(--big) * 0.78); right: var(--side); font-size: var(--a); }

.ws-hero__foot {
  position: absolute;
  z-index: 3;
  left: var(--side);
  right: var(--side);
  bottom: clamp(22px, 4vh, 40px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.ws-hero__lead { display: grid; justify-items: start; gap: 16px; max-width: 290px; }
.ws-hero__sub { margin: 0; font: 500 clamp(0.95rem, 1.1vw, 1.08rem)/1.4 var(--font-body); color: var(--muted); }
.ws-scroll {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.ws-scroll__mouse { display: flex; justify-content: center; width: 22px; height: 34px; padding-top: 6px; border: 1.5px solid var(--line2); border-radius: 12px; }
.ws-scroll__mouse i { width: 3px; height: 7px; border-radius: 2px; background: var(--accent); animation: ws-wheel 1.6s var(--ease-io) infinite; }
@keyframes ws-wheel { 0% { transform: none; opacity: 1; } 70% { transform: translateY(9px); opacity: 0; } 100% { opacity: 0; } }

/* stage tracker (right edge, the whole scene) */
.ws-hud {
  position: absolute;
  z-index: 4;
  right: clamp(14px, 2.4vw, 36px);
  top: 50%;
  display: flex;
  align-items: stretch;
  gap: 14px;
  translate: 0 -50%;
  pointer-events: none;
}
.ws-hud__line { position: relative; width: 2px; border-radius: 2px; overflow: hidden; background: var(--line2); }
.ws-hud__line i { position: absolute; inset: 0; background: var(--accent); transform-origin: 50% 0; transform: scaleY(0); }
.ws-hud__steps { order: -1; display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; text-align: right; }
.ws-hud__steps li {
  display: grid;
  gap: 5px;
  font: 600 10.5px/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.5;
  transition: opacity 0.5s var(--ease-io), color 0.5s var(--ease-io), transform 0.6s var(--ease-out);
}
.ws-hud__steps b { font: 400 13px/1 var(--font-display); letter-spacing: 0.06em; }
.ws-hud__steps li.is-done { opacity: 0.8; }
.ws-hud__steps li.is-on { opacity: 1; color: var(--text); transform: translateX(-6px); }
.ws-hud__steps li.is-on b { color: var(--accent); }

/* typing: chars are wrapped by website.js */
.ws-ch { visibility: hidden; }
.ws-ch.is-on { visibility: visible; }
.ws-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.78em;
  margin-left: 0.04em;
  vertical-align: -0.02em;
  background: var(--accent);
  animation: ws-blink 1s steps(1) infinite;
}
.is-typing .ws-caret { animation: none; }
.ws-caret.is-gone { animation: none; opacity: 0; transition: opacity 0.5s var(--ease-io); }
@keyframes ws-blink { 50% { opacity: 0; } }

html.js [data-ws-after] { opacity: 0; transform: translateY(12px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
html.js .ws-hero.is-typed [data-ws-after] { opacity: 1; transform: none; }
html.js .ws-hero.is-typed [data-ws-after]:last-child { transition-delay: 0.12s; }
html.js.is-loading .ws-hero__title,
html.js.is-loading .ws-hero__eyebrow { opacity: 0; }

/* --------------------------------------------------------------------------
   4. Step copy (left column on desktop): build · features · care
   -------------------------------------------------------------------------- */
.ws-copy {
  left: clamp(24px, 6vw, 110px);
  top: 50%;
  width: min(32vw, 440px);
  translate: 0 -50%;
  visibility: hidden;
}
.ws-labels {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  height: clamp(150px, 22vh, 230px);
  overflow: hidden;
}
.ws-label { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ws-label__n { font: 400 clamp(1rem, 1.3vw, 1.25rem)/1 var(--font-display); letter-spacing: 0.06em; color: var(--accent); }
.ws-label__name {
  margin-top: 10px;
  font: 400 clamp(2.4rem, min(4.4vw, 8vh), 5rem)/0.92 var(--font-display);
  text-transform: uppercase;
  color: var(--text);
}
.ws-label__sub { margin-top: 14px; font: 500 clamp(0.95rem, 1.15vw, 1.1rem)/1.35 var(--font-body); color: var(--muted); }
.ws-bars { display: flex; gap: 6px; margin-top: clamp(16px, 3vh, 28px); }
.ws-bars i { position: relative; flex: 0 0 34px; height: 3px; border-radius: 3px; overflow: hidden; background: var(--line2); }
.ws-bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--f, 0));
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   5. The device — a real 3D object
   rig (position · scale · perspective) › mouse › tilt › fly › dv (--dw/--dh)
   The lid is a slab (front · rear · edges); the deck hangs from its hinge.
   All key/deck sizes are fractions of --dw (--du = 1% of the width).
   -------------------------------------------------------------------------- */
.dv-rig {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  perspective: 2400px;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform;
}
.dv-mouse, .dv-tilt, .dv-fly { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
/* The device's size values are tweened every frame while it morphs. As ordinary (inherited) custom
   properties each change restyled every element inside it, ~80 keys included, though the keys have
   their own fixed unit (see .dv__keys). Registered as non-inheriting, they are passed down explicitly
   to every part that uses them, except the keys. Browsers without @property: plain inheritance, as before. */
@property --dw    { syntax: "<length>"; inherits: false; initial-value: 640px; }
@property --dh    { syntax: "<length>"; inherits: false; initial-value: 420px; }
@property --dlap  { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --dbz   { syntax: "<length>"; inherits: false; initial-value: 9px; }
@property --dchin { syntax: "<length>"; inherits: false; initial-value: 12px; }
@property --dlr   { syntax: "<length>"; inherits: false; initial-value: 16px; }
@property --dsr   { syntax: "<length>"; inherits: false; initial-value: 5px; }
@property --du     { syntax: "<length>"; inherits: false; initial-value: 6.4px; }   /* derived from --dw on .dv: passed down the same way */
@property --dt     { syntax: "<length>"; inherits: false; initial-value: 7px; }
@property --dtb    { syntax: "<length>"; inherits: false; initial-value: 9px; }
.dv__keys * { --du: inherit; }   /* the keys' own fixed unit (8px, set on .dv__keys): constant, so this never restyles */
.dv :not(.dv__keys, .dv__keys *) { --dw: inherit; --dh: inherit; --dlap: inherit; --dbz: inherit; --dchin: inherit; --dlr: inherit; --dsr: inherit; --du: inherit; --dt: inherit; --dtb: inherit; }
.dv {
  --dw: 640px;
  --dh: 420px;
  --du: calc(var(--dw) / 100);
  --dlr: 16px;     /* lid radius    */
  --dsr: 5px;      /* screen radius */
  --dbz: 9px;      /* bezel         */
  --dchin: 12px;   /* extra bottom bezel on the laptop */
  --dt: calc(var(--du) * 0.8 + 2px);   /* lid slab thickness: thin and premium */
  --dtb: calc(var(--du) * 1.2 + 2px);  /* deck thickness      */
  --n: 12;                           /* body layers (SLAB in website.js) */
  position: absolute;
  left: calc(var(--dw) / -2);
  top: calc(var(--dh) / -2);
  width: var(--dw);
  height: var(--dh);
  transform-style: preserve-3d;
}

/* ---- lid ---- */
.dv__lid { position: absolute; inset: 0; transform-origin: 50% 100%; transform-style: preserve-3d; will-change: transform; }
.dv__face {
  position: absolute;
  inset: 0;
  padding: var(--dbz) var(--dbz) calc(var(--dbz) + var(--dchin));
  border-radius: var(--dlr);
  background: #07080a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 1px #30383e, 0 50px 90px -40px var(--dv-shadow);
  transform: translateZ(calc(var(--dt) / 2));
  backface-visibility: hidden;
}
.dv__rear {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--dlr);
  background:
    radial-gradient(60% 50% at 30% 20%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(135deg, var(--dv-body), var(--dv-body2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: rotateY(180deg) translateZ(calc(var(--dt) / 2));
  backface-visibility: hidden;
}
/* body: --n stacked layers between the faces — solid, rounded sides from any angle */
.dv__ly {
  position: absolute;
  inset: 0;
  border-radius: var(--dlr);
  background: color-mix(in srgb, var(--dv-edge), var(--dv-body2) calc(var(--i) / var(--n) * 60%));
  transform: translateZ(calc(var(--dt) * (0.5 - var(--i) / (var(--n) + 1))));
}
.dv__logo { grid-area: 1 / 1; width: 38%; max-width: 220px; height: auto; transition: opacity 0.6s var(--ease-io); }
:root[data-theme="dark"] .dv__logo--light,
:root[data-theme="light"] .dv__logo--dark { opacity: 0; }
.dv__edge { position: absolute; top: var(--dlr); height: calc(100% - var(--dlr) * 2); width: var(--dt); background: var(--dv-edge); }
.dv__edge--l { left: calc(var(--dt) / -2); transform: rotateY(-90deg); }
.dv__edge--r { right: calc(var(--dt) / -2); transform: rotateY(90deg); }

.dv__cam {
  position: absolute;
  top: calc(var(--dbz) * 0.3);
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #1e2428;
  box-shadow: inset 0 0 0 1px #2c353b;
}
.dv__island {
  position: absolute;
  z-index: 3;
  top: calc(var(--dbz) + 8px);
  left: 50%;
  width: 30%;
  height: 22px;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
  opacity: 0;
}
.dv__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--dsr); background: #0d1117; isolation: isolate; }
/* the view is laid out at a "logical" device width and scaled to fit (website.js) */
.dv__view {
  position: absolute;
  left: 0;
  top: 0;
  width: 1000px;
  height: 625px;
  transform-origin: 0 0;
  container: site / inline-size;
  font-family: var(--font-body);
}
.dv__view.is-swap { animation: dv-swap 0.45s var(--ease-out); }
@keyframes dv-swap { from { opacity: 0.2; filter: blur(6px); } to { opacity: 1; filter: none; } }

/* ---- deck (keyboard) — same width as the lid, hinge at the lid's bottom edge ----
   --dlap: 0 = a standalone keyboard (hero): keys only, rounded all round, a recessed key well.
          1 = a laptop deck: speakers, trackpad and palm rest grow in (website.js tweens it). */
.dv { --dlap: 0; }
.dv__base {
  position: absolute;
  top: 100%;
  left: 0;
  width: var(--dw);
  height: calc(var(--dw) * (0.36 + 0.3 * var(--dlap)));
  padding: calc(var(--du) * 2.6) calc(var(--du) * 2.2) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: calc(var(--du) * 2.6 * (1 - var(--dlap))) calc(var(--du) * 2.6 * (1 - var(--dlap))) calc(var(--du) * 2.6) calc(var(--du) * 2.6);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  will-change: transform;
}
/* the deck's top surface: its own element so the body layers (earlier in the DOM) stay under it
   even when the fading deck gets flattened */
.dv__plate {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, calc(0.16 * var(--dlap))), transparent calc(var(--du) * 1.6)),
    linear-gradient(180deg, var(--dv-body) 0%, var(--dv-body2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, calc(0.06 * (1 - var(--dlap))));
}
.dv__base > .dv__ly {
  border-radius: inherit;
  background: color-mix(in srgb, var(--dv-body2), var(--dv-edge) calc(var(--i) / var(--n) * 100%));
  transform: translateZ(calc(var(--dtb) * var(--i) / var(--n) * -1));
}
.dv__deck {
  width: 100%;
  display: flex;
  gap: calc(var(--du) * 1.6 * var(--dlap));
  border-radius: calc(var(--du) * 1.2);
  /* the key well: a dark recessed tray around the keys, only while it's a keyboard */
  box-shadow:
    0 0 0 calc(var(--du) * 0.9) rgba(0, 0, 0, calc(0.24 * (1 - var(--dlap)))),
    0 0 0 calc(var(--du) * 0.9 + 1px) rgba(255, 255, 255, calc(0.05 * (1 - var(--dlap))));
  transform-style: preserve-3d;
  transform: translateZ(1px);   /* lifted off the plate: coplanar 3D layers flicker */
}
.dv__spk {
  flex: 0 0 calc(var(--du) * 5 * var(--dlap));
  opacity: var(--dlap);
  border-radius: calc(var(--du) * 0.6);
  background: radial-gradient(circle, var(--dv-dots) 0 32%, transparent 38%) 0 0 / calc(var(--du) * 0.85) calc(var(--du) * 0.85);
}
/* the keys are laid out once at a fixed unit (--du: 8px) and scaled to the device by a transform
   (website.js syncKeys: transform + margins so the footprint is exactly the real one). Morphing the
   device (--dw, --dlap) then never re-lays-out ~80 keys: that was 20–35 ms a frame mid-scroll. */
.dv__keys { --du: 8px; flex: none; width: calc(8px * 95.6); display: flex; flex-direction: column; gap: calc(var(--du) * 0.62); transform-origin: 0 0; transform-style: preserve-3d; }
.kb__row { display: flex; gap: calc(var(--du) * 0.62); transform-style: preserve-3d; }
.kb__k { flex: var(--k, 1) 1 0; height: calc(var(--du) * 5); transform-style: preserve-3d; }
.kb__row--fn .kb__k { height: calc(var(--du) * 2.9); }
.kb__x { display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.dv__keys:not(.is-3d), .dv__keys:not(.is-3d) .kb__row, .dv__keys:not(.is-3d) .kb__k, .dv__keys:not(.is-3d) .kb__x { transform-style: flat; }   /* block: inline spans ignore transforms */
.kb__cap {
  --glow: 0;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 calc(var(--du) * 0.55) calc(var(--du) * 0.45);
  border-radius: calc(var(--du) * 0.7);
  background: linear-gradient(180deg, #1f2428, #121518);
  box-shadow:
    0 calc(var(--du) * 0.22) 0 #050607,
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 calc(var(--du) * 2.4 * var(--glow)) rgba(253, 95, 7, calc(0.55 * var(--glow)));
  color: color-mix(in srgb, #c9ced2, #fd5f07 calc(var(--glow) * 100%));
  font: 500 calc(var(--du) * 1.05)/1 var(--font-body);
  text-shadow: 0 0 calc(var(--du) * 0.8) rgba(253, 95, 7, calc(0.9 * var(--glow)));
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out), box-shadow 0.45s var(--ease-out), color 0.45s;   /* glow fades out softly */
}
.kb__cap--c { justify-content: center; align-items: center; padding: 0; font-size: calc(var(--du) * 1.5); font-weight: 600; }
.kb__row--fn .kb__cap { font-size: calc(var(--du) * 0.9); align-items: center; }
.kb__cap--accent {
  background: linear-gradient(180deg, #ff7a2e, #e45300);
  box-shadow: 0 calc(var(--du) * 0.22) 0 #8f3400, inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 calc(var(--du) * 2) rgba(253, 95, 7, 0.45);
  color: #fff;
}
.kb__cap.is-down {
  transform: translateY(calc(var(--du) * 0.2));
  box-shadow: 0 0 0 #050607, 0 0 calc(var(--du) * 2.6) rgba(253, 95, 7, 0.65), inset 0 0 0 1px rgba(253, 95, 7, 0.8);
  color: #fd5f07;
  transition-duration: 0.1s;
}
.kb__cap--accent.is-down { color: #fff; background: linear-gradient(180deg, #ff8f4f, #fd5f07); }
.dv__pad {
  transform: translateZ(1px);
  width: 40%;
  flex: 1;
  min-height: 0;
  opacity: var(--dlap);
  margin: calc(var(--du) * 2.2 * var(--dlap)) 0 calc(var(--du) * 2.4);
  border-radius: calc(var(--du) * 1.3);
  background: var(--dv-pad);
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.16), inset 0 1px 2px rgba(0, 0, 0, 0.08);
}
.dv__edge-f {
  position: absolute;
  left: calc(var(--du) * 1.2);
  right: calc(var(--du) * 1.2);
  top: 100%;
  height: var(--dtb);
  border-radius: 0 0 calc(var(--du) * 1.4) calc(var(--du) * 1.4);
  background: linear-gradient(180deg, var(--dv-edge), var(--dv-body2));
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
}


.dv__glyphs { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.dv__glyphs span {
  position: absolute;
  left: 50%;
  top: 100%;
  font: 600 clamp(12px, calc(var(--dw) * 0.03), 22px)/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(253, 95, 7, 0.6);
  white-space: nowrap;
  opacity: 0;
}

/* ---- care orbit (around the phone) ---- */
.orb { --R: 160px; position: absolute; left: 0; top: 0; transform-style: preserve-3d; visibility: hidden; }
.orb__ring {
  position: absolute;
  left: calc(var(--R) * -1);
  top: calc(var(--R) * -1);
  width: calc(var(--R) * 2);
  height: calc(var(--R) * 2);
  border-radius: 50%;
  border: 1.5px dashed var(--line2);
  transform: rotateX(70deg);
}
.orb__node {
  position: absolute;
  left: -26px;
  top: -26px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line2), 0 14px 30px -12px var(--dv-shadow);
  color: var(--text);
  font: 400 22px/1 var(--font-body);
  transition: background-color 0.45s var(--ease-io), color 0.45s, box-shadow 0.45s;
  will-change: transform;
}
.orb__node.is-on { background: var(--accent); color: #fff; box-shadow: 0 0 0 9px var(--accent-soft), 0 18px 40px -12px rgba(253, 95, 7, 0.7); }

/* --------------------------------------------------------------------------
   7. Code editor (first thing on the screen)
   -------------------------------------------------------------------------- */
.cd { position: absolute; inset: 0; background: #0d1117; color: #c9d1d9; }
.cd__bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; background: #161b22; border-bottom: 1px solid #21262d; }
.cd__bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.cd__bar i:nth-child(2) { background: #febc2e; }
.cd__bar i:nth-child(3) { background: #28c840; }
.cd__bar span { margin-left: 18px; padding: 8px 16px; border-radius: 6px 6px 0 0; background: #0d1117; font: 500 15px/1 ui-monospace, Consolas, monospace; color: #e6edf3; }
.cd__body { padding: 26px 0; }
.cd__ln { display: flex; margin: 0; font: 400 21px/1.75 ui-monospace, "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
.cd__ln em { flex: 0 0 64px; padding-right: 22px; text-align: right; font-style: normal; color: #484f58; }
.cd__ln span { clip-path: inset(0 100% 0 0); }
.cd__ln u { text-decoration: none; color: #7ee787; }
.cd__ln s { text-decoration: none; color: #79c0ff; }
.cd__ln q { quotes: none; color: #a5d6ff; }
.cd__ln b { font-weight: 400; color: #ffa657; }
.cd__ln i { font-style: normal; color: #8b949e; }

/* --------------------------------------------------------------------------
   8. Site mockups — laid out at the logical width, mobile layout via
      @container site (max-width: 600px)
   -------------------------------------------------------------------------- */
.st {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #10151a;
  clip-path: inset(100% 0 0 0);
}
.st p { margin: 0; }
.st__nav { display: flex; align-items: center; gap: 28px; height: 76px; padding: 0 44px; flex-shrink: 0; }
.st__logo { display: inline-flex; align-items: center; gap: 10px; font: 800 22px/1 var(--font-body); letter-spacing: -0.02em; }
.st__logo i { width: 24px; height: 24px; border-radius: 7px; background: currentColor; }
.st__links { display: flex; gap: 28px; margin-left: auto; font: 500 16px/1 var(--font-body); opacity: 0.7; }
.st__btn { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px; background: #10151a; color: #fff; font: 600 15px/1 var(--font-body); white-space: nowrap; }
.st__btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.st__burger { display: none; flex-direction: column; gap: 6px; margin-left: auto; }
.st__burger i { width: 26px; height: 2.5px; border-radius: 2px; background: currentColor; }
.st__tag { font: 700 13px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; }
.st__p { font: 400 18px/1.5 var(--font-body); opacity: 0.68; }
.st__row { display: flex; gap: 12px; }

/* 01 · business */
.st--biz { background: #f5f7fb; color: #0f2a4a; }
.st--biz .st__logo i { background: #0f62fe; }
.st--biz .st__btn { background: #0f62fe; }
.st--biz .st__btn--ghost { background: transparent; color: #0f2a4a; }
.biz__hero { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding: 10px 44px 0; }
.biz__copy { display: grid; gap: 18px; }
.biz__copy .st__tag { color: #0f62fe; }
.biz__h { font: 800 50px/1.04 var(--font-body); letter-spacing: -0.035em; }
.biz__art {
  position: relative;
  height: 360px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, transparent 55%, rgba(15, 42, 74, 0.35)),
    linear-gradient(90deg, transparent 0 18%, #c9d8f5 18% 34%, transparent 34% 40%, #a9c1ef 40% 62%, transparent 62% 68%, #8fb0ec 68% 86%, transparent 86%) bottom / 100% 70% no-repeat,
    linear-gradient(160deg, #dfe9fb, #b8cdf4);
}
.biz__card { position: absolute; left: -26px; bottom: 34px; display: grid; gap: 2px; padding: 16px 20px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -16px rgba(15, 42, 74, 0.35); font: 500 14px/1.2 var(--font-body); color: #5a6b80; }
.biz__card b { font: 800 30px/1 var(--font-body); color: #0f9d58; letter-spacing: -0.02em; }
.biz__logos { display: flex; justify-content: space-between; padding: 26px 44px 30px; font: 800 20px/1 var(--font-body); letter-spacing: 0.02em; color: #9aa7b8; }

/* 02 · landing */
.st--lp { background: radial-gradient(80% 70% at 50% 0%, #6d3bff 0%, #2a0f6b 55%, #130634 100%); color: #fff; }
.st--lp .st__logo i { background: linear-gradient(135deg, #ff7ac6, #ffb86b); border-radius: 50%; }
.st--lp .st__links { opacity: 0.75; }
.st--lp .st__btn { background: #fff; color: #2a0f6b; }
.lp__hero { flex: 1; display: grid; justify-items: center; align-content: center; gap: 20px; padding: 0 44px 30px; text-align: center; }
.lp__pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font: 600 14px/1 var(--font-body); }
.lp__pill i { width: 8px; height: 8px; border-radius: 50%; background: #5cf2a6; box-shadow: 0 0 10px #5cf2a6; }
.lp__h { font: 900 82px/0.98 var(--font-body); letter-spacing: -0.045em; background: linear-gradient(180deg, #fff 30%, #c9b6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st--lp .st__p { opacity: 0.78; }
.lp__form { display: flex; align-items: center; gap: 10px; width: 520px; max-width: 100%; padding: 8px 8px 8px 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: #8a8f9c; font: 500 16px/1 var(--font-body); }
.lp__form span { flex: 1; text-align: left; }
.lp__form b { padding: 15px 24px; border-radius: 999px; background: linear-gradient(135deg, #ff5fa2, #ff9a4a); color: #fff; font-weight: 700; white-space: nowrap; }
.lp__proof { display: flex; align-items: center; gap: 12px; font: 500 15px/1 var(--font-body); opacity: 0.85; }
.lp__avs { display: flex; }
.lp__avs i { width: 30px; height: 30px; margin-left: -9px; border-radius: 50%; border: 2px solid #2a0f6b; background: linear-gradient(135deg, #ffd29a, #ff8a65); }
.lp__avs i:nth-child(2) { background: linear-gradient(135deg, #9be7ff, #4f8bff); }
.lp__avs i:nth-child(3) { background: linear-gradient(135deg, #c7ffb0, #2bbf7a); }
.lp__avs i:nth-child(4) { background: linear-gradient(135deg, #ffb3e6, #b05cff); }

/* 03 · web app */
.st--app { flex-direction: row; background: #f3f5f8; color: #121826; }
.app__side { flex: 0 0 210px; display: flex; flex-direction: column; gap: 6px; padding: 26px 16px; background: #121826; color: #8b93a7; font: 500 16px/1 var(--font-body); }
.app__side .st__logo { margin: 0 10px 22px; color: #fff; }
.app__side .st__logo i { background: #22c55e; }
.app__side > span:not(.st__logo) { padding: 12px 12px; border-radius: 10px; }
.app__side .is-on { background: rgba(255, 255, 255, 0.08); color: #fff; }
.app__main { flex: 1; display: flex; flex-direction: column; gap: 22px; padding: 26px 32px; min-width: 0; }
.app__top { display: flex; align-items: center; gap: 16px; }
.app__h { margin-right: auto !important; font: 800 30px/1 var(--font-body); letter-spacing: -0.02em; }
.app__search { width: 220px; padding: 12px 16px; border-radius: 10px; background: #fff; color: #9aa1b2; font: 500 15px/1 var(--font-body); box-shadow: inset 0 0 0 1px #e3e7ee; }
.app__av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ffcf9a, #ff7a59); }
.app__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.app__kpi { display: grid; gap: 8px; padding: 20px; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 #e3e7ee; }
.app__kpi p { font: 500 15px/1 var(--font-body); color: #6b7387; }
.app__kpi b { font: 800 34px/1 var(--font-body); letter-spacing: -0.03em; }
.app__kpi em { font: 700 14px/1 var(--font-body); font-style: normal; color: #16a34a; }
.app__chart { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 #e3e7ee; }
.app__chart p { font: 700 17px/1 var(--font-body); }
.app__bars { flex: 1; display: flex; align-items: flex-end; gap: 14px; min-height: 120px; }
.app__bars i { flex: 1; height: calc(var(--v) * 100%); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #4f7bff, #2f55e8); }
.app__bars i:nth-child(6) { background: linear-gradient(180deg, #22c55e, #15a34a); }

/* 04 · portfolio */
.st--pf { background: #f4efe7; color: #1d1a16; }
.pf__logo { font: italic 400 26px/1 Georgia, "Times New Roman", serif; }
.pf__h { padding: 8px 44px 26px; font: 400 66px/1 Georgia, "Times New Roman", serif; letter-spacing: -0.02em; }
.pf__grid { flex: 1; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; grid-template-rows: 1fr 1fr; gap: 12px; padding: 0 44px 34px; min-height: 0; }
.pf__grid i { border-radius: 6px; background: linear-gradient(160deg, #d9a273, #7a3e22); }
.pf__grid i:nth-child(1) { grid-row: span 2; background: linear-gradient(180deg, #f2c48d 0%, #e07a3f 45%, #3b1f2b 100%); }
.pf__grid i:nth-child(2) { background: linear-gradient(160deg, #9bb7c9, #2e4a5f); }
.pf__grid i:nth-child(3) { background: linear-gradient(160deg, #c8d5b9, #55704a); }
.pf__grid i:nth-child(4) { grid-row: span 2; background: linear-gradient(200deg, #e9d6c4 0%, #a57c62 60%, #3d2a22 100%); }
.pf__grid i:nth-child(5) { background: linear-gradient(160deg, #2b2b33, #6b6f80); }
.pf__grid i:nth-child(6) { background: linear-gradient(160deg, #f0d98c, #c98b3b); }

/* 05 · store */
.st--shop { background: #fff; color: #111; }
.st--shop .st__logo { font: 900 26px/1 var(--font-body); letter-spacing: 0.12em; }
.shop__cart { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1 var(--font-body); }
.shop__cart b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fd5f07; color: #fff; font-size: 13px; }
.shop__banner { display: flex; align-items: center; justify-content: space-between; margin: 4px 44px 22px; padding: 26px 32px; border-radius: 18px; background: linear-gradient(110deg, #111 0%, #2b2b2b 60%, #fd5f07 160%); color: #fff; }
.shop__banner p { font: 700 22px/1.15 var(--font-body); }
.shop__banner b { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; color: #ffb27a; }
.shop__banner .st__btn { background: #fff; color: #111; }
.shop__grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 44px 28px; min-height: 0; }
.shop__item { display: flex; flex-direction: column; gap: 6px; font: 600 16px/1.2 var(--font-body); }
.shop__img { flex: 1; min-height: 0; display: grid; place-items: center; border-radius: 14px; background: #f2f2f0; }
.shop__img svg { width: 78%; height: auto; transform: rotate(-8deg); }
.shop__item b { font-size: 18px; }
.shop__item span { margin-top: 4px; padding: 11px 0; border-radius: 10px; background: #111; color: #fff; font: 700 14px/1 var(--font-body); text-align: center; }

/* ---- phone layouts ---- */
@container site (max-width: 600px) {
  .st__nav { height: 104px; padding: 44px 20px 0; gap: 14px; }   /* clears the phone's island */
  .st__links, .st__nav > .st__btn { display: none; }
  .st__burger { display: flex; }
  .st__p { font-size: 16px; }

  .biz__hero { grid-template-columns: 1fr; gap: 22px; padding: 8px 20px 0; align-content: start; }
  .biz__h { font-size: 36px; }
  .biz__art { height: 220px; order: 2; }
  .biz__card { left: 14px; bottom: 14px; }
  .biz__logos { display: none; }

  .lp__hero { padding: 0 20px 30px; gap: 18px; }
  .lp__h { font-size: 54px; }
  .lp__form { flex-direction: column; gap: 10px; padding: 10px; border-radius: 22px; }
  .lp__form span { padding: 8px 6px; text-align: center; }
  .lp__form b { width: 100%; text-align: center; }

  .app__side { display: none; }
  .app__main { padding: 30px 18px 18px; gap: 16px; }
  .app__search { display: none; }
  .app__kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  .app__kpi:nth-child(3) { grid-column: span 2; }
  .app__kpi b { font-size: 28px; }

  .pf__h { padding: 4px 20px 20px; font-size: 44px; }
  .pf__grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); padding: 0 20px 20px; gap: 10px; }
  .pf__grid i:nth-child(1), .pf__grid i:nth-child(4) { grid-row: span 1; }

  .shop__cart { margin-left: auto; }
  .st--shop .st__burger { margin-left: 4px; }
  .shop__banner { margin: 4px 18px 16px; padding: 20px; }
  .shop__banner b { font-size: 32px; }
  .shop__banner .st__btn { display: none; }
  .shop__grid { grid-template-columns: 1fr 1fr; padding: 0 18px 18px; gap: 12px; }
}


/* --------------------------------------------------------------------------
   9. Tablet screen · features app (laid out at ~1000px logical)
   -------------------------------------------------------------------------- */
.fx {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 48px 44px;
  background: radial-gradient(90% 70% at 85% 0%, #1b2a2d 0%, #0b0e10 62%);
  color: #f2f1ed;
  clip-path: inset(100% 0 0 0);
}
.fx p { margin: 0; }
.fx__top { display: flex; align-items: center; justify-content: space-between; font: 600 17px/1 var(--font-body); color: #8d9295; }
.fx__brand { display: inline-flex; align-items: center; gap: 10px; color: #f2f1ed; }
.fx__brand i { width: 22px; height: 22px; border-radius: 6px; background: #fd5f07; }
.fx__meter b { color: #fd5f07; font-weight: 800; }
.fx__h { font: 400 68px/0.95 var(--font-display); text-transform: uppercase; letter-spacing: 0.005em; }
.fx__h span { color: #fd5f07; }
.fx__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 16px; }
.fx__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.7s var(--ease-out), background-color 0.6s var(--ease-io), box-shadow 0.6s var(--ease-io);
}
.fx__tile p { font: 700 23px/1.1 var(--font-body); letter-spacing: -0.01em; }
.fx__tile em { font: 600 15px/1 var(--font-body); font-style: normal; color: #6b7378; transition: color 0.5s; }
.fx__ico {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 66px;
  height: 66px;
  fill: none;
  stroke: #5b6368;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.5s var(--ease-io);
}
.fx__ico * { transform-box: view-box; }
.fx__tile.is-done .fx__ico { stroke: #f2f1ed; }
.fx__tile.is-done em { color: #5cd68a; }
.fx__tile.is-on {
  transform: translateY(-8px) scale(1.04);
  background: rgba(253, 95, 7, 0.12);
  box-shadow: inset 0 0 0 1.5px #fd5f07, 0 30px 60px -24px rgba(253, 95, 7, 0.65);
}
.fx__tile.is-on .fx__ico { stroke: #fd5f07; }
.fx__tile.is-on em { color: #ffb27a; }

/* icon micro-animations (play when the tile becomes active) */
.fx__ico--pen .a { stroke-dasharray: 40; }
.is-on .fx__ico--pen .a { animation: fx-draw 1.1s var(--ease-out) both; }
.is-on .fx__ico--pen .b, .is-on .fx__ico--pen .c { animation: fx-nib 1.1s var(--ease-out) both; transform-origin: 26px 30px; }
.is-on .fx__ico--phone .a { animation: fx-rot 1.4s var(--ease-io) both; transform-origin: 24px 24px; }
.fx__ico--gauge .b { transform-origin: 24px 34px; }
.is-on .fx__ico--gauge .b { animation: fx-needle 1.3s var(--ease-out) both; }
.fx__ico--seo .a { stroke-dasharray: 48; }
.is-on .fx__ico--seo .a { animation: fx-draw2 1.2s var(--ease-out) both; }
.is-on .fx__ico--seo .b { animation: fx-pop 1.2s var(--ease-out) both; transform-origin: 34px 21px; }
.fx__ico--edit .a { transform-origin: 11px 21px; }
.is-on .fx__ico--edit .a { animation: fx-type 1.4s steps(6) both; }
.is-on .fx__ico--edit .b { animation: fx-cursor 1.4s var(--ease-out) both; }
.is-on .fx__ico--lock .a { animation: fx-lock 1s var(--ease-out) both; }
@keyframes fx-draw  { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes fx-draw2 { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
@keyframes fx-nib   { 0% { transform: translate(-14px, 14px); } 100% { transform: none; } }
@keyframes fx-rot   { 0%, 100% { transform: none; } 45%, 60% { transform: rotate(90deg); } }
@keyframes fx-needle { 0% { transform: rotate(-100deg); } 70% { transform: rotate(8deg); } 100% { transform: none; } }
@keyframes fx-pop   { 0%, 50% { transform: scale(0); } 100% { transform: none; } }
@keyframes fx-type  { from { transform: scaleX(0); } to { transform: none; } }
@keyframes fx-cursor { 0% { transform: translate(-16px, -6px); } 100% { transform: none; } }
@keyframes fx-lock  { 0% { transform: translateY(-6px); } 60% { transform: translateY(1px); } 100% { transform: none; } }

/* --------------------------------------------------------------------------
   10. Phone screen · care app (laid out at 390px logical)
   -------------------------------------------------------------------------- */
.cr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 62px 20px 20px;
  background: radial-gradient(120% 60% at 100% 0%, #1b2a2d 0%, #0b0e10 60%);
  color: #f2f1ed;
  visibility: hidden;
}
.cr p { margin: 0; }
.cr__top { display: flex; align-items: center; justify-content: space-between; }
.cr__top p { font: 400 38px/1 var(--font-display); text-transform: uppercase; }
.cr__av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ffb27a, #fd5f07); }
.cr__health { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 22px; background: #171c20; }
.cr__ring { width: 104px; height: 104px; transform: rotate(-90deg); flex-shrink: 0; }
.cr__ring circle { fill: none; stroke: #263039; stroke-width: 10; }
.cr__ring .on { stroke: #fd5f07; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: var(--off, 327); transition: stroke-dashoffset 0.9s var(--ease-out); }
.cr__score { display: grid; gap: 4px; }
.cr__score b { font: 400 54px/0.9 var(--font-display); }
.cr__score span { font: 500 14px/1 var(--font-body); color: #8d9295; }
.cr__pulse { width: 100%; height: 50px; flex-shrink: 0; }
.cr__pulse polyline { fill: none; stroke: #fd5f07; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 420 420; animation: cr-pulse 2.6s linear infinite; vector-effect: non-scaling-stroke; }
@keyframes cr-pulse { from { stroke-dashoffset: 840; } to { stroke-dashoffset: 0; } }
.cr__list { display: grid; gap: 10px; }
.cr__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  background: #171c20;
  opacity: 0.45;
  transition: opacity 0.5s var(--ease-io), background-color 0.5s, box-shadow 0.5s, transform 0.6s var(--ease-out);
}
.cr__ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #263039; font-size: 20px; transition: background-color 0.5s; }
.cr__row p { flex: 1; display: grid; gap: 4px; }
.cr__row b { font: 700 17px/1 var(--font-body); }
.cr__row em { font: 500 14px/1 var(--font-body); font-style: normal; color: #8d9295; }
.cr__tick { position: relative; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px #3a444c; transition: background-color 0.4s, box-shadow 0.4s; }
.cr__tick::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.4s var(--ease-out);
}
.cr__row.is-done { opacity: 1; }
.cr__row.is-done .cr__tick { background: #22c55e; box-shadow: none; }
.cr__row.is-done .cr__tick::after,
.cr__row.is-on .cr__tick::after { transform: rotate(45deg) scale(1); }
.cr__row.is-on { opacity: 1; transform: scale(1.03); background: rgba(253, 95, 7, 0.12); box-shadow: inset 0 0 0 1.5px #fd5f07; }
.cr__row.is-on .cr__ico { background: #fd5f07; }
.cr__row.is-on .cr__tick { background: #fd5f07; box-shadow: none; }

/* --------------------------------------------------------------------------
   11. Small screens — copy moves below the device
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ws-hud { right: 8px; }
  .ws-hud__line { height: 110px; }
  .ws-hud__steps { display: none; }

  .ws-copy {
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: max(24px, env(safe-area-inset-bottom, 0px) + 18px);
    width: auto;
    translate: none;
    text-align: center;
  }
  .ws-copy .ws-eyebrow { justify-content: center; }
  .ws-labels { height: 118px; }
  .ws-label { align-items: center; }
  .ws-label__name { margin-top: 6px; font-size: clamp(2rem, 10vw, 3rem); }
  .ws-label__sub { margin-top: 8px; font-size: 0.95rem; }
  .ws-bars { justify-content: center; margin-top: 12px; }
  .ws-bars i { flex-basis: 26px; }
  .ws-giant { top: 40%; }
  .orb__node { left: -20px; top: -20px; width: 40px; height: 40px; font-size: 17px; }
}

/* phones held upright: the hero stacks (word, keyboard, button); landscape keeps the layered layout */
@media (max-width: 767px) and (orientation: portrait) {
  /* the eyebrow sat at --top - 32px, i.e. tucked under the nav pill: give the copy real room below the bar */
  .ws-hero { --top: calc(var(--nav-top) + var(--nav-h) + clamp(64px, 11svh, 96px)); --a: min(11.5vw, 6.2svh); --big: min(22.6vw, 12.5svh); --side: 5vw; }
  .ws-hero__eyebrow { top: calc(var(--top) - 40px); font-size: 11px; letter-spacing: 0.2em; }
  .ws-hero__foot { flex-direction: column; align-items: stretch; bottom: max(22px, env(safe-area-inset-bottom, 0px) + 16px); }
  .ws-hero__lead { max-width: none; justify-items: stretch; text-align: center; gap: 14px; }
  .ws-hero__lead .cta { width: 100%; }
  .ws-scroll { display: none; }
}

/* narrower desktops: the tracker keeps just its line */
@media (max-width: 1180px) and (min-width: 768px) {
  .ws-hud__steps { display: none; }
  .ws-hud__line { height: 160px; }
}

/* short landscape screens: keep everything inside the stage */
@media (max-height: 640px) and (min-width: 768px) {
  .ws-hero__sub { display: none; }
}