#bg-canvas{position:fixed; inset:0; z-index:0}

/* Topbar Socials */
.topbar{position:fixed; top:0; left:0; right:0; z-index:100; height:var(--topbar-h); backdrop-filter: blur(6px); background: rgba(10,12,16,.35); border-bottom:1px solid rgba(255,255,255,.06)}
.topbar .container{display:flex; align-items:center; justify-content:space-between; height:100%}
.topbar-left{display:flex; align-items:center; gap:10px; color:var(--muted)}
.topbar-left .spark{color:var(--accent)}
.topbar-actions{display:flex; align-items:center; gap:10px}
.sbtn{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#e6f1ff; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.sbtn svg{width:20px; height:20px; fill:currentColor}
.sbtn:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(110,243,255,.18)}
.sbtn.discord:hover{border-color:#5865f2; box-shadow:0 10px 24px rgba(88,101,242,.35); color:#8ea0ff}
.sbtn.instagram:hover{border-color:#e1306c; box-shadow:0 10px 24px rgba(225,48,108,.35); color:#ff7aa6}
.sbtn.linkedin:hover{border-color:#0a66c2; box-shadow:0 10px 24px rgba(10,102,194,.35); color:#63b1ff}
.sbtn.whatsapp:hover{border-color:#25d366; box-shadow:0 10px 24px rgba(37,211,102,.35); color:#8af2b6}
@media (max-width:700px){
  .topbar .note{display:none}
}
/* TKDESIGNER styles */
:root{
  --bg:#0b0d10; --fg:#e6e8eb; --muted:#9aa4af; --primary:#6ef3ff; --accent:#ff4d9d; --card:#12151a;
  --topbar-h: 48px;
  --header-h: 64px;
  --content-offset: 0px; /* no extra gap above hero */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0; font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--fg);
  /* Offset for fixed topbar + header */
  padding-top: calc(var(--topbar-h) + var(--header-h) + var(--content-offset));
  /* Animated multi-color gradient + subtle radial glow overlay */
  background:
    radial-gradient(1200px 800px at 70% 10%, rgba(255,255,255,.04), transparent),
    linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
    linear-gradient(120deg, #ff4d9d, #6ef3ff, #8a5cff, #ffd166);
  background-size: auto, auto, 600% 600%;
  background-position: center, center, 0% 50%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
  animation: bodyGrad 18s ease infinite;
  overflow-x:hidden;
}

@keyframes bodyGrad {
  0%   { background-position: center, 0% 50%; }
  50%  { background-position: center, 100% 50%; }
  100% { background-position: center, 0% 50%; }
}
.container{width:min(1200px, 92%); margin:0 auto}

/* Header */
.site-header{position:fixed; top:var(--topbar-h); left:0; right:0; z-index:99; backdrop-filter: blur(10px); background:rgba(10,12,15,.42); border-bottom:1px solid rgba(255,255,255,.06)}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px}
.brand .logo{display:grid; place-items:center; width:90px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#000; font-weight:800}
.brand .name{font-family: Orbitron, sans-serif; letter-spacing:2px; font-weight:800}
.nav a{color:var(--fg); text-decoration:none; margin-left:18px; font-weight:600; opacity:.9}
.nav a:hover{color:var(--primary)}

/* Animated Nav */
.site-header .nav{position:relative; display:flex; gap:14px; align-items:center}
.site-header .nav a{position:relative; display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; color:var(--fg); text-decoration:none}
.site-header .nav a::before{content: attr(data-ico); font-size:14px; filter:grayscale(.3)}
.site-header .nav a:hover{background:rgba(255,255,255,.04)}
.site-header .nav a.active{color:#fff}
.site-header .nav .nav-indicator{position:absolute; bottom:2px; left:0; height:2px; width:0; background:linear-gradient(90deg, var(--primary), var(--accent)); border-radius:2px; transition: all .28s ease; box-shadow:0 6px 14px rgba(110,243,255,.25)}

/* Mobile menu */
.nav-toggle{display:none; position:relative; width:40px; height:40px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); border-radius:10px; cursor:pointer}
.nav-toggle .bar{position:absolute; left:9px; right:9px; height:2px; background:#e6f1ff; border-radius:2px; transition:transform .3s ease, opacity .2s ease}
.nav-toggle .bar:nth-child(1){top:12px}
.nav-toggle .bar:nth-child(2){top:19px}
.nav-toggle .bar:nth-child(3){top:26px}
.nav-toggle.open .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open .bar:nth-child(2){opacity:0}
.nav-toggle.open .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter: blur(2px); opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:15}
.nav-overlay.show{opacity:1; visibility:visible}

@media (max-width: 900px){
  .site-header .container{padding:10px 0}
  .nav-toggle{display:block}
  .site-header .nav{position:fixed; top:calc(var(--topbar-h) + var(--header-h)); right:12px; left:12px; display:flex; flex-direction:column; gap:6px; padding:12px; background:rgba(15,18,23,.96); border:1px solid rgba(255,255,255,.08); border-radius:12px; transform:translateY(-20px) scale(.98); opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease; z-index:20}
  .site-header .nav.open{transform:none; opacity:1; pointer-events:auto}
  .site-header .nav a{margin:0; padding:10px 12px}
  .site-header .nav .nav-indicator{display:none}
}

/* Canvas BG */
#bg-canvas{position:fixed; inset:0; z-index:0}
#fx-canvas{position:fixed; inset:0; z-index:0; pointer-events:none}

/* Mobile lite mode: when body has .mobile-lite, hide heavy canvases and reduce GPU effects */
body.mobile-lite #bg-canvas,
body.mobile-lite #fx-canvas{display:none !important}
body.mobile-lite .topbar{backdrop-filter:none; background: rgba(10,12,16,.65)}
body.mobile-lite .site-header{backdrop-filter:none; background: rgba(10,12,15,.72)}
/* Optional: slightly slower gradient to save a bit of repaint energy */
body.mobile-lite{animation-duration: 22s}

/* Sections */
.section{position:relative; z-index:1; padding:120px 0}
.section-title{font-size:32px; margin:0 0 24px; letter-spacing:1px}

/* Hero */
.hero{padding-top:160px; text-align:center; position:relative; z-index:1; overflow-anchor: none}
.headline{font-size: clamp(36px, 6vw, 74px); line-height:1.1; margin:0 auto 24px; max-width: 14ch; position:relative; min-height:1.2em; overflow-anchor: none}
/* Evita micro saltos de layout durante o typing: reserva altura do subtítulo */
.headline .sub{display:block; font-size: clamp(14px, 2.2vw, 20px); color:var(--muted); margin-top:8px; min-height:1.6em}
/* Cursor e glitch com largura/posicionamento estáveis */
.headline .glitch{vertical-align:baseline}
.typing-cursor{width:1ch; display:inline-block}
.typing-cursor{display:inline-block; width:1ch; margin-left:2px; color:var(--primary); animation: blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

.hero .container{position:relative; isolation:isolate}
.hero-sketch{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:0; opacity:.45; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); mix-blend-mode:screen}
.hero-sketch svg{width:min(980px, 95vw); height:auto}
@media(min-width:1200px){
  .hero-sketch svg{width:1100px}
}
.hero-sketch path{fill:none; stroke:url(#sketchGrad); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray: var(--dash, 420); stroke-dashoffset: var(--dash, 420);}
.hero-sketch .p1{--dash: 520; animation: drawCycle 4.4s ease-in-out infinite; animation-delay:.2s}
.hero-sketch .p2{--dash: 360; animation: drawCycle 4s ease-in-out infinite; animation-delay:.5s}
.hero-sketch .p3{--dash: 280; animation: drawCycle 3.6s ease-in-out infinite; animation-delay:.9s}
@keyframes drawCycle{
  0%{stroke-dashoffset: var(--dash, 420)}
  45%{stroke-dashoffset: 0}
  55%{stroke-dashoffset: 0}
  100%{stroke-dashoffset: var(--dash, 420)}
}

.glitch{position:relative; display:inline-block; font-weight:800; color:var(--fg); text-shadow:0 0 20px rgba(110,243,255,.25)}
.glitch::before,.glitch::after{content:attr(data-text); position:absolute; inset:0; mix-blend-mode:screen; filter:blur(.6px)}
.glitch::before{transform:translate(-2px,-2px); color:var(--primary)}
.glitch::after{transform:translate(2px,2px); color:var(--accent)}
.headline .sub{display:block; font-size:.35em; font-weight:400; color:var(--muted); margin-top:16px}
.cta{display:flex; gap:14px; justify-content:center; align-items:center; margin: clamp(8px, 2vh, 20px) 0 32px; position:relative; z-index:2}
.cta, .cta .btn{mix-blend-mode: normal; opacity:1}
@media(min-width: 992px){
  .cta{margin: clamp(16px, 4vh, 40px) 0 40px}
}
.btn{padding:12px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.18); color:var(--fg); text-decoration:none; font-weight:700; letter-spacing:.5px}
.btn.primary{background:linear-gradient(135deg,var(--primary), var(--accent)); color:#000}
.btn.ghost{background:transparent; border-color:rgba(255,255,255,.24)}
.badges{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; color:var(--muted)}
.scroll-indicator{position:absolute; left:50%; transform:translateX(-50%); bottom:20px; color:var(--muted); font-size:12px}

/* CTA below hero (under 'Deslize') */
.hero-cta-below{position:relative; z-index:5; padding:16px 0 8px; mix-blend-mode:normal}
.hero-cta-below .container{display:flex; justify-content:center}
.hero-cta-below .cta{margin:0; position:relative; z-index:5; mix-blend-mode:normal; isolation:isolate; padding:0; border-radius:0; background:transparent; backdrop-filter:none; border:0; box-shadow:none; opacity:1 !important; visibility:visible !important}
.hero-cta-below .btn{mix-blend-mode:normal; opacity:1 !important; visibility:visible !important; box-shadow:none}
.hero-cta-below .btn.ghost{background:transparent; border-color:rgba(255,255,255,.24)}

/* Cards */
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 40px rgba(0,0,0,.35); border-radius:16px; padding:18px}
.services .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; align-items:stretch}
/* Modelagem visual dos cards de Serviços inspirada nos OT Kits */
.services .card{display:flex; flex-direction:column; gap:8px; height:100%; text-align:center}
.services .card{position:relative; overflow:hidden; transition: transform .22s ease, box-shadow .25s ease, border-color .25s ease; will-change: transform}
.services .card:hover{transform: translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.45), 0 10px 28px rgba(110,243,255,.16); border-color: rgba(110,243,255,.22)}
/* brilho suave por cima ao passar o mouse */
.services .card::before{content:""; position:absolute; inset:-1px; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); opacity:0; transition:opacity .25s ease}
.services .card:hover::before{opacity:.35}
/* glow que sobe de baixo pra cima */
.services .card::after{content:""; position:absolute; left:-20%; width:140%; height:160%; bottom:-80%; pointer-events:none; filter: blur(12px); opacity:0; mix-blend-mode:screen; background: radial-gradient(ellipse at 50% 100%, rgba(110,243,255,.18), rgba(255,77,157,.12) 45%, rgba(0,0,0,0) 60%)}
.services .card:hover::after{opacity:1; animation: riseGlow 1.8s ease-out forwards}
@keyframes riseGlow{0%{transform: translateY(0)} 100%{transform: translateY(-120%)}}
.services .card .icon{width:100%; aspect-ratio:4/3; border-radius:10px; background:linear-gradient(135deg, rgba(110,243,255,.12), rgba(255,77,157,.12)); display:flex; align-items:center; justify-content:center; font-size:42px}
.services .card h3{margin:6px 0 4px; font-size:18px}
.services .card p{margin:0; color:var(--muted); font-size:14px; flex:1}
/* Área de ações centralizada no rodapé do card */
.services .card .card-actions{margin-top:auto; display:flex; justify-content:center; gap:8px}

/* Efeitos mais discretos em mobile */
@media (max-width:640px){
  .services .card:hover{transform:none; box-shadow:0 10px 40px rgba(0,0,0,.35); border-color:rgba(255,255,255,.12)}
  .services .card:hover::before{opacity:.18}
  .services .card::after{display:none}
}

/* Gallery */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.filters .chip{padding:8px 12px; border-radius:999px; background:#0f1217; border:1px solid rgba(255,255,255,.08); cursor:pointer; color:var(--muted)}
.filters .chip.active{background:linear-gradient(135deg,rgba(110,243,255,.12), rgba(255,77,157,.12)); color:var(--fg)}
.gallery{columns: 1; column-gap:16px}
@media(min-width:600px){.gallery{columns:2}}
@media(min-width:900px){.gallery{columns:3}}
.gallery .item{break-inside:avoid; margin-bottom:16px; position:relative; overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:var(--card)}
.gallery .item img{width:100%; display:block; transition:transform .4s ease}
.gallery .item:hover img{transform:scale(1.05)}
.gallery .item .caption{position:absolute; left:0; right:0; bottom:0; padding:10px 12px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.65)); font-weight:600; letter-spacing:.3px}

/* Featured slider */
.featured{position:relative; margin:6px 0 18px}
.featured .slider{overflow:hidden}
.featured .track{display:flex; gap:16px; will-change:transform; transition:transform .6s ease}
.featured .slide{flex:0 0 clamp(260px, 70vw, 420px); border-radius:16px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.08); background:var(--card)}
.featured .slide img{width:100%; height: clamp(160px, 34vw, 260px); object-fit:cover; display:block}
.featured .slide .meta{position:absolute; left:0; right:0; bottom:0; padding:10px 12px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.7)); font-weight:700}
.featured .nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.12); color:#fff; width:36px; height:36px; border-radius:50%; cursor:pointer; display:grid; place-items:center; z-index:2}
.featured .nav.prev{left:-4px}
.featured .nav.next{right:-4px}

/* Clients */
.clients-logos{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:18px; align-items:center}
.clients-logos .logo{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); border-radius:14px; height:84px; display:flex; align-items:center; justify-content:center; padding:10px; filter:grayscale(.35); opacity:.9; transition:transform .25s ease, filter .25s ease, opacity .25s ease, box-shadow .25s ease, border-color .25s ease}
.clients-logos .logo img{max-width:100%; max-height:56px}
.clients-logos .logo:hover{filter:none; opacity:1; transform:translateY(-2px) scale(1.03); box-shadow:0 10px 26px rgba(110,243,255,.12), 0 6px 18px rgba(255,77,157,.08); border-color:rgba(110,243,255,.35)}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; flex-direction:column; gap:10px; z-index:50}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw; max-height:80vh; border-radius:10px}
.lightbox-close{position:absolute; top:20px; right:20px; font-size:32px; background:transparent; color:#fff; border:0; cursor:pointer}
.lightbox-caption{color:var(--muted)}

/* Lightbox navigation */
.lightbox .lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.35); color:#fff; cursor:pointer; font-size:28px; line-height:1; z-index:2}
.lightbox .lightbox-nav.prev{left:16px}
.lightbox .lightbox-nav.next{right:16px}
.lightbox .lightbox-nav:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35)}
.lightbox-counter{position:absolute; bottom:16px; right:20px; color:#e6f1ff; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.16); padding:6px 10px; border-radius:10px; font-size:13px}

@media (max-width:640px){
  .lightbox .lightbox-nav{width:36px; height:36px; font-size:24px}
  .lightbox-counter{bottom:10px; right:12px; font-size:12px; padding:5px 8px}
}

/* Downloads */
.downloads-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.downloads-list .dcard{display:flex; flex-direction:column; gap:8px; padding:12px}
.downloads-list .dcard .btn{align-self:flex-end}
.downloads-list .dcard .thumb{width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:#0f1217}
.downloads-list .dcard .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.downloads-list .badges{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 4px}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:rgba(110,243,255,.12); color:#b9faff; border:1px solid rgba(110,243,255,.25)}

/* Fade-up reveal */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* OT Kits */
.kits-list{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px}
.kcard{display:flex; flex-direction:column; gap:8px; padding:12px}
.kcard .icon{width:100%; aspect-ratio:4/3; border-radius:10px; background:linear-gradient(135deg, rgba(110,243,255,.12), rgba(255,77,157,.12)); display:flex; align-items:center; justify-content:center; font-size:42px}
.kcard h3{margin:6px 0 4px; font-size:16px}
.kcard p{margin:0; color:var(--muted); font-size:13px}

/* Server Status widget */
.status-widget{display:flex; flex-direction:column; gap:8px; padding:14px}
.status-header{display:flex; align-items:center; justify-content:space-between}
.status-name{font-weight:700}
.status-dot{width:10px; height:10px; border-radius:50%; background:#ff6b6b; box-shadow:0 0 0 0 rgba(255,107,107,.4);}
.status-dot.on{background:#2ee59d; box-shadow:0 0 0 0 rgba(46,229,157,.4);}
.status-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.status-cell{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:8px; padding:10px; text-align:center}
.status-label{display:block; font-size:12px; color:var(--muted)}
.status-value{display:block; font-size:16px; font-weight:700}

/* Testimonials */
.testimonials-list{display:grid; grid-auto-flow:column; grid-auto-columns: min(360px, 90%); gap:16px; overflow-x:auto; padding:0 4px 10px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.testimonials-list .tcard{scroll-snap-align:start}
.tcard{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.18); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.tcard:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.24); border-color:rgba(255,255,255,.12)}
.tcard .who{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.tcard .avatar{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--primary))}
.tcard .name{font-weight:700}
.tcard .company{color:var(--muted); font-size:12px}

/* Hide horizontal scrollbar aesthetics */
.testimonials-list::-webkit-scrollbar{height:0}
.testimonials-list{scrollbar-width:none}

/* Mobile tweaks */
@media (max-width: 640px){
  /* Stack cards vertically on small screens */
  .downloads-list{grid-template-columns:1fr}
  .kits-list{grid-template-columns:1fr}
  /* Downloads card tweaks */
  .downloads-list .dcard{padding:10px; gap:6px}
  .downloads-list .dcard .thumb{border-radius:8px}
  .downloads-list .dcard h3{font-size:15px}
  .downloads-list .dcard p{font-size:13px}
  .downloads-list .dcard .btn{padding:8px 10px; font-size:13px}
  /* Kits card tweaks */
  .kits-list .kcard{padding:10px; gap:6px}
  .kits-list .kcard .icon{font-size:36px; border-radius:8px}
  .kits-list .kcard h3{font-size:15px}
  .kits-list .kcard p{font-size:13px}
  .testimonials .section-title{margin-bottom:16px}
  /* Make testimonials vertical instead of horizontal to avoid clipping */
  .testimonials-list{display:flex; flex-direction:column; gap:12px; padding:0}
  .testimonials-list .tcard{width:100%}
  .tcard{padding:12px}
  .tcard .who{gap:8px; margin-bottom:6px}
  .tcard .avatar{width:32px; height:32px}
  .tcard p{font-size:14px; line-height:1.5; word-wrap:break-word; overflow-wrap:break-word}
}

/* Forms */
.form .row{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:12px}
@media(min-width:700px){.form .row{grid-template-columns:1fr 1fr}}
input, select, textarea{width:100%; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.06); color:var(--fg); border:1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 2px rgba(0,0,0,.25)}
input::placeholder, textarea::placeholder{color:rgba(230,232,235,.6)}
input:focus, select:focus, textarea:focus{outline:none; border-color:rgba(110,243,255,.45); box-shadow:0 0 0 3px rgba(110,243,255,.15), inset 0 1px 2px rgba(0,0,0,.25)}
textarea{min-height:120px}
.form-status{margin-top:10px; color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:28px 0; color:var(--muted)}
.site-footer .container{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}

/* Socials */
.socials{display:flex; gap:12px; margin-top:22px}
.socials a{color:var(--fg); text-decoration:none; padding:10px 12px; background:#0f1217; border-radius:10px; border:1px solid rgba(255,255,255,.08)}
.socials a:hover{color:var(--primary); border-color:rgba(110,243,255,.3)}

/* Back to Top button */
.back-to-top{position:fixed; right:18px; bottom:18px; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#e6f1ff; box-shadow:0 8px 24px rgba(0,0,0,.25); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease, box-shadow .2s ease, border-color .2s ease; z-index:90}
.back-to-top svg{width:22px; height:22px}
.back-to-top:hover{border-color:rgba(110,243,255,.45); box-shadow:0 12px 30px rgba(110,243,255,.18), 0 8px 20px rgba(255,77,157,.12)}
.back-to-top.show{opacity:1; visibility:visible; transform:none}

/* Floating Chat */
.chat-launcher{position:fixed; right:74px; bottom:12px; width:260px; height:56px; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(135deg, rgba(110,243,255,.22), rgba(255,77,157,.18)); color:#e6f1ff; box-shadow:0 10px 28px rgba(0,0,0,.35); cursor:pointer; z-index:98; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .2s ease, visibility .2s ease}
.chat-launcher:hover{transform:translateY(-2px); border-color:rgba(110,243,255,.35); box-shadow:0 14px 38px rgba(110,243,255,.18), 0 10px 26px rgba(255,77,157,.12)}
.chat-launcher .ico svg{width:22px; height:22px; display:block}
.chat-launcher .txt{font-weight:600}
.chat-launcher.hidden{opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px)}

.chat-widget{position:fixed; right:18px; bottom:78px; width:360px; max-width:92vw; height:560px; max-height:80vh; display:flex; flex-direction:column; background:#0f1217; border:1px solid rgba(255,255,255,.12); border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45); z-index:99; transform: translateY(20px) scale(.98); opacity:0; visibility:hidden; transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s}
.chat-widget.show{opacity:1; visibility:visible; transform:none; transition-delay:0s}
.chat-header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; background:linear-gradient(180deg, rgba(110,243,255,.14), rgba(255,77,157,.08)); border-bottom:1px solid rgba(255,255,255,.08)}
.chat-header .agent{display:flex; align-items:center; gap:10px}
.chat-header .avatar{width:34px; height:34px; display:grid; place-items:center; background:#12151a; border:1px solid rgba(255,255,255,.12); border-radius:10px}
.chat-header .meta small{color:var(--muted)}
.chat-close{background:transparent; border:0; color:#e6f1ff; font-size:22px; width:34px; height:34px; border-radius:10px; cursor:pointer}
.chat-close:hover{background:rgba(255,255,255,.06)}

.chat-body{flex:1; padding:12px; overflow:auto; display:flex; flex-direction:column; gap:8px; background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.msg{max-width:80%; padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:#12151a; font-size:14px}
.msg.bot{align-self:flex-start; background:rgba(110,243,255,.08); border-color:rgba(110,243,255,.18)}
.msg.user{align-self:flex-end; background:rgba(255,255,255,.06)}

.chat-form{display:grid; grid-template-columns:1fr; gap:8px; padding:12px; border-top:1px solid rgba(255,255,255,.08); background:#0f1217}
.chat-form input[type="text"], .chat-form input[type="email"], .chat-form textarea{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px 12px}
.chat-form textarea{min-height:80px}
.chat-form .btn{justify-self:end}

/* WhatsApp CTA */
.btn.btn-wpp{display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#04280f; border:1px solid #1eb255; border-radius:10px; padding:8px 12px; font-weight:600; font-size:14px; box-shadow:0 6px 12px rgba(37,211,102,.22)}
.btn.btn-wpp:hover{background:#1eb255; border-color:#179948; box-shadow:0 8px 16px rgba(37,211,102,.28)}
.btn.btn-wpp .ico{display:inline-flex}
.btn.btn-wpp .ico svg{width:16px; height:16px}
.btn.btn-wpp .txt{line-height:1}

@media (max-width: 480px){
  .chat-launcher{left:10px; right:10px; bottom:10px; width:auto; height:54px}
  .chat-widget{right:0; left:0; margin:0 auto; bottom:70px; width:100%; max-width:100%; height:80vh; border-radius:16px 16px 0 0}
}

/* Side character with speech bubble */
.character-container {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding: 0;
  margin: 0;
}

.character-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
}

.side-character {
  height: 400px; /* Aumentado de 350px */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.35)) drop-shadow(0 6px 16px rgba(110,243,255,.12));
  opacity: 0.95;
  transition: all 0.3s ease;
  pointer-events: auto;
  margin: 0;
  padding: 0;
}

.side-character:hover {
  transform: none;
  cursor: pointer;
}

.speech-bubble {
  position: absolute;
  left: 400px; /* Ajustado para ficar ao lado da imagem */
  bottom: 150px; /* Posicionado mais acima */
  background: #1a1e26;
  border: 1px solid #6ef3ff;
  border-radius: 12px;
  padding: 16px 20px;
  width: 280px; /* Largura fixa maior */
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.character-wrapper:hover .speech-bubble {
  opacity: 1;
  transform: translateX(0);
}

.speech-bubble::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 16px solid #6ef3ff;
}

.bubble-text {
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}

@media (max-width: 1100px) {
  .side-character {
    height: 320px;
  }
  .speech-bubble {
    left: 320px;
    bottom: 120px;
    width: 240px;
    padding: 14px 16px;
    font-size: 14px;
  }
}

@media (max-width: 900px) {
  .character-container {
    display: none;
  }
}