/* Baza e dizajnit Geist — e përbashkët për ballinën (`index.html`) dhe marketplace-in
 * (`rezervo.html`).
 *
 * Ngjyrat janë token-a të `site.css` (`--paper`, `--ink`, `--ash`, `--surface`…); këtu nuk
 * shkruhet asnjë ngjyrë direkt. Tejdukshmëria merret si `rgb(var(--ink-rgb) / a)`.
 *
 * Tipografia: një familje (Geist) me tri pesha — 300 për titujt e mëdhenj, 400 për
 * tekstin, 500 për etiketat dhe butonat.
 *
 * Ndarë nga `ballina.css` që marketplace-i të flasë të njëjtën gjuhë pa e kopjuar: një
 * buton, një shirit, një footer — ndryshohen këtu, një herë.
 */

/* ── Token-at e ballinës ──────────────────────────────────────────────────── */
:root{
  --f-sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-title:var(--f-sans);
  --f-body:var(--f-sans);
  --w-light:300;--w-reg:400;--w-med:500;

  --t-hero:clamp(44px, 6.2vw, 72px);
  --t-h2:clamp(32px, 4.2vw, 48px);
  --t-h3:clamp(22px, 2.3vw, 26px);
  --t-lead:clamp(17px, 1.5vw, 18px);
  --t-body:16px;
  --t-small:14px;
  --t-micro:12.5px;

  --max:1200px;
  --gutter:24px;
  --sec:120px;
  --nav-h:64px;

  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow-1:0 1px 2px rgb(var(--ink-rgb) / .04), 0 8px 24px rgb(var(--ink-rgb) / .05);
  --shadow-2:0 2px 6px rgb(var(--ink-rgb) / .05), 0 30px 70px rgb(var(--ink-rgb) / .12);
  /* Gradienti i vetëm i butë: letra e çelët që shkon te letra e errët. */
  --soft:radial-gradient(120% 120% at 20% 0%, var(--white) 0%, var(--surface) 38%, var(--surface-2) 100%);
}
@media (max-width:767px){
  :root{--gutter:16px;--sec:88px}
}

/* ── Baza ─────────────────────────────────────────────────────────────────── */
body{font-family:var(--f-sans);font-size:var(--t-body);font-weight:var(--w-reg);line-height:1.55;
  background:var(--paper);color:var(--ink)}
h1,h2,h3,h4{font-family:var(--f-sans);font-weight:var(--w-reg);letter-spacing:-.03em;line-height:1.08;margin:0}
b,strong{font-weight:var(--w-med)}
p{margin:0}
::selection{background:var(--ink);color:var(--white)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
section[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

.w{width:100%;max-width:calc(var(--max) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.s{padding-block:var(--sec)}
/* Vija mes seksioneve rri brenda gutter-it, sa gjerësia e përmbajtjes. */
.s-line{position:relative}
.s-line::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--line)}

/* Ikonat: një set (Lucide), vijë 1.5px. Logot e kanaleve janë glife të mbushura. */
.ic{display:block;width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic-24{width:24px;height:24px}
.ic-16{width:16px;height:16px}
.gl{display:block;width:24px;height:24px;flex:none;fill:currentColor}

/* ── Tipografia e seksioneve ──────────────────────────────────────────────── */
.eb{display:inline-block;font-size:var(--t-small);font-weight:var(--w-med);color:var(--ash)}
.h2{font-size:var(--t-h2);font-weight:var(--w-light);letter-spacing:-.035em;line-height:1.06;max-width:20ch}
.eb + .h2{margin-top:16px}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--ash);max-width:56ch}
.h2 + .lead{margin-top:20px}
.h3{font-size:var(--t-h3);font-weight:var(--w-reg);letter-spacing:-.025em;line-height:1.15}
.s-head{max-width:760px}
.s-head.c{margin-inline:auto;text-align:center}
.s-head.c .h2,.s-head.c .lead{margin-inline:auto}

/* ── Butonat ──────────────────────────────────────────────────────────────── */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;
  border-radius:var(--r-pill);border:1px solid transparent;font:var(--w-med) 15px/1 var(--f-sans);letter-spacing:-.005em;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .15s var(--ease)}
.bt:active{transform:scale(.98)}
.bt:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-pill)}
.bt-p{background:var(--ink);color:var(--white)}
.bt-p:hover{background:var(--ink-soft)}
.bt-s{background:transparent;color:var(--ink);border-color:var(--line-3)}
.bt-s:hover{background:var(--fill);border-color:rgb(var(--ink-rgb) / .32)}
.bt-sm{min-height:44px;padding:0 18px;font-size:14px}
.bt[disabled]{opacity:.55;cursor:wait}
.bt .ic{width:18px;height:18px}
.lk{display:inline-flex;align-items:center;gap:6px;font-weight:var(--w-med);color:var(--ink);border-bottom:1px solid var(--line-3);padding-bottom:2px;transition:border-color .2s}
.lk:hover{border-color:var(--ink)}
.lk .ic{width:16px;height:16px}

/* ── Kartat ───────────────────────────────────────────────────────────────── */
.cd{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl)}
.cd-soft{background:var(--soft)}

/* ── Shiriti i sipërm ─────────────────────────────────────────────────────── */
.nv{position:sticky;top:0;z-index:50;background:rgb(var(--paper-rgb) / .86);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.nv.on{border-bottom-color:var(--line)}
.nv-in{position:relative;display:flex;align-items:center;gap:32px;height:var(--nav-h)}
.nv .brand{font-size:20px;color:var(--ink)}
.nv-links{display:flex;gap:28px;margin-right:auto}
.nv-links a{font-size:var(--t-small);color:var(--ash);transition:color .2s}
.nv-links a:hover{color:var(--ink)}
.nv-act{display:flex;align-items:center;gap:8px}
.nv-act .bk-client{font-size:var(--t-small);color:var(--ash);margin-right:12px;transition:color .2s}
.nv-act .bk-client:hover{color:var(--ink)}
/* `page.js` e njeh menynë nga `.burger` dhe `#bar-menu`. */
.nv .burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:transparent;color:var(--ink);place-items:center;padding:0}
.nv .burger .ic-x{display:none}
.nv .burger[aria-expanded="true"] .ic-m{display:none}
.nv .burger[aria-expanded="true"] .ic-x{display:block}
.nv-menu{display:none}
@media (max-width:899px){
  .nv-links,.nv-act .bk-client{display:none}
  .nv-in{gap:12px}
  .nv .brand{margin-right:auto}
}
@media (max-width:767px){
  .nv-act{display:none}
  .nv .burger{display:grid}
  .nv-menu{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 20px;flex-direction:column}
  .nv-menu[data-open="true"]{display:flex}
  .nv-menu a:not(.bt){padding:14px 0;font-size:17px;border-bottom:1px solid var(--line)}
  .nv-menu .bt{margin-top:16px}
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.ft{border-top:1px solid var(--line);padding-block:56px 40px;color:var(--ash);font-size:var(--t-small)}
.ft-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:28px}
.ft .brand{font-size:18px}
.ft nav{display:flex;flex-wrap:wrap;gap:12px 24px;max-width:640px}
.ft nav a{font-size:var(--t-small);color:var(--ash);transition:color .2s}
.ft nav a:hover{color:var(--ink)}
.ft-legal{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
  font-size:var(--t-micro);color:var(--ash)}
.ft-legal a:hover{color:var(--ink)}
/* Hyrja e pronarit gjatë waitlist-it: e qetë, pas "©". Jo në skajin e djathtë — aty e mbulon
   butoni fiks i gjuhës. Padding-u e zmadhon vendin e prekjes pa e lëvizur rreshtin. */
.ft-dots{padding:8px 10px;margin:-8px -10px;letter-spacing:.15em;opacity:.55;transition:opacity .2s}
.ft-dots:hover,.ft-dots:focus-visible{opacity:1}

/* ── Lëvizja ──────────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}