:root{
  --night:#050507;
  --uv:#0a110d;
  --uv-line:#1f3a2c;
  --lilac:#eef4f0;
  --lilac-dim:#9db0a5;
  --lotus:#39ff88;
  --sun:#39ff88;
  --mint:#6ef0d0;

  --steel:#0b0d10;
  --steel-2:#1a212b;
  --steel-line:#34404e;
  --frost:#e1e8ef;
  --frost-dim:#9eabba;
  --signal:#ff4d1f;

  --display:'Unbounded', 'Arial Black', system-ui, sans-serif;
  --text:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:radial-gradient(900px 500px at 12% -5%, rgba(57,255,136,.10), transparent 70%), var(--night);
  background-repeat:no-repeat;
  color:var(--lilac);
  font-family:var(--text);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--sun); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:1120px; margin:0 auto; padding-inline:max(20px, env(safe-area-inset-left)); }
.skip{ position:absolute; left:-999px; top:0; background:var(--sun); color:#03150a; padding:.6rem 1rem; z-index:10; }
.skip:focus{ left:12px; top:12px; }

h1,h2,h3{ margin:0; font-weight:700; }
h1{ font-family:var(--display); font-size:clamp(2rem, 6.2vw, 4.1rem); line-height:1.06; letter-spacing:-.02em; max-width:15ch; }
h2{ font-family:var(--display); font-size:clamp(1.7rem, 4.6vw, 3rem); line-height:1.08; letter-spacing:-.015em; }
h3{ font-family:var(--text); font-size:1.1rem; font-weight:600; line-height:1.3; }
p{ margin:0 0 1em; max-width:62ch; }
.lede{ font-size:clamp(1.1rem, 2.2vw, 1.3rem); line-height:1.5; max-width:48ch; color:var(--lilac-dim); }

/* ---------- header ---------- */
.site-head{ padding-block:22px; }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.wordmark{ display:block; text-decoration:none; line-height:0; }
.wordmark img{ height:46px; width:auto; }
.site-head nav{ display:flex; gap:22px; font-size:.98rem; }
.site-head nav a{ text-decoration:none; color:var(--lilac-dim); }
.site-head nav a:hover{ color:var(--lilac); text-decoration:underline; text-underline-offset:5px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:.85rem 1.4rem; border-radius:999px;
  font:600 1rem/1.2 var(--text); text-decoration:none; cursor:pointer;
  border:2px solid transparent; transition:background-color .15s, color .15s, border-color .15s;
}
.btn-primary{ background:var(--lotus); color:#03150a; }
.btn-primary:hover{ background:#7dffb2; }
.btn-ghost{ border-color:currentColor; background:transparent; }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }
.btn.is-soon, .btn[aria-disabled="true"]{ background:transparent; color:var(--lilac-dim); border-color:var(--uv-line); cursor:default; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:1.8rem; }
.world-steel .btn-primary{ background:var(--signal); color:#1c0800; }
.world-steel .btn-primary:hover{ background:#ff6a40; }

/* ---------- hero + live grid ---------- */
.hero{ padding-block:clamp(28px, 6vw, 70px) clamp(40px, 7vw, 90px); }
.hero p.lede{ margin-top:1.4rem; }

.demo{ margin-top:clamp(32px, 6vw, 64px); }
.demo-grid{ display:grid; grid-template-columns:4rem 1fr; gap:6px 14px; align-items:center; }
.demo-label{ font-size:.9rem; font-weight:600; color:var(--c); }
.demo-row{ display:grid; grid-template-columns:repeat(16, 1fr); gap:4px; }
.cell{ aspect-ratio:1 / 1.05; border-radius:4px; background:rgba(236,228,255,.08); }
.cell.on{ background:var(--c); box-shadow:0 0 10px -1px var(--c); }
.cell.now{ box-shadow:inset 0 0 0 2px var(--lilac); background:rgba(236,228,255,.2); }
.cell.on.now{ background:var(--c); filter:brightness(1.25); box-shadow:0 0 14px 1px var(--c), inset 0 0 0 2px #fff; }
.demo-bar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px; }
.demo-bar p{ margin:0; color:var(--lilac-dim); font-size:.95rem; max-width:52ch; }
#hearBtn{ min-width:8.2rem; }

@media (max-width:600px){
  .demo-grid{ grid-template-columns:2.7rem 1fr; gap:4px 8px; }
  .demo-label{ font-size:.75rem; }
  .demo-row{ gap:2px; }
  .cell{ border-radius:3px; }
}

/* ---------- machine sections ---------- */
.machine{ padding-block:clamp(56px, 9vw, 110px); }
.world-uv{ background:var(--uv); }
.world-steel{ background:var(--steel); color:var(--frost); }
.world-steel .lede{ color:var(--frost-dim); }
.machine-head{ margin-bottom:clamp(28px, 5vw, 48px); }
.machine-head .lede{ margin-top:1rem; }

.facts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 4vw, 48px); margin-top:clamp(36px, 6vw, 64px); }
.facts h3{ margin-bottom:.7rem; }
.facts ul{ list-style:none; margin:0; padding:0; }
.facts li{ position:relative; padding-left:1.3rem; margin-bottom:.65rem; line-height:1.45; }
.facts li::before{ content:""; position:absolute; left:0; top:.55em; width:.5rem; height:.5rem; border-radius:2px; background:var(--lotus); }
.world-steel .facts li::before{ background:var(--signal); }
@media (min-width:821px){ .facts.two{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:820px){ .facts{ grid-template-columns:1fr; } }

.shots{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.shots figure{ margin:0; }
.shots img{ border-radius:10px; border:1px solid rgba(255,255,255,.14); width:100%; height:auto; }
.shots figcaption{ margin-top:.7rem; font-size:.95rem; color:var(--lilac-dim); max-width:46ch; }
.world-steel .shots figcaption{ color:var(--frost-dim); }
@media (max-width:820px){ .shots{ grid-template-columns:1fr; } }

/* decorative level bars, used when a real screenshot isn't supplied */
.bars{ display:flex; align-items:flex-end; gap:6px; height:260px; padding:22px; border-radius:10px; background:var(--steel-2); border:1px solid var(--steel-line); }
.bars span{ flex:1; background:var(--signal); border-radius:3px 3px 0 0; opacity:.9; }

/* ---------- pricing ---------- */
.pricing{ padding-block:clamp(56px, 9vw, 110px); background:var(--night); }
.pricing h2{ margin-bottom:.9rem; }
.price-list{ margin-top:2.2rem; border-top:1px solid var(--uv-line); }
.price-row{
  display:grid; grid-template-columns:1.4fr 1fr auto; gap:12px 24px; align-items:center;
  padding-block:1.4rem; border-bottom:1px solid var(--uv-line);
}
.price-row h3{ font-family:var(--display); font-weight:700; font-size:1.2rem; letter-spacing:-.01em; }
.price-row p{ margin:.25rem 0 0; font-size:.95rem; color:var(--lilac-dim); }
.price{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem, 4vw, 2.2rem); letter-spacing:-.02em; white-space:nowrap; }
.price .was{ font-size:.55em; font-weight:500; color:var(--lilac-dim); margin-left:.4em; }
.price-row.bundle{ background:var(--uv); padding-inline:clamp(14px, 3vw, 28px); margin-inline:calc(-1 * clamp(14px, 3vw, 28px)); border-radius:12px; border-bottom-color:transparent; }
@media (max-width:640px){
  .price-row{ grid-template-columns:1fr auto; }
  .price-row .btn{ grid-column:1 / -1; text-align:center; }
}
.price-note{ margin-top:1.4rem; font-size:.95rem; color:var(--lilac-dim); }
.included{ margin-top:2.4rem; max-width:62ch; }
.included h3{ margin-bottom:.6rem; }
.included ul{ margin:0; padding-left:1.2rem; }
.included li{ margin-bottom:.4rem; }

/* ---------- FAQ ---------- */
.faq{ padding-block:clamp(48px, 8vw, 96px); background:var(--night); border-top:1px solid var(--uv-line); }
.faq h2{ margin-bottom:1.6rem; }
.faq details{ border-bottom:1px solid var(--uv-line); max-width:760px; }
.faq summary{ list-style:none; cursor:pointer; padding:1.1rem 2.2rem 1.1rem 0; font-weight:600; font-size:1.08rem; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--lotus); transition:transform .2s; }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq details p{ color:var(--lilac-dim); padding-bottom:1.2rem; margin:0; }
.faq details p a{ color:var(--lilac); }
@media (prefers-reduced-motion: reduce){ .faq summary::after{ transition:none; } }

/* ---------- footer ---------- */
.site-foot{ padding-block:40px 56px; background:#000; color:var(--lilac-dim); font-size:.95rem; }
.site-foot .wrap{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.site-foot nav{ display:flex; gap:20px; flex-wrap:wrap; }
.site-foot a{ text-underline-offset:4px; }

/* ---------- legal pages ---------- */
.legal{ padding-block:clamp(24px, 5vw, 56px) clamp(56px, 8vw, 100px); }
.legal h1{ font-size:clamp(1.8rem, 5vw, 2.8rem); max-width:22ch; margin-bottom:.6rem; }
.legal .updated{ color:var(--lilac-dim); margin-bottom:2.2rem; }
.legal h2{ font-family:var(--text); font-size:1.25rem; letter-spacing:0; margin:2rem 0 .6rem; }
.legal p, .legal li{ max-width:68ch; }
.legal ul{ padding-left:1.2rem; }
.legal li{ margin-bottom:.45rem; }