/* ==============================
   StayFlow — Landing (index.html)
   Extraído dos 9 blocos <style> inline de index.html, na mesma
   ordem em que apareciam no HTML (a ordem é significativa: a
   cascata deste arquivo depende dela). Requer tokens.css e
   reset.css carregados antes deste arquivo.

   Nota: os blocos abaixo têm bastante !important e algumas
   redefinições em cascata (mesmo padrão descrito no pedido
   original, só que aqui em vez de legacy.css). Optei por
   preservar o comportamento visual atual tal como está —
   reescrever as 9 camadas numa única definição por seletor exige
   verificação visual em navegador real, o que não fiz aqui. A
   única mudança de comportamento intencional é o fix do
   .hero-logo no final do arquivo (bug de mobile confirmado) e a
   remoção do --blue/--blue2 divergente (token de cor oficial
   definido em tokens.css, ver plano aprovado).
   ============================== */

:root{
  --panel:#07111d;
  --panel2:#0b1726;
  --line:#172b45;
  --radius:26px;
  --shadow:0 30px 90px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 75% -10%, rgba(11,132,255,.28), transparent 34%),
    radial-gradient(circle at 12% 22%, rgba(35,210,255,.10), transparent 28%),
    radial-gradient(circle at 92% 78%, rgba(11,132,255,.16), transparent 32%),
    linear-gradient(135deg,#02050a 0%,#06101b 48%,#03070d 100%);
  color:var(--text);
  font-family:Inter,"SF Pro Display","Segoe UI",Arial,Helvetica,sans-serif;
  letter-spacing:-.018em;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 72% 0%,black,transparent 70%);
}
button,a{transition:.2s ease}
button{font:inherit}
.container{
  width:min(1240px, calc(100% - 44px));
  margin:auto;
  position:relative;
  z-index:1;
}

/* NAV */
.navbar{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1240px, calc(100% - 44px));
  z-index:1000;
  background:transparent;
  backdrop-filter:blur(18px);
  border:none;
  border-radius:0;
  margin-top:14px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2px;
  padding:28px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:24px;
  min-width:max-content;
}
.brand img{
  width:128px;
  height:128px;
  object-fit:contain;
  transform:scale(1.85);
  transform-origin:center;
  margin-right:18px;
  filter:drop-shadow(0 14px 30px rgba(11,132,255,.48));
}
.brand-word{
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  font-size:27px;
  line-height:1;
  font-weight:700;
  letter-spacing:-1.15px;
  background:linear-gradient(180deg,#fff 0%,#dce9fb 62%,#8fa3bd 100%);
  -webkit-background-clip:text;
  color:transparent;
}
.brand-word span{
  background:linear-gradient(100deg,var(--blue),var(--blue2));
  -webkit-background-clip:text;
  color:transparent;
}
.nav-links{
  display:flex;
  gap:8px;
  padding:7px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  border-radius:999px;
  backdrop-filter:blur(16px);
}
.nav-links a{
  color:#aab6c8;
  font-size:14px;
  font-weight:720;
  padding:9px 14px;
  border-radius:999px;
  white-space:nowrap;
}
.nav-links a:hover{color:white;background:rgba(255,255,255,.07)}
.nav-actions{display:flex;align-items:center;gap:10px;min-width:max-content}
.login-btn,.demo-btn,.lang-current{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  min-height:46px;
  padding:0 17px;
  font-weight:850;
  font-size:14px;
  white-space:nowrap;
}
.login-btn{
  color:white;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.055);
}
.login-btn:hover{background:rgba(255,255,255,.09);transform:translateY(-1px)}
.demo-btn{
  color:white;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,#0f8bff,#056ee7);
  box-shadow:0 18px 38px rgba(11,132,255,.27);
}
.demo-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.lang-select{position:relative;z-index:10}
.lang-current{
  gap:7px;
  color:#dce9fb;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.055);
  cursor:pointer;
}
.lang-current:hover{background:rgba(255,255,255,.09)}
.lang-current::after{content:"⌄";font-size:13px;color:#8da1b9;transform:translateY(-1px)}
.lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:94px;
  display:none;
  padding:6px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(6,16,27,.96);
  box-shadow:0 18px 48px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
}
.lang-select.open .lang-menu{display:grid;gap:4px;animation:menuIn .16s ease}
@keyframes menuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.lang-option{
  border:0;
  background:transparent;
  color:#aab6c8;
  border-radius:11px;
  padding:9px 10px;
  cursor:pointer;
  text-align:left;
  font-weight:850;
}
.lang-option:hover,.lang-option.active{color:white;background:rgba(11,132,255,.18)}

/* HERO */
.hero{
  padding-top:150px;

  display:grid;
  grid-template-columns:minmax(0,1fr) 550px;
  gap:64px;
  align-items:center;
  min-height:calc(100vh - 116px);
  padding:34px 0 82px;
}
.hero-content{padding-top:10px}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(38,224,160,.20);
  background:rgba(38,224,160,.08);
  color:#7df2c2;
  font-size:13px;
  font-weight:850;
  margin-bottom:24px;
}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--green);border-radius:999px;box-shadow:0 0 16px var(--green)}
.hero-logo{
  width:360px;
  height:360px;
  object-fit:contain;
  transform:scale(1.55);
  transform-origin:left center;
  margin:12px 0 54px 42px;
  filter:drop-shadow(0 22px 52px rgba(11,132,255,.62));
}
h1{
  font-size:clamp(48px, 5.25vw, 78px);
  line-height:.98;
  letter-spacing:-3.3px;
  font-weight:950;
  margin-bottom:22px;
}
.gradient-text{background:linear-gradient(100deg,#ffffff 0%,#d9e9ff 45%,#23d2ff 100%);-webkit-background-clip:text;color:transparent}
.hero-text{max-width:610px;color:#a9b6c8;font-size:18.5px;line-height:1.68}
.hero-text strong{color:#f6fbff}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px}
.cta-primary,.cta-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:56px;
  padding:0 26px;
  border-radius:17px;
  font-weight:900;
  font-size:15px;
}
.cta-primary{background:linear-gradient(180deg,#0f8bff,#056ee7);color:white;border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 48px rgba(11,132,255,.28)}
.cta-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.cta-secondary{background:rgba(255,255,255,.055);color:white;border:1px solid rgba(255,255,255,.12)}
.cta-secondary:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.trust-pill{color:#9aa8bb;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);border-radius:999px;padding:8px 11px;font-size:13px;font-weight:750}

/* MOCKUP */
.product-preview{position:relative}
.product-preview::before{content:"";position:absolute;inset:38px -20px -20px 36px;background:rgba(11,132,255,.20);filter:blur(64px);border-radius:999px;z-index:-1}
.dashboard{
  background:linear-gradient(180deg,rgba(14,28,47,.96),rgba(5,12,22,.96));
  border:1px solid rgba(39,70,109,.72);
  border-radius:30px;
  padding:20px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
.dashboard-top{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 18px;border-bottom:1px solid rgba(255,255,255,.09)}
.dashboard-title{display:flex;align-items:center;gap:11px;font-weight:900}
.dashboard-title img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 9px 19px rgba(11,132,255,.50))}
.live{display:inline-flex;align-items:center;gap:7px;color:#6ff0bd;font-size:13px;font-weight:850}
.live::before{content:"";width:7px;height:7px;background:var(--green);border-radius:999px;box-shadow:0 0 15px var(--green)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.stat{min-height:114px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:18px}
.stat-number{font-size:28px;font-weight:950;color:#eaf4ff;letter-spacing:-1px}.stat-number.blue{color:#42b5ff}.stat-number.green{color:#43e5ad}.stat-number.purple{color:#b28cff}
.stat-label{color:#96a5ba;font-size:13px;margin-top:7px;line-height:1.45}
.ai-brief{margin-top:14px;padding:18px;border:1px solid rgba(11,132,255,.20);background:radial-gradient(circle at 90% -20%,rgba(11,132,255,.23),transparent 45%),rgba(11,132,255,.07);border-radius:20px}
.ai-brief h3{font-size:15px;margin-bottom:9px}.ai-brief p{color:#a9b6c8;font-size:13px;line-height:1.55}
.messages{margin-top:14px;background:rgba(2,8,18,.55);border-radius:20px;padding:16px;border:1px solid rgba(255,255,255,.08)}
.messages h3{font-size:15px;margin-bottom:9px}.message{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#dbe7f6;font-size:14px}.message:last-child{border-bottom:0}.message-status{color:#42b5ff;font-weight:850}

/* SECTIONS */
.section{padding:82px 0}
.section-head{display:flex;justify-content:space-between;gap:34px;align-items:end;margin-bottom:28px}
.section-kicker{color:#52baff;font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.section h2{font-size:clamp(32px,4vw,54px);line-height:1.05;letter-spacing:-2px;max-width:760px}.section-head p{max-width:460px;color:#a9b6c8;font-size:17px;line-height:1.65}
.cards,.steps,.command{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card,.step,.command-panel,.final-cta{background:linear-gradient(180deg,rgba(12,24,40,.88),rgba(6,16,27,.88));border:1px solid rgba(39,70,109,.58);border-radius:var(--radius);box-shadow:0 18px 58px rgba(0,0,0,.32);position:relative;overflow:hidden}.card,.step,.command-panel{padding:26px}.card::before,.step::before,.command-panel::before,.final-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 44%);pointer-events:none}.card:hover,.step:hover{transform:translateY(-4px);border-color:rgba(11,132,255,.50);box-shadow:0 26px 80px rgba(11,132,255,.12)}.icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;color:#68bdff;background:rgba(11,132,255,.13);border:1px solid rgba(11,132,255,.22);margin-bottom:18px}.icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.card h3,.step h3,.command-panel h3{font-size:20px;margin-bottom:10px}.card p,.step p,.command-panel p{color:#a9b6c8;line-height:1.65}.command{grid-template-columns:1.1fr .9fr}.command-panel.large{grid-row:span 2}.checklist{display:grid;gap:12px;margin-top:22px}.check{display:flex;gap:10px;align-items:flex-start;color:#dbe7f6}.check::before{content:"";width:18px;height:18px;flex:0 0 18px;margin-top:2px;border-radius:50%;background:linear-gradient(180deg,var(--green),#0dbf7b);box-shadow:0 0 18px rgba(38,224,160,.34)}.step-number{font-size:13px;color:#7bc2ff;font-weight:950;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}.final-cta{text-align:center;padding:58px 32px;background:radial-gradient(circle at top right,rgba(11,132,255,.28),transparent 42%),linear-gradient(180deg,rgba(12,24,40,.92),rgba(6,16,27,.92))}.final-cta h2{margin:auto auto 14px}.final-cta p{max-width:650px;margin:auto;color:#a9b6c8;font-size:18px;line-height:1.65}.final-cta .cta-primary{margin-top:28px}

/* FOOTER */
.footer{display:flex;justify-content:space-between;gap:22px;align-items:center;padding:34px 0 46px;border-top:1px solid rgba(255,255,255,.08);color:#74839a;font-size:14px}.footer-brand{display:flex;align-items:center;gap:10px;color:#d8e6f6;font-weight:850}.footer-brand img{width:36px;height:36px;object-fit:contain}.socials{display:flex;gap:10px}.socials a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);font-weight:900}.socials a:hover{background:rgba(11,132,255,.16);border-color:rgba(11,132,255,.35)}
.whatsapp{position:fixed;right:24px;bottom:24px;width:64px;height:64px;border-radius:50%;background:linear-gradient(180deg,#25D366,#18ad50);display:grid;place-items:center;color:white;z-index:50;box-shadow:0 18px 42px rgba(37,211,102,.35)}.whatsapp svg{width:30px;height:30px;fill:currentColor}

/* RESPONSIVE */
@media(max-width:1120px){.hero{
  padding-top:150px;
grid-template-columns:1fr;min-height:auto;padding-top:30px}.product-preview{max-width:590px;margin:auto;width:100%}.section-head{display:block}.section-head p{margin-top:14px}.cards,.steps,.command{grid-template-columns:1fr 1fr}.nav-links{gap:4px}.nav-links a{padding:9px 10px}}
@media(max-width:820px){.container{width:min(100% - 28px, 1240px)}.navbar{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1240px, calc(100% - 44px));
  z-index:1000;
  background:transparent;
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  margin-top:14px;
flex-wrap:wrap}.nav-links{order:3;width:100%;justify-content:center;overflow:auto}.nav-actions{margin-left:auto}.brand img{width:58px;height:58px;transform:scale(1.55);margin-right:12px}.brand-word{font-size:24px}.hero-logo{width:150px;height:150px;transform:scale(1.35);margin-left:22px;margin-bottom:38px}.hero-text{font-size:18px}.cards,.steps,.command,.stats{grid-template-columns:1fr}.final-cta{padding:34px 22px}.footer{flex-direction:column;text-align:center}h1{letter-spacing:-2.8px}}
@media(max-width:560px){.nav-actions{width:100%;display:grid;grid-template-columns:auto 1fr 1fr}.login-btn,.demo-btn,.lang-current{padding:0 10px}.cta-primary,.cta-secondary{width:100%}.hero-logo{margin-left:0}.brand{gap:12px}}
/* v2.1 proportion refinement: logo and hero alignment */
.brand{gap:24px}
.brand img{width:74px;height:74px;object-fit:contain;transform:scale(1.85);transform-origin:center;margin-right:18px;filter:drop-shadow(0 14px 30px rgba(11,132,255,.48))}
.brand-word{font-size:27px;letter-spacing:-1.15px}
.hero-logo{width:360px;height:360px;object-fit:contain;transform:scale(1.55);transform-origin:left center;margin:12px 0 54px 42px;filter:drop-shadow(0 22px 52px rgba(11,132,255,.62))}
h1{font-size:clamp(48px,5.25vw,78px);line-height:.98;letter-spacing:-3.3px;margin-bottom:22px}
.hero-text{max-width:610px;font-size:18.5px;line-height:1.68}
@media(max-width:820px){.brand img{width:58px;height:58px;transform:scale(1.55);margin-right:12px}.brand-word{font-size:24px}.hero-logo{width:150px;height:150px;transform:scale(1.35);margin-left:22px;margin-bottom:38px}h1{font-size:clamp(42px,11vw,58px)}}



/* v2.2 final hero proportion/alignment fix */
.hero-content{
  padding-top:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.hero-logo{
  width:260px !important;
  height:260px !important;
  max-width:260px !important;
  object-fit:contain !important;
  transform:scale(1.35) !important;
  transform-origin:left center !important;
  margin:0 0 30px 0 !important;
  align-self:flex-start !important;
  filter:drop-shadow(0 24px 56px rgba(11,132,255,.68)) !important;
}
.eyebrow{
  margin-bottom:22px !important;
}
h1{
  font-size:clamp(46px,4.85vw,72px) !important;
  line-height:1.01 !important;
  letter-spacing:-3px !important;
  max-width:720px !important;
}
.hero-text{
  max-width:650px !important;
}
.brand img{
  width:82px !important;
  height:82px !important;
  transform:scale(1.6) !important;
  margin-right:12px !important;
}
.brand-word{
  font-size:26px !important;
  letter-spacing:-1px !important;
}
@media(max-width:820px){
  .hero-logo{width:190px !important;height:190px !important;max-width:190px !important;transform:scale(1.22) !important;margin:0 0 26px 0 !important;}
  h1{font-size:clamp(40px,10vw,56px) !important;}
  .brand img{width:58px !important;height:58px !important;transform:scale(1.35) !important;margin-right:8px !important;}
  .brand-word{font-size:23px !important;}
}


/* ===== stayflow-official-final ===== */
body{
  background:
    radial-gradient(circle at 72% -12%, rgba(62,166,255,.22), transparent 32%),
    radial-gradient(circle at 14% 18%, rgba(108,201,255,.08), transparent 28%),
    radial-gradient(circle at 92% 78%, rgba(62,166,255,.11), transparent 34%),
    linear-gradient(135deg,#02050a 0%,#06101b 48%,#03070d 100%)!important;
}

/* Navbar final: fixa, leve, sem caixa preta pesada */
.navbar{
  position:fixed!important;
  top:16px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:min(1240px, calc(100% - 44px))!important;
  z-index:1000!important;
  min-height:82px!important;
  padding:12px 18px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:26px!important;
  background:linear-gradient(180deg,rgba(8,18,31,.58),rgba(8,18,31,.26))!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
  box-shadow:0 18px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06)!important;
}

.brand{
  gap:4px!important;
  align-items:center!important;
}

.brand img{
  width:96px!important;
  height:96px!important;
  object-fit:contain!important;
  transform:scale(1.28)!important;
  transform-origin:center!important;
  margin-right:-4px!important;
  filter:drop-shadow(0 14px 28px rgba(62,166,255,.36))!important;
}

.brand-word{
  font-size:28px!important;
  letter-spacing:-1.05px!important;
  transform:translateX(-4px)!important;
}

.nav-links{
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}

.demo-btn,
.cta-primary{
  background:linear-gradient(180deg,#58B8FF,#238BEE)!important;
  box-shadow:0 20px 42px rgba(62,166,255,.24)!important;
}

/* Hero final: logo alinhada com a frase, não com a tela inteira */
.hero{
  padding-top:156px!important;
  min-height:calc(100vh - 20px)!important;
  grid-template-columns:minmax(0,1fr) 570px!important;
  gap:70px!important;
}

.hero-content{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
}

.hero-logo{
  display:block!important;
  width:390px!important;
  height:auto!important;
  max-width:95%!important;
  object-fit:contain!important;
  transform:none!important;
  margin:8px 0 34px 0!important;
  align-self:flex-start!important;
  filter:drop-shadow(0 24px 56px rgba(62,166,255,.42))!important;
}

h1{
  max-width:720px!important;
  font-size:clamp(48px,4.95vw,76px)!important;
  line-height:.99!important;
  letter-spacing:-3.3px!important;
  margin-bottom:24px!important;
}

.gradient-text{
  background:linear-gradient(100deg,#ffffff 0%,#d9ecff 46%,#8EDBFF 100%)!important;
  -webkit-background-clip:text!important;
  color:transparent!important;
}

.hero-text{
  max-width:650px!important;
  font-size:18.5px!important;
  line-height:1.72!important;
}

/* Preview mais refinado */
.dashboard{
  border-radius:34px!important;
  border:1px solid rgba(120,190,255,.22)!important;
  background:
    radial-gradient(circle at 90% -10%,rgba(62,166,255,.16),transparent 38%),
    linear-gradient(180deg,rgba(13,29,48,.96),rgba(5,12,22,.96))!important;
  box-shadow:0 34px 110px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.08)!important;
}

.dashboard-title img{
  width:42px!important;
  height:42px!important;
}

/* Botão flutuante com identidade StayFlow */
.whatsapp{
  background:linear-gradient(180deg,#58B8FF,#238BEE)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 20px 48px rgba(62,166,255,.30)!important;
}
.whatsapp img{
  width:48px!important;
  height:auto!important;
  object-fit:contain!important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.24))!important;
}

/* Estados mobile */
@media(max-width:1120px){
  .hero{
    grid-template-columns:1fr!important;
    gap:48px!important;
  }
  .product-preview{
    max-width:680px!important;
  }
}
@media(max-width:820px){
  .navbar{
    top:10px!important;
    width:min(100% - 24px, 1240px)!important;
    padding:10px 12px!important;
  }
  .brand img{
    width:70px!important;
    height:70px!important;
    margin-right:-2px!important;
  }
  .brand-word{
    font-size:23px!important;
  }
  .hero{
    padding-top:180px!important;
  }
  .hero-logo{
    width:270px!important;
    max-width:92%!important;
  }
}


/* ===== stayflow-logo-v2 ===== */
/* Navbar logo + wordmark */
.brand{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
}
.brand img{
  width:104px!important;
  height:104px!important;
  object-fit:contain!important;
  margin-right:-10px!important;
  transform:none!important;
}
.brand-word,.brand-name{
  font-size:31px!important;
  font-weight:900!important;
  letter-spacing:-1.4px!important;
  line-height:1!important;
  display:flex!important;
  align-items:center!important;
  margin-top:2px!important;
}

/* Hero logo */
.hero-logo{
  width:500px!important;
  max-width:88%!important;
  height:auto!important;
  margin:8px 0 26px 0!important;
  filter:drop-shadow(0 28px 64px rgba(62,166,255,.40))!important;
}
@media(max-width:820px){
  .hero-logo{
    width:300px!important;
  }
}


/* ===== stayflow-logo-v3 ===== */
/* Refino definitivo da marca */
.brand{
 display:flex!important;
 align-items:center!important;
 gap:2px!important;
}
.brand img{
 width:118px!important;
 height:118px!important;
 object-fit:contain!important;
 margin:0 -14px 0 -4px!important;
 align-self:center!important;
}
.brand-word,.brand-name{
 display:flex!important;
 align-items:center!important;
 font-size:32px!important;
 font-weight:900!important;
 letter-spacing:-1.5px!important;
 line-height:1!important;
 padding-top:0!important;
 margin:0!important;
}

/* Hero */
.hero-content{
 justify-content:center!important;
}
.hero-logo{
 width:930px!important;
 max-width:95%!important;
 display:block!important;
 margin:12px 0 18px 18px!important;
 align-self:flex-start!important;
}
@media(max-width:900px){
 .hero-logo{
   width:340px!important;
   margin:12px auto 20px auto!important;
   align-self:center!important;
 }
}


/* ===== stayflow-premium-refine ===== */
/* Navbar: transparente, sem painel cobrindo conteúdo */
.navbar{
 background:transparent!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
 border:none!important;
 box-shadow:none!important;
}

/* Marca */
.brand{gap:4px!important;align-items:center!important;}
.brand img{
 width:132px!important;
 height:132px!important;
 margin:0 -8px 0 0!important;
 object-fit:contain!important;
}
.brand-word,.brand-name{
 font-size:38px!important;
 letter-spacing:-1.2px!important;
 line-height:1!important;
}

/* Hero */
.hero{padding-top:132px!important;}
.hero-logo{
 width:650px!important;
 max-width:95%!important;
 margin:24px auto 40px auto!important;
 display:block!important;
}
.hero-content{
 align-items:flex-start!important;
}
.hero h1{
 font-size:clamp(46px,4.4vw,68px)!important;
 letter-spacing:-2.8px!important;
 line-height:.98!important;
}
.hero p{
 font-size:18px!important;
 line-height:1.82!important;
 max-width:610px!important;
}


/* ===== floating-waves-only ===== */
.whatsapp{
  position:fixed;
  right:24px;
  bottom:24px;
  width:auto!important;
  height:auto!important;
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  display:block!important;
  overflow:visible!important;
  padding:0!important;
}
.whatsapp img{
  width:160px!important;
  height:auto!important;
  display:block!important;
}
.whatsapp:hover{
  transform:translateY(-2px);
}
.whatsapp svg{
  display:none!important;
}


/* ===== hero-logo-final-large ===== */
/* Refino final do Hero */

.hero{
  padding-top:110px!important;
  align-items:start!important;
}

.hero-content{
  justify-content:flex-start!important;
  align-items:flex-start!important;
  padding-top:8px!important;
}

/* sobe toda a composição esquerda */
.hero-logo{
  width:980px!important;
  max-width:none!important;
  height:auto!important;
  margin:-95px 0 -95px -190px!important;
  transform:none!important;
  display:block!important;
  filter:drop-shadow(0 34px 80px rgba(62,166,255,.46))!important;
}

h1{
  margin-top:-110px!important;
  margin-bottom:12px!important;
  line-height:.96!important;
}

.hero-text{
  margin-top:0!important;
  max-width:610px!important;
}

.hero-actions{
  margin-top:18px!important;
}

.trust-row{
  margin-top:18px!important;
}


/* ===== navbar-final-fix ===== */
header,
.navbar,
nav{
  z-index:1000!important;
}

.hero{
  padding-top:150px!important;
}

.hero-content{
  padding-top:24px!important;
}

.product-preview,
.dashboard,
.dashboard-card{
  margin-top:22px!important;
}


/* ===== hero-ai-status-style ===== */
.hero-ai-status{
  position:fixed!important;
  top:18px!important;
  right:22px!important;
  z-index:9999!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  background:rgba(12,22,38,.55)!important;
  backdrop-filter:blur(10px)!important;
  color:#d7e5f5!important;
  font-size:12px!important;
  font-weight:700!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
.hero-ai-status .dot{
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:#2ee66b!important;
  box-shadow:0 0 10px rgba(46,230,107,.9)!important;
}


/* ===== brand-tight-fix ===== */
.brand{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
}
.brand img{
  display:block!important;
  margin:0 -28px 0 0!important; /* aproxima mais do texto */
  transform:translateY(4px)!important; /* desce levemente para alinhar */
  vertical-align:middle!important;
}
.brand-word{
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  letter-spacing:-0.025em!important;
}


/* ==============================
   Fix: .hero-logo estourava a tela no mobile.
   A última regra do arquivo (hero-logo-final-large, acima) define
   width:980px!important e max-width:none!important sem nenhuma
   media query — como é a última declaração !important do arquivo,
   ela vencia em qualquer largura de tela, inclusive nas regras de
   @media(max-width:820px)/900px definidas mais acima (que perdiam
   por aparecerem antes desta no documento). Resultado real: em um
   celular de 375px a logo do hero renderizava a 980px, sem
   max-width, com margem negativa de -190px, estourando o viewport
   horizontalmente. Esta regra final restaura um teto sensato para
   mobile, mantendo o valor de desktop (980px) intocado.
   ============================== */
@media(max-width:820px){
  .hero-logo{
    width:270px!important;
    max-width:80vw!important;
    margin:0 auto 24px!important;
  }
}


/* ==============================
   Fix: navbar piscando/recompondo errado durante scroll no Safari iOS.

   Diagnóstico: o bloco "stayflow-premium-refine" (acima) já sobrescreve
   o blur do "stayflow-official-final" para backdrop-filter:none e
   background:transparent — ou seja, hoje NÃO existe blur ativo no
   navbar. A causa do bug não é o blur (já está desligado); é o padrão
   clássico do WebKit em iOS: elemento position:fixed totalmente
   transparente sobre conteúdo que rola por baixo. O Safari às vezes
   falha em recompor essa camada a tempo durante scroll com momentum
   (rubber-banding), e como não há nenhum fundo sólido "escondendo" o
   glitch, o piscar fica visível.

   Fix: (1) devolve um fundo semi-opaco sólido (sem blur, pra não
   reintroduzir a variável suspeita) — um fixed totalmente transparente
   é o cenário que mais reproduz esse bug; (2) promove o navbar pra sua
   própria camada de composição via GPU (transform:translateZ(0) +
   will-change:transform), que é a correção padrão documentada pra esse
   bug específico do WebKit — força o Safari a tratar o elemento como
   uma camada isolada, em vez de recompor contra o restante da página
   a cada frame de scroll.
   ============================== */
.navbar{
  background:linear-gradient(180deg,rgba(8,18,31,.4),rgba(8,18,31,.22))!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}


/* ==============================
   Header compacto — SÓ mobile (≤820px). Desktop não é tocado por
   este bloco (tudo aqui dentro de @media, então acima de 820px
   nenhuma destas regras se aplica).

   Problema relatado: no mobile o menu de navegação (Recursos/
   Plataforma/Como funciona/Futuro) ficava solto/empilhado no meio
   da tela, embaixo de uma marca que herdava tamanhos de várias
   camadas antigas do arquivo (a .brand nunca teve uma regra
   definitiva só pra mobile). Reorganizado pra um padrão de app:
   barra fina fixa no topo, logo pequena à esquerda, ações à
   direita. O menu de âncoras (#features etc.) some do header nesse
   breakpoint — não tinha espaço pra caber junto com logo + idioma +
   login + CTA numa barra fina de verdade; as seções continuam
   acessíveis normalmente rolando a página.
   ============================== */
@media(max-width:820px){
  .navbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    transform:none!important;
    margin-top:0!important;
    min-height:0!important;
    padding:10px 16px!important;
    border:none!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    border-radius:0!important;
    display:flex!important;
    /* wrap (não nowrap): tentei deixar .nav-actions dividir a mesma
       linha da logo com wrap só nos filhos dela, mas a linha externa
       em nowrap nunca dava a ela largura suficiente pra decidir
       quebrar — o conjunto todo só estourava a tela em vez de
       quebrar. Com a linha externa em wrap + nav-actions em
       width:100% (abaixo), ela sempre ganha a linha inteira pra si,
       o que garante caber os 3 itens (idioma/login/CTA) de forma
       previsível em qualquer largura de mobile. */
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:6px!important;
  }
  .brand{
    gap:8px!important;
    min-width:0!important;
  }
  .brand img{
    width:36px!important;
    height:36px!important;
    margin:0!important;
    transform:none!important;
  }
  .brand-word{
    font-size:20px!important;
    letter-spacing:-.4px!important;
  }
  .nav-links{
    display:none!important;
  }
  .nav-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    /* Sem justify-content:flex-end/margin-auto aqui de propósito:
       testado isoladamente, a combinação de width:100% num flex-wrap
       com alinhamento à direita (flex-end OU margin-left:auto) faz
       o Edge headless "perder" o último item em vez de quebrar linha
       ou encolher — reproduzido num teste mínimo, sem nenhuma outra
       regra do arquivo envolvida. Alinhamento à esquerda (padrão)
       não tem esse problema e já ocupa a linha inteira. */
    justify-content:flex-start!important;
    gap:6px!important;
    /* Fica em 100% da largura, na própria linha (abaixo da logo) —
       garante espaço suficiente pra idioma + login + CTA caberem
       numa linha só, em vez de disputar espaço com a marca. */
    width:100%!important;
    min-width:0!important;
    row-gap:6px!important;
  }
  /* Botoes ficavam agrupados a esquerda com um vazio grande a
     direita (flex-start sem grow). flex:1 em cada um faz os 3
     dividirem a largura toda igualmente, sem reintroduzir o bug do
     Edge headless documentado acima (que era especifico de
     justify-content:flex-end/margin-auto, nao de flex-grow). */
  .lang-select{
    flex:1 1 0!important;
    min-width:0!important;
  }
  .lang-current{
    width:100%!important;
    min-height:34px!important;
    padding:0 8px!important;
    font-size:12.5px!important;
    gap:4px!important;
    justify-content:center!important;
  }
  .login-btn,
  .demo-btn{
    flex:1.4 1 0!important;
    min-width:0!important;
    min-height:34px!important;
    padding:0 10px!important;
    font-size:12.5px!important;
    font-weight:800!important;
    white-space:nowrap!important;
    text-align:center!important;
    justify-content:center!important;
  }

  /* A barra agora é sempre 2 linhas (logo + ações, ver acima), então
     tem altura mais previsível: ~46px (logo) + ~40px (ações) + 20px
     de padding vertical ≈ 106px. Uso 130px de folga. */
  .hero{
    padding-top:130px!important;
  }

  /* Causa raiz do título colando na barra: h1 tem margin-top:-110px
     herdado do bloco "hero-logo-final-large" (mais acima no arquivo)
     — servia pra puxar o título pra cima, compensando a logo gigante
     empurrando tudo pra baixo. Como a logo some no mobile (regra
     abaixo), essa margem negativa ficou órfã e cancelava exatamente
     o padding-top acima (110px - 110px = 0, título colado na barra).
     Resetada aqui. */
  h1{
    margin-top:0!important;
  }

  /* A logo grande ("ondas") solta no meio do hero ficava
     desproporcional pro tamanho da tela — removida no mobile.
     A marca já aparece pequena e legível na barra fixa acima. */
  .hero-logo{
    display:none!important;
  }

  /* Badge "IA ativa" (fixed, canto superior direito) colidia com os
     botões da barra nova — desce pra abaixo dela (barra agora tem
     2 linhas, ~106px). */
  .hero-ai-status{
    top:100px!important;
    right:16px!important;
  }
}

/* ==============================
   Hero v2 — janela do produto + diagrama + headline serifado
   (aprovado em conceito, sessao de redesign do index.html).
   Reaproveita os tokens ja existentes (--blue/--blue2/--panel/--line/
   --text/--muted) e so acrescenta --gold (acento novo, hospitalidade)
   e --serif (Playfair Display, embutida via @font-face local).
   ============================== */
@font-face{
  font-family:'Playfair Display';
  font-weight:500 700;
  font-style:normal;
  font-display:swap;
  src:url('../../assets/fonts/playfair-display.woff2') format('woff2');
}
:root{
  --gold:#d9b872;
  --gold-soft:#f0ddb0;
  --serif:Inter,"SF Pro Display","Segoe UI",Arial,Helvetica,sans-serif;
}

.hero-split{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:start;max-width:1240px;margin:0 auto;padding:24px 0 40px}
.hero-split .split-label{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:12px}

.frame-wrap{position:relative;margin:0 auto}
.frame-glow{position:absolute;inset:-50px;background:radial-gradient(closest-side, rgba(217,184,114,.10), transparent 70%);filter:blur(6px)}
.frame{
  position:relative;background:#050b13;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 60px 120px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}
.frame-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);background:#060d16}
.frame-bar span{width:9px;height:9px;border-radius:50%;background:#1c2f45}
.frame-bar .url{margin-left:10px;font-size:11px;color:var(--muted);background:#0a1420;border:1px solid var(--line);padding:4px 12px;border-radius:999px}
.frame-bar .tabs{margin-left:auto;font-size:10.5px;color:var(--muted)}
.slider{position:relative;width:100%;aspect-ratio:1760/900;background:#050b13;overflow:hidden}
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .6s ease}
.slider img.active{opacity:1}
.slide-nav{
  position:absolute;top:0;bottom:0;width:15%;border:0;background:transparent;
  color:#fff;font-size:30px;line-height:1;cursor:pointer;opacity:0;
  transition:opacity .2s;display:flex;align-items:center;z-index:3;
}
.slide-nav.prev{left:0;justify-content:flex-start;padding-left:10px;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent)}
.slide-nav.next{right:0;justify-content:flex-end;padding-right:10px;background:linear-gradient(270deg,rgba(0,0,0,.35),transparent)}
.slider:hover .slide-nav{opacity:.85}
.slide-nav:hover{opacity:1!important}
.dots{display:flex;gap:5px;justify-content:center;align-items:center;padding:14px 10px;background:#060d16;border-top:1px solid var(--line);flex-wrap:wrap}
.dot{width:6px;height:6px;border-radius:50%;background:var(--line);border:0;cursor:pointer;padding:0;transition:all .25s;flex:none}
.dot.active{background:var(--gold-soft);width:18px;border-radius:4px}
.dot-label{font-size:11px;color:var(--muted);margin-left:10px;font-weight:600}

.radial-wrap{position:relative;width:100%;max-width:480px;aspect-ratio:1/1;margin:0 auto}
.radial-wrap svg.lines{position:absolute;inset:0;width:100%;height:100%}
.radial-legend{display:flex;justify-content:center;gap:28px;margin-top:32px;font-size:12px;color:var(--muted)}
.radial-legend span{display:inline-flex;align-items:center;gap:7px}
.radial-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.radial-legend i.gold{background:var(--gold-soft)}
.radial-legend i.cyan{background:var(--blue2)}

.gnode{position:absolute;transform:translate(-50%,-50%);z-index:2;width:14.5%}
.cat-node{width:17.5%;z-index:2}
.cat-node .gcap{font-size:10.6px}
.gnode .bubble{
  width:100%;aspect-ratio:1/1;
  clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);
  overflow:hidden;
  background:linear-gradient(155deg,var(--panel2),var(--panel) 82%);
  border:1.5px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:0 19%;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));
}
.gnode.gold .bubble{border-color:rgba(217,184,114,.55);box-shadow:inset 0 0 0 1px rgba(217,184,114,.3)}
.gnode.cyan .bubble{border-color:rgba(35,210,255,.48);box-shadow:inset 0 0 0 1px rgba(35,210,255,.26)}
.gnode .bubble svg{width:26%;height:26%;flex:none;color:var(--gold-soft)}
.gnode.gold .bubble svg{stroke:var(--gold-soft)}
.gnode.cyan .bubble svg{stroke:var(--blue2);color:var(--blue2)}
.gcap{font-size:9.6px;font-weight:700;color:var(--text);text-align:center;line-height:1.15}

.hub-node{width:23%;z-index:3}
.hub-node .bubble{
  background:radial-gradient(closest-side,#0d2034,#081420 80%);
  box-shadow:inset 0 0 0 1.5px rgba(217,184,114,.55);
  border-color:rgba(217,184,114,.55);
  padding:0 2%;
}
.hub-mark{width:58%!important;height:58%!important;object-fit:contain}

/* .hero-text/.hero-actions do hero antigo (removido) tem regras
   globais com !important em outro trecho deste arquivo (secao
   "stayflow-premium-refine") - por isso os elementos novos usam
   classes proprias (hero-heading-text/hero-heading-actions) em vez
   de reaproveitar esses nomes. O h1 nu tambem tem uma regra antiga
   com margin-top:-110px!important - neutralizada aqui com !important
   proprio, unica forma de vencer !important de menor especificidade. */
.hero-heading{position:relative;z-index:2;padding:168px 0 26px;text-align:center;max-width:1240px;margin:0 auto}
.hero-heading .eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:0;border:0;background:none;border-radius:0;
  font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:28px;
}
.hero-heading .eyebrow::before{content:"";width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 10px rgba(217,184,114,.7)}
.hero-heading h1{
  font-family:var(--serif)!important;font-weight:900!important;font-size:clamp(32px,4vw,54px)!important;
  line-height:1.05!important;letter-spacing:-2px!important;text-wrap:balance;
  margin:8px auto 22px!important;max-width:760px!important;color:var(--text)!important;
}
.hero-heading h1 em{font-style:normal;background:linear-gradient(120deg,var(--blue2),var(--blue) 75%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-heading-text{font-size:16px;line-height:1.7;color:var(--muted);max-width:560px;margin:0 auto 30px}
.hero-heading-text strong{color:var(--text);font-weight:600}
.proof{display:flex;gap:26px;font-size:12px;color:var(--muted)}
.proof div{display:flex;align-items:center;gap:7px}
.proof strong{color:var(--text);font-family:var(--serif);font-size:14.5px}

.strip{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(6,16,27,.6)}
.strip-inner{max-width:1240px;margin:0 auto;padding:24px 22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.strip-label{font-size:12px;color:var(--muted);max-width:180px;line-height:1.5}
.strip-items{display:flex;gap:40px;flex-wrap:wrap}
.strip-item{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);font-weight:500}
.strip-item svg{width:18px;height:18px;stroke:var(--gold-soft);flex:none}

@media(max-width:980px){
  .hero-split{grid-template-columns:1fr;padding:24px 0 40px;gap:44px}
  .hero-heading{padding:150px 0 26px}
  .radial-wrap{max-width:88%;margin:0 auto}
  .hero-heading h1{font-size:36px!important}
}
@media(max-width:640px){
  .radial-wrap{max-width:94%}
  .gcap{font-size:8.2px}
  .strip-inner{flex-direction:column;align-items:flex-start}
}