:root{
  --bg:#0f1512;--card:#1a221f;--ink:#e8f2ee;--muted:#a8b6b1;--accent:#66f28f;--brand:#2fd36a;--ring:#3fe48755;
}
*{box-sizing:border-box} html,body{background:#0b0f0e url('../img/bg-crest.png') center center / cover fixed no-repeat;color:var(--ink)}
body{
  background:
    radial-gradient(140px 90px at 10% 15%, #1b1f1e 30%, transparent 10%) repeat,
    radial-gradient(200px 120px at 70% 0%, #151918 30%, transparent 10%) repeat,
    radial-gradient(160px 100px at 35% 85%, #141716 30%, transparent 10%) repeat,
    radial-gradient(220px 140px at 90% 60%, #101312 30%, transparent 10%) repeat,
    radial-gradient(240px 160px at 20% 60%, #171c1a 30%, transparent 10%) repeat,
  
}
a{color:var(--accent);text-decoration:none} img{display:block;max-width:100%;height:auto;border-radius:.6rem}
.container{width:min(1100px,92vw);margin-inline:auto}
.top-banner{background:linear-gradient(90deg,#13201a,#1a261f);border-bottom:1px solid #3a4c42;color:#d8d48a;font-weight:600;letter-spacing:.03em;text-align:center;font-size:.95rem}
.site-header{position:sticky;top:0;background:rgba(15,21,18,.9);backdrop-filter:blur(6px);border-bottom:1px solid #1f2824;z-index:20}
.site-header .container{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:72px;height:72px;border-radius:8px;object-fit:contain;background:#0f1512}
.brand-name{font-weight:900;letter-spacing:.02em;margin:0}
.nav{display:flex;gap:16px;flex-wrap:wrap}
.nav a{padding:6px 10px;border-radius:8px} .nav a:hover{background:var(--card)}
.lang-switch{display:flex;gap:8px;align-items:center} .lang-switch button{background:transparent;border:1px solid #27312c;color:var(--ink);padding:6px 10px;border-radius:8px;cursor:pointer} .lang-switch button.active{background:#1a221f}
.hero-clean{position:relative;overflow:hidden;border-bottom:1px solid #1f2824} .hero-clean .inner{min-height:60vh;display:grid;place-items:center;padding:40px 0} .hero-clean .content{text-align:center;max-width:820px;margin:0 auto;z-index:2;padding:0 4vw}
.hero-title{font-size:clamp(48px,7.5vw,96px);text-transform:uppercase;background:linear-gradient(180deg,#f4f0c5 0%,#d4c66a 45%,#9f8f2a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));margin:0}
.hero-sub{color:var(--muted);margin:.4rem 0 1rem}
.cta{display:inline-block;background:linear-gradient(90deg,var(--brand),var(--accent));color:#072610;padding:12px 18px;border-radius:12px;font-weight:800;box-shadow:0 0 0 4px var(--ring);transition:transform .06s ease} .cta:hover{transform:translateY(-1px)}
.cta.secondary{background:#0f1512;color:var(--ink);box-shadow:none;border:1px solid #27312c}
.hero-watermark{position:absolute;inset:0;background:url('assets/img/as_crest_large.png') center/520px no-repeat;opacity:.09;filter:saturate(.8)}
.section{padding:36px 0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);border:1px solid #27312c;border-radius:12px;padding:14px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery-grid a{border:1px solid #27312c;border-radius:12px;overflow:hidden;display:block} .gallery-grid img{aspect-ratio:1/1;object-fit:cover;display:block}
.site-footer{padding:26px 0;color:var(--muted);border-top:1px solid #1f2824;margin-top:24px}
.landing-hero{padding:34px 0 10px;border-bottom:1px solid #1f2824} .landing-hero .container{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center} .landing-hero h1{font-size:2.6rem;margin:.2rem 0}
.badge{display:none} /* removed small Phantom Green badge as requested */
.socials{display:flex;gap:12px;margin-top:8px}
.form-wrap{padding:18px 0} form{background:var(--card);border:1px solid #27312c;border-radius:14px;padding:16px;display:grid;gap:12px} label{font-weight:600} input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #27312c;background:#121a16;color:var(--ink)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .disclaimer{color:var(--muted);font-size:.9rem}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)} .gallery-grid{grid-template-columns:repeat(2,1fr)} .landing-hero .container{grid-template-columns:1fr} .row{grid-template-columns:1fr}}
@media(max-width:700px){.sticky-buy{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(180deg,#13201a,#0d1411);border-top:1px solid #27312c;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;z-index:999} .sticky-buy .price{font-weight:800}}

/* v4c-square */
.gallery-grid img{aspect-ratio:1/1;object-fit:cover}


/* bg-overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  background:radial-gradient(circle at 50% 40%, rgba(0,0,0,.08), rgba(0,0,0,.42) 70%);
  pointer-events:none; z-index:-1;
}

/* bg-fallback */
@supports not (background-attachment: fixed){
  body{ background-attachment: scroll; }
}

/* bg-overlay (v4i) */
body::before{
  content:"";
  position:fixed; inset:0;
  background:radial-gradient(circle at 50% 40%, rgba(0,0,0,.06), rgba(0,0,0,.42) 70%);
  pointer-events:none; z-index:-1;
}

/* =========================================================
   OVERRIDES (final, strong)
   =======================================================*/

/* 1) Usuń pasek/przycisk „Bestill nå – 550 kr” w każdym widoku */
.sticky-buy,
#sticky-buy,
[class^="sticky-buy"],
[class*=" sticky-buy"],
[class*="sticky"][class*="buy"]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
}

/* …i dodatkowo powtórka w tym samym media query, które wcześniej wymuszało display:flex */
@media (max-width:700px){
  .sticky-buy,
  #sticky-buy,
  [class^="sticky-buy"],
  [class*=" sticky-buy"],
  [class*="sticky"][class*="buy"]{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    opacity:0 !important;
  }
}

/* 2) Spesifikasjon — usuń kwadraty/ramki/tła, zostaw sam tekst */

/* Najpierw wyszoruj tło/ramki samej sekcji (obsługa wielu możliwych nazw) */
#spesifikasjon,
.spesifikasjon,
.specifikasjon,
.specs,
.spec-section,
.section[data-section="spesifikasjon"],
section[id*="spes"],
section[class*="spes"]{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Usuń boksowanie wewnątrz sekcji (karty, kafelki, linki z ramką itd.) */
#spesifikasjon *,
.spesifikasjon *,
.specifikasjon *,
.specs *,
.spec-section *,
.section[data-section="spesifikasjon"] *,
section[id*="spes"] *,
section[class*="spes"] *{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Jeśli spec używa globalnej .card/.cards – zgaś to TYLKO w obrębie tej sekcji */
#spesifikasjon .card,
.spesifikasjon .card,
.specifikasjon .card,
.specs .card,
.spec-section .card,
.section[data-section="spesifikasjon"] .card,
section[id*="spes"] .card,
section[class*="spes"] .card,
#spesifikasjon [class*="card"],
.spesifikasjon [class*="card"],
.specifikasjon [class*="card"],
.specs [class*="card"],
.spec-section [class*="card"],
.section[data-section="spesifikasjon"] [class*="card"],
section[id*="spes"] [class*="card"],
section[class*="spes"] [class*="card"]{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}

/* Częsty przypadek: ramki na linkach/kaflach (np. .gallery-grid a) – usuń je tylko w spec */
#spesifikasjon .gallery-grid a,
.spesifikasjon .gallery-grid a,
.specifikasjon .gallery-grid a,
.specs .gallery-grid a,
.spec-section .gallery-grid a,
.section[data-section="spesifikasjon"] .gallery-grid a,
section[id*="spes"] .gallery-grid a,
section[class*="spes"] .gallery-grid a{
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
}

/* Delikatna typografia jak w „Produkt” */
#spesifikasjon p,
.spesifikasjon p,
.specifikasjon p,
.specs p,
.spec-section p,
.section[data-section="spesifikasjon"] p,
section[id*="spes"] p,
section[class*="spes"] p{
  margin:.4rem 0 !important;
  line-height:1.55 !important;
  /* === FIX 1: kafelki w "Specyfikacja" => zwykły tekst === */
/* Jeżeli sekcja używa .cards + .card (jak na screenie), to je "spłaszczamy" globalnie */
.cards{
  display:block !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
}
.card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 0 12px 0 !important; /* odstęp między akapitami */
}
/* typografia, żeby było jak w "Produkt" */
.card h3, .card h4, .card strong{ margin:0 0 .35rem 0 !important; }
.card p{ margin:.4rem 0 !important; line-height:1.6 !important; }

/* === FIX 2: ukryj przycisk "Bestill nå – 550 kr" (lewy dół) === */
.sticky-buy,
#sticky-buy,
.bestill, .bestill-btn, .buy-now, .buy, .checkout,
a[href*="bestill"], a[href*="checkout"], a[href*="kasse"]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
  height:0 !important; margin:0 !important; padding:0 !important; opacity:0 !important;
}
/* na wszelki wypadek w typowym breakpoint */
@media (max-width:700px){
  .sticky-buy,
  #sticky-buy,
  .bestill, .bestill-btn, .buy-now, .buy,
  a[href*="bestill"], a[href*="checkout"], a[href*="kasse"]{
    display:none !important;
    visibility:hidden !important;
  }
}

}



/* === SPECIFIC OVERRIDES for Specyfikacja (plain text) === */
#specyfikacja .cards{
  display:block !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
}
#specyfikacja .card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 0 12px 0 !important;
}
#specyfikacja .card h3, 
#specyfikacja .card h4, 
#specyfikacja .card strong{ margin:0 0 .35rem 0 !important; }
#specyfikacja .card p{ margin:.4rem 0 !important; line-height:1.6 !important; }

/* Ensure any gallery-grid borders do not appear inside spec */
#specyfikacja .gallery-grid a{
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
}




/* 3) Czytelniejsze akapity i listy w środku */
#produkt p{ line-height:1.65; margin:.38rem 0; }
#produkt ul{ margin:.6rem 0; padding-left:1.2rem; }
#produkt li{ margin:.3rem 0; }
#produkt li::marker{ color: var(--accent); }

/* 4) Gdy przewijasz do #produkt, niech tytuł nie chowa się pod nagłówkiem */
#produkt{ scroll-margin-top: 90px; }
/* === Poprawka: tytuł "Produkt" nad kafelkiem === */

/* nadajemy kafelkowi tło tylko sekcji wewnątrz, nie całemu kontenerowi */
#produkt .container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* nowy "kafelek" tylko dla treści wewnątrz sekcji */
#produkt .content-box {
  background: rgba(20, 26, 23, 0.65);
  border: 1px solid #27312c;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
}

/* większy tytuł "Produkt" nad kafelkiem */
#produkt h3.section-title,
#produkt h3 {
  font-size: 1.6rem !important;
  margin-bottom: 14px !important;
}
/* === PRODUKT — ramka taka sama jak Spesifikasjon, tytuł nad nią === */

/* kontener sekcji — bez tła i cienia */
#produkt .container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ramka tylko wokół treści */
#produkt .content-box {
  background: rgba(20, 26, 23, 0.65);
  border: 1px solid #27312c;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
}

/* tytuł Produkt nad ramką */
#produkt h3.section-title,
#produkt h3 {
  font-size: 1.6rem !important;
  margin-bottom: 14px !important;
}
/* === PRODUCT: hard fix for stray background + green line === */

/* 1) Cały kontener sekcji bez tła/cienia/obrysów (także pseudo-elementy) */
#produkt .container,
#produkt .container::before,
#produkt .container::after{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* zachowaj trochę bocznego oddechu, ale bez tła */
#produkt .container{ padding: 0 12px !important; }

/* 2) Tytuł nad boxem, bez żadnych ramek/pasków */
#produkt h3,
#produkt h3.section-title{
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 3) Jedyny element z ramką — sama treść */
#produkt .content-box{
  display: block;
  margin: 0 auto 18px auto;              /* wyśrodkuj i daj odstęp na dole */
  background: rgba(20,26,23,.65) !important;
  border: 1px solid #27312c !important;   /* ciemna, nie zielona */
  border-radius: 14px !important;
  padding: 18px 22px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(6px);
  outline: none !important;
}
/* wyłącz ewentualne pseudo-elementy, które mogły rysować pasek */
#produkt .content-box::before,
#produkt .content-box::after{ content: none !important; }

/* 4) Prewencyjnie wyłącz „paski” z klas zawierających bar/line w tej sekcji */
#produkt [class*="bar"],
#produkt [class*="line"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 5) Listy – zwykłe punkty, bez artefaktów (zielone są tylko same kropki) */
#produkt .content-box ul{ list-style: disc outside; margin:.6rem 0; padding-left:1.2rem; }
#produkt .content-box li{ margin:.3rem 0; }
#produkt .content-box li::marker{ color: var(--accent); }

/* 6) Na wszelki wypadek: zero obrysu na górnej krawędzi boxa */
#produkt .content-box { border-top-color: #27312c !important; }
/* === PRODUCT – ostateczny reset pod tytułem, ramka tylko na .content-box === */

/* 1) Wyzeruj tło/ramki/wszelkie pseudo-elementy w obrębie #produkt */
#produkt .container,
#produkt .container::before,
#produkt .container::after,
#produkt h3,
#produkt h3::before,
#produkt h3::after{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

/* 2) Usuń tło/ramki ze WSZYSTKICH bezpośrednich dzieci kontenera
      poza .content-box i samym nagłówkiem */
#produkt .container > *:not(.content-box):not(h1):not(h2):not(h3){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
#produkt .container > *:not(.content-box):not(h1):not(h2):not(h3)::before,
#produkt .container > *:not(.content-box):not(h1):not(h2):not(h3)::after{
  content: none !important;
}

/* 3) Schowaj ewentualne „kreski”/dzielniki, które mogą robić cienką linię */
#produkt .container > hr,
#produkt .container > .divider,
#produkt .container > .line,
#produkt .container > [class*="divider"],
#produkt .container > [class*="line"]{
  display: none !important;
}

/* 4) Ustal poprawny odstęp tytułu od boxa z treścią */
#produkt h3,
#produkt h3.section-title{
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}

/* 5) JEDYNY box z ramką – sama treść */
#produkt .content-box{
  background: rgba(20,26,23,.65) !important;
  border: 1px solid #27312c !important; /* ciemna ramka, nie zielona */
  border-radius: 14px !important;
  padding: 18px 22px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(6px);
  outline: none !important;
  margin: 0 auto 18px auto !important;
}
/* brak pseudo-elementów na content-box */
#produkt .content-box::before,
#produkt .content-box::after{ content: none !important; }

/* 6) Typografia w treści */
#produkt .content-box p{ margin:.38rem 0 !important; line-height:1.65 !important; }
#produkt .content-box ul{ margin:.6rem 0 !important; padding-left:1.2rem !important; }
#produkt .content-box li{ margin:.3rem 0 !important; }
#produkt .content-box li::marker{ color: var(--accent); }

/* 7) Przewijanie do sekcji – tytuł nie chowa się pod nagłówkiem */
#produkt{ scroll-margin-top: 90px; }
/* Anchor/scroll fix: pokaż sam „Produkt”, bez nagłówka Spesifikasjon pod spodem */
#produkt{
  scroll-margin-top: 110px;   /* odsunięcie od sticky headera */
  padding-bottom: 400px;      /* bufor na dole, żeby nie było widać następnej sekcji */
}

/* Ten sam offset dla Spesifikasjon, gdy ją klikamy z menu */
#spesifikasjon{
  scroll-margin-top: 110px;
 

}
/* ...ostatni Twój fragment stylu... */

/* === Ikona gry (pad) === */
.nav-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  color:#2bd36b;
  background:rgba(43,211,107,.12);
  text-decoration:none;
  margin-left:8px;
}
.nav-icon:hover {
  background:rgba(43,211,107,.25);
}
/* === Poprawki mobilne i responsywne === */

/* Pasek nagłówka — responsywny i nierozjeżdżający się */
header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
header .brand {
  font-weight: 800;
}
nav.primary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
nav.primary a {
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 6px 10px;
  color: #e8eee9;
}

@media (max-width: 640px) {
  header {
    gap: 8px;
  }
  .nav-toggle {
    display: inline-block;
    margin-left: auto;
  }
  nav.primary {
    display: none;
    width: 100%;
  }
  nav.primary.open {
    display: flex;
  }
}

/* Gra — włącz obsługę dotyku i wyłącz scrollowanie */
canvas#game,
.game {
  touch-action: none;
}

/* Galeria — równe kafelki i podpisy wyśrodkowane */
.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
@media(max-width:840px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}

.gallery-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 8px;
}
.gallery-item .thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
}
.gallery-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-item .cap {
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: .5px;
}
/* 1) Schowaj ten zbędny górny pasek (to jest nav poza headerem) */
body > nav { display: none !important; }

/* 2) Pasek nawigacji – responsywnie, bez rozjeżdżania */
header, header * { box-sizing: border-box; }
header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
header .brand { font-weight: 800; display:flex; align-items:center; gap:10px; }
header nav { display: flex; gap: 12px; flex-wrap: wrap; }
header nav a { white-space: nowrap; text-decoration: none; }

/* Na wąskich ekranach pozwól menu łamać się w nowy wiersz
   i ułatw przewijanie poziome, zamiast ściskać layout */
@media (max-width: 640px){
  header { gap: 8px; }
  header nav { 
    width: 100%;
    overflow-x: auto;   /* przewijanie poziome, jeśli się nie mieści */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  header nav a { flex: 0 0 auto; }
}

/* 3) Gra – dotyk bez scrollowania strony */
canvas#game, .game { touch-action: none; }

/* 4) Galeria – równe kafelki i podpisy wyśrodkowane */
.grid { display: grid; gap: 10px; grid-template-columns: repeat(3,1fr); }
@media (max-width: 840px){ .grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .grid { grid-template-columns: 1fr; } }

.gallery-item { 
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 8px;
}
.gallery-item .thumb { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; }
.gallery-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item .cap { min-height: 20px; display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:.5px; }
/* TELEFON PION: canvas i HUD niech mieszczą się bez scrolla */
@media (orientation: portrait) and (pointer: coarse) {
  .game-wrap, .game, #game-container { 
    width: 100vw; 
    max-width: 100vw; 
    margin: 0 auto;
    overflow: hidden;
  }
  canvas#game {
    width: 100vw;          /* zawsze na szerokość ekranu */
    height: auto;          /* wysokość proporcjonalnie */
    max-height: 70vh;      /* niech zostanie miejsce na HUD */
    display: block;
    touch-action: none;    /* pewność: bez przewijania */
  }
  .hud, .scorebar, .controls { 
    padding: 6px 10px; 
    font-size: 14px; 
  }
}