/* ΖΩΝΤΑΝΗ ΖΩΓΡΑΦΙΑ — δημόσια πλατφόρμα, Design Β «Φωτεινό Ατελιέ» (16/10, τελική επιλογή Ευάγγελου).
   Πολύ ανοιχτό μπλε, λευκές κάρτες, στρογγυλεμένοι τίτλοι, λεπτή λωρίδα κηρομπογιάς (δένει με το λογότυπο EV LABS AI), μεγάλα ευανάγνωστα γράμματα, λεπτές γραμμές, κανένα emoji.
   ΔΕΝ χρησιμοποιείται στο project της Σοκολάτας (εκεί μένει το ui.css). */
@font-face{font-family:"Commissioner";src:url("fonts/Commissioner.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"ZZRounded";src:url("fonts/Rounded-ExtraBold-gr.ttf") format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"ZZRounded";src:url("fonts/Rounded-Bold-gr.ttf") format("truetype");font-weight:700;font-display:swap}
:root{--bg:#F4F8FF;--bg2:#FFFFFF;--ink:#0F1726;--muted:#2F3A4D;--blue:#1D4FE0;--blue2:#1238A8;--silver:#C9D3E3;--line:#DCE4F2;--warm:#FF9F1C;--r:22px;--f:"Commissioner","Segoe UI",Arial,sans-serif;--h:"ZZRounded","Commissioner","Segoe UI",Arial,sans-serif;--shadow:0 10px 30px rgba(29,79,224,.09)}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
html,body{margin:0;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--h);font-weight:800;letter-spacing:0;color:var(--ink);margin:0}
h1{font-size:clamp(34px,4.4vw,60px);line-height:1.05}
h2{font-size:clamp(27px,2.8vw,40px);line-height:1.12}
h3{font-size:clamp(19px,1.5vw,22px)}
p{margin:0}
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
/* μενού */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .in{display:flex;align-items:center;gap:20px;min-height:104px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.brand img{height:76px;width:auto;display:block}
.brand .zz{display:flex;flex-direction:column;line-height:1.05;border-left:1px solid var(--silver);padding-left:14px}
.brand .zz b{font-family:var(--h);font-weight:800;font-size:25px;letter-spacing:.4px}
.brand .zz span{font-weight:600;font-size:12.5px;letter-spacing:2.5px;color:var(--blue);text-transform:uppercase}
.links{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.links a{font-weight:600;font-size:18px;color:var(--ink);text-decoration:none;padding:11px 15px;border-radius:999px}
.links a.on{color:var(--blue);background:rgba(29,79,224,.10)}
.lang{display:flex;border:1px solid var(--silver);border-radius:999px;overflow:hidden;margin-left:6px}
.lang button{border:0;background:transparent;font:700 14px var(--f);color:var(--muted);padding:8px 12px;cursor:pointer}
.lang button.on{background:var(--ink);color:#fff}
/* κουμπιά */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--blue);color:#fff;font:700 19px var(--f);padding:15px 28px;border-radius:999px;border:0;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--blue2);transform:translateY(-1px)}
.btn.sec{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.btn.sec:hover{background:rgba(20,80,245,.06)}
/* hero με trailer σε όλο το πλάτος (το κείμενο ΚΑΤΩ από το βίντεο) */
.hero{padding-top:26px}
.film{position:relative;border-radius:var(--r);overflow:hidden;background:#0d1220;aspect-ratio:16/7}
.film video{width:100%;height:100%;object-fit:cover;display:block}
.film .tag{position:absolute;left:16px;bottom:16px;font:600 13px var(--f);letter-spacing:1px;color:#fff;background:rgba(10,16,32,.55);padding:6px 12px;border-radius:999px}
.ctrl{position:absolute;right:16px;bottom:16px;display:flex;gap:10px}
.ib{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.ib svg{width:20px;height:20px}
.below{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:end;padding:28px 2px 4px}
.below .acts{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.eyebrow{font-weight:700;font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.lead{font-size:clamp(18px,1.45vw,22px);color:var(--muted)}
.crayon{position:relative;white-space:nowrap;display:inline-block}
.crayon svg{position:absolute;left:-4px;bottom:-9px;width:calc(100% + 8px);height:15px}
/* ενότητες */
.blk{padding:clamp(34px,4.5vw,60px) 0 0}
.blk .hd{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.blk .hd p{margin-top:8px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.it{background:var(--bg2);border:1px solid transparent;box-shadow:var(--shadow);border-radius:var(--r);overflow:hidden;cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.it:hover,.it:focus-visible{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,24,33,.10);outline:none}
.it .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e8edf5}
.it .ph img{width:100%;height:100%;object-fit:cover;display:block}
.it .ph .sheet{position:absolute;left:10px;bottom:10px;width:30%;height:auto;aspect-ratio:auto;border-radius:6px;border:2px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.25);object-fit:contain;background:#fff}
.it .play{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;color:var(--blue)}
.it .play svg{width:16px;height:16px;margin-left:2px}
.it .tx{padding:13px 16px 16px}
.it .tx b{display:block;font-family:var(--h);font-weight:800;font-size:20px}
.it .tx span{font-size:16px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{border:1px solid transparent;border-radius:var(--r);padding:24px;background:var(--bg2);box-shadow:var(--shadow)}
.step .ic,.acc .ic{width:46px;height:46px;border-radius:50%;border:1.4px solid var(--blue);display:grid;place-items:center;color:var(--blue);flex:none}
.step .ic svg,.acc .ic svg{width:22px;height:22px}
.step b{display:block;font-family:var(--h);font-weight:800;font-size:22px;margin:12px 0 4px}
.step span{color:var(--muted);font-size:17px}
.acc{border:1px solid transparent;border-radius:var(--r);background:#fff;overflow:hidden;box-shadow:var(--shadow)}
.acc+.acc{margin-top:10px}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:16px 20px;font-family:var(--h);font-weight:700;font-size:21px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ch{margin-left:auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--silver);display:grid;place-items:center;color:var(--blue);transition:transform .2s}
.acc summary .ch svg{width:16px;height:16px}
.acc[open] summary .ch{transform:rotate(180deg)}
.acc .body{padding:0 20px 20px 82px;color:var(--muted);font-size:18px}
.pdfs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-bottom:18px}
.pdfs a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:17px}
.pdfs a:hover{border-color:var(--blue)}
.pdfs a svg{width:20px;height:20px;color:var(--blue);flex:none}
.pdfs a span{margin-left:auto;font-size:12px;color:var(--muted);letter-spacing:1px}
/* παράθυρο βίντεο */
.md{position:fixed;inset:0;z-index:60;background:rgba(10,14,24,.84);display:none;align-items:center;justify-content:center;padding:clamp(10px,3vw,40px)}
.md.on{display:flex}
.md .box{width:min(1180px,100%);background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.md video{width:100%;display:block;aspect-ratio:16/9;background:#0d1220}
.md .bar{display:flex;align-items:center;gap:14px;padding:14px 18px;flex-wrap:wrap}
.md .bar img{width:58px;height:58px;object-fit:contain;border-radius:8px;border:1px solid var(--line);background:#fff}
.md .bar b{display:block;font-family:var(--h);font-weight:800;font-size:21px}
.md .bar span{font-size:15px;color:var(--muted)}
.md .bar .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.md .ib{border:1px solid var(--silver);background:#fff}
.md .btn{padding:11px 18px;font-size:16px}
/* υποσέλιδο */
.foot{margin-top:70px;background:var(--bg2)}
.foot .in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 0 34px;color:var(--muted);font-size:15px}
.foot img{height:70px}
.foot .by{display:flex;align-items:center;gap:14px;font-weight:700;color:var(--ink)}
/* κάρτα «+ Ανεβάστε» */
a.it{text-decoration:none}
.it.plus{cursor:pointer}
.it.plus .ph{position:relative;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#F4F8FF 0 14px,#EDF3FF 14px 28px);border:1.5px dashed #9DB4EE;border-bottom:0;border-radius:var(--r) var(--r) 0 0}
.plusic{width:76px;height:76px;border-radius:50%;background:#fff;border:1.5px solid var(--blue);color:var(--blue);display:grid;place-items:center;box-shadow:var(--shadow)}
.plusic svg{width:34px;height:34px}
.it.plus.wide{grid-column:1/-1;flex-direction:row;align-items:center}
.it.plus.wide .ph{aspect-ratio:auto;width:220px;height:130px;flex:none;border-radius:var(--r) 0 0 var(--r);border-bottom:1.5px dashed #9DB4EE;border-right:0}
@media (max-width:720px){.it.plus.wide{flex-direction:column;align-items:stretch}.it.plus.wide .ph{width:auto;height:150px;border-radius:var(--r) var(--r) 0 0;border-right:1.5px dashed #9DB4EE;border-bottom:0}}
/* σήμα Premium + παράθυρο κωδικού */
.prem{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;font:700 13px var(--f);letter-spacing:.6px;color:var(--blue2);background:#fff;border:1px solid #BFD0F6;border-radius:999px;padding:5px 11px 5px 9px}
.prem svg{width:15px;height:15px}
.prem.big{position:static;font-size:14px;margin-bottom:12px}
.md .box.pm{width:min(620px,100%);position:relative;padding:clamp(22px,4vw,36px)}
.md .box.pm .x{position:absolute;right:14px;top:14px}
.prembox h2{margin:2px 0 10px}
.codeform{margin-top:20px}
.codeform label{display:block;font-weight:700;font-size:17px;margin-bottom:8px}
.codeform .row{display:flex;gap:10px;flex-wrap:wrap}
.codeform input{flex:1;min-width:200px;font:600 20px var(--f);letter-spacing:1px;padding:14px 16px;border:1.5px solid var(--silver);border-radius:14px;text-transform:uppercase;color:var(--ink)}
.codeform input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,79,224,.15)}
.codeform .err{margin-top:8px;color:#B42318;font-weight:600}
.mailrow{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:12px}
.mailrow p{color:var(--muted);font-size:17px}
.mailrow .btn{justify-self:start}
/* μπάνερ «Από το κινητό» */
.banner{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(20px,3vw,34px)}
.banner .acts{display:flex;justify-content:flex-end}
@media (max-width:820px){.banner{grid-template-columns:1fr}.banner .acts{justify-content:flex-start}}
/* κενό πριν από τη λωρίδα του υποσέλιδου */
main.wrap{padding-bottom:72px}   /* κενό πριν από τη λωρίδα του υποσέλιδου (ανάμεσα παρεμβάλλεται το <script>) */
.foot{margin-top:0}
/* λεπτή λωρίδα κηρομπογιάς (κάτω από το μενού και πάνω από το υποσέλιδο) — διακριτική */
.strip{height:4px;background:repeating-linear-gradient(90deg,#FF6B6B 0 80px,#FF9F1C 80px 160px,#35B86B 160px 240px,#1D4FE0 240px 320px,#8E5CF0 320px 400px);opacity:.75;filter:url(#zzrough)}
/* κινητό */
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}.grid.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.below{grid-template-columns:1fr}.below .acts{justify-content:flex-start}.steps{grid-template-columns:1fr}.film{aspect-ratio:9/12}}
@media (max-width:720px){
  body{font-size:17px}
  .nav .in{min-height:auto;flex-wrap:wrap;padding:10px 0;gap:8px}
  .brand img{height:52px}.brand .zz b{font-size:18px}.brand .zz span{font-size:10px}
  .links{margin-left:0;width:100%;justify-content:flex-start}.links a{font-size:15px;padding:8px 10px}
  .grid,.grid.g3{grid-template-columns:1fr}
  .acc .body{padding-left:20px}
  .md .bar .r{margin-left:0;width:100%;justify-content:space-between}
}