/* Ballina — vetëm `index.html` e ngarkon këtë skedar, pas `geist.css`.
 *
 * Baza (token-at, shkronjat, butonat, shiriti, footer-i) jeton te `geist.css`, e
 * përbashkët me marketplace-in. Këtu mbeten vetëm seksionet e ballinës.
 */

/* ══ 1 · HYRJA ═══════════════════════════════════════════════════════════════ */
/* `clip`, jo `hidden`: drita pas telefonit (`.ph-wrap::before`) dilte jashtë ekranit në
   tablet dhe e bënte faqen të rrëshqiste anash; `clip` nuk krijon kuti rrëshqitjeje. */
.top{padding-top:72px;overflow-x:clip}
.hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
/* Shenja "Closed beta" — e njëjta që pronari e përdor për ta dalluar faqen e re. */
.hx-beta{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);font-size:13px;font-weight:var(--w-med);color:var(--ash)}
.hx-beta i{width:6px;height:6px;border-radius:50%;background:var(--ink)}
.hero-h{margin-top:28px;font-size:var(--t-hero);font-weight:var(--w-light);letter-spacing:-.04em;line-height:1.02}
.hero-h .dim{color:var(--ash)}
.hero-sub{margin-top:24px;max-width:46ch;font-size:var(--t-lead);line-height:1.6;color:var(--ash)}
.hero-act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}

.hero-vis{position:relative;margin-top:80px;display:block}
/* `text-size-adjust:100%`: skena zvogëlohet me `zoom` (shih "Heroja në tablet dhe telefon"),
   dhe shkronjat e saj bien në 4–5px. Safari në iPhone dhe Chrome në Android i "shpëtojnë"
   duke i zmadhuar vetë (text autosizing) — kutitë mbeten të vogla, teksti jo, dhe kolonat
   mbivendosen. Këtu teksti duhet të zvogëlohet bashkë me pjesën tjetër: është një pamje
   e produktit, jo tekst për t'u lexuar. Vetëm skena; pjesa tjetër e faqes nuk preket. */
.hv-stage{position:relative;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.hero-replay{display:flex;justify-content:center;margin-top:28px}
/* Njoftimet varen 56px nën panel; butoni rri nën to. */
@media (min-width:1100px){.hero-replay{margin-top:84px}}
.lk-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);
  border:0;background:transparent;color:var(--ash);font:var(--w-med) var(--t-small)/1 var(--f-sans);transition:color .2s,background-color .2s}
.lk-btn:hover{color:var(--ink);background:var(--fill)}

/* ── Paneli: shirit i hollë + inbox · bisedë · kalendar ───────────────────── */
.pn{width:calc(100% - 250px);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:var(--shadow-1);overflow:hidden;font-size:13px;line-height:1.45}
.pn-bar{display:flex;align-items:center;gap:16px;height:48px;padding:0 16px;border-bottom:1px solid var(--line)}
.pn-brand{font-size:15px;color:var(--ink)}
.pn-search{flex:1;max-width:340px;display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--fill);color:var(--ash);font-size:12.5px;white-space:nowrap;overflow:hidden}
.pn-me{margin-left:auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--white);font-size:11px;font-weight:var(--w-med)}
.pn-cols{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) minmax(0,.95fr);min-height:520px}
.pn-cols > div{min-width:0}
.pn-inbox,.pn-chat{border-right:1px solid var(--line)}
.pn-h{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;border-bottom:1px solid var(--line)}
.pn-h b{font-size:14px;font-weight:var(--w-med)}
.pn-h div span{display:block;font-size:12px;color:var(--ash)}
.pn-n{padding:2px 8px;border-radius:var(--r-pill);background:var(--fill-2);font-size:11.5px}
.av{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--fill-2);font-size:11px;font-weight:var(--w-med);color:var(--ink)}
.pn-list{list-style:none;margin:0;padding:8px}
.pn-list li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 8px;border-radius:var(--r-sm)}
.pn-list li.on{background:var(--white);box-shadow:0 0 0 1px var(--line)}
.pn-t b{display:block;font-size:13px;font-weight:var(--w-med);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-t span{display:block;font-size:12.5px;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-m{display:flex;flex-direction:column;align-items:flex-end;gap:6px;color:var(--ash)}
.pn-m time{font-size:11px}
.pn-m .gl{width:14px;height:14px}
.pn-chat{display:flex;flex-direction:column}
.pn-msgs{flex:1;display:flex;flex-direction:column;gap:10px;padding:20px 16px}
.pn-b{max-width:84%;padding:10px 13px;border-radius:16px;font-size:13px;line-height:1.45}
.pn-b.them{align-self:flex-start;background:var(--white);border:1px solid var(--line);border-bottom-left-radius:6px}
.pn-b.ai{align-self:flex-end;background:var(--ink);color:var(--white);border-bottom-right-radius:6px}
.pn-done{display:flex;align-items:center;gap:8px;margin:0 16px 16px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--white);border:1px solid var(--line);font-size:12.5px;font-weight:var(--w-med)}
.pn-slots{list-style:none;margin:0;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.pn-slots li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--white);border:1px solid var(--line)}
.pn-slots time{font-size:12px;font-weight:var(--w-med);padding-top:1px}
.pn-slots b{display:block;font-size:12.5px;font-weight:var(--w-med)}
.pn-slots span{display:block;font-size:12px;color:var(--ash)}
.pn-slots li.free{background:transparent;border-style:dashed}
.slot-new .is-free{display:none}
.slot-new{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--white);transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.slot-new span{color:rgb(var(--white-rgb) / .72)}
/* Para se biseda të mbarojë, ora 16:30 është ende e lirë. */
.seq .slot-new:not(.booked){background:transparent!important;border-color:var(--line)!important;border-style:dashed;color:var(--ink)}
.seq .slot-new:not(.booked) span{color:var(--ash)}
.seq .slot-new:not(.booked) .is-free{display:block}
.seq .slot-new:not(.booked) .is-taken{display:none}

/* Shiriti i aplikacioneve majtas panelit, si te paneli i vërtetë. */
.pn-cols{grid-template-columns:56px minmax(0,1.05fr) minmax(0,1.25fr) minmax(0,.95fr)}
.pn-rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0;border-right:1px solid var(--line)}
.pn-rail .ap{width:34px;height:34px;box-shadow:none}
.pn-rail .ap .gl,.pn-rail .ap .ic{width:18px;height:18px}
.pn-rail .ap-all .ic{color:var(--white)}
.pn-rail .ap.on{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink)}
/* Kolona e kalendarit e përshëndet mjekun, si Përmbledhja e panelit. */
.pn-hi b{font-size:15px;letter-spacing:-.015em}

/* Njoftimet e pronarit, mbi cepin e poshtëm majtas të panelit. */
.hx-notes{position:absolute;left:40px;bottom:-56px;z-index:3;width:340px;display:flex;flex-direction:column;gap:10px}
.hx-note{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 16px;border-radius:var(--r-lg);
  background:var(--white);border:1px solid var(--line-2);box-shadow:var(--shadow-1);font-size:13px;line-height:1.45;
  animation:note-in .6s var(--ease) both}
.hx-note:nth-child(2){animation-delay:.15s;margin-left:20px}
.hx-note:nth-child(3){animation-delay:.3s;margin-left:40px}
.hx-note.hot{border-color:var(--ink);box-shadow:var(--shadow-2)}
.hx-note b{display:block;font-weight:var(--w-med)}
.hx-note p{margin-top:2px;color:var(--ash)}
.hx-note strong{color:var(--ink)}
.hx-note time{font-size:12px;color:var(--ash)}
@keyframes note-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Rezervimi i Artës njoftohet vetëm pasi ora 16:30 zihet në bisedë. Vendi i tij mbetet
   i zënë, që dy njoftimet e tjera të mos kërcejnë kur ai shfaqet. */
.hx-note.hot{transition:opacity .5s var(--ease),transform .5s var(--ease)}
#demo.seq:has(.slot-new:not(.booked)) .hx-note.hot{opacity:0;transform:translateY(8px);animation:none}
@media (prefers-reduced-motion:reduce){.hx-note{animation:none}}

/* ── Telefoni: kornizë minimale 390×844, Instagram DM ─────────────────────── *
   Çdo masë brenda është në `em`: 1em = 15px kur telefoni ka gjerësinë 390px, kështu
   teksti ruan madhësinë e vërtetë të një DM-je në çdo gjerësi të kornizës. */
.ph-wrap{position:absolute;right:0;top:-36px;z-index:2}
/* Gradienti i vetëm i butë i faqes rri pas telefonit. */
.ph-wrap::before{content:"";position:absolute;inset:-18% -30%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgb(var(--white-rgb) / .95), rgb(var(--white-rgb) / .5) 45%, transparent 100%)}
.ph{--pw:280px;width:var(--pw);aspect-ratio:390/844;font-size:calc(var(--pw) * 15 / 390);
  padding:.45em;border-radius:calc(var(--pw) * 44 / 390);background:var(--white);border:1px solid var(--line-3);box-shadow:var(--shadow-2)}
.ph-scr{height:100%;display:flex;flex-direction:column;border-radius:calc(var(--pw) * 38 / 390);overflow:hidden;
  background:var(--white);border:1px solid var(--line)}
.ph-sb{display:flex;align-items:center;justify-content:space-between;padding:1.1em 1.6em .4em;font-size:1em;font-weight:var(--w-med)}
.ph-clock{font-variant-numeric:tabular-nums}
.ph-sbi{display:flex;align-items:flex-end;gap:.2em}
.ph-sbi i{display:block;width:.28em;background:var(--ink);border-radius:1px}
.ph-sbi i:nth-child(1){height:.45em}.ph-sbi i:nth-child(2){height:.65em}.ph-sbi i:nth-child(3){height:.85em}
.ph-head{display:flex;align-items:center;gap:.7em;padding:.7em 1em .9em;border-bottom:1px solid var(--line)}
.ph-head .ic{width:1.5em;height:1.5em}
.ph-head b{display:block;font-size:1em;font-weight:var(--w-med);line-height:1.2}
.ph-head span:not(.ph-av){display:block;font-size:.8em;color:var(--ash)}
.ph-av{width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;background:var(--fill-2);font-size:.82em;font-weight:var(--w-med)}
.ph-msgs{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.5em;padding:1em .9em;overflow:hidden}
/* Karta e profilit në krye të bisedës, si te Instagram-i; zbret poshtë kur mesazhet s'e lënë vend. */
.ph-intro{display:flex;flex-direction:column;align-items:center;gap:.25em;margin-bottom:auto;padding:1.2em 0 1em;text-align:center}
.ph-intro .ph-av{width:4.4em;height:4.4em;font-size:1em;margin-bottom:.4em}
.ph-intro b{font-size:1.05em;font-weight:var(--w-med)}
.ph-intro span:not(.ph-av){font-size:.85em;color:var(--ash)}
.ph-time{align-self:center;font-size:.8em;color:var(--ash);margin-bottom:.3em}
.ph-b{max-width:80%;padding:.6em .85em;border-radius:1.25em;font-size:1.05em;line-height:1.35}
.ph-b.me{align-self:flex-end;color:var(--white);background:linear-gradient(160deg,var(--brand-ms-2),var(--brand-ig-4))}
.ph-b.them{align-self:flex-start;background:var(--fill-2);color:var(--ink)}
.ph-by{align-self:flex-start;font-size:.8em;color:var(--ash);margin:-.2em 0 0 .4em}
.ph-typing{display:none;align-self:flex-start;gap:.3em;padding:.8em .9em;border-radius:1.25em;background:var(--fill-2)}
.ph-typing.on{display:inline-flex}
.ph-typing i{width:.45em;height:.45em;border-radius:50%;background:var(--ash);animation:ph-dot 1s infinite ease-in-out}
.ph-typing i:nth-child(2){animation-delay:.15s}.ph-typing i:nth-child(3){animation-delay:.3s}
@keyframes ph-dot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-.15em)}}
.ph-comp{display:flex;align-items:center;justify-content:space-between;margin:.6em .8em 1.2em;padding:.7em 1em;border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--ash);font-size:.95em}
.ph-comp .ic{width:1.3em;height:1.3em}

/* ── Rrjedha e animacionit (vetëm kur `biseda.js` e nis) ──────────────────── */
.seq [data-seq]:not(.shown){display:none}
.seq [data-seq].shown{animation:seq-in .55s var(--ease) both}
@keyframes seq-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Heroja në tablet dhe telefon ───────────────────────────────────────────
   E njëjta skenë si në desktop, e zvogëluar: gjerësi fikse 1152px dhe `zoom`.
   `ballina.js` e llogarit `--hv-k` nga hapësira që ka hyrja; vlerat këtu janë rezerva
   pa JavaScript. `zoom` (jo `transform`) e zvogëlon edhe vendin që zë skena, prandaj
   nuk mbetet hapësirë bosh poshtë saj. Mbushjet sipër/poshtë mbajnë telefonin që del
   36px mbi panel dhe njoftimet që varen 56px nën të. */
@media (max-width:1099px){
  .hv-stage{width:1152px;padding:36px 0 64px;zoom:var(--hv-k, .66)}
  /* Me JavaScript: `transform` në vend të `zoom`. Safari nuk i lë shkronjat e një
     elementi me `zoom` të bien nën rreth 9px — skena në telefon i ka 4–5px, prandaj
     teksti dilte dyfish më i madh se kutitë dhe kolonat mbivendoseshin (iPhone, iPad,
     Safari në Mac). `transform` e zvogëlon pamjen e vizatuar, jo madhësinë e shkronjave,
     dhe del njësoj në çdo shfletues. Vendin bosh që lë poshtë e mbyll `margin-bottom`
     negativ nga `ballina.js`. Pa JavaScript mbetet `zoom` si rezervë. */
  .hv-stage.is-fit{zoom:1;transform:scale(var(--hv-k));transform-origin:0 0}
  .ph-wrap{top:0}
  .hero-replay{margin-top:12px}
}
@media (max-width:767px){
  .top{padding-top:48px}
  .hero-h{margin-top:22px;letter-spacing:-.035em}
  .hero-h{font-size:clamp(40px, 11vw, 52px)}
  .hero-h br{display:none}
  .hero-h .l{display:block}
  .hero-sub{margin-top:18px}
  .hero-act{width:100%;flex-direction:column;align-items:stretch;margin-top:28px}
  .hero-vis{margin-top:48px}
  .hv-stage{zoom:var(--hv-k, .31)}
  .hv-stage.is-fit{zoom:1}
}

/* ══ PLLAKAT E KANALEVE ══════════════════════════════════════════════════════
   Logoja e bardhë mbi ngjyrën e markës. Ngjyrat janë token-a të `site.css`
   (`--brand-*`), dhe dalin vetëm këtu: pjesa tjetër e faqes mbetet bardhë-e-zi. */
.ap{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--white);
  box-shadow:inset 0 0 0 1px rgb(var(--white-rgb) / .14), 0 4px 12px rgb(var(--ink-rgb) / .12)}
.ap .gl,.ap .ic{width:19px;height:19px}
.ap-ig{background:radial-gradient(circle at 30% 107%, var(--brand-ig-1) 0%, var(--brand-ig-1) 5%, var(--brand-ig-2) 45%, var(--brand-ig-3) 60%, var(--brand-ig-4) 90%)}
.ap-ms{background:linear-gradient(40deg, var(--brand-ms-3) 0%, var(--brand-ms-2) 62%, var(--brand-ms-1) 100%)}
.ap-vb{background:linear-gradient(160deg, var(--brand-vb-1), var(--brand-vb-2))}
.ap-ab{background:linear-gradient(160deg, var(--brand-ab-1), var(--brand-ab-2))}
.ap-bk{background:linear-gradient(160deg, var(--brand-bk-1), var(--brand-bk-2))}
.ap-all{background:var(--ink)}
.ap.sm{width:26px;height:26px;border-radius:8px;box-shadow:none}
.ap.sm .gl{width:14px;height:14px}

/* Etiketa me kornizë ("Integrimet", "Problemi"). */
.pill{display:inline-flex;align-items:center;padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:var(--surface);font-size:12px;font-weight:var(--w-med);letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.pill + .h2{margin-top:20px}

/* ══ INTEGRIMET ══════════════════════════════════════════════════════════════ */
.ints{padding-block:96px 0}
.ints-h{display:flex;align-items:center;justify-content:center;gap:16px}
.ints-h i{flex:0 1 240px;height:1px;background:var(--line-2)}
.ints-mq{overflow:hidden;margin-top:28px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.ints-track{display:flex;width:max-content;gap:72px;list-style:none;margin:0;padding:12px 0;animation:ints-scroll 30s linear infinite}
.ints-track li{display:flex;align-items:center;gap:14px;white-space:nowrap;font-size:26px;font-weight:var(--w-med);letter-spacing:-.03em;color:var(--ink)}
.ints-track .ap{width:44px;height:44px;border-radius:12px}
.ints-track .ap .gl{width:23px;height:23px}
.ints-mq:hover .ints-track{animation-play-state:paused}
@keyframes ints-scroll{to{transform:translateX(calc(-50% - 36px))}}
@media (prefers-reduced-motion:reduce){
  .ints-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:24px 48px}
  .ints-track li[aria-hidden="true"]{display:none}
  .ints-mq{-webkit-mask-image:none;mask-image:none}
}

/* ══ STATISTIKAT ═════════════════════════════════════════════════════════════ */
.sts{padding-block:72px 0}
.sts-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sts-row li{display:flex;flex-direction:column;gap:8px;padding:32px 24px}
.sts-row li + li{border-left:1px solid var(--line)}
.sts-row b{font-size:clamp(36px,4vw,52px);font-weight:var(--w-light);letter-spacing:-.04em;line-height:1}
.sts-row span{font-size:var(--t-small);color:var(--ash)}

/* ══ PROBLEMI ════════════════════════════════════════════════════════════════
   Pesë burime → nxan → një pamje. Tubat janë një SVG që shtrihet me kolonën;
   `non-scaling-stroke` e mban vijën 1.4px pavarësisht shtrirjes. */
/* Diagrami rri mbi një kartë me ngjyrë: gradienti me kokrriza (`cv-bg.jpg`) e ka vetë
   teksturën, prandaj këtu s'hyn shtresa me zhurmë e `.fe-vis`. `cover` e mbush kartën në
   çdo gjerësi; ngjyra pas saj mban tonin derisa imazhi të ngarkohet. Mbi ngjyrë, vijat
   dhe teksti djathtas dalin të bardha — gri mbi portokalli nuk lexohej. */
.cv{margin-top:72px;display:grid;grid-template-columns:auto minmax(48px,1fr) auto minmax(48px,1fr) auto;align-items:center;
  padding:56px 56px;position:relative;isolation:isolate;overflow:hidden;
  background:#9a6a46 url(cv-bg.jpg) center/cover no-repeat}
.cv-src,.cv-out{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cv-src{gap:10px}
.cv-src li{display:flex;align-items:center;gap:12px;height:48px;padding:0 20px 0 6px;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.cv-src .ap{width:34px;height:34px;border-radius:var(--r-pill)}
.cv-src .ap .gl{width:17px;height:17px}
.cv-src li span{font-size:15px;font-weight:var(--w-med);white-space:nowrap}
.cv-pipe{color:rgb(var(--white-rgb) / .55);min-width:0}
/* 280px = pesë kapsula (48px) plus katër hapësira (10px): tubat mbarojnë aty ku mbarojnë burimet. */
.cv-pipe svg{display:block;width:100%;height:280px}
.cv-pipe path{vector-effect:non-scaling-stroke}
.cv-hub{display:grid;place-items:center;width:136px;height:136px;border-radius:36px;background:var(--ink);color:var(--white);
  box-shadow:var(--shadow-2)}
.cv-hub .mark{display:block;width:64px;aspect-ratio:455/151;background:currentColor;
  -webkit-mask:url(/assets/logo.svg) no-repeat center/contain;mask:url(/assets/logo.svg) no-repeat center/contain}
.cv-out{gap:24px}
.cv-out li{padding-left:20px;border-left:2px solid var(--white)}
.cv-out b{display:block;font-size:20px;font-weight:var(--w-med);letter-spacing:-.025em;color:var(--white)}
.cv-out span{display:block;margin-top:6px;font-size:var(--t-small);line-height:1.5;color:rgb(var(--white-rgb) / .82)}

/* ══ ÇKA BËN ═════════════════════════════════════════════════════════════════ */
.fe{display:flex;flex-direction:column;gap:112px;margin-top:88px}
.fe-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center}
.fe-row.flip .fe-txt{order:2}
.fe-txt .h3{margin-top:12px}
.fe-txt p:not(.eb){margin-top:16px;font-size:17px;line-height:1.6;color:var(--ash);max-width:44ch}
.fe-vis{min-height:360px;display:grid;place-items:center;padding:48px 40px;position:relative;isolation:isolate;overflow:hidden}
/* Tekstura e vrazhdë e sfondit pas kartave: kokrriza të errëta, të forta, mbi të njëjtën
   ngjyrë. Hyn me `multiply`, prandaj s'sjell nuancë të re — vetëm prekjen e letrës së
   ashpër. `z-index:-1` brenda `isolation` e mban nën kartat, që ato të mbeten të pastra. */
.fe-vis::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  opacity:.1;mix-blend-mode:multiply;background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Pamjet e veçorive: karta të bardha mbi sipërfaqen e butë. */
.vx{width:100%;max-width:400px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;
  box-shadow:var(--shadow-1);font-size:14px;line-height:1.45}
.vx-top{display:flex;align-items:center;gap:10px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.vx-top .gl{width:18px;height:18px}
.vx-top b{font-weight:var(--w-med)}
.vx-top time,.vx-top span{margin-left:auto;font-size:13px;color:var(--ash)}
.vb{max-width:86%;padding:10px 14px;border-radius:16px;margin-top:8px}
.vb.them{background:var(--fill);border-bottom-left-radius:6px}
.vb.ai{margin-left:auto;background:var(--ink);color:var(--white);border-bottom-right-radius:6px}
.vx-meta{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;color:var(--ash)}
.vx-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vx-slots span{padding:12px;border-radius:var(--r-sm);border:1px solid var(--line-2);text-align:center;font-weight:var(--w-med);font-variant-numeric:tabular-nums}
.vx-slots .x{color:var(--ash);background:var(--fill);border-color:transparent;text-decoration:line-through;text-decoration-color:var(--line-3)}
.vx-slots .on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.vx-ok{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:var(--r-sm);background:var(--fill);font-size:13px;font-weight:var(--w-med)}
.vx-push{display:flex;flex-direction:column;gap:10px;background:transparent;border:0;box-shadow:none;padding:0}
.vx-note{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:14px 16px;border-radius:var(--r-lg);background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-1)}
.vx-note.dim{opacity:.7;margin-inline:16px}
.vx-app{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--fill);color:var(--ink)}
.vx-app .gl,.vx-app .ic{width:18px;height:18px}
.vx-note b{font-weight:var(--w-med)}
.vx-note p{color:var(--ash);margin-top:2px}
.vx-hand{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.vx-alert{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px}
.vx-alert b{font-weight:var(--w-med)}
.vx-alert p{color:var(--ash);margin-top:2px}
.vx-hand .bt{pointer-events:none}
.vx-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center;font-size:12px;color:var(--ash)}
.vx-n{margin-top:8px}
.nt{aspect-ratio:1;border-radius:10px;border:1px dashed var(--line-3);display:grid;place-items:center}
.nt .gl{width:15px;height:15px}
.nt-ab,.nt-bk{border:1px solid var(--line-2);background:var(--fill);color:var(--ink)}
.nt-nx{border:1px solid var(--ink);background:var(--ink);color:var(--white)}
.nt-nx .mark{display:block;width:70%;aspect-ratio:455/151;background:currentColor;
  -webkit-mask:url(/assets/logo.svg) no-repeat center/contain;mask:url(/assets/logo.svg) no-repeat center/contain}
.vx-cap{margin-top:14px;font-size:13px;color:var(--ash)}

/* ══ SI FUNKSIONON ═══════════════════════════════════════════════════════════ */
.stp{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:none}
.stp li{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 28px 32px;border-radius:var(--r-xl);border:1px solid var(--line);background:var(--surface)}
.stp li:nth-child(1){background:url(stp-1.png) center/cover no-repeat}
.stp li:nth-child(2){background:url(stp-2.png) center/cover no-repeat}
.stp li:nth-child(3){background:url(stp-3.png) center/cover no-repeat}
.stp-n{font-size:13px;font-weight:var(--w-med);color:var(--ash);font-variant-numeric:tabular-nums}
.stp b{font-size:19px;font-weight:var(--w-med);letter-spacing:-.015em;margin-top:8px}
.stp p{color:var(--ash);line-height:1.6}

/* ══ PËR KË ══════════════════════════════════════════════════════════════════ */
.who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:64px}
.who-c{display:flex;flex-direction:column;gap:12px;padding:36px}
.who-c .h3{margin-top:12px}
.who-k{font-size:var(--t-small);font-weight:var(--w-med);color:var(--ash)}
.who-c > p:not(.who-k):not(.who-for){color:var(--ash);line-height:1.6;max-width:52ch}
.who-ch{display:flex;gap:14px;margin-top:12px;color:var(--ink)}
.who-ch .gl{width:22px;height:22px}
.who-for{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);font-size:var(--t-small);color:var(--ash)}
/* Prapavija e secilës kartë: klinikat me valën ari-blu, qiraja me ngjyrat e ngrohta.
   Një shtresë e çelët sipër figurës — më e plotë majtas, ku rri teksti — e mban tekstin
   të lexueshëm mbi pjesët e errëta e me grimca; pa të, në kartën e dytë fjalitë humbnin
   mbi ullirin. Teksti kalon nga gri në bojë për të njëjtën arsye. */
.who-klinika,.who-qira{border-color:transparent;background-position:center;background-size:cover;background-repeat:no-repeat}
.who-klinika{background-image:linear-gradient(100deg,rgb(var(--white-rgb) / .58) 0%,rgb(var(--white-rgb) / .38) 60%,rgb(var(--white-rgb) / .18) 100%),url(/assets/img/per-ke-klinika.jpg)}
.who-qira{background-image:linear-gradient(100deg,rgb(var(--white-rgb) / .66) 0%,rgb(var(--white-rgb) / .48) 60%,rgb(var(--white-rgb) / .28) 100%),url(/assets/img/per-ke-qira.jpg)}
.who-c.who-klinika p,.who-c.who-qira p,.who-c.who-klinika > p:not(.who-k):not(.who-for),.who-c.who-qira > p:not(.who-k):not(.who-for){color:var(--ink)}
.who-klinika .who-for,.who-qira .who-for{border-top-color:rgb(var(--ink-rgb) / .18)}

/* ══ PYETJE ══════════════════════════════════════════════════════════════════ */
.fq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.fq-list{border-top:1px solid var(--line)}
.fq-i{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:0;box-shadow:none}
.fq-i summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:18px 0;
  cursor:pointer;font-size:17px;font-weight:var(--w-reg);letter-spacing:-.01em}
.fq-i summary::-webkit-details-marker{display:none}
.fq-i summary:focus-visible{outline-offset:4px}
.fq-ic{transition:transform .25s var(--ease);color:var(--ash)}
.fq-i[open] .fq-ic{transform:rotate(45deg)}
.fq-i p{padding:0 48px 22px 0;color:var(--ash);font-size:16px;line-height:1.6}

/* ══ THIRRJA E FUNDIT ════════════════════════════════════════════════════════ */
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;padding:96px 32px;border-radius:var(--r-xl);
  background:var(--soft);border:1px solid var(--line)}
.cta .h2{max-width:22ch}
/* Atmosfera e thirrjes së fundit — vetëm kjo kartë.
   Dy shtresa pas përmbajtjes (`isolation` + `z-index:-1`), që teksti, forma dhe butoni
   të mos preken: `::before` është drita (valë pastel të turbullta: livando, blu akulli,
   pjeshkë, një shkëlqim i bardhë), `::after` kokrriza e imët që e bën të duket si
   letër/dritë fizike, jo si gradient CSS. Intensiteti mbahet i ulët — karta mbetet
   e bardhë në shikim të parë. Ngjyrat janë token-a vetëm të kësaj karte. */
.cta{--atm-lav-rgb:184 178 236;--atm-ice-rgb:186 222 246;--atm-peach-rgb:250 220 200;
  position:relative;isolation:isolate;overflow:hidden;background:var(--surface)}
.cta::before,.cta::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.cta::before{inset:-30%;opacity:.55;filter:blur(34px);
  background:
    radial-gradient(46% 7% at 50% 52%, rgb(var(--white-rgb) / .95), transparent 75%),
    radial-gradient(30% 22% at 58% 46%, rgb(var(--white-rgb) / .8), transparent 72%),
    radial-gradient(40% 30% at 26% 34%, rgb(var(--atm-lav-rgb) / .62), transparent 70%),
    radial-gradient(30% 34% at 40% 70%, rgb(var(--atm-lav-rgb) / .38), transparent 72%),
    radial-gradient(42% 34% at 76% 28%, rgb(var(--atm-ice-rgb) / .6), transparent 70%),
    radial-gradient(34% 30% at 70% 74%, rgb(var(--atm-peach-rgb) / .55), transparent 70%),
    radial-gradient(30% 26% at 16% 78%, rgb(var(--atm-ice-rgb) / .4), transparent 72%);
  transform:rotate(-8deg);animation:cta-atm 48s ease-in-out infinite alternate}
.cta::after{inset:0;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}
/* Lëvizja: aq e ngadaltë sa mezi vihet re; zero me pak lëvizje. */
@keyframes cta-atm{
  from{transform:rotate(-8deg) translate3d(-2%,-1%,0) scale(1)}
  to{transform:rotate(-5deg) translate3d(2%,1.5%,0) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){.cta::before{animation:none}}
/* Në telefon: e njëjta dritë, e prerë më ngushtë — jo më e fortë. */
@media (max-width:767px){.cta::before{inset:-15% -60%;opacity:.42;filter:blur(28px)}}
.wl{display:flex;gap:8px;width:100%;max-width:480px;margin-top:36px;padding:6px;border-radius:var(--r-pill);background:var(--white);
  border:1px solid var(--line-2);transition:border-color .2s}
.wl:focus-within{border-color:var(--ink)}
.wl input:not(.wl-hp){flex:1;min-width:0;min-height:44px;padding:0 16px;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);outline:none}
.wl input::placeholder{color:var(--ash)}
.wl .bt{min-height:44px}
.wl-status{margin-top:12px;font-size:var(--t-small);color:var(--ash)}
.wl-status:empty{display:none}
.cta-note{margin-top:16px;font-size:var(--t-small);color:var(--ash)}
.cta-note a{color:var(--ink);border-bottom:1px solid var(--line-3)}
.cta-note a:hover{border-color:var(--ink)}

/* ── Dritarja e waitlist-it ──────────────────────────────────────────────── */
.wl-modal{width:min(520px, calc(100vw - 32px));padding:40px 36px 32px;border:1px solid var(--line-2);border-radius:var(--r-xl);
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2)}
.wl-modal::backdrop{background:rgb(var(--ink-rgb) / .35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.wl-modal .h3{margin-top:10px}
.wl-modal-sub{margin-top:12px;color:var(--ash);line-height:1.6}
.wl-modal .wl{margin-top:24px;max-width:none}
.wl-x{position:absolute;top:14px;right:14px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--ash);transition:background-color .2s,color .2s}
.wl-x:hover{background:var(--fill);color:var(--ink)}

/* ── Thirrja e fiksuar në telefon ────────────────────────────────────────── */
.stk{display:none}
@media (max-width:767px){
  .stk:not([hidden]){display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background:rgb(var(--paper-rgb) / .92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .stk .bt{width:100%}
  /* Butoni i gjuhës (`i18n.js`) ngrihet mbi thirrjen. */
  body.has-stk .nxan-lang.nxan-lang-float{bottom:84px}
}

/* ══ SEKSIONET NË TABLET DHE TELEFON ═════════════════════════════════════════ */
@media (max-width:1023px){
  .fe-row,.fe-row.flip{grid-template-columns:1fr;gap:32px}
  .fe-row.flip .fe-txt{order:0}
  .fe{gap:88px;margin-top:64px}
  .fq{grid-template-columns:1fr;gap:32px}
  .sts-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sts-row li:nth-child(3){border-left:0}
  .sts-row li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:767px){
  .ints{padding-block:72px 0}
  .ints-track{gap:44px}
  .ints-track li{font-size:20px;gap:12px}
  .ints-track .ap{width:38px;height:38px}
  .cv{margin-top:48px;grid-template-columns:1fr;justify-items:center;gap:20px;padding:32px 20px}
  .cv-pipe{display:none}
  .cv-src{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}
  .cv-src li{height:42px;padding-right:16px}
  .cv-src .ap{width:30px;height:30px}
  .cv-hub{width:104px;height:104px;border-radius:28px}
  .cv-hub .mark{width:52px}
  .cv-out{align-self:stretch}
  .sts{padding-block:56px 0}
  .sts-row li{padding:24px 16px}
  .fe-vis{min-height:0;padding:28px 16px}
  .stp,.who{grid-template-columns:1fr;margin-top:40px}
  .who-c{padding:28px 24px}
  .cta{padding:64px 20px}
  .wl{flex-direction:column;border-radius:var(--r-lg);padding:8px}
  .wl .bt{width:100%}
  .fq-i p{padding-right:0}
  .ft{padding-bottom:104px}
}