/* ════════════════════════════════════════════════════════════
   BRIX TECH — Sistema visual
   1. Tokens · 2. Reset · 3. Tipografia · 4. Utilitários
   5. Background · 6. Preloader · 7. Cursor · 8. Header · 9. Botões
   ════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root{
  /* superfícies */
  --bg:            #05060B;
  --bg-soft:       #0A0D18;
  --surface:       rgba(255,255,255,.035);
  --surface-2:     rgba(255,255,255,.06);
  --line:          rgba(255,255,255,.10);
  --line-soft:     rgba(255,255,255,.055);

  /* texto */
  --txt:           #EDEFF7;
  --txt-2:         #A8AFC9;
  --txt-3:         #858DA8;

  /* marca */
  --brand:         #4C7DFF;
  --brand-2:       #9A6BFF;
  --brand-3:       #FF6B4A;
  --brand-ink:     #FFFFFF;
  --danger:        #FF6B4A;

  --grad:          linear-gradient(100deg, var(--brand) 0%, var(--brand-2) 48%, var(--brand-3) 100%);
  --grad-soft:     linear-gradient(140deg, rgba(76,125,255,.16), rgba(154,107,255,.10) 45%, rgba(255,107,74,.10));
  --glow:          rgba(76,125,255,.30);
  /* stops mais fechados que --grad: branco sobre eles passa em AA */
  --grad-btn:      linear-gradient(100deg, #3A66E8 0%, #6C3FD8 48%, #C93F1C 100%);

  /* canvas */
  --canvas-ink:    255,255,255;
  --canvas-alpha:  1;

  /* forma */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* ritmo */
  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --sec-y: clamp(80px, 11vw, 160px);

  /* movimento */
  --e-out:  cubic-bezier(.22,.61,.36,1);
  --e-soft: cubic-bezier(.4,0,.2,1);
  --e-back: cubic-bezier(.34,1.4,.64,1);

  --shadow:    0 30px 70px -30px rgba(0,0,0,.85);
  --shadow-sm: 0 12px 30px -14px rgba(0,0,0,.7);

  --header-h: 76px;
}

[data-theme="light"]{
  --bg:            #F4F5FA;
  --bg-soft:       #FFFFFF;
  --surface:       rgba(12,16,34,.028);
  --surface-2:     rgba(12,16,34,.05);
  --line:          rgba(12,16,34,.11);
  --line-soft:     rgba(12,16,34,.07);

  --txt:           #0A0D1A;
  --txt-2:         #4C5468;
  --txt-3:         #666D80;

  --brand:         #2B57E0;
  --brand-2:       #7A45E8;
  --brand-3:       #E24A25;
  --danger:        #C93F1C;

  --grad-soft:     linear-gradient(140deg, rgba(43,87,224,.09), rgba(122,69,232,.07) 45%, rgba(226,74,37,.07));
  --glow:          rgba(43,87,224,.22);

  --canvas-ink:    12,18,44;
  --canvas-alpha:  .85;

  --shadow:    0 30px 60px -32px rgba(20,28,60,.28);
  --shadow-sm: 0 12px 28px -16px rgba(20,28,60,.24);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
}

body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:clamp(15.5px, .35vw + 15px, 17px);
  line-height:1.65;
  font-weight:400;
  overflow-x:clip;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color .45s var(--e-soft), color .45s var(--e-soft);
}

img,svg,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
summary{ cursor:pointer; list-style:none; }
summary::-webkit-details-marker{ display:none; }

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}

::selection{ background:var(--brand); color:#fff; }

/* scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{
  background:var(--surface-2); border-radius:99px;
  border:3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{ background:var(--brand); }

.skip-link{
  position:fixed; top:12px; left:12px; z-index:200;
  padding:10px 18px; border-radius:99px;
  background:var(--brand); color:#fff; font-weight:600;
  transform:translateY(-160%); transition:transform .25s var(--e-out);
}
.skip-link:focus-visible{ transform:none; }

/* ── 3. TIPOGRAFIA ─────────────────────────────────────────── */
h1,h2,h3,h4,.brand__name,.step__n,.values__n{
  font-family:'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.03em;
}

.sec-title{
  font-size:clamp(2.1rem, 5.4vw, 4.05rem);
  letter-spacing:-.038em;
  text-wrap:balance;
}
.sec-desc{
  color:var(--txt-2);
  max-width:46ch;
  font-size:clamp(1rem, .5vw + .9rem, 1.13rem);
}
.sec-desc--center{ margin-inline:auto; text-align:center; }

.grad{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.lead{
  font-size:clamp(1.06rem, 1vw + .85rem, 1.32rem);
  line-height:1.6;
  color:var(--txt);
  letter-spacing:-.012em;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-2);
}
.eyebrow i{
  width:26px; height:2px; border-radius:2px;
  background:var(--grad); flex:none;
}

/* ── 4. UTILITÁRIOS / LAYOUT ───────────────────────────────── */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  position:relative;
  padding-block:var(--sec-y);
  scroll-margin-top:var(--header-h);
}

.sec-head{ margin-bottom:clamp(40px, 6vw, 76px); }
.sec-head .eyebrow{ margin-bottom:22px; }

.sec-head--split{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(24px, 4vw, 64px); align-items:end;
}
.sec-head--center{ text-align:center; display:grid; justify-items:center; gap:0; }
.sec-head--center .sec-title{ margin-bottom:22px; }

/* revelação por scroll */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--e-out), transform .85s var(--e-out);
  transition-delay:calc(var(--d, 0) * 90ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* título dividido em palavras */
.word{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.word > i{
  display:inline-block; font-style:normal;
  transform:translateY(105%);
  transition:transform .95s var(--e-out);
  transition-delay:calc(var(--wd, 0) * 42ms);
}
[data-split].is-in .word > i{ transform:none; }

/* ── 5. BACKGROUND ─────────────────────────────────────────── */
.bg{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none; overflow:hidden;
  background:
    radial-gradient(115% 78% at 50% -12%, rgba(76,125,255,.14), transparent 62%),
    var(--bg);
  transition:background-color .45s var(--e-soft);
}
.bg__canvas{ position:absolute; inset:0; width:100%; height:100%; }

.bg__aurora{ position:absolute; inset:-18%; filter:blur(90px); opacity:.62; }
[data-theme="light"] .bg__aurora{ opacity:.42; filter:blur(80px); }

.blob{
  position:absolute; border-radius:50%;
  mix-blend-mode:screen;
  will-change:transform;
}
[data-theme="light"] .blob{ mix-blend-mode:multiply; opacity:.5; }

.blob--1{
  width:46vw; height:46vw; left:-6vw; top:-4vw;
  background:radial-gradient(circle at 40% 40%, rgba(76,125,255,.55), transparent 66%);
  animation:drift1 26s var(--e-soft) infinite alternate;
}
.blob--2{
  width:40vw; height:40vw; right:-8vw; top:12vh;
  background:radial-gradient(circle at 50% 50%, rgba(154,107,255,.46), transparent 66%);
  animation:drift2 32s var(--e-soft) infinite alternate;
}
.blob--3{
  width:34vw; height:34vw; left:32vw; bottom:-14vw;
  background:radial-gradient(circle at 50% 50%, rgba(255,107,74,.34), transparent 66%);
  animation:drift3 38s var(--e-soft) infinite alternate;
}
@keyframes drift1{ to{ transform:translate3d(9vw,7vh,0) scale(1.16); } }
@keyframes drift2{ to{ transform:translate3d(-11vw,10vh,0) scale(1.1); } }
@keyframes drift3{ to{ transform:translate3d(7vw,-9vh,0) scale(1.2); } }

.bg__grain{
  position:absolute; inset:-50%;
  opacity:.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
[data-theme="light"] .bg__grain{ opacity:.3; mix-blend-mode:multiply; }
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-4%,3%) }  40%{ transform:translate(3%,-4%) }
  60%{ transform:translate(-3%,-3%) } 80%{ transform:translate(4%,2%) }
}

.bg__vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 40%, transparent 42%, var(--bg) 100%);
  opacity:.9;
}

/* ── 6. PRELOADER ──────────────────────────────────────────── */
.preloader{
  position:fixed; inset:0; z-index:300;
  display:grid; place-content:center; justify-items:center; gap:26px;
  background:var(--bg);
  transition:opacity .7s var(--e-soft), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }

.preloader__mark{
  width:64px; height:64px;
  display:grid; grid-template:repeat(2,1fr)/repeat(2,1fr); gap:5px;
}
.preloader__brick{
  border-radius:4px; background:var(--grad);
  opacity:.18; transform:scale(.72);
  animation:brick 1.5s var(--e-out) infinite;
  animation-delay:calc(var(--i) * .13s);
}
@keyframes brick{
  0%,100%{ opacity:.16; transform:scale(.7) }
  40%{ opacity:1; transform:scale(1) }
}

.preloader__label{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  letter-spacing:.36em; font-size:.82rem; padding-left:.36em;
}
.preloader__label span{ color:var(--txt-3); }

.preloader__bar{
  width:190px; height:2px; border-radius:2px;
  background:var(--line); overflow:hidden;
}
.preloader__bar i{
  display:block; height:100%; width:40%;
  background:var(--grad); border-radius:2px;
  animation:load 1.15s var(--e-soft) infinite;
}
@keyframes load{ 0%{ transform:translateX(-110%) } 100%{ transform:translateX(360%) } }

/* ── 7. CURSOR ─────────────────────────────────────────────── */
.cursor{ display:none; }
@media (pointer:fine){
  .cursor{
    display:block; position:fixed; top:0; left:0;
    z-index:250; pointer-events:none;
    mix-blend-mode:difference;
  }
  .cursor__dot,.cursor__ring{
    position:absolute; border-radius:50%;
    translate:-50% -50%;
  }
  .cursor__dot{
    width:6px; height:6px; background:#fff;
    transition:opacity .2s;
  }
  .cursor__ring{
    width:34px; height:34px;
    border:1.5px solid rgba(255,255,255,.6);
    transition:width .3s var(--e-out), height .3s var(--e-out),
               border-color .3s, opacity .3s;
  }
  .cursor.is-hot .cursor__ring{ width:58px; height:58px; border-color:#fff; }
  .cursor.is-hot .cursor__dot{ opacity:0; }
  .cursor.is-hidden{ opacity:0; }
}

/* barra de progresso do scroll */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:120;
  height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--grad);
  will-change:transform;
}

/* ── 8. HEADER ─────────────────────────────────────────────── */
.header{
  position:fixed; top:0; left:0; right:0; z-index:110;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:height .35s var(--e-out), background-color .35s var(--e-soft),
             border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  height:64px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line-soft);
}
.header__inner{ display:flex; align-items:center; gap:24px; }

.brand{ display:inline-flex; align-items:center; gap:11px; flex:none; }
.brand__mark{
  width:34px; height:34px;
  transition:transform .5s var(--e-back);
}
.brand:hover .brand__mark{ transform:rotate(-10deg) scale(1.08); }
.brand__name{
  font-size:1.2rem; font-weight:700; letter-spacing:-.03em;
}
.brand__name em{
  font-style:normal; font-weight:500; color:var(--txt-3);
}

.nav{
  display:flex; align-items:center; gap:4px;
  margin-inline:auto;
}
.nav a{
  position:relative;
  padding:9px 15px; border-radius:99px;
  font-size:.93rem; font-weight:500; color:var(--txt-2);
  transition:color .25s, background-color .25s;
}
.nav a::after{
  content:''; position:absolute; left:15px; right:15px; bottom:4px;
  height:1.5px; border-radius:2px; background:var(--grad);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .4s var(--e-out);
}
.nav a:hover{ color:var(--txt); }
.nav a.is-active{ color:var(--txt); }
.nav a.is-active::after{ transform:scaleX(1); }

.header__actions{ display:flex; align-items:center; gap:10px; flex:none; }

.icon-btn{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:11px;
  border:1px solid var(--line); color:var(--txt-2);
  background:var(--surface);
  transition:color .25s, border-color .25s, transform .25s var(--e-out), background-color .25s;
}
.icon-btn:hover{ color:var(--txt); border-color:var(--brand); transform:translateY(-2px); }
.icon-sun{ display:none; }
[data-theme="light"] .icon-sun{ display:block; }
[data-theme="light"] .icon-moon{ display:none; }

.burger{
  display:none; width:38px; height:38px;
  border-radius:11px; border:1px solid var(--line);
  background:var(--surface);
  place-items:center; gap:5px; align-content:center;
}
.burger span{
  display:block; width:16px; height:1.6px; border-radius:2px;
  background:var(--txt);
  transition:transform .35s var(--e-out), opacity .25s;
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }

/* ── MENU MOBILE ───────────────────────────────────────────── */
.menu{
  position:fixed; inset:0; z-index:105;
  padding:calc(var(--header-h) + 30px) var(--gutter) 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  opacity:0; transition:opacity .4s var(--e-soft);
}
.menu.is-open{ opacity:1; }
/* o `display:flex` acima venceria a regra [hidden]{display:none} do navegador
   (estilo de autor > user agent). Sem isto, o menu fechado permanece como uma
   camada invisivel de tela cheia interceptando todos os cliques da pagina. */
.menu[hidden]{ display:none; }
.menu__nav{ display:flex; flex-direction:column; gap:2px; }
.menu__nav a{
  display:flex; align-items:baseline; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line-soft);
  font-family:'Space Grotesk', sans-serif;
  font-size:clamp(1.7rem, 8vw, 2.4rem); font-weight:600; letter-spacing:-.03em;
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out), color .25s;
}
.menu.is-open .menu__nav a{ opacity:1; transform:none; }
.menu__nav a:nth-child(1){ transition-delay:.06s } .menu__nav a:nth-child(2){ transition-delay:.11s }
.menu__nav a:nth-child(3){ transition-delay:.16s } .menu__nav a:nth-child(4){ transition-delay:.21s }
.menu__nav a:nth-child(5){ transition-delay:.26s } .menu__nav a:nth-child(6){ transition-delay:.31s }
.menu__nav a em{
  font-style:normal; font-size:.72rem; font-weight:600;
  letter-spacing:.18em; color:var(--txt-3);
}
.menu__nav a:active,.menu__nav a:hover{ color:var(--brand); }
.menu__foot{ display:flex; flex-direction:column; gap:6px; color:var(--txt-2); font-size:.95rem; }

/* ── 9. BOTÕES ─────────────────────────────────────────────── */
.btn{
  --btn-y:0px;
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 27px; border-radius:99px;
  font-size:.96rem; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap;
  transform:translateY(var(--btn-y));
  transition:transform .35s var(--e-out), box-shadow .35s var(--e-out),
             border-color .3s, color .3s, background-color .3s;
}
.btn svg{ transition:transform .35s var(--e-out); }
.btn:hover svg{ transform:translateX(4px); }

.btn--primary{
  color:var(--brand-ink);
  background:var(--grad-btn);
  background-size:180% 100%;
  box-shadow:0 12px 34px -14px var(--glow);
  transition:transform .35s var(--e-out), box-shadow .35s var(--e-out),
             background-position .6s var(--e-out);
}
.btn--primary:hover{
  background-position:100% 0;
  box-shadow:0 20px 44px -14px var(--glow);
}
.btn--ghost{
  color:var(--txt);
  border:1px solid var(--line);
  background:var(--surface);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{ border-color:var(--brand); background:var(--surface-2); }

.btn--sm{ padding:11px 20px; font-size:.9rem; }
.btn--block{ width:100%; }

/* ════════════════════════════════════════════════════════════
   10. Hero · 11. Marquee · 12. Manifesto · 13. Bento · 14. Processo
   ════════════════════════════════════════════════════════════ */

/* ── 10. HERO ──────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:calc(var(--header-h) + 36px) 72px;
  scroll-margin-top:0;
}
.hero__inner{ display:grid; justify-items:start; }

.hero .eyebrow{
  padding:8px 16px 8px 12px; border-radius:99px;
  border:1px solid var(--line-soft);
  background:var(--surface);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  margin-bottom:clamp(22px, 3vw, 32px);
}

.hero__title{
  font-size:clamp(2.5rem, 6.1vw, 5.15rem);
  letter-spacing:-.045em;
  max-width:17ch;
  margin-bottom:clamp(20px, 2.4vw, 26px);
  text-wrap:balance;
}

.hero__lead{
  max-width:56ch;
  font-size:clamp(1.02rem, .7vw + .86rem, 1.2rem);
  color:var(--txt-2);
  line-height:1.6;
  margin-bottom:clamp(26px, 3vw, 36px);
}

.hero__cta{
  display:flex; flex-wrap:wrap; gap:13px;
  margin-bottom:clamp(40px, 4.6vw, 52px);
}

.hero__facts{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(18px, 3vw, 46px);
  width:100%; max-width:780px;
  padding-top:clamp(20px, 2.4vw, 28px);
  border-top:1px solid var(--line-soft);
}
.hero__facts li{ display:grid; gap:6px; }
.hero__facts strong{
  font-family:'Space Grotesk', sans-serif;
  font-size:clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight:600; letter-spacing:-.04em;
  line-height:1;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.hero__facts span{
  font-size:.86rem; line-height:1.45; color:var(--txt-3);
}

.hero__scroll{
  position:absolute; left:50%; bottom:30px;
  translate:-50% 0;
  display:flex; align-items:center; gap:11px;
  font-size:.73rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-3);
  animation:fadeUp 1s var(--e-out) 1.4s both;
}
.hero__scroll span{
  position:relative;
  width:22px; height:34px; border-radius:99px;
  border:1.5px solid var(--line);
}
.hero__scroll span::after{
  content:''; position:absolute; left:50%; top:7px;
  width:3px; height:6px; border-radius:2px;
  background:var(--brand); translate:-50% 0;
  animation:wheel 1.9s var(--e-soft) infinite;
}
@keyframes wheel{ 0%{ opacity:0; transform:translateY(0) } 35%{ opacity:1 } 100%{ opacity:0; transform:translateY(11px) } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ── 11. MARQUEE ───────────────────────────────────────────── */
.strip{
  position:relative;
  border-block:1px solid var(--line-soft);
  background:color-mix(in srgb, var(--bg-soft) 55%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding-block:6px;
}

.marquee{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__group{ display:flex; align-items:center; flex:none; }
/* repeticoes do marquee: nao criam caixa propria, so escondem do leitor de tela */
.marquee__dup{ display:contents; }

.marquee__item{
  font-family:'Space Grotesk', sans-serif;
  font-size:clamp(1rem, 1.5vw, 1.28rem);
  font-weight:500; letter-spacing:-.02em;
  padding:15px 0; white-space:nowrap;
  color:var(--txt);
}
.marquee__sep{
  width:7px; height:7px; margin-inline:clamp(20px, 3vw, 38px);
  border-radius:2px; background:var(--grad);
  flex:none; rotate:45deg; opacity:.85;
}
.marquee--alt{ border-top:1px solid var(--line-soft); }
.marquee--alt .marquee__item{
  font-size:clamp(.85rem, 1.1vw, .98rem);
  font-family:'Inter', sans-serif;
  color:var(--txt-3); padding:11px 0;
  letter-spacing:.01em;
}
.marquee--alt .marquee__sep{ background:var(--txt-3); opacity:.4; width:5px; height:5px; }

/* chips (stack) */
.stack__rows{ display:grid; gap:14px; margin-top:clamp(10px, 2vw, 20px); }
.marquee--chips .marquee__group{ gap:14px; padding-right:14px; }
.chip{
  display:inline-flex; align-items:center;
  padding:13px 24px; border-radius:99px;
  border:1px solid var(--line);
  background:var(--surface);
  font-size:.95rem; font-weight:500; white-space:nowrap;
  color:var(--txt-2);
  transition:color .3s, border-color .3s, background-color .3s, transform .3s var(--e-out);
}
.chip:hover{ color:var(--txt); border-color:var(--brand); transform:translateY(-3px); }

/* ── 12. MANIFESTO ─────────────────────────────────────────── */
.manifesto__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(34px, 6vw, 88px); align-items:start;
}
.manifesto__text{ display:grid; gap:20px; }
.manifesto__text p:not(.lead){ color:var(--txt-2); }

.pill-list{ display:flex; flex-wrap:wrap; gap:9px; margin-top:8px; }
.pill-list li{
  padding:9px 17px; border-radius:99px;
  border:1px solid var(--line); background:var(--surface);
  font-size:.85rem; font-weight:500; color:var(--txt-2);
}

.values{ display:grid; gap:14px; }
.values li{
  position:relative;
  padding:clamp(22px, 3vw, 30px);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(160deg, var(--surface), transparent 70%);
  transform-style:preserve-3d;
  transition:border-color .4s, background-color .4s, transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.values li:hover{
  border-color:color-mix(in srgb, var(--brand) 45%, var(--line));
  box-shadow:var(--shadow-sm);
}
.values__n{
  display:block; font-size:.78rem; font-weight:600;
  letter-spacing:.14em; color:var(--brand); margin-bottom:12px;
}
.values h3{ font-size:1.22rem; margin-bottom:9px; letter-spacing:-.025em; }
.values p{ color:var(--txt-2); font-size:.97rem; }

/* ── 13. BENTO / SOLUÇÕES ──────────────────────────────────── */
.bento{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px, 1.6vw, 18px);
}
.card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(24px, 2.9vw, 36px);
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:
    linear-gradient(165deg, var(--surface) 0%, transparent 62%),
    color-mix(in srgb, var(--bg-soft) 46%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .45s var(--e-soft), transform .55s var(--e-out), box-shadow .55s var(--e-out);
}
.card--lg{ grid-column:span 1; grid-row:span 2; }
.card--wide{ grid-column:span 2; }

.card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--brand) 42%, var(--line));
  box-shadow:var(--shadow);
}

/* holofote que segue o mouse */
.card__glow{
  position:absolute; inset:-1px; z-index:-1;
  border-radius:inherit; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
              color-mix(in srgb, var(--brand) 26%, transparent), transparent 62%);
  transition:opacity .45s var(--e-soft);
}
.card:hover .card__glow{ opacity:1; }

.card__ico{
  width:50px; height:50px; margin-bottom:auto;
  display:grid; place-items:center;
  border-radius:15px;
  border:1px solid var(--line);
  background:var(--grad-soft);
  color:var(--brand);
  transition:transform .5s var(--e-back), color .4s, border-color .4s;
}
.card__ico svg{ width:23px; height:23px; }
.card:hover .card__ico{
  transform:translateY(-3px) rotate(-6deg);
  border-color:color-mix(in srgb, var(--brand) 50%, transparent);
}

.card h3{
  font-size:clamp(1.24rem, 1.5vw, 1.5rem);
  letter-spacing:-.028em;
  margin:clamp(28px, 4vw, 46px) 0 11px;
}
.card p{ color:var(--txt-2); font-size:.98rem; }

.card__tags{
  display:flex; flex-wrap:wrap; gap:7px;
  margin-top:22px; padding-top:19px;
  border-top:1px solid var(--line-soft);
}
.card__tags li{
  padding:6px 13px; border-radius:99px;
  background:var(--surface-2);
  font-size:.78rem; font-weight:500; color:var(--txt-3);
  transition:color .3s, background-color .3s;
}
.card:hover .card__tags li{ color:var(--txt-2); }

/* ── 14. PROCESSO (scroll horizontal) ──────────────────────── */
.process{
  position:relative;
  scroll-margin-top:0;
  padding-block:0;
}
.process__sticky{
  position:sticky; top:0;
  height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(30px, 5vh, 60px);
  overflow:hidden;
}
.process__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; flex-wrap:wrap;
}
.process__head .eyebrow{ margin-bottom:18px; }
.process__meter{
  width:min(280px, 40vw); height:3px; border-radius:3px;
  background:var(--line); overflow:hidden; margin-bottom:10px;
}
.process__meter i{
  display:block; height:100%; width:100%;
  background:var(--grad); border-radius:3px;
  transform:scaleX(.04); transform-origin:0 50%;
  transition:transform .12s linear;
}

.process__rail{
  display:flex; align-items:stretch;
  gap:clamp(14px, 1.8vw, 22px);
  padding-inline:max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
  will-change:transform;
}
.step{
  flex:0 0 clamp(280px, 27vw, 400px);
  display:flex; flex-direction:column;
  padding:clamp(26px, 2.6vw, 36px);
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:
    linear-gradient(165deg, var(--surface) 0%, transparent 60%),
    color-mix(in srgb, var(--bg-soft) 46%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .4s, transform .5s var(--e-out);
}
.step:hover{ border-color:color-mix(in srgb, var(--brand) 40%, var(--line)); }

.step__n{
  display:block;
  font-size:clamp(2.4rem, 3.6vw, 3.4rem);
  font-weight:700; letter-spacing:-.05em; line-height:1;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:auto;
}
.step h3{
  font-size:clamp(1.4rem, 1.9vw, 1.8rem);
  letter-spacing:-.03em;
  margin:clamp(30px, 4vw, 52px) 0 12px;
}
.step p{ color:var(--txt-2); font-size:.98rem; }
.step ul{
  display:grid; gap:9px;
  margin-top:22px; padding-top:20px;
  border-top:1px solid var(--line-soft);
}
.step ul li{
  position:relative; padding-left:19px;
  font-size:.89rem; color:var(--txt-3);
}
.step ul li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:2px; rotate:45deg;
  background:var(--grad);
}

.step--cta{
  justify-content:center; gap:16px;
  background:var(--grad-soft);
  border-color:color-mix(in srgb, var(--brand) 30%, var(--line));
}
.step--cta h3{ margin:0; font-size:clamp(1.5rem, 2.2vw, 2rem); }
.step--cta p{ margin-bottom:8px; }
.step--cta .btn{ align-self:flex-start; }

/* ════════════════════════════════════════════════════════════
   15. Números · 16. Depoimentos · 17. FAQ · 18. Contato
   19. Footer · 20. Responsivo · 21. Acessibilidade
   ════════════════════════════════════════════════════════════ */

/* ── 15. NÚMEROS ───────────────────────────────────────────── */
.numbers{ padding-block:clamp(50px, 7vw, 92px); }
.numbers__grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--line);
}
.numbers__item{
  padding:clamp(26px, 3vw, 40px);
  background:color-mix(in srgb, var(--bg-soft) 60%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:background-color .4s;
}
.numbers__item:hover{ background:color-mix(in srgb, var(--brand) 8%, var(--bg-soft)); }
.numbers__item strong{
  display:block;
  font-family:'Space Grotesk', sans-serif;
  font-size:clamp(2.3rem, 4.3vw, 3.5rem);
  font-weight:600; letter-spacing:-.045em; line-height:1;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
  margin-bottom:10px;
}
.numbers__item span{
  display:block; font-weight:600; font-size:1rem;
  letter-spacing:-.015em; margin-bottom:8px;
}
.numbers__item p{ color:var(--txt-3); font-size:.88rem; line-height:1.5; }

/* ── 16. DEPOIMENTOS ───────────────────────────────────────── */
.marquee--quotes{ padding-block:6px; }
.marquee--quotes .marquee__group{ gap:clamp(14px, 1.8vw, 22px); padding-right:clamp(14px, 1.8vw, 22px); }
.quote{
  flex:0 0 clamp(290px, 30vw, 430px);
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  padding:clamp(26px, 2.6vw, 34px);
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:
    linear-gradient(165deg, var(--surface), transparent 65%),
    color-mix(in srgb, var(--bg-soft) 45%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .4s, transform .5s var(--e-out);
}
.quote:hover{ border-color:color-mix(in srgb, var(--brand) 40%, var(--line)); transform:translateY(-4px); }
.quote blockquote{
  position:relative; padding-top:34px;
  font-size:1.04rem; line-height:1.6; letter-spacing:-.012em;
  text-wrap:pretty;
}
.quote blockquote::before{
  content:'“';
  position:absolute; top:-14px; left:-4px;
  font-family:'Space Grotesk', serif;
  font-size:4.6rem; line-height:1;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.8;
}
.quote figcaption{ display:grid; gap:2px; }
.quote figcaption strong{ font-size:.95rem; font-weight:600; }
.quote figcaption span{ font-size:.85rem; color:var(--txt-3); }

/* ── 17. FAQ ───────────────────────────────────────────────── */
.faq__inner{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(34px, 6vw, 84px); align-items:start;
}
.faq__aside{ position:sticky; top:calc(var(--header-h) + 34px); display:grid; justify-items:start; }
.faq__aside .eyebrow{ margin-bottom:22px; }
.faq__aside .sec-title{ margin-bottom:20px; }
.faq__aside .sec-desc{ margin-bottom:28px; }

.faq__list{ display:grid; gap:10px; }
.acc{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--bg-soft) 42%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .35s, background-color .35s;
}
.acc:hover{ border-color:color-mix(in srgb, var(--brand) 36%, var(--line)); }
.acc[open]{ border-color:color-mix(in srgb, var(--brand) 46%, var(--line)); }

.acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(18px, 2.2vw, 24px) clamp(20px, 2.4vw, 28px);
  font-family:'Space Grotesk', sans-serif;
  font-size:clamp(1.02rem, 1.2vw, 1.14rem);
  font-weight:500; letter-spacing:-.022em; line-height:1.35;
  transition:color .25s;
}
.acc summary:hover{ color:var(--brand); }
.acc summary i{
  position:relative; flex:none;
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line);
  transition:transform .4s var(--e-out), border-color .3s, background-color .3s;
}
.acc summary i::before,.acc summary i::after{
  content:''; position:absolute; inset:50% 7px auto 7px;
  height:1.5px; border-radius:2px; background:currentColor;
  translate:0 -50%;
  transition:opacity .3s var(--e-out), transform .4s var(--e-out);
}
.acc summary i::after{ rotate:90deg; }
.acc[open] summary i{ transform:rotate(180deg); border-color:var(--brand); }
.acc[open] summary i::after{ opacity:0; }

.acc__body{
  padding:0 clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 26px);
  color:var(--txt-2); font-size:.98rem;
  max-width:62ch;
}
.acc[open] .acc__body{ animation:accIn .45s var(--e-out) both; }
@keyframes accIn{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }

/* ── 18. CONTATO ───────────────────────────────────────────── */
.contact__box{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(34px, 5vw, 70px);
  padding:clamp(30px, 4.4vw, 66px);
  border-radius:clamp(24px, 3vw, 40px);
  border:1px solid var(--line);
  background:
    linear-gradient(155deg, var(--surface) 0%, transparent 55%),
    color-mix(in srgb, var(--bg-soft) 62%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
}
.contact__glow{
  position:absolute; z-index:-1;
  width:60%; aspect-ratio:1; top:-30%; right:-14%;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, transparent), transparent 66%);
  filter:blur(58px);
}
.contact__intro .eyebrow{ margin-bottom:20px; }
.contact__intro .sec-title{ font-size:clamp(1.9rem, 3.6vw, 3rem); margin-bottom:18px; }
.contact__intro .sec-desc{ margin-bottom:32px; }

.contact__links{ display:grid; gap:15px; }
.contact__links li{
  display:flex; align-items:center; gap:12px;
  font-size:.97rem; color:var(--txt-2);
}
.contact__links svg{ color:var(--brand); flex:none; }
.contact__links a{ transition:color .25s; }
.contact__links a:hover{ color:var(--brand); }

.form{ display:grid; gap:15px; align-content:start; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }

.field{ display:grid; gap:8px; }
.field > span{
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--txt-2);
}
.field input,.field select,.field textarea{
  width:100%;
  padding:14px 17px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 45%, transparent);
  font-size:.96rem;
  transition:border-color .3s, background-color .3s, box-shadow .3s;
}
.field textarea{ resize:vertical; min-height:112px; font-family:inherit; }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A92AD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right:44px;
}
.field select option{ background:var(--bg-soft); color:var(--txt); }
.field input::placeholder,.field textarea::placeholder{ color:var(--txt-3); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.field.is-error input,.field.is-error textarea{ border-color:var(--danger); }

.form .btn{ margin-top:6px; }
.form__note{
  font-size:.83rem; color:var(--txt-3); text-align:center;
  min-height:1.4em;
}
.form__note.is-error{ color:var(--danger); }
.form__note.is-ok{ color:var(--brand); }

/* ── 19. FOOTER ────────────────────────────────────────────── */
.footer{
  position:relative; overflow:hidden;
  margin-top:clamp(50px, 8vw, 110px);
  padding-top:clamp(50px, 7vw, 88px);
  border-top:1px solid var(--line-soft);
  background:color-mix(in srgb, var(--bg-soft) 55%, transparent);
}
.footer__top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(30px, 4vw, 56px);
  padding-bottom:clamp(40px, 5vw, 62px);
}
.footer__brand{ display:grid; justify-items:start; gap:18px; max-width:34ch; }
.footer__brand p{ color:var(--txt-3); font-size:.94rem; }

.footer__col{ display:flex; flex-direction:column; gap:11px; align-items:start; }
.footer__col h4{
  font-size:.78rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--txt-3);
  margin-bottom:5px;
}
.footer__col a{
  font-size:.95rem; color:var(--txt-2);
  transition:color .25s, transform .25s var(--e-out);
}
.footer__col a:hover{ color:var(--brand); transform:translateX(3px); }
.footer__addr{ font-size:.88rem; color:var(--txt-3); line-height:1.6; margin-top:4px; }

.footer__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-block:24px;
  border-top:1px solid var(--line-soft);
  font-size:.86rem; color:var(--txt-3);
}
.footer__made{ display:flex; align-items:center; gap:8px; }

.footer__wordmark{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; letter-spacing:-.05em;
  font-size:clamp(3.6rem, 15.5vw, 15rem);
  line-height:.78;
  text-align:center;
  padding-inline:var(--gutter);
  background:linear-gradient(180deg, color-mix(in srgb, var(--txt) 12%, transparent), transparent 82%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  user-select:none;
  margin-bottom:-.1em;
}

/* ── voltar ao topo ────────────────────────────────────────── */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:100;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--bg-soft) 80%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--txt-2);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity .35s var(--e-out), transform .35s var(--e-out),
             visibility .35s, color .25s, border-color .25s;
}
.to-top.is-on{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ color:var(--txt); border-color:var(--brand); }

/* ── 20. RESPONSIVO ────────────────────────────────────────── */
@media (max-width:1080px){
  .sec-head--split{ grid-template-columns:1fr; align-items:start; }
  .bento{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .card--lg{ grid-row:span 1; grid-column:span 2; }
  .card--wide{ grid-column:span 2; }
  .numbers__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .manifesto__grid{ grid-template-columns:1fr; }
  .faq__inner{ grid-template-columns:1fr; }
  .faq__aside{ position:static; }
  .contact__box{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width:900px){
  :root{ --header-h:66px; }
  .nav{ display:none; }
  .burger{ display:grid; }
  .header__actions .btn{ display:none; }

  .hero{ min-height:auto; padding-block:calc(var(--header-h) + 74px) 90px; }
  .hero__scroll{ display:none; }
  .hero__facts{ grid-template-columns:1fr; gap:20px; }
  .hero__facts li{ grid-template-columns:auto 1fr; align-items:center; gap:14px; }
  .hero__facts span br{ display:none; }

  /* processo vira scroll horizontal nativo */
  .process{ height:auto !important; padding-block:var(--sec-y); }
  .process__sticky{ position:static; height:auto; gap:34px; overflow:visible; }
  .process__meter{ display:none; }
  .process__rail{
    transform:none !important;
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:10px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .process__rail::-webkit-scrollbar{ display:none; }
  .step{ flex-basis:min(84vw, 380px); scroll-snap-align:center; }
}

@media (max-width:680px){
  .bento{ grid-template-columns:1fr; }
  .card--lg,.card--wide{ grid-column:span 1; }
  .numbers__grid{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__bar{ justify-content:center; text-align:center; }
  .to-top{ right:16px; bottom:16px; }
}

/* ── 21. ACESSIBILIDADE / MOVIMENTO ────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .word > i{ transform:none !important; }
  .cursor{ display:none !important; }
  .bg__grain{ display:none; }

  /* o processo deixa de sequestrar a rolagem e vira scroll horizontal nativo */
  .process{ height:auto !important; padding-block:var(--sec-y); }
  .process__sticky{ position:static; height:auto; gap:34px; overflow:visible; }
  .process__meter{ display:none; }
  .process__rail{
    transform:none !important;
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:10px; scrollbar-width:none;
  }
  .process__rail::-webkit-scrollbar{ display:none; }
  .step{ flex-basis:min(84vw, 380px); scroll-snap-align:center; }
}

@media print{
  .bg,.cursor,.to-top,.header,.preloader,.scroll-progress,.marquee,.footer__wordmark{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:24px; page-break-inside:avoid; }
}