:root{
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --display: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;

  /* Premium tokens */
  --glass: color-mix(in oklab, var(--bg) 78%, transparent);
  --glassBorder: color-mix(in oklab, var(--accent) 14%, var(--line));
  --ring: 0 0 0 4px color-mix(in oklab, var(--accent) 16%, transparent);

  /* Luxury Light palette */
  --bg:#fbfaf7;          /* ivory */
  --surface:#ffffff;     /* clean cards */
  --surface2:#f6f2ea;    /* warm panel */
  --text:#161616;
  --muted:#6b6258;       /* warmer muted */
  --line: rgba(22,22,22,.10);

  /* Albanian red (slightly deeper) */
  --primary:#b81722;
  --primaryText:#fff;

  /* Luxury accent (champagne) */
  --accent:#c8a24a;

  --shadow: 0 24px 80px rgba(0,0,0,.10);
  --shadowSoft: 0 16px 44px rgba(0,0,0,.08);
  --radius: 22px;
  --pill: 999px;
  color-scheme: light;
}

html[data-theme="dark"]{
  --bg:#0a0a0b;
  --surface:#111113;
  --surface2:#0b0b0c;
  --text:#f5f5f7;
  --muted:#a1a1a6;
  --line: rgba(255,255,255,.14);

  --primary:#ff3b30;
  --primaryText:#120003;

  --accent:#d6b45a;

  --shadow: 0 22px 80px rgba(0,0,0,.70);
  --shadowSoft: 0 16px 54px rgba(0,0,0,.45);
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%; max-width:100%; overflow-x:hidden}
html{background: var(--bg); scroll-padding-top: 80px}
/* Make sure no image can dalë jashtë container-it në mobile */
img{max-width:100%; height:auto}
body{
  /* Prevent any accidental sideways scroll. */
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(980px 640px at 15% -10%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(980px 640px at 85% 0%, color-mix(in oklab, #000 6%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg));
  color:var(--text);
  line-height:1.35;
  opacity:1;
  transition: opacity 260ms ease;
}

/* (removed) page-wide photo background */
/* pageBg styles removed */

/* Premium animated background (subtle aurora + grain) */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:-40vh -30vw;
  pointer-events:none;
  z-index:-3;
}
/* Aurora / mesh layer (premium animated background) */
body::before{
  /* interactive mesh: 2 gradients follow cursor (mx,my) */
  background:
    radial-gradient(1200px 820px at calc(var(--mx, 50) * 1%) calc(var(--my, 35) * 1%), color-mix(in oklab, var(--accent) 24%, transparent), transparent 60%),
    radial-gradient(1080px 860px at calc((100 - var(--mx, 50)) * 1%) calc((100 - var(--my, 35)) * 1%), color-mix(in oklab, var(--primary) 18%, transparent), transparent 64%),
    radial-gradient(1100px 820px at 46% 92%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 68%),
    radial-gradient(940px 760px at 66% 58%, color-mix(in oklab, #fff 5%, transparent), transparent 76%);
  filter: blur(14px) saturate(1.10) contrast(1.03) brightness(1.01);
  opacity:.62;
  transform: translate3d(0,0,0);
  animation: auraDrift 28s ease-in-out infinite alternate;
}

/* Grain layer */
body::after{
  inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 1px, transparent 2px, transparent 6px);
  mix-blend-mode: overlay;
  opacity:.18;
  z-index:-2;
}

/* Performance: reduce heavy effects on small screens */
@media (max-width: 980px){
  body::before{filter: blur(22px) saturate(1.06) contrast(1.01) brightness(1.00); opacity:.52}
  body::after{opacity:.10}

  /* reduce heavy shadows on mobile */
  .mediaCard,.infoCard,.card,.trustBadge,.trustCopy,.reviewFeatured,.quote,.form,.mapCard,.socialCard{box-shadow: var(--shadowSoft)}
}

@keyframes auraDrift{
  0%{ transform: translate(-2.5%, -1.3%) scale(1.03) }
  50%{ transform: translate(2.8%, 1.4%) scale(1.06) }
  100%{ transform: translate(-1.4%, 2.2%) scale(1.04) }
}

/* Section "breathing" highlight (very subtle) */
@keyframes sectionGlow{
  0%,100%{opacity:.0}
  50%{opacity:.55}
}
.section{scroll-margin-top: 70px}
.section::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:min(980px, 92vw);
  height:min(520px, 65vh);
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 62%);
  pointer-events:none;
  opacity:0;
}
.section.is-active::after{animation: sectionGlow 1.6s ease-in-out 1}
@media (prefers-reduced-motion: reduce){
  .section::after{display:none}
}

/* Signature divider */
.sigDivider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin: 26px auto;
  width:min(920px, 92vw);
  color: color-mix(in oklab, var(--accent) 70%, var(--text));
}
.sigDivider .line{
  height:1px;
  flex:1;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 45%, var(--line)), transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  opacity:.9;
}
.sigDivider .mark{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--accent) 18%, var(--line));
  background: color-mix(in oklab, var(--bg) 74%, transparent);
  display:grid;
  place-items:center;
  box-shadow: 0 18px 60px rgba(0,0,0,.14);
}
.sigDivider .mark i{
  width:12px;
  height:12px;
  border-radius:4px;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--primary)));
  transform: rotate(45deg) scale(.9);
  opacity:.95;
}
.sigDivider.reveal{opacity:0; transform: translateY(10px); filter: blur(6px)}
.sigDivider.reveal.in{opacity:1; transform: translateY(0); filter: blur(0)}
.sigDivider.reveal.in .line{animation: sigDraw .55s cubic-bezier(.2,.9,.2,1) .02s forwards}
@keyframes sigDraw{from{transform:scaleX(0)} to{transform:scaleX(1)}}

@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
}

/* smoother cursor-driven updates */
:root{--mx:50; --my:35}

body.is-ready{opacity:1}
body.is-leaving{opacity:0}
body.menu-open{overflow:hidden}
body.modal-open{overflow:hidden}

a{color:inherit}

/* Scroll progress (top) */
.scrollProgress{
  position:fixed;
  left:0; top:0;
  height:3px;
  width:100%;
  z-index:200;
  pointer-events:none;
  background: transparent;
}
.scrollProgress > i{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 40%, var(--primary)),
    var(--primary),
    color-mix(in oklab, var(--accent) 55%, var(--primary)));
  box-shadow: 0 10px 30px color-mix(in oklab, var(--primary) 30%, transparent);
  border-radius: 0 999px 999px 0;
  transform: translateZ(0);
}

/* Icon (inline SVG) */
.iconInline{display:inline-flex; align-items:center; gap:10px}
.iSvg{width:18px; height:18px; display:inline-block; color: color-mix(in oklab, var(--accent) 70%, var(--text))}
.iSvg svg{width:18px; height:18px; display:block; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* Luxury micro-typography */
.kicker{
  margin:0 0 10px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: color-mix(in oklab, var(--text) 58%, var(--muted));
}
.kicker .dot{opacity:.55}

.container{max-width:1140px; margin:0 auto; padding:0 18px}

.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:18px;top:18px;width:auto;height:auto;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;z-index:9999}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(170%) blur(16px);
  background:color-mix(in oklab, var(--bg) 74%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--accent) 14%, var(--line));
  transition: transform .28s cubic-bezier(.2,.9,.2,1), background .2s ease, border-color .2s ease;
}
.topbar.is-hidden{transform: translateY(-110%)}
.topbar.is-compact .nav{height:48px}
.topbar.is-compact .brandMark{width:32px;height:32px}
.topbar.is-compact .brandMark img{width:20px;height:20px}
.nav{height:54px; display:flex; align-items:center; justify-content:space-between; gap:14px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800}
.brandText{letter-spacing:-.01em}
.brandMark{width:36px;height:36px; display:grid; place-items:center; border-radius:12px; background:var(--surface); border:1px solid var(--line); transform: translateZ(0)}
.brandMark img{width:22px;height:22px}

/* Brand subtle float */
@keyframes brandFloat{0%,100%{transform: translateY(0)} 50%{transform: translateY(-2px)}}
body.hero-enter .brandMark{animation: brandFloat 3.6s ease-in-out 1.4s infinite}
@media (prefers-reduced-motion: reduce){body.hero-enter .brandMark{animation:none}}
.menu{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center}
/* Bottom bar + modal */
/* Disabled: was getting in the way on mobile */
.bottomBar{display:none !important}

.modal{position:fixed; inset:0; display:none; z-index:120}
.modal.is-open{display:block}
.modalBackdrop{position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition: opacity .22s ease}
.modalPanel{position:relative; width:min(720px, calc(100% - 24px)); margin: 12vh auto 0; border-radius:22px; border:1px solid rgba(200,162,74,.20); background:var(--bg); box-shadow: 0 40px 120px rgba(0,0,0,.35); overflow:hidden;
  transform: translateY(12px) scale(.985);
  opacity:0;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
}
.modal.is-open .modalBackdrop{opacity:1}
.modal.is-open .modalPanel{transform: translateY(0) scale(1); opacity:1}

.modalTop{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); background: linear-gradient(180deg, color-mix(in oklab, var(--surface2) 80%, var(--bg)), var(--bg))}
.modalForm{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; padding:18px}
.modalForm label{display:flex; flex-direction:column; gap:6px}
.modalForm label span{font-size:12px; color:var(--muted); font-weight:1000}
.modalForm input,.modalForm textarea,.modalForm select{border:1px solid var(--line); background: color-mix(in oklab, var(--bg) 88%, var(--surface2)); color:var(--text); border-radius:14px; padding:10px 12px; font:inherit; outline:none}
.modalForm input:focus,.modalForm textarea:focus,.modalForm select:focus{border-color: color-mix(in oklab, var(--accent) 30%, var(--line))}
.modalForm .full{grid-column:1/-1}
.modalActions{grid-column:1/-1; display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
@media (max-width: 720px){
  .modalPanel{margin-top: 10vh}
  .modalForm{grid-template-columns:1fr}
}

.menu a{
  font-size:12px;
  color:var(--muted);
  text-decoration:none;
  font-weight:900;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), background .18s ease, border-color .18s ease, color .18s ease;
  position:relative;
  overflow:hidden;
}
.menu a::after{
  content:"";
  position:absolute;
  left:14px; right:14px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background: color-mix(in oklab, var(--accent) 52%, var(--primary));
  transform: scaleX(0);
  transform-origin: 50% 50%;
  opacity:.0;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
}
.menu a:hover{color:var(--text); border-color: color-mix(in oklab, var(--accent) 38%, var(--line)); background: color-mix(in oklab, var(--accent) 10%, var(--bg))}
.menu a:hover::after{transform: scaleX(1); opacity:.9}
.menu a:active{transform: translateY(1px)}
.navRight{display:flex; align-items:center; gap:10px}

.langWrap{display:flex; align-items:center}
.langSelect{height:38px; border-radius:14px; border:1px solid var(--line); background:var(--bg); color:var(--text); padding:0 10px; font-weight:900; font-size:12px; outline:none}
.langSelect:focus{border-color: color-mix(in oklab, var(--primary) 35%, var(--line))}
.iconBtn{width:38px;height:38px; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer}
.iconBtn:hover{background:var(--surface); border-color:var(--line); color:var(--text)}
.icon{font-size:14px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border-radius:var(--pill); border:1px solid transparent; text-decoration:none; font-weight:900; font-size:14px; letter-spacing:-.01em;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), filter .2s ease, background .2s ease, box-shadow .22s ease, border-color .22s ease}
.btn:hover{transform: translateY(-2px); filter:saturate(1.06)}
.btn:active{transform: translateY(0) scale(.985)}
.btn:focus-visible{outline:none; box-shadow: var(--ring)}

/* Haptic-like tap */
.is-tapped{animation: tap .18s ease}
@keyframes tap{0%{transform:scale(1)} 50%{transform:scale(.985)} 100%{transform:scale(1)}}

/* Fade on language change */
body.is-lang-switching{opacity:.92}

/* Toast */
.toast{position:fixed; left:12px; right:12px; top:72px; margin:0 auto; width:min(720px, calc(100% - 24px)); z-index:140; display:none;
  padding:12px 14px; border-radius:18px; border:1px solid rgba(200,162,74,.22);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 24px 90px rgba(0,0,0,.14);
  color:var(--text);
  transform: translateY(-8px);
  opacity:0;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
}
.toast.is-show{display:block; transform: translateY(0); opacity:1}
.toast strong{font-weight:1100}
@media (max-width: 980px){.toast{top:64px}}
.btn--sm{padding:9px 14px; font-size:13px}
.btn--ghost{background:transparent; border-color:var(--line)}
.btn--ghost:hover{background:var(--surface)}
.btn--danger{
  color:var(--primaryText);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 22%, var(--primary)) 0%,
      var(--primary) 55%,
      color-mix(in oklab, #000 10%, var(--primary)) 100%);
  border-color: color-mix(in oklab, var(--accent) 26%, transparent);
  box-shadow: 0 16px 42px color-mix(in oklab, var(--primary) 26%, transparent);
}
.btn--danger:hover{filter:brightness(.97) saturate(1.04)}

/* Social buttons (Hero) */
.socialBtn{border-color:var(--line); background: color-mix(in oklab, var(--bg) 70%, transparent)}
.socialBtn:hover{background:var(--surface)}
.socialBtn .socialIcon{width:18px; height:18px; display:block; fill:currentColor}

.socialBtn--fb{color:#1877F2; border-color: color-mix(in oklab, #1877F2 26%, var(--line)); background: color-mix(in oklab, #1877F2 10%, var(--bg))}
.socialBtn--fb:hover{background: color-mix(in oklab, #1877F2 16%, var(--bg))}

/* Instagram: brand-like gradient */
.socialBtn--ig{color:#fff; border-color: transparent; background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4)}
.socialBtn--ig:hover{filter:saturate(1.05) brightness(.98)}

/* TikTok */
.socialBtn--tt{color:#fff; border-color:transparent; background:#000; box-shadow: 0 12px 24px rgba(0,0,0,.22)}
.socialBtn--tt:hover{filter:brightness(.98)}

/* YouTube */
.socialBtn--yt{color:#fff; border-color:transparent; background:#FF0000; box-shadow: 0 12px 24px rgba(255,0,0,.16)}
.socialBtn--yt:hover{filter:brightness(.98)}

.ctaRow{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.ctaRow--left{justify-content:flex-start}

/* Force 4 social buttons in one row */
.socialRow{flex-wrap:nowrap}
@media (max-width: 520px){
  .socialRow{gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px}
  .socialRow .btn{flex:0 0 auto; padding:9px 12px; font-size:12px}

  /* Train: show more items even on small screens */
  .slider--train .slide{flex-basis: 58vw; height: 180px}
}

/* Hero */
.hero{
  /* Desktop: Full-page hero */
  min-height: calc(100svh - 54px);
  display:flex;
  align-items:center;
  padding: clamp(28px, 7vh, 72px) 0 clamp(22px, 4vh, 34px);
  background:
    radial-gradient(900px 380px at 20% 0%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 60%),
    radial-gradient(700px 320px at 90% 20%, color-mix(in oklab, #000 4%, transparent), transparent 60%),
    var(--surface2);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}

/* Cinematic steam layer (canvas injected by JS) */
.steamLayer{position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.38; mix-blend-mode: screen}
.steamLayer canvas{width:100%; height:100%; display:block}
.heroSplit{position:relative; z-index:1}
.section{position:relative}
.section > .container{position:relative; z-index:1}

/* Heat shimmer (subtle moving highlight) */
@keyframes shimmerDrift{
  0%{transform: translateX(-30%) skewX(-8deg); opacity:.0}
  12%{opacity:.28}
  50%{opacity:.18}
  85%{opacity:.0}
  100%{transform: translateX(130%) skewX(-8deg); opacity:.0}
}

/* Apply shimmer to photo surfaces */
.heroCarousel::before,
.cardMedia::before{
  content:"";
  position:absolute;
  inset:-30% -60%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 45%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.10) 55%,
    rgba(255,255,255,0) 100%);
  mix-blend-mode: overlay;
  filter: blur(2px);
  opacity:0;
  transform: translateX(-30%) skewX(-8deg);
  animation: shimmerDrift 7.5s ease-in-out infinite;
  pointer-events:none;
}

/* Keep shimmer behind text overlays */
.heroCarousel{position:relative}
.cardMedia{position:relative; overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .heroCarousel::before,
  .cardMedia::before{animation:none !important; opacity:0 !important}
}

@media (max-width: 980px){
  .steamLayer{opacity:.30}
}
.hero--split .heroSplit{
  width:100%;
  display:grid;
  grid-template-columns: 1.05fr .95fr; /* desktop/tablet default: 2 kolona */
  gap:18px;
  align-items:center
}
.headline{font-family:var(--display); font-size:62px; letter-spacing:-.03em; margin:0; font-weight:800}
.slogan{margin:10px 0 0; font-weight:900; letter-spacing:-.01em; color: color-mix(in oklab, var(--primary) 90%, var(--text));}
.subhead{max-width:60ch; margin:10px 0 0; color:var(--muted); font-size:18px; line-height:1.65}

/* Hero entrance animation (premium) */
.hero .kicker,
.hero .headline,
.hero .slogan,
.hero .subhead,
.hero .ctaRow,
.hero .badges,
.hero .infoCard,
.hero .mediaCard{
  opacity:0;
  transform: translateY(14px);
  filter: blur(6px);
}
body.hero-enter .hero .kicker{animation: heroIn .45s cubic-bezier(.2,.9,.2,1) .02s forwards}
body.hero-enter .hero .headline{animation: heroIn .5s cubic-bezier(.2,.9,.2,1) .06s forwards}
body.hero-enter .hero .slogan{animation: heroIn .5s cubic-bezier(.2,.9,.2,1) .10s forwards}
body.hero-enter .hero .subhead{animation: heroIn .5s cubic-bezier(.2,.9,.2,1) .14s forwards}
body.hero-enter .hero .ctaRow{animation: heroIn .5s cubic-bezier(.2,.9,.2,1) .18s forwards}
body.hero-enter .hero .badges{animation: heroIn .5s cubic-bezier(.2,.9,.2,1) .22s forwards}
body.hero-enter .hero .infoCard{animation: heroIn .55s cubic-bezier(.2,.9,.2,1) .26s forwards}
body.hero-enter .hero .mediaCard{animation: heroIn .55s cubic-bezier(.2,.9,.2,1) .08s forwards}

@keyframes heroIn{
  from{opacity:0; transform: translateY(14px); filter: blur(6px)}
  to{opacity:1; transform: translateY(0); filter: blur(0)}
}

/* Subtle shimmer on primary CTA (first view) */
.hero .btn--danger{
  position:relative;
  overflow:hidden;
}
.hero .btn--danger::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-50%) skewX(-10deg);
  opacity:0;
}
body.hero-enter .hero .btn--danger::before{animation: ctaShimmer 2.4s ease 1.2s forwards}
@keyframes ctaShimmer{
  0%{opacity:0; transform: translateX(-60%) skewX(-10deg)}
  10%{opacity:.8}
  60%{opacity:.25}
  100%{opacity:0; transform: translateX(120%) skewX(-10deg)}
}

@media (prefers-reduced-motion: reduce){
  .hero .kicker,.hero .headline,.hero .slogan,.hero .subhead,.hero .ctaRow,.hero .badges,.hero .infoCard,.hero .mediaCard{opacity:1; transform:none; filter:none}
  body.hero-enter .hero .btn--danger::before{animation:none}
}

/* Sticky "Rezervo" FAB (desktop) */
.fabBook{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:180;
  display:none;
}
.fabBook.is-on{display:block}
.fabBook .fabBtn{
  height:46px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--accent) 18%, var(--line));
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 16%, var(--primary)) 0%,
    var(--primary) 60%,
    color-mix(in oklab, #000 10%, var(--primary)) 100%);
  color: var(--primaryText);
  font-weight:1000;
  box-shadow: 0 22px 80px rgba(0,0,0,.22);
  cursor:pointer;
}
.fabBook .fabBtn:hover{transform: translateY(-2px)}
.fabBook .fabBtn:active{transform: translateY(0) scale(.985)}
@media (max-width: 980px){
  .fabBook{display:none !important}
}

/* Mobile floating contact (single button) */
.fabContact{position:fixed; right:16px; bottom:16px; z-index:185; display:none}
@media (max-width: 980px){.fabContact{display:block}}
.fabContact .fcBtn{
  width:54px; height:54px; border-radius:999px;
  border:1px solid color-mix(in oklab, var(--accent) 18%, var(--line));
  background: color-mix(in oklab, var(--bg) 74%, transparent);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 24px 90px rgba(0,0,0,.24);
  color: var(--text);
  font-weight:1000;
  cursor:pointer;
}
.fabContact .fcPanel{
  position:absolute;
  right:0;
  bottom:64px;
  width: 220px;
  border-radius:18px;
  border:1px solid color-mix(in oklab, var(--accent) 14%, var(--line));
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 30px 110px rgba(0,0,0,.30);
  padding:10px;
  display:none;
}
.fabContact.is-open .fcPanel{display:block}
.fcLink{display:flex; align-items:center; justify-content:space-between; padding:12px 12px; border-radius:14px; border:1px solid var(--line); background: color-mix(in oklab, var(--bg) 76%, var(--surface2)); text-decoration:none; font-weight:1000}
.fcLink + .fcLink{margin-top:8px}

.badges{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--pill); border:1px solid var(--line); background: color-mix(in oklab, var(--bg) 75%, transparent); font-weight:800; font-size:12px}

.infoCard{
  margin-top:16px;
  border:1px solid var(--glassBorder);
  background: var(--glass);
  border-radius:var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(1.22);
}
.infoRow{
  display:grid;
  grid-template-columns: auto 1fr;
  align-items:center;
  column-gap:12px;
  padding:9px 10px;
  border-radius:14px;
}
.infoRow:nth-child(odd){background: color-mix(in oklab, var(--surface2) 50%, transparent)}
.infoK{color:var(--muted); font-weight:900; font-size:12px}
.infoV{font-weight:800; font-size:12px; text-align:right; text-decoration:none; color:var(--text)}

.mediaCard{border:1px solid var(--glassBorder); background: var(--glass); border-radius:var(--radius); padding:14px; box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(1.25);
}
.mediaTop{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.pill{display:inline-flex; align-items:center; padding:7px 10px; border-radius:var(--pill); background: color-mix(in oklab, var(--primary) 12%, var(--surface)); border:1px solid color-mix(in oklab, var(--primary) 25%, var(--line)); font-weight:900; font-size:12px}
.pill--muted{background: var(--surface); border-color: var(--line); color: var(--muted)}
.mediaHint{margin:10px 0 0; color:var(--muted); font-size:12px; line-height:1.6}

/* Hero moving images */
.heroCarousel{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--surface)}
.hcSlide{position:absolute; inset:0; background-size:cover; background-position:center; background-color:#111; opacity:0; transform: scale(1.03); animation: hcFade 16s infinite}
.hcSlide:nth-child(1){animation-delay:0s}
.hcSlide:nth-child(2){animation-delay:4s}
.hcSlide:nth-child(3){animation-delay:8s}
.hcSlide:nth-child(4){animation-delay:12s}
.heroCarousel{aspect-ratio: 16/11}

.hcSlide::after{content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,0) 55%)}
.hcMeta{position:absolute; left:14px; right:14px; bottom:14px; z-index:1; color:#fff; display:grid; gap:4px}
.hcT{font-weight:1000; font-size:18px; letter-spacing:-.02em}
.hcS{font-weight:900; font-size:12px; opacity:.9}

@keyframes hcFade{
  0%{opacity:0; transform: scale(1.03)}
  6%{opacity:1; transform: scale(1.00)}
  26%{opacity:1; transform: scale(1.00)}
  32%{opacity:0; transform: scale(1.03)}
  100%{opacity:0; transform: scale(1.03)}
}

/* Video frame (used in Video section) */
.videoFrame{border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--surface)}
.videoFrame video,.videoFrame iframe{width:100%; height:auto; display:block; aspect-ratio:16/9; background:#000; border:0}

/* Sections */
.section{
  padding:72px 0;
  position:relative;
  min-height: 100svh; /* full-page feel (desktop) */
  display:flex;
  align-items:center;
}
.section > .container{width:100%}

/* Alt block inside a section (for merged sections) */
.blockAlt{
  padding:18px;
  border-radius: 26px;
  border:1px solid color-mix(in oklab, var(--accent) 12%, var(--line));
  background: linear-gradient(180deg, var(--surface2), color-mix(in oklab, var(--surface2) 70%, var(--bg)));
  box-shadow: var(--shadow);
}

/* Desktop section backgrounds (premium, subtle) */
/* (removed) per-section background photo overlays */
.section::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 35%, var(--line)), transparent);
  opacity:.6;
}
.section:first-of-type::before{display:none}
.section--alt{
  background: linear-gradient(180deg, var(--surface2), color-mix(in oklab, var(--surface2) 70%, var(--bg)));
  border-top:1px solid color-mix(in oklab, var(--accent) 10%, var(--line));
  border-bottom:1px solid color-mix(in oklab, var(--accent) 10%, var(--line));
}
.sectionHead{display:flex; justify-content:space-between; gap:16px; align-items:flex-end; margin-bottom:18px}
.sectionHead h2{margin:0; font-family:var(--display); font-size:38px; letter-spacing:-.02em}
.sectionHead p{margin:0; color:var(--muted); max-width:75ch; line-height:1.65}

/* Story */
.storyGrid{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:start}
.story{border:1px solid var(--line); background:var(--bg); border-radius:var(--radius); padding:18px; box-shadow: var(--shadow)}
.story h3{margin:0 0 10px; letter-spacing:-.02em}
.story p{margin:0 0 10px; color: color-mix(in oklab, var(--text) 86%, var(--muted)); line-height:1.7}
.story p:last-child{margin:0}
.storyHighlights{display:grid; gap:12px}
.kpi{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:16px}
.kpiN{font-size:28px; font-weight:1000; letter-spacing:-.02em}
.kpiT{margin-top:6px; color:var(--muted); font-weight:800; font-size:12px}

/* Service cards */
.cards4{display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:12px}
@media (max-width: 1100px){
  .cards4{grid-template-columns: repeat(3, minmax(0, 1fr))}
}
@media (max-width: 980px){
  .cards4{grid-template-columns: 1fr 1fr}
}
@media (max-width: 520px){
  .cards4{grid-template-columns:1fr}
}
.card2{border:1px solid var(--glassBorder); background: var(--glass); border-radius:var(--radius); padding:16px; box-shadow: var(--shadowSoft);
  backdrop-filter: blur(14px) saturate(1.25);
  position:relative; overflow:hidden}
.card2I{width:42px;height:42px; border-radius:14px; display:grid; place-items:center; border:1px solid var(--line); background: color-mix(in oklab, var(--primary) 10%, var(--surface))}
.card2--link{display:block; text-decoration:none}

.card2--interactive:hover{border-color: color-mix(in oklab, var(--accent) 34%, var(--line))}
.card2--interactive::after{content:""; position:absolute; inset:-60px -40px auto auto; width:160px; height:160px; background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--primary) 20%, transparent), transparent 60%); opacity:.0; transition: opacity .22s ease}
.card2--interactive:hover::after{opacity:1}
.card2 h3{margin:12px 0 6px; letter-spacing:-.02em}
.card2 p{margin:0; color:var(--muted); line-height:1.6}

/* Menu filters (chips) */
.chips{display:flex; gap:10px; flex-wrap:wrap; margin: 6px 0 14px}
.chip{border:1px solid var(--line); background: color-mix(in oklab, var(--bg) 78%, var(--surface2)); color:var(--muted); padding:10px 12px; border-radius:999px; font-weight:1000; cursor:pointer; transition: transform .18s cubic-bezier(.2,.9,.2,1), border-color .18s ease, background .18s ease, color .18s ease}
.chip:hover{transform: translateY(-1px); border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); background: color-mix(in oklab, var(--accent) 8%, var(--bg)); color:var(--text)}
.chip.is-active{border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); background: color-mix(in oklab, var(--accent) 12%, var(--bg)); color:var(--text)}

/* Menu cards */
.grid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px}
.grid .card.is-hidden{display:none}
.card{border:1px solid var(--glassBorder); background: var(--glass); border-radius:var(--radius); overflow:hidden; box-shadow: var(--shadowSoft);
  backdrop-filter: blur(14px) saturate(1.25);
  transition: transform .25s cubic-bezier(.2,.9,.2,1), box-shadow .25s ease, border-color .25s ease, filter .25s ease}
.card:hover{transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow); border-color: color-mix(in oklab, var(--accent) 34%, var(--line)); filter:saturate(1.02)}
.cardMedia{height:190px; background-size:cover; background-position:center; background-color: #111; position:relative}
.cardMedia::after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.28)); opacity:.65; pointer-events:none}
.cardBody{padding:16px}
.cardBody h3{margin:0 0 6px; letter-spacing:-.02em}
.cardBody p{margin:0; color:var(--muted)}
.cardActions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
.shareBtn{font-weight:1000}
.link{display:inline-block; margin-top:10px; font-size:13px; color:var(--primary); text-decoration:none; font-weight:900}
.link:hover{text-decoration:underline}

/* Slider (Gallery + Reviews) */
.slider,.reviewSlider{display:grid; grid-template-columns: 44px 1fr 44px; gap:10px; align-items:center}
.sBtn{width:44px;height:44px; border-radius:16px; border:1px solid var(--line); background:var(--bg); color:var(--text); cursor:pointer; font-weight:1000; font-size:18px; box-shadow: var(--shadow)}
.sBtn:hover{background:var(--surface)}
.sViewport{overflow:hidden; border-radius:22px; border:1px solid var(--line); background:var(--surface2); box-shadow: var(--shadow)}
.sTrack{display:flex; gap:10px; padding:8px; overflow:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth}
.sTrack::-webkit-scrollbar{height:10px}
.sTrack::-webkit-scrollbar-thumb{background: color-mix(in oklab, var(--text) 15%, transparent); border-radius:999px}

/* Gallery (Instagram-like swipe) */
#galeri .slider--ig{grid-template-columns: 1fr}
#galeri .slider--ig .sBtn{display:none}

#galeri .slider--ig .sViewport{
  overflow:visible;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}

#galeri .slider--ig .sTrack{
  padding:0;
  gap:10px;
  overflow:visible;
  scroll-snap-type:none;
  scroll-behavior:auto;
  flex-wrap:wrap;
  justify-content:center;
}

#galeri .slider--ig .slide{
  flex:0 0 clamp(120px, 18vw, 170px);
  aspect-ratio: 1 / 1;
  height:auto;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}
@media (max-width: 520px){
  #galeri .slider--ig .slide{flex:0 0 calc(33.333% - 7px)}
}

#galeri .slider--ig .slide > img{width:100%; height:100%; object-fit:cover; object-position:center; display:block}

/* Gallery "train" mode (continuous slideshow) */
.slider--train{grid-template-columns: 1fr}
.slider--train .sBtn{display:none}

/* move padding to viewport so loop distance stays clean */
.slider--train .sViewport{padding:0; mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);}
.slider--train .sTrack{
  padding:0;
  overflow:hidden;
  scroll-snap-type:none;
  will-change: transform;
  /* JS will drive transform for perfect looping */
  animation:none;
}

@media (prefers-reduced-motion: reduce){
  .slider--train .sTrack{transform:none !important}
}

/* Gallery slides */
.slide{position:relative; flex:0 0 min(360px, 78vw); height:240px; border-radius:18px; border:1px solid var(--line); background-color:#222; scroll-snap-align:start; overflow:hidden; text-decoration:none; transform: translateZ(0)}
.slide > img{width:100%; height:100%; object-fit:cover; display:block}

/* Train: show more photos at once */
.slider--train .sTrack{gap:2px} /* si tren, pa hapesire */
.slider--train .slide{
  /* smaller cards so you see more than 3 at once */
  flex: 0 0 clamp(140px, 16vw, 220px);
  height: 190px;
}

.galleryLogoRow{display:flex; justify-content:center; margin-top:14px; padding-top:18px; border-top:1px solid var(--line)}
.galleryLogoRow img{opacity:.75; filter: drop-shadow(0 10px 24px rgba(0,0,0,.12))}
.slide::after{content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 55%); opacity:.0; transition: opacity .18s ease}
.slideMeta{position:absolute; left:14px; right:14px; bottom:14px; display:grid; gap:4px; color:#fff; opacity:0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease}
.slideTitle{font-weight:1000; font-size:18px; letter-spacing:-.02em}
.slideSub{font-weight:900; font-size:12px; opacity:.9}
.slide:hover::after{opacity:1}
.slide:hover .slideMeta{opacity:1; transform: translateY(0)}

/* Video stack */
.videoStack{max-width: 980px; margin: 0 auto}

/* Trust strong badge */
.trustBadge--strong{background: color-mix(in oklab, var(--primary) 8%, var(--bg)); border-color: color-mix(in oklab, var(--primary) 25%, var(--line))}
.ta--big{font-size:20px}

/* Reviews */
.quoteTop{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.qAvatar{width:30px; height:30px; border-radius:999px; border:1px solid color-mix(in oklab, var(--accent) 14%, var(--line)); background: var(--glass); padding:0; display:grid; place-items:center; font-weight:1000; font-size:12px; color:var(--text); box-shadow: 0 14px 40px rgba(0,0,0,.14)}
.qBadge{margin-left:10px; font-size:11px; font-weight:1000; padding:6px 10px; border-radius:999px; border:1px solid color-mix(in oklab, var(--accent) 14%, var(--line)); background: color-mix(in oklab, var(--bg) 70%, transparent); color: color-mix(in oklab, var(--text) 72%, var(--muted))}
.qWho{display:grid; line-height:1.1}
.qName{font-weight:1000; font-size:12px}
.qSrc{font-weight:900; font-size:11px; color:var(--muted)}
.stars{margin-left:auto; letter-spacing:.18em; font-weight:1000; color: color-mix(in oklab, var(--primary) 78%, var(--text));}
.quote--slide{flex:0 0 min(420px, 86vw); scroll-snap-align:start}

/* Video grid (unused now but keep for future) */
.videoGrid{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; align-items:start}
.videoCopy{border:1px solid var(--line); background:var(--bg); border-radius:var(--radius); padding:18px; box-shadow: var(--shadow)}
.videoCopy h3{margin:0 0 10px}
.videoCopy p{margin:0; color:var(--muted); line-height:1.7}

/* Trust (aggressive interactive) */
.trust{display:grid; grid-template-columns: .8fr 1.2fr; gap:14px; align-items:start}
.trustBadge{
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .22s cubic-bezier(.2,.9,.2,1), border-color .22s ease, box-shadow .22s ease;
}
.trustBadge::before{
  content:"";
  position:absolute;
  inset:-80px -120px auto auto;
  width:240px;
  height:240px;
  background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--primary) 28%, transparent), transparent 62%);
  opacity:0;
  transition: opacity .22s ease;
}
.trustBadge:hover{transform: translateY(-6px) scale(1.01); border-color: color-mix(in oklab, var(--accent) 42%, var(--line)); box-shadow: 0 26px 90px rgba(0,0,0,.22)}
.trustBadge:hover::before{opacity:1}

.ta{font-weight:1000; letter-spacing:.12em; color: color-mix(in oklab, var(--primary) 75%, var(--text)); font-size:18px; display:flex; align-items:center; gap:10px}
.ratingLogo{width:30px;height:30px; border-radius:999px; filter: drop-shadow(0 12px 28px rgba(0,0,0,.24)); transform-origin:50% 50%; animation: popIdle 4.6s infinite}
.btnIcon{width:16px;height:16px; border-radius:6px; opacity:.95}
.taSub{margin-top:8px; font-weight:900}

.trustCopy{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), border-color .22s ease, box-shadow .22s ease;
}
.trustCopy:hover{transform: translateY(-6px); border-color: color-mix(in oklab, var(--accent) 36%, var(--line)); box-shadow: 0 26px 90px rgba(0,0,0,.20)}
.trustCopy h3{margin:0 0 10px}
.trustCopy p{margin:0 0 10px; color:var(--muted); line-height:1.7}
.trustCopy p:last-child{margin:0}

.trustBadge:hover .ratingLogo{animation: popHover .65s ease both}
@keyframes popIdle{0%,92%,100%{transform:scale(1) rotate(0deg)} 94%{transform:scale(1.06) rotate(-6deg)} 96%{transform:scale(1) rotate(0deg)}}
@keyframes popHover{0%{transform:scale(1) rotate(-8deg)} 60%{transform:scale(1.14) rotate(0deg)} 100%{transform:scale(1.08) rotate(0deg)}}

/* CTA ring pulse */
.trustCopy .btn--danger{position:relative}
.trustCopy .btn--danger::after{content:""; position:absolute; inset:-10px; border-radius:999px; border:2px solid color-mix(in oklab, var(--accent) 38%, transparent); opacity:0}
.trustCopy:hover .btn--danger{animation: ctaPulse 1.05s infinite}
.trustCopy:hover .btn--danger::after{animation: ring 1.05s infinite}
@keyframes ctaPulse{0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)}}
@keyframes ring{0%{opacity:0; transform:scale(.96)} 40%{opacity:.45} 100%{opacity:0; transform:scale(1.08)}}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform: translateY(18px) scale(.99);
  filter: blur(6px);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.9,.2,1),
    filter .55s ease;
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity, filter;
}
.reveal.in{opacity:1; transform: translateY(0) scale(1); filter: blur(0)}

/* optional: stagger group helper */
.revealGroup > .reveal{transition-delay: var(--d, 0ms)}

.rgBadge{margin-top:12px; border:1px solid var(--line); background:var(--bg); border-radius:var(--radius); padding:14px 16px; box-shadow: var(--shadow); display:flex; align-items:center; justify-content:space-between; gap:12px}
.rgTitle{font-weight:1000; letter-spacing:-.01em}
.rgStars{margin-top:6px; letter-spacing:.18em; font-weight:1000; color: color-mix(in oklab, var(--primary) 78%, var(--text)); font-size:14px}
.rgSub{margin-top:6px; color:var(--muted); font-weight:800; font-size:12px; line-height:1.4}

/* Reviews (Luxury) */
.reviewsLux{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:stretch}
@media (max-width: 980px){.reviewsLux{grid-template-columns: 1fr;}}

.reviewFeatured{
  border:1px solid color-mix(in oklab, var(--accent) 14%, var(--line));
  background: color-mix(in oklab, var(--bg) 86%, var(--surface2));
  border-radius:var(--radius);
  padding:22px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.reviewFeatured::before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width:280px;
  height:280px;
  background: radial-gradient(circle at 30% 30%, rgba(200,162,74,.22), transparent 62%);
}

.reviewGrid{display:grid; gap:12px}

/* Reviews marquee (horizontal, infinite) */
.reviewMarquee{position:relative}
.rmViewport{
  overflow:hidden;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 70%, var(--surface));
  box-shadow: var(--shadow);
  padding: 10px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.rmTrack{
  display:flex;
  gap:12px;
  align-items:stretch;
  will-change: transform;
}
.rmItem{flex: 0 0 min(420px, 86vw)}

@media (prefers-reduced-motion: reduce){
  .rmViewport{mask-image:none}
  .rmTrack{transform:none !important}
}

.quote{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadowSoft);
}
.quote p{margin:0; font-weight:750; line-height:1.75}

.quoteTop{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.qWho{display:grid; gap:2px}
.qName{font-weight:1000}
.qSrc{font-weight:900; color:var(--muted); font-size:12px}
.stars{letter-spacing:.14em; color: color-mix(in oklab, var(--accent) 70%, var(--text)); font-weight:1000}

/* Contact (Location card) */
.contactGrid{display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start}
@media (max-width: 980px){.contactGrid{grid-template-columns: 1fr;}}

.locationCard{
  border:1px solid color-mix(in oklab, var(--accent) 14%, var(--line));
  background: color-mix(in oklab, var(--bg) 86%, var(--surface2));
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}
.locTop h3{margin:0 0 4px}
.locRows{display:grid; gap:10px; margin-top:12px}
.locRow{display:flex; gap:10px; align-items:flex-start; color:var(--muted)}
.locRow strong{color:var(--text)}

.mapEmbed{margin-top:14px; border:1px solid color-mix(in oklab, var(--accent) 10%, var(--line)); border-radius:18px; overflow:hidden; background:var(--surface); position:relative}
.mapEmbed iframe{width:100%; height:280px; border:0; display:block}
/* (removed) click-to-load placeholder for Maps */
@media (max-width: 980px){.mapEmbed iframe{height:260px}}

.form{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:18px; box-shadow: var(--shadow)}
.form label{display:flex; flex-direction:column; gap:6px}
.form label span{font-size:12px; color:var(--muted); font-weight:900}
.form input,.form textarea{border:1px solid var(--line); background: color-mix(in oklab, var(--bg) 88%, var(--surface2)); color:var(--text); border-radius:14px; padding:10px 12px; font:inherit; outline:none}
.form input:focus,.form textarea:focus{border-color: color-mix(in oklab, var(--accent) 30%, var(--line))}
.form .full{grid-column:1/-1}
.actions{display:flex; gap:10px; flex-wrap:wrap}

/* Social */
.socialGrid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px}
.socialCard{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  border:1px solid var(--glassBorder);
  background: var(--glass);
  border-radius:var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(1.22);
  transition: transform .22s cubic-bezier(.2,.9,.2,1), border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.socialCard:hover{
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--accent) 34%, var(--line));
  box-shadow: 0 30px 110px rgba(0,0,0,.20);
}
.socialIcon{
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--primary) 10%, var(--surface));
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.socialIcon svg{width:22px; height:22px; fill: color-mix(in oklab, var(--primary) 80%, var(--text));}
.socialText{display:grid; gap:3px; min-width:0}
.socialTitle{font-weight:1000; letter-spacing:-.02em}
.socialUrl{color:var(--muted); font-weight:900; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

@media (max-width: 980px){
  .socialGrid{grid-template-columns: 1fr}
}

/* Footer (Dark Luxury) */
.footer{
  padding:44px 0 34px;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(200,162,74,.14), transparent 55%),
    radial-gradient(900px 520px at 90% 30%, rgba(184,23,34,.12), transparent 60%),
    #0b0b0c;
  border-top:1px solid rgba(200,162,74,.18);
  color: rgba(255,255,255,.78);
}
.footer a{color: rgba(255,255,255,.78)}
.footer a:hover{color: rgba(255,255,255,.92)}

.footerGrid{display:grid; grid-template-columns: 1.3fr .8fr .9fr; gap:20px; align-items:start}
@media (max-width: 980px){.footerGrid{grid-template-columns: 1fr;}}

.footBrand{font-weight:1000; color:#fff}
.fine{font-size:12px; line-height:1.55}

.footNav{display:grid; gap:10px}
.footNav a{display:inline-flex; padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.12); text-decoration:none; font-weight:1000; background:rgba(255,255,255,.04)}
.footNav a:hover{background:rgba(255,255,255,.06); border-color: rgba(200,162,74,.26)}

.footMeta{display:grid; gap:10px}
.footLine{display:flex; gap:10px; align-items:flex-start; color: rgba(255,255,255,.78)}
.footLine .iSvg{color: rgba(200,162,74,.92)}

.footSocial{display:flex; gap:10px; flex-wrap:wrap}
.footSocial a{width:44px; height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; background:rgba(255,255,255,.04)}
.footSocial a:hover{background:rgba(255,255,255,.06); border-color: rgba(200,162,74,.28)}
.footSocial svg{width:20px; height:20px; fill: currentColor}

.footBottom{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.10); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* Responsive */
/* Mobile menu */
.menuToggle{display:none; width:38px; height:38px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text); cursor:pointer}
.menuToggle:hover{background:var(--surface)}
.menuToggle svg{width:18px; height:18px; display:block}

.mobileMenu{display:none}
.mobileMenu.is-open{display:block}
.mobileMenu .mmBackdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:60}
.mobileMenu .mmPanel{position:fixed; left:12px; right:12px; top:calc(54px + 14px); z-index:61; border:1px solid var(--line); background:var(--bg); border-radius:18px; box-shadow: var(--shadow); overflow:hidden; max-height: calc(100vh - (54px + 28px)); overflow:auto}
.mobileMenu .mmLinks{display:grid; padding:12px; gap:10px}
.mobileMenu .mmLinks a{padding:12px 12px; border-radius:14px; border:1px solid var(--line); text-decoration:none; font-weight:1000; background: color-mix(in oklab, var(--bg) 72%, transparent)}
.mobileMenu .mmLinks a:hover{background:var(--surface)}
.mobileMenu .mmRow{display:flex; gap:10px; align-items:center; justify-content:space-between; padding:12px; border-top:1px solid var(--line)}

/* Sticky header feel */
.topbar.is-scrolled{box-shadow: 0 14px 48px rgba(0,0,0,.12)}

@media (max-width: 980px){
  /* iOS/Safari: fixed is more reliable than sticky */
  .topbar{position:fixed; left:0; right:0}
  body{padding-top:56px}

  /* Prevent rare horizontal scroll on mobile */
  html,body{overflow-x:clip}
  .hero, .section, .topbar{overflow-x:clip}

  /* Performance: backdrop-filter can lag on some phones */
  .topbar{backdrop-filter:none; background: color-mix(in oklab, var(--bg) 92%, transparent)}

  .menu{display:none}
  .menuToggle{display:inline-grid; place-items:center}
  .nav{height:auto; padding:10px 0}
  .brandText{font-size:14px}
  .navRight{max-width: 56vw; flex-wrap:wrap; justify-content:flex-end}
  .langSelect{height:34px; padding:0 8px}
  .iconBtn{width:34px;height:34px}

  /* Mobile: mos e detyro hero-n të jetë sa gjithë ekrani, lëre të zgjatet normalisht */
  .hero{
    min-height:auto;
    align-items:flex-start;
    padding:34px 0 24px;
  }
  .headline{font-size:44px}
  .subhead{font-size:16px}

  /* full-page sections on mobile: reduce padding dhe hiq min-height për kompaktësi */
  .section{padding:40px 0 34px; min-height:auto}

  .storyGrid{grid-template-columns: 1fr}
  .cards4{grid-template-columns: 1fr 1fr}
  .grid{grid-template-columns: 1fr}
  .videoGrid{grid-template-columns: 1fr}
  .trust{grid-template-columns: 1fr}
  .reviews{grid-template-columns: 1fr}
  .contactGrid{grid-template-columns: 1fr}

  /* MENU images: larger + better crop on mobile */
  .cardMedia{
    height: 240px;
    background-position: center 35%;
  }
  .cardBody{padding:16px 16px 18px}

  /* Slider & gallery: keep everything brenda ekranit */
  .slider,.reviewSlider{grid-template-columns: 1fr; overflow:hidden}
  .sViewport{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .slide{height:220px}
}

/* Hero: në ekranet deri në 900px, kalon në 1 kolonë të vetme (stack) */
@media (max-width: 900px){
  .hero--split .heroSplit{grid-template-columns: 1fr;}
}

@media (max-width: 600px){
  /* Mobile: mbaj container-in të centëruar dhe jo 100% stretched */
  .container{
    max-width: 540px;
    margin: 0 auto;
    padding: 0 14px;
  }

  /* HERO: një kolonë, pa layout 2-kolësh në mobile */
  .hero{
    display:grid;
    grid-template-columns:1fr !important;
    gap:14px;
  }
  .heroRight,.mediaCard,.heroCarousel{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .heroRight{overflow:hidden;}
  .mediaCard{padding:10px; overflow:hidden;}
  .heroCarousel{display:block; overflow:hidden;}

  .headline{font-size:36px; line-height:1.05}

  /* CTA buttons: mbaji në të njëjtin rresht sa të jetë e mundur */
  .hero-cta{display:flex; gap:12px; flex-wrap:nowrap;}
  .hero-cta .btn{flex:1; min-width:0;}

  /* Info card: mobile layout me fokus te lexueshmëria */
  .info-card{
    display:block;
    padding:14px 14px 12px;
  }
  .infoRow{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
  }
  .infoK{flex:0 0 auto; font-size:11px;}
  .infoV{
    flex:1 1 auto;
    text-align:right;
    font-size:12px;
    white-space:nowrap;      /* mos e ndaj në disa rreshta */
  }

  /* Hero extras (social/video/chef) fshihen në mobile */
  .hero-social{display:none !important;}

  /* Floating contact: mos mbulo përmbajtjen në ekrane shumë të ngushta */
  .fabContact{display:none;}

  /* Header: avoid overflow from the red Kontakt button */
  .topbar .navRight > a.btn{display:none}

  body{overflow-x:hidden;}
}

/* Scrollspy active link */
.menu a.is-active{
  color:var(--text);
  border-color: color-mix(in oklab, var(--primary) 38%, var(--line));
  background: color-mix(in oklab, var(--primary) 14%, var(--bg));
}
.menu a.is-active::after{content:none}

/* Lightbox */
.lightbox{position:fixed; inset:0; display:none; z-index:999}
.lightbox.is-open{display:block}
.lbBackdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.72);
  opacity:0;
  transition: opacity .22s ease;
}
.lbPanel{
  position:relative;
  margin:0;
  width:100vw;
  height:100svh;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:#000;
  box-shadow:none;
  display:block;
  transform: translateY(10px) scale(.985);
  opacity:0;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
}
.lightbox.is-open .lbBackdrop{opacity:1}
.lightbox.is-open .lbPanel{transform: translateY(0) scale(1); opacity:1}

.lbFigure{margin:0; height:100%; position:relative}
#lbImg{width:100%; height:100%; object-fit:contain; background:#000; transform-origin: 50% 50%; touch-action: none}
.lbFigure.is-zoomed #lbImg{cursor: grab}
.lbFigure.is-zoomed #lbImg:active{cursor: grabbing}
.lbCap{display:none}

/* Overlay controls (no side gutters) */
.lbBtn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:#fff;
  font-weight:1000;
  font-size:34px;
  cursor:pointer;
  opacity:.95;
  z-index:2;
}
.lbBtn:hover{background:rgba(255,255,255,.10)}
.lbBtn[data-lb="prev"]{left:14px}
.lbBtn[data-lb="next"]{right:14px}

.lbClose{position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:#fff; font-size:22px; cursor:pointer; z-index:3}
.lbClose:hover{background:rgba(255,255,255,.12)}

/* Mobile tweaks */
@media (max-width: 980px){
  .lbBackdrop{background:#000; opacity:1; transition:none}
  .lbPanel{transform:none; opacity:1}
  .lbBtn{width:52px; height:52px; font-size:34px}
}

/* Floating contact */
.floatContact{position:fixed; right:16px; bottom:16px; z-index:60; text-decoration:none; background:var(--primary); color:var(--primaryText); font-weight:1000; padding:12px 14px; border-radius:999px; box-shadow: 0 18px 50px color-mix(in oklab, var(--primary) 35%, transparent); border:1px solid color-mix(in oklab, var(--primary) 35%, rgba(255,255,255,.16))}
@media (min-width: 981px){
  .floatContact{display:none}
}

/* Gallery images: fade-in when loaded (prevents ugly empty cards on slow loads) */
#galeri img{opacity:0; transform: scale(1.01); transition: opacity .35s ease, transform .6s cubic-bezier(.2,.9,.2,1)}
#galeri img.is-loaded{opacity:1; transform: scale(1)}

/* Parallax (JS applies transform) */
[data-parallax]{will-change: transform}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important}
  .hcSlide{animation:none; opacity:1; position:relative}
  .heroCarousel{display:grid; grid-auto-rows:1fr}
  [data-parallax]{transform:none !important}
}