/* ==========================================================================
   OCTA SYSTEMS — Site institucional
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:            #050506;
  --bg-2:          #08080a;
  --panel:         #0a0a0c;
  --panel-2:       #0d0d10;
  --line:          rgba(255,255,255,.075);
  --line-strong:   rgba(255,255,255,.16);
  --txt:           #f4f4f5;
  --txt-2:         rgba(255,255,255,.62);
  --txt-3:         rgba(255,255,255,.40);
  --glow:          rgba(215,228,255,.85);

  --shell:         1352px;
  --pad:           clamp(20px, 4vw, 48px);

  --font-display:  'Saira', 'Outfit', system-ui, sans-serif;
  --font-sans:     'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease:          cubic-bezier(.22,1,.36,1);
  --ease-io:       cubic-bezier(.65,.05,.36,1);
  --hdr:           88px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html:not(.is-loading){scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font-sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
svg{display:block}
::selection{background:rgba(255,255,255,.18);color:#fff}

::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#1d1d21;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#2c2c32}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.preloader{
  position:fixed;inset:0;z-index:2000;
  display:grid;place-items:center;
  background:var(--bg);
  transition:opacity .6s var(--ease), visibility .6s;
}
.preloader__inner{display:grid;justify-items:center;gap:26px;width:min(300px,70vw)}
.preloader__logo{
  width:132px;opacity:0;
  filter:drop-shadow(0 0 26px rgba(255,255,255,.22));
  animation:logoIn 1s var(--ease) forwards;
}
@keyframes logoIn{from{opacity:0;transform:translateY(12px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.preloader__bar{width:100%;height:1px;background:rgba(255,255,255,.12);overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,rgba(255,255,255,.25),#fff);box-shadow:0 0 12px rgba(255,255,255,.6)}
.preloader__count{font-family:var(--font-display);font-size:12px;letter-spacing:.22em;color:var(--txt-3)}
.preloader__count i{font-style:normal}
.preloader__curtain{position:absolute;inset:0;background:var(--bg);transform-origin:top;transition:transform 1s var(--ease)}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.preloader.is-done .preloader__curtain{transform:scaleY(0)}

/* ==========================================================================
   GLOBAL LAYERS
   ========================================================================== */
.grain{
  position:fixed;inset:-120%;z-index:900;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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 7s steps(9) infinite;
  mix-blend-mode:overlay;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}20%{transform:translate(-8%,3%)}
  30%{transform:translate(4%,-6%)}40%{transform:translate(-3%,7%)}50%{transform:translate(-6%,4%)}
  60%{transform:translate(6%,0)}70%{transform:translate(0,6%)}80%{transform:translate(3%,9%)}90%{transform:translate(-6%,3%)}
}

.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1100;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85));box-shadow:0 0 10px rgba(255,255,255,.5)}

.cursor{position:fixed;top:0;left:0;z-index:1500;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cursor.is-active{opacity:1}
.cursor__dot,.cursor__ring{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:5px;height:5px;background:#fff}
.cursor__ring{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.6);
  transition:width .3s var(--ease),height .3s var(--ease),border-color .3s,background .3s;
}
.cursor.on-link .cursor__ring{width:56px;height:56px;border-color:rgba(255,255,255,.9)}
.cursor.on-link .cursor__dot{opacity:0}
.cursor.on-card .cursor__ring{width:78px;height:78px;background:rgba(255,255,255,.08);border-color:transparent}
@media (hover:none),(max-width:900px){.cursor{display:none}}

/* ==========================================================================
   TYPOGRAPHY / UI PRIMITIVES
   ========================================================================== */
.eyebrow{
  font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:26px;
}
.h2{
  font-size:clamp(22px,2.1vw,30px);font-weight:300;line-height:1.36;
  letter-spacing:-.012em;color:#fff;max-width:34ch;
}
.h2--xl{font-size:clamp(25px,2.5vw,35px);max-width:23ch}
.h3{font-size:clamp(20px,1.9vw,25px);font-weight:300;line-height:1.32;letter-spacing:-.01em;color:#fff;margin-bottom:16px}
.body{font-size:15px;line-height:1.85;color:var(--txt-2);font-weight:300}
.body + .body{margin-top:22px}

.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:14px 26px;border:1px solid var(--line-strong);border-radius:2px;
  font-size:13px;font-weight:300;letter-spacing:.02em;color:#fff;
  overflow:hidden;isolation:isolate;
  transition:border-color .5s var(--ease),color .5s var(--ease);
}
.btn span{position:relative;z-index:2}
.btn svg{width:15px;height:15px;position:relative;z-index:2;transition:transform .5s var(--ease)}
.btn::before{
  content:'';position:absolute;inset:0;z-index:1;background:#fff;
  transform:translateY(101%);transition:transform .6s var(--ease);
}
.btn:hover{color:#000;border-color:#fff}
.btn:hover::before{transform:translateY(0)}
.btn:hover svg{transform:translateX(4px)}
.btn--lg{padding:17px 34px;font-size:13.5px}
.btn--ghost{padding:11px 18px;font-size:12px;border-color:var(--line-strong)}
.btn--ghost svg{width:14px;height:14px}

.link-arrow{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding-bottom:12px;font-size:13.5px;color:#fff;font-weight:300;
}
.link-arrow svg{width:16px;height:16px;transition:transform .55s var(--ease)}
.link-arrow::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:rgba(255,255,255,.28);
}
.link-arrow::before{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:#fff;transform:scaleX(0);transform-origin:right;
  transition:transform .6s var(--ease);z-index:1;
}
.link-arrow:hover::before{transform:scaleX(1);transform-origin:left}
.link-arrow:hover svg{transform:translateX(6px)}
.link-arrow--lg{font-size:16px;padding-bottom:15px}
.link-arrow--sm{font-size:12.5px;padding-bottom:9px}
.link-arrow--sm svg{width:14px;height:14px}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:transform .6s var(--ease),background .5s,backdrop-filter .5s;
}
.header.is-solid{background:rgba(5,5,6,.72);backdrop-filter:blur(18px) saturate(140%)}
.header.is-hidden{transform:translateY(-100%)}
.header__inner{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding-inline:var(--pad);
  height:var(--hdr);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
}
.header__line{
  height:1px;background:var(--line);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease);
}
.header.is-solid .header__line{transform:scaleX(1)}

.brand{flex-shrink:0}
.brand img{width:96px;transition:opacity .4s,filter .5s}
.brand:hover img{filter:drop-shadow(0 0 14px rgba(255,255,255,.45))}

.nav{position:relative;display:flex;align-items:center;gap:clamp(18px,2.6vw,42px);justify-self:center}
.nav__link{
  position:relative;font-size:13.5px;font-weight:300;color:var(--txt-2);
  padding:8px 2px;transition:color .4s;
}
.nav__link:hover,.nav__link.is-active{color:#fff}
.nav__indicator{
  position:absolute;bottom:0;left:0;height:1px;width:0;
  background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7);
  opacity:0;transition:transform .55s var(--ease),width .55s var(--ease),opacity .4s;
}

/* ---------- Seletor de idioma ---------- */
.lang-switcher{position:relative;justify-self:end}
.lang-switcher__btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 12px;border:1px solid var(--line-strong);border-radius:2px;
  font-size:12px;letter-spacing:.03em;color:var(--txt-2);
  background:transparent;
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.lang-switcher__btn svg{width:15px;height:15px;flex-shrink:0}
.lang-switcher__btn #langCurrent{font-weight:400;color:#fff;letter-spacing:.04em}
.lang-switcher__chev{width:11px!important;height:11px!important;transition:transform .35s var(--ease)}
.lang-switcher__btn:hover{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.03)}
.lang-switcher__btn[aria-expanded="true"] .lang-switcher__chev{transform:rotate(180deg)}

.lang-switcher__menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:50;
  min-width:172px;padding:6px;
  border:1px solid var(--line-strong);border-radius:2px;
  background:rgba(9,9,11,.92);backdrop-filter:blur(16px);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.8);
  display:grid;gap:1px;
  animation:langMenuIn .28s var(--ease);
}
.lang-switcher__menu[hidden]{display:none}
@keyframes langMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lang-switcher__menu li{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:2px;cursor:pointer;
  transition:background .25s var(--ease);
}
.lang-switcher__menu li:hover{background:rgba(255,255,255,.06)}
.lang-switcher__menu li.is-active{background:rgba(255,255,255,.09)}
.lang-switcher__code{
  font-size:10.5px;font-weight:400;letter-spacing:.04em;color:var(--txt-3);
  width:22px;flex-shrink:0;
}
.lang-switcher__menu li.is-active .lang-switcher__code{color:#fff}
.lang-switcher__name{font-size:13px;color:var(--txt-2)}
.lang-switcher__menu li.is-active .lang-switcher__name{color:#fff}

@media (max-width:1000px){
  .lang-switcher__btn{padding:8px 10px}
  .lang-switcher__btn #langCurrent{display:none}
  .lang-switcher__menu{right:-8px}
}

.burger{display:none;width:34px;height:34px;position:relative;justify-self:end}
.burger span{
  position:absolute;left:6px;width:22px;height:1px;background:#fff;
  transition:transform .45s var(--ease),opacity .3s;
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed;inset:0;z-index:990;background:var(--bg);
  padding:calc(var(--hdr) + 30px) var(--pad) 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease);
  visibility:hidden;
}
.mobile-menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.mobile-menu__nav{display:flex;flex-direction:column;gap:6px}
.mobile-menu__nav a{
  display:flex;align-items:baseline;gap:16px;
  font-size:clamp(28px,8vw,42px);font-weight:200;letter-spacing:-.02em;
  padding:12px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(24px);
}
.mobile-menu.is-open .mobile-menu__nav a{
  animation:mmIn .7s var(--ease) forwards;
}
.mobile-menu__nav a:nth-child(1){animation-delay:.18s}
.mobile-menu__nav a:nth-child(2){animation-delay:.24s}
.mobile-menu__nav a:nth-child(3){animation-delay:.30s}
.mobile-menu__nav a:nth-child(4){animation-delay:.36s}
.mobile-menu__nav a:nth-child(5){animation-delay:.42s}
.mobile-menu__nav a:nth-child(6){animation-delay:.48s}
@keyframes mmIn{to{opacity:1;transform:none}}
.mobile-menu__nav i{font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--txt-3)}
.mobile-menu__foot{display:grid;gap:20px;font-size:13px;color:var(--txt-3)}
.mobile-menu__foot .btn{justify-self:start}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;height:100svh;display:flex;align-items:flex-start;
  padding:calc(var(--hdr) + 32px) 0 140px;overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__img{
  position:absolute;inset:0;
  background-size:cover;background-repeat:no-repeat;background-position:center top;
  will-change:transform;
}
.hero__vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.82) 16%,rgba(5,5,6,.5) 34%,rgba(5,5,6,.16) 56%,rgba(5,5,6,0) 78%),
    linear-gradient(180deg,rgba(5,5,6,.78) 0%,rgba(5,5,6,0) 24%,rgba(5,5,6,0) 62%,rgba(5,5,6,.82) 93%,var(--bg) 100%);
}
.hero__scan{
  position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hero__content{position:relative;z-index:2;width:100%;margin-block:auto}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--txt-3);
  margin-bottom:26px;
}
.hero__eyebrow em{font-style:normal;opacity:.45;margin:0 4px}
.hero__eyebrow-txt{display:block}
.hero__eyebrow .dot{
  width:5px;height:5px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:pulseDot 2.6s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}
  70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

.hero__title{
  font-family:var(--font-display);
  font-size:clamp(38px,5.2vw,76px);
  font-weight:300;line-height:1.12;letter-spacing:-.024em;
  color:#fff;max-width:26ch;margin-bottom:32px;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .line > span{
  display:block;transform:translateY(115%);
  transition:transform 1.15s var(--ease);
}
.hero__title .dim{color:rgba(255,255,255,.55)}
body.is-ready .hero__title .line:nth-child(1) > span{transform:none;transition-delay:.12s}
body.is-ready .hero__title .line:nth-child(2) > span{transform:none;transition-delay:.22s}
body.is-ready .hero__title .line:nth-child(3) > span{transform:none;transition-delay:.32s}

.hero__lead{
  font-size:17.5px;line-height:1.7;color:var(--txt-2);
  max-width:46ch;margin-bottom:34px;font-weight:300;
}

.reveal-up{opacity:0;transform:translateY(26px);filter:blur(5px)}
body.is-ready .reveal-up{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);
  transition-delay:calc(var(--d,0) * 1ms);
}

.hero__scroll{
  position:absolute;left:50%;bottom:38px;z-index:2;
  width:1px;height:64px;background:rgba(255,255,255,.16);overflow:hidden;
}
.hero__scroll span{
  position:absolute;top:0;left:0;width:100%;height:26px;background:#fff;
  animation:scrollDown 2.2s var(--ease-io) infinite;
}
@keyframes scrollDown{0%{transform:translateY(-100%)}60%,100%{transform:translateY(280%)}}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{position:relative;padding-block:clamp(72px,9vw,124px);border-bottom:1px solid var(--line)}
.section--about{background:var(--bg)}
.section--products{background:var(--bg-2)}
.section--tech{background:var(--bg)}
.section--vision{background:var(--bg-2)}
.section--careers{background:var(--bg)}

.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,3.6vw,52px);align-items:center}
.split__text .h2{margin-bottom:30px}
.split__text .btn{margin-top:38px}

/* ---------- Media frame ---------- */
.split__media{position:relative}
.media-frame{
  position:relative;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/10.4;background:#000;
}
.media-frame img{
  width:100%;height:118%;object-fit:cover;
  scale:1.04;will-change:transform;
  transition:scale 1.4s var(--ease),filter 1.4s var(--ease);
  filter:grayscale(.15) contrast(1.05);
}
.media-frame:hover img{scale:1.1}
.media-frame__sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.09) 48%,transparent 58%);
  transform:translateX(-120%);
}
.media-frame:hover .media-frame__sheen{transition:transform 1.3s var(--ease);transform:translateX(120%)}
.media-frame__scan{
  position:absolute;left:0;right:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.055),transparent);
  animation:frameScan 6s linear infinite;
}
@keyframes frameScan{0%{top:-140px}100%{top:100%}}

.corner{position:absolute;width:16px;height:16px;border:1px solid rgba(255,255,255,.35);opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.corner.tl{top:12px;left:12px;border-right:0;border-bottom:0;transform:translate(-6px,-6px)}
.corner.tr{top:12px;right:12px;border-left:0;border-bottom:0;transform:translate(6px,-6px)}
.corner.bl{bottom:12px;left:12px;border-right:0;border-top:0;transform:translate(-6px,6px)}
.corner.br{bottom:12px;right:12px;border-left:0;border-top:0;transform:translate(6px,6px)}
.media-frame:hover .corner{opacity:1;transform:none}

/* reveal for media */
[data-reveal-media] .media-frame{clip-path:inset(0 0 100% 0)}
[data-reveal-media].is-in .media-frame{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.35s var(--ease);
}

/* ==========================================================================
   PRODUTOS
   ========================================================================== */
.products__head{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);
  align-items:start;margin-bottom:clamp(38px,4.6vw,62px);
}
.products__head .h2{max-width:14ch}
.products__aside{padding-top:34px;display:grid;justify-items:end;gap:30px;text-align:right}
.products__aside .body{text-align:left}

/* Carrossel modular de produtos: os cards nunca quebram para uma
   segunda linha. JS conta os cards com data-enabled != "false" e
   escreve o total em data-count no .products__grid, que define a
   largura "ideal" de cada card (dividindo o espaço da linha) e um
   min-width abaixo do qual ele não encolhe. Quando os cards ativos
   cabem lado a lado, ficam do tamanho ideal, sem rolagem; quando não
   cabem (tela estreita, muitos produtos ativos), a linha transborda e
   vira um carrossel com rolagem horizontal + snap, ao invés de
   empilhar os cards um abaixo do outro — ver initProductsCarousel()
   em main.js para as setas de navegação e o fade nas bordas. */
.products__carousel{position:relative}
.products__grid{
  display:flex;gap:12px;container-type:inline-size;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.products__grid::-webkit-scrollbar{display:none}
.products__grid .card{width:calc(25% - 9px);min-width:250px}
.products__grid[data-count="1"] .card{width:100%;min-width:280px}
.products__grid[data-count="2"]{gap:16px}
.products__grid[data-count="2"] .card{width:calc(50% - 8px);min-width:300px}
.products__grid[data-count="3"]{gap:14px}
.products__grid[data-count="3"] .card{width:calc(33.334% - 9.334px);min-width:270px}

/* fade nas bordas + visibilidade das setas, ligados via JS conforme
   há ou não conteúdo para rolar em cada direção */
.products__carousel.can-scroll-left .products__grid{mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),#000 100%)}
.products__carousel.can-scroll-right .products__grid{mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%)}
.products__carousel.can-scroll-left.can-scroll-right .products__grid{mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}

.carousel__nav{
  position:absolute;top:50%;z-index:6;
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:50%;
  background:rgba(8,8,10,.7);backdrop-filter:blur(10px);color:#fff;
  transform:translateY(-50%);
  transition:background .4s var(--ease),border-color .4s var(--ease),opacity .4s,transform .4s var(--ease);
}
.carousel__nav svg{width:18px;height:18px}
.carousel__nav:hover{background:#fff;color:#000;border-color:#fff}
.carousel__nav--prev{left:-8px}
.carousel__nav--next{right:-8px}
.carousel__nav[hidden]{display:none}
.carousel__nav:disabled{opacity:0;pointer-events:none}
@media (hover:none){.carousel__nav{display:none}}

.card[data-enabled="false"]{display:none}

.card{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  min-height:432px;display:flex;flex-direction:column;flex-shrink:0;
  scroll-snap-align:start;
  transform-style:preserve-3d;
  transition:border-color .6s var(--ease),transform .5s var(--ease),box-shadow .6s var(--ease);
}
.card:hover{border-color:rgba(255,255,255,.2);box-shadow:0 26px 60px -30px rgba(0,0,0,.9)}
.card__glow{
  position:absolute;inset:-1px;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.11),transparent 62%);
  transition:opacity .5s var(--ease);
}
.card:hover .card__glow{opacity:1}
.card__body{position:relative;z-index:3;padding:24px 22px 0}
.card__status{
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;color:var(--txt-3);margin-bottom:12px;
}
.card__status .pulse{
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.8);
  animation:pulseDot 2.2s infinite;
}
.card__title{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--font-display);font-size:21px;font-weight:400;
  letter-spacing:-.01em;color:#fff;margin-bottom:14px;
}
.tag{
  font-family:var(--font-sans);font-size:10.5px;font-weight:300;letter-spacing:.04em;
  color:var(--txt-2);padding:4px 10px;border:1px solid var(--line-strong);border-radius:99px;
  transition:border-color .5s,color .5s;
}
.card:hover .tag{border-color:rgba(255,255,255,.3);color:#fff}
.card__desc{font-size:12.5px;line-height:1.78;color:var(--txt-2);margin-bottom:24px;max-width:25ch}
.card__art{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.card__art::before{
  content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,9,11,.95) 0%,rgba(9,9,11,.7) 26%,rgba(9,9,11,.12) 46%,transparent 62%);
}
.art-halo{
  position:absolute;left:50%;bottom:-16%;width:130%;aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,255,255,.09),transparent 62%);
  opacity:.6;transition:opacity .7s var(--ease);
}
.card:hover .art-halo{opacity:1}

/* --- Escala do card conforme a quantidade ativa ---
   Quanto menos cards, mais espaço cada um ganha: cresce a altura, o
   título, a descrição e — no caso de um único card — a moldura do
   celular também aumenta (baseada em altura, não largura, para não
   distorcer em um card muito largo). */
.products__grid[data-count="2"] .card{min-height:472px}
.products__grid[data-count="2"] .card__body{padding:30px 28px 0}
.products__grid[data-count="2"] .card__title{font-size:25px;margin-bottom:16px}
.products__grid[data-count="2"] .card__desc{font-size:13.5px;max-width:30ch;margin-bottom:28px}

.products__grid[data-count="3"] .card{min-height:452px}
.products__grid[data-count="3"] .card__body{padding:27px 24px 0}
.products__grid[data-count="3"] .card__title{font-size:22.5px}
.products__grid[data-count="3"] .card__desc{max-width:27ch}

.products__grid[data-count="1"] .card{min-height:560px}
.products__grid[data-count="1"] .card__body{padding:46px 48px 0}
.products__grid[data-count="1"] .card__title{font-size:clamp(28px,3vw,36px);margin-bottom:20px}
.products__grid[data-count="1"] .card__desc{font-size:15.5px;line-height:1.85;max-width:34ch;margin-bottom:34px}
.products__grid[data-count="1"] .tag{font-size:11.5px;padding:5px 13px}
.products__grid[data-count="1"] .link-arrow--sm{font-size:14px}

/* --- Petza art ---
   Em telas maiores, a arte cobre o card inteiro (herda o
   position:absolute;inset:0 de .card__art, igual aos outros cards) —
   a foto pode ficar atrás do texto sem qualquer recorte artificial
   para "escapar" dele; o scrim de .card__art::before cuida da
   legibilidade do texto por cima. Só no mobile (≤720px) a arte
   continua num espaço próprio, sem sobrepor — ver o breakpoint no
   final do arquivo. */
.art-petza .card__art-img{
  position:absolute;right:0;bottom:0;width:75%;height:75%;
  object-fit:cover;object-position:right center;
  transition:transform 1s var(--ease);
}
.card:hover .art-petza .card__art-img{transform:scale(1.05)}

/* --- Atena art --- */
.art-atena{perspective:900px}
.art-atena .dash{
  position:absolute;border:1px solid rgba(255,255,255,.09);border-radius:9px;overflow:hidden;
  background:linear-gradient(160deg,#131318,#0a0a0d);
  display:flex;box-shadow:0 26px 50px -22px rgba(0,0,0,.95);
  transition:transform 1s var(--ease);
}
.art-atena .dash--back{
  right:-22%;top:30%;width:82%;aspect-ratio:16/10;
  transform:rotateX(46deg) rotateZ(-32deg) translateZ(0);
}
.art-atena .dash--front{
  right:-8%;bottom:-10%;width:72%;aspect-ratio:16/10;
  transform:rotateX(48deg) rotateZ(-32deg);
}
.card:hover .art-atena .dash--back{transform:rotateX(40deg) rotateZ(-28deg) translateY(-8px)}
.card:hover .art-atena .dash--front{transform:rotateX(42deg) rotateZ(-28deg) translateY(-4px)}
.dash__side{width:26%;padding:9px 7px;display:grid;gap:6px;align-content:start;border-right:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.015)}
.dash__side i{display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.14)}
.dash__side i:nth-child(2n){width:72%;background:rgba(255,255,255,.09)}
.dash__main{flex:1;padding:9px;display:flex;flex-direction:column;gap:7px}
.dash__row{display:flex;gap:6px}
.dash__row i{flex:1;height:16px;border-radius:4px;background:rgba(255,255,255,.06)}
.dash__chart{width:100%;height:42%}
.dash__chart .spark{stroke-dasharray:320;stroke-dashoffset:320;animation:draw 3.2s var(--ease) forwards}
.dash__chart .spark--2{animation-delay:.35s}
@keyframes draw{to{stroke-dashoffset:0}}
.dash__bars{display:flex;gap:4px;align-items:flex-end;height:24%}
.dash__bars i{flex:1;background:rgba(255,255,255,.16);border-radius:2px;transform-origin:bottom;animation:barPulse 3.4s var(--ease-io) infinite}
.dash__bars i:nth-child(1){height:40%;animation-delay:0s}
.dash__bars i:nth-child(2){height:70%;animation-delay:.12s}
.dash__bars i:nth-child(3){height:52%;animation-delay:.24s}
.dash__bars i:nth-child(4){height:88%;animation-delay:.36s;background:rgba(255,255,255,.32)}
.dash__bars i:nth-child(5){height:60%;animation-delay:.48s}
.dash__bars i:nth-child(6){height:78%;animation-delay:.6s}
.dash__bars i:nth-child(7){height:44%;animation-delay:.72s}
.dash__bars i:nth-child(8){height:66%;animation-delay:.84s}
@keyframes barPulse{0%,100%{transform:scaleY(.86)}50%{transform:scaleY(1)}}
.dash__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;flex:1}
.dash__grid i{border-radius:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.045)}

/* --- Orion art --- */
.art-orion .molecule{position:absolute;right:-10%;bottom:6%;width:70%;aspect-ratio:1}
.node{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 28%,#f2f2f5,#6b6b74 42%,#111116 78%);box-shadow:0 0 22px rgba(255,255,255,.14)}
.node--core{left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);box-shadow:0 0 60px rgba(255,255,255,.24)}
.orbit{
  position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.09);border-radius:50%;
  transform:translate(-50%,-50%) rotate(0deg);
}
.orbit--1{width:64%;aspect-ratio:1;animation:spin 14s linear infinite}
.orbit--2{width:88%;aspect-ratio:1;animation:spin 22s linear infinite reverse}
.orbit--3{width:108%;aspect-ratio:1;animation:spin 32s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.orbit i{position:absolute}
.orbit--1 i{width:14%;aspect-ratio:1;top:-7%;left:43%}
.orbit--2 i{width:17%;aspect-ratio:1;bottom:-8%;left:24%}
.orbit--3 i:nth-child(1){width:11%;aspect-ratio:1;top:12%;right:2%}
.orbit--3 i:nth-child(2){width:7%;aspect-ratio:1;bottom:16%;left:4%}
.node--float{animation:float 6s var(--ease-io) infinite}
.node--float.a{width:11%;aspect-ratio:1;left:6%;top:22%;animation-delay:0s}
.node--float.b{width:7%;aspect-ratio:1;left:16%;bottom:12%;animation-delay:1.1s}
.node--float.c{width:9%;aspect-ratio:1;right:8%;bottom:26%;animation-delay:2.2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* --- Futuro art --- */
.art-future .planet{position:absolute;right:-36%;bottom:-50%;width:120%;aspect-ratio:1}
.planet__body{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 26% 18%,#3a3a42,#111116 46%,#050507 74%);
}
.planet__rim{
  position:absolute;inset:-2px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5), 0 0 70px rgba(255,255,255,.14);
  mask-image:radial-gradient(circle at 34% 8%,#000 0 42%,transparent 62%);
}
.art-future .stars{position:absolute;inset:0}
.art-future .stars::before,.art-future .stars::after{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 22% 24%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.2px 1.2px at 62% 14%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.6px 1.6px at 78% 42%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.1px 1.1px at 38% 58%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.3px 1.3px at 12% 68%,rgba(255,255,255,.45),transparent);
  animation:twinkle 4.5s var(--ease-io) infinite;
}
.art-future .stars::after{transform:scale(1.4) translate(6%,-4%);animation-delay:2.2s;opacity:.6}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:.95}}

/* ==========================================================================
   TECNOLOGIA — lista
   ========================================================================== */
.feature-list{margin-top:38px;display:grid;gap:2px}
.feature-list li{
  display:flex;align-items:center;gap:15px;
  font-size:13.5px;color:var(--txt-2);padding:11px 0;
  transition:color .45s var(--ease),transform .5s var(--ease);
}
.feature-list li:hover{color:#fff;transform:translateX(6px)}
.feature-list__icon{flex-shrink:0;width:19px;color:rgba(255,255,255,.5);transition:color .45s}
.feature-list li:hover .feature-list__icon{color:#fff}
.feature-list__icon svg{width:100%;height:auto}

/* ==========================================================================
   VISÃO
   ========================================================================== */
.vision{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(34px,6vw,90px);align-items:start}
.vision__aside{display:grid;gap:26px}
.vision__aside .body{font-size:17px;line-height:1.8}
.vision__aside .body + .body{margin-top:0}

/* marca decorativa abaixo do título — preenche o espaço que sobra na
   coluna esquerda (mais curta que o bloco de texto ao lado) com um
   motivo de "mira/coordenada", ecoando os ícones de órbita usados
   nos cards de produto. Puramente decorativo (aria-hidden). */
.vision__mark{width:132px;aspect-ratio:1;margin-top:40px;opacity:.85}
.vision__mark svg{width:100%;height:100%}
.vision__mark .ring{transform-box:fill-box;transform-origin:center}
.vision__mark .ring--out{animation:visionSpin 30s linear infinite}
.vision__mark .ring--in{animation:visionSpin 20s linear infinite reverse}
.vision__mark .mark-dot{transform-box:fill-box;transform-origin:center;animation:visionPulse 2.6s var(--ease-io) infinite}
@keyframes visionSpin{to{transform:rotate(360deg)}}
@keyframes visionPulse{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

/* ==========================================================================
   CARREIRAS / CONTATO
   ========================================================================== */
.careers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px)}
.careers__col{
  padding:clamp(26px,3vw,40px);border:1px solid var(--line);
  background:linear-gradient(165deg,var(--panel-2),transparent 70%);
  transition:border-color .6s var(--ease),background .6s var(--ease);
}
.careers__col:hover{border-color:rgba(255,255,255,.18)}
.careers__col .body{margin-bottom:30px;max-width:42ch}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-wrap{background:var(--bg);padding-block:clamp(48px,6vw,74px)}
.cta{
  position:relative;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(120% 160% at 50% 120%,#131317 0%,#0a0a0c 44%,#060607 100%);
  padding:clamp(50px,7vw,92px) var(--pad);text-align:center;
}
.cta__waves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.cta__waves path{
  fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;
  stroke-dasharray:1700;stroke-dashoffset:1700;
}
.cta.is-in .cta__waves path{animation:drawWave 2.6s var(--ease) forwards}
.cta.is-in .cta__waves path:nth-child(2){animation-delay:.12s}
.cta.is-in .cta__waves path:nth-child(3){animation-delay:.24s}
.cta.is-in .cta__waves path:nth-child(4){animation-delay:.36s}
.cta.is-in .cta__waves path:nth-child(5){animation-delay:.48s}
@keyframes drawWave{to{stroke-dashoffset:0}}
.cta__inner{position:relative;z-index:2;display:grid;gap:22px;justify-items:center}
.cta__title{
  font-size:clamp(25px,2.8vw,39px);font-weight:300;letter-spacing:-.02em;color:#fff;line-height:1.24;
}
.cta .body{max-width:52ch}
.cta__inner > div{margin-top:12px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--bg);padding-top:clamp(48px,6vw,72px);border-top:1px solid var(--line)}
.footer__grid{
  display:grid;grid-template-columns:1.7fr repeat(5,1fr);
  gap:clamp(24px,3vw,40px);padding-bottom:clamp(38px,5vw,60px);
}
.footer__brand img{width:104px;margin-bottom:24px}
.footer__brand p{font-size:12.5px;line-height:1.9;color:var(--txt-3)}
.footer__col h4{font-size:12.5px;font-weight:400;color:#fff;margin-bottom:18px;letter-spacing:.01em}
.footer__col a{
  display:block;font-size:12.5px;color:var(--txt-3);padding:5px 0;
  width:fit-content;position:relative;transition:color .4s;
}
.footer__col a::after{
  content:'';position:absolute;left:0;bottom:3px;height:1px;width:100%;background:#fff;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.footer__col a:hover{color:#fff}
.footer__col a:hover::after{transform:scaleX(1);transform-origin:left}

.socials{display:flex;gap:12px}
.socials a{
  width:36px;height:36px;display:grid;place-items:center;padding:0;
  border:1px solid var(--line);color:var(--txt-2);
  transition:border-color .5s var(--ease),color .5s,transform .5s var(--ease),background .5s;
}
.socials a::after{display:none}
.socials a svg{width:15px;height:15px}
.socials a:hover{color:#000;background:#fff;border-color:#fff;transform:translateY(-3px)}

.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-block:24px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--txt-3);
}
.footer__top{display:inline-flex;align-items:center;gap:8px;transition:color .4s}
.footer__top svg{width:14px;height:14px;transition:transform .5s var(--ease)}
.footer__top:hover{color:#fff}
.footer__top:hover svg{transform:translateY(-4px)}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
[data-reveal]{
  opacity:0;transform:translateY(30px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  transition-delay:calc(var(--d,0) * 1ms);
}
[data-reveal].is-in{opacity:1;transform:none}

[data-split] .word{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.16em;margin-bottom:-.16em;
}
[data-split] .word > span{
  display:inline-block;transform:translateY(105%);
  transition:transform .95s var(--ease);
  transition-delay:calc(var(--i,0) * 38ms);
}
[data-split].is-in .word > span{transform:none}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1180px){
  .footer__grid{grid-template-columns:1fr 1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:1000px){
  .nav{display:none}
  .header__inner{grid-template-columns:1fr auto auto;gap:14px}
  .burger{display:block}
  .split,.vision,.products__head,.careers{grid-template-columns:1fr}
  .products__aside{justify-items:start;text-align:left;padding-top:0}
  .vision{align-items:start}
  .split__media{order:-1}
  .section--tech .split__media{order:-1}
  .h2,.h2--xl{max-width:22ch}
}
@media (max-width:720px){
  .hero{height:100svh;padding:calc(var(--hdr) + 24px) 0 88px}
  .hero__lead br,.body br,.h2 br,.cta__title br{display:none}
  .hero__vignette{background:linear-gradient(180deg,rgba(5,5,6,.86) 0%,rgba(5,5,6,.55) 40%,rgba(5,5,6,.9) 100%),linear-gradient(90deg,rgba(5,5,6,.8),rgba(5,5,6,.3))}
  .products__grid .card{min-height:420px}
  .products__grid[data-count="2"] .card,.products__grid[data-count="3"] .card{width:84%;min-width:0}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__bottom{justify-content:flex-start}
  .hero__scroll{display:none}

  /* Petza no mobile: a arte fica num espaço próprio abaixo do texto
     (sem sobrepor) — só aqui, não nas telas maiores. Também mantém a
     foto preenchendo 100% desse espaço (a redução de 20% do tamanho
     é só para telas maiores). */
  .art-petza{position:relative;flex:1 1 auto;min-height:0}
  .art-petza::before{content:none}
  .art-petza .card__art-img{inset:0;width:100%;height:100%}
  .products__grid[data-count="1"] .art-petza{width:55%;align-self:flex-end}
}

/* Card único (data-count="1") num container estreito: o celular
   dimensionado por altura (feito para o card largo do desktop) passa a
   cobrir o texto quando o card fica com menos de ~520px de largura —
   troca para dimensionamento por largura, igual ao dos outros cards. */
@container (max-width:520px){
  .products__grid[data-count="1"] .card__body{padding:30px 26px 0}
  .products__grid[data-count="1"] .card__title{font-size:26px;margin-bottom:14px}
  .products__grid[data-count="1"] .card__desc{font-size:13.5px;margin-bottom:24px}
}
@media (max-width:460px){
  .footer__grid{grid-template-columns:1fr}
}

/* Enquadramento do hero por breakpoint — mantém a logo do prédio visível
   e preserva a estrutura da esquerda, que é a parte mais relevante da foto. */
@media (max-width:900px){  .hero__img{background-position:58% top} }

/* ==========================================================================
   MODAIS LEGAIS (privacidade / termos / compliance)
   ========================================================================== */
body.modal-open{overflow:hidden}
.legal-modal{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;padding:24px;
}
.legal-modal[hidden]{display:none}
.legal-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(5,5,6,.8);backdrop-filter:blur(10px);
  animation:legalModalFade .35s var(--ease);
}
.legal-modal__panel{
  position:relative;z-index:1;width:min(720px,100%);
  max-height:min(82vh,760px);overflow-y:auto;
  padding:clamp(30px,4vw,48px);
  border:1px solid var(--line-strong);
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  animation:legalModalIn .4s var(--ease);
}
.legal-modal__close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;
  display:grid;place-items:center;color:var(--txt-2);border-radius:2px;
  transition:color .3s,background .3s;
}
.legal-modal__close svg{width:15px;height:15px}
.legal-modal__close:hover{color:#fff;background:rgba(255,255,255,.08)}
@keyframes legalModalFade{from{opacity:0}to{opacity:1}}
@keyframes legalModalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

.legal-modal__body h2{font-size:clamp(20px,2.4vw,26px);font-weight:500;margin-bottom:6px;padding-right:30px}
.legal-modal__updated{font-size:11.5px;color:var(--txt-3);margin-bottom:24px;letter-spacing:.02em}
.legal-modal__body h3{font-size:13.5px;font-weight:500;color:#fff;margin:22px 0 8px;letter-spacing:.01em}
.legal-modal__body h3:first-of-type{margin-top:0}
.legal-modal__body p{font-size:13px;line-height:1.65;color:var(--txt-2);margin-bottom:4px}
.legal-modal__body ul{margin:8px 0 12px;padding-left:18px}
.legal-modal__body li{font-size:13px;line-height:1.65;color:var(--txt-2);margin-bottom:6px}
.legal-modal__body a{color:var(--txt);text-decoration:underline;text-underline-offset:2px}
.legal-modal__body a:hover{color:#fff}

@media (max-width:640px){
  .legal-modal{padding:14px}
  .legal-modal__panel{max-height:88vh}
}

/* ==========================================================================
   ACESSIBILIDADE
   ========================================================================== */
:focus-visible{outline:1px solid rgba(255,255,255,.75);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .hero__img{transform:none}
  .hero__title .line > span{transform:none}
  [data-reveal],[data-split] .word > span,.reveal-up{opacity:1!important;transform:none!important;filter:none!important}
  [data-reveal-media] .media-frame{clip-path:none}
  .cursor{display:none}
}