/* Base */
* { box-sizing: border-box; }
:root{
  --bg:#0b1220;
  --card:#0f172a;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --brand:#2F80ED;
  --brand2:#27AE60;
  --border:#1f2937;
}
html,body{ margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }
a{ color:#cde1ff; text-decoration: none; }
a:hover{ text-decoration: underline; }
.container{ width:min(1120px, 92%); margin-inline:auto; }

/* Header */
.site-header{ position:sticky; top:0; backdrop-filter: blur(8px); background: rgba(11,18,32,0.7); border-bottom:1px solid var(--border); z-index:10;}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand img{ height:36px; }
.nav a{ margin-left:20px; color:var(--text); opacity:0.9; }
.nav a:hover{ opacity:1; }

/* Hero */
.hero{ padding:34px 0 10px; }
.hero h1{ margin:0 0 6px; font-size: clamp(28px, 4vw, 40px); background:linear-gradient(90deg,var(--brand2),var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p{ margin:0 0 18px; color:var(--muted); }
.controls{ display:flex; gap:12px; flex-wrap:wrap; }
.controls input, .controls select{ background:var(--card); border:1px solid var(--border); color:var(--text); padding:12px 14px; border-radius:10px; outline:none; }
.controls input{ flex:1 1 260px; }
.controls select{ flex:0 0 220px; }

/* Grid */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:22px; padding:28px 0 60px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.cover{ aspect-ratio: 4/5; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(39,174,96,.2), rgba(47,128,237,.25)), radial-gradient(1200px 600px at 0% 0%, rgba(255,255,255,.05), transparent); }
.cover svg{ width:78%; height:auto; }
.badge{ position:absolute; top:10px; left:10px; background:linear-gradient(90deg,var(--brand2),var(--brand)); color:white; padding:6px 10px; font-size:12px; border-radius:999px; }
.card-body{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.title{ font-weight:600; line-height:1.3; min-height:52px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-weight:700; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; background:linear-gradient(90deg,var(--brand2),var(--brand)); border:none; color:#fff; border-radius:10px; cursor:pointer; }
.btn:hover{ filter:brightness(1.05); }
.card-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }

/* Contact */
.contact{ border-top:1px solid var(--border); padding:30px 0 60px;}
.contact h2{ margin:0 0 12px;}
.contact-form{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.contact-form textarea{ grid-column: 1/-1; }
.contact-form button{ justify-self:start; }
.contact-form input, .contact-form textarea, .contact-form button{ background:var(--card); border:1px solid var(--border); color:var(--text); padding:12px 14px; border-radius:10px; }
.contact-form button{ background:linear-gradient(90deg,var(--brand2),var(--brand)); border:none; cursor:pointer; }

/* Footer */
.site-footer{ border-top:1px solid var(--border); padding:22px 0; color:var(--muted); font-size:14px; }