/* ==========================================================
   Mousecat — Neo-brutal palette + Apple bento layout
   Shared across all pages
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html{scroll-behavior:smooth;background:#fff7d3;scroll-padding-top:110px}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  font-weight:500;
  background:#fff7d3;
  color:#1A1A1A;
  font-size:16px;line-height:1.5;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img[hidden]{display:none}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
a{color:inherit;text-decoration:none}
input,textarea{font-family:inherit}

:root{
  /* PRIMARY BRAND PALETTE */
  --bg:#fff7d3;          /* Soft Yellow — main bg */
  --bg-soft:#FFF1B5;     /* slightly more saturated yellow */
  --bg-paper:#fffbe5;    /* very light cream */
  --red:#AB1509;         /* Deep Rich Red — primary accent */
  --red-dark:#7a0a04;
  --red-soft:#D4524B;

  /* keeping these for tile color variants */
  --cream:#FFE9A0;
  --mint:#E0EDE5;
  --pink-soft:#F2E2E0;
  --purple-soft:#E8E2F0;
  --orange-soft:#F2E2D4;

  --ink:#1A1A1A;
  --ink-mute:#6B6B6B;
  --ink-dim:#A5A5A5;

  --teal:#5FA89E;
  --teal-dark:#3D8A80;
  --pink:#E08799;
  --pink-dark:#C06D82;
  --yellow:#F4C430;
  --yellow-dark:#D4A41B;
  --purple:#8870B8;
  --purple-dark:#6B5C96;
  --orange:#D47857;
  --orange-dark:#B5613F;
  --green:#7AA582;

  --ease:cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);

  --gap:20px;
  --radius-tile:24px;
  --radius-pill:999px;
  --nav-h:60px;
  --shipbar-h:40px;
}

/* ===== TOP SHIP-BAR ===== */
.shipbar{
  position:sticky;top:0;z-index:101;
  background:var(--ink);color:#fff;
  height:var(--shipbar-h);
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-family:'DM Sans',sans-serif;
  font-weight:600;font-size:13px;
  border-bottom:2.5px solid var(--ink);
  padding:0 22px;
}
.shipbar b{font-family:'Archivo',sans-serif;font-weight:900}
.shipbar a{
  color:var(--yellow);
  text-decoration:underline;font-weight:700;
}
@media (max-width:720px){.shipbar{font-size:11px;gap:10px}}

/* ===== GLOBAL NAV ===== */
.gn{
  position:sticky;top:var(--shipbar-h);z-index:100;
  background:rgba(250,249,246,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:2.5px solid var(--ink);
  height:var(--nav-h);
  display:flex;align-items:center;
}
.gn-inner{
  max-width:1280px;margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:100%;
}
.gn-logo{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:18px;
  letter-spacing:-.02em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ink);
}
.gn-logo .pawmark{font-size:18px}
.gn-list{display:flex;list-style:none;gap:6px}
.gn-list a{
  position:relative;
  padding:8px 16px;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.02em;
  color:var(--ink);
  transition:color .15s ease,transform .15s ease;
}
.gn-list a::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:2px;
  height:3px;
  background:var(--red);
  border-radius:3px;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.gn-list a:hover{color:var(--red);transform:translateY(-1px)}
.gn-list a:hover::after{transform:scaleX(1)}
.gn-list a.active{color:var(--red)}
.gn-list a.active::after{transform:scaleX(1)}

.gn-icons{display:flex;align-items:center}
.gn-icons button{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px 8px 14px;
  background:var(--red);color:#fff;
  border:2.5px solid var(--ink);
  border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:13px;
  letter-spacing:.02em;text-transform:uppercase;
  box-shadow:2.5px 2.5px 0 var(--ink);
  transition:transform .15s,box-shadow .15s;
}
.gn-icons button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.gn-cart-badge{
  min-width:22px;height:22px;
  background:var(--pink);color:#fff;
  border:2px solid #fff;
  border-radius:999px;
  font-size:10px;font-weight:900;
  display:none;align-items:center;justify-content:center;
  padding:0 5px;
}
.gn-cart-badge.show{display:flex}
@media (max-width:720px){
  .gn-list{display:none}
}

/* ===== TYPOGRAPHY ===== */
.eyebrow{
  display:inline-flex;align-items:center;
  padding:6px 14px;
  border:2px solid var(--ink);
  border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:800;
  font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:2px 2px 0 var(--ink);
  background:var(--red);
  color:#fff;
  margin-bottom:20px;
}
.eyebrow.is-new{background:var(--yellow);color:var(--ink)}

.tile-title{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  font-size:clamp(36px,5.5vw,84px);
  line-height:.95;
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--ink);
}
.tile-sub{
  font-family:'DM Sans',sans-serif;
  font-weight:500;
  font-size:clamp(15px,1.3vw,18px);
  line-height:1.5;
  color:var(--ink);
  margin-top:14px;
  max-width:520px;
}
.tile-sub--muted{color:var(--ink-mute)}

.dark .tile-title,.dark .tile-sub{color:#fff}
.dark .tile-sub--muted{color:rgba(255,255,255,.7)}
.dark .eyebrow{background:var(--yellow);color:var(--ink)}

@media (max-width:1068px){
  .tile-title{font-size:48px}
  .tile-sub{font-size:18px}
}
@media (max-width:734px){
  .tile-title{font-size:34px}
  .tile-sub{font-size:16px}
  .eyebrow{font-size:10px}
}

/* ===== BUTTONS ===== */
.cta-row{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  margin-top:22px;
}
.cta-row.left{justify-content:flex-start}

.btn-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;
  background:var(--red);color:#fff;
  border:2.5px solid var(--ink);
  border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease);
  white-space:nowrap;cursor:pointer;
}
.btn-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn-pill:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-pill.ghost{
  background:#fff;color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.btn-pill.ghost:hover{box-shadow:6px 6px 0 var(--ink)}
.btn-pill.dark-pill{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--red)}
.btn-pill.dark-pill:hover{box-shadow:6px 6px 0 var(--red)}
.btn-pill.sm{padding:10px 18px;font-size:11px;box-shadow:3px 3px 0 var(--ink)}
.btn-pill.sm:hover{box-shadow:5px 5px 0 var(--ink)}
.btn-pill.lg{padding:18px 34px;font-size:15px;box-shadow:5px 5px 0 var(--ink)}
.btn-pill.lg:hover{box-shadow:7px 7px 0 var(--ink)}

/* Color variants */
.btn-pill.pink{background:var(--pink);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.btn-pill.pink:hover{box-shadow:6px 6px 0 var(--ink)}
.btn-pill.pink.lg{box-shadow:5px 5px 0 var(--ink)}
.btn-pill.pink.lg:hover{box-shadow:7px 7px 0 var(--ink)}

.btn-pill.teal{background:var(--teal);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-pill.teal:hover{box-shadow:6px 6px 0 var(--ink)}
.btn-pill.teal.lg{box-shadow:5px 5px 0 var(--ink)}
.btn-pill.teal.lg:hover{box-shadow:7px 7px 0 var(--ink)}

.btn-pill.yellow-btn{background:var(--yellow);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-pill.yellow-btn:hover{box-shadow:6px 6px 0 var(--ink)}
.btn-pill.yellow-btn.lg{box-shadow:5px 5px 0 var(--ink)}
.btn-pill.yellow-btn.lg:hover{box-shadow:7px 7px 0 var(--ink)}

.btn-pill.purple-btn{background:var(--purple);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.btn-pill.purple-btn:hover{box-shadow:6px 6px 0 var(--ink)}

.dark .btn-pill{background:var(--yellow);color:var(--ink);box-shadow:4px 4px 0 var(--pink)}
.dark .btn-pill:hover{box-shadow:6px 6px 0 var(--pink)}
.dark .btn-pill.ghost{background:transparent;color:#fff;box-shadow:4px 4px 0 #fff;border-color:#fff}

.btn-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);
  border-bottom:2px solid var(--ink);
  padding-bottom:3px;
  transition:gap .2s;
}
.btn-link::after{content:'→';font-size:14px;line-height:1}
.btn-link.no-arrow::after{content:none}
.btn-link:hover{gap:10px;text-decoration:none}
.dark .btn-link{color:#fff;border-bottom-color:#fff}

/* ===== TILE BASE (Apple bento style) ===== */
main{display:block}

.tile{
  position:relative;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:var(--radius-tile);
  box-shadow:6px 6px 0 var(--ink);
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  padding:48px 32px 0;
  text-align:center;
  min-height:520px;
}
.tile.dark{background:var(--ink);color:#fff}
.tile.gray{background:var(--bg-soft)}
.tile.cream{background:var(--cream)}
.tile.mint{background:var(--mint)}
.tile.pink{background:var(--pink-soft)}
.tile.purple{background:var(--purple-soft)}
.tile.orange{background:var(--orange-soft)}
.tile.yellow-bg{background:var(--yellow)}

.tile-copy{position:relative;z-index:2;max-width:680px}
.tile-visual{
  flex:1;width:100%;
  display:flex;align-items:flex-end;justify-content:center;
  position:relative;z-index:1;
  padding-top:30px;
}

/* Split row (2 cols) */
.tile-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--gap);
}
.tile-row .tile{min-height:480px}
.tile-row .tile-title{font-size:clamp(28px,3.5vw,52px)}

@media (max-width:734px){
  .tile-row{grid-template-columns:1fr}
  .tile{min-height:440px;padding:36px 22px 0;box-shadow:4px 4px 0 var(--ink)}
}

/* ===== HERO PAD VISUAL (3D pad) ===== */
.pad-hero,.pad-hero-sm{
  border:3px solid var(--ink);
  border-radius:18px;
  position:relative;overflow:hidden;
  margin-bottom:-30px;
}
.pad-hero{
  width:min(640px,90%);
  aspect-ratio:5/3;
  box-shadow:8px 8px 0 var(--ink);
  transform:rotate(-2deg);
}
.pad-hero-sm{
  width:min(360px,82%);
  aspect-ratio:5/3;
  box-shadow:5px 5px 0 var(--ink);
  transform:rotate(-1.5deg);
}
.pad-hero::after,.pad-hero-sm::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.18;pointer-events:none;
}
.pad-hero::before,.pad-hero-sm::before{
  content:"";position:absolute;
  top:0;left:0;right:0;height:35%;
  background:linear-gradient(180deg,rgba(255,255,255,.1),transparent);
  pointer-events:none;z-index:1;
}

/* ===== PATTERN VISUALS — real AI-generated images ===== */
.pat-czarna  {background:#0A0A12 url("img/pads/pad-6.png") center/cover no-repeat}
.pat-bloom   {background:#FDA4AF url("img/pads/pad-1.png") center/cover no-repeat}
.pat-haze    {background:#3B0764 url("img/pads/pad-2.png") center/cover no-repeat}
.pat-zloto   {background:#FDE68A url("img/pads/pad-3.png") center/cover no-repeat}
.pat-catgirl {background:#A78BFA url("img/pads/pad-4.png") center/cover no-repeat}
.pat-sakura  {background:#FCE7F3 url("img/pads/pad-5.png") center/cover no-repeat}
.pat-fala    {background:#1E3A8A url("img/pads/pad-7.png") center/cover no-repeat}
.pat-kobalt  {background:#1E40AF url("img/pads/pad-8.png") center/cover no-repeat}

/* These four still use generated CSS gradients (no real image yet) */
.pat-retro{
  background:repeating-linear-gradient(-25deg,
    #EC4899 0 28px,#F59E0B 28px 56px,
    #10B981 56px 84px,#8B5CF6 84px 112px);
}
.pat-bikini{
  background:
    radial-gradient(ellipse at 70% 30%,rgba(250,204,21,.2),transparent 45%),
    radial-gradient(ellipse at 30% 70%,rgba(186,230,253,.4),transparent 50%),
    linear-gradient(165deg,#38BDF8 0%,#0EA5E9 50%,#0369A1 100%);
}
.pat-oceania{
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.08) 0 1.5px,
      transparent 1.5px 26px),
    radial-gradient(ellipse at 30% 70%,rgba(167,243,208,.2),transparent 50%),
    linear-gradient(180deg,#0D9488 0%,#0F766E 70%,#134E4A 100%);
}
.pat-carbon{
  background:
    repeating-linear-gradient(45deg,#27272A 0 3px,#18181B 3px 6px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,0.06) 0 3px,
      transparent 3px 6px);
  background-blend-mode:screen;
}
.pat-ai{
  background:
    radial-gradient(ellipse at 20% 20%,rgba(255,180,255,.55),transparent 55%),
    radial-gradient(ellipse at 80% 30%,rgba(120,200,255,.5),transparent 55%),
    radial-gradient(ellipse at 60% 80%,rgba(255,210,120,.45),transparent 55%),
    linear-gradient(135deg,#1a0d2e 0%,#312e81 50%,#0d1830 100%);
}
.pat-sleeve{
  background:
    /* swoosh-like highlight */
    radial-gradient(ellipse 200% 30% at 50% 50%,rgba(255,255,255,.15),transparent 60%),
    /* compressive vertical lines */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.04) 0 2px,
      transparent 2px 18px),
    /* base fabric */
    linear-gradient(145deg,#2a2a2c 0%,#181819 50%,#0a0a0c 100%);
}
/* ===== KEBCIO TILE (compact side-by-side) ===== */
.kebcio-tile{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  text-align:left !important;
}
.kebcio-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:32px;align-items:center;
  width:100%;
}
.kebcio-text{display:flex;flex-direction:column}
.kebcio-img{
  border:2.5px solid var(--ink);
  border-radius:14px;
  aspect-ratio:16/9;
  box-shadow:5px 5px 0 var(--red);
}
@media (max-width:900px){
  .kebcio-grid{grid-template-columns:1fr;gap:22px}
  .kebcio-img{aspect-ratio:16/10}
}

/* Kebcio countdown timer */
.kebcio-timer{
  display:flex;flex-direction:column;
  align-self:flex-start;
  gap:12px;margin:18px 0 26px;
  padding:18px 22px;
  background:linear-gradient(135deg,rgba(244,63,94,.18),rgba(244,196,48,.10));
  border:2.5px solid var(--yellow);
  border-radius:16px;
  box-shadow:0 0 0 4px rgba(244,196,48,.08), 6px 6px 0 rgba(0,0,0,.4);
  position:relative;overflow:hidden;
}
.kebcio-timer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(244,196,48,.18) 50%,transparent 65%);
  background-size:220% 100%;
  animation:kt-shine 3.4s linear infinite;
}
@keyframes kt-shine{
  0%{background-position:220% 0}
  100%{background-position:-120% 0}
}
.kt-label{
  display:flex;align-items:center;gap:10px;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:13px;
  color:var(--yellow);
  letter-spacing:.12em;text-transform:uppercase;
  position:relative;z-index:1;
}
.kt-label .pulse-red{
  width:10px;height:10px;border-radius:50%;
  background:#EF4444;
  animation:pulse 1.2s infinite;
  box-shadow:0 0 12px #EF4444,0 0 24px rgba(239,68,68,.5);
}
.kt-units{display:flex;gap:10px;position:relative;z-index:1}
.kt-unit{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#000;
  border:3px solid var(--yellow);
  border-radius:12px;
  padding:12px 14px 10px;
  min-width:72px;
  box-shadow:inset 0 0 16px rgba(244,196,48,.18);
  position:relative;
}
.kt-unit:not(:last-child)::after{
  content:":";
  position:absolute;right:-12px;top:50%;
  transform:translateY(-55%);
  font-family:'Archivo',sans-serif;font-weight:900;font-size:24px;
  color:var(--yellow);
  text-shadow:0 0 10px rgba(244,196,48,.6);
  z-index:2;
}
.kt-val{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:34px;
  color:var(--yellow);line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px rgba(244,196,48,.5);
}
.kt-lbl{
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:10px;
  color:rgba(255,255,255,.7);
  letter-spacing:.16em;text-transform:uppercase;
  margin-top:6px;
}
@media (max-width:560px){
  .kebcio-timer{padding:14px 16px}
  .kt-units{gap:7px}
  .kt-unit{min-width:54px;padding:9px 9px 8px}
  .kt-val{font-size:24px}
  .kt-unit:not(:last-child)::after{right:-9px;font-size:18px}
}

/* Real Nike Pro Elite sleeve image */
.sleeve-render{
  width:min(220px,80%);
  aspect-ratio:5/7;
  background:url('img/rekawek/sleeve.png') center/contain no-repeat;
  margin:0 auto -20px;
  transform:rotate(-4deg);
  transition:transform .4s var(--ease);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));
}
.sleeve-render:hover{transform:rotate(-2deg) scale(1.04)}
.pat-kebcio{background:#1ABBE0 url("img/kebcio/kompresja.jpg") center/cover no-repeat}

/* ===== RAINBOW DIVIDER ===== */
.rainbow{
  height:8px;
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
}
.rainbow span{display:block}
.rainbow span:nth-child(1){background:var(--teal)}
.rainbow span:nth-child(2){background:var(--pink)}
.rainbow span:nth-child(3){background:var(--yellow)}
.rainbow span:nth-child(4){background:var(--purple)}
.rainbow span:nth-child(5){background:var(--orange)}
.rainbow span:nth-child(6){background:var(--green)}

/* ===== HOME HERO — SPLIT LAYOUT (sales-focused) ===== */
.home-hero{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:60px;align-items:center;
  padding:60px 24px 50px;
  background:var(--bg);
  max-width:1280px;
  margin:0 auto;
  position:relative;
}
.home-hero-text{text-align:left}
.home-hero h1{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  font-size:clamp(36px,4.5vw,68px);
  line-height:.95;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--ink);
}
.home-hero h1 .red{color:var(--red)}
.home-hero h1 .gradient,
.home-hero h1 .pink{color:var(--red)}
.home-hero h1 .teal{color:var(--ink)}
.home-hero .lead{
  margin:18px 0 0;
  font-family:'DM Sans',sans-serif;font-weight:500;
  font-size:clamp(15px,1.2vw,17px);
  color:var(--ink-mute);
  max-width:520px;line-height:1.55;
}
.hero-price{
  display:inline-flex;align-items:baseline;gap:10px;
  margin-top:22px;
  font-family:'Archivo',sans-serif;
}
.hero-price .from{
  font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);
}
.hero-price .amount{
  font-weight:900;font-size:42px;
  letter-spacing:-.02em;color:var(--red);
}
.hero-price .ship{
  font-weight:600;font-size:13px;
  color:var(--ink-mute);margin-left:6px;
}
.hero-rating{
  display:flex;align-items:center;gap:6px;
  margin-top:14px;
  font-family:'Archivo',sans-serif;
  font-weight:700;font-size:13px;
  color:var(--ink);
}
.hero-rating .stars{color:var(--yellow-dark);letter-spacing:1px}

@media (max-width:900px){
  .home-hero{grid-template-columns:1fr;gap:30px;padding:40px 18px 30px;text-align:center}
  .home-hero-text{text-align:center}
  .home-hero .lead{margin-left:auto;margin-right:auto}
  .hero-price{justify-content:center}
}

/* === HERO PAD MOCKUP — 3 stacked at angles === */
.hero-mockup{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-width:560px;
  margin:0 auto;
}
.mock-pad{
  position:absolute;
  width:100%;
  aspect-ratio:9/4;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border:3px solid var(--ink);
  border-radius:14px;
  isolation:isolate;
  overflow:hidden;
  transition:transform .4s var(--ease);
}
.mock-pad::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.18;
}
.mock-pad::before{
  content:"";position:absolute;inset:0;height:35%;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);
}
.mp-back{
  top:5%;left:0;
  transform:rotate(-8deg);
  box-shadow:6px 6px 0 var(--ink);
  z-index:1;
}
.mp-mid{
  top:30%;right:0;
  transform:rotate(4deg);
  box-shadow:7px 7px 0 var(--ink);
  z-index:2;
}
.mp-front{
  top:53%;left:6%;
  transform:rotate(-3deg);
  box-shadow:9px 9px 0 var(--red);
  z-index:3;
}
.hero-mockup:hover .mp-back{transform:rotate(-10deg) translateY(-4px)}
.hero-mockup:hover .mp-mid{transform:rotate(6deg) translateY(-3px)}
.hero-mockup:hover .mp-front{transform:rotate(-5deg) translateY(-5px)}

/* Price tag bubble floating on hero mockup */
.hero-mockup .price-tag{
  position:absolute;
  top:-18px;right:-10px;
  background:var(--red);color:#fff;
  border:3px solid var(--ink);
  border-radius:999px;
  padding:10px 22px;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:18px;
  letter-spacing:-.01em;
  box-shadow:4px 4px 0 var(--ink);
  transform:rotate(8deg);
  z-index:5;
  animation:tag-bob 3.5s ease-in-out infinite;
}
@keyframes tag-bob{
  0%,100%{transform:rotate(8deg) translateY(0)}
  50%{transform:rotate(10deg) translateY(-4px)}
}

@media (max-width:900px){
  .hero-mockup{aspect-ratio:1/.75;max-width:480px}
  .mp-back{top:5%}
  .mp-mid{top:35%}
  .mp-front{top:60%}
}
@media (max-width:560px){
  .hero-mockup{aspect-ratio:1/.85}
}

/* Trust pills row */
.trust-row{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;
  margin:30px auto 32px;
  max-width:980px;
}
.trust-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:700;font-size:12px;
  letter-spacing:.02em;color:var(--ink);
  box-shadow:2px 2px 0 var(--ink);
}
.trust-pill .ico{font-size:13px}
@media (max-width:734px){.trust-pill{font-size:11px;padding:6px 12px}}

/* Feature strip */
.feature-strip{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:14px;max-width:1180px;margin:30px auto 50px;
  padding:0 22px;
}
.feature-card{
  background:#fff;
  border:2.5px solid var(--ink);
  border-radius:18px;
  box-shadow:3px 3px 0 var(--ink);
  padding:18px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink);
  cursor:pointer;
  min-height:170px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.feature-card:hover{
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--ink);
  text-decoration:none;
  background:var(--yellow);
}
.feature-card .fc-pad{
  width:100%;aspect-ratio:5/3;
  border:2px solid var(--ink);border-radius:8px;
  position:relative;overflow:hidden;
  box-shadow:2px 2px 0 var(--ink);
}
.feature-card .fc-pad::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.18;
}

/* Mini-kreator preview na karcie "Kreator AI" — symuluje UI generatora */
.fc-pad--kreator{
  background:
    radial-gradient(ellipse at 25% 25%,rgba(160,107,255,.45),transparent 55%),
    radial-gradient(ellipse at 75% 75%,rgba(95,200,255,.35),transparent 55%),
    linear-gradient(135deg,#0F0F1F 0%,#231344 50%,#0F0F1F 100%);
  display:flex;flex-direction:column;justify-content:center;
  gap:6px;
  padding:9px 10px;
}
.fc-pad--kreator::after{display:none} /* bez noise overlay */
.fc-mini-input{
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.22);
  border-radius:5px;
  padding:6px 7px;
  font-family:'DM Sans',sans-serif;
  font-size:9px;font-weight:500;
  color:rgba(255,255,255,.92);
  text-align:left;
  display:flex;align-items:center;
  line-height:1;
  white-space:nowrap;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.2);
}
.fc-mini-text{
  overflow:hidden;text-overflow:ellipsis;
}
.fc-mini-caret{
  display:inline-block;width:1.5px;height:9px;
  background:#a06bff;
  margin-left:2px;
  animation:fc-caret-blink 1.05s steps(1,end) infinite;
  flex-shrink:0;
}
@keyframes fc-caret-blink{
  50%{opacity:0}
}
.fc-mini-btn{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,#ff6ac1,#a06bff,#5fc8ff);
  color:#fff;
  padding:5px 9px;
  border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:900;
  font-size:8px;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:
    0 0 12px rgba(160,107,255,.45),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.fc-mini-spark{
  flex-shrink:0;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.6));
}
@media (prefers-reduced-motion:reduce){
  .fc-mini-caret{animation:none;opacity:.7}
}
.feature-card .fc-name{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:14px;
  letter-spacing:-.01em;text-transform:uppercase;
}
.feature-card .fc-desc{
  font-size:11px;color:var(--ink-mute);
  font-weight:500;margin-top:-4px;
}
@media (max-width:1068px){.feature-strip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:734px){.feature-strip{grid-template-columns:repeat(2,1fr);margin:24px auto 30px}}

/* ===== BENTO GRID ===== */
.bento{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  padding:var(--gap) var(--gap) calc(var(--gap) + 6px);
  background:var(--bg);
  max-width:1280px;margin:0 auto;
}
.bento .tile-big{grid-column:1 / -1;min-height:680px;padding-top:56px}
.bento .tile{min-height:520px}
.bento .tile-big .tile-copy{max-width:900px;margin:0 auto}
.bento .tile-big .tile-title{
  font-size:clamp(36px,4.5vw,64px);
  line-height:.96;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}
.bento .tile-big .tile-sub{font-size:clamp(15px,1.4vw,19px);margin-left:auto;margin-right:auto}
.bento .tile-big .cta-row{justify-content:center}

@media (max-width:1068px){
  .bento .tile-big{min-height:600px}
  .bento .tile-big .tile-title{font-size:44px}
}
@media (max-width:734px){
  .bento{grid-template-columns:1fr;gap:14px;padding:14px}
  .bento .tile-big{min-height:520px;padding-top:36px}
  .bento .tile{min-height:460px}
  .bento .tile-big .tile-title{font-size:32px}
}

/* === BENTO małe kafelki (Rękawek + Sklep AI): spójna pozycja przycisków + jeden kolor === */
/* Wyrównanie w pionie — cta-row do dołu tile-copy o stałej min-wysokości */
.bento .tile:not(.tile-big) .tile-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  min-height:340px;
}
.bento .tile:not(.tile-big) .tile-copy > .cta-row{
  margin-top:auto;
}
/* Kolor przycisków taki sam w obu kafelkach (żółty z czarnym shadow) */
.bento .tile:not(.tile-big) .btn-pill{
  background:var(--yellow);
  color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.bento .tile:not(.tile-big) .btn-pill:hover{
  box-shadow:6px 6px 0 var(--ink);
}
@media (max-width:734px){
  .bento .tile:not(.tile-big) .tile-copy{min-height:auto}
}

/* ===== 3D PAD RING (12 patterns rotating carousel) ===== */
.pad-ring{
  --r:380px;
  --w:220px;
  --h:132px;
  width:100%;
  height:280px;
  perspective:1400px;
  position:relative;
  margin-bottom:-30px;
}
.pad-ring-inner{
  position:absolute;
  width:var(--w);height:var(--h);
  top:50%;left:50%;
  margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform-style:preserve-3d;
  animation:ring-rotate 28s linear infinite;
  will-change:transform;
}
/* Each pad has its own shake — unique prime-coprime timing per card so they NEVER sync.
   Both rings (12 + 8 cards) covered. */
.pad-ring-card{animation:card-shake 4.3s ease-in-out infinite}
.pad-ring-card:nth-child(1) {animation-duration:4.3s;animation-delay:-0.2s}
.pad-ring-card:nth-child(2) {animation-duration:5.1s;animation-delay:-1.7s}
.pad-ring-card:nth-child(3) {animation-duration:3.7s;animation-delay:-3.4s}
.pad-ring-card:nth-child(4) {animation-duration:5.9s;animation-delay:-2.1s}
.pad-ring-card:nth-child(5) {animation-duration:4.7s;animation-delay:-0.9s}
.pad-ring-card:nth-child(6) {animation-duration:6.3s;animation-delay:-2.8s}
.pad-ring-card:nth-child(7) {animation-duration:3.9s;animation-delay:-1.4s}
.pad-ring-card:nth-child(8) {animation-duration:5.3s;animation-delay:-4.2s}
.pad-ring-card:nth-child(9) {animation-duration:4.1s;animation-delay:-2.6s}
.pad-ring-card:nth-child(10){animation-duration:5.7s;animation-delay:-0.6s}
.pad-ring-card:nth-child(11){animation-duration:4.5s;animation-delay:-3.1s}
.pad-ring-card:nth-child(12){animation-duration:6.1s;animation-delay:-1.9s}

@keyframes card-shake{
  0%   {translate:0 0;     rotate:0deg;  scale:1}
  14%  {translate:2px -3px;rotate:.9deg; scale:1.02}
  28%  {translate:-2px 1px;rotate:-.7deg;scale:1}
  42%  {translate:1px 3px; rotate:.5deg; scale:1.01}
  57%  {translate:-3px -1px;rotate:-.9deg;scale:.99}
  71%  {translate:2px 2px; rotate:.7deg; scale:1.02}
  85%  {translate:-1px -2px;rotate:-.4deg;scale:1}
  100% {translate:0 0;     rotate:0deg;  scale:1}
}

.pad-ring-card{
  position:absolute;inset:0;
  border:2.5px solid var(--ink);
  border-radius:12px;
  overflow:hidden;
  box-shadow:5px 5px 0 var(--ink);
  isolation:isolate;
}
.pad-ring-card::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.18;pointer-events:none;
}
.pad-ring-card::before{
  content:"";position:absolute;
  top:0;left:0;right:0;height:35%;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);
  pointer-events:none;z-index:1;
}
.pad-ring-card .lbl{
  position:absolute;bottom:8px;left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.55);
  color:#fff;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:10px;
  padding:3px 10px;border-radius:999px;
  letter-spacing:.05em;text-transform:uppercase;
  z-index:2;white-space:nowrap;
  border:1px solid rgba(255,255,255,.2);
}

/* Default 12-pad ring (30° apart) */
.pad-ring-card:nth-child(1){transform:rotateY(0deg)   translateZ(var(--r))}
.pad-ring-card:nth-child(2){transform:rotateY(30deg)  translateZ(var(--r))}
.pad-ring-card:nth-child(3){transform:rotateY(60deg)  translateZ(var(--r))}
.pad-ring-card:nth-child(4){transform:rotateY(90deg)  translateZ(var(--r))}
.pad-ring-card:nth-child(5){transform:rotateY(120deg) translateZ(var(--r))}
.pad-ring-card:nth-child(6){transform:rotateY(150deg) translateZ(var(--r))}
.pad-ring-card:nth-child(7){transform:rotateY(180deg) translateZ(var(--r))}
.pad-ring-card:nth-child(8){transform:rotateY(210deg) translateZ(var(--r))}
.pad-ring-card:nth-child(9){transform:rotateY(240deg) translateZ(var(--r))}
.pad-ring-card:nth-child(10){transform:rotateY(270deg) translateZ(var(--r))}
.pad-ring-card:nth-child(11){transform:rotateY(300deg) translateZ(var(--r))}
.pad-ring-card:nth-child(12){transform:rotateY(330deg) translateZ(var(--r))}

/* 8-pad ring variant (45° apart — wider spacing, looks airier) */
.pad-ring-8 .pad-ring-card:nth-child(1){transform:rotateY(0deg)   translateZ(var(--r))}
.pad-ring-8 .pad-ring-card:nth-child(2){transform:rotateY(45deg)  translateZ(var(--r))}
.pad-ring-8 .pad-ring-card:nth-child(3){transform:rotateY(90deg)  translateZ(var(--r))}
.pad-ring-8 .pad-ring-card:nth-child(4){transform:rotateY(135deg) translateZ(var(--r))}
.pad-ring-8 .pad-ring-card:nth-child(5){transform:rotateY(180deg) translateZ(var(--r))}
.pad-ring-8 .pad-ring-card:nth-child(6){transform:rotateY(225deg) translateZ(var(--r))}
.pad-ring-8 .pad-ring-card:nth-child(7){transform:rotateY(270deg) translateZ(var(--r))}
.pad-ring-8 .pad-ring-card:nth-child(8){transform:rotateY(315deg) translateZ(var(--r))}

/* Floating ring — Y spins continuously, but tilt + bob oscillate organically.
   2 wobble cycles per full rotation. */
@keyframes ring-rotate{
  0%    {transform:rotateY(0deg)    rotateX(14deg) rotateZ(-2deg) translateY(0)}
  12.5% {transform:rotateY(45deg)   rotateX(18deg) rotateZ(2deg)  translateY(-7px)}
  25%   {transform:rotateY(90deg)   rotateX(14deg) rotateZ(-1deg) translateY(0)}
  37.5% {transform:rotateY(135deg)  rotateX(10deg) rotateZ(-4deg) translateY(6px)}
  50%   {transform:rotateY(180deg)  rotateX(13deg) rotateZ(-1deg) translateY(0)}
  62.5% {transform:rotateY(225deg)  rotateX(17deg) rotateZ(3deg)  translateY(-7px)}
  75%   {transform:rotateY(270deg)  rotateX(14deg) rotateZ(0deg)  translateY(0)}
  87.5% {transform:rotateY(315deg)  rotateX(11deg) rotateZ(-3deg) translateY(7px)}
  100%  {transform:rotateY(360deg)  rotateX(14deg) rotateZ(-2deg) translateY(0)}
}
@keyframes ring-rotate-rev{
  0%    {transform:rotateY(0deg)    rotateX(13deg) rotateZ(3deg)  translateY(0)}
  12.5% {transform:rotateY(-45deg)  rotateX(17deg) rotateZ(-2deg) translateY(-8px)}
  25%   {transform:rotateY(-90deg)  rotateX(13deg) rotateZ(2deg)  translateY(0)}
  37.5% {transform:rotateY(-135deg) rotateX(10deg) rotateZ(4deg)  translateY(8px)}
  50%   {transform:rotateY(-180deg) rotateX(14deg) rotateZ(1deg)  translateY(0)}
  62.5% {transform:rotateY(-225deg) rotateX(17deg) rotateZ(-3deg) translateY(-8px)}
  75%   {transform:rotateY(-270deg) rotateX(13deg) rotateZ(3deg)  translateY(0)}
  87.5% {transform:rotateY(-315deg) rotateX(11deg) rotateZ(-2deg) translateY(8px)}
  100%  {transform:rotateY(-360deg) rotateX(13deg) rotateZ(3deg)  translateY(0)}
}

.pad-ring.reverse .pad-ring-inner{
  animation-name:ring-rotate-rev;
  animation-duration:34s;
}

@media (max-width:1068px){
  .pad-ring{--r:300px;--w:180px;--h:108px;height:260px}
}
@media (max-width:734px){
  .pad-ring{--r:200px;--w:140px;--h:84px;height:220px}
  .pad-ring-card .lbl{font-size:8px;padding:2px 7px}
}
@media (prefers-reduced-motion:reduce){
  .pad-ring-inner{animation-duration:120s}
}

/* ===== AI BG TILE VARIANT (cosmic gradient) ===== */
.tile.ai-bg{
  background:
    radial-gradient(ellipse at 20% 20%,rgba(167,139,250,.38),transparent 55%),
    radial-gradient(ellipse at 80% 80%,rgba(34,211,238,.32),transparent 55%),
    linear-gradient(135deg,#0A0A18 0%,#1A1838 50%,#0F0A24 100%);
  color:#fff;
}
.tile.ai-bg .tile-title{color:#fff}
.tile.ai-bg .tile-sub,
.tile.ai-bg .tile-sub--muted{color:rgba(245,243,238,.72)}
.tile.ai-bg .eyebrow{
  background:linear-gradient(90deg,#ff6ac1 0%,#a06bff 50%,#5fc8ff 100%);
  color:#fff;border-color:#fff;
  box-shadow:2px 2px 0 #fff;
}
.tile.ai-bg .btn-pill{
  background:linear-gradient(135deg,#ff6ac1 0%,#a06bff 50%,#5fc8ff 100%);
  color:#fff;border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.tile.ai-bg .btn-pill:hover{box-shadow:6px 6px 0 var(--ink)}
.tile.ai-bg .btn-link{color:#fff;border-bottom-color:#fff}

/* ===== PAGE HERO (subpages) ===== */
.page-hero{
  text-align:center;
  padding:80px 24px 40px;
  background:var(--bg);
}
.page-hero h1{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  font-size:clamp(40px,8vw,108px);
  line-height:.92;letter-spacing:-.04em;
  text-transform:uppercase;color:var(--ink);
}
.page-hero .lead{
  font-size:clamp(15px,1.3vw,19px);
  color:var(--ink-mute);
  margin-top:18px;max-width:680px;
  margin-left:auto;margin-right:auto;
  line-height:1.5;font-weight:500;
}

/* ===== PRODUCT GRID (wzory.html) ===== */
.product-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--gap);
  padding:0 var(--gap) var(--gap);
  max-width:1280px;margin:0 auto;
}
.product-card{
  background:#fff;
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:8px 8px 0 var(--ink);
  padding:32px 32px 36px;
  cursor:pointer;text-align:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.product-card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--ink)}
.product-card:nth-child(3n){background:var(--mint)}
.product-card:nth-child(3n+1){background:var(--cream)}
.product-card:nth-child(3n+2){background:var(--pink-soft)}
.product-card .pad{
  width:100%;aspect-ratio:9/5;
  border:3px solid var(--ink);border-radius:16px;
  margin-bottom:24px;position:relative;overflow:hidden;
  box-shadow:6px 6px 0 var(--ink);
  isolation:isolate;
}
.product-card .pad::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.18;z-index:1;
}
.product-card .pad::before{
  content:"";position:absolute;inset:0;height:35%;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);
  z-index:1;
}
.product-card .badge{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--yellow);color:var(--ink);
  border:2.5px solid var(--ink);
  padding:6px 13px;border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;
  box-shadow:2px 2px 0 var(--ink);
}
.product-card .badge.new{background:var(--pink);color:#fff}
.product-card .badge.gold{background:var(--purple);color:#fff}
.product-card .name{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:clamp(24px,2.4vw,34px);
  letter-spacing:-.02em;text-transform:uppercase;
  margin-bottom:6px;
}
.product-card .price{
  font-size:15px;color:var(--ink-mute);font-weight:700;
}

@media (max-width:1068px){.product-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media (max-width:734px){
  .product-grid{grid-template-columns:1fr;gap:16px}
  .product-card{padding:22px 22px 26px}
  .product-card .pad{margin-bottom:18px}
}

/* ===== MODAL (PDP) ===== */
.modal-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(10,10,20,.78);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:24px;
}
.modal-overlay.show{display:flex}
.modal{
  background:var(--bg);
  border:3px solid var(--ink);
  border-radius:28px;
  box-shadow:8px 8px 0 var(--ink);
  width:100%;max-width:1120px;
  max-height:92vh;overflow:auto;
  display:grid;grid-template-columns:1.55fr 1fr;
}
.modal-visual{
  background:var(--bg-soft);
  padding:24px;
  display:flex;align-items:center;justify-content:center;
  border-right:3px solid var(--ink);
}
.modal-visual .pad{
  width:100%;aspect-ratio:5/3;
  border:3px solid var(--ink);border-radius:14px;
  position:relative;overflow:hidden;
  box-shadow:5px 5px 0 var(--ink);
  isolation:isolate;
}
.modal-visual .pad::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.18;z-index:1;
}
.modal-body{padding:36px 32px;position:relative}
.modal-close{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;
  border:2.5px solid var(--ink);border-radius:50%;
  background:var(--bg);
  font-size:14px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:2px 2px 0 var(--ink);
  transition:transform .2s,background .2s;
}
.modal-close:hover{transform:rotate(90deg);background:var(--yellow)}
.modal h2{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:28px;
  letter-spacing:-.02em;text-transform:uppercase;
  line-height:.95;margin-bottom:8px;
}
.modal .price{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:20px;
  margin-bottom:18px;
}
.modal .price small{
  color:var(--ink-mute);font-size:13px;
  font-weight:600;margin-left:6px;
}

.size-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.size-opt{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;
  background:#fff;
  border:2.5px solid var(--ink);border-radius:12px;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:transform .15s,background .15s,box-shadow .15s;
  box-shadow:2px 2px 0 transparent;
  width:100%;
}
.size-opt:hover{background:var(--bg-soft);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.size-opt.sel{
  background:var(--yellow);
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 var(--ink);
}
.size-opt .sz{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:16px;
}
.size-opt .sd{
  font-size:11px;color:var(--ink-mute);font-weight:600;margin-left:8px;
}
.size-opt .pp{
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:15px;
}

.modal .trust{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:14px;
}
.modal .trust span{
  font-family:'Archivo',sans-serif;
  font-weight:700;font-size:10px;
  padding:4px 9px;background:var(--bg);
  border:1.5px solid var(--ink);border-radius:999px;
  letter-spacing:.05em;text-transform:uppercase;
  box-shadow:1.5px 1.5px 0 var(--ink);
}
.modal .delivery{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  background:var(--mint);
  border:2px solid var(--ink);border-radius:10px;
  font-size:13px;font-weight:500;
  margin-bottom:14px;
  box-shadow:2px 2px 0 var(--ink);
}
.modal .delivery b{
  font-family:'Archivo',sans-serif;
  font-weight:900;letter-spacing:-.01em;
}

@media (max-width:734px){
  .modal{grid-template-columns:1fr;max-height:96vh}
  .modal-visual{border-right:0;border-bottom:3px solid var(--ink)}
}

/* ===== CART DRAWER ===== */
.cart-drawer{
  position:fixed;top:0;right:-440px;
  width:420px;max-width:100vw;height:100vh;
  background:var(--bg);
  border-left:3px solid var(--ink);
  z-index:10001;
  transition:right .35s var(--ease-smooth);
  display:flex;flex-direction:column;
}
.cart-drawer.open{right:0}
.cart-overlay{
  position:fixed;inset:0;background:rgba(10,10,20,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  z-index:10000;opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.cart-overlay.show{opacity:1;pointer-events:auto}
.cart-head{
  padding:22px 26px;
  border-bottom:2.5px solid var(--ink);
  background:var(--bg-soft);
  display:flex;justify-content:space-between;align-items:center;
}
.cart-head h3{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:22px;
  letter-spacing:-.02em;text-transform:uppercase;
}
.cart-head button{
  width:38px;height:38px;border-radius:50%;
  background:#fff;color:var(--ink);
  border:2.5px solid var(--ink);
  font-size:14px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  box-shadow:2px 2px 0 var(--ink);
  cursor:pointer;transition:transform .2s;
}
.cart-head button:hover{transform:rotate(90deg)}

.cart-body{flex:1;overflow:auto;padding:18px 26px}
.cart-empty{
  text-align:center;color:var(--ink-mute);
  padding:60px 20px;font-size:14px;
}
.cart-empty a{
  color:var(--ink);font-weight:700;
  text-decoration:underline;
}
.cart-item{
  display:grid;grid-template-columns:64px 1fr auto;
  gap:14px;padding:14px 0;
  border-bottom:2px dashed var(--ink);
  align-items:center;
}
.cart-item:last-child{border-bottom:none}
.cart-item .pad{
  width:64px;aspect-ratio:5/3;
  border:2px solid var(--ink);border-radius:8px;
  position:relative;overflow:hidden;
  box-shadow:2px 2px 0 var(--ink);
  isolation:isolate;
}
.cart-item .pad::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.18;
}
.cart-item .name{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:13px;
  letter-spacing:-.01em;text-transform:uppercase;
  line-height:1.1;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cart-item .meta{
  font-size:11px;color:var(--ink-mute);font-weight:500;
  margin-bottom:4px;
}
.cart-item .price{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:14px;
  align-self:start;text-align:right;
}
.cart-item .rm{
  display:inline-block;
  font-size:11px;color:var(--pink-dark);
  text-decoration:underline;font-weight:600;
  cursor:pointer;
  margin-top:4px;
}

.cart-foot{
  border-top:2.5px solid var(--ink);
  padding:18px 26px 22px;
  background:var(--bg-soft);
}
.ship-progress{
  margin-bottom:16px;
  padding:12px 14px;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:10px;
  box-shadow:2px 2px 0 var(--ink);
}
.ship-progress .pp-text{
  font-size:12px;color:var(--ink-mute);
  margin-bottom:8px;font-weight:600;
}
.ship-progress .pp-text b{
  font-family:'Archivo',sans-serif;
  color:var(--ink);font-weight:900;
}
.ship-bar{
  height:8px;background:rgba(26,26,26,.1);
  border:1.5px solid var(--ink);border-radius:999px;
  overflow:hidden;
}
.ship-bar > div{
  height:100%;
  background:linear-gradient(90deg,var(--yellow),var(--teal));
  transition:width .6s var(--ease-smooth);
  border-right:1.5px solid var(--ink);
}
.cart-totals{
  display:flex;justify-content:space-between;
  font-size:14px;margin-bottom:8px;
}
.cart-totals .lbl{
  color:var(--ink-mute);
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
}
.cart-totals .val{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:16px;
  letter-spacing:-.02em;
}
.cart-totals[style*="font-size:18px"] .val{font-size:24px}
.cart-checkout{
  width:100%;margin-top:6px;
  background:var(--red);color:#fff;
  border:3px solid var(--ink);border-radius:999px;
  padding:16px;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .15s,box-shadow .15s;
}
.cart-checkout:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}

/* Upsell card */
.upsell{
  display:grid;grid-template-columns:56px 1fr auto;
  gap:12px;align-items:center;
  padding:14px;background:var(--cream);
  border:2.5px solid var(--ink);border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);
  margin-bottom:14px;
}
.upsell .pad{
  width:56px;aspect-ratio:5/3;
  border:2px solid var(--ink);border-radius:6px;
  position:relative;overflow:hidden;
}
.upsell .name{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:12px;
  letter-spacing:-.01em;text-transform:uppercase;
}
.upsell .desc{
  font-size:10px;color:var(--ink-mute);font-weight:600;
}
.upsell .add{
  background:var(--red);color:#fff;
  border:2px solid var(--ink);
  border-radius:999px;padding:6px 14px;
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;
  box-shadow:2px 2px 0 var(--ink);
  cursor:pointer;
}
.upsell .add:hover{box-shadow:3px 3px 0 var(--ink)}

/* ===== AI / KREATOR DARK STAGE ===== */
.ai-stage,
.kreator-stage{
  background:
    radial-gradient(ellipse at 20% 20%,rgba(167,139,250,.38),transparent 55%),
    radial-gradient(ellipse at 80% 80%,rgba(34,211,238,.32),transparent 55%),
    linear-gradient(135deg,#0A0A18 0%,#1A1838 50%,#0F0A24 100%);
  color:#fff;
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:6px 6px 0 var(--ink);
  margin:var(--gap);
  padding:50px 32px;
  position:relative;overflow:hidden;
  isolation:isolate;
}

/* Interactive dots canvas + soft drifting glows behind kreator-stage UI */
.kreator-shader{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;
}
.kreator-shader canvas.interactive-dots,
.kreator-shader canvas.fluid-particles,
.kreator-shader canvas.webgl-shader{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;
}
/* Dim veil over the shader so UI / text reads cleanly on top */
.kreator-shader .ks-dim{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(10,10,24,.35) 0%, rgba(10,10,24,.78) 100%),
    rgba(10,10,24,.32);
  pointer-events:none;
  mix-blend-mode:multiply;
}
.kreator-shader .ks-glow{
  position:absolute;width:70%;height:70%;
  border-radius:50%;
  filter:blur(90px);
  opacity:.45;
  mix-blend-mode:screen;
}
.kreator-shader .ks-glow--a{
  top:-15%;left:-15%;
  background:radial-gradient(circle,#a06bff 0%,transparent 70%);
  animation:ks-drift-a 36s ease-in-out infinite;
}
.kreator-shader .ks-glow--b{
  bottom:-15%;right:-15%;
  background:radial-gradient(circle,#5fc8ff 0%,transparent 70%);
  animation:ks-drift-b 44s ease-in-out infinite;
}
@keyframes ks-drift-a{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(15%,20%) scale(1.12)}
}
@keyframes ks-drift-b{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-15%,-18%) scale(1.15)}
}
@media (prefers-reduced-motion:reduce){
  .kreator-shader .ks-glow{animation:none}
}
.kreator-stage > :not(.kreator-shader){position:relative;z-index:1}
.ai-stage{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
.ai-stage h2{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  font-size:clamp(36px,5vw,72px);
  line-height:.92;letter-spacing:-.03em;
  text-transform:uppercase;
}
.ai-stage h2 .grad{
  background:linear-gradient(90deg,#ff6ac1 0%,#a06bff 50%,#5fc8ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ai-stage .lead,
.kreator-stage .lead{
  color:rgba(255,255,255,.7);font-size:17px;margin-top:14px;
}

.ai-input{
  width:100%;
  background:rgba(255,255,255,.06);
  border:2.5px solid rgba(255,255,255,.18);
  border-radius:14px;padding:14px 18px;
  color:#fff;font-family:'DM Sans',sans-serif;
  font-size:14px;resize:none;min-height:90px;
  margin-top:20px;
  transition:border-color .2s,box-shadow .2s;
}
.ai-input:focus{
  outline:0;border-color:#a06bff;
  box-shadow:0 0 0 3px rgba(160,107,255,.18);
}
.ai-input::placeholder{color:rgba(255,255,255,.4)}

.ai-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ai-cat{
  background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.18);
  color:#fff;
  padding:8px 14px;border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:700;font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.ai-cat:hover{background:rgba(167,139,250,.15);border-color:#a06bff}

.ai-actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.ai-gen{
  background:linear-gradient(135deg,#ff6ac1,#a06bff,#5fc8ff);
  color:#fff;border:2.5px solid var(--ink);
  border-radius:999px;padding:14px 24px;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;
  box-shadow:4px 4px 0 var(--ink);
  cursor:pointer;
  transition:transform .15s,box-shadow .15s;
}
.ai-gen:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}

.ai-stage .btn-pill.ghost{
  background:transparent;color:#fff;
  border-color:#fff;box-shadow:4px 4px 0 #fff;
}
.ai-stage .btn-pill.ghost:hover{box-shadow:6px 6px 0 #fff}

.ai-preview,
.kreator-preview{
  aspect-ratio:5/3;
  border:3px solid var(--ink);border-radius:14px;
  position:relative;overflow:hidden;
  box-shadow:5px 5px 0 rgba(0,0,0,.5);
  background:#1a1a1c;
}
.ai-preview::after,
.kreator-preview::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.18;pointer-events:none;
}
.kreator-preview img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.kreator-preview.empty::before{
  content:"Wgraj zdjęcie żeby zobaczyć podgląd 1:1";
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);
  font-family:'Archivo',sans-serif;
  font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;
  text-align:center;padding:0 20px;
}

/* Wymiary podkładki w cm wokół preview (góra = szer., prawo = wys.) */
.kp-with-dims{
  position:relative;
  padding-top:22px;
  padding-right:34px;
}
.kp-dim-w,
.kp-dim-h{
  position:absolute;
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  gap:8px;
}
.kp-dim-w{
  top:0;left:0;right:34px;height:22px;
}
.kp-dim-w::before,
.kp-dim-w::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.22) 100%);
}
.kp-dim-w::after{
  background:linear-gradient(90deg,rgba(255,255,255,.22) 0%,transparent 100%);
}
.kp-dim-h{
  top:22px;bottom:0;right:0;width:34px;
  flex-direction:column;
}
.kp-dim-h::before,
.kp-dim-h::after{
  content:"";width:1px;flex:1;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.22) 100%);
}
.kp-dim-h::after{
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,transparent 100%);
}
.kp-dim-h > span{
  display:inline-block;
  transform:rotate(-90deg);
  white-space:nowrap;
}

/* AI preview stack — cycling sample pads with hint chip */
.kreator-preview--ai{
  background:#000;
  aspect-ratio:var(--ai-ar, 2/1);
  transition:aspect-ratio .25s ease;
  isolation:isolate;
  cursor:zoom-in;
}
.up-preview:not(.empty){cursor:zoom-in}

/* Magnifier lens — hover na AI/upload preview pokazuje powiększony fragment */
.kp-lens,
.up-lens{
  position:absolute;
  top:0;left:0;
  width:200px;height:200px;
  border-radius:50%;
  border:3px solid #fff;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.55),
    0 14px 32px rgba(0,0,0,.55);
  background:#000;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:5;
  transform:translate(-50%,-50%) scale(.55);
  opacity:0;
  transition:opacity .15s ease,transform .18s cubic-bezier(.2,.9,.4,1.2);
  will-change:transform,background-position;
}
.kp-lens.is-on,
.up-lens.is-on{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.kp-lens::after,
.up-lens::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);
  pointer-events:none;
}
.kp-stack{
  position:absolute;inset:0;z-index:1;
}
.kp-stack .kp-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity .55s ease,transform .9s ease;
}
.kp-stack .kp-img.is-on{opacity:1;transform:scale(1)}
.kp-hint{
  position:absolute;left:50%;bottom:14px;z-index:3;
  transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(10,10,16,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:2px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:7px 14px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.04em;color:#fff;text-transform:uppercase;
  white-space:nowrap;max-width:calc(100% - 24px);
  overflow:hidden;text-overflow:ellipsis;
}
.kp-hint b{font-weight:900;color:#FFE34D}
.kp-hint--ok{border-color:#3ee07f;background:rgba(0,40,20,.72)}
.kp-dot{
  width:8px;height:8px;border-radius:50%;
  background:#a06bff;
  box-shadow:0 0 8px rgba(160,107,255,.9);
  animation:kp-pulse 1.4s ease-in-out infinite;
  flex:0 0 auto;
}
.kp-dot--ok{background:#3ee07f;box-shadow:0 0 8px rgba(62,224,127,.9);animation:none}
@keyframes kp-pulse{50%{transform:scale(1.4);opacity:.6}}

/* === Size selector under preview (kreator AI panel) === */
.kp-sizes{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:14px;
}
.kp-size{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 8px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  border:2px solid rgba(255,255,255,.22);
  border-radius:14px;
  color:#fff;
  cursor:pointer;
  transition:transform .15s,background .15s,border-color .15s,box-shadow .15s;
  box-shadow:
    inset 1.5px 1.5px 1px 0 rgba(255,255,255,.35),
    inset -1px -1px 1px 1px rgba(255,255,255,.18);
  font-family:'Inter',sans-serif;
  text-align:center;
}
.kp-size:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.4);
  transform:translate(-1px,-1px);
}
.kp-size.sel{
  background:linear-gradient(135deg,#a06bff,#5fc8ff);
  border-color:#fff;
  box-shadow:
    0 4px 18px rgba(160,107,255,.45),
    inset 1.5px 1.5px 1px 0 rgba(255,255,255,.55),
    inset -1px -1px 1px 1px rgba(255,255,255,.25);
}
.kp-size-key{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:18px;letter-spacing:-.01em;
}
.kp-size-dim{
  font-size:10px;font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.65);
}
.kp-size.sel .kp-size-dim{color:rgba(255,255,255,.85)}
.kp-size-price{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:13px;letter-spacing:-.01em;
  color:#FFE34D;
  margin-top:2px;
}
.kp-size.sel .kp-size-price{color:#fff}

@media (max-width:560px){
  .kp-sizes{grid-template-columns:repeat(2,1fr)}
}

/* generating flash on preview */
.kreator-preview--ai.is-generating::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  animation:kp-flash 1s ease-out;
}
@keyframes kp-flash{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(110%)}
}

@media (max-width:900px){
  .ai-stage{grid-template-columns:1fr;gap:30px;padding:36px 22px}
}

/* ===== KREATOR (tabs + upload) ===== */
.kreator-tabs{
  display:flex;gap:6px;
  background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.18);
  border-radius:999px;padding:4px;
  width:fit-content;margin:0 auto 28px;
}
.kreator-tab{
  background:transparent;color:rgba(255,255,255,.7);
  padding:8px 22px;border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;
}
.kreator-tab.active{background:#fff;color:var(--ink)}

/* Stack obu paneli w tej samej komórce gridu — parent bierze wysokość większego, brak skoków przy przełączaniu */
.kreator-panels{
  display:grid;
  grid-template-areas:"stack";
  max-width:980px;
  margin:0 auto;
}
.kreator-panel{
  grid-area:stack;
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease;
}
.kreator-stage{position:relative}
.kreator-panel.active{
  opacity:1;visibility:visible;pointer-events:auto;
}
@media (max-width:900px){
  .kreator-panel{grid-template-columns:1fr;gap:24px}
}

/* Upload zone — dark glass with clean dashed border (label is inline by default → make it block) */
.upload-zone{
  display:block;
  width:100%;
  margin-top:18px;
  border:2.5px dashed rgba(255,255,255,.5);
  border-radius:18px;
  padding:54px 24px;
  text-align:center;cursor:pointer;
  background:rgba(10,10,24,.55);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:
    0 8px 26px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.10);
  transition:border-color .2s,background .2s,transform .15s,box-shadow .2s;
  box-sizing:border-box;
}
.upload-zone:hover,.upload-zone.dragover{
  border-color:#a06bff;
  background:rgba(160,107,255,.20);
  transform:translate(-1px,-1px);
  box-shadow:
    0 0 0 4px rgba(160,107,255,.20),
    0 12px 32px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.18);
}
.upload-zone .icon{
  font-size:48px;margin-bottom:14px;
  display:inline-block;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
}
.upload-zone .title{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:16px;
  letter-spacing:.04em;text-transform:uppercase;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.upload-zone .desc{
  font-size:13px;color:rgba(255,255,255,.78);
  margin-top:8px;font-weight:500;
}
.upload-zone input{display:none}
.upload-tips{
  display:flex;flex-wrap:wrap;gap:14px;
  font-size:11px;color:rgba(255,255,255,.78);
  font-family:'Archivo',sans-serif;
  font-weight:700;letter-spacing:.04em;
  margin-top:16px;
}

/* Upload notes — wysyłka / zwroty */
.upload-notes{
  display:flex;flex-direction:column;gap:10px;
  margin-top:18px;
}
.upload-note{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.12);
  border-radius:14px;
  font-size:12.5px;line-height:1.5;
  color:rgba(255,255,255,.85);
}
.upload-note b{color:#fff;font-weight:700;letter-spacing:.005em}
.upload-note > div > span{color:rgba(255,255,255,.65);font-size:12px}
.upload-note .un-ico{
  font-size:18px;line-height:1;
  flex:0 0 auto;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}

/* Upload preview frame — dynamic aspect ratio per selected size */
.up-preview{
  aspect-ratio:var(--up-ar, 2/1);
  transition:aspect-ratio .25s ease;
  /* layered halo so preview doesn't blend with stage bg */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 0 0 5px rgba(95,200,255,.18),
    0 0 0 6px rgba(160,107,255,.22),
    5px 5px 0 rgba(0,0,0,.5),
    0 18px 48px rgba(95,200,255,.10);
}

/* === STORM-STYLE BLEED ZONE — czerwone "pole burzy" w skos, animowane === */
.up-preview::before{
  content:"";
  position:absolute;inset:0;
  z-index:2; /* nad obrazem (z=1), pod ramką safe-zone (z=3) i lupą (z=5) */
  background:
    repeating-linear-gradient(45deg,
      rgba(255,40,40,.42) 0px,
      rgba(255,40,40,.42) 5px,
      transparent 5px,
      transparent 14px),
    rgba(225,29,46,.20);
  /* dziura w środku = bezpieczna strefa (3.5% inset, jak .up-safe) */
  clip-path:polygon(
    0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%,
    3.5% 3.5%, 3.5% 96.5%, 96.5% 96.5%, 96.5% 3.5%, 3.5% 3.5%
  );
  -webkit-clip-path:polygon(
    0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%,
    3.5% 3.5%, 3.5% 96.5%, 96.5% 96.5%, 96.5% 3.5%, 3.5% 3.5%
  );
  animation:up-storm-slide 1.6s linear infinite;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s;
}
.up-preview:not(.empty)::before{opacity:1}
.up-preview.is-grabbing::before{opacity:.45}
@keyframes up-storm-slide{
  from{background-position:0 0, 0 0}
  to{background-position:20px 20px, 0 0}
}
@media (prefers-reduced-motion:reduce){
  .up-preview::before{animation:none}
}

/* Bezpieczna strefa — biała przerywana ramka, kontrast do czerwonej burzy */
.up-safe{
  position:absolute;inset:3.5%;z-index:3;
  border:1.5px dashed rgba(255,255,255,.88);
  border-radius:4px;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 0 14px rgba(255,255,255,.22);
}
.up-preview:not(.empty) .up-safe{opacity:1}
.up-preview.is-grabbing .up-safe{opacity:.55}
.up-safe-tag{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  background:rgba(20,0,4,.78);
  color:#fff;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.up-preview.empty .up-empty-hint{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);
  font-family:'Archivo',sans-serif;
  font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;
  text-align:center;padding:0 20px;
}
.up-preview:not(.empty) .up-empty-hint{display:none}
.up-preview.empty::before{content:none}
.up-frame{
  position:absolute;inset:0;z-index:1;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
}
.up-frame.is-grabbing{cursor:grabbing}
.up-preview.empty .up-frame{cursor:default}
.up-img{
  position:absolute;left:50%;top:50%;
  width:auto;height:auto;
  max-width:none;max-height:none;
  transform-origin:center center;
  user-select:none;-webkit-user-drag:none;
  pointer-events:none;
  will-change:transform;
}
.up-drag-hint{
  position:absolute;left:50%;bottom:12px;z-index:3;
  transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(10,10,16,.75);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:6px 12px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.05em;color:#fff;text-transform:uppercase;
  white-space:nowrap;
  opacity:0;transition:opacity .25s;
  pointer-events:none;
}
.up-preview:not(.empty) .up-drag-hint{opacity:1}
.up-preview.is-grabbing .up-drag-hint{opacity:0}

/* Upload calibration controls */
.up-controls{
  margin-top:14px;
  display:flex;flex-direction:column;gap:10px;
  padding:14px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.14);
  border-radius:14px;
}
.up-controls[hidden]{display:none}
.up-ctrl{display:flex;flex-direction:column;gap:6px}
.up-ctrl-row{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Archivo',sans-serif;
  font-weight:700;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.up-ctrl-row output{
  color:#5fc8ff;font-weight:900;font-size:12px;letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.up-ctrl input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;
  background:linear-gradient(90deg,rgba(160,107,255,.6),rgba(95,200,255,.6));
  border-radius:999px;
  outline:none;
  cursor:pointer;
}
.up-ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:#fff;
  border:2px solid #a06bff;
  box-shadow:0 2px 8px rgba(160,107,255,.5);
  cursor:pointer;
  transition:transform .12s;
}
.up-ctrl input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.up-ctrl input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid #a06bff;
  box-shadow:0 2px 8px rgba(160,107,255,.5);
  cursor:pointer;
}
.up-reset{
  align-self:flex-start;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.2);
  color:#fff;
  padding:7px 14px;border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:700;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.up-reset:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.36)}

/* ===== WALL OF CUSTOMS — realne zamówienia klientów ===== */
.customs-wall{
  padding:80px 8px 8px;
}
.customs-head{
  text-align:center;
  max-width:780px;
  margin:0 auto 36px;
}
.customs-head h2{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  font-size:clamp(36px,5vw,64px);
  letter-spacing:-.03em;
  text-transform:uppercase;
  line-height:.95;
}
.customs-sub{
  color:#6B6B6B;
  font-size:16px;
  margin-top:16px;
  font-weight:500;
}
.customs-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:1200px;
  margin:0 auto;
  padding:0 8px;
}
@media (max-width:900px){.customs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.customs-grid{grid-template-columns:1fr}}
.custom-card{
  border:3px solid var(--ink);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .18s,box-shadow .18s;
}
.custom-card:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--ink);
}
.custom-pad{
  aspect-ratio:2/1;
  width:100%;
  position:relative;
  overflow:hidden;
  cursor:zoom-in;
}
.custom-pad::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.4'/></svg>");
  mix-blend-mode:overlay;opacity:.18;
  pointer-events:none;
}
.custom-tag{
  position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.custom-meta{
  padding:14px 18px;
  display:flex;flex-direction:column;gap:3px;
  border-top:2px solid var(--ink);
  background:#fff;
}
.custom-author{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  font-size:14px;
  letter-spacing:-.01em;
  color:var(--ink);
}
.custom-cap{
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  color:#6B6B6B;
}
.customs-foot{
  text-align:center;
  margin-top:30px;
  font-size:13px;
  color:#6B6B6B;
  font-family:'DM Sans',sans-serif;
}
.customs-foot b{color:var(--ink);font-weight:700}

/* ===== WZORY MANIFESTO — callout "Zaprojektowane przez ludzi" ===== */
.wzory-manifesto{
  margin:var(--gap);
  padding:80px 32px;
  background:#FFE34D;
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:6px 6px 0 var(--ink);
  position:relative;overflow:hidden;
}
.wzory-manifesto::before{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.4'/></svg>");
  mix-blend-mode:multiply;opacity:.08;pointer-events:none;
}
.wzory-manifesto-inner{
  max-width:780px;margin:0 auto;text-align:center;
  position:relative;z-index:1;
}
.wzory-manifesto h2{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  font-size:clamp(40px,6vw,80px);
  letter-spacing:-.03em;
  text-transform:uppercase;
  line-height:.92;
  color:var(--ink);
  margin-top:18px;
}
.wzory-manifesto p{
  margin-top:22px;
  font-family:'DM Sans',sans-serif;
  font-size:18px;
  line-height:1.55;
  color:var(--ink);
  font-weight:500;
}
.wzory-manifesto p b{font-weight:800}
.wzory-manifesto a{
  color:var(--ink);
  font-weight:800;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.wzory-manifesto a:hover{text-decoration-thickness:3px}

/* ===== FORTNITE-STYLE SHOP ===== */
.shop-banner{
  background:
    radial-gradient(ellipse at 20% 30%,rgba(255,180,255,.28),transparent 50%),
    radial-gradient(ellipse at 80% 70%,rgba(120,200,255,.28),transparent 50%),
    linear-gradient(135deg,#1a0d2e,#312e81 50%,#0d1830);
  color:#fff;
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:6px 6px 0 var(--ink);
  margin:var(--gap);
  padding:50px 24px;text-align:center;
  position:relative;overflow:hidden;
}
.shop-banner h1{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:clamp(36px,6vw,80px);
  line-height:.92;letter-spacing:-.03em;
  text-transform:uppercase;
}
.shop-banner h1 .grad{
  background:linear-gradient(90deg,#ff6ac1 0%,#a06bff 50%,#5fc8ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.shop-banner .lead{
  font-size:17px;color:rgba(255,255,255,.7);
  margin-top:14px;
}

.shop-countdown{
  margin-top:30px;display:inline-flex;align-items:center;gap:18px;
  background:rgba(255,255,255,.06);
  border:2.5px solid rgba(255,255,255,.18);
  padding:14px 28px;border-radius:14px;
}
.shop-countdown .lbl{
  font-family:'Archivo',sans-serif;
  font-weight:700;font-size:11px;
  color:rgba(255,255,255,.6);
  letter-spacing:.1em;text-transform:uppercase;
}
.shop-countdown .val{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:34px;
  letter-spacing:-.02em;color:#fff;
  font-variant-numeric:tabular-nums;
}
@media (max-width:734px){
  .shop-banner h1{font-size:36px}
  .shop-countdown .val{font-size:24px}
}

.shop-section{padding:30px var(--gap) 14px}
.shop-section h2{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:32px;
  letter-spacing:-.02em;text-transform:uppercase;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:18px;padding:0 6px;
}
.shop-section .tag{
  font-family:'DM Sans',sans-serif;
  font-weight:600;font-size:12px;
  background:var(--bg-soft);color:var(--ink-mute);
  border:1.5px solid var(--ink);
  padding:4px 10px;border-radius:999px;
  text-transform:none;letter-spacing:.02em;
}

.shop-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--gap);
}
@media (max-width:1068px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:734px){.shop-grid{grid-template-columns:repeat(2,1fr)}}

.shop-card{
  background:#fff;
  border:2.5px solid var(--ink);
  border-radius:18px;
  box-shadow:4px 4px 0 var(--ink);
  padding:16px;cursor:pointer;
  position:relative;
  transition:transform .25s,box-shadow .25s;
  display:flex;flex-direction:column;
}
.shop-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.shop-card .pad{
  width:100%;aspect-ratio:5/3;
  border:2.5px solid var(--ink);border-radius:10px;
  position:relative;overflow:hidden;isolation:isolate;
  margin-bottom:12px;
  box-shadow:3px 3px 0 var(--ink);
}
.shop-card .pad::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.18;z-index:1;
}
.shop-card .rarity{
  position:absolute;top:8px;left:8px;
  z-index:2;
  padding:4px 10px;border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;
  border:2px solid var(--ink);
  box-shadow:1.5px 1.5px 0 var(--ink);
}
.shop-card .rarity.legendary{background:var(--yellow);color:var(--ink)}
.shop-card .rarity.epic{background:var(--purple);color:#fff}
.shop-card .rarity.rare{background:var(--teal);color:var(--ink)}
.shop-card .rarity.common{background:#fff;color:var(--ink)}

.shop-card.legendary{background:linear-gradient(180deg,#FFFEF5,#FFF6D7)}
.shop-card.legendary{box-shadow:4px 4px 0 var(--yellow-dark)}
.shop-card.epic{background:linear-gradient(180deg,#FAF7FF,#EDE5FA)}
.shop-card.epic{box-shadow:4px 4px 0 var(--purple)}
.shop-card.rare{background:linear-gradient(180deg,#F4FCFA,#DEEFEB)}

.shop-card .name{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:15px;
  letter-spacing:-.02em;text-transform:uppercase;
}
.shop-card .author{
  font-size:11px;color:var(--ink-mute);
  font-weight:600;margin-top:2px;
}
.shop-card .row{
  margin-top:12px;padding-top:12px;
  border-top:2px dashed var(--ink);
  display:flex;justify-content:space-between;align-items:center;
}
.shop-card .price{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:16px;
  letter-spacing:-.02em;
}
.shop-card .buy{
  background:var(--red);color:#fff;
  border:2px solid var(--ink);border-radius:999px;
  padding:6px 14px;
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;box-shadow:2px 2px 0 var(--ink);
  transition:transform .15s,box-shadow .15s;
}
.shop-card .buy:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}

/* ===== KEBCIO SCARCITY ===== */
.scarcity{
  background:#fff;
  border:2.5px solid var(--ink);
  border-radius:18px;
  box-shadow:4px 4px 0 var(--ink);
  padding:18px 22px;margin-top:24px;
}
.dark .scarcity{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);box-shadow:4px 4px 0 var(--yellow)}

.scarcity-head{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;
  font-size:13px;color:var(--ink-mute);
  margin-bottom:10px;font-family:'Archivo',sans-serif;font-weight:700;
}
.dark .scarcity-head{color:rgba(255,255,255,.7)}
.scarcity-head b{
  color:var(--pink-dark);
  font-family:'Archivo',sans-serif;font-weight:900;font-size:16px;
}
.dark .scarcity-head b{color:var(--yellow)}
.scarcity-bar{
  height:10px;
  background:rgba(26,26,26,.08);
  border:2px solid var(--ink);
  border-radius:999px;overflow:hidden;
}
.dark .scarcity-bar{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.scarcity-bar > div{
  height:100%;
  background:linear-gradient(90deg,var(--yellow),var(--pink));
  border-right:1.5px solid var(--ink);
  transition:width .8s var(--ease-smooth);
}
.scarcity-foot{
  display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:8px;
  font-size:11px;color:var(--ink-mute);
  margin-top:10px;font-weight:600;
}
.dark .scarcity-foot{color:rgba(255,255,255,.55)}
.pulse-red{
  display:inline-block;width:8px;height:8px;
  background:#EF4444;border-radius:50%;
  animation:pulse 1.5s ease-out infinite;
  box-shadow:0 0 8px #EF4444;
  margin-right:6px;
}
@keyframes pulse{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:1;transform:scale(1.3)}
}

/* ===== PLANS / PRICING ===== */
.plan-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--gap);padding:0 var(--gap) var(--gap);
  max-width:1200px;margin:0 auto;
}
.plan{
  background:#fff;
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:5px 5px 0 var(--ink);
  padding:36px 28px;
  display:flex;flex-direction:column;
  position:relative;min-height:520px;
  transition:transform .2s,box-shadow .2s;
}
.plan:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.plan.featured{background:var(--yellow)}
.plan.featured::before{
  content:'Bestseller';
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  padding:6px 14px;
  background:var(--ink);color:#fff;
  border:2.5px solid var(--ink);border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  box-shadow:2px 2px 0 var(--ink);
  white-space:nowrap;
}
.plan.kebcio{background:linear-gradient(135deg,#1A1A1A,#2A2A2A);color:#fff}

.plan-name{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:24px;
  letter-spacing:-.02em;text-transform:uppercase;
  line-height:1;margin-bottom:10px;
}
.plan-desc{
  font-size:13px;color:var(--ink-mute);
  font-weight:500;line-height:1.45;min-height:38px;
}
.plan.featured .plan-desc{color:var(--ink);opacity:.7}
.plan.kebcio .plan-desc{color:rgba(255,255,255,.7)}

.plan-price{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:48px;
  letter-spacing:-.03em;line-height:1;
  margin:18px 0 8px;
}
.plan-price small{
  font-size:13px;color:var(--ink-mute);
  font-weight:600;margin-left:6px;
}
.plan.featured .plan-price small{color:var(--ink);opacity:.6}
.plan.kebcio .plan-price small{color:rgba(255,255,255,.55)}

.plan-old{
  font-size:13px;color:var(--ink-dim);
  text-decoration:line-through;font-weight:600;
  margin-bottom:-4px;
}

.plan ul{
  list-style:none;display:flex;flex-direction:column;gap:8px;
  margin:14px 0 26px;flex:1;
}
.plan li{
  font-size:13px;line-height:1.5;
  display:flex;align-items:flex-start;gap:8px;font-weight:500;
}
.plan li::before{content:'✓';color:var(--pink);font-weight:900;flex-shrink:0}
.plan.featured li::before{color:var(--ink)}
.plan.kebcio li::before{color:var(--yellow)}

.plan-cta{margin-top:auto}
.plan-badge{
  position:absolute;top:18px;right:18px;
  background:var(--ink);color:#fff;
  padding:5px 11px;border-radius:999px;
  border:2px solid var(--ink);
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;
  box-shadow:2px 2px 0 var(--ink);
}
.plan.kebcio .plan-badge{background:var(--yellow);color:var(--ink)}

@media (max-width:900px){.plan-grid{grid-template-columns:1fr;max-width:500px}}

/* ===== FAQ ===== */
.faq{
  padding:80px 22px;
  max-width:820px;margin:0 auto;
}
.faq h2{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:clamp(36px,5vw,72px);
  letter-spacing:-.03em;text-transform:uppercase;
  text-align:center;margin-bottom:48px;line-height:.95;
}
.faq h2 .pop{color:var(--purple)}

.faq-item{
  margin-bottom:12px;
  background:#fff;
  border:2.5px solid var(--ink);border-radius:18px;
  box-shadow:3px 3px 0 var(--ink);
  overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.faq-item:has(.faq-q.open){transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}

.faq-q{
  width:100%;padding:20px 24px;
  display:flex;justify-content:space-between;align-items:center;
  text-align:left;cursor:pointer;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:16px;
  letter-spacing:-.01em;color:var(--ink);gap:16px;
}
.faq-q .plus{
  width:32px;height:32px;flex-shrink:0;
  border:2.5px solid var(--ink);border-radius:50%;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:18px;line-height:1;
  transition:transform .3s var(--ease),background .2s;
}
.faq-q.open .plus{transform:rotate(45deg);background:var(--yellow)}

.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .35s var(--ease-smooth);
}
.faq-a.open{max-height:500px}
.faq-a-inner{
  padding:0 24px 22px;
  font-size:14px;line-height:1.6;color:var(--ink);font-weight:500;
}
.faq-a-inner b{font-weight:800}
.faq-a-inner a{color:var(--ink);text-decoration:underline;font-weight:700}

/* ===== HOW IT WORKS ===== */
.how-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
  padding:0 var(--gap) var(--gap);
  max-width:1200px;margin:0 auto;
}
.how-card{
  background:#fff;
  border:2.5px solid var(--ink);
  border-radius:22px;
  box-shadow:4px 4px 0 var(--ink);
  padding:40px 28px;text-align:center;
  min-height:300px;
  display:flex;flex-direction:column;align-items:center;
  position:relative;
  transition:transform .2s,box-shadow .2s;
}
.how-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.how-card:nth-child(1){background:var(--mint)}
.how-card:nth-child(2){background:var(--cream)}
.how-card:nth-child(3){background:var(--pink-soft)}
.how-num{
  width:44px;height:44px;border-radius:50%;
  background:var(--yellow);
  border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:20px;
  margin-bottom:18px;
  box-shadow:2.5px 2.5px 0 var(--ink);
}
.how-card:nth-child(2) .how-num{background:var(--pink);color:#fff}
.how-card:nth-child(3) .how-num{background:var(--teal)}
.how-card h3{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:22px;
  letter-spacing:-.02em;text-transform:uppercase;
  margin-bottom:10px;line-height:1.05;
}
.how-card p{
  font-size:14px;color:var(--ink-mute);
  line-height:1.55;font-weight:500;
}
@media (max-width:900px){.how-grid{grid-template-columns:1fr;max-width:500px}}

/* ===== REVIEWS RAIL ===== */
.reviews-section{
  padding:80px 22px;
  max-width:1280px;margin:0 auto;
}
.reviews-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:20px;
  margin-bottom:32px;
}
.reviews-head h2{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:clamp(34px,4.5vw,56px);
  line-height:.95;letter-spacing:-.03em;text-transform:uppercase;
  color:var(--ink);
}
.reviews-head h2 .pop{color:var(--red)}
.reviews-rating-badge{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 22px;
  background:var(--yellow);
  border:2.5px solid var(--ink);border-radius:999px;
  box-shadow:3px 3px 0 var(--ink);
}
.reviews-rating-badge .stars{
  font-size:18px;letter-spacing:3px;color:var(--ink);
}
.reviews-rating-badge .score{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:14px;letter-spacing:-.01em;
}
.reviews-rating-badge .score b{font-size:22px}
.reviews-rating-badge .meta{
  font-family:'Archivo',sans-serif;
  font-weight:700;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;
}

.reviews-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
@media (max-width:900px){.reviews-grid{grid-template-columns:1fr}}

.review-card{
  background:#fff;
  border:2.5px solid var(--ink);border-radius:18px;
  box-shadow:4px 4px 0 var(--ink);
  padding:24px 22px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.review-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.review-card:nth-child(1){background:var(--bg-soft)}
.review-card:nth-child(2){background:var(--cream)}
.review-card:nth-child(3){background:var(--pink-soft)}

.review-card .stars{
  color:var(--yellow-dark);font-size:15px;letter-spacing:2px;
}
.review-card .quote{
  font-size:14px;line-height:1.55;color:var(--ink);font-weight:500;
  flex:1;
}
.review-card .quote .hl{
  background:var(--yellow);padding:0 4px;font-weight:700;
}
.review-card .review-photos{
  display:flex;gap:10px;margin:16px 0 18px;
  justify-content:center;
}
.review-card .review-photos img{
  width:100%;max-width:260px;aspect-ratio:1/1;object-fit:cover;
  border:3px solid var(--ink);border-radius:10px;
  box-shadow:4px 4px 0 var(--ink);
  background:var(--cream);
  cursor:zoom-in;transition:transform .18s ease, box-shadow .18s ease;
}
.review-card .review-photos img:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--ink);
}

/* Lightbox */
.lightbox-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.88);
  display:none;align-items:center;justify-content:center;
  z-index:9999;padding:32px 24px;
  animation:lb-fade .18s ease;
}
.lightbox-overlay.show{display:flex}
@keyframes lb-fade{from{opacity:0}to{opacity:1}}
.lightbox-content{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:90vw;max-height:90vh;
}
.lightbox-content img,
.lightbox-content .lightbox-pad{
  max-width:90vw;max-height:78vh;width:auto;height:auto;
  border:3px solid var(--ink);border-radius:14px;
  box-shadow:10px 10px 0 var(--yellow);
  background-color:var(--cream);
  display:block;
}
.lightbox-content .lightbox-pad{
  width:min(90vw,1000px);
  aspect-ratio:16/9;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.lightbox-close{
  position:absolute;top:16px;right:20px;
  width:46px;height:46px;border-radius:50%;
  border:3px solid #fff;background:#000;
  color:#fff;font-size:26px;font-weight:900;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:inherit;line-height:1;padding:0;
  z-index:10000;
  transition:transform .15s ease;
}
.lightbox-close:hover{transform:rotate(90deg) scale(1.05)}
.lightbox-caption{
  background:var(--yellow,#FFE34D);color:var(--ink,#0a0a0a);
  padding:10px 18px;border:2.5px solid var(--ink,#0a0a0a);
  border-radius:8px;font-weight:900;
  font-family:'Archivo',sans-serif;font-size:14px;
  letter-spacing:.02em;text-transform:uppercase;
  box-shadow:4px 4px 0 var(--ink,#0a0a0a);
  text-align:center;
}
@media (max-width:640px){
  .lightbox-close{top:10px;right:10px;width:40px;height:40px;font-size:22px}
  .lightbox-caption{font-size:12px;padding:8px 14px}
}
.review-card .author{
  display:flex;align-items:center;gap:12px;
  padding-top:12px;border-top:2px dashed var(--ink);
}
.review-card .av{
  width:38px;height:38px;flex-shrink:0;
  border:2.5px solid var(--ink);border-radius:50%;
  background:var(--mint);
  display:flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:14px;
  box-shadow:1.5px 1.5px 0 var(--ink);
  overflow:hidden;
}
.review-card .av img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.review-card .author-info{flex:1}
.review-card .author-name{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:13px;
  letter-spacing:-.01em;line-height:1.1;
}
.review-card .author-meta{
  font-size:11px;color:var(--ink-mute);
  font-weight:600;margin-top:2px;
}
.review-card .verified{
  background:var(--green);color:var(--ink);
  border:1.5px solid var(--ink);border-radius:999px;
  padding:3px 8px;
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;
  box-shadow:1.5px 1.5px 0 var(--ink);
}

/* ===== STORIES (homepage rail) ===== */
.stories{
  padding:80px 22px;max-width:1200px;margin:0 auto;
}
.stories h2{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:32px;
  letter-spacing:-.02em;text-transform:uppercase;
  margin-bottom:24px;
}
.stories-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
}
.story-card{
  background:#fff;
  border:2.5px solid var(--ink);border-radius:18px;
  box-shadow:4px 4px 0 var(--ink);
  padding:28px;min-height:240px;
  display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);
  transition:transform .2s,box-shadow .2s;
}
.story-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);text-decoration:none}
.story-card:nth-child(1){background:var(--mint)}
.story-card:nth-child(2){background:var(--purple-soft)}
.story-card:nth-child(3){background:var(--cream)}
.story-card .kicker{
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:10px;
}
.story-card h3{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:22px;
  letter-spacing:-.02em;line-height:1.1;
  text-transform:uppercase;
}
.story-card p{
  font-size:13px;color:var(--ink-mute);
  margin-top:8px;flex:1;line-height:1.5;
}
.story-card .arrow{
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;
  margin-top:14px;
  border-bottom:2px solid var(--ink);
  align-self:flex-start;padding-bottom:2px;
}
@media (max-width:734px){.stories-grid{grid-template-columns:1fr}}

/* ===== FOOTER ===== */
.gf{
  background:var(--ink);color:#fff;
  border-top:2.5px solid var(--ink);
  padding:60px 22px 24px;
}
.gf-inner{max-width:1280px;margin:0 auto}
.gf-cols{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:32px;
  padding-bottom:32px;
  border-bottom:2px dashed rgba(255,255,255,.2);
}
.gf-col h4{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:11px;
  color:var(--yellow);
  letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:14px;
}
.gf-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.gf-col a{
  font-size:13px;color:rgba(255,255,255,.85);
  font-weight:500;
}
.gf-col a:hover{color:var(--teal);text-decoration:none}
.gf-bottom{
  padding-top:18px;
  display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  font-size:12px;color:rgba(255,255,255,.55);
}
.gf-legal a{
  color:rgba(255,255,255,.55);
  text-decoration:underline;
  margin-right:14px;
}
@media (max-width:734px){
  .gf-cols{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================
   FORTNITE-STYLE SHOP V2 (sklep.html)
   ========================================================== */
.fnshop{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:24px;
  padding:24px;
  align-items:flex-start;
  max-width:1400px;margin:0 auto;
}
@media (max-width:900px){.fnshop{grid-template-columns:1fr}}

/* === SIDEBAR FILTER === */
.fnshop-filter{
  position:sticky;top:120px;
  background:#0a0a0a;
  border:2.5px solid #000;
  border-radius:18px;
  padding:14px;
  color:#fff;
  box-shadow:5px 5px 0 var(--ink);
}
.fnshop-filter-head{
  display:inline-flex;align-items:center;gap:6px;
  background:#1a1a1a;color:#fff;
  padding:8px 16px;
  border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:14px;
}
.fnshop-filter ul{list-style:none}
.fnshop-filter li a{
  display:block;
  padding:10px 14px;
  border-radius:8px;
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.65);
  cursor:pointer;
  transition:background .2s,color .2s;
}
.fnshop-filter li a:hover{
  background:rgba(255,255,255,.08);
  color:#fff;text-decoration:none;
}
.fnshop-filter li a.active{
  background:rgba(255,255,255,.15);
  color:#fff;
}
@media (max-width:900px){.fnshop-filter{position:static}}

/* === MAIN CONTENT === */
.fnshop-main{
  display:flex;flex-direction:column;gap:20px;
}

/* === COUNTDOWN BAR === */
.fnshop-cd{
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(135deg,#0a0a14 0%,#1f0512 50%,#0a0a14 100%);
  color:#fff;
  border:3px solid var(--ink);border-radius:18px;
  padding:22px 28px;
  flex-wrap:wrap;gap:24px;
  box-shadow:6px 6px 0 var(--ink);
  position:relative;overflow:hidden;
}
/* Scan-lines (CRT vibe) */
.fnshop-cd::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,
    transparent 0,transparent 3px,
    rgba(255,255,255,.025) 3px,rgba(255,255,255,.025) 4px);
  pointer-events:none;
}
.fnshop-cd-left{
  display:flex;align-items:center;gap:14px;
  position:relative;z-index:1;
  flex:1 1 auto;
  min-width:200px;
}
.fnshop-cd-left::before{
  content:"";width:14px;height:14px;border-radius:50%;
  background:#FF3B30;
  box-shadow:0 0 18px rgba(255,59,48,.9),0 0 4px #FF3B30;
  animation:cd-pulse 1.1s infinite;
  flex:0 0 auto;
}
@keyframes cd-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.35);opacity:.65}
}
.fnshop-cd-label{
  display:block;
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:18px;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;
  line-height:1.1;
}
.fnshop-cd-sub{
  display:block;
  font-family:'DM Sans',sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.02em;
  color:rgba(255,255,255,.55);
  margin-top:3px;
}
.fnshop-cd-timer{
  display:flex;gap:8px;align-items:flex-end;
  font-variant-numeric:tabular-nums;
  position:relative;z-index:1;
}
.fnshop-cd-unit{
  position:relative;
  background:linear-gradient(180deg,#1c1c2e,#06060e);
  border:2px solid rgba(255,255,255,.18);
  padding:14px 16px 22px;border-radius:12px;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:36px;
  line-height:1;letter-spacing:-.02em;
  color:#FFE34D;
  text-shadow:0 0 16px rgba(255,227,77,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -3px 8px rgba(0,0,0,.6),
    0 4px 14px rgba(0,0,0,.45);
  min-width:78px;
  text-align:center;
}
.fnshop-cd-unit::after{
  content:attr(data-label);
  position:absolute;
  bottom:5px;left:0;right:0;
  text-align:center;
  font-size:9px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
/* Sekundy pulsują delikatnie — urgency */
.fnshop-cd-unit#cd-s{
  animation:cd-tick 1s steps(1,end) infinite;
}
@keyframes cd-tick{
  0%,49%{box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -3px 8px rgba(0,0,0,.6),
    0 4px 14px rgba(0,0,0,.45),
    0 0 0 0 rgba(255,227,77,0)}
  50%,99%{box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -3px 8px rgba(0,0,0,.6),
    0 4px 14px rgba(0,0,0,.45),
    0 0 0 3px rgba(255,227,77,.18)}
}
.fnshop-cd-sep{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:32px;
  color:rgba(255,255,255,.32);
  align-self:center;
  margin-bottom:14px;
  user-select:none;
}
@media (max-width:560px){
  .fnshop-cd{padding:18px 18px;gap:16px}
  .fnshop-cd-unit{font-size:28px;min-width:62px;padding:10px 10px 18px}
  .fnshop-cd-sep{font-size:24px;margin-bottom:12px}
  .fnshop-cd-label{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .fnshop-cd-unit#cd-s{animation:none}
  .fnshop-cd-left::before{animation:none}
}

/* === SECTION === */
.fnshop-section{
  position:relative;
  border:2.5px solid var(--ink);
  border-radius:18px;
  padding:34px 26px 26px;
  overflow:hidden;
  box-shadow:5px 5px 0 var(--ink);
}
/* Animated bubbles overlay */
.fnshop-section::before{
  content:"";
  position:absolute;inset:-20%;
  background-image:
    radial-gradient(circle 90px at 12% 30%,rgba(255,255,255,.18),transparent 60%),
    radial-gradient(circle 130px at 88% 60%,rgba(255,255,255,.14),transparent 60%),
    radial-gradient(circle 60px at 28% 80%,rgba(255,255,255,.16),transparent 60%),
    radial-gradient(circle 70px at 70% 18%,rgba(255,255,255,.1),transparent 60%),
    radial-gradient(circle 50px at 50% 50%,rgba(255,255,255,.08),transparent 60%);
  pointer-events:none;
  animation:fn-bubbles 24s ease-in-out infinite;
  z-index:0;
}
@keyframes fn-bubbles{
  0%,100%{transform:translate(0,0)}
  33%{transform:translate(-22px,-14px)}
  66%{transform:translate(18px,-8px)}
}

/* Section background variants — Fortnite-style colored gradients */
.fnshop-section.bg-green{
  background:radial-gradient(circle at 30% 30%,#65c95f 0%,#2d7d2a 70%,#1a4d18 100%);
}
.fnshop-section.bg-yellow{
  background:radial-gradient(circle at 70% 30%,#f4ca3d 0%,#a86b18 70%,#5e3d0e 100%);
}
.fnshop-section.bg-blue{
  background:radial-gradient(circle at 30% 70%,#3d8bc9 0%,#1e4d80 70%,#0d2c4d 100%);
}
.fnshop-section.bg-orange{
  background:radial-gradient(circle at 70% 50%,#ff8a5a 0%,#c94f1e 70%,#7d2d10 100%);
}
.fnshop-section.bg-purple{
  background:radial-gradient(circle at 30% 30%,#a06bff 0%,#5a2db8 70%,#2e0d6e 100%);
}
.fnshop-section.bg-teal{
  background:radial-gradient(circle at 70% 50%,#3dd9c0 0%,#1a7a6e 70%,#0d4540 100%);
}

.fnshop-section > *{position:relative;z-index:1}

.fnshop-section h2{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-style:italic;
  font-size:clamp(24px,3vw,38px);
  letter-spacing:.01em;line-height:1;
  color:#fff;
  text-shadow:2px 2px 0 rgba(0,0,0,.35);
  margin-bottom:18px;
  text-transform:uppercase;
}
.fnshop-section h2 .nb{color:#fff}

/* === FEATURED BIG BANNER === */
.fnshop-featured{
  position:relative;
  background:rgba(0,0,0,.18);
  border:2px solid rgba(255,255,255,.22);
  border-radius:14px;
  padding:24px;
  min-height:240px;
  margin-bottom:14px;
  overflow:hidden;
  display:flex;align-items:flex-end;
}
.fnshop-featured-bg{
  position:absolute;inset:0;
  background-position:center;background-size:cover;
  opacity:.55;
  z-index:0;
}
.fnshop-featured-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.4) 100%);
}
.fnshop-featured-info{
  position:relative;z-index:1;color:#fff;
}
.fnshop-discount{
  display:inline-flex;align-items:center;
  background:#000;color:#fff;
  padding:6px 14px;border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  border:2px solid #fff;
  margin-bottom:10px;
}
.fnshop-featured-info h3{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:24px;
  letter-spacing:-.01em;
  margin-bottom:8px;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
}

/* === MC CURRENCY (MouseCoins, "Fortnite V-Bucks" equivalent) === */
.mc{
  display:inline-flex;align-items:baseline;gap:4px;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:18px;
  color:#fff;
}
.mc::after{
  content:"zł";
  font-weight:700;font-size:13px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.85);
  margin-left:2px;
}
.mc .old{
  text-decoration:line-through;
  font-weight:700;font-size:13px;
  color:rgba(255,255,255,.5);
  margin-left:8px;
}
.mc .old::after{display:none}

/* === GRID OF CARDS === */
.fnshop-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
@media (max-width:1068px){.fnshop-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:734px){.fnshop-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

.fnshop-card{
  background:rgba(0,0,0,.2);
  border:2px solid rgba(255,255,255,.22);
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  display:flex;flex-direction:column;
}
.fnshop-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  border-color:rgba(255,255,255,.5);
}
.fnshop-card .img{
  width:100%;aspect-ratio:1/1;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  position:relative;
}
.fnshop-card .new-tag{
  position:absolute;top:10px;left:10px;
  background:#FBBF24;color:#1a1a1a;
  padding:4px 10px;border-radius:6px;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:10px;
  letter-spacing:.05em;text-transform:uppercase;
  z-index:2;
  box-shadow:1.5px 1.5px 0 rgba(0,0,0,.3);
}
.fnshop-card .info{
  padding:12px 14px 14px;
  background:rgba(0,0,0,.45);
  color:#fff;
  flex:1;
  display:flex;flex-direction:column;justify-content:space-between;gap:8px;
}
.fnshop-card .name{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:14px;
  letter-spacing:-.01em;line-height:1.15;
  color:#fff;
}
.fnshop-card .row{
  display:flex;justify-content:space-between;align-items:center;
}
.fnshop-card .mc{font-size:13px}
.fnshop-card .mc::before{width:14px;height:14px;border-width:1.5px}
.fnshop-card .add{
  width:26px;height:26px;
  background:rgba(255,255,255,.18);
  border:1.5px solid rgba(255,255,255,.3);
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;font-weight:900;line-height:1;
  cursor:pointer;
  transition:background .15s,transform .15s;
}
.fnshop-card .add:hover{background:rgba(255,255,255,.32);transform:scale(1.1)}

/* "Zobacz" hover overlay on shop card image */
.fnshop-card .view-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
  z-index:1;
}
.fnshop-card:hover .view-overlay{opacity:1}
.fnshop-card .view-overlay span{
  background:#fff;color:var(--ink);
  border:2.5px solid var(--ink);
  border-radius:999px;
  padding:8px 18px;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--red);
  transform:scale(.85);
  transition:transform .25s var(--ease);
}
.fnshop-card:hover .view-overlay span{transform:scale(1)}

/* === SHOP MODAL CUSTOM LAYOUT === */
.shop-modal-pad{
  width:100%;
  aspect-ratio:9/4 !important;
  border:3px solid var(--ink);
  border-radius:14px;
  position:relative;overflow:hidden;
  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  box-shadow:5px 5px 0 var(--ink);
  isolation:isolate;
}
.shop-modal-pad::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.18;z-index:1;
}
.shop-modal-pad::before{
  content:"";position:absolute;inset:0;height:35%;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);
  z-index:1;
}
.shop-modal-pad{cursor:zoom-in}

/* Magnifier lens dla modalu sklepu — hover-zoom 2.8x na podkładce */
.shop-modal-lens{
  position:absolute;
  top:0;left:0;
  width:200px;height:200px;
  border-radius:50%;
  border:3px solid #fff;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.55),
    0 14px 32px rgba(0,0,0,.55);
  background:#000;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:5;
  transform:translate(-50%,-50%) scale(.55);
  opacity:0;
  transition:opacity .15s ease,transform .18s cubic-bezier(.2,.9,.4,1.2);
  will-change:transform,background-position;
}
.shop-modal-lens.is-on{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.shop-modal-lens::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);
  pointer-events:none;
}
.shop-modal-meta{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:14px;font-size:11px;
}
.shop-modal-meta .author,
.shop-modal-meta .tier{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  background:var(--bg-soft);
  border:1.5px solid var(--ink);border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:1.5px 1.5px 0 var(--ink);
}
.shop-modal-meta .tier.legendary{background:var(--yellow)}
.shop-modal-meta .tier.epic{background:var(--purple);color:#fff}
.shop-modal-meta .tier.rare{background:var(--teal)}
.shop-modal-mc{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:22px;
  letter-spacing:-.02em;
  color:var(--ink);
}
.shop-modal-mc::before{
  content:"";display:inline-block;width:22px;height:22px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#00d4ff,#0090c4);
  border:2.5px solid var(--ink);
  box-shadow:1.5px 1.5px 0 var(--ink);
}
.shop-modal-mc small{
  margin-left:8px;font-size:14px;
  color:var(--ink-mute);font-weight:700;
}

/* ===== TOAST ===== */
.toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(40px);
  background:var(--red);color:#fff;
  border:2.5px solid var(--ink);
  padding:12px 22px;border-radius:999px;
  font-family:'Archivo',sans-serif;
  font-weight:800;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--ink);
  z-index:10002;
  opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== REVEAL ANIMATION ===== */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease-smooth),transform .7s var(--ease-smooth);
}
.reveal.shown{opacity:1;transform:none}

/* ===== KEBCIO BLUE THEME — overrides theme-pop on kebcio page only ===== */
body.theme-kebcio{
  background-color:#0EA5E9;
  background-image:radial-gradient(rgba(255,255,255,.18) 1.4px,transparent 1.6px);
  background-size:14px 14px;
  background-attachment:fixed;
  color:#062B3F;
}
/* shipbar — kebcio blue */
body.theme-kebcio .shipbar{background:#062B3F;color:#7DD3FC}
/* nav stays as is (cream is fine on blue) */

/* hero gradient: cyan/blue split */
body.theme-kebcio .kb-hero{
  background:linear-gradient(110deg,#22D3EE 0 60%,#0EA5E9 60% 100%);
  border-bottom:3px solid var(--ink);
}
body.theme-kebcio .kb-hero::before{
  background-image:radial-gradient(rgba(6,43,63,.18) 1.4px,transparent 1.6px);
}
body.theme-kebcio .kb-hero::after{background:#062B3F}
body.theme-kebcio .kb-tag{
  background:#062B3F;color:#7DD3FC;
  border-color:#062B3F;
  box-shadow:4px 4px 0 #0369A1;
}
body.theme-kebcio .kb-tag::before{color:#FACC15}
body.theme-kebcio .kb-brands .b-logo{color:#062B3F}
body.theme-kebcio .kb-brands .b-x{
  background:#062B3F;color:#7DD3FC;
  border-color:#062B3F;
  box-shadow:3px 3px 0 #0369A1;
}
body.theme-kebcio .kb-headline{color:#062B3F}
body.theme-kebcio .kb-headline .kb-pop{
  color:#FACC15;
  -webkit-text-stroke:3px #062B3F;
  text-shadow:
    -1px 0 #062B3F,1px 0 #062B3F,
    0 -1px #062B3F,0 1px #062B3F,
    8px 8px 0 rgba(6,43,63,.25);
}
body.theme-kebcio .kb-lead{
  border-left-color:#062B3F;color:#062B3F;
}
body.theme-kebcio .kb-cta{border-color:#062B3F;box-shadow:5px 5px 0 #062B3F}
body.theme-kebcio .kb-cta:hover{box-shadow:7px 7px 0 #062B3F}
body.theme-kebcio .kb-cta.primary{background:#062B3F;color:#7DD3FC}
body.theme-kebcio .kb-cta.ghost{background:#fff;color:#062B3F}
body.theme-kebcio .kb-pad-card{
  border-color:#062B3F;
  box-shadow:10px 10px 0 #062B3F;
}
body.theme-kebcio .kb-pad-label{color:#fff;text-shadow:2px 2px 0 #062B3F}

/* tile borders/shadows on this page use deep navy */
body.theme-kebcio .tile{
  border:3px solid #062B3F;
  box-shadow:8px 8px 0 #062B3F;
}
body.theme-kebcio .tile.dark{background:#062B3F}
body.theme-kebcio .tile.gray{background:#E0F2FE}
body.theme-kebcio .tile.cream{background:#fff}
body.theme-kebcio .tile.ai-bg{background:#062B3F}

/* eyebrow on dark tiles uses cyan */
body.theme-kebcio .tile.dark .eyebrow,
body.theme-kebcio .tile.ai-bg .eyebrow{
  background:#22D3EE;color:#062B3F;
}

/* CTA pills — navy + cyan */
body.theme-kebcio .btn-pill{
  background:#062B3F;color:#7DD3FC;
  border-color:#062B3F;
  box-shadow:4px 4px 0 #0369A1;
}
body.theme-kebcio .btn-pill:hover{box-shadow:6px 6px 0 #0369A1}
body.theme-kebcio .btn-pill.ghost{
  background:#fff;color:#062B3F;
  box-shadow:4px 4px 0 #062B3F;
}
body.theme-kebcio .btn-pill.ghost:hover{box-shadow:6px 6px 0 #062B3F}
body.theme-kebcio .btn-link{color:#062B3F;border-bottom-color:#062B3F}
body.theme-kebcio .tile.dark .btn-link,
body.theme-kebcio .tile.ai-bg .btn-link{color:#7DD3FC;border-bottom-color:#7DD3FC}

/* rainbow divider becomes cyan/navy/yellow */
body.theme-kebcio .rainbow span:nth-child(1){background:#22D3EE}
body.theme-kebcio .rainbow span:nth-child(2){background:#062B3F}
body.theme-kebcio .rainbow span:nth-child(3){background:#FACC15}
body.theme-kebcio .rainbow span:nth-child(4){background:#22D3EE}
body.theme-kebcio .rainbow span:nth-child(5){background:#062B3F}
body.theme-kebcio .rainbow span:nth-child(6){background:#FACC15}

/* scarcity bar — cyan accent */
body.theme-kebcio .pulse-red{background:#FACC15;box-shadow:0 0 0 0 rgba(250,204,21,.7)}

/* ===== KEBCIO LE — SPLIT HERO (yellow / red) ===== */
.kb-hero{
  position:relative;
  min-height:min(86vh,820px);
  overflow:hidden;
  border-bottom:3px solid var(--ink);
  background:
    linear-gradient(110deg,var(--yellow) 0 62%,#E11D2E 62% 100%);
  isolation:isolate;
}
/* dotted pattern overlay (Ben Day dots) */
.kb-hero::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(rgba(26,26,26,.18) 1.4px,transparent 1.6px);
  background-size:14px 14px;
  background-position:0 0;
  pointer-events:none;
}
/* hard diagonal seam */
.kb-hero::after{
  content:"";
  position:absolute;top:-4%;bottom:-4%;left:60%;
  width:34px;
  background:var(--ink);
  transform:skewX(-20deg);
  transform-origin:center;
  z-index:1;
}
.kb-hero-grid{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:55fr 45fr;
  align-items:center;
  gap:64px;
  max-width:1400px;margin:0 auto;
  padding:64px 48px 80px;
  min-height:inherit;
}
.kb-hero-text{padding-right:0;max-width:720px;min-width:0}
/* tag */
.kb-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--yellow);
  font-family:'Inter',sans-serif;font-weight:800;
  font-size:12px;letter-spacing:.18em;
  padding:8px 14px;
  border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 var(--red);
  margin-bottom:28px;text-transform:uppercase;
}
.kb-tag::before{content:"★";color:var(--red);font-size:11px}
/* co-brand line */
.kb-brands{
  display:flex;align-items:center;gap:18px;
  margin-bottom:22px;
}
.kb-brands .b-logo{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:clamp(20px,2vw,28px);
  letter-spacing:-.02em;color:var(--ink);
  text-transform:lowercase;line-height:1;
}
.kb-brands .b-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;
  background:var(--red);color:#fff;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:18px;
  border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-6deg);
}
/* headline */
.kb-headline{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  font-size:clamp(46px,7vw,108px);
  line-height:.9;letter-spacing:-.045em;
  text-transform:uppercase;color:var(--ink);
  margin:0 0 28px;
  word-break:keep-all;
}
.kb-headline .kb-line{display:block}
.kb-headline .kb-pop{
  display:inline-block;
  color:var(--red);
  -webkit-text-stroke:3px var(--ink);
  text-shadow:
    -1px 0 var(--ink), 1px 0 var(--ink),
    0 -1px var(--ink), 0 1px var(--ink),
    8px 8px 0 rgba(26,26,26,.18);
  letter-spacing:-.05em;
}
/* lead */
.kb-lead{
  position:relative;
  border-left:5px solid var(--red);
  padding:6px 0 6px 16px;
  max-width:420px;
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:15px;line-height:1.55;color:var(--ink);
  margin:0 0 30px;
}
/* CTAs */
.kb-cta-row{display:flex;flex-wrap:wrap;gap:16px}
.kb-cta{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-weight:900;
  letter-spacing:.14em;font-size:13px;
  text-transform:uppercase;text-decoration:none;
  padding:18px 30px;
  border:2.5px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease;
  cursor:pointer;
}
.kb-cta:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.kb-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.kb-cta.primary{background:var(--red);color:#fff}
.kb-cta.ghost{background:#fff;color:var(--ink)}
/* right column — product card */
.kb-hero-visual{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  padding:0 0 0 16px;
  height:100%;
}
.kb-pad-card{
  position:relative;
  width:min(480px,100%);
  aspect-ratio:16/9;
  background:#22D3EE url("img/kebcio/kompresja.jpg") center/cover no-repeat;
  border:3px solid var(--ink);
  box-shadow:12px 12px 0 var(--ink);
  transform:rotate(-2deg);
}
.kb-pad-label{
  margin-top:22px;
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:14px;letter-spacing:.32em;color:#fff;
  text-transform:uppercase;
  text-shadow:2px 2px 0 var(--ink);
}
/* responsive */
@media (max-width:960px){
  .kb-hero{background:linear-gradient(180deg,var(--yellow) 0 62%,#E11D2E 62% 100%)}
  .kb-hero::after{
    top:auto;bottom:auto;left:0;right:0;width:100%;
    height:34px;top:62%;transform:skewY(-3deg);
  }
  .kb-hero-grid{grid-template-columns:1fr;padding:48px 24px 64px;gap:48px}
  .kb-hero-text{padding-right:0;max-width:none}
  .kb-pad-card{transform:rotate(-2deg)}
}
@media (max-width:560px){
  .kb-headline{font-size:clamp(44px,12vw,72px)}
  .kb-cta{padding:14px 22px;font-size:12px}
  .kb-hero::after{height:24px}
}

/* ===== AI CREATOR VIZ — prompt UI mockup → stream → cycling AI pad ===== */
.ai-creator-viz{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(70px,110px) minmax(0,1.05fr);
  gap:clamp(8px,1.5vw,18px);
  align-items:stretch;
  width:100%;max-width:1020px;margin:0 auto;
  padding:8px 12px 0;
}
.aiv-card,.aiv-output{display:flex;flex-direction:column}
.aiv-output{justify-content:center;gap:14px}

/* INPUT CARD — looks like the real creator UI */
.aiv-card{
  background:#fff;color:var(--ink);
  border:3px solid var(--ink);border-radius:20px;
  box-shadow:10px 10px 0 var(--ink);
  padding:16px 16px 14px;
  display:flex;flex-direction:column;gap:12px;
}
.aiv-tabs{display:flex;gap:6px;flex-wrap:wrap}
.aiv-tab{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:7px 11px;border:2px solid var(--ink);border-radius:999px;
  background:#fff;color:var(--ink-mute);cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.aiv-tab.is-on{background:var(--ink);color:#fff;box-shadow:2px 2px 0 var(--yellow)}
.aiv-input-bar{
  background:#FFF6CC;
  border:2px solid var(--ink);border-radius:12px;
  padding:14px 14px;
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:clamp(13px,1.15vw,16px);line-height:1.4;
  color:var(--ink);
  min-height:60px;
  display:flex;align-items:center;flex-wrap:wrap;
}
.aiv-input-text{white-space:pre-wrap}
.aiv-caret{
  display:inline-block;width:2px;height:1.1em;background:var(--ink);
  margin-left:3px;vertical-align:middle;
  animation:aiv-blink 1s steps(1) infinite;
}
@keyframes aiv-blink{50%{opacity:0}}
.aiv-generate{
  align-self:flex-start;
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--red);color:#fff;
  border:2.5px solid var(--ink);border-radius:999px;
  padding:11px 22px;cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease;
}
.aiv-generate:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.aiv-models{
  display:flex;flex-wrap:wrap;gap:6px;
  padding-top:6px;border-top:1.5px dashed rgba(26,26,26,.18);
}
.aiv-model-pill{
  font-family:'Inter',sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.04em;color:var(--ink);
  background:#FFE34D;
  border:1.5px solid var(--ink);border-radius:999px;
  padding:3px 9px;
}

/* OUTPUT — large cycling pad */
.aiv-output{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  position:relative;
}
.aiv-pad-stack{
  position:relative;
  width:100%;aspect-ratio:9/5;
  border:3px solid var(--ink);border-radius:16px;
  box-shadow:12px 12px 0 var(--red);
  overflow:hidden;
  background:#000;
}
.aiv-pad-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.06);
  transition:opacity .55s ease,transform .9s ease;
  will-change:opacity,transform;
}
.aiv-pad-img.is-on{opacity:1;transform:scale(1)}
/* subtle film-grain overlay */
.aiv-pad-stack::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.14;
}
/* generating flash overlay */
.aiv-pad-stack.is-generating::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  animation:aiv-flash .9s ease-out;
}
@keyframes aiv-flash{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(110%)}
}
.aiv-stamp{
  display:inline-block;
  background:var(--red);color:#fff;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;
  border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-3deg);
}

/* keep the input card readable on dark ai-bg tile */
.tile.ai-bg .ai-creator-viz .aiv-tab{color:var(--ink-mute)}
.tile.ai-bg .ai-creator-viz .aiv-tab.is-on{color:#fff}

/* ===== STREAM — connecting line + flowing particles between input and pad ===== */
.aiv-stream{
  position:relative;
  align-self:center;
  width:100%;height:100%;
  min-height:120px;
  pointer-events:none;
}
.aiv-stream-line{
  position:absolute;left:-4px;right:-4px;top:50%;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,224,80,.35) 12%,
    rgba(255,224,80,.6) 50%,
    rgba(255,224,80,.35) 88%,
    transparent 100%);
  background-size:240% 100%;
  animation:aiv-line 4s linear infinite;
  border-radius:2px;
  transform:translateY(-50%);
  box-shadow:0 0 8px rgba(255,224,80,.35);
}
@keyframes aiv-line{
  0%{background-position:240% 0}
  100%{background-position:-240% 0}
}
.aiv-particle{
  position:absolute;
  top:50%;left:0;
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#FFE34D 45%,#FF8A00 100%);
  box-shadow:0 0 12px rgba(255,200,0,.95),0 0 24px rgba(255,80,0,.55);
  transform:translate(-50%,-50%) scale(.4);
  opacity:0;
}
.ai-creator-viz.is-generating .aiv-particle{
  animation:aiv-flow 1.5s cubic-bezier(.4,0,.25,1) forwards;
}
@keyframes aiv-flow{
  0%{left:-4%;transform:translate(-50%,-50%) scale(.4);opacity:0}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
  50%{transform:translate(-50%,calc(-50% - 6px)) scale(1)}
  85%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  100%{left:104%;transform:translate(-50%,-50%) scale(.45);opacity:0}
}
.aiv-particle:nth-child(2){animation-delay:0s}
.aiv-particle:nth-child(3){animation-delay:.06s;width:7px;height:7px}
.aiv-particle:nth-child(4){animation-delay:.14s}
.aiv-particle:nth-child(5){animation-delay:.22s;width:6px;height:6px}
.aiv-particle:nth-child(6){animation-delay:.30s}
.aiv-particle:nth-child(7){animation-delay:.42s;width:8px;height:8px}
.aiv-particle:nth-child(8){animation-delay:.55s;width:5px;height:5px}

/* ring burst on the pad when stream lands */
.aiv-pad-stack.is-generating::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 0 rgba(255,224,80,0);
  animation:aiv-burst 1s ease-out;
}
@keyframes aiv-burst{
  0%{box-shadow:inset 0 0 0 0 rgba(255,224,80,.85)}
  100%{box-shadow:inset 0 0 0 18px rgba(255,224,80,0)}
}

@media (max-width:900px){
  .ai-creator-viz{grid-template-columns:1fr;gap:14px}
  .aiv-stream{min-height:60px;height:60px;transform:rotate(90deg);margin:-10px auto}
  .aiv-pad-stack{box-shadow:8px 8px 0 var(--red)}
  .aiv-card{box-shadow:6px 6px 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .aiv-stream-line,.aiv-particle{animation:none}
  .aiv-pad-stack.is-generating::after{animation:none}
}

/* ===== AI MARQUEE — for Sklep AI tile, scrolling pad rows ===== */
.aiv-marquee{
  position:relative;
  width:100%;
  display:flex;flex-direction:column;gap:14px;
  overflow:hidden;
  padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.aiv-marquee-track{
  display:flex;gap:14px;
  width:max-content;
  animation:aiv-marquee 36s linear infinite;
  will-change:transform;
}
.aiv-marquee-track--rev{animation:aiv-marquee-rev 44s linear infinite}
.aiv-marquee-track img{
  width:clamp(140px,16vw,200px);
  aspect-ratio:9/5;
  object-fit:cover;
  border:2.5px solid var(--ink);
  border-radius:10px;
  box-shadow:4px 4px 0 var(--ink);
  background:#000;
  flex:0 0 auto;
  transition:transform .25s ease;
}
.aiv-marquee-track img:hover{transform:translate(-2px,-2px) scale(1.03)}
@keyframes aiv-marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes aiv-marquee-rev{
  0%{transform:translateX(-50%)}
  100%{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .aiv-marquee-track,.aiv-marquee-track--rev{animation:none}
}

/* ===== REKAWEK — Variant picker (4 models) ===== */
.pdp-variants{
  max-width:1280px;margin:30px auto 0;
  padding:0 var(--gap);
}
.pdp-variants-head{margin-bottom:18px}
.pdp-variants-head .eyebrow{margin-bottom:6px}
.pdp-variants-title{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(28px,3.4vw,42px);
  letter-spacing:-.025em;line-height:1.05;
  color:var(--ink);margin:0;text-transform:none;
}
.pdp-variant-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.pdp-variant{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 16px 16px;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:18px;
  cursor:pointer;
  text-align:center;
  transition:transform .15s,box-shadow .15s;
  box-shadow:5px 5px 0 transparent;
  font-family:'Inter',sans-serif;
}
.pdp-variant:hover{
  box-shadow:6px 6px 0 var(--ink);
  transform:translate(-2px,-2px);
}
.pdp-variant.sel{
  background:var(--yellow);
  box-shadow:6px 6px 0 var(--ink);
  transform:translate(-2px,-2px);
}
.pdp-variant-img{
  width:100%;aspect-ratio:1/1;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:12px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:8px;
}
.pdp-variant-img img{
  max-width:100%;max-height:100%;
  object-fit:contain;
}
.pdp-variant-name{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:14px;letter-spacing:-.01em;
  color:var(--ink);
}
.pdp-variant-price{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:13px;color:var(--ink-mute);
}
.pdp-variant.sel .pdp-variant-price{color:var(--ink)}
.pdp-variant-tag{
  position:absolute;top:10px;right:10px;
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--red);color:#fff;
  border:2px solid var(--ink);border-radius:999px;
  padding:3px 8px;
  box-shadow:1.5px 1.5px 0 var(--ink);
  z-index:1;
}
.pdp-variant-tag--new{background:var(--ink);color:var(--yellow)}
.pdp-variant-tag--le{background:#22D3EE;color:var(--ink)}

@media (max-width:734px){
  .pdp-variant-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* 8-column variant grid for wzory page (legacy fallback) */
.pdp-variant-grid--8{grid-template-columns:repeat(4,1fr)}
@media (max-width:1068px){
  .pdp-variant-grid--8{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:734px){
  .pdp-variant-grid--8{grid-template-columns:repeat(2,1fr)}
}

/* ===== WZORY CONFIGURATOR — single-screen layout (picker + sticky PDP) ===== */
.wzory-cfg{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:32px;
  max-width:1280px;margin:30px auto;
  padding:0 var(--gap);
  align-items:start;
}
.wzory-cfg-picker{padding-top:4px}
.wzory-cfg-picker .pdp-variants-head{margin-bottom:14px}
.pdp-variant-grid--cfg{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.pdp-variant-grid--cfg .pdp-variant{
  padding:12px 10px 10px;
  gap:6px;
  border-width:2.5px;
  border-radius:14px;
  box-shadow:4px 4px 0 transparent;
}
.pdp-variant-grid--cfg .pdp-variant:hover,
.pdp-variant-grid--cfg .pdp-variant.sel{
  box-shadow:5px 5px 0 var(--ink);
}
.pdp-variant-grid--cfg .pdp-variant-name{font-size:13px}
.pdp-variant-grid--cfg .pdp-variant-price{font-size:11px}
.pdp-variant-grid--cfg .pdp-variant-tag{
  font-size:8px;padding:2px 6px;
  top:7px;right:7px;
}

/* Right column — sticky PDP detail */
.wzory-cfg-detail{
  position:sticky;top:90px;
  display:flex;flex-direction:column;gap:18px;
  align-self:start;
}
.wzory-cfg-pad-wrap{
  width:100%;
}
.wzory-cfg-detail .pdp-pad{
  box-shadow:8px 8px 0 var(--ink);
}
.wzory-cfg-detail .pdp-info{
  padding:0;
}
.wzory-cfg-detail .pdp-title{font-size:clamp(24px,2.6vw,34px)}
.wzory-cfg-detail .pdp-price{font-size:26px;margin-bottom:16px}
.wzory-cfg-detail .pdp-cat{margin-bottom:6px}
.wzory-cfg-detail .pdp-sub{margin-bottom:14px;font-size:14px}
.wzory-cfg-detail .pdp-desc{margin-top:18px;padding-top:18px;font-size:13px}
.wzory-cfg-detail .pdp-desc ul{margin:8px 0}
.wzory-cfg-detail .pdp-cta{padding:14px 20px;margin-top:10px}
.wzory-cfg-detail .pdp-sizes{grid-template-columns:repeat(4,1fr)}
.wzory-cfg-detail .pdp-size{padding:10px 8px}

/* Tablet — single column stack but compact */
@media (max-width:960px){
  .wzory-cfg{grid-template-columns:1fr;gap:22px}
  .wzory-cfg-detail{position:static;top:auto}
  .pdp-variant-grid--cfg{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:560px){
  .pdp-variant-grid--cfg{grid-template-columns:repeat(2,1fr)}
}

/* Variant card with mousepad pattern preview (instead of img) */
.pdp-variant--pad .pdp-variant-pad{
  width:100%;aspect-ratio:9/5;
  border:2px solid var(--ink);
  border-radius:12px;
  position:relative;overflow:hidden;
  background-position:center;background-size:cover;
  isolation:isolate;
}
.pdp-variant--pad .pdp-variant-pad::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.18;
}

/* Big PDP preview pad for wzory page */
.pdp-main--pad{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  aspect-ratio:auto;
}
.pdp-pad{
  width:100%;aspect-ratio:9/5;
  border:3px solid var(--ink);
  border-radius:20px;
  box-shadow:10px 10px 0 var(--ink);
  position:relative;overflow:hidden;
  background-position:center;background-size:cover;
  isolation:isolate;
}
.pdp-pad::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;opacity:.18;
}
.pdp-pad::before{
  content:"";position:absolute;inset:0;height:35%;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);
}

/* Wzor PDP sizes — 4 columns instead of 2 */
.pdp--wzory .pdp-sizes{grid-template-columns:repeat(4,1fr)}
@media (max-width:560px){
  .pdp--wzory .pdp-sizes{grid-template-columns:repeat(2,1fr)}
}

/* Magnifier lens on the big pad preview (wzory PDP) */
.pdp--wzory .pdp-pad{cursor:zoom-in}
.wzor-lens{
  position:absolute;
  top:0;left:0;
  width:180px;height:180px;
  border-radius:50%;
  border:3px solid var(--ink);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.55),
    0 12px 28px rgba(0,0,0,.45);
  background:#000;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:5;
  transform:translate(-50%,-50%) scale(.6);
  opacity:0;
  transition:opacity .15s ease,transform .15s ease;
}
.wzor-lens.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.wzor-lens::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);
  pointer-events:none;
}
.wzor-zoom-tag{
  position:absolute;left:14px;top:14px;z-index:4;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(10,10,16,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:2px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:6px 12px;
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:11px;letter-spacing:.06em;color:#fff;
  text-transform:uppercase;
  pointer-events:none;
  opacity:.85;
}
.pdp--wzory .pdp-pad:hover .wzor-zoom-tag{opacity:0;transition:opacity .2s}
@media (hover:none){.wzor-zoom-tag{display:none}}

/* ===== REKAWEK PDP — Nike-style product detail page ===== */
.pdp{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:48px;
  max-width:1280px;margin:30px auto;
  padding:0 var(--gap);
}
.pdp-gallery{
  display:flex;flex-direction:column;gap:14px;
  align-self:start;
}
.pdp-main{
  width:100%;aspect-ratio:1/1;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:8px 8px 0 var(--ink);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:30px;
}
.pdp-main img{
  width:100%;height:100%;
  object-fit:contain;
  transition:filter .25s ease,transform .25s ease;
}
.pdp-thumbs{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.pdp-thumb{
  background:#fff;
  border:2.5px solid var(--ink);
  border-radius:14px;
  padding:10px;
  cursor:pointer;
  aspect-ratio:1/1;
  transition:transform .15s,box-shadow .15s;
  box-shadow:3px 3px 0 transparent;
}
.pdp-thumb img{width:100%;height:100%;object-fit:contain}
.pdp-thumb:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(-1px,-1px)}
.pdp-thumb.is-on{
  background:var(--yellow);
  box-shadow:4px 4px 0 var(--ink);
  transform:translate(-1px,-1px);
}

.pdp-info{
  padding:8px 0;
}
.pdp-cat{
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--red);
  margin-bottom:8px;
}
.pdp-title{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(28px,3.4vw,42px);
  letter-spacing:-.025em;line-height:1.05;
  color:var(--ink);
  margin:0 0 6px;
  text-transform:none;
}
.pdp-sub{
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:15px;color:var(--ink-mute);
  margin:0 0 18px;
}
.pdp-price{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:32px;color:var(--ink);
  letter-spacing:-.02em;
  margin:0 0 24px;
}
.pdp-price small{
  font-weight:700;font-size:16px;
  color:var(--ink-mute);margin-left:4px;
}

.pdp-size-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;flex-wrap:wrap;gap:8px;
}
.pdp-size-label{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:14px;color:var(--ink);
}
.pdp-size-guide{
  background:none;border:0;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:12px;color:var(--ink);
  text-decoration:underline;
}
.pdp-sizes{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;margin-bottom:10px;
}
.pdp-size{
  background:#fff;
  border:2.5px solid var(--ink);
  border-radius:14px;
  padding:14px 16px;
  cursor:pointer;text-align:left;
  font-family:'Inter',sans-serif;
  display:flex;flex-direction:column;gap:4px;
  transition:transform .15s,box-shadow .15s,background .15s;
  box-shadow:3px 3px 0 transparent;
}
.pdp-size:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(-1px,-1px)}
.pdp-size.sel{
  background:var(--ink);color:#fff;
  box-shadow:4px 4px 0 var(--red);
}
.pdp-size-key{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:18px;letter-spacing:-.01em;
}
.pdp-size-dim{font-size:12px;font-weight:600;opacity:.75}

.pdp-size-guide-panel{
  background:#FFF6CC;
  border:2px dashed var(--ink);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:14px;
  font-family:'Inter',sans-serif;
  font-size:13px;line-height:1.5;color:var(--ink);
}
.pdp-size-guide-panel p{margin:0 0 6px}
.pdp-size-guide-panel p:last-child{margin:0}

.pdp-cta{
  display:block;width:100%;
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;
  border:2.5px solid var(--ink);
  border-radius:999px;
  padding:18px 22px;
  cursor:pointer;
  margin-top:14px;
  transition:transform .15s,box-shadow .15s;
  box-shadow:5px 5px 0 var(--ink);
}
.pdp-cta:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.pdp-cta.primary{background:var(--ink);color:#fff}
.pdp-cta.heart{background:#fff;color:var(--ink)}
.pdp-cta.heart.on{background:var(--red);color:#fff}
.pdp-cta.heart.on::before{content:"♥ ";color:#fff}

.pdp-cc{
  display:flex;gap:14px;
  margin-top:24px;padding:18px;
  background:#fff;
  border:2.5px solid var(--ink);
  border-radius:14px;
  box-shadow:4px 4px 0 var(--ink);
}
.pdp-cc-ico{font-size:24px;flex:0 0 auto}
.pdp-cc-body b{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:14px;color:var(--ink);
  display:block;margin-bottom:4px;
}
.pdp-cc-body a{
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:13px;color:var(--ink);
  text-decoration:underline;
}
.pdp-cc-note{
  margin:6px 0 0;
  font-family:'Inter',sans-serif;font-size:12px;
  color:var(--ink-mute);font-weight:500;line-height:1.4;
}

.pdp-desc{
  margin-top:32px;padding-top:24px;
  border-top:2px solid rgba(26,26,26,.15);
  font-family:'Inter',sans-serif;font-size:14px;
  line-height:1.6;color:var(--ink);
}
.pdp-desc p{margin:0 0 12px}
.pdp-desc ul{margin:12px 0;padding-left:18px}
.pdp-desc ul li{margin-bottom:6px}
.pdp-meta{
  font-size:13px;color:var(--ink-mute);
  margin:6px 0;
}

@media (max-width:900px){
  .pdp{grid-template-columns:1fr;gap:24px;margin:18px auto}
  .pdp-gallery{position:static}
  .pdp-main{padding:18px}
}

/* ===== KREATOR STAGE — Liquid Glass on every UI element ===== */
/* Tabs container — dark glass */
.kreator-stage .kreator-tabs{
  background:rgba(10,10,24,.55);
  backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border:2px solid rgba(255,255,255,.22);
  border-radius:999px;
  box-shadow:
    0 8px 28px rgba(0,0,0,.45),
    inset 1.5px 1.5px 1px 0 rgba(255,255,255,.35),
    inset -1px -1px 1px 1px rgba(255,255,255,.15);
}
.kreator-stage .kreator-tab{
  background:transparent;color:rgba(255,255,255,.85);
  transition:color .2s,background .2s;
}
.kreator-stage .kreator-tab:hover{color:#fff}
.kreator-stage .kreator-tab.active{
  background:rgba(255,255,255,.95);color:var(--ink);
  box-shadow:
    inset 1.5px 1.5px 1px 0 rgba(255,255,255,.85),
    inset -1px -1px 1px 1px rgba(0,0,0,.08);
}

/* Eyebrow chip on dark stage */
.kreator-stage .eyebrow{
  background:rgba(160,107,255,.32);
  backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  border:1.5px solid rgba(160,107,255,.65);
  color:#e8dcff;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.3),
    inset -1px -1px 0 rgba(0,0,0,.18);
}

/* Prompt input — dark glass textarea */
.kreator-stage .ai-input{
  background:rgba(10,10,24,.55);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  border:2px solid rgba(255,255,255,.25);
  box-shadow:
    0 8px 28px rgba(0,0,0,.4),
    inset 1.5px 1.5px 1px 0 rgba(255,255,255,.30),
    inset -1px -1px 1px 1px rgba(255,255,255,.12);
  color:#fff;
}
.kreator-stage .ai-input::placeholder{color:rgba(255,255,255,.55)}
.kreator-stage .ai-input:focus{
  border-color:rgba(160,107,255,.65);
  background:rgba(20,15,40,.65);
  box-shadow:
    0 0 0 3px rgba(160,107,255,.30),
    0 10px 32px rgba(0,0,0,.5),
    inset 1.5px 1.5px 1px 0 rgba(255,255,255,.4),
    inset -1px -1px 1px 1px rgba(255,255,255,.18);
}

/* Category pills — dark glass with strong border */
.kreator-stage .ai-cat{
  background:rgba(10,10,24,.6);
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  border:1.5px solid rgba(255,255,255,.32);
  color:#fff;
  box-shadow:
    0 4px 12px rgba(0,0,0,.3),
    inset 1px 1px 0 rgba(255,255,255,.28),
    inset -1px -1px 0 rgba(255,255,255,.10);
  transition:transform .15s,background .15s,border-color .15s,box-shadow .15s;
}
.kreator-stage .ai-cat:hover{
  background:rgba(160,107,255,.40);
  border-color:rgba(255,255,255,.5);
  transform:translateY(-1px);
  box-shadow:
    0 6px 18px rgba(160,107,255,.35),
    inset 1px 1px 0 rgba(255,255,255,.4),
    inset -1px -1px 0 rgba(0,0,0,.15);
}

/* Generate gradient pill — keep gradient but add glass shine */
.kreator-stage .ai-gen{
  position:relative;
  border:2px solid rgba(255,255,255,.4);
  box-shadow:
    0 8px 24px rgba(160,107,255,.4),
    inset 1.5px 1.5px 1px 0 rgba(255,255,255,.5),
    inset -1px -1px 1px 1px rgba(0,0,0,.12);
}

/* Ghost button on dark stage */
.kreator-stage .btn-pill.ghost{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  border:2px solid rgba(255,255,255,.4);
  box-shadow:
    0 6px 18px rgba(0,0,0,.25),
    inset 1.5px 1.5px 1px 0 rgba(255,255,255,.4),
    inset -1px -1px 1px 1px rgba(255,255,255,.18);
  color:#fff;
}

/* AI preview frame */
.kreator-stage .kreator-preview--ai{
  border:3px solid rgba(255,255,255,.25);
  box-shadow:
    0 12px 40px rgba(0,0,0,.5),
    inset 1.5px 1.5px 1px 0 rgba(255,255,255,.3),
    inset -1px -1px 1px 1px rgba(255,255,255,.12);
}

/* Add-to-cart pill */
.kreator-stage #ai-cart-btn{
  background:rgba(244,196,48,.92);
  backdrop-filter:blur(10px) saturate(1.5);
  -webkit-backdrop-filter:blur(10px) saturate(1.5);
  border:2.5px solid rgba(255,255,255,.4);
  box-shadow:
    0 8px 24px rgba(244,196,48,.35),
    inset 2px 2px 1px 0 rgba(255,255,255,.55),
    inset -1px -1px 1px 1px rgba(0,0,0,.1);
}

/* ===== LIQUID GLASS v2 — strong, visible, with SVG turbulence distortion ===== */
.lg{
  position:relative;isolation:isolate;
  border-radius:inherit;
}
/* Bend layer — backdrop blur + SVG turbulence displacement (the "wet" look) */
.lg::before{
  content:"";
  position:absolute;inset:0;z-index:-2;
  border-radius:inherit;
  backdrop-filter:blur(12px) saturate(1.6);
  -webkit-backdrop-filter:blur(12px) saturate(1.6);
  filter:url(#lg-distort);
  pointer-events:none;
}
/* Edge layer — strong 4-side inset highlights + outer glow */
.lg::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 3px 3px 3px 0 rgba(255,255,255,.55),
    inset -3px -3px 3px 0 rgba(255,255,255,.55),
    0 6px 16px rgba(0,0,0,.18),
    0 0 32px rgba(255,255,255,.18);
}
/* Strong variant — bigger blur, more displacement (for big cards) */
.lg-strong{position:relative;isolation:isolate;border-radius:inherit}
.lg-strong::before{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  backdrop-filter:blur(18px) saturate(1.8);
  -webkit-backdrop-filter:blur(18px) saturate(1.8);
  filter:url(#lg-distort-strong);
  pointer-events:none;
}
.lg-strong::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  box-shadow:
    inset 5px 5px 4px 0 rgba(255,255,255,.6),
    inset -5px -5px 4px 0 rgba(255,255,255,.6),
    0 10px 30px rgba(0,0,0,.22),
    0 0 50px rgba(255,255,255,.22);
}
/* Soft variant — minimal distortion, used for inputs/tabs to keep readability */
.lg-soft{position:relative;isolation:isolate;border-radius:inherit}
.lg-soft::before{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  backdrop-filter:blur(8px) saturate(1.4);
  -webkit-backdrop-filter:blur(8px) saturate(1.4);
  filter:url(#lg-distort-soft);
  pointer-events:none;
}
.lg-soft::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  box-shadow:
    inset 2px 2px 2px 0 rgba(255,255,255,.5),
    inset -2px -2px 2px 0 rgba(255,255,255,.5),
    0 4px 12px rgba(0,0,0,.12),
    0 0 22px rgba(255,255,255,.12);
}

/* === Apply liquid glass globally — but distortion ONLY on big background panels.
   Text-bearing controls (tabs, inputs, pills, sizes) only get backdrop blur + inset highlights,
   NEVER SVG distortion (so text/labels don't look swimmy). === */

/* Group A — big surfaces that can take strong distortion */
.feature-card,
.review-card,
.faq-item,
.tile,
.aiv-card,
.shop-modal-pad,
.fnshop-card{
  position:relative;
  isolation:isolate;
}
.feature-card::before,
.review-card::before,
.faq-item::before,
.tile::before,
.aiv-card::before,
.shop-modal-pad::before,
.fnshop-card::before{
  content:"";
  position:absolute;inset:0;z-index:-2;
  border-radius:inherit;
  backdrop-filter:blur(14px) saturate(1.6);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  filter:url(#lg-distort);
  pointer-events:none;
}
.feature-card::after,
.review-card::after,
.faq-item::after,
.tile::after,
.aiv-card::after,
.shop-modal-pad::after,
.fnshop-card::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 3px 3px 3px 0 rgba(255,255,255,.55),
    inset -3px -3px 3px 0 rgba(255,255,255,.55),
    0 0 32px rgba(255,255,255,.14);
}

/* Disable on opaque dark tiles where glass would break the look */
.tile.dark::before,.tile.ai-bg::before,.tile.kebcio-tile::before{display:none}

/* Reduced motion — drop SVG distortion which animates only via paint */
@media (prefers-reduced-motion:reduce){
  .feature-card::before,.review-card::before,.faq-item::before,
  .tile::before,.aiv-card::before,.shop-modal-pad::before,
  .fnshop-card::before,.lg::before,.lg-strong::before,.lg-soft::before{
    filter:none;
  }
}

/* ===== LIQUID GLASS — reusable utility for cards/CTAs ===== */
.liquid-glass{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:inherit;
}
/* glass blur layer (uses SVG filter from <svg id="lg-defs"> if present) */
.liquid-glass::before{
  content:"";
  position:absolute;inset:0;z-index:-2;
  border-radius:inherit;
  backdrop-filter:blur(8px) saturate(1.4);
  -webkit-backdrop-filter:blur(8px) saturate(1.4);
}
/* tinted overlay */
.liquid-glass::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  background:rgba(255,255,255,.18);
  box-shadow:
    inset 2px 2px 1px 0 rgba(255,255,255,.55),
    inset -1px -1px 1px 1px rgba(255,255,255,.45);
  pointer-events:none;
}
.liquid-glass--dark::after{
  background:rgba(0,0,0,.18);
  box-shadow:
    inset 2px 2px 1px 0 rgba(255,255,255,.18),
    inset -1px -1px 1px 1px rgba(0,0,0,.35);
}
.liquid-glass--strong::before{
  backdrop-filter:blur(14px) saturate(1.6);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
}
/* Liquid Glass pill button — animated */
.btn-pill.glass{
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(10px) saturate(1.6);
  -webkit-backdrop-filter:blur(10px) saturate(1.6);
  border:2.5px solid rgba(255,255,255,.45);
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    inset 2px 2px 1px 0 rgba(255,255,255,.6),
    inset -1px -1px 1px 1px rgba(255,255,255,.35);
  color:#fff;
  transition:transform .35s cubic-bezier(.175,.885,.32,2.2),
             padding .35s cubic-bezier(.175,.885,.32,2.2),
             box-shadow .35s ease;
}
.btn-pill.glass:hover{
  padding-left:36px;padding-right:36px;
  box-shadow:
    0 10px 26px rgba(0,0,0,.22),
    inset 2px 2px 1px 0 rgba(255,255,255,.7),
    inset -1px -1px 1px 1px rgba(255,255,255,.45);
}

/* ===== BEHIND THE SCENES — YouTube production section ===== */
.bts-section{
  max-width:1180px;margin:0 auto;
  padding:80px 24px 60px;
  text-align:center;
}
.bts-head{max-width:720px;margin:0 auto 32px}
.bts-head h2{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(34px,4.5vw,60px);
  line-height:.95;letter-spacing:-.035em;
  text-transform:uppercase;color:var(--ink);
  margin-top:14px;
}
.bts-sub{
  margin-top:18px;
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:clamp(15px,1.2vw,17px);
  color:var(--ink);
  line-height:1.55;
}
.bts-video-wrap{
  position:relative;
  width:100%;max-width:980px;margin:0 auto;
  aspect-ratio:16/9;
  border:3px solid var(--ink);
  border-radius:24px;
  overflow:hidden;
  box-shadow:12px 12px 0 var(--ink);
  background:#000;
}
.bts-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}
@media (max-width:734px){
  .bts-section{padding:50px 18px 40px}
  .bts-video-wrap{box-shadow:6px 6px 0 var(--ink);border-radius:16px}
}

/* ===== HOME POP THEME — yellow/red brutalist override (scoped to body.theme-pop) ===== */
body.theme-pop{
  --bg:#FFD60A;
  --bg-soft:#FFE34D;
  background-color:#FFD60A;
  /* one continuous dot grid for the whole page — tiles seamlessly across all sections */
  background-image:radial-gradient(rgba(26,26,26,.18) 1.4px,transparent 1.6px);
  background-size:14px 14px;
  background-attachment:fixed;
  background-position:0 0;
}
/* HERO — transparent so the body dots show through */
body.theme-pop .home-hero{
  background:transparent;
  border-bottom:3px solid var(--ink);
  position:relative;
}
body.theme-pop .home-hero h1{
  font-size:clamp(44px,6.6vw,96px);
  letter-spacing:-.045em;line-height:.88;
}
body.theme-pop .home-hero h1 .red{
  display:inline-block;
  color:#E11D2E;
  -webkit-text-stroke:2.5px var(--ink);
  text-shadow:6px 6px 0 rgba(26,26,26,.22);
}
body.theme-pop .home-hero .lead{color:var(--ink);font-weight:600}
body.theme-pop .hero-rating{color:var(--ink)}
body.theme-pop .hero-rating .stars{
  color:var(--ink);
  text-shadow:1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff;
}

/* FEATURE STRIP — wszystkie białe, żółte na hover */
body.theme-pop .feature-strip{background:transparent}
body.theme-pop .feature-card,
body.theme-pop .feature-card:nth-child(1),
body.theme-pop .feature-card:nth-child(2),
body.theme-pop .feature-card:nth-child(3),
body.theme-pop .feature-card:nth-child(4),
body.theme-pop .feature-card:nth-child(5){
  background:#fff;
  color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
}
body.theme-pop .feature-card:nth-child(3) .fc-desc,
body.theme-pop .feature-card:nth-child(5) .fc-desc{color:var(--ink-mute)}
body.theme-pop .feature-card:hover,
body.theme-pop .feature-card:nth-child(1):hover,
body.theme-pop .feature-card:nth-child(2):hover,
body.theme-pop .feature-card:nth-child(3):hover,
body.theme-pop .feature-card:nth-child(4):hover,
body.theme-pop .feature-card:nth-child(5):hover{
  background:#FFE34D;
  color:var(--ink);
  box-shadow:8px 8px 0 var(--ink);
}

/* BENTO — transparent bg so body dots show through */
body.theme-pop .bento{background:transparent}
body.theme-pop .tile{
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
}
body.theme-pop .tile.cream{background:#fff}
body.theme-pop .tile.mint{background:#E11D2E;color:#fff}
body.theme-pop .tile.mint .tile-title{color:#fff}
body.theme-pop .tile.mint .tile-sub--muted{color:rgba(255,255,255,.85)}
body.theme-pop .tile.mint .eyebrow{background:#FFD60A;color:var(--ink)}
body.theme-pop .tile.mint .btn-link{color:#fff;border-bottom-color:#fff}
/* center CTA rows on all bento tiles so buttons sit flush with centered text */
body.theme-pop .bento .cta-row{justify-content:center;flex-wrap:wrap}

/* CTA row placed BELOW the tile-visual (Kreator AI / Wzory tiles) */
.cta-row--below{
  width:100%;
  justify-content:center;
  padding:24px 16px 36px;
  position:relative;z-index:3;
}
/* pads can fly free but slightly tamer ring radius keeps them inside the tile */
.bento .tile-big > .tile-visual:has(.pad-ring) + .cta-row--below{margin-top:18px}
.bento .tile-big > .tile-visual:has(.pad-ring) .pad-ring{
  --r:330px;
  height:240px;
}

/* RGB gaming-style pill — animated rainbow gradient with glow */
.btn-pill.rgb{
  position:relative;
  color:#fff;
  background:linear-gradient(90deg,#ff0040,#ff8a00,#ffe600,#2bff00,#00e1ff,#5b7bff,#b300ff,#ff00b3,#ff0040);
  background-size:300% 100%;
  border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink),0 0 22px rgba(255,80,200,.5);
  animation:rgb-slide 4s linear infinite;
  isolation:isolate;
  overflow:hidden;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.btn-pill.rgb::before{
  content:"";
  position:absolute;inset:-2px;
  z-index:-1;border-radius:inherit;
  background:linear-gradient(90deg,#ff0040,#ff8a00,#ffe600,#2bff00,#00e1ff,#5b7bff,#b300ff,#ff00b3,#ff0040);
  background-size:300% 100%;
  filter:blur(12px) saturate(1.2);
  opacity:.55;
  animation:rgb-slide 4s linear infinite;
}
.btn-pill.rgb:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink),0 0 28px rgba(255,80,200,.7)}
@keyframes rgb-slide{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
@media (prefers-reduced-motion:reduce){
  .btn-pill.rgb,.btn-pill.rgb::before{animation:none}
}
/* cleaner sleeve composition on the Rękawek dark tile */
body.theme-pop .tile.dark .sleeve-render{
  width:min(240px,72%);
  margin:18px auto 0;
  transform:rotate(-3deg);
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));
}
body.theme-pop .tile.ai-bg{background:var(--ink) !important}
body.theme-pop .tile.dark{background:var(--ink)}

/* REVIEWS — transparent so body dots flow through */
body.theme-pop .reviews-section{background:transparent}
body.theme-pop .review-card{
  background:#fff !important;
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
}
body.theme-pop .review-card:nth-child(2){box-shadow:6px 6px 0 #E11D2E}

/* FAQ — transparent so body dots flow through */
body.theme-pop .faq{background:transparent}
body.theme-pop .faq h2 .pop{color:#E11D2E;-webkit-text-stroke:2px var(--ink)}
body.theme-pop .faq-item{
  background:#fff;
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}

/* RAINBOW divider becomes 3-stripe yellow/red/ink for cohesive popart feel */
body.theme-pop .rainbow span:nth-child(1){background:#FFD60A}
body.theme-pop .rainbow span:nth-child(2){background:#E11D2E}
body.theme-pop .rainbow span:nth-child(3){background:var(--ink)}
body.theme-pop .rainbow span:nth-child(4){background:#FFD60A}
body.theme-pop .rainbow span:nth-child(5){background:#E11D2E}
body.theme-pop .rainbow span:nth-child(6){background:var(--ink)}

/* shipbar punchier */
body.theme-pop .shipbar{background:var(--ink);color:#FFD60A}

/* mobile size tweak for the popped headline */
@media (max-width:560px){
  body.theme-pop .home-hero h1{font-size:clamp(40px,11vw,64px)}
  body.theme-pop .home-hero h1 .red{-webkit-text-stroke:1.5px var(--ink);text-shadow:4px 4px 0 rgba(26,26,26,.22)}
}

/* Mini timer w kafelku Sklep AI na home */
.kr-mini-timer{
  display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  margin:14px auto;
  padding:12px 22px;
  background:var(--ink);color:#FFE34D;
  border-radius:14px;
  border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 var(--red);
  font-family:'Archivo',sans-serif;
}
.kr-mini-timer-lbl{
  font-weight:700;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
.kr-mini-timer-val{
  font-weight:900;font-size:28px;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:#FFE34D;
  text-shadow:0 0 12px rgba(255,227,77,.4);
}

/* ===== KEBCIO — BUY SECTION ===== */
.kb-buy{
  padding:80px 24px;
  background:
    radial-gradient(ellipse at 20% 20%,rgba(34,211,238,.18),transparent 55%),
    radial-gradient(ellipse at 80% 80%,rgba(250,204,21,.18),transparent 55%),
    #0A1A24;
  color:#fff;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
}
.kb-buy-inner{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;
}
.kb-buy-visual{position:relative}
.kb-buy-pad{
  width:100%;aspect-ratio:9/4;border-radius:18px;
  border:3px solid #fff;
  box-shadow:8px 8px 0 #0369A1,0 30px 60px rgba(0,0,0,.5);
  background-size:cover;background-position:center;
}

/* Slider zdjęć w sekcji buy */
.kb-slider{
  position:relative;
  user-select:none;
  outline:none;
}
.kb-slider:focus-visible{box-shadow:0 0 0 3px rgba(250,204,21,.5);border-radius:20px}
.kb-slides{position:relative;width:100%;aspect-ratio:9/4}
.kb-slide{
  position:absolute;inset:0;
  opacity:0;transform:translateX(20px) rotate(-1.5deg);
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}
.kb-slide.is-on{opacity:1;transform:translateX(0) rotate(-1.5deg);pointer-events:auto}
.kb-slide .kb-buy-pad{margin:0}
.kb-slide-empty{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#062B3F,#0F172A) !important;
  color:rgba(255,255,255,.55);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:0 20px;
}
.kb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:#fff;color:#062B3F;
  border:2.5px solid var(--ink);
  font-family:'Archivo',sans-serif;font-weight:900;font-size:24px;line-height:1;
  cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  z-index:3;
  transition:transform .15s,box-shadow .15s;
}
.kb-arrow:hover{transform:translateY(-50%) translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.kb-prev{left:-8px}
.kb-next{right:-8px}
.kb-dots{
  display:flex;justify-content:center;gap:8px;
  margin-top:18px;
}
.kb-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.25);
  border:1.5px solid rgba(255,255,255,.35);
  cursor:pointer;padding:0;
  transition:background .15s,transform .15s,border-color .15s;
}
.kb-dot:hover{background:rgba(255,255,255,.45)}
.kb-dot.is-on{
  background:#FACC15;border-color:#FACC15;
  transform:scale(1.25);
  box-shadow:0 0 8px rgba(250,204,21,.6);
}
.kb-buy-num{
  position:absolute;top:14px;left:14px;
  background:#FACC15;color:#062B3F;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:13px;
  letter-spacing:.04em;
  padding:8px 14px;border-radius:999px;
  border:2.5px solid #062B3F;
  box-shadow:3px 3px 0 #062B3F;
}
.kb-buy-num b{font-size:16px}

.kb-buy-tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.kb-buy-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;
  border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
}
.kb-buy-tag.yellow{background:#FACC15;color:#062B3F}
.kb-buy-tag.red{background:#E11D2E;color:#fff}

.kb-buy-body h2{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(40px,5vw,68px);line-height:.95;
  letter-spacing:-.03em;text-transform:uppercase;
  margin:6px 0 12px;
  color:#fff;
}
.kb-buy-sub{
  color:rgba(255,255,255,.78);font-size:15px;line-height:1.55;
  margin-bottom:22px;max-width:46ch;
}

.kb-buy-list{
  list-style:none;padding:0;margin:0 0 26px;
  display:flex;flex-direction:column;gap:10px;
}
.kb-buy-list li{
  display:flex;align-items:flex-start;gap:14px;
  padding:12px 14px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.12);
  border-radius:12px;
  font-size:13.5px;line-height:1.5;
}
.kb-buy-list li b{display:block;color:#fff;font-weight:800;letter-spacing:.005em}
.kb-buy-list li span{color:rgba(255,255,255,.65);font-size:12.5px}
.kb-buy-ico{
  font-size:22px;line-height:1;flex:0 0 auto;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
}

.kb-buy-price-row{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:18px;
  border-top:1.5px solid rgba(255,255,255,.12);
}
.kb-buy-price{display:flex;flex-direction:column;gap:2px}
.kb-buy-price-num{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:44px;line-height:1;color:#FACC15;
  letter-spacing:-.02em;
}
.kb-buy-price-num small{font-size:18px;color:rgba(255,255,255,.7);font-weight:700;margin-left:4px}
.kb-buy-price-meta{font-size:12px;color:rgba(255,255,255,.6);font-weight:600}
.kb-buy-cta{
  font-size:16px !important;padding:18px 38px !important;
  margin-left:auto;
}
.kb-buy-foot{
  font-size:12px;color:rgba(255,255,255,.5);
  margin-top:14px;
}
@media (max-width:900px){
  .kb-buy{padding:48px 18px}
  .kb-buy-inner{grid-template-columns:1fr;gap:30px}
  .kb-buy-cta{margin-left:0;width:100%}
}

/* ===== KEBCIO — ABOUT (bio + socials + films) ===== */
.kb-about{
  padding:80px 24px;
  background:#fff;
  color:var(--ink);
  border-bottom:3px solid var(--ink);
}
.kb-about-inner{max-width:1180px;margin:0 auto}
.kb-about-head{text-align:center;margin-bottom:40px}
.kb-about-head h2{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(32px,4.4vw,56px);line-height:1;
  letter-spacing:-.03em;text-transform:uppercase;
  margin-top:14px;
}
.kb-about-grid{
  display:grid;grid-template-columns:0.9fr 1.4fr;gap:40px;align-items:start;
}
.kb-about-photo{position:relative;align-self:start}
.kb-photo-frame{
  width:100%;aspect-ratio:4/5;border-radius:18px;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(245,158,11,.4),transparent 60%),
    radial-gradient(ellipse at 70% 80%,rgba(34,211,238,.4),transparent 60%),
    linear-gradient(135deg,#062B3F,#0F172A);
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
  position:relative;overflow:hidden;
}
.kb-photo-frame::after{
  content:"📸";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:80px;opacity:.5;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.kb-photo-tag{
  position:absolute;bottom:14px;left:14px;
  background:#FACC15;color:#062B3F;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:11px;
  letter-spacing:.05em;
  padding:6px 12px;border-radius:999px;
  border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
}

.kb-about-body p{font-size:14.5px;line-height:1.65;margin:0 0 12px;color:#374151}
.kb-about-body p b{color:var(--ink)}

.kb-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  margin:22px 0 26px;
}
.kb-stat{
  background:#FACC15;
  border:2.5px solid var(--ink);
  border-radius:14px;
  padding:14px 12px;text-align:center;
  box-shadow:4px 4px 0 var(--ink);
}
.kb-stat b{
  display:block;
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:28px;line-height:1;color:var(--ink);
  letter-spacing:-.02em;
}
.kb-stat span{
  display:block;margin-top:4px;
  font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  color:#3F2E04;
}

.kb-socials{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;
}
.kb-social{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:14px;
  background:#fff;color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  text-decoration:none;
  transition:transform .15s,box-shadow .15s;
}
.kb-social:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.kb-social svg{flex:0 0 auto}
.kb-social span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.kb-social b{font-family:'Archivo',sans-serif;font-weight:900;font-size:13px;letter-spacing:.005em}
.kb-social small{font-size:10.5px;color:#6B6B6B;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.kb-social.yt{color:#FF0033}
.kb-social.ig{color:#E1306C}
.kb-social.tt{color:#000}
.kb-social.tw{color:#000}

.kb-films{margin-top:50px}
.kb-films-head{
  display:flex;justify-content:space-between;align-items:end;
  margin-bottom:20px;flex-wrap:wrap;gap:12px;
}
.kb-films-head h3{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(22px,2.4vw,32px);
  letter-spacing:-.02em;text-transform:uppercase;
}
.kb-films-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;
}
.kb-film{
  display:flex;flex-direction:column;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .15s,box-shadow .15s;
}
.kb-film:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.kb-film-thumb{
  aspect-ratio:16/9;
  border-bottom:3px solid var(--ink);
  position:relative;
}
.kb-film-thumb::after{
  content:"▶";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:42px;color:#fff;
  text-shadow:0 4px 12px rgba(0,0,0,.5);
}
.kb-film-meta{padding:14px 16px}
.kb-film-tag{
  display:inline-block;
  background:var(--ink);color:#FACC15;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  margin-bottom:8px;
}
.kb-film-meta h4{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:16px;line-height:1.2;letter-spacing:-.005em;
  margin:0 0 4px;
}
.kb-film-meta p{font-size:12px;color:#6B6B6B;margin:0;font-weight:500}

@media (max-width:900px){
  .kb-about{padding:48px 18px}
  .kb-about-grid{grid-template-columns:1fr;gap:24px}
  .kb-stats{grid-template-columns:1fr 1fr}
}

/* ===== AI WIZARD BUTTON + RATE LIMIT INFO ===== */
.ai-wizard-btn{
  position:relative;
  display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,rgba(160,107,255,.18),rgba(95,200,255,.18));
  color:#fff;
  border:2px solid rgba(255,255,255,.28);
  border-radius:999px;
  padding:13px 22px;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:
    0 6px 18px rgba(160,107,255,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;
}
.ai-wizard-btn:hover{
  transform:translate(-1px,-1px);
  border-color:rgba(255,255,255,.5);
  background:linear-gradient(135deg,rgba(160,107,255,.32),rgba(95,200,255,.32));
  box-shadow:
    0 10px 28px rgba(160,107,255,.32),
    inset 0 1px 0 rgba(255,255,255,.28);
}
.aiw-spark{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#a06bff,#5fc8ff);
  color:#fff;
  box-shadow:0 0 12px rgba(160,107,255,.55);
}

.ai-rate-info{
  margin-top:14px;
  font-family:'DM Sans',sans-serif;font-size:13px;
  color:rgba(255,255,255,.62);
  font-weight:500;
}
.ai-rate-info b{color:#fff;font-weight:700}
.ai-rate-info.is-locked{color:#ffb4a8}
.ai-rate-info.is-locked b{color:#ff7a6c}
.ai-rate-warn{
  display:inline-block;margin-left:6px;
  padding:2px 8px;border-radius:999px;
  background:rgba(255,90,80,.18);
  color:#ffb4a8;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.ai-gen:disabled{
  opacity:.45;cursor:not-allowed;
  filter:grayscale(.4);
  transform:none !important;box-shadow:4px 4px 0 var(--ink) !important;
}

/* ===== STYLE WIZARD MODAL ===== */
.aiw-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(8,8,18,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:aiw-fadein .22s ease;
}
.aiw-overlay[hidden]{display:none}
@keyframes aiw-fadein{from{opacity:0}to{opacity:1}}

.aiw-modal{
  position:relative;
  width:min(560px,100%);
  background:linear-gradient(160deg,#16162a 0%,#0e0e1c 100%);
  border:2px solid rgba(255,255,255,.14);
  border-radius:24px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    0 0 0 1px rgba(160,107,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  padding:32px 30px 26px;
  color:#fff;
  animation:aiw-pop .28s cubic-bezier(.2,.9,.4,1.2);
}
@keyframes aiw-pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}

.aiw-close{
  position:absolute;top:12px;right:14px;
  background:transparent;border:0;color:rgba(255,255,255,.6);
  font-size:28px;line-height:1;cursor:pointer;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.aiw-close:hover{background:rgba(255,255,255,.08);color:#fff}

.aiw-progress{
  display:flex;gap:6px;margin-bottom:14px;
}
.aiw-pdot{
  flex:1;height:4px;border-radius:999px;
  background:rgba(255,255,255,.12);
  transition:background .25s;
}
.aiw-pdot.active{
  background:linear-gradient(90deg,#a06bff,#5fc8ff);
}
.aiw-step-num{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:6px;
}
.aiw-title{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:30px;line-height:1.1;
  letter-spacing:-.02em;
  color:#fff;margin-bottom:6px;
}
.aiw-sub{
  font-family:'DM Sans',sans-serif;font-size:14px;
  color:rgba(255,255,255,.65);
  margin-bottom:22px;
}
.aiw-chips{
  display:grid;grid-template-columns:repeat(2,1fr);gap:9px;
}
.aiw-chip{
  background:rgba(255,255,255,.05);
  border:2px solid rgba(255,255,255,.16);
  color:#fff;
  padding:14px 14px;border-radius:14px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.02em;
  cursor:pointer;
  text-align:left;
  transition:transform .14s,background .14s,border-color .14s,box-shadow .14s;
}
.aiw-chip:hover{
  background:rgba(160,107,255,.16);
  border-color:#a06bff;
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 rgba(160,107,255,.32);
}
.aiw-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:22px;
}
.aiw-back{
  background:transparent;border:0;color:rgba(255,255,255,.6);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;padding:6px 0;
}
.aiw-back:hover{color:#fff}
.aiw-pick-hint{
  font-family:'DM Sans',sans-serif;font-size:12px;
  color:rgba(255,255,255,.45);
  margin-left:auto;
}
@media (max-width:560px){
  .aiw-chips{grid-template-columns:1fr}
  .aiw-modal{padding:26px 22px 22px}
  .aiw-title{font-size:24px}
}

/* ===== UTIL ===== */
.text-center{text-align:center}
.muted{color:var(--ink-mute)}
.hide-mobile{display:initial}
@media (max-width:734px){.hide-mobile{display:none}}
.hide-desktop{display:none}
@media (max-width:734px){.hide-desktop{display:initial}}