:root {
  --ink: #14161c;
  --muted: #5e6472;
  --line: #e7e9ee;
  --soft: #f5f6f8;
  --accent: #1f7ae0;
  --free: #1f9d57;
  --paid: #1f6fe0;
  --pixel: 'VT323', Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font: 16px/1.55 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; }
.wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.center { text-align: center; }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -0.3px; font-size: 18px; }
.brand img { width: 34px; height: 34px; image-rendering: pixelated; }
.links { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.links a:not(.btn) { text-decoration: none; color: var(--ink); opacity: .85; }
.links a:not(.btn):hover { opacity: 1; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .12s ease, background .12s ease; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover { background: #2a2e38; transform: translateY(-1px); }
.btn.ghost { background: var(--soft); color: var(--ink); border-color: var(--line); }
.btn.big { padding: 16px 26px; font-size: 17px; border-radius: 10px; }

/* hero */
.hero { text-align: center; padding: 28px 0 40px; }
h1 { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.08; letter-spacing: -1.6px; font-weight: 700; margin: 10px auto 16px; max-width: 900px; }
h1 em, .cta em { font-style: italic; font-weight: 800; }
.lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); max-width: 640px; margin: 0 auto 36px; }
.cast { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 14px Inter, system-ui, sans-serif; color: var(--ink); cursor: pointer; transition: background .12s, border-color .12s; }
.chip small { font-weight: 500; color: var(--muted); font-size: 12px; }
.chip:hover { border-color: #c9ced8; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.on small { color: #b9bfcc; }

/* ---- the desktop: a glossy, early-2010s style screen ---- */
.screen { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(20, 40, 80, .45), 0 0 0 1px rgba(0, 0, 0, .06); text-align: left; }
.wall { position: absolute; inset: 0; background: linear-gradient(180deg, #0b5fc8 0%, #2a8fe8 38%, #7cc8f4 62%, #c9ecff 78%); overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(calc(var(--s) * 6)); opacity: .55; }
.g1 { width: 70%; height: 40%; left: -10%; top: 10%; background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0)); transform: rotate(-12deg); }
.g2 { width: 60%; height: 30%; right: -15%; top: 26%; background: radial-gradient(closest-side, rgba(150,255,230,.7), rgba(150,255,230,0)); transform: rotate(9deg); }
.hill { position: absolute; border-radius: 50%; }
.h1 { width: 140%; height: 70%; left: -30%; top: 62%; background: radial-gradient(ellipse at 50% 0%, #b8f07a 0%, #5cc23c 30%, #2f8f2a 62%, #1d6420 100%); box-shadow: inset 0 calc(var(--s) * 2) calc(var(--s) * 3) rgba(255,255,255,.5); }
.h2 { width: 110%; height: 60%; left: 35%; top: 70%; background: radial-gradient(ellipse at 40% 0%, #a6e86a 0%, #46ac34 36%, #23782a 70%); box-shadow: inset 0 calc(var(--s) * 2) calc(var(--s) * 3) rgba(255,255,255,.45); }
.bub { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,.25) 22%, rgba(120,200,255,.12) 55%, rgba(255,255,255,.35) 100%); border: 1px solid rgba(255,255,255,.55); animation: drift 14s ease-in-out infinite; }
.b1 { width: 9%; aspect-ratio: 1; left: 8%; top: 18%; }
.b2 { width: 5%; aspect-ratio: 1; left: 20%; top: 40%; animation-delay: -3s; }
.b3 { width: 12%; aspect-ratio: 1; right: 12%; top: 8%; animation-delay: -6s; }
.b4 { width: 4%; aspect-ratio: 1; right: 30%; top: 30%; animation-delay: -9s; }
.b5 { width: 6%; aspect-ratio: 1; left: 44%; top: 12%; animation-delay: -11s; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12%); } }

.icons { position: absolute; left: calc(var(--s) * 6); top: calc(var(--s) * 6); display: flex; flex-direction: column; gap: calc(var(--s) * 5); }
.ico { display: flex; flex-direction: column; align-items: center; width: calc(var(--s) * 26); font-size: max(9px, calc(var(--s) * 3.4)); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); text-align: center; line-height: 1.2; }
.ico i { width: calc(var(--s) * 12); height: calc(var(--s) * 10); margin-bottom: calc(var(--s) * 1.4); border-radius: calc(var(--s) * 1); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.folder { background: linear-gradient(#ffe38a, #f2b734); }
.doc { background: linear-gradient(#ffffff, #dfe8f4); width: calc(var(--s) * 9) !important; }

/* a glass window (the distraction) */
.win { position: absolute; border-radius: calc(var(--s) * 2); background: rgba(190, 220, 245, .42); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 10px 30px rgba(0, 30, 70, .35), inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 0 calc(var(--s) * 1.4) calc(var(--s) * 1.4); opacity: 0; transform: scale(.92); transition: opacity .25s ease, transform .25s ease; pointer-events: none; display: flex; flex-direction: column; }
.win.open { opacity: 1; transform: none; }
.win.closing { opacity: 0; transform: scale(.85); transition-duration: .3s; }
.wt { display: flex; align-items: center; justify-content: space-between; height: calc(var(--s) * 7); font-size: max(9px, calc(var(--s) * 3.4)); color: #0e2a48; text-shadow: 0 0 6px rgba(255,255,255,.9); padding-left: calc(var(--s) * 1); }
.x { display: grid; place-items: center; width: calc(var(--s) * 11); height: calc(var(--s) * 5); margin-top: calc(var(--s) * -1.4); border-radius: 0 0 calc(var(--s) * 1.4) calc(var(--s) * 1.4); background: linear-gradient(#e8a493, #c7432b 50%, #b2301a 51%, #d9654c); color: #fff; font-size: max(10px, calc(var(--s) * 4)); border: 1px solid rgba(80, 0, 0, .5); }
.wv { flex: 1; border-radius: calc(var(--s) * 0.8); background: radial-gradient(ellipse at 50% 40%, #3a3f4a, #121419); position: relative; display: grid; place-items: center; overflow: hidden; }
.play { width: 0; height: 0; border-left: calc(var(--s) * 9) solid rgba(255,255,255,.85); border-top: calc(var(--s) * 5.5) solid transparent; border-bottom: calc(var(--s) * 5.5) solid transparent; }
.bar { position: absolute; left: 6%; right: 6%; bottom: 8%; height: calc(var(--s) * 1.2); background: rgba(255,255,255,.25); border-radius: 9px; }
.bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: #e33; border-radius: 9px; }

/* taskbar */
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--s) * 12); display: flex; align-items: center; gap: calc(var(--s) * 2); padding: 0 calc(var(--s) * 3);
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.08) 48%, rgba(10,30,60,.45) 52%, rgba(10,30,60,.6)); border-top: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2; }
.orb { width: calc(var(--s) * 10); height: calc(var(--s) * 10); border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 50% 30%, #bff4ff 0, #3ab6f0 35%, #0b5fb0 70%, #083c78); box-shadow: 0 0 calc(var(--s) * 3) rgba(120, 220, 255, .8), inset 0 -1px 2px rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.6); }
.orb img { width: 62%; height: 62%; image-rendering: pixelated; }
.tb-item { display: flex; align-items: center; gap: calc(var(--s) * 1.5); height: calc(var(--s) * 8.5); padding: 0 calc(var(--s) * 3); border-radius: calc(var(--s) * 1.4); color: #fff; font-size: max(9px, calc(var(--s) * 3.3)); text-shadow: 0 1px 2px rgba(0,0,0,.5);
  background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.35); }
.tb-item img { width: calc(var(--s) * 5); height: calc(var(--s) * 5); image-rendering: pixelated; }
.tb-item.vid { display: none; }
.tb-item.vid.on { display: flex; }
.clock { margin-left: auto; color: #fff; font-size: max(9px, calc(var(--s) * 3.4)); text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* the character layer and their speech bubble */
.pix { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: 3; pointer-events: none; }
.say { position: absolute; z-index: 4; max-width: min(300px, 60%); padding: 6px 11px 7px; background: #fff; border: 2px solid #111; box-shadow: 3px 3px 0 rgba(0,0,0,.25); font: 20px/1.05 var(--pixel); color: #111; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.say.on { opacity: 1; transform: none; }
.say::after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -9px; width: 10px; height: 10px; background: #fff; border-right: 2px solid #111; border-bottom: 2px solid #111; transform: translateX(-50%) rotate(45deg); }

/* ---- scrollytelling ---- */
.story { padding: 70px 0 30px; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 48px; align-items: start; width: min(1360px, calc(100% - 48px)); }
.story-stick { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; } /* the screen stays centered in the window */
.steps { padding: 26vh 0 30vh; }
.step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .35s ease; }
.step.active { opacity: 1; }
.step h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -1px; line-height: 1.12; margin: 6px 0 10px; }
.step p { color: var(--muted); font-size: 17px; margin: 0; max-width: 420px; }
.num { font: 22px var(--pixel); color: var(--accent); }

/* tiles */
.more { padding: 60px 0; }
.more h2, #characters h2, .faq h2 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -1.2px; margin: 0 0 10px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.tile { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.tile b { display: block; font-size: 17px; margin-bottom: 6px; }
.tile p { margin: 0; color: var(--muted); font-size: 15px; }

/* characters */
#characters { padding: 60px 0; }
.sub { color: var(--muted); margin: 0 0 26px; }
.bundle { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-radius: 14px; margin-bottom: 18px;
  background: linear-gradient(100deg, #eef6ff, #f4fff2); border: 1px solid #dbe8f7; }
.bundle b { display: block; font-size: 18px; }
.bundle span { color: var(--muted); font-size: 15px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(20, 40, 80, .35); }
.cstage { position: relative; background: linear-gradient(#dff1ff, #f3faff); cursor: pointer; }
.cstage canvas { display: block; width: 100%; image-rendering: pixelated; }
.tag { position: absolute; top: 10px; left: 10px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tag.free { color: var(--free); }
.tag.paid, .tag.premium { color: var(--paid); }
.cbody { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.cbody h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -0.3px; }
.cbody p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; flex: 1; }
.cact .btn { width: 100%; justify-content: center; }
.soon { color: var(--muted); font-size: 14px; }

/* faq */
.faq { padding: 60px 0; max-width: 760px; }
.faq h2 { margin-bottom: 24px; }
details { border-top: 1px solid var(--line); padding: 16px 4px; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; }
summary::after { content: '+'; color: var(--muted); font-weight: 400; font-size: 22px; line-height: 1; }
details[open] summary::after { content: '–'; }
details p { color: var(--muted); margin: 10px 0 0; }

/* final call */
.cta { text-align: center; padding: 70px 0 40px; }
.cta h2 { font-size: clamp(30px, 4.2vw, 48px); letter-spacing: -1.4px; line-height: 1.1; margin: 0 auto 26px; max-width: 760px; font-weight: 700; }
.small { color: var(--muted); font-size: 14px; margin-top: 12px; }

/* footer: a taskbar with someone living on it */
.foot { margin-top: 40px; position: relative; }
.foot-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; padding: 18px 0; }
.foot-row a { text-decoration: none; }
.foot-stage { position: relative; height: 192px; --s: 3px; }
.foot-stage .say { font-size: 20px; }
.foot-bar { position: relative; --s: 3px; height: 36px; background: linear-gradient(180deg, #5d8fc9, #2f5f9e 48%, #1c4580 52%, #24508f); }

@media (max-width: 860px) {
  .links a:not(.btn) { display: none; }
  .story-grid { grid-template-columns: 1fr; gap: 0; }
  .story-grid { width: calc(100% - 32px); }
  .story-stick { top: 76px; height: auto; display: block; z-index: 5; background: #fff; padding: 10px 0; }
  .steps { padding: 10vh 0 20vh; }
  .step { min-height: 46vh; }
  .tiles { grid-template-columns: 1fr; }
  .bundle { flex-direction: column; align-items: flex-start; }
  .say { font-size: 16px; }
}
@media (max-width: 600px) { .icons { display: none; } }