:root{
  --bg-top:#ECECEC; --bg-mid:#9B9B9B; --bg-bottom:#2B2B2B;
  --text:#E8E1D8; --ink:#1c1c1c; --accent:#C33;
  --card:#ffffff; --smoke:#f2f2f2;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--ink); background:#111; line-height:1.5}

.ribbon{position:fixed;top:0;left:0;right:0;z-index:999;background:linear-gradient(90deg,#222,#444);
  color:#fff;text-align:center;font-weight:800;letter-spacing:.12em;padding:8px 12px;font-size:12px;text-transform:uppercase}

.site-header{position:sticky;top:32px;z-index:10;background:rgba(20,20,20,.85);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.nav .brand{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.04em}
.nav-menu{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.nav-menu a{color:#fff;text-decoration:none;font-weight:600;opacity:.95}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:22px}

.hero{position:relative;isolation:isolate;overflow:hidden;min-height:72vh;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--bg-top) 0%, var(--bg-mid) 46%, var(--bg-bottom) 100%)}
.hero .hero-inner{text-align:center;padding:48px 16px;max-width:min(1200px,92vw)}
.hero .logo{width:min(78vw,880px);height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.hero .badge{display:inline-block;margin:10px auto 0;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;
  font-weight:800;letter-spacing:.16em;font-size:12px;text-transform:uppercase}
.hero .tagline{margin:12px 0 0;color:var(--text);font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.hero .cta-row{margin-top:18px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;background:transparent;border:2px solid var(--text);color:var(--text);padding:10px 18px;border-radius:12px;text-decoration:none;font-weight:800}
.btn:hover{transform:translateY(-1px)}
.link{color:#fff;text-decoration:none;font-weight:700;opacity:.9}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(1200px 60% at 50% 100%, transparent 0%, rgba(0,0,0,.35) 90%)}

.section{background:#fff;color:#1a1a1a;padding:56px 16px}
.section.alt{background:var(--smoke)}
.section .section-head{max-width:1000px;margin:0 auto 22px;text-align:center}
.section h2{margin:.2em 0 .3em;font-size:clamp(28px,3.4vw,36px)}
.section p{margin:0 auto;max-width:820px;opacity:.9}

.grid{max-width:1100px;margin:22px auto 0;display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid #e9e9e9;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.card .price{font-weight:800}
.ph{height:220px;border-radius:12px;background:linear-gradient(135deg,#ddd,#bbb);display:block}
.ph-1{background:linear-gradient(135deg,#d9d9d9,#bfbfbf)}
.ph-2{background:linear-gradient(135deg,#cfcfcf,#a6a6a6)}
.ph-3{background:linear-gradient(135deg,#d6d6d6,#b8b8b8)}

.pod-wrap{max-width:900px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.pod-wrap iframe{display:block;width:100%;height:220px;background:#0f0f0f}
.pod-cta{margin-top:16px;text-align:center;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.split{max-width:1000px;margin:0 auto;columns:2;gap:32px}
.split p{break-inside:avoid}

.site-footer{background:#0e0e0e;color:#f5f5f5;text-align:center;padding:28px 16px}
.site-footer a{color:#fff;text-decoration:none}
.copy{opacity:.7;margin-top:6px}

.socials{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:10px}
.socials a{color:#fff;text-decoration:none;opacity:.9}
.footer-socials{margin:10px 0 0; display:flex; gap:14px; justify-content:center}
.footer-socials img,.socials img{width: 24px;height: 24px;filter:invert(1)}

.input, textarea{width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:10px; font:inherit}
textarea{min-height:140px; resize:vertical}
.button{display:inline-block; background:#111; color:#fff; border-radius:10px; padding:10px 16px; text-decoration:none; font-weight:800; border:2px solid #111}
.button:hover{background:#fff;color:#111}

@media (max-width:900px){
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav-toggle{display:block}
  .nav-menu{display:none;flex-direction:column;background:#161616;position:absolute;right:16px;top:84px;padding:12px 16px;border-radius:12px}
  .nav-menu.show{display:flex}
  .hero .logo{width:min(88vw,720px)}
  .split{columns:1}
}