:root{
  --darkblue:#0011ff;
  --gold:#d4af37;
  --purple:#7f5cff;
  --blue:#00b3ff;
  --turquoise:#00ffd5;
  --glass:rgba(255,255,255,0.08);
}
*
{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}
body
{
background:#050505;
}

.marquee{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:45px;
 background:black;
 backdrop-filter:blur(10px);
 overflow:hidden;
 z-index:999;
 }
.marquee-track{

 display:flex;
 width:max-content;
 animation:marquee 50s linear infinite
}
.marquee span{
font-weight: 900;
 display:inline-block;
 padding:0 40px;
 line-height:38px;
 font-family:'Orbitron',sans-serif;
 font-size:1.5rem;
 letter-spacing:2px;
 white-space:nowrap;
 background:linear-gradient(135deg,var(--turquoise),var(--blue));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent
}
@keyframes marquee{
 from{transform:translateX(0)}
 to{transform:translateX(-100%)}
}
/* HERO */
.hero
{
margin-top: 55px;
min-height:90vh;
display:flex;
align-items:center;
justify-content:center;
background:#000;
overflow:hidden;
}

.hero-landing
{
display:grid;
grid-template-columns:1.1fr .9fr;
align-items:center;
gap:40px;
max-width:1300px;
width:100%;
padding:60px 40px;
}
.hero-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  opacity:0;
  transform:translateY(20px);
  animation:heroReveal 1.2s ease forwards;
}

.hero-watch{
text-align: center;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  margin:0 auto;
  opacity:0;
  animation:watchReveal 1.4s ease .6s forwards;
}

.vn-watch
{

margin-bottom:20px;
display:flex;
justify-content:center;
text-align: center;
}

.watch-frame
{
width:300px;
height: 300px;
border-radius:48px;
background:linear-gradient(145deg,#080808,#2b2b2b);
box-shadow:0 0 50px rgba(3, 232, 240, 0.9),0 0 70px rgba(92, 255, 255, 0.5);
padding:16px;position:relative;
}
.watch-frame:after{
  content:"";
  position:absolute;
  width:14px;
  height:50px;
  background:#000;
  border-radius:10px;
  top:50%;
  right:-18px;
  transform:translateY(-50%);
  box-shadow:inset 0 0 4px rgba(10, 10, 10, 0.15);
}

.hero-watch img
{
max-width:360px;
width:100%;
display:block;
margin:auto;
padding-bottom:0px;
filter:drop-shadow(0 0 40px rgba(0,255,213,.45)) drop-shadow(0 0 80px rgba(127,92,255,.35));
animation:float 6s ease-in-out infinite, breathe 4.5s ease-in-out infinite;
will-change:transform
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes breathe{0%,100%{filter:drop-shadow(0 0 35px rgba(0,255,213,.4))}50%{filter:drop-shadow(0 0 60px rgba(0,255,213,.8))}}
@keyframes heroReveal{to{opacity:1;transform:translateY(0)}}
@keyframes watchReveal{to{opacity:1}}
@media(max-width:900px){
  .hero-landing{
    grid-template-columns:1fr;
    justify-items:center;
    align-items:center;
    text-align:center;
  }
  .hero-watch{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    margin:24px auto 0;
  }
  .hero-watch img{
    display:block;
    margin:0 auto;
    max-width:280px;
  }
}

@media(max-width:600px){.watch-frame{
  position:relative;
  width:300px;
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
}

@media (min-width: 768px){
  .watch-frame{
    width:380px;
    height:470px;
  }
}

@media (min-width: 1400px){
  .watch-frame{
    width:410px;
    height:500px;
  }
}
}



.watch-screen{
  width:100%;
  height:100%;
  border-radius:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at top,#000000,#000);
  box-shadow:
    inset 0 0 0 2px rgba(192,138,82,.75),
    inset 0 0 28px rgba(0,255,213,.18);
  animation:borderPulse 6s linear infinite;
}

.watch-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.watch-content.ui{gap:10px;padding:6px}
.ui-brand span{
  font-family:'Orbitron',sans-serif;
  font-size:8rem;
  font-weight:900;
  letter-spacing:2px;
  background:linear-gradient(180deg,#bffffa,#00ffd5,#00b3ff,#007cff);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 2px 0 rgba(0,255,213,.9),
    0 6px 22px rgba(0,179,255,.9),
    0 14px 48px rgba(0,120,255,.95);
  transform:perspective(600px) rotateX(10deg);
  animation:vnGlow 5s ease-in-out infinite;
  will-change:transform,filter;
}

.ui-brand .vn-sub{
  font-family:'Orbitron',sans-serif;
  font-size:2.2rem;
font-weight:900;
  letter-spacing:2.5px;
  background:linear-gradient(180deg,#fff2b0,#ff9f1c,#ff3d00,#ff9f1c);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 0 12px rgba(255,160,0,.9),
    0 0 24px rgba(255,90,0,.9),
    0 0 36px rgba(255,40,0,.8);
  animation:fireGlow 4s ease-in-out infinite, glitch 3.5s steps(2,end) infinite;
  position:relative;
}



.hero-title{
  font-family:'Orbitron',sans-serif;
  font-size:3.6rem;
  letter-spacing:3px;
  color:#fff;
  text-shadow:0 0 50px rgba(0,179,255,.6),0 0 50px rgba(127,92,255,.5);
}
.hero p{margin:18px 0 0;font-size:1rem;font-family:'Orbitron',sans-serif;letter-spacing:1px;color:#ddd;text-shadow:0 0 24px var(--purple)}
.hero button{margin-top:25px}

button
{
background:linear-gradient(135deg, var(--turquoise), var(--blue));
border:none;
padding:8px 16px;
border-radius:30px;
font-size:medium;
 font-weight:bold;
cursor:pointer;
transition:.35s;
 box-shadow:0 2px 0 #ffb347,0 4px 8px rgba(255,120,0,.8),0 0 12px rgba(255,60,0,.9);
 }
button:hover
{
background:#000;
color:var(--gold);
box-shadow:0 0 30px var(--purple),0 0 50px var(--blue)
}
/* FIX CENTRADO TOTAL RELOJ HERO */
.hero{display:flex;align-items:center;justify-content:center}
.hero-landing{width:100%;display:grid;place-items:center}
.hero-watch{position:static !important;left:auto !important;transform:none !important;margin:0 auto !important;display:flex;align-items:center;justify-content:center}
.hero-watch img{margin:0 auto;display:block}
@media(max-width:900px){
  .hero{min-height:100vh}
  .hero-landing{padding:40px 20px}
}

@keyframes glitch{
  0%{transform:translate(0)}
  15%{transform:translate(-1px,1px)}
  30%{transform:translate(1px,-1px)}
  45%{transform:translate(-2px,0)}
  60%{transform:translate(2px,1px)}
  75%{transform:translate(-1px,-1px)}
  100%{transform:translate(0)}
}
  
@keyframes fireGlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.badge{
background:linear-gradient(135deg, var(--turquoise), var(--blue));
border:none;
padding:8px 16px;
border-radius:30px;
font-size: medium;
margin-left: 20px;
 font-weight:bold;
cursor:pointer;
transition:.35s;
 box-shadow:0 2px 0 #ffb347,0 4px 8px rgba(255,120,0,.8),0 0 12px rgba(255,60,0,.9);

}
.badge:hover{
  background:#000;
color:var(--gold);
box-shadow:0 0 30px var(--purple),0 0 50px var(--blue)

}

.footer{
 font-size:.8rem;
 color:#a5a4a4;
 
 text-align:center;
 padding:30px 20px;
 background:var(--glass);
 backdrop-filter:blur(18px);
 border-radius:30px;
 box-shadow:0 0 60px rgba(0,179,255,.25)
}
/* VIDEO MODAL */

.video-modal{position:fixed;inset:0;background:rgba(0,0,0,.95);display:none;justify-content:center;align-items:center;z-index:9999; }
.video-modal.active{display:flex}
.video-modal video{max-width:95%;max-height:95%;border-radius:18px; box-shadow:0 2px 0 #ffb347,0 4px 8px rgba(255,120,0,.8),0 0 12px rgba(255,60,0,.9);}