/* flow AI Agent - "Nje nate" (Nje nate).
   Faqja publike e n-app. Filmi eshte nje udhetim i vetem: qyteti mbyllet, dritat fiken,
   kamera hyn ne nje dyqan te erret, zhytet ne ekranin e vetem qe ndricon, dhe del ne
   agim. Faqja ndjek te njejten kthese - fillon naten dhe mbaron ne drite.

   Prandaj ekzistojne dy pamje ketu: pjesa e erret (filmi) dhe pjesa e ndritshme (fundi
   dhe fundfaqja). Kalimi ndodh pikerisht kur klipi i fundit shperthen ne dite. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,400..700&family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

:root, .sw-root {
  --night: #06080C;
  --night-2: #0C1118;
  --chrome: #F2F5F9;
  --steel: #98A3B3;
  --amber: #F2B24C;
  --cyan: #6FE9FF;

  --day: #F5F2EC;
  --day-2: #EDE8DF;
  --day-ink: #101419;
  --day-muted: #5C6673;
  --day-edge: rgba(16, 20, 25, .12);

  --edge: rgba(242, 245, 249, .13);
  --edge-soft: rgba(242, 245, 249, .07);

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --sw-bg: #06080C;
  --sw-ink: #F2F5F9;
  --sw-ink-soft: #98A3B3;
  --sw-accent: #F2B24C;
  --sw-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sw-font-body: Inter, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0; background: var(--night); color: var(--chrome);
  font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .9s var(--ease);
}
/* Kalimi ne drite: trupi i faqes ndryshon ne te njejtin moment kur klipi i fundit
   shperthen ne dite, keshtu qe video dhe faqe nuk ndahen kurre me nje vije. */
body.is-day { background: var(--day); }
img, video { display: block; max-width: 100%; }
a { color: inherit; }

.skip-link {
  position: fixed; left: 16px; top: -70px; z-index: 300;
  padding: 11px 18px; border-radius: 7px;
  background: var(--chrome); color: var(--night);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ======================================================= hero ne lak ====== */
/* Perpara se te levizet, hero-ja duhet te jetoje: uji leviz, dritat dridhen. Klipi
   eshte prere me nje shkrirje te gjate, keshtu qe fundi bie sakte mbi fillimin dhe laku
   nuk shihet. Sapo fillon levizja, ai i dorezon skenes se pare qe tashme rrotullohet me
   scroll-in - me nje shkrirje te shkurter, qe dorezimi te mos duket. */
.hero-loop {
  position: fixed; inset: 0; z-index: 12; pointer-events: none;
  opacity: 1; transition: opacity .35s linear;
}
.hero-loop video { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.hero-loop.is-off { opacity: 0; }

/* ============================================================== filmi ===== */

.sw-copy__title {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 600;
  font-weight: 600; letter-spacing: -.018em; line-height: 1.05;
  font-size: clamp(2rem, 3.7vw, 3.2rem);
  text-shadow: 0 2px 44px rgba(6, 8, 12, .9);
}
.sw-copy__eyebrow {
  margin-top: 0; font-family: var(--mono); font-weight: 500;
  font-size: 1rem; letter-spacing: .18em; color: var(--sw-accent);
  text-shadow: 0 1px 20px rgba(6, 8, 12, .95);
}
.sw-copy__num { display: none; }
.sw-copy__body { color: #C3CCD8; max-width: 40ch; text-shadow: 0 1px 26px rgba(6, 8, 12, .95); }
.sw-copy__tags li {
  padding: 6px 12px; border-radius: 5px;
  background: rgba(242, 245, 249, .05); border: 1px solid var(--edge);
  color: var(--chrome); font-family: var(--mono); font-weight: 400; font-size: .72rem;
}

/* Motori i shkruan vete nje transform skenes (rreshti 254: translateY per parallaks) dhe
   me te fshin qendrimin ne mes qe vjen nga rregulli baze. Rezultati: kutia e tekstit
   fillonte sakte ne gjysmen e ekranit dhe zbriste poshte - ne ekrane te ulet pritej.
   Zgjidhja pa e prekur motorin: kutia mbulon gjithe lartesine dhe permbajtja qendrohet
   brenda saj. Parallaksi mbetet, sepse ai leviz vetem kutine. */
.sw-copy {
  top: 0 !important; bottom: 0 !important; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 104px 0 84px;
}
@media (max-height: 760px) and (min-width: 821px) {
  .sw-copy__title { font-size: clamp(1.7rem, 3vw, 2.5rem); }
  .sw-copy__body { margin-top: 12px; font-size: 1rem; }
}
@media (max-height: 620px) and (min-width: 821px) {
  .sw-copy__title { font-size: 1.6rem; }
  .sw-copy__body { display: none; }
}
@media (max-width: 820px) {
  .sw-copy {
    justify-content: flex-end;
    padding: 84px 0 calc(clamp(76px, 15dvh, 132px) + env(safe-area-inset-bottom));
  }
  .sw-copy__title { font-size: clamp(1.75rem, 6.6vw, 2.4rem); }
  .sw-copy__body { margin-top: 12px; }
}

/* Kupola: marka majtas, hyrja dhe thirrja djathtas. Ne pjesen e ndritshme ajo kthehet. */
.sw-topbar { padding: 22px clamp(18px, 3.4vw, 40px) !important; }
.sw-brand__name { font-family: var(--display); font-variation-settings: 'wdth' 106, 'wght' 700; font-size: 1.06rem; }
.sw-brand__mark { width: 22px; height: 26px; border-radius: 0; box-shadow: none; background: url('brand/flow-mark.svg') center/contain no-repeat; }
.sw-nav { display: none !important; }
.sw-route { display: none !important; }
.sw-sky { background: var(--night); }
.sw-scrollbar { background: var(--edge-soft) !important; }
.sw-hint { color: var(--steel); font-family: var(--mono); letter-spacing: .22em; }
.sw-hint i { border-color: rgba(242, 245, 249, .26); }

.sw-topcta, .top-signin {
  font-family: var(--body); font-size: .855rem; font-weight: 600;
  padding: 10px 20px; border-radius: 7px; text-decoration: none; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.top-signin { color: var(--chrome); border: 1px solid var(--edge); background: rgba(242, 245, 249, .04); margin-left: auto; }
.top-signin:hover { border-color: rgba(242, 245, 249, .4); background: rgba(242, 245, 249, .08); }
.sw-topcta { background: var(--chrome); color: var(--night); margin-left: 10px; }
.sw-topcta:hover { box-shadow: 0 0 30px -4px rgba(242, 178, 76, .6); }

body.is-day .top-signin { color: var(--day-ink); border-color: var(--day-edge); background: rgba(16, 20, 25, .03); }
body.is-day .sw-topcta { background: var(--day-ink); color: var(--day); }
body.is-day .sw-brand__name { color: var(--day-ink); }
body.is-day .sw-brand__mark { filter: invert(1) brightness(.2); }

.sw-btn { font-family: var(--body); font-weight: 600; border-radius: 8px; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.sw-btn--primary { background: var(--chrome); color: var(--night); }
.sw-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 38px -6px rgba(242, 178, 76, .65); }
.sw-btn--ghost { color: var(--chrome); border: 1px solid var(--edge); }
.sw-btn--ghost:hover { transform: translateY(-2px); border-color: rgba(242, 245, 249, .42); }

/* Kur filmi ka mbaruar, asgje prej tij nuk qendron ne ekran - as teksti majtas, as
   shiriti i scroll-it. Kjo ishte e dukshme me pare dhe prishte fundin. */
body.past-film .sw-copylayer { opacity: 0 !important; visibility: hidden; }
body.past-film .sw-stage { opacity: 0; }
body.past-film .sw-scrollbar { opacity: 0; }
.sw-copylayer, .sw-stage, .sw-scrollbar { transition: opacity .45s var(--ease); }

/* ====================================================== ora e nates ====== */
/* Elementi i firmes: nje ore qe ecen bashke me filmin. Ora nuk eshte zbukurim - ajo
   thote pikerisht ate qe tregon skena, dhe e ben fundin ne agim te kuptueshem. */
.nightclock {
  position: fixed; right: clamp(18px, 3.4vw, 40px); top: 50%; z-index: 45;
  transform: translateY(-50%); text-align: right; pointer-events: none;
  transition: opacity .5s var(--ease), visibility .5s;
}
.nightclock b {
  display: block; font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: .04em; color: var(--chrome);
  text-shadow: 0 2px 30px rgba(6, 8, 12, .9);
}
.nightclock span {
  display: block; margin-top: 6px; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--steel);
}
.nightclock i {
  display: block; width: 1px; height: 74px; margin: 14px 0 0 auto;
  background: linear-gradient(180deg, var(--amber), transparent);
  opacity: .55;
}
.nightclock.is-gone { opacity: 0; visibility: hidden; }
@media (max-width: 820px) { .nightclock { display: none; } }

/* ==================================================== agimi (kalimi) ===== */
/* Klipi i fundit nuk kalon dot vete neper ekran - modeli e mban laptopin si objekt.
   Prandaj kalimin e ben faqja: drita e ekranit permbyt faqen. Perde e bardhe mbi filmin,
   e lidhur me te njejten pike scroll-i si sfondi i faqes, keshtu qe video dhe faqe
   nderrohen ne te njejtin çast dhe asnje vije nuk shihet mes tyre. */
.daybreak {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  /* Ne fund perdja ka SAKTE ngjyren e faqes se dites. Perndryshe, kur permbajtja
     rreshqet mbi te, do te dukej nje vije mes te bardhes se perdes dhe letres se faqes. */
  background: var(--day);
  opacity: 0;
}
/* Shkelqimi i dritës ndodh vetem gjate kalimit dhe shuhet perseri: drita shperthen dhe
   pastaj ulet ne ngjyren e faqes. */
.daybreak::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 46%, #FFFFFF 0%, #FFFDF8 45%, rgba(255, 253, 248, 0) 100%);
  opacity: var(--bloom, 0);
}

/* ========================================================= dita ========== */

/* Permbajtja e dites qendron MBI cdo shtrese te filmit dhe mbi perde (30). Me pare
   ishte ne 5 dhe fshihej plotesisht pas saj sapo kalimi mbaronte. */
/* Die Ankunft rueckt in die Aufhellzone hinein: der Schleier ist dort schon Papierweiss,
   also darf der Inhalt darueber erscheinen, statt erst nach einer leeren Bildschirmhoehe. */
.aftermath { position: relative; z-index: 40; background: var(--day); color: var(--day-ink); margin-top: -38vh; }
.band { max-width: 1120px; margin: 0 auto; padding: clamp(46px, 6vw, 84px) clamp(20px, 4vw, 40px); }
.band + .band { border-top: 1px solid var(--day-edge); }
.band-eyebrow {
  margin: 0 0 20px; font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: #9A6B1E;
}
.band h2 {
  margin: 0 0 clamp(34px, 4.5vw, 58px);
  font-family: var(--display); font-variation-settings: 'wdth' 110, 'wght' 600; font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.95rem); line-height: 1.07; letter-spacing: -.018em;
  color: var(--day-ink); max-width: 19ch;
}

.spec { display: grid; }
.spec-row {
  display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: clamp(18px, 4vw, 54px);
  padding: 22px 0; border-top: 1px solid var(--day-edge);
}
.spec-row:last-child { border-bottom: 1px solid var(--day-edge); }
.spec-row dt { font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #9A6B1E; padding-top: 3px; }
.spec-row dd { margin: 0; color: var(--day-ink); font-size: 1.02rem; line-height: 1.55; }
.spec-row dd small { display: block; margin-top: 6px; color: var(--day-muted); font-size: .9rem; line-height: 1.6; }

.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 54px); }
.trust-grid article { padding-top: 22px; border-top: 1px solid rgba(16, 20, 25, .22); }
.trust-step { display: block; margin-bottom: 13px; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--day-ink); }
.trust-grid p { margin: 0; color: var(--day-muted); font-size: .95rem; line-height: 1.62; }

.band-close { text-align: center; }
.band-close h2 { margin-inline: auto; max-width: 16ch; }
.close-lead { max-width: 46ch; margin: -18px auto 36px; color: var(--day-muted); font-size: 1.05rem; }
.close-actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }

.btn-day, .btn-quiet {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 28px; border-radius: 8px;
  font-size: .95rem; font-weight: 600; text-decoration: none;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.btn-day { background: var(--day-ink); color: var(--day); }
.btn-day i { font-style: normal; transition: transform .28s var(--ease); }
.btn-day:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(16, 20, 25, .55); }
.btn-day:hover i { transform: translateX(4px); }
.btn-quiet { border: 1px solid rgba(16, 20, 25, .28); color: var(--day-ink); }
.btn-quiet:hover { transform: translateY(-2px); border-color: var(--day-ink); }

/* Fundfaqja merr ngjyren e seksionit te agimit para saj - jo nje bllok i bardhe. */
.day-footer {
  position: relative; z-index: 40; background: var(--night-2); color: var(--chrome);
  border-top: 1px solid var(--edge-soft);
}
.day-footer > div {
  max-width: 1120px; margin: 0 auto; padding: 44px clamp(20px, 4vw, 40px) 56px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px;
}
.foot-brand { display: flex; align-items: center; gap: 11px; }
.foot-brand img { filter: none; }
.foot-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.foot-brand b { font-family: var(--display); font-variation-settings: 'wdth' 106, 'wght' 700; font-size: 1rem; }
.foot-brand small { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--steel); }
.foot-links { display: flex; flex-wrap: wrap; gap: 24px; margin-left: auto; }
.foot-links a { color: var(--steel); font-size: .9rem; text-decoration: none; transition: color .2s; }
.foot-links a:hover { color: var(--chrome); }
.day-footer p { width: 100%; margin: 0; color: var(--steel); font-size: .8rem; }

@media (max-width: 860px) {
  .spec-row { grid-template-columns: 1fr; gap: 9px; padding: 20px 0; }
  .trust-grid { grid-template-columns: 1fr; }
  .foot-links { margin-left: 0; }
  .sw-topbar { padding: 15px 18px !important; }
  .top-signin, .sw-topcta { padding: 9px 15px; font-size: .8rem; }
}

@keyframes city-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sw-topbar, .nightclock { animation: city-rise .85s var(--ease) both; }
.nightclock { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  .sw-topbar, .nightclock { animation: none; }
  body, .hero-loop, .nightclock, .btn-day, .btn-quiet { transition: none; }
}

/* ================================================ pjeset pas filmit ====== */
/* Kerkesa ishte ritem, jo nje siperfaqe e bardhe pa fund: nje pjese e shkurter ne drite,
   pastaj kthimi ne boten e produktit me pamje qe ndryshojne ndersa levizet, dhe ne fund
   agimi qe e dorezon fundfaqen. Cdo pjese e deklaron veten si "day" ose "night", dhe
   kupola ndjek ate qe ndodhet nen te. */

.scene { position: relative; z-index: 40; overflow: clip; }
.scene[data-tone="night"] { background: var(--night); color: var(--chrome); }
.scene[data-tone="day"] { background: var(--day); color: var(--day-ink); }

.scene-media { position: absolute; inset: -12% 0 -12% 0; z-index: 0; }
.scene-media img, .scene-media video { width: 100%; height: 100%; object-fit: cover; }
/* Fotografia ecen me ngadale se teksti: thellesi pa e bere levizjen te dukshme. */
.scene-media { transform: translate3d(0, calc(var(--p, .5) * 9% - 4.5%), 0); will-change: transform; }
.scene[data-tone="night"] .scene-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 8, 12, .93) 0%, rgba(6, 8, 12, .62) 42%, rgba(6, 8, 12, .95) 100%);
}
.scene-inner {
  position: relative; z-index: 1; max-width: 1120px; margin: 0 auto;
  padding: clamp(96px, 13vw, 168px) clamp(20px, 4vw, 40px);
}

.scene h2 {
  margin: 0 0 18px; max-width: 17ch;
  font-family: var(--display); font-variation-settings: 'wdth' 110, 'wght' 600; font-weight: 600;
  font-size: clamp(1.95rem, 4.1vw, 3rem); line-height: 1.07; letter-spacing: -.018em;
}
.scene .lede { margin: 0; max-width: 52ch; font-size: 1.05rem; line-height: 1.62; }
.scene[data-tone="night"] .lede { color: #AEB9C7; }
.scene[data-tone="day"] .lede { color: var(--day-muted); }
.scene .band-eyebrow { color: var(--amber); }
.scene[data-tone="day"] .band-eyebrow { color: #9A6B1E; }

/* Elementet ngrihen kur hyjne ne pamje - nje here, jo ne cdo levizje. */
.rise { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.is-in { opacity: 1; transform: none; }
.rise:nth-child(2) { transition-delay: .07s; }
.rise:nth-child(3) { transition-delay: .14s; }

/* ---- pjesa qe verteton: pyetja behet porosi ndersa levizet ---- */
.tf { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); gap: 0; align-items: center; margin-top: clamp(38px, 5vw, 62px); }
.tf-card {
  border: 1px solid var(--edge); border-radius: 14px; padding: 20px 22px;
  background: rgba(12, 17, 24, .72); backdrop-filter: blur(9px);
}
.tf-from .tf-who { font-family: var(--mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--steel); }
.tf-from p { margin: 10px 0 0; font-size: 1.02rem; line-height: 1.55; }
.tf-arrow { position: relative; height: 2px; background: var(--edge); }
.tf-arrow b {
  position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, var(--amber), var(--cyan));
  box-shadow: 0 0 14px rgba(111, 233, 255, .55);
}
.tf-to { display: grid; gap: 10px; }
.tf-row {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: baseline;
  opacity: calc(var(--q, 0)); transform: translateX(calc((1 - var(--q, 0)) * -22px));
}
.tf-row dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.tf-row dd { margin: 0; font-size: .98rem; }
.tf-done {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--edge);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mint, #75FBD8); opacity: calc(var(--q, 0));
}

/* ---- tri gjerat qe di ---- */
.knows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(38px, 5vw, 58px); }
.knows article { padding: 22px; border: 1px solid var(--edge); border-radius: 14px; background: rgba(12, 17, 24, .6); }
.knows b { display: block; margin-bottom: 9px; font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.knows p { margin: 0; color: #AEB9C7; font-size: .95rem; line-height: 1.6; }

/* ---- momenti i njeriut: e vetmja ngjyre e ngrohte ---- */
.stop-note {
  margin-top: clamp(30px, 4vw, 46px); padding-left: 20px;
  border-left: 2px solid var(--amber); max-width: 46ch;
  font-size: 1.05rem; line-height: 1.6; color: #D6DEE8;
}

@media (max-width: 860px) {
  .tf { grid-template-columns: 1fr; gap: 18px; }
  .tf-arrow { height: 2px; width: 60%; margin: 0 auto; }
  .knows { grid-template-columns: 1fr; }
  .scene-inner { padding: clamp(72px, 12vw, 104px) 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .scene-media { transform: none; }
  .tf-row { opacity: 1; transform: none; }
  .tf-done { opacity: 1; }
}

/* ------------------------------------------------ regjistri i nates ------ */
/* sticky vdes nen overflow:clip te .scene - ky seksion e heq trashegimine. */
.ledger-wrap { height: 280vh; overflow: visible; }
/* Motori i vendos body-t overflow-x:hidden - kjo e ben body nje scroll-container dhe
   e vret position:sticky. "clip" e pret njesoj ne ane, por nuk krijon container. */
body { overflow-x: clip !important; overflow-y: visible !important; }
.ledger-pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--night); }
.ledger-inner { padding-top: 0; padding-bottom: 0; width: 100%; }
.lg-clock { font-family: var(--mono); color: var(--amber); font-size: .92em; letter-spacing: .04em; }
.lg-dots { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 8px; max-width: 640px; margin: clamp(26px, 4vw, 44px) 0; }
.lg-dots i { aspect-ratio: 1; border-radius: 50%; background: rgba(242, 245, 249, .09); transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.lg-dots i.on { background: var(--cyan); box-shadow: 0 0 10px rgba(111, 233, 255, .55); }
.lg-dots i.amber.on { background: var(--amber); box-shadow: 0 0 10px rgba(242, 178, 76, .6); }
.lg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 34px); margin: 0 0 22px; max-width: 640px; }
.lg-stats div { border-top: 1px solid var(--edge); padding-top: 12px; }
.lg-stats dt { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--steel); }
.lg-stats dd { margin: 6px 0 0; font-family: var(--mono); font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--chrome); }
@media (max-width: 700px) { .lg-dots { grid-template-columns: repeat(12, minmax(0, 1fr)); } .lg-stats { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .lg-dots i { transition: none; } }

/* Butonat mbi sfond te erret (seksioni i agimit). */
.scene[data-tone="night"] .btn-day { background: var(--chrome); color: var(--night); }
.scene[data-tone="night"] .btn-quiet { border-color: rgba(242, 245, 249, .4); color: var(--chrome); }
.scene[data-tone="night"] .close-lead { color: #C3CCD8; }


/* ============================================ kalimi nga hero te filmi ==== */
/* Laku dhe skena e pare jane i njejti plan ne dy caste te ndryshme; ndryshimi mes tyre
   dukej si nje kercim. Nje shperthim drite arrin kulmin pikerisht kur te dyja jane
   gjysme te dukshme - syri lexon nje ndricim, jo nje prerje. */
.handover-flare {
  position: fixed; inset: 0; z-index: 24; pointer-events: none; opacity: 0;
  background:
    radial-gradient(58% 42% at 50% 56%, rgba(255, 236, 200, .95) 0%, rgba(242, 178, 76, .42) 38%, rgba(242, 178, 76, 0) 72%),
    radial-gradient(120% 90% at 50% 60%, rgba(111, 233, 255, .22) 0%, rgba(111, 233, 255, 0) 70%);
  mix-blend-mode: screen;
  will-change: opacity;
}
.hero-loop { transition: none; }

/* ================================================= mengjesi: regjistri ==== */
/* Horizonti ngrihet dhe ndricohet me scroll-in, dhe permbledhja shkruhet rresht pas
   rreshti pergjate nje shine. Me pare ky seksion ishte nje liste e sheshte ne bosh. */
/* Der Morgen nimmt die volle Breite. Text IM Bild, weiss, mit Verlaeufen an beiden
   Kanten - so fliesst die helle Schicht hinein und das Papier wieder heraus. */
.dawn {
  position: relative; z-index: 40; overflow: clip;
  height: clamp(300px, 46vh, 520px); background: var(--night);
}
.dawn img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  transform: translate3d(0, calc((1 - var(--p, .5)) * -5%), 0) scale(1.1);
  will-change: transform;
}
.dawn::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--day) 0%, rgba(245, 242, 236, .55) 12%, rgba(245, 242, 236, 0) 34%),
    linear-gradient(0deg, var(--day) 0%, rgba(245, 242, 236, .5) 14%, rgba(245, 242, 236, 0) 38%);
}
.dawn::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 12, 20, .55) 0%, rgba(8, 12, 20, .16) 42%, rgba(8, 12, 20, 0) 70%);
}
.dawn-copy {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(38px, 7vh, 74px);
  max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px);
  color: #FFFFFF;
}
.dawn-time {
  display: block; font-family: var(--mono); font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1; letter-spacing: .01em; text-shadow: 0 2px 26px rgba(6, 8, 12, .6);
}
.dawn-line {
  margin: 10px 0 0; max-width: 30ch; font-size: clamp(1rem, 1.7vw, 1.22rem); line-height: 1.5;
  color: rgba(255, 255, 255, .92); text-shadow: 0 1px 18px rgba(6, 8, 12, .7);
}
.band-lead { padding-bottom: clamp(30px, 4vw, 46px); }
.aftermath-2 { margin-top: 0; }
.arrival-lede { margin-bottom: clamp(26px, 3.4vw, 38px); }

.spec-rail { position: relative; padding-left: 34px; }
.spec-rail-line {
  position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: rgba(16, 20, 25, .12); overflow: hidden;
}
.spec-rail-line::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%;
  height: calc(var(--p, 0) * 160%);
  background: linear-gradient(180deg, #9A6B1E, #F2B24C);
}
.spec-rail .spec-row { position: relative; }
.spec-rail .spec-row::before {
  content: ''; position: absolute; left: -34px; top: 27px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--day); border: 2px solid rgba(16, 20, 25, .22);
  transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.spec-rail .spec-row.is-in::before {
  background: #F2B24C; border-color: #9A6B1E; box-shadow: 0 0 0 4px rgba(242, 178, 76, .18);
}

/* ============================================== lidhja qe vizatohet ======= */
.scene-connect .connect-media {
  inset: 0; opacity: .12;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 78%);
}
.scene-connect .connect-media img { object-fit: cover; }
.trust-rail {
  position: relative; height: 2px; margin: clamp(28px, 4vw, 44px) 0 clamp(22px, 3vw, 34px);
  background: rgba(16, 20, 25, .14); border-radius: 2px;
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: center;
}
.trust-rail-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--r, 0) * 100%);
  background: linear-gradient(90deg, #9A6B1E, #F2B24C);
  border-radius: 2px;
}
.trust-rail b {
  position: relative; justify-self: start; width: 13px; height: 13px; border-radius: 50%;
  background: var(--day); border: 2px solid rgba(16, 20, 25, .22);
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.trust-rail b:nth-child(3) { justify-self: center; }
.trust-rail b:last-child { justify-self: end; }
.trust-rail b.on { background: #F2B24C; border-color: #9A6B1E; box-shadow: 0 0 0 5px rgba(242, 178, 76, .16); }

/* ================================================= mbyllja e faqes ======== */
/* Titulli, teksti dhe butonat rreshtohen ne te njejten bosht. Me pare titulli kishte
   max-width nga .scene h2 pa qender, keshtu qe teksti dukej i zhvendosur majtas. */
.scene .band-close { text-align: center; }
.scene .band-close h2 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.scene .band-close .close-lead { max-width: 46ch; margin: 0 auto clamp(26px, 3.4vw, 38px); }
.scene .band-close .band-eyebrow { margin-bottom: 14px; }
.scene .band-close .close-actions { justify-content: center; }

/* ====================================================== telefoni ========== */
@media (max-width: 860px) {
  /* Skenat me te ulta: ne telefon nje seksion i vetem nuk duhet te zere tre ekrane. */
  .scene-inner { padding: clamp(64px, 15vw, 96px) 20px; }
  .scene h2 { font-size: clamp(1.62rem, 7vw, 2.1rem); max-width: 20ch; }
  .scene .lede { font-size: .98rem; }
  .band { padding: clamp(52px, 12vw, 76px) 20px; }

  /* Regjistri: 280vh eshte teper ne telefon - kalimi behet me i shkurter. */
  .ledger-wrap { height: 200vh; }
  .lg-stats { grid-template-columns: 1fr; gap: 12px; }
  .lg-stats dd { font-size: 1.7rem; }
  .lg-dots { gap: 6px; margin: 22px 0; }

  /* Shina e lidhjes bie vertikale bashke me kartat. */
  .trust-rail { display: none; }
  .trust-grid { gap: 18px; }
  .trust-grid article { padding-top: 16px; }

  /* Permbledhja: shina me e ngushte, pikat me te vogla. */
  .spec-rail { padding-left: 26px; }
  .spec-rail-line { left: 6px; }
  .spec-rail .spec-row::before { left: -26px; top: 24px; width: 9px; height: 9px; }
  .arrival-sky { height: 44%; }

  /* Butonat: gjere sa gishti, njeri poshte tjetrit. */
  .close-actions { flex-direction: column; align-items: stretch; }
  .btn-day, .btn-quiet { justify-content: center; min-height: 50px; }
  .scene .band-close h2 { max-width: none; }

  /* Fundfaqja: rreshta te qarte ne vend te nje rreshti te vetem te thyer. */
  .day-footer > div { flex-direction: column; align-items: flex-start; gap: 16px; padding: 34px 20px 40px; }
  .foot-links { margin-left: 0; gap: 4px 18px; }
  /* Objektivat e prekjes: 44px eshte minimumi qe nje gisht e godet me siguri.
     Linket e fundfaqes ishin 23px dhe thirrja lart 38px. */
  .foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .sw-topcta, .top-signin { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 420px) {
  .lg-dots { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .tf-card { padding: 16px 17px; }
  .tf-row { grid-template-columns: 92px minmax(0, 1fr); gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .handover-flare { display: none; }
  .arrival-sky, .spec-rail-line::after, .trust-rail-fill { transition: none; }
  .spec-rail .spec-row::before, .trust-rail b { transition: none; }
}


/* ------------------------------------------------ reichweia e aksesit ---- */
/* Nje premtim per akses vlen sa lista qe e ndjek. Prandaj lista qendron ketu, jo ne nje
   politike qe askush nuk e hap. */
.scope {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 36px); margin-top: clamp(34px, 4.5vw, 54px);
}
.scope-col { padding: 20px 22px; border-radius: 15px; border: 1px solid var(--day-edge); background: rgba(255, 255, 255, .45); }
.scope-head { margin: 0 0 12px; font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; }
.scope-yes .scope-head { color: #1E6F4A; }
.scope-no .scope-head { color: #8C3A2E; }
.scope ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.scope li { position: relative; padding-left: 26px; font-size: .95rem; line-height: 1.5; color: var(--day-ink); }
.scope li::before {
  position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.scope-yes li::before { content: '\2713'; background: rgba(30, 111, 74, .13); color: #1E6F4A; }
.scope-no li::before { content: '\2715'; background: rgba(140, 58, 46, .12); color: #8C3A2E; }
@media (max-width: 860px) {
  .scope { grid-template-columns: 1fr; gap: 14px; }
  .scope-col { padding: 16px 17px; }
  .dawn-band { height: clamp(120px, 20vh, 170px); }
}


/* ------------------------------------------- lidhja: karta qe ngrihen ---- */
/* Tri hapa qe vertet ndjekin njeri-tjetrin: kartat ngrihen dhe drejtohen ndersa
   lexuesi leviz, secila me vonesen e vet - keshtu del nje varg, jo nje ndezje. */
.tcard {
  position: relative; padding: 22px 22px 18px; border-radius: 16px;
  border: 1px solid var(--day-edge); background: rgba(255, 255, 255, .62);
  box-shadow: 0 calc(var(--t, 0) * 16px) calc(var(--t, 0) * 34px) rgba(16, 20, 25, calc(var(--t, 0) * .09));
  opacity: calc(.25 + var(--t, 0) * .75);
  transform: translateY(calc((1 - var(--t, 0)) * 30px)) scale(calc(.97 + var(--t, 0) * .03));
  will-change: transform, opacity;
}
.trust-grid { align-items: start; }
.tcard-no {
  display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
  color: #9A6B1E; opacity: calc(var(--t, 0) * .9); margin-bottom: 10px;
}
.tcard .trust-step { display: block; margin-bottom: 9px; font-size: .95rem; letter-spacing: .01em; text-transform: none; font-family: var(--body); font-weight: 600; color: var(--day-ink); }
.tcard p { margin: 0; }
.tcard-foot {
  display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--day-edge);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--day-muted); opacity: calc(var(--t, 0));
}
/* Die Zeilen der Reichweite schreiben sich nacheinander. */
.scope li { opacity: calc(.18 + var(--t, 0) * .82); transform: translateX(calc((1 - var(--t, 0)) * -14px)); }
.scope-col { backdrop-filter: blur(3px); }

@media (prefers-reduced-motion: reduce) {
  .tcard, .scope li { opacity: 1; transform: none; }
  .dawn img { transform: none; }
}
@media (max-width: 860px) {
  .dawn { height: clamp(240px, 40vh, 340px); }
  .dawn-copy { bottom: 26px; }
  .tcard { padding: 18px 18px 16px; }
}