@charset "UTF-8";
/* =========================================================================
   ORARI AAB — BALLINA PUBLIKE (landing) · një ekran i vetëm (2026-10-03)
   -------------------------------------------------------------------------
   Pa scroll: header / skena / footer brenda 100dvh (scroll vetëm < 560 px lartësi).
   Fontet lokale (Newsreader + Inter), ngjyrat e markës (navy #0e1c2e, #123a6b/#1b4f8f,
   qelibar #fbbf24 i ikonës) dhe katër ngjyrat e llojeve të orëve. Pa CDN, pa varësi.
   Ilustrimi: tabelë javore në 3D — orët zënë vendet, njëra përplaset, kontrolli e kap
   dhe e zhvendos; vija "tani" kalon nëpër ditë; kalendari sinkronizohet.
   Vetëm transform/opacity; ndalet kur faqja fshihet; statike me prefers-reduced-motion.
   ========================================================================= */

@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(../vendor/fonts/newsreader-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(../vendor/fonts/newsreader-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   Tokenat
   ---------------------------------------------------------------------- */
:root {
    color-scheme: light;
    --bg:        #f2f5f9;
    --bg-alt:    #e8edf4;
    --surface:   #ffffff;
    --ink:       #0e1c2e;
    --ink-2:     #2d3d52;
    --muted:     #4a5b71;
    --line:      #d6dee8;
    --accent:    #123a6b;
    --accent-2:  #1b4f8f;
    --ic-bg:     #e7eef7;
    --focus:     #1b4f8f;
    --glass:     rgba(255, 255, 255, .55);

    --navy:      #0e1c2e;
    --amber:     #fbbf24;
    --amber-ink: #8a5a00;
    --bad:       #e5484d;
    --ok:        #12a26b;

    --cat-l: #3b82f6;  /* ligjëratë */
    --cat-u: #7c5cf0;  /* ushtrime  */
    --cat-b: #0b8f5f;  /* laborator */
    --cat-s: #d97a06;  /* seminar   */

    /* Butoni kryesor */
    --cta-bg:   #123a6b;
    --cta-ink:  #ffffff;
    --cta-glow: rgba(18, 58, 107, .32);

    /* Tabela (ilustrimi) */
    --board-bg:   linear-gradient(155deg, rgba(255, 255, 255, .96) 0%, rgba(239, 244, 250, .9) 100%);
    --board-edge: rgba(14, 28, 46, .09);
    --board-sh:   0 50px 90px -40px rgba(14, 28, 46, .45), 0 24px 50px -30px rgba(18, 58, 107, .35);
    --cell-line:  rgba(14, 28, 46, .07);
    --blk-a:      24%;
    --blk-b:      10%;
    --chip-bg:    #0e1c2e;
    --chip-ink:   #ffffff;

    /* Sfondi */
    --sky-1: rgba(27, 79, 143, .22);
    --sky-2: rgba(251, 191, 36, .2);
    --sky-3: rgba(124, 92, 240, .13);
    --grid-line: rgba(14, 28, 46, .055);

    --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-snap: cubic-bezier(.34, 1.45, .5, 1);
    --r-xl: 20px;
    --padx: max(clamp(16px, 4vw, 56px), calc((100% - 1440px) / 2));
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg:       #0a1422;
        --bg-alt:   #13233a;
        --surface:  #111f33;
        --ink:      #eaf0f6;
        --ink-2:    #cbd6e3;
        --muted:    #9fb0c4;
        --line:     #263a54;
        --accent:   #6ea8f0;
        --accent-2: #97c2f7;
        --ic-bg:    rgba(110, 168, 240, .14);
        --focus:    #fbbf24;
        --glass:    rgba(255, 255, 255, .04);
        --amber-ink: #fbbf24;
        --cta-bg:   #fbbf24;
        --cta-ink:  #0e1c2e;
        --cta-glow: rgba(251, 191, 36, .28);
        --board-bg:   linear-gradient(155deg, rgba(27, 45, 70, .92) 0%, rgba(14, 28, 46, .9) 100%);
        --board-edge: rgba(255, 255, 255, .09);
        --board-sh:   0 50px 100px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03);
        --cell-line:  rgba(255, 255, 255, .06);
        --blk-a:      34%;
        --blk-b:      14%;
        --chip-bg:    #fbbf24;
        --chip-ink:   #0e1c2e;
        --sky-1: rgba(27, 79, 143, .55);
        --sky-2: rgba(251, 191, 36, .09);
        --sky-3: rgba(124, 92, 240, .22);
        --grid-line: rgba(255, 255, 255, .04);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:       #0a1422;
    --bg-alt:   #13233a;
    --surface:  #111f33;
    --ink:      #eaf0f6;
    --ink-2:    #cbd6e3;
    --muted:    #9fb0c4;
    --line:     #263a54;
    --accent:   #6ea8f0;
    --accent-2: #97c2f7;
    --ic-bg:    rgba(110, 168, 240, .14);
    --focus:    #fbbf24;
    --glass:    rgba(255, 255, 255, .04);
    --amber-ink: #fbbf24;
    --cta-bg:   #fbbf24;
    --cta-ink:  #0e1c2e;
    --cta-glow: rgba(251, 191, 36, .28);
    --board-bg:   linear-gradient(155deg, rgba(27, 45, 70, .92) 0%, rgba(14, 28, 46, .9) 100%);
    --board-edge: rgba(255, 255, 255, .09);
    --board-sh:   0 50px 100px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03);
    --cell-line:  rgba(255, 255, 255, .06);
    --blk-a:      34%;
    --blk-b:      14%;
    --chip-bg:    #fbbf24;
    --chip-ink:   #0e1c2e;
    --sky-1: rgba(27, 79, 143, .55);
    --sky-2: rgba(251, 191, 36, .09);
    --sky-3: rgba(124, 92, 240, .22);
    --grid-line: rgba(255, 255, 255, .04);
}

/* -------------------------------------------------------------------------
   Baza — një ekran i vetëm: header / skena / footer brenda 100dvh
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body.lp {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.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;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
.ic { width: 20px; height: 20px; flex: none; }

.lp-skip {
    position: absolute; left: 16px; top: -64px; z-index: 100;
    padding: 10px 16px; border-radius: 10px;
    background: #fff; color: var(--navy); font-weight: 600; text-decoration: none;
    transition: top .2s;
}
.lp-skip:focus { top: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }

/* -------------------------------------------------------------------------
   Sfondi: aurora e lehtë + rrjetë e maskuar (vetëm transform, pa blur filter)
   ---------------------------------------------------------------------- */
.lp-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lp-sky span { position: absolute; border-radius: 50%; }
.lp-sky span:nth-child(1) { width: 70vmax; height: 70vmax; right: -18vmax; top: -30vmax; background: radial-gradient(circle, var(--sky-1), transparent 62%); }
.lp-sky span:nth-child(2) { width: 46vmax; height: 46vmax; right: 18vw; bottom: -26vmax; background: radial-gradient(circle, var(--sky-2), transparent 64%); }
.lp-sky span:nth-child(3) { width: 50vmax; height: 50vmax; left: -22vmax; top: 20vh; background: radial-gradient(circle, var(--sky-3), transparent 64%); }
.lp-sky-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 72% 45%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 70% at 72% 45%, #000 0%, transparent 75%);
}

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */
.lp-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: clamp(10px, 2.4vh, 26px) var(--padx) 0;
}
.lp-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.lp-mark { width: clamp(34px, 5vh, 40px); height: clamp(34px, 5vh, 40px); filter: drop-shadow(0 6px 14px rgba(18, 58, 107, .3)); }
.lp-brand-txt b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.lp-brand-txt small { display: block; font-size: .78rem; color: var(--muted); line-height: 1.3; }
.lp-actions { display: flex; align-items: center; gap: 10px; }
.lp-theme {
    width: 40px; height: 40px; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--glass); border: 1px solid var(--line);
    color: var(--ink-2); cursor: pointer;
    transition: background .2s, border-color .2s;
}
.lp-theme:hover { border-color: var(--muted); }
.lp-theme .ic { width: 18px; height: 18px; }
.lp-theme-light { display: none; }
:root[data-theme="dark"] .lp-theme-dark { display: none; }
:root[data-theme="dark"] .lp-theme-light { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lp-theme-dark { display: none; }
    :root:not([data-theme="light"]) .lp-theme-light { display: block; }
}

/* -------------------------------------------------------------------------
   Butonat
   ---------------------------------------------------------------------- */
.lp-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 0 24px; border-radius: 999px;
    font: 600 1rem/1 var(--font-ui); text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .2s, border-color .2s;
}
.lp-btn .ic { width: 18px; height: 18px; }
.lp-btn-sm { min-height: 40px; padding: 0 16px; font-size: .9rem; gap: 8px; }
.lp-btn-sm .ic { width: 16px; height: 16px; }
.lp-btn-quiet { background: var(--glass); border-color: var(--line); color: var(--ink); }
.lp-btn-quiet:hover { border-color: var(--muted); }
.lp-btn-main {
    min-height: clamp(48px, 6.6vh, 56px); padding: 0 clamp(26px, 3vw, 34px);
    font-size: 1.05rem; overflow: hidden; isolation: isolate;
    background: var(--cta-bg); color: var(--cta-ink);
    box-shadow: 0 14px 34px -10px var(--cta-glow), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.lp-btn-main::after {   /* shkëlqim që kalon vetëm kur kursori është mbi buton */
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
    transform: translateX(-120%);
}
.lp-btn-main:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px var(--cta-glow), inset 0 1px 0 rgba(255, 255, 255, .18); }
.lp-btn-main:hover::after { transform: translateX(120%); transition: transform .7s var(--ease-out); }

/* -------------------------------------------------------------------------
   Skena (telefon/tablet: tekst → ilustrim → veprimi; kompjuter: 2 kolona)
   ---------------------------------------------------------------------- */
.lp-stage {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "intro" "vis" "act";
    row-gap: clamp(10px, 2.2vh, 28px);
    padding: clamp(10px, 2.4vh, 28px) var(--padx) clamp(6px, 1.6vh, 20px);
}
.lp-intro { grid-area: intro; }
.lp-act   { grid-area: act; }
.lp-vis   { grid-area: vis; }

.lp-h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.9rem, min(8.4vw, 5.6vh), 3.6rem);
    line-height: 1.02;
    letter-spacing: -.024em;
    color: var(--ink);
}
.lp-h1 > span { display: block; }
.lp-h1-dot { color: var(--amber); }
.lp-lede {
    margin-top: clamp(8px, 1.6vh, 18px);
    max-width: 34em;
    font-size: clamp(.94rem, min(3.9vw, 2.3vh), 1.08rem);
    line-height: 1.5;
    color: var(--muted);
}

.lp-cta { display: flex; align-items: center; gap: 12px 18px; }
.lp-cta-note { max-width: 26em; font-size: .84rem; line-height: 1.4; color: var(--muted); }

.lp-hl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1.6vh, 18px) clamp(14px, 2.4vw, 32px);
    margin-top: clamp(12px, 2.4vh, 34px);
}
.lp-hl li { position: relative; padding-left: 14px; min-width: 0; }
.lp-hl li::before {   /* shiriti me ngjyrën e një lloji ore, si te tabela */
    content: ''; position: absolute; left: 0; top: .15em; bottom: .15em;
    width: 3px; border-radius: 3px; background: var(--k);
}
.lp-hl-l { --k: var(--cat-l); }
.lp-hl-u { --k: var(--cat-u); }
.lp-hl-b { --k: var(--cat-b); }
.lp-hl-s { --k: var(--cat-s); }
.lp-hl b { display: block; font-size: .93rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.lp-hl span { display: block; margin-top: 2px; font-size: .82rem; line-height: 1.35; color: var(--muted); }

/* -------------------------------------------------------------------------
   Ilustrimi: tabela javore e anuar në 3D
   ---------------------------------------------------------------------- */
.lp-vis {
    --ar: 1.7;
    min-height: 0;
    position: relative;
    container-type: size;
    display: grid; place-items: center;
    perspective: 1700px;
}
.lp-tilt {
    --tx: 0; --ty: 0;
    width: min(96cqw, calc(86cqh * var(--ar)));
    transform-style: preserve-3d;
    transform: rotateX(calc(16deg + var(--tx) * 1deg)) rotateY(calc(-6deg + var(--ty) * 1deg)) rotateZ(1.5deg);
    transition: transform .9s var(--ease-out);
}
.lp-float { position: relative; transform-style: preserve-3d; }
.lp-board {
    position: relative;
    aspect-ratio: var(--ar);
    container-type: inline-size;
    display: flex; flex-direction: column;
    padding: 3.2cqi 3.6cqi 3.6cqi;
    border-radius: clamp(14px, 3cqi, 26px);
    background: var(--board-bg);
    border: 1px solid var(--board-edge);
    box-shadow: var(--board-sh);
}
.lp-board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2cqi; }
.lp-board-dots { display: flex; gap: max(4px, .9cqi); }
.lp-board-dots i { width: max(6px, 1.4cqi); height: max(6px, 1.4cqi); border-radius: 50%; background: var(--cell-line); box-shadow: inset 0 0 0 1px var(--board-edge); }
.lp-pill { display: grid; font-size: clamp(9px, 2.3cqi, 12.5px); font-weight: 600; }
.lp-pill > span {
    grid-area: 1 / 1; justify-self: end;
    display: inline-flex; align-items: center; gap: .5em;
    padding: .35em .9em; border-radius: 999px; white-space: nowrap;
}
.lp-pill > span::before { content: ''; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.lp-pill-idle { color: var(--muted); background: var(--cell-line); opacity: 0; }
.lp-pill-bad  { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); opacity: 0; }
.lp-pill-ok   { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }

.lp-days {
    --rail: 3.4cqi;
    display: grid; grid-template-columns: repeat(5, 1fr);
    margin-left: var(--rail); padding-bottom: 1.2cqi;
    font-size: clamp(8.5px, 2.2cqi, 12.5px); font-weight: 600; letter-spacing: .01em;
    color: var(--muted); text-align: center;
}
.lp-week {
    --rail: 3.4cqi;
    position: relative; flex: 1; min-height: 0;
    margin-left: var(--rail);
    border-radius: clamp(6px, 1.4cqi, 12px);
    box-shadow: inset 0 0 0 1px var(--cell-line);
    background-image:
        linear-gradient(to right, var(--cell-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--cell-line) 1px, transparent 1px);
    background-size: 20% calc(100% / 6);
}
.lp-week::before {   /* shenjat e orëve në të majtë (pa vlera) */
    content: ''; position: absolute; top: 0; bottom: 0; right: calc(100% + .9cqi);
    width: 1.6cqi;
    background: repeating-linear-gradient(to bottom, var(--muted) 0 1px, transparent 1px 16.6667%);
    opacity: .35;
}

.lp-blk, .lp-mover {
    position: absolute;
    width: 20%;
    padding: max(2px, .65cqi);
}
.lp-blk { left: calc(var(--c) * 20%); top: calc(var(--r) * 100% / 6); height: calc(var(--h) * 100% / 6); }
.lp-k-l { --k: var(--cat-l); }
.lp-k-u { --k: var(--cat-u); }
.lp-k-b { --k: var(--cat-b); }
.lp-k-s { --k: var(--cat-s); }
.lp-blk i, .lp-mover-in i {
    position: relative; display: block; height: 100%;
    border-radius: max(4px, 1.2cqi);
    background: linear-gradient(140deg, color-mix(in srgb, var(--k) var(--blk-a), transparent), color-mix(in srgb, var(--k) var(--blk-b), transparent));
    box-shadow: inset max(2px, .55cqi) 0 0 var(--k), inset 0 0 0 1px color-mix(in srgb, var(--k) 22%, transparent);
}
.lp-blk i::before, .lp-blk i::after, .lp-mover-in i::before, .lp-mover-in i::after {   /* "rreshta" abstraktë, pa tekst */
    content: ''; position: absolute; left: 18%; height: max(2px, .6cqi); border-radius: 2px;
    background: color-mix(in srgb, var(--k) 60%, transparent);
}
.lp-blk i::before, .lp-mover-in i::before { top: max(5px, 1.6cqi); width: 56%; }
.lp-blk i::after,  .lp-mover-in i::after  { top: max(10px, 3.2cqi); width: 34%; opacity: .6; }
.lp-blk-hit::after {   /* ora e zënë: ndizet kur ndodh përplasja */
    content: ''; position: absolute; inset: max(2px, .65cqi);
    border-radius: max(4px, 1.2cqi);
    box-shadow: 0 0 0 2px var(--bad), 0 0 22px color-mix(in srgb, var(--bad) 55%, transparent);
    opacity: 0;
}

/* Ora e re. Gjendja statike (pa lëvizje) = rezultati: e vendosur te vendi i lirë (kolona 1, rreshti 4). */
.lp-mover {
    --k: var(--cat-l);
    left: 0; top: 0; height: calc(100% / 6); z-index: 3;
    transform: translate(100%, 400%);
}
.lp-mover-in { position: relative; display: block; height: 100%; }
.lp-mover-in i { box-shadow: inset max(2px, .55cqi) 0 0 var(--k), inset 0 0 0 1px color-mix(in srgb, var(--k) 35%, transparent), 0 12px 24px -10px rgba(14, 28, 46, .55); }
.lp-mv-bad, .lp-mv-ok {
    position: absolute; inset: 0; border-radius: max(4px, 1.2cqi);
}
.lp-mv-bad { box-shadow: 0 0 0 2px var(--bad); background: color-mix(in srgb, var(--bad) 22%, transparent); opacity: 0; }
.lp-mv-ok  { box-shadow: 0 0 0 2px var(--ok), 0 0 18px color-mix(in srgb, var(--ok) 45%, transparent); display: grid; place-items: center end; padding-right: 8%; color: var(--ok); }
.lp-mv-ok .ic { width: clamp(10px, 3cqi, 22px); height: clamp(10px, 3cqi, 22px); stroke-width: 2.6; }

/* Vija "tani" */
.lp-now { position: absolute; inset: 0 0 auto calc(-1 * var(--rail)); height: 100%; z-index: 4; pointer-events: none; transform: translateY(42%); }
.lp-now i {
    position: absolute; top: 0; left: 0; right: 0; height: 2px; margin-top: -1px;
    background: linear-gradient(90deg, var(--amber), color-mix(in srgb, var(--amber) 15%, transparent));
    box-shadow: 0 0 10px color-mix(in srgb, var(--amber) 70%, transparent);
}
.lp-now i::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: max(8px, 1.8cqi); height: max(8px, 1.8cqi); margin-top: calc(max(8px, 1.8cqi) / -2);
    border-radius: 50%; background: var(--amber);
    box-shadow: 0 0 0 max(3px, .7cqi) color-mix(in srgb, var(--amber) 30%, transparent);
}

/* Sinkronizimi me kalendarin (pluskon pasi ora gjen vendin) */
.lp-sync {
    position: absolute; right: -2.4%; bottom: -5%;
    display: inline-flex; align-items: center; gap: .45em;
    padding: .55em 1em .55em .8em; border-radius: 999px;
    font-size: clamp(10px, 1.9cqw, 13px); font-weight: 700; letter-spacing: .02em;
    background: var(--chip-bg); color: var(--chip-ink);
    box-shadow: 0 18px 34px -14px rgba(14, 28, 46, .6);
    transform: translateZ(60px);
}
.lp-sync .ic { width: 1.35em; height: 1.35em; }
.lp-sync-ring {
    position: absolute; inset: 0; border-radius: inherit;
    box-shadow: 0 0 0 2px var(--amber);
    opacity: 0;
}

/* -------------------------------------------------------------------------
   Footer (një rresht brenda ekranit)
   ---------------------------------------------------------------------- */
.lp-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 4px 20px;
    padding: clamp(6px, 1.4vh, 16px) var(--padx) max(clamp(8px, 2vh, 22px), env(safe-area-inset-bottom));
    font-size: .82rem; color: var(--muted);
}
.lp-foot-org a { margin-left: .45em; color: var(--ink-2); font-weight: 500; text-underline-offset: 3px; }
.lp-foot-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin-right: -8px; }
.lp-foot-nav > a, .lp-more summary {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 32px; padding: 0 8px; border-radius: 8px;
    color: var(--muted); text-decoration: none; cursor: pointer;
}
.lp-foot-nav > a:hover, .lp-more summary:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lp-more { position: relative; }
.lp-more summary { list-style: none; }
.lp-more summary::-webkit-details-marker { display: none; }
.lp-more summary .ic { width: 14px; height: 14px; transition: transform .2s; }
.lp-more[open] summary { color: var(--ink); }
.lp-more[open] summary .ic { transform: rotate(180deg); }
.lp-more-list {
    position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30;
    min-width: 220px; padding: 6px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 24px 48px -16px rgba(14, 28, 46, .4);
}
.lp-more-list a {
    display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 9px;
    color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.lp-more-list a:hover { background: var(--bg-alt); }

/* -------------------------------------------------------------------------
   Përshtatja
   ---------------------------------------------------------------------- */
/* Telefon i ulët: vetëm titujt e veçorive */
@media (max-width: 899px) and (max-height: 760px) {
    .lp-hl span { display: none; }
}
@media (max-width: 899px) and (max-height: 700px) {
    .lp-cta-note { font-size: .78rem; }
}
@media (max-width: 380px) {
    .lp-brand-txt small { display: none; }
}
@media (max-width: 599px) and (min-height: 800px) {
    .lp-vis { --ar: 1.5; }
}
/* Tablet vertikal: ilustrim më i lartë */
@media (min-width: 600px) and (max-width: 899px) {
    .lp-vis { --ar: 1.45; }
    .lp-h1 { font-size: clamp(2.4rem, min(7.4vw, 5.6vh), 4rem); }
}
/* Kompjuter / tablet horizontal: dy kolona */
@media (min-width: 900px) {
    .lp-stage {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        grid-template-rows: 1fr auto auto 1fr;
        grid-template-areas: ". vis" "intro vis" "act vis" ". vis";
        column-gap: clamp(28px, 5vw, 96px);
        row-gap: 0;
    }
    .lp-act { margin-top: clamp(20px, 4vh, 44px); }
    .lp-h1 { font-size: clamp(2.6rem, min(5.1vw, 8.4vh), 5.4rem); }
    .lp-lede { font-size: clamp(1rem, min(1.2vw, 2.3vh), 1.22rem); }
    .lp-cta-note { font-size: .88rem; }
    .lp-hl b { font-size: clamp(.93rem, 1.05vw, 1.02rem); }
    .lp-hl span { font-size: clamp(.82rem, .9vw, .9rem); }
    .lp-vis { --ar: 1.16; }
    .lp-tilt { transform: rotateX(calc(14deg + var(--tx) * 1deg)) rotateY(calc(-18deg + var(--ty) * 1deg)) rotateZ(3deg); }
    .lp-sync { right: -5%; bottom: -4%; }
}
/* Ekran shumë i ulët (< 560 px): lejohet scroll-i */
@media (max-height: 559px) {
    body.lp { height: auto; min-height: 100vh; min-height: 100dvh; }
    .lp-vis { min-height: 240px; }
    .lp-stage { grid-template-rows: auto 240px auto; }
}
@media (max-height: 559px) and (min-width: 900px) {
    .lp-stage { grid-template-rows: 1fr auto auto 1fr; padding-block: 24px; }
    .lp-vis { min-height: 320px; }
}

/* -------------------------------------------------------------------------
   Lëvizja (vetëm kur lejohet). Pa lëvizje mbetet gjendja përfundimtare statike.
   Cikli i ilustrimit: 10 s — ora vjen, përplaset, kapet, zhvendoset, sinkronizohet.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .lp-sky span:nth-child(1) { animation: lp-drift1 28s ease-in-out infinite alternate; }
    .lp-sky span:nth-child(2) { animation: lp-drift2 34s ease-in-out infinite alternate; }
    .lp-sky span:nth-child(3) { animation: lp-drift3 40s ease-in-out infinite alternate; }

    /* Hyrja e orkestruar */
    .lp-header, .lp-h1 > span, .lp-lede, .lp-cta, .lp-hl li, .lp-footer { animation: lp-rise .9s var(--ease-out) both; }
    .lp-header { animation-name: lp-fade; animation-duration: .6s; }
    .lp-h1-a { animation-delay: .08s; }
    .lp-h1-b { animation-delay: .2s; }
    .lp-lede { animation-delay: .34s; }
    .lp-cta  { animation-delay: .48s; }
    .lp-hl li:nth-child(1) { animation-delay: .6s; }
    .lp-hl li:nth-child(2) { animation-delay: .68s; }
    .lp-hl li:nth-child(3) { animation-delay: .76s; }
    .lp-hl li:nth-child(4) { animation-delay: .84s; }
    .lp-footer { animation-name: lp-fade; animation-delay: .9s; }

    .lp-board { animation: lp-board-in 1.2s var(--ease-out) .15s both; }
    .lp-float { animation: lp-bob 9s ease-in-out 1.6s infinite; }
    .lp-blk { animation: lp-snap .7s var(--ease-snap) both; animation-delay: calc(.55s + var(--i) * 70ms); }
    .lp-sync { animation: lp-fade .6s ease-out 1.8s both; }

    .lp-mover     { animation: lp-move 10s 2.2s infinite both; }
    .lp-mover-in  { animation: lp-shake 10s 2.2s infinite both; }
    .lp-mv-bad, .lp-blk-hit::after, .lp-pill-bad { animation: lp-bad 10s 2.2s infinite both; }
    .lp-mv-ok, .lp-pill-ok { animation: lp-ok 10s 2.2s infinite both; }
    .lp-pill-idle { animation: lp-idle 10s 2.2s infinite both; }
    .lp-sync-ring { animation: lp-ring 10s 2.2s infinite both; }
    .lp-sync-ring + .lp-sync-ring { animation-delay: 2.55s; }
    .lp-now { animation: lp-sweep 16s linear 1.4s infinite both; }

    .lp-more[open] .lp-more-list { animation: lp-pop .22s var(--ease-out); }
}
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lp-pop  { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lp-drift1 { to { transform: translate(-10vw, 8vh) scale(1.1); } }
@keyframes lp-drift2 { to { transform: translate(-14vw, -6vh) scale(.92); } }
@keyframes lp-drift3 { to { transform: translate(10vw, -8vh) scale(1.15); } }
@keyframes lp-board-in {
    from { opacity: 0; transform: translate3d(0, 10%, -160px) rotateX(24deg); }
    to   { opacity: 1; transform: none; }
}
@keyframes lp-bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -1.4%, 0); } }
@keyframes lp-snap {
    from { opacity: 0; transform: translate3d(0, -60%, 0) scale(1.18); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: none; }
}
@keyframes lp-move {
    0%   { opacity: 0; transform: translate(300%, -170%) scale(1.2); animation-timing-function: cubic-bezier(.2, .8, .25, 1); }
    6%   { opacity: 1; }
    20%  { transform: translate(300%, 200%) scale(1); }
    38%  { transform: translate(300%, 200%) scale(1); animation-timing-function: var(--ease-out); }
    41%  { transform: translate(300%, 200%) scale(1.08); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    55%  { transform: translate(100%, 400%) scale(1.08); animation-timing-function: var(--ease-snap); }
    59%  { transform: translate(100%, 400%) scale(1); }
    86%  { opacity: 1; transform: translate(100%, 400%) scale(1); }
    93%  { opacity: 0; transform: translate(100%, 400%) scale(.94); }
    100% { opacity: 0; transform: translate(300%, -170%) scale(1.2); }
}
@keyframes lp-shake {
    0%, 20% { transform: none; }
    22% { transform: translateX(-5%); }
    24% { transform: translateX(5%); }
    26% { transform: translateX(-4%); }
    28% { transform: translateX(3%); }
    30%, 100% { transform: none; }
}
@keyframes lp-bad  { 0%, 19% { opacity: 0; } 21%, 48% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes lp-ok   { 0%, 55% { opacity: 0; } 59%, 85% { opacity: 1; } 91%, 100% { opacity: 0; } }
@keyframes lp-idle { 0%, 18% { opacity: 1; } 20%, 90% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes lp-ring {
    0%, 59% { opacity: 0; transform: scale(1); }
    61%     { opacity: .9; transform: scale(1); }
    78%     { opacity: 0; transform: scale(1.6, 2.2); }
    100%    { opacity: 0; transform: scale(1.6, 2.2); }
}
@keyframes lp-sweep {
    0%   { opacity: 0; transform: translateY(0); }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(100%); }
}

/* Faqja e fshehur ose dritarja e kyçjes e hapur: lëvizja ndalet. */
html.lp-paused .lp-stage *, html.lp-paused .lp-stage *::before, html.lp-paused .lp-stage *::after,
html.lp-paused .lp-sky span { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    .lp-btn, .lp-tilt, .lp-theme { transition: none; }
    .lp-btn-main:hover, .lp-btn-main:hover::after { transform: none; }
}

@media print {
    .lp-sky, .lp-vis, .lp-theme { display: none; }
    body.lp { height: auto; }
}


/* -------------------------------------------------------------------------
   Kyçja — modal mbi ballinë (2026-10-03)
   Me JS: <dialog> me showModal() (shtresa e sipërme, ::backdrop, fokusi brenda).
   Pa JS (ose pa mbështetje për <dialog>): "/?login=1" e shfaq dritaren nga
   serveri me rregullin e fallback-ut më poshtë.
   ---------------------------------------------------------------------- */
:root {
    --on-accent:  #ffffff;
    --field-bg:   #ffffff;
    --err-bg:     #fdf0f0;
    --err-line:   #f1c4c4;
    --err-ink:    #8f1d1d;
    --info-bg:    #eef3fa;
    --info-line:  #cfdcee;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --on-accent: #0b1420;
        --field-bg:  #0b1420;
        --err-bg:    rgba(239, 68, 68, .12);
        --err-line:  rgba(248, 113, 113, .4);
        --err-ink:   #fecaca;
        --info-bg:   rgba(110, 168, 240, .1);
        --info-line: rgba(110, 168, 240, .3);
    }
}
:root[data-theme="dark"] {
    --on-accent: #0b1420;
    --field-bg:  #0b1420;
    --err-bg:    rgba(239, 68, 68, .12);
    --err-line:  rgba(248, 113, 113, .4);
    --err-ink:   #fecaca;
    --info-bg:   rgba(110, 168, 240, .1);
    --info-line: rgba(110, 168, 240, .3);
}

html.lp-modal-open { overflow: hidden; }

.lp-modal {
    width: calc(100% - 32px);
    max-width: 440px;
    max-height: calc(100% - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-xl);
    background: transparent;
    color: var(--ink);
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: 0 24px 64px rgba(10, 20, 34, .35);
}
.lp-modal::backdrop {
    background: rgba(10, 20, 34, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
/* Fallback pa JS: dritarja e hapur nga serveri shfaqet si mbulesë e fiksuar. */
html:not(.lp-js) .lp-modal[data-autoopen] {
    display: block;
    position: fixed; inset: 0; z-index: 200;
    height: fit-content;
    box-shadow: 0 0 0 100vmax rgba(10, 20, 34, .62), 0 24px 64px rgba(10, 20, 34, .35);
}

.lp-modal-card {
    position: relative;
    padding: clamp(22px, 5vw, 34px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
}
@media (prefers-reduced-motion: no-preference) {
    .lp-modal[open] .lp-modal-card { animation: lp-modal-in .32s var(--ease-out); }
    .lp-modal[open]::backdrop { animation: lp-fade-in .25s ease-out; }
}
@keyframes lp-modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lp-fade-in { from { opacity: 0; } to { opacity: 1; } }

.lp-modal-x {
    position: absolute; top: 12px; right: 12px;
    width: 40px; height: 40px; border-radius: 999px;
    display: grid; place-items: center;
    color: var(--muted); text-decoration: none;
    transition: background .2s, color .2s;
}
.lp-modal-x:hover { background: var(--bg-alt); color: var(--ink); }
.lp-modal-x .ic { width: 20px; height: 20px; }

.lp-modal-head { padding-right: 36px; margin-bottom: 18px; }
.lp-modal-ic {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--ic-bg); color: var(--accent);
    margin-bottom: 14px;
}
.lp-modal-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4vw, 2rem); font-weight: 500; line-height: 1.15;
    letter-spacing: -.01em;
}
.lp-modal-head p { margin-top: 6px; color: var(--muted); font-size: .95rem; }

.lp-modal-msg:empty { display: none; }
.lp-modal-msg { margin-bottom: 16px; }
.lp-alert {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; border-radius: 12px; border: 1px solid;
    font-size: .92rem; line-height: 1.45;
}
.lp-alert .ic { width: 18px; height: 18px; margin-top: 1px; }
.lp-alert-error { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); }
.lp-alert-info  { background: var(--info-bg); border-color: var(--info-line); color: var(--ink-2); }

.lp-login { display: grid; gap: 16px; }
.lp-field label { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.lp-input {
    display: block; width: 100%; min-height: 48px;
    padding: 0 14px;
    font: 400 1rem/1.2 var(--font-ui);   /* ≥16px: pa zmadhim automatik në iOS */
    color: var(--ink); background: var(--field-bg);
    border: 1px solid var(--line); border-radius: 12px;
    transition: border-color .2s, box-shadow .2s;
}
.lp-input:hover { border-color: var(--muted); }
.lp-input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent); }
.lp-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 12px; }
.lp-input[aria-invalid="true"] { border-color: var(--err-line); }
.lp-pass { position: relative; }
.lp-pass .lp-input { padding-right: 52px; }
.lp-pass-toggle {
    position: absolute; top: 4px; right: 4px;
    width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center;
    background: transparent; border: 0; color: var(--muted); cursor: pointer;
}
.lp-pass-toggle:hover { color: var(--ink); background: var(--bg-alt); }
.lp-pass-toggle[hidden] { display: none; }
.lp-pass-toggle .ic { width: 20px; height: 20px; }
.lp-eye-off { display: none; }
.lp-pass-toggle[aria-pressed="true"] .lp-eye { display: none; }
.lp-pass-toggle[aria-pressed="true"] .lp-eye-off { display: block; }

.lp-btn-primary {
    width: 100%; margin-top: 4px;
    background: var(--accent); color: var(--on-accent);
    box-shadow: 0 10px 24px rgba(18, 58, 107, .22);
}
.lp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(18, 58, 107, .3); }
.lp-btn-primary:disabled { cursor: progress; opacity: .85; transform: none; }
.lp-spin {
    display: none; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: lp-spin .8s linear infinite;
}
.lp-login-submit[aria-busy="true"] .lp-spin { display: inline-block; }
@keyframes lp-spin { to { transform: rotate(360deg); } }

.lp-modal-note { margin-top: 18px; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.lp-modal-legal { margin-top: 8px; font-size: .8rem; color: var(--muted); }
.lp-modal-legal a { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .lp-spin { animation-duration: 2s; }
    .lp-btn-primary:hover { transform: none; }
}
@media print { .lp-modal { display: none !important; } }