:root{
  --bg:#000;           /* истинско черно за OLED */
  --bg-graphite:#0b0b0d;
  --text:#e9e9ea;
  --muted:#a7a7ad;
  --line:#1a1a1d;
  --accent:#d4ff00;    /* неон-зелено */
  --accent-2:#ffd500;  /* жълт акцент */
  --radius:18px;
  --container:clamp(320px, 90vw, 1440px); /* широк на големи екрани */
}

/* базови */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/1.6 "Inter","Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
.container{width:var(--container); margin-inline:auto;}

/* HERO full-bleed */
.hero{
  position:relative; overflow:hidden;
  min-height: min(92vh, 1200px); /* запълва 42" красиво */
  display:grid; place-items:center; padding: clamp(24px, 4vw, 72px) 0;
  background: radial-gradient(1200px 800px at 70% 30%, #0f1014 0%, #050506 70%, #000 100%);
}
.hero__content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap: clamp(12px, 2.2vw, 20px);
}
.brand{height: clamp(24px, 3vw, 42px); opacity:.85}
.hero h1{
  margin:0;
  font-weight:800;
  line-height:1.05;
  /* флуидна типография: от лаптоп до 4K телевизор */
  font-size: clamp(32px, 6vw, 96px);
  letter-spacing:-0.02em;
}
.hero .lead{color:var(--muted); font-size: clamp(16px, 1.6vw, 22px)}
.cta{display:flex; gap:16px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:12px 20px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--text)
}
.btn-primary{
  border-color: color-mix(in oklab, var(--accent), #fff 10%);
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent), #fff 6%) 0%, var(--accent) 100%);
  color:#061102; font-weight:700;
}
.btn-ghost:hover{border-color:#2a2a2f}

/* декоративен фон: статичен рендер + графитни ребра */
.hero__bg{
  position:absolute; inset:0; z-index:1;
  background:
    url("/assets/images/spiral.png") right 10% center / min(55vw,1100px) no-repeat,
    radial-gradient(1000px 700px at 85% 25%, #0c0d10 0%, transparent 60%) ,
    radial-gradient(900px 600px at 10% 80%, #0a0b0e 0%, transparent 55%);
  filter: saturate(1.05) contrast(1.05);
}
.edges{position:absolute; top:0; bottom:0; width:min(6vw, 120px); z-index:0; opacity:.35}
.edges--left{left:0; background:linear-gradient(90deg, #0a0a0c 0%, transparent 100%)}
.edges--right{right:0; background:linear-gradient(270deg, #0a0a0c 0%, transparent 100%)}

/* секции */
.section{padding: clamp(40px, 6vw, 96px) 0; background:linear-gradient(180deg, transparent, #000)}
.section--alt{background:linear-gradient(180deg, #050507, #09090c)}

/* cards grid: на 4K ще стават големи и четими */
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 28vw, 420px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.card{
  padding: clamp(16px, 2vw, 28px);
  border:1px solid var(--line); border-radius: var(--radius);
  background:linear-gradient(180deg, #0b0b0e, #070709);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.card h3{margin:0 0 8px; font-size: clamp(18px, 1.8vw, 28px)}
.card p{margin:0 0 12px; color:var(--muted)}
.link{color:var(--accent-2); font-weight:600}

/* benefits */
.benefits{display:grid; gap:24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}
.benefit{border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:#0a0a0c}
.benefit h4{margin:0 0 6px; font-size: clamp(16px, 1.4vw, 22px)}

/* footer */
.footer{border-top:1px solid var(--line); padding:24px 0; background:#050507}
.footer__inner{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer__nav a{color:var(--muted); margin-left:16px}
.footer__nav a:hover{color:var(--text)}

/* предпочитания за движение */
@media (prefers-reduced-motion: no-preference) {
  .hero__bg{transition:transform 600ms ease}
  .hero:hover .hero__bg{transform: translateY(-1%)}
}

/* много големи екрани (5K уолтопи/TV) */
@media (min-width: 1920px){
  .hero{min-height: 85vh}
  .hero__bg{background-size: min(50vw, 1300px), auto, auto}
}