/* cs3d.ai homepage, simple-copy pass: fire-door example, what you can do, who it's for, how you start, results */
/* Fire-door example: question types in, answer lands, three doors pulse on the plan */
.fd { --fd-accent:#FCBF20; display:grid; grid-template-columns:1.05fr 1fr; max-width:980px; margin:0 auto; background:#14120c; color:#fff; border-radius:16px; border:1px solid rgba(255,255,255,.14); overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.30); text-align:start; }
.fd__chat { padding:38px 34px; display:flex; flex-direction:column; justify-content:center; gap:18px; min-width:0; }
.fd__tag { font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:600; }
.fd__q { align-self:flex-start; max-width:100%; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); border-radius:14px 14px 14px 4px; padding:14px 18px; font-size:18px; line-height:1.35; }
.fd__q span { display:block; overflow:hidden; white-space:nowrap; }
.fd__a { background:#fff; color:#0d0a02; border-radius:14px 14px 4px 14px; padding:18px 20px; display:flex; flex-direction:column; gap:14px; align-self:flex-end; width:100%; max-width:420px; }
.fd__a b { font-size:22px; line-height:1.2; font-weight:600; font-family:inherit; letter-spacing:0; }
.fd__btn { align-self:flex-start; background:var(--fd-accent); color:#0d0a02; font-weight:600; font-size:14px; padding:9px 16px; border-radius:8px; }
.fd__map { position:relative; background:#1b1810; min-height:270px; padding:38px 22px 20px; border-inline-start:1px solid rgba(255,255,255,.1); }
.fd__lvl { position:absolute; top:14px; inset-inline-start:20px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); font-weight:600; }
.fd__map svg { width:100%; height:100%; display:block; }
.fd__wall { fill:none; stroke:#6a6354; stroke-width:2.5; }
.fd__corr { fill:#26221a; }
.fd__d { fill:#8d8672; }
.fd__ring { fill:none; stroke:var(--fd-accent); stroke-width:2; transform-box:fill-box; transform-origin:center; }
.fd__dot { fill:var(--fd-accent); }
.fd__cap { text-align:center; max-width:620px; margin:20px auto 0; font-size:15px; line-height:1.5; color:#6E6E73; }
.fd--arm .fd__a { opacity:0; transform:translateY(8px); }
.fd--arm .fd__hit { opacity:0; }
.fd--arm .fd__q span { width:0; }
.fd--run .fd__q span { animation:fdType 2.2s steps(38,end) .4s forwards; }
.fd--run .fd__a { animation:fdIn .6s ease 2.9s forwards; }
.fd--run .fd__hit { animation:fdShow .4s ease 3.1s forwards; }
.fd--run .fd__ring { animation:fdPulse 1.8s ease-out 3.4s infinite; }
@keyframes fdType { to { width:100%; } }
@keyframes fdIn { to { opacity:1; transform:none; } }
@keyframes fdShow { to { opacity:1; } }
@keyframes fdPulse { 0% { transform:scale(.6); opacity:.95; } 100% { transform:scale(2.1); opacity:0; } }
@media (max-width:760px) {
  .fd { grid-template-columns:1fr; }
  .fd__map { border-inline-start:0; border-top:1px solid rgba(255,255,255,.1); }
  .fd__chat { padding:28px 22px; }
  .fd__q span { white-space:normal; }
  .fd--arm .fd__q span { width:auto; }
  .fd--run .fd__q span { animation:none; width:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .fd--arm .fd__a, .fd--arm .fd__hit { opacity:1; transform:none; }
  .fd--arm .fd__q span { width:auto; }
  .fd--run .fd__q span, .fd--run .fd__a, .fd--run .fd__hit, .fd--run .fd__ring { animation:none; }
}
.hz__shot .fd { box-shadow:0 30px 90px rgba(0,0,0,.5); }
.hz__shot .fd__cap { color:rgba(255,255,255,.62); }
.caps.caps--4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px) { .caps.caps--4 { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .caps.caps--4 { grid-template-columns:1fr; } }
.who { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; }
@media (max-width:900px) { .who { grid-template-columns:1fr; } }
.who__card { background:var(--color-grey); border:1px solid rgba(13,10,2,.07); padding:34px 30px; display:flex; flex-direction:column; gap:12px; }
.who__card h3 { font-size:22px; font-weight:600; color:#0d0a02; margin:0; line-height:1.25; }
.who__card p { font-size:16.5px; line-height:1.6; color:#6E6E73; margin:0; flex:1; }
.who__card a { align-self:flex-start; font-size:15px; font-weight:600; color:#0d0a02; text-decoration:underline; text-underline-offset:4px; }
.hys { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; counter-reset:hys; }
@media (max-width:900px) { .hys { grid-template-columns:1fr; } }
.hys__step { background:var(--color-off-white); border:1px solid rgba(13,10,2,.07); padding:34px 30px; display:flex; flex-direction:column; gap:16px; position:relative; }
.hys__n { width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:#FCBF20; color:#0d0a02; font-weight:700; font-size:17px; }
.hys__step h3 { font-size:22px; font-weight:600; color:#0d0a02; margin:0; line-height:1.25; }
.hys__cta { text-align:center; margin:40px 0 0; }
.works { text-align:center; max-width:720px; margin:0 auto; }
.works p { font-size:18px; line-height:1.6; color:#6E6E73; margin:0 0 26px; }
.band__grid.band__grid--3 { grid-template-columns:repeat(3,1fr); max-width:1100px; }
@media (max-width:820px) { .band__grid.band__grid--3 { grid-template-columns:1fr; gap:40px; } }
.band__grid.band__grid--3 .band__item b { font-size:clamp(1.8rem,3vw,2.6rem); }
/* Hero: four product views, one every 3 seconds. The old view stays put while the next fades in on top. */
.hz__shot .hrot { position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 90px rgba(0,0,0,.5); background:#0b0a07; }
.hz__shot .hrot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; z-index:0; transition:opacity .4s ease; }
.hz__shot .hrot img.is-prev { opacity:1; z-index:1; }
.hz__shot .hrot img.is-on { opacity:1; z-index:2; }
section.hz { padding-bottom:96px; }
@media (max-width:768px) { section.hz { padding-bottom:56px; } }
.btn.btn--outline-dark { background:transparent; border:1.5px solid #0d0a02; color:#0d0a02; }
.btn.btn--outline-dark:hover { background:#0d0a02; color:#fff; }
/* How you start: seat buyers get their own small paths under the enterprise one */
.alt { max-width:760px; margin:56px auto 0; text-align:center; }
.alt__label { font-size:15px; letter-spacing:.03em; color:#6E6E73; margin:0 0 16px; }
.alt__grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:start; }
@media (max-width:700px) { .alt__grid { grid-template-columns:1fr; } }
.alt__card { display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid rgba(13,10,2,.1); padding:20px 22px; color:#0d0a02; text-decoration:none; }
.alt__card:hover { border-color:#FCBF20; }
.alt__card b { font-size:18px; font-weight:600; }
.alt__card span { font-size:15px; line-height:1.5; color:#6E6E73; flex:1; }
.alt__card i { font-style:normal; font-weight:600; font-size:15px; margin-top:6px; }
