/* ============================================================
   Ramus Liceum - Main Stylesheet (BEM)
   Design: Inter headings, Arial body
   Colors: Navy #232D4B, Green #81BD51, Gray #4B5563, Mint #D2E5E1
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; scroll-padding-top: 140px; }
body { font-family: Arial, Helvetica, sans-serif; color: #4B5563; line-height: 1.6; background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* --- Typography --- */
h1, h2, h3, h4 { font-family: 'Inter', sans-serif; color: #232D4B; line-height: 1.2; }
h1 { font-size: 60px; font-weight: 700; line-height: 75px; }
h2 { font-size: 48px; font-weight: 700; line-height: 60px; }
h3 { font-size: 18px; font-weight: 700; line-height: 28px; }
p { font-size: 16px; line-height: 24px; }

/* --- Buttons --- */
.btn { display: inline-block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; border-radius: 10px; transition: all 0.2s; cursor: pointer; border: none; }
.btn--primary { background: #81BD51; color: #fff; padding: 14px 32px; }
.btn--primary:hover { background: #6ea842; }
.btn--lg { padding: 16px 40px; font-size: 16px; }
.btn--outline { background: transparent; border: 2px solid #E5E7EB; color: #232D4B; padding: 14px 32px; }
.btn--outline:hover { background: #81BD51; border-color: #81BD51; color: #fff; }
.btn--text { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; color: #232D4B; text-decoration: underline; text-underline-offset: 4px; padding: 14px 0; }
.btn--text:hover { color: #81BD51; }
.btn--xl { height: 60px; font-size: 18px; padding: 16px 48px; display: inline-flex; align-items: center; justify-content: center; }

/* Green arrow link */
.green-link { font-family: 'Inter', sans-serif; color: #81BD51; font-weight: 600; font-size: 15px; transition: color 0.2s; }
.green-link:hover { color: #6ea842; }
.green-link:hover svg { transform: translateX(4px); }
.green-link svg { width: 20px; height: 20px; vertical-align: middle; margin-left: 4px; stroke: currentColor; fill: none; transition: transform 0.2s; }

/* Navy arrow link (vocational path) */
.navy-link { font-family: 'Inter', sans-serif; color: #232D4B; font-weight: 600; font-size: 15px; transition: color 0.2s; }
.navy-link:hover { color: #81BD51; }
.navy-link:hover svg { transform: translateX(4px); }
.navy-link svg { width: 20px; height: 20px; vertical-align: middle; margin-left: 4px; stroke: currentColor; fill: none; transition: transform 0.2s; }

/* ============================================================
   UTILITY BAR
   ============================================================ */
/* [1] Utility bar: light bg (white + subtle gray overlay), dark text - per Figma */
.header { background: #fff; }
.utility-bar { background: #fff; border-bottom: 1px solid rgba(35,45,75,0.1); }
.utility-bar .container { display: flex; justify-content: flex-end; }
.utility-bar__links { display: flex; align-items: center; gap: 16px; height: 41px; }
.utility-bar__links a { font-family: Arial, sans-serif; font-size: 12px; color: #4B5563; }
.utility-bar__links a:hover { color: #81BD51; }
.utility-bar__sep { color: #D1D5DC; font-size: 12px; }
.utility-bar__platform { display: flex; align-items: center; gap: 6px; color: #4B5563; }
.utility-bar__platform svg { color: #81BD51; }

/* ============================================================
   NAV
   ============================================================ */
.utility-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 101; }
.nav { position: fixed; top: 41px; left: 0; width: 100%; z-index: 100; background: #232D4B; transition: box-shadow 0.3s; }
body { padding-top: 121px; /* 41px utility-bar + 80px nav */ }
.nav--scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.nav__logo { display: flex; align-items: center; }
.nav__menu { display: flex; align-items: center; gap: 32px; }
.nav__menu a { font-family: Arial, sans-serif; font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.9); transition: color 0.2s; }
.nav__menu a:hover { color: #81BD51; }
.nav__item--mobile-cta { display: none; }
/* [2] Nav CTA with green box-shadow */
.nav__cta { font-family: Arial, sans-serif; background: #81BD51; color: #fff; padding: 10px 24px; border-radius: 10px; font-weight: 600; font-size: 14px; transition: background 0.2s; box-shadow: 0px 10px 15px rgba(129,189,81,0.2), 0px 4px 6px rgba(129,189,81,0.2); }
.nav__cta:hover { background: #6ea842; }
.nav__menu a { display: inline-flex; align-items: center; gap: 4px; }
.nav__dropdown-icon { width: 16px; height: 16px; fill: rgba(255,255,255,0.5); flex-shrink: 0; }
.nav__item { position: relative; }
.nav__item > a { display: inline-flex; align-items: center; gap: 4px; }
.nav__sub { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 220px; background: #fff; border-radius: 0 0 12px 12px; padding: 8px 0; box-shadow: 0 12px 32px rgba(0,0,0,0.15); z-index: 200; list-style: none; border: 1px solid rgba(0,0,0,0.06); border-top: 2px solid #81BD51; }
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub.nav__item--open .nav__sub { display: block; }
.nav__item--has-sub::after { content: ''; position: absolute; left: -20px; right: -20px; top: 100%; height: 20px; background: transparent; }
.nav__sub li { }
.nav__sub a { display: block; padding: 10px 24px; font-size: 13px; color: #4B5563 !important; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.nav__sub a:hover { background: rgba(129,189,81,0.08); color: #81BD51 !important; }
.nav__item--has-sub > a .nav__dropdown-icon { transition: transform 0.2s; }
.nav__item--has-sub:hover > a .nav__dropdown-icon,
.nav__item--has-sub.nav__item--open > a .nav__dropdown-icon { transform: rotate(180deg); fill: #81BD51; }
.nav__hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav__hamburger span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: 0.3s; }
.nav__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__hamburger.active span:nth-child(2) { opacity: 0; }
.nav__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Mega Menu (Ścieżki rozwoju) --- */
.nav__mega { display: none; position: fixed; left: 0; right: 0; top: 121px; background: #fff; box-shadow: 0 20px 40px rgba(0,0,0,0.15); z-index: 200; padding: 32px 0; border-top: 2px solid #81BD51; }
.nav__item--mega::after { content: ''; position: absolute; left: -100vw; right: -100vw; top: 100%; height: 40px; background: transparent; }
.nav__item--mega:hover .nav__mega,
.nav__item--mega.nav__item--open .nav__mega { display: block; }
.nav__mega-cards { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.nav__mega-card { border-radius: 16px; padding: 28px; }
.nav__mega-card--green { background: linear-gradient(135deg, rgba(129,189,81,0.08), rgba(129,189,81,0.15)); border: 1px solid rgba(129,189,81,0.2); }
.nav__mega-card--navy { background: linear-gradient(135deg, rgba(35,45,75,0.05), rgba(35,45,75,0.12)); border: 1px solid rgba(35,45,75,0.15); }
.nav__mega-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.nav__mega-card-head span { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; color: #232D4B; }
.nav__mega-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.nav__mega-card--green .nav__mega-card-icon { background: #81BD51; }
.nav__mega-card--navy .nav__mega-card-icon { background: #232D4B; }
.nav__mega-links { list-style: none; margin-bottom: 16px; }
.nav__mega-links li { padding: 4px 0; }
.nav__mega-links a { font-size: 14px; color: #4B5563 !important; transition: color 0.15s; }
.nav__mega-links a:hover { color: #81BD51 !important; }
.nav__mega-card-head span { color: #232D4B !important; }
.nav__mega-cta { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; transition: color 0.2s; }
.nav__mega-cta svg { transition: transform 0.2s; }
.nav__mega-cta:hover svg { transform: translateX(4px); }
.nav__mega-cta--green { color: #81BD51 !important; }
.nav__mega-cta--green:hover { color: #6ea842 !important; }
.nav__mega-cta--navy { color: #232D4B !important; }
.nav__mega-cta--navy:hover { color: #81BD51 !important; }
.nav__mega-footer { max-width: 1200px; margin: 16px auto 0; padding: 0 32px; text-align: center; font-size: 13px; color: #4B5563; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: 60px 0 40px; }
.hero__grid { display: grid; grid-template-columns: 55% 45%; gap: 40px; align-items: center; }
/* [3][4] Hero title 60px Bold, line-height 75px */
.hero__title { font-size: 60px; font-weight: 700; color: #232D4B; line-height: 75px; margin-bottom: 16px; }
/* [4] Hero subtitle sits in 75px line-height container */
.hero__subtitle { font-family: 'Inter', sans-serif; font-size: 36px; font-weight: 600; color: #81BD51; line-height: 75px; margin-bottom: 16px; }
.hero__tags { margin-bottom: 16px; }
.hero__tag { display: inline-block; background: #D2E5E1; color: #232D4B; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; padding: 6px 16px; border-radius: 20px; }
/* [3] Hero paragraph 20px, line-height 32.5px */
.hero__desc { font-size: 20px; line-height: 32.5px; color: #4B5563; margin-bottom: 24px; max-width: 680px; }
.hero__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero__images { position: relative; width: 100%; max-width: 600px; margin: 0 auto; }
.hero__img-front { position: relative; z-index: 1; width: 76%; border-radius: 20px; }
.hero__img-back { position: absolute; bottom: 0; right: 0; z-index: 2; width: 76%; border-radius: 20px; transform: scaleX(-1); }

/* Trust bar */
.trust-bar { background: #F6FAF9; padding: 12px 0; }
.trust-bar__items { display: flex; align-items: center; gap: 32px; }
.trust-bar__item { display: flex; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; font-size: 14px; color: #232D4B; font-weight: 500; }
.trust-bar__item svg { width: 24px; height: 24px; stroke: #81BD51; fill: none; flex-shrink: 0; }

/* ============================================================
   COMPARISON
   ============================================================ */
.comparison { padding: 80px 0; }
.comparison__layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: 64px; align-items: start; }
.comparison__heading { margin-bottom: 40px; }
.comparison__heading h2 { margin-bottom: 24px; }
/* [5] Comparison description 18px, line-height 29.25px */
.comparison__heading p { font-size: 18px; line-height: 29.25px; color: #4B5563; max-width: 700px; }
/* [6] Comparison video shadow 0px 25px 50px -12px rgba(0,0,0,0.25) */
.comparison__video { background: linear-gradient(135deg, #232D4B, rgba(35,45,75,0.8)); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; min-height: 460px; box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.25); }
.comparison__video-play { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.comparison__video-play svg { fill: #fff; }
.comparison__video-label { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,0.6); }
.comparison__video-title { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #fff; margin-top: 4px; }
.comparison__video--img { padding: 0; background: none; }
.comparison__video--img img { width: 100%; height: 100%; object-fit: cover; }
.comparison__video--clip { padding: 0; background: #232D4B; min-height: auto; }
.comparison__video--clip video { width: 100%; height: auto; border-radius: 0; }
.comparison__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; }
.comparison__card { border-radius: 16px; padding: 24px; }
.comparison__card:nth-child(1) { background: rgba(210,229,225,0.3); }
.comparison__card:nth-child(2) { background: rgba(129,189,81,0.1); }
.comparison__card:nth-child(3) { background: rgba(35,45,75,0.05); }
.comparison__card h3 { font-size: 18px; margin-bottom: 12px; }
.comparison__card p { font-size: 14px; color: #4B5563; line-height: 1.7; }
.comparison__link-wrap { text-align: right; margin-top: 16px; }

/* ============================================================
   PATHS
   ============================================================ */
/* [7] Paths background rgba(210,229,225,0.2) */
.paths { padding: 80px 0; background: rgba(210,229,225,0.2); }
.paths__header { text-align: center; margin-bottom: 40px; }
.paths__header h2 { margin-bottom: 16px; }
.paths__header p { font-size: 16px; color: #4B5563; }
.paths__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
/* [8] Paths cards with gradients and specific borders */
.paths__card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 42px; display: flex; flex-direction: column; }
.paths__card--academic { background: linear-gradient(143.79deg, rgba(129,189,81,0.05), rgba(129,189,81,0.1)); border: 2px solid rgba(129,189,81,0.2); }
.paths__card--vocational { background: linear-gradient(143.79deg, rgba(35,45,75,0.05), rgba(35,45,75,0.1)); border: 2px solid rgba(35,45,75,0.2); }
/* [9] Paths card icons: 56px, border-radius 14px (square-ish), solid backgrounds */
.paths__card-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.paths__card-icon--green { background: #81BD51; }
.paths__card-icon--green svg { fill: #fff; }
.paths__card-icon--navy { background: #232D4B; }
.paths__card-icon--navy svg { fill: #fff; }
.paths__card-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.paths__card-subtitle { font-size: 15px; color: #4B5563; margin-bottom: 24px; }
.paths__card-features { margin-bottom: 32px; flex: 1; }
.paths__card-feat { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 15px; color: #4B5563; }
.paths__card-feat svg { width: 20px; height: 20px; stroke: #81BD51; fill: none; flex-shrink: 0; }

/* ============================================================
   FEATURES
   ============================================================ */
.features { padding: 80px 0; }
.features__header { text-align: center; margin-bottom: 48px; }
.features__layout { display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: start; }
.features__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.features__item { padding: 24px; }
.features__item-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(129,189,81,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.features__item-icon svg { width: 24px; height: 24px; stroke: #81BD51; fill: none; }
.features__item h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
.features__item p { font-size: 14px; color: #4B5563; line-height: 1.6; }
/* [10] Features image with box-shadow */
.features__image { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); aspect-ratio: 452/648; }
.features__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; transform: scaleX(-1); }
.features__link { margin-top: 24px; }

/* ============================================================
   MENTORING
   ============================================================ */
.mentoring { padding: 80px 0; background: #232D4B; }
.mentoring h2, .mentoring h3, .mentoring h4 { color: #fff; }
.mentoring__header { margin-bottom: 12px; }
.mentoring__header h2 { margin-bottom: 20px; }
/* [12] Mentoring description 18px, line-height 29.25px */
.mentoring__header p { font-size: 18px; line-height: 29.25px; color: #D1D5DC; max-width: 700px; }
.mentoring__layout { display: grid; grid-template-columns: 452fr 701fr; gap: 48px; margin-top: 32px; align-items: start; }
.mentoring__image { border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); aspect-ratio: 452/547; }
.mentoring__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; transform: scaleX(-1); }
.mentoring__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* [11] Mentoring cards border-radius 14px */
.mentoring__card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 24px; }
.mentoring__card-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(129,189,81,0.2); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.mentoring__card-icon svg { width: 24px; height: 24px; stroke: #81BD51; fill: none; }
.mentoring__card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.mentoring__card p { font-size: 14px; color: #D1D5DC; line-height: 1.6; }
.mentoring__link { margin-top: 24px; text-align: right; }

/* ============================================================
   ENROLLMENT
   ============================================================ */
.enrollment { padding: 80px 0; }
.enrollment__header { text-align: center; margin-bottom: 32px; }
.enrollment__header h2 { margin-bottom: 16px; }
/* [13] Enrollment description 18px, line-height 28px */
.enrollment__header p { font-size: 18px; line-height: 28px; color: #4B5563; max-width: 700px; margin: 0 auto; }

/* [14] Enrollment banner gradient 174.1deg */
.enrollment__banner { background: linear-gradient(174.1deg, rgba(129,189,81,0.1), rgba(129,189,81,0.05)); border: 2px solid rgba(129,189,81,0.3); border-radius: 16px; padding: 24px 32px; text-align: center; margin-bottom: 48px; }
.enrollment__banner-text { font-family: 'Inter', sans-serif; color: #232D4B; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.enrollment__banner-sub { font-family: 'Inter', sans-serif; font-size: 13px; color: #4B5563; }

/* Steps */
.enrollment__steps { display: flex; justify-content: center; gap: 32px; position: relative; margin-bottom: 56px; }
.enrollment__steps::before { content: ''; position: absolute; top: 32px; left: 15%; right: 15%; height: 2px; background: #E5E7EB; z-index: 0; }
.enrollment__step { text-align: center; flex: 1; position: relative; z-index: 1; }
.enrollment__step-num { width: 64px; height: 64px; border-radius: 50%; background: #81BD51; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; color: #fff; }
/* [15] Enrollment step title 20px */
.enrollment__step h4 { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: #232D4B; margin-bottom: 8px; }
.enrollment__step p { font-size: 13px; color: #4B5563; line-height: 1.6; max-width: 300px; margin: 0 auto; }

/* [16] Mini FAQ background rgba(153,161,175,0.1), rounded 16px */
.enrollment__faq-wrap { background: rgba(153,161,175,0.1); border-radius: 16px; padding: 40px 32px; margin-bottom: 32px; }
.enrollment__faq-title { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; color: #232D4B; text-align: center; margin-bottom: 24px; }
.enrollment__faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.enrollment__faq-item .q { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: #232D4B; margin-bottom: 6px; }
.enrollment__faq-item .a { font-size: 14px; color: #4B5563; line-height: 1.6; }

.enrollment__cta { text-align: center; }

/* ============================================================
   PRICING
   ============================================================ */
/* [17] Pricing background rgba(210,229,225,0.2) */
.pricing { padding: 80px 0; background: rgba(210,229,225,0.2); }
.pricing__header { text-align: center; margin-bottom: 48px; }
.pricing__header h2 { margin-bottom: 16px; }
.pricing__header p { font-size: 16px; color: #4B5563; max-width: 600px; margin: 0 auto; }
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 40px; align-items: stretch; }
/* [18] Pricing card border-radius 16px, flex for equal height */
.pricing__card { background: #fff; border: 2px solid #E5E7EB; border-radius: 16px; padding: 36px 28px; text-align: left; position: relative; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; display: flex; flex-direction: column; }
.pricing__plan-features { flex: 1; }
.pricing__plan-btn { margin-top: auto; }
.pricing__card:hover { border-color: #81BD51; box-shadow: 0 12px 32px rgba(129,189,81,0.15); transform: translateY(-4px); }
.pricing__card--featured { border-color: #81BD51; box-shadow: 0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.1); }
.pricing__badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: #81BD51; color: #fff; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; padding: 6px 20px; border-radius: 20px; white-space: nowrap; }
/* [19] Pricing plan name 24px, line-height 32px */
.pricing__plan-name { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; color: #232D4B; margin-bottom: 4px; }
.pricing__plan-sub { font-size: 14px; color: #4B5563; margin-bottom: 16px; }
/* [20] Pricing price 36px, line-height 40px */
.pricing__plan-price { font-family: 'Inter', sans-serif; font-size: 36px; font-weight: 800; line-height: 40px; color: #232D4B; margin-bottom: 24px; }
.pricing__plan-price span { font-size: 15px; font-weight: 500; color: #4B5563; }
.pricing__plan-features { margin-bottom: 28px; }
.pricing__plan-feat { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 14px; color: #4B5563; line-height: 1.6; }
.pricing__plan-feat svg { width: 20px; height: 20px; stroke: #81BD51; fill: none; flex-shrink: 0; margin-top: 2px; }
/* [21] Pricing normal button: border 2px #232D4B */
.pricing__plan-btn { display: block; width: 100%; padding: 14px; border: 2px solid #232D4B; border-radius: 10px; background: transparent; color: #232D4B; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; text-align: center; transition: all 0.3s; }
.pricing__card:hover .pricing__plan-btn { background: #81BD51; border-color: #81BD51; color: #fff; }
/* [22] Pricing premium button: bg #81BD51, no border (border-color matches bg) */
.pricing__card--featured .pricing__plan-btn { background: transparent; border: 2px solid #232D4B; color: #232D4B; }
.pricing__actions { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: 80px 0; }
.faq__header { text-align: center; margin-bottom: 40px; }
.faq__list { max-width: 832px; margin: 0 auto 24px; }
/* [23] FAQ items border-radius 14px */
.faq__item { border: 2px solid #E5E7EB; border-radius: 14px; margin-bottom: 16px; overflow: hidden; }
.faq__item[open] { border-color: #E5E7EB; }
.faq__question { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: #232D4B; list-style: none; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { display: none; content: ''; }
.faq__question-icon { width: 24px; height: 24px; flex-shrink: 0; margin-left: 16px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 300; color: #4B5563; transition: color 0.2s; }
.faq__question-icon::before { content: '+'; }
.faq__item[open] .faq__question-icon::before { content: '\2212'; }
.faq__item[open] .faq__question-icon { color: #4B5563; }
.faq__answer { padding: 0 24px 20px; font-size: 15px; color: #4B5563; line-height: 1.7; }
.faq__link { text-align: center; }

/* ============================================================
   CTA
   ============================================================ */
/* [24] CTA gradient background, padding-top 128px */
.cta { padding: 128px 0 100px; background: linear-gradient(to bottom, rgba(210,229,225,0.3), #fff); text-align: center; }
/* [25] CTA h2 font-weight normal (regular, NOT bold) */
.cta h2 { margin-bottom: 16px; font-weight: 400; }
/* [26] CTA subtitle 20px */
.cta p { font-size: 20px; color: #4B5563; margin-bottom: 32px; }
/* [27] CTA button height 60px, font-size 18px */
.cta .btn--primary { height: 60px; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #232D4B; padding: 48px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
/* [28] Footer title "Masz pytania?" color #81BD51 */
.footer__contact .footer__heading { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; color: #81BD51; margin-bottom: 8px; }
.footer__contact > p { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 20px; }
.footer__contact-item { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
/* [29] Footer contact icons: border 1px solid rgba(129,189,81,0.2), border-radius 10px */
.footer__contact-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(129,189,81,0.15); border: 1px solid rgba(129,189,81,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.footer__contact-icon svg { width: 20px; height: 20px; stroke: #81BD51; fill: none; }
.footer__contact-label { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255,255,255,0.5); }
.footer__contact-value { font-size: 14px; color: rgba(255,255,255,0.8); }
.footer__contact-value a { color: rgba(255,255,255,0.8); }
.footer__contact-value a:hover { color: #81BD51; }
.footer__nav-col .footer__heading { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.footer__nav-col a { display: block; font-size: 14px; color: rgba(255,255,255,0.7); line-height: 2; transition: color 0.2s; }
.footer__nav-col a:hover { color: #81BD51; }
/* [30] Footer divider border-color #364153 */
.footer__copyright { border-top: 1px solid #364153; padding: 16px 0 30px; }
.footer__copyright-inner { display: flex; justify-content: space-between; align-items: center; }
/* [31] Footer copyright color #99A1AF */
.footer__copyright-text { font-size: 13px; color: #99A1AF; }
.footer__copyright-links a { font-size: 13px; color: #99A1AF; margin-left: 24px; }
.footer__copyright-links a:hover { color: #81BD51; }

/* ============================================================
   HOVER & INTERACTIONS
   ============================================================ */
/* Buttons - scale + shadow on hover */
.btn--primary { box-shadow: 0 4px 14px rgba(129,189,81,0.3); transition: all 0.25s ease; }
.btn--primary:hover { background: #6ea842; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(129,189,81,0.4); }
.btn--text:hover { color: #81BD51; }
.btn--xl:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(129,189,81,0.35); }

/* Hero images - no hover */

/* Trust bar items */
.trust-bar__item { transition: transform 0.2s; }
.trust-bar__item:hover { transform: translateY(-2px); }

/* Comparison cards - lift on hover */
.comparison__card { transition: transform 0.25s, box-shadow 0.25s; }
.comparison__card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }

/* Comparison video - glow */
.comparison__video { transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; }
.comparison__video:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -12px rgba(0,0,0,0.35); }
.comparison__video-play { transition: transform 0.3s, background 0.3s; }
.comparison__video:hover .comparison__video-play { transform: scale(1.15); background: rgba(255,255,255,0.25); }

/* Paths cards - border glow */
.paths__card { transition: transform 0.3s, box-shadow 0.3s; }
.paths__card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.1); }

/* Features items - icon pop */
.features__item { transition: transform 0.25s; border-radius: 12px; }
.features__item:hover { transform: translateY(-4px); }
.features__item-icon { transition: transform 0.3s, background 0.3s; }
.features__item:hover .features__item-icon { transform: scale(1.1); background: rgba(129,189,81,0.2); }

/* Features image - subtle lift */
.features__image { transition: transform 0.4s, box-shadow 0.4s; }
.features__image:hover { transform: translateY(-6px); box-shadow: 0 28px 40px -8px rgba(0,0,0,0.15); }

/* Mentoring cards - glass effect enhance */
.mentoring__card { transition: transform 0.25s, background 0.25s, border-color 0.25s; }
.mentoring__card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); border-color: rgba(129,189,81,0.3); }
.mentoring__card-icon { transition: transform 0.3s; }
.mentoring__card:hover .mentoring__card-icon { transform: scale(1.1); }

/* Mentoring image */
.mentoring__image { transition: transform 0.4s, box-shadow 0.4s; }
.mentoring__image:hover { transform: translateY(-6px); box-shadow: 0 35px 60px -15px rgba(0,0,0,0.35); }

/* Enrollment steps - number pop */
.enrollment__step { transition: transform 0.25s; }
.enrollment__step:hover { transform: translateY(-4px); }
.enrollment__step-num { transition: transform 0.3s, box-shadow 0.3s; }
.enrollment__step:hover .enrollment__step-num { transform: scale(1.1); box-shadow: 0 8px 20px rgba(129,189,81,0.3); }

/* FAQ items - border color on hover */
.faq__item { transition: border-color 0.2s, box-shadow 0.2s; }
.faq__item:hover { border-color: #81BD51; box-shadow: 0 4px 12px rgba(129,189,81,0.1); }

/* Footer nav links - underline slide */
.footer__nav-col a { position: relative; }
.footer__nav-col a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #81BD51; transition: width 0.3s; }
.footer__nav-col a:hover::after { width: 100%; }

/* Footer contact items */
.footer__contact-item { transition: transform 0.2s; }
.footer__contact-item:hover { transform: translateX(4px); }
.footer__contact-icon { transition: transform 0.25s, border-color 0.25s; }
.footer__contact-item:hover .footer__contact-icon { transform: scale(1.1); border-color: #81BD51; }

/* Nav CTA pulse on hover */
.nav__cta { transition: background 0.2s, box-shadow 0.3s, transform 0.2s; }
.nav__cta:hover { background: #6ea842; transform: translateY(-1px); box-shadow: 0px 14px 20px rgba(129,189,81,0.35); }

/* ============================================================
   PREMIUM SUBPAGE SYSTEM
   ============================================================ */

/* --- Rich Hero (shared) --- */
.page-hero--rich { position: relative; overflow: hidden; padding: 56px 0 40px; }
.page-hero--rich::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(120px); opacity: 0.5; z-index: 0; pointer-events: none; }
.page-hero--rich::after { content: ''; position: absolute; width: 350px; height: 350px; border-radius: 50%; filter: blur(100px); opacity: 0.3; z-index: 0; pointer-events: none; }
.page-hero--rich .container { position: relative; z-index: 1; }
.page-hero--rich h1 { font-size: 48px; line-height: 1.15; max-width: 700px; }
.page-hero--rich p { font-size: 19px; line-height: 1.65; color: #4B5563; max-width: 600px; margin-top: 16px; }
.page-hero--rich .btn { margin-top: 24px; }

/* --- Split Hero (two-column with image) --- */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hero-split__content { }
.hero-split__visual { position: relative; }
.hero-split__visual img { width: 100%; border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); }
.hero-split__visual--overlap { margin-top: -20px; margin-bottom: -20px; }
@media (max-width: 768px) {
    .hero-split { grid-template-columns: 1fr; gap: 32px; }
    .hero-split__visual { order: -1; max-width: 400px; margin: 0 auto; }
    .hero-split__visual--overlap { margin: 0 auto; }
}

/* Hero: O Liceum (mint orbs) */
.page-hero--o-liceum { background: linear-gradient(180deg, rgba(210,229,225,0.18) 0%, #fff 100%); }
.page-hero--o-liceum::before { background: radial-gradient(circle, rgba(210,229,225,0.6), transparent 70%); top: -200px; right: -100px; }
.page-hero--o-liceum::after { background: radial-gradient(circle, rgba(129,189,81,0.15), transparent 70%); bottom: -150px; left: -50px; }

/* Hero: Mentoring (green warmth) */
.page-hero--mentoring { background: linear-gradient(160deg, rgba(129,189,81,0.06) 0%, rgba(210,229,225,0.12) 50%, #fff 100%); }
.page-hero--mentoring::before { background: radial-gradient(circle, rgba(129,189,81,0.25), transparent 70%); top: -180px; left: -80px; }
.page-hero--mentoring::after { background: radial-gradient(circle, rgba(210,229,225,0.4), transparent 70%); bottom: -120px; right: -60px; }

/* Hero: Nauka w praktyce (structured navy) */
.page-hero--nauka { background: linear-gradient(145deg, rgba(35,45,75,0.04) 0%, rgba(210,229,225,0.1) 60%, #fff 100%); }
.page-hero--nauka::before { background: radial-gradient(circle, rgba(35,45,75,0.12), transparent 70%); top: -200px; right: -120px; }
.page-hero--nauka::after { background: radial-gradient(circle, rgba(129,189,81,0.12), transparent 70%); bottom: -100px; left: 10%; }

/* Hero: Rekrutacja (action green) */
.page-hero--rekrutacja { background: linear-gradient(135deg, rgba(129,189,81,0.08) 0%, rgba(129,189,81,0.02) 40%, #fff 100%); }
.page-hero--rekrutacja::before { background: radial-gradient(circle, rgba(129,189,81,0.3), transparent 70%); top: -150px; left: 20%; width: 600px; height: 600px; }
.page-hero--rekrutacja::after { background: radial-gradient(circle, rgba(210,229,225,0.3), transparent 70%); bottom: -80px; right: 5%; }

/* Hero: Sciezki rozwoju (split green/navy) */
.page-hero--sciezki { background: linear-gradient(120deg, rgba(129,189,81,0.07) 0%, rgba(129,189,81,0.02) 50%, rgba(35,45,75,0.06) 100%); }
.page-hero--sciezki::before { background: radial-gradient(circle, rgba(129,189,81,0.2), transparent 70%); top: -100px; left: -100px; }
.page-hero--sciezki::after { background: radial-gradient(circle, rgba(35,45,75,0.15), transparent 70%); top: -80px; right: -80px; }

/* Hero: Cennik (transparent mint) */
.page-hero--cennik { background: linear-gradient(180deg, rgba(210,229,225,0.15) 0%, rgba(210,229,225,0.05) 60%, #fff 100%); }
.page-hero--cennik::before { background: radial-gradient(circle, rgba(210,229,225,0.5), transparent 70%); top: -180px; left: 30%; }
.page-hero--cennik::after { background: radial-gradient(circle, rgba(129,189,81,0.1), transparent 70%); bottom: -100px; right: 20%; }

/* Hero: FAQ (clean neutral) */
.page-hero--faq { background: linear-gradient(180deg, rgba(35,45,75,0.03) 0%, #fff 100%); }
.page-hero--faq::before { background: radial-gradient(circle, rgba(210,229,225,0.35), transparent 70%); top: -200px; right: 10%; }
.page-hero--faq::after { display: none; }

/* Hero: Kontakt (warm) */
.page-hero--kontakt { background: linear-gradient(150deg, rgba(210,229,225,0.12) 0%, rgba(129,189,81,0.04) 50%, #fff 100%); }
.page-hero--kontakt::before { background: radial-gradient(circle, rgba(210,229,225,0.4), transparent 70%); top: -150px; left: 10%; }
.page-hero--kontakt::after { background: radial-gradient(circle, rgba(129,189,81,0.15), transparent 70%); bottom: -100px; right: -50px; }

/* Hero: Blog (editorial) */
.page-hero--blog { background: linear-gradient(180deg, rgba(129,189,81,0.04) 0%, rgba(210,229,225,0.08) 50%, #fff 100%); }
.page-hero--blog::before { background: radial-gradient(circle, rgba(129,189,81,0.15), transparent 70%); top: -180px; left: -50px; }
.page-hero--blog::after { background: radial-gradient(circle, rgba(210,229,225,0.3), transparent 70%); bottom: -120px; right: -80px; }

/* Hero: Legal pages (clean, neutral, professional) */
.page-hero--legal { background: linear-gradient(180deg, rgba(35,45,75,0.04) 0%, rgba(210,229,225,0.06) 50%, #fff 100%); padding: 56px 0 40px; }
.page-hero--legal::before { background: radial-gradient(circle, rgba(35,45,75,0.08), transparent 70%); top: -200px; right: 15%; }
.page-hero--legal::after { display: none; }
.page-hero--legal h1 { font-size: 42px; }
.page-hero--legal p { max-width: 560px; }

/* --- Breadcrumbs --- */
.breadcrumbs { padding: 16px 0; background: rgba(210,229,225,0.1); border-bottom: 1px solid #E5E7EB; }
.breadcrumbs .container { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4B5563; }
.breadcrumbs a { color: #81BD51; font-weight: 500; transition: color 0.2s; }
.breadcrumbs a:hover { color: #6ea842; }
.breadcrumbs__sep { color: #D1D5DC; }
.breadcrumbs__current { color: #232D4B; font-weight: 600; }

/* --- Legal Text Styling --- */
.legal-text h2 { font-size: 28px; line-height: 1.3; margin-top: 48px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #81BD51; display: inline-block; }
.legal-text h2:first-of-type { margin-top: 0; }
.legal-text h3 { font-size: 20px; line-height: 1.4; margin-top: 32px; margin-bottom: 12px; color: #232D4B; }
.legal-text p { margin-bottom: 14px; }
.legal-text ol { margin: 16px 0; padding-left: 28px; }
.legal-text ol li { margin-bottom: 10px; list-style: decimal; }
.legal-text ul { margin: 12px 0; padding-left: 24px; }
.legal-text ul li { margin-bottom: 8px; list-style: disc; }
.legal-text a { color: #81BD51; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.legal-text a:hover { color: #6ea842; }
.legal-text__updated { font-size: 14px; color: #99A1AF; margin-bottom: 32px; font-style: italic; }
.legal-text__contact { margin-top: 48px; padding: 32px; background: linear-gradient(135deg, rgba(35,45,75,0.04), rgba(35,45,75,0.08)); border: 1px solid rgba(35,45,75,0.12); border-radius: 16px; }
.legal-text__contact h3 { margin-top: 0; margin-bottom: 12px; font-size: 18px; }
.legal-text__contact p { font-size: 15px; color: #4B5563; line-height: 1.8; margin-bottom: 0; }

@media (max-width: 768px) {
    .page-hero--legal { padding: 60px 0 40px; }
    .page-hero--legal h1 { font-size: 30px !important; }
    .legal-text h2 { font-size: 22px; margin-top: 36px; }
    .legal-text h3 { font-size: 18px; margin-top: 24px; }
    .legal-text__contact { padding: 24px; }
}

/* --- Dark Section (reusable) --- */
.section-dark { background: #232D4B; padding: 48px 0; position: relative; overflow: hidden; }
.section-dark::before { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(129,189,81,0.08), transparent 70%); top: -100px; right: -100px; pointer-events: none; }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: #D1D5DC; }
.section-dark .section-title { color: #fff; }
.section-dark .section-lead { color: #D1D5DC; }

/* Glassmorphic cards for dark sections */
.glass-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 32px; backdrop-filter: blur(8px); transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
.glass-card:hover { transform: translateY(-4px); border-color: rgba(129,189,81,0.3); box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.glass-card__icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(129,189,81,0.2); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.glass-card__icon svg { width: 24px; height: 24px; stroke: #81BD51; fill: none; }
.glass-card h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.glass-card p { font-size: 14px; color: #D1D5DC; line-height: 1.7; }

/* --- Stats Row --- */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.stats-row__item { padding: 24px; }
.stats-row__num { font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 800; color: #81BD51; line-height: 1; margin-bottom: 8px; }
.stats-row__label { font-size: 14px; color: #4B5563; font-weight: 500; }
.section-dark .stats-row__label { color: #D1D5DC; }

/* --- Premium two-col with decorative accent --- */
.two-col-premium { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.two-col-premium--reverse { direction: rtl; }
.two-col-premium--reverse > * { direction: ltr; }
.two-col-premium__visual { position: relative; border-radius: 20px; overflow: hidden; }
.two-col-premium__visual::after { content: ''; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); pointer-events: none; }
.two-col-premium__visual img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.two-col-premium__deco { position: relative; }
.two-col-premium__deco::before { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(129,189,81,0.08); filter: blur(60px); top: -40px; left: -40px; pointer-events: none; }

/* Visual placeholder (when no image available) */
.visual-placeholder { aspect-ratio: 4/3; border-radius: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.visual-placeholder--green { background: linear-gradient(135deg, rgba(129,189,81,0.08), rgba(129,189,81,0.18)); border: 2px solid rgba(129,189,81,0.15); }
.visual-placeholder--navy { background: linear-gradient(135deg, rgba(35,45,75,0.06), rgba(35,45,75,0.15)); border: 2px solid rgba(35,45,75,0.12); }
.visual-placeholder--mint { background: linear-gradient(135deg, rgba(210,229,225,0.2), rgba(210,229,225,0.4)); border: 2px solid rgba(210,229,225,0.3); }
.visual-placeholder svg { width: 80px; height: 80px; opacity: 0.3; }

/* --- Diagonal Section Divider --- */
.section-diagonal { position: relative; }
.section-diagonal::before { content: ''; position: absolute; top: -40px; left: 0; right: 0; height: 80px; background: inherit; clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%); z-index: 1; }

/* --- Accent line (decorative) --- */
.accent-line { width: 60px; height: 4px; border-radius: 2px; background: #81BD51; margin-bottom: 20px; }
.accent-line--center { margin-left: auto; margin-right: auto; }
.accent-line--white { background: rgba(255,255,255,0.3); }

/* --- Section headers enhanced --- */
.section-header { text-align: center; margin-bottom: 32px; }
.section-header h2 { margin-bottom: 16px; }
.section-header p { font-size: 18px; color: #4B5563; line-height: 1.65; max-width: 640px; margin: 0 auto; }
.section-dark .section-header p { color: #D1D5DC; }
/* Hide accent-lines in regular sections (keep only in hero + dark sections) */
.page-section .accent-line,
.pricing .accent-line,
.faq-big .accent-line { display: none; }
.two-col-premium .accent-line { display: none; }

/* --- Highlight box --- */
.highlight-box { background: linear-gradient(135deg, rgba(129,189,81,0.06), rgba(129,189,81,0.14)); border: 2px solid rgba(129,189,81,0.2); border-radius: 16px; padding: 32px 40px; position: relative; overflow: hidden; }
.highlight-box::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #81BD51; border-radius: 2px 0 0 2px; }
.highlight-box h3 { font-size: 20px; margin-bottom: 10px; }
.highlight-box p { font-size: 15px; color: #4B5563; line-height: 1.7; }

/* --- Premium responsive --- */
@media (max-width: 768px) {
    .page-hero--rich { padding: 70px 0 50px; }
    .page-hero--rich h1 { font-size: 32px !important; }
    .page-hero--rich p { font-size: 16px; }
    .stats-row { grid-template-columns: 1fr 1fr; gap: 16px; }
    .stats-row__num { font-size: 36px; }
    .two-col-premium { grid-template-columns: 1fr; gap: 32px; }
    .two-col-premium--reverse { direction: ltr; }
    .glass-card { padding: 24px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .page-hero--rich h1 { font-size: 38px !important; }
    .stats-row { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .two-col-premium { gap: 40px; }
}

/* ============================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ============================================================ */

/* --- Scroll progress bar --- */
/* scroll-progress removed - interfered with mobile menu */

/* --- Base keyframes --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}
@keyframes slideInFromBottom {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Scroll-triggered fade-in --- */
@keyframes autoShow { to { opacity: 1; transform: translateY(0); } }
@keyframes autoShowX { to { opacity: 1; transform: translateX(0); } }
@keyframes autoShowScale { to { opacity: 1; transform: scale(1); } }
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: autoShow 0.7s 1.5s forwards; }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); animation: none; }

/* Direction variants */
.animate-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; animation: autoShowX 0.7s 1.5s forwards; }
.animate-left.is-visible { opacity: 1; transform: translateX(0); animation: none; }
.animate-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s ease, transform 0.7s ease; animation: autoShowX 0.7s 1.5s forwards; }
.animate-right.is-visible { opacity: 1; transform: translateX(0); animation: none; }
.animate-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.6s ease, transform 0.6s ease; animation: autoShowScale 0.6s 1.5s forwards; }
.animate-scale.is-visible { opacity: 1; transform: scale(1); animation: none; }

/* Staggered children */
.comparison__card, .paths__card, .features__item, .mentoring__card, .pricing__card, .enrollment__step, .faq__item,
.reason-card, .audience-card, .pillar-card, .model-item, .steps-horizontal__item, .lecture-card, .effect-item, .contact-info__card, .blog-card, .glass-card {
    opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.2s, box-shadow 0.2s; animation: autoShow 0.5s 2s forwards;
}
/* Stagger - subpage sp-* children (ONLY inside animate-on-scroll parents) */
.animate-on-scroll .sp-icon-card, .animate-on-scroll .sp-compare__card,
.animate-on-scroll .sp-day-card, .animate-on-scroll .sp-topic,
.animate-on-scroll .sp-speaker-card, .animate-on-scroll .sp-team-member,
.animate-on-scroll .sp-pricing-item, .animate-on-scroll .sp-checklist__item,
.animate-on-scroll .sp-qual-card, .animate-on-scroll .sp-rules__item,
.animate-on-scroll .sp-audience__item, .animate-on-scroll .sp-ecosystem__card,
.animate-on-scroll .sp-philosophy__card, .animate-on-scroll .sp-step,
.animate-on-scroll .sp-profile, .animate-on-scroll .sp-subject,
.animate-on-scroll .sp-obligation, .animate-on-scroll .sp-doc-card,
.animate-on-scroll .sp-rule, .animate-on-scroll .sp-faq-item,
.animate-on-scroll .sp-faq-cat, .animate-on-scroll .sp-info-col {
    opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; animation: autoShow 0.5s 2s forwards;
}
/* Stagger - all subpage card classes (nauka, mentoring, akademicka, zawodowa, kontakt, uczen, rodzic, o-liceum) */
.animate-on-scroll .nw-day-card, .animate-on-scroll .nw-icard,
.animate-on-scroll .nw-pcard, .animate-on-scroll .nw-ocard,
.animate-on-scroll .mt-nav-card, .animate-on-scroll .mt-meet-card,
.animate-on-scroll .mt-topic-card, .animate-on-scroll .mt-lec-card,
.animate-on-scroll .ak-card, .animate-on-scroll .ak-card--sm,
.animate-on-scroll .kt-ccard, .animate-on-scroll .kt-dcard, .animate-on-scroll .kt-pill,
.animate-on-scroll .uc-action-green, .animate-on-scroll .uc-action-white, .animate-on-scroll .uc-card,
.animate-on-scroll .rd-act-green, .animate-on-scroll .rd-act-white, .animate-on-scroll .rd-card,
.animate-on-scroll .ol-card-white, .animate-on-scroll .ol-card-mint,
.animate-on-scroll .ol-card-glass, .animate-on-scroll .ol-team-card,
.animate-on-scroll [class*="anim-card"] {
    opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; animation: autoShow 0.5s 2s forwards;
}
.stagger-in { opacity: 1 !important; transform: translateY(0) !important; }

/* ================================================================
   SUBPAGE HOVER EFFECTS - cards, items, interactive elements
   ================================================================ */
/* Nauka w praktyce */
.nw-day-card, .nw-icard, .nw-pcard, .nw-ocard { transition: transform 0.25s, box-shadow 0.25s; }
.nw-day-card:hover, .nw-icard:hover, .nw-pcard:hover, .nw-ocard:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }

/* Mentoring */
.mt-nav-card, .mt-meet-card, .mt-topic-card { transition: transform 0.25s, box-shadow 0.25s; }
.mt-nav-card:hover, .mt-meet-card:hover, .mt-topic-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.mt-lec-card { transition: transform 0.25s, box-shadow 0.25s; }
.mt-lec-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.1); }

/* Sciezka akademicka / zawodowa */
.ak-card, .ak-card--sm { transition: transform 0.25s, box-shadow 0.25s; }
.ak-card:hover, .ak-card--sm:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }

/* Kontakt */
.kt-ccard, .kt-dcard { transition: transform 0.25s, box-shadow 0.25s; }
.kt-ccard:hover, .kt-dcard:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.kt-pill { transition: transform 0.2s, background 0.2s; }
.kt-pill:hover { transform: translateY(-2px); }

/* Uczen / Rodzic */
.uc-action-green, .uc-action-white, .uc-card,
.rd-act-green, .rd-act-white, .rd-card { transition: transform 0.25s, box-shadow 0.25s; }
.uc-action-green:hover, .uc-action-white:hover, .uc-card:hover,
.rd-act-green:hover, .rd-act-white:hover, .rd-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }

/* O Liceum */
.ol-card-white, .ol-card-mint, .ol-card-glass, .ol-team-card { transition: transform 0.25s, box-shadow 0.25s; }
.ol-card-white:hover, .ol-card-mint:hover, .ol-card-glass:hover, .ol-team-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }

/* Rekrutacja / Cennik inline-styled cards - use generic anim-card */
[class*="anim-card"] { transition: transform 0.25s, box-shadow 0.25s; }
[class*="anim-card"]:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }

/* noscript / fallback */
noscript ~ * .animate-on-scroll { opacity: 1; transform: none; }

/* --- Floating decorative orbs (animated) --- */
.page-hero--rich::before { animation: breathe 6s ease-in-out infinite; }
.page-hero--rich::after { animation: breathe 8s ease-in-out infinite 1s; }
.section-dark::before { animation: breathe 7s ease-in-out infinite; }

/* --- Stats counter animation --- */
.stats-row__num { transition: opacity 0.5s ease, transform 0.5s ease; }
.stats-row__num.count-animate { animation: countUp 0.6s ease forwards; }

/* --- Price pop --- */
@keyframes pricePop { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(129,189,81,0.3); } 50% { box-shadow: 0 4px 24px rgba(129,189,81,0.6); } }
.btn--pulse { animation: pulse 2s ease-in-out infinite; }
.pricing__plan-price { opacity: 0; }
.price-pop { animation: pricePop 0.5s ease forwards; }

/* --- Shimmer on featured card badge --- */
.pricing__badge { background: linear-gradient(90deg, #81BD51, #9cd46e, #81BD51); background-size: 200% 100%; animation: shimmer 3s ease infinite; }

/* --- Image hover zoom --- */
.two-col-premium__visual img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.two-col-premium__visual:hover img { transform: scale(1.04); }

/* hero subtitle stays as-is (no gradient override) */

/* --- FAQ smooth accordion --- */
.faq__answer { transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease; }

/* --- Card tilt on hover (subtle 3D) --- */
.glass-card, .reason-card, .audience-card { transform-style: preserve-3d; perspective: 1000px; }

/* --- Floating badge for enrollment steps --- */
.enrollment__step-num { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s; }
.enrollment__step:hover .enrollment__step-num { transform: scale(1.15) rotate(-5deg); box-shadow: 0 12px 28px rgba(129,189,81,0.4); }

/* --- Trust bar subtle animation --- */
.trust-bar__item svg { transition: transform 0.3s; }
.trust-bar__item:hover svg { transform: scale(1.2) rotate(5deg); }

/* --- Icon bounce on card hover --- */
.glass-card:hover .glass-card__icon svg,
.reason-card:hover .reason-card__icon svg,
.model-item:hover .model-item__icon svg { animation: float 1.5s ease-in-out infinite; }

/* --- Link arrow slide --- */
.green-link svg, .navy-link svg { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.green-link:hover svg, .navy-link:hover svg { transform: translateX(6px); }

/* --- Section header accent line grow --- */
.section-header .accent-line, .page-hero--rich .accent-line { transition: width 0.6s ease; width: 30px; }
.is-visible .accent-line, .page-hero--rich .accent-line { width: 60px; }

/* --- Highlight box glow --- */
.highlight-box { transition: box-shadow 0.3s; }
.highlight-box:hover { box-shadow: 0 8px 32px rgba(129,189,81,0.15); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  h1, .hero__title { font-size: 34px !important; line-height: 1.15 !important; }
  h2 { font-size: 30px; line-height: 38px; }
  .hero__subtitle { font-size: 24px; line-height: 1.3; }
  .hero__desc { font-size: 16px; line-height: 26px; }

  /* Utility bar hidden on mobile */
  .utility-bar { display: none; }
  body { padding-top: 80px; }
  body.nav-open { overflow: hidden; }
  .nav { top: 0; }

  /* Nav mobile */
  .nav__menu { display: none; flex-direction: column; position: fixed; top: 80px; left: 0; right: 0; bottom: 0; background: #232D4B; padding: 24px 24px 40px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 100; gap: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .nav__menu.active { display: flex; }
  .nav__menu a { font-size: 18px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; }
  .nav__menu > li:last-child > a { border-bottom: none; }
  .nav__cta { display: inline-flex; padding: 8px 16px; font-size: 13px; margin-left: auto; margin-right: 12px; }
  .nav__hamburger { display: block; }
  .nav__sub { position: static; transform: none; min-width: auto; box-shadow: none; border-radius: 0; padding: 4px 0 8px 20px; background: transparent; border: none; }
  .nav__item--has-sub .nav__sub { display: none; }
  .nav__item--has-sub.nav__item--open .nav__sub { display: block; }
  .nav__item--has-sub::after { display: none; }
  .nav__sub a { padding: 10px 0; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7) !important; border-bottom: none !important; }
  .nav__sub a:hover { color: #81BD51 !important; }

  /* Mega menu mobile */
  .nav__mega { position: static; box-shadow: none; padding: 8px 0 8px 20px; background: transparent; border: none; }
  .nav__item--mega:hover .nav__mega { display: none; }
  .nav__item--mega.nav__item--open .nav__mega { display: block; }
  .nav__mega-cards { grid-template-columns: 1fr; padding: 8px 0; gap: 16px; }
  .nav__mega-card { padding: 16px; }
  .nav__mega-card-head span { font-size: 16px; color: #fff; }
  .nav__mega-links a { color: rgba(255,255,255,0.7); font-size: 15px; border-bottom: none !important; }
  .nav__mega-links a:hover { color: #81BD51; }
  .nav__mega-cta { font-size: 15px; border-bottom: none !important; }
  .nav__mega-cta--green, .nav__mega-cta--navy { color: rgba(255,255,255,0.9); }
  .nav__mega-footer { color: rgba(255,255,255,0.5); font-size: 13px; padding: 8px 0 0; }

  /* Mobile CTA at bottom of menu */
  .nav__item--mobile-cta { display: list-item; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); list-style: none; }
  .nav__mobile-cta { background: #81BD51; color: #fff !important; font-size: 17px !important; font-weight: 600 !important; padding: 16px 24px !important; border-radius: 12px; text-align: center; justify-content: center !important; gap: 8px; border-bottom: none !important; }

  /* Hero */
  .hero { padding: 40px 0 20px; }
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__images { display: none; }
  .hero__actions { flex-direction: column; align-items: flex-start; }

  /* Trust bar */
  .trust-bar__items { flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0; }

  /* Comparison */
  .comparison { padding: 60px 0; }
  .comparison__layout { grid-template-columns: 1fr; gap: 32px; }
  .comparison__cards { grid-template-columns: 1fr; }
  .comparison__video--clip { max-height: calc(100vh - 140px); }
  .comparison__video--clip video { max-height: calc(100vh - 140px); }

  /* Paths */
  .paths { padding: 60px 0; }
  .paths__grid { grid-template-columns: 1fr; }

  /* Features */
  .features { padding: 60px 0; }
  .features__layout { grid-template-columns: 1fr; }
  .features__grid { grid-template-columns: 1fr; }
  .features__image { order: -1; }

  /* Mentoring */
  .mentoring { padding: 60px 0; }
  .mentoring__layout { grid-template-columns: 1fr; }
  .mentoring__cards { grid-template-columns: 1fr; }
  .mentoring__link { text-align: left; }

  /* Enrollment */
  .enrollment { padding: 60px 0; }
  .enrollment__steps { flex-direction: column; gap: 24px; }
  .enrollment__steps::before { display: none; }
  .enrollment__faq-grid { grid-template-columns: 1fr; }

  /* Pricing */
  .pricing { padding: 60px 0; }
  .pricing__grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto 40px; }

  /* CTA */
  .cta { padding: 60px 0; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__copyright-inner { flex-direction: column; gap: 12px; text-align: center; }
  .footer__copyright-links a { margin-left: 0; margin-right: 24px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr 1fr; }
  .hero__title { font-size: 42px !important; line-height: 52px !important; }
  .pricing__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   SUBPAGE STYLES
   ============================================================ */

/* --- Page Hero (subpage lighter version) --- */
.page-hero { padding: 60px 0 40px; background: linear-gradient(180deg, rgba(210,229,225,0.15) 0%, #fff 100%); }
.page-hero h1 { font-size: 42px; font-weight: 700; line-height: 1.2; color: #232D4B; margin-bottom: 16px; max-width: 800px; }
.page-hero p { font-size: 18px; line-height: 29px; color: #4B5563; max-width: 700px; margin-bottom: 24px; }
.page-hero .btn { margin-top: 8px; }
.page-hero--compact { padding: 40px 0 24px; }

/* --- Page Content (default template) --- */
.page-content { padding: 48px 0 64px; }
.page-content__body { max-width: 832px; margin: 0 auto; font-size: 16px; line-height: 1.7; color: #4B5563; }
.page-content__body h2 { margin: 32px 0 16px; }
.page-content__body h3 { margin: 24px 0 12px; }
.page-content__body p { margin-bottom: 16px; }
.page-content__body ul, .page-content__body ol { margin: 16px 0; padding-left: 24px; }
.page-content__body li { margin-bottom: 8px; list-style: disc; }
.page-content__body img { border-radius: 16px; margin: 24px 0; }

/* --- Page Sections --- */
.page-section { padding: 48px 0; }
.page-section--alt { background: rgba(210,229,225,0.2); }
.page-section--dark { background: #232D4B; color: #D1D5DC; }
.page-section--dark h2, .page-section--dark h3, .page-section--dark h4 { color: #fff; }

.section-title { text-align: center; margin-bottom: 32px; max-width: 800px; margin-left: auto; margin-right: auto; }
.section-title--light { color: #fff; }
.section-lead { font-size: 18px; line-height: 29px; color: #4B5563; max-width: 700px; margin-bottom: 32px; }
.section-lead--light { color: #D1D5DC; text-align: center; max-width: 700px; margin: 0 auto 48px; }
.section-note { font-size: 15px; color: #4B5563; margin-top: 24px; font-style: italic; }

/* --- Two Column Layout --- */
.section-two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.section-two-col__image { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.section-two-col__image img { width: 100%; height: auto; display: block; border-radius: 16px; }

/* --- Trust Points --- */
.trust-points { margin-top: 32px; }
.trust-points__item { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 15px; color: #232D4B; font-weight: 500; }
.trust-points__item svg { width: 20px; height: 20px; stroke: #81BD51; fill: none; flex-shrink: 0; }

/* --- Reason Cards --- */
.reason-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.reason-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 32px; transition: transform 0.25s, box-shadow 0.25s; }
.reason-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.reason-card__num { width: 48px; height: 48px; border-radius: 50%; background: #81BD51; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.reason-card__icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(129,189,81,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.reason-card__icon svg { width: 24px; height: 24px; stroke: #81BD51; fill: none; }
.reason-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.reason-card p { font-size: 14px; color: #4B5563; line-height: 1.7; }

/* --- Audience Cards --- */
.audience-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.audience-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 32px; transition: transform 0.25s, box-shadow 0.25s; }
.audience-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.audience-card__icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.audience-card__icon--green { background: rgba(129,189,81,0.12); color: #81BD51; }
.audience-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.audience-card p { font-size: 14px; color: #4B5563; line-height: 1.7; }

/* --- Pillar Cards (dark bg) --- */
.pillar-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 32px; transition: transform 0.25s, background 0.25s; }
.pillar-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); }
.pillar-card__num { width: 48px; height: 48px; border-radius: 50%; background: rgba(129,189,81,0.2); display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: #81BD51; margin-bottom: 16px; }
.pillar-card h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.pillar-card p { font-size: 14px; color: #D1D5DC; line-height: 1.7; }

/* --- Model Grid --- */
.model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.model-item { padding: 24px; transition: transform 0.25s; border-radius: 12px; }
.model-item:hover { transform: translateY(-4px); }
.model-item__icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(129,189,81,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.model-item__icon svg { width: 24px; height: 24px; stroke: #81BD51; fill: none; }
.model-item h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.model-item p { font-size: 14px; color: #4B5563; line-height: 1.6; }

/* --- Steps Horizontal --- */
.steps-horizontal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.steps-horizontal::before { content: ''; position: absolute; top: 32px; left: 15%; right: 15%; height: 2px; background: #E5E7EB; z-index: 0; }
.steps-horizontal__item { text-align: center; position: relative; z-index: 1; }
.steps-horizontal__num { width: 64px; height: 64px; border-radius: 50%; background: #81BD51; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; color: #fff; transition: transform 0.3s, box-shadow 0.3s; }
.steps-horizontal__item:hover .steps-horizontal__num { transform: scale(1.1); box-shadow: 0 8px 20px rgba(129,189,81,0.3); }
.steps-horizontal__item h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.steps-horizontal__item p { font-size: 14px; color: #4B5563; line-height: 1.6; max-width: 300px; margin: 0 auto; }

/* --- Lecture Cards --- */
.lecture-cards { margin-top: 24px; }
.lecture-card { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid #E5E7EB; }
.lecture-card:last-child { border-bottom: none; }
.lecture-card__icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(129,189,81,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lecture-card__icon svg { width: 24px; height: 24px; stroke: #81BD51; fill: none; }
.lecture-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.lecture-card p { font-size: 14px; color: #4B5563; line-height: 1.6; }

/* --- Effects Grid --- */
.effects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 0 auto; }
.effect-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; padding: 20px 24px; font-size: 15px; color: #232D4B; font-weight: 500; transition: transform 0.2s, box-shadow 0.2s; }
.effect-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.effect-item svg { width: 20px; height: 20px; stroke: #81BD51; fill: none; flex-shrink: 0; }

/* --- FAQ Big (categorized) --- */
.faq-big { padding: 0 0 80px; }
.faq-big__nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0 0 48px; border-bottom: 1px solid #E5E7EB; margin-bottom: 48px; }
.faq-big__nav-item { display: inline-block; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #4B5563; padding: 10px 20px; border: 1px solid #E5E7EB; border-radius: 24px; transition: all 0.2s; }
.faq-big__nav-item:hover, .faq-big__nav-item--active { background: #81BD51; color: #fff; border-color: #81BD51; }
.faq-big__category { margin-bottom: 48px; }
.faq-big__category-title { font-size: 28px; font-weight: 700; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid #81BD51; display: inline-block; }

/* --- Contact Grid --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.contact-info__card { display: flex; align-items: flex-start; gap: 16px; padding: 24px; background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; margin-bottom: 16px; transition: transform 0.2s, box-shadow 0.2s; }
.contact-info__card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.contact-info__icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(129,189,81,0.12); border: 1px solid rgba(129,189,81,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info__icon svg { width: 24px; height: 24px; }
.contact-info__card h3 { font-size: 16px; font-weight: 700; color: #232D4B; margin-bottom: 4px; }
.contact-info__value { font-size: 15px; color: #232D4B; font-weight: 600; }
.contact-info__value a { color: #232D4B; }
.contact-info__value a:hover { color: #81BD51; }
.contact-info__note { font-size: 13px; color: #4B5563; margin-top: 2px; }

/* --- Contact Form --- */
.contact-form h2 { font-size: 28px; margin-bottom: 24px; }
.ramus-form__group { margin-bottom: 20px; }
.ramus-form__group label { display: block; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #232D4B; margin-bottom: 6px; }
.ramus-form__group input,
.ramus-form__group textarea { width: 100%; padding: 12px 16px; border: 2px solid #E5E7EB; border-radius: 10px; font-family: Arial, sans-serif; font-size: 15px; color: #232D4B; transition: border-color 0.2s; outline: none; }
.ramus-form__group input:focus,
.ramus-form__group textarea:focus { border-color: #81BD51; }
.ramus-form__group textarea { resize: vertical; min-height: 120px; }

/* --- CTA Actions (multiple buttons) --- */
.cta__actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* --- Blog Filter Tags --- */
.blog-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; justify-content: center; }
.blog-filter__tag { display: inline-block; padding: 8px 20px; border-radius: 100px; font-size: 14px; font-weight: 600; border: 1px solid rgba(129,189,81,0.3); color: #4B5563; background: rgba(255,255,255,0.8); transition: all 0.25s; }
.blog-filter__tag:hover { border-color: #81BD51; color: #81BD51; background: rgba(129,189,81,0.05); }
.blog-filter__tag--active { background: #81BD51; color: #fff; border-color: #81BD51; }
.blog-filter__tag--active:hover { background: #6ea844; color: #fff; }

/* --- Blog Featured Post --- */
.blog-featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid #E5E7EB; }
.blog-featured__image { display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 16/10; }
.blog-featured__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.blog-featured:hover .blog-featured__image img { transform: scale(1.03); }
.blog-featured__image .blog-card__image--placeholder { aspect-ratio: 16/10; border-radius: 20px; }
.blog-featured__body h2 { font-size: 28px; font-weight: 700; line-height: 1.3; margin: 12px 0 16px; }
.blog-featured__body h2 a { color: #232D4B; transition: color 0.2s; }
.blog-featured__body h2 a:hover { color: #81BD51; }
.blog-featured__body p { font-size: 15px; color: #4B5563; line-height: 1.7; margin-bottom: 20px; }

/* --- Blog Card Meta & Category Badge --- */
.blog-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.blog-card__meta time { font-size: 13px; color: #4B5563; }
.blog-card__category { display: inline-block; padding: 3px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; background: rgba(129,189,81,0.12); color: #5a8a33; transition: background 0.2s; }
.blog-card__category:hover { background: rgba(129,189,81,0.25); }

/* --- Blog Grid --- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E5E7EB; border-radius: 20px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.1); }
.blog-card__image { display: block; aspect-ratio: 16/10; overflow: hidden; }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.blog-card:hover .blog-card__image img { transform: scale(1.06); }
.blog-card__image--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(210,229,225,0.3), rgba(129,189,81,0.08)); min-height: 200px; }
.blog-card__image--placeholder svg { width: 48px; height: 48px; }
.blog-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.blog-card__body h3 { font-size: 18px; font-weight: 700; margin: 4px 0 12px; line-height: 1.35; }
.blog-card__body h3 a { color: #232D4B; transition: color 0.2s; }
.blog-card__body h3 a:hover { color: #81BD51; }
.blog-card__body p { font-size: 14px; color: #4B5563; line-height: 1.6; margin-bottom: 16px; flex: 1; }
.blog-card__body .green-link { margin-top: auto; }

.blog-pagination { text-align: center; padding: 48px 0 0; }
.blog-pagination .page-numbers { display: inline-block; padding: 10px 18px; margin: 0 4px; border: 1px solid #E5E7EB; border-radius: 10px; font-size: 14px; font-weight: 600; color: #4B5563; transition: all 0.2s; }
.blog-pagination .page-numbers.current { background: #81BD51; color: #fff; border-color: #81BD51; }
.blog-pagination .page-numbers:hover { border-color: #81BD51; color: #81BD51; }
.blog-empty { text-align: center; padding: 80px 0; }
.blog-empty h2 { margin-bottom: 12px; }

/* --- Single Post --- */
.post-single__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 14px; color: #4B5563; flex-wrap: wrap; }
.post-single__layout { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
.post-single__body { min-width: 0; }
.post-single__thumbnail { margin-bottom: 32px; border-radius: 16px; overflow: hidden; }
.post-single__thumbnail img { width: 100%; height: auto; border-radius: 16px; }
.post-single__content { font-size: 16px; line-height: 1.8; color: #4B5563; }
.post-single__content h2 { font-size: 24px; color: #232D4B; margin: 36px 0 16px; }
.post-single__content h3 { font-size: 20px; color: #232D4B; margin: 28px 0 12px; }
.post-single__content p { margin-bottom: 18px; }
.post-single__content ul, .post-single__content ol { margin: 16px 0; padding-left: 24px; }
.post-single__content li { margin-bottom: 8px; list-style: disc; }
.post-single__content img { border-radius: 12px; margin: 24px 0; }
.post-single__content strong { color: #232D4B; }
.post-single__share { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #E5E7EB; }
.post-single__share span { font-size: 14px; font-weight: 600; color: #232D4B; }
.post-single__share-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(129,189,81,0.1); color: #81BD51; transition: all 0.2s; }
.post-single__share-btn:hover { background: #81BD51; color: #fff; }
.post-single__sidebar { position: sticky; top: 140px; }
.post-single__sidebar-box { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 24px; margin-bottom: 20px; }
.post-single__sidebar-box h4 { font-size: 16px; font-weight: 700; color: #232D4B; margin-bottom: 12px; }
.post-single__sidebar-box p { font-size: 14px; color: #4B5563; line-height: 1.6; margin-bottom: 16px; }
.post-single__sidebar-box--cta { background: linear-gradient(135deg, rgba(129,189,81,0.08), rgba(129,189,81,0.15)); border-color: rgba(129,189,81,0.25); }
.post-single__related { list-style: none; padding: 0; }
.post-single__related li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.post-single__related li:last-child { border-bottom: none; }
.post-single__related a { font-size: 14px; color: #232D4B; transition: color 0.2s; font-weight: 500; }
.post-single__related a:hover { color: #81BD51; }
.post-single__nav { display: flex; justify-content: space-between; gap: 24px; }
.post-single__nav a { color: #81BD51; font-weight: 600; transition: opacity 0.2s; }
.post-single__nav a:hover { opacity: 0.8; }
.btn--sm { padding: 10px 20px; font-size: 14px; }

/* ============================================================
   NEW VISUAL PATTERNS (WOW EFFECT)
   ============================================================ */

/* --- A) Image Band - full-width photo with overlay text --- */
.image-band { position: relative; min-height: 360px; display: flex; align-items: center; overflow: hidden; }
.image-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.image-band__overlay { position: relative; z-index: 1; max-width: 600px; padding: 48px 40px; background: rgba(255,255,255,0.92); border-radius: 12px; margin-left: 7%; }
.image-band__overlay h2 { font-size: 32px; line-height: 1.25; margin-bottom: 12px; }
.image-band__overlay p { font-size: 16px; color: #4B5563; line-height: 1.7; }
.image-band__overlay .trust-points { margin-top: 16px; }

/* --- B) V-Timeline - vertical axis with alternating steps --- */
.v-timeline { position: relative; padding-left: 40px; max-width: 720px; margin: 0 auto; }
.v-timeline::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 0; width: 3px; background: linear-gradient(#81BD51, #232D4B); border-radius: 2px; }
.v-timeline__node { position: relative; margin-bottom: 36px; padding-left: 32px; }
.v-timeline__node:last-child { margin-bottom: 0; }
.v-timeline__node::before { content: attr(data-step); position: absolute; left: -40px; width: 32px; height: 32px; border-radius: 50%; background: #81BD51; color: #fff; display: grid; place-items: center; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; }
.v-timeline__node h4 { font-size: 18px; font-weight: 700; color: #232D4B; margin-bottom: 4px; }
.v-timeline__node p { font-size: 15px; color: #4B5563; line-height: 1.6; }

/* --- C) Big Quote - large statement/quote block --- */
.big-quote { text-align: center; padding: 32px 24px; max-width: 800px; margin: 0 auto; }
.big-quote__text { font-family: 'Inter', sans-serif; font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.25; color: #232D4B; }
.big-quote__text span { color: #81BD51; }
.big-quote__sub { margin-top: 16px; font-size: 18px; color: #4B5563; line-height: 1.6; }

/* --- D) Accent List - cards with left border accent --- */
.accent-list { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin: 0 auto; }
.accent-list__item { display: flex; gap: 20px; align-items: flex-start; padding: 24px 28px; background: #fff; border-radius: 12px; border-left: 4px solid #81BD51; box-shadow: 0 2px 12px rgba(35,45,75,0.06); transition: transform 0.25s, box-shadow 0.25s; }
.accent-list__item:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(35,45,75,0.1); }
.accent-list__item h4 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #232D4B; }
.accent-list__item p { margin: 0; color: #4B5563; font-size: 15px; line-height: 1.6; }
.accent-list--dark { max-width: 100%; }
.accent-list--dark .accent-list__item { background: rgba(255,255,255,0.07); border-left-color: #81BD51; box-shadow: none; }
.accent-list--dark .accent-list__item:hover { background: rgba(255,255,255,0.12); }
.accent-list--dark .accent-list__item h4 { color: #fff; }
.accent-list--dark .accent-list__item p { color: rgba(255,255,255,0.7); }

/* --- E) Asym Split - asymmetric 2:1 grid --- */
.asym-split { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.asym-split--flip { grid-template-columns: 1fr 2fr; }
.asym-split__side { padding: 32px; background: rgba(129,189,81,0.06); border-radius: 16px; border: 1px solid rgba(129,189,81,0.15); }
.asym-split__side h3 { font-size: 20px; margin-bottom: 12px; }
.asym-split__side p { font-size: 15px; color: #4B5563; line-height: 1.6; }
.asym-split__side .trust-points { margin-top: 16px; }

/* --- Glass Cards 4-col grid --- */
.glass-cards-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* --- F) Mesh Counters - large gradient numbers on dark bg --- */
.mesh-counters { background: #232D4B; padding: 40px 0; position: relative; overflow: hidden; }
.mesh-counters::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(129,189,81,0.15), transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(210,229,225,0.1), transparent 50%); pointer-events: none; }
.mesh-counters h2 { color: #fff; text-align: center; margin-bottom: 40px; position: relative; z-index: 1; }
.mesh-counters__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; position: relative; z-index: 1; text-align: center; }
.mesh-counters__item-num { font-family: 'Inter', sans-serif; font-size: clamp(40px, 6vw, 64px); font-weight: 800; background: linear-gradient(135deg, #81BD51, #D2E5E1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; }
.mesh-counters__item-label { color: rgba(255,255,255,0.8); font-size: 15px; margin-top: 4px; }

/* --- New patterns responsive --- */
@media (max-width: 768px) {
    .image-band { min-height: 280px; }
    .image-band__overlay { margin: 0 16px; padding: 32px 24px; max-width: 100%; }
    .image-band__overlay h2 { font-size: 24px; }
    .v-timeline { padding-left: 32px; }
    .v-timeline::before { left: 12px; }
    .v-timeline__node::before { left: -32px; width: 28px; height: 28px; font-size: 12px; }
    .big-quote { padding: 40px 16px; }
    .big-quote__text { font-size: 24px; }
    .accent-list__item { padding: 20px; }
    .asym-split, .asym-split--flip { grid-template-columns: 1fr; }
    .mesh-counters { padding: 48px 0; }
    .mesh-counters__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .glass-cards-4col { grid-template-columns: 1fr; }
}

/* --- Subpage Responsive --- */
@media (max-width: 768px) {
    .page-hero h1 { font-size: 28px !important; line-height: 1.2 !important; }
    .page-hero p { font-size: 16px; }
    .section-title { font-size: 26px !important; line-height: 1.3 !important; }
    .section-two-col { grid-template-columns: 1fr; gap: 32px; }
    .section-two-col__image { order: -1; }
    .reason-cards { grid-template-columns: 1fr; }
    .audience-cards { grid-template-columns: 1fr; }
    .pillar-cards { grid-template-columns: 1fr; }
    .model-grid { grid-template-columns: 1fr; }
    .steps-horizontal { grid-template-columns: 1fr; }
    .steps-horizontal::before { display: none; }
    .effects-grid { grid-template-columns: 1fr; }
    .faq-big__nav { gap: 6px; padding-bottom: 24px; margin-bottom: 24px; }
    .faq-big__nav-item { font-size: 13px; padding: 8px 14px; }
    .contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-featured { grid-template-columns: 1fr; gap: 24px; }
    .blog-featured__body h2 { font-size: 22px; }
    .post-single__layout { grid-template-columns: 1fr; }
    .post-single__sidebar { position: static; }
    .blog-filter { justify-content: flex-start; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .page-hero h1 { font-size: 34px !important; }
    .reason-cards { grid-template-columns: 1fr 1fr; }
    .audience-cards { grid-template-columns: 1fr 1fr; }
    .model-grid { grid-template-columns: 1fr 1fr; }
    .effects-grid { grid-template-columns: 1fr 1fr; }
    .blog-grid { grid-template-columns: 1fr 1fr; }
    .blog-featured { grid-template-columns: 1fr 1fr; }
    .post-single__layout { grid-template-columns: 1fr 260px; gap: 32px; }
}

/* ============================================================
   FIGMA MAKE - SUBPAGE PATTERNS
   ============================================================ */

/* --- SP Hero: Green gradient --- */
.sp-hero--green { background: linear-gradient(135deg, #81BD51, #6fa043); padding: 64px 0 48px; color: #fff; }
.sp-hero--green h1 { color: #fff; font-size: 48px; line-height: 1.2; max-width: 700px; }
.sp-hero--green p { color: rgba(255,255,255,0.9); font-size: 18px; line-height: 1.65; max-width: 600px; margin-top: 16px; }
.sp-hero--green .btn--primary { background: #fff; color: #232D4B; }
.sp-hero--green .btn--primary:hover { background: #f0f0f0; }
.sp-hero--green .btn--outline { border-color: rgba(255,255,255,0.5); color: #fff; }
.sp-hero--green .btn--outline:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

/* --- SP Hero: Navy gradient --- */
.sp-hero--navy { background: linear-gradient(135deg, #232D4B, rgba(35,45,75,0.9)); padding: 64px 0 48px; color: #fff; }
.sp-hero--navy h1 { color: #fff; font-size: 48px; line-height: 1.2; max-width: 700px; }
.sp-hero--navy p { color: rgba(255,255,255,0.85); font-size: 18px; line-height: 1.65; max-width: 600px; margin-top: 16px; }

/* --- SP Hero: White simple --- */
.sp-hero--white { background: #fff; padding: 64px 0 40px; }
.sp-hero--white h1 { font-size: 48px; line-height: 1.2; max-width: 700px; }
.sp-hero--white p { font-size: 18px; line-height: 1.65; max-width: 600px; margin-top: 16px; color: #4B5563; }

/* --- SP Breadcrumb (inside hero) --- */
.sp-breadcrumb { font-size: 14px; margin-bottom: 16px; }
.sp-breadcrumb a { color: rgba(255,255,255,0.6); transition: color 0.2s; }
.sp-breadcrumb a:hover { color: #fff; }
.sp-breadcrumb__sep { margin: 0 8px; opacity: 0.5; }
.sp-breadcrumb__current { opacity: 0.8; }
.sp-hero--white .sp-breadcrumb a { color: #81BD51; }
.sp-hero--white .sp-breadcrumb__sep { color: #D1D5DC; }
.sp-hero--white .sp-breadcrumb__current { color: #4B5563; }

/* --- SP Section --- */
.sp-section { padding: 48px 0; }
.sp-section--alt { background: rgba(210,229,225,0.2); }
.sp-section--white { background: #fff; }
.sp-section--gray { background: #F9FAFB; }
.sp-section--navy { background: linear-gradient(135deg, #232D4B, rgba(35,45,75,0.9)); }
.sp-section--navy h2, .sp-section--navy h3, .sp-section--navy h4 { color: #fff; }
.sp-section--navy p { color: rgba(255,255,255,0.8); }
.sp-section--green-cta { background: linear-gradient(135deg, #81BD51, #6fa043); padding: 40px 0; text-align: center; }
.sp-section--green-cta h2 { color: #fff; margin-bottom: 16px; }
.sp-section--green-cta p { color: rgba(255,255,255,0.9); margin-bottom: 24px; }

/* --- SP Section Header --- */
.sp-sh { text-align: center; margin-bottom: 48px; }
.sp-sh h2 { margin-bottom: 16px; }
.sp-sh p { font-size: 18px; color: #4B5563; line-height: 1.65; max-width: 640px; margin: 0 auto; }
.sp-section--navy .sp-sh p { color: rgba(255,255,255,0.8); }

/* --- SP Section Header (left aligned) --- */
.sp-sh--left { text-align: left; }
.sp-sh--left p { margin: 0; }

/* --- SP Icon Cards Grid (green circle icons) --- */
.sp-icon-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sp-icon-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 32px; transition: transform 0.25s, box-shadow 0.25s; }
.sp-icon-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.sp-icon-card__icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(129,189,81,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.sp-icon-card__icon svg { width: 28px; height: 28px; stroke: #81BD51; fill: none; }
.sp-icon-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.sp-icon-card p { font-size: 14px; color: #4B5563; line-height: 1.7; }

/* Two-column variant */
.sp-icon-cards--2col { grid-template-columns: repeat(2, 1fr); }

/* --- SP Day Cards (nauka w praktyce) --- */
.sp-day-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sp-day-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; }
.sp-day-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.sp-day-card__img { height: 200px; overflow: hidden; }
.sp-day-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.sp-day-card:hover .sp-day-card__img img { transform: scale(1.05); }
.sp-day-card__body { padding: 24px; }
.sp-day-card__body h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.sp-day-card__body p { font-size: 14px; color: #4B5563; line-height: 1.7; }
.sp-day-card__note { font-size: 13px; color: #81BD51; font-weight: 600; margin-top: 12px; }

/* --- SP Promo Banner --- */
.sp-promo { background: linear-gradient(135deg, #81BD51, #5a9a33); border-radius: 16px; padding: 32px 40px; text-align: center; color: #fff; margin: 32px 0; position: relative; overflow: hidden; }
.sp-promo__badge { display: inline-block; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; padding: 4px 16px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.sp-promo h3 { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.sp-promo p { font-size: 15px; color: rgba(255,255,255,0.9); }
.sp-promo small { display: block; font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 8px; }

/* --- SP Info Columns (rok szkolny) --- */
.sp-info-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.sp-info-col { padding: 32px; }
.sp-info-col__icon { width: 64px; height: 64px; border-radius: 16px; background: rgba(210,229,225,0.3); border: 1px solid #E5E7EB; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.sp-info-col__icon svg { width: 28px; height: 28px; stroke: #81BD51; fill: none; }
.sp-info-col__label { font-size: 14px; color: #4B5563; margin-bottom: 4px; }
.sp-info-col__value { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: #232D4B; }
.sp-info-col__sub { font-size: 13px; color: #4B5563; margin-top: 4px; }

/* --- SP Document Cards --- */
.sp-doc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sp-doc-card { display: flex; gap: 16px; align-items: flex-start; padding: 24px; background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; transition: transform 0.2s; }
.sp-doc-card:hover { transform: translateY(-2px); }
.sp-doc-card__num { width: 40px; height: 40px; border-radius: 50%; background: rgba(129,189,81,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Inter', sans-serif; font-weight: 700; color: #81BD51; font-size: 16px; }
.sp-doc-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.sp-doc-card p { font-size: 13px; color: #4B5563; line-height: 1.5; }

/* --- SP Two-Card Compare (1:1 vs grupowe) --- */
.sp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.sp-compare__card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 32px; display: flex; flex-direction: column; }
.sp-compare__card--featured { border-color: #81BD51; }
.sp-compare__card h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.sp-compare__card .sp-compare__sub { font-size: 14px; color: #4B5563; margin-bottom: 20px; }
.sp-compare__list { list-style: none; flex: 1; }
.sp-compare__list li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-size: 14px; color: #4B5563; line-height: 1.6; }
.sp-compare__list svg { width: 20px; height: 20px; stroke: #81BD51; fill: none; flex-shrink: 0; margin-top: 2px; }
.sp-compare__footer { margin-top: 20px; font-size: 13px; color: #4B5563; font-style: italic; }

/* --- SP Speaker Cards (wykłady inspiracyjne) --- */
.sp-speaker-cards { display: flex; flex-direction: column; gap: 32px; }
.sp-speaker-card { display: grid; grid-template-columns: 200px 1fr; gap: 32px; background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; overflow: hidden; padding: 32px; transition: transform 0.25s, box-shadow 0.25s; }
.sp-speaker-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.sp-speaker-card__img { width: 200px; height: 200px; border-radius: 12px; overflow: hidden; }
.sp-speaker-card__img img { width: 100%; height: 100%; object-fit: cover; }
.sp-speaker-card__body h3 { font-size: 20px; font-weight: 700; color: #81BD51; margin-bottom: 2px; }
.sp-speaker-card__role { font-size: 14px; color: #4B5563; margin-bottom: 12px; }
.sp-speaker-card__topic { font-size: 15px; font-weight: 600; color: #232D4B; margin-bottom: 8px; }
.sp-speaker-card__desc { font-size: 14px; color: #4B5563; line-height: 1.7; }
.sp-speaker-card__tags { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.sp-speaker-card__tag { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; background: rgba(129,189,81,0.1); color: #5a8a33; border: 1px solid rgba(129,189,81,0.2); }

/* --- SP Topics Grid (mentoring topics) --- */
.sp-topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sp-topic { display: flex; gap: 16px; align-items: flex-start; }
.sp-topic__icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(129,189,81,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-topic__icon svg { width: 24px; height: 24px; stroke: #81BD51; fill: none; }
.sp-topic h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.sp-topic p { font-size: 14px; color: #4B5563; line-height: 1.6; }

/* --- SP Pricing Vertical --- */
.sp-pricing-list { display: flex; flex-direction: column; gap: 32px; max-width: 700px; margin: 0 auto; }
.sp-pricing-item { background: #fff; border: 2px solid #E5E7EB; border-radius: 16px; padding: 36px; position: relative; }
.sp-pricing-item--featured { border-color: #81BD51; box-shadow: 0 20px 25px rgba(0,0,0,0.1); }
.sp-pricing-item__head { margin-bottom: 20px; }
.sp-pricing-item__name { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #4B5563; text-transform: uppercase; letter-spacing: 0.5px; }
.sp-pricing-item__title { font-size: 24px; font-weight: 700; color: #232D4B; margin-top: 4px; }
.sp-pricing-item__price { font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 800; color: #232D4B; line-height: 1; margin: 16px 0; }
.sp-pricing-item__price span { font-size: 16px; font-weight: 500; color: #4B5563; }
.sp-pricing-item__label { font-size: 13px; color: #4B5563; margin-bottom: 8px; }
.sp-pricing-item__features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 20px 0; }
.sp-pricing-item__feat { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #4B5563; }
.sp-pricing-item__feat svg { width: 18px; height: 18px; stroke: #81BD51; fill: none; flex-shrink: 0; }
.sp-pricing-item__for { font-size: 14px; color: #4B5563; padding: 16px; background: rgba(210,229,225,0.2); border-radius: 10px; margin: 16px 0; }
.sp-pricing-item__for strong { color: #232D4B; }
.sp-pricing-item__btn { display: block; width: 100%; padding: 14px; border: 2px solid #232D4B; border-radius: 10px; background: transparent; color: #232D4B; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; text-align: center; transition: all 0.3s; }
.sp-pricing-item__btn:hover { background: #81BD51; border-color: #81BD51; color: #fff; }
.sp-pricing-item--featured .sp-pricing-item__btn { background: #81BD51; border-color: #81BD51; color: #fff; }
.sp-pricing-item--featured .sp-pricing-item__btn:hover { background: #6ea842; }
.sp-pricing-item__note { font-size: 13px; color: #4B5563; margin-top: 12px; text-align: center; }
.sp-pricing-item__warn { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #D97706; margin-top: 12px; }

/* --- SP Checklist (co jest w cenie) --- */
.sp-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sp-checklist__item { display: flex; gap: 16px; align-items: flex-start; }
.sp-checklist__item svg { width: 24px; height: 24px; stroke: #81BD51; fill: none; flex-shrink: 0; margin-top: 2px; }
.sp-checklist__item h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.sp-checklist__item p { font-size: 14px; color: #4B5563; line-height: 1.6; }

/* --- SP Qualification Cards --- */
.sp-qual-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sp-qual-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 28px; transition: transform 0.2s; }
.sp-qual-card:hover { transform: translateY(-2px); }
.sp-qual-card__badge { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.sp-qual-card__badge--green { background: rgba(129,189,81,0.12); color: #5a8a33; }
.sp-qual-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.sp-qual-card__sub { font-size: 14px; color: #4B5563; font-weight: 600; margin-bottom: 8px; }
.sp-qual-card p { font-size: 14px; color: #4B5563; line-height: 1.6; }

/* --- SP Numbered Steps (jak to działa) --- */
.sp-steps { max-width: 700px; margin: 0 auto; }
.sp-step { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 32px; padding: 24px; background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; transition: transform 0.2s; }
.sp-step:hover { transform: translateY(-2px); }
.sp-step__num { width: 48px; height: 48px; border-radius: 50%; background: #81BD51; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: #fff; flex-shrink: 0; }
.sp-step h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.sp-step p { font-size: 14px; color: #4B5563; line-height: 1.6; }

/* --- SP Payment Rules (zasady płatności) --- */
.sp-rules { max-width: 700px; margin: 0 auto; }
.sp-rule { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #E5E7EB; }
.sp-rule:last-child { border-bottom: none; }
.sp-rule svg { width: 24px; height: 24px; stroke: #81BD51; fill: none; flex-shrink: 0; margin-top: 2px; }
.sp-rule h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.sp-rule p { font-size: 14px; color: #4B5563; line-height: 1.6; }

/* --- SP FAQ Categories --- */
.sp-faq-cat { margin-bottom: 48px; }
.sp-faq-cat__head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sp-faq-cat__icon { width: 40px; height: 40px; border-radius: 10px; background: #81BD51; display: flex; align-items: center; justify-content: center; }
.sp-faq-cat__icon svg { width: 22px; height: 22px; stroke: #fff !important; fill: none; }
.sp-faq-cat__head h3 { font-size: 22px; font-weight: 700; }
.sp-faq-item { border: 1px solid #E5E7EB; border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.sp-faq-item[open] { border-color: #E5E7EB; }
.sp-faq-q { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: #232D4B; list-style: none; }
.sp-faq-q::-webkit-details-marker { display: none; }
.sp-faq-q::marker { display: none; content: ''; }
.sp-faq-q__icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sp-faq-q__icon svg { width: 20px; height: 20px; stroke: #4B5563; fill: none; transition: transform 0.2s; }
.sp-faq-item[open] .sp-faq-q__icon svg { transform: rotate(180deg); }
.sp-faq-a { padding: 0 20px 16px; font-size: 14px; color: #4B5563; line-height: 1.7; }
.sp-faq-a p { margin-bottom: 8px; }
.sp-faq-a ul { margin: 8px 0; padding-left: 20px; }
.sp-faq-a ul li { list-style: disc; margin-bottom: 4px; }

/* --- SP Profile Cards (zainteresowania) --- */
.sp-profiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sp-profile { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 28px; transition: transform 0.2s; }
.sp-profile:hover { transform: translateY(-2px); }
.sp-profile h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.sp-profile > p { font-size: 14px; color: #4B5563; line-height: 1.6; margin-bottom: 16px; }
.sp-profile__label { font-size: 13px; font-weight: 600; color: #4B5563; margin-bottom: 8px; }
.sp-profile__list { list-style: none; padding: 0; }
.sp-profile__list li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #4B5563; padding: 3px 0; }
.sp-profile__list li::before { content: '•'; color: #81BD51; font-weight: 700; }

/* --- SP Subject Cards --- */
.sp-subjects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sp-subject { padding: 20px; border: 1px solid #E5E7EB; border-radius: 12px; transition: border-color 0.2s; }
.sp-subject:hover { border-color: #81BD51; }
.sp-subject h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.sp-subject p { font-size: 13px; color: #4B5563; line-height: 1.5; }

/* --- SP Team Cards --- */
.sp-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.sp-team-member { text-align: center; }
.sp-team-member__img { width: 160px; height: 160px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; border: 3px solid #E5E7EB; }
.sp-team-member__img img { width: 100%; height: 100%; object-fit: cover; }
.sp-team-member h3 { font-size: 18px; font-weight: 700; margin-bottom: 2px; }
.sp-team-member__role { font-size: 14px; color: #81BD51; font-weight: 600; margin-bottom: 8px; }
.sp-team-member__title { font-size: 13px; color: #4B5563; margin-bottom: 8px; font-style: italic; }
.sp-team-member p { font-size: 14px; color: #4B5563; line-height: 1.6; }

/* --- SP Director Section --- */
.sp-director { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.sp-director__img { width: 100%; border-radius: 16px; overflow: hidden; }
.sp-director__img img { width: 100%; height: auto; border-radius: 16px; }
.sp-director__name { font-size: 14px; font-weight: 600; color: #232D4B; margin-top: 12px; }
.sp-director__title { font-size: 13px; color: #4B5563; }
.sp-director__content h3 { font-size: 28px; font-weight: 700; margin-bottom: 16px; }
.sp-director__content p { font-size: 16px; color: #4B5563; line-height: 1.7; margin-bottom: 16px; }
.sp-director__quote { font-family: 'Inter', sans-serif; font-size: 18px; font-style: italic; color: #232D4B; line-height: 1.6; padding: 24px; background: rgba(210,229,225,0.2); border-left: 4px solid #81BD51; border-radius: 0 12px 12px 0; margin-top: 24px; }

/* --- SP Audience Cards (dla kogo) --- */
.sp-audience { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sp-audience__item { display: flex; gap: 16px; align-items: flex-start; padding: 24px; background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; transition: transform 0.2s; }
.sp-audience__item:hover { transform: translateY(-2px); }
.sp-audience__item h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.sp-audience__item p { font-size: 14px; color: #4B5563; line-height: 1.6; }

/* --- SP Philosophy Cards (dark bg) --- */
.sp-philosophy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sp-philosophy__card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 28px; }
.sp-philosophy__card h3 { color: #81BD51; font-size: 16px; margin-bottom: 4px; }
.sp-philosophy__card h4 { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 12px; font-weight: 400; }
.sp-philosophy__card p { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.7; }

/* --- SP Ecosystem Cards --- */
.sp-ecosystem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sp-ecosystem__card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 28px; transition: transform 0.25s, box-shadow 0.25s; }
.sp-ecosystem__card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.sp-ecosystem__card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.sp-ecosystem__card p { font-size: 14px; color: #4B5563; line-height: 1.6; }

/* --- SP CTA Section --- */
.sp-cta { text-align: center; }
.sp-cta h2 { margin-bottom: 16px; }
.sp-cta p { font-size: 18px; color: rgba(255,255,255,0.9); margin-bottom: 24px; max-width: 600px; margin-left: auto; margin-right: auto; }
.sp-cta .btn--primary { background: #fff; color: #232D4B; }
.sp-cta .btn--primary:hover { background: #f0f0f0; }
.sp-cta .btn--outline { border-color: rgba(255,255,255,0.5); color: #fff; margin-left: 16px; }
.sp-cta .btn--outline:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

/* --- SP Obligation Cards --- */
.sp-obligations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sp-obligation { display: flex; gap: 16px; align-items: flex-start; padding: 24px; background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; }
.sp-obligation__icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(129,189,81,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-obligation__icon svg { width: 20px; height: 20px; stroke: #81BD51; fill: none; }
.sp-obligation h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.sp-obligation p { font-size: 13px; color: #4B5563; line-height: 1.5; }

/* --- SP Highlight Callout (partnership note) --- */
.sp-callout { background: linear-gradient(135deg, rgba(129,189,81,0.08), rgba(129,189,81,0.15)); border: 2px solid rgba(129,189,81,0.2); border-radius: 16px; padding: 24px 32px; text-align: center; }
.sp-callout p { font-size: 15px; color: #232D4B; line-height: 1.6; }
.sp-callout strong { color: #81BD51; }

/* --- SP Dev Support Cards (with images) --- */
.sp-support-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sp-support-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; overflow: hidden; transition: transform 0.2s; }
.sp-support-card:hover { transform: translateY(-2px); }
.sp-support-card__img { height: 160px; overflow: hidden; }
.sp-support-card__img img { width: 100%; height: 100%; object-fit: cover; }
.sp-support-card__body { padding: 20px; }
.sp-support-card__body h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.sp-support-card__body p { font-size: 14px; color: #4B5563; line-height: 1.6; }

/* --- SP Link Note (inline link reference) --- */
.sp-link-note { text-align: center; margin-top: 16px; font-size: 14px; color: #4B5563; }
.sp-link-note a { color: #81BD51; font-weight: 600; }
.sp-link-note a:hover { color: #6ea842; }

/* --- SP Highlight Important --- */
.sp-important { background: rgba(129,189,81,0.08); border: 1px solid rgba(129,189,81,0.2); border-radius: 12px; padding: 16px 24px; margin: 24px 0; font-size: 14px; color: #232D4B; }
.sp-important strong { color: #81BD51; }

/* --- SP Responsive --- */
@media (max-width: 768px) {
    .sp-hero--green, .sp-hero--navy, .sp-hero--white { padding: 48px 0 32px; }
    .sp-hero--green h1, .sp-hero--navy h1, .sp-hero--white h1 { font-size: 32px !important; }
    .sp-icon-cards, .sp-icon-cards--2col { grid-template-columns: 1fr; }
    .sp-day-cards { grid-template-columns: 1fr; }
    .sp-compare { grid-template-columns: 1fr; }
    .sp-speaker-card { grid-template-columns: 1fr; }
    .sp-speaker-card__img { width: 100%; height: 200px; }
    .sp-topics { grid-template-columns: 1fr; }
    .sp-info-cols { grid-template-columns: 1fr; }
    .sp-doc-cards { grid-template-columns: 1fr; }
    .sp-profiles { grid-template-columns: 1fr; }
    .sp-subjects { grid-template-columns: 1fr 1fr; }
    .sp-team { grid-template-columns: 1fr; }
    .sp-director { grid-template-columns: 1fr; }
    .sp-audience { grid-template-columns: 1fr; }
    .sp-philosophy { grid-template-columns: 1fr; }
    .sp-ecosystem { grid-template-columns: 1fr; }
    .sp-checklist { grid-template-columns: 1fr; }
    .sp-qual-cards { grid-template-columns: 1fr; }
    .sp-obligations { grid-template-columns: 1fr; }
    .sp-support-cards { grid-template-columns: 1fr; }
    .sp-pricing-item__features { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .sp-icon-cards { grid-template-columns: repeat(2, 1fr); }
    .sp-subjects { grid-template-columns: repeat(3, 1fr); }
    .sp-team { grid-template-columns: repeat(2, 1fr); }
    .sp-ecosystem { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   WEBINAR ARCHIVE PAGE (Figma Make 1:1 - Xr() function)
   New 5-section layout: Hero, Featured, Harmonogram, Why, CTA
   ============================================================ */

/* --- 1. Hero (sp-wb-hero) --- */
.sp-wb-hero {
    background: linear-gradient(135deg, #232D4B 0%, #1a2235 100%);
    color: #fff;
    padding: 80px 0 72px;
}
.sp-wb-hero h1 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 20px;
}
.sp-wb-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(129,189,81,0.15);
    color: #81BD51;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border-radius: 100px;
}
.sp-wb-hero__pill-dot {
    width: 8px;
    height: 8px;
    background: #81BD51;
    border-radius: 50%;
    animation: sp-pulse 2s ease-in-out infinite;
}
.sp-wb-hero__sub {
    font-size: 18px;
    color: rgba(255,255,255,0.75);
    margin-top: 16px;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.sp-wb-hero__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.sp-wb-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.sp-wb-hero__btn--green {
    background: #81BD51;
    color: #fff;
}
.sp-wb-hero__btn--green:hover {
    background: #6ea842;
    color: #fff;
    transform: translateY(-2px);
}
.sp-wb-hero__btn--outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
}
.sp-wb-hero__btn--outline:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* --- 2. Featured Speakers (sp-wb-featured) --- */
.sp-wb-featured {
    padding: 64px 0;
    background: #fff;
}
.sp-wb-featured__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.sp-wb-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(35,45,75,0.15);
    color: #fff;
}
.sp-wb-card--green {
    background: linear-gradient(135deg, #6ea842 0%, #81BD51 100%);
}
.sp-wb-card--navy {
    background: #232D4B;
}
.sp-wb-card__inner {
    display: flex;
    flex-direction: row;
    min-height: 480px;
}
.sp-wb-card__photo {
    width: 40%;
    flex-shrink: 0;
}
.sp-wb-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sp-wb-card__body {
    flex: 1;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.sp-wb-card__badge {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    border-radius: 100px;
    margin-bottom: 12px;
    align-self: flex-start;
}
.sp-wb-card__badge--navy {
    background: rgba(129,189,81,0.25);
    color: #81BD51;
}
.sp-wb-card__date {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
}
.sp-wb-card__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    color: #fff;
}
.sp-wb-card__subtitle {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
    margin-bottom: 16px;
}
.sp-wb-card__info {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}
.sp-wb-card__info-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    margin: 0 0 2px;
}
.sp-wb-card__info-role {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin: 0 0 6px;
}
.sp-wb-card__info-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
    margin: 0;
}
.sp-wb-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    margin-top: auto;
}
.sp-wb-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}
.sp-wb-card__meta-item svg {
    opacity: 0.7;
}
.sp-wb-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.sp-wb-card__cta--white {
    background: #fff;
    color: #232D4B;
}
.sp-wb-card__cta--white:hover {
    background: #f0fdf0;
    color: #232D4B;
    transform: translateY(-2px);
}
.sp-wb-card__cta--outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
}
.sp-wb-card__cta--outline:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* --- 3. Harmonogram (sp-wb-schedule) --- */
.sp-wb-schedule {
    background: #F9FAFB;
    padding: 80px 0;
}
.sp-wb-schedule__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}
.sp-wb-scard {
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 24px;
    transition: box-shadow 0.3s, transform 0.3s;
}
.sp-wb-scard:hover {
    box-shadow: 0 8px 24px rgba(35,45,75,0.10);
    transform: translateY(-2px);
}
.sp-wb-scard__cal {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    background: #232D4B;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sp-wb-scard__cal-day {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.sp-wb-scard__cal-month {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sp-wb-scard__content {
    flex: 1;
    min-width: 0;
}
.sp-wb-scard__date {
    font-size: 13px;
    color: #81BD51;
    font-weight: 600;
    margin: 0 0 4px;
}
.sp-wb-scard__title {
    font-size: 17px;
    font-weight: 600;
    color: #232D4B;
    margin: 0 0 6px;
    line-height: 1.3;
}
.sp-wb-scard__host {
    font-size: 14px;
    color: #6B7280;
    margin: 0 0 4px;
}
.sp-wb-scard__audience {
    color: #9CA3AF;
}
.sp-wb-scard__duration {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #9CA3AF;
}
.sp-wb-scard__duration svg {
    stroke: #9CA3AF;
}

/* --- 4. Dlaczego warto (sp-wb-why) --- */
.sp-wb-why {
    padding: 80px 0;
    background: #fff;
}
.sp-wb-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 960px;
    margin: 0 auto;
}
.sp-wb-why__item {
    text-align: center;
}
.sp-wb-why__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(129,189,81,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.sp-wb-why__item h3 {
    font-size: 18px;
    font-weight: 700;
    color: #232D4B;
    margin-bottom: 8px;
}
.sp-wb-why__item p {
    font-size: 15px;
    color: #6B7280;
    line-height: 1.6;
}

/* --- 5. Archiwum nagrań (sp-wb-archive) --- */
.sp-wb-archive {
    background: #F9FAFB;
    padding: 64px 0 80px;
}
.sp-wb-archive__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1024px;
    margin: 0 auto;
}
.sp-wb-archive__card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 24px;
    transition: box-shadow 0.3s, transform 0.3s;
}
.sp-wb-archive__card:hover {
    box-shadow: 0 4px 16px rgba(35,45,75,0.08);
    transform: translateY(-2px);
}
.sp-wb-archive__date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 8px;
}
.sp-wb-archive__card h3 {
    font-size: 17px;
    margin-bottom: 8px;
}
.sp-wb-archive__host {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 12px;
}
.sp-wb-archive__empty {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    padding: 64px 20px;
}
.sp-wb-archive__empty svg {
    margin: 0 auto 24px;
    display: block;
}
.sp-wb-archive__empty h3 {
    font-size: 20px;
    color: #374151;
    margin-bottom: 12px;
}
.sp-wb-archive__empty p {
    font-size: 15px;
    color: #6B7280;
    line-height: 1.6;
}

/* --- 6. CTA (sp-wb-cta) --- */
.sp-wb-cta {
    background: linear-gradient(135deg, #232D4B 0%, #1a2235 100%);
    padding: 80px 0;
}
.sp-wb-cta h2 {
    color: #fff;
    margin-bottom: 16px;
}
.sp-wb-cta__sub {
    font-size: 18px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 32px;
    line-height: 1.6;
}

/* ============================================================
   GREEN STICKY WEBINAR BAR (homepage only)
   ============================================================ */
.sp-webinar-bar {
    position: sticky;
    top: 121px; /* utility 41px + nav 80px */
    z-index: 40;
    background: #81BD51;
    border-bottom: 1px solid #6fa043;
    padding: 10px 0;
}
.sp-webinar-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.sp-webinar-bar__info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}
.sp-webinar-bar__dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: sp-pulse 2s ease-in-out infinite;
}
@keyframes sp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.sp-webinar-bar__sep {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
}
.sp-webinar-bar__title {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-webinar-bar__cta {
    display: inline-block;
    background: #fff;
    color: #81BD51;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 6px;
    transition: background 0.2s, transform 0.2s;
}
.sp-webinar-bar__cta:hover {
    background: #f0fdf0;
    transform: translateY(-1px);
}

/* ============================================================
   HOMEPAGE WEBINAR SECTION (big navy block)
   ============================================================ */
.sp-hp-webinar {
    position: relative;
    background: #232D4B;
    padding: 80px 0;
}

/* --- Header --- */
.sp-hp-webinar__header {
    text-align: center;
    margin-bottom: 64px;
}
.sp-hp-webinar__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(129,189,81,0.2);
    color: #81BD51;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 20px;
    border-radius: 100px;
    margin-bottom: 20px;
}
.sp-hp-webinar__badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #81BD51;
    flex-shrink: 0;
}
.sp-hp-webinar__title {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.sp-hp-webinar__subtitle {
    font-size: 18px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto;
}

/* --- Featured cards (2-col) --- */
.sp-hp-webinar__featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1152px;
    margin: 0 auto 48px;
}
.sp-hp-webinar__card {
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
}
.sp-hp-webinar__card:hover {
    transform: translateY(-4px);
}
.sp-hp-webinar__card--green {
    background: linear-gradient(160deg, #81BD51 0%, #6fa043 100%);
}
.sp-hp-webinar__card--navy {
    background: #1a2235;
    border: 1px solid rgba(255,255,255,0.15);
}

/* --- Card inner (p-6) --- */
.sp-hp-webinar__card-inner {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Label pill */
.sp-hp-webinar__card-label {
    display: inline-block;
    width: fit-content;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
}
.sp-hp-webinar__card-date {
    color: rgba(255,255,255,0.85);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}
.sp-hp-webinar__card-title {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}
.sp-hp-webinar__card-desc {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* --- Speaker box --- */
.sp-hp-webinar__card-speaker {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 16px;
    margin-top: auto;
    margin-bottom: 20px;
}
.sp-hp-webinar__card-speaker-photo {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px;
    max-width: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.sp-hp-webinar__card-speaker-name {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}
.sp-hp-webinar__card-speaker-role {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
}

/* --- Card meta --- */
.sp-hp-webinar__card-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.sp-hp-webinar__card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}
.sp-hp-webinar__card-meta-item svg {
    flex-shrink: 0;
}

/* CTA button (full width) */
.sp-hp-webinar__card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #fff;
    color: #4a7c2e;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 24px;
    border-radius: 12px;
    transition: background 0.2s, transform 0.2s;
    margin-top: auto;
}
.sp-hp-webinar__card-cta:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
}
.sp-hp-webinar__card-cta--outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.2);
}
.sp-hp-webinar__card-cta--outline:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.35);
}

/* --- Upcoming (no wrapper border) --- */
.sp-hp-webinar__upcoming {
    max-width: 1152px;
    margin: 0 auto 48px;
}
.sp-hp-webinar__upcoming-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}
.sp-hp-webinar__upcoming-title svg {
    color: #81BD51;
    flex-shrink: 0;
}
.sp-hp-webinar__upcoming-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.sp-hp-webinar__mini-card {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 20px;
    transition: background 0.2s;
}
.sp-hp-webinar__mini-card:hover {
    background: rgba(255,255,255,0.08);
}
.sp-hp-webinar__mini-date {
    display: block;
    color: #81BD51;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.sp-hp-webinar__mini-title {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
}
.sp-hp-webinar__mini-host {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
}
.sp-hp-webinar__upcoming-link-wrap {
    text-align: center;
    margin-top: 16px;
}
.sp-hp-webinar__upcoming-link {
    color: #81BD51;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.2s;
}
.sp-hp-webinar__upcoming-link:hover {
    color: #a0d975;
}

/* --- Benefits row --- */
.sp-hp-webinar__benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 960px;
    margin: 0 auto 48px;
}
.sp-hp-webinar__benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.sp-hp-webinar__benefit-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(129,189,81,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #81BD51;
}
.sp-hp-webinar__benefit-label {
    color: rgba(255,255,255,0.9);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
}
.sp-hp-webinar__benefit-desc {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
}

/* --- CTA bottom --- */
.sp-hp-webinar__cta-wrap {
    text-align: center;
}
.sp-hp-webinar__cta-btn {
    display: inline-block;
    background: #81BD51;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    padding: 16px 32px;
    border-radius: 12px;
    transition: background 0.2s, transform 0.2s;
}
.sp-hp-webinar__cta-btn:hover {
    background: #6ea842;
    transform: translateY(-2px);
}

/* --- Webinar responsive --- */
@media (max-width: 768px) {
    .sp-webinar-bar { top: 80px; }
    .sp-webinar-bar__sep,
    .sp-webinar-bar__title { display: none; }
    .sp-webinar-bar__inner { gap: 12px; }

    .sp-hp-webinar { padding: 48px 0; }
    .sp-hp-webinar__title { font-size: 32px; }
    .sp-hp-webinar__subtitle { font-size: 16px; }
    .sp-hp-webinar__featured { grid-template-columns: 1fr; }
    .sp-hp-webinar__upcoming-grid { grid-template-columns: 1fr; }
    .sp-hp-webinar__benefits { grid-template-columns: 1fr; gap: 20px; }
    .sp-hp-webinar__card-inner { padding: 20px; }
    .sp-hp-webinar__card-title { font-size: 18px; }
    .sp-hp-webinar__card-speaker-photo { width: 48px !important; height: 48px !important; min-width: 48px; max-width: 48px; }

    /* Webinar archive - sp-wb responsive */
    .sp-wb-hero { padding: 48px 0 56px; }
    .sp-wb-hero h1 { font-size: 36px; line-height: 1.2; }
    .sp-wb-hero__buttons { flex-direction: column; align-items: center; }
    .sp-wb-hero__btn { width: 100%; justify-content: center; }
    .sp-wb-featured__grid { grid-template-columns: 1fr; }
    .sp-wb-card__inner { flex-direction: column; }
    .sp-wb-card__photo { width: 100%; height: 220px; }
    .sp-wb-card__body { padding: 24px; }
    .sp-wb-card__title { font-size: 20px; }
    .sp-wb-schedule { padding: 48px 0; }
    .sp-wb-schedule__grid { grid-template-columns: 1fr; }
    .sp-wb-why { padding: 48px 0; }
    .sp-wb-why__grid { grid-template-columns: 1fr; gap: 32px; }
    .sp-wb-archive { padding: 48px 0; }
    .sp-wb-archive__grid { grid-template-columns: 1fr; }
    .sp-wb-cta { padding: 48px 0; }
}

/* ============================================================
   ŚCIEŻKA AKADEMICKA (ak-*) - Figma Bl() 1:1
   ============================================================ */

/* --- Hero --- */
.ak-hero {
    background: #fff;
    padding: 64px 0 40px;
}
.ak-hero__content {
    max-width: 768px;
}
.ak-hero h1 {
    font-size: 36px;
    line-height: 1.15;
    color: #232D4B;
    margin-bottom: 16px;
}
.ak-hero p {
    font-size: 18px;
    color: #4B5563;
    line-height: 1.7;
    margin-bottom: 24px;
}
.ak-btn-green {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #81BD51;
    color: #fff;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s;
}
.ak-btn-green:hover { background: #6fa043; }

/* --- Sections --- */
.ak-section {
    padding: 48px 0;
    scroll-margin-top: 128px;
}
.ak-section--mint { background: rgba(210,229,225,0.2); }
.ak-section--gray { background: #F9FAFB; }

/* --- Section header (centered) --- */
.ak-header {
    text-align: center;
    margin-bottom: 48px;
}
.ak-header h2 {
    font-size: 30px;
    line-height: 1.2;
    color: #232D4B;
    margin-bottom: 24px;
}
.ak-header p {
    font-size: 18px;
    color: #4B5563;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto;
}

/* --- Icon squares --- */
.ak-icon-sq {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}
.ak-icon-sq--md { width: 48px; height: 48px; }
.ak-icon-sq--lg { width: 56px; height: 56px; }
.ak-icon-sq--sm { width: 40px; height: 40px; border-radius: 8px; }
.ak-icon-sq--green { background: #81BD51; }
.ak-icon-sq--navy  { background: #232D4B; }
.ak-icon-sq--green-tint { background: rgba(129,189,81,0.2); }
.ak-icon-sq--navy-tint  { background: rgba(35,45,75,0.2); }
.ak-icon-sq--white-tint { background: rgba(255,255,255,0.2); }

/* --- Grids --- */
.ak-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ak-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ak-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* --- Cards (white, rounded-2xl, p-8, border) --- */
.ak-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #F3F4F6;
}
.ak-card .ak-icon-sq { margin-bottom: 16px; }
.ak-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #232D4B;
    margin-bottom: 12px;
}
.ak-card p {
    color: #4B5563;
    line-height: 1.7;
    margin: 0;
}

/* --- Profile cards (gradient mint to white) --- */
.ak-card--gradient-mint {
    background: linear-gradient(135deg, #D2E5E1, white);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #F3F4F6;
}
.ak-profile-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.ak-profile-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: #232D4B;
    margin-bottom: 8px;
}
.ak-profile-header p {
    color: #4B5563;
    line-height: 1.7;
    margin: 0 0 16px;
}
.ak-profile-subjects {
    padding-left: 64px;
}
.ak-label {
    font-size: 14px;
    font-weight: 500;
    color: #232D4B;
    margin-bottom: 8px;
}
.ak-profile-subjects ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ak-profile-subjects li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4B5563;
    padding: 2px 0;
}
.ak-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #81BD51;
    border-radius: 50%;
    flex-shrink: 0;
}

/* --- Green callout --- */
.ak-callout-green {
    max-width: 768px;
    margin: 32px auto 0;
    padding: 24px;
    background: linear-gradient(135deg, rgba(129,189,81,0.1), #D2E5E1);
    border: 2px solid rgba(129,189,81,0.3);
    border-radius: 16px;
    text-align: center;
}
.ak-callout-green p {
    color: #232D4B;
    font-weight: 500;
    margin: 0;
}

/* --- Small cards (rounded-xl, p-6) --- */
.ak-card--sm {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #F3F4F6;
}
.ak-card--sm .ak-icon-sq { margin-bottom: 12px; }
.ak-card--sm h3 {
    font-size: 16px;
    font-weight: 600;
    color: #232D4B;
    margin-bottom: 8px;
}
.ak-card--sm p {
    font-size: 12px;
    color: #4B5563;
    line-height: 1.7;
    margin: 0;
}

/* --- Note (text only, centered) --- */
.ak-note {
    margin-top: 32px;
    text-align: center;
}
.ak-note p {
    font-size: 14px;
    color: #4B5563;
    max-width: 640px;
    margin: 0 auto;
}

/* --- Matura cards (gradient backgrounds, stacked) --- */
.ak-matura-stack {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ak-card--gradient-green-light {
    background: linear-gradient(135deg, rgba(129,189,81,0.05), white);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #F3F4F6;
}
.ak-card--gradient-navy-light {
    background: linear-gradient(135deg, rgba(35,45,75,0.05), white);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #F3F4F6;
}
.ak-flex-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.ak-flex-row h3 {
    font-size: 20px;
    font-weight: 600;
    color: #232D4B;
    margin-bottom: 8px;
}
.ak-flex-row p {
    color: #4B5563;
    line-height: 1.7;
    margin: 0;
}

/* --- Wsparcie grid (narrower, centered) --- */
.ak-wsparcie-grid {
    max-width: 896px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* --- Dark navy callout --- */
.ak-callout-navy {
    max-width: 768px;
    margin: 32px auto 0;
    padding: 32px;
    background: linear-gradient(135deg, #232D4B, rgba(35,45,75,0.9));
    border-radius: 16px;
    color: #fff;
}
.ak-callout-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.ak-callout-navy h3 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}
.ak-callout-navy p {
    color: rgba(255,255,255,0.9);
    line-height: 1.7;
    margin: 0;
}

/* --- CTA section (green gradient) --- */
.ak-cta-section {
    padding: 40px 0;
    background: linear-gradient(135deg, #81BD51, #6fa043);
}
.ak-cta-section h2 {
    font-size: 30px;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 24px;
}
.ak-cta-section p {
    font-size: 18px;
    color: rgba(255,255,255,0.9);
    line-height: 1.7;
    margin-bottom: 32px;
}
.ak-cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}
.ak-btn-white {
    display: inline-block;
    padding: 16px 32px;
    background: #fff;
    color: #81BD51;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s;
}
.ak-btn-white:hover { background: #F9FAFB; }
.ak-btn-outline-white {
    display: inline-block;
    padding: 16px 32px;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s;
}
.ak-btn-outline-white:hover { background: rgba(255,255,255,0.1); }

/* --- Wsparcie small card text size (sm = 14px like Figma) --- */
.ak-wsparcie-grid .ak-card--sm p { font-size: 14px; }
.ak-wsparcie-grid .ak-card--sm .ak-icon-sq { margin-bottom: 16px; }

/* --- Ścieżka zawodowa extras --- */
.ak-icon-sq--xl { width: 64px; height: 64px; }
.ak-num { font-size: 24px; font-weight: 700; color: #fff; line-height: 1; }

.ak-callout-light {
    max-width: 768px;
    margin: 32px auto 0;
    padding: 24px;
    background: rgba(210,229,225,0.3);
    border: 1px solid rgba(129,189,81,0.2);
    border-radius: 12px;
}
.ak-callout-light p {
    font-size: 14px;
    color: #374151;
    line-height: 1.7;
    text-align: center;
    margin: 0;
}

.zw-qual-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(129,189,81,0.2);
    color: #81BD51;
    font-size: 12px;
    font-weight: 600;
    border-radius: 9999px;
}

.zw-qual-hidden { display: none !important; }

.zw-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #232D4B;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.zw-toggle-btn:hover { background: rgba(35,45,75,0.9); }

.zw-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.zw-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.zw-check-list li svg { flex-shrink: 0; margin-top: 2px; }
.zw-check-list li p {
    color: #374151;
    line-height: 1.7;
    margin: 0;
}

/* --- Responsive (akademicka + zawodowa) --- */
@media (min-width: 1025px) {
    .ak-hero h1 { font-size: 60px; }
    .ak-header h2 { font-size: 48px; }
    .ak-cta-section h2 { font-size: 36px; }
    .ak-section { padding: 48px 0; }
}
@media (max-width: 1024px) {
    .ak-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .ak-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ak-hero { padding: 64px 0 32px; }
    .ak-hero h1 { font-size: 28px; }
    .ak-section { padding: 32px 0; }
    .ak-grid-3,
    .ak-grid-2,
    .ak-grid-4,
    .ak-wsparcie-grid { grid-template-columns: 1fr; }
    .ak-profile-subjects { padding-left: 0; }
    .ak-profile-header { flex-direction: column; }
    .ak-flex-row { flex-direction: column; gap: 16px; }
    .ak-callout-inner { flex-direction: column; }
    .ak-cta-btns { flex-direction: column; align-items: center; }
    .ak-card { padding: 24px; }
    .ak-card--gradient-mint { padding: 24px; }
    .ak-card--gradient-green-light,
    .ak-card--gradient-navy-light { padding: 24px; }
    .mt-meeting-header { flex-direction: column; }
    .mt-lecture-card .mt-lecture-img { height: 180px; }
    .mt-topic-card { flex-direction: column; }
}

/* ============================================================
   MENTORING PAGE (mt-*) - Figma Rl() 1:1
   ============================================================ */

/* --- Hero (dark navy gradient, 2-col grid) --- */
.mt-hero { background: linear-gradient(135deg, #232D4B, rgba(35,45,75,0.9)); padding: 64px 0 48px; }
.mt-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.5); margin-bottom: 32px; }
.mt-breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
.mt-breadcrumb a:hover { color: #81BD51; }
.mt-breadcrumb span:last-child { color: #fff; font-weight: 500; }
.mt-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.mt-hero__content h1 { font-size: 36px; line-height: 1.15; color: #fff; margin-bottom: 24px; }
.mt-hero__content p { font-size: 20px; color: rgba(255,255,255,0.9); line-height: 1.6; margin-bottom: 32px; }
.mt-hero__btns { display: flex; flex-wrap: wrap; gap: 16px; }
.mt-hero__visual { position: relative; }
.mt-hero__visual img { width: 100%; height: 400px; object-fit: cover; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }

/* --- Hero buttons --- */
.mt-btn-green { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; background: #81BD51; color: #fff; font-weight: 500; border-radius: 8px; transition: background 0.2s; text-decoration: none; }
.mt-btn-green:hover { background: #6fa043; }
.mt-btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; border: 2px solid #fff; color: #fff; font-weight: 500; border-radius: 8px; transition: background 0.2s; text-decoration: none; }
.mt-btn-outline:hover { background: rgba(255,255,255,0.1); }

/* --- Sections --- */
.mt-section { padding: 48px 0; scroll-margin-top: 128px; }
.mt-section--mint { background: rgba(210,229,225,0.2); }
.mt-center { text-align: center; }

/* --- Section header --- */
.mt-sh { text-align: center; max-width: 768px; margin: 0 auto 64px; }
.mt-sh h2 { font-size: 30px; font-weight: 700; color: #232D4B; margin-bottom: 24px; line-height: 1.2; }
.mt-sh p { font-size: 18px; color: #4B5563; line-height: 1.6; }

/* --- Icon squares (self-contained for mentoring) --- */
.mt-sq { display: flex; align-items: center; justify-content: center; border-radius: 12px; flex-shrink: 0; }
.mt-sq--40 { width: 40px; height: 40px; border-radius: 8px; }
.mt-sq--48 { width: 48px; height: 48px; border-radius: 8px; }
.mt-sq--56 { width: 56px; height: 56px; }
.mt-sq--64 { width: 64px; height: 64px; }
.mt-sq--green { background: #81BD51; }
.mt-sq--navy { background: #232D4B; }

/* --- Navigator cards (3-col) --- */
.mt-nav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1152px; margin: 0 auto; }
.mt-nav-card { background: linear-gradient(135deg, #D2E5E1, #fff); padding: 32px; border-radius: 16px; border: 1px solid #F3F4F6; }
.mt-nav-card .mt-sq { margin-bottom: 24px; }
.mt-nav-card h3 { font-size: 20px; font-weight: 600; color: #232D4B; margin-bottom: 12px; }
.mt-nav-card p { font-size: 15px; color: #4B5563; line-height: 1.6; }

/* --- Meeting cards (2-col) --- */
.mt-meet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; max-width: 1152px; margin: 0 auto; }
.mt-meet-card { background: #fff; border-radius: 16px; padding: 32px 40px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.mt-meet--green { border: 2px solid #81BD51; }
.mt-meet--gray { border: 2px solid #E5E7EB; }
.mt-meet-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.mt-meet-head h3 { font-size: 24px; font-weight: 600; color: #232D4B; margin-bottom: 2px; }
.mt-meet-sub { font-size: 15px; color: #4B5563; margin: 0; }
.mt-meet-checks { display: flex; flex-direction: column; gap: 16px; }
.mt-meet-check { display: flex; align-items: flex-start; gap: 12px; }
.mt-meet-check svg { flex-shrink: 0; margin-top: 2px; }
.mt-meet-check p { font-size: 15px; color: #374151; line-height: 1.6; margin: 0; }
.mt-meet-check strong { color: #232D4B; }
.mt-meet-foot { margin-top: 24px; padding: 16px; background: rgba(210,229,225,0.3); border-radius: 8px; }
.mt-meet-foot p { font-size: 14px; color: #374151; margin: 0; }
.mt-meet-foot strong { color: #232D4B; }

/* --- Topic cards (2-col) --- */
.mt-topics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1024px; margin: 0 auto; }
.mt-topic-card { display: flex; align-items: flex-start; gap: 16px; background: linear-gradient(135deg, rgba(210,229,225,0.3), #fff); padding: 24px; border-radius: 12px; border: 1px solid #F3F4F6; }
.mt-topic-card h3 { font-size: 16px; font-weight: 600; color: #232D4B; margin-bottom: 8px; }
.mt-topic-card p { font-size: 14px; color: #4B5563; margin: 0; line-height: 1.5; }

/* --- Lecture cards (vertical stack, horizontal layout) --- */
.mt-lec-stack { display: flex; flex-direction: column; gap: 48px; max-width: 1024px; margin: 0 auto; }
.mt-lec-card { display: grid; grid-template-columns: 1fr 2fr; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); border: 1px solid #F3F4F6; }
.mt-lec-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.mt-lec-body { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.mt-lec-who { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.mt-lec-who h3 { font-size: 24px; font-weight: 600; color: #232D4B; margin-bottom: 2px; }
.mt-lec-role { font-size: 15px; color: #4B5563; margin: 0; }
.mt-lec-topic { font-size: 15px; color: #374151; line-height: 1.6; margin: 0; }
.mt-lec-topic strong { color: #232D4B; }
.mt-lec-desc { font-size: 14px; color: #4B5563; line-height: 1.6; margin: 0; }
.mt-lec-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.mt-tag { display: inline-block; padding: 4px 12px; border-radius: 9999px; font-size: 14px; background: #D2E5E1; color: #232D4B; }
.mt-lec-note { font-size: 16px; color: #4B5563; line-height: 1.6; max-width: 672px; margin: 0 auto 24px; }

/* --- CTA --- */
.mt-cta { padding: 40px 0; background: linear-gradient(135deg, #81BD51, #6fa043); }
.mt-cta-inner { max-width: 896px; margin: 0 auto; text-align: center; }
.mt-cta-inner h2 { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 24px; }
.mt-cta-inner p { font-size: 18px; color: rgba(255,255,255,0.9); line-height: 1.7; margin-bottom: 32px; }
.mt-cta-btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.mt-btn-white { display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; background: #fff; color: #81BD51; font-weight: 500; border-radius: 8px; transition: background 0.2s; text-decoration: none; text-align: center; }
.mt-btn-white:hover { background: #F9FAFB; }
.mt-btn-navy { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; background: #232D4B; color: #fff; font-weight: 500; font-size: 16px; border-radius: 8px; transition: background 0.2s; text-decoration: none; }
.mt-btn-navy:hover { background: rgba(35,45,75,0.9); }

/* --- Responsive --- */
@media (min-width: 1025px) {
    .mt-hero__content h1 { font-size: 60px; }
    .mt-sh h2 { font-size: 48px; }
    .mt-section { padding: 48px 0; }
    .mt-cta-inner h2 { font-size: 36px; }
}
@media (max-width: 1024px) {
    .mt-hero__grid { grid-template-columns: 1fr; gap: 32px; }
    .mt-hero__visual img { height: 300px; }
    .mt-nav-grid { grid-template-columns: repeat(2, 1fr); }
    .mt-meet-grid { grid-template-columns: 1fr; gap: 32px; }
    .mt-lec-card { grid-template-columns: 1fr; }
    .mt-lec-photo img { min-height: 250px; max-height: 300px; }
}
@media (max-width: 768px) {
    .mt-hero { padding: 64px 0 48px; }
    .mt-hero__content h1 { font-size: 28px; }
    .mt-hero__content p { font-size: 17px; }
    .mt-hero__btns { flex-direction: column; }
    .mt-section { padding: 32px 0; }
    .mt-sh { margin-bottom: 32px; }
    .mt-sh h2 { font-size: 24px; }
    .mt-nav-grid,
    .mt-meet-grid,
    .mt-topics-grid { grid-template-columns: 1fr; }
    .mt-meet-card { padding: 24px; }
    .mt-meet-head { flex-direction: column; }
    .mt-lec-body { padding: 24px; }
    .mt-topic-card { flex-direction: column; }
    .mt-cta-btns { flex-direction: column; align-items: center; }
}

/* ============================================================
   WSTEPNY ZAPIS (wz-*) — form page
   ============================================================ */
.wz-form { max-width: 768px; margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); padding: 40px; position: relative; }
.wz-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.wz-form__field { display: flex; flex-direction: column; gap: 6px; }
.wz-form__field--full { grid-column: span 2; }
.wz-form__label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #232D4B; }
.wz-form__input,
.wz-form__select { border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #232D4B; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; }
.wz-form__input::placeholder { color: #9CA3AF; }
.wz-form__input:focus,
.wz-form__select:focus { outline: none; border-color: #81BD51; box-shadow: 0 0 0 3px rgba(129,189,81,0.15); }
.wz-form__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' stroke='%234B5563' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 40px; cursor: pointer; }
.wz-form__checkbox-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.wz-form__checkbox-row input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: #81BD51; cursor: pointer; }
.wz-form__submit { display: block; width: 100%; padding: 16px; background: #81BD51; color: #fff; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; border: none; border-radius: 10px; cursor: pointer; transition: background 0.2s; }
.wz-form__submit:hover { background: #6ea842; }
.wz-form__success { background: #D1FAE5; border: 1px solid #81BD51; border-radius: 12px; padding: 32px 24px; text-align: center; }
.wz-form__error { background: #FEE2E2; border: 1px solid #EF4444; border-radius: 12px; padding: 16px 20px; color: #991B1B; font-size: 14px; }

@media (max-width: 768px) {
    .wz-form { padding: 24px; }
    .wz-form__grid { grid-template-columns: 1fr; }
    .wz-form__field--full { grid-column: span 1; }
}