:root { --bg:#ffffff; --card:#ffffff; --muted:#6b7280; --text:#1a1f2b; --accent:#0a84ff; --border:#e5e7eb; }
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; background:var(--bg); color:var(--text); line-height:1.7 }
.container{ width:min(1100px,92%); margin:0 auto }
.site-header{ position:sticky; top:0; background:rgba(255,255,255,.8); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--border); z-index:20 }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding:16px 0 }
.logo{ font-weight:700; font-size:1.1rem }
.logo span{ color:var(--accent) }
.nav a{ color:#4b5563; text-decoration:none; margin-left:24px }
.nav a:hover{ color:#111827 }

.hero{ padding:96px 0 48px }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center }
.hero h1{ line-height:1.1; font-size:clamp(28px,4vw,48px); margin:0 0 12px; letter-spacing:-0.01em }
.hero p{ color:var(--muted); margin:0 0 28px }
.hero-media .product-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden }
.hero-media img{ display:block; width:100%; height:auto }

.subscribe-form{ display:flex; gap:10px; align-items:center }
.subscribe-form input{ flex:1; padding:14px 14px; border-radius:12px; border:1px solid var(--border); background:#ffffff; color:var(--text); outline:none }
.subscribe-form input::placeholder{ color:#9ca3af }
.subscribe-form input:focus{ border-color:#b6c8ff; box-shadow:0 0 0 4px rgba(10,132,255,.12) }
.subscribe-form button{ padding:14px 18px; border-radius:12px; border:1px solid transparent; background:var(--accent); color:#ffffff; font-weight:700; cursor:pointer }
.subscribe-form button:hover{ background:#0a78e6 }
.form-message{ margin:6px 0 0; font-size:.92rem; min-height:1.2em; color:var(--muted) }
.visually-hidden{ position:absolute; inset:0; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap }

.features{ padding:56px 0 }
.features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.feature{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px }
.feature h3{ margin:0 0 6px; font-weight:600 }
.feature p{ margin:0; color:var(--muted) }

.quality{ padding:24px 0 56px }
.quality-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px }
.list{ margin:0; padding-left:18px; color:var(--muted) }

.cta{ padding:56px 0 80px }

.site-footer{ border-top:1px solid var(--border); padding:18px 0; color:#6b7280; background:#ffffff }
.footer-grid{ display:flex; align-items:center; justify-content:space-between }
.footer-links a{ color:#6b7280; text-decoration:none; margin-left:14px }
.footer-links a:hover{ color:#111827 }

@media (max-width: 920px){ .hero-grid{ grid-template-columns:1fr } .quality-grid{ grid-template-columns:1fr } .features-grid{ grid-template-columns:1fr } .nav a{ margin-left:16px } .hero{ padding:72px 0 36px } }

/* Catalog */
.catalog{ padding:24px 0 64px; border-top:1px solid var(--border) }
.catalog h2{ margin:0 0 8px; letter-spacing:-0.01em }
.catalog-note{ color:var(--muted); margin:0 0 16px }
.catalog-note a{ color:#0a84ff; text-decoration:none }
.catalog-note a:hover{ text-decoration:underline }
.catalog-toggle{ display:inline-flex; background:#f3f4f6; border:1px solid var(--border); border-radius:10px; padding:4px; gap:4px; margin:8px 0 16px }
.catalog-tab{ appearance:none; border:0; background:transparent; padding:8px 12px; border-radius:8px; color:#374151; cursor:pointer; font-weight:600 }
.catalog-tab[aria-selected="true"]{ background:#ffffff; box-shadow:0 1px 2px rgba(0,0,0,.04); color:#111827 }
.catalog-frame-wrap{ position:relative; width:100%; height:70vh; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fafafa }
.catalog iframe{ display:block; width:100%; height:100%; border:0 }

.cat{ align-items: center }
.cat-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:50px }
.cat{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px }
.cat h3{ margin:0 0 6px; font-weight:600 }
.cat p{ margin:0; color:var(--muted) }