/* ==========================================================================
   Nagyvallalati Innovacios & Befektetesi Program - Startup Campus x iScale
   Shared stylesheet for index.html and the three challenge-*.html pages.

   Previously this lived inline in all four pages, which is how they drifted
   apart. Edit it here once and every page picks up the change.
   ========================================================================== */

/* ==========================================================================
   SELF-HOSTED FONTS
   Previously these came from fonts.googleapis.com, which meant a render-blocking
   third-party stylesheet and every visitor's IP going to Google - a real GDPR
   problem for an EU-funded Hungarian site that links to its own privacy policy.

   Each file is subsetted to the 156 glyphs this site actually needs: everything
   that appears in the pages, the arrows and ticks from CSS content, the full
   Hungarian alphabet in both cases, and the punctuation a Hungarian marketing
   site plausibly reaches for. 449 KB across 10 files became 79.5 KB across 5.

   The trade: a character outside that set falls back to the system font. Ordinary
   Hungarian or English copy edits are safe; adding a new language is not. To
   regenerate, see assets/fonts/README.md.
   ========================================================================== */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/space-grotesk-600.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/space-grotesk-700.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/inter-400.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/inter-600.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/inter-700.woff2') format('woff2');
}

:root{
  /* --- Brand palette (per design guidelines) --- */
  --navy:#000B1D;
  --navy-soft:#040f24;
  --surface:#0b1830;
  --surface-2:#101f42;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);
  --coral:#F05A47;
  /* Coral for light backgrounds. #F05A47 is only 3.36:1 on white and 2.79:1 on the
     pale chip, so it fails AA as text and cannot carry white text either. This is
     the lightest value that clears 4.5:1 in all four light contexts. On navy the
     original still measures 5.27-5.87:1, so dark sections keep it. */
  --coral-ink:#C2311F;
  --coral-dim:rgba(240,90,71,.16);
  /* Not a brand colour - the criteria card's "yes" accent and nothing else.
     Darkened from #2ea86f, which was 3.02:1 both as white-on-green and as a
     tick on the white card; this is 5.37:1 both ways. */
  --green:#20794f;
  --slate:#333333;
  --slate-soft:#5b6572;
  --white:#FFFFFF;
  --off:#f4f5f7;
  --maxw:1180px;
  --radius:18px;
}
*{box-sizing:border-box;}
/* scroll-padding-top keeps fragment jumps clear of the sticky header, which
   measures 75px down to 561px, 71px at 560px where the Jelentkezz button hides,
   and 67px below 380px. Section padding covered it on its own at 100px, but it
   drops to 70px at 560px and 56px at 380px; 80px clears the tallest header at
   any width.
   scrollbar-gutter reserves the classic-scrollbar column whether or not the bar
   is drawn, so body.nav-open{overflow:hidden} no longer shifts the page 7px.
   It must sit here on html - set on body it has no effect on the viewport. */
html{scroll-behavior:smooth; scroll-padding-top:80px; scrollbar-gutter:stable;}
body{
  margin:0; background:var(--white); color:var(--slate);
  font-family:'Inter',system-ui,sans-serif; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--coral-ink); color:#fff; }
h1,h2,h3,h4{ font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-.01em; font-weight:700; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:1; }
section{ padding:100px 0; position:relative; }

.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:16px;
}
.kicker::before{ content:""; width:20px; height:2px; background:var(--coral); }
.on-light .kicker::before{ background:var(--coral-ink); }
.on-dark .kicker{ color:#ffb6ac; }
.on-light .kicker{ color:var(--coral-ink); }

h2{ font-size:clamp(28px,3.2vw,36px); font-weight:700; letter-spacing:-.02em; }
/* Reading copy is sized in rem so the reader's own browser font-size setting
   scales it (1rem = their default, 16px unless they changed it). UI furniture -
   nav, buttons, chips, kickers, labels and headings - deliberately stays in px,
   because those sizes are tied to the header geometry and to the 1199px/560px
   breakpoints app.js also reads. Keep that split when adding rules. */
.lede{ margin-top:16px; font-size:1.0625rem; color:var(--slate-soft); max-width:640px; }
.on-dark .lede{ color:#b7c0d6; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 28px; border-radius:999px; font-weight:600; font-size:14.5px;
  letter-spacing:.03em; text-transform:uppercase;
  border:1.5px solid transparent; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap; font-family:'Inter',sans-serif;
}
.btn-primary{ background:var(--coral-ink); color:#fff; box-shadow:0 10px 26px -10px rgba(240,90,71,.7); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(240,90,71,.75); }
.btn-outline-dark{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn-outline-dark:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
.btn-outline-light{ border-color:rgba(0,11,29,.25); color:var(--navy); }
.btn-outline-light:hover{ background:rgba(0,11,29,.05); border-color:var(--navy); }
.btn-small{ padding:10px 18px; font-size:12.5px; }

/* ---------- NAV ---------- */
header.site{ position:sticky; top:0; z-index:100; background:rgba(0,11,29,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:var(--maxw); margin:0 auto; gap:20px; }
.brand{ display:flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13.5px; color:#fff; letter-spacing:-.01em; flex:none;}
/* The two real brand marks, replacing a placeholder coral "SC" tile. Sized by
   height so each keeps its own aspect ratio - the Startup Campus S is portrait
   (0.68:1), the iScale dot cluster landscape (1.22:1). flex:none so the header
   overflow ladder still holds. */
.brand .mark{ width:auto; flex:none; display:block; }
.brand .mark-sc{ height:24px; }
.brand .mark-is{ height:18px; }
/* Must be a weight the font <link> actually loads (600/700). At 400 the browser
   fell back and fetched a whole Space Grotesk 500 face to draw this one glyph. */
.brand .x{ color:#96a2bd; font-weight:600; padding:0 1px; }
nav.links{ display:flex; align-items:center; gap:26px; }
nav.links > a,
.has-drop > a{ font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#c3cbdc; transition:color .2s ease; white-space:nowrap; }
nav.links > a:hover,
.has-drop > a:hover{ color:#fff; }
.has-drop{ position:relative; }
.has-drop > a{ display:flex; align-items:center; gap:5px; }
.has-drop .caret{ width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-top:-3px; }
/* Hidden with opacity and pointer-events, not visibility: visibility:hidden takes
   the three challenge links out of the accessibility tree, and a screen reader in
   browse mode moves a virtual cursor without setting DOM focus, so :focus-within
   never matched - which left the two sibling challenges with no reachable route
   from a challenge page at all. Kept in the tree they read as three ordinary nav
   links, and focusing one still matches :focus-within, so a focused link is never
   an invisible one. */
.dropdown{
  position:absolute; top:calc(100% + 14px); left:50%;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; padding:10px; min-width:340px;
  opacity:0; pointer-events:none; transform:translateX(-50%) translateY(6px); transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.5);
}
/* Bridges the 14px gap between the trigger and the panel. Without it the
   pointer leaves .has-drop on the way down and the panel closes mid-travel;
   the 0.2s transition only grants about a 200ms grace window. It lives inside
   .dropdown, so while the panel is visibility:hidden the bridge cannot take
   pointer events either. */
.dropdown::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.has-drop:hover .dropdown,
.has-drop:focus-within .dropdown{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.dropdown a{ display:block; padding:12px 14px; border-radius:9px; font-size:13.5px; font-weight:600; color:#dbe1ee; text-transform:none; letter-spacing:0; }
.dropdown a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.dropdown a.current{ background:rgba(240,90,71,.14); color:#fff; }
.nav-actions{ display:flex; align-items:center; gap:12px; flex:none; }
.burger{ display:none; background:none; border:1px solid var(--line-strong); border-radius:8px; width:40px; height:38px; color:#fff; cursor:pointer; align-items:center; justify-content:center; font-size:18px; }

/* ---------- HERO ---------- */
.hero{ background:radial-gradient(ellipse 90% 70% at 20% 0%, #0d1f42 0%, var(--navy) 62%); color:#fff; padding:88px 0 90px; overflow:hidden; position:relative; }
.hero::after{
  content:""; position:absolute; right:-180px; top:-160px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(240,90,71,.28), transparent 70%); pointer-events:none;
}
.hero-inner{ max-width:820px; }
.hero h1{ font-size:clamp(34px,5vw,54px); line-height:1.08; letter-spacing:-.02em; color:#fff; margin-top:10px; }
.hero-cta{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.hero-para{ font-size:1.03125rem; color:#b7c0d6; margin-top:18px; max-width:720px; }
.hero-para:first-of-type{ margin-top:26px; }

.hero-stats{ display:flex; gap:14px; margin-top:52px; flex-wrap:wrap; }
.stat-chip{ border:1px solid var(--line); background:rgba(255,255,255,.04); border-radius:14px; padding:16px 20px; display:flex; flex-direction:column; gap:5px; min-width:150px; }
.stat-chip .num{ font-family:'Space Grotesk',sans-serif; font-size:21px; font-weight:700; color:#fff; }
.stat-chip .lab{ font-size:12px; color:#a9b3c9; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }

/* ---------- CHALLENGE AREAS ---------- */
.areas-sec{ background:var(--off); }
.areas-intro{ max-width:680px; }
.areas-grid{ display:flex; flex-direction:column; gap:20px; margin-top:44px; }
.area-card{ border:1px solid #e7e7ea; border-radius:22px; padding:34px; background:#fff; display:grid; grid-template-columns:auto 1fr; gap:28px; }
.area-card .area-num{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; color:var(--coral-ink);
  width:44px; height:44px; border-radius:12px; background:var(--coral-dim); display:flex; align-items:center; justify-content:center; flex:none;
}
.area-card h3{ font-size:19px; color:var(--navy); margin-bottom:10px; }
.area-card p{ font-size:1rem; color:var(--slate); margin-bottom:16px; }
.area-tags-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--slate-soft); margin-bottom:10px; }
.area-tags{ display:flex; flex-direction:column; gap:8px; }
/* Same shape as .criteria-card li: as a flex container the arrow and the text were
   separate items, so "Teljesitmenydiagnosztika" could not wrap and held the card
   11px open at 280px. Block flow, arrow positioned out of it. */
.area-tags li{ list-style:none; font-size:0.96875rem; color:var(--slate); position:relative; padding-left:22px; }
.area-tags li::before{ content:"→"; content:"→" / ""; color:var(--coral-ink); font-weight:700; position:absolute; left:0; top:0; }

/* ---------- PROGRAM (light) ---------- */
.on-light{ background:var(--white); color:var(--slate); }
.on-light h2{ color:var(--navy); }
.intro-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; margin-top:44px; }
.intro-grid p{ color:var(--slate); font-size:1.03125rem; margin-bottom:18px; }
.intro-grid p:last-child{ margin-bottom:0; }
.offer-list{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.offer-item{ border:1px solid #e7e7ea; border-radius:14px; padding:16px 18px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15.5px; color:var(--navy); background:var(--off); }
/* 404.html reuses these rows as links; a link needs a hover affordance. */
a.offer-item{ transition:border-color .2s ease, background .2s ease; }
a.offer-item:hover{ border-color:var(--coral-ink); background:var(--white); }
.why-box{ border:1px solid #e7e7ea; border-radius:20px; padding:30px; background:var(--off); }
.why-box h3{ font-size:19px; color:var(--navy); margin-bottom:20px; }
.why-row{ display:flex; gap:14px; margin-bottom:18px; align-items:flex-start; }
.why-row:last-child{ margin-bottom:0; }
.why-row .dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--coral-ink); margin-top:8px; }
.why-row p{ font-size:1rem; color:var(--slate); }
.why-row p b{ color:var(--navy); font-weight:700; }

/* ---------- JELENTKEZÉS (light, off bg) ---------- */
.apply-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:44px; }
.criteria-card{ border:1px solid #e7e7ea; border-radius:20px; padding:32px; min-width:0; }
.criteria-card.yes{ background:#fff; border-color:#dcece6; }
.criteria-card.no{ background:#fff; border-color:#f4dcd8; }
.criteria-card h3{ font-size:19px; color:var(--navy); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.criteria-card h3 .tag{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex:none; }
.criteria-card.yes h3 .tag{ background:var(--green); }
.criteria-card.no h3 .tag{ background:var(--coral-ink); }
.criteria-card ul{ display:flex; flex-direction:column; gap:14px; }
/* Was display:flex, which made <b>Termekerettseg:</b> and the sentence after it two
   separate flex items - neither could wrap into the other, so each held the card
   open at its own longest word and the section overflowed by 120px at 320px.
   As one block they flow together; the tick is positioned out of the text flow. */
.criteria-card li{ list-style:none; font-size:1rem; color:var(--slate); position:relative; padding-left:26px; }
.criteria-card.yes li::before{ content:"✓"; content:"✓" / ""; color:var(--green); font-weight:700; position:absolute; left:0; top:0; }
.criteria-card.no li::before{ content:"✕"; content:"✕" / ""; color:var(--coral-ink); font-weight:700; position:absolute; left:0; top:0; }
.criteria-card li b{ color:var(--navy); font-weight:700; }
.apply-note{ margin-top:16px; font-size:15px; color:var(--slate-soft); }
.apply-note a{ color:var(--coral-ink); font-weight:600; text-decoration:underline; }
.apply-foot{ margin-top:44px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:36px; border-top:1px solid #e7e7ea; }
.deadline{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:var(--navy); }
.deadline span{ color:var(--coral-ink); }

/* ---------- CHALLENGES (navy) ---------- */
.challenges{ background:var(--navy); color:#fff; }
.on-dark h2{ color:#fff; }
.challenge-list{ display:flex; flex-direction:column; gap:22px; margin-top:44px; }
.challenge-card{ border:1px solid var(--line); border-radius:22px; padding:36px; background:linear-gradient(160deg,var(--surface),var(--navy-soft)); display:grid; grid-template-columns:1.3fr .9fr auto; gap:32px; align-items:center; }
.challenge-card h3{ font-size:23px; color:#fff; margin-bottom:8px; }
.challenge-num{ font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8ea0c4; margin-bottom:10px; }
.challenge-areas{ display:flex; flex-direction:column; gap:10px; }
.challenge-areas .area{ font-family:'Space Grotesk',sans-serif; font-size:13.5px; font-weight:600; color:#dbe1ee; padding:11px 14px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.03); }
.challenge-card .btn{ justify-self:end; }
.custom-challenge{ margin-top:40px; border:1px dashed var(--line-strong); border-radius:20px; padding:28px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.custom-challenge p{ font-size:1rem; color:#b7c0d6; max-width:560px; }

/* partner marquee */
/* The band moves on its own, so WCAG 2.2.2 (Pause, Stop, Hide - Level A) wants a
   control that stops it. The button sits below the band rather than inside it:
   .marquee-wrap carries a mask that fades its right edge to transparent, and a mask
   applies to children too, so a button placed in there would fade out with the names. */
.marquee-block{ display:flex; flex-direction:column; align-items:flex-end; margin-top:60px; }
.marquee-wrap{ align-self:stretch; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:32px 0; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
/* Spacing is trailing padding on the span, not a gap on the container: with a
   gap, translateX(-50%) lands half a gap (32px) short of the seam and the strip
   jumps once per cycle. As padding, half the strip is exactly two name sets, so
   the loop is seamless. Four sets are in the markup so that half (1336px)
   always exceeds the widest the track can get (1124px at the 1180px cap) - one
   set was 636px and left up to 488px of the band empty. The duration goes 24s ->
   50s only to hold the old speed: the strip is 2671px instead of 1272px, so the
   travel doubles and at 24s the names would scroll past twice as fast. Read the
   note in index.html before changing the count or the names. */
.marquee{ display:flex; width:max-content; animation:scroll 50s linear infinite; }
.marquee span{ font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:600; color:#7b8bb2; letter-spacing:-.01em; white-space:nowrap; padding-right:64px; }
/* Shown only once app.js has confirmed it can drive it - an unpowered pause button is
   worse than no button. With no JS the animation is switched off instead (below), so
   nothing moves without a way to stop it either way. */
.marquee-toggle{ display:none; }
.js .marquee-toggle{
  display:flex; align-items:center; gap:9px; margin-top:12px;
  min-height:36px; padding:7px 16px;
  background:none; border-radius:999px;
  /* Not --line-strong (rgba(255,255,255,.22)): against this navy that measures 1.9:1,
     under the 3:1 WCAG 1.4.11 asks of a control boundary. .38 gives 3.5:1. */
  border:1px solid rgba(255,255,255,.38);
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.01em;
  color:#b7c0d6; cursor:pointer; transition:color .2s ease, border-color .2s ease;
}
.marquee-toggle:hover{ color:#fff; border-color:rgba(255,255,255,.62); }
/* Two bars, and a triangle once paused. Drawn in CSS because the font subset carries
   no media glyphs - U+23F8 and U+25B6 would drop to whatever the system supplies. */
.mt-icon{ flex:none; width:9px; height:11px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.marquee-toggle.paused .mt-icon{ width:0; height:0; border:5.5px solid transparent; border-left:9px solid currentColor; border-right:0; }
/* No JS: stop the strip rather than leave it running with no control. Same treatment
   the print block uses - the three duplicate sets exist only to feed the loop. */
html:not(.js) .marquee{ animation:none; width:auto; flex-wrap:wrap; }
html:not(.js) .marquee span[aria-hidden="true"]{ display:none; }
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- TIMELINE ---------- */
.timeline-sec{ background:var(--off); }
.journey-track{ position:relative; padding-left:48px; margin-top:48px; }
.journey-track::before{ content:""; position:absolute; left:15px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--coral-ink),#8a3f36); opacity:.6; }
.jnode{ position:relative; padding-bottom:40px; }
.jnode:last-child{ padding-bottom:0; }
.jnode::before{ content:""; position:absolute; left:-48px; top:2px; width:16px; height:16px; border-radius:50%; background:var(--off); border:2px solid var(--coral-ink); box-shadow:0 0 0 4px var(--off); }
.jnode.milestone::before{ width:20px; height:20px; left:-50px; top:0; background:var(--coral-ink); }
.jnode .jdate{ font-size:12.5px; font-weight:700; letter-spacing:.07em; color:var(--coral-ink); text-transform:uppercase; margin-bottom:6px; display:block; }
.jnode h3{ font-size:19px; color:var(--navy); margin-bottom:6px; }
.jnode .jbody{ color:var(--slate); font-size:1rem; max-width:660px; }
.sprint-panel{ margin-top:20px; border:1px solid #e2e2e6; border-radius:18px; padding:26px; background:#fff; }
.sprint-sub{ margin-bottom:22px; }
.sprint-sub:last-child{ margin-bottom:0; }
.sublabel{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--slate-soft); margin-bottom:12px; }
.topic-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.topic-chip{ border:1px solid #ececef; border-radius:12px; padding:12px 14px; background:var(--off); font-size:13.5px; }
.topic-chip b{ display:block; color:var(--navy); font-weight:700; margin-bottom:2px; font-size:13.5px; }
.topic-chip span{ color:var(--slate-soft); font-size:14px; }
.gate-note{ margin-top:14px; border-left:2px solid var(--coral-ink); padding:10px 16px; font-size:15px; color:var(--slate); background:var(--coral-dim); border-radius:0 10px 10px 0; }
.gate-note b{ color:var(--navy); }
.pitch-crit{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.pitch-crit span{ font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:999px; border:1px solid #dedee2; color:var(--slate); }

/* ---------- VALUE CREATION ---------- */
.value-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-top:44px; }
.value-grid p{ font-size:1rem; color:var(--slate); margin-bottom:16px; }
.value-list{ display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.value-item{ display:flex; gap:14px; }
.value-item .chk{ flex:none; width:30px; height:30px; border-radius:9px; background:var(--coral-dim); color:var(--coral-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.value-item p{ font-size:1rem; color:var(--slate); margin:0; }
.value-item p b{ color:var(--navy); font-weight:700; }
.story-card{ border-radius:22px; padding:34px; background:linear-gradient(160deg,var(--navy),#0c1a38); color:#fff; }
.story-card .kicker{ color:#ffb6ac; }
.story-card h3{ font-size:21px; color:#fff; margin-bottom:16px; }
.story-card p{ font-size:1rem; color:#c3cbdc; margin-bottom:14px; }
.story-card p:last-child{ margin-bottom:0; }

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px; }
.about-card{ border-radius:22px; padding:34px; background:linear-gradient(160deg,var(--surface),var(--navy-soft)); border:1px solid var(--line); color:#fff; }
.about-card .logo-chip{ background:#fff; border-radius:12px; padding:14px 18px; display:inline-flex; margin-bottom:22px; }
.about-card .logo-mark{ margin-bottom:22px; display:inline-flex; }
.about-card h3{ font-size:20px; color:#fff; margin-bottom:14px; }
.about-card p{ color:#b7c0d6; font-size:1rem; margin-bottom:20px; }
.about-card a.linkout{ font-size:13.5px; font-weight:700; color:var(--coral); display:inline-flex; align-items:center; gap:6px; }
/* The funding instrument sits below the two organisation cards, full width. The
   Szechenyi badge goes beside the text rather than above it: it is landscape and
   88px tall, so stacking it would open a large gap before the heading. It collapses
   to one column with the rest of the grids - see the media block below. */
.factory-card{ margin-top:22px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; }
.factory-card .szechenyi-chip{ align-self:start; }
.factory-card .factory-body{ min-width:0; }

.about-card .logo-chip img{ height:30px; width:auto; }
.about-card .logo-mark img{ height:46px; width:auto; }

/* ---------- FAQ ---------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; margin-top:44px; }
.faq-item{ border:1px solid #e7e7ea; border-radius:14px; background:var(--off); overflow:hidden; }
/* overflow-wrap:anywhere, not break-word: the question text is an anonymous
   flex item, whose automatic minimum size is its max-content width, so one long
   Hungarian compound held the row open and pushed the +/- off-screen (the card
   clips it). Only "anywhere" shrinks min-content; break-word does not, and the
   break-word already inherited from body below 380px is therefore not enough. */
.faq-q{ width:100%; text-align:left; padding:20px 24px; background:none; border:none; color:var(--navy); font-family:'Space Grotesk',sans-serif; font-size:0.96875rem; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; overflow-wrap:anywhere; }
.faq-q .plus{ flex:none; width:22px; height:22px; position:relative; }
.faq-q .plus::before,.faq-q .plus::after{ content:""; position:absolute; background:var(--coral-ink); border-radius:2px; transition:transform .25s ease; }
.faq-q .plus::before{ width:14px; height:2px; top:10px; left:4px; }
.faq-q .plus::after{ width:2px; height:14px; top:4px; left:10px; }
.faq-item.open .faq-q .plus::after{ transform:rotate(90deg); opacity:0; }
/* The open height comes from grid-template-rows:0fr -> 1fr, resolved by layout on
   every pass, so a reflow (resize, rotation, late font load) can never clip the
   answer the way a measured pixel max-height did. .faq-a-inner needs min-height:0
   or the grid item's automatic minimum size would hold the 0fr row open. */
/* Collapsed only under html.js. The `open` class comes exclusively from app.js, so
   a page whose script never runs used to hide all 13 answers - the TRL threshold,
   the deadline, the amounts - with no way to open them. Unguarded, the default is
   every answer open and readable.
   [hidden] here is hidden="until-found", which app.js sets on a closed answer where
   the browser supports it. It must not also be visibility:hidden, or find-in-page
   skips the text and the attribute buys nothing. */
.faq-a{ display:grid; grid-template-rows:1fr; overflow:hidden; }
.js .faq-a{ grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .3s ease, visibility 0s linear .3s; }
.js .faq-a[hidden]{ visibility:visible; }
.js .faq-item.open .faq-a{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .3s ease, visibility 0s; }
.faq-a-inner{ min-height:0; padding:0 24px 22px; color:var(--slate); font-size:1rem; transition:padding-bottom .3s ease; }
/* A grid item's padding sits outside the 0fr track, so a bottom padding here
   survived the collapse and left 22px of dead space under every closed answer.
   It belongs to the open state instead - except with no script, where every
   answer is open and needs it back, hence the default above. */
.js .faq-a-inner{ padding-bottom:0; }
.js .faq-item.open .faq-a-inner{ padding-bottom:22px; }
/* With no script the +/- is a control that cannot do anything, sitting next to an
   answer that is already open. */
html:not(.js) .faq-q .plus{ display:none; }

/* ---------- KAPCSOLAT ---------- */
/* Lighter than the footer on purpose: the two used to be 4 points apart (#000B1D vs #040f24),
   which read as a rendering glitch rather than a section change. */
.contact-sec{ background:var(--surface); color:#fff; }
.contact-top{ text-align:center; max-width:600px; margin:0 auto; }
.contact-top .kicker{ justify-content:center; }
.contact-top h2{ margin-bottom:18px; }
.contact-email{ display:inline-block; font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; color:var(--coral); word-break:break-word; }
.contact-lede{ margin:22px 0 26px; font-size:1.03125rem; color:#b7c0d6; }
.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-row a{ position:relative; width:36px; height:36px; border-radius:9px; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:#c3cbdc; transition:border-color .2s ease, color .2s ease; }
/* Chip stays 36px while the pointer target becomes 44x44 (WCAG 2.5.5); the 10px flex gap leaves 2px between neighbouring targets. */
.social-row a::after{ content:""; position:absolute; inset:-4px; }
.social-row a:hover{ border-color:var(--coral); color:#fff; }

/* ---------- FOOTER ---------- */
footer.site{ background:var(--navy); border-top:1px solid var(--line-strong); padding:56px 0 34px; color:#fff; }
.foot-org-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:40px; }
.foot-org{ padding-top:2px; }
.foot-title{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#8592ac; margin:0 0 22px; }
.foot-org h3{ font-size:15.5px; color:#fff; margin-bottom:10px; }
.foot-org .line{ font-size:13.5px; color:#a9b3c9; margin-bottom:5px; }
.foot-org a.mail{ color:#dbe1ee; }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:30px; border-top:1px solid var(--line); }
.foot-legal{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.foot-legal span{ font-size:12.5px; color:#8592ac; }
/* 24x24 minimum pointer target (WCAG 2.2 SC 2.5.8). These are flex items with
   no surrounding sentence, so the inline exception does not apply. The row is
   align-items:center, so the extra 4px grows around the text and the visible
   line does not move. */
.foot-legal a{ font-size:12.5px; color:#c3cbdc; font-weight:600; display:inline-flex; align-items:center; min-height:24px; }
.foot-legal a:hover{ color:#fff; }
.szechenyi-chip{ background:#fff; border-radius:10px; padding:9px 14px; display:inline-flex; align-items:center; }
/* The badge carries mandatory EU/Szechenyi publicity text. At the old 40px it was
   56px wide and completely illegible; 88px gives it a readable footprint. */
.szechenyi-chip img{ height:88px; width:auto; display:block; }

/* Visible by default, hidden only once JS proves it is alive. app.js adds js-reveal
   to <html> immediately before it starts observing, so an app.js that 404s, is
   blocked or throws above that line leaves the copy on screen instead of blanking
   ~96% of it. <noscript> can never cover that case - scripting is enabled there,
   only the file died. */
.reveal{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }
html.js-reveal .reveal{ opacity:0; transform:translateY(18px); }
html.js-reveal .reveal.in{ opacity:1; transform:translateY(0); }

/* The header row wants 1316px (brand 231 + links 867 + actions 122 + gaps +
   padding) but .nav is capped at --maxw, so from 981px up it ran off the right
   edge instead of collapsing - invisibly, because of body{overflow-x:hidden}.
   Each step below drops only what the next width down can no longer hold. */
@media (max-width:1399px){
  .nav{ gap:14px; }
  nav.links{ gap:14px; }
  nav.links > a,.has-drop > a{ font-size:12.5px; letter-spacing:.02em; }
}
/* app.js hard-codes 1199 too, in the resize handler that drops the mobile panel
   when the desktop nav comes back. Change one, change both.
   The burger is shown only under html.js: the panel it opens is built entirely at
   runtime, so with no script it is a visible control that silently does nothing.
   Nothing is lost - the challenge cards and the footer carry the same links. */
@media (max-width:1199px){
  nav.links{ display:none; }
  .js .burger{ display:flex; }
}
@media (max-width:980px){
  .intro-grid, .apply-grid, .value-grid, .about-grid, .foot-org-grid, .factory-card{ grid-template-columns:1fr; }
  .topic-grid{ grid-template-columns:1fr; }
  .area-card{ grid-template-columns:1fr; }
  .challenge-card{ grid-template-columns:1fr; }
  .challenge-card .btn{ justify-self:start; }
}
@media (max-width:560px){
  .brand{ font-size:13.5px; }
  .criteria-card{ padding:24px 20px; }
  /* Keeping this button here would push the burger - the only way to navigate -
     off-screen; the hero repeats the CTA and app.js moves it into the panel.
     app.js does not repeat the 560: it reads this rule's computed display, so
     moving the breakpoint moves both sides. Deleting the rule is what would
     break it - the panel would then never carry the CTA. */
  .nav-actions .btn{ display:none; }
  section{ padding:70px 0; }
  .hero{ padding:64px 0 70px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .apply-foot{ flex-direction:column; align-items:flex-start; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }
}

/* Small phones and folding-phone cover screens. Verified clean to 240px; the
   narrowest real device this targets is the 280px Galaxy Z Fold cover display. */
@media (max-width:380px){
  .wrap{ padding:0 16px; }
  .nav{ padding:14px 16px; }
  .brand{ font-size:12px; gap:8px; }
  .brand .mark-sc{ height:21px; }
  .brand .mark-is{ height:16px; }
  section{ padding:56px 0; }
  .area-card{ padding:24px 18px; gap:16px; }
  .criteria-card{ padding:20px 16px; }
  .story-card,.about-card,.why-box{ padding:24px 18px; }
  .custom-challenge{ padding:22px 18px; }
  .topic-chip{ padding:10px 12px; }
  .areas-grid > *,.value-grid > *,.about-grid > *,.topic-grid > *,.intro-grid > *,.foot-org-grid > *,.area-card > *,.faq-a-inner{ min-width:0; }
  .jnode{ padding-left:22px; }
  .faq-q{ padding:16px 16px; }
  /* Narrow-width halves of the .js split above. .js is needed on the open rule
     too: without it the unprefixed selector loses to the wider .js rule. */
  .faq-a-inner{ padding:0 16px 18px; }
  .js .faq-item.open .faq-a-inner{ padding-bottom:18px; }
  .contact-email{ font-size:19px; }
  /* Hungarian compounds outrun a 240px column; let a word that cannot fit break
     rather than push the whole layout wider. */
  body{ overflow-wrap:break-word; }
}
@media (max-width:300px){
  /* Below this the wordmark cannot sit beside the burger. The SC tile still
     carries the brand and still links home. */
  .brand{ font-size:0; }
  .brand .mark-sc{ height:20px; }
  .brand .mark-is{ height:15px; }
}
/* ---------- SKIP LINK ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--coral-ink); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
  font-weight:600; font-size:14px;
}
.skip-link:focus{ left:0; }

/* ---------- FOCUS VISIBILITY ---------- */
/* Nothing defined a focus ring before, so keyboard users had only the UA default. */
:focus-visible{ outline:2px solid var(--coral-ink); outline-offset:3px; border-radius:4px; }
.hero :focus-visible,
.challenges :focus-visible,
header.site :focus-visible,
footer.site :focus-visible,
.contact-sec :focus-visible{ outline-color:#ffb6ac; }

/* ---------- MOBILE NAV ---------- */
/* Built by app.js from the desktop nav, so the two can never disagree.
   Styled here instead of via an inline cssText string.

   app.js appends the panel inside header.site (which is position:sticky, so it
   is the containing block), letting the panel offset itself from the header's
   own box instead of a hard-coded height: for an absolutely positioned box 100%
   is the header's padding box and +1px adds its border-bottom, which together
   are exactly the header's rendered height - at any breakpoint, whatever the
   nav padding or brand size turn out to be. The background is opaque rather
   than .98 + blur because nested inside the header's backdrop-filter the panel
   has no page backdrop left to sample, so the blur is inert. */
.mobile-nav{
  position:absolute; top:calc(100% + 1px); left:0; right:0; z-index:90;
  display:flex; flex-direction:column; gap:2px;
  padding:16px 28px 24px;
  background:var(--navy);
  border-bottom:1px solid var(--line);
  /* vh stays as the fallback; dvh wins wherever it is understood. On iOS Safari
     100vh is the LARGE viewport, so with the URL bar showing the panel bottomed
     out behind the browser chrome and its last item could not be scrolled up. */
  max-height:calc(100vh - 100% - 1px);
  max-height:calc(100dvh - 100% - 1px);
  overflow-y:auto;
}
.mobile-nav a{
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:15px;
  color:#fff; padding:12px 10px; border-radius:9px;
}
.mobile-nav a:hover{ background:rgba(255,255,255,.06); }
/* No weight override: 500 is no longer loaded, so it would silently resolve to
   the 600 above. Size, colour, indent and dash already mark these as sub-items. */
.mobile-nav a.sub{
  font-size:13.5px; color:#b7c0d6;
  padding-left:26px; position:relative;
}
.mobile-nav a.sub::before{
  content:""; position:absolute; left:10px; top:50%; width:8px; height:1px;
  background:var(--coral);
}
.mobile-nav a.current{ background:rgba(240,90,71,.14); color:#fff; }
/* Must stay after .mobile-nav a:hover, which has equal specificity, so the
   coral survives hover. */
.mobile-nav a.cta{ margin-top:12px; background:var(--coral-ink); color:#fff; text-align:center; text-transform:uppercase; letter-spacing:.03em; font-size:13.5px; padding:14px 10px; border-radius:999px; }
body.nav-open{ overflow:hidden; }

/* ---------- LOGO FALLBACK ---------- */
/* Rendered by app.js only when a file in assets/ is missing, so the logo slots
   never show a broken image. It simply stops being used once the real files
   are dropped into assets/. */
.logo-fallback{ display:inline-flex; align-items:center; gap:10px; font-family:"Space Grotesk",sans-serif; font-weight:700; }
.logo-fallback .glyph{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12.5px; flex:none; }
.logo-fallback .word{ font-size:14.5px; letter-spacing:.01em; }
.logo-fallback.on-navy{ color:#fff; }
.logo-fallback.on-navy .glyph{ background:var(--coral-ink); color:#fff; }
.logo-fallback.on-white{ color:var(--navy); }
.logo-fallback.on-white .glyph{ background:var(--navy); color:#fff; }
.szechenyi-chip .logo-fallback .glyph{ background:#2c3ac4; }

/* Forced colors (Windows High Contrast) replaces background-color with the
   system canvas and drops every non-url() background-image, so anything painted
   only with a background disappears: the FAQ +/- bars on all 13 questions, and
   the timeline spine, which is a bare gradient. border-color is forced to a
   visible system colour instead, so both are redrawn as borders - here only, so
   normal rendering is untouched. currentColor follows whatever text colour is
   forced for each element. opacity is not forced, so the spine's .6 has to be
   reset or the line stays faint. (Declaring a solid colour before the gradient
   does NOT work: the second background shorthand resets background-color back
   to transparent, and forced colors then paints that as Canvas.) */
@media (forced-colors:active){
  .faq-q .plus::before{ background:none; border-top:2px solid currentColor; }
  .faq-q .plus::after{ background:none; border-left:2px solid currentColor; }
  .journey-track::before{ background:none; border-left:2px solid currentColor; opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  /* The * rule does match html, but it resets only animation and transition and
     scroll-behavior is neither, so it has to be named. Without this, every
     in-page link still animates the reader across the full document. */
  html{ scroll-behavior:auto !important; }
  /* The * rule above already stopped the marquee, so its button controls nothing. */
  .js .marquee-toggle{ display:none !important; }
}

/* ---------- PRINT ---------- */
/* Last in the file on purpose: print is a different medium, not another width step
   in the cascade above, so it has to win over everything before it. Browsers print
   with backgrounds off by default (print-color-adjust:economy), which turned every
   #fff-on-navy section into white on white - so this block returns the page to ink
   on paper rather than trying to reproduce the screen design. */
@media print{
  @page{ margin:14mm; }
  body{ background:#fff !important; color:#111 !important; overflow:visible !important; }

  /* .in is only ever added for blocks the reader actually scrolled past, and printing
     does not fire the IntersectionObserver - so a fresh load + Ctrl+P gave the hero
     and then blank paper. Overrides both the plain and the js-reveal form. */
  .reveal,html.js-reveal .reveal{ opacity:1 !important; transform:none !important; }

  /* All 13 answers are closed on load and carry about a third of the page's words.
     display:block sidesteps the 0fr grid track rather than fighting it - a grid row
     fragmenting across a page break is unreliable - and the plus/minus caret means
     nothing on paper. */
  .faq-item{ overflow:visible !important; }
  .faq-a{ display:block !important; visibility:visible !important; overflow:visible !important; }
  .faq-a-inner{ padding-bottom:22px !important; }
  .faq-q .plus{ display:none !important; }

  /* Interactive chrome: nothing to click on paper. */
  header.site,.burger,.mobile-nav,.skip-link,.marquee-toggle,.hero::after{ display:none !important; }

  /* The marquee is dropped as an effect, not as content: width:max-content on an
     infinite animation inside overflow:hidden clips the partner names mid-row on
     paper, so unwrap it into a static list rather than hiding it. Only the second
     set goes - it exists purely so the CSS loop has something to scroll into, it is
     already aria-hidden, and on paper it would just repeat the same five names. */
  .marquee-wrap{ margin-top:28px !important; padding:18px 0 !important; overflow:visible !important; -webkit-mask:none !important; mask:none !important; }
  .marquee{ width:auto !important; flex-wrap:wrap !important; gap:10px 28px !important; animation:none !important; }
  .marquee span[aria-hidden="true"]{ display:none !important; }

  /* Dark sections. The white and near-white values are set on the children, not
     inherited, so the descendant sweep is what actually does the work here. */
  .hero,.challenges,.contact-sec,footer.site,.challenge-card,.story-card,.about-card,.stat-chip,.custom-challenge,.challenge-areas .area{ background:#fff !important; background-image:none !important; box-shadow:none !important; }
  .hero,.hero *,.challenges,.challenges *,.contact-sec,.contact-sec *,footer.site,footer.site *,.story-card,.story-card *,.about-card,.about-card *{ color:#111 !important; }

  /* The same white-on-white trap on light sections, which the sweep above cannot
     reach: the tick and the cross, and the Jelentkezz label in #jelentkezes, are all
     #fff on a coloured fill that print drops. .btn-primary must stay after the sweep
     - equal specificity, so source order is what decides it inside .hero. */
  .criteria-card h3 .tag{ color:#111 !important; background:#fff !important; border:1px solid #999 !important; }
  .btn-primary{ color:#111 !important; background:#fff !important; border-color:#999 !important; }

  /* These edges existed only as a background gradient or an rgba(255,255,255) line,
     so they vanish with the backgrounds; give them a rule that survives. */
  .challenge-card,.story-card,.about-card,.stat-chip,.custom-challenge,.challenge-areas .area{ border:1px solid #999 !important; }
  .btn,.social-row a{ border-color:#999 !important; box-shadow:none !important; }

  /* 100px of section padding costs roughly two extra sheets per page printed. */
  section{ padding:28px 0 !important; }
  .hero{ padding:0 0 28px !important; overflow:visible !important; }
  h1,h2,h3{ break-after:avoid; page-break-after:avoid; }
  .faq-item,.jnode,.value-item,.why-row,.stat-chip,.topic-chip,.offer-item,.challenge-areas .area{ break-inside:avoid; page-break-inside:avoid; }
}