/* Supertime site. Layout: an editor's dark room. The hero is a live viewer (frame + timeline + playhead);
   sections below sit on hairline bands. Red appears only where the brand says "now": playhead, accents, primary CTA. */
:root {
  --bg: #0E0E10; --raise: #151518; --panel: #1B1B1F; --line: #26262B; --line2: #33333A;
  --fg: #EDEDEF; --mute: #A1A1AA; --dim: #6F6F78;
  --red: #F2382B; --red-hi: #FF5045; --yellow: #FFD100; --blue: #4C8DFF;
  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --wide: 1180px;
  color-scheme: dark;
}
* { 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: var(--bg); color: var(--fg); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--fg); color: var(--bg); padding: 8px 12px; border-radius: 6px; z-index: 50; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 28px;
  max-width: var(--wide); margin: 0 auto; padding-block: 16px; padding-inline: 24px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); }
.nav .brand img { height: 30px; width: auto; }
.nav nav { display: flex; gap: 24px; margin-left: auto; }
.nav nav a { text-decoration: none; color: var(--mute); font-size: 14px; font-weight: 500; }
.nav nav a:hover { color: var(--fg); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 9px; font: 600 14.5px var(--body);
  text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s; }
.btn.primary { background: var(--red); color: #fff; }
.btn.primary:hover { background: var(--red-hi); }
.btn.ghost { border: 1px solid var(--line2); color: var(--fg); }
.btn.ghost:hover { border-color: var(--mute); }
.nav .btn { height: 36px; padding: 0 14px; font-size: 13.5px; }

/* hero */
.hero { max-width: var(--wide); margin: 0 auto; padding-inline: 24px; padding-block: 56px 88px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(242,56,43,.18); }
.hero h1 { font-size: clamp(56px, 8.4vw, 112px); font-weight: 900; letter-spacing: -.045em; line-height: .9; margin-top: 22px; }
.red { color: var(--red); }
.lead { margin-top: 26px; font-size: 18px; line-height: 1.6; color: var(--mute); max-width: 46ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fine { margin-top: 14px; font-size: 13px; color: var(--dim); }
.sel { user-select: all; color: var(--mute); font-family: var(--mono); font-size: 12.5px; }

/* viewer demo */
.viewer { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02); }
.frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size;
  background: radial-gradient(120% 100% at 72% 20%, #4a5260 0%, #252a31 40%, #0b0c0f 100%); }
.scene span { position: absolute; border-radius: 50%; filter: blur(2px); }
.scene .b1 { width: 46%; aspect-ratio: 1; right: 6%; top: 18%; background: radial-gradient(circle at 35% 30%, #59606b, #1c1f24 62%, #0d0e10 72%); }
.scene .b2 { width: 22%; aspect-ratio: 1; right: 18%; top: 30%; background: radial-gradient(circle, #9aa1aa 0 8%, #2b2f35 9% 46%, transparent 47%); }
.scene .b3 { width: 120%; height: 34%; left: -10%; bottom: -14%; border-radius: 40%; background: linear-gradient(#2b2a27, #141311); filter: blur(6px); }
.safe { position: absolute; inset: 10%; border: 1px dashed rgba(255,255,255,.12); }
.super { position: absolute; left: 10%; bottom: 16%; max-width: 62%; display: grid; gap: .5cqw; }
.super .l1 { font-size: 5.6cqw; line-height: 1; }
.super .l2 { font-size: 2.6cqw; line-height: 1; justify-self: start; }
.stylename { position: absolute; right: 12px; top: 10px; font: 600 11px var(--mono); letter-spacing: .08em; color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.45); padding: 4px 8px; border-radius: 5px; }
.tl { display: flex; align-items: center; gap: 14px; padding: 11px 14px; background: #0b0b0d; border-top: 1px solid #1f1f23; }
.tc { font: 600 12px var(--mono); color: #d9d9dd; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc.dim { color: var(--dim); }
.track { position: relative; flex: 1; min-width: 0; height: 22px; background: #17171b; border-radius: 4px; }
.clip { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; background: #29354d; }
.clip.on { background: #3b5890; box-shadow: inset 0 0 0 1px var(--blue); }
.ph { position: absolute; top: -9px; bottom: -4px; left: 21%; width: 2px; background: var(--red); }
.ph::before { content: ""; position: absolute; left: -6px; top: -2px; width: 14px; height: 12px; background: var(--red);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.viewer figcaption { padding: 10px 14px 12px; font-size: 12.5px; color: var(--dim); background: #0b0b0d; }

/* demo looks (match the app's styles) */
.look-punch .l1 { font: italic 900 5.6cqw/1 "Montserrat", sans-serif; color: #fff; text-shadow: .06em .06em 0 var(--red); }
.look-punch .l1 b { color: var(--yellow); }
.look-punch .l2 { font: italic 900 2.6cqw/1 "Montserrat", sans-serif; color: #fff; border-bottom: .25cqw solid var(--red); padding-bottom: .3cqw; }
.look-kitchen .l1 { font: italic 900 5.4cqw/1 "Playfair Display", serif; color: #fff; background: #1D3A2A; padding: .6cqw 1.4cqw; transform: skewX(-8deg); }
.look-kitchen .l1 > * { display: inline-block; transform: skewX(8deg); }
.look-kitchen .l1 b { color: #D9E86A; }
.look-kitchen .l2 { font: 900 2.2cqw/1 "Montserrat", sans-serif; font-style: normal; letter-spacing: .06em; color: #1D3A2A; background: #C9D84A; padding: .5cqw .9cqw; }
.look-steel .l1 { font: 400 5.4cqw/1 "Archivo Black", sans-serif; color: #fff; text-shadow: .05em .05em 0 #000; }
.look-steel .l1 b { color: var(--yellow); font-weight: 400; }
.look-steel .l2 { font: 900 2.1cqw/1 "Inter Tight", sans-serif; letter-spacing: .22em; color: #111; background: #FFD200; padding: .55cqw 1cqw; }
.look-bleach .l1 { font: 400 5.6cqw/1 "Archivo Black", sans-serif; color: #1F4FC8; -webkit-text-stroke: .5cqw #fff; paint-order: stroke fill; }
.look-bleach .l1 b { color: var(--red); font-weight: 400; }
.look-bleach .l2 { font: 900 2.4cqw/1 "Montserrat", sans-serif; font-style: normal; color: #fff; background: #1F4FC8; padding: .5cqw 1cqw; }
.super.in .l1, .super.in .l2 { animation: land .5s cubic-bezier(.2,.9,.25,1.15) both; }
.super.in .l2 { animation-delay: .22s; }
@keyframes land { from { opacity: 0; transform: translateY(30%) scale(1.25); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.look-kitchen.in .l1 { animation-name: landSkew; }
@keyframes landSkew { from { opacity: 0; transform: skewX(-8deg) translateY(30%); } to { opacity: 1; transform: skewX(-8deg); } }
.super.out { opacity: 0; transition: opacity .12s; }

/* sections */
.band { max-width: var(--wide); margin: 0 auto; padding-inline: 24px; padding-block: 88px; border-top: 1px solid var(--line); }
.sec-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 44px; }
.eyebrow { font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.band h2, .closer h2 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
.sub { color: var(--mute); font-size: 17px; max-width: 60ch; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.steps li { padding: 28px 24px 30px; background: var(--raise); display: grid; gap: 12px; align-content: start; border-left: 1px solid var(--line); position: relative; }
.steps li:first-child { border-left: 0; }
.steps .n { font: 600 12px var(--mono); color: var(--red); }
.steps h3 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.steps p { color: var(--mute); font-size: 15px; }

.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sw { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; padding: 18px 18px 34px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  background: radial-gradient(120% 100% at 80% 0%, #3d434c, #17191d 70%); border: 1px solid var(--line); container-type: inline-size; }
.sw small { position: absolute; left: 14px; bottom: 10px; font: 600 11px var(--mono); color: rgba(255,255,255,.55); letter-spacing: .04em; }
.sw div { font-size: 11cqw; line-height: 1; color: #fff; }
.sw i { font-style: normal; font-size: 5.6cqw; line-height: 1; color: #fff; align-self: flex-start; }
.s-punch div { font: italic 900 10cqw/1 "Montserrat", sans-serif; text-shadow: .06em .06em 0 var(--red); } .s-punch b { color: var(--yellow); }
.s-kitchen div { font: italic 900 11cqw/1 "Playfair Display", serif; background: #1D3A2A; padding: 2cqw 4cqw; align-self: flex-start; } .s-kitchen b { color: #D9E86A; }
.s-steel div { font: 400 11cqw/1 "Archivo Black", sans-serif; text-shadow: .05em .05em 0 #000; }
.s-steel i { font: 800 4.6cqw/1 "Inter Tight", sans-serif; letter-spacing: .2em; color: #111; background: #FFD200; padding: 1.4cqw 2.2cqw; }
.s-bleach div { font: 400 11.5cqw/1 "Archivo Black", sans-serif; color: #1F4FC8; -webkit-text-stroke: 1.2cqw #fff; paint-order: stroke fill; } .s-bleach b { color: var(--red); font-weight: 400; }
.s-jet div { font: italic 900 10cqw/1 "Kanit", sans-serif; text-shadow: 0 .04em .2em rgba(0,0,0,.6); } .s-jet b { color: #FFDD00; font-weight: 900; }
.s-script i { font: 700 12cqw/1 "Caveat", cursive; color: #fff; } .s-script div { font: 900 8cqw/1 "Inter Tight", sans-serif; text-shadow: 0 .05em .25em rgba(0,0,0,.6); }
.s-sweet div { font: 400 13cqw/1 "Lilita One", sans-serif; color: #FF4F8B; -webkit-text-stroke: 1.4cqw #fff; paint-order: stroke fill; }
.s-anton div { font: 400 14cqw/1 "Anton", sans-serif; text-shadow: .06em .06em 0 #000; } .s-anton div span { color: var(--yellow); }
.s-anton i { font: 400 5cqw/1 "Anton", sans-serif; color: #111; background: #FFD100; padding: 1cqw 2cqw; transform: skewX(-10deg); }
.note { margin-top: 22px; color: var(--mute); font-size: 15px; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--raise); border: 1px solid var(--line); border-radius: 14px; padding: 30px; display: grid; gap: 14px; align-content: start; }
.card h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; color: var(--mute); }
.card li { padding-left: 20px; position: relative; }
.card li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--red); }
.spec { font: 400 12.5px var(--mono); color: var(--dim); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.split .sec-head { margin: 0; align-content: start; }
.facts { margin: 0; display: grid; gap: 0; }
.facts div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding-block: 20px; border-top: 1px solid var(--line); }
.facts div:first-child { border-top: 0; padding-top: 4px; }
.facts dt { font: 700 16px var(--display); }
.facts dd { margin: 0; color: var(--mute); }

.closer { max-width: var(--wide); margin: 0 auto; padding-inline: 24px; padding-block: 96px 110px; border-top: 1px solid var(--line);
  display: grid; justify-items: center; text-align: center; }
.closer h2 { font-size: clamp(36px, 5.6vw, 68px); font-weight: 900; letter-spacing: -.04em; }
.foot { max-width: var(--wide); margin: 0 auto; padding-inline: 24px; padding-block: 28px 40px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px; color: var(--dim); font-size: 13.5px; }
.foot img { height: 22px; width: auto; margin-right: auto; }
.foot a { color: var(--mute); text-decoration: none; }

@media (max-width: 980px) {
  .hero, .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero { padding-block: 32px 64px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:nth-child(3) { border-left: 0; }
  .steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nav { gap: 14px; padding-inline: 16px; } .nav nav { display: none; } .nav .btn { margin-left: auto; }
  .hero, .band, .closer, .foot { padding-inline: 16px; }
  .band { padding-block: 64px; }
  .steps, .cards { grid-template-columns: minmax(0, 1fr); }
  .steps li { border-left: 0; border-top: 1px solid var(--line); } .steps li:first-child { border-top: 0; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lead { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { .super.in .l1, .super.in .l2 { animation: none; } }