/* Bullish Light: a mesma fonte do texto da logo */
@font-face{font-family:Bullish;src:url('assets/fonts/bullish-light.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}

/* Cabeçalho — pílula de vidro escuro flutuante (mesmo estilo do site A'Solary) */
.site-header{position:absolute;inset:1.75rem 0 auto;z-index:60;background:none;pointer-events:none}
.header-inner{position:relative;z-index:2;max-width:1360px;width:calc(100% - var(--gutter) * 2);margin-inline:auto;pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:72px;padding:0 .75rem 0 1.5rem;
  background:rgba(10,8,16,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(246,245,248,.12);border-radius:999px}
.site-header .brand-crop{width:170px;background:none}
.desktop-nav{position:static;transform:none;margin:0;gap:2.1rem}
.desktop-nav a{font-size:.9375rem;color:rgba(246,245,248,.85);position:relative;padding-block:.5rem;transition:color .25s cubic-bezier(.16,1,.3,1)}
.desktop-nav a:hover{color:var(--lilac)}
.header-cta{display:inline-flex;align-items:center;gap:.65rem;margin:0;padding:.7rem 1.35rem;border:0;border-radius:999px;
  background:var(--lilac);color:#0c0914;font-size:.9rem;font-weight:600;white-space:nowrap;cursor:pointer;
  transition:background .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1)}
.header-cta:hover{background:#d6cbf8;transform:translateY(-2px)}
.header-cta .arw{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.header-cta:hover .arw{transform:translateX(4px)}
.header-cta .chat-ico{display:none;width:20px;height:20px}
.site-header .menu-toggle{display:none;width:44px;height:44px;padding:0;border-radius:999px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.site-header .menu-toggle span{display:block;width:20px;height:1.5px;background:var(--text);transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.header-right{display:flex;align-items:center;gap:.5rem}

/* menu mobile em tela cheia */
.site-header .mobile-nav{position:fixed;inset:0;z-index:1;pointer-events:auto;display:flex;flex-direction:column;justify-content:center;gap:.5rem;
  margin:0;padding:var(--gutter);border:0;border-radius:0;background:rgba(7,5,12,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transition:opacity .35s cubic-bezier(.16,1,.3,1),visibility .35s}
.site-header .mobile-nav.is-open{opacity:1;visibility:visible}
.site-header .mobile-nav a{width:auto;font-size:2rem;font-weight:300;padding:.6rem 0;border-bottom:1px solid rgba(246,245,248,.08);color:var(--text)}
.site-header .mobile-nav .mobile-cta{display:inline-flex;align-items:center;gap:.65rem;width:auto;align-self:flex-start;margin-top:2rem;padding:1.05rem 2.1rem;
  border-radius:999px;background:var(--lilac);color:#0c0914;font-size:1rem;font-weight:600}

@media(max-width:1024px){
  .desktop-nav{display:none}
  .site-header .menu-toggle{display:flex}
}
@media(max-width:768px){
  .site-header{inset:.75rem 0 auto}
  .header-inner{height:62px;padding:0 .6rem 0 1.1rem;gap:.75rem}
  .header-cta{display:inline-flex}
  .site-header .brand-crop{width:150px}
}
/* abaixo de 560px o rótulo não cabe: o botão vira ícone e o CTA por extenso fica no menu */
@media(max-width:560px){
  .header-inner{padding:0 .5rem 0 .9rem;gap:.4rem}
  .header-cta{padding:0;width:44px;height:44px;justify-content:center}
  .header-cta .lbl,.header-cta .arw{display:none}
  .header-cta .chat-ico{display:block}
  .site-header .brand-crop{width:140px}
}

/* Hero — fileira de tiles de vidro; uma mão toca o símbolo da Status, que acende (ideia de escolha) */
.sx{--tile:clamp(132px,13.5vw,224px);--gap:clamp(22px,3vw,52px);--row-y:38%;--loop:5.5s;
  position:relative;height:100svh;min-height:760px;max-height:1100px;overflow:hidden;background:#07050c;isolation:isolate}

/* fundo: escuro com roxo vazando pelas bordas, como na referência */
.sx-glow{position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(ellipse 34% 30% at 50% var(--row-y),#5b3fc440,transparent 70%),
    radial-gradient(ellipse 45% 60% at 0% 0%,#5a2bb066,transparent 70%),
    radial-gradient(ellipse 45% 60% at 100% 70%,#4a24a055,transparent 70%),
    linear-gradient(180deg,#0b0713,#07050c 60%,#050409)}
.sx-glow::after{content:"";position:absolute;inset:0;background: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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");opacity:.08;mix-blend-mode:overlay}


/* fileira de tiles: centrada no símbolo; as pontas somem nas laterais */
.sx-row{position:absolute;left:50%;top:var(--row-y);width:calc(var(--tile) * 7 + var(--gap) * 6);display:flex;align-items:center;gap:var(--gap);padding:160px 0;perspective:1100px;transform:translate(-50%,-50%);
  -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 22%,#000 78%,transparent 98%);mask-image:linear-gradient(90deg,transparent 2%,#000 22%,#000 78%,transparent 98%)}
.sx-tile{position:relative;flex:0 0 var(--tile);width:var(--tile);height:var(--tile);border-radius:24%;display:grid;place-items:center;
  background:linear-gradient(155deg,#ffffff14,#ffffff03 55%),#120c1f80;border:1px solid #a58bff38;
  box-shadow:inset 0 1px 0 #ffffff1f,inset 0 0 30px #7a5cf014,0 24px 60px #0008;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;animation:sx-tile-in 1.2s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards;transition:border-color .4s,box-shadow .4s}
.sx-tile svg{width:44%;fill:none;stroke:#b9a8f1;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.32;transition:opacity .4s}
.sx-tile:not(.sx-main):hover{border-color:#a58bff70}
.sx-tile:not(.sx-main):hover svg{opacity:.6}
.sx-tile.mid{--d:.35s;--s:.9;--r:14deg;--b:0px}.sx-tile.near{--d:.5s;--s:.8;--r:24deg;--b:1.2px}.sx-tile.far{--d:.65s;--s:.7;--r:32deg;--b:2.5px}
.sx-tile.mid,.sx-tile.near,.sx-tile.far{filter:blur(var(--b))}
.sx-row>.sx-tile:nth-child(-n+3){--dir:1}.sx-row>.sx-tile:nth-child(n+5){--dir:-1}

/* tile central: acende quando o dedo toca */
.sx-main{--d:.15s;z-index:1;border-color:#c9b6ff70;
  animation:sx-tile-in 1.2s cubic-bezier(.16,1,.3,1) .15s forwards,sx-press var(--loop) ease-in-out 1.5s infinite}
/* símbolo: cópia cinza embaixo e colorida por cima; só a opacidade anima (o Safari iOS não interpola filtros diferentes) */
.sx-sym{position:relative;display:block;width:52%}
.sx-sym img{display:block;width:100%;height:auto}
.sx-sym-off{filter:grayscale(1) brightness(.45);opacity:.6}
.sx-sym-on{position:absolute;inset:0;filter:drop-shadow(0 0 18px #8b6cf0aa);opacity:0;animation:sx-lit .9s ease-out 2.05s forwards}
.sx-main::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px #e2d8ff,0 0 40px #8b6cf0aa,0 0 120px #6c4fd666,inset 0 0 40px #8b6cf055;
  animation:sx-lit .9s ease-out 2.05s forwards}
.sx-ripple{position:absolute;inset:0;border-radius:inherit;border:1px solid #d9ccff;opacity:0;pointer-events:none;
  animation:sx-ripple var(--loop) ease-out 1.5s infinite}

/* mão: sobe, toca a base do tile central e repete o toque de tempos em tempos */
.sx-hand{position:absolute;left:50%;top:calc(var(--row-y) + var(--tile) / 2 - var(--tile) * .2);width:calc(var(--tile) * 2.4);
  transform:translate(-50.4%,0);opacity:0;animation:sx-hand-in 1.3s cubic-bezier(.16,1,.3,1) .3s forwards;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 34%,transparent 80%);mask-image:linear-gradient(#000 34%,transparent 80%)}
.sx-hand-tap{position:relative;transform:translateY(8px);animation:sx-tap var(--loop) cubic-bezier(.45,0,.2,1) 1.5s infinite}
.sx-hand-img{display:block;width:100%;height:auto;opacity:calc(.9 * var(--fade,1));filter:brightness(.82) contrast(1.05)}
/* luz do símbolo aceso caindo sobre a ponta do dedo, recortada no formato da mão */
.sx-hand-tap::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:calc(.9 * var(--fade,1));
  background:radial-gradient(ellipse 22% 16% at 50.4% 4%,#cdb8ff99,#8b6cf033 55%,transparent 100%);
  -webkit-mask:url("assets/img/mao.webp") center/100% 100% no-repeat;mask:url("assets/img/mao.webp") center/100% 100% no-repeat}

/* camadas do parallax (hero.js) */
.sx-glow,.sx-row,.sx-title,.sx-hand{will-change:translate}
.sx-title>*{opacity:var(--fade,1)}

/* nome sobre a mão */
.sx-title{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(var(--row-y) + var(--tile) / 2 + clamp(70px,13vh,150px));text-align:center;z-index:2}
.sx-title h1{margin:0;font-family:Bullish,Open Sans,sans-serif;font-size:clamp(46px,8.4vw,156px);font-weight:400;line-height:1.3;padding:.04em 0 .2em;letter-spacing:0;
  background:linear-gradient(180deg,#fff 35%,#cfc6e2 70%,#8f86a6);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 8px 30px #000c)}
.sx-sub{margin:18px 0 0;font-size:clamp(17px,1.6vw,24px);font-weight:300;letter-spacing:.01em;color:#e7e2f2;text-shadow:0 2px 20px #000}
.sx-sub em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:1.45em;letter-spacing:0;color:#a88dff}
.sx-line{margin:14px auto 0;max-width:420px;font-size:12px;line-height:1.6;letter-spacing:.02em;color:#a9a2b9;text-shadow:0 2px 16px #000}

/* detalhes editoriais que quebram a simetria */


/* entrada */
.sx-in{opacity:0;animation:sx-rise 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards}

@keyframes sx-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes sx-tile-in{from{opacity:0;transform:translateY(26px) scale(calc(var(--s,1) * .94)) rotateY(calc(var(--r,0deg) * var(--dir,0)))}to{opacity:1;transform:scale(var(--s,1)) rotateY(calc(var(--r,0deg) * var(--dir,0)))}}
@keyframes sx-hand-in{from{opacity:0;transform:translate(-50.4%,40%)}to{opacity:1;transform:translate(-50.4%,0)}}
/* toque em ~10% do ciclo: dedo sobe, tile afunda e solta uma onda */
@keyframes sx-tap{0%,100%{transform:translateY(8px)}9%,12%{transform:translateY(-4px)}24%{transform:translateY(8px)}}
@keyframes sx-press{0%,8%,100%{transform:none}11%{transform:scale(.965)}20%{transform:none}}
@keyframes sx-ripple{0%,9%{opacity:0;transform:scale(1)}11%{opacity:.85;transform:scale(1)}40%,100%{opacity:0;transform:scale(1.45)}}
@keyframes sx-lit{to{opacity:1}}

@media(max-width:1100px){
  .sx{--row-y:36%}
}

@media(max-width:760px){
  .sx{--tile:34vw;--gap:18px;--row-y:34%;min-height:640px;max-height:none}
    .sx-row{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
  .sx-title{top:calc(var(--row-y) + var(--tile) / 2 + 80px);left:16px;right:16px}
  .sx-title h1{font-size:clamp(36px,11.5vw,64px)}
    .sx-line{font-size:12px;max-width:300px}
}
/* toque: sem vidro desfocado nem blur (pesados na GPU do celular e causam travadas na rolagem) */
@media(pointer:coarse),(max-width:760px){
  .header-inner{background:rgba(12,9,20,.88);backdrop-filter:none;-webkit-backdrop-filter:none}
  .site-header .mobile-nav{backdrop-filter:none;-webkit-backdrop-filter:none}
  .sx-tile{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(155deg,#ffffff14,#ffffff03 55%),#140e22}
  .sx-tile.mid,.sx-tile.near,.sx-tile.far{filter:none}
  .sx-glow,.sx-row,.sx-title,.sx-hand{will-change:auto}
  /* Safari iOS: camadas 3D/mascaradas podem ser pintadas por cima do cabeçalho ignorando o z-index.
     Sem 3D no toque, fileira sem a folga que subia até o topo e cabeçalho promovido à própria camada */
  .sx-row{perspective:none;padding:70px 0}
  .sx-tile{--r:0deg}
  .header-inner{transform:translateZ(0);-webkit-transform:translateZ(0)}
}


@media(prefers-reduced-motion:reduce){
  .sx-tile,.sx-main,.sx-sym-on,.sx-main::after,.sx-ripple,.sx-hand,.sx-hand-tap,.sx-in{animation:none!important}
  .sx-tile,.sx-hand,.sx-in,.sx-main::after{opacity:1}
  .sx-tile{transform:scale(var(--s,1)) rotateY(calc(var(--r,0deg) * var(--dir,0)))}
  .sx-hand-tap{transform:none}
  .sx-sym-on{opacity:1}
}