/* ==========================================================================
   Kriston Konferencia theme
   1. Tokens       primitives (Figma handoff) → semantic → component
   2. Base         reset, element defaults, type styles
   3. Layout       page frame, section helpers
   4. Components   buttons, eyebrow, cards, lists, faq …
   5. Sections     Figma-built home sections, then legacy sections
   6. Utilities    Tailwind-style single-purpose classes, sm: / md: / lg: variants
   Breakpoints (custom properties can't be used in @media):
     1100px  Figma desktop ↔ mobile layout switch
     900 / 760 / 560px  grid steps, mobile nav
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

/* 1a. Primitives: raw values from the Figma handoff. Components should not
   use these directly; go through the semantic layer below. */
:root {
    --color-white: #ffffff;
    --color-background: #ffffff;
    --color-dark-blue: #0a1f40;
    --color-text-on-color: #e5ebf5;
    --color-light-gray: rgb(238 239 239 / 40%); /* alpha on the paint, not on the element */
    --color-light-blue: #5a6c88;
    --color-slate: #cbd5e5;
    --color-cta: #c71341;
    --color-cta-dark: #a30f35;
    --color-purple: #7f2269;
    --color-magenta: #c1246f;
    --color-red: #cd1944;
    --color-blue: #0fa8a8; /* teal despite the name; keep the value */

    /* Figma gradient transform ≈ 84.7deg, line runs from -4.7% to 106.2% of the box */
    --gradient-brand: linear-gradient(84.7deg, #028761 -4.7%, #0a5999 20.9%, #932f80 48.6%, #e3175f 78%, #f5ab01 106.2%);
    /* Deeper variant (no yellow end) that holds white text; pass an angle: linear-gradient(180deg, var(--gradient-brand-deep-stops)) */
    --gradient-brand-deep-stops: rgb(41 159 137) 0%, rgb(38 82 143) 32.7%, rgb(171 39 120) 70.7%, rgb(208 28 58) 100%;


    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Type scale: fluid between mobile (375px) and desktop (1440px) Figma values.
       clamp(mobile, intercept + slope * vw, desktop); all values are px from the spec. */
    --fs-h1: clamp(36px, 14.873px + 5.6338vw, 96px);
    --lh-h1: clamp(40px, 23.099px + 4.507vw, 88px);
    --fs-h2: clamp(32px, 20.732px + 3.0047vw, 64px);
    --lh-h2: clamp(36px, 26.141px + 2.6291vw, 64px); /* 1.0 on desktop: every Figma H2 overrode the 56px style, and 56 clips Ő/É */
    --fs-h3: clamp(28px, 25.183px + 0.75117vw, 36px);
    --lh-h3: clamp(38px, 37.296px + 0.18779vw, 40px);
    --fs-h4: clamp(24px, 22.592px + 0.37559vw, 28px);
    --lh-h4: clamp(28px, 24.479px + 0.93897vw, 38px);
    --fs-h5: 20px;
    --lh-h5: 24px;
    --fs-statement: clamp(24px, 19.775px + 1.1268vw, 36px);
    --lh-statement: clamp(30px, 20.845px + 2.4413vw, 56px);
    --fs-title: 22px;
    --fs-paragraph-1: clamp(16px, 15.296px + 0.18779vw, 18px);
    --lh-paragraph-1: clamp(24px, 22.592px + 0.37559vw, 28px);
    --fs-paragraph-2: clamp(14px, 13.296px + 0.18779vw, 16px);
    --lh-paragraph-2: 20px;
    --fs-paragraph-3: 14px;
    --lh-paragraph-3: 20px;
    --fs-caption: 12px;
    --lh-caption: 20px;
    --fs-label: 16px;
    --fs-label-sm: 14px;
    --lh-label: 24px;

    /* Letter spacing: mobile -0.05em/-0.04em/-0.05em of 36/32/28px = -1.8/-1.28/-1.4px, desktop -5/-4/-2px */
    --ls-h1: clamp(-5px, -0.673px - 0.30047vw, -1.8px);
    --ls-h2: clamp(-4px, -0.322px - 0.2554vw, -1.28px);
    --ls-h3: clamp(-2px, -1.189px - 0.056338vw, -1.4px);
    --ls-statement: clamp(-2px, -0.594px - 0.097653vw, -0.96px);
    --ls-tight: -0.05em;
    --ls-snug: -0.03em;
    --ls-h4: var(--ls-tight);
    --ls-h5: var(--ls-snug);

    /* Spacing: 4px base */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Radii */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-2xl: 70px;
    --radius-pill: 999px;
    --radius-stage: clamp(60px, 31.831px + 7.5117vw, 140px); /* big rounded section panels: 60 mobile → 140 desktop */

    /* Elevation: Figma shadows are violet-tinted, never neutral black */
    --shadow-tint: 31 16 137;
    --shadow-sm: 0 24px 32px rgb(var(--shadow-tint) / 8%);
    --shadow-md: 0 24px 32px rgb(var(--shadow-tint) / 12%);
    --shadow-lg: 0 24px 40px rgb(var(--shadow-tint) / 16%);
    --shadow-cta: 0 13px 35px rgb(233 51 59 / 50%);

    /* Glass surfaces (frosted cards over the decorative art) */
    --glass-bg: rgb(255 255 255 / 40%);
    --glass-bg-strong: rgb(255 255 255 / 50%);
    --glass-bg-faint: rgb(255 255 255 / 12%);
    --glass-blur: blur(20px);

    /* Motion */
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --ease-out: cubic-bezier(.2, .7, .2, 1);

    /* Layering */
    --z-raised: 2;
    --z-overlay: 3;
    --z-header: 50;

    /* Page frame */
    --page-max: 1440px;   /* Figma desktop frame */
    --content-max: 1280px; /* frame minus 2 × 80px gutter */
    --prose-max: 820px;
    --section-max: var(--content-max); /* .max-w-section: content width of every section's inner wrapper (gutter sits outside, on the section) */
    --page-gutter: clamp(16px, 6.0094vw - 6.535px, 80px); /* 16 mobile → 80 desktop */
    --section-space: clamp(var(--space-12), 8vw, var(--space-24));
    --header-h: 89px; /* logo 49 + 2 × 20 padding; hero slides under it */
}

@media (max-width: 1100px) {
    :root { --header-h: 81px; }
}

/* 1b. Semantic tokens: what components use. Re-scoped by .on-dark. */
:root {
    --color-text: var(--color-dark-blue);
    --color-heading: var(--color-dark-blue);
    --color-text-muted: var(--color-light-blue);
    --color-text-inverse: var(--color-white);
    --color-highlight: var(--color-red);   /* accent text: card titles, figures */
    --color-link: var(--color-dark-blue);
    --color-link-hover: var(--color-cta);

    --color-accent: var(--color-cta);       /* primary action */
    --color-accent-hover: var(--color-cta-dark);
    --color-on-accent: var(--color-white);

    --color-surface: var(--color-background);
    --color-surface-subtle: color-mix(in srgb, var(--color-text-on-color) 45%, var(--color-white));
    --color-surface-muted: var(--color-light-gray);
    --color-surface-inverse: var(--color-dark-blue);

    --color-border: var(--color-slate);
    --color-border-subtle: var(--color-text-on-color);
    --color-focus: var(--color-dark-blue);
}

/* Inverse context: dark or gradient backgrounds. Components inherit the swap. */
.on-dark {
    --color-text: var(--color-text-on-color);
    --color-heading: var(--color-text-on-color); /* Figma sets headings on color in text-on-color, not white */
    --color-text-muted: rgb(229 235 245 / 80%);
    --color-highlight: var(--color-blue);
    --color-link: var(--color-white);
    --color-link-hover: var(--color-text-on-color);
    --color-border-subtle: rgb(255 255 255 / 14%);
    --color-focus: var(--color-white);
    color: var(--color-text);
}

/* 2. Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: var(--type-paragraph-2);
    color: var(--color-text);
    background: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; }
:where(h1, h2, h3, h4, h5, h6) { margin: 0 0 .5em; color: var(--color-heading); text-wrap: balance; }
:where(p) { margin: 0 0 1em; }
a { color: var(--color-link); text-underline-offset: .15em; transition: color var(--duration-fast); }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
address { font-style: normal; }
.skip-link { position: absolute; left: var(--space-4); top: -200px; z-index: 1000; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-white); color: var(--color-dark-blue); box-shadow: var(--shadow-md); }
.skip-link:focus { top: var(--space-4); }
main:focus { outline: none; }
::selection { background: color-mix(in srgb, var(--color-accent) 20%, transparent); }

/* Composite type styles; use as classes or via the element defaults below */
:root {
    --type-h1: var(--fw-bold) var(--fs-h1)/var(--lh-h1) var(--font-sans);
    --type-h2: var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-sans);
    --type-h3: var(--fw-bold) var(--fs-h3)/var(--lh-h3) var(--font-sans);
    --type-h4: var(--fw-medium) var(--fs-h4)/var(--lh-h4) var(--font-sans);
    --type-h5: var(--fw-semibold) var(--fs-h5)/var(--lh-h5) var(--font-sans);
    --type-statement: var(--fw-bold) var(--fs-statement)/var(--lh-statement) var(--font-sans);
    --type-title: var(--fw-bold) var(--fs-title)/1.2 var(--font-sans); /* card titles */
    --type-paragraph-1: var(--fw-medium) var(--fs-paragraph-1)/var(--lh-paragraph-1) var(--font-sans);
    --type-paragraph-2: var(--fw-regular) var(--fs-paragraph-2)/var(--lh-paragraph-2) var(--font-sans);
    --type-paragraph-3: var(--fw-regular) var(--fs-paragraph-3)/var(--lh-paragraph-3) var(--font-sans); /* no mobile style in Figma */
    --type-paragraph-4: var(--fw-semibold) var(--fs-caption)/var(--lh-label) var(--font-sans); /* no mobile style in Figma */
    --type-caption: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-sans);
    --type-label: var(--fw-semibold) var(--fs-label)/var(--lh-label) var(--font-sans);     /* buttons, eyebrows; uppercase */
    --type-label-sm: var(--fw-semibold) var(--fs-label-sm)/var(--lh-label) var(--font-sans);
}

.type-h1, h1 { font: var(--type-h1); letter-spacing: var(--ls-h1); }
.type-h2, h2 { font: var(--type-h2); letter-spacing: var(--ls-h2); }
.type-h3, h3 { font: var(--type-h3); letter-spacing: var(--ls-h3); }
.type-h4, h4 { font: var(--type-h4); letter-spacing: var(--ls-h4); }
.type-h5, h5 { font: var(--type-h5); letter-spacing: var(--ls-h5); }
.type-statement { font: var(--type-statement); letter-spacing: var(--ls-statement); }
.type-paragraph-1 { font: var(--type-paragraph-1); letter-spacing: 0; }
.type-paragraph-2 { font: var(--type-paragraph-2); letter-spacing: 0; }
.type-paragraph-3 { font: var(--type-paragraph-3); letter-spacing: 0; }
.type-paragraph-4, h6 { font: var(--type-paragraph-4); letter-spacing: 0; text-transform: uppercase; }
.type-caption { font: var(--type-caption); letter-spacing: 0; }

.muted { color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}

/* 3. Layout ---------------------------------------------------------------- */

/* Sections span the full width; their inner wrapper is built from utilities (6.),
   e.g. <section class="hero overflow-hidden px-gutter"><div class="mx-auto max-w-section hero-inner">.
   Positions below are relative to that 1280 content box (Figma 1440 frame minus the 80px gutter);
   decorative *-bg layers take -inset-x-gutter so their art keeps the full-frame coordinates. */

.section-alt { background: var(--color-surface-subtle); }
.section-dark { background: var(--color-surface-inverse); }
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 720px; margin-bottom: var(--space-10); }
.section-head h2 { margin: 0; }
.section-intro { font: var(--type-paragraph-1); color: var(--color-text-muted); }
.section-intro p:last-child { margin-bottom: 0; }

/* 4. Components ------------------------------------------------------------ */

/* Button. Variants only swap the --btn-* hooks. */
.btn {
    --btn-bg: var(--color-surface-inverse);
    --btn-fg: var(--color-text-inverse);
    --btn-border: transparent;
    --btn-bg-hover: color-mix(in srgb, var(--btn-bg) 85%, var(--color-white));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: calc(var(--space-4) - 1px) calc(var(--space-8) - 1px);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: var(--type-label);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-fast);
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn-cta { --btn-bg: var(--color-accent); --btn-fg: var(--color-on-accent); --btn-bg-hover: var(--color-accent-hover); box-shadow: var(--shadow-cta); }
.btn-outline { --btn-bg: transparent; --btn-fg: var(--color-text); --btn-border: var(--color-border); --btn-bg-hover: transparent; }
.btn-outline:hover { --btn-border: currentColor; }
.btn-arrow { padding: var(--space-1) var(--space-1) var(--space-1) var(--space-8); }
.btn-arrow img { display: block; transition: transform var(--duration-fast) var(--ease-out); }
.btn-arrow:hover img { transform: translateX(3px); }
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Eyebrow: outlined pill label above a heading */
.eyebrow { width: fit-content; margin: 0; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font: var(--type-label); text-transform: uppercase; color: var(--color-text-muted); }

/* Background stage: the key-visual blobs behind the whole page (markup and the per-page
   compositions come from partials/bg-stage.html.twig, built from section frontmatter).
   Fixed and z-index -1, so it sits under every section's content and the glass cards blur it.
   Each blob is a 1000px box positioned and sized only with translate / scale (compositor-only),
   from the --xN/--yN/--wN/--hN/--rN/--oN snapshot values; N = 0 is the resting composition.
   The mask traces a Gaussian-blurred shape (alpha measured from the Figma export), so a blob
   fades to nothing before its box edge and needs no filter: blur. */
.bg-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-blob {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1000px;
    height: 1000px;
    margin: -500px;
    translate: var(--x0) var(--y0);
    scale: var(--w0) var(--h0);
    rotate: var(--r0);
    opacity: var(--o0);
    will-change: translate, scale, opacity;
    -webkit-mask: radial-gradient(closest-side, #000, rgb(0 0 0 / .87) 20%, rgb(0 0 0 / .61) 40%, rgb(0 0 0 / .28) 60%, rgb(0 0 0 / .07) 80%, transparent);
    mask: radial-gradient(closest-side, #000, rgb(0 0 0 / .87) 20%, rgb(0 0 0 / .61) 40%, rgb(0 0 0 / .28) 60%, rgb(0 0 0 / .07) 80%, transparent);
}
/* A scene's scroll marker: its morph step runs while this point travels up the viewport. */
.bg-scene { position: relative; }
.bg-mark { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* Tag */
.tag { display: inline-block; margin-bottom: var(--space-2); padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-subtle); color: var(--color-text); font: var(--type-label-sm); }
.tag-light { background: var(--glass-bg-faint); color: var(--color-text-inverse); }

/* Card */
.card { padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.card p:last-child { margin-bottom: 0; }

.talk-card { display: flex; flex-direction: column; color: var(--color-text); text-decoration: none; transition: transform var(--duration-fast), box-shadow var(--duration-base) var(--ease-out); }
.talk-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--color-text); }
.talk-card h3 { font: var(--type-title); letter-spacing: var(--ls-tight); color: var(--color-highlight); }
.talk-card p { flex: 1; color: var(--color-text-muted); }
.speaker { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); line-height: 1.3; }
.speaker small { color: var(--color-text-muted); }
.avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-brand); color: var(--color-text-inverse); font-weight: var(--fw-bold); }
.avatar-lg { width: 72px; height: 72px; margin-bottom: var(--space-4); font-size: 1.6rem; overflow: hidden; }
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

/* Checklist */
.checklist { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.checklist li { position: relative; margin-bottom: var(--space-2); padding-left: var(--space-8); }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--color-accent); font-weight: 800; }

/* Numbered marker (timeline, features, steps) */
.num { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface-inverse); color: var(--color-text-inverse); font: var(--type-h5); }

/* Prose (long-form content pages) */
.prose { font-size: var(--fs-paragraph-1); line-height: var(--lh-paragraph-1); }
.prose h2 { margin-top: 1.6em; }

/* Header (Figma: menu) */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: var(--page-max); margin-inline: auto; padding: var(--space-5) var(--page-gutter); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--fw-bold); text-decoration: none; color: var(--color-heading); }
.site-header .brand img { display: block; width: 184px; height: auto; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--gradient-brand); color: var(--color-text-inverse); font-weight: 800; }
.main-nav { display: flex; align-items: center; gap: var(--space-6); }
.main-nav a { font: var(--fw-medium) var(--fs-label-sm)/var(--lh-label) var(--font-sans); letter-spacing: var(--ls-snug); color: var(--color-text-muted); text-decoration: none; }
.main-nav a.is-active, .main-nav a[aria-current] { color: var(--color-text); }
.main-nav a:hover { color: var(--color-link-hover); }
/* 10px padding: same bars, but a 44px tap target. */
.nav-toggle { display: none; margin-right: -2px; padding: 10px; border: 0; background: none; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--color-text); }

/* Footer (from design screenshot) */
.site-footer { background: var(--color-surface); }
.footer-grid { max-width: var(--page-max); margin: 0 auto; padding: var(--space-12) var(--page-gutter) var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; grid-template-areas: "brand legal contact" "bottom legal contact"; column-gap: var(--space-8); row-gap: var(--space-16); }
.footer-brand { grid-area: brand; display: block; width: fit-content; }
.footer-brand img { display: block; width: 343px; max-width: 100%; height: auto; }
.footer-legal { grid-area: legal; }
.footer-contact { grid-area: contact; }
.footer-col h2 { margin: 0 0 var(--space-3); font: var(--type-h5); font-weight: var(--fw-bold); letter-spacing: var(--ls-h5); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a { font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font-sans); color: var(--color-text); text-decoration: none; overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--color-link-hover); }
.footer-bottom { grid-area: bottom; align-self: end; display: flex; flex-direction: column; gap: var(--space-6); }
.footer-bottom p { margin: 0; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font-sans); }
.footer-social { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-5); }
.footer-social a { display: block; color: var(--color-dark-blue); transition: color var(--duration-fast); }
.footer-social a:hover { color: var(--color-cta); }
.footer-social svg { display: block; }

@media (max-width: 760px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "brand brand" "legal contact" "bottom bottom"; row-gap: var(--space-10); }
    .footer-brand img { width: 240px; }
}

@media (max-width: 760px) {
    .nav-toggle { display: block; }
    .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) var(--page-gutter) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface); }
    .main-nav.open { display: flex; }
    .main-nav a { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle); }
}

/* 5. Sections -------------------------------------------------------------- */
/* Decorative art in the Figma sections is placed with absolute stage
   coordinates from the 1440 / 375 frames; those numbers are intentional. */

/* Hero (Figma: Frame 1261157945) */
.hero { margin-top: calc(-1 * var(--header-h)); }
.hero-inner { position: relative; display: flex; align-items: center; gap: 42px; min-height: 929px; }
.hero-copy { position: relative; z-index: var(--z-raised); flex: none; width: 559px; padding-top: calc(var(--header-h) + var(--space-8)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.hero-cosponsor { display: flex; align-items: center; gap: 18px; margin-bottom: var(--space-4); font: var(--type-paragraph-1); }
.hero h1 { margin: 0; max-width: 475px; }
.hero-lead { max-width: 457px; font: var(--type-paragraph-1); }
.hero-lead p { margin: 0; }
.hero-facts { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-4); }
.hero-facts li, .hero-chip { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-md); }
.hero-facts li { font: var(--type-label); font-weight: var(--fw-medium); }
.hero-facts li:first-child { width: 223px; }
.hero-facts li:last-child { width: 320px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.hero-visual { position: relative; flex: none; width: 760px; height: 863px; margin-top: 66px; }
.hero-blob { position: absolute; left: -47px; top: 51px; width: 933px; height: 971px; max-width: none; }
.hero-orbit { position: absolute; max-width: none; }
.hero-orbit-1 { left: 0; top: 30px; width: 700px; }
.hero-orbit-2 { left: -20px; top: -10px; width: 760px; }
.hero-panel { position: absolute; left: 65px; top: 211px; width: 600px; height: 652px; border-radius: var(--radius-2xl); background: var(--glass-bg-faint); backdrop-filter: blur(39px); -webkit-backdrop-filter: blur(39px); box-shadow: inset 0 0 52px var(--glass-bg); }
.hero-photo { position: absolute; left: 104px; top: 140px; width: 561px; }
.hero-photo img { display: block; width: 100%; height: auto; }
.hero-chips { list-style: none; margin: 0; padding: 0; }
/* The soft shadow lifts the white text off the light photo without changing the glass look. */
.hero-chip { position: absolute; z-index: var(--z-overlay); align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); font: var(--type-label-sm); line-height: 16px; text-align: center; text-transform: uppercase; color: var(--color-text-inverse); text-shadow: 0 1px 3px rgb(10 31 64 / 55%); }
.hero-chip-1 { left: 668px; top: 264px; width: 211px; }
.hero-chip-2 { left: 1125px; top: 415px; width: 156px; }
.hero-chip-3 { left: 603px; top: 465px; width: 231px; }

@media (max-width: 1100px) {
    .site-header-inner { padding-block: var(--space-4); }
    .hero-inner { flex-direction: column; align-items: stretch; min-height: 0; gap: var(--space-6); }
    .hero-copy { width: auto; }
    .hero-visual { width: auto; height: 520px; margin: 0 calc(-1 * var(--page-gutter)); overflow: hidden; } /* full-bleed on mobile */
    .hero-photo { left: 15%; right: 15%; top: 20px; }
    .hero-blob { left: 0; top: 0; width: 100%; height: auto; }
    .hero-chips { display: none; }
    .hero-facts { flex-direction: column; }
    .hero-facts li:first-child, .hero-facts li:last-child { width: auto; }
}

/* Benefits (Figma 313:1124), 1441 x 1078 stage */
.benefits-inner { position: relative; height: 1078px; }
.benefits-bg { position: absolute; inset: 0; pointer-events: none; }
.benefits-bg img { position: absolute; max-width: none; display: block; }
.benefits-glow { left: 493px; top: 237px; width: 456px; height: 734px; }
.benefits-intro { position: absolute; left: 336px; top: 371px; width: 609px; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; }
.benefits-intro h2 { margin: 0; width: 100%; }
.benefits-lead { font: var(--type-paragraph-1); }
.benefits-lead p { margin: 0; }
.benefits-cards { list-style: none; margin: 0; padding: 0; }
.benefit-card { position: absolute; padding: var(--space-4) var(--space-6); border-radius: var(--radius-xl); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-md); }
.benefit-card h3 { margin: 0 0 var(--space-1); font: var(--type-h5); letter-spacing: var(--ls-h5); }
.benefit-card p { margin: 0; font: var(--type-paragraph-2); }
.benefit-card-1 { left: 479px; top: 112px; width: 324px; }
.benefit-card-2 { left: 0; top: 314px; width: 291px; }
.benefit-card-3 { left: 990px; top: 314px; width: 291px; }
.benefit-card-4 { left: 200px; top: 710px; width: 325px; }
.benefit-card-5 { left: 774px; top: 710px; width: 291px; }

@media (max-width: 1100px) {
    /* Figma 284:1799, 375 wide */
    .benefits-inner { height: auto; display: flex; flex-direction: column; gap: var(--space-10); margin-top: 200px; }
    .benefits-bg { inset: 0 auto auto 0; width: 343px; height: 286px; }
    .benefits-glow { left: 34px; top: -57px; width: 260px; height: 458px; }
    /* On mobile the intro sits on the pale part of the statue art: back it with glass and dark text. */
    .benefits-intro { position: relative; inset: auto; width: auto; gap: var(--space-4); padding: var(--space-6) var(--space-5); border-radius: var(--radius-xl); background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-md); }
    .benefits-intro.on-dark { --color-text: var(--color-dark-blue); --color-heading: var(--color-dark-blue); }
    .benefits-intro h2 { width: 267px; max-width: 100%; }
    .benefits-lead { width: 323px; max-width: 100%; }
    .benefits-cards { display: flex; flex-direction: column; gap: var(--space-2); width: min(325px, 100%); }
    .benefit-card { position: static; width: auto; }
    .benefit-card-3 { order: 5; }
}

/* Neked szól (Figma 313:1031 desktop, 284:1800 mobile) */
.fit-inner { position: relative; padding-bottom: 100px; display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.fit-bg { position: absolute; inset: 0; pointer-events: none; }
.fit-ring, .fit-line { position: absolute; display: flex; align-items: center; justify-content: center; }
.fit-ring-rot, .fit-line-rot { flex: none; position: relative; }
.fit-ring-rot picture, .fit-line-rot picture, .fit-ring-rot img, .fit-line-rot img { display: block; width: 100%; height: 100%; max-width: none; }
.fit-ring-a { left: 0; top: 77px; width: 704.55px; height: 1130.06px; }
.fit-ring-a .fit-ring-rot { width: 1073.107px; height: 594.091px; transform: rotate(-83.91deg); }
.fit-ring-b { left: 3px; top: 0; width: 1225.956px; height: 1180.653px; }
.fit-ring-b .fit-ring-rot { width: 1068px; height: 1118.999px; transform: rotate(-83.91deg); }
.fit-ring-c { left: 0; top: 77px; width: 1112.161px; height: 1217.134px; }
.fit-ring-c .fit-ring-rot { width: 1073.107px; height: 594.092px; transform: rotate(53.91deg); }
.fit-ring-d { left: 3px; top: 0; width: 1533.351px; height: 1522.175px; }
.fit-ring-d .fit-ring-rot { width: 1068px; height: 1119px; transform: rotate(53.91deg); }
.fit-line { left: -395px; top: -25px; width: 1773.679px; height: 599.917px; }
.fit-line-rot { width: 1751.615px; height: 519.878px; transform: rotate(-177.36deg) scaleY(-1); }
.fit h2 { position: relative; margin: 0; text-align: center; white-space: nowrap; }
.fit-cards { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 308px); gap: var(--space-4); }
.fit-card { position: relative; min-height: 200px; padding: var(--space-6); overflow: hidden; border-radius: var(--radius-xl); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-sm); }
.fit-card h3 { position: relative; margin: 0 0 var(--space-2); font: var(--type-h5); letter-spacing: var(--ls-h5); }
.fit-card p { position: relative; max-width: 250px; margin: 0; font: var(--type-paragraph-3); }
.fit-art { position: absolute; left: -237px; top: -269px; width: 503.29px; height: 506.05px; display: flex; align-items: center; justify-content: center; }
.fit-art-rot { flex: none; position: relative; width: 353px; height: 367.377px; overflow: hidden; transform: rotate(-37.2deg); }
.fit-art-rot > span { position: absolute; }
.fit-art img { display: block; max-width: none; width: 100%; height: 100%; }
.fit-art picture { display: contents; }
.fit-art-1 { display: flex; align-items: center; justify-content: center; inset: -2.47% -3.72% 28.58% -9%; container-type: size; }
.fit-art-1-rot { flex: none; position: relative; height: hypot(90.9538cqw, 22.9465cqh); width: hypot(9.04618cqw, -77.0535cqh); transform: rotate(-80.23deg); }
.fit-art-1-in { position: absolute; inset: 0 -0.18% 0 0; }
.fit-art-2 { inset: 6.39% 10.79% 25.36% 5.07%; }
.fit-art-2-in { position: absolute; inset: 0 0 -0.15% 0; }
.fit-art-3 { inset: 1.13% 20.04% 54.41% 3.43%; }
.fit-art-3-in { position: absolute; inset: -0.23% 0 0 -0.13%; }
.fit-closing { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 582px; text-align: center; }
.fit-closing p { margin: 0; font: var(--type-statement); letter-spacing: var(--ls-statement); }

@media (max-width: 1100px) {
    .fit-inner { gap: var(--space-6); margin-top: 100px; }
    .fit-ring-a { width: 1155.553px; height: 1197.662px; }
    .fit-ring-a .fit-ring-rot { transform: rotate(-48.56deg); }
    .fit-ring-b { width: 1545.693px; height: 1541.21px; }
    .fit-ring-b .fit-ring-rot { transform: rotate(-48.56deg); }
    .fit-ring-c { width: 607.854px; height: 1080.664px; }
    .fit-ring-c .fit-ring-rot { transform: rotate(89.26deg); }
    .fit-ring-d { width: 1132.653px; height: 1082.314px; }
    .fit-ring-d .fit-ring-rot { transform: rotate(89.26deg); }
    .fit-line { left: -609.66px; top: -141.67px; width: 1700.533px; height: 1487.798px; }
    .fit-line-rot { transform: rotate(-142.01deg) scaleY(-1); }
    .fit h2 { width: 256px; white-space: normal; }
    .fit-cards { grid-template-columns: 308px; gap: var(--space-3); }
    .fit-closing { gap: var(--space-4); width: 288px; }
}

/* Előadók (Figma 313:1196 desktop, 284:1958 mobile) */
.speakers-inner { padding-block: 50px; display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.speakers-inner > h2 { margin: 0; text-align: center; white-space: nowrap; }
.speakers-grid { width: min(var(--content-max), 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.speaker-card { display: flex; gap: var(--space-4); padding: var(--space-4); overflow: hidden; border-radius: var(--radius-xl); background: var(--color-surface-muted); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.speaker-card:nth-child(n+5) { min-height: 414px; }
.speaker-keynote { gap: var(--space-6); background: var(--glass-bg); box-shadow: var(--shadow-sm); }
.speaker-photos { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); justify-content: center; }
.speaker-photo { position: relative; flex: 1 0 0; min-height: 0; overflow: hidden; border-radius: var(--radius-md); }
.speaker-keynote .speaker-photo { flex: none; width: 292px; }
.speaker-card-stack .speaker-photo { flex: none; height: 192px; }
.speaker-photo > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.speaker-photo-placeholder { display: grid; place-items: center; min-height: 160px; background: var(--color-magenta); }
.speaker-photo-placeholder span { font: var(--type-h3); letter-spacing: var(--ls-h3); color: var(--color-text-inverse); opacity: .9; }
/* The /eloadok keynote photo sits inside .speaker-photos (a column): fill the column instead of collapsing to 0 height. */
.speaker-keynote .speaker-photos { flex: none; width: 292px; }
.speaker-keynote .speaker-photos .speaker-photo { flex: 1 0 auto; width: auto; min-height: 320px; }
.speaker-badge { position: absolute; right: 0; bottom: 0; display: flex; padding: var(--space-1); margin: 0 var(--space-2) var(--space-2) 0; border: 1px solid var(--color-white); border-radius: var(--radius-pill); background: var(--glass-bg-strong); }
.speaker-badge img { display: block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.speaker-body { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.speaker-info { flex: 1 0 0; display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.speaker-card :is(h3, .speaker-name) { margin: 0; font: var(--type-title); letter-spacing: var(--ls-tight); color: var(--color-highlight); }
.speaker-card :is(h3, .speaker-name) a, .speaker-intro a { color: inherit; text-decoration: underline 1px transparent; text-underline-offset: .15em; transition: text-decoration-color var(--duration-fast); }
.speaker-card :is(h3, .speaker-name) a:hover, .speaker-intro a:hover { text-decoration-color: currentColor; }
.speaker-info p, .speaker-person p { margin: 0; font: var(--type-paragraph-3); }
.speaker-info .speaker-label { margin-bottom: var(--space-2); font: var(--type-label-sm); text-transform: uppercase; color: var(--color-text-muted); }
.speaker-info .speaker-sub { font: var(--type-caption); }
.speaker-keynote .speaker-info { gap: 0; }
.speaker-keynote .speaker-role { margin-bottom: var(--space-6); }
.speaker-intro { display: flex; flex-direction: column; gap: var(--space-2); }
.speaker-person { display: flex; flex-direction: column; gap: var(--space-1); }
.speaker-person strong { font-size: var(--fs-paragraph-3); line-height: 1.2; letter-spacing: var(--ls-tight); }
.speaker-body > .speaker-more { flex: none; }

@media (max-width: 1100px) {
    .speakers-inner { padding-block: 0; gap: var(--space-6); }
    .speakers-inner > h2 { width: 100%; white-space: normal; }
    .speakers-grid { width: min(343px, 100%); grid-template-columns: minmax(0, 1fr); }
    .speaker-card, .speaker-keynote { flex-direction: column; }
    .speaker-card:nth-child(n+5) { min-height: 0; }
    .speaker-keynote .speaker-photo { width: auto; height: 311px; }
    .speaker-photos { flex: none; justify-content: flex-start; }
    .speaker-photo { flex: none; height: 311px; }
    .speaker-card-stack .speaker-photos { flex-direction: row; }
    .speaker-card-stack .speaker-photo { flex: 1 0 0; }
    .speaker-keynote .speaker-photos { width: auto; }
    .speaker-keynote .speaker-photos .speaker-photo { flex: none; min-height: 0; }
    .speaker-body { flex: none; width: 100%; }
    .speaker-info { flex: none; }
}

/* Mérföldkövek (Figma 313:964 desktop, 284:2050 mobile) */
.timeline-section-inner { position: relative; padding-top: var(--space-24); overflow: hidden; border-radius: var(--radius-stage); background: var(--color-surface-inverse); display: flex; flex-direction: column; align-items: center; gap: var(--space-20); }
.tl-bg { position: absolute; inset: 0; pointer-events: none; }
.tl-gradient { position: absolute; left: -340px; top: -546px; width: 2566px; height: 1742px; max-width: none; }
.tl-ring { position: absolute; display: flex; align-items: center; justify-content: center; }
.tl-ring-rot { flex: none; position: relative; opacity: .14; transform: rotate(150.63deg); }
.tl-ring-rot img { display: block; width: 100%; height: 100%; max-width: none; }
.tl-ring-a { left: 0; top: 77px; width: 1226.552px; height: 1044.015px; }
.tl-ring-a .tl-ring-rot { width: 1073.107px; height: 594.091px; }
.tl-ring-b { left: 3px; top: 0; width: 1479.527px; height: 1498.961px; }
.tl-ring-b .tl-ring-rot { width: 1068px; height: 1119px; }
.tl-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.tl-head .eyebrow { color: inherit; }
.tl-head h2 { margin: 0; width: 522px; }
.tl-lead { width: 574px; font: var(--type-paragraph-1); }
.tl-lead p { margin: 0; }
.tl-steps { position: relative; width: min(var(--content-max), 100%); padding: var(--space-12) 0; color: var(--color-heading); }
.tl-steps::before { content: ""; position: absolute; left: 159px; right: 154px; top: calc(50% - 104px); height: 2px; background: currentColor; opacity: .3; }
.tl-steps ol { position: relative; list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; gap: var(--space-6); }
.tl-step { display: flex; flex-direction: column; align-items: center; width: 217.6px; padding-bottom: var(--space-5); text-align: center; }
.tl-step:first-child { padding-bottom: 0; }
.tl-num { width: 54px; height: 54px; margin-bottom: 18px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-md); color: inherit; letter-spacing: var(--ls-h5); }
.tl-step h3 { margin: 0 0 var(--space-2); color: inherit; font: var(--type-h5); letter-spacing: var(--ls-h5); }
.tl-step:first-child h3 { margin-bottom: 0; }
.tl-step:nth-child(2) h3 { max-width: 179px; }
.tl-step p { margin: 0 auto; font: var(--type-paragraph-3); }
.tl-step:nth-child(1) p { max-width: 218px; }
.tl-step:nth-child(2) p { max-width: 217px; }
.tl-step:nth-child(3) p { max-width: 208px; }
.tl-step:nth-child(4) p { max-width: 213px; }
.tl-step:nth-child(5) p { max-width: 204px; }

@media (max-width: 1100px) {
    .timeline-section-inner { margin-top: 47px; padding-top: var(--space-8); gap: var(--space-8); background: linear-gradient(180deg, var(--gradient-brand-deep-stops)); }
    .tl-bg { display: none; }
    .tl-head { gap: var(--space-3); }
    .tl-head h2 { width: 288px; }
    .tl-lead { width: 298px; max-width: 100%; }
    .tl-steps { width: 100%; padding: 0 0 var(--space-8); }
    .tl-steps::before { left: 48px; right: auto; top: 0; bottom: var(--space-8); width: 1px; height: auto; }
    .tl-steps ol { flex-direction: column; align-items: center; gap: var(--space-6); }
    .tl-step { flex-direction: row; align-items: flex-start; gap: var(--space-6); width: 300px; padding-bottom: 0; text-align: left; }
    .tl-num { margin-bottom: 0; }
    .tl-step h3, .tl-step:first-child h3 { margin: 0 0 var(--space-1); }
    .tl-step p { margin: 0; }
}

/* Partnerek (Figma 313:945; mobile 284:2140 sized from its metadata only) */
.partners-strip-inner { padding-block: var(--section-space); display: flex; align-items: center; gap: var(--space-20); }
.partners-strip h2 { flex: none; width: 507px; margin: 0; }
.partners-viewport { position: relative; flex: 1 0 0; min-width: 0; overflow: hidden; padding: var(--space-3) 0; margin: calc(-1 * var(--space-3)) calc(-1 * var(--page-gutter)) calc(-1 * var(--space-3)) 0; } /* runs into the right gutter */
.partners-viewport::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: 271px; height: 58px; background: linear-gradient(90deg, var(--color-surface) 6.7%, transparent 95.4%); }
.partners-track { display: flex; width: max-content; animation: partners-scroll 30s linear infinite; }
.partners-set { list-style: none; margin: 0; padding: 0 62px 0 0; display: flex; align-items: center; gap: 62px; }
.partners-set li { flex: none; }
.partners-set img { display: block; height: 32px; }
@keyframes partners-scroll { to { transform: translateX(-50%); } }
.partners-viewport:hover .partners-track, .partners-viewport:focus-within .partners-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .partners-track { animation: none; } }

@media (max-width: 1100px) {
    .partners-strip-inner { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
    .partners-strip h2 { width: 281px; }
    .partners-viewport { width: 100%; flex: none; margin-right: 0; }
}

/* Számok (from design screenshot; rings reuse the Neked szól art) */
.figures-inner { position: relative; padding: 150px 0 var(--space-16); display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.figures-bg { position: absolute; inset: 0; pointer-events: none; }
.figures-ring { position: absolute; top: -175px; width: 1068px; height: 1119px; max-width: none; }
.figures-ring-l { left: -694px; }
.figures-ring-r { right: -650px; top: -200px; }
.figures h2 { position: relative; margin: 0; max-width: 560px; text-align: center; }
.figures-cards { position: relative; list-style: none; margin: 0; padding: 0; width: min(var(--content-max), 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.figure-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-md); text-align: center; }
.figure-card h3 { margin: 0; font: var(--type-h3); letter-spacing: var(--ls-h3); color: var(--color-red); }
.figure-card h3 span { display: block; }
.figure-card:nth-child(3n+2) h3 { color: var(--color-purple); }
.figure-card:nth-child(3n) h3 { color: var(--color-blue); }
.figure-card p { margin: 0; max-width: 340px; font: var(--fw-medium) var(--fs-paragraph-2)/var(--lh-paragraph-1) var(--font-sans); }
.figures .btn { position: relative; }

@media (max-width: 1100px) {
    .figures-inner { padding-top: var(--section-space); gap: var(--space-6); }
    .figures-ring-l { left: -800px; }
    .figures-ring-r { right: -900px; top: 200px; }
    .figures-cards { width: min(343px, 100%); grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

/* Mitől más (from design screenshot; rings reuse the Neked szól art) */
.diff-inner { position: relative; padding: var(--space-10) 0 var(--section-space); display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.diff-bg { position: absolute; inset: 0; pointer-events: none; }
.diff-ring { position: absolute; top: -900px; width: 1068px; height: 1119px; max-width: none; }
.diff-ring-l { left: -590px; }
.diff-ring-r { right: -590px; }
.diff h2 { position: relative; margin: 0; max-width: 620px; text-align: center; text-wrap: wrap; }
.diff-cards { position: relative; list-style: none; margin: 0; padding: 0; width: min(var(--content-max), 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.diff-card { display: flex; flex-direction: column; gap: var(--space-6); min-height: 212px; padding: var(--space-8); border-radius: var(--radius-xl); background: linear-gradient(84.7deg, var(--gradient-brand-deep-stops)); }
.diff-card h3 { margin: 0; max-width: 250px; font: var(--type-title); letter-spacing: var(--ls-snug); }
.diff-card p { margin: 0; max-width: 320px; font: var(--type-paragraph-2); }

@media (max-width: 1100px) {
    .diff-inner { padding-top: var(--space-8); gap: var(--space-6); }
    .diff-cards { width: min(343px, 100%); grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .diff-card { min-height: 0; padding: var(--space-6); gap: var(--space-4); }
}

/* Program (from design screenshot) */
.agenda-inner { position: relative; padding: var(--space-10) 0 var(--space-20); display: grid; grid-template-columns: minmax(0, 1fr) 738px; gap: var(--space-10); align-items: start; }
.agenda-intro { position: sticky; top: calc(var(--header-h) + var(--space-6)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.agenda-intro h2, .agenda-intro h1 { margin: 0; max-width: 420px; text-wrap: wrap; }
.agenda-intro h1 { font: var(--type-h2); letter-spacing: var(--ls-h2); }
.agenda-panel { position: relative; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--glass-bg); backdrop-filter: blur(39px); -webkit-backdrop-filter: blur(39px); box-shadow: var(--shadow-md); }
.agenda-panel h3 { margin: 0 0 var(--space-4); padding-inline: var(--space-2); font: var(--type-h4); font-weight: var(--fw-bold); letter-spacing: var(--ls-h4); }
.agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.agenda-row { position: relative; display: grid; grid-template-columns: 121px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-4) var(--space-5); border: 1px solid rgb(255 255 255 / 60%); border-radius: var(--radius-md); background: rgb(255 255 255 / 25%); box-shadow: 0 0 0 1px rgb(var(--shadow-tint) / 5%); font: var(--type-paragraph-3); }
.agenda-row + .agenda-row::before { content: ""; position: absolute; left: 50px; bottom: 100%; width: 1px; height: var(--space-4); background: var(--color-text); opacity: .6; }
.agenda-row time { line-height: var(--lh-label); }
.agenda-body { display: flex; flex-direction: column; gap: var(--space-2); }
.agenda-body p { margin: 0; }
.agenda-label { font: var(--type-caption); color: var(--color-text-muted); }
.agenda-title { font-weight: var(--fw-bold); letter-spacing: var(--ls-snug); }
.agenda-title a { color: inherit; text-decoration: none; }
/* Hover-only cues, so the resting look is unchanged but the link announces itself on pointer. */
.agenda-title a:hover { color: var(--color-link-hover); text-decoration: underline; }
.agenda-speaker strong { display: block; letter-spacing: var(--ls-snug); }
.agenda-speaker span { display: block; color: var(--color-text-muted); }
.is-break .agenda-title { line-height: var(--lh-label); }

@media (max-width: 1100px) {
    .agenda-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-top: var(--space-8); }
    .agenda-intro { position: static; }
    .agenda-intro h2 { text-wrap: balance; }
    .agenda-panel { padding: var(--space-4); }
    .agenda-panel h3 { padding-inline: var(--space-1); }
}
@media (max-width: 560px) {
    .agenda-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4); }
    .agenda-row + .agenda-row::before { left: 32px; }
}

/* Jegyek (from design screenshot) */
.passes-inner { padding-block: var(--section-space); display: flex; flex-direction: column; align-items: center; gap: var(--space-20); }
.passes-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.passes h2 { margin: 0; max-width: 600px; text-align: center; text-wrap: wrap; }
.passes-deadline { margin: 0; font: var(--type-paragraph-1); color: var(--color-text-muted); }
.passes-deadline strong { color: var(--color-text); }
.passes-grid { list-style: none; margin: 0; padding: 0; width: min(var(--content-max), 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.pass { position: relative; display: flex; flex-direction: column; padding: var(--space-6) var(--space-4) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-xl); background: var(--color-surface-muted); font: var(--fw-regular) var(--fs-paragraph-2)/var(--lh-label) var(--font-sans); }
.pass-featured { background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, var(--gradient-brand) border-box; box-shadow: var(--shadow-md); }
.pass-badge { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-purple), var(--color-red)); color: var(--color-text-inverse); font: var(--type-label-sm); line-height: 22px; text-transform: uppercase; white-space: nowrap; }
.pass h3 { margin: 0 0 var(--space-4); font: var(--type-h5); letter-spacing: var(--ls-h5); }
.pass-price { margin-bottom: var(--space-6); font: var(--fw-regular) var(--fs-h4)/var(--lh-h4) var(--font-sans); letter-spacing: var(--ls-snug); }
.pass-price p { margin: 0; }
.pass-early span { font-weight: var(--fw-bold); background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pass-includes { margin: 0 0 var(--space-6); }
.pass-list { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pass-list li { position: relative; padding-left: var(--space-6); }
.pass-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; background: linear-gradient(135deg, var(--color-purple), var(--color-red)); -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat; }
.pass-audience { margin-bottom: var(--space-6); }
.pass-audience h4 { margin: 0 0 var(--space-1); font: var(--type-h5); font-weight: var(--fw-bold); letter-spacing: var(--ls-h5); }
.pass-audience p { margin: 0; }
.pass { --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7.5l3.8 3.7L13 2.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

@media (max-width: 1100px) {
    .passes-inner { gap: var(--space-10); }
    .passes-grid { width: min(632px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
}
@media (max-width: 700px) {
    .passes-grid { width: min(343px, 100%); grid-template-columns: minmax(0, 1fr); }
}

/* Jelentkezés (from design screenshot) */
.signup-inner { position: relative; padding: 216px 0 var(--section-space); display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.signup-bg { position: absolute; inset: 0; pointer-events: none; }
.signup-waves { position: absolute; top: 0; left: 0; width: 440px; height: 310px; }
.signup-waves + .signup-waves { left: auto; right: 0; transform: scaleX(-1); }
.signup h2 { position: relative; margin: 0; text-align: center; }
.signup-steps { position: relative; list-style: none; margin: 0; padding: 0; width: min(var(--content-max), 100%); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.signup-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding: 0 var(--space-2); text-align: center; }
.signup-step:not(:last-child)::after { content: ""; position: absolute; top: 27px; left: calc(50% + 28px); width: calc(100% - 56px); height: 2px; background: var(--color-red); opacity: .55; }
.signup-num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-md); color: var(--color-red); font: var(--type-h5); }
.signup-step h3 { margin: 0 0 var(--space-3); font: var(--type-h5); letter-spacing: var(--ls-h5); text-wrap: wrap; }
.signup-step p { margin: 0 auto; max-width: 205px; font: var(--type-paragraph-3); text-wrap: balance; }

@media (max-width: 1100px) {
    .signup-inner { padding-top: var(--section-space); gap: var(--space-8); }
    .signup-waves { display: none; }
    .signup-steps { width: min(343px, 100%); grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
    .signup-step { flex-direction: row; align-items: flex-start; gap: var(--space-4); padding: 0; text-align: left; }
    .signup-step:not(:last-child)::after { top: 56px; left: 27px; width: 2px; height: calc(100% - 56px + var(--space-6)); }
    .signup-num { flex: none; }
    .signup-step h3 { margin-bottom: var(--space-1); padding-top: var(--space-4); }
    .signup-step h3 br { display: none; }
    .signup-step p { margin: 0; max-width: none; text-wrap: wrap; }
}

/* GYIK (from design screenshot; also on talk pages via partials/faq) */
.faq-section-inner { position: relative; padding: 130px 0 120px; display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.faq-bg { position: absolute; inset: 0; pointer-events: none; }
.faq-ring { position: absolute; width: 1068px; height: 1119px; max-width: none; opacity: .5; }
.faq-ring-l { left: -883px; top: -110px; }
.faq-ring-r { right: -869px; top: -60px; }
.faq-section h2 { position: relative; margin: 0; text-align: center; }
.faq-intro { position: relative; max-width: 640px; margin-top: calc(-1 * var(--space-6)); font: var(--type-paragraph-1); text-align: center; }
.faq-intro p { margin: 0; }
.faq { position: relative; display: flex; flex-direction: column; gap: var(--space-4); }
.faq-item { border-radius: var(--radius-md); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-md); }
.faq-item summary { position: relative; padding: 28px 64px 28px var(--space-6); font: var(--type-h5); letter-spacing: var(--ls-h5); list-style: none; cursor: pointer; border-radius: inherit; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: var(--space-6); top: 50%; width: 24px; height: 24px; margin-top: -12px; background: currentColor; -webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat; transition: transform var(--duration-base) var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-answer { padding: 0 64px var(--space-6) var(--space-6); font: var(--type-paragraph-1); }
.faq-answer p { margin: 0 0 .75em; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-item { --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8.5l7 7 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

@media (max-width: 1100px) {
    .faq-section-inner { padding-block: var(--section-space); gap: var(--space-8); }
    .faq-ring-l { left: -960px; }
    .faq-ring-r { right: -960px; }
    .faq { gap: var(--space-3); }
    .faq-item summary { padding: var(--space-5) 52px var(--space-5) var(--space-5); font-size: var(--fs-label); line-height: var(--lh-label); }
    .faq-item summary::after { right: var(--space-4); }
    .faq-answer { padding: 0 var(--space-5) var(--space-5); font: var(--type-paragraph-2); line-height: var(--lh-label); }
}

/* CTA (from design screenshot; also on talk pages via partials/cta) */
.cta-inner { position: relative; padding: 52px 0 var(--space-20); display: flex; flex-direction: column; align-items: center; gap: var(--space-10); text-align: center; }
.cta-bg { position: absolute; inset: 0; pointer-events: none; }
.cta-waves { position: absolute; top: 0; left: 0; width: 420px; height: 420px; }
.cta-waves + .cta-waves { left: auto; right: 0; transform: scaleX(-1); }
.cta-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); max-width: 720px; }
.cta .eyebrow { color: var(--color-text); background: var(--glass-bg); }
.cta h2 { margin: var(--space-2) 0 var(--space-2); max-width: 600px; text-wrap: wrap; }
.cta-text { max-width: 660px; font: var(--type-paragraph-1); }
.cta-text p { margin: 0; }
.countdown { display: flex; align-items: flex-start; gap: var(--space-8); }
.countdown-unit { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 44px; }
.countdown-unit + .countdown-unit::before { content: ""; position: absolute; left: calc(-1 * var(--space-4) - 1.5px); top: 18px; width: 3px; height: 14px; background: radial-gradient(circle, var(--color-slate) 1.5px, transparent 2px) center top / 3px 3px no-repeat, radial-gradient(circle, var(--color-slate) 1.5px, transparent 2px) center bottom / 3px 3px no-repeat; }
.countdown strong { font: var(--fw-semibold) 32px/1.1 var(--font-sans); letter-spacing: var(--ls-snug); font-variant-numeric: tabular-nums; }
.countdown small { font: var(--fw-semibold) var(--fs-caption)/var(--lh-caption) var(--font-sans); text-transform: uppercase; }
.cta-art { position: relative; display: block; width: min(785px, 100%); height: auto; }

@media (max-width: 1100px) {
    .cta-inner { padding-top: var(--section-space); gap: var(--space-8); }
    .cta-waves { display: none; }
    .cta .eyebrow { border-radius: var(--radius-md); font: var(--type-label-sm); line-height: 20px; }
}

/* Legacy sections: not yet designed in Figma; built only from the tokens
   above so they already read as the same brand. */

/* Program item detail: one gradient card (from design screenshot; rings reuse the Mérföldkövek art) */
.crumbs a { font-weight: var(--fw-semibold); text-decoration: none; }
.talk-section-inner { padding: var(--space-4) 0 var(--space-10); }
.talk-card { position: relative; overflow: hidden; padding: var(--space-24) var(--space-8) var(--space-24); border-radius: var(--radius-stage); background: linear-gradient(90deg, var(--gradient-brand-deep-stops)); color: var(--color-text-inverse); text-align: center; }
.talk-bg { position: absolute; inset: 0; pointer-events: none; }
.talk-bg .tl-ring-a { left: 50%; top: -300px; transform: translateX(-50%); }
.talk-bg .tl-ring-rot { opacity: .45; }
.talk-inner, .talk-inner :is(h1, h2, p, a) { color: var(--color-text-inverse); }
.talk-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-width: 860px; margin: 0 auto; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; font: var(--type-paragraph-3); opacity: .85; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--space-2); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.talk-photos { display: flex; justify-content: center; margin-bottom: var(--space-4); }
.talk-photo { display: block; width: 152px; height: 152px; overflow: hidden; border-radius: 50%; }
.talk-photo + .talk-photo { margin-left: -24px; }
.talk-photo img { width: 100%; height: 100%; object-fit: cover; }
.talk-people { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.talk-people p { margin: 0; }
.talk-person a { display: block; font: var(--type-title); letter-spacing: var(--ls-tight); color: inherit; text-decoration: none; }
.talk-person a:hover { text-decoration: underline; }
.talk-person span { display: block; margin-top: var(--space-1); font: var(--type-paragraph-3); opacity: .85; }
.talk-partner-label, .talk-time { font: var(--type-paragraph-3); opacity: .85; }
.talk-time { margin: var(--space-2) 0 0; }
.talk h1, .talk-session h2 { margin: 0; font: var(--type-h3); letter-spacing: var(--ls-h3); text-wrap: balance; }
.talk h1.talk-person { font: var(--type-title); letter-spacing: var(--ls-tight); }
.talk h1.talk-person span { letter-spacing: normal; }
.talk-session { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.talk-session + .talk-session { margin-top: var(--space-10); }
.talk-session h2 a { color: inherit; text-decoration: none; }
.talk-session h2 a:hover { text-decoration: underline; }
.talk-text { max-width: 860px; font: var(--type-paragraph-1); }
.talk-text > :first-child { margin-top: 0; }
.talk-text > :last-child { margin-bottom: 0; }
.btn-back { --btn-fg: var(--color-text-inverse); --btn-border: rgb(255 255 255 / 60%); margin-top: var(--space-4); padding: var(--space-1) var(--space-8) var(--space-1) var(--space-1); }
.btn-back img { transform: scaleX(-1); filter: brightness(0) invert(1); }
.btn-back:hover img { transform: scaleX(-1) translateX(3px); }

@media (max-width: 900px) {
    .talk-card { padding: var(--space-16, 64px) var(--space-4); }
    .talk-photo { width: 112px; height: 112px; }
}
@media (max-width: 1100px) {
}

/* Speaker index (reuses the speaker-card layout) */
.speakers-index h1 { margin: 0; text-align: center; font: var(--type-h2); letter-spacing: var(--ls-h2); }
.speakers-index .speaker-keynote { grid-column: 1 / -1; }
.speakers-index .speaker-card { min-height: 280px; }
.agenda-speaker a, .speaker-profile h3 a { color: inherit; text-decoration: none; }
.agenda-speaker a:hover, .speaker-profile h3 a:hover { color: var(--color-link-hover); }

/* 6. Utilities ------------------------------------------------------------- */
/* Tailwind-style single-purpose classes (no Tailwind). Mobile-first: a bare class applies
   everywhere, a sm: / md: / lg: prefix from that width up. The screens are the theme's own
   breakpoints, so lg: is the Figma desktop layout (the inverse of max-width: 1100px).
   Last in the file, so a utility wins over a component rule of the same specificity.
   In CSS the colon is escaped (.lg\:hidden); in markup it is written plain (class="lg:hidden"). */

.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.-inset-x-gutter { left: calc(-1 * var(--page-gutter)); right: calc(-1 * var(--page-gutter)); }
.hidden { display: none; }
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.w-full { width: 100%; }
.mx-auto { margin-inline: auto; }
.max-w-section { max-width: var(--section-max); }
.max-w-page { max-width: var(--page-max); }
.max-w-content { max-width: var(--content-max); }
.max-w-prose { max-width: var(--prose-max); }
.max-w-none { max-width: none; }
.px-gutter { padding-inline: var(--page-gutter); }
.px-0 { padding-inline: 0; }
.py-section { padding-block: var(--section-space); }
.text-center { text-align: center; }

/* sm: ≥ 561px */
@media (min-width: 561px) {
    .sm\:hidden { display: none; }
    .sm\:block { display: block; }
    .sm\:flex { display: flex; }
    .sm\:grid { display: grid; }
    .sm\:max-w-section { max-width: var(--section-max); }
    .sm\:max-w-page { max-width: var(--page-max); }
    .sm\:max-w-content { max-width: var(--content-max); }
    .sm\:max-w-prose { max-width: var(--prose-max); }
    .sm\:max-w-none { max-width: none; }
    .sm\:px-gutter { padding-inline: var(--page-gutter); }
    .sm\:px-0 { padding-inline: 0; }
}

/* md: ≥ 761px */
@media (min-width: 761px) {
    .md\:hidden { display: none; }
    .md\:block { display: block; }
    .md\:flex { display: flex; }
    .md\:grid { display: grid; }
    .md\:max-w-section { max-width: var(--section-max); }
    .md\:max-w-page { max-width: var(--page-max); }
    .md\:max-w-content { max-width: var(--content-max); }
    .md\:max-w-prose { max-width: var(--prose-max); }
    .md\:max-w-none { max-width: none; }
    .md\:px-gutter { padding-inline: var(--page-gutter); }
    .md\:px-0 { padding-inline: 0; }
}

/* lg: ≥ 1101px (Figma desktop) */
@media (min-width: 1101px) {
    .lg\:hidden { display: none; }
    .lg\:-inset-x-gutter { left: calc(-1 * var(--page-gutter)); right: calc(-1 * var(--page-gutter)); }
    .lg\:block { display: block; }
    .lg\:flex { display: flex; }
    .lg\:grid { display: grid; }
    .lg\:max-w-section { max-width: var(--section-max); }
    .lg\:max-w-page { max-width: var(--page-max); }
    .lg\:max-w-content { max-width: var(--content-max); }
    .lg\:max-w-prose { max-width: var(--prose-max); }
    .lg\:max-w-none { max-width: none; }
    .lg\:px-gutter { padding-inline: var(--page-gutter); }
    .lg\:px-0 { padding-inline: 0; }
}