/* ==========================================================================
   BULLTECN — Sistema de design
   Reescrito em 24/07/2026 para padrão de marketing B2B internacional

   REFERÊNCIAS APLICADAS (não são opinião — foram pesquisadas):
   · Topcon / Digi-Star (líder internacional da categoria): manchete voltada
     a resultado, prova social cedo, cards comparativos de produto.
   · Padrão B2B industrial 2026: LCP < 2s, hierarquia para o comprador
     técnico, FAQ com schema, CTA repetido após cada bloco de prova.

   PRINCÍPIOS
   1. Escala tipográfica e de espaçamento fixas (nada de números soltos)
   2. Contraste acessível (WCAG AA) em todo texto
   3. Estados de foco visíveis para navegação por teclado
   4. Um único arquivo CSS — velocidade é parte do padrão internacional
   ========================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root{
  /* marca */
  --azul-900:#0a2942;
  --azul-800:#0f3d5c;
  --azul-700:#14507a;
  --azul-600:#1a6b9a;
  --azul-100:#e8f1f7;
  --ambar:#f5a623;
  --ambar-escuro:#c47f10;
  --wa:#25d366;

  /* neutros */
  --n-900:#12191f;
  --n-700:#33414d;
  --n-600:#53616e;
  --n-400:#8a96a3;
  --n-200:#dde4ea;
  --n-100:#eef2f6;
  --n-50:#f7f9fb;
  --branco:#fff;

  /* tipografia */
  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-xs:.8125rem;
  --fs-sm:.9375rem;
  --fs-base:1.0625rem;
  --fs-md:1.1875rem;
  --fs-lg:1.4375rem;
  --fs-xl:1.75rem;
  --fs-2xl:2.25rem;
  --fs-3xl:3rem;

  /* espaçamento */
  --e-1:.25rem;  --e-2:.5rem;   --e-3:.75rem;  --e-4:1rem;
  --e-5:1.5rem;  --e-6:2rem;    --e-7:3rem;    --e-8:4rem;
  --e-9:5.5rem;

  /* forma */
  --r-sm:6px; --r:10px; --r-lg:16px; --r-full:999px;
  --sombra:0 1px 2px rgba(10,41,66,.06),0 4px 16px rgba(10,41,66,.07);
  --sombra-lg:0 8px 32px rgba(10,41,66,.13);
  --max:1160px;
}

/* ---------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--fonte);
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--n-700);
  background:var(--branco);
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{color:var(--azul-800);line-height:1.2;font-weight:750;letter-spacing:-.015em}
h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-md)}
p{margin-bottom:var(--e-4)}
p:last-child{margin-bottom:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul-600)}
strong{color:var(--n-900);font-weight:650}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--e-5)}
.centro{text-align:center}

/* acessibilidade: foco visível para quem navega por teclado */
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:var(--r-sm)}
.pular{position:absolute;left:-9999px;top:0;background:var(--azul-800);color:#fff;
  padding:var(--e-3) var(--e-4);z-index:9999;border-radius:0 0 var(--r) 0}
.pular:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------------------------------------------------------------
   3. CABEÇALHO
   --------------------------------------------------------------- */
.topo{background:var(--azul-900);color:#cfe0ee;font-size:var(--fs-xs)}
.topo .wrap{display:flex;justify-content:space-between;align-items:center;
  gap:var(--e-3);padding-block:var(--e-2);flex-wrap:wrap}
.topo a{color:#fff;text-decoration:none;font-weight:600}
.topo-dir{display:flex;align-items:center;gap:var(--e-4)}

/* seletor de idioma */
.idiomas{display:inline-flex;align-items:center;gap:2px;
  background:rgba(255,255,255,.1);border-radius:var(--r-full);padding:2px}
.idiomas a{padding:3px var(--e-3);border-radius:var(--r-full);font-size:11.5px;
  letter-spacing:.04em;color:#cfe0ee;transition:background .15s,color .15s}
.idiomas a:hover{color:#fff;background:rgba(255,255,255,.12)}
.idiomas a[aria-current]{background:#fff;color:var(--azul-900)}

.hd{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--n-200);position:sticky;top:0;z-index:100}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-5);padding-block:var(--e-3)}
.hd .logo img{max-height:48px;width:auto}
.nav{display:flex;gap:var(--e-5);align-items:center}
.nav a{color:var(--n-700);text-decoration:none;font-weight:600;font-size:var(--fs-sm);
  padding-block:var(--e-2);border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:var(--azul-700)}
.nav a[aria-current]{color:var(--azul-800);border-bottom-color:var(--ambar)}

/* botão de menu — só aparece no celular */
.menu-btn{display:none;background:none;border:1px solid var(--n-200);border-radius:var(--r-sm);
  width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;padding:0}
.menu-btn span{display:block;width:20px;height:2px;background:var(--azul-800);
  border-radius:2px;transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------------
   4. BOTÕES
   --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  padding:var(--e-3) var(--e-5);border-radius:var(--r);font-weight:700;
  font-size:var(--fs-sm);text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s;
  min-height:48px;line-height:1.2;text-align:center}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sombra)}
.btn:active{transform:translateY(0)}
.btn-wa{background:var(--wa);color:#06331a}
.btn-primario{background:var(--ambar);color:#2b1d00}
.btn-azul{background:var(--azul-800);color:#fff}
.btn-vazado{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-vazado-azul{background:transparent;color:var(--azul-800);border-color:var(--n-200)}
.btn-sm{padding:var(--e-2) var(--e-4);min-height:40px;font-size:var(--fs-xs)}
.btns{display:flex;gap:var(--e-3);flex-wrap:wrap}

.wa-flut{position:fixed;right:16px;bottom:16px;z-index:200;background:var(--wa);
  color:#06331a;padding:var(--e-3) var(--e-5);border-radius:var(--r-full);
  font-weight:700;font-size:var(--fs-sm);text-decoration:none;
  box-shadow:var(--sombra-lg);display:inline-flex;gap:var(--e-2);align-items:center}


/* ---------------------------------------------------------------
   CORREÇÃO DE CONTRASTE — texto sobre fundo escuro
   O <strong> padrão é quase preto (#12191f). Sobre o azul das seções
   escuras isso dava contraste de 2,2:1 — ilegível, principalmente no
   celular. Aqui ele (e os links) passam a herdar tom claro.
   Medido depois da correção: 8,3:1 (o mínimo aceitável é 4,5:1).
   --------------------------------------------------------------- */
.hero strong, .dest strong, .final strong, .sec-azul strong,
.pg-topo strong, .ft strong, .topo strong{ color:#fff }

.hero a:not(.btn), .dest a:not(.btn), .final a:not(.btn),
.sec-azul a:not(.btn), .pg-topo a:not(.btn){ color:#ffd591 }
.hero a:not(.btn):hover, .dest a:not(.btn):hover, .final a:not(.btn):hover,
.sec-azul a:not(.btn):hover, .pg-topo a:not(.btn):hover{ color:#fff }

/* ---------------------------------------------------------------
   BANDEIRAS no seletor de idioma
   SVG em vez de emoji: emoji de bandeira não aparece no Windows,
   que mostraria "BR" no lugar do desenho.
   --------------------------------------------------------------- */
.idiomas a{display:inline-flex;align-items:center;gap:5px;line-height:1}
.bandeira{
  width:15px;height:11px;border-radius:2px;flex-shrink:0;display:block;
  box-shadow:0 0 0 .5px rgba(0,0,0,.25);
}
@media(max-width:560px){
  .idiomas a{gap:4px;padding:3px var(--e-2)}
  .bandeira{width:14px;height:10px}
}

/* ---------------------------------------------------------------
   5. HERÓI
   Padrão internacional: não ocupar a tela inteira — deixar a próxima
   seção "espiando" para induzir a rolagem.
   --------------------------------------------------------------- */
.hero{background:linear-gradient(155deg,var(--azul-900) 0%,var(--azul-700) 100%);
  color:#e9f2f9;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -10% -60% 55%;height:70%;
  background:radial-gradient(circle,rgba(245,166,35,.16),transparent 68%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--e-7);
  align-items:center;padding-block:var(--e-8);position:relative;z-index:1}
.hero h1{color:#fff;font-size:var(--fs-3xl);margin-bottom:var(--e-4)}
.hero .lead{font-size:var(--fs-md);color:#c9dcea;margin-bottom:var(--e-5);max-width:36ch}
.hero .selo{display:inline-flex;align-items:center;gap:var(--e-2);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-full);
  padding:var(--e-2) var(--e-4);font-size:var(--fs-xs);font-weight:650;
  color:#d8e8f4;margin-bottom:var(--e-4)}
.hero figure{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra-lg)}
.hero-apoio{margin-top:var(--e-5);font-size:var(--fs-xs);color:#a8c3d6}

/* prova social logo abaixo do herói (padrão internacional) */
.prova{background:var(--n-50);border-bottom:1px solid var(--n-200)}
.prova .wrap{padding-block:var(--e-5)}
.prova-rot{text-align:center;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.09em;color:var(--n-600);font-weight:700;margin-bottom:var(--e-4)}
/* Faixa de logos de cliente.
   Sem filtro preto-e-branco de propósito: as logos têm origens diferentes
   (algumas com fundo sólido, outras transparentes) e o filtro deixaria
   uma aparecendo como mancha cinza no meio das demais.
   Cada logo ganha uma caixa de altura fixa para alinhar apesar de
   formatos e proporções bem diferentes entre si. */
.prova-logos{display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:var(--e-5) var(--e-6)}
.prova-logos img{max-height:42px;max-width:150px;width:auto;object-fit:contain;
  opacity:.9;transition:opacity .2s,transform .2s}
.prova-logos img:hover{opacity:1;transform:scale(1.04)}

/* Logos quadradas (Berneck 1:1, Fazenda Campo 1:1) ganham mais altura.
   Medido: as demais têm proporção de 2,1:1 a 3,3:1 — com altura única
   as quadradas ficariam com 42px de largura ao lado de logos de 150px,
   parecendo encolhidas. Isto equilibra o peso visual. */
.prova-logos img.quad{max-height:58px;max-width:58px}

/* Logo muito larga (Los Lazos, 4,44:1). Com a largura máxima padrão ela
   ficaria com 34px de altura contra 42px das demais, parecendo achatada.
   Um pouco mais de largura devolve o equilíbrio. */
.prova-logos img.larga{max-width:180px}

/* ---------------------------------------------------------------
   6. SEÇÕES
   --------------------------------------------------------------- */
.sec{padding-block:var(--e-8)}
.sec-cinza{background:var(--n-50)}
.sec-azul{background:var(--azul-900);color:#cfe0ee}
.sec-azul h2,.sec-azul h3{color:#fff}

.cabeca{max-width:none;margin-bottom:var(--e-7);text-align:center}
.olho{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.09em;
  color:var(--azul-600);font-weight:750;margin-bottom:var(--e-2)}
.cabeca p{color:var(--n-600);font-size:var(--fs-md);max-width:62ch;margin-inline:auto}

/* grades */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e-5)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-5)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-4)}

/* cards */
.card{background:var(--branco);border:1px solid var(--n-200);border-radius:var(--r-lg);
  padding:var(--e-6);transition:box-shadow .18s,transform .18s;display:flex;flex-direction:column}
.card:hover{box-shadow:var(--sombra-lg);transform:translateY(-3px)}
.card .num{width:38px;height:38px;border-radius:var(--r);background:var(--azul-100);
  color:var(--azul-800);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:var(--fs-sm);margin-bottom:var(--e-4)}
.card h3{margin-bottom:var(--e-2)}
.card p{color:var(--n-600);font-size:var(--fs-sm);flex:1}
.card .maislink{margin-top:var(--e-4);font-weight:700;font-size:var(--fs-sm);
  text-decoration:none;color:var(--azul-600)}
.card .maislink:hover{text-decoration:underline}

/* card de produto/modelo (padrão comparativo Topcon) */
.card-mod{background:var(--branco);border:1px solid var(--n-200);border-radius:var(--r-lg);
  padding:var(--e-5);display:flex;flex-direction:column;gap:var(--e-3)}
.card-mod .mod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-lg);font-weight:800;color:var(--azul-800);letter-spacing:-.02em}
.card-mod .tag{align-self:flex-start;background:var(--azul-100);color:var(--azul-700);
  border-radius:var(--r-full);padding:2px var(--e-3);font-size:var(--fs-xs);font-weight:700}
.card-mod p{font-size:var(--fs-sm);color:var(--n-600)}

/* resultados / números */
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-5);text-align:center}
.num-item b{display:block;font-size:var(--fs-2xl);color:var(--azul-800);
  line-height:1.1;letter-spacing:-.03em}
.sec-azul .num-item b{color:var(--ambar)}
.num-item span{font-size:var(--fs-sm);color:var(--n-600)}
.sec-azul .num-item span{color:#a8c3d6}

/* lista de checagem */
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e-5)}
.check{display:flex;gap:var(--e-3);align-items:flex-start}
.check .ic{flex:0 0 26px;width:26px;height:26px;border-radius:var(--r-full);
  background:var(--ambar);color:#2b1d00;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:var(--fs-xs);margin-top:3px}
.check h3{font-size:var(--fs-base);margin-bottom:var(--e-1)}
.check p{font-size:var(--fs-sm);color:var(--n-600)}

/* destaque */
.dest{background:linear-gradient(150deg,var(--azul-800),var(--azul-700));
  color:#dbe9f3;border-radius:var(--r-lg);padding:var(--e-7);
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--e-6);align-items:center}
.dest h2{color:#fff;margin-bottom:var(--e-3);font-size:var(--fs-xl)}
.dest p{margin-bottom:var(--e-5)}
.dest img{border-radius:var(--r)}

/* depoimentos */
.depo{background:var(--branco);border:1px solid var(--n-200);border-left:4px solid var(--ambar);
  border-radius:var(--r);padding:var(--e-5);display:flex;flex-direction:column;gap:var(--e-3)}
.depo blockquote{font-size:var(--fs-base);color:var(--n-700);font-style:italic}
.depo cite{font-style:normal;font-weight:700;color:var(--azul-800);font-size:var(--fs-sm)}
.depo cite span{display:block;font-weight:500;color:var(--n-600);font-size:var(--fs-xs)}

/* FAQ — exigência do padrão internacional (AEO / busca por resposta) */
.faq{max-width:820px;margin-inline:auto}
.faq details{border:1px solid var(--n-200);border-radius:var(--r);
  background:var(--branco);margin-bottom:var(--e-3);overflow:hidden}
.faq summary{padding:var(--e-4) var(--e-5);font-weight:700;color:var(--azul-800);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:var(--e-4);font-size:var(--fs-base)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:var(--fs-lg);color:var(--azul-600);
  font-weight:400;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq .resp{padding:0 var(--e-5) var(--e-5);color:var(--n-600);font-size:var(--fs-sm)}

/* CTA final */
.final{background:linear-gradient(150deg,var(--azul-900),var(--azul-700));
  border-radius:var(--r-lg);padding:var(--e-8) var(--e-6);text-align:center;color:#dbe9f3}
.final h2{color:#fff;margin-bottom:var(--e-3)}
.final p{max-width:56ch;margin:0 auto var(--e-5);font-size:var(--fs-md)}
.final .btns{justify-content:center}

/* ---------------------------------------------------------------
   7. PÁGINAS INTERNAS
   --------------------------------------------------------------- */
.pg-topo{background:linear-gradient(150deg,var(--azul-900),var(--azul-700));
  color:#cfe0ee;padding-block:var(--e-7)}
.pg-topo h1{color:#fff;font-size:var(--fs-2xl);margin-bottom:var(--e-3)}
.pg-topo p{max-width:68ch;font-size:var(--fs-md);color:#c9dcea}
.migalha{font-size:var(--fs-xs);color:#a8c3d6;margin-bottom:var(--e-3)}
.migalha a{color:#cfe0ee;text-decoration:none}
.migalha a:hover{text-decoration:underline}

.conteudo{max-width:760px;margin-inline:auto;padding-block:var(--e-8)}
.conteudo h2{font-size:var(--fs-xl);margin:var(--e-7) 0 var(--e-3)}
.conteudo h3{font-size:var(--fs-md);margin:var(--e-5) 0 var(--e-2)}
.conteudo ul,.conteudo ol{margin:0 0 var(--e-4) var(--e-5)}
.conteudo li{margin-bottom:var(--e-2)}
.conteudo table{width:100%;border-collapse:collapse;margin-block:var(--e-5);font-size:var(--fs-sm)}
.conteudo th,.conteudo td{border:1px solid var(--n-200);padding:var(--e-3);text-align:left}
.conteudo th{background:var(--n-50);color:var(--azul-800);font-weight:700}
.caixa{background:var(--n-50);border:1px solid var(--n-200);border-radius:var(--r);
  padding:var(--e-5);margin-block:var(--e-5)}
.caixa-alerta{background:#fff8e8;border-color:var(--ambar)}
.formula{background:var(--azul-800);color:#fff;border-radius:var(--r);
  padding:var(--e-6);text-align:center;margin-block:var(--e-5);
  font-size:var(--fs-md);line-height:2}

/* ---------------------------------------------------------------
   7b. FORMULÁRIO DE CONTATO
   --------------------------------------------------------------- */
.form-contato{max-width:720px;margin-inline:auto;background:var(--branco);
  border:1px solid var(--n-200);border-radius:var(--r-lg);padding:var(--e-6)}
.form-linha{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4)}
.campo{margin-bottom:var(--e-4);display:flex;flex-direction:column}
.campo label{font-size:var(--fs-sm);font-weight:650;color:var(--azul-800);
  margin-bottom:var(--e-2)}
.campo input,.campo select,.campo textarea{
  font-family:inherit;font-size:var(--fs-base);color:var(--n-900);
  padding:var(--e-3);border:2px solid var(--n-200);border-radius:var(--r);
  background:var(--branco);transition:border-color .15s;width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul-600)}
.campo textarea{resize:vertical;min-height:120px}
.form-contato .btn{width:100%}
.form-aviso{margin-top:var(--e-4);padding:var(--e-4);border-radius:var(--r);
  background:#fff8e8;border:1px solid var(--ambar);color:#6b5518;
  font-size:var(--fs-sm);line-height:1.6}

@media(max-width:640px){
  .form-linha{grid-template-columns:1fr}
  .form-contato{padding:var(--e-5)}
}

/* ---------------------------------------------------------------
   8. RODAPÉ
   --------------------------------------------------------------- */
.ft{background:var(--azul-900);color:#a8c3d6;font-size:var(--fs-sm);margin-top:var(--e-6)}
.ft .wrap{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;
  gap:var(--e-6);padding-block:var(--e-8)}
.ft h2{color:#fff;font-size:var(--fs-sm);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:var(--e-4)}
.ft a{color:#a8c3d6;text-decoration:none;display:block;margin-bottom:var(--e-2)}
.ft a:hover{color:#fff}
.ft-sobre p{color:#8fb0c7;font-size:var(--fs-sm)}
.copy{border-top:1px solid rgba(255,255,255,.09);text-align:center;
  padding-block:var(--e-4);font-size:var(--fs-xs);color:#7e9cb2}

/* ---------------------------------------------------------------
   9. RESPONSIVO
   --------------------------------------------------------------- */
@media(max-width:960px){
  .ft .wrap{grid-template-columns:1fr 1fr}
  .g4,.num-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  :root{--fs-3xl:2.125rem;--fs-2xl:1.75rem;--e-8:2.75rem;--e-9:3.5rem}
  .hero .wrap,.dest{grid-template-columns:1fr}
  .g2,.g3,.checks{grid-template-columns:1fr}
  .hero .lead{max-width:none}

  /* menu no celular: escondido até tocar no botão */
  .menu-btn{display:flex}
  .hd .wrap{flex-wrap:wrap}
  .nav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:0;border-top:1px solid var(--n-200);margin-top:var(--e-3);padding-top:var(--e-2)}
  .nav.aberto{display:flex}
  .nav a{padding:var(--e-3) var(--e-1);border-bottom:1px solid var(--n-100);
    font-size:var(--fs-base)}
  .nav a[aria-current]{border-bottom-color:var(--n-100);color:var(--azul-800)}
  .dest{padding:var(--e-6)}
  .prova-logos{gap:var(--e-4) var(--e-5)}
  .prova-logos img{max-height:34px;max-width:120px}
  /* as quadradas encolhem na mesma proporção, senão ficam grandes demais */
  .prova-logos img.quad{max-height:46px;max-width:46px}
  .prova-logos img.larga{max-width:145px}
}
@media(max-width:560px){
  .ft .wrap{grid-template-columns:1fr}
  .g4,.num-grid{grid-template-columns:1fr 1fr}
  .btn{width:100%}
  .btns{flex-direction:column}
  .hd .btn{width:auto}
}