/* Shtresa vizuale dhe lëvizja. Çdo gjë që fsheh përmbajtje është nën html.motion-ready. */
:root { --dawn-1: #2b7bb9; --dawn-2: #1f9bb5; --dawn-3: #4fb286; --dawn-4: #f2a93b; --dawn-5: #ffc233; }
body { overflow-x: clip; }

/* Kreu */
.site-header { background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: none; transition: box-shadow .3s var(--ease); }
.site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(11,42,71,.5); }
.scroll-line { height: 3px; background: var(--line); overflow: hidden; }
.scroll-line i { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--blue), var(--dawn-2), var(--sun)); }
.main-nav a.active { color: var(--blue); box-shadow: inset 0 -2px 0 var(--sun); }

/* Butonat */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn:hover::after { transform: translateX(120%); }
.btn:hover { translate: 0 -2px; box-shadow: 0 14px 26px -14px rgba(11,42,71,.7); }
.btn { transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), translate .3s var(--ease), box-shadow .3s var(--ease); }
.btn .i { transition: transform .3s var(--ease); }
.btn:hover > .i:last-child { transform: translateX(3px); }
.btn-primary { background: linear-gradient(135deg, #1668a8, var(--blue)); }
.btn-accent { background: linear-gradient(135deg, #ffd768, var(--sun)); }

/* Hero */
.hero { background: linear-gradient(180deg, #071c31 0%, #0b2a47 42%, #114a78 82%, #2a6d9a 100%); padding-bottom: 104px; }
.hero::before { inset: auto -20% -38% -20%; height: 78%; background: radial-gradient(closest-side, rgba(255,194,51,.34), rgba(255,194,51,.08) 58%, transparent); }
.hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 20%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 30% 9%, rgba(255,255,255,.45), transparent), radial-gradient(1.5px 1.5px at 62% 15%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 84% 7%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 47% 27%, rgba(255,255,255,.3), transparent); pointer-events: none; }
.hero-grid { z-index: 1; }
.hero h1 em { background: linear-gradient(95deg, #ffe08a, var(--sun) 45%, #ff9f43); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-form select { border-radius: 12px; box-shadow: 0 18px 34px -20px rgba(0,0,0,.8); }
.hero-art { --mx: 0px; --my: 0px; --sy: 0px; }
.stair rect { fill: url(#stairFill); stroke: rgba(255,255,255,.16); }
.stair.s4 rect { fill: url(#stairTop); stroke: none; }
.stair.s4 text { fill: var(--navy); }
.stair:last-of-type rect { fill: url(#stairTop); }
.sun-disc, .sun-rays, .sun-glow { transform: translateY(var(--sy)); }
.bubble { translate: var(--mx) var(--my); }
.b2 { translate: calc(var(--mx) * -.7) calc(var(--my) * -.7); }
.climber { filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }

html.motion .sun-rays { transform-box: fill-box; transform-origin: center; animation: spin 48s linear infinite; }
html.motion .sun-glow { animation: glow 5s ease-in-out infinite alternate; }
html.motion .cloud.c1 { animation: drift 26s ease-in-out infinite alternate; }
html.motion .cloud.c2 { animation: drift 34s ease-in-out infinite alternate-reverse; }
html.motion .climber { animation: climb 9s var(--ease) infinite; }
html.motion .flag rect { animation: wave 2.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: left; }
html.motion .hero h1 span, html.motion .hero h1 em { animation: rise-in .8s var(--ease) both; }
html.motion .hero h1 em { animation-delay: .14s; }
html.motion .hero-copy > .body-l { animation: rise-in .8s var(--ease) .26s both; }
html.motion .hero-form { animation: rise-in .8s var(--ease) .36s both; }
html.motion .hero-note { animation: rise-in .8s var(--ease) .46s both; }
html.motion .stair { animation: rise-in .55s var(--ease) both; animation-delay: var(--d); }
html.motion .bubble { animation: pop .5s var(--ease) both, float 5s ease-in-out .6s infinite alternate; }
html.motion .b1 { animation-delay: .5s, 1.1s; }
html.motion .b2 { animation-delay: 1s, 1.6s; }
html.motion .b3 { animation-delay: 1.5s, 2.1s; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes glow { to { opacity: .68; } }
@keyframes drift { to { translate: 34px 0; } }
@keyframes wave { to { scale: .92 1.06; } }
@keyframes rise-in { from { opacity: 0; translate: 0 26px; } }
@keyframes pop { from { opacity: 0; scale: .7; } }
@keyframes float { to { transform: translateY(-9px); } }
@keyframes climb {
  0%, 6% { transform: translate(0, 0); opacity: 1; }
  11% { transform: translate(44px, -74px); }
  16%, 22% { transform: translate(88px, -52px); }
  27% { transform: translate(132px, -126px); }
  32%, 38% { transform: translate(176px, -104px); }
  43% { transform: translate(220px, -178px); }
  48%, 54% { transform: translate(264px, -156px); }
  59% { transform: translate(308px, -230px); }
  64%, 90% { transform: translate(352px, -208px); opacity: 1; }
  95% { transform: translate(352px, -208px); opacity: 0; }
  96% { transform: translate(0, 0); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* Foto e klasës si sfond i hero-s */
.hero { display: flex; align-items: center; min-height: max(640px, 76vh); background: #0b2a47; padding: 56px 0 104px; }
.hero::before, .hero::after { display: none; }
.hero h1 { font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.5rem); text-shadow: 0 2px 22px rgba(7,28,49,.5); }
.hero h1 em { text-shadow: none; filter: drop-shadow(0 2px 14px rgba(7,28,49,.5)); }
.hero-copy { max-width: 640px; }
.hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7,28,49,.94) 0%, rgba(7,28,49,.82) 38%, rgba(11,42,71,.5) 64%, rgba(11,42,71,.3) 100%), linear-gradient(0deg, rgba(7,28,49,.55), transparent 30%); }
html.motion .hero-bg img { animation: photo-in 1.6s var(--ease) both; }
@keyframes photo-in { from { opacity: 0; scale: 1.05; } }
@media (max-width: 1023px) {
  .hero { min-height: 620px; padding: 48px 0 96px; }
  .hero-bg img { object-position: 58% 50%; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(7,28,49,.9) 0%, rgba(7,28,49,.8) 62%, rgba(7,28,49,.62) 100%); }
}

/* Shifrat */
.facts { box-shadow: 0 -18px 40px -24px rgba(11,42,71,.5); }
.fact { padding-left: 16px; border-left: 3px solid; border-image: linear-gradient(180deg, var(--sun), var(--dawn-1)) 1; }
.fact b { font-variant-numeric: tabular-nums; }

/* Shiriti i fjalëve */
.marquee { overflow: hidden; padding: 16px 0; background: linear-gradient(90deg, var(--blue), #14689f 50%, var(--blue)); color: #dbe9f4; }
.marquee-track { display: flex; width: max-content; }
.marquee-run { display: flex; flex: none; }
.word { display: inline-flex; align-items: center; gap: 12px; padding: 0 28px; white-space: nowrap; font-size: 1.0625rem; }
.word b { font: 700 1.25rem var(--font-h); color: var(--white); }
.word i { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); }
html.motion .marquee-track { animation: slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
html:not(.motion) .marquee-dup { display: none; }
html:not(.motion) .marquee-run { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
html:not(.motion) .marquee-track { width: auto; justify-content: center; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Qendra */
.features { gap: 16px; padding: 0; background: none; }
.feature { padding: 22px; border-radius: var(--r-m); background: var(--white); border: 1px solid var(--line); }
.feature-i { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #1f79bb, var(--blue)); }
.feature:nth-child(2) .feature-i, .after-item:nth-child(2) .feature-i { background: linear-gradient(135deg, var(--dawn-2), #127a99); }
.feature:nth-child(3) .feature-i, .after-item:nth-child(3) .feature-i { background: linear-gradient(135deg, var(--dawn-3), #2f8f68); }
.feature:nth-child(4) .feature-i, .after-item:nth-child(4) .feature-i { background: linear-gradient(135deg, #ffd768, #f2a93b); color: var(--navy); }

/* Kartat që reagojnë me miun */
[data-tilt] { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; position: relative; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
[data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(240px circle at var(--gx) var(--gy), rgba(255,194,51,.2), transparent 70%); transition: opacity .3s; }
@media (hover: hover) {
  [data-tilt]:hover { box-shadow: 0 26px 44px -28px rgba(11,42,71,.6); }
  [data-tilt]:hover::after { opacity: 1; }
  [data-tilt]:hover .feature-i, [data-tilt]:hover .mode-i, [data-tilt]:hover .exam-seal { transform: scale(1.08) rotate(-4deg); }
}
.feature-i, .mode-i, .exam-seal { transition: transform .35s var(--ease); }

/* Ngjitja A1–C1 */
.journey { position: relative; color: var(--white); background: #08223b; }
.journey-sticky { position: relative; padding: var(--sec) 0; }
.j-skies { position: absolute; inset: 0; overflow: hidden; background: #08223b; }
.j-sky { position: absolute; inset: 0; opacity: 0; }
.j-sky.s0 { opacity: 1; background: linear-gradient(180deg, #06182b, #0b2f4f 70%, #1b4d76); }
.j-sky.s1 { background: linear-gradient(180deg, #0a2743, #12507f 68%, #3f7ba0); }
.j-sky.s2 { background: linear-gradient(180deg, #0d3a61, #16689f 62%, #7fa9a6); }
.j-sky.s3 { background: linear-gradient(180deg, #0e4b7b, #1a7ab5 58%, #e0b463); }
.j-sky.s4 { background: linear-gradient(180deg, #105a90, #1f86c2 52%, #ffc95c); }
.j-sun { --p: 0; position: absolute; left: 50%; bottom: 0; width: min(62vw, 520px); aspect-ratio: 1; margin-left: calc(min(62vw, 520px) / -2); border-radius: 50%; background: radial-gradient(circle at 50% 42%, #ffe9a8, #ffc233 62%, #ff9f43); box-shadow: 0 0 120px 50px rgba(255,194,51,.34); transform: translateY(calc(92% - var(--p) * 62%)); }
.journey-inner { position: relative; z-index: 1; display: grid; gap: 24px; }
.journey .kicker { color: var(--sun); }
.j-hint { display: none; margin-top: 8px; color: #c7d5e0; }
.j-stage { display: grid; gap: 14px; }
.j-card { padding: 20px 22px; border-radius: var(--r-m); background: rgba(6,24,43,.58); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.j-level { display: flex; align-items: baseline; gap: 10px; color: #dbe6ee; font-weight: 600; }
.j-level b { font: 700 clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem)/1 var(--font-h); color: var(--sun); }
.j-de { margin-top: 10px; font: 700 clamp(1.5rem, 1.1rem + 2.1vw, 3rem)/1.16 var(--font-h); letter-spacing: -.012em; text-wrap: balance; }
.j-tr { margin-top: 10px; font-size: 1.0625rem; color: #dbe6ee; }
.j-stairs { display: none; }

html.motion-ready .journey { height: 380vh; }
html.motion-ready .journey-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding: calc(var(--head-h) + 28px) 0 0; overflow: hidden; }
html.motion-ready .journey-inner { height: 100%; grid-template-rows: auto 1fr auto; gap: 8px; }
html.motion-ready .j-hint { display: block; }
html.motion-ready .j-hint span { display: inline-block; animation: nudge 1.4s ease-in-out infinite alternate; }
html.motion-ready .j-stage { position: relative; display: block; min-height: 0; }
html.motion-ready .j-card { position: absolute; left: 0; right: 0; top: 50%; max-width: 860px; margin: 0 auto; opacity: 0; translate: 0 calc(-50% + 34px); scale: .97; transition: opacity .45s var(--ease), translate .55s var(--ease), scale .55s var(--ease); pointer-events: none; }
html.motion-ready .j-card.on { opacity: 1; translate: 0 -50%; scale: 1; }
html.motion-ready .j-stairs { display: flex; align-items: flex-end; gap: 8px; max-width: 760px; width: 100%; margin: 0 auto; }
.j-stair { --i: 0; flex: 1; display: grid; place-items: start center; height: calc(40px + var(--i) * 26px); padding-top: 8px; border-radius: 12px 12px 0 0; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-bottom: 0; font: 700 1rem var(--font-h); transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.j-stair.on { background: rgba(255,255,255,.3); }
.j-stair.now { background: var(--sun); color: var(--navy); transform: translateY(-6px); box-shadow: 0 0 26px rgba(255,194,51,.6); }
@keyframes nudge { to { transform: translateY(5px); } }
@media (max-height: 620px) {
  html.motion-ready .j-de { font-size: 1.375rem; }
  html.motion-ready .j-stair { height: calc(26px + var(--i) * 12px); padding-top: 3px; font-size: .8125rem; }
  html.motion-ready .j-hint { display: none; }
}

/* Nivelet */
.level-tabs { padding-block: 4px; }
.tab { position: relative; overflow: hidden; }
.tab::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--sun)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.tab:hover::before { transform: scaleX(1); }
.tab[aria-selected="true"] { background: linear-gradient(135deg, #1a72b0, var(--blue)); box-shadow: 0 16px 28px -18px rgba(16,80,128,.9); }
.tab[aria-selected="true"]::before { transform: scaleX(1); background: var(--sun); }
.level-panel { box-shadow: 0 28px 50px -38px rgba(11,42,71,.55); }
.level-badge { position: relative; overflow: hidden; align-content: start; min-height: 200px; background: linear-gradient(165deg, #0a2743, #125587 calc(52% + var(--i) * 6%), #e8ad4b 135%); }
.level-badge::after { content: ""; position: absolute; right: -44px; bottom: 0; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #ffe08a, var(--sun)); box-shadow: 0 0 60px 16px rgba(255,194,51,.4); transform: translateY(calc(82% - var(--i) * 11%)); }
.level-badge > * { position: relative; z-index: 1; }
.climb { display: flex; align-items: flex-end; gap: 4px; margin-top: auto; padding-top: 18px; }
.climb i { width: 14px; height: calc(8px + var(--n) * 6px); border-radius: 3px; background: rgba(255,255,255,.25); }
.climb i.on { background: var(--white); }
html.motion .level-panel:not([hidden]) { animation: panel-in .5s var(--ease) both; }
html.motion .level-panel:not([hidden]) .checks li { animation: rise-in .5s var(--ease) both; }
html.motion .level-panel:not([hidden]) .checks li:nth-child(2) { animation-delay: .07s; }
html.motion .level-panel:not([hidden]) .checks li:nth-child(3) { animation-delay: .14s; }
html.motion .level-panel:not([hidden]) .climb i.on { animation: bar-up .45s var(--ease) both; animation-delay: calc(var(--n) * 70ms); transform-origin: bottom; }
html.motion .level-panel:not([hidden]) .level-badge::after { animation: sun-up .8s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; translate: 0 14px; } }
@keyframes bar-up { from { scale: 1 0; } }
@keyframes sun-up { from { transform: translateY(100%); } }

/* Hapat */
.step { padding: 18px 20px 18px 0; }
.step-n { position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--base); }
.step.on .step-n { background: linear-gradient(135deg, #1f79bb, var(--blue)); }
.steps-line i { background: linear-gradient(180deg, var(--blue), var(--sun)); }
.steps-line { top: 40px; bottom: 40px; }

/* Oraret */
.mode { border: 1px solid transparent; }
.mode-i { background: linear-gradient(135deg, #ffe08a, var(--sun)); }
.mode:nth-child(2) .mode-i { background: linear-gradient(135deg, #f9c0a2, #f2965c); }
.mode:nth-child(3) .mode-i { background: linear-gradient(135deg, #a9d8ec, #5fb3d9); }
.mode:nth-child(4) .mode-i { background: linear-gradient(135deg, #b7e3c8, #6cc196); }
.fchips { display: flex; gap: 8px; margin: 28px -16px 0; padding: 4px 16px; overflow-x: auto; scrollbar-width: none; }
.fchips::-webkit-scrollbar { display: none; }
.fchip { flex: none; min-height: 40px; padding: 0 16px; border: 1px solid #93a7b6; border-radius: var(--full); background: var(--white); font-weight: 600; font-size: .9375rem; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), translate .25s var(--ease); }
.fchip:hover { border-color: var(--blue); translate: 0 -1px; }
.fchip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
@media (min-width: 768px) { .fchips { flex-wrap: wrap; justify-content: center; margin-inline: 0; padding-inline: 0; } }
.table-card { margin-top: 16px; box-shadow: 0 28px 50px -38px rgba(11,42,71,.55); }
tbody tr { transition: background .2s; }
@media (hover: hover) { tbody tr:hover { background: #f3f8fc; } }
html.motion tr.row-in { animation: row-in .4s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes row-in { from { opacity: 0; translate: -12px 0; } }

/* Seksionet e errëta */
.bg-dark { position: relative; overflow: hidden; background: linear-gradient(160deg, #071c31, #0b2a47 55%, #0f3d66); }
.bg-dark::before, .bg-dark::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.bg-dark::before { width: 460px; height: 460px; left: -120px; top: -140px; background: rgba(31,155,181,.32); }
.bg-dark::after { width: 420px; height: 420px; right: -100px; bottom: -160px; background: rgba(255,194,51,.2); }
html.motion .bg-dark::before { animation: aurora 16s ease-in-out infinite alternate; }
html.motion .bg-dark::after { animation: aurora 20s ease-in-out infinite alternate-reverse; }
.bg-dark > .wrap { position: relative; z-index: 1; }
@keyframes aurora { to { translate: 90px 50px; scale: 1.2; } }

/* Testi */
.test-card { background: rgba(255,255,255,.07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: rgba(255,255,255,.18); box-shadow: 0 30px 60px -40px rgba(0,0,0,.9); }
.test-levels { align-items: flex-end; }
.test-levels span:nth-child(1) { height: 52px; }
.test-levels span:nth-child(2) { height: 72px; }
.test-levels span:nth-child(3) { height: 92px; }
.test-levels span:nth-child(4) { height: 112px; }
.test-levels span:nth-child(5) { height: 132px; }
.test-levels span { place-items: start center; padding-top: 10px; }
.test-bar i { background: linear-gradient(90deg, #ffe08a, var(--sun)); }
.test-ladder { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 20px; }
.test-ladder span { --n: 0; flex: 1; display: grid; place-items: start center; height: calc(36px + var(--n) * 16px); padding-top: 6px; border-radius: 8px; background: rgba(255,255,255,.08); font: 700 .875rem var(--font-h); color: #c7d5e0; }
.test-ladder span.on { background: linear-gradient(180deg, #ffd768, var(--sun)); color: var(--navy); }
html.motion .test-ladder span.on { animation: bar-up .5s var(--ease) both; animation-delay: calc(var(--n) * 130ms); transform-origin: bottom; }
html.motion .test-q, html.motion .test-opts { animation: rise-in .4s var(--ease) both; }
html.motion .test-result { animation: pop .5s var(--ease) .5s both; }
.test-opt span { transition: background .2s, border-color .2s, color .2s, translate .2s; }
.test-opt:hover span { translate: 4px 0; }

/* Provimet */
.exam { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-m); }
.exam-seal { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 50%; background: linear-gradient(135deg, #ffe08a, var(--sun)); color: var(--navy); }
.exam-seal .i { width: 26px; height: 26px; }

/* After School */
#after { position: relative; overflow: hidden; }
.after-item { border-radius: 16px; box-shadow: 0 18px 34px -28px rgba(11,42,71,.5); }

/* Kursantët */
.story { box-shadow: 0 30px 50px -36px rgba(0,0,0,.8); }
.story-solo .story { padding: 32px; background: linear-gradient(145deg, #fff3d6, #ffd768); }
.story-solo blockquote { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); }

/* Formulari */
.form-card { box-shadow: 0 30px 56px -40px rgba(11,42,71,.6); }
.field input:not([type=radio]), .field select, .field textarea { border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.field input:not([type=radio]):focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 4px rgba(16,80,128,.14); }
.chip span { transition: background .2s, color .2s, border-color .2s, translate .2s; }
.chip:hover span { translate: 0 -1px; }

/* FAQ */
.faq { border-radius: 14px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.faq:hover { border-color: var(--blue); }
.faq[open] { box-shadow: 0 18px 34px -28px rgba(11,42,71,.55); }
.faq[open] .faq-i { background: var(--sun); color: var(--navy); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
  .faq[open]::details-content { block-size: auto; }
}

/* Kontakti */
.contact-btn { border-radius: 14px; transition: border-color .3s var(--ease), translate .3s var(--ease), box-shadow .3s var(--ease); }
.contact-btn:hover { translate: 4px 0; box-shadow: 0 16px 28px -22px rgba(11,42,71,.6); }
.map { box-shadow: 0 28px 50px -38px rgba(11,42,71,.6); }

/* Fundi: dielli lind pas sloganit */
.site-footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #0b2a47, #071c31); }
.foot-sun { --p: 0; position: absolute; right: -8%; top: calc(var(--sec) + 40px); width: min(70vw, 620px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,194,51,.34), rgba(255,159,67,.14) 42%, transparent 70%); transform: translateY(calc(26% - var(--p) * 26%)); pointer-events: none; }
.site-footer > .wrap { position: relative; z-index: 1; }

/* WhatsApp */
html.motion .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; z-index: -1; animation: ping 2.6s ease-out infinite; }
@keyframes ping { to { scale: 1.65; opacity: 0; } }

/* Shfaqja e titujve dhe blloqeve */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.w > span { display: inline-block; }
html.motion-ready .r-words .w > span { translate: 0 112%; transition: translate .75s var(--ease); transition-delay: var(--d); }
html.motion-ready .r-words.in .w > span { translate: 0 0; }
html.motion-ready .r { opacity: 0; translate: 0 26px; transition: opacity .7s var(--ease), translate .7s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); transition-delay: var(--d), var(--d), 0s, 0s, 0s, 0s; }
html.motion-ready .r.in { opacity: 1; translate: 0 0; }
html.motion-ready .r.in:hover { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .j-sun { transform: translateY(70%); }
}

/* Përshtatje për çdo ekran */
.lang a { display: grid; place-items: center; min-width: 38px; min-height: 36px; }
@media (max-width: 400px) {
  .lang a { min-width: 34px; min-height: 34px; }
  .hero-form { flex-direction: column; }
  .hero-form select, .hero-form .btn { width: 100%; flex: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .facts-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1700px) {
  .wrap { max-width: 1440px; }
  .hero-copy { max-width: 720px; }
  .hero h1 { font-size: 4rem; }
  .hero-copy > .body-l { font-size: 1.25rem; max-width: 640px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; padding: 32px 0 80px; }
}
.fact b { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 380px) {
  .fact b { font-size: 1.125rem; }
  .fact { padding-left: 10px; }
}
@media (max-height: 500px) {
  html.motion-ready .journey-sticky { padding-top: calc(var(--head-h) + 10px); }
  html.motion-ready .journey-head .kicker { margin-bottom: 2px; }
  html.motion-ready .journey-head .h1 { font-size: 1.25rem; line-height: 1.2; }
  html.motion-ready .j-card { padding: 10px 16px; }
  html.motion-ready .j-level b { font-size: 1.5rem; }
  html.motion-ready .j-de { margin-top: 4px; font-size: 1.0625rem !important; }
  html.motion-ready .j-tr { margin-top: 4px; font-size: .875rem; }
}

/* Zgjedhja e nivelit të testit */
.test-pick { margin-bottom: 16px; }
.test-pick-label { margin-bottom: 10px; font-weight: 600; color: #dbe6ee; }
.test-pick .test-levels { margin-bottom: 0; }
.tl { flex: 1; display: grid; place-items: start center; padding-top: 10px; min-width: 0; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-s); background: rgba(255,255,255,.08); color: var(--base); font: 700 1.125rem var(--font-h); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), translate .25s var(--ease), border-color .25s var(--ease); }
.test-levels .tl:nth-child(1) { height: 48px; }
.test-levels .tl:nth-child(2) { height: 60px; }
.test-levels .tl:nth-child(3) { height: 72px; }
.test-levels .tl:nth-child(4) { height: 84px; }
.test-levels .tl:nth-child(5) { height: 96px; }
.tl:hover:not([disabled]) { border-color: var(--sun); translate: 0 -3px; }
.tl[aria-pressed="true"] { background: linear-gradient(180deg, #ffd768, var(--sun)); border-color: var(--sun); color: var(--navy); box-shadow: 0 0 22px rgba(255,194,51,.45); }
.tl[disabled] { cursor: not-allowed; opacity: .5; }
.test-levels span:last-child { background: rgba(255,255,255,.08); color: inherit; }
.test-note { margin: 10px 0 16px; color: #c7d5e0; }
.test-used { margin-bottom: 4px; font: 600 1.25rem var(--font-h); color: var(--sun); }
.test-card > .btn { margin-top: 4px; }
.test-phone { margin: 4px 0 16px; }
.test-phone label { color: #dbe6ee; }
.test-phone input { background: rgba(255,255,255,.96); }
.test-phone .err { color: #ffb4a8; }

/* Numëruesi i testit falas */
.test-timer { margin: 4px 0 18px; padding: 16px; border-radius: var(--r-s); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.test-timer-label { margin-bottom: 10px; font-weight: 600; color: #dbe6ee; }
.test-timer-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.test-timer-cell { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 10px; background: rgba(7,28,49,.55); }
.test-timer-cell b { font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1 var(--font-h); color: var(--sun); font-variant-numeric: tabular-nums; }
.test-timer-cell span { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: #c7d5e0; }
.test-timer-date { margin-top: 10px; font-size: .875rem; color: #c7d5e0; }
.test-timer-row:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }

/* Komentet e ish-kursantëve, si Google Reviews */
.rv-panel { margin-top: 40px; padding: 28px; border-radius: var(--r-m); background: var(--white); color: var(--ink); box-shadow: 0 30px 60px -40px rgba(0,0,0,.9); }
.rv-heading { margin-bottom: 20px; }
.rv-head { display: grid; gap: 20px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.rv-score { display: grid; justify-items: start; gap: 4px; }
.rv-score > b { font: 700 3.5rem/1 var(--font-h); color: var(--navy); }
.rv-stars { position: relative; display: inline-block; font-size: 1.375rem; letter-spacing: 2px; line-height: 1; }
.rv-stars i { font-style: normal; color: #d6e0e8; }
.rv-stars i[data-rv-fill] { position: absolute; left: 0; top: 0; width: 0; overflow: hidden; white-space: nowrap; color: #f2a93b; transition: width .6s var(--ease); }
.rv-count { color: var(--muted); font-size: .9375rem; }
.rv-bars { display: grid; gap: 6px; }
.rv-bar { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: center; font-size: .875rem; font-weight: 600; color: var(--muted); }
.rv-bar i { display: block; height: 9px; border-radius: var(--full); background: #e8eef3; overflow: hidden; }
.rv-bar b { display: block; width: 0; height: 100%; border-radius: inherit; background: #f2a93b; transition: width .6s var(--ease); }
.rv-cta .btn { width: 100%; }
@media (min-width: 768px) {
  .rv-head { grid-template-columns: auto 1fr auto; gap: 40px; }
  .rv-score { justify-items: center; text-align: center; }
  .rv-cta .btn { width: auto; }
}
.rv-form { display: grid; gap: 16px; margin-top: 24px; padding: 24px; border-radius: var(--r-s); background: var(--tint); }
.rv-form[hidden] { display: none; }
.rv-form > .muted { margin-top: -10px; }
.rv-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .rv-grid { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star { position: relative; cursor: pointer; }
.star input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.star span[aria-hidden] { display: block; font-size: 2.125rem; line-height: 1; color: #c4d1db; transition: color .15s, transform .15s; }
.stars .star:hover span[aria-hidden], .stars .star:hover ~ .star span[aria-hidden], .star input:checked + span, .star:has(input:checked) ~ .star span[aria-hidden] { color: #f2a93b; }
.star:hover span[aria-hidden] { transform: scale(1.12); }
.star input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--blue); }
.rv-done { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-s); background: #e3f4e6; color: #17532a; font-weight: 500; }
.rv-list { display: grid; gap: 0; }
.rv-item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.rv-item:last-child { border-bottom: 0; }
.rv-top { display: flex; align-items: center; gap: 12px; }
.rv-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; color: var(--white); font: 700 1.125rem var(--font-h); }
.rv-who { display: grid; }
.rv-who b { font-weight: 700; }
.rv-who span { color: var(--muted); font-size: .875rem; }
.rv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; }
.rv-item-stars { color: #f2a93b; letter-spacing: 1px; }
.rv-date { color: var(--muted); font-size: .875rem; }
.rv-text { margin-top: 6px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; }
.rv-empty { padding: 28px 0 8px; text-align: center; color: var(--muted); }
.rv-panel [data-rv-more] { margin-top: 12px; }
html.motion .rv-new { animation: rise-in .6s var(--ease) both; background: linear-gradient(90deg, rgba(242,169,59,.12), transparent); }
.btn[hidden] { display: none; }

/* Titujt e ndarë fjalë pas fjale: pa "balance", që Safari t'i ndajë saktë */
h2.r-words, p.r-words { text-wrap: wrap; }
.w { white-space: nowrap; }

/* Qendra jonë: titulli dhe teksti të balancuar */
.about-intro h2 { max-width: 16ch; }
@media (min-width: 1024px) {
  .about-intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 72px; }
  .about-intro .body-l { padding-left: 28px; border-left: 3px solid var(--sun); }
}

/* Çmimet te nivelet */
.level-meta dd.price-big { font: 700 1.75rem/1.1 var(--font-h); color: var(--navy); }

/* Kurse individuale */
.ind-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin: -12px 0 32px; }
.ind-points li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ind-points .i { color: var(--blue); }
.ind-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ind-card { display: grid; gap: 12px; align-content: start; padding: 24px 20px; border-radius: var(--r-m); background: var(--white); border: 1px solid var(--line); box-shadow: 0 24px 40px -34px rgba(11,42,71,.6); }
.ind-level { display: flex; align-items: baseline; gap: 8px; }
.ind-level b { font: 700 1.75rem/1 var(--font-h); color: var(--blue); }
.ind-level span { color: var(--muted); font-size: .875rem; }
.ind-price { font: 700 2.25rem/1 var(--font-h); color: var(--navy); }
.ind-meta dt { color: var(--muted); font-size: .8125rem; }
.ind-meta dd { font-weight: 600; }
.ind-card .btn { width: 100%; min-height: 44px; padding: 0 14px; font-size: .9375rem; }
.ind-card:nth-child(5) { background: linear-gradient(160deg, #fff, #fff6dd); border-color: #f5d27a; }

/* Ngjitja: Porta e Brandenburgut, dielli lind me nivelin */
.journey { --p: .6; }
.j-sky { z-index: 0; }
.j-scene { position: absolute; z-index: 1; left: 50%; top: 50%; width: max(100%, calc(100svh * 1.578)); min-height: 100%; aspect-ratio: 1575 / 998; transform: translate(-50%, -50%) scale(calc(1.02 + var(--p) * .1)); transform-origin: 49.5% 65.6%; will-change: transform; }
.j-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: calc(.42 + var(--p) * .4); filter: saturate(calc(.55 + var(--p) * .6)) brightness(calc(.62 + var(--p) * .38)); }
.j-glow { position: absolute; left: 49.5%; top: 65.6%; width: calc(14% + var(--p) * 22%); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,190,.95) 0%, rgba(255,194,51,.55) 22%, rgba(255,159,67,.18) 48%, transparent 70%); opacity: calc(.35 + var(--p) * .65); mix-blend-mode: screen; pointer-events: none; }
.j-rays { position: absolute; left: 49.5%; top: 65.6%; width: 150%; aspect-ratio: 1; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, rgba(255,214,120,.16) 0deg 4deg, transparent 4deg 15deg); -webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 18%, transparent 46%); mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 18%, transparent 46%); opacity: calc(var(--p) * .9); mix-blend-mode: screen; pointer-events: none; }
.j-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(6,24,43,.9) 0%, rgba(6,24,43,.62) 30%, rgba(6,24,43,.4) 60%, rgba(6,24,43,.78) 100%); opacity: calc(1 - var(--p) * .22); }
.j-mote { position: absolute; z-index: 3; bottom: -10px; left: calc(8% + var(--m) * 9.2%); width: var(--s, 4px); aspect-ratio: 1; border-radius: 50%; background: #ffe39a; box-shadow: 0 0 10px 2px rgba(255,210,110,.7); opacity: 0; pointer-events: none; }
html.motion .j-rays { animation: spin 90s linear infinite; }
html.motion .j-glow { animation: sun-pulse 4.5s ease-in-out infinite alternate; }
html.motion .j-mote { animation: mote var(--t, 11s) linear infinite; animation-delay: calc(var(--m) * -1.3s); }
@keyframes sun-pulse { to { scale: 1.14; filter: brightness(1.12); } }
@keyframes mote {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: calc(.25 + var(--p) * .6); }
  50% { transform: translate(18px, -50vh); }
  85% { opacity: calc(.2 + var(--p) * .5); }
  100% { opacity: 0; transform: translate(-10px, -100vh); }
}
@media (max-width: 720px) {
  .j-shade { background: linear-gradient(180deg, rgba(6,24,43,.9) 0%, rgba(6,24,43,.7) 40%, rgba(6,24,43,.55) 70%, rgba(6,24,43,.8) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .j-mote { display: none; }
}
.j-skies { z-index: 0; isolation: isolate; }
.foot-credit { display: inline-block; margin-left: 12px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.25); }
.foot-credit a { color: var(--sun); font-weight: 600; text-decoration: none; }
.foot-credit a:hover { text-decoration: underline; }
@media (max-width: 560px) { .foot-credit { display: block; margin: 6px 0 0; padding: 0; border: 0; } }