/* =============== DESIGN TOKENS =============== */
:root{
  --bg: #0b1220;
  --surface: #0f172a;
  --card: #0c1426;
  --ink: #e7eefc;
  --muted: #9fb0cf;
  --line: #20304e;
  --brand: #5b9dff;
  --brand-2: #22d3ee;
  --ok: #34d399;
  --warn:#f59e0b;
  --bad:#ef4444;
  --radius:16px;
  --shadow: 0 10px 28px rgba(0,0,0,.22);
  --ring: 0 0 0 3px rgba(91,157,255,.35);
  --maxw: 1200px;
  --space: clamp(14px, 1.2vw, 18px);
  --fs-hero: clamp(28px, 5vw, 44px);
  --fs-h2: clamp(20px, 2.6vw, 28px);
  --fs: clamp(14px, 1.4vw, 16px);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9ff; --surface:#f1f5ff; --card:#ffffff; --ink:#0b1b38; --muted:#5b708f;
    --line:#e5ecfb; --brand:#1a73e8; --brand-2:#00c6ff;
    --shadow: 0 6px 22px rgba(10,40,120,.08);
    --ring: 0 0 0 3px rgba(26,115,232,.25);
  }
}
:root[data-theme="light"]{
  --bg:#f7f9ff; --surface:#f1f5ff; --card:#ffffff; --ink:#0b1b38; --muted:#5b708f;
  --line:#e5ecfb; --brand:#1a73e8; --brand-2:#00c6ff;
  --shadow: 0 6px 22px rgba(10,40,120,.08);
  --ring: 0 0 0 3px rgba(26,115,232,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 75% -180px, color-mix(in srgb, var(--brand-2) 20%, transparent), transparent 60%),
    var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: var(--fs);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{display:block;max-width:100%}
a{color: color-mix(in srgb, var(--brand) 80%, #004); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline: none; box-shadow: var(--ring)}

/* =============== LAYOUT =============== */
.wrap{max-width: var(--maxw); margin: 0 auto; padding: 18px 16px}
header.nav{position:sticky; top:0; z-index: 1000;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width: var(--maxw); margin:0 auto; padding: 12px 16px; display:flex; gap:12px; align-items:center}
.brand{display:flex; align-items:center; gap:10px; font-weight: 800; color: var(--ink)}
.brand i{color: var(--brand-2)}
.links{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.links a, .links button{
  border:1px solid transparent; background:transparent; color:var(--ink);
  padding:8px 12px; border-radius: 12px; font-weight:700; cursor:pointer
}
.links a:hover, .links button:hover{background: color-mix(in srgb, var(--brand) 12%, transparent)}
.theme-toggle{display:inline-flex; gap:8px; align-items:center}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:var(--card);color:var(--ink);padding:8px 12px;border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow)}

.hero{padding: 30px 0; border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 40%, transparent));
}
h1{font-size: var(--fs-hero); line-height:1.2; margin: 0 0 8px 0}
h2{font-size: var(--fs-h2); margin: 18px 0 6px}
.muted{color: var(--muted)}

.grid{display:grid; gap: 16px}
.grid.cols-2{grid-template-columns: repeat(2,1fr)}
.grid.cols-3{grid-template-columns: repeat(3,1fr)}
.grid.cols-4{grid-template-columns: repeat(4,1fr)}
@media (max-width:1000px){.grid.cols-4{grid-template-columns: repeat(3,1fr)}}
@media (max-width:800px){.grid.cols-3,.grid.cols-4{grid-template-columns: repeat(2,1fr)}}
@media (max-width:560px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns: 1fr}}

/* =============== COMPONENTS =============== */
.card{background: var(--card); border:1px solid var(--line); border-radius: var(--radius); overflow: clip; box-shadow: 0 0 0 rgba(0,0,0,0); transition: transform .18s ease, box-shadow .18s ease}
.card:hover{transform: translateY(-2px); box-shadow: var(--shadow)}
.card .p{padding: 12px 14px}
.badge{position:absolute; top:10px; left:10px; background: color-mix(in srgb, var(--brand) 20%, transparent); color: color-mix(in srgb, var(--brand) 95%, white); padding:6px 10px; border-radius:999px; border:1px solid var(--line); font-size:12px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius: 12px; border:1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--ink); text-decoration:none; font-weight:800; cursor:pointer}
.btn:hover{filter: brightness(1.05)}
.btn-primary{background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; color: #fff}
.price{font-weight:800}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background: color-mix(in srgb, var(--surface) 50%, transparent); border-radius:999px; padding:6px 10px; color: var(--muted); font-weight:700}

figure.thumb{margin:0; position:relative; background: color-mix(in srgb, var(--surface) 45%, transparent)}
figure.thumb img{width:100%; aspect-ratio: 4/3; object-fit: contain; background:
  radial-gradient(200px 100px at 80% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent),
  linear-gradient(180deg, color-mix(in srgb, #000 6%, transparent), transparent 40%, color-mix(in srgb, #000 6%, transparent))}
.skeleton{background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06)); background-size:200% 100%; animation:shimmer 1.2s infinite}
@keyframes shimmer{to{background-position:-200% 0}}

.panel{background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 14px}
.kv{display:grid; grid-template-columns:1fr; gap: 10px}
.kv label{font-weight:700; color: color-mix(in srgb, var(--ink) 80%, #fff); font-size: 13px}
.kv input,.kv select,.kv textarea{padding:10px 12px; border-radius:10px; border:1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink)}
.kv input:focus,.kv select:focus,.kv textarea:focus{box-shadow: var(--ring)}

.toast{position:fixed; bottom:18px; right:18px; background: var(--card); border:1px solid var(--line); padding:10px 14px; border-radius: 12px; box-shadow: var(--shadow); display:none}

/* =============== UTILITIES =============== */
.reveal{opacity:0; transform: translateY(8px)}
.reveal.in{opacity:1; transform:none; transition: opacity .4s ease, transform .4s ease}
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px}
footer{border-top:1px solid var(--line); margin-top: 28px}
footer .wrap{color: var(--muted); font-size: 14px; text-align:center}

.backtop{position:fixed; right:18px; bottom:18px; z-index:900; display:none}
.backtop.show{display:inline-flex}

/* Contact strip + sticky call */
.top-contact{background: color-mix(in srgb, var(--surface) 85%, transparent); border-bottom:1px solid var(--line)}
.top-contact .wrap{display:flex;gap:16px;align-items:center;justify-content:space-between}
.top-contact a{color:var(--ink)}
.call-sticky{position:fixed; left:12px; right:12px; bottom:12px; display:none; z-index:950; justify-content:space-between; gap:8px}
@media (max-width: 720px){ .call-sticky{display:flex} }