:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --ink:#0f172a;
  --muted:#667085;
  --navy:#08152f;
  --line:#d9e2ec;
  --green:#22c55e;
  --blue:#3b82f6;
  --purple:#8b5cf6;
  --orange:#ffb54c;
  --shadow:0 18px 44px rgba(8,21,47,.09);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.58}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1200px, calc(100% - 32px)); margin-inline:auto}
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(217,226,236,.75)}
.header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{text-decoration:none;display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#08152f,#0f766e);color:#fff;font-weight:900;box-shadow:0 10px 22px rgba(8,21,47,.18)}
.brand-text strong{display:block;font-size:1.03rem;letter-spacing:-.01em}
.brand-text small{display:block;color:var(--muted);font-weight:700}
.main-menu{display:flex;gap:4px;align-items:center}
.main-menu a{text-decoration:none;padding:9px 10px;border-radius:10px;font-weight:800;font-size:.85rem;color:#334155}
.main-menu a:hover{background:#eef4f9}
.menu-toggle{display:none;border:0;background:#eef4f9;color:#0f172a;border-radius:10px;padding:8px 12px;font-weight:900}
.hero{background:radial-gradient(circle at 82% 15%, rgba(250,204,21,.18), transparent 22%),radial-gradient(circle at 55% 75%, rgba(34,197,94,.10), transparent 28%),linear-gradient(135deg,#f8fbff 0%, #f1f8f7 56%, #fffdf4 100%)}
.hero-grid{display:grid;grid-template-columns:1fr .95fr;gap:34px;align-items:center;padding:56px 0}
.eyebrow{margin:0 0 8px;color:#0f766e;font-size:.76rem;font-weight:950;letter-spacing:.13em;text-transform:uppercase}
.hero h1{font-size:clamp(2.6rem,5vw,5rem);line-height:.95;letter-spacing:-.05em;margin:0 0 18px;color:#08152f}
.hero-lead{font-size:clamp(1.12rem,2vw,1.42rem);font-weight:900;color:#0f4b76;margin-bottom:14px}
.hero-text{font-size:1.02rem;color:#45606e;max-width:690px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:13px;text-decoration:none;font-weight:900;font-size:.9rem}
.btn.primary{background:#08152f;color:#fff;box-shadow:0 10px 26px rgba(8,21,47,.16)}
.btn.secondary{background:#fff;border:1px solid var(--line);color:#08152f}
.hero-tags{display:flex;gap:8px;flex-wrap:wrap}
.hero-tags span{padding:8px 11px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:800;font-size:.8rem}
.hero-visual{display:grid;gap:16px}
.hero-logo,.codeweek-logo{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.totals{background:#fff;border-top:1px solid #eef3f7;border-bottom:1px solid #eef3f7}
.totals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:22px 0 10px}
.total-card{background:#f8fbfd;border-radius:18px;padding:18px 14px;text-align:center}
.total-card.highlight{background:linear-gradient(135deg,#f0fdf4,#ecfeff)}
.total-card .icon{display:block;font-size:1.35rem}
.total-card strong{display:block;font-size:clamp(1.7rem,3vw,2.45rem);line-height:1.05;margin:4px 0;color:#08152f}
.total-card small{color:var(--muted);font-weight:800}
.updated{margin:0;padding:0 0 14px;text-align:right;color:#7b8da0;font-size:.76rem}
.section{padding:72px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
.section-head h2,.intro-grid h2,.wall-header h2,.update-card h2{font-size:clamp(1.95rem,3.4vw,3.2rem);line-height:1.05;letter-spacing:-.045em;margin:0;color:#08152f}
.section-note{max-width:460px;color:var(--muted);font-size:.9rem}
.intro-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px}
.intro-grid p{font-size:1rem;color:#445c68}
.institutions-section{background:#f8fbfd}
.institution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.inst-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 18px 16px;box-shadow:0 8px 24px rgba(8,21,47,.04)}
.inst-card.green{--level:#22c55e}.inst-card.blue{--level:#3b82f6}.inst-card.purple{--level:#8b5cf6}.inst-card.none{--level:#cbd5e1}
.inst-level{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.75rem;line-height:1.22;margin-bottom:12px}
.inst-level i{width:16px;height:16px;border-radius:50%;background:var(--level);box-shadow:0 0 0 5px color-mix(in srgb, var(--level) 18%, white)}
.inst-name{font-size:1.02rem;line-height:1.25;margin:0 0 12px}
.inst-name a{text-decoration:none}
.inst-name a:hover{text-decoration:underline}
.inst-site{font-size:.78rem;color:#667085;font-weight:700;margin-bottom:16px}
.inst-site a{color:#0f4b76;text-decoration:none}
.inst-site a:hover{text-decoration:underline}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
.metric-box strong{display:block;font-family:"Courier New", ui-monospace, monospace;font-size:1.38rem;letter-spacing:.02em;color:#08152f}
.metric-box small{display:block;color:#6b7280;font-size:.72rem;line-height:1.2}
.inst-led-note{font-size:.71rem;color:#7f6f9e;margin-bottom:8px}
.level-track{display:flex;gap:4px;flex-wrap:nowrap;margin-bottom:8px}
.level-track span{height:7px;width:calc((100% - 39*4px)/40);border-radius:99px;background:#d8dee9}
.level-track span.on{background:var(--level)}
.level-ticks{display:flex;justify-content:space-around;color:#8b8fa3;font-size:.7rem;margin:2px 0 10px}
.kp-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:.8rem;color:#59657d}
.kp-bar{height:7px;background:#dbe1ea;border-radius:99px;overflow:hidden}
.kp-bar i{display:block;height:100%;background:#4b5563;border-radius:99px}
.inst-divider{height:1px;background:var(--line);margin:14px 0 10px}
.inst-status{font-size:.79rem;color:#384152}
.inst-status strong{display:block;color:#0f172a}
.definition-box{background:#f8fbfd;border:1px solid var(--line);border-radius:18px;padding:14px 16px;max-width:540px}
.definition-box strong{display:block;font-size:.95rem}
.definition-box p{margin:.4rem 0;color:#334155;font-size:.86rem}
.definition-box small{color:#6b7280}
.levels-simple{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 18px}
.level-name{padding:16px 18px;border-radius:18px;font-weight:900;font-size:1.04rem;color:#08152f}
.level-green{background:#ebfff0;border:1px solid #c6f6d5}
.level-blue{background:#eef6ff;border:1px solid #bfdbfe}
.level-purple{background:#f4efff;border:1px solid #ddd6fe}
.levels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.level-card{border-radius:22px;padding:22px;border:1px solid var(--line)}
.level-card.green{background:linear-gradient(145deg,#f4fff7,#eafbf0)}
.level-card.blue{background:linear-gradient(145deg,#f4faff,#e9f4ff)}
.level-card.purple{background:linear-gradient(145deg,#fbf9ff,#f2ecff)}
.level-dot{width:18px;height:18px;border-radius:50%;margin-bottom:16px}
.level-card.green .level-dot{background:#22c55e}.level-card.blue .level-dot{background:#3b82f6}.level-card.purple .level-dot{background:#8b5cf6}
.level-card h3{margin:0 0 14px;font-size:1.18rem;color:#08152f}
.level-card p{margin:0;color:#445969;font-size:.92rem}
.wall-section{background:#cfd4dd}
.wall-panel{background:#020f2b;color:#fff;border-radius:26px;padding:18px 20px 16px;box-shadow:var(--shadow)}
.wall-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.wall-header h2{color:#fff;font-size:clamp(1.65rem,2.7vw,2.4rem)}
.wall-header p{margin:8px 0 0;color:#c8dbff}
.pixel-wall{margin-top:14px;display:grid;grid-template-columns:repeat(84, 1fr);gap:4px;background:#020f2b}
.pixel{aspect-ratio:1;border-radius:50%;background:#11254d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);transition:background .18s ease, box-shadow .18s ease, transform .18s ease}
.pixel.on-student{background:#53ffb4;box-shadow:0 0 10px rgba(83,255,180,.7)}
.pixel.on-minute{background:#ffbf5f;box-shadow:0 0 10px rgba(255,191,95,.68)}
.pixel.on-mixed{background:#8fd0ff;box-shadow:0 0 10px rgba(143,208,255,.75)}
.wall-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:18px}
.wall-stat span{display:block;color:#c7d4ef;font-size:.88rem;margin-bottom:10px}
.big-numbers{display:flex;align-items:flex-end;gap:8px;margin-bottom:8px}
.big-numbers strong{font-family:"Courier New", ui-monospace, monospace;font-size:3rem;line-height:.95;color:#fff}
.big-numbers small{font-size:1.5rem;color:#b5bfd3}
.mini-bar{height:10px;background:#223563;border-radius:99px;overflow:hidden}
.mini-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#21e68a,#a78bfa);border-radius:99px}
.mini-bar.orange i{background:linear-gradient(90deg,#ffb54c,#ffdc7a)}
.wall-footer{margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:18px}
.wall-footer span{color:#b9c7de;font-size:.92rem}
.replay-btn{background:transparent;color:#fff;border:1px solid #8fb6ff;border-radius:14px;padding:10px 14px;font-weight:900;cursor:pointer}
.replay-btn:hover{background:#081a43}
.update-section{background:#f8fbfd}
.update-card{display:grid;grid-template-columns:.82fr 1.18fr;gap:28px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:var(--shadow)}
.update-card p{color:#445c68}
.site-link{display:inline-flex;margin-top:8px;background:#0f766e;color:#fff;text-decoration:none;border-radius:12px;padding:11px 14px;font-weight:900}
.site-footer{background:#061427;color:#dbe5f0;padding:34px 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr auto;gap:20px;align-items:center}
.site-footer p{margin:4px 0 0;color:#9ab0c2}
.footer-year{font-size:2rem;font-weight:900;color:#fde047}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}
@media (max-width:1040px){
  .menu-toggle{display:block}
  .main-menu{display:none;position:absolute;top:70px;left:16px;right:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
  .main-menu.open{display:flex}
  .hero-grid,.intro-grid,.update-card{grid-template-columns:1fr}
  .institution-grid{grid-template-columns:repeat(2,1fr)}
  .levels-simple,.levels-grid{grid-template-columns:1fr}
  .wall-stats{grid-template-columns:1fr}
}
@media (max-width:720px){
  .wrap{width:min(100% - 22px,1200px)}
  .hero-grid{padding:42px 0}
  .hero h1{font-size:2.8rem}
  .totals-grid{grid-template-columns:1fr 1fr}
  .institution-grid{grid-template-columns:1fr}
  .section{padding:56px 0}
  .section-head,.wall-header,.wall-footer,.footer-grid{grid-template-columns:1fr;display:grid}
  .section-head{align-items:flex-start}
  .pixel-wall{gap:3px}
  .big-numbers strong{font-size:2.4rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}


/* ===== V3 – Fiľakovo blue/yellow visual update ===== */
:root{
  --city-blue:#0758a8;
  --city-blue-dark:#073763;
  --city-blue-soft:#eaf4ff;
  --city-yellow:#ffd21f;
  --city-yellow-soft:#fff7c7;
}
body{
  background:#eef4fb;
  background-image:linear-gradient(180deg,#f4f8fd 0%,#eef4fb 55%,#f8fbff 100%);
}
.site-header{border-bottom-color:#cbdff4}
.brand-icon{
  width:48px;height:48px;object-fit:cover;border-radius:50%;display:block;
  border:3px solid var(--city-yellow);box-shadow:0 8px 20px rgba(7,88,168,.18);
}
.brand-mark{display:none}
.main-menu a{display:grid;line-height:1.05;gap:3px;text-align:center}
.main-menu a span{font-size:.82rem}.main-menu a small{font-size:.68rem;color:#718096;font-weight:700}
.hero{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,210,31,.24),transparent 27%),
    linear-gradient(135deg,#e8f4ff 0%,#f8fbff 52%,#fff8d5 100%);
  border-bottom:1px solid #d8e7f6;
}
.hero-shell{
  min-height:520px;padding:60px 0;display:grid;grid-template-columns:minmax(160px,240px) minmax(0,1fr) minmax(160px,240px);
  gap:34px;align-items:center;
}
.hero-center{text-align:center;max-width:760px;margin-inline:auto}
.hero-center h1{
  font-size:clamp(1.1rem,5.1vw,2.2rem);
  line-height:1.05;
  letter-spacing:-.035em;
  color:var(--city-blue-dark);
  margin:0 0 20px;
  white-space:nowrap;
}
.hero-lead{display:grid;gap:4px;color:var(--city-blue);font-size:clamp(1.08rem,1.8vw,1.35rem)}
.codeweek-note{
  display:grid;gap:4px;margin:22px auto;padding:13px 16px;max-width:720px;border-radius:16px;
  background:linear-gradient(135deg,var(--city-blue),#1681cf);color:#fff;box-shadow:0 12px 30px rgba(7,88,168,.18);
  font-size:.88rem;
}
.codeweek-note strong:last-child{color:#fff7bf}
.hero-text{display:grid;gap:8px;max-width:760px;margin:0 auto;color:#3f566a}
.hero-actions{justify-content:center}
.btn{display:grid;gap:1px;min-width:150px}
.btn small{font-size:.7rem;font-weight:800;opacity:.76}
.btn.primary{background:var(--city-blue);box-shadow:0 10px 26px rgba(7,88,168,.20)}
.btn.secondary{border-color:#bdd6ef;background:#fff;color:var(--city-blue-dark)}
.hero-tags{justify-content:center}
.hero-logo-side{display:flex;justify-content:center;align-items:center}
.hero-logo-side img{
  width:100%;max-width:230px;max-height:230px;object-fit:contain;background:#fff;border:1px solid #cfe0f0;border-radius:24px;
  box-shadow:0 16px 38px rgba(7,55,99,.12);
}
.hero-logo-left img{border-bottom:6px solid var(--city-yellow)}
.hero-logo-right img{border-bottom:6px solid var(--city-blue)}
.hero-grid,.hero-copy,.hero-visual{ /* old layout no longer used */ }

.eyebrow{color:var(--city-blue);display:grid;gap:1px}
.eyebrow span:last-child{color:#68788c}
.section-head h2 span,.wall-header h2 span,.section-note span,.definition-box span,.updated span,
.total-card small span,.wall-header p span,.wall-stat>span b,.wall-footer>span b{display:block}
.section-head h2 span:last-child{color:#3d627f;font-size:.82em;margin-top:4px}
.section-note span+span{margin-top:5px}
.total-card.highlight{background:linear-gradient(135deg,#e7f3ff,#fff6bd)}
.total-card strong{color:var(--city-blue-dark)}
.updated{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap}

.institutions-section{background:#eaf2fb}
.inst-card{border-color:#ccdaea}
.inst-name a{color:var(--city-blue-dark)}
.inst-site a{color:var(--city-blue)}

.definition-box{background:#f4f9ff;border-color:#cddff1}
.definition-box strong{display:grid;gap:1px;color:var(--city-blue-dark)}
.definition-box strong span:last-child{color:#6b7280;font-size:.9em}
.definition-box small{display:grid;gap:2px;margin-top:5px}

.level-green{background:#f3fbff;border-color:#b7def9}
.level-blue{background:#e9f3ff;border-color:#98c5ef}
.level-purple{background:#fff6c7;border-color:#f2d861}
.level-card.green{background:linear-gradient(145deg,#f7fcff,#eaf6ff)}
.level-card.blue{background:linear-gradient(145deg,#eff7ff,#dceeff)}
.level-card.purple{background:linear-gradient(145deg,#fffdf1,#fff3a8)}
.level-card.green .level-dot{background:#59a8e8}.level-card.blue .level-dot{background:#0758a8}.level-card.purple .level-dot{background:#ffd21f;box-shadow:0 0 0 1px #d6ae00}

.wall-section{background:linear-gradient(180deg,#c7d9eb,#e5eef8)}
.wall-panel{background:#06142e;border:1px solid #173f71}
.wall-header h2 span:last-child{color:#ffd21f;margin-top:3px}
.wall-header p{display:grid;gap:2px}
.wall-header p span:last-child{color:#ffe98d}
.pixel-wall{background:#06142e}
.pixel{background:#13294c}
.pixel.on-student{background:#62c5ff;box-shadow:0 0 10px rgba(98,197,255,.8)}
.pixel.on-minute{background:#ffd21f;box-shadow:0 0 10px rgba(255,210,31,.78)}
.pixel.on-mixed{background:#fff4a7;box-shadow:0 0 11px rgba(255,244,167,.85)}
.wall-stat>span{display:grid;gap:2px}
.wall-stat>span b:last-child{color:#ffd86a;font-weight:600}
.mini-bar i{background:linear-gradient(90deg,#1da1f2,#75cfff)}
.mini-bar.orange i{background:linear-gradient(90deg,#ffd21f,#fff1a0)}
.wall-footer>span{display:grid;gap:2px}
.wall-footer>span b:last-child{color:#ffd86a}
.replay-btn{border-color:#ffd21f;color:#fff7c2}
.update-section{background:#eef5fc}.site-link{background:var(--city-blue)}
.site-footer{background:#061b34}.footer-year{color:var(--city-yellow)}

@media(max-width:980px){
  .hero-shell{grid-template-columns:1fr 1fr;gap:18px;padding:42px 0}
  .hero-center{grid-column:1/-1;grid-row:1}
  .hero-logo-left{grid-column:1;grid-row:2}.hero-logo-right{grid-column:2;grid-row:2}
  .hero-logo-side img{max-width:220px;max-height:180px}
}
@media(max-width:620px){
  .hero-shell{grid-template-columns:1fr;gap:14px}
  .hero-center,.hero-logo-left,.hero-logo-right{grid-column:1}
  .hero-center{grid-row:1}.hero-logo-left{grid-row:2}.hero-logo-right{grid-row:3}
  .hero-center h1{font-size:clamp(1.05rem,5.4vw,2rem);white-space:nowrap}
  .hero-logo-side img{max-width:260px;max-height:180px}
  .updated{justify-content:flex-start}
}

.inst-level>span{display:grid;gap:2px}.inst-level>span b{font-weight:800}.inst-level>span b:last-child{color:#58677a;font-weight:700}
.metric-box small span,.inst-led-note span,.kp-row>span b{display:block}.inst-led-note{display:grid;gap:1px}.kp-row>span{display:grid;gap:1px}.kp-row>span b{font-weight:600}
.inst-status{display:grid;gap:5px}.inst-status strong+strong{color:#52647a;font-weight:600}
\n\n/* ===== V4 – requested hero logos + FIĽAKOVO 780 FÜLEK wall title ===== */\n.hero-logo-side img{\n  aspect-ratio:1 / 1;\n  max-width:240px;\n  max-height:240px;\n  object-fit:contain;\n  padding:4px;\n}\n.wall-header-centered{\n  display:block;\n  text-align:center;\n  margin-bottom:18px;\n}\n.wall-header-centered .wall-main-title{\n  display:block;\n  margin:0;\n  color:#ffffff;\n  font-size:clamp(1.85rem,4vw,3.45rem);\n  font-weight:950;\n  letter-spacing:.035em;\n  line-height:1;\n}\n.wall-main-title .wall-number{\n  display:inline;\n  color:var(--city-yellow);\n  font-size:1.08em;\n  text-shadow:0 0 18px rgba(255,210,31,.25);\n}\n.wall-header-centered .wall-subtitle{\n  display:grid;\n  gap:2px;\n  margin:14px 0 9px;\n  color:#ffffff;\n  font-size:clamp(1.05rem,2vw,1.5rem);\n  font-weight:850;\n  line-height:1.25;\n}\n.wall-header-centered .wall-subtitle span:last-child{color:#ffe178}\n.wall-header-centered .wall-led-text{\n  display:grid;\n  gap:1px;\n  margin:0;\n  color:#c8dbff;\n  font-size:.94rem;\n  line-height:1.35;\n}\n.wall-header-centered .wall-led-text span:last-child{color:#ffedaa}\n@media(max-width:980px){\n  .hero-logo-side img{max-width:230px;max-height:230px}\n}\n@media(max-width:620px){\n  .hero-logo-side img{max-width:235px;max-height:235px}\n  .wall-header-centered .wall-main-title{font-size:clamp(1.45rem,8vw,2.2rem)}\n}\n

/* v5 – bilingual section headings and cleaner project intro */
.bilingual-title{
  display:grid;
  gap:4px;
}
.bilingual-title span{
  display:block;
}
.bilingual-title span:last-child{
  color:#3d627f;
  font-size:.82em;
}
.project-intro{
  display:grid;
  gap:7px;
  margin-bottom:22px;
  padding-bottom:20px;
  border-bottom:1px solid #d7e3ef;
  font-weight:700;
  color:#294e6d !important;
}
.project-intro span{
  display:block;
}
.project-intro span:last-child{
  color:#4c6680;
}


/* ===== V6 – compact hero, inline bilingual labels, compact update block ===== */

/* Hero: larger single-line title, content below it */
.hero-shell{
  min-height:auto;
  padding:28px 0 30px;
  display:block;
}
.hero-main-title{
  margin:0 auto 20px;
  text-align:center;
  color:var(--city-blue-dark);
  font-size:clamp(2rem,4vw,3.65rem);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:950;
  white-space:nowrap;
}
.hero-lower{
  display:grid;
  grid-template-columns:minmax(145px,205px) minmax(0,1fr) minmax(145px,205px);
  align-items:center;
  gap:24px;
  max-width:1040px;
  margin-inline:auto;
}
.hero-center{
  max-width:620px;
  margin-inline:auto;
  text-align:center;
}
.hero-lead{
  margin:0 0 10px;
  gap:1px;
  font-size:clamp(.94rem,1.45vw,1.14rem);
  line-height:1.28;
}
.codeweek-note{
  gap:2px;
  margin:10px auto 0;
  padding:10px 13px;
  max-width:650px;
  border-radius:13px;
  font-size:clamp(.68rem,1vw,.80rem);
  line-height:1.3;
}
.codeweek-note strong{
  display:block;
  white-space:nowrap;
}
.hero-logo-side img{
  max-width:185px;
  max-height:185px;
  border-radius:20px;
}

/* One-line bilingual micro-headings */
.eyebrow.inline-bilingual{
  display:block;
  white-space:nowrap;
  color:var(--city-blue);
  letter-spacing:.10em;
}

/* Update section: title exactly two lines, visually lower/shorter */
.update-section{
  padding:38px 0;
}
.update-card{
  grid-template-columns:minmax(430px,.92fr) 1.08fr;
  gap:24px;
  padding:20px 24px;
  min-height:0;
  align-items:center;
}
.update-card .eyebrow{
  margin-bottom:5px;
}
.update-card .update-title{
  font-size:clamp(1.32rem,2.05vw,1.78rem);
  line-height:1.08;
  letter-spacing:-.025em;
  gap:3px;
}
.update-card .update-title span{
  white-space:nowrap;
}
.update-card .update-title span:last-child{
  font-size:1em;
  color:#3d627f;
}
.update-card p{
  margin:0 0 8px;
  font-size:.88rem;
  line-height:1.45;
}
.update-card .site-link{
  margin-top:3px;
  padding:8px 12px;
  font-size:.78rem;
}

/* Slightly more compact project title without changing the rest */
#projekt .bilingual-title{
  font-size:clamp(1.75rem,3vw,2.75rem);
  line-height:1.04;
}

/* Keep desktop title on one line; gracefully reduce on smaller screens */
@media(max-width:980px){
  .hero-shell{padding:24px 0 28px}
  .hero-main-title{font-size:clamp(1.55rem,5vw,2.8rem)}
  .hero-lower{grid-template-columns:150px minmax(0,1fr) 150px;gap:16px}
  .hero-logo-side img{max-width:145px;max-height:145px}
  .codeweek-note strong{white-space:normal}
  .update-card{grid-template-columns:1fr}
  .update-card .update-title span{white-space:normal}
}
@media(max-width:680px){
  .hero-main-title{
    font-size:clamp(1.08rem,5.2vw,1.75rem);
    white-space:nowrap;
    margin-bottom:16px;
  }
  .hero-lower{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .hero-center{
    grid-column:1/-1;
    grid-row:1;
  }
  .hero-logo-left{grid-column:1;grid-row:2}
  .hero-logo-right{grid-column:2;grid-row:2}
  .hero-logo-side img{max-width:135px;max-height:135px}
  .eyebrow.inline-bilingual{
    white-space:normal;
    font-size:.69rem;
  }
  .update-section{padding:30px 0}
  .update-card{padding:18px}
  .update-card .update-title{font-size:1.28rem}
}


/* ===== V7 – colorful main title ===== */
.hero-main-title .title-codecity{
  color:#0b63c7;
}
.hero-main-title .title-kodsity{
  color:#159447;
}
.hero-main-title .title-kodvaros{
  color:#7a2db7;
}
.hero-main-title .title-sep{
  color:#f4b400;
}


/* ===== V8 – updated main title colors ===== */
.hero-main-title .title-codecity{
  color:#d62828;   /* piros / red */
}
.hero-main-title .title-kodsity{
  color:#1d4ed8;   /* kék / blue */
}
.hero-main-title .title-kodvaros{
  color:#16803a;   /* zöld / green */
}
.hero-main-title .title-sep{
  color:#3b6ea8;   /* harmonizáló kék árnyalat / matching blue shade */
}


/* ===== V9 – project section logo ===== */
.project-logo-wrap{
  margin-top:18px;
  display:flex;
  justify-content:flex-start;
}
.project-logo{
  width:min(100%, 360px);
  height:auto;
  display:block;
  filter:drop-shadow(0 10px 24px rgba(8,21,47,.10));
}
@media (max-width:720px){
  .project-logo-wrap{
    justify-content:center;
  }
  .project-logo{
    width:min(100%, 300px);
  }
}


/* ===== V11 – lower project block + redesigned pixel digits ===== */
#projekt.section{
  padding:44px 0 42px;
}
#projekt .intro-grid{
  gap:26px;
  align-items:start;
}
#projekt .project-logo-wrap{
  margin-top:10px;
}
#projekt .project-logo{
  width:min(100%, 300px);
}
#projekt p{
  margin-bottom:.7rem;
}


/* ===== V12 – még kompaktabb projektblokk ===== */
#projekt.section{
  padding-top:30px;
  padding-bottom:30px;
}
#projekt .intro-grid{
  gap:22px;
}
#projekt .project-logo-wrap{
  margin-top:7px;
}
#projekt .project-logo{
  width:min(100%, 255px);
}
#projekt .project-intro{
  margin-bottom:12px;
  padding-bottom:12px;
}
#projekt p{
  margin-top:0;
  margin-bottom:.5rem;
  line-height:1.45;
}


/* ===== V13 – softer title colors, larger logos, clearer KódPerc icon ===== */

/* Softer, less saturated main-title colors */
.hero-main-title .title-codecity{
  color:#b94b4b;   /* tompított piros */
}
.hero-main-title .title-kodsity{
  color:#456fa6;   /* visszafogott kék */
}
.hero-main-title .title-kodvaros{
  color:#4f8a61;   /* tompított zöld */
}
.hero-main-title .title-sep{
  color:#6d88a8;   /* finom kékesszürke */
}

/* Larger left/right logos under the main title */
.hero-logo-side img{
  max-width:235px;
  max-height:215px;
}

/* Make the activity logo larger WITHOUT changing project-section padding/height */
#projekt .project-logo-wrap{
  margin-top:4px;
  min-height:0;
}
#projekt .project-logo{
  width:min(100%, 410px);
  max-height:150px;
  object-fit:contain;
  object-position:left center;
}

/* Slightly cleaner clock icon alignment */
.total-card .icon{
  line-height:1;
}

@media(max-width:980px){
  .hero-logo-side img{
    max-width:190px;
    max-height:180px;
  }
  #projekt .project-logo{
    width:min(100%, 350px);
    max-height:135px;
  }
}

@media(max-width:680px){
  .hero-logo-side img{
    max-width:155px;
    max-height:150px;
  }
  #projekt .project-logo{
    width:min(100%, 320px);
    max-height:125px;
    object-position:center;
  }
}


/* ===== V14 – larger activity logo spacing + Slovak/Hungarian level names ===== */

/* More breathing room below the bilingual project title */
#projekt .project-logo-wrap{
  margin-top:26px;
}

/* Bigger activity logo */
#projekt .project-logo{
  width:min(100%, 470px);
  max-height:190px;
  object-fit:contain;
  object-position:left center;
}

/* Two-line Slovak/Hungarian labels in compact level strip */
.level-name{
  display:grid;
  gap:3px;
  line-height:1.18;
}
.level-name .level-sk{
  display:block;
  font-weight:950;
  color:#102a43;
}
.level-name .level-hu{
  display:block;
  font-weight:800;
  color:#587086;
  font-size:.92em;
}

/* Two-line names in detailed level cards */
.level-bilingual-name{
  display:grid;
  gap:3px;
  line-height:1.16;
}
.level-bilingual-name span{
  display:block;
}
.level-bilingual-name span:first-child{
  color:#102a43;
  font-weight:950;
}
.level-bilingual-name span:last-child{
  color:#587086;
  font-weight:800;
  font-size:.92em;
}

@media(max-width:980px){
  #projekt .project-logo{
    width:min(100%, 410px);
    max-height:170px;
  }
}

@media(max-width:680px){
  #projekt .project-logo-wrap{
    margin-top:20px;
  }
  #projekt .project-logo{
    width:min(100%, 350px);
    max-height:150px;
    object-position:center;
  }
}


/* ===== V15 – logo alignment + equal-height 780 digits ===== */

/* The right CodeWeek logo sits a little farther right for visual symmetry */
.hero-logo-right{
  transform:translateX(14px);
}

/* Center the activity logo under the bilingual heading,
   with a very small optical shift to the left */
#projekt .project-logo-wrap{
  justify-content:center;
}
#projekt .project-logo{
  object-position:center;
  transform:translateX(-10px);
}

@media(max-width:980px){
  .hero-logo-right{
    transform:translateX(8px);
  }
  #projekt .project-logo{
    transform:translateX(-6px);
  }
}

@media(max-width:680px){
  .hero-logo-right{
    transform:none;
  }
  #projekt .project-logo{
    transform:none;
  }
}


/* ===== V16 – főcím színei visszaállítva a V12 változat szerint ===== */
.hero-main-title .title-codecity{
  color:#d62828;
}
.hero-main-title .title-kodsity{
  color:#1d4ed8;
}
.hero-main-title .title-kodvaros{
  color:#16803a;
}
.hero-main-title .title-sep{
  color:#3b6ea8;
}


/* ===== V17 – activity logo centered under the title, optically shifted left ===== */
#projekt .project-logo-wrap{
  justify-content:center;
}
#projekt .project-logo{
  object-position:center;
  transform:translateX(-24px);
}

@media(max-width:980px){
  #projekt .project-logo{
    transform:translateX(-16px);
  }
}

@media(max-width:680px){
  #projekt .project-logo{
    transform:translateX(-8px);
  }
}


/* ===== V18 – activity logo moved further left under "tevékenység" ===== */
#projekt .project-logo-wrap{
  justify-content:center;
}
#projekt .project-logo{
  object-position:center;
  transform:translateX(-72px);
}

@media(max-width:980px){
  #projekt .project-logo{
    transform:translateX(-48px);
  }
}

@media(max-width:680px){
  #projekt .project-logo{
    transform:translateX(-16px);
  }
}


/* ===== V19 – új főcím-betűstílus ===== */
.hero-main-title{
  font-family:"Trebuchet MS","Aptos Display","Segoe UI Variable Display","Segoe UI",sans-serif;
  font-weight:900;
  letter-spacing:-.025em;
  line-height:1.02;
}


/* ===== V22 – Zbierka nápadov / Ötlettár ===== */
.idea-library{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid rgba(154,176,194,.28);
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);
  gap:28px;
  align-items:center;
}
.idea-library-head strong{
  display:block;
  font-size:1.18rem;
  color:#fff;
}
.idea-library-head p{
  margin:6px 0 0;
  line-height:1.45;
}
.idea-library-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.idea-file-link{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:13px 14px;
  border:1px solid rgba(143,182,255,.32);
  border-radius:15px;
  background:rgba(255,255,255,.055);
  color:#eef6ff;
  text-decoration:none;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.idea-file-link:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.10);
  border-color:#8fb6ff;
}
.idea-file-link > span:last-child{
  display:grid;
  gap:2px;
  min-width:0;
}
.idea-file-link b{
  color:#fff;
}
.idea-file-link small{
  color:#9ab0c2;
  overflow-wrap:anywhere;
}
.idea-file-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:#d62828;
  color:#fff;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.04em;
}

/* Az új, hatodik menüpont mellett is maradjon kényelmes a fejléc. */
@media (max-width:1180px) and (min-width:1041px){
  .main-menu{gap:1px}
  .main-menu a{
    padding:8px 7px;
    font-size:.78rem;
  }
  .header-inner{gap:12px}
}

@media (max-width:720px){
  .idea-library{
    grid-template-columns:1fr;
    gap:16px;
  }
  .idea-library-links{
    grid-template-columns:1fr;
  }
}


/* ===== V23 – Ötlettár és Kontakt blokkok sorrendje ===== */
.site-footer .idea-library{
  margin-top:0;
  padding-top:0;
  padding-bottom:24px;
  border-top:0;
}
.site-footer .contact-footer{
  margin-top:0;
  padding-top:22px;
  border-top:1px solid rgba(154,176,194,.28);
}