/* ============================================================
   Jan & Ana Travel (JATransport.persoane)
   Paleta vine din logo: auriu pe albastru profund. Albastrul se
   regăsește și în livreaua autocarului, deci pozele firmei stau
   natural pe fundalurile închise.

   Aurul are două variante, fiindcă una singură nu poate fi
   lizibilă și pe închis, și pe deschis:
     --gold      accent pe fundal închis   (7.5:1 pe navy)
     --gold-ink  text pe fundal deschis    (6.2:1 pe alb)
   ============================================================ */

:root{
  --navy:#061A34;
  --blue-900:#072A5E;
  --blue-700:#0B4DA2;
  --blue-500:#1E7BE8;
  --gold:#C9A46A;
  --gold-lt:#E3C88F;
  --gold-ink:#7A5C28;
  --white:#FFFFFF;
  --paper:#F4F7FB;
  --line:#DCE5F0;
  --ink:#12233D;
  --ink-soft:#4A5D77;

  --wrap:1180px;
  --r:14px;
  --shadow:0 18px 40px -24px rgba(6,26,52,.45);

  --display:"Archivo","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold-ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

/* Indicatorul de focus schimbă nuanța după fundal: aurul deschis
   dispare pe alb, cel închis dispare pe navy. */
:root{--focus:var(--gold-ink)}
.hero,.site-head,.site-foot,.callbar,
.sec-servicii,.sec-marturii{--focus:var(--gold)}

:where(a,button):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:4px;
}

/* ── Titluri ─────────────────────────────────────────────── */
/* Interliniaj generos: majusculele românești au diacritice cu virgulă
   dedesubt (Ș, Ț) care se ciocnesc de rândul următor la valori strânse. */
h1,h2,h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 112;
  margin:0;
  line-height:1.16;
  letter-spacing:-.015em;
}
h1{
  font-size:clamp(2.1rem,5.4vw,4.05rem);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.02em;
}
h2{
  font-size:clamp(1.75rem,3.4vw,2.85rem);
  font-weight:700;
  text-transform:uppercase;
}
h3{font-size:1.12rem;font-weight:700;line-height:1.3;font-variation-settings:"wdth" 105}
p{margin:0 0 1em}

.eyebrow{
  font-family:var(--display);
  font-variation-settings:"wdth" 120;
  font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--gold);
  margin:0 0 .9rem;
}
.eyebrow-dark{color:var(--gold-ink)}
.h2-center{text-align:center;max-width:19ch;margin-inline:auto}
.sec-servicii .eyebrow,.sec-marturii .eyebrow,.sec-contact .eyebrow,
.sec-flota .eyebrow{text-align:center}

/* ── Antet ───────────────────────────────────────────────── */
.site-head{
  position:absolute;inset:0 0 auto;z-index:40;
}
.head-inner{
  display:flex;align-items:center;gap:20px;
  min-height:86px;
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;margin-right:auto}
.brand-logo{width:auto;height:52px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{
  font-family:var(--display);font-weight:700;font-size:1.02rem;
  font-variation-settings:"wdth" 116;text-transform:uppercase;
  letter-spacing:.07em;color:var(--gold-lt);
}
.brand-text span{font-size:.73rem;color:rgba(255,255,255,.78);letter-spacing:.04em}

.nav{display:flex;align-items:center;gap:28px}
.nav a{
  text-decoration:none;color:rgba(255,255,255,.9);
  font-size:.9rem;font-weight:500;
  padding:6px 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--gold);transition:right .25s ease;
}
.nav a:hover::after{right:0}
.nav .nav-call{
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 112;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:9px 18px;color:#fff;
}
.nav .nav-call::after{display:none}
.nav .nav-call:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}

.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer}
.bars{display:grid;gap:5px;width:24px}
.bars i{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Hero ────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;background:var(--blue-900);color:#fff}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:52% 60%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(6,26,52,.86) 0%,rgba(7,42,94,.72) 42%,rgba(7,42,94,.93) 100%),
    linear-gradient(100deg,rgba(7,42,94,.85) 0%,rgba(7,42,94,.18) 68%);
}
.hero-inner{padding:150px 22px 92px}
.hero h1{max-width:16ch;text-wrap:balance}

/* Filet auriu sub titlu — ornamentul paginii este monograma din logo,
   așa că aici e nevoie doar de o linie discretă. */
.rule{
  width:96px;height:2px;border:0;margin:26px 0 24px;
  background:linear-gradient(90deg,var(--gold),rgba(201,164,106,0));
}

.hero-lead{
  font-size:clamp(1.02rem,1.7vw,1.2rem);
  color:rgba(255,255,255,.88);max-width:48ch;margin-bottom:2rem;
}

.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.btn{
  display:inline-flex;flex-direction:column;gap:1px;
  text-decoration:none;border-radius:var(--r);
  padding:13px 26px;transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-k{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;opacity:.82}
.btn-v{
  font-family:var(--display);font-weight:800;font-size:1.24rem;
  font-variation-settings:"wdth" 110;letter-spacing:.005em;
}
.btn-call{background:var(--gold);color:var(--navy);box-shadow:0 14px 30px -14px rgba(201,164,106,.7)}
.btn-call:hover{background:var(--gold-lt)}
.btn-call .btn-k{opacity:.72}
.btn-alt{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.34);color:#fff}
.btn-alt:hover{background:rgba(255,255,255,.18)}

.hero-hours{
  display:flex;align-items:center;gap:9px;
  margin:1.7rem 0 0;font-size:.9rem;color:rgba(255,255,255,.8);
}
.hero-hours .dot{
  width:9px;height:9px;border-radius:50%;background:#4ade80;flex:none;
  box-shadow:0 0 0 4px rgba(74,222,128,.22);
}

/* ── Secțiuni ────────────────────────────────────────────── */
.sec{padding:clamp(64px,8vw,110px) 0}
.sec-despre{background:var(--white)}
.sec-servicii{background:var(--blue-900);color:#fff}
.sec-flota{background:var(--paper)}
.sec-marturii{background:var(--navy);color:#fff}
.sec-contact{background:var(--white)}

/* Despre */
.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.col-text .lead{
  font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 106;
  font-size:1.16rem;color:var(--gold-ink);margin:.7rem 0 1.1rem;
}
.col-text p{color:var(--ink-soft)}
.col-text h2{color:var(--blue-900)}

.facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:2rem 0 0;padding:0;
  border-top:1px solid var(--line);
}
.facts li{
  flex:1 1 130px;padding:18px 20px 4px 0;
}
.facts strong{
  display:block;font-family:var(--display);font-weight:800;
  font-variation-settings:"wdth" 108;font-size:1.34rem;color:var(--blue-700);
}
.facts span{font-size:.8rem;color:var(--ink-soft);letter-spacing:.03em}

.col-media{margin:0;position:relative}
.col-media img{border-radius:var(--r);box-shadow:var(--shadow);width:100%}
.col-media figcaption{
  position:absolute;left:16px;bottom:16px;
  background:var(--gold);color:var(--navy);
  font-family:var(--display);font-weight:700;font-size:.74rem;
  font-variation-settings:"wdth" 116;text-transform:uppercase;letter-spacing:.1em;
  padding:8px 14px;border-radius:8px;
}

/* Servicii */
.cards{
  list-style:none;margin:56px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);overflow:hidden;
}
.card{
  background:var(--blue-900);
  padding:34px 28px 38px;
  position:relative;
  transition:background .25s ease;
}
.card::before{
  content:"";position:absolute;left:28px;top:0;width:34px;height:3px;
  background:var(--gold);transform:scaleX(.55);transform-origin:left;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.card:hover{background:#0A3572}
.card:hover::before{transform:scaleX(1.9)}
.card h3{color:#fff;margin-bottom:.65rem}
.card p{color:rgba(255,255,255,.74);font-size:.95rem;margin:0}

/* Flota */
.fleet{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;margin-top:56px}
.fleet-item{margin:0;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.fleet-item img{width:100%;height:300px;object-fit:cover}
.fleet-item figcaption{padding:20px 24px 24px;display:flex;flex-direction:column;gap:3px}
.fleet-item strong{
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 108;
  font-size:1.04rem;color:var(--blue-900);
}
.fleet-item span{font-size:.9rem;color:var(--ink-soft)}

/* Mărturii */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin-top:56px}
.quote{
  margin:0;padding:34px 30px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;
}
.quote p{
  font-family:var(--display);font-weight:500;font-variation-settings:"wdth" 104;
  font-size:1.15rem;line-height:1.45;color:#fff;margin:0 0 1.4rem;
}
.quote footer{display:flex;align-items:center;gap:13px}
.ini{
  display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;
  background:var(--gold);color:var(--navy);
  font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.02em;
}
.quote footer > span:last-child{display:flex;flex-direction:column;line-height:1.3}
.quote footer strong{font-size:.95rem;color:#fff}
.quote footer span span,
.quote footer > span:last-child span{font-size:.8rem;color:rgba(255,255,255,.6)}

/* Contact */
.sec-contact h2{color:var(--blue-900)}
.contact-lead{
  text-align:center;max-width:52ch;margin:1.1rem auto 0;color:var(--ink-soft);
}
.contact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:48px;
}
.cbox{
  display:flex;flex-direction:column;gap:5px;
  padding:26px 24px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);text-decoration:none;
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.cbox-link:hover{border-color:var(--gold);background:#fff;transform:translateY(-3px)}
.cbox-k{
  font-family:var(--display);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.17em;color:var(--gold-ink);
}
.cbox strong{
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 106;
  font-size:1.08rem;color:var(--blue-900);word-break:break-word;line-height:1.25;
}
.cbox-n{font-size:.82rem;color:var(--ink-soft)}
/* Adresa de e-mail este lungă — o setăm mai mic ca să încapă pe un rând. */
.cbox-mail strong{font-size:.94rem;letter-spacing:-.01em;overflow-wrap:anywhere}

.wa-row{display:flex;justify-content:center;margin-top:34px}
.btn-wa{
  background:var(--navy);color:var(--gold);
  border:1px solid var(--navy);
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 108;
  font-size:1rem;padding:16px 34px;
  box-shadow:0 14px 30px -18px rgba(6,26,52,.9);
}
.btn-wa:hover{background:var(--blue-900);border-color:var(--blue-900);color:var(--gold-lt)}

/* ── Subsol ──────────────────────────────────────────────── */
.site-foot{background:var(--navy);color:rgba(255,255,255,.72);padding:58px 0 26px}
.foot-inner{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;
  padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.13);
}
.foot-logo{width:auto;height:118px;margin-bottom:20px}
.foot-brand strong{
  display:block;font-family:var(--display);font-weight:700;
  font-variation-settings:"wdth" 114;text-transform:uppercase;
  letter-spacing:.06em;font-size:.82rem;color:var(--gold);margin-bottom:6px;
}
.foot-brand span{font-size:.9rem;max-width:34ch;display:block}
.foot-nav,.foot-contact{display:flex;flex-direction:column;gap:9px;font-size:.9rem}
.foot-nav a,.foot-contact a{text-decoration:none}
.foot-nav a:hover,.foot-contact a:hover{color:var(--gold)}
.copy{text-align:center;font-size:.8rem;margin:22px 0 0;color:rgba(255,255,255,.5)}

/* ── Bara de apel (mobil) ────────────────────────────────── */
.callbar{display:none}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:960px){
  .grid-2{grid-template-columns:1fr}
  .col-media{order:-1}
  .fleet{grid-template-columns:1fr}
  .fleet-item img{height:240px}
  .foot-inner{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}

@media (max-width:860px){
  .nav-toggle{display:block;order:2}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--blue-900);
    padding:6px 22px 20px;
    border-top:1px solid rgba(255,255,255,.12);
    display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:1rem}
  .nav a::after{display:none}
  .nav .nav-call{
    text-align:center;margin-top:16px;border-radius:var(--r);
    background:var(--gold);border-color:var(--gold);border-bottom:0;color:var(--navy);
  }
  .site-head{position:relative;background:var(--blue-900)}
  .hero-inner{padding:64px 22px 76px}

  .callbar{
    display:grid;grid-template-columns:1fr auto;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    box-shadow:0 -10px 30px -18px rgba(6,26,52,.9);
  }
  .callbar a{
    text-decoration:none;text-align:center;padding:15px 16px;
    font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 110;
    font-size:.98rem;color:var(--navy);background:var(--gold);
  }
  .callbar-wa{background:var(--navy);color:var(--gold);padding-inline:22px}
  body{padding-bottom:56px}
}

@media (max-width:560px){
  body{font-size:16px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .btn{align-items:flex-start}
  .facts li{flex:1 1 100%;padding-right:0}
  .foot-inner{grid-template-columns:1fr}
  .h2-center{max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .ribbon path{stroke-dashoffset:0}
}