:root { --accent: #25ae8d; --dark: #222; --text: #444; --bg: #fff; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
.header { position: sticky; top:0; z-index: 50; background:#fff; border-bottom:1px solid #eee; }
.nav { max-width: 1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 18px; }
.brand { font-weight: 800; letter-spacing:.3px; color:var(--dark); }
.menu a { margin-left:18px; font-weight: 600; color:#444; }
.container { max-width: 1100px; margin: 0 auto; padding: 28px 18px; }
.hero { position: relative; overflow: hidden; aspect-ratio: 16/9; background:#000; }
.hero iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.hero-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding: 0 24px; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.4) 100%); }
.hero h1 { color:#fff; font-size: clamp(26px, 4vw, 48px); font-weight:900; margin:0 0 8px; }
.hero p { color:#fff; font-size: clamp(14px, 2vw, 20px); margin:0; opacity:.95; }

.section { padding: 36px 0; }
.section h2 { text-align:center; font-size: clamp(20px, 3.2vw, 30px); color:var(--dark); margin:0 0 10px; }
.section .sub { text-align:center; color:#666; margin-top:4px; }

.twocol { max-width: 1000px; margin: 0 auto; display:grid; grid-template-columns: 1fr 1fr; gap: 28px; text-align:center; }
@media (max-width: 800px){ .twocol { grid-template-columns: 1fr; text-align:left; } }

.pricing { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; max-width: 1100px; margin: 24px auto 0; padding: 0 18px; }
@media (max-width: 900px){ .pricing { grid-template-columns: 1fr; } }
.card { border:1px solid #e8e8e8; border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.card .hd { background: var(--accent); color:#fff; padding:16px; text-align:center; }
.card .hd .plan { font-weight: 800; text-transform: uppercase; letter-spacing:.5px; }
.card .hd .price { font-size: 28px; font-weight: 900; }
.card .hd .sub { font-size: 12px; opacity:.9; }
.card ul { list-style: none; padding: 16px 20px; margin:0; line-height: 1.6; }
.card ul li:first-child { font-weight: 800; color: var(--dark); margin-bottom: 6px; }
.cta { margin: 8px 20px 20px; }
.button { display:inline-block; width:100%; text-align:center; padding:12px 14px; background:var(--accent); color:#fff; border:none; font-weight: 800; border-radius: 10px; cursor:pointer; }
.button:hover { filter: brightness(.95); }

.grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
@media (max-width: 900px){ .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .grid { grid-template-columns: 1fr; } }
.item { border:1px solid #eee; border-radius: 12px; overflow:hidden; background:#fff; }
.item img { width:100%; height: 220px; object-fit: cover; display:block; background:#f6f6f6; }
.item .cap { padding:12px 14px; font-weight:700; color:#222; }

form { max-width: 760px; margin: 0 auto; }
label { display:block; font-weight:700; margin: 14px 0 6px; }
input[type=text], input[type=tel], input[type=email], textarea { width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:10px; font:inherit; }
textarea { min-height: 140px; resize: vertical; }
.flex { display:flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.checkbox { display:flex; align-items:center; gap:8px; margin: 8px 12px 0 0; }
small.helper { display:block; color:#777; margin-top:4px; }
footer { margin: 40px 0; text-align:center; color:#777; }