@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');

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

  /* Dark, mysterious base */
  --bg: #050208;
  --bg2:#090311;
  --surface:#0f0718;
  --surface2:#0b0512;
  --text:#fff8e8;
  --muted:#d7c8ab;
  --line: rgba(255,211,106,.18);

  --plum:#1a051e;
  --plum2:#3a0b45;
  --gold:#ffd36a;
  --gold2:#ffb000;
  --ember:#ff5a2d;

  --shadow: 0 22px 80px rgba(0,0,0,.55);
  --shadowSoft: 0 16px 44px rgba(0,0,0,.32);
  --hair: rgba(255,211,106,.22);
  --radius: 22px;
  --pill: 999px;

  color-scheme: dark;
}

/* Light theme removed */

*{box-sizing:border-box}
html,body{height:100%}

/* Skip-to-content link (accessibility) */
.skip-link{
  position:absolute;
  top:-100%;
  left:12px;
  z-index:200;
  padding:10px 16px;
  border-radius: var(--pill);
  background: var(--gold);
  color: #0a0612;
  font-weight:900;
  font-size:13px;
  letter-spacing:.06em;
  text-decoration:none;
  transition: top .15s ease;
}
.skip-link:focus{top:12px}

/* Scroll progress bar (gold) */
.scrollProgress{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:3px;
  z-index:120;
  pointer-events:none;
}
.scrollProgress > i{
  display:block;
  height:100%;
  width:0;
  background: linear-gradient(90deg,
    rgba(255,211,106,1),
    rgba(255,176,0,1));
  box-shadow: 0 6px 18px rgba(255,176,0,.45);
  border-radius:0 999px 999px 0;
}

body{
  margin:0;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  color: var(--text);
  background:
    radial-gradient(1200px 760px at 18% -10%, rgba(255,176,0,.12), transparent 60%),
    radial-gradient(1100px 720px at 82% 0%, rgba(58,11,69,.42), transparent 62%),
    radial-gradient(900px 620px at 50% 110%, rgba(255,90,45,.08), transparent 62%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  overflow-x:hidden;
  opacity:0;
  transition: opacity 220ms ease;
}

/* Subtle vignette + film grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(1200px 720px at 50% 20%, rgba(0,0,0,.0), rgba(0,0,0,.55)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 1px, transparent 2px, transparent 6px);
  mix-blend-mode: overlay;
  opacity:.55;
}

/* Sunset glow layer (subtle, animated) */
.sunset{
  position:absolute;
  inset:-220px -160px auto -160px;
  height:720px;
  pointer-events:none;
  z-index:0;
}
.sunset::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 320px at 24% 54%, rgba(255,176,0,.22), transparent 62%),
    radial-gradient(760px 420px at 44% 60%, rgba(255,211,106,.10), transparent 66%),
    radial-gradient(820px 520px at 66% 64%, rgba(58,11,69,.40), transparent 70%),
    radial-gradient(980px 560px at 52% 76%, rgba(255,90,45,.10), transparent 72%);
  opacity:.95;
  transform: translateY(0);
  animation: sunsetFloat 12s ease-in-out infinite;
}
@keyframes sunsetFloat{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(10px) }
}

.hero{position:relative}
.heroGrid{position:relative; z-index:1}
body.is-ready{opacity:1}
body.is-leaving{opacity:0}

/* Hero cinematic: controlled overlay behind copy + Ken Burns on right image */
.heroCopy{position:relative; z-index:2}
.heroCopy::before{
  content:"";
  position:absolute;
  inset:-18px -18px -18px -18px;
  background:
    radial-gradient(760px 360px at 0% 30%, rgba(0,0,0,.58), transparent 65%),
    linear-gradient(90deg, rgba(0,0,0,.52), rgba(0,0,0,.12) 60%, rgba(0,0,0,0));
  border-radius: 26px;
  pointer-events:none;
  z-index:-1;
}

/* Scroll hint (minimal) */
.scrollHint{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--gold) 18%, var(--line));
  background: color-mix(in oklab, var(--bg) 64%, transparent);
  color: var(--text);
  padding:10px 14px;
  cursor:pointer;
  box-shadow: var(--shadowSoft);
  text-transform:uppercase;
  letter-spacing:.10em;
  font-weight:900;
  font-size:11px;
}
.scrollHint:hover{border-color: color-mix(in oklab, var(--gold) 26%, var(--line)); transform: translateY(-1px)}
.scrollHint__arrow{display:inline-block; animation: hintBounce 1.4s ease-in-out infinite}
@keyframes hintBounce{0%,100%{transform: translateY(0)}50%{transform: translateY(4px)}}

/* Hero slides: always fill the frame */
.heroSlide,
.heroSlide--next{
  background-size: cover;
  background-position: 50% 30%;
  animation: none;
}

@media (prefers-reduced-motion: reduce){
  .heroSlide, .heroSlide--next{animation:none}
  .scrollHint__arrow{animation:none}
}

/* Scroll reveal (subtle animations) */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity 650ms cubic-bezier(.2,.9,.2,1), transform 650ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible{opacity:1; transform: translateY(0)}
.reveal.reveal--soft{transform: translateY(10px) scale(.995)}

/* Slide-in from left (used for Video section) */
.reveal.reveal--from-left{transform: translateX(-88px) scale(.985); opacity:0}
.reveal.is-visible.reveal--from-left{transform: translateX(0) scale(1); opacity:1}
/* Make the video entrance slower so it’s clearly visible */
.videoCard.reveal.reveal--from-left{transition-duration: 1400ms, 1400ms; transition-timing-function: cubic-bezier(.2,.85,.2,1), cubic-bezier(.2,.85,.2,1)}

/* About page: train-stop entrance from right → center */
.reveal.reveal--train-right{opacity:0; transform: translateX(120px)}
.reveal.is-visible.reveal--train-right{opacity:1; transform:none; transition:none; animation: trainStopIn 1100ms cubic-bezier(.12,1,.22,1) both}
@keyframes trainStopIn{
  0%{ opacity:0; transform: translateX(140px) }
  70%{ opacity:1; transform: translateX(-10px) }
  100%{ opacity:1; transform: translateX(0) }
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .reveal.reveal--from-left{opacity:1; transform:none; transition:none}
  .reveal.reveal--train-right{opacity:1; transform:none; transition:none; animation:none}
  .sunset::before{animation:none}
  .btn,.card{transition:none}
  .btn--cta{animation:none}
  .btn--cta::after{animation:none; opacity:0}
  body.is-ready .heroCard,
  body.is-ready .heroSlide,
  body.is-ready .hero--bg-home::before{animation:none}
}

/* Lehtso animacionet pr gjith prdoruesit (jo vetm prefers-reduced-motion) */
.sunset::before{animation:none}
.heroSlide,.heroSlide--next{animation:none}
.scrollHint__arrow{animation:none}
.mgTrack{animation:none}
.btn--cta{animation:none}
.btn--cta::after{animation:none; opacity:0}

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

a{color:inherit}

/* smooth scroll removed */

/* Today chip + kicker row */
.kickerRow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.todayChip{
  display:inline-flex; align-items:center;
  padding:8px 12px;
  border-radius: var(--pill);
  border:1px solid color-mix(in oklab, var(--gold) 20%, var(--line));
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  color: color-mix(in oklab, var(--gold) 70%, var(--text));
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
}

/* Section quick nav (Home) */
.sectionNav{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.sNav{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 12px;
  border-radius: var(--pill);
  border:1px solid color-mix(in oklab, var(--line) 80%, var(--hair));
  background: color-mix(in oklab, var(--surface) 62%, transparent);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
  color: var(--muted);
}
.sNav:hover{color:var(--text); border-color: color-mix(in oklab, var(--gold) 22%, var(--line))}
.sNav.is-active{color:var(--text); border-color: color-mix(in oklab, var(--gold) 32%, var(--line)); box-shadow: 0 0 0 4px rgba(255,176,0,.08)}

/* Mini gallery slideshow (no click, no scroll) */
.miniGallery{
  overflow:hidden;
  padding:6px 2px 10px;
}
.mgTrack{
  display:flex;
  gap:10px;
  width:max-content;
  will-change: transform;
  animation: mgMarquee 34s linear infinite;
}
.mgFrame{
  flex:0 0 auto;
  width:118px;
  height:78px;
  border-radius:16px;
  border:1px solid color-mix(in oklab, var(--gold) 18%, var(--line));
  overflow:hidden;
  box-shadow: var(--shadowSoft);
  position:relative;
  background: color-mix(in oklab, var(--surface) 60%, transparent);
}
.mgFrame img{width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02); filter:saturate(1.05)}
@keyframes mgMarquee{
  from{ transform: translateX(0) }
  to{ transform: translateX(calc(-50% - 5px)) }
}
@media (prefers-reduced-motion: reduce){
  .mgTrack{animation:none}
}

/* Sticky quick actions bar */
.quickBar{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:95;
  display:none;
  gap:10px;
  border-radius: 18px;
  border:1px solid color-mix(in oklab, var(--gold) 18%, var(--line));
  background: color-mix(in oklab, var(--bg) 76%, #000);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  padding:10px;
}
.qb{flex:1; display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; border-radius:14px; border:1px solid color-mix(in oklab, var(--line) 70%, transparent); padding:12px 10px; background: color-mix(in oklab, var(--surface) 62%, transparent)}
.qb:hover{border-color: color-mix(in oklab, var(--gold) 26%, var(--line))}

/* QuickBar vetm n mobile/tablet pr t mos mbingarkuar desktop-in */
@media (max-width: 980px){
  .quickBar{display:flex; bottom:18px}
}
@media (min-width: 981px){
  .quickBar{display:none}
}
.qbI{width:22px; height:22px; display:inline-grid; place-items:center; font-weight:900; color: color-mix(in oklab, var(--gold) 78%, var(--text))}
.qbT{font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color: var(--text)}
@media (max-width: 980px){
  .quickBar{display:flex; bottom:18px}
  /* avoid overlap with WhatsApp FAB */
  .waFab{bottom:96px}
}

/* Booking modal */
.bModal{position:fixed; inset:0; z-index:120; display:none}
.bModal.is-open{display:block}
.bBackdrop{position:absolute; inset:0; background: rgba(0,0,0,.62)}
.bPanel{position:absolute; left:12px; right:12px; bottom:12px; border-radius:18px; border:1px solid var(--line); background: color-mix(in oklab, var(--bg) 82%, #000); box-shadow: var(--shadow); padding:14px; max-width: 720px; margin: 0 auto}
.bHead{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px}
.bTitle{font-weight:900; letter-spacing:.06em; text-transform:uppercase}
.bClose{border:1px solid var(--line); background:transparent; color:var(--text); border-radius:999px; padding:8px 12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; cursor:pointer}
.bClose:hover{background: color-mix(in oklab, var(--surface) 60%, transparent)}
.bGrid{display:grid; grid-template-columns:1fr; gap:10px}
.bOpt{display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:16px; border:1px solid color-mix(in oklab, var(--line) 80%, transparent); background: color-mix(in oklab, var(--surface) 62%, transparent); text-decoration:none}
.bOpt:hover{border-color: color-mix(in oklab, var(--gold) 26%, var(--line))}
.bOpt b{font-size:14px}
.bOpt span{font-size:12px; color:var(--muted); font-weight:800}
.bNote{margin-top:10px; font-size:12px; color:var(--muted)}

/* Card spotlight (desktop only)  aktivizuar pr t ulur glow vizual */
@media (hover:hover) and (pointer:fine){
  .card{transform-style: flat}
  .card::after{content:none}
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(18px) saturate(1.25);
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 78%, transparent), color-mix(in oklab, var(--bg) 56%, transparent));
  border-bottom: 1px solid color-mix(in oklab, var(--line) 75%, transparent);
}
.topbar.is-scrolled{box-shadow: 0 20px 70px rgba(0,0,0,.35)}
.nav{height:62px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo{
  width:44px;height:44px;border-radius:16px; overflow:hidden;
  border:1px solid color-mix(in oklab, var(--gold) 38%, var(--line));
  background:
    radial-gradient(70px 70px at 30% 20%, rgba(255,211,106,.22), transparent 55%),
    radial-gradient(90px 90px at 70% 80%, rgba(255,90,45,.10), transparent 60%),
    linear-gradient(135deg, rgba(58,11,69,.55), rgba(0,0,0,.28));
  box-shadow: 0 18px 52px rgba(0,0,0,.45);
}
.logo img{width:100%;height:100%;object-fit:contain;display:block}
.brandText{display:flex; flex-direction:column; line-height:1.05}
.brandName{font-weight:900; letter-spacing:-.01em}
.brandTag{font-size:12px; color:var(--muted); font-weight:800; letter-spacing:.08em; text-transform:uppercase}

.menu{display:flex; gap:10px; align-items:center}
.menu a{
  font-size:12px;
  color: var(--muted);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:9px 11px;
  border-radius: var(--pill);
  border:1px solid transparent;
}
.menu a:hover{
  color: var(--text);
  border-color: color-mix(in oklab, var(--gold) 30%, var(--line));
  background: color-mix(in oklab, var(--surface) 70%, transparent);
}

.navRight{display:flex; align-items:center; gap:10px}

/* Language selector */
.langSelect{
  height:42px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  color: var(--text);
  font-weight: 900;
  letter-spacing: .06em;
  padding: 0 12px;
}
.langSelect:focus{outline:none; border-color: color-mix(in oklab, var(--gold) 28%, var(--line)); box-shadow: 0 0 0 4px rgba(255,176,0,.08)}

.menuToggle{display:none; width:42px;height:42px; border-radius:14px; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer}
.menuToggle:hover{background: color-mix(in oklab, var(--surface) 70%, transparent)}
.menuToggle svg{width:18px;height:18px; display:block}

/* 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:13px; letter-spacing:.08em; text-transform:uppercase; transition: transform .2s cubic-bezier(.2,.9,.2,1), filter .2s ease, box-shadow .2s ease, background .2s ease}

/* Theme toggle removed */

.btn:hover{transform: translateY(-2px); filter:saturate(1.05)}
.btn:active{transform: translateY(0)}
.btn--sm{padding:9px 14px; font-size:13px}
.btn--ghost{background: transparent; border-color: color-mix(in oklab, var(--line) 80%, var(--hair)); color: var(--text)}
.btn--ghost:hover{background: color-mix(in oklab, var(--surface) 62%, transparent); border-color: color-mix(in oklab, var(--gold) 22%, var(--line))}

/* Premium gold button (less "blob", more luxury) */
.btn--gold{
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(255,211,106,.16), rgba(255,176,0,.08));
  color: color-mix(in oklab, var(--gold) 82%, #fff);
  border-color: color-mix(in oklab, var(--gold) 35%, var(--line));
  box-shadow: 0 16px 34px rgba(255,176,0,.14);
}
.btn--gold:hover{
  background: linear-gradient(135deg, rgba(255,211,106,.22), rgba(255,176,0,.10));
  box-shadow: 0 18px 40px rgba(255,176,0,.18);
}

/* CTA effects (opt-in) */
.btn--cta{
  box-shadow:
    0 16px 34px rgba(255,176,0,.14),
    0 0 26px rgba(255,176,0,.18);
  animation: ctaPulse 2.8s ease-in-out infinite;
}
.btn--cta::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-70%;
  width:55%;
  height:200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: rotate(20deg);
  animation: ctaShine 3.6s ease-in-out infinite;
  pointer-events:none;
}
.btn--cta:hover{ animation: none; }
.btn--cta:hover::after{ animation: none; opacity:0; }

@keyframes ctaPulse{
  0%,100%{ box-shadow: 0 16px 34px rgba(255,176,0,.14), 0 0 20px rgba(255,176,0,.14); }
  50%{ box-shadow: 0 18px 44px rgba(255,176,0,.18), 0 0 34px rgba(255,176,0,.22); }
}
@keyframes ctaShine{
  0%,60%{ left:-70%; opacity:0; }
  70%{ opacity:1; }
  100%{ left:140%; opacity:0; }
}

/* Mobile menu */
.mobileMenu{display:none}
.mobileMenu.is-open{display:block}
.mmBackdrop{position:fixed; inset:0; background: rgba(0,0,0,.62); z-index:60}
.mmPanel{position:fixed; left:12px; right:12px; top:calc(62px + 12px); z-index:61; border:1px solid var(--line); background: color-mix(in oklab, var(--bg) 80%, #000); border-radius:18px; box-shadow: var(--shadow); overflow:hidden}
.mmLinks{display:grid; padding:12px; gap:10px}
.mmLinks a{padding:12px; border-radius:14px; border:1px solid var(--line); text-decoration:none; font-weight:900; background: color-mix(in oklab, var(--surface) 70%, transparent)}
.mmLinks a:hover{border-color: color-mix(in oklab, var(--gold) 30%, var(--line))}
.mmRow{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px; border-top:1px solid var(--line)}

/* Hero */
.hero{
  padding:112px 0 60px;
  min-height: 84vh;
  display:flex;
  align-items:center;
}
.hero--bg-home{
  min-height: 100vh;
}
.heroGrid{display:grid; grid-template-columns: .88fr 1.12fr; gap:20px; align-items:center}

/* Home hero: let the right visual block breathe (wider than standard container) */
.hero--bg-home .container{max-width:1420px}
.hero--bg-home .heroCard{margin-right:-22px}

/* Home hero background image */
.hero--bg-home{ position:relative; overflow:hidden; }
.hero--bg-home::before{
  content:"";
  position:absolute;
  inset:0;
  /* subtle parallax via CSS var --heroParY (set from JS) */
  background: url("img/bg-cfare-na-ben-ndryshe.jpg") center calc(70% + var(--heroParY, 0px))/cover no-repeat;
  filter: contrast(1.04) saturate(1.08);
  transform: scale(1.04) translateY(-10px);
  opacity: .0;
  z-index:0;
}
body.is-ready .hero--bg-home::before{
  animation: heroBgIn 900ms cubic-bezier(.2,.9,.2,1) 80ms both;
}
@keyframes heroBgIn{
  from{ transform: scale(1.06) translateY(-18px); opacity:0; }
  to{ transform: scale(1.04) translateY(-10px); opacity:1; }
}
.hero--bg-home::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(255,176,0,.22), transparent 60%),
    radial-gradient(980px 620px at 80% 70%, rgba(58,11,69,.52), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.74));
  pointer-events:none;
  z-index:0;
}
.hero--bg-home .sunset{ z-index:1; }
.hero--bg-home .heroGrid{ position:relative; z-index:2; }
.kicker{display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius: var(--pill); border:1px solid color-mix(in oklab, var(--gold) 26%, var(--line)); background: color-mix(in oklab, var(--surface) 70%, transparent); font-family: var(--calligraphy); font-weight:700; font-size:14px; color: color-mix(in oklab, var(--gold) 78%, var(--text))}
.kickerDot{width:8px;height:8px;border-radius:99px; background: var(--gold); box-shadow: 0 0 0 6px rgba(255,176,0,.08)}

.h1{
  font-family: var(--serif);
  font-size: clamp(34px, 4.8vw, 64px);
  line-height:1.08;
  letter-spacing:-.003em;
  margin:16px 0 0;
  white-space: normal;
  text-shadow: 0 26px 90px rgba(0,0,0,.60);
}

/* Titujt e hero-ve pa foto n t djatht (p.sh. Rreth Nesh): mbaj max-width q t mos dalin jasht */
.hero:not(.hero--bg-home) .h1{
  max-width: 22ch;
  margin-left:auto;
  margin-right:auto;
}
.lead{margin:12px 0 0; color: color-mix(in oklab, var(--muted) 82%, var(--text)); font-size:15.5px; line-height:1.8; max-width:58ch}

.heroActions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}

.heroCard{
  border:1px solid color-mix(in oklab, var(--gold) 22%, var(--line));
  border-radius: var(--radius);
  background:
    radial-gradient(720px 360px at 20% 0%, rgba(255,176,0,.10), transparent 60%),
    radial-gradient(720px 360px at 90% 80%, rgba(75,17,80,.28), transparent 62%),
    linear-gradient(135deg, rgba(17,10,26,.70), rgba(10,6,18,.55));
  padding:8px;
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
  align-self: stretch;
  width:100%;
}
body.is-ready .heroCard{
  animation: heroCardIn 820ms cubic-bezier(.2,.9,.2,1) 140ms both;
}
@keyframes heroCardIn{
  from{ transform: translateY(14px) scale(.99); opacity: .0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}
.heroMedia{
  /* Hero image: big but should fit the first screen */
  height: clamp(460px, 64vh, 720px);
  min-height: 52vh;
  max-height: 72vh;
  border-radius:22px;
  border:1px solid color-mix(in oklab, var(--gold) 16%, var(--line));
  background: url('img/hero/hero-04.jpeg') center center/cover no-repeat;
  overflow:hidden;
  position:relative;
}
.heroSlide,
.heroSlide--next{
  position:absolute; inset:0;
  background: center/cover no-repeat;
  transform: scale(1.03);
  transition: opacity 700ms ease, transform 1200ms ease;
  opacity: 1;
  filter: contrast(1.05) saturate(1.05);
}
.heroSlide--next{ pointer-events:none; }

.heroSlideImg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 30%;
  display:block;
  opacity:0;
  transform:scale(1.03);
  transition: opacity 700ms ease, transform 1200ms ease;
  filter: contrast(1.05) saturate(1.05);
}
.heroSlideImg.is-active{opacity:1; transform:scale(1.03);}
/* gentle "slide down" on first load */
body.is-ready .heroSlide{
  animation: heroImgDrop 920ms cubic-bezier(.2,.9,.2,1) 120ms both;
}
@keyframes heroImgDrop{
  from{ transform: translateY(-14px) scale(1.07); filter: contrast(1.02) saturate(1.02); }
  to{ transform: translateY(0) scale(1.03); filter: contrast(1.05) saturate(1.05); }
}

/* About hero image (logo/mark) */
.heroMedia--logo{
  background:
    radial-gradient(520px 320px at 18% 18%, rgba(255,176,0,.20), transparent 62%),
    radial-gradient(820px 520px at 66% 64%, rgba(58,11,69,.52), transparent 70%),
    linear-gradient(135deg, rgba(17,10,26,.78), rgba(10,6,18,.62));
}
.heroMedia--logo .heroOverlay{
  /* lighter overlay so the logo is visible */
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.38));
}

.rrethHeroImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  object-position: center;
  padding: 28px;
  display:block;
  transform: scale(.98);
  filter:
    drop-shadow(0 22px 70px rgba(0,0,0,.65))
    contrast(1.06)
    saturate(1.08);
}
.heroOverlay{
  position:absolute; inset:-1px;
  background:
    radial-gradient(520px 320px at 18% 18%, rgba(255,176,0,.10), transparent 64%),
    radial-gradient(720px 420px at 70% 85%, rgba(58,11,69,.12), transparent 74%);
  pointer-events:none;
}
.heroMedia::after{
  content:"";
  position:absolute; inset:-1px;
  background: conic-gradient(from 190deg, rgba(255,211,106,.0), rgba(255,211,106,.06), rgba(58,11,69,.0), rgba(255,211,106,.0));
  opacity:.18;
  mix-blend-mode: overlay;
  pointer-events:none;
}
.heroBadge{
  position:absolute;
  left:22px;
  bottom:22px;
  padding:16px 20px;
  border-radius: 999px;
  border:1px solid color-mix(in oklab, var(--gold) 34%, var(--line));
  background: color-mix(in oklab, var(--bg) 66%, transparent);
  backdrop-filter: blur(8px) saturate(1.2);
  font-family: var(--calligraphy);
  color: color-mix(in oklab, var(--gold) 90%, var(--text));
  font-size:28px;
  line-height:1;
  letter-spacing:.012em;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
}

/* Rreth / herot pa foto n t djatht: tekst m i qendruar dhe m i lexueshm */
.hero:not(.hero--bg-home) .container{text-align:center; max-width:900px}
.hero:not(.hero--bg-home) .kicker{justify-content:center}
.hero:not(.hero--bg-home) .h1{margin-top:18px}
.hero:not(.hero--bg-home) .lead{margin-top:14px; font-size:16px; line-height:1.9}

.stats{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px}
.stat{
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  border-radius:18px;
  padding:12px;
}
.stat b{display:block; font-size:14px}
.stat span{display:block; color: var(--muted); font-weight:800; font-size:12px; margin-top:4px}

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

.section{padding:66px 0}
.section--alt{background: color-mix(in oklab, var(--surface2) 72%, transparent); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* Signature divider (elegant, minimal) */
.signature-divider{position:relative}
.signature-divider::before{
  content:"";
  position:absolute;
  left:50%;
  top:-16px;
  width:min(220px, 38vw);
  height:1px;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  background:linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--gold) 45%, var(--line)) 50%, transparent 100%);
  opacity:.75;
  transition:transform .75s cubic-bezier(.2,.9,.2,1), opacity .25s ease;
  pointer-events:none;
}
.signature-divider::after{
  content:"";
  position:absolute;
  left:50%;
  top:-19px;
  width:7px;
  height:7px;
  transform:translateX(-50%) rotate(45deg) scale(0);
  border:1px solid color-mix(in oklab, var(--gold) 45%, var(--line));
  background:color-mix(in oklab, var(--bg) 80%, transparent);
  opacity:0;
  transition:transform .35s ease .55s, opacity .35s ease .55s;
  pointer-events:none;
}
.signature-divider.divider-visible::before{transform:translateX(-50%) scaleX(1)}
.signature-divider.divider-visible::after{transform:translateX(-50%) rotate(45deg) scale(1); opacity:.85}

/* Section with photo background (About: “far na bn ndryshe”) */
.section--bg-ndryshe{
  position: relative;
  background: url("img/bg-cfare-na-ben-ndryshe.jpg") center/cover no-repeat;
}
.section--bg-ndryshe.section--alt{ background: url("img/bg-cfare-na-ben-ndryshe.jpg") center/cover no-repeat; }
.section--bg-ndryshe::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,176,0,.18), transparent 62%),
    radial-gradient(900px 560px at 80% 80%, rgba(58,11,69,.45), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72));
  pointer-events:none;
}
.section--bg-ndryshe > .container{ position:relative; z-index:1; }
.section--bg-ndryshe .card,
.section--bg-ndryshe .panel,
.section--bg-ndryshe .cCard,
.section--bg-ndryshe .formCard{
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(6px);
}

/* Events: page background */
.page--bg-evente{
  position: relative;
  background: url("img/bg/bg-evente.jpg") center/cover no-repeat;
}
.page--bg-evente::before{
  content:"";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(255,176,0,.14), transparent 60%),
    radial-gradient(980px 620px at 80% 70%, rgba(58,11,69,.55), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.82));
  pointer-events:none;
}
.page--bg-evente > *{ position:relative; z-index:1; }

/* Events: Paketat background */
.section--bg-paketat{
  position: relative;
  background: url("img/bg/bg-evente.jpg") center/cover no-repeat;
}
.section--bg-paketat::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(255,176,0,.16), transparent 60%),
    radial-gradient(980px 620px at 80% 70%, rgba(58,11,69,.52), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.78));
  pointer-events:none;
}
.section--bg-paketat > .container{ position:relative; z-index:1; }

/* Kontakt background */
.section--bg-kontakt{
  position: relative;
  background: url("img/AB.jpg") center/cover no-repeat;
}
.section--bg-kontakt::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,176,0,.12), transparent 62%),
    radial-gradient(900px 560px at 80% 80%, rgba(58,11,69,.48), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.78));
  pointer-events:none;
}
.section--bg-kontakt > .container{ position:relative; z-index:1; }
.section--bg-kontakt .card,
.section--bg-kontakt .panel,
.section--bg-kontakt .cCard,
.section--bg-kontakt .formCard{
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(6px);
}

/* Mobile polish for Kontakt background */
@media (max-width: 980px){
  .section--bg-kontakt{
    /* shift focus slightly down so it looks better on tall screens */
    background-position: center 68%;
  }
  .section--bg-kontakt::before{
    /* a touch less dark on mobile so it doesn't look "muddy" */
    background:
      radial-gradient(760px 460px at 20% 10%, rgba(255,176,0,.12), transparent 62%),
      radial-gradient(820px 520px at 80% 80%, rgba(58,11,69,.44), transparent 70%),
      linear-gradient(180deg, rgba(0,0,0,.56), rgba(0,0,0,.74));
  }
  .section--bg-kontakt .card,
  .section--bg-kontakt .panel,
  .section--bg-kontakt .cCard,
  .section--bg-kontakt .formCard{
    /* slightly more opaque so text stays super readable on mobile */
    background: color-mix(in oklab, var(--bg) 86%, transparent);
  }
}

.sectionHead{display:flex; justify-content:space-between; gap:16px; align-items:flex-end; margin-bottom:16px}
.sectionHead h2{margin:0; font-family: var(--calligraphy); font-size:42px; letter-spacing:-.003em}
.sectionHead p{margin:0; color: var(--muted); max-width:72ch; line-height:1.7}

@media (min-width: 1280px){
  .section{padding:60px 0}
}

@media (max-width: 980px){
  .sectionHead h2{font-size:38px}
}
@media (max-width: 600px){
  .sectionHead h2{font-size:32px}
  .sectionHead p{font-size:13px; line-height:1.6}
  .card p{font-size:13px; line-height:1.7}
}

.grid3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.card{
  position:relative;
  border:1px solid color-mix(in oklab, var(--gold) 18%, var(--line));
  background:
    radial-gradient(520px 220px at 0% 0%, rgba(255,176,0,.07), transparent 60%),
    radial-gradient(640px 260px at 100% 0%, rgba(58,11,69,.22), transparent 62%),
    linear-gradient(135deg, rgba(15,7,24,.64), rgba(6,3,12,.46));
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadowSoft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* glow ring (desktop) */
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: none; /* hiq glow gradient-in */
  opacity:0;
  transition: opacity .18s ease;
}
.card:hover{
  border-color: color-mix(in oklab, var(--gold) 26%, var(--line));
  transform: translateY(-2px);
  box-shadow: var(--shadowSoft);
}
.card:hover::before{ opacity:0; }
.card h3{margin:0 0 6px; font-family: var(--calligraphy); letter-spacing:-.002em; font-size:24px}
.card p{margin:0; color: color-mix(in oklab, var(--muted) 86%, var(--text)); line-height:1.85}

.split{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.panel{
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 68%, transparent);
  border-radius: var(--radius);
  padding:16px;
}
.panel h3{margin:0 0 8px}
.list{margin:0; padding-left:18px; color: var(--muted); line-height:1.7}

/* About: Kantina */
.kantinaGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:start;
}
.kantinaText p{text-align:left; margin:0 auto; max-width:64ch;}
.kantinaMedia{display:flex; justify-content:center}
.kantinaImg{
  width:100%;
  max-width: 340px;
  height:auto;
  display:block;
  border-radius: 18px;
  border:1px solid color-mix(in oklab, var(--gold) 18%, var(--line));
  box-shadow: var(--shadowSoft);
}
@media (max-width: 980px){
  .kantinaGrid{grid-template-columns:1fr}
  .kantinaText p{text-align:left; max-width:100%;}
  .kantinaMedia{justify-content:center; margin-top:10px}
  .kantinaImg{max-width: 260px}
}

/* Video */
.section--bg-video{
  position: relative;
  background: transparent;
}
.section--bg-video::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(8,6,12,.30), rgba(8,6,12,.42));
  pointer-events:none;
}
.section--bg-video > .container{ position:relative; z-index:1; }

.videoCard{
  max-width: 760px;
  margin: 0 auto;
  border:1px solid color-mix(in oklab, var(--gold) 18%, var(--line));
  border-radius: var(--radius);
  background:
    radial-gradient(520px 220px at 0% 0%, rgba(255,176,0,.06), transparent 60%),
    radial-gradient(680px 260px at 100% 0%, rgba(58,11,69,.18), transparent 62%),
    linear-gradient(135deg, rgba(15,7,24,.60), rgba(6,3,12,.44));
  box-shadow: var(--shadowSoft);
  padding:12px;
}
.videoFrame{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(8,6,14,.66), rgba(8,6,14,.66)),
    url('img/galeri/_MG_0806.jpg') center/cover no-repeat;
}
.videoFrame::before{content:""; display:block; padding-top:48%}
.videoFrame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent}

/* Mobile fit */
@media (max-width: 980px){
  .videoCard{max-width: 100%; padding:10px}
  .videoFrame{border-radius:16px}
  /* a touch taller on narrow screens so it doesn't feel "flat" */
  .videoFrame::before{padding-top:54%}
  .mgFrame{width:98px; height:66px}
}

/* Map */
.mapWrap{margin-top:14px}
.mapCard{
  border:1px solid color-mix(in oklab, var(--gold) 22%, var(--line));
  border-radius: var(--radius);
  overflow:hidden;
  background: color-mix(in oklab, var(--surface) 75%, transparent);
  box-shadow: var(--shadow);
}
.mapCard iframe{display:block; width:100%; height:360px; border:0}

/* Contact layout */
.contactGrid{display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start}
.contactStack{display:grid; gap:12px}
.contactTitle{margin:0; font-family: var(--calligraphy); font-size:56px; letter-spacing:-.003em}
.contactLead{margin:8px 0 0; color: color-mix(in oklab, var(--muted) 84%, var(--text)); line-height:1.85}

/* Form */
.formCard{
  border:1px solid color-mix(in oklab, var(--gold) 18%, var(--line));
  background:
    radial-gradient(520px 220px at 0% 0%, rgba(255,176,0,.06), transparent 60%),
    radial-gradient(680px 260px at 100% 0%, rgba(58,11,69,.20), transparent 62%),
    linear-gradient(135deg, rgba(15,7,24,.62), rgba(6,3,12,.44));
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadowSoft);
}
.formGrid{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.field{display:grid; gap:8px}
.field span{font-weight:900; letter-spacing:.10em; text-transform:uppercase; font-size:12px; color: color-mix(in oklab, var(--muted) 78%, var(--text))}
.field input,.field textarea{
  width:100%;
  border-radius:16px;
  border:1px solid color-mix(in oklab, var(--line) 75%, transparent);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  color: var(--text);
  padding:12px 12px;
  outline:none;
}
.field textarea{resize: vertical; min-height: 120px}
.field input:focus,.field textarea:focus{border-color: color-mix(in oklab, var(--gold) 28%, var(--line)); box-shadow: 0 0 0 4px rgba(255,176,0,.08)}
.formActions{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}

/* Small contact cards */
.cCard{border:1px solid color-mix(in oklab, var(--gold) 18%, var(--line)); border-radius: var(--radius); background: color-mix(in oklab, var(--bg) 68%, transparent); padding:14px; box-shadow: var(--shadowSoft)}
.cCard h3{margin:0 0 8px; font-family: var(--calligraphy); font-size:26px}
.cCard .big{font-size:22px; font-weight:900; color: color-mix(in oklab, var(--gold) 80%, var(--text)); text-decoration:none}
.cCard .sub{color: var(--muted); line-height:1.7}

@media (max-width: 980px){
  .mapCard iframe{height:320px}
  .formGrid{grid-template-columns: 1fr}
  .contactGrid{grid-template-columns:1fr}
  .contactTitle{font-size:46px}
}

@media (max-width: 480px){
  .mapCard iframe{height:260px}
}

.footer{padding:26px 0 44px; border-top:1px solid var(--line); color: var(--muted)}
.footerInner{display:flex; justify-content:space-between; gap:18px; align-items:center; flex-wrap:wrap}
.footBrand{font-weight:900; color: var(--text)}
.fine{font-size:12px; line-height:1.5}
.footLinks{display:flex; gap:12px; flex-wrap:wrap}
.footLinks a{color: var(--muted); text-decoration:none; font-size:12px; font-weight:900}
.footLinks a:hover{color: var(--text)}

/* Lightbox */
.lightbox{display:none}
.lightbox.is-open{display:block}
.lbBackdrop{position:fixed; inset:0; background: rgba(0,0,0,.72); z-index:80}
.lbPanel{
  position:fixed;
  left:0;
  top:0;
  transform:none;
  z-index:81;
  width:100vw;
  height:100vh;
  border-radius:0;
  border:0;
  background:#000;
  box-shadow:none;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lbPanel img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:0;
}
@media (max-width: 980px){
  .lbPanel{ width:100vw; height:100vh; }
}
.lbClose{align-self:flex-end; border:1px solid var(--line); background:transparent; color:var(--text); border-radius:999px; padding:8px 12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; cursor:pointer}
.lbClose:hover{background: color-mix(in oklab, var(--surface) 60%, transparent)}

/* Lightbox arrows */
.lbNav{
  position:fixed;
  top:50%;
  transform: translateY(-50%);
  z-index:82;
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--gold) 24%, var(--line));
  background: color-mix(in oklab, var(--bg) 68%, transparent);
  color: color-mix(in oklab, var(--gold) 75%, var(--text));
  font-size:34px;
  line-height:1;
  cursor:pointer;
  box-shadow: var(--shadowSoft);
}
.lbNav:hover{background: color-mix(in oklab, var(--surface) 62%, transparent)}
.lbNav--prev{left:18px}
.lbNav--next{right:18px}
@media (max-width: 980px){
  .lbNav--prev{left:10px}
  .lbNav--next{right:10px}
}

/* WhatsApp FAB */
.waFab{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:90;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--gold) 30%, var(--line));
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  box-shadow: var(--shadowSoft);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: color-mix(in oklab, var(--gold) 80%, var(--text));
}
.waFab:hover{transform: translateY(-2px)}

@media (max-width: 980px){
  .topbar{position:fixed; left:0; right:0}
  /* space for fixed header + fixed quick actions bar */
  body{padding-top:66px; padding-bottom: 120px}
  .footer{padding-bottom: 140px}

  .menu{display:none}
  .menuToggle{display:inline-grid; place-items:center}

  /* Header brand: make the full name fit on mobile */
  .nav{gap:10px}
  .brandText{line-height:1.05; max-width: 54vw}
  .brandName{font-size:13px; white-space:normal}
  .brandTag{display:none}
  .langSelect{padding:0 8px; min-width:48px}
  .navRight{gap:8px}
  .btn.btn--sm{padding:9px 12px}

  .hero{padding:80px 0 38px; min-height:auto}
  .hero--bg-home{min-height:100svh}
  .heroGrid{grid-template-columns:1fr}
  .h1{font-size:48px; white-space:normal}
  .lead{font-size:15px}
  .heroMedia{height:56vh; min-height:360px; max-height:66vh}
}

@media (max-width: 600px){
  .hero{padding:70px 0 32px; min-height:auto}
  .hero--bg-home{min-height:100svh}
  .heroMedia{height:50vh; min-height:280px; max-height:60vh}
  .heroSlide{transition:none; transform:none}
  .hero--bg-home .heroCard{margin-right:0}
  .heroBadge{font-size:22px; padding:12px 16px; left:14px; bottom:14px}
  .grid3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}

@media (max-width: 420px){
  .brandText{max-width: 52vw}
  .brandName{font-size:12.5px}
  .btn.btn--sm{display:none} /* hide Rezervo in header on very small screens */

  /* Hero photo: avoid oversized height on small phones */
  .heroMedia{height:52vh; min-height:320px}
}