:root{
  --bg: #0f1217;
  --bg-2:#11151b;
  --surface: #161b22;
  --text: #e6e8eb;
  --muted: #9aa1aa;
  --brand-500:#6ee7b7;
  --brand-600:#34d399;
  --brand-700:#059669;
  --accent:#a78bfa;
  --ring: rgba(110,231,183,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,Helvetica,sans-serif;
  background: radial-gradient(1200px 800px at 10% -10%, #1a2130 0%, var(--bg) 40%), var(--bg);
  color: var(--text);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{color:var(--brand-500); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1080px;margin:0 auto;padding:24px}
.container.narrow{max-width:800px}
.row{display:flex;gap:16px;align-items:flex-start}
.row.center{align-items:center}
.row.between{justify-content:space-between}
.row.gap{gap:12px}
.row.wrap{flex-wrap:wrap}
.grid{display:grid;gap:20px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 900px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:14px;background:linear-gradient(180deg,var(--brand-600),var(--brand-700));
  color:#02130e;border:none;box-shadow:var(--shadow);font-weight:600;cursor:pointer;
  transition: transform .15s ease, filter .2s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(1px)}
.btn.ghost{background:transparent;border:1px solid var(--brand-600);color:var(--text)}
.btn.small{padding:8px 12px;border-radius:10px}

.site-header{position:sticky;top:0;z-index:50;background: rgba(15,18,23,.7);backdrop-filter: blur(8px);border-bottom:1px solid #232937}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.logo-type{font-weight:800;letter-spacing:.3px}
.logo-mark{color: var(--brand-600)}
.nav{display:flex;gap:16px}
.nav-link{padding:10px 12px;border-radius:10px}
.nav-link.active, .nav-link:hover{background:#1b2130}
.menu-toggle{display:none;background:transparent;border:none;padding:6px;cursor:pointer}
.menu-toggle span{display:block;width:24px;height:2px;background:#cdd3db;margin:5px 0;border-radius:1px}
.mobile-nav{display:none;padding:12px;border-top:1px solid #232937}
@media(max-width:800px){
  .nav{display:none}
  .menu-toggle{display:block}
  .mobile-nav[hidden]{display:none}
  .mobile-nav{display:grid;gap:8px;background:#0f141c}
}

.hero .title{font-size: clamp(28px, 4vw, 44px); line-height:1.2; margin: 8px 0 12px}
.lead{color:var(--muted);max-width:60ch}
.trust-badges{display:flex;gap:12px;list-style:none;padding:0;margin:14px 0 0}
.trust-badges li{padding:6px 10px;border-radius:999px;background:#1b2130;color:#c9d2dd;border:1px solid #2a3344}
.hero-art .art{width:100%;height:auto}
.hero-art .stroke{fill:none;stroke:#2a3344;stroke-width:8}

.cards .card{background:#121722;border:1px solid #222839;border-radius:16px;padding:18px;box-shadow:var(--shadow);transition: transform .2s ease, border-color .2s}
.cards .card:hover{transform: translateY(-3px);border-color:#2e3750}
.link{font-weight:600}

.highlight{background: linear-gradient(180deg,#121723,#0e1219); border:1px solid #202636;border-radius:16px;padding:16px;box-shadow:var(--shadow)}

.content h1,.content h2{line-height:1.2;margin:8px 0}
.content p{color:#cfd5df}
.checklist{padding-left:0;list-style:none}
.checklist li{position:relative;margin:8px 0;padding-left:26px}
.checklist li::before{content:"✓";position:absolute;left:0;top:0.1rem;color:var(--brand-500);font-weight:900}

.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:10px}
.product-card{background:#121722;border:1px solid #222839;border-radius:16px;padding:12px;box-shadow:var(--shadow);outline:none}
.product-card:focus{box-shadow:0 0 0 3px var(--ring)}
.price{font-weight:800}
.ph-img{background:linear-gradient(180deg,#161b26,#0f131b);border:1px solid #232a3a;border-radius:12px;height:140px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.ph-img svg{width:70%;height:auto;fill:#1e2737;stroke:#2b3448}
.cart{margin-top:20px;background:#101620;border:1px solid #1f2838;border-radius:16px;padding:16px}

.site-footer{border-top:1px solid #232937;background:#0d1218;margin-top:30px}
.site-footer h4{margin:8px 0}
.list{list-style:none;padding-left:0;margin:0}
.list li{margin:6px 0}

.form .input{display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px;margin-bottom:10px}
.form .input input,.form .input textarea,
.newsletter input{background:#0e141d;border:1px solid #243046;color:#dbe2ec;border-radius:12px;padding:12px 14px;outline:none}
.form .input input:focus, .form .input textarea:focus, .newsletter input:focus{box-shadow:0 0 0 3px var(--ring)}
.form-note{color:#9aa4af;font-size:.9rem}

.cookie-banner{position:fixed;bottom:16px;left:16px;right:16px;background:#0f141c;border:1px solid #203045;border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.cookie-banner .cookie-content{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.btn.ghost{border-color:#2b384d}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[data-animate]{opacity:0;transform: translateY(8px);transition:opacity .6s ease, transform .6s ease}
[data-animate].in{opacity:1;transform:none}