/* =====================================================================
   BUILD ONCE. CHILL FOREVER. — the artwork, alive.
   All scene overlays are positioned in % of the 1536×1024 artwork,
   so they stay pixel-locked to the art at any size.
   ===================================================================== */
:root {
  --ink: #0b0e18;
  --panel: #10141f;
  --amber: #ffb347;
  --coral: #ff6b6b;
  --teal: #35e0c8;
  --lime: #7dff8a;
  --pink: #ff5fa2;
  --paper: #f4ecdd;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --disp: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --hand: "Caveat", cursive;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--paper); font-family: var(--disp); overflow-x: hidden; }
img { display: block; }
button { font-family: inherit; cursor: pointer; }

/* ---------- top bar ---------- */
#topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 90; height: 58px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 22px;
  background: linear-gradient(180deg, rgba(8,10,18,.92), rgba(8,10,18,.55) 75%, transparent);
}
.brand { font-weight: 900; letter-spacing: .14em; font-size: 14px; display: flex; align-items: center; gap: 9px; }
.brand span:last-child { color: var(--amber); }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.cta-chip {
  font-size: 13px; font-weight: 700; color: #2b1200; text-decoration: none;
  background: linear-gradient(180deg, #ffd28a, #ff9d3c); padding: 9px 18px; border-radius: 999px;
  box-shadow: 0 6px 22px rgba(255,150,50,.35);
}

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

/* ---------- stage / sticky ---------- */
#stage-wrap { height: 300vh; position: relative; }
#stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
#stage-inner {
  width: 100%; max-width: 1560px; margin: 0 auto; padding: 70px 20px 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: center;
}

/* ---------- the scene ---------- */
#scene { position: relative; }
#tilt {
  position: relative; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,190,110,.14), 0 0 70px rgba(255,120,40,.1);
  transform-style: preserve-3d; will-change: transform;
}
#scene { perspective: 1400px; }
#base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.fx, .layer, .grade { position: absolute; pointer-events: none; }
canvas.fx { inset: 0; width: 100%; height: 100%; }

/* ---------- sun ---------- */
.sunglow {
  left: 20.5%; top: 30.5%; width: 18%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,150,.85) 0%, rgba(255,160,70,.4) 30%, rgba(255,120,50,.12) 55%, transparent 72%);
  mix-blend-mode: screen; animation: sunpulse 5.5s ease-in-out infinite;
  transform: translate(-0%, -0%);
}
@keyframes sunpulse { 50% { opacity: .55; scale: 1.12; } }
.sunrays {
  left: 12%; top: 22%; width: 35%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 14deg, rgba(255,200,120,.16) 17deg 20deg, transparent 23deg 44deg,
    rgba(255,190,110,.12) 47deg 51deg, transparent 54deg 88deg, rgba(255,200,120,.15) 91deg 95deg,
    transparent 98deg 150deg, rgba(255,190,110,.12) 153deg 157deg, transparent 160deg 240deg,
    rgba(255,200,120,.13) 243deg 247deg, transparent 250deg 320deg, rgba(255,190,110,.1) 323deg 326deg, transparent 329deg);
  mix-blend-mode: screen; opacity: .8;
  -webkit-mask-image: radial-gradient(circle, black 0 38%, transparent 62%);
  mask-image: radial-gradient(circle, black 0 38%, transparent 62%);
  animation: rays 40s linear infinite;
}
@keyframes rays { to { rotate: 360deg; } }

/* ---------- living layers (exact feathered crops) ---------- */
.person {
  left: 0%; top: 14.45%; width: 37.43%; height: 85.55%;
  transform-origin: 52% 90%;
  animation: rock 7.6s ease-in-out infinite;
}
/* irregular rock + a breathing swell so he reads as alive, not metronomic */
@keyframes rock {
  0%, 100% { transform: rotate(-.4deg); }
  28%      { transform: rotate(.18deg) translateY(-1px) scale(1.003); }
  55%      { transform: rotate(.45deg) translateY(-2px); }
  78%      { transform: rotate(-.05deg) translateY(-1px) scale(1.0035); }
}

/* palm fronds (top-left) + foliage (bottom-left): slow breeze sway */
.palm {
  left: 0%; top: 0%; width: 11.458%; height: 31.445%;
  transform-origin: 20% 80%;
  animation: sway 6.4s ease-in-out infinite alternate;
}
.leaves {
  left: 0%; top: 75.78%; width: 11.72%; height: 24.22%;
  transform-origin: 25% 95%;
  animation: sway 5.2s ease-in-out -2.1s infinite alternate;
}
@keyframes sway { from { transform: rotate(-.35deg); } to { transform: rotate(.45deg); } }

.holo-pulse {
  left: 41.8%; top: 18.16%; width: 20.83%; height: 20.7%;
  mix-blend-mode: screen; opacity: 0; animation: holopulse 3.6s ease-in-out infinite;
}
@keyframes holopulse { 50% { opacity: .5; } }
.holo-hot .holo-pulse { animation-duration: 1.1s; }

#holoLine { left: 41.8%; top: 18.16%; width: 20.83%; height: 20.7%; overflow: visible; }
#mrrPath { filter: drop-shadow(0 0 6px rgba(90,255,150,.9)); }
#mrrTip { filter: drop-shadow(0 0 8px #a0ffc0); animation: tipblink 1.4s ease-in-out infinite; }
@keyframes tipblink { 50% { opacity: .4; } }

.mug-layer { left: 32.42%; top: 74.02%; width: 12.63%; height: 20.9%; transform-origin: 50% 85%; }
.mug-hot .mug-layer { animation: wobble .5s ease-in-out; }
@keyframes wobble { 25% { rotate: -3deg; } 60% { rotate: 2.4deg; } 85% { rotate: -1deg; } }

.books-layer { left: 11.85%; top: 76.37%; width: 14.97%; height: 22.85%; transition: transform .35s ease; }
.books-hot .books-layer { transform: translateY(-1.2%) rotate(-.8deg); }

.postit { transition: transform .3s cubic-bezier(.3,1.6,.5,1), filter .3s ease; transform-origin: top center; }
.postit.p1 { left: 90.49%; top: 5.66%; width: 8.85%; height: 12.11%; }
.postit.p2 { left: 90.1%; top: 19.34%; width: 9.51%; height: 14.06%; }
.postit.p3 { left: 87.89%; top: 34.96%; width: 9.57%; height: 13.87%; }
.postit.p4 { left: 87.56%; top: 49.12%; width: 8.92%; height: 14.16%; }
.postit.peel { transform: rotate(-4deg) scale(1.07) translateY(-2%); filter: drop-shadow(-6px 10px 12px rgba(0,0,0,.45)) brightness(1.06); z-index: 5; }

.plaque-shine {
  left: 70.44%; top: 53.91%; width: 13.67%; height: 14.65%; border-radius: 6px;
  background: linear-gradient(115deg, transparent 30%, rgba(255,245,200,.75) 46%, rgba(255,255,255,.9) 50%, rgba(255,245,200,.75) 54%, transparent 70%);
  background-size: 300% 100%; background-position: 130% 0;
  mix-blend-mode: screen; opacity: 0;
}
.plaque-hot .plaque-shine { opacity: 1; animation: shine 1.1s ease forwards; }
@keyframes shine { from { background-position: 130% 0; } to { background-position: -60% 0; } }

/* ---------- laptop live screen ---------- */
#laptopScreen {
  position: absolute; left: 50.13%; top: 51.17%; width: 18.62%; height: 20.61%;
  clip-path: polygon(0% 2%, 100% 0%, 98.2% 94.8%, 3.8% 100%);
  pointer-events: none;
}
#confettiFx { position: absolute; inset: 0; width: 100%; height: 100%; }
#terminal {
  position: absolute; inset: 0; background: #060b10; padding: 6% 7%;
  opacity: 0; transition: opacity .25s ease;
}
#terminal.on { opacity: 1; }
#termText {
  font-family: var(--mono); font-weight: 700; color: #7dffb2;
  font-size: clamp(6px, .62vw, 10px); line-height: 1.75; white-space: pre-wrap;
  text-shadow: 0 0 6px rgba(90,255,150,.5);
}
#termBar { position: absolute; left: 7%; right: 7%; bottom: 12%; height: 9%; background: #10202e; border-radius: 3px; overflow: hidden; display: none; }
#terminal.bar #termBar { display: block; }
#termBar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #35e0c8, #7dff8a); transition: width .18s linear; }

/* ---------- phone notifications ---------- */
#phoneNotif {
  position: absolute; left: 66.15%; top: 76.6%; width: 10.4%;
  transform: rotate(12.5deg); pointer-events: none;
}
.notif {
  background: rgba(28, 30, 36, .95); border-radius: 8px; padding: 5.5% 8%;
  margin-bottom: 5%; color: #f2f2f4; font-size: clamp(6px, .58vw, 10px); line-height: 1.45;
  font-family: var(--disp); box-shadow: 0 4px 14px rgba(0,0,0,.55);
  animation: notifin .45s cubic-bezier(.2,1.4,.4,1) both, notifout .4s ease 3.4s both;
}
.notif b { color: #9ec5ff; } .notif .amt { color: #8affc1; font-weight: 900; }
@keyframes notifin { from { opacity: 0; transform: translateY(-90%) scale(.85); } }
@keyframes notifout { to { opacity: 0; transform: translateY(-40%); } }

/* ---------- letter board flip ---------- */
#boardFlip {
  position: absolute; left: 84.7%; top: 66.6%; width: 9.9%; height: 25.8%;
  background: #1b1713; border-radius: 3px; padding: 9% 5%;
  transform: rotate(-1deg); opacity: 0; transition: opacity .4s ease;
  text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 12%;
  box-shadow: inset 0 0 20px rgba(0,0,0,.6);
}
#boardFlip.on { opacity: 1; }
#boardFlip p { font-family: var(--disp); font-weight: 700; color: #efe9db; font-size: clamp(7px, .72vw, 12px); letter-spacing: .08em; line-height: 1.5; }
#boardFlip .heart { color: var(--pink); font-size: clamp(8px, .8vw, 13px); }

/* ---------- speech bubble ---------- */
#bubble {
  position: absolute; left: 21%; top: 13%; max-width: 21%;
  background: #fffdf6; color: #2c2313; border-radius: 14px; border-bottom-left-radius: 2px;
  padding: .7% 1%; font-family: var(--hand); font-weight: 700; font-size: clamp(11px, 1.25vw, 20px);
  line-height: 1.25; box-shadow: 0 8px 24px rgba(0,0,0,.4); rotate: -2deg;
  transition: opacity .3s ease, translate .3s ease;
}
#bubble.hidden { opacity: 0; translate: 0 8px; }

/* ---------- whiteboard fx (svg draws rings/arrows) ---------- */
#wbfx { inset: 0; width: 100%; height: 100%; overflow: visible; }
#wbfx .ring { fill: none; stroke-width: 5; stroke-linecap: round; opacity: 0; }
#wbfx .ring.show { opacity: 1; stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawring .7s ease forwards; }
@keyframes drawring { to { stroke-dashoffset: 0; } }
#wbfx .spark { fill: #fff; opacity: 0; }

/* ---------- color grades (scroll phases) ---------- */
.grade { inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.grade.golden { background: radial-gradient(90% 80% at 28% 42%, rgba(255,170,60,.34), rgba(180,60,30,.18) 60%, rgba(120,30,40,.22)); mix-blend-mode: soft-light; }
.grade.dusk {
  background:
    radial-gradient(60% 55% at 30% 42%, rgba(120,70,160,0) 30%, rgba(30,16,86,.55) 100%),
    linear-gradient(200deg, rgba(34,18,92,.82), rgba(112,28,96,.5) 55%, rgba(6,8,42,.85));
  mix-blend-mode: multiply;
}
body[data-phase="1"] .grade.golden { opacity: 1; }
body[data-phase="2"] .grade.golden { opacity: .35; }
body[data-phase="2"] .grade.dusk { opacity: 1; }

/* ---------- hotspots ---------- */
#hotspots button {
  position: absolute; background: transparent; border: 0; border-radius: 12px;
  outline-offset: 3px; z-index: 10;
}
#hotspots button:hover, #hotspots button:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255,220,150,.65), inset 0 0 26px rgba(255,190,90,.18), 0 0 22px rgba(255,190,90,.25);
  background: radial-gradient(circle, rgba(255,210,130,.07), transparent 70%);
}
#hotspots button:focus-visible { box-shadow: inset 0 0 0 3px var(--teal); }
#hotspots button .tag {
  position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; white-space: nowrap;
  color: #ffedca; background: rgba(10, 12, 24, .88); border: 1px solid rgba(255,190,110,.4);
  padding: 4px 11px; border-radius: 999px; opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
#hotspots button:hover .tag, #hotspots button:focus-visible .tag { opacity: 1; }
/* touch: hover sticks after a tap — show the tag briefly, then fade it out */
@media (hover: none) {
  #hotspots button:hover .tag, #hotspots button:focus .tag {
    opacity: 1; animation: tagfade .4s ease 2.4s forwards;
  }
}
@keyframes tagfade { to { opacity: 0; } }
#hotspots button.seen::after {
  content: "✓"; position: absolute; right: -4px; top: -4px; width: 16px; height: 16px;
  background: var(--lime); color: #06310f; font-size: 11px; font-weight: 900;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: .85;
}
#hotspots button.wbnode:hover { box-shadow: inset 0 0 0 2px rgba(120,255,170,.6), 0 0 18px rgba(120,255,170,.3); border-radius: 40px; }

/* ---------- caption ---------- */
#scene-caption { margin-top: 10px; text-align: center; }
#phase-chip {
  display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  color: #ffd9a0; background: rgba(20, 14, 26, .7); border: 1px solid rgba(255,190,110,.3);
  padding: 7px 18px; border-radius: 999px;
}

/* ---------- console ---------- */
#console {
  background: linear-gradient(170deg, #101522, #0c0f1a);
  border: 1px solid rgba(53,224,200,.25); border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(53,224,200,.06);
  font-family: var(--mono); align-self: center;
}
.con-head {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px;
  font-size: 11px; letter-spacing: .18em; color: var(--teal);
  border-bottom: 1px solid rgba(53,224,200,.18); background: rgba(53,224,200,.05);
}
.con-head .ver { color: #55627e; letter-spacing: 0; }
.lights { display: flex; gap: 5px; }
.lights i { width: 9px; height: 9px; border-radius: 50%; background: #ff6058; }
.lights i:nth-child(2) { background: #ffbd2e; } .lights i:nth-child(3) { background: #28c840; }
.con-progress { margin-left: auto; color: var(--amber); letter-spacing: .05em; font-size: 10.5px; }
.con-body { padding: 16px 16px 18px; }
.con-eyebrow { font-size: 10px; letter-spacing: .22em; color: #5a91ff; text-transform: uppercase; min-height: 14px; }
.con-title { font-family: var(--disp); font-weight: 900; font-size: 19px; color: #fff; margin: 8px 0 8px; line-height: 1.2; min-height: 46px; }
.con-copy { font-family: var(--disp); font-size: 13.5px; line-height: 1.55; color: #c3bfb2; min-height: 105px; }
.con-copy .hl { color: var(--lime); }
.con-quests { margin: 14px 0 4px; display: grid; gap: 7px; }
.q { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #8d97ae; }
.q b { margin-left: auto; color: var(--amber); font-weight: 400; }
.qbox { width: 14px; height: 14px; flex: none; border: 2px solid #3d4a63; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.q.done { color: #cfe8d6; } .q.done .qbox { border-color: var(--lime); background: rgba(125,255,138,.12); }
.q.done .qbox::before { content: "✓"; color: var(--lime); font-weight: 900; }
.con-cta {
  display: block; margin-top: 14px; text-align: center; text-decoration: none;
  font-family: var(--disp); font-weight: 900; font-size: 14px; color: #2b1200;
  background: linear-gradient(180deg, #ffd28a, #ff9d3c); padding: 12px 16px; border-radius: 12px;
  box-shadow: 0 8px 26px rgba(255,150,50,.3); transition: transform .15s ease;
}
.con-cta:hover { transform: translateY(-2px); }
.typing::after { content: "▍"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- sales sections ---------- */
#sales { position: relative; z-index: 5; background: var(--ink); }
.strip { padding: 60px 22px 30px; max-width: 1100px; margin: 0 auto; text-align: center; }
.strip-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .3em; color: var(--teal); }
.strip-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 26px; }
.scard { background: var(--panel); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 22px; text-align: left; }
.scard b { display: block; font-size: 15px; letter-spacing: .06em; color: var(--amber); margin-bottom: 8px; }
.scard span { font-size: 13.5px; line-height: 1.5; color: #b9b4a6; }

.block { max-width: 1100px; margin: 0 auto; padding: 80px 22px; }
.block.alt { max-width: none; background: #0e1120; }
.block.alt > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.block h2 { font-size: clamp(28px, 4.5vw, 44px); font-weight: 900; }
.block h2 em { font-style: normal; color: var(--coral); }
.block .lede { margin-top: 14px; font-size: clamp(15px, 2vw, 18px); line-height: 1.6; color: #c9c4b6; max-width: 720px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 34px; }
.col h4 { font-size: 16px; margin-bottom: 8px; color: #ffd9a0; }
.col p { font-size: 14px; line-height: 1.55; color: #ada896; }

.steps { margin-top: 34px; display: grid; gap: 12px; list-style: none; counter-reset: step; }
.steps li {
  display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: baseline;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 18px 20px;
}
.steps b { font-family: var(--mono); color: var(--lime); letter-spacing: .08em; }
.steps span { font-size: 14.5px; line-height: 1.55; color: #c1bcae; }

.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 34px; }
.ocard { background: var(--panel); border: 1px solid rgba(255,190,110,.18); border-radius: 16px; padding: 22px; }
.ocard b { display: block; margin-bottom: 8px; color: #fff; }
.ocard span { font-size: 13.5px; line-height: 1.55; color: #b9b4a6; }
.guarantee {
  margin-top: 26px; padding: 22px 26px; border-radius: 16px; font-size: 15.5px; line-height: 1.6;
  background: linear-gradient(120deg, rgba(125,255,138,.08), rgba(53,224,200,.06));
  border: 1px solid rgba(125,255,138,.35); color: #d9f5de;
}
.guarantee b { color: var(--lime); }
.offer-cta { margin-top: 30px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.big-cta {
  font-weight: 900; font-size: 17px; color: #2b1200; text-decoration: none;
  background: linear-gradient(180deg, #ffd28a, #ff9d3c); padding: 16px 34px; border-radius: 999px;
  box-shadow: 0 12px 40px rgba(255,140,40,.4); transition: transform .15s ease;
}
.big-cta:hover { transform: translateY(-2px) scale(1.02); }
.cta-note { font-size: 12.5px; color: #8d97ae; font-family: var(--mono); }

details { border-bottom: 1px solid rgba(255,255,255,.1); padding: 18px 4px; }
summary { font-weight: 700; font-size: 16px; cursor: pointer; color: #efe9db; }
details p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: #b3ae9f; max-width: 760px; }

footer { text-align: center; padding: 60px 20px 70px; font-weight: 900; letter-spacing: .1em; font-size: 18px; }
.foot-sub { display: block; margin-top: 8px; font-family: var(--mono); font-weight: 400; font-size: 12px; color: #77819c; letter-spacing: .2em; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  #stage-inner { grid-template-columns: 1fr; }
  #console { max-width: 640px; width: 100%; margin: 0 auto; }
  #stage { height: auto; position: static; padding-top: 66px; }
  #stage-inner { padding-top: 0; }
  #stage-wrap { height: auto; }
  .con-copy { min-height: 0; } .con-title { min-height: 0; }
}
@media (max-width: 640px) {
  .steps li { grid-template-columns: 1fr; gap: 6px; }
  #topbar { padding: 0 12px; } .brand { font-size: 12px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .person, .palm, .leaves, .sunglow, .sunrays, #mrrTip, .holo-pulse { animation: none !important; }
  #tilt { transform: none !important; }
  html { scroll-behavior: auto; }
}