:root{
  --bg:#0b0b0b; --panel:#111; --text:#f5f5f5; --muted:#c9c9c9;
  --gold:#D4AF37; --gold-2:#E0C469; --orange:#D97706; --accent:#f59e0b;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35); --max:1100px;
  --nav-h:72px;
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
     font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
.container{max-width:var(--max);margin:0 auto;padding:0 22px}
h1,h2,h3{margin:0 0 12px;line-height:1.15}
h2{margin-top:6px;margin-bottom:12px}
p{margin:0 0 12px;color:var(--muted)}
ul{margin:0;padding-left:20px}
li{margin:6px 0}
.gold{color:var(--gold)}

/* Sections + iOS-safe anchor offset */
section{
  padding:72px 0 88px; /* more breathing at bottom */
  scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 20px);
}
section + section{
  border-top:1px solid rgba(212,175,55,.14);
  padding-top:112px;   /* extra air between sections */
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:rgba(11,11,11,.72);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(212,175,55,.16);
  padding-top:env(safe-area-inset-top, 0px);
}
.nav-inner{
  position:relative; /* lets dropdown anchor within */
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* Brand */
.brand,.brand:link,.brand:visited{
  display:inline-flex; gap:10px; align-items:center; color:var(--text);
  text-decoration:none; font-weight:700; letter-spacing:.3px;
  max-width:56vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.leaf{width:22px;height:22px;border-radius:6px;background:conic-gradient(from 210deg, var(--gold), var(--gold-2), var(--gold));box-shadow:0 0 0 1px rgba(212,175,55,.25)}

/* Menu button */
.menu-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border:1px solid var(--gold); border-radius:12px;
  background:linear-gradient(180deg, rgba(212,175,55,.14), rgba(212,175,55,.04));
  color:#ffe9a8; font-weight:700; letter-spacing:.2px; cursor:pointer;
  box-shadow:var(--shadow); transition:background .2s, box-shadow .2s, color .2s, transform .08s ease;
}
.menu-btn:hover{ background:linear-gradient(180deg, var(--gold), #b99426); color:#111; box-shadow:0 8px 22px rgba(212,175,55,.22) }
.menu-btn:active{ transform:scale(.98) }
.menu-btn:focus-visible{ outline:2px solid rgba(212,175,55,.6); outline-offset:2px }
.menu-btn .chev{ width:16px; height:16px }

/* Dropdown panel (currently centered-ish; bump left % if needed) */
.menu-panel {
  position: absolute;
  top: 100%;              /* 👈 drops directly below button */
  right: 0;               /* 👈 aligns right edge with button */
  margin-top: 6px;        /* little gap */
  background: linear-gradient(180deg,#141414,#0f0f0f);
  border: 1px solid rgba(212,175,55,.28);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  width: min(260px, 86vw);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .16s ease, transform .16s ease;
}
.menu-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.menu-item{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px; border-radius:10px; color:#ffe9a8; text-decoration:none;
}
.menu-item:hover{ background:rgba(212,175,55,.12); color:#fff }
.menu-item[aria-current="page"]{ background:linear-gradient(180deg, var(--gold), #b99426); color:#111 }

/* ---------- HERO ---------- */
.hero{
  border-bottom:1px solid rgba(212,175,55,.16);
  background:
    radial-gradient(60rem 60rem at -10% -20%, rgba(212,175,55,.14), transparent 50%),
    radial-gradient(50rem 50rem at 110% -10%, rgba(217,119,6,.18), transparent 55%),
    linear-gradient(180deg, #0b0b0b 0%, #111 100%);
}
.hero .container{
  display:grid; gap:12px;
  padding:56px 22px 56px; /* pulled up tight to nav; even bottom */
}
.kicker{color:var(--gold);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;margin-top:2px}
.hero h1{font-size:clamp(32px,5vw,56px)}
.hero p{font-size:1.08rem;max-width:800px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.btn{padding:12px 18px;border-radius:12px;font-weight:700;letter-spacing:.2px;cursor:pointer;border:0;transition:.22s;box-shadow:var(--shadow)}
.btn-primary{background:linear-gradient(180deg, var(--gold), #b99426);color:#111}
.btn-primary:hover{filter:saturate(105%) brightness(1.03)}
.btn-ghost{background:rgba(217,119,6,.14);color:#ffdca8;border:1px solid rgba(217,119,6,.34)}
.btn-ghost:hover{background:rgba(217,119,6,.22)}

/* ---------- GRID & CARDS ---------- */
.grid{display:grid; gap:28px} /* more space between cards */
.grid.onecol{grid-template-columns:1fr}
@media(min-width:860px){ .grid{grid-template-columns:repeat(3,1fr)} }

.card,.card:link,.card:visited{
  display:block; color:inherit; text-decoration:none;
  background:linear-gradient(180deg,#141414,#0f0f0f);
  border:1.5px solid rgba(212,175,55,.20);
  border-radius:var(--radius);
  padding:26px;                     /* a hair more interior air */
  box-shadow:var(--shadow);
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{ transform:translateY(-2px); border-color:rgba(212,175,55,.45); box-shadow:0 16px 40px rgba(0,0,0,.45) }
.card:before{content:"";position:absolute;inset:-1px -1px auto auto;width:120px;height:120px;
  background:radial-gradient(70px 70px at 70% 30%, rgba(212,175,55,.35), transparent 60%);
  filter:blur(20px);opacity:.5;z-index:-1}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(212,175,55,.14);border:1px solid rgba(212,175,55,.28);color:#ffe9a8;font-size:.8rem;margin-bottom:8px}
.price{font-size:1.7rem;color:var(--gold);font-weight:800;margin:6px 0 12px}
.per{font-size:.9rem;color:#ffe9a8}

/* ---------- PROCESS / FOOTER / REVEAL ---------- */
.step{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;
      border:1.5px solid rgba(212,175,55,.18);border-radius:14px;background:linear-gradient(180deg,#121212,#0f0f0f)}
.num{min-width:34px;height:34px;border-radius:8px;background:linear-gradient(180deg, var(--orange), #a95f04);display:grid;place-items:center;font-weight:800;color:#111}
.about{background:linear-gradient(180deg,#101010,#0b0b0b)}
.note{margin-top:8px;color:#ffdca8}
footer{
  border-top:1px solid rgba(212,175,55,.18);
  background:#0a0a0a; padding:26px 0;
  color:#cfcfcf; text-align:center; /* centered copyright */
}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}

/* ---------- Mobile tweaks ---------- */
@media (max-width:540px){
  :root{ --nav-h:64px; }
  .brand span{ font-size:16px } .leaf{ width:18px; height:18px; border-radius:5px }
  .hero .container{ padding:48px 16px 52px; } /* tighten hero on small */
  section{ padding:64px 0 76px; }
  .grid{ grid-template-columns:1fr; gap:22px; }
}

/* Stop iOS auto-zoom */
@supports (-webkit-touch-callout:none){
  html{ -webkit-text-size-adjust:100%; }
}

/* ===== spacing polish (overrides) ===== */
:root{
  --hero-top: 40px;          /* how close hero sits under nav */
  --hero-bottom: 52px;       /* room under hero */
  --section-top: 64px;       /* section top padding */
  --section-bottom: 96px;    /* section bottom padding */
  --cards-gap: 32px;         /* space between plan cards */
}

.hero .container{
  padding: var(--hero-top) 22px var(--hero-bottom) !important;
  gap: 10px !important;
}
.hero .kicker{ margin-top: 0 !important; }
.hero h1{ margin-top: 2px !important; }

section{
  padding: var(--section-top) 0 var(--section-bottom) !important;
}

/* first section after hero gets a touch more separation */
header.hero + section{
  padding-top: calc(var(--section-top) + 8px) !important;
}

/* Services area: let the grid/cards breathe */
#services .grid{
  gap: var(--cards-gap) !important;
  margin-top: 18px !important;
}
#services .card{
  padding: 28px !important;
}
#services h2{ margin-bottom: 14px !important; }

/* create a bigger gap between stacked sections */
section + section{
  padding-top: calc(var(--section-top) + 28px) !important;
}

/* mobile tweaks */
@media (max-width: 540px){
  :root{
    --hero-top: 32px;
    --hero-bottom: 44px;
    --section-top: 56px;
    --section-bottom: 80px;
    --cards-gap: 22px;
  }
}

#contact h2 { margin-bottom: 10px; }

/* Voucher */
#voucher { border-top: 1px solid rgba(212,175,55,.14); }
.voucher-form{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;
}
.voucher-form input{
  flex:1 1 260px; min-width:220px;
  padding:12px 14px; border-radius:12px; border:1px solid rgba(212,175,55,.28);
  background:linear-gradient(180deg,#141414,#0f0f0f); color:#fff;
  box-shadow: var(--shadow);
}
.voucher-form input::placeholder{ color:#c9c9c9 }
.voucher-msg{ margin-top:10px; font-weight:600 }
.voucher-msg.ok{ color:#b7ffbf }
.voucher-msg.err{ color:#ffb7b7 }

/* Sitewide voucher banner */
.voucher-banner{
  position:sticky; top:var(--nav-h); z-index:40;
  background:linear-gradient(180deg, rgba(20,20,20,.96), #101010);
  border-bottom:1px solid rgba(212,175,55,.18);
  color:#ffe9a8;
}
.voucher-banner .inner{
  max-width:var(--max); margin:0 auto; padding:8px 22px; display:flex; gap:8px; align-items:center; justify-content:space-between;
}
.voucher-chip{
  padding:6px 10px; border-radius:999px; border:1px solid rgba(212,175,55,.35);
  background:rgba(212,175,55,.12); color:#ffe9a8; font-weight:700; letter-spacing:.2px;
}
.voucher-clear{ background:none; border:0; color:#ffdca8; text-decoration:underline; cursor:pointer }
@media (max-width:540px){
  .voucher-form{ gap:8px }
}

.rating-wrap {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:8px;
}
.stars { display:inline-flex; gap:3px; }
.star {
  width:20px; height:20px; display:inline-block;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>') no-repeat center / contain;
  background: rgba(212,175,55,.28);
}
.star.on { background: linear-gradient(180deg, var(--gold), #b99426); }
.avg-label { color:#ffe9a8; font-weight:700; }

.star.on {
  background: linear-gradient(
    90deg,
    #b99426,
    #d4af37,
    #fff6b7,
    #d4af37,
    #b99426
  );
  background-size: 300% auto;
  animation: starShimmer 4s linear infinite;
}

@keyframes starShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.stars svg.star {
  width: 22px;
  height: 22px;
}

@keyframes shimmerGradient {
  0%   { x1: 0%; x2: 200%; }
  100% { x1: -200%; x2: 0%; }
}

#shine {
  animation: shimmerGradient 4s linear infinite;
}