/* =========================

   VoiceCalendar — styles.css (LIGHT)

   ========================= */



/* ---------- Reset / base ---------- */

:root{

  /* Light background system */

  --bg:#f7f8ff;

  --bg2:#eef2ff;

  --paper: rgba(255,255,255,.72);

  --paper2: rgba(255,255,255,.86);



  --card: rgba(255,255,255,.72);

  --card2: rgba(255,255,255,.88);



  --stroke: rgba(30,41,59,.12);

  --stroke2: rgba(30,41,59,.18);



  --text: rgba(15,23,42,.94);

  --muted: rgba(15,23,42,.72);

  --muted2: rgba(15,23,42,.55);



  /* Accent gradients */

  --accent:#6d5cff;

  --accent2:#2dd4bf;



  --good:#16a34a;

  --warn:#f59e0b;



  --shadow: 0 22px 70px rgba(15,23,42,.12);

  --shadow2: 0 12px 30px rgba(15,23,42,.10);



  --radius:18px;

  --radius2:24px;



  --container:1120px;

}



*{box-sizing:border-box}

html,body{height:100%}

body{

  margin:0;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

  color:var(--text);

  line-height:1.55;

  -webkit-font-smoothing:antialiased;

  text-rendering:optimizeLegibility;



  /* Light gradients */

  background:

    radial-gradient(1100px 520px at 12% 8%, rgba(109,92,255,.22), transparent 60%),

    radial-gradient(900px 520px at 88% 18%, rgba(45,212,191,.18), transparent 58%),

    radial-gradient(750px 420px at 70% 92%, rgba(99,102,241,.12), transparent 60%),

    linear-gradient(180deg, var(--bg), var(--bg2));

}



a{color:inherit;text-decoration:none}

a:hover{opacity:.96}

img{max-width:100%;height:auto}

button,input,textarea{font:inherit}

::selection{background:rgba(109,92,255,.22)}



.container{

  width:min(var(--container), calc(100% - 40px));

  margin:0 auto;

}



.muted{color:var(--muted)}

.micro{

  font-size:13px;

  color:var(--muted);

}

.sub{

  color:var(--muted);

  max-width:900px;

}



/* ---------- Ambient layers ---------- */

.geoLinks{

  position:fixed;

  inset:0;
  pointer-events:none;

  opacity:.60;

  background:

    radial-gradient(820px 460px at 20% 75%, rgba(109,92,255,.12), transparent 60%),

    radial-gradient(700px 420px at 85% 80%, rgba(45,212,191,.10), transparent 58%);

  z-index:-3;

}



.bgWaves{

  position:fixed;

  inset:-20px;

  pointer-events:none;

  z-index:-2;

  opacity:.55;

}

.bgWaves span{

  position:absolute;

  width:900px;

  height:900px;

  border-radius:50%;

  background: radial-gradient(circle at 30% 30%, rgba(15,23,42,.08), transparent 62%);

  filter: blur(22px);

  animation: floaty 18s ease-in-out infinite;

  will-change: transform;

}

.bgWaves span:nth-child(1){left:-240px; top:140px; animation-duration: 20s; opacity:.45;}

.bgWaves span:nth-child(2){right:-320px; top:-140px; animation-duration: 24s; opacity:.30;}

.bgWaves span:nth-child(3){right:-160px; bottom:-260px; animation-duration: 28s; opacity:.24;}



@keyframes floaty{

  0%,100%{transform:translate3d(0,0,0) scale(1)}

  50%{transform:translate3d(40px,-25px,0) scale(1.05)}

}



/* ---------- Sections ---------- */

.section{

  padding:74px 0;

  position:relative;

}

.bgA{background:transparent}

.bgB{

  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.00));

}

.bgC{

  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.15));

}



.eyebrow{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:8px 12px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:999px;

  color:var(--muted);

  font-size:13px;

  margin-bottom:14px;

  box-shadow: 0 10px 25px rgba(15,23,42,.06);

}

.eyebrow .mark{

  width:10px;height:10px;border-radius:50%;

  background:linear-gradient(135deg, var(--accent), var(--accent2));

  box-shadow:0 0 0 4px rgba(109,92,255,.14);

}



/* ---------- Header / nav ---------- */

.header{

  position:sticky;

  top:0;

  z-index:50;



  background: rgba(247,248,255,.62);

  border-bottom:1px solid rgba(15,23,42,.10);



  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}

@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))){

  .header{ background: rgba(247,248,255,.92); }

}



.nav{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:16px;

  padding:14px 0;

}



.brand{

  display:flex;

  align-items:center;

  gap:10px;

}

.brandInner{

  display:flex;

  align-items:center;

  gap:12px;

}

.logo{

  width:34px;height:34px;border-radius:12px;

  background:

    radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), transparent 55%),

    linear-gradient(135deg, var(--accent), rgba(45,212,191,.85));

  box-shadow:0 10px 24px rgba(109,92,255,.18);

  border:1px solid rgba(15,23,42,.10);

}

.brandText strong{

  display:block;

  font-size:14px;

  letter-spacing:.2px;

}

.brandText span{

  display:block;

  font-size:12px;

  color:var(--muted);

}



.navCenter{flex:1; display:flex; justify-content:center}

.menuPill{

  display:inline-flex;

  align-items:center;

  gap:14px;

  padding:10px 12px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:999px;

  box-shadow: 0 10px 25px rgba(15,23,42,.06);

}

.menuPill a{

  font-size:13px;

  color:var(--muted);

  padding:6px 8px;

  border-radius:10px;

}

.menuPill a:hover{

  background:rgba(15,23,42,.05);

  color:var(--text);

}



.navActions{display:flex; align-items:center; gap:10px}

.desktopActions{display:flex; align-items:center; gap:10px}



.burger{

  display:none;

  width:44px;height:44px;

  border-radius:14px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  color:var(--text);

  cursor:pointer;

  box-shadow: 0 10px 25px rgba(15,23,42,.06);

}

.burger:hover{background:rgba(255,255,255,.82)}



/* Dropdown "Więcej" */

.dd{position:relative; display:inline-flex}

.dd button{

  border:0;

  background:transparent;

  color:var(--muted);

  padding:6px 10px;

  border-radius:10px;

  cursor:pointer;

  font-size:13px;

}

.dd button:hover{background:rgba(15,23,42,.05); color:var(--text)}

.chevSmall{opacity:.8; margin-left:4px}



.ddPanel{

  position:absolute;

  top:44px;

  right:0;

  min-width:190px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.86);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border-radius:14px;

  box-shadow: var(--shadow2);

  padding:8px;

  display:none;

  z-index:60;

}

.ddPanel a{

  display:block;

  padding:10px 10px;

  border-radius:12px;

  color:var(--muted);

  font-size:13px;

}

.ddPanel a:hover{background:rgba(15,23,42,.05); color:var(--text)}

.dd.open .ddPanel{display:block}

.dd:focus-within .ddPanel{display:block}



/* Mobile menu */

.mobileMenu{

  display:none;

  border-top:1px solid rgba(15,23,42,.10);

  background: rgba(255,255,255,.55);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}

.mobileMenu .panel{

  padding:16px 0 18px;

  display:grid;

  gap:10px;

}

.mobileMenu a{

  padding:12px 12px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.72);

  border-radius:14px;

  color:var(--muted);

  box-shadow: 0 10px 25px rgba(15,23,42,.05);

}

.mobileMenu a:hover{background:rgba(255,255,255,.92); color:var(--text)}

.mobileCtas{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

  margin-bottom:6px;

}

.mobileMenu.open{display:block}

.header.menuOpen{background:rgba(247,248,255,.86)}



/* ---------- Buttons ---------- */

.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  padding:12px 14px;

  border-radius:14px;

  border:1px solid transparent;

  cursor:pointer;

  font-weight:700;

  font-size:14px;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;

  user-select:none;

}

.btn:active{transform:translateY(1px)}

.btnPrimary{

  background:linear-gradient(135deg, var(--accent), rgba(45,212,191,.90));

  color:rgba(255,255,255,.96);

  border-color:rgba(15,23,42,.10);

  box-shadow:0 18px 55px rgba(109,92,255,.18);

}

.btnPrimary:hover{filter:saturate(1.05) brightness(1.02)}

.btnGhost{

  background:rgba(255,255,255,.62);

  border-color:var(--stroke);

  color:var(--text);

  box-shadow: 0 10px 25px rgba(15,23,42,.06);

}

.btnGhost:hover{background:rgba(255,255,255,.86); border-color:rgba(15,23,42,.18)}



/* Focus (accessibility) */

a:focus-visible,

button:focus-visible,

.btn:focus-visible,

input:focus-visible,

textarea:focus-visible{

  outline:none;

  box-shadow: 0 0 0 4px rgba(109,92,255,.18);

  border-color: rgba(109,92,255,.32);

}



/* ---------- Hero ---------- */

.heroGrid{

  display:grid;

  grid-template-columns: 1.05fr .95fr;

  gap:26px;

  align-items:center;

}



.pill{

  display:inline-flex;

  align-items:center;

  gap:10px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:999px;

  padding:10px 12px;

  color:var(--muted);

  font-size:13px;

  margin-bottom:14px;

  box-shadow: 0 10px 25px rgba(15,23,42,.06);

}

.pill .dot{

  width:10px;height:10px;border-radius:50%;

  background:var(--accent2);

  box-shadow:0 0 0 4px rgba(45,212,191,.14);

}



.heroTitle{

  font-size:46px;

  line-height:1.08;

  margin:0 0 12px;

  letter-spacing:-.6px;

}

.heroEm{

  background:linear-gradient(135deg, rgba(15,23,42,.92), rgba(109,92,255,.95));

  -webkit-background-clip:text;

  background-clip:text;

  color:transparent;

}



.lead{

  font-size:16px;

  color:var(--muted);

  margin:0 0 16px;

  max-width:720px;

}

.lead-bullets{

  margin:0;

  padding:0;

  list-style:none;

  display:grid;

  gap:10px;

  margin-bottom:18px;

}

.lead-bullets li{

  display:flex;

  gap:10px;

  align-items:flex-start;

  padding:12px 12px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:16px;

  box-shadow: 0 10px 25px rgba(15,23,42,.05);

}

.checkIcon{

  width:22px;height:22px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  border-radius:8px;

  background:rgba(22,163,74,.12);

  border:1px solid rgba(22,163,74,.20);

  color:var(--good);

  font-weight:900;

  flex:0 0 auto;

}

.lead-bullets .txt{color:var(--muted)}

.heroActions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}



.trustRow{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

  margin-top:14px;

}

.trustChip{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:10px 12px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.55);

  border-radius:999px;

  color:var(--muted);

  font-size:13px;

  box-shadow: 0 10px 25px rgba(15,23,42,.05);

}

.tDot{

  width:8px;height:8px;border-radius:50%;

  background:var(--accent);

  box-shadow:0 0 0 4px rgba(109,92,255,.12);

}



/* ---------- Mock panel ---------- */

.mockWrap{position:relative}

.mock{

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.70);

  border-radius:var(--radius2);

  box-shadow: var(--shadow);

  padding:16px;

  position:relative;

  overflow:hidden;

}

.mock:before{

  content:"";

  position:absolute;

  inset:-80px -80px auto auto;

  width:240px;height:240px;

  border-radius:50%;

  background: radial-gradient(circle at 30% 30%, rgba(109,92,255,.18), transparent 60%);

  filter: blur(2px);

}

.mockTop{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  margin-bottom:12px;

}

.mockTitle{font-weight:800}

.mockChip{

  display:inline-flex;

  align-items:center;

  padding:6px 10px;

  border-radius:999px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  color:var(--muted);

  font-size:12px;

}



.kpiGrid{

  display:grid;

  grid-template-columns: repeat(4, 1fr);

  gap:10px;

  margin-bottom:12px;

}

.kpi{

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:16px;

  padding:12px;

  box-shadow: 0 10px 25px rgba(15,23,42,.05);

}

.kpi .label{font-size:12px; color:var(--muted2)}

.kpi .value{font-size:24px; font-weight:900; letter-spacing:-.4px; margin-top:2px}

.kpi .hint{font-size:12px; color:var(--muted2)}



.list{

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.55);

  border-radius:16px;

  padding:10px;

  display:grid;

  gap:8px;

  margin-bottom:12px;

}

.row{

  display:flex;

  justify-content:space-between;

  gap:10px;

  padding:10px 10px;

  border-radius:14px;

  border:1px solid rgba(15,23,42,.08);

  background:rgba(255,255,255,.70);

  color:var(--muted);

}

.badge{

  font-size:12px;

  padding:6px 10px;

  border-radius:999px;

  border:1px solid rgba(15,23,42,.10);

  background:rgba(255,255,255,.62);

  white-space:nowrap;

}

.badge.ok{

  border-color:rgba(22,163,74,.18);

  background:rgba(22,163,74,.10);

  color:rgba(20,83,45,.92);

}

.badge.warn{

  border-color:rgba(245,158,11,.20);

  background:rgba(245,158,11,.12);

  color:rgba(120,53,15,.92);

}



.miniCards{

  display:grid;

  grid-template-columns: repeat(3, 1fr);

  gap:10px;

  margin-bottom:12px;

}

.mini{

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:16px;

  padding:12px;

  box-shadow: 0 10px 25px rgba(15,23,42,.05);

}

.mini b{display:block}

.mini span{display:block; color:var(--muted2); font-size:12px}



.mockFoot{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

}

.pillSmall{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:10px 12px;

  border-radius:999px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  color:var(--muted);

  font-size:12px;

}

.pillSmall.ghost{background:rgba(255,255,255,.50)}

.dotSmall{

  width:8px;height:8px;border-radius:50%;

  background:var(--accent2);

  box-shadow:0 0 0 4px rgba(45,212,191,.12);

}



/* ---------- Cards / grids ---------- */

.grid3{

  display:grid;

  grid-template-columns: repeat(3, 1fr);

  gap:14px;

  margin-top:14px;

}

.card{

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.66);

  border-radius:var(--radius);

  padding:16px;

  box-shadow: 0 12px 30px rgba(15,23,42,.06);

}

.card h3{margin:10px 0 6px}

.card p{margin:0; color:var(--muted)}

.icon{

  width:40px;height:40px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:14px;

  border:1px solid rgba(15,23,42,.10);

  background:rgba(255,255,255,.72);

  font-size:18px;

}

.icon.indigo{

  background:rgba(109,92,255,.12);

  border-color:rgba(109,92,255,.20);

}

.icon.green{

  background:rgba(45,212,191,.10);

  border-color:rgba(45,212,191,.18);

}



.callout{

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:var(--radius);

  padding:14px 16px;

  box-shadow: 0 12px 30px rgba(15,23,42,.06);

}

.callout b{display:block; margin-bottom:4px}

.callout p{margin:0; color:var(--muted)}

.miniCallout{margin-top:12px}

.ctaRow{

  margin-top:18px;

  display:flex;

  gap:10px;

  flex-wrap:wrap;

  align-items:center;

}



/* Split */

.split{

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap:14px;

}



/* Logos row */

.logos{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

}

.logoChip{

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.55);

  border-radius:999px;

  padding:10px 12px;

  font-size:13px;

  color:var(--muted);

  box-shadow: 0 10px 25px rgba(15,23,42,.05);

}



/* ---------- Steps ---------- */

.steps{

  display:grid;

  grid-template-columns: repeat(4, 1fr);

  gap:12px;

  margin-top:14px;

}

.step{

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:var(--radius);

  padding:14px;

  box-shadow: 0 12px 30px rgba(15,23,42,.06);

}

.step .n{

  width:32px;height:32px;

  border-radius:12px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:rgba(109,92,255,.12);

  border:1px solid rgba(109,92,255,.20);

  font-weight:900;

  margin-bottom:10px;

}

.step b{display:block; margin-bottom:6px}

.step span{color:var(--muted)}



/* ---------- Calculator ---------- */

.calcGrid{

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap:14px;

  margin-top:14px;

}

.calcCard{padding:16px}

.calcResult{padding:16px}



.form{margin-top:10px}

.grid2{

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap:12px;

}



.field label{

  display:block;

  font-size:13px;

  color:var(--muted);

  margin-bottom:6px;

}

.field input,

.field textarea{

  width:100%;

  padding:12px 12px;

  border-radius:14px;

  border:1px solid rgba(15,23,42,.14);

  background:rgba(255,255,255,.78);

  color:var(--text);

  outline:none;

}

.field input:focus,

.field textarea:focus{

  border-color:rgba(109,92,255,.35);

  box-shadow:0 0 0 4px rgba(109,92,255,.16);

}

.field textarea{resize:vertical; min-height:96px}



.calcHeader{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  margin-bottom:12px;

}

.kpiGridBig{

  grid-template-columns: repeat(2, 1fr);

}

.roiLine{

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap:10px;

  margin-top:10px;

}

.roiBox{

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:16px;

  padding:12px;

  box-shadow: 0 10px 25px rgba(15,23,42,.05);

}

.roiBox .label{font-size:12px;color:var(--muted2)}

.roiBox .value{font-size:20px;font-weight:900;margin-top:4px}

.roiBox .hint{font-size:12px;color:var(--muted2)}



.noteBox{

  margin-top:12px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.55);

  border-radius:16px;

  padding:14px;

}

.calcCtas{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}



/* ---------- Pricing ---------- */

.pricing{

  display:grid;

  grid-template-columns: repeat(3, 1fr);

  gap:14px;

  margin-top:16px;

}

.priceCard{

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.66);

  border-radius:var(--radius2);

  padding:16px;

  position:relative;

  overflow:hidden;

  box-shadow: 0 14px 40px rgba(15,23,42,.08);

}

.priceCard.featured{

  border-color: rgba(109,92,255,.28);

  background:

    radial-gradient(700px 280px at 20% 10%, rgba(109,92,255,.18), transparent 55%),

    rgba(255,255,255,.72);

  box-shadow:0 22px 70px rgba(109,92,255,.18);

}

.priceCard .tag{

  position:absolute;

  top:14px; right:14px;

  font-size:12px;

  padding:6px 10px;

  border-radius:999px;

  border:1px solid rgba(15,23,42,.10);

  background:rgba(255,255,255,.70);

  color:var(--muted);

}

.plan{color:var(--muted); font-size:13px}

.planName{font-weight:900; letter-spacing:.4px; margin-top:2px}

.price{

  font-size:34px;

  font-weight:950;

  letter-spacing:-.6px;

  margin:8px 0 2px;

}

.price small{font-size:14px; font-weight:800; color:var(--muted)}

.limit{color:var(--muted); font-size:13px; margin-bottom:10px}

.priceNote{

  color:var(--muted);

  font-size:13px;

  border-left:3px solid rgba(109,92,255,.45);

  padding-left:10px;

}



.ul{

  list-style:none;

  padding:0;

  margin:12px 0 0;

  display:grid;

  gap:10px;

}

.ul li{

  display:flex;

  gap:10px;

  align-items:flex-start;

  border:1px solid rgba(15,23,42,.10);

  background:rgba(255,255,255,.62);

  padding:10px 10px;

  border-radius:16px;

  color:var(--muted);

}

.bullet{

  width:20px;height:20px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  border-radius:8px;

  border:1px solid rgba(15,23,42,.12);

  background:rgba(255,255,255,.72);

  color:var(--text);

  flex:0 0 auto;

}



.setup{

  margin-top:18px;

  display:grid;

  grid-template-columns: 1fr 1fr auto;

  gap:10px;

  align-items:center;

  padding:14px 16px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:var(--radius);

  box-shadow: 0 12px 30px rgba(15,23,42,.06);

}

.setup b{display:block}

.setup span{color:var(--muted); font-size:13px}



/* ---------- Comparison table ---------- */

.tableWrap{

  margin-top:14px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:var(--radius2);

  overflow:auto;

  box-shadow: var(--shadow2);

  -webkit-overflow-scrolling: touch;

}

table.compare{

  width:100%;

  border-collapse:separate;

  border-spacing:0;

  min-width:760px;

}

table.compare th, table.compare td{

  padding:14px 14px;

  border-bottom:1px solid rgba(15,23,42,.10);

  vertical-align:top;

}

table.compare thead th{

  position:sticky;

  top:0;

  background:rgba(255,255,255,.86);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  z-index:1;

  font-size:13px;

  color:var(--muted);

  text-align:left;

}

table.compare tbody td{

  color:var(--muted);

}

table.compare tbody tr:hover td{

  background:rgba(15,23,42,.03);

  color:var(--text);

}

table.compare tbody td:first-child{

  color:var(--text);

  font-weight:800;

}



/* ---------- FAQ ---------- */

.faqGrid{

  margin-top:14px;

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap:12px;

}

.faqItem{

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:var(--radius);

  padding:14px 14px;

  box-shadow: 0 12px 30px rgba(15,23,42,.06);

}

.faqItem summary{

  cursor:pointer;

  list-style:none;

  font-weight:900;

}

.faqItem summary::-webkit-details-marker{display:none}

.faqItem summary:after{

  content:"▾";

  float:right;

  opacity:.65;

}

.faqItem[open] summary:after{content:"▴"}

.faqBody{

  margin-top:10px;

  color:var(--muted);

  font-size:14px;

}



/* ---------- Contact ---------- */

.contactGrid{

  display:grid;

  grid-template-columns: 1.1fr .9fr;

  gap:14px;

  margin-top:14px;

}

.contactForm .btn{width:100%}



.consent{

  margin:12px 0 10px;

  display:flex;

  gap:10px;

  align-items:flex-start;

  color:var(--muted);

  font-size:13px;

}

.consent input{margin-top:3px}



.contactList{

  display:grid;

  gap:10px;

  margin-top:10px;

}

.contactRow{

  display:flex;

  justify-content:space-between;

  gap:12px;

  border:1px solid rgba(15,23,42,.10);

  background:rgba(255,255,255,.62);

  border-radius:16px;

  padding:12px 12px;

  box-shadow: 0 12px 30px rgba(15,23,42,.06);

}

.contactRow .label{color:var(--muted); font-size:13px}

.contactRow .value{font-weight:900}

.contactRow a{color:rgba(30,64,175,.92)}

.contactRow a:hover{text-decoration:underline}



/* ---------- Footer ---------- */

.footer{

  padding:44px 0 50px;

  border-top:1px solid rgba(15,23,42,.10);

  background:rgba(255,255,255,.45);

}

.footerGrid{

  display:grid;

  grid-template-columns: 1.2fr .6fr 1fr;

  gap:14px;

  align-items:start;

}

.footLinks{

  display:grid;

  gap:8px;

}

.footLinks a{

  color:var(--muted);

  padding:8px 10px;

  border-radius:12px;

  border:1px solid rgba(15,23,42,.10);

  background:rgba(255,255,255,.62);

}

.footLinks a:hover{background:rgba(255,255,255,.86); color:var(--text)}

.footNote{display:flex; align-items:flex-end}



/* ---------- Robust text wrapping ---------- */

.row, .card, .priceCard, .contactRow, .faqBody, .tableWrap, .mock, .kpi, .mini{

  overflow-wrap:anywhere;

  word-break: break-word;

}



/* ---------- Responsive ---------- */

@media (max-width: 980px){

  .menuPill{display:none}

  .navCenter{justify-content:flex-end}

  .desktopActions{display:none}

  .burger{display:inline-flex}



  .heroGrid{grid-template-columns: 1fr; gap:16px}

  .heroTitle{font-size:40px}



  .kpiGrid{grid-template-columns: repeat(2, 1fr)}

  .miniCards{grid-template-columns: repeat(2, 1fr)}

  .steps{grid-template-columns: repeat(2, 1fr)}

  .grid3{grid-template-columns: 1fr}

  .split{grid-template-columns: 1fr}

  .calcGrid{grid-template-columns: 1fr}

  .pricing{grid-template-columns: 1fr}

  .setup{grid-template-columns: 1fr; text-align:left}

  .faqGrid{grid-template-columns: 1fr}

  .contactGrid{grid-template-columns: 1fr}

  .footerGrid{grid-template-columns: 1fr}

}



@media (max-width: 520px){

  .container{width:min(var(--container), calc(100% - 28px))}

  .heroTitle{font-size:34px}

  .btn{width:100%}

  .trustChip{width:100%; justify-content:flex-start}

  .roiLine{grid-template-columns: 1fr}

  .grid2{grid-template-columns: 1fr}

}



/* Reduce motion */

@media (prefers-reduced-motion: reduce){

  .bgWaves span{animation:none}

  .btn{transition:none}

}



/* --- ROI sliders: dodatki do styles.css --- */

.sliderGrid{

  display:grid;

  gap:14px;

  margin-top:10px;

}



.sliderField{

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:16px;

  padding:12px;

  box-shadow: 0 10px 25px rgba(15,23,42,.05);

}



.sliderTop{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  margin-bottom:10px;

}



.sliderVal{

  font-weight:900;

  color:var(--text);

  padding:6px 10px;

  border-radius:999px;

  border:1px solid rgba(15,23,42,.10);

  background:rgba(255,255,255,.72);

  white-space:nowrap;

}



.sliderMeta{

  display:flex;

  justify-content:space-between;

  color:var(--muted2);

  font-size:12px;

  margin-top:8px;

}



/* Range styling */

.range{

  -webkit-appearance:none;

  appearance:none;

  width:100%;

  height:12px;

  border-radius:999px;

  background:

    linear-gradient(90deg, rgba(109,92,255,.28), rgba(45,212,191,.24));

  outline:none;

  border:1px solid rgba(15,23,42,.10);

}



.range::-webkit-slider-thumb{

  -webkit-appearance:none;

  appearance:none;

  width:22px;

  height:22px;

  border-radius:50%;

  background: linear-gradient(135deg, var(--accent), rgba(45,212,191,.90));

  border:1px solid rgba(15,23,42,.12);

  box-shadow: 0 12px 25px rgba(109,92,255,.18);

  cursor:pointer;

}



.range::-moz-range-thumb{

  width:22px;

  height:22px;

  border-radius:50%;

  background: linear-gradient(135deg, var(--accent), rgba(45,212,191,.90));

  border:1px solid rgba(15,23,42,.12);

  box-shadow: 0 12px 25px rgba(109,92,255,.18);

  cursor:pointer;

}



.range::-moz-range-track{

  height:12px;

  border-radius:999px;

  background:

    linear-gradient(90deg, rgba(109,92,255,.28), rgba(45,212,191,.24));

  border:1px solid rgba(15,23,42,.10);

}



/* ===== Profit Meter (tylko ZYSKI) ===== */

.profitMock{ position:relative; }



.profitMeter{

  position:relative;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.66);

  border-radius: 18px;

  padding: 14px;

  box-shadow: var(--shadow2);

  overflow:hidden;

  isolation:isolate;

}



/* miękkie tło gradientowe */

.profitGlow{

  position:absolute;

  inset:-120px -120px auto auto;

  width:320px;height:320px;

  border-radius:50%;

  background:

    radial-gradient(circle at 30% 30%, rgba(109,92,255,.25), transparent 60%),

    radial-gradient(circle at 65% 55%, rgba(45,212,191,.18), transparent 62%);

  filter: blur(2px);

  z-index:-2;

}



/* połysk przesuwający się w pętli */

.profitShine{

  position:absolute;

  inset:-40% -80%;

  background: linear-gradient(115deg,

    transparent 0%,

    rgba(255,255,255,.0) 35%,

    rgba(255,255,255,.55) 50%,

    rgba(255,255,255,.0) 65%,

    transparent 100%);

  transform: translateX(-20%) rotate(12deg);

  opacity:.55;

  animation: shineSweep 4.8s linear infinite;

  z-index:-1;

}

@keyframes shineSweep{

  0%{ transform: translateX(-35%) rotate(12deg); opacity:.15; }

  25%{ opacity:.55; }

  50%{ opacity:.35; }

  100%{ transform: translateX(35%) rotate(12deg); opacity:.15; }

}



.profitHeader{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:12px;

  flex-wrap:wrap;

  margin-bottom:12px;

}

.profitKicker{

  font-size:12px;

  color:var(--muted2);

}

.profitValue{

  font-size:34px;

  font-weight:950;

  letter-spacing:-.6px;

  line-height:1;

  background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(109,92,255,.95));

  -webkit-background-clip:text;

  background-clip:text;

  color:transparent;

}

.profitPrefix, .profitSuffix{

  font-size:14px;

  font-weight:900;

  color:var(--muted);

  -webkit-text-fill-color: initial;

  background:none;

}

.profitHint{

  font-size:12px;

  color:var(--muted2);

  margin-top:6px;

}



/* Pasek “zysku” */

.meterTrack{

  position:relative;

  height:18px;

  border-radius:999px;

  border:1px solid rgba(15,23,42,.10);

  background: rgba(255,255,255,.72);

  overflow:hidden;

}



.meterFill{

  height:100%;

  width: 55%;

  border-radius:999px;

  background: linear-gradient(90deg,

    rgba(109,92,255,.55),

    rgba(45,212,191,.35),

    rgba(22,163,74,.30));

  box-shadow:

    0 14px 35px rgba(109,92,255,.18),

    inset 0 0 0 1px rgba(255,255,255,.25);

  transition: width 900ms cubic-bezier(.2,.8,.2,1);

  position:relative;

}



/* iskra “przebiegająca” w pętli po fillu */

.meterSpark{

  position:absolute;

  top:-10px;

  width:90px;height:38px;

  border-radius:999px;

  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%);

  filter: blur(0.2px);

  opacity:.55;

  animation: sparkRun 2.6s ease-in-out infinite;

  pointer-events:none;

}

@keyframes sparkRun{

  0%{ left:-90px; opacity:.15; }

  35%{ opacity:.55; }

  50%{ opacity:.35; }

  100%{ left: calc(100% + 90px); opacity:.15; }

}



/* Chips pod wykresem */

.profitChips{

  display:flex;

  gap:8px;

  flex-wrap:wrap;

  margin-top:12px;

}

.profitChip{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:10px 10px;

  border-radius:999px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  color:var(--muted);

  font-size:12px;

  box-shadow: 0 10px 25px rgba(15,23,42,.05);

}

.pcIcon{

  width:18px;height:18px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  border-radius:8px;

  border:1px solid rgba(15,23,42,.10);

  background:rgba(255,255,255,.72);

  color:var(--text);

}



/* Bąbelki w tle */

.profitBubbles span{

  position:absolute;

  bottom:-40px;

  width:18px;height:18px;

  border-radius:50%;

  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.70), rgba(109,92,255,.18));

  border:1px solid rgba(15,23,42,.08);

  opacity:.35;

  filter: blur(.2px);

  animation: bubbleUp 6.5s linear infinite;

  z-index:-1;

}

.profitBubbles span:nth-child(1){ left:10%; animation-duration: 6.8s; transform: scale(.9); }

.profitBubbles span:nth-child(2){ left:28%; animation-duration: 8.2s; transform: scale(1.1); }

.profitBubbles span:nth-child(3){ left:52%; animation-duration: 7.6s; transform: scale(.8); }

.profitBubbles span:nth-child(4){ left:74%; animation-duration: 9.0s; transform: scale(1.2); }

.profitBubbles span:nth-child(5){ left:88%; animation-duration: 7.2s; transform: scale(.95); }



@keyframes bubbleUp{

  0%{ transform: translateY(0) scale(1); opacity:.0; }

  15%{ opacity:.30; }

  60%{ opacity:.22; }

  100%{ transform: translateY(-240px) scale(1.25); opacity:.0; }

}



/* prefer-reduced-motion */

@media (prefers-reduced-motion: reduce){

  .profitShine, .meterSpark, .profitBubbles span{ animation:none !important; }

  .meterFill{ transition:none !important; }

}

.profitDec{

  font-size:14px;

  font-weight:900;

  color:var(--muted);

  -webkit-text-fill-color: initial;

  background:none;

  margin-left:4px;

}

/* ---------- Industries ---------- */

.industryGrid{

  display:grid;

  grid-template-columns: repeat(3, 1fr);

  gap:14px;

  margin-top:18px;

}



.industryCard{

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.66);

  border-radius:var(--radius);

  padding:16px;

  box-shadow: 0 12px 30px rgba(15,23,42,.06);

}



.industryCard h3{

  margin:10px 0 6px;

}



.industryList{

  list-style:none;

  padding:0;

  margin:10px 0 0;

  display:grid;

  gap:6px;

  color:var(--muted);

  font-size:14px;

}



.industryCard.highlight{

  background:

    radial-gradient(600px 240px at 20% 10%, rgba(109,92,255,.18), transparent 55%),

    rgba(255,255,255,.72);

  border-color: rgba(109,92,255,.28);

}



@media (max-width: 980px){

  .industryGrid{

    grid-template-columns: 1fr;

  }

}



.pricingTop{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:14px;

  flex-wrap:wrap;

  margin-bottom:14px;

}



.termToggle{

  display:inline-flex;

  gap:6px;

  padding:6px;

  border:1px solid var(--stroke);

  background:rgba(255,255,255,.62);

  border-radius:999px;

  box-shadow: 0 10px 25px rgba(15,23,42,.05);

}



.termBtn{

  border:1px solid transparent;

  background:transparent;

  color:var(--muted);

  padding:10px 12px;

  border-radius:999px;

  font-weight:900;

  font-size:13px;

  cursor:pointer;

}



.termBtn:hover{

  background:rgba(15,23,42,.05);

  color:var(--text);

}



.termBtn.active{

  background:linear-gradient(135deg, var(--accent), rgba(45,212,191,.90));

  color:rgba(255,255,255,.96);

  border-color:rgba(15,23,42,.10);

  box-shadow:0 12px 30px rgba(109,92,255,.16);

}



/* ładniejsza typografia ceny */

.priceMain{

  font-size:34px;

  font-weight:950;

  letter-spacing:-.6px;

}



.pricingTopCenter{

  display:grid;

  justify-items:center;

  gap:10px;

  margin:14px 0 8px;

}



.termToggleCenter{

  justify-content:center;

}

.ul li.isTop:hover {

  transform: translateX(4px);

  transition: transform .2s ease;

}

.ul li.isTop::after {

  content: "kluczowe";

  font-size: 11px;

  margin-left: 6px;

  color: #6366f1;

}



/* ===== Kalkulator: UX/układ bez pustych pól ===== */

.calcGridTight{

  display:grid;

  gap:16px;

  grid-template-columns: 1.05fr .95fr;

  align-items:start;

}



@media (max-width: 980px){

  .calcGridTight{ grid-template-columns: 1fr; }

}



.calcCardCompact .calcCardHead{

  margin-bottom:12px;

}



.sliderGridMain{

  display:grid;

  gap:12px;

}



.calcAdvanced{

  margin-top:10px;

  border: 1px solid rgba(255,255,255,.10);

  border-radius: 14px;

  padding: 10px 12px;

  background: rgba(255,255,255,.03);

}



.calcAdvanced > summary{

  cursor:pointer;

  list-style:none;

  font-weight:600;

}



.calcAdvanced > summary::-webkit-details-marker{ display:none; }



.sliderGridAdv{

  display:grid;

  gap:12px;

  margin-top:12px;

}



.calcResultDense{

  min-height: unset; /* ważne: usuwa wrażenie pustej kolumny */

  padding-bottom: 16px;

}



.kpiGridDense{

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap:10px;

  margin-top:12px;

}



.netBox{

  margin-top:12px;

  padding:14px;

  border-radius:16px;

  border:1px solid rgba(255,255,255,.10);

  background: rgba(255,255,255,.04);

}



.netTop{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:12px;

}



.netValue{

  font-size: 28px;

  line-height: 1.1;

  font-weight: 800;

  margin-top: 6px;

}



.netRoiVal{

  font-size: 18px;

  font-weight: 800;

  margin-top: 6px;

  text-align:right;

}



.roiTrack{

  height:10px;

  border-radius:999px;

  background: rgba(255,255,255,.10);

  overflow:hidden;

  margin-top:12px;

}



.roiFill{

  height:100%;

  width:0%;

  border-radius:999px;

  background: rgba(120,160,255,.85);

  transition: width .35s ease;

}



.noteBoxTight{

  margin-top:12px;

}

/* HERO: lepsze wyrównanie kolumn */

.heroGrid{

  align-items: start;         /* kluczowe: nie centruj pionowo */

  column-gap: 28px;

}



/* mniej pustych przestrzeni w hero */

.section.bgA{

  padding-top: 56px;          /* było pewnie więcej – obniż */

  padding-bottom: 36px;

}



/* prawa karta wyżej + stabilnie na desktop */

.mockWrapHero{

  margin-top: -34px;          /* podnieś cały panel */

  align-self: start;

}



/* na mniejszych ekranach nie podnoś agresywnie */

@media (max-width: 980px){

  .mockWrapHero{

    margin-top: 0;

  }

}



/* opcjonalnie: usuń za duży top padding wewnątrz mock */

.profitMock .mockTop{

  padding-top: 8px;

}



/* CTA pod prawym panelem bliżej karty */

.mockFootStack{

  margin-top: 10px;

}



/* === HERO polish: jak w referencji === */

.section.bgA{

  padding-top: 54px;

  padding-bottom: 52px; /* było za ciasno na dole w niektórych viewportach */

}



/* stabilniejsza szerokość typografii po lewej */

.heroGrid{

  grid-template-columns: 1.08fr .92fr;

  align-items: start;

  gap: 28px;

}



/* kontrola szerokości tekstu w hero */

.heroTitle{ max-width: 680px; }

.lead{ max-width: 640px; }



/* lepszy rytm pionowy */

.pill{ margin-bottom: 16px; }

.heroTitle{ margin-bottom: 14px; }

.lead{ margin-bottom: 18px; }

.lead-bullets{ margin-bottom: 18px; }

.heroActions{ margin-bottom: 16px; }



/* prawa karta: delikatnie podnieś, ale nie „na siłę” *//* kwota jak „badge” na screenie */

.profitHeader{

  align-items: center;

}



.profitValueBox{

  padding: 12px 14px;

  border-radius: 16px;

  border: 1px solid rgba(30,41,59,.10);

  background: linear-gradient(135deg, rgba(109,92,255,.14), rgba(45,212,191,.10));

  box-shadow: 0 14px 40px rgba(15,23,42,.08);

}



.profitAmount{

  font-size: 34px;

  font-weight: 950;

  letter-spacing: -.6px;

  color: rgba(15,23,42,.92);

}





@media (max-width: 980px){

  .heroGrid{ grid-template-columns: 1fr; }

  .mockWrapHero{ margin-top: 0; }

}



/* prawa karta niech wygląda bardziej jak panel z referencji */

.mock{

  background: rgba(255,255,255,.78);

  border: 1px solid rgba(30,41,59,.12);

  box-shadow: 0 24px 80px rgba(15,23,42,.12);

}



/* profitMeter: więcej „szkła”, mniej ciężaru */

.profitMeter{

  background: rgba(255,255,255,.78);

  border: 1px solid rgba(30,41,59,.12);

}



/* przyciski w topbarze bardziej równe i „premium” */

.desktopActions .btn{

  height: 44px;

  padding: 0 16px;

  border-radius: 16px;

}



/* menu pill odrobinę wyższe, jak w referencji */

.menuPill{

  padding: 10px 14px;

  gap: 16px;

}

.menuPill a, .dd button{

  padding: 8px 10px;

}

.heroTitle{

  font-size: 48px; /* było 46, ale w referencji jest „odrobinę większe” */

  letter-spacing: -0.8px;

}

@media (max-width: 980px){

  .heroTitle{ font-size: 40px; }

}

.lead-bullets li{

  padding: 12px 14px;

  background: rgba(255,255,255,.70);

  border: 1px solid rgba(30,41,59,.10);

}

.checkIcon{

  border-radius: 10px;

}

/* === HERO: porządek i centrowanie prawej kolumny === */

.heroGrid{

  grid-template-columns: 1fr 1fr;     /* równo, jak w referencji */

  align-items: start;                 /* lewa kolumna start */

  gap: 36px;

}



/* prawa kolumna ma być wyśrodkowana w swojej kratce */

.mockWrapHero{

  margin-top: 0 !important;          /* usuń podnoszenie */

  align-self: center;                 /* centrowanie w pionie */

  justify-self: center;               /* centrowanie w poziomie */

  width: 100%;

  max-width: 520px;                   /* stała, „produktowa” szerokość */

}



/* karta po prawej niech oddycha i będzie czytelna */

.mock.profitMock{

  padding: 18px;

}



/* na mniejszych ekranach naturalny stack */

@media (max-width: 980px){

  .heroGrid{ grid-template-columns: 1fr; gap: 18px; }

  .mockWrapHero{ max-width: 640px; justify-self: stretch; }

}

/* === HERO: lewa kolumna mniej „ściany tekstu” === */

.heroTitle{

  max-width: 620px;

  font-size: 44px;          /* odrobinę mniej */

  line-height: 1.06;

  margin-bottom: 12px;

}

.lead{

  max-width: 560px;

  font-size: 15px;          /* mniejsza masa tekstu */

  margin-bottom: 14px;

}



/* bullet list: bardziej kompaktowa (mniej wysokości) */

.lead-bullets{

  gap: 8px;

  margin-bottom: 14px;

}

.lead-bullets li{

  padding: 10px 12px;

  border-radius: 14px;

}

.lead-bullets .txt{

  font-size: 14px;

  line-height: 1.35;

}



/* micro (dodatkowy akapit) – niech będzie krótszy wizualnie */

.micro{

  max-width: 560px;

  line-height: 1.35;

}



/* trustRow: zamiast „paska” 4 chipów – zrób 2x2 (mniej szerokości i chaosu) */

.trustRow{

  display: grid;

  grid-template-columns: repeat(2, max-content);

  gap: 10px 10px;

  margin-top: 12px;

}

@media (max-width: 520px){

  .trustRow{ grid-template-columns: 1fr; }

}

/* micro pod prawą kartą jako „caption” */

.mockWrapHero + .micro{

  margin-top: 12px;

  max-width: 520px;

  justify-self: center;

}

/* =========================

   FOOTER (NOWOCZESNY, BEZ KART)

   ========================= */



.footerNew{

  padding: 56px 0 26px;

  border-top: 1px solid rgba(15,23,42,.10);

  background:

    radial-gradient(1000px 360px at 12% 0%, rgba(109,92,255,.10), transparent 55%),

    radial-gradient(900px 360px at 88% 0%, rgba(45,212,191,.08), transparent 55%),

    rgba(255,255,255,.24);

}



.footerTop{

  display: grid;

  grid-template-columns: 1.25fr 1.75fr;

  gap: 34px;

  align-items: start;

  padding-bottom: 22px;

}



.fBrandLine{

  display: inline-flex;

  align-items: center;

  gap: 12px;

}



.fBrandText strong{

  display:block;

  font-size: 15px;

  letter-spacing: .2px;

}

.fBrandText span{

  display:block;

  font-size: 13px;

  color: rgba(15,23,42,.68);

}



.fDesc{

  margin: 14px 0 12px;

  max-width: 520px;

  color: rgba(15,23,42,.72);

  line-height: 1.45;

  font-size: 14px;

}



.fMeta{

  display:flex;

  flex-wrap: wrap;

  gap: 10px;

  color: rgba(15,23,42,.62);

  font-size: 12.5px;

}



.fCols{

  display: grid;

  grid-template-columns: 1fr 1fr 1.15fr;

  gap: 26px;

}



.fCol{

  display: grid;

  align-content: start;

  gap: 10px;

}



.fTitle{

  font-weight: 900;

  font-size: 13px;

  letter-spacing: .2px;

  margin-bottom: 2px;

  color: rgba(15,23,42,.90);

}



/* Linki w stopce: bez ramek, nowoczesny hover */

.footerNew a{

  color: rgba(15,23,42,.72);

  text-decoration: none;

  font-size: 14px;

  line-height: 1.25;

  width: fit-content;

}



.footerNew a:hover{

  color: rgba(15,23,42,.92);

  text-decoration: underline;

  text-underline-offset: 4px;

  text-decoration-thickness: 2px;

}



.fStrong{

  font-weight: 900;

  color: rgba(30,64,175,.92) !important;

}

.fStrong:hover{ text-decoration: underline; }



/* CTA w stopce: nie na całą szerokość, bez „formularza” */

.fCtas{

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 8px;

}



.fCtas .btn{

  height: 44px;

  padding: 0 16px;

  border-radius: 16px;

}



/* dolna belka */

.footerBottomNew{

  display:flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

  padding-top: 16px;

  border-top: 1px solid rgba(15,23,42,.10);

}



.fBottomRight{

  display:flex;

  align-items:center;

  gap: 10px;

}



.footerBottomNew a{

  color: rgba(15,23,42,.62);

  font-size: 13px;

}

.footerBottomNew a:hover{

  color: rgba(15,23,42,.90);

  text-decoration: underline;

}



.sep{

  opacity: .45;

}



/* Mobile */

@media (max-width: 980px){

  .footerTop{

    grid-template-columns: 1fr;

    gap: 18px;

  }

  .fCols{

    grid-template-columns: 1fr;

    gap: 18px;

  }

}

#kontakt h2{

  font-size: 36px;

  line-height: 1.15;

}

/* =========================

   KONTAKT — WYŚRODKOWANIE (FIX)

   ========================= */



#kontakt .eyebrow,

#kontakt h2,

#kontakt .sub{

  text-align: center;

  margin-left: auto;

  margin-right: auto;

  max-width: 820px;

}



#kontakt .contactGrid{

  display: grid;

  grid-template-columns: 1fr;

  justify-items: center;

  width: 100%;

  margin-top: 24px;

}



#kontakt .contactGrid > .card{

  width: 100%;

  max-width: 720px;   /* docelowa szerokość formularza */

}



#kontakt .contactForm{

  width: 100%;

}



.brand {

  display: inline-flex;

  align-items: center;

  text-decoration: none;

  color: inherit;

}



.brandInner {

  display: flex;

  align-items: center;

  gap: 12px;

}



.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  padding: 6px 10px;
  transition: background-color 160ms ease, transform 160ms ease;
}

.brand:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.55);
  outline-offset: 3px;
}

.brand:hover {
  background: rgba(255, 255, 255, 0.35);
}

.brandInner {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* LOGO */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  padding: 6px 10px;
}

.brandInner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-block;

  background: url("/logo_nobg.png") center / contain no-repeat;
}

.brandText {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brandText strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.brandText span {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}

@media (max-width: 520px) {
  .logo {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .brandText strong { font-size: 15px; }
  .brandText span { font-size: 11px; }
}

/* Cookies popup (light glass) */
#cookieOverlay{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9998;
}

#cookieBanner{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 24px));
  z-index: 9999;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 16px;
}

.cookieGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 860px){
  .cookieGrid{
    grid-template-columns: 1.35fr .65fr;
    align-items: center;
  }
}

.cookieTitle{
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
}

.cookieText{
  color: #334155;
  margin: 0;
  line-height: 1.5;
  font-size: 14px;
}

.cookieLinks{
  margin-top: 8px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
}

.cookieLinks a{
  text-decoration: none;
  opacity: .9;
}

.cookieActions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cookieModal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10000;
}

.cookieModalBox{
  width: min(620px, 100%);
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 30px 90px rgba(0,0,0,.22);
  border-radius: 18px;
  padding: 16px;
}

.cookieRow{
  display:flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,.08);
}

.cookieRow:first-of-type{ border-top: none; }

.cookieRow b{ color:#0f172a; }
.cookieRow span{ color:#334155; font-size: 13px; }

.cookieSwitch{
  display:flex;
  gap: 10px;
  align-items:center;
  user-select:none;
}


.cookieSwitch input{ width: 18px; height: 18px; }