/* Landing do IdeiasHub, versão bento (30/10/2026): fundo claro, uma grade de
   blocos de tamanhos variados, um por sistema. As páginas simples
   (privacidade, obrigado, 404) continuam em style.css. */
:root{
  --bg:#F7F5F0; --ink:#1B1B1B; --mute:#555; --linha:#E2DED4; --r:24px;
  --laranja:#E8502B; --azul:#2F49E0; --verde:#15803D; --amarelo:#FFC233;
  --roxo:#7C3AED; --ciano:#0369A1; --rosa:#BE185D; --preto:#1B1B1B;
  --teal:#0F766E; --ardosia:#334155; --lavanda:#C7D2FE; --tinta:#1C2D40;
}
*{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:Inter,-apple-system,"Segoe UI",Arial,sans-serif; padding:0 clamp(16px,5vw,80px) 48px; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:3px solid var(--azul); outline-offset:3px; }
.wrap{ max-width:1680px; margin:0 auto; }

/* topo */
.topo{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.marca{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:24px; letter-spacing:-1px; }
.marca img{ width:36px; height:36px; border-radius:10px; }

/* cabeçalho */
.cabeca{ margin:12px 0 22px; }
h1{ font-size:clamp(32px,4.2vw,64px); font-weight:800; letter-spacing:-.04em; line-height:1.02; opacity:0; animation:sobe .7s .1s forwards; }
.sub{ color:var(--mute); font-size:clamp(15px,1.2vw,18px); line-height:1.4; margin-top:10px; max-width:60ch; opacity:0; animation:sobe .7s .3s forwards; }
@media (min-width:1100px){
  .cabeca{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
  .cabeca .sub{ margin:0 0 6px; max-width:36ch; text-align:right; }
}

/* grade: 12 colunas, unidade de 110px; bloco baixo = 2 unidades, alto = 3 */
.grade{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(110px,auto); gap:16px;
  grid-template-areas:
    "ex ex ex ex ex ex ch ch ch ag ag ag"
    "ex ex ex ex ex ex ch ch ch ag ag ag"
    "ex ex ex ex ex ex ch ch ch vz vz vz"
    "fo fo fo fo fo fo la la la vz vz vz"
    "fo fo fo fo fo fo la la la vz vz vz"
    "vi vi vi sc sc sc sc sc tc tc tc tc"
    "vi vi vi sc sc sc sc sc tc tc tc tc"
    "vi vi vi el el el el fa fa fa fa fa"
    "vi vi vi el el el el fa fa fa fa fa"
    "te te te te te te da da da lo lo lo"
    "te te te te te te da da da lo lo lo"; }
.b{ position:relative; border-radius:var(--r); padding:24px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  opacity:0; transform:translateY(24px); animation:sobe .6s forwards; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s; }
a.b:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 24px 48px -20px rgba(0,0,0,.35); }
.b .cat{ display:block; margin-bottom:auto; padding-bottom:40px; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.b .seta{ position:absolute; top:20px; right:20px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; opacity:0; transform:translate(-6px,6px); transition:.3s; }
a.b:hover .seta{ opacity:1; transform:none; }
.b h2{ font-size:40px; font-weight:800; letter-spacing:-.03em; margin-bottom:8px; }
.b.m h2{ font-size:34px; } .b.p h2{ font-size:28px; }
.b p{ font-size:15px; line-height:1.45; opacity:.9; }

.eximia{ grid-area:ex; background:var(--azul); }
.chord{ grid-area:ch; background:var(--laranja); }
.agora{ grid-area:ag; background:var(--verde); }
.vez{ grid-area:vz; background:var(--amarelo); color:var(--ink); } .vez p{ opacity:.8; }
.forja{ grid-area:fo; background:var(--preto); }
.lavra{ grid-area:la; background:var(--roxo); }
.sci{ grid-area:sc; background:var(--ciano); }
.tocca{ grid-area:tc; background:var(--rosa); }
.elo{ grid-area:el; background:var(--teal); }
.farol{ grid-area:fa; background:var(--ardosia); }
.vitrine{ grid-area:vi; background:var(--tinta); }
.teia{ grid-area:te; background:var(--lavanda); color:var(--ink); } .teia p{ opacity:.8; } .teia .seta{ background:rgba(0,0,0,.08); }
.dash{ grid-area:da; background:none; border:2px dashed #B8B2A6; color:#7A746A; } .dash .cat{ opacity:1; }
.login{ grid-area:lo; background:#fff; border:1.5px solid var(--linha); color:var(--ink); }
.login .cat{ color:var(--mute); }
.login h2{ font-size:22px; } .login p{ color:var(--mute); }

/* enfeites: ficam no fluxo, entre a etiqueta e o título, e só usam o espaço que sobra */
.enf{ flex:1 1 0; min-height:0; overflow:hidden; display:flex; align-items:center; margin:6px 0 10px; }
.enf.dir{ flex:1 0 auto; justify-content:flex-end; overflow:visible; }
.enf>*{ flex:0 0 auto; max-width:100%; }
.orn .cat{ padding-bottom:0; }

.eximia .num{ text-align:right; }
.eximia .num b{ display:block; font-size:clamp(48px,7vw,88px); font-weight:800; letter-spacing:-.05em; line-height:1; }
.eximia .num span{ font-size:15px; color:#CBD5FF; }

.onda{ display:flex; align-items:center; gap:6px; height:80px; }
.onda i{ width:8px; border-radius:4px; background:#fff; opacity:.9; animation:onda 1.1s ease-in-out infinite; }

.qr{ display:grid; grid-template-columns:repeat(5,12px); gap:4px; }
.qr i{ width:12px; height:12px; background:#fff; opacity:.3; animation:pisca 3s infinite; }

.vez .senha{ font-size:56px; font-weight:800; letter-spacing:-.04em; opacity:.85; transition:opacity .25s; }

.commits{ display:grid; grid-template-columns:repeat(13,10px); gap:4px; }
.commits i{ width:10px; height:10px; border-radius:50%; background:#fff; opacity:.15; transition:opacity .4s; }

.etapas{ position:relative; width:100%; height:40px; }
.etapas .trilho{ position:absolute; left:0; right:0; top:9px; height:3px; background:rgba(255,255,255,.3); border-radius:2px; }
.etapas .cheio{ position:absolute; left:0; top:9px; height:3px; background:#fff; border-radius:2px; width:0; transition:width 1.2s ease-in-out; }
.etapas span{ position:absolute; top:0; width:21px; height:21px; margin-left:-10px; border-radius:50%; border:3px solid #fff; background:var(--roxo); transition:background .4s; }
.etapas small{ position:absolute; top:28px; font-size:11px; letter-spacing:.06em; opacity:.85; transform:translateX(-50%); white-space:nowrap; }
.etapas[data-p="2"] .cheio{ width:50%; } .etapas[data-p="3"] .cheio{ width:100%; }
.etapas[data-p="1"] span:nth-of-type(1), .etapas[data-p="2"] span:nth-of-type(-n+2), .etapas[data-p="3"] span{ background:#fff; }

.paginas{ position:relative; width:110px; height:78px; }
.paginas i{ position:absolute; left:0; top:0; width:46px; height:60px; border-radius:6px; background:#fff; opacity:.92; transform:translateX(90px) rotate(8deg); animation:pagina 6s infinite; }
.paginas i::before, .paginas i::after{ content:""; position:absolute; left:9px; right:9px; height:3px; border-radius:2px; background:var(--ciano); opacity:.35; }
.paginas i::before{ top:14px; } .paginas i::after{ top:24px; right:20px; }
.paginas i:nth-child(2){ animation-delay:1.5s; } .paginas i:nth-child(3){ animation-delay:3s; }
.paginas i.dup{ animation-name:paginadup; animation-delay:4.5s; }

.ondas{ position:relative; width:80px; height:80px; }
.ondas i{ position:absolute; inset:0; border-radius:50%; border:2px solid #fff; opacity:0; animation:onda2 2.4s ease-out infinite; }
.ondas i:nth-child(2){ animation-delay:.8s; } .ondas i:nth-child(3){ animation-delay:1.6s; }
.ondas b{ position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px; border-radius:50%; background:#fff; animation:pulso 2.4s infinite; }

.elos{ display:flex; }
.elos i{ width:44px; height:44px; border-radius:50%; border:5px solid #fff; margin-left:-12px; opacity:.9; animation:elo 3s ease-in-out infinite; }
.elos i:nth-child(2){ animation-delay:.3s; } .elos i:nth-child(3){ animation-delay:.6s; }
.uptime{ width:180px; height:30px; background:repeating-linear-gradient(90deg,#fff 0 4px,transparent 4px 7px); opacity:.85; position:relative; }
.uptime::after{ content:""; position:absolute; top:0; bottom:0; left:126px; width:4px; background:#F59E0B; animation:pulso 2.4s infinite; }
.malha{ width:120px; height:64px; color:var(--ink); }
.agenda{ display:flex; align-items:center; gap:18px; width:100%; }
.slots{ list-style:none; padding:0; flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.slots li{ display:flex; align-items:baseline; gap:8px; padding:9px 12px; border-radius:12px; background:rgba(255,255,255,.07); font-size:13px; color:rgba(255,255,255,.7); white-space:nowrap; animation:slot 6s infinite; }
.slots li:nth-child(2){ animation-delay:2s; } .slots li:nth-child(3){ animation-delay:4s; }
.slots b{ font-size:16px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.reel{ flex:0 0 auto; width:64px; height:96px; overflow:visible; animation:reel 4s ease-in-out infinite; }
.reel .play{ animation:pulso 2s infinite; transform-box:fill-box; transform-origin:center; }
.reel .ponteiro{ animation:ponteiro 4s linear infinite; transform-box:view-box; transform-origin:38px 60px; }
.malha circle{ animation:pulso 3s infinite; transform-box:fill-box; transform-origin:center; }
.malha circle:nth-child(2){ animation-delay:.5s; } .malha circle:nth-child(4){ animation-delay:1s; } .malha circle:nth-child(6){ animation-delay:1.5s; }

.login .bolas{ display:flex; margin-bottom:22px; }
.login .bolas i{ width:26px; height:26px; border-radius:50%; border:3px solid #fff; margin-right:-8px; transform:scale(0); animation:pop .4s forwards; }

/* chamada final */
.cta{ margin-top:16px; background:var(--laranja); border-radius:var(--r); padding:40px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; opacity:0; animation:sobe .6s 1.3s forwards; }
.cta h3{ font-size:clamp(24px,3vw,36px); font-weight:800; letter-spacing:-.03em; }
.cta p{ color:#FFE0D6; margin-top:8px; }
.cta button{ background:#fff; color:var(--laranja); font:inherit; font-weight:700; padding:16px 36px; border:0; border-radius:999px; cursor:pointer; white-space:nowrap; transition:transform .3s; }
.cta button:hover{ transform:scale(1.04); }

.rodape{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13px; color:#777; margin-top:48px; }
.rodape nav{ display:flex; gap:20px; } .rodape a:hover{ color:var(--ink); }

/* conta (login único) */
.conta{ position:relative; width:112px; height:44px; display:flex; align-items:center; justify-content:flex-end; flex:none; }
.conta-skel{ width:44px; height:44px; border-radius:50%; border:1px solid var(--linha); background:linear-gradient(90deg,#EEEAE2 0%,#F7F5F0 50%,#EEEAE2 100%); background-size:200% 100%; animation:conta-skel 1.2s linear infinite; }
.conta-entrar{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 22px; border-radius:999px; background:var(--ink); color:#fff; font-weight:600; font-size:14.5px; transition:transform .2s; }
.conta-entrar:hover{ transform:scale(1.04); }
.conta-avatar{ width:44px; height:44px; padding:0; border-radius:50%; border:0; background:var(--azul); color:#fff; font:700 16px Inter,sans-serif; cursor:pointer; overflow:hidden; box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--linha); }
.conta-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.conta-menu{ position:absolute; top:calc(100% + 12px); right:0; width:260px; padding:10px; border-radius:20px; background:#fff; border:1px solid var(--linha); box-shadow:0 20px 50px rgba(0,0,0,.15); z-index:40; }
.conta-menu[hidden]{ display:none; }
.conta-quem{ padding:8px 10px 12px; border-bottom:1px solid var(--linha); margin-bottom:6px; }
.conta-quem b{ display:block; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conta-quem span{ display:block; font-size:12.5px; color:var(--mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conta-rotulo{ margin:8px 10px 4px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#999; }
.conta-menu a{ display:block; padding:9px 10px; border-radius:12px; font-size:14.5px; color:var(--mute); }
.conta-menu a:hover, .conta-menu a:focus-visible{ background:var(--bg); color:var(--ink); }
.conta-menu .conta-sair{ margin-top:6px; border-top:1px solid var(--linha); border-radius:0 0 12px 12px; padding-top:12px; }

/* painel de contato */
.painel-fundo{ position:fixed; inset:0; background:rgba(27,27,27,.45); z-index:60; opacity:0; transition:opacity .35s; }
.painel-fundo[data-aberto]{ opacity:1; }
.painel{ position:fixed; top:0; right:0; bottom:0; width:min(480px,100%); padding:32px 28px; background:#fff; z-index:61; overflow:auto; transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.painel[data-aberto]{ transform:none; }
.painel[hidden]{ display:block; visibility:hidden; } .painel[data-aberto][hidden]{ visibility:visible; }
.painel-fechar{ position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:50%; border:1px solid var(--linha); background:#fff; color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.painel-fechar svg{ width:18px; height:18px; }
.painel .eyebrow{ font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.painel h2{ font-size:28px; letter-spacing:-.02em; margin:8px 0 10px; }
.painel-sub{ color:var(--mute); margin:0 0 28px; font-size:15px; }
.painel form{ display:flex; flex-direction:column; gap:16px; }
.painel label{ display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--mute); }
.painel input, .painel textarea{ font:inherit; font-size:16px; color:var(--ink); padding:12px 14px; border-radius:12px; border:1.5px solid var(--linha); background:var(--bg); }
.painel input:focus, .painel textarea:focus{ outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(47,73,224,.15); }
.painel input[aria-invalid="true"], .painel textarea[aria-invalid="true"]{ border-color:#C62828; }
.campo-erro{ margin:0; font-size:13px; color:#C62828; } .campo-erro:empty{ display:none; }
.painel .isca{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-aviso{ margin:0; min-height:1.3em; font-size:14px; color:var(--mute); }
.form-aviso[data-tipo="erro"]{ color:#C62828; } .form-aviso[data-tipo="ok"]{ color:var(--verde); }
.painel .btn-primary{ align-self:flex-start; display:inline-flex; align-items:center; gap:10px; background:var(--laranja); color:#fff; font:inherit; font-weight:700; padding:14px 28px; border:0; border-radius:999px; cursor:pointer; }
.painel .btn-primary[disabled]{ opacity:.6; cursor:wait; }
.painel .btn-primary .knob{ display:none; }

/* animações */
@keyframes sobe{ to{ opacity:1; transform:none; } }
@keyframes pop{ to{ transform:scale(1); } }
@keyframes onda{ 0%,100%{ height:var(--h); } 50%{ height:calc(var(--h)*.35); } }
@keyframes pisca{ 0%,100%{ opacity:.3; } 50%{ opacity:.95; } }
@keyframes pagina{ 0%{ transform:translateX(90px) rotate(8deg); opacity:0; } 12%{ opacity:.92; } 25%,100%{ transform:translateX(var(--x)) rotate(var(--r)); opacity:.92; } }
@keyframes paginadup{ 0%{ transform:translateX(90px) rotate(8deg); opacity:0; } 12%{ opacity:.92; transform:translateX(30px) rotate(4deg); } 22%{ opacity:.92; transform:translateX(30px) rotate(4deg) scale(1); } 30%,100%{ opacity:0; transform:translateX(30px) rotate(20deg) scale(.4); } }
@keyframes onda2{ 0%{ transform:scale(.2); opacity:.9; } 100%{ transform:scale(1.1); opacity:0; } }
@keyframes reel{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-6px) rotate(-4deg); } }
@keyframes slot{ 0%,30%{ background:rgba(243,176,58,.22); box-shadow:inset 0 0 0 1.5px #F3B03A; } 36%,100%{ background:rgba(255,255,255,.07); box-shadow:none; } }
@keyframes ponteiro{ to{ transform:rotate(360deg); } }
@keyframes elo{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-6px); } }
@keyframes pulso{ 0%,100%{ transform:scale(1); } 10%{ transform:scale(1.4); } }
@keyframes conta-skel{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* telas largas: seis fatias */
@media (min-width:1700px){
  .wrap{ max-width:1920px; }
  .grade{ grid-template-areas:
    "ex ex ex ex ch ch ch ag ag ag vz vz"
    "ex ex ex ex ch ch ch ag ag ag vz vz"
    "ex ex ex ex ch ch ch fo fo fo vz vz"
    "la la la sc sc sc sc fo fo fo vi vi"
    "la la la sc sc sc sc tc tc tc vi vi"
    "el el el te te te te tc tc tc vi vi"
    "el el el te te te te tc tc tc vi vi"
    "fa fa fa fa fa da da da lo lo lo lo"
    "fa fa fa fa fa da da da lo lo lo lo"; }
  .b h2{ font-size:34px; } .b.m h2, .b.p h2{ font-size:30px; }
}
/* tablet */
@media (max-width:1100px){
  .grade{ grid-auto-rows:minmax(100px,auto); grid-template-areas:
    "ex ex ex ex ex ex ex ex ch ch ch ch"
    "ex ex ex ex ex ex ex ex ch ch ch ch"
    "ag ag ag ag vz vz vz vz ch ch ch ch"
    "ag ag ag ag vz vz vz vz la la la la"
    "fo fo fo fo fo fo fo fo la la la la"
    "fo fo fo fo fo fo fo fo sc sc sc sc"
    "tc tc tc tc da da da da sc sc sc sc"
    "tc tc tc tc da da da da lo lo lo lo"
    "tc tc tc tc da da da da lo lo lo lo"
    "el el el el el el fa fa fa fa fa fa"
    "el el el el el el fa fa fa fa fa fa"
    "te te te te te te vi vi vi vi vi vi"
    "te te te te te te vi vi vi vi vi vi"; }
  .vitrine .enf{ flex:1 0 auto; overflow:visible; } .slots{ display:none; } .agenda{ justify-content:flex-end; } .reel{ width:48px; height:72px; }
}
/* celular grande */
@media (max-width:760px){
  .grade{ grid-auto-rows:minmax(90px,auto); grid-template-areas:
    "ex ex ex ex ex ex ex ex ex ex ex ex"
    "ex ex ex ex ex ex ex ex ex ex ex ex"
    "ex ex ex ex ex ex ex ex ex ex ex ex"
    "ch ch ch ch ch ch ag ag ag ag ag ag"
    "ch ch ch ch ch ch ag ag ag ag ag ag"
    "vz vz vz vz vz vz la la la la la la"
    "vz vz vz vz vz vz la la la la la la"
    "fo fo fo fo fo fo fo fo fo fo fo fo"
    "fo fo fo fo fo fo fo fo fo fo fo fo"
    "sc sc sc sc sc sc tc tc tc tc tc tc"
    "sc sc sc sc sc sc tc tc tc tc tc tc"
    "el el el el el el fa fa fa fa fa fa"
    "el el el el el el fa fa fa fa fa fa"
    "te te te te te te vi vi vi vi vi vi"
    "te te te te te te vi vi vi vi vi vi"
    "da da da da da da lo lo lo lo lo lo"
    "da da da da da da lo lo lo lo lo lo"; }
  .b{ padding:20px; } .b h2, .b.m h2, .b.p h2{ font-size:24px; } .b .cat{ font-size:11px; } .b p{ font-size:14px; }
  .eximia .num b{ font-size:48px; } .onda{ height:56px; } .onda i{ width:5px; }
  .qr{ grid-template-columns:repeat(5,9px); gap:3px; } .qr i{ width:9px; height:9px; }
  .vez .senha{ font-size:36px; } .commits{ grid-template-columns:repeat(10,8px); gap:3px; } .commits i{ width:8px; height:8px; } .commits i:nth-child(n+41){ display:none; }
  .paginas{ transform:scale(.7); transform-origin:right center; } .ondas{ width:56px; height:56px; } .etapas{ display:none; } .elos i{ width:32px; height:32px; border-width:4px; } .uptime{ width:130px; } .uptime::after{ left:91px; } .malha{ width:90px; height:48px; } .reel{ width:36px; height:54px; }
  .login .bolas i{ width:20px; height:20px; } .cta{ padding:28px; }
  .conta{ width:auto; min-width:44px; } .conta-entrar{ padding:0 16px; }
}
/* celular pequeno: uma coluna, cards baixos */
@media (max-width:480px){
  .topo{ height:48px; } .cabeca{ margin:16px 0 20px; }
  .grade{ gap:10px; grid-template-columns:1fr; grid-auto-rows:auto; grid-template-areas:"ex" "ch" "ag" "vz" "fo" "la" "sc" "tc" "el" "fa" "te" "vi" "da" "lo"; }
  .b{ padding:18px; justify-content:center; } .b .cat{ margin-bottom:6px; padding-bottom:0; }
  .b h2, .b.m h2, .b.p h2{ font-size:22px; margin-bottom:4px; } .b p{ font-size:13.5px; }
  .eximia .num{ text-align:left; margin:4px 0 10px; } .eximia .num b{ font-size:40px; }
  .enf:not(.dir), .onda, .qr, .commits, .vez .senha, .paginas, .ondas, .etapas, .elos, .uptime, .malha, .reel, .b .seta{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; animation-delay:0s!important; transition:none!important; }
}