/* =========================================================
   Yamen Alazzam — portfolio
   Desktop hero is laid out on the 1536 × 1024 reference grid:
   every measurement is `N * var(--u)`, where --u = 1px at 1536px.
   ========================================================= */

:root {
  --background: #FAFAF8;
  --surface: #FFFFFF;
  --ink: #080808;
  --text: #3D4558;
  --muted: #697080;
  --blue: #084BFF;
  --blueSoft: #E7EEFF;
  --border: #D6D8DD;
  --grid: #ECECE9;

  --font-body: "Inter", Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius-pill: 999px;

  --u: 1px;
  --hero-p: 1px;
  --tour-p: 0.72px;
  --header-h: 64px;
  --gutter: 16px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-emph: cubic-bezier(.3, 0, 0, 1);
  --ease-spring: cubic-bezier(.22, 1.18, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  container-type: inline-size;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: 1536px; margin: 0 auto; padding: 0 var(--gutter); position: relative; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  background: color-mix(in srgb, var(--background) 0%, transparent);
  transition: background-color .3s, box-shadow .3s, backdrop-filter .3s;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--background) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--grid);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 16px; }

.brand { display: flex; align-items: center; text-decoration: none; min-height: 44px; }
.brand-mark {
  font-family: var(--font-display); font-weight: 900; font-size: 26px; letter-spacing: -.06em; line-height: 1;
}
.brand-dot { color: var(--blue); }
.brand-divider { width: 1px; height: 38px; background: #C9CCD2; margin: 0 30px 0 22px; display: none; }
.brand-text { display: none; flex-direction: column; line-height: 1.25; }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; }
.brand-role { font-size: 14px; color: var(--muted); letter-spacing: .01em; }

.main-nav { display: flex; gap: 4px; margin-left: auto; }
.main-nav a {
  font-size: 15px; font-weight: 500; text-decoration: none; padding: 10px 8px; min-height: 44px;
  display: inline-flex; align-items: center; position: relative;
}
.main-nav a::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
.main-nav a:hover::after { transform: scaleX(1); }

/* Platform segmented control */
.platform-switch {
  position: relative; display: flex; flex: none;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface);
  padding: 0; height: 44px;
}
.platform-switch button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 14px; min-width: 52px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 400; color: var(--ink); transition: color .35s;
}
.platform-switch button[aria-checked="true"] { color: #fff; }
.platform-switch svg { width: 20px; height: 20px; flex: none; }
.switch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.switch-thumb {
  position: absolute; z-index: 0; top: -1px; bottom: -1px; left: -1px; width: calc(50% + 1px);
  border-radius: var(--radius-pill); background: var(--blue);
  box-shadow: 0 6px 16px -6px rgba(8, 75, 255, .55);
  transition: transform .45s var(--ease-spring), width .45s var(--ease-spring);
}
.switch-lead { display: none; }
html[data-platform="ios"] .switch-thumb { transform: translateX(100%); }

/* ---------- Chapter rail ---------- */
.chapter-rail { display: none; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: var(--radius-pill); text-decoration: none; cursor: pointer;
  font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .25s var(--ease-out), background-color .25s, border-color .25s, box-shadow .25s;
  min-height: 44px;
}
.button:active { transform: scale(.97); }
.button-primary { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.button-primary:hover { background: #1d1f25; box-shadow: 0 12px 26px -12px rgba(0,0,0,.5); }
.button-secondary { background: transparent; color: var(--ink); border: 1px solid var(--border); }
.button-secondary:hover { border-color: var(--ink); background: var(--surface); }
.button-small { font-size: 15px; padding: 11px 20px; border: 1px solid var(--border); background: var(--surface); }
.button-small:hover { border-color: var(--ink); }
.button-blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.button-blue:hover { background: #003de0; border-color: #003de0; }
.icon-arrow { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.button:hover .icon-arrow { transform: translate(2px, -2px); }

/* ---------- Hero (mobile-first flow layout) ---------- */
.hero { position: relative; }
.hero-inner { padding-top: 28px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 36px; }
.hero-deco { display: none; }

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  background: var(--blueSoft); color: var(--blue); border-radius: var(--radius-pill);
  padding: 8px 16px 8px 14px; font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
}
.pill-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); flex: none; }
.hero-copy { display: flex; flex-direction: column; }
.hero-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(46px, 13.2vw, 72px); line-height: .9; letter-spacing: -.068em;
  margin: 22px 0 22px -.04em;
}
.hero-title .line { display: block; }
.hero-intro { font-size: clamp(19px, 5vw, 24px); line-height: 1.2; font-weight: 300; color: var(--text); letter-spacing: -.012em; max-width: 26ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-actions .button { font-family: var(--font-display); font-size: 17.5px; padding: 0 26px; height: 54px; }
.hero-actions .button-primary { padding-right: 24px; }
.tech-strip {
  display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--text);
}

/* Device stage: phone + portrait share a baseline.
   Visible figure spans 277p × 742p; phone is 334p × 741p. */
.device-stage {
  position: relative; align-self: center;
  width: calc(620 * var(--hero-p)); height: calc(760 * var(--hero-p));
  --hero-p: min(0.9px, calc((100cqw - 32px) / 624));
}
.device-stage .phone-host { position: absolute; left: 0; top: 0; z-index: 2; }
.portrait {
  position: absolute; z-index: 3; pointer-events: none;
  /* cropped PNG: 592 × 1474, figure inset 8px. Scale .5089 → figure 742p tall */
  width: calc(301.3 * var(--hero-p)); left: calc(329.9 * var(--hero-p)); top: calc(-1 * var(--hero-p));
}
.portrait img { width: 100%; height: auto; filter: drop-shadow(-6px 10px 14px rgba(0,0,0,.08)); }
.ground-shadow {
  position: absolute; z-index: 1; left: calc(-20 * var(--hero-p)); width: calc(660 * var(--hero-p));
  top: calc(715 * var(--hero-p)); height: calc(46 * var(--hero-p));
  background:
    radial-gradient(34% 22% at 27% 45%, rgba(0,0,0,.20), transparent 75%),
    radial-gradient(22% 18% at 76% 45%, rgba(0,0,0,.14), transparent 75%),
    radial-gradient(60% 12% at 40% 45%, rgba(0,0,0,.06), transparent 85%);
  filter: blur(4px);
}

/* ---------- Section typography ---------- */
.section-label {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text);
}
.label-num { color: var(--blue); font-weight: 600; letter-spacing: .08em; }
.label-sep { color: #A3A8B3; }
.section-title {
  font-family: var(--font-display); font-weight: 900;
  font-weight: 800; font-size: clamp(38px, 9vw, 64px); line-height: .98; letter-spacing: -.066em; word-spacing: .08em; margin-top: 12px;
}
.section-lede { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.4; font-weight: 300; color: var(--text); max-width: 60ch; margin-top: 22px; }
.ph-tag {
  display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue); background: var(--blueSoft); padding: 3px 8px; border-radius: 6px; flex: none;
}

/* ---------- Work / scroll tour ---------- */
.work { position: relative; }
.work-sticky { padding: 32px 0 48px; }
.work .wrap::before {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: -32px; height: 1px; background: #C9CDDA;
}
.work-head { display: grid; gap: 22px; }
.work-tabs {
  display: flex; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); padding: 0; position: relative;
}
.work-tabs::-webkit-scrollbar { display: none; }
.work-tabs button {
  flex: none; border: 0; background: none; cursor: pointer; border-radius: var(--radius-pill);
  min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; gap: 16px; white-space: nowrap;
  font-size: 14px; color: var(--text); position: relative; transition: color .3s, background-color .3s;
}
.work-tabs button + button::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--border);
}
.work-tabs button[aria-selected="true"] { background: var(--blue); color: #fff; }
.work-tabs button[aria-selected="true"]::before,
.work-tabs button[aria-selected="true"] + button::before { opacity: 0; }
.tab-num { font-size: 14px; }
.scroll-hint { display: none; }

.tour { display: grid; gap: 28px; margin-top: 32px; }
.tour-panels { position: relative; }
.tour-panel { animation: panel-in .5s var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } }
.panel-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.tour-panel h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: -.045em; margin-top: 14px; max-width: 18ch; }
.tour-panel > p:not(.panel-kicker), .tour-panel [data-project] > p:not(.role-note) { color: var(--text); font-size: 17px; line-height: 1.55; margin-top: 16px; max-width: 46ch; }
.placeholder-list { margin: 22px 0 26px; display: grid; gap: 10px; }
.project-title { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.project-title img { width: 64px; height: 64px; border-radius: 16px; flex: none; box-shadow: 0 10px 20px -12px rgba(0,0,0,.5); }
.project-title h3 { margin-top: 0; }
.built-list { margin: 22px 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 520px; }
.built-list li { border: 1px solid var(--grid); background: var(--surface); border-radius: 14px; padding: 12px 14px; }
.built-list b { display: block; font-size: 15px; font-weight: 600; }
.built-list span { font-size: 13px; color: var(--muted); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.project-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; border-radius: 24px !important; margin-top: 16px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.project-switch button { white-space: nowrap; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 11px 0 5px; border-radius: 999px; font-size: 13px; color: var(--text); transition: background-color .25s, color .25s; }
.project-switch button img { width: 26px; height: 26px; border-radius: 7px; }
.project-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.flow-steps { counter-reset: step; display: grid; gap: 8px; margin: 18px 0 20px; max-width: 520px; }
.flow-steps li { counter-increment: step; display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--text); }
.flow-steps li::before { content: counter(step); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--blueSoft); color: var(--blue); transform: translateY(-2px); }
.flow-steps b { color: var(--ink); font-weight: 600; }
.role-note { font-size: 14px; color: var(--muted); margin-bottom: 20px; max-width: 520px; }
.placeholder-list li {
  display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 14px; padding: 12px 14px; background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.tour-progress { display: none; }
.tour-device { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tour-controls { display: flex; align-items: center; gap: 14px; min-height: 46px; flex-wrap: wrap; justify-content: center; }
.tour-status { font-size: 13px; color: var(--muted); }

/* ---------- Under the hood ---------- */
.hood { padding: 88px 0 72px; }
.hood-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 44px; }
.hood-card {
  background: var(--surface); border: 1px solid var(--grid); border-radius: 22px; padding: 22px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.hood-card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(20, 24, 40, .35); }
.hood-icon { grid-row: span 3; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; }
.hood-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hood-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.03em; }
.hood-card p { color: var(--text); font-size: 15px; line-height: 1.5; margin-top: 4px; }
.hood-level { margin-top: 12px; justify-self: start; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.hood-card:first-child .hood-level { color: var(--blue); border-color: #BCD0FF; background: var(--blueSoft); }

.tile-blue { background: linear-gradient(160deg, #3C86FF, #0A4DF2); color: #fff; }
.tile-graphite { background: linear-gradient(160deg, #474A51, #1F2126); color: #fff; }
.tile-coral { background: linear-gradient(160deg, #FF7461, #F03C38); color: #fff; }
.tile-ink { background: linear-gradient(160deg, #36404E, #141A22); color: #fff; }
.tile-purple { background: linear-gradient(160deg, #9B6BFF, #6A3CF4); color: #fff; }
.tile-light { background: linear-gradient(160deg, #F7F7F9, #DFE0E5); color: #2A2D33; }

/* ---------- About ---------- */
.about { padding: 72px 0; border-top: 1px solid var(--grid); }
.about-inner { display: grid; gap: 36px; align-items: center; }
.about-portrait { display: none; justify-self: center; width: 180px; }
.placeholder-block { margin-top: 28px; display: flex; gap: 14px; align-items: flex-start; border: 1px dashed var(--border); border-radius: 18px; padding: 18px; color: var(--muted); max-width: 60ch; }

/* ---------- Contact ---------- */
.contact { padding: 72px 0 0; background: var(--ink); color: #fff; }
.contact .section-label { color: #C8CCD6; }
.contact .label-sep { color: #5D6270; }
.contact .label-num { color: #6F9BFF; }
.contact-inner { display: grid; gap: 32px; padding-bottom: 72px; }
.contact-links { display: grid; gap: 12px; align-content: end; }
.social-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; min-height: 64px;
  border: 1px solid #2A2E36; border-radius: 16px; background: #111317; color: #fff; text-decoration: none;
  transition: border-color .25s, background-color .25s, transform .25s var(--ease-out);
}
.social-card:hover { border-color: #4A5060; background: #16191F; transform: translateY(-2px); }
.social-icon { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; }
.social-icon svg { width: 22px; height: 22px; }
.social-li { background: #0A66C2; color: #fff; }
.social-gh { background: #fff; color: #0D1117; }
.social-text { flex: 1; min-width: 0; }
.social-text b { display: block; font-size: 16px; font-weight: 600; }
.social-text small { display: block; font-size: 13px; color: #9BA1AE; }
.social-arrow { color: #8C92A0; font-size: 18px; transition: transform .25s var(--ease-out), color .25s; }
.social-card:hover .social-arrow { color: #fff; transform: translate(2px, -2px); }
.footer-social { display: inline-flex; gap: 6px; margin-left: auto; margin-right: 18px; }
.footer-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #8C92A0; margin-block: -12px; }
.footer-social a:hover { color: #fff; background: #1A1D23; }
.footer-social svg { width: 19px; height: 19px; }
.about-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.about-social .button { gap: 9px; }
.about-social svg { width: 17px; height: 17px; }
.contact-placeholder { display: flex; gap: 12px; align-items: center; border: 1px dashed #3A3E48; border-radius: 16px; padding: 16px 18px; color: #B9BECA; font-size: 15px; }
.contact .ph-tag { background: #1B2A55; color: #9EBBFF; }
.site-footer { display: flex; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 22px; border-top: 1px solid #23262D; font-size: 14px; color: #8C92A0; }
.site-footer a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; margin-block: -12px; }
.site-footer a:hover { color: #fff; }

/* =========================================================
   Phone component — every measurement is N * var(--p)
   Outer 334 × 741, screen inset 14 → 306 × 713
   ========================================================= */
.phone-host { width: calc(334 * var(--p)); height: calc(741 * var(--p)); }
.phone {
  position: relative; width: 100%; height: 100%;
  border-radius: calc(52 * var(--p));
  background: #0C0C0E;
  box-shadow:
    inset 0 0 0 calc(1.6 * var(--p)) #8A8D93,
    inset 0 0 0 calc(3.2 * var(--p)) #26272B,
    inset 0 0 0 calc(4.4 * var(--p)) #0A0A0B,
    0 calc(40 * var(--p)) calc(60 * var(--p)) calc(-30 * var(--p)) rgba(0,0,0,.45);
  transition: border-radius .5s var(--ease-out), background-color .5s;
  font-family: var(--font-body);
  color: #111;
  user-select: none; -webkit-user-select: none;
}
.phone-btn { position: absolute; right: calc(-2.2 * var(--p)); width: calc(3 * var(--p)); border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #2B2C30, #6C6F75); }
.phone-btn.b1 { top: calc(150 * var(--p)); height: calc(46 * var(--p)); }
.phone-btn.b2 { top: calc(226 * var(--p)); height: calc(84 * var(--p)); }
.phone-screen {
  position: absolute; inset: calc(14 * var(--p)); overflow: hidden;
  border-radius: calc(38 * var(--p));
  background: #F3F0EA;
  isolation: isolate;
  transition: border-radius .5s var(--ease-out), inset .5s var(--ease-out);
}
.wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* Status bar */
.status-bar {
  position: absolute; z-index: 20; left: 0; right: 0; top: 0; height: calc(44 * var(--p));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(18 * var(--p)) 0 calc(23 * var(--p));
  font-size: calc(12.5 * var(--p)); font-weight: 600; letter-spacing: -.01em; pointer-events: none;
  transition: color .3s;
}
.status-time { padding-top: calc(2 * var(--p)); }
.status-icons { display: flex; align-items: center; gap: calc(3 * var(--p)); }
.status-icons svg { height: calc(11 * var(--p)); width: auto; fill: currentColor; }
.cutout {
  position: absolute; z-index: 30; left: 50%; top: calc(9 * var(--p));
  width: calc(21 * var(--p)); height: calc(21 * var(--p)); transform: translateX(-50%);
  border-radius: 99px; background: radial-gradient(circle at 60% 40%, #2B3140 0 18%, #07070A 30%);
  box-shadow: 0 0 0 calc(1 * var(--p)) rgba(255,255,255,.06);
  transition: width .5s var(--ease-spring), height .5s var(--ease-spring), top .5s var(--ease-spring);
}
html:not([data-platform="ios"]) .ios-only { display: none !important; }
html[data-platform="ios"] .android-only { display: none !important; }

/* Home screen */
.home { position: absolute; inset: 0; z-index: 1; transition: transform .45s var(--ease-emph), opacity .35s, filter .45s; }
.phone.app-open .home { transform: scale(.94); opacity: .0; filter: blur(2px); }
.home-date { position: absolute; left: calc(25 * var(--p)); top: calc(84 * var(--p)); font-size: calc(10.4 * var(--p)); font-weight: 600; letter-spacing: .025em; color: #1C1C1E; }
.home-clock {
  position: absolute; left: calc(21 * var(--p)); top: calc(96 * var(--p));
  font-family: var(--font-display); font-weight: 400; font-size: calc(58 * var(--p)); line-height: 1; letter-spacing: -.045em; color: #0E0E10;
  font-variant-numeric: tabular-nums;
}
.home-welcome {
  position: absolute; left: calc(25 * var(--p)); top: calc(178 * var(--p));
  font-family: var(--font-display); font-weight: 620; font-size: calc(36 * var(--p)); line-height: calc(36 * var(--p)); letter-spacing: -.035em; color: #0B0B0C;
}
.home-rule { position: absolute; left: calc(27 * var(--p)); top: calc(281 * var(--p)); width: calc(31 * var(--p)); height: calc(2 * var(--p)); background: #1A1A1A; }
.app-grid {
  position: absolute; left: calc(18 * var(--p)); top: calc(309 * var(--p));
  display: grid; grid-template-columns: repeat(3, calc(92 * var(--p))); row-gap: calc(23 * var(--p)); column-gap: calc(1.5 * var(--p));
}
.app-icon {
  border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column; align-items: center; gap: calc(9 * var(--p));
  font-size: calc(13.4 * var(--p)); color: #121214; letter-spacing: -.01em; font-weight: 400;
  border-radius: calc(14 * var(--p));
}
.app-icon:focus-visible { outline-offset: calc(2 * var(--p)); }
.tile {
  position: relative; overflow: hidden;
  width: calc(68 * var(--p)); height: calc(66 * var(--p)); border-radius: calc(16 * var(--p));
  display: grid; place-items: center;
  box-shadow: 0 calc(6 * var(--p)) calc(12 * var(--p)) calc(-6 * var(--p)) rgba(0,0,0,.35), inset 0 calc(1 * var(--p)) 0 rgba(255,255,255,.18);
  transition: transform .25s var(--ease-out), border-radius .5s var(--ease-out);
}
.tile svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-icon:hover .tile { transform: translateY(calc(-2 * var(--p))); }
.app-icon:active .tile { transform: scale(.9); }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: ripple .55s var(--ease-out) forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
.page-dots { position: absolute; left: 0; right: 0; top: calc(557 * var(--p)); display: flex; justify-content: center; gap: calc(8 * var(--p)); }
.page-dots span { width: calc(8 * var(--p)); height: calc(8 * var(--p)); border-radius: 50%; background: rgba(90, 90, 100, .22); }
.page-dots span:first-child { background: var(--blue); }
.dock {
  position: absolute; left: calc(10 * var(--p)); right: calc(8 * var(--p)); top: calc(609 * var(--p)); height: calc(90 * var(--p));
  border-radius: calc(30 * var(--p));
  background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 0 0 calc(1 * var(--p)) rgba(255,255,255,.6), 0 calc(8 * var(--p)) calc(20 * var(--p)) calc(-12 * var(--p)) rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(14 * var(--p)) 0 calc(15 * var(--p));
}
.dock .tile { width: calc(50 * var(--p)); height: calc(50 * var(--p)); border-radius: calc(13 * var(--p)); }
.dock .tile svg { width: 62%; height: 62%; }
.dock .app-icon span.lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Tile colours */
.t-blue { background: linear-gradient(165deg, #3A86FF 0%, #0B4FF3 100%); color: #fff; }
.t-graphite { background: linear-gradient(165deg, #45484F 0%, #202227 100%); color: #fff; }
.t-coral { background: linear-gradient(165deg, #FF7563 0%, #F23C39 100%); color: #fff; }
.t-ink { background: linear-gradient(165deg, #38414F 0%, #161B23 100%); color: #fff; }
.t-purple { background: linear-gradient(165deg, #9D6DFF 0%, #6B3CF5 100%); color: #fff; }
.t-light { background: linear-gradient(165deg, #F6F6F8 0%, #E1E2E7 100%); color: #2C2F36; }
.t-green { background: linear-gradient(165deg, #6BDB76 0%, #2DB14A 100%); color: #fff; }
.t-msg { background: linear-gradient(165deg, #3F90FF 0%, #1C60F0 100%); color: #fff; }
.t-cam { background: linear-gradient(165deg, #333 0%, #111 100%); color: #fff; }
.t-set { background: linear-gradient(165deg, #7F8793 0%, #525966 100%); color: #fff; }
.t-green svg, .t-msg svg, .t-cam svg, .t-set svg { fill: currentColor; stroke: none; }
/* Real app icons (store artwork), clipped to the tile shape */
.t-img { background: #1E5B38; }
.t-img img, .proj-icon img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.t-img img.android-only, .proj-icon img.android-only { transform: scale(1.1); }

/* Project screen inside the phone */
.proj-head { display: flex; align-items: center; gap: calc(12 * var(--p)); margin: calc(4 * var(--p)) 0 calc(12 * var(--p)); }
.proj-head h4 { margin: 0; }
.proj-icon { flex: none; width: calc(56 * var(--p)); height: calc(56 * var(--p)); border-radius: calc(14 * var(--p)); overflow: hidden; background: #1E5B38; box-shadow: 0 calc(4 * var(--p)) calc(10 * var(--p)) calc(-4 * var(--p)) rgba(0,0,0,.35); }
.slot .slot-tile { flex: none; width: calc(34 * var(--p)); height: calc(34 * var(--p)); border-radius: calc(10 * var(--p)); box-shadow: none; }
.proj-sub { color: #6B7180; font-size: calc(12.5 * var(--p)); }
.t-img-dark, .proj-icon-dark { background: #0B0B0C; }
.t-img-yellow, .proj-icon-yellow { background: #FDD000; }
.phone-social { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--p)); margin-top: calc(14 * var(--p)); }
.phone-social .app-link { margin-top: 0; }
.app-link.social-li-btn { background: #0A66C2; }
.app-link.social-gh-btn { background: #0D1117; }

/* Tour-the-app launcher */
.app-link.shots-launch {
  justify-content: flex-start; gap: calc(10 * var(--p)); text-align: left; padding: calc(6 * var(--p)) calc(14 * var(--p)) calc(6 * var(--p)) calc(6 * var(--p));
  min-height: calc(56 * var(--p)); border-radius: calc(16 * var(--p)); background: #1F3D2F;
}
.shots-launch > span:nth-child(2) { flex: 1; }
.shots-launch b { display: block; font-size: calc(14 * var(--p)); font-weight: 600; }
.shots-launch small { display: block; font-size: calc(11 * var(--p)); opacity: .75; font-weight: 400; }
.shots-launch > span:last-child { font-size: calc(22 * var(--p)); line-height: 1; opacity: .8; }
.shots-thumb { flex: none; width: calc(30 * var(--p)); height: calc(44 * var(--p)); border-radius: calc(7 * var(--p)); overflow: hidden; box-shadow: 0 0 0 calc(1.5 * var(--p)) rgba(255,255,255,.35); }
.shots-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* Screenshot tour overlay */
.shots { position: absolute; inset: 0; z-index: 15; background: #F6F3EC; opacity: 0; transform: scale(.96); transition: opacity .28s, transform .35s var(--ease-emph); }
.shots.on { opacity: 1; transform: none; }
.shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .35s; user-select: none; }
.shots img.on { opacity: 1; }
.shots-zone { position: absolute; top: 0; bottom: 0; z-index: 1; border: 0; background: none; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.shots-zone.prev { left: 0; width: 34%; cursor: w-resize; }
.shots-zone.next { right: 0; width: 66%; cursor: e-resize; }
.shots-zone:focus-visible { outline-offset: -4px; }
.shots-card {
  position: absolute; z-index: 2; left: calc(10 * var(--p)); right: calc(10 * var(--p)); bottom: calc(26 * var(--p));
  padding: calc(10 * var(--p)) calc(12 * var(--p)) calc(9 * var(--p)); border-radius: calc(18 * var(--p));
  background: rgba(16, 24, 20, .78); color: #fff; backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 calc(10 * var(--p)) calc(24 * var(--p)) calc(-12 * var(--p)) rgba(0,0,0,.5);
}
.shots-bars { display: flex; gap: calc(4 * var(--p)); margin-bottom: calc(9 * var(--p)); }
.shots-bars span { flex: 1; height: calc(3 * var(--p)); border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.shots-bars i { display: block; height: 100%; width: 0; background: #fff; border-radius: inherit; }
.shots-bars span.done i { width: 100%; }
.shots-bars span.now i { animation: shot-progress 4s linear forwards; }
.shots.paused .shots-bars span.now i { animation-play-state: paused; }
@keyframes shot-progress { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .shots-bars span.now i { width: 100%; } }
.shots-row { display: flex; align-items: flex-start; gap: calc(8 * var(--p)); }
.shots-cap { flex: 1; font-size: calc(12.5 * var(--p)); line-height: 1.35; font-weight: 500; min-height: 2.7em; }
.shots-close { flex: none; width: calc(28 * var(--p)); height: calc(28 * var(--p)); border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.16); color: #fff; font-size: calc(12 * var(--p)); display: grid; place-items: center; }
.shots-close:hover { background: rgba(255,255,255,.28); }
.shots-tag { margin-top: calc(5 * var(--p)); font-family: var(--font-mono); font-size: calc(8.8 * var(--p)); letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.phone.shots-dark .status-bar { color: #fff; }
.gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; margin: calc(12 * var(--p)) 0 calc(6 * var(--p)); border-radius: calc(14 * var(--p)); background: #F1F0EC; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery::-webkit-scrollbar { display: none; }
.gallery img { flex: 0 0 100%; width: 100%; height: calc(300 * var(--p)); object-fit: contain; scroll-snap-align: start; display: block; }
.gallery-nav { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--p)); font-size: calc(11.5 * var(--p)); color: #6B7180; }
.gallery-nav button { width: calc(32 * var(--p)); height: calc(32 * var(--p)); border-radius: 50%; border: 1px solid #E3E2DC; background: #fff; cursor: pointer; font-size: calc(18 * var(--p)); line-height: 1; color: #15171C; }
.proj-note { font-size: calc(11.5 * var(--p)); color: #7A8090; margin-top: calc(8 * var(--p)); }
.flow { display: grid; gap: calc(6 * var(--p)); margin: calc(8 * var(--p)) 0 0; counter-reset: none; }
.flow li { display: flex; gap: calc(10 * var(--p)); align-items: center; padding: calc(8 * var(--p)) calc(10 * var(--p)); border-radius: calc(12 * var(--p)); background: #fff; border: 1px solid #ECEBE6; transition: border-color .3s, background-color .3s, opacity .3s; }
.flow b { display: block; font-size: calc(12.5 * var(--p)); color: #15171C; }
.flow small { display: block; font-size: calc(11 * var(--p)); color: #7A8090; line-height: 1.35; }
.flow-dot { flex: none; width: calc(24 * var(--p)); height: calc(24 * var(--p)); border-radius: 50%; display: grid; place-items: center; font-size: calc(11 * var(--p)); font-weight: 600; background: #F1F1EE; color: #5A6070; transition: background-color .3s, color .3s; }
.flow li.now { border-color: var(--blue); background: #F4F7FF; }
.flow li.now .flow-dot, .flow li.done .flow-dot { background: var(--blue); color: #fff; }
.flow li.done .flow-dot { background: #1E9E5A; }
.app-link.app-link-ghost { background: transparent; color: #111; border: 1px solid #DDDCD6; margin-top: calc(8 * var(--p)); }
html[data-platform="ios"] .app-link.app-link-ghost { background: #fff; color: #0A66FF; border-color: transparent; }

/* Home / gesture indicator */
.home-bar {
  position: absolute; z-index: 25; left: 50%; bottom: calc(2 * var(--p)); transform: translateX(-50%);
  width: calc(150 * var(--p)); height: calc(22 * var(--p)); border: 0; background: none; cursor: pointer; padding: 0;
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.home-bar::before { content: ""; width: calc(96 * var(--p)); height: calc(4 * var(--p)); border-radius: 9px; background: #1A1A1C; opacity: .75; }
.phone.app-open .home-bar { opacity: 1; pointer-events: auto; }

/* App view */
.app-view {
  position: absolute; inset: 0; z-index: 10; background: #FBFAF7; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: scale(.25); transform-origin: var(--ox, 50%) var(--oy, 50%);
  border-radius: calc(16 * var(--p));
  transition: transform .42s var(--ease-emph), opacity .25s, visibility 0s .42s, border-radius .42s var(--ease-emph);
}
.app-view.is-open { opacity: 1; visibility: visible; transform: none; border-radius: 0; transition: transform .42s var(--ease-emph), opacity .2s, visibility 0s, border-radius .42s var(--ease-emph); }
.app-top {
  flex: none; padding: calc(46 * var(--p)) calc(14 * var(--p)) calc(8 * var(--p)); display: flex; align-items: center; gap: calc(8 * var(--p));
}
.app-back {
  border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: calc(2 * var(--p));
  min-width: calc(40 * var(--p)); min-height: calc(40 * var(--p)); padding: 0 calc(6 * var(--p)); border-radius: 99px;
  font-size: calc(15 * var(--p)); color: #111;
}
.app-back:hover { background: rgba(0,0,0,.06); }
.app-back svg { width: calc(22 * var(--p)); height: calc(22 * var(--p)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-title { font-family: var(--font-display); font-size: calc(19 * var(--p)); font-weight: 700; letter-spacing: -.03em; }
.app-large-title { display: none; }
.app-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: calc(6 * var(--p)) calc(18 * var(--p)) calc(40 * var(--p)); font-size: calc(13.5 * var(--p)); line-height: 1.45; color: #2B2F3A; scrollbar-width: none; }
.app-body::-webkit-scrollbar { display: none; }
.app-body h4 { font-family: var(--font-display); font-size: calc(22 * var(--p)); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: #0B0B0C; margin: calc(4 * var(--p)) 0 calc(8 * var(--p)); }
.app-body p + p { margin-top: calc(8 * var(--p)); }
.demo-badge {
  display: inline-flex; align-items: center; gap: calc(6 * var(--p)); margin-bottom: calc(12 * var(--p));
  font-family: var(--font-mono); font-size: calc(9.5 * var(--p)); letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); background: var(--blueSoft); padding: calc(4 * var(--p)) calc(8 * var(--p)); border-radius: calc(6 * var(--p));
}
.demo-badge::before { content: ""; width: calc(6 * var(--p)); height: calc(6 * var(--p)); border-radius: 50%; background: currentColor; }
.hero-art { height: calc(130 * var(--p)); border-radius: calc(20 * var(--p)); margin: calc(12 * var(--p)) 0; position: relative; overflow: hidden; display: grid; place-items: center; }
.hero-art svg { width: calc(44 * var(--p)); height: calc(44 * var(--p)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.slot-list { display: grid; gap: calc(8 * var(--p)); margin-top: calc(12 * var(--p)); }
.slot {
  display: flex; align-items: center; gap: calc(10 * var(--p)); padding: calc(10 * var(--p)); border-radius: calc(14 * var(--p));
  background: #fff; border: 1px solid #ECEBE6;
}
.slot i { flex: none; width: calc(34 * var(--p)); height: calc(34 * var(--p)); border-radius: calc(10 * var(--p)); background: repeating-linear-gradient(135deg, #EEF0F4 0 6px, #E4E7EE 6px 12px); }
.slot b { display: block; font-weight: 600; font-size: calc(13 * var(--p)); color: #15171C; }
.slot small { color: #7A8090; font-size: calc(11.5 * var(--p)); }
.app-link {
  display: flex; align-items: center; justify-content: center; margin-top: calc(14 * var(--p)); min-height: calc(42 * var(--p));
  border-radius: 99px; background: #0B0B0C; color: #fff; text-decoration: none; font-size: calc(13.5 * var(--p)); font-weight: 500; border: 0; cursor: pointer; width: 100%;
}
.chip-row { display: flex; flex-wrap: wrap; gap: calc(6 * var(--p)); margin-top: calc(10 * var(--p)); }
.chip-row span { font-size: calc(11 * var(--p)); padding: calc(4 * var(--p)) calc(10 * var(--p)); border-radius: 99px; background: #fff; border: 1px solid #E5E4DF; }

/* Connect diagram */
.sys { position: relative; height: calc(250 * var(--p)); margin: calc(8 * var(--p)) 0; }
.sys svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.sys .wire { fill: none; stroke: #C9CDD8; stroke-width: 1.5; }
.sys .pulse { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 6 200; animation: pulse 2.4s linear infinite; }
@keyframes pulse { from { stroke-dashoffset: 206; } to { stroke-dashoffset: 0; } }
.sys-node {
  position: absolute; transform: translate(-50%, -50%); border: 1px solid #E3E2DC; background: #fff; border-radius: calc(14 * var(--p));
  padding: calc(8 * var(--p)) calc(10 * var(--p)); font-size: calc(11.5 * var(--p)); font-weight: 600; cursor: pointer; color: #15171C;
  min-width: calc(78 * var(--p)); text-align: center; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.sys-node[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 calc(3 * var(--p)) rgba(8,75,255,.15); }
.sys-note { min-height: calc(60 * var(--p)); background: #fff; border-radius: calc(14 * var(--p)); padding: calc(10 * var(--p)) calc(12 * var(--p)); border: 1px solid #ECEBE6; }

/* Fitness ring */
.ring-wrap { display: grid; place-items: center; margin: calc(10 * var(--p)) 0; position: relative; }
.ring-wrap svg { width: calc(170 * var(--p)); height: calc(170 * var(--p)); transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: #F4DAD6; stroke-width: 14; }
.ring-fg { fill: none; stroke: url(#none); stroke: #F23C39; stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease-out); }
.ring-label { position: absolute; text-align: center; font-family: var(--font-display); }
.ring-label b { display: block; font-size: calc(34 * var(--p)); letter-spacing: -.04em; line-height: 1; color: #111; }
.ring-label small { font-size: calc(11 * var(--p)); color: #7A8090; }

/* Browser / desktop mockups */
.mock-window { border-radius: calc(14 * var(--p)); background: #fff; border: 1px solid #E6E5E0; overflow: hidden; margin: calc(12 * var(--p)) 0; }
.mock-bar { height: calc(24 * var(--p)); background: #F1F0EC; display: flex; align-items: center; gap: calc(5 * var(--p)); padding: 0 calc(9 * var(--p)); }
.mock-bar i { width: calc(7 * var(--p)); height: calc(7 * var(--p)); border-radius: 50%; background: #D6D5CF; }
.mock-bar span { flex: 1; height: calc(12 * var(--p)); border-radius: 6px; background: #fff; margin-left: calc(6 * var(--p)); }
.mock-body { padding: calc(10 * var(--p)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--p)); }
.mock-body div { height: calc(38 * var(--p)); border-radius: calc(8 * var(--p)); background: #F3F4F7; }
.mock-body div.wide { grid-column: span 3; height: calc(60 * var(--p)); background: linear-gradient(180deg, #E7EEFF, #F6F8FF); position: relative; }
.mock-body div.wide::after { content: ""; position: absolute; inset: 30% 8% 18%; background: linear-gradient(90deg, transparent, transparent); border-bottom: 2px solid var(--blue); border-radius: 0 0 40% 20%; }

/* Camera */
.camera { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 40%, #3A3F48, #0B0C0F); color: #fff; display: flex; flex-direction: column; }
.cam-grid { flex: 1; margin: calc(90 * var(--p)) calc(16 * var(--p)) calc(20 * var(--p)); border-radius: calc(18 * var(--p)); position: relative; overflow: hidden;
  background: linear-gradient(180deg, #7E8A99 0%, #C9C0B1 60%, #8B8173 100%);
}
.cam-grid::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent calc(33.3% - .5px), rgba(255,255,255,.35) 33.3%, transparent calc(33.3% + .5px), transparent calc(66.6% - .5px), rgba(255,255,255,.35) 66.6%, transparent calc(66.6% + .5px)),
  linear-gradient(0deg, transparent calc(33.3% - .5px), rgba(255,255,255,.35) 33.3%, transparent calc(33.3% + .5px), transparent calc(66.6% - .5px), rgba(255,255,255,.35) 66.6%, transparent calc(66.6% + .5px)); }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.go { animation: flash .45s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.cam-controls { height: calc(130 * var(--p)); display: flex; align-items: center; justify-content: space-around; padding-bottom: calc(20 * var(--p)); }
.shutter { width: calc(64 * var(--p)); height: calc(64 * var(--p)); border-radius: 50%; border: calc(4 * var(--p)) solid #fff; background: #fff; box-shadow: inset 0 0 0 calc(3 * var(--p)) #111; cursor: pointer; transition: transform .15s; }
.shutter:active { transform: scale(.9); }
.cam-count { font-size: calc(12 * var(--p)); color: #C8CCD6; min-width: calc(60 * var(--p)); text-align: center; }
.camera .app-back { color: #fff; }
.camera .app-back:hover { background: rgba(255,255,255,.12); }
.camera .cam-top { position: absolute; top: calc(44 * var(--p)); left: calc(12 * var(--p)); z-index: 2; }

/* Settings */
.settings-group { background: #fff; border-radius: calc(14 * var(--p)); border: 1px solid #ECEBE6; overflow: hidden; margin-top: calc(10 * var(--p)); }
.settings-group label, .settings-group .row { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--p)); padding: calc(12 * var(--p)); cursor: pointer; }
.settings-group label + label, .settings-group .row + .row { border-top: 1px solid #F0EFEA; }
.settings-group input { width: calc(18 * var(--p)); height: calc(18 * var(--p)); accent-color: var(--blue); margin: 0; }
.settings-caption { font-size: calc(11 * var(--p)); text-transform: uppercase; letter-spacing: .08em; color: #8A8F9C; margin-top: calc(16 * var(--p)); }

/* ---------- iOS variant ---------- */
html[data-platform="ios"] .phone {
  border-radius: calc(58 * var(--p));
  background: #121214;
  box-shadow:
    inset 0 0 0 calc(2.2 * var(--p)) #B9B6B0,
    inset 0 0 0 calc(3.6 * var(--p)) #6F6D69,
    inset 0 0 0 calc(5 * var(--p)) #0A0A0B,
    0 calc(40 * var(--p)) calc(60 * var(--p)) calc(-30 * var(--p)) rgba(0,0,0,.45);
}
html[data-platform="ios"] .phone-btn { background: linear-gradient(90deg, #6F6D69, #CFCBC4); }
html[data-platform="ios"] .phone-screen { inset: calc(12 * var(--p)); border-radius: calc(47 * var(--p)); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body); }
html[data-platform="ios"] .cutout { width: calc(92 * var(--p)); height: calc(27 * var(--p)); top: calc(11 * var(--p)); background: #050506; box-shadow: none; }
html[data-platform="ios"] .status-bar { height: calc(48 * var(--p)); padding: 0 calc(26 * var(--p)) 0 calc(36 * var(--p)); font-size: calc(14 * var(--p)); font-weight: 600; }
html[data-platform="ios"] .status-bar .status-time { padding-top: calc(3 * var(--p)); }
html[data-platform="ios"] .status-icons { gap: calc(5 * var(--p)); }
html[data-platform="ios"] .home-date { font-size: calc(12 * var(--p)); letter-spacing: 0; text-transform: none; top: calc(82 * var(--p)); color: #3A3A3C; }
html[data-platform="ios"] .home-clock { font-weight: 600; letter-spacing: -.045em; top: calc(96 * var(--p)); font-size: calc(58 * var(--p)); }
html[data-platform="ios"] .tile { border-radius: calc(17 * var(--p)); width: calc(64 * var(--p)); height: calc(64 * var(--p)); }
html[data-platform="ios"] .dock .tile { border-radius: calc(13 * var(--p)); width: calc(52 * var(--p)); height: calc(52 * var(--p)); }
html[data-platform="ios"] .app-icon { font-size: calc(12 * var(--p)); gap: calc(8 * var(--p)); }
html[data-platform="ios"] .app-icon:active .tile { transform: scale(.86); filter: brightness(.82); }
html[data-platform="ios"] .page-dots span:first-child { background: #1C1C1E; }
html[data-platform="ios"] .page-dots { gap: calc(7 * var(--p)); }
html[data-platform="ios"] .page-dots span { width: calc(7 * var(--p)); height: calc(7 * var(--p)); }
html[data-platform="ios"] .dock { border-radius: calc(34 * var(--p)); left: calc(9 * var(--p)); right: calc(9 * var(--p)); top: calc(613 * var(--p)); height: calc(84 * var(--p)); background: rgba(246, 244, 240, .45); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); }
html[data-platform="ios"] .home-bar { opacity: 1; pointer-events: none; }
html[data-platform="ios"] .home-bar::before { width: calc(118 * var(--p)); height: calc(5 * var(--p)); }
html[data-platform="ios"] .phone.app-open .home-bar { pointer-events: auto; }
html[data-platform="ios"] .home { transition: transform .5s var(--ease-spring), opacity .35s, filter .5s; }
html[data-platform="ios"] .phone.app-open .home { transform: scale(1.12); }
html[data-platform="ios"] .app-view { transition: transform .5s var(--ease-spring), opacity .22s, visibility 0s .5s, border-radius .5s; border-radius: calc(40 * var(--p)); }
html[data-platform="ios"] .app-view.is-open { transition: transform .5s var(--ease-spring), opacity .18s, visibility 0s, border-radius .5s; border-radius: 0; }
html[data-platform="ios"] .app-top { padding: calc(50 * var(--p)) calc(8 * var(--p)) 0; justify-content: space-between; }
html[data-platform="ios"] .app-back { color: #0A66FF; font-size: calc(15 * var(--p)); padding-left: 0; }
html[data-platform="ios"] .app-back svg { width: calc(24 * var(--p)); height: calc(24 * var(--p)); stroke-width: 2.4; }
html[data-platform="ios"] .app-top .app-title { font-size: calc(15 * var(--p)); font-weight: 600; letter-spacing: -.01em; position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .2s; font-family: inherit; }
html[data-platform="ios"] .app-view.scrolled .app-top .app-title { opacity: 1; }
html[data-platform="ios"] .app-large-title { display: block; font-size: calc(30 * var(--p)); font-weight: 700; letter-spacing: -.03em; padding: calc(2 * var(--p)) calc(18 * var(--p)) calc(4 * var(--p)); color: #000; }
html[data-platform="ios"] .app-body { font-family: inherit; }
html[data-platform="ios"] .app-body h4 { font-family: inherit; font-weight: 700; letter-spacing: -.02em; }
html[data-platform="ios"] .settings-group, html[data-platform="ios"] .slot, html[data-platform="ios"] .sys-note { border-color: transparent; border-radius: calc(12 * var(--p)); }
html[data-platform="ios"] .app-view { background: #F2F2F7; }
html[data-platform="ios"] .app-link { background: #0A66FF; border-radius: calc(12 * var(--p)); }
html[data-platform="ios"] .demo-badge { border-radius: 99px; }

/* =========================================================
   Breakpoints
   ========================================================= */
@media (min-width: 480px) {
  .about-portrait { display: none; }
}
@media (max-width: 479.98px) {
  /* Prioritise the usable phone; the portrait moves to About */
  .device-stage { width: calc(334 * var(--hero-p)); height: calc(752 * var(--hero-p)); --hero-p: min(0.82px, calc((100cqw - 40px) / 334)); }
  .device-stage .portrait { display: none; }
  .ground-shadow { left: 0; width: calc(334 * var(--hero-p)); }
  .main-nav { gap: 0; }
  .main-nav a { font-size: 14px; padding: 10px 6px; }
  .main-nav a::after { left: 6px; right: 6px; }
  .platform-switch button { padding: 0 12px; min-width: 46px; }

  /* Hero: readable word gaps, full-width actions */
  .hero-inner { gap: 40px; padding-bottom: 56px; }
  .hero-title { word-spacing: .1em; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; height: 52px; font-size: 17px; }
  .tech-strip { margin-top: 24px; }

  /* Work: equal-width category tabs and project picker that never clip */
  .work-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 18px; overflow: visible; }
  .work-tabs button { white-space: normal; justify-content: center; text-align: center; line-height: 1.2; padding: 8px 6px; min-height: 56px; font-size: 13px; border-radius: 17px; }
  .work-tabs .tab-num { display: none; }
  .work-tabs button + button::before { top: 16px; bottom: 16px; }
  .project-switch { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 18px !important; }
  .project-switch button { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 4px; min-height: 0; border-radius: 14px; font-size: 12px; line-height: 1.2; white-space: normal; text-align: center; }
  .project-switch button img { width: 32px; height: 32px; border-radius: 9px; }
  .project-title img { width: 56px; height: 56px; border-radius: 14px; }
  .built-list b { font-size: 14px; }
  .built-list span { font-size: 12px; }
  .panel-actions .button { flex: 1 1 auto; }
  .panel-actions .button-blue { flex-basis: 100%; }

  /* Under the hood: tighter cards */
  .hood { padding: 64px 0 56px; }
  .hood-grid { gap: 10px; margin-top: 32px; }
  .hood-card { padding: 18px; border-radius: 18px; column-gap: 14px; }
  .hood-icon { width: 44px; height: 44px; border-radius: 13px; }
  .hood-icon svg { width: 22px; height: 22px; }
  .hood-card h3 { font-size: 19px; }
  .hood-card p { font-size: 14.5px; }
  .hood-level { margin-top: 10px; }

  /* About: a cropped portrait card instead of the full-height figure */
  .about { padding: 56px 0; }
  .about-inner { gap: 28px; }
  .about-portrait {
    display: block; position: relative; overflow: hidden; width: 100%; height: 340px; margin-top: 26px;
    border-radius: 24px; border: 1px solid var(--grid);
    background:
      radial-gradient(70% 60% at 50% 30%, #fff 0%, transparent 70%),
      linear-gradient(170deg, var(--blueSoft) 0%, #F3F4F7 100%);
  }
  .about-portrait img {
    position: absolute; left: 50%; top: 22px; width: 300px; max-width: none; height: auto; transform: translateX(-50%);
    filter: drop-shadow(0 14px 22px rgba(20, 24, 40, .16));
  }

  /* Contact footer: the cards above already link out, keep the bar to one line */
  .contact { padding-top: 56px; }
  .contact-inner { padding-bottom: 56px; }
  .footer-social { display: none; }
  .site-footer { white-space: nowrap; }
}

/* Smallest phones (≤ 359px): compact header so the platform switch stays on screen */
@media (max-width: 359.98px) {
  .header-inner { gap: 8px; }
  .brand-mark { font-size: 23px; }
  .main-nav a { font-size: 13px; padding: 10px 4px; }
  .main-nav a::after { left: 4px; right: 4px; }
  .platform-switch { height: 40px; }
  .platform-switch button { padding: 0; min-width: 40px; }
  .platform-switch svg { width: 18px; height: 18px; }
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 72px; }
  .brand-divider, .brand-text { display: flex; }
  .main-nav { margin: 0 auto; gap: 28px; }
  .switch-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .platform-switch button { padding: 0 22px; }
  .hero-title { font-size: clamp(64px, 10vw, 96px); }
  .hero-inner { gap: 48px; padding-top: 48px; }
  .device-stage { --hero-p: min(1px, calc((100cqw - 64px) / 640)); }
  .hood-grid { grid-template-columns: repeat(2, 1fr); }
  .about-inner { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1.2fr 1fr; align-items: end; }
  .tour { grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
  .scroll-hint { display: none; }
}

/* ---------- Desktop: reference composition (1024+) ---------- */
@media (min-width: 1024px) {
  :root {
    /* 0.76 scale leaves breathing room at the sides so the whole composition reads at a glance */
    --u: calc(min(100cqw, 1760px) * 0.76 / 1536);
    --gutter: calc(60 * var(--u));
    --header-h: calc(82 * var(--u));
    --hero-p: var(--u);
  }
  .wrap { max-width: calc(1536 * var(--u)); }

  /* Header: brand x60, divider x127, name x158; nav Work x598 / About x689 / Contact x786; switch x1238–1477 */
  .header-inner { display: block; }
  .brand { position: absolute; left: calc(60 * var(--u)); top: calc(18 * var(--u)); height: calc(44 * var(--u)); }
  .brand-mark { font-size: calc(29 * var(--u)); letter-spacing: -.075em; }
  .brand-divider { height: calc(40 * var(--u)); margin: 0 calc(30 * var(--u)) 0 calc(22 * var(--u)); }
  .brand-name { font-size: calc(14.2 * var(--u)); letter-spacing: .045em; }
  .brand-role { font-size: calc(13.6 * var(--u)); letter-spacing: .01em; }
  .main-nav { position: absolute; left: calc(590 * var(--u)); top: calc(17 * var(--u)); gap: calc(40 * var(--u)); margin: 0; }
  .main-nav a { font-size: calc(15 * var(--u)); padding: calc(10 * var(--u)) calc(8 * var(--u)); min-height: calc(44 * var(--u)); letter-spacing: -.012em; }
  .platform-switch { position: absolute; left: calc(1238 * var(--u)); top: calc(16 * var(--u)); width: calc(239 * var(--u)); height: calc(46 * var(--u)); }
  .platform-switch button { flex: none; padding: 0; font-size: calc(15 * var(--u)); gap: calc(9 * var(--u)); }
  .platform-switch button[data-platform-option="android"] { width: calc(127 * var(--u)); }
  .platform-switch button[data-platform-option="ios"] { width: calc(112 * var(--u)); }
  .platform-switch svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .switch-thumb { width: calc(128 * var(--u)); }
  html[data-platform="ios"] .switch-thumb { width: calc(113 * var(--u)); transform: translateX(calc(126 * var(--u))); }
  .switch-lead { display: block; position: absolute; right: 100%; top: 50%; width: calc(9 * var(--u)); height: 1px; background: var(--blue); }

  /* Chapter rail — fixed, x1390 */
  .chapter-rail { display: block; position: fixed; z-index: 30; top: calc(148 * var(--u)); left: max(calc(1384 * var(--u)), calc(50cqw + 616 * var(--u))); }
  .chapter-rail ol { position: relative; }
  .chapter-rail ol::before { content: ""; position: absolute; left: calc(5.5 * var(--u)); top: 0; height: calc(370 * var(--u)); width: 1px; background: #9EA3AE; }
  .chapter-rail li { height: calc(90 * var(--u)); }
  .chapter-rail li:first-child { height: calc(88 * var(--u)); }
  .chapter-rail li:nth-child(2) { height: calc(91 * var(--u)); }
  .chapter-rail a {
    position: relative; display: grid; grid-template-columns: calc(35 * var(--u)) auto; text-decoration: none;
    color: #4A5163; font-size: calc(14 * var(--u)); line-height: 1.55; padding-top: calc(6 * var(--u));
  }
  .rail-node {
    grid-row: span 2; width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-top: calc(4 * var(--u));
    border-radius: 50%; border: 1px solid #535A68; background: var(--background);
    transition: background-color .3s, border-color .3s, box-shadow .3s;
  }
  .rail-num, .rail-name { grid-column: 2; transition: color .3s; }
  .rail-num { font-size: calc(14.5 * var(--u)); }
  .chapter-rail a[aria-current="true"] { color: var(--blue); }
  .chapter-rail a[aria-current="true"] .rail-node { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(8,75,255,.12); }
  .chapter-rail a:hover { color: var(--ink); }
  .chapter-rail a[aria-current="true"]:hover { color: var(--blue); }

  /* Hero: absolute composition on the reference grid (y' = y − 82) */
  .hero-inner { display: block; height: calc(771 * var(--u)); padding: 0; }
  .hero-deco { display: block; position: absolute; inset: 0; pointer-events: none; }
  .deco-line { position: absolute; background: #EFEFEC; }
  .deco-v1 { left: calc(541 * var(--u)); top: calc(-82 * var(--u)); bottom: 0; width: 1px; }
  .deco-v2 { display: none; left: calc(580 * var(--u)); top: calc(680 * var(--u)); width: calc(900 * var(--u)); height: 1px; background: linear-gradient(90deg, transparent, #EAEAE6 20%, #EAEAE6 80%, transparent); }
  .deco-build { position: absolute; left: calc(570 * var(--u)); top: calc(247 * var(--u)); width: calc(780 * var(--u)); height: calc(296 * var(--u)); overflow: visible; }
  .deco-build text { font-family: var(--font-display); font-weight: 800; font-size: 406px; fill: none; stroke: #CDD0D6; stroke-width: 1.3; opacity: .75; vector-effect: non-scaling-stroke; }
  .deco-orbit { position: absolute; left: calc(613 * var(--u)); top: calc(205 * var(--u)); width: calc(240 * var(--u)); height: calc(240 * var(--u)); overflow: visible; }
  .deco-orbit circle { fill: none; stroke: #7F9DF5; stroke-width: 1; vector-effect: non-scaling-stroke; }
  .deco-orbit .orbit-tick { stroke: #7F9DF5; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
  .deco-orbit .orbit-dot { fill: var(--blue); stroke: none; }

  .hero-copy { position: absolute; left: calc(60 * var(--u)); top: 0; width: calc(640 * var(--u)); display: block; }
  .eyebrow-pill {
    position: absolute; top: calc(75 * var(--u)); left: 0; height: calc(35 * var(--u)); gap: calc(12 * var(--u));
    padding: 0 calc(16 * var(--u)) 0 calc(16 * var(--u)); font-size: calc(11 * var(--u)); letter-spacing: .15em; font-weight: 500;
  }
  .pill-dot { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
  .hero-title {
    position: absolute; top: calc(134 * var(--u)); left: calc(-2 * var(--u)); margin: 0; white-space: nowrap;
    font-weight: 800; font-size: calc(107 * var(--u)); line-height: calc(95 * var(--u)); letter-spacing: -.07em; word-spacing: .08em;
  }
  .hero-intro { position: absolute; top: calc(434 * var(--u)); left: 0; width: calc(520 * var(--u)); max-width: none; font-size: calc(26 * var(--u)); line-height: calc(33 * var(--u)); letter-spacing: -.012em; }
  .hero-actions { position: absolute; top: calc(537 * var(--u)); left: 0; margin: 0; gap: calc(15 * var(--u)); flex-wrap: nowrap; }
  .hero-actions .button { height: calc(58 * var(--u)); min-height: 0; font-family: var(--font-display); font-weight: 460; font-size: calc(19.5 * var(--u)); letter-spacing: -.015em; }
  .hero-actions .button-primary { width: calc(243 * var(--u)); padding: 0; gap: calc(14 * var(--u)); }
  .hero-actions .button-secondary { width: calc(200 * var(--u)); padding: 0; }
  .tech-strip { position: absolute; top: calc(625 * var(--u)); left: calc(2 * var(--u)); margin: 0; font-size: calc(11 * var(--u)); letter-spacing: .12em; gap: calc(7 * var(--u)); }

  .device-stage { --hero-p: var(--u); position: absolute; left: calc(706 * var(--u)); top: 0; width: calc(620 * var(--u)); height: calc(760 * var(--u)); }
  .portrait { left: calc(329.9 * var(--u)); top: calc(-1 * var(--u)); width: calc(301.3 * var(--u)); }

  /* Selected work */
  .work { height: 340vh; }
  .work-sticky { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); padding: 0; overflow: hidden; }
  .work .wrap { height: 100%; display: flex; flex-direction: column; }
  .work .wrap::before { top: 0; left: calc(60 * var(--u)); right: calc(60 * var(--u)); }
  .work-head { grid-template-columns: calc(621 * var(--u)) calc(570 * var(--u)) 1fr; align-items: center; gap: 0; padding-top: calc(33 * var(--u)); }
  .work-titles { align-self: start; }
  .section-label { font-size: calc(13.6 * var(--u)); gap: calc(11 * var(--u)); letter-spacing: .15em; }
  .work .section-title { font-size: calc(63 * var(--u)); font-weight: 800; letter-spacing: -.07em; word-spacing: .08em; margin-top: calc(10 * var(--u)); white-space: nowrap; }
  .work-tabs { margin-top: calc(30 * var(--u)); height: calc(52 * var(--u)); }
  .work-tabs button { min-height: 0; height: 100%; padding: 0 calc(21 * var(--u)); font-size: calc(13.6 * var(--u)); gap: calc(19 * var(--u)); letter-spacing: -.005em; }
  .work-tabs button:nth-child(1) { width: calc(188 * var(--u)); padding-left: calc(22 * var(--u)); }
  .work-tabs button:nth-child(2) { width: calc(205 * var(--u)); padding-left: calc(26 * var(--u)); }
  .work-tabs button:nth-child(3) { flex: 1; padding-left: calc(26 * var(--u)); }
  .work-tabs button + button::before { top: calc(13 * var(--u)); bottom: calc(13 * var(--u)); }
  .tab-num { font-size: calc(13.6 * var(--u)); }
  .scroll-hint {
    display: flex; align-items: flex-end; gap: calc(8 * var(--u)); margin-top: calc(30 * var(--u)); height: calc(56 * var(--u));
    border-left: 1px solid #B9BDC7; padding-left: calc(42 * var(--u)); margin-left: calc(30 * var(--u));
    font-size: calc(14.4 * var(--u)); line-height: calc(22.5 * var(--u)); color: var(--text); white-space: nowrap;
  }
  .scroll-hint svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: calc(2 * var(--u)); animation: nudge 2s ease-in-out infinite; }
  @keyframes nudge { 50% { transform: translateY(3px); } }
  .scroll-hint { transition: opacity .3s; }
  .work.is-stuck .scroll-hint { opacity: 0; visibility: hidden; }

  .tour { flex: 1; min-height: 0; margin-top: 0; grid-template-columns: calc(560 * var(--u)) 1fr; gap: calc(60 * var(--u)); align-items: center; padding-right: calc(170 * var(--u)); }
  .tour-panels { padding-bottom: calc(10 * var(--u)); }
  .tour-panel h3 { font-size: calc(40 * var(--u)); }
  .tour-panel > p:not(.panel-kicker), .tour-panel [data-project] > p:not(.role-note) { font-size: calc(18 * var(--u)); }
  .placeholder-list li { font-size: calc(15 * var(--u)); }
  .tour-progress { display: block; margin-top: calc(34 * var(--u)); height: 2px; background: var(--grid); border-radius: 2px; overflow: hidden; width: calc(320 * var(--u)); }
  .tour-progress span { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(var(--progress, 0)); }
  .tour-device { flex-direction: row; align-items: center; justify-content: center; gap: calc(36 * var(--u)); height: 100%; min-height: 0; }
  :root { --tour-p: min(calc(0.78 * var(--u)), calc((100vh - var(--header-h) - 230 * var(--u)) / 741)); }
  .tour-controls { flex-direction: column; align-items: flex-start; width: calc(170 * var(--u)); justify-content: center; }

  /* Other sections */
  .hood { padding: calc(130 * var(--u)) 0 calc(110 * var(--u)); }
  .hood .wrap, .about .wrap, .contact .wrap { padding-right: calc(210 * var(--u)); }
  .hood .section-title, .about .section-title, .contact .section-title { font-size: calc(64 * var(--u)); letter-spacing: -.068em; }
  .hood-grid { grid-template-columns: repeat(3, 1fr); gap: calc(18 * var(--u)); }
  .about { padding: calc(120 * var(--u)) 0; }
  .about-inner { grid-template-columns: 1fr; }
  .contact { padding-top: calc(110 * var(--u)); }
}

/* Laptop band: reduce headline & compact the chapter rail */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .chapter-rail { left: auto; right: 14px; }
  .chapter-rail ol::before { left: calc(5.5 * var(--u)); }
  .chapter-rail a { grid-template-columns: calc(18 * var(--u)) auto; }
  .rail-name, .rail-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .chapter-rail a { min-width: 44px; min-height: 44px; }
  .chapter-rail li { height: calc(90 * var(--u)); }
  .hero-title { font-size: calc(102 * var(--u)); line-height: calc(92 * var(--u)); top: calc(130 * var(--u)); }
  .hero-actions .button { font-size: max(15px, calc(19 * var(--u))); }
}

/* Tablet: stack copy above the stage */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .brand-role { display: none; }
  .brand-divider { height: 28px; margin: 0 18px 0 16px; }
  .hero-inner { align-items: stretch; }
  .device-stage { align-self: center; }
  .tour-device { order: -1; }
  .tour { grid-template-columns: 1fr; }
  :root { --tour-p: 0.72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}