/* ReflectMe — HOME (light, airy, institutional)
   Original stylesheet: minimal, consistent, premium spacing
*/

:root{
  --bg: #ffffff;
  --bg-soft: #f7f9fc;
  --bg-tint: #f3f6ff;

  --text: #0f172a;      /* slate-900 */
  --muted: #475569;     /* slate-600 */
  --line: #e6eaf2;

  /* System RM (zielony) + akcent typograficzny (niebieski) */
  --brand: #16a34a;     /* RM green */
  --brand-2: #34d399;   /* softer green */
  --accent: #2563eb;    /* blue accent for 'Anonimowo' etc. */
  --ok: #22c55e;

  --shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 10px 22px rgba(15, 23, 42, 0.06);

  --radius: 18px;
  --radius-lg: 26px;

  --container: 1120px;

  /* Section separation system (premium) */
  --section-y: 72px;        /* rytm pionowy */
  --section-y-sm: 56px;
  --divider: rgba(15,23,42,0.08);
  --tint: #f7f9fc;          /* bardzo jasne tło */

  /* RM NAV system */
  --rm-accent: #008384;
  --rm-text: #0f172a;
  --rm-border: rgba(15, 23, 42, .10);
  --rm-surface: rgba(255,255,255,.88);
  --rm-shadow: 0 18px 45px rgba(15, 23, 42, .10);
  --rm-shadow-strong: 0 22px 60px rgba(15, 23, 42, .14);

  /* RM nav spacing */
  --rm-nav-gap: 32px;
  --rm-nav-gap-cta: 32px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

a{color:inherit}
img{max-width:100%;display:block}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.muted{color:var(--muted)}
.text{font-size:1.05rem;color:var(--muted)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight:600;
  border: 1px solid transparent;
  transition: transform .08s ease, box-shadow .08s ease, background .08s ease, filter .08s ease;
  box-shadow: none;
}
.btn:hover{transform: translateY(-1px)}
.btn--sm{padding:10px 14px;border-radius:12px;font-size:0.95rem}

.btn--primary{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color:#fff;
  box-shadow: 0 14px 22px rgba(22,163,74,0.18);
}
.btn--primary:hover{
  box-shadow: 0 18px 26px rgba(22,163,74,0.22);
  filter: brightness(0.99);
}


.btn--ghost{
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover{box-shadow: var(--shadow-soft)}

/* Hero */
.hero{
  position:relative;
  padding: 50px 0 34px; /* final (uwzględnia fixed nav) */
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:-40px -40px auto -40px;
  height: 420px;
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(37,99,235,0.10), transparent 60%),
    radial-gradient(900px 360px at 80% 20%, rgba(37,99,235,0.10), transparent 55%),
    radial-gradient(540px 240px at 52% 76%, rgba(22,163,74,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-soft), rgba(255,255,255,0));
  filter: saturate(1.05);
}
.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 34px;
  align-items: start;
}

h1{
  margin: 14px 0 12px;
  font-size: clamp(2.05rem, 3.2vw, 3.05rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

/* typograficzny akcent (nie systemowy) */
.accent{color: var(--accent)}

.lead{
  margin: 0 0 18px;
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 56ch;
}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin: 12px 0 18px}

/* Trust row — 3 w jednym rzędzie */
.trust{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top: 12px;
}

/* Responsywnie: 2 w rzędzie */
@media (max-width: 820px){
  .trust{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Telefon: 1 w rzędzie */
@media (max-width: 520px){
  .trust{
    grid-template-columns: 1fr;
  }
}

.trust__item{
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.72);
  border-radius: 16px;
}
.trust__dot{
  width:10px;height:10px;border-radius:999px;
  background: var(--ok);
  box-shadow: 0 0 0 6px rgba(34,197,94,0.14);
}
.trust__text strong{display:block; font-size:0.95rem}
.trust__text span{display:block; font-size:0.85rem; color: var(--muted)}

/* Hero visual */
.hero__visual{display:grid; gap:14px}



/* Pills: UI-owe (nie brand) zostają niebieskie */
.pill{
  font-size:0.82rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(37,99,235,0.18);
  color: #1d4ed8;
  font-weight:600;
}
.pill--muted{
  background: rgba(15,23,42,0.04);
  border-color: var(--line);
  color: var(--muted);
  font-weight:600;
}

.mock__body{padding: 16px; display:grid; gap:12px}

.kpi{
  display:grid;
  grid-template-columns: 1fr;
  padding: 12px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff
}
.kpi__label{color:var(--muted); font-size:0.85rem}
.kpi__value{font-size:1.55rem; font-weight:750; letter-spacing:-0.02em}
.kpi__hint{color:var(--muted); font-size:0.85rem}

.mini{
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  gap:8px;
  padding: 10px 0 2px;
}

/* Photo */
.photo{
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  background:#fff;
}
.photo img{aspect-ratio: 20/14; object-fit: cover}
.photo figcaption{
  padding:10px 12px;
  font-size:0.82rem;
  color:var(--muted);
  background:#fff
}

/* Sections (final rytm) */
.section{
  padding: var(--section-y) 0;
  position: relative;
}
.section--soft{background: var(--bg-soft)}
.section__head{margin-bottom: 18px}
.section__head h2{margin:0 0 6px}

@media (max-width: 980px){
  .section{ padding: var(--section-y-sm) 0; }
}

/* subtelny divider */
.section + .section::before{
  content:"";
  position:absolute;
  left: 0; right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--divider) 15%,
    var(--divider) 85%,
    transparent 100%);
}

/* Zebra */
.section:nth-of-type(even){
  background: var(--tint);
}

h2{
  margin:0 0 12px;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  letter-spacing:-0.02em;
}
h3{
  margin:0 0 10px;
  font-size:1.12rem;
  letter-spacing:-0.01em;
}

/* ABOUT (2 kolumny) — final */
.about{ padding: 64px 0; }
.about__grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
  align-items:start;
}
.about__copy{ max-width: 64ch; }

.about__copy h2{
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.about__lead{
  margin: 0 0 14px;
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(15,23,42,0.72);
}
.about__text{
  margin: 0 0 18px;
  line-height: 1.75;
  color: rgba(15,23,42,0.62);
}

/* premium photo variant for ABOUT */
.photo--about{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.75);
  box-shadow: 0 18px 55px rgba(15,23,42,0.12);
}
.photo--about::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 80% at 30% 10%, rgba(255,255,255,0.55), transparent 55%);
  pointer-events:none;
}
.photo--about img{
  transform: scale(1.02);
  transition: transform 240ms ease;
}
.photo--about:hover img{ transform: scale(1.06); }

/* dostępność: wyłącz ruch, jeśli user ma reduced motion */
@media (prefers-reduced-motion: reduce){
  .photo--about img{ transition:none; }
  .photo--about:hover img{ transform:none; }
}

/* Split */
.split{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 18px;
  align-items:start;
}

.checks{margin:14px 0 0; padding:0; list-style:none; color:var(--muted)}
.checks li{
  padding: 10px 0 10px 30px;
  position:relative;
  border-bottom: 1px dashed rgba(230,234,242,0.9);
}
.checks li:last-child{border-bottom:none}
.checks li:before{
  content:"";
  width:18px;height:18px;border-radius:6px;
  position:absolute; left:0; top:12px;
  background: rgba(34,197,94,0.14);
  border: 1px solid rgba(34,197,94,0.24);
  box-shadow: 0 8px 16px rgba(34,197,94,0.10);
}
.checks li:after{
  content:"";
  position:absolute; left:6px; top:18px;
  width:7px;height:4px;
  border-left:2px solid #16a34a;
  border-bottom:2px solid #16a34a;
  transform: rotate(-45deg);
}

/* bardziej kompaktowa lista punktów w ABOUT */
.checks--compact{
  margin-top: 16px;
  max-width: 58ch;
}
.checks--compact li{
  padding: 9px 0 9px 30px;
}

.callout{
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid rgba(22,163,74,0.18);
  background: linear-gradient(180deg, rgba(22,163,74,0.08), rgba(255,255,255,0.92));
  box-shadow: var(--shadow-soft);
}
.callout__title{font-weight:750;margin:0 0 8px}
.callout__text{color: var(--muted); margin:0}

/* Contact */
.contact{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px}


/* Benefits — premium visual cards */
.benefits{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  min-height: 0;

}

.benefit{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px 18px 16px;
  box-shadow: var(--shadow-soft);
  flex: 0 1 255px;
  min-height: 220px;
  overflow:hidden;
  transition: transform .10s ease, box-shadow .10s ease, border-color .10s ease;
}

.benefit::after{
  content:"";
  position:absolute;
  right:-60px; top:-60px;
  width:160px; height:160px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(43,108,255,0.20), transparent 60%);
  opacity: .55;
  pointer-events:none;
}

.benefit:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(15,23,42,0.14);
}

.benefit__top{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}

.benefit__icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
  color: rgba(15,23,42,0.85);
  flex: 0 0 auto;
}

/* 5 kart w jednym rzędzie na dużych ekranach */
@media (min-width: 1440px){
  .section--benefits{
    --container: 1400px;
  }
}

.benefit__icon svg{width:22px;height:22px}

.benefit__heading h3{
  margin:0;
  font-size:1.08rem;
  letter-spacing:-0.01em;
}

.benefit__sub{
  margin:3px 0 0;
  font-size:0.92rem;
  color: var(--muted);
  line-height: 1.35;
  max-width: 28ch;
}

/* role accents */
.benefit--student .benefit__icon{background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.20); color:#0f5132}
.benefit--teacher .benefit__icon{background: rgba(43,108,255,0.12); border-color: rgba(43,108,255,0.20); color:#1d4ed8}
.benefit--psych   .benefit__icon{background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.22); color:#92400e}
.benefit--school  .benefit__icon{background: rgba(15,23,42,0.06); border-color: rgba(15,23,42,0.10); color:#0f172a}
.benefit--city    .benefit__icon{background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.22); color:#3730a3}

.benefit__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
  color: var(--muted);
}

.benefit__list li{
  position:relative;
  padding-left:22px;
  line-height:1.45;
}

.benefit__list li::before{
  content:"";
  position:absolute;
  left:0; top:7px;
  width:12px; height:12px;
  border-radius:5px;
  background: rgba(34,197,94,0.14);
  border: 1px solid rgba(34,197,94,0.28);
}

.benefit__list li::after{
  content:"";
  position:absolute;
  left:3px; top:10px;
  width:5px; height:3px;
  border-left:2px solid #16a34a;
  border-bottom:2px solid #16a34a;
  transform: rotate(-45deg);
}

.benefits-head{
  max-width: 820px;
  margin: 10px auto 18px;
  text-align: center;
}
.benefits-subtitle{
  margin-left: auto;
  margin-right: auto;
  max-width: 72ch;
}

:root{
  --rm-bar-h: 76px;
}

body{
  padding-top: var(--rm-bar-h);
}

/* BAR */
.rm-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 3000;

  background: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(15,23,42,.08);

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

  transition: transform 220ms ease, opacity 220ms ease;
  will-change: transform, opacity;
}

.rm-bar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,131,132,.35) 20%,
    rgba(22,163,74,.28) 55%,
    transparent 100%);
  pointer-events:none;
}

.rm-bar.is-hidden{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

.rm-bar__brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}


.rm-bar__link{
  text-decoration:none;
  color: var(--rm-text);
  font-weight: 650;
  letter-spacing: .2px;
  opacity: .86;
}
.rm-bar__link:hover{ opacity: 1; }

/* CTA */
.rm-bar__cta{
  text-decoration:none;
  font-weight: 750;

  padding: 10px 16px;
  border-radius: 999px;
  color: var(--rm-accent);
  border: 2px solid color-mix(in srgb, var(--rm-accent) 75%, transparent);
  background: rgba(255,255,255,.9);
}
.rm-bar__cta:hover{
  border-color: var(--rm-accent);
}

/* BURGER */
.rm-bar__burger{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--rm-shadow);
  cursor: pointer;
  position: relative;
}

.rm-bar__burger span{
  position:absolute;
  left:50%;
  width: 18px;
  height: 2px;
  background: var(--rm-text);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform 220ms ease, opacity 180ms ease;
}
.rm-bar__burger span:nth-child(1){ top: 14px; }
.rm-bar__burger span:nth-child(2){ top: 21px; }
.rm-bar__burger span:nth-child(3){ top: 28px; }

.rm-bar__burger.is-open span:nth-child(1){ transform: translateX(-50%) translateY(7px) rotate(45deg); }
.rm-bar__burger.is-open span:nth-child(2){ opacity: 0; }
.rm-bar__burger.is-open span:nth-child(3){ transform: translateX(-50%) translateY(-7px) rotate(-45deg); }

/* MOBILE MENU */
.rm-bar__mobile{
  display:none;
  max-width: 1200px;
  margin: 0 auto 12px;
  padding: 12px 18px 18px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: var(--rm-shadow-strong);
}

.rm-bar__mobile a{
  display:block;
  padding: 10px 10px;
  text-decoration:none;
  color: var(--rm-text);
  font-weight: 650;
  border-radius: 12px;
}
.rm-bar__mobile a:hover{
  background: rgba(15,23,42,.04);
}

.rm-bar__mobile-cta{
  margin-top: 8px;
  text-align:center;
  border: 2px solid color-mix(in srgb, var(--rm-accent) 75%, transparent);
  color: var(--rm-accent);
  background: rgba(255,255,255,.95);
}



/* =========================
   OPTION 1: NAV = MARK + WORD, HERO = FULL LOCKUP
   ========================= */

/* Nav inner: wyrównaj do tej samej osi co content (container) */
.rm-bar__inner{
  height: var(--rm-bar-h);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Brand w nav */
.rm-bar__brand{
  display: flex;
  align-items: center;
  gap: 10px;
}

.rm-bar__mark{
  width: 34px;
  height: 34px;
  display: block;
}

.rm-bar__word{
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--rm-text);
  line-height: 1;
}

/* Na mobile zostaje tylko znak (czytelniej, mniej ciasno) */
@media (max-width: 980px){
  .rm-bar__word{ display: none; }
}

/* Nav links po prawej (jedna definicja, bez duplikatów) */
.rm-bar__links{
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
}

/* CTA odstęp od linków */
.rm-bar__cta{
  margin-left: 16px;
}
.mock__body{
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px){
  .mock__body{ grid-template-columns: 1fr; }
}
/* Sparkline (mini trend) */
.spark{
  grid-column: 1 / -1;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
/* Proste wyróżnienie misji w Hero */
.hero .lead.lead--mission{
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1.4;
  margin: 6px 0 18px;
  max-width: 39ch;

  padding-left: 10px;
  border-left: 3px solid rgba(34,197,94,.75);
}

/* Mobile */
@media (max-width: 720px){
  .hero .lead.lead--mission{
    font-size: 1.12rem;
    max-width: 100%;
    margin: 4px 0 14px;
  }
}


/* =========================
   TEACHERVIEW MOCK — SaaS premium (jedna wersja, bez duplikatów)
   ========================= */

.mock{
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 22px 60px rgba(15,23,42,0.10);
  overflow: hidden;
}

.mock__header{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.86));
}

/* Body layout */
.mock__body{
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 520px){
  .mock__body{ grid-template-columns: 1fr; }
}

/* KPI cards */
.kpi{
  padding: 14px 14px 12px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
}

.kpi__label{
  color: rgba(15,23,42,0.62);
  font-size: 0.84rem;
  letter-spacing: .2px;
}

.kpi__value{
  margin-top: 4px;
  font-size: 1.70rem;
  font-weight: 820;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.kpi__valueSmall{
  font-size: 1.05rem;
  font-weight: 750;
  color: rgba(15,23,42,0.50);
  margin-left: 2px;
}

.kpi__hint{
  margin-top: 6px;
  color: rgba(15,23,42,0.58);
  font-size: 0.85rem;
}

.kpi__hint--up{
  color: rgba(22,163,74,0.95);
  font-weight: 700;
}

/* Sparkline = “moduł” */
.spark{
  grid-column: 1 / -1;
  padding: 12px 12px 10px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(37,99,235,0.06), rgba(255,255,255,0.94));
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
}

.spark__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  padding: 2px 2px 8px;
}

.spark__title{
  font-weight: 750;
  font-size: 0.90rem;
  color: rgba(15,23,42,0.82);
}

.spark__meta{
  font-size: 0.82rem;
  color: rgba(15,23,42,0.55);
}

.spark svg{
  width: 100%;
  height: 44px;
  display: block;
}

.spark__area{ fill: rgba(37,99,235,0.10); }

.spark__line{
  fill: none;
  stroke: rgba(37,99,235,0.72);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spark__dot{
  fill: rgba(37,99,235,0.90);
  stroke: rgba(255,255,255,0.95);
  stroke-width: none;
}

.spark__foot{
  display:flex;
  justify-content:space-between;
  margin-top: 6px;
  font-size: 0.80rem;
  color: rgba(15,23,42,0.50);
  padding: 0 2px;
}

/* SAFE alert — enterprise, czytelne, spokojne */
.alert{
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(245,158,11,0.22);
  background: rgba(245,158,11,0.06);
}

.alert__badge{
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 850;
  color: #b45309;
  background: rgba(245,158,11,0.14);
  border: 1px solid rgba(245,158,11,0.20);
  padding: 6px 10px;
  border-radius: 999px;
  line-height: 1;
  margin-top: 1px;
}

.alert__content{ min-width: 0; }

.alert__title{
  font-weight: 850;
  color: #92400e;
  line-height: 1.2;
}

.alert__text{
  margin-top: 2px;
  color: rgba(146,64,14,0.85);
  font-size: 0.92rem;
  line-height: 1.35;
}

/* Meta */
.mock__meta{
  grid-column: 1 / -1;
  font-size: 0.82rem;
  color: rgba(15,23,42,0.52);
  padding-top: 2px;
}
.spark__plot{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: stretch;
}

.spark__axis{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 0.76rem;
  color: rgba(15,23,42,0.42);
  user-select: none;
}

.spark__chart svg{
  width: 100%;
  height: 94px;
  display: block;
}

.spark__grid{
  stroke: rgba(15,23,42,0.07);
  stroke-width: 1;
}
.alert--compact{
  align-items: center;
  padding: 10px 12px;     
}

.alert--compact .alert__content{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.alert__sep{
  color: rgba(146,64,14,0.55);
}

.alert--compact .alert__title{
  font-size: 0.92rem;
  font-weight: 850;
}

.alert--compact .alert__text{
  margin-top: 0;
  font-size: 0.88rem;     
  color: rgba(146,64,14,0.78);
}
.spark__grid--neutral{
  stroke: rgba(15,23,42,0.12);
  stroke-dasharray: 3 3;
}
.spark__dot--small{
  opacity: 0.18;     
  stroke: none;
}
.section--benefits{
  padding-top: calc(var(--section-y) + 32px);
}
.benefits-head{
  max-width: 820px;
  margin: 16px auto 28px;
  padding-bottom: 12px;
  text-align: center;
}

.benefits-title{
  margin: 0 0 22px;
}
.section.section--benefits{
  padding-top: 50px;   
  padding-bottom: 74px; 
}

.section.section--benefits .benefits-head{
  margin: 0 auto 16px; 
}
/* Benefits */

.section--benefits{
  position: relative;
  background: var(--bg);     
  overflow: hidden;
}

.section--benefits::after{
  content:"";
  position: absolute;
  inset: -160px -140px -220px -140px;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(1100px 420px at 18% 10%, rgba(37,99,235,0.07), transparent 60%),
    radial-gradient(900px 360px at 82% 14%, rgba(22,163,74,0.07), transparent 58%),
    radial-gradient(720px 300px at 52% 88%, rgba(37,99,235,0.22), transparent 62%),
    linear-gradient(180deg, rgba(247,249,252,0.85), rgba(255,255,255,0));
  filter: saturate(1.05);
}

.section--benefits > .container{
  position: relative;
  z-index: 1;
}
.security-cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.security-cta{
  display:flex;
  justify-content:flex-start;
  margin-top: 14px;
}

.btn--security{
  background: rgba(22,163,74,0.08);
  border: 1px solid rgba(22,163,74,0.28);
  color: rgba(15,81,50,0.95);
  box-shadow: 0 10px 18px rgba(22,163,74,0.10);
}

.btn--security:hover{
  box-shadow: 0 14px 22px rgba(22,163,74,0.14);
  filter: brightness(0.99);
}
.security-side{
  display: grid;
  gap: 12px;
}
#security .split{
  align-items: start;
}

#security .callout{
  margin-top: 6px;
}
#security .callout{
  box-shadow: 0 16px 30px rgba(15,23,42,0.08);
}
@media (min-width: 980px){
  #security .split{
    grid-template-columns: 1.15fr 0.7fr;
  }
}
.rm-icon { width: 22px; height: 22px; display:block; }
.contact-card{
  margin: 18px auto 0;
  padding: 22px 22px 18px;
  max-width: 620px;

  text-align: center;
  background: rgba(255,255,255,0.90);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.contact-title{ margin-bottom: 6px; }

.contact-lead{
  margin: 0 auto 14px;
  max-width: 60ch;
}

.contact{
  justify-content: center; 
}

.contact-meta{
  margin-top: 10px;
  font-size: 0.95rem;
}

@media (max-width: 520px){
  .contact-card{ padding: 18px 16px; }
  .contact{ flex-direction: column; align-items: stretch; }
  .contact .btn{ width: 100%; }
}
.benefit__top{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px; 
}
.benefit__heading h3{
  line-height:1.15;
  margin:0;
}

.footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.footer__brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.footer__copy{
  font-weight:750;
  letter-spacing: -0.01em;
}

.footer__meta{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.footer__links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

.footer__links a{
  color: var(--muted);
  font-weight:650;
  text-decoration:none;
  padding: 6px 0;
}

.footer__links a:hover{
  color: var(--text);
}

@media (max-width: 720px){
  .footer__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}
/* Footer polish — separators + hover underline */
.footer__inner{ align-items: center; }  

.footer__links a{
  position: relative;
  border-bottom: 1px solid transparent;
}

.footer__links a:hover{
  border-bottom-color: rgba(15,23,42,0.22);
}

.footer__links a + a{
  padding-left: 18px;
}

.footer__links a + a::before{
  content:"•";
  position:absolute;
  left: 6px;
  top: 6px;
  color: rgba(15,23,42,0.25);
}
.footer{
  padding: 18px 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(37,99,235,0.05), transparent 60%),
    radial-gradient(900px 220px at 80% 0%, rgba(22,163,74,0.05), transparent 60%),
    var(--bg);
}


/* ---------------------------
   Footer (compact + pro)
--------------------------- */
.footer{
  padding: 18px 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
}

.footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.footer__brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.footer__copy{ font-weight: 750; letter-spacing: -0.01em; }
.footer__meta{ color: var(--muted); font-size: 13px; line-height: 1.35; }

.footer__links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.footer__links a{
  color: var(--muted);
  font-weight: 650;
  text-decoration:none;
  padding: 6px 0;
  position: relative;
  border-bottom: 1px solid transparent;
}
.footer__links a:hover{
  color: var(--text);
  border-bottom-color: rgba(15,23,42,0.22);
}
.footer__links a + a{ padding-left: 18px; }
.footer__links a + a::before{
  content:"•";
  position:absolute;
  left: 6px;
  top: 6px;
  color: rgba(15,23,42,0.25);
}
/* Active nav state — text only (RM green) */
.rm-bar__link[aria-current="page"]{
  opacity: 1;
  color: var(--brand);
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
}

/* Mobile menu active — text only (RM green) */
.rm-bar__mobile a[aria-current="page"]{
  color: var(--brand);
  background: none;
  border: 0;
}

/* =========================
   ROLE CARDS — FRAME-LIKE (foto + rola)
   Wklej NA SAM KONIEC style.css
   ========================= */

/* Karta: duża, czysta, klikalna */
.rolecard.rolecard--hero{
  padding: 0 !important;
  border-radius: 22px !important;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 14px 30px rgba(15,23,42,0.08);

  transform: none;
}

/* Hover jak w SaaS */
.rolecard.rolecard--hero:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(15,23,42,0.12);
  border-color: rgba(15,23,42,0.16);
}

.rolecard.rolecard--hero:focus-visible{
  outline: 3px solid rgba(37,99,235,0.22);
  outline-offset: 4px;
}

/* Obraz: duży “hero” */
.rolecard.rolecard--hero .rolecard__media{
  position: relative;
  height: 340px;              /* klucz: “duże” jak na referencji */
  border: 0;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

@media (max-width: 1199px){
  .rolecard.rolecard--hero .rolecard__media{ height: 300px; }
}
@media (max-width: 520px){
  .rolecard.rolecard--hero .rolecard__media{ height: 220px; }
}

.rolecard.rolecard--hero .rolecard__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
}

/* Delikatny overlay, żeby zdjęcia wyglądały spójnie i “premium” */
.rolecard.rolecard--hero .rolecard__media::after{
  content:"";
  position:absolute;
  inset: 0;
 
  pointer-events:none;
}

/* Podpis roli: duży, prosty, bez podtytułów */
.rolecard__label{
  padding: 16px 18px 18px;
  font-weight: 850;
  letter-spacing: -0.02em;
  font-size: 1.10rem;
  line-height: 1.15;
}

/* Opcjonalnie: subtelny akcent pod role (bez ikonek) */
.rolecard[data-role="student"] .rolecard__label{ border-top: 1px solid rgba(34,197,94,0.20); }
.rolecard[data-role="teacher"] .rolecard__label{ border-top: 1px solid rgba(43,108,255,0.18); }
.rolecard[data-role="psych"]   .rolecard__label{ border-top: 1px solid rgba(245,158,11,0.22); }
.rolecard[data-role="school"]  .rolecard__label{ border-top: 1px solid rgba(15,23,42,0.12); }



/* =========================
   FIX: HERO cards nie mogą być spłaszczone przez stare override
   Wklej NA SAM KONIEC style.css
   ========================= */

.roles-grid.roles-grid--hero{
  max-width: 1320px;  
  margin: 26px auto 0;
}


/* 4 karty obok siebie, ale z większym oddechem */
@media (min-width: 1200px){
  .roles-grid.roles-grid--hero{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
}

/* klucz: ustaw wysokość zdjęcia NA HERO z !important */
.rolecard.rolecard--hero .rolecard__media{
  height: 380px !important;
  min-height: 380px !important;
  margin: 0 !important;
}

/* tablet */
@media (max-width: 1199px){
  .rolecard.rolecard--hero .rolecard__media{
    height: 280px !important;
    min-height: 280px !important;
  }
}

/* phone */
@media (max-width: 520px){
  .rolecard.rolecard--hero .rolecard__media{
    height: 220px !important;
    min-height: 220px !important;
  }
}

.rolecard.rolecard--hero .rolecard__label{
  font-size: 1.22rem;
  padding: 20px 20px 22px;
}

/* =========================
   STICKY FOOTER (stopka na dole ekranu)
   ========================= */

html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main{
  flex: 1;              /* bierze wolne miejsce */
}

footer.footer{
  margin-top: auto;     /* wypycha stopkę na dół */
}
/* Jak działa — hero tło (jak w Home, ale spokojniejsze) */
.page-hero{
  position: relative;
  padding: 46px 0 18px;
  overflow: hidden;
}

.page-hero__bg{
  position: absolute;
  inset: -40px -40px auto -40px;
  height: 260px;
  background:
    radial-gradient(1200px 360px at 18% 10%, rgba(37,99,235,0.09), transparent 60%),
    radial-gradient(900px 320px at 82% 18%, rgba(22,163,74,0.09), transparent 58%),
    linear-gradient(180deg, var(--bg-soft), rgba(255,255,255,0));
  filter: saturate(1.05);
  pointer-events: none;
}

.page-hero__inner{ position: relative; }
/* Jak działa — HERO: mocniejsza hierarchia + prowadzenie */
.page-hero__inner{
  display: flex;
  justify-content: center;
}

.page-hero__copy{
  max-width: 900px;
  text-align: center;
}

.page-hero__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 750;
  font-size: 0.92rem;
  color: rgba(15,23,42,0.78);
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
  margin-bottom: 12px;
}

.page-hero h1{
  margin-top: 6px;
  margin-bottom: 10px;
  line-height: 1.08;
}

.lead.lead--hero{
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.06rem;
  color: rgba(15,23,42,0.62);
}

.hero-steps{
  list-style: none;
  padding: 0;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 980px;
}

.hero-steps li{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.78);
  color: rgba(15,23,42,0.70);
  font-weight: 650;
  font-size: 0.92rem;
}

.hero-steps li span{
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 850;
  color: rgba(0,131,132,0.95);
  border: 1px solid rgba(0,131,132,0.18);
  background: rgba(0,131,132,0.08);
}

@media (max-width: 980px){
  .hero-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .hero-steps{ grid-template-columns: 1fr; }
  .page-hero{ padding-top: 38px; }
}

/* Krytyczny FIX: pusty panel wygląda jak bug */
.role-detail:empty{ display: none; }
/* Role cards as links (premium interaction) */
/* =========================================
   JAK DZIAŁA — ROLE CARDS (CLEAN FINAL)
   ========================================= */

.roles-section{
  padding: clamp(14px, 2vw, 26px) 0 clamp(34px, 4vw, 56px);
}

.roles-grid.roles-grid--hero{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
  align-items: stretch;
  max-width: 1320px;
  margin: 22px auto 0;
}

@media (max-width: 1180px){
  .roles-grid.roles-grid--hero{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .roles-grid.roles-grid--hero{
    grid-template-columns: 1fr;
  }
}

/* karta */
.rolecard.rolecard--hero{
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 12px 28px rgba(15,23,42,0.08);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.rolecard.rolecard--hero:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(15,23,42,0.12);
  border-color: rgba(15,23,42,0.16);
}

.rolecard.rolecard--hero:focus-visible{
  outline: 3px solid rgba(43,125,115,0.25);
  outline-offset: 4px;
}

/* zdjęcie */
.rolecard.rolecard--hero .rolecard__media{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #eef2f7;
  border: 0;
  margin: 0;
}

.rolecard.rolecard--hero .rolecard__img,
.rolecard.rolecard--hero .rolecard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform .28s ease;
}

.rolecard.rolecard--hero:hover .rolecard__img,
.rolecard.rolecard--hero:hover .rolecard__media img{
  transform: scale(1.03);
}

/* podpis pod zdjęciem — tu jest wyśrodkowanie */
.rolecard.rolecard--hero .rolecard__body{
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-top: 1px solid rgba(15,23,42,0.07);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.rolecard.rolecard--hero .rolecard__label{
  margin: 0;
  width: 100%;
  text-align: center;
  text-decoration: none;

  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.30vw, 1.12rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: rgba(15,23,42,0.93);
}

/* ==========================================
   ReflectMe — Security Page (Top SaaS style)
   File: style-security-add.css
   ========================================== */

/* ---------- Design tokens (page scope) ---------- */
.security-page{
  --sec-ink: #0f172a;
  --sec-muted: #475569;
  --sec-line: rgba(15, 23, 42, .11);
  --sec-line-strong: rgba(15, 23, 42, .16);

  --sec-brand: #008384;
  --sec-brand-soft: rgba(0, 131, 132, .12);

  --sec-blue: #2563eb;
  --sec-blue-soft: rgba(37, 99, 235, .12);

  --sec-surface: #ffffff;
  --sec-soft: #f7fbff;

  --sec-shadow: 0 18px 44px rgba(15, 23, 42, .10);
  --sec-shadow-soft: 0 12px 26px rgba(15, 23, 42, .08);
  --sec-radius: 20px;
  --sec-radius-lg: 24px;
}

/* ---------- Page background ---------- */
body.security-page{
  background:
    radial-gradient(1200px 460px at 12% 0%, rgba(37,99,235,.10), transparent 62%),
    radial-gradient(940px 400px at 88% 10%, rgba(0,131,132,.10), transparent 58%),
    #fff;
  color: var(--sec-ink);
}

.trust-main .section{
  scroll-margin-top: calc(var(--rm-bar-h, 76px) + 18px);
}

/* ---------- Hero ---------- */
.trust-hero{
  position: relative;
  overflow: clip;
  padding: clamp(56px, 8vw, 86px) 0 34px;
}

.trust-hero__bg{
  position: absolute;
  inset: -26px -40px auto -40px;
  height: 420px;
  pointer-events: none;
  background:
    radial-gradient(980px 360px at 20% 15%, rgba(37,99,235,.10), transparent 62%),
    radial-gradient(760px 300px at 84% 20%, rgba(0,131,132,.12), transparent 60%),
    linear-gradient(180deg, #f8fbff 0%, rgba(255,255,255,0) 100%);
}

.trust-hero__grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items: center;
}

.trust-kicker{
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--sec-line);
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,.78);
}

.trust-kicker::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sec-brand);
  box-shadow: 0 0 0 6px var(--sec-brand-soft);
}

.trust-copy h1{
  margin: 0 0 14px;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 18ch;
}

.trust-lead{
  margin: 0 0 16px;
  max-width: 62ch;
}

.trust-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.trust-badge{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--sec-line);
  background: rgba(255,255,255,.85);
  color: rgba(15,23,42,.84);
  font-weight: 650;
  font-size: .93rem;
}

.trust-badge i{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34,197,94,.16);
}

.trust-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Hero right card ---------- */
.trust-hero-card{
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,251,255,.92));
  box-shadow: var(--sec-shadow);
  padding: 22px;
  position: relative;
  overflow: hidden;
}

.trust-hero-card::before{
  content: "";
  position: absolute;
  inset: auto -80px -90px auto;
  width: 260px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.14) 0%, rgba(37,99,235,0) 70%);
  pointer-events: none;
}

.trust-hero-card h2{
  margin: 0 0 12px;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}

.hero-metrics{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.hero-metrics li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--sec-line);
  border-radius: 12px;
  background: #fff;
}

.hero-metrics li span{
  color: var(--sec-muted);
  font-size: .93rem;
}

.hero-metrics li strong{
  color: var(--sec-ink);
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
}

.hero-stack{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-stack span{
  font-size: .78rem;
  font-weight: 700;
  color: #1e3a8a;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.20);
  border-radius: 999px;
  padding: 6px 10px;
}

/* ---------- Shared blocks ---------- */
.trust-block{
  background: var(--sec-surface);
}

.trust-block--soft{
  background:
    linear-gradient(180deg, #f8fcff 0%, #f4f9ff 100%);
}

.trust-head{
  max-width: 760px;
  margin-bottom: 14px;
}

.trust-head h2{
  margin: 0 0 8px;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* ---------- Proof cards ---------- */
.proof-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.proof-card{
  border: 1px solid var(--sec-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sec-shadow-soft);
  padding: 16px;
}

.proof-card h3{
  margin: 0 0 6px;
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.proof-card p{
  margin: 0;
  color: var(--sec-muted);
  font-size: .95rem;
}

/* ---------- Access tabs ---------- */
.access-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 12px;
}

.access-tab{
  appearance: none;
  border: 1px solid var(--sec-line);
  background: #fff;
  color: var(--sec-ink);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.access-tab:hover{
  transform: translateY(-1px);
}

.access-tab.is-active{
  border-color: var(--sec-brand);
  box-shadow: 0 0 0 3px rgba(0,131,132,.15);
}

.access-panel{
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
  background:
    linear-gradient(180deg, #fff 0%, #f9fcff 100%);
  box-shadow: var(--sec-shadow-soft);
  padding: 16px;
}

.access-panel[hidden]{
  display: none;
}

.access-panel h3{
  margin: 0 0 4px;
  font-size: 1.12rem;
}

.access-panel > p{
  margin: 0 0 12px;
  color: var(--sec-muted);
}

.access-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.access-col{
  border: 1px solid var(--sec-line);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.access-col h4{
  margin: 0 0 8px;
  font-size: .9rem;
  color: rgba(15,23,42,.78);
  letter-spacing: .01em;
  text-transform: uppercase;
}

.access-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.access-list li{
  position: relative;
  padding-left: 24px;
  color: #1e293b;
  font-size: .93rem;
}

.access-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .43em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.access-list li.is-yes::before{
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.35);
  box-shadow: inset 0 0 0 3px rgba(34,197,94,.40);
}

.access-list li.is-no::before{
  background: rgba(239,68,68,.14);
  border: 1px solid rgba(239,68,68,.30);
  box-shadow: inset 0 0 0 3px rgba(239,68,68,.36);
}

/* ---------- SAFE flow ---------- */
.safe-flow{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.safe-step{
  border: 1px solid var(--sec-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sec-shadow-soft);
  padding: 14px;
  position: relative;
}

.safe-step__num{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: .86rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #0ea5a6, #2563eb);
  margin-bottom: 10px;
}

.safe-step h3{
  margin: 0 0 6px;
  font-size: 1rem;
  letter-spacing: -.01em;
}

.safe-step p{
  margin: 0;
  color: var(--sec-muted);
  font-size: .92rem;
}

/* ---------- Controls / accordions (final fix) ---------- */
.security-page .controls-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start; /* FIX: koniec sztucznego rozciągania sąsiada */
}

.security-page .control-item{
  align-self: start;
  border: 1px solid var(--sec-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sec-shadow-soft);
  overflow: clip;
}

.security-page .control-item > summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 14px 86px 14px 14px;
  position: relative;
  display: grid;
  gap: 2px;
  transition: background-color .18s ease;
}

.security-page .control-item > summary:hover{
  background: rgba(37, 99, 235, .05);
}

.security-page .control-item > summary:focus-visible{
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: -3px;
}

.security-page .control-item > summary span{
  font-size: 1rem;
  font-weight: 700;
  color: var(--sec-ink);
  line-height: 1.2;
}

.security-page .control-item > summary small{
  color: var(--sec-muted);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.25;
}

.security-page .control-item > summary::-webkit-details-marker{
  display: none;
}



/* + / - zamiast mikroskopijnej strzałki */
.security-page .control-item > summary::after{
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  color: #1e4fb8;
  background: rgba(37, 99, 235, .10);
  border: 1px solid rgba(37, 99, 235, .28);
}

.security-page .control-item[open] > summary{
  background: linear-gradient(180deg, rgba(240,247,255,.82), rgba(255,255,255,1));
  border-bottom: 1px solid var(--sec-line);
}

.security-page .control-body{
  padding: 0 14px 14px;
}

.security-page .control-body ul{
  margin: 0;
  padding-left: 18px;
  color: var(--sec-muted);
  display: grid;
  gap: 6px;
  font-size: .93rem;
}

@media (max-width: 760px){
  .security-page .controls-grid{
    grid-template-columns: 1fr;
  }
}


/* ---------- Docs ---------- */
.docs-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.doc-card{
  border: 1px solid var(--sec-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sec-shadow-soft);
  padding: 16px;
}

.doc-card h3{
  margin: 0 0 7px;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}

.doc-card p{
  margin: 0 0 10px;
  color: var(--sec-muted);
  font-size: .93rem;
}

.doc-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #0b5f60;
  text-decoration: none;
}

.doc-link:hover{
  text-decoration: underline;
}

.trust-cta{
  margin-top: 12px;
  border: 1px solid var(--sec-line-strong);
  border-radius: 18px;
  padding: clamp(16px, 2.5vw, 24px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,250,255,.95));
  box-shadow: var(--sec-shadow);
  text-align: center;
}

.trust-cta h3{
  margin: 0 0 8px;
  font-size: clamp(1.08rem, 1.8vw, 1.34rem);
  line-height: 1.25;
  letter-spacing: -.01em;
}

.trust-cta p{
  margin: 0 0 12px;
  color: var(--sec-muted);
}

/* ---------- Motion + progressive rendering ---------- */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .6s cubic-bezier(.2,.7,.2,1),
    transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.lazy-section{
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

/* ---------- Focus accessibility ---------- */
.access-tab:focus-visible,
.doc-link:focus-visible,
.trust-actions .btn:focus-visible,
.trust-cta .btn:focus-visible{
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: 2px;
}

/* ---------- Hover polish ---------- */
@media (hover: hover){
  .proof-card:hover,
  .safe-step:hover,
  .doc-card:hover{
    transform: translateY(-2px);
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 16px 34px rgba(15,23,42,.12);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px){
  .trust-hero__grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .proof-grid{
    grid-template-columns: 1fr 1fr;
  }
  .safe-flow{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px){
  .trust-hero{
    padding-top: 44px;
  }

  .proof-grid,
  .access-grid,
  .controls-grid,
  .docs-grid{
    grid-template-columns: 1fr;
  }

  .safe-flow{
    grid-template-columns: 1fr;
  }

  .access-tab{
    width: 100%;
    text-align: left;
  }
}

@media (max-width: 520px){
  .trust-copy h1{
    font-size: clamp(1.72rem, 8vw, 2.05rem);
    max-width: 100%;
  }

  .trust-badges{
    gap: 8px;
  }

  .trust-badge{
    font-size: .86rem;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .proof-card:hover,
  .safe-step:hover,
  .doc-card:hover,
  .access-tab:hover{
    transform: none;
    transition: none;
  }
}
/* =========================================================
   SECURITY SHIELD FINAL — ONE SOURCE OF TRUTH
   (tarcza ~2x mniejsza + mniejsza kłódka + warianty animacji)
   ========================================================= */

/* ---- prawa kolumna hero ---- */
.security-page .sec-visual.sec-visual--shield-pro{
  --shield-width: clamp(170px, 21vw, 260px); /* ~2x mniejsza niż wcześniejsze 340-540 */
  --shield-widen: 1.06;
  --lock-scale: .82;                          /* mniejsza kłódka */
  --float-y: 8px;
  --yaw-deg: 8deg;

  order: 2 !important;
  justify-self: end !important;
  width: min(340px, 100%) !important;
  display: grid;
  align-items: center;
}

@media (max-width: 979px){
  .security-page .sec-visual.sec-visual--shield-pro{
    justify-self: center !important;
    width: min(300px, 100%) !important;
    --shield-width: min(200px, 62vw);
    --shield-widen: 1.03;
    --lock-scale: .80;
  }
}

/* ---- tagi pod tarczą ---- */
.security-page .sec-tags{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.security-page .sec-tags span{
  font-size: .79rem;
  font-weight: 700;
  color: #1e4fb8;
  background: rgba(37,99,235,.12);
  border: 1px solid rgba(37,99,235,.24);
  border-radius: 999px;
  padding: 6px 10px;
}

/* ---- scena ---- */
.security-page .sec-visual--shield-pro .shield-pro-scene{
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
  perspective: 1200px;
  isolation: isolate;
}

@media (max-width: 979px){
  .security-page .sec-visual--shield-pro .shield-pro-scene{
    min-height: 250px;
  }
}

/* aura */
.security-page .sec-visual--shield-pro .shield-pro-aura{
  position: absolute;
  inset: 11% 12% 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.28), rgba(37,99,235,0) 72%);
  filter: blur(12px);
  z-index: -1;
  will-change: transform, opacity;
}

/* wrapper do szerokości bryły */
.security-page .sec-visual--shield-pro .shield-pro-scale{
  transform: scaleX(var(--shield-widen));
  transform-origin: 50% 56%;
  will-change: transform;
}

/* svg tarczy */
.security-page .sec-visual--shield-pro .shield-pro-svg{
  width: var(--shield-width);
  height: auto;
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
}

/* kłódka (pomniejszona globalnie) */
.security-page .sec-visual--shield-pro .shield-lock{
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(1px) scale(var(--lock-scale));
  will-change: transform;
}

/* sweep + gwiazdki (opcjonalnie, jeśli są w SVG) */
.security-page .sec-visual--shield-pro .shield-sweep{
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity;
}
.security-page .sec-visual--shield-pro .shield-star{
  transform-origin: center;
  will-change: transform, opacity;
}

/* cień */
.security-page .sec-visual--shield-pro .shield-pro-shadow{
  position: absolute;
  bottom: 18px;
  width: clamp(110px, 42%, 170px);
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15,23,42,.28), rgba(15,23,42,0) 72%);
  filter: blur(2px);
  z-index: -1;
  will-change: transform, opacity;
}

/* =========================================================
   WARIANTY ANIMACJI
   Dodajesz klasę na <aside class="...">
   .anim-rotate | .anim-pulse | .anim-scan | .anim-lock | .anim-hover
   ========================================================= */

/* 1) ROTATE (subtelny premium) */
.security-page .sec-visual--shield-pro.anim-rotate .shield-pro-scale{
  animation: shFloat 6.2s ease-in-out infinite;
}
.security-page .sec-visual--shield-pro.anim-rotate .shield-pro-svg{
  animation: shYaw 10.5s ease-in-out infinite;
}
.security-page .sec-visual--shield-pro.anim-rotate .shield-pro-shadow{
  animation: shShadow 6.2s ease-in-out infinite;
}

/* 2) PULSE */
.security-page .sec-visual--shield-pro.anim-pulse .shield-pro-scale{
  animation: shPulse 2.8s ease-in-out infinite;
}
.security-page .sec-visual--shield-pro.anim-pulse .shield-pro-aura{
  animation: shAuraPulse 2.8s ease-in-out infinite;
}
.security-page .sec-visual--shield-pro.anim-pulse .shield-pro-shadow{
  animation: shShadowPulse 2.8s ease-in-out infinite;
}

/* 3) SCAN */
.security-page .sec-visual--shield-pro.anim-scan .shield-pro-scale{
  animation: shTilt 7.4s ease-in-out infinite;
}
.security-page .sec-visual--shield-pro.anim-scan .shield-sweep{
  animation: shSweep 4.8s ease-in-out infinite;
}
.security-page .sec-visual--shield-pro.anim-scan .shield-star{
  animation: shStar 3.4s ease-in-out infinite;
}

/* 4) LOCK FOCUS (mocniej pracuje sama kłódka) */
.security-page .sec-visual--shield-pro.anim-lock .shield-pro-scale{
  animation: shFloatSoft 6.6s ease-in-out infinite;
}
.security-page .sec-visual--shield-pro.anim-lock .shield-lock{
  animation: shLockPulse 2.2s ease-in-out infinite;
}
.security-page .sec-visual--shield-pro.anim-lock .shield-pro-aura{
  animation: shAuraSoft 3.2s ease-in-out infinite;
}

/* 5) HOVER ONLY */
.security-page .sec-visual--shield-pro.anim-hover .shield-pro-scale,
.security-page .sec-visual--shield-pro.anim-hover .shield-pro-svg{
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.security-page .sec-visual--shield-pro.anim-hover:hover .shield-pro-scale{
  transform: scaleX(var(--shield-widen)) translateY(-6px);
}
.security-page .sec-visual--shield-pro.anim-hover:hover .shield-pro-svg{
  transform: rotateY(8deg) rotateX(2deg);
}

/* ---- keyframes ---- */
@keyframes shFloat{
  0%,100%{ transform: scaleX(var(--shield-widen)) translateY(0); }
  50%{ transform: scaleX(var(--shield-widen)) translateY(calc(var(--float-y) * -1)); }
}
@keyframes shFloatSoft{
  0%,100%{ transform: scaleX(var(--shield-widen)) translateY(0); }
  50%{ transform: scaleX(var(--shield-widen)) translateY(-5px); }
}
@keyframes shYaw{
  0%,100%{ transform: rotateY(calc(var(--yaw-deg) * -1)) rotateX(2deg); }
  50%{ transform: rotateY(var(--yaw-deg)) rotateX(2deg); }
}
@keyframes shPulse{
  0%,100%{ transform: scaleX(var(--shield-widen)) scale(1); }
  50%{ transform: scaleX(var(--shield-widen)) scale(1.03); }
}
@keyframes shAuraPulse{
  0%,100%{ opacity:.45; transform: scale(1); }
  50%{ opacity:.78; transform: scale(1.08); }
}
@keyframes shAuraSoft{
  0%,100%{ opacity:.45; }
  50%{ opacity:.70; }
}
@keyframes shShadow{
  0%,100%{ transform: scaleX(1); opacity:.9; }
  50%{ transform: scaleX(.92); opacity:.72; }
}
@keyframes shShadowPulse{
  0%,100%{ transform: scaleX(1); opacity:.82; }
  50%{ transform: scaleX(.86); opacity:.56; }
}
@keyframes shTilt{
  0%,100%{ transform: scaleX(var(--shield-widen)) rotateZ(-1deg) translateY(0); }
  50%{ transform: scaleX(var(--shield-widen)) rotateZ(1deg) translateY(-5px); }
}
@keyframes shSweep{
  0%,18%{ transform: translateX(-180px); opacity:0; }
  34%{ opacity:.72; }
  62%{ transform: translateX(460px); opacity:.18; }
  100%{ transform: translateX(460px); opacity:0; }
}
@keyframes shStar{
  0%,100%{ opacity:.42; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.2); }
}
@keyframes shLockPulse{
  0%,100%{ transform: translateY(1px) scale(var(--lock-scale)); }
  50%{ transform: translateY(1px) scale(calc(var(--lock-scale) + .05)); }
}

/* ---- motion safety ---- */
@media (prefers-reduced-motion: reduce){
  .security-page .sec-visual--shield-pro .shield-pro-scale,
  .security-page .sec-visual--shield-pro .shield-pro-svg,
  .security-page .sec-visual--shield-pro .shield-pro-aura,
  .security-page .sec-visual--shield-pro .shield-pro-shadow,
  .security-page .sec-visual--shield-pro .shield-sweep,
  .security-page .sec-visual--shield-pro .shield-lock,
  .security-page .sec-visual--shield-pro .shield-star{
    animation: none !important;
    transition: none !important;
  }
}
/* =========================================================
   SECURITY HERO — FINAL TUNE (pozycja + łamanie tytułu)
   ========================================================= */

/* 1) Mniej łamania nagłówka po lewej */
.security-page .trust-copy h1{
  max-width: 23.5ch;     /* było ciaśniej, teraz dłuższe linie */
  line-height: 1.08;
  text-wrap: balance;
}

/* 2) Desktop: więcej miejsca dla lewej kolumny + tarcza lekko w lewo */
@media (min-width: 980px){
  .security-page .trust-hero__grid{
    grid-template-columns: 1.15fr .85fr !important; /* lewa kolumna szersza */
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
  }

  .security-page .sec-visual.sec-visual--shield-pro{
    justify-self: end !important;
    width: min(330px, 100%) !important;  /* trzymamy mniejszy rozmiar */
    transform: translateX(-22px);        /* lekko w lewo */
  }
}

/* 3) Spójna skala tarczy + mniejsza kłódka */
.security-page .sec-visual--shield-pro{
  --shield-width: clamp(180px, 20vw, 248px);
  --shield-widen: 1.08;
  --lock-scale: .84; /* mniejsza kłódka */
}

.security-page .sec-visual--shield-pro .shield-pro-scene{
  min-height: clamp(300px, 34vw, 410px);
}

.security-page .sec-visual--shield-pro .shield-lock{
  transform-origin: center;
  transform-box: fill-box;
  transform: translateY(2px) scale(var(--lock-scale));
}

/* 4) Mobile/tablet: reset przesunięcia */
@media (max-width: 979px){
  .security-page .sec-visual.sec-visual--shield-pro{
    width: min(300px, 92vw) !important;
    transform: none;
  }
}

@media (max-width: 520px){
  .security-page .trust-copy h1{
    max-width: 100%;
  }
}
/* ===== Security accordion icon — FAQ-like ===== */
.security-page .control-item > summary{
  position: relative;
  padding-right: 70px; /* miejsce na ikonę */
}

/* plus (2 kreski) */
.security-page .control-item > summary::before{
  content: "";
  position: absolute;
  right: 23px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  background:
    linear-gradient(currentColor,currentColor) center/10px 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 10px no-repeat;
  color: #567dcf;
  z-index: 2;
  transition: opacity .2s ease, transform .2s ease;
}

/* kółko */
.security-page .control-item > summary::after{
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1.5px solid #84a9ff;
  background: #e9f1ff;
  box-sizing: border-box;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

/* stan open = minus */
.security-page .control-item[open] > summary::before{
  background: linear-gradient(currentColor,currentColor) center/10px 2px no-repeat;
}
/* =========================
   SAFE HERO — 1:1 z HOME
   (Home: .hero = 50px 0 34px, grid 1.1/0.9, align start)
   ========================= */
.security-page .trust-hero{
  padding: 50px 0 34px !important;
}

.security-page .trust-hero__grid{
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 34px !important;
  align-items: start !important;
}

/* mobile: zachowaj proporcje i czytelność */
@media (max-width: 979px){
  .security-page .trust-hero__grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

@media (max-width: 760px){
  .security-page .trust-hero{
    padding: 50px 0 34px !important;
  }
}
/* ===== SECURITY HERO — final override (tarcza wyżej) ===== */
@media (min-width: 980px){
  .security-page .sec-visual.sec-visual--shield-pro,
  .security-page .sec-visual.sec-visual--s09{
    transform: translate(-22px, -34px) !important; /* X, Y */
  }

  /* delikatnie ciaśniej pod tarczą */
  .security-page .sec-tags{
    margin-top: 2px !important;
  }
}

@media (max-width: 979px){
  .security-page .sec-visual.sec-visual--shield-pro,
  .security-page .sec-visual.sec-visual--s09{
    transform: translateY(-12px) !important;
  }

  .security-page .sec-tags{
    margin-top: 4px !important;
  }
}

/* =========================================
   ReflectMe — FAQ (final clean)
   ========================================= */

:root{
  --faq-open-bg: rgba(0,131,132,.06);
  --faq-open-border: rgba(0,131,132,.26);
  --faq-open-shadow: rgba(0,131,132,.12);
  --faq-icon-ring: rgba(0,131,132,.42);
  --faq-icon-fill: rgba(0,131,132,.08);
  --faq-icon-line: #006f70;
}

.faq-page{
  background:
    radial-gradient(1200px 420px at 16% 0%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(900px 360px at 84% 10%, rgba(22,163,74,.08), transparent 58%),
    linear-gradient(180deg, rgba(247,249,252,.86), #fff 520px);
}

/* HERO */
.faq-clean .page-hero__copy{ max-width: 900px; }

.faq-clean .lead--hero{
  max-width: 68ch;
  margin-inline: auto;
  color: rgba(15,23,42,.66);
}

.faq-clean__toc{
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.faq-clean__toc a{
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: .88rem;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.faq-clean__toc a:hover{
  border-color: var(--faq-open-border);
  color: #006f70;
  transform: translateY(-1px);
}

/* STACK */
.faq-clean__stack{
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

.faq-clean__group{
  scroll-margin-top: calc(var(--rm-bar-h, 76px) + 18px);
}

.faq-clean__group-head{ margin-bottom: 10px; }

.faq-clean__group-head h2{
  margin: 0 0 4px;
  font-size: clamp(1.18rem, 1.8vw, 1.42rem);
  letter-spacing: -.015em;
}
.faq-clean__group-head p{
  margin: 0;
  color: var(--muted);
  font-size: .96rem;
}

/* FAQ ITEM */
.faq-clean__list{
  display: grid;
  gap: 10px;
}

.faq-clean__item{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15,23,42,.04);
  overflow: clip;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}


.faq-clean__item h3{ margin: 0; }

.faq-clean__trigger{
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  color: var(--text);
  font-weight: 760;
  font-size: .98rem;
  line-height: 1.35;
}

.faq-clean__trigger:hover{
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfb 100%);
}

.faq-clean__trigger:focus-visible{
  outline: 3px solid rgba(0,131,132,.22);
  outline-offset: -3px;
  border-radius: 12px;
}

/* PLUS / MINUS */
.faq-clean__icon{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1.5px solid var(--faq-icon-ring);
  background: var(--faq-icon-fill);
  position: relative;
  flex: 0 0 24px;
}

.faq-clean__icon::before,
.faq-clean__icon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--faq-icon-line);
  transform: translate(-50%, -50%);
  border-radius: 2px;
  transition: transform .16s ease, opacity .16s ease;
}
.faq-clean__icon::before{ width: 11px; height: 2px; } /* pozioma */
.faq-clean__icon::after{ width: 2px; height: 11px; } /* pionowa */

.faq-clean__trigger[aria-expanded="true"] .faq-clean__icon::after{
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}

/* PANEL */
.faq-clean__panel{
  padding: 0 16px 14px;
  color: rgba(15,23,42,.78);
}
.faq-clean__panel p{
  margin: 0;
  line-height: 1.62;
  font-size: .96rem;
}
.faq-clean__panel a{
  color: #006f70;
  text-underline-offset: 2px;
}

/* CTA */
.faq-clean__cta{
  max-width: 920px;
  margin: 0 auto;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  background:
    radial-gradient(820px 220px at 14% 0%, rgba(37,99,235,.07), transparent 62%),
    radial-gradient(820px 220px at 86% 0%, rgba(0,131,132,.07), transparent 62%),
    #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
  text-align: center;
  padding: clamp(20px, 3.2vw, 30px);
}
.faq-clean__cta h2{ margin: 0 0 6px; }
.faq-clean__cta p{
  margin: 0 auto 12px;
  max-width: 62ch;
  color: var(--muted);
}
.faq-clean__cta-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Responsive */
@media (max-width: 760px){
  .faq-clean__stack{ gap: 20px; }
  .faq-clean__toc{ gap: 8px; }
  .faq-clean__toc a{
    font-size: .84rem;
    padding: 7px 10px;
  }
  .faq-clean__trigger{
    padding: 14px 14px;
    font-size: .95rem;
  }
  .faq-clean__panel{
    padding: 0 14px 13px;
    font-size: .94rem;
  }
}
/* ===== LANDING GLOBAL PATCH: mobile nav + motion polish ===== */

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .rm-bar__mobile,
  .rm-bar__burger span,
  .benefit, .rolecard, .proof-card, .safe-step, .doc-card, .faq-clean__item,
  .reveal {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* Subtle premium card motion */
@media (hover: hover){
  .benefit, .rolecard, .proof-card, .faq-clean__item {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    will-change: transform;
  }
  .benefit:hover, .rolecard:hover, .proof-card:hover, .faq-clean__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(15,23,42,.12);
  }
}

/* Mobile navbar system */
@media (max-width: 980px){
  .rm-bar{
    z-index: 1200;
    overflow: visible;
  }

  .rm-bar__links,
  .rm-bar__cta{
    display: none;
  }

  .rm-bar__burger{
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(8px);
  }

  .rm-bar__burger span{
    transition: transform .22s ease, opacity .22s ease;
  }

  .rm-bar__burger.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .rm-bar__burger.is-open span:nth-child(2){ opacity: 0; }
  .rm-bar__burger.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  .rm-bar__mobile{
    display: block;
    position: absolute;
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    margin: 0;
    max-width: none;

    border: 1px solid rgba(15,23,42,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(15,23,42,.14);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.98);
    max-height: 0;
    padding: 0 10px;
    overflow: hidden;

    transition:
      opacity .22s ease,
      transform .22s ease,
      max-height .25s ease,
      padding .2s ease,
      visibility .22s ease;
  }

  .rm-bar__mobile.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    max-height: 78vh;
    padding: 12px 10px 14px;
  }

  .rm-bar__mobile a{
    padding: 12px 10px;
    border-radius: 10px;
  }
}
  .rm-bar__mobile a:hover{
    background: rgba(37,99,235,.08);
  }

@media (min-width: 981px){
  .rm-bar__burger{ display: none !important; }
  .rm-bar__mobile{ display: none !important; }
}

/* Small-screen density */
@media (max-width: 640px){
  .section{ padding: 54px 0; }
  .page-hero{ padding-top: 64px; padding-bottom: 32px; }
  .roles-grid, .benefits, .proof-grid{ gap: 12px; }
  .rolecard__body{ padding: 12px; }
}
/* ===== NAV MOBILE FIX: compact menu + poprawione X + scroll przy otwartym menu ===== */
@media (max-width: 980px){
  .rm-bar__mobile{
    top: calc(100% + 6px);
    left: 10px;
    right: 10px;
    border-radius: 12px;
    padding: 0 8px;
    max-height: 0;
    overflow: hidden;
  }

  .rm-bar__mobile.is-open{
    max-height: calc(100dvh - var(--rm-bar-h) - 18px);
    padding: 8px 8px 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .rm-bar__mobile a{
    padding: 8px 10px;      /* było za duże */
    border-radius: 9px;
    font-size: 17px;
    line-height: 1.2;
  }

  .rm-bar__mobile-cta{
    margin-top: 6px;
    padding: 9px 12px;
    min-height: 44px;
  }

  .rm-bar__burger{
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .rm-bar__burger span{
    left: 50%;
    width: 16px;
    transform: translateX(-50%);
    transform-origin: center;
  }

  .rm-bar__burger span:nth-child(1){ top: 13px; }
  .rm-bar__burger span:nth-child(2){ top: 20px; }
  .rm-bar__burger span:nth-child(3){ top: 27px; }

  .rm-bar__burger.is-open span:nth-child(1){
    transform: translateX(-50%) translateY(7px) rotate(45deg);
  }
  .rm-bar__burger.is-open span:nth-child(2){
    opacity: 0;
    transform: translateX(-50%) scaleX(.4);
  }
  .rm-bar__burger.is-open span:nth-child(3){
    transform: translateX(-50%) translateY(-7px) rotate(-45deg);
  }

  /* nie blokuj scrolla strony po otwarciu menu */
  body.nav-open{
       overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }
}
/* ===== PREMIUM NAV MOTION ===== */
.rm-bar{
  transition:
    transform .36s cubic-bezier(.22,.61,.36,1),
    opacity .20s ease,
    background-color .20s ease,
    box-shadow .24s ease;
}

.rm-bar.is-hidden{
  transform: translateY(calc(-1 * var(--rm-bar-h) - 12px));
  opacity: 0;
  pointer-events: none;
}

.rm-bar.is-scrolled{
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(15,23,42,.10);
}
/* Hero mission – mocniej, ale nadal premium */
.lead--mission{
  font-weight: 760;
  color: #0f172a;
  letter-spacing: -0.01em;
}

/* Podkreślenie kluczowego zdania bez „neonu” */
.text-strong{
  color: #0f172a;
  font-weight: 780;
}

}
/* =========================================================
   HOME MOBILE HARDENING — CSS ONLY (bez zmian w HTML)
   Cel: na mobile priorytet = copy + CTA, bez rozjazdu layoutu
   ========================================================= */

/* 1) Tablet i niżej: zawsze 1 kolumna w hero */
@media (max-width: 1024px){
  main#home .hero__grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  main#home .hero__copy{
    max-width: 100% !important;
  }

  main#home .hero__visual{
    order: 2;
    width: 100%;
  }

  main#home .hero__visual .mock{
    width: min(100%, 560px) !important;
    margin-inline: auto;
  }
}

/* 2) Telefon: chowamy ciężki mock + dekoracyjne foto w "Dlaczego ReflectMe" */
@media (max-width: 760px){
  main#home .hero{
    padding-top: 20px !important;
    padding-bottom: 10px !important;
  }

  main#home .hero__bg{
    inset: -18px -14px auto -14px !important;
    height: 240px !important;
  }

  /* KLUCZ: hero bez mocka na małych ekranach */
  main#home .hero__visual{
    display: none !important;
  }

  main#home h1{
    max-width: 11.5ch !important;
    font-size: clamp(1.95rem, 8.8vw, 2.35rem) !important;
    line-height: 1.08 !important;
    margin: 4px 0 10px !important;
    text-wrap: balance;
  }

  main#home .lead,
  main#home .lead--mission{
    max-width: 33ch !important;
  }

  main#home .cta{
    margin-bottom: 12px !important;
  }

  main#home .trust{
    gap: 10px !important;
  }

  /* "Dlaczego ReflectMe" — zdjęcie dekoracyjne out */
  main#home #what .about__grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  main#home #what .photo--about{
    display: none !important;
  }

  main#home #what .about__copy{
    max-width: 100% !important;
  }
}

/* 3) Bardzo małe telefony */
@media (max-width: 420px){
  main#home .container{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  main#home h1{
    max-width: 11ch !important;
    font-size: clamp(1.82rem, 9.2vw, 2.18rem) !important;
  }
}

/* 4) Progressive disclosure/perf dla sekcji poniżej hero (fallback-safe) */
@supports (content-visibility: auto){
  main#home .lazy-section:not(.hero){
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
  }
}

/* 5) Accessibility motion */
@media (prefers-reduced-motion: reduce){
  main#home .reveal,
  main#home [data-reveal]{
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
/* =========================================================
   MOBILE PASS — HOME HERO + HOME SECURITY (CSS ONLY)
   ========================================================= */

/* 0) Guard: brak poziomego scrolla */
html, body { overflow-x: clip; }
main#home, #security { overflow-x: clip; }

/* Naprawa "rozpychania" elementów */
main#home .hero__grid > *,
main#home .mock,
main#home .spark__plot,
main#home .spark__chart {
  min-width: 0;
}

/* Tablet / mały laptop */
@media (max-width: 1080px){
  main#home .hero__grid{
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  main#home .hero__copy { order: 1; }
  main#home .hero__visual { order: 2; }

  main#home .hero__visual .mock{
    max-width: min(100%, 560px);
    margin-inline: auto;
  }

  /* HOME: Bezpieczeństwo -> 1 kolumna */
  #security .split{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Telefony */
@media (max-width: 900px){
  /* Hero spacing */
  main#home .hero{
    padding-top: 22px;
    padding-bottom: 12px;
  }

  main#home .hero__bg{
    inset: -18px -18px auto -18px;
    height: 300px;
  }

  /* Progressive disclosure: chowamy ciężkie wizuale */
  main#home .hero__visual,
  main#home .photo--about{
    display: none !important;
  }

  /* Hero copy */
  main#home .hero__copy h1{
    font-size: clamp(1.96rem, 9.1vw, 2.56rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    max-width: 13ch;
    margin: 6px 0 10px;
  }

  main#home .lead--mission{
    font-size: 1.02rem;
    line-height: 1.45;
    max-width: 33ch;
    margin: 4px 0 14px;
    padding-left: 10px;
  }

  /* CTA: pełna szerokość */
  main#home .cta{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 10px 0 14px;
  }

  main#home .cta .btn{
    width: 100%;
    min-height: 48px;
    justify-content: center;
    white-space: nowrap;
  }

  /* Trust cards */
  main#home .trust{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }

  main#home .trust__item{
    padding: 12px 13px;
    border-radius: 14px;
  }

  /* About pod mobile */
  main#home .about__grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* HOME: sekcja bezpieczeństwo */
  #security .split{
    grid-template-columns: 1fr !important;
    gap: 14px;
    align-items: start;
  }

  #security .security-side{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #security .callout{
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding: 16px;
    border-radius: 14px;
  }
}

/* Małe telefony */
@media (max-width: 480px){
  .container{
    width: min(100% - 24px, var(--container));
  }

  main#home .hero__copy h1{
    font-size: clamp(1.82rem, 10vw, 2.25rem);
    max-width: 12ch;
  }

  main#home .lead--mission{
    font-size: .98rem;
    padding-left: 8px;
  }

  main#home .cta .btn{
    padding: 12px 14px;
    font-size: 1.02rem;
  }

  #security h2{
    font-size: clamp(1.72rem, 8.4vw, 2.02rem);
    line-height: 1.12;
  }

  #security .checks li{
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* Mikrointerakcje premium (bez przesady) */
@media (hover:hover){
  main#home .trust__item,
  #security .callout{
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  main#home .trust__item:hover,
  #security .callout:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(15,23,42,.10);
  }
}

@media (prefers-reduced-motion: reduce){
  main#home .trust__item,
  #security .callout{
    transition: none !important;
    transform: none !important;
  }
}
/* =========================================================
   HOME — trust chips jak w "Bezpieczeństwo" (bez zmian HTML)
   Wklej na SAM KONIEC style.css
   ========================================================= */

main#home .trust{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* było "karta" -> robimy "badge/chip" */
main#home .trust__item{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.85);
  color: rgba(15,23,42,.84);
  min-height: 0;
  max-width: 100%;
  box-shadow: none;
}

main#home .trust__dot{
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34,197,94,.16);
}

main#home .trust__text{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

main#home .trust__text strong,
main#home .trust__text span{
  display: inline;
  margin: 0;
  line-height: 1.2;
}

main#home .trust__text strong{
  font-size: .93rem;
  font-weight: 650;
  color: rgba(15,23,42,.9);
}

main#home .trust__text span{
  font-size: .90rem;
  font-weight: 500;
  color: rgba(15,23,42,.62);
}

main#home .trust__text span::before{
  content: "— ";
  opacity: .65;
}

/* mobile: żeby nie rozpychało hero */
@media (max-width: 820px){
  main#home .trust{
    gap: 8px;
  }

  main#home .trust__item{
    width: 100%;
    padding: 9px 12px;
  }

  main#home .trust__text{
    row-gap: 2px;
  }

  main#home .trust__text span{
    width: 100%;
  }

  main#home .trust__text span::before{
    content: "";
  }
}

/* bardzo małe telefony: czyste, krótkie chipy 1-liniowe */
@media (max-width: 480px){
  main#home .trust__text span{
    display: none;
  }
}
/* =========================================================
   HOME HERO — MOBILE TITLE WIDTH TUNE (bez zmian HTML)
   Cel: szerszy, bardziej "SaaS" układ tytułu po schowaniu mocka
   ========================================================= */

/* 1) Główne telefony / małe tablety */
@media (max-width: 900px){
  main#home .hero__copy{
    width: 100% !important;
    max-width: 100% !important;
  }

  main#home .hero__copy h1{
    max-width: 16.8ch !important;                  /* było za ciasno */
    font-size: clamp(1.96rem, 8.4vw, 2.46rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.028em !important;
    text-wrap: balance;
    margin: 6px 0 12px !important;
  }

  /* krótszy, stabilniejszy blok lead pod szerszym tytułem */
  main#home .lead--mission{
    max-width: 38ch !important;
  }
}

/* 2) Telefony ~760px */
@media (max-width: 760px){
  main#home .hero__copy h1{
    max-width: 15.8ch !important;
    font-size: clamp(1.90rem, 8.1vw, 2.30rem) !important;
  }
}

/* 3) Małe telefony */
@media (max-width: 520px){
  main#home .hero__copy h1{
    max-width: 14.8ch !important;
    font-size: clamp(1.80rem, 8.7vw, 2.14rem) !important;
    line-height: 1.09 !important;
  }
}

/* 4) Bardzo małe telefony */
@media (max-width: 420px){
  main#home .hero__copy h1{
    max-width: 14.1ch !important;
    font-size: clamp(1.72rem, 9vw, 2.00rem) !important;
  }

  /* lekko koryguje tło, żeby hero nie wyglądał "ucięty" */
  main#home .hero__bg{
    height: 260px !important;
  }
}
/* =========================================================
   HOME HERO — FINAL RESPONSIVE OVERRIDE (CSS ONLY)
   Cel:
   - małe telefony: hero bez mocka + szerszy tytuł
   - średnie ekrany/tablety: mock wraca obok tytułu
   ========================================================= */

/* 1) Telefony: copy-first, mock ukryty */
@media (max-width: 767.98px){
  main#home .hero__grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: start !important;
  }

  main#home .hero__visual{
    display: none !important;
  }

  main#home .hero__copy{
    max-width: 100% !important;
  }

  main#home .hero__copy h1{
    max-width: 16.8ch !important;
    font-size: clamp(1.96rem, 8.6vw, 2.46rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.028em !important;
    text-wrap: balance;
  }

  main#home .lead--mission{
    max-width: 38ch !important;
  }
}

/* 2) Tablety / średnie ekrany: mock wraca na bok */
@media (min-width: 768px) and (max-width: 1080px){
  main#home .hero{
    padding-top: 30px !important;
    padding-bottom: 16px !important;
  }

  main#home .hero__grid{
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr) !important;
    gap: 22px !important;
    align-items: start !important;
  }

  main#home .hero__copy{
    order: 1 !important;
    max-width: 100% !important;
  }

  main#home .hero__copy h1{
    max-width: 11.8ch !important;
    font-size: clamp(2.18rem, 5.1vw, 3.20rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.028em !important;
    text-wrap: balance;
  }

  main#home .lead--mission{
    max-width: 31ch !important;
  }

  main#home .hero__visual{
    display: block !important;   /* nadpisuje stare display:none z <=900 */
    order: 2 !important;
    align-self: start !important;
  }

  main#home .hero__visual .mock{
    width: min(100%, 430px) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* przywrócenie desktopowego układu CTA/chipów na średnich ekranach */
  main#home .cta{
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  main#home .cta .btn{
    width: auto !important;
  }

  main#home .trust{
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }

  main#home .trust__item{
    width: auto !important;
  }
}
/* =========================================================
   HOME HERO — PHABLET FIX (700–899px)
   Cel: na szerszym mobile wraca mock + normalny CTA/chips
   ========================================================= */
@media (min-width: 700px) and (max-width: 899.98px){
  main#home .hero{
    padding-top: 28px !important;
    padding-bottom: 16px !important;
  }

  main#home .hero__bg{
    height: 340px !important;
  }

  main#home .hero__grid{
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  main#home .hero__copy{
    order: 1 !important;
    max-width: 100% !important;
  }

  /* tytuł wraca do "normalnego" układu z mockiem obok */
  main#home .hero__copy h1{
    max-width: 10.9ch !important;
    font-size: clamp(2.02rem, 5.2vw, 2.82rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.03em !important;
    text-wrap: balance;
  }

  main#home .lead--mission{
    max-width: 28ch !important;
    margin-bottom: 12px !important;
  }

  /* KLUCZ: nadpisuje stare hide z mobile */
  main#home .hero__visual{
    display: block !important;
    order: 2 !important;
    align-self: start !important;
  }

  main#home .hero__visual .mock{
    display: block !important;
    width: min(100%, 360px) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* CTA nie full width */
  main#home .cta{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 10px 0 12px !important;
  }

  main#home .cta .btn{
    width: auto !important;
    min-width: 178px;
    min-height: 46px;
    flex: 0 0 auto;
  }

  /* Chips jak na większych ekranach */
  main#home .trust{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  main#home .trust__item{
    width: auto !important;
    padding: 8px 11px !important;
  }

  main#home .trust__text span{
    display: inline !important;
    width: auto !important;
  }

  main#home .trust__text span::before{
    content: "— " !important;
    opacity: .65;
  }
}
/* =========================================================
   HOME — WIDE PHONE STABILIZER (621–767)
   Cel: telefon nadal bez mocka, ale CTA/chipy już nie „rozlane”
   Wklej na SAM KONIEC style.css
   ========================================================= */

@media (min-width: 621px) and (max-width: 699.98px){
  /* nadal telefon -> bez mocka */
  main#home .hero__visual,
  main#home .hero__visual .mock{
    display: none !important;
  }

  /* nagłówek trochę ciaśniej, żeby nie robił pustej ściany */
  main#home .hero__copy{
    max-width: 100% !important;
  }
  main#home .hero__copy h1{
    max-width: 13.2ch !important;
    font-size: clamp(2.00rem, 6.4vw, 2.62rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.028em !important;
    text-wrap: balance;
  }

  /* CTA: przestaje być „banerem”, wraca do zwartego układu */
  main#home .cta{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 12px 0 12px !important;
    align-items: center !important;
  }

  main#home .cta .btn{
    width: auto !important;
    min-width: 188px !important;
    min-height: 46px !important;
    padding-inline: 18px !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* chipy: kompakt jak „bezpieczeństwo”, bez rozjechania na 100% */
  main#home .trust{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  main#home .trust__item{
    width: auto !important;
    max-width: 100% !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
  }

  /* na tym zakresie chowamy sublabel, żeby nie pompować wysokości */
  main#home .trust__text{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  main#home .trust__text span{
    display: none !important;
  }
}

/* mniejsze telefony zostają stackowane (czytelność > upychanie) */
@media (max-width: 620px){
  main#home .cta{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  main#home .cta .btn{
    width: 100% !important;
  }
}
.rm-bar__logo-full{
  display:block;
  height:64px;
  width:auto;
}
@media (max-width:980px){
  .rm-bar__logo-full{ height:64px; }
}
/* =========================================================
   HOME — PHONE STABILITY FIX (0–699)
   Cel:
   - 520–699: mniej "pustki", CTA bardziej zwarte
   - <520: czytelne 1-col CTA
   - wszystkie telefony: chipy NIE jako pełne belki
   Wklej na sam koniec style.css
   ========================================================= */

/* 0) Globalnie dla telefonów: mock ukryty, chipy kompakt */
@media (max-width: 699.98px){
  main#home .hero__visual,
  main#home .hero__visual .mock{
    display: none !important;
  }

  main#home .trust{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  main#home .trust__item{
    width: auto !important;          /* klucz: kasuje stare width:100% */
    max-width: 100% !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    min-height: 0 !important;
  }

  main#home .trust__text{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  main#home .trust__text span{
    display: none !important;         /* zostaje sam mocny label */
  }
}

/* 1) 520–699: kompakt premium, bez "dziury" */
@media (min-width: 520px) and (max-width: 699.98px){
  main#home .hero{
    padding-top: 24px !important;
    padding-bottom: 10px !important;
  }

  main#home .hero__bg{
    height: 290px !important;
  }

  main#home .hero__copy{
    max-width: 100% !important;
  }

  main#home .hero__copy h1{
    max-width: 15.6ch !important;     /* szerzej niż teraz -> mniej pustki */
    font-size: clamp(2.00rem, 6.2vw, 2.50rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.028em !important;
    text-wrap: balance;
    margin: 6px 0 12px !important;
  }

  main#home .lead--mission{
    max-width: 40ch !important;
  }

  /* CTA: 2 kolumny = pełniejsze wykorzystanie szerokości */
  main#home .cta{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 12px 0 12px !important;
    align-items: stretch !important;
  }

  main#home .cta .btn{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding-inline: 14px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

/* 2) <520: 1 kolumna CTA, ale chipy dalej kompakt (nie belki) */
@media (max-width: 519.98px){
  main#home .hero__copy h1{
    max-width: 14.4ch !important;
    font-size: clamp(1.82rem, 8.8vw, 2.14rem) !important;
    line-height: 1.08 !important;
    margin: 6px 0 10px !important;
  }

  main#home .lead--mission{
    max-width: 34ch !important;
  }

  main#home .cta{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 10px 0 12px !important;
  }

  main#home .cta .btn{
    width: 100% !important;
    min-height: 48px !important;
  }
}

/* 3) ultra small polish */
@media (max-width: 420px){
  main#home .trust__item{
    padding: 8px 10px !important;
  }

  main#home .trust__text strong{
    font-size: .95rem !important;
  }
}
/* =========================================================
   SECURITY HERO — RESPONSIVE FIX (CSS ONLY)
   Cel:
   - <=860px: bez tarczy (czytelny copy-first hero)
   - 861–1120px: tarcza wraca, ale kompaktowo obok treści
   - desktop: bez zmian
   ========================================================= */

/* 1) Średnie ekrany / małe tablety: tarcza obok, ale mniejsza */
@media (min-width: 861px) and (max-width: 1120px){
  .security-page .trust-hero{
    padding-top: 40px !important;
    padding-bottom: 24px !important;
  }

  .security-page .trust-hero__grid{
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr) !important;
    gap: 20px !important;
    align-items: start !important;
  }

  .security-page .trust-copy h1{
    max-width: 13.2ch !important;
    font-size: clamp(2rem, 4.2vw, 2.72rem) !important;
    line-height: 1.05 !important;
    text-wrap: balance;
  }

  .security-page .trust-lead{
    max-width: 45ch !important;
    margin-bottom: 14px !important;
  }

  .security-page .sec-visual.sec-visual--shield-pro{
    display: grid !important;
    justify-self: end !important;
    width: min(280px, 100%) !important;
    transform: translate(0, -8px) !important;
  }

  .security-page .sec-visual--shield-pro .shield-pro-scene{
    min-height: 250px !important;
  }

  .security-page .sec-tags{
    margin-top: 4px !important;
    gap: 6px !important;
  }

  .security-page .sec-tags span{
    font-size: .74rem !important;
    padding: 5px 9px !important;
  }

  .security-page .trust-actions{
    gap: 10px !important;
  }
}

/* 2) Telefony + wąskie tablety: copy-first, tarcza out */
@media (max-width: 860px){
  .security-page .trust-hero{
    padding: 26px 0 18px !important;
  }

  .security-page .trust-hero__bg{
    inset: -14px -14px auto -14px !important;
    height: 255px !important;
  }

  .security-page .trust-hero__grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .security-page .trust-copy{
    max-width: 100% !important;
  }

  .security-page .trust-copy h1{
    max-width: 16.5ch !important;
    font-size: clamp(1.9rem, 8.2vw, 2.36rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.028em !important;
    text-wrap: balance;
    margin-bottom: 10px !important;
  }

  .security-page .trust-lead{
    max-width: 38ch !important;
    margin-bottom: 12px !important;
  }

  /* KLUCZ: wycinamy ciężki wizual na small screens */
  .security-page .sec-visual.sec-visual--shield-pro{
    display: none !important;
  }

  .security-page .trust-badges{
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .security-page .trust-badge{
    font-size: .88rem !important;
    padding: 7px 10px !important;
    max-width: 100%;
  }

  .security-page .trust-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .security-page .trust-actions .btn{
    width: 100% !important;
    justify-content: center !important;
  }
}

/* 3) Małe telefony: badge stack 1/1, bez rozjazdu */
@media (max-width: 540px){
  .security-page .trust-copy h1{
    max-width: 14.5ch !important;
    font-size: clamp(1.72rem, 9vw, 2.04rem) !important;
  }

  .security-page .trust-lead{
    max-width: 32ch !important;
  }

  .security-page .trust-badges{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .security-page .trust-badge{
    width: 100% !important;
  }
}
/* =========================================================
   SECURITY HERO — FIX BREAKPOINT 700–979
   - od 700px tarcza wraca (kompaktowo)
   - CTA i chipy nie rozciągają się na całą szerokość
   ========================================================= */

/* 1) 700–979: pokaż tarczę obok, ale mniejszą */
@media (min-width: 700px) and (max-width: 979.98px){
  .security-page .trust-hero{
    padding-top: 42px !important;
    padding-bottom: 24px !important;
  }

  .security-page .trust-hero__grid{
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }

  .security-page .trust-copy h1{
    max-width: 11.2ch !important;
    font-size: clamp(2rem, 4.7vw, 2.7rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.028em !important;
    text-wrap: balance;
  }

  .security-page .trust-lead{
    max-width: 35ch !important;
    margin-bottom: 12px !important;
  }

  .security-page .sec-visual.sec-visual--shield-pro{
    display: grid !important;
    justify-self: end !important;
    align-self: start !important;
    width: min(230px, 34vw) !important;
    transform: translateY(-6px) !important;
    --shield-width: min(170px, 23vw);
    --lock-scale: .78;
  }

  .security-page .sec-visual--shield-pro .shield-pro-scene{
    min-height: 220px !important;
  }

  .security-page .sec-tags{
    margin-top: 2px !important;
    gap: 6px !important;
  }

  .security-page .sec-tags span{
    font-size: .72rem !important;
    padding: 5px 8px !important;
  }

  /* CTA: NIE full-width */
  .security-page .trust-actions{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .security-page .trust-actions .btn{
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  /* Chipy: NIE rozciągaj */
  .security-page .trust-badges{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .security-page .trust-badge{
    width: auto !important;
    max-width: max-content !important;
    padding: 7px 10px !important;
    font-size: .87rem !important;
    white-space: nowrap;
  }
}

/* 2) <=699: zostaw copy-first, ale utrzymaj porządek CTA/chipów */
@media (max-width: 699.98px){
  .security-page .sec-visual.sec-visual--shield-pro{
    display: none !important;
  }

  .security-page .trust-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .security-page .trust-actions .btn{
    width: 100% !important;
  }

  .security-page .trust-badges{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .security-page .trust-badge{
    width: auto !important;
    max-width: 100% !important;
    white-space: nowrap;
  }
}

/* 3) mikro-telefon: chipy bez łamania */
@media (max-width: 420px){
  .security-page .trust-badge{
    font-size: .82rem !important;
    padding: 6px 9px !important;
  }
}
/* === NAV COLOR OVERRIDE (blue/purple) === */
:root{
  ---rm-accen: #2563eb;      /* CTA w nav */
  --rm-nav-active: #2563eb;  /* aktywna zakładka */
}

/* aktywny link desktop + mobile */
.rm-bar__link[aria-current="page"],
.rm-bar__mobile a[aria-current="page"]{
  color: var(--rm-nav-active);
}

/* dolna linia pod nav */
.rm-bar::after{
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(37,99,235,.35) 20%,
    rgba(124,58,237,.28) 55%,
    transparent 100%);
}
/* =========================================================
   SECURITY HERO — polish dla 550–760
   - 550–760: 2 przyciski obok siebie
   - <=700: chipy krótsze, zwarte (bez rozciągania)
   ========================================================= */

/* 1) Tablet/duży telefon: CTA w 2 kolumnach */
@media (min-width: 550px) and (max-width: 760px){
  .security-page .trust-actions{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .security-page .trust-actions .btn{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

/* 2) Chippy 550–700: kompakt, bez „długich piguł” */
@media (min-width: 550px) and (max-width: 700px){
  .security-page .trust-badges{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .security-page .trust-badge{
    width: auto !important;
    max-width: max-content !important;
    padding: 6px 10px !important;
    font-size: .84rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

  .security-page .trust-badge i{
    width: 8px !important;
    height: 8px !important;
    box-shadow: 0 0 0 5px rgba(34,197,94,.14) !important;
  }
}

/* 3) <=549: CTA znów 1 kolumna, chipy dalej zwarte */
@media (max-width: 549.98px){
  .security-page .trust-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .security-page .trust-actions .btn{
    width: 100% !important;
  }

  .security-page .trust-badges{
    gap: 7px !important;
  }

  .security-page .trust-badge{
    width: auto !important;
    max-width: 100% !important;
    padding: 6px 9px !important;
    font-size: .81rem !important;
    white-space: nowrap !important;
  }
}
/* =========================================================
   SECURITY HERO — FINAL FIX 750–1000
   Cel: mniej ścisku w tekście + mniejsza szpara do tarczy
   ========================================================= */
@media (min-width: 750px) and (max-width: 1000px){
  .security-page .trust-hero{
    padding-top: 44px !important;
    padding-bottom: 24px !important;
  }

  .security-page .trust-hero__grid{
    grid-template-columns: minmax(0, 1.32fr) minmax(220px, .68fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .security-page .trust-copy{
    max-width: none !important;
  }

  .security-page .trust-copy h1{
    max-width: 13.6ch !important;
    font-size: clamp(2rem, 4.4vw, 3rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.024em !important;
    text-wrap: balance;
    margin-bottom: 12px !important;
  }

  .security-page .trust-lead{
    max-width: 42ch !important;
    font-size: 1.02rem !important;
    line-height: 1.52 !important;
    margin-bottom: 12px !important;
  }

  /* chipy pod leadem — kompakt */
  .security-page .trust-badges{
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .security-page .trust-badge{
    padding: 6px 10px !important;
    font-size: .84rem !important;
    white-space: nowrap !important;
  }

  /* CTA obok siebie, nie full-width */
  .security-page .trust-actions{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .security-page .trust-actions .btn{
    width: auto !important;
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding-inline: 16px !important;
    white-space: nowrap !important;
  }

  /* prawa kolumna bliżej tekstu i mniejsza */
  .security-page .sec-visual.sec-visual--shield-pro{
    display: grid !important;
    justify-self: end !important;
    align-self: start !important;
    width: min(260px, 30vw) !important;
    transform: translate(-8px, -2px) !important;

    --shield-width: min(190px, 23vw);
    --lock-scale: .80;
  }

  .security-page .sec-visual--shield-pro .shield-pro-scene{
    min-height: 230px !important;
  }

  .security-page .sec-tags{
    margin-top: 4px !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .security-page .sec-tags span{
    font-size: .74rem !important;
    padding: 5px 8px !important;
  }
}


/* ===== TOP SAAS THEME A: CALM AZURE ===== */
:root{
  --rm-accent: #4f8ff7;
  --rm-nav-active: #4f8ff7;

  --rm-grad-from: #69a7ff;
  --rm-grad-mid:  #5a96f6;
  --rm-grad-to:   #8f85f3;

  --rm-ink: #13233f;
}

.btn--primary{
  background: linear-gradient(135deg, var(--rm-grad-from) 0%, var(--rm-grad-mid) 72%, var(--rm-grad-to) 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 10px 20px rgba(79,143,247,.14);
}
.btn--primary:hover{
  box-shadow: 0 14px 24px rgba(79,143,247,.18);
  filter: brightness(1.01);
}

.btn--ghost,
.btn--secondary{
  background: #fff;
  border: 1px solid rgba(79,143,247,.24);
  color: var(--rm-ink);
}
.btn--ghost:hover,
.btn--secondary:hover{
  background: rgba(79,143,247,.06);
  border-color: rgba(79,143,247,.34);
}

.rm-bar__link[aria-current="page"],
.rm-bar__mobile a[aria-current="page"]{
  color: var(--rm-nav-active);
}
.rm-bar::after{
  background: linear-gradient(90deg, transparent 0%, rgba(79,143,247,.22) 24%, rgba(143,133,243,.15) 58%, transparent 100%);
}
/* =========================================================
   RM ACCENT OVERRIDE — calm blue + violet (brand-consistent)
   Wklej na SAM KONIEC style.css
   ========================================================= */
:root{
  --rm-accent-blue: #3b82f6;
  --rm-accent-blue-600: #2563eb;
  --rm-accent-violet: #8b5cf6;
  --rm-accent-soft: rgba(59,130,246,.14);
  --rm-accent-ring: rgba(59,130,246,.24);
}

/* 1) Ptaszki / checki w kartach benefitów */
main#home .benefit__list li::before{
  background: var(--rm-accent-soft) !important;
  border-color: rgba(59,130,246,.30) !important;
}
main#home .benefit__list li::after{
  border-left-color: var(--rm-accent-blue-600) !important;
  border-bottom-color: var(--rm-accent-blue-600) !important;
}

/* 2) Ptaszki / checki w sekcji Bezpieczeństwo */
#security .checks li:before,
#security .checks li::before{
  background: var(--rm-accent-soft) !important;
  border-color: rgba(59,130,246,.30) !important;
}
#security .checks li:after,
#security .checks li::after{
  border-left-color: var(--rm-accent-blue-600) !important;
  border-bottom-color: var(--rm-accent-blue-600) !important;
}

/* 3) "Ważne" (bold) na niebiesko */
#security .checks li strong,
main#home .trust__text strong{
  color: var(--rm-accent-blue-600) !important;
}

/* 4) Kropka w chipach hero (było zielone) */
main#home .trust__dot{
  background: var(--rm-accent-blue) !important;
  box-shadow: 0 0 0 6px var(--rm-accent-ring) !important;
}

/* 5) CTA: „Pełne zasady bezpieczeństwa” */
.btn--security{
  background: linear-gradient(
    135deg,
    rgba(59,130,246,.13),
    rgba(139,92,246,.13)
  ) !important;
  border: 1px solid rgba(59,130,246,.34) !important;
  color: #1e40af !important;
  box-shadow: 0 12px 22px rgba(59,130,246,.16) !important;
}

.btn--security:hover{
  background: linear-gradient(
    135deg,
    rgba(59,130,246,.18),
    rgba(139,92,246,.18)
  ) !important;
  border-color: rgba(59,130,246,.46) !important;
  color: #1e3a8a !important;
  box-shadow: 0 16px 28px rgba(59,130,246,.20) !important;
}

/* =========================================================
   RM FIX — tylko ikony na niebiesko, tekst wraca do neutralnego
   ========================================================= */
:root{
  --rm-blue-500: #3b82f6;
  --rm-blue-600: #2563eb;
  --rm-blue-soft: rgba(59,130,246,.14);
  --rm-blue-ring: rgba(59,130,246,.16);
  --rm-blue-border: rgba(59,130,246,.30);
}

/* 1) HERO chipy: zostają kropki, ale na niebiesko */
main#home .trust__dot{
  background: var(--rm-blue-500) !important;
  box-shadow: 0 0 0 6px var(--rm-blue-ring) !important;
}

/* tekst w hero wraca do normalnych kolorów */
main#home .trust__item{
  color: rgba(15,23,42,.84) !important;
}
main#home .trust__text strong{
  color: var(--text) !important;
}
main#home .trust__text span{
  color: var(--muted) !important;
}

/* 2) "Dlaczego ReflectMe" + "Bezpieczeństwo": tylko ptaszki niebieskie */
main#home .checks li::before{
  background: var(--rm-blue-soft) !important;
  border-color: var(--rm-blue-border) !important;
  box-shadow: 0 8px 16px rgba(59,130,246,.10) !important;
}
main#home .checks li::after{
  border-left-color: var(--rm-blue-600) !important;
  border-bottom-color: var(--rm-blue-600) !important;
}

/* tekst list zostaje neutralny (nie niebieski) */
main#home .checks li{
  color: var(--muted) !important;
}
main#home .checks li strong{
  color: var(--text) !important;
}

/* 3) CTA "Pełne zasady bezpieczeństwa" w nowej palecie */
.btn--security{
  background: linear-gradient(135deg, rgba(59,130,246,.11), rgba(139,92,246,.11)) !important;
  border: 1px solid rgba(59,130,246,.34) !important;
  color: #1e40af !important;
  box-shadow: 0 10px 18px rgba(59,130,246,.12) !important;
}
.btn--security:hover{
  background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(139,92,246,.16)) !important;
  border-color: rgba(59,130,246,.44) !important;
  color: #1e3a8a !important;
}
/* === HERO FIX: blue mission line + green dots === */

/* Kreska przy "Nasza misja" */
main#home .hero .lead.lead--mission,
.hero .lead.lead--mission{
  border-left-color: #3b82f6 !important;
}

/* Kropki w chipach hero zostają zielone */
main#home .trust__dot,
.trust__dot{
  background: #22c55e !important;
  box-shadow: 0 0 0 6px rgba(34,197,94,.16) !important;
}
/* === SECURITY CALLOUT: blue only (bez zieleni) === */
#security .callout{
  border: 1px solid rgba(59,130,246,.26) !important;
  background: linear-gradient(
    180deg,
    rgba(59,130,246,.10) 0%,
    rgba(255,255,255,.94) 100%
  ) !important;
  box-shadow: 0 14px 26px rgba(37,99,235,.10) !important;
}

#security .callout__title{
  color: #0f274f; /* ciemny niebieski nagłówek */
}

#security .callout__text{
  color: rgba(15,23,42,.72); /* neutralny tekst, dalej czytelny */
}