/* ===== KX shared components (home page + every view) ===== */
.kx-media{position:relative;overflow:hidden;background:#0b1420;display:block}
.kx-media>img,.kx-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kx-media>video{opacity:0;transition:opacity .6s ease}
.kx-media>video.on{opacity:1}
video.kx-fade{opacity:0;transition:opacity .6s ease}
video.kx-fade.on{opacity:1}

/* lime ring + logo (used by hero end card, film end card, CTA badge) */
.kx-ring{position:relative;width:64%;aspect-ratio:1;margin:0 auto}
.kx-ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kx-ring circle{fill:none;stroke:#7FD63C;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:296;stroke-dashoffset:296;transform:rotate(-90deg);transform-origin:50% 50%;filter:drop-shadow(0 0 6px rgba(127,214,60,.55))}
.kx-ring img{position:absolute;inset:13%;width:74%;height:74%;object-fit:contain;opacity:0;transform:scale(.8) rotate(-6deg)}
.kx-draw .kx-ring circle{animation:kxDraw 1s cubic-bezier(.65,0,.25,1) forwards}
.kx-draw .kx-ring img{animation:kxPop .7s .55s cubic-bezier(.2,.9,.3,1.25) forwards}
@keyframes kxDraw{to{stroke-dashoffset:0}}
@keyframes kxPop{to{opacity:1;transform:none}}
@keyframes kxUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* strip of 3 photos */
.kx-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 6px}
.kx-strip figure{margin:0;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:#0b1420}
.kx-strip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.kx-strip figure:hover img{transform:scale(1.05)}
.kx-strip figcaption{position:absolute;left:8px;bottom:8px;background:#7FD63C;color:#1a2535;font-family:"Barlow Condensed",Impact,"Arial Narrow",Arial,sans-serif;font-weight:800;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px}

/* belt ladder */
.kx-belt{display:grid;gap:10px;max-width:420px;margin:18px auto 6px}
.kx-belt-stage{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#0b1420;box-shadow:0 14px 34px rgba(0,0,0,.25)}
.kx-belt-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .55s ease,transform 2.4s ease}
.kx-belt-stage img.on{opacity:1;transform:none}
.kx-belt-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;height:14px}
.kx-belt-bar i{display:block;border-radius:3px;background:rgba(127,140,160,.28);transition:background .35s ease,box-shadow .35s ease}
.kx-belt-bar i.on{box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}
.kx-belt-lab{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;text-align:center;font-family:"Barlow Condensed",Impact,"Arial Narrow",Arial,sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.6px;color:#8a97a8}
.kx-belt-lab span{transition:color .3s}
.kx-belt-lab span.on{color:inherit;opacity:1}

/* «Το πρώτο μάθημα» film */
.kx-film{position:relative;aspect-ratio:9/16;width:100%;max-width:340px;margin:18px auto 8px;border-radius:16px;overflow:hidden;background:#1a2535;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.kx-film>video,.kx-film>.kx-film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kx-film>video{opacity:0;transition:opacity .4s}
.kx-film.playing>video{opacity:1}
.kx-film-cap{position:absolute;left:12px;right:12px;bottom:18px;text-align:center;font-family:"Barlow",Arial,sans-serif;font-weight:600;font-size:17px;line-height:1.25;color:#fff;background:rgba(10,18,30,.62);padding:7px 10px;border-radius:8px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.kx-film-cap.on{opacity:1;transform:none}
.kx-film-end{position:absolute;inset:0;background:#1a2535;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;opacity:0;pointer-events:none;transition:opacity .35s;text-align:center;padding:18px}
.kx-film-end.on{opacity:1}
.kx-film-endt{font-family:"Barlow Condensed",Impact,"Arial Narrow",Arial,sans-serif;font-weight:900;font-size:28px;line-height:1.02;color:#fff;letter-spacing:.5px;opacity:0}
.kx-film-end.on .kx-film-endt{animation:kxUp .5s 1.05s forwards}
.kx-film-endt em,.kx-film-endt .o{font-style:normal;color:#7FD63C}
.kx-film-endt .o{font-size:.6em;vertical-align:super}
.kx-film-play{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;background:#7FD63C;color:#1a2535;border:0;border-radius:999px;padding:12px 18px;font-family:"Barlow Condensed",Impact,"Arial Narrow",Arial,sans-serif;font-weight:800;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 24px rgba(127,214,60,.45)}
.kx-film-play span{font-size:12px}
.kx-film.playing .kx-film-play{opacity:0;pointer-events:none}
.kx-film.ended .kx-film-play{opacity:1;pointer-events:auto;bottom:16px}

@media (max-width:420px){.kx-strip{gap:6px}.kx-strip figcaption{font-size:9.5px;padding:2px 6px}}
@media (prefers-reduced-motion:reduce){.kx-ring circle{stroke-dashoffset:0!important;animation:none!important}.kx-ring img{opacity:1!important;transform:none!important;animation:none!important}.kx-belt-stage img{transition:none}}
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}