:root {
  color-scheme: dark;
  --black:#160d18;
  --tissue:#25141f;
  --membrane:#39232f;
  --bone:#fff7f2;
  --mist:#d6c8cd;
  --coral:#ff5d7e;
  --violet:#b36cff;
  --mint:#60f0d0;
  --light:#f7efec;
  --ink:#26131c;
  --ease:cubic-bezier(.16,1,.3,1);
  --page-pad:clamp(1.25rem,5vw,5.5rem);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--black); }
body { margin:0; overflow-x:hidden; background:var(--black); color:var(--bone); font-family:Onest,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }

.skip-link { position:fixed; z-index:30; top:1rem; left:1rem; padding:.75rem 1rem; border-radius:12px; background:var(--mint); color:var(--black); transform:translateY(-180%); }
.skip-link:focus { transform:none; }

.case-header { position:sticky; z-index:20; top:0; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; min-height:4.75rem; padding:.8rem var(--page-pad); border-bottom:1px solid rgb(255 247 242 / 12%); background:rgb(22 13 24 / 94%); backdrop-filter:blur(12px); }
.case-header a { text-decoration:none; }
.protocol-link { --protocol-text-height:1.27rem; --protocol-mark-size:1.524rem; display:inline-flex; gap:.6rem; align-items:flex-start; width:max-content; color:var(--bone); font-family:"IBM Plex Mono","Courier New",monospace; font-size:.66rem; font-weight:700; letter-spacing:.035em; line-height:.9; }
.protocol-error-mark { width:var(--protocol-mark-size); height:var(--protocol-mark-size); flex:0 0 auto; transition:transform 180ms var(--ease); }
.protocol-parent-name { min-height:var(--protocol-text-height); display:grid; gap:.08rem; align-content:start; }
.protocol-link:is(:hover,:focus-visible) .protocol-error-mark { transform:translate(2px,-1px); }
.case-brand { font-weight:700; letter-spacing:.08em; }
.case-brand b { color:var(--coral); }
.case-nav { justify-self:end; display:flex; gap:clamp(.75rem,2vw,1.5rem); font-size:.8rem; }
.case-nav a { color:var(--mist); }
.case-header a:hover,.case-header a:focus-visible { color:var(--mint); outline:none; }

.hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(20rem,.72fr); gap:clamp(2rem,7vw,8rem); align-items:center; min-height:calc(100svh - 4.75rem); padding:clamp(3rem,7vw,7rem) var(--page-pad); overflow:hidden; background:radial-gradient(ellipse 44% 65% at 88% 42%,rgb(179 108 255 / 20%),transparent 72%),radial-gradient(ellipse 36% 46% at 5% 92%,rgb(255 93 126 / 18%),transparent 70%),var(--black); }
.hero-copy { position:relative; z-index:2; max-width:43rem; }
.status { margin-bottom:1.3rem; color:var(--mint); font:500 .72rem/1.4 "IBM Plex Mono","Courier New",monospace; letter-spacing:.07em; }
.hero h1 { max-width:10ch; margin-bottom:1.8rem; font:600 clamp(3.15rem,7vw,6rem)/.96 Onest,-apple-system,sans-serif; letter-spacing:-.04em; }
.hero-lead { max-width:36rem; margin-bottom:1.8rem; color:var(--mist); font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.62; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.primary-link { padding:.95rem 1.2rem; border-radius:14px; background:var(--coral); color:var(--black); font-weight:700; text-decoration:none; transition:transform 180ms var(--ease),background 180ms var(--ease); }
.primary-link:hover,.primary-link:focus-visible { background:var(--mint); transform:translateY(-2px); outline:none; }
.text-link { color:var(--bone); text-underline-offset:.35rem; }
.text-link:hover,.text-link:focus-visible { color:var(--mint); outline:none; }
.hero-principles { display:flex; flex-wrap:wrap; gap:.55rem; margin:2rem 0 0; padding:0; list-style:none; }
.hero-principles li { padding:.55rem .75rem; border:1px solid rgb(255 247 242 / 24%); border-radius:999px; color:var(--mist); font-size:.78rem; }

.live-phone { position:relative; z-index:3; width:min(100%,430px); aspect-ratio:430/844; margin-inline:auto; overflow:hidden; border-radius:28px; background:#eee9eb; box-shadow:0 12px 0 rgb(255 93 126 / 28%); }
.live-phone iframe { display:block; width:100%; height:100%; border:0; }
.live-phone--hero { width:min(78vw,390px); transform:rotate(1.4deg); transition:transform 500ms var(--ease); }
.live-phone--hero:hover { transform:rotate(0) translateY(-6px); }
.hero-organism { position:absolute; right:-8rem; bottom:-8rem; width:30rem; aspect-ratio:1; pointer-events:none; }
.hero-organism i { position:absolute; border-radius:48% 52% 68% 32% / 44% 35% 65% 56%; filter:blur(1px); animation:drift 9s ease-in-out infinite alternate; }
.hero-organism i:nth-child(1) { inset:5%; background:rgb(255 93 126 / 16%); }
.hero-organism i:nth-child(2) { inset:25%; background:rgb(179 108 255 / 24%); animation-duration:6s; animation-direction:alternate-reverse; }
.hero-organism i:nth-child(3) { inset:42%; background:rgb(96 240 208 / 30%); animation-duration:4.5s; }

.value { padding:clamp(5rem,11vw,10rem) var(--page-pad); background:var(--light); color:var(--ink); }
.value-intro { display:grid; grid-template-columns:.28fr 1fr; gap:clamp(1.5rem,5vw,6rem); align-items:start; margin-bottom:clamp(3rem,7vw,7rem); }
.value-intro>p,.screens-intro>div>p,.process-heading>p,.future>p:first-child { color:#8f1744; font:600 .78rem/1.4 "IBM Plex Mono","Courier New",monospace; }
.value h2,.screens h2,.process h2,.future h2 { margin:0; font-size:clamp(2.3rem,5vw,5.2rem); line-height:1.02; letter-spacing:-.04em; }
.value-loop { display:flex; align-items:stretch; gap:1rem; }
.value-loop article { flex:1; min-width:0; padding-top:1rem; border-top:2px solid var(--ink); }
.value-loop article span { display:block; margin-bottom:3rem; color:#8f1744; font:600 .72rem "IBM Plex Mono","Courier New",monospace; }
.value-loop article strong { display:block; margin-bottom:.8rem; font-size:1.15rem; }
.value-loop article p { margin:0; color:#4f3642; font-size:.92rem; line-height:1.55; }
.value-loop>i { align-self:center; color:#8f1744; font-style:normal; font-size:1.4rem; }

.screens { padding:clamp(5rem,10vw,10rem) var(--page-pad); }
.screens-intro { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(18rem,.6fr); gap:clamp(2rem,6vw,7rem); align-items:end; max-width:88rem; margin:0 auto clamp(5rem,9vw,9rem); }
.screens-intro>p { max-width:32rem; margin-bottom:.3rem; color:var(--mist); font-size:1rem; line-height:1.65; }
.screens-intro>div>p { color:var(--coral); }
.screen-stage { position:relative; display:grid; grid-template-columns:minmax(15rem,.7fr) minmax(300px,430px); gap:clamp(2rem,8vw,9rem); align-items:center; justify-content:center; min-height:56rem; margin-inline:calc(var(--page-pad) * -1); padding:clamp(4rem,8vw,8rem) var(--page-pad); overflow:hidden; isolation:isolate; }
.screen-stage--coral { background:var(--coral); color:var(--black); }
.screen-stage--violet { background:var(--violet); color:var(--black); }
.screen-stage--mint { background:var(--mint); color:var(--black); }
.screen-story { position:relative; z-index:3; max-width:29rem; }
.screen-story span { display:block; margin-bottom:1rem; font:600 .75rem "IBM Plex Mono","Courier New",monospace; }
.screen-story h3 { margin-bottom:1rem; font-size:clamp(2.3rem,4vw,4.5rem); line-height:.98; letter-spacing:-.04em; }
.screen-story p { max-width:30rem; font-size:1.05rem; line-height:1.6; }
.screen-stage .live-phone { box-shadow:0 12px 0 rgb(22 13 24 / 28%); }
.shape-field { position:absolute; z-index:-1; inset:0; pointer-events:none; }
.shape-field i { position:absolute; border:2px solid rgb(22 13 24 / 30%); border-radius:46% 54% 33% 67% / 56% 38% 62% 44%; animation:membrane 10s ease-in-out infinite alternate; }
.shape-field--a i:first-child { width:42rem; height:31rem; top:-8rem; right:-10rem; }.shape-field--a i:last-child { width:18rem; height:22rem; bottom:-8rem; left:3%; animation-duration:7s; }
.shape-field--b i:nth-child(1) { width:36rem; height:36rem; bottom:-14rem; left:-8rem; }.shape-field--b i:nth-child(2) { width:20rem; height:28rem; top:-10rem; right:5%; animation-duration:6s; }.shape-field--b i:nth-child(3) { width:9rem; height:9rem; top:30%; left:48%; background:rgb(96 240 208 / 34%); border:0; animation-duration:4s; }
.shape-field--c i:first-child { width:40rem; height:25rem; top:-10rem; left:-10rem; }.shape-field--c i:last-child { width:23rem; height:27rem; right:-5rem; bottom:-9rem; background:rgb(255 93 126 / 32%); border:0; animation-duration:7s; }

.process { padding:clamp(5rem,11vw,11rem) var(--page-pad); background:var(--tissue); }
.process-heading { display:grid; grid-template-columns:.28fr 1fr; gap:clamp(1.5rem,5vw,6rem); margin-bottom:clamp(4rem,8vw,8rem); }
.process-heading>p { color:var(--mint); }
.process-rail { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgb(255 247 242 / 16%); }
.process-rail article { min-height:23rem; padding:1.5rem; background:var(--tissue); }
.process-rail article span { display:block; margin-bottom:clamp(4rem,8vw,8rem); color:var(--violet); font:500 .72rem "IBM Plex Mono","Courier New",monospace; }
.process-rail article strong { display:block; margin-bottom:1rem; font-size:1.15rem; line-height:1.3; }
.process-rail article p { margin:0; color:var(--mist); font-size:.9rem; line-height:1.62; }
.implementation-facts { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-top:2rem; color:var(--mint); font:500 .7rem/1.5 "IBM Plex Mono","Courier New",monospace; }

.future { padding:clamp(6rem,14vw,14rem) var(--page-pad); background:radial-gradient(ellipse 52% 80% at 50% 55%,rgb(179 108 255 / 19%),transparent 72%),var(--black); text-align:center; }
.future>p:first-child { color:var(--coral); }
.future h2 { max-width:16ch; margin:0 auto clamp(3rem,6vw,6rem); }
.future-path { display:flex; justify-content:center; align-items:center; gap:clamp(.6rem,2vw,1.5rem); flex-wrap:wrap; }
.future-path span { padding:.8rem 1rem; border:1px solid rgb(255 247 242 / 28%); border-radius:999px; color:var(--mist); font-size:.84rem; }
.future-path span.is-now { border-color:var(--coral); background:var(--coral); color:var(--black); font-weight:700; }
.future-path i { color:var(--violet); font-style:normal; }
.future-note { max-width:47rem; margin:3rem auto 0; color:var(--mist); line-height:1.65; }

footer { display:flex; justify-content:space-between; gap:1rem; padding:1.3rem var(--page-pad); background:#100912; color:var(--mist); font:500 .7rem "IBM Plex Mono","Courier New",monospace; }
footer p { margin:0; }
footer a { color:var(--coral); text-decoration:none; }
footer a:hover,footer a:focus-visible { color:var(--mint); outline:none; }

@keyframes drift { to { transform:translate3d(-18px,-16px,0) rotate(12deg) scale(1.06); } }
@keyframes membrane { to { transform:translate3d(26px,18px,0) rotate(-8deg) scale(.94); border-radius:65% 35% 55% 45% / 34% 58% 42% 66%; } }

@media (max-width:900px) {
  .case-nav a:not(:last-child) { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { max-width:none; }
  .live-phone--hero { width:min(82vw,390px); }
  .value-intro,.screens-intro,.process-heading { grid-template-columns:1fr; }
  .value-loop { display:grid; grid-template-columns:1fr 1fr; }
  .value-loop>i { display:none; }
  .screen-stage { grid-template-columns:1fr; min-height:0; text-align:center; }
  .screen-story { margin-inline:auto; }
  .screen-stage .live-phone { width:min(82vw,390px); }
  .process-rail { grid-template-columns:1fr 1fr; }
}

@media (max-width:560px) {
  .case-header { min-height:4.2rem; padding:.7rem 1rem; }
  .protocol-link { --protocol-text-height:1.17rem; --protocol-mark-size:1.404rem; gap:.45rem; font-size:.65rem; }
  .case-brand { font-size:.8rem; }
  .case-nav a { font-size:.7rem; }
  .hero { min-height:auto; padding-top:3.5rem; }
  .hero h1 { font-size:clamp(2.8rem,14vw,4rem); }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .hero-principles { gap:.4rem; }
  .value-loop,.process-rail { grid-template-columns:1fr; }
  .value-loop article span,.process-rail article span { margin-bottom:2rem; }
  .process-rail article { min-height:0; }
  .implementation-facts { display:grid; }
  .screen-stage { padding-inline:1rem; }
  .future-path { flex-direction:column; }
  .future-path i { transform:rotate(90deg); }
  footer { flex-direction:column; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hero-organism i,.shape-field i { animation:none; }
  .live-phone--hero,.primary-link { transition:none; }
}