/* myClover homepage · "ปรุงเว็บใน 3 แตะ" (BLUEPRINT v3.0 §4)
   Night lab hero (glass clover game + live demo) → daylight paper sections (static, readable without JS).
   Only transform/opacity animate. prefers-reduced-motion shows every state at once. */

:root {
  --night: #04100a; --night2: #08190f; --night3: #0d2619;
  --leaf: #34d27a; --leaf-hi: #93ffc4; --leaf-deep: #0a6c37; --mint: #c3f8da;
  --gold: #f4c75a; --gold-deep: #c9912b;
  --paper: #f7f2e6; --paper2: #efe7d3; --card: #fffdf7;
  --ink: #0e2318; --ink2: #3a5245; --ink3: #5f7568; --line: #dcd2bb;
  --head: 'Kanit', 'Anuphan', system-ui, sans-serif;
  --body: 'Anuphan', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.65 var(--body); color: var(--ink); background: var(--paper); overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; margin: 0; letter-spacing: -.005em; }
p { margin: 0; }
b, strong { font-weight: 600; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg:not([viewBox]) { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--gold); color: #1a1205; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }

/* ---------- top bar ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); color: #eafff2; transition: background .4s, box-shadow .4s, color .4s; }
.top.is-solid { background: rgba(4, 16, 10, .72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 rgba(160, 255, 200, .08); }
.top.is-paper { background: rgba(247, 242, 230, .86); color: var(--ink); box-shadow: 0 1px 0 rgba(14, 35, 24, .08); }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 600 18px/1 var(--head); }
.brand img { width: 30px; height: 30px; border-radius: 9px; }
.brand em { font-style: normal; color: var(--leaf); }
.top-nav { display: flex; align-items: center; gap: 2px; font-size: 15px; }
.top-nav a { text-decoration: none; padding: 8px 10px; border-radius: 999px; opacity: .86; white-space: nowrap; }
.top-nav a:hover { opacity: 1; background: rgba(160, 255, 200, .1); }
.top.is-paper .top-nav a:hover { background: rgba(14, 35, 24, .06); }
.top-house { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(160, 255, 200, .3); opacity: 1 !important; }
.top.is-paper .top-house { border-color: rgba(14, 35, 24, .2); }
@media (max-width: 520px) {
  .top { padding-inline: 12px; }
  .brand span { display: none; }
  .top-nav { font-size: 14px; }
  .top-nav a { padding: 7px 8px; }
  .top-house span { display: none; }
}

/* ---------- hero: the night lab ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: #e9fff2; background: var(--night);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "clover" "hint" "choices" "stage" "finale";
  gap: 22px; padding: 84px 16px 64px; padding-top: max(84px, calc(env(safe-area-inset-top) + 74px));
}
@media (min-width: 1040px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy stage" "lab stage" "finale finale";
    column-gap: clamp(32px, 4vw, 72px); row-gap: 30px; align-content: center; align-items: start;
    min-height: 100svh; padding: 104px clamp(28px, 4.5vw, 80px) 64px; max-width: 1480px; margin: 0 auto;
  }
  .hero::before { content: ''; position: absolute; inset: 0 -50vw; background: var(--night); z-index: -2; }
  .hero { overflow: visible; }
  .hero-sky { left: -50vw; right: -50vw; }
}
@media (min-width: 1040px) { body { overflow-x: hidden; } }
.hero-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-sky > * { position: absolute; }
.hero-video { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; mix-blend-mode: screen; transition: opacity 1.6s; }
.hero-video.is-on { opacity: .5; }
.glow { border-radius: 50%; filter: blur(70px); will-change: transform; }
.g1 { width: 58vmax; height: 58vmax; left: -18vmax; top: -12vmax; background: radial-gradient(circle, rgba(52, 210, 122, .42), transparent 62%); animation: drift1 22s ease-in-out infinite alternate; }
.g2 { width: 46vmax; height: 46vmax; right: -14vmax; top: 6vmax; background: radial-gradient(circle, rgba(40, 190, 170, .3), transparent 62%); animation: drift2 26s ease-in-out infinite alternate; }
.g3 { width: 40vmax; height: 40vmax; left: 30%; bottom: -22vmax; background: radial-gradient(circle, rgba(244, 199, 90, .22), transparent 62%); animation: drift1 30s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } }
@keyframes drift2 { to { transform: translate3d(-5vmax, 6vmax, 0) scale(.94); } }
.caustic { inset: -180px; opacity: .55; mix-blend-mode: screen; filter: blur(10px);
  background:
    radial-gradient(closest-side, rgba(150, 255, 196, .2), transparent) 0 0 / 210px 150px,
    radial-gradient(closest-side, rgba(255, 228, 150, .12), transparent) 70px 50px / 260px 190px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
  animation: caustic 34s linear infinite; }
@keyframes caustic { to { transform: translate3d(-210px, -150px, 0) rotate(6deg); } }
.grid { left: -25%; right: -25%; bottom: -8%; height: 58%; transform-origin: 50% 100%; transform: perspective(520px) rotateX(64deg);
  background-image: linear-gradient(rgba(147, 255, 196, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(147, 255, 196, .16) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 92%); mask-image: linear-gradient(to top, #000 10%, transparent 92%);
  animation: floor 9s linear infinite; opacity: .55; }
@keyframes floor { to { background-position: 0 56px, 0 0; } }
.grain { inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+"); }
.spot { inset: 0; background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(147, 255, 196, .1), transparent 60%); transition: opacity .6s; }

.hero-copy { grid-area: copy; max-width: 640px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 13.5px/1 var(--body); letter-spacing: .06em; color: var(--mint); padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid rgba(147, 255, 196, .22); background: rgba(147, 255, 196, .06); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 0 rgba(52, 210, 122, .6); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(52, 210, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 210, 122, 0); } }
.hero h1 { margin-top: 18px; font-size: clamp(30px, 7.6vw, 50px); line-height: 1.14; font-weight: 600; text-wrap: balance; }
.h1-a { display: block; }
.nw { white-space: nowrap; }
.h1-b { display: block; margin-top: 4px; background: linear-gradient(100deg, var(--leaf-hi) 0%, #e9ffd2 45%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.motto { margin-top: 14px; font: 400 clamp(17px, 2.4vw, 21px)/1.4 var(--body); color: rgba(233, 255, 242, .72); letter-spacing: .01em; }
.motto::before { content: '“'; color: var(--gold); margin-right: 2px; }
.motto::after { content: '”'; color: var(--gold); margin-left: 2px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.quick a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-size: 16px; color: #eafff2; border: 1px solid rgba(147, 255, 196, .26); background: rgba(8, 30, 18, .55); transition: transform .3s var(--ease), background .3s, border-color .3s; }
.quick a:hover { transform: translateY(-2px); background: rgba(52, 210, 122, .16); border-color: rgba(147, 255, 196, .5); }
.quick svg { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.quick a:hover svg { transform: translateX(3px); }

/* ---------- the glass clover ---------- */
/* phones: the first choice must be on the first screen (375×667 included).
   Small clover beside the instruction, choices full width under them. */
@media (max-width: 1039px) {
  .hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "copy copy" "clover hint" "choices choices" "stage stage" "finale finale"; column-gap: 16px; row-gap: 18px; padding-top: max(76px, calc(env(safe-area-inset-top) + 66px)); }
  .eyebrow { display: none; }
  .hero h1 { margin-top: 0; font-size: clamp(27px, 7.4vw, 36px); }
  .motto { margin-top: 8px; font-size: 16px; }
  .quick { margin-top: 14px; }
  .lab .clover { --size: clamp(140px, 40vw, 190px); margin: 0 0 18px; gap: 6px; justify-self: start; }
  .leaf { padding: 12%; }
  .leaf-q { display: none; }
  .leaf-n { width: 22px; height: 22px; font-size: 11.5px; margin-bottom: 2px; }
  .leaf-a { font-size: 12.5px; max-width: 8ch; line-height: 1.15; }
  .stem path { stroke-width: 4; }
  .lab .lab-hint { justify-self: start; align-self: center; text-align: left; margin: 0; font-size: 16px; max-width: 22ch; }
  .lab .choices { justify-self: stretch; max-width: none; }
  .choice { min-height: 52px; }
  .sauce .sauce-toggle { display: inline-flex; align-items: center; }
  .sauce:not(.is-open) .sauce-body { display: none; }
}
/* the lab's parts are hero rows on phones (copy → clover + hint → choices → phone → finale) */
.lab { display: contents; }
.lab .clover { grid-area: clover; }
.lab .lab-hint { grid-area: hint; }
.lab .choices { grid-area: choices; }
.finale { grid-area: finale; }
@media (min-width: 1040px) {
  .lab { grid-area: lab; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "clover choices" "hint choices"; align-items: center; column-gap: 34px; row-gap: 4px; }
  .lab .clover { justify-self: start; }
  .lab .lab-hint { justify-self: center; text-align: center; max-width: 26ch; font-size: 14.5px; margin-top: 0; }
  .lab .choices { align-self: center; justify-self: stretch; }
  .lab .choice-grid { grid-template-columns: 1fr; gap: 8px; }
  .lab .choice { min-height: 50px; }
  .lab .finale { grid-area: choices; align-self: center; justify-items: stretch; text-align: left; padding: 0; gap: 14px; }
  .lab .finale-msg { font-size: 19px; }
  .lab .finale-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .lab .finale-actions .btn-door { grid-column: 1 / -1; }
  .lab .finale-actions .btn-glass { min-height: 46px; padding: 0 12px; font-size: 14.5px; }
  .lab .finale-actions .btn-glass:last-child { grid-column: 1 / -1; }
  .lab .finale-minor { justify-content: flex-start; gap: 8px; }
}
.clover { --size: min(320px, 76vw); position: relative; width: var(--size); aspect-ratio: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; perspective: 900px; transform-style: preserve-3d; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s var(--ease); margin: 6px 0 30px; }
@media (min-width: 1040px) { .clover { --size: clamp(230px, 19vw, 290px); margin: 0 0 44px; } }
.stem { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; pointer-events: none; }
.leaf {
  --r: 50% 50% 12% 50%; --shift: -5%, -5%;
  position: relative; display: grid; place-content: center; justify-items: center; text-align: center; gap: 2px; padding: 14%;
  border-radius: var(--r); border: 1px solid rgba(190, 255, 216, .22); cursor: pointer; color: rgba(233, 255, 242, .6);
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .22), transparent 40%),
    radial-gradient(90% 90% at 70% 85%, rgba(80, 255, 150, .12), transparent 60%),
    linear-gradient(145deg, rgba(140, 255, 190, .1), rgba(14, 120, 62, .14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -16px 36px rgba(0, 30, 14, .35), 0 24px 50px -24px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(8px) saturate(130%); backdrop-filter: blur(8px) saturate(130%);
  transition: transform .5s var(--spring), background .6s, color .4s, box-shadow .6s, border-color .6s, opacity .5s;
  -webkit-tap-highlight-color: transparent;
}
.leaf:nth-of-type(2) { --r: 50% 50% 50% 12%; --shift: 5%, -5%; }
.leaf:nth-of-type(3) { --r: 50% 12% 50% 50%; --shift: -5%, 5%; }
.leaf:nth-of-type(4) { --r: 12% 50% 50% 50%; --shift: 5%, 5%; }
.leaf > span { translate: var(--shift); }
.leaf-n { font: 600 13px/1 var(--head); letter-spacing: .1em; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; opacity: .8; margin-bottom: 4px; }
.leaf-n svg { width: 15px; height: 15px; }
.leaf-q { font: 600 clamp(13px, 3.6vw, 15.5px)/1.25 var(--body); }
.leaf-a { font: 600 clamp(14px, 3.9vw, 17px)/1.2 var(--head); color: #fff; min-height: 0; max-width: 11ch; }
.leaf-a:empty { display: none; }
.leaf[data-state="locked"] { opacity: .42; cursor: default; }
.leaf[data-state="locked"]:hover { transform: none; }
.leaf:hover { transform: translateZ(18px) scale(1.03); }
.leaf[data-state="active"] { color: #fff; opacity: 1; border-color: rgba(190, 255, 216, .45); background:
    radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .3), transparent 42%),
    linear-gradient(145deg, rgba(140, 255, 190, .2), rgba(14, 120, 62, .3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 46px -6px rgba(52, 210, 122, .55), 0 24px 50px -24px rgba(0, 0, 0, .7);
  animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateZ(10px) scale(1.035); } }
.leaf[data-state="active"]::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0 55%, var(--leaf-hi) 72%, var(--gold) 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin 2.4s linear infinite; }
@keyframes spin { to { --spin: 360deg; } }
.leaf[data-state="done"] { color: rgba(233, 255, 242, .82); opacity: 1; border-color: rgba(200, 255, 222, .55);
  background:
    radial-gradient(110% 80% at 28% 16%, rgba(255, 255, 255, .55), transparent 38%),
    radial-gradient(80% 80% at 72% 86%, rgba(160, 255, 200, .5), transparent 60%),
    linear-gradient(150deg, #4be38d 0%, #17a456 52%, #0a6f37 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -14px 30px rgba(0, 60, 25, .45), 0 0 40px -8px rgba(52, 210, 122, .6), 0 26px 50px -24px rgba(0, 0, 0, .8); }
.leaf[data-state="done"] .leaf-q { font-size: clamp(11.5px, 3vw, 13px); opacity: .85; }
.leaf[data-state="bloom"] { color: #2a1a02; opacity: 1; border-color: rgba(255, 236, 180, .8); cursor: pointer;
  background:
    radial-gradient(110% 80% at 28% 16%, rgba(255, 255, 255, .75), transparent 40%),
    linear-gradient(150deg, #ffe79a 0%, #f4c75a 45%, #c9912b 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 60px -4px rgba(244, 199, 90, .75), 0 26px 50px -24px rgba(0, 0, 0, .8);
  animation: bloom .9s var(--spring) both; }
.leaf[data-state="bloom"] .leaf-a { color: #2a1a02; }
@keyframes bloom { 0% { transform: scale(.86); } 60% { transform: scale(1.08) translateZ(20px); } 100% { transform: scale(1); } }
.core { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff7d6 0%, var(--gold) 38%, rgba(244, 199, 90, 0) 72%); box-shadow: 0 0 24px 6px rgba(244, 199, 90, .45); transform: translateZ(30px); transition: transform .6s var(--spring), box-shadow .6s; }
.clover[data-done="3"] .core { transform: translateZ(30px) scale(1.7); box-shadow: 0 0 46px 14px rgba(244, 199, 90, .6); }
.clover.burst::after { content: ''; position: absolute; inset: -14%; border-radius: 50%; border: 2px solid rgba(244, 199, 90, .8); animation: ring 1.1s var(--ease) forwards; pointer-events: none; }
@keyframes ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

.lab-hint { font: 400 15.5px/1.5 var(--body); color: rgba(233, 255, 242, .78); text-align: center; max-width: 34ch; }
.choices { border: 0; margin: 0; padding: 0; width: 100%; max-width: 440px; min-width: 0; }
.choices legend { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 10px; font: 600 17px/1.3 var(--head); color: #fff; }
.step-tag { font: 600 12px/1 var(--body); letter-spacing: .08em; padding: 5px 8px; border-radius: 999px; background: rgba(147, 255, 196, .14); color: var(--leaf-hi); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; border-radius: 16px; text-align: left; cursor: pointer; font: 600 16px/1.25 var(--body); color: #effff5;
  border: 1px solid rgba(147, 255, 196, .2); background: linear-gradient(160deg, rgba(147, 255, 196, .1), rgba(8, 30, 18, .5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); transition: transform .35s var(--spring), border-color .3s, background .3s, box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.choice:hover { transform: translateY(-3px); border-color: rgba(147, 255, 196, .55); background: linear-gradient(160deg, rgba(147, 255, 196, .2), rgba(8, 30, 18, .5)); box-shadow: 0 14px 30px -18px rgba(52, 210, 122, .7), inset 0 1px 0 rgba(255, 255, 255, .16); }
.choice:active { transform: scale(.97); }
.choice[aria-pressed="true"] { border-color: var(--leaf-hi); box-shadow: 0 0 0 1px var(--leaf-hi) inset; }
.choice svg { width: 22px; height: 22px; color: var(--leaf-hi); }
.choices.enter .choice { animation: chip-in .55s var(--spring) both; }
.choices.enter .choice:nth-child(2) { animation-delay: .05s; } .choices.enter .choice:nth-child(3) { animation-delay: .1s; } .choices.enter .choice:nth-child(4) { animation-delay: .15s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.choices[hidden] { display: none; }

/* ---------- stage: the live build ---------- */
.stage { grid-area: stage; position: relative; display: grid; gap: 12px; align-self: center; grid-template-columns: minmax(0, 1fr); }
.phone { position: relative; justify-self: center; width: min(100%, 380px); container-type: inline-size; }
@media (min-width: 1040px) {
  .stage { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); grid-template-areas: "phone hud" "phone sauce"; grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 14px; align-items: start; }
  .phone { grid-area: phone; width: 100%; }
  .hud { grid-area: hud; align-self: end; justify-self: start; margin-top: 64px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .sauce { grid-area: sauce; }
  .sauce::before { content: ''; position: absolute; right: 100%; top: 46px; width: 40px; height: 2px; background: linear-gradient(90deg, transparent, var(--leaf-hi) 40%, transparent 60%) 0 0 / 200% 100%, rgba(147, 255, 196, .2); animation: beam 1.4s linear infinite; }
}
@keyframes beam { to { background-position: -200% 0, 0 0; } }
.door-glow { position: absolute; left: -18%; right: -18%; top: -8%; bottom: -4%; border-radius: 999px 999px 40px 40px; pointer-events: none; z-index: -1; opacity: 0; transform: scaleY(.6); transform-origin: 50% 100%; transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
  background: radial-gradient(55% 65% at 50% 100%, rgba(255, 220, 140, .5), rgba(255, 190, 90, .14) 52%, transparent 76%); }
.stage[data-state="done"] .door-glow { opacity: 1; transform: none; }
.hud { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 12.5px/1 var(--body); letter-spacing: .08em; color: rgba(195, 248, 218, .72); }
.hud-live { display: inline-flex; align-items: center; gap: 8px; }
.hud-live i { width: 7px; height: 7px; border-radius: 50%; background: #6b7f73; }
.stage[data-state="building"] .hud-live i, .stage[data-state="done"] .hud-live i { background: var(--leaf); box-shadow: 0 0 10px var(--leaf); animation: pulse 1.6s infinite; }
.hud b { font-weight: 600; color: #eafff2; }
.device { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(190, 255, 216, .16); background: rgba(6, 22, 14, .72);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08); transition: box-shadow .8s; }
.stage[data-state="done"] .device { box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .9), 0 0 80px -20px rgba(244, 199, 90, .35), inset 0 1px 0 rgba(255, 255, 255, .1); }
.device-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(190, 255, 216, .1); }
.device-bar > i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.device-bar > i:nth-child(1) { background: #ff6b5e; } .device-bar > i:nth-child(2) { background: #ffc24a; } .device-bar > i:nth-child(3) { background: #2fd06f; }
.url { margin-left: 10px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12.5px/24px var(--body); padding: 0 12px; border-radius: 8px; background: rgba(0, 0, 0, .28); color: rgba(233, 255, 242, .75); }
.scan { position: absolute; inset: 36px 0 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent 0, rgba(147, 255, 196, .0) 40%, rgba(147, 255, 196, .35) 49%, rgba(255, 255, 255, .8) 50%, rgba(147, 255, 196, .2) 51%, transparent 60%) 0 0 / 100% 220%; }
.device.is-building .scan { animation: scan .95s var(--ease) both; }
@keyframes scan { 0% { opacity: 1; background-position: 0 120%; } 100% { opacity: 0; background-position: 0 -40%; } }

/* the demo lives in a phone: most visitors and most of their customers are on one */
.device { border-radius: 40px; border: 9px solid #050806; outline: 1px solid rgba(190, 255, 216, .22); outline-offset: 0; }
.device-bar { justify-content: center; height: 32px; background: transparent; border: 0; }
.device-bar > i { display: none; }
.url { flex: 0 1 auto; max-width: 74%; margin: 0; font-size: 11.5px; line-height: 20px; text-align: center; }
.scan { inset-block-start: 32px; }
@media (min-width: 1040px) {
  .demo { height: min(560px, calc(100svh - 290px)); min-height: 400px !important; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--demo-muted) 50%, transparent) transparent; }
}

.sauce { position: relative; z-index: 3; border-radius: 18px; padding: 14px 16px 12px; color: #eafff2;
  border: 1px solid rgba(190, 255, 216, .2); background: linear-gradient(160deg, rgba(20, 60, 38, .86), rgba(6, 22, 14, .9));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.sauce-head { display: flex; align-items: center; gap: 12px; }
.sauce-head b { display: block; font: 600 15px/1.2 var(--head); letter-spacing: .02em; }
.sauce-head small { display: block; font-size: 12.5px; color: rgba(233, 255, 242, .66); }
.bottle { width: 26px; height: 42px; flex: none; overflow: visible; }
.bottle-glass { fill: rgba(190, 255, 216, .08); stroke: rgba(190, 255, 216, .6); stroke-width: 1.4; }
.bottle-cap { fill: var(--gold); }
.bottle-fill { fill: #34d27a; transform: translateY(calc(var(--fill, 0) * -64px)); transition: transform 1s var(--spring); }
.sauce-lines { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 5px; counter-reset: line; }
.sauce-lines li { counter-increment: line; position: relative; padding-left: 24px; min-height: 18px; font: 400 13px/1.45 var(--body); color: rgba(233, 255, 242, .92); }
.sauce-lines li::before { content: counter(line); position: absolute; left: 0; top: 1px; width: 16px; text-align: right; font: 400 11px/1.6 var(--body); color: rgba(147, 255, 196, .5); }
.sauce-lines li:empty::after { content: ''; display: block; height: 8px; margin-top: 6px; width: 70%; border-radius: 4px; background: linear-gradient(90deg, rgba(147, 255, 196, .08), rgba(147, 255, 196, .18), rgba(147, 255, 196, .08)) 0 0 / 200% 100%; animation: shimmer 1.6s linear infinite; }
.sauce-lines li:nth-child(even):empty::after { width: 52%; }
.sauce-lines li.typed { animation: type .7s steps(18) both; }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sauce-lines b { color: var(--leaf-hi); font-weight: 600; }
.sauce-note { font-size: 12.5px; color: rgba(233, 255, 242, .62); border-top: 1px dashed rgba(190, 255, 216, .18); padding-top: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }
/* the one simulation note lives inside the phone, under the demo */
.device-note { margin: 0; padding: 8px 14px 10px; font-size: 11.5px; line-height: 1.45; text-align: center; color: rgba(233, 255, 242, .62); background: rgba(0, 0, 0, .35); border-top: 1px solid rgba(190, 255, 216, .1); }
.device-note b { color: var(--gold); font-weight: 600; }
.sauce-toggle { margin-left: auto; display: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(147, 255, 196, .35); background: rgba(147, 255, 196, .08); color: var(--leaf-hi); font: 600 14px/1 var(--body); cursor: pointer; }
/* phones: the next step stays in reach once the demo is built */
.dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 20px; background: rgba(4, 16, 10, .86); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 20px 50px -18px #000, 0 0 0 1px rgba(147, 255, 196, .22) inset; animation: rise .5s var(--ease) both; }
.dock[hidden] { display: none; }
.dock .btn { min-height: 48px; padding: 0 12px; font-size: 16px; }
@media (min-width: 1040px) { .dock { display: none !important; } }

/* ---------- finale ---------- */
.finale { display: grid; justify-items: center; gap: 16px; text-align: center; padding-top: 6px; }
.finale[hidden] { display: none; }
.finale.enter { animation: rise .9s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.finale-msg { font: 400 clamp(18px, 3.6vw, 24px)/1.45 var(--body); color: rgba(233, 255, 242, .8); }
.finale-msg b { display: block; font-weight: 600; color: #fff; }
.finale-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.finale-minor { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; font: 600 16px/1 var(--head); text-decoration: none; cursor: pointer; border: 0; transition: transform .35s var(--spring), box-shadow .35s, background .3s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn-door { color: #2a1a02; background: linear-gradient(140deg, #ffe9a6, var(--gold) 45%, var(--gold-deep)); box-shadow: 0 0 0 1px rgba(255, 236, 180, .7) inset, 0 16px 40px -14px rgba(244, 199, 90, .8); animation: door-pulse 2.8s ease-in-out infinite; padding-inline: 28px; font-size: 17px; }
@keyframes door-pulse { 50% { box-shadow: 0 0 0 1px rgba(255, 236, 180, .7) inset, 0 16px 60px -8px rgba(244, 199, 90, .95); } }
.btn-glass { color: #eafff2; background: rgba(147, 255, 196, .08); box-shadow: 0 0 0 1px rgba(147, 255, 196, .3) inset; }
.btn-glass:hover { background: rgba(147, 255, 196, .16); }
.link-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer; font: 400 16px/1 var(--body); color: rgba(233, 255, 242, .8); text-decoration: underline; text-decoration-color: rgba(147, 255, 196, .35); text-underline-offset: 5px; }
.link-btn:hover { color: #fff; }
.scroll-cue { position: absolute; left: 50%; bottom: 14px; width: 26px; height: 40px; margin-left: -13px; border-radius: 14px; border: 1.5px solid rgba(195, 248, 218, .4); display: none; }
.scroll-cue i { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--leaf-hi); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 60% { transform: translateY(10px); opacity: 0; } 61% { transform: none; opacity: 0; } }
@media (min-width: 1040px) and (min-height: 760px) { .scroll-cue { display: block; } }

/* without JavaScript the game is replaced by a sentence; everything below works */
.nojs-demo { display: none; grid-column: 1 / -1; max-width: 640px; color: rgba(233, 255, 242, .8); }
html:not(.js) .lab, html:not(.js) .stage, html:not(.js) .finale { display: none; }
html:not(.js) .nojs-demo { display: block; }

/* ---------- the demo inside the device ---------- */
.demo {
  --demo-bg: #0b1d2c; --demo-surface: #10283c; --demo-text: #cfe7ff; --demo-muted: #7fa3c4; --demo-accent: #58c4ff; --demo-on-accent: #04121f; --demo-line: #24476a;
  --demo-font: 'Kanit', system-ui, sans-serif; --demo-radius: 8px; --demo-hero-tint: rgba(88, 196, 255, .2);
  position: relative; min-height: 440px; background: var(--demo-bg); color: var(--demo-text); font-family: var(--demo-font);
  transition: background .7s var(--ease), color .7s var(--ease);
}
.demo[data-draft] { background-image: linear-gradient(rgba(88, 196, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(88, 196, 255, .07) 1px, transparent 1px); background-size: 22px 22px; }
@media (max-width: 1039px) { .demo { min-height: 520px; } }
.demo-empty { padding: 18px; display: grid; gap: 12px; }
.ske { border-radius: 8px; background: linear-gradient(90deg, rgba(147, 255, 196, .05), rgba(147, 255, 196, .12), rgba(147, 255, 196, .05)) 0 0 / 200% 100%; animation: shimmer 1.8s linear infinite; }
.ske-nav { height: 26px; width: 46%; }
.ske-hero { height: 150px; }
.ske-line { height: 14px; width: 82%; } .ske-line.short { width: 56%; }
.ske-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ske-card { height: 80px; }
.demo-wait { text-align: center; font: 600 16px/1.5 var(--body); color: rgba(233, 255, 242, .82); margin-top: 6px; }
.demo-wait small { font: 400 13.5px/1.5 var(--body); color: rgba(233, 255, 242, .55); }

.d { display: grid; gap: 14px; padding: 14px 16px 16px; }
.blk { animation: blk .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes blk { from { opacity: 0; transform: translateY(12px); filter: blur(6px); clip-path: inset(0 0 100% 0 round var(--demo-radius)); } to { clip-path: inset(0 0 0 0 round var(--demo-radius)); } }
.d-nav { display: flex; align-items: center; gap: 10px; }
.d-logo { width: 32px; height: 32px; border-radius: calc(var(--demo-radius) * .7 + 4px); display: grid; place-items: center; font-weight: 600; font-size: 16px; background: var(--demo-accent); color: var(--demo-on-accent); }
.d-brand { font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; }
.d-menu { margin-left: auto; display: flex; gap: 14px; font-size: 13px; color: var(--demo-muted); }
@container (max-width: 560px) { .d-menu span:not(:last-child) { display: none; } }
.d-hero { position: relative; display: grid; gap: 0; border-radius: var(--demo-radius); overflow: hidden; background: var(--demo-surface); border: 1px solid var(--demo-line); }
.d-art { position: relative; aspect-ratio: 16 / 7; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(70% 90% at 25% 30%, color-mix(in srgb, var(--demo-accent) 55%, transparent), transparent 70%), radial-gradient(60% 80% at 85% 80%, var(--demo-hero-tint), transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--demo-accent) 22%, var(--demo-surface)), var(--demo-surface)); }
@container (max-width: 560px) { .d-art { aspect-ratio: 16 / 10; } }
.d-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-art > svg { width: 30%; height: auto; max-height: 70%; aspect-ratio: 1; color: var(--demo-on-accent); opacity: .9; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .25)); stroke-width: 1.2; }
.d-art .orb { position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--demo-accent) 40%, white); opacity: .35; filter: blur(2px); }
.d-art .orb:nth-of-type(1) { width: 26%; aspect-ratio: 1; left: 6%; top: 12%; } .d-art .orb:nth-of-type(2) { width: 14%; aspect-ratio: 1; right: 10%; bottom: 10%; }
.d-hero-text { padding: 14px 16px 16px; display: grid; gap: 6px; justify-items: start; }
.d-hero-text h3 { font: 600 clamp(19px, 5.5cqi, 26px)/1.2 var(--demo-font); }
.d-hero-text p { font-size: 13.5px; color: var(--demo-muted); line-height: 1.5; }
.d-cta { margin-top: 6px; border: 0; cursor: pointer; padding: 10px 18px; border-radius: max(var(--demo-radius), 6px); background: var(--demo-accent); color: var(--demo-on-accent); font: 600 14px/1 var(--demo-font); }
.d-widget { border-radius: var(--demo-radius); border: 1px solid var(--demo-line); background: var(--demo-surface); padding: 14px; min-height: 132px; }
.d-widget.ske-box { display: grid; place-items: center; border-style: dashed; color: var(--demo-muted); font-size: 13.5px; background: transparent; }
.d-sim { font-size: 12px; color: var(--demo-muted); text-align: center; }
.d-try { font-size: 12.5px; color: var(--demo-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.d-try::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--demo-accent); animation: pulse 1.8s infinite; }

/* widgets */
.w-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--demo-line); margin-bottom: 10px; }
.w-tab { border: 0; background: none; cursor: pointer; padding: 8px 10px; font: 500 14px/1 var(--demo-font); color: var(--demo-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 40px; }
.w-tab[aria-selected="true"] { color: var(--demo-text); border-color: var(--demo-accent); }
.w-panel { font-size: 14px; line-height: 1.55; animation: chip-in .4s var(--ease) both; }
.w-panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.w-panel li { display: flex; justify-content: space-between; gap: 10px; }
.w-panel li span { color: var(--demo-muted); }
.w-contact { display: flex; flex-wrap: wrap; gap: 8px; }
.w-pill { border: 1px solid var(--demo-line); background: var(--demo-bg); color: var(--demo-text); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; font: 500 13.5px/1 var(--demo-font); }
.w-pill:hover, .w-pill[aria-pressed="true"] { border-color: var(--demo-accent); }
.w-pill[aria-pressed="true"] { background: var(--demo-accent); color: var(--demo-on-accent); }
.w-pill:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.w-label { font: 600 13px/1.3 var(--demo-font); color: var(--demo-muted); margin: 2px 0 6px; }
.w-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.w-go { width: 100%; border: 0; border-radius: max(var(--demo-radius), 6px); padding: 12px; min-height: 44px; cursor: pointer; background: var(--demo-accent); color: var(--demo-on-accent); font: 600 14.5px/1 var(--demo-font); }
.w-go:disabled { opacity: .45; cursor: not-allowed; }
.w-ok { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--demo-radius); background: color-mix(in srgb, var(--demo-accent) 14%, var(--demo-surface)); font-size: 14px; animation: chip-in .5s var(--spring) both; }
.w-ok svg { width: 26px; height: 26px; color: var(--demo-accent); stroke-width: 2.4; stroke-dasharray: 30; animation: draw .6s .1s var(--ease) both; }
@keyframes draw { from { stroke-dashoffset: 30; } }
.w-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@container (max-width: 420px) { .w-items { grid-template-columns: 1fr; } }
.w-item { display: grid; gap: 4px; padding: 10px; border-radius: var(--demo-radius); border: 1px solid var(--demo-line); background: var(--demo-bg); font-size: 13px; }
@container (max-width: 420px) { .w-item { grid-template-columns: 1fr auto; align-items: center; } .w-item .w-add { grid-column: 2; grid-row: 1 / span 3; } }
.w-item b { font-weight: 600; font-size: 13.5px; }
.w-item span { color: var(--demo-muted); }
.w-price { font-weight: 600; color: var(--demo-text); }
.w-add { border: 1px solid var(--demo-accent); color: var(--demo-text); background: transparent; border-radius: max(var(--demo-radius), 6px); padding: 8px 10px; min-height: 38px; cursor: pointer; font: 600 13px/1 var(--demo-font); }
.w-add:hover { background: var(--demo-accent); color: var(--demo-on-accent); }
.w-cart { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--demo-line); font-size: 13.5px; }
.w-cart b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--demo-accent); color: var(--demo-on-accent); font-size: 13px; margin-right: 6px; }
.w-cart.bump b { animation: bump .45s var(--spring); }
@keyframes bump { 40% { transform: scale(1.35); } }
.w-cart .w-go { width: auto; padding: 10px 14px; }
.w-game { position: relative; height: 150px; border-radius: var(--demo-radius); overflow: hidden; background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--demo-accent) 30%, transparent), transparent 70%), var(--demo-bg); border: 1px solid var(--demo-line); touch-action: manipulation; }
.w-game-hud { position: absolute; left: 10px; top: 8px; font-size: 12.5px; color: var(--demo-muted); z-index: 2; }
.w-game-hud b { color: var(--demo-text); }
.w-token { position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--demo-on-accent); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--demo-accent) 40%, white), var(--demo-accent)); box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--demo-accent) 70%, black); transition: left .45s var(--spring), top .45s var(--spring), transform .2s; }
.w-token svg { width: 30px; height: 30px; stroke-width: 1.6; }
.w-token:active { transform: scale(.88); }
.w-token.pop { animation: pop .35s var(--ease); }
@keyframes pop { 50% { transform: scale(1.3) rotate(20deg); } }
.w-coupon { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; background: color-mix(in srgb, var(--demo-surface) 92%, transparent); animation: chip-in .5s var(--spring) both; font-size: 14px; }
.w-coupon b { font-size: 20px; letter-spacing: .06em; color: var(--demo-accent); }
.w-coupon small { color: var(--demo-muted); font-size: 12px; }

/* ---------- daylight sections ---------- */
.sec { position: relative; padding: 76px 0; }
@media (min-width: 900px) { .sec { padding: 112px 0; } }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }
.kicker { font: 600 13.5px/1 var(--body); letter-spacing: .1em; color: var(--leaf-deep); margin-bottom: 14px; }
.sec h2 { font-size: clamp(26px, 4.6vw, 42px); line-height: 1.22; text-wrap: balance; max-width: 22ch; }
.lede { margin-top: 12px; font-size: 17px; color: var(--ink2); max-width: 60ch; }
/* sections rise in with the scroll itself (CSS only); browsers without scroll timelines just show them */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sec .kicker, .sec h2, .sec .lede, .about-grid > *, .svc, .case, .steps li, .chain li, .faq details, .closing-box {
      animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
    @keyframes rise-in { from { transform: translateY(34px) scale(.985); } }
  }
}
.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--leaf-deep); text-decoration: none; border-bottom: 2px solid rgba(12, 122, 63, .25); padding: 6px 0; }
.text-link:hover { border-color: var(--leaf-deep); }
.text-link svg { transition: transform .3s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }
.btn-ink { margin-top: 30px; color: #f4fff8; background: var(--ink); box-shadow: 0 14px 30px -16px rgba(14, 35, 24, .7); }
.btn-ink:hover { background: #163526; }
.btn-ink svg { transition: transform .3s var(--ease); }
.btn-ink:hover svg { transform: translateX(3px); }

.about { background: linear-gradient(180deg, #e9f3ea 0, var(--paper) 140px); }
.about::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 80px; background: linear-gradient(180deg, var(--night), transparent); opacity: .0; }
.about-grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 360px 1fr; gap: 64px; } }
.portrait { margin: 0; position: relative; justify-self: center; width: min(320px, 76vw); }
@media (min-width: 900px) { .portrait { width: 100%; } }
.portrait img { width: 100%; border-radius: 26px; box-shadow: 0 40px 80px -40px rgba(14, 35, 24, .55); background: #eadfc8; }
.portrait::after { content: ''; position: absolute; inset: -10px -10px auto auto; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, #fff7d6, var(--gold) 40%, transparent 70%); filter: blur(1px); opacity: .8; }
.portrait figcaption { position: absolute; left: 14px; bottom: 14px; font: 600 13px/1 var(--body); letter-spacing: .06em; color: #fff; padding: 8px 12px; border-radius: 999px; background: rgba(14, 35, 24, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.about-copy > p:not(.kicker) { margin-top: 16px; font-size: 17px; color: var(--ink2); max-width: 60ch; }
.creds { list-style: none; padding: 0; margin: 22px 0 18px; display: grid; gap: 10px; }
@media (min-width: 640px) { .creds { grid-template-columns: 1fr 1fr; } }
.creds li { padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 2px; }
.creds b { font: 600 16px/1.3 var(--head); }
.creds span { font-size: 15px; color: var(--ink3); line-height: 1.45; }

.services { background: var(--paper); }
.svc-grid { display: grid; gap: 16px; margin-top: 30px; }
@media (min-width: 860px) { .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.svc { display: grid; align-content: start; gap: 10px; padding: 14px 14px 20px; border-radius: 24px; text-decoration: none; background: var(--card); border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.svc:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(14, 35, 24, .5); border-color: rgba(12, 122, 63, .35); }
.svc h3 { font-size: 22px; padding: 4px 6px 0; }
.svc p { font-size: 16px; color: var(--ink2); padding: 0 6px; }
.svc-proof { font-size: 13.5px; color: var(--leaf-deep); padding: 4px 6px 0; font-weight: 600; }
.slot { margin: 0; position: relative; overflow: hidden; }
.slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.svc-art { aspect-ratio: 3 / 2; border-radius: 16px; background: radial-gradient(80% 70% at 30% 20%, rgba(52, 210, 122, .35), transparent 60%), radial-gradient(70% 70% at 90% 100%, rgba(244, 199, 90, .25), transparent 60%), var(--night2); display: grid; place-items: center; }
.svc-art > span { position: relative; display: block; }
.art-web { width: 64%; aspect-ratio: 16 / 10; border-radius: 10px; border: 1px solid rgba(147, 255, 196, .4); background: rgba(147, 255, 196, .06); box-shadow: 0 20px 40px -20px #000; }
.art-web i { position: absolute; left: 10%; height: 9%; border-radius: 4px; background: rgba(147, 255, 196, .5); }
.art-web i:nth-child(1) { top: 14%; width: 30%; } .art-web i:nth-child(2) { top: 34%; width: 80%; height: 30%; background: linear-gradient(120deg, rgba(52, 210, 122, .5), rgba(244, 199, 90, .45)); } .art-web i:nth-child(3) { top: 74%; width: 46%; background: var(--gold); }
.art-app { width: 30%; aspect-ratio: 9 / 16; border-radius: 14px; border: 2px solid rgba(147, 255, 196, .5); background: rgba(147, 255, 196, .06); display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; padding: 18% 10% 10%; box-shadow: 0 20px 40px -20px #000; }
.art-app i { border-radius: 6px; background: rgba(147, 255, 196, .35); aspect-ratio: 1; }
.art-app i:nth-child(2) { background: var(--gold); } .art-app i:nth-child(3) { background: rgba(52, 210, 122, .7); }
.art-game { width: 50%; aspect-ratio: 1.3; }
.art-game i { position: absolute; width: 42%; aspect-ratio: 5 / 7; border-radius: 8px; border: 1px solid rgba(255, 236, 180, .7); background: linear-gradient(150deg, #13452b, #07180f); box-shadow: 0 16px 30px -12px #000; left: 29%; top: 0; }
.art-game i:nth-child(1) { transform: rotate(-16deg) translateX(-38%); } .art-game i:nth-child(3) { transform: rotate(16deg) translateX(38%); }
.art-game i:nth-child(2) { z-index: 1; background: radial-gradient(circle at 50% 50%, var(--gold) 0 14%, transparent 15%), linear-gradient(150deg, #1b6a3f, #0a2617); }
.svc:hover .art-game i:nth-child(1) { transform: rotate(-22deg) translateX(-48%); } .svc:hover .art-game i:nth-child(3) { transform: rotate(22deg) translateX(48%); }
.art-game i { transition: transform .5s var(--spring); }

.work { background: var(--paper2); }
.work-grid { display: grid; gap: 18px; margin-top: 32px; }
@media (min-width: 760px) { .work-grid { grid-template-columns: 1fr 1fr; gap: 22px; } }
.work-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.work-ideas { margin-top: 18px; font-size: 16px; color: var(--ink2); }
.work-ideas a { color: var(--leaf-deep); font-weight: 600; }
.case { position: relative; display: grid; gap: 6px; text-decoration: none; padding: 10px 10px 22px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.case:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -38px rgba(14, 35, 24, .55); }
.case img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; background: #dfe9df; margin-bottom: 8px; transition: transform .8s var(--ease); }
.case:hover img { transform: scale(1.015); }
.case .badge { position: absolute; top: 22px; left: 22px; font: 600 12.5px/1 var(--body); letter-spacing: .04em; padding: 7px 11px; border-radius: 999px; color: #0e2318; background: rgba(255, 253, 247, .92); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35); }
.case-meta { font: 600 13px/1.3 var(--body); color: var(--leaf-deep); letter-spacing: .03em; padding: 0 10px; }
.case h3 { font-size: 23px; padding: 0 10px; }
.case p { font-size: 16px; color: var(--ink2); padding: 0 10px; }

.process { background: var(--paper); }
.steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.steps li { position: relative; padding: 22px 20px 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.step-n { font: 600 40px/1 var(--head); color: transparent; -webkit-text-stroke: 1.4px var(--leaf-deep); }
.steps h3 { font-size: 20px; }
.steps p { font-size: 16px; color: var(--ink2); }
@media (min-width: 900px) { .steps li:not(:last-child)::after { content: ''; position: absolute; top: 44px; right: -14px; width: 10px; height: 10px; border-top: 2px solid var(--leaf); border-right: 2px solid var(--leaf); transform: rotate(45deg); } }

.learn { background: linear-gradient(180deg, var(--paper), #e8f2e7); }
.learn-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .learn-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.learn-grid > div > p:not(.kicker) { margin-top: 14px; font-size: 17px; color: var(--ink2); max-width: 52ch; }
.learn-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.learn-cta .btn-ink { margin-top: 26px; }
.learn-cta .text-link { margin-top: 26px; }
.chain { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
@media (min-width: 560px) { .chain { grid-template-columns: repeat(3, 1fr); } }
.chain li { padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 2px; transition: transform .4s var(--spring), border-color .3s; }
.chain li:hover { transform: translateY(-4px) rotate(-1deg); border-color: var(--leaf); }
.chain b { font: 600 13.5px/1.3 var(--head); letter-spacing: .06em; color: var(--leaf-deep); }
.chain span { font-size: 16px; font-weight: 600; }
.chain li:last-child { background: var(--ink); color: #eafff2; border-color: var(--ink); }
.chain li:last-child b { color: var(--gold); }

.faq { background: #e8f2e7; }
.faq-list { margin-top: 28px; display: grid; gap: 10px; max-width: 820px; }
.faq details { border-radius: 18px; background: var(--card); border: 1px solid var(--line); padding: 0 18px; transition: box-shadow .3s; }
.faq details[open] { box-shadow: 0 20px 40px -30px rgba(14, 35, 24, .5); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 58px; font: 600 17px/1.35 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 26px/1 var(--body); color: var(--leaf-deep); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--ink2); font-size: 16px; }
.faq details a { color: var(--leaf-deep); font-weight: 600; }

.closing { background: #e8f2e7; padding-top: 0; }
.closing-box { position: relative; overflow: hidden; isolation: isolate; border-radius: 30px; padding: 48px 22px; text-align: center; color: #eafff2; background: radial-gradient(70% 90% at 20% 0%, rgba(52, 210, 122, .35), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(244, 199, 90, .22), transparent 60%), var(--night); }
@media (min-width: 900px) { .closing-box { padding: 72px 48px; } }
.closing-box h2 { margin: 0 auto; max-width: 24ch; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.btn-leaf { color: #04220f; background: linear-gradient(140deg, var(--leaf-hi), var(--leaf)); box-shadow: 0 16px 36px -14px rgba(52, 210, 122, .8); }
.btn-glass-dark { color: #eafff2; background: rgba(147, 255, 196, .08); box-shadow: 0 0 0 1px rgba(147, 255, 196, .3) inset; }

.foot { background: var(--ink); color: rgba(234, 255, 242, .8); padding: 36px 0 calc(36px + env(safe-area-inset-bottom)); }
.foot-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1fr auto; align-items: center; } }
.foot-brand b { color: #fff; }
.foot-brand span { font-size: 14px; color: rgba(234, 255, 242, .6); }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.foot nav a:hover { color: #fff; text-decoration: underline; }

/* ---------- door, toast ---------- */
.door-overlay { position: fixed; inset: 0; z-index: 120; perspective: 1400px; background: #fff7e6; }
.door-overlay[hidden] { display: none; }
.door-still { position: absolute; inset: 0; background: #f3ead6 center / cover no-repeat; transform: scale(1.12); animation: still-in 1.4s var(--ease) forwards; }
@keyframes still-in { to { transform: scale(1); } }
.door-leaf { position: absolute; top: 0; bottom: 0; width: 50.5%; background: linear-gradient(90deg, #3a2414, #5a3a20 60%, #3a2414); box-shadow: inset 0 0 0 10px rgba(0, 0, 0, .18), inset 0 0 80px rgba(0, 0, 0, .4); }
.door-l { left: 0; transform-origin: 0 50%; animation: door-l 1.1s .15s var(--ease) forwards; }
.door-r { right: 0; transform-origin: 100% 50%; animation: door-r 1.1s .15s var(--ease) forwards; }
@keyframes door-l { to { transform: rotateY(-100deg); opacity: .2; } }
@keyframes door-r { to { transform: rotateY(100deg); opacity: .2; } }
.door-text { position: absolute; left: 0; right: 0; bottom: 12vh; text-align: center; font: 600 18px/1 var(--body); color: #3b2414; opacity: 0; animation: rise .6s .7s var(--ease) forwards; text-shadow: 0 1px 12px rgba(255, 255, 255, .8); }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 130; transform: translateX(-50%); padding: 12px 18px; border-radius: 14px; font-size: 15px; color: #eafff2; background: rgba(6, 22, 14, .92); box-shadow: 0 16px 40px -16px #000, 0 0 0 1px rgba(147, 255, 196, .25) inset; animation: rise .4s var(--ease) both; max-width: calc(100vw - 32px); text-align: center; }
.toast[hidden] { display: none; }

/* view transitions: the chosen chip flies into its leaf */
::view-transition-group(pick) { animation-duration: .55s; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .clover { transform: none !important; }
}