/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --bg:  #111827; --bg2: #1a2438; --bg3: #0d1320;
  --surface:  rgba(255,255,255,0.04);
  --surface2: rgba(255,255,255,0.07);
  --border:  rgba(232,234,240,0.08);
  --border2: rgba(232,234,240,0.14);
  --brand--red: #C0272D;
  --accent: #C0272D; --accent-hover: #8a1a1f;
  --accent-glow: rgba(192,39,45,0.22);
  --text:  #E8EAF0; --text2: #9da3b4; --text3: #4a5168;
  --font: 'Chakra Petch', sans-serif;
  /* ── Site Layout ────────────────────────── */
  --site--max-width: 1536px;
  --nav--max-width: calc(var(--site--max-width) - var(--site--inner-padding) * 2);
  /* ── Navbar ─────────────────────────────── */
  --nav--height: 80px;
  --nav--radius: 12px;
  --nav--bg: rgba(26, 36, 56, 0.97);
  --nav--border: var(--border2);
  --nav--gap: 32px;
  --nav--offset-top: 12px;
  /* ── Nav Links ──────────────────────────── */
  --nav--link-height: 48px;
  --nav--link-size: 15px;
  --nav--link-weight: 400;
  /* ── Inner Padding (navbar + content) ──── */
  --site--inner-padding: clamp(13px, 2vw, 25px);
  --nav--frame-padding: 25px;
  /* ── Section Spacing Scale ───────────────── */
  --section-space--none: 0;
  --section-space--small: clamp(24px, 4vw, 48px);
  --section-space--main: clamp(40px, 6vw, 80px);
  --section-space--large: clamp(56px, 8vw, 120px);
  --header--offset: calc(var(--nav--offset-top) * 2 + var(--nav--height));
  --header--gap: clamp(18px, 6vw, 84px);
  --section-space--hero: calc(var(--header--offset) + var(--header--gap));
  /* ── Button Padding ────────────────────── */
  --btn--padding: 14px 32px;
  --btn--padding-sm: 10px 20px;
  /* ── Grid System ────────────────────────── */
  --grid--columns: 12;
  --grid--gutter: var(--site--inner-padding);
  /* ── Background Hover States ───────────────── */
  --bg2-hover: #243050;
  --bg2-active: #2a3860;
  /* ── Blog Card ───────────────────────────── */
  --hero-blog--max-width: 280px;
  --card--title-size: 16px;
  --card--desc-size: 13px;
  --card--radius: var(--nav--radius);
  /* ── Pill Badge ─────────────────────────── */
  --pill--padding-y: 4px;
  --pill--padding-x: 12px;
  --pill--font-size: 12px;
  --pill--radius: 4px;
  --pill--letter-spacing: 0.5px;
  /* ── Carousel Dots ──────────────────────── */
  --dot--width: 24px;
  --dot--width-active: 32px;
  --dot--height: 3px;
  --dot--radius: 2px;
  --dot--offset: -24px;
  /* ── Hover Effects ──────────────────────── */
  --hover--lift: -2px;
  /* ── Spacing Scale ──────────────────────── */
  --space--xs: 4px;
  --space--sm: 8px;
  --space--md: 16px;
  --space--lg: 24px;
  --space--xl: 48px;
  --space--2xl: 80px;
}
html { scroll-behavior: smooth; }

body {
  background: linear-gradient(135deg, #111827 0%, #0d1320 50%, #111827 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── DATA-ATTRIBUTE SECTION SPACING ───────────────────── */
[data-padding-top="none"]  { padding-top: var(--section-space--none); }
[data-padding-top="small"] { padding-top: var(--section-space--small); }
[data-padding-top="main"]  { padding-top: var(--section-space--main); }
[data-padding-top="large"] { padding-top: var(--section-space--large); }
[data-padding-top="hero"]  { padding-top: var(--section-space--hero); }

[data-padding-bottom="none"]  { padding-bottom: var(--section-space--none); }
[data-padding-bottom="small"] { padding-bottom: var(--section-space--small); }
[data-padding-bottom="main"]  { padding-bottom: var(--section-space--main); }
[data-padding-bottom="large"] { padding-bottom: var(--section-space--large); }

/* ── SHARED CONTAINER (align with navbar) ─────────────── */
.u-container {
  max-width: var(--nav--max-width);
  margin: 0 auto;
  padding-left: var(--nav--frame-padding);
  padding-right: var(--nav--frame-padding);
}
@media (max-width: 1500px) {
  .u-container {
    padding-left: calc(var(--site--inner-padding) + var(--nav--frame-padding));
    padding-right: calc(var(--site--inner-padding) + var(--nav--frame-padding));
  }
}

/* ── HERO ACCENT ──────────────────────────────────────── */
.hero-accent { color: var(--brand--red); white-space: nowrap; }

/* ── GLOBAL CONTENT CONTAINER ─────────────────────────── */
.page-hero, .section-wrap, .cfg-hero, .cfg-wrap, .articles-wrap, .page-wrap {
  max-width: var(--site--max-width);
  margin-left: auto; margin-right: auto;
  padding-left: var(--site--inner-padding);
  padding-right: var(--site--inner-padding);
}

/* ── HEADER ─────────────────────────────────────────────── */
.site-header { position:fixed; top:0; left:0; right:0; z-index:100; background:transparent; backdrop-filter:none; border-bottom:none; max-width:var(--site--max-width); margin:0 auto; padding:var(--nav--offset-top) var(--site--inner-padding); }
.header-inner { position:relative; max-width:none; width:100%; margin:0; padding:0 var(--nav--frame-padding); height:var(--nav--height); display:flex; align-items:center; gap:var(--nav--gap); border:1px solid var(--border2); border-radius:var(--nav--radius); background:var(--nav--bg); }
.logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.hamburger { display:none; background:none; border:none; color:#E8EAF0; font-size:24px; cursor:pointer; padding:4px 8px; line-height:1; z-index:101; }
.header-inner nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; height:48px; align-items:center; }
.header-inner nav a { padding:6px 14px; border-radius:6px; text-decoration:none; color:var(--text2); font-size:var(--nav--link-size); font-weight:var(--nav--link-weight); transition:all .2s; height:var(--nav--link-height); display:inline-flex; align-items:center; line-height:37px; text-transform:uppercase; }
.header-inner nav a:hover { color:var(--text); background:var(--surface); }
.header-inner nav a.active { color:var(--text); }

/* ── HAMBURGER MENU ────────────────────────────────────── */
@media (max-width:1500px) {
  .header-inner { height:var(--nav--height); flex-wrap:nowrap; position:relative; padding:0 var(--nav--frame-padding); }
  .logo { flex:1; }
  .hamburger { display:block !important; }
  .header-inner nav:not(.open) { display:none !important; }
  .header-inner nav.open { display:flex !important; position:absolute; top:100%; left:0; right:0; flex-direction:column !important; background:var(--nav--bg); border:1px solid var(--border2); border-radius:var(--nav--radius); margin-top:8px; padding:8px 0; z-index:99; height:auto !important; }
  .header-inner nav.open a { display:block !important; height:auto !important; line-height:normal !important; padding:16px 24px; border-bottom:1px solid var(--border); text-align:left; margin:0; width:100%; }
  .header-inner nav.open a:last-child { border-bottom:none; }
}

/* ── TAGS (neon-glass) ─────────────────────────────────── */
.build-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.tag { display:inline-flex; align-items:center; padding:4px 12px; border-radius:0; clip-path:polygon(8px 0%,calc(100% - 0px) 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0px 100%,0% 100%,0% 8px); font-size:13px; font-weight:500; white-space:nowrap; font-family:'Chakra Petch',sans-serif; }
.tag-gry     { background:radial-gradient(ellipse 80% 60% at 50% 35%,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0) 100%),linear-gradient(180deg,#3D3DCE 0%,#2D2DB0 40%,#222290 100%); color:#E8EAF0; clip-path:polygon(8px 0%,100% 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0% 100%,0% 100%,0% 8px); filter:drop-shadow(0 0 6px rgba(60,60,255,0.6)) drop-shadow(0 0 20px rgba(45,45,176,0.4)) drop-shadow(0 4px 8px rgba(0,0,0,0.3)); text-shadow:0 0 8px rgba(80,80,255,0.5),0 0 20px rgba(60,60,255,0.3),0 1px 2px rgba(0,0,0,0.3); }
.tag-stream  { background:radial-gradient(ellipse 80% 60% at 50% 35%,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0) 100%),linear-gradient(180deg,#7B2FBE 0%,#6500C2 40%,#5800B0 100%); color:#E8EAF0; clip-path:polygon(8px 0%,100% 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0% 100%,0% 100%,0% 8px); filter:drop-shadow(0 0 6px rgba(140,60,255,0.6)) drop-shadow(0 0 20px rgba(101,0,194,0.4)) drop-shadow(0 4px 8px rgba(0,0,0,0.3)); text-shadow:0 0 8px rgba(200,160,255,0.5),0 0 20px rgba(140,60,255,0.3),0 1px 2px rgba(0,0,0,0.3); }
.tag-kreacja { background:radial-gradient(ellipse 80% 60% at 50% 35%,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0) 100%),linear-gradient(180deg,#CC8820 0%,#B06800 40%,#905500 100%); color:#E8EAF0; clip-path:polygon(8px 0%,100% 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0% 100%,0% 100%,0% 8px); filter:drop-shadow(0 0 6px rgba(200,140,30,0.6)) drop-shadow(0 0 20px rgba(176,104,0,0.4)) drop-shadow(0 4px 8px rgba(0,0,0,0.3)); text-shadow:0 0 8px rgba(220,160,40,0.5),0 0 20px rgba(200,140,30,0.3),0 1px 2px rgba(0,0,0,0.3); }
.tag-intel   { background:radial-gradient(ellipse 80% 60% at 50% 35%,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0) 100%),linear-gradient(180deg,#1088DD 0%,#0071C5 40%,#005CA0 100%); color:#E8EAF0; clip-path:polygon(8px 0%,100% 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0% 100%,0% 100%,0% 8px); filter:drop-shadow(0 0 6px rgba(0,130,230,0.6)) drop-shadow(0 0 20px rgba(0,113,197,0.4)) drop-shadow(0 4px 8px rgba(0,0,0,0.3)); text-shadow:0 0 8px rgba(40,150,240,0.5),0 0 20px rgba(0,130,230,0.3),0 1px 2px rgba(0,0,0,0.3); }
.tag-amd     { background:radial-gradient(ellipse 80% 60% at 50% 35%,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0) 100%),linear-gradient(180deg,#D03035 0%,#C0272D 40%,#A02025 100%); color:#E8EAF0; clip-path:polygon(8px 0%,100% 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0% 100%,0% 100%,0% 8px); filter:drop-shadow(0 0 6px rgba(220,50,55,0.6)) drop-shadow(0 0 20px rgba(192,39,45,0.4)) drop-shadow(0 4px 8px rgba(0,0,0,0.3)); text-shadow:0 0 8px rgba(240,70,75,0.5),0 0 20px rgba(220,50,55,0.3),0 1px 2px rgba(0,0,0,0.3); }
.tag-tier    { background:radial-gradient(ellipse 80% 60% at 50% 35%,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0) 100%),linear-gradient(180deg,#555555 0%,#4A4A4A 40%,#3A3A3A 100%); color:#E8EAF0; clip-path:polygon(8px 0%,100% 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0% 100%,0% 100%,0% 8px); filter:drop-shadow(0 0 4px rgba(120,120,120,0.3)) drop-shadow(0 0 12px rgba(80,80,80,0.2)) drop-shadow(0 4px 8px rgba(0,0,0,0.3)); text-shadow:0 0 6px rgba(150,150,150,0.3),0 1px 2px rgba(0,0,0,0.3); }

/* ── BUILD CARDS ───────────────────────────────────────── */
.builds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.build-card {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 24px;
  display: flex; flex-direction: column;
  gap: 16px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: default;
}
.build-card:hover {
  border-color: rgba(192,39,45,0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.build-card .card-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
}
.build-card .card-price-block { text-align: right; }
.build-card .card-price {
  font-size: 22px; font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: -0.5px;
}
.build-card .card-price-label {
  font-size: 11px; color: var(--text3); font-weight: 500;
  margin-top: 2px;
}

.build-card .card-name {
  font-size: 17px; font-weight: 700;
  color: var(--text); line-height: 1.3;
}

.build-card .card-components {
  display: flex; flex-direction: column; gap: 6px;
}
.build-card .card-component {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px;
}
.build-card .comp-icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; opacity: 0.8; }
.build-card .comp-label {
  color: var(--text3); font-size: 11px;
  font-weight: 600; white-space: nowrap; min-width: 28px;
}
.build-card .comp-name { color: var(--text2); line-height: 1.4; }

.gaming-note {
  background: rgba(192,39,45,0.07);
  border: 1px solid rgba(192,39,45,0.15);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px; color: #c88; line-height: 1.5;
}
.gaming-note::before { content: "🎮 "; }

.build-card .card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-hover);
  color: var(--text) !important;
  text-decoration: none;
  font-size: 13px; font-weight: 700;
  padding: var(--btn--padding-sm);
  border-radius: 0;
  clip-path: polygon(8px 0%,calc(100% - 8px) 0%,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0% calc(100% - 8px),0% 8px);
  margin-top: auto;
  align-self: flex-start;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 12px var(--accent-glow);
}
.build-card .card-cta:hover {
  background: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(192,39,45,0.4);
}

.error-msg {
  grid-column: 1 / -1;
  text-align: center; padding: 48px;
  color: var(--text3); font-size: 15px;
}

/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer { position: relative; z-index: 1; background: var(--surface); border-top: 1px solid var(--border); padding: 40px clamp(16px, 4vw, 48px); text-align: center; font-size: 13px; color: var(--text3); }
.footer-links { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.footer-links a { color: var(--text3); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--text2); }

/* ── COOKIE BANNER ─────────────────────────────────────── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:rgba(17,24,39,0.97);border-top:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(10px);padding:20px clamp(16px,4vw,48px);}
.cookie-banner-content{max-width:900px;margin:0 auto;}
.cookie-banner-content p{font-size:13px;color:#9da3b4;margin-bottom:8px;}
.cookie-banner-content p strong{color:#E8EAF0;}
.cookie-banner-content ul{font-size:13px;color:#9da3b4;margin:4px 0 8px 20px;}
.cookie-banner-content li{margin-bottom:3px;}
.cookie-banner-content a{color:#C0272D;text-decoration:none;}
.cookie-banner-content a:hover{text-decoration:underline;}
.cookie-banner-buttons{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.cookie-btn{padding:9px 22px;border-radius:0;clip-path:polygon(8px 0%,calc(100% - 8px) 0%,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0% calc(100% - 8px),0% 8px);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background 0.15s,color 0.15s;}
.cookie-btn-accept{background:#8a1a1f;color:#E8EAF0;border:none;}
.cookie-btn-accept:hover{background:#C0272D;}
.cookie-btn-reject{background:rgba(255,255,255,0.06);color:#9da3b4;border:1px solid rgba(255,255,255,0.15);}
.cookie-btn-reject:hover{background:rgba(255,255,255,0.10);color:#E8EAF0;}
@media(max-width:480px){.cookie-banner-buttons{flex-direction:column;}.cookie-btn{width:100%;}}

/* ── 12-COLUMN GRID SYSTEM ─────────────────────────────── */
.u-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid--columns), 1fr);
  gap: var(--grid--gutter);
}
.u-col-1  { grid-column: span 1; }
.u-col-2  { grid-column: span 2; }
.u-col-3  { grid-column: span 3; }
.u-col-4  { grid-column: span 4; }
.u-col-5  { grid-column: span 5; }
.u-col-6  { grid-column: span 6; }
.u-col-7  { grid-column: span 7; }
.u-col-8  { grid-column: span 8; }
.u-col-9  { grid-column: span 9; }
.u-col-10 { grid-column: span 10; }
.u-col-11 { grid-column: span 11; }
.u-col-12 { grid-column: span 12; }
.u-start-1  { grid-column-start: 1; }
.u-start-2  { grid-column-start: 2; }
.u-start-3  { grid-column-start: 3; }
.u-start-4  { grid-column-start: 4; }
.u-start-5  { grid-column-start: 5; }
.u-start-6  { grid-column-start: 6; }
.u-start-7  { grid-column-start: 7; }
.u-start-8  { grid-column-start: 8; }
.u-start-9  { grid-column-start: 9; }
.u-start-10 { grid-column-start: 10; }
.u-start-11 { grid-column-start: 11; }
.u-start-12 { grid-column-start: 12; }
.u-col-full { grid-column: 1 / -1; }
@media (max-width: 768px) {
  .u-col-1, .u-col-2, .u-col-3, .u-col-4,
  .u-col-5, .u-col-6, .u-col-7, .u-col-8,
  .u-col-9, .u-col-10, .u-col-11 {
    grid-column: 1 / -1;
  }
}

/* ── RESPONSIVE (shared) ───────────────────────────────── */
@media (max-width: 600px) {
  .builds-grid { grid-template-columns: 1fr; }
  .build-card .card-price { font-size: 19px; }
}