/*
Theme Name: KOMPAK4D SEO 2026
Theme URI: https://kompak4d.co.uk/
Author: KOMPAK4D
Description: Lightweight, responsive and SEO-friendly classic WordPress theme for KOMPAK4D.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: kompak4d
*/

:root{
  --bg:#090909;
  --panel:#111111;
  --panel-2:#171717;
  --gold:#e2b007;
  --gold-light:#ffd95a;
  --text:#f4f4f4;
  --muted:#bdbdbd;
  --border:rgba(226,176,7,.25);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.7;
}
img{max-width:100%;height:auto}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
.site-wrap{min-height:100vh}
.container{width:min(100% - 32px,var(--max));margin-inline:auto}
.site-header{
  background:#050505;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(8px);
}
.header-inner{
  min-height:76px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;
}
.brand img{display:block;width:auto;max-width:220px;max-height:58px}
.primary-menu{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.primary-menu li{margin:0}
.primary-menu a{
  display:block;padding:10px 14px;color:#fff;font-weight:700;
  border-radius:7px;font-size:14px
}
.primary-menu a:hover{background:#1b1b1b;color:var(--gold);text-decoration:none}
.hero{
  padding:42px 0 30px;
  background:radial-gradient(circle at top right,rgba(226,176,7,.12),transparent 40%);
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:32px;align-items:center
}
.banner-wrap{
  border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:#000;box-shadow:0 12px 40px rgba(0,0,0,.35)
}
.banner-wrap img{display:block;width:100%;height:auto}
.hero-content h1{
  margin:0 0 15px;color:var(--gold-light);font-size:clamp(28px,3vw,42px);
  line-height:1.2
}
.hero-content p{color:var(--muted);margin:0 0 22px;font-size:16px}
.button-row{display:flex;flex-wrap:wrap;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:11px 20px;border-radius:7px;
  border:1px solid var(--gold);font-weight:700;font-size:14px;
  transition:.2s ease
}
.btn-primary{background:var(--gold);color:#090909}
.btn-secondary{background:#171717;color:#fff}
.btn:hover{transform:translateY(-1px);text-decoration:none;filter:brightness(1.08)}
.section{padding:28px 0}
.section-title{
  color:var(--gold-light);font-size:25px;margin:0 0 18px;
  line-height:1.3
}
.card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:12px;padding:22px
}
.spec-table{width:100%;border-collapse:collapse}
.spec-table th,.spec-table td{
  padding:13px 15px;border:1px solid #292929;text-align:left;vertical-align:top
}
.spec-table th{width:32%;color:var(--gold-light);background:#151515}
.spec-table td{color:#ddd;background:#0e0e0e}
.content-grid{display:grid;grid-template-columns:1fr;gap:22px}
.faq-list{display:grid;gap:12px}
.faq-item{
  background:var(--panel);border:1px solid var(--border);
  border-radius:10px;overflow:hidden
}
.faq-item summary{
  cursor:pointer;padding:17px 20px;color:var(--gold-light);
  font-weight:700;list-style:none
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{padding:0 20px 18px;margin:0;color:#ccc}
.site-footer{
  margin-top:30px;padding:38px 0 100px;background:#050505;
  border-top:1px solid var(--border)
}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.footer-title{color:var(--gold-light);font-size:18px;margin:0 0 12px}
.footer-text{color:#aaa;font-size:14px}
.footer-keywords{margin-top:28px;padding-top:22px;border-top:1px solid #222}
.footer-keywords h3{margin-top:0}
.keyword-links{display:flex;flex-wrap:wrap;gap:7px 10px;font-size:13px}
.keyword-links a{color:var(--gold);text-decoration:none}
.keyword-links a:hover{text-decoration:underline}
.copyright{
  margin-top:28px;padding-top:18px;border-top:1px solid #222;
  color:#777;font-size:13px;text-align:center
}
.mobile-sticky{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:2000;
  background:rgba(5,5,5,.97);border-top:1px solid var(--border);
  padding:8px 7px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px rgba(0,0,0,.35)
}
.mobile-sticky-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sticky-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:58px;color:#fff;font-size:10px;font-weight:700;border-radius:7px;
  background:#151515;border:1px solid #292929;text-decoration:none
}
.sticky-btn img{width:22px;height:22px;object-fit:contain;margin-bottom:3px}
.sticky-btn:hover{color:var(--gold);text-decoration:none}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:10px;top:10px;z-index:9999;background:#fff;color:#000;padding:10px}
@media(max-width:800px){
  .header-inner{min-height:66px}
  .brand img{max-width:165px;max-height:48px}
  .primary-menu{gap:0}
  .primary-menu a{padding:8px 7px;font-size:12px}
  .hero{padding-top:25px}
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .banner-wrap{max-width:100%;margin:auto}
  .hero-content{text-align:center}
  .hero-content h1{font-size:27px}
  .button-row{justify-content:center}
  .card{padding:16px}
  .spec-table th,.spec-table td{padding:10px 9px;font-size:13px}
  .footer-grid{grid-template-columns:1fr}
  .mobile-sticky{display:block}
}
@media(max-width:520px){
  .container{width:min(100% - 20px,var(--max))}
  .primary-menu{display:none}
  .header-inner{justify-content:center}
  .brand img{max-width:190px}
  .hero-content h1{font-size:24px}
  .hero-content p{font-size:14px}
  .btn{width:100%}
  .button-row{display:grid;grid-template-columns:1fr;gap:8px}
  .spec-table{font-size:12px}
  .spec-table th{width:38%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}