/* ═══════════════════════════════════════════════════════════
   PISTIS TECH — DESIGN SYSTEM v3
   01. Foundation & Tokens   02. Reset          03. Custom Cursor
   04. Scroll Progress       05. Atmosphere     06. Typography Utilities
   07. Layout                08. Navigation     09. Buttons
   10. Marquee               11. Footer         12. Reveal Animations
   13. Responsive            14. Accessibility
═══════════════════════════════════════════════════════════ */

/* ─── 01. FOUNDATION & TOKENS ──────────────────────────── */
:root {
  /* Depth */
  --void:    #010308;
  --ground:  #04080f;
  --base:    #070d18;
  --lift:    #0d1828;
  --float:   #102338;
  --float-2: #132f4a;

  /* Ink */
  --ink:   #edf6ff;
  --ink-2: #94b4cc;
  --ink-3: #5a7590;
  --ink-4: #2a4660;

  /* Accent */
  --teal:   #5de8d8;
  --mid:    #4fa8ff;
  --hi:     #8fd0ff;
  --violet: #8490ff;
  --amber:  #f4c060;
  --rose:   #f46880;
  --lo:     #1b5f9f;

  /* Lines */
  --l1: rgba(126,190,255,0.06);
  --l2: rgba(126,190,255,0.12);
  --l3: rgba(126,190,255,0.22);
  --l4: rgba(126,190,255,0.36);

  /* Gradients */
  --g-main:   linear-gradient(135deg, #5de8d8 0%, #4fa8ff 55%, #8490ff 100%);
  --g-warm:   linear-gradient(135deg, #f4c060 0%, #f46880 60%, #8490ff 100%);
  --g-subtle: linear-gradient(135deg, rgba(93,232,216,0.15) 0%, rgba(79,168,255,0.12) 55%, rgba(132,144,255,0.15) 100%);

  /* Typography */
  --sans:    'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;

  /* Fluid type scale */
  --f-2xs: clamp(0.5rem,   0.65vw + 0.08rem, 0.625rem);
  --f-xs:  clamp(0.625rem, 0.8vw  + 0.1rem,  0.75rem);
  --f-sm:  clamp(0.8125rem,1vw    + 0.1rem,  0.9375rem);
  --f-md:  clamp(0.9375rem,1.1vw  + 0.15rem, 1.0625rem);
  --f-lg:  clamp(1.125rem, 1.5vw  + 0.15rem, 1.375rem);
  --f-xl:  clamp(1.375rem, 2.2vw  + 0.2rem,  1.875rem);
  --f-2xl: clamp(2rem,     3.5vw  + 0.3rem,  3rem);
  --f-3xl: clamp(2.75rem,  5.5vw  + 0.3rem,  4.75rem);
  --f-hd:  clamp(4rem,     9vw    + 0.4rem,  8rem);
  --f-xhd: clamp(5rem,     12vw   + 0.5rem, 10.5rem);

  /* Spacing (4px base) */
  --s1:  0.25rem;  --s2:  0.5rem;   --s3:  0.75rem;
  --s4:  1rem;     --s5:  1.25rem;  --s6:  1.5rem;
  --s7:  1.75rem;  --s8:  2rem;     --s10: 2.5rem;
  --s12: 3rem;     --s16: 4rem;     --s20: 5rem;
  --s24: 6rem;     --s32: 8rem;     --s40: 10rem;

  /* Radius */
  --r1: 3px; --r2: 6px; --r3: 10px; --r4: 16px; --r5: 24px;

  /* Elevation */
  --e1: 0 2px 10px rgba(0,0,0,0.24);
  --e2: 0 10px 28px rgba(0,0,0,0.34);
  --e3: 0 24px 72px rgba(0,0,0,0.48);
  --glow: 0 0 48px rgba(79,168,255,0.18);
  --glow-teal: 0 0 56px rgba(93,232,216,0.14);
  --glow-strong: 0 0 72px rgba(93,232,216,0.12);

  /* Motion */
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --d1: 120ms; --d2: 240ms; --d3: 420ms; --d4: 680ms; --d5: 1000ms;

  /* Layout */
  --max:  min(1360px, 100vw - 2rem);
  --maxt: min(980px,  100vw - 2rem);
}

/* ─── 02. RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-padding-top: 110px;
}

body {
  font-family: var(--sans);
  font-size: var(--f-md);
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--void);
  background-image:
    radial-gradient(circle at 10% 18%, rgba(93,232,216,0.10), transparent 22%),
    radial-gradient(circle at 84% 10%, rgba(132,144,255,0.12), transparent 24%),
    radial-gradient(circle at 72% 70%, rgba(79,168,255,0.14), transparent 26%),
    radial-gradient(circle at 38% 52%, rgba(244,192,96,0.05), transparent 22%),
    linear-gradient(180deg, #070d18 0%, #04080f 40%, #010308 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scrollbar-color: rgba(93,232,216,0.72) rgba(9,16,28,0.9);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background:
    linear-gradient(180deg, rgba(7,13,24,0.96), rgba(4,8,15,0.96));
  border-left: 1px solid rgba(126,190,255,0.08);
}

::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(93,232,216,0.88), rgba(79,168,255,0.88) 52%, rgba(132,144,255,0.88));
  border: 2px solid rgba(7,13,24,0.9);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 18px rgba(79,168,255,0.18);
}

::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, rgba(93,232,216,1), rgba(79,168,255,1) 52%, rgba(132,144,255,1));
}

::-webkit-scrollbar-corner {
  background: rgba(4,8,15,0.96);
}

a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; height: auto; }
svg  { display: block; flex-shrink: 0; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 1.5px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ─── 04. SCROLL PROGRESS ───────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  height: 2px;
  width: 100%;
  background: var(--g-main);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
  pointer-events: none;
}

/* ─── 05. ATMOSPHERE ────────────────────────────────────── */
.atm {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.atm-g1 {
  position: absolute;
  top: -20%; right: -10%;
  width: 75vw; height: 75vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(79,168,255,0.22) 0%, transparent 65%);
  filter: blur(12px);
  animation: drift-a 20s ease-in-out infinite alternate;
  will-change: transform;
}

.atm-g2 {
  position: absolute;
  bottom: -5%; left: -15%;
  width: 60vw; height: 60vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(93,232,216,0.16) 0%, transparent 65%);
  filter: blur(10px);
  animation: drift-b 26s ease-in-out infinite alternate;
  will-change: transform;
}

.atm-g3 {
  position: absolute;
  top: 40%; left: 30%;
  width: 50vw; height: 50vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(132,144,255,0.10) 0%, transparent 65%);
  filter: blur(14px);
  animation: drift-c 32s ease-in-out infinite alternate;
  will-change: transform;
}

.atm-grid {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--l1) 1px, transparent 1px),
    linear-gradient(90deg, var(--l1) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 55%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 55%);
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 5%, 0) scale(1.06); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5%, -4%, 0) scale(1.07); }
}
@keyframes drift-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4%, 3%, 0) scale(1.05); }
}

header, main, footer { position: relative; z-index: 1; }

main,
footer {
  transition:
    filter 180ms var(--ease),
    transform 180ms var(--ease),
    opacity 180ms var(--ease);
  will-change: filter, transform, opacity;
}

body.is-scrolling main,
body.is-scrolling footer {
  filter: saturate(1.08) brightness(1.03);
}

body.is-scrolling-up main,
body.is-scrolling-up footer {
  transform: translateY(8px) scale(0.997);
  opacity: 0.985;
}

body.is-scrolling-down main,
body.is-scrolling-down footer {
  transform: translateY(-8px) scale(0.997);
  opacity: 0.985;
}

/* ─── 06. TYPOGRAPHY UTILITIES ──────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  line-height: 1;
  opacity: 0.9;
}

.eyebrow::before {
  content: '';
  display: block;
  width: 20px; height: 1px;
  background: linear-gradient(90deg, var(--teal), var(--mid));
  opacity: 0.7;
  flex-shrink: 0;
}

.eyebrow--center {
  display: flex;
  justify-content: center;
  width: 100%;
}

.eyebrow--center::after {
  content: '';
  display: block;
  width: 20px; height: 1px;
  background: linear-gradient(90deg, var(--mid), var(--violet));
  opacity: 0.7;
  flex-shrink: 0;
}

/* Gradient text utilities */
.text-gradient {
  background: var(--g-main);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-flow 4s linear infinite alternate;
}

.text-gradient-warm {
  background: var(--g-warm);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-flow 5s linear infinite alternate;
}

.text-teal   { color: var(--teal); }
.text-violet { color: var(--violet); }
.text-amber  { color: var(--amber); }
.text-mid    { color: var(--mid); }

@keyframes gradient-flow {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* ─── 07. LAYOUT ────────────────────────────────────────── */
.wrap  { width: var(--max);  margin-inline: auto; }
.wrapt { width: var(--maxt); margin-inline: auto; }

.section     { padding: var(--s32) 0; }
.section--sm { padding: var(--s20) 0; }

[id] {
  scroll-margin-top: 110px;
}

.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(93,232,216,0.14) 16%, rgba(79,168,255,0.32) 50%, rgba(132,144,255,0.14) 84%, transparent);
}

/* ─── 08. NAVIGATION ────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 10px 0 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  height: 72px;
  padding: 0 var(--s6);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(4,6,11,0.96), rgba(7,10,16,0.92));
  box-shadow: 0 16px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    background var(--d3) var(--spring),
    border-color var(--d3) var(--spring),
    box-shadow var(--d3) var(--spring),
    transform var(--d3) var(--spring);
}

.site-nav.scrolled .nav-inner {
  background: linear-gradient(180deg, rgba(2,3,7,0.98), rgba(5,8,14,0.96));
  border-color: rgba(126,190,255,0.14);
  box-shadow:
    0 20px 48px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(79,168,255,0.05);
  transform: translateY(2px);
}

/* Brand lockup */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--d2) var(--ease), opacity var(--d2) var(--ease);
}

.brand-lockup:hover { transform: translateY(-1px); }

.brand-mark {
  flex-shrink: 0;
  transition: filter var(--d2) var(--ease);
}

.brand-lockup:hover .brand-mark {
  filter: drop-shadow(0 0 8px rgba(93,232,216,0.5));
}

.brand-logo-img {
  display: block;
  width: auto;
  height: 68px;
  object-fit: contain;
}

.nav-brand .brand-logo-img {
  transform: translate(62px, -2px);
}

.brand-text {
  display: inline-grid;
  gap: 2px;
  line-height: 1;
}

.brand-main {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.8vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.brand-sub {
  font-family: var(--display);
  font-size: clamp(0.48rem, 0.6vw, 0.62rem);
  font-weight: 500;
  letter-spacing: 0.72em;
  text-transform: uppercase;
  color: var(--mid);
  padding-left: 0.2em;
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.nav-links a {
  position: relative;
  display: block;
  padding: 10px 14px;
  font-size: var(--f-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-radius: 999px;
  transition:
    color var(--d2) var(--ease),
    transform var(--d2) var(--ease),
    background var(--d2) var(--ease);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), var(--mid), transparent);
  transform: scaleX(0.12);
  transform-origin: center;
  opacity: 0;
  transition: transform var(--d2) var(--ease), opacity var(--d2) var(--ease);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--ink);
  transform: translateY(-1px);
  background: rgba(93,232,216,0.05);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Nav CTA */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 44px;
  padding: 0 var(--s5);
  border: 1px solid rgba(93,232,216,0.28);
  border-radius: 999px;
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(93,232,216,0.08), rgba(79,168,255,0.12));
  transition:
    transform var(--d2) var(--spring),
    border-color var(--d2) var(--spring),
    box-shadow var(--d2) var(--spring),
    background var(--d2) var(--ease);
  white-space: nowrap;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(93,232,216,0.6);
  box-shadow: var(--glow-teal);
  background: linear-gradient(135deg, rgba(93,232,216,0.14), rgba(79,168,255,0.18));
}

.nav-cta svg {
  transition: transform var(--d2) var(--spring);
}

.nav-cta:hover svg { transform: translateX(3px); }

/* ─── 08b. MOBILE NAV ───────────────────────────────────── */

/* Hamburger button */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5.5px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--l2);
  border-radius: var(--r3);
  background: rgba(7,13,24,0.4);
  cursor: pointer;
  padding: 0 10px;
  transition:
    border-color var(--d2) var(--ease),
    background var(--d2) var(--ease);
  flex-shrink: 0;
  align-self: center;
}

.nav-burger:hover,
.nav-burger:focus-visible {
  border-color: var(--l3);
  background: rgba(13,24,42,0.6);
}

.nav-burger-line {
  display: block;
  height: 1.5px;
  background: var(--ink-2);
  border-radius: 999px;
  transition:
    transform var(--d3) var(--spring),
    opacity var(--d2) var(--ease),
    width var(--d2) var(--ease);
  transform-origin: center;
  width: 100%;
}

.nav-burger-line:nth-child(2) { width: 70%; }

.nav-open .nav-burger .nav-burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  width: 100%;
}
.nav-open .nav-burger .nav-burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-open .nav-burger .nav-burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  width: 100%;
}

/* Overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 68;
  background: rgba(1,3,8,0.72);
  /* backdrop-filter removido — cria stacking context que bloqueia cliques no drawer */
  opacity: 0;
  pointer-events: none; /* SEMPRE none: clique fora é tratado via JS no document */
  transition: opacity 240ms var(--ease);
}

.nav-open .nav-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 69;
  width: min(320px, 84vw);
  padding: var(--s6) var(--s6) var(--s10);
  background: linear-gradient(180deg, rgba(4,7,14,0.99), rgba(6,10,18,0.98));
  border-left: 1px solid var(--l2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.nav-open .nav-drawer { transform: translateX(0); }

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--l1);
  margin-bottom: var(--s6);
}

.nav-drawer-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--l2);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: var(--ink-3);
  cursor: pointer;
  line-height: 1;
  font-size: 1.25rem;
  transition:
    color var(--d1) var(--ease),
    border-color var(--d1) var(--ease),
    background var(--d1) var(--ease);
}

.nav-drawer-close:hover,
.nav-drawer-close:focus-visible {
  color: var(--ink);
  border-color: var(--l3);
  background: rgba(255,255,255,0.05);
}

.nav-drawer-links {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nav-drawer-links a {
  display: block;
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--l1);
  font-size: var(--f-md);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  transition:
    color var(--d1) var(--ease),
    padding-left var(--d2) var(--spring);
}

.nav-drawer-links a:hover,
.nav-drawer-links a:focus-visible {
  color: var(--ink);
  padding-left: var(--s3);
}

.nav-drawer-cta {
  padding-top: var(--s8);
  margin-top: auto;
}

.nav-drawer-cta .btn-primary {
  width: 100%;
  justify-content: center;
  height: 56px;
  font-size: var(--f-sm);
}


/* ─── 09. BUTTONS ───────────────────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  height: 52px;
  padding: 0 var(--s7);
  border: 1px solid rgba(126,190,255,0.38);
  border-radius: 999px;
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(93,232,216,0.12), rgba(79,168,255,0.20) 48%, rgba(14,28,48,0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 32px rgba(5,14,26,0.36);
  transition:
    background var(--d2) var(--spring),
    border-color var(--d2) var(--spring),
    transform var(--d2) var(--spring),
    box-shadow var(--d2) var(--spring);
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 55%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease);
}

.btn-primary:hover::before,
.btn-primary:focus-visible::before {
  transform: translateX(100%);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: linear-gradient(135deg, rgba(93,232,216,0.18), rgba(79,168,255,0.26) 48%, rgba(18,38,62,0.96));
  border-color: var(--hi);
  transform: translateY(-2px);
  box-shadow: var(--glow), 0 18px 44px rgba(5,14,26,0.42);
}

.btn-primary svg {
  transition: transform var(--d2) var(--spring);
}

.btn-primary:hover svg,
.btn-primary:focus-visible svg { transform: translateX(3px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  height: 52px;
  padding: 0 var(--s7);
  border: 1px solid var(--l2);
  border-radius: 999px;
  font-size: var(--f-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: rgba(7,13,24,0.3);
  transition:
    color var(--d2) var(--ease),
    border-color var(--d2) var(--ease),
    transform var(--d2) var(--ease),
    background var(--d2) var(--ease);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--ink);
  border-color: var(--l3);
  transform: translateY(-2px);
  background: rgba(13,24,42,0.52);
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--f-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--d2) var(--ease), transform var(--d2) var(--ease);
}

.btn-text:hover,
.btn-text:focus-visible {
  color: var(--teal);
  transform: translateX(3px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
}

/* ─── 10. MARQUEE ───────────────────────────────────────── */
.marquee-strip {
  overflow: hidden;
  border-top: 1px solid var(--l1);
  border-bottom: 1px solid var(--l1);
  padding: var(--s4) 0;
  background: linear-gradient(180deg, rgba(93,232,216,0.03), rgba(79,168,255,0.03));
}

.marquee-strip:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}

.marquee-item {
  font-family: var(--display);
  font-size: var(--f-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0 var(--s6);
  transition: color var(--d2) var(--ease);
}

.marquee-item:hover { color: var(--teal); }

.marquee-sep {
  color: var(--teal);
  opacity: 0.4;
  font-size: 0.5rem;
  flex-shrink: 0;
}

/* ─── 10B. WHATSAPP FLOAT ───────────────────────────────── */
.wpp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid rgba(37, 211, 102, 0.34);
  border-radius: 999px;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(37,211,102,0.18), transparent 34%),
    linear-gradient(135deg, rgba(7,13,24,0.96), rgba(9,18,31,0.94));
  box-shadow:
    0 18px 42px rgba(0,0,0,0.34),
    0 0 0 1px rgba(37,211,102,0.08),
    0 0 36px rgba(37,211,102,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    transform var(--d2) var(--spring),
    border-color var(--d2) var(--ease),
    box-shadow var(--d2) var(--ease),
    background var(--d2) var(--ease);
}

.wpp-float:hover,
.wpp-float:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(37, 211, 102, 0.62);
  background:
    radial-gradient(circle at top left, rgba(37,211,102,0.24), transparent 34%),
    linear-gradient(135deg, rgba(7,13,24,0.98), rgba(11,24,37,0.96));
  box-shadow:
    0 22px 48px rgba(0,0,0,0.4),
    0 0 44px rgba(37,211,102,0.18);
}

.wpp-float-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(37,211,102,0.14);
  color: #25d366;
}

.wpp-float-copy {
  display: grid;
  line-height: 1.1;
}

.wpp-float-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wpp-float-text {
  margin-top: 3px;
  font-size: var(--f-sm);
  font-weight: 700;
  color: var(--ink);
}

/* ─── 10C. HELP BOT ────────────────────────────────────── */
.helpbot {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 71;
  display: grid;
  justify-items: end;
  gap: var(--s3);
}

.helpbot-panel {
  width: min(360px, calc(100vw - 1.5rem));
  padding: var(--s6);
  border: 1px solid var(--l2);
  background:
    radial-gradient(circle at top right, rgba(93,232,216,0.1), transparent 28%),
    radial-gradient(circle at bottom left, rgba(132,144,255,0.1), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%),
    rgba(7,12,22,0.95);
  box-shadow: var(--e3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition:
    opacity var(--d2) var(--ease),
    transform var(--d2) var(--spring),
    border-color var(--d2) var(--ease);
}

.helpbot.is-open .helpbot-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.helpbot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.helpbot-brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.helpbot-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(93,232,216,0.18), rgba(79,168,255,0.18));
  border: 1px solid rgba(93,232,216,0.18);
  color: var(--teal);
}

.helpbot-title {
  display: block;
  font-family: var(--display);
  font-size: var(--f-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.helpbot-subtitle {
  display: block;
  margin-top: 2px;
  font-size: var(--f-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.helpbot-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--l2);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: var(--ink-2);
  cursor: pointer;
  transition:
    color var(--d1) var(--ease),
    border-color var(--d1) var(--ease),
    background var(--d1) var(--ease);
}

.helpbot-close:hover,
.helpbot-close:focus-visible {
  color: var(--ink);
  border-color: var(--l3);
  background: rgba(255,255,255,0.05);
}

.helpbot-copy {
  color: var(--ink-2);
  font-size: var(--f-sm);
  line-height: 1.8;
}

.helpbot-questions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}

.helpbot-q {
  padding: 9px 12px;
  border: 1px solid var(--l2);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--f-xs);
  cursor: pointer;
  transition:
    color var(--d1) var(--ease),
    border-color var(--d1) var(--ease),
    background var(--d1) var(--ease),
    transform var(--d1) var(--ease);
}

.helpbot-q:hover,
.helpbot-q:focus-visible,
.helpbot-q.is-active {
  color: var(--ink);
  border-color: rgba(93,232,216,0.28);
  background: rgba(93,232,216,0.08);
  transform: translateY(-1px);
}

.helpbot-answer {
  margin-top: var(--s5);
  padding: var(--s5);
  border: 1px solid rgba(93,232,216,0.12);
  background: rgba(93,232,216,0.04);
  color: var(--ink);
  font-size: var(--f-sm);
  line-height: 1.8;
  min-height: 110px;
}

.helpbot-answer-label {
  display: block;
  margin-bottom: var(--s2);
  color: var(--teal);
  font-size: var(--f-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.helpbot-actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s5);
}

.helpbot-fallback {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(37,211,102,0.24);
  border-radius: 999px;
  background: rgba(37,211,102,0.08);
  color: var(--ink);
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    transform var(--d1) var(--ease),
    border-color var(--d1) var(--ease),
    background var(--d1) var(--ease);
}

.helpbot-fallback:hover,
.helpbot-fallback:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37,211,102,0.42);
  background: rgba(37,211,102,0.12);
}

.helpbot-toggle {
  min-height: 56px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  border: 1px solid rgba(93,232,216,0.26);
  border-radius: 999px;
  background:
    radial-gradient(circle at top left, rgba(93,232,216,0.16), transparent 32%),
    linear-gradient(135deg, rgba(7,13,24,0.96), rgba(11,20,34,0.95));
  color: var(--ink);
  box-shadow:
    0 18px 42px rgba(0,0,0,0.34),
    0 0 30px rgba(79,168,255,0.08);
  cursor: pointer;
  transition:
    transform var(--d2) var(--spring),
    border-color var(--d2) var(--ease),
    box-shadow var(--d2) var(--ease);
}

.helpbot-toggle:hover,
.helpbot-toggle:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(93,232,216,0.5);
  box-shadow:
    0 22px 48px rgba(0,0,0,0.4),
    0 0 34px rgba(79,168,255,0.14);
}

.helpbot-toggle-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(93,232,216,0.12);
  color: var(--teal);
}

.helpbot-toggle-copy {
  display: grid;
  line-height: 1.1;
}

.helpbot-toggle-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.helpbot-toggle-text {
  margin-top: 3px;
  font-size: var(--f-sm);
  font-weight: 700;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── 11. FOOTER ────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--l1);
  padding: var(--s12) 0;
  background: linear-gradient(180deg, rgba(4,7,14,0), rgba(4,6,11,0.7));
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
}

.footer-logo {
  transition: transform var(--d2) var(--ease), opacity var(--d2) var(--ease);
}

.footer-logo:hover { transform: translateY(-1px); }

.footer-logo .brand-logo-img {
  width: auto;
  height: 62px;
}

.footer-logo .brand-main {
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
}

.footer-logo .brand-sub {
  font-size: clamp(0.4rem, 0.5vw, 0.55rem);
  letter-spacing: 0.6em;
}

.footer-copy {
  font-size: var(--f-xs);
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-align: center;
}

.footer-nav {
  display: flex;
  gap: var(--s6);
}

.footer-nav a {
  font-size: var(--f-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--d1) var(--ease), transform var(--d1) var(--ease);
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--ink-2);
  transform: translateY(-1px);
}

/* ─── 12. REVEAL ANIMATIONS ─────────────────────────────── */
[data-r] {
  opacity: 0;
  transform: translateY(20px) scale(0.984);
  transition:
    opacity var(--d4) var(--spring),
    transform var(--d4) var(--spring),
    filter var(--d4) var(--spring);
  filter: blur(5px);
}

[data-r].on {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

[data-r][data-d="1"] { transition-delay:  80ms; }
[data-r][data-d="2"] { transition-delay: 160ms; }
[data-r][data-d="3"] { transition-delay: 240ms; }
[data-r][data-d="4"] { transition-delay: 320ms; }
[data-r][data-d="5"] { transition-delay: 400ms; }

@keyframes scrollLine {
  0%, 100% { opacity: 0; transform: scaleY(0); transform-origin: top; }
  30%       { opacity: 1; transform: scaleY(1); transform-origin: top; }
  70%       { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
  99%       { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
}

/* ─── 13. RESPONSIVE ────────────────────────────────────── */

/* ── 1100px ───── */
@media (max-width: 1100px) {
  .nav-links li:not(:last-child) { display: none; }
}

/* ── 900px ───── */
@media (max-width: 900px) {
  :root { --max: calc(100vw - 2rem); }
}

/* ── 760px — Mobile nav threshold ───── */
@media (max-width: 760px) {
  html {
    scroll-padding-top: 92px;
  }

  [id] {
    scroll-margin-top: 92px;
  }

  /* Show hamburger, hide desktop nav */
  .nav-burger { display: flex; }
  .nav-links  { display: none; }
  .nav-cta    { display: none; }

  /* Nav sizing */
  .nav-inner { height: 64px; padding: 0 var(--s4); }
  .site-nav  { padding: 8px 0 0; }

  /* Logo mobile */
  .brand-logo-img {
    height: 42px;
  }

  .nav-brand .brand-logo-img {
    transform: translate(40px, -2px);
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s5);
  }

  .footer-copy { text-align: left; }

  .footer-nav {
    flex-wrap: wrap;
    gap: var(--s4) var(--s6);
  }

  /* Keep only a compact WhatsApp shortcut on mobile */
  .helpbot {
    display: none;
  }

  .wpp-float {
    right: 14px;
    bottom: 14px;
    left: auto;
    min-height: 46px;
    padding: 0 14px;
    gap: 0;
    border-radius: 999px;
  }

  .wpp-float-copy {
    display: none;
  }

  .wpp-float-icon {
    width: 18px;
    height: 18px;
  }

  /* Performance: reduce heavy GPU effects on mobile */
  .atm-g1, .atm-g2, .atm-g3 {
    filter: blur(6px);
    animation-duration: 40s;
  }

  body.is-scrolling main,
  body.is-scrolling footer {
    filter: none;
  }

  body.is-scrolling-up main,
  body.is-scrolling-up footer,
  body.is-scrolling-down main,
  body.is-scrolling-down footer {
    transform: none;
    opacity: 1;
  }
}

/* ── 520px — Small mobile ───── */
@media (max-width: 520px) {
  :root { --max: calc(100vw - 1.5rem); }

  html {
    scroll-padding-top: 86px;
  }

  [id] {
    scroll-margin-top: 86px;
  }

  /* Logo smaller */
  .brand-logo-img,
  .footer-logo .brand-logo-img {
    height: 36px;
  }

  .nav-brand .brand-logo-img {
    transform: translate(32px, -1px);
  }

  /* Action buttons */
  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .actions .btn-primary,
  .actions .btn-ghost { width: 100%; justify-content: center; }

  /* Compact WhatsApp button */
  .wpp-float {
    right: 0.75rem;
    bottom: 0.75rem;
    min-height: 44px;
    padding: 0 13px;
  }

  /* Footer nav stacked */
  .footer-nav {
    flex-direction: column;
    gap: var(--s3);
  }
}


/* Body scroll lock when mobile menu is open */
html.nav-open {
  overflow: hidden;
}

/* ── Touch devices: disable heavy effects ───── */
@media (pointer: coarse) {
  .atm-g1, .atm-g2, .atm-g3 {
    filter: none;
  }

  body.is-scrolling main,
  body.is-scrolling footer {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ─── 14. ACCESSIBILITY ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-r] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .text-gradient,
  .text-gradient-warm {
    animation: none !important;
  }

  .marquee-track {
    animation-play-state: paused !important;
  }

  main,
  footer {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}