/* Filmbuilder Prompt Director – landing page
   Ideas from the brief's references: giant condensed wordmark (Navarro / Möbius / Gray),
   the product itself as the hero (Template Club / Genflow), mono [ labels ], fanned image deck. */

.lp { background: var(--night); overflow-x: clip; }
.lp-wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--f-script); font-size: .8rem; letter-spacing: .01em; }
.dim { color: var(--muted); }
.lp-sec { padding-top: clamp(100px, 12vw, 180px); }
.giant { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(3rem, 9vw, 9rem); line-height: .86; letter-spacing: -.005em; margin: 0 0 28px; text-wrap: balance; }

/* ---------- hero ---------- */
.lp-hero { position: relative; padding-top: 92px; overflow: hidden;
  background: radial-gradient(70% 50% at 50% 70%, rgba(212, 165, 106, .10), transparent 70%), var(--night); }
.lp-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.lp-meta .kicker { margin: 0; color: var(--ivory); }
.lp-word { margin: 6px 0 0; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; line-height: .8; letter-spacing: -.01em; }
.lp-word .w1 { display: block; font-size: clamp(4.2rem, 19.4vw, 17.6rem); margin-left: -.04em; }
.lp-word .w2 { display: flex; justify-content: space-between; gap: .2em; font-size: clamp(2rem, 7.4vw, 6.7rem); font-weight: 600; color: var(--ivory-2); margin-top: .12em; }
.lp-word .w2 em { font-style: normal; color: var(--camel); }
.lp-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; margin: 30px 0 0; }
.lp-intro p { margin: 0; max-width: 40em; color: var(--ivory-2); font-size: clamp(1.02rem, 1.3vw, 1.18rem); }
.lp-intro p b { color: var(--ivory); font-weight: 600; }
.lp-intro .actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- dashboard ---------- */
.dash-stage { position: relative; max-width: 1360px; margin: clamp(40px, 6vw, 70px) auto 0; padding: 0 var(--gutter) 80px; perspective: 1800px; }
.dash {
  position: relative; display: grid;
  grid-template-columns: 230px minmax(240px, 300px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top top top" "side prev prompt" "side input input";
  height: clamp(560px, 64vw, 700px);
  background: linear-gradient(180deg, #171715, #121210);
  border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 80px 140px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.4);
  transform-origin: 50% 0; transform-style: preserve-3d; will-change: transform;
  overflow: hidden;
}
.dash-top { grid-area: top; display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.015); }
.dots { display: inline-flex; gap: 6px; } .dots i { width: 11px; height: 11px; border-radius: 50%; background: #3a3934; }
.dots i:first-child { background: #e0614f; } .dots i:nth-child(2) { background: #d9a24b; } .dots i:nth-child(3) { background: #6aa36b; }
.dash-title { color: var(--ivory-2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-quota { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.bar-q { width: 70px; height: 4px; border-radius: 9px; background: var(--navy-3); overflow: hidden; } .bar-q i { display: block; height: 100%; background: var(--camel); }

.dash-side { grid-area: side; border-right: 1px solid var(--line); padding: 16px 12px; overflow: auto; }
.dash-label { font-family: var(--f-script); font-size: .7rem; color: var(--muted); margin: 0 6px 10px; }
.dash-label:not(:first-child) { margin-top: 22px; }
.dash-styles { display: grid; gap: 4px; }
.dash-styles button {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; text-align: left;
  background: none; border: 1px solid transparent; color: var(--ivory-2); padding: 7px; border-radius: 9px; cursor: pointer; font: inherit; font-size: .9rem; line-height: 1.2;
  transition: background .25s, border-color .25s, color .25s;
}
.dash-styles button:hover { background: rgba(255,255,255,.035); color: var(--ivory); }
.dash-styles button[aria-selected='true'] { background: rgba(212,165,106,.1); border-color: rgba(212,165,106,.4); color: var(--ivory); }
.dash-styles img { width: 34px; height: 46px; object-fit: cover; border-radius: 5px; }
.dash-styles small { display: block; font-family: var(--f-script); font-size: .66rem; color: var(--muted); margin-top: 2px; }
.dash-projects { list-style: none; margin: 0; padding: 0 6px; display: grid; gap: 10px; }
.dash-projects li span { display: block; color: var(--ivory-2); font-size: .78rem; }
.dash-projects small { color: var(--muted); font-size: .66rem; }

.dash-preview { grid-area: prev; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; border-right: 1px solid var(--line); }
.preview { position: relative; flex: 1; min-height: 0; border-radius: 10px; overflow: hidden; background: #000; border: 0; padding: 0; color: inherit; }
.preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s; }
.preview video.off { opacity: 0; }
.rec { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; color: #fff; background: rgba(0,0,0,.45); padding: 3px 8px; border-radius: 99px; backdrop-filter: blur(6px); }
.rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); animation: blink 1.2s steps(2) infinite; }
.pv-ai { position: absolute; top: 10px; right: 10px; }
.pv-name { position: absolute; left: 12px; right: 12px; bottom: 12px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: .9; text-align: left; text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.timeline { position: relative; height: 22px; border-radius: 6px; overflow: hidden; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 9px), var(--navy-2); }
.timeline i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(212,165,106,.2), rgba(212,165,106,.45)); border-right: 2px solid var(--camel); }
.pv-meta { margin: 0; font-size: .7rem; }

.dash-prompt { grid-area: prompt; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 16px; }
.dash-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.dash-tabs button { white-space: nowrap; flex: 0 0 auto; }
.dash-tabs button[role=tab] { background: none; border: 1px solid transparent; color: var(--muted); font: inherit; font-size: .86rem; padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.dash-tabs button[aria-selected='true'] { color: var(--ivory); border-color: var(--line-strong); background: rgba(255,255,255,.04); }
.dash-copy { margin-left: auto; }
.refs-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; }
.refs-row span { font-size: .7rem; padding: 3px 9px; border-radius: 99px; background: var(--navy-2); border: 1px solid var(--line); color: var(--ivory-2); }
.refs-row b { color: var(--camel); font-weight: 500; }
.prompt-out {
  flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 16px 18px; border-radius: 10px;
  background: #efeae0; color: #1b1a17; font-family: var(--f-script); font-size: .8rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.prompt-out .caret { display: inline-block; width: 7px; height: 1em; background: #1b1a17; vertical-align: -2px; animation: blink .9s steps(2) infinite; }
.status-row { display: flex; align-items: center; gap: 8px; padding-top: 10px; color: var(--muted); font-size: .72rem; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #7fbf7a; box-shadow: 0 0 0 0 rgba(127,191,122,.6); }
.dash.writing .pulse { background: var(--camel); animation: pulse2 1.2s infinite; }
@keyframes pulse2 { 70% { box-shadow: 0 0 0 8px rgba(212,165,106,0); } 100% { box-shadow: 0 0 0 0 rgba(212,165,106,0); } }

.dash-input { grid-area: input; display: flex; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 8px 8px 8px 12px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--navy); }
.dash-input input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ivory); font: inherit; font-size: .95rem; padding: 6px 4px; }
.dash-input input:focus { outline: none; }
.mic-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-3); color: var(--ivory-2); flex: 0 0 auto; }
.mic-dot svg { width: 16px; height: 16px; }

/* floating chips around the window */
.float { position: absolute; z-index: 3; padding: 9px 14px; border-radius: 12px; background: rgba(28, 28, 25, .82); border: 1px solid var(--line-strong);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 30px 60px -25px rgba(0,0,0,.9); color: var(--ivory-2); font-size: .76rem; will-change: transform; pointer-events: none; }
.float b { color: var(--ivory); font-weight: 500; }
.f1 { top: -18px; right: 17%; color: #9fd19a; }
.f2 { bottom: 58px; left: 1.5%; }
.f3 { bottom: 54px; left: 19%; }
.f4 { top: -34px; left: 36%; display: grid; gap: 2px; }
.f4 b { font-family: var(--f-display); font-size: 1.5rem; font-weight: 800; letter-spacing: .01em; }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ivory); color: var(--night); }
.ticker-track { display: flex; align-items: center; gap: 28px; width: max-content; padding: 14px 0; animation: ticker 48s linear infinite; }
.ticker span { font-family: var(--f-display); font-weight: 800; font-size: 1.55rem; text-transform: uppercase; white-space: nowrap; }
.ticker .t-tools { font-family: var(--f-script); font-weight: 500; font-size: .85rem; text-transform: none; }
.ticker i { font-style: normal; color: var(--camel); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- statement ---------- */
.statement { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; }
.statement .big { margin: 0; font-size: clamp(1.7rem, 3.7vw, 3.4rem); line-height: 1.08; font-weight: 500; letter-spacing: -.02em; text-wrap: pretty; }

/* ---------- film library ---------- */
.lib-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.lib-head p { margin: 0; max-width: 34em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { font: inherit; font-size: .88rem; background: transparent; color: var(--ivory-2); border: 1px solid var(--line-strong); padding: 7px 14px; border-radius: 99px; cursor: pointer; }
.chips button:hover { border-color: var(--ivory); }
.chips button[aria-pressed='true'] { background: var(--ivory); color: var(--night); border-color: var(--ivory); }
.chips button small { font-family: var(--f-script); font-size: .7rem; opacity: .6; margin-left: 4px; }
.lib-wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.lib-tall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .lib-tall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lib-tall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .clip .c-meta b { font-size: 1.2rem; } }
.lib-wide:empty { display: none; }
.clip { position: relative; display: block; width: 100%; border-radius: 12px; overflow: hidden; background: var(--navy); border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; isolation: isolate; }
.lib-tall .clip { aspect-ratio: 9 / 16; }
.lib-wide .clip { aspect-ratio: 16 / 9; }
.clip img, .clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .45s; }
.clip video { opacity: 0; }
.clip.playing video { opacity: 1; }
.clip:hover img, .clip:hover video { transform: scale(1.035); }
.clip::after { content: ''; position: absolute; inset: 55% 0 0 0; background: linear-gradient(transparent, rgba(8,8,7,.85)); z-index: 1; }
.clip .c-meta { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; display: grid; gap: 4px; }
.clip .c-meta b { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; line-height: .95; text-transform: uppercase; }
.lib-wide .clip .c-meta b { font-size: clamp(1.6rem, 3vw, 2.6rem); }
.clip .c-meta small { font-family: var(--f-script); font-size: .7rem; color: var(--ivory-2); }
.clip .ai-label { position: absolute; z-index: 2; top: 10px; left: 10px; }
.clip[hidden] { display: none; }

/* ---------- anatomy ---------- */
.anatomy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.anatomy article, .steps3 article { border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); transition: border-color .3s, transform .4s var(--ease); }
.anatomy article:hover, .steps3 article:hover { border-color: rgba(212,165,106,.5); transform: translateY(-3px); }
.anatomy .mono, .steps3 .mono { color: var(--camel); }
.anatomy h3, .steps3 h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.9rem; line-height: 1; margin: 14px 0 8px; }
.anatomy p, .steps3 p { margin: 0; color: var(--muted); font-size: .98rem; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.steps3 h3 { font-size: 2.4rem; }

/* ---------- visuals deck ---------- */
.visuals2 { overflow-x: clip; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.deck { position: relative; height: clamp(420px, 46vw, 640px); perspective: 1400px; outline: none; }
.deck img {
  position: absolute; left: 50%; top: 50%; width: min(64%, 360px); aspect-ratio: 768 / 1376; height: auto; object-fit: cover; border-radius: 12px;
  box-shadow: 0 40px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .8s var(--ease), opacity .6s, filter .6s; will-change: transform;
}
.deck .deck-ai { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); z-index: 20; }
.deck:focus-visible { outline: 2px solid var(--camel); outline-offset: 8px; border-radius: 14px; }
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 34px; border-top: 1px solid var(--line); }
.numbers div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.numbers b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 3.4rem; line-height: .9; }
.numbers span { color: var(--muted); font-size: .92rem; }

/* ---------- pricing ---------- */
.plans2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.plan2 { border: 1px solid var(--line-strong); border-radius: 16px; padding: clamp(24px, 3vw, 40px); background: linear-gradient(180deg, #171715, #111110); }
.plan2.featured { border-color: rgba(212,165,106,.6); box-shadow: 0 0 0 1px rgba(212,165,106,.25), 0 50px 100px -60px rgba(212,165,106,.35); }
.plan2 .tag { background: var(--camel); color: #17110a; padding: 2px 9px; border-radius: 99px; margin-left: 8px; font-size: .72rem; }
.plan2 .amount { font-family: var(--f-display); font-weight: 800; font-size: clamp(4.4rem, 9vw, 7rem); line-height: .85; margin-top: 14px; }
.plan2 .per { color: var(--ivory-2); margin: 10px 0 4px; }
.plan2 .terms { color: var(--muted); font-size: .9rem; margin: 0 0 22px; }
.plan2 ul { list-style: none; margin: 0 0 26px; padding: 0; }
.plan2 li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.plan2 li::before { content: '✓'; color: var(--camel); margin-right: 10px; }
.after2 { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 24px; color: var(--muted); }
.after2 b { color: var(--camel); font-weight: 500; }

/* ---------- end CTA ---------- */
.end-cta { padding-top: clamp(100px, 12vw, 170px); }
.end-word { display: block; text-decoration: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0 18px; position: relative; overflow: hidden; }
.end-word span { display: block; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(4rem, 19.4vw, 17.6rem); line-height: .82; transition: color .4s; }
.end-word small { position: absolute; right: 0; top: 16px; color: var(--camel); }
.end-word:hover span { color: var(--camel); }
.lp footer.foot { margin-top: 0; border-top: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .dash { grid-template-columns: 200px minmax(200px, 250px) minmax(0, 1fr); }
  .f2, .f3 { display: none; }
}
@media (max-width: 860px) {
  .lp-intro, .statement, .visuals2 { grid-template-columns: 1fr; }
  .anatomy, .steps3, .plans2, .lib-wide { grid-template-columns: 1fr; }
  .dash { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "top" "side" "prev" "prompt" "input"; }
  .dash > * { min-width: 0; }
  .dash-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .dash-styles { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .dash-styles button { flex: 0 0 auto; grid-template-columns: 28px auto; }
  .dash-styles img { width: 28px; height: 38px; }
  .dash-styles small, .dash-projects, .dash-label:not(:first-child) { display: none; }
  .dash-preview { border-right: 0; }
  .preview { flex: none; aspect-ratio: 9 / 16; max-height: 62vh; width: auto; margin: 0 auto; height: 62vh; }
  .prompt-out { height: 320px; flex: none; }
  .dash-input { margin: 0 12px 12px; }
  .float { display: none; }
  .lp-word .w2 { justify-content: flex-start; }
  .deck { height: 520px; }
}
@media (max-width: 480px) {
  .dash-quota { display: none; }
  .dash-input .btn { padding: 8px 12px; }
  .preview { height: 56vh; }
}