/* Production Desk — marketing site. Y2K, modernised.
   Palette: 1999 Chrome Orbital (ice, silver, ink, electric blue, hot pink, lime spark) */
:root{
  --ice:#EEF2F7;
  --paper:#F8FAFC;
  --silver:#C0C0C0;
  --silver-2:#C5CED8;
  --silver-3:#9AA7B8;
  --ink:#151722;
  --ink-2:#2A2E3F;
  --blue:#00BFFF;
  --blue-deep:#0077FF;
  --sky:#7DD3FC;
  --pink:#FF69B4;
  --pink-deep:#E0448C;
  --lime:#B6FF3B;
  --yellow:#FFD93B;
  --bar-h:58px;
  --taskbar-h:54px;
  --shadow-hard:5px 5px 0 var(--ink);
  --font-body:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --font-display:"Anton",Impact,sans-serif;
  --font-bubble:"Bagel Fat One",system-ui,sans-serif;
  --font-pixel:"VT323",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--font-body);
  background:var(--ice);
  color:var(--ink);
  line-height:1.55;
  padding-bottom:calc(var(--taskbar-h) + 18px);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--pink);color:#fff}
a{color:var(--blue-deep)}
img,svg,canvas{display:block;max-width:100%}
.pixel{font-family:var(--font-pixel);letter-spacing:.04em}

/* faint starfield / grid backdrop */
.bg-stars{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(0,191,255,.20) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 12%, rgba(255,105,180,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 42%, rgba(182,255,59,.20) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 66%, rgba(255,105,180,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 74%, rgba(0,191,255,.16) 0 2px, transparent 3px),
    linear-gradient(rgba(21,23,34,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,23,34,.045) 1px, transparent 1px),
    linear-gradient(180deg,#f4f8fc 0%, var(--ice) 40%, #f7ecdc 100%);
  background-size:auto,auto,auto,auto,auto,44px 44px,44px 44px,100% 100%;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;height:var(--bar-h);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 16px;
  background:linear-gradient(180deg,#fdfefe, var(--silver-2));
  border-bottom:2px solid var(--ink);
  box-shadow:0 2px 0 rgba(255,255,255,.8) inset;
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.brand-star{color:var(--pink);font-size:22px;line-height:1}
.brand-name{font-weight:700;letter-spacing:.06em;font-size:15px}
.brand-name b{color:var(--blue-deep)}
.topnav{display:flex;align-items:center;gap:14px}
.topnav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
.topnav a:not(.nav-cta){display:none}
@media(min-width:720px){.topnav a:not(.nav-cta){display:inline}}
.nav-cta{
  background:var(--pink);color:#fff!important;padding:8px 14px;border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);border-radius:4px;
}
.nav-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--font-body);font-weight:700;font-size:16px;
  text-decoration:none;cursor:pointer;border:2px solid var(--ink);border-radius:6px;
  padding:13px 22px;box-shadow:var(--shadow-hard);transition:transform .08s, box-shadow .08s;
  min-height:48px;
}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn-primary{background:var(--pink);color:#fff}
.btn-primary:hover{background:var(--pink-deep)}
.btn-ghost{background:#fff;color:var(--ink)}
.btn-wide{width:100%}

/* ---------- hero ---------- */
.hero{max-width:1180px;margin:0 auto;padding:34px 16px 8px}
.hero-copy{text-align:left;max-width:760px}
.hero-kicker{color:var(--blue-deep);font-size:19px;margin-bottom:10px}
.hero-title{line-height:.94;margin-bottom:16px}
.chrome-line{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(52px,13.5vw,118px);letter-spacing:.01em;
  color:#54677e;
}
@supports((-webkit-background-clip:text) or (background-clip:text)){
  .chrome-line{
    background:linear-gradient(180deg,#ffffff 0%,#dfeaf5 30%,#8fa9c4 47%,#f4faff 52%,#a8c2da 58%,#5f7a99 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-stroke:1.5px rgba(21,23,34,.55);
  }
}
.bubble-line{
  display:block;font-family:var(--font-bubble);font-weight:400;
  font-size:clamp(44px,11vw,96px);color:var(--pink);
  text-shadow:3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
  transform:rotate(-2deg);transform-origin:left center;margin-top:2px;
}
.hero-sub{font-size:clamp(17px,2.4vw,20px);color:var(--ink-2);max-width:620px;margin-bottom:22px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px}
.hero-badges{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.badge{
  font-weight:700;font-size:14px;padding:7px 13px;border:2px solid var(--ink);border-radius:999px;
  box-shadow:3px 3px 0 var(--ink);background:#fff;
}
.badge-pink{background:#ffe0ef}
.badge-blue{background:#dff3ff}
.badge-lime{background:#efffd6}

.hero-stage{margin-top:30px}
.stage-frame{
  position:relative;border:3px solid var(--ink);border-radius:10px;overflow:hidden;
  background:#101019;box-shadow:8px 8px 0 rgba(21,23,34,.9);
  aspect-ratio:4/3.4;
}
@media(min-width:900px){.stage-frame{aspect-ratio:16/9.5}}
.stage-poster{position:absolute;inset:0;transition:opacity .8s ease}
.stage-poster svg{width:100%;height:100%}
.stage-poster.gone{opacity:0;pointer-events:none}
#desk-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:pointer}
.stage-open{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;
  font-family:var(--font-pixel);font-size:20px;letter-spacing:.05em;
  background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:6px;
  padding:10px 18px;cursor:pointer;box-shadow:4px 4px 0 var(--ink);min-height:48px;white-space:nowrap;
}
.stage-open:active{transform:translateX(-50%) translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.stage-hint{
  position:absolute;left:12px;bottom:12px;z-index:5;color:#fff;font-size:17px;
  text-shadow:1px 1px 0 var(--ink);pointer-events:none;
}
.stage-caption{
  display:flex;align-items:center;gap:10px;justify-content:center;
  margin-top:14px;color:var(--ink-2);font-size:17px;flex-wrap:wrap;text-align:center;
}
.stage-caption-dot{color:var(--pink)}

/* ---------- ticker ---------- */
.ticker{
  position:relative;margin:34px 0 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  background:var(--ink);color:#fff;overflow:hidden;padding:9px 0;
}
.ticker-track{display:flex;width:max-content;animation:tick 36s linear infinite}
.ticker-track span{
  font-family:var(--font-pixel);font-size:20px;letter-spacing:.06em;white-space:nowrap;padding-right:8px;
}
.ticker.paused .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker-pause{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:var(--silver-2);border:2px solid var(--ink);border-radius:4px;
  width:34px;height:34px;cursor:pointer;font-size:13px;
}

/* ---------- sections ---------- */
section{max-width:1180px;margin:0 auto;padding:56px 16px 8px}
.section-head{max-width:720px;margin-bottom:26px}
.section-kicker{color:var(--blue-deep);font-size:19px;margin-bottom:6px}
.section-title{font-size:clamp(32px,6vw,52px);line-height:1.05;font-weight:700;letter-spacing:-.01em}
.bubble-word{
  font-family:var(--font-bubble);font-weight:400;color:var(--blue);
  text-shadow:2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
  white-space:nowrap;
}
.section-sub{color:var(--ink-2);font-size:17px;margin-top:8px}

/* proof */
.proof-line{font-size:clamp(19px,3vw,25px);font-weight:600;max-width:820px;line-height:1.4}
.proof-chips{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
@media(min-width:900px){.proof-chips{grid-template-columns:repeat(4,1fr)}}
.chip{
  background:#fff;border:2px solid var(--ink);border-radius:8px;padding:16px;box-shadow:4px 4px 0 var(--ink);
  display:flex;flex-direction:column;gap:4px;
}
.chip b{font-family:var(--font-display);font-weight:400;font-size:34px;color:var(--blue-deep)}
.chip:nth-child(2) b{color:var(--pink-deep)}
.chip:nth-child(3) b{color:#5da400}
.chip:nth-child(4) b{color:#b97f00}
.chip span{font-size:14px;color:var(--ink-2)}

/* ---------- OS windows ---------- */
.window-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:720px){.window-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1120px){.window-grid{grid-template-columns:repeat(4,1fr)}}
.win{
  background:linear-gradient(180deg,#f4f6f9,#e3e9f0);
  border:2px solid var(--ink);border-radius:8px;overflow:hidden;
  box-shadow:var(--shadow-hard);position:relative;
}
.win-bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue) 60%,var(--sky));
  color:#fff;padding:8px 10px;border-bottom:2px solid var(--ink);cursor:grab;user-select:none;
}
.win-bar:active{cursor:grabbing}
.win-title{font-family:var(--font-pixel);font-size:18px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-btns{display:flex;gap:5px;flex:none}
.win-btns i{
  width:16px;height:16px;background:var(--silver-2);border:1.5px solid var(--ink);border-radius:3px;display:block;
  box-shadow:inset 1px 1px 0 #fff;
}
.win-btns i.win-x{background:var(--pink)}
.win-body{padding:18px}
.win-body h3{font-size:20px;margin-bottom:8px}
.win-body p{color:var(--ink-2);font-size:15px}
.win.dragging{box-shadow:10px 12px 0 rgba(21,23,34,.85);cursor:grabbing}

/* ---------- mobile first ---------- */
.mobile{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
@media(min-width:900px){.mobile{grid-template-columns:1.15fr .85fr}}
.mobile-copy p{color:var(--ink-2);font-size:17px;margin:14px 0 18px;max-width:560px}
.check-list{list-style:none;display:grid;gap:10px}
.check-list li{
  background:#fff;border:2px solid var(--ink);border-radius:8px;padding:12px 14px;font-weight:600;font-size:15px;
  box-shadow:3px 3px 0 var(--ink);
}
.check-list li::before{content:"✔ ";color:#5da400}
.phone-wrap{position:relative;display:flex;justify-content:center;padding:18px 0}
.phone{
  width:min(270px,74vw);aspect-ratio:9/18.6;background:var(--ink);border-radius:38px;padding:12px;
  box-shadow:8px 10px 0 rgba(21,23,34,.85);transform:rotate(3deg);
}
.phone-notch{width:96px;height:20px;background:var(--ink);border-radius:0 0 12px 12px;margin:0 auto;position:relative;z-index:2}
.phone-screen{
  background:linear-gradient(180deg,#f4f8fc,#e9f1f9);border-radius:28px;height:100%;margin-top:-20px;
  padding:34px 14px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden;
}
.phone-app{color:var(--blue-deep);font-size:18px;text-align:center}
.phone-card{background:#fff;border:2px solid var(--ink);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column}
.phone-card b{font-size:14px}
.phone-card span{font-size:12.5px;color:var(--ink-2)}
.phone-card-cta{background:var(--pink);color:#fff;text-align:center}
.phone-card-cta b{font-size:15px}
.phone-star{position:absolute;color:var(--pink);font-size:30px}
.phone-star.s1{top:6px;left:8%}
.phone-star.s2{bottom:16px;right:6%;color:var(--blue)}

/* ---------- founder ---------- */
.founder-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.founder-grid{grid-template-columns:repeat(3,1fr)}}
.founder-card{
  background:#fff;border:2px solid var(--ink);border-radius:8px;padding:22px;box-shadow:var(--shadow-hard);
}
.founder-card h3{font-size:20px;margin-bottom:9px}
.founder-card p{color:var(--ink-2);font-size:15.5px}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.price-grid{grid-template-columns:repeat(3,1fr)}}
.price-win .win-body{padding-top:22px}
.price{font-size:20px;color:var(--ink-2)}
.price b{font-family:var(--font-display);font-weight:400;font-size:46px;color:var(--ink)}
.price-alt{font-size:14px;color:var(--silver-3);margin-bottom:10px}
.price-hot{outline:3px solid var(--pink);outline-offset:3px}
.hot-tag{
  display:inline-block;background:var(--lime);border:2px solid var(--ink);border-radius:999px;
  font-family:var(--font-pixel);font-size:16px;padding:2px 10px;margin-bottom:10px;
}
.pricing-note{margin-top:20px;color:var(--ink-2);font-size:15.5px;max-width:720px}

/* ---------- form ---------- */
.demo{display:flex;justify-content:center}
.form-win{width:100%;max-width:620px}
.form-win .win-body h2{font-size:28px;margin-bottom:6px}
.form-win .win-body>p{color:var(--ink-2);margin-bottom:18px}
#lead-form{display:grid;gap:13px}
#lead-form label{display:grid;gap:5px;font-weight:600;font-size:14.5px}
#lead-form input,#lead-form select,#lead-form textarea{
  font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:#fff;border:2px solid var(--ink);border-radius:6px;padding:11px 12px;width:100%;
  box-shadow:inset 2px 2px 0 rgba(21,23,34,.12);
}
#lead-form input:focus,#lead-form select:focus,#lead-form textarea:focus{outline:3px solid var(--sky);outline-offset:1px}
.form-status{font-size:15px;min-height:22px}
.form-status.ok{color:#3f7d00;font-weight:700}
.form-status.err{color:#c2185b;font-weight:700}

/* ---------- footer ---------- */
.footer{
  max-width:1180px;margin:64px auto 0;padding:30px 16px 10px;text-align:center;color:var(--ink-2);
  border-top:2px dashed var(--silver-3);
}
.footer-brand{font-size:19px;color:var(--ink);letter-spacing:.05em}
.footer-nav{display:flex;gap:18px;justify-content:center;margin:14px 0;flex-wrap:wrap}
.footer-nav a{color:var(--ink);font-weight:600;text-decoration:none}
.footer-fine{font-size:13.5px;color:var(--silver-3)}

/* ---------- taskbar ---------- */
.taskbar{
  position:fixed;left:0;right:0;bottom:0;height:var(--taskbar-h);z-index:70;
  display:flex;align-items:center;gap:10px;padding:0 10px;
  background:linear-gradient(180deg,#fdfefe,var(--silver-2) 30%,var(--silver));
  border-top:2px solid var(--ink);
}
.task-start{
  font-weight:700;text-decoration:none;color:#fff;background:linear-gradient(180deg,#38c172,#1d9e57);
  border:2px solid var(--ink);border-radius:6px;padding:8px 14px;box-shadow:2px 2px 0 var(--ink);font-size:14px;
}
.task-open{
  display:none;font-family:var(--font-pixel);font-size:17px;background:#fff;border:2px solid var(--ink);
  border-radius:4px;padding:6px 12px;box-shadow:inset 2px 2px 0 rgba(21,23,34,.15);
}
@media(min-width:720px){.task-open{display:block}}
.task-cta{
  margin-left:auto;background:var(--pink);color:#fff;text-decoration:none;font-weight:700;font-size:14px;
  border:2px solid var(--ink);border-radius:6px;padding:8px 14px;box-shadow:2px 2px 0 var(--ink);
}
@media(min-width:720px){.task-cta{margin-left:0}}
.task-clock{margin-left:auto;font-size:19px;background:#fff;border:2px solid var(--ink);border-radius:4px;padding:5px 10px}
@media(min-width:720px){.task-clock{margin-left:0}}
.taskbar .task-cta{order:2}
.taskbar .task-clock{order:3}
@media(min-width:720px){.taskbar .task-clock{margin-left:auto}}

/* ---------- demo overlay ---------- */
.demo-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(13,14,22,.86);
  display:flex;align-items:stretch;justify-content:center;padding:0;
}
.demo-overlay[hidden]{display:none}
.demo-app{
  background:var(--ice);width:100%;max-width:1060px;display:flex;flex-direction:column;
  border-left:3px solid var(--ink);border-right:3px solid var(--ink);
}
@media(min-width:760px){.demo-overlay{padding:26px}.demo-app{border:3px solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:10px 12px 0 rgba(0,0,0,.5)}}
.demo-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue));color:#fff;padding:10px 14px;
}
.demo-top .pixel{font-size:19px}
.demo-close{
  background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:6px;font-weight:700;
  padding:9px 14px;cursor:pointer;min-height:44px;box-shadow:3px 3px 0 var(--ink);
}
.demo-main{flex:1;display:flex;flex-direction:column;min-height:0}
@media(min-width:760px){.demo-main{flex-direction:row}}
.demo-nav{
  display:flex;gap:8px;padding:12px;background:#fff;border-bottom:2px solid var(--ink);overflow-x:auto;
}
@media(min-width:760px){.demo-nav{flex-direction:column;width:210px;border-bottom:none;border-right:2px solid var(--ink)}}
.demo-nav button{
  font-family:var(--font-body);font-weight:600;font-size:15px;text-align:left;white-space:nowrap;
  background:var(--ice);border:2px solid var(--ink);border-radius:6px;padding:11px 13px;cursor:pointer;min-height:46px;
}
.demo-nav button.active{background:var(--ink);color:#fff}
.demo-view{flex:1;overflow:auto;padding:16px;min-height:0}
.demo-view h3{font-size:21px;margin-bottom:4px}
.demo-view .dv-sub{color:var(--ink-2);font-size:14.5px;margin-bottom:14px}
.dv-row{
  background:#fff;border:2px solid var(--ink);border-radius:8px;padding:12px 14px;margin-bottom:10px;
  display:flex;justify-content:space-between;gap:12px;align-items:center;box-shadow:3px 3px 0 rgba(21,23,34,.85);
}
.dv-row b{font-size:15.5px;display:block}
.dv-row span{font-size:13.5px;color:var(--ink-2)}
.dv-tag{
  font-family:var(--font-pixel);font-size:16px;background:#dff3ff;border:1.5px solid var(--ink);
  border-radius:999px;padding:3px 10px;white-space:nowrap;
}
.dv-tag.pink{background:#ffe0ef}.dv-tag.lime{background:#efffd6}.dv-tag.yellow{background:#fff3bf}
.demo-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 16px;background:#fff;border-top:2px solid var(--ink);font-size:14px;color:var(--ink-2);
}
.demo-foot a{font-weight:700;color:var(--pink-deep);text-decoration:none}

/* reveal defaults (JS animates in) */
.rv{opacity:0;transform:translateY(26px)}
.no-anim .rv{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none;flex-wrap:wrap;width:auto}
  .rv{opacity:1;transform:none}
  *{transition:none!important}
}