:root {
  --navy: #0A2540;        /* headings */
  --navy-light: #1E4E8C;  /* titles, labels, accents */
  --navy-soft: rgba(30, 78, 140, 0.14);
  --text: #000000;        /* body text */
  --text-muted: #55606B;  /* meta / fine print */
  --white: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Raleway', sans-serif;
  background: var(--white);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ===== NAVIGATION ===== */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--navy-soft);
  transition: padding 0.3s ease;
}

nav .nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav .logo {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 1px;
  color: var(--navy);
  text-decoration: none;
}

/* gap is tight because the Hungarian nav is long: Főoldal · Mentorálás ·
   Mesterséges Intelligencia · Kommunikáció · Rólam, plus logo and toggle. */
nav .nav-links {
  display: flex;
  gap: 1.4rem;
  list-style: none;
  align-items: center;
}

nav .nav-links a {
  color: var(--navy-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  position: relative;
}

nav .nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--navy-light);
  transition: width 0.3s ease;
}

nav .nav-links a:hover::after { width: 100%; }

/* ===== LANGUAGE TOGGLE ===== */
.lang-toggle {
  display: flex;
  align-items: center;
  border: 1px solid rgba(30, 78, 140, 0.3);
  border-radius: 6px;
  overflow: hidden;
  margin-left: 0.5rem;
}

.lang-toggle button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lang-toggle button.active {
  background: var(--navy-light);
  color: var(--white);
}

.lang-toggle button:not(.active):hover {
  color: var(--navy-light);
  background: rgba(30, 78, 140, 0.08);
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}
.hamburger span {
  width: 25px; height: 2px;
  background: var(--navy);
  transition: 0.3s;
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 37, 64, 0.35);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.nav-overlay.active { display: block; opacity: 1; }

/* ===== SHARED ===== */
section { position: relative; }

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

.section-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--navy-light);
  margin-bottom: 1rem;
  display: block;
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.15rem;
  color: var(--text);
  max-width: 650px;
}

/* ===== STATEMENT SECTIONS (Mentoring / AI / Academic Skills) ===== */
.statement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3.5rem 2rem 2rem;
}

.statement-title {
  font-size: clamp(3.2rem, 8vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 1.25rem;
}

.statement-sub {
  font-size: 1.25rem;
  color: var(--text);
  max-width: 700px;
  line-height: 1.65;
}

/* Body-sized paragraph under a statement title (AI section). */
.statement-body {
  font-size: 1.125rem;
  color: var(--text);
  max-width: 640px;
  line-height: 1.65;
}

/* Paragraph below a statement's photo (Mentoring, Academic Skills). */
.statement-para {
  font-size: 1.125rem;
  color: var(--text);
  max-width: 700px;
  line-height: 1.7;
  margin: 2.25rem auto 0;
}

.highlight { color: var(--navy-light); }

/* ===== MENTORING — FOUR PILLARS =====
   The short rule above each heading echoes the printed brochure, recoloured
   from its gold to the site's navy. */
#mentoring-pillars { padding: 2.5rem 2rem 1rem; }

/* The AI section reuses the pillar component for its approach cards. */
#ai-approach { padding: 2.5rem 2rem 1rem; }

/* On the home page the booking button follows these cards directly. */
/* Card grids run their text right down to the grid's bottom edge, so the
   button needs more clearance here than after a statement's centred text. */
#mentoring-pillars + .booking-cta,
#ai-approach + .booking-cta { padding-top: 3rem; }

/* ===== ACADEMIC SKILLS ===== */
#skills-cards { padding: 2.5rem 2rem 1rem; }

/* Reading and writing detail blocks (subpage only). */
#skills-reading, #skills-writing { padding: 3.5rem 2rem 1rem; }

/* The four communication strands now sit inside the course block. */
.course-strands { margin-bottom: 2.75rem; }

/* Generous top padding: the strand cards above carry no header of their own,
   so this section's eyebrow needs a clear break to read as a new block. */
#communication-sessions { padding: 4.5rem 2rem 2rem; }

#skills-cards + .booking-cta { padding-top: 3rem; }

/* Reading list beneath the session grid. */
.steps-note {
  max-width: 1000px;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--navy-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ===== AI — C.R.A.F.T. ===== */
#ai-craft { padding: 2.5rem 2rem 1rem; }

.craft-list {
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
}

.craft-list li {
  display: flex;
  gap: 1.5rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--navy-soft);
}

.craft-list li:last-child { border-bottom: none; }

.craft-letter {
  flex: none;
  width: 2.25rem;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  color: var(--navy-light);
}

.craft-text h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--navy);
  margin-bottom: 0.35rem;
}

.craft-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}

.pillars-header,
.steps-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.steps-header .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 3.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* Three-across variant for the academic-skills areas. Declared after
   .pillars-grid so it overrides the two-column default; the 768px rule below
   still collapses it to a single column on phones. */
.pillars-grid-3 { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; }

.pillar-card::before {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--navy-light);
  margin-bottom: 1.1rem;
}

.pillar-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.6rem;
}

.pillar-card p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text);
}

/* ===== MENTORING — NINE STEPS ===== */
#mentoring-steps { padding: 2.5rem 2rem 2rem; }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 3.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.steps-col-title {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--navy);
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--navy-light);
  margin-bottom: 0.35rem;
}

.steps-list { list-style: none; }

.steps-list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--navy-soft);
}

.steps-list li:last-child { border-bottom: none; }

.step-num {
  flex: none;
  min-width: 1.6rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--navy-light);
}

.step-text {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text);
}

/* ===== AI GALLERY =====
   Sits directly under the AI sub-heading, so it carries almost no padding of
   its own. On the home page the booking button follows it directly and needs
   the breathing room a statement's bottom padding would normally provide. */
#ai-gallery { padding: 0 2rem; }

#ai-gallery + .booking-cta { padding-top: 2.5rem; }

.about-carousel {
  position: relative;
  width: 100%;
  max-width: 850px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid var(--navy-soft);
}

.about-carousel img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms ease-in-out;
}

.about-carousel img.is-active { opacity: 1; }

.about-carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.about-carousel-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.about-carousel-dots button.is-active {
  background: var(--white);
  transform: scale(1.3);
}

.about-carousel-dots button:focus-visible {
  outline: 2px solid var(--navy-light);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .about-carousel img { transition: none; }
}

/* ===== COURSES ===== */
#courses { padding: 1.75rem 2rem 1rem; }

.courses-header,
.mission-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.courses-header .section-subtitle,
.mission-header .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.courses-grid,
.mission-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.courses-grid .course-card:last-child {
  grid-column: 1 / -1;
  max-width: calc(50% - 1rem);
  justify-self: center;
}

.course-card {
  background: var(--white);
  border: 1px solid var(--navy-soft);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.course-card:hover {
  border-color: var(--navy-light);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(10, 37, 64, 0.1);
}

.course-thumb {
  height: 180px;
  background: linear-gradient(135deg, rgba(30,78,140,0.12), rgba(10,37,64,0.06));
  position: relative;
}

.course-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  padding: 0.3rem 0.75rem;
  background: rgba(30,78,140,0.1);
  border: 1px solid rgba(30,78,140,0.25);
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--navy-light);
}

.course-content { padding: 1.75rem; }

.course-category {
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--navy-light);
  margin-bottom: 0.5rem;
}

.course-content h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.4;
  color: var(--navy-light);
  margin-bottom: 0.5rem;
}

.course-content p {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--navy-soft);
}

.course-meta span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.course-meta .course-price {
  font-weight: 700;
  color: var(--navy-light);
  font-size: 0.9rem;
}

/* ===== MISSION ===== */
#mission { padding: 3rem 2rem 2rem; }

.mission-card {
  background: var(--white);
  border: 1px solid var(--navy-soft);
  border-radius: 16px;
  padding: 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.mission-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--navy-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.mission-card:hover {
  border-color: var(--navy-light);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(10, 37, 64, 0.1);
}

.mission-card:hover::before { transform: scaleX(1); }

.mission-icon {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: rgba(30,78,140,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.mission-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--navy-light);
  margin-bottom: 0.75rem;
}

.mission-card p {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ===== ABOUT ME ===== */
#about-me { padding: 2.5rem 2rem 2rem; }

.founder-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3.5rem;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.founder-photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--navy-soft);
  overflow: hidden;
}

.founder-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.founder-text .section-label { margin-bottom: 0.5rem; }

.founder-name {
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.founder-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy-light);
  margin-bottom: 1.5rem;
}

.founder-bio {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* The longer account below the lead bio, About subpage only. A hairline
   rule separates it without needing a heading of its own. */
.founder-extra {
  max-width: 760px;
  margin: 2.75rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--navy-soft);
  text-align: left;
}

.founder-extra .founder-bio:last-child { margin-bottom: 0; }

/* On the home page the About block is the last thing before the footer, with
   no booking button to space them apart. Matches the 64px clearance used
   between every other block on that page. Does not apply on the About
   subpage, where a booking button sits in between. */
#about-me + footer { margin-top: 2rem; }

/* ===== FOOTER ===== */
footer {
  padding: 3rem 2rem;
  border-top: 1px solid var(--navy-soft);
  text-align: center;
}

footer p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ===== SCROLL REVEAL =====
   Hidden only once JS confirms it is running (html.js). If the script fails
   or is blocked, every .reveal block stays plainly visible rather than
   disappearing. */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .reveal.active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== RESPONSIVE ===== */
/* Between the phone drawer (768px) and full desktop, the five-item Hungarian
   nav is the widest thing on the page, and three cards across get too narrow. */
@media (max-width: 1000px) {
  nav .nav-links { gap: 1rem; }
  nav .nav-links a { font-size: 0.92rem; }
  .pillars-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 968px) {
  .founder-layout { grid-template-columns: 220px 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  .hamburger { display: flex; }

  .courses-grid, .mission-grid { grid-template-columns: 1fr; }

  .courses-grid .course-card:last-child {
    max-width: 100%;
    grid-column: auto;
  }

  .statement { padding: 2.5rem 1.25rem 1.5rem; }
  #ai-gallery { padding: 0 1.25rem; }
  .pillars-grid, .steps-grid { grid-template-columns: 1fr; gap: 2rem; }
  #mentoring-pillars, #ai-approach, #skills-cards { padding: 2rem 1.25rem 0.5rem; }
  #skills-reading, #skills-writing { padding: 2.5rem 1.25rem 0.5rem; }
  #communication-sessions { padding: 2rem 1.25rem 1.5rem; }
  #mentoring-steps { padding: 2rem 1.25rem 1.5rem; }
  #mission { padding: 2.5rem 1.25rem 1.5rem; }
  #ai-craft { padding: 2rem 1.25rem 0.5rem; }
  .craft-list li { gap: 1rem; }
  .craft-letter { width: 1.75rem; font-size: 1.5rem; }
  #courses { padding: 2rem 1.25rem 0.5rem; }
  #about-me { padding: 2.5rem 1.25rem 1.5rem; }
  .statement-body { font-size: 1rem; }

  .founder-layout {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  .founder-photo-wrap { max-width: 220px; margin: 0 auto; }

  nav .nav-links {
    flex-direction: column;
    position: fixed;
    top: 0; right: -300px;
    width: 280px;
    height: 100vh;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    padding: 5rem 2rem 2rem;
    gap: 0.5rem;
    border-left: 1px solid var(--navy-soft);
    z-index: 999;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 40px rgba(10, 37, 64, 0.12);
  }

  nav .nav-links.open { right: 0; }

  nav .nav-links a {
    font-size: 1.1rem;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--navy-soft);
    display: block;
  }

  nav .nav-links a::after { display: none; }

  .lang-toggle {
    margin: 1rem 0.5rem 0;
    align-self: flex-start;
  }

  .hamburger { z-index: 1001; padding: 8px; margin: -8px; }
  .hamburger span {
    width: 24px; height: 2.5px;
    border-radius: 2px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
  }
  .hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* ===== BOOKING CTA =====
   Placeholder until the booking site exists. The buttons become real links
   as soon as BOOKING_URL is filled in at the top of assets/site.js. */
.booking-cta {
  text-align: center;
  padding: 0.5rem 2rem 3rem;
}

.btn-booking {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
  background: var(--navy);
  border: none;
  border-radius: 8px;
  padding: 0.95rem 2.4rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-booking:hover {
  background: var(--navy-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(10, 37, 64, 0.18);
}

.btn-booking:focus-visible {
  outline: 2px solid var(--navy-light);
  outline-offset: 3px;
}

/* ===== SECTION PHOTO =====
   Single photo under a statement's sub-heading (Mentoring, Communication). */
.section-photo {
  width: 100%;
  max-width: 850px;
  margin: 2.75rem auto 0;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--navy-soft);
}

.section-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The first section on a page has to clear the fixed nav. Each id is named
   explicitly because these sections set their own padding through #id rules,
   which would otherwise outrank a plain class selector. */
#mentoring.page-lead,
#ai-education.page-lead,
#academic-skills.page-lead,
#about-me.page-lead { padding-top: 8rem; }

@media (max-width: 768px) {
  .booking-cta { padding: 0.5rem 1.25rem 2.25rem; }
  #mentoring.page-lead,
  #ai-education.page-lead,
  #academic-skills.page-lead,
  #about-me.page-lead { padding-top: 6.5rem; }
  .section-photo { margin-top: 2rem; border-radius: 12px; }
  .statement-para { margin-top: 1.75rem; font-size: 1rem; }
}