/* /public_html/assets/css/giddo.css
   RomanianGuide.com — design system Giddo (tokens + header/footer + homepage)
   Fonturile se încarcă prin <link> în header.php (Fraunces, Caveat, Outfit). */

/* ============ TOKENS ============ */
:root{
  --paper:#fdf7ea; --paper-2:#f6ead2; --paper-3:#efe0c4;
  --ink:#2a2017; --ink-soft:#6a5a47; --ink-faint:#9b8a73;
  --orange:#ea580c; --orange-2:#f97316; --saffron:#e0962a; --gold:#f3c54a;
  --olive:#5c6b3a; --olive-deep:#3f4a26; --brown:#8a4b1f; --sand:#f3ddb5;
  --line:rgba(42,32,23,.14); --line-2:rgba(42,32,23,.08);
  --shadow:0 18px 50px -22px rgba(60,40,20,.55);
  --shadow-sm:0 8px 24px -14px rgba(60,40,20,.5);
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Outfit",sans-serif; color:var(--ink); background:#ffffff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* kill-switch: nimic nu mai scoate scrollbar orizontal pe mobil */
}
html{overflow-x:hidden}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:2}
h1,h2,h3,.serif{font-family:"Fraunces",serif}
a{color:inherit; text-decoration:none}
.hand{font-family:"Caveat",cursive; color:var(--brown)}

/* ============ HEADER ============ */
.bar{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 2px 14px rgba(40,28,15,.05)}
.bar .wrap{display:flex; align-items:center; gap:18px; height:88px}
.brand{display:flex; align-items:center}
.brand img{height:62px; width:auto; display:block}
.nav{margin-left:auto; display:flex; gap:26px; align-items:center}
.nav a{font-size:15px; font-weight:500; color:var(--ink-soft); position:relative; padding:6px 0}
.nav a:hover{color:var(--ink)}
.nav a::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--orange); transition:.25s}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.lang{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-size:13px; font-weight:600}
.lang a{padding:7px 13px; color:var(--ink-soft)}
.lang a.on{background:var(--ink); color:var(--paper)}
.burger{display:none; margin-left:auto; width:42px; height:42px; border:1px solid var(--line); border-radius:12px; background:none; cursor:pointer; flex-direction:column; gap:4px; align-items:center; justify-content:center}
.burger i{width:18px; height:2px; background:var(--ink); display:block}

/* ============ HERO (light, Giddo cutout) ============ */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(1100px 620px at 80% 10%, #fff2da 0%, transparent 62%),
  radial-gradient(900px 520px at 4% 98%, #fdf0dc 0%, transparent 58%), #fff}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:center; min-height:calc(100vh - 88px); padding-top:24px; padding-bottom:40px}
.hero-copy{position:relative; z-index:3}
.eyebrow{display:inline-flex; align-items:center; gap:9px; color:var(--orange); font-weight:600; letter-spacing:.2em; font-size:12.5px; text-transform:uppercase; margin-bottom:16px; opacity:0; animation:rise .8s .1s forwards}
.eyebrow::before{content:""; width:26px; height:1.5px; background:var(--orange)}
.hero h1{color:var(--ink); font-size:clamp(40px,5.6vw,76px); line-height:.99; font-weight:600; letter-spacing:-.025em; margin:0 0 20px; max-width:14ch; opacity:0; animation:rise .9s .22s forwards}
.hero h1 em{font-style:italic; color:var(--orange)}
.hero-brand{font-family:"Caveat",cursive; color:var(--brown); font-size:24px; line-height:1; margin:0 0 18px; opacity:0; animation:rise .9s .32s forwards}
@media(max-width:560px){ .hero-brand{font-size:20px; margin-bottom:14px} }
.bubble{position:relative; display:inline-block; background:#fff; color:var(--ink); padding:12px 19px 13px; border-radius:16px 16px 16px 4px; box-shadow:var(--shadow); border:1px solid var(--line-2); font-family:"Caveat",cursive; font-size:23px; line-height:1.1; max-width:440px; margin-bottom:26px; opacity:0; animation:rise .9s .4s forwards}
.bubble b{color:var(--orange)}
.doors{display:flex; flex-wrap:wrap; gap:11px; opacity:0; animation:rise .9s .56s forwards}
.door{display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); padding:12px 18px; border-radius:999px; font-weight:600; font-size:15px; color:var(--ink); cursor:pointer; transition:.22s; box-shadow:var(--shadow-sm)}
.door svg{width:18px; height:18px; color:var(--olive)}
.door:hover{transform:translateY(-3px); border-color:var(--orange); color:var(--orange)}
.door:hover svg{color:var(--orange)}
.door.surprise{background:linear-gradient(120deg,var(--orange),var(--saffron)); color:#fff; border-color:transparent}
.door.surprise svg{color:#fff}
.door.surprise:hover{color:#fff; filter:brightness(1.05); transform:translateY(-3px)}
.hero-art{position:relative; justify-self:center; align-self:end; z-index:2}
.hero-art > img{width:100%; max-width:430px; height:auto; display:block; filter:drop-shadow(0 26px 42px rgba(40,28,15,.22)); animation:floaty 6s ease-in-out infinite}
.hero-art .hero-compass{position:absolute; width:300px; max-width:72%; top:4%; left:50%; transform:translateX(-50%); opacity:.13; z-index:-1; animation:spin 70s linear infinite}
.hero-video{position:relative; width:100%; max-width:430px; justify-self:center}
.hero-video::before{content:""; position:absolute; width:300px; max-width:72%; aspect-ratio:1; top:4%; left:50%; transform:translateX(-50%); opacity:.13; z-index:-1; animation:spin 70s linear infinite}
@media (min-width:901px){.hero-video::before{background:url("../img/ic-compass.png") center/contain no-repeat}}
.hero-video video{width:100%; height:auto; display:block; border-radius:24px; box-shadow:0 26px 50px rgba(40,28,15,.28); background:#0e2237}
.hero-play{position:absolute; inset:0; margin:auto; width:78px; height:78px; border-radius:50%; border:0; cursor:pointer; background:rgba(234,88,12,.95); color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px rgba(0,0,0,.32); transition:.2s}
.hero-play:hover{transform:scale(1.06); background:#ea580c}
.hero-play svg{width:30px; height:30px; margin-left:4px}
.hero-play.hidden{display:none}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}

/* ============ SECTION SHELL ============ */
section{position:relative; z-index:2}
.sec{padding:96px 0}
.sec-head{max-width:720px; margin-bottom:46px}
.kicker{font-family:"Caveat",cursive; font-size:27px; color:var(--orange); line-height:1; margin-bottom:6px; display:block}
.sec-head h1,.sec-head h2{font-size:clamp(30px,4.2vw,50px); line-height:1.02; font-weight:600; letter-spacing:-.02em; margin:0 0 14px}
.sec-head p{font-size:18px; color:var(--ink-soft); line-height:1.55; margin:0}
.reveal{opacity:0; transform:translateY(28px); transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* ============ POSTCARDS ============ */
.postcards{display:grid; grid-template-columns:repeat(3,1fr); gap:30px 26px}
.card{background:#fff; border-radius:8px; padding:12px 12px 18px; box-shadow:var(--shadow); position:relative; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; transform:rotate(var(--rot,0deg))}
.card:nth-child(3n+1){--rot:-1.4deg}
.card:nth-child(3n+2){--rot:1deg}
.card:nth-child(3n){--rot:-.6deg}
.card:hover{transform:rotate(0deg) translateY(-8px); box-shadow:0 30px 60px -24px rgba(60,40,20,.6)}
.card .ph{position:relative; border-radius:4px; overflow:hidden; aspect-ratio:4/3; background:#f6ead2 url("../img/ex-treasure-map.png") center/52% auto no-repeat}
.card .ph img{width:100%; height:100%; object-fit:cover; display:block; transition:.5s}
.card:hover .ph img{transform:scale(1.05)}
.stamp{position:absolute; top:10px; right:10px; width:54px; height:62px; background:var(--paper); padding:4px; transform:rotate(7deg); box-shadow:0 4px 12px rgba(0,0,0,.25);
  -webkit-mask:radial-gradient(circle 4px at 4px 50%, transparent 96%, #000) -4px 0/100% 11px repeat-y, radial-gradient(circle 4px at calc(100% - 4px) 50%, transparent 96%,#000) 100% 0/100% 11px repeat-y, radial-gradient(circle 4px at 50% 4px, transparent 96%,#000) 0 -4px/11px 100% repeat-x, radial-gradient(circle 4px at 50% calc(100% - 4px), transparent 96%,#000) 0 100%/11px 100% repeat-x, linear-gradient(#000 0 0) 50%/calc(100% - 14px) calc(100% - 14px) no-repeat;
          mask:radial-gradient(circle 4px at 4px 50%, transparent 96%, #000) -4px 0/100% 11px repeat-y, radial-gradient(circle 4px at calc(100% - 4px) 50%, transparent 96%,#000) 100% 0/100% 11px repeat-y, radial-gradient(circle 4px at 50% 4px, transparent 96%,#000) 0 -4px/11px 100% repeat-x, radial-gradient(circle 4px at 50% calc(100% - 4px), transparent 96%,#000) 0 100%/11px 100% repeat-x, linear-gradient(#000 0 0) 50%/calc(100% - 14px) calc(100% - 14px) no-repeat}
.stamp div{width:100%; height:100%; border-radius:2px; display:grid; place-items:center; font-family:"Fraunces",serif; font-weight:700; color:#fff; font-size:11px; text-align:center; line-height:1.05; background:linear-gradient(135deg,var(--olive),var(--olive-deep))}
.card h3{margin:16px 6px 4px; font-size:22px; font-weight:600; letter-spacing:-.01em}
.card .feel{margin:0 6px; font-style:italic; font-family:"Fraunces",serif; color:var(--ink-soft); font-size:15px; line-height:1.4}
.card .note{margin:12px 6px 0; font-family:"Caveat",cursive; font-size:20px; color:var(--brown); display:flex; align-items:center; gap:8px}
.card .note::before{content:""; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--gold), var(--orange)); flex:none}

/* ============ ROUTES ============ */
.routes-sec{background:#fff; position:relative; overflow:hidden}
.routes-deco{position:absolute; top:40px; right:18px; width:230px; max-width:30vw; pointer-events:none; z-index:1}
.routes{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.route{background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line-2); transition:.3s}
.route:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.route .top{padding:24px 24px 20px; background:radial-gradient(circle at 88% 12%, rgba(234,88,12,.1), transparent 60%); position:relative}
.route .dots{position:absolute; left:34px; top:64px; bottom:18px; width:2px; background:repeating-linear-gradient(var(--olive) 0 5px, transparent 5px 11px)}
.route .meta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.tag{font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; background:var(--paper-2); color:var(--olive-deep)}
.route h3{margin:0 0 6px; font-size:24px; font-weight:600; letter-spacing:-.01em}
.route p{margin:0; color:var(--ink-soft); font-size:15px; line-height:1.5}
.route .go{display:flex; align-items:center; gap:9px; padding:16px 24px; border-top:1px dashed var(--line); font-weight:600; color:var(--orange); font-size:15px}
.route .go svg{width:18px; height:18px; transition:.25s}
.route:hover .go svg{transform:translateX(5px)}

/* ============ BUILD TRIP ============ */
.build{background:linear-gradient(125deg,#15314f,#0e2237); color:var(--paper); border-radius:30px; padding:60px 56px; position:relative; overflow:hidden}
.build::after{content:""; position:absolute; right:-60px; top:-60px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,var(--gold),transparent 65%); opacity:.22}
.build .kicker{color:var(--gold)}
.build h2{color:#fff; font-size:clamp(28px,3.6vw,44px); margin:0 0 12px; font-weight:600; letter-spacing:-.02em}
.build p{color:rgba(253,247,234,.8); font-size:18px; max-width:520px; margin:0 0 28px}
.chips{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px}
.chip{display:flex; border:1px solid rgba(253,247,234,.28); border-radius:999px; overflow:hidden; font-weight:600; font-size:14px}
.chip span{padding:11px 18px; cursor:pointer; transition:.2s; color:rgba(253,247,234,.85)}
.chip span.on{background:var(--gold); color:var(--olive-deep)}
.btn{display:inline-flex; align-items:center; gap:11px; background:var(--orange); color:#fff; font-weight:600; font-size:16px; padding:16px 30px; border-radius:999px; cursor:pointer; box-shadow:0 14px 30px -12px rgba(234,88,12,.8); transition:.25s; border:none; font-family:inherit}
.btn:hover{transform:translateY(-3px); filter:brightness(1.06)}
.btn svg{width:19px;height:19px}

/* ============ STAYS ============ */
.stays{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:22px}
.stay{position:relative; border-radius:var(--r); overflow:hidden; min-height:230px; box-shadow:var(--shadow-sm); display:flex; align-items:flex-end; color:#fff; transition:.3s}
.stay:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.stay .bg{position:absolute; inset:0; background-size:cover; background-position:center; transition:.5s}
.stay:hover .bg{transform:scale(1.06)}
.stay::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%, rgba(20,12,4,.78))}
.stay .t{position:relative; z-index:2; padding:22px}
.stay .t .k{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:600}
.stay .t h3{margin:4px 0 0; font-size:22px; font-weight:600; color:#fff}
.powered{margin-top:18px; font-size:14px; color:var(--ink-soft)}
.powered b{color:var(--orange)}

/* ============ PASSPORT + JOURNAL ============ */
.split{display:grid; grid-template-columns:1fr 1.25fr; gap:50px; align-items:center}
.passport{background:linear-gradient(150deg,#1b3a5c,#0e2238); color:var(--paper); border-radius:20px; padding:38px; box-shadow:var(--shadow); position:relative}
.passport .pp-h{font-family:"Fraunces",serif; font-weight:700; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:6px}
.passport h3{font-size:30px; margin:0 0 10px; color:#fff; font-weight:600}
.passport p{color:rgba(253,247,234,.8); font-size:15.5px; line-height:1.55; margin:0 0 26px}
.stamps{display:flex; gap:16px}
.pp-stamp{width:72px; height:72px; border-radius:50%; border:2px dashed rgba(243,197,74,.6); display:grid; place-items:center; transform:rotate(-8deg); font-family:"Fraunces",serif; font-weight:700; color:var(--gold); font-size:11px; text-align:center; line-height:1.05}
.pp-stamp:nth-child(2){transform:rotate(6deg)}
.pp-stamp:nth-child(3){transform:rotate(-3deg); opacity:.5}
.pp-stamp:nth-child(4){transform:rotate(10deg); opacity:.28}
.journal{display:flex; flex-direction:column; gap:16px}
.jrow{display:flex; gap:18px; align-items:center; background:#fff; border-radius:14px; padding:14px; box-shadow:var(--shadow-sm); border:1px solid var(--line-2); transition:.25s}
.jrow:hover{transform:translateX(6px)}
.jrow .ji{width:92px; height:72px; border-radius:9px; flex:none; background:#f6ead2 url("../img/ex-camera.png") center/44px auto no-repeat}
.jrow .ji.has-img{background-size:cover; background-position:center}
.jrow .jt .k{font-size:12px; color:var(--olive); font-weight:600; letter-spacing:.05em}
.jrow .jt h3{margin:3px 0 4px; font-family:"Fraunces",serif; font-size:19px; font-weight:600; letter-spacing:-.01em}
.jrow .jt p{margin:0; font-size:14px; color:var(--ink-soft)}

/* ============ MAP BAND ============ */
.mapband{background:linear-gradient(120deg,#15314f,#0e2237); color:#fff; border-radius:30px; padding:64px 56px; text-align:center; position:relative; overflow:hidden}
.mapband-deco{width:118px; height:auto; margin:0 auto 16px; position:relative; display:block; filter:drop-shadow(0 12px 26px rgba(0,0,0,.45))}
.mapband::before{content:""; position:absolute; inset:0; opacity:.16; background-image:radial-gradient(circle at 20% 30%, var(--gold) 0 3px, transparent 4px),radial-gradient(circle at 62% 60%, var(--orange) 0 3px, transparent 4px),radial-gradient(circle at 80% 25%, #fff 0 2px, transparent 3px),radial-gradient(circle at 40% 78%, var(--gold) 0 2px, transparent 3px); background-size:cover}
.mapband .kicker{color:var(--gold)}
.mapband h2{color:#fff; font-size:clamp(30px,4vw,46px); margin:0 0 10px; font-weight:600; letter-spacing:-.02em; position:relative}
.mapband p{color:rgba(255,255,255,.78); font-size:18px; max-width:560px; margin:0 auto 28px; position:relative}

/* ============ FOOTER ============ */
.foot{background:#fff; border-top:1px solid var(--line); color:var(--ink-soft); padding:60px 0 30px; margin-top:30px}
.foot .grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px}
.foot .f-brand img{height:56px; margin-bottom:14px}
.foot p{font-size:14.5px; line-height:1.6; color:var(--ink-soft); max-width:34ch}
.foot h5{color:var(--ink); font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px; font-family:"Outfit"}
.foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.foot ul a{color:var(--ink-soft); font-size:14.5px}
.foot ul a:hover{color:var(--orange)}
.foot .bottom{border-top:1px solid var(--line); margin-top:44px; padding-top:22px; font-size:13px; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between}
.foot .bottom a{color:var(--orange)}

/* ============ MOBILE NAV PANEL ============ */
.mobile-nav{display:none; position:fixed; inset:88px 0 0; z-index:49; background:#fff; padding:28px 24px; flex-direction:column; gap:4px; overflow:auto}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:"Fraunces",serif; font-size:26px; font-weight:600; padding:14px 0; border-bottom:1px solid var(--line)}
.mobile-nav .lang{align-self:flex-start; margin-top:18px}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .nav,.bar .lang{display:none} .burger{display:flex}
  .routes-deco{display:none}
  .hero .wrap{grid-template-columns:1fr; min-height:auto; padding-top:24px; text-align:center}
  .hero-art{order:-1; max-width:300px; margin:0 auto 6px}
  .hero h1{margin-left:auto; margin-right:auto}
  .eyebrow,.doors{justify-content:center}
  .postcards{grid-template-columns:1fr 1fr; gap:22px}
  .routes{grid-template-columns:1fr}
  .stays{grid-template-columns:1fr}
  .split{grid-template-columns:1fr; gap:30px}
  .foot .grid{grid-template-columns:1fr 1fr}
  .build,.mapband{padding:44px 26px; border-radius:22px}
}
@media(max-width:560px){
  .sec{padding:64px 0} .wrap{padding:0 18px}
  .postcards{grid-template-columns:1fr}
  .foot .grid{grid-template-columns:1fr}
  .doors{gap:9px} .door{padding:11px 15px; font-size:14px}
}
/* ============================================================
   WHITE SECTIONS — fundal alb pe tot site-ul (override, mai 2026)
   Albeste benzile navy: .build, .mapband, .passport + interioarele.
   ============================================================ */
.build, .mapband, .passport{
  background:#fff !important;
  color:#15314f;
  border:1px solid #ece7df;
  box-shadow:0 12px 40px rgba(21,49,79,.06);
}
.build::after{opacity:.06}
.mapband::before{opacity:.05}
.mapband-deco{filter:drop-shadow(0 10px 22px rgba(21,49,79,.16))}
.build .kicker, .mapband .kicker{color:var(--orange)}
.build h2, .mapband h2, .passport h3{color:#15314f}
.build p, .mapband p, .passport p{color:#5b6472}
.passport .pp-h{color:var(--orange)}
/* chips de preferințe pe alb */
.chip{border-color:#d9d2c7}
.chip span{color:#5b6472}
.chip span.on{background:var(--orange); color:#fff}
/* ștampile pașaport pe alb */
.pp-stamp{border-color:rgba(21,49,79,.35); color:#15314f}

/* ===== Footer — bandă legală UE ===== */
.foot-legal{border-top:1px solid var(--line); margin-top:36px; padding-top:20px}
.foot-legal-links{font-size:13px; line-height:2.1; margin:0 0 12px; color:var(--ink-soft)}
.foot-legal-links a{color:var(--ink-soft); text-decoration:none; white-space:nowrap}
.foot-legal-links a:hover{color:var(--orange)}
.foot-legal-links .sep{color:var(--line); margin:0 6px}
.foot-legal p{font-size:12.5px; line-height:1.6; color:var(--ink-faint); margin:0 0 6px; max-width:none}
.foot-legal .foot-company b{color:var(--ink)}
.foot-legal a{color:var(--ink-faint); text-decoration:underline}
.foot-anpc a:hover{color:var(--orange)}

/* ===== decor contenit global (nu mai iese din pagină / nu cade peste text) ===== */
.route .dots{display:none}
.routes-deco{width:118px; max-width:16vw; top:34px; right:30px}
@media(max-width:1100px){ .routes-deco{display:none} }

/* ===== Footer v2 — echilibrat pe toată lățimea ===== */
.foot-top{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:44px; align-items:start}
.foot-brand img{height:54px; width:auto; margin-bottom:14px}
.foot-brand p{max-width:36ch}
.foot-legal{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:40px; padding-top:22px}
.fl-company{flex:1 1 340px; min-width:0}
.foot-legal .foot-company{font-size:12.5px; line-height:1.7; color:var(--ink-faint); margin:0 0 6px; max-width:none}
.foot-legal .foot-company b{color:var(--ink)}
.foot-legal .foot-anpc{font-size:12.5px; line-height:1.7; color:var(--ink-faint); margin:0; max-width:none}
.foot-legal a{color:var(--ink-faint); text-decoration:underline}
.foot-legal a:hover{color:var(--orange)}
.foot-legal-links{flex:0 1 360px; text-align:right; font-size:13px; line-height:2.2; color:var(--ink-soft)}
.foot-legal-links a{color:var(--ink-soft); text-decoration:none; white-space:nowrap}
.foot-legal-links a:hover{color:var(--orange)}
.foot-legal-links .sep{color:var(--line); margin:0 5px}
@media(max-width:900px){
  .foot-top{grid-template-columns:1fr 1fr; gap:28px}
  .foot-brand{grid-column:1/-1}
  .foot-legal{flex-direction:column; gap:18px}
  .foot-legal-links{text-align:left; flex-basis:auto}
}
@media(max-width:560px){ .foot-top{grid-template-columns:1fr} }

/* ============================================================
   MOBILE-FIRST DESIGN PASS — May 2026
   Scope: header/hero/cards/chips compact pe mobil, butoane ghost,
   sticky CTA homepage, prefers-reduced-motion.
   Tot ce e mai jos e scoped pe @media (max-width) sau pe clase NOI
   (.btn-quiet, .sticky-cta, .skip-link) — desktop (>900px) NEAFECTAT.
   Pentru rollback: șterge tot blocul de la separator în jos.
   ============================================================ */

/* ── Reduce-motion: respect total al setărilor OS ────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1; transform:none}
}

/* ── Buton secundar (ghost) pentru ierarhie clară ────────────────── */
.btn-quiet{
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:var(--orange);
  border:2px solid var(--orange); border-radius:999px;
  padding:13px 26px; font-weight:600; font-size:16px; cursor:pointer;
  transition:.22s; font-family:inherit; text-decoration:none;
  min-height:44px;
}
.btn-quiet:hover{background:var(--orange); color:#fff; transform:translateY(-2px)}
.btn-quiet svg{width:19px; height:19px}

/* ── Bar mai compact pe mobil + limba vizibilă (era ascunsă) ─────── */
@media (max-width:900px){
  .bar .wrap{height:64px; gap:12px}
  .brand img{height:44px}
  /* Override existentul ".bar .lang{display:none}" de la linia 196 */
  .bar .lang{display:flex; order:2}
  .lang a{min-height:36px; display:flex; align-items:center; padding:6px 11px; font-size:12.5px}
  .burger{width:44px; height:44px; order:3; min-height:44px}
  .mobile-nav{inset:64px 0 0; padding:22px 22px 40px}
  .mobile-nav a{padding:14px 0; font-size:22px}
}

/* ── HERO mobile: poster Giddo respiră, bubble mai mic, h1 controlled ─ */
@media (max-width:900px){
  .hero .wrap{min-height:auto; padding-top:18px; padding-bottom:32px}
  .hero-art{max-width:clamp(240px, 78vw, 400px); margin:0 auto 4px}
  .hero-art > img{max-width:100%}
  .hero-video{max-width:100%}
  .hero h1{font-size:clamp(34px, 8vw, 46px); line-height:1.02; margin-bottom:14px}
  .bubble{font-size:19px; padding:10px 16px 11px; margin-bottom:18px; line-height:1.15}
}

/* ── Doors: grid 2×2 + "Surprise" pe full width pe ≤560px ─────────── */
@media (max-width:560px){
  .doors{display:grid; grid-template-columns:1fr 1fr; gap:10px; justify-content:stretch}
  .door{justify-content:center; min-height:48px; padding:0 14px; font-size:14px; gap:8px}
  .door.surprise{grid-column:1 / -1}
}

/* ── Postcards/Stays: scoatem rotirea pe mobil (cleaner & no overflow) ─ */
@media (max-width:700px){
  .card,
  .card:nth-child(3n+1),
  .card:nth-child(3n+2),
  .card:nth-child(3n){--rot:0deg}
  .card{transform:none; padding:14px 14px 16px}
  .card:hover{transform:translateY(-6px)}
  .card .ph{aspect-ratio:3/2}
  .card h3{margin:14px 4px 4px; font-size:20px}
  .card .feel{margin:0 4px; font-size:14.5px}
}

/* ── Spațiere secțiuni + wrap padding pe ecrane mici ─────────────── */
@media (max-width:560px){
  .sec{padding:48px 0}
  .sec-head{margin-bottom:30px}
  .wrap{padding:0 20px}
  .build,.mapband,.passport{padding:32px 22px; border-radius:18px}
  .mapband h2{font-size:clamp(26px, 6.4vw, 36px)}
  .build h2{font-size:clamp(26px, 6.4vw, 36px)}
  .sec-head h2{font-size:clamp(26px, 6.4vw, 36px); line-height:1.06}
  .sec-head p{font-size:16px}
}

/* ── Build chips: touch-safe (44px min) ──────────────────────────── */
@media (max-width:900px){
  .chips{gap:12px 14px}
  .chip span{min-height:44px; padding:11px 16px; display:inline-flex; align-items:center; font-size:15px}
}

/* ── Banner mobil "Descoperă România cu Giddo" (înlocuie hero-art pe ≤900px) ── */
.hero-banner-mobile{
  display:none; width:100%; max-width:480px; margin:0 auto;
  filter:drop-shadow(0 10px 22px rgba(40,28,15,.16));
  transition:transform .25s ease;
  text-decoration:none;
}
.hero-banner-mobile picture,.hero-banner-mobile img{display:block; width:100%; height:auto}
.hero-banner-mobile:hover{transform:translateY(-2px)}
.hero-banner-mobile:focus-visible{outline:3px solid var(--orange); outline-offset:6px; border-radius:14px}

/* Switch DESKTOP ↔ MOBILE pe hero-art — explicit pe wrapper, fără descendent confuz */
.hero-art-desktop{display:block}
@media (max-width:900px){
  .hero-art-desktop{display:none !important}
  .hero-banner-mobile{display:block !important}
  .hero-art{max-width:520px}
}

@media (prefers-reduced-motion: reduce){
  .hero-banner-mobile:hover{transform:none}
}

/* ── Sticky CTA pe homepage (mobile only, după 70% viewport scroll) ─ */
.sticky-cta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:48;
  display:none; align-items:center; gap:8px;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  backdrop-filter:saturate(140%) blur(12px);
  border:1px solid var(--line); border-radius:999px;
  padding:8px 8px 8px 8px; box-shadow:0 18px 50px -20px rgba(40,28,15,.45);
  opacity:0; transform:translateY(12px); transition:opacity .25s, transform .25s;
  max-width:520px; margin:0 auto;
}
.sticky-cta.show{opacity:1; transform:translateY(0)}
.sticky-cta .primary{
  flex:1; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--orange); color:#fff; font-weight:600; font-size:15px;
  padding:12px 14px; border-radius:999px; min-height:44px; text-decoration:none;
}
.sticky-cta .primary svg{width:18px; height:18px}
.sticky-cta .ico{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--ink); background:transparent; flex:none; text-decoration:none;
  transition:.18s;
}
.sticky-cta .ico:hover{background:var(--paper-2); color:var(--orange)}
.sticky-cta .ico svg{width:20px; height:20px}
@media (max-width:900px){ .sticky-cta{display:flex} }
@media (prefers-reduced-motion: reduce){ .sticky-cta{transition:none} }

/* ============================================================
   MOBILE POLISH — Home page sections (postcards/routes/build/stays/passport/journal/mapband)
   Doar @media (max-width) — desktop neatins. Padding tight, font-size mai mic,
   touch targets ≥44px, stamps wrap, jrow comprimat.
   ============================================================ */

/* ── Section rhythm pe mobile + sec-head mai aerisit ───────────── */
@media (max-width:700px){
  .sec{padding:56px 0}
  .sec-head{margin-bottom:26px}
  .sec-head .kicker{font-size:22px; margin-bottom:4px}
  .sec-head h2{font-size:clamp(26px,7vw,38px); line-height:1.05; letter-spacing:-.015em; margin-bottom:10px}
  .sec-head p{font-size:16px; line-height:1.5}
}
@media (max-width:420px){
  .sec{padding:44px 0}
}

/* ── Routes cards: padding mai mic, h3 mai mic, .go compact ──── */
@media (max-width:700px){
  .routes{gap:18px}
  .route .top{padding:20px 18px 16px}
  .route .dots{left:28px; top:54px; bottom:14px}
  .route .meta{gap:6px; margin-bottom:10px}
  .route .meta .tag{font-size:11.5px; padding:4px 9px}
  .route h3{font-size:20px; line-height:1.15}
  .route p{font-size:14px; line-height:1.45}
  .route .go{padding:13px 18px; font-size:14px}
}

/* ── Build trip: padding mai mic, btn full-width, h2 tighter ──── */
@media (max-width:700px){
  .build{padding:36px 22px; border-radius:20px}
  .build h2{font-size:clamp(24px,6.5vw,32px); margin-bottom:10px}
  .build p{font-size:15.5px; margin-bottom:22px; line-height:1.5}
  .build .chips{gap:10px 12px; margin-bottom:24px}
  .build .btn{display:flex; width:100%; justify-content:center; padding:14px 20px}
}

/* ── Stays section: deja foloseşte .postcards/.card (vezi postcards mobile pass) ── */

/* ── Passport block: padding redus, h3 mai mic, STAMPS WRAP + scaled ── */
@media (max-width:700px){
  .passport{padding:28px 24px; border-radius:18px}
  .passport h3{font-size:24px; line-height:1.1; margin-bottom:8px}
  .passport p{font-size:14.5px; margin-bottom:20px; line-height:1.5}
  .stamps{gap:12px; flex-wrap:wrap; justify-content:flex-start}
  .pp-stamp{width:60px; height:60px; font-size:10.5px}
}
@media (max-width:380px){
  .pp-stamp{width:54px; height:54px; font-size:10px}
  .stamps{gap:10px}
}

/* ── Journal split rows (jrow) compact pe mobil ──────────────── */
@media (max-width:700px){
  .split{gap:24px}
  .journal{gap:12px}
  .jrow{padding:12px; gap:14px; border-radius:12px}
  .jrow .ji{width:76px; height:60px; border-radius:8px}
  .jrow .jt .k{font-size:10.5px}
  .jrow .jt h3{font-size:17px; line-height:1.2; margin:2px 0 3px}
  .jrow .jt p{font-size:13px; line-height:1.35}
}

/* ── Mapband: padding mai mic, h2 + btn redus, decor mai mic ─── */
@media (max-width:700px){
  .mapband{padding:36px 22px; border-radius:20px}
  .mapband-deco{width:88px; margin-bottom:10px}
  .mapband h2{font-size:clamp(24px,6.5vw,32px); margin-bottom:8px}
  .mapband p{font-size:15.5px; margin-bottom:22px}
}
@media (max-width:560px){
  .mapband .btn-quiet,.mapband .btn{display:flex; width:100%; justify-content:center}
}

/* ── Mobile nav panel: înălțime fixă mai mică (bar redus) ───── */
@media (max-width:900px){
  .mobile-nav{inset:64px 0 0; padding:22px 22px 40px}
  .mobile-nav a{padding:14px 0; font-size:22px}
}