:root{
  --bg: #0f0d16; --panel: #171424; --panel-2: #1e1a2e; --muted: #b6b0c7; --text: #f4f1ff;
  --brand: #7c4dff; --brand-2: #8959ff; --ring: rgba(124,77,255,0.4); --card:#19162a; --border:#2a2740;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body.theme-dark{background:radial-gradient(1000px 600px at 70% -100px,#1a1630 0%,#0f0d16 60%) fixed,var(--bg);color:var(--text);
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.6}
.container{width:min(1100px,92%);margin-inline:auto}
.site-header{position:sticky;top:0;backdrop-filter:blur(8px);background:rgba(15,13,22,.6);z-index:30;border-bottom:1px solid var(--border)}
.nav-wrap{display:flex;align-items:center;gap:20px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700}
.brand .logo{width:22px;height:22px;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:6px;display:inline-block}
.nav{display:flex;gap:18px;margin-left:auto}
.nav a{color:var(--muted);text-decoration:none;font-weight:500}
.nav a:hover,.nav a.active{color:var(--text)}
.nav-cta{display:flex;gap:12px;margin-left:8px}
.login{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px}
.login:hover{background:var(--panel);color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;border:1px solid var(--border);
text-decoration:none;color:var(--text);font-weight:600;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.btn .arrow{display:inline-block;transform:translateX(2px)} .btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px -10px var(--ring)}
.btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-2));border-color:transparent} .btn-ghost{background:transparent;color:var(--text)}
.hero{padding:90px 0 50px;background:transparent}.hero-inner{text-align:center;max-width:900px;margin:0 auto}
.hero h1{font-family:"DM Serif Display",serif;font-weight:400;line-height:1.05;font-size:clamp(36px,6vw,64px);margin:0 0 12px}
.lead{color:var(--muted);max-width:780px;margin:0 auto 24px;font-size:18px} .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.page-hero{padding:70px 0 20px;border-bottom:1px solid var(--border)}
.page-hero h1{font-family:"DM Serif Display",serif;font-weight:400;font-size:clamp(32px,4vw,44px);margin:0 0 8px}
.cards3{padding:48px 0}.cards3 h2{font-family:"DM Serif Display",serif;font-weight:400;font-size:clamp(28px,3.6vw,36px);text-align:center;margin:0 0 28px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 10px 30px -20px rgba(0,0,0,.6)}
.card .icon{width:44px;height:44px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--border);border-radius:12px;margin-bottom:14px}
.card h3{margin:0 0 6px;font-size:20px}.card p{color:var(--muted);margin:0} .center{display:flex;justify-content:center;margin-top:22px}
.brands{padding:20px 0 48px}
.product-list{padding:30px 0 60px}.product-row{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;padding:26px 0;border-bottom:1px solid var(--border)}
.product-row:last-child{border-bottom:none}.product-row.reverse .product-media{order:2}
.product-media .img{height:180px;background:radial-gradient(200px 100px at 40% -60px,#251d44,#141022);border:1px solid var(--border);border-radius:16px}
.product-copy .icon{width:44px;height:44px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--border);border-radius:12px;margin-bottom:12px}
.product-copy h3{margin:0 0 6px;font-size:22px}.product-copy p{color:var(--muted);margin:0}
.text-cols{display:grid;grid-template-columns:2fr 1fr;gap:24px}.text-cols ul{margin-top:10px}
.side-note{background:var(--panel-2);border:1px solid var(--border);padding:16px;border-radius:14px;position:sticky;top:90px;height:fit-content}
.side-note .icon{width:36px;height:36px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--border);border-radius:10px;margin-bottom:10px}
.testimonials{padding:40px 0}.quote-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}.stars{color:#c29cff;margin-bottom:8px}
.contact{padding:40px 0 70px}.form{display:grid;gap:14px;max-width:640px}.form.small{max-width:440px}
.form label{display:grid;gap:6px;color:var(--muted)} .form input,.form textarea{background:var(--panel);color:var(--text);border:1px solid var(--border);
padding:12px;border-radius:12px;outline:none;transition:box-shadow .2s ease,border-color .2s ease}
.form input:focus,.form textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)} .form-result{margin-top:6px;color:var(--muted)}
.site-footer{border-top:1px solid var(--border);background:#0c0a13;padding:30px 0 20px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px} .footer-h{font-weight:700;margin-bottom:8px}
.brand-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}.brand-row .logo{width:22px;height:22px;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:6px;display:inline-block}
.brand-text{font-weight:700}
.animate-in-view{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.animate-in-view.is-in-view{opacity:1;transform:none}
@media (max-width:900px){.grid3{grid-template-columns:1fr}.product-row{grid-template-columns:1fr}.text-cols{grid-template-columns:1fr}.nav{display:none}}