/* ==========================================================================
   Sumant Mourya — Portfolio & App Hub
   Design system + components
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Palette — dark (default) */
  --bg:            #08080b;
  --bg-soft:       #0d0d12;
  --surface:       #101017;
  --surface-2:     #16161f;
  --line:          rgba(255, 255, 255, 0.09);
  --line-strong:   rgba(255, 255, 255, 0.16);
  --text:          #f4f4f7;
  --text-dim:      #a1a1b0;
  --text-faint:    #6b6b7b;

  --accent:        #6d5ef8;
  --accent-2:      #23d5ab;
  --accent-3:      #ff7a45;
  --accent-soft:   rgba(109, 94, 248, 0.14);
  --on-accent:     #ffffff;

  --grad: linear-gradient(120deg, var(--accent) 0%, #8b7cff 40%, var(--accent-2) 100%);
  --grad-text: linear-gradient(100deg, #ffffff 10%, #cfc9ff 45%, var(--accent-2) 90%);

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scale (fluid) */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.2vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-4:  clamp(2.4rem, 1.7rem + 3.4vw, 4.5rem);
  --step-5:  clamp(3rem, 1.6rem + 6.5vw, 8rem);

  /* Space */
  --gap: clamp(1rem, 0.7rem + 1.5vw, 2rem);
  --section-y: clamp(5rem, 3rem + 9vw, 11rem);
  --radius: 18px;
  --radius-lg: 30px;
  --radius-sm: 11px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.7s;

  --maxw: 1240px;
  --nav-h: 72px;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg:            #f7f7f9;
  --bg-soft:       #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f1f1f5;
  --line:          rgba(10, 10, 20, 0.1);
  --line-strong:   rgba(10, 10, 20, 0.2);
  --text:          #0d0d14;
  --text-dim:      #55556a;
  --text-faint:    #86869a;
  --accent:        #5a49f0;
  --accent-2:      #0fae8b;
  --accent-soft:   rgba(90, 73, 240, 0.1);
  /* Starts on colour, not near-black: a gradient that begins at the body text
     colour just reads as un-styled text for the first word. */
  --grad-text: linear-gradient(100deg, #4c3fd6 0%, #7a4fe0 45%, var(--accent-2) 100%);
  color-scheme: light;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 10px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); letter-spacing: -0.02em; }
p { text-wrap: pretty; }

.lead { font-size: var(--step-1); color: var(--text-dim); line-height: 1.6; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The glyphs above are transparent and painted only by the gradient, which is
   confined to the element's own background box. Headings run a line-height at
   or below 1, so descenders (y, g, p) fall outside that box and get painted
   with nothing — they read as sliced off flat. Extend the box downward, then
   reclaim the space so layout is unchanged.
   Scoped to headings on purpose: body-size instances like .mail-link have a
   roomy line-height already, and one of them sets its own padding-bottom,
   which would leave the padding and the negative margin mismatched. */
h1 .grad-text,
h2 .grad-text,
h3 .grad-text,
h4 .grad-text {
  padding-bottom: 0.28em;
  margin-bottom: -0.28em;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  padding: 12px 20px; background: var(--accent); color: #fff;
  border-radius: 10px; transform: translateY(-200%);
  transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 4. Layout ---------- */
.wrap {
  width: min(100% - 2.5rem, var(--maxw));
  margin-inline: auto;
}
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.section-head > div { max-width: 62ch; }
.section-head p { margin-top: 1.1rem; color: var(--text-dim); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent-2);
}

.grid { display: grid; gap: var(--gap); }
.divider { height: 1px; background: var(--line); border: 0; }

/* ---------- 5. Background FX ---------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.fx__grain {
  position: absolute; inset: -200%;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-4%,-4%); }
  30% { transform: translate(2%,-6%); }
  50% { transform: translate(-3%,3%); }
  70% { transform: translate(4%,2%); }
  90% { transform: translate(-2%,5%); }
}

.fx__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  opacity: 0.5;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.34;
  will-change: transform;
}
.blob--1 { width: 46vw; height: 46vw; background: var(--accent);   top: -14vw; left: -10vw; animation: drift1 22s var(--ease-in-out) infinite; }
.blob--2 { width: 38vw; height: 38vw; background: var(--accent-2); top: 22vh;  right: -12vw; animation: drift2 26s var(--ease-in-out) infinite; }
.blob--3 { width: 30vw; height: 30vw; background: var(--accent-3); bottom: -12vw; left: 28vw; opacity: 0.18; animation: drift1 30s var(--ease-in-out) infinite reverse; }
[data-theme="light"] .blob { opacity: 0.2; filter: blur(72px); }

@keyframes drift1 {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(6vw, 5vh, 0) scale(1.14); }
}
@keyframes drift2 {
  0%,100% { transform: translate3d(0,0,0) scale(1.06); }
  50%     { transform: translate3d(-7vw, -4vh, 0) scale(0.92); }
}

/* Scroll progress */
.progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad);
}

/* ---------- 6. Preloader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner { text-align: center; }
.loader__mark {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 600; letter-spacing: -0.04em;
  margin-bottom: 1.4rem;
}
.loader__bar {
  width: min(240px, 50vw); height: 2px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.loader__fill {
  height: 100%; width: 0%;
  background: var(--grad);
  transition: width 0.25s linear;
}
.loader__num {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem; color: var(--text-faint);
}

/* ---------- 7. Cursor ---------- */
.cursor, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 400;
  pointer-events: none; border-radius: 50%;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.3s;
}
.cursor { width: 7px; height: 7px; background: #fff; margin: -3.5px 0 0 -3.5px; }
.cursor-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(255,255,255,0.55);
  transition: opacity 0.3s, width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), background-color 0.35s var(--ease);
}
body.cursor-ready .cursor,
body.cursor-ready .cursor-ring { opacity: 1; }
body.cursor-hover .cursor-ring {
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
  background: rgba(255,255,255,0.14);
  border-color: transparent;
}
body.cursor-hover .cursor { opacity: 0; }

/* ---------- 8. Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: transform 0.45s var(--ease), background-color 0.4s, backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--line);
}
.nav.is-hidden { transform: translateY(-101%); }

.nav__inner {
  width: min(100% - 2.5rem, var(--maxw));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap);
}

.brand {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; letter-spacing: -0.02em;
}
.brand__dot {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--grad);
  display: grid; place-items: center;
  font-size: 0.72rem; color: #fff; font-weight: 700;
  box-shadow: 0 0 0 1px var(--line-strong), 0 6px 18px -6px var(--accent);
  transition: transform 0.5s var(--ease);
}
.brand:hover .brand__dot { transform: rotate(-12deg) scale(1.08); }

.nav__links { display: flex; align-items: center; gap: 0.25rem; }
.nav__link {
  position: relative;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  color: var(--text-dim);
  border-radius: 99px;
  transition: color 0.3s;
}
.nav__link::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 99px; background: var(--surface-2);
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  z-index: -1;
}
.nav__link:hover, .nav__link.is-active { color: var(--text); }
.nav__link:hover::after, .nav__link.is-active::after { opacity: 1; transform: scale(1); }

.nav__actions { display: flex; align-items: center; gap: 0.5rem; }

.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--line);
  color: var(--text-dim); background: var(--surface);
  transition: color 0.3s, border-color 0.3s, transform 0.3s var(--ease), background-color 0.3s;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-2px); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-btn .sun { display: none; }
[data-theme="light"] .theme-btn .sun { display: block; }
[data-theme="light"] .theme-btn .moon { display: none; }

.nav__burger { display: none; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 290;
  background: var(--bg);
  padding: calc(var(--nav-h) + 3rem) 2rem 2rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  clip-path: circle(0% at calc(100% - 44px) 36px);
  visibility: hidden;
  pointer-events: none;
  /* CLOSING. `visibility` cannot tween, so it has to be held until the circle
     has finished shrinking — without the delay it flips instantly and the
     close looks like the panel simply disappears. */
  transition:
    clip-path 0.6s var(--ease),
    visibility 0s linear 0.6s,
    pointer-events 0s linear 0.6s;
}
.drawer.is-open {
  clip-path: circle(150% at calc(100% - 44px) 36px);
  visibility: visible;
  pointer-events: auto;
  /* OPENING. Both switch on immediately so the circle is visible as it grows. */
  transition:
    clip-path 0.7s var(--ease),
    visibility 0s,
    pointer-events 0s;
}

.drawer__link {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 600; letter-spacing: -0.03em;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(24px);
  /* CLOSING: bottom item leaves first, mirroring the open order. */
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), color 0.3s;
  transition-delay: calc((var(--n, 5) - 1 - var(--i)) * 0.04s);
}
.drawer.is-open .drawer__link {
  opacity: 1; transform: none;
  /* OPENING: top item arrives first. */
  transition-duration: 0.5s;
  transition-delay: calc(0.1s + var(--i) * 0.06s);
}
.drawer__link:hover { color: var(--accent-2); }
.drawer__foot { margin-top: auto; padding-top: 2rem; }

/* ---------- 9. Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  padding: 0.92rem 1.6rem;
  border-radius: 99px;
  font-size: 0.94rem; font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease), border-color 0.3s, color 0.3s, box-shadow 0.4s var(--ease);
  will-change: transform;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--grad);
  color: #fff;
  background-size: 180% 180%;
  box-shadow: 0 10px 34px -14px var(--accent);
}
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--accent-2), var(--accent));
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.btn--primary:hover { box-shadow: 0 16px 44px -12px var(--accent); }
.btn--primary:hover::before { opacity: 1; }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(8px);
}
.btn--ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--surface-2);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.btn--ghost:hover { border-color: var(--line-strong); }
.btn--ghost:hover::before { transform: translateY(0); }

.btn--sm { padding: 0.62rem 1.15rem; font-size: 0.85rem; }
.btn--block { width: 100%; }

/* Store badge button */
.store-btn {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.7rem 1.35rem 0.7rem 1.1rem;
  border-radius: 14px;
  background: var(--text);
  color: var(--bg);
  transition: transform 0.35s var(--ease), box-shadow 0.4s var(--ease), opacity 0.3s;
}
.store-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.8); }
.store-btn svg { width: 26px; height: 26px; flex: none; }
.store-btn span { display: block; line-height: 1.2; }
.store-btn .small { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.65; }
.store-btn .big { font-size: 1rem; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.02em; }
.store-btn.is-disabled { opacity: 0.42; pointer-events: none; }

/* Text link with arrow */
.tlink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--text); font-weight: 500;
  position: relative;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 0.5s var(--ease);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.tlink svg { width: 15px; height: 15px; transition: transform 0.4s var(--ease); }
.tlink:hover svg { transform: translate(3px, -3px); }

/* ---------- 10. Chips / pills / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 0.78rem;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  white-space: nowrap;
}
.pill--live { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); }
.pill--soon { color: var(--accent-3); border-color: color-mix(in srgb, var(--accent-3) 40%, transparent); }

.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.pill--live .dot { animation: pulse 2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 60%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- 11. Cards ---------- */
.card {
  position: relative;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease), background-color 0.4s;
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--accent-soft), transparent 60%);
  opacity: 0; transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.card:hover::before { opacity: 1; }

/* ---------- 12. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 4rem;
  z-index: 1;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
  width: 100%;
}

.hero__status {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 1rem 0.45rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(8px);
  font-size: 0.82rem; color: var(--text-dim);
  margin-bottom: 1.8rem;
}
.hero__status .dot { color: var(--accent-2); animation: pulse 2s infinite; }

.hero h1 {
  font-size: var(--step-5);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin-bottom: 1.6rem;
}
/* No overflow mask here. The hero lines reveal by fading, not by sliding up,
   so a mask clips nothing useful — it only cut the descenders off. */
.hero h1 .line { display: block; }
.hero h1 .line > span { display: block; }

.hero__role {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 0.7rem + 0.5vw, 1rem);
  color: var(--text-dim);
  margin-bottom: 1.6rem;
  min-height: 1.6em;
}
.hero__role .rotator { color: var(--accent-2); }
.hero__role .caret {
  display: inline-block; width: 8px; height: 1.05em;
  background: var(--accent-2); translate: 0 2px;
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

.hero__desc { max-width: 52ch; margin-bottom: 2.4rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

.hero__scroll {
  position: absolute; bottom: 2.2rem; left: 50%;
  translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint);
}
.hero__scroll::after {
  content: ""; width: 1px; height: 44px;
  background: linear-gradient(var(--text-faint), transparent);
  animation: scrollHint 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollHint {
  0%   { transform: scaleY(0); transform-origin: 0 0; }
  45%  { transform: scaleY(1); transform-origin: 0 0; }
  55%  { transform: scaleY(1); transform-origin: 0 100%; }
  100% { transform: scaleY(0); transform-origin: 0 100%; }
}

/* ---------- 13. Phone mockup ---------- */
.phone {
  position: relative;
  width: min(290px, 78vw);
  aspect-ratio: 9 / 19.5;
  margin-inline: auto;
  border-radius: 44px;
  padding: 10px;
  background: linear-gradient(160deg, #26262e, #0c0c11 40%, #1c1c24);
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.09),
    0 50px 90px -34px rgba(0,0,0,0.9),
    0 0 90px -40px var(--accent);
  transform-style: preserve-3d;
}
.phone::after {
  content: ""; position: absolute;
  top: 16px; left: 50%; translate: -50% 0;
  width: 78px; height: 22px; border-radius: 99px;
  background: #0a0a0d; z-index: 4;
}
.phone__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 35px;
  overflow: hidden;
  background: #0b0b10;
  display: flex; flex-direction: column;
}
.phone__glare {
  position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(115deg, rgba(255,255,255,0.13) 0%, transparent 38%, transparent 62%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}

.ui-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 20px 6px;
  font-size: 10px; font-weight: 600; color: #fff;
  font-family: var(--font);
}
.ui-status .icons { display: flex; gap: 4px; opacity: 0.85; }
.ui-status .icons i {
  width: 11px; height: 8px; border-radius: 1.5px;
  background: currentColor; display: block;
}

/* — Recline call screen — */
.ui-call {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 22px 20px 26px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(109,94,248,0.5), transparent 62%),
    linear-gradient(180deg, #14121f, #08080c);
  color: #fff;
  text-align: center;
}
.ui-call__label {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 22px;
}
.ui-call__avatar {
  width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 30px; font-weight: 600;
  margin-bottom: 16px;
  box-shadow: 0 0 0 8px rgba(255,255,255,0.05), 0 0 44px -8px var(--accent);
  animation: ring 2.6s var(--ease-in-out) infinite;
}
@keyframes ring {
  0%,100% { box-shadow: 0 0 0 8px rgba(255,255,255,0.05), 0 0 44px -8px var(--accent); }
  50%     { box-shadow: 0 0 0 16px rgba(255,255,255,0.02), 0 0 60px -6px var(--accent); }
}
.ui-call__name { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.ui-call__num { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 3px; }
.ui-call__timer {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--accent-2); margin-top: 10px;
}
.ui-call__actions {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px 8px; margin: auto 0 20px; width: 100%;
}
.ui-act {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 9px; color: rgba(255,255,255,0.65);
}
.ui-act__ic {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.09);
  display: grid; place-items: center;
}
.ui-act__ic svg { width: 17px; height: 17px; color: #fff; }
.ui-act--on .ui-act__ic { background: #fff; }
.ui-act--on .ui-act__ic svg { color: #111; }
.ui-call__end {
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(160deg, #ff5b5b, #d61f3d);
  display: grid; place-items: center;
  box-shadow: 0 12px 30px -10px #d61f3d;
}
.ui-call__end svg { width: 24px; height: 24px; color: #fff; transform: rotate(134deg); }

/* — DealNest feed screen — */
.ui-feed {
  flex: 1; padding: 8px 16px 18px;
  background: linear-gradient(180deg, #0d1512, #08080c 55%);
  color: #fff; overflow: hidden;
}
.ui-feed__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.ui-feed__loc { font-size: 9px; color: rgba(255,255,255,0.5); }
.ui-feed__city { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.ui-search {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 8px 10px;
  font-size: 10px; color: rgba(255,255,255,0.45);
  margin-bottom: 12px;
}
.ui-search svg { width: 12px; height: 12px; }
.ui-map {
  height: 92px; border-radius: 12px; margin-bottom: 12px;
  background:
    radial-gradient(circle at 30% 40%, rgba(35,213,171,0.35), transparent 40%),
    radial-gradient(circle at 72% 66%, rgba(109,94,248,0.35), transparent 42%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 17px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 17px),
    #0b1a17;
  border: 1px solid rgba(255,255,255,0.07);
  position: relative;
}
.ui-map__pin {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 0 3px rgba(35,213,171,0.2);
  animation: pulse 2s infinite;
}
.ui-map__pin:nth-child(1) { top: 30%; left: 28%; }
.ui-map__pin:nth-child(2) { top: 60%; left: 68%; background: var(--accent); animation-delay: 0.5s; }
.ui-map__pin:nth-child(3) { top: 46%; left: 50%; background: var(--accent-3); animation-delay: 1s; }
.ui-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px; border-radius: 11px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 8px;
}
.ui-row__img {
  width: 34px; height: 34px; border-radius: 8px; flex: none;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
}
.ui-row:nth-child(even) .ui-row__img { background: linear-gradient(140deg, var(--accent-3), var(--accent)); }
.ui-row__t { font-size: 10.5px; font-weight: 600; }
.ui-row__s { font-size: 8.5px; color: rgba(255,255,255,0.45); margin-top: 1px; }
.ui-row__tag {
  margin-left: auto; font-size: 8.5px; font-weight: 600;
  color: var(--accent-2);
  background: rgba(35,213,171,0.12);
  padding: 3px 7px; border-radius: 99px;
}

/* ---------- 14. Marquee ---------- */
.marquee {
  position: relative;
  border-block: 1px solid var(--line);
  padding-block: 1.5rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  background: color-mix(in srgb, var(--surface) 40%, transparent);
}
.marquee__track {
  display: flex; width: max-content;
  animation: slide 60s linear infinite;
}
/* Deliberately no pause-on-hover: the cursor crossing the strip should not
   stop it dead, which reads as the page freezing. */
.marquee__group {
  display: flex; align-items: center; gap: 3.2rem;
  padding-right: 3.2rem;
}
.marquee__item {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.35rem);
  font-weight: 500; letter-spacing: -0.02em;
  color: var(--text-faint);
  white-space: nowrap;
  transition: color 0.3s;
}
.marquee__item:hover { color: var(--text); }
.marquee__item::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-2); flex: none;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 15. About ---------- */
.about__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.about__visual { position: relative; }
.avatar {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 30%, var(--accent-soft), transparent 62%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
}
.avatar__initials {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 600; letter-spacing: -0.05em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.avatar__ring {
  position: absolute; inset: 12%;
  border: 1px dashed var(--line-strong);
  border-radius: 50%;
  animation: spin 26s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.badge-float {
  position: absolute;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px);
  font-size: 0.82rem;
  box-shadow: 0 20px 40px -22px rgba(0,0,0,0.9);
  animation: float 5s var(--ease-in-out) infinite;
}
.badge-float--1 { top: 12%; right: -14%; }
.badge-float--2 { bottom: 14%; left: -12%; animation-delay: 1.6s; }
.badge-float b { font-family: var(--font-display); }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-11px); }
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 2.5rem;
}
.stat { background: var(--bg); padding: 1.4rem 1.2rem; }
.stat__n {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: 1;
}
.stat__l {
  font-size: 0.78rem; color: var(--text-faint);
  margin-top: 0.5rem; letter-spacing: 0.02em;
}

.about__body p + p { margin-top: 1.1rem; }
.about__body { color: var(--text-dim); font-size: 1.02rem; }
.about__body strong { color: var(--text); font-weight: 600; }

/* ---------- 16. App showcase ---------- */
.apps { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.app-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  padding: clamp(1.8rem, 1rem + 3vw, 3.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  overflow: hidden;
  transition: border-color 0.5s var(--ease);
}
.app-feature:hover { border-color: var(--line-strong); }
.app-feature::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 90% at 82% 50%, var(--accent-soft), transparent 70%);
  opacity: 0.9;
}
.app-feature--alt { grid-template-columns: 0.78fr 1fr; }
.app-feature--alt .app-feature__media { order: -1; }
.app-feature--alt::before { background: radial-gradient(70% 90% at 18% 50%, rgba(35,213,171,0.13), transparent 70%); }

.app-feature__head {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.4rem;
}
.app-icon {
  width: 62px; height: 62px; border-radius: 17px;
  display: grid; place-items: center; flex: none;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.13);
  transition: transform 0.5s var(--ease);
}
.app-feature:hover .app-icon { transform: rotate(-8deg) scale(1.06); }
.app-icon svg { width: 34px; height: 34px; }
.app-icon--recline  { background: linear-gradient(150deg, #7b6bff, #4a2fd6); }
.app-icon--dealnest { background: linear-gradient(150deg, #2ee6b6, #0e9c7c); }

.app-feature h3 { margin-bottom: 0.3rem; }
.app-feature__tag { font-size: 0.86rem; color: var(--text-faint); }
.app-feature__desc { color: var(--text-dim); margin-bottom: 1.6rem; max-width: 46ch; }

.feat-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem 1.4rem;
  margin-bottom: 2rem;
}
.feat-list li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.9rem; color: var(--text-dim);
}
.feat-list svg { width: 15px; height: 15px; color: var(--accent-2); flex: none; margin-top: 4px; }

.app-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

.app-links {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-top: 1.5rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
}
.app-links a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--text-faint);
  transition: color 0.3s;
}
.app-links a:hover { color: var(--accent-2); }
.app-links svg { width: 14px; height: 14px; }

.app-feature__media { perspective: 1400px; }

/* ---------- 17. Project grid (lab) ---------- */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.2rem;
}
.lab-card { display: flex; flex-direction: column; min-height: 240px; }
.lab-card__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.3rem;
}
.lab-card__ic {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--accent-2);
}
.lab-card__ic svg { width: 20px; height: 20px; }
.lab-card h4 { margin-bottom: 0.5rem; }
.lab-card p { font-size: 0.9rem; color: var(--text-dim); }
.lab-card__stack {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: auto; padding-top: 1.4rem;
}
.tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-faint);
}

/* ---------- 18. Process / timeline ---------- */
.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  border-top: 1px solid var(--line);
  transition: background-color 0.4s;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step:hover { background: color-mix(in srgb, var(--surface) 45%, transparent); }
.step__n {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-2);
  padding-top: 0.35rem;
}
.step h4 { margin-bottom: 0.6rem; }
.step p { color: var(--text-dim); max-width: 58ch; font-size: 0.95rem; }

/* ---------- 19. Contact ---------- */
.contact {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 2rem + 6vw, 6.5rem) clamp(1.5rem, 4vw, 4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 120% at 50% 0%, var(--accent-soft), transparent 65%),
    color-mix(in srgb, var(--surface) 88%, transparent);
  overflow: hidden;
}
.contact h2 { margin-bottom: 1.2rem; }
.contact p { max-width: 50ch; margin: 0 auto 2.6rem; color: var(--text-dim); }

.mail-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.8rem + 2.4vw, 2.6rem);
  font-weight: 600; letter-spacing: -0.035em;
  word-break: break-word;
  position: relative;
  padding-bottom: 0.1em;
}
.mail-link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--grad);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.6s var(--ease);
}
.mail-link:hover::after { transform: scaleX(1); }

.socials {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.7rem; margin-top: 2.8rem;
}

.copy-toast {
  position: fixed; bottom: 28px; left: 50%; translate: -50% 0;
  z-index: 350;
  padding: 0.75rem 1.3rem; border-radius: 12px;
  background: var(--text); color: var(--bg);
  font-size: 0.86rem; font-weight: 500;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.8);
}
.copy-toast.is-shown { opacity: 1; transform: translateY(0); }

/* ---------- 20. Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 2rem;
  margin-top: var(--section-y);
  position: relative; z-index: 1;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: 3rem;
}
.footer__brand p {
  margin-top: 1rem; max-width: 34ch;
  font-size: 0.9rem; color: var(--text-faint);
}
.footer h5 {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 1.1rem; font-weight: 500;
}
.footer__list li + li { margin-top: 0.6rem; }
.footer__list a {
  font-size: 0.9rem; color: var(--text-dim);
  transition: color 0.3s, padding-left 0.3s var(--ease);
}
.footer__list a:hover { color: var(--text); padding-left: 5px; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center;
  padding-top: 2rem; border-top: 1px solid var(--line);
  font-size: 0.82rem; color: var(--text-faint);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer__bottom a:hover { color: var(--text); }

/* ---------- 21. Sub-page shells ---------- */
.page-hero {
  padding-top: calc(var(--nav-h) + clamp(3rem, 2rem + 5vw, 6rem));
  padding-bottom: clamp(2rem, 1.5rem + 3vw, 4rem);
  position: relative; z-index: 1;
}
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.76rem;
  color: var(--text-faint); margin-bottom: 1.8rem;
}
.crumbs a { transition: color 0.3s; }
.crumbs a:hover { color: var(--accent-2); }
.crumbs span { opacity: 0.4; }

/* Legal / prose */
.prose {
  max-width: 74ch;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.78;
}
.prose h2 {
  font-size: var(--step-2);
  color: var(--text);
  margin-top: 3.2rem; margin-bottom: 1rem;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.prose h3 {
  font-size: var(--step-1);
  color: var(--text);
  margin-top: 2.2rem; margin-bottom: 0.8rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: 1.1rem; }
.prose ul { margin: 1.1rem 0; display: grid; gap: 0.7rem; }
.prose ul li {
  position: relative; padding-left: 1.5rem;
}
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
}
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); }
.prose code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--surface-2); padding: 0.15em 0.45em;
  border-radius: 5px; border: 1px solid var(--line);
  color: var(--text);
}
.prose table {
  width: 100%; border-collapse: collapse;
  margin: 1.6rem 0; font-size: 0.92rem;
}
.prose th, .prose td {
  text-align: left; padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th { color: var(--text); font-weight: 600; background: var(--surface-2); }
.prose tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.table-scroll table { margin: 0; }

.legal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.toc {
  position: sticky; top: calc(var(--nav-h) + 24px);
  border-left: 1px solid var(--line);
  padding-left: 1.2rem;
}
.toc h5 {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 1rem; font-weight: 500;
}
.toc li + li { margin-top: 0.55rem; }
.toc a {
  font-size: 0.85rem; color: var(--text-faint);
  transition: color 0.3s, padding-left 0.3s var(--ease);
  display: block;
}
.toc a:hover, .toc a.is-active { color: var(--text); padding-left: 4px; }

.notice {
  display: flex; gap: 1rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent-2) 32%, transparent);
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
  font-size: 0.92rem;
  margin: 1.8rem 0;
  color: var(--text-dim);
}
.notice svg { width: 19px; height: 19px; color: var(--accent-2); flex: none; margin-top: 3px; }
.notice strong { color: var(--text); }

/* ---------- 22. FAQ accordion ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; text-align: left;
  padding: 1.4rem 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.18rem);
  font-weight: 500; letter-spacing: -0.02em;
  color: var(--text);
  transition: color 0.3s;
}
.faq__q:hover { color: var(--accent-2); }
.faq__ic {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  transition: transform 0.45s var(--ease), background-color 0.3s, border-color 0.3s;
  position: relative;
}
.faq__ic::before, .faq__ic::after {
  content: ""; position: absolute;
  background: currentColor; border-radius: 2px;
}
.faq__ic::before { width: 11px; height: 1.5px; }
.faq__ic::after  { width: 1.5px; height: 11px; transition: transform 0.45s var(--ease); }
.faq__item.is-open .faq__ic { transform: rotate(180deg); background: var(--accent-2); border-color: transparent; color: #041a14; }
.faq__item.is-open .faq__ic::after { transform: scaleY(0); }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  color: var(--text-dim); font-size: 0.95rem;
  padding-bottom: 1.5rem; max-width: 70ch;
}

/* ---------- 23. Support cards ---------- */
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem;
}
.support-card { text-align: left; display: flex; flex-direction: column; }
.support-card__ic {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  display: grid; place-items: center;
  color: var(--accent-2);
  margin-bottom: 1.3rem;
}
.support-card__ic svg { width: 21px; height: 21px; }
.support-card h4 { margin-bottom: 0.6rem; }
.support-card p { font-size: 0.92rem; color: var(--text-dim); margin-bottom: 1.4rem; }
.support-card .tlink { margin-top: auto; font-size: 0.9rem; }

/* ---------- 24. 404 ---------- */
.err {
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center; position: relative; z-index: 1;
  padding: var(--nav-h) 1.5rem 3rem;
}
.err__code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 22vw, 16rem);
  font-weight: 700; letter-spacing: -0.06em; line-height: 0.85;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 1rem;
}

/* ---------- 25. Reveal animations ----------
   Scoped to html.js (set by an inline <head> script) so that if JavaScript is
   disabled or main.js fails to run, content renders normally instead of
   staying stuck at opacity 0. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  /* will-change is dropped once .is-in lands (see below) so we don't keep
     dozens of permanently promoted compositor layers alive. */
  transition:
    opacity 0.85s var(--ease) calc(var(--d, 0) * 1ms),
    transform 0.85s var(--ease) calc(var(--d, 0) * 1ms);
}
.js [data-reveal]:not(.is-in) { will-change: opacity, transform; }
.js [data-reveal="left"]  { transform: translateX(-36px); }
.js [data-reveal="right"] { transform: translateX(36px); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Word split for headings.
   inline-block, not block: each word carries its own overflow mask but still
   flows inline, otherwise every word lands on its own line. The negative
   margin cancels the padding that stops descenders being clipped by the mask. */
.split-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.split-word {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--ease) calc(var(--d, 0) * 1ms);
  will-change: transform;
}
.is-in .split-word, .split-ready.is-in .split-word { transform: translateY(0); }

/* ---------- 26. Responsive ---------- */
@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: 1fr; text-align: left; }
  .hero__media { display: none; }
  .app-feature, .app-feature--alt { grid-template-columns: 1fr; }
  .app-feature--alt .app-feature__media { order: 0; }
  .app-feature__media { margin-top: 1rem; }
  .about__grid { grid-template-columns: 1fr; }
  .about__visual { max-width: 340px; }
  .badge-float--1 { right: -6%; }
  .badge-float--2 { left: -4%; }
  .legal-layout { grid-template-columns: 1fr; }
  .toc { position: static; border-left: 0; border-top: 1px solid var(--line); padding: 1.4rem 0 0; }
  .toc ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
  .toc li + li { margin-top: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .step { grid-template-columns: 1fr; gap: 0.5rem; }
  .step__n { padding-top: 0; }
  .hero { min-height: auto; padding-bottom: 6rem; }
  .hero__scroll { display: none; }
  .badge-float { display: none; }
  .cursor, .cursor-ring { display: none; }
  .marquee__track { animation-duration: 24s; }
}

@media (hover: none) {
  .cursor, .cursor-ring { display: none; }
}

/* Phones do the least well with large blurred layers and animated grain, and
   they're most of the traffic for an Android app site — so trim the expensive
   effects rather than shipping a janky scroll. */
@media (max-width: 760px) {
  .blob {
    filter: blur(48px);
    animation: none;
    opacity: 0.26;
  }
  .blob--3 { display: none; }
  .fx__grain { animation: none; inset: 0; }
  .fx__grid { background-size: 52px 52px; }
  .nav.is-stuck {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .hero__status, .btn--ghost { backdrop-filter: none; }
  .phone { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.09), 0 24px 50px -26px rgba(0,0,0,0.9); }
}

/* Devices that can't composite blur cheaply get a solid nav instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-stuck { background: var(--bg); }
}

/* ---------- 27. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .split-word { transform: none !important; }
  .blob { animation: none; }
}

/* ---------- 28. Print ---------- */
@media print {
  .nav, .footer, .fx, .cursor, .cursor-ring, .progress, .loader, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; color: #000; }
}

/* ==========================================================================
   29. v2 — new components
   ========================================================================== */

/* ---------- 29.1 Sub-navigation (in-page, sticky) ---------- */
.subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 60;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-block: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.subnav__inner {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.55rem 0;
  scroll-snap-type: x proximity;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none;
  scroll-snap-align: start;
  padding: 0.55rem 0.95rem;
  border-radius: 99px;
  font-size: 0.86rem;
  color: var(--text-dim);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color 0.25s, background-color 0.25s, border-color 0.25s;
}
.subnav a:hover { color: var(--text); background: var(--surface-2); }
.subnav a.is-active {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line-strong);
}

/* ---------- 29.2 App directory tiles ---------- */
.app-dir {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.1rem;
}
.app-tile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.4s var(--ease);
}
.app-tile:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.app-tile__head { display: flex; align-items: center; gap: 0.9rem; }
.app-tile__ic {
  width: 52px; height: 52px; border-radius: 15px; flex: none;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.app-tile__ic svg { width: 27px; height: 27px; }
.app-tile__name { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; letter-spacing: -0.02em; }
.app-tile__kind { font-size: 0.8rem; color: var(--text-faint); margin-top: 1px; }
.app-tile__desc { font-size: 0.92rem; color: var(--text-dim); flex: 1; }
.app-tile__foot {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  align-items: center;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.83rem;
  position: relative;
  z-index: 2;
}
.app-tile__foot a {
  color: var(--text-faint);
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: color 0.25s;
  min-height: 34px;
}
.app-tile__foot a:hover { color: var(--accent-2); }
.app-tile__foot svg { width: 13px; height: 13px; }

/* App accent variants (shared by tiles and detail headers) */
.ic--recline  { background: linear-gradient(150deg, #7b6bff, #4a2fd6); }
.ic--helper   { background: linear-gradient(150deg, #35c8ff, #1a6fd4); }
.ic--dealnest { background: linear-gradient(150deg, #2ee6b6, #0e9c7c); }
.ic--gymdesk  { background: linear-gradient(150deg, #ff8a4c, #e0452f); }

/* ---------- 29.3 Method tabs ---------- */
.tabs { display: grid; gap: 1.3rem; }
.tabs__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 0.7rem;
}
.tabs__btn {
  text-align: left;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transition: border-color 0.3s, background-color 0.3s, transform 0.3s var(--ease);
  display: flex; gap: 0.8rem; align-items: flex-start;
}
.tabs__btn:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.tabs__btn[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--accent-2) 55%, transparent);
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
}
.tabs__btn svg { width: 19px; height: 19px; color: var(--accent-2); flex: none; margin-top: 2px; }
.tabs__btn b { display: block; font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; letter-spacing: -0.02em; }
.tabs__btn small { display: block; font-size: 0.76rem; color: var(--text-faint); margin-top: 2px; }
.tabs__panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 1rem + 1.6vw, 2.2rem);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.tabs__panel h3 { margin-bottom: 0.5rem; }
.tabs__panel > p { color: var(--text-dim); margin-bottom: 1.5rem; max-width: 68ch; }

/* numbered steps */
.steps-num { display: grid; gap: 0.85rem; counter-reset: sn; margin-bottom: 1.5rem; }
.steps-num li {
  display: flex; gap: 0.9rem; align-items: flex-start;
  font-size: 0.94rem; color: var(--text-dim);
}
.steps-num li::before {
  counter-increment: sn;
  content: counter(sn);
  flex: none;
  width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.72rem;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--accent-2);
  margin-top: 1px;
}

/* ---------- 29.4 Code block ---------- */
.code {
  display: flex; align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.code pre {
  flex: 1; margin: 0; padding: 0.95rem 1.1rem;
  overflow-x: auto;
  font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--text);
  line-height: 1.6;
}
.code button {
  flex: none; width: 48px;
  border-left: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--text-faint);
  transition: color 0.25s, background-color 0.25s;
}
.code button:hover { color: var(--accent-2); background: var(--surface); }
.code button svg { width: 16px; height: 16px; }

/* ---------- 29.5 Flow / pipeline ---------- */
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0.9rem;
}
.flow__node {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.2rem;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.flow__node .mono { color: var(--accent-2); display: block; margin-bottom: 0.6rem; }
.flow__node h4 { font-size: 1rem; margin-bottom: 0.4rem; }
.flow__node p { font-size: 0.87rem; color: var(--text-dim); }

/* ---------- 29.6 Meta / spec strip ---------- */
.meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.meta__cell { background: var(--bg); padding: 1rem 1.1rem; }
.meta__k {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 0.4rem;
}
.meta__v { font-size: 0.92rem; font-weight: 500; }

/* ---------- 29.7 Services / skills ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.1rem;
}
.svc {
  padding: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  transition: border-color 0.35s, transform 0.4s var(--ease);
  display: flex; flex-direction: column;
}
.svc:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.svc__ic {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--accent-2);
  margin-bottom: 1.1rem;
}
.svc__ic svg { width: 21px; height: 21px; }
.svc h4 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.svc p { font-size: 0.89rem; color: var(--text-dim); }
.svc ul { margin-top: 0.9rem; display: grid; gap: 0.4rem; }
.svc li {
  font-size: 0.84rem; color: var(--text-faint);
  padding-left: 0.95rem; position: relative;
}
.svc li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent-2);
}

/* skill chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: 0.84rem;
  color: var(--text-dim);
  transition: border-color 0.25s, color 0.25s;
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip svg { width: 14px; height: 14px; color: var(--accent-2); flex: none; }

/* ---------- 29.8 Banner ---------- */
.banner {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: 0.92rem; color: var(--text-dim);
}
.banner svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--accent-2); }
.banner strong { color: var(--text); }
.banner--warn { border-color: color-mix(in srgb, var(--accent-3) 38%, transparent); background: color-mix(in srgb, var(--accent-3) 8%, transparent); }
.banner--warn svg { color: var(--accent-3); }

/* ---------- 29.9 Generic auto-fit split ---------- */
.split2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: clamp(1.2rem, 1rem + 1.5vw, 2.2rem);
}

/* ---------- 29.10 App detail header ---------- */
.app-head {
  display: flex; align-items: center; gap: 1.1rem;
  margin-bottom: 1.4rem;
}
.app-head__ic {
  width: clamp(58px, 14vw, 78px);
  height: clamp(58px, 14vw, 78px);
  border-radius: 21%;
  flex: none;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 14px 30px -14px rgba(0,0,0,0.8);
}
.app-head__ic svg { width: 48%; height: 48%; }
.app-head h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem); margin-bottom: 0.2rem; }
.app-head__kind { font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem); color: var(--text-faint); }

/* ==========================================================================
   30. Mobile — deliberate phone layer
   ========================================================================== */

@media (max-width: 900px) {
  .subnav { top: calc(var(--nav-h) - 1px); }
}

@media (max-width: 760px) {
  :root {
    --nav-h: 62px;
    --section-y: clamp(3.5rem, 2.4rem + 5vw, 5rem);
    --radius-lg: 22px;
    --radius: 15px;
  }

  .wrap { width: min(100% - 2rem, var(--maxw)); }

  /* Nav: brand shrinks to the mark, actions stay reachable */
  .brand span:last-child { display: none; }
  .brand__dot { width: 32px; height: 32px; border-radius: 10px; font-size: 0.78rem; }
  .nav__actions { gap: 0.4rem; }
  .icon-btn { width: 38px; height: 38px; }

  /* Drawer must scroll when it holds a full menu */
  .drawer {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--nav-h) + 1.6rem) 1.5rem calc(2rem + env(safe-area-inset-bottom));
  }
  .drawer__link { font-size: clamp(1.5rem, 6.5vw, 2rem); padding: 0.62rem 0; }

  /* Hero */
  .hero { padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 3.5rem; }
  .hero h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 0.98; letter-spacing: -0.035em; }
  .hero__desc { margin-bottom: 1.9rem; }
  .hero__status { margin-bottom: 1.4rem; font-size: 0.78rem; }

  /* Full-width, thumb-sized actions */
  .hero__cta, .app-actions { width: 100%; }
  .hero__cta .btn,
  .app-actions .btn,
  .app-actions .store-btn { flex: 1 1 100%; justify-content: center; min-height: 50px; }
  .btn { padding: 0.9rem 1.4rem; }
  .btn--sm { padding: 0.6rem 1rem; min-height: 38px; }
  .socials .btn { flex: 1 1 auto; }

  /* App feature panels */
  .app-feature { padding: 1.35rem 1.15rem; gap: 1.8rem; }
  .app-feature__desc { margin-bottom: 1.2rem; }
  .feat-list { grid-template-columns: 1fr; gap: 0.6rem; margin-bottom: 1.5rem; }
  .app-links { gap: 0.9rem 1.2rem; font-size: 0.84rem; }
  .app-links a { min-height: 34px; }

  /* The phone mockup must never exceed its container */
  .phone { width: min(250px, 100%); border-radius: 34px; padding: 8px; }
  .phone__screen { border-radius: 27px; }
  .phone::after { width: 62px; height: 18px; top: 12px; }

  /* Section heads stack cleanly */
  .section-head { display: block; margin-bottom: 2rem; }
  .section-head > div { max-width: none; }
  .section-head .tlink,
  .section-head .app-actions { margin-top: 1.2rem; }

  /* Cards / grids */
  .app-dir, .svc-grid, .lab-grid, .support-grid { grid-template-columns: 1fr; }
  .tabs__list { grid-template-columns: 1fr 1fr; }
  .tabs__btn { padding: 0.85rem 0.9rem; flex-direction: column; gap: 0.5rem; }
  .flow { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .meta { grid-template-columns: 1fr 1fr; }

  /* Contact block */
  .contact { padding: 2.2rem 1.2rem; }
  .mail-link { font-size: clamp(1rem, 5.2vw, 1.5rem); }
  .socials { gap: 0.5rem; }

  /* Legal pages */
  .prose { font-size: 0.96rem; }
  .prose h2 { margin-top: 2.4rem; }
  .toc a { min-height: 34px; display: flex; align-items: center; }
  .crumbs { font-size: 0.72rem; margin-bottom: 1.2rem; }

  /* Footer */
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .footer__list a { min-height: 34px; display: inline-flex; align-items: center; }

  /* FAQ: bigger targets */
  .faq__q { padding: 1.15rem 0; gap: 1rem; }
}

@media (max-width: 400px) {
  .wrap { width: min(100% - 1.6rem, var(--maxw)); }
  .hero h1 { font-size: clamp(2.2rem, 10.5vw, 2.8rem); }
  .tabs__list { grid-template-columns: 1fr; }
  .stats, .meta { grid-template-columns: 1fr; }
  .app-feature { padding: 1.15rem 1rem; }
  .pill { font-size: 0.74rem; padding: 0.35rem 0.7rem; }
}

/* Respect the notch / home indicator */
@supports (padding: env(safe-area-inset-left)) {
  .wrap, .nav__inner {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   31. v2 — odds and ends the generated markup needs
   ========================================================================== */

/* Theme toggle now wraps its icons in spans */
.theme-btn span { display: grid; place-items: center; }
.theme-btn .sun { display: none; }
[data-theme="light"] .theme-btn .sun { display: grid; }
[data-theme="light"] .theme-btn .moon { display: none; }

/* Breadcrumb current page */
.crumbs__here { color: var(--text); opacity: 1; }

/* GymDesk phone mockup extras */
.ui-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-bottom: 12px;
}
.ui-kpi {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 9px; padding: 8px 6px; text-align: center;
}
.ui-kpi b {
  display: block; font-family: var(--font-display);
  font-size: 13px; font-weight: 600; color: #fff;
}
.ui-kpi span { font-size: 7.5px; color: rgba(255,255,255,0.45); }
.ui-scan {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px; border-radius: 11px; margin-bottom: 10px;
  background: linear-gradient(120deg, rgba(255,138,76,.22), rgba(224,69,47,.16));
  border: 1px solid rgba(255,138,76,.32);
  font-size: 10px; font-weight: 600; color: #ffd0b8;
}
.ui-scan svg { width: 14px; height: 14px; }

/* Recording indicator in the Recline mockup */
.ui-call__timer { letter-spacing: 0.04em; }

/* Feature cards built from .card + .lab-card share the same top spacing */
.card > .lab-card__top { margin-bottom: 0; }

/* Nav CTA hides on the smallest screens — the drawer already has Contact */
@media (max-width: 460px) {
  .nav__cta { display: none; }
}

/* An .app-dir of plain feature cards should keep even heights */
.app-dir > .card { height: 100%; }

/* Subnav sits under the header without a seam */
.subnav + .section,
.subnav + section { padding-top: 0; }

/* Long inline code in prose must not force horizontal scroll */
.prose code, .banner code, .flow__node code {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.banner code, .flow__node code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--surface-2); padding: 0.12em 0.4em;
  border-radius: 5px; border: 1px solid var(--line);
  color: var(--text);
}
.banner a, .flow__node a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

/* Chips row wrapping on the home page */
.chips a.chip { text-decoration: none; }

/* ==========================================================================
   32. v3 — uniform grids, 3D hero, screenshots
   ========================================================================== */

/* ---------- 32.1 App grid: one featured box + a strict 2x2 ---------- */
.app-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.app-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 260px;
  padding: clamp(1.3rem, 1rem + 1.1vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.4s var(--ease), transform 0.45s var(--ease);
}
.app-box::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%),
              var(--accent-soft), transparent 62%);
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.app-box:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.app-box:hover::before { opacity: 1; }

.app-box__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem;
}
.app-box__ic {
  width: 54px; height: 54px; border-radius: 16px; flex: none;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  transition: transform 0.5s var(--ease);
}
.app-box:hover .app-box__ic { transform: rotate(-8deg) scale(1.06); }
.app-box__ic svg { width: 27px; height: 27px; color: #fff; }

.app-box__body { flex: 1; }
.app-box__name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem);
  font-weight: 600; letter-spacing: -0.025em;
  margin-bottom: 0.3rem;
}
.app-box__kind { font-size: 0.84rem; color: var(--text-faint); margin-bottom: 0.9rem; }
.app-box__desc { font-size: 0.93rem; color: var(--text-dim); }

.app-box__cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.9rem; font-weight: 500; color: var(--text);
  margin-top: auto;
}
.app-box__cta svg { width: 15px; height: 15px; transition: transform 0.4s var(--ease); }
.app-box:hover .app-box__cta svg { transform: translateX(4px); }

/* Featured box spans the full row and carries artwork */
.app-box--featured {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  min-height: 330px;
}
.app-box--featured .app-box__col {
  flex: 1;
  display: flex; flex-direction: column; gap: 1.1rem;
  min-width: 0;
}
.app-box--featured .app-box__name { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.app-box--featured .app-box__desc { max-width: 48ch; font-size: 0.98rem; }
.app-box__art {
  flex: none;
  width: clamp(180px, 24vw, 250px);
  pointer-events: none;
  transform: translateY(12%) rotate(-4deg);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
  transition: transform 0.7s var(--ease);
}
.app-box--featured:hover .app-box__art { transform: translateY(8%) rotate(-2deg); }
.app-box__art .phone { width: 100%; }

/* ---------- 32.2 Projects: strict 4-up grid ---------- */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.proj {
  display: flex; flex-direction: column;
  padding: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  transition: border-color 0.35s, transform 0.4s var(--ease);
}
.proj:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.proj__ic {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--accent-2);
  margin-bottom: 1rem;
}
.proj__ic svg { width: 20px; height: 20px; }
.proj__name {
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}
.proj__tag {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 0.8rem;
}
.proj__desc { font-size: 0.87rem; color: var(--text-dim); }

/* Services: strict 4-up too */
.svc-grid { grid-template-columns: repeat(4, 1fr); }

/* ---------- 32.3 Hire cards ---------- */
.hire-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.hire {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  transition: border-color 0.35s, transform 0.4s var(--ease);
}
.hire:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.hire__ic {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent-2);
  margin-bottom: 1.2rem;
}
.hire__ic svg { width: 21px; height: 21px; }
.hire h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); margin-bottom: 0.5rem; }
.hire__lead { color: var(--text-dim); margin-bottom: 1.4rem; font-size: 0.95rem; }
.hire__list { display: grid; gap: 0.65rem; margin-bottom: 1.6rem; }
.hire__list li {
  position: relative; padding-left: 1.5rem;
  font-size: 0.91rem; color: var(--text-dim);
}
.hire__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2);
}
.hire__foot {
  margin-top: auto; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.83rem; color: var(--text-faint);
}

/* ---------- 32.4 3D hero: rotating ring of app icons ---------- */
.stage {
  position: relative;
  height: clamp(320px, 42vw, 460px);
  display: grid; place-items: center;
  perspective: 1100px;
  perspective-origin: 50% 45%;
}
.stage__glow {
  position: absolute; width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 68%);
  filter: blur(28px);
}
.stage__plate {
  position: absolute; bottom: 16%;
  width: 62%; aspect-ratio: 3 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  filter: blur(22px);
  opacity: 0.7;
}

.ring {
  position: relative;
  width: clamp(150px, 19vw, 200px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: ringspin 26s linear infinite;
}
/* The slot places an icon on the cylinder surface. */
.ring__slot {
  position: absolute; inset: 0; margin: auto;
  width: clamp(62px, 8vw, 84px);
  height: clamp(62px, 8vw, 84px);
  transform-style: preserve-3d;
  transform: rotateY(var(--a)) translateZ(clamp(115px, 15vw, 158px));
}
/* The face counter-rotates at exactly the ring's speed, so each icon stays
   square to the viewer instead of turning edge-on as the ring spins. */
.ring__face {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 24%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18),
              0 18px 34px -16px rgba(0, 0, 0, 0.85);
  animation: facespin 26s linear infinite;
}
.ring__face svg { width: 46%; height: 46%; color: #fff; }

@keyframes ringspin {
  from { transform: rotateX(-9deg) rotateY(0deg); }
  to   { transform: rotateX(-9deg) rotateY(360deg); }
}
@keyframes facespin {
  from { transform: rotateY(calc(var(--a) * -1)); }
  to   { transform: rotateY(calc(var(--a) * -1 - 360deg)); }
}
/* The ring keeps turning under the cursor — pausing it looked like a bug. */

/* ---------- 32.5 Screenshot gallery ---------- */
.shots {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gap) * -0.5);
  padding: 0.5rem calc(var(--gap) * 0.5) 1rem;
}
.shots::-webkit-scrollbar { display: none; }
.shots__rail { display: flex; gap: 1rem; width: max-content; }
.shot { scroll-snap-align: center; flex: none; }
.shot__frame {
  width: clamp(190px, 24vw, 260px);
  aspect-ratio: 9 / 19.5;
  border-radius: 30px;
  padding: 7px;
  background: linear-gradient(160deg, #26262e, #0c0c11 40%, #1c1c24);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.09),
              0 34px 64px -30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  transition: transform 0.45s var(--ease);
}
.shot:hover .shot__frame { transform: translateY(-6px); }
.shot__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
  background: var(--surface-2);
}
.shots__cap { margin-top: 0.4rem; font-size: 0.74rem; }

/* ---------- 32.6 MapSync mockup ---------- */
.ui-ride {
  flex: 1; position: relative;
  background: linear-gradient(180deg, #0b1220, #08080c);
  overflow: hidden;
}
.ui-ride__map {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 28%, rgba(96,165,250,.22), transparent 42%),
    radial-gradient(circle at 70% 62%, rgba(74,222,128,.18), transparent 44%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 26px),
    #0a1120;
}
.ui-trail {
  position: absolute; left: 22%; top: 22%;
  width: 56%; height: 42%;
  border-left: 2px dashed rgba(255,255,255,.22);
  border-bottom: 2px dashed rgba(255,255,255,.22);
  border-radius: 0 0 0 40px;
}
.ui-rider {
  position: absolute;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 8px; font-weight: 700; color: #04121f;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.ui-rider--me { background: #fff; top: 20%; left: 20%; animation: pulse 2.2s infinite; }
.ui-rider--a  { background: #4ade80; top: 40%; left: 33%; }
.ui-rider--b  { background: #60a5fa; top: 56%; left: 52%; }
.ui-rider--c  { background: #f472b6; top: 62%; left: 74%; }

.ui-ride__sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(8, 10, 18, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.09);
  border-radius: 16px 16px 0 0;
  padding: 8px 14px 16px;
}
.ui-ride__grip {
  width: 34px; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.22);
  margin: 0 auto 10px;
}
.ui-ride__row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.ui-ride__list { display: grid; gap: 6px; }
.ui-ride__rider {
  display: flex; align-items: center; gap: 7px;
  font-size: 9.5px; color: rgba(255,255,255,.8);
}
.ui-ride__rider em {
  margin-left: auto; font-style: normal;
  color: rgba(255,255,255,.45); font-size: 8.5px;
}
.ui-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ---------- 32.7 Responsive for the new grids ---------- */
@media (max-width: 1100px) {
  .proj-grid, .svc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .proj-grid, .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .app-box--featured { flex-direction: column; align-items: stretch; min-height: 0; }
  .app-box__art {
    width: min(200px, 60%);
    margin-inline: auto;
    transform: none;
  }
  .stage { height: clamp(280px, 46vw, 380px); }
}
@media (max-width: 760px) {
  .app-grid { grid-template-columns: 1fr; }
  .proj-grid, .svc-grid, .hire-grid { grid-template-columns: 1fr; }
  .app-box { min-height: 0; }
  .app-box__art { display: none; }
  .stage { height: 300px; }
  .ring { width: 130px; }
  .ring__slot { width: 58px; height: 58px; transform: rotateY(var(--a)) translateZ(100px); }
  .shot__frame { width: 62vw; max-width: 240px; }
}
@media (max-width: 480px) {
  .proj-grid, .svc-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ring { animation: none; transform: rotateX(-9deg); }
  .ring__face { animation: none; transform: rotateY(calc(var(--a) * -1)); }
}

/* ==========================================================================
   33. v4 — redesigned work sections, timeline, modal, sticky sub-nav
   ========================================================================== */

/* ---------- 33.1 Sub-nav follows the header ----------
   The header hides on scroll-down. The sub-nav is sticky beneath it, so it has
   to give that space back at the same time or it leaves a gap where the header
   used to be. --nav-offset is flipped to 0 by JS whenever the header hides. */
.subnav {
  transition: top 0.45s var(--ease);
}
/* Direct value, not a var() indirection — the custom-property route did not
   re-resolve `top` reliably. Higher specificity also beats the responsive
   `.subnav { top: ... }` overrides regardless of source order. */
body.nav-hidden .subnav,
body.nav-hidden .subnav[data-subnav] { top: 0; }

/* ---------- 33.2 Projects as a ledger, not more squares ---------- */
.proj-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.prow {
  position: relative;
  display: grid;
  grid-template-columns: 46px 46px 1fr 200px;
  align-items: center;
  gap: 1.2rem;
  padding: 1.35rem 1.1rem 1.35rem 0.4rem;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.35s var(--ease), padding-left 0.35s var(--ease);
}
.prow::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.45s var(--ease);
}
.prow:hover {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  padding-left: 1rem;
}
.prow:hover::before { transform: scaleY(1); }

.prow__n {
  font-size: 0.72rem;
  color: var(--text-faint);
  text-align: center;
}
.prow__ic {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--accent-2);
  transition: border-color 0.35s, transform 0.4s var(--ease);
}
.prow:hover .prow__ic { border-color: var(--line-strong); transform: scale(1.06); }
.prow__ic svg { width: 20px; height: 20px; }

.prow__main { min-width: 0; }
.prow__name {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}
.prow__desc { font-size: 0.89rem; color: var(--text-dim); max-width: 74ch; }

.prow__tag {
  justify-self: end;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-2);
  padding: 0.35rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent-2) 26%, transparent);
  border-radius: 99px;
  white-space: nowrap;
}

/* ---------- 33.3 Service cards: indexed, with a top rule ---------- */
.svc {
  position: relative;
  padding-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}
.svc::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  height: 2px; width: 46px;
  background: var(--grad);
  border-radius: 2px;
  transition: width 0.5s var(--ease);
}
.svc:hover::before { width: 100%; }
.svc__index {
  position: absolute;
  top: clamp(1rem, 0.9rem + 0.5vw, 1.4rem);
  right: clamp(1rem, 0.9rem + 0.5vw, 1.4rem);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--line-strong);
  line-height: 1;
  transition: color 0.4s;
}
.svc:hover .svc__index { color: var(--accent-2); }
.svc h4 { padding-right: 2.4rem; }

/* ---------- 33.4 Vertical timeline (recording pipeline) ---------- */
.track {
  position: relative;
  display: grid;
  gap: 0;
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.track::before {
  content: "";
  position: absolute;
  left: 23px; top: 26px; bottom: 26px;
  width: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--accent-2) 55%, transparent));
  border-radius: 2px;
}
.track__step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1.3rem;
  padding-block: 1.1rem;
}
.track__dot {
  position: relative; z-index: 1;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--accent-2);
  transition: border-color 0.35s, transform 0.4s var(--ease), background-color 0.35s;
}
.track__step:hover .track__dot {
  transform: scale(1.08);
  border-color: color-mix(in srgb, var(--accent-2) 60%, transparent);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
}
.track__dot svg { width: 21px; height: 21px; }
.track__body { padding-top: 0.35rem; min-width: 0; }
.track__n {
  display: block;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 0.35rem;
}
.track__body h4 { font-size: 1.08rem; margin-bottom: 0.45rem; }
.track__body p { font-size: 0.92rem; color: var(--text-dim); max-width: 68ch; }

/* ---------- 33.5 Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 320;
  display: grid; place-items: center;
  padding: 1.25rem;
}
.modal[hidden] { display: none !important; }
.modal__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.modal.is-open .modal__scrim { opacity: 1; }

.modal__panel {
  position: relative;
  width: min(430px, 100%);
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  padding: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: var(--bg-soft);
  text-align: center;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.modal.is-open .modal__panel { opacity: 1; transform: none; }

.modal__x {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--text-dim);
  background: var(--surface);
  transition: color 0.3s, border-color 0.3s;
}
.modal__x:hover { color: var(--text); border-color: var(--line-strong); }
.modal__x svg { width: 15px; height: 15px; }

.modal__ic {
  width: 58px; height: 58px; border-radius: 18px;
  display: grid; place-items: center;
  margin: 0 auto 1.1rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.modal__ic svg { width: 27px; height: 27px; color: #fff; }
.modal__panel h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); margin-bottom: 0.8rem; }
.modal__panel > p { font-size: 0.93rem; color: var(--text-dim); margin-bottom: 1.6rem; }
.modal__actions { display: grid; gap: 0.9rem; justify-items: center; }
.modal__meta { margin-top: 1.1rem; font-size: 0.72rem; }

/* ---------- 33.6 Responsive ---------- */
@media (max-width: 900px) {
  .prow { grid-template-columns: 34px 44px 1fr; row-gap: 0.7rem; }
  .prow__tag { grid-column: 3; justify-self: start; }
}
@media (max-width: 620px) {
  .prow {
    grid-template-columns: 44px 1fr;
    align-items: start;
    padding: 1.2rem 0.6rem;
  }
  .prow__n { display: none; }
  .prow__tag { grid-column: 2; }
  .prow__desc { font-size: 0.87rem; }
  .track::before { left: 19px; }
  .track__step { grid-template-columns: 40px 1fr; gap: 1rem; }
  .track__dot { width: 40px; height: 40px; }
  .track__dot svg { width: 18px; height: 18px; }
}

/* ==========================================================================
   34. Real screenshot inside the phone frame
   ========================================================================== */
/* Let the screenshot set the height instead of forcing it into the mock-up's
   9/19.5 box. Phones differ (this one is 9/20), and cover-cropping a real
   screenshot shaves the bottom navigation off. */
.phone--shot { aspect-ratio: auto; }
.phone--shot .phone__screen { height: auto; }
.phone__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
  background: var(--surface-2);
}
/* A real Android screenshot carries its own status bar, so the drawn notch
   would sit on top of it. Drop the notch when showing a photograph of a
   screen rather than the CSS mock-up. */
.phone--shot::after { display: none; }

/* ==========================================================================
   35. Profile picture
   ========================================================================== */
/* The illustration is square and full of detail, so it gets a 1:1 frame
   rather than the initials mark's 4/5 portrait crop, which would slice the
   sides of the scene off. */
.avatar--photo {
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  padding: 0;
}
.avatar--photo picture { display: block; width: 100%; height: 100%; }
.avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: transform 0.7s var(--ease);
}
.about__visual:hover .avatar__img { transform: scale(1.03); }

/* ==========================================================================
   36. Brand mark as a photo
   ========================================================================== */
.brand__dot--photo {
  padding: 0;
  overflow: hidden;
  background: var(--surface-2);
  /* Keep the accent ring and lift the gradient gave it. */
  box-shadow: 0 0 0 1px var(--line-strong), 0 6px 18px -8px var(--accent);
}
.brand__dot--photo picture { display: block; width: 100%; height: 100%; }
.brand__dot--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}