/* ========================================
   FONTS
   ======================================== */

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-Regular.woff2') format('woff2'),
         url('fonts/NotoSerif-Regular.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Bourrasque';
    src: url('fonts/Bourrasque_WEB-Regular.woff2') format('woff2'),
         url('fonts/Bourrasque_WEB-Regular.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Bourrasque Ouest';
    src: url('fonts/Bourrasque_WEB-45_Ouest.woff2') format('woff2'),
         url('fonts/Bourrasque_WEB-45_Ouest.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Bourrasque Est';
    src: url('fonts/Bourrasque_WEB-45_Est.woff2') format('woff2'),
         url('fonts/Bourrasque_WEB-45_Est.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cygnito Mono';
    src: url('fonts/cygnito-mono.woff2') format('woff2'),
         url('fonts/cygnito-mono.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}

/* ========================================
   CSS CUSTOM PROPERTIES
   Type scale built on the golden ratio (phi = 1.618), base 1.15rem.
   step-0 body / step-1 sub / step-2 headline / step-3 wordmark zone
   ======================================== */

/* CHROMATIC BACKUP — pre-SPRINT-COLOR values
   --accent was: #6c00ff (placeholder purple)
   legacy blue: #4C7FE0 · legacy green: #5BEA84
   restore: git checkout <hash> -- styles.css
*/
:root {
    --bg: #f5f5f5;
    --text: #1a1a1a;
    --text-muted: #444;
    --text-dim: #777;
    --text-bright: #111;
    --border: rgba(76,127,224,0.18);
    --border-dark: rgba(76,127,224,0.10);
    --link: #4C7FE0;
    --link-hover-bg: #4C7FE0;
    --link-hover-text: #fff;
    --accent: #4C7FE0;
    --accent-dim: rgba(76,127,224,0.07);
    --accent-gold: #97D700;
    --accent-green: #97D700;
    --accent-green-30: rgba(151,215,0,0.30);
    --accent-purple: #4C7FE0;
    --accent-moon: #dbeafe;
    --btn-bg:       #4C7FE0;
    --btn-gradient: linear-gradient(135deg, #97D700 0%, #4C7FE0 31%, #4C7FE0 100%);

    /* Golden-ratio modular scale */
      --fs-0: clamp(1.02rem, 0.93rem + 0.45vw, 1.3rem);   /* body */
    --fs-1: clamp(1.4rem,  1.10rem + 1.4vw,  2.5rem);   /* sub-headline */
    --fs-2: clamp(2rem,    1.50rem + 2.6vw,  3.6rem);   /* headline */
    --line-body: 1.75;
/* Golden-ratio spacing scale (×1.618 each step) */
    --sp-2: 1rem;
    --sp-3: 1.618rem;
    --sp-4: 2.618rem;
    --sp-5: 4.236rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #111210;
        --text: #f3efe6;
        --text-muted: #d4cfc2;   /* brighter than before — was muddy grey */
        --text-dim: #9a9488;
        --text-bright: #ffffff;
        --border: rgba(76,127,224,0.18);
        --border-dark: rgba(76,127,224,0.10);
        --link: #7BA4EE;
        --link-hover-bg: #4C7FE0;
        --link-hover-text: #fff;
        --accent: #4C7FE0;
        --accent-dim: rgba(76,127,224,0.07);
        --accent-gold: #97D700;
        --accent-green: #97D700;
        --accent-green-30: rgba(151,215,0,0.30);
        --accent-purple: #4C7FE0;
        --accent-moon: #e0e7ff;
    }
}

/* ========================================
   CITIZENIT BRAND PALETTE — #4C7FE0 blue · #97D700 green
   Ratio 70.10% blue · 29.90% green (Pantone 375)
   Headlines: green-led (exception). All else: blue-led.
   ======================================== */

[data-theme="a"] {
    --gd-main:    linear-gradient(90deg, #97D700 0%, #4C7FE0 100%);
    --gd-cool:    linear-gradient(90deg, #97D700 0%, #4C7FE0 31%, #4C7FE0 100%);
    --gd-warm:    linear-gradient(90deg, #97D700 0%, #4C7FE0 31%, #4C7FE0 100%);
    --gd-full:    linear-gradient(90deg, #97D700, #4C7FE0);
    --gd-border:  linear-gradient(135deg, rgba(76,127,224,0.85) 0%, rgba(151,215,0,0.20) 100%);
    --accent:     #4C7FE0;
    --accent-dim: rgba(76,127,224,0.07);
    --text-dim:   #4b5563;
    --bg:         #f7f9ff;
}
@media (prefers-color-scheme: dark) {
    [data-theme="a"] {
        --gd-main:    linear-gradient(90deg, #97D700 0%, #4C7FE0 100%);
        --gd-cool:    linear-gradient(90deg, #97D700 0%, #4C7FE0 31%, #4C7FE0 100%);
        --gd-warm:    linear-gradient(90deg, #97D700 0%, #4C7FE0 31%, #4C7FE0 100%);
        --gd-full:    linear-gradient(90deg, #97D700, #4C7FE0);
        --gd-border:  linear-gradient(135deg, rgba(76,127,224,0.85) 0%, rgba(151,215,0,0.20) 100%);
        --accent:     #4C7FE0;
        --accent-dim: rgba(76,127,224,0.09);
        --text-dim:   #7BA4EE;
        --bg:         #070d1a;
    }
}

/* ========================================
   GRADIENT HEADLINES — shared across all pages
   ======================================== */

.cz-rec, h3.cz-rec {
    background: var(--gd-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.cz-tl {
    background: var(--gd-cool);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.cz-fest {
    background: var(--gd-warm);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ========================================
   BANNER — BNT_love.png above wave strip
   Carried on all pages from index downward
   ======================================== */

.cz-bnt-love {
    display: block;
    width: 100%;
    max-width: min(88vw, 1971px);
    margin: 0.4rem auto 3px;
    box-sizing: border-box;
}
.cz-bnt-love img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   WAVE STRIP — animated blue↔green sine wave
   ======================================== */

.cz-wave-strip-wrap {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: visible;
    margin: 0;
    line-height: 0;
    z-index: 1;
}
.cz-wave-strip {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* ========================================
   RAINBOW STRIP — depth fade into footer
   ======================================== */

.cz-rainbow {
    width: 100%;
    height: 172px;
    background: url('photos/rainbow.jpeg') center/cover no-repeat;
    opacity: 0.82;
    flex-shrink: 0;
    margin-top: calc(-6.1vw - 60px); /* scales with wave height at any viewport */
    position: relative;
    z-index: 0;
    -webkit-mask-image: linear-gradient(180deg,
        transparent       0%,
        rgba(0,0,0,0.04) 10%,
        rgba(0,0,0,0.18) 25%,
        rgba(0,0,0,0.55) 45%,
        rgba(0,0,0,0.88) 62%,
        black             78%
    );
    mask-image: linear-gradient(180deg,
        transparent       0%,
        rgba(0,0,0,0.04) 10%,
        rgba(0,0,0,0.18) 25%,
        rgba(0,0,0,0.55) 45%,
        rgba(0,0,0,0.88) 62%,
        black             78%
    );
}

/* ========================================
   CUSTOM TEXT SIZE
   ======================================== */
.cz-fs-0 { font-size: var(--fs-0); }
.cz-fs-1 { font-size: var(--fs-1); }
.cz-fs-2 { font-size: var(--fs-2); }

/* ========================================
   RESET
   ======================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ========================================
   BASE
   ======================================== */

body {
    font-family: 'Noto Serif', serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--text);
    padding: 2rem 1rem;
}

/* ============================================================
   SITE-WIDE BACKGROUND TEXTURE (SPRINT-3 ○) — cozy 3-D depth
   Fixed layer behind all content, painted ON TOP of the solid
   --bg colour but BEHIND everything else (z-index:-1). Organic
   concentric wavy contours + faint star field (CZ_BG_TEX.svg),
   plus a soft radial depth vignette. Subtle on light AND dark.
   ► Master subtlety knob: change `opacity` on body::before.
   ============================================================ */
body::before {
    content: "";
    position: fixed;          /* fixed → cozy parallax, and NOT a flex item */
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 1;               /* ← lower (e.g. 0.65) to make texture fainter */
    background:
        radial-gradient(ellipse 125% 100% at 50% 32%, transparent 48%, rgba(10,18,38,0.07) 100%),
        url('images/CZ_BG_TEX.svg') center center / cover no-repeat;
}
@media (prefers-color-scheme: dark) {
    body::before {
        background:
            radial-gradient(ellipse 125% 100% at 50% 32%, transparent 46%, rgba(0,0,0,0.24) 100%),
            url('images/CZ_BG_TEX.svg') center center / cover no-repeat;
    }
}
html[data-forced-theme="light"] body::before {
    background:
        radial-gradient(ellipse 125% 100% at 50% 32%, transparent 48%, rgba(10,18,38,0.07) 100%),
        url('images/CZ_BG_TEX.svg') center center / cover no-repeat;
}
html[data-forced-theme="dark"] body::before {
    background:
        radial-gradient(ellipse 125% 100% at 50% 32%, transparent 46%, rgba(0,0,0,0.24) 100%),
        url('images/CZ_BG_TEX.svg') center center / cover no-repeat;
}

/* ── Nav area background strip — lives BEHIND hero (z-index:-1 = below normal flow) ── */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: linear-gradient(
        to bottom,
        transparent               0%,
        transparent              33%,
        var(--bg)                50%,
        var(--bg)                62%,
        rgba(76,127,224,0.04)   78%,
        transparent             100%
    );
    pointer-events: none;
    z-index: -1;
}

/* ========================================
   LANGUAGE TOGGLE (RO / EN)
   ======================================== */

.cz-langbar {
    position: fixed;
    top: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--accent-dim);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 10px rgba(0,0,0,0.12);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.cz-langbar.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(-150%);
    pointer-events: none;
}
.cz-langbtn {
    font-family: 'Bourrasque', 'Noto Serif', serif;
    font-variant: small-caps;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    line-height: 1;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.cz-langbtn:hover { color: var(--accent); }
.cz-langbtn.is-active {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: var(--btn-gradient);
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 6px var(--accent-green-30);
}

/* ========================================
   CONTAINER SYSTEM
   ======================================== */

.cz-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.cz-ctn {
    max-width: 720px;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1rem;
}

@media (min-width: 1280px) {
    .cz-ctn { max-width: 820px; }
}

.cz-ctn-sm  { max-width: 360px;  text-align: center; width: 100%; margin: 0 auto; padding: 2rem 1rem; }
.cz-ctn-md  { max-width: 560px;  text-align: center; width: 100%; margin: 0 auto; padding: 2rem 1rem; }
.cz-ctn-lg  { max-width: 720px;  text-align: center; width: 100%; margin: 0 auto; padding: 2rem 1rem; }
.cz-ctn-xl  { max-width: 1152px; text-align: center; width: 100%; margin: 0 auto; padding: 2rem 1rem; }
.cz-ctn-full{ max-width: 100%;   text-align: center; width: 100%; margin: 0 auto; padding: 2rem 1rem; }

.cz-sec { width: 100%; margin: 0; padding: 1.5rem 0; position: relative; }
.cz-sec-b { width: 100%; margin: 0; padding: 1.5rem 0; position: relative; border: 1px solid var(--border-dark); border-radius: 8px; }
.cz-sec-g { width: 100%; margin: 0; padding: 1.5rem 0; position: relative; border: 1px solid var(--border-dark); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.1); }

.cz-gap    { width: 100%; height: 2rem; }
.cz-gap-sm { width: 100%; height: 1rem; }
.cz-gap-lg { width: 100%; height: 4rem; }

/* ========================================
   SPACING UTILITIES
   ======================================== */

.cz-tight  { margin: 0 !important; padding: 0 !important; }
.cz-mt-0 { margin-top: 0; } .cz-mt-1 { margin-top: 0.5rem; } .cz-mt-2 { margin-top: 1rem; }
.cz-mt-3 { margin-top: 1.5rem; } .cz-mt-4 { margin-top: 2rem; }
.cz-mb-0 { margin-bottom: 0; } .cz-mb-1 { margin-bottom: 0.5rem; } .cz-mb-2 { margin-bottom: 1rem; }
.cz-mb-3 { margin-bottom: 1.5rem; } .cz-mb-4 { margin-bottom: 2rem; }
.cz-ml-0 { margin-left: 0; } .cz-mr-0 { margin-right: 0; }
.cz-pt-0 { padding-top: 0; } .cz-pt-1 { padding-top: 0.5rem; } .cz-pt-2 { padding-top: 1rem; }
.cz-pb-0 { padding-bottom: 0; } .cz-pb-1 { padding-bottom: 0.5rem; } .cz-pb-2 { padding-bottom: 1rem; }
.cz-pl-0 { padding-left: 0; } .cz-pr-0 { padding-right: 0; }
.cz-p-0 { padding: 0; } .cz-p-1 { padding: 0.5rem; } .cz-p-2 { padding: 1rem; }
.cz-align-l { text-align: left; } .cz-align-r { text-align: right; } .cz-align-c { text-align: center; }

.cz-flex-sb { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.cz-flex-sb > .cz-lczn { margin-left: 0; margin-right: 0; }

/* ========================================
   TYPOGRAPHY  (golden-ratio scale)
   ======================================== */

h1 { font-size: var(--fs-0); letter-spacing: 0; text-transform: uppercase; color: var(--text-dim); margin-bottom: 2rem; }
h2 { font-size: var(--fs-0); letter-spacing: 0; text-transform: uppercase; color: var(--text-bright); margin-bottom: 2rem; }

/* generic h3 (e.g. RECONSTRUIM) — headline tier */
h3 {
    font-size: var(--fs-2);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.6rem;
    line-height: 1.1;
}

p {
    font-family: 'Noto Serif', serif;
    font-size: var(--fs-0);
    line-height: var(--line-body);
    margin-bottom: 1.25rem;
    color: var(--text-muted);
    text-wrap: pretty;
}

.cz-os { font-size: 1.4rem; letter-spacing: 2.7px; word-spacing: 0.3px; color: var(--text-dim); margin-bottom: 3rem; font-weight: 400; }

/* "Ne bucurăm" sub-headline — one phi-step below the main headline */
.cz-tl {
    font-family: 'Bourrasque', 'Noto Serif', serif;
    font-variant: small-caps;
    font-size: var(--fs-1);
    letter-spacing: 1.5px;
    word-spacing: 0.3em;
    background: var(--gd-cool);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.8rem;
    font-weight: 400;
    line-height: 1.2;
}

.cz-mf { font-size: 1rem; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 2rem; }
.cz-fm { color: var(--text-dim); }
.cz-fb { color: var(--text-bright); }

/* RECONSTRUIM — gradient headline */
.cz-rec {
    font-family: 'Bourrasque', 'Noto Serif', serif;
    font-size: var(--fs-1);
    letter-spacing: 0.18em;
    font-weight: 400;
    background: var(--gd-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-3);
}



/* ========================================
   IMAGES
   ======================================== */

.cz-img {
    max-width: min(100%, 620px);        /* scaled down to sit in proportion with the text */
    width: 100%;
    height: auto;
    margin: 0 auto 2rem;
    display: block;
}
.cz-lgo { max-width: 150px; width: 100%; height: auto; margin: 0 auto 2rem; display: block; }

/* ========================================
   DECORATIVE ELEMENTS
   ======================================== */

.cz-dec { font-size: 1.5rem; text-align: center; margin: 1rem 0; color: var(--text-dim); }
.cz-tc { display: inline; font-family: 'Bourrasque Ouest', 'Noto Serif', sans-serif; font-style: normal; }
.cz-mn  { color: var(--accent-moon); font-size: 1.2em; font-weight: bold; }
.cz-sw  { color: var(--accent-purple); font-size: 1.2em; font-weight: bold; }
.cz-ts  { color: var(--accent); font-size: 1.2em; font-weight: bold; }
.cz-ht  { color: var(--accent); }
.cz-spk { color: var(--accent); }
.cz-spc { display: inline-block; width: 100%; max-width: 200px; min-width: 50px; }

/* ========================================
   ARTISTIC FONT ACCENTS
   ======================================== */

.cz-ao { font-family: 'Bourrasque Ouest', 'Noto Serif', serif; font-variant: small-caps; }
.cz-ae { font-family: 'Bourrasque Est', 'Noto Serif', serif; font-variant: small-caps; }

/* ========================================
   LINKS
   ======================================== */

.cz-lnk { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin: 1.5rem 0; }
.cz-lnk a {
    color: var(--link);
    text-decoration: none;
    border: 1px solid var(--link);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-family: 'Bourrasque', 'Noto Serif', serif;
    font-variant: small-caps;
    transition: background 0.2s ease, color 0.2s ease;
}
.cz-lnk a:hover { background: var(--link-hover-bg); color: var(--link-hover-text); }

/* ========================================
   EMAIL
   ======================================== */

.cz-nl { display: inline-block; margin-top: 0.5rem; color: var(--accent); }
.cz-em {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--border-dark);
    transition: border-color 0.2s ease;
}
/* ========================================
   LOGO SECTIONS
   ======================================== */

.cz-lsec { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-top: 1rem; padding-top: 1rem; }
.cz-lp { max-width: 100px; width: 100%; height: auto; opacity: 0.8; transition: opacity 0.2s; }
.cz-lp:hover { opacity: 1; }

.cz-lczw { width: 100%; margin-top: 0; padding-top: 1rem; display: flex; justify-content: center; }
.cz-lczw-plain { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; }

.cz-lczn { max-width: 240px; width: 100%; height: auto; opacity: 0.85; transition: opacity 0.2s; display: block; margin: 0 auto; }
.cz-lczn:hover { opacity: 1; }

/* ========================================
   MEDIA SIZE CLASSES
   ======================================== */

.cz-m-xxs { max-width: 60px   !important; width: 100%; height: auto; }
.cz-m-mi  { max-width: 120px  !important; width: 100%; height: auto; }
.cz-m-xs  { max-width: 200px  !important; width: 100%; height: auto; }
.cz-m-s   { max-width: 430px  !important; width: 100%; height: auto; }
.cz-m-m   { max-width: 512px  !important; width: 100%; height: auto; }
.cz-m-l   { max-width: 720px  !important; width: 100%; height: auto; }
.cz-m-xl  { max-width: 1152px !important; width: 100%; height: auto; }
.cz-m-xxl { max-width: 100vw  !important; width: 100%; height: auto; }

/* ========================================
   LOGO SWAP SYSTEM
   ======================================== */

.cz-lgo-dark, .cz-lczn-dark, .cz-l404-dark, .cz-lp-dark { display: none !important; }

@media (prefers-color-scheme: dark) {
    .cz-lgo-dark, .cz-lczn-dark, .cz-l404-dark, .cz-lp-dark   { display: block !important; }
    .cz-lgo-light, .cz-lczn-light, .cz-l404-light, .cz-lp-light { display: none  !important; }
}

/* ========================================
   CORNER MENU LOGOS
   ======================================== */

.cz-menu-corners { position: fixed; top: 0; left: 0; width: 100%; height: 0; pointer-events: none; z-index: 100; }
.cz-mc { position: fixed; top: 1.25rem; pointer-events: auto; opacity: 0.85; transition: opacity 0.2s ease; }
.cz-mc:hover { opacity: 1; }
.cz-mc-left  { left: 1.25rem; }
.cz-mc-right { right: 1.25rem; }

/* ========================================
   LANGUAGE SECTIONS
   ======================================== */

.cz-lang { display: none; }
.cz-lang-default { display: block; }

/* ========================================
   DIVIDER SYSTEM
   ======================================== */

.cz-div-a {
    width: 100%; height: 1px; margin: 2.6rem 0; border: none;
    background: linear-gradient(to right, transparent 0%, var(--border) 18%, var(--border) 82%, transparent 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.cz-div-b { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 2.1rem 0; }
.cz-div-b::before, .cz-div-b::after { content: ''; width: 64px; height: 1px; background: linear-gradient(to right, transparent, var(--border)); }
.cz-div-b::after { background: linear-gradient(to left, transparent, var(--border)); }
.cz-div-b-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0.6; box-shadow: 0 0 6px var(--accent); }

.cz-div-c {
    width: 100%; margin: 2.6rem 0 1.6rem; border: none; height: 3px;
    background:
        linear-gradient(to right, transparent, var(--border-dark) 15%, var(--border) 50%, var(--border-dark) 85%, transparent),
        linear-gradient(to bottom, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 50%, transparent 50%, transparent 100%);
    border-radius: 2px;
}

.cz-div-d {
    width: 100%; height: 1px; margin: 1.8rem 0; border: none; position: relative;
    background: linear-gradient(to right, transparent 0%, var(--border-dark) 30%, var(--border-dark) 70%, transparent 100%);
}
.cz-div-d::after {
    content: ''; position: absolute; top: 2px; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.05) 70%, transparent 100%);
}

.cz-fest {
    font-family: 'Bourrasque Ouest', 'Noto Serif', serif;
    font-size: var(--fs-0);
    letter-spacing: 0.18em;
    color: var(--accent);
}

/* ========================================
   FOOTER
   ======================================== */

.cz-sf { text-align: center; padding: 1.5rem 1rem; font-family: 'Noto Serif', serif; font-size: clamp(0.85rem, 1.5vw, 1rem); }
.cz-sf a { display: inline-block; color: var(--text-dim); text-decoration: none; margin: 0.15rem 0.5rem; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.cz-sf a:hover { color: var(--accent); }
.cz-sf-en { display: none; }   /* RO shown by default; JS toggles */

/* ========================================
   COMING SOON PAGES
   ======================================== */

.cz-csc { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem; text-align: center; box-sizing: border-box; }
.cz-cst { font-family: 'Noto Serif', serif; font-size: clamp(1.1rem, 2.5vw, 1.6rem); line-height: 1.8; color: var(--text-muted); }
.cz-cst a { color: inherit; text-decoration: underline; }

/* ========================================
   404 PAGE
   ======================================== */

.cz-p404 { max-width: 680px; margin: 0 auto; padding: 2rem 1.5rem; text-align: center; }
.cz-h404 { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-bottom: 1rem; }
.cz-bl { font-family: 'Bourrasque', 'Noto Serif', serif; font-variant: small-caps; color: var(--accent); text-decoration: none; font-size: 0.95rem; letter-spacing: 1px; transition: opacity 0.2s ease; display: inline-flex; align-items: center; gap: 0.4rem; }
.cz-bl:hover { opacity: 0.7; }
.cz-ba { font-size: 1.2rem; }
.cz-l404 { max-width: 150px; width: 100%; height: auto; }

@media (prefers-color-scheme: dark) {
    .cz-l404-dark  { display: block !important; }
    .cz-l404-light { display: none  !important; }
}

.cz-dq { width: 100%; margin: 2rem 0 2.5rem; overflow: hidden; }
.cz-qsvg { width: 100%; height: auto; display: block; }
.cz-ds { width: 100%; margin: 2.5rem 0; overflow: hidden; }
.cz-ssvg { width: 100%; height: auto; display: block; }

.cz-tro, .cz-ten { font-family: 'Noto Serif', serif; font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.9; color: var(--text-muted); }
.cz-tro p, .cz-ten p { margin-bottom: 1.4rem; }
.cz-tro p:last-child, .cz-ten p:last-child { margin-bottom: 0; }
.cz-tro a, .cz-ten a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-green-30); transition: border-color 0.2s ease; }
.cz-tro a:hover, .cz-ten a:hover { border-bottom-color: var(--accent); }
.cz-tro strong, .cz-ten strong { color: var(--accent); font-weight: 700; }

.cz-f404 { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-dark); }
.cz-blp { font-family: 'Bourrasque', 'Noto Serif', serif; font-variant: small-caps; color: var(--accent); text-decoration: none; font-size: 1rem; letter-spacing: 1.5px; display: inline-flex; align-items: center; gap: 0.6rem; transition: opacity 0.2s ease; }
.cz-blp:hover { opacity: 0.7; }
.cz-pa { display: inline-flex; align-items: center; }
.cz-pasvg { width: 50px; height: auto; }

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    h1 { font-size: 1rem; } h2 { font-size: 1rem; }
    p  { line-height: 1.7; }
    .cz-tl { letter-spacing: 1px; }
    .cz-lnk a { font-size: 0.8rem; padding: 0.35rem 0.9rem; }
    .cz-tro, .cz-ten { font-size: clamp(0.95rem, 2vw, 1.05rem); line-height: 1.8; }
}

@media (max-width: 480px) {
    body { padding: 1rem 0.75rem; }

    .cz-ctn, .cz-ctn-sm, .cz-ctn-md, .cz-ctn-lg, .cz-ctn-xl, .cz-ctn-full { padding: 1rem 0.75rem; }
    .cz-gap { height: 1.5rem; } .cz-gap-lg { height: 3rem; }

    h1 { font-size: 0.9rem; margin-bottom: 1.5rem; } h2 { font-size: 0.9rem; margin-bottom: 1.5rem; }
    h3 { margin-bottom: 1.3rem; }
    p  { margin-bottom: 1rem; }

    .cz-os { font-size: 1.1rem; margin-bottom: 2rem; }
    .cz-tl { letter-spacing: 0.5px; word-spacing: 0.2em; }
    .cz-rec { letter-spacing: 0.12em; }
    .cz-lgo { max-width: 100px; margin-bottom: 1.5rem; }
    .cz-img { max-width: 300px; }
    .cz-lp  { max-width: 80px; }
    .cz-lczn{ max-width: 190px; }

    .cz-lnk { gap: 0.5rem; }
    .cz-lnk a { font-size: 0.75rem; padding: 0.3rem 0.75rem; }
    .cz-langbtn { font-size: 0.72rem; padding: 0.35rem 0.7rem; }

    .cz-p404 { padding: 1rem 0.75rem; }
    .cz-tro, .cz-ten { font-size: 0.95rem; line-height: 1.7; }
    .cz-tro p, .cz-ten p { margin-bottom: 1.1rem; }
    .cz-bl { font-size: 0.85rem; } .cz-blp { font-size: 0.9rem; }
    .cz-pasvg { width: 40px; }
    .cz-dq { margin: 1.5rem 0; } .cz-ds { margin: 1.5rem 0; }
    .cz-f404 { margin-top: 2rem; padding-top: 1.5rem; }
}

/* ========================================
   COLOR THEMES
   Theme A (default) = violet #7928ca
   Theme B = teal→blue gradient
   Theme C = rose→orange gradient
   ======================================== */

/* --- Theme A (default / data-theme="a") — Citizenit blue-green --- */
:root,
[data-theme="a"] {
    --accent:           #4C7FE0;
    --accent-dim:       rgba(76,127,224,0.07);
    --accent-gold:      #97D700;
    --accent-green:     #97D700;
    --accent-green-30:  rgba(151,215,0,0.30);
    --accent-purple:    #4C7FE0;
    --border:           rgba(76,127,224,0.18);
    --border-dark:      rgba(76,127,224,0.10);
    --link:             #4C7FE0;
    --link-hover-bg:    #4C7FE0;
    --link-hover-text:  #fff;
    --btn-bg:           #4C7FE0;
    --btn-gradient:     linear-gradient(135deg, #97D700 0%, #4C7FE0 31%, #4C7FE0 100%);
}
@media (prefers-color-scheme: dark) {
    :root,
    [data-theme="a"] {
        --accent:           #4C7FE0;
        --accent-dim:       rgba(76,127,224,0.07);
        --accent-gold:      #97D700;
        --accent-green:     #97D700;
        --accent-green-30:  rgba(151,215,0,0.30);
        --accent-purple:    #4C7FE0;
        --border:           rgba(76,127,224,0.18);
        --border-dark:      rgba(76,127,224,0.10);
        --link:             #7BA4EE;
        --link-hover-bg:    #4C7FE0;
        --link-hover-text:  #fff;
        --btn-bg:           #4C7FE0;
        --btn-gradient:     linear-gradient(135deg, #97D700 0%, #4C7FE0 31%, #4C7FE0 100%);
    }
}

/* --- Theme Forest (indexa): deep green / mint --- */
[data-theme="forest"] {
    --accent:           #2d6a4f;
    --accent-dim:       rgba(45,106,79,0.07);
    --accent-gold:      #2d6a4f;
    --accent-green:     #2d6a4f;
    --accent-green-30:  rgba(45,106,79,0.28);
    --accent-purple:    #2d6a4f;
    --border:           rgba(45,106,79,0.20);
    --border-dark:      rgba(45,106,79,0.10);
    --link:             #2d6a4f;
    --link-hover-bg:    #2d6a4f;
    --link-hover-text:  #fff;
    --btn-bg:           #2d6a4f;
    --btn-gradient:     linear-gradient(135deg, #2d6a4f 0%, #52b788 100%);
    --bg:               #f4f6f4;
    --text-muted:       #3a4a3d;
    --text-dim:         #5a7060;
}
@media (prefers-color-scheme: dark) {
    [data-theme="forest"] {
        --accent:           #74c69d;
        --accent-dim:       rgba(116,198,157,0.09);
        --accent-gold:      #74c69d;
        --accent-green:     #74c69d;
        --accent-green-30:  rgba(116,198,157,0.28);
        --accent-purple:    #74c69d;
        --border:           rgba(116,198,157,0.22);
        --border-dark:      rgba(116,198,157,0.10);
        --link:             #74c69d;
        --link-hover-bg:    #74c69d;
        --link-hover-text:  #0d110e;
        --btn-bg:           #74c69d;
        --btn-gradient:     linear-gradient(135deg, #74c69d 0%, #b7e4c7 100%);
        --bg:               #0d110e;
        --text-muted:       #c0d4c5;
        --text-dim:         #8aab90;
    }
}

/* --- Theme B: ocean teal → electric blue --- */
[data-theme="b"] {
    --accent:           #0284c7;
    --accent-dim:       rgba(2,132,199,0.07);
    --accent-gold:      #0284c7;
    --accent-green:     #0284c7;
    --accent-green-30:  rgba(2,132,199,0.28);
    --accent-purple:    #2563eb;
    --border:           rgba(2,132,199,0.20);
    --border-dark:      rgba(2,132,199,0.10);
    --link:             #0284c7;
    --link-hover-bg:    #0284c7;
    --link-hover-text:  #fff;
    --btn-bg:           #0284c7;
    --btn-gradient:     linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
}
@media (prefers-color-scheme: dark) {
    [data-theme="b"] {
        --accent:           #38bdf8;
        --accent-dim:       rgba(56,189,248,0.09);
        --accent-gold:      #38bdf8;
        --accent-green:     #38bdf8;
        --accent-green-30:  rgba(56,189,248,0.28);
        --accent-purple:    #818cf8;
        --border:           rgba(56,189,248,0.20);
        --border-dark:      rgba(56,189,248,0.10);
        --link:             #38bdf8;
        --link-hover-bg:    #38bdf8;
        --link-hover-text:  #0b0f14;
        --btn-bg:           #38bdf8;
        --btn-gradient:     linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
    }
}

/* --- Theme C: rose → warm orange --- */
[data-theme="c"] {
    --accent:           #e11d48;
    --accent-dim:       rgba(225,29,72,0.07);
    --accent-gold:      #e11d48;
    --accent-green:     #e11d48;
    --accent-green-30:  rgba(225,29,72,0.28);
    --accent-purple:    #f97316;
    --border:           rgba(225,29,72,0.20);
    --border-dark:      rgba(225,29,72,0.10);
    --link:             #e11d48;
    --link-hover-bg:    #e11d48;
    --link-hover-text:  #fff;
    --btn-bg:           #e11d48;
    --btn-gradient:     linear-gradient(135deg, #f43f5e 0%, #f97316 100%);
}
@media (prefers-color-scheme: dark) {
    [data-theme="c"] {
        --accent:           #fb7185;
        --accent-dim:       rgba(251,113,133,0.09);
        --accent-gold:      #fb7185;
        --accent-green:     #fb7185;
        --accent-green-30:  rgba(251,113,133,0.28);
        --accent-purple:    #fdba74;
        --border:           rgba(251,113,133,0.20);
        --border-dark:      rgba(251,113,133,0.10);
        --link:             #fb7185;
        --link-hover-bg:    #fb7185;
        --link-hover-text:  #110a0a;
        --btn-bg:           #fb7185;
        --btn-gradient:     linear-gradient(135deg, #fb7185 0%, #fdba74 100%);
    }
}

/* ========================================
   TRANSLUCENT BOX — frosted-glass pill style
   Inactive (not applied anywhere currently).
   Apply class .cz-translucent-box to any
   pill/navbar element to get the frosted look.
   Light mode only: white semi-opaque + blur.
   ======================================== */
.cz-translucent-box {
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.50);
    box-shadow: 0 4px 30px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
}
@media (prefers-color-scheme: dark) {
    .cz-translucent-box {
        background: rgba(10,15,30,0.55);
        border-color: rgba(255,255,255,0.12);
        box-shadow: none;
    }
}

/* Nav bilingual label helpers — JS toggles these */
.cz-nav-en { display: none; }

/* Two-line stacked nav label (Particles Festival, Susține Citizenit)
   JS shows these as inline-flex; flex-direction:column stacks the words */
.cz-nav-stacked {
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.15;
  font-size: 0.7rem;
  gap: 0;
}
.cz-nav-stacked span { display: block; }

/* ========================================
   GLASS NAVBAR
   ======================================== */

.cz-nav {
    position: fixed;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.55rem 1rem 0.55rem 1rem;
    border-radius: 999px;
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    width: calc(100% - 2rem);
    max-width: min(88vw, 1971px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.cz-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    padding: 1px;
    background: linear-gradient(90deg,
        #ff0080, #ff7700, #ffe600, #00ff88, #00e5ff, #7b2fff, #ff0080);
    background-size: 300% 100%;
    animation: cz-rainbow-shift 5s linear infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
}

.cz-nav.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(-180%);
    pointer-events: none;
}
.cz-nav-logo { flex-shrink: 0; line-height: 0; }
.cz-nav-logo img { display: block; max-width: 130px; height: auto; opacity: 0.88; transition: opacity 0.2s; }
.cz-nav-logo img:hover { opacity: 1; }

.cz-nav-links {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: 1;
    justify-content: center;
}
.cz-nav-links a {
    font-family: 'Bourrasque', 'Noto Serif', serif;
    font-variant: small-caps;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--text-dim);
    text-decoration: none;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
}
.cz-nav-links a:hover { color: var(--accent); background: var(--accent-dim); }

/* ========================================
   NAV COLORMAP — per-item colour identity  ○ SESSION COLORMAP
   CW-3 §6 — green+blue dominant; category brushstrokes.
   Mandatory shadow on EVERY item for legibility on
   the transparent nav over any background.
   ======================================== */

/* ── shared shadow: legible on any background ── */
.cz-nav-links a,
.cz-overlay-links a {
    text-shadow: 0 1px 4px rgba(0,0,0,0.22), 0 0 10px rgba(255,255,255,0.28);
}

/* ── NAV COLORMAP — keyed on data-nc (robust across all pages + URL formats) ── */
/* specificity 0,2,1 (class + data-attr + element) — beats base 0,1,1 reliably */

/* Time trio */
.cz-nav-links a[data-nc="prezent"],
.cz-overlay-links a[data-nc="prezent"] { color: #14B8A6; }  /* PreZent — Topaz / Turquoise */

.cz-nav-links a[data-nc="trecut"],
.cz-overlay-links a[data-nc="trecut"]  { color: #9D4073; }  /* Trecut  — Red → Purple      */

.cz-nav-links a[data-nc="viitor"],
.cz-overlay-links a[data-nc="viitor"]  { color: #6366F1; }  /* Viitor  — Indigo / Violet   */

/* Category pages */
.cz-nav-links a[data-nc="particles"],
.cz-overlay-links a[data-nc="particles"] { color: #4CAF8E; } /* Particles — green 69 / blue 31 */

.cz-nav-links a[data-nc="film"],
.cz-overlay-links a[data-nc="film"]      { color: #4C7FE0; } /* Film      — brand blue          */

.cz-nav-links a[data-nc="urban-art"],
.cz-overlay-links a[data-nc="urban-art"] { color: #5BEA84; } /* Urban Art — brand green         */

/* Logo authority: Noi · Susține · Contact */
.cz-nav-links a[data-nc="noi"],
.cz-nav-links a[data-nc="sustine"],
.cz-nav-links a[data-nc="contact"],
.cz-overlay-links a[data-nc="noi"],
.cz-overlay-links a[data-nc="sustine"],
.cz-overlay-links a[data-nc="contact"] {
    color: var(--text);
    text-shadow: 0 0 8px rgba(255,255,255,0.55), 0 1px 3px rgba(0,0,0,0.2);
}

.cz-nav-lang {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--accent-dim);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

/* ========================================
   MOBILE HAMBURGER MENU
   ======================================== */

.cz-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: background 0.2s;
    flex-shrink: 0;
}
.cz-burger:hover { background: var(--accent-dim); }
.cz-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-dim);
    border-radius: 2px;
    transition: background 0.2s;
}
.cz-burger:hover span { background: var(--accent); }

/* Full-screen overlay — background adapts to site theme (light/dark) */
.cz-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(247,249,255,0.97); /* light mode default */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
@media (prefers-color-scheme: dark) {
    .cz-nav-overlay { background: rgba(7,13,26,0.97); }
}
.cz-nav-overlay.is-open { display: flex; }

.cz-overlay-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s;
}
.cz-overlay-close:hover { color: var(--text); }

.cz-overlay-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.cz-overlay-links a {
    font-family: 'Bourrasque', 'Noto Serif', serif;
    font-variant: small-caps;
    font-size: clamp(1.4rem, 6vw, 2.2rem);
    letter-spacing: 2px;
    color: var(--text-dim);
    text-decoration: none;
    padding: 0.5rem 1.5rem;
    border-radius: 999px;
    transition: color 0.2s, background 0.2s;
}
.cz-overlay-links a:hover {
    color: var(--text-bright);
    background: var(--accent-dim);
}

.cz-overlay-lang {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--accent-dim);
    border: 1px solid var(--border);
}
.cz-overlay-lang .cz-langbtn {
    color: var(--text-dim);
}
.cz-overlay-lang .cz-langbtn.is-active {
    background: var(--btn-gradient);
    color: #fff;
    -webkit-text-fill-color: #fff;
    box-shadow: none;
}

/* ========================================
   HERO LAYOUT (index pages)
   ======================================== */

.cz-hero {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 9rem;
    padding-bottom: 3rem;
}
.cz-hero-bg {
    position: relative;
    width: 100%;
    max-width: min(88vw, 1300px);
    margin: 0 auto;
}
.cz-hero-bg img {
    width: 100%;
    height: clamp(340px, 50vh, 580px);
    object-fit: cover;
    display: block;
    border-radius: 12px;
}
.cz-hero-left {
    position: static;
    width: 100%;
    max-width: min(88vw, 1300px);
    margin: 0 auto;
    padding: 2rem 0 1rem;
    display: flex;
    align-items: center;
}

/* Glass card */
.cz-hero-card {
    background: rgba(255,255,255,0.64);
    border: 1px solid rgba(255,255,255,0.92);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.95);
    padding: 2.6rem 2.4rem;
    width: 100%;
    text-align: center;
}
@media (prefers-color-scheme: dark) {
    .cz-hero-card {
        background: rgba(17,18,16,0.72);
        border: 1px solid rgba(255,255,255,0.06);
        box-shadow: 0 8px 40px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.04);
    }
}
.cz-hero-card h3.cz-rec { margin-top: 0; margin-bottom: 0.5rem; text-align: center; font-size: var(--fs-1); }
.cz-hero-card .cz-div-c { margin: 0.6rem 0 1rem; }
.cz-hero-card .cz-tl { text-align: center; font-size: clamp(1.1rem, 1.5vw, 1.75rem); margin-bottom: 0.9rem; }
.cz-hero-card p { text-align: center; margin-bottom: 0.7rem; }

/* ========================================
   CTA BUTTONS
   ======================================== */

.cz-cta { display: flex; gap: 0.75rem; margin: 1.2rem 0 1.4rem; flex-wrap: wrap; justify-content: center; }

.cz-btn-solid {
    font-family: 'Bourrasque', 'Noto Serif', serif;
    font-variant: small-caps;
    font-size: 0.88rem;
    letter-spacing: 1px;
    color: #fff;
    background: var(--btn-gradient, var(--accent));
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 15px var(--accent-green-30);
    transition: opacity 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.cz-btn-solid:hover { opacity: 0.85; box-shadow: 0 6px 22px var(--accent-green-30); }

.cz-btn-outline {
    font-family: 'Bourrasque', 'Noto Serif', serif;
    font-variant: small-caps;
    font-size: 0.88rem;
    letter-spacing: 1px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: var(--btn-gradient, var(--accent));
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 15px var(--accent-green-30);
    transition: opacity 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.cz-btn-outline:hover { opacity: 0.85; box-shadow: 0 6px 22px var(--accent-green-30); }

/* ========================================
   SOCIAL ROW
   ======================================== */

.cz-social-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.2rem;
    align-items: center;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-dark);
}
.cz-social-row a {
    font-family: 'Bourrasque', 'Noto Serif', serif;
    font-variant: small-caps;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
}
.cz-social-row a:hover { color: var(--accent); }

/* .cz-rainbow — defined earlier in shared footer section */

/* ========================================
   SHARED FOOTER WRAP — dark, CZ_FT_CSGI + CZ_WAVE_TEX
   ======================================== */

.cz-footer-wrap {
    width: 100%;
    border-top: none !important;
    padding: 1.8rem 0.75rem 1.4rem;
    text-align: center;
    background:
        url('images/CZ_WAVE_TEX.svg') center/cover no-repeat,
        url('images/CZ_FT_CSGI.svg')  center/cover no-repeat;
    position: relative;
    overflow: hidden;
}
.cz-footer-wrap *,
.cz-footer-wrap a,
.cz-copyright {
    color: rgba(255,255,255,0.80) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.80) !important;
}
.cz-footer-wrap a:hover {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.cz-copyright {
    font-family: 'Noto Serif', serif;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    margin-top: 0.6rem;
    display: block;
    text-align: center;
}

/* Footer links — flex so items wrap and centre; logo forced to own row */
.cz-sf span {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.1rem 0;
}
.cz-sf .cz-sponsor {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}
@media (max-width: 480px) {
    .cz-footer-wrap { padding: 1.4rem 0.25rem 1.2rem; }
    .cz-sf { padding: 1rem 0; }
}

/* ========================================
   LOGO — broadcast drop-shadow (alpha-aware)
   ======================================== */

.cz-lczn-dark {
    filter:
        drop-shadow(0 1px 3px rgba(0,0,0,0.75))
        drop-shadow(0 0 8px rgba(0,0,0,0.45));
}
.cz-lczn-light {
    filter:
        drop-shadow(0 1px 3px rgba(255,255,255,0.80))
        drop-shadow(0 0 8px rgba(255,255,255,0.40));
}

/* ========================================
   LANGUAGE BUTTON — inactive border
   ======================================== */

.cz-langbtn:not(.is-active) {
    box-shadow: inset 0 0 0 1px rgba(76,127,224,0.60);
    color: var(--text);
}
@media (prefers-color-scheme: dark) {
    .cz-langbtn:not(.is-active) {
        box-shadow: inset 0 0 0 1px rgba(76,127,224,0.60);
    }
}

/* ========================================
   VIEWPORT BORDER — animated rainbow top/bottom,
   drifting blue-green glow left/right
   ======================================== */

@property --czb-y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 50%;
}
.cz-vp-border {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}
.czb-t, .czb-b, .czb-l, .czb-r { position: absolute; }
.czb-t {
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        #ff0080, #ff7700, #ffe600, #00ff88, #00e5ff, #7b2fff, #ff0080);
    background-size: 300% 100%;
    animation: cz-rainbow-shift 5s linear infinite;
}
.czb-b {
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        #ff0080, #ff7700, #ffe600, #00ff88, #00e5ff, #7b2fff, #ff0080);
    background-size: 300% 100%;
    animation: cz-rainbow-shift 5s linear infinite reverse;
}
.czb-l {
    top: 0; bottom: 0; left: 0;
    width: 12px;
    --czb-y: 50%;
    background: radial-gradient(ellipse 100% 50% at 0% var(--czb-y),
        rgba(76,127,224,0.50) 0%,
        rgba(76,127,224,0.22) 50%,
        transparent 100%);
    animation: cz-glow-drift 5s ease-in-out infinite;
}
.czb-r {
    top: 0; bottom: 0; right: 0;
    width: 12px;
    --czb-y: 50%;
    background: radial-gradient(ellipse 100% 50% at 100% var(--czb-y),
        rgba(76,127,224,0.50) 0%,
        rgba(76,127,224,0.22) 50%,
        transparent 100%);
    animation: cz-glow-drift 5s ease-in-out infinite reverse;
}
@keyframes cz-rainbow-shift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes cz-glow-drift {
    0%, 100% { --czb-y: 30%; }
    50%       { --czb-y: 70%; }
}

/* ========================================
   HERO RESPONSIVE (shared with all indexes)
   ======================================== */

@media (max-width: 960px) {
    .cz-hero { padding-top: 7rem; }
    .cz-hero-card { max-width: 100%; }
    .cz-burger { display: flex; }
    .cz-nav-links { display: none; }
}

@media (max-width: 680px) {
    .cz-nav { width: calc(100% - 2rem); padding: 0.5rem 0.5rem 0.5rem 1.1rem; gap: 0.5rem; }
    .cz-hero-card { padding: 1.8rem 1.3rem; border-radius: 16px; }
}

/* Show burger on desktop too when nav-links are hidden via JS (not needed normally) */
@media (min-width: 961px) {
    .cz-burger { display: none !important; }
    .cz-nav-links { display: flex !important; }
}

/* ========================================
   PRISM HERO FRAME  ○ LOG 042
   Four knobs on .cz-hero-prism; --cz-hero-src set inline by HTML.
   Index-only first; roll to all hero pages after CT OK.
   ======================================== */
.cz-hero-prism {
    --prism-size: 52px;
    --prism-intensity: 0.68;
    --prism-saturation: 1.4;
    --prism-wave-speed: 9s;
    position: relative;
    isolation: isolate;
    overflow: visible;
}

/* Blurred colour-bleed cloud — photo's own colours dissolve outward */
.cz-prism-bleed {
    position: absolute;
    inset: calc(-1 * var(--prism-size));
    border-radius: calc(12px + var(--prism-size));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(calc(var(--prism-size) * 0.75)) saturate(var(--prism-saturation));
    opacity: var(--prism-intensity);
    z-index: -1;
    animation: czPrismBreathe var(--prism-wave-speed) ease-in-out infinite;
}

/* Colour dispersion: two hue-offset copies, screen-blended onto the photo's edge ring */
.cz-hero-prism::before,
.cz-hero-prism::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background-image: var(--cz-hero-src);
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
    /* hollow mask — dispersion visible only in outer edge ring */
    mask-image: radial-gradient(ellipse 76% 76% at center, transparent 55%, black 82%);
    -webkit-mask-image: radial-gradient(ellipse 76% 76% at center, transparent 55%, black 82%);
}
.cz-hero-prism::before {
    filter: blur(4px) hue-rotate(-28deg) saturate(var(--prism-saturation));
    opacity: calc(var(--prism-intensity) * 0.25);
    transform: translate(-4px, -2px);
}
.cz-hero-prism::after {
    filter: blur(4px) hue-rotate(155deg) saturate(var(--prism-saturation));
    opacity: calc(var(--prism-intensity) * 0.21);
    transform: translate(4px, 2px);
}

/* Faceted glass bevel: stacked box-shadow rings simulate lit + shadow faces of the prism */
.cz-hero-prism img {
    position: relative;
    z-index: 0;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.82),
        0 0 0 4px rgba(210,225,255,0.28),
        0 0 0 7px rgba(255,255,255,0.10),
        0 0 0 9px rgba(0,0,0,0.16),
        0 6px 32px rgba(0,0,0,0.20);
}

@keyframes czPrismBreathe {
    0%, 100% { opacity: var(--prism-intensity); }
    50%       { opacity: calc(var(--prism-intensity) * 0.72); }
}

@media (prefers-reduced-motion: reduce) {
    .cz-prism-bleed { animation: none; }
}

/* ========================================
   PREVIEW MODE — FORCED THEME
   Activated via sessionStorage("czForcedTheme").
   The theme-init script (head of every page) reads this
   and sets data-forced-theme on <html> before first paint.
   Specificity (0,1,1) beats all existing (0,1,0) media-query
   rules — no refactor, no duplication, cascade wins.
   Entry points: /light  →  light.html
                 /dark   →  dark.html
   ======================================== */

/* ── Forced DARK — all theme-a dark vars ── */
html[data-forced-theme="dark"] {
  color-scheme: dark;
  /* Background & text */
  --bg:              #070d1a;
  --text:            #f3efe6;
  --text-muted:      #d4cfc2;
  --text-dim:        #7BA4EE;
  --text-bright:     #ffffff;
  /* Gradients */
  --gd-main:    linear-gradient(90deg, #97D700 0%, #4C7FE0 100%);
  --gd-cool:    linear-gradient(90deg, #97D700 0%, #4C7FE0 31%, #4C7FE0 100%);
  --gd-warm:    linear-gradient(90deg, #97D700 0%, #4C7FE0 31%, #4C7FE0 100%);
  --gd-full:    linear-gradient(90deg, #97D700, #4C7FE0);
  --gd-border:  linear-gradient(135deg, rgba(76,127,224,0.85) 0%, rgba(151,215,0,0.20) 100%);
  /* Accent */
  --accent:           #4C7FE0;
  --accent-dim:       rgba(76,127,224,0.09);
  --accent-gold:      #97D700;
  --accent-green:     #97D700;
  --accent-green-30:  rgba(151,215,0,0.30);
  --accent-purple:    #4C7FE0;
  --accent-moon:      #e0e7ff;
  /* Borders */
  --border:           rgba(76,127,224,0.18);
  --border-dark:      rgba(76,127,224,0.10);
  /* Links & buttons */
  --link:             #7BA4EE;
  --link-hover-bg:    #4C7FE0;
  --link-hover-text:  #fff;
  --btn-bg:           #4C7FE0;
  --btn-gradient:     linear-gradient(135deg, #97D700 0%, #4C7FE0 31%, #4C7FE0 100%);
}

/* ── Forced LIGHT — all theme-a light vars ── */
html[data-forced-theme="light"] {
  color-scheme: light;
  --bg:              #f7f9ff;
  --text:            #1a1a1a;
  --text-muted:      #444;
  --text-dim:        #4b5563;
  --text-bright:     #111;
  --gd-main:    linear-gradient(90deg, #97D700 0%, #4C7FE0 100%);
  --gd-cool:    linear-gradient(90deg, #97D700 0%, #4C7FE0 31%, #4C7FE0 100%);
  --gd-warm:    linear-gradient(90deg, #97D700 0%, #4C7FE0 31%, #4C7FE0 100%);
  --gd-full:    linear-gradient(90deg, #97D700, #4C7FE0);
  --gd-border:  linear-gradient(135deg, rgba(76,127,224,0.85) 0%, rgba(151,215,0,0.20) 100%);
  --accent:           #4C7FE0;
  --accent-dim:       rgba(76,127,224,0.07);
  --accent-gold:      #97D700;
  --accent-green:     #97D700;
  --accent-green-30:  rgba(151,215,0,0.30);
  --accent-purple:    #4C7FE0;
  --accent-moon:      #dbeafe;
  --border:           rgba(76,127,224,0.18);
  --border-dark:      rgba(76,127,224,0.10);
  --link:             #4C7FE0;
  --link-hover-bg:    #4C7FE0;
  --link-hover-text:  #fff;
  --btn-bg:           #4C7FE0;
  --btn-gradient:     linear-gradient(135deg, #97D700 0%, #4C7FE0 31%, #4C7FE0 100%);
}

/* ── Logo swap for forced themes ── */
html[data-forced-theme="dark"]  .cz-lgo-dark,
html[data-forced-theme="dark"]  .cz-lczn-dark,
html[data-forced-theme="dark"]  .cz-l404-dark,
html[data-forced-theme="dark"]  .cz-lp-dark  { display: block !important; }
html[data-forced-theme="dark"]  .cz-lgo-light,
html[data-forced-theme="dark"]  .cz-lczn-light,
html[data-forced-theme="dark"]  .cz-l404-light,
html[data-forced-theme="dark"]  .cz-lp-light { display: none !important; }

html[data-forced-theme="light"] .cz-lgo-dark,
html[data-forced-theme="light"] .cz-lczn-dark,
html[data-forced-theme="light"] .cz-l404-dark,
html[data-forced-theme="light"] .cz-lp-dark  { display: none !important; }
html[data-forced-theme="light"] .cz-lgo-light,
html[data-forced-theme="light"] .cz-lczn-light,
html[data-forced-theme="light"] .cz-l404-light,
html[data-forced-theme="light"] .cz-lp-light { display: block !important; }

/* ── Component overrides for forced DARK ── */
html[data-forced-theme="dark"] .cz-nav {
  border-color: rgba(255,255,255,0.15);
}
html[data-forced-theme="dark"] .cz-nav-lang {
  background: rgba(0,0,0,0.06) padding-box, var(--gd-border) border-box;
}
html[data-forced-theme="dark"] .cz-hero-bg::after {
  background: linear-gradient(to right, var(--bg) 0%, var(--bg) 38%, rgba(17,18,16,0) 65%);
}
html[data-forced-theme="dark"] .cz-hero-card {
  background: rgba(17,18,16,0.72);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 40px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.04);
}
html[data-forced-theme="dark"] .cz-langbtn:not(.is-active) {
  box-shadow: inset 0 0 0 1px rgba(76,127,224,0.60);
}
html[data-forced-theme="dark"] .cz-translucent-box {
  background: rgba(10,15,30,0.55);
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}

/* ── Component overrides for forced LIGHT ── */
html[data-forced-theme="light"] .cz-hero-bg::after {
  background: linear-gradient(to right, var(--bg) 0%, var(--bg) 38%, transparent 65%);
}
html[data-forced-theme="light"] .cz-hero-card {
  background: rgba(255,255,255,0.64);
  border: 1px solid rgba(255,255,255,0.92);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.95);
}
html[data-forced-theme="light"] .cz-langbtn:not(.is-active) {
  box-shadow: inset 0 0 0 1px rgba(76,127,224,0.60);
}
html[data-forced-theme="light"] .cz-nav-lang {
  background: rgba(255,255,255,0.06) padding-box, var(--gd-border) border-box;
}
/* Overlay background for forced themes */
html[data-forced-theme="light"] .cz-nav-overlay { background: rgba(247,249,255,0.97); }
html[data-forced-theme="dark"]  .cz-nav-overlay { background: rgba(7,13,26,0.97); }

/* ============================================================
   SPRINT-3 "CONTENT" ○ — content pages: hero modes + carousel
   ============================================================ */

/* ---- Content page main (block flow, clears fixed nav) ---- */
.cz-content-main { display: block; width: 100%; padding: 9rem 0 2rem; }

/* ---- SYSTEM A · HERO — MODE 1 (stacked, default) ---- */
.cz-hero-row { width: 100%; }
.cz-page-hero {
    width: 100%;
    max-width: min(88vw, 1100px);
    margin: 0 auto;
}
.cz-page-hero img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}
.cz-page-content {
    width: 100%;
    max-width: min(88vw, 820px);
    margin: 0 auto;
    padding: 1.8rem 0 1rem;
    text-align: center;
}
.cz-page-content * { text-align: center; }
.cz-page-content p { margin-bottom: 1rem; }
.cz-page-content h1.cz-rec { font-size: var(--fs-2); margin-top: 0; margin-bottom: 0.4rem; }
.cz-page-content .cz-sub { font-size: var(--fs-1); margin-bottom: 1.4rem; }
/* Divider auto-injected after vessel title — matches .cz-hero-card hr.cz-div-c */
.cz-vessel h1.cz-rec::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    margin: 0.6rem 0 1rem;
    background:
        linear-gradient(to right, transparent, var(--border-dark) 15%, var(--border) 50%, var(--border-dark) 85%, transparent),
        linear-gradient(to bottom, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 50%, transparent 50%, transparent 100%);
    border-radius: 2px;
}

/* ============================================================
   VESSEL — inner-page glass container (matches .cz-hero-card)  ○ SESSION VESSEL
   Modifier class: add `cz-vessel` to a page's .cz-page-content.
   Applied to ONE reference page (film) first; roll out after CT OK.
   ============================================================ */
.cz-page-content.cz-vessel {
    margin-top: 1.4rem;
    padding: 2.6rem 2.4rem;
    background: rgba(255,255,255,0.64) padding-box, var(--gd-border) border-box;
    border: 1px solid transparent;
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.95);
}
@media (prefers-color-scheme: dark) {
    .cz-page-content.cz-vessel {
        background: rgba(17,18,16,0.72) padding-box, var(--gd-border) border-box;
        border: 1px solid transparent;
        box-shadow: 0 8px 40px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.04);
    }
}
html[data-forced-theme="light"] .cz-page-content.cz-vessel {
    background: rgba(255,255,255,0.64) padding-box, var(--gd-border) border-box;
    border: 1px solid transparent;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.95);
}
html[data-forced-theme="dark"] .cz-page-content.cz-vessel {
    background: rgba(17,18,16,0.72) padding-box, var(--gd-border) border-box;
    border: 1px solid transparent;
    box-shadow: 0 8px 40px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.04);
}
@media (max-width: 768px) {
    .cz-page-content.cz-vessel { padding: 1.8rem 1.3rem; border-radius: 16px; }
}

/* Bourrasque BODY — inner-page experiment per CT (index stays Noto Serif as control).
   Lowercase, no gradient, no small-caps; readable size. */
.cz-vessel .cz-body {
    font-family: 'Bourrasque', 'Noto Serif', serif;
    font-variant: normal;
    text-transform: none;
    font-size: 1.2rem;
    line-height: 1.7;
    letter-spacing: 0.2px;
    color: var(--text-muted);
    -webkit-text-fill-color: currentColor;
    background: none;
    margin-bottom: 1rem;
}
/* must-read functional text (emails, form fields, legal) stays readable even in a Bourrasque vessel */
.cz-vessel .cz-readable { font-family: 'Noto Serif', serif; letter-spacing: 0; -webkit-text-fill-color: currentColor; }

/* ── FULL-BOURRASQUE comparison page (CT experiment, prezent only) ──
   Forces EVERY text element on the page to Bourrasque Regular so CT can
   compare a fully-Bourrasque page against index (Noto Serif body). */
/* all text Bourrasque — EXCEPT must-read fields (inputs, .cz-readable: emails, IBAN, legal) */
body.cz-allbour, body.cz-allbour *:not(input):not(textarea):not(.cz-readable) { font-family: 'Bourrasque', 'Noto Serif', serif !important; }
/* guarantee the brand green→blue gradient on headline + sub even on the all-Bourrasque page */
.cz-allbour .cz-rec, .cz-allbour h1.cz-rec, .cz-allbour h3.cz-rec {
    background: var(--gd-main);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent !important; color: transparent;
}
.cz-allbour .cz-tl {
    background: var(--gd-cool);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent !important; color: transparent;
}

/* ---- SYSTEM A · HERO — MODE 2 (portrait → side-by-side, desktop) ---- */
@media (min-width: 768px) {
    .cz-hero-row.is-portrait {
        display: flex;
        flex-direction: row-reverse;   /* image RIGHT, text LEFT */
        align-items: flex-start;
        gap: 2.6rem;
        max-width: min(92vw, 1120px);
        margin: 0 auto;
    }
    .cz-hero-row.is-portrait .cz-page-hero {
        flex: 0 0 45%;
        max-width: 45%;
        margin: 0;
    }
    .cz-hero-row.is-portrait .cz-page-content {
        flex: 1 1 55%;
        max-width: none;
        margin: 0;
        padding-top: 0;
    }
    /* portrait right-edge prism fade */
    .cz-page-hero.cz-hero--portrait img {
        -webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%);
                mask-image: linear-gradient(to right, black 60%, transparent 100%);
    }
    /* text-align override (brief: portrait content → left) */
    .cz-hero--portrait ~ .cz-page-content,
    .cz-hero-row.is-portrait .cz-page-content { text-align: left; }
    .cz-hero--portrait ~ .cz-page-content *,
    .cz-hero-row.is-portrait .cz-page-content * { text-align: left; }
}

/* ---- SYSTEM C · CAROUSEL ---- */
.cz-gallery-section { width: 100%; padding: 1.5rem 0 2.5rem; }
.cz-gallery-wrap {
    position: relative;
    width: 100%;
    max-width: min(88vw, 1100px);
    margin: 0 auto;
    outline: none;
}
.cz-gallery-track {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 480px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--accent-dim);
}
.cz-gallery-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.cz-gallery-img.is-active { opacity: 1; pointer-events: auto; cursor: pointer; }
.cz-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--btn-gradient);
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px var(--accent-green-30);
    transition: opacity 0.2s;
    z-index: 2;
}
.cz-gallery-arrow:hover { opacity: 0.85; }
.cz-gallery-prev { left: 12px; }
.cz-gallery-next { right: 12px; }
.cz-gallery-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.cz-gallery-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.cz-gallery-dot.is-active { background: #4C7FE0; transform: scale(1.3); }
/* mobile: arrows below the image, full tap targets */
@media (max-width: 767px) {
    .cz-gallery-wrap { padding-bottom: 56px; }
    .cz-gallery-arrow { top: auto; bottom: 0; transform: none; }
    .cz-gallery-prev { left: 28%; }
    .cz-gallery-next { right: 28%; }
    .cz-gallery-dots { margin-top: 12px; }
}

/* ---- Pull-quote (Despre) ---- */
.cz-pullquote {
    border-left: 3px solid var(--accent);
    padding: 0.4rem 0 0.4rem 1.2rem;
    margin: 1.6rem 0;
    font-family: 'Noto Serif', serif;
    font-style: italic;
    color: var(--text-muted);
    font-size: var(--fs-1);
    line-height: 1.4;
}

/* ---- Team list ---- */
.cz-team { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border-dark); }
.cz-team-list {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    justify-content: center;
}
.cz-team-list li { font-family: 'Noto Serif', serif; color: var(--text-muted); }

/* ---- Inline text CTA arrow link ---- */
.cz-link-arrow {
    font-family: 'Bourrasque', 'Noto Serif', serif;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--border-dark);
    transition: border-color 0.2s;
    white-space: nowrap;
}
.cz-link-arrow:hover { border-color: var(--accent); }

/* ---- Project grid (Proiecte) ---- */
.cz-proj-section { width: 100%; max-width: min(88vw, 980px); margin: 0 auto; padding: 1rem 0 2rem; }
.cz-proj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
    justify-content: center;
    gap: 1.2rem;
}
.cz-proj-card {
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
a.cz-proj-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-dim); }
/* project-card cover thumbnail (JS fills the photo; gradient = fallback) */
.cz-proj-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--btn-gradient);
    background-size: cover;
    background-position: center;
}
.cz-proj-text { padding: 1.2rem 1.4rem 1.4rem; }
.cz-proj-card h3 { font-size: var(--fs-1); margin: 0 0 0.5rem; }
.cz-proj-card p { font-family: 'Noto Serif', serif; color: var(--text-muted); margin: 0; font-size: 0.98rem; line-height: 1.5; }
.cz-proj-more { display: inline-block; margin-top: 0.7rem; font-family: 'Bourrasque','Noto Serif',serif; color: var(--accent); font-size: 0.92rem; }

/* ---- Event cards (Evenimente) ---- */
.cz-event-section { width: 100%; max-width: min(88vw, 980px); margin: 0 auto; padding: 1rem 0 2rem; }
.cz-event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
    justify-content: center;
    gap: 1.2rem;
}
.cz-event-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.cz-event-thumb {
    aspect-ratio: 4 / 3;
    background: var(--btn-gradient);
    position: relative;
}
.cz-event-date {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-family: 'Bourrasque','Noto Serif',serif;
    font-size: 0.85rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
}
.cz-event-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; }
.cz-event-body h3 { font-size: var(--fs-1); margin: 0; }
.cz-event-body .cz-btn-solid { align-self: center; }

/* ---- Editions list (Particles) ---- */
.cz-editions-section { width: 100%; max-width: min(88vw, 900px); margin: 0 auto; padding: 1rem 0 2rem; }
.cz-editions { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; }
.cz-edition {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.3rem;
    transition: border-color 0.2s, transform 0.2s;
}
a.cz-edition:hover { border-color: var(--accent); transform: translateX(3px); }
.cz-edition-no { font-family: 'Bourrasque','Noto Serif',serif; font-size: 1.6rem; background: var(--gd-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; min-width: 2.5rem; }
.cz-edition-meta { font-family: 'Noto Serif', serif; color: var(--text-muted); }
.cz-edition.is-current { border-color: var(--accent); }

/* ---- Ways to give (Susține) ---- */
.cz-ways {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin: 1.6rem 0;
}
.cz-way {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.4rem 1.2rem;
    text-align: center;
}
.cz-way h3 { font-size: var(--fs-1); margin: 0 0 0.5rem; }
.cz-way p { font-family: 'Noto Serif', serif; color: var(--text-muted); margin: 0; font-size: 0.96rem; }

/* ---- 3-CTA band (most pages) ---- */
.cz-cta-band {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    width: 100%;
    max-width: min(88vw, 980px);
    margin: 0 auto;
    padding: 1.5rem 0 1rem;
}
.cz-cta-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem 1.3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}
.cz-cta-card h3 { font-size: var(--fs-1); margin: 0; }
.cz-cta-card p { font-family: 'Noto Serif', serif; color: var(--text-muted); margin: 0; font-size: 0.95rem; flex: 1; }

/* ---- Content-page responsive collapse ---- */
@media (max-width: 767px) {
    .cz-proj-grid, .cz-event-grid, .cz-ways, .cz-cta-band { grid-template-columns: 1fr; }
    .cz-content-main { padding-top: 7rem; }
}

/* AFCN sponsor logo — footer, before Partners (restored 764678f + logo) */
.cz-sponsor { display:inline-block; vertical-align:middle; line-height:0; margin:0 0.6rem 0 0; }
.cz-sponsor img { height:50px; width:auto; display:block; filter:drop-shadow(0 0 9px rgba(255,255,255,0.5)); }

/* ===== GLITTERING STARS — footer + animated background, all pages =====
   Color cycles blue↔green over 5s (same pace as the viewport frame / wave);
   opacity twinkles independently per star = glitter. Injected by gallery.js. */
.cz-bg-stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cz-ft-stars2 { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cz-star {
    position: absolute; border-radius: 50%;
    color: #4C7FE0;
    /* soft 3-D orb: white specular highlight (off-centre) → colour → feathered transparent edge */
    background: radial-gradient(circle at 42% 33%, #ffffff 0%, #eaf3ff 10%, currentColor 38%, transparent 78%);
    box-shadow: 0 0 var(--glow, 8px) currentColor;
    opacity: 0.4;
    will-change: transform, opacity;
    animation: czStarColor 5s linear infinite, czStarTwinkle var(--tw, 3s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes czStarColor { 0% { color:#4C7FE0; } 50% { color:#5BEA84; } 100% { color:#4C7FE0; } }
@keyframes czStarTwinkle {
    0%,100% { opacity: var(--oMin, 0.25); transform: scale(var(--sMin, 0.7)); }
    50%     { opacity: var(--oMax, 0.9);  transform: scale(var(--sMax, 2)); }
}
@media (prefers-reduced-motion: reduce) { .cz-star { animation: none; opacity: 0.5; } }

/* ~69% of stars = real twinkling stars: bright point + 4 soft diffraction spikes
   (planets = the other 31%, the plain orb). Spikes use currentColor → they
   recolour + twinkle + scale with the star. */
.cz-star--star {
    background: radial-gradient(circle, #ffffff 0%, #eaf3ff 16%, currentColor 44%, transparent 68%);
}
.cz-star--star::before, .cz-star--star::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); pointer-events: none;
}
.cz-star--star::before { width: 540%; height: 1px; background: linear-gradient(90deg, transparent, currentColor 50%, transparent); }
.cz-star--star::after  { width: 1px; height: 540%; background: linear-gradient(0deg, transparent, currentColor 50%, transparent); }

/* ═══════════════════════════════════════════════════════════════
   ROSETTA — neural-map navigation  ○ SESSION ROSETTA
   A central neuron (soma = current page) with wavy axons radiating
   to nodes placed at compass coordinates. Scales to a full 360°.
   ═══════════════════════════════════════════════════════════════ */
.cz-rosetta {
  position: relative;
  width: min(94vw, 560px);
  aspect-ratio: 1 / 1;
  margin: 2.5rem auto 3rem;
  overflow: visible;
}
.cz-rosetta-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── axons (the wavy synapse lines) ── */
.cz-rosetta-axon {
  fill: none;
  /* stroke is set inline per-svg (unique gradient id); CSS must not override it */
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-dasharray: 3.5 2.5;
  opacity: 0.7;
  animation: czAxonFlow 7s linear infinite;
}
@keyframes czAxonFlow { to { stroke-dashoffset: -60; } }

/* ── neuron soma (the central circle) ── */
.cz-rosetta-soma {
  fill: var(--accent-dim);
  stroke-width: 1.1;
  animation: czSomaPulse 4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes czSomaPulse {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1;   filter: drop-shadow(0 0 3px rgba(91,234,132,0.45)); }
}
.cz-rosetta-terminal { opacity: 0.85; }

/* ── nodes (destinations) ── */
.cz-rosetta-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 34%;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.cz-rosetta-node-thumb {
  width: clamp(92px, 24vw, 128px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--border);
  box-shadow: 0 0 0 2px var(--bg), 0 0 16px rgba(76,127,224,0.32);
  transition: transform 0.18s, box-shadow 0.18s;
}
.cz-rosetta-node:hover .cz-rosetta-node-thumb,
.cz-rosetta-node:focus-visible .cz-rosetta-node-thumb {
  transform: scale(1.09);
  box-shadow: 0 0 0 2px var(--bg), 0 0 22px rgba(91,234,132,0.5);
}
.cz-rosetta-node-icon {
  width: clamp(78px, 20vw, 108px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  background: var(--btn-gradient);
  box-shadow: 0 0 0 2px var(--bg), 0 0 16px rgba(76,127,224,0.32);
  transition: transform 0.18s, box-shadow 0.18s;
}
.cz-rosetta-node:hover .cz-rosetta-node-icon,
.cz-rosetta-node:focus-visible .cz-rosetta-node-icon {
  transform: scale(1.09);
  box-shadow: 0 0 0 2px var(--bg), 0 0 22px rgba(91,234,132,0.5);
}

/* ── labels (solid + halo shadow for waypoint legibility) ── */
.cz-rosetta-label {
  font-family: 'Noto Serif', serif;
  font-size: clamp(0.74rem, 1.7vw, 0.9rem);
  font-weight: 700;
  color: var(--text);
  -webkit-text-fill-color: currentColor;   /* defeat any inherited transparent fill */
  white-space: nowrap;
  text-align: center;
  /* halo in page-bg colour → readable over photos, plus a soft drop shadow */
  text-shadow: 0 0 4px var(--bg), 0 0 8px var(--bg), 0 1px 3px rgba(0,0,0,0.30);
}

/* ── centre neuron label (the current page) ── */
.cz-rosetta-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.cz-rosetta-center-label {
  font-size: clamp(0.78rem, 1.9vw, 1rem);
  font-weight: 700;
  font-variant: small-caps;
  white-space: normal;
  line-height: 1.1;
}

@media (prefers-reduced-motion: reduce) {
  .cz-rosetta-axon { animation: none; }
  .cz-rosetta-soma { animation: none; }
}

/* ── Subscribe panel (slides up from bottom, stays on page) ── */
.cz-subscribe-panel {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, 0.55);
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
}
.cz-subscribe-panel.is-open {
  opacity: 1;
  pointer-events: all;
}
.cz-subscribe-inner {
  background: var(--bg);
  padding: 2rem 2rem 2.5rem;
  border-radius: 1.25rem 1.25rem 0 0;
  max-width: min(88vw, 560px);
  width: 100%;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
}
.cz-subscribe-panel.is-open .cz-subscribe-inner {
  transform: translateY(0);
}
.cz-subscribe-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-dim);
  transition: color 0.15s;
}
.cz-subscribe-close:hover { color: var(--accent); }