/* =========================================================================
   ires labs — website
   Marca: "Logo Ires Labs Final" (coroa de raios) · paleta herdada do DS v1
   ========================================================================= */

:root{
  /* base */
  --orange:      #FF6B2C;
  --orange-deep: #C2481A;   /* laranja escuro do logo, p/ fundo claro */
  --black:       #0E1116;
  --surface:     #171B22;
  --surface-2:   #1C212A;
  --border:      #23272F;
  --border-hi:   #3A404C;
  --muted:       #8B93A6;
  --dim:         #6B7484;
  --white:       #FFFFFF;

  /* verticais */
  --gov:  #31E1A4;
  --geo:  #6FA8FF;
  --imob: #FFC94A;
  --ops:  #A78BFA;

  /* tipografia */
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --sans: 'DM Sans', system-ui, sans-serif;

  --r-surface: 12px;
  --r-control: 8px;

  --shell: 1180px;
  --head-h: 82px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 24px); }

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:var(--orange); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--white); }

::selection{ background:var(--orange); color:var(--black); }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:28px; }

.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--orange); color:var(--black); padding:12px 18px;
  font:700 14px var(--sans); border-radius:0 0 var(--r-control) 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:4px; }

/* grão / textura ---------------------------------------------------------- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   MARCA — coroa de raios + wordmark "ires labs"
   Proporção do lockup horizontal do design: símbolo ≈ 2,5× o corpo do texto.
   ========================================================================= */
.logo{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:18px; line-height:1;
  color:var(--white);
}
.logo:hover{ color:var(--white); }
.logo__mark{ width:44px; height:44px; flex:none; display:block; }
.logo__word{ display:inline-flex; align-items:baseline; }
.logo__word b{ font-weight:700; letter-spacing:-.02em; color:var(--white); }
.logo__word i{ font-style:normal; font-weight:400; color:var(--orange); margin-left:.27em; }

.logo--lg{ font-size:26px; gap:16px; }
.logo--lg .logo__mark{ width:62px; height:62px; }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--head-h);
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-head.is-stuck{
  background:rgba(14,17,22,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--border);
}
.head__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.nav{ display:flex; align-items:center; gap:30px; }
.nav a{ font:500 15px var(--sans); color:var(--muted); }
.nav a:hover{ color:var(--white); }
.nav__cta{
  background:var(--orange); color:var(--black) !important;
  font-weight:700 !important; padding:11px 20px; border-radius:var(--r-control);
  transition:transform .2s ease, background .2s ease;
}
.nav__cta:hover{ background:#FF8149; transform:translateY(-1px); }

.burger{
  display:none; width:44px; height:44px; background:none; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--r-control);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ width:18px; height:1.5px; background:var(--white); transition:transform .3s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* =========================================================================
   TIPOGRAFIA UTILITÁRIA
   ========================================================================= */
.kicker{
  font:400 11px var(--mono); color:var(--orange);
  letter-spacing:.26em; margin:0;
}
.kicker--green{ color:var(--gov); }

.sec-title{
  font:700 clamp(30px,4vw,44px)/1.15 var(--sans);
  letter-spacing:-.025em; margin:14px 0 0; text-wrap:balance;
}

.pill{
  display:inline-flex; align-items:center; align-self:flex-start;
  font:400 12px var(--mono); color:var(--muted);
  background:var(--surface); border:1px solid var(--border);
  padding:8px 14px; border-radius:999px; white-space:nowrap;
}
.pill--live{ color:var(--gov); background:#12211C; border-color:#2A3A34; }
.pill--live::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--gov); margin-right:8px;
  box-shadow:0 0 0 0 rgba(49,225,164,.6);
  animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%   { box-shadow:0 0 0 0 rgba(49,225,164,.55); }
  70%  { box-shadow:0 0 0 8px rgba(49,225,164,0); }
  100% { box-shadow:0 0 0 0 rgba(49,225,164,0); }
}

/* botões ------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font:700 15px var(--sans); padding:15px 28px;
  border-radius:var(--r-control); border:1px solid transparent;
  cursor:pointer; transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn--primary{ background:var(--orange); color:var(--black); }
.btn--primary:hover{ background:#FF8149; color:var(--black); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--border-hi); color:var(--white); }
.btn--ghost:hover{ border-color:var(--white); color:var(--white); transform:translateY(-2px); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative; padding:calc(var(--head-h) + 84px) 0 88px;
  overflow:hidden;
}
/* Ondas concêntricas saindo do topo — mesma família visual da coroa. */
.hero__rings{
  position:absolute; inset:-140px 0 0; z-index:0;
  background:
    repeating-radial-gradient(circle at 50% 0%,
      transparent 0 96px,
      rgba(255,107,44,.16) 96px 97px,
      transparent 97px 168px,
      var(--border) 168px 169px);
  opacity:.85;
  mask-image:radial-gradient(105% 78% at 50% 0%, #000 4%, rgba(0,0,0,.5) 42%, transparent 76%);
  -webkit-mask-image:radial-gradient(105% 78% at 50% 0%, #000 4%, rgba(0,0,0,.5) 42%, transparent 76%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:scale(1); }
  to  { transform:scale(1.06); }
}
.hero__glow{
  position:absolute; z-index:0;
  top:-320px; left:50%; transform:translateX(-50%);
  width:920px; height:680px; pointer-events:none;
  background:radial-gradient(circle, rgba(255,107,44,.20), rgba(255,107,44,0) 62%);
  filter:blur(20px);
}

.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr auto; gap:56px; align-items:center;
}
.hero__copy{ min-width:0; }

/* a coroa em tamanho de exposição -------------------------------------------
   Três camadas empilhadas para a interação com o mouse não brigar entre si:
   .mark__stage recebe a inclinação 3D (JS), .mark__svg gira devagar (CSS) e
   .mark__aura é o brilho que segue o cursor.                                */
.hero__mark{ flex:none; }
.mark__stage{
  position:relative; display:block;
  width:clamp(180px,20vw,268px);
  perspective:900px;
  transform-style:preserve-3d;
  will-change:transform;
  cursor:grab;
  touch-action:none;                /* o arraste gira, não rola a página */
}
.mark__stage.is-grabbing{ cursor:grabbing; }
.mark__svg{
  position:relative; z-index:1;
  width:100%; height:auto; display:block;
  overflow:visible;                 /* deixa os raios saírem da caixa */
  will-change:transform;
  /* Giro de base por CSS: sem JS a coroa continua girando sozinha.
     Quando o script assume, ele desliga esta animação e passa a controlar
     o eixo Z junto com os outros dois. */
  animation:spin 140s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* energia: brilho radial que acompanha o ponteiro */
.mark__aura{
  position:absolute; z-index:0; inset:-38%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at var(--ax,50%) var(--ay,50%),
    rgba(255,138,82,.55), rgba(255,107,44,.20) 34%, rgba(255,107,44,0) 68%);
  filter:blur(26px);
  opacity:var(--aop,0);
  transition:opacity .45s ease;
}

.hero__title{
  margin:22px 0 0; max-width:16ch;
  font:700 clamp(42px,6vw,76px)/1.04 var(--sans);
  letter-spacing:-.035em;
}
.hero__title span{ display:block; }
.hero__title--accent{ color:var(--orange); }

.hero__lead{
  margin:26px 0 0; max-width:600px;
  font:400 clamp(17px,1.7vw,19px)/1.65 var(--sans); color:var(--muted);
  text-wrap:pretty;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }

/* terminal ---------------------------------------------------------------- */
.hero__terminal{
  margin-top:56px; max-width:660px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-surface); overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7);
  position:relative; z-index:2;
}
.term__bar{
  display:flex; gap:7px; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--border); background:#12161C;
}
.term__bar span{ width:9px; height:9px; border-radius:50%; background:var(--border-hi); }
.term__bar span:first-child{ background:var(--orange); }
.term__body{ padding:20px 22px; font:400 13.5px/2 var(--mono); }
.term__body p{ margin:0; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.term__body em{ font-style:normal; color:var(--orange); margin-right:10px; }
.term__out{ color:var(--dim); }
.term__out--ok{ color:var(--gov); }
.caret{
  display:inline-block; width:8px; height:15px; margin-left:8px;
  background:var(--gov); vertical-align:-2px;
  animation:blink 1.1s step-end infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }

/* estatísticas ------------------------------------------------------------ */
.stats{
  list-style:none; margin:76px 0 0; padding:28px 0 0;
  border-top:1px solid var(--border);
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  position:relative; z-index:2;
}
.stats li{ display:flex; flex-direction:column; gap:6px; }
.stats b{ font:700 clamp(32px,3.6vw,42px)/1 var(--mono); color:var(--white); }
.stats span{ font:400 14px var(--sans); color:var(--muted); }

/* =========================================================================
   BANDAS / SEÇÕES
   ========================================================================= */
.band{ position:relative; z-index:2; padding:104px 0; border-top:1px solid var(--border); }
.band--alt{ background:#0B0E13; }

.sec-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:52px;
}

.split{ display:grid; grid-template-columns:260px 1fr; gap:56px; align-items:start; }
.split__note{ font:400 14px/1.6 var(--sans); color:var(--muted); margin:14px 0 0; }
.split__note b{ font-family:var(--mono); font-weight:700; color:var(--white); }

.cards-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-surface); padding:28px;
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
.card:hover{ border-color:var(--border-hi); transform:translateY(-3px); background:var(--surface-2); }
.card__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  background:rgba(255,107,44,.12); color:var(--orange);
  font:700 18px var(--mono); margin-bottom:18px;
}
.card h3{ font:700 19px var(--sans); margin:0 0 10px; letter-spacing:-.01em; }
.card p{ font:400 15px/1.6 var(--sans); color:var(--muted); margin:0; }

/* =========================================================================
   PRODUTOS
   ========================================================================= */
.products{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.products--dev{ grid-template-columns:repeat(3,1fr); }

.product{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-surface); padding:30px;
  display:flex; flex-direction:column;
  transition:border-color .35s ease, transform .35s ease, background .35s ease;
}
.product::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--vc,var(--orange)); opacity:0;
  transition:opacity .35s ease;
}
.product:hover{ border-color:color-mix(in srgb, var(--vc,var(--orange)) 45%, var(--border)); transform:translateY(-4px); background:var(--surface-2); }
.product:hover::before{ opacity:1; }

.product--wide{ grid-column:span 2; }
.product--dev{ background:transparent; border-style:dashed; }
.product--dev:hover{ background:var(--surface); }

.product__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.product__idx{ font:400 11px var(--mono); color:var(--dim); letter-spacing:.24em; }
.product__vert{
  font:700 12px var(--mono); letter-spacing:.08em;
  color:var(--vc,var(--orange));
  border:1px solid color-mix(in srgb, var(--vc,var(--orange)) 35%, transparent);
  background:color-mix(in srgb, var(--vc,var(--orange)) 9%, transparent);
  padding:4px 11px; border-radius:999px;
}
.product h3{
  font:700 clamp(19px,2vw,23px)/1.25 var(--sans);
  letter-spacing:-.018em; margin:0 0 12px; text-wrap:balance;
}
.product > p{ font:400 15.5px/1.65 var(--sans); color:var(--muted); margin:0 0 22px; text-wrap:pretty; }

.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:auto 0 0; padding:0; }
.tags li{
  font:400 12px var(--mono); color:var(--dim);
  border:1px solid var(--border); background:var(--black);
  padding:6px 12px; border-radius:999px;
}

/* =========================================================================
   VERTICAIS — mesmo lockup da marca-mãe: "ires" + palavra na cor da vertical
   ========================================================================= */
.verts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.vert{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-surface); padding:26px;
  transition:border-color .3s ease, transform .3s ease;
}
.vert:hover{ border-color:color-mix(in srgb, var(--vc) 50%, var(--border)); transform:translateY(-3px); }
.vert__brand{
  display:flex; align-items:baseline;
  font-family:var(--mono); font-size:26px; line-height:1; margin-bottom:16px;
}
.vert__brand b{ font-weight:700; letter-spacing:-.02em; color:var(--white); }
.vert__brand i{ font-style:normal; font-weight:400; color:var(--vc); margin-left:.27em; }
.vert p{ font:400 14.5px/1.6 var(--sans); color:var(--muted); margin:0; }
/* link para a página do produto — só a vertical que já tem produto no ar usa */
.vert__link{
  display:inline-block; margin-top:14px; text-decoration:none;
  font:500 13.5px/1 var(--mono); letter-spacing:.02em; color:var(--vc);
}
.vert__link:hover{ text-decoration:underline; }

/* =========================================================================
   PROCESSO
   ========================================================================= */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0;
  border:1px solid var(--border); border-radius:var(--r-surface); overflow:hidden;
}
.step{ padding:32px 28px; border-right:1px solid var(--border); transition:background .3s ease; }
.step:last-child{ border-right:none; }
.step:hover{ background:var(--surface); }
.step__n{ font:700 13px var(--mono); color:var(--orange); letter-spacing:.2em; }
.step h3{ font:700 19px var(--sans); margin:14px 0 10px; letter-spacing:-.01em; }
.step p{ font:400 14.5px/1.6 var(--sans); color:var(--muted); margin:0; }

/* voz --------------------------------------------------------------------- */
.voice{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:16px; }
.voice__box{ border-radius:var(--r-surface); padding:26px; border:1px solid var(--border); }
.voice__box p:last-child{ font:400 16px/1.6 var(--sans); margin:14px 0 0; }
.voice__box--yes{ background:#12211C; border-color:#2A3A34; }
.voice__box--yes p:last-child{ color:#CFE7DE; }
.voice__box--no{ background:#1A1210; border-color:#3A2118; }
.voice__box--no p:last-child{ color:#B9A79E; }

/* =========================================================================
   CTA / FORMULÁRIO
   ========================================================================= */
.cta{ background:#0B0E13; }
.cta__inner{ max-width:780px; position:relative; }
.cta__mark{
  width:76px; height:76px; display:block; margin-bottom:26px;
}
.cta__title{
  font:700 clamp(32px,5vw,54px)/1.12 var(--sans);
  letter-spacing:-.03em; margin:16px 0 0; text-wrap:balance;
}
.cta__lead{ font:400 17px/1.65 var(--sans); color:var(--muted); margin:20px 0 0; max-width:620px; text-wrap:pretty; }

.form{ margin-top:44px; display:flex; flex-direction:column; gap:16px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.field{ display:flex; flex-direction:column; gap:9px; }
.field > span{ font:400 11px var(--mono); color:var(--dim); letter-spacing:.22em; text-transform:uppercase; }
.field input,
.field textarea{
  width:100%; font:400 16px var(--sans); color:var(--white);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-control); padding:14px 16px;
  transition:border-color .2s ease, background .2s ease;
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{ color:#59606E; }
.field input:focus,
.field textarea:focus{ outline:none; border-color:var(--orange); background:var(--surface-2); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:#D1462F; }

.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:8px; }
.form__msg{ font:400 14px var(--sans); color:var(--muted); margin:0; }
.form__msg.is-ok{ color:var(--gov); }
.form__msg.is-err{ color:#FF8B6B; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{ position:relative; z-index:2; border-top:1px solid var(--border); padding:64px 0 26px; }
.foot__inner{ display:grid; grid-template-columns:1fr auto; gap:56px; align-items:start; }
.foot__sign{ font:700 16px/1.5 var(--sans); color:var(--white); margin:22px 0 0; max-width:22ch; }
.foot__nav{ display:grid; grid-template-columns:repeat(3,minmax(130px,auto)); gap:40px; }
.foot__nav > div{ display:flex; flex-direction:column; gap:11px; }
.foot__nav .kicker{ margin-bottom:5px; }
.foot__nav a{ font:400 15px var(--sans); color:var(--muted); }
.foot__nav a:hover{ color:var(--white); }

.foot__bar{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  margin-top:56px; padding-top:22px; border-top:1px solid var(--border);
  font:400 12px var(--mono); color:var(--dim);
}

/* =========================================================================
   REVEAL
   ========================================================================= */
/* Fora do `.js` o conteúdo fica visível — a animação é um enfeite, nunca um
   pré-requisito para ler o site. */
.js .reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0s),
             transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s);
}
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; transform:none; }
}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width:1000px){
  .split{ grid-template-columns:1fr; gap:32px; }
  .products--dev{ grid-template-columns:repeat(2,1fr); }
  .products--dev .product:last-child{ grid-column:span 2; }
  .foot__inner{ grid-template-columns:1fr; gap:44px; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step:nth-child(2n){ border-right:none; }
  .step:nth-child(-n+2){ border-bottom:1px solid var(--border); }
  .hero__inner{ gap:36px; }
  .hero__mark svg{ width:clamp(150px,18vw,200px); }
}

@media (max-width:820px){
  body{ font-size:16px; }
  .band{ padding:76px 0; }
  .hero{ padding:calc(var(--head-h) + 54px) 0 68px; }

  /* a coroa vai para cima do texto, centralizada */
  .hero__inner{ grid-template-columns:1fr; gap:26px; }
  .hero__mark{ order:-1; }
  .hero__mark svg{ width:clamp(132px,34vw,180px); margin-inline:auto; }

  .nav{
    position:fixed; inset:var(--head-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(14,17,22,.97); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    padding:12px 28px 24px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--border); font-size:16px; }
  .nav__cta{ margin-top:16px; text-align:center; border-bottom:none; padding:14px 20px; }
  .burger{ display:flex; }

  .stats{ grid-template-columns:repeat(2,1fr); gap:28px 20px; margin-top:56px; }
  .products,
  .products--dev{ grid-template-columns:1fr; }
  .product--wide,
  .products--dev .product:last-child{ grid-column:span 1; }
  .form__row{ grid-template-columns:1fr; }
  .foot__nav{ grid-template-columns:1fr 1fr; gap:28px 24px; }
}

@media (max-width:560px){
  .shell{ padding-inline:20px; }
  .logo{ font-size:15px; gap:9px; }
  .logo__mark{ width:36px; height:36px; }
  .logo--lg{ font-size:21px; gap:12px; }
  .logo--lg .logo__mark{ width:50px; height:50px; }
  .vert__brand{ font-size:23px; }
  .cta__mark{ width:60px; height:60px; }
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:none; border-bottom:1px solid var(--border); }
  .step:last-child{ border-bottom:none; }
  .step:nth-child(-n+2){ border-bottom:1px solid var(--border); }
  .term__body{ font-size:11.5px; padding:16px; }
  .hero__terminal{ margin-top:40px; }
}