:root{--bg:#f6f8fb;--panel:#ffffff;--dark:#07111f;--text:#101828;--muted:#5d6778;--line:#dde5f0;--blue:#006eff;--cyan:#00aaff;--shadow:0 18px 60px rgba(10,25,50,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(1180px,calc(100% - 32px));margin:0 auto}.topbar{background:var(--dark);color:#fff;font-size:14px}.topbar-inner{display:flex;justify-content:space-between;gap:12px;padding:9px 0;flex-wrap:wrap}.topbar a{color:#bce8ff;font-weight:800}
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0}.logo{font-size:25px;font-weight:950;letter-spacing:-.05em}.logo span{color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.nav-links>a,.dropbtn{font-weight:800;color:var(--muted);background:none;border:0;font-size:15px;cursor:pointer;padding:0}.nav-links>a:hover,.dropbtn:hover{color:var(--text)}
.dropdown{position:relative}.dropdown-content{display:none;position:absolute;top:24px;left:0;background:#fff;border:1px solid var(--line);border-radius:16px;min-width:240px;box-shadow:var(--shadow);padding:8px;z-index:120}.dropdown-content a{display:block;padding:10px 12px;border-radius:12px}.dropdown-content a:hover{background:#f3f7ff}.dropdown:hover .dropdown-content{display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:999px;padding:13px 18px;font-weight:900;cursor:pointer;transition:.2s;box-shadow:0 8px 22px rgba(10,25,50,.06)}.btn:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(10,25,50,.14)}.btn-primary{background:linear-gradient(135deg,var(--blue),var(--cyan));border-color:transparent;color:#fff!important}.smallbtn{padding:10px 14px}.big{padding:15px 22px;font-size:16px}
.hero{padding:58px 0 50px;background:radial-gradient(circle at 12% 10%,rgba(0,110,255,.13),transparent 28%),radial-gradient(circle at 88% 22%,rgba(0,170,255,.12),transparent 24%),linear-gradient(180deg,#fff,var(--bg))}.hero-grid,.two-col{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}.hero-copy h1{font-size:clamp(42px,6vw,74px);line-height:.96;letter-spacing:-.075em;margin:0 0 18px}.lead{font-size:20px;line-height:1.62;color:var(--muted)}.badge{display:inline-flex;background:#e9f3ff;color:#075fbd;border:1px solid #cae1ff;border-radius:999px;padding:8px 13px;font-weight:800;margin-bottom:18px}
.value-points{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.value-points div,.benefits div,.reviews div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(10,25,50,.06)}.value-points strong{display:block;font-size:18px}.value-points span{display:block;color:var(--muted);font-size:13px;margin-top:4px}.cta-row,.decision-buttons{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 8px}
.hero-visual,.info-card,.gallery-card,.product-card,.product-detail,.benefits,.faq-list details{background:#fff;border:1px solid var(--line);border-radius:28px;padding:18px;box-shadow:var(--shadow)}.hero-visual img{border-radius:20px}.hero-note,.gallery-card p,.info-card p,.detail-desc p,.cart-note{color:var(--muted)}
.section{padding:76px 0}.section-head{max-width:780px;margin-bottom:28px}.section-head h2{font-size:clamp(32px,4.2vw,52px);line-height:1;letter-spacing:-.06em;margin:0 0 16px}.section-head p{font-size:18px;line-height:1.6;color:var(--muted);margin:0}
.project-methods .two-col,.about .two-col{align-items:stretch}.info-card .tag,.product-detail .tag,.ai-output .tag{display:inline-flex;background:#eaf3ff;color:#075fbd;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:950;margin-bottom:12px}
.mini-pills{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 8px}.mini-pills span{background:#f4f8ff;color:#075fbd;border:1px solid #d6e6ff;padding:8px 11px;border-radius:999px;font-size:13px;font-weight:800}
.projector-steps{display:grid;gap:10px;margin:18px 0}.projector-steps div{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:800}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.gallery-card img{border-radius:18px;aspect-ratio:4/3;object-fit:cover}.gallery-card h3{margin:14px 0 8px;font-size:20px}
.product-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px}.product-card{text-align:center;padding:14px;transition:.2s}.product-card.active{border-color:rgba(0,110,255,.45);box-shadow:0 18px 60px rgba(0,110,255,.12)}.product-card img{height:145px;width:100%;object-fit:contain}.product-card h3{font-size:19px;margin:8px 0 6px}.product-card p{font-size:14px;color:var(--muted);min-height:38px}.product-select{width:100%}
.product-detail{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;padding:22px}.detail-image-wrap{background:#f7f9fc;border:1px solid var(--line);border-radius:22px;padding:14px;display:flex;align-items:center;justify-content:center}.detail-image-wrap img{max-height:360px}.detail-content h3{font-size:34px;margin:0 0 10px}.logo-line{font-size:38px;font-weight:900;letter-spacing:-.04em;margin:12px 0 16px}.reviews{display:grid;gap:10px;margin-bottom:16px}.qty-row label{display:block;font-weight:800;margin-bottom:8px}.qty-row input{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px;background:#f8fafc;font-size:16px}.price-box{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#f7fbff;border:1px solid #cfe3ff;border-radius:16px;padding:14px;margin-top:14px}.price-box strong{font-size:22px}.detail-desc{margin-top:18px}.detail-desc h4{margin:0 0 8px;font-size:18px}.detail-desc ul{padding-left:20px;color:var(--muted);line-height:1.8}.custom-only.hidden{display:none}
.about{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.benefits{display:grid;gap:12px;padding:0;background:none;border:0;box-shadow:none}.benefits div{font-weight:800}
.faq-list{display:grid;gap:14px}.faq-list summary{cursor:pointer;font-weight:900;font-size:18px}.faq-list p{color:var(--muted)}
.cart-fab{position:fixed;right:18px;bottom:18px;z-index:91;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-weight:900;border-radius:999px;padding:14px 18px;box-shadow:0 16px 40px rgba(0,110,255,.3);border:0;cursor:pointer}
.footer{background:var(--dark);color:#b7c4d8;padding:28px 0;margin-top:30px}.footer .logo{color:#fff}.footer-inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}.delay-4{transition-delay:.4s}
.ai-form{display:grid;gap:10px;margin-top:16px}.ai-form label{font-weight:900}.ai-form input,.ai-form select,.ai-form textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px;background:#f8fafc;font-size:16px;font-family:inherit}.ai-form textarea{min-height:110px;resize:vertical}
.ai-status{margin-top:14px;padding:12px 14px;border-radius:14px;background:#f7fbff;border:1px solid #cfe3ff;color:var(--muted);font-weight:800}.ai-status.loading{color:#075fbd}.ai-status.error{color:#b42318;background:#fff3f0;border-color:#ffd0c9}
.ai-result-section{background:linear-gradient(180deg,#ffffff,#eef6ff);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.ai-preview-wrap,.ai-output{background:#fff;border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:var(--shadow)}
.ai-preview{min-height:360px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(0,110,255,.12),transparent 36%),#f6f8fb;border-radius:22px;overflow:hidden;position:relative;padding:14px}.ai-generated-image{width:100%;max-width:520px;border-radius:22px;box-shadow:0 24px 70px rgba(7,17,31,.18);object-fit:cover}.ai-keychain{width:min(520px,92%);height:190px;border-radius:95px;background:#111;position:relative;display:grid;place-items:center;box-shadow:inset 0 16px 28px rgba(255,255,255,.08),inset 0 -18px 35px rgba(0,0,0,.55),0 35px 70px rgba(7,17,31,.22);transform:perspective(900px) rotateX(9deg) rotateY(-8deg);transition:.25s}.ai-logo-preview{max-width:68%;max-height:98px;color:#fff;font-size:42px;font-weight:950;letter-spacing:-.04em;text-align:center}.ai-logo-preview img{max-width:210px;max-height:96px;object-fit:contain}.ai-hole{position:absolute;right:28px;width:48px;height:48px;border-radius:50%;background:#050505;box-shadow:inset 0 0 0 13px #242424}.ai-shadow{width:60%;height:22px;background:rgba(0,0,0,.18);filter:blur(12px);margin:24px auto 0;border-radius:50%}
.ai-output-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.ai-output-grid div{background:#f8fafc;border:1px solid var(--line);border-radius:16px;padding:14px}.ai-output-grid strong{display:block;margin-bottom:6px}.ai-output-grid span{color:var(--muted);line-height:1.45}
.cart-overlay{position:fixed;inset:0;background:rgba(7,17,31,.44);opacity:0;visibility:hidden;transition:.2s;z-index:98}.cart-overlay.open{opacity:1;visibility:visible}.cart-drawer{position:fixed;right:-430px;top:0;height:100dvh;width:min(420px,100%);background:#fff;z-index:99;box-shadow:-24px 0 80px rgba(7,17,31,.18);display:grid;grid-template-rows:auto 1fr auto;transition:.25s}.cart-drawer.open{right:0}.cart-header,.cart-footer{padding:18px;border-left:1px solid var(--line)}.cart-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.cart-header h3{margin:0;font-size:24px}.cart-close{border:0;background:#f3f6fa;border-radius:999px;width:38px;height:38px;font-size:26px;cursor:pointer}.cart-body{padding:18px;overflow:auto;display:grid;gap:12px}.cart-item{border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:10px}.cart-item-top{display:flex;gap:12px;align-items:center}.cart-item img{width:64px;height:64px;object-fit:contain;background:#f7f9fc;border-radius:14px;padding:6px;border:1px solid var(--line)}.cart-item h4{margin:0 0 4px;font-size:18px}.cart-item small{color:var(--muted)}.cart-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.qty-btn,.remove-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:900}.remove-btn{color:#b42318}.cart-summary-row{display:flex;justify-content:space-between;align-items:center;font-size:18px;margin-bottom:10px}.cart-buttons .btn{flex:1}.empty-cart{padding:20px;border:1px dashed var(--line);border-radius:18px;color:var(--muted);text-align:center;background:#fafcff}
@media(max-width:1050px){.product-grid{grid-template-columns:repeat(2,1fr)}.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.hero-grid,.two-col,.product-detail{grid-template-columns:1fr}.value-points,.ai-output-grid{grid-template-columns:1fr}.nav-inner{align-items:flex-start;flex-direction:column}.nav-links{gap:10px}.hero-copy h1{font-size:42px}.gallery-grid,.product-grid{grid-template-columns:1fr}.cart-drawer{width:100%}}


.form-hint{display:block;margin:-4px 0 10px;color:#5b6475;font-size:14px;line-height:1.5;}

/* v10 — pierwszy ekran inspirowany stroną kursu, ale pod BrelokiZNFC */
.hero-kurs-style{
  padding:34px 0 62px;
  background:#ffffff;
}
.hero-card-main{
  min-height:720px;
  border-radius:46px;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 28px 80px rgba(7,17,31,.16);
  border:1px solid rgba(0,0,0,.06);
  isolation:isolate;
}
.hero-bg-layer{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,33,58,.18), rgba(0,33,58,.72)),
    url("images/realizacja-1.png");
  background-size:cover;
  background-position:center;
  transform:scale(1.06);
  filter:saturate(1.1) contrast(1.05);
  z-index:-2;
}
.hero-card-main::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.35), transparent 26%),
    linear-gradient(135deg, rgba(0,170,255,.28), rgba(0,20,45,.60));
  z-index:-1;
}
.hero-content-new{
  width:min(760px, calc(100% - 42px));
  text-align:center;
  color:#fff;
  padding:64px 16px;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.48);
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  border-radius:999px;
  padding:10px 16px;
  font-weight:950;
  margin-bottom:26px;
}
.hero-content-new h1{
  margin:0;
  font-size:clamp(42px, 8vw, 92px);
  line-height:.92;
  letter-spacing:-.075em;
  font-weight:950;
}
.hero-content-new h1 span{
  display:block;
}
.hero-content-new h1 span:nth-child(2){
  background:#fff;
  color:#06182c;
  display:inline-block;
  padding:0 16px 8px;
  margin:4px 0;
}
.hero-subtitle-new{
  color:#fff;
  font-size:clamp(18px, 2.8vw, 25px);
  font-weight:800;
  line-height:1.35;
  margin:26px auto 0;
  max-width:690px;
}
.hero-actions-new{
  display:grid;
  gap:18px;
  width:min(660px, 100%);
  margin:34px auto 0;
}
.hero-btn{
  border-radius:999px;
  padding:18px 22px;
  font-weight:950;
  text-align:center;
  font-size:18px;
  box-shadow:0 18px 42px rgba(0,0,0,.18);
  transition:.2s;
}
.hero-btn:hover{
  transform:translateY(-2px);
}
.hero-btn-light{
  background:#fff;
  color:#06182c;
}
.hero-btn-dark{
  background:#06243a;
  color:#fff;
}
.hero-trust-row{
  margin:26px auto 0;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-trust-row span{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  border-radius:999px;
  padding:9px 12px;
  font-weight:900;
  font-size:14px;
}
.quick-hook{
  background:#fff;
  margin-top:-24px;
  position:relative;
  z-index:2;
  padding:0 0 34px;
}
.quick-hook-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.quick-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:24px;
  padding:18px;
}
.quick-card strong{
  display:block;
  font-size:20px;
  margin-bottom:6px;
}
.quick-card span{
  color:var(--muted);
  line-height:1.45;
}
.project-methods{
  padding-top:52px;
}
.ai-generator-card > p{
  font-size:18px;
  line-height:1.45;
}
.compact-pills span{
  font-size:13px;
}
.contact-bubble{
  position:fixed;
  right:18px;
  bottom:82px;
  z-index:92;
  width:70px;
  height:70px;
  border-radius:50%;
  background:#06243a;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:30px;
  text-decoration:none;
  box-shadow:0 18px 45px rgba(7,17,31,.32);
}
.contact-bubble span{
  position:absolute;
  left:8px;
  bottom:8px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#35e77f;
  border:3px solid #fff;
}
@media(max-width:900px){
  .hero-kurs-style{
    padding-top:20px;
  }
  .hero-card-main{
    min-height:650px;
    border-radius:40px;
  }
  .hero-content-new{
    padding:54px 10px;
  }
  .hero-actions-new{
    gap:14px;
  }
  .quick-hook-grid{
    grid-template-columns:1fr;
  }
  .contact-bubble{
    width:62px;
    height:62px;
    bottom:80px;
  }
}
@media(max-width:520px){
  .hero-card-main{
    min-height:610px;
    border-radius:34px;
  }
  .hero-content-new h1{
    font-size:46px;
  }
  .hero-subtitle-new{
    font-size:18px;
  }
  .hero-btn{
    padding:16px 18px;
  }
}


/* v11 — retention modules */
.hero-v11{padding:42px 0 52px;background:#fff}.hero-v11-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:28px;align-items:stretch}.hero-copy-v11{background:radial-gradient(circle at 10% 0%,rgba(0,170,255,.12),transparent 32%),linear-gradient(180deg,#fff,#eef7ff);border:1px solid var(--line);border-radius:42px;box-shadow:var(--shadow);padding:42px}.hero-copy-v11 h1{margin:0;font-size:clamp(40px,6.6vw,78px);line-height:.94;letter-spacing:-.075em;max-width:760px}.hero-mini-generator{background:#fff;border:1px solid var(--line);border-radius:28px;padding:18px;margin-top:24px;box-shadow:0 14px 36px rgba(7,17,31,.08)}.hero-mini-generator label{display:block;font-weight:950;margin-bottom:12px}.hero-form-row{display:grid;grid-template-columns:1fr 180px;gap:10px;margin-bottom:10px}.hero-mini-generator input,.hero-mini-generator select{width:100%;border:1px solid var(--line);border-radius:16px;padding:14px;background:#f8fafc}.hero-mini-generator .hero-btn{width:100%;border:0;margin-top:12px}.hero-showcase-v11{background:linear-gradient(180deg,rgba(0,37,64,.18),rgba(0,37,64,.74)),url("images/realizacja-1.png");background-size:cover;background-position:center;min-height:650px;border-radius:42px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06);padding:26px;display:grid;align-content:space-between;gap:18px;overflow:hidden;position:relative}.logo-to-keychain-demo{background:rgba(255,255,255,.92);border-radius:30px;padding:20px;display:grid;grid-template-columns:1fr auto 1.3fr;align-items:center;gap:14px;box-shadow:0 18px 48px rgba(0,0,0,.16)}.demo-logo-box{min-height:116px;border:2px dashed #c9d8ec;border-radius:22px;display:grid;place-items:center;text-align:center;font-weight:950;color:#0a2a44;background:#f8fbff}.demo-arrow{font-size:34px;font-weight:950;color:#006eff;animation:arrowPulse 1.8s infinite}@keyframes arrowPulse{0%,100%{transform:translateX(0);opacity:.65}50%{transform:translateX(8px);opacity:1}}.demo-keychain{height:130px;border-radius:70px 38px 70px 38px;background:#fff;color:#09233a;border:7px solid #09233a;display:grid;place-items:center;font-size:30px;font-weight:950;position:relative;box-shadow:0 15px 35px rgba(0,0,0,.16)}.demo-hole{position:absolute;right:14px;top:14px;width:25px;height:25px;border-radius:50%;border:7px solid #09233a;background:#fff}.demo-nfc{position:absolute;bottom:10px;right:34px;font-size:12px;color:#006eff}.phone-nfc-demo{justify-self:end}.phone-frame{width:210px;height:380px;border-radius:34px;background:#07111f;padding:10px;box-shadow:0 24px 58px rgba(0,0,0,.30)}.phone-top{width:66px;height:8px;background:#1f2937;border-radius:999px;margin:0 auto 10px}.phone-screen{height:calc(100% - 18px);background:linear-gradient(180deg,#fff,#eaf5ff);border-radius:26px;padding:20px;display:grid;place-items:center;text-align:center}.tap-label{font-weight:950;color:#0a2a44}.nfc-waves{font-size:42px;color:#006eff;animation:nfcWave 1.2s infinite}@keyframes nfcWave{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:1;transform:scale(1.08)}}.phone-result{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 10px 22px rgba(7,17,31,.08)}.phone-result strong,.phone-result small{display:block}.phone-result small{color:var(--muted);margin-top:4px}.mini-price-card{background:rgba(255,255,255,.94);border-radius:24px;padding:18px;box-shadow:0 18px 42px rgba(0,0,0,.16)}.mini-price-card span,.mini-price-card strong{display:block}.mini-price-card span{color:var(--muted);margin-bottom:5px}.mini-price-card strong{font-size:22px;color:#06182c}.nfc-steps{display:grid;gap:12px;margin-top:22px}.nfc-steps div{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 10px 28px rgba(7,17,31,.06)}.nfc-steps strong{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff}.phone-demo-big{position:relative;display:grid;place-items:center}.phone-large{width:260px;height:470px}.phone-card-site{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 12px 30px rgba(7,17,31,.12)}.fake-browser-bar{margin-top:12px;padding:10px;border-radius:999px;background:#eef6ff;color:#075fbd;font-weight:800;font-size:13px}.floating-keychain-small{position:absolute;right:80px;bottom:46px;width:100px;height:58px;border-radius:999px;background:#fff;border:5px solid #06243a;display:grid;place-items:center;color:#006eff;font-weight:950;box-shadow:0 18px 42px rgba(7,17,31,.18)}.before-after{background:#fff;border:1px solid var(--line);border-radius:32px;box-shadow:var(--shadow);padding:24px;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}.before-panel,.after-panel{min-height:260px;border-radius:24px;background:#f8fbff;border:1px solid var(--line);display:grid;place-items:center;position:relative}.before-panel span,.after-panel span{position:absolute;top:14px;left:14px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-weight:900}.simple-logo-preview{font-size:46px;font-weight:950;color:#0a2a44}.before-after input{writing-mode:bt-lr;width:48px;accent-color:#006eff}.after-keychain-preview{width:min(300px,80%);height:140px;border-radius:90px 38px 90px 38px;background:#fff;border:8px solid #06243a;display:grid;place-items:center;position:relative;color:#06243a;box-shadow:0 20px 45px rgba(7,17,31,.12)}.after-keychain-preview strong{font-size:38px}.after-keychain-preview em{position:absolute;bottom:14px;right:42px;color:#006eff;font-style:normal;font-weight:950;font-size:13px}.after-keychain-preview i{position:absolute;right:14px;top:14px;width:28px;height:28px;border:7px solid #06243a;border-radius:50%}.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.audience-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow)}.audience-card strong,.audience-card span{display:block}.audience-card strong{font-size:20px;margin-bottom:6px}.audience-card span{color:var(--muted)}.audience-all{grid-column:span 3;background:linear-gradient(135deg,#06182c,#0b63ce);color:#fff}.audience-all span{color:#dcecff}.calc-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:24px;box-shadow:var(--shadow)}.calc-card label{font-weight:900;display:block;margin:14px 0 8px}.calc-card input[type="range"]{width:100%;accent-color:#006eff}.calc-card select{width:100%;border:1px solid var(--line);border-radius:16px;padding:13px;background:#f8fafc}.check-row{display:flex!important;align-items:center;gap:10px}.check-row input{width:auto}.calc-row{display:flex;justify-content:space-between;margin:10px 0}.calc-total{margin-top:20px;background:linear-gradient(135deg,#06182c,#006eff);color:#fff;border-radius:22px;padding:20px}.calc-total span,.calc-total strong,.calc-total small{display:block}.calc-total strong{font-size:36px;margin:5px 0}.calc-total small{color:#dcecff}.recent-track{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.recent-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:14px;box-shadow:var(--shadow)}.recent-card img{width:100%;height:150px;object-fit:cover;border-radius:18px;background:#f7f9fc;border:1px solid var(--line)}.recent-card strong,.recent-card span{display:block}.recent-card strong{margin-top:12px}.recent-card span{color:var(--muted);margin-top:4px}.ordinary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.ordinary-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;font-weight:950;box-shadow:var(--shadow)}@media(max-width:980px){.hero-v11-grid,.before-after,.audience-grid,.recent-track,.ordinary-grid{grid-template-columns:1fr}.audience-all{grid-column:auto}.hero-form-row{grid-template-columns:1fr}.hero-showcase-v11{min-height:560px}.logo-to-keychain-demo{grid-template-columns:1fr}.demo-arrow{transform:rotate(90deg)}.before-after input{width:100%;writing-mode:horizontal-tb}}



/* === v14: zmieniona LEWA część hero, PRAWA zostaje jak była === */

.hero-v11{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 14%, rgba(0,174,255,.11), transparent 24%),
    radial-gradient(circle at 78% 8%, rgba(36,98,255,.10), transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#f5fbff 100%) !important;
}

.hero-v11::before{
  content:"";
  position:absolute;
  inset:-90px -20px auto -20px;
  height:650px;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 30%, rgba(0,174,255,.16), transparent 18%),
    radial-gradient(circle at 74% 18%, rgba(25,91,255,.13), transparent 16%),
    radial-gradient(circle at 88% 72%, rgba(0,210,255,.11), transparent 18%);
  animation: heroAmbientMoveV14 13s ease-in-out infinite;
  z-index:0;
}

.hero-v11::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(0,110,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,110,255,.05) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(180deg, transparent 0%, black 12%, black 56%, transparent 100%);
  animation: heroGridDriftV14 18s linear infinite;
  z-index:0;
}

.hero-v11 .container{
  position:relative;
  z-index:2;
}

/* lewy panel: wersja bardziej landingowa jak w zmianie, ale bez ruszania prawej strony */
.hero-copy-v11{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:
    radial-gradient(circle at 12% 8%, rgba(0,174,255,.20), transparent 28%),
    radial-gradient(circle at 84% 16%, rgba(78,114,255,.15), transparent 24%),
    radial-gradient(circle at 70% 92%, rgba(0,210,255,.13), transparent 25%),
    linear-gradient(180deg, #f9fcff 0%, #eef7ff 48%, #e8f3ff 100%) !important;
}

.hero-copy-v11::before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  left:-90px;
  top:-70px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,180,255,.25) 0%, rgba(0,180,255,.08) 45%, transparent 72%);
  filter:blur(8px);
  animation: heroFloatOneV14 9s ease-in-out infinite;
  z-index:-1;
}

.hero-copy-v11::after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  right:-80px;
  bottom:20px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(63,102,255,.20) 0%, rgba(63,102,255,.07) 45%, transparent 72%);
  filter:blur(10px);
  animation: heroFloatTwoV14 11s ease-in-out infinite;
  z-index:-1;
}

.hero-copy-v11 .hero-eyebrow{
  position:relative;
  z-index:3;
  margin-left:auto;
  margin-right:auto;
  color:#08243a !important;
  background:rgba(255,255,255,.84) !important;
  border:1px solid rgba(0,110,255,.14) !important;
  box-shadow:0 14px 36px rgba(7,17,31,.08);
}

/* małe animowane fale NFC w lewym panelu */
.hero-copy-v11 .hero-eyebrow::before,
.hero-copy-v11 .hero-eyebrow::after{
  content:")))";
  position:absolute;
  font-weight:950;
  letter-spacing:-5px;
  color:rgba(0,110,255,.18);
  pointer-events:none;
  animation:nfcSignalFloatV14 3.6s ease-in-out infinite;
}

.hero-copy-v11 .hero-eyebrow::before{
  left:-22px;
  top:-24px;
  transform:rotate(-18deg);
}

.hero-copy-v11 .hero-eyebrow::after{
  right:-30px;
  bottom:-28px;
  transform:rotate(18deg);
  animation-delay:1.3s;
}

/* nowy napis po lewej */
.hero-left-title{
  margin:22px auto 0 !important;
  display:grid !important;
  justify-items:center !important;
  gap:4px !important;
  text-align:center !important;
  font-size:clamp(44px, 6.8vw, 86px) !important;
  line-height:.88 !important;
  letter-spacing:-.085em !important;
  font-weight:950 !important;
  color:#07111f !important;
  max-width:820px !important;
  position:relative;
  z-index:3;
}

.hero-left-title span{
  display:block;
}

.hero-left-title .title-highlight{
  background:#ffffff;
  color:#06182c;
  padding:0 18px 10px;
  border-radius:3px;
  box-shadow:0 18px 42px rgba(7,17,31,.10);
}

.hero-left-title::after{
  content:"";
  display:block;
  width:min(320px,58%);
  height:10px;
  margin:18px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(0,110,255,.45), rgba(0,210,255,.38), transparent);
  animation:titleGlowV14 3.6s ease-in-out infinite;
}

.hero-subtitle-new{
  color:#17324d !important;
  font-weight:850 !important;
  opacity:1 !important;
  position:relative;
  z-index:3;
  text-shadow:none !important;
  text-align:center !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* formularz po lewej zostaje pod spodem i wygląda czytelnie */
.hero-mini-generator{
  position:relative;
  z-index:4;
  background:rgba(255,255,255,.95) !important;
  backdrop-filter:blur(8px);
  border:1px solid rgba(0,110,255,.13) !important;
  box-shadow:0 24px 70px rgba(7,17,31,.13) !important;
  width:100%;
  max-width:680px;
}

.hero-mini-generator::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:28px;
  padding:1px;
  background:linear-gradient(135deg, rgba(0,174,255,.42), transparent 30%, rgba(0,110,255,.24));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.hero-mini-generator .hero-btn,
.hero-btn-light{
  position:relative;
  overflow:hidden;
}

.hero-mini-generator .hero-btn::after,
.hero-btn-light::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-90%;
  width:54%;
  height:180%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
  transform:rotate(18deg);
  animation:ctaShineV14 3.4s ease-in-out infinite;
  pointer-events:none;
}

.hero-trust-row{
  position:relative;
  z-index:3;
}

.hero-trust-row span{
  background:rgba(255,255,255,.84) !important;
  color:#0b2740 !important;
  border:1px solid rgba(62,117,255,.18) !important;
  box-shadow:0 10px 24px rgba(7,17,31,.06);
}

/* prawa strona zostaje, tylko dopilnowanie że jest po prawej i ewentualnie niżej na mniejszych ekranach */
.hero-showcase-v11{
  position:relative;
  overflow:hidden;
}

.hero-showcase-v11::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.36), transparent 18%),
    radial-gradient(circle at 82% 78%, rgba(0,174,255,.20), transparent 20%);
  animation:showcaseGlowV14 8s ease-in-out infinite;
  pointer-events:none;
}

.logo-to-keychain-demo{
  position:relative;
  z-index:2;
  animation:demoCardFloatV14 5.8s ease-in-out infinite;
}

.demo-keychain{
  animation:keychainPulseV14 3.4s ease-in-out infinite;
}

.demo-keychain::before,
.demo-keychain::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:inherit;
  border:2px solid rgba(0,110,255,.18);
  animation:keychainRingV14 2.7s ease-out infinite;
  pointer-events:none;
}

.demo-keychain::after{
  animation-delay:1.1s;
}

.phone-nfc-demo{
  position:relative;
  z-index:2;
  animation:phoneFloatV14 6.2s ease-in-out infinite;
}

.phone-frame{
  position:relative;
}

.phone-frame::after{
  content:"";
  position:absolute;
  inset:-16px;
  border-radius:44px;
  border:2px solid rgba(255,255,255,.24);
  animation:phonePingV14 2.8s ease-out infinite;
  pointer-events:none;
}

.mini-price-card{
  position:relative;
  z-index:2;
  animation:priceFloatV14 6.8s ease-in-out infinite;
}

/* animacje */
@keyframes heroGridDriftV14{
  0%{background-position:0 0,0 0;}
  100%{background-position:58px 58px,58px 58px;}
}

@keyframes heroAmbientMoveV14{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.72;}
  50%{transform:translate3d(0,14px,0) scale(1.04);opacity:1;}
  100%{transform:translate3d(0,0,0) scale(1);opacity:.72;}
}

@keyframes heroFloatOneV14{
  0%{transform:translate(0,0) scale(1);}
  25%{transform:translate(20px,16px) scale(1.05);}
  50%{transform:translate(36px,38px) scale(1.1);}
  75%{transform:translate(12px,24px) scale(1.04);}
  100%{transform:translate(0,0) scale(1);}
}

@keyframes heroFloatTwoV14{
  0%{transform:translate(0,0) scale(1);}
  25%{transform:translate(-18px,-8px) scale(1.04);}
  50%{transform:translate(-36px,-24px) scale(1.09);}
  75%{transform:translate(-16px,10px) scale(1.04);}
  100%{transform:translate(0,0) scale(1);}
}

@keyframes titleGlowV14{
  0%,100%{opacity:.38;transform:scaleX(.92);}
  50%{opacity:1;transform:scaleX(1);}
}

@keyframes nfcSignalFloatV14{
  0%,100%{opacity:.18;transform:translateY(0) rotate(-16deg) scale(.95);}
  50%{opacity:.55;transform:translateY(-6px) rotate(-16deg) scale(1.08);}
}

@keyframes ctaShineV14{
  0%,48%{left:-90%;opacity:0;}
  58%{opacity:.9;}
  76%{left:135%;opacity:0;}
  100%{left:135%;opacity:0;}
}

@keyframes showcaseGlowV14{
  0%,100%{opacity:.55;transform:scale(1);}
  50%{opacity:1;transform:scale(1.05);}
}

@keyframes demoCardFloatV14{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

@keyframes keychainPulseV14{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.035);}
}

@keyframes keychainRingV14{
  0%{opacity:.55;transform:scale(.96);}
  100%{opacity:0;transform:scale(1.12);}
}

@keyframes phoneFloatV14{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-12px) rotate(-1.2deg);}
}

@keyframes phonePingV14{
  0%{opacity:.65;transform:scale(.98);}
  100%{opacity:0;transform:scale(1.08);}
}

@keyframes priceFloatV14{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(8px);}
}

/* Mobile: prawa strona ląduje pod spodem, lewa zostaje mocna */
@media(max-width:980px){
  .hero-showcase-v11{
    margin-top:18px;
  }
}

@media(max-width:700px){
  .hero-left-title{
    font-size:clamp(42px,12vw,62px) !important;
  }

  .hero-subtitle-new{
    color:#193754 !important;
    font-size:18px !important;
  }

  .hero-copy-v11::before{
    width:230px;
    height:230px;
    left:-70px;
    top:-40px;
  }

  .hero-copy-v11::after{
    width:190px;
    height:190px;
    right:-54px;
    bottom:110px;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-v11::before,
  .hero-v11::after,
  .hero-copy-v11::before,
  .hero-copy-v11::after,
  .hero-copy-v11 .hero-eyebrow::before,
  .hero-copy-v11 .hero-eyebrow::after,
  .hero-mini-generator .hero-btn::after,
  .hero-btn-light::after,
  .hero-showcase-v11::before,
  .logo-to-keychain-demo,
  .demo-keychain,
  .demo-keychain::before,
  .demo-keychain::after,
  .phone-nfc-demo,
  .phone-frame::after,
  .mini-price-card{
    animation:none !important;
  }
}



/* === v15: nowe animowane tło po lewej jak landing KURS, ale pod BrelokiZNFC === */
.hero-copy-v11{
  background:
    radial-gradient(circle at 10% 10%, rgba(93,214,255,.34), transparent 26%),
    radial-gradient(circle at 82% 16%, rgba(84,126,255,.20), transparent 24%),
    linear-gradient(180deg, #eefaff 0%, #eaf4ff 45%, #edf2ff 100%) !important;
}

.hero-copy-v11::before{
  width:480px;
  height:480px;
  left:-130px;
  top:-130px;
  background:radial-gradient(circle, rgba(0,194,255,.34) 0%, rgba(0,194,255,.10) 42%, transparent 72%);
  filter:blur(14px);
}

.hero-copy-v11::after{
  width:380px;
  height:380px;
  right:-110px;
  bottom:-20px;
  background:radial-gradient(circle, rgba(77,112,255,.24) 0%, rgba(77,112,255,.08) 44%, transparent 72%);
  filter:blur(14px);
}

.hero-brand-scene{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}

.scene-link{
  position:absolute;
  opacity:.78;
}

/* telefon sunący do breloka */
.scene-phone{
  width:118px;
  height:198px;
  right:34px;
  top:118px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(10,27,48,.10), rgba(255,255,255,.52));
  border:2px solid rgba(7,17,31,.10);
  box-shadow:0 18px 46px rgba(22,56,108,.10), inset 0 0 0 8px rgba(255,255,255,.32);
  transform:rotate(10deg);
  animation: scenePhoneTapV15 6.8s ease-in-out infinite;
  backdrop-filter:blur(4px);
}
.scene-phone::before{
  content:"";
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:42px;
  height:6px;
  border-radius:999px;
  background:rgba(7,17,31,.20);
}
.scene-phone::after{
  content:"Twoja\A strona";
  white-space:pre;
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  text-align:center;
  font-size:18px;
  line-height:1.1;
  font-weight:900;
  color:rgba(7,17,31,.36);
}

/* brelok w tle */
.scene-keychain{
  left:28px;
  top:152px;
  width:174px;
  height:94px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.42));
  border:3px solid rgba(7,17,31,.10);
  box-shadow:0 20px 55px rgba(0,77,146,.10);
  transform:rotate(-10deg);
  animation: sceneKeychainFloatV15 7.6s ease-in-out infinite;
}
.scene-keychain::before{
  content:"";
  position:absolute;
  right:13px;
  top:15px;
  width:18px;
  height:18px;
  border-radius:50%;
  border:3px solid rgba(7,17,31,.30);
  background:rgba(255,255,255,.56);
}
.scene-keychain::after{
  content:"LOGO";
  position:absolute;
  left:24px;
  top:29px;
  font-size:32px;
  font-weight:950;
  color:rgba(7,17,31,.24);
}
.scene-keychain span{
  position:absolute;
  right:26px;
  bottom:14px;
  font-size:13px;
  font-weight:950;
  color:rgba(0,110,255,.62);
}

/* fale NFC między telefonem a brelokiem */
.scene-waves{
  right:146px;
  top:166px;
  width:110px;
  height:110px;
}
.scene-waves i{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid rgba(0,117,255,.22);
  animation: sceneWavePulseV15 2.6s ease-out infinite;
  opacity:0;
}
.scene-waves i:nth-child(2){animation-delay:.75s;}
.scene-waves i:nth-child(3){animation-delay:1.5s;}

/* subtelna przerywana ścieżka jak na stronie kursu */
.scene-path{
  left:78px;
  bottom:132px;
  width:220px;
  height:78px;
  border-bottom:3px dashed rgba(0,149,255,.18);
  border-right:3px dashed rgba(0,149,255,.18);
  border-radius:0 0 56px 0;
  transform:rotate(-6deg);
  animation: scenePathDriftV15 8s ease-in-out infinite;
}
.scene-path::before,
.scene-path::after{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgba(0,149,255,.22);
}
.scene-path::before{left:-7px; bottom:-7px;}
.scene-path::after{right:-7px; top:calc(100% - 7px);}

/* mały chip NFC/iskra w rogu */
.scene-chip{
  right:98px;
  bottom:150px;
  width:72px;
  height:72px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.44));
  border:2px solid rgba(0,110,255,.12);
  box-shadow:0 14px 32px rgba(0,77,146,.08);
  animation: sceneChipFloatV15 7s ease-in-out infinite;
}
.scene-chip::before{
  content:"NFC";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(0,110,255,.50);
  font-size:18px;
  font-weight:950;
}
.scene-chip::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:12px;
  border:2px solid rgba(0,110,255,.12);
}

.hero-copy-v11 > *:not(.hero-brand-scene){
  position:relative;
  z-index:3;
}

.hero-left-title{
  text-shadow:0 8px 22px rgba(255,255,255,.22);
}

@keyframes scenePhoneTapV15{
  0%,100%{transform:translate(0,0) rotate(10deg);}
  45%{transform:translate(-22px,8px) rotate(7deg);}
  60%{transform:translate(-22px,8px) rotate(7deg);}
}
@keyframes sceneKeychainFloatV15{
  0%,100%{transform:translate(0,0) rotate(-10deg);}
  50%{transform:translate(12px,-8px) rotate(-7deg);}
}
@keyframes sceneWavePulseV15{
  0%{transform:scale(.25); opacity:0;}
  28%{opacity:.8;}
  100%{transform:scale(1.06); opacity:0;}
}
@keyframes scenePathDriftV15{
  0%,100%{transform:translateX(0) rotate(-6deg);opacity:.78;}
  50%{transform:translateX(10px) rotate(-4deg);opacity:1;}
}
@keyframes sceneChipFloatV15{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-10px) rotate(4deg);}
}

@media(max-width:980px){
  .scene-phone{right:18px; top:116px; width:106px; height:182px;}
  .scene-keychain{left:18px; top:162px; width:150px; height:82px;}
  .scene-keychain::after{font-size:27px; top:24px;}
  .scene-waves{right:118px; top:174px; width:88px; height:88px;}
  .scene-chip{right:66px; bottom:138px; width:60px; height:60px;}
}

@media(max-width:700px){
  .hero-brand-scene{
    opacity:.72;
  }
  .scene-phone{
    right:-8px;
    top:110px;
    width:92px;
    height:156px;
  }
  .scene-phone::after{font-size:14px;}
  .scene-keychain{
    left:-4px;
    top:154px;
    width:132px;
    height:74px;
  }
  .scene-keychain::after{font-size:22px; left:18px; top:24px;}
  .scene-keychain span{font-size:11px; right:18px; bottom:10px;}
  .scene-waves{right:78px; top:164px; width:70px; height:70px;}
  .scene-path{left:46px; bottom:122px; width:160px; height:58px;}
  .scene-chip{right:38px; bottom:134px; width:46px; height:46px; border-radius:12px;}
  .scene-chip::before{font-size:12px;}
}

@media (prefers-reduced-motion: reduce){
  .scene-phone,
  .scene-keychain,
  .scene-waves i,
  .scene-path,
  .scene-chip{
    animation:none !important;
  }
}