/* ══════════════════════════════════════════════════════════════════
   L2soft Solution · estilos
   Paleta tirada da própria logo: azul-marinho, azul médio e o azul
   claro da seta. O site é escuro, com um painel claro no meio que
   reproduz o visual da logo (fundo gelo + marinho).
   ══════════════════════════════════════════════════════════════════ */

/* ========== TOKENS ========== */
:root{
  --bg:   #040b16;
  --bg-2: #081428;
  --bg-3: #0d1c35;

  --accent:   #4aa8de;   /* azul da seta, versão luminosa */
  --accent-2: #9fd8f5;   /* brilho */
  --accent-3: #1f6fae;   /* azul profundo */
  --accent-glow: rgba(74,168,222,.45);
  --accent-line: rgba(74,168,222,.28);

  --ink:   #eef4fb;
  --ink-2: #a7b8cd;
  --ink-3: #6b7e98;

  --line: rgba(238,244,251,.09);

  /* Recuo lateral do painel claro */
  --band-inset: clamp(10px, 2.4vw, 40px);

  --display: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --pad: clamp(20px, 5vw, 64px);
}

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

html{ -webkit-text-size-adjust:100%; scroll-padding-top:72px }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
img,canvas{ display:block; max-width:100% }
svg{ display:block }
ul{ list-style:none }

::selection{ background:var(--accent); color:#04101f }

::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:var(--bg) }
::-webkit-scrollbar-thumb{ background:#16263f; border-radius:99px; border:2px solid var(--bg) }
::-webkit-scrollbar-thumb:hover{ background:#22385a }

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

.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip{
  position:fixed; left:16px; top:-64px; z-index:300;
  padding:10px 18px; border-radius:99px;
  background:var(--accent); color:#04101f; font-weight:600; font-size:14px;
  transition:top .3s var(--ease);
}
.skip:focus{ top:16px }

/* ========== TIPOGRAFIA ========== */
.mono{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* Destaque em itálico com degradê azul — usado nos títulos */
.title em, .sec-title em, .cta-title em, .footer-slogan em, .modal-title em{
  font-style:italic;
  font-weight:600;
  padding-right:.06em;             /* o itálico não corta na borda */
  background:linear-gradient(94deg, var(--accent-2) 8%, var(--accent) 50%, var(--accent-3) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.link{
  color:var(--accent-2);
  border-bottom:1px solid var(--accent-line);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.link:hover{ color:var(--ink); border-color:var(--accent) }

.dot{
  display:inline-block; flex-shrink:0;
  width:6px; height:6px; border-radius:99px;
  background:var(--accent); box-shadow:0 0 10px var(--accent-glow);
  animation:breathe 3.2s var(--ease) infinite;
}
@keyframes breathe{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
@keyframes fadeIn{ to{ opacity:1 } }

/* ══════════════════════════════════════════════════════════
   ABERTURA (SPLASH) — a logo se monta peça por peça
   ══════════════════════════════════════════════════════════ */
.splash{ display:none }

.splash-on{ overflow:hidden }
.splash-on .splash,
.splash.is-out{
  display:grid; place-items:center;
  position:fixed; inset:0; z-index:10000;
  background:radial-gradient(60% 55% at 50% 46%, #0b1d38 0%, var(--bg) 72%);
  transition:opacity .7s var(--ease), visibility .7s;
}
.splash.is-out{ opacity:0; visibility:hidden; pointer-events:none }

.splash-stage{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(18px, 3vh, 30px);
  transition:transform .9s var(--ease), filter .9s var(--ease);
}
.splash.is-out .splash-stage{ transform:scale(1.07); filter:blur(6px) }

.splash-mark{ width:clamp(118px, 20vw, 180px); height:auto; overflow:visible }
.splash-mark > *{ opacity:0; transform-box:fill-box }
.sp-L{ transform-origin:50% 100% }
.sp-arc{ transform-origin:50% 100% }
.sp-bar{ transform-origin:0% 50% }
.sp-arrow{ transform-origin:0% 100% }

.splash.is-go .sp-L{ animation:spL .75s var(--ease-out) .05s forwards }
.splash.is-go .sp-arc{ animation:spArc .85s var(--ease-out) .2s forwards }
.splash.is-go .sp-bar{ animation:spBar .65s var(--ease-out) .34s forwards }
.splash.is-go .sp-arrow{ animation:spArrow .95s cubic-bezier(.2,.9,.25,1.06) .48s forwards }
.splash.is-go .splash-mark{ animation:spGlow 1.5s var(--ease) 1.05s both }

@keyframes spL{ from{ opacity:0; transform:translateY(30%) } to{ opacity:1; transform:none } }
@keyframes spArc{ from{ opacity:0; transform:rotate(-75deg) scale(.55) } to{ opacity:1; transform:none } }
@keyframes spBar{ from{ opacity:0; transform:scaleX(0) } to{ opacity:1; transform:none } }
@keyframes spArrow{
  0%{ opacity:0; transform:translate(-22%, 22%) scale(.3) }
  55%{ opacity:1 }
  100%{ opacity:1; transform:none }
}
@keyframes spGlow{
  0%  { filter:drop-shadow(0 0 0 rgba(74,168,222,0)) }
  40% { filter:drop-shadow(0 0 30px rgba(74,168,222,.6)) }
  100%{ filter:drop-shadow(0 0 12px rgba(74,168,222,.2)) }
}

.splash-word{ display:flex; flex-direction:column; align-items:center }
.sw-name{
  display:flex; overflow:hidden; padding:0 .04em .08em;
  font-family:var(--sans); font-weight:700;
  font-size:clamp(2.3rem, 6vw, 3.4rem); line-height:1; letter-spacing:-.01em;
  color:var(--ink);
}
.sw-name span{ display:block; transform:translateY(110%) }
.splash.is-go .sw-name span{ animation:swIn .75s var(--ease-out) forwards }
.splash.is-go .sw-name span:nth-child(1){ animation-delay:.78s }
.splash.is-go .sw-name span:nth-child(2){ animation-delay:.83s }
.splash.is-go .sw-name span:nth-child(3){ animation-delay:.88s }
.splash.is-go .sw-name span:nth-child(4){ animation-delay:.93s }
.splash.is-go .sw-name span:nth-child(5){ animation-delay:.98s }
.splash.is-go .sw-name span:nth-child(6){ animation-delay:1.03s }
@keyframes swIn{ to{ transform:none } }

.sw-line{
  display:block; width:100%; height:2px; margin-top:10px;
  background:linear-gradient(90deg, transparent, var(--accent-3) 12%, var(--accent-2) 50%, var(--accent-3) 88%, transparent);
  transform:scaleX(0);
}
.splash.is-go .sw-line{ animation:swLine .85s var(--ease-out) 1.08s forwards }
@keyframes swLine{ to{ transform:none } }

.sw-sub{
  margin-top:9px; padding-left:.32em;
  font-family:var(--sans); font-weight:500;
  font-size:clamp(.95rem, 2.1vw, 1.2rem); letter-spacing:.32em;
  color:var(--ink-2); opacity:0;
}
.splash.is-go .sw-sub{ animation:swSub 1s var(--ease-out) 1.28s forwards }
@keyframes swSub{ from{ opacity:0; letter-spacing:.85em } to{ opacity:1; letter-spacing:.32em } }

.splash-skip{
  position:absolute; left:50%; bottom:clamp(22px, 4vh, 40px); translate:-50% 0;
  padding:8px 16px; border-radius:99px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); opacity:0;
  animation:fadeIn .6s var(--ease) 1.1s forwards;
  transition:color .3s var(--ease);
}
.splash-skip:hover{ color:var(--ink) }

/* ========== BARRA DE PROGRESSO ========== */
.progress{ position:fixed; inset:0 0 auto 0; z-index:70; height:2px; pointer-events:none }
.progress span{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--accent-3), var(--accent), var(--accent-2));
  box-shadow:0 0 12px var(--accent-glow);
  transform-origin:0 50%; transform:scaleX(0);
}

/* ══════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(5,13,26,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.25); backdrop-filter:blur(14px) saturate(1.25);
  border-bottom-color:var(--line);
  padding-top:12px; padding-bottom:12px;
}
.menu-open .nav{ background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none }

/* Logo (marca + nome) */
.brand{ display:inline-flex; align-items:center; gap:11px; flex-shrink:0 }
.brand-mark{ width:auto; height:30px; transition:transform .6s var(--ease), filter .6s var(--ease) }
.brand:hover .brand-mark{ transform:translateY(-2px) rotate(-4deg); filter:drop-shadow(0 4px 12px rgba(74,168,222,.45)) }
.brand-word{ display:flex; flex-direction:column; align-items:stretch; line-height:1 }
.brand-word b{
  font-weight:700; font-size:19px; letter-spacing:-.01em; color:var(--ink);
  padding-bottom:4px;
  border-bottom:1.5px solid transparent;
  border-image:linear-gradient(90deg, var(--accent-3), var(--accent-2), var(--accent-3)) 1;
}
.brand-word i{
  font-style:normal; font-weight:500; font-size:9.5px; letter-spacing:.34em;
  color:var(--ink-2); text-align:center; padding-left:.34em; margin-top:4px;
}
.brand--lg{ gap:14px }
.brand--lg .brand-mark{ height:46px }
.brand--lg .brand-word b{ font-size:27px; padding-bottom:5px }
.brand--lg .brand-word i{ font-size:12.5px; margin-top:6px }

.nav-links{ display:none; align-items:center; gap:2px }
.nav-links a{
  position:relative; padding:7px 13px; border-radius:99px;
  font-size:14px; font-weight:500; color:var(--ink-2);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.nav-links a:hover{ color:var(--ink); background:rgba(238,244,251,.05) }
.nav-links a.is-active{ color:var(--ink) }
.nav-links a.is-active::after{
  content:''; position:absolute; left:50%; bottom:1px; translate:-50% 0;
  width:4px; height:4px; border-radius:99px;
  background:var(--accent); box-shadow:0 0 8px var(--accent-glow);
}

.nav-end{ display:flex; align-items:center; gap:10px }

.nav-cta{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:9px 17px; border-radius:99px;
  border:1px solid var(--line);
  font-size:13px; font-weight:600; letter-spacing:-.005em; white-space:nowrap;
  transition:border-color .4s var(--ease), background .4s var(--ease), translate .4s var(--ease);
}
.nav-cta::after{
  content:''; width:6px; height:6px; border-radius:99px;
  background:var(--accent); box-shadow:0 0 8px var(--accent-glow);
  animation:breathe 2.6s var(--ease) infinite;
}
.nav-cta:hover{ border-color:var(--accent-line); background:rgba(74,168,222,.07) }

.nav-toggle{
  position:relative; display:grid; place-items:center;
  width:42px; height:42px; border-radius:99px;
  border:1px solid var(--line);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav-toggle:hover{ border-color:var(--accent-line) }
.nav-toggle span{
  position:absolute; width:16px; height:1.5px; border-radius:2px; background:var(--ink);
  transition:transform .45s var(--ease);
}
.nav-toggle span:first-child{ transform:translateY(-3.5px) }
.nav-toggle span:last-child{ transform:translateY(3.5px) }
.menu-open .nav-toggle span:first-child{ transform:rotate(45deg) }
.menu-open .nav-toggle span:last-child{ transform:rotate(-45deg) }

@media (min-width:960px){
  .nav-links{ display:flex }
  .nav-toggle{ display:none }
}
@media (max-width:520px){
  .nav-cta{ display:none }
}

/* Menu do celular */
.menu{
  position:fixed; inset:0; z-index:55;
  display:flex; flex-direction:column; justify-content:center; gap:36px;
  padding:96px var(--pad) 36px;
  background:rgba(4,11,22,.97);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.menu-open .menu{ opacity:1; visibility:visible }
.menu-open{ overflow:hidden }

.menu-links{ display:flex; flex-direction:column }
.menu-links a{
  display:flex; align-items:baseline; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--line);
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.7rem, 7vw, 2.5rem); line-height:1.1; letter-spacing:-.015em;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s var(--ease);
  transition-delay:calc(var(--i) * .05s);
}
.menu-links a .mono{ color:var(--accent); font-size:11px }
.menu-links a:hover{ color:var(--accent-2) }
.menu-foot{
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease) .38s, transform .6s var(--ease) .38s;
}
.menu-mail{ text-transform:none; letter-spacing:.06em }
.menu-open .menu-links a,
.menu-open .menu-foot{ opacity:1; transform:none }

@media (min-width:960px){ .menu{ display:none } }

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(110px, 14vh, 140px) var(--pad);
  overflow:hidden;
  isolation:isolate;
}

/* camada 1 — auréola azul (também é o fundo quando não há WebGL) */
.hero-aura{
  position:absolute; inset:0; z-index:-4; pointer-events:none;
  background:
    radial-gradient(55% 45% at 64% 60%, rgba(74,168,222,.15), transparent 70%),
    radial-gradient(80% 60% at 30% 110%, rgba(31,111,174,.2), transparent 70%);
}

/* camada 2 — partículas WebGL */
#gl{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-3; pointer-events:none;
  opacity:0; transition:opacity 1.8s var(--ease-out);
}
#gl.is-ready{ opacity:1 }

/* camada 3 — malha técnica que dissolve nas bordas */
.hero-grid{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(159,216,245,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(159,216,245,.05) 1px, transparent 1px);
  background-size:clamp(56px, 7vw, 92px) clamp(56px, 7vw, 92px);
  -webkit-mask-image:radial-gradient(75% 60% at 50% 45%, #000 10%, transparent 78%);
          mask-image:radial-gradient(75% 60% at 50% 45%, #000 10%, transparent 78%);
}

/* camada 4 — vinheta + grão */
.hero-veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 44%, rgba(4,11,22,.72) 100%),
    linear-gradient(to bottom, rgba(4,11,22,.85), transparent 20% 72%, var(--bg) 100%);
}
.hero-veil::after{
  content:''; position:absolute; inset:0; opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-inner{ width:100%; max-width:1180px; margin-right:auto }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:clamp(22px, 3.6vh, 36px);
  padding:7px 15px 7px 12px; border-radius:99px;
  border:1px solid var(--line);
  background:rgba(8,20,40,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.eyebrow .mono{ font-size:10.5px; color:var(--ink-2) }

.title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.5rem, 9.6vw, 7.6rem);
  line-height:1.02;
  letter-spacing:-.022em;
  margin-bottom:clamp(22px, 3.4vh, 34px);
}
.title .line{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.12em }
.title .line > span{ display:block; will-change:transform }
.title em{
  background-image:linear-gradient(94deg, var(--accent-2) 0%, var(--accent) 25%, var(--accent-3) 50%, var(--accent) 75%, var(--accent-2) 100%);
  background-size:200% 100%;
  animation:shimmer 9s ease-in-out infinite alternate;
}
@keyframes shimmer{ from{ background-position:0% 50% } to{ background-position:100% 50% } }

.lede{
  max-width:46ch;
  font-size:clamp(15px, 1.7vw, 18.5px);
  line-height:1.68;
  color:var(--ink-2);
  margin-bottom:clamp(30px, 4.4vh, 44px);
}
.lede b{ color:var(--ink); font-weight:600 }

/* ========== BOTÕES ========== */
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px }

.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 25px; border-radius:99px;
  font-size:15px; font-weight:600; letter-spacing:-.005em;
  white-space:nowrap;
  transition:transform .45s var(--ease), translate .4s var(--ease), box-shadow .45s var(--ease),
             border-color .45s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
.btn svg{ width:15px; height:15px; flex-shrink:0; transition:transform .45s var(--ease) }
.btn:hover{ transform:translateY(-2px) }
.btn:hover svg{ transform:translate(2px,-2px) }

.btn-primary{
  background:linear-gradient(145deg, #c2eafb, #5cb6e6 52%, #3a95d0);
  color:#03101f;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 10px 34px -12px var(--accent-glow);
}
.btn-primary:hover{ box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 18px 46px -12px var(--accent-glow) }

.btn-ghost{ border:1px solid var(--line); color:var(--ink) }
.btn-ghost:hover{ border-color:rgba(238,244,251,.26); background:rgba(238,244,251,.05) }

/* ========== RODAPÉ DO HERO ========== */
.hero-foot{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding:0 var(--pad) clamp(22px, 3.4vh, 34px);
}
.hero-foot .col-r{ display:none; text-align:right }

.scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:9px }
.scroll-cue .rail{ position:relative; width:1px; height:40px; overflow:hidden; background:var(--line) }
.scroll-cue .rail::after{
  content:''; position:absolute; inset:0 0 auto 0; height:42%;
  background:linear-gradient(to bottom, transparent, var(--accent));
  animation:railrun 2.1s var(--ease) infinite;
}
@keyframes railrun{ 0%{ transform:translateY(-100%) } 100%{ transform:translateY(240%) } }

@media (min-width:760px){ .hero-foot .col-r{ display:block } }
@media (max-width:759px){
  .hero-foot{ justify-content:center }
  .hero-foot .col-l{ display:none }
}

/* ══════════════════════════════════════════════════════════
   FAIXA DE PALAVRAS
   ══════════════════════════════════════════════════════════ */
.ticker{
  position:relative; overflow:hidden;
  border-block:1px solid var(--line);
  padding:clamp(16px, 2.4vw, 26px) 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker-track{ display:flex; width:max-content; animation:marquee 40s linear infinite }
.ticker:hover .ticker-track{ animation-play-state:paused }
.ticker-group{ display:flex; align-items:center; gap:clamp(22px, 3vw, 40px); padding-right:clamp(22px, 3vw, 40px) }
.ticker-group span{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.6rem, 3.6vw, 2.8rem); line-height:1.15; white-space:nowrap;
  color:var(--ink-2);
}
.ticker-group span:nth-of-type(even){
  color:transparent;
  -webkit-text-stroke:1px rgba(167,184,205,.55);
}
.ticker-group svg{ width:clamp(18px, 2.2vw, 28px); height:auto; flex-shrink:0; color:var(--accent) }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ══════════════════════════════════════════════════════════
   ESTRUTURA DE SEÇÃO
   ══════════════════════════════════════════════════════════ */
.section{ position:relative; padding:clamp(88px, 13vh, 156px) var(--pad) }
.wrap{ width:100%; max-width:1180px; margin:0 auto }

.sec-head{ margin-bottom:clamp(44px, 6.5vh, 76px) }
.sec-tag{ display:flex; align-items:center; gap:12px; margin-bottom:22px }
.sec-tag::after{ content:''; flex:1; max-width:180px; height:1px; background:linear-gradient(90deg, var(--line), transparent) }

.sec-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.1rem, 5.2vw, 4rem);
  line-height:1.08; letter-spacing:-.02em;
  max-width:20ch;
}
.sec-sub{ max-width:48ch; margin-top:20px; color:var(--ink-2); font-size:16px; line-height:1.7 }

/* ══════════════════════════════════════════════════════════
   FAIXA CLARA — o visual da logo (gelo + marinho)
   Sobrescreve TOKENS, não regras: cards, bordas, textos e azuis
   acompanham sozinhos.
   ══════════════════════════════════════════════════════════ */
.band{ position:relative }
.band--light{
  --bg:   #f3f6fa;
  --bg-2: #fbfcfe;
  --bg-3: #ffffff;

  --ink:   #0b2340;
  --ink-2: #3e5573;
  --ink-3: #5a6f8a;

  --line: rgba(11,35,64,.12);

  --accent:   #1d649a;
  --accent-2: #2b7fbf;
  --accent-3: #0c3054;
  --accent-glow: rgba(29,100,154,.28);
  --accent-line: rgba(29,100,154,.32);

  background:var(--bg);
  color:var(--ink);
  margin-inline:var(--band-inset);
  border-radius:clamp(28px, 4vw, 56px);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(159,216,245,.07);
}
.band--light ::selection{ background:#1d649a; color:#fff }

/* ══════════════════════════════════════════════════════════
   01 · SOBRE
   ══════════════════════════════════════════════════════════ */
.about-grid{ display:grid; gap:clamp(40px, 6vw, 84px) }
@media (min-width:960px){ .about-grid{ grid-template-columns:1fr 1.02fr; align-items:center } }

.about-copy p{ max-width:52ch; color:var(--ink-2); font-size:16.5px; line-height:1.78 }
.about-copy p + p{ margin-top:20px }
.about-copy b{ color:var(--ink); font-weight:600 }

.about-points{ display:grid; gap:12px; margin-top:30px }
.about-points li{ display:flex; align-items:center; gap:12px; font-size:15px; font-weight:500 }
.about-points svg{
  width:24px; height:24px; padding:5px; flex-shrink:0; border-radius:99px;
  color:var(--accent-2); background:rgba(74,168,222,.12); border:1px solid var(--accent-line);
}

/* Janela de código (digita sozinha ao entrar na tela) */
.code{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(180deg, rgba(13,28,53,.92), rgba(8,20,40,.92));
  box-shadow:0 30px 80px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(159,216,245,.06);
}
.code-bar{ display:flex; align-items:center; gap:7px; padding:14px 18px; border-bottom:1px solid var(--line) }
.code-bar i{ width:10px; height:10px; border-radius:99px }
.code-bar i:nth-child(1){ background:#1f6fae }
.code-bar i:nth-child(2){ background:#4aa8de }
.code-bar i:nth-child(3){ background:#9fd8f5 }
.code-bar .mono{ margin-left:10px; font-size:11px; letter-spacing:.06em; text-transform:none }

.code-body{
  position:relative; z-index:1;
  padding:22px 22px 20px;
  font-family:var(--mono); font-size:clamp(12px, 1.2vw, 14px); line-height:1.85;
  color:#c9d6e6; white-space:pre-wrap; word-break:break-word; tab-size:2;
}
.c-kw{ color:#7cc4f0 }
.c-cl{ color:#9fd8f5; font-weight:500 }
.c-st{ color:#86e1c4 }
.c-pr{ color:#c9d6e6 }
.c-va{ color:#eef4fb }
.c-fn{ color:#ffd58a }
.c-pn{ color:#6b7e98 }
.c-cm{ color:#5e7391; font-style:italic }

.caret{
  display:inline-block; width:.55em; height:1.15em; margin-left:1px;
  vertical-align:-.22em; background:var(--accent);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }

.code-status{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  padding:13px 22px; border-top:1px solid var(--line);
  font-size:10.5px; letter-spacing:.12em;
  transition:opacity .6s var(--ease), color .6s var(--ease);
}
.code-status .ok{
  width:8px; height:8px; border-radius:99px; background:#86e1c4;
  box-shadow:0 0 10px rgba(134,225,196,.7);
}
.code-status.is-wait{ opacity:.35 }
.code-status.is-wait .ok{ background:var(--ink-3); box-shadow:none }

/* ══════════════════════════════════════════════════════════
   02 · SOLUÇÕES
   ══════════════════════════════════════════════════════════ */
.services{ --num-w:2.6rem; --gap:clamp(14px, 2.4vw, 28px); border-top:1px solid var(--line) }

.service{
  position:relative; display:block;
  border-bottom:1px solid var(--line);
  padding:clamp(26px, 4vw, 38px) 0;
  transition:padding-left .55s var(--ease);
}
.service::before{
  content:''; position:absolute; left:0; top:-1px; height:1px; width:0;
  background:linear-gradient(90deg, var(--accent), transparent);
  transition:width .7s var(--ease);
}
.service::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(74,168,222,.07), transparent 65%);
  opacity:0; transition:opacity .55s var(--ease);
}
.service-top{ display:flex; align-items:baseline; gap:var(--gap) }
.service-num{ flex-shrink:0; width:var(--num-w) }
.service-name{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.7rem, 4.4vw, 3rem); line-height:1.1; letter-spacing:-.018em;
  transition:color .5s var(--ease);
}
.service-name em{ font-style:italic; font-weight:600; color:var(--accent) }
.service-arrow{
  margin-left:auto; flex-shrink:0; align-self:center;
  width:22px; height:22px; color:var(--ink-3);
  opacity:0; transform:translate(-10px, 10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .5s var(--ease);
}
.service-text{
  max-width:58ch; color:var(--ink-2); font-size:15.5px; line-height:1.72;
  padding:16px 0 0 calc(var(--num-w) + var(--gap));
}
.service-tags{
  display:flex; flex-wrap:wrap; gap:7px;
  padding:16px 0 2px calc(var(--num-w) + var(--gap));
}
.tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); border-radius:99px; padding:5px 11px;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}

.service:hover, .service:focus-visible{ padding-left:clamp(8px, 1.6vw, 20px) }
.service:hover::before, .service:focus-visible::before{ width:100% }
.service:hover::after, .service:focus-visible::after{ opacity:1 }
.service:hover .service-name, .service:focus-visible .service-name{ color:var(--accent-2) }
.service:hover .service-arrow, .service:focus-visible .service-arrow{ opacity:1; transform:none; color:var(--accent) }
.service:hover .tag, .service:focus-visible .tag{ color:var(--accent-2); border-color:var(--accent-line) }

@media (hover:none){ .service-arrow{ display:none } }
@media (max-width:620px){ .service-text, .service-tags{ padding-left:0 } }

/* ══════════════════════════════════════════════════════════
   03 · PROJETOS
   ══════════════════════════════════════════════════════════ */
.cases{ display:grid; gap:clamp(16px, 2.2vw, 22px) }
@media (min-width:820px){ .cases{ grid-template-columns:repeat(2, 1fr) } }

.case{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:22px;
  background:var(--bg-2); overflow:hidden;
  transition:border-color .55s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease);
}
.case:hover{
  border-color:var(--accent-line);
  transform:translateY(-4px);
  box-shadow:0 34px 70px -36px rgba(11,35,64,.45);
}

.case-visual{
  position:relative; display:grid; place-items:center;
  aspect-ratio:16/10; overflow:hidden;
  container-type:inline-size;
  background:
    radial-gradient(110% 85% at 88% 0%, rgba(74,168,222,.55) 0%, transparent 55%),
    linear-gradient(150deg, #0d3260 0%, #0a2245 52%, #071630 100%);
}
.case-visual::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(159,216,245,.22) 1px, transparent 1.2px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(80% 80% at 30% 70%, #000, transparent 75%);
          mask-image:radial-gradient(80% 80% at 30% 70%, #000, transparent 75%);
}
.case-visual--shot{ display:block; background:#e7eef6 }
.case-visual--shot::before{ display:none }
.case-visual--shot img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .9s var(--ease);
}
.case:hover .case-visual--shot img{ transform:scale(1.03) }

.case-body{ position:relative; z-index:1; display:flex; flex-direction:column; flex:1; padding:clamp(22px, 2.6vw, 30px) }
.case-client{ color:var(--accent) }
.case-title{
  margin-top:14px;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.25rem, 2.2vw, 1.6rem); line-height:1.25; letter-spacing:-.012em;
}
.case-text{ margin-top:12px; flex:1; color:var(--ink-2); font-size:15.5px; line-height:1.68 }
.case-result{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; line-height:1.6;
}
.case-result i{
  flex-shrink:0; margin-top:6px; width:6px; height:6px; border-radius:99px;
  background:var(--accent); box-shadow:0 0 8px var(--accent-glow);
}
.case-go{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-size:13.5px; font-weight:600; color:var(--ink-3);
  transition:color .45s var(--ease), gap .45s var(--ease);
}
.case-go svg{ width:14px; height:14px }
.case:hover .case-go{ color:var(--accent); gap:11px }

@media (min-width:820px){
  .case--wide{ grid-column:1 / -1; flex-direction:row }
  .case--wide .case-visual{ flex:1.75; aspect-ratio:auto; min-height:400px }
  .case--wide .case-body{ flex:1; justify-content:center; padding:clamp(26px, 3vw, 40px) }
  .case--wide .case-title{ font-size:clamp(1.4rem, 2.2vw, 1.75rem) }
}

/* ---------- Telas animadas (mockups) ----------
   Estado final é o estado de repouso: sem JS ou com movimento
   reduzido, tudo aparece pronto. As animações só rodam com .is-live
   (card visível) e pausam com .is-paused (fora da tela). */
.mk{ position:relative; display:block; font-family:var(--sans); color:#0b2340; line-height:1.2 }
.mk b{ font-weight:700 }
.case.is-paused .mk, .case.is-paused .mk *{ animation-play-state:paused !important }

.mk-shadow{ box-shadow:0 4cqi 10cqi -3cqi rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1) }

/* Painel de gestão */
.mk-dash{
  display:grid; grid-template-columns:12% 1fr;
  width:86cqi; aspect-ratio:16/10.4;
  border-radius:2cqi; background:#f6f9fc; overflow:hidden;
  box-shadow:0 4cqi 10cqi -3cqi rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
  transform:perspective(1400px) rotateX(7deg) rotateY(-9deg) rotateZ(1.2deg) translateY(2%);
  transition:transform 1s var(--ease);
}
.case:hover .mk-dash{ transform:perspective(1400px) translateY(0) }
.mk-side{ display:flex; flex-direction:column; align-items:center; gap:1.6cqi; padding:2.4cqi 0; background:#0c3054 }
.mk-logo{ width:5.4cqi; margin-bottom:1.2cqi }
.mk-logo svg{ width:100%; height:auto }
.mk-side i{ width:5.6cqi; height:1.1cqi; border-radius:99px; background:rgba(159,216,245,.22) }
.mk-side i.is-on{ background:#4aa8de; box-shadow:0 0 1.2cqi rgba(74,168,222,.7) }
.mk-main{ display:flex; flex-direction:column; gap:1.8cqi; padding:2.4cqi 2.6cqi; min-width:0 }
.mk-top{ display:flex; align-items:center; gap:1.6cqi }
.mk-h{ font-size:2.1cqi; letter-spacing:-.01em; white-space:nowrap }
.mk-search{ flex:1; max-width:24cqi; height:2.8cqi; margin-left:auto; border-radius:99px; background:#e9f0f7 }
.mk-avatar{ width:3cqi; height:3cqi; border-radius:99px; background:linear-gradient(135deg, #9fd8f5, #1f6fae) }
.mk-kpis{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4cqi }
.mk-kpi{
  position:relative; display:flex; flex-direction:column; gap:1cqi;
  padding:1.5cqi 1.6cqi; border-radius:1.4cqi; background:#fff;
  box-shadow:0 .4cqi 1.4cqi rgba(11,35,64,.07);
}
.mk-kpi small{ font-size:1.35cqi; font-weight:600; color:#5a6f8a }
.mk-kpi b{ display:block; height:1.9cqi; width:62%; border-radius:.6cqi; background:linear-gradient(90deg, #0c3054, #1d649a); transform-origin:left }
.mk-kpi:nth-child(2) b{ width:48% }
.mk-kpi:nth-child(3) b{ width:72% }
.mk-kpi em{
  position:absolute; top:1.3cqi; right:1.4cqi; padding:.2cqi .8cqi; border-radius:99px;
  font-style:normal; font-weight:700; font-size:1.3cqi; color:#1a8f68; background:#e3f6ee;
}
.mk-charts{ display:grid; grid-template-columns:1.15fr 1fr; gap:1.4cqi; flex:1; min-height:0 }
.mk-bars, .mk-linebox{ position:relative; border-radius:1.4cqi; background:#fff; box-shadow:0 .4cqi 1.4cqi rgba(11,35,64,.07) }
.mk-bars{ display:flex; align-items:flex-end; gap:.8cqi; padding:1.6cqi 1.8cqi }
.mk-bars i{
  flex:1; height:calc(var(--h) * 100%);
  border-radius:.5cqi .5cqi .2cqi .2cqi;
  background:linear-gradient(180deg, #4aa8de, #1d649a);
  transform-origin:bottom;
}
.mk-bars i:nth-child(n+11){ background:linear-gradient(180deg, #9fd8f5, #4aa8de) }
.mk-linebox{ padding:1.6cqi }
.mk-line{ width:100%; height:100%; overflow:visible }
.mk-dot{
  position:absolute; right:1.6cqi; top:calc(1.6cqi + (100% - 3.2cqi) * .14);
  width:1.4cqi; height:1.4cqi; border-radius:99px; translate:50% -50%;
  background:#1d649a; box-shadow:0 0 0 .6cqi rgba(74,168,222,.25);
}
.mk-rows{ display:grid; gap:.9cqi }
.mk-row{ display:flex; align-items:center; gap:1.4cqi; padding:1cqi 1.6cqi; border-radius:1.1cqi; background:#fff }
.mk-row i{ height:1.1cqi; border-radius:99px; background:#dfe8f2 }
.mk-row i:first-child{ width:22% }
.mk-row i:nth-child(2){ width:38%; background:#edf2f8 }
.mk-row em{
  margin-left:auto; padding:.3cqi 1cqi; border-radius:99px;
  font-style:normal; font-weight:700; font-size:1.25cqi; color:#1d649a; background:#e6f0f9;
}
.mk-row em.ok{ color:#1a8f68; background:#e3f6ee }

.case.is-live .mk-bars i{
  animation:barUp 1s var(--ease-out) calc(var(--d) * 55ms) both,
            barLive 3.4s ease-in-out calc(1.3s + var(--d) * 160ms) infinite alternate;
}
.case.is-live .mk-line{ animation:wipe 1.8s var(--ease) .35s both }
.case.is-live .mk-dot{ animation:pop .5s var(--ease) 2s both, ping 2.2s ease-out 2.6s infinite }
.case.is-live .mk-kpi b{ animation:grow 1.2s var(--ease) .25s both }
.case.is-live .mk-row{ animation:rowIn .8s var(--ease) both }
.case.is-live .mk-row:nth-child(1){ animation-delay:.55s }
.case.is-live .mk-row:nth-child(2){ animation-delay:.7s }
.case.is-live .mk-row:nth-child(3){ animation-delay:.85s }

@keyframes barUp{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
@keyframes barLive{ from{ transform:scaleY(1) } to{ transform:scaleY(.8) } }
@keyframes wipe{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }
@keyframes pop{ from{ transform:scale(0) } to{ transform:scale(1) } }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(74,168,222,.55) } 100%{ box-shadow:0 0 0 2.6cqi rgba(74,168,222,0) } }
@keyframes grow{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes rowIn{ from{ opacity:0; transform:translateX(-4%) } to{ opacity:1; transform:none } }

/* Aplicativo */
.mk-phone{
  display:flex; flex-direction:column; gap:2.4cqi;
  width:38cqi; aspect-ratio:9/18.6;
  padding:7.6cqi 3.2cqi 3.2cqi;
  border-radius:6cqi; background:#f6f9fc; overflow:hidden;
  border:1.3cqi solid #0a1830;
  box-shadow:0 4cqi 10cqi -2cqi rgba(0,0,0,.65), 0 0 0 .35cqi rgba(159,216,245,.16);
  transform:rotate(-7deg) translateY(17%);
  transition:transform 1s var(--ease);
}
.case:hover .mk-phone{ transform:rotate(-3deg) translateY(11%) }
.mk-notch{ position:absolute; top:1.9cqi; left:50%; translate:-50% 0; width:13cqi; height:3.2cqi; border-radius:99px; background:#0a1830 }
.mk-app-head{ display:flex; align-items:center; justify-content:space-between }
.mk-app-head b{ font-size:3cqi }
.mk-cart{
  display:grid; place-items:center; width:5cqi; height:5cqi; border-radius:99px;
  background:#0c3054; color:#fff; font-size:2.2cqi; font-weight:700;
}
.mk-banner{
  display:flex; flex-direction:column; gap:.7cqi; padding:2.6cqi;
  border-radius:2.6cqi; color:#fff;
  background:linear-gradient(135deg, #1d649a, #4aa8de);
}
.mk-banner b{ font-size:2.8cqi }
.mk-banner small{ font-size:1.9cqi; opacity:.88 }
.mk-items{ display:flex; flex-direction:column; gap:1.6cqi }
.mk-item{
  display:flex; align-items:center; gap:2cqi; padding:1.6cqi;
  border-radius:2cqi; background:#fff; box-shadow:0 .5cqi 1.6cqi rgba(11,35,64,.08);
}
.mk-thumb{ width:6.4cqi; height:6.4cqi; flex-shrink:0; border-radius:1.4cqi }
.mk-thumb.t1{ background:linear-gradient(135deg, #9fd8f5, #4aa8de) }
.mk-thumb.t2{ background:linear-gradient(135deg, #ffd58a, #f0a95b) }
.mk-thumb.t3{ background:linear-gradient(135deg, #86e1c4, #2fb488) }
.mk-lines{ flex:1; display:flex; flex-direction:column; gap:1cqi }
.mk-lines i{ height:1.3cqi; border-radius:99px; background:#dfe8f2 }
.mk-lines i:last-child{ width:55%; background:#edf2f8 }
.mk-item em{
  display:grid; place-items:center; width:4.4cqi; height:4.4cqi; flex-shrink:0; border-radius:99px;
  font-style:normal; font-weight:700; font-size:2.6cqi; color:#1d649a; background:#e6f0f9;
}
.mk-cta{
  margin-top:auto; padding:2.4cqi; border-radius:99px; text-align:center;
  background:#0c3054; color:#fff; font-size:2.4cqi; font-weight:700;
}
.mk-toast{
  position:absolute; top:6.8cqi; left:50%; translate:-50% 0;
  display:flex; align-items:center; gap:1.2cqi;
  padding:1.6cqi 2.6cqi; border-radius:99px;
  background:#0b2340; color:#fff; font-size:2cqi; font-weight:600; white-space:nowrap;
  box-shadow:0 2cqi 4cqi -1cqi rgba(0,0,0,.4);
  opacity:0; transform:translateY(-130%);
}
.mk-toast svg{ width:2.6cqi; height:2.6cqi; color:#86e1c4 }

.case.is-live .mk-item{ animation:rowIn .7s var(--ease) both }
.case.is-live .mk-item:nth-child(1){ animation-delay:.2s }
.case.is-live .mk-item:nth-child(2){ animation-delay:.35s }
.case.is-live .mk-item:nth-child(3){ animation-delay:.5s }
.case.is-live .mk-item em{ animation:tap 6s ease-in-out infinite }
.case.is-live .mk-item:nth-child(1) em{ animation-delay:1s }
.case.is-live .mk-item:nth-child(2) em{ animation-delay:3s }
.case.is-live .mk-item:nth-child(3) em{ animation-delay:5s }
.case.is-live .mk-toast{ animation:toast 6s var(--ease) 1.5s infinite }
.case.is-live .mk-cart{ animation:bump 6s var(--ease) 1.5s infinite }
.case.is-live .mk-cta{ animation:ctaPulse 6s ease-in-out 1.2s infinite }

@keyframes tap{
  0%, 12%, 100%{ transform:scale(1); background:#e6f0f9; color:#1d649a }
  4%{ transform:scale(.82); background:#1d649a; color:#fff }
  8%{ transform:scale(1.1); background:#1d649a; color:#fff }
}
@keyframes toast{
  0%{ opacity:0; transform:translateY(-130%) }
  7%, 40%{ opacity:1; transform:none }
  48%, 100%{ opacity:0; transform:translateY(-130%) }
}
@keyframes bump{ 0%, 6%, 100%{ transform:scale(1) } 3%{ transform:scale(1.32) } }
@keyframes ctaPulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(74,168,222,0) }
  2%{ box-shadow:0 0 0 0 rgba(74,168,222,.6) }
  12%{ box-shadow:0 0 0 2.4cqi rgba(74,168,222,0) }
}

/* Automação (fluxo) */
.mk-flow{ width:92cqi }
.mk-flow > svg{ width:100%; height:auto; overflow:visible }
.fl-path{ fill:none; stroke:url(#flowLine); stroke-width:2; stroke-dasharray:4 5; opacity:.9 }
.fl-pulse{ fill:#c8ecfb; filter:drop-shadow(0 0 4px rgba(159,216,245,.95)) }
.fl-node rect{ fill:#f6f9fc; stroke:rgba(159,216,245,.65); stroke-width:1 }
.fl-core rect{ fill:#0c3054; stroke:#4aa8de; stroke-width:1.4 }
.fl-ico{ fill:none; stroke:#1d649a; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.fl-ico-dot{ fill:#1d649a }
.fl-node text{ font-family:var(--sans); font-size:9.5px; font-weight:600; fill:#cfe6f5; text-anchor:middle }
.case.is-live .fl-path{ animation:dash 1.1s linear infinite }
.case.is-live .fl-core rect{ animation:corePulse 2.4s ease-in-out infinite }
.case.is-live .fl-node{ animation:nodeIn .8s var(--ease) both }
.case.is-live .fl-node:nth-of-type(2){ animation-delay:.15s }
.case.is-live .fl-node:nth-of-type(3){ animation-delay:.3s }
.case.is-live .fl-node:nth-of-type(4){ animation-delay:.45s }
@keyframes dash{ to{ stroke-dashoffset:-18 } }
@keyframes corePulse{
  0%, 100%{ stroke:#4aa8de; filter:none }
  50%{ stroke:#9fd8f5; filter:drop-shadow(0 0 6px rgba(74,168,222,.85)) }
}
@keyframes nodeIn{ from{ opacity:0 } to{ opacity:1 } }

/* Site (navegador) */
.mk-browser{
  width:84cqi; border-radius:2cqi; background:#fff; overflow:hidden;
  box-shadow:0 4cqi 10cqi -3cqi rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
  transform:perspective(1200px) rotateY(-10deg) rotateX(5deg) translateY(4%);
  transition:transform 1s var(--ease);
}
.case:hover .mk-browser{ transform:perspective(1200px) translateY(0) }
.mk-bbar{ display:flex; align-items:center; gap:1cqi; padding:1.6cqi 2cqi; background:#eef3f8; border-bottom:1px solid #dde6f0 }
.mk-bbar i{ width:1.5cqi; height:1.5cqi; border-radius:99px; background:#c6d4e3 }
.mk-url{ margin-left:2cqi; padding:.7cqi 2.4cqi; border-radius:99px; background:#fff; font-family:var(--mono); font-size:1.7cqi; color:#5a6f8a }
.mk-page{ display:grid; grid-template-columns:1.05fr .95fr; gap:3cqi 2.6cqi; padding:4cqi 4cqi 3.4cqi }
.mk-hero{ display:flex; flex-direction:column; justify-content:center; gap:1.6cqi }
.mk-hl{ display:flex; flex-direction:column; gap:1.2cqi }
.mk-hl i{ height:3cqi; border-radius:.8cqi; background:#0c3054; transform-origin:left }
.mk-hl i:last-child{ width:72%; background:linear-gradient(90deg, #1d649a, #4aa8de) }
.mk-sub{ width:85%; height:1.4cqi; border-radius:99px; background:#dfe8f2 }
.mk-btn{
  align-self:flex-start; margin-top:1cqi; padding:1.4cqi 2.8cqi; border-radius:99px;
  background:#0c3054; color:#fff; font-size:1.8cqi; font-weight:700;
}
.mk-growth{ padding:1.6cqi; border-radius:1.6cqi; background:linear-gradient(180deg, #f2f7fc, #e8f1fa) }
.mk-growth svg{ width:100%; height:auto; overflow:visible }
.gr-area{ fill:url(#grow); opacity:.16 }
.gr-head{ transform-box:fill-box; transform-origin:100% 0 }
.mk-cards3{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, 1fr); gap:2cqi }
.mk-cards3 i{ height:9cqi; border-radius:1.6cqi; background:#f2f7fc; border:1px solid #e3ecf5 }

.case.is-live .mk-growth svg{ animation:wipe 1.6s var(--ease) .4s both }
.case.is-live .gr-head{ animation:pop .5s var(--ease) 1.9s both }
.case.is-live .mk-hl i{ animation:grow 1s var(--ease) both }
.case.is-live .mk-hl i:last-child{ animation-delay:.15s }
.case.is-live .mk-btn{ animation:ctaPulse 4s ease-in-out 1.6s infinite }
.case.is-live .mk-cards3 i{ animation:rowIn .8s var(--ease) both }
.case.is-live .mk-cards3 i:nth-child(2){ animation-delay:.12s }
.case.is-live .mk-cards3 i:nth-child(3){ animation-delay:.24s }

/* Assistente com IA (chat) */
.mk-chat{
  display:flex; flex-direction:column; width:72cqi;
  border-radius:3cqi; background:#f6f9fc; overflow:hidden;
  box-shadow:0 4cqi 10cqi -3cqi rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
  transform:rotate(2.5deg) translateY(3%);
  transition:transform 1s var(--ease);
}
.case:hover .mk-chat{ transform:none }
.mk-chat-head{ display:flex; align-items:center; gap:2cqi; padding:2.4cqi 3cqi; background:#0c3054; color:#fff }
.mk-bot{
  display:grid; place-items:center; width:6.4cqi; height:6.4cqi; flex-shrink:0; border-radius:99px;
  background:#081c36; border:1px solid rgba(159,216,245,.3);
}
.mk-bot svg{ width:3.8cqi; height:auto }
.mk-chat-head b{ display:block; font-size:2.3cqi }
.mk-chat-head small{ display:flex; align-items:center; gap:.8cqi; margin-top:.5cqi; font-size:1.7cqi; color:#9fd8f5 }
.mk-chat-head small::before{ content:''; width:1.1cqi; height:1.1cqi; border-radius:99px; background:#3fdc8f }
.mk-msgs{ display:flex; flex-direction:column; gap:1.6cqi; padding:3cqi }
.msg{
  position:relative; max-width:80%;
  padding:1.6cqi 2.4cqi; border-radius:2.4cqi;
  font-size:2.05cqi; font-weight:500; line-height:1.45;
}
.msg.me{ align-self:flex-end; color:#fff; background:linear-gradient(135deg, #2b7fbf, #1d649a); border-bottom-right-radius:.6cqi }
.msg.bot{ align-self:flex-start; color:#0b2340; background:#fff; border:1px solid #e1e9f2; border-bottom-left-radius:.6cqi }
.msg .t{ display:block }
.msg .dots{ position:absolute; left:2.4cqi; top:50%; translate:0 -50%; display:flex; gap:.8cqi; opacity:0 }
.msg .dots i{ width:1.2cqi; height:1.2cqi; border-radius:99px; background:#9fb3c8 }

.case.is-live .msg{ animation-duration:12s; animation-timing-function:var(--ease); animation-iteration-count:infinite; animation-fill-mode:both }
.case.is-live .m1{ animation-name:c1 }
.case.is-live .m2{ animation-name:c2 }
.case.is-live .m3{ animation-name:c3 }
.case.is-live .m4{ animation-name:c4 }
.case.is-live .m2 .t{ animation:t2 12s infinite both }
.case.is-live .m2 .dots{ animation:d2 12s infinite both }
.case.is-live .m4 .t{ animation:t4 12s infinite both }
.case.is-live .m4 .dots{ animation:d4 12s infinite both }
.case.is-live .dots i{ animation:typing 1s ease-in-out infinite }
.case.is-live .dots i:nth-child(2){ animation-delay:.15s }
.case.is-live .dots i:nth-child(3){ animation-delay:.3s }

@keyframes c1{ 0%, 3%{ opacity:0; transform:translateY(1.6cqi) } 7%, 92%{ opacity:1; transform:none } 97%, 100%{ opacity:0 } }
@keyframes c2{ 0%, 13%{ opacity:0; transform:translateY(1.6cqi) } 17%, 92%{ opacity:1; transform:none } 97%, 100%{ opacity:0 } }
@keyframes c3{ 0%, 38%{ opacity:0; transform:translateY(1.6cqi) } 42%, 92%{ opacity:1; transform:none } 97%, 100%{ opacity:0 } }
@keyframes c4{ 0%, 50%{ opacity:0; transform:translateY(1.6cqi) } 54%, 92%{ opacity:1; transform:none } 97%, 100%{ opacity:0 } }
@keyframes t2{ 0%, 26%{ opacity:0 } 29%, 100%{ opacity:1 } }
@keyframes d2{ 0%, 15%{ opacity:0 } 17%, 26%{ opacity:1 } 28%, 100%{ opacity:0 } }
@keyframes t4{ 0%, 62%{ opacity:0 } 65%, 100%{ opacity:1 } }
@keyframes d4{ 0%, 52%{ opacity:0 } 54%, 62%{ opacity:1 } 64%, 100%{ opacity:0 } }
@keyframes typing{ 0%, 100%{ transform:translateY(0); opacity:.45 } 50%{ transform:translateY(-.7cqi); opacity:1 } }

/* Fecho da grade de projetos */
.cases-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px 32px; margin-top:clamp(16px, 2.2vw, 22px);
  padding:clamp(22px, 3vw, 32px);
  border:1px solid var(--line); border-radius:22px; background:var(--bg-2);
}
.cases-foot-copy{ flex:1 1 34ch; max-width:60ch }
.cases-foot-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.3rem, 2.3vw, 1.6rem); line-height:1.2; letter-spacing:-.015em;
}
.cases-foot-text{ margin-top:8px; color:var(--ink-2); font-size:15px; line-height:1.65 }
.cases-foot-cta{
  display:inline-flex; align-items:center; gap:10px; flex-shrink:0;
  padding:14px 25px; border-radius:99px;
  background:var(--ink); color:var(--bg);
  font-size:15px; font-weight:600; white-space:nowrap;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}
.cases-foot-cta svg{ width:15px; height:15px; transition:transform .45s var(--ease) }
.cases-foot-cta:hover{ transform:translateY(-2px); background:var(--accent); box-shadow:0 14px 34px -14px var(--accent-glow) }
.cases-foot-cta:hover svg{ transform:translate(2px,-2px) }

/* ══════════════════════════════════════════════════════════
   04 · PROCESSO
   ══════════════════════════════════════════════════════════ */
.steps{ --rail-x:clamp(28px, 4vw, 48px); position:relative; max-width:860px; padding-left:var(--rail-x) }
.steps-rail{ position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--line) }
.steps-rail span{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, var(--accent-2), var(--accent), var(--accent-3));
  transform:scaleY(0); transform-origin:top;
}
.step{ position:relative; padding-bottom:clamp(34px, 5vw, 54px) }
.step:last-child{ padding-bottom:0 }
.step::before{
  content:''; position:absolute; left:calc(var(--rail-x) * -1); top:10px;
  width:9px; height:9px; margin-left:-4px; border-radius:99px;
  background:var(--bg-3); border:1px solid var(--line);
  transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.step.is-on::before{
  background:var(--accent); border-color:var(--accent); transform:scale(1.2);
  box-shadow:0 0 0 5px rgba(29,100,154,.13), 0 0 14px var(--accent-glow);
}
.step-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap }
.step-num{ color:var(--accent) }
.step-name{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.4rem, 2.7vw, 1.95rem); line-height:1.2; letter-spacing:-.015em;
  transition:color .5s var(--ease);
}
.js .step:not(.is-on) .step-name{ color:var(--ink-3) }
.step-text{ margin-top:10px; max-width:60ch; color:var(--ink-2); font-size:15.5px; line-height:1.72 }

/* ══════════════════════════════════════════════════════════
   05 · DIFERENCIAIS
   ══════════════════════════════════════════════════════════ */
.proof{ display:grid; gap:clamp(16px, 2.2vw, 22px) }
@media (min-width:760px){ .proof{ grid-template-columns:repeat(3, 1fr) } }
.proof-item{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:22px;
  padding:clamp(24px, 3vw, 32px); background:var(--bg-2);
  transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.proof-item:hover{ border-color:var(--accent-line); transform:translateY(-4px); box-shadow:0 30px 60px -34px rgba(11,35,64,.4) }
.proof-big{
  display:flex; align-items:center; height:1.15em;
  font-family:var(--display); font-weight:600; font-style:italic;
  font-size:clamp(2.4rem, 4.6vw, 3.2rem); line-height:1; letter-spacing:-.02em;
  padding-right:.08em; width:fit-content;
  background:linear-gradient(94deg, var(--accent-2), var(--accent) 50%, var(--accent-3));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.proof-arrow{ color:var(--accent); -webkit-text-fill-color:currentColor; background:none }
.proof-arrow svg{ width:1.05em; height:1.05em; transition:transform .6s var(--ease) }
.proof-item:hover .proof-arrow svg{ transform:translate(5px,-5px) }
.proof-text{ position:relative; z-index:1; margin-top:16px; color:var(--ink-2); font-size:15.5px; line-height:1.7 }

/* ══════════════════════════════════════════════════════════
   06 · TECNOLOGIAS
   ══════════════════════════════════════════════════════════ */
#tecnologias .wrap{ margin-bottom:0 }
.stack{
  display:grid; gap:12px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.stack-row{ overflow:hidden; padding:4px 0 }
.stack-track{ display:flex; width:max-content; animation:marquee 48s linear infinite }
.stack-row--rev .stack-track{ animation-direction:reverse; animation-duration:54s }
.stack:hover .stack-track{ animation-play-state:paused }
.stack-group{ display:flex; gap:10px; padding-right:10px }

.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 18px 11px 13px; border-radius:99px;
  border:1px solid var(--line); background:rgba(8,20,40,.6);
  transition:border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}
.chip svg{ width:20px; height:20px; flex-shrink:0; color:var(--ink-2); transition:color .45s var(--ease), filter .45s var(--ease) }
.chip span{ font-size:14px; font-weight:500; color:var(--ink-2); white-space:nowrap; transition:color .45s var(--ease) }
.chip:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--brand) 45%, transparent);
  background:color-mix(in srgb, var(--brand) 9%, transparent);
}
.chip:hover svg{ color:var(--brand); filter:drop-shadow(0 0 8px color-mix(in srgb, var(--brand) 55%, transparent)) }
.chip:hover span{ color:var(--ink) }

/* ══════════════════════════════════════════════════════════
   07 · DÚVIDAS
   ══════════════════════════════════════════════════════════ */
.faq-grid{ display:grid; gap:clamp(20px, 4vw, 72px) }
@media (min-width:960px){
  .faq-grid{ grid-template-columns:.9fr 1.1fr; align-items:start }
  .faq-head{ position:sticky; top:120px }
}
.faq{ border-top:1px solid var(--line) }
.qa{ border-bottom:1px solid var(--line) }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px; cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.1rem, 1.9vw, 1.35rem); line-height:1.35;
  transition:color .4s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary::marker{ content:'' }
.qa summary svg{
  width:30px; height:30px; padding:6px; flex-shrink:0; border-radius:99px;
  color:var(--accent-2); border:1px solid var(--line);
  transition:transform .5s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.qa summary:hover{ color:var(--accent-2) }
.qa[open] summary svg{ transform:rotate(45deg); background:rgba(74,168,222,.12); border-color:var(--accent-line) }
.qa-body{ overflow:hidden }
.qa-body p{ max-width:62ch; padding:0 52px 24px 4px; color:var(--ink-2); font-size:15.5px; line-height:1.74 }
.qa-body b{ color:var(--ink); font-weight:600 }

/* ══════════════════════════════════════════════════════════
   CONTATO
   ══════════════════════════════════════════════════════════ */
.cta{ text-align:center; overflow:hidden; padding-bottom:clamp(100px, 14vh, 170px) }
.cta::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 70% at 50% 100%, rgba(74,168,222,.15), transparent 70%);
}
.cta .wrap{ position:relative; z-index:1 }

/* rastro azul + fragmentos — a mesma linguagem da arte da marca */
.cta-flow{ position:absolute; inset:0; z-index:0; pointer-events:none }
.cta-flow svg{ position:absolute; inset:0; width:100%; height:100% }
.cf-rails path{ fill:none; stroke:url(#flowB); stroke-width:1; opacity:.55 }
.cf{ fill:none; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(74,168,222,.6)) }
.cf-1{ stroke:url(#flowA); stroke-width:3;   stroke-dasharray:260 1500; animation:flowRun 6.5s linear infinite }
.cf-2{ stroke:url(#flowB); stroke-width:1.5; stroke-dasharray:180 1400; animation:flowRun 8s linear 1.2s infinite }
.cf-3{ stroke:url(#flowB); stroke-width:1;   stroke-dasharray:120 1300; animation:flowRun 7.2s linear 2.6s infinite }
.cf-4{ stroke:url(#flowA); stroke-width:2;   stroke-dasharray:200 1600; animation:flowRun 9s linear .5s infinite }
@keyframes flowRun{ from{ stroke-dashoffset:1700 } to{ stroke-dashoffset:0 } }

.bits i{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--s); height:var(--s); border-radius:2px;
  background:linear-gradient(135deg, rgba(191,232,250,.95), rgba(74,168,222,.45));
  box-shadow:0 0 14px rgba(74,168,222,.55);
  opacity:.35;   /* parado (movimento reduzido) os fragmentos continuam lá */
  animation:bitFloat var(--t) ease-in-out var(--d) infinite;
}
@keyframes bitFloat{
  0%  { opacity:0; transform:translate(0,0) rotate(0) }
  15% { opacity:.9 }
  70% { opacity:.6 }
  100%{ opacity:0; transform:translate(70px,-110px) rotate(80deg) }
}

.cta-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.4rem, 6.6vw, 5rem); line-height:1.06; letter-spacing:-.022em;
  max-width:16ch; margin:0 auto;
}
.cta-sub{ max-width:50ch; margin:22px auto 0; color:var(--ink-2); font-size:16.5px; line-height:1.7 }

/* Os três cartões de vidro da arte da L2soft */
.pillars{ display:grid; gap:16px; max-width:980px; margin:clamp(40px, 5vw, 58px) auto 0 }
@media (min-width:760px){ .pillars{ grid-template-columns:repeat(3, 1fr) } }
.pillar{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:30px 22px 28px; border-radius:24px; text-align:center;
  color:#fff;
  background:linear-gradient(160deg, rgba(74,168,222,.34), rgba(31,111,174,.2) 45%, rgba(12,48,84,.4));
  border:1px solid rgba(159,216,245,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 34px rgba(159,216,245,.07), 0 22px 50px -26px rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.pillar::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.13), transparent 42%);
}
.pillar:hover{
  transform:translateY(-6px);
  border-color:rgba(159,216,245,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 0 0 1px rgba(159,216,245,.14), 0 34px 64px -26px rgba(74,168,222,.55);
}
.pillar-icon{
  display:grid; place-items:center; width:66px; height:66px; margin-bottom:6px;
  border-radius:18px; background:rgba(159,216,245,.1); border:1px solid rgba(159,216,245,.24);
}
.pillar-icon svg{ width:34px; height:34px; color:#e2f4fd; transition:transform .6s var(--ease) }
.pillar:hover .pillar-icon svg{ transform:scale(1.12) rotate(-6deg) }
.pillar-name{ position:relative; font-weight:700; font-size:17px; letter-spacing:-.005em }
.pillar-desc{ position:relative; max-width:26ch; font-size:14px; line-height:1.5; color:rgba(226,244,253,.76) }

.contact-line{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px; margin-top:clamp(34px, 4vw, 46px) }
.contact-line a{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:500; color:var(--ink-2); transition:color .3s var(--ease) }
.contact-line svg{ width:17px; height:17px; color:var(--accent) }
.contact-line a:hover{ color:var(--ink) }

/* ══════════════════════════════════════════════════════════
   RODAPÉ
   ══════════════════════════════════════════════════════════ */
.footer{ border-top:1px solid var(--line); padding:clamp(56px, 7vw, 84px) var(--pad) 30px }
.footer-grid{ display:grid; gap:clamp(32px, 5vw, 48px) }
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr } }
.footer-slogan{
  margin-top:24px; max-width:20ch;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.35rem, 2.4vw, 1.8rem); line-height:1.25; letter-spacing:-.012em;
}
.footer-tag{ margin-top:14px; max-width:38ch; color:var(--ink-3); font-size:14px; line-height:1.6 }
.brand-note{
  display:flex; align-items:baseline; gap:10px;
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line); max-width:38ch;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; line-height:1.7; color:var(--ink-3);
}
.brand-note b{ flex-shrink:0; font-weight:500; color:var(--accent) }
.footer-col h2{ margin-bottom:16px; font-weight:500 }
.footer-col a{ display:block; width:fit-content; padding:5px 0; color:var(--ink-2); font-size:14px; transition:color .35s var(--ease) }
.footer-col a:hover{ color:var(--accent-2) }
.footer-bot{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  margin-top:clamp(40px, 6vw, 64px); padding-top:24px; border-top:1px solid var(--line);
}

/* ══════════════════════════════════════════════════════════
   WHATSAPP FLUTUANTE
   ══════════════════════════════════════════════════════════ */
.wa-float{
  position:fixed; right:clamp(16px, 2.4vw, 28px); bottom:clamp(16px, 2.4vw, 28px); z-index:50;
  display:grid; place-items:center; width:58px; height:58px; border-radius:99px;
  color:#fff; background:linear-gradient(145deg, #34d980, #149c55);
  box-shadow:0 12px 30px -8px rgba(20,156,85,.6), inset 0 1px 0 rgba(255,255,255,.3);
  opacity:0; transform:translateY(20px) scale(.8); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.wa-float.is-on{ opacity:1; transform:none; pointer-events:auto }
.wa-float svg{ width:28px; height:28px }
.wa-float::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  border:2px solid rgba(52,217,128,.6);
  animation:waPulse 2.6s var(--ease-out) infinite;
}
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.8 } 100%{ transform:scale(1.6); opacity:0 } }
.wa-float-tip{
  position:absolute; right:calc(100% + 12px); top:50%; translate:0 -50%;
  padding:8px 14px; border-radius:99px; white-space:nowrap;
  font-size:13px; font-weight:600; color:var(--ink);
  background:var(--bg-3); border:1px solid var(--line);
  opacity:0; transform:translateX(8px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.wa-float:hover .wa-float-tip, .wa-float:focus-visible .wa-float-tip{ opacity:1; transform:none }
@media (hover:none){ .wa-float-tip{ display:none } }

/* ══════════════════════════════════════════════════════════
   AGENDAR CONSULTA (modal)
   ══════════════════════════════════════════════════════════ */
.modal{
  width:min(640px, calc(100% - 24px)); max-width:none;
  max-height:calc(100dvh - 24px);
  margin:auto; padding:0; border:0; overflow:visible;
  background:transparent; color:var(--ink);
}
.modal::backdrop{
  background:rgba(2,7,15,.74);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .4s var(--ease);
}
.modal.is-open::backdrop{ opacity:1 }
.modal-open{ overflow:hidden }

.modal-card{
  position:relative; max-height:calc(100dvh - 24px); overflow:auto;
  padding:clamp(24px, 4vw, 40px);
  border-radius:26px; border:1px solid rgba(159,216,245,.15);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(74,168,222,.14), transparent 60%),
    linear-gradient(180deg, #0d1c35, #081428);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);
  opacity:0; transform:translateY(24px) scale(.97);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.modal.is-open .modal-card{ opacity:1; transform:none }

.modal-close{
  position:absolute; top:16px; right:16px;
  display:grid; place-items:center; width:40px; height:40px; border-radius:99px;
  border:1px solid var(--line); color:var(--ink-2);
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .45s var(--ease);
}
.modal-close svg{ width:18px; height:18px }
.modal-close:hover{ color:var(--ink); border-color:var(--accent-line); transform:rotate(90deg) }

.modal-tag{ display:inline-flex; align-items:center; gap:10px; color:var(--ink-2) }
.modal-title{
  margin-top:14px; padding-right:40px;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.9rem, 4vw, 2.6rem); line-height:1.1; letter-spacing:-.02em;
}
.modal-sub{ max-width:46ch; margin-top:10px; color:var(--ink-2); font-size:15px; line-height:1.6 }

.field-row{ display:grid; gap:0 14px }
@media (min-width:560px){ .field-row{ grid-template-columns:1fr 1fr } }
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; margin-top:18px; border:0 }
.field label, .field legend{ font-size:13px; font-weight:600; color:var(--ink-2) }
.field legend{ margin-bottom:9px; padding:0 }
.field input, .field textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  font:inherit; font-size:15px; color:var(--ink);
  background:rgba(4,11,22,.6); border:1px solid var(--line);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  resize:vertical;
}
.field textarea{ min-height:92px }
.field input::placeholder, .field textarea::placeholder{ color:#55687f }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(74,168,222,.15) }
.field-err{ display:none; font-size:12.5px; color:#ff9d9d }
.field.is-invalid input, .field.is-invalid textarea{ border-color:#ff8a8a }
.field.is-invalid .field-err{ display:block }

.opts{ display:flex; flex-wrap:wrap; gap:8px }
.opts label{ position:relative; cursor:pointer }
.opts input{ position:absolute; opacity:0; pointer-events:none }
.opts span{
  display:inline-block; padding:9px 15px; border-radius:99px;
  border:1px solid var(--line); font-size:13.5px; font-weight:500; color:var(--ink-2);
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.opts label:hover span{ border-color:var(--accent-line); color:var(--ink) }
.opts input:checked + span{ border-color:var(--accent); background:rgba(74,168,222,.15); color:var(--ink) }
.opts input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px }

.modal-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px }
.modal-actions .btn{ flex:1 1 210px; justify-content:center }
.modal-actions .btn svg{ width:17px; height:17px }
.modal-actions .btn:hover svg{ transform:none }
.modal-note{ margin-top:16px; font-size:10.5px; letter-spacing:.06em; text-transform:none; line-height:1.6 }
.modal-note.is-ok{ color:#86e1c4 }

/* ══════════════════════════════════════════════════════════
   BRILHO QUE SEGUE O CURSOR
   ══════════════════════════════════════════════════════════ */
.glow{ --mx:50%; --my:50% }
.glow::after{
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%);
  opacity:0; transition:opacity .45s var(--ease);
}
.glow:hover::after{ opacity:1 }
.pillar.glow::after{ background:radial-gradient(320px circle at var(--mx) var(--my), rgba(191,232,250,.18), transparent 62%) }

/* ══════════════════════════════════════════════════════════
   ESTADOS INICIAIS DAS ANIMAÇÕES
   Escondido só quando o JS assume (.js no <html>). Sem JS, ou
   com a CDN fora do ar, tudo nasce visível.
   ══════════════════════════════════════════════════════════ */
.js .title .line > span{ transform:translateY(115%) }
.js .js-fade{ opacity:0; transform:translateY(16px) }
.js .hero-foot{ opacity:0 }
.js [data-reveal]{ opacity:0; transform:translateY(22px) }

/* Trava de segurança: se os scripts da CDN não chegarem em ~6s,
   o conteúdo aparece mesmo assim. O main.js remove .js-pending. */
@keyframes failsafe{ to{ opacity:1; transform:none } }
.js-pending .title .line > span,
.js-pending .js-fade,
.js-pending .hero-foot,
.js-pending [data-reveal]{ animation:failsafe .9s var(--ease) 6.5s forwards }

/* ══════════════════════════════════════════════════════════
   MOVIMENTO REDUZIDO
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .js .title .line > span, .js .js-fade, .js .hero-foot, .js [data-reveal]{ opacity:1; transform:none }
  .steps-rail span{ transform:scaleY(1) }
  .ticker-track, .stack-track{ animation:none }
  .stack-track{ width:auto; flex-wrap:wrap }
  .stack-group{ flex-wrap:wrap; justify-content:center }
  .stack-group[aria-hidden="true"]{ display:none }
  .stack{ -webkit-mask-image:none; mask-image:none; padding:0 var(--pad) }
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}