/* S4 studio intro — 5s masterpiece, then coming soon */

:root {
  --bd-bg: #050506;
  --bd-paper: #f4f1ea;
  --bd-dim: rgba(244, 241, 234, 0.55);
  --bd-line: rgba(244, 241, 234, 0.28);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background: var(--bd-bg);
  color: var(--bd-paper);
  font-family: 'Geist', system-ui, sans-serif;
  overflow-x: clip;
  overflow-y: scroll;
}
body.bd {
  min-height: 100svh;
  height: auto;
  overflow: visible;
}

/* ───────── Intro stage ───────── */
.bd-intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: var(--bd-bg);
  overflow: hidden;
}
.bd-intro.is-out {
  animation: bdOut 0.55s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes bdOut {
  to { opacity: 0; visibility: hidden; }
}

.bd-void { position: absolute; inset: 0; pointer-events: none; }
.bd-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 0%, #050506 78%);
}
.bd-grain {
  position: absolute; inset: -20%;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: bdGrain 0.9s steps(2) infinite;
  mix-blend-mode: overlay;
}
@keyframes bdGrain { to { transform: translate3d(-2%, 1%, 0); } }

.bd-mesh {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(244,241,234,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,234,0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 55% 50% at 50% 46%, #000 20%, transparent 72%);
  transform: perspective(900px) rotateX(58deg) scale(1.6) translateY(8%);
  transform-origin: 50% 40%;
  opacity: 0;
  animation: bdMesh 5s var(--ease-out) forwards;
}
@keyframes bdMesh {
  0% { opacity: 0; transform: perspective(900px) rotateX(68deg) scale(1.8) translateY(16%); }
  12% { opacity: 1; }
  78% { opacity: 0.85; }
  100% { opacity: 0; }
}

.bd-bloom {
  position: absolute;
  left: 50%; top: 42%;
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,241,234,0.22), rgba(199,125,255,0.12) 42%, transparent 68%);
  filter: blur(8px);
  opacity: 0;
  animation: bdBloom 5s var(--ease-out) forwards;
}
@keyframes bdBloom {
  0%, 8% { opacity: 0; transform: scale(0.6); }
  22% { opacity: 1; transform: scale(1.15); }
  28% { opacity: 0.55; transform: scale(1); }
  58% { opacity: 0.9; transform: scale(1.2); }
  66% { opacity: 0.5; }
  100% { opacity: 0; transform: scale(1.3); }
}

.bd-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
.bd-flash-a {
  background: radial-gradient(circle at 50% 38%, #fff 0%, rgba(255,255,255,0.55) 28%, transparent 70%);
  animation: bdHitA 5s linear forwards;
}
.bd-flash-b {
  background: radial-gradient(circle at 50% 38%, #e9b3ff 0%, rgba(199,125,255,0.55) 32%, transparent 72%);
  animation: bdHitB 5s linear forwards;
}
@keyframes bdHitA {
  0%, 20.5% { opacity: 0; }
  21.4% { opacity: 1; }
  22.6% { opacity: 0.15; }
  23.4% { opacity: 0.7; }
  25.2% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes bdHitB {
  0%, 56.5% { opacity: 0; }
  57.4% { opacity: 1; }
  58.6% { opacity: 0.18; }
  59.5% { opacity: 0.75; }
  61.4% { opacity: 0; }
  100% { opacity: 0; }
}

/* ───────── Site being drawn ───────── */
.bd-site {
  position: relative;
  z-index: 2;
  width: min(72vw, 420px);
  height: auto;
  opacity: 0;
  animation: bdSiteIn 5s var(--ease-out) forwards;
}
@keyframes bdSiteIn {
  0% { opacity: 0; transform: translateY(18px) scale(0.97); }
  10% { opacity: 1; transform: none; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px) scale(1.02); }
}
.bd-draw {
  stroke: var(--bd-paper);
  stroke-width: 1.35;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
.bd-d1 { animation: bdStroke 1.15s var(--ease-out) 0.35s forwards; }
.bd-d2 { animation: bdStroke 0.55s var(--ease-out) 0.7s forwards; }
.bd-d3 { animation: bdStroke 0.5s var(--ease-out) 0.95s forwards; }
.bd-d4 { animation: bdStroke 0.7s var(--ease-out) 1.15s forwards; }
.bd-d5 { animation: bdStroke 0.45s var(--ease-out) 1.45s forwards; }
.bd-d6 { animation: bdStroke 0.45s var(--ease-out) 1.58s forwards; }
.bd-d7 { animation: bdStroke 0.45s var(--ease-out) 1.7s forwards; }
@keyframes bdStroke { to { stroke-dashoffset: 0; } }

.bd-dot {
  fill: var(--bd-paper);
  opacity: 0;
}
.bd-dot-a { animation: bdFade 0.4s ease 0.85s forwards; }
.bd-dot-b { animation: bdFade 0.4s ease 0.95s forwards; }
.bd-dot-c { animation: bdFade 0.4s ease 1.05s forwards; }
@keyframes bdFade { to { opacity: 0.85; } }

.bd-fill {
  fill: rgba(244, 241, 234, 0.08);
  opacity: 0;
}
.bd-f1 { animation: bdFill 0.7s var(--ease-out) 2.85s forwards; }
.bd-f2 { animation: bdFill 0.55s var(--ease-out) 3.1s forwards; }
.bd-f3 { animation: bdFill 0.55s var(--ease-out) 3.22s forwards; }
.bd-f4 { animation: bdFill 0.55s var(--ease-out) 3.34s forwards; }
@keyframes bdFill { to { opacity: 1; } }

/* ───────── Architect pen ───────── */
.bd-pen {
  position: absolute;
  z-index: 3;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  left: 50%; top: 50%;
  opacity: 0;
  animation: bdPen 4.6s var(--ease-out) 0.28s forwards;
  pointer-events: none;
}
.bd-pen i {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(244,241,234,0.12), 0 0 18px rgba(244,241,234,0.45);
}
@keyframes bdPen {
  0% { opacity: 0; transform: translate(-92px, -78px) scale(0.4); }
  6% { opacity: 1; }
  18% { transform: translate(110px, -78px); }
  28% { transform: translate(-70px, -28px); }
  40% { transform: translate(78px, 8px); }
  52% { transform: translate(-78px, 58px); }
  64% { transform: translate(0, 58px); }
  76% { transform: translate(78px, 58px); }
  88% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, -10px) scale(0.4); }
}

/* ───────── Words ───────── */
.bd-words {
  position: absolute;
  left: 0; right: 0;
  top: 11%;
  z-index: 7;
  text-align: center;
  pointer-events: none;
}
.bd-pair {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(96vw, 920px);
  transform: translateX(-50%);
  opacity: 0;
}
#pair-a { animation: bdPairA 5s linear forwards; }
#pair-b { animation: bdPairB 5s linear forwards; }
@keyframes bdPairA {
  0%, 19% { opacity: 0; transform: translateX(-50%) scale(1.42); filter: blur(10px); }
  21.6% { opacity: 1; transform: translateX(-50%) scale(1.08); filter: none; }
  24% { transform: translateX(-50%) scale(0.985); }
  26% { transform: translateX(-50%) scale(1); }
  48% { opacity: 1; transform: translateX(-50%) scale(1); }
  52.5% { opacity: 0; transform: translateX(-50%) scale(0.9); filter: blur(4px); }
  100% { opacity: 0; }
}
@keyframes bdPairB {
  0%, 55% { opacity: 0; transform: translateX(-50%) scale(1.42); filter: blur(10px); }
  57.6% { opacity: 1; transform: translateX(-50%) scale(1.1); filter: none; }
  60% { transform: translateX(-50%) scale(0.98); }
  62% { transform: translateX(-50%) scale(1); }
  86% { opacity: 1; transform: translateX(-50%) scale(1); }
  93% { opacity: 0; transform: translateX(-50%) scale(0.9); filter: blur(4px); }
  100% { opacity: 0; }
}

.bd-serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 14vw, 104px);
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: #fff;
  text-shadow: 0 0 40px rgba(255,255,255,0.28);
}
.bd-sans {
  margin-top: 16px;
  font-size: clamp(32px, 8vw, 58px);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: none;
  color: #e9b3ff;
  text-shadow:
    0 0 18px rgba(233, 179, 255, 0.85),
    0 0 48px rgba(199, 125, 255, 0.55);
  animation: bdPurpleHit 5s linear forwards;
}
#pair-b .bd-sans { animation-delay: 0s; }
@keyframes bdPurpleHit {
  0%, 21% { filter: brightness(1); }
  22% { filter: brightness(2.2); }
  24% { filter: brightness(1); }
  26% { filter: brightness(1.6); }
  29% { filter: brightness(1); }
  57% { filter: brightness(1); }
  58% { filter: brightness(2.3); }
  60% { filter: brightness(1); }
  62% { filter: brightness(1.7); }
  65% { filter: brightness(1); }
}

.bd-serif span,
.bd-sans span {
  display: inline-block;
  opacity: 1;
  transform: none;
  animation: none;
}

/* ───────── Progress ───────── */
.bd-rail {
  position: absolute;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(220px, 56vw);
  z-index: 5;
  text-align: center;
}
.bd-rail-mark {
  display: block;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.5);
  margin-bottom: 10px;
  animation: bdFade 0.6s ease 0.4s both;
}
.bd-rail-bar {
  height: 1px;
  background: rgba(244,241,234,0.12);
  overflow: hidden;
}
.bd-rail-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--bd-paper);
  animation: bdRail 5s linear forwards;
}
@keyframes bdRail { to { width: 100%; } }

/* ───────── Page ───────── */
.bd-page {
  position: relative;
  opacity: 0;
  pointer-events: none;
}
body.is-ready .bd-page {
  animation: bdSoonIn 0.8s var(--ease-out) 0.1s forwards;
  pointer-events: auto;
}
@keyframes bdSoonIn {
  to { opacity: 1; }
}

.pg-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  padding-top: max(16px, env(safe-area-inset-top));
  background: linear-gradient(#050506, rgba(5,5,6,0.72) 70%, transparent);
  backdrop-filter: blur(10px);
}
.bd-logo img { height: 16px; display: block; }
.pg-nav-right { display: flex; align-items: center; gap: 16px; }
.bd-back {
  font-size: 13px;
  color: rgba(244,241,234,0.55);
  text-decoration: none;
}
.bd-back:hover { color: #fff; }
.pg-nav-cta {
  font-size: 12px;
  font-weight: 650;
  color: #12110f;
  background: #e9b3ff;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
}

.pg-kicker {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e9b3ff;
  margin-bottom: 16px;
}
.pg-lead {
  margin: 18px auto 28px;
  max-width: 28ch;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(244,241,234,0.58);
}

.pg-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--bd-paper);
  color: #12110f;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: 0 16px 40px -16px rgba(233,179,255,0.55);
}

.pg-hero {
  min-height: calc(100svh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 22px 80px;
}
.pg-hero h1 {
  font-size: clamp(44px, 11vw, 88px);
  font-weight: 550;
  letter-spacing: -0.045em;
  line-height: 0.92;
}
.pg-hero h1 em,
.pg-close h2 em,
.pg-hit em,
.pg-proof h2 em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #e9b3ff;
}
body.is-ready .pg-hero h1 {
  animation: pgSlam 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
body.is-ready .pg-hero .pg-kicker { animation: pgSlam 0.7s var(--ease-out) both; }
body.is-ready .pg-hero .pg-lead { animation: pgSlam 0.8s var(--ease-out) 0.22s both; }
body.is-ready .pg-hero .pg-cta { animation: pgSlam 0.8s var(--ease-out) 0.32s both; }
body.is-ready .pg-scroll { animation: pgSlam 0.8s var(--ease-out) 0.5s both; }

.pg-scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  width: 56px;
  height: 56px;
  color: #e9b3ff;
  text-decoration: none;
}
.pg-scroll-chevs {
  position: relative;
  width: 36px;
  height: 44px;
}
.pg-scroll-chevs i {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
  opacity: 0;
  animation: pgChev 1.6s ease-in-out infinite;
}
.pg-scroll-chevs i:nth-child(1) { top: 0; animation-delay: 0s; }
.pg-scroll-chevs i:nth-child(2) { top: 10px; animation-delay: 0.2s; }
.pg-scroll-chevs i:nth-child(3) { top: 20px; animation-delay: 0.4s; }
@keyframes pgChev {
  0% { opacity: 0; transform: rotate(45deg) translate(-6px, -6px); }
  35% { opacity: 1; }
  70%, 100% { opacity: 0; transform: rotate(45deg) translate(8px, 8px); }
}
@keyframes pgSlam {
  from { opacity: 0; transform: translateY(28px) scale(1.06); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

.pg-proof {
  height: 220vh;
  --p: 0;
  --build: var(--p);
}
.pg-proof-sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 88px 20px 40px;
  text-align: center;
}
.pg-proof-kicker {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e9b3ff;
  margin-bottom: 10px;
}
.pg-proof h2 {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 550;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
}
.pg-browser {
  width: min(100%, 560px);
  border-radius: 18px;
  border: 1px solid rgba(244,241,234,0.16);
  background: #0b0b0d;
  overflow: hidden;
  box-shadow: 0 30px 80px -24px rgba(199,125,255,0.28);
  transform: perspective(900px) rotateX(calc((1 - var(--build, 0)) * 12deg)) scale(calc(0.94 + var(--build, 0) * 0.06));
}
.pg-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
}
.pg-chrome i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(244,241,234,0.28);
}
.pg-chrome span {
  flex: 1;
  height: 8px;
  margin-left: 8px;
  border-radius: 99px;
  background: rgba(244,241,234,0.08);
}
.pg-screen {
  position: relative;
  height: min(46vh, 320px);
  overflow: hidden;
}
.pg-layer { position: absolute; inset: 0; }
.pg-l-wire {
  background:
    linear-gradient(rgba(244,241,234,0.1), rgba(244,241,234,0.1)) 24px 28px / 40% 10px no-repeat,
    linear-gradient(rgba(244,241,234,0.08), rgba(244,241,234,0.08)) 24px 52px / 72% 42% no-repeat,
    linear-gradient(rgba(244,241,234,0.07), rgba(244,241,234,0.07)) 24px 72% / 28% 18% no-repeat,
    linear-gradient(rgba(244,241,234,0.07), rgba(244,241,234,0.07)) 36% 72% / 28% 18% no-repeat,
    linear-gradient(rgba(244,241,234,0.07), rgba(244,241,234,0.07)) 68% 72% / 28% 18% no-repeat;
  opacity: calc(1 - var(--build, 0));
}
.pg-l-hero {
  background: linear-gradient(160deg, rgba(199,125,255,0.45), rgba(18,16,28,0.2) 60%, transparent);
  opacity: var(--build, 0);
  clip-path: inset(0 0 calc((1 - var(--build, 0)) * 100%) 0);
}
.pg-l-type {
  top: 18%;
  left: 8%;
  right: auto;
  bottom: auto;
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 550;
  letter-spacing: -0.04em;
  opacity: calc((var(--build, 0) - 0.28) / 0.4);
}
.pg-l-type span { color: #e9b3ff; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; }
.pg-l-cards {
  top: auto; height: 28%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 0 24px 22px;
  opacity: calc((var(--build, 0) - 0.55) / 0.35);
}
.pg-l-cards b {
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(233,179,255,0.35), rgba(244,241,234,0.08));
}
.pg-proof-cap {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.4);
}

.pg-pin {
  height: 200vh;
  --p: 0;
}
.pg-pin-sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 88px 22px 48px;
  text-align: center;
}
.pg-pin-sticky h2 {
  font-size: clamp(28px, 5.6vw, 44px);
  font-weight: 550;
  letter-spacing: -0.035em;
  margin: 0 0 36px;
}

.pg-track {
  width: min(100%, 560px);
  height: 2px;
  background: rgba(244,241,234,0.1);
  margin: 0 auto 28px;
  overflow: hidden;
}
.pg-track i {
  display: block;
  height: 100%;
  width: calc(var(--p) * 100%);
  background: #e9b3ff;
}

.pg-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(100%, 640px);
  margin: 0 auto 28px;
}
.pg-steps li {
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: rgba(244,241,234,0.32);
  transition: color 0.35s;
}
.pg-steps li span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  color: inherit;
}
.pg-pin[data-active="0"] .pg-steps li[data-i="0"],
.pg-pin[data-active="1"] .pg-steps li[data-i="1"],
.pg-pin[data-active="2"] .pg-steps li[data-i="2"],
.pg-pin[data-active="3"] .pg-steps li[data-i="3"] {
  color: #e9b3ff;
}

.pg-step-copy {
  position: relative;
  height: 3.2em;
  width: min(100%, 420px);
}
.pg-step-copy p {
  position: absolute;
  inset: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(244,241,234,0.62);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s, transform 0.35s;
}
.pg-pin[data-active="0"] .pg-step-copy p[data-i="0"],
.pg-pin[data-active="1"] .pg-step-copy p[data-i="1"],
.pg-pin[data-active="2"] .pg-step-copy p[data-i="2"],
.pg-pin[data-active="3"] .pg-step-copy p[data-i="3"] {
  opacity: 1;
  transform: none;
}

.pg-type-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 28px;
  width: min(100%, 640px);
}
.pg-aa {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(96px, 22vw, 180px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(244,241,234,0.35);
  background: linear-gradient(#e9b3ff, #e9b3ff) left / calc(var(--p) * 100%) 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
.pg-spec {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
  opacity: calc((var(--p) - 0.2) / 0.55);
}
.pg-spec em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 28px;
}
.pg-spec strong {
  font-size: 15px;
  font-weight: 550;
  color: rgba(244,241,234,0.7);
}
.pg-spec b {
  color: #e9b3ff;
  font-weight: 650;
  font-size: 14px;
}

.pg-devices {
  position: relative;
  width: min(100%, 620px);
  height: min(42vh, 300px);
}
.pg-desk {
  position: absolute;
  left: 0; top: 8%;
  width: 72%;
  border-radius: 14px;
  border: 1px solid rgba(244,241,234,0.16);
  overflow: hidden;
  background: #0b0b0d;
  transform: translateY(calc((1 - var(--p)) * 16px));
}
.pg-desk-screen { height: 200px; padding: 16px; }
.pg-desk-bar {
  height: 8px; width: 34%;
  border-radius: 99px;
  background: rgba(244,241,234,0.14);
  margin-bottom: 12px;
  opacity: calc((var(--p) - 0.1) / 0.3);
}
.pg-desk-hero {
  height: 48%;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(199,125,255,0.4), rgba(244,241,234,0.06));
  margin-bottom: 12px;
  clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0);
}
.pg-desk-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  height: 28%;
  opacity: calc((var(--p) - 0.45) / 0.4);
}
.pg-desk-row b {
  border-radius: 8px;
  background: rgba(244,241,234,0.08);
}
.pg-phone {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 28%;
  max-width: 140px;
  border-radius: 18px;
  border: 1px solid rgba(244,241,234,0.2);
  background: #0b0b0d;
  overflow: hidden;
  transform: translateY(calc((1 - var(--p)) * 40px));
  opacity: calc((var(--p) - 0.15) / 0.4);
}
.pg-phone-notch {
  width: 36%;
  height: 8px;
  margin: 8px auto 0;
  border-radius: 99px;
  background: rgba(244,241,234,0.16);
}
.pg-phone-screen { padding: 12px 10px 14px; }
.pg-phone .pg-desk-hero { height: 70px; }
.pg-phone .pg-desk-row { grid-template-columns: 1fr 1fr; height: 36px; }

.pg-craft {
  padding: 14vh 22px 16vh;
  text-align: center;
  border-top: 1px solid rgba(244,241,234,0.06);
}
.pg-craft-head { margin-bottom: 36px; }
.pg-craft h2 {
  font-size: clamp(28px, 5.4vw, 42px);
  font-weight: 550;
  letter-spacing: -0.035em;
}
.pg-cards {
  display: grid;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
}
.pg-card {
  text-align: left;
  padding: 26px 24px;
  border-radius: 22px;
  border: 1px solid rgba(244,241,234,0.1);
  background: rgba(255,255,255,0.03);
}
.pg-card span {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #e9b3ff;
  margin-bottom: 12px;
}
.pg-card h3 {
  font-size: 28px;
  font-weight: 550;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.pg-card p {
  font-size: 15px;
  line-height: 1.45;
  color: rgba(244,241,234,0.55);
}

.pg-close {
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12vh 22px 16vh;
}
.pg-close h2 {
  font-size: clamp(48px, 12vw, 96px);
  font-weight: 550;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

[data-in] {
  opacity: 0;
  transform: translateY(36px) scale(1.04);
  filter: blur(8px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), filter 0.8s var(--ease-out);
}
[data-in].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
.pg-cards [data-in]:nth-child(2) { transition-delay: 0.08s; }
.pg-cards [data-in]:nth-child(3) { transition-delay: 0.16s; }

@media (min-width: 760px) {
  .pg-cards { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
  .pg-type-stage { flex-direction: column; align-items: center; gap: 16px; }
  .pg-spec { text-align: center; }
  .pg-steps li { font-size: 11px; }
}

@media (hover: hover) and (pointer: fine) {
  .pg-card:hover {
    transform: translateY(-6px);
    border-color: rgba(233,179,255,0.35);
    background: rgba(199,125,255,0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-grain, .bd-mesh, .bd-bloom, .bd-site, .bd-pen,
  #pair-a, #pair-b, .bd-serif span, .bd-sans span, .bd-rail-bar i,
  .bd-flash-a, .bd-flash-b, .bd-sans,
  .pg-scroll-chevs i { animation: none !important; opacity: 0.7; }
  .pg-hero h1, .pg-hero .pg-kicker, .pg-hero .pg-lead, .pg-hero .pg-cta, .pg-scroll {
    animation: none !important;
  }
  .bd-intro { animation: bdOut 0.01s 1.1s forwards; }
  .bd-site, #pair-a { opacity: 1; }
  .bd-serif span, .bd-sans span { opacity: 1; transform: none; }
  [data-in] { opacity: 1; transform: none; filter: none; }
}