/* =========================================================
   VERTICAL RHYTHM — spațiere mai aerisită, consistentă
   (adaugă la FINALUL styles.css)
   ========================================================= */
   :root{
    /* scală fluidă de spații (folosită mai jos) */
    --sp-1: clamp(8px, 1.2vw, 14px);
    --sp-2: clamp(12px, 1.6vw, 18px);
    --sp-3: clamp(16px, 2.2vw, 26px);
    --sp-4: clamp(22px, 3.2vw, 38px);
    --sp-5: clamp(30px, 4.6vw, 56px);
    --sp-6: clamp(44px, 6.4vw, 88px);
  }
  
  /* --- Secțiuni: mai mult „aer” sus & jos --- */
  section{ padding-block: var(--sp-6); }
  h2{ margin: 0 0 var(--sp-3); }
  .section-sub{ margin: var(--sp-1) auto var(--sp-4); line-height: 1.75; }
  
  /* --- Grile & carduri: spații sănătoase --- */
  .cards,
  .showcase-grid,
  .insp-grid,
  .fgrid,
  .price-grid{ gap: var(--sp-3); }
  
  .panel.pad{ padding: var(--sp-3); }
  .f-card{ padding: calc(var(--sp-3) + 6px) var(--sp-3); }
  
  /* --- HERO landing/contact: distanțe echilibrate --- */
  .hero-landing .hero-title{ margin-bottom: var(--sp-2); }
  .hero-landing .hero-bar{ margin: var(--sp-2) auto var(--sp-2); }
  .hero-landing .hero-sub{ margin: 0 auto var(--sp-3); }
  .hero-landing .hero-ctas{ gap: var(--sp-2); margin-top: var(--sp-2); justify-content:center; }
  
  /* --- „Descoperă sala” / „Inspirație” / „De ce CrossGym” --- */
  .showcase .container,
  .insp .container,
  .why .container{ max-width: 1120px; }
  
  /* --- PRICING: aer între listă și butoane --- */
  .price-card .ph{ padding-bottom: var(--sp-1); }
  .price-card .list{ padding: var(--sp-2) var(--sp-3); }
  .pricing .call-bar{ margin-top: var(--sp-3); }
  


  /* =========================================================
   Pricing cards – simplu & glowy (index + pricing)
   ========================================================= */
.price-grid{
  --card-min: 340px;                          /* <- mai late pe desktop */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  align-items: stretch;
  margin-top: clamp(12px, 2vw, 18px);
}

.price-card{
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

/* glow fin din colțuri (fără trucuri complicate) */
.price-card::after{
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(280px 120px at 0% 0%,    rgba(255,210,31,.22), transparent 60%),
    radial-gradient(280px 120px at 100% 100%, rgba(255,210,31,.16), transparent 60%);
  opacity: 0;
  filter: blur(.5px);
  transition: opacity .25s ease;
}

.price-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,210,31,.32);
  box-shadow:
    0 18px 44px rgba(0,0,0,.5),
    0 0 28px rgba(255,210,31,.12) inset;
}
.price-card:hover::after{ opacity: 1; }

/* interiorul cardului */
.price-card .ph{ padding: 22px 22px 10px; }
.price-card h3{ margin: 0 0 6px; font-size: 18px; }
.price-card .price{ margin: 0 0 8px; }
.price-card .value{
  font-weight: 800;
  font-size: clamp(26px, 4vw, 36px);
  color: var(--brand);
}

/* listă simplă, aliniată frumos (fără buline care „sar”) */
.price-card .list{ list-style: none; margin: 0; padding: 12px 22px 22px; }
.price-card .list li{
  margin: 10px 0; color: #cbd2dc;
  border-left: 3px solid var(--brand);
  padding-left: 12px;
}

/* butonul de telefon: mic glow + spațiu sus */
.call-bar{
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(16px, 3vw, 28px);
  background: var(--brand); color: #000; font-weight: 800;
  padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(255,210,31,.30);
  transition: transform .2s ease, filter .2s ease;
}
.call-bar:hover{ transform: translateY(-1px); filter: brightness(1.03); }

/* responsive: păstrăm lățimea plăcută pe ecrane mici */
@media (max-width: 980px){
  .price-grid{ --card-min: 300px; }
}
@media (max-width: 640px){
  .price-grid{ --card-min: 260px; }
}


  
  
  /* --- CONTACT: blocul cu hartă și CTA-uri, aer între secțiuni --- */
  .contact-block{ padding-top: var(--sp-4); margin-bottom: var(--sp-6); }
  .contact-block .map-cta{ gap: var(--sp-2); margin-top: var(--sp-3); }
  .map-cta .btn{ min-height: 46px; padding: 12px 18px; }
  
  /* --- Footer: mai respirabil --- */
  .site-footer{ margin-top: var(--sp-6); padding: var(--sp-5) 0 var(--sp-3); }
  .site-footer .footer-main{ gap: var(--sp-3) var(--sp-4); }
  .ft-legal{ margin-top: var(--sp-4); padding-top: var(--sp-2); }
  
  /* --- Mobile tweaks (mai compact, dar curat) --- */
  @media (max-width: 860px){
    section{ padding-block: var(--sp-5); }
    .panel.pad{ padding: var(--sp-2); }
    .contact-block{ margin-bottom: var(--sp-5); }
    .site-footer{ padding-block: var(--sp-5) var(--sp-3); }
  }
  @media (max-width: 560px){
    .hero-landing{ padding-block: var(--sp-5); }
    .hero-landing .hero-sub{ font-size: clamp(15px, 3.9vw, 18px); }
    .map-cta .btn{ flex: 1 1 100%; } /* butoanele full-width pe mobil */
  }
  


:root {
  --bg: #0f1012;
  --panel: #15171b;
  --muted: #b7bcc6;
  --text: #f7f7fb;
  --brand: #ffd21f;
  --border: #242730;
  --r: 18px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* Reset */
*{ box-sizing:border-box }
html, body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}
a{ color:var(--brand); text-decoration:none }

.container{ max-width:1200px; margin:0 auto; padding:0 20px }

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(15,16,18,.8); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}

/* GRID: logo | MENIU (centru) | contact | burger */
.nav{
  display:grid;
  grid-template-columns:auto 1fr auto auto; /* stânga | centru | dreapta | burger */
  align-items:center;
  gap:16px;
  height:64px;
}

/* LOGO generic (nu mai lasă imaginea să explodeze) */
.brand-logo{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  object-fit:contain;
  -webkit-user-drag: none;  /* optional: nu “tragi” din greșeală logo-ul */
}

/* Logo în NAVBAR – control de mărime responsive */
.brand-logo--nav{
  height: clamp(28px, 4.5vw, 44px); /* ~28-44px în funcție de lățime */
  aspect-ratio: 1/1;               /* păstrează forma pătrată dacă e PNG */
  border-radius: 10px;              /* dacă vrei colțuri moi */
}

/* Logo în FOOTER – un pic mai mic */
.brand-logo--footer{
  height: 40px;
  aspect-ratio: 1/1;
  margin-right: 10px;
}

/* Aliniere logo + text în header */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-weight:800;
  min-width:0;          /* previne întinderi ciudate */
}

/* Ascunde textul brand pe telefoane (dacă vrei doar pictograma) */
@media (max-width: 520px){
  .brand-name{ display:none; }
}

/* opțional: un pic mai înalt headerul dacă logo-ul e 44px */
.nav{ height: 72px; } /* sau lasă 64px dacă îți place mai compact */


/* Meniu CENTRAT pe desktop */
.menu{
  display:flex; gap:22px; align-items:center; justify-self:center;
}
.menu a{
  color:var(--text); opacity:.9; transition:opacity .2s, color .2s;
}
.menu a:hover, .menu a.active{ opacity:1; color:var(--brand) }

/* Contact separat la DREAPTA (desktop) */
.contact-cta{ justify-self:end; }

/* Contact din meniu vizibil DOAR pe mobil (ascuns pe desktop) */
.menu .menu-contact{ display:none; }

/* Burger (mobil) */
.burger{
  justify-self:end;
  display:none; background:none; border:0; color:var(--text); font-size:24px;
}

/* Butoane generice */
.btn{
  display:inline-block; background:var(--brand); color:#000;
  border-radius:12px; padding:12px 16px; font-weight:800; border:1px solid transparent;
}
.btn.outline{ background:transparent; color:var(--text); border:1px solid var(--border) }

/* ===================== HERO ===================== */
.hero{
  padding:72px 0;
  background:linear-gradient(180deg, rgba(255,210,31,.06), transparent);
}
.grid-2{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px }
.hero h1{ font-size:42px; line-height:1.1; margin:0 0 14px }
.lead{ color:var(--muted); font-size:18px }
.panel{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--shadow);
}
.pad{ padding:22px }
.badges{ display:flex; gap:10px; margin:18px 0 }
.badge{
  background:#1d1f24; border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; color:#c9ced9; font-size:13px;
}

/* ---------- HERO LANDING (bg + overlay + linii + animații) ---------- */
.hero-landing{
  position:relative;
  min-height: clamp(560px, 85vh, 920px);
  display:flex;
  align-items:flex-end;
  padding: 120px 0 48px;
  overflow:hidden;
}

/* imagine de fundal (folosim CSS var pentru ușurință) */
.hero-landing::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--hero);           /* ex: url('assets/hero/landing.jpg') */
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  filter: saturate(1.05);
  z-index: 0;
}

/* overlay întunecat ca textul să fie lizibil */
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: radial-gradient(1200px 600px at 30% 40%, rgba(0,0,0,0.15), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55));
}

/* linii verticale discrete (look de sală/echipamente) */
.hero-lines{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.05) 0,
      rgba(255,255,255,.05) 1px,
      transparent 1px,
      transparent 80px
    );
  mix-blend-mode: overlay;
}

/* conținut */
.hero-inner{ position:relative; z-index:3; max-width: 1100px; }
.hero-title{
  margin:0 0 10px;
  line-height: .95;
  letter-spacing: -0.02em;
}
.hero-title .line{
  display:block;
  font-weight: 800;
  font-size: clamp(44px, 9vw, 120px);
  opacity:0; transform: translateY(24px) scale(.98);
}
.hero-title .brand{ color: var(--brand); }

/* bară accent */
.hero-bar{
  width: clamp(140px, 32vw, 420px);
  height: 6px;
  background: var(--brand);
  border-radius: 4px;
  margin: 18px 0 22px;
  opacity:0; transform: translateY(16px);
}

/* descriere */
.hero-sub{
  max-width: 900px;
  color: var(--text);
  opacity:.92;
  font-size: clamp(16px, 2.2vw, 20px);
  margin: 0 0 24px;
  opacity:0; transform: translateY(16px);
}

/* CTA-uri */
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-lg{ padding:14px 20px; font-size:16px; }
.with-icon{ display:inline-flex; align-items:center; gap:10px; }
.with-icon svg{ display:block; }

/* ---------- ANIMAȚII ---------- */
@keyframes fadeUp { from {opacity:0; transform: translateY(24px) scale(.98)} to {opacity:1; transform:none} }
@keyframes slowIn { from {opacity:0; transform: translateY(16px)} to {opacity:1; transform:none} }
@keyframes bgIn   { from {transform: scale(1.08)} to {transform: scale(1)} }

.hero-landing.animate::before{ animation: bgIn 1.2s ease forwards; }

.hero-landing.animate .hero-title .l1{ animation: fadeUp .7s cubic-bezier(.22,.9,.2,1) .1s forwards; }
.hero-landing.animate .hero-title .l2{ animation: fadeUp .7s cubic-bezier(.22,.9,.2,1) .28s forwards; }
.hero-landing.animate .hero-title .l3{ animation: fadeUp .7s cubic-bezier(.22,.9,.2,1) .46s forwards; }

.hero-landing.animate .hero-bar{ animation: slowIn .6s ease .6s forwards; }
.hero-landing.animate .hero-sub{ animation: slowIn .6s ease .72s forwards; }
.hero-landing.animate .hero-ctas .btn{ animation: slowIn .6s ease .84s forwards; }

/* respectă preferința utilizatorului */
@media (prefers-reduced-motion: reduce){
  .hero-landing.animate *{ animation: none !important; }
  .hero-landing::before{ transform:none; }
}

/* responsive: pe ecrane foarte mici, micșorăm un pic padding-ul de jos */
@media (max-width: 600px){
  .hero-landing{ padding-bottom: 32px; }
}


/* ======= Centrăm hero-ul pe mijloc și reducem spațiul de sus ======= */
:root{
  /* înălțimea header-ului tău (dacă l-ai făcut mai înalt, schimbă aici) */
  --header-h: 64px;
}

/* 1) Hero pe mijloc (orizontal + vertical) */
.hero-landing{
  /* era: align-items:flex-end; padding:120px 0 48px; min-height:clamp(...); */
  display: grid;
  place-items: center;                     /* centru pe ambele axe */
  min-height: calc(100svh - var(--header-h));  /* ocupă ecranul sub header */
  padding: 48px 0;                         /* mai puțin spațiu sus/jos */
}

/* 2) Conținut centrat */
.hero-inner{
  text-align: center;
  justify-self: center;
  max-width: 1100px;  /* păstrează lățimea bună */
}

/* 3) Liniile din titlu să fie centrate */
.hero-title .line{ margin-inline: auto; }

/* 4) Bara galbenă și butoanele centrate */
.hero-bar{ margin-left:auto; margin-right:auto; }
.hero-ctas{ justify-content: center; }

/* 5) Un pic mai compact pe mobile foarte mici */
@media (max-width: 520px){
  .hero-landing{ padding: 36px 0; }
}


/* titluri centrul secțiunilor */
.center{ text-align:center }
.section-sub{ color:var(--muted); max-width:900px; margin:6px auto 24px }

/* raport 16:9 (imagini landscape) */
.r-16x9{ padding-top:56.25% } /* 9/16 = 0.5625 */

/* ======= SHOWCASE (galerie din secțiunea „Descoperă”) ======= */
.showcase-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:22px;
  margin-top:20px;
}
@media (max-width:1200px){ .showcase-grid{ grid-template-columns: repeat(4, 1fr);} }
@media (max-width:980px) { .showcase-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width:560px) { .showcase-grid{ grid-template-columns: 1fr;} }

.scard .ratio{ border-radius: 16px; overflow:hidden }
.scard .ratio img{ transition: transform .5s ease }
.scard:hover .ratio img{ transform: scale(1.05) }

.scard .cap{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px; gap:6px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 95%);
  color:#fff;
}
.scard .cap .t{ font-weight:800; font-size:18px; text-shadow:0 2px 8px rgba(0,0,0,.4) }
.scard .cap .d{ font-size:14px; opacity:.95 }

/* ======= PRICING ======= */
.price-grid{ grid-template-columns: repeat(4, 1fr); }
@media (max-width:980px){ .price-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .price-grid{ grid-template-columns: 1fr; } }

.price-card{
  border-radius: 18px;
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.price-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.35); }

.price-card .ph{
  padding:18px 18px 0 18px;
}
.price-card h3{
  margin:0 0 10px; font-size:20px;
}
.price-card .price{ margin:0 0 12px; }
.price-card .value{ font-size:34px; font-weight:800; color:var(--brand) }

.price-card .list{ padding: 14px 18px 18px 22px; }
.price-card .list li{ color:#cbd2dc }

/* Bară „Sună” */
.call-bar{
  margin-top: 20px;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--brand); color:#000; font-weight:800;
  padding:12px 18px; border-radius:12px;
  box-shadow: var(--shadow);
}
.call-bar:hover{ filter: brightness(1.02); }


/* accent pentru cuvintele evidențiate */
.brand{ color: var(--brand); }





/* ---------- INSPIRAȚIE ---------- */
.insp-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:22px;
  margin-top:20px;
}
@media (max-width: 980px){ .insp-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .insp-grid{ grid-template-columns: 1fr; } }

.insp-card .ratio{
  border-radius:18px; overflow:hidden;
}
.insp-card .ratio img{ transition: transform .5s ease; }
.insp-card:hover .ratio img{ transform: scale(1.05); }

.insp-card .cap{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px; gap:6px; color:#fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 96%);
}
.insp-card .t{ font-weight:800; font-size:18px; text-shadow:0 2px 10px rgba(0,0,0,.5) }
.insp-card .d{ font-size:14px; opacity:.95 }

/* ---------- DE CE CROSSGYM ---------- */
.fgrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
  margin-top:18px;
}
@media (max-width: 980px){ .fgrid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .fgrid{ grid-template-columns: 1fr; } }

.f-card{
  text-align:center;
  border-radius:18px;
  padding:26px 20px;
  border:1px solid var(--border);
  transition: transform .2s ease, box-shadow .2s ease;
}
.f-card:hover{ transform: translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.35); }

.f-ico{
  width:56px; height:56px; margin:6px auto 14px;
  display:grid; place-items:center;
  border-radius:16px; background:#0b0c0e; border:1px solid var(--border);
  color: var(--brand);
}
.f-title{ margin:6px 0 10px; font-size:20px; }


/* ===== Footer layout & style ===== */
.site-footer{
  border-top:1px solid var(--border);
  padding: 28px 0 16px;
  color:#aeb4c0;
  background: transparent; /* lăsăm bg-ul global */
}

.footer-main{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 36px;
  align-items:flex-start;
  padding-bottom: 18px;
  border-bottom:1px solid var(--border);
}

/* col stânga: brand */
.f-brand-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px; color:var(--text);
}
.f-brand-head strong{ font-weight:800; }

/* col centru: link-uri */
.f-links h4,
.f-contact h4{ color:var(--text); margin:0 0 10px; }

.f-list{ list-style:none; margin:0; padding:0; }
.f-list li{ margin:6px 0; }
.f-list a{ color:#cfd4df; }
.f-list a:hover{ color:var(--brand); }

/* col dreapta: contact info cu iconițe */
.f-contacts{ list-style:none; margin:0; padding:0; }
.f-contacts li{
  display:flex; align-items:flex-start; gap:10px;
  margin:10px 0;
}
.f-contacts .ico{
  color:var(--brand);
  line-height:1; margin-top:2px;
}
.f-contacts a{ color:#cfd4df; }
.f-contacts a:hover{ color:var(--brand); }

/* bară legal */
.ft-legal{
  text-align:center;
  font-size:14px;
  color:#9ea5b2;
  padding-top:14px;
}

/* responsive */
@media (max-width: 980px){
  .footer-main{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .footer-main{ grid-template-columns: 1fr; text-align:center; }
  .f-contacts li{ justify-content:center; }
  .f-list li{ margin:8px 0; }
  .f-brand-head{ justify-content:center; }
}



/* ================== FIX ALIGN - "De Ce CrossGym?" ================== */
/* îngustăm puțin conținutul pentru o compoziție mai compactă */
.why .container{ max-width:1100px; }

/* columne egale, centrate vizual, carduri cu aceeași înălțime */
.why .fgrid{
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 24px;
  justify-items: stretch;      /* întinde cărțile pe lățimea coloanei */
  align-items: stretch;
}
.why .f-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
}

/* înălțimi consistente pt. icon + titlu */
.why .f-ico{ margin-top: 6px; }
.why .f-title{ margin: 8px 0 10px; }

/* breakpoint-uri */
@media (max-width: 980px){
  .why .container{ max-width: 900px; }
  .why .fgrid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .why .fgrid{ grid-template-columns: 1fr; }
}

/* ================== FIX ALIGN - FOOTER ================== */
/* ușor mai îngust pentru aspect simetric */
.site-footer .container{ max-width:1100px; }

/* 3 coloane egale, aliniere sus, distanțe egale */
.footer-main{
  display:grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 32px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

/* fiecare coloană are layout vertical coerent */
.f-col{ min-width:0; display:flex; flex-direction:column; gap:10px; }

/* brand row */
.f-brand-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; color:var(--text); }
.f-brand-head strong{ font-weight:800; }

/* link-uri rapide */
.f-links h4, .f-contact h4{ color:var(--text); margin:0 0 8px; }
.f-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.f-list a{ color:#cfd4df; }
.f-list a:hover{ color:var(--brand); }

/* contact list cu iconițe aliniate */
.f-contacts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.f-contacts li{ display:flex; align-items:flex-start; gap:10px; }
.f-contacts .ico{ color:var(--brand); line-height:1; margin-top:2px; }
.f-contacts a{ color:#cfd4df; }
.f-contacts a:hover{ color:var(--brand); }

/* bara legală centrată */
.ft-legal{ text-align:center; font-size:14px; color:#9ea5b2; padding-top:14px; }

/* responsive footer */
@media (max-width: 980px){
  .footer-main{ grid-template-columns: 1fr 1fr; justify-items: stretch; }
  .f-brand, .f-links, .f-contact{ text-align:left; }
}
@media (max-width: 640px){
  .footer-main{ grid-template-columns: 1fr; }
  .f-brand, .f-links, .f-contact{ text-align:center; }
  .f-contacts li{ justify-content:center; }
  .f-list{ align-items:center; }
}


/* ===== center "Link-uri rapide" in footer (doar coloana din mijloc) ===== */
.site-footer .f-links{
  text-align: center;                 /* centrează heading-ul */
}
.site-footer .f-links .f-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;                /* centrează fiecare link pe coloană */
}
.site-footer .f-links .f-list li{ 
  width: auto;                        /* nu întinde itemele pe lățimea coloanei */
}
.site-footer .f-links .f-list a{
  display: inline-block;              /* se aliniază corect la centru */
}

/* ==== Footer: centrează conținutul din coloana Contact,
   dar aliniază coloana la marginea din dreapta ==== */
   .site-footer .f-contact{
    justify-self: end;          /* împinge coloana pe marginea din dreapta a grilei */
    text-align: center;         /* centrează titlul și liniile de text */
    align-items: center;        /* centrează vertical elementele din coloană */
  }
  
  .site-footer .f-contact .f-contacts{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;        /* centrează lista pe orizontală */
  }
  
  .site-footer .f-contact .f-contacts li{
    display: flex;
    align-items: flex-start;
    justify-content: center;    /* centrează fiecare rând (icon + text) */
    gap: 10px;
  }
  
  .site-footer .f-contact .f-contacts .ico{
    margin-top: 2px;
    color: var(--brand);
  }
  
  /* mobil: rămâne centrat ca înainte */
  @media (max-width: 640px){
    .site-footer .f-contact{ justify-self: center; }
  }
  

  .accent{color:var(--brand)}
    .page-hero{padding:56px 0 28px;text-align:center}
    .page-hero.hero--tight{padding-top:48px}
    .page-hero .lead{max-width:980px;margin:10px auto 0}

    .split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
    .split img{display:block;width:100%;border-radius:var(--r)}
    .split .panel{overflow:hidden}

    .center{text-align:center}
    .narrow{max-width:980px;margin:0 auto}

    /* Values */
    .value-ico{
      width:68px;height:68px;border-radius:999px;
      background:#1d1f24;border:1px solid var(--border);
      display:grid;place-items:center;margin:0 auto 12px;color:var(--brand);font-size:28px
    }

    /* Stats band */
    .band{background:linear-gradient(180deg,rgba(255,210,31,.04),transparent)}
    .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
    .stat .num{font-size:48px;font-weight:800}
    .stat .lbl{color:var(--muted);margin-top:6px}

    /* Responsive */
    @media (max-width: 980px){
      .split{grid-template-columns:1fr}
      .stats{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 640px){
      .stats{grid-template-columns:1fr}
    }




    



/* ===== ABOUT: titlu glowy mare + spațiere aerisită ===== */
:root{
  --sp-1: clamp(8px, 1.2vw, 14px);
  --sp-2: clamp(12px, 1.6vw, 18px);
  --sp-3: clamp(16px, 2.2vw, 26px);
  --sp-4: clamp(22px, 3.2vw, 38px);
  --sp-5: clamp(30px, 4.6vw, 56px);
  --sp-6: clamp(44px, 6.4vw, 88px);
}

/* “Despre CrossGym” */
.about-title{
  margin: 0 0 var(--sp-2);
  text-align: center;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
  font-size: clamp(34px, 6vw, 64px);        /* MARE pe desktop */
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.about-title span{
  display:inline-block;
  background: linear-gradient(90deg,#ffe480,#ffc83d,#ffe480);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(255,210,64,.28));
}

/* textul de sub titlu */
.about-lead{
  text-align:center;
  max-width: 980px;
  margin: var(--sp-1) auto var(--sp-4);
  color:#cfd3dd;
  font-size: clamp(16px, 2.1vw, 18.5px);
  line-height: 1.75;
}

/* blocurile din pagina „Despre” – mai aerisite */
.about-section{ padding-block: var(--sp-5); }

/* “Misiunea noastră” – grilă aerisită dacă folosești .split */
.about-mission .split{ gap: var(--sp-4); align-items: start; }
.about-mission h3{ margin-top:0; font-size: clamp(22px, 3.2vw, 30px); }

/* pozele din about – colțuri moi + umbră ușoară */
.about-photo{
  display:block; width:100%;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.06);
}

/* extra spațiu între “Despre CrossGym” și secțiunile următoare */
.section + .about-section{ margin-top: var(--sp-4); }

/* pe mobil: mai compact, dar păstrăm aerul */
@media (max-width: 860px){
  .about-section{ padding-block: var(--sp-4); }
  .about-mission .split{ gap: var(--sp-3); }
}

/* ===== ABOUT – spacing între galerie, valori și cifre ===== */

/* secțiunile tale sunt <section class="container reveal"> – le aerisim */
section.container.reveal{ 
  padding-block: clamp(44px, 6vw, 84px);       /* mai mult aer sus & jos */
}

/* galerie: mic gap între grid și următoarea secțiune */
section.container.reveal .gallery{ 
  margin-top: 18px; 
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* valori: la fel, dar un pic mai mult jos ca să stea departe de band */
section.container.reveal .cards{ 
  margin-top: 18px; 
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

/* banda “CrossGym în Cifre” – separare clară de “Valori” */
.band{
  margin-top: clamp(36px, 5vw, 64px);
  padding-block: clamp(44px, 6vw, 88px);
  border-top: 1px solid rgba(255,255,255,.06); /* o muchie discretă */
}

/* pe mobil mai compact, dar rămâne aerisit */
@media (max-width: 640px){
  section.container.reveal{ padding-block: 48px; }
  .band{ margin-top: 40px; padding-block: 56px; }
}





/* ===================== CONTACT PAGE  ===================== */

/* ===== HERO ===================================================== */
.hero{
  position: relative;
  /* Important: folosește variabila setată inline pe <section> */
  background-image: var(--hero);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: grid;
  place-items: center;
  padding-block: clamp(72px, 12vh, 128px);
  min-height: clamp(320px, 38vh, 520px);
  isolation: isolate; /* ca overlay-ul să nu afecteze copilul */
}

.hero--compact{
  min-height: clamp(240px, 28vh, 420px);
  padding-block: clamp(48px, 10vh, 88px);
}

.hero-overlay{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.75) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.85));
  z-index: -1;
}

.hero-lines{
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 205, 0, 0.04) 0 1px,
      transparent 1px 44px
    );
  mask: linear-gradient(#000, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero-inner{
  width: min(1100px, 92vw);
  margin-inline: auto;
  text-align: center;
}

.hero-title{
  margin: 0;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(36px, 6vw, 76px);
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.hero-title .brand{
  color: var(--brand, #ffd100);
  filter: drop-shadow(0 0 18px rgba(255,209,0,.25));
}

.hero-bar{
  width: clamp(120px, 20vw, 240px);
  height: 4px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: var(--brand, #ffd100);
  box-shadow: 0 0 22px rgba(255, 209, 0, .45);
}

.hero-sub{
  margin: 18px auto 0;
  max-width: 820px;
  color: #cfcfcf;
  font-size: clamp(15px, 1.7vw, 18px);
}

/* linii pe fiecare span (opțional, doar ca să păstrezi structura ta) */
.hero-title .line{ display:block; }




/* HERO curat, fără poză */
.hero.hero--plain{
  background: linear-gradient(180deg,#0d0f12 0%,#0b0c0f 100%);
  padding: 84px 0 48px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color:#fff;
}
.hero .hero-inner{ text-align:center; }

/* Titlul din contact – două linii, fără coliziuni */
.contact-title { margin: 0 0 10px; line-height: 1; font-weight: 800; }
.contact-title .c1,
.contact-title .c2 { display:block; }

/* linia 1: mare, galben, cu glow */
.contact-title .c1{
  color:#ffffff;
  font-size: clamp(44px, 8.5vw, 92px);
  letter-spacing:.4px;
  text-shadow: 0 0 14px rgba(255,215,96,.25);
  animation: titleGlow 2.6s ease-in-out infinite alternate;
}

/* linia 2: „CrossGym” cu gradient, garantat vizibil pe toate browserele */
.contact-title .c2{
  margin-top:.16em;
  font-size: clamp(32px, 6vw, 60px);
  display:inline-block; /* necesar pt background-clip */
  background: linear-gradient(90deg,#ffe480,#ffc83d,#ffe480);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent; /* fix WebKit/Chromium */
  text-shadow: 0 0 18px rgba(255,210,64,.22);
}

/* fallback dacă browserul nu suportă background-clip:text */
@supports not (-webkit-background-clip: text) {
  .contact-title .c2{
    color:#ffd760;
    text-shadow: 0 0 12px rgba(255,215,96,.2);
  }
}

/* bara „scan” de sub titlu (poți păstra ce aveai) */
.hero-bar.fx-scan{
  width:min(720px,60%);
  height:3px; margin:18px auto 18px; border-radius:999px;
  background: linear-gradient(90deg,transparent,rgba(255,224,64,.65),transparent);
  background-size:200% 100%;
  animation: scan 2.1s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,224,64,.45));
}
@keyframes scan{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* glow ușor pe titlu */
@keyframes titleGlow{
  from { text-shadow: 0 0 14px rgba(255,215,96,.25); }
  to   { text-shadow: 0 0 32px rgba(255,215,96,.45); }
}

/* textul swapping */
.hero-sub{
  max-width: 820px; margin:0 auto;
  font-size: clamp(16px,1.7vw,18.5px); opacity:.88;
}
.swap-words{
  display:inline-block; min-width:9ch; font-weight:700; color:#ffd760;
  transition: opacity .18s ease, transform .18s ease; position:relative;
}
.swap-words::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: currentColor; transform: scaleX(0); transform-origin:left;
  animation: underline 2s ease-in-out infinite alternate;
}
@keyframes underline{ to{ transform: scaleX(1); } }

@media (max-width: 640px){
  .hero.hero--plain{ padding:72px 0 38px; }
  .hero-bar.fx-scan{ width:72%; }
}


/* ===== How-to: spațiere aerisită + carduri relaxate ===== */
.howto{
  padding-top: 56px;          /* mai mult aer deasupra */
  padding-bottom: 84px;       /* și sub secțiune */
  position: relative;
}

.howto::before{               /* o linie discretă de separare deasupra */
  content:"";
  position:absolute; left:0; right:0; top:-24px; height:1px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
}

.howto h2{
  margin: 0 0 14px;
  letter-spacing:.2px;
}

.howto > p{
  max-width: 920px;
  margin: 0 auto 28px;        /* spațiu între titlu/descriere și carduri */
  line-height: 1.7;
}

/* grid-ul cardurilor din secțiune */
.howto .cards{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px;                  /* spațiu între cele două carduri */
}

/* carduri mai “pufoase” în secțiunea howto */
.howto .panel.pad{
  padding: 24px 26px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 28px rgba(0,0,0,.22);
}

/* respiră și footer-ul față de secțiune */
.site-footer{ margin-top: 72px; }

/* Responsive tweaks */
@media (max-width: 860px){
  .howto{ padding-top: 40px; padding-bottom: 56px; }
  .howto .cards{ grid-template-columns: 1fr; gap: 16px; }
  .howto .panel.pad{ padding: 18px; }
}


/* ===== Contact: secțiunea cu hartă/CTAs mai aerisită ===== */
.contact-block{
  padding-top: 56px;        /* cât aveai inline, mutat aici */
  margin-bottom: 84px;      /* spațiu MARE până la "Cum ajungi la CrossGym" */
}

@media (min-width: 1024px){
  .contact-block{ margin-bottom: 96px; } /* și mai mult pe desktop */
}

/* rândul de CTA-uri de sub hartă (mai mult spațiu față de hartă) */
.contact-block .map-cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;         /* > 14px, se simte mai “lejer” */
}

@media (max-width: 860px){
  .contact-block .map-cta{ margin-top: 18px; }
}

/* dacă vrei și mai multă distanță vizuală între secțiuni, păstrează separatorul subtil */
.howto::before{
  content:"";
  position:absolute; left:0; right:0; top:-28px; height:1px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
}


/* containerul butoanelor de sub hartă */
.map-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:14px;
}

/* asigură înălțime/padding/font identic pe toate butoanele din zona asta */
.map-cta .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 16px;
  font-weight:600;
  border-radius:12px;
}

/* butonul de copiere centrat pe rând separat */
.map-cta .btn-copy{
  flex-basis:100%;
  justify-content:center;      /* text pe mijloc */
  margin-top:4px;              /* puțin spațiu față de celelalte */
}


.map-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* păstrează același look pe butoane */
.map-cta .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 16px;
  font-weight:600;
  border-radius:12px;
  white-space:nowrap;
}

/* AICI: „Sună acum” umple spațiul rămas pe rând */
.map-cta .btn.grow{
  flex: 1 1 auto;
}

/* butonul de copiere rămâne pe rând separat, centrat */
.map-cta .btn-copy{
  flex-basis:100%;
  justify-content:center;
  margin-top:4px;
}

/* pe mobil poți forța stivuirea pe două rânduri, full width */
@media (max-width: 700px){
  .map-cta .btn{ flex:1 1 100%; }
}


/* Linkul de adresă – galben, evidențiat + mic pop-out la hover */
.address-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#ffd760;                 /* galben brand */
  font-weight:700;
  text-decoration:none;
  line-height:1.35;
  transition: transform .18s ease, text-shadow .18s ease, opacity .18s ease;
}

.address-link .ext{
  opacity:.85;
  transition: transform .18s ease, opacity .18s ease;
}

.address-link:hover{
  transform: translateY(-1px) scale(1.01);
  text-shadow: 0 0 12px rgba(255,215,96,.35);
}

.address-link:hover .ext{
  transform: translateX(3px) translateY(-1px);
  opacity:1;
}

/* accesibilitate la tastatură */
.address-link:focus-visible{
  outline:2px solid #ffd760;
  outline-offset:3px;
  border-radius:8px;
  padding:2px 4px;
}


/* —— Link galben cu glow (adresă, telefon, email) —— */
.glow-link{
  color:#ffd760;
  font-weight:600;
  text-decoration:none;
  position:relative;
  text-shadow:0 0 10px rgba(255,215,96,.22);
  transition:filter .25s ease, text-shadow .25s ease, color .25s ease;
}
.glow-link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg,#ffd760,#fff0a3,#ffd760);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}
.glow-link:hover{
  color:#ffe489;
  text-shadow:0 0 18px rgba(255,215,96,.45);
  filter:drop-shadow(0 0 6px rgba(255,215,96,.35));
}
.glow-link:hover::after{ transform:scaleX(1); }

/* focus accesibil */
.glow-link:focus-visible{
  outline:2px solid #ffd760;
  outline-offset:3px;
  border-radius:6px;
}






/* ===================== SECTIONS / CARDS ===================== */
section{ padding:56px 0 }
h2{ font-size:30px; margin:0 0 18px }
.page{ margin:0 0 14px }
.cards{ display:grid; gap:22px }
.cards.three{ grid-template-columns:repeat(3, 1fr) }
.cards.four { grid-template-columns:repeat(4, 1fr) }
.card .body{ padding:18px }
.muted{ color:var(--muted) }
.role{
  display:inline-block; background:#1d1f24; border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; font-size:13px; margin:8px 0;
}

/* ===================== RATIO IMAGES ===================== */
.ratio{
  position:relative; width:100%; overflow:hidden;
  border-top-left-radius:var(--r); border-top-right-radius:var(--r);
  background:#0b0c0e;
}
.r-4x5{ padding-top:125% }
.r-1x1{ padding-top:100% }
.ratio img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* ===================== PRICES ===================== */
.price .value{ font-size:28px; font-weight:800; color:var(--brand) }
.list{ margin:14px 0 0; padding:0; list-style:none }
.list li{
  margin:8px 0; border-left:3px solid var(--brand);
  padding-left:10px; color:#cbd2dc;
}

/* ===================== GALLERY ===================== */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:10px }
.gitem{ grid-column:span 4 }
.gitem.wide{ grid-column:span 8 }
.gitem .ratio{ border-radius:14px }

/* ===================== FOOTER ===================== */
.site-footer{
  border-top:1px solid var(--border);
  padding:30px 0; color:#aeb4c0;
}


/* ===== FOOTER – layout consistent & icons fix ===== */

/* spațiere deasupra footer-ului, aerisit */
.site-footer{ 
  margin-top: clamp(48px, 7vw, 84px);
  background:#0d0f12;
  border-top:1px solid rgba(255,255,255,.06);
}

/* grid 3 coloane pe desktop, cu gap mai sănătos */
.site-footer .footer-main{
  display:grid;
  grid-template-columns: 1.15fr .9fr 1fr;
  gap: 28px 40px;              /* mai aerisit */
  align-items:start;
}

/* două coloane pe tabletă */
@media (max-width: 980px){
  .site-footer .footer-main{
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* o coloană pe mobil */
@media (max-width: 640px){
  .site-footer .footer-main{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* listă contacte: fără bullets + spacing vertical uniform */
.f-contacts{
  list-style:none;
  margin: 8px 0 0;
  padding:0;
  display:grid;
  gap: 14px;                   /* distanță egală între rânduri */
}

/* fiecare rând: icon + text pe aceeași bază, fără „alunecat” la wrap */
.f-contacts li{
  display:flex;
  gap: 12px;
  align-items:flex-start;      /* aliniere la începutul rândului */
  line-height:1.45;
}

/* caseta de icon are lățime fixă — oprește „săritul” când se mulează textul */
.f-contacts .ico{
  display:inline-grid;
  place-items:center;          /* centrează perfect SVG-ul */
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #ffd760;              /* galben brand */
  filter: drop-shadow(0 0 6px rgba(255,215,96,.35));
  margin-top: 2px;             /* mic offset ca să se alinieze cu textul */
}

/* face SVG-ul „block” ca să nu lase spațiu de baseline ciudat */
.f-contacts .ico svg{
  display:block;
}

/* link-urile din contact: galben + glow fin + focus vizibil */
.f-contacts a{
  color:#ffd760;
  text-decoration:none;
  transition:filter .2s ease, text-shadow .2s ease, color .2s ease;
  text-shadow: 0 0 10px rgba(255,215,96,.25);
}
.f-contacts a:hover{
  text-shadow: 0 0 14px rgba(255,215,96,.38);
  filter:brightness(1.04);
}
.f-contacts a:focus-visible{
  outline: 2px solid rgba(255,215,96,.55);
  outline-offset: 3px;
  border-radius: 6px;
}

/* titluri coloane din footer – puțin mai ferme și spațiere sus/jos */
.site-footer h4{
  margin: 6px 0 10px;
  font-weight: 700;
}

/* logo din footer – dimensiune stabilă, nu se „urdărește” la resize */
.brand-logo--footer{
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* bară legală – distanță mai respirabilă */
.ft-legal{
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255,255,255,.08);
  opacity:.75;
  text-align:center;
  font-size: 13.5px;
}

/* small polish pentru textul lung de adresă – să nu calce peste icon */
.f-contacts li span:last-child{
  display:block;
  min-width: 0; /* previne „împingeri” stranii în flex container */
}
/* === FOOTER contact: aliniere perfectă pentru icon + text === */

/* fiecare rând: folosim baseline alignment (modern) */
.f-contacts li{
  display: flex;
  column-gap: 12px;
  align-items: first baseline;        /* aliniază cu baseline-ul primului rând */
  line-height: 1.45;
}

/* containerul iconului: fără baseline „fantomă”, scalat după font  */
.f-contacts .ico{
  --ico-nudge: .08em;                 /* micro-ajustare verticală, dacă vrei */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;                      /* ~ mărimea fontului */
  height: 1.25em;
  line-height: 0;                     /* elimină spațiul de baseline intern */
  color: #ffd760;
  filter: drop-shadow(0 0 6px rgba(255,215,96,.35));
  transform: translateY(var(--ico-nudge));
}

/* SVG-ul trebuie să ocupe exact containerul (fără spații) */
.f-contacts .ico svg{
  display: block;
  width: 100%;
  height: 100%;
}

/* fallback pentru browsere fără 'first baseline' (mai vechi) */
@supports not (align-items: first baseline){
  .f-contacts li{ align-items: flex-start; }
  .f-contacts .ico{ transform: translateY(.18em); }  /* puțin mai jos */
}







/* ===================== LIGHTBOX ===================== */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.86);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.lightbox img{ max-width:95vw; max-height:90vh; border-radius:16px }
.lightbox.show{ display:flex }

/* ===================== REVEAL ===================== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s, transform .6s }
.reveal.show{ opacity:1; transform:none }

/* ===================== RESPONSIVE ===================== */
@media (max-width:980px){
  .grid-2{ grid-template-columns:1fr }

  .cards.three{ grid-template-columns:1fr 1fr }
  .cards.four { grid-template-columns:1fr 1fr }

  .gallery{ grid-template-columns:repeat(6,1fr) }
  .gitem{ grid-column:span 3 }
  .gitem.wide{ grid-column:span 6 }

  /* Menul dropdown ANCORAT LA DREAPTA (NU la mijloc) */
  .menu{
    display:none;
    position:absolute;
    top:64px;
    right:12px;        /* <-- ancorare la dreapta */
    left:auto;
    transform:none;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px 14px;
    flex-direction:column;
    box-shadow:var(--shadow);
    min-width:240px;
    z-index:60;
  }
  .menu.show{ display:flex }

  /* Pe mobil: butonul Contact din dreapta dispare, rămâne în meniu */
  .contact-cta{ display:none; }
  .menu .menu-contact{ display:block; }

  .burger{ display:block; }
}

@media (max-width:640px){
  .cards.three, .cards.four{ grid-template-columns:1fr }
  .gallery{ grid-template-columns:repeat(4,1fr) }
  .gitem{ grid-column:span 4 }
}

.champ-media{ aspect-ratio:4/5; overflow:hidden }
.champ-media img{
  width:100%; height:100%;
  object-fit:cover;        /* umple cardul (fără deformare) */
  object-position:top center;
}