/* Variabilele globale controlează culorile folosite în toată pagina. */
  :root{
    --ink:#0a0a0a;
    --muted:#6f6f6f;
    --paper:#ffffff;
    --hair:#dcdcdc;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  img{max-width:100%; display:block;}
  /* .wrap limitează lățimea conținutului și îl centrează. */
  .wrap{max-width:1080px; margin:0 auto; padding:0 28px;}

  /* .spaced aplică stilul cu litere spațiate pentru etichete și brand. */
  .spaced{
    font-family:'Jost', sans-serif;
    font-weight:400;
    letter-spacing:0.28em;
    text-transform:uppercase;
  }

  h1,h2,h3{
    font-family:'Jost', sans-serif;
    font-weight:400;
    margin:0;
    line-height:1.15;
  }

  /* .underline adaugă linia de accent de sub un titlu. */
  .underline{
    display:inline-block;
    border-bottom:1px solid var(--ink);
    padding-bottom:4px;
  }

  /* ---------- Header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--hair);
  }
  /* .nav așază logo-ul, meniul și butonul principal în header. */
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 28px; max-width:1080px; margin:0 auto;
  }
  .brand{font-size:1rem;}
  .nav-links{display:flex; gap:32px; list-style:none; margin:0; padding:0; font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase;}
  .nav-links a{text-decoration:none; border-bottom:1px solid transparent; padding-bottom:3px; transition:border-color .2s ease;}
  .nav-links a:hover{border-color:var(--ink);}
  .nav-cta{
    border:1px solid var(--ink); padding:9px 20px; text-decoration:none;
    font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase;
    transition:background .2s ease, color .2s ease;
  }
  .nav-cta:hover{background:var(--ink); color:var(--paper);}

  @media (max-width:760px){
    .nav-links, .nav-cta{display:none;}
  }

  /* ---------- Hero ---------- */
  /* .hero este zona introductivă cu titlu, text și imagine. */
  .hero{
    padding:170px 0 100px;
  }
  .hero-grid{
    display:grid; grid-template-columns:1fr 0.85fr; gap:70px; align-items:center;
  }
  .hero-eyebrow{font-size:0.8rem; color:var(--muted); margin-bottom:22px;}
  .hero h1{font-size:clamp(2.2rem, 4.4vw, 3.4rem); letter-spacing:0.06em;}
  .hero h1 .line2{display:block; margin-top:6px;}
  .hero p{max-width:42ch; margin-top:26px; font-size:1.05rem; color:#2b2b2b;}
  .hero-actions{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
  /* .btn definește aspectul comun al butoanelor. */
  .btn{
    display:inline-block; padding:13px 26px; text-decoration:none;
    font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase;
    transition:transform .15s ease, background .2s ease, color .2s ease;
  }
  .btn-primary{background:var(--ink); color:#fff;}
  .btn-primary:hover{background:#333;}
  .btn-outline{border:1px solid var(--ink); color:var(--ink);}
  .btn-outline:hover{background:var(--ink); color:#fff;}

  .hero-visual{
    border:1px solid var(--hair);
    padding:18px;
  }
  .hero-visual img{width:100%; height:auto;}

  @media (max-width:820px){
    .hero-grid{grid-template-columns:1fr; gap:44px;}
    .hero-visual{max-width:360px; margin:0 auto;}
  }

  /* ---------- Divider motif ---------- */
  .motif{
    padding:50px 0;
    display:flex; justify-content:center;
    border-top:1px solid var(--hair);
    border-bottom:1px solid var(--hair);
  }
  .motif svg{height:46px; width:auto;}

  /* ---------- Sections generic ---------- */
  section{padding:100px 0;}
  .section-label{
    font-size:0.78rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted);
    margin-bottom:16px;
  }
  .section-head{max-width:56ch; margin-bottom:56px;}
  .section-head h2{font-size:clamp(1.7rem, 3.2vw, 2.3rem); letter-spacing:0.04em;}
  .section-head p{color:var(--muted); margin-top:14px; font-size:1.02rem;}
  hr.hair{border:none; border-top:1px solid var(--hair); margin:0;}

  /* ---------- Despre ---------- */
  /* .despre-grid împarte secțiunea Despre în text și imagine. */
  .despre-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;
  }
  .despre-copy{display:flex; flex-direction:column; align-items:flex-start;}
  .despre-grid p{font-size:1.03rem; margin-top:16px; color:#2b2b2b;}

  .despre-figure{
    width:100%;
    max-width:500px;
    margin-left:auto;
  }
  .despre-img{
    position:relative;
    aspect-ratio:4/5;
    background:repeating-linear-gradient(45deg, #f0f0f0 0 12px, #fafafa 12px 24px);
    border:1px solid var(--hair);
    overflow:hidden;
  }
  .despre-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .despre-mini-stack{
    display:flex;
    align-items:flex-end;
    gap:18px;
    margin-top:26px;
    flex-wrap:wrap;
  }
  /* .despre-mini afișează fotografiile mici în stil polaroid. */
  .despre-mini{
    width:238px;
    background:#fff;
    border:1px solid #e5e5e5;
    padding:8px 8px 12px;
    box-shadow:0 18px 28px rgba(0,0,0,0.12);
    transition:transform .25s ease, box-shadow .25s ease;
    cursor:pointer;
  }
  .despre-mini.left{transform:rotate(-4deg);}
  .despre-mini.right{transform:rotate(2.5deg); margin-left:92px;}
  .despre-mini:hover{transform:scale(1.04) rotate(0deg); box-shadow:0 24px 36px rgba(0,0,0,0.17);}
  .despre-mini img{
    width:100%;
    height:210px;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
  }
  .despre-mini:hover img{transform:scale(1.08);}

  @media (max-width:760px){
    .despre-grid{grid-template-columns:1fr; gap:36px;}
    .despre-figure{max-width:100%; margin:0;}
    .despre-mini-stack{margin-top:18px;}
    .despre-mini{width:170px;}
    .despre-mini img{height:180px;}
  }

  /* ---------- Cursuri ---------- */
  /* .cursuri-list așază cele două tipuri de lecții în coloane. */
  .cursuri-list{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--hair);}
  .curs{
    border-bottom:1px solid var(--hair);
    border-right:1px solid var(--hair);
    padding:38px 34px;
  }
  .curs:nth-child(2n){border-right:none;}
  .curs h3{font-size:1.3rem; letter-spacing:0.03em;}
  .curs p{color:var(--muted); font-size:0.98rem; margin-top:12px;}
  .curs .pret{margin-top:16px; font-size:0.88rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink);}
  .curs-cu-poza{display:grid; grid-template-columns:minmax(0, 0.7fr) minmax(250px, 1.3fr); column-gap:28px; align-items:start;}
  .curs-cu-poza .curs-image{grid-column:2; grid-row:1 / span 3; width:calc(100% + 18px); height:340px; min-height:340px; align-self:center; object-fit:contain; background:#f4f4f4; margin:-20px -18px -20px 0; transform:translateY(-24px) rotate(1.5deg);}
  .curs-profesor{margin-top:8px; font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink);}
  .curs-cu-poza p + p{margin-top:10px;}
  .curs-cu-poza p:last-child{grid-column:1 / -1; margin-top:22px;}
  @media (max-width:700px){
    .cursuri-list{grid-template-columns:1fr;}
    .curs{border-right:none;}
    .curs-cu-poza{display:block;}
    .curs-cu-poza .curs-image{width:100%; height:260px; min-height:0; margin:-4px 0 28px;}
  }

  /* ---------- Poze de la cursuri si evenimente ---------- */
  /* .poze-grid organizează cele șase imagini într-o grilă responsive. */
  .poze-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 240px));
    justify-content:center;
    gap:30px 24px;
    position:relative;
    padding:48px 52px 54px 70px;
    border:1px solid #d9d2c8;
    border-radius:4px 16px 16px 4px;
    background:
      radial-gradient(circle at 20px 26px, rgba(150,140,128,0.55) 0 3px, transparent 3.5px) 0 0 / 100% 48px repeat-y,
      linear-gradient(90deg, transparent 0 51px, rgba(190,82,82,0.22) 51px 52px, transparent 52px),
      repeating-linear-gradient(to bottom, #fffdf8 0 31px, #dbe7ef 32px, #fffdf8 33px);
    box-shadow:inset 15px 0 0 rgba(227,220,210,0.55), 0 18px 40px rgba(45,38,31,0.12);
    isolation:isolate;
  }
  /* .poze-item este cadrul pătrat al fiecărei fotografii. */
  .poze-item{
    --tilt:0deg;
    width:100%;
    max-width:240px;
    aspect-ratio:1/1;
    overflow:visible;
    border:8px solid #fff;
    border-bottom-width:18px;
    background:#fff;
    position:relative;
    z-index:1;
    box-shadow:0 12px 24px rgba(0,0,0,0.12);
    transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
    transform-origin:center;
    transform:rotate(var(--tilt));
    cursor:pointer;
  }
  /* .poze-item::before și ::after sunt firele subțiri dintre fotografii. */
  .poze-item::after,
  .poze-item::before{
    content:'';
    position:absolute;
    display:block;
      border-color:rgba(10,10,10,0.55);
    border-style:solid;
    border-width:0;
    z-index:0;
    pointer-events:none;
  }
  /* Firul orizontal formează o arcadă fină între fotografiile vecine. */
  .poze-item::after{
    top:calc(50% - 6px);
    right:-25px;
    width:24px;
    height:12px;
      border-top-width:2px;
    border-radius:50%;
  }
  /* Firul vertical formează o curbă fină între rânduri. */
  .poze-item::before{
    left:calc(50% - 6px);
    bottom:-31px;
    width:12px;
    height:30px;
      border-left-width:2px;
    border-radius:50%;
  }
  .poze-item img{
    position:relative;
    z-index:1;
  }
  .poze-item:nth-child(1){--tilt:-3deg;}
  .poze-item:nth-child(2){--tilt:2deg;}
  .poze-item:nth-child(3){--tilt:-1.5deg;}
  .poze-item:nth-child(4){--tilt:2.5deg;}
  .poze-item:nth-child(5){--tilt:-2deg;}
  .poze-item:nth-child(6){--tilt:1.5deg;}
  .poze-item:nth-child(3)::after,
  .poze-item:nth-child(6)::after,
  .poze-item:nth-child(n+4)::before{display:none;}
  /* Când o fotografie este activă, celelalte se retrag discret. */
  .poze-grid:has(.poze-item:hover) .poze-item:not(:hover){
    transform:scale(.82) rotate(var(--tilt));
    opacity:.72;
  }
  /* Fotografia activă se mărește elegant și se îndreaptă în față. */
  .poze-item:hover{
    transform:scale(1.35) rotate(0deg);
    z-index:2;
    box-shadow:0 24px 46px rgba(0,0,0,0.24);
  }
  /* .poze-item img umple cadrul fără să deformeze fotografia. */
  .poze-item img{width:100%; height:100%; object-fit:cover; display:block;}
  @media (max-width:820px){
    .poze-grid{
      grid-template-columns:repeat(2, minmax(0, 240px));
      padding:42px 32px 48px 52px;
    }
    .poze-item:nth-child(2)::after,
    .poze-item:nth-child(4)::after,
    .poze-item:nth-child(n+3)::before{display:none;}
    .poze-item:nth-child(3)::after{display:block;}
    .poze-item:nth-child(-n+2)::before{display:block;}
  }
  @media (max-width:520px){
    .poze-grid{
      grid-template-columns:minmax(0, 240px);
      padding:38px 26px 44px 42px;
    }
    .poze-item::after{display:none;}
    .poze-item:nth-child(-n+5)::before{display:block;}
    .poze-item:nth-child(6)::before{display:none;}
  }

  /* ---------- Contact ---------- */
  /* .contact-section creează zona închisă pentru datele de contact și formular. */
  .contact-section{background:var(--ink); color:#fff;}
  .contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px;}
  .contact-grid .section-label{color:#a8a8a8;}
  .contact-grid .section-head p{color:#bdbdbd;}
  .contact-info{font-size:1.03rem;}
  .contact-info a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.4);}
  .contact-info a:hover{border-color:#fff;}
  .contact-row{display:flex; align-items:center; gap:14px; margin-bottom:22px;}
  .contact-row .icon{flex-shrink:0;}

  .social-row{display:flex; gap:14px; margin-top:34px;}
  .social-btn{
    width:48px; height:48px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.4);
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; color:#fff;
    transition:background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease;
  }
  .social-btn:hover{background:#fff; border-color:#fff; color:var(--ink); transform:translateY(-2px);}
  .social-btn svg{width:20px; height:20px; fill:currentColor;}

  /* .mini-form grupează câmpurile formularului într-o coloană. */
  form.mini-form{display:flex; flex-direction:column; gap:14px;}
  form.mini-form input, form.mini-form textarea{
    background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,0.4);
    color:#fff; padding:10px 0; font-family:inherit; font-size:0.98rem;
  }
  form.mini-form input::placeholder, form.mini-form textarea::placeholder{color:#a6a6a6;}
  form.mini-form input:focus, form.mini-form textarea:focus{outline:none; border-color:#fff;}
  form.mini-form button{
    margin-top:10px; align-self:flex-start;
    background:#fff; color:var(--ink); border:none;
    padding:13px 26px; font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer;
    transition:background .2s ease;
  }
  form.mini-form button:hover{background:#dedede;}

  /* .status-overlay acoperă ecranul când formularul este trimis. */
  .status-overlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(10,10,10,0.62);
    backdrop-filter:blur(4px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
    z-index:200;
  }
  .status-overlay.visible{opacity:1; pointer-events:auto;}
  /* .status-card afișează mesajul de succes sau eroare. */
  .status-card{
    width:min(420px, calc(100vw - 32px));
    background:#fff;
    border-radius:22px;
    padding:36px 28px 28px;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,0.2);
    transform:translateY(18px) scale(.96);
    transition:transform .3s ease;
  }
  .status-overlay.visible .status-card{transform:translateY(0) scale(1);}
  .status-icon{
    width:92px; height:92px;
    margin:0 auto 18px;
    border-radius:50%;
    position:relative;
    display:grid;
    place-items:center;
    animation:popIn .35s cubic-bezier(.16,1,.3,1);
  }
  .status-icon.success{background:linear-gradient(135deg,#1bbf5b,#1f8f4a);}
  .status-icon.error{background:linear-gradient(135deg,#ef4444,#c81e1e);}
  .status-icon::before{
    content:'';
    width:32px; height:16px;
    border-left:6px solid #fff;
    border-bottom:6px solid #fff;
    transform:rotate(-45deg) translateY(-2px);
    display:block;
    position:absolute;
    top:34px; left:30px;
    animation:checkPop .5s ease;
  }
  .status-icon.error::before{
    content:'×';
    font-size:56px;
    font-weight:700;
    color:#fff;
    width:auto; height:auto;
    border:none;
    transform:none;
    top:10px; left:50%;
    translate:-50% 0;
  }
  .status-title{
    margin:0 0 10px;
    font-size:1.7rem;
    font-family:'Jost', sans-serif;
    letter-spacing:0.04em;
    color:#111;
  }
  .status-text{
    margin:0;
    color:#444;
    line-height:1.6;
    font-size:1rem;
  }
  .status-error{
    margin-top:12px;
    font-size:0.82rem;
    color:#b42318;
    background:#fef3f2;
    border:1px solid #f7c7c2;
    border-radius:10px;
    padding:8px 10px;
    display:none;
  }
  .status-error.visible{display:block;}

  @keyframes popIn{
    0% {transform:scale(.6); opacity:0;}
    80% {transform:scale(1.08); opacity:1;}
    100% {transform:scale(1); opacity:1;}
  }
  @keyframes checkPop{
    0% {opacity:0; transform:rotate(-45deg) scale(.4) translateY(-2px);}
    60% {opacity:1; transform:rotate(-45deg) scale(1.15) translateY(-2px);}
    100% {opacity:1; transform:rotate(-45deg) scale(1) translateY(-2px);}
  }

  @media (max-width:760px){
    .contact-grid{grid-template-columns:1fr; gap:40px;}
  }

  /* footer afișează identitatea și drepturile site-ului. */
  footer{
    padding:36px 0; text-align:center; font-size:0.78rem; letter-spacing:0.08em; color:var(--muted);
    border-top:1px solid var(--hair);
    display:flex; flex-direction:column; align-items:center; gap:14px;
  }
  footer svg{width:26px; height:26px; fill:var(--ink);}

  /* .background-music păstrează playerul complet invizibil. */
  .background-music{display:none;}

  :focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; scroll-behavior:auto !important;}
  }