/* ============================================================
   СКИНЫ = РАЗНЫЕ ДИЗАЙН-СИСТЕМЫ (не перекраска).
   Меняются: фон (свет/тёмный), форма (угол/скругление/брутал),
   типографика, отступы, тени — чтобы сайты не читались как клоны.
   ============================================================ */

/* ========== SKIN 1 — INDUSTRIAL (тёмный, угловатый, оранж) ========== */
body.skin-1{
  --graphite:#1a1c1f; --anthracite:#25282d; --steel:#34383f; --concrete:#3d4148;
  --orange:#fc5701; --orange-d:#e54c00; --text:#e8e9ec; --muted:#9aa0a8; --line:#3a3e45;
  --radius:0; --btn-radius:0;
  --btn-clip:polygon(0 0,100% 0,100% 75%,93% 100%,0 100%);
  --logo-clip:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
  --h-transform:uppercase; --h-weight:900; --h-spacing:.5px;
  --sec-pad:74px; --card-shadow:none;
}

/* ========== SKIN 2 — CORPORATE (СВЕТЛЫЙ, синий, скруглённый) ========== */
body.skin-2{
  --graphite:#eef2f7; --anthracite:#ffffff; --steel:#ffffff; --concrete:#f4f7fb;
  --orange:#2f6df6; --orange-d:#1f56d6; --text:#15233b; --muted:#5e7088; --line:#dce4ee;
  --radius:14px; --btn-radius:10px; --btn-clip:none; --logo-clip:none;
  --h-transform:none; --h-weight:800; --h-spacing:-.2px;
  --sec-pad:84px; --card-shadow:0 8px 26px rgba(20,45,90,.08);
  --font:"Segoe UI",system-ui,Roboto,Arial,sans-serif;
}
body.skin-2 header.site-header{background:rgba(255,255,255,.97);border-bottom:1px solid #e3e9f2}
body.skin-2 .hero{border-bottom:1px solid #e3e9f2}
body.skin-2 .hero-bg{background:linear-gradient(120deg,#e8f0ff 0%,#f7faff 60%,#ffffff 100%)}
body.skin-2 .hero h1{color:#11203a}
body.skin-2 .hero p,body.skin-2 .hero-meta span{color:#4a5b73}
body.skin-2 .grade:hover{background:#fff}
body.skin-2 footer.site-footer{background:#11203a;border-top:3px solid #2f6df6}
body.skin-2 footer .foot-grid h4{color:#fff}
body.skin-2 .seo-text-sec{background:#e9eef6}
body.skin-2 .seo-text{color:#5e7088}
body.skin-2 .cat-card-go,body.skin-2 .hdr-nav a{color:#5e7088}

/* ========== SKIN 3 — LANDING (тёмный, ЖЁЛТЫЙ, крупный, плоский) ========== */
body.skin-3{
  --graphite:#141310; --anthracite:#1c1a14; --steel:#23211a; --concrete:#2c2920;
  --orange:#ffc400; --orange-d:#e0a900; --text:#f5f2e8; --muted:#b3ab92; --line:#39342a;
  --radius:0; --btn-radius:0; --btn-clip:none; --logo-clip:none;
  --h-transform:uppercase; --h-weight:900; --h-spacing:-.8px;
  --sec-pad:64px; --card-shadow:none;
  --font:"Arial Black",Impact,system-ui,sans-serif;
}
body.skin-3 .hero h1{font-size:clamp(40px,6.4vw,78px)}
body.skin-3 .btn,body.skin-3 .grade .gbtn,body.skin-3 .gbtn{color:#141310}
body.skin-3 .btn.ghost{color:var(--orange)}
body.skin-3 .feat-strip,body.skin-3 .calc-result{color:#141310}
body.skin-3 .sec-head h2:after{height:8px}

/* ========== SKIN 4 — MINIMAL (СВЕТЛЫЙ, монохром+терракота, воздух, тонкий) ========== */
body.skin-4{
  --graphite:#ffffff; --anthracite:#faf9f7; --steel:#ffffff; --concrete:#f5f3f0;
  --orange:#c8643c; --orange-d:#ad522e; --text:#1c1a18; --muted:#8a8278; --line:#e8e4de;
  --radius:0; --btn-radius:0; --btn-clip:none; --logo-clip:none;
  --h-transform:none; --h-weight:600; --h-spacing:.2px;
  --sec-pad:108px; --card-shadow:none;
  --font:"Helvetica Neue",Arial,system-ui,sans-serif;
}
body.skin-4 header.site-header{background:rgba(255,255,255,.97);border-bottom:1px solid #ece8e2}
body.skin-4 .hero{border-bottom:1px solid #ece8e2}
body.skin-4 .hero-bg{background:#faf9f7}
body.skin-4 .hero h1{color:#1c1a18;font-weight:600}
body.skin-4 .hero p,body.skin-4 .hero-meta span{color:#8a8278}
body.skin-4 .hdr-nav a,body.skin-4 .cat-card-go{color:#8a8278}
body.skin-4 footer.site-footer{background:#faf9f7;border-top:1px solid #e8e4de}
body.skin-4 footer .foot-grid h4{color:#1c1a18}
body.skin-4 footer .foot-grid p,body.skin-4 footer .foot-grid a,body.skin-4 .foot-bottom{color:#8a8278}
body.skin-4 .seo-text-sec{background:#faf9f7}
body.skin-4 .seo-text{color:#8a8278}
body.skin-4 .sec-head h2:after{height:3px;width:48px}
body.skin-4 .grade:hover{background:#fff;transform:translateY(-3px)}

/* ========== SKIN 5 — ECO (СВЕТЛЫЙ песок, зелёный, СКРУГЛЁННЫЙ-мягкий) ========== */
body.skin-5{
  --graphite:#f3efe6; --anthracite:#ffffff; --steel:#ffffff; --concrete:#eef2e9;
  --orange:#3f9d57; --orange-d:#2f7d44; --text:#232a20; --muted:#6a7563; --line:#e2e1d2;
  --radius:22px; --btn-radius:40px; --btn-clip:none; --logo-clip:none;
  --h-transform:none; --h-weight:800; --h-spacing:-.3px;
  --sec-pad:88px; --card-shadow:0 10px 32px rgba(40,70,40,.09);
  --font:"Segoe UI",Verdana,system-ui,sans-serif;
}
body.skin-5 header.site-header{background:rgba(255,255,255,.97);border-bottom:1px solid #e6e6d8}
body.skin-5 .hero{border-bottom:none}
body.skin-5 .hero-bg{background:linear-gradient(120deg,#eef2e9 0%,#f3efe6 60%,#fbf8f1 100%)}
body.skin-5 .hero h1{color:#1d2a1c}
body.skin-5 .hero p,body.skin-5 .hero-meta span{color:#5d6b58}
body.skin-5 .hero .tag{border-radius:40px}
body.skin-5 .hdr-nav a,body.skin-5 .cat-card-go{color:#6a7563}
body.skin-5 footer.site-footer{background:#1c2a1e;border-top:3px solid #3f9d57}
body.skin-5 footer .foot-grid h4{color:#fff}
body.skin-5 .seo-text-sec{background:#eef2e9}
body.skin-5 .seo-text{color:#6a7563}
body.skin-5 .feat-strip > div,body.skin-5 .grade:hover{border-radius:0}
body.skin-5 .grade:hover{background:#fff;transform:translateY(-4px)}

/* ========== SKIN 6 — BOLD (тёмный, электрик, НЕО-БРУТАЛИЗМ) ========== */
body.skin-6{
  --graphite:#0e0f14; --anthracite:#15161d; --steel:#1c1e28; --concrete:#232633;
  --orange:#2b5bff; --orange-d:#1d45e0; --text:#f2f3f7; --muted:#9aa0b5; --line:#2b2f40;
  --radius:0; --btn-radius:0; --btn-clip:none; --logo-clip:none;
  --h-transform:uppercase; --h-weight:900; --h-spacing:-1px;
  --sec-pad:70px; --card-shadow:6px 6px 0 var(--orange);
}
body.skin-6 .hero h1{font-size:clamp(42px,7vw,86px)}
body.skin-6 .grade,body.skin-6 .panel,body.skin-6 .cat-card,body.skin-6 .tstat,
body.skin-6 .cert-card,body.skin-6 .review{border:3px solid var(--text)}
body.skin-6 .btn{border:3px solid var(--text);box-shadow:4px 4px 0 var(--text)}
body.skin-6 .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--text)}
body.skin-6 .grade:hover,body.skin-6 .cat-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--orange)}
body.skin-6 .sec-head h2:after{height:8px}