/* Afterglow Media — one-pager. Premium dark with a warm "afterglow" accent. */
:root{
  --bg:#0c0a0b; --panel:#141011; --ink:#f3edee; --muted:#a99fa2;
  --glow:#e8a07a; --glow2:#c8517a; --line:#241d1f;
  --radius:16px; --max:1080px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.12; letter-spacing:-0.02em; margin:0 0 .4em}
h1{font-size:clamp(2.2rem,6vw,4rem); font-weight:800}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:700}
p{margin:0 0 1rem} a{color:inherit; text-decoration:none}
section{padding:clamp(3rem,7vw,6rem) 1.25rem; max-width:var(--max); margin:0 auto}

/* nav */
.nav{position:sticky; top:0; z-index:10; display:flex; align-items:center;
  justify-content:space-between; padding:1rem 1.25rem; max-width:var(--max);
  margin:0 auto; backdrop-filter:blur(8px); background:rgba(12,10,11,.7)}
.brand{font-weight:800; letter-spacing:-.02em; font-size:1.15rem}
.brand span{color:var(--glow)}
.nav-cta{font-size:.9rem; padding:.5rem .9rem; border:1px solid var(--line);
  border-radius:999px; color:var(--muted)}
.nav-cta:hover{color:var(--ink); border-color:var(--glow)}

/* hero */
.hero{text-align:center; padding-top:clamp(3rem,8vw,7rem)}
.eyebrow{text-transform:uppercase; letter-spacing:.22em; font-size:.78rem;
  color:var(--glow); margin-bottom:1.2rem}
.hero h1{background:linear-gradient(120deg,#fff 30%,var(--glow) 75%,var(--glow2));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{max-width:640px; margin:0 auto 2rem; color:var(--muted); font-size:1.12rem}
.cta-row{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

/* buttons */
.btn{display:inline-block; padding:.85rem 1.4rem; border-radius:999px; font-weight:600}
.btn-primary{background:linear-gradient(120deg,var(--glow),var(--glow2)); color:#1a0f12}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{border:1px solid var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--glow)}

/* sections */
.section-sub{color:var(--muted); margin-top:-.2rem; margin-bottom:2rem}
.work.alt,.how,.offer{background:var(--panel); max-width:none}
.work.alt>*,.how>*,.offer>*{max-width:var(--max); margin-left:auto; margin-right:auto}

/* video grid */
.video-grid{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.video-grid figure{margin:0}
.video-grid video{width:100%; aspect-ratio:9/16; object-fit:cover;
  border-radius:var(--radius); background:#000; border:1px solid var(--line)}
.video-grid figcaption{color:var(--muted); font-size:.85rem; margin-top:.5rem; text-align:center}

/* carousel */
.carousel{display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem; scroll-snap-type:x mandatory}
.carousel img{height:60vh; max-height:520px; width:auto; border-radius:var(--radius);
  border:1px solid var(--line); scroll-snap-align:center; flex:0 0 auto}

/* steps */
.steps{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem}
.step span{display:inline-grid; place-items:center; width:2.2rem; height:2.2rem;
  border-radius:999px; background:linear-gradient(120deg,var(--glow),var(--glow2));
  color:#1a0f12; font-weight:800; margin-bottom:.8rem}
.step h3{font-size:1.1rem} .step p{color:var(--muted); margin:0}

/* offer */
.price-card{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem; max-width:460px; text-align:center}
.price strong{font-size:3rem; background:linear-gradient(120deg,var(--glow),var(--glow2));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.price span{color:var(--muted)}
.price-card ul{list-style:none; padding:0; margin:1.2rem 0; text-align:left}
.price-card li{padding:.4rem 0 .4rem 1.6rem; position:relative; color:var(--ink)}
.price-card li:before{content:"✦"; position:absolute; left:0; color:var(--glow)}
.fine{color:var(--muted); font-size:.82rem; margin-top:1rem; margin-bottom:0}

/* contact */
.contact{text-align:center}
.contact-row{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem}
footer{text-align:center; color:var(--muted); padding:2rem 1rem; border-top:1px solid var(--line); font-size:.85rem}