/* ═══════════════════════════════════════════════════════════
   335i.sk — design system
   ═══════════════════════════════════════════════════════════ */

:root{
  /* surface */
  --bg:            #060607;
  --bg-alt:        #0a0a0c;
  --ink:           #f5f5f7;
  --ink-2:         #a1a1a8;
  --ink-3:         #6e6e76;

  /* glass — tmavé sklo, nie biely závoj */
  --glass:         rgba(9,10,13,.62);
  --glass-2:       rgba(16,18,23,.78);
  --glass-line:    rgba(255,255,255,.07);
  --glass-line-2:  rgba(255,255,255,.14);
  --blur:          saturate(150%) blur(26px);

  /* accents — hlavná farba webu je červená s jemným ťahom do ružova.
     Názvy --blue/--cyan ostávajú, aby sa nemuselo prepisovať pol súboru;
     drží sa v nich akcent a jeho svetlejší odtieň. */
  --blue:          #ff2e4c;   /* hlavný akcent */
  --cyan:          #ff8fa3;   /* svetlejší doplnok */
  --orange:        #ffb02e;
  --green:         #30d158;
  --violet:        #bf5af2;
  --red:           #bf5af2;

  /* type */
  /* Najprv skúsi firemné fonty BMW, ak ich má návštevník nainštalované.
     Súbory sa nikam nevkladajú — sú licencované, takže ich smie použiť
     len ten, kto ich má u seba. Všetkým ostatným padne stack na Helveticu
     Neue, na ktorej BMW roky stavalo svoju identitu, a potom na Inter Tight. */
  --font: "BMW Type Next", "BMWTypeNext", "BMW Type Global Pro",
          "BMW Group Global Pro", "BMW Helvetica",
          "Helvetica Neue", "Inter Tight", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: "BMW Type Next", "BMWTypeNext", "BMW Type Global Pro",
          "BMW Group Global Pro", "Helvetica Neue",
          "Roboto Flex", "Inter Tight", -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, monospace;

  /* motion */
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  /* layout — tieto sa dajú meniť ceruzkou v paneli „Rozostupy" */
  --wrap:     1190px;                      /* šírka obsahu */
  --pad:      clamp(20px, 5vw, 50px);      /* bočné okraje */
  --sec:      clamp(28px, 3.4vw, 32px);    /* výška sekcií */
  --gap:      7px;                         /* medzera medzi kartami */
  --card-gap: 18px;                        /* medzera medzi grafmi */
  --head-gap: clamp(30px, 4vw, 52px);      /* odstup pod nadpisom sekcie */
  --r:    12px;
  --r-lg: 18px;
  --nav-h: 92px;                           /* výška plávajúcej navigácie + vzduch */
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* plávajúca navigácia inak prekryje nadpis sekcie, na ktorú sa skočí.
     Odsadenie patrí na scrollovací kontajner — scroll-margin na sekciách by
     sa s ním sčítal a skok by pristál dvakrát tak nízko. */
  scroll-padding-top:var(--nav-h);
}

/* viditeľné zameranie klávesnicou — bez neho sa po stránke tabuje naslepo */
:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:6px;
}
.ph:focus-visible, .story__item:focus-visible{ outline-offset:4px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ambient light + grain ---------------------------------- */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(58vw 46vw at 12% -6%, rgba(255,46,76,.15), transparent 62%),
    radial-gradient(52vw 42vw at 92% 14%, rgba(255,46,76,.06), transparent 62%);
}

/* ── mriežka ladiacej mapy: bunky sú široké ako riadok tabuľky ──
   Jemné vodorovné linky = osi zaťaženia, riedke zvislé = otáčky. */
.bg-map{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.030) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.020) 0 1px, transparent 1px 138px);
  mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* krivky výkonu cez celú stránku — kreslí ich assets/js/bg.js */
.bg-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
  mask-image:linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
}
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:1; opacity:.28; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

main, .nav, .footer, .mobile-menu{ position:relative; z-index:2; }

::selection{ background:rgba(255,46,76,.32); color:#fff; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
code{
  font-family:var(--mono); font-size:.88em;
  background:rgba(255,255,255,.07); border:1px solid var(--glass-line);
  padding:.1em .42em; border-radius:6px; color:var(--cyan);
}

/* ═════ scroll progress ═════ */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:999;
  background:transparent; pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--blue),var(--cyan) 55%,var(--orange));
  box-shadow:0 0 14px rgba(255,46,76,.6);
  transition:width .08s linear;
}

/* ═════════════════ NAV ═════════════════ */
.nav{
  position:fixed; top:14px; left:50%; z-index:900;
  transform:translateX(-50%);
  width:min(var(--wrap), calc(100vw - 28px));
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:11px 12px 11px 20px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease),
             backdrop-filter .5s var(--ease), box-shadow .5s var(--ease),
             padding .5s var(--ease), top .5s var(--ease);
}
.nav.is-stuck{
  top:10px;
  background:rgba(14,14,17,.62);
  border-color:var(--glass-line);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  box-shadow:0 10px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
.nav__brand{ font-weight:700; font-size:18px; letter-spacing:-.03em; display:flex; }
.nav__mark{ color:#fff; }
.nav__tld{ color:var(--blue); font-weight:600; }

.nav__links{ display:flex; gap:4px; }
.nav__links a{
  position:relative;
  padding:8px 15px; border-radius:999px;
  font-size:14.5px; font-weight:500; color:var(--ink-2);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.nav__links a.is-current{ color:var(--ink); }
.nav__links a.is-current::after{
  content:""; position:absolute; left:50%; bottom:2px;
  width:4px; height:4px; margin-left:-2px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 10px var(--blue);
}

.nav__toggle{
  display:none; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--glass-line); background:var(--glass);
  cursor:pointer; padding:0;
}
.nav__toggle span{
  display:block; width:16px; height:1.5px; margin:3.5px auto;
  background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease), opacity .3s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(2.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-2.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:890;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:rgba(8,8,10,.86);
  -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; }
.mobile-menu a{
  font-size:clamp(28px,8vw,42px); font-weight:600; letter-spacing:-.03em;
  padding:10px 24px; color:var(--ink-2); transition:color .3s var(--ease), transform .4s var(--ease);
  transform:translateY(14px); opacity:0;
}
.mobile-menu.is-open a{ transform:none; opacity:1; }
.mobile-menu a{ transition-delay:calc(.02s * var(--i, 0) + .04s); }
.mobile-menu a:nth-child(1){ --i:1 } .mobile-menu a:nth-child(2){ --i:2 }
.mobile-menu a:nth-child(3){ --i:3 } .mobile-menu a:nth-child(4){ --i:4 }
.mobile-menu a:nth-child(5){ --i:5 } .mobile-menu a:nth-child(6){ --i:6 }
.mobile-menu a:nth-child(7){ --i:7 } .mobile-menu a:nth-child(8){ --i:8 }
.mobile-menu a:nth-child(9){ --i:9 } .mobile-menu a:nth-child(10){ --i:10 }
.mobile-menu a:nth-child(11){ --i:11 }
.mobile-menu a:hover{ color:var(--ink); }

/* zoznam je dlhší — na nízkych displejoch sa musí dať odscrolovať */
@media (max-height:640px){
  .mobile-menu{ justify-content:flex-start; padding:96px 0 40px; overflow-y:auto; }
  .mobile-menu a{ font-size:clamp(22px,6vw,30px); padding:7px 24px; }
}

@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
}

/* ═════════════════ HERO ═════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:132px var(--pad) 0;
  overflow:hidden;
  text-align:center;
}
/* v hlavičke mriežka mapy — biele linky, pod kurzorom sa rozsvietia červené */
.hero__grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:112px 46px;
  mask-image:radial-gradient(ellipse 80% 66% at 50% 38%, #000 6%, transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 80% 66% at 50% 38%, #000 6%, transparent 74%);
  opacity:.6;
}
.hero__inner{ position:relative; z-index:3; max-width:880px; }

.hero__eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 22px;
}
.hero__title{
  margin:0; font-family:var(--font-display); font-weight:700; line-height:.94;
  font-size:clamp(38px, 8.2vw, 104px);
  letter-spacing:-.045em;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:0 .28em;
}
.hero__word{
  display:inline-block;
  background:linear-gradient(178deg,#ffffff 8%, #ffe3e7 40%, #b5808c 84%, #5e3a42 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:translateY(46px) rotateX(-38deg);
  animation:charIn 1.15s var(--ease-out) forwards;
  text-shadow:0 22px 70px rgba(255,46,76,.24);
}
.hero__word:nth-child(1){ animation-delay:.10s }
.hero__word:nth-child(2){ animation-delay:.18s }
.hero__word:nth-child(3){ animation-delay:.26s }
.hero__word:nth-child(4){ animation-delay:.34s }
@keyframes charIn{ to{ opacity:1; transform:none; } }

.hero__lede{
  margin:26px auto 0; max-width:560px;
  font-size:clamp(16px,2.1vw,19.5px); color:var(--ink-2); line-height:1.6;
}
.hero__cta{ margin-top:36px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.hero__media{
  position:relative; z-index:2; overflow:hidden;
  width:min(1080px,calc(100vw - 2*var(--pad)));
  margin:clamp(30px,5vw,58px) auto 0;
  aspect-ratio:21/9; border-radius:var(--r-lg);
  border:1px solid var(--glass-line);
  background:
    radial-gradient(85% 130% at 22% 6%,  rgba(255,46,76,.20), transparent 62%),
    radial-gradient(75% 120% at 84% 96%, rgba(255,176,46,.14), transparent 62%),
    linear-gradient(158deg,#14161c 0%, #0b0c10 58%, #08080b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 34px 90px rgba(0,0,0,.6);
  opacity:0; animation:mediaIn 1.5s var(--ease-out) .5s forwards;
  mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
}
.hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__media-tag{
  position:absolute; left:clamp(16px,2.4vw,26px); top:clamp(14px,2.2vw,22px);
  font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3);
}
@keyframes mediaIn{ from{ opacity:0; transform:translateY(38px) scale(.985);} to{ opacity:1; transform:none; } }

.hero__scroll{
  position:relative; margin:clamp(34px,6vw,64px) auto 0; left:auto; transform:none;
  width:22px; height:36px; border:1px solid var(--glass-line-2); border-radius:12px; z-index:4;
}
.hero__scroll span{
  position:absolute; left:50%; top:8px; width:3px; height:6px; margin-left:-1.5px;
  background:var(--ink-2); border-radius:2px;
  animation:scrollDot 1.9s var(--ease-soft) infinite;
}
@keyframes scrollDot{ 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translateY(13px)} }

/* ═════════════════ BUTTONS ═════════════════ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .35s var(--ease), border-color .35s var(--ease);
}
.btn--primary{
  background:linear-gradient(180deg,#ff4763,#e01734);
  color:#fff; box-shadow:0 8px 26px rgba(255,46,76,.34), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 38px rgba(255,46,76,.44), inset 0 1px 0 rgba(255,255,255,.3); }
.btn--ghost{
  background:var(--glass); border-color:var(--glass-line); color:var(--ink);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
}
.btn--ghost:hover{ transform:translateY(-2px); background:var(--glass-2); border-color:var(--glass-line-2); }
.btn:active{ transform:translateY(0) scale(.985); }

/* ═════════════════ LAYOUT ═════════════════ */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.section{ padding:var(--sec) 0; position:relative; }
.section--alt::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.022) 18%, rgba(255,255,255,.022) 82%, transparent);
}
.section__head{ max-width:720px; margin:0 0 var(--head-gap); }
.eyebrow{
  margin:0 0 14px; font-size:12.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
}
.h2{
  margin:0; font-family:var(--font-display); font-variation-settings:"wdth" 100; font-size:clamp(30px,5.4vw,58px); font-weight:700;
  letter-spacing:-.038em; line-height:1.06;
  background:linear-gradient(180deg,#fff 32%, #c69fa8 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{ margin:18px 0 0; font-size:clamp(15.5px,1.9vw,18.5px); color:var(--ink-2); line-height:1.62; }

/* glass primitive */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 18px 50px rgba(0,0,0,.34);
}

/* ═════════════════ STATS ═════════════════ */
.stats{ padding:0 0 clamp(20px,4vw,40px); }
.stats__inner{
  width:min(var(--wrap), calc(100vw - 28px)); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-radius:var(--r-lg);
  background:var(--glass); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.4);
  overflow:hidden;
}
.stat{ padding:clamp(22px,3.2vw,34px) clamp(16px,2.4vw,28px); text-align:center; position:relative; }
.stat + .stat::before{
  content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px;
  background:linear-gradient(180deg,transparent,var(--glass-line),transparent);
}
.stat__value{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(28px,4.4vw,46px); font-weight:700; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#e8909f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__value em{ font-style:normal; font-size:.42em; font-weight:600; margin-left:.32em; color:var(--ink-3); -webkit-text-fill-color:var(--ink-3); }
.stat__label{ margin-top:9px; font-size:12.5px; color:var(--ink-3); letter-spacing:.02em; }
@media (max-width:720px){ .stats__inner{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(3)::before{display:none} }

/* ═════════════════ SPECS ═════════════════ */
.specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.spec{
  padding:26px 24px 24px; display:flex; flex-direction:column; gap:5px;
  transition:transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.spec:hover{ transform:translateY(-4px); border-color:var(--glass-line-2); background:var(--glass-2); }
.spec__k{ font-size:12.5px; color:var(--ink-3); letter-spacing:.02em; }
.spec__v{ font-size:clamp(22px,2.8vw,29px); font-weight:650; letter-spacing:-.032em; }
.spec__n{ font-size:13.5px; color:var(--ink-2); }
@media (max-width:900px){ .specs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .specs{ grid-template-columns:1fr; } }

/* ═════════════════ CHART CARD ═════════════════ */
.chart-card{ padding:clamp(20px,3vw,30px); margin-bottom:var(--card-gap); }
.chart-card__head{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; cursor:pointer; margin-bottom:0;
}
.chart-card.is-open .chart-card__head{ margin-bottom:14px; }
/* zbalená karta nedrží pod nadpisom nič */
.chart-card:not(.is-open) .chart-card__body{ margin:0; }

/* zbaliteľná časť */
.chart-card__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease), opacity .35s var(--ease);
  opacity:0;
}
.chart-card__inner{ overflow:hidden; min-height:0; }
.chart-card.is-open .chart-card__body{ grid-template-rows:1fr; opacity:1; }
.chart-card:not(.is-open) .chart{ height:0; }

/* prepínač */
.chart-toggle{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:7px 12px 7px 15px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:550; color:var(--ink-2);
  background:rgba(255,255,255,.05); border:1px solid var(--glass-line);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.chart-card__head:hover .chart-toggle{ background:rgba(255,255,255,.11); color:var(--ink); }
.chart-toggle svg{ width:15px; height:15px; transition:transform .45s var(--ease); }
.chart-card.is-open .chart-toggle svg{ transform:rotate(180deg); }
.chart-card.is-open .chart-toggle{ color:var(--ink); }

/* hromadný prepínač */
.toggle-all{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:999px; cursor:pointer; margin-bottom:var(--card-gap);
  font-family:inherit; font-size:13.5px; font-weight:550; color:var(--ink);
  background:var(--glass); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.toggle-all:hover{ background:var(--glass-2); transform:translateY(-1px); }
.chart-card__title{ margin:0; font-size:clamp(17px,2.2vw,21px); font-weight:650; letter-spacing:-.024em; }
.chart-card__sub{ margin:5px 0 0; font-size:13.5px; color:var(--ink-3); }
.chart{ position:relative; width:100%; height:clamp(280px,42vw,420px); }
.chart svg{ width:100%; height:100%; display:block; overflow:visible; }
.chart-note{
  margin:16px 0 0; padding-top:15px; border-top:1px solid var(--glass-line);
  font-size:14px; color:var(--ink-2); line-height:1.6;
}

/* segmented control */
.seg{
  display:inline-flex; padding:3px; gap:2px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--glass-line);
}
.seg__btn{
  border:0; background:transparent; cursor:pointer; color:var(--ink-2);
  font-family:inherit; font-size:13.5px; font-weight:550;
  padding:7px 16px; border-radius:999px;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.seg__btn.is-active{ background:rgba(255,255,255,.12); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }

/* legend */
.chart-legend{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.lg{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 11px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.045); border:1px solid var(--glass-line);
  font-size:13px; font-weight:550; color:var(--ink);
  transition:opacity .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
  font-family:inherit;
}
.lg:hover{ background:rgba(255,255,255,.09); transform:translateY(-1px); }
.lg.is-off{ opacity:.36; }
.lg__swatch{ width:10px; height:10px; border-radius:3px; background:var(--c); box-shadow:0 0 10px var(--c); }
.lg.is-off .lg__swatch{ box-shadow:none; }
.lg__val{ color:var(--ink-3); font-variant-numeric:tabular-nums; font-weight:500; }

/* tooltip */
.tip{
  position:absolute; z-index:8; pointer-events:none;
  min-width:132px; padding:11px 13px; border-radius:14px;
  background:rgba(20,20,24,.82); border:1px solid var(--glass-line-2);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  /* Zvislú polohu počíta charts.js — bublina sa musí zmestiť do grafu,
     preto tu žiadny posun po Y okrem nábehu. */
  opacity:0; transform:translate(-50%,6px) scale(.96);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.tip.is-on{ opacity:1; transform:translate(-50%,0) scale(1); }
/* Bublina je absolútne polohovaná, takže pri pravom okraji grafu by ju
   kontajner stlačil a text by sa zalomil — zrazu dvakrát vyššia a vytečie
   z grafu. Riadky preto nikdy nelámeme, šírka tak ostáva predvídateľná. */
.tip__x{
  font-size:11.5px; color:var(--ink-3); letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:7px; white-space:nowrap;
}
.tip__row{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; margin-top:4px; white-space:nowrap;
}
.tip__dot{ width:8px; height:8px; border-radius:2.5px; background:var(--c); flex:none; }
.tip__lbl{ color:var(--ink-2); }
.tip__val{ margin-left:auto; font-weight:650; font-variant-numeric:tabular-nums; }

/* chart svg bits */
.ax-line{ stroke:rgba(255,255,255,.08); stroke-width:1; }
.ax-grid{ stroke:rgba(255,255,255,.05); stroke-width:1; }
.ax-text{ fill:var(--ink-3); font-size:11px; font-family:var(--font); letter-spacing:.02em; }
.ax-title{ fill:var(--ink-3); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-family:var(--font); }
.crosshair{ stroke:rgba(255,255,255,.24); stroke-width:1; stroke-dasharray:3 4; }
.series-line{ fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.series-line--dash{ stroke-dasharray:6 6; stroke-width:1.8; }
.hit-dot{ stroke:#0b0b0e; stroke-width:2.5; }

/* ═════════════════ COMPARE ═════════════════ */
.compare{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin:var(--card-gap) 0; }
.cmp{ padding:24px; transition:transform .5s var(--ease), border-color .5s var(--ease); }
.cmp:hover{ transform:translateY(-4px); border-color:var(--glass-line-2); }
.cmp__tag{ margin:0; font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:7px; }
.cmp__big{ font-family:var(--font-display); margin:12px 0 2px; font-size:clamp(34px,5vw,50px); font-weight:700; letter-spacing:-.045em; line-height:1; }
.cmp__big em{ font-style:normal; font-size:.35em; font-weight:600; color:var(--ink-3); margin-left:.35em; }
.cmp__sub{ margin:0; font-size:13.5px; color:var(--ink-2); }
.cmp__bar{ margin-top:18px; height:4px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.cmp__bar i{
  display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transition:width 1.3s var(--ease-out);
}
.cmp.is-in .cmp__bar i{ width:var(--w); }
.cmp--active{ border-color:rgba(255,46,76,.34); background:rgba(255,46,76,.055); }
.cmp--target .cmp__bar i{ background:linear-gradient(90deg,var(--orange),#ff8fa3); }
.cmp--target .cmp__big{ color:var(--orange); }
.dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.dot--live{ background:var(--green); box-shadow:0 0 0 0 rgba(48,209,88,.6); animation:pulse 2.2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(48,209,88,0);} 100%{ box-shadow:0 0 0 0 rgba(48,209,88,0);} }
@media (max-width:800px){ .compare{ grid-template-columns:1fr; } }

/* medzinadpis vnútri sekcie — menší ako .h2, aby bola hierarchia jasná */
.subhead{
  margin:calc(var(--head-gap) * 1.2) 0 0;
  font-size:clamp(20px,2.8vw,27px); font-weight:650; letter-spacing:-.03em;
}

.callout{
  margin-top:var(--card-gap); padding:clamp(24px,3.4vw,34px);
  display:flex; align-items:center; gap:clamp(20px,3.4vw,34px); flex-wrap:wrap;
}
.callout__num{
  font-size:clamp(50px,8vw,84px); font-weight:700; letter-spacing:-.05em; line-height:.9;
  background:linear-gradient(180deg,var(--cyan),var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent; flex:none;
}
.callout h4{ margin:0 0 8px; font-size:19px; font-weight:650; letter-spacing:-.025em; }
.callout p{ margin:0; font-size:14.5px; color:var(--ink-2); max-width:620px; line-height:1.6; }

/* ═════════════════ DISCLAIMER ═════════════════ */
.disclaimer{
  margin-top:var(--card-gap); padding:20px 24px;
  font-size:14px; color:var(--ink-2); line-height:1.62;
  border-left:2px solid rgba(255,176,46,.5);
  border-radius:0 var(--r) var(--r) 0;
}

/* ═════════════════ HPFP ═════════════════ */
.hpfp{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(20px,3vw,40px);
  align-items:center; margin-bottom:var(--card-gap);
}
.hpfp__model{ position:relative; }
.hpfp__model model-viewer{
  width:140%; margin-left:-20%; aspect-ratio:1/1; display:block;
  background:transparent; --poster-color:transparent;
  filter:drop-shadow(0 26px 60px rgba(255,46,76,.28));
  animation:floaty 7s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(-8px);} 50%{ transform:translateY(8px);} }
.hpfp__model::after{
  content:""; position:absolute; left:50%; bottom:4%; transform:translateX(-50%);
  width:52%; height:26px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,46,76,.28), transparent 70%);
  filter:blur(9px); pointer-events:none;
}
.hpfp__cap{
  margin:0; text-align:center; font-size:11.5px; color:var(--ink-3);
  letter-spacing:.1em; text-transform:uppercase;
}
.hpfp__text p{ margin:0 0 15px; font-size:15.5px; color:var(--ink-2); line-height:1.68; }
.hpfp__text strong{ color:var(--ink); font-weight:600; }
.hpfp__src{ font-size:13px !important; color:var(--ink-3) !important; }
.hpfp__facts{ grid-template-columns:repeat(4,1fr); margin-bottom:var(--card-gap); }
@media (max-width:900px){
  .hpfp{ grid-template-columns:1fr; }
  .hpfp__model model-viewer{ width:100%; margin-left:0; max-width:440px; margin:0 auto; }
  .hpfp__facts{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion:reduce){ .hpfp__model model-viewer{ animation:none; } }

/* ═════════════════ BUILD STORY ═════════════════ */
.story{ margin-top:clamp(20px,3vw,34px); }
.story__track{
  display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap);
  padding:4px var(--pad) 10px;
}
.story__track::-webkit-scrollbar{ height:6px; }
.story__track::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:3px; }
.story__item{
  margin:0; width:100%;
  border-radius:var(--r); overflow:hidden; cursor:pointer; position:relative;
  border:1px solid var(--glass-line); background:var(--glass);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.story__item:hover{ transform:translateY(-6px); border-color:var(--glass-line-2); }
.story__item img{ width:100%; aspect-ratio:9/16; object-fit:cover; }
.story__item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 11px 9px;
  font-size:11.5px; font-weight:550; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.82));
}

/* ═════════════════ OLEJ ═════════════════ */
/* Fakty idú v riadku hneď za graf — ako krátky stĺpec vedľa vysokých
   médií nechávali polovicu sekcie prázdnu. */
.oil-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
  margin-top:var(--card-gap); }

.oil-grid{ margin-top:var(--gap); }
/* Schéma dostane celú šírku — vo dvoch stĺpcoch vedľa fotky vychádzal
   nákres na 290 px a bol nečitateľný. Fotka ide pod ňu. */
.oil-media{ display:grid; gap:var(--gap); }

/* Schéma je kreslená ako SVG priamo v HTML, takže je vždy vidieť. */
.oil-fig{ padding:16px 16px 20px; overflow:hidden; }

/* Fotka spodku bloku — je na disku, takže je vždy vidieť.
   Toto pravidlo musí ostať ZA .oil-fig, inak ho display:none prebije. */
.oil-fig--photo{ padding:0; overflow:hidden; }
.oil-fig--photo img{ width:100%; height:auto; display:block; }
.oil-fig--photo figcaption{ margin:0; padding:15px 18px 17px; }
.oil-fig .ph--fig{
  width:100%; aspect-ratio:16/10; border:1px dashed var(--glass-line-2);
  background:linear-gradient(150deg,#13151b,#0a0b0f); cursor:default;
}
.oil-fig .ph--fig.is-filled{ border-style:solid; aspect-ratio:auto; }
.oil-fig .ph--fig img{ position:static; width:100%; height:auto; }
.oil-fig figcaption{
  margin:16px 4px 0; font-size:13.5px; color:var(--ink-2); line-height:1.6;
}
.oil-fig figcaption strong{ color:var(--ink); font-weight:600; }
.oil-facts{ display:grid; gap:var(--gap); }
.fact{ padding:20px 22px; display:flex; flex-direction:column; gap:6px; }
.fact__k{ font-size:12.5px; color:var(--ink-3); }
.fact__v{ font-size:clamp(23px,3vw,30px); font-weight:650; letter-spacing:-.035em; }
.fact__v em{ font-style:normal; font-size:.46em; font-weight:600; color:var(--ink-3); margin-left:.3em; }
@media (max-width:880px){ .oil-grid{ grid-template-columns:1fr; } .oil-facts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .oil-facts{ grid-template-columns:1fr; } }

/* ═════════════════ ZDROJE ═════════════════
   Odkiaľ pochádzajú cudzie čísla — fórum, katalógy, XDF definície.
   Zámerne pri tvrdení, nie schované v pätičke.                      */
.sources{
  margin-top:var(--card-gap); padding:20px 24px 18px;
  border-left:2px solid rgba(255,46,76,.42);
  border-radius:0 var(--r) var(--r) 0;
}
.sources__h{
  margin:0 0 12px; font-size:11.5px; font-weight:650;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.sources__list{ margin:0; padding:0; list-style:none; counter-reset:src; }
.sources__list li{
  position:relative; padding:9px 0 9px 26px;
  border-top:1px solid var(--glass-line); font-size:13.5px; line-height:1.55;
}
.sources__list li:first-child{ border-top:0; padding-top:0; }
.sources__list li::before{
  counter-increment:src; content:"[" counter(src) "]";
  position:absolute; left:0; top:9px;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
}
.sources__list li:first-child::before{ top:0; }
.sources__t{ color:var(--ink); font-weight:600; }
.sources__list a.sources__t{ border-bottom:1px solid rgba(255,46,76,.45); }
.sources__list a.sources__t:hover{ color:var(--blue); border-bottom-color:var(--blue); }
.sources__d{ display:block; color:var(--ink-3); margin-top:2px; }
.sources__d em{ font-style:normal; color:var(--ink-2); }

/* ═════════════════ HARDVÉR ═════════════════ */
.hw{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.hw__col{ padding:26px 24px; transition:transform .5s var(--ease), border-color .5s var(--ease); }
.hw__col:hover{ transform:translateY(-4px); border-color:var(--glass-line-2); }
.hw__g{
  margin:0 0 14px; font-size:12.5px; font-weight:650;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue);
}
.hw__list{ margin:0; padding:0; list-style:none; }
.hw__list li{
  position:relative; padding:8px 0 8px 18px; font-size:14.5px; color:var(--ink-2);
  border-top:1px solid var(--glass-line); line-height:1.5;
}
.hw__list li:first-child{ border-top:0; padding-top:0; }
.hw__list li::before{
  content:""; position:absolute; left:2px; top:calc(.75em + 8px);
  width:5px; height:5px; border-radius:50%; background:var(--glass-line-2);
}
.hw__list li:first-child::before{ top:.75em; }
@media (max-width:900px){ .hw{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .hw{ grid-template-columns:1fr; } }

/* ═════════════════ FILTERS + TIMELINE ═════════════════ */
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:34px; }
.chip{
  padding:9px 18px; border-radius:999px; cursor:pointer; font-family:inherit;
  font-size:13.5px; font-weight:550; color:var(--ink-2);
  background:var(--glass); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.chip:hover{ transform:translateY(-1px); color:var(--ink); }
.chip.is-active{ background:rgba(255,255,255,.14); color:var(--ink); border-color:var(--glass-line-2); }
/* koľko položiek filter ukáže — vidno to ešte pred kliknutím */
.chip b{
  font-weight:600; font-size:12px; margin-left:7px; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.chip.is-active b{ color:var(--ink-2); }

.timeline{ list-style:none; margin:0; padding:0 0 0 34px; position:relative; }
.timeline::before{
  content:""; position:absolute; left:9px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg, transparent, var(--glass-line-2) 8%, var(--glass-line-2) 92%, transparent);
}
.tl{
  position:relative; margin-bottom:var(--gap);
  transition:opacity .45s var(--ease), transform .45s var(--ease), max-height .45s var(--ease);
}
.tl.is-hidden{ display:none; }
.tl::before{
  content:""; position:absolute; left:-30px; top:30px;
  width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--blue);
  box-shadow:0 0 0 4px var(--bg), 0 0 14px var(--blue);
}
.tl__card{
  padding:24px 26px;
  display:grid; grid-template-columns:1fr auto; gap:6px 18px; align-items:start;
  transition:transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.tl__card:hover{ transform:translateX(5px); border-color:var(--glass-line-2); background:var(--glass-2); }
.tl__t{ margin:0; font-size:18px; font-weight:650; letter-spacing:-.026em; grid-column:1; }
.tl__d{ margin:6px 0 0; font-size:14.5px; color:var(--ink-2); grid-column:1; line-height:1.58; }
.tl__meta{ grid-column:2; grid-row:1/3; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.tl__status{
  font-size:11px; font-weight:650; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; white-space:nowrap;
}
.st-done{ background:rgba(48,209,88,.13); color:#5fdc85; border:1px solid rgba(48,209,88,.24); }
.st-wip{ background:rgba(255,176,46,.14); color:#ffc978; border:1px solid rgba(255,176,46,.26); }
.st-plan{ background:rgba(255,255,255,.07); color:var(--ink-2); border:1px solid var(--glass-line); }
.tl__cat{ font-size:11.5px; color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase; }
@media (max-width:640px){
  .tl__card{ grid-template-columns:1fr; }
  .tl__meta{ grid-column:1; grid-row:auto; flex-direction:row; align-items:center; margin-top:12px; }
}

/* ═════════════════ GALLERY ═════════════════
   Samotné rozloženie galérie je nižšie v sekcii „GALÉRIA — MASONRY".
   Tu ostávajú len spoločné štýly dlaždice, ktoré používa aj schéma
   olejových kanálov v sekcii Mazanie.                                */
.ph{
  position:relative; overflow:hidden; border-radius:var(--r); cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  transition:transform .55s var(--ease), border-color .5s var(--ease);
}
.ph__icon{ width:26px; height:26px; opacity:.5; }
.ph__label{ font-size:12.5px; color:var(--ink-2); text-align:center; padding:0 14px; }
.ph__file{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }

/* ═════════════════ TOOLS ═════════════════ */
.tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.tool{ padding:26px 24px; transition:transform .5s var(--ease), border-color .5s var(--ease); }
.tool:hover{ transform:translateY(-4px); border-color:var(--glass-line-2); }
.tool__n{ display:flex; align-items:center; gap:10px; font-size:17.5px; font-weight:650; letter-spacing:-.024em; }
.tool__n i{ width:8px; height:8px; border-radius:2.5px; background:var(--c); box-shadow:0 0 12px var(--c); flex:none; }
.tool__r{ margin:4px 0 10px; font-size:12px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; }
.tool__d{ margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.58; }
@media (max-width:900px){ .tools{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .tools{ grid-template-columns:1fr; } }

/* ═════════════════ CTA + FOOTER ═════════════════ */
.section--cta{ padding-bottom:clamp(60px,8vw,110px); }
.cta{ padding:clamp(36px,6vw,72px); text-align:center; }
.cta .lede{ margin-left:auto; margin-right:auto; max-width:520px; }
.cta__actions{ margin-top:30px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.footer{ border-top:1px solid var(--glass-line); padding:44px 0 54px; }
.footer__inner{ display:grid; grid-template-columns:1fr 1.4fr auto; gap:26px; align-items:center; }
.footer__brand{ margin:0; font-size:19px; font-weight:700; letter-spacing:-.03em; }
.footer__brand span{ color:var(--blue); font-weight:600; }
.footer__note{ margin:4px 0 0; font-size:13px; color:var(--ink-3); }
.footer__disclaimer{ margin:0; font-size:12.5px; color:var(--ink-3); line-height:1.6; max-width:520px; }
.footer__copy{ margin:0; font-size:13px; color:var(--ink-3); }
@media (max-width:860px){ .footer__inner{ grid-template-columns:1fr; text-align:left; } }

/* ═════════════════ LIGHTBOX ═════════════════ */
.lightbox{
  position:fixed; inset:0; z-index:950; display:flex; align-items:center; justify-content:center;
  padding:5vw; background:rgba(6,6,7,.86);
  -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__body{
  max-width:min(1100px,92vw); max-height:86vh; border-radius:var(--r-lg); overflow:hidden;
  transform:scale(.96); transition:transform .45s var(--ease-out);
  border:1px solid var(--glass-line-2); box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.lightbox.is-open .lightbox__body{ transform:none; }
.lightbox__body img{ max-height:86vh; width:auto; }
.lightbox__ph{
  width:min(900px,88vw); aspect-ratio:16/9; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(140deg,#12131a,#0a0b0f);
}
.lightbox__close{
  position:absolute; top:22px; right:24px; width:42px; height:42px; border-radius:50%;
  background:var(--glass); border:1px solid var(--glass-line); color:var(--ink);
  font-size:23px; line-height:1; cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.lightbox__close:hover{ background:var(--glass-2); transform:rotate(90deg); }

/* listovanie fotkami — bez neho sa musí lightbox zavrieť a otvoriť pri každej */
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; cursor:pointer; z-index:2;
  display:grid; place-items:center; color:var(--ink);
  background:rgba(20,20,24,.72); border:1px solid var(--glass-line-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:background .3s var(--ease), opacity .3s var(--ease);
}
.lightbox__nav svg{ width:22px; height:22px; }
.lightbox__nav:hover{ background:rgba(40,40,48,.9); }
.lightbox__nav--prev{ left:clamp(10px,2.4vw,26px); }
.lightbox__nav--next{ right:clamp(10px,2.4vw,26px); }
.lightbox__nav[hidden]{ display:none; }

.lightbox__meta{
  position:absolute; left:0; right:0; bottom:clamp(14px,3vw,26px);
  margin:0; text-align:center; font-size:13px; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:0 84px; pointer-events:none;
}
.lightbox__meta i{
  font-style:normal; font-family:var(--mono); font-size:12px; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
@media (max-width:640px){
  .lightbox__nav{ width:42px; height:42px; }
  .lightbox__meta{ padding:0 20px; }
}

/* ═════════════════ REŽIM ÚPRAV ═════════════════ */
.editbar{
  position:fixed; right:20px; bottom:20px; z-index:940;
  display:none; align-items:center; gap:10px;
}
.editbar.is-visible{ display:flex; }
.editbar__pen, .editbar__ruler{
  width:46px; height:46px; flex:none; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--ink);
  background:rgba(20,20,24,.72); border:1px solid var(--glass-line-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.editbar__pen svg, .editbar__ruler svg{ width:19px; height:19px; }
.editbar__pen:hover, .editbar__ruler:hover{ transform:translateY(-2px); background:rgba(30,30,36,.85); }
.editbar.is-open .editbar__pen,
.editbar__ruler.is-active{
  background:linear-gradient(180deg,#ff4763,#e01734); color:#fff; border-color:transparent;
  box-shadow:0 10px 30px rgba(255,46,76,.45);
}
.editbar__tools{
  display:flex; align-items:center; gap:6px; padding:7px 8px 7px 14px;
  border-radius:999px; order:-1;
  background:rgba(20,20,24,.72); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateX(14px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.editbar.is-open .editbar__tools{ opacity:1; visibility:visible; transform:none; }
.editbar__count{ font-size:12.5px; color:var(--ink-3); margin-right:6px; white-space:nowrap; }
.editbar__tools button{
  font-family:inherit; font-size:13px; font-weight:550; cursor:pointer;
  padding:7px 13px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.07); border:1px solid var(--glass-line); color:var(--ink);
  transition:background .3s var(--ease);
}
.editbar__tools button:hover{ background:rgba(255,255,255,.14); }
.editbar__tools button.is-primary{
  background:linear-gradient(180deg,#ff4763,#e01734); border-color:transparent; color:#fff;
}

body.is-editing [contenteditable]{
  outline:1px dashed rgba(255,46,76,.38); outline-offset:3px; border-radius:4px;
  transition:outline-color .2s var(--ease), background .2s var(--ease);
}
body.is-editing [contenteditable]:hover{ outline-color:rgba(255,46,76,.7); }
body.is-editing [contenteditable]:focus{
  outline:1px solid var(--blue); background:rgba(255,46,76,.09);
}
body.is-editing .ph, body.is-editing .story__item{ cursor:default; }

@media (max-width:640px){
  .editbar{ right:12px; bottom:12px; left:12px; justify-content:flex-end; }
  .editbar__tools{ flex-wrap:wrap; justify-content:flex-end; }
}

/* ── panel rozostupov ── */
.spacepanel{
  position:fixed; right:20px; bottom:80px; z-index:941;
  width:min(320px, calc(100vw - 40px));
  border-radius:20px; overflow:hidden;
  background:rgba(18,18,22,.86); border:1px solid var(--glass-line-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:0 22px 60px rgba(0,0,0,.62);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.97);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.spacepanel.is-open{ opacity:1; visibility:visible; transform:none; }
.spacepanel__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 12px 12px 18px; border-bottom:1px solid var(--glass-line);
  font-size:12.5px; font-weight:650; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
}
.spacepanel__head button{
  width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:18px; line-height:1;
  background:rgba(255,255,255,.07); border:1px solid var(--glass-line); color:var(--ink);
}
.spacepanel__body{ padding:6px 18px 12px; }
.sprow{ display:block; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.sprow:last-child{ border-bottom:0; }
.sprow__lbl{ font-size:13.5px; color:var(--ink-2); }
.sprow output{
  float:right; font-size:12.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; font-family:var(--mono);
}
.sprow.is-changed .sprow__lbl{ color:var(--ink); }
.sprow.is-changed output{ color:var(--blue); }
.sprow input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px; margin-top:11px; border-radius:2px; cursor:pointer;
  background:rgba(255,255,255,.14);
}
.sprow input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; border-radius:50%; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.5); cursor:grab;
}
.sprow input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border:0; border-radius:50%; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.5); cursor:grab;
}
.spacepanel__foot{ padding:12px 18px 16px; border-top:1px solid var(--glass-line); }
.spacepanel__foot button{
  width:100%; padding:9px 14px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:550; color:var(--ink);
  background:rgba(255,255,255,.07); border:1px solid var(--glass-line);
  transition:background .3s var(--ease);
}
.spacepanel__foot button:hover{ background:rgba(255,255,255,.14); }
@media (max-width:640px){ .spacepanel{ right:12px; left:12px; bottom:72px; width:auto; } }

/* stav ukladania do súboru */
.editbar__status{
  font-size:12px; white-space:nowrap; color:var(--ink-3);
  transition:color .3s var(--ease);
}
.editbar__status[data-state="saving"]{ color:var(--ink-2); }
.editbar__status[data-state="saved"]{ color:var(--green); }
.editbar__status[data-state="error"]{ color:var(--red); }
.editbar__status:empty{ display:none; }
.editbar__tools button.is-on{
  background:rgba(48,209,88,.16); border-color:rgba(48,209,88,.34); color:#5fdc85;
}

/* ═════════════════ KOMENTÁRE ═════════════════ */
.cmt-btn{
  position:fixed; right:20px; bottom:78px; z-index:942;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:none; place-items:center; color:var(--ink);
  background:rgba(20,20,24,.72); border:1px solid var(--glass-line-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.cmt-btn.is-visible{ display:grid; }
.cmt-btn svg{ width:19px; height:19px; }
.cmt-btn:hover{ transform:translateY(-2px); background:rgba(30,30,36,.85); }
.cmt-btn.is-on{
  background:linear-gradient(180deg,#ffb02e,#e07d00); color:#1a1200; border-color:transparent;
  box-shadow:0 10px 30px rgba(255,176,46,.45);
}
.cmt-btn__n{
  position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--orange); color:#1a1200;
  font-size:11px; font-weight:700; line-height:19px; text-align:center;
}
.cmt-btn__n[hidden]{ display:none; }

.cmt-panel{
  position:fixed; right:20px; bottom:136px; z-index:943;
  width:min(340px, calc(100vw - 40px)); max-height:min(60vh, 560px);
  display:flex; flex-direction:column;
  border-radius:20px; overflow:hidden;
  background:rgba(18,18,22,.9); border:1px solid var(--glass-line-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:0 22px 60px rgba(0,0,0,.62);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.97);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.cmt-panel.is-open{ opacity:1; visibility:visible; transform:none; }
.cmt-panel__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 12px 12px 18px; border-bottom:1px solid var(--glass-line);
  font-size:12.5px; font-weight:650; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); flex:none;
}
.cmt-panel__head button{
  width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:18px; line-height:1;
  background:rgba(255,255,255,.07); border:1px solid var(--glass-line); color:var(--ink);
}
.cmt-panel__hint{
  padding:11px 18px; font-size:12.5px; color:var(--ink-3);
  border-bottom:1px solid var(--glass-line); flex:none;
}
.cmt-panel__list{ overflow-y:auto; padding:6px 12px; flex:1 1 auto; }
.cmt-panel__empty{ margin:14px 6px; font-size:13px; color:var(--ink-3); }
.cmt-item{
  padding:11px 12px; margin:6px 0; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--glass-line);
  transition:background .35s var(--ease);
}
.cmt-item.is-flash{ background:rgba(255,176,46,.2); }
.cmt-item__top{ display:flex; align-items:center; gap:8px; }
.cmt-item__n{
  width:19px; height:19px; border-radius:50%; flex:none;
  background:var(--orange); color:#1a1200;
  font-size:11px; font-weight:700; line-height:19px; text-align:center;
}
.cmt-item__where{
  font-size:12px; color:var(--ink-3); flex:1 1 auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmt-item__top button{
  width:20px; height:20px; flex:none; border-radius:50%; cursor:pointer;
  font-size:15px; line-height:1; background:transparent;
  border:1px solid var(--glass-line); color:var(--ink-3);
}
.cmt-item__top button:hover{ color:var(--ink); background:rgba(255,255,255,.08); }
.cmt-item__q{
  margin:8px 0 6px; font-size:12px; color:var(--ink-3); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cmt-item__t{ margin:0; font-size:13.5px; color:var(--ink); line-height:1.5; }
.cmt-panel__foot{
  display:flex; gap:8px; padding:12px 14px 14px;
  border-top:1px solid var(--glass-line); flex:none;
}
.cmt-panel__foot button{
  flex:1 1 auto; padding:9px 12px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:550; color:var(--ink);
  background:rgba(255,255,255,.07); border:1px solid var(--glass-line);
  transition:background .3s var(--ease);
}
.cmt-panel__foot button:hover{ background:rgba(255,255,255,.14); }
.cmt-panel__foot button.is-primary{
  flex:2 1 auto;
  background:linear-gradient(180deg,#ff4763,#e01734); border-color:transparent; color:#fff;
}

/* bublina na napísanie komentára */
.cmt-pop{
  position:fixed; z-index:960; width:min(300px, calc(100vw - 24px));
  padding:12px; border-radius:16px;
  background:rgba(22,22,27,.94); border:1px solid var(--glass-line-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:0 20px 54px rgba(0,0,0,.66);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.cmt-pop.is-on{ opacity:1; visibility:visible; transform:none; }
.cmt-pop__what{
  font-size:12px; color:var(--ink-3); margin-bottom:9px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmt-pop__what b{ color:var(--ink-2); font-weight:600; }
.cmt-pop textarea{
  width:100%; resize:vertical; font-family:inherit; font-size:14px;
  padding:9px 11px; border-radius:10px; color:var(--ink);
  background:rgba(255,255,255,.06); border:1px solid var(--glass-line);
}
.cmt-pop textarea:focus{ outline:1px solid var(--blue); border-color:transparent; }
.cmt-pop__row{ display:flex; gap:8px; margin-top:9px; }
.cmt-pop__row button{
  flex:1 1 auto; padding:8px 12px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:550; color:var(--ink);
  background:rgba(255,255,255,.07); border:1px solid var(--glass-line);
}
.cmt-pop__row button.is-primary{
  background:linear-gradient(180deg,#ff4763,#e01734); border-color:transparent; color:#fff;
}

/* označené miesta na stránke */
body.is-commenting{ cursor:crosshair; }
body.is-commenting *:hover{ outline:1px dashed rgba(255,176,46,.55); outline-offset:2px; }
.has-cmt{ position:relative; outline:1px solid rgba(255,176,46,.5); outline-offset:2px; }
.cmt-mark{
  position:absolute; top:-9px; left:-9px; z-index:5;
  min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--orange); color:#1a1200; cursor:pointer;
  font-size:11px; font-weight:700; line-height:19px; text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}

@media (max-width:640px){
  .cmt-btn{ bottom:70px; right:12px; }
  .cmt-panel{ right:12px; left:12px; width:auto; bottom:126px; }
}

/* ═════════════════ REVEAL ═════════════════ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__word{ opacity:1; transform:none; }
  .hero__media{ opacity:1; }
  .cmp .cmp__bar i{ width:var(--w); }
}

/* ═════════════════ GALÉRIA — MASONRY ═════════════════ */
.gallery{
  display:block; columns:4; column-gap:var(--gap);
}
.gallery .ph{
  break-inside:avoid; margin:0 0 var(--gap); width:100%;
  display:block !important; position:relative; overflow:hidden;
  border-radius:var(--r); cursor:pointer;
  border:1px solid var(--glass-line); background:var(--glass);
  transition:transform .55s var(--ease), border-color .45s var(--ease);
}
.gallery .ph:hover{ transform:translateY(-3px); border-color:var(--glass-line-2); }
.gallery .ph img, .gallery .ph video{
  width:100%; height:auto; display:block; object-fit:cover;
  transition:transform .7s var(--ease), filter .45s var(--ease);
}
.gallery .ph:hover img{ transform:scale(1.035); }
.ph__cap{
  position:absolute; left:0; right:0; bottom:0; padding:26px 12px 10px;
  font-size:12.5px; font-weight:500; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.78));
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gallery .ph:hover .ph__cap, .gallery .ph:focus-visible .ph__cap{ opacity:1; transform:none; }
.ph__play{
  position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px;
  display:grid; place-items:center; border-radius:50%; pointer-events:none;
  background:rgba(10,11,14,.55); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.ph__play svg{ width:20px; height:20px; color:#fff; margin-left:2px; }
.gallery .ph:hover .ph__play{ opacity:0; transform:scale(.8); }
@media (max-width:1100px){ .gallery{ columns:3; } }
@media (max-width:760px){  .gallery{ columns:2; } }
@media (max-width:420px){  .gallery{ columns:1; } }

/* lightbox video */
.lightbox__body video{ max-height:86vh; width:auto; display:block; }

/* ═════════════════ DROBNÉ ANIMÁCIE ═════════════════ */
.btn--primary{
  transform:perspective(600px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .35s var(--ease), border-color .35s var(--ease);
}

/* čiara časovej osi sa dokresľuje pri scrollovaní */
.timeline::after{
  content:""; position:absolute; left:9px; top:6px; width:1px;
  height:var(--tl-progress,0%); max-height:calc(100% - 12px);
  background:linear-gradient(180deg, var(--blue), var(--cyan));
  box-shadow:0 0 10px rgba(255,46,76,.55);
  transition:height .15s linear;
}

/* prepnutie režimu — obsah sa jemne prehrnie */
@keyframes modeIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

@media (prefers-reduced-motion:reduce){
  .btn--primary{ transform:none; }
  .timeline::after{ transition:none; }
}

/* ═════════════════ ROZCESTNÍK POD HERO ═════════════════
   Textový register namiesto steny obrázkov. Fotka sa ukáže ako náhľad
   pri kurzore až vtedy, keď o riadok zavadíš.                          */
.hubsec{ padding-top:clamp(10px,2vw,22px); position:relative; }
.hub{ display:block; border-top:1px solid var(--glass-line); }
.hubrow{
  position:relative; display:grid; align-items:baseline;
  grid-template-columns:44px minmax(0,auto) 1fr 28px;
  gap:0 16px; padding:15px 6px;
  border-bottom:1px solid var(--glass-line);
  transition:padding-left .4s var(--ease), background .4s var(--ease);
}
.hubrow:hover{ padding-left:16px; background:rgba(255,255,255,.02); }
.hubrow__n{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
  transition:color .35s var(--ease);
}
.hubrow:hover .hubrow__n{ color:var(--blue); }
.hubrow__t{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(19px,2.5vw,27px); letter-spacing:-.03em; color:var(--ink);
}
.hubrow__d{ font-size:13.5px; color:var(--ink-3); }
.hubrow__a{
  justify-self:end; color:var(--blue); font-size:16px;
  opacity:0; transform:translateX(-8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.hubrow:hover .hubrow__a{ opacity:1; transform:none; }

@media (max-width:640px){
  .hubrow{ grid-template-columns:34px 1fr 20px; padding:13px 4px; }
  .hubrow__d{ display:none; }
}

/* ═════════════════ DIELY ═════════════════ */
.parts{ display:block; columns:3; column-gap:var(--gap); }
.part{ break-inside:avoid; margin:0 0 var(--gap); padding:22px 20px;
  transition:transform .5s var(--ease), border-color .5s var(--ease); }
.part:hover{ transform:translateY(-3px); border-color:var(--glass-line-2); }
.part__g{
  margin:0 0 12px; font-size:12px; font-weight:650;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue);
}
.part__list{ margin:0; padding:0; list-style:none; }
.part__list li{
  position:relative; padding:7px 0 7px 15px; font-size:14px;
  color:var(--ink-2); line-height:1.5; border-top:1px solid var(--glass-line);
}
.part__list li:first-child{ border-top:0; }
.part__list li::before{
  content:""; position:absolute; left:1px; top:calc(.75em + 7px);
  width:4px; height:4px; border-radius:50%; background:var(--glass-line-2);
}
.part__list li:first-child::before{ top:.75em; }
@media (max-width:900px){ .parts{ columns:2; } }
@media (max-width:600px){ .parts{ columns:1; } }

/* ═════════════════ ČASOVÁ OS S MINIATÚRAMI ═════════════════ */
.tl__card{ grid-template-columns:auto 1fr auto; align-items:center; gap:0 18px; }
.tl__img{
  width:108px; height:74px; object-fit:cover; border-radius:9px;
  border:1px solid var(--glass-line); grid-row:1; align-self:center;
}
.tl__body{ grid-column:2; }
.tl__card .tl__t{ grid-column:auto; }
.tl__card .tl__d{ grid-column:auto; }
.tl__card .tl__meta{ grid-column:3; grid-row:1; }
@media (max-width:700px){
  .tl__card{ grid-template-columns:1fr; }
  .tl__img{ width:100%; height:150px; margin-bottom:12px; }
  .tl__body, .tl__card .tl__meta{ grid-column:1; }
  .tl__card .tl__meta{ grid-row:auto; flex-direction:row; align-items:center; margin-top:10px; }
}

@media (max-width:900px){ .story__track{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .story__track{ grid-template-columns:repeat(2,1fr); } }

/* ═════════════════ SCHÉMA OLEJOVÉHO SYSTÉMU ═════════════════ */
.oil-fig--schema{ display:block; padding:18px 18px 20px; }
.oilmap{ width:100%; height:auto; display:block; }
.om-box{ fill:rgba(255,255,255,.035); stroke:var(--glass-line-2); stroke-width:1; }
.om-key{ fill:rgba(255,46,76,.10); stroke:rgba(255,46,76,.45); }
.om-turbo{ fill:rgba(255,176,46,.08); stroke:rgba(255,176,46,.38); }
.om-t{
  fill:var(--ink); font-family:var(--font); font-size:13px; font-weight:600;
  text-anchor:middle; letter-spacing:-.01em;
}
.om-tk{ fill:#fff; }
.om-s{ fill:var(--ink-3); font-family:var(--font); font-size:10.5px; text-anchor:middle; }
.om-lab{ fill:var(--ink-3); font-family:var(--font); font-size:10.5px; }
.om-line path{ fill:none; stroke:var(--blue); stroke-width:1.6; color:var(--blue); }
.om-back path{ fill:none; stroke:var(--glass-line-2); stroke-width:1.2; color:var(--ink-3); }
.oil-fig__src{ font-size:12.5px; color:var(--ink-3); }

/* ═════════════════ DROBNÉ OPRAVY DIZAJNU ═════════════════ */

/* Lišta je fixná a vysoká ~76 px. Bez tohto sa po kliknutí na odkaz
   nadpis sekcie schoval pod ňu a vyzeralo to, akoby skok netrafil. */
main section[id]{ scroll-margin-top:92px; }

/* Viditeľný fokus pri prechode klávesnicou — predtým nebolo vidieť,
   kde človek je. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:6px;
}
.hubrow:focus-visible{ outline-offset:-2px; }

/* Nadpisy sa lámu vyrovnane, nie s osamelým slovom na poslednom riadku */
.h2, .hero__title, .chart-card__title, .part__g, .tl__t{ text-wrap:balance; }
.lede, .hubrow__d, .part__list li{ text-wrap:pretty; }

/* Natívne prvky a posuvník nech ladia s tmavým webom */
:root{ color-scheme:dark; }
html{ scrollbar-color:rgba(255,255,255,.16) transparent; scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14); border-radius:6px;
  border:2px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.24); background-clip:content-box; }

/* Sekcie sú natesno pri sebe, tak ich oddelí vlásková linka namiesto medzery */
.section + .section{ border-top:1px solid rgba(255,255,255,.045); }

/* Obrázky nech nepreblikávajú bielou, kým sa načítajú */
img{ background:rgba(255,255,255,.03); }

/* ═════════════════ PÁS FOTIEK V HLAVIČKE ═════════════════ */
.herogal{
  position:relative; z-index:3;
  width:min(var(--wrap), calc(100vw - 2*var(--pad)));
  margin:clamp(26px,4vw,44px) auto 0;
  display:flex; align-items:center; gap:8px;
  overflow-x:auto; padding-bottom:4px;
  scrollbar-width:none;
}
.herogal::-webkit-scrollbar{ display:none; }
.herogal__i{
  flex:0 0 auto; width:clamp(78px,9vw,116px); aspect-ratio:4/3;
  padding:0; border-radius:10px; overflow:hidden; cursor:pointer;
  border:1px solid var(--glass-line); background:var(--glass);
  opacity:0; transform:translateY(14px);
  animation:galIn .8s var(--ease-out) forwards;
  animation-delay:calc(.55s + var(--d,0ms));
  transition:transform .45s var(--ease), border-color .4s var(--ease);
}
@keyframes galIn{ to{ opacity:1; transform:none; } }
.herogal__i img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.35) brightness(.85);
  transition:filter .45s var(--ease), transform .6s var(--ease);
}
.herogal__i:hover{ transform:translateY(-3px); border-color:var(--glass-line-2); }
.herogal__i:hover img{ filter:none; transform:scale(1.06); }

.herogal__more{
  flex:0 0 auto; margin-left:4px; display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:550; color:var(--ink-2); white-space:nowrap;
  padding:8px 4px; transition:color .3s var(--ease);
}
.herogal__more span{ color:var(--blue); transition:transform .35s var(--ease); }
.herogal__more:hover{ color:var(--ink); }
.herogal__more:hover span{ transform:translateX(4px); }

@media (prefers-reduced-motion:reduce){
  .herogal__i{ opacity:1; transform:none; animation:none; }
}


/* ═════════════════ SCHÉMA OLEJA — NÁKRES A TEXT VEDĽA SEBA ═════════════════
   Nákres sám o sebe nechával vpravo veľa prázdneho miesta, tak k nemu
   ide text, ktorý bol predtým v samostatnom bloku pod ním.               */
.oilschema{
  display:grid; grid-template-columns:1.35fr 1fr;
  gap:clamp(20px,3vw,40px); align-items:center;
}
.oilschema .oilmap{ width:100%; height:auto; }
.oil-fig--schema figcaption{ margin:0; }
.oil-fig--schema figcaption p{ margin:0 0 12px; font-size:13.5px; line-height:1.62; }
.oil-fig--schema figcaption p:last-child{ margin-bottom:0; }

.oilschema__k{
  display:flex; align-items:baseline; gap:10px;
  margin-top:18px !important; padding-top:16px;
  border-top:1px solid var(--glass-line);
  font-family:var(--font-display); font-weight:650;
  font-size:15px !important; color:var(--ink) !important; letter-spacing:-.02em;
}
.oilschema__k b{
  font-size:30px; font-weight:800; line-height:1; color:var(--blue);
}
@media (max-width:900px){
  .oilschema{ grid-template-columns:1fr; }
  .oil-facts{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){ .oil-facts{ grid-template-columns:1fr; } }

/* ═════════════════ PÁS FOTIEK V HLAVIČKE — NA STRED ═════════════════ */
.herogal{ justify-content:center; }

/* ═════════════════ KONTAKT — ZJEDNODUŠENÝ ═════════════════ */
.cta{ padding:clamp(28px,5vw,52px) 0; text-align:center; }
.cta .h2{ margin-bottom:14px; }
.cta__mail{
  display:inline-block; font-family:var(--font-display);
  font-size:clamp(20px,3.4vw,32px); font-weight:700; letter-spacing:-.03em;
  color:var(--blue); position:relative;
}
.cta__mail::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.cta__mail:hover::after{ transform:scaleX(1); }

/* pás Priebeh je teraz v galérii */
#galeria .story{ margin-bottom:var(--card-gap); }

/* ═════════════════ VÝMENA OBRÁZKOV ═════════════════ */
img.is-swappable{ cursor:pointer; outline:1px dashed rgba(255,46,76,.45); outline-offset:2px; }
img.is-swappable:hover{ outline:2px solid var(--blue); }

.mediatoast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,14px);
  z-index:960; max-width:min(520px, calc(100vw - 32px));
  padding:12px 18px; border-radius:999px;
  font-size:13.5px; font-weight:550; color:var(--ink);
  background:rgba(18,18,22,.92); border:1px solid var(--glass-line-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:0 16px 44px rgba(0,0,0,.6);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.mediatoast.is-on{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.mediatoast.is-err{ border-color:rgba(255,46,76,.5); color:#ffb3bf; }

/* ═════════════════ OPRAVY PODĽA PRIPOMIENOK ═════════════════ */

/* Fakty pri HPFP majú byť v jednom riadku. Pravidlo .oil-facts stojí
   v súbore nižšie a s rovnakou špecificitou ho prebíjalo — preto obe triedy. */
.oil-facts.hpfp__facts{ grid-template-columns:repeat(4,1fr); }
@media (max-width:820px){ .oil-facts.hpfp__facts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .oil-facts.hpfp__facts{ grid-template-columns:1fr; } }

/* Fotka spodku bloku bola cez celú šírku a prebíjala schému nad ňou. */
.oil-fig--photo{ max-width:620px; margin:0 auto; }

/* Galéria bez popiskov — fotky hovoria samy za seba. */
.gallery .ph__cap{ display:none; }

/* ── Diely: prehľadnejšie ─────────────────────────────────────
   Namiesto odrážok riadky s vlásočnicami a počtom pri nadpise. */
.part{ padding:20px 20px 8px; }
.part__g{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:0 0 6px; padding-bottom:10px;
  border-bottom:1px solid var(--glass-line);
  font-family:var(--font-display); font-size:12.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--blue);
}
.part__g b{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0; color:var(--ink-3);
}
.part__list{ margin:0; padding:0; list-style:none; }
.part__list li{
  padding:9px 0; font-size:14px; color:var(--ink-2); line-height:1.45;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.part__list li:last-child{ border-bottom:0; }