.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--bg) 100%);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;min-height:clamp(560px,46vw,780px);padding-block:48px 64px}
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:26px;min-width:0;padding-block:24px}
.hero .eyebrow{color:var(--steel);letter-spacing:.42em}
.hero .eyebrow::before{display:none}
.hero h1{font-size:clamp(44px,6.2vw,84px);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.hero h1 > span{display:block}
.hero h1 .hl{color:var(--cyan-strong)}
.hero h1 .dot{display:inline;color:var(--cyan)}
.hero .lead{max-width:42ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}
.hero-ctas .btn{padding:16px 30px;font-size:16px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--f-mono);font-size:13px;color:var(--steel)}
.hero-meta span{display:flex;align-items:center;gap:8px}
.hero-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan)}

/* ---------- 3D logo v "architektonickej" scéne ----------
   Stĺpy, lúč svetla a podlaha sú čisté CSS, logo je PNG s priehľadnosťou.
   hero.js nastavuje --rx/--ry podľa polohy myši (jemné naklopenie). */
.hero-visual{position:absolute;top:0;right:0;bottom:0;width:min(54vw,1160px);perspective:1200px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}

.hero-scene{position:absolute;inset:0;overflow:hidden;
  background:
    linear-gradient(180deg,transparent 0,transparent 74%,#e7edf1 74%,#f6f8fa 100%),
    linear-gradient(90deg,#f7f9fb 0,#eef2f5 100%)}
/* svetlé stĺpy v pozadí */
.hero-scene::before{content:"";position:absolute;left:0;right:0;top:0;height:74%;
  background:repeating-linear-gradient(90deg,
    transparent 0 120px,
    rgba(255,255,255,.95) 120px 150px,
    rgba(214,223,230,.55) 150px 156px,
    transparent 156px 230px);
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 100%),linear-gradient(90deg,transparent 0,#000 35%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 40%,transparent 100%),linear-gradient(90deg,transparent 0,#000 35%);
  mask-composite:intersect}
/* šikmý lúč svetla, pomaly "dýcha" */
.hero-scene::after{content:"";position:absolute;inset:-20% -10%;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.85) 44%,rgba(255,255,255,0) 58%);
  animation:beam 9s ease-in-out infinite alternate}
@keyframes beam{from{transform:translateX(-6%);opacity:.7}to{transform:translateX(6%);opacity:1}}
/* hrana podlahy */
.hero-floor{position:absolute;left:0;right:0;top:74%;height:1px;background:linear-gradient(90deg,transparent,rgba(160,178,190,.55) 30%,rgba(160,178,190,.25))}

.hero-mark{position:absolute;left:46%;top:47%;width:min(560px,36vw);aspect-ratio:1;translate:-50% -50%}
.hero-glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(18,198,230,.32),transparent 65%);filter:blur(30px);animation:glow 6s ease-in-out infinite}
@keyframes glow{50%{opacity:.55;transform:scale(.94)}}

.hero-tilt{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hero-float{position:relative;width:100%;height:100%;animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.hero-float img{display:block;width:100%;height:100%;filter:drop-shadow(0 30px 40px rgba(15,27,35,.22))}
/* odlesk, ktorý občas prebehne po logu — maskovaný tvarom loga */
.hero-shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%) no-repeat;
  background-size:250% 100%;background-position:150% 0;
  -webkit-mask:url(/assets/img/logo-mark.webp) center/contain no-repeat;mask:url(/assets/img/logo-mark.webp) center/contain no-repeat;
  animation:shine 7s ease-in-out 1.2s infinite}
@keyframes shine{0%{background-position:150% 0}25%,100%{background-position:-50% 0}}

/* odraz na podlahe */
.hero-reflect{position:absolute;left:46%;top:calc(47% + min(560px,36vw) / 2 - 6%);width:min(560px,36vw);aspect-ratio:1;translate:-50% 0;
  transform:scaleY(-1);opacity:.16;filter:blur(2px);
  -webkit-mask-image:linear-gradient(0deg,#000 0,transparent 35%);mask-image:linear-gradient(0deg,#000 0,transparent 35%)}

/* úvodné objavenie */
.hero-mark,.hero-reflect{animation:mark-in 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes mark-in{from{opacity:0;scale:.92}}
.hero-reflect{animation-name:reflect-in}
@keyframes reflect-in{from{opacity:0}}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:8px;min-height:0;padding-block:0 48px}
  .hero-visual{position:relative;width:auto;height:min(92vw,420px);order:-1;margin-inline:calc(-1 * var(--gx)) calc(-1 * var(--gx-r));
    -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 18%);mask-image:linear-gradient(0deg,transparent 0,#000 18%)}
  .hero-mark,.hero-reflect{left:50%;width:min(300px,68vw)}
  .hero-mark{top:46%}
  .hero-reflect{top:calc(46% + min(300px,68vw) / 2 - 6%)}
  .hero-copy{padding-block:0}
}
@media (prefers-reduced-motion:reduce){
  .hero-scene::after,.hero-glow,.hero-float,.hero-shine,.hero-mark,.hero-reflect{animation:none}
}