/* Learnify — shared stylesheet · v7.2 · 2026-10-19 */
/* ===================================================================
   LEARNIFY — SHARED STYLESHEET
   Used by: pingus-english.html, rising-voices.html, exam-ready.html
=================================================================== */

:root{
  --navy:#2F5FA8;
  --navy-deep:#1F3D73;
  --red:#F2604F;
  --red-dark:#C8402F;
  --gold:#F0AD3E;
  --ice:#F3F7FD;
  --sky:#EAF2FF;
  --paper:#FFFFFF;
  --slate:#56657A;
  --wa:#0F7F43;             /* WhatsApp green, darkened for AA contrast with white text */
  --line:#E3E9F7;
  --shadow: 0 18px 40px rgba(47,95,168,0.12);
  --shadow-sm: 0 8px 20px rgba(47,95,168,0.08);

  /* semantic tokens (used by dark mode) */
  --ink:#1F3D73;            /* main text            */
  --surface:#FFFFFF;        /* cards / panels       */
  --surface-2:#F3F7FD;      /* subtle panels        */
  --tint-sky:#EAF2FF;       /* pale blue blocks     */
  --tint-blue:#DCEBFF;      /* decorative shapes    */
  --tint-red:#FFECE9;       /* pale red chips       */
  --tint-warm:#FFF7E8;      /* warning / note boxes */
  --tint-rose:#FFF1EF;      /* selected pills       */
  --hero-fade:#FDFEFF;      /* hero gradient end    */
  --glow:rgba(47,95,168,0.10);
  --ring:rgba(47,95,168,0.16);
  color-scheme: light;
}

/* ===== DARK THEME =====
   Follows the visitor's device setting automatically (no switcher since v7.1):
   the inline script in each <head> + site.js set data-theme="dark" on <html>
   when the device prefers dark. Only the tokens change — every component
   follows automatically. v7.1: softer, warmer "evening blue" instead of the
   old near-black, brighter friendly accents. */
html[data-theme="dark"]{
  --navy:#8FB4F5;
  --navy-deep:#F1F4FB;
  --red:#FF8A78;
  --red-dark:#FF7A66;
  --gold:#FFC56B;
  --ice:#1C2440;
  --sky:#1A2139;
  --paper:#161C30;
  --slate:#AEB8D0;
  --line:#2E3A5C;
  --ink:#F1F4FB;
  --surface:#1F2843;
  --surface-2:#1A2139;
  --tint-sky:#1C2440;
  --tint-blue:#243058;
  --tint-red:#352A45;
  --tint-warm:#33291F;
  --tint-rose:#352A45;
  --hero-fade:#161C30;
  --glow:rgba(143,180,245,0.18);
  --ring:rgba(143,180,245,0.32);
  --shadow: 0 18px 44px rgba(5,8,20,0.45);
  --shadow-sm: 0 8px 22px rgba(5,8,20,0.32);
  --on-accent:#141A2E;      /* text on light accent buttons in dark mode */
  color-scheme: dark;
}
html[data-theme="dark"] img:not([src*="logo"]):not([src*="favicon"]){filter:saturate(.95) brightness(.95);}
/* the logo is navy on transparent — give it a soft light disc so it stays readable */
html[data-theme="dark"] .logo img, html[data-theme="dark"] .footer-brand img{background:var(--ink); border-radius:50%; padding:2px;}
html[data-theme="dark"] .btn-ghost{border-color:var(--navy);}
html[data-theme="dark"] .btn-ghost:hover{background:var(--surface); color:var(--navy);}
html[data-theme="dark"] header{background:rgba(22,28,48,.86); backdrop-filter:saturate(1.4) blur(14px); box-shadow:0 2px 18px rgba(5,8,20,.35);}
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .mobile-menu,
html[data-theme="dark"] .cookie-banner,
html[data-theme="dark"] .sticky-contact{background:var(--surface);}
html[data-theme="dark"] .lang-btn.active{background:var(--navy); color:var(--on-accent);}
html[data-theme="dark"] .cookie-accept{background:var(--navy); border-color:var(--navy); color:var(--on-accent);}
html[data-theme="dark"] .cookie-accept:hover{background:#A9C6F8;}
html[data-theme="dark"] .btn-navy{color:var(--on-accent);}
html[data-theme="dark"] .sc-call{color:var(--on-accent);}
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .mobile-menu > ul > li.mobile-cta-row > a.btn{color:var(--on-accent);}
html[data-theme="dark"] .hero-art::before{background:radial-gradient(circle, rgba(255,138,120,.20) 0%, transparent 68%) !important;}
html[data-theme="dark"] .hero-art .ring{border-color:rgba(143,180,245,0.30) !important;}
html[data-theme="dark"] .stat-strip{background:var(--red);}
html[data-theme="dark"] .stat-item{color:var(--on-accent);}
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .f-field input, html[data-theme="dark"] .f-field select, html[data-theme="dark"] .f-field textarea{
  background:var(--surface-2); color:var(--ink); border-color:var(--line);
}
html[data-theme="dark"] .map-wrap{filter:invert(.88) hue-rotate(180deg) saturate(.75) brightness(1.05);}
html[data-theme="dark"] .t-card, html[data-theme="dark"] .why-item{background:var(--surface);}

/* reveal safety net: never leave content invisible */
.motion-done{animation:none !important; opacity:1 !important; transform:none !important;}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  background:var(--paper);
  color:var(--ink);
  transition:background-color .35s ease, color .35s ease;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
section{position:relative;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
h1,h2,h3,h4{
  font-family:'Poppins','Manrope',sans-serif;
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.1;
}
.eyebrow{
  font-family:'Poppins','Manrope',sans-serif;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.eyebrow::before{content:""; width:28px; height:3px; background:var(--red); display:inline-block;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 32px; font-family:'Poppins','Manrope',sans-serif; font-weight:700; font-size:0.92rem;
  letter-spacing:.03em; text-transform:uppercase; border:2px solid transparent; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap; clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.btn-primary{background:var(--red); color:#fff; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;}
.btn-primary::before{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn-primary:hover::before{left:130%;}
.btn-primary:hover{transform:translateY(-3px); box-shadow:var(--shadow); background:var(--red-dark);}
.btn-ghost{background:transparent; border-color:var(--navy); color:var(--navy-deep);}
.btn-ghost:hover{background:var(--surface); color:var(--navy);}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-deep); transform:translateY(-3px); box-shadow:var(--shadow);}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* =====================================================================
   HEADER — rebuilt from scratch, deliberately simple and dropdown-free.
   No hover-hidden menus, no absolutely-positioned panels that depend on
   CSS loading correctly. Every element here is always visible in the
   DOM at its natural size — nothing can "explode" if a stylesheet fails.
===================================================================== */
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:1000; background:var(--navy-deep); color:#fff;
  padding:10px 16px; border-radius:8px; font-family:'Poppins','Manrope',sans-serif; font-weight:700; font-size:0.85rem;
  transition:top .2s ease;
}
.skip-link:focus{top:12px;}

header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--paper); padding:14px 0;
  transition:padding .3s ease, box-shadow .3s ease;
  box-shadow:0 2px 16px rgba(47,95,168,0.08);
}
header.scrolled{padding:8px 0; box-shadow:0 4px 22px rgba(47,95,168,0.14);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:20px;}
/* v7.1: the header row is a little wider than the page content so the larger
   menu labels breathe (EN + EL) without crowding the logo and buttons. */
header .wrap.nav-inner{max-width:1400px;}

.logo{display:flex; align-items:center; gap:10px; transition:opacity .2s ease; flex-shrink:0;}
.logo:hover{opacity:.85;}
.logo img{height:42px; width:42px; transition:height .3s ease, width .3s ease, transform .3s ease; flex-shrink:0;}
.logo:hover img{transform:rotate(-6deg) scale(1.05);}
header.scrolled .logo img{height:34px; width:34px;}
.logo-text{font-family:'Poppins','Manrope',sans-serif; font-weight:800; font-size:1.05rem; color:var(--navy-deep); letter-spacing:.02em; line-height:1.15; white-space:nowrap;}
.logo-text span{display:block; font-weight:600; font-size:0.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--red);}

nav{flex:1; display:flex; justify-content:center; min-width:0;}
/* v7.1: larger, sentence-case labels, every item on the same centre line */
nav ul{display:flex; gap:26px; align-items:center; list-style:none; flex-wrap:nowrap;}
nav > ul > li{display:flex; align-items:center;}
nav a{
  font-family:'Poppins','Manrope',sans-serif; font-weight:600; font-size:0.9rem; line-height:1.2; color:var(--navy-deep);
  position:relative; padding:8px 0; letter-spacing:0; white-space:nowrap;
}
nav > ul > li > a{display:inline-flex; align-items:center;}
nav a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; border-radius:2px; background:var(--red); transition:width .25s ease;}
nav a:hover{color:var(--red);}
nav a:hover::after, nav > ul > li > a[aria-current="page"]::after{width:100%;}
nav > ul > li > a[aria-current="page"]{color:var(--red);}
.nav-dropdown > a[aria-current="page"]::after{display:none;}

/* Greek nav labels run longer than English — slightly tighter when Greek is active. */
html[lang="el"] nav ul{gap:18px;}
html[lang="el"] nav a{font-size:0.86rem;}

/* Dropdowns (Programs, Resources) */
.nav-dropdown{position:relative;}
.nav-dropdown > a{display:inline-flex; align-items:center; gap:5px;}
.nav-dropdown > a .caret{
  width:9px; height:9px; min-width:9px; min-height:9px; max-width:9px; max-height:9px;
  flex:0 0 9px; display:inline-block; transition:transform .25s ease;
}
.nav-dropdown:hover > a .caret, .nav-dropdown.open > a .caret{transform:rotate(180deg);}
.dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  background:var(--surface); border-radius:14px; box-shadow:var(--shadow); border:1px solid var(--line);
  padding:8px; width:230px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease; z-index:200;
}
.dropdown-menu::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px;} /* hover bridge */
.nav-dropdown:hover .dropdown-menu, .nav-dropdown.open .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,4px);
}
.dropdown-menu a{
  display:flex; flex-direction:column; gap:1px; padding:10px 12px; border-radius:8px;
  text-transform:none; font-weight:600; font-size:0.86rem; color:var(--navy-deep); letter-spacing:normal; white-space:normal;
}
.dropdown-menu a::after{display:none;}
.dropdown-menu a:hover, .dropdown-menu a[aria-current="page"]{background:var(--sky);}
.dropdown-menu a[aria-current="page"]{color:var(--red);}
.dropdown-menu a small{font-weight:500; font-size:0.72rem; color:var(--slate); text-transform:none;}

.nav-cta{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.nav-cta .nav-btn{padding:12px 22px; font-size:0.8rem;}
html[lang="el"] .nav-cta .nav-btn{padding:12px 18px; font-size:0.78rem;}

.nav-call{
  display:flex; align-items:center; gap:6px; color:var(--navy-deep); font-family:'Poppins','Manrope',sans-serif;
  font-weight:700; font-size:0.8rem; white-space:nowrap; transition:color .2s ease; flex-shrink:0;
}
.nav-call:hover{color:var(--red);}
.nav-call .ic{width:18px; height:18px; flex-shrink:0;}
.nav-call span{display:none;}          /* desktop: icon only — the header container is 1200px */
.nav-call{
  width:40px; height:40px; justify-content:center; border-radius:50%;
  border:1.5px solid var(--line); transition:border-color .2s ease, color .2s ease;
}
.nav-call:hover{border-color:var(--navy);}
.mobile-menu > ul > li.mobile-call-row > a{
  display:flex; align-items:center; justify-content:center; gap:10px; padding:13px;
  border:1.5px solid var(--line); border-radius:10px; color:var(--navy-deep);
  font-family:'Poppins','Manrope',sans-serif; font-weight:700; font-size:0.92rem;
}
.mobile-call-row a svg{width:18px; height:18px;}
.mobile-call-row{padding-top:12px;}


.lang-toggle{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:100px; padding:3px; gap:2px; flex-shrink:0;}
.lang-btn{
  border:none; background:transparent; padding:5px 10px; border-radius:100px; font-family:'Poppins','Manrope',sans-serif;
  font-weight:700; font-size:0.74rem; letter-spacing:.03em; color:var(--slate); cursor:pointer; transition:.2s;
}
.lang-btn.active{background:var(--navy); color:#fff;}
.lang-btn:not(.active):hover{color:var(--navy-deep);}
.mobile-lang-row{display:flex; gap:10px; padding-top:16px; border-top:1px solid var(--line);}
.mobile-lang-row .lang-btn{flex:1; padding:10px; border:1.5px solid var(--line); border-radius:8px; background:var(--surface); font-size:0.8rem;}
.mobile-lang-row .lang-btn.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.mobile-cta-row{display:none;}
.mobile-menu > ul > li.mobile-cta-row > a.btn{display:flex; width:100%; justify-content:center; padding:14px 22px; color:#fff; text-transform:uppercase; font-size:0.85rem;}

/* Burger (hidden on desktop) */
.burger{display:none; flex-direction:column; justify-content:center; gap:5px; background:none; border:none; cursor:pointer; padding:8px; flex-shrink:0; width:42px; height:42px;}
.burger span{width:24px; height:2.5px; background:var(--navy-deep); border-radius:2px; transition:transform .3s ease, opacity .2s ease;}
.burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* Mobile menu panel */
.mobile-menu{
  display:none; background:var(--paper); margin-top:12px; border-top:1px solid var(--line);
  max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mobile-menu.open{display:block; animation:fadeUpIn .25s ease both;}
.mobile-menu ul{display:flex; flex-direction:column; padding:18px 32px 24px; gap:0; list-style:none; max-width:1200px; margin:0 auto;}
.mobile-menu > ul > li{border-bottom:1px solid var(--line);}
.mobile-menu > ul > li:last-child, .mobile-menu > ul > li.mobile-lang-row{border-bottom:none;}
.mobile-menu > ul > li > a{display:block; padding:14px 0;}
.mobile-menu a{font-family:'Poppins','Manrope',sans-serif; font-weight:600; font-size:0.95rem; color:var(--navy-deep); text-transform:uppercase; letter-spacing:.02em;}
.mobile-menu a:hover{color:var(--red);}
.mobile-programs-list{display:flex; flex-direction:column; gap:0; padding-left:14px; margin:-6px 0 12px; border-left:2px solid var(--line);}
.mobile-programs-list a{display:block; padding:8px 0; font-size:0.88rem !important; text-transform:none !important; font-weight:500 !important;}
body.menu-open{overflow:hidden;}
body.menu-open .cookie-banner{display:none;}

/* ===== GENERIC SECTION HEAD ===== */
.section-head{max-width:640px; margin-bottom:56px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(2rem,3.2vw,2.6rem); color:var(--navy-deep);}
.section-head p{color:var(--slate); font-size:1.04rem; margin-top:14px;}

/* ===== STAT STRIP ===== */
.stat-strip{background:var(--red-dark); padding:30px 0; position:relative; z-index:5;}
.stat-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;}
.stat-item{color:#fff; text-align:center; flex:1 1 150px; min-width:120px;}
.stat-item strong{display:block; font-family:'Poppins','Manrope',sans-serif; font-weight:800; font-size:1.7rem;}
.stat-item span{font-size:0.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;}

/* ===== BADGE / PILL ===== */
.pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--sky); color:var(--navy-deep);
  font-family:'Poppins','Manrope',sans-serif; font-weight:700; font-size:0.78rem; text-transform:uppercase;
  letter-spacing:.04em; padding:8px 16px; border-radius:100px;
}

/* ===== CAROUSEL ===== */
.carousel{position:relative; overflow:hidden; border-radius:20px;}
.carousel-track{display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1);}
.carousel-slide{flex:0 0 100%; position:relative;}
.carousel-slide .slide-panel{
  aspect-ratio:16/9; width:100%; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.carousel-slide .slide-caption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 28px;
  background:linear-gradient(0deg, rgba(31,61,115,0.82) 0%, rgba(31,61,115,0) 100%);
  color:#fff;
}
.carousel-slide .slide-caption strong{font-family:'Poppins','Manrope',sans-serif; font-size:1.05rem; display:block; margin-bottom:2px;}
.carousel-slide .slide-caption span{font-size:0.82rem; opacity:.85;}
.carousel-dots{display:flex; justify-content:center; gap:8px; margin-top:18px;}
.carousel-dots button{
  width:9px; height:9px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0; transition:.25s;
}
.carousel-dots button.active{background:var(--red); width:24px; border-radius:6px;}
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  background:color-mix(in srgb, var(--surface) 90%, transparent); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:3; transition:.2s; box-shadow:var(--shadow-sm);
}
.carousel-arrow:hover{background:var(--surface); transform:translateY(-50%) scale(1.08);}
.carousel-arrow.prev{left:14px;}
.carousel-arrow.next{right:14px;}
.carousel-arrow svg{width:18px; height:18px; color:var(--navy-deep);}

/* ===== TESTIMONIALS ===== */
.t-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.t-card{background:var(--ice); border-top:4px solid var(--red); padding:34px 28px; box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease;}
.t-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.t-stars{color:var(--red); font-size:1rem; margin-bottom:14px; letter-spacing:2px;}
.t-card p{font-family:'Poppins','Manrope',sans-serif; font-weight:500; font-size:1rem; margin-bottom:18px; color:var(--navy-deep); line-height:1.5;}
.t-who{font-weight:700; font-size:0.85rem; color:var(--slate); text-transform:uppercase; letter-spacing:.03em;}
.t-note{margin-top:36px; font-size:0.85rem; color:var(--slate); text-align:center;}

/* ===== TIMELINE / LEVELS ===== */
.level-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.level-card{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:26px 22px; box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease;}
.level-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.level-num{font-family:'Poppins','Manrope',sans-serif; font-weight:800; font-size:1.6rem; color:var(--red); opacity:.7;}
.level-card h4{font-size:1.05rem; margin:8px 0 6px;}
.level-card p{font-size:0.88rem; color:var(--slate);}

/* ===== WHY GRID (icon cards) ===== */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.why-item{padding:32px 24px; background:color-mix(in srgb, var(--surface) 65%, transparent); border-left:3px solid var(--red); border-radius:0 12px 12px 0; transition:background .3s ease, transform .3s ease;}
.why-item:hover{background:color-mix(in srgb, var(--surface) 95%, transparent); transform:translateY(-4px);}
.why-item .ic{width:38px; height:38px; margin-bottom:18px;}
.why-item h4{font-size:1.05rem; margin-bottom:9px; color:var(--navy-deep);}
.why-item p{font-size:0.9rem; color:var(--slate);}

/* ===== INTERACTIVE QUIZ / FINDER ===== */
.quiz-wrap{max-width:760px; margin:0 auto;}
.quiz-shell{
  background:var(--surface); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow);
  padding:34px 36px 30px; position:relative; overflow:hidden;
}
.quiz-shell::before{
  content:""; position:absolute; inset:0 0 auto 0; height:140px; pointer-events:none;
  background:radial-gradient(600px 140px at 50% 0%, var(--glow), transparent 70%);
}
.quiz-progress{height:5px; border-radius:5px; background:var(--line); overflow:hidden; margin-bottom:14px; position:relative; z-index:2;}
.quiz-bar{display:block; height:100%; width:0; border-radius:5px; background:linear-gradient(90deg, var(--navy), var(--red)); transition:width .45s cubic-bezier(.16,1,.3,1);}
.quiz-meta{font-family:'Poppins','Manrope',sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-bottom:18px; position:relative; z-index:2;}
.quiz-body{position:relative; z-index:2; min-height:210px;}
.quiz-card h3{font-size:clamp(1.15rem,2.1vw,1.5rem); color:var(--ink); margin-bottom:20px; line-height:1.25;}
.quiz-sentence em{font-style:normal; display:inline-block; min-width:74px; border-bottom:3px solid var(--red); margin:0 4px; vertical-align:baseline;}
.quiz-in{animation:quizIn .4s cubic-bezier(.16,1,.3,1) both;}
@keyframes quizIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.quiz-options{display:grid; gap:10px;}
.quiz-options-2{grid-template-columns:1fr 1fr;}
.quiz-option{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:14px; padding:15px 18px;
  font-family:'Poppins','Manrope',sans-serif; font-weight:600; font-size:0.95rem; color:var(--ink);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.quiz-option::before{
  content:""; width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex-shrink:0; transition:.2s;
}
.quiz-option:hover{border-color:var(--navy); transform:translateX(3px);}
.quiz-option:hover::before{border-color:var(--navy);}
.quiz-option.is-right{border-color:#2FA36B; background:color-mix(in srgb,#2FA36B 12%, var(--surface));}
.quiz-option.is-right::before{border-color:#2FA36B; background:#2FA36B; box-shadow:inset 0 0 0 3px var(--surface);}
.quiz-option.is-wrong{border-color:var(--red); background:var(--tint-rose);}
.quiz-option.is-wrong::before{border-color:var(--red); background:var(--red); box-shadow:inset 0 0 0 3px var(--surface);}
.quiz-option:disabled{cursor:default; transform:none;}
.quiz-nav{margin-top:20px; position:relative; z-index:2;}
.quiz-back{background:none; border:none; cursor:pointer; font-family:'Poppins','Manrope',sans-serif; font-weight:700; font-size:0.8rem; color:var(--slate); text-transform:uppercase; letter-spacing:.08em; padding:6px 0;}
.quiz-back:hover{color:var(--red);}
.quiz-kicker{font-family:'Poppins','Manrope',sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:8px;}
.quiz-result h3{margin-bottom:6px;}
.quiz-age{font-family:'Poppins','Manrope',sans-serif; font-weight:600; font-size:0.85rem; color:var(--slate); margin-bottom:14px;}
.quiz-why{color:var(--slate); font-size:0.97rem; margin-bottom:12px; line-height:1.6;}
.quiz-disclaimer{font-size:0.82rem; color:var(--slate); opacity:.85; margin:14px 0 4px;}
.quiz-score{display:flex; align-items:baseline; gap:12px; margin:6px 0 10px;}
.quiz-score strong{font-family:'Poppins','Manrope',sans-serif; font-weight:800; font-size:2.4rem; color:var(--navy); line-height:1;
  background:linear-gradient(120deg, var(--navy), var(--red)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.quiz-score span{font-family:'Poppins','Manrope',sans-serif; font-weight:700; font-size:0.9rem; color:var(--slate);}
.quiz-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px;}
.quiz-form{margin-top:22px; padding-top:20px; border-top:1px solid var(--line);}
.quiz-form-lead{font-size:0.9rem; color:var(--ink); font-weight:600; margin-bottom:12px;}
.quiz-form-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
.quiz-form-row .btn{grid-column:1 / -1;}
@media (max-width:980px){ .quiz-form-row{grid-template-columns:1fr 1fr;} }
.quiz-form-row input{border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink); border-radius:10px; padding:13px 14px; font-family:inherit; font-size:0.94rem; min-width:0;}
.quiz-form-row input:focus{outline:none; border-color:var(--navy);}
.quiz-consent{display:flex; gap:9px; align-items:flex-start; margin-top:12px; font-size:0.79rem; color:var(--slate); line-height:1.5;}
.quiz-consent input{margin-top:3px; accent-color:var(--red);}
.quiz-consent a{color:var(--navy); text-decoration:underline;}
@media (max-width:640px){
  .quiz-shell{padding:24px 20px 22px; border-radius:20px;}
  .quiz-options-2{grid-template-columns:1fr;}
  .quiz-form-row{grid-template-columns:1fr;}
  .quiz-body{min-height:260px;}
}

/* ===== BENTO GRID (2026 layout pattern) ===== */
.bento{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(140px,auto); gap:18px;
}
.bento > *, .bento .why-item{
  position:relative; isolation:isolate; overflow:hidden; border-left:0;
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:30px 28px;
  box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .3s ease;
}
@media (hover:hover){ .bento > *:hover, .bento .why-item:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--ring); background-color:var(--surface);} }
.bento > *::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), var(--glow), transparent 62%);
}
@media (hover:hover){ .bento > *:hover::after{opacity:1;} }
.bento > *:nth-child(1){grid-column:span 2; grid-row:span 2; padding:38px 34px;}
.bento > *:nth-child(2), .bento > *:nth-child(3),
.bento > *:nth-child(4), .bento > *:nth-child(5){grid-column:span 2;}
.bento .why-item .ic, .bento .ic{width:38px; height:38px; margin-bottom:16px;}
.bento > * h4, .bento h4{font-size:1.08rem; margin-bottom:9px; color:var(--ink);}
.bento > * p, .bento p{font-size:0.93rem; color:var(--slate);}
.bento .bento-feature{
  background:linear-gradient(150deg, var(--sky) 0%, var(--surface) 55%, var(--tint-rose) 100%);
}
html[data-theme="dark"] .bento .bento-feature{background:linear-gradient(150deg, var(--tint-blue) 0%, var(--surface) 60%, var(--tint-rose) 100%);}
.bento .bento-figures{margin-top:auto; padding-top:22px;}
.bento .bento-feature .ic{width:48px; height:48px;}
.bento .bento-feature h4{font-size:1.5rem; line-height:1.2;}
.bento .bento-feature p{font-size:1rem;}
.bento-figures{display:flex; gap:26px; flex-wrap:wrap; margin-top:26px; position:relative; z-index:2;}
.bento-figures div strong{display:block; font-family:'Poppins','Manrope',sans-serif; font-weight:800; font-size:1.7rem; color:var(--red); line-height:1;}
.bento-figures div span{font-size:0.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--slate);}
.bento .bento-cta{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-color:transparent; display:flex; flex-direction:column; justify-content:center; gap:12px;
}
html[data-theme="dark"] .bento-cta{background:linear-gradient(135deg, var(--tint-blue) 0%, var(--surface) 100%);}
.bento .bento-cta h4, .bento .bento-cta p{color:#fff;}
html[data-theme="dark"] .bento-cta h4, html[data-theme="dark"] .bento-cta p{color:var(--ink);}
.bento .bento-cta p{opacity:.82; font-size:0.9rem;}
.bento .bento-cta{justify-content:center;}
.bento-cta .btn{align-self:flex-start; margin-top:6px; position:relative; z-index:2;}
@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .bento > *:nth-child(1){grid-column:span 2; grid-row:span 1;}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr; gap:14px;}
  .bento > *{padding:24px 20px; border-radius:18px;}
  .bento > *:nth-child(1){padding:26px 22px;}
  .bento .bento-feature h4{font-size:1.25rem;}
}

/* ===== CTA BANNER ===== */
.cta-banner{
  background:linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius:24px; padding:56px 50px; color:#fff; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-banner::before{
  content:""; position:absolute; top:-40%; right:-10%; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,96,79,0.35) 0%, rgba(242,96,79,0) 70%);
}
.cta-banner h3{font-size:1.7rem; margin-bottom:8px; position:relative; z-index:2;}
.cta-banner p{color:#C6D2EA; max-width:420px; position:relative; z-index:2;}
.cta-banner .btn-primary{position:relative; z-index:2;}

/* ===== FORM ===== */
.form-card{background:var(--paper); border-radius:20px; box-shadow:var(--shadow); padding:44px; border:1px solid var(--line);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.field label{font-size:0.76rem; font-weight:700; color:var(--slate); text-transform:uppercase; letter-spacing:.04em;}
.field input, .field select, .field textarea{
  border:1.5px solid var(--line); padding:12px 14px; font-family:inherit; font-size:0.95rem;
  background:var(--ice); color:var(--navy-deep); transition:border-color .2s ease; border-radius:4px;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--navy);}
.field textarea{resize:vertical; min-height:90px;}
.form-msg{margin-top:14px; font-size:0.88rem; font-weight:600; color:var(--red); display:none;}
.form-msg.show{display:block;}

/* ===== FOOTER ===== */
footer{background:var(--sky); color:var(--ink); padding:64px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1.2fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(31,61,115,0.14);}
.footer-logo{display:inline-flex; align-items:center; gap:12px; margin-bottom:14px;}
.footer-logo img{height:40px; width:40px;}
.footer-logo span{font-family:'Poppins','Manrope',sans-serif; font-weight:800; font-size:1.05rem;}
.footer-grid p{color:var(--slate); font-size:0.9rem; max-width:300px;}
.footer-social{display:flex; gap:10px; margin-top:18px;}
.footer-social a{
  width:38px; height:38px; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--navy-deep); transition:.2s;
}
.footer-social a:hover{background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-2px);}
.footer-social svg{width:18px; height:18px;}
.footer-grid h5{font-family:'Poppins','Manrope',sans-serif; font-size:0.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; color:var(--slate);}
.footer-grid ul{display:flex; flex-direction:column; gap:11px;}
.footer-grid ul a, .footer-grid ul > li > span{font-size:0.92rem; color:var(--navy-deep); opacity:0.85; line-height:1.45;}
.footer-grid ul a:hover{opacity:1; color:var(--red);}
.footer-contact li{color:var(--navy-deep);}
.footer-credit{width:100%; font-size:0.78rem; color:var(--slate);}
.footer-credit a{font-weight:600; color:var(--slate); text-decoration:underline; text-underline-offset:2px;}
.footer-credit a:hover{color:var(--red);}
.footer-bottom{padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:0.82rem; color:var(--slate);}

/* ===== LEAD MAGNET CARD ===== */
.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;}
.lm-card{background:linear-gradient(120deg, var(--sky) 0%, var(--tint-rose) 100%); border:1px solid var(--line); border-radius:24px; padding:40px 44px; display:grid; grid-template-columns:1fr 1.3fr; gap:36px; align-items:center;}
.lm-text h3{font-size:1.6rem; color:var(--navy-deep); margin-bottom:10px;}
.lm-text p{color:var(--slate); font-size:0.96rem;}
.lm-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.lm-row input, .lm-row select{border:1.5px solid var(--line); padding:13px 14px; font-family:inherit; font-size:0.95rem; background:var(--surface); color:var(--navy-deep); border-radius:10px; min-width:0;}
.lm-row input:focus, .lm-row select:focus{outline:none; border-color:var(--navy);}
.lm-row .btn{width:100%; padding:14px 18px; grid-column:1 / -1;}
.lm-consent{display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:0.8rem; color:var(--slate); line-height:1.5;}
.lm-consent input{margin-top:3px; accent-color:var(--red);}
.lm-consent a{color:var(--navy); text-decoration:underline;}
@media (max-width:980px){ .lm-card{grid-template-columns:1fr; padding:32px 26px;} }
@media (max-width:560px){ .lm-row{grid-template-columns:1fr;} .lm-card{padding:26px 20px;} }

/* ===== COOKIE CONSENT BANNER ===== */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:900; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; box-shadow:0 20px 50px rgba(31,61,115,0.22); padding:18px 20px; max-width:720px; margin:0 auto;
  opacity:0; transform:translateY(20px); transition:opacity .3s ease, transform .3s ease;
}
.cookie-banner.show{opacity:1; transform:translateY(0);}
.cookie-inner{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.cookie-text{flex:1; min-width:240px;}
.cookie-text strong{font-family:'Poppins','Manrope',sans-serif; font-size:0.95rem; color:var(--navy-deep); display:block; margin-bottom:4px;}
.cookie-text p{font-size:0.84rem; color:var(--slate); line-height:1.5;}
.cookie-text a{color:var(--navy); text-decoration:underline;}
.cookie-actions{display:flex; gap:10px; flex-shrink:0;}
.cookie-btn{border:1.5px solid var(--line); background:var(--surface); color:var(--navy-deep); font-family:'Poppins','Manrope',sans-serif; font-weight:700; font-size:0.8rem; padding:11px 16px; border-radius:10px; cursor:pointer; transition:.2s;}
.cookie-btn:hover{border-color:var(--navy);}
.cookie-accept{background:var(--navy); border-color:var(--navy); color:#fff;}
.cookie-accept:hover{background:var(--navy-deep);}
@media (max-width:560px){ .cookie-banner{left:10px; right:10px; bottom:74px; padding:16px;} .cookie-actions{width:100%;} .cookie-btn{flex:1;} }

/* ===== STICKY MOBILE CALL / WHATSAPP BAR ===== */
.sticky-contact{display:none;}
@media (max-width:760px){
  .sticky-contact{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:850; background:var(--surface);
    border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(31,61,115,0.10);
    padding:8px 12px calc(8px + env(safe-area-inset-bottom)); gap:10px;
  }
  .sticky-contact a{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:12px;
    font-family:'Poppins','Manrope',sans-serif; font-weight:700; font-size:0.86rem; color:#fff;
  }
  .sticky-contact svg{width:18px; height:18px;}
  .sc-call{background:var(--navy);}
  .sc-wa{background:var(--wa);}
  body{padding-bottom:70px;}
  body.menu-open .sticky-contact{display:none;}
}

/* =====================================================================
   MOTION PACK (2026) — native CSS, no libraries.
   1. Cross-document View Transitions  2. Scroll-driven reveals
   3. Aurora hero field  4. Cursor spotlight cards  5. Scroll progress
   Everything below is disabled by the reduced-motion block further down.
===================================================================== */

/* --- 1. View Transitions: pages morph instead of flashing white --- */
@view-transition{ navigation: auto; }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:vtOut .28s cubic-bezier(.4,0,.2,1) both; }
  ::view-transition-new(root){ animation:vtIn .38s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes vtOut{ to{ opacity:0; transform:translateY(-8px) scale(.995); } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(14px) scale(.995); } }
header, .sticky-contact, .cookie-banner{ view-transition-name:none; }
#siteHeader{ view-transition-name:site-header; }
footer{ view-transition-name:site-footer; }

/* --- 2. Scroll-driven reveals (replaces the JS observer where supported) --- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      opacity:1; transform:none;                 /* JS fallback state cleared */
      animation:revealUp linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 26%;
    }
    /* stagger children of a grid for a wave effect */
    .program-grid > *, .why-grid > *, .level-grid > *, .t-grid > *, .spec-grid > *, .worksheet-grid > *{
      animation:revealUp linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 22%;
    }
  }
}
@keyframes revealUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }

/* --- 3. Aurora field: soft drifting brand-colour light behind hero sections --- */
.aurora{position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; border-radius:inherit;}
.aurora span{
  position:absolute; display:block; border-radius:50%; filter:blur(70px); opacity:.5;
  will-change:transform;
}
.aurora span:nth-child(1){width:46vw; height:46vw; max-width:620px; max-height:620px; left:-6%; top:2%;
  background:radial-gradient(circle, var(--navy) 0%, transparent 68%); animation:auroraA 22s ease-in-out infinite;}
.aurora span:nth-child(2){width:38vw; height:38vw; max-width:520px; max-height:520px; right:-4%; top:-6%;
  background:radial-gradient(circle, var(--red) 0%, transparent 68%); opacity:.34; animation:auroraB 26s ease-in-out infinite;}
.aurora span:nth-child(3){width:30vw; height:30vw; max-width:420px; max-height:420px; left:38%; bottom:-10%;
  background:radial-gradient(circle, var(--gold) 0%, transparent 70%); opacity:.26; animation:auroraC 30s ease-in-out infinite;}
html[data-theme="dark"] .aurora span{opacity:.34;}
@keyframes auroraA{0%,100%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(6%,4%,0) scale(1.12);}}
@keyframes auroraB{0%,100%{transform:translate3d(0,0,0) scale(1.05);} 50%{transform:translate3d(-7%,6%,0) scale(.94);}}
@keyframes auroraC{0%,100%{transform:translate3d(0,0,0) scale(.95);} 50%{transform:translate3d(5%,-6%,0) scale(1.1);}}
.hero > .wrap, .reg-hero > .wrap, .ty-hero > .wrap{position:relative; z-index:2;}

/* --- 4. Cursor spotlight on cards (replaces the old 3D tilt) --- */
.program-card, .level-card, .t-card, .why-item, .spec-card, .worksheet-card, .form-card{
  position:relative; isolation:isolate;
}
.program-card::after, .level-card::after, .t-card::after, .spec-card::after, .worksheet-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), var(--glow), transparent 65%);
}
@media (hover:hover){
  .program-card:hover::after, .level-card:hover::after, .t-card:hover::after,
  .spec-card:hover::after, .worksheet-card:hover::after{opacity:1;}
}

/* --- 5. Reading progress bar (pure CSS scroll timeline, JS fallback) --- */
.read-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120; transform-origin:0 50%;
  background:linear-gradient(90deg, var(--navy), var(--red) 70%, var(--gold));
  transform:scaleX(var(--progress,0));
}
@supports (animation-timeline: scroll()){
  .read-progress{ animation:progressGrow linear both; animation-timeline:scroll(root block); transform:scaleX(0); }
}
@keyframes progressGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* --- 6. Headline mask reveal (no layout shift, no CLS) --- */
.reveal-text{ display:inline-block; }
@media (prefers-reduced-motion: no-preference){
  .hero h1 .rt-line{
    display:block; clip-path:inset(0 0 -0.2em 0);
  }
  .hero h1 .rt-line > span{
    display:inline-block; animation:lineUp .9s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i,0) * .09s + .1s);
  }
}
@keyframes lineUp{ from{ transform:translateY(105%); opacity:0; } to{ transform:none; opacity:1; } }

/* --- 7. Micro-interactions --- */
.btn{ will-change:transform; }
.btn:active{ transform:translateY(1px) scale(.985); }
@media (hover:hover){
  .nav-cta .nav-btn:hover{ box-shadow:0 10px 30px rgba(242,96,79,.34); }
}
a, button{ -webkit-tap-highlight-color:transparent; }

/* ===== KEYFRAMES ===== */
@keyframes floatY{0%,100%{transform:translateY(0px);} 50%{transform:translateY(-16px);}}
@keyframes spinSlow{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
@keyframes heroGlow{0%,100%{transform:scale(0.92); opacity:.7;} 50%{transform:scale(1.08); opacity:1;}}
@keyframes fadeUpIn{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);}}
@keyframes pulseGlow{0%,100%{box-shadow:0 8px 20px rgba(242,96,79,0.25);} 50%{box-shadow:0 8px 28px rgba(242,96,79,0.55);}}
@keyframes wiggle{0%,100%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);}}
@keyframes popIn{0%{opacity:0; transform:scale(.85);} 100%{opacity:1; transform:scale(1);}}

/* ===== RESPONSIVE ===== */
@media (min-width:1600px){
  nav ul{gap:32px;}
  html[lang="el"] nav ul{gap:22px;}
}
@media (max-width:1280px){
  nav ul{gap:18px;}
  nav a{font-size:0.84rem;}
  html[lang="el"] nav ul{gap:11px;}
  html[lang="el"] nav a{font-size:0.78rem;}
  .nav-cta{gap:9px;}
}
@media (max-width:1200px){
  nav ul{display:none;}
  .burger{display:flex;}
  .lang-toggle{display:none;}
  .nav-cta .nav-btn{padding:11px 18px; font-size:0.74rem;}
  .mobile-cta-row{display:block; padding-top:14px;}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;}
}
@media (max-width:980px){
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .level-grid{grid-template-columns:repeat(2,1fr);}
  .t-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px 28px;}
  .footer-brand{grid-column:1 / -1;}
  .form-row{grid-template-columns:1fr;}
  .section-head{margin-bottom:40px;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  .mobile-menu ul{padding:12px 20px 20px;}
  .why-grid{grid-template-columns:1fr;}
  .level-grid{grid-template-columns:1fr;}
  .logo img{height:36px; width:36px;}
  .logo-text{font-size:0.92rem;}
  .logo-text span{display:none;}
  .nav-cta{gap:6px;}
  .nav-call{display:none;}
  .nav-cta .nav-btn{padding:10px 14px; font-size:0.7rem;}
  .stat-inner{display:grid; grid-template-columns:1fr 1fr; gap:18px 12px;}
  .stat-item strong{font-size:1.5rem;}
  .cta-banner{padding:36px 26px; flex-direction:column; text-align:center;}
  .cta-banner .btn{width:100%;}
  .form-card{padding:28px 22px;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .carousel-arrow{width:36px; height:36px;}
  .carousel-slide .slide-caption{padding:14px 16px;}
  .carousel-slide .slide-caption strong{font-size:0.95rem;}
  .carousel-slide .slide-caption span{font-size:0.75rem;}
  .btn{padding:14px 22px; font-size:0.85rem;}
}

@media (prefers-reduced-motion: reduce){
  .aurora{display:none;}
  .read-progress{display:none;}
  *{animation-duration:0.001ms !important; animation-timeline:auto !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

:focus-visible{outline:2.5px solid var(--red); outline-offset:3px;}

/* ===== Bilingual legal pages (privacy / terms): show only the active language block ===== */
html[lang="el"] [data-lang-block="en"]{display:none;}
html:not([lang="el"]) [data-lang-block="el"]{display:none;}
.form-privacy{font-size:0.76rem; color:var(--slate); margin-top:10px; line-height:1.5;}
.form-privacy a{color:inherit; text-decoration:underline;}

/* ===== Review call-to-action (replaces sample testimonials, v4.1) ===== */
.review-cta{max-width:720px; margin:0 auto; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:40px 32px; box-shadow:var(--shadow-sm);}
.review-cta-icon{width:56px; height:56px; margin:0 auto 16px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--tint-red); color:var(--red);}
.review-cta h3{font-size:1.35rem; color:var(--navy-deep); margin-bottom:10px;}
.review-cta p{color:var(--slate); max-width:560px; margin:0 auto 22px; line-height:1.65;}
.review-cta-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
@media (max-width:560px){ .review-cta{padding:30px 20px;} .review-cta-actions .btn{width:100%;} }
[hidden]{display:none !important;}
.carousel-slide .slide-panel picture, .carousel-slide .slide-panel img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:600px){ .carousel-slide .slide-panel{aspect-ratio:4/3;} }

/* ===== Time-limited course notice (v4.4) ===== */
.course-notice{padding:28px 0 8px;}
.course-notice-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--tint-warm); border:1px solid var(--line); border-left:6px solid var(--red); border-radius:18px; padding:24px 28px;}
.course-notice-text{flex:1 1 420px; min-width:0;}
.course-notice-tag{display:inline-block; font-size:0.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--red-dark); margin-bottom:6px;}
.course-notice h2{font-size:clamp(1.15rem,2.2vw,1.5rem); margin:0 0 6px; color:var(--navy-deep);}
.course-notice p{margin:0; color:var(--slate);}
.course-notice-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.course-notice-link{color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:3px;}
@media (max-width:600px){ .course-notice-inner{padding:20px;} .course-notice-actions .btn{width:100%; justify-content:center;} }
.course-notice{padding:40px 0 0;}
.card-sublink{display:block; margin-top:12px; text-align:center; font-size:0.85rem; font-weight:600; color:var(--navy); text-decoration:underline; text-underline-offset:3px;}
.card-sublink:hover{color:var(--red-dark);}

/* Shared FAQ accordion (home #faq) — v6.0 */
.home-faq{padding:90px 0;}
.qa-list{max-width:820px; margin:0 auto;}
.qa{border-bottom:1px solid var(--line); padding:18px 0;}
.qa summary{cursor:pointer; list-style:none; font-family:'Poppins','Manrope',sans-serif; font-weight:600; color:var(--navy-deep); font-size:1.02rem; display:flex; justify-content:space-between; gap:16px;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:"+"; color:var(--red); font-weight:800; font-size:1.3rem; line-height:1; transition:transform .25s ease;}
.qa[open] summary::after{transform:rotate(45deg);}
.qa p{margin-top:10px; color:var(--slate); font-size:.95rem; line-height:1.6;}

/* Wide screens (v6.0): use more of the screen and scale type a little, so 1920–2560px+ monitors
   don't show a small column in the middle. Only rem-based sizes scale; layout stays the same. */
@media (min-width:1800px){
  html{font-size:106.25%;}
  html .wrap, html .mobile-menu ul{max-width:1320px;}
  header .wrap.nav-inner{max-width:1520px;}
}
@media (min-width:2300px){
  html{font-size:118.75%;}
  html .wrap, html .mobile-menu ul{max-width:1480px;}
  header .wrap.nav-inner{max-width:1680px;}
}

/* "For a faster reply: call / WhatsApp" hint under e-mail addresses (v6.3) */
.mail-hint{display:block; font-size:.8rem; line-height:1.4; color:var(--slate); margin-top:2px;}
.mail-hint a{text-decoration:underline; text-underline-offset:2px; color:inherit; font-weight:600;}
footer li.mail-hint{margin-top:-4px;}