/* Reset básico */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none !important;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* Remove visible selection highlight */
::selection { background: transparent !important; color: inherit !important; }
::-moz-selection { background: transparent !important; color: inherit !important; }

/* Make form controls non-selectable too (explicit) */
input, textarea, select, button, [contenteditable] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none !important; }

:root{
  --bg:#0b0b0c; /* mais escuro */
  --panel:#0f1113;
  --muted:#a8b3b8;
  --accent: #8b0000; /* dark red */
  --accent-2: #b22222; /* firebrick */
  --glass:rgba(255,255,255,0.03);
  --card:#0f1114;
  --gap:24px;
  --container-max:1000px; /* reduzir largura do site para ficar mais compacto */
  --line-duration: 4s; /* duração única para todas as underlines */
  --hero-gap:220px; /* larger central gap to accommodate the button and match visual */
  font-family: 'Inter', "Segoe UI", Roboto, Arial, sans-serif;
}

/* Fundo texturizado (substituir por assets/images/bg.jpg se tiver) */
body{
  min-height:100vh;
  background-color:var(--bg);
  background-image: url('assets/images/bg3.svg');
  background-size:cover;
  background-position:center;
  color:#eaeaea;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
  background-blend-mode:overlay;
}

/* Remove custom cursor styles and restore default cursor */
body{cursor:auto}
.custom-cursor{display:none !important}

/* Center main container and content */
.container{width:90%;max-width:var(--container-max);margin:0 auto;}
body{display:block}

/* Header */
header{padding:26px 0;background:linear-gradient(180deg,rgba(0,0,0,0.35),transparent)}
header .container{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:800;letter-spacing:2px;font-size:1.2rem;display:inline-block}
nav{float:right}
nav ul{display:flex;gap:22px;list-style:none;align-items:center}
nav a{color:#ddd;text-decoration:none;font-weight:600}
nav a:hover{color:var(--accent)}

/* Hero */
.hero{padding:40px 0 20px;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,0.22),transparent)}
.hero h1{font-size:2.6rem;margin-bottom:10px}
.hero p{color:var(--muted);margin-bottom:18px}
.btn{display:inline-block;background:var(--accent);color:#111;padding:12px 28px;border-radius:28px;text-decoration:none;font-weight:700}
.btn:hover{background:var(--accent-2)}

/* Large hero/banner inspirado no mockup */
.large-hero{
  min-height:100vh; /* occupy full viewport */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.hero-large-inner{max-width:1400px;width:100%;padding:80px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-head{display:flex;align-items:center;gap:20px;justify-content:center}
.large-title{font-size:clamp(96px,18vw,220px);margin:0}
.hero-sub{position:static;right:auto;top:auto;transform:none;margin-top:8px;color:#fff;font-weight:700;letter-spacing:1px;font-size:14px}
.hero-underline{
  width:100%;max-width:1400px;height:6px;border-radius:8px;margin-top:34px;overflow:visible;
}
.hero-underline::before, .hero-underline::after{
  content:'';position:absolute;top:0;height:100%;background:linear-gradient(90deg,#ff6b6b,#b22222);border-radius:6px;
  /* stronger, softer glow */
  box-shadow:0 18px 60px rgba(178,34,34,0.25), 0 6px 18px rgba(0,0,0,0.6);
  filter:blur(0.6px);
}
.hero-underline::before{left:0;right:calc(50% + var(--hero-gap)/2)}
.hero-underline::after{right:0;left:calc(50% + var(--hero-gap)/2)}

.hero-scroll{
  width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#071415;text-decoration:none;
  box-shadow:0 14px 40px rgba(0,0,0,0.6), 0 8px 26px rgba(178,34,34,0.16);z-index:80;position:relative;margin-left:12px;margin-top:-18px;
}
.hero-scroll:hover{transform:translateY(-2px);box-shadow:0 18px 48px rgba(0,0,0,0.7), 0 10px 30px rgba(178,34,34,0.22)}

/* ensure hero appears behind cursor */
.large-hero, .hero-large-inner{z-index:1}

/* Hero spacing fixes */
.large-title{font-size:clamp(48px,12vw,120px);line-height:0.95;margin:0 0 10px 0}
.hero-sub{margin-top:10px;font-size:15px}
.hero-large-inner{z-index:2}

/* Tipografia para títulos */
h1,h2,h3{
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight:800;
  color: #ffffff;
  line-height:1.1;
}

/* Layout 3 col -> 2 col behavior, ensure FAQ + CONFIG sit side-by-side */
.three-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;padding:0}

/* Remove forced grid placement for .config so it follows DOM (now next to FAQ) */
.config{grid-column:auto;grid-row:auto}

/* Reduce bottom spacing on sections to avoid large gap */
.faq, .specs, .config{margin-bottom:0;padding-bottom:18px}

/* Section titles with underline: make width match text and extend slightly */
.section-title, .socials-title {
  overflow: hidden;
  position: relative;
  display: inline-block; /* match underline to text width */
  padding-bottom: 12px;
}
.section-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  /* match the text width and extend a bit to the right for the 'a little beyond' effect */
  width: calc(100% + 1.2rem);
  background: linear-gradient(90deg,var(--accent),transparent);
  opacity: 0.95;
  transform: translateX(-6px);
  animation: slideX var(--line-duration) ease-in-out infinite;
  will-change: transform;
  border-radius: 3px;
  pointer-events: none;
}
.socials-title::after{
  /* same behavior for socials headings */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: calc(100% + 1.2rem);
  background: linear-gradient(90deg,var(--accent),transparent);
  opacity: 0.95;
  transform: translateX(-6px);
  animation: slideX var(--line-duration) ease-in-out infinite;
  will-change: transform;
  border-radius: 3px;
  pointer-events: none;
}

/* FORCE: Section underlines must be red — highest precedence to avoid being overridden */
.container .section-title::after,
.container .socials-title::after,
.section-title::after,
.socials-title::after {
  background: linear-gradient(90deg, #b22222, #9b0000) !important;
  height: 4px !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  border-radius: 3px !important;
  box-shadow: 0 6px 18px rgba(0,34,34,0.06) !important;
  width: calc(100% + 1.2rem) !important;
}

/* FAQ column */
.faq-list{display:flex;flex-direction:column;gap:18px}
.card{background:#000 !important;padding:18px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.6);overflow:hidden}
.card .q{width:100%;text-align:left;background:transparent;border:0;color:#fff;font-weight:800;padding:0 0 8px;cursor:default;font-size:1rem;margin:0}
.card h3.q{margin:0;padding:0;color:#fff;font-size:1rem;font-weight:800}
.card .a{background:transparent;color:#fff;padding:12px;border-radius:6px;margin-top:10px}

/* Specs column */
.spec-list,.spec-list li{list-style:none}
.spec-list li{display:flex;gap:18px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.label{font-weight:800;width:140px;color:#fff}
.value{color:var(--muted);flex:1}

/* Contact */
.contact{padding:30px 0}
.contact-form{display:grid;gap:12px;max-width:600px}
.contact-form label{display:flex;flex-direction:column;color:var(--muted);font-weight:600}
.contact-form input, .contact-form textarea{margin-top:6px;padding:10px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:#fff}

/* Footer */
footer{padding:28px 0;text-align:center;color:var(--muted)}
footer .social{margin-top:12px;display:flex;gap:12px;justify-content:center}
.footer-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,0.02);color:var(--muted);text-decoration:none}
.footer-icon:hover{background:var(--accent);color:#071415}

/* Socials section */
.socials{padding:56px 0 34px;background:rgba(0,0,0,0.15)}
.socials-title{font-family:'Poppins','Inter',sans-serif;font-size:2.4rem;color:#fff;font-weight:900;letter-spacing:2px;margin-bottom:18px;position:relative}
.socials-title::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  height:4px;
  width:40%;
  background:linear-gradient(90deg,var(--accent),transparent);
  opacity:0.95;
  transform:translateX(-8%);
  animation:slideX var(--line-duration) ease-in-out infinite;
  will-change:transform;
  border-radius:3px;
  pointer-events:none;
}

.socials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:18px;align-items:center;justify-items:center;margin-top:20px}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:10px;background:rgba(255,255,255,0.03);color:#fff;text-decoration:none;font-size:34px}
.social-link img{width:32px;height:32px;filter:brightness(1.2) invert(1) saturate(0)}
.social-link i{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6))}

/* Red download button styling (no glow) */
.config .download{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--accent) !important;
  color:#ffffff !important;
  padding:10px 16px !important;
  border-radius:10px !important;
  font-weight:800 !important;
  text-decoration:none !important;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease !important;
}
.config .download .icon-download{ margin-right:8px; display:inline-flex; align-items:center }
.config .download:hover{ background:var(--accent-2) !important; transform:translateY(-2px) !important; box-shadow:0 12px 36px rgba(178,34,34,0.12) !important }

/* Animações e transições */
*{transition: color .18s ease, background .18s ease, transform .12s ease}

header{opacity:0;transform:translateY(-8px);animation:fadeInDown .6s .2s forwards}
@keyframes fadeInDown{to{opacity:1;transform:none}}

.hero h1{opacity:0;transform:translateY(12px);animation:revealUp .8s .3s forwards}
.hero p{opacity:0;transform:translateY(10px);animation:revealUp .8s .45s forwards}
@keyframes revealUp{to{opacity:1;transform:none}}

.card{transform:translateY(6px);transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s}
.card:hover{transform:translateY(0);box-shadow:0 14px 40px rgb(0, 0, 0)}

.social-link{transform:translateY(8px);transition:transform .22s ease, box-shadow .22s}
.social-link:hover{transform:translateY(0);box-shadow:0 10px 30px rgba(0,0,0,0.6);background:var(--accent)}

/* subtle parallax background (pure CSS) */
body::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.08),transparent);pointer-events:none;z-index:0}

/* Video background container (overlay over SVG bg) */
.bg-video-wrap{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg-video-wrap video{width:100%;height:100%;object-fit:cover;filter:brightness(0.25) contrast(1.02)}

/* Painel escuro para conteúdo principal */
.faq, .specs, .socials, main#main-content {
  background: rgba(0,0,0,0.85);
  color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  overflow: hidden; /* evita que pseudo-elements animados saiam fora do painel */
  position: relative; /* referencia para pseudo-elements se necessário */
}

/* Garantir que titles não deixem a linha ultrapassar */
.section-title, .socials-title, .hero-underline{overflow:hidden;position:relative;display:block}

/* Animação mais moderada e oscilante (mantém a linha dentro do título) */
@keyframes slideX{
  0%{transform:translateX(-8%)}
  50%{transform:translateX(8%)}
  100%{transform:translateX(-8%)}
}

/* Hero underline refinado (movimento mais contido) */
.hero-underline::before{content:'';position:absolute;left:0;top:0;height:100%;width:36%;background:linear-gradient(90deg,var(--accent),rgba(255,255,255,0.06));transform:translateX(-8%);animation:slideX var(--line-duration) ease-in-out infinite;will-change:transform}

/* Hide navbar in the header only (do not hide all nav elements */
header nav{display:none !important}

/* Two-column layout using explicit left/right columns */
.three-col{display:grid;grid-template-columns:1fr 420px;gap:20px;align-items:start;padding:0}
.col.left{grid-column:1}
.col.right{grid-column:2;display:flex;flex-direction:column;gap:18px}

/* Ensure CONFIG sits below MAIN PC inside the right column */
.config{order:2}
.specs{order:1}

/* Move socials up to free space (reduce margin) */
.socials{padding:28px 0 20px;background:rgba(0,0,0,0.12);margin-top:10px}

/* Hero underline explicitly larger for hero title only */
.hero-underline{height:6px;width:95%;background:transparent;margin:12px auto;border-radius:12px;position:relative;overflow:hidden}
.hero-underline::before{content:'';position:absolute;left:0;top:0;height:100%;width:45%;background:linear-gradient(90deg,var(--accent),rgba(255,255,255,0.06));transform:translateX(-6px);animation:slideX var(--line-duration) ease-in-out infinite;will-change:transform}

/* Headings underline match text width (keeps previous rule) */
.section-title, .socials-title{display:inline-block}
.section-title::after{width:calc(100% + 1.2rem)}
.socials-title::after{width:calc(100% + 1.2rem)}

@media (max-width:900px){
  .three-col{grid-template-columns:1fr;gap:18px}
  .col.right{grid-column:1}
  .hero-underline{width:90%}
}

/* Forçar rendimentos mais leves em mobile */
@media (max-width:680px){
  .large-title{font-size:56px}
  .hero-underline::before, .section-title::after, .socials-title::after{animation-duration:4.2s}
  .section-title::after{width:60%}
  .hero-underline{width:90%}
}

/* Ensure both left and right columns start content at the same vertical position */
.col.left, .col.right { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start }
/* Make each immediate section full width and remove accidental top gaps */
.col.left > section, .col.right > section { width:100%; margin-top:0; padding-top:0 }
/* Consistent top padding for panel sections to avoid visual offset */
.faq, .specs, .config { padding-top:24px; padding-bottom:18px }
/* Ensure section titles don't add unexpected top margin */
.section-title, .socials-title { margin-top:0 }

/* Reserve space for the BRNX heading area so it's visually separated */
.large-hero{min-height:220px;display:flex;align-items:center;justify-content:center;padding-bottom:6px}
.hero-large-inner{padding:28px 0}
.large-title{margin-bottom:6px}

/* Socials above main: reduce width and give clear separation from main */
.socials.container{margin-top:12px;margin-bottom:18px;padding:20px;background:rgba(0,0,0,0.12);border-radius:10px}

/* Make CONFIG visually identical to MAIN PC */
.config, .specs{background:transparent;padding:0;border-radius:0}
.spec-list{background:transparent;padding:0;margin:0}
.spec-list li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.config .download{display:block;margin:18px auto 0 auto;text-align:center}

/* Center the download button within its panel and match button widths */
.config .download{width:84%;max-width:260px;padding:12px 18px;border-radius:8px}

/* Side dots: smaller, left-aligned, only two dots and cleaner look */
.side-dots{position:fixed;left:28px;top:48%;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px;z-index:120}
.side-dots .dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,0.08);display:block;box-shadow:0 0 0 3px rgba(0,0,0,0.12) inset}
.side-dots .dot:hover{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.side-dots .dot:focus{outline:2px solid rgba(139,0,0,0.18)}

/* Video background: add subtle vertical slow pan and overlay gradients for depth */
.bg-video-wrap video{width:110%;height:110%;object-fit:cover;transform:translateY(0);animation:videoPan 30s linear infinite;filter:brightness(0.28) contrast(1.05) saturate(0.9)}
@keyframes videoPan{0%{transform:translateY(0) scale(1.02)}50%{transform:translateY(-3%) scale(1.04)}100%{transform:translateY(0) scale(1.02)}}

/* Add subtle vignette overlay to emphasize center content */
.bg-video-wrap::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);pointer-events:none}

/* Ensure main panels look consistent and aligned */
.faq, .specs, .config{background:transparent;padding:18px;border-radius:10px}
.faq .card{background:#000;padding:16px;border-radius:6px}

/* Make social icons slightly brighter here */
.social-link img{filter:brightness(1.4) invert(1) saturate(0)}

/* tight layout adjustments for desktop */
.three-col{grid-template-columns:1fr 420px;gap:22px}
.col.right{padding-left:6px}

/* FINAL OVERRIDE: hero underline as a thin full-width red line with a centered gap for the scroll dot */
.hero-underline{
  height:4px !important;
  width:100% !important;
  max-width:1100px !important;
  margin:18px auto !important;
  border-radius:6px !important;
  position:relative !important;
  overflow:visible !important;
  background:transparent !important;
}
.hero-underline::before,
.hero-underline::after{
  content:'';
  position:absolute;
  top:0;
  height:100%;
  background:linear-gradient(90deg,#b22222,#9b0000) !important;
  border-radius:3px;
  will-change:transform,opacity;
}
.hero-underline::before{
  left:0;
  right:calc(50% + var(--hero-gap)/2);
}
.hero-underline::after{
  right:0;
  left:calc(50% + var(--hero-gap)/2);
}
/* subtle glow for the line segments */
.hero-underline::before, .hero-underline::after{box-shadow:0 6px 18px rgba(178,34,34,0.12)}

/* remove any shimmer that might create visual noise — keep the line clean */
.hero-underline::after, .hero-underline::before { animation: none !important }

/* position the small scroll button so it sits visually in the gap */
.hero-scroll{
  position:relative !important;
  z-index:30 !important;
  margin-top:-22px !important; /* lift it so it overlaps the underline gap */
  width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#071415;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,0.5);
}
.hero-scroll svg, .hero-scroll i{pointer-events:none}

/* small responsive tweak: reduce the gap on narrow screens */
@media (max-width:680px){
  :root{ --hero-gap:48px; }
  .hero-underline{height:4px}
  .hero-scroll{margin-top:-18px;width:40px;height:40px}
}

/* FINAL TUNING OVERRIDES: align underline gap with the hero button and make main content reveal correctly */
:root{ --hero-gap:96px; } /* width of the center gap — set to button width + breathing room */

/* ensure the hero container is the positioning context for absolute/overlap placements */
.hero-large-inner{position:relative}
.hero-head{justify-content:center;display:flex;align-items:center;gap:18px}

/* position the button centered relative to the hero-head (so it sits over the gap) */
.hero-scroll{
  position:relative; /* keep inline so it's beside the text but can overlap */
  margin-left:12px;
  margin-top:-22px; /* pull up so it overlaps the underline gap cleanly */
  width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  z-index:90;
}

/* Ensure the underline gap width matches the --hero-gap variable and sits centered in the container */
.hero-underline::before{ right:calc(50% + var(--hero-gap)/2) !important }
.hero-underline::after{ left:calc(50% + var(--hero-gap)/2) !important }

/* Make sure main/content panels become visible when the observer toggles .visible */
#main-content{opacity:0;transform:translateY(22px);visibility:hidden;pointer-events:none}
#main-content.visible{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .6s ease, transform .6s ease}

/* Also ensure individual panels inside main get revealed cleanly */
.reveal-on-scroll{opacity:0;transform:translateY(18px);visibility:hidden;pointer-events:none}
.reveal-on-scroll.visible{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .6s cubic-bezier(.2,.9,.2,1), transform .6s cubic-bezier(.2,.9,.2,1)}

/* small responsive tweak for the gap so it doesn't visually overflow on small screens */
@media (max-width:900px){
  :root{ --hero-gap:64px }
  .hero-scroll{margin-top:-16px;width:48px;height:48px}
}

/* Make hero truly fullscreen-first-section and centered */
.large-hero{
  min-height:100vh; /* occupy full viewport */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.hero-large-inner{max-width:1400px;width:100%;padding:80px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-head{display:flex;align-items:center;gap:20px;justify-content:center}
.large-title{font-size:clamp(96px,18vw,220px);margin:0}

/* Ensure main and socials are hidden by default but can be made visible by JS */
#main-content, #socials{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(24px)}
#main-content.visible, #socials.visible{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .6s ease, transform .6s ease}

/* Side dots visible and clickable on right */
.side-dots{position:fixed;right:28px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px;z-index:9999}
.side-dots .dot{width:12px;height:12px;border-radius:999px;background:#fff;cursor:pointer}
.side-dots .dot[aria-current="true"], .side-dots .dot:focus{background:linear-gradient(90deg,#ffd8c2,#b22222)}

/* FORCE VISIBLE: ensure side-dots always show and are clickable (final override) */
.side-dots{
  display:flex !important;
  position:fixed !important;
  right:28px !important;
  left:auto !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  gap:18px !important;
  z-index:99999 !important;
  pointer-events:auto !important;
}
.side-dots .dot{
  display:block !important;
  width:14px !important;
  height:14px !important;
  border-radius:999px !important;
  background:#fff !important;
  border:2px solid rgba(0,0,0,0.14) !important;
  box-shadow:0 12px 40px rgba(0,0,0,0.6) !important;
  cursor:pointer !important;
}
.side-dots .dot:hover, .side-dots .dot:focus{transform:scale(1.08) !important; background:linear-gradient(90deg,#ffd8c2,#b22222) !important}

/* make sure nav isn't accidentally hidden by other rules */
nav.side-dots[aria-hidden="true"]{opacity:0.22;pointer-events:none}
nav.side-dots[aria-hidden="false"]{opacity:1;pointer-events:auto}

/* ensure anchors still work even when panels hidden */
a[href="#hero"], a[href="#socials"], a[href="#main-content"]{pointer-events:auto}

/* small responsive tweaks */
@media (max-width:900px){
  .large-title{font-size:clamp(44px,12vw,120px)}
  .hero-large-inner{padding:48px 12px}
  .side-dots{right:16px}
}

/* Ensure active/hover dot uses the project red accents (override previous peach color) */
.side-dots .dot[aria-current="true"],
.side-dots .dot:focus,
.side-dots .dot:hover{
  background: linear-gradient(90deg, var(--accent-2), var(--accent)) !important;
  box-shadow: 0 10px 30px rgba(178,34,34,0.22) !important;
  border-color: rgba(0,0,0,0.12) !important;
  transform: scale(1.08) !important;
}

/* Offset anchor landing so #socials sits a little below the top of the viewport when navigated to */
#socials{
  scroll-margin-top: 8vh; /* keeps socials slightly below the top */
}
@media (max-width:680px){
  #socials{ scroll-margin-top: 72px; }
}

/* Animated red glow behind the BRNX title */
.hero-head{position:relative}
.hero-head::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(1);
  width:min(55vw,680px);
  height:min(28vw,240px);
  background:radial-gradient(closest-side, rgba(178,34,34,0.9) 0%, rgba(178,34,34,0.45) 28%, rgba(178,34,34,0.12) 56%, transparent 85%);
  filter:blur(28px);
  border-radius:50%;
  z-index:10;
  pointer-events:none;
  opacity:0.9;
  transition:opacity .4s ease;
  animation:pulse-glow 4.6s ease-in-out infinite;
}
.large-title{position:relative;z-index:20}

@keyframes pulse-glow{
  0%{transform:translate(-50%,-50%) scale(0.96);opacity:0.72}
  50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}
  100%{transform:translate(-50%,-50%) scale(0.96);opacity:0.72}
}

@media (max-width:680px){
  .hero-head::before{ width:90vw; height:160px; filter:blur(20px); opacity:0.85 }
}

/* Side-dots: mark active dot based on scroll — JS will toggle aria-current */
.side-dots .dot{transition:transform .18s ease, background .18s ease}
.side-dots .dot[aria-current="true"]{
  transform:scale(1.16);
  box-shadow:0 10px 30px rgba(178,34,34,0.22);
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
}

/* Buy button — base styles aligned with download but without persistent glow */
.buy{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--accent);
  color:#ffffff;
  padding:8px 10px;
  border-radius:8px;
  text-decoration:none;
  font-weight:800;
  border:none;
  cursor:pointer;
  margin-left:12px;
  float:right;
  background-image:none;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease !important;
  position: relative;
  box-shadow: none !important; /* no glow by default */
}

.buy i{margin-right:6px;display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center}

/* keep ::after disabled to avoid any ambient glow */
.buy::after{ display: none !important; content: none !important; }

/* Hover/focus: show red glow (same as .config .download) */
.buy:hover, .buy:focus{
  background: var(--accent-2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(178,34,34,0.12) !important; /* red hover glow */
  outline: none !important;
}
.buy:hover::after, .buy:focus::after{ display:none !important }

@media (prefers-reduced-motion: reduce){
  .buy{transition:none !important}
}

/* Ensure anchor targets for top land at the very top of the document */
:root { --top-offset: 0px; }
#top{position:relative;top:0}
#hero{scroll-margin-top: calc(var(--top-offset));}

/* If side-dots link to #top, make sure it's visible/clickable (handled in HTML) */
.side-dots a[href="#top"]{display:inline-block}

/* Hide native scrollbars visually (keeps scrolling functional) */
html, body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  width: 0; /* Chrome, Safari, Opera */
  height: 0;
  background: transparent;
}
/* Optional: hide for common scrollable containers as well */
*::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
* { -ms-overflow-style: none; scrollbar-width: none; }

/* Crosshair preview button */
.crosshair-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  color:#fff;
  border:1px solid rgba(255,255,255,0.04);
  cursor:pointer;
  font-weight:700;
}
.crosshair-btn .btn-icon{width:18px;height:18px;display:block;color:var(--accent-2)}
.crosshair-btn span{font-weight:800}
.crosshair-btn:hover{background:rgba(178,34,34,0.08);border-color:var(--accent-2)}

/* Modal */
.crosshair-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:20000}
.crosshair-modal[aria-hidden="false"]{display:flex}
.crosshair-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6)}
.crosshair-modal-inner{position:relative;z-index:20001;background:rgba(10,10,10,0.95);border-radius:10px;padding:18px;max-width:880px;width:94%;display:flex;gap:20px;align-items:flex-start}
.crosshair-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.03);margin-bottom:12px}
#crosshair-modal-title{
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:1px;
  margin:0;
  color: #ffffff;
  background: none !important;
  -webkit-background-clip: unset; background-clip: unset;
  text-shadow: none !important;
}
.crosshair-modal-close{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.04);
  padding:6px 10px;border-radius:8px;cursor:pointer;color:#fff;transition:transform .12s ease,box-shadow .18s ease,background .12s ease
}
.crosshair-modal-close:hover{transform:translateY(-2px);background:rgba(178,34,34,0.08);box-shadow:0 12px 30px rgba(178,34,34,0.12);border-color:var(--accent-2)}

/* Code display box — monospace, framed and slightly glowing */
.crosshair-code-static{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(178,34,34,0.06);
  padding:10px 12px;
  border-radius:10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
  font-weight:800;
  font-size:0.95rem;
  color:#fff;
  box-shadow: inset 0 -8px 18px rgba(0,0,0,0.6), 0 8px 28px rgba(178,34,34,0.04);
}

/* Action buttons — copy button simplified to a flatter, more appealing style */
.crosshair-actions{display:flex;gap:10px;margin-top:10px}
.crosshair-actions button{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;font-weight:900;letter-spacing:0.6px;cursor:pointer;border:1px solid rgba(0,0,0,0.12);background:rgba(255,255,255,0.02);color:#fff;transition:transform .14s ease,box-shadow .18s ease,background .18s ease;
}

/* Primary copy button: solid deep-red, no white gloss */
.crosshair-actions button#crosshair-copy{
  background: linear-gradient(180deg, #8a0000 0%, #b22222 100%); /* subtle vertical gradient */
  color: #fff; /* keep label readable */
  box-shadow: 0 8px 24px rgba(178,34,34,0.12);
  border: none;
  position: relative;
  overflow: visible;
}

.crosshair-actions button#crosshair-copy:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 48px rgba(178,34,34,0.18);
  background: linear-gradient(180deg, #9b0b0b 0%, #c33a3a 100%);
}
.crosshair-actions button#crosshair-copy:active{
  transform:translateY(-1px) scale(.998);
  box-shadow:0 10px 30px rgba(178,34,34,0.14);
}

.crosshair-actions button#crosshair-copy:focus{
  outline: 3px solid rgba(178,34,34,0.12);
  outline-offset:3px;
  box-shadow:0 18px 48px rgba(178,34,34,0.18);
}

/* clipboard icon inside copy button */
.crosshair-actions .icon-clipboard{display:inline-block;flex:0 0 16px;height:16px;width:16px;color:#fff;opacity:0.95}
.crosshair-actions button#crosshair-copy span{display:inline-block}
.crosshair-actions button#crosshair-copy svg{margin-right:8px}