:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#5b6576;
  --accent:#f2b233;
  --accent2:#1b66ff;
  --shadow: 0 18px 45px rgba(11,18,32,.12);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit}
.container{width:min(1120px, 92vw); margin:0 auto;}

.topbar{position:sticky; top:0; z-index:20; background:rgba(246,247,251,.8); backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid rgba(11,18,32,.06)}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; gap:12px; align-items:center}
.brand__dot{width:12px;height:12px;border-radius:999px;background:var(--accent)}
.brand__name{font-weight:800; letter-spacing:.2px}
.brand__tag{font-size:12px; color:var(--muted)}

.hero{padding:34px 0 18px}
.hero__grid{display:grid; grid-template-columns: 1.06fr .94fr; gap:22px; align-items:center}
.hero__copy{padding:8px 0}
.hero__media{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background: #000}

.pill{display:inline-flex; gap:10px; align-items:center; font-size:12px; padding:8px 12px; border-radius:999px; background:rgba(242,178,51,.14); border:1px solid rgba(242,178,51,.28); color:#6b4a00; font-weight:600; margin-bottom:12px}

.h1{font-size: clamp(30px, 3.2vw, 46px); line-height:1.02; margin:0 0 10px; letter-spacing:-.6px}
.h2{font-size: clamp(24px, 2.3vw, 34px); line-height:1.12; margin:0 0 12px; letter-spacing:-.4px}
.h3{font-size: 16px; margin:0 0 10px}
.lead{font-size: 16px; line-height:1.5; color:var(--muted); margin:0 0 14px}
.p{font-size:15px; line-height:1.6; color:var(--muted); margin:0}
.center{text-align:center}

.img{width:100%; height:auto; display:block}
.img--shadow{border-radius:var(--radius); box-shadow:var(--shadow)}

.pricecard{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; border:1px solid rgba(11,18,32,.06)}
.pricecard__row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 0}
.pricecard__label{font-size:12px; color:var(--muted); font-weight:600}
.pricecard__old{font-size:16px; text-decoration:line-through; color:rgba(11,18,32,.55); font-weight:700}
.pricecard__new{font-size:28px; font-weight:800; letter-spacing:-.6px}
.pricecard__actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.micro{font-size:12px; color:rgba(11,18,32,.55); margin-top:10px}

.section{padding:44px 0}
.section--alt{background:linear-gradient(180deg, rgba(27,102,255,.06), rgba(242,178,51,.05)); border-top:1px solid rgba(11,18,32,.05); border-bottom:1px solid rgba(11,18,32,.05)}
.section__grid{display:grid; grid-template-columns: 1fr 1fr; gap:22px; align-items:center}

.bullets{margin:10px 0 0; padding-left:18px; color:var(--text)}
.bullets li{margin:8px 0; color:var(--text)}
.bullets--compact li{margin:6px 0}

.quote{margin:14px 0 0; padding:12px 14px; background:rgba(11,18,32,.04); border:1px dashed rgba(11,18,32,.15); border-radius:14px; color:rgba(11,18,32,.75); font-weight:600}

.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:14px}
.card{background:var(--card); border:1px solid rgba(11,18,32,.06); border-radius:14px; padding:12px}
.card__t{font-weight:800; font-size:13px}
.card__p{font-size:12px; color:var(--muted); margin-top:6px}

.callout{margin-top:14px; background:rgba(242,178,51,.16); border:1px solid rgba(242,178,51,.32); border-radius:14px; padding:12px}
.callout__title{font-weight:800}
.callout__text{font-size:13px; color:rgba(11,18,32,.7); margin-top:6px}

.steps{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:16px}
.step{background:var(--card); border:1px solid rgba(11,18,32,.06); border-radius:14px; padding:14px; display:flex; gap:10px; align-items:center; justify-content:flex-start}
.step__n{width:32px;height:32px;border-radius:999px; display:grid; place-items:center; background:rgba(27,102,255,.12); border:1px solid rgba(27,102,255,.22); color:#1241a8; font-weight:800}
.step__t{font-weight:800}

.minirow{display:flex; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap}

.reviews{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:16px}
.review{background:var(--card); border:1px solid rgba(11,18,32,.06); border-radius:var(--radius); padding:14px; box-shadow: 0 12px 28px rgba(11,18,32,.08)}
.review__head{display:flex; gap:10px; align-items:center; margin-bottom:10px}
.avatar{width:36px;height:36px;border-radius:999px; display:grid; place-items:center; background:rgba(242,178,51,.18); border:1px solid rgba(242,178,51,.28); font-weight:900}
.review__name{font-weight:800}
.review__meta{font-size:12px; color:var(--muted)}
.review__text{margin:0; color:rgba(11,18,32,.82); line-height:1.55; font-size:13px}

.final{padding:44px 0; background: radial-gradient(900px 480px at 20% 10%, rgba(242,178,51,.20), transparent 60%), radial-gradient(900px 480px at 80% 60%, rgba(27,102,255,.16), transparent 65%), var(--bg); border-top:1px solid rgba(11,18,32,.05)}
.final__grid{display:grid; grid-template-columns: 1fr 1fr; gap:22px; align-items:center}

.priceinline{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px}
.priceinline__old{font-weight:800; color:rgba(11,18,32,.55); text-decoration:line-through}
.priceinline__new{font-weight:900; font-size:26px}

.order{display:grid; grid-template-columns: 1fr .9fr; gap:16px; align-items:start; margin-top:18px}
.form{background:var(--card); border:1px solid rgba(11,18,32,.06); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.field{display:grid; gap:6px; margin-bottom:12px}
.field span{font-size:12px; color:var(--muted); font-weight:700}
.field input{width:100%; padding:12px 12px; border-radius:12px; border:1px solid rgba(11,18,32,.12); outline:none; font-size:14px}
.field input:focus{border-color:rgba(27,102,255,.45); box-shadow:0 0 0 4px rgba(27,102,255,.12)}
.form__note{font-size:12px; color:rgba(11,18,32,.55); margin-top:12px; line-height:1.4}
.form__status{margin-top:12px; font-size:13px; font-weight:700}

.order__side{display:grid; gap:12px}
.sidecard{background:var(--card); border:1px solid rgba(11,18,32,.06); border-radius:var(--radius); padding:14px}
.sidecard__t{font-weight:900; margin-bottom:8px}
.sidecard__p{color:var(--muted); line-height:1.5; font-size:13px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:12px; padding:10px 14px; text-decoration:none; font-weight:900; border:1px solid transparent; cursor:pointer; user-select:none}
.btn--lg{padding:12px 16px; border-radius:14px}
.btn--primary{background:linear-gradient(180deg, #1b66ff, #1250d0); color:#fff; border-color:rgba(18,80,208,.35); box-shadow:0 10px 20px rgba(27,102,255,.22)}
.btn--primary:hover{filter:brightness(1.04)}
.btn--ghost{background:transparent; border-color:rgba(11,18,32,.14); color:rgba(11,18,32,.88)}
.btn--ghost:hover{background:rgba(11,18,32,.04)}

.footer{padding:18px 0; border-top:1px solid rgba(11,18,32,.06)}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:10px; color:rgba(11,18,32,.65); font-size:12px}
.footer a{color:rgba(11,18,32,.78)}

@media (max-width: 900px){
  .hero__grid,.section__grid,.final__grid{grid-template-columns:1fr}
  .hero__media{order:-1}
  .cards{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .order{grid-template-columns:1fr}
  .topbar__inner{padding:10px 0}
}