/* ===== Páginas da marca LinkHub (início, exemplos, não encontrado) =====
   Escuro e aconchegante: noite azulada, brilhos do azul #0025cc e um toque âmbar.
   As cores ficam em :root (css/base.css), com o prefixo --lh-. */

body.marca{
  display:block;
  padding:0;
  color:var(--lh-texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 640px at 6% -8%,rgba(0,37,204,.45),transparent 62%),
    radial-gradient(820px 540px at 100% 10%,rgba(92,72,235,.16),transparent 68%),
    radial-gradient(900px 620px at 50% 100%,rgba(255,184,120,.07),transparent 70%),
    var(--lh-noite);
}
/* Granulado bem leve por cima de tudo: tira o aspecto "chapado" do fundo escuro */
body.marca::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.site{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}

.marca h1,.marca h2,.marca h3{font-family:var(--lh-fonte);line-height:1.08;letter-spacing:-.025em;color:#fff}
.wrap{width:min(1160px,100% - 32px);margin-inline:auto}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 24px;
  border:1px solid transparent;
  border-radius:999px;
  font:700 15px/1.15 var(--lh-fonte);
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s,background-color .15s,border-color .15s,box-shadow .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,.marca a:focus-visible,.marca button:focus-visible{outline:3px solid var(--lh-azul-claro);outline-offset:3px}
.btn .fa-whatsapp{font-size:1.25em}
.btn--azul{background:var(--lh-azul);color:#fff;box-shadow:0 14px 34px -14px rgba(42,75,255,.95),inset 0 1px 0 rgba(255,255,255,.2)}
.btn--azul:hover{background:var(--lh-azul-vivo)}
.btn--vidro{background:rgba(255,255,255,.05);border-color:var(--lh-linha);color:var(--lh-texto)}
.btn--vidro:hover{background:rgba(255,255,255,.09);border-color:rgba(165,180,255,.32)}
.btn--claro{background:#fff;color:var(--lh-azul)}
.btn--claro:hover{background:#eef1ff}
.btn--p{min-height:42px;padding:0 18px;font-size:14px}

/* ---------- Topo ---------- */
.topo{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(7,10,28,.66);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--lh-linha);
}
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.topo-logo{display:flex;border-radius:8px}
/* O "Link" da logo é o próprio #0025cc: um brilho azul atrás ajuda a leitura sobre o fundo escuro */
.topo-logo img{display:block;width:auto;height:28px;filter:drop-shadow(0 0 14px rgba(42,75,255,.55))}
.topo-menu{display:flex;align-items:center;gap:6px}
.topo-menu > a:not(.btn){padding:10px 14px;border-radius:999px;color:var(--lh-suave);font:600 14px var(--lh-fonte);text-decoration:none;transition:color .15s,background-color .15s}
.topo-menu > a:not(.btn):hover,.topo-menu > a[aria-current]{color:#fff;background:rgba(255,255,255,.06)}
@media (max-width:520px){
  .topo-logo img{height:24px}
  .topo-menu .btn--p{width:42px;padding:0}
  .topo-menu .btn--p span{display:none}
}

/* ---------- Títulos de seção ---------- */
.sobre-titulo{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:14px;
  color:var(--lh-azul-claro);
  font:700 12px/1.3 var(--lh-fonte);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.sobre-titulo::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--lh-ambar);box-shadow:0 0 12px var(--lh-ambar)}

.secao{padding:44px 0}
.secao-topo{max-width:660px;margin-bottom:28px}
.secao-topo h2{font-size:clamp(26px,4.6vw,38px);font-weight:800}
.secao-topo--linha{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 28px;max-width:none}
.secao-topo--linha > div{max-width:660px}
.link-seta{display:inline-flex;align-items:center;gap:8px;color:var(--lh-azul-claro);font:700 15px var(--lh-fonte);text-decoration:none}
.link-seta:hover{color:#fff}
@media (min-width:960px){.secao{padding:64px 0}}

/* ---------- Topo da página (hero) ---------- */
.hero{padding:52px 0 36px}
.hero-grade{display:grid;gap:44px;align-items:center}
.hero h1{font-size:clamp(38px,8.4vw,66px);font-weight:800}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--lh-azul-claro) 5%,#c5b9ff 50%,var(--lh-ambar) 95%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{max-width:54ch;margin-top:18px;color:var(--lh-suave);font-size:clamp(16px,2.2vw,18px);line-height:1.65}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.mini-lista{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:24px;list-style:none;color:var(--lh-suave);font-size:14px}
.mini-lista i{margin-right:7px;color:var(--lh-azul-claro)}
@media (max-width:520px){.acoes .btn{width:100%}}
@media (min-width:960px){
  .hero{padding:76px 0 56px}
  .hero-grade{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}

/* Variação centralizada (página de exemplos) */
.hero--centro{text-align:center}
.hero--centro p{margin-inline:auto}
.hero--centro .atalhos{justify-content:center}

/* Celular do topo da página inicial, com cartões flutuando em volta */
.hero-visual{position:relative;display:flex;flex-direction:column;align-items:center}
.hero-brilho{position:absolute;inset:6% 4% 14%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,37,204,.75),rgba(0,37,204,0));filter:blur(28px)}
.hero-celular{position:relative}
.flutua{
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 14px 9px 9px;
  border-radius:16px;
  background:rgba(13,18,48,.86);
  border:1px solid rgba(165,180,255,.2);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.85);
  color:var(--lh-suave);
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
  animation:flutuar 6s ease-in-out infinite;
}
.flutua > i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#fff;font-size:16px}
.flutua b{display:block;color:#fff;font:700 13px var(--lh-fonte)}
/* No celular os cartões ficam sobre os botões da prévia; no computador, quase todo para fora */
.flutua--link{top:60%;left:-14px}
.flutua--link > i{background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7)}
.flutua--toque{bottom:7%;right:-14px;animation-delay:-3s}
.flutua--toque > i{background:var(--lh-azul);transform:rotate(90deg)}
@keyframes flutuar{50%{transform:translateY(-8px)}}
@media (min-width:960px){
  .flutua--link{top:9%;left:-104px}
  .flutua--toque{bottom:18%;right:-90px}
}
.hero-pontos{display:flex;gap:4px;margin-top:16px}
.hero-pontos button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer}
.hero-pontos button::before{content:"";width:8px;height:8px;border-radius:9px;background:rgba(255,255,255,.25);transition:width .3s,background-color .3s}
.hero-pontos button[aria-pressed="true"]::before{width:24px;background:var(--lh-azul-claro)}

/* ---------- Cartões ---------- */
.grade-cartoes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.cartao-marca{
  padding:26px;
  border:1px solid var(--lh-linha);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.cartao-marca > i{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin-bottom:18px;
  border-radius:16px;
  background:linear-gradient(145deg,var(--lh-azul-vivo),var(--lh-azul));
  color:#fff;
  font-size:21px;
  box-shadow:0 12px 26px -12px rgba(42,75,255,.9);
}
.cartao-marca h3{margin-bottom:8px;font-size:19px;font-weight:700}
.cartao-marca p{color:var(--lh-suave);font-size:15px;line-height:1.6}
@media (min-width:1100px){.grade-cartoes--4{grid-template-columns:repeat(4,1fr)}}

/* Passos (números em âmbar: o toque quente da página) */
.passos{display:grid;gap:14px;list-style:none}
.passos li{
  position:relative;
  padding:24px 24px 24px 84px;
  border:1px solid var(--lh-linha);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
}
.passos b{
  position:absolute;
  top:24px;
  left:24px;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid rgba(255,200,144,.28);
  border-radius:12px;
  background:rgba(255,200,144,.1);
  color:var(--lh-ambar);
  font:800 17px var(--lh-fonte);
}
.passos strong{display:block;margin-bottom:6px;color:#fff;font:700 17px/1.3 var(--lh-fonte)}
.passos p{color:var(--lh-suave);font-size:15px;line-height:1.6}
@media (min-width:860px){
  .passos{grid-template-columns:repeat(3,1fr)}
  .passos li{padding:26px}
  .passos b{position:static;margin-bottom:18px}
}

/* Recursos */
.recursos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none}
.recursos li{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--lh-linha);border-radius:20px;background:rgba(255,255,255,.025)}
.recursos i{display:grid;place-items:center;width:42px;height:42px;margin-bottom:8px;border-radius:12px;background:rgba(42,75,255,.18);color:var(--lh-azul-claro);font-size:18px}
.recursos strong{color:#fff;font:700 15px/1.3 var(--lh-fonte)}
.recursos span{color:var(--lh-suave);font-size:13.5px;line-height:1.5}
@media (min-width:860px){
  .recursos{grid-template-columns:repeat(3,1fr);gap:14px}
  .recursos li{padding:24px}
}

/* Avatar redondo com o logo desenhado de um exemplo */
.avatar{
  display:grid;
  place-items:center;
  flex:none;
  width:32px;
  height:32px;
  overflow:hidden;
  border-radius:50%;
  background:var(--logo-fundo);
  color:var(--logo-cor);
  font-family:var(--logo-fonte,var(--lh-fonte));
  font-size:14px;
  font-weight:700;
  line-height:1;
}
.avatar span{font-size:.8em}

/* Link curto (lihub.me/marca) */
.link-curto{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:8px 14px;
  border:1px solid rgba(147,164,255,.28);
  border-radius:999px;
  background:rgba(42,75,255,.12);
  color:var(--lh-texto);
  font:600 14px var(--lh-fonte);
}
.link-curto i,.link-curto b{color:var(--lh-azul-claro)}
.link-curto i{margin-right:8px}
.link-curto--g{padding:12px 18px;font-size:17px}

/* Vitrine de exemplos na página inicial */
.vitrine{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.vitrine-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:22px;
  border:1px solid var(--lh-linha);
  border-radius:24px;
  background:radial-gradient(120% 90% at 0 0,color-mix(in srgb,var(--cor) 24%,transparent),transparent 62%),var(--lh-noite-2);
  color:var(--lh-texto);
  text-decoration:none;
  transition:transform .2s,border-color .2s;
}
.vitrine-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--cor) 55%,transparent)}
.vitrine-topo{display:flex;align-items:center;gap:12px}
.vitrine-topo b{display:block;color:#fff;font:700 15px var(--lh-fonte)}
.vitrine-topo small{color:var(--lh-suave);font-size:13px}
.vitrine-avatar{width:52px;height:52px;font-size:21px;box-shadow:0 0 0 2px var(--lh-noite-2),0 0 0 4px color-mix(in srgb,var(--cor) 60%,transparent)}
.vitrine-bio{color:var(--lh-suave);font-size:14px;line-height:1.5}
.vitrine-ver{display:inline-flex;align-items:center;gap:8px;margin-top:auto;color:var(--lh-azul-claro);font:700 14px var(--lh-fonte)}

/* Nosso objetivo */
.objetivo{
  position:relative;
  padding:34px 28px;
  overflow:hidden;
  border:1px solid var(--lh-linha);
  border-radius:28px;
  background:
    radial-gradient(90% 120% at 100% 0,rgba(255,200,144,.1),transparent 60%),
    radial-gradient(80% 100% at 0 100%,rgba(0,37,204,.3),transparent 60%),
    var(--lh-noite-2);
}
.objetivo > i{margin-bottom:14px;color:var(--lh-ambar);font-size:28px;opacity:.85}
.objetivo h2{margin-bottom:14px;font-size:clamp(24px,4vw,32px)}
.objetivo p{max-width:62ch;color:rgba(244,241,234,.86);font-size:17px;line-height:1.7}
.objetivo p + p{margin-top:12px}
@media (min-width:860px){.objetivo{padding:48px 52px}}

/* Chamada final */
.cta{
  position:relative;
  overflow:hidden;
  padding:46px 24px;
  border-radius:32px;
  text-align:center;
  background:
    radial-gradient(70% 90% at 88% 0,rgba(255,200,144,.26),transparent 60%),
    linear-gradient(140deg,#0b30e6,var(--lh-azul) 45%,#16148c);
  box-shadow:0 30px 70px -30px rgba(0,37,204,.95),inset 0 1px 0 rgba(255,255,255,.18);
}
/* A corrente da logo, grande e bem apagada, no canto */
.cta::after{
  content:"";
  position:absolute;
  right:-34px;
  bottom:-46px;
  width:230px;
  height:230px;
  background:#fff;
  opacity:.09;
  transform:rotate(-8deg);
  -webkit-mask:url(../logos/linkhub-icone.png) center/contain no-repeat;
  mask:url(../logos/linkhub-icone.png) center/contain no-repeat;
  pointer-events:none;
}
.cta h2{position:relative;font-size:clamp(28px,5vw,42px)}
.cta p{position:relative;max-width:52ch;margin:12px auto 26px;color:rgba(255,255,255,.88);font-size:17px;line-height:1.6}
.cta .btn{position:relative}
@media (min-width:860px){.cta{padding:64px 40px}}

/* Rodapé */
.rodape{margin-top:auto;padding:34px 0 40px;border-top:1px solid var(--lh-linha)}
.rodape-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px}
.rodape-logo{display:block;width:auto;height:24px;filter:drop-shadow(0 0 12px rgba(42,75,255,.45))}
.rodape-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.rodape-links a{color:var(--lh-suave);font:600 14px var(--lh-fonte);text-decoration:none}
.rodape-links a:hover{color:#fff}
.rodape p{width:100%;color:rgba(169,175,207,.7);font-size:13px}

.aviso-legal{padding:4px 0 32px;color:rgba(169,175,207,.6);font-size:12.5px;line-height:1.6;text-align:center}

/* ---------- Página não encontrada ---------- */
.vazio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:72px 0;text-align:center}
.vazio-icone{
  width:88px;
  height:88px;
  margin-bottom:26px;
  background:var(--lh-azul-claro);
  filter:drop-shadow(0 0 22px rgba(42,75,255,.8));
  -webkit-mask:url(../logos/linkhub-icone-p.png) center/contain no-repeat;
  mask:url(../logos/linkhub-icone-p.png) center/contain no-repeat;
}
.vazio h1{font-size:clamp(30px,6vw,44px)}
.vazio p{max-width:44ch;margin:14px auto 0;color:var(--lh-suave);line-height:1.6}
.vazio .acoes{justify-content:center}

/* ---------- Aviso rápido (toast) e barra dos exemplos em tela cheia ---------- */
.aviso{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:60;
  width:max-content;
  max-width:calc(100% - 32px);
  padding:12px 18px;
  border:1px solid rgba(147,164,255,.3);
  border-radius:14px;
  background:rgba(13,18,48,.95);
  color:var(--lh-texto);
  font:600 14px/1.45 var(--lh-fonte);
  text-align:center;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.85);
  opacity:0;
  transform:translate(-50%,16px);
  transition:opacity .25s,transform .25s;
  pointer-events:none;
}
.aviso.visivel{opacity:1;transform:translate(-50%,0)}

body.demo{padding-bottom:104px}
.demo .aviso{bottom:92px}
.demo-barra{
  position:fixed;
  left:50%;
  bottom:16px;
  z-index:50;
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px;
  border:1px solid rgba(147,164,255,.25);
  border-radius:999px;
  background:rgba(7,10,28,.88);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.75);
  font:600 13px var(--lh-fonte);
  white-space:nowrap;
  transform:translateX(-50%);
}
.demo-barra a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:999px;color:var(--lh-suave);text-decoration:none}
.demo-barra a:hover{color:#fff}
.demo-texto{padding:0 6px;color:rgba(169,175,207,.75);font-size:12px}
.demo-barra .demo-cta{background:var(--lh-azul);color:#fff}
.demo-barra .demo-cta:hover{background:var(--lh-azul-vivo)}
@media (max-width:380px){.demo-texto{display:none}}

@media (prefers-reduced-motion:reduce){
  .flutua{animation:none}
  .btn,.vitrine-card{transition:none}
  .btn:hover,.vitrine-card:hover{transform:none}
}