/* =========================================================================
   BreezeHost — sistema visual

   Linguagem emprestada da referência (enxadahost.com), medida do site real:
   ameixa #4d1e54 como cor de marca, âmbar #ffa600 como acento, Open Sans,
   raios de 8/16px e — a assinatura — SOMBRA DURA, sem blur:
   `0 8px 0 rgba(77,30,84,.16)`. É o que dá o aspecto de bloco, e é
   justamente o que diferencia de gradiente borrado genérico.

   Claro é o padrão (como a referência). Escuro entra por preferência do
   sistema e pode ser fixado no botão do cabeçalho, que grava data-theme
   no <html>. Toda cor é token: nenhuma cor literal fora dos blocos :root.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */

:root{
  /* marca */
  --plum:      #4d1e54;
  --plum-d:    #3a1640;
  --plum-l:    #6e2ed8;
  --plum-soft: #a480db;
  --amber:     #ffa600;
  --amber-l:   #ffb833;
  --amber-d:   #c95406;

  /* superfícies — tema claro */
  --bg:        #ffffff;
  --bg-2:      #f7f5f8;
  --bg-3:      #efeaf1;
  --card:      #ffffff;
  --card-2:    #faf8fb;

  /* texto */
  --text:      #2b1430;
  --muted:     #6b5570;
  --faint:     #9b819f;

  /* traços */
  --line:      #e4dce6;
  --line-2:    #d3c6d6;

  /* semânticos */
  --ok:        #1f8a5f;
  --ok-bg:     #e6f6ee;
  --warn:      #b06d00;
  --warn-bg:   #fff4e0;
  --bad:       #c2334d;
  --bad-bg:    #fdecef;

  /* a assinatura: deslocamento sólido, blur zero */
  --drop:      0 8px 0 rgba(77,30,84,.16);
  --drop-sm:   0 4px 0 rgba(77,30,84,.14);
  --drop-lg:   0 12px 0 rgba(77,30,84,.18);
  --drop-amber:0 6px 0 rgba(201,84,6,.28);

  --body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 8px;
  --r:    16px;
  --r-lg: 16px;
  --r-pill: 64px;

  --shell: min(1180px, 100% - 3rem);
  --ease:  cubic-bezier(.22,1,.36,1);

  color-scheme: light;
}

/* Escuro por preferência do sistema — a menos que o usuário tenha fixado claro */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:     #150d18;
    --bg-2:   #1d1221;
    --bg-3:   #271830;
    --card:   #1d1221;
    --card-2: #241528;

    --text:   #f4ecf6;
    --muted:  #b9a4bf;
    --faint:  #8d7794;

    --line:   #33203a;
    --line-2: #452c4d;

    --plum:      #c9a3d4;
    --plum-l:    #a480db;
    --plum-soft: #6e2ed8;

    --ok:      #4ade80;  --ok-bg:   #12301f;
    --warn:    #fbbf24;  --warn-bg: #33240a;
    --bad:     #fb7185;  --bad-bg:  #38151d;

    --drop:      0 8px 0 rgba(0,0,0,.42);
    --drop-sm:   0 4px 0 rgba(0,0,0,.38);
    --drop-lg:   0 12px 0 rgba(0,0,0,.48);
    --drop-amber:0 6px 0 rgba(0,0,0,.45);

    color-scheme: dark;
  }
}

/* Escuro fixado no botão — vence a media query nos dois sentidos */
:root[data-theme="dark"]{
  --bg:     #150d18;
  --bg-2:   #1d1221;
  --bg-3:   #271830;
  --card:   #1d1221;
  --card-2: #241528;

  --text:   #f4ecf6;
  --muted:  #b9a4bf;
  --faint:  #8d7794;

  --line:   #33203a;
  --line-2: #452c4d;

  --plum:      #c9a3d4;
  --plum-l:    #a480db;
  --plum-soft: #6e2ed8;

  --ok:      #4ade80;  --ok-bg:   #12301f;
  --warn:    #fbbf24;  --warn-bg: #33240a;
  --bad:     #fb7185;  --bad-bg:  #38151d;

  --drop:      0 8px 0 rgba(0,0,0,.42);
  --drop-sm:   0 4px 0 rgba(0,0,0,.38);
  --drop-lg:   0 12px 0 rgba(0,0,0,.48);
  --drop-amber:0 6px 0 rgba(0,0,0,.45);

  color-scheme: dark;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ------------------------------------------------------------------ topbar */

.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:2rem;
  padding:.9rem max(1.5rem, calc((100% - 1180px) / 2));
  border-bottom:1px solid var(--line);
  background:var(--bg);
}

.brand{ display:flex; align-items:center; gap:.62rem; color:var(--text); text-decoration:none; }
.brand__mark{ width:29px; height:29px; color:var(--plum); flex:none; }
.brand__word{ font-weight:800; font-size:1.22rem; letter-spacing:-.02em; }
.brand__word em{ font-style:normal; font-weight:800; color:var(--amber-d); }
.brand__word--sm{ font-size:1.06rem; }

.topnav{ display:flex; gap:1.7rem; margin-left:auto; align-items:center; }
.topnav a{
  color:var(--muted); text-decoration:none; font-size:.93rem; font-weight:700;
  padding-block:.2rem;
  transition:color .2s var(--ease);
}
.topnav a:hover{ color:var(--plum); }

/* botão de tema — some do fluxo sem JS, aparece quando o script liga */
.themetoggle{
  flex:none;
  display:grid; place-items:center;
  width:38px; height:38px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--card); color:var(--muted);
  cursor:pointer; padding:0;
  transition:color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.themetoggle:hover{ color:var(--plum); border-color:var(--plum-soft); }
.themetoggle:active{ transform:translateY(1px); }
.themetoggle svg{ width:18px; height:18px; }
.themetoggle .i-sun{ display:none; }
.themetoggle .i-moon{ display:block; }
:root[data-theme="dark"] .themetoggle .i-sun{ display:block; }
:root[data-theme="dark"] .themetoggle .i-moon{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themetoggle .i-sun{ display:block; }
  :root:not([data-theme="light"]) .themetoggle .i-moon{ display:none; }
}

.pulse{ display:flex; align-items:center; gap:.5rem; }
.pulse__dot{
  width:8px; height:8px; border-radius:50%; background:var(--ok);
  animation:ping 2.6s ease-out infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(31,138,95,.5); }
  70%{ box-shadow:0 0 0 8px rgba(31,138,95,0); }
  100%{ box-shadow:0 0 0 0 rgba(31,138,95,0); }
}
.pulse__label{
  font-size:.74rem; color:var(--muted); font-weight:700;
}

/* ------------------------------------------------------------- tipografia */

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.76rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--amber-d);
  background:var(--warn-bg);
  border-radius:var(--r-pill);
  padding:.35rem .85rem;
}

h1,h2,h3,h4{ letter-spacing:-.02em; line-height:1.12; margin:0; font-weight:800; }

.section{ width:var(--shell); margin-inline:auto; padding-block:clamp(3.5rem,7vw,6rem); }
.section__head{ max-width:56ch; margin-bottom:2.8rem; }
.section__head h2{ font-size:clamp(1.9rem,4vw,2.8rem); margin:.9rem 0 .9rem; }
.section__head p{ color:var(--muted); font-size:1.02rem; margin:0; }

/* Cabeçalho centralizado, como na referência */
.section__head--mid{ margin-inline:auto; text-align:center; }

/* --------------------------------------------------------------------- hero */

.hero{
  width:var(--shell); margin-inline:auto;
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
  padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem);
}

.hero__title{
  font-size:clamp(2.5rem,6vw,4.2rem);
  margin:1.2rem 0 1.3rem;
}
.hero__title .accent{
  color:var(--amber-d);
  position:relative; white-space:nowrap;
}
/* traço sólido sob a palavra-chave — sem brilho, sem blur */
.hero__title .accent::after{
  content:''; position:absolute; left:0; right:0; bottom:-.06em; height:.11em;
  background:var(--amber); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  animation:swipe .8s var(--ease) .6s forwards;
}
@keyframes swipe{ to{ transform:scaleX(1); } }

.hero__lede{ color:var(--muted); font-size:1.08rem; max-width:46ch; margin:0 0 2rem; }
.hero__cta{ display:flex; gap:.85rem; flex-wrap:wrap; align-items:center; }

/* painel de telemetria — cartão sólido com a sombra dura */
.telemetry{
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  padding:1.5rem 1.5rem 1.1rem;
  box-shadow:var(--drop);
}
.telemetry__head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.72rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint);
  padding-bottom:.85rem; border-bottom:1px solid var(--line);
}
.telemetry__rows{ display:grid; gap:.05rem; margin-top:.4rem; }
.trow{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--line);
}
.trow:last-child{ border-bottom:0; }
.trow__k{ font-size:.88rem; color:var(--muted); }
.trow__v{ font-family:var(--mono); font-size:1rem; font-weight:700; color:var(--text); text-align:right; }
.trow__v small{ font-size:.68rem; color:var(--faint); font-weight:400; margin-left:.3rem; }
.trow__v.good{ color:var(--ok); }

.bar{ height:8px; border-radius:var(--r-pill); background:var(--bg-3); overflow:hidden; width:96px; flex:none; }
.bar span{
  display:block; height:100%; border-radius:var(--r-pill);
  background:var(--amber);
  animation:fill 1.2s var(--ease) both;
}
@keyframes fill{ from{ width:0 !important; } }

/* ------------------------------------------------------------------ botões */

/* Botão com sombra dura que "afunda" no clique: o deslocamento vira 0
   e o botão desce o mesmo tanto — o pixel não se move, só o volume. */
.btn{
  --btn-bg:var(--plum);
  --btn-fg:#ffffff;
  --btn-drop:rgba(58,22,64,.32);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.6rem;
  border:0; border-radius:var(--r-sm);
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--body); font-weight:800; font-size:.97rem;
  text-decoration:none; cursor:pointer;
  box-shadow:0 4px 0 var(--btn-drop);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), filter .2s var(--ease);
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translateY(4px); box-shadow:0 0 0 var(--btn-drop); }

/* CTA primário fica no âmbar, como o "Começar a usar" da referência */
.btn--amber{ --btn-bg:var(--amber); --btn-fg:#3a1640; --btn-drop:rgba(201,84,6,.45); }

.btn--ghost{
  --btn-bg:var(--card); --btn-fg:var(--text); --btn-drop:transparent;
  border:1px solid var(--line-2); box-shadow:none;
}
.btn--ghost:hover{ border-color:var(--plum-soft); filter:none; background:var(--bg-2); }
.btn--ghost:active{ transform:translateY(1px); box-shadow:none; }

.btn--block{ width:100%; }
.btn--lg{ padding:1rem 2rem; font-size:1.02rem; }

.btn--off{
  --btn-bg:var(--bg-3); --btn-fg:var(--faint); --btn-drop:transparent;
  border:1px dashed var(--line-2);
  box-shadow:none; cursor:not-allowed;
}
.btn--off:hover{ filter:none; }
.btn--off:active{ transform:none; box-shadow:none; }

.notice{
  display:flex; align-items:flex-start; gap:.65rem;
  margin:1.5rem 0 0; padding:.85rem 1.05rem;
  max-width:46ch;
  border:1px solid var(--amber);
  background:var(--warn-bg);
  border-radius:var(--r-sm);
  color:var(--warn); font-size:.88rem; line-height:1.5; font-weight:600;
}
.notice__dot{
  flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--amber); margin-top:.45rem;
}

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
button:focus-visible{
  outline:3px solid var(--plum-l);
  outline-offset:2px;
}

/* ------------------------------------------------------------------ ticker */

.ticker{
  border-block:1px solid var(--line);
  padding-block:.8rem;
  overflow:hidden;
  background:var(--bg-2);
}
.ticker__track{
  display:flex; gap:3rem; width:max-content;
  animation:slide 38s linear infinite;
}
.ticker__track span{
  font-size:.8rem; font-weight:700; color:var(--muted); white-space:nowrap;
  display:flex; align-items:center; gap:.7rem;
}
.ticker__track span::before{
  content:''; width:7px; height:7px; border-radius:2px;
  background:var(--amber); flex:none;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* --------------------------------------------------- faixa de confiança */
/* Os quatro selos da referência: garantia, DDoS, dados, atendimento. */

.trust{
  width:var(--shell); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem;
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
.trust__item{
  display:flex; flex-direction:column; gap:.6rem;
  padding:1.4rem 1.2rem;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--drop-sm);
}
.trust__ico{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-sm);
  background:var(--bg-3); color:var(--plum);
}
.trust__ico svg{ width:22px; height:22px; }
.trust__item h3{ font-size:1rem; }
.trust__item p{ margin:0; color:var(--muted); font-size:.87rem; line-height:1.5; }

/* -------------------------------------------------------------- planos */

.plans{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
  gap:1.4rem;
  align-items:start;
}

.plan{
  position:relative;
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  padding:1.8rem 1.6rem 1.6rem;
  box-shadow:var(--drop);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.plan:hover{ transform:translateY(-4px); box-shadow:var(--drop-lg); }

/* O destaque troca a cor da borda e do topo em vez de flutuar com halo. */
.plan--featured{
  border-color:var(--plum-soft);
  border-width:2px;
}
.plan--featured::before{
  content:''; position:absolute; inset:-2px -2px auto; height:6px;
  background:var(--amber);
  border-radius:var(--r) var(--r) 0 0;
}

.plan__flag{
  position:absolute; top:0; right:1.4rem;
  transform:translateY(-50%);
  background:var(--amber); color:#3a1640;
  font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em;
  padding:.35rem .8rem; border-radius:var(--r-pill);
  box-shadow:var(--drop-sm);
}

.plan__idx{
  display:flex; align-items:center; gap:.45rem;
  font-size:.74rem; color:var(--faint); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.plan__glyph{ font-size:1.05rem; line-height:1; letter-spacing:0; }
.plan__name{ font-size:1.6rem; margin:.5rem 0 .25rem; }
.plan__tag{ color:var(--muted); font-size:.9rem; margin:0 0 1.3rem; min-height:2.6em; }

.plan__price{ display:flex; align-items:baseline; gap:.3rem; margin-bottom:1.4rem; }
.plan__price b{ font-size:2.8rem; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--plum); }
.plan__price .cur{ font-size:1rem; color:var(--muted); font-weight:700; }
.plan__price .per{ font-size:.82rem; color:var(--faint); margin-left:.15rem; }

.plan__specs{ list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:.05rem; }
.plan__specs li{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid var(--line);
  font-size:.9rem; color:var(--muted);
}
.plan__specs li:last-child{ border-bottom:0; }
.plan__specs b{ font-family:var(--mono); color:var(--text); font-weight:700; font-size:.87rem; }

/* ------------------------------------------------------- números grandes */

.stats{
  width:var(--shell); margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;
  padding-block:clamp(2rem,4vw,3rem);
}
.stat{
  text-align:center;
  padding:1.6rem 1.2rem;
  background:var(--plum);
  border-radius:var(--r);
  box-shadow:var(--drop);
}
.stat b{
  display:block; font-size:clamp(1.9rem,4vw,2.7rem); font-weight:800;
  letter-spacing:-.03em; line-height:1; color:#ffffff;
}
.stat span{ display:block; margin-top:.5rem; font-size:.85rem; font-weight:700; color:rgba(255,255,255,.8); }
:root[data-theme="dark"] .stat{ background:var(--bg-3); border:1px solid var(--line-2); }
:root[data-theme="dark"] .stat b{ color:var(--text); }
:root[data-theme="dark"] .stat span{ color:var(--muted); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .stat{ background:var(--bg-3); border:1px solid var(--line-2); }
  :root:not([data-theme="light"]) .stat b{ color:var(--text); }
  :root:not([data-theme="light"]) .stat span{ color:var(--muted); }
}

/* ----------------------------------------------------------------- infra */

.feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.feat{
  border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem 1.3rem;
  background:var(--card);
  box-shadow:var(--drop-sm);
  transition:transform .18s var(--ease);
}
.feat:hover{ transform:translateY(-3px); }
.feat__n{
  display:inline-grid; place-items:center;
  width:32px; height:32px; border-radius:var(--r-sm);
  background:var(--amber); color:#3a1640;
  font-size:.8rem; font-weight:800;
}
.feat h3{ font-size:1.1rem; margin:.8rem 0 .5rem; }
.feat p{ color:var(--muted); font-size:.89rem; margin:0; line-height:1.55; }

/* ------------------------------------------------------------- comunidade */

.discord{
  width:var(--shell); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
  padding:2rem 2.2rem;
  margin-block:clamp(2rem,5vw,3.5rem);
  background:var(--plum);
  border-radius:var(--r);
  box-shadow:var(--drop);
}
.discord h3{ color:#ffffff; font-size:1.4rem; margin:0 0 .4rem; }
.discord p{ color:rgba(255,255,255,.82); margin:0; font-size:.94rem; }
:root[data-theme="dark"] .discord{ background:var(--bg-3); border:1px solid var(--line-2); }
:root[data-theme="dark"] .discord h3{ color:var(--text); }
:root[data-theme="dark"] .discord p{ color:var(--muted); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .discord{ background:var(--bg-3); border:1px solid var(--line-2); }
  :root:not([data-theme="light"]) .discord h3{ color:var(--text); }
  :root:not([data-theme="light"]) .discord p{ color:var(--muted); }
}

/* -------------------------------------------------------------- shells */

.shell-narrow{ width:min(940px, 100% - 3rem); margin-inline:auto; padding-block:clamp(2.5rem,6vw,4rem); }

.panel{
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  padding:clamp(1.6rem,3.5vw,2.4rem);
  box-shadow:var(--drop);
}

/* ------------------------------------------------------------ checkout */

.co{ display:grid; grid-template-columns:1.25fr .75fr; gap:1.6rem; align-items:start; }

.field{ margin-bottom:1.15rem; }
.field label{
  display:block; font-size:.8rem; font-weight:800;
  color:var(--muted); margin-bottom:.45rem;
}
.field input{
  width:100%; padding:.85rem 1rem;
  background:var(--bg);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--text); font-family:var(--body); font-size:1rem;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder{ color:var(--faint); }
.field input:focus{
  border-color:var(--plum-l);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--plum-l) 22%, transparent);
  outline:none;
}
.field--bad input{ border-color:var(--bad); }
.field__err{ display:block; margin-top:.4rem; font-size:.78rem; color:var(--bad); font-weight:700; }
.field__hint{ display:block; margin-top:.4rem; font-size:.78rem; color:var(--faint); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }

.summary{ position:sticky; top:6rem; }
.summary__plan{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid var(--line);
}
.summary__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin-top:1.1rem; padding-top:1.1rem; border-top:2px solid var(--line-2);
}
.summary__total b{ font-size:1.9rem; font-weight:800; letter-spacing:-.03em; color:var(--plum); }

.pixbadge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.74rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ok);
  background:var(--ok-bg); border:1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  padding:.4rem .8rem; border-radius:var(--r-pill);
}

/* ------------------------------------------------------------- pagamento */

.pay{ display:grid; grid-template-columns:.9fr 1.1fr; gap:2rem; align-items:start; }

/* O QR fica sempre em fundo branco real, inclusive no tema escuro:
   leitor de banco erra em QR invertido. */
.qr{
  background:#ffffff; border-radius:var(--r-sm);
  padding:14px; line-height:0;
  border:1px solid var(--line-2);
  box-shadow:var(--drop);
}
.qr img{ width:100%; height:auto; display:block; }
.qr-wrap{ display:grid; gap:1rem; justify-items:center; }

.countdown{
  font-family:var(--mono); font-size:1.5rem; font-weight:700;
  color:var(--warn); letter-spacing:.04em;
}
.countdown.urgent{ color:var(--bad); animation:blink 1.1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.42; } }

.copycode{
  display:flex; gap:.5rem; align-items:stretch;
  background:var(--bg-2);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:.55rem .55rem .55rem .9rem;
}
.copycode code{
  flex:1; min-width:0;
  font-family:var(--mono); font-size:.74rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  align-self:center;
}
.copycode button{
  flex:none; padding:.55rem 1rem; border-radius:var(--r-sm);
  background:var(--plum); color:#fff; border:0;
  font-family:var(--body); font-weight:800; font-size:.84rem; cursor:pointer;
  box-shadow:0 3px 0 rgba(58,22,64,.3);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease);
}
.copycode button:active{ transform:translateY(3px); box-shadow:0 0 0 rgba(58,22,64,.3); }
.copycode button.done{ background:var(--ok); box-shadow:0 3px 0 color-mix(in srgb, var(--ok) 60%, black); }

.states{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.9rem; }
.state{ display:flex; gap:.85rem; align-items:flex-start; opacity:.45; transition:opacity .35s var(--ease); }
.state.on{ opacity:1; }
.state__dot{
  flex:none; width:18px; height:18px; border-radius:50%; margin-top:.15rem;
  border:2px solid var(--line-2);
  display:grid; place-items:center;
}
.state.on .state__dot{ border-color:var(--ok); }
.state.on .state__dot::after{ content:''; width:7px; height:7px; border-radius:50%; background:var(--ok); }
.state.spin .state__dot{
  border-color:var(--amber) transparent var(--amber) transparent;
  animation:spin 1s linear infinite;
}
.state.spin .state__dot::after{ content:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.state__t{ font-weight:800; font-size:.95rem; }
.state__d{ color:var(--muted); font-size:.84rem; }

.alert{
  border-radius:var(--r-sm); padding:.85rem 1rem;
  font-size:.88rem; border:1px solid; font-weight:600;
  margin-bottom:1.2rem;
}
.alert--warn{ border-color:var(--amber); background:var(--warn-bg); color:var(--warn); }
.alert--bad{ border-color:var(--bad); background:var(--bad-bg); color:var(--bad); }
.alert--ok{ border-color:var(--ok); background:var(--ok-bg); color:var(--ok); }

/* --------------------------------------------------------------- recibo */

.receipt__mark{
  width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center; margin:0 auto 1.5rem;
  background:var(--ok-bg); border:2px solid var(--ok);
  animation:pop .5s var(--ease) both;
}
@keyframes pop{ from{ transform:scale(.6); opacity:0; } }
.receipt__mark svg{ width:34px; height:34px; color:var(--ok); }

.kv{ display:grid; gap:.05rem; margin:1.8rem 0; }
.kv div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.75rem 0; border-bottom:1px solid var(--line);
  font-size:.92rem;
}
.kv div:last-child{ border-bottom:0; }
.kv dt{ color:var(--muted); margin:0; }
.kv dd{ margin:0; font-family:var(--mono); font-size:.86rem; text-align:right; word-break:break-all; }

/* ---------------------------------------------------------------- admin */

.adm-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem; }
.adm-stat{
  border:1px solid var(--line); border-radius:var(--r);
  padding:1.2rem; background:var(--card);
  box-shadow:var(--drop-sm);
}
.adm-stat span{ font-size:.74rem; font-weight:800; color:var(--faint); }
.adm-stat b{
  display:block; font-size:1.9rem; font-weight:800;
  letter-spacing:-.03em; margin-top:.4rem; color:var(--plum);
}

.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--card); }
table{ width:100%; border-collapse:collapse; font-size:.86rem; min-width:820px; }
th{
  text-align:left; padding:.85rem 1rem;
  font-size:.72rem; font-weight:800; color:var(--muted);
  background:var(--bg-2); border-bottom:1px solid var(--line);
  white-space:nowrap;
}
td{ padding:.8rem 1rem; border-bottom:1px solid var(--line); color:var(--muted); }
tr:last-child td{ border-bottom:0; }
tbody tr:hover td{ background:var(--bg-2); color:var(--text); }

.tag{
  display:inline-block; padding:.24rem .62rem; border-radius:var(--r-pill);
  font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em;
}
.tag--paid{ background:var(--ok-bg); color:var(--ok); }
.tag--pending{ background:var(--warn-bg); color:var(--warn); }
.tag--dead{ background:var(--bad-bg); color:var(--bad); }
.tag--muted{ background:var(--bg-3); color:var(--muted); }

.inline-form{ display:inline; }
.btn-mini{
  padding:.32rem .75rem; border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:var(--card); color:var(--plum); cursor:pointer;
  font-size:.72rem; font-weight:800;
  transition:background .18s var(--ease);
}
.btn-mini:hover{ background:var(--bg-3); }

.login-box{ width:min(400px,100% - 3rem); margin:14vh auto; }

/* --------------------------------------------------------------- rodapé */

.foot{
  width:var(--shell); margin-inline:auto;
  padding-block:3rem 2.5rem; border-top:1px solid var(--line); margin-top:3rem;
}
.foot__grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; }
.foot__grid h4{ font-size:.78rem; font-weight:800; color:var(--text); margin-bottom:.9rem; }
.foot__grid a{
  display:block; color:var(--muted); text-decoration:none; font-size:.9rem;
  margin-bottom:.5rem; transition:color .18s var(--ease);
}
.foot__grid a:hover{ color:var(--plum); }
.foot__note{ color:var(--muted); font-size:.88rem; max-width:38ch; margin:.7rem 0 0; }
.foot__mini{ font-size:.78rem; color:var(--faint); }
.foot__rule{ height:1px; background:var(--line); margin:2.5rem 0 1.3rem; }
.foot__bottom{ display:flex; justify-content:space-between; gap:1rem; font-size:.78rem; color:var(--faint); }

/* ------------------------------------------------------------- revelação */

.rise{ animation:rise .7s var(--ease) both; animation-delay:calc(var(--i,0) * 80ms); }
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } }

@supports (animation-timeline:view()){
  .reveal{
    animation:rise-soft linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 46%;
  }
}
@keyframes rise-soft{ from{ opacity:0; transform:translateY(22px); } }

/* --------------------------------------------------------- responsivo */

@media (max-width:980px){
  .hero{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
  .feats{ grid-template-columns:repeat(2,1fr); }
  .trust{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:1fr; }
  .co,.pay{ grid-template-columns:1fr; }
  .summary{ position:static; }
  .adm-stats{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .discord{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:620px){
  :root{ --shell:min(1180px, 100% - 2rem); }
  .topbar{ padding-inline:1rem; gap:.75rem; }
  .topnav{ display:none; }
  .pulse{ display:none; }
  .themetoggle{ margin-left:auto; }
  .feats{ grid-template-columns:1fr; }
  .trust{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; }
  .foot__bottom{ flex-direction:column; gap:.4rem; }
  .adm-stats{ grid-template-columns:1fr 1fr; }
}

/* ------------------------------------------------- acessibilidade/motion */

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

::selection{ background:var(--amber); color:#3a1640; }

::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:var(--r-pill); border:3px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--faint); }