/* ============================================================
   Shift Apps - Landing Page
   Design tokens + base + animações + responsividade + a11y
   ============================================================ */

:root{
  --ink:    #0A0A0A;   /* preto da marca (texto/bordas) */
  --paper:  #F3F1EB;   /* fundo creme */
  --surface:#F0EDE5;   /* superficie editorial secundaria */
  --cream-strong:#F8F4EA;
  --dark:   #080808;   /* fundo tecnico */
  --accent: #FF4D1C;   /* laranja de acento */
  --line:   #000;      /* traço das bordas */
  --shadow-hard: 5px 5px 0 var(--line);   /* sombra neo-brutalista padrão */
  --radius:  16px;
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Sistema de design (Fase 1) */
  --accent-press:#E63E10;            /* laranja pressionado */
  --muted:  #6b645c;                 /* texto secundário sobre creme */
  --line-soft: rgba(10,10,10,.12);   /* borda fina contida */
  --border-w: 1.5px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow-card: 4px 4px 0 var(--ink);                 /* sombra dura contida */
  --shadow-float: 0 24px 60px -32px rgba(10,10,10,.30);/* elevação suave editorial */
  --signal: #3ddc7e;                 /* status pontual, uso restrito (micro-dots) */
  --container: 1240px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; background:var(--paper); overflow-x:clip; }
body{ -webkit-font-smoothing:antialiased; }
::selection{ background:var(--accent); color:#000; }

/* --- Acessibilidade: foco visível por teclado --- */
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px; }
:focus:not(:focus-visible){ outline:none; }

/* ============================================================
   Camada de sistema: layout, tipografia, botões, terminal
   ============================================================ */

/* --- Layout --- */
.container{
  max-width:var(--container);
  margin-left:auto;
  margin-right:auto;
  padding-left:32px;
  padding-right:32px;
}

/* --- Tipografia editorial --- */
.display{
  font-family:Syne,sans-serif;
  font-weight:800;
  line-height:.95;
  letter-spacing:-.03em;
}
.lead{
  font-family:Inter,sans-serif;
  font-weight:400;
  font-size:clamp(14px,1.1vw,16px);
  line-height:1.55;
}
.line-mask{
  display:block;
  overflow-x:visible;
  overflow-y:clip;
  padding-bottom:.08em;
}
.line-mask > span{ display:block; }

/* --- Botões (rótulos e estilos unificados) --- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:Syne,sans-serif;
  font-weight:700;
  font-size:15px;
  line-height:1;
  text-decoration:none;
  border:var(--border-w) solid transparent;
  border-radius:100px;
  padding:14px 26px;
  cursor:pointer;
  transition:transform .28s var(--ease-out), box-shadow .28s var(--ease-out), background .2s;
}
.btn--primary{
  background:var(--accent);
  color:var(--ink);
  border-color:var(--ink);
  box-shadow:var(--shadow-card);
}
.btn--primary:hover{ transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--ink); }
.btn--primary:active{ background:var(--accent-press); transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink); }
.btn--dark{ background:var(--ink); color:var(--paper); }
.btn--dark:hover{ transform:translateY(-2px); }
.btn--sm{ padding:10px 18px; font-size:14px; }
.btn--link{
  background:none;
  border:none;
  border-bottom:2px solid var(--ink);
  border-radius:0;
  padding:2px 0 3px;
  font-family:Inter,sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--ink);
}
.btn--link:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.btn-label{ display:inline-block; white-space:nowrap; }


/* --- Header --- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:var(--border-w) solid transparent;
}
.site-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--container);
  margin:0 auto;
  padding:18px 32px;
}
.site-brand{ text-decoration:none; color:var(--ink); }
.site-nav{ display:flex; align-items:center; gap:26px; }
.site-nav > a:not(.btn){
  position:relative;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  transition:color .2s;
}
.site-nav > a:not(.btn)::before{
  content:"→";
  position:absolute;
  left:-15px;
  color:var(--accent,#FF4D1C);
  font-family:'JetBrains Mono',monospace;
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .2s, transform .2s var(--ease-out);
}
.site-nav > a:not(.btn):hover,
.site-nav > a:not(.btn).is-current{ color:var(--accent,#FF4D1C); }
.site-nav > a:not(.btn):hover::before,
.site-nav > a:not(.btn).is-current::before{ opacity:1; transform:translateX(0); }
.site-nav .btn{ gap:7px; }
.cta-run{ color:var(--accent,#FF4D1C); }

/* Markup rico do menu mobile: neutralizado no desktop (>720px) */
@media (min-width:721px){
  .nav-eyebrow,
  .nav-foot__mail{ display:none; }
  .nav-foot{ display:contents; }
  .site-nav__link .nav-idx,
  .site-nav__link .nav-arrow,
  .site-nav__link .nav-desc{ display:none; }
  .site-nav__link .nav-body,
  .site-nav__link .nav-body strong{ display:inline; font:inherit; color:inherit; letter-spacing:normal; }
}

/* --- Hero --- */
.hero{ padding-top:48px; padding-bottom:40px; }
.hero__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:52px 44px;
  align-items:center;
}
.hero__intro, .hero__media{ min-width:0; }
.hero__media{ display:flex; justify-content:flex-end; }
.kicker-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:26px;
  border:var(--border-w) solid var(--ink);
  border-radius:100px;
  padding:7px 14px;
  background:#fff;
  font-family:Inter,sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.kicker-badge > i{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
.hero__title{ margin:0; font-size:clamp(34px,4.6vw,56px); }
.hero__title .is-accent{ color:var(--accent); }
.rotator{ display:inline-block; }
.rotator::after{
  content:"";
  display:inline-block;
  width:.06em;
  height:.82em;
  margin-left:.05em;
  background:currentColor;
  transform:translateY(.04em);
  animation:blink 1s step-end infinite;
}
.hero__sub{ max-width:480px; margin:22px 0 0; color:#222; }
.hero__cta{ display:flex; align-items:center; gap:22px; margin-top:34px; flex-wrap:wrap; }
.hero__verticals{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line-soft);
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.hero__verticals-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  flex-shrink:0;
}
.hero__verticals-list{ display:flex; flex-wrap:wrap; gap:6px; }
.hero__verticals-list a{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  color:var(--ink);
  text-decoration:none;
  padding:4px 11px;
  border:1px solid rgba(10,10,10,.22);
  border-radius:100px;
  transition:border-color .15s, color .15s;
  white-space:nowrap;
}
.hero__verticals-list a:hover{ border-color:var(--accent); color:var(--accent); }

/* --- Hero: mapa do sistema (núcleo + 5 frentes) --- */
.systemap{
  width:min(470px,100%);
  margin:0;
  border:1px solid var(--line-soft);
  border-radius:16px;
  background:var(--paper);
  box-shadow:0 16px 36px -22px rgba(10,10,10,.28);
  overflow:hidden;
}
.systemap__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 16px;
  border-bottom:1px solid var(--line-soft);
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.systemap__tag{ color:var(--muted); }
.systemap__signal{ display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:600; }
.systemap__signal > i{
  width:7px; height:7px; border-radius:50%;
  background:#3ddc7e; box-shadow:0 0 0 3px rgba(61,220,126,.18);
  animation:smapBlink 2.4s ease-in-out infinite;
}
.systemap__stage{ position:relative; }
.systemap__svg{
  display:block;
  width:100%;
  height:auto;
  /* malha de pontos discreta ao fundo */
  background:
    radial-gradient(rgba(10,10,10,.05) 1px, transparent 1.4px) 0 0 / 22px 22px;
}
.systemap__links line{
  stroke:rgba(10,10,10,.18);
  stroke-width:1.3;
  stroke-dasharray:2 5;
  stroke-linecap:round;
}
/* pacotes de dados percorrendo cada linha até o núcleo */
.systemap__flow line{
  stroke:var(--accent);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:1.5 129.5;
  stroke-dashoffset:0;
  animation:smapFlow 3.4s linear infinite;
}
.systemap__flow line:nth-child(2){ animation-delay:.68s; }
.systemap__flow line:nth-child(3){ animation-delay:1.36s; }
.systemap__flow line:nth-child(4){ animation-delay:2.04s; }
.systemap__flow line:nth-child(5){ animation-delay:2.72s; }

/* anel orbital girando devagar (os traços percorrem o círculo) */
.systemap__ring{
  fill:none; stroke:rgba(10,10,10,.12); stroke-width:.8;
  stroke-dasharray:2 5;
  transform-box:fill-box; transform-origin:center;
  animation:smapRingSpin 32s linear infinite;
}
/* nós: repouso discreto; ativo (em destaque/hover) acende + ganha anel laranja */
.systemap__node{ cursor:pointer; }
.systemap__dot{ fill:var(--paper); stroke:var(--ink); stroke-width:1.5; transition:fill .25s, stroke .25s, stroke-width .25s; }
.systemap__label{
  font-family:'JetBrains Mono',monospace;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  fill:var(--muted); transition:fill .25s;
}
.systemap__node.is-active .systemap__dot,
.systemap__node:hover .systemap__dot{ fill:var(--ink); stroke:var(--accent); stroke-width:2; }
.systemap__node.is-active .systemap__label,
.systemap__node:hover .systemap__label{ fill:var(--ink); }
@keyframes smapRingSpin{ to{ transform:rotate(360deg); } }
/* legenda da vertical em destaque */
.systemap__cap{
  margin:14px auto 0; max-width:412px; min-height:40px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-align:center;
  font-family:Inter,sans-serif;
}
.systemap__cap strong{ font-family:Syne,sans-serif; font-weight:800; font-size:14px; letter-spacing:-.01em; color:var(--ink); }
.systemap__cap strong b{ color:var(--accent); font-weight:800; }
.systemap__cap span{ font-size:12.5px; line-height:1.4; color:var(--muted); }

/* núcleo: a logo é o hub, com o gesto de afundar do header */
.systemap__core{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:15px 20px 13px;
  background:var(--paper);
  border:1.6px solid var(--ink);
  border-radius:15px;
  box-shadow:4px 4px 0 var(--ink);
}
.systemap__corelogo{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #0A0A0A;
  border-radius:11px;
  background:linear-gradient(180deg,#242424 0%, #0A0A0A 62%);
  box-shadow:4px 4px 0 var(--accent);
  transition:transform .14s var(--ease-out), box-shadow .14s var(--ease-out);
}
.systemap__core:hover .systemap__corelogo,
.systemap__core:focus-within .systemap__corelogo{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--accent);
}
.systemap__corelogo span{
  color:var(--accent);
  font-family:Syne,sans-serif;
  font-weight:800;
  font-size:24px;
  line-height:1;
}
.systemap__corename{
  font-family:Syne,sans-serif;
  font-weight:800;
  font-size:16px;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.systemap__corecap{
  font-family:'JetBrains Mono',monospace;
  font-size:7.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}
@keyframes smapFlow{
  from { stroke-dashoffset:0; }
  to   { stroke-dashoffset:-131; }
}
@keyframes smapDotLit{
  0%,72%,100% { fill:var(--paper); }
  86%         { fill:var(--ink); }
}
@keyframes smapLabelLit{
  0%,72%,100% { fill:var(--muted); }
  86%         { fill:var(--ink); }
}
@keyframes smapBlink{
  0%,100% { box-shadow:0 0 0 3px rgba(61,220,126,.18); }
  50%     { box-shadow:0 0 0 5px rgba(61,220,126,.06); }
}
/* a logo aperta sozinha 1x por ciclo completo dos conectores (sincronizado ao fluxo) */
@keyframes smapCorePress{
  0%,80%,100% { transform:translate(0,0);   box-shadow:4px 4px 0 var(--accent); }
  88%         { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--accent); }
}
/* só onde não há hover (touch): substitui o gesto de passar o mouse */
@media (hover:none){
  .systemap__corelogo{ animation:smapCorePress 3.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion:reduce){
  .systemap__flow line{ animation:none; opacity:0; }
  .systemap__dot,.systemap__label,.systemap__corelogo{ animation:none; }
  .systemap__label{ fill:var(--ink); }
  .systemap__signal > i{ animation:none; }
}

@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ justify-content:flex-start; }
  .systemap{ width:100%; max-width:440px; }
}
@media (max-width:560px){
  .container{ padding-left:20px; padding-right:20px; }
  .site-header__bar{ padding:16px 20px; }
  .social__inner{ padding:0 20px; }
  /* núcleo menor p/ não cobrir conectores nem o fluxo no mobile */
  .systemap__core{ padding:10px 14px 9px; gap:4px; border-radius:12px; }
  .systemap__corelogo{ width:34px; height:34px; border-radius:9px; }
  .systemap__corelogo span{ font-size:18px; }
  .systemap__corename{ font-size:12px; }
  .systemap__corecap{ font-size:6px; letter-spacing:.1em; }
}

/* --- Header sticky com estado ao rolar --- */
[data-header]{ transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; }
[data-header] > div{ transition: padding .25s ease; }
[data-header].is-scrolled{ background:rgba(243,241,235,.94); border-bottom-color:rgba(10,10,10,.18); box-shadow:0 6px 18px rgba(10,10,10,.07); backdrop-filter:blur(12px); }
[data-header].is-scrolled > div{ padding-top:12px; padding-bottom:12px; }
.site-brand{
  display:flex;
  align-items:center;
  gap:11px;
}
.site-brand__logo{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #0A0A0A;
  border-radius:9px;
  background:linear-gradient(180deg,#242424 0%, #0A0A0A 62%);
  box-shadow:4px 4px 0 var(--accent,#FF4D1C);
  transition:transform .14s var(--ease-out), box-shadow .14s var(--ease-out);
  animation:keytap 1.1s var(--ease-out) .7s 1;
}
.site-brand:hover .site-brand__logo,
.site-brand:focus-visible .site-brand__logo{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--accent,#FF4D1C);
}
.site-brand__logo span{
  color:var(--accent,#FF4D1C);
  font-family:Syne,sans-serif;
  font-weight:800;
  font-size:18px;
  line-height:1;
}
@keyframes keytap{
  0%,100%{ transform:translate(0,0); box-shadow:4px 4px 0 var(--accent,#FF4D1C); }
  45%{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--accent,#FF4D1C); }
}
.site-brand__name{
  font-family:Syne,sans-serif;
  font-weight:800;
  font-size:19px;
  line-height:1;
  letter-spacing:-0.02em;
}
.site-brand__name-accent{ color:var(--accent,#FF4D1C); }

/* --- Animações --- */
@keyframes marq { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
/* (keyframes floaty/ctaPulse removidos, não utilizados após refino do hero) */
@keyframes blink { 0%,49%{ opacity:1;} 50%,100%{ opacity:0;} }

/* --- Carrossel de logos (prova social "Em operação") --- */
[data-logos]{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
@media (hover:hover) and (pointer:fine){
  [data-logos]:hover [data-logos-track]{ animation-play-state:paused !important; }
}
/* headroom interno p/ o tooltip não ser cortado pelo overflow,
   compensado por margin negativa p/ manter o espaçamento visual enxuto */
[data-logos]{ position:relative; z-index:1; padding-top:54px; margin-top:-30px; }
[data-logos-track]{ padding:0 0 12px; }
[data-logos-track] .logo-item{
  position:relative;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  flex:0 0 190px;
  margin:0 10px; white-space:nowrap; text-decoration:none; cursor:pointer;
  transition:transform .25s var(--ease-out);
}
[data-logos-track] .logo-item:hover{ transform:translateY(-3px); }
[data-logos-track] .logo-item img{
  height:54px; width:auto; max-width:170px; display:block;
  object-fit:contain;
  filter:grayscale(1) opacity(.55);
  transition:filter .35s ease;
}
[data-logos-track] .logo-item:hover img{ filter:none; }
/* AlvezCode: logo amarela não contrasta no fundo areia → silhueta preta; e maior p/ igualar as demais */
[data-logos-track] .logo-item[aria-label="AlvezCode"] img{ height:54px; max-width:170px; filter:brightness(0) opacity(.55); transform:scale(1.18); }
[data-logos-track] .logo-item[aria-label="AlvezCode"]:hover img{ filter:brightness(0); }
[data-logos-track] .logo-name{
  font-family:'JetBrains Mono',monospace; font-weight:600; font-size:10px;
  letter-spacing:0.06em; color:#aaa; text-transform:uppercase; margin-top:12px;
}

/* Tooltip informativo por logo */
[data-logos-track] .logo-tip{
  position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%) translateY(3px);
  color:#9a9a9a; font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap;
  opacity:0; pointer-events:none; z-index:6;
  transition:opacity .2s ease, transform .25s var(--ease-out);
}
[data-logos-track] .logo-item:hover .logo-tip{
  opacity:1; transform:translateX(-50%) translateY(0);
}
.logo-confirm-toast{
  position:relative;
  left:50%;
  z-index:80;
  display:flex;
  align-items:center;
  gap:14px;
  max-width:min(92vw,520px);
  max-height:0;
  overflow:hidden;
  margin-top:0;
  padding:12px 12px 12px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(10,10,10,.94);
  color:#F3F1EB;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  transform:translate(-50%,14px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .25s var(--ease-out), max-height .25s var(--ease-out), margin-top .25s var(--ease-out);
}
.logo-confirm-toast.is-visible{
  opacity:1;
  pointer-events:auto;
  max-height:90px;
  margin-top:10px;
  transform:translate(-50%,0);
}
.logo-confirm-toast__text{
  min-width:0;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.06em;
  line-height:1.35;
  text-transform:uppercase;
  color:#d8d3c8;
}
.logo-confirm-toast__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
}
.logo-confirm-toast button{
  border:0;
  border-radius:999px;
  padding:9px 12px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
}
.logo-confirm-toast__visit{
  background:var(--accent,#FF4D1C);
  color:#fff;
}
.logo-confirm-toast__cancel{
  background:rgba(255,255,255,.1);
  color:#d8d3c8;
}

/* Abas de navegador no chrome do mockup */
#portfolio .win-chrome{ background:#181818; border-bottom:none; }
#portfolio .win-bar{ display:flex; align-items:flex-end; gap:8px; padding:8px 12px 0; }
#portfolio .bt-strip{ display:flex; gap:3px; align-items:flex-end; width:100%; min-width:0; overflow:hidden; }
#portfolio .bt{ position:relative; flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 13px; border:1px solid transparent; border-bottom:none; border-radius:11px 11px 0 0; background:transparent; cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; color:#888; white-space:nowrap; transition:background .2s, color .2s; }
#portfolio .bt:hover{ background:rgba(255,255,255,.07); color:#ccc; }
#portfolio .bt[aria-selected="true"]{ background:var(--cream-strong); color:#0A0A0A; border-color:rgba(10,10,10,.06); }
#portfolio .bt-fav-ico{ width:16px; height:16px; flex:none; overflow:visible; object-fit:contain; }
#portfolio .bt-name{ overflow:hidden; text-overflow:ellipsis; }
#portfolio .bt-fill{ position:absolute; left:7px; right:7px; bottom:0; height:2px; width:0; background:var(--accent,#FF4D1C); border-radius:2px 2px 0 0; }
#portfolio .bt[aria-selected="false"] .bt-fill{ display:none; }


/* Celular ao lado do desktop */
#portfolio .lp-phone-wrap{ flex:0 0 224px; display:flex; align-items:center; justify-content:center; min-width:0; }
#portfolio .lp-phone{ position:relative; width:212px; background:#0A0A0A; border-radius:38px; padding:9px; box-shadow:0 34px 64px -30px rgba(10,10,10,.55), 0 10px 22px rgba(10,10,10,.12); }
#portfolio .lp-notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:94px; height:20px; background:#0A0A0A; border-radius:0 0 13px 13px; z-index:5; }
#portfolio .lp-phone-scr{ position:relative; background:var(--paper,#F3F1EB); border-radius:29px; overflow:hidden; height:430px; }
#portfolio .lp-pscreen{ position:absolute; inset:0; display:flex; flex-direction:column; }
#portfolio .lp-pscreen[hidden]{ display:none; }

/* Swipe overlay: captura toque sobre iframes sem bloquear scroll vertical */
.lp-swipe-overlay{ position:absolute; inset:0; z-index:10; touch-action:pan-y; cursor:pointer; }

/* Dots indicadores do phone */
.lp-dots{ display:none; justify-content:center; gap:6px; margin-top:12px; }
.lp-dot{ width:6px; height:6px; border-radius:999px; background:var(--ink); opacity:.18; transition:opacity .25s, width .25s; }
.lp-dot--active{ opacity:.75; width:18px; }
@media (max-width:700px){ .lp-dots{ display:flex; } }

/* --- Cabeçalhos de seção reutilizáveis --- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; flex-wrap:wrap; }
.section-title{ font-family:Syne,sans-serif; font-weight:800; font-size:clamp(26px,3vw,40px); letter-spacing:-.02em; line-height:1.04; margin:8px 0 0; }
.section-note{ max-width:460px; margin:10px 0 0; font-size:14px; line-height:1.5; color:var(--muted); }

/* --- Vitrine de portfólio: slots prontos para mockups reais --- */
.portfolio{ padding-top:72px; padding-bottom:36px; }
.showcase{ display:flex; gap:32px; align-items:center; justify-content:center; flex-wrap:wrap; }
.showcase__window{ flex:1 1 520px; min-width:0; }
.win{ background:#fff; border:1px solid var(--line-soft); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-float); }
.win-stage{ position:relative; height:430px; overflow:hidden; background:#faf8f2; }
#portfolio .win-stage-link{ position:absolute; inset:0; z-index:5; cursor:pointer; display:block; }

/* Slot desktop: basta inserir <img>/<iframe>/<video> dentro de .shot */
.proj-panel{ position:absolute; inset:0; display:flex; }
.shot{ position:relative; flex:1; overflow:hidden; }
.shot > img,
.shot > iframe,
.shot > video,
.lp-shot > img,
.lp-shot > iframe,
.lp-shot > video{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; border:0; display:block;
  object-fit:cover; object-position:top center;
}
.shot__ph,
.lp-shot__ph{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; text-align:center; padding:24px;
  background:
    linear-gradient(rgba(10,10,10,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,10,10,.035) 1px,transparent 1px),
    #f7f5ef;
  background-size:26px 26px;
}
.shot__tag{ font-family:Syne,sans-serif; font-weight:800; font-size:22px; color:var(--ink); }
.shot__desc{ font-family:Inter,sans-serif; font-size:13px; line-height:1.45; color:var(--muted); max-width:280px; }
.shot__hint,
.lp-shot__hint{
  display:inline-flex; align-items:center; gap:6px; margin-top:4px;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); border:1.5px solid var(--accent); border-radius:100px; padding:6px 12px;
}
/* Slot mobile */
.lp-shot{ position:relative; flex:1; overflow:hidden; }
.lp-shot__ph{ padding:18px; gap:7px; background-size:20px 20px; }
.lp-shot__tag{ font-family:Syne,sans-serif; font-weight:800; font-size:17px; color:var(--ink); }

/* Slot mobile com rolagem automática: usado quando o screenshot é mais alto
   que a tela do celular. Em vez de <img> + transform (o browser não repintava
   a camada de forma confiável), a imagem vira background e a "rolagem" é só
   background-position indo de "top" a "bottom": o navegador calcula o
   deslocamento sozinho, sem precisar medir altura via JS. */
.lp-shot--autoscroll{
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% auto;
  animation:lp-autoscroll 18s ease-in-out infinite;
}
@keyframes lp-autoscroll{
  0%, 8%    { background-position:center top; }
  46%, 54%  { background-position:center bottom; }
  92%, 100% { background-position:center top; }
}
@media (prefers-reduced-motion: reduce){
  .lp-shot--autoscroll{ animation:none; }
}

/* --- Prova social: marcas em operação (clicáveis, nova aba) --- */
.social{
  background:#E8E1D0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:28px 0;
}
.social__inner{ max-width:var(--container); margin:0 auto; padding:0 32px; }
.social__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.social__label{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8a847a; }
.social__hint{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent); }
.social__logos{ overflow:hidden; }
[data-logos-track]{ display:flex; align-items:center; width:max-content; animation:marq 22s linear infinite; }

@media (max-width:980px){
  #portfolio .lp-phone-wrap{ flex:1 1 100%; margin-top:18px; }
}

/* --- Console interativo: Braços de atuação --- */
.solution-lab{
  background:var(--dark);
  color:#F3F1EB;
  margin-top:36px;
  padding:76px 0;
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(255,77,28,.28);
  border-bottom:1px solid rgba(255,77,28,.28);
}
.solution-lab:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.82),transparent 86%);
  pointer-events:none;
}
.solution-lab__inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
  position:relative;
  z-index:1;
}
.solution-lab__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:28px;
}
.section-kicker{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--accent,#FF4D1C);
}
.solution-lab__head h2{
  font-family:Syne,sans-serif;
  font-weight:800;
  font-size:clamp(26px,3vw,40px);
  letter-spacing:-0.02em;
  line-height:1.04;
  margin:8px 0 0;
}
.solution-lab__signal{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(243,241,235,.18);
  border-radius:100px;
  padding:9px 13px;
  color:#cfcfcf;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.solution-lab__signal span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#3ddc7e;
  box-shadow:0 0 0 6px rgba(61,220,126,.12);
}
.solution-console{
  display:grid;
  grid-template-columns:minmax(240px,310px) 1fr;
  gap:20px;
  border:1px solid rgba(243,241,235,.12);
  border-radius:22px;
  padding:18px;
  background:linear-gradient(135deg,rgba(250,248,242,.075),rgba(250,248,242,.025));
  box-shadow:0 34px 90px -52px rgba(255,77,28,.58), inset 0 1px 0 rgba(255,255,255,.08);
}
.solution-console__menu{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.solution-tab{
  width:100%;
  display:flex;
  align-items:center;
  gap:13px;
  text-align:left;
  border:1px solid rgba(243,241,235,.10);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  color:#F3F1EB;
  padding:13px;
  cursor:pointer;
  transition:transform .22s var(--ease-out), border-color .22s, background .22s;
}
.solution-tab:hover,
.solution-tab.is-active{
  transform:translateX(4px);
  border-color:rgba(255,77,28,.82);
  background:rgba(255,77,28,.12);
}
.solution-tab__idx{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#161616;
  border:1px solid rgba(243,241,235,.12);
  color:var(--accent,#FF4D1C);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:700;
}
.solution-tab__body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.solution-tab__body strong{
  font-family:Syne,sans-serif;
  font-size:17px;
  line-height:1;
}
.solution-tab__body strong .arm-suffix{ color:var(--accent,#FF4D1C); }
.solution-tab__body small{
  color:#9d9d9d;
  font-size:11.5px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* chevron e dica: só aparecem no acordeão mobile */
.solution-tab__chev{ display:none; }
.solution-hint{ display:none; }
.solution-console.is-mobile-accordion .solution-tab__chev{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; margin-left:auto;
  width:20px; height:20px; color:rgba(243,241,235,.38);
  transition:transform .3s var(--ease-out), color .3s;
}
.solution-console.is-mobile-accordion .solution-tab__chev svg{ width:16px; height:16px; }
.solution-console.is-mobile-accordion .solution-tab.is-active .solution-tab__chev{
  transform:rotate(180deg); color:var(--accent,#FF4D1C);
}
.solution-console.is-mobile-accordion .solution-hint{
  display:block; margin:0 0 12px; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em;
  color:rgba(243,241,235,.34);
  animation:solHintPulse 2.6s ease-in-out infinite;
}
/* some assim que o visitante abre alguma frente */
.solution-console.is-mobile-accordion:has(.solution-tab.is-active) .solution-hint{ display:none; }
@keyframes solHintPulse{ 0%,100%{opacity:.45} 50%{opacity:.9} }
.solution-stage{
  position:relative;
  min-height:340px;
  border:2px solid #000;
  border-radius:18px;
  overflow:hidden;
  background:#101010;
  box-shadow:7px 7px 0 var(--accent,#FF4D1C);
}
.solution-screen{
  position:absolute;
  inset:0;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.solution-screen.is-active{
  --run: running;
}
.solution-screen[hidden]{ display:none; }
.screen-chrome{
  height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid rgba(243,241,235,.10);
  padding-bottom:13px;
}
.screen-chrome span{
  width:11px;
  height:11px;
  border-radius:50%;
}
.screen-chrome span:nth-child(1){ background:#FF5F57; }
.screen-chrome span:nth-child(2){ background:#FEBC2E; }
.screen-chrome span:nth-child(3){ background:#28C840; }
.screen-chrome strong{
  margin-left:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  color:#8a8a8a;
}
.msg{
  max-width:78%;
  border-radius:18px;
  padding:14px 16px;
  font-size:14px;
  line-height:1.45;
  animation:messageRise .8s var(--ease-out) both;
}
.msg.out{ animation-delay:.12s; }
.msg.in{
  align-self:flex-start;
  background:#F3F1EB;
  color:#0A0A0A;
  border-bottom-left-radius:4px;
}
.msg.out{
  align-self:flex-end;
  background:var(--accent,#FF4D1C);
  color:#0A0A0A;
  border-bottom-right-radius:4px;
  font-weight:600;
}

/* --- Braços: terminal que digita + cartão visual de clareza --- */
.solution-screen.arm-screen{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:16px;
  align-items:stretch;
}
.solution-screen.arm-screen[hidden]{ display:none; }
.arm-term{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid rgba(243,241,235,.14);
  border-radius:14px;
  background:#0d0d0d;
  overflow:hidden;
}
.arm-term .screen-chrome{
  height:auto;
  margin:0;
  padding:13px 16px;
  border-bottom:1px solid rgba(243,241,235,.1);
}
.arm-pre{
  flex:1;
  margin:0;
  padding:18px 20px 6px;
  font-family:'JetBrains Mono',monospace;
  font-size:13.5px;
  line-height:1.95;
  color:#F3F1EB;
  white-space:pre-wrap;
  word-break:break-word;
}
.arm-cta{
  align-self:flex-start;
  margin:6px 20px 18px;
  display:inline-flex; align-items:center; gap:8px;
  font-family:Syne,sans-serif; font-weight:700; font-size:13px;
  color:#0A0A0A; background:var(--accent,#FF4D1C);
  border:1.5px solid var(--accent,#FF4D1C);
  border-radius:100px; padding:9px 17px;
  text-decoration:none;
  transition:transform .2s var(--ease-out), background .2s, border-color .2s;
}
.arm-cta:hover{ background:#fff; border-color:#fff; transform:translateX(2px); }
.arm-cta[hidden]{ display:none; }
.arm-visual{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid rgba(255,77,28,.28);
  border-radius:14px;
  background:linear-gradient(160deg,rgba(255,77,28,.12),rgba(255,255,255,.02));
  padding:20px;
}
.arm-visual__icon{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:var(--accent,#FF4D1C);
  color:#0A0A0A;
  font-size:23px; line-height:1;
  margin-bottom:14px;
}
.arm-visual__title{
  font-family:Syne,sans-serif; font-weight:800;
  font-size:19px; line-height:1.12; color:#F3F1EB;
}
.arm-visual__desc{
  margin:9px 0 0; font-size:12.5px; line-height:1.5; color:#b9b9b9;
}
.arm-visual__list{
  list-style:none; margin:auto 0 0; padding:16px 0 0;
  display:grid; gap:8px;
}
.arm-visual__list li{
  position:relative; padding-left:18px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#d6d6d6;
}
.arm-visual__list li::before{
  content:"→"; position:absolute; left:0; color:var(--accent,#FF4D1C);
}
@media (max-width:860px){
  .solution-screen.arm-screen{ grid-template-columns:1fr; }
}
@keyframes dotPing{
  0%{ box-shadow:0 0 0 0 rgba(61,220,126,.45); }
  70%,100%{ box-shadow:0 0 0 9px rgba(61,220,126,0); }
}
@keyframes messageRise{
  from{ transform:translateY(12px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

/* --- Como trabalhamos: 5 etapas compactas --- */
.pipeline-section{
  max-width:1240px;
  margin:0 auto;
  padding:76px 32px 36px;
}
.pipeline-section--accent{
  position:relative;
  max-width:none;
  margin:0;
  padding:76px 32px 48px;
  background:
    linear-gradient(rgba(10,10,10,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.10) 1px, transparent 1px),
    var(--accent,#FF4D1C);
  background-size:36px 36px;
  border-top:3px solid #000;
  border-bottom:3px solid #000;
  overflow:hidden;
}
.pipeline-section--accent > *{
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  z-index:1;
}
.pipeline-section--accent .section-kicker{
  color:#000;
}
.pipeline-section--accent .process-card{
  background:var(--paper);
  box-shadow:5px 5px 0 #0A0A0A;
}
.pipeline-section--accent .process-card--accent{
  background:#0A0A0A;
  border-color:#0A0A0A;
  box-shadow:5px 5px 0 #F3F1EB;
}
.pipeline-section--accent .process-card--accent h3,
.pipeline-section--accent .process-card--accent p{
  color:#F3F1EB;
}
.pipeline-section--accent .process-card--accent > span:first-child{
  background:var(--accent,#FF4D1C);
  color:#0A0A0A;
}
.pipeline-head{ margin-bottom:26px; }
.pipeline-head h2{
  font-family:Syne,sans-serif;
  font-weight:800;
  font-size:clamp(26px,3vw,40px);
  letter-spacing:-0.02em;
  margin:8px 0 0;
  line-height:1.04;
}
.process-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.process-flow{
  position:absolute;
  left:8%;
  right:8%;
  top:50%;
  height:12px;
  transform:translateY(-50%);
  z-index:0;
  pointer-events:none;
}
.process-flow:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:3px;
  transform:translateY(-50%);
  border-radius:99px;
  background:#0A0A0A;
  box-shadow:0 0 0 1px rgba(243,241,235,.24);
}
.process-flow:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 0 50%, #0A0A0A 0 5px, transparent 5.5px),
    radial-gradient(circle at 25% 50%, #0A0A0A 0 5px, transparent 5.5px),
    radial-gradient(circle at 50% 50%, #0A0A0A 0 5px, transparent 5.5px),
    radial-gradient(circle at 75% 50%, #0A0A0A 0 5px, transparent 5.5px),
    radial-gradient(circle at 100% 50%, #0A0A0A 0 5px, transparent 5.5px);
}
.process-card{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  border:2.5px solid #0A0A0A;
  border-radius:16px;
  background:#fff;
  box-shadow:5px 5px 0 #0A0A0A;
  padding:18px;
  min-height:166px;
  transition:transform .22s var(--ease-out), box-shadow .22s;
}
.process-card:hover{
  transform:translateY(-4px);
  box-shadow:7px 7px 0 #0A0A0A;
}
.process-card--accent{
  border-color:var(--accent,#FF4D1C);
  box-shadow:5px 5px 0 var(--accent,#FF4D1C);
}
.process-card--accent:hover{ box-shadow:7px 7px 0 var(--accent,#FF4D1C); }
.process-card > span:first-child{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  width:28px;
  height:28px;
  border-radius:9px;
  background:#0A0A0A;
  color:var(--accent,#FF4D1C);
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:800;
  margin-bottom:14px;
}
.process-card h3{
  font-family:Syne,sans-serif;
  font-weight:800;
  font-size:18px;
  margin:0 0 8px;
  line-height:1;
}
.process-card p{
  margin:0;
  color:#555;
  font-size:12.5px;
  line-height:1.5;
}
.process-card__out{
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  margin-top:auto;
  padding-top:13px;
  border-top:1px dashed rgba(10,10,10,.2);
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  line-height:1.35;
  color:#0A0A0A;
}
.process-card__out::before{
  content:"✓";
  flex:none;
  color:var(--accent,#FF4D1C);
  font-weight:700;
}
.process-card__out--loop::before{ content:"↻"; }
.process-card--accent .process-card__out{
  color:#F3F1EB;
  border-top-color:rgba(243,241,235,.22);
}

/* --- CTA final: briefing interativo --- */
.briefing-cta{
  position:relative;
  background:var(--dark);
  border-top:3px solid #000;
  border-bottom:3px solid #000;
  margin-top:0;
  padding:64px 32px;
  overflow:hidden;
}
.briefing-cta:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.55),transparent 72%);
  pointer-events:none;
}
.briefing-cta__inner{
  max-width:1240px;
  margin:0 auto;
  padding:38px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.86fr);
  gap:40px;
  align-items:center;
  position:relative;
  z-index:1;
  border:2.5px solid #0A0A0A;
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(255,77,28,.18),rgba(255,77,28,0) 42%),
    #111;
  box-shadow:7px 7px 0 var(--accent,#FF4D1C);
}
.briefing-cta__copy{ min-width:0; }
.briefing-cta__kicker{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:0.08em;
  color:#F3F1EB;
  margin-bottom:16px;
}
.briefing-cta h2{
  font-family:Syne,sans-serif;
  font-weight:800;
  font-size:clamp(30px,3.6vw,46px);
  letter-spacing:-0.025em;
  line-height:1;
  margin:0;
  color:#F3F1EB;
  max-width:620px;
}
.briefing-cta__sub{
  margin:18px 0 0;
  color:#cfcfcf;
  font-size:14px;
  line-height:1.5;
  max-width:440px;
}
.briefing-cta__mail{
  display:inline-block;
  margin-top:18px;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  color:var(--accent,#FF4D1C);
  text-decoration:none;
  border-bottom:1px solid rgba(255,77,28,.45);
}
.briefing-cta__mail:hover{ color:#fff; border-bottom-color:#fff; }
.briefing-cta__ways{
  margin:32px 0 0;
  display:grid;
  gap:16px;
  max-width:400px;
}
.briefing-cta__ways-label{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#9a948c;
}
.briefing-cta__ways .bw{
  border-left:2px solid var(--accent,#FF4D1C);
  padding-left:14px;
}
.briefing-cta__ways .bw strong{
  display:block;
  font-family:Syne,sans-serif;
  font-weight:800;
  font-size:16px;
  color:#F3F1EB;
}
.briefing-cta__ways .bw span{
  display:block;
  margin-top:3px;
  font-size:13px;
  line-height:1.4;
  color:#b9b4ac;
}
.briefing-cta__ways .bw-link{
  display:inline-block;
  margin-top:9px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.03em;
  color:var(--accent,#FF4D1C);
  text-decoration:none;
  opacity:.85;
  transition:opacity .15s;
}
.briefing-cta__ways .bw-link:hover{ opacity:1; text-decoration:underline; }

/* Formulário */
.briefing-form{
  border:2.5px solid #0A0A0A;
  border-radius:22px;
  background:var(--cream-strong);
  box-shadow:5px 5px 0 #0A0A0A;
  padding:20px;
  display:grid;
  gap:13px;
}
.briefing-form__label{
  font-family:'JetBrains Mono',monospace;
  color:#6c625b;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.bf-field{ display:grid; gap:6px; }
.bf-field label{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.04em;
  color:#6c625b;
}
.bf-field label em{ color:#9a9087; font-style:normal; }
.bf-field input,
.bf-field textarea{
  width:100%;
  font-family:Inter,sans-serif;
  font-size:14px;
  color:#0A0A0A;
  background:#fff;
  border:1.5px solid rgba(10,10,10,.2);
  border-radius:12px;
  padding:11px 13px;
  resize:vertical;
  transition:border-color .2s, box-shadow .2s;
}
.bf-field input::placeholder,
.bf-field textarea::placeholder{ color:#a59c90; }
.bf-field input:focus,
.bf-field textarea:focus{
  outline:none;
  border-color:var(--accent,#FF4D1C);
  box-shadow:0 0 0 3px rgba(255,77,28,.15);
}
.bf-field input.is-invalid{ border-color:#d23b1c; box-shadow:0 0 0 3px rgba(210,59,28,.16); }

.bf-choices{ border:0; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0; }
.bf-choices legend{
  grid-column:1/-1; padding:0; margin-bottom:2px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.04em; color:#6c625b;
}
.bf-choices legend em{ color:#9a9087; font-style:normal; }
.bf-chip{
  position:relative;
  display:flex; align-items:center;
  border:1.5px solid rgba(10,10,10,.16);
  border-radius:12px;
  background:var(--surface);
  padding:10px 12px;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.bf-chip input{ position:absolute; opacity:0; width:0; height:0; }
.bf-chip span{
  display:flex; align-items:center; gap:9px; min-width:0;
  font-family:Syne,sans-serif; font-weight:700; font-size:13.5px; line-height:1.1; color:#0A0A0A;
}
.bf-chip span::before{
  content:"✓"; flex:none;
  width:16px; height:16px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(10,10,10,.3);
  color:transparent; font-size:10px; font-weight:800;
  transition:background .18s, border-color .18s, color .18s;
}
.bf-chip:hover{ border-color:#0A0A0A; background:#fff; }
.bf-chip:focus-within{ border-color:var(--accent,#FF4D1C); box-shadow:0 0 0 3px rgba(255,77,28,.15); }
.bf-chip.is-active{ border-color:#0A0A0A; background:#fff; }
.bf-chip.is-active span::before{ background:var(--accent,#FF4D1C); border-color:var(--accent,#FF4D1C); color:#0A0A0A; }
.bf-choices.is-invalid .bf-chip{ border-color:#d23b1c; }

.bf-submit{ width:100%; justify-content:center; margin-top:4px; }
.bf-note{
  margin:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:11px; color:#6c625b;
}
.bf-note::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:#3ddc7e; box-shadow:0 0 0 0 rgba(61,220,126,.4);
  animation:dotPing 1.8s ease-out infinite;
}

@media (max-width:820px){
  .briefing-cta__inner{ grid-template-columns:1fr; gap:28px; }
}

@media (max-width:560px){
  /* footer mobile: brand full-width topo, nav + contato lado a lado */
  .site-footer__brand{ gap:11px; }
  .site-footer__logo{ width:34px; height:34px; border-radius:9px; }
  .site-footer__logo span{ font-size:17px; }
  .site-footer__brand strong{ font-size:18px; }
  .site-footer__brand p{ font-size:12px; margin-top:6px; }
  .site-footer__nav,
  .site-footer__contact{ gap:7px; }
  .site-footer__nav span,
  .site-footer__contact span{ font-size:9.5px; }
  .site-footer a{ font-size:12.5px; }
  .site-footer__contact a[href^="mailto"]{ font-size:11px; }
  .site-footer__cta{
    padding:8px 13px;
    font-size:12px;
    gap:6px;
    box-shadow:3px 3px 0 #0A0A0A;
  }
  .site-footer__bottom{ padding-top:12px; font-size:10px; gap:0; flex-direction:column; align-items:flex-start; gap:3px; }
}

/* --- Rodape: contato e fechamento institucional --- */
.site-footer{
  background:var(--paper);
  color:#0A0A0A;
  border-top:3px solid #000;
  padding:34px 32px 26px;
}
.site-footer__inner{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(260px,1.2fr) minmax(180px,.6fr) minmax(240px,.8fr);
  gap:28px;
  align-items:start;
}
.site-footer__brand{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.site-footer__logo{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #0A0A0A;
  border-radius:10px;
  background:linear-gradient(180deg,#242424 0%, #0A0A0A 62%);
  box-shadow:4px 4px 0 var(--accent,#FF4D1C);
}
.site-footer__logo span{
  color:var(--accent,#FF4D1C);
  font-family:Syne,sans-serif;
  font-weight:800;
  font-size:19px;
  line-height:1;
}
.site-footer__brand strong{
  display:block;
  font-family:Syne,sans-serif;
  font-weight:800;
  font-size:22px;
  line-height:1;
}
.site-footer__brand-accent{ color:var(--accent,#FF4D1C); }
.site-footer__brand p{
  max-width:420px;
  margin:9px 0 0;
  color:#4d463f;
  font-size:13px;
  line-height:1.45;
}
.site-footer__nav,
.site-footer__contact{
  display:grid;
  gap:9px;
  justify-items:start;
}
.site-footer__nav span,
.site-footer__contact span{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent,#FF4D1C);
}
.footer-nav-sep{ margin-top:12px; }
.site-footer a{
  color:#0A0A0A;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
}
.site-footer a:not(.site-footer__cta):hover{
  color:var(--accent,#FF4D1C);
}
.site-footer__contact a[href^="mailto"]{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  font-weight:600;
}
.site-footer__social{
  display:flex;
  gap:10px;
}
.site-footer__social a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  opacity:.7;
  transition:opacity .18s,color .18s;
}
.site-footer__social a:hover{
  opacity:1;
  color:var(--accent,#FF4D1C);
}
.site-footer__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  border:2px solid #0A0A0A;
  border-radius:99px;
  background:var(--accent,#FF4D1C);
  padding:10px 16px;
  box-shadow:4px 4px 0 #0A0A0A;
  font-family:Syne,sans-serif;
  transition:transform .22s var(--ease-out), box-shadow .22s;
}
.site-footer__cta:hover{
  color:#0A0A0A;
  transform:translateY(-2px);
  box-shadow:6px 6px 0 #0A0A0A;
}
.site-footer__bottom{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  gap:18px;
  border-top:1px solid rgba(10,10,10,.14);
  padding-top:16px;
  color:#6d665f;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
}

/* --- Responsividade das grades fixas --- */
@media (min-width:861px) and (max-width:1080px){
  [data-tilt-grid]{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:860px){
  [data-tilt-grid]{ grid-template-columns:1fr !important; }
  [data-grid2]{ grid-template-columns:1fr !important; }
  [data-vrule]{ display:none !important; }
  .model-section{ padding:64px 20px 28px !important; }
  .model-section .path-card{ padding:18px; }
  .solution-lab{ padding:64px 0; }
  .solution-lab__head{ align-items:flex-start; flex-direction:column; }
  .solution-console{ grid-template-columns:1fr; padding:14px; }
  .solution-console__menu{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .solution-tab:hover,
  .solution-tab.is-active{ transform:translateY(-2px); }
  .solution-stage{ min-height:540px; }
  .process-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .process-flow{ display:none; }
  .site-footer__inner{ grid-template-columns:1fr 1fr; }
  .site-footer__brand{ grid-column:1/-1; }
  .site-footer__bottom{ align-items:flex-start; flex-direction:column; }
}
@media (max-width:560px){
  header nav{ gap:16px !important; }
  .solution-lab__inner{ padding:0 20px; }
  .solution-console__menu{ grid-template-columns:1fr; }
  .solution-tab__body strong{ font-size:16px; }
  .solution-stage{ min-height:580px; box-shadow:5px 5px 0 var(--accent,#FF4D1C); }
  .briefing-cta__inner{
    grid-template-columns:1fr;
    padding:28px 20px;
    gap:28px;
  }
  .briefing-cta{ padding:44px 20px; }
  .briefing-form{ box-shadow:5px 5px 0 var(--accent,#FF4D1C); }
  .bf-choices{ grid-template-columns:1fr; }
  .pipeline-section{ padding:60px 20px 30px; }
  .pipeline-section--accent{ padding:60px 20px 36px; }
  .process-grid{ grid-template-columns:1fr; }
  .process-flow{ display:none; }
  .process-card{ min-height:auto; padding:18px; }
  .site-footer{ padding:28px 20px 22px; }
  .site-footer__inner{ grid-template-columns:1fr 1fr; gap:16px 20px; }
  .site-footer__brand{ grid-column:1/-1; }
  .site-footer__bottom{ grid-column:1/-1; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:3px; }
}

/* --- Camada mobile first: navegacao e ajustes de experiencia --- */
.site-menu-toggle{
  display:none;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  border:2px solid var(--ink);
  border-radius:12px;
  background:var(--paper);
  box-shadow:3px 3px 0 var(--accent,#FF4D1C);
  cursor:pointer;
}
.site-menu-toggle span{
  width:18px;
  height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .2s var(--ease-out);
}
[data-header].is-menu-open .site-menu-toggle{ background:var(--accent,#FF4D1C); border-color:#0A0A0A; box-shadow:3px 3px 0 #0A0A0A; }
[data-header].is-menu-open .site-menu-toggle span{ background:#0A0A0A; }
[data-header].is-menu-open .site-menu-toggle span:first-child{ transform:translateY(4px) rotate(45deg); }
[data-header].is-menu-open .site-menu-toggle span:last-child{ transform:translateY(-4px) rotate(-45deg); }

@media (max-width:720px){
  /* header bar: faixa sólida sempre acima do painel (sem backdrop-filter,
     que criaria containing-block e quebraria o position:fixed do painel) */
  .site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:70;
    background:transparent;
    border-bottom-color:transparent;
  }
  .site-header__bar{
    position:relative;
    z-index:60;
    min-height:60px;
    padding:11px 20px;
    background:rgba(243,241,235,.97);
    border-bottom:1.5px solid rgba(10,10,10,.1);
    transition:background .25s ease, border-color .25s ease;
  }
  [data-header].is-menu-open .site-header__bar{
    background:#0A0A0A;
    border-bottom-color:rgba(255,255,255,.1);
  }
  [data-header].is-menu-open .site-brand{ color:#F3F1EB; }
  .site-brand__name{ font-size:18px; }
  .site-menu-toggle{ display:inline-flex; flex:none; position:relative; z-index:61; }

  /* painel-sheet: desce do header, altura do conteúdo */
  .site-nav{
    position:fixed;
    top:58px;
    left:0;
    right:0;
    bottom:auto;
    max-height:calc(100dvh - 70px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:18px 22px calc(22px + env(safe-area-inset-bottom));
    background:#0A0A0A;
    background-image:
      radial-gradient(130% 90% at 100% 0%, rgba(255,77,28,.18), transparent 52%),
      linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:auto, 28px 28px, 28px 28px;
    border-bottom:2px solid rgba(255,77,28,.5);
    border-radius:0 0 22px 22px;
    box-shadow:0 28px 50px -22px rgba(0,0,0,.8);
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .24s ease, transform .3s var(--ease-out), visibility .24s;
    z-index:55;
  }
  [data-header].is-menu-open .site-nav{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }

  /* scrim atrás do sheet */
  [data-header].is-menu-open::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(6,6,6,.5);
    backdrop-filter:blur(2px);
    z-index:54;
    animation:nav-fade .26s ease both;
  }

  /* trava o scroll do body com o menu aberto */
  body:has([data-header].is-menu-open){ overflow:hidden; }

  /* eyebrow */
  .nav-eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:8px;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(243,241,235,.42);
    margin-bottom:4px;
  }
  .nav-eyebrow i{ flex:1; height:1px; background:rgba(255,255,255,.12); }

  /* stagger de entrada */
  [data-header].is-menu-open .nav-eyebrow{ animation:nav-in .3s var(--ease-out) .02s both; }
  [data-header].is-menu-open .site-nav__link:nth-of-type(1){ animation:nav-in .32s var(--ease-out) .07s both; }
  [data-header].is-menu-open .site-nav__link:nth-of-type(2){ animation:nav-in .32s var(--ease-out) .13s both; }
  [data-header].is-menu-open .site-nav__link:nth-of-type(3){ animation:nav-in .32s var(--ease-out) .19s both; }
  [data-header].is-menu-open .nav-foot{ animation:nav-in .32s var(--ease-out) .27s both; }

  /* item */
  .site-nav__link{
    display:flex;
    align-items:center;
    gap:14px;
    padding:15px 4px;
    border-bottom:1px solid rgba(255,255,255,.08);
    text-decoration:none;
    position:relative;
    overflow:hidden;
  }
  .site-nav__link::after{
    content:"";
    position:absolute;
    left:0; bottom:-1px;
    width:0; height:2px;
    background:var(--accent,#FF4D1C);
    transition:width .35s var(--ease-out);
  }
  .site-nav__link:active::after{ width:100%; }

  .nav-idx{
    display:block;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    font-weight:700;
    color:var(--accent,#FF4D1C);
    flex:none;
    width:22px;
    align-self:flex-start;
    padding-top:6px;
  }
  .nav-body{ flex:1; min-width:0; }
  .nav-body strong{
    display:block;
    font-family:Syne,sans-serif;
    font-weight:800;
    font-size:clamp(23px,6.4vw,28px);
    line-height:1;
    letter-spacing:-.02em;
    color:#F3F1EB;
    transition:color .18s, transform .25s var(--ease-out);
  }
  .nav-desc{
    display:block;
    margin-top:5px;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;
    letter-spacing:.05em;
    color:rgba(243,241,235,.36);
  }
  .nav-arrow{
    display:block;
    align-self:center;
    font-size:17px;
    color:rgba(243,241,235,.22);
    flex:none;
    transition:transform .25s var(--ease-out), color .2s;
  }
  .site-nav__link:active .nav-body strong{ transform:translateX(6px); }
  .site-nav__link:active .nav-arrow{ transform:translate(5px,-5px); color:var(--accent,#FF4D1C); }

  /* rodapé do painel */
  .nav-foot{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .nav-foot__mail{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px;
    color:rgba(243,241,235,.6);
    text-decoration:none;
  }
  .nav-foot__status{
    width:7px; height:7px; border-radius:50%;
    background:#3ddc7e;
    box-shadow:0 0 0 0 rgba(61,220,126,.45);
    animation:dotPing 1.8s ease-out infinite;
  }
  .site-nav__cta{
    width:100%;
    max-width:320px;
    justify-content:center;
    min-height:46px;
    font-size:14px;
    background:var(--accent,#FF4D1C);
    color:#0A0A0A;
    border-color:#0A0A0A;
    box-shadow:3px 3px 0 #0A0A0A;
  }

  .hero{ padding-top:94px; padding-bottom:30px; }
  .hero__grid{ gap:30px; }
  .kicker-badge{ max-width:100%; margin:0 auto 20px; justify-content:center; text-align:center; font-size:10.5px; letter-spacing:.08em; }
  .hero__intro{ text-align:center; }
  .hero__title{ font-size:40px; letter-spacing:-.02em; }
  .hero__sub{ margin:18px auto 0; max-width:100%; }
  .hero__cta{ justify-content:center; gap:14px; margin-top:28px; }
  .hero__verticals{ justify-content:center; }
  .hero__verticals-list{ justify-content:center; }

  .solution-lab{ margin-top:24px; padding:52px 0; }
  .solution-lab__head{ margin-bottom:22px; }
  .solution-lab__signal{ white-space:normal; align-self:flex-start; }
  .solution-console{ border-radius:18px; padding:12px; gap:14px; }
  .solution-console__menu{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding:0;
    overflow:visible;
  }
  .solution-tab{
    flex:none;
    min-height:72px;
  }
  .solution-tab:hover,
  .solution-tab.is-active{ transform:translateY(-2px); }
  .solution-tab__body small{ white-space:normal; overflow:visible; text-overflow:clip; }
  .solution-console.is-mobile-accordion .solution-stage{ display:none; }
  .solution-console.is-mobile-accordion .solution-screen{
    margin:2px 0 8px;
    border:2px solid #000;
    border-radius:18px;
    background:#101010;
    box-shadow:5px 5px 0 var(--accent,#FF4D1C);
  }
  .solution-stage{ min-height:auto; overflow:visible; }
  .solution-screen{ position:relative; inset:auto; }
  .solution-screen.arm-screen{ gap:16px; }
  .arm-pre{ min-height:168px; max-height:210px; overflow:hidden; }
  .arm-visual{ padding:18px; }
  .solution-console.is-mobile-accordion .arm-visual{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    align-items:center;
    column-gap:13px;
    row-gap:10px;
    padding:16px;
  }
  .solution-console.is-mobile-accordion .arm-visual__icon{
    width:44px;
    height:44px;
    margin:0;
  }
  .solution-console.is-mobile-accordion .arm-visual__title{
    font-size:17px;
    line-height:1.12;
  }
  .solution-console.is-mobile-accordion .arm-visual__desc,
  .solution-console.is-mobile-accordion .arm-visual__list{
    grid-column:1/-1;
  }
  .solution-console.is-mobile-accordion .arm-visual__desc{ margin:0; }
  .solution-console.is-mobile-accordion .arm-visual__list{ padding-top:4px; gap:7px; }

  .portfolio{ padding-top:54px; padding-bottom:28px; }
  .section-head{ align-items:flex-start; margin-bottom:22px; }
  .section-note{ max-width:100%; }
  .showcase{ flex-direction:column; gap:0; align-items:center; }
  .showcase__window{ display:none; }
  #portfolio .lp-phone-wrap{ order:-1; flex:0 0 auto; width:100%; margin-top:0; }
  #portfolio .lp-phone{ width:min(300px,84vw); margin:0 auto; border-radius:44px; padding:10px; }
  #portfolio .lp-notch{ width:110px; height:22px; }
  #portfolio .lp-phone-scr{ height:560px; border-radius:33px; }
  #portfolio .win-bar{ align-items:center; padding:10px 10px 0; }
  #portfolio .bt-strip{ overflow-x:auto; padding-bottom:1px; }
  #portfolio .bt{ flex:0 0 auto; max-width:none; min-height:42px; }
  .win-stage{ height:320px; }

  .pipeline-section--accent{ padding:54px 20px 38px; }
  .process-grid{ grid-template-columns:1fr; gap:13px; }
  .process-card{ min-height:auto; padding:17px; }

  .briefing-cta{ padding:46px 20px; }
  .briefing-cta__inner{ padding:24px 18px; border-radius:20px; gap:24px; box-shadow:5px 5px 0 var(--accent,#FF4D1C); }
  .briefing-cta h2{ font-size:34px; }
  .briefing-cta__ways{ margin-top:24px; gap:13px; }
  .briefing-form{ padding:16px; gap:12px; }
  .bf-choices{ grid-template-columns:1fr; }
  .bf-chip{ min-height:44px; padding:10px 11px; }

  .social{ padding:24px 0; }
  .social__head{ align-items:flex-start; }
  [data-logos]{ padding-top:18px; margin-top:0; -webkit-mask-image:none; mask-image:none; }
  [data-logos-track] .logo-item{ flex-basis:150px; margin:0 8px; }
  [data-logos-track] .logo-item img{ height:46px; max-width:132px; filter:grayscale(.5) opacity(.72); }
  [data-logos-track] .logo-name{ margin-top:10px; }
  [data-logos-track] .logo-item[aria-label="AlvezCode"] img{ height:46px; max-width:132px; filter:brightness(0) opacity(.72); transform:scale(1.18); }
  [data-logos-track] .logo-tip{ display:none; }
  .logo-confirm-toast{ width:calc(100vw - 28px); justify-content:space-between; gap:10px; padding:11px; }
  .logo-confirm-toast__text{ font-size:10px; }

  .site-footer__contact{ order:0; }
  .site-footer__contact a[href^="mailto"]{ overflow-wrap:anywhere; }
}

@media (max-width:430px){
  .hero__title{ font-size:36px; }
  .hero__cta .btn{ width:100%; justify-content:center; }
  /* o link "Ver portfólio" abraça o texto (evita virar uma 2ª divisória full-width
     sob o botão); a única linha nativa fica sendo o separador de .hero__verticals */
  .hero__cta .btn--link{ width:auto; }
  .kicker-badge{ border-radius:14px; line-height:1.3; }
  .solution-lab__signal{ display:none; }
  .solution-tab{ width:100%; }
  .solution-tab__body strong{ font-size:15px; }
  .solution-tab__idx{ width:31px; height:31px; }
  .arm-pre{ font-size:11px; min-height:156px; }
  #portfolio .lp-phone{ width:min(282px,86vw); border-radius:40px; padding:9px; }
  #portfolio .lp-notch{ width:96px; height:20px; }
  #portfolio .lp-phone-scr{ height:520px; border-radius:30px; }
  .win-stage{ height:280px; }
  .shot__tag{ font-size:20px; }
  .shot__desc{ font-size:12px; }
  .briefing-cta h2{ font-size:31px; }
  .site-footer__cta{ width:auto; align-self:flex-start; }
}

/* --- Como trabalhamos: controles apenas em mobile/tablet --- */
@keyframes nav-in{
  from{ opacity:0; transform:translateY(14px); }
  to{   opacity:1; transform:translateY(0); }
}
@keyframes nav-fade{
  from{ opacity:0; }
  to{   opacity:1; }
}
@keyframes process-flow-track{
  0%  { background-position:-200% 0; }
  100%{ background-position: 300% 0; }
}
@keyframes badge-step-pulse{
  0%,70%,100%{ transform:scale(1); box-shadow:none; }
  35%{ transform:scale(1.18); box-shadow:0 0 0 5px rgba(255,77,28,.28); }
}

@media (min-width:1024px){
  .process-controls{ display:none; }

  /* Linha direcional animada: luz orange viaja da esquerda para direita */
  .process-flow:before{
    background:linear-gradient(90deg,
      #0A0A0A 0%,
      #0A0A0A 28%,
      var(--accent,#FF4D1C) 50%,
      #0A0A0A 72%,
      #0A0A0A 100%
    );
    background-size:400% 100%;
    animation:process-flow-track 3.6s linear infinite;
  }

  /* Dots de ancoragem: primeiro aceso em orange, demais seguem a linha */
  .process-flow:after{
    background:
      radial-gradient(circle at 0   50%,var(--accent,#FF4D1C) 0 6px,transparent 6.5px),
      radial-gradient(circle at 25% 50%,#0A0A0A 0 5px,transparent 5.5px),
      radial-gradient(circle at 50% 50%,#0A0A0A 0 5px,transparent 5.5px),
      radial-gradient(circle at 75% 50%,#0A0A0A 0 5px,transparent 5.5px),
      radial-gradient(circle at 100% 50%,#0A0A0A 0 5px,transparent 5.5px);
  }

  /* Setas conectoras no gap entre cards */
  .process-card:not(:last-child)::after{
    content:"→";
    position:absolute;
    right:-14px;
    top:18px;
    width:12px;
    height:28px;
    line-height:28px;
    text-align:center;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    font-weight:800;
    color:#0A0A0A;
    z-index:3;
  }

  /* Badges pulsando em sequência, lê o fluxo 01→02→03→04→05 */
  .process-grid>[data-process-card]:nth-child(2) >span:first-child{
    animation:badge-step-pulse 5s ease-in-out 0s infinite;
  }
  .process-grid>[data-process-card]:nth-child(3) >span:first-child{
    animation:badge-step-pulse 5s ease-in-out .7s infinite;
  }
  .process-grid>[data-process-card]:nth-child(4) >span:first-child{
    animation:badge-step-pulse 5s ease-in-out 1.4s infinite;
  }
  .process-grid>[data-process-card]:nth-child(5) >span:first-child{
    animation:badge-step-pulse 5s ease-in-out 2.1s infinite;
  }
  .process-grid>[data-process-card]:nth-child(6) >span:first-child{
    animation:badge-step-pulse 5s ease-in-out 2.8s infinite;
  }
}

@media (max-width:1023px){
.process-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px 18px;
  align-items:center;
  margin-bottom:18px;
}
.process-status{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  color:#0A0A0A;
}
.process-status span{
  flex:none;
  border:2px solid #0A0A0A;
  border-radius:999px;
  background:#F3F1EB;
  padding:7px 11px;
  box-shadow:3px 3px 0 #0A0A0A;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:800;
}
.process-status strong{
  min-width:0;
  font-family:Syne,sans-serif;
  font-size:20px;
  line-height:1;
}
.process-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
}
.process-nav{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid #0A0A0A;
  border-radius:14px;
  background:#F3F1EB;
  box-shadow:4px 4px 0 #0A0A0A;
  color:#0A0A0A;
  font-family:'JetBrains Mono',monospace;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  transition:transform .22s var(--ease-out), box-shadow .22s, opacity .2s;
}
.process-nav:hover:not(:disabled){ transform:translate(-1px,-1px); box-shadow:5px 5px 0 #0A0A0A; }
.process-nav:disabled{ opacity:.42; cursor:not-allowed; box-shadow:2px 2px 0 #0A0A0A; }
.process-dots{
  grid-column:1/-1;
  display:flex;
  gap:8px;
  align-items:center;
}
.process-dot{
  width:34px;
  height:5px;
  border:0;
  border-radius:999px;
  background:rgba(10,10,10,.28);
  cursor:pointer;
  transition:width .25s var(--ease-out), background .2s;
}
.process-dot.is-active{
  width:58px;
  background:#0A0A0A;
}
.process-grid{
  display:flex !important;
  grid-template-columns:none !important;
  gap:18px;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-padding:18px;
  padding:6px 8px 18px;
  -webkit-overflow-scrolling:touch;
}
.process-grid::-webkit-scrollbar{ height:8px; }
.process-grid::-webkit-scrollbar-track{ background:rgba(10,10,10,.16); border-radius:999px; }
.process-grid::-webkit-scrollbar-thumb{ background:#0A0A0A; border-radius:999px; }
.process-flow{ display:none; }
.process-card{
  flex:0 0 clamp(300px,38vw,430px);
  min-height:224px;
  scroll-snap-align:center;
  opacity:.72;
  transform:scale(.965);
  transform-origin:center;
  transition:opacity .28s ease, transform .32s var(--ease-out), box-shadow .22s;
}
.process-card.is-active{
  opacity:1;
  transform:scale(1);
  box-shadow:8px 8px 0 #0A0A0A;
}
.process-card.process-card--accent.is-active{
  box-shadow:8px 8px 0 #F3F1EB;
}
.process-card h3{ font-size:22px; }
.process-card p{ font-size:13.5px; line-height:1.55; }
} /* end @media max-width:1023px */

@media (max-width:720px){
  .process-controls{
    grid-template-columns:1fr auto;
    margin-bottom:14px;
  }
  .process-status{
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
  }
  .process-status strong{ font-size:18px; }
  .process-dots{ overflow:hidden; }
  .process-dot{ flex:1 1 auto; min-width:22px; }
  .process-dot.is-active{ flex-grow:1.8; width:auto; }
  .process-grid{
    width:calc(100% + 40px);
    margin:0 -20px;
    gap:14px;
    scroll-padding:20px;
    padding:6px 20px 16px;
  }
  .process-card{
    flex-basis:min(82vw,360px);
    min-height:236px;
    padding:20px;
  }
  .process-card h3{ font-size:21px; }
  .process-card p{ font-size:13px; }
}

@media (max-width:720px){
  /* --- CTA final mobile: compacto, direto ao form --- */
  .briefing-cta{ padding:36px 20px; }
  .briefing-cta__inner{
    display:grid;
    grid-template-columns:1fr;
    padding:22px 18px;
    gap:20px;
    border-radius:20px;
    align-items:start;
    box-shadow:5px 5px 0 var(--accent,#FF4D1C);
  }
  .briefing-cta__copy,
  .briefing-form{ width:100%; min-width:0; }
  .briefing-cta h2{ font-size:28px; line-height:1.02; }
  .briefing-cta__sub{ margin-top:10px; font-size:13px; }
  .briefing-cta__mail{
    max-width:100%;
    margin-top:10px;
    overflow-wrap:anywhere;
    font-size:12px;
  }
  /* ocultar "duas formas de trabalhar", info secundária que alonga demais */
  .briefing-cta__ways{ display:none; }

  /* form compacto */
  .briefing-form{ padding:16px; gap:10px; }
  .briefing-form__label{ font-size:10px; }
  .bf-field{ gap:5px; }
  .bf-field label{ font-size:10px; }
  .bf-field input,
  .bf-field textarea{ padding:10px 12px; font-size:13.5px; border-radius:10px; }
  .bf-field textarea{ min-height:60px; rows:2; }

  /* chips em 2 colunas, metade das linhas */
  .bf-choices{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .bf-choices legend{ margin-bottom:2px; font-size:10px; }
  .bf-chip{ min-height:40px; padding:9px 10px; border-radius:10px; }
  .bf-chip span{ font-size:12.5px; gap:7px; }
  .bf-chip span::before{ width:14px; height:14px; }

  .bf-submit{ min-height:44px; margin-top:2px; font-size:13.5px; }
  .bf-note{ font-size:10.5px; }
}

@media (max-width:380px){
  .bf-choices{ grid-template-columns:1fr; }
}

/* --- Acessibilidade: respeita usuários que pedem menos movimento --- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* ===== "O que é": constelação interativa (componente compartilhado nas LPs) ===== */
/* Lista de fallback (sem JS), legível e indexável */
.oque-orbit .orbit-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.oque-orbit .orbit-list li{ display:block; padding-left:26px; position:relative; }
.oque-orbit .orbit-list li::before{ content:attr(data-icon); position:absolute; left:0; top:1px; }
.oque-orbit .orbit-list strong{ display:block; font-family:Syne,sans-serif; font-weight:700; font-size:14px; color:var(--ink); }
.oque-orbit .orbit-list span{ font-size:12.5px; line-height:1.45; color:var(--muted); }
/* Quando o JS assume, a lista some visualmente mas continua no DOM (a11y/SEO) */
.oque-orbit.is-enhanced .orbit-list{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.orbit-stage{ position:relative; width:100%; max-width:412px; aspect-ratio:1/1; margin:2px auto 0; }
.orbit-deco{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.orbit-ring{ fill:none; stroke:rgba(10,10,10,.12); stroke-width:.5; }
.orbit-ring--outer{ stroke-dasharray:1.4 3; transform-origin:50% 50%; animation:orbitSpin 28s linear infinite; }
.orbit-line{ stroke:rgba(10,10,10,.14); stroke-width:.5; transition:stroke .2s; }
.orbit-line.is-active{ stroke:var(--accent); stroke-width:.9; }
.orbit-flow{ stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:1 64; opacity:0; }
.orbit-flow.is-active{ opacity:1; animation:orbitFlow 1.8s linear infinite; }

.orbit-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:62px; height:62px; border-radius:16px; border:2px solid #0A0A0A; background:linear-gradient(180deg,#242424 0%,#0A0A0A 62%); box-shadow:4px 4px 0 var(--accent); display:flex; align-items:center; justify-content:center; z-index:2; }
.orbit-core svg{ width:32px; height:32px; }
.orbit-core::after{ content:""; position:absolute; inset:-6px; border-radius:20px; border:1.5px solid var(--accent); opacity:.4; animation:orbitPulse 3.4s ease-out infinite; }

.orbit-node{ position:absolute; left:var(--x,50%); top:var(--y,50%); transform:translate(-50%,-50%); width:48px; height:48px; display:flex; align-items:center; justify-content:center; font-size:21px; line-height:1; border:1.5px solid var(--ink); border-radius:13px; background:var(--paper); box-shadow:2px 2px 0 rgba(10,10,10,.18); cursor:pointer; z-index:3; transition:transform .18s, box-shadow .18s, border-color .18s; }
.orbit-node:hover, .orbit-node:focus-visible, .orbit-node.is-active{ border-color:var(--accent); box-shadow:3px 3px 0 var(--accent); transform:translate(-50%,-50%) scale(1.08); outline:none; }

.orbit-caption{ margin:18px auto 0; max-width:412px; min-height:92px; border:var(--border-w) solid var(--ink); border-radius:14px; background:var(--paper); box-shadow:var(--shadow-card); padding:15px 18px; }
.orbit-caption strong{ display:block; font-family:Syne,sans-serif; font-weight:700; font-size:15px; color:var(--ink); margin-bottom:6px; }
.orbit-caption span{ font-size:13px; line-height:1.5; color:var(--muted); }

@keyframes orbitSpin{ to{ transform:rotate(360deg); } }
@keyframes orbitPulse{ 0%{ transform:scale(.9); opacity:.45; } 70%{ opacity:0; } 100%{ transform:scale(1.35); opacity:0; } }
@keyframes orbitFlow{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-65; } }

@media (max-width:560px){
  .orbit-stage{ max-width:290px; }
  .orbit-node{ width:42px; height:42px; font-size:18px; border-radius:11px; }
  .orbit-core{ width:54px; height:54px; }
  .orbit-core svg{ width:28px; height:28px; }
}

/* ===== "O que é": bloco esquerdo: lede em destaque + termos-chave + contraste ✗/✓ ===== */
.oque-lede{ position:relative; margin:0 0 18px; padding-left:18px; font-size:clamp(16px,1.35vw,18.5px); line-height:1.5; color:var(--ink); }
.oque-lede::before{ content:""; position:absolute; left:0; top:5px; bottom:5px; width:4px; border-radius:4px; background:var(--accent); }
.oque-lede strong{ font-weight:700; }
.oque-hl{ color:var(--accent); font-weight:600; }
.oque-vs{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:9px; }
.oque-vs li{ position:relative; padding-left:27px; font-size:14.5px; line-height:1.45; }
.oque-vs li::before{ position:absolute; left:0; top:-1px; font-family:'JetBrains Mono',monospace; font-weight:800; font-size:15px; }
.oque-vs .x{ color:var(--muted); }
.oque-vs .x::before{ content:"\2717"; color:#bcb5ab; }
.oque-vs .v{ color:var(--ink); }
.oque-vs .v::before{ content:"\2713"; color:var(--accent); }
.oque-vs .v strong{ font-weight:700; }

/* ===== Rodapé das LPs: ícones sociais (WhatsApp + Instagram) ===== */
.lp-foot{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.lp-foot__social{ display:flex; gap:12px; }
.lp-foot__social a{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.18); border-radius:10px;
  color:rgba(255,255,255,.6);
  transition:color .18s, border-color .18s, background .18s, transform .18s;
}
.lp-foot__social a:hover{ color:#fff; border-color:var(--accent); background:rgba(255,77,28,.14); transform:translateY(-2px); }
.lp-foot__social svg{ width:18px; height:18px; }

/* ===== Carrossel por swipe no mobile (seções de cards das LPs) ===== */
/* a dica só aparece no mobile (default antes do media query, senão vence a cascata) */
.lp-swipe-hint{ display:none; }
/* especificidade classe+atributo (0,2,0) vence o grid embutido das LPs (0,1,0) */
@media (max-width:640px){
  .lp-swipe[data-swipe]{
    display:flex; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:16px;
    scrollbar-width:none;
  }
  .lp-swipe[data-swipe]::-webkit-scrollbar{ display:none; }
  .lp-swipe[data-swipe] > *{ scroll-snap-align:center; }
  /* "browse": espia os cards vizinhos */
  .lp-swipe[data-swipe="peek"] > *{ flex:0 0 76%; }
  /* "solo": um card focado por vez, leve espiada */
  .lp-swipe[data-swipe="solo"] > *{ flex:0 0 90%; }
  /* dica de swipe */
  .lp-swipe[data-swipe]{ position:relative; }
  .lp-swipe-hint{
    display:flex; align-items:center; gap:7px;
    font-family:'JetBrains Mono',monospace; font-size:10.5px;
    letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); margin:0 0 10px;
  }
  .lp-swipe-hint::after{ content:"⟶"; font-size:13px; }
}