/* ==========================================================================
   Nippax Logistics: Site Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

@font-face {
  font-family: 'PP Mori';
  src: url('../fonts/PPMori-Semibold.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-mori: 'PP Mori', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-inter: 'Inter', system-ui, sans-serif;
  --font-body: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "PP Mori", "Plus Jakarta Sans", sans-serif;

  --bg: #ffffff;
  --text: #14141a;
  --text-soft: #5c5c66;
  --text-faint: #717179;
  --border: #eae8e5;
  --surface: #f4f3f0;
  --surface-2: #eae9e5;
  --dark: #111114;

  --pink: #ec4899;
  --peach: #f97316;
  --blue: #0ea5e9;
  --purple: #a855f7;
  --mint: #10b981;
  --danger: #c81e3a;
  --amber: #b45309;

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-full: 9999px;

  --shadow-card: 0 1px 2px rgba(20,20,26,.05), 0 10px 30px rgba(20,20,26,.06);
  --shadow-pop: 0 20px 60px rgba(20,20,26,.12);
  --shadow-hero: 0 24px 48px rgba(0,0,0,0.06);

  --container: 1120px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: var(--font-inter);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.mori-font {
  font-family: var(--font-mori);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

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

/* Eyebrow badges with colorful SVG icons */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #27272a;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 6px 16px 6px 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.eyebrow svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.eyebrow svg.icon-purple { color: #a855f7; stroke: #a855f7; }
.eyebrow svg.icon-green { color: #10b981; stroke: #10b981; }
#simulador {
  z-index: 20; /* Ensures dropdown overlaps the next section */
}
#simulador .eyebrow svg.icon-green { color: #0EA5E9; stroke: #0EA5E9; }
.eyebrow svg.icon-orange { color: #f97316; stroke: #f97316; }
.eyebrow svg.icon-blue { color: #0ea5e9; stroke: #0ea5e9; }
.eyebrow svg.icon-indigo { color: #6366f1; stroke: #6366f1; }
.eyebrow svg.icon-teal { color: #10b981; stroke: #10b981; }
.eyebrow svg.icon-pink { color: #ec4899; stroke: #ec4899; }

.section { padding: 96px 0; position: relative; z-index: 10; background: #ffffff; }
.section-gray { background: #f7f7f7; }

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.section-head h2 {
  font-family: var(--font-mori);
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.15;
  margin: 16px 0 12px;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.section-head p {
  color: var(--text-soft);
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  transition: background .2s ease, box-shadow .2s ease, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}
.btn:hover { transform: scale(1.035); }
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--dark);
  color: #fff;
}
.btn-primary:hover { background: #000; box-shadow: var(--shadow-card); }

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-2); }

/* Liquid Glass treatment for the drawer's "Entrar na Conta" pill — see
   .btn-sign-in for the full rationale. */
.mobile-drawer .btn-ghost {
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.03),
    0 2px 10px rgba(0, 0, 0, 0.04);
}
.mobile-drawer .btn-ghost:hover {
  background: rgba(0, 0, 0, 0.08);
}

.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* --- Auth pages (login.html / register.html) --- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--surface);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px 36px;
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.auth-logo img {
  height: 30px;
  width: auto;
  object-fit: contain;
}

.auth-card h1 {
  font-family: var(--font-mori);
  font-size: 24px;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 8px;
}

.auth-subtitle {
  color: var(--text-soft);
  font-size: 14px;
  text-align: center;
  margin-bottom: 28px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.form-field input {
  width: 100%;
  font-family: var(--font-inter);
  font-size: 15px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-field input:focus { border-color: var(--dark); }

.form-field-checkbox { margin-bottom: 12px; }

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-soft);
  cursor: pointer;
}

/* Native checkbox appearance (even pinned to -webkit-appearance: checkbox)
   still rendered at inconsistent sizes across pages on iOS Safari —
   presumably picking up ambient font-size/zoom despite the explicit
   width/height. Drawing it ourselves with appearance: none removes any
   dependency on the OS's own rendering, so it's identical everywhere. */
.checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.checkbox-label input[type="checkbox"]:checked {
  background: var(--dark);
  border-color: var(--dark);
}

.checkbox-label input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 2px;
}

.checkbox-label a { color: var(--text); text-decoration: underline; }

.phone-field {
  display: flex;
  gap: 8px;
}

.phone-field input { flex: 1; min-width: 0; }

.segmented-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  margin-bottom: 4px;
  width: fit-content;
}

.segmented-toggle-btn {
  border: none;
  background: none;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.segmented-toggle-btn.is-active {
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(20, 20, 26, 0.08);
}

/* Custom DDI dropdown — a native <select> falls back to plain two-letter
   codes for flag emoji on Windows; a regular DOM element renders them fine. */
.ddi-select {
  position: relative;
  flex: 0 0 auto;
}

.ddi-select-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 11px 10px;
  font-family: var(--font-inter);
  font-size: 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  white-space: nowrap;
}

.ddi-select-trigger:focus { border-color: var(--dark); outline: none; }

.ddi-flag {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.ddi-flag svg { display: block; }
.ddi-code { font-size: 14px; }
.ddi-chevron { color: var(--text-faint); flex-shrink: 0; }

.ddi-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 200px;
  max-height: 260px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  padding: 6px;
  display: none;
}

.ddi-select.is-open .ddi-menu { display: block; }

.ddi-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  text-align: left;
}

.ddi-menu-item:hover { background: var(--surface); }
.ddi-menu-name { flex: 1; }
.ddi-menu-code { color: var(--text-soft); font-size: 13px; }

/* Scrollbar customizada no dropdown de DDI */
.ddi-menu { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.ddi-menu::-webkit-scrollbar { width: 4px; }
.ddi-menu::-webkit-scrollbar-track { background: transparent; }
.ddi-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.ddi-menu::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

.password-field-wrap { position: relative; }

.password-field-wrap input { padding-right: 44px; }

.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-faint);
  border-radius: var(--radius-sm);
}

.password-toggle:hover { color: var(--text); background: var(--surface); }

.form-message {
  font-size: 13px;
  margin: -4px 0 16px;
  display: none;
}

.form-message.is-visible { display: block; }
.form-message.is-error { color: var(--danger); }
.form-message.is-success { color: var(--mint); }

.auth-footer-link {
  text-align: center;
  font-size: 14px;
  color: var(--text-soft);
  margin-top: 20px;
}

.auth-footer-link a {
  color: var(--dark);
  font-weight: 600;
}

/* --- Auth split pages (login.html / register.html): form + WebGL visual panel --- */
.auth-split {
  min-height: 100vh;
  display: flex;
  background: #ffffff;
}

.auth-split-form-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: #ffffff;
}

.auth-split-form-inner {
  width: 100%;
  max-width: 400px;
}

.auth-split-form-inner .auth-logo {
  justify-content: flex-start;
  margin-bottom: 40px;
}

.auth-split-form-inner .auth-logo img {
  height: 28px;
  /* normal colored logo */
}

.auth-split-form-inner h1 {
  text-align: left;
  font-family: var(--font-mori);
  font-size: 42px;
  font-weight: 600;
  color: #14141a;
  margin-bottom: 8px;
  letter-spacing: -0.03em;
}

.auth-split-form-inner .auth-subtitle {
  text-align: left;
  font-family: var(--font-inter);
  font-size: 15px;
  color: #5c5c66;
  margin-bottom: 32px;
}

.auth-split-form-inner .form-field {
  margin-bottom: 20px;
}

.auth-split-form-inner .form-field label {
  font-family: var(--font-inter);
  font-size: 13.5px;
  font-weight: 600;
  color: #14141a;
  margin-bottom: 6px;
}

.auth-split-form-inner input,
.auth-split-form-inner select,
.auth-split-form-inner button {
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

.auth-split-form-inner .form-field input[type="email"],
.auth-split-form-inner .form-field input[type="password"],
.auth-split-form-inner .form-field input[type="text"],
.auth-split-form-inner .form-field input[type="tel"] {
  width: 100%;
  font-size: 15px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: #14141a;
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.auth-split-form-inner .form-field input:focus {
  border-color: #7c3aed; /* purple accent on focus */
  background: #ffffff;
}

.auth-split-form-inner .form-field input::placeholder {
  color: #a1a1aa;
}

.auth-split-form-inner a {
  color: #7c3aed; /* violet link */
  text-decoration: none;
  font-family: var(--font-inter);
  transition: color var(--transition-fast);
}

.auth-split-form-inner a:hover {
  color: #6d28d9;
}

.auth-split-form-inner .checkbox-label {
  color: #5c5c66;
  font-family: var(--font-inter);
}

.auth-split-form-inner .checkbox-label a {
  color: #7c3aed;
}

.auth-split-form-inner .password-field-wrap .password-toggle {
  color: var(--text-faint);
}

.auth-split-form-inner .password-field-wrap .password-toggle:hover {
  color: var(--text);
  background: var(--surface);
}

.auth-split-form-inner .btn-primary {
  background: #111114 !important; /* dark button for light theme */
  color: #ffffff !important;
  border: none !important;
  font-family: var(--font-inter);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.auth-split-form-inner .btn-primary:hover {
  background: #1f1f23 !important;
}

.auth-split-form-inner .auth-footer-link {
  color: #5c5c66;
  font-family: var(--font-inter);
  font-size: 14px;
}

.auth-split-form-inner .auth-footer-link a {
  font-weight: 600;
}

.auth-split-form-inner .phone-field {
  display: flex;
  gap: 8px;
}

.auth-split-form-inner .ddi-select-trigger {
  height: 100%;
  padding: 14px 12px;
  font-family: var(--font-inter);
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: #14141a;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.auth-split-form-inner .ddi-select-trigger:focus {
  border-color: #7c3aed;
  background: #ffffff;
  outline: none;
}

.auth-split-form-inner .ddi-chevron {
  color: var(--text-faint);
}

.auth-split-form-inner .ddi-menu {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  color: #14141a;
}

.auth-split-form-inner .ddi-item {
  color: #14141a;
  font-family: var(--font-inter);
}

.auth-split-form-inner .ddi-item:hover {
  background: var(--surface);
}

.auth-split-visual-col {
  flex: 1;
  position: relative;
  padding: 16px;
  display: none;
}

.auth-split-visual-panel {
  position: relative;
  height: 100%;
  min-height: calc(100vh - 32px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  clip-path: inset(0 round var(--radius-xl));
  background: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.auth-split-visual-panel canvas,
.auth-split-visual-panel .unicorn-canvas {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* This shader project consistently renders light/white toward the top of
   its composition and saturated color toward the bottom (same as the hero
   section, which relies on that to fade into its white background). Anchor
   the oversized canvas to the panel's bottom edge so only that denser,
   colorful lower slice is visible — the whole light top portion falls
   above the panel and gets clipped — then push saturation/contrast up in
   CSS since the raw shader output alone reads as fairly pale here. */
.auth-split-visual-panel .unicorn-canvas {
  position: absolute;
  /* .unicorn-canvas also matches the hero section's `inset: 0` rule, which
     sets `top: 0` — that stray declaration otherwise wins per-property over
     this rule's `bottom: 0` and pins the canvas to the panel's top instead. */
  top: auto;
  right: auto;
  left: 50%;
  bottom: 0;
  width: 130%;
  height: 170%;
  transform: translateX(-50%);
  filter: saturate(1) contrast(1);
}

/* Google Login and Divider */
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #717179;
  font-family: var(--font-inter);
  font-size: 13px;
  margin: 24px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border);
}

.auth-divider:not(:empty)::before {
  margin-right: 16px;
}

.auth-divider:not(:empty)::after {
  margin-left: 16px;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background: #ffffff !important;
  color: #14141a !important;
  border: 1px solid var(--border) !important;
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-google:hover {
  background: var(--surface) !important;
  border-color: var(--surface-2) !important;
}

.btn-google img {
  width: 18px;
  height: 18px;
}

@media (min-width: 900px) {
  .auth-split-visual-col { display: block; }
}

/* --- 5. HEADER & FLOATING NAVBAR --- */
.navbar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  pointer-events: none;
  display: flex;
  justify-content: center;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 24px 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: padding;
}

.navbar {
  pointer-events: auto;
  width: 100%;
  max-width: 1248px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 16px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  box-shadow: none;
  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: max-width, height, background, border-color, box-shadow, padding;
}

/* Scrolled Floating Pill State */
.navbar-wrapper.scrolled {
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 0;
}

.navbar-wrapper.scrolled .navbar {
  max-width: 1040px;
  height: 56px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 32px rgba(20, 20, 26, 0.08);
  padding: 0 20px;
}

.nav-brand {
  display: flex;
  align-items: center;
  font-family: var(--font-mori), sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: #111114;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: lowercase;
  position: relative;
  line-height: 1;
}

.nav-brand img {
  height: 30px;
  width: auto;
  object-fit: contain;
}

/* Floating status pill overlaid on hero mockup screenshots */
.floating-agent-pill {
  position: absolute;
  bottom: -14px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  background: rgba(14, 165, 233, 0.75);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  font-family: var(--font-inter);
  font-size: 11px;
  font-weight: 500;
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  z-index: 20;
}

.floating-agent-pill .pill-ellipsis {
  margin-left: 2px;
  font-size: 10px;
  opacity: 0.7;
}

.logo-accent-x {
  position: relative;
  display: inline-block;
  color: #111114;
  margin-left: 1px;
}

.logo-accent-x::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: #ff2150;
  border-radius: 50%;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  flex-shrink: 0;
}

.nav-item {
  position: relative;
  white-space: nowrap;
}

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.75);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: color 0.15s ease;
  text-decoration: none;
}

.nav-link:hover {
  color: #000000;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Liquid Glass — frosted, refractive pill treatment (iOS 26 style):
   a translucent tint over backdrop-filter blur/saturate so whatever is
   behind the button (shader, page content) shows through softened, plus
   inset highlights along the top/bottom edge to sell the glass curvature. */
.btn-sign-in {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--dark);
  background: rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -1px 2px rgba(0, 0, 0, 0.04),
    0 4px 14px rgba(0, 0, 0, 0.05);
  transition: background 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  display: inline-block;
}
.btn-sign-in:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.035);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.05),
    0 6px 18px rgba(0, 0, 0, 0.07);
}
.btn-sign-in:active { transform: scale(0.97); }

.btn-get-started {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 0.84rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--dark);
  transition: background 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}
.btn-get-started:hover { background: #000000; transform: scale(1.035); }
.btn-get-started:active { transform: scale(0.97); }

.hamburger-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--dark);
  cursor: pointer;
  padding: 4px;
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  transform: translateY(8px);
  width: 380px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}

.nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: flex-start;
  text-align: left;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
}

.dropdown-item:hover {
  background: var(--surface);
}

.dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--dark);
  flex-shrink: 0;
  margin-top: 2px;
}

.dropdown-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--dark);
  stroke-width: 1.8;
}

.dropdown-icon.zone-br { background: #e0f2fe; border-color: #bae6fd; color: var(--blue); }
.dropdown-icon.zone-br svg { stroke: var(--blue); }

.dropdown-icon.zone-na { background: #ecfdf5; border-color: #d1fae5; color: var(--mint); }
.dropdown-icon.zone-na svg { stroke: var(--mint); }

.dropdown-icon.zone-eu { background: #f3e8ff; border-color: #e9d5ff; color: var(--purple); }
.dropdown-icon.zone-eu svg { stroke: var(--purple); }

.dropdown-icon.zone-as { background: #ffedd5; border-color: #fed7aa; color: var(--peach); }
.dropdown-icon.zone-as svg { stroke: var(--peach); }

.dropdown-icon.zone-sea { background: #fce7f3; border-color: #fbcfe8; color: var(--pink); }
.dropdown-icon.zone-sea svg { stroke: var(--pink); }

.dropdown-text-wrapper {
  flex: 1;
  min-width: 0;
}

.dropdown-text-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 2px;
  line-height: 1.3;
}

.dropdown-text-desc {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.4;
  white-space: normal;
  word-wrap: break-word;
}

/* Nav "Serviços"/"Produto" dropdowns: flat outline icons (no chip/circle)
   and PP Mori titles, matching the reference. Scoped to .nav-item so the
   simulator's country-select dropdown (same .dropdown-icon/.dropdown-item
   classes, but its own colored zone-* badges) is untouched. */
.nav-item .dropdown-icon {
  background: none;
  border: none;
  color: var(--text-soft);
  width: 24px;
  height: 24px;
  margin-top: 0;
}

.nav-item .dropdown-icon svg {
  stroke: var(--text-soft);
  width: 20px;
  height: 20px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item .dropdown-text-title {
  font-family: var(--font-mori);
  font-weight: 600;
}

.nav-item .dropdown-text-desc {
  font-weight: 400;
}

/* Mobile Drawer Backdrop & Menu */
.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #ffffff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-drawer-backdrop.active .mobile-drawer {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.close-drawer-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--dark);
}

.drawer-links {
  display: flex;
  flex-direction: column;
}

.drawer-item {
  border-bottom: 1px solid var(--border);
}

.drawer-item:last-child {
  border-bottom: none;
}

.drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 2px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.drawer-chevron {
  color: var(--text-faint);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.drawer-toggle[aria-expanded="true"] .drawer-chevron {
  transform: rotate(90deg);
}

.drawer-submenu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding-left: 4px;
}

.drawer-item.is-open .drawer-submenu {
  max-height: 160px;
  padding-bottom: 10px;
}

.drawer-sublink {
  display: block;
  padding: 9px 2px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-soft);
}

.drawer-sublink:hover {
  color: var(--dark);
}

/* --- HERO SECTION --- */
.hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(84px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  box-sizing: border-box;
}

/* Interactive "ask box" replacing the old hero CTA buttons — visitor
   types a question and it opens WhatsApp with that text pre-filled. */
.hero-ask-box {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
  padding: 20px 20px 16px;
  text-align: left;
}

.hero-ask-input {
  display: block;
  width: 100%;
  min-height: 130px;
  max-height: 220px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: var(--font-inter);
  font-size: 18px;
  color: #14141a;
  line-height: 1.5;
}

.hero-ask-input::placeholder {
  color: #9c9ca3;
}

.hero-ask-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.hero-ask-hint {
  font-family: var(--font-inter);
  font-size: 13px;
  color: #9c9ca3;
}

.hero-ask-submit {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #111114;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.15s ease;
}

.hero-ask-submit svg {
  width: 18px;
  height: 18px;
}

.hero-ask-submit:hover:not(:disabled) {
  background: #2a2a30;
  transform: translateY(-1px);
}

.hero-ask-submit:disabled {
  background: #e4e4e7;
  color: #a1a1aa;
  cursor: not-allowed;
}

/* Flex children size to content by default: without this, .container sizes
   to its widest content (e.g. the store marquee) instead of the viewport,
   causing horizontal overflow on narrow screens. */
.hero-section > .container {
  width: 100%;
}

.shader-background-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background: #ffffff;
}

/* Unicorn Studio appends its own <canvas> inside .unicorn-canvas /
   .cta-shader-canvas and sizes that canvas itself via inline style, kept
   in sync only by a `window resize` listener — the very event iOS Safari
   skips while animating its address bar mid-scroll. If that inline style
   ever falls behind, force the canvas to visually fill its wrapper
   regardless: worst case a stale WebGL buffer stretches slightly, which
   beats a gap of bare white background. !important is required to win
   over the library's own inline style. */
.unicorn-canvas canvas,
.cta-shader-canvas canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.unicorn-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  filter: saturate(1.7) contrast(1.08); /* Sature and contrast to match login screen shader */
}

/* The hero reuses .unicorn-canvas's saturate(1.7)/contrast(1.08) boost,
   tuned for the login screen's smaller panel — on the hero's much larger
   canvas it reads noticeably more saturated than the reference site's
   softer, more pastel shader. Dial it back to roughly neutral here only;
   login/register and the comparison-card preview keep the original boost. */
.hero-section .unicorn-canvas {
  filter: saturate(1) contrast(1);
}

.radial-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Lower opacity than before: the CTA card's shader (no mask at all) reads
     as much richer/more saturated than the hero's — this was washing out
     too much of that color across the whole top half just to keep the
     headline legible. Keep enough fade for the text, let more color through
     everywhere else. */
  background: radial-gradient(ellipse 85% 55% at 50% -25%, rgba(255, 255, 255, 0.22) 15%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%);
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-headline {
  font-family: 'Plus Jakarta Sans', var(--font-inter), sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 72px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #111114;
  margin-bottom: 20px;
}

.hero-headline-accent {
  background: linear-gradient(135deg, #111114 0%, #3f3f46 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-right: 0.08em;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

.hero-subtitle {
  font-family: var(--font-inter), sans-serif;
  font-size: clamp(1.1rem, 2vw, 24px);
  line-height: 1.55;
  letter-spacing: normal;
  font-weight: 500;
  color: #52525b;
  max-width: 800px;
  margin: 0 auto 36px auto;
}

.hero-section .btn-ghost {
  background: rgba(255, 255, 255, 0.55);
  color: #111114;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top-color: rgba(255, 255, 255, 0.85);
  border-left-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
}
.hero-section .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: scale(1.035);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.75);
}
.hero-section .btn-ghost:active {
  transform: scale(0.97);
}

.hero-trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 32px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.trust-icon {
  color: #ffffff !important;
  stroke: #ffffff !important;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.hero-stores {
  margin-top: 96px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.stores-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  opacity: 0.95;
}

.stores-marquee-container {
  overflow: hidden;
  width: 100%;
  max-width: 1140px;
  position: relative;
  display: flex;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.stores-marquee {
  display: flex;
  gap: 48px;
  align-items: center;
  white-space: nowrap;
  animation: marquee-scroll 32s linear infinite;
  flex-shrink: 0;
}

.logo-item {
  height: 30px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.75;
  transition: all 0.3s ease;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}

.logo-item:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Visual balance adjustments for square, circular and wide shapes */
.logo-item[alt="Uniqlo"],
.logo-item[alt="@cosme"] {
  height: 38px;
}

.logo-item[alt="Welcia"] {
  height: 36px;
}

.logo-item[alt="GU"],
.logo-item[alt="Loft"] {
  height: 28px;
}

.logo-item[alt="LYFT"] {
  height: 22px;
}

.logo-item[alt="Nike"] {
  height: 24px;
}

.logo-item[alt="Adidas"] {
  height: 26px;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ---------------------------------- SECTION 1: SEGMENTED SLIDER TABS --------------------------------- */

.pill-tabs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 36px;
}

.pill-tabs-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #f4f4f5;
  border-radius: 9999px;
  padding: 10px;
}

.pill-tabs-slider {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), width 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
  pointer-events: none;
}

.pill-tab-btn {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 10px 24px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 600;
  color: #71717a;
  transition: color 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill-tab-btn:hover { color: #111114; }
.pill-tab-btn.is-active { color: #111114; }

.pill-tab-panel { display: none; }
.pill-tab-panel.is-active { display: block; }

.pill-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-card);
  align-items: flex-start;
  min-height: 460px;
}

.pill-card-preview {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  height: 100%;
  min-height: 340px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pill-card-preview .window-mockup {
  position: relative;
  z-index: 2;
}

.pill-card-preview .shader-background-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.85;
}

.pill-card-preview .unicorn-canvas {
  position: absolute;
  top: auto !important;
  right: auto !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 130% !important;
  height: 170% !important;
  transform: translateX(-50%) !important;
  filter: saturate(1.7) contrast(1.08) !important;
}

.preview-chat-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.chat-bubble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.5;
}

.chat-bubble.user {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--dark);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chat-bubble.bot {
  background: var(--dark);
  color: #ffffff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.pill-card-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 8px;
}

.pill-card-info h3 {
  font-family: var(--font-mori);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--dark);
}

.pill-card-info > p {
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0 0 20px;
}

.pill-feature-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pill-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-soft);
}

.pill-feature-list li svg {
  width: 18px;
  height: 18px;
  color: var(--mint);
  flex-shrink: 0;
  margin-top: 2px;
}

.pill-feature-list strong { color: var(--dark); }

/* ---------------------------------- SECTION: SERVIÇOS (segmented tabs + shared photo that swaps) --------------------------------- */

.services-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.services-showcase-visual {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.services-showcase-visual img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
}

.services-showcase-copy h3 {
  font-family: var(--font-mori);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--dark);
}

.services-showcase-copy p {
  font-size: 15.5px;
  color: var(--text-soft);
  line-height: 1.65;
  margin: 0;
  max-width: none;
}

.service-accordion {
  margin: 24px 0 0 0;
}
.service-acc-item {
  border-bottom: 1px solid var(--border-light);
}
.service-acc-item:first-child {
  border-top: 1px solid var(--border-light);
}
.service-acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  cursor: pointer;
  user-select: none;
}
.service-acc-header h4 {
  font-family: var(--font-inter, sans-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--dark);
  margin: 0;
}
.service-acc-header .chevron {
  width: 18px;
  height: 18px;
  stroke: var(--dark);
  transition: transform 0.3s ease;
}
.service-acc-item.is-active .service-acc-header .chevron {
  transform: rotate(180deg);
}
.service-acc-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.service-acc-inner {
  font-size: 14.5px;
  color: var(--text-soft);
  line-height: 1.5;
  padding-bottom: 16px;
}

@media (max-width: 860px) {
  .services-showcase { grid-template-columns: 1fr; gap: 28px; }
  .services-showcase-visual img { height: 280px; }
  .services-showcase-copy p { max-width: none; }
}

/* ---------------------------------- SECTION 2: DIFERENCIAIS NIPPAX (STACKER SHOWCASE STYLE) --------------------------------- */

.stacker-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
}

.showcase-visual-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  height: 620px;
  background: #f4f4f5;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.showcase-img-logistica {
  object-position: 78% 25%;
}

.showcase-badge-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.badge-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #14141a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-icon-box svg {
  width: 18px;
  height: 18px;
}

.badge-text-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.badge-title {
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 500;
  color: #14141a;
}

.badge-desc {
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 400;
  color: #71717a;
  line-height: 1.4;
}

/* Floating Stacker/Slack style Chat Overlay (Reference image style) */
.showcase-chat-card-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 340px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  box-sizing: border-box;
}

.chat-card-header {
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f4;
  background: #fafafa;
}

.chat-card-channel {
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 700;
  color: #14141a;
  letter-spacing: -0.01em;
}

.chat-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.chat-avatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-inter);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.chat-avatar.user-avatar {
  background: #fce7f3;
  color: #db2777;
  border-radius: 50%;
}

.chat-avatar.nippax-avatar {
  background: #14141a;
  color: #ffffff;
}

.chat-msg-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.chat-user-name {
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 700;
  color: #14141a;
}

.chat-app-tag {
  font-family: var(--font-inter);
  font-size: 10px;
  font-weight: 700;
  background: #e4e4e7;
  color: #52525b;
  padding: 1.5px 5px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.chat-time {
  font-family: var(--font-inter);
  font-size: 12px;
  font-weight: 400;
  color: #9ca3af;
}

.chat-msg-text {
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 400;
  color: #3f3f46;
  line-height: 1.45;
  margin: 3px 0 0 0;
}

.chat-mention {
  background: #f3e8ff;
  color: #7e22ce;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 4px;
}

.chat-card-box {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-box-title {
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 600;
  color: #14141a;
}

.chat-box-list {
  margin: 0;
  padding: 0 0 0 12px;
  font-family: var(--font-inter);
  font-size: 12px;
  color: #52525b;
  line-height: 1.5;
}

.chat-box-list li {
  list-style-type: disc;
}

.chat-box-link {
  font-family: var(--font-inter);
  font-size: 12px;
  font-weight: 600;
  color: #0284c7;
  text-decoration: none;
  margin-top: 4px;
  display: inline-block;
}

.chat-box-link:hover {
  text-decoration: underline;
}

.showcase-info-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.showcase-category-title {
  font-family: var(--font-mori), sans-serif;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #14141a;
  margin: 0 0 20px;
}

.showcase-feature-list {
  display: flex;
  flex-direction: column;
}

.showcase-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f4;
}

.showcase-feature-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.showcase-feature-item:first-child {
  padding-top: 0;
}

.feature-item-icon {
  width: 22px;
  height: 22px;
  color: #14141a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.feature-item-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.6px;
  overflow: visible;
}

.feature-item-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.feature-title {
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 500;
  color: #14141a;
  margin: 0;
  line-height: 1.35;
}

.feature-desc {
  font-family: var(--font-inter);
  font-size: 15px;
  font-weight: 400;
  color: #71717a;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 4px 0 0;
}

/* -------------------------------- Calculator Section -------------------------------- */
/* Dashboard-style layout: independent bordered panels with a header row,
   instead of one big rounded card. Local tokens keep this contained to
   the calculator instead of touching the site's --radius-xl/--border
   pill-shaped card language used everywhere else. */
.calc-shell {
  --calc-border: #e5e7eb;
  --calc-radius: 20px;
  --calc-input-radius: 12px;
  --calc-muted: #6b7280;
  --calc-dark: #111827;
  --calc-green: #0ea5e9;
  --calc-green-dark: #0284c7;

  /* Row 1: main panel + cost panel side by side. Row 2: the 3-up info
     row spans the *full* width -- nesting it inside the narrower main
     column (like before) squeezed each card to ~200px and made their
     text wrap onto extra lines, inflating their height for no reason. */
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-template-areas: "main side";
  gap: 24px;
  align-items: stretch;
}

.calc-main-panel { grid-area: main; }
.calc-cost-panel { grid-area: side; }

/* The main panel is consistently shorter than the cost panel (fewer
   rows), so once the grid row stretches them to equal height, its own
   fields spread out to fill the extra room instead of leaving a dead
   gap at the bottom. */
.calc-main-panel, .calc-cost-panel {
  display: flex;
  flex-direction: column;
}

.calc-main-panel > .calc-panel-body,
.calc-cost-panel > .calc-panel-body {
  flex: 1;
  justify-content: flex-start;
}

/* "Como Funciona" / "Dicas de Envio" / "Economize no Frete" match height,
   and each card's own content spreads out to fill it rather than
   leaving dead space at the bottom of the shorter ones. */
.calc-secondary-row {
  grid-area: bottom;
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: stretch;
}

.calc-secondary-row .calc-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.calc-secondary-row .calc-panel-body {
  flex: 1;
  justify-content: flex-start;
}

.calc-panel {
  background: #ffffff;
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius);
  overflow: visible;
  height: 100%;
}

/* Icon-on-top, title, description -- same stacked reading order as
   .benefit-card, and no divider between header and body: they read as
   one continuous block. */
.calc-panel-header {
  padding: 24px 24px 0;
}

.calc-panel-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.calc-panel-header h3, .calc-panel-header h4 {
  font-family: var(--font-mori);
  font-size: 18px;
  font-weight: 700;
  color: var(--calc-dark);
  margin: 0 0 6px;
  line-height: 1.25;
}

.calc-panel-header p {
  font-size: 13px;
  color: var(--calc-muted);
  margin: 0;
  line-height: 1.5;
}

.calc-panel-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0EA5E9;
  flex-shrink: 0;
  margin-bottom: 14px;
}

.calc-panel-header-icon svg {
  width: 20px;
  height: 20px;
}

/* Inside .calc-panel-header-top the icon sits in a row with the badge,
   so it doesn't need its own bottom margin there. */
.calc-panel-header-top .calc-panel-header-icon {
  margin-bottom: 0;
}

.calc-rate-badge {
  background: #f9fafb;
  border: 1px solid var(--calc-border);
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--calc-muted);
  font-family: var(--font-inter);
  white-space: nowrap;
}

.calc-panel-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.calc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.calc-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calc-field-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--calc-dark);
}

.calc-field-group label svg {
  width: 15px;
  height: 15px;
  color: var(--calc-muted);
  flex-shrink: 0;
}

.calc-service-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--calc-dark);
}

.calc-select, .calc-input {
  width: 100%;
  height: 48px;
  padding: 11px 14px;
  border-radius: var(--calc-input-radius);
  border: 1px solid var(--calc-border);
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: var(--calc-dark);
  outline: none;
  transition: all 0.2s ease;
}

/* Hide input spin buttons (arrows) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.calc-select:hover, .calc-input:hover {
  border-color: #d1d5db;
}

.calc-select:focus, .calc-input:focus {
  border-color: var(--calc-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.calc-input::placeholder {
  color: #9ca3af;
}

.country-select {
  position: relative;
  z-index: 50;
}

.country-select-trigger {
  width: 100%;
  height: 48px;
  padding: 11px 14px;
  border-radius: var(--calc-input-radius);
  border: 1px solid var(--calc-border);
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: var(--calc-dark);
  outline: none;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

.country-select-trigger:hover {
  border-color: #d1d5db;
}

.country-select.is-open .country-select-trigger {
  border-color: var(--calc-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.selected-zone-icon-badge {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  flex-shrink: 0;
}

.selected-zone-icon-badge svg {
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
}

.country-select-chevron {
  flex-shrink: 0;
  color: var(--calc-muted);
  transition: transform 0.2s ease;
}

/* .dropdown-menu/.dropdown-item is shared with the nav "Serviços" dropdown. */

.country-select.is-open .country-select-chevron {
  transform: rotate(180deg);
}

.country-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: auto;
}

.country-select.is-open .country-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.country-dropdown-item {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.calc-slider-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f9fafb;
  padding: 10px 14px;
  border-radius: var(--calc-input-radius);
  border: 1px solid var(--calc-border);
}

.calc-slider-wrap input[type="range"] {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  background: var(--calc-border);
  border-radius: 9999px;
  outline: none;
  transition: background 0.2s;
}

/* Webkit browser thumb */
.calc-slider-wrap input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--calc-green);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.calc-slider-wrap input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.calc-slider-wrap input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.25);
}

/* Firefox browser thumb */
.calc-slider-wrap input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--calc-green);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.calc-slider-wrap input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.15);
}

.calc-slider-val {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 14px;
  color: var(--calc-dark);
  min-width: 60px;
  text-align: right;
}

/* -------- How it works / Shipping tips (secondary panels) -------- */
.calc-howitworks {
  gap: 18px;
}

.calc-howitworks-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Flat outline icon, no background chip -- same treatment as the navbar's
   "Serviços" dropdown (.nav-item .dropdown-icon). */
.calc-howitworks-icon {
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--calc-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.calc-howitworks-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.calc-howitworks-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--calc-dark);
  margin-bottom: 3px;
}

.calc-howitworks-item p {
  font-size: 13px;
  color: var(--calc-muted);
  line-height: 1.5;
  margin: 0;
}

.calc-tips {
  gap: 12px;
}

.calc-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 8px;
}

.calc-tip-box svg {
  flex-shrink: 0;
  color: #3b82f6;
  margin-top: 1px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}

.calc-tip-box p {
  font-size: 13px;
  line-height: 1.5;
  color: #1e3a5f;
  margin: 0;
}

.calc-tip-box strong {
  color: var(--calc-dark);
}

.calc-promo-list {
  gap: 16px;
}

.calc-howitworks-icon-check {
  color: var(--mint);
}

/* -------- Cost estimate panel -------- */
.calc-cost-body {
  gap: 0;
}

.calc-total-block {
  text-align: center;
  padding-bottom: 20px;
}

.calc-result-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--calc-muted);
  margin-bottom: 8px;
}

.calc-total-yen {
  font-family: var(--font-mori);
  font-size: 36px;
  font-weight: 800;
  color: var(--calc-dark);
  line-height: 1;
}

.calc-total-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--calc-muted);
}

.calc-total-sub svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.calc-divider {
  height: 1px;
  background: var(--calc-border);
  margin: 0 -24px;
}

.calc-cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--calc-muted);
  padding: 8px 0;
}

.calc-cost-row strong {
  color: var(--calc-dark);
  font-weight: 600;
}

.calc-cost-row-strong span,
.calc-cost-row-strong strong {
  font-weight: 600;
  color: var(--calc-dark);
}

/* Plain .btn-primary treatment (solid dark pill, white text) -- the same
   CTA used in the hero, nav, and the final CTA section. */
.calc-cta {
  margin-top: auto;
  gap: 8px;
}

@media (max-width: 900px) {
  .calc-shell {
    /* minmax(0, 1fr), not plain 1fr: a bare 1fr track still won't
       shrink below its content's min-content width (the panels
       contain a service-picker row that doesn't wrap), so without
       the 0 floor the calculator forces the whole page wider than
       the phone viewport. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "side";
  }
  .calc-field-row {
    grid-template-columns: 1fr;
  }
  .calc-secondary-row {
    flex-direction: column;
  }
  /* margin-top: auto only pushes the CTA to the bottom when the panel is
     stretched taller than its content (true in the desktop side-by-side
     grid) — stacked on mobile the panel just hugs its content, so the
     button sits flush under "Total no Cartão" without it. */
  .calc-cta {
    margin-top: 24px;
  }
}

/* -------------------------------- Export Rules Section -------------------------------- */
.rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 40px;
}

.rules-col {
  background: #ffffff;
  border-radius: 28px;
  padding: 32px;
  border: 1px solid #eae8e5;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rules-col-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f4f4f5;
}

.rule-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 100px;
}

.rule-badge svg { width: 13px; height: 13px; }

.rule-badge.allowed {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.rule-badge.allowed svg { stroke: #059669; }

.rule-badge.prohibited {
  background: #fef2f2;
  color: var(--danger);
  border: 1px solid #fecaca;
}
.rule-badge.prohibited svg { stroke: var(--danger); }

.rules-col-header h3 {
  font-family: var(--font-mori);
  font-size: 22px;
  font-weight: 700;
  color: #111114;
  margin: 0;
  letter-spacing: -0.02em;
}

.rule-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: space-between;
}

.rule-card-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fafafa;
  border: 1px solid #f4f4f5;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.rule-card-item:hover {
  transform: translateY(-2px);
  border-color: #e4e4e7;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
}

.rule-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.rule-icon-box svg { width: 16px; height: 16px; }

.rule-icon-box.green {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.rule-icon-box.green svg { stroke: #059669; }

.rule-icon-box.red {
  background: #fef2f2;
  color: var(--danger);
  border: 1px solid #fecaca;
}
.rule-icon-box.red svg { stroke: var(--danger); }

.rule-card-content strong {
  display: block;
  font-family: var(--font-mori);
  font-size: 14px;
  font-weight: 700;
  color: #111114;
  margin-bottom: 3px;
}

.rule-card-content p {
  font-size: 13px;
  color: #5c5c66;
  line-height: 1.45;
  margin: 0;
}

/* -------------------------------- FAQ Accordion Section -------------------------------- */
.faq-accordion {
  max-width: 840px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: #ffffff;
  border: 1px solid #eae8e5;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover { border-color: #d4d4d8; }

.faq-question {
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-family: var(--font-mori);
  font-size: 16px;
  font-weight: 600;
  color: #111114;
  cursor: pointer;
}

.faq-icon {
  width: 20px;
  height: 20px;
  stroke: #059669;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #fafafa;
}

.faq-answer-inner {
  padding: 0 24px 20px 24px;
  font-size: 14px;
  color: #5c5c66;
  line-height: 1.65;
  border-top: 1px solid #f4f4f5;
  padding-top: 16px;
}

/* -------------------------------- CTA Section -------------------------------- */
.cta {
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  position: relative;
  overflow: hidden;
  color: #111114;
  background: #ffffff;
  border: none;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.cta-shader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.cta-content-wrapper {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 32px;
  align-items: center;
  width: 100%;
}

.cta h2 {
  font-family: var(--font-mori);
  font-size: clamp(26px, 3.4vw, 36px);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  color: #111114;
  font-weight: 700;
  line-height: 1.15;
}

.cta p {
  margin: 0 0 24px;
  color: #333338;
  max-width: 440px;
  line-height: 1.6;
  font-size: 15px;
}

.cta-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: #111114;
  text-align: left;
}

.cta-list li svg {
  width: 18px;
  height: 18px;
  color: #111114;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  padding: 3px;
}

.cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cta .btn-primary {
  background: #000000;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 9999px;
  font-weight: 600;
  border: none;
}
.cta .btn-primary:hover { background: #27272a; }

.cta .btn-ghost {
  background: rgba(255, 255, 255, 0.35);
  color: #111114;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top-color: rgba(255, 255, 255, 0.75);
  border-left-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  padding: 12px 24px;
  border-radius: 9999px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(17, 17, 20, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
}
.cta .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.55);
  transform: scale(1.035);
  box-shadow: 0 10px 26px rgba(17, 17, 20, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.65);
}
.cta .btn-ghost:active { transform: scale(0.97); }

/* -------------------------------- FOOTER -------------------------------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 80px 0 40px 0;
  position: relative;
  z-index: 10;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1.2fr 1fr 2.3fr;
  gap: 40px;
  margin-bottom: 60px;
}




.footer-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text-soft);
  line-height: 1.4;
}

.footer-contact-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
  stroke: var(--danger);
}

.footer-contact-list a {
  color: var(--text-soft);
}

.footer-contact-list a:hover {
  color: var(--dark);
}

.footer-brand-col p {
  margin-top: 16px;
  font-size: 0.875rem;
  max-width: 320px;
  color: var(--text-soft);
  line-height: 1.6;
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--text-soft);
}

.footer-links a:hover {
  color: var(--dark);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-faint);
  flex-wrap: wrap;
  gap: 16px;
}

.compliance-tag {
  background: #ffffff;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-soft);
}

/* Window Mockup (Mac-style matching reference) */
.window-mockup {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  width: 100%;
  height: 282px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* The timeline mockup has a floating pill that hangs below the window's
   bottom edge and content that doesn't fit a fixed 282px box — it needs to
   size to its own content instead, and must not clip the floating pill. */
.window-mockup.timeline-window {
  height: auto;
  overflow: visible;
}

.window-header {
  background: #f8f9fa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.dashboard-title-bar {
  justify-content: space-between;
  padding: 10px 16px;
}

.dashboard-title-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.dashboard-title-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  color: #a855f7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dashboard-title-icon svg {
  width: 14px;
  height: 14px;
}

.dashboard-title-text {
  font-family: var(--font-mori);
  font-size: 13px;
  font-weight: 700;
  color: #111114;
  flex-shrink: 0;
}

.dashboard-title-sep {
  color: var(--text-faint);
  flex-shrink: 0;
}

.dashboard-title-sub {
  font-size: 12px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.window-dots {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.window-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.window-dots .dot.red { background: #ff5f57; }
.window-dots .dot.yellow { background: #febc2e; }
.window-dots .dot.green { background: #28c840; }

.window-address-bar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 9999px;
  padding: 4px 14px 4px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  line-height: 1;
}

.address-lock-icon {
  width: 12px;
  height: 12px;
  color: #9ca3af;
  flex-shrink: 0;
  stroke-width: 2;
}

.address-text {
  font-family: var(--font-inter);
  font-size: 12.5px;
  font-weight: 400;
  color: #4b5563;
  letter-spacing: normal;
}

.window-title {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.window-body {
  padding: 20px 24px;
  background: #ffffff;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ==========================================================================
   NEW SECTIONS STYLING (RECURSOS, PANEL, TRANSPARENCIA, TESTIMONIALS)
   ========================================================================== */

/* Section 1: Recursos */
.recursos-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
  align-items: stretch;
}

@media (min-width: 901px) {
  .shader-left {
    width: calc(200% + 32px) !important;
    left: 0 !important;
    right: auto !important;
  }
  .shader-right {
    width: calc(200% + 32px) !important;
    right: 0 !important;
    left: auto !important;
  }
}

.recursos-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-xl);
  padding: 0;
  overflow: visible;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
}

.recursos-card-graphic {
  background: #f9f9fb;
  border: none;
  border-bottom: 1px solid #eeeeed;
  padding: 20px 20px 36px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(100% - 2px);
  margin: 1px 1px 0 1px;
  min-height: 320px;
  position: relative;
  z-index: 10;
  overflow: visible;
  border-top-left-radius: 23px;
  border-top-right-radius: 23px;
}

.graphic-step-item {
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.step-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.step-icon.done {
  background: #000000;
  color: #ffffff;
}

.step-icon.pending {
  background: #ffffff;
  border: 1.5px solid #d1d1d6;
  color: #8e8e93;
}

.step-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #111114;
}

.step-time {
  font-size: 12px;
  font-weight: 600;
  color: #71717a;
}

/* Timeline Custom WebApp Interface */
.timeline-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e4e4e7;
}

.timeline-order-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timeline-order-id {
  font-family: var(--font-inter);
  font-size: 12.5px;
  font-weight: 600;
  color: #14141a;
}

.timeline-status-badge {
  font-size: 10.5px;
  font-weight: 600;
  background: #f4f4f5;
  color: #52525b;
  padding: 2px 7px;
  border-radius: 10px;
}

.timeline-date {
  font-size: 11px;
  color: #a1a1aa;
}

.timeline-steps-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.timeline-step.active {
  border-color: #fcd34d;
  background: #fffdf5;
}

.step-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #14141a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.step-indicator svg {
  width: 11px;
  height: 11px;
}

.step-indicator.active-dot {
  background: #f59e0b;
}

.step-indicator.neutral {
  background: #ffffff;
  border: 1.5px solid #d1d1d6;
  color: #8e8e93;
  font-size: 10px;
  font-weight: 700;
}

.step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.step-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-title {
  font-family: var(--font-inter);
  font-size: 12.5px;
  font-weight: 500;
  color: #14141a;
}

.step-meta {
  font-size: 11px;
  color: #71717a;
  font-weight: 500;
}

.step-pill-amber {
  font-size: 10.5px;
  font-weight: 600;
  color: #d97706;
  background: #fef3c7;
  padding: 1.5px 7px;
  border-radius: 10px;
}

.step-desc {
  font-size: 11.5px;
  color: #71717a;
  margin: 0;
  line-height: 1.35;
}

/* Custom Payment Provider Representation (NO macOS window) */
.payment-widget-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.payment-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2px;
}

.payment-widget-title {
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 600;
  color: #14141a;
}

.payment-widget-currency {
  font-size: 11px;
  font-weight: 600;
  color: #52525b;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  padding: 2px 8px;
  border-radius: 12px;
}

.payment-provider-card {
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.payment-provider-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}

.provider-logo-box {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.provider-logo-box.stripe-logo svg {
  width: 32px;
  height: 16px;
}

.provider-logo-box.ebanx-logo {
  background: #0f172a;
  border-color: #0f172a;
}

.ebanx-text-logo {
  font-family: var(--font-inter);
  font-size: 10px;
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: 0.08em;
}

.provider-logo-box.pix-logo {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #16a34a;
}

.provider-logo-box.pix-logo svg {
  width: 20px;
  height: 20px;
}

.provider-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.provider-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.provider-name {
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 600;
  color: #14141a;
}

.provider-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1.5px 7px;
  border-radius: 10px;
}

.provider-badge.active {
  background: #dcfce7;
  color: #15803d;
}

.provider-sub {
  font-size: 11.5px;
  color: #71717a;
}

/* Payment badges graphic */
.payment-badge-item {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.payment-left {
  font-size: 13.5px;
  font-weight: 600;
  color: #111114;
}

.payment-status {
  font-size: 11px;
  font-weight: 700;
  background: #ecfdf5;
  color: #047857;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: lowercase;
}

.recursos-card-text {
  padding: 28px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.recursos-card-text h3 {
  font-family: var(--font-mori);
  font-size: 18.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #14141a;
  margin: 0 0 8px;
}

.recursos-card-text p {
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 400;
  color: #71717a;
  line-height: 1.55;
  margin: 0;
}

/* Benefits Grid (6 cards matching Stacker.ai reference) */
.recursos-grid-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.benefit-card {
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.benefit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.benefit-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

#recursos .benefit-icon {
  color: #f97316;
}

.benefit-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.75px;
}

.benefit-card h4 {
  font-family: var(--font-mori);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #14141a;
  margin: 0 0 8px;
}

.benefit-card p {
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 400;
  color: #71717a;
  line-height: 1.55;
  margin: 0;
}

/* Section 2: Dashboard Preview */
.dashboard-mockup-wrapper {
  padding: 24px 0 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto -72px auto;
}

/* Mobile counterpart of .dashboard-mockup-wrapper — renders
   preview-painel-mobile.html (build_preview_mobile.py), the same real Home /
   Meus Pedidos / Financeiro screens cropped into a phone-sized card with
   a tab switcher on top, instead of the 920px desktop window stack. Only
   shown ≤768px, where the desktop wrapper is hidden below. */
.dashboard-mockup-wrapper-mobile {
  display: none;
}

/* The mockup iframe (preview-painel-desktop.html) renders a fixed 920px-wide
   window-stack graphic with no responsive handling of its own (it's a
   generated file — see build_preview_desktop.py). At phone widths the iframe
   just clips it to an unreadable sliver, so hide the whole preview instead
   of showing broken content; the section's heading/copy still stands on
   their own. The wrapper's negative bottom margin only makes sense paired
   with the iframe's height, so it's neutralized here too. */
@media (max-width: 768px) {
  .dashboard-mockup-wrapper {
    display: none;
    margin-bottom: 0;
  }

  .dashboard-mockup-wrapper-mobile {
    display: flex;
    justify-content: center;
    /* .section-head's own 48px bottom margin (shared by every section) is
       too much air before a card this size — pull it in, scoped to just
       this wrapper so other sections keep their normal spacing. */
    margin-top: -24px;
    padding: 0 0 16px;
  }

  .navbar-wrapper {
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 0;
  }

  /* Checked stacker.ai directly (same Unicorn Studio shader project as
     ours) — their hero uses plain `min-height: 100vh`, no dvh/svh/lvh at
     all. That's deliberate, not an oversight: dvh is the unit that keeps
     recalculating AS Safari's address bar animates, which is exactly what
     forces the shader canvas to keep needing a resize it doesn't reliably
     get. Plain vh in Safari has always resolved to the *largest* possible
     viewport (the historical quirk dvh was invented to fix) and, being
     static, never changes mid-scroll — so the canvas never falls behind,
     and the section is always at least as tall as the visible screen. */
  .hero-section {
    min-height: 100vh;
    /* space-between pushed the store row flush against the very bottom
       edge, right behind Safari's floating toolbar with no breathing
       room — and re-exposed the hairline gap that +64px was protecting
       against. Restored both: flex-start (below) plus this margin. */
    min-height: calc(100vh + 64px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* Extra top padding fills the space that used to trail empty after
       the store row — pushes the headline down for better balance
       instead of leaving a dead gap at the bottom. */
    padding-top: calc(120px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }

  .hero-section > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(32px, 6vh, 48px);
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* Dialed back to fully neutral (matches desktop) — the 1.2/1.04 boost
     was still reading as an over-saturated, blown-out "HDR" look on
     phone screens. */
  .hero-section .unicorn-canvas {
    filter: saturate(1) contrast(1);
  }

  .hero-content {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
    padding-top: 10px;
  }

  .hero-headline {
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: -0.035em;
    margin-bottom: 12px;
    color: #111114;
  }

  .hero-subtitle {
    font-size: 20px;
    line-height: 1.46;
    color: #52525b;
    max-width: 320px;
    margin: 0 auto 20px auto;
  }

  .hero-ask-box {
    max-width: 100%;
    border-radius: 20px;
    padding: 18px 18px 14px;
  }

  .hero-ask-input {
    min-height: 100px;
    font-size: 15px;
  }

  .hero-ask-hint {
    font-size: 12px;
  }

  .hero-trust-badges {
    display: none !important;
  }

  .hero-stores {
    width: 100%;
    margin-top: 0;
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .stores-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  }

  .stores-marquee-container {
    width: 100%;
  }

  .stores-marquee {
    gap: 32px;
  }

  .hero-section .radial-mask {
    display: none;
  }

  /* Small hairline of the section's own white fallback (behind the
     canvas) was still visible at the very bottom edge in Safari's
     floating-pill toolbar state — likely sub-pixel rounding rather than
     the earlier full-section-height bug. Bleed the shader a few px past
     the section's own bottom edge; .hero-section's overflow: hidden
     clips it right back to the true edge, so this can't leak into the
     next section, it just guarantees full coverage of this one. */
  .hero-section .shader-background-wrapper {
    bottom: -16px;
  }
}

.dashboard-window {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 24px 60px rgba(0,0,0,0.07);
  width: 100%;
  max-width: 1060px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dashboard-title-bar,
.dashboard-window .dashboard-topbar {
  flex-shrink: 0;
}

.dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: #ffffff;
  flex-wrap: wrap;
}

.dashboard-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-brand-logo {
  height: 26px;
  width: auto;
  object-fit: contain;
  display: block;
}

.dashboard-workspace-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-soft);
}

.dashboard-workspace-chevron {
  width: 12px;
  height: 12px;
  color: var(--text-faint);
}

.dashboard-topbar-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dashboard-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-faint);
  cursor: pointer;
}

.dashboard-nav-item svg {
  width: 14px;
  height: 14px;
}

.dashboard-nav-item.is-active {
  color: #355BE4;
}

.dashboard-nav-item.is-active svg {
  color: #355BE4;
}

.dashboard-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-search-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-faint);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.dashboard-search-pill svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.dashboard-search-pill kbd {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-faint);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
}

.dashboard-user {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  cursor: pointer;
}

.dashboard-user span {
  font-size: 12px;
  font-weight: 600;
  color: #111114;
}

.dashboard-user svg {
  width: 12px;
  height: 12px;
  color: var(--text-faint);
}

.dashboard-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dashboard-icon-btn svg {
  width: 15px;
  height: 15px;
}

.dashboard-icon-btn:hover {
  background: var(--surface);
}

.dashboard-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #111114;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 232px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.dashboard-sidebar {
  background: #f8f8f7;
  border-right: 1px solid rgba(0,0,0,0.05);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.sidebar-ai-header svg {
  width: 12px;
  height: 12px;
}

.sidebar-ai-pinned {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-ai-pinned-expand {
  width: 12px;
  height: 12px;
  color: var(--text-faint);
  flex-shrink: 0;
  margin-left: auto;
}

.sidebar-ai-chat {
  padding: 12px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-ai-card-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--purple-soft, #f3e8ff);
  color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-ai-card-icon svg {
  width: 13px;
  height: 13px;
}

.sidebar-ai-card-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sidebar-ai-card-title strong {
  font-size: 11.5px;
  font-weight: 700;
  color: #111114;
}

.sidebar-ai-card-title span {
  font-size: 10px;
  color: var(--text-faint);
}

.sidebar-ai-bubble {
  background: #111114;
  color: #ffffff;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 10px;
  padding: 9px 10px;
}

.sidebar-ai-reply {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0;
}

.sidebar-divider {
  height: 1px;
  background: rgba(0,0,0,0.06);
  margin: 16px 0;
}

.sidebar-new-btn {
  margin-top: 16px;
  padding: 8px 10px;
  border: 1px dashed rgba(0,0,0,0.15);
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.sidebar-new-btn:hover {
  background: #ffffff;
  color: #111114;
}

.dashboard-floating-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  padding: 12px 16px;
  margin-top: 16px;
}

.dashboard-floating-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mint-soft, #e1f7ef);
  color: #0d8f63;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dashboard-floating-icon svg {
  width: 15px;
  height: 15px;
}

.dashboard-floating-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 160px;
}

.dashboard-floating-text strong {
  font-size: 13.5px;
  color: #111114;
}

.dashboard-floating-text span {
  font-size: 11.5px;
  color: var(--text-soft);
}

.dashboard-floating-actions {
  display: flex;
  gap: 8px;
}

.btn-mini-primary,
.btn-mini-ghost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-mini-primary svg,
.btn-mini-ghost svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.btn-mini-primary {
  background: #111114;
  color: #ffffff;
  border: none;
}

.btn-mini-ghost {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border);
}

.sidebar-label {
  font-size: 10px;
  font-weight: 700;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-item {
  padding: 10px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: #27272a;
}

.sidebar-item.active {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.03);
}

.status-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: capitalize;
  white-space: nowrap;
}

.status-tag.triagem { background: #fef3c7; color: #b45309; }
.status-tag.caminho { background: #dbeafe; color: #2563eb; }
.status-tag.entregue { background: #d1fae5; color: #059669; }

.dashboard-body {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.dashboard-scroll-area {
  height: 100%;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.dashboard-scroll-area,
.dashboard-sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.dashboard-scroll-area::-webkit-scrollbar,
.dashboard-sidebar::-webkit-scrollbar {
  width: 6px;
}

.dashboard-scroll-area::-webkit-scrollbar-thumb,
.dashboard-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 999px;
}

.dashboard-scroll-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff);
  pointer-events: none;
}

.dashboard-page-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-page-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-page-title-row h3 {
  font-family: var(--font-mori);
  font-size: 19px;
  font-weight: 700;
  color: #111114;
  margin: 0;
}

.dashboard-page-badge {
  background: var(--mint-soft, #e1f7ef);
  color: #0d8f63;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}

.dashboard-page-meta {
  font-size: 12px;
  color: var(--text-faint);
  margin: 0;
}

.dashboard-page-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.dashboard-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.dashboard-stat {
  background: #f8f8f7;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-stat-icon {
  color: var(--text-faint);
  margin-bottom: 4px;
}

.dashboard-stat-icon svg {
  width: 14px;
  height: 14px;
}

.dashboard-stat.is-warning .dashboard-stat-icon {
  color: #b45309;
}

.dashboard-stat span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}

.dashboard-stat strong {
  font-size: 17px;
  font-weight: 800;
  color: #111114;
  font-family: var(--font-mori);
}

.dashboard-stat em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-soft);
}

.dashboard-stat.is-warning strong {
  color: #b45309;
}

.dashboard-tabs-row {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

.dashboard-tab {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-faint);
  padding-bottom: 8px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.dashboard-tab.is-active {
  color: #111114;
  border-bottom-color: #111114;
}

.dashboard-content-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: start;
}

.dashboard-content-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.dashboard-chart-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.dashboard-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.dashboard-chart-header strong {
  display: block;
  font-size: 13px;
  color: #111114;
}

.dashboard-chart-header span {
  font-size: 11px;
  color: var(--text-faint);
}

.dashboard-chart-trend {
  font-size: 11px;
  font-weight: 700;
  color: #0d8f63;
  background: var(--mint-soft, #e1f7ef);
  padding: 2px 8px;
  border-radius: 999px;
}

.dashboard-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 70px;
}

.dashboard-bar {
  flex: 1;
  height: var(--h, 30%);
  background: #e4e4e7;
  border-radius: 4px 4px 0 0;
}

.dashboard-bar.is-active {
  background: var(--blue);
}

.dashboard-bars-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-faint);
}

.dashboard-package-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dashboard-side-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.dashboard-reco-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #111114;
}

.dashboard-reco-badge {
  background: var(--purple-soft, #f3e8ff);
  color: var(--purple);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.dashboard-reco-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-reco-card p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0;
}

.dashboard-reco-card p strong {
  color: #111114;
}

.dashboard-reco-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dashboard-reco-icon svg {
  width: 12px;
  height: 12px;
}

.reco-icon-purple { background: var(--purple-soft, #f3e8ff); color: var(--purple); }
.reco-icon-blue { background: #dbeafe; color: #2563eb; }
.reco-icon-amber { background: #fef3c7; color: #b45309; }

.dashboard-reco-meta {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  font-style: italic;
}

.package-header h4 {
  font-size: 16px;
  font-weight: 700;
  color: #111114;
  margin: 0 0 4px;
}

.package-header p {
  font-size: 12px;
  color: #a1a1aa;
  margin: 0;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0;
}

.photo-slot {
  background: #f4f3f0;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.package-details-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 20px;
}

.detail-col span {
  font-size: 11px;
  color: #a1a1aa;
  display: block;
  margin-bottom: 4px;
}

.detail-col strong {
  font-size: 14px;
  font-weight: 700;
  color: #111114;
}

/* Scroll reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1), transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .nav-links, .nav-actions { display: none; }
  .hamburger-btn { display: block; }
  /* Segmented-control tab tracks (e.g. "Logística & Triagem" /
     "Transparência & Custos" / "Atendimento Humano") don't wrap and
     have no max-width, so long labels push the whole page wider than
     the viewport on phones. Scroll horizontally instead. */
  .pill-tabs-track {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pill-tabs-track::-webkit-scrollbar { display: none; }
  .pill-tab-btn { flex-shrink: 0; }
  .pill-card-grid { grid-template-columns: 1fr; height: auto; }
  .stacker-showcase-grid { grid-template-columns: 1fr; gap: 28px; }
  .showcase-visual-card { height: 420px; }
  .showcase-category-title { font-size: 28px; }
  .feature-title { font-size: 16px; }
  .feature-desc { font-size: 14px; }
  .diff-grid { grid-template-columns: 1fr; }
  .rules-grid { grid-template-columns: 1fr; }
  .recursos-main-grid { grid-template-columns: 1fr; }
  .recursos-grid-benefits { grid-template-columns: repeat(2, 1fr); }
  .dashboard-layout { grid-template-columns: 190px 1fr; }
  .sidebar-ai-pinned { padding: 10px; }
  .dashboard-stats-row { grid-template-columns: repeat(2, 1fr); }
  .dashboard-content-grid { grid-template-columns: 1fr; }
  .cta-content-wrapper { grid-template-columns: 1fr; text-align: center; }
  .cta p { margin: 0 auto 24px; }
  .cta-actions { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr repeat(2, 1fr); }
  .footer-contact-col { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .recursos-grid-benefits { grid-template-columns: 1fr; }
  .dashboard-window { aspect-ratio: auto; max-height: none; }
  .dashboard-layout { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .dashboard-sidebar { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.05); overflow-y: visible; }
  .dashboard-body { overflow: visible; }
  .dashboard-scroll-area { height: auto; overflow-y: visible; }
  .dashboard-scroll-fade { display: none; }
  .sidebar-list { flex-direction: row; flex-wrap: wrap; }
  .package-details-row { gap: 12px; }
  .dashboard-stats-row { grid-template-columns: repeat(2, 1fr); }
  .dashboard-content-grid { grid-template-columns: 1fr; }
  .dashboard-page-title-row { flex-wrap: wrap; }
  .dashboard-topbar-nav { order: 3; width: 100%; justify-content: flex-start; }
  .calc-header { flex-direction: column; align-items: flex-start; }
  .calc-rate-badge { align-self: flex-start; }
  .rules-col { padding: 24px; }
  .calc-inputs-col, .calc-result-col { padding: 28px 20px; }
  .section { padding: 64px 0; }
  .calc-service-selector-section .pill-tab-btn {
    padding: 10px 8px;
    font-size: 12px;
  }

  /* These components keep their full desktop padding at every breakpoint
     above this one, which compounds with .container's own 24px side
     padding and leaves very little width for their actual content on a
     phone (worst case: .pill-card-grid + .pill-card-preview + .window-body
     stack to ~112px of padding per side inside a 375px viewport). */
  .pill-card-grid { padding: 24px 20px 32px 20px; }
  .pill-card-preview { padding: 16px; }
  .window-body { padding: 20px 16px; }
  .chat-bubble { font-size: 11.5px; }
  .window-header { gap: 8px; padding: 9px 10px; }
  .window-dots { gap: 5px; }
  .window-dots .dot { width: 8px; height: 8px; }
  .window-address-bar { gap: 5px; padding: 4px 10px 4px 8px; }
  .address-lock-icon { width: 10px; height: 10px; }
  .address-text { font-size: 10px; white-space: nowrap; }
  .benefit-card { padding: 18px; }
  .cta { padding: 56px 24px; }
  .faq-question { padding: 20px 16px; }
  .faq-answer-inner { padding: 16px 16px 20px 16px; }

  /* The timeline/payment mockups inside the shader cards are pinned to
     92%/370px inline, sized for the desktop shader spread — on a phone
     that leaves wide empty shader margins on each side and squeezes the
     mockup's own text. Widen them, but keep a visible shader margin. */
  .recursos-card-graphic { padding: 16px 8px 32px 8px; }
  .window-mockup.timeline-window,
  .payment-widget-container {
    width: 94% !important;
    max-width: none !important;
  }
  .payment-widget-container { padding: 12px !important; }
  .timeline-order-info { gap: 4px; }
  .timeline-order-id { font-size: 11.5px; }
  .timeline-status-badge { font-size: 9.5px; padding: 2px 5px; }
  .timeline-date { font-size: 9.5px; }
  .timeline-step { padding: 10px; gap: 8px; }
  .step-title { font-size: 11px; }
  .step-meta { font-size: 9.5px; }
  .step-pill-amber { font-size: 9.5px; padding: 1.5px 6px; }
  .payment-widget-title { font-size: 12.5px; }
  .payment-widget-currency { font-size: 10px; padding: 2px 6px; }
}

/* ==========================================================================
   CONCENTRIC ORBIT CARD SECTION (STACKER CLONE)
   ========================================================================== */

.stacker-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 0 44px;
  display: flex;
  align-items: center;
  gap: 40px;
  box-shadow: none;
  margin-top: 32px;
  margin-bottom: 32px;
  width: 100%;
  height: 310px;
  overflow: hidden;
  position: relative;
}

.illustration-column {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 380px;
  height: 100%;
  position: relative;
}

.rings-wrapper {
  --ring-scale: 1;
  position: relative;
  width: calc(380px * var(--ring-scale));
  height: calc(380px * var(--ring-scale));
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: calc(-40px * var(--ring-scale));
}

/* Circles/Rings */
.ring {
  position: absolute;
  border: 1px solid #ededf2;
  border-radius: 50%;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner-ring {
  width: calc(200px * var(--ring-scale));
  height: calc(200px * var(--ring-scale));
}

.outer-ring {
  width: calc(330px * var(--ring-scale));
  height: calc(330px * var(--ring-scale));
}

/* Central Nippax Logo Box */
.central-logo {
  position: absolute;
  background: #ffffff;
  padding: 8px 18px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: none;
}

.central-logo--hero {
  padding: calc(10px * var(--ring-scale)) calc(24px * var(--ring-scale));
}

.central-logo__img {
  height: calc(38px * var(--ring-scale));
  width: auto;
  object-fit: contain;
}

.nippax-brand {
  font-family: var(--font-mori), sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #111114;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  position: relative;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.orbit-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.inner-orbit {
  transform: rotate(var(--init-angle));
  animation: orbit-ccw var(--speed) linear infinite;
}

.outer-orbit {
  transform: rotate(var(--init-angle));
  animation: orbit-cw var(--speed) linear infinite;
}

.node {
  position: absolute;
  top: calc(-17px * var(--ring-scale));
  width: calc(34px * var(--ring-scale));
  height: calc(34px * var(--ring-scale));
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: calc(8px * var(--ring-scale));
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.node img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.inner-orbit .node {
  top: calc(-14px * var(--ring-scale));
  width: calc(28px * var(--ring-scale));
  height: calc(28px * var(--ring-scale));
  border-radius: calc(7px * var(--ring-scale));
  transform: rotate(calc(-1 * var(--init-angle)));
  animation: node-cw var(--speed) linear infinite;
}

.inner-orbit .node img {
  width: 100%;
  height: 100%;
}

.outer-orbit .node {
  transform: rotate(calc(-1 * var(--init-angle)));
  animation: node-ccw var(--speed) linear infinite;
}

@keyframes orbit-cw {
  from { transform: rotate(var(--init-angle)); }
  to { transform: rotate(calc(var(--init-angle) + 360deg)); }
}

@keyframes orbit-ccw {
  from { transform: rotate(var(--init-angle)); }
  to { transform: rotate(calc(var(--init-angle) - 360deg)); }
}

@keyframes node-ccw {
  from { transform: rotate(calc(-1 * var(--init-angle))); }
  to { transform: rotate(calc(-1 * (var(--init-angle) + 360deg))); }
}

@keyframes node-cw {
  from { transform: rotate(calc(-1 * var(--init-angle))); }
  to { transform: rotate(calc(-1 * (var(--init-angle) - 360deg))); }
}

.content-column {
  flex: 1.15;
}

.section-title {
  font-family: var(--font-mori), sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  color: #14141a;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.section-desc {
  font-family: var(--font-inter), sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #71717a;
  font-weight: 400;
  margin-bottom: 20px;
  max-width: 480px;
}

.pills-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-btn {
  font-size: 11px;
  font-weight: 500;
  color: #999999;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  padding: 6px 13px;
  border-radius: 7px;
  cursor: default;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}

a.pill-btn {
  cursor: pointer;
}

a.pill-btn:hover {
  background: #e4e4e7;
  color: #111114;
  border-color: #d4d4d8;
  transform: translateY(-1px);
}

.highlight-pill {
  color: #0284c7;
  background: #f0f9ff;
  border-color: #bae6fd;
}

a.highlight-pill:hover {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #7dd3fc;
}

@media (max-width: 1024px) {
  .stacker-card {
    flex-direction: column;
    padding: 48px 24px;
    gap: 32px;
    text-align: center;
    height: auto;
  }
  
  .illustration-column {
    min-width: 100%;
    height: 380px;
    max-width: 480px;
  }

  .rings-wrapper {
    margin-left: 0;
  }
  
  .pills-row {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  /* Shrink the ring illustration via the --ring-scale custom property
     (real pixel sizes) instead of transform: scale() — scaling a raster
     logo image through a CSS transform forces the browser to rasterize it
     at the wrong backing-store size, which read as blurry on device. */
  .stacker-card {
    padding: 40px 16px;
  }
  .illustration-column {
    width: 300px !important;
    height: 300px !important;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    margin: 0 auto;
  }
  .rings-wrapper {
    --ring-scale: 0.79;
  }
  .section-title {
    font-size: 28px;
  }

  /* At 11px the 5-pill rows still slightly overflow the mobile column,
     kicking the last pill onto its own line — tighten padding/gaps just
     enough to fit all 5 back on one row. */
  .pill-btn {
    padding: 6px 7px;
  }
  .pills-row {
    gap: 3px;
  }
  .pills-container {
    gap: 6px;
  }
}

.mobile-create-account-cta {
  display: none;
}

.show-mobile {
  display: none !important;
}
@media (max-width: 900px) {
  .show-mobile {
    display: inline !important;
  }
  .hide-mobile {
    display: none !important;
  }
  .mobile-create-account-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    z-index: 10;
  }
  .mobile-cta-text {
    font-size: 15px;
    color: #ffffff;
    font-weight: 600;
  }
  .mobile-cta-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    
    /* Liquid Glass */
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(14px) saturate(1.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-top-color: rgba(255, 255, 255, 0.75);
    border-left-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .mobile-cta-btn svg {
    width: 20px;
    height: 20px;
  }
  .mobile-cta-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
  }
}