/* ==========================================================================
   HawkTech — folha de estilo do site
   Paleta: navy #071624 · azul #1D7CB6 · ciano #52C7F2 · papel #F4F7F9
   ========================================================================== */

:root{
  color-scheme: light;

  --paper:#FFFFFF;
  --paper-2:#F3F7FA;
  --paper-3:#E8EFF4;
  --navy:#071624;
  --navy-2:#0E2740;
  --navy-3:#16344F;

  --ink:#0C2337;
  --ink-2:#496377;
  --ink-3:#7B93A6;
  --on-navy:#E9F2F8;
  --on-navy-2:#9DB5C9;
  --on-navy-3:#65808F;

  --brand:#1D7CB6;
  --brand-dark:#175F8C;
  --lift:#52C7F2;
  --line:#DBE5EC;
  --line-navy:#1E4260;

  --good:#2C9E5B;
  --alert:#D3483C;

  --f-display:"Archivo","Archivo Black",Helvetica Neue,Arial,sans-serif;
  --f-body:"Source Sans 3",Segoe UI,Helvetica Neue,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gut:clamp(18px,4vw,40px);
  --wrap:1180px;
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:var(--brand);text-decoration:none;}
a:hover{color:var(--brand-dark);}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;animation:none!important;}}

/* ---------- utilitários ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:var(--on-navy);
  padding:10px 16px;font-family:var(--f-mono);font-size:13px;
}
.skip:focus{left:8px;top:8px;}

section{padding-block:clamp(52px,7vw,96px);}
section.tight{padding-block:clamp(38px,5vw,64px);}
.band-paper{background:var(--paper);}
.band-soft{background:var(--paper-2);border-block:1px solid var(--line);}
.band-navy{background:var(--navy);color:var(--on-navy);}
.band-navy h1,.band-navy h2,.band-navy h3{color:var(--on-navy);}
.band-navy a{color:var(--lift);}

h1,h2,h3,h4{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.08;}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem);font-weight:800;letter-spacing:-.03em;}
h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;}
h3{font-size:1.18rem;font-weight:700;letter-spacing:-.01em;}
h4{font-size:1rem;font-weight:700;}
p{margin:0;}

.eyebrow{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-bottom:16px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lift);flex:none;}
.band-navy .eyebrow{color:var(--lift);}

.lede{font-size:clamp(1.04rem,1.3vw,1.2rem);color:var(--ink-2);max-width:66ch;}
.band-navy .lede{color:var(--on-navy-2);}
.mono{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.band-navy .mono{color:var(--on-navy-3);}
.stack{display:flex;flex-direction:column;gap:18px;}
.stack-sm{display:flex;flex-direction:column;gap:10px;}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-body);font-size:15.5px;font-weight:600;
  padding:13px 22px;border-radius:var(--r);border:1px solid transparent;
  background:var(--brand);color:#fff;transition:background .18s,border-color .18s,color .18s;
}
.btn:hover{background:var(--brand-dark);color:#fff;}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink);}
.btn-ghost:hover{background:var(--paper-2);border-color:var(--ink-3);color:var(--ink);}
.band-navy .btn-ghost{border-color:var(--line-navy);color:var(--on-navy);}
.band-navy .btn-ghost:hover{background:var(--navy-2);color:var(--on-navy);}
.btns{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- cabeçalho ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:20px;min-height:70px;}
.brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--ink);}
.brand img{width:auto;height:30px;}
.brand .wm{
  font-family:var(--f-display);font-size:1.16rem;font-weight:800;
  letter-spacing:-.02em;line-height:1;
}
.brand .wm span{font-weight:500;color:var(--ink-2);}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;}
.nav a{
  font-size:15.5px;font-weight:600;color:var(--ink-2);
  padding:9px 13px;border-radius:var(--r);
}
.nav a:hover{color:var(--ink);background:var(--paper-2);}
.nav a[aria-current="page"]{color:var(--brand);}
.nav .btn{margin-left:8px;color:#fff;}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:var(--r);padding:9px 12px;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer;
}
@media (max-width:900px){
  .brand img{height:26px;}
  .brand .wm{font-size:1.04rem;}
  .nav-toggle{display:block;}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:10px var(--gut) 18px;margin-left:0;
  }
  .nav[hidden]{display:none;}
  .nav a{padding:12px 4px;font-size:17px;}
  .nav .btn{margin:8px 0 0;justify-content:center;}
}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(29,124,182,.30), transparent 62%),
    linear-gradient(180deg,#081A2B 0%, var(--navy) 100%);
  color:var(--on-navy);
  padding-block:clamp(58px,8vw,112px);
  border-bottom:1px solid var(--line-navy);
}
.hero h1,.hero h2{color:var(--on-navy);}
.hero .lede{color:var(--on-navy-2);}
.hero .eyebrow{color:var(--lift);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:center;}
.hero-logo{width:clamp(168px,19vw,236px);margin-bottom:22px;}
.hero .mono{color:var(--on-navy-3);}
.hero .btn-ghost{background:transparent;border-color:var(--line-navy);color:var(--on-navy);}
.hero .btn-ghost:hover{background:var(--navy-2);color:var(--on-navy);}
.hero .checks li{color:var(--on-navy-2);}
.hero .checks li::before{background:var(--lift);}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;}}

/* ---------- placa de tela ---------- */
.plate{
  background:var(--navy-2);border:1px solid var(--line-navy);border-radius:var(--r);
  overflow:hidden;box-shadow:0 26px 60px -34px rgba(0,0,0,.75);
}
.plate.on-paper{background:var(--paper);border-color:var(--line);box-shadow:0 20px 46px -30px rgba(12,35,55,.35);}
.plate figcaption{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-navy-3);padding:9px 13px;border-top:1px solid var(--line-navy);
  display:flex;justify-content:space-between;gap:12px;
}
.plate.on-paper figcaption{color:var(--ink-3);border-top-color:var(--line);}
figure{margin:0;}

/* ---------- grids ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,26px);}
.g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr;}}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:center;}
.split.wide-left{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);}
.split.wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);}
@media (max-width:900px){.split,.split.wide-left,.split.wide-right{grid-template-columns:1fr;}}

/* ---------- cards ---------- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:10px;
}
.band-soft .card{background:var(--paper);}
.band-navy .card{background:var(--navy-2);border-color:var(--line-navy);}
.card p{color:var(--ink-2);font-size:.98rem;}
.band-navy .card p{color:var(--on-navy-2);}
.card .mono{margin-bottom:2px;}

.card-link{transition:border-color .18s,transform .18s;}
.card-link:hover{border-color:var(--brand);transform:translateY(-2px);}

/* produto */
.product{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(22px,3.4vw,44px);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,38px);
}
.product.reverse{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);}
.product.reverse .product-txt{order:2;}
@media (max-width:900px){
  .product,.product.reverse{grid-template-columns:1fr;}
  .product.reverse .product-txt{order:0;}
}
.tag{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;border:1px solid var(--line);color:var(--ink-2);
}
.tag.live{color:var(--good);border-color:rgba(44,158,91,.35);background:rgba(44,158,91,.07);}
.tag.dev{color:#9A6B12;border-color:rgba(154,107,18,.3);background:rgba(232,163,61,.1);}
.band-navy .tag{border-color:var(--line-navy);color:var(--on-navy-2);}

.roadmap{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.roadmap div{background:var(--paper-2);padding:16px 20px;}
.roadmap .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);}
.roadmap h4{margin:4px 0 3px;}
.roadmap p{color:var(--ink-2);font-size:.94rem;}

/* fluxo em etapas */
.flow-track{display:flex;overflow-x:auto;padding:0 0 6px;margin:0;list-style:none;scrollbar-width:thin;}
.fstep{flex:1 0 132px;position:relative;padding:30px 18px 0 0;}
.fstep::before{content:"";position:absolute;left:8px;right:0;top:7px;height:2px;background:var(--line);}
.band-soft .fstep::before{background:var(--paper-3);}
.fstep:last-child{flex:1 0 146px;}
.fstep:last-child::before{right:18px;}
.fstep .dot{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--paper-2);}
.fstep .n{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3);display:block;margin-bottom:5px;}
.fstep h4{font-size:.99rem;margin-bottom:5px;}
.fstep p{font-size:.86rem;color:var(--ink-2);line-height:1.42;}
.flow-hint{display:none;}
@media (max-width:1080px){.flow-hint{display:block;}}
.fstep .who{
  display:inline-block;margin-top:8px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--brand);
}

/* números */
.stats{display:grid;gap:1px;background:var(--line-navy);border:1px solid var(--line-navy);border-radius:var(--r);overflow:hidden;}
.stats.c4{grid-template-columns:repeat(4,minmax(0,1fr));}
.stats.c3{grid-template-columns:repeat(3,minmax(0,1fr));}
.stats.c2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:820px){.stats.c4{grid-template-columns:repeat(2,minmax(0,1fr));}.stats.c3{grid-template-columns:1fr;}}
@media (max-width:560px){.stats.c2{grid-template-columns:1fr;}}
@media (max-width:460px){.stats.c4{grid-template-columns:1fr;}}
.stat{background:var(--navy);padding:clamp(18px,2.2vw,26px);}
.stat .v{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.8rem,3.1vw,2.6rem);line-height:1;color:var(--on-navy);
  font-variant-numeric:tabular-nums;
}
.stat .v small{font-size:.42em;font-weight:600;color:var(--on-navy-2);letter-spacing:0;}
.stat .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lift);margin-top:9px;}
.stat .d{margin-top:6px;font-size:.9rem;color:var(--on-navy-2);}
.stats.on-paper{background:var(--line);border-color:var(--line);}
.stats.on-paper .stat{background:var(--paper);}
.stats.on-paper .stat .v{color:var(--ink);}
.stats.on-paper .stat .v small{color:var(--ink-2);}
.stats.on-paper .stat .k{color:var(--brand);}
.stats.on-paper .stat .d{color:var(--ink-2);}

/* lista de itens com numeração */
.rows{list-style:none;margin:0;padding:0;}
.rows li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line);}
.rows li:last-child{border-bottom:1px solid var(--line);}
.band-navy .rows li{border-color:var(--line-navy);}
.rows .idx{font-family:var(--f-mono);font-size:11.5px;color:var(--brand);padding-top:4px;letter-spacing:.06em;}
.band-navy .rows .idx{color:var(--lift);}
.rows h3{font-size:1.04rem;}
.rows p{color:var(--ink-2);font-size:.96rem;margin-top:3px;}
.band-navy .rows p{color:var(--on-navy-2);}

/* checklist */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.checks li{position:relative;padding-left:26px;color:var(--ink-2);font-size:1rem;}
.checks li::before{
  content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;border-radius:2px;
  background:var(--brand);
}
.band-navy .checks li{color:var(--on-navy-2);}
.band-navy .checks li::before{background:var(--lift);}
.checks strong{color:var(--ink);font-weight:600;}
.band-navy .checks strong{color:var(--on-navy);}

/* módulos (chips) */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.chips li{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:7px 11px;border:1px solid var(--line);border-radius:100px;color:var(--ink-2);background:var(--paper);
}
.band-navy .chips li{border-color:var(--line-navy);color:var(--on-navy-2);background:var(--navy-2);}

/* comparativo de barras */
.bars{display:flex;flex-direction:column;gap:20px;}
.bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:7px;}
.bar-head .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);}
.band-navy .bar-head .lbl{color:var(--on-navy-2);}
.bar-head .val{font-family:var(--f-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.track{height:10px;background:var(--paper-3);border-radius:2px;overflow:hidden;}
.band-navy .track{background:var(--navy-3);}
.fill{height:100%;border-radius:0 4px 4px 0;}
.bar-note{font-size:.88rem;color:var(--ink-3);margin-top:6px;}
.band-navy .bar-note{color:var(--on-navy-3);}

/* faixa CTA */
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(22px,4vw,54px);flex-wrap:wrap;}
.cta-in h2{max-width:24ch;}

/* contato */
.contact-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.contact-list a,.contact-list div{display:flex;flex-direction:column;gap:3px;padding:17px 20px;background:var(--paper);color:var(--ink);}
.contact-list a:hover{background:var(--paper-2);}
.contact-list .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}
.contact-list .v{font-weight:600;font-size:1.04rem;}

/* rodapé */
.site-foot{background:var(--navy);color:var(--on-navy-2);padding-block:clamp(40px,5vw,60px);font-size:.95rem;}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,50px);}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}.foot-brand{grid-column:1/-1;}}
.site-foot img{width:160px;margin-bottom:16px;}
.site-foot h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-3);font-weight:500;margin-bottom:13px;}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.site-foot a{color:var(--on-navy-2);}
.site-foot a:hover{color:var(--lift);}
.foot-base{margin-top:clamp(30px,4vw,46px);padding-top:20px;border-top:1px solid var(--line-navy);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-3);}

/* nota de rascunho — remover depois de revisar o conteúdo */
.draft{
  border:1px dashed var(--alert);border-radius:var(--r);padding:14px 16px;
  background:rgba(211,72,60,.05);color:var(--ink-2);font-size:.93rem;
}
.draft b{color:var(--alert);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;display:block;margin-bottom:5px;}