.elementor-kit-156{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#1A1A1A;--e-global-color-text:#FFFFFF;--e-global-color-accent:#FF003B;--e-global-color-8476cd0:#FFFFFF;--e-global-color-52edf61:#FBFBFB;--e-global-color-b754c2c:#990000;--e-global-color-f615a02:#00000000;--e-global-color-50132ba:#060000;--e-global-color-81e1984:#9980FFA1;--e-global-color-e34f696:#0F0F0F;--e-global-color-ab4c09d:#FFFFFF00;--e-global-color-f2e37f2:#5B5B5B;--e-global-color-f00260a:#3B3B3B;--e-global-color-ce86765:#541F2C;--e-global-color-5894fef:#000000CC;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-size:35px;--e-global-typography-primary-font-weight:300;--e-global-typography-primary-text-transform:capitalize;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-size:16px;--e-global-typography-secondary-font-weight:300;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-line-height:1em;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:200;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:300;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-line-height:1.2em;--e-global-typography-efbb023-font-family:"DM Sans";--e-global-typography-efbb023-font-size:14px;--e-global-typography-efbb023-font-weight:normal;--e-global-typography-efbb023-text-transform:capitalize;--e-global-typography-efbb023-font-style:normal;--e-global-typography-efbb023-text-decoration:underline;--e-global-typography-efbb023-line-height:22px;--e-global-typography-784be66-font-family:"DM Sans";--e-global-typography-784be66-font-size:18px;--e-global-typography-784be66-font-weight:400;--e-global-typography-784be66-text-transform:none;--e-global-typography-784be66-font-style:normal;--e-global-typography-784be66-line-height:28px;--e-global-typography-fb36cfa-font-family:"Nanum Myeongjo";--e-global-typography-fb36cfa-font-size:54px;--e-global-typography-fb36cfa-font-weight:400;--e-global-typography-fb36cfa-text-transform:capitalize;--e-global-typography-fb36cfa-font-style:normal;--e-global-typography-fb36cfa-line-height:64px;--e-global-typography-f085a2a-font-family:"DM Sans";--e-global-typography-f085a2a-font-size:20px;--e-global-typography-f085a2a-font-weight:400;--e-global-typography-f085a2a-text-transform:none;--e-global-typography-f085a2a-font-style:normal;--e-global-typography-f085a2a-text-decoration:underline;--e-global-typography-f085a2a-line-height:22px;--e-global-typography-e5be096-font-family:"Roboto";--e-global-typography-e5be096-font-size:12px;--e-global-typography-e5be096-font-weight:300;--e-global-typography-e5be096-text-transform:none;--e-global-typography-e5be096-font-style:normal;--e-global-typography-e5be096-text-decoration:none;--e-global-typography-e5be096-line-height:26px;--e-global-typography-e5be096-letter-spacing:1px;--e-global-typography-e9b8def-font-family:"Poppins";--e-global-typography-e9b8def-font-size:65px;--e-global-typography-e9b8def-font-weight:300;--e-global-typography-e9b8def-text-transform:uppercase;--e-global-typography-e9b8def-line-height:1.2em;--e-global-typography-ed92e77-font-family:"Poppins";--e-global-typography-ed92e77-font-size:18px;--e-global-typography-ed92e77-font-weight:300;--e-global-typography-ed92e77-text-transform:capitalize;--e-global-typography-ed92e77-line-height:1.2em;--e-global-typography-8b3ce9d-font-family:"Poppins";--e-global-typography-8b3ce9d-font-size:15px;--e-global-typography-8b3ce9d-font-weight:300;--e-global-typography-8b3ce9d-font-style:normal;--e-global-typography-8b3ce9d-line-height:1em;--e-global-typography-8afbe5d-font-family:"Poppins";--e-global-typography-8afbe5d-font-size:14px;--e-global-typography-8afbe5d-font-weight:200;--e-global-typography-8afbe5d-text-transform:capitalize;--e-global-typography-8afbe5d-line-height:1em;--e-global-typography-a3ff010-font-family:"Poppins";--e-global-typography-a3ff010-font-size:22px;--e-global-typography-a3ff010-font-weight:400;--e-global-typography-a3ff010-text-transform:capitalize;--e-global-typography-a3ff010-line-height:1em;background-color:var( --e-global-color-e34f696 );}.elementor-kit-156 e-page-transition{background-color:#FFBC7D;}.elementor-kit-156 button:hover,.elementor-kit-156 button:focus,.elementor-kit-156 input[type="button"]:hover,.elementor-kit-156 input[type="button"]:focus,.elementor-kit-156 input[type="submit"]:hover,.elementor-kit-156 input[type="submit"]:focus,.elementor-kit-156 .elementor-button:hover,.elementor-kit-156 .elementor-button:focus{border-radius:0px 0px 0px 0px;}.elementor-kit-156 input:not([type="button"]):not([type="submit"]),.elementor-kit-156 textarea,.elementor-kit-156 .elementor-field-textual{border-style:solid;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}.site-header{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-156{--e-global-typography-primary-font-size:30px;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-size:20px;--e-global-typography-fb36cfa-font-size:38px;--e-global-typography-fb36cfa-line-height:60px;--e-global-typography-e9b8def-font-size:45px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-156{--e-global-typography-primary-font-size:25px;--e-global-typography-primary-line-height:30px;--e-global-typography-fb36cfa-font-size:31px;--e-global-typography-fb36cfa-line-height:34px;--e-global-typography-e9b8def-font-size:35px;--e-global-typography-ed92e77-font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Baila Cris – Școala de Dans</title>
  <meta name="description" content="Baila Cris – Dansul mirilor, lecții private și clase de dans pentru orice nivel. Craiova, România." />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet" />
  <style>
    /* ===================== RESET & BASE ===================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: 'Poppins', sans-serif;
      color: #000000;
      background: #ffffff;
      overflow-x: hidden;
      line-height: 1.6;
    }
    h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.2; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    img { max-width: 100%; display: block; }
    button { cursor: pointer; border: none; outline: none; font-family: 'Poppins', sans-serif; }

    /* ===================== CSS VARIABLES ===================== */
    :root {
      --red: #E50914;
      --red-dark: #b8060f;
      --black: #000000;
      --white: #ffffff;
      --gray-light: #F5F5F5;
      --gray-mid: #e0e0e0;
      --gray-text: #555555;
      --nav-height: 72px;
      --transition: 0.3s ease;
      --shadow: 0 4px 24px rgba(0,0,0,0.10);
      --shadow-hover: 0 8px 36px rgba(0,0,0,0.18);
    }

    /* ===================== UTILITY ===================== */
    .container {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .section-tag {
      display: inline-block;
      font-family: 'Poppins', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 12px;
    }
    .section-title {
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 900;
      margin-bottom: 16px;
      color: var(--black);
    }
    .section-title.light { color: var(--white); }
    .section-subtitle {
      font-size: 1.05rem;
      color: var(--gray-text);
      max-width: 600px;
      margin-bottom: 48px;
    }
    .section-subtitle.light { color: rgba(255,255,255,0.75); }
    .btn {
      display: inline-block;
      padding: 14px 32px;
      border-radius: 4px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      transition: background var(--transition), color var(--transition), border-color var(--transition), transform 0.15s ease, box-shadow var(--transition);
    }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
    .btn:active { transform: translateY(0); }
    .btn-red {
      background: var(--red);
      color: var(--white);
    }
    .btn-red:hover { background: var(--red-dark); }
    .btn-outline {
      background: transparent;
      color: var(--white);
      border: 2px solid var(--white);
    }
    .btn-outline:hover { background: var(--white); color: var(--black); }
    .btn-outline-red {
      background: transparent;
      color: var(--red);
      border: 2px solid var(--red);
    }
    .btn-outline-red:hover { background: var(--red); color: var(--white); }

    /* ===================== FADE-IN ANIMATION ===================== */
    .fade-in {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .fade-in-delay-1 { transition-delay: 0.1s; }
    .fade-in-delay-2 { transition-delay: 0.2s; }
    .fade-in-delay-3 { transition-delay: 0.3s; }
    .fade-in-delay-4 { transition-delay: 0.4s; }

    /* ===================== NAVBAR ===================== */
    #navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 999;
      height: var(--nav-height);
      background: transparent;
      transition: background 0.4s ease, box-shadow 0.4s ease;
      display: flex;
      align-items: center;
    }
    #navbar.scrolled {
      background: var(--white);
      box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
    .nav-logo {
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: 1.55rem;
      color: var(--white);
      letter-spacing: 0.06em;
      transition: color var(--transition);
    }
    .nav-logo span { color: var(--red); }
    #navbar.scrolled .nav-logo { color: var(--black); }
    .nav-menu {
      display: flex;
      align-items: center;
      gap: 36px;
    }
    .nav-menu a {
      font-family: 'Poppins', sans-serif;
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--white);
      letter-spacing: 0.03em;
      transition: color var(--transition);
      position: relative;
    }
    .nav-menu a::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 0;
      width: 0; height: 2px;
      background: var(--red);
      transition: width var(--transition);
    }
    .nav-menu a:hover::after { width: 100%; }
    #navbar.scrolled .nav-menu a { color: var(--black); }
    .nav-cta {
      background: var(--red);
      color: var(--white) !important;
      padding: 9px 22px;
      border-radius: 4px;
      font-weight: 600 !important;
    }
    .nav-cta:hover { background: var(--red-dark); }
    .nav-cta::after { display: none !important; }
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      background: none;
      padding: 6px;
      cursor: pointer;
      z-index: 1001;
    }
    .hamburger span {
      display: block;
      width: 26px;
      height: 2px;
      background: var(--white);
      border-radius: 2px;
      transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
    }
    #navbar.scrolled .hamburger span { background: var(--black); }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    @media (max-width: 768px) {
      .hamburger { display: flex; }
      .nav-menu {
        position: fixed;
        top: 0; right: -100%;
        width: 280px; height: 100vh;
        background: var(--white);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 90px 32px 40px;
        box-shadow: -4px 0 20px rgba(0,0,0,0.12);
        transition: right 0.35s ease;
      }
      .nav-menu.open { right: 0; }
      .nav-menu a {
        color: var(--black) !important;
        font-size: 1.1rem;
        padding: 14px 0;
        width: 100%;
        border-bottom: 1px solid var(--gray-light);
      }
      .nav-menu a:last-child { border-bottom: none; }
      .nav-cta { margin-top: 16px; }
    }

    /* ===================== HERO ===================== */
    #hero {
      min-height: 100vh;
      background: linear-gradient(135deg, #0d0d0d 0%, #1a0000 50%, #0d0d0d 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      text-align: center;
      padding: calc(var(--nav-height) + 40px) 24px 80px;
    }
    .hero-bg-pattern {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 20% 50%, rgba(229,9,20,0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(229,9,20,0.08) 0%, transparent 40%),
        radial-gradient(circle at 60% 80%, rgba(229,9,20,0.06) 0%, transparent 40%);
      pointer-events: none;
    }
    .hero-grid-overlay {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 820px;
    }
    .hero-eyebrow {
      display: inline-block;
      font-family: 'Poppins', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--red);
      background: rgba(229,9,20,0.12);
      border: 1px solid rgba(229,9,20,0.3);
      padding: 6px 18px;
      border-radius: 50px;
      margin-bottom: 28px;
    }
    .hero-title {
      font-size: clamp(2.4rem, 6vw, 4.4rem);
      font-weight: 900;
      color: var(--white);
      margin-bottom: 22px;
      line-height: 1.1;
    }
    .hero-title em {
      font-style: normal;
      color: var(--red);
    }
    .hero-subtitle {
      font-size: clamp(1rem, 2.2vw, 1.22rem);
      color: rgba(255,255,255,0.72);
      max-width: 580px;
      margin: 0 auto 40px;
      line-height: 1.7;
    }
    .hero-buttons {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .hero-buttons .btn { padding: 16px 36px; font-size: 1rem; }
    .hero-scroll-hint {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      color: rgba(255,255,255,0.4);
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .scroll-arrow {
      width: 20px; height: 20px;
      border-right: 2px solid rgba(255,255,255,0.35);
      border-bottom: 2px solid rgba(255,255,255,0.35);
      transform: rotate(45deg);
      animation: bounce 2s infinite;
    }
    @keyframes bounce {
      0%, 100% { transform: rotate(45deg) translateY(0); }
      50% { transform: rotate(45deg) translateY(5px); }
    }

    /* ===================== STATS ===================== */
    #stats {
      background: #111111;
      padding: 80px 24px;
      text-align: center;
    }
    .stats-subtitle {
      font-family: 'Poppins', sans-serif;
      font-size: 0.9rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      margin-bottom: 52px;
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      max-width: 900px;
      margin: 0 auto;
    }
    .stat-item {
      padding: 36px 20px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 8px;
      background: rgba(255,255,255,0.03);
      transition: border-color var(--transition), background var(--transition);
    }
    .stat-item:hover {
      border-color: rgba(229,9,20,0.4);
      background: rgba(229,9,20,0.05);
    }
    .stat-number {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(2.2rem, 4vw, 3.2rem);
      font-weight: 900;
      color: var(--white);
      line-height: 1;
      margin-bottom: 10px;
    }
    .stat-number .prefix { color: var(--red); }
    .stat-number .suffix { color: var(--red); }
    .stat-label {
      font-family: 'Poppins', sans-serif;
      font-size: 0.88rem;
      color: rgba(255,255,255,0.55);
      letter-spacing: 0.04em;
    }
    @media (max-width: 640px) {
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 380px) {
      .stats-grid { grid-template-columns: 1fr; }
    }

    /* ===================== SERVICII ===================== */
    #servicii {
      padding: 96px 24px;
      background: var(--white);
    }
    .section-header { margin-bottom: 56px; }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .service-card {
      background: var(--white);
      border: 1px solid var(--gray-mid);
      border-radius: 10px;
      padding: 36px 28px 32px;
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
      display: flex;
      flex-direction: column;
    }
    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(229,9,20,0.25);
    }
    .service-icon {
      width: 52px; height: 52px;
      background: rgba(229,9,20,0.08);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      font-size: 1.5rem;
    }
    .service-card h3 {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--black);
    }
    .service-card p {
      font-size: 0.92rem;
      color: var(--gray-text);
      line-height: 1.65;
      flex: 1;
      margin-bottom: 24px;
    }
    @media (max-width: 900px) {
      .services-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 540px) {
      .services-grid { grid-template-columns: 1fr; }
    }

    /* ===================== BENEFICII ===================== */
    #beneficii {
      padding: 96px 24px;
      background: var(--gray-light);
    }
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
      max-width: 860px;
      margin: 0 auto;
    }
    .benefit-item {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      background: var(--white);
      border-radius: 10px;
      padding: 30px 26px;
      box-shadow: var(--shadow);
      transition: transform var(--transition), box-shadow var(--transition);
    }
    .benefit-item:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }
    .benefit-check {
      flex-shrink: 0;
      width: 42px; height: 42px;
      background: var(--red);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: 1.1rem;
      font-weight: 700;
    }
    .benefit-text h4 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 6px;
      color: var(--black);
    }
    .benefit-text p {
      font-size: 0.9rem;
      color: var(--gray-text);
      line-height: 1.6;
    }
    @media (max-width: 640px) {
      .benefits-grid { grid-template-columns: 1fr; }
    }

    /* ===================== CUM FUNCȚIONEAZĂ ===================== */
    #cum-functioneaza {
      padding: 96px 24px;
      background: var(--white);
      text-align: center;
    }
    .steps-wrapper {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
      position: relative;
      max-width: 1000px;
      margin: 0 auto;
    }
    .steps-wrapper::before {
      content: '';
      position: absolute;
      top: 36px;
      left: calc(12.5% + 18px);
      right: calc(12.5% + 18px);
      height: 2px;
      background: linear-gradient(90deg, var(--red) 0%, rgba(229,9,20,0.2) 100%);
      z-index: 0;
    }
    .step-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 16px;
      position: relative;
      z-index: 1;
    }
    .step-number {
      width: 72px; height: 72px;
      border-radius: 50%;
      background: var(--red);
      color: var(--white);
      font-family: 'Montserrat', sans-serif;
      font-size: 1.5rem;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      box-shadow: 0 4px 20px rgba(229,9,20,0.35);
      transition: transform var(--transition), box-shadow var(--transition);
    }
    .step-item:hover .step-number {
      transform: scale(1.1);
      box-shadow: 0 6px 28px rgba(229,9,20,0.5);
    }
    .step-item h4 {
      font-size: 0.97rem;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--black);
    }
    .step-item p {
      font-size: 0.86rem;
      color: var(--gray-text);
      line-height: 1.6;
    }
    @media (max-width: 768px) {
      .steps-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 0;
      }
      .steps-wrapper::before { display: none; }
      .step-item {
        flex-direction: row;
        text-align: left;
        padding: 0 0 32px 0;
        gap: 20px;
        width: 100%;
        max-width: 420px;
      }
      .step-item h4, .step-item p { text-align: left; }
      .step-number { flex-shrink: 0; margin-bottom: 0; }
      .step-text { flex: 1; }
    }

    /* ===================== TESTIMONIALE ===================== */
    #testimoniale {
      padding: 96px 24px;
      background: var(--gray-light);
      text-align: center;
    }
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1080px;
      margin: 0 auto;
    }
    .testimonial-card {
      background: var(--white);
      border-radius: 12px;
      padding: 36px 30px 30px;
      text-align: left;
      box-shadow: var(--shadow);
      transition: transform var(--transition), box-shadow var(--transition);
      position: relative;
    }
    .testimonial-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
    }
    .testimonial-card::before {
      content: '\201C';
      position: absolute;
      top: 16px; left: 24px;
      font-family: 'Montserrat', sans-serif;
      font-size: 5rem;
      font-weight: 900;
      color: rgba(229,9,20,0.12);
      line-height: 1;
    }
    .testimonial-stars {
      color: #FFB800;
      font-size: 1.05rem;
      margin-bottom: 16px;
      letter-spacing: 2px;
    }
    .testimonial-card p {
      font-size: 0.95rem;
      color: #333;
      line-height: 1.72;
      margin-bottom: 22px;
      font-style: italic;
    }
    .testimonial-author {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--black);
    }
    .testimonial-role {
      font-size: 0.8rem;
      color: var(--gray-text);
      margin-top: 2px;
    }
    @media (max-width: 860px) {
      .testimonials-grid { grid-template-columns: 1fr; max-width: 520px; }
    }

    /* ===================== CTA PUTERNIC ===================== */
    #cta {
      background: #0a0a0a;
      padding: 100px 24px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    #cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(229,9,20,0.12) 0%, transparent 65%);
      pointer-events: none;
    }
    .cta-inner { position: relative; z-index: 1; }
    .cta-label {
      display: inline-block;
      font-family: 'Poppins', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 20px;
    }
    #cta h2 {
      font-size: clamp(1.9rem, 4.5vw, 3.2rem);
      color: var(--white);
      max-width: 740px;
      margin: 0 auto 20px;
      font-weight: 900;
      line-height: 1.15;
    }
    #cta p {
      font-size: 1.05rem;
      color: rgba(255,255,255,0.65);
      max-width: 560px;
      margin: 0 auto 40px;
      line-height: 1.7;
    }
    #cta .btn-red { padding: 18px 44px; font-size: 1.05rem; }

    /* ===================== DESPRE NOI ===================== */
    #despre {
      padding: 96px 24px;
      background: var(--white);
    }
    .despre-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
      max-width: 1100px;
      margin: 0 auto;
    }
    .despre-image-placeholder {
      aspect-ratio: 4/3;
      background: linear-gradient(135deg, #1a0000, #3a0008);
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      color: rgba(255,255,255,0.5);
      position: relative;
      overflow: hidden;
    }
    .despre-image-placeholder::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 30% 70%, rgba(229,9,20,0.18) 0%, transparent 60%);
    }
    .despre-image-icon {
      font-size: 3.5rem;
      z-index: 1;
    }
    .despre-image-placeholder span {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      z-index: 1;
    }
    .despre-text .section-tag { margin-bottom: 8px; }
    .despre-text .section-title { margin-bottom: 24px; }
    .despre-text p {
      font-size: 0.98rem;
      color: var(--gray-text);
      line-height: 1.78;
      margin-bottom: 18px;
    }
    .despre-text p:last-of-type { margin-bottom: 32px; }
    .despre-stats {
      display: flex;
      gap: 32px;
      margin-bottom: 32px;
    }
    .despre-stat {
      text-align: center;
    }
    .despre-stat-num {
      font-family: 'Montserrat', sans-serif;
      font-size: 2rem;
      font-weight: 900;
      color: var(--red);
    }
    .despre-stat-label {
      font-size: 0.78rem;
      color: var(--gray-text);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    @media (max-width: 768px) {
      .despre-grid { grid-template-columns: 1fr; gap: 40px; }
    }

    /* ===================== FAQ ===================== */
    #faq {
      padding: 96px 24px;
      background: var(--gray-light);
    }
    .faq-inner {
      max-width: 760px;
      margin: 0 auto;
    }
    .faq-inner .section-header { text-align: center; }
    .faq-list { display: flex; flex-direction: column; gap: 12px; }
    .faq-item {
      background: var(--white);
      border-radius: 8px;
      border: 1px solid var(--gray-mid);
      overflow: hidden;
      transition: border-color var(--transition), box-shadow var(--transition);
    }
    .faq-item.open {
      border-color: rgba(229,9,20,0.3);
      box-shadow: 0 2px 14px rgba(229,9,20,0.08);
    }
    .faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 24px;
      cursor: pointer;
      gap: 16px;
      user-select: none;
    }
    .faq-question span {
      font-family: 'Poppins', sans-serif;
      font-size: 0.97rem;
      font-weight: 600;
      color: var(--black);
      flex: 1;
      transition: color var(--transition);
    }
    .faq-item.open .faq-question span { color: var(--red); }
    .faq-icon {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--gray-light);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background var(--transition), transform var(--transition);
    }
    .faq-icon svg {
      width: 14px; height: 14px;
      stroke: var(--gray-text);
      transition: stroke var(--transition);
    }
    .faq-item.open .faq-icon {
      background: var(--red);
      transform: rotate(45deg);
    }
    .faq-item.open .faq-icon svg { stroke: var(--white); }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.4s ease;
    }
    .faq-item.open .faq-answer { max-height: 200px; }
    .faq-answer-inner {
      padding: 0 24px 22px;
      font-size: 0.92rem;
      color: var(--gray-text);
      line-height: 1.7;
      border-top: 1px solid var(--gray-light);
      padding-top: 16px;
    }

    /* ===================== FOOTER ===================== */
    #footer {
      background: #000000;
      color: rgba(255,255,255,0.75);
      padding: 72px 24px 0;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1.2fr 1.5fr 1.2fr;
      gap: 48px;
      max-width: 1180px;
      margin: 0 auto;
      padding-bottom: 56px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .footer-brand-name {
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: 1.7rem;
      color: var(--white);
      letter-spacing: 0.06em;
      margin-bottom: 10px;
    }
    .footer-brand-name span { color: var(--red); }
    .footer-tagline {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.45);
      font-style: italic;
      letter-spacing: 0.06em;
      margin-bottom: 22px;
    }
    .footer-brand-text {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.45);
      line-height: 1.7;
      max-width: 240px;
    }
    .footer-col-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 20px;
    }
    .footer-links li { margin-bottom: 10px; }
    .footer-links a {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.55);
      transition: color var(--transition), padding-left var(--transition);
      display: inline-block;
    }
    .footer-links a:hover { color: var(--red); padding-left: 4px; }
    .footer-contact-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 12px;
    }
    .footer-contact-icon {
      font-size: 1rem;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .footer-contact-text {
      font-size: 0.86rem;
      color: rgba(255,255,255,0.55);
      line-height: 1.5;
    }
    .footer-contact-text a {
      color: rgba(255,255,255,0.55);
      transition: color var(--transition);
    }
    .footer-contact-text a:hover { color: var(--red); }
    .footer-social {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .footer-social-link {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.88rem;
      color: rgba(255,255,255,0.55);
      transition: color var(--transition);
    }
    .footer-social-link:hover { color: var(--white); }
    .footer-social-icon {
      width: 34px; height: 34px;
      border-radius: 8px;
      background: rgba(255,255,255,0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--transition);
      flex-shrink: 0;
    }
    .footer-social-link:hover .footer-social-icon { background: var(--red); }
    .footer-social-icon svg { width: 16px; height: 16px; fill: rgba(255,255,255,0.7); }
    .footer-bottom {
      max-width: 1180px;
      margin: 0 auto;
      padding: 22px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-copyright {
      font-size: 0.82rem;
      color: rgba(255,255,255,0.3);
    }
    .footer-bottom-links {
      display: flex;
      gap: 20px;
    }
    .footer-bottom-links a {
      font-size: 0.82rem;
      color: rgba(255,255,255,0.3);
      transition: color var(--transition);
    }
    .footer-bottom-links a:hover { color: rgba(255,255,255,0.7); }
    @media (max-width: 900px) {
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    }
    @media (max-width: 540px) {
      .footer-grid { grid-template-columns: 1fr; }
    }

    /* ===================== OVERLAY for mobile menu ===================== */
    .nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 998;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .nav-overlay.active {
      display: block;
      opacity: 1;
    }
  </style>
</head>
<body>

  <!-- ===================== NAVBAR ===================== -->
  <div class="nav-overlay" id="navOverlay"></div>
  <nav id="navbar">
    <div class="container">
      <div class="nav-inner">
        <a href="#hero" class="nav-logo">Baila<span>Cris</span></a>
        <ul class="nav-menu" id="navMenu">
          <li><a href="#hero">Acasă</a></li>
          <li><a href="#servicii">Cursuri</a></li>
          <li><a href="#despre">Despre noi</a></li>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="#contact-footer" class="nav-cta">Programează-te</a></li>
        </ul>
        <button class="hamburger" id="hamburger" aria-label="Meniu" aria-expanded="false">
          <span></span><span></span><span></span>
        </button>
      </div>
    </div>
  </nav>

  <!-- ===================== HERO ===================== -->
  <section id="hero">
    <div class="hero-bg-pattern"></div>
    <div class="hero-grid-overlay"></div>
    <div class="hero-content">
      <div class="hero-eyebrow">🎵 Școala de dans din Craiova</div>
      <h1 class="hero-title">Învață să dansezi<br /><em>fără stres.</em></h1>
      <p class="hero-subtitle">Dansul mirilor, lecții private și clase de dans pentru orice nivel. Fă primul pas chiar astăzi.</p>
      <div class="hero-buttons">
        <a href="#contact-footer" class="btn btn-red">Începe acum</a>
        <a href="#servicii" class="btn btn-outline">Vezi cursurile</a>
      </div>
    </div>
    <div class="hero-scroll-hint">
      <span>Descoperă</span>
      <div class="scroll-arrow"></div>
    </div>
  </section>

  <!-- ===================== STATISTICI ===================== -->
  <section id="stats">
    <div class="container">
      <p class="stats-subtitle fade-in">Învață alături de instructori dedicați</p>
      <div class="stats-grid">
        <div class="stat-item fade-in fade-in-delay-1">
          <div class="stat-number"><span class="prefix">+</span><span class="counter" data-target="500">0</span></div>
          <div class="stat-label">Cursanți fericiți</div>
        </div>
        <div class="stat-item fade-in fade-in-delay-2">
          <div class="stat-number"><span class="prefix">+</span><span class="counter" data-target="100">0</span></div>
          <div class="stat-label">Coregrafii create</div>
        </div>
        <div class="stat-item fade-in fade-in-delay-3">
          <div class="stat-number"><span class="prefix">+</span><span class="counter" data-target="5">0</span></div>
          <div class="stat-label">Ani de experiență</div>
        </div>
        <div class="stat-item fade-in fade-in-delay-4">
          <div class="stat-number"><span class="counter" data-target="98">0</span><span class="suffix">%</span></div>
          <div class="stat-label">Rată de satisfacție</div>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== SERVICII ===================== -->
  <section id="servicii">
    <div class="container">
      <div class="section-header fade-in">
        <span class="section-tag">Ce oferim</span>
        <h2 class="section-title">Serviciile noastre</h2>
        <p class="section-subtitle">Indiferent de obiectiv sau nivel de experiență, avem cursul potrivit pentru tine.</p>
      </div>
      <div class="services-grid">
        <div class="service-card fade-in fade-in-delay-1">
          <div class="service-icon">💍</div>
          <h3>Dansul Mirilor</h3>
          <p>Coregrafie personalizată pentru cel mai important dans din viața ta. Creăm amintiri de neuitat împreună.</p>
          <a href="#contact-footer" class="btn btn-red">Află mai mult</a>
        </div>
        <div class="service-card fade-in fade-in-delay-2">
          <div class="service-icon">🎯</div>
          <h3>Lecții Private</h3>
          <p>Sesiuni 1-la-1 adaptate ritmului tău de învățare. Progres rapid și atenție personalizată din partea instructorului.</p>
          <a href="#contact-footer" class="btn btn-red">Află mai mult</a>
        </div>
        <div class="service-card fade-in fade-in-delay-3">
          <div class="service-icon">🕺</div>
          <h3>Clase de Grup</h3>
          <p>Energie, distracție și progres alături de alți cursanți. O experiență socială memorabilă în fiecare ședință.</p>
          <a href="#contact-footer" class="btn btn-red">Află mai mult</a>
        </div>
        <div class="service-card fade-in fade-in-delay-4">
          <div class="service-icon">✨</div>
          <h3>Coregrafii Personalizate</h3>
          <p>Creăm coregrafii unice pe melodia ta preferată. Fiecare pas este gândit special pentru tine și povestea ta.</p>
          <a href="#contact-footer" class="btn btn-red">Află mai mult</a>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== BENEFICII ===================== -->
  <section id="beneficii">
    <div class="container" style="text-align:center;">
      <div class="section-header fade-in">
        <span class="section-tag">Avantajele tale</span>
        <h2 class="section-title">De ce Baila Cris?</h2>
        <p class="section-subtitle" style="margin:0 auto 48px;">Pentru că credem că fiecare persoană merită să danseze cu bucurie și cu încredere.</p>
      </div>
      <div class="benefits-grid">
        <div class="benefit-item fade-in fade-in-delay-1">
          <div class="benefit-check">✓</div>
          <div class="benefit-text">
            <h4>Ușor de învățat</h4>
            <p>Pașii sunt simpli, explicați clar, fără complicații. Vei simți că dansezi natural în cel mai scurt timp.</p>
          </div>
        </div>
        <div class="benefit-item fade-in fade-in-delay-2">
          <div class="benefit-check">✓</div>
          <div class="benefit-text">
            <h4>Pentru începători</h4>
            <p>Nu ai nevoie de experiență. Toată lumea e binevenită. Pornim de la zero și construim pas cu pas.</p>
          </div>
        </div>
        <div class="benefit-item fade-in fade-in-delay-3">
          <div class="benefit-check">✓</div>
          <div class="benefit-text">
            <h4>Program flexibil</h4>
            <p>Alegi ziua și ora care ți se potrivesc. Noi ne adaptăm programului tău, nu invers.</p>
          </div>
        </div>
        <div class="benefit-item fade-in fade-in-delay-4">
          <div class="benefit-check">✓</div>
          <div class="benefit-text">
            <h4>Rezultate rapide</h4>
            <p>Vei simți progresul din primele ședințe. Metodele noastre sunt testate și optimizate pentru eficiență maximă.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== CUM FUNCȚIONEAZĂ ===================== -->
  <section id="cum-functioneaza">
    <div class="container">
      <div class="section-header fade-in" style="text-align:center;">
        <span class="section-tag">Procesul nostru</span>
        <h2 class="section-title">Cum funcționează?</h2>
        <p class="section-subtitle" style="margin:0 auto 60px;">Patru pași simpli te despart de ringul de dans.</p>
      </div>
      <div class="steps-wrapper">
        <div class="step-item fade-in fade-in-delay-1">
          <div class="step-number">1</div>
          <div class="step-text">
            <h4>Alegi tipul de dans</h4>
            <p>Explorează opțiunile noastre și alege ce ți se potrivește cel mai bine.</p>
          </div>
        </div>
        <div class="step-item fade-in fade-in-delay-2">
          <div class="step-number">2</div>
          <div class="step-text">
            <h4>Te înscrii</h4>
            <p>Completezi formularul sau ne contactezi direct pentru o primă discuție.</p>
          </div>
        </div>
        <div class="step-item fade-in fade-in-delay-3">
          <div class="step-number">3</div>
          <div class="step-text">
            <h4>Înveți pas cu pas</h4>
            <p>Lucrăm împreună la ritmul tău, fără presiune și fără stres.</p>
          </div>
        </div>
        <div class="step-item fade-in fade-in-delay-4">
          <div class="step-number">4</div>
          <div class="step-text">
            <h4>Dansezi cu încredere</h4>
            <p>Ești pregătit/ă să strălucești pe ringul de dans!</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== TESTIMONIALE ===================== -->
  <section id="testimoniale">
    <div class="container">
      <div class="section-header fade-in" style="text-align:center;">
        <span class="section-tag">Poveștile lor</span>
        <h2 class="section-title">Ce spun cursanții noștri</h2>
        <p class="section-subtitle" style="margin:0 auto 52px;">Sute de cursanți fericiți ne recomandă cu drag. Iată câteva dintre experiențele lor.</p>
      </div>
      <div class="testimonials-grid">
        <div class="testimonial-card fade-in fade-in-delay-1">
          <div class="testimonial-stars">★★★★★</div>
          <p>"Am dansat la nuntă fără nicio emoție negativă. Instructorii au fost răbdători, profesioniști și extraordinari. Mulțumim din suflet, Baila Cris!"</p>
          <div class="testimonial-author">Ana &amp; Mihai</div>
          <div class="testimonial-role">Cursanți — Dansul Mirilor</div>
        </div>
        <div class="testimonial-card fade-in fade-in-delay-2">
          <div class="testimonial-stars">★★★★★</div>
          <p>"De la doi stângi la un dans de vis. Nu credeam că voi reuși, dar Baila Cris m-a surprins plăcut la fiecare ședință. Recomand cu încredere!"</p>
          <div class="testimonial-author">Elena P.</div>
          <div class="testimonial-role">Cursantă — Lecții Private</div>
        </div>
        <div class="testimonial-card fade-in fade-in-delay-3">
          <div class="testimonial-stars">★★★★★</div>
          <p>"Atmosfera este caldă, iar instructorii sunt extraordinari. Mă simt binevenită la fiecare clasă. Progresez vizibil și mă bucur de fiecare moment."</p>
          <div class="testimonial-author">Andrei D.</div>
          <div class="testimonial-role">Cursant — Clase de Grup</div>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== CTA PUTERNIC ===================== -->
  <section id="cta">
    <div class="container">
      <div class="cta-inner fade-in">
        <div class="cta-label">Fă primul pas</div>
        <h2>Pregătește-te pentru cel mai important dans din viața ta</h2>
        <p>Fie că e dansul mirilor sau o nouă pasiune, noi suntem alături de tine la fiecare pas al drumului.</p>
        <a href="#contact-footer" class="btn btn-red">Programează-te acum</a>
      </div>
    </div>
  </section>

  <!-- ===================== DESPRE NOI ===================== -->
  <section id="despre">
    <div class="container">
      <div class="despre-grid">
        <div class="despre-image-placeholder fade-in">
          <div class="despre-image-icon">💃</div>
          <span>Baila Cris — Din 2019</span>
        </div>
        <div class="despre-text fade-in fade-in-delay-2">
          <span class="section-tag">Povestea noastră</span>
          <h2 class="section-title">Despre Baila Cris</h2>
          <p>Cu peste 5 ani de experiență și sute de cursanți fericiți, Baila Cris este locul unde pasiunea pentru dans întâlnește dedicarea. Am ajutat sute de cupluri și persoane să își descopere ritmul interior.</p>
          <p>Credem că oricine poate învăța să danseze — tot ce ai nevoie este să faci primul pas. Restul îl facem noi împreună, cu răbdare și entuziasm.</p>
          <p>Suntem o echipă de instructori profesioniști din Craiova, dedicați să transformăm fiecare lecție într-o experiență memorabilă și plăcută.</p>
          <div class="despre-stats">
            <div class="despre-stat">
              <div class="despre-stat-num">500+</div>
              <div class="despre-stat-label">Cursanți</div>
            </div>
            <div class="despre-stat">
              <div class="despre-stat-num">5+</div>
              <div class="despre-stat-label">Ani activi</div>
            </div>
            <div class="despre-stat">
              <div class="despre-stat-num">100+</div>
              <div class="despre-stat-label">Coregrafii</div>
            </div>
          </div>
          <a href="#contact-footer" class="btn btn-red">Contactează-ne</a>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== FAQ ===================== -->
  <section id="faq">
    <div class="container">
      <div class="faq-inner">
        <div class="section-header fade-in">
          <span class="section-tag">Ai întrebări?</span>
          <h2 class="section-title">Întrebări frecvente</h2>
          <p class="section-subtitle" style="margin:0 auto 48px;">Găsești mai jos răspunsuri la cele mai comune întrebări. Dacă nu găsești ce cauți, ne poți contacta oricând.</p>
        </div>
        <div class="faq-list">

          <div class="faq-item fade-in">
            <div class="faq-question" role="button" tabindex="0" aria-expanded="false">
              <span>Pot învăța dacă nu am experiență?</span>
              <div class="faq-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
              </div>
            </div>
            <div class="faq-answer"><div class="faq-answer-inner">Absolut! Majoritatea cursanților noștri sunt începători. Te ghidăm pas cu pas, cu răbdare și fără nicio presiune. Totul începe de la zero.</div></div>
          </div>

          <div class="faq-item fade-in fade-in-delay-1">
            <div class="faq-question" role="button" tabindex="0" aria-expanded="false">
              <span>Cât durează până învăț dansul mirilor?</span>
              <div class="faq-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
              </div>
            </div>
            <div class="faq-answer"><div class="faq-answer-inner">În medie, 4–8 ședințe sunt suficiente pentru o coregrafie completă și bine pusă la punct. Totul depinde de ritmul personal al fiecărui cuplu.</div></div>
          </div>

          <div class="faq-item fade-in fade-in-delay-2">
            <div class="faq-question" role="button" tabindex="0" aria-expanded="false">
              <span>Trebuie să vin cu partener?</span>
              <div class="faq-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
              </div>
            </div>
            <div class="faq-answer"><div class="faq-answer-inner">Nu neapărat. Poți veni singur/ă, iar noi ne ocupăm de tot. Instructorii noștri pot prelua rolul partenerului de dans în cadrul lecțiilor.</div></div>
          </div>

          <div class="faq-item fade-in fade-in-delay-3">
            <div class="faq-question" role="button" tabindex="0" aria-expanded="false">
              <span>Cum mă pot programa?</span>
              <div class="faq-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
              </div>
            </div>
            <div class="faq-answer"><div class="faq-answer-inner">Simplu — apasă pe butonul „Programează-te acum" de pe această pagină sau contactează-ne direct prin telefon ori email. Îți răspundem în cel mai scurt timp.</div></div>
          </div>

          <div class="faq-item fade-in fade-in-delay-4">
            <div class="faq-question" role="button" tabindex="0" aria-expanded="false">
              <span>Ce stiluri de dans predați?</span>
              <div class="faq-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
              </div>
            </div>
            <div class="faq-answer"><div class="faq-answer-inner">Predăm o gamă largă de stiluri: vals, tango, salsa, bachata, kizomba și multe altele. Dacă ai o preferință specială, spune-ne și vom crea o coregrafie pentru tine.</div></div>
          </div>

          <div class="faq-item fade-in fade-in-delay-4">
            <div class="faq-question" role="button" tabindex="0" aria-expanded="false">
              <span>Care sunt prețurile?</span>
              <div class="faq-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
              </div>
            </div>
            <div class="faq-answer"><div class="faq-answer-inner">Prețurile variază în funcție de tipul cursului ales și de numărul de ședințe. Contactează-ne pentru o ofertă personalizată și transparentă.</div></div>
          </div>

        </div>
      </div>
    </div>
  </section>

  <!-- ===================== FOOTER ===================== -->
  <footer id="footer">
    <div class="container">
      <div class="footer-grid" id="contact-footer">
        <!-- Brand -->
        <div>
          <div class="footer-brand-name">Baila<span>Cris</span></div>
          <div class="footer-tagline">Pasiune. Ritm. Emoție.</div>
          <p class="footer-brand-text">Școala de dans nr. 1 din Craiova. Te așteptăm să facem primii pași împreună.</p>
        </div>
        <!-- Links -->
        <div>
          <div class="footer-col-title">Navigare</div>
          <ul class="footer-links">
            <li><a href="#hero">Acasă</a></li>
            <li><a href="#servicii">Cursuri</a></li>
            <li><a href="#despre">Despre noi</a></li>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#contact-footer">Contact</a></li>
            <li><a href="#">Politica de confidențialitate</a></li>
          </ul>
        </div>
        <!-- Contact -->
        <div>
          <div class="footer-col-title">Contact</div>
          <div class="footer-contact-item">
            <span class="footer-contact-icon">📍</span>
            <div class="footer-contact-text">Craiova, România</div>
          </div>
          <div class="footer-contact-item">
            <span class="footer-contact-icon">📞</span>
            <div class="footer-contact-text"><a href="tel:+40700000000">+40 7XX XXX XXX</a></div>
          </div>
          <div class="footer-contact-item">
            <span class="footer-contact-icon">✉</span>
            <div class="footer-contact-text"><a href="mailto:contact@bailacris.ro">contact@bailacris.ro</a></div>
          </div>
          <div class="footer-contact-item">
            <span class="footer-contact-icon">⏰</span>
            <div class="footer-contact-text">Luni–Sâmbătă: 10:00 – 21:00</div>
          </div>
        </div>
        <!-- Social -->
        <div>
          <div class="footer-col-title">Urmărește-ne</div>
          <div class="footer-social">
            <a href="#" class="footer-social-link">
              <div class="footer-social-icon">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
              </div>
              Instagram
            </a>
            <a href="#" class="footer-social-link">
              <div class="footer-social-icon">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
              </div>
              Facebook
            </a>
            <a href="#" class="footer-social-link">
              <div class="footer-social-icon">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
              </div>
              TikTok
            </a>
            <a href="#" class="footer-social-link">
              <div class="footer-social-icon">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/></svg>
              </div>
              YouTube
            </a>
          </div>
        </div>
      </div>
      <!-- Bottom bar -->
      <div class="footer-bottom">
        <div class="footer-copyright">© 2026 Baila Cris. Toate drepturile rezervate.</div>
        <div class="footer-bottom-links">
          <a href="#">Politica de confidențialitate</a>
          <a href="#">Termeni și condiții</a>
        </div>
      </div>
    </div>
  </footer>

  <!-- ===================== JAVASCRIPT ===================== -->
  <script>
    // ---- NAVBAR scroll behavior ----
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 40) {
        navbar.classList.add('scrolled');
      } else {
        navbar.classList.remove('scrolled');
      }
    }, { passive: true });

    // ---- HAMBURGER MENU ----
    const hamburger = document.getElementById('hamburger');
    const navMenu = document.getElementById('navMenu');
    const navOverlay = document.getElementById('navOverlay');

    function closeMenu() {
      hamburger.classList.remove('open');
      navMenu.classList.remove('open');
      navOverlay.classList.remove('active');
      hamburger.setAttribute('aria-expanded', 'false');
      document.body.style.overflow = '';
    }

    hamburger.addEventListener('click', () => {
      const isOpen = navMenu.classList.contains('open');
      if (isOpen) {
        closeMenu();
      } else {
        hamburger.classList.add('open');
        navMenu.classList.add('open');
        navOverlay.classList.add('active');
        hamburger.setAttribute('aria-expanded', 'true');
        document.body.style.overflow = 'hidden';
      }
    });

    navOverlay.addEventListener('click', closeMenu);

    navMenu.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', closeMenu);
    });

    // ---- SMOOTH SCROLL ----
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          e.preventDefault();
          const navHeight = document.getElementById('navbar').offsetHeight;
          const top = target.getBoundingClientRect().top + window.pageYOffset - navHeight;
          window.scrollTo({ top, behavior: 'smooth' });
        }
      });
    });

    // ---- FADE-IN ON SCROLL (Intersection Observer) ----
    const fadeEls = document.querySelectorAll('.fade-in');
    const fadeObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          fadeObserver.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });

    fadeEls.forEach(el => fadeObserver.observe(el));

    // ---- COUNTER ANIMATION ----
    const counters = document.querySelectorAll('.counter');
    const counterObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const el = entry.target;
          const target = parseInt(el.getAttribute('data-target'), 10);
          const duration = 1800;
          const stepTime = 16;
          const steps = Math.ceil(duration / stepTime);
          let current = 0;
          const increment = target / steps;
          const timer = setInterval(() => {
            current += increment;
            if (current >= target) {
              el.textContent = target;
              clearInterval(timer);
            } else {
              el.textContent = Math.floor(current);
            }
          }, stepTime);
          counterObserver.unobserve(el);
        }
      });
    }, { threshold: 0.4 });

    counters.forEach(counter => counterObserver.observe(counter));

    // ---- FAQ ACCORDION ----
    const faqItems = document.querySelectorAll('.faq-item');
    faqItems.forEach(item => {
      const question = item.querySelector('.faq-question');
      question.addEventListener('click', () => {
        const isOpen = item.classList.contains('open');
        // Close all
        faqItems.forEach(i => {
          i.classList.remove('open');
          i.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
        });
        // Open clicked if it was closed
        if (!isOpen) {
          item.classList.add('open');
          question.setAttribute('aria-expanded', 'true');
        }
      });
      // Keyboard support
      question.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          question.click();
        }
      });
    });
  </script>
</body>
</html>/* End custom CSS */