/* ============================================================
   Evolink Gateway - Editorial Dark
   Mesmo sistema visual do Evolink (zinc + acento unico) para
   que os dois produtos da HostClube leiam-se como uma familia.
   Tokens: nomes e valores identicos ao Evolink.
   ============================================================ */

/* --------- fontes (auto-hospedadas, zero CDN) --------- */
@font-face{font-family:'Inter';src:url('/ia/static/fonts/inter.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/ia/static/fonts/jetbrainsmono.woff2') format('woff2-variations');
  font-weight:100 800;font-style:normal;font-display:swap}

/* --------- tokens --------- */
:root{
  --bg:        #ffffff;
  --bg-elev:   #f6f8fa;
  --panel:     #ffffff;
  --panel-2:   #f6f8fa;
  --ink:       #0a0a0a;
  --ink-2:     #24292f;
  --dim:       #57606a;
  --faint:     #8b949e;
  --mute:      #57606a;
  --line:      #eaeaea;
  --line-2:    #d0d7de;
  --line-3:    rgba(0,0,0,.24);
  --accent:    #0a0a0a;
  --accent-2:  #333333;
  --accent-ink:#ffffff;
  --accent-soft:rgba(0,0,0,.05);
  --accent-line:rgba(0,0,0,.18);
  --warn:      #f59e0b;
  --red:       #cf222e;

  --f-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease:      cubic-bezier(.2,.7,.2,1);
  --maxw:      1120px;

  --t-xs: 12px;
  --t-sm: 13px;
  --t-md: 15px;
  --t-lg: 17px;
  --t-xl: 20px;
  --t-2xl:24px;
  --t-3xl:32px;
  --t-4xl:44px;
  --t-5xl:64px;
  --t-6xl:88px;
}

@media (max-width: 768px){
  :root{ --t-5xl:44px; --t-6xl:56px; --t-4xl:32px; --t-3xl:26px; }
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:var(--t-md);
  line-height:1.6;
  font-feature-settings:'ss01','cv11';
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{ background:var(--accent); color:#ffffff }

a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0 }
img,svg{ display:block; max-width:100% }
code,pre{ font-family:var(--f-mono); font-size:.88em }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px }
.wrap--narrow{ max-width:860px }

@media (max-width:640px){ .wrap{ padding:0 20px } }

.skip{
  position:absolute; left:-9999px; top:0;
  padding:10px 14px; background:var(--accent); color:var(--accent-ink);
  border-radius:8px; font-weight:600; font-size:var(--t-sm);
}
.skip:focus{ left:16px; top:16px; z-index:999 }

/* ========================================================
   NAV - fino, hairline no bottom, marca mono
   ======================================================== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__in{
  display:flex; align-items:center; gap:48px;
  height:60px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ink); font-weight:600;
}
.brand__mark{
  width:22px; height:22px; color:var(--accent);
  flex:0 0 22px;
}
.brand__name{
  font-size:var(--t-lg);
  letter-spacing:-.02em;
  font-weight:600;
}
.nav__links{
  display:flex; align-items:center; gap:28px;
  flex:1;
}
.nav__links a{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--t-sm);
  color:var(--dim);
  transition:color .15s var(--ease);
  position:relative;
}
.nav__links a svg{
  width:14px; height:14px;
  flex:0 0 auto;
  color:var(--faint);
  transition:color .15s var(--ease);
}
.nav__links a:hover{ color:var(--ink) }
.nav__links a:hover svg{ color:var(--accent) }
.nav__cta{ display:flex; gap:10px; align-items:center }
[hidden]{ display:none !important }
.nav__mobile{ display:none }
.nav__burger{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:8px;
}
.nav__burger span{
  display:block; width:16px; height:1px; background:var(--ink);
  position:relative;
}
.nav__burger span:first-child{ transform:translateY(-4px) }
.nav__burger span:last-child{ transform:translateY(3px) }

@media (max-width:900px){
  .nav__links{ display:none }
  .nav__cta .btn--ghost{ display:none }
  .nav__burger{ display:inline-flex }
}
.nav__mobile{
  border-top:1px solid var(--line);
  padding:14px 32px 20px;
  display:flex; flex-direction:column; gap:14px;
  background:var(--bg-elev);
}
.nav__mobile a{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--t-md); color:var(--ink-2);
}
.nav__mobile a svg{
  width:16px; height:16px;
  flex:0 0 auto;
  color:var(--faint);
}

/* ========================================================
   BUTTONS
   ======================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:0 16px; height:36px;
  font-size:var(--t-sm); font-weight:500;
  border-radius:8px;
  border:1px solid transparent;
  transition:all .15s var(--ease);
  white-space:nowrap;
  letter-spacing:-.005em;
}
.btn--solid{
  background:var(--accent); color:var(--accent-ink);
  font-weight:600;
}
.btn--solid:hover{ background:var(--accent-2) }
.btn--outline{
  border-color:var(--line-3);
  color:var(--ink);
  background:transparent;
}
.btn--outline:hover{ border-color:var(--ink); background:rgba(0,0,0,.04) }
.btn--ghost{
  color:var(--ink-2);
  background:transparent;
}
.btn--ghost:hover{ color:var(--ink); background:rgba(0,0,0,.04) }
.btn--lg{ height:44px; padding:0 20px; font-size:var(--t-md) }
.btn--sm{ height:28px; padding:0 10px; font-size:var(--t-xs); border-radius:6px }

/* ========================================================
   HERO - tipografia editorial + console vivo
   ======================================================== */
.hero{
  position:relative;
  min-height:70vh;
  padding:0;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  display:flex;
  max-width:var(--maxw, 1120px);
  margin:0 auto;
}
.hero__type{
  flex:0 0 30%;
  max-width:30%;
}
.hero__console{
  flex:1;
  min-width:0;
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events:none;
  opacity:.15;
}
.hero__type{
  position:relative;
  padding:64px 36px;
  display:flex; flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:20px;
  z-index:2;
  border-right:1px solid var(--line);
  justify-content:center;
}
.hero__type .eyebrow{ margin-bottom:0; }
.hero__type h1{
  font-size:28px;
  line-height:1.15;
  letter-spacing:-.03em;
  font-weight:600;
  margin:0;
  color:var(--ink);
}
.hero__type .lede{
  font-size:13px;
  line-height:1.5;
  color:var(--dim);
  margin:0;
}
.hero__type .hero__actions{ margin-top:4px; }
.hero__actions .btn--solid{
  background:var(--accent);
  color:#ffffff;
  border-color:var(--accent);
}
@media (max-width:768px){
  .hero{ flex-direction:column }
  .hero__type{ flex:none; max-width:100%; border-right:none; border-bottom:1px solid var(--line); padding:48px 24px 32px }
  .hero__type h1{ font-size:32px }
  .hero__console{ min-height:260px }
  .hero__console .console__body{ min-height:200px; height:auto }
}
@media (max-width:480px){
  .hero__type h1{ font-size:24px }
  .hero__actions{ flex-direction:column; align-items:stretch }
  .hero__actions .btn{ width:100% }
}

/* Console como parte do hero — integrado, sem caixa (sem borda, sem bg), conteúdo centralizado verticalmente */
.hero__console{
  position:relative;
  z-index:1;
  margin:0;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:0 0 80px -30px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero__console .console__bar{
  border-bottom:1px solid var(--line-2);
  background:none;
}
.hero__console .console__body{
  min-height:340px;
  height:auto;
}
@media (max-width:900px){
  .hero__console{ margin:0 16px 32px; transform:rotate(0deg) }
  .hero__console .console__body{ min-height:200px }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px;
  color:var(--accent);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.pulse-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 var(--accent);
  animation:pulse 2.2s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(26,127,55,.5) }
  50%    { box-shadow:0 0 0 7px rgba(26,127,55,0) }
}

.hero__trust{
  list-style:none; padding:0; margin:0;
  display:flex; gap:20px; flex-wrap:wrap;
  font-size:11px;
  color:var(--faint);
  letter-spacing:.03em;
}

/* -------- Console -------- */
.console{
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:12px;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(0,0,0,.03) inset,
    0 24px 60px -32px rgba(0,0,0,.10),
    0 8px 20px -8px rgba(0,0,0,.08);
}
.console__bar{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(0,0,0,.02), transparent);
}
.console__dots{ display:inline-flex; gap:7px }
.console__dots i{
  width:11px; height:11px; border-radius:50%;
  background:rgba(0,0,0,.15);
}
.console__title{
  flex:1;
  font-family:var(--f-mono);
  font-size:var(--t-xs);
  color:var(--faint);
  text-align:center;
  letter-spacing:0;
}
.console__status{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--dim);
}
.console__body{ display:flex; flex-direction:column }
.console__req{
  padding:18px 20px;
  border-bottom:1px solid var(--line);
  background:#0a0a0c;
}
.console__req pre{
  margin:0;
  font-family:var(--f-mono);
  font-size:13px; line-height:1.65;
  color:var(--ink-2);
  white-space:pre-wrap; word-break:break-word;
  min-height:84px;
}
.console__req code{ color:inherit; background:none; padding:0 }
.caret{
  display:inline-block;
  width:7px; height:14px;
  background:var(--accent);
  vertical-align:-2px; margin-left:2px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }
.console__res{
  padding:16px 20px;
}
.console__res-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px;
  font-family:var(--f-mono); font-size:11px;
}
.tag{
  display:inline-flex; align-items:center;
  padding:3px 8px; border-radius:5px;
  font-size:11px; font-weight:500;
  font-family:var(--f-mono);
  background:var(--panel-2);
  border:1px solid var(--line-2);
  color:var(--dim);
}
.tag--ok{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft) }
.console__time{
  color:var(--faint); font-family:var(--f-mono); font-size:11px;
  margin-left:auto;
}
.console__out{
  margin:0;
  font-family:var(--f-mono);
  font-size:12.5px; line-height:1.6;
  color:var(--dim);
  min-height:72px;
  max-height:200px; overflow:auto;
}
.copy{ margin-left:auto }

/* ========================================================
   SECTIONS - sem cards decorativos, hairline rules
   ======================================================== */
.section{
  padding:112px 0;
  border-bottom:1px solid var(--line);
}
.section--alt{ background:var(--bg-elev) }
@media (max-width:768px){ .section{ padding:72px 0 } }

.section__head{
  margin-bottom:64px;
  max-width:720px;
}
.section__head .eyebrow{ margin-bottom:16px }
.section__head h2{
  font-size:var(--t-4xl);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:600;
  margin:0 0 16px;
  color:var(--ink);
}
.section__sub{
  margin:0;
  font-size:var(--t-md);
  color:var(--dim);
  max-width:52ch;
}

/* -------- Grid3 (recursos) - hairline rules, sem cards -------- */
.grid3{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.grid3 .card{
  padding:36px 32px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:transparent;
  transition:background .2s var(--ease);
}
.grid3 .card:hover{ background:rgba(0,0,0,.015) }
.card__head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px;
}
.card__head h3{
  font-size:var(--t-lg);
  font-weight:600;
  letter-spacing:-.015em;
  margin:0;
  color:var(--ink);
}
.card__body p{
  margin:0;
  font-size:var(--t-sm);
  line-height:1.65;
  color:var(--dim);
}
.card__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:9px;
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid var(--accent-line);
  flex:0 0 36px;
}

@media (max-width:900px){ .grid3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .grid3{ grid-template-columns:1fr } }

/* -------- Steps -------- */
.track{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:32px;
  padding-top:8px;
}
.track__line{
  position:absolute;
  top:27px; left:16.6%; right:16.6%;
  height:1px;
  background:linear-gradient(90deg, var(--accent-line), var(--line-2) 50%, var(--line));
}
.track__node{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  gap:14px;
}
.track__dot{
  position:relative;
  width:54px; height:54px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--bg-elev);
  border:1px solid var(--line-2);
  box-shadow:0 0 0 6px var(--bg-elev);
}
.track__node:first-child .track__dot{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.track__num{
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--dim);
  letter-spacing:.02em;
}
.track__node:first-child .track__num{ color:var(--accent) }
.track__label{
  font-size:var(--t-lg);
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--ink);
}
.track__card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px;
  background:var(--panel);
  width:100%;
  flex:1 1 auto;
  display:flex; flex-direction:column;
  text-align:left;
}
.track__desc{
  margin:0 0 14px;
  font-size:var(--t-sm);
  color:var(--dim);
  line-height:1.65;
}
.track__list{
  list-style:none; padding:0; margin:0 0 14px;
  border-top:1px solid var(--line);
  padding-top:14px;
  display:flex; flex-direction:column; gap:9px;
}
.track__list li{
  font-size:var(--t-sm);
  color:var(--ink-2);
  line-height:1.5;
  display:flex; align-items:center; gap:9px;
}
.track__list li::before{
  content:'';
  width:13px; height:13px; flex:0 0 13px;
  background:var(--accent);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}
.track__meta{
  margin-top:auto;
  display:flex; align-items:center; gap:7px;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--faint);
  letter-spacing:.01em;
}
.track__meta-icon{ color:var(--accent); flex:0 0 13px }
@media (max-width:900px){
  .track{ grid-template-columns:1fr; gap:0 }
  .track__line{
    top:27px; left:27px; right:auto;
    width:1px; height:calc(100% - 54px);
    background:linear-gradient(180deg, var(--accent-line), var(--line-2) 50%, var(--line));
  }
  .track__node{
    flex-direction:row; align-items:flex-start;
    text-align:left;
    padding-bottom:32px;
  }
  .track__card{ flex:1 }
}

/* -------- Planos -------- */
.plans{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.plan{
  padding:40px 32px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex; flex-direction:column;
  position:relative;
  transition:background .2s var(--ease);
}
.plan:hover{ background:rgba(0,0,0,.015) }
.plan--feat{ background:rgba(0,0,0,.02) }
.plan__flag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--t-xs);
  font-family:var(--f-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:24px;
}
.plan__flag svg{ width:16px; height:16px; color:var(--accent) }
.plan__name{
  font-size:var(--t-xl);
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0 0 8px;
}
.plan__price{
  display:flex; align-items:baseline; gap:4px;
  margin-bottom:8px;
  color:var(--ink);
}
.plan__label{
  font-size:var(--t-md);
  color:var(--dim);
  font-weight:500;
}
.plan__val{
  font-size:var(--t-5xl);
  font-weight:600;
  line-height:1;
  letter-spacing:-.03em;
}
.plan__per{
  font-size:var(--t-sm);
  color:var(--dim);
  margin-left:4px;
}
.plan__limit{
  font-size:var(--t-sm);
  color:var(--dim);
  margin:0 0 24px;
}
.plan__list{
  list-style:none; padding:0; margin:0 0 32px;
  display:flex; flex-direction:column; gap:10px;
  flex:1;
}
.plan__list li{
  font-size:var(--t-sm);
  color:var(--ink-2);
  display:flex; align-items:flex-start; gap:10px;
  line-height:1.5;
}
.plan__list li::before{
  content:'';
  width:14px; height:14px; flex:0 0 14px;
  margin-top:3px;
  background:var(--accent);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}
.plan__cta{ margin-top:auto; width:100% }
.plans__note{
  margin:40px 0 0;
  font-size:var(--t-xs);
  color:var(--faint);
  text-align:center;
}
@media (max-width:900px){ .plans{ grid-template-columns:1fr } }

/* -------- FAQ -------- */
.faq{
  border-top:1px solid var(--line-2);
}
.faq details{
  border-bottom:1px solid var(--line);
  padding:4px 0;
}
.faq summary{
  padding:22px 0;
  cursor:pointer;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  font-size:var(--t-lg);
  font-weight:500;
  letter-spacing:-.015em;
  color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:'';
  width:12px; height:12px;
  background:
    linear-gradient(var(--dim),var(--dim)) center/12px 1.5px no-repeat,
    linear-gradient(var(--dim),var(--dim)) center/1.5px 12px no-repeat;
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{
  background:linear-gradient(var(--dim),var(--dim)) center/12px 1.5px no-repeat;
  transform:rotate(180deg);
}
.faq details p{
  margin:0 0 24px;
  font-size:var(--t-md);
  color:var(--dim);
  line-height:1.65;
  max-width:72ch;
}
.faq details code{
  background:var(--panel);
  padding:2px 6px; border-radius:4px;
  color:var(--ink-2);
  font-size:.88em;
}

/* -------- CTA final -------- */
.cta{
  padding:112px 0;
  border-bottom:1px solid var(--line);
}
.cta__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:40px;
}
@media (max-width:768px){
  .cta{ padding:72px 0 }
  .cta__in{ flex-direction:column; align-items:flex-start }
}
.cta h2{
  font-size:var(--t-4xl);
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:600;
  margin:0 0 10px;
}
.cta p{
  margin:0;
  font-size:var(--t-md);
  color:var(--dim);
}
.cta__actions{ display:flex; gap:12px }

/* ========================================================
   FOOTER
   ======================================================== */
.foot{
  padding:48px 0 0;
  background:var(--bg);
}
.foot__in{
  display:grid; grid-template-columns:1.6fr repeat(3, 1fr);
  gap:48px;
  margin-bottom:32px;
}
@media (max-width:768px){ .foot__in{ grid-template-columns:1fr 1fr; gap:32px } }
@media (max-width:480px){ .foot__in{ grid-template-columns:1fr } }

.foot__brand .brand__name{
  font-size:var(--t-lg);
  color:var(--ink);
  margin-bottom:12px;
  display:inline-block;
}
.foot__brand p{
  margin:4px 0 0;
  font-size:var(--t-sm);
  color:var(--faint);
  max-width:36ch;
  line-height:1.6;
}
.foot__col h4{
  font-size:11px;
  font-weight:500;
  color:var(--faint);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 16px;
}
.foot__col{
  display:flex; flex-direction:column;
}
.foot__col a{
  font-size:var(--t-sm);
  color:var(--dim);
  padding:6px 0;
  transition:color .15s var(--ease);
  display:inline-flex; align-items:center; gap:8px;
}
.foot__col a:hover{ color:var(--ink) }
.foot__col a svg{ width:14px; height:14px; color:var(--faint); transition:color .15s var(--ease) }
.foot__col a:hover svg{ color:var(--accent) }

.foot__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0;
  box-shadow:inset 0 1px 0 var(--line);
  font-size:var(--t-xs);
  color:var(--faint);
}
@media (max-width:640px){ .foot__bar{ flex-direction:column; gap:8px; padding:16px 0 } }

/* ========================================================
   LOGIN (app/) - mesma linguagem, card central
   ======================================================== */
.login{
  min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--bg);
}
.login__in{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:48px 24px;
}
.login__card{
  width:100%; max-width:420px;
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:36px 32px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.03) inset,
    0 24px 60px -32px rgba(20,30,40,.12);
}
.login__brand{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-bottom:28px;
  text-align:center;
}
.login__brand .brand__mark{ width:26px; height:26px; flex:0 0 26px }
.login__brand h1{
  font-size:var(--t-xl);
  font-weight:600;
  letter-spacing:-.02em;
  margin:0;
  color:var(--ink);
}
.login__brand p{
  margin:0;
  font-size:var(--t-sm);
  color:var(--faint);
}
.field{ margin-bottom:18px }
.field label{
  display:block;
  font-size:var(--t-sm);
  font-weight:500;
  color:var(--ink-2);
  margin-bottom:8px;
}
.field .input{
  display:flex; align-items:center; gap:10px;
  background:var(--panel-2);
  border:1px solid var(--line-2);
  border-radius:8px;
  padding:0 12px;
  transition:border-color .15s var(--ease);
}
.field .input:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(9,105,218,.15) }
.field .input svg{ width:16px; height:16px; flex:0 0 16px; color:var(--faint) }
.field input{
  flex:1; min-width:0;
  height:40px;
  background:none; border:0; outline:none;
  color:var(--ink);
  font-family:var(--f-mono);
  font-size:var(--t-sm);
}
.field input::placeholder{ color:var(--mute) }
.login__hint{
  margin:20px 0 0;
  text-align:center;
  font-size:var(--t-xs);
  color:var(--faint);
}
.login__hint a{ color:var(--accent) }
.login__msg{
  display:none;
  margin:0 0 16px;
  padding:10px 12px;
  border-radius:8px;
  font-size:var(--t-xs);
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  color:var(--accent);
  font-family:var(--f-mono);
}
.login__msg[data-on="1"]{ display:block }

/* ========================================================
   FOCO ACESSIVEL
   ======================================================== */
:focus-visible:not(input):not(select):not(textarea){
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:none }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* --------- dimensoes de icone ( Phosphor ) --------- */
svg{ flex-shrink:0 }
.btn svg{ opacity:.95; width:14px; height:14px }
.btn--solid svg{ color:var(--accent-ink) }
.btn--lg svg{ width:16px; height:16px }
.btn--sm svg{ width:12px; height:12px }
.brand__mark{ width:22px !important; height:22px !important; color:var(--accent) }
.card__ico svg{ width:22px !important; height:22px !important }
.nav__burger svg{ width:20px; height:20px }

/* --------- revelar ao rolar --------- */
.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none }

/* --------- destaque de sintaxe no console --------- */
.console__out .k{ color:var(--ink-2) }
.console__out .s{ color:var(--accent) }
.console__out .n{ color:var(--ink) }
.console__out .b{ color:var(--accent-2) }
.console__req .k{ color:var(--ink-2) }

/* estados do botao copiar */
.copy.is-done{ color:var(--accent); border-color:var(--accent-line) }

/* --------- lista de modelos (catalogo real) --------- */
.strip{
  margin-top:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}
.strip__title{
  display:flex; align-items:center; gap:10px;
  margin:0; padding:14px 20px;
  font-size:11px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint);
  border-bottom:1px solid var(--line);
}
.strip__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, 1fr);
}
.strip__item{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.strip__item:nth-child(2n){ border-right:0 }
.strip__id{
  font-family:var(--f-mono);
  font-size:var(--t-sm);
  color:var(--ink);
}
.strip__meta{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--faint);
  white-space:nowrap;
}
@media (max-width:700px){
  .strip__list{ grid-template-columns:1fr }
  .strip__item{ border-right:0 }
}

/* ============================================================
   EVOLINK-LIGHT-20261018: tema claro estilo GitHub (Medidor de Banda)
   acento = preto; sucesso = verde GitHub; dados = azul GitHub.
   ============================================================ */
:root{ --green:#1a7f37; --blue:#0969da; }
.badge--ok{ color:var(--green); border-color:rgba(26,127,55,.4); background:rgba(26,127,55,.06) }
.tag--ok{ color:var(--green); border-color:rgba(26,127,55,.4); background:rgba(26,127,55,.06) }
.msg--ok{ color:var(--green); border-color:rgba(26,127,55,.4) }
.bar{ background:linear-gradient(180deg,var(--green),rgba(26,127,55,.25)) }
.console__out .b{ color:var(--green) }