:root{--bg:#f8fafc;--fg:#111827;--surface:#fff;--accent:#0f766e}
@media(prefers-color-scheme:dark){:root{--bg:#020617;--fg:#f8fafc;--surface:#111827}}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,sans-serif;background:var(--bg);color:var(--fg)}
.header{display:flex;justify-content:space-between;align-items:center;padding:16px 6%;position:sticky;top:0;background:rgba(255,255,255,.88);backdrop-filter:blur(10px)}
@media(prefers-color-scheme:dark){.header{background:rgba(2,6,23,.88)}}
.logo{font-weight:800}.logo span{color:var(--accent)}#menuBtn{display:none;background:none;border:none;font-size:28px}
nav{display:flex;gap:18px;align-items:center}nav a{text-decoration:none;color:inherit}
.hero{padding:100px 6%;text-align:center;background:linear-gradient(180deg,rgba(15,118,110,.08),transparent)}
.hero-box{max-width:800px;margin:auto}.tag{color:var(--accent);font-weight:700}.btn{display:inline-block;margin:8px;padding:12px 20px;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none}.ghost{background:transparent;border:2px solid var(--accent);color:var(--accent)}
section{padding:64px 6%}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.card{background:var(--surface);padding:24px;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.08);transition:.2s}.card:hover{transform:translateY(-5px)}
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}
details{background:var(--surface);padding:12px;border-radius:12px;margin:10px 0}footer{text-align:center;padding:40px;border-top:1px solid #ddd}
@media(max-width:768px){#menuBtn{display:block}nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--surface);flex-direction:column;padding:16px}nav.open{display:flex}.header{padding:14px 5%}}