/* AUREUS · WOW LAYER (pure CSS) — aurora, cards, section decor, nav fix */

/* ================== Aurora background (nenarocne) ================== */
body::before{
  content:"";
  position:fixed; inset:-20%;
  background:
    conic-gradient(from 0deg at 30% 10%, rgba(243,113,3,.18), transparent 40%),
    conic-gradient(from 180deg at 70% -10%, rgba(255,255,255,.06), transparent 50%);
  filter: blur(60px) saturate(110%);
  opacity:.35; z-index:-1;
  animation: aurora-spin 48s linear infinite;
}
@keyframes aurora-spin{ to{ transform:rotate(360deg) } }

/* ===================== NAV (sticky glass + underline + progress) ===================== */
.nav{ position: relative !important; top:0 !important; top:0; z-index:2147482000; }
.nav.scrolled{
  background: rgba(11,18,32,.88);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  border-bottom-color: rgba(255,255,255,.10);
}

/* nav hard fix – stabilne medzery, CTA vpravo, jazyky za CTA */
.nav{ position:relative; }
.nav .nav-inner{ height:64px!important; display:flex!important; align-items:center!important; gap:16px }
.nav .nav-inner .menu{
  flex:1 1 auto!important; display:flex!important; align-items:center!important;
  min-width:0!important; flex-wrap:nowrap!important; gap:18px!important;
}
.nav .nav-inner .menu > *{ flex:0 0 auto; float:none!important }
.nav .nav-inner .menu > a,
.nav .nav-inner .menu > .btn,
.nav .nav-inner .menu > .btn-outline,
.nav .nav-inner .menu > .lang button{
  display:inline-flex; align-items:center; height:40px; line-height:40px; padding:0 4px; white-space:nowrap;
}
.nav .nav-inner .menu > .nav-track{
  order:0!important; display:flex!important; align-items:center!important; flex:1 1 auto!important; min-width:0!important;
  gap:18px!important; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.nav .nav-inner .menu > .nav-track::-webkit-scrollbar{ display:none }
.nav .nav-inner .menu > a + a,
.nav .nav-inner .menu > .nav-track a + a{ margin-left:16px }
.nav .nav-inner .menu > .btn,
.nav .nav-inner .menu > .btn-primary,
.nav .nav-inner .menu > .cta{ order:99!important; margin-left:auto!important }
.nav .nav-inner .menu > .lang{
  order:100!important; display:inline-flex!important; gap:8px!important; align-items:center!important;
  padding-left:12px!important; border-left:1px solid rgba(255,255,255,.12)!important;
}
.nav .menu a:not(.btn):not(.btn-outline){
  opacity:.85; border-bottom:2px solid transparent; padding-bottom:2px;
  transition:opacity .15s ease, border-color .15s ease;
}
.nav .menu a:not(.btn):not(.btn-outline):hover,
.nav .menu a.active{ opacity:1; border-bottom-color:rgba(243,113,3,.9) }

/* magic underline element (JS nastavuje sirku/poziciu) */
#nav-underline{
  position:absolute; left:0; bottom:0; height:2px; width:0; opacity:0; pointer-events:none;
  background:linear-gradient(90deg,#ffb37e,#F37103); border-radius:2px;
  box-shadow:0 6px 18px rgba(243,113,3,.28);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), width .25s cubic-bezier(.2,.8,.2,1), opacity .18s;
}

/* scroll progress linka dole v NAV (JS meni width) */
#scroll-line{
  position:absolute; left:0; right:auto; bottom:0; height:3px; width:0;
  background:linear-gradient(90deg,#F37103,#ff9950);
  box-shadow:0 0 18px rgba(243,113,3,.55);
  pointer-events:none;
}

/* anchor offset */
[id]{ scroll-margin-top: 76px }

/* ========================== Buttons (accent) ========================== */
.btn, .btn-outline{ position:relative; isolation:isolate; transition:transform .2s, box-shadow .2s }
.btn{
  background: linear-gradient(135deg,#F37103,#ff9950);
  color:#fff;
  box-shadow: 0 8px 20px rgba(243,113,3,.28);
}
.btn-outline{
  background: linear-gradient(#0b1220,#0b1220) padding-box,
              linear-gradient(135deg, rgba(243,113,3,.8), rgba(255,255,255,.25)) border-box;
  border:1px solid transparent; color:#e6e8ee;
}
.btn:hover,.btn-outline:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(243,113,3,.35) }

/* ==================== Cards (glassy + gradient border) ==================== */
.card{
  position:relative;
  transform-style:preserve-3d;
  will-change: transform, box-shadow;
  transition: transform .15s ease, box-shadow .2s ease;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02)) padding-box,
             linear-gradient(135deg, rgba(255,255,255,.10), rgba(243,113,3,.25)) border-box;
  border:1px solid transparent;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  padding:22px;
  backdrop-filter:saturate(120%) blur(4px);
}
.card .shine{
  pointer-events:none; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(600px 200px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 40%);
  opacity:0; transition:opacity .2s ease;
}
.card:hover .shine{ opacity:.25 }

/* ====================== Reveal (jemny nabeh) ====================== */
.reveal{ opacity:0; transform:translateY(18px) scale(.98) }
.reveal.show{ opacity:1; transform:none; transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1) }
.reveal.d1{ transition-delay:.06s } .reveal.d2{ transition-delay:.12s } .reveal.d3{ transition-delay:.18s }

/* ================== CTA panel (glow) ================== */
#beta .inner{
  background: linear-gradient(215deg, rgba(243,113,3,.14), rgba(255,255,255,.02));
  border:1px solid rgba(243,113,3,.28);
  box-shadow: 0 14px 45px rgba(243,113,3,.12);
  border-radius:16px;
}

/* ================ Hero scroll cue (bouncing) ================ */
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  font-size:12px; color:#9aa4b2; display:flex; gap:6px; align-items:center; opacity:.9;
  animation: cue-bob 1.8s ease-in-out infinite;
}
@keyframes cue-bob{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,-6px) } }

/* ================= Reduced motion hygiene ================= */
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none }
  .reveal{ opacity:1; transform:none }
}

/* ======= istota pre kliky na hero ovladace / overlay ======= */
.video-controls{ z-index:50; pointer-events:auto }
.video-controls .ctrl{ pointer-events:auto }
.overlay{ pointer-events:none }
.hero video{ pointer-events:none }

/* ===================== HERO clean ===================== */
.hero{ position:relative; overflow:hidden; min-height:72vh; display:block }
.hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
.hero .hero-content{ position:relative; z-index:2; max-width:980px; margin:0 auto; padding:48px 20px; text-align:center }
.hero .hero-content::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1;
  width:clamp(560px,72vw,1100px); height:clamp(240px,40vh,540px); border-radius:36px;
  background: radial-gradient(closest-side, rgba(8,12,20,.72), transparent 68%),
              radial-gradient(1000px 480px at 50% 50%, rgba(255,255,255,.06), transparent 65%);
  filter:blur(22px); pointer-events:none; opacity:.95;
}

/* ================== Section decor (mriezka + gradienty) ================== */
section{ position:relative }
section::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(700px 360px at 12% -10%, rgba(243,113,3,.12), transparent 65%),
    radial-gradient(900px 480px at 120% 25%, rgba(96,165,250,.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/22px 22px;
  opacity:.40;
}
section .wrap{ position:relative; z-index:1 }

/* centralny orb pre safety a obs (staticky v strede) */
#safety::after, #obs::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(640px 420px at 50% 50%, rgba(243,113,3,.18), transparent 70%),
    radial-gradient(900px 360px at 50% 50%, rgba(255,255,255,.03), transparent 60%);
  filter:blur(22px); opacity:.34;
}

/* =================== Press strip (pod hero) =================== */
#press-strip{
  height:44px;
  display:flex; align-items:center;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  overflow:hidden; isolation:isolate; z-index:1;
}
#press-strip .rail{
  display:flex; gap:48px; align-items:center;
  width:max-content; padding:10px 18px;
  will-change: transform;
}
#press-strip .item{
  font:700 12px/1 Inter,system-ui,sans-serif;
  letter-spacing:.10em; text-transform:uppercase;
  color:#cfd8e3; opacity:.82; white-space:nowrap;
}
/* volitelna CSS animacia (ak je obsah duplikovany v DOM) */
@keyframes press-marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
#press-strip.css-marquee .rail{ animation:press-marquee 26s linear infinite }
#press-strip.css-marquee:hover .rail{ animation-play-state:paused }

/* ==================== Nadpisy sekcii – akcent ==================== */
.section-head, #about h2{
  background:linear-gradient(90deg,#ffffff 0%,#ffe6d4 45%,#F37103 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-head::after{
  content:""; display:block; width:88px; height:2px; margin:8px auto 0;
  background:linear-gradient(90deg, rgba(243,113,3,0), rgba(243,113,3,.85), rgba(243,113,3,0));
  opacity:.9;
}

/* ===================== Tabulky – decentny hover ===================== */
.table{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; overflow:hidden;
}
.table thead th{
  position:sticky; top:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter:saturate(120%) blur(4px);
  font-weight:800;
}
.table tbody tr:hover td{
  background:rgba(255,255,255,.03);
  transition:background .15s ease;
}

/* ===================== FX mouse glow (global) ===================== */
.fx-mouse-spot{
  position:fixed; inset:0; pointer-events:none; z-index:2147481500; mix-blend-mode:screen; contain:paint;
  background:
    radial-gradient(160px 160px at var(--cx,50%) var(--cy,40%), rgba(255,255,255,.12), rgba(243,113,3,.32) 42%, transparent 70%),
    radial-gradient(560px 440px at var(--cx,50%) var(--cy,40%), rgba(243,113,3,.12), transparent 72%);
  opacity:.30; transition:opacity .18s ease;
}
body.hero-glow-off .fx-mouse-spot{ opacity:0 !important }
@media (max-width:900px){ .fx-mouse-spot{ opacity:.22 } }

/* ===================== Mobile tweaks ===================== */
@media (max-width:1200px){ .nav .nav-inner .menu{ gap:12px } }
@media (max-width:980px){
  .nav .nav-inner .menu{ flex-wrap:wrap!important; row-gap:8px }
  .nav .nav-inner .menu > .btn,
  .nav .nav-inner .menu > .btn-primary,
  .nav .nav-inner .menu > .cta{ order:999!important; margin-left:0!important }
  .nav .nav-inner .menu > .lang{ order:1000!important }
}
@media (prefers-reduced-motion: reduce){
  #press-strip .rail{ transform:none !important; animation:none !important }
}