/* ===========================================================================
   ef-de · hlavička a hero (úvod webu) · DS 2.0
   Závisí od tokens.css a fonts.css. Mobil najprv, počítač od 60em (960 px).
   Vybrané v design-system/explore.html (kolo 4):
   P2 · C · L1 · značková · claim 1 · kocka v pozadí · len logá · svetlo obieha kocku
   =========================================================================== */

/* animovateľná premenná pre pomalé „dýchanie“ kocky */
@property --breath{syntax:"<number>";inherits:true;initial-value:0}

/* ---------- Základ ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg-blue)}
html:has(.menu[open]){overflow:hidden}
body{margin:0;background:var(--bg-light);color:var(--text-on-light);font-family:var(--f-text);font-weight:var(--fw-text);
  font-size:var(--fs-base);line-height:var(--lh-text);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus-on-light);outline-offset:3px}
.site-header :focus-visible,.hero :focus-visible,.menu :focus-visible{outline-color:var(--focus-on-blue)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;z-index:100;left:var(--gutter);top:-80px;padding:12px 18px;border-radius:var(--r-pill);
  background:var(--c-white);color:var(--c-ink);font-weight:var(--fw-strong);text-decoration:none}
.skip:focus{top:12px}

/* ---------- Logo (inline SVG, farby z tokenov) ---------- */
.logo{height:41px;width:auto}
.logo .lg-e{fill:var(--cube-e)}
.logo .lg-f{fill:var(--cube-f)}
.logo .lg-d{fill:var(--cube-d)}
.logo .lg-w{fill:var(--c-white)}
.logo path{transform-box:fill-box;transform-origin:center}

/* ---------- Hlavička ---------- */
.site-header{position:absolute;z-index:10;top:0;left:0;right:0;color:var(--text-on-blue)}
.nav{max-width:var(--content-max);margin:0 auto;padding:16px var(--gutter) 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:block;border-radius:var(--r-sm)}
.nav__links{display:none;list-style:none;margin:0;padding:4px;gap:2px}
.nav__links a{display:block;padding:10px 14px;border-radius:var(--r-pill);text-decoration:none;font-size:15px;font-weight:500}
.nav__links a:hover{background:var(--hover-on-blue)}
.nav__end{display:flex;align-items:center;gap:10px}
.lang{display:flex;gap:2px;list-style:none;margin:0;padding:4px;font-family:var(--f-mono);font-size:var(--fs-mono)}
.lang a{display:block;padding:7px 9px;border-radius:var(--r-pill);text-decoration:none;line-height:1.2}
.lang a:hover{background:var(--hover-on-blue)}
.lang a[aria-current]{background:var(--c-white);color:var(--c-ink)}
.btn-outline{display:none;align-items:center;min-height:var(--tap);padding:0 18px;border:1.5px solid currentColor;border-radius:var(--r-pill);
  font-weight:var(--fw-strong);font-size:14.5px;text-decoration:none}
.btn-outline:hover{background:var(--hover-on-blue)}
/* tlačidlo menu: bez JavaScriptu neviditeľné (nič by nerobilo), miesto má rezervované → nič neposkočí */
.burger{display:grid;place-content:center;gap:5px;width:var(--tap);height:var(--tap);padding:0;border:1.5px solid currentColor;border-radius:50%;
  background:transparent;cursor:pointer;visibility:hidden}
.js .burger{visibility:visible}
.burger:hover{background:var(--hover-on-blue)}
.burger i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor}
.burger--close i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger--close i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* lišta pri scrollovaní hore (js/hero.js): hlavička sa prilepí hore na modrom pozadí;
   keď je skrytá a dostane fokus klávesnicou, vysunie sa */
.site-header[data-fixed]{position:fixed;background:var(--bg-blue);box-shadow:0 10px 30px rgba(0,34,54,.18);transform:translateY(-100%)}
.site-header[data-fixed][data-show],.site-header[data-fixed]:focus-within{transform:none}
.site-header[data-fixed] .nav{padding-top:10px;padding-bottom:10px}

/* ---------- Mobilné menu (dialóg cez celú obrazovku) ---------- */
.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;
  padding:16px var(--gutter) 28px;background:var(--bg-blue);color:var(--text-on-blue);display:none;flex-direction:column;gap:32px;overflow:auto}
.menu[open]{display:flex}
.menu::backdrop{background:var(--bg-blue)}
.menu__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.menu__links{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:2px}
.menu__links a{display:inline-block;padding:4px 0;text-decoration:none;font-family:var(--f-display);font-weight:var(--fw-display);
  font-size:clamp(34px,10vw,52px);line-height:1.15;letter-spacing:var(--track-display)}
.menu__links a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.menu__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.menu__foot .lang{padding:0}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;color:var(--text-on-blue);
  background:radial-gradient(120% 70% at 50% 120%,rgba(0,34,54,.30),transparent 60%),var(--bg-blue)}
/* zrnitosť: iba tmavé zrnká (Ink), takže pozadie nikdy nezosvetlí a kontrast textu neklesne */
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 .133 0 0 0 0 .212 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hero__in{--header-h:78px;position:relative;z-index:1;max-width:var(--content-max);margin:0 auto;
  padding:calc(var(--header-h) + 12px) var(--gutter) 26px;display:flex;flex-direction:column;gap:28px;min-height:720px}

/* --- kocka v pozadí: iba tmavšie tóny, biely text nad ňou ≥ 5,35:1 --- */
.bgcube{position:absolute;z-index:0;pointer-events:none;display:grid;place-items:center;perspective:2600px;
  --s:clamp(150px,46vw,220px);width:calc(var(--s) * 1.7);height:calc(var(--s) * 1.9);right:calc(var(--s) * -.42);top:96px;
  --c-top:var(--deco-ink-light);--c-left:var(--deco-ink);--c-right:var(--deco-pink)}
.bgcube__shade{position:absolute;width:calc(var(--s) * 1.6);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,34,54,.22),transparent)}
.bgcube__orbit{position:absolute;inset:0}
.bgcube__glow{position:absolute;left:50%;top:50%;width:calc(var(--s) * 1.3);aspect-ratio:1;border-radius:50%;translate:-15% -80%;
  background:radial-gradient(closest-side,rgba(216,57,149,.30),rgba(216,57,149,.08) 55%,transparent)}
.cube-tilt,.cube-sway{transform-style:preserve-3d}
.cube{position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d;transform:rotateX(-35.264deg) rotateY(-45deg)}
.face{position:absolute;inset:0;--h:calc(var(--s) / 2 + var(--s) * (var(--explode,0) + var(--breath,0)))}
.face svg{width:100%;height:100%;overflow:visible}
.face path{fill:var(--fc)}
.face--left{--fc:var(--c-left);transform:translateZ(var(--h))}
.face--right{--fc:var(--c-right);transform:rotateY(90deg) translateZ(var(--h))}
.face--top{--fc:var(--c-top);transform:rotateX(90deg) translateZ(var(--h))}

/* --- ružové svetlo obieha kocku: dve kométy na naklonených 3D dráhach ---
   Len ružová v normálnom miešaní, spolu max. 80 % → biely text pod ňou ≥ 4,80:1.
   Sklon dráh je prepočítaný, aby sa pri hojdaní kocky (±16°) nestočili do tenkej čiary. */
.orbit{position:absolute;left:50%;top:50%;width:calc(var(--s) * var(--r) * 2);height:calc(var(--s) * var(--r) * 2);
  margin:calc(var(--s) * var(--r) * -1) 0 0 calc(var(--s) * var(--r) * -1);transform-style:preserve-3d}
.orbit--a{--r:.9;--w:.11;transform:rotateX(90deg) rotateY(12deg)}
.orbit--b{--r:1.02;--w:.06;transform:rotateY(60deg) rotateX(-25deg)}
.comet{position:absolute;inset:0;opacity:.62}
.orbit--b .comet{opacity:.42;scale:-1 1}
.comet__tail{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg 170deg,rgba(216,57,149,.06) 230deg,rgba(216,57,149,.45) 320deg,rgba(216,57,149,.95) 356deg,transparent 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc((1 - var(--w)) * 100%),rgba(0,0,0,.5) calc((1 - var(--w) * .75) * 100%),#000 calc((1 - var(--w) * .5) * 100%),rgba(0,0,0,.5) calc((1 - var(--w) * .25) * 100%),transparent 100%);
          mask:radial-gradient(closest-side,transparent calc((1 - var(--w)) * 100%),rgba(0,0,0,.5) calc((1 - var(--w) * .75) * 100%),#000 calc((1 - var(--w) * .5) * 100%),rgba(0,0,0,.5) calc((1 - var(--w) * .25) * 100%),transparent 100%)}
.comet__head{position:absolute;left:50%;top:calc(var(--s) * var(--r) * var(--w) / 2);width:calc(var(--s) * var(--r) * var(--w) * 2.6);aspect-ratio:1;
  border-radius:50%;translate:-50% -50%;
  background:radial-gradient(closest-side,rgba(216,57,149,.95),rgba(216,57,149,.5) 38%,rgba(216,57,149,.14) 68%,transparent)}

/* --- text --- */
.copy{position:relative;z-index:3}
.claim{margin:10px 0 .4em;font-family:var(--f-display);font-weight:var(--fw-display);letter-spacing:var(--track-display);
  line-height:var(--lh-display);font-size:min(13.36vw,88px);hyphens:manual}
/* slová vchádzajú zdola; padding/margin nechá miesto pre mäkčene a dĺžne (Ť, Ľ, Ď…) */
.w{display:inline-block;overflow:hidden;padding:.16em .05em .12em;margin:-.16em -.05em -.12em;vertical-align:bottom}
.w-in{display:inline-block}
.hl{position:relative;z-index:0;display:inline-block;padding:0 .08em;margin:0 .02em}
.hl::before{content:"";position:absolute;z-index:-1;inset:.1em -.06em -.02em;background:var(--highlight);border-radius:var(--r-highlight);transform-origin:left center}
.lead{margin:0;max-width:42ch;font-size:var(--fs-lead);font-weight:var(--fw-lead);line-height:var(--lh-text);text-wrap:pretty}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px}
.cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:14px;min-height:58px;padding:6px 24px 6px 6px;border-radius:var(--r-pill);
  background:var(--c-white);color:var(--c-ink);text-decoration:none;font-weight:var(--fw-strong);font-size:var(--fs-base);transition:color var(--dur-hover) ease}
.cta::before{content:"";position:absolute;z-index:-1;left:6px;top:6px;bottom:6px;width:66px;border-radius:var(--r-pill);background:var(--cta-bg);
  transition:width var(--dur-ui) var(--ease-out)}
.cta__icon{display:grid;place-items:center;width:66px;height:46px;color:var(--cta-text)}
.cta__icon svg{width:20px;height:20px;transition:transform .5s var(--ease-out)}
.cta:hover{color:var(--cta-text)}
.cta:hover::before{width:calc(100% - 12px)}
.cta:hover .cta__icon svg{transform:translateX(4px)}
.link{font-weight:var(--fw-strong);font-size:15.5px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.link:hover{text-decoration-thickness:3px}
.facts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono)}
.facts li{display:flex;align-items:center;gap:8px}
.facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* --- karta služieb (sklo) --- */
.aside{position:relative;z-index:3}
.glass{color:var(--text-on-blue);background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);backdrop-filter:blur(var(--glass-blur)) saturate(140%)}
.label{margin:0;font-family:var(--f-mono);font-size:var(--fs-mono)}
.card{padding:16px 14px 12px}
.card .label{margin:2px 6px 8px}
.card__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.card__item{position:relative;display:block;padding:10px 12px 10px 18px;border-radius:var(--r-md);text-decoration:none;transition:background var(--dur-hover) ease}
.card__item::before{content:"";position:absolute;left:6px;top:13px;bottom:13px;width:3px;border-radius:3px;background:currentColor;opacity:.35;
  transition:opacity var(--dur-hover) ease,background var(--dur-hover) ease}
.card__item:hover{background:rgba(0,34,54,.25)}
.card__item:hover::before{background:var(--cta-bg);opacity:1}
.card__title{display:block;font-family:var(--f-display);font-weight:var(--fw-title);font-size:var(--fs-title);letter-spacing:var(--track-title);line-height:1.3}
.card__text{display:block;margin-top:2px;font-size:var(--fs-sm);line-height:var(--lh-snug)}

/* ružová kométa obieha okraj karty (rovnaká reč ako kométy okolo kocky). --kometa = uhol, kde začína chvost;
   hlava je o 9° pred ním, takže 324° = hlava vľavo hore pri nadpise (aj pokojový stav pri vypnutom pohybe).
   Svetlo je len na okraji karty, nie pod textom. */
@property --kometa{syntax:"<angle>";inherits:false;initial-value:324deg}
.card{position:relative}
.card::before,.card::after{content:"";position:absolute;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card::before{inset:-1px;padding:1.5px;border-radius:calc(var(--r-lg) + 1px);
  background:conic-gradient(from var(--kometa),transparent 0 58%,rgba(216,57,149,.14) 70%,rgba(216,57,149,.55) 88%,var(--c-pink) 97.5%,transparent 98.5%)}
.card::after{inset:-9px;padding:10px;border-radius:calc(var(--r-lg) + 9px);filter:blur(5px);
  background:conic-gradient(from var(--kometa),transparent 0 72%,rgba(216,57,149,.25) 86%,rgba(216,57,149,.75) 97.5%,transparent 98.5%)}

/* --- klienti --- */
.clients{position:relative;z-index:3;margin-top:auto;padding-top:22px;border-top:1px solid var(--line-on-blue);display:grid;gap:16px}
.clients__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.clients__list img{width:auto;height:calc(var(--h) * .8)}
.cl-domco{--h:24px}.cl-mmwelding{--h:38px}.cl-ingenio{--h:48px}.cl-agw{--h:36px}
.cl-svet{--h:30px}.cl-vaccounting{--h:56px}.cl-kafe{--h:30px}

/* ---------- Počítač (od 960 px) ---------- */
@media (min-width:60em){
  .nav{padding-top:20px}
  .nav__links{display:flex}
  .btn-outline{display:inline-flex}
  .burger{display:none}
  .menu,.menu[open]{display:none}
  .hero__in{--header-h:86px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.6fr);grid-template-rows:1fr auto;
    column-gap:min(4vw,58px);padding-bottom:28px;min-height:max(680px,min(960px,100svh))}
  .copy{grid-column:1;grid-row:1;align-self:center;padding:min(2vw,29px) 0}
  .claim{font-size:min(6.57vw,95px)}
  .aside{grid-column:2;grid-row:1;align-self:center}
  .clients{grid-column:1/-1;grid-row:2;grid-template-columns:auto 1fr;align-items:center;gap:min(4vw,58px)}
  .clients__list{justify-content:space-between;flex-wrap:nowrap;gap:20px min(2.4vw,35px)}
  .bgcube{--s:clamp(260px,29vw,430px);right:calc(var(--s) * -.12);top:50%;translate:0 -50%}
  /* na počítači svetlo obieha vedľa textu, nie pod ním → môže byť výraznejšie */
  .comet{opacity:.8}
  .orbit--b .comet{opacity:.55}
}
/* od 1280 px majú logá klientov plnú výšku (pod tým by sa nezmestili do jedného riadku) */
@media (min-width:80em){
  .clients__list img{height:var(--h)}
}

/* ===========================================================================
   POHYB · pomalý a nerušivý. Iba ak systém nežiada obmedzený pohyb.
   Bez animácií je všetko viditeľné a na svojom mieste (fill-mode: backwards).
   =========================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* vstup: raz pri načítaní */
  .nav{animation:fadeIn 1s ease backwards .1s}
  .logo .lg-e{animation:logoE 1.6s var(--ease-out) backwards .5s}
  .logo .lg-f{animation:logoF 1.6s var(--ease-out) backwards .2s}
  .logo .lg-d{animation:logoD 1.6s var(--ease-out) backwards .35s}
  .logo .lg-w{animation:fadeIn 1.2s ease backwards .6s}
  .menu .logo path{animation:none}   /* v menu sa logo pri každom otvorení znova neskladá */
  .w-in{animation:wordUp var(--dur-enter) var(--ease-out) backwards .25s}
  .w:nth-child(2) .w-in{animation-delay:.34s}
  .w:nth-child(3) .w-in{animation-delay:.43s}
  .w:nth-child(4) .w-in{animation-delay:.52s}
  .w:nth-child(5) .w-in{animation-delay:.61s}
  .hl::before{animation:hlIn 1.1s var(--ease-out) backwards 1.1s}
  .lead,.actions,.facts{animation:fadeUp var(--dur-enter) var(--ease-out) backwards .8s}
  .actions{animation-delay:.95s}
  .facts{animation-delay:1.1s}
  .card{animation:fadeUp 1.3s var(--ease-out) backwards 1.15s}
  /* kométa na karte: so vstupom karty sa rozbehne, za 3 s prejde 450° (rýchly obeh) a plynulo spomalí presne na tempo
     kométy okolo kocky (20°/s = 18 s na obeh) – v 4,2 s, keď sa dokladá kocka. Koniec krivky má sklon
     (1 − .927) / (1 − .45) ≈ .133 × 450°/3 s = 20°/s, takže prechod nemá skok v rýchlosti. */
  .card::before,.card::after{animation:kometaRozbeh 3s cubic-bezier(.4,0,.45,.927) 1.2s both,kometaObeh var(--dur-orbit-a) linear 4.2s infinite}
  .clients{animation:fadeIn 1.6s ease backwards 1.5s}

  /* kocka sa pomaly zloží, potom dýcha a hojdá sa */
  .bgcube .face--left{animation:flyL var(--dur-assemble) var(--ease-out) backwards .3s}
  .bgcube .face--right{animation:flyR var(--dur-assemble) var(--ease-out) backwards .6s}
  .bgcube .face--top{animation:flyT var(--dur-assemble) var(--ease-out) backwards .9s}
  .bgcube__shade{animation:fadeIn 3s ease backwards .5s}
  .bgcube .cube{animation:breathe var(--dur-breathe) var(--ease-soft) 4s infinite}
  .cube-sway{animation:sway var(--dur-sway) var(--ease-soft) infinite alternate}
  .bgcube__orbit{animation:spin var(--dur-glow) linear infinite}
  /* svetlo sa objaví až po zložení kocky; kométa B je zrkadlená, takže letí opačným smerom */
  .orbit{animation:fadeIn 3s ease backwards 3.2s}
  .orbit--a .comet{animation:spin var(--dur-orbit-a) linear infinite}
  .orbit--b .comet{animation:spin var(--dur-orbit-b) linear infinite}

  /* mimo obrazovky sa nekonečné animácie zastavia (šetrí batériu) */
  .hero[data-paused] .bgcube *,.hero[data-paused] .card::before,.hero[data-paused] .card::after{animation-play-state:paused}

  .menu[open]{animation:menuIn .45s var(--ease-out)}
  .site-header[data-anim]{transition:transform .45s var(--ease-out)}
}
@keyframes fadeIn{from{opacity:0}}
@keyframes kometaRozbeh{from{--kometa:324deg}to{--kometa:774deg}}
@keyframes kometaObeh{from{--kometa:774deg}to{--kometa:1134deg}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}}
@keyframes wordUp{from{transform:translateY(118%) rotate(4deg)}}
@keyframes hlIn{from{transform:scaleX(0)}}
@keyframes logoE{from{opacity:0;transform:translateY(-40%)}}
@keyframes logoF{from{opacity:0;transform:translate(-30%,20%)}}
@keyframes logoD{from{opacity:0;transform:translate(30%,20%)}}
@keyframes flyL{from{opacity:0;filter:blur(10px);transform:translateZ(calc(var(--s) * 1.4)) rotateZ(-30deg)}}
@keyframes flyR{from{opacity:0;filter:blur(10px);transform:rotateY(90deg) translateZ(calc(var(--s) * 1.4)) rotateZ(25deg)}}
@keyframes flyT{from{opacity:0;filter:blur(10px);transform:rotateX(90deg) translateZ(calc(var(--s) * 1.4)) rotateZ(-20deg)}}
@keyframes breathe{0%,100%{--breath:0}50%{--breath:.1}}
@keyframes sway{from{transform:rotateY(-16deg) rotateX(4deg)}to{transform:rotateY(16deg) rotateX(-4deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes menuIn{from{opacity:0;transform:translateY(-12px)}}