
:root{
  --bg:#ffffff;
  --txt:#1a1a1a;
  --muted:#666;
  --pri:#0a7cff;
  --sec:#0f9d58;
  --border:#e6e6e6;
  --card-bg:#fff;
  --header-bg:#fff;
  --footer-bg:#fafafa;
  --shadow:0 2px 8px rgba(0,0,0,0.1);
  --radius:12px;
  --transition:all 0.3s ease;
}

[data-theme="dark"]{
  --bg:#0f0f0f;
  --txt:#ffffff;
  --muted:#a0a0a0;
  --pri:#4a9eff;
  --sec:#4ade80;
  --border:#333333;
  --card-bg:#1a1a1a;
  --header-bg:#0f0f0f;
  --footer-bg:#111111;
  --shadow:0 2px 8px rgba(0,0,0,0.3);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;font-size:16px;line-height:1.55;color:var(--txt);background:var(--bg);transition:var(--transition)}
header,footer,main,section,article,nav{display:block}
a{color:var(--pri);text-decoration:none;transition:var(--transition)}
a:hover{text-decoration:underline;color:var(--sec)}
header{position:sticky;top:0;background:var(--header-bg);border-bottom:1px solid var(--border);z-index:5;padding:0.75rem 1rem;transition:var(--transition)}
.header-content{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--txt);text-decoration:none}
.logo img{width:40px;height:40px;border-radius:8px}
.menu{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.menu a{padding:0.5rem 1rem;border-radius:8px;transition:var(--transition)}
.menu a:hover{background:var(--pri);color:white;text-decoration:none}
.burger{display:none;background:none;border:1px solid var(--border);border-radius:.5rem;padding:.4rem .6rem;color:var(--txt);cursor:pointer;transition:var(--transition)}
.burger:hover{background:var(--pri);color:white}
.theme-toggle{background:none;border:1px solid var(--border);border-radius:8px;padding:0.5rem;cursor:pointer;color:var(--txt);transition:var(--transition)}
.theme-toggle:hover{background:var(--pri);color:white}

@media (max-width:800px){
  .menu{display:none;flex-direction:column;padding:1rem;position:absolute;top:100%;left:0;right:0;background:var(--header-bg);border:1px solid var(--border);border-top:none}
  .menu.active{display:flex}
  .burger{display:inline-block}
  .header-content{flex-wrap:wrap;gap:1rem}
}
main{max-width:1100px;margin:0 auto;padding:1rem}
footer{border-top:1px solid var(--border);padding:2rem 0;background:var(--footer-bg);transition:var(--transition)}
footer .grid-3{max-width:1100px;margin:0 auto;padding:0 1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
@media (max-width:900px){.grid-3{grid-template-columns:1fr;gap:1rem}}
.hero{padding:3rem 2rem;background:linear-gradient(135deg,var(--pri),var(--sec));color:white;border-radius:var(--radius);margin:2rem 0;text-align:center;box-shadow:var(--shadow)}
.hero h1{font-size:2.5rem;margin:0 0 1rem 0;font-weight:700}
.hero p{font-size:1.2rem;margin:0 0 2rem 0;opacity:0.9}
.cta-wrap{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;background:var(--pri);color:white;padding:1rem 2rem;border-radius:var(--radius);border:none;font-weight:600;text-decoration:none;transition:var(--transition);cursor:pointer;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2);text-decoration:none}
.btn-sec{background:white;color:var(--pri);border:2px solid white}
.btn-sec:hover{background:var(--pri);color:white}
.cards .card{border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;background:var(--card-bg);transition:var(--transition);box-shadow:var(--shadow)}
.cards .card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,0.15)}
.price{font-weight:700;font-size:1.5rem;color:var(--sec);margin:1rem 0}
.copy{color:var(--muted);font-size:.9rem;text-align:center;margin-top:2rem}
.filters{display:flex;gap:1rem;flex-wrap:wrap;margin:2rem 0;padding:1.5rem;background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border)}
input,select,textarea,button{font:inherit;padding:.8rem;border:1px solid var(--border);border-radius:var(--radius);width:100%;background:var(--bg);color:var(--txt);transition:var(--transition)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(10,124,255,0.1)}
label{display:flex;flex-direction:column;gap:.5rem;min-width:200px;font-weight:500}
fieldset{border:1px solid var(--border);border-radius:var(--radius);margin:1.5rem 0;padding:1.5rem;background:var(--card-bg)}
legend{font-weight:600;padding:0 1rem;color:var(--pri)}
.cookie-banner{position:fixed;inset:auto 0 0 0;background:#111;color:#fff;padding:1rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:space-between;z-index:999}
.cookie-actions{display:flex;gap:.5rem}
.cookie-banner button{background:#fff;color:#111;border:0;padding:.5rem .8rem;border-radius:.5rem}
.cookie-banner a{color:#9ad}
.hidden{display:none!important}
.cta-wide{margin:2rem 0;padding:2rem;border:2px dashed var(--border);border-radius:var(--radius);background:var(--card-bg);text-align:center}
.faq article{border-top:1px solid var(--border);padding:1.5rem 0;transition:var(--transition)}
.faq article:hover{background:var(--card-bg);margin:0 -1rem;padding:1.5rem;border-radius:var(--radius)}
.faq h3{color:var(--pri);margin:0 0 0.5rem 0}
.contact-form,.sell-form{max-width:600px;margin:2rem auto}
.how{background:var(--card-bg);padding:2rem;border-radius:var(--radius);border:1px solid var(--border);margin:2rem 0}
.how h2{color:var(--pri);margin:0 0 1rem 0}
.hint{color:var(--muted);font-size:0.9rem;margin-top:1rem}
.features article{text-align:center;padding:2rem 1rem}
.features article img{margin-bottom:1rem;border-radius:12px;transition:var(--transition)}
.features article:hover img{transform:scale(1.1)}
