:root {
  --bg: #f0fdfa; --card: #fff; --ink: #134e4a; --muted: #64748b; --line: #e2e8f0;
  --accent: #0d9488; --ok: #059669; --radius: 12px; --max: 1100px;
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui,sans-serif; background:var(--bg); color:var(--ink); line-height:1.55; }
a { color: var(--accent); }
.wrap { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.top { background: var(--ink); color:#fff; position:sticky; top:0; z-index:40; }
.top-inner { display:flex; justify-content:space-between; align-items:center; min-height:56px; }
.logo { color:#fff; font-weight:800; text-decoration:none; font-size:1.2rem; }
.logo span { color: var(--accent); }
nav { display:flex; gap:12px; flex-wrap:wrap; }
nav a { color:#cbd5e1; text-decoration:none; font-size:.9rem; }
.hero { padding: 32px 0 16px; }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; }
.hero-grid.rev { grid-template-columns:.9fr 1.1fr; }
.hero-grid.rev .hero-copy { order:2; }
.eyebrow { margin:0 0 8px; color:var(--accent); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.hero h1 { margin:0 0 12px; font-size:clamp(1.6rem,3.8vw,2.5rem); line-height:1.15; }
.lead { margin:0 0 16px; color:var(--muted); max-width:40ch; }
.badge-note { font-size:.88rem; color:var(--muted); border-left:3px solid var(--accent); padding-left:10px; }
.hero-visual { border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; box-shadow:0 12px 32px rgba(0,0,0,.08); }
.hero-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.btn { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:10px; background:var(--accent); color:#fff; padding:11px 18px; font-weight:700; cursor:pointer; text-decoration:none; }
.btn-ghost { background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-block { width:100%; } .btn-sm { width:100%; margin-top:6px; padding:9px; font-size:.88rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.section { padding:28px 0; }
.section-sub { color:var(--muted); margin:0 0 14px; }
/* layouts */
.layout-L2, .layout-L3, .layout-L6 { display:grid; gap:20px; align-items:start; }
.layout-L2 { grid-template-columns:1fr 360px; }
.layout-L3 { grid-template-columns:360px 1fr; }
.layout-L5 { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.layout-L6 { grid-template-columns:1fr 320px; }
.sticky { position:sticky; top:70px; }
.products { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.products.cols2 { grid-template-columns:repeat(2,1fr); }
.product { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.product.row { display:grid; grid-template-columns:120px 1fr; }
.product img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.product.row img { width:120px; height:120px; aspect-ratio:auto; }
.product-body { padding:12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.product-body h3 { margin:0; font-size:1rem; }
.product-body p { margin:0; color:var(--muted); font-size:.88rem; }
.specs { margin:0; padding-left:1em; color:var(--muted); font-size:.8rem; }
.price { margin:4px 0 0!important; font-size:1.2rem!important; font-weight:800!important; }
.price span { font-size:.72rem; font-weight:500; color:var(--muted); }
.stock-ok { color:var(--ok)!important; font-size:.8rem; }
.stock-wait { color:#d97706!important; font-size:.8rem; }
.player { position:relative; background:#000; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; border:1px solid var(--line); }
.player video { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
.tap-play { position:absolute; inset:0; border:0; z-index:5; background:rgba(0,0,0,.42); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; font:inherit; pointer-events:auto; }
.tap-play[hidden] { display:none; }
.play-icon { width:54px; height:54px; border-radius:50%; background:var(--accent); display:grid; place-items:center; }
.player video::-webkit-media-controls { display:none!important; }
.v-progress { position:absolute; left:0; right:0; bottom:0; z-index:6; padding:10px 12px 12px; background:linear-gradient(transparent,rgba(0,0,0,.72)); pointer-events:none; user-select:none; }
.v-progress-track { height:5px; border-radius:999px; background:rgba(255,255,255,.28); overflow:hidden; }
.v-progress-fill { height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,var(--accent),#fbbf24); transition:width .15s linear; pointer-events:none; }
.v-progress-time { margin-top:6px; font-size:.75rem; color:rgba(255,255,255,.9); font-variant-numeric:tabular-nums; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.step { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; }
.step strong { color:var(--accent); font-size:.75rem; }
.step h3 { margin:6px 0 4px; font-size:.95rem; } .step p { margin:0; color:var(--muted); font-size:.85rem; }
.reviews { display:grid; gap:10px; max-width:760px; }
.reviews.cols2 { grid-template-columns:1fr 1fr; }
.review { display:grid; grid-template-columns:44px 1fr; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; }
.avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; background:#ddd; }
.meta { display:flex; flex-wrap:wrap; gap:6px 10px; font-size:.85rem; margin-bottom:4px; }
.meta span { color:var(--muted); } .stars { color:#f59e0b; }
.feedback-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.feedback-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.feedback-form label { display:flex; flex-direction:column; gap:4px; font-size:.8rem; font-weight:600; color:var(--muted); }
.feedback-form label.full { grid-column:1/-1; }
.feedback-form label.check { flex-direction:row; font-weight:400; align-items:flex-start; gap:8px; }
.feedback-form input,.feedback-form textarea,.feedback-form select { border:1px solid var(--line); border-radius:8px; padding:9px; font:inherit; font-weight:400; background:#fff; color:var(--ink); }
.feedback-form .btn { grid-column:1/-1; }
.form-note,.form-ok { grid-column:1/-1; margin:0; font-size:.85rem; } .form-ok { color:var(--ok); font-weight:700; }
.contact-line { margin-top:12px; padding-top:10px; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }
.contact-line p { margin:3px 0; } .contact-line strong { color:var(--ink); }
.footer { background:var(--ink); color:#94a3b8; padding:24px 0 36px; margin-top:20px; }
.footer-inner { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }
.footer a { color:#cbd5e1; } .footer-links { display:flex; flex-wrap:wrap; gap:12px; }
.muted-sm { font-size:.85rem; margin:6px 0 0; }
.legal-page { padding:32px 0 48px; }
.legal-card { max-width:800px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
@media(max-width:900px){
  .hero-grid,.layout-L2,.layout-L3,.layout-L5,.layout-L6 { grid-template-columns:1fr; }
  .sticky { position:static; }
  .products { grid-template-columns:1fr 1fr; }
  .steps,.feedback-form,.reviews.cols2 { grid-template-columns:1fr; }
  .hero-grid.rev .hero-copy { order:0; }
}
@media(max-width:560px){ .products { grid-template-columns:1fr; } }