/* Option 1 — "Studio Film": a dark film studio. Ink black, a warm orange key light and a violet fill light.
   Pieces: 21st.dev Scroll Locked Video Hero (hero), Stacking Cards (campaigns), Marquee (example ads),
   Grid Feature Cards (safety). */
:root {
  --bg: #0b0b12; --bg-2: #13131f; --ink: #f7f3ec; --muted: #b6b1c4; --line: rgba(255,255,255,.12);
  --card: rgba(255,255,255,.045); --accent: #ff6a3d; --accent-ink: #1a0b05; --accent-2: #7c5cff; --teal: #2bd4c5;
  --display: "Space Grotesk", system-ui, sans-serif;
}

/* ── Hero ───────────────────────────────────────────── */
.hero .film-pin { min-height: calc(100vh - var(--head)); display: flex; align-items: center; padding: 40px 0 48px; }
.film[data-mode="scroll"] .film-pin { padding: 24px 0; }
.hero-light { position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(40% 40% at calc(70% - var(--s, 0) * 6%) calc(35% + var(--s, 0) * 4%), rgba(255,106,61,.30), transparent 70%),
    radial-gradient(35% 45% at calc(20% + var(--s, 0) * 8%) 80%, rgba(124,92,255,.26), transparent 70%),
    radial-gradient(30% 30% at 90% 90%, rgba(43,212,197,.12), transparent 70%); }
.hero-light::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); }
.hero-grid { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "copy stage" "steps stage"; column-gap: 56px; row-gap: 28px; align-items: center; }
.hero-copy { grid-area: copy; align-self: end; } .stage { grid-area: stage; } .hero .film-steps { grid-area: steps; align-self: start; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero h1 { font-size: clamp(40px, 4.6vw, 70px); line-height: 1; letter-spacing: -0.035em; }
.nw { white-space: nowrap; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.stage { position: relative; height: min(640px, calc(100vh - var(--head) - 90px)); min-height: 440px; border-radius: 28px; background: linear-gradient(160deg, #181826, #0f0f18); border: 1px solid var(--line); box-shadow: 0 40px 120px -40px rgba(255,106,61,.35), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; }
.layer { position: absolute; inset: 0; opacity: var(--o, 0); }
.cam { position: absolute; inset: 22px; border-radius: 16px; overflow: hidden; background: #fff; }
.cam img { width: 100%; height: 100%; object-fit: cover; object-position: top left; scale: var(--z, 1); transform-origin: var(--origin, 30% 20%); }
.l-judge .cam { --origin: 50% 45%; }
.l-scale .cam { --origin: 72% 58%; }
.l-scale .cam img { object-position: 68% top; }

/* 01 Make */
.make-phone { position: absolute; left: 50%; top: 50%; height: 86%; aspect-ratio: 9 / 16; translate: -50% -50%; border-radius: 30px; overflow: hidden; background: #0b1020; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 6px #22222f; }
.part { position: absolute; left: 0; right: 0; transition: none; }
.p-body { inset: 0; opacity: var(--pb, 0); scale: calc(.86 + var(--pb, 0) * .14); }
.p-body img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.p-hook { top: 0; z-index: 2; padding: 22px 16px 44px; background: linear-gradient(#0b1020f5, #0b102000); color: #fff; font: 700 clamp(15px, 1.5vw, 19px)/1.18 var(--display); translate: calc((1 - var(--ph, 0)) * -120%) 0; opacity: var(--ph, 0); }
.p-cta { bottom: 0; z-index: 2; padding: 46px 16px 18px; background: linear-gradient(#0b102000, #0b1020f5); translate: 0 calc((1 - var(--pc, 0)) * 120%); opacity: var(--pc, 0); }
.p-cta span { display: inline-block; padding: 9px 16px; border-radius: 999px; background: #fff; color: #0b1020; font-weight: 800; font-size: 13px; }
.tag { position: absolute; z-index: 4; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.08); border: 1px solid var(--line); color: var(--ink); backdrop-filter: blur(6px); opacity: var(--tg, 0); }
.t1 { left: 6%; top: 18%; border-color: rgba(255,106,61,.6); }
.t2 { right: 2%; top: 46%; border-color: rgba(124,92,255,.7); }
.t3 { left: 7%; bottom: 14%; border-color: rgba(43,212,197,.7); }

/* 02 Test: cards dealt from the center into the Lab */
.lab-head { position: absolute; left: 26px; top: 22px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; z-index: 2; }
.lab-head .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(255,106,61,.2); }
.deal { position: absolute; inset: 70px 26px 26px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 14px; }
.card { border-radius: 14px; overflow: hidden; background: #0f172a; box-shadow: 0 20px 40px -18px rgba(0,0,0,.8); translate: calc((1 - var(--d, 0)) * var(--dx)) calc((1 - var(--d, 0)) * var(--dy)); rotate: calc((1 - var(--d, 0)) * var(--r)); }
.card img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.c1 { --dx: 105%; --dy: 52%; --r: -9deg; } .c2 { --dx: 0%; --dy: 52%; --r: 5deg; } .c3 { --dx: -105%; --dy: 52%; --r: 11deg; }
.c4 { --dx: 105%; --dy: -52%; --r: 7deg; } .c5 { --dx: 0%; --dy: -52%; --r: -6deg; } .c6 { --dx: -105%; --dy: -52%; --r: -12deg; }

/* Floating cards over the screenshots */
.float { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: rgba(15,15,24,.86); border: 1px solid var(--line); backdrop-filter: blur(10px); box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); opacity: var(--f, 0); translate: 0 calc((1 - var(--f, 0)) * 16px); }
.f-judge { right: 34px; bottom: 34px; flex-direction: row; align-items: center; gap: 10px; font-weight: 700; }
.f-ask { right: 34px; bottom: 34px; max-width: 290px; }
.f-ask b { font-size: 15px; color: var(--accent); } .f-ask span { font-size: 14px; }
.ask-btns { display: flex; gap: 8px; margin-top: 4px; }
.ask-btns .y, .ask-btns .n { padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.ask-btns .y { background: var(--accent); color: var(--accent-ink); } .ask-btns .n { border: 1px solid var(--line); }
.f-ask small { color: var(--muted); font-size: 11.5px; }

/* Phones and tablets: one column, the film plays by itself */
@media (max-width: 1080px), (max-height: 699px) {
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "stage" "steps"; row-gap: 26px; }
  .stage { height: auto; aspect-ratio: 4 / 4.4; min-height: 0; max-height: 74vh; }
}
@media (max-width: 600px) {
  .stage { aspect-ratio: 4 / 5; border-radius: 22px; }
  .cam { inset: 12px; }
  .deal { inset: 60px 14px 14px; gap: 9px; }
  .lab-head { left: 16px; top: 18px; font-size: 13.5px; }
  .f-judge, .f-ask { right: 16px; left: 16px; bottom: 16px; max-width: none; }
  .l-judge .cam { --origin: 12% 30%; }
  .tag { font-size: 11px; }
  .film-steps button { font-size: 12px; }
  .film-steps .n { display: block; }
}

/* ── How ─────────────────────────────────────────────── */
.sec-how { background: linear-gradient(var(--bg), var(--bg-2)); }
.how-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.how { padding: 30px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; gap: 12px; }
.how .big { font: 700 64px/1 var(--display); background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.how h3 { font-size: 28px; }
@media (max-width: 860px) { .how-row { grid-template-columns: 1fr; } }

/* ── Stacking cards ─────────────────────────────────── */
.sec-stack { background: var(--bg-2); }
.stack { display: flex; flex-direction: column; gap: 28px; }
.scard { position: sticky; top: calc(var(--head) + 24px); min-height: 440px; border-radius: 30px; padding: clamp(26px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; overflow: hidden; box-shadow: 0 -20px 60px -30px rgba(0,0,0,.8); }
.scard:nth-child(2) { top: calc(var(--head) + 48px); } .scard:nth-child(3) { top: calc(var(--head) + 72px); }
.s-lab { background: linear-gradient(140deg, #ff7a4d, #e24a1f); color: #1a0b05; }
.s-scale { background: linear-gradient(140deg, #8a6cff, #5537e0); color: #fff; }
.s-rmk { background: linear-gradient(140deg, #2bd4c5, #0f8f8a); color: #04201e; }
.scard-copy { display: flex; flex-direction: column; gap: 14px; }
.scard h3 { font-size: clamp(40px, 5vw, 64px); }
.scard p { font-size: 18px; max-width: 460px; }
.pill { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.14); font-size: 13px; font-weight: 700; }
.share { font-weight: 700; }
.scard-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 420px; justify-self: end; width: 100%; }
.scard-pics.one { grid-template-columns: 1fr; max-width: 560px; }
.s-rmk .scard-pics { grid-template-columns: minmax(0, 300px); }
@media (max-width: 860px) { .scard { grid-template-columns: 1fr; position: relative; top: 0 !important; } .scard-pics { justify-self: start; } }

/* ── Marquee of example ads ─────────────────────────── */
.marquee { overflow: hidden; overflow: clip; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.track { display: flex; align-items: center; gap: 22px; width: max-content; padding: 10px 0 30px; animation: slide 46s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.track > * { flex: none; }
.track .ad-v { width: 210px; } .track .ad-sq { width: 250px; } .track .ad-search { width: 330px; }
@keyframes slide { to { translate: calc(-50% - 11px) 0; } }
@media (prefers-reduced-motion: reduce) { .track { animation: none; } .marquee { overflow-x: auto; } }

/* ── Common sections, this option's colors ──────────── */
.sec-lego { background: radial-gradient(60% 80% at 100% 0%, rgba(124,92,255,.18), transparent 70%), var(--bg); }
.sec-judge { background: var(--bg-2); }
.sec-safety { background: radial-gradient(50% 70% at 0% 100%, rgba(255,106,61,.14), transparent 70%), var(--bg); }
.early-box { background: linear-gradient(135deg, #ff6a3d, #7c5cff); color: #fff; }
.early-box .eyebrow, .early-box .lead { color: rgba(255,255,255,.9); }
.early-box .btn-primary { background: #0b0b12; color: #fff; box-shadow: none; }
.early input { border-color: rgba(255,255,255,.35); }
.early input::placeholder { color: rgba(255,255,255,.7); }
@media (max-width: 600px) { .nw { white-space: normal; } }