/* =========================================================
   REXSUITE — Site CSS
   Design tokens & visual identity from REXSUITE Brand Book v1.0
   ========================================================= */

/* Google Fonts — Geist + Geist Mono */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap');

/* ===== 1. DESIGN TOKENS ===== */
:root {
  /* Neutrals */
  --ink:       #0A0A0B;
  --ink-2:     #131316;
  --ink-3:     #1E1E22;
  --ink-4:     #2A2A30;
  --line:      #2E2E34;
  --line-soft: #1E1E22;
  --paper:     #F4F1EA;
  --paper-2:   #E9E4D9;
  --paper-3:   #D9D3C5;
  --muted:     #6B6B72;
  --muted-2:   #9A9AA1;

  /* Product accents */
  --rex-help:   #FF4D2E;   /* HELPREX   · Apex Coral    */
  --rex-msg:    #6E5BFF;   /* MSGREX    · Plasma Violet */
  --rex-clock:  #00D17A;   /* CLOCKREX  · Apex Emerald  */
  --rex-detect: #FFC400;   /* DETECTREX · Sodium Amber  */

  /* Product tints (8% opacity for card backgrounds) */
  --tint-help:   rgba(255, 77, 46, 0.08);
  --tint-msg:    rgba(110, 91, 255, 0.08);
  --tint-clock:  rgba(0, 209, 122, 0.08);
  --tint-detect: rgba(255, 196, 0, 0.08);

  /* Typography */
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Layout */
  --max:    1280px;
  --pad-x:  56px;
  --radius: 16px;
  --radius-sm: 8px;
}

/* ===== 2. RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }

/* ===== 3. BASE ===== */
body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--rex-help); color: var(--ink); }

/* ===== 4. THE REX MARK (PNG variants) ===== */
.rex-mark {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url('/images/rex-mark-silver.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.rex-mark.silver { background-image: url('/images/rex-mark-silver.png'); }
.rex-mark.ink    { background-image: url('/images/rex-mark-ink.png'); }
.rex-mark.paper  { background-image: url('/images/rex-mark-paper.png'); }
/* HELPREX mark — file pending creation, falls back to silver  */
.rex-mark.help   { background-image: url('/images/rex-mark-silver.png');
                   filter: sepia(1) saturate(8) hue-rotate(340deg) brightness(1.05); }
.rex-mark.msg    { background-image: url('/images/rex-mark-msg.png'); }
.rex-mark.clock  { background-image: url('/images/rex-mark-clock.png'); }
.rex-mark.detect { background-image: url('/images/rex-mark-detect.png'); }

/* ===== 5. TYPOGRAPHY SCALE ===== */
h1 { font-size: clamp(44px, 7vw, 104px); line-height: .93; font-weight: 700; letter-spacing: -.04em; }
h2 { font-size: clamp(32px, 4vw, 60px);  line-height: 1;   font-weight: 600; letter-spacing: -.03em; }
h3 { font-size: clamp(18px, 2vw, 24px);  line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
h4 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

.lede {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--muted-2);
  max-width: 680px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }

/* ===== 6. HEADER / NAV ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 11, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line-soft);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad-x);
  max-width: var(--max);
  margin: 0 auto;
  gap: 32px;
}

/* Logo lockup: rex mark + REXSUITE wordmark */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}
.logo .rex-mark { width: 36px; height: 36px; }
.logo-wordmark {
  font-family: var(--font);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.06em;
  color: var(--paper);
  line-height: 1;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-menu a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-2);
  transition: color .15s;
  letter-spacing: -.01em;
}
.nav-menu a:hover { color: var(--paper); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Language switcher */
.lang-switcher { position: relative; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.lang-btn:hover { border-color: var(--line-soft); color: var(--paper); }
.lang-btn .lang-code { font-weight: 600; }
.lang-globe, .lang-chevron { flex-shrink: 0; }
.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-width: 160px;
  z-index: 200;
}
.lang-dropdown.open { display: block; }
.lang-dropdown li {
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .10em;
  color: var(--muted-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s, color .15s;
}
.lang-dropdown li:hover { background: var(--ink-4); color: var(--paper); }
.lang-dropdown .lang-code { font-weight: 600; color: var(--muted); }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  padding: 4px;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--muted-2);
  border-radius: 2px;
  transition: background .15s;
}
.menu-toggle:hover span { background: var(--paper); }

/* User nav link (Entrar / Minha conta) */
.nav-user-link {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--muted-2);
  background: transparent;
  transition: border-color .15s, color .15s, background .15s;
}
.nav-user-link:hover {
  border-color: var(--muted);
  color: var(--paper);
  background: var(--ink-3);
}

/* ===== 7. HERO ===== */
.hero {
  padding: 120px var(--pad-x) 96px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 72% 40%, rgba(255,77,46,.08), transparent),
              radial-gradient(ellipse 40% 60% at 10% 80%, rgba(110,91,255,.05), transparent);
  pointer-events: none;
}
.hero-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
.hero-text { max-width: 680px; }
.hero .eyebrow { margin-bottom: 28px; }
.hero h1 { color: var(--paper); }
.hero h1 .accent { color: var(--rex-help); }

.hero p.lede { margin-top: 28px; max-width: 540px; }

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* Hero buttons */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: opacity .15s, transform .1s;
  cursor: pointer;
}
.btn:hover { opacity: .88; }
.btn:active { transform: scale(.98); }
.btn-primary {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid transparent;
}
.btn-secondary {
  background: transparent;
  color: var(--muted-2);
  border: 1px solid var(--line);
}
.btn-secondary:hover { color: var(--paper); border-color: var(--muted); }
.btn-full { width: 100%; justify-content: center; }

.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.stat-number {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--paper);
  line-height: 1;
}
.stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* Hero glyph panel */
.hero-glyph {
  width: clamp(260px, 28vw, 420px);
  aspect-ratio: 1/1;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
  flex-shrink: 0;
}
.hero-glyph .rex-mark {
  width: 80%;
  height: 80%;
}
.hero-glyph-label {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ===== 8. ABOUT ===== */
.about {
  padding: 96px var(--pad-x);
  border-top: 1px solid var(--line-soft);
}
.about .container { max-width: var(--max); margin: 0 auto; }
.section-header { margin-bottom: 56px; }
.section-header h2 { margin-top: 12px; }
.section-header .lede { margin-top: 16px; }

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 56px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.about-card {
  padding: 40px 32px;
  background: var(--ink-2);
  transition: background .2s;
}
.about-card:hover { background: var(--ink-3); }
.about-icon {
  width: 40px;
  height: 40px;
  color: var(--rex-help);
  margin-bottom: 20px;
}
.about-icon svg { width: 100%; height: 100%; }
.about-card h3 { color: var(--paper); margin-bottom: 10px; }
.about-card p { font-size: 14px; color: var(--muted-2); line-height: 1.6; }

/* ===== 9. PRODUCTS ===== */
.products {
  padding: 96px var(--pad-x);
  border-top: 1px solid var(--line-soft);
}
.products .container { max-width: var(--max); margin: 0 auto; }

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 56px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.product-card {
  padding: 40px 36px 48px;
  background: var(--ink-2);
  position: relative;
  border-top: 2px solid transparent;
  transition: background .2s;
}
.product-card:hover { background: var(--ink-3); }
/* Accent top border per product */
.product-card.help-card   { border-top-color: var(--rex-help); }
.product-card.msg-card    { border-top-color: var(--rex-msg); }
.product-card.clock-card  { border-top-color: var(--rex-clock); }
.product-card.detect-card { border-top-color: var(--rex-detect); }

/* Product mark + badge  */
.product-mark-wrap {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}
.product-mark-wrap.help   { background: var(--rex-help); }
.product-mark-wrap.msg    { background: transparent; }
.product-mark-wrap.clock  { background: transparent; }
.product-mark-wrap.detect { background: transparent; }
/* For msg/clock/detect the mark PNG already has the colored circle */
.product-mark-wrap .rex-mark { width: 56px; height: 56px; }
/* For HELPREX wrap (coral bg): use ink mark inside */
.product-mark-wrap.help .rex-mark { background-image: url('/images/rex-mark-ink.png'); filter: none; }

/* Product wordmark lockup */
.product-wordmark {
  font-family: var(--font);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 0;
}
.product-wordmark .prefix { font-weight: 400; color: var(--muted-2); }
.product-wordmark .rex.help   { font-weight: 800; color: var(--rex-help); }
.product-wordmark .rex.msg    { font-weight: 800; color: var(--rex-msg); }
.product-wordmark .rex.clock  { font-weight: 800; color: var(--rex-clock); }
.product-wordmark .rex.detect { font-weight: 800; color: var(--rex-detect); }

.product-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 4px 10px;
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--ink-4);
  border: 1px solid var(--line);
  color: var(--muted-2);
}

.product-desc {
  font-size: 14px;
  color: var(--muted-2);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 380px;
}
.product-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}
.product-features li {
  font-size: 13px;
  color: var(--muted-2);
  padding-left: 16px;
  position: relative;
  line-height: 1.4;
}
.product-features li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--muted);
  font-size: 11px;
}
.product-card.help-card   .product-features li::before { color: var(--rex-help); }
.product-card.msg-card    .product-features li::before { color: var(--rex-msg); }
.product-card.clock-card  .product-features li::before { color: var(--rex-clock); }
.product-card.detect-card .product-features li::before { color: var(--rex-detect); }

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: opacity .15s;
}
.product-link:hover { opacity: .75; }
.product-card.help-card   .product-link { color: var(--rex-help); }
.product-card.msg-card    .product-link { color: var(--rex-msg); }
.product-card.clock-card  .product-link { color: var(--rex-clock); }
.product-card.detect-card .product-link { color: var(--rex-detect); }

/* ===== 10. CONTACT SECTION ===== */
.contact {
  padding: 96px var(--pad-x);
  border-top: 1px solid var(--line-soft);
}
.contact .container { max-width: var(--max); margin: 0 auto; }
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.contact-info .eyebrow { margin-bottom: 20px; }
.contact-info h2 { color: var(--paper); }
.contact-info > p { margin-top: 16px; }
.contact-items { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.contact-item { display: flex; align-items: flex-start; gap: 14px; }
.contact-item-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted-2);
}
.contact-item-icon svg { width: 16px; height: 16px; }
.contact-item-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.contact-item-value { font-size: 14px; color: var(--paper); font-weight: 500; }

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 36px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--paper);
  font-family: var(--font);
  font-size: 14px;
  padding: 11px 14px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.form-group select option { background: var(--ink-3); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--rex-help);
  box-shadow: 0 0 0 3px rgba(255,77,46,.12);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.contact-form .btn-primary {
  background: var(--rex-help);
  color: var(--paper);
  margin-top: 4px;
}
.contact-form .btn-primary:hover { opacity: .9; }

.form-status {
  font-size: 13px;
  line-height: 1.5;
  min-height: 20px;
  font-family: var(--mono);
  letter-spacing: .04em;
}

/* ===== 11. FOOTER ===== */
.footer {
  border-top: 1px solid var(--line-soft);
  padding: 56px var(--pad-x) 40px;
}
.footer .container { max-width: var(--max); margin: 0 auto; }
.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-soft);
}
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand p {
  font-size: 13px;
  color: var(--muted);
  max-width: 260px;
  line-height: 1.6;
}

/* Footer product marks row */
.footer-marks {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.footer-marks .rex-mark { width: 28px; height: 28px; }

.footer-links h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.footer-links ul { display: flex; flex-direction: column; gap: 10px; }
.footer-links a, .footer-links li {
  font-size: 13px;
  color: var(--muted-2);
  transition: color .15s;
}
.footer-links a:hover { color: var(--paper); }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom p {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted);
}

/* ===== 12. AUTH LAYOUT ===== */
.auth-body {
  min-height: 100vh;
  background: var(--ink);
  display: flex;
  flex-direction: column;
}
.auth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: rgba(10,10,11,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.auth-headlink {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: color .15s;
}
.auth-headlink:hover { color: var(--paper); }
.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}

/* Auth card */
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 36px;
}
.auth-card h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--paper);
  margin-bottom: 6px;
}
.auth-sub { font-size: 14px; color: var(--muted-2); margin-bottom: 28px; }

.auth-card label {
  display: block;
  margin-top: 16px;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  width: 100%;
  padding: 11px 14px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  color: var(--paper);
  transition: border-color .15s, box-shadow .15s;
}
.auth-card input:focus {
  outline: none;
  border-color: var(--rex-help);
  box-shadow: 0 0 0 3px rgba(255,77,46,.12);
}
.auth-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted-2);
}
.auth-check input { width: auto; }

.auth-btn,
.auth-btn-link {
  display: inline-block;
  width: 100%;
  margin-top: 24px;
  padding: 13px 18px;
  background: var(--paper);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  text-align: center;
  transition: opacity .15s, transform .1s;
}
.auth-btn:hover, .auth-btn-link:hover { opacity: .9; }
.auth-btn:active, .auth-btn-link:active { transform: scale(.99); }

.auth-btn-secondary {
  padding: 8px 16px;
  background: transparent;
  color: var(--muted-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.auth-btn-secondary:hover { border-color: var(--muted); color: var(--paper); }

.auth-link {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted-2);
}
.auth-link a, .auth-link-inline {
  color: var(--rex-help);
  font-weight: 600;
}
.auth-link a:hover, .auth-link-inline:hover { text-decoration: underline; }

.auth-error {
  color: #FF6B6B;
  font-size: 12px;
  margin-top: 5px;
  display: block;
  font-family: var(--mono);
}
.auth-info {
  padding: 12px 14px;
  background: rgba(0,209,122,.08);
  border: 1px solid rgba(0,209,122,.25);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--rex-clock);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ===== 13. ACCOUNT DASHBOARD ===== */
.account-shell {
  width: 100%;
  max-width: 920px;
}
.account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 28px;
}
.account-header h1 { font-size: 28px; font-weight: 700; color: var(--paper); }
.account-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .10em; color: var(--muted); margin-top: 4px; }

.account-card {
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 16px;
}
.account-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.account-card h2 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--paper); }
.account-empty { font-size: 14px; color: var(--muted-2); line-height: 1.7; }
.account-dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 16px;
  font-size: 14px;
}
.account-dl dt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.account-dl dd { color: var(--paper); }

/* Subscription rows */
.sub-row {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 24px;
  margin-bottom: 14px;
  background: var(--ink-3);
}
.sub-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.sub-row-head h3 { font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.sub-status {
  padding: 3px 10px;
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}
.sub-status-trialing  { background: rgba(0,209,122,.12);  color: var(--rex-clock);  border: 1px solid rgba(0,209,122,.3); }
.sub-status-active    { background: rgba(0,209,122,.08);  color: var(--rex-clock);  border: 1px solid rgba(0,209,122,.2); }
.sub-status-past_due  { background: rgba(255,196,0,.10);  color: var(--rex-detect); border: 1px solid rgba(255,196,0,.25); }
.sub-status-canceled  { background: rgba(255,77,46,.08);  color: var(--rex-help);   border: 1px solid rgba(255,77,46,.2); }
.sub-status-incomplete { background: var(--ink-4); color: var(--muted-2); border: 1px solid var(--line); }

.sub-dl { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; font-size: 13px; }
.sub-dl dt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sub-dl dd { color: var(--paper); }
.sub-warn { font-family: var(--mono); font-size: 11px; color: var(--rex-detect); font-weight: 600; }

.sub-key {
  padding: 3px 8px;
  background: var(--ink-4);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--paper);
}
.sub-copy {
  margin-left: 8px;
  padding: 3px 10px;
  background: var(--ink-3);
  color: var(--muted-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.sub-copy:hover { color: var(--paper); border-color: var(--muted); }
.sub-invoices { margin-top: 18px; font-size: 13px; }
.sub-invoices summary { cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sub-invoices ul { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.sub-invoices li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted-2); }
.sub-invoices .inv-date { color: var(--muted); font-family: var(--mono); font-size: 11px; margin-right: 8px; }
.sub-invoices a { margin-left: 8px; color: var(--rex-help); font-weight: 600; }

/* Account download link */
.auth-btn-secondary[href] {
  display: inline-flex;
  text-decoration: none;
}

/* ===== 14. PLANOS PAGE ===== */
.planos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.plano-card {
  background: var(--ink-2);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--line);
  transition: background .2s;
}
.plano-card:hover { background: var(--ink-3); }

.plano-card h2 { font-size: 20px; font-weight: 700; letter-spacing: -.04em; color: var(--paper); margin-bottom: 8px; }
.plano-desc { font-size: 13px; color: var(--muted-2); line-height: 1.55; min-height: 52px; margin-bottom: 20px; }

.plano-preco {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 24px;
}
.plano-moeda { font-family: var(--mono); font-size: 14px; color: var(--muted); font-weight: 600; }
.plano-valor { font-size: 40px; font-weight: 800; letter-spacing: -.06em; color: var(--paper); line-height: 1; }
.plano-periodo { font-family: var(--mono); font-size: 10px; letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }

.plano-form { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.plano-label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.plano-label input {
  padding: 10px 12px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  color: var(--paper);
  transition: border-color .15s;
}
.plano-label input:focus { outline: none; border-color: var(--rex-help); }

/* Plano card buttons colored per product */
.plano-card.plan-helprex   .auth-btn { background: var(--rex-help);   color: var(--ink); }
.plano-card.plan-msgrex    .auth-btn { background: var(--rex-msg);    color: var(--paper); }
.plano-card.plan-clockrex  .auth-btn { background: var(--rex-clock);  color: var(--ink); }
.plano-card.plan-detectrex .auth-btn { background: var(--rex-detect); color: var(--ink); }
.plano-card .auth-btn { margin-top: 12px; }
.plano-card .auth-btn-link { margin-top: 12px; background: var(--ink-3); color: var(--muted-2); border: 1px solid var(--line); }

/* ===== 15. RESPONSIVE ===== */
@media (max-width: 1024px) {
  :root { --pad-x: 32px; }
  .hero-content { grid-template-columns: 1fr; }
  .hero-glyph { display: none; }
  .contact-wrapper { grid-template-columns: 1fr; gap: 48px; }
  .footer-content { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --pad-x: 20px; }
  .nav-menu { display: none; }
  .menu-toggle { display: flex; }
  .nav-menu.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--line);
    padding: 16px 20px;
    gap: 16px;
    z-index: 99;
  }
  .about-grid { grid-template-columns: 1fr; gap: 2px; }
  .products-grid { grid-template-columns: 1fr; }
  .planos-grid { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: 1fr; gap: 32px; }
  .hero-stats { flex-wrap: wrap; gap: 24px; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .contact-form { padding: 28px 20px; }
}