:root{
  --mouse-x:50%; --mouse-y:50%;
  --bg:#08090b;
  --accent:#BD152E;
  --accent-glow:rgba(189,21,46,.35);
}
html,body{ background:var(--bg); }
body{ font-family:'Inter',sans-serif; overflow-x:hidden; }

/* Bebas Neue headings, uppercase */
.font-display{ font-family:'Bebas Neue',sans-serif; letter-spacing:.02em; font-weight:400 !important; }
h1.font-display, h2.font-display, h3.font-display{ text-transform:uppercase; }
.text-accent{ color:var(--accent); }

/* Header nav link: red underline grows on hover */
.nav-link{ position:relative; }
.nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.nav-link:hover::after{ transform:scaleX(1); }

::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#08090b; }
::-webkit-scrollbar-thumb{ background:#26272b; border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background:#3a3b40; }

/* ---------- Hero cinematic ambiance (fallback / overlay) ---------- */
.hero-ambiance{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.aurora{
  position:absolute; border-radius:50%; filter:blur(80px);
  mix-blend-mode:screen; will-change:transform;
}
.aurora.a1{ width:65vw; height:65vw; left:-15vw; top:-20vw;
  background:radial-gradient(circle,#BD152E 0%,transparent 60%); opacity:.7; animation:drift1 12s ease-in-out infinite; }
.aurora.a2{ width:55vw; height:55vw; right:-15vw; top:0;
  background:radial-gradient(circle,#e0324b 0%,transparent 60%); opacity:.5; animation:drift2 15s ease-in-out infinite; }
.aurora.a3{ width:50vw; height:50vw; left:20vw; bottom:-25vw;
  background:radial-gradient(circle,#9e1024 0%,transparent 65%); opacity:.4; animation:drift3 18s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(8vw,5vw) scale(1.15)} 66%{transform:translate(-3vw,8vw) scale(.95)} }
@keyframes drift2{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-6vw,7vw) scale(1.1)} 66%{transform:translate(5vw,-3vw) scale(1.05)} }
@keyframes drift3{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(4vw,-6vw) scale(1.12)} 66%{transform:translate(-7vw,4vw) scale(.98)} }

/* extra glow layer visible when video is not playing */
.hero-ambiance::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 60% at 50% 40%,rgba(189,21,46,.25),transparent 70%);
  animation:pulse-glow 6s ease-in-out infinite alternate;
}
@keyframes pulse-glow{ from{opacity:.5} to{opacity:1} }

/* moving grid lines to suggest logistics motion */
.hero-grid{
  position:absolute; inset:0; z-index:1; opacity:.10;
  background-image:linear-gradient(to right,#fff 1px,transparent 1px),
                   linear-gradient(to bottom,#fff 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 75%);
  animation:gridpan 24s linear infinite;
}
@keyframes gridpan{ from{background-position:0 0} to{background-position:64px 64px} }

.grain{
  position:absolute; inset:0; z-index:2; opacity:.06; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

video.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:opacity .6s ease; }

/* ---------- Char reveal ---------- */
.char{
  display:inline-block; opacity:0; transform:translateY(105%);
  clip-path:polygon(0 0,100% 0,100% 0,0 0);
  transition:all .85s cubic-bezier(0.16,1,0.3,1);
}
.char.revealed{ opacity:1; transform:translateY(0); clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }

/* ---------- Scroll reveal ---------- */
.animate-on-scroll{ opacity:.01; filter:blur(10px); transform:translateY(24px);
  transition:all 1s cubic-bezier(0.25,0.46,0.45,0.94); }
.animate-on-scroll.in-view{ opacity:1; filter:blur(0); transform:translateY(0); }

/* ---------- Marquee ---------- */
@keyframes scroll-left{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-content{ animation:scroll-left 38s linear infinite; }
.marquee-mask{ mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); }

/* ---------- CTA: running line around the button ---------- */
@property --beam-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.btn-beam-container{ position:relative; }
.beam-border{ position:absolute; inset:-2px; border-radius:9999px; pointer-events:none; z-index:0;
  padding:2px;
  background:conic-gradient(from var(--beam-angle),
    transparent 0turn 0.72turn,
    var(--accent) 0.80turn,
    #ffffff 0.85turn,
    var(--accent) 0.90turn,
    transparent 0.98turn 1turn);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:beam-run 2.8s linear infinite; }
@keyframes beam-run{ to{ --beam-angle:360deg; } }
/* Fallback for browsers without @property: a soft static ring */
@supports not (background: conic-gradient(from var(--beam-angle), red, blue)){
  .beam-border{ background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:none; }
}

/* ---------- Flashlight card ---------- */
.flashlight-card{ position:relative; background-color:rgba(20,21,24,.5); border:1px solid rgba(255,255,255,.08); }
.flashlight-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:3; opacity:0;
  transition:opacity .5s; pointer-events:none;
  background:radial-gradient(650px circle at var(--mouse-x) var(--mouse-y),var(--accent-glow),transparent 40%); }
.flashlight-border{ position:absolute; inset:0; border-radius:inherit; padding:1px; opacity:0; transition:opacity .5s;
  background:radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),rgba(224,50,75,.75),transparent 40%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }
.flashlight-card:hover::before,.flashlight-card:hover .flashlight-border{ opacity:1; }

/* ---------- Segment tile ---------- */
.segment-tile{ position:relative; overflow:hidden; }
.segment-tile .seg-img{ transition:transform 1s cubic-bezier(.2,.8,.2,1); }
.segment-tile:hover .seg-img{ transform:scale(1.08); }

.reduce-motion *{ animation:none !important; }

.step-line{ background:linear-gradient(to right,transparent,rgba(255,255,255,.18),transparent); }

/* Seção 2 - Números: destaque mobile */
@media (max-width:767px){
  #numeros .grid{ display:flex; flex-direction:column; gap:0; }
  #numeros .numeros-highlight{ order:-1; border-bottom:1px solid rgba(255,255,255,.05); }
  #numeros .numeros-highlight:last-of-type{ border-bottom:none; }
  #numeros .numeros-highlight + :not(.numeros-highlight){ border-top:none !important; }
  #numeros .numeros-highlight .font-display{ font-size:3.25rem; line-height:1; }
  #numeros .numeros-highlight p{ font-size:0.8125rem; margin-top:0.75rem; }
}