/* — Fontes oficiais Muma — */
@font-face{
  font-family:'WS Paradose';
  src:url('../assets/fonts/WSParadose.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
/* TWK Lausanne — vários pesos */
@font-face{font-family:'TWK Lausanne';src:url('../assets/fonts/TWKLausanne-50.ttf') format('truetype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'TWK Lausanne';src:url('../assets/fonts/TWKLausanne-100.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'TWK Lausanne';src:url('../assets/fonts/TWKLausanne-200.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'TWK Lausanne';src:url('../assets/fonts/TWKLausanne-300.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'TWK Lausanne';src:url('../assets/fonts/TWKLausanne-450.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'TWK Lausanne';src:url('../assets/fonts/TWKLausanne-750.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

/* — TOKENS DA MARCA — */
:root{
  --navy:   #0c0933;
  --pink:   #ff80e1;
  --purple: #3215ad;
  --beige:  #edecea;
  --green:  #9cff97;
  --lavender:#a194ff;
  --ink:    #0c0933;
  --paper:  #edecea;
  --hair:   rgba(12,9,51,.18);
  --hair-l: rgba(237,236,234,.22);

  --serif: 'WS Paradose', 'Times New Roman', Times, serif;
  --sans:  'TWK Lausanne', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

/* — Scrollbar Muma — fina, navy + pink magnético — */
::-webkit-scrollbar{ width:8px; height:8px; background-color: var(--navy); }
::-webkit-scrollbar-track{ background-color: var(--navy); }
::-webkit-scrollbar-thumb{
  background-color: var(--pink);
  border-radius: 999px;
  border: 2px solid var(--navy);
  transition: background-color .25s;
}
::-webkit-scrollbar-thumb:hover{ background-color: var(--green); }
::-webkit-scrollbar-corner{ background-color: var(--navy); }
@supports (scrollbar-color: auto){
  html{ scrollbar-width: thin; scrollbar-color: var(--pink) var(--navy); }
}

/* — Cursor customizado: ponto magnético com inversão e wrapper gooey — */


#cursor {
  position: fixed; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--green);
  pointer-events: none;
  z-index: 99999;
  transform: translate3d(-100px,-100px,0) translate(-50%,-50%);
  display: flex; align-items: center; justify-content: center;
  transition: width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1), opacity .25s, border-radius .28s, background .3s;
  overflow: hidden;
  mix-blend-mode: difference;
}
#cursor.hover{ width:46px;height:46px; }
#cursor.text{ width:3px;height:26px;border-radius:1px; }
#cursor.click{ width:8px;height:8px;opacity:.7 }

/* — Estados mutantes (saem do difference pra mostrar cor sólida) — */
#cursor.case-lens{
  width:64px;height:64px;
  background:var(--pink);
  mix-blend-mode: normal !important;
}
#cursor.detail-lens{
  width:50px;height:50px;
  background:var(--green);
  mix-blend-mode: normal !important;
}
/* Magnético: dot some, halo abraça o botão */
#cursor.magnetic{
  width:0;height:0;opacity:0;
  transition: width .35s cubic-bezier(.25,1,.5,1), height .35s cubic-bezier(.25,1,.5,1), opacity .25s;
}

#cursor-halo {
  position: fixed; left: 0; top: 0; width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid var(--green);
  background: rgba(156, 255, 151, 0.16); /* soft background for gooey blend */
  pointer-events: none;
  z-index: 99999;
  transform: translate3d(-100px,-100px,0) translate(-50%,-50%);
  transition: width 0.2s cubic-bezier(0.25, 1, 0.3, 1), height 0.2s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.2s, border-color 0.2s, background 0.2s, border-radius 0.2s cubic-bezier(0.25, 1, 0.3, 1);
  display: flex; align-items: center; justify-content: center;
  mix-blend-mode: difference;
}
#cursor-halo.hover{ width:96px;height:96px;border-color:var(--pink); background: rgba(255, 128, 225, 0.16); }
#cursor-halo.hidden, #cursor.hidden{ opacity:0 }

/* Core element inside #cursor for core pulse */
.cursor-core {
  position: relative;
  width: 100%; height: 100%;
  background: inherit;
  border-radius: inherit;
  transition: background 0.3s;
}



/* Orbit rings inside halo for idle atom */
#cursor-halo .ring-orbit {
  position: absolute;
  border: 1.5px solid var(--green);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#cursor-halo.idle-atom {
  border-color: transparent !important;
  background: transparent !important;
}
#cursor-halo.idle-atom .ring-orbit {
  opacity: 0.85 !important;
  border-color: var(--green) !important;
  width: 26px !important;
  height: 72px !important;
  left: calc(50% - 13px) !important;
  top: calc(50% - 36px) !important;
  inset: auto !important;
  background: transparent !important;
  transition: none !important;
  transform-origin: center center !important;
}
#cursor-halo.idle-atom .ring-1 {
  animation: rotateRing1 12s linear infinite !important;
}
#cursor-halo.idle-atom .ring-2 {
  animation: rotateRing2 12s linear infinite !important;
}
#cursor-halo.idle-atom .ring-3 {
  animation: rotateRing3 12s linear infinite !important;
}

@keyframes rotateRing1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotateRing2 {
  0% { transform: rotate(60deg); }
  100% { transform: rotate(420deg); }
}
@keyframes rotateRing3 {
  0% { transform: rotate(120deg); }
  100% { transform: rotate(480deg); }
}

.cursor-text{
  font-family: var(--sans);
  font-size: 11px;font-weight: 700;letter-spacing: .14em;
  color: var(--navy);
  text-transform: uppercase;
  white-space:nowrap;
  line-height: 1;
  opacity:0;
  animation: cursorFadeIn .22s ease forwards;
  display:inline-flex;align-items:center;gap:6px;
  pointer-events: none;
}
.cursor-text.plus{ font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: 0; line-height: 0.6; }
.cursor-text .arr{ font-size: 13px; transform: translateY(-1px); }
@keyframes cursorFadeIn{ to { opacity: 1; } }

@media (pointer:coarse){
  #cursor, #cursor-halo, #cursor-fx-container { display: none !important }
  html, body, *, *::before, *::after { cursor: auto !important }
  input, textarea { cursor: text !important }
  a, button, [role=button], .mod, .case { cursor: pointer !important }
}
html{scroll-behavior:smooth}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--pink);color:var(--navy)}

.wrap{max-width:1480px;margin:0 auto;padding:0 36px}
.hr{height:1px;background:currentColor;opacity:.18}

/* — NAV — */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter: blur(14px);
  background:rgba(237,236,234,.72);
  border-bottom:1px solid var(--hair);
}
.nav.dark{background:rgba(12,9,51,.55);border-bottom-color:var(--hair-l);color:var(--paper)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px;position:relative}
.nav-left{display:flex;align-items:center;gap:24px;flex:0 0 auto}
.nav-right{flex:0 0 auto}
.nav-ticker{display:flex;align-items:center;gap:10px;width:300px;position:relative;overflow:visible;height:24px}
.nav-ticker .pulse{
  width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;
  animation:pulse 1.8s ease-in-out infinite;
  position:absolute;left:4px;top:50%;transform:translateY(-50%);
}
.nav-ticker .phrase{
  font-family:var(--serif);font-size:17px;font-style:italic;line-height:1;
  transition:opacity .42s cubic-bezier(.4,0,.2,1), transform .42s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;position:absolute;left:22px;top:50%;transform:translateY(-50%);
}
.nav-ticker .phrase em{color:var(--pink);font-style:italic}
.nav-ticker .phrase.out{opacity:0;transform:translateY(calc(-50% - 6px))}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(156,255,151,.65)}50%{opacity:.5;box-shadow:0 0 0 8px rgba(156,255,151,0)}}
@media (max-width: 1180px){ .nav-ticker { display:none } }
.brand{display:inline-flex;align-items:center;height:28px;color:var(--pink)}
.brand img,.brand svg{height:28px;width:auto;display:block;fill:currentColor}
/* Logo mutante: cada letra tem versão "orig" + "alt" — toggle swap */
#brandSvg .lp{ transform-box: fill-box; transform-origin: center; transition: transform .42s cubic-bezier(.34,1.56,.64,1); }
#brandSvg .lp path{ transition: fill .3s, opacity .25s cubic-bezier(.4,0,.2,1); }
#brandSvg .lp .alt { opacity:0; }
#brandSvg .lp.swap .orig { opacity:0; }
#brandSvg .lp.swap .alt  { opacity:1; }
#brandSvg .lp1 .alt { transform: translateX(-14px); }
#brandSvg .lp2 .alt { transform: translateX(20px); }
#brandSvg .lp3 .alt { transform: translateX(32px); }
#brandSvg .lp4 .alt { transform: translateX(37px); }
#brandSvg .lp.pop{ animation: lpPop .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes lpPop{
  0%   { transform: scaleY(1)    skewX(0deg); }
  40%  { transform: scaleY(1.16) skewX(-3deg); }
  100% { transform: scaleY(1)    skewX(0deg); }
}
/* Nav links: centralizados absolutamente + hitbox maior */
.nav-links{
  display:flex;gap:4px;font-size:13px;letter-spacing:.02em;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}
.nav-links a{
  position:relative;padding:10px 14px;border-radius:999px;
  transition: background .25s, color .25s;
}
.nav-links a::after{content:"";position:absolute;left:14px;right:calc(100% - 14px);bottom:6px;height:1px;background:currentColor;transition:right .35s ease;opacity:.7}
.nav-links a:hover{background:rgba(237,236,234,.06)}
.nav-links a:hover::after{right:14px}
.nav.dark .nav-links a:hover{background:rgba(237,236,234,.08)}
.nav:not(.dark) .nav-links a:hover{background:rgba(12,9,51,.05)}

.nav-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  height: calc(100% - 8px);
  transform: translateY(-50%);
  border-radius: 999px;
  transition: left 0.38s cubic-bezier(0.25, 1, 0.5, 1), width 0.38s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
.nav.dark .nav-indicator {
  background: rgba(255, 128, 225, 0.15);
  border: 1px solid rgba(255, 128, 225, 0.25);
}
.nav:not(.dark) .nav-indicator {
  background: rgba(12, 9, 51, 0.08);
  border: 1px solid rgba(12, 9, 51, 0.15);
}
.nav.dark .nav-links a.active {
  color: var(--pink) !important;
}
.nav:not(.dark) .nav-links a.active {
  color: var(--navy) !important;
}
.nav-cta{font-size:13px;border:1px solid currentColor;border-radius:999px;padding:10px 16px;display:inline-flex;align-items:center;gap:8px;transition:.3s cubic-bezier(.25,1,.5,1)}
.nav-cta:hover{background:var(--green);border-color:var(--green);color:var(--navy)}
.nav-cta .arr{display:inline-block;transform:rotate(-45deg);transition:.25s}
.nav-cta:hover .arr{transform:rotate(0)}

.nav-links a.portfolio-btn {
  border: 1px solid currentColor;
  padding: 10px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.nav-links a.portfolio-btn::after {
  display: none !important;
}
.nav-links a.portfolio-btn .arr {
  display: inline-block;
  transform: rotate(-45deg);
  transition: transform 0.25s ease;
}
.nav-links a.portfolio-btn:hover {
  background: var(--green) !important;
  color: var(--navy) !important;
  border-color: var(--green) !important;
}
.nav-links a.portfolio-btn:hover .arr {
  transform: rotate(0deg);
}

.portfolio-btn.home-btn .arr {
  display: inline-block;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.portfolio-btn.home-btn:hover .arr {
  transform: rotate(0deg);
}
@media (max-width: 1180px){
  .nav-links{position:static;transform:none}
}

/* — HERO — */
.hero{
  position:relative;
  background:var(--navy);color:var(--paper);
  min-height: 100svh;
  min-height: calc(100lvh - 0px);
  padding:104px 36px 56px;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../assets/background/nKEYb01.svg') no-repeat center;
  background-size: cover;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  transform: scale(1.08) translateY(calc(var(--hero-scroll, 0) * 0.25px));
  will-change: transform;
}
.hero .grid{
  max-width:1480px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:60px 1fr;gap:24px;
  flex:1;
  position:relative;
  z-index: 2;
}
.hero .grid > .col{
  display:flex;flex-direction:column;justify-content:space-between;min-height:100%;
  gap:48px;
}
.vstrip{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  align-self:start;color:var(--paper);opacity:.7;
  padding-top:12px;
}
.hero-meta{
  display:flex;justify-content:space-between;font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;
}
.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size: clamp(70px, 13vw, 220px);
  line-height:.86;
  letter-spacing:-.02em;
}
.hero h1 .it{font-style:italic;color:var(--pink)}
.hero h1 .stop{color:var(--pink)}
.hero h1 .row{display:block}
.hero h1 .indent{padding-left:0}

.hero-foot{
  display:grid;grid-template-columns: 1.4fr 1fr;gap:48px;
  align-items:end;
}
.hero-foot .col{font-size:14px;line-height:1.55;opacity:.88;max-width:32ch}
.hero-foot .label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.55;margin-bottom:14px;display:block}
.hero-foot .big{font-family:var(--serif);font-size:28px;line-height:1.1;font-style:italic;color:var(--pink);max-width:14ch}

/* floating school — followers do mouse */
.cardume-p{
  position:absolute;left:0;top:0;
  pointer-events:none;
  will-change: transform, color, background;
  user-select:none;
  transition: color 1.6s cubic-bezier(.4,0,.2,1), background 1.6s cubic-bezier(.4,0,.2,1), opacity .6s;
}
.hero{cursor:default}

/* — MARQUEE — */
.marquee{
  background:var(--pink);color:var(--navy);
  border-block:1px solid var(--navy);
  overflow:hidden;white-space:nowrap;
  padding:18px 0;
}
.marquee .track{display:inline-flex;gap:48px;animation:scroll 38s linear infinite}
.marquee span{font-family:var(--serif);font-size:38px;letter-spacing:-.01em;line-height:1;display:inline-flex;align-items:center;gap:24px}
.marquee em{font-style:italic;color:var(--purple)}
.marquee .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--navy);vertical-align:middle;flex-shrink:0;margin:0 48px !important}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* — MANIFESTO — */
.manifesto{
  background:var(--paper);color:var(--ink);
  padding:140px 36px 160px;
  position:relative;
  overflow:hidden;
}
.manifesto .inner{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:64px}
.section-label{font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:.55;display:flex;align-items:center;gap:10px}
.section-label::before{content:"";width:32px;height:1px;background:currentColor;display:inline-block}
.manifesto .copy h2{
  font-family:var(--serif);font-weight:400;
  font-size: clamp(40px,5.6vw,84px);line-height:1.02;letter-spacing:-.015em;
  margin-bottom:48px;
}
.manifesto .copy h2 em{font-style:italic;color:var(--purple)}
.manifesto .copy h2 .pink{color:var(--pink)}
.manifesto .left{display:flex;flex-direction:column;gap:18px}
.manifesto .caption{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.55}
.manifesto .visual{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--navy);max-width:440px}
.manifesto .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.manifesto .visual .corner{position:absolute;left:-20px;bottom:-30px;width:180px;height:auto;pointer-events:none;color:var(--pink);opacity:.95;transform: rotate(180deg);mix-blend-mode:screen}
.manifesto .visual .tag{position:absolute;right:14px;top:14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);background:rgba(12,9,51,.55);backdrop-filter:blur(8px);padding:6px 10px;border-radius:999px}
.manifesto .copy p{font-size:18px;line-height:1.55;max-width:62ch;margin-bottom:18px}
.manifesto .copy p + p{opacity:.8}
.pull{
  margin-top:64px;display:flex;gap:16px;align-items:baseline;
  font-family:var(--serif);font-size:32px;font-style:italic;color:var(--purple);
}
.pull::before{content:"\201C";font-size:64px;line-height:.6;color:var(--pink);margin-right:4px}

/* — SERVIÇOS MODULARES — */
.servicos{
  background:var(--navy);color:var(--paper);
  padding:140px 36px 160px;position:relative;
}
.servicos .inner{max-width:1480px;margin:0 auto}
.servicos .head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:80px}
.servicos h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(48px,6vw,96px);line-height:1;letter-spacing:-.02em;
}
.servicos h2 em{font-style:italic;color:var(--pink)}
.servicos .head .right{font-size:16px;line-height:1.55;opacity:.85;max-width:42ch}
.servicos .help{font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-top:18px}

.modgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mod{
  position:relative;
  border:1px solid var(--hair-l);
  background:rgba(255,255,255,.02);
  padding:24px 22px 22px;
  aspect-ratio: 1 / 1;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:.45s cubic-bezier(.2,.7,.2,1);
  cursor:pointer;overflow:hidden;
  user-select:none;
}
.mod .num{font-size:12px;letter-spacing:.2em;opacity:.55}
.mod .name{font-family:var(--serif);font-size:34px;line-height:1.02;letter-spacing:-.01em}
.mod .name em{font-style:italic}
.mod .desc{font-size:13px;line-height:1.5;opacity:0;transition:.4s;max-height:0}
.mod:hover{background:var(--pink);color:var(--navy);border-color:var(--pink)}
.mod:hover .num{opacity:1}
.mod:hover .desc{opacity:1;max-height:120px}
.mod.alt:hover{background:var(--lavender);color:var(--navy);border-color:var(--lavender)}
.mod.alt2:hover{background:var(--green);color:var(--navy);border-color:var(--green)}
.mod.alt3:hover{background:var(--purple);color:var(--paper);border-color:var(--purple)}

/* — CASES — X-Ray lens reveal — */
.cases{background:var(--paper);color:var(--ink);padding:140px 36px 100px;position:relative}
.cases .inner{max-width:1480px;margin:0 auto}
.cases h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(48px,6vw,96px);line-height:1;letter-spacing:-.02em;
  margin: 28px 0 60px;max-width:18ch;
}
.cases h2 em{font-style:italic;color:var(--purple)}
.case-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows: minmax(0, auto);gap:14px}
.case{position:relative;overflow:hidden;border:1px solid var(--hair);background:var(--navy);transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s;display:block}
.case .img-front,
.case .img-back{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.case .img-front{ z-index:1; }
.case .img-back{
  z-index:2;
  will-change: clip-path;
  /* começa invisível — raio 0 */
  clip-path: circle(0px at 50% 50%);
  transition: clip-path .25s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  filter: saturate(.92) contrast(1.02);
}
/* tinta cromática Muma — magenta + roxo translúcido SOMENTE dentro da lente */
.case .lens-tint{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%),
              rgba(255,128,225,.55) 0%,
              rgba(50,21,173,.45) 55%,
              rgba(50,21,173,.25) 100%);
  mix-blend-mode: overlay;
  clip-path: circle(0px at 50% 50%);
  transition: clip-path .25s cubic-bezier(.2,.7,.2,1);
  will-change: clip-path;
}
.case .lens-edge{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%),
              transparent 0,
              transparent calc(var(--lr, 150px) - 2px),
              rgba(255,128,225,.9) var(--lr, 150px),
              transparent calc(var(--lr, 150px) + 2px));
  opacity:0;
  transition: opacity .25s;
}
.case:hover .lens-edge{ opacity:.85 }
.case:hover .img-front,
.case:hover .img-back { transform: scale(1.04); }
.case .scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(12,9,51,0) 35%, rgba(12,9,51,.78) 100%);pointer-events:none;z-index:3}
.case .meta{position:absolute;left:20px;right:20px;bottom:20px;display:flex;justify-content:space-between;align-items:end;color:var(--paper);font-size:11px;letter-spacing:.18em;text-transform:uppercase;z-index:4}
.case .title{position:absolute;left:20px;bottom:48px;color:var(--paper);font-family:var(--serif);font-size:38px;line-height:.95;letter-spacing:-.01em;max-width:14ch;z-index:4}
.case .title em{font-style:italic;color:var(--pink)}
.case .badge{position:absolute;top:18px;left:18px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;background:var(--pink);color:var(--navy);padding:6px 10px;border-radius:999px;z-index:4}
/* hint sutil: pequeno selo "backstage" no canto que pulsa */
.case .reveal-hint{
  position:absolute;top:18px;right:18px;z-index:4;
  display:inline-flex;align-items:center;gap:7px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  background:rgba(12,9,51,0.5);backdrop-filter:blur(8px);
  color:var(--paper);padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  transition: background .3s, color .3s, opacity .3s;
  opacity:.9;
}
.case .reveal-hint .lens{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.8s ease-in-out infinite}
.case:hover .reveal-hint{ background:var(--pink);color:var(--navy);border-color:var(--pink);opacity:1 }
.case:hover{transform:translateY(-4px);border-color:var(--pink)}

.case.c1{grid-column:span 8;aspect-ratio: 8 / 5}
.case.c2{grid-column:span 4;height: 100%}
.case.c3{grid-column:span 4;aspect-ratio: 4 / 5}
.case.c4{grid-column:span 4;aspect-ratio: 4 / 5}
.case.c5{grid-column:span 4;aspect-ratio: 4 / 5}
.case.c6{grid-column:span 12;aspect-ratio: 16 / 6}

.cases-foot{display:flex;justify-content:space-between;align-items:center;margin-top:48px;font-size:13px}
.ghost-btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);padding:14px 22px;border-radius:999px;font-size:13px;letter-spacing:.04em;transition:.3s cubic-bezier(.25,1,.5,1)}
.ghost-btn:hover{background:var(--green);color:var(--navy);border-color:var(--green)}

/* — CLIENTES — */
.clientes{background:var(--paper);padding:100px 36px 140px;border-top:1px solid var(--hair)}
.clientes .inner{max-width:1480px;margin:0 auto}
.clientes h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,56px);line-height:1;
  letter-spacing:-.015em;margin:24px 0 56px;max-width:22ch;
}
.clientes h3 em{font-style:italic;color:var(--purple)}
.client-grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--hair);border-left:1px solid var(--hair);
}
.client-grid div{
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:34px 22px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:26px;letter-spacing:-.01em;text-align:center;
  min-height:120px;transition:.3s;cursor:default;
}
.client-grid div:hover{background:var(--navy);color:var(--pink)}
.client-grid div em{font-style:italic}
.client-grid div img {
  width: auto;
  height: 38px;
  max-width: 80%;
  object-fit: contain;
  transition: filter 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  filter: brightness(0) saturate(100%) invert(6%) sepia(31%) saturate(5796%) hue-rotate(224deg) brightness(91%) contrast(105%);
  opacity: 0.72;
}
.client-grid div:hover img {
  filter: brightness(0) saturate(100%) invert(61%) sepia(55%) saturate(1754%) hue-rotate(296deg) brightness(101%) contrast(101%);
  opacity: 1;
  transform: scale(1.08);
}
/* logos com respiro interno médio — escala compensatória */
.client-grid div img.logo-trim-medium {
  height: 48px;
}
.client-grid div:hover img.logo-trim-medium {
  transform: scale(1.12);
}
/* logos com muito respiro interno — escala maior */
.client-grid div img.logo-trim-high {
  height: 56px;
}
.client-grid div:hover img.logo-trim-high {
  transform: scale(1.12);
}
/* ajuste individual de tamanho por logo */
.client-grid div img.logo-size-up-sm { height: 44px; }
.client-grid div img.logo-size-up-md { height: 50px; }
.client-grid div img.logo-size-up-lg { height: 58px; }
.client-grid div img.logo-size-up-xl { height: 68px; }
.client-grid div img.logo-size-down-sm { height: 32px; }
.client-grid div img.logo-size-down-md { height: 30px; }
.client-grid div img.logo-size-down-lg { height: 24px; }
.client-grid div img.logo-size-down-xl { height: 18px; }
.client-grid div img.logo-size-up-xxl { height: 76px; }

/* — CTA — Copy email button + email row — */
.cta .contact .email-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy-email-btn{
  background:transparent;border:1px solid rgba(237,236,234,.35);
  color:var(--paper);border-radius:999px;
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  position:relative;transition:.3s cubic-bezier(.25,1,.5,1);flex-shrink:0;
}
.copy-email-btn:hover{background:var(--green);color:var(--navy);border-color:var(--green)}
.copy-email-btn .ic-check{display:none}
.copy-email-btn.copied{background:var(--green);color:var(--navy);border-color:var(--green)}
.copy-email-btn.copied .ic-copy{display:none}
.copy-email-btn.copied .ic-check{display:block}
.copy-email-btn .tip{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--navy);color:var(--paper);
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:.25s;
  border:1px solid rgba(237,236,234,.18);
}
.copy-email-btn.copied .tip{opacity:1;transform:translateX(-50%) translateY(0)}

/* — FOUNDERS — */
.founders{background:var(--purple);color:var(--paper);padding:140px 36px}
.founders .inner{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:1fr 1.8fr;gap:80px;align-items:center}
.founders h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(48px,6vw,96px);line-height:1;letter-spacing:-.02em;
}
.founders h2 em{font-style:italic;color:var(--pink)}
.founders p{font-size:18px;line-height:1.6;opacity:.92;max-width:60ch;margin-bottom:18px}
.founders .photo-pair{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.founders .photo{aspect-ratio:3/4;background:var(--navy);border:1px solid rgba(255,255,255,.18);position:relative;overflow:hidden}
.founders .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.founders .photo:hover img{transform:scale(1.05)}
.founders .photo .scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(135deg, rgba(12,9,51,.62) 0%, rgba(12,9,51,0) 42%),
    linear-gradient(180deg, rgba(50,21,173,0) 50%, rgba(50,21,173,.78) 100%);
}
.founders .photo span.cap{position:absolute;inset:auto 14px 14px 14px;font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.85;color:var(--paper);z-index:2;text-shadow:0 1px 4px rgba(12,9,51,.5)}
.founders .photo .name{
  position:absolute;left:14px;top:14px;
  font-family:var(--serif);font-size:28px;font-style:italic;color:var(--pink);z-index:2;
  text-shadow: 0 2px 10px rgba(12,9,51,.65), 0 4px 24px rgba(12,9,51,.45);
}
.founders .photo.right,
.founders .photo-pair > div:nth-child(2){margin-top:48px}

/* — CTA — */
.cta{background:var(--navy);color:var(--paper);padding:160px 36px 60px;position:relative;overflow:hidden}
.cta .inner{max-width:1480px;margin:0 auto;position:relative;z-index:2}
.cta .eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:.6;margin-bottom:32px}
.cta h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(76px,12vw,190px);
  line-height:.88;letter-spacing:-.02em;
}
.cta h2 em{font-style:italic;color:var(--pink)}
.cta h2 .stop{color:var(--pink)}
.cta .send{
  margin-top:64px;display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:end;
}
.cta .form{display:flex;gap:0;border-bottom:1px solid rgba(237,236,234,.4);padding-bottom:12px;align-items:center}
.cta .form input{
  flex:1;background:transparent;border:0;color:var(--paper);
  font-family:var(--serif);font-size:28px;outline:none;padding:8px 0;font-style:italic;
}
.cta .form input::placeholder{color:rgba(237,236,234,.5)}
.cta .form button{
  background:var(--pink);color:var(--navy);border:0;border-radius:999px;
  padding:14px 22px;font-size:13px;letter-spacing:.06em;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:.3s cubic-bezier(.25,1,.5,1);
}
.cta .form button:hover{background:var(--green);color:var(--navy)}
.cta .contact{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.5;opacity:.9}
.cta .contact .big{font-family:var(--serif);font-size:30px;line-height:1.1;opacity:1;color:var(--pink);font-style:italic}

.cta .deco{position:absolute;right:-20px;top:80px;width:520px;height:auto;color:var(--pink);opacity:.18;pointer-events:none;transform: rotate(180deg)}

/* — FOOTER — */
footer{background:var(--navy);color:var(--paper);padding:60px 36px 40px;border-top:1px solid rgba(237,236,234,.18)}
footer .inner{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;align-items:start}
footer h4{font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:.55;margin-bottom:18px;font-weight:400}
footer ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
footer ul a{opacity:.9;transition:.2s}
footer ul a:hover{opacity:1;color:var(--pink);text-decoration:underline;text-underline-offset:4px}
footer .lockup{font-family:var(--serif);font-size:54px;line-height:1;letter-spacing:-.01em}
footer .lockup i{font-style:italic;color:var(--pink)}
footer .tag{font-family:var(--serif);font-size:18px;font-style:italic;opacity:.7;margin-top:10px}
.legal{max-width:1480px;margin:60px auto 0;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;border-top:1px solid rgba(237,236,234,.18);padding-top:24px}
.legal-version{font-family:var(--sans);font-size:9px;letter-spacing:.12em;opacity:.45;text-transform:none;margin-top:2px}
.legal-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;cursor:pointer;user-select:none}
.legal-phrase{display:block}

/* — Fibonacci burst (clique global) — */
#cursor-fx-container{
  position:fixed;inset:0;pointer-events:none;z-index:99997;
  mix-blend-mode: difference;
}
.fibonacci-ring{
  position:absolute;border-radius:50%;
  border:1.5px solid var(--pink);
  pointer-events:none;
  transform: translate(-50%, -50%) scale(0.1);
  opacity:1;
  animation: fibonacci-burst .42s cubic-bezier(.1,.8,.3,1) forwards;
}
/* Variante "shaped": nasce com o formato do botão, expande virando círculo */
.fibonacci-ring.shaped{
  animation: fibonacci-burst-shaped .42s cubic-bezier(.1,.8,.3,1) forwards;
}
@keyframes fibonacci-burst{
  0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 1; }
  60%  { opacity: .8; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes fibonacci-burst-shaped{
  0%   { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6);  opacity: 0; border-radius: 50%; }
}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid currentColor;border-radius:999px;padding:6px 12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .hero-foot{grid-template-columns:1fr;gap:24px}
  .manifesto .inner{grid-template-columns:1fr;gap:24px}
  .servicos .head{grid-template-columns:1fr}
  .modgrid{grid-template-columns:repeat(2,1fr)}
  .case-grid > .case{grid-column:span 12 !important;aspect-ratio:4/3 !important}
  .client-grid{grid-template-columns:repeat(3,1fr)}
  .founders .inner{grid-template-columns:1fr}
  .cta .send{grid-template-columns:1fr;gap:32px}
  footer .inner{grid-template-columns:1fr 1fr;gap:32px}
  .nav-links{display:flex !important}
  .nav-links a{padding:8px 12px !important;font-size:11px !important}
  .nav-links a.portfolio-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
}

/* ================================================================
   A) CONTACT MODAL
   ================================================================ */

/* — CONTACT MODAL — */
body.modal-open { overflow: hidden; }

.modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(12, 9, 51, 0.82);
  backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .4s cubic-bezier(.4,0,.2,1), visibility .4s;
  padding: 24px;
}
.modal-overlay.active { opacity: 1; visibility: visible; }

.modal-container {
  background: var(--navy);
  border: 1px solid rgba(237,236,234,.12);
  border-radius: 20px;
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
  padding: 48px 40px;
  position: relative;
  transform: scale(0.92) translateY(20px);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
  color: var(--paper);
  scrollbar-width: thin;
  scrollbar-color: var(--pink) var(--navy);
}
.modal-overlay.active .modal-container {
  transform: scale(1) translateY(0);
}

.modal-close {
  position: absolute; top: 18px; right: 18px;
  background: transparent; border: 1px solid rgba(237,236,234,.25);
  color: var(--paper); width: 40px; height: 40px;
  border-radius: 50%; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: .3s cubic-bezier(.25,1,.5,1);
  cursor: pointer;
}
.modal-close:hover { background: var(--pink); color: var(--navy); border-color: var(--pink); }

.modal-header { margin-bottom: 36px; }
.modal-header h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 5vw, 48px); line-height: 1.05;
  letter-spacing: -.02em; margin-top: 16px;
}
.modal-header h3 em { font-style: italic; color: var(--pink); }

.modal-form { display: flex; flex-direction: column; gap: 22px; }

.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  opacity: .65;
}
.form-group label .optional {
  font-size: 10px; letter-spacing: .12em; opacity: .65;
  text-transform: none;
}

.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(237,236,234,.06);
  border: 1px solid rgba(237,236,234,.18);
  border-radius: 10px;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  padding: 14px 16px;
  outline: none;
  transition: border-color .25s, background .25s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--pink);
  background: rgba(237,236,234,.10);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(237,236,234,.4);
}
.form-group select { cursor: pointer; }
.form-group select option {
  background: var(--navy); color: var(--paper);
}
.form-group textarea { resize: vertical; min-height: 100px; }

/* Validation Styles */
.form-group.invalid label {
  color: var(--pink) !important;
  opacity: 1;
}
.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea {
  border-color: var(--pink) !important;
  background: rgba(255, 128, 225, 0.04) !important;
}
.form-group.invalid .drop-zone {
  border-color: var(--pink) !important;
  background: rgba(255, 128, 225, 0.04) !important;
}


/* Honeypot — invisible to humans */
.hp-field {
  position: absolute; left: -9999px; top: -9999px;
  opacity: 0; height: 0; width: 0;
  pointer-events: none; tab-index: -1;
}

/* Drop Zone */
.drop-zone {
  position: relative;
  border: 2px dashed rgba(237,236,234,.22);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  transition: border-color .3s, background .3s;
  cursor: pointer;
}
.drop-zone:hover,
.drop-zone.dragover {
  border-color: var(--pink);
  background: rgba(255,128,225,.06);
}
.drop-zone input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.drop-zone-text {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 14px; opacity: .7;
}
.drop-zone-text .drop-icon { font-size: 24px; }
.drop-zone-text em { color: var(--pink); font-style: italic; }
.drop-zone-file {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 14px;
}
.drop-zone-file .file-name {
  color: var(--green); font-style: italic;
  font-family: var(--serif); font-size: 16px;
}
.drop-zone-file .file-remove {
  background: transparent; border: 1px solid rgba(237,236,234,.3);
  color: var(--paper); width: 26px; height: 26px;
  border-radius: 50%; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .25s;
}
.drop-zone-file .file-remove:hover {
  background: var(--pink); color: var(--navy); border-color: var(--pink);
}

.modal-submit {
  background: var(--pink); color: var(--navy);
  border: 0; border-radius: 999px;
  padding: 16px 28px;
  font-family: var(--sans);
  font-size: 14px; letter-spacing: .06em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: .35s cubic-bezier(.25,1,.5,1);
  margin-top: 8px;
  width: 100%;
}
.modal-submit:hover { background: var(--green); }
.modal-submit:disabled { opacity: .5; cursor: not-allowed; }
.modal-submit .arr { display: inline-block; transform: rotate(-45deg); transition: .25s; }
.modal-submit:hover .arr { transform: rotate(0); }

.modal-success,
.modal-error { text-align: center; padding: 40px 0; }
.modal-success .success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--green); color: var(--navy);
  font-size: 28px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  animation: successPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes successPop {
  0% { transform: scale(0); } 100% { transform: scale(1); }
}
.modal-success h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: 32px; margin-bottom: 12px;
}
.modal-success h3 em { font-style: italic; color: var(--pink); }
.modal-success p { font-size: 14px; opacity: .7; }
.modal-error p { font-size: 14px; opacity: .85; color: var(--pink); }
.modal-error strong { color: var(--green); }

/* Modal spam warning */
.modal-spam {
  text-align: center; padding: 20px 0;
  font-size: 13px; color: var(--pink); opacity: .85;
}

@media (max-width: 600px) {
  .modal-container { padding: 32px 20px; border-radius: 16px; }
}

/* ================================================================
   B) ACCESSIBILITY TOGGLE
   ================================================================ */

/* — ACCESSIBILITY TOGGLE — */
.a11y-toggle {
  background: transparent;
  border: 1.5px solid currentColor;
  color: inherit;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: .3s cubic-bezier(.25,1,.5,1);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  padding: 0;
  line-height: 1;
}
.a11y-toggle:hover { background: rgba(237,236,234,.1); }
.a11y-toggle.active {
  background: var(--green); color: var(--navy); border-color: var(--green);
}
.a11y-toggle svg { width: 18px; height: 18px; display: block; margin: 0; transform: translateY(2px); }
.a11y-toggle .a11y-tip {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--navy); color: var(--paper);
  font-family: var(--sans); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: .25s;
  border: 1px solid rgba(237,236,234,.18);
}
.a11y-toggle:hover .a11y-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* — A11Y MODE — cursor, animations, contrast — */
html.a11y-mode,
html.a11y-mode body,
html.a11y-mode *,
html.a11y-mode *::before,
html.a11y-mode *::after {
  cursor: auto !important;
}
html.a11y-mode input[type=email],
html.a11y-mode textarea,
html.a11y-mode [contenteditable=true] {
  cursor: text !important;
}
html.a11y-mode a,
html.a11y-mode button,
html.a11y-mode [role=button],
html.a11y-mode .mod,
html.a11y-mode .case,
html.a11y-mode select {
  cursor: pointer !important;
}

html.a11y-mode #cursor,
html.a11y-mode #cursor-halo,
html.a11y-mode #cursor-fx-container { display: none !important; }

html.a11y-mode .cardume-p { display: none !important; }

html.a11y-mode *,
html.a11y-mode *::before,
html.a11y-mode *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
}

html.a11y-mode .marquee .track { animation: none !important; }

/* Higher contrast */
html.a11y-mode .hero-meta,
html.a11y-mode .vstrip,
html.a11y-mode .hero-foot .label,
html.a11y-mode .section-label,
html.a11y-mode .manifesto .caption,
html.a11y-mode .servicos .help,
html.a11y-mode .mod .num,
html.a11y-mode .cta .eyebrow,
html.a11y-mode footer h4 {
  opacity: 1 !important;
}
html.a11y-mode .hero-foot .col,
html.a11y-mode .manifesto .copy p + p,
html.a11y-mode .servicos .head .right,
html.a11y-mode footer ul a,
html.a11y-mode .cta .contact {
  opacity: 1 !important;
}

/* Focus visible */
html.a11y-mode :focus-visible {
  outline: 4px solid var(--green) !important;
  outline-offset: 3px !important;
}

/* prefers-reduced-motion: auto-apply */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .marquee .track { animation: none !important; }
  .cardume-p { display: none !important; }
}

/* — PREMIUM IPADOS HOVER SNAP — */
.magnetic-active {
  background: var(--green) !important;
  color: var(--navy) !important;
  border-color: var(--green) !important;
  transition: background 0.35s cubic-bezier(.25,1,.5,1), color 0.35s cubic-bezier(.25,1,.5,1), border-color 0.35s cubic-bezier(.25,1,.5,1), transform 0.35s cubic-bezier(.25,1,.5,1) !important;
}
.magnetic-active svg {
  color: var(--navy) !important;
  stroke: var(--navy) !important;
}
.magnetic-active::after {
  display: none !important;
}

/* — MUMA BRAND COMMA INLINE SVG — */
.muma-comma {
  display: inline-block;
  vertical-align: baseline;
  height: 0.22em;
  width: auto;
  margin-left: 0.04em;
  margin-right: 0.12em;
  color: var(--pink);
  transform: translateY(0.06em);
  flex-shrink: 0;
}

/* — FOUNDERS EASTER EGG OVERLAY — */
.founders .photo .easter-egg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 9, 51, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  padding: 20px;
  text-align: center;
}
.founders .photo .integrante-desc {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.9;
  color: var(--paper);
  max-width: 28ch;
  margin-bottom: 20px;
  text-shadow: 0 1px 2px rgba(12, 9, 51, 0.5);
}
.founders .photo .easter-egg-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.founders .photo .easter-egg-btn {
  background: var(--pink);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  padding: 12px 20px;
  border-radius: 30px;
  cursor: pointer;
  margin-bottom: 12px;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s;
}
.founders .photo .easter-egg-btn:hover {
  background: var(--green);
  transform: scale(1.05);
}


/* — CAREER MODAL EXTRA DYNAMIC PLATFORMS STYLING — */
.dynamic-links-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.dynamic-link-row {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.dynamic-link-row select.link-platform {
  flex: 0 0 140px;
  background: rgba(237,236,234,.06);
  border: 1px solid rgba(237,236,234,.18);
  color: var(--paper);
  border-radius: 10px;
  padding: 14px 12px;
  outline: none;
  font-family: var(--sans);
  font-size: 14px;
}
.dynamic-link-row select.link-platform option {
  background: var(--navy);
  color: var(--paper);
}
.dynamic-link-row input.link-url {
  flex: 1;
}
.dynamic-link-row .btn-remove-link {
  background: transparent;
  border: 1px solid rgba(237, 236, 234, 0.25);
  color: var(--paper);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: 0.25s;
  flex-shrink: 0;
}
.dynamic-link-row .btn-remove-link:hover {
  background: var(--pink);
  color: var(--navy);
  border-color: var(--pink);
}
.btn-add-link {
  background: transparent;
  border: 1px dashed rgba(237, 236, 234, 0.3);
  color: var(--pink);
  border-radius: 10px;
  padding: 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s;
  text-align: center;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.btn-add-link:hover {
  border-color: var(--pink);
  background: rgba(255, 128, 225, 0.05);
}

/* ================================================================
   C) MOBILE RESPONSIVENESS & TOUCH OPTIMIZATIONS (<= 768px)
   ================================================================ */
@media (max-width: 768px) {
  .legal-version {
    display: none !important;
  }
  .hide-mobile {
    display: none !important;
  }

  /* Reduce global wrapping margins and padding to save space on small screens */
  .wrap {
    padding: 0 20px !important;
  }
  
  /* Generic section padding reductions to avoid excessive blank space */
  .hero {
    padding: 84px 20px 48px !important;
  }
  .manifesto, .servicos, .cases, .clientes, .founders {
    padding: 70px 20px !important;
  }
  .cta {
    padding: 90px 20px 50px !important;
  }
  footer {
    padding: 50px 20px 30px !important;
  }

  /* Nav Adjustments */
  .nav-row {
    height: 56px !important;
    gap: 12px !important;
  }
  .nav-cta {
    padding: 8px 14px !important;
    font-size: 11px !important;
  }
  .brand img, .brand svg {
    height: 22px !important;
  }
  .a11y-toggle {
    display: none !important;
  }

  /* Hero Section Responsiveness */
  .hero .grid {
    grid-template-columns: 1fr !important; /* Hide/collapse vertical strip space */
    gap: 16px !important;
  }
  .vstrip {
    display: none !important; /* Hide vertical rotating text strip on mobile */
  }
  .hero-meta {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }
  .hero h1 {
    font-size: clamp(52px, 14.5vw, 78px) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.02em !important;
  }
  .hero-foot {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-top: 10px !important;
  }
  .hero-foot .col {
    max-width: 100% !important;
    font-size: 13px !important;
  }
  .hero-foot .label {
    margin-bottom: 6px !important;
  }
  .hero-foot .big {
    font-size: 20px !important;
    max-width: 100% !important;
  }

  /* Manifesto Section */
  .manifesto .copy h2 {
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.1 !important;
    margin-bottom: 24px !important;
  }
  .manifesto .copy p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .manifesto .visual {
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important; /* Make it fit nicely without consuming too much vertical space */
    position: relative !important;
  }
  .manifesto .visual .corner {
    display: none !important; /* Remove comma overlay on mobile */
  }
  .manifesto .visual .tag {
    top: auto !important;
    bottom: 14px !important;
    right: 14px !important;
  }
  .pull {
    margin-top: 24px !important;
    font-size: 17px !important;
  }
  .pull::before {
    font-size: 32px !important;
  }

  /* Serviços Section */
  .servicos h2 {
    font-size: clamp(28px, 8vw, 40px) !important;
  }
  .servicos .head .right {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .servicos .help {
    display: none !important; /* passe o mouse is irrelevant on mobile */
  }
  .modgrid {
    grid-template-columns: 1fr !important; /* Stack columns completely on mobile */
    gap: 12px !important;
  }
  .mod {
    aspect-ratio: auto !important; /* Remove strict 1/1 aspect ratio on mobile */
    min-height: 100px !important;
    padding: 18px 16px !important;
  }
  .mod .name {
    font-size: 24px !important;
    margin: 8px 0 !important;
  }
  .mod .desc {
    opacity: 0.9 !important;
    max-height: 150px !important;
    margin-top: 6px !important;
    font-size: 12px !important;
  }

  /* Cases Section */
  .cases h2 {
    font-size: clamp(28px, 8vw, 40px) !important;
    margin: 16px 0 24px !important;
  }
  .cases p {
    margin: -10px 0 30px !important;
  }
  .case .title {
    font-size: 22px !important;
    bottom: 38px !important;
  }
  .case .meta {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }
  .case .reveal-hint {
    display: none !important; /* Hide backstage hover reveal badge on mobile since hover lens is disabled */
  }
  .case-grid > .case {
    aspect-ratio: 1.4 / 1 !important; /* Cozy ratio for viewing images on vertical mobile screens */
  }
  .cases-foot {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
    text-align: center !important;
    margin-top: 32px !important;
  }
  .ghost-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 18px !important;
  }

  /* Clientes Section */
  .clientes h3 {
    font-size: clamp(24px, 6vw, 32px) !important;
    margin: 16px 0 32px !important;
  }
  .client-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* Balanced 2 columns */
  }
  .client-grid div {
    font-size: 16px !important;
    padding: 20px 10px !important;
    min-height: 80px !important;
  }

  /* Founders Section */
  .founders h2 {
    font-size: clamp(28px, 8vw, 40px) !important;
  }
  .founders p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .founders .photo-pair {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 16px !important;
    padding-bottom: 20px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .founders .photo-pair::-webkit-scrollbar {
    display: none !important;
  }
  .founders .photo.right,
  .founders .photo-pair > div:nth-child(2) {
    margin-top: 0 !important; /* Remove top offset on stack */
  }
  .founders .photo {
    flex-shrink: 0 !important;
    width: 250px !important;
    max-width: 80vw !important;
    aspect-ratio: 3 / 4 !important;
    scroll-snap-align: center !important;
    margin: 0 !important;
  }
  .founders .photo .name {
    font-size: 20px !important;
  }
  .founders .pill-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 100% !important;
    margin-top: 24px !important;
  }
  .founders .pill {
    flex: 1 !important;
    justify-content: center !important;
    font-size: clamp(8px, 2.2vw, 10px) !important;
    padding: 4px 6px !important;
    white-space: nowrap !important;
    letter-spacing: 0.05em !important;
  }

  /* CTA Section */
  .cta h2 {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 0.92 !important;
  }
  .cta h2 span {
    padding-left: 0 !important;
  }
  .cta .deco {
    display: none !important; /* Hide massive background comma overlay on mobile */
  }
  .cta .send {
    margin-top: 40px !important;
    gap: 28px !important;
  }
  .cta .form {
    flex-direction: column !important;
    align-items: stretch !important;
    border-bottom: none !important;
    gap: 12px !important;
  }
  .cta .form input {
    border-bottom: 1px solid rgba(237,236,234,.4) !important;
    font-size: 18px !important;
    padding: 12px 0 !important;
    text-align: center !important;
  }
  .cta .form button {
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 12px !important;
  }
  .cta .contact .big {
    font-size: 22px !important;
  }

  /* Footer Section */
  footer .inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: center !important;
  }
  footer .inner div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  footer .lockup {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
  }
  footer .lockup img {
    height: 38px !important;
  }
  footer ul {
    align-items: center !important;
  }
  .legal {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    text-align: center !important;
    margin-top: 40px !important;
    padding-top: 20px !important;
  }
  .legal-right {
    align-items: center !important;
    gap: 4px !important;
  }

  /* Modals (Briefing & Career) Responsiveness */
  .modal-overlay {
    padding: 10px !important;
  }
  .modal-container {
    padding: 28px 18px !important;
    border-radius: 16px !important;
    max-height: 94vh !important;
  }
  .modal-header {
    margin-bottom: 24px !important;
  }
  .modal-header h3 {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  .modal-form {
    gap: 16px !important;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
  .drop-zone {
    padding: 20px 12px !important;
  }
  
  /* Dynamic Platform links inside Career Modal */
  .dynamic-link-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    border-bottom: 1px dashed rgba(237, 236, 234, 0.15) !important;
    padding-bottom: 12px !important;
  }
  .dynamic-link-row select.link-platform {
    width: 100% !important;
    flex: none !important;
  }
  .dynamic-link-row .btn-remove-link {
    align-self: flex-end !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
  }
  .btn-add-link {
    padding: 10px !important;
  }
  .modal-submit {
    padding: 14px 20px !important;
    font-size: 13px !important;
  }

  /* Marquee ticker and client grid logos mobile optimizations */
  .marquee {
    padding: 10px 0 !important;
  }
  .marquee span {
    font-size: 20px !important;
  }
  .marquee .dot {
    width: 6px !important;
    height: 6px !important;
    margin: 0 24px !important;
  }
  .client-grid div img {
    max-width: 80% !important;
    height: auto !important;
    max-height: 28px !important;
  }
  .client-grid div img.logo-size-down-xl {
    max-height: 14px !important;
  }
  .client-grid div img.logo-size-up-xxl {
    max-height: 48px !important;
    max-width: 90% !important;
  }
}

/* — Global Hide System Cursors (scoped strictly to fine pointers with hover support) — */
@media (hover: hover) and (pointer: fine) {
  html:not(.a11y-mode),
  html:not(.a11y-mode) body,
  html:not(.a11y-mode) *,
  html:not(.a11y-mode) *::before,
  html:not(.a11y-mode) *::after,
  html:not(.a11y-mode) input,
  html:not(.a11y-mode) textarea,
  html:not(.a11y-mode) select,
  html:not(.a11y-mode) button,
  html:not(.a11y-mode) a,
  html:not(.a11y-mode) label,
  html:not(.a11y-mode) .drop-zone,
  html:not(.a11y-mode) .drop-zone * {
    cursor: none !important;
  }
}

/* =================================================================
   EASTER EGG: SUPERNOVA NUMEROLOGIA
   ================================================================= */
.ee-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(5, 5, 12, 0.96);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  overflow: hidden;
}
.ee-overlay.active {
  opacity: 1;
  visibility: visible;
}

#eeCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ee-popup {
  position: relative;
  background: rgba(12, 9, 51, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  width: 90%;
  max-width: 680px;
  max-height: 85vh;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  color: var(--paper);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 128, 225, 0.05), 0 0 40px rgba(156, 255, 151, 0.05);
  opacity: 0;
  transform: scale(0.9) translateY(30px);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 2;
  user-select: text;
}
.ee-popup.active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.ee-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: 1px solid rgba(237, 236, 234, 0.2);
  color: var(--paper);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}
.ee-close:hover {
  background: var(--paper);
  color: var(--navy);
  border-color: var(--paper);
  transform: rotate(90deg);
}

.ee-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 24px;
}

.ee-num {
  font-family: var(--serif);
  font-size: 72px;
  line-height: 1;
  font-weight: 400;
  position: relative;
}
.ee-num-6 {
  color: var(--pink);
  text-shadow: 0 0 20px rgba(255, 128, 225, 0.4);
}
.ee-num-4 {
  color: var(--green);
  text-shadow: 0 0 20px rgba(156, 255, 151, 0.4);
}

.ee-fusion-symbol {
  font-size: 28px;
  color: var(--lavender);
  animation: ee-pulse 2s infinite ease-in-out;
}

@keyframes ee-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
}

.ee-scroll {
  overflow-y: auto;
  padding-right: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--pink) rgba(255, 255, 255, 0.05);
}
.ee-scroll::-webkit-scrollbar {
  width: 6px;
}
.ee-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
.ee-scroll::-webkit-scrollbar-thumb {
  background: var(--pink);
  border-radius: 3px;
}
.ee-scroll p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(237, 236, 234, 0.85);
  margin-bottom: 20px;
  text-align: justify;
}
.ee-scroll p strong {
  font-weight: 500;
  color: var(--paper);
}

.ee-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(237, 236, 234, 0.15), transparent);
  margin: 24px 0;
}
.ee-divider.star {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lavender), transparent);
  margin: 32px 0;
}
.ee-divider.star::after {
  content: '✦';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--navy);
  padding: 0 10px;
  color: var(--lavender);
  font-size: 14px;
}

.ee-highlight {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
}
.ee-highlight.pink {
  background: rgba(255, 128, 225, 0.15);
  color: var(--pink);
  border: 1px solid rgba(255, 128, 225, 0.25);
}
.ee-highlight.green {
  background: rgba(156, 255, 151, 0.15);
  color: var(--green);
  border: 1px solid rgba(156, 255, 151, 0.25);
}

.ee-union {
  font-style: italic;
  color: var(--paper) !important;
  font-size: 17px !important;
}

.ee-muma {
  text-align: center !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: rgba(237, 236, 234, 0.9) !important;
}
.ee-muma em {
  font-family: var(--serif);
  font-style: normal;
  font-size: 24px;
  color: var(--lavender);
  text-shadow: 0 0 10px rgba(161, 148, 255, 0.3);
}

.ee-glow {
  display: block;
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.05em;
  color: var(--pink);
  text-shadow: 0 0 15px rgba(255, 128, 225, 0.6);
  animation: ee-glow-anim 3s infinite ease-in-out;
}

@keyframes ee-glow-anim {
  0%, 100% { color: var(--pink); text-shadow: 0 0 15px rgba(255, 128, 225, 0.6); }
  50% { color: var(--green); text-shadow: 0 0 15px rgba(156, 255, 151, 0.6); }
}

@media (max-width: 768px) {
  .ee-popup {
    padding: 32px 24px;
    width: 95%;
  }
  .ee-num {
    font-size: 56px;
  }
}

/* Custom cursor integration when Easter Egg is active */
body.ee-active #cursor:not(.magnetic) {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 18px !important;
  height: 18px !important;
  background: #ffffff !important;
  clip-path: polygon(50% 0%, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0% 50%, 45% 45%) !important;
  filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)) !important;
  mix-blend-mode: normal !important;
  border-radius: 0 !important;
  transition: transform 0.1s ease, width .28s ease, height .28s ease, opacity .25s !important;
}

body.ee-active #cursor-halo {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  mix-blend-mode: normal !important;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.15) !important;
}
body.ee-active #cursor-halo.idle-atom {
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.15) !important;
}
body.ee-active #cursor-halo.idle-atom .ring-orbit {
  opacity: 0 !important;
  display: none !important;
}

/* Close button magnetic active override inside Easter Egg overlay */
body.ee-active .ee-close.magnetic-active {
  background: #ffffff !important;
  color: var(--navy) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8) !important;
}

/* Proteção de imagens: impede copiar, salvar ou abrir em nova aba */
img {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* Scroll Reveal System */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in, .reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* — VERTICAL VIDEOS GRID & CARDS (Minha Cabana) — */
.vertical-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto 80px;
  padding: 0 16px;
}
.vertical-video-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0.75;
  transform: scale(0.97);
}
.vertical-videos-grid:hover .vertical-video-card {
  opacity: 0.55;
  transform: scale(0.95);
}
.vertical-videos-grid .vertical-video-card:hover {
  opacity: 1 !important;
  transform: scale(1.03) !important;
  z-index: 5;
}
.vertical-video-card.playing-active {
  opacity: 1;
  transform: scale(1.01);
  border: 1.5px solid var(--pink);
}


/* Seamless Swell Transition */\nhtml.is-swelling body {\n  opacity: 0;\n  overflow: hidden;\n}\nhtml.is-swelling {\n  background-color: #17075c;\n}