:root{--bg:#0A0A0A;--text:#E6E6E6;--accent:#1F75FE;--white:#fff;--card:#ffffff22;--maxw:1200px}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:56px 18px}
.header{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.8);border-bottom:1px solid #ffffff14;backdrop-filter:saturate(150%) blur(6px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff}
.brand img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #ffffff22}
.menu{display:flex;gap:14px;flex-wrap:wrap}.menu a{color:var(--text);padding:8px 10px;border-radius:10px}.menu a:hover{background:#ffffff12}
.socials{display:flex;gap:10px;align-items:center}.icon{width:18px;height:18px;filter:invert(1);opacity:.9}
.hero{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.hero h1{color:#fff;font-size:clamp(32px,5vw,52px);line-height:1.1;margin:0 0 10px}
.hero p{color:#cfcfcf;margin:0 0 18px}
.badges{display:flex;gap:8px;flex-wrap:wrap}.pill{padding:8px 12px;border:1px solid #ffffff22;border-radius:999px;color:#cfcfcf;font-size:13px}
.btn{display:inline-block;padding:12px 14px;border-radius:12px;font-weight:700;border:none;cursor:pointer}
.btn-primary{background:#fff;color:#0A0A0A;box-shadow:0 0 18px rgba(255,255,255,.18)}
.btn-ghost{background:transparent;color:#fff;border:1px solid #ffffff22}
.media{width:100%;aspect-ratio:16/9;background:#0f0f0f;border:1px solid #ffffff1a;border-radius:16px;overflow:hidden;display:grid;place-items:center;color:#9aa0a6}
.section-title{color:#fff;font-size:clamp(22px,3.2vw,34px);margin:0 0 14px}

.grid-3{display:grid;grid-template-columns:1fr;gap:18px}
.card{background:linear-gradient(180deg,#111,#0C0C0C);border:1px solid var(--card);border-radius:16px;padding:16px;display:grid;gap:8px}
.card h3{margin:0 0 6px}
.price{font-size:26px;font-weight:800;color:#fff;margin:0}
.features{color:#cfcfcf;display:grid;gap:6px;font-size:15px}
.card .btn{margin-top:8px}

.footer{border-top:1px solid #ffffff12;color:#bdbdbd}
.footer .row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}

.form{display:grid;gap:12px}.input,.textarea,.select{padding:12px;border-radius:10px;border:1px solid #ffffff22;background:#0B0B0B;color:#fff}
.textarea{min-height:120px;resize:vertical}
.small{font-size:13px;color:#B7B7B7}

@media(min-width:860px){.hero{grid-template-columns:1.15fr .85fr}.grid-3{grid-template-columns:repeat(3,1fr)}}

/* Autoplay hero video */
.hero .media { position: relative; overflow: hidden; border-radius: 12px; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fine-tune hero video framing so lower endframe (teeth / 'promotion') is visible */
.hero-video { object-position: center 58%; }


/* Fine-tune framing on wide screens */
@media (min-width: 1024px) {
  .hero-video { object-position: center 54%; }
}


@media (max-width: 640px) {
  .media { aspect-ratio: 9 / 16; }
}

@media (min-width: 1280px) {
  .hero-video { object-position: center 34%; }
}

@media (min-width: 1440px) {
  .hero-video { object-position: center 26%; }
}