:root{
  /* Base (do app) */
  --bg0:#061e20;
  --bg1:#0b2b2d;
  --accent:#56e0d1;
  --accent2:#f8c35a;
  --bad:#ff5a6a;
  --warn:#ffd04b;
  --mid:#ff9f43;
  --ok:#4be48a;

  /* Landing (claro) */
  --paper:#f4fbfb;
  --paper2:#eff7f7;
  --ink:#062426;
  --ink2:rgba(6,36,38,.72);
  --ink3:rgba(6,36,38,.55);
  --stroke:rgba(6,36,38,.12);
  --shadow: 0 18px 45px rgba(6,36,38,.10);
  --radius:18px;
  --radiusSm:14px;
  --gap:14px;
  --fontBody:"Bahnschrift","Segoe UI Variable Text","Segoe UI","Calibri",sans-serif;
  --fontHead:"Palatino Linotype",Palatino,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--fontBody);
  color:var(--ink);
  background: radial-gradient(900px 520px at 12% 0%, rgba(86,224,209,.14), transparent 60%),
              radial-gradient(820px 520px at 88% 10%, rgba(248,195,90,.14), transparent 62%),
              linear-gradient(180deg, var(--paper), var(--paper2));
}
a{color:inherit}

.skip{
  position:absolute;
  left:-999px;
  top:10px;
  background: #fff;
  border:1px solid var(--stroke);
  padding:10px 12px;
  border-radius: 12px;
  z-index:9999;
}
.skip:focus{left:10px}

.container{max-width:1180px;margin:0 auto;padding: 0 18px}

.header{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(11,43,45,1), rgba(6,30,32,1));
  color: rgba(255,255,255,.92);
}
.headerBg{
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(86,224,209,.22), transparent 60%),
    radial-gradient(850px 520px at 85% 20%, rgba(248,195,90,.18), transparent 62%),
    radial-gradient(900px 600px at 50% 120%, rgba(255,255,255,.10), transparent 60%);
  filter:saturate(1.05);
  pointer-events:none;
}

.navBar{
  position:sticky; top:0; z-index:50;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(6,30,32,.70), rgba(6,30,32,.40));
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 0;
}

.brand{display:flex; gap:12px; align-items:center; text-decoration:none; min-width: 260px}
.brandText{display:flex; flex-direction:column; gap:3px}
.brandName{font-family:var(--fontHead); letter-spacing:.4px; font-size:18px; line-height:1}
.brandTag{font-size:12px; color: rgba(255,255,255,.70)}
.mark{
  width:44px; height:44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(145deg, rgba(86,224,209,.24), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
}
.mark.small{width:38px;height:38px;border-radius: 13px}
.mark svg{width:26px;height:26px}

.links{display:flex; gap: 14px; align-items:center}
.links a{
  text-decoration:none;
  font-size:13px;
  color: rgba(255,255,255,.86);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .12s ease, transform .12s ease, border-color .12s ease;
}
.links a:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.navActions{display:flex; gap:10px; align-items:center}
.btn{
  appearance:none;
  border:0;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.02)}
.btn:active{transform: translateY(0)}
.btn.subtle{
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.btn.subtle:hover{background: rgba(255,255,255,.09)}
.btn:not(.subtle){
  color: rgba(6,30,32,.98);
  background: linear-gradient(135deg, rgba(86,224,209,1), rgba(86,224,209,.78));
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.btn.inverse{
  color: rgba(86,224,209,1);
  background: rgba(6,30,32,.92);
  border: 1px solid rgba(86,224,209,.28);
  box-shadow: 0 12px 28px rgba(6,36,38,.10);
}
.btn.inverse:hover{
  background: rgba(6,30,32,.96);
  border-color: rgba(86,224,209,.40);
}

.iconBtn{
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:none;
  cursor:pointer;
  position:relative;
}
.iconBtn span{
  position:absolute; left:12px; right:12px;
  height:2px; background: rgba(255,255,255,.92);
  border-radius: 2px;
}
.iconBtn span:nth-child(1){top:14px}
.iconBtn span:nth-child(2){top:21px; opacity:.85}
.iconBtn span:nth-child(3){top:28px; opacity:.75}

.hero{padding: 22px 0 42px}
.heroGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items:stretch;
}
.heroCopy{
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 18px 55px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
}
.heroCopy::after{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 320px at 80% 18%, rgba(248,195,90,.16), transparent 60%),
    radial-gradient(540px 340px at 35% 78%, rgba(86,224,209,.16), transparent 60%);
  pointer-events:none;
  opacity:.85;
  mix-blend-mode: screen;
}
.heroCopy > *{position:relative}
.pillRow{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  display:inline-flex; align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
}
.heroCopy h1{
  margin: 12px 0 10px;
  font-family: var(--fontHead);
  letter-spacing:.2px;
  line-height:1.10;
  font-size: 38px;
}
.lead{margin:0; color: rgba(255,255,255,.80); max-width: 62ch}
.cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.trust{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;
}
.trustItem{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(6,30,32,.28);
  padding: 12px;
}
.tNum{font-weight:800; letter-spacing:.2px}
.tTxt{font-size:12px; color: rgba(255,255,255,.72); margin-top:4px}

.heroVideo{
  margin-top: 14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(6,30,32,.22);
  overflow:hidden;
  box-shadow: 0 16px 45px rgba(0,0,0,.18);
}
.heroVideo video{
  display:block;
  width:100%;
  height:auto;
}
.heroVideoHint{
  padding: 10px 12px;
  border-top:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.heroMedia{display:flex; flex-direction:column; gap: 12px}
.shots{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.shot{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background: rgba(255,255,255,.04);
  box-shadow: 0 16px 42px rgba(0,0,0,.25);
  position:relative;
}
.shot.a{grid-column: 1 / span 2; height: 148px}
.shot.b,.shot.c{height: 118px}
.shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter: saturate(1.06) contrast(1.02);
  transform: scale(1.02);
}
.shot::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.46));
  pointer-events:none;
}

.productCard{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
  overflow:hidden;
}
.productHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
  padding: 14px 14px 10px;
}
.productTitle{font-weight:800}
.muted{color: var(--ink2)}
.header .muted{color: rgba(255,255,255,.72)}
.muted2{color: var(--ink3)}
.chip{
  font-size:12px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(86,224,209,.40);
  background: rgba(86,224,209,.10);
  color: rgba(86,224,209,.98);
}
.kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  padding: 0 14px 12px;
}
.kpi{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(6,30,32,.26);
  padding: 10px;
}
.kHead{display:flex; justify-content:space-between; gap:8px; align-items:center}
.kName{font-weight:800; color: rgba(255,255,255,.86)}
.kVal{margin-top:8px; font-weight:900; font-size:20px; color: rgba(255,255,255,.92)}
.unit{font-size:12px; font-weight:700; opacity:.75}
.kFoot{font-size:12px; color: rgba(255,255,255,.70); margin-top:4px}
.badge{
  font-size:12px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
}
.badge.ok{border-color: rgba(75,228,138,.32); background: rgba(75,228,138,.12)}
.badge.warn{border-color: rgba(255,208,75,.32); background: rgba(255,208,75,.14)}
.badge.bad{border-color: rgba(255,90,106,.32); background: rgba(255,90,106,.14)}
.meter{
  height: 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  overflow:hidden;
  margin-top: 10px;
}
.meter > div{
  height:100%;
  background: linear-gradient(90deg, rgba(86,224,209,1), rgba(248,195,90,.92));
}
.chartWrap{padding: 0 14px 12px}
canvas{
  width:100%;
  display:block;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(6,30,32,.26);
}
.chartLegend{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 8px;
  color: rgba(255,255,255,.70);
  font-size: 12px;
}
.leg{display:flex; gap:8px; align-items:center}
.leg i{
  width:10px; height:10px;
  border-radius: 999px;
  display:inline-block;
  border:1px solid rgba(255,255,255,.16);
}
.note{
  padding: 12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.80);
  font-size: 13px;
}

.main{padding: 28px 0 46px}
.section{padding: 26px 0}
.sectionHead h2{
  margin:0;
  font-family: var(--fontHead);
  font-size: 28px;
  letter-spacing:.2px;
}
.sectionHead p{margin: 8px 0 0}
.betaNote{
  margin-top: 10px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(6,36,38,.12);
  background: rgba(255,255,255,.62);
  color: var(--ink2);
  font-size: 12px;
  box-shadow: 0 12px 32px rgba(6,36,38,.08);
}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.card{
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.58);
  box-shadow: var(--shadow);
  padding: 14px;
}
.card h3{margin: 10px 0 6px}
.card p{margin:0}
.icon{
  width:44px; height:44px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(86,224,209,.20), rgba(248,195,90,.12));
  border:1px solid rgba(6,36,38,.12);
  display:grid; place-items:center;
  color: rgba(6,36,38,.92);
}
.icon svg{width:24px;height:24px}

.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items:center;
}
.splitCopy h2{
  margin:0;
  font-family: var(--fontHead);
  font-size: 28px;
}
.steps{
  margin: 14px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.steps li{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px;
  border-radius: var(--radiusSm);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.55);
  box-shadow: 0 12px 32px rgba(6,36,38,.08);
}
.stepNum{
  width:34px; height:34px;
  border-radius: 12px;
  display:grid; place-items:center;
  font-weight:900;
  background: rgba(86,224,209,.18);
  border:1px solid rgba(86,224,209,.28);
}

.midCta{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.splitMedia{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  align-items:stretch;
}
.glass{
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.55);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.glassTop{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.52));
}
.dot{width:10px;height:10px;border-radius:999px; display:inline-block}
.dot.r{background: rgba(255,90,106,.90)}
.dot.y{background: rgba(255,208,75,.95)}
.dot.g{background: rgba(75,228,138,.90)}
.glassTitle{margin-left:6px; font-size:12px; color: var(--ink2)}
.glassBody{padding: 12px}
.miniGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.miniCard{
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.62);
  padding: 10px;
}
.miniK{font-size:12px; color: var(--ink2)}
.miniV{font-weight:900; font-size:20px; margin-top:6px}
.accent{color: rgba(0,160,150,1)}
.accent2{color: rgba(176,118,0,1)}
.miniBar{
  height: 8px;
  border-radius: 999px;
  border:1px solid rgba(6,36,38,.12);
  background: rgba(6,36,38,.06);
  overflow:hidden;
  margin-top: 10px;
}
.miniBar > div{
  height:100%;
  background: linear-gradient(90deg, rgba(86,224,209,1), rgba(248,195,90,.92));
}
.miniHint{margin-top:6px; font-size:12px}
.bad{color: var(--bad)}

.mock{margin-top: 12px}
.mockLine{
  height: 10px;
  border-radius: 999px;
  background: rgba(6,36,38,.08);
  margin-top: 8px;
}
.mockLine.w80{width:80%}
.mockLine.w60{width:60%}
.mockLine.w90{width:90%}
.mockLine.w70{width:70%}

.sideShot{
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.58);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.sideShot img{width:100%; height:100%; object-fit:cover; display:block}

.grid4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.softCard{
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.58);
  box-shadow: 0 14px 38px rgba(6,36,38,.09);
  padding: 14px;
}
.softTitle{font-weight:900; margin-bottom: 6px}

.pricing{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.priceCard{
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.60);
  box-shadow: var(--shadow);
  padding: 14px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.priceTop{display:flex; flex-direction:column; gap:4px}
.priceName{font-family: var(--fontHead); font-size: 22px}
.list{margin:0; padding-left: 18px; color: var(--ink2)}
.list li{margin: 6px 0}
.featured{
  border-color: rgba(86,224,209,.35);
  box-shadow: 0 22px 60px rgba(0,160,150,.10);
}
.badgeTop{
  position:absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(86,224,209,.35);
  background: rgba(86,224,209,.14);
  color: rgba(0,140,130,1);
  font-size: 12px;
  font-weight: 800;
}

.contactCard{
  border-radius: 24px;
  border:1px solid var(--stroke);
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(86,224,209,.18), transparent 60%),
    radial-gradient(820px 520px at 88% 10%, rgba(248,195,90,.16), transparent 62%),
    rgba(255,255,255,.62);
  box-shadow: 0 22px 60px rgba(6,36,38,.10);
  padding: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items:stretch;
}
.contactCopy h2{
  margin:0;
  font-family: var(--fontHead);
  font-size: 28px;
}
.contactCopy p{margin: 8px 0 0}
.contactActions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px}

.contactBox{
  margin-top: 12px;
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 45px rgba(6,36,38,.08);
  padding: 12px 14px;
}
.contactBoxTitle{
  font-weight: 900;
  letter-spacing: .2px;
}
.contactList{
  margin: 10px 0 10px;
  padding: 0;
  list-style: none;
  display:flex;
  flex-direction:column;
  gap: 8px;
  color: var(--ink2);
}
.contactList li{
  position:relative;
  padding-left: 22px;
}
.contactList li::before{
  content:"";
  position:absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(86,224,209,.22);
  border: 1px solid rgba(0,160,150,.35);
}

.form{
  border-radius: 20px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.form .btn{box-shadow: 0 12px 28px rgba(6,36,38,.12)}
.formActions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}
.isDisabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
label{display:flex; flex-direction:column; gap:6px}
label span{font-size:12px; color: var(--ink2); font-weight:700}
input,textarea{
  border-radius: 14px;
  border:1px solid rgba(6,36,38,.14);
  background: rgba(255,255,255,.92);
  padding: 10px 12px;
  font: inherit;
  outline:none;
}
textarea{resize: vertical}
input:focus,textarea:focus{
  border-color: rgba(0,160,150,.40);
  box-shadow: 0 0 0 4px rgba(86,224,209,.18);
}

.footer{
  padding: 14px 0 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(11,43,45,1), rgba(6,30,32,1));
  color: rgba(255,255,255,.92);
}
.footerGrid{
  display:grid;
  grid-template-columns: 1.2fr 1fr .9fr;
  gap: 10px;
  align-items:start;
}
.footerBrand{display:flex; gap: 12px; align-items:center}
.footer .mark{
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(86,224,209,.24), rgba(255,255,255,.06));
}
.footerCols{display:flex; gap: 18px; justify-content:flex-end}
.col{display:flex; flex-direction:column; gap: 8px}
.footer .muted{color: rgba(255,255,255,.72)}
.footer .muted2{color: rgba(255,255,255,.58)}
.colTitle{font-weight:900; font-size:12px; color: rgba(255,255,255,.78)}
.col a{text-decoration:none; color: rgba(255,255,255,.78); font-size:13px}
.col a:hover{text-decoration:underline}
.footNote{text-align:right}

/* Drawer */
.drawer{
  position:fixed; inset:0; z-index:999;
  background: rgba(6,30,32,.55);
  backdrop-filter: blur(8px);
  display:flex;
  justify-content:flex-end;
}
.drawer[hidden]{display:none}
.drawerPanel{
  width:min(420px, 92vw);
  height:100%;
  background: linear-gradient(180deg, rgba(11,43,45,1), rgba(6,30,32,1));
  color: rgba(255,255,255,.92);
  border-left:1px solid rgba(255,255,255,.12);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.drawerHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}
.brand.mini{min-width: 0}
.xBtn{
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: 22px;
  cursor:pointer;
}
.drawerLinks{display:flex; flex-direction:column; gap: 8px; padding: 10px 4px}
.drawerLinks a{
  text-decoration:none;
  padding: 10px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.drawerLinks a:hover{background: rgba(255,255,255,.08)}
.drawerCta{margin-top:auto; display:flex; flex-direction:column; gap: 10px}

/* Reveal */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease}
.reveal.on{opacity:1; transform: translateY(0)}

@media (max-width: 1020px){
  .heroGrid{grid-template-columns: 1fr}
  .trust{grid-template-columns: repeat(2, minmax(0,1fr))}
  .split{grid-template-columns: 1fr}
  .splitMedia{grid-template-columns: 1fr}
  .grid3{grid-template-columns: 1fr}
  .grid4{grid-template-columns: repeat(2, minmax(0,1fr))}
  .pricing{grid-template-columns: 1fr}
  .contactCard{grid-template-columns: 1fr}
  .footerGrid{grid-template-columns: 1fr}
  .footerCols{justify-content:flex-start}
  .footNote{text-align:left}
  .shot.a{height: 168px}
}

@media (max-width: 860px){
  .links{display:none}
  .iconBtn{display:inline-block}
  .heroCopy h1{font-size: 34px}
  .kpis{grid-template-columns: 1fr}
  .shot.b,.shot.c{height: 130px}
}

@media (max-width: 520px){
  .heroCopy h1{font-size: 28px}
  .trust{grid-template-columns: 1fr}
  .navActions a.btn.subtle{display:none}
}