/* Shared Cyberpolos header styling, scoped away from the product demo. */
.site-header {
& {
  --blue: #1c84b9;
  --blue-dark: #14648d;
  --blue-light: #4ba8d8;
  --cyan: #6fd3ff;

  /* Tema dark (padrão) */
  --bg: #070b0e;
  --bg-soft: #0c1216;
  --text: #eef3f6;
  --text-soft: rgba(238, 243, 246, 0.62);
  --text-faint: rgba(238, 243, 246, 0.4);
  --accent: #6fd3ff;
  --grad-1: #6fd3ff;
  --grad-2: #4ba8d8;
  --grad-3: #1c84b9;
  --line: rgba(255, 255, 255, 0.07);
  --card: rgba(255, 255, 255, 0.035);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-shadow: none;
  --card-hover-border: rgba(111, 211, 255, 0.4);
  --card-hover-shadow: 0 0 0 1px rgba(111, 211, 255, 0.15), 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(28, 132, 185, 0.12);
  --header-bg: rgba(12, 18, 22, 0.72);
  --header-border: rgba(255, 255, 255, 0.1);
  --header-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --menu-bg: rgba(12, 18, 22, 0.92);
  --input-bg: rgba(255, 255, 255, 0.045);
  --input-border: rgba(255, 255, 255, 0.1);
  --tag-bg: rgba(255, 255, 255, 0.07);
  --pill-border: rgba(111, 211, 255, 0.25);
  --grid-line: rgba(255, 255, 255, 0.04);
  --marquee-text: rgba(238, 243, 246, 0.35);
  --orb-opacity: 1;
  --btn-outline-border: rgba(255, 255, 255, 0.18);
  --btn-outline-bg: rgba(255, 255, 255, 0.04);
  --btn-outline-bg-hover: rgba(255, 255, 255, 0.09);
  --support-bg: linear-gradient(120deg, rgba(28, 132, 185, 0.16) 0%, rgba(12, 18, 22, 0.4) 60%);

  --radius: 18px;
  --radius-btn: 10px;    /* botões */
  --radius-chip: 7px;    /* chips e tags */
  --radius-bar: 16px;    /* barra do menu, painéis em faixa */
  --font-display: "Space Grotesk", "Inter", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="light"] & {
  --bg: #f7fafc;
  --bg-soft: #edf2f6;
  --text: #17222b;
  --text-soft: rgba(23, 34, 43, 0.68);
  --text-faint: rgba(23, 34, 43, 0.45);
  --accent: #14648d;
  --grad-1: #1c84b9;
  --grad-2: #16729f;
  --grad-3: #0e4a68;
  --line: rgba(15, 40, 60, 0.1);
  --card: #ffffff;
  --card-border: #e0e9ef;
  --card-shadow: 0 6px 22px rgba(20, 50, 70, 0.06);
  --card-hover-border: rgba(28, 132, 185, 0.45);
  --card-hover-shadow: 0 0 0 1px rgba(28, 132, 185, 0.12), 0 18px 40px rgba(20, 50, 70, 0.12);
  --header-bg: rgba(255, 255, 255, 0.82);
  --header-border: rgba(15, 40, 60, 0.1);
  --header-shadow: 0 10px 30px rgba(20, 50, 70, 0.12);
  --menu-bg: rgba(255, 255, 255, 0.95);
  --input-bg: #f2f6f9;
  --input-border: #d8e2ea;
  --tag-bg: rgba(15, 40, 60, 0.06);
  --pill-border: rgba(28, 132, 185, 0.35);
  --grid-line: rgba(15, 40, 60, 0.06);
  --marquee-text: rgba(23, 34, 43, 0.35);
  --orb-opacity: 0.45;
  --btn-outline-border: rgba(15, 40, 60, 0.2);
  --btn-outline-bg: rgba(255, 255, 255, 0.6);
  --btn-outline-bg-hover: #ffffff;
  --support-bg: linear-gradient(120deg, rgba(28, 132, 185, 0.12) 0%, rgba(255, 255, 255, 0.6) 60%);
}


.btn {
  display: inline-block;
  padding: 0.8rem 1.7rem;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--font-body);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue-light) 0%, var(--blue) 55%, var(--blue-dark) 100%);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(111, 211, 255, 0.25) inset, 0 8px 24px rgba(28, 132, 185, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(111, 211, 255, 0.35) inset, 0 12px 32px rgba(28, 132, 185, 0.5);
}

.btn-outline {
  color: var(--text);
  border: 1px solid var(--btn-outline-border);
  background: var(--btn-outline-bg);
  backdrop-filter: blur(6px);
}

.btn-outline:hover { background: var(--btn-outline-bg-hover); transform: translateY(-2px); }

.btn-light {
  background: #fff;
  color: #0b3550;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.btn-light:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35); }

.btn-sm { padding: 0.55rem 1.25rem; font-size: 0.88rem; }
.btn-lg { padding: 0.95rem 2.1rem; font-size: 1rem; }


.header {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transition: top 0.3s ease;
}

.header.scrolled { top: 10px; }

.header-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0.6rem 0.7rem 0.6rem 1.4rem;
  border-radius: var(--radius-bar);
  background: var(--header-bg);
  border: 1px solid var(--header-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--header-shadow);
  transition: background 0.35s ease, border-color 0.35s ease;
}

.header-logo img { height: 24px; width: auto; }

.nav { display: flex; gap: 1.6rem; }

.nav a {
  color: var(--text-soft);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
  transition: color 0.2s ease;
}

.nav a:hover { color: var(--accent); }

/* Botão de alternância de tema */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--btn-outline-border);
  background: var(--btn-outline-bg);
  color: var(--text-soft);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle:hover { color: var(--accent); transform: rotate(15deg); }

.theme-toggle svg { width: 18px; height: 18px; }

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Seletor de idioma PT/EN */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 0.65rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--btn-outline-border);
  background: var(--btn-outline-bg);
  color: var(--text-soft);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}

.lang-switch:hover { color: var(--accent); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.nav-mobile {
  pointer-events: auto;
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 10px;
  width: min(420px, calc(100vw - 2rem));
  padding: 1rem 1.2rem 1.2rem;
  border-radius: var(--radius-bar);
  background: var(--menu-bg);
  border: 1px solid var(--header-border);
  backdrop-filter: blur(16px);
  box-shadow: var(--header-shadow);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.nav-mobile.open { opacity: 1; transform: translateY(0); }

.nav-mobile a {
  color: var(--text-soft);
  text-decoration: none;
  font-weight: 500;
  padding: 0.55rem 0.4rem;
}

.nav-mobile a.btn { color: #fff; text-align: center; margin-top: 0.5rem; }


}
:root {--font-display:"Space Grotesk",sans-serif;--font-body:"Inter",sans-serif;--ai-1:#6fd3ff;--ai-2:#1c84b9;--bg:#070b0e;}
:root[data-theme="light"] {--bg:#f7fafc;--ai-1:#1c84b9;--ai-2:#14648d;}
.site-header {font-family:var(--font-body);position:fixed;top:18px;left:0;right:0;z-index:100;display:flex;flex-direction:column;align-items:center;pointer-events:none;}
.site-header.scrolled {top:10px;}
:root[data-theme="light"] .site-header .icon-moon {display:none;}
:root[data-theme="light"] .site-header .icon-sun {display:block;}
:root[data-theme="light"] .btn-primary {color:#fff;}
.site-header .nav {position:static;inset:auto;background:none;border:0;backdrop-filter:none;z-index:auto;}
.site-header img {display:block;max-width:100%;}
.site-header .nav-mobile {visibility:hidden;}
.site-header .nav-mobile.open {visibility:visible;}
.hero {padding-top:150px;}
.hero-sub {margin-bottom:16px;}
.hero-links {display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:28px;font-size:13px;color:var(--muted);}
.hero-links a {padding:6px 0;white-space:nowrap;}
.hero-links a:hover {color:var(--ai-1);text-decoration:underline;text-underline-offset:4px;}
section[id],header[id] {scroll-margin-top:100px;}
.site-header :focus-visible,.hero-links :focus-visible {outline:2px solid var(--ai-1);outline-offset:4px;}
@media(max-width:1080px){
 .site-header .nav,.site-header .header-cta {display:none;}
 .site-header .nav-toggle {display:flex;}
 .site-header .nav-mobile {display:flex;pointer-events:none;}
 .site-header .nav-mobile.open {pointer-events:auto;}
 .site-header .header-pill {gap:.8rem;padding:.5rem .6rem .5rem 1.2rem;}
}
@media(max-width:720px){
 .hero {padding-top:120px;}
 section[id],header[id] {scroll-margin-top:100px;}
}