/* ================================================================
   TaxiCalcBR — Painel do Motorista
   Dark navy · amber gold (money) · emerald (profit) · coral (costs)
   Fonts: Bricolage Grotesque + DM Sans + DM Mono
   ================================================================ */

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

:root {
  --bg:        #080b12;
  --surface:   #10141f;
  --surface2:  #161a2a;
  --surface3:  #1e2338;

  --border:        rgba(255,255,255,.07);
  --border-bright: rgba(255,255,255,.13);

  --amber:      #f59e0b;
  --amber2:     #fcd34d;
  --amber-h:    #d97706;
  --amber-dim:  rgba(245,158,11,.13);
  --amber-glow: rgba(245,158,11,.22);

  --emerald:      #10b981;
  --emerald2:     #34d399;
  --emerald-dim:  rgba(16,185,129,.12);
  --emerald-glow: rgba(16,185,129,.22);

  --red:     #f43f5e;
  --red-dim: rgba(244,63,94,.12);

  --text:       #eef1ff;
  --text-sub:   #8896b8;
  --text-muted: #4a5374;

  --r:    18px;
  --r-sm: 10px;
  --r-xs: 6px;
  --r-pill: 999px;

  --shadow: 0 12px 48px rgba(0,0,0,.7);
  --t: .18s ease;
}

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 110% 55% at 50% 110%, rgba(245,158,11,.07) 0%, transparent 60%),
    radial-gradient(ellipse 55% 38% at 5%  10%,  rgba(16,185,129,.04) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 90% 20%,  rgba(99,102,241,.03) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

a { color: var(--amber2); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--amber); }
button { font-family: inherit; }
select, input, textarea { font-family: inherit; }

/* ── Keyframes ─────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gradient-pan {
  0%   { background-position: 0%   50%; }
  100% { background-position: 200% 50%; }
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  50%       { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
@keyframes shimmer-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Toast ─────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem .85rem 1.25rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  animation: toast-in .35s cubic-bezier(.34,1.56,.64,1) both;
  max-width: 420px;
}
.toast-green {
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.28);
  color: var(--emerald2);
}
.toast-amber {
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.25);
  color: var(--amber2);
}
.toast-x {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: .55;
  font-size: 1.1rem;
  line-height: 1;
  padding: .1rem .3rem;
  border-radius: 4px;
  transition: opacity var(--t);
  margin-left: auto;
  flex-shrink: 0;
}
.toast-x:hover { opacity: 1; }

/* ── Navigation ────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8,11,18,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  text-decoration: none;
}
.nav-brand:hover { text-decoration: none; color: var(--text); }

.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}

.brand-wordmark {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.brand-wordmark strong {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-tagline {
  font-size: .585rem;
  color: var(--text-sub);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav-links a {
  font-size: .875rem;
  color: var(--text-sub);
  text-decoration: none;
  transition: color var(--t);
}
.nav-links a:hover { color: var(--text); }

.nav-cta {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-h) 100%) !important;
  color: #fff !important;
  padding: .5rem 1.2rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: opacity var(--t), transform .12s ease;
}
.nav-cta:hover { opacity: .9; transform: translateY(-1px); text-decoration: none; }

/* ── Container ─────────────────────────────────────── */
.container { max-width: 840px; margin: 0 auto; padding: 0 1.25rem; }
section { padding: 5rem 1.25rem; }

.section-kicker {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .75rem;
}

.section-title {
  font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: 2.5rem;
}

/* ── Hero ──────────────────────────────────────────── */
.hero {
  padding: 5.5rem 1.25rem 4rem;
  overflow: hidden;
}
.hero-inner { max-width: 780px; margin: 0 auto; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.25);
  color: var(--amber2);
  font-size: .73rem;
  font-weight: 600;
  padding: .38rem 1rem;
  border-radius: var(--r-pill);
  margin-bottom: 1.75rem;
  animation: fade-up .5s ease both .05s;
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

.hero-title {
  font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  margin-bottom: 1.25rem;
  animation: fade-up .5s ease both .1s;
}

.hero-highlight {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber2) 50%, var(--amber) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-pan 4s linear infinite;
}

.hero-dim { color: var(--text-sub); font-size: .9em; }

.hero-sub {
  font-size: 1.05rem;
  color: var(--text-sub);
  max-width: 520px;
  margin-bottom: 1.5rem;
  line-height: 1.75;
  animation: fade-up .5s ease both .16s;
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .85rem;
  margin-bottom: 2rem;
  font-size: .82rem;
  color: var(--text-sub);
  animation: fade-up .5s ease both .22s;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-h) 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: .9rem 2.25rem;
  border-radius: var(--r-sm);
  transition: all .2s ease;
  box-shadow: 0 4px 28px var(--amber-glow);
  text-decoration: none;
  animation: fade-up .5s ease both .28s;
  position: relative;
  overflow: hidden;
}
.btn-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.btn-hero:hover::after { transform: translateX(100%); }
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 8px 36px var(--amber-glow); color: #fff; }

.hero-note {
  display: block;
  margin-top: .9rem;
  font-size: .8rem;
  color: var(--text-muted);
  animation: fade-up .5s ease both .33s;
}

/* ── Calculator section ────────────────────────────── */
.calc-section { padding: 0 1.25rem 5rem; }

.calc-card {
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--r);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  max-width: 840px;
  margin: 0 auto;
}

.calc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber) 40%, var(--amber2) 60%, transparent);
}

.calc-header {
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.calc-header h2 {
  font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: .35rem;
}
.calc-header p { font-size: .875rem; color: var(--text-sub); }

/* ── License key row ───────────────────────────────── */
.key-row {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
}
.key-field { display: flex; gap: .5rem; }

.key-input {
  flex: 1;
  min-width: 0;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: .58rem .9rem;
  color: var(--text);
  font-size: .875rem;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  outline: none;
  transition: border-color var(--t);
}
.key-input:focus { border-color: rgba(245,158,11,.4); }
.key-input::placeholder { color: var(--text-muted); }

.btn-apply {
  flex-shrink: 0;
  background: var(--surface3);
  border: 1px solid var(--border-bright);
  color: var(--text-sub);
  padding: .58rem 1.1rem;
  border-radius: var(--r-xs);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
}
.btn-apply:hover { border-color: var(--amber); color: var(--amber); }

@media (max-width: 400px) {
  .key-field { flex-wrap: wrap; }
  .key-field .btn-apply { width: 100%; }
}

.key-status {
  display: block;
  font-size: .78rem;
  margin-top: .45rem;
  min-height: 1.2em;
  line-height: 1.4;
}

/* ── Form ──────────────────────────────────────────── */
.form-group { margin-bottom: 1.35rem; }

.field-label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: .45rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.label-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

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

.field-row { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.field-row .field-input { flex: 1; min-width: 120px; }

.field-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: .65rem .9rem;
  color: var(--text);
  font-size: .9rem;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
  -webkit-appearance: none;
}
.field-input:focus {
  border-color: rgba(245,158,11,.45);
  box-shadow: 0 0 0 3px rgba(245,158,11,.07);
}
.field-input::placeholder { color: var(--text-muted); }

.field-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238896b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.4rem;
}
.field-select option { background: var(--surface2); color: var(--text); }

/* ── Platform / fuel pills ─────────────────────────── */
.platform-pills { display: flex; flex-wrap: wrap; gap: .45rem; }

.pill-label { cursor: pointer; user-select: none; }
.pill-label input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pill-label span {
  display: inline-flex;
  align-items: center;
  padding: .42rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-bright);
  background: var(--surface2);
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-sub);
  transition: all var(--t);
  cursor: pointer;
}
.pill-label input:checked + span {
  background: var(--amber-dim);
  border-color: rgba(245,158,11,.45);
  color: var(--amber2);
  font-weight: 600;
}
.pill-label span:hover { border-color: rgba(245,158,11,.3); color: var(--text); }

/* ── ANP button ────────────────────────────────────── */
.btn-anp {
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.25);
  color: var(--emerald);
  padding: .64rem 1rem;
  border-radius: var(--r-xs);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t);
  flex-shrink: 0;
}
.btn-anp:hover { background: rgba(16,185,129,.18); border-color: rgba(16,185,129,.4); }

/* ── Toggles ───────────────────────────────────────── */
.toggle-group {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  margin-top: .25rem;
  margin-bottom: 1.25rem;
}
.toggle-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  user-select: none;
}
.toggle-check {
  position: relative;
  width: 40px;
  height: 23px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface3);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
  flex-shrink: 0;
}
.toggle-check::after {
  content: '';
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--text-muted);
  top: 2px; left: 2px;
  transition: transform var(--t), background var(--t);
}
.toggle-check:checked { background: var(--amber-dim); border-color: rgba(245,158,11,.4); }
.toggle-check:checked::after { transform: translateX(17px); background: var(--amber); }
.toggle-text { font-size: .875rem; color: var(--text-sub); }

/* ── License inline row ───────────────────────────── */
.license-inline-row {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  animation: fade-up .2s ease both;
}
.btn-remove-key {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .73rem;
  cursor: pointer;
  padding: .15rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t);
  margin-top: .15rem;
  display: block;
  width: fit-content;
}
.btn-remove-key:hover { color: var(--red); }

.license-toggle-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .8rem;
  text-align: center;
  margin-top: .85rem;
  cursor: pointer;
  transition: color var(--t);
  padding: .25rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.license-toggle-btn:hover { color: var(--text-sub); }

/* ── Save row ──────────────────────────────────────── */
.save-row {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
}

/* ── Submit ────────────────────────────────────────── */
.btn-calcular {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-h) 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 4px 24px var(--amber-glow);
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
}
.btn-calcular::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .55s ease;
}
.btn-calcular:hover::after { transform: translateX(100%); }
.btn-calcular:hover { transform: translateY(-1px); box-shadow: 0 8px 32px var(--amber-glow); }
.btn-calcular:active { transform: scale(.99); }

/* ── Error ─────────────────────────────────────────── */
.error-msg {
  background: rgba(244,63,94,.1);
  border: 1px solid rgba(244,63,94,.25);
  color: var(--red);
  padding: .75rem 1rem;
  border-radius: var(--r-xs);
  font-size: .875rem;
  margin-top: 1rem;
}

/* ── Results ───────────────────────────────────────── */
.result-wrap {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  animation: fade-up .4s ease both;
}

.lucro-card {
  background: linear-gradient(135deg, var(--surface2) 0%, rgba(16,185,129,.07) 100%);
  border: 1px solid rgba(16,185,129,.25);
  border-radius: var(--r);
  padding: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.lucro-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--emerald) 50%, transparent);
}

.lucro-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  margin-bottom: .65rem;
}

.lucro-valor {
  font-family: 'Bricolage Grotesque', 'DM Mono', monospace;
  font-size: clamp(2.6rem, 8vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--emerald);
  text-shadow: 0 0 48px var(--emerald-glow);
  margin-bottom: .75rem;
  line-height: 1;
}

.lucro-meta {
  font-size: .83rem;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.lucro-sep { color: var(--text-muted); }

/* ── Breakdown grid ────────────────────────────────── */
.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.breakdown-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1rem 1.1rem;
  transition: transform var(--t);
}
.breakdown-card:hover { transform: translateY(-2px); }
.bc-green { border-color: rgba(16,185,129,.2); background: linear-gradient(135deg, var(--surface2), rgba(16,185,129,.05)); }
.bc-red   { border-color: rgba(244,63,94,.18);  background: linear-gradient(135deg, var(--surface2), rgba(244,63,94,.04));  }
.bc-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: .4rem;
}
.bc-val {
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.bc-green .bc-val { color: var(--emerald); }
.bc-red   .bc-val { color: var(--red); }

/* ── Chart ─────────────────────────────────────────── */
.chart-wrap {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

/* ── Upgrade strip ─────────────────────────────────── */
.upgrade-strip {
  background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.04));
  border: 1px solid rgba(245,158,11,.22);
  border-radius: var(--r-sm);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.upgrade-strip p { font-size: .875rem; color: var(--text-sub); }
.upgrade-strip strong { color: var(--amber2); }

.btn-upgrade {
  background: linear-gradient(135deg, var(--amber), var(--amber-h));
  color: #fff;
  border: none;
  padding: .6rem 1.25rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t);
}
.btn-upgrade:hover { transform: translateY(-1px); box-shadow: 0 4px 20px var(--amber-glow); }

/* ── Export row ────────────────────────────────────── */
.export-row {
  display: flex;
  gap: .65rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.btn-export {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--emerald-dim);
  border: 1px solid rgba(16,185,129,.28);
  color: var(--emerald);
  padding: .65rem 1.25rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
}
.btn-export:hover { background: rgba(16,185,129,.18); transform: translateY(-1px); }
.btn-locked { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.export-status-msg {
  display: block;
  font-size: .78rem;
  min-height: 1.1em;
  margin-top: .3rem;
  color: var(--text-sub);
}
.btn-locked:hover { transform: none !important; }

/* ── How it works ──────────────────────────────────── */
.how-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.step-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.75rem 1.5rem;
  transition: border-color var(--t), transform var(--t);
  position: relative;
  overflow: hidden;
}
.step-card:hover { border-color: rgba(245,158,11,.25); transform: translateY(-3px); }
.step-num {
  font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -.06em;
  color: rgba(245,158,11,.15);
  line-height: 1;
  margin-bottom: .85rem;
  display: block;
}
.step-card h3 { font-weight: 700; font-size: .95rem; margin-bottom: .5rem; }
.step-card p  { font-size: .845rem; color: var(--text-sub); line-height: 1.7; }

/* ── Compare ───────────────────────────────────────── */
.compare-section { padding: 5rem 1.25rem; }

.compare-scroll {
  overflow-x: auto;
  border-radius: var(--r);
  border: 1px solid var(--border);
}
.compare-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.compare-table th,
.compare-table td {
  padding: .85rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare-table thead tr { background: var(--surface2); }
.compare-table thead th {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-sub);
}
.compare-table thead .th-paid { color: var(--amber); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover td { background: rgba(255,255,255,.015); }
.compare-table tbody td:first-child { color: var(--text-sub); }
.td-paid { font-weight: 500; }

.chk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--emerald-dim);
  border-radius: 50%;
  color: var(--emerald);
  font-size: .75rem;
  font-weight: 700;
}
.lock-x { color: var(--text-muted); }

/* ── Why ───────────────────────────────────────────── */
.why-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.why-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.75rem 1.5rem;
  transition: all var(--t);
}
.why-card:hover { border-color: rgba(245,158,11,.22); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(245,158,11,.06); }
.why-icon { font-size: 1.75rem; margin-bottom: 1rem; display: block; }
.why-card h3 { font-weight: 700; font-size: .95rem; margin-bottom: .45rem; }
.why-card p  { font-size: .84rem; color: var(--text-sub); line-height: 1.65; }

/* ── Pricing ───────────────────────────────────────── */
.pricing-section { padding: 5rem 1.25rem; }
.pricing-sub { color: var(--text-sub); font-size: .95rem; margin-top: -.75rem; margin-bottom: 2.5rem; }

.pricing-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  max-width: 960px;
  margin: 0 auto;
}
.plan-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t), transform var(--t);
  position: relative;
}
.plan-card:hover { border-color: rgba(245,158,11,.25); transform: translateY(-3px); }
.plan-featured {
  border-color: rgba(245,158,11,.3);
  background: linear-gradient(145deg, var(--surface2), rgba(245,158,11,.06));
  box-shadow: 0 0 60px rgba(245,158,11,.06);
}
.plan-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--amber), var(--amber-h));
  color: #fff;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .25rem .7rem;
  border-radius: var(--r-pill);
  margin-bottom: .85rem;
  width: fit-content;
}
.plan-tier {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.plan-price-wrap { display: flex; align-items: flex-end; gap: .3rem; margin-bottom: .5rem; }
.plan-price {
  font-family: 'Bricolage Grotesque', 'DM Mono', monospace;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.plan-featured .plan-price { color: var(--amber2); }
.plan-period { font-size: .85rem; color: var(--text-muted); padding-bottom: .35rem; }
.plan-desc { font-size: .8rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.75rem;
  flex: 1;
}
.plan-features li { font-size: .875rem; color: var(--text-sub); padding-left: 1.5rem; position: relative; }
.feat-yes::before { content: '✓'; position: absolute; left: 0; color: var(--emerald); font-weight: 700; }
.feat-no { color: var(--text-muted) !important; opacity: .5; }
.feat-no::before { content: '–'; position: absolute; left: 0; color: var(--text-muted); font-weight: 700; }

.plan-btn {
  width: 100%;
  padding: .82rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all var(--t);
  text-align: center;
  text-decoration: none;
  display: block;
}
.plan-btn-primary {
  background: linear-gradient(135deg, var(--amber), var(--amber-h));
  color: #fff;
  box-shadow: 0 4px 20px var(--amber-glow);
}
.plan-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 28px var(--amber-glow); color: #fff; }
.plan-btn-ghost {
  background: var(--surface3);
  border: 1px solid var(--border-bright);
  color: var(--text-sub);
}
.plan-btn-ghost:hover { border-color: rgba(245,158,11,.3); color: var(--amber2); background: var(--amber-dim); }
.plan-note { font-size: .75rem; color: var(--text-muted); text-align: center; margin-top: .65rem; }

/* ── FAQ ───────────────────────────────────────────── */
.faq-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.faq-list { display: flex; flex-direction: column; gap: .5rem; }
.faq-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--t);
}
.faq-item:hover { border-color: var(--border-bright); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  text-align: left;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  transition: color var(--t);
}
.faq-q:hover { color: var(--amber2); }
.faq-q::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--amber);
  flex-shrink: 0;
  font-weight: 300;
  transition: transform var(--t);
}
.faq-q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq-a {
  padding: .85rem 1.25rem 1.1rem;
  font-size: .875rem;
  color: var(--text-sub);
  line-height: 1.75;
  border-top: 1px solid var(--border);
  animation: fade-up .2s ease;
}
.faq-a[hidden] { display: none; }

/* ── Blog CTA ──────────────────────────────────────── */
.blog-cta-section { padding: 3rem 1.25rem; }
.blog-cta-card {
  background: linear-gradient(135deg, var(--surface2), var(--surface3));
  border: 1px solid var(--border-bright);
  border-radius: var(--r);
  padding: 2rem 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 840px;
  margin: 0 auto;
}
.blog-cta-card h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: .35rem; }
.blog-cta-card p  { font-size: .875rem; color: var(--text-sub); }
.btn-blog {
  background: var(--surface);
  border: 1px solid var(--border-bright);
  color: var(--text-sub);
  padding: .7rem 1.4rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t);
  text-decoration: none;
  display: inline-block;
}
.btn-blog:hover { border-color: rgba(245,158,11,.35); color: var(--amber2); background: var(--amber-dim); text-decoration: none; }

/* ── Footer ────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); padding: 2.5rem 1.25rem; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  max-width: 840px;
  margin: 0 auto;
}
.footer-brand { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 600; }
.footer-sub { display: block; font-size: .75rem; font-weight: 400; color: var(--text-muted); margin-top: .1rem; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { font-size: .82rem; color: var(--text-muted); transition: color var(--t); }
.footer-links a:hover { color: var(--text-sub); text-decoration: none; }

/* ── Mobile sticky ─────────────────────────────────── */
.mobile-sticky {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  padding: .75rem 1rem;
  background: rgba(8,11,18,.96);
  backdrop-filter: blur(18px);
  border-top: 1px solid rgba(245,158,11,.18);
}
.mobile-sticky-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--amber), var(--amber-h));
  color: #fff;
  text-align: center;
  padding: .88rem;
  border-radius: var(--r-sm);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--t);
}
.mobile-sticky-btn:hover { opacity: .92; color: #fff; text-decoration: none; }

/* ── Modal ─────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
}
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: calc(var(--r) + 4px);
  padding: 2.5rem 2.25rem;
  max-width: 560px;
  width: 100%;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  animation: modal-in .3s cubic-bezier(.22,1,.36,1) both;
  margin: auto;
}
.modal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber) 40%, var(--amber2) 60%, transparent);
}
.modal-x {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-sub);
  transition: all var(--t);
}
.modal-x:hover { border-color: var(--border-bright); color: var(--text); }
.modal-head { margin-bottom: 1.75rem; padding-right: 2.75rem; }
.modal-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--amber);
  margin-bottom: .5rem;
  display: block;
}
.modal-title {
  font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: .5rem;
}
.modal-sub { font-size: .875rem; color: var(--text-sub); line-height: 1.6; }
.modal-plans { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: 1.25rem; }
.modal-plan {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1.4rem 1.1rem;
  transition: all var(--t);
}
.modal-plan:hover { border-color: rgba(245,158,11,.3); transform: translateY(-2px); }
.mp-featured {
  border-color: rgba(245,158,11,.28);
  background: linear-gradient(135deg, var(--surface2), rgba(245,158,11,.06));
}
.mp-tier {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: .3rem;
}
.mp-price {
  font-family: 'Bricolage Grotesque', 'DM Mono', monospace;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .2rem;
}
.mp-featured .mp-price { color: var(--amber2); }
.mp-price span { font-size: .85rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.mp-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: .75rem 0 .85rem;
}
.mp-features li { font-size: .78rem; color: var(--text-sub); padding-left: 1.2rem; position: relative; }
.mp-features li::before { content: '✓'; position: absolute; left: 0; color: var(--emerald); font-weight: 700; }
.mp-for { font-size: .72rem; color: var(--text-muted); font-style: italic; margin-bottom: .85rem; line-height: 1.4; }
.mp-btn {
  width: 100%;
  padding: .65rem .75rem;
  border-radius: var(--r-xs);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all var(--t);
}
.mp-btn-primary { background: linear-gradient(135deg, var(--amber), var(--amber-h)); color: #fff; }
.mp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px var(--amber-glow); }
.mp-btn-ghost { background: var(--surface3); border: 1px solid var(--border-bright); color: var(--text-sub); }
.mp-btn-ghost:hover { border-color: rgba(245,158,11,.3); color: var(--amber2); }
.modal-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  font-size: .78rem;
  color: var(--text-muted);
  padding-top: .75rem;
  border-top: 1px solid var(--border);
  margin-bottom: .85rem;
  flex-wrap: wrap;
}
.modal-already {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .8rem;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  transition: color var(--t);
}
.modal-already:hover { color: var(--text-sub); }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .fields-grid   { grid-template-columns: 1fr; }
  .steps-grid    { grid-template-columns: 1fr; }
  .why-grid      { grid-template-columns: 1fr; }
  .pricing-row   { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .modal-plans   { grid-template-columns: 1fr; }

  .nav { padding: .85rem 1.25rem; }

  .hero { padding: 4rem 1.25rem 3rem; }
  .hero-features { display: none; }

  .calc-card { padding: 1.5rem 1.25rem; }

  .mobile-sticky { display: block; }
  body { padding-bottom: 5rem; }

  .blog-cta-card  { flex-direction: column; }
  .footer-inner   { flex-direction: column; align-items: flex-start; }

  section { padding: 4rem 1.25rem; }
}

@media (max-width: 480px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .brand-logo { width: 30px; height: 30px; border-radius: 8px; }

  .hero-title { font-size: 2.2rem; }
  .hero-sub   { display: none; }

  .calc-card   { padding: 1.25rem 1rem; }

  .compare-table { font-size: .78rem; }
  .compare-table th, .compare-table td { padding: .65rem .75rem; }

  .modal-card { padding: 3.5rem 1.25rem 2rem; }

  section { padding: 3.5rem 1rem; }
}

/* ── Mobile Results Carousel ─────────────────────────────────── */
@media (max-width: 600px) {
  .breakdown-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding: 0 1.5rem;
    gap: .65rem;
    padding: .1rem 1rem 1rem;
    margin: 0 -1rem .25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .breakdown-grid::-webkit-scrollbar { display: none; }

  .breakdown-card {
    flex: 0 0 72vw;
    min-width: 0;
    scroll-snap-align: center;
    padding: 1.35rem 1.25rem;
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .bc-label { font-size: .7rem; margin-bottom: .55rem; }
  .bc-val   { font-size: 1.3rem; }

  /* Dot indicators */
  .slide-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    margin: 0 0 1.25rem;
    list-style: none;
    padding: 0;
    border: none;
    background: none;
  }

  .slide-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--surface3);
    border: 1px solid var(--border-bright);
    transition: width .28s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s, box-shadow .2s;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
  }

  .slide-dot.active {
    width: 22px;
    background: var(--amber);
    border-color: var(--amber);
    box-shadow: 0 0 10px var(--amber-glow);
  }

  /* Chart: horizontal bars on mobile */
  .chart-wrap {
    padding: 1rem .65rem;
    overflow: hidden;
  }
}

@media (min-width: 601px) {
  .slide-dots { display: none !important; }
}

/* ── Histórico de dias ─────────────────────────────────── */
.storico-section {
  margin-top: 2rem;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--surface2);
  border: 1px solid var(--border-bright);
  border-radius: var(--r);
  position: relative;
  overflow: hidden;
}
.storico-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber) 40%, var(--amber2) 60%, transparent);
}

.storico-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.storico-export-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}
.btn-st-export-all {
  padding: .35rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  border-radius: var(--r-xs);
  border: 1px solid var(--amber);
  background: var(--amber);
  color: #000;
  cursor: pointer;
  transition: opacity var(--t);
}
.btn-st-export-all:hover { opacity: .85; }

.storico-title {
  font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  margin-top: .75rem;
}

.storico-count {
  display: inline-flex;
  align-items: center;
  padding: .18rem .6rem;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.storico-empty {
  font-size: .875rem;
  color: var(--text-muted);
  padding: 1rem 0 .5rem;
  text-align: center;
}

.storico-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.storico-table thead th {
  text-align: left;
  padding: .55rem .75rem;
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.storico-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
}

.storico-table tbody tr:last-child { border-bottom: none; }
.storico-table tbody tr:hover { background: var(--surface3); }

.storico-table td {
  padding: .75rem .75rem;
  color: var(--text);
  vertical-align: middle;
}

.st-date {
  font-family: 'DM Mono', monospace;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.st-lucro {
  font-size: .95rem;
}

.st-actions { display: flex; gap: .35rem; justify-content: flex-end; align-items: center; }

.btn-st-export {
  padding: .28rem .6rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--amber);
  background: transparent;
  color: var(--amber);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.btn-st-export:hover { background: var(--amber); color: #000; }

.btn-st-csv {
  border-color: var(--border-bright);
  color: var(--text-muted);
}
.btn-st-csv:hover { background: var(--surface3); color: var(--text); border-color: var(--text-muted); }

.btn-st-delete {
  border-color: rgba(244,63,94,.3);
  color: var(--red);
  padding: .28rem .5rem;
}
.btn-st-delete:hover { background: rgba(244,63,94,.12); border-color: var(--red); color: var(--red); }

@media (max-width: 600px) {
  .storico-section { padding: 1rem .85rem .85rem; }

  .storico-table { display: block; }
  .storico-table thead { display: none; }
  .storico-table tbody { display: flex; flex-direction: column; gap: .45rem; }

  .storico-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: .85rem .9rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border) !important;
    background: var(--surface3);
    gap: .3rem .5rem;
    border-bottom: 1px solid var(--border) !important;
  }
  .storico-table tr:hover { background: var(--surface2); }

  .storico-table td {
    padding: 0;
    border: none;
    vertical-align: middle;
  }
  .storico-table td:nth-child(1) {
    grid-column: 1; grid-row: 1;
    font-size: .78rem;
    color: var(--text-muted);
    font-family: 'DM Mono', monospace;
    align-self: center;
  }
  .storico-table td:nth-child(2) {
    grid-column: 1; grid-row: 2;
    align-self: center;
  }
  .storico-table td:nth-child(3) { display: none; }
  .storico-table td:nth-child(4) {
    grid-column: 2; grid-row: 1;
    text-align: right;
    font-size: 1rem;
    font-family: 'DM Mono', monospace;
    font-weight: 700;
    align-self: center;
    white-space: nowrap;
  }
  .storico-table td:nth-child(5) {
    grid-column: 2; grid-row: 2;
    align-self: center;
  }
  .st-actions { gap: .3rem; }
  .btn-st-export { padding: .3rem .55rem; font-size: .7rem; }
}

/* ── Storico locked preview (free users) ──────────────── */
.storico-locked {
  position: relative;
  margin-top: 2rem;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid rgba(245,158,11,.18);
  background: var(--surface2);
  box-shadow: 0 0 40px rgba(245,158,11,.04);
}

/* ── KPI stats bar ──────────────────────────────────── */
.stl-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
  padding: 1.25rem 1.25rem 1.1rem;
  background: linear-gradient(135deg, rgba(245,158,11,.05), rgba(245,158,11,.02));
  border-bottom: 1px solid var(--border);
}

.stl-stat-item {
  text-align: center;
  padding: 1rem .75rem .9rem;
  background: var(--surface3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t);
}
.stl-stat-item:hover { border-color: rgba(245,158,11,.2); transform: translateY(-1px); }

.stl-stat-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,.03) 50%, transparent 80%);
  animation: shimmer-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}

.stl-stat-label {
  display: block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  margin-bottom: .45rem;
}

.stl-stat-val {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--emerald);
  letter-spacing: -.02em;
}

.storico-locked .stl-stat-val {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}

.stl-stat-neg { color: var(--red); }

/* ── Ghost table ─────────────────────────────────────── */
.stl-table-wrap {
  position: relative;
  background: var(--surface2);
}

.stl-ghost {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  pointer-events: none;
  user-select: none;
}

.stl-ghost thead th {
  text-align: left;
  padding: .55rem .85rem;
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.012);
}

.stl-ghost tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
}
.stl-ghost tbody tr:nth-child(even) { background: rgba(255,255,255,.013); }
.stl-ghost tbody tr:last-child { border-bottom: none; }

.stl-ghost td {
  padding: .65rem .85rem;
  color: var(--text-sub);
  vertical-align: middle;
}

.stl-plat-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: var(--r-pill);
  background: var(--surface3);
  border: 1px solid var(--border);
}

.stl-blur {
  display: inline-block;
  filter: blur(5.5px);
  font-weight: 700;
  font-family: 'DM Mono', monospace;
  letter-spacing: .02em;
  user-select: none;
  pointer-events: none;
}

.stl-green { color: var(--emerald); }
.stl-red   { color: var(--red); }

.stl-btn-ghost {
  display: inline-block;
  padding: .25rem .55rem;
  font-size: .7rem;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid var(--border-bright);
  color: var(--text-muted);
  margin-right: .3rem;
  filter: blur(2px);
}

/* gradient fade */
.stl-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, var(--surface2) 90%);
  pointer-events: none;
}

/* ── Overlay card ────────────────────────────────────── */
.stl-overlay {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .65rem;
  background: linear-gradient(180deg, var(--surface2) 0%, rgba(16,20,31,.99) 100%);
  border-top: 1px solid rgba(245,158,11,.12);
}

.stl-lock-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--amber-dim), rgba(245,158,11,.06));
  border: 1px solid rgba(245,158,11,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  animation: stl-pulse 2.8s ease-in-out infinite;
}

@keyframes stl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.2); }
  50%       { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
}

.stl-headline {
  font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  margin-top: .1rem;
}

.stl-sub {
  font-size: .825rem;
  color: var(--text-sub);
  max-width: 320px;
  line-height: 1.55;
}

.stl-cta {
  margin-top: .35rem;
  padding: .7rem 1.75rem;
  background: linear-gradient(135deg, var(--amber), var(--amber-h));
  color: #000;
  font-weight: 700;
  font-size: .875rem;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all .2s ease;
  letter-spacing: -.01em;
  box-shadow: 0 4px 20px var(--amber-glow);
  position: relative;
  overflow: hidden;
}

.stl-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .55s ease;
}
.stl-cta:hover::after { transform: translateX(100%); }
.stl-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 28px var(--amber-glow); }

@media (max-width: 600px) {
  .stl-ghost thead th:nth-child(3),
  .stl-ghost td:nth-child(3) { display: none; }
  .stl-overlay { padding: 1.25rem 1rem 1.5rem; }
}

@media (max-width: 480px) {
  .stl-stats-row {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
    gap: .45rem;
    padding: 1rem .85rem .9rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .stl-stats-row::-webkit-scrollbar { display: none; }
  .stl-stat-item { padding: .85rem .6rem .75rem; }
  .stl-stat-val { font-size: 1rem; }
  .stl-stat-label { font-size: .6rem; margin-bottom: .35rem; }
}

/* ── Pro Banner ────────────────────────────────────── */
.pro-banner {
  position: sticky;
  top: 0;
  z-index: 110;
  background: linear-gradient(90deg, rgba(16,185,129,.13) 0%, rgba(245,158,11,.08) 100%);
  border-bottom: 1px solid rgba(16,185,129,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pro-banner-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: .55rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pro-banner-left {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .875rem;
}
.pro-pill {
  background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald2) 100%);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .18rem .5rem;
  border-radius: var(--r-pill);
}
.pro-plan-label { color: var(--emerald2); font-weight: 600; }
.pro-sep { color: var(--text-muted); }
.pro-credits-label { color: var(--text-sub); }
.pro-deactivate-btn {
  background: transparent;
  border: 1px solid rgba(244,63,94,.3);
  color: rgba(244,63,94,.8);
  font-size: .75rem;
  font-weight: 500;
  padding: .3rem .85rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
}
.pro-deactivate-btn:hover {
  background: rgba(244,63,94,.1);
  border-color: rgba(244,63,94,.5);
  color: #f43f5e;
}

/* ── Pro Mode — sezioni nascoste ──────────────────── */
body.pro-mode .hero,
body.pro-mode .how-section,
body.pro-mode .compare-section,
body.pro-mode .why-section,
body.pro-mode .pricing-section,
body.pro-mode .faq-section,
body.pro-mode .blog-cta-section,
body.pro-mode .mobile-sticky,
body.pro-mode #license-toggle-btn,
body.pro-mode #upgrade-strip,
body.pro-mode #storico-locked {
  display: none !important;
}
@media (max-width: 768px) {
  body.pro-mode { padding-bottom: 0; }
}

/* Dashboard header in pro mode */
body.pro-mode .calc-section {
  padding-top: 2rem;
}
body.pro-mode .calc-card {
  border-color: rgba(16,185,129,.18);
  box-shadow: 0 0 0 1px rgba(16,185,129,.06), var(--shadow);
}
body.pro-mode .calc-header h2::after {
  content: ' · Modo Dashboard';
  font-size: .7em;
  font-weight: 500;
  color: var(--emerald);
  letter-spacing: .02em;
}

/* Pro mode: storico sempre visibile */
body.pro-mode #storico-section {
  display: block !important;
}

/* Pro mode: salva report sempre visibile */
body.pro-mode #save-row {
  display: block !important;
}

/* Pro mode: export sempre visibile dopo calcolo */
body.pro-mode #locked-export-row {
  display: none !important;
}

/* Transizione pro mode */
.pro-banner,
.hero, .how-section, .compare-section,
.why-section, .pricing-section, .faq-section,
.blog-cta-section, .calc-card {
  transition: opacity .3s ease;
}
body.pro-mode-transitioning * {
  transition: opacity .25s ease !important;
}

@keyframes pro-activate {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
body.pro-mode .pro-banner {
  animation: pro-activate .35s cubic-bezier(.34,1.2,.64,1) both;
}
body.pro-mode .nav {
  top: var(--pro-banner-h, 44px);
}
body.pro-mode { scroll-padding-top: calc(76px + var(--pro-banner-h, 44px)); }
body.pro-mode .calc-card {
  animation: pro-activate .4s .05s cubic-bezier(.34,1.1,.64,1) both;
}

@media (max-width: 600px) {
  .pro-banner-inner { padding: .5rem 1rem; }
  .pro-banner-left { font-size: .8rem; gap: .4rem; }
}

/* ── Support / Feedback Widget ─────────────────────────────── */

/* Backdrop — mobile only */
.support-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 198;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.support-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Widget container */
.support-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .7rem;
}

/* FAB button */
.support-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-h) 100%);
  border: 1px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 20px var(--amber-glow), 0 2px 10px rgba(0,0,0,.55);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.support-fab:hover {
  transform: scale(1.07) translateY(-2px);
  box-shadow: 0 8px 30px var(--amber-glow), 0 4px 14px rgba(0,0,0,.55);
}
.support-fab.open {
  background: var(--surface2);
  border-color: var(--border-bright);
  color: var(--text-sub);
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
.support-fab .fab-chat {
  position: absolute;
  transition: opacity .18s ease, transform .22s cubic-bezier(.34,1.3,.64,1);
}
.support-fab .fab-close {
  position: absolute;
  opacity: 0;
  transform: rotate(-45deg) scale(.6);
  transition: opacity .18s ease, transform .22s cubic-bezier(.34,1.3,.64,1);
}
.support-fab.open .fab-chat { opacity: 0; transform: rotate(45deg) scale(.6); }
.support-fab.open .fab-close { opacity: 1; transform: rotate(0deg) scale(1); }

/* Panel */
.support-panel {
  width: 316px;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--r);
  box-shadow: 0 24px 64px rgba(0,0,0,.75), 0 4px 20px rgba(0,0,0,.45);
  overflow: hidden;
  position: relative;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(.88) translateY(18px);
  transform-origin: bottom right;
  transition:
    transform .28s cubic-bezier(.34,1.3,.64,1),
    opacity .2s ease,
    visibility 0s linear .22s;
}
.support-panel.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
  transition:
    transform .28s cubic-bezier(.34,1.3,.64,1),
    opacity .2s ease,
    visibility 0s linear 0s;
}
.support-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber) 40%, var(--amber2) 60%, transparent);
  z-index: 1;
  pointer-events: none;
}

/* Panel header */
.support-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .72rem .9rem .6rem;
  border-bottom: 1px solid var(--border);
  gap: .5rem;
}
.support-tabs {
  display: flex;
  gap: .18rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: .17rem;
}
.support-tab {
  background: none;
  border: 1px solid transparent;
  padding: .28rem .8rem;
  border-radius: calc(var(--r-xs) - 2px);
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  letter-spacing: .01em;
  font-family: inherit;
}
.support-tab.active {
  background: var(--amber-dim);
  color: var(--amber2);
  border-color: rgba(245,158,11,.28);
}
.support-tab:not(.active):hover { color: var(--text-sub); }

.support-close {
  width: 26px; height: 26px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--t), color var(--t);
  font-family: inherit;
}
.support-close:hover { border-color: var(--border-bright); color: var(--text); }

/* Panel body */
.support-panel-body { padding: .95rem .9rem .9rem; }

.support-pane { animation: fade-up .2s ease both; }
.support-pane[hidden] { display: none; }

.support-pane-desc {
  font-size: .815rem;
  color: var(--text-sub);
  margin-bottom: .85rem;
  line-height: 1.5;
}

/* Stars */
.support-stars-wrap { margin-bottom: .85rem; }
.support-stars {
  display: flex;
  gap: .1rem;
  margin-bottom: .28rem;
}
.support-star {
  background: none;
  border: none;
  cursor: pointer;
  padding: .1rem .12rem;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--surface3);
  -webkit-text-stroke: 1px rgba(255,255,255,.12);
  transition: color .1s ease, transform .12s ease, filter .1s ease, -webkit-text-stroke .1s ease;
  font-family: inherit;
}
.support-star:hover { transform: scale(1.22); }
.support-star.filled {
  color: var(--amber);
  -webkit-text-stroke: 0;
  filter: drop-shadow(0 0 5px rgba(245,158,11,.4));
}
.support-star-label {
  display: block;
  font-size: .7rem;
  color: var(--text-muted);
  min-height: 1em;
  letter-spacing: .03em;
  transition: color .15s ease;
}
.support-star-label.rated { color: var(--amber2); font-weight: 500; }

/* Form fields */
.support-field {
  display: block;
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: .58rem .82rem;
  color: var(--text);
  font-size: .815rem;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.support-field:focus {
  border-color: rgba(245,158,11,.4);
  box-shadow: 0 0 0 3px rgba(245,158,11,.06);
}
.support-field::placeholder { color: var(--text-muted); }
.support-input { margin-bottom: .55rem; }
.support-textarea {
  resize: vertical;
  min-height: 76px;
  margin-bottom: .72rem;
  line-height: 1.5;
}

/* Submit button */
.support-submit {
  width: 100%;
  padding: .66rem;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-h) 100%);
  color: #fff;
  border: none;
  border-radius: var(--r-xs);
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .01em;
  box-shadow: 0 3px 14px var(--amber-glow);
  transition: transform .18s ease, box-shadow .18s ease, opacity .15s;
  position: relative;
  overflow: hidden;
  font-family: inherit;
}
.support-submit::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.support-submit:hover::after { transform: translateX(100%); }
.support-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--amber-glow); }
.support-submit:active { transform: scale(.99); }
.support-submit:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none; }

/* Success pane */
.support-success-pane:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem .5rem .85rem;
  gap: .42rem;
}
.support-success-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--emerald-dim);
  border: 1px solid rgba(16,185,129,.28);
  display: flex; align-items: center; justify-content: center;
  color: var(--emerald);
  margin-bottom: .3rem;
  animation: fade-up .32s ease both;
}
.support-success-title {
  font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  animation: fade-up .32s ease both .05s;
}
.support-success-sub {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 240px;
  animation: fade-up .32s ease both .1s;
}

/* ── Mobile overrides ──────────────────────────────────────── */
@media (max-width: 768px) {
  .support-backdrop { display: block; }

  .support-widget {
    /* reset desktop positioning */
    bottom: auto;
    right: auto;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    gap: 0;
  }

  .support-fab {
    position: fixed;
    bottom: calc(5rem + 12px);
    right: 16px;
    z-index: 201;
  }

  .support-panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    border-radius: var(--r) var(--r) 0 0;
    border-left: none; border-right: none; border-bottom: none;
    max-height: 88dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 199;
    padding-bottom: env(safe-area-inset-bottom, 0);

    /* Override desktop visibility animation — use translateY instead */
    visibility: visible;
    opacity: 1;
    pointer-events: none;
    transform: translateY(100%);
    transform-origin: bottom center;
    transition: transform .32s cubic-bezier(.32,.72,0,1), visibility 0s linear .32s;
  }
  .support-panel.open {
    pointer-events: auto;
    transform: translateY(0);
    transition: transform .32s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s;
  }

  /* Mobile drag handle hint */
  .support-panel-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    background: var(--border-bright);
    border-radius: var(--r-pill);
    pointer-events: none;
  }
  .support-panel-header { padding-top: 1.1rem; position: relative; }
}

@media (max-width: 480px) {
  .support-fab { right: 12px; }
  .support-panel-body { padding: .9rem .85rem .85rem; }
}