/* ============================================================
   FlameCraft – landing page (projekt: _design/PROJEKT.md)
   ============================================================ */

/* ---------- Czcionki ----------
   Minecrafter ma tylko A–Z, a–z, 0–9 i spację – unicode-range sprawia, że każdy inny znak
   (interpunkcja) bierze się z Minecraftia. Polskie litery: JS (plWrap) zostawia literę
   bazową w Minecrafterze i dorysowuje znak diakrytyczny w CSS (.dia). */
@font-face{
  font-family:"Montserrat"; src:url("fonts/montserrat/montserrat-latin-ext-wght-normal.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Montserrat"; src:url("fonts/montserrat/montserrat-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Minecrafter"; src:url("fonts/minecrafter/Minecrafter.Reg.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0020, U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face{
  font-family:"Minecraftia"; src:url("fonts/minecraftia/Minecraftia-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --c-night:#07080d;
  --c-ink:#0d0c10;
  --c-ink-2:#15131a;
  --c-flame:#ff8a1f;
  --c-flame-hi:#ffb23f;
  --c-ember:#e85d0c;
  --c-gold:#ffc861;
  --c-text:#f3eee6;
  --c-muted:#b9b0a3;
  --c-steel:#dfe3ea;
  --c-line:rgba(255,138,31,.35);
  --panel:rgba(13,12,16,.78);
  --glow:0 0 24px rgba(255,138,31,.45);
  --btn-grad:linear-gradient(180deg,#ffb23f 0%,#ff8a1f 55%,#e86a12 100%);

  --f-display:"Minecrafter","Minecraftia",system-ui,sans-serif;
  --f-pl:"Minecraftia",system-ui,sans-serif;
  --f-ui:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --nav-h:76px;
  --wrap:1200px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* zgodność wsteczna (cookies.css i ew. stare fragmenty) */
  --ink:var(--c-text); --muted:var(--c-muted); --fire1:var(--c-flame-hi); --fire2:var(--c-flame); --gold:var(--c-gold);
  --font-ui:var(--f-ui); --font-head:var(--f-ui); --font-mono:var(--f-ui); --cursor:pointer;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--c-night)}
/* UWAGA: bez scroll-behavior:smooth – płynne przewijanie robi JS (hero snap, linki). */
body{
  margin:0; min-width:320px; overflow-x:hidden; overflow-x:clip;
  color:var(--c-text); background:var(--c-night);
  font-family:var(--f-ui); font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,canvas{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
ul{list-style:none; margin:0; padding:0}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
:focus-visible{outline:2px solid var(--c-flame-hi); outline-offset:3px; border-radius:4px}
section[tabindex="-1"]:focus{outline:none}
::selection{background:rgba(255,138,31,.45); color:#fff}

.skip-link{
  position:fixed; left:16px; top:-60px; z-index:100; padding:10px 16px; border-radius:6px;
  background:var(--c-flame); color:#2a1405; font-weight:700; transition:top .2s;
}
.skip-link:focus{top:12px}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; position:relative}

/* ---------- Typografia ---------- */
.display{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(28px,3.6vw,52px); line-height:1.08; color:var(--c-steel);
  text-shadow:0 3px 0 rgba(0,0,0,.55), 0 0 30px rgba(0,0,0,.6);
}
.display-md{font-size:clamp(22px,2.4vw,34px)}
.display-sm{font-size:clamp(17px,1.6vw,22px); letter-spacing:.04em}
/* Polskie znaki w Minecrafterze: litera bazowa + pikselowy znak diakrytyczny (JS: plWrap) */
.nw{white-space:nowrap}
.dia{position:relative; display:inline-block; line-height:1; --p:max(.11em,2.5px)}
.dia-b{-webkit-user-select:none; user-select:none}
/* Minecraftia rysuje znaki 0,62em nad linią bazową i ma wyższe litery (0,88em vs 0,79em) – zjazd w dół i skala do Minecraftera */
.mc-p{position:relative; top:.62em; font-size:.9em}
/* Znaki rysowane w pikselowym stylu Minecraftera (kreska .24em, wysokość liter .78em) */
.mcg{position:relative; display:inline-block; height:.78em; margin:0 .05em 0 .07em; vertical-align:baseline}
.mcg::before,.mcg::after{content:""; position:absolute; background:currentColor}
.mcg-ex{width:.24em}
.mcg-ex::before{left:0; top:0; width:100%; height:.46em}
.mcg-ex::after{left:0; bottom:0; width:100%; height:.24em}
.mcg-plus{width:.62em}
.mcg-plus::before{left:0; top:.27em; width:100%; height:.24em}
.mcg-plus::after{left:.19em; top:.08em; width:.24em; height:.62em}
.accent .mcg::before,.accent .mcg::after{background:var(--c-flame-hi)}
.dia::after{content:""; position:absolute; width:var(--p); height:var(--p); background:currentColor}
.dia-ac::after{left:46%; top:-.07em; box-shadow:var(--p) calc(var(--p) * -1) 0 currentColor}
.dia-dot::after{left:calc(50% - .07em); top:-.1em; width:.14em; height:.14em}
.dia-og::after{right:.16em; top:.72em; box-shadow:calc(var(--p) * -1) var(--p) 0 currentColor, 0 calc(var(--p) * 2) 0 currentColor}
.dia-st{margin-left:.05em}
.dia-st::after{left:-.08em; top:.36em; width:.4em; transform:rotate(-32deg)}
.accent .dia::after{background:var(--c-flame-hi)}

.accent{
  display:inline-block; color:var(--c-flame); text-shadow:none;
  background:linear-gradient(100deg,#ffc861 0%,#ff8a1f 28%,#ffb23f 42%,#fff0c8 50%,#ffb23f 58%,#ff8a1f 72%,#e85d0c 100%);
  background-size:260% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(255,138,31,.35));
  animation:accentShine 6s ease-in-out 1.2s infinite;
}
@keyframes accentShine{
  0%,55%{background-position:100% 0}
  85%,100%{background-position:0% 0}
}

.lead{max-width:720px; margin:18px auto 0; font-size:clamp(15px,1.25vw,17px); line-height:1.6; color:var(--c-text); opacity:.9}

/* Kicker: —◆ TEKST ◆— */
.kicker{
  display:flex; align-items:center; justify-content:center; gap:16px; margin:0 0 14px;
  font:600 clamp(11px,1vw,13px)/1.2 var(--f-ui); letter-spacing:.32em; text-transform:uppercase; color:var(--c-text);
}
.kicker span{margin-right:-.32em}
.kicker i{
  position:relative; flex:none; width:clamp(36px,7vw,92px); height:2px;
  background:linear-gradient(90deg,transparent,var(--c-flame));
  transform-origin:100% 50%;
}
.kicker i::after{
  content:""; position:absolute; right:-3px; top:50%; width:6px; height:6px; margin-top:-3px;
  background:var(--c-flame); transform:rotate(45deg); box-shadow:0 0 8px var(--c-flame);
}
.kicker i:last-child{background:linear-gradient(270deg,transparent,var(--c-flame)); transform-origin:0 50%}
.kicker i:last-child::after{right:auto; left:-3px}
.kicker-left{justify-content:flex-start}

/* Tytuł z liniami po bokach (info-bar) */
.title-lines{display:flex; align-items:center; justify-content:center; gap:22px; text-align:center}
.title-lines i{flex:none; width:clamp(30px,7vw,84px); height:2px; background:linear-gradient(90deg,transparent,var(--c-flame)); transform-origin:100% 50%}
.title-lines i:last-child{background:linear-gradient(270deg,transparent,var(--c-flame)); transform-origin:0 50%}

.sec-head{text-align:center; margin-bottom:clamp(36px,5vw,60px)}

/* ---------- Przyciski ---------- */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:56px; padding:0 32px; border-radius:5px;
  font:700 clamp(15px,1.2vw,17px)/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  transition:transform .3s var(--ease-out), box-shadow .3s, filter .3s;
}
.btn-primary{
  color:#2a1405; background:var(--btn-grad); border:1px solid #ffc861;
  box-shadow:var(--glow), 0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(140,50,0,.35);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 40px rgba(255,138,31,.75), 0 0 80px rgba(255,138,31,.25), 0 10px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(140,50,0,.35);
}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn .chev{flex:none; transition:transform .3s var(--ease-out)}
.btn:hover .chev{transform:translateX(4px)}
/* shine sweep */
.btn::after{
  content:""; position:absolute; z-index:-1; top:-30%; bottom:-30%; left:0; width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:translateX(-160%) skewX(-22deg); pointer-events:none;
}
.btn:hover::after,.btn:focus-visible::after{animation:sweep .8s var(--ease-out)}
.btn-auto-shine::after{animation:sweepAuto 5s ease-in-out 2.6s infinite}
@keyframes sweep{to{transform:translateX(380%) skewX(-22deg)}}
@keyframes sweepAuto{0%{transform:translateX(-160%) skewX(-22deg)} 18%,100%{transform:translateX(380%) skewX(-22deg)}}

.btn-outline{
  position:relative; display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 18px;
  border:1.5px solid var(--c-flame); border-radius:7px; background:rgba(13,12,16,.4);
  font:700 12px/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--c-text); white-space:nowrap;
  box-shadow:inset 0 0 14px rgba(255,138,31,.12), 0 0 14px rgba(255,138,31,.12);
  transition:background-color .25s, box-shadow .25s, transform .25s var(--ease-out);
}
.btn-outline:hover{background:rgba(255,138,31,.14); box-shadow:inset 0 0 18px rgba(255,138,31,.2), 0 0 22px rgba(255,138,31,.35); transform:translateY(-1px)}
.btn-outline svg{flex:none}
[aria-disabled="true"]{opacity:.55; pointer-events:none}

/* ---------- Rama z narożnymi klamrami ---------- */
.frame{
  position:relative; background:var(--panel); border:1px solid rgba(255,138,31,.26); border-radius:6px;
  box-shadow:0 14px 40px rgba(0,0,0,.45), inset 0 0 30px rgba(255,138,31,.04);
}
.frame::before{
  content:""; position:absolute; inset:-2px; border-radius:7px; pointer-events:none;
  --b:var(--c-flame); --l:15px; --t:2px;
  background:
    linear-gradient(var(--b),var(--b)) top left/var(--l) var(--t),
    linear-gradient(var(--b),var(--b)) top left/var(--t) var(--l),
    linear-gradient(var(--b),var(--b)) top right/var(--l) var(--t),
    linear-gradient(var(--b),var(--b)) top right/var(--t) var(--l),
    linear-gradient(var(--b),var(--b)) bottom left/var(--l) var(--t),
    linear-gradient(var(--b),var(--b)) bottom left/var(--t) var(--l),
    linear-gradient(var(--b),var(--b)) bottom right/var(--l) var(--t),
    linear-gradient(var(--b),var(--b)) bottom right/var(--t) var(--l);
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 3px rgba(255,138,31,.7));
  transition:filter .35s, opacity .35s;
}
.frame:hover::before{filter:drop-shadow(0 0 6px rgba(255,170,60,1)) drop-shadow(0 0 14px rgba(255,138,31,.8))}

/* Separator z płomieniem */
.divider{display:flex; align-items:center; justify-content:center; gap:14px}
.divider i{width:clamp(60px,9vw,120px); height:2px; background:linear-gradient(90deg,transparent,var(--c-flame))}
.divider i:last-child{background:linear-gradient(270deg,transparent,var(--c-flame))}
.divider img{width:30px; height:auto; filter:drop-shadow(0 0 10px rgba(255,138,31,.6))}

/* ============================================================
   NAWIGACJA
   ============================================================ */
.nav{
  position:fixed; z-index:40; top:0; left:0; right:0; height:var(--nav-h);
  transition:background-color .4s, box-shadow .4s, border-color .4s, -webkit-backdrop-filter .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled,.nav.open{
  background:rgba(9,9,14,.72); border-bottom-color:rgba(255,138,31,.16);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.nav-in{height:100%; max-width:1280px; margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:24px}
.brand{display:inline-flex; align-items:center; gap:10px; flex:none}
.brand img{width:30px; height:auto; filter:drop-shadow(0 0 8px rgba(255,138,31,.55))}
.brand-txt{font:800 19px/1 var(--f-ui); letter-spacing:.08em; color:var(--c-steel)}
.brand-flame{color:var(--c-flame)}
.nav-menu{flex:1; display:flex; justify-content:center}
.nav-links{display:flex; gap:clamp(20px,3.4vw,52px)}
.nav-links a{
  position:relative; display:block; padding:10px 2px;
  font:600 13px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; color:#e6e1d8;
  transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:-6px; right:-6px; bottom:-2px; height:2px; border-radius:2px;
  background:var(--c-flame); box-shadow:0 0 10px var(--c-flame);
  transform:scaleX(0); transition:transform .35s var(--ease-out);
}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:var(--c-flame)}
.nav-links a.active::after{transform:scaleX(1)}
/* Link ITEMSHOP (wyróżniony, z płomieniem) */
.nav-links a.nav-shop{display:flex; align-items:center; gap:7px; color:var(--c-flame-hi)}
.nav-links a.nav-shop img{width:13px; height:auto; flex:none; margin-top:-3px; filter:drop-shadow(0 0 6px rgba(255,138,31,.8)); transition:transform .35s var(--ease-out)}
.nav-links a.nav-shop:hover{color:#ffd88a}
.nav-links a.nav-shop:hover img{transform:translateY(-2px) scale(1.15)}
.nav-links a.nav-shop.active{color:var(--c-flame)}
.nav-cta-mobile{display:none}
.burger{display:none; width:44px; height:44px; margin-left:auto; border-radius:6px; position:relative; border:1px solid var(--c-line)}
.burger span{position:absolute; left:11px; right:11px; height:2px; border-radius:2px; background:var(--c-text); transition:transform .3s var(--ease-out), opacity .2s}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:28px}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; min-height:100vh; min-height:100svh; overflow:hidden; isolation:isolate; background:var(--c-night)}
.hero-media{position:absolute; inset:0; z-index:-3; overflow:hidden}
.hero-par{position:absolute; inset:-6% 0 -14%; will-change:transform}
.hero-bg{width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 40%; transform-origin:50% 45%}
.hero-shade{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,8,13,.78) 0%,rgba(7,8,13,.2) 16%,transparent 32%),
    linear-gradient(0deg,var(--c-night) 0%,rgba(7,8,13,.86) 16%,rgba(7,8,13,.35) 40%,transparent 60%),
    radial-gradient(ellipse 75% 65% at 50% 42%,transparent 50%,rgba(4,4,8,.6) 100%);
}
.embers{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}

.hero-inner{
  position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center;
  padding:calc(var(--nav-h) + 4px) 20px clamp(14px,2.4vh,26px);
}
.hero-main{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(10px,1.9vh,20px); width:100%; padding-bottom:clamp(10px,1.9vh,20px)}
.hero-logo-wrap{position:relative; will-change:transform,opacity}
.hero-logo{margin:0; position:relative}
.hero-logo img{
  width:clamp(200px, calc((100svh - 500px) * 1.62), 640px); max-width:86vw; height:auto;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.55));
}
.logo-glow{
  position:absolute; left:50%; top:30%; width:62%; aspect-ratio:1; z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle,rgba(255,150,40,.55) 0%,rgba(255,110,20,.22) 38%,transparent 68%);
  transform:translate(-50%,-50%); opacity:.85;
}
.hero-sub span{font:700 clamp(12px,1.25vw,17px)/1.2 var(--f-ui); letter-spacing:.3em; text-transform:uppercase; color:#ece6dc; text-shadow:0 2px 12px rgba(0,0,0,.8); margin-right:-.3em; white-space:nowrap}
.tagline{
  font:600 clamp(12px,1.3vw,18px)/1.3 var(--f-ui); letter-spacing:.32em; text-transform:uppercase; color:#ece6dc; text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.8); margin-right:-.32em;
}
.tagline .ch{display:inline-block; white-space:pre}
.tagline .dotsep{color:var(--c-flame)}
/* wypełnia przestrzeń między taglinem a kartami; padding-bottom .hero-main = gap, więc przycisk + status stoją dokładnie w środku */
.hero-actions{flex:1; min-height:clamp(130px,20vh,220px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px}
.hero-actions .btn{zoom:1.15}
.status{display:inline-flex; align-items:center; gap:10px; padding:8px 18px; border-radius:999px; background:rgba(8,8,12,.62); font:600 15.5px/1.2 var(--f-ui); letter-spacing:.04em; color:#d9d2c6; text-shadow:0 1px 6px #000}
.dot{width:9px; height:9px; border-radius:50%; background:#8a8172; flex:none; box-shadow:0 0 0 3px rgba(138,129,114,.18)}
.dot.on{background:#5fd13a; box-shadow:0 0 0 3px rgba(95,209,58,.2), 0 0 10px #5fd13a; animation:dotPulse 2s ease-in-out infinite}
.dot.off{background:#e0452b; box-shadow:0 0 0 3px rgba(224,69,43,.2)}
@keyframes dotPulse{50%{opacity:.55}}

/* Karty cech w hero */
.hero-cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,30px); width:100%; max-width:1060px}
.hcard-li{perspective:900px}
.hcard{
  height:100%; padding:clamp(16px,2.4vh,26px) 16px clamp(14px,2.2vh,24px); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:rgba(10,9,13,.8); transform-style:preserve-3d;
}
.hcard img{width:clamp(52px,7.4vh,78px); height:clamp(52px,7.4vh,78px); object-fit:contain; margin-bottom:6px; filter:drop-shadow(0 0 14px rgba(255,138,31,.25)); transform:translateZ(30px)}
.hcard h3{font:700 clamp(13px,1.15vw,16px)/1.25 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; color:#fff; transform:translateZ(20px)}
.hcard p{font-size:clamp(12.5px,1.05vw,14.5px); line-height:1.5; color:#d6cfc4; white-space:pre-line; transform:translateZ(12px)}
.hero-divider{margin-top:clamp(12px,2.6vh,30px)}

/* Tilt 3D + odblask */
.tilt{transition:transform .6s var(--ease-out), border-color .35s, box-shadow .35s; will-change:transform}
.tilt.is-tilting{transition:transform .12s linear, border-color .35s, box-shadow .35s}
.tilt:hover{border-color:rgba(255,138,31,.55); box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 30px rgba(255,138,31,.18), inset 0 0 30px rgba(255,138,31,.06)}
.glare{position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none}
.glare::after{
  content:""; position:absolute; left:-50%; top:-50%; width:100%; height:100%;
  background:radial-gradient(circle at center,rgba(255,180,90,.22) 0,rgba(255,180,90,.185) 5%,rgba(255,180,90,.125) 13%,rgba(255,180,90,.07) 22%,rgba(255,180,90,.03) 31%,rgba(255,180,90,.008) 37%,transparent 41%);
  transform:translate3d(var(--gx,50%),var(--gy,50%),0); opacity:0; transition:opacity .4s;
}
.tilt:hover .glare::after{opacity:1}

/* ============================================================
   SEKCJE
   ============================================================ */
.sec{position:relative; padding:clamp(64px,7vw,100px) 0}
.sec::before{ /* cienka linia oddzielająca pasy jak w referencji */
  content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,138,31,.35) 20%,rgba(255,138,31,.6) 50%,rgba(255,138,31,.35) 80%,transparent);
  box-shadow:0 0 10px rgba(255,138,31,.3);
}

/* ---------- Co oferujemy ---------- */
.offer{
  overflow:hidden; padding-top:clamp(90px,9vw,120px);
  background:radial-gradient(ellipse 60% 70% at 50% 30%,rgba(255,138,31,.07),transparent 70%),linear-gradient(180deg,var(--c-night),#0a0a10 50%,var(--c-night));
}
.offer::before{display:none}
.offer-side{
  position:absolute; top:0; height:100%; width:34vw; max-width:none; object-fit:cover; pointer-events:none; z-index:0; opacity:.95;
  will-change:transform;
}
.offer-side-l{
  left:0; object-position:left center;
  -webkit-mask-image:linear-gradient(90deg,#000 58%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,#000 58%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%);
          mask-composite:intersect;
}
.offer-side-r{
  right:0; object-position:right center;
  -webkit-mask-image:linear-gradient(270deg,#000 58%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(270deg,#000 58%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 80%,transparent 100%);
          mask-composite:intersect;
}
.offer .wrap{z-index:1; max-width:1100px}
.offer-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.6vw,40px)}
.offer-item{display:flex; flex-direction:column; align-items:center; text-align:center}
.oi-icon{
  position:relative; width:clamp(96px,8.4vw,116px); aspect-ratio:1.1; margin-bottom:18px;
  filter:drop-shadow(0 0 10px rgba(255,138,31,.55));
  transition:transform .45s var(--ease-out), filter .45s;
}
.oi-icon::before,.oi-icon::after{
  content:""; position:absolute; inset:0;
  clip-path:polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%);
}
.oi-icon::before{background:linear-gradient(180deg,#ffb23f,#e85d0c)}
.oi-icon::after{inset:2px; background:radial-gradient(circle at 50% 45%,#1c1712,#0c0b0f 70%)}
.oi-icon img{position:absolute; z-index:1; left:50%; top:50%; width:72%; height:72%; object-fit:contain; transform:translate(-50%,-50%)}
.offer-item:hover .oi-icon{transform:translateY(-6px) scale(1.04); filter:drop-shadow(0 0 18px rgba(255,138,31,.85))}
.offer-item h3{margin-bottom:10px; color:#fff; white-space:nowrap}
.offer-item p{flex:1; max-width:250px; font-size:14.5px; line-height:1.6; color:var(--c-muted)} /* flex:1 wyrównuje mini-line w rzędzie */
.mini-line{position:relative; width:100px; height:2px; margin-top:18px; background:linear-gradient(90deg,transparent,var(--c-flame),transparent)}
.mini-line::after{content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--c-flame); transform:rotate(45deg); box-shadow:0 0 8px var(--c-flame)}

/* ---------- Zostań częścią ---------- */
.join{
  overflow:hidden; min-height:clamp(440px,40vw,600px); display:flex; align-items:center;
  background:linear-gradient(90deg,var(--c-night) 0%,#0b0a10 40%,var(--c-night));
}
.join-scene{
  position:absolute; top:0; right:0; bottom:0; width:min(72%,1200px); z-index:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 20%,#000 40%),linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 20%,#000 40%),linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
          mask-composite:intersect;
}
.join-scene img{position:absolute; inset:-8% 0; width:100%; height:116%; max-width:none; object-fit:cover; object-position:60% 50%; will-change:transform}
.join-wrap{z-index:1; width:50%; max-width:none; margin:0; display:flex; justify-content:center} /* tekst wyśrodkowany na 25% szerokości strony */
.join-text{max-width:540px}
.join-title{margin:4px 0 22px; font-size:clamp(32px,3.6vw,52px); line-height:1.02}
.join-title .accent{font-size:1.22em; margin-top:.06em}
.join-desc{margin-left:-28px; margin-bottom:30px; font-size:clamp(15px,1.2vw,16.5px); line-height:1.7; color:#e6dfd4; text-shadow:0 1px 10px rgba(0,0,0,.9)}
#joinBtn{display:flex; width:fit-content; margin-left:auto; margin-right:auto; position:relative; left:-14px} /* środek osi opisu (opis ma margin-left:-28px) */

/* ---------- Informacje (info-bar) ---------- */
.info{overflow:hidden; padding:clamp(54px,5.6vw,76px) 0 clamp(54px,5.6vw,72px); background:linear-gradient(180deg,#0c0b11,var(--c-ink-2) 50%,#0c0b11)}
.info::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,138,31,.28),transparent)}
.info-edge{
  position:absolute; top:0; bottom:0; width:34%; z-index:0; pointer-events:none; opacity:.85;
  background:url("img/ref/info-bg.webp?v=2") no-repeat; background-size:auto 100%;
}
.info-edge-l{left:0; background-position:left center;
  -webkit-mask-image:linear-gradient(90deg,#000 50%,transparent 100%); mask-image:linear-gradient(90deg,#000 50%,transparent 100%)}
.info-edge-r{right:0; background-position:right center;
  -webkit-mask-image:linear-gradient(270deg,#000 50%,transparent 100%); mask-image:linear-gradient(270deg,#000 50%,transparent 100%)}
.info .wrap{z-index:1; max-width:1160px}
.info .title-lines{margin-bottom:clamp(30px,3.6vw,46px)}
.info-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr))}
.info-item{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 12px}
.info-item + .info-item::before{
  content:""; position:absolute; left:0; top:-6px; bottom:-6px; width:1px;
  background:linear-gradient(180deg,transparent,rgba(223,227,234,.22) 20%,rgba(223,227,234,.22) 80%,transparent);
}
.info-ico{width:44px; height:44px; margin-bottom:14px; color:var(--c-flame); filter:drop-shadow(0 0 8px rgba(255,138,31,.45))}
.info-ico svg{width:100%; height:100%}
.info-label{font:600 12px/1.3 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--c-muted); margin-bottom:6px}
.info-value{font:700 clamp(14px,1.2vw,16px)/1.3 var(--f-ui); letter-spacing:.08em; text-transform:uppercase; color:#fff}

/* ---------- Prezentacja (config.features) ---------- */
.showcase{background:linear-gradient(180deg,var(--c-night) 0,rgba(7,8,13,.74) 14%,rgba(7,8,13,.78) 100%),url("img/ref/bg-zycie.jpg?v=1") center/cover no-repeat fixed,var(--c-night)}
.showcase .wrap,.updates .wrap{max-width:1560px}
.show-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px)}
.fcard{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:0; overflow:hidden; height:100%}
.fcard-media{position:relative; min-height:236px; overflow:hidden; border-radius:5px 0 0 5px}
.fcard-media img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; transition:transform .8s var(--ease-out)}
.fcard-media.pixel img{image-rendering:pixelated}
.fcard:hover .fcard-media img{transform:scale(1.06)}
.fcard-media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 55%,rgba(10,9,13,.95)),linear-gradient(0deg,rgba(10,9,13,.5),transparent 40%)}
.fcard-tag{position:absolute; z-index:1; left:12px; top:12px; padding:4px 10px; border-radius:4px; background:rgba(10,9,13,.8); border:1px solid var(--c-line); font:700 12px/1.2 var(--f-ui); letter-spacing:.12em; color:var(--c-flame)}
.fcard-body{padding:24px 24px 24px 18px; display:flex; flex-direction:column; justify-content:center}
.fcard-body h3{display:flex; align-items:center; gap:10px; margin-bottom:12px; color:#fff}
.fcard-body h3 img{width:24px; height:24px; image-rendering:pixelated; flex:none}
.fcard-body ul{display:grid; gap:7px}
.fcard-body li{position:relative; padding-left:18px; font-size:14.5px; line-height:1.5; color:var(--c-muted)}
.fcard-body li::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; background:var(--c-flame); transform:rotate(45deg); box-shadow:0 0 6px var(--c-flame)}

/* ---------- Aktualizacje ---------- */
.updates{background:linear-gradient(180deg,rgba(7,8,13,.78) 0,rgba(7,8,13,.74) 100%),url("img/ref/bg-zycie.jpg?v=1") center/cover no-repeat fixed,var(--c-night)}
.updates-list{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(18px,2.2vw,28px); width:75%; max-width:1170px; margin:0 auto}
.upd{padding:34px 36px 30px; height:100%}
.upd.latest{border-color:rgba(255,138,31,.5); box-shadow:0 14px 40px rgba(0,0,0,.45), 0 0 34px rgba(255,138,31,.12)}
.upd-head{display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:14px}
.upd-ver{padding:6px 12px 5px; border-radius:4px; background:var(--btn-grad); color:#2a1405; font:800 16px/1 var(--f-ui); letter-spacing:.08em; box-shadow:0 0 14px rgba(255,138,31,.35)}
.upd-date{font:500 15.5px/1.2 var(--f-ui); color:var(--c-muted)}
.upd-badge{position:absolute; top:-12px; right:18px; background:var(--c-night); display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:4px; border:1px solid var(--c-flame); font:700 11px/1 var(--f-ui); letter-spacing:.14em; color:var(--c-flame)}
.upd-badge img{width:14px; height:14px; image-rendering:pixelated}
.upd-name{display:flex; align-items:center; gap:12px; margin-bottom:20px; font-size:clamp(22px,2vw,28px); color:#fff}
.upd-name img{width:32px; height:32px; image-rendering:pixelated; flex:none}
.upd-list{display:grid; gap:13px}
.upd-list li{display:flex; align-items:center; gap:16px; font-size:17.5px; line-height:1.5; color:#ddd5c9}
.chip{flex:none; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:128px; box-sizing:border-box; padding:4px 9px; border-radius:4px; font:700 12.5px/1.3 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; border:1px solid currentColor}
.chip img{width:14px; height:14px; image-rendering:pixelated}
.chip.add{color:#7fdc5a; background:rgba(95,209,58,.08)}
.chip.change{color:var(--c-flame-hi); background:rgba(255,178,63,.08)}
.chip.fix{color:#7fc4ff; background:rgba(127,196,255,.08)}

/* ---------- FAQ ---------- */
.faq{background:linear-gradient(180deg,rgba(7,8,13,.8) 0,rgba(7,8,13,.8) 86%,var(--c-night) 100%),url("img/ref/bg-faq.jpg?v=1") center/cover no-repeat fixed,var(--c-night)}
.faq .wrap{max-width:880px}
.faq-list{display:grid; gap:14px}
.faq-item{border-radius:6px}
.faq-q{
  width:100%; display:flex; align-items:center; gap:16px; padding:20px 22px; text-align:left;
  font:600 clamp(15px,1.25vw,17px)/1.4 var(--f-ui); color:#fff; border-radius:6px;
}
.faq-q:hover{color:var(--c-flame-hi)}
.faq-q > span{flex:1}
.faq-plus{position:relative; flex:none; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--c-line); transition:transform .45s var(--ease-out), border-color .3s, background-color .3s}
.faq-plus::before,.faq-plus::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; background:var(--c-flame); border-radius:2px; transition:transform .45s var(--ease-out)}
.faq-plus::after{transform:rotate(90deg)}
.faq-q[aria-expanded="true"] .faq-plus{transform:rotate(180deg); border-color:var(--c-flame); background:rgba(255,138,31,.12)}
.faq-q[aria-expanded="true"] .faq-plus::after{transform:rotate(0)}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-out)}
.faq-a > div{overflow:hidden; min-height:0}
.faq-a p{padding:0 22px 0 22px; font-size:15px; line-height:1.7; color:var(--c-muted); opacity:0; transform:translateY(-6px); transition:opacity .35s, transform .45s var(--ease-out)}
.faq-a p + p{padding-top:10px}
.faq-a p:last-child{padding-bottom:22px}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-item.open .faq-a p{opacity:1; transform:none}
.faq-item.open{border-color:rgba(255,138,31,.5)}

/* ---------- Przygoda czeka (CTA) ---------- */
.cta{overflow:hidden; padding:clamp(60px,6vw,84px) 0; text-align:center; background:var(--c-night)}
.cta-bg{position:absolute; inset:0; z-index:-0; pointer-events:none}
.cta-bg-blur{
  position:absolute; inset:-30px; background:url("img/ref/cta-bg.webp?v=2") center/cover no-repeat;
  filter:blur(18px) saturate(120%); opacity:.45; transform:scale(1.1);
}
.cta-bg-band{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  aspect-ratio:1254/178; min-height:60%;
  background:url("img/ref/cta-bg.webp?v=2") center/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);
}
.cta::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 42% 70% at 50% 50%,rgba(7,8,13,.62),transparent 80%)}
.cta .embers{z-index:1}
.cta-in{position:relative; z-index:2}
.cta .display{margin-bottom:clamp(20px,2.4vw,30px)}
.cta-tiles{display:flex; justify-content:center; flex-wrap:wrap; gap:18px}
.tile{
  position:relative; display:flex; align-items:center; gap:16px; min-height:66px; padding:10px 18px 10px 12px; border-radius:6px; text-align:left;
  background:rgba(9,8,12,.86); border:1px solid rgba(255,138,31,.6);
  box-shadow:0 0 22px rgba(255,138,31,.22), inset 0 0 18px rgba(255,138,31,.06);
  transition:transform .35s var(--ease-out), box-shadow .35s, border-color .35s;
}
.tile:hover{transform:translateY(-3px); border-color:var(--c-flame-hi); box-shadow:0 0 34px rgba(255,138,31,.45), inset 0 0 18px rgba(255,138,31,.1)}
.tile-ico{flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:5px; background:linear-gradient(180deg,#24201c,#141217); border:1px solid rgba(255,255,255,.08); color:#e7e3dc}
.ip-tile{min-width:min(100%,300px)}
.ip-text{flex:1; font:600 17px/1.2 var(--f-ui); letter-spacing:.02em; color:#fff}
.tile-copy{flex:none; color:var(--c-muted); transition:color .25s, transform .25s}
.ip-tile:hover .tile-copy{color:var(--c-flame)}
.ip-tile:active .tile-copy{transform:scale(.88)}
.dc-tile{min-width:min(100%,250px)}
.dc-tile .tile-ico{color:#fff; background:linear-gradient(180deg,#6b74ff,#4752c4); border:0}
.dc-txt{display:flex; flex-direction:column; gap:3px}
.dc-txt b{font:700 15px/1.1 var(--f-ui); letter-spacing:.06em; text-transform:uppercase; color:#fff}
.dc-txt small{font:600 10.5px/1.1 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted)}
.ip-hint{margin-top:14px; font-size:13px; color:var(--c-muted)}

/* ---------- Stopka ---------- */
.footer{position:relative; padding:30px 0 26px; background:var(--c-night); border-top:1px solid rgba(255,138,31,.18)}
.footer-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px}
.footer .brand-txt{font-size:17px}
.footer-tag{font:600 11.5px/1.4 var(--f-ui); letter-spacing:.28em; text-transform:uppercase; color:#d9d3c9; text-align:center}
.footer-tag i{font-style:normal; color:var(--c-flame); margin:0 .5em}
.footer-invite{justify-self:end; display:flex; align-items:center; gap:10px; font:600 11px/1.4 var(--f-ui); letter-spacing:.24em; text-transform:uppercase; color:#d9d3c9}
.footer-invite img{width:18px; height:auto}
.footer-legal{margin-top:20px; padding:0 20px; text-align:center; font-size:12.5px; color:#7f786e}

/* ---------- Elementy stałe (widget graczy: online.css) ---------- */
.cookie-btn,.top-btn{
  position:fixed; z-index:55; bottom:16px; width:62px; height:62px; display:grid; place-items:center; border-radius:8px;
  background:rgba(13,12,16,.82); border:1px solid rgba(255,138,31,.55); color:var(--c-flame);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 16px rgba(255,138,31,.14);
  transition:transform .3s var(--ease-out), opacity .3s, visibility .3s, box-shadow .3s, border-color .3s;
}
.cookie-btn:hover,.top-btn:hover{border-color:var(--c-flame-hi); box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 24px rgba(255,138,31,.45); transform:translateY(-2px)}
.cookie-btn{left:16px}
.cookie-btn img{width:34px; height:34px; image-rendering:pixelated}
.top-btn{right:16px}
.top-btn:not(.show){opacity:0; visibility:hidden; transform:translateY(12px)}

.toast{
  position:fixed; z-index:70; right:20px; top:calc(var(--nav-h) + 12px); width:min(340px,calc(100vw - 40px));
  padding:14px 18px 14px 58px; border-radius:8px;
  background:rgba(13,12,16,.92); border:1px solid rgba(255,138,31,.55); border-left:3px solid var(--c-flame);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 24px rgba(255,138,31,.2);
  font:700 14px/1.35 var(--f-ui); letter-spacing:.04em; color:var(--c-flame-hi);
  transform:translateX(calc(100% + 40px)); opacity:0; transition:transform .5s var(--ease-out), opacity .3s;
}
.toast::before{content:""; position:absolute; left:16px; top:50%; width:28px; height:32px; margin-top:-16px; background:url("img/ref/flame-small.png") center/contain no-repeat; filter:drop-shadow(0 0 8px rgba(255,138,31,.6))}
.toast small{display:block; margin-top:3px; font-weight:500; font-size:13.5px; letter-spacing:0; color:var(--c-text)}
.toast.show{transform:none; opacity:1}

/* ============================================================
   ANIMACJE (tylko z JS; bez JS wszystko widoczne)
   ============================================================ */
/* --- Intro hero --- */
.js .hero-bg{transform:scale(1.12); opacity:.35}
.js .hero-logo{opacity:0}
.js .tagline .ch,.js .hero-sub{opacity:0}
.js .hero-actions,.js .hcard-li,.js .hero-divider{opacity:0}
.js .logo-glow{opacity:0}

.intro-go .hero-bg{animation:bgIn 1.8s var(--ease-out) forwards}
.intro-go .hero-logo{animation:logoIn 1.1s var(--ease-out) .2s forwards}
.intro-go .logo-glow{animation:glowIn .8s ease-out 1s forwards, glowPulse 3.4s ease-in-out 1.8s infinite}
.intro-go .tagline .ch{animation:chIn .6s var(--ease-out) forwards; animation-delay:calc(.75s + var(--i) * 26ms)}
.intro-go .hero-sub{animation:fadeIn .9s ease-out .7s forwards}
.intro-go .hero-actions{animation:upIn .8s var(--ease-out) 1.15s forwards}
.intro-go .hcard-li{animation:upIn .9s var(--ease-out) forwards; animation-delay:calc(1.3s + var(--i) * 110ms)}
.intro-go .hero-divider{animation:fadeIn 1s ease-out 1.85s forwards}

@keyframes bgIn{from{transform:scale(1.12); opacity:.35} to{transform:scale(1); opacity:1}}
@keyframes logoIn{
  0%{opacity:0; transform:translateY(-34px) scale(1.18); filter:blur(16px) brightness(1.8)}
  60%{opacity:1; filter:blur(0) brightness(1.25)}
  100%{opacity:1; transform:none; filter:none}
}
@keyframes glowIn{from{opacity:0} to{opacity:.85}}
@keyframes glowPulse{0%,100%{opacity:.85; transform:translate(-50%,-50%) scale(1)} 50%{opacity:.5; transform:translate(-50%,-50%) scale(.9)}}
@keyframes chIn{from{opacity:0; transform:translateY(.6em) scale(.8); filter:blur(5px)} to{opacity:1; transform:none; filter:none}}
@keyframes upIn{from{opacity:0; transform:translateY(34px)} to{opacity:1; transform:none}}
@keyframes fadeIn{to{opacity:1}}

/* --- Reveal przy scrollu --- */
.js [data-reveal],.js .rv{opacity:0; transform:translateY(36px); filter:blur(6px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay:var(--d,0ms)}
.js [data-reveal].in,.js .rv.in{opacity:1; transform:none; filter:none}
.js [data-reveal] .kicker i,.js .title-lines i{transform:scaleX(0); transition:transform 1.1s var(--ease-out) .25s}
.js [data-reveal].in .kicker i,.js .title-lines.in i{transform:scaleX(1)}
.js .info-item.in .info-ico{animation:icoHop .7s var(--ease-out) both; animation-delay:calc(var(--d,0ms) + 250ms)}
@keyframes icoHop{0%{transform:translateY(0) scale(1)} 35%{transform:translateY(-10px) scale(1.12)} 65%{transform:translateY(2px) scale(.96)} 100%{transform:none}}

/* ============================================================
   RWD
   ============================================================ */
@media (max-width:1100px){
  .nav-links{gap:clamp(14px,1.9vw,30px)}
  .nav-links a{letter-spacing:.1em; white-space:nowrap}
  .nav-in{gap:18px}
  .offer-side{opacity:.5}
  .fcard{grid-template-columns:1fr}
  .fcard-media{min-height:200px; border-radius:5px 5px 0 0}
  .fcard-media::after{background:linear-gradient(0deg,rgba(10,9,13,.95),transparent 50%)}
  .fcard-body{padding:4px 22px 22px}
}

@media (max-width:960px){
  .updates-list{width:100%}
  .join-desc{margin-left:0}
  #joinBtn{left:0}
  :root{--nav-h:66px}
  .nav-in{padding:0 18px}
  .nav-cta{display:none}
  .burger{display:block}
  .nav-menu{
    position:fixed; left:0; right:0; top:var(--nav-h); flex-direction:column; align-items:stretch; gap:18px;
    padding:18px 22px 26px; background:rgba(9,9,14,.96); border-bottom:1px solid rgba(255,138,31,.2);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 20px 40px rgba(0,0,0,.5);
    opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .3s, transform .35s var(--ease-out), visibility .3s;
    max-height:calc(100svh - var(--nav-h)); overflow-y:auto;
  }
  .nav.open .nav-menu{opacity:1; visibility:visible; transform:none}
  .nav-links{flex-direction:column; gap:0}
  .nav-links a{padding:16px 4px; font-size:14px; border-bottom:1px solid rgba(255,255,255,.06)}
  .nav-links a::after{left:0; right:auto; width:40px; bottom:-1px; transform-origin:left}
  .nav-cta-mobile{display:inline-flex; justify-content:center; min-height:50px}

  .offer-grid{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:44px}
  .hcard{padding-left:10px; padding-right:10px}
  .hcard p{white-space:normal; font-size:12.5px}
  .offer-side{opacity:.32}
  .info-grid{display:flex; flex-wrap:wrap; justify-content:center; row-gap:30px}
  .info-item{flex:0 0 33.333%}
  .info-item:nth-child(4)::before{display:none}
  .info-edge{width:40%; opacity:.5}
  .join{flex-direction:column; align-items:stretch; min-height:0; padding-top:0}
  .join-scene{position:relative; width:100%; height:auto; aspect-ratio:1400/702; max-height:52vh;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 65%,transparent 100%),linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 65%,transparent 100%),linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
  .join-scene img{object-position:65% 50%}
  .join-wrap{margin-top:-40px; width:100%; max-width:var(--wrap); margin-left:auto; margin-right:auto; display:block}
  .join-text{max-width:640px}
  .footer-in{grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px}
  .footer-invite{justify-self:center}
}

@media (max-width:640px){
  .wrap{padding:0 16px}
  .nav-in{padding:0 12px 0 16px}
  .brand-txt{font-size:17px}
  .hero-inner{padding:calc(var(--nav-h) + 2px) 14px 14px}
  .hero-main{gap:12px}
  .hero-logo img{width:clamp(180px, calc((100svh - 430px) * 1.62), 640px); max-width:88vw}
  .tagline{letter-spacing:.2em; margin-right:-.2em; font-size:11.5px}
  .hero-actions .btn{min-width:0; min-height:50px; padding:0 26px}
  .hero-cards{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .hcard{padding:12px 8px 12px; gap:3px}
  .hcard img{width:42px; height:42px; margin-bottom:2px}
  .hcard h3{font-size:12px; letter-spacing:.1em}
  .hcard p{font-size:11.5px; line-height:1.4}
  .frame::before{--l:11px}

  .offer-grid{grid-template-columns:1fr 1fr; gap:34px 14px}
  .offer-item p{font-size:13.5px}
  .offer-item h3{white-space:normal; min-height:2.2em; display:flex; align-items:center}
  .oi-icon{width:86px; margin-bottom:14px}
  .offer-side{opacity:.22}
  .info-item{flex-basis:50%}
  .info-item::before{display:none}
  .title-lines{gap:12px}
  .show-grid{grid-template-columns:1fr}
  .btn{padding:0 24px; letter-spacing:.12em}
  .join-desc{font-size:15px}
  .faq-q{padding:16px 16px}
  .faq-a p{padding-left:16px; padding-right:16px}
  .faq-a p:last-child{padding-bottom:18px}
  .cta-tiles{flex-direction:column; align-items:stretch}
  .tile{width:100%}
  .cta-bg-band{display:none}
  .cta-bg-blur{opacity:.6}
  .toast{right:16px}
}
@media (max-width:340px){
  .offer-grid{grid-template-columns:1fr}
}
@media (max-width:380px){
  .hcard p{display:none}
}
/* Niskie ekrany: kompaktowe hero */
@media (max-height:760px) and (min-width:641px){
  .hcard p{font-size:12.5px}
  .hero-divider{margin-top:10px}
  .hero-divider img{width:24px}
}
@media (max-height:700px){
  .hero-divider{display:none}
}
@media (max-height:620px) and (max-width:640px){
  .hcard p{display:none}
}

/* ============================================================
   Ograniczony ruch: wszystko statyczne
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .js .hero-bg,.js .hero-logo,.js .tagline .ch,.js .hero-sub,.js .hero-actions,.js .hcard-li,.js .hero-divider{opacity:1; transform:none; filter:none}
  .js .logo-glow{opacity:.75}
  .js [data-reveal],.js .rv{opacity:1; transform:none; filter:none}
  .js [data-reveal] .kicker i,.js .title-lines i{transform:none}
  .accent{background-position:60% 0}
  .embers{display:none}
}