:root{
  --text-dark: #0A0F3D;
  --text-light: #475569;
  --bg-light: #ffffff;
  --bg-muted: #f8fafc;
  --line: #e5e7eb;
  --accent: #FFC107;
  --accent-color: #FFC107;
  --header-h: 64px;
  --radius: 16px;
  --shadow-sm: 0 6px 20px rgba(0,0,0,.12);
  --shadow: 0 28px 70px rgba(0,0,0,.35);
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  font-size: 100%;
}

body{
  margin:0;
  background:var(--bg-light);
  color:var(--text-light);
  font:1.1rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  overflow-x:hidden;
}

.wrap{
  width:min(1240px, 92vw);
  margin-inline:auto;
}

/* Anchor offset pentru header fix */
section[id]{
  scroll-margin-top: 110px;
}

/* HEADER */

.header{
  position:fixed;
  top:max(10px, env(safe-area-inset-top, 0px));
  left:50%;
  transform:translateX(-50%) translateY(-20px);
  width:min(1240px, 92vw);
  height:var(--header-h,56px);
  z-index:1000;
  background:#ffc107bf;
  color:#000;
  border-radius:9999px;
  overflow:visible;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  border:1px solid rgba(255,193,7,0.95);
  transition: transform .30s ease, opacity .30s ease;
  opacity:0;
  pointer-events:none;
}

/* devine vizibil după scroll */
.header.header-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}

.header .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text-dark);
  text-decoration:none;
  font-weight:800;
  font-size: 1.2rem;
}

/* icon-ul care se rotește – PNG transparent, fără fundal alb */
.brand-mark{
  display:block;
  width:42px;
  height:42px;
  transform-origin:center center;
  will-change:transform;
  background:transparent;
  border-radius:0;
  box-shadow:none;
}

.brand-name{display:none;}

.nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* HAMBURGER */

.burger{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:12px;
  background:transparent;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}

.burger:hover{
  transform:scale(1.03);
}

.burger span{
  position:absolute;
  left:10px;
  right:10px;
  height:2px;
  background:#000;
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.burger span:nth-child(1){top:12px;}
.burger span:nth-child(2){top:19px;}
.burger span:nth-child(3){top:26px;}

.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* MENIU – bulă mică în dreapta */

.menu-panel{
  position:fixed;
  top:90px;
  right:-100%;
  bottom:auto;
  width:min(70vw, 230px);
  max-height:calc(100vh - 180px);
  background:rgba(255,193,7,0.75);
  box-shadow:0 20px 70px rgba(0,0,0,.55);
  border-radius:22px;
  border:1px solid rgba(255,193,7,0.95);
  transition:right .32s cubic-bezier(.2,.6,.2,1);
  z-index:900;
  overflow-y:auto;
  padding:12px 12px 14px;
}

.menu-panel.open{
  right:16px;
}

.menu-inner{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 4px 4px;
}

.menu-inner a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text-dark);
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  font-weight:700;
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:0 10px 26px rgba(0,0,0,.20);
}

.menu-inner a:hover{
  background:#f9fafb;
  transform:translateY(-1px);
  box-shadow:0 16px 40px rgba(0,0,0,.25);
}

/* Link activ în meniu */
.menu-inner a.active{
  background:#0A0F3D;
  color:#ffffff;
  border-color:#0A0F3D;
}

/* BUTOANE */

.btn{
  appearance:none;
  border:2px solid transparent;
  padding:12px 24px;
  border-radius:14px;
  font-weight:700;
  font-size: 1rem;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition: all .2s ease;
}

/* accent „glass-like” */
.btn.accent{
  background:rgba(255,193,7,0.85);
  border-color:var(--text-dark);
  color:#000;
  box-shadow:0 18px 55px rgba(0,0,0,0.45);
}
.btn.accent:hover{
  background:rgba(255,202,44,0.95);
  box-shadow:0 26px 70px rgba(0,0,0,0.55);
}

.btn.outline{
  background:transparent;
  color:var(--text-dark);
  border-color:var(--text-dark);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.btn.outline:hover{
  background:var(--text-dark);
  color:var(--bg-light);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}

.expert-toggle-btn {
  padding: 14px 28px; /* Buton puțin mai mare */
  font-size: 1.1rem;
  margin-top: 1rem; /* Spațiu deasupra butonului */
}

/* HERO – acțiuni principale */
.hero-actions{
  display:flex;
  gap:16px;
  gap:24px;
  justify-content:center;
  margin-top:24px;
  flex-wrap:wrap;
}

/* containerul clicabil icon + text */
.hero-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:var(--text-dark);
  font-weight:700;
  font-size:0.98rem;
  gap:8px;
}

/* butonul rotund cu icon PNG */
.hero-cta-icon{
  width:68px;
  height:68px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  box-shadow:0 18px 55px rgba(0,0,0,0.35);
  border:2px solid rgba(0,0,0,0.06);
  transition:transform .2s ease, box-shadow .2s ease;
}

.hero-cta-icon img{
  display:block;
  width:34px;
  height:34px;
  object-fit:contain;
}

/* accent galben pentru telefon, verde pentru WhatsApp */
.hero-cta-call .hero-cta-icon{
  border-color:var(--accent);
}

.hero-cta-wa .hero-cta-icon{
  border-color:#25D366;
}

/* hover efect – „floating” */
.hero-cta:hover .hero-cta-icon{
  transform:translateY(-2px);
  box-shadow:0 24px 70px rgba(0,0,0,0.5);
}

/* textul de sub icon să nu se rupă urât */
.hero-cta-label{
  white-space:nowrap;
}

/* un pic de ajustare pentru text în buton */

/* LAYOUT */

/* header-spacer nu mai împinge hero-ul */
.header-spacer{
  height: 0;
}

.section{
  padding:64px 0;
}

.section-muted{
  background:var(--bg-muted);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.centered{text-align:center}

h1,h2,h3,h4{
  color:var(--text-dark);
  font-weight:800;
  line-height: 1.2;
  margin:0 0 1rem;
}

p{margin:0 0 1.5rem;}

.muted{opacity:0.9;}

.section-title{
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
}

.section .lead{
  max-width:800px;
  margin-inline:auto;
  margin-bottom: 3rem;
}

/* HERO */

.section.hero-content{
  padding:0;
}

.hero-content{
  position:relative;
  min-height:auto;
  z-index:1;
  display:block;
}

.hero-logo{
  display:block;
  width:100vw;
  max-width:none;
  height:100vh;
  max-height:none;
  object-fit:cover;
  margin:0 auto 0;
}

.hero-content .title{
  font-size:clamp(2.2rem, 5vw, 3.5rem);
  margin:32px auto 1rem;
}

.hero-content .lead{
  font-size:clamp(1.1rem, 2vw, 1.25rem);
  max-width:720px;
  margin-inline:auto;
  margin-bottom:2rem;
}

.hero-content::before{
  content:none;
}

/* wave jos la finalul hero-ului – override în <style> din HTML */

/* CARD GENERAL ALB */

.text-card{
  background:#ffffff;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,0.26);
  padding:24px 24px 28px;
  border:1px solid var(--line);
  margin-bottom:24px;
  transition:transform .22s ease, box-shadow .22s ease;
}

.text-card:hover{
  transform:translateY(-3px);
  box-shadow:0 30px 90px rgba(0,0,0,.40);
}

/* GRID */

.grid{display:grid; gap:24px;}
.grid-2{grid-template-columns: 1fr 1fr;}
.grid-3{grid-template-columns: repeat(3, 1fr);}

/* SERVICII – card galben cu shadow puternic */

.product{
  background:rgba(255,193,7,0.75);
  border-radius:var(--radius);
  padding:24px;
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.50);
  display:flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  border:1px solid rgba(255,193,7,.98);
}

.product:hover{
  transform:translateY(-4px);
  box-shadow:0 40px 100px rgba(0,0,0,.65);
  background:rgba(255,202,44,0.85);
}

.product-image{
  width:100px;
  height:100px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 20px;
  border:3px solid #0A0F3D;
  background:transparent; /* Am schimbat fundalul alb cu transparent */
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  transition:transform .2s ease;
}

.product-title{
  margin:0 0 8px;
  font-size:1.3rem;
  color:#0A0F3D;
}

.product-desc{
  margin:0 0 16px;
  color:#3a4253;
  flex-grow:1;
}

.product-btn{margin-top:auto;}

/* CONTACT */

.contact-card{
  max-width:800px;
  margin:32px auto 0;
  border-radius:var(--radius);
  background:var(--bg-light);
  border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(0,0,0,.40);
  transition:transform .22s ease, box-shadow .22s ease;
}

.contact-card:hover{
  transform:translateY(-3px);
  box-shadow:0 30px 90px rgba(0,0,0,.50);
}

.contact-form{padding:32px; text-align:left}

.contact-form .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}

.contact-form label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-weight:700;
  color:var(--text-dark);
}

.contact-form input,
.contact-form textarea{
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:14px;
  font:inherit;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
  background:var(--bg-light);
  color: var(--text-dark);
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,193,7,.35);
}

.form-actions{
  display:flex;
  gap:16px;
  align-items:center;
  margin-top:16px;
}

.form-status{
  margin-top:8px;
  color:#16a34a;
  font-weight:700;
}

/* =============== TIMELINE POVESTEA LUI DORU =============== */
/* ne asigurăm că secțiunea timeline stă deasupra oricărui pseudo-element anterior */
.expert-section{
  position: relative;
  z-index: 1;
}

.expert-section{
  position: relative;
}

.timeline{
  position: relative;
  max-width: 1040px;
  margin: 40px auto 8px;
  padding: 20px 0 10px;
}

/* linia pe mijloc */
.timeline-line{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:4px;
  transform:translateX(-50%);
  background: linear-gradient(180deg, #FFC107, #0A0F3D);
  border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* fiecare pas din timeline */
.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  column-gap:32px;
  margin:0 0 32px;
}

/* bulina de pe mijloc */
.timeline-item::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  border-radius:50%;
  transform:translate(-50%, -50%);
  background:#ffffff;
  border:3px solid #FFC107;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}

/* 1,3,5,... – text în stânga, poză în dreapta */
.timeline-item-left .timeline-card{
  grid-column:1;
}
.timeline-item-left .timeline-photo{
  grid-column:2;
  justify-self:flex-start;
}

/* 2,4,6,... – text în dreapta, poză în stânga */
.timeline-item-right .timeline-card{
  grid-column:2;
}
.timeline-item-right .timeline-photo{
  grid-column:1;
  justify-self:flex-end;
}

/* cardul de text */
.timeline-card{
  background:#ffffff;
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.40);
  border:1px solid var(--line);
  padding:18px 20px 20px;
}

.timeline-year{
  font-weight:800;
  font-size:0.95rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:4px;
}

.timeline-card h3{
  margin:0 0 8px;
  color:var(--text-dark);
  font-size:1.2rem;
}

.timeline-card p{
  margin:0;
  color:var(--text-light);
}

/* poza pătrată „floating” cu colțuri rotunjite */

.timeline-photo{
  flex-shrink:0;
}

.timeline-photo img{
  width:170px;
  height:170px;
  border-radius:24px;
  object-fit:cover;
  border:4px solid #ffffff;
  box-shadow:0 30px 90px rgba(0,0,0,.70);
}

/* cardul final de sub timeline */
.everyday-card ul{
  list-style:none;
  padding-left:0;
}

.everyday-card li{
  padding-left:1.5em;
  position:relative;
  margin-bottom:0.5rem;
}

.everyday-card li::before{
  content:'✓';
  color: var(--accent-color);
  position:absolute;
  left:0;
  font-weight:bold;
}

/* bloc final cu poza rotundă + text */
.expert-today{
  margin-top: 40px;
}

/* poza tatălui – cerc cu margine galbenă și shadow mare */
.expert-photo{
  display:grid;
  place-items:center;
  text-align:center;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin-bottom:0 !important;
}

.expert-photo img{
  width:250px;
  height:250px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid var(--accent-color);
  box-shadow:0 36px 110px rgba(0,0,0,.70);
}

/* Imaginea din secțiunea "Despre" */
.about-image-container{
  display:grid;
  place-items:center;
  text-align:center;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin-bottom:0 !important;
}

.about-image{
  width:280px; /* Mai mare */
  height:280px; /* Mai mare */
  border-radius:50%;
  object-fit:cover;
  border:4px solid var(--accent-color);
  box-shadow:0 36px 110px rgba(0,0,0,.70);
}

/* FAQ – card galben cu shadow tare */

.faq-card{
  max-width:900px;
  margin-inline:auto;
  background:rgba(255,193,7,0.75);
  border-radius:22px;
  padding:24px 24px 28px;
  box-shadow:0 30px 90px rgba(0,0,0,.60);
  border:1px solid rgba(255,193,7,0.98);
  text-align:left;
  transition:transform .22s ease, box-shadow .22s ease;
}

.faq-card:hover{
  transform:translateY(-3px);
  box-shadow:0 40px 110px rgba(0,0,0,.70);
}

.faq-card .section-title{
  text-align:center;
  margin-bottom:24px;
}

.faq-list{
  max-width:100%;
  margin-inline:auto;
}

.faq-list details{
  background: var(--bg-light);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}

.faq-list summary{
  font-weight:700;
  color:var(--text-dark);
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.faq-list summary::-webkit-details-marker{display:none;}

.faq-list summary::after{
  content:'+';
  font-size:1.5rem;
  transition:transform .2s ease;
}

.faq-list details[open] summary::after{
  transform:rotate(45deg);
}

.faq-list .faq-answer{
  padding-top:16px;
}

.faq-list .faq-answer p:last-child{margin-bottom:0;}

/* REVEAL ANIMATIONS */

.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.in-view{
  opacity:1;
  transform: translateY(0);
}

/* FOOTER */

.footer{
  background:var(--text-dark);
  color:#fff;
  padding:48px 0;
  margin-top:64px;
}

.footer .wrap{text-align:center;}

.footer a{
  color: var(--accent);
  text-decoration:none;
}

.footer a:hover{text-decoration:underline;}

.footer .foot-dock{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
  align-items:center;
}

/* REDUCED MOTION – respectă preferințele utilizatorului */
@media (prefers-reduced-motion: reduce) {
  *{
    scroll-behavior:auto !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* RESPONSIVE */

@media (min-width: 768px){
  .brand-name{display:inline;}
}

@media (max-width: 980px){
  .grid-3{grid-template-columns:repeat(2, 1fr);}
}

@media (max-width: 767px){
  .grid-2,
  .grid-3{grid-template-columns:1fr;}
  .contact-form .row{grid-template-columns:1fr;}
}

@media (max-width: 900px){
  .timeline{
    padding-left:0;
    padding-right:0;
  }

  /* linia cronologică rămâne în stânga */
  .timeline-line{
    left:16px;
  }

  /* renunțăm la grid și punem totul pe verticală */
  .timeline-item{
    display:block;         /* nu mai e grid */
    padding-left:56px;     /* spațiu între linie și conținut */
    margin-bottom:65px;    /* am mărit spațiul între ani */
  }

  .timeline-item::before{
    left:16px;
  }

  /* cardul de text – un singur bloc pe rând */
  .timeline-card{
    margin:0 0 10px;
    width:100%;
  }

  /* poza sub text, pe toată lățimea cardului */
  .timeline-photo{
    margin:0 0 10px;
  }

  .timeline-photo img{
    width:100%;
    max-width:280px;      /* să nu fie uriașă */
    height:auto;
    border-radius:20px;
  }
}

@media (max-width: 640px){
  .timeline-item{
    padding-left:40px;
  }
}
/* Asigurăm că secțiunea cu timeline-ul este mereu vizibilă */
#expert.reveal{
  opacity: 1;
  transform: none;
}

@media (max-width: 480px){
  .hero-cta-label{
    white-space:normal;
    text-align:center;
  }
}


/* Animație pentru butonul "Vezi povestea" */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.expert-toggle-btn.in-view {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) 0.5s both;
}

/* Stiluri pentru ascunderea și afișarea cronologiei */
.expert-details {
  display: grid;
  grid-template-rows: 0fr; /* Începe închis */
  transition: grid-template-rows 0.5s ease-in-out;
  /* Eliminăm orice spațiere care ar putea rămâne vizibilă */
  margin-top: -1px; /* Ascunde complet orice urmă a conținutului */
  padding-top: 0;
}

.expert-details > * {
  overflow: hidden; /* Ascunde conținutul care depășește */
}

.expert-details.open {
  grid-template-rows: 1fr; /* Se deschide la înălțimea completă */
  margin-top: 0;
}

/* Și tot ce e .reveal în interiorul ei la fel – fără fade-in, doar direct vizibil */
#expert .reveal{
  opacity: 1;
  transform: none;
}