/* RETROBYTE – glavni stilovi */
:root {
  --bg:#101820; --bg-deep:#090f14; --panel:#17232c;
  --orange:#f36b21; --cream:#f2e9d8; --muted:#a6afb5; --green:#55c878;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--cream);font-family:"DM Sans",sans-serif}
a{color:inherit;text-decoration:none}
.site-header{height:84px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:rgba(9,15,20,.97);border-bottom:1px solid #ffffff18;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:13px}
.brand-mark{width:47px;height:43px}
.brand-name,.footer-brand{font-family:"Barlow Condensed",sans-serif;font-size:40px;font-weight:800;letter-spacing:-1px}
.brand-name span,.footer-brand span{color:var(--orange)}
.tagline{border-left:1px solid #68737a;padding-left:17px;margin-left:8px;font-size:13px;font-weight:700;line-height:1.45}
nav{display:flex;gap:32px}
nav a{font-size:14px;color:#d4d7d8;transition:.2s}
nav a:hover,nav a.active{color:var(--orange)}
.menu-toggle{display:none;background:none;color:var(--cream);border:0;font-size:25px;cursor:pointer}
.hero{min-height:560px;position:relative;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid #ffffff20}
.hero-image,.hero-shade{position:absolute;inset:0}
.hero-image{background-size:cover;background-position:center;transition:background-image .35s ease}
.hero-shade{background:linear-gradient(90deg,rgba(7,13,18,.98) 0%,rgba(7,13,18,.88) 37%,rgba(7,13,18,.35) 72%,rgba(7,13,18,.12)),linear-gradient(0deg,rgba(7,13,18,.55),transparent 55%)}
.hero-content{position:relative;z-index:2;max-width:650px;padding:65px 8%;animation:fadein .4s ease}
@keyframes fadein{from{opacity:.45;transform:translateY(8px)}to{opacity:1;transform:none}}
.issue-label{display:inline-block;border:1px solid #f2e9d899;border-radius:5px;padding:8px 12px;font-size:12px;font-weight:700;letter-spacing:1px;margin-bottom:20px}
.hero h1{font-family:"Barlow Condensed",sans-serif;font-size:clamp(76px,10vw,125px);line-height:.85;letter-spacing:-2px;margin-bottom:15px}
.hero h2{font-size:clamp(23px,3vw,34px);line-height:1.15;max-width:530px;margin-bottom:22px}
.accent-line{height:5px;width:70px;border-radius:5px;background:var(--orange);margin-bottom:20px}
.hero-content>p{max-width:390px;color:#d0d2d1;line-height:1.6;font-size:15px;margin-bottom:27px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.button{display:inline-flex;align-items:center;gap:9px;padding:13px 19px;border-radius:7px;font-size:14px;font-weight:700;transition:.2s}
.button.primary{background:var(--orange);border:1px solid var(--orange);color:white}
.button.primary:hover{background:#d95512;transform:translateY(-2px)}
.button.outline{border:1px solid var(--cream);background:#0004}
.button.outline:hover{background:var(--cream);color:var(--bg)}
.slider-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);height:44px;width:44px;border-radius:50%;border:1px solid #ffffff25;background:#14202acc;color:white;font-size:27px;cursor:pointer}
.slider-arrow:hover{background:var(--orange)}
.slider-arrow.prev{left:14px}.slider-arrow.next{right:14px}
.slider-dots{position:absolute;z-index:4;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:10px}
.dot{width:10px;height:10px;border:0;border-radius:50%;background:#778087;cursor:pointer}
.dot.active{background:var(--orange);transform:scale(1.2)}
.intro{text-align:center;padding:68px 8% 60px;background:#131e26}
.eyebrow{color:var(--orange);font-size:12px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:12px}
.intro h2,.section-heading h2{font-family:"Barlow Condensed",sans-serif;font-size:clamp(34px,4vw,45px);margin-bottom:15px}
.intro-copy{max-width:720px;margin:auto;color:var(--muted);font-size:15px;line-height:1.8}
.categories{padding:55px 7%;display:grid;grid-template-columns:repeat(4,1fr);background-color:#0e171e;background-image:linear-gradient(#506e8210 1px,transparent 1px),linear-gradient(90deg,#506e8210 1px,transparent 1px);background-size:35px 35px}
.category{text-align:center;padding:15px 23px;border-right:1px solid #f2e9d84a;transition:transform .2s}
.category:last-child{border:0}.category:hover{transform:translateY(-5px)}
.category-icon{font-size:37px;margin-bottom:14px;color:var(--cream)}
.category h3{font-size:16px;margin-bottom:9px}.category p{font-size:13px;line-height:1.6;color:var(--muted)}
.issues{padding:75px 8%;background:var(--bg)}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px}
.section-heading h2{margin:0}.section-heading>p{font-size:13px;color:var(--muted)}
.issue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.issue-card{overflow:hidden;background:var(--panel);border:1px solid #ffffff12;border-radius:10px;transition:.25s}
.issue-card:hover{transform:translateY(-5px);border-color:var(--orange)}
.issue-card img{width:100%;height:220px;display:block;object-fit:cover}
.issue-card-content{padding:23px}
.issue-card small{color:var(--orange);font-weight:800;letter-spacing:1px}
.issue-card h3{font-family:"Barlow Condensed",sans-serif;font-size:29px;margin:9px 0}
.issue-card p{font-size:14px;line-height:1.65;color:var(--muted);margin-bottom:19px}
footer{padding:38px 8%;background:var(--bg-deep);border-top:1px solid #ffffff18;display:flex;justify-content:space-between;align-items:center;gap:25px}
.footer-brand{font-size:30px}footer p,footer a{font-size:12px;line-height:1.8;color:var(--muted)}
.footer-meta{text-align:right}
@media(max-width:900px){.tagline{display:none}nav{gap:19px}.categories{grid-template-columns:repeat(2,1fr)}.category:nth-child(2){border-right:0}.category:nth-child(-n+2){border-bottom:1px solid #f2e9d833;padding-bottom:28px}.category:nth-child(n+3){padding-top:28px}}
@media(max-width:620px){
 .site-header{height:auto;min-height:72px;padding:13px 5%;flex-wrap:wrap}.brand-name{font-size:34px}.brand-mark{width:39px}
 .menu-toggle{display:block;margin-left:auto}
 nav{display:none;width:100%;padding:12px 0 4px;justify-content:space-between;gap:8px}
 nav.open{display:flex}nav a{font-size:12px}
 .hero{min-height:590px}.hero-content{padding:55px 9%}.hero h1{font-size:82px}.hero h2{font-size:25px}.hero-content>p{font-size:14px}
 .slider-arrow.prev{left:5px}.slider-arrow.next{right:5px}
 .categories{padding:35px 3%}.category{padding:15px 9px}.category h3{font-size:14px}.category p{font-size:12px}
 .issues{padding:50px 6%}.issue-grid{grid-template-columns:1fr}.section-heading{display:block}.section-heading>p{margin-top:8px}
 footer{align-items:flex-start;flex-direction:column}.footer-meta{text-align:left}
}