:root {
      --c-base: 244 247 251; --c-surface: 255 255 255; --c-surface-2: 237 242 249;
      --c-primary: 37 99 235; --c-primary-600: 29 78 216; --c-accent: 2 132 199;
      --c-ink: 15 23 42; --c-muted: 71 85 105; --c-line: 226 232 240;
      --glow: 0.10; color-scheme: light;
    }
    .dark {
      --c-base: 10 14 26; --c-surface: 17 25 54; --c-surface-2: 14 21 48;
      --c-primary: 37 99 235; --c-primary-600: 29 78 216; --c-accent: 56 189 248;
      --c-ink: 226 232 240; --c-muted: 148 163 184; --c-line: 30 41 59;
      --glow: 0.18; color-scheme: dark;
    }
    html { scroll-behavior: smooth; }
    body {
      background-color: rgb(var(--c-base));
      color: rgb(var(--c-ink));
      background-image:
        radial-gradient(55rem 40rem at 75% -10%, rgb(var(--c-primary) / var(--glow)), transparent 60%),
        radial-gradient(45rem 35rem at 0% 10%, rgb(var(--c-accent) / calc(var(--glow) * 0.6)), transparent 55%);
      background-attachment: fixed;
      transition: background-color .4s ease, color .4s ease;
    }
    .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.15s cubic-bezier(.22,1,.36,1), transform 1.15s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
    .reveal.in { opacity: 1; transform: none; }
    /* směrové varianty */
    .reveal.rv-left { transform: translateX(-40px); } .reveal.rv-right { transform: translateX(40px); }
    .reveal.rv-left.in, .reveal.rv-right.in { transform: none; }
    /* jemné zvětšení u karet */
    .reveal.rv-scale { transform: translateY(28px) scale(.96); } .reveal.rv-scale.in { transform: none; }
    @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }
    /* Mobil: nic nesmí přetéct do strany (kontaktní formulář + Turnstile) */
    html, body { overflow-x: hidden; max-width: 100%; }
    #contactForm, #contact .grid > div, #contact .grid { min-width: 0; }
    #contactForm input, #contactForm textarea { max-width: 100%; }
    .cf-turnstile { max-width: 100%; overflow: hidden; }
    ::selection { background: rgb(var(--c-primary) / .35); color: #fff; }
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: rgb(var(--c-base)); }
    ::-webkit-scrollbar-thumb { background: rgb(var(--c-line)); border-radius: 999px; }
    /* Užší vodorovný scrollbar u carouselu referencí */
    #refTrack { scrollbar-width: thin; scrollbar-color: rgb(var(--c-line)) transparent; }
    #refTrack::-webkit-scrollbar { height: 5px; }
    #refTrack::-webkit-scrollbar-track { background: transparent; }
    #refTrack::-webkit-scrollbar-thumb { background: rgb(var(--c-line)); }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
    .animate-float { animation: float 6s ease-in-out infinite; }
    .text-gradient { background: linear-gradient(90deg, rgb(var(--c-ink)), rgb(var(--c-accent)), rgb(var(--c-primary))); -webkit-background-clip: text; background-clip: text; color: transparent; }
    /* Tělo článku (HTML z editoru) */
    .post-body h2 { font-size: 1.15rem; font-weight: 700; color: rgb(var(--c-ink)); margin: 1.1em 0 .4em; }
    .post-body h3 { font-size: 1.02rem; font-weight: 700; color: rgb(var(--c-ink)); margin: 1em 0 .3em; }
    .post-body p { margin: 0 0 .8em; }
    .post-body ul, .post-body ol { margin: 0 0 .8em 1.2em; }
    .post-body ul { list-style: disc; } .post-body ol { list-style: decimal; }
    .post-body li { margin: .2em 0; }
    .post-body a { color: rgb(var(--c-accent)); text-decoration: underline; }
    .post-body strong { color: rgb(var(--c-ink)); font-weight: 700; }
    .post-body blockquote { border-left: 3px solid rgb(var(--c-primary)); padding-left: .9em; margin: .8em 0; color: rgb(var(--c-muted)); }
    .post-body img { margin: .6em 0; max-width: 100%; height: auto; }
    /* ── Design fritpom: hranaté rohy + čáry mezi sekcemi ── */
    *, *::before, *::after { border-radius: 0 !important; }
    main > section { border-top: 1px solid rgb(var(--c-line)); }
    main > section:first-of-type { border-top: 0; }
    h1, h2, h3, h4, .font-display { letter-spacing: -0.01em; line-height: 1.06; }
    /* tlačítka: tvrdý posun-stín na hover (styl fritpom) */
    a.btn-hard, .btn-hard { transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s; }
    a.btn-hard:hover, .btn-hard:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 rgb(var(--c-primary) / .35); }
    /* Běžící text (marquee, styl crafto) – střídá plné a obrysové slovo */
    #marquee .marquee { display: flex; width: max-content; }
    #marquee .marquee-track { display: flex; align-items: center; gap: 1.75rem; white-space: nowrap; animation: marquee 32s linear infinite; }
    #marquee:hover .marquee-track { animation-play-state: paused; }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .mq-item { font-family: "Saira Condensed", sans-serif; font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; font-size: clamp(2rem, 7vw, 5.5rem); color: rgb(var(--c-ink)); }
    .mq-item.out { color: transparent; -webkit-text-stroke: 1.5px rgb(var(--c-ink) / .4); text-stroke: 1.5px rgb(var(--c-ink) / .4); }
    .mq-dot { color: rgb(var(--c-accent)); font-size: clamp(1.1rem, 3.5vw, 2.4rem); line-height: 1; }
    @media (prefers-reduced-motion: reduce) { #marquee .marquee-track { animation: none; } }
    /* ── HERO s obrázkem na pozadí + bílý text + bílý rám kolem obrázku ── */
    #hero { color: #fff; --frame: clamp(14px, 1.6vw, 24px); }
    #hero::before { content: ""; position: absolute; inset: 0; z-index: 0;
      background: url("images/hero-bg.jpg") center/cover no-repeat; }
    /* bílé orámování dokola (styl businessblocks) – překryje okraje obrázku */
    #hero::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
      border: var(--frame) solid rgb(var(--c-base)); }
    #hero > canvas { z-index: 2; opacity: .55; }
    #hero > .hero-content { position: relative; z-index: 3; }
    #hero .text-muted { color: rgb(226 232 240 / .82) !important; }
    #hero .border-line { border-color: rgb(255 255 255 / .22) !important; }
    #hero .bg-surface-2\/70 { background: rgb(255 255 255 / .08) !important; }
    #hero .hover\:border-primary\/60:hover { border-color: rgb(96 165 250 / .85) !important; }
    #hero .text-gradient { background: linear-gradient(90deg, #ffffff, #7dd3fc 55%, #60a5fa); -webkit-background-clip: text; background-clip: text; color: transparent; }
    #hero #stats > div { background: rgb(8 12 24 / .55) !important; border-color: rgb(255 255 255 / .15) !important; }
    #hero #stats .divide-line > * { border-color: rgb(255 255 255 / .12) !important; }
    /* Navigace nad tmavým hero = světlá + posunutá níž do orámovaného obrázku */
    #nav.over-hero { color: #fff; top: clamp(28px, 4.5vh, 60px) !important; }
    #nav.over-hero .nav-link { color: rgb(255 255 255 / .8); }
    #nav.over-hero .nav-link:hover, #nav.over-hero .nav-link.active { color: #fff; }
    #nav.over-hero .nav-link::after { background: #fff; }
    #nav.over-hero .border-line { border-color: rgb(255 255 255 / .25) !important; }
    #nav.over-hero #theme, #nav.over-hero #theme-m { color: #fff; }
    #nav.over-hero .lang-btn.text-muted { color: rgb(255 255 255 / .75) !important; }
    /* ── O mně: fotka ve stylu fritpom (rám s odsazeným ohraničením) ── */
    .about-media { position: relative; min-height: 440px; }
    .about-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      filter: grayscale(.12) contrast(1.03); box-shadow: 0 24px 55px rgb(0 0 0 / .28); }
    .about-media::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgb(var(--c-accent)); pointer-events: none; }
    .about-badge { position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
      background: rgb(var(--c-primary)); color: #fff; padding: 13px 18px; font-family: "Saira Condensed", sans-serif;
      font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; }
    .about-badge svg { width: 18px; height: 18px; }
    .about-text { display: flex; flex-direction: column; justify-content: center; }
    /* nav odkazy: font Saira + posuvné podtržení (styl fritpom) */
    .nav-link { position: relative; font-family: "Saira Condensed", sans-serif; font-weight: 600;
      font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; padding: 8px 2px;
      color: rgb(var(--c-muted)); transition: color .25s; }
    .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
      background: rgb(var(--c-accent)); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
    .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
    .nav-link:hover, .nav-link.active { color: rgb(var(--c-ink)); }
    /* Modal článku (popup z blogu) */
    #postModal { position: fixed; inset: 0; z-index: 100; display: none; }
    #postModal.open { display: block; }
    #postModal .pm-back { position: absolute; inset: 0; background: rgb(0 0 0 / .6); backdrop-filter: blur(4px); }
    #postModal .pm-box { position: relative; max-width: 820px; margin: 2.5vh auto; height: 95vh;
      display: flex; flex-direction: column; overflow: hidden;
      background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); box-shadow: 0 30px 80px rgb(0 0 0 / .5); }
    #postModal .pm-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
    #postModal .pm-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center; background: rgb(var(--c-base) / .7);
      border: 1px solid rgb(var(--c-line)); color: rgb(var(--c-ink)); cursor: pointer; }
    #postModal .pm-close:hover { border-color: rgb(var(--c-primary)); color: rgb(var(--c-accent)); }
    /* čitelnější text těla článku v modalu */
    #postModal .post-body { color: rgb(var(--c-ink) / .88); }
    #postModal .post-body p { color: rgb(var(--c-ink) / .88); }