/* ============================================================
   TOKENS — paleta extraída dos arquivos de logo da Dialtech
   navy #0B1160 · vermelho #C62F2A
   ============================================================ */
:root{
  --navy-900:#05093A;
  --navy-800:#0B1160;
  --navy-700:#16217F;
  --navy-600:#1E2C96;
  --red:#C62F2A;
  --red-lt:#EF5A50;
  --paper:#EEF0F6;
  --panel:#FFFFFF;
  --muted:#55608A;
  --muted-dark:#9AA5D4;
  --line-light:#D2D7E6;
  --line-dark:rgba(238,240,246,.16);

  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --wrap:1180px;
  --gut:clamp(20px,5vw,48px);
  --sec:clamp(64px,9vw,116px);
  --r:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--navy-900);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.028em;line-height:1.03;margin:0;color:var(--navy-800)}
h1{font-size:clamp(2.2rem,6vw,4.2rem)}
h2{font-size:clamp(1.85rem,4.1vw,2.9rem)}
h3{font-size:1.1rem;letter-spacing:-.015em;line-height:1.25}
p{margin:0}
.on-dark h1,.on-dark h2,.on-dark h3{color:#FFF}

.eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:18px}
.on-dark .eyebrow{color:var(--red-lt)}
.lead{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--muted);max-width:60ch}
.on-dark .lead{color:var(--muted-dark)}

.todo{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;background:var(--red);color:#fff;padding:2px 7px;border-radius:2px;white-space:nowrap;font-weight:500}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--red-lt);outline-offset:3px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:15px 26px;border-radius:var(--r);border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:#A82520;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border-color:var(--line-dark)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-navy{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn-navy:hover{background:var(--navy-700);transform:translateY(-1px)}
.btn-out{background:transparent;color:var(--navy-800);border-color:var(--line-light)}
.btn-out:hover{border-color:var(--navy-800)}
.btn .arw{transition:transform .18s}
.btn:hover .arw{transform:translateX(4px)}

/* HEADER — claro, para o logo institucional ler corretamente */
.hdr{position:sticky;top:0;z-index:60;background:var(--panel);border-bottom:1px solid var(--line-light)}
.hdr-in{display:flex;align-items:center;gap:24px;height:76px}
.logo{display:block;height:42px;width:auto}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.nav{margin-left:auto;display:flex;align-items:center;gap:20px}
/* nowrap: "Co-pilot" e "EasyLOG®" quebravam no hífen e no ®.
   O menu inteiro é apertado, por isso o tamanho e o gap são contidos
   e a versão de hambúrguer entra já em 1200px — abaixo disso os sete
   itens mais o botão não cabem em uma linha. */
.nav a{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .16s;white-space:nowrap}
.nav a:hover{color:var(--navy-800)}
.nav .btn{padding:11px 18px;font-size:.71rem;color:#fff}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-light);color:var(--navy-800);width:42px;height:38px;border-radius:var(--r);cursor:pointer;font-size:1.1rem;line-height:1}
@media(max-width:1200px){
  .burger{display:block}
  .nav{position:absolute;top:76px;left:0;right:0;background:var(--panel);flex-direction:column;
    align-items:stretch;gap:0;padding:8px var(--gut) 20px;border-bottom:1px solid var(--line-light);
    display:none;box-shadow:0 14px 30px rgba(5,9,58,.09)}
  .nav a{white-space:normal}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line-light)}
  .nav .btn{margin-top:16px;justify-content:center;border-bottom:none}
}
@media(max-width:420px){.logo{height:34px}.hdr-in{height:66px}.nav{top:66px}}

/* HERO */
.hero{background:var(--navy-900);color:#fff;padding:clamp(56px,8vw,92px) 0 0;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(115% 85% at 14% -5%,rgba(30,44,150,.75),transparent 62%);pointer-events:none}
.hero-in{position:relative;z-index:1}
.hero h1{max-width:16ch}
.hero h1 em{font-style:normal;color:var(--red-lt)}
.hero .lead{margin-top:26px;font-size:clamp(1.05rem,1.7vw,1.24rem)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* SIGNATURE — trilha da chamada */
.trail{margin-top:clamp(52px,7vw,80px);padding-bottom:clamp(52px,7vw,76px)}
.trail-hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark);border-bottom:1px solid var(--line-dark);padding-bottom:12px}
.path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.step{position:relative;padding:30px 20px 30px 0}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line-dark)}
.step::after{content:"";position:absolute;top:-2px;left:0;width:26%;height:5px;background:linear-gradient(90deg,transparent,var(--red-lt));opacity:0;animation:pulse 5.4s linear infinite}
.step:nth-child(1)::after{animation-delay:0s}
.step:nth-child(2)::after{animation-delay:.42s}
.step:nth-child(3)::after{animation-delay:.84s}
.step:nth-child(4)::after{animation-delay:1.26s}
.step:nth-child(5)::after{animation-delay:1.68s}
@keyframes pulse{0%{transform:translateX(0);opacity:0}4%{opacity:1}16%{transform:translateX(300%);opacity:1}22%{transform:translateX(300%);opacity:0}100%{transform:translateX(300%);opacity:0}}
.step-n{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--red-lt);display:block;margin-bottom:14px}
.step-t{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;display:block;color:#fff}
.step-d{font-size:.87rem;color:var(--muted-dark);margin-top:6px;display:block;line-height:1.45}
.trail-base{border-top:1px solid var(--line-dark);padding-top:14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark);display:flex;align-items:center;gap:10px}
.trail-base .bar{flex:1;height:1px;background:linear-gradient(90deg,var(--red-lt),rgba(239,90,80,.12))}
@keyframes pulseV{0%{transform:translateY(0);opacity:0}4%{opacity:1}16%{transform:translateY(300%);opacity:1}22%{transform:translateY(300%);opacity:0}100%{transform:translateY(300%);opacity:0}}
@media(max-width:860px){
  .path{grid-template-columns:1fr}
  .step{padding:20px 0 20px 22px}
  .step::before{top:0;left:0;right:auto;bottom:0;width:1px;height:auto}
  .step::after{top:0;left:-2px;width:5px;height:26%;background:linear-gradient(180deg,transparent,var(--red-lt));animation-name:pulseV}
}

/* STRIP */
.strip{background:var(--navy-800);color:#fff}
.strip-in{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark)}
.strip-i{background:var(--navy-800);padding:34px clamp(18px,3vw,34px)}
.strip-i b{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--red-lt);display:block;margin-bottom:10px;font-weight:500}
.strip-i p{font-size:.94rem;line-height:1.45}
@media(max-width:860px){.strip-in{grid-template-columns:1fr}}

/* SECTIONS */
.sec{padding:var(--sec) 0}
.sec-dark{background:var(--navy-900);color:#fff}
.sec-hd{max-width:56ch;margin-bottom:clamp(38px,5vw,54px)}
.sec-hd p{margin-top:20px}

/* MÓDULOS */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light)}
.mod{background:var(--panel);padding:clamp(24px,3vw,32px);transition:background .2s}
.mod:hover{background:#F7F8FC}
.mod-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:16px}
.mod h3{margin-bottom:12px}
.mod p{font-size:.93rem;color:var(--muted);line-height:1.55}
.mod ul{margin:12px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.03em;line-height:1.85}
.mod ul li::before{content:"— ";color:var(--red)}
@media(max-width:960px){.mods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.mods{grid-template-columns:1fr}}

/* NÚMEROS */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);margin-top:clamp(38px,5vw,54px)}
.num{background:var(--navy-900);padding:28px clamp(14px,2.4vw,26px)}
.num b{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.03em;color:#fff;display:block;line-height:1}
.num span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark);display:block;margin-top:12px;line-height:1.5}
@media(max-width:820px){.nums{grid-template-columns:1fr 1fr}}

/* DVE */
.dve{background:var(--panel);border:1px solid var(--line-light);border-left:3px solid var(--red);padding:clamp(28px,4vw,44px);border-radius:var(--r)}
.dve-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line-light)}
.chip{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--navy-800);background:var(--paper);border:1px solid var(--line-light);padding:6px 11px;border-radius:2px}

/* IA */
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,70px);align-items:start}
@media(max-width:960px){.ai-grid{grid-template-columns:1fr}}
.ai-list{list-style:none;margin:34px 0 0;padding:0}
.ai-list li{border-top:1px solid var(--line-dark);padding:22px 0}
.ai-list li:last-child{border-bottom:1px solid var(--line-dark)}
.ai-list h3{margin-bottom:8px}
.ai-list p{font-size:.94rem;color:var(--muted-dark)}


/* CAPTURAS DE TELA */
.shot{background:var(--panel);border:1px solid var(--line-light);border-radius:var(--r);overflow:hidden;box-shadow:0 12px 34px rgba(5,9,58,.10);margin:0}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:11px 14px;border-top:1px solid var(--line-light);background:#F6F7FC;line-height:1.5}
.on-dark .shot{border-color:rgba(255,255,255,.2)}
.shot-stack{display:grid;gap:18px}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;margin-top:26px}
.shots .txt{font-size:.93rem;color:var(--muted);line-height:1.55}
.shots h3{margin-bottom:10px}
.shot-wide{margin-top:26px}
.shot-note{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted);margin-top:22px;border-left:2px solid var(--red);padding-left:14px;line-height:1.7}
@media(max-width:960px){.shots{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.shots{grid-template-columns:1fr}}

/* SEGMENTOS */
.segs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.seg{background:var(--panel);border:1px solid var(--line-light);padding:26px;border-radius:var(--r)}
.seg h3{margin-bottom:10px}
.seg p{font-size:.92rem;color:var(--muted);line-height:1.55}
@media(max-width:960px){.segs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.segs{grid-template-columns:1fr}}

/* DUAS COLUNAS + FATOS */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,70px);align-items:start}
@media(max-width:960px){.two{grid-template-columns:1fr}}
.facts{list-style:none;margin:0;padding:0}
.facts li{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line-light);font-size:.95rem;line-height:1.5}
.facts li:last-child{border-bottom:1px solid var(--line-light)}
.facts b{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);min-width:96px;flex-shrink:0;padding-top:4px;font-weight:500}

/* CLIENTES */
/* Grade de logos de clientes.
   minmax(0,1fr) e obrigatorio: com 1fr puro, o minimo da coluna vira o
   tamanho natural da imagem, e um logo grande estoura a largura do
   container. Altura fixa no lugar de aspect-ratio + porcentagem, que
   nao resolve de forma confiavel quando a celula e um item de grid. */
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.logo-cell{
  background:var(--panel);border:1px solid var(--line-light);border-radius:var(--r);
  min-height:120px;display:grid;place-items:center;padding:20px 18px;overflow:hidden;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:#A3ABC6;
  text-transform:uppercase;text-align:center;
}
/* max-height em pixel iguala o peso visual entre logo alto e logo largo */
.logo-cell img{max-width:100%;max-height:60px;width:auto;height:auto;object-fit:contain;display:block}
.logos-vazio{
  grid-column:1/-1;min-height:auto;padding:32px;
  border-style:dashed;text-transform:none;letter-spacing:.02em;font-size:.78rem;
}
@media(max-width:1100px){.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}.logo-cell{min-height:104px}}
@media(max-width:470px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* FORM */
.form-sec{background:var(--navy-900);color:#fff}
.form-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,76px);align-items:start}
@media(max-width:960px){.form-grid{grid-template-columns:1fr}}
.direct{margin-top:32px;border-top:1px solid var(--line-dark);padding-top:24px;font-size:.95rem}
.direct a{color:var(--red-lt);text-decoration:none;font-family:var(--mono);font-size:.92rem}
.direct a:hover{text-decoration:underline}
.direct span{display:block;color:var(--muted-dark);font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.direct .d-item{margin-bottom:18px}
.direct address{font-style:normal;color:#fff;font-size:.93rem;line-height:1.5}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{display:flex;flex-direction:column;gap:7px}
.f.full{grid-column:1/-1}
.f label{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-dark)}
.f input,.f select,.f textarea{background:var(--navy-800);border:1px solid var(--line-dark);color:#fff;padding:13px 14px;border-radius:var(--r);font-family:var(--body);font-size:.98rem;width:100%}
.f textarea{min-height:112px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:#7B85B8}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted-dark) 50%),linear-gradient(135deg,var(--muted-dark) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.f-err{color:var(--red-lt);font-family:var(--mono);font-size:.7rem;display:none}
.f.invalid input,.f.invalid select,.f.invalid textarea{border-color:var(--red-lt)}
.f.invalid .f-err{display:block}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:8px}
.form-foot small{color:var(--muted-dark);font-size:.82rem;max-width:38ch;line-height:1.45}
.sent{grid-column:1/-1;border:1px solid var(--red-lt);border-left-width:3px;background:rgba(239,90,80,.1);padding:20px;border-radius:var(--r);display:none}
.sent.on{display:block}
.sent.ok{border-color:#4ADE80;background:rgba(74,222,128,.12)}
.sent b{font-family:var(--display);font-size:1.05rem;display:block;margin-bottom:6px;color:#fff}
.sent p{font-size:.92rem;color:var(--muted-dark)}
.sent a{color:var(--red-lt)}
.sent.ok a{color:#86EFAC}

.consent{gap:10px}
.check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-family:var(--body);text-transform:none;letter-spacing:0}
.check input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--red);cursor:pointer}
.check span{font-size:.87rem;color:var(--muted-dark);line-height:1.5}
.check a{color:var(--red-lt)}
.f.invalid .check span{color:#fff}

#submitBtn[disabled]{opacity:.6;cursor:progress}

/* Autopreenchimento do Chrome: por padrão ele pinta o campo de branco com
   texto escuro, o que num formulário sobre fundo azul-marinho parece
   defeito. Não há propriedade que desligue isso; o caminho é cobrir o
   fundo com uma sombra interna e forçar a cor do texto. */
.f input:-webkit-autofill,
.f input:-webkit-autofill:hover,
.f input:-webkit-autofill:focus,
.f input:-webkit-autofill:active,
.f textarea:-webkit-autofill,
.f select:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px var(--navy-800) inset;
  box-shadow:0 0 0 1000px var(--navy-800) inset;
  caret-color:#fff;
  border-color:var(--line-dark);
  /* a transição longa impede o Chrome de repintar o branco depois */
  transition:background-color 100000s ease-in-out 0s;
}
.f input:-webkit-autofill::first-line{
  font-family:var(--body);font-size:.98rem;color:#fff;
}

/* ============================================================
   WIDGET WHATSAPP — bloco autocontido, ver LEIA-ME
   ============================================================ */
/* Pilha flutuante do canto inferior direito. Recebe também o botão de
   voltar ao topo, inserido por js/topo.js como primeiro item.
   pointer-events: o contêiner precisa deixar o clique passar nas áreas
   vazias, senão ele cobre e engole o clique dos botões que o cercam. */
.wa{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:90;
    display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.wa > *{pointer-events:auto}
.wa-btn{
  display:flex;align-items:center;gap:10px;background:#25D366;color:#0A2E17;
  border-radius:999px;padding:14px 20px 14px 16px;text-decoration:none;
  font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 10px 26px rgba(5,9,58,.28);transition:transform .18s,box-shadow .18s,background .18s;
}
.wa-btn:hover{background:#1FBE5A;transform:translateY(-2px);box-shadow:0 14px 32px rgba(5,9,58,.34)}
.wa-btn svg{width:24px;height:24px;flex-shrink:0;fill:currentColor}
.wa-bubble{
  position:absolute;bottom:100%;right:0;margin-bottom:12px;
  max-width:260px;background:var(--panel);color:var(--navy-800);
  border:1px solid var(--line-light);border-radius:var(--r);padding:16px 34px 16px 16px;
  box-shadow:0 14px 34px rgba(5,9,58,.20);font-size:.88rem;line-height:1.45;
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s,transform .3s;
}
.wa-bubble.show{opacity:1;transform:none;pointer-events:auto}
.wa-bubble strong{display:block;font-family:var(--display);font-size:.98rem;margin-bottom:5px}
.wa-bubble span{color:var(--muted);font-size:.85rem}
.wa-close{
  position:absolute;top:6px;right:8px;background:none;border:0;color:var(--muted);
  font-size:1.1rem;line-height:1;cursor:pointer;padding:4px 6px;border-radius:3px;
}
.wa-close:hover{color:var(--navy-800);background:var(--paper)}
@media(max-width:520px){
  .wa-btn{padding:15px;border-radius:50%}
  .wa-label{display:none}
  .wa-bubble{max-width:min(260px,calc(100vw - 48px))}
}
@media(max-width:620px){.fields{grid-template-columns:1fr}}

/* FOOTER */
.ftr{background:var(--navy-800);color:var(--muted-dark);border-top:1px solid var(--line-dark);padding:56px 0 28px;font-size:.9rem}
.ftr-logo{height:56px;width:auto;margin-bottom:18px}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
@media(max-width:860px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.ftr-grid{grid-template-columns:1fr}}
.ftr h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:0 0 16px;font-weight:500}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:10px}
.ftr a{text-decoration:none;transition:color .16s}
.ftr a:hover{color:var(--red-lt)}
.ftr address{font-style:normal;line-height:1.6}
.ftr-bot{margin-top:44px;padding-top:20px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}