:root{
  --bg:#0f1a1a;
  --text:#1d1d1f;
  --muted:#6b7280;
  --primary:#ff4b4b;
  --soft:#e9f0f2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Raleway,Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text)}
.site-logo img {
  height: 50px;   /* ajustează după header */
  width: 50px;    /* păstrează proporțiile */
  display: block;
}
/* social icons */
.header-actions .social{display:flex;}
.header-actions .social__link{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:999px;background:transparent;color:#e5e7eb;transition:background-color .15s ease,transform .15s ease,color .15s ease}
.header-actions .social__link:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateY(-1px)}
.header-actions .social__link svg{width:18px;height:18px;display:block}
/* social icons */
.site-footer .social-container{display:flex; justify-content: center; padding: 30px 0;}
.site-footer .social{display:flex; }
.site-footer .social__link{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:999px;background:transparent;color:#a4bac2;transition:background-color .15s ease,transform .15s ease,color .15s ease}
.site-footer .social__link:hover{background:rgba(27, 10, 10, 0.12);color:#fff;transform:translateY(-1px)}
.site-footer .social__link svg{width:30px;height:30px;display:block}


a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.text-red{color:#f56356;}
.text-blu{color: #3796b8;}

.container{width:min(1180px,92%);margin-inline:auto}
.section{padding:72px 0}
.section--soft {background:#d1dce0;}

.section--soft h2{
  font-size: 48px;
  letter-spacing: -1px;
  line-height: 30px;
  color: #072428;
  font-weight: 700;
  font-family: "Raleway";
}
.section--soft h4{
  font-size: 20px;
  letter-spacing: -1px;
  line-height: 24px;
  color: #072428;
  font-weight: 700;
  font-family: "Raleway";
}


.video-note{display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-size: 14px;
letter-spacing: 0px;
color: #072428;
font-weight: 400;
font-family: "Raleway";justify-content: center;width: 100%;}
.logo-recorder{height:16px; width:auto; vertical-align:middle}
.section--dark {
  background-color: #000; /* fallback */
  background-image: url('/assets/img/masks.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: #fff;
  height: 786px;
}
.section--dark .ajuta{  padding: 450px 0 0 0; }
.section--dark p{
  font-size: 24px;
  letter-spacing: -1px;
  color: #ffffff;
  font-weight: 700;
  font-family: "Raleway";
}
.section--dark .accent{
  color: #90dcf4;
}

.center{text-align:center}
.hidden{display:none}

.btn{display:inline-block;padding: 8px 12px;border-radius: 12px;background:#fff;border:2px solid #ddd;font-weight:600}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.btn--primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn--ghost{background:transparent;border-color:#ccc}
.btn--danger{background:#d62828;color:#fff;border-color:#d62828}

.grid-1{text-align: center;padding: 22px 0 72px 0;}

.grid-0 .title, .grid-0 .red-title {
font-size: 24px;
letter-spacing: -1px;
line-height: 30px;
color: #072428;
font-weight: 700;
font-family: "Raleway";
text-align: center;
}
.grid-0 .title p{  
  width: 845px;
  height: 68px;
  margin: 0 auto;
  padding-top: 30px;
}
.grid-0 .red-title p{  
  color: #fe3233;
}
.grid-0 .doc-title{
  font-size: 48px;
  letter-spacing: -1px;
  font-weight: 700;
  font-family: "Raleway";
}
.grid-1 .btn-row{justify-content: center;}

.grid-1 .callout{
  padding:72px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-1 .callout-txt{
  font-size: 36px;
  letter-spacing: -1px;
  line-height: 36px;
  color: #072428;
  font-weight: 700;
  font-family: "Raleway";
  max-width: 850px;
  margin: 0 auto;
}
.grid-1 .callout .accent{
  font-size: 60px;
  letter-spacing: -1px;
  line-height: 80px;
  color: #3796b8;
}
.grid-1 .callout-carousel .accent_pp{
  font-size: 179px;
  letter-spacing: -4px;
  line-height: 149px;
  color: #a4bac2;
  font-weight: 300;
  font-family: "Raleway";
}
.grid-1 .after-callout{
  font-size: 24px;
  letter-spacing: -1px;
  line-height: 32px;
  color: #072428;
  font-weight: 400;
  font-family: "Raleway";
  margin: 0 auto;
}

.grid-2{display:grid;grid-template-columns:1.2fr 1.1fr;gap:30px; padding: 72px 0 0 0;}
.grid-2 p{
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 24px;
  color: #072428;
  font-weight: 400;
  font-family: "Raleway";
  text-align: justify;
}
.grid-0{padding: 22px 0 2px 0;}
@media (max-width: 900px){.grid-2{grid-template-columns:1fr}}
@media (max-width: 430px){
  .site-logo img {
    height: 30px;   /* ajustează după header */
    width: 30px;    /* păstrează proporțiile */
  }
  .grid-1 .callout-txt{
    font-size: 22px;
    line-height: 26px;
    max-width: 92%;
    margin: 0 auto;
  }

  .grid-1 .callout .accent{
    font-size: 34px;
    line-height: 40px;
  }

  .grid-1 .callout-carousel .accent_pp{
    /* font-size: 96px;
    line-height: 84px;
    letter-spacing: -2px; */
    display: none;
  }

  /* mic polishing pentru container și săgeți */
  .callout{ min-height: auto; }
  .callout-carousel{
    grid-template-columns: 32px 1fr 32px;
    gap: 6px;
  }
  .callout-nav{
    font-size: 24px;
    padding: 2px 4px;
  }
}

.site-header{position:sticky;top:0;z-index:40;background:#000000;color:#fefefe}
.header-bar{display:flex;align-items:center;gap:24px;padding:14px 0}
.brand{font-weight:800;font-size:20px}
.main-nav ul{display:flex; align-items: center; list-style:none;margin:0;padding:0; text-transform: uppercase; font-family: 'Raleway', sans-serif; font-weight: bolder; font-size: 14px;}
.main-nav a {
  display: inline-block;
  padding: 6px 10px; 
  border-radius: 6px; 
  transition: background-color 0.2s ease;
}
.main-nav a.active {
  background-color: #ff3133;
}

.header-actions{margin-left:auto;display:flex;gap:16px;align-items:center}
.lang{font-weight:700}

.site-footer{background:#f7f7f8;padding:68px 0 40px 0;color:#333}
.partners__row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:center}
.partners__col{display:flex;align-items:center;justify-content:center; flex-direction: column;}
.partners img{max-height:34px}
.footer-meta{display:flex;justify-content:space-between;align-items:center;margin-top:18px;border-top:1px solid #e5e7eb;padding-top:14px}
.footer-meta .legal{display:flex;gap:12px;list-style:none;padding:0;margin:0}
.muted{color:var(--muted);font-size:14px; padding-bottom: 10px;}
@media (max-width:900px){.footer-meta { flex-direction: column; } .copyright{padding-bottom: 10px;}}
@media (max-width:720px){.footer-meta .legal{ flex-direction: column; align-items: center;} .footer-meta .legal .separator{ display:none; } .footer-meta .legal li{ margin: 6px 0; }}
@media (max-width:570px){.partners__row{ grid-template-columns:1fr; gap:35px; } .partners__col{ flex-direction: column; gap:0px; } .partners img{ max-height:28px; } }
.hero{position:relative;color:#fff;overflow:hidden; background-color: #000000; height: 416px;}
.hero__bg{
  display:block;
  width: min(1180px, 92%);
  height:416px;
  margin: 0 auto;
  object-fit: contain;
  object-position: right;
  filter:brightness(0.6);
}
.hero__content{position:relative;margin-top:-250px;padding-bottom:20px}
.hero h1{
    font-size: 100px;
    letter-spacing: -2px;
    line-height: 0;
    color: #ffffff;
    font-weight: 700;
    font-family: "Raleway";
    margin: 45px 0;
  }
  .hero p{
    font-size: 18px;
    letter-spacing: 0px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Raleway";
    max-width: 480px;
  }
@media (max-width:900px){
  .hero__bg{height:360px; width: min(1180px, 92%); margin:0 auto; object-fit: contain; object-position:right}
  .hero h1{font-size:40px}
  .hero__content{margin-top:-260px}
}

.video-card{max-width:560px}
.video-card__thumb{position:relative;display:block}
.video-card__thumb .play{position:absolute;inset:0;margin:auto;width:70px;height:70px;border-radius:50%;background:var(--primary);opacity:.9}
.masks{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:24px}
@media (max-width:900px){.masks{grid-template-columns:repeat(2,1fr)}}

.section--kpi{padding:0;}

.section--kpi .kpi{background:#edf1f3;height:369px; font-family: "Raleway"; }
.section--kpi .kpi .kpi__inner{display: flex; justify-content: center; align-items: center;height:369px;}
.section--kpi .kpi .kpi__left, 
.section--kpi .kpi .kpi__mid{
  font-size: 36px;
  letter-spacing: -2px;
  line-height: 48px;
  color: #072428;
  font-weight: 700;
 }
.section--kpi .kpi .kpi__kpi{
  font-size: 132px;
  letter-spacing: -3px;
  line-height: 165px;
  color: #fe3233;
  font-weight: 700;
 }
.section--kpi .kpi .kpi__mid{
  font-size: 36px;
  letter-spacing: -2px;
  line-height: 48px;
  color: #072428;
  font-weight: 700;
  margin-top:-65px;
}
.section--kpi .kpi .kpi__mida{
  font-size: 245px;
  letter-spacing: -12px;
  line-height: 327px;
  color: #072428;
  font-weight: 250;
}
.section--kpi .kpi .kpi__right{
  font-size: 36px;
  letter-spacing: -2px;
  line-height: 48px;
  color: #072428;
  font-weight: 700;
  padding-left:10px;
}
.section--kpi .kpi .kpi__right span{
  font-size: 60px;
  letter-spacing: -1px;
  line-height: 80px;
  color: #13c0c3;
  font-weight: 700;
}

@media (max-width:900px){.kpi .kpi__inner{grid-template-columns:1fr}}
@media (max-width: 430px){
  .section--kpi .kpi{
    height: auto;
    padding: 24px 12px;
  }
  .section--kpi .kpi .kpi__inner{
    height: auto;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .section--kpi .kpi .kpi__left,
  .section--kpi .kpi .kpi__mid,
  .section--kpi .kpi .kpi__right{
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.5px;
  }

  .section--kpi .kpi .kpi__mid{
    margin-top: 0;            /* elimină ridicarea pe mobil */
  }

  .section--kpi .kpi .kpi__kpi{
    font-size: 64px;
    line-height: 72px;
    letter-spacing: -1px;
  }

  .section--kpi .kpi .kpi__mida{
    display: none;
  }

  .section--kpi .kpi .kpi__right{
    padding-left: 0;          /* aliniere pe centru pe mobil */
  }
  .section--kpi .kpi .kpi__right span{
    font-size: 30px;
    line-height: 38px;
  }
}

.results{padding-bottom: 70px;}
.results h3{
  width: 608px;
  /* height: 125px; */
  font-size: 48px;
  letter-spacing: -1px;
  line-height: 30px;
  color: #072428;
  font-weight: 400;
  font-family: "Raleway";
}
.results h4{
  font-size: 18px;
  color: #072428;
  font-weight: 600;
  font-family: "Raleway";
}
/* liste cu bullets personalizate */
.list{padding-left:0;list-style:none}
.list li{position:relative;padding-left:22px;margin:16px 0}
.list li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:#ff4b4b}
@media (max-width: 930px){
  .grid-0 .title p {  
    width: 100%;
  }
}
@media (max-width: 720px){
  .grid-0 .title, .grid-0 .red-title{
    font-size: 19px;
    line-height: 23px;
 }
}
@media (max-width: 430px){
.results h3{width: 100%; font-size: 30px;}

.grid-0 .title p {  
  width: 100%;
  height: auto;
  padding-top: 15px;
}
.grid-0 .title, .grid-0 .red-title {
    font-size: 19px;
    line-height: 26px;
}
}



.povesti {padding: 0 0;}
/* === Youth grid === */
.youth-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0px;
}
.youth-card {
  position: relative;
  display: block;
  width: 312px;
  height: 393px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  background: #0f172a;
  transition: transform .25s ease, box-shadow .25s ease;
}

.youth-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
  opacity: .92;
}
.youth-card::after{                 /* mic overlay în partea de jos */
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:38%;
  background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  pointer-events:none;
}
.youth-name{
  position:absolute; left:14px; bottom:12px;
  color:#fff;
  font-weight:800;
  font-size:22px;
  letter-spacing:.2px;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.youth-card:hover {
  transform: scale(1.02);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

.youth-card:hover img {
  filter: grayscale(0%) contrast(1.05);
  opacity: 1;
  transform: scale(1.05); /* imaginea zoom și mai mult pentru efect */
}

/* Responsive */
@media (max-width: 1100px){
  .youth-grid{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .youth-name{ font-size:20px; }
}
@media (max-width: 780px){
  .youth-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .youth-name{ font-size:18px; left:12px; bottom:10px; }
}
@media (max-width: 430px){
  .youth-grid{ grid-template-columns:1fr; gap:14px; }
  .youth-name{ font-size:18px; }
  .youth-card {
    width: 100%;
    height: auto;
  }
}


.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-box{
  position: relative;
  width: 859px; max-width: 95%;
  height: 727px; max-height: 95%;
  background: #100f0f;
  color: #fff;
  border-radius: 8px;
  overflow: hidden;
  padding: 100px 60px 0 50px;
}

.modal-bg{
  position: absolute;
  top: 0px; right: 0px;
  width: 357px; height: 450px;   
  background-size: cover;
  background-position: center;
  opacity: .15;
  pointer-events: none;
  z-index: 1;
}

.modal-content{ position: relative; z-index: 2; padding: 28px; }

.modal-box h1, .modal-box h2 {
  font-size: 36px;
  letter-spacing: -1px;
  line-height: 28px;
  color: #ffffff;
  font-weight: 700;
  font-family: "Raleway";
}
.modal-box h2 {color: #f56356;}
.modal-box p {
  font-size: 18px;
  letter-spacing: 0px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Raleway";
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 37px;
  height: 37px;
  background-color: #f56255;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.modal-close:hover {
  opacity: 0.9;
}

@media (max-width: 430px){
  .modal-box {
    width: 100%;
    height: auto;
    padding: 50px 10px;
  }
  .modal-box h1, .modal-box h2 {
    font-size: 20px;
    line-height: 25px;
  }
  .modal-box p {
    font-size: 14px;
  }
}

.video-carousel { 
  margin: 0; height:600px; background: radial-gradient(circle at center, #1e2b2d 0%, #0d1416 100%);color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top:50px;
}
.vc-title { margin: 0 0 12px; font-weight: 800; }

.vc-player {
  position: relative;
  
  /* background: #000; */
  /* border-radius: 10px; */
  overflow: hidden;
  /* box-shadow: 0 10px 24px rgba(0,0,0,.18); */
}
.vc-frame { display:block; position:relative; background: transparent;border: none;}
.vc-img { width:844px; height:476px; display:block; }
.vc-play {
  position:absolute; inset:auto 16px 16px auto;
  background:#f56255; color:#fff; width:56px; height:56px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.vc-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:none; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
}
.vc-prev { left:10px; }
.vc-next { right:10px; }
.vc-nav:hover { background:rgba(0,0,0,.75); }

.vc-meta {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 4px 0;
}
.vc-caption-title { font-weight:700; }
.vc-caption-duration { opacity:.7; margin-left:8px; }
.vc-counter { font-weight:700; opacity:.7; }

@media (max-width: 760px){
  .vc-play { width:48px; height:48px; font-size:20px; right:12px; bottom:12px; }
  .vc-nav { width:38px; height:38px; font-size:22px; }
}

/* container embed ascuns implicit */
.vc-embed { width: 100%; display: none; background:#000; aspect-ratio: 16/9; }
.vc-embed iframe { width:100%; height:100%; border:0; display:block; }

/* când rulează video, ascundem thumbnail-ul și arătăm embed-ul + butonul X */
.vc-player.is-playing .vc-frame { display: none; }
.vc-player.is-playing .vc-embed { display: block;width: 844px; height: 476px; }
.vc-player.is-playing .vc-stop { display: flex; }

.vc-stop{
  position:absolute; top:12px; right:12px;
  width:38px; height:38px; border:none; cursor:pointer;
  background:#f56255; color:#fff; border-radius:6px;
  align-items:center; justify-content:center; font-weight:700; z-index:3;
}
.vc-stop[hidden]{ display:none; }

.share { position: relative; display: inline-block; }
.share__button {
  cursor: pointer;font-family: "Raleway"; height: 38.5px;
}


.share__panel {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 320px; background: #fff; border: 1px solid #e5e7eb;
  border-radius: .75rem; padding: .75rem; box-shadow: 0 8px 30px rgba(0,0,0,.12); z-index: 50;
}

.share__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
.share__item {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem .65rem; border: 1px solid #e5e7eb; border-radius: .6rem; background: #fafafa; text-decoration: none; color: #111;
}
.share__item:hover { background: #f3f4f6; }
.share__item:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }

.share__hint { margin-top: .6rem; font-size: .85rem; color: #6b7280; }
 /* =========================
   Responsive Header / Nav
   ========================= */
/* Burger button (hidden on desktop) */
.nav-toggle { display:none; background:none; border:0; padding:10px; cursor:pointer; }
.nav-toggle__bar { display:block; width:24px; height:2px; margin:5px 0; background:#fff; transition:transform .2s,opacity .2s; }

/* Backdrop that darkens content when menu is open on mobile */
.nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:999; }

/* Mobile layout 
@media (max-width: 900px){
  .nav-toggle { display:block; }
  .main-nav {
    position: fixed; inset:0 auto 0 0; 
    width: 78%; max-width: 340px; background:#000; color:#fff;
    transform: translateX(-100%);
    transition: transform .25s ease; z-index: 1000; padding: 20px 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
  .main-nav .menu { display:block; }
  .main-nav .menu li { margin:14px 0; }
  .main-nav .menu a { display:block; padding:12px 8px; font-size:18px; }
  .site-header.menu-open .main-nav { transform: translateX(0); }
  .site-header.menu-open .nav-backdrop { display:block; }
}
*/
/* Burger -> X animation when open */
.site-header.menu-open .nav-toggle__bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.site-header.menu-open .nav-toggle__bar:nth-child(2){ opacity:0; }
.site-header.menu-open .nav-toggle__bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Ensure active link remains visible on dark background */
@media (max-width:650px){
  .main-nav ul {font-size: 10px;}
}
@media (max-width:600px){
  .main-nav a {padding: 4px 6px;}
}
@media (max-width:510px){
  .header-actions {display: none;}
}




/* =========================
   Share component tweaks
   ========================= */
/* Make sure the panel stays above other content */
.share { position: relative; }
.share__panel { z-index: 1001; }
/* On small screens, widen the panel a bit and prevent overflow */
@media (max-width: 560px){
  .share__panel{ left:auto; right:0; min-width: 280px; max-width: 92vw; }
}


/* Scoped styling pentru carousel-ul callout (nu atinge restul site-ului) */
  .callout-carousel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    justify-items: center;
    margin-top: 16px;
  }
  .callout {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 64px;
  }
  .callout-nav {
    border: none;
    background: transparent;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    user-select: none;
  }
  .callout-nav:focus-visible {
    outline: 2px dashed #f56255;
    outline-offset: 2px;
  }
  .callout-txt {
    /* păstrează stilul existent, dar permite tranziție fină */
    transition: opacity 200ms ease-in-out;
  }
  @media (max-width: 640px) {
    .callout-carousel { gap: 6px; }
    .callout-nav { font-size: 26px; padding: 2px 6px; }
  }