/* =========================
   THEME TOKENS
========================= */
:root{
  /* brand */
  --p:#005fa3;
  --pd:#004170;

  /* neutrals */
  --bg:#f5f7fb;
  --txt:#333;
  --mut:#666;
  --mut2:#777;

  /* borders */
  --bd:#e4e7f1;
  --bd2:#e4e8f0;

  /* radii */
  --r1:1rem;
  --r2:1.2rem;
  --r3:1.5rem;
  --pill:999px;

  /* shadows */
  --s1:0 8px 24px rgba(0,0,0,.03);
  --s2:0 12px 30px rgba(0,0,0,.06);
  --s3:0 18px 45px rgba(0,0,0,.06);

  /* Bootstrap color hook */
  --bs-primary: var(--p);
  --bs-primary-rgb: 0,95,163;
}

/* =========================
   BASE / TYPOGRAPHY
========================= */
body{
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--txt);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,.navbar-brand{
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
}

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

/* ⚠️ Opcjonalne: globalny reset list.
   Jeśli ten CSS ma działać także w treściach "artykułowych"/CMS,
   rozważ USUNIĘCIE lub ograniczenie do kontenera (.site, main itp.) */
/* ul{margin-bottom:0;} */

/* =========================
   UTILITIES
========================= */
.brand-logo{max-width:180px;width:100%;height:auto;}
.small-muted{font-size:.85rem;color:var(--mut2);}
.anchor-offset{scroll-margin-top:80px;}

/* =========================
   NAV
========================= */
.navbar{
  background:#ffffffee!important;
  backdrop-filter:blur(6px);
  box-shadow:0 2px 4px rgba(0,0,0,.05);
}

.navbar-nav .nav-link{
  font-weight:600;
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.navbar-nav .nav-link:is(.active,:hover){
  color:var(--p)!important;
}

/* =========================
   HERO
========================= */
.hero{
  position:relative;
  overflow:hidden;
  padding:140px 0 90px;
  background:radial-gradient(circle at top left,#e4f1ff 0,#fff 40%,var(--bg) 100%);
}

.hero::before{
  content:"";
  position:absolute;
  inset:-80px;
  z-index:-1;
  background:
    radial-gradient(circle at 10% 20%,rgba(0,95,163,.08),transparent 40%),
    radial-gradient(circle at 80% 0%,rgba(244,180,0,.16),transparent 40%);
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.25rem .75rem;
  border-radius:var(--pill);
  background:#ffffffcc;
  border:1px solid #e3e6f0;
  font-size:1.5rem;
}

.hero-badge span{font-weight:600;color:var(--p);}

.hero-title{
  font-size:clamp(2.1rem,3.5vw,3rem);
  font-weight:700;
  margin:0 0 .75rem;
}

:is(.hero-subtitle,.section-subtitle){
  max-width:700px;
  text-align:justify;
  color:#555;
}

.hero-subtitle{font-size:1.1rem;}
.section-subtitle{color:var(--mut);}

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
  margin:1.5rem 0;
  font-size:.95rem;
}

.hero-meta-label{
  font-weight:600;
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--mut2);
}

.hero-meta-value{
  font-weight:600;
  color:var(--pd);
}

.hero-cta .btn{
  border-radius:var(--pill);
  padding:.65rem 1.5rem;
  font-weight:600;
}

/* buttons */
.btn-primary{
  background:var(--p);
  border-color:var(--p);
}
.btn-primary:hover{
  background:var(--pd);
  border-color:var(--pd);
}
.btn-outline-primary{border-radius:var(--pill);}

/* =========================
   SECTIONS
========================= */
section{padding:70px 0;}
section:nth-of-type(even){background:var(--bg);}

.section-title{
  font-size:2.5rem;
  font-weight:700;
  margin:0 0 .4rem;
}

/* Typography rhythm */
section p + p{margin-top:.75rem;}
section h3{margin-top:1.5rem;}
section h4{margin-top:1rem;}

/* =========================
   CARD SYSTEM
========================= */
.c{
  background:#fff;
  border:1px solid var(--bd);
  border-radius:var(--r2);
  height:100%;
  padding:1.5rem;
}

.c--hero{
  border-color:var(--bd2);
  border-radius:var(--r3);
  box-shadow:var(--s3);
}

.c--table{
  padding:0;
  border-radius:var(--r1);
  overflow:hidden;
  box-shadow:var(--s1);
}

.c--speaker{
  text-align:center;
  transition:transform .15s ease,box-shadow .15s ease;
}

.c--speaker:hover{
  transform:translateY(-3px);
  box-shadow:var(--s2);
}

/* hero card inner */
.hero-card-title{
  font-weight:600;
  font-size:.95rem;
  display: flex;
  justify-content: center;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--mut2);
  margin:0 0 .75rem;
  display: flex;
  justify-content: center;
}

.c--hero ul{padding-left:1.1rem;margin:0;font-size:.92rem;}
.c--hero li+li{margin-top:.4rem;}

.c ul{padding-left:1.1rem;font-size:.9rem;}

/* =========================
   PROGRAM TABLE
========================= */
.c--table thead{background:#f0f3fb;}
.c--table :is(th,td){
  padding:.65rem .9rem;
  font-size:.92rem;
  vertical-align:middle;
}
.c--table tbody tr:nth-child(even){background:#fafbff;}

.c--table th:first-child,
.c--table td:first-child{
  width:120px;
  white-space:nowrap;
}

.program-day{margin-top:1.5rem;}
.program-day h4{
  font-size:1.1rem;
  font-weight:700;
  margin:0 0 .5rem;
}

/* =========================
   TEXT STYLES
========================= */
.pricing-label{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:600;
  color:var(--mut2);
}
.pricing-price{font-size:1.5rem;font-weight:700;color:var(--pd);}
.pricing-desc{font-size:.9rem;color:var(--mut);}

.contact-label{font-size:.9rem;font-weight:600;color:#555;}
.contact-value{font-size:.92rem;}

/* =========================
   SPEAKER INNER
========================= */
.speaker-avatar{
  width:90px;
  height:90px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--p),var(--pd));
  margin:0 auto 1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:1.4rem;
}

.speaker-name{font-weight:700;font-size:1.02rem;}
.speaker-role{font-size:.9rem;color:var(--mut);}
.speaker-org{font-size:.85rem;color:#888;}

/* =========================
   FOOTER
========================= */
footer{
  background:#0b1420;
  color:#d3d8e5;
  padding:25px 0;
  font-size:.85rem;
}

footer a{
  color:#fff;
  text-decoration:none;
}
footer a:hover{text-decoration:underline;}

/* =========================
   ACCESSIBILITY
========================= */
:focus-visible{
  outline:2px solid var(--p);
  outline-offset:2px;
}

a:not(.btn):hover{ text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  .c--speaker{transition:none;}
  .c--speaker:hover{transform:none;}
}

/* =========================
   RWD
========================= */
@media (max-width:767.98px){
  .hero{padding:110px 0 60px;}
  .hero-meta{flex-direction:column;}
}

.logo {
  max-width: 500px;
  width: 100%;
  height: auto;
}