:root {
  --purple: #6f39a7;
  --purple-dark: #4b237d;
  --pink: #ec4f8d;
  --yellow: #f7c93d;
  --teal: #20a6a0;
  --mint: #c9eee8;
  --cream: #fffaf1;
  --ink: #342946;
  --muted: #6e6678;
  --white: #ffffff;
  --shadow: 0 18px 55px rgba(82, 48, 112, .13);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  z-index:1000;
  padding:10px 14px;
  border-radius:10px;
  color:var(--white);
  background:var(--purple-dark);
  transform:translateY(-160%);
}
.skip-link:focus { transform:translateY(0); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:3px solid var(--yellow);
  outline-offset:3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 6vw;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(111,57,167,.08);
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: ui-rounded, "Segoe UI", system-ui, sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--purple);
}
.brand small { color: var(--yellow); }
.brand-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  filter: drop-shadow(0 7px 13px rgba(75,35,125,.14));
}
.nav { display: flex; align-items: center; gap: 20px; font-size: .94rem; font-weight: 800; }
.nav a:hover { color: var(--pink); }
.nav-cta {
  padding: 10px 18px;
  border-radius: 999px;
  color: white !important;
  background: var(--purple);
}
.menu-toggle { display: none; border: 0; background: transparent; font-size: 1.8rem; }

.hero {
  min-height: 88vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 55px;
  padding: 70px 6vw 90px;
  background:
    radial-gradient(circle at 85% 15%, rgba(247,201,61,.24), transparent 28%),
    radial-gradient(circle at 20% 10%, rgba(236,79,141,.12), transparent 25%),
    linear-gradient(180deg,#fff,#fffaf2);
}
.eyebrow, .kicker, .section-heading > span {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--pink);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .82rem;
}
.hero h1, .section h2 {
  font-family: ui-rounded, "Segoe UI", system-ui, sans-serif;
  line-height: 1.03;
  margin: 0;
}
.hero h1 { font-size: clamp(3.5rem,7vw,6.8rem); }
.hero h1 span { color: var(--pink); }
.hero p { max-width: 680px; font-size: 1.18rem; color: var(--muted); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0; }
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(77,35,125,.2); }
.btn-primary { color: white; background: linear-gradient(135deg,var(--purple),var(--pink)); }
.btn-secondary { color: var(--purple); border: 2px solid var(--purple); background: white; }
.hero-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats div {
  min-width: 135px;
  padding: 14px 18px;
  border-radius: 20px;
  background: white;
  box-shadow: var(--shadow);
}
.hero-stats strong { display: block; color: var(--purple); font-size: 1.25rem; }
.hero-stats span { font-size: .86rem; color: var(--muted); }
.hero-visual {
  position: relative;
  width: min(420px, 38vw);
  justify-self: center;
}
.hero-visual > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1085 / 1536;
  object-fit: contain;
  border-radius: 34px;
  box-shadow: 0 30px 80px rgba(70,35,105,.22);
  transform: rotate(2deg);
}
.floating-note {
  position: absolute;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  font-size: 1.8rem;
  box-shadow: var(--shadow);
  animation: float 3s ease-in-out infinite;
}
.note-one { top: -25px; right: 4%; background: var(--yellow); }
.note-two { bottom: 8%; left: -25px; color: white; background: var(--pink); animation-delay: 1s; }
@keyframes float { 50% { transform: translateY(-12px) rotate(5deg); } }

.section { padding: 95px 6vw; }
.section-soft { background: var(--cream); }
.section-gradient { color: white; background: linear-gradient(135deg,var(--purple-dark),var(--purple),var(--pink)); }
.section-heading { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.section h2 { font-size: clamp(2.5rem,5vw,4.3rem); }
.section-heading p { color: var(--muted); font-size: 1.08rem; }
.section-gradient .section-heading > span,
.section-gradient .section-heading p { color: #ffe6f0; }

.about-grid, .benefits-grid {
  display: grid;
  gap: 22px;
  max-width: 1200px;
  margin: auto;
}
.about-grid { grid-template-columns: repeat(3,1fr); }
.about-card, .benefit-card {
  padding: 30px;
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow);
  transition: transform .25s ease;
}
.about-card:hover, .benefit-card:hover { transform: translateY(-8px); }
.about-card .icon { font-size: 2.4rem; }
.about-card h3, .benefit-card h3 { font-family: ui-rounded, "Segoe UI", system-ui, sans-serif; font-size: 1.45rem; margin-bottom: 8px; }
.about-card p, .benefit-card p { margin: 0; color: var(--muted); }

.benefits-grid { grid-template-columns: repeat(5,1fr); }
.benefit-card { text-align: center; padding: 26px 18px; }
.benefit-icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 15px;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 900;
}
.pink { background:#ffd7e7; color:#c53672; }
.blue { background:#d7f2f5; color:#187c8d; }
.yellow { background:#fff0b8; color:#b57a00; }
.purple { background:#eadcf7; color:#6f39a7; }
.mint { background:#d7f5e9; color:#178f69; }

.tutoring-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1120px;
  margin: 0 auto;
}
.tutoring-card {
  padding: 30px;
  border: 1px solid rgba(111,57,167,.09);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.tutoring-card h3 {
  margin: 12px 0 8px;
  font: 800 1.5rem ui-rounded, "Segoe UI", system-ui, sans-serif;
}
.tutoring-card p { margin: 0; color: var(--muted); }
.subject-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: var(--white);
  background: linear-gradient(135deg,var(--purple),var(--pink));
  font: 800 1.25rem ui-rounded, "Segoe UI", system-ui, sans-serif;
}
.subject-icon.math { background: linear-gradient(135deg,#f0ad16,var(--yellow)); color:var(--ink); }
.subject-icon.english { background: linear-gradient(135deg,#178f8b,var(--teal)); }
.learning-note {
  display: flex;
  justify-content: center;
  gap: 12px;
  max-width: 940px;
  margin: 24px auto 0;
  padding: 16px 20px;
  border-radius: 18px;
  color: var(--purple-dark);
  background: #f1e9f8;
  text-align: center;
}
.learning-note span { color: var(--muted); }

.steps {
  max-width: 1150px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}
.step {
  padding: 28px;
  border-radius: 24px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.23);
}
.step span { font-family:ui-rounded, "Segoe UI", system-ui, sans-serif; font-size: 2.2rem; color: var(--yellow); }
.step h3 { font-size: 1.3rem; margin: 8px 0; }

.institution-wrap, .contact-card, .profile-card {
  max-width: 1180px;
  margin: auto;
  display: grid;
  align-items: center;
  gap: 50px;
}
.institution-wrap { grid-template-columns: 1.15fr .85fr; }
.institution-copy h2 { font-size: clamp(2.5rem,4vw,4rem); }
.institution-copy p { font-size: 1.08rem; color: var(--muted); }
.check-list { list-style: none; padding: 0; margin: 28px 0; }
.check-list li { margin: 12px 0; padding-left: 32px; position: relative; }
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 900;
}
.offer-card {
  padding: 36px;
  border-radius: 36px;
  background: var(--cream);
  box-shadow: var(--shadow);
}
.offer-badge {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  color: white;
  background: var(--pink);
  font-weight: 900;
}
.offer-card h3 { font-family:ui-rounded, "Segoe UI", system-ui, sans-serif; font-size: 2rem; }
.offer-item {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px dashed #d8cadf;
}
.offer-item strong { min-width: 88px; color: var(--purple); font-size: 1.45rem; }
.offer-item span { color: var(--muted); }

.profile-card {
  grid-template-columns: 300px 1fr;
  padding: 34px;
  border-radius: 36px;
  background: white;
  box-shadow: var(--shadow);
}
.profile-card img {
  width: 300px;
  height: 360px;
  object-fit: cover;
  object-position: 50% 36%;
  border-radius: 28px;
  box-shadow: 0 16px 38px rgba(75,35,125,.15);
}
.profile-card h3 { margin: 0; font-family:ui-rounded, "Segoe UI", system-ui, sans-serif; font-size:2.5rem; }
.role { color: var(--pink); font-weight: 900; }
.profile-tags { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.profile-tags span { padding:7px 12px; border-radius:999px; background:#f1e9f8; color:var(--purple); font-weight:800; }

.faq { max-width: 900px; margin: auto; }
.faq-item {
  position: relative;
  width: 100%;
  margin-bottom: 14px;
  padding: 22px 60px 22px 24px;
  text-align: left;
  color: var(--ink);
  border: 1px solid #eadff1;
  border-radius: 20px;
  background: white;
  box-shadow: 0 8px 26px rgba(76,35,126,.06);
  cursor: pointer;
}
.faq-item span { font-weight: 900; font-size: 1.05rem; }
.faq-item b { position:absolute; top:18px; right:22px; font-size:1.6rem; color:var(--purple); }
.faq-item p { max-height:0; overflow:hidden; margin:0; color:var(--muted); transition:max-height .3s ease, margin .3s ease; }
.faq-item.active p { max-height:180px; margin-top:12px; }
.faq-item.active b { transform: rotate(45deg); }

.gallery-section {
  background:
    radial-gradient(circle at 12% 12%, rgba(236,79,141,.10), transparent 23%),
    radial-gradient(circle at 88% 88%, rgba(32,166,160,.10), transparent 24%),
    var(--white);
}
.gallery-privacy {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 1180px;
  margin: -20px auto 30px;
  padding: 11px 16px;
  border: 1px solid rgba(111,57,167,.10);
  border-radius: 999px;
  color: var(--muted);
  background: var(--cream);
  font-size: .92rem;
  font-weight: 750;
}
.gallery-privacy span {
  flex: 0 0 auto;
  color: var(--teal);
}
.gallery-carousel {
  max-width: 1180px;
  margin: 0 auto;
}
.gallery-carousel-viewport {
  position: relative;
  height: clamp(360px, 56vw, 660px);
  overflow: hidden;
  border-radius: 32px;
  background: #241733;
  box-shadow: 0 24px 70px rgba(75,35,125,.20);
  touch-action: pan-y;
}
.carousel-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.025);
  transition:
    opacity .65s ease,
    transform .9s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .65s;
}
.carousel-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition-delay: 0s;
}
.carousel-slide::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(24,13,37,.82));
  pointer-events: none;
}
.carousel-slide-backdrop {
  position: absolute;
  inset: -32px;
  z-index: 0;
  background-position: center;
  background-size: cover;
  filter: blur(28px) saturate(.75);
  opacity: .48;
  transform: scale(1.08);
}
.carousel-slide > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.carousel-slide figcaption {
  position: absolute;
  right: 80px;
  bottom: 22px;
  left: 80px;
  z-index: 4;
  color: var(--white);
  font-size: clamp(1rem, 2vw, 1.32rem);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0,0,0,.58);
}
.gallery-carousel-counter {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 6;
  display: flex;
  gap: 5px;
  align-items: baseline;
  padding: 8px 13px;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(36,23,51,.72);
  backdrop-filter: blur(10px);
  font-weight: 850;
}
.gallery-carousel-counter span:first-child {
  color: var(--yellow);
  font-size: 1.12rem;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--white);
  border: 0;
  border-radius: 50%;
  background: rgba(36,23,51,.72);
  box-shadow: 0 8px 25px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .2s ease, transform .2s ease;
}
.carousel-previous { left: 20px; }
.carousel-next { right: 20px; }
.carousel-arrow:hover {
  background: var(--pink);
  transform: translateY(-50%) scale(1.07);
}
.gallery-carousel-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.carousel-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cec5d5;
  cursor: pointer;
  transition: width .25s ease, border-radius .25s ease, background .25s ease;
}
.carousel-dot.is-active {
  width: 30px;
  border-radius: 999px;
  background: var(--purple);
}
.carousel-autoplay {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--purple);
  border: 1px solid rgba(111,57,167,.16);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}
.carousel-autoplay span { font-size: .72rem; letter-spacing: -.14em; }
.carousel-autoplay:hover { color: var(--white); background: var(--purple); }
.carousel-help {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .86rem;
  text-align: center;
}
.carousel-arrow:focus-visible,
.carousel-dot:focus-visible,
.carousel-autoplay:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
.gallery-carousel:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 7px;
}

.contact-section { background: linear-gradient(180deg,#fff,#fff6fb); }
.contact-card {
  grid-template-columns: .9fr 1.1fr;
  padding: 46px;
  border-radius: 38px;
  color: white;
  background: linear-gradient(135deg,var(--purple-dark),var(--purple));
  box-shadow: 0 30px 80px rgba(75,35,125,.22);
}
.contact-card h2 { font-size: clamp(2.5rem,4vw,4rem); }
.contact-links { display:grid; gap:10px; margin-top:25px; }
.contact-links a { font-weight:800; }
form {
  display: grid;
  gap: 14px;
  padding: 28px;
  color: var(--ink);
  border-radius: 28px;
  background: white;
}
label { font-weight: 800; }
input, textarea, select {
  width: 100%;
  margin-top: 6px;
  padding: 13px 14px;
  border: 1px solid #ddd1e5;
  border-radius: 13px;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(236,79,141,.1); }
#formMessage { color: var(--purple); font-weight: 800; }
.form-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-status {
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 700;
}
.form-status.success { color:#165c42; background:#dff6ea; }
.form-status.error { color:#872544; background:#ffe4ec; }
.form-status ul { margin:8px 0 0; padding-left:20px; }
.privacy-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  font-weight: 700;
}
.privacy-check input { flex:0 0 auto; width:18px; height:18px; margin:3px 0 0; }
.privacy-check a { color:var(--purple); text-decoration:underline; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 32px 6vw;
  color: #f6ecff;
  background: #2f174e;
}
footer div { display:flex; flex-direction:column; }
.footer-links {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 8px 18px;
}
.footer-links a { text-decoration:underline; text-underline-offset:3px; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 1050px) {
  .benefits-grid { grid-template-columns: repeat(3,1fr); }
  .tutoring-grid { grid-template-columns: repeat(3,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 820px) {
  .menu-toggle { display:block; }
  .nav {
    display:none;
    position:absolute;
    top:68px;
    left:4vw;
    right:4vw;
    padding:20px;
    flex-direction:column;
    border-radius:22px;
    background:white;
    box-shadow:var(--shadow);
  }
  .nav.open { display:flex; }
  .hero { grid-template-columns:1fr; text-align:center; padding-top:45px; }
  .hero p { margin-left:auto; margin-right:auto; }
  .hero-actions, .hero-stats { justify-content:center; }
  .hero-visual {
    width: min(400px, 80vw);
    margin-top: 24px;
  }
  .about-grid, .institution-wrap, .profile-card, .contact-card, .tutoring-grid { grid-template-columns:1fr; }
  .profile-card { text-align:center; }
  .profile-card img { margin:auto; }
  .profile-tags { justify-content:center; }
}
@media (max-width: 620px) {
  .section { padding:72px 5vw; }
  .benefits-grid, .about-grid, .steps { grid-template-columns:1fr; }
  .hero h1 { font-size:3.45rem; }
  .hero-visual { width: min(350px, 84vw); }
  .contact-card { padding:24px; }
  form { padding:20px; }
  footer { flex-direction:column; }
  .gallery-privacy {
    align-items: flex-start;
    width: 100%;
    border-radius: 18px;
  }
  .gallery-carousel-viewport {
    height: clamp(330px, 110vw, 520px);
    border-radius: 22px;
  }
  .gallery-carousel-counter { top: 12px; left: 12px; }
  .carousel-arrow {
    width: 44px;
    height: 44px;
    font-size: 2rem;
  }
  .carousel-previous { left: 10px; }
  .carousel-next { right: 10px; }
  .carousel-slide figcaption {
    right: 58px;
    bottom: 16px;
    left: 58px;
    font-size: .96rem;
  }
  .gallery-carousel-controls {
    gap: 10px;
    margin-top: 18px;
  }
  .carousel-dots { gap: 7px; }
  .carousel-dot { width: 10px; height: 10px; }
  .carousel-dot.is-active { width: 24px; }
}








/* Scrollytelling stabil: pagina derulează, dar scena rămâne fixă */
.story-scroll {
  position: relative;
  height: 420vh;
  background: var(--cream);
}

.story-sticky {
  position: sticky;
  top: 68px;
  height: calc(100vh - 68px);
  overflow: hidden;
  background: var(--cream);
}

.story-stage {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
}

.story-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding-top: clamp(54px, 7vh, 84px);
  padding-bottom: clamp(54px, 7vh, 84px);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 11%, 0) scale(.975);
  filter: blur(11px);
  transition:
    opacity .82s cubic-bezier(.22, 1, .36, 1),
    transform .82s cubic-bezier(.22, 1, .36, 1),
    filter .82s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform, filter;
}

/* Conținutul intră puțin după fundal, pentru o tranziție mai naturală. */
.story-panel > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity .52s ease,
    transform .68s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.story-panel.is-active {
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.story-panel.is-active > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: .15s;
}

.story-panel.is-before {
  z-index: 2;
  opacity: 0;
  transform: translate3d(0, -11%, 0) scale(.975);
  filter: blur(9px);
}

.story-panel.is-after {
  z-index: 2;
  opacity: 0;
  transform: translate3d(0, 11%, 0) scale(.975);
  filter: blur(9px);
}

.story-panel.is-before > *,
.story-panel.is-after > * {
  opacity: 0;
  transition-delay: 0s;
}

.story-panel .reveal {
  opacity: inherit;
}

.story-progress {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  height: 4px;
  background: rgba(111,57,167,.10);
}

.story-progress-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg,var(--purple),var(--pink),var(--yellow));
  transition: width .24s ease-out;
}

.story-counter {
  position: absolute;
  top: 22px;
  right: 5vw;
  z-index: 30;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 999px;
  color: white;
  background: rgba(75,35,125,.84);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(75,35,125,.16);
  font-family: ui-rounded, "Segoe UI", system-ui, sans-serif;
}

.story-counter span {
  font-size: 1.35rem;
  font-weight: 800;
}

.story-counter small {
  opacity: .78;
  font-weight: 700;
}

.story-dots {
  position: absolute;
  top: 50%;
  right: 2.2vw;
  z-index: 30;
  display: grid;
  gap: 12px;
  transform: translateY(-50%);
}

.story-dot {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(111,57,167,.26);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}

.story-dot::before {
  content: attr(aria-label);
  position: absolute;
  top: 50%;
  right: 22px;
  width: max-content;
  padding: 6px 10px;
  border-radius: 10px;
  color: white;
  background: rgba(52,41,70,.88);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(6px);
  transition: opacity .2s ease, transform .2s ease;
  font: 700 .78rem system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.story-dot:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.story-dot.active {
  background: var(--pink);
  transform: scale(1.45);
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 30;
  display: flex;
  gap: 9px;
  align-items: center;
  max-width: calc(100% - 110px);
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--purple);
  background: rgba(255,255,255,.90);
  box-shadow: 0 8px 25px rgba(75,35,125,.10);
  transform: translateX(-50%);
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
  backdrop-filter: blur(10px);
}

.scroll-hint b {
  display: inline-block;
  font-size: 1rem;
  animation: hintBounce 1.4s ease-in-out infinite;
}

.story-scroll.is-last .scroll-hint b {
  transform: rotate(-45deg);
  animation: none;
}

@keyframes hintBounce {
  50% { transform: translateY(4px); }
}

@media (max-height: 760px) and (min-width: 821px) {
  .story-panel {
    padding-top: 52px;
    padding-bottom: 48px;
  }

  .story-panel .section-heading {
    margin-bottom: 26px;
  }

  .story-panel .section-heading h2 {
    font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  }

  .story-panel .about-card,
  .story-panel .benefit-card {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .story-panel .profile-card {
    grid-template-columns: 240px 1fr;
    padding: 24px;
  }

  .story-panel .profile-card img {
    width: 230px;
    height: 276px;
  }

  .story-panel .faq-item {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 9px;
  }
}

/* Pe mobil, conținutul revine la derulare normală pentru lizibilitate. */
@media (max-width: 820px) {
  .story-scroll {
    height: auto !important;
  }

  .story-sticky {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }

  .story-stage {
    height: auto;
  }

  .story-panel,
  .story-panel.is-active,
  .story-panel.is-before,
  .story-panel.is-after {
    position: relative;
    inset: auto;
    height: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    filter: none;
  }

  .story-panel > *,
  .story-panel.is-active > *,
  .story-panel.is-before > *,
  .story-panel.is-after > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .story-progress,
  .story-counter,
  .story-dots,
  .scroll-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-panel,
  .story-progress-bar,
  .story-dot,
  .carousel-slide,
  .carousel-dot,
  .carousel-arrow,
  .scroll-hint b {
    transition: none !important;
    animation: none !important;
  }
}


/* Aspect unitar pentru toate secțiunile din scrollytelling */
.story-panel {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

.story-panel .section-heading > span,
.story-panel .kicker {
  color: var(--pink) !important;
}

.story-panel .section-heading p,
.story-panel p {
  color: var(--muted);
}

.story-panel h2,
.story-panel h3,
.story-panel strong {
  color: var(--ink);
}

/* Organizare folosește aceleași carduri deschise ca restul secțiunilor */
#organizare .step {
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(111,57,167,.10);
  box-shadow: var(--shadow);
}

#organizare .step span {
  color: var(--pink);
}

#organizare .step p {
  color: var(--muted);
}