/* Brand-token preview layer generated from the supplied Figma token export. */
:root {
  --brand-navy: #005030;
  --brand-blue: #00a061;
  --brand-cyan: #60deac;
  --brand-green: #00c879;
  --blue-950: #002818;
  --blue-900: #005030;
  --blue-800: #007849;
  --blue-700: #00a061;
  --blue-600: #00c879;
  --cyan-500: #60deac;
  --cyan-100: #f1fff9;
  --blue-100: #e9fbf4;
  --blue-050: #f7fffb;
  --green-700: #007849;
  --green-600: #00c879;
  --green-100: #f1fff9;
  --accent-600: #00c879;
  --accent-100: #f1fff9;
  --ink: #1b1b1b;
  --ink-soft: #444444;
  --muted: #737373;
  --line: #e9ecef;
  --line-strong: #d7ebe2;
  --paper: #f8faf9;
  --paper-cool: #f1fff9;
  --surface: #ffffff;
  --danger: #e44332;
  --success: #00a061;
  --warning: #ff9500;
  --shadow-xs: 0 1px 2px rgba(0, 80, 48, .06);
  --shadow-sm: 0 8px 22px rgba(0, 80, 48, .08);
  --shadow-md: 0 18px 46px rgba(0, 80, 48, .12);
  --radius: 8px;
  --radius-sm: 6px;
}

body {
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(241, 255, 249, .82), rgba(248, 250, 249, .96) 34%, #fff 100%),
    linear-gradient(90deg, rgba(0, 200, 121, .055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 200, 121, .04) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 64px 64px, 64px 64px, auto;
}

body::before {
  background:
    linear-gradient(115deg, transparent 0%, rgba(0, 200, 121, .045) 44%, transparent 58%),
    radial-gradient(circle at 56% 0%, rgba(255, 255, 255, .86), transparent 40%);
}

.site-header {
  background: rgba(255, 255, 255, .9);
  border-bottom-color: rgba(215, 235, 226, .9);
}

.brand-logo {
  filter: saturate(.9);
}

.nav-links a:hover,
.nav-links a.active,
.phone-link,
.btn-ghost,
.btn-secondary,
.btn-white,
.card-link,
.quote cite {
  color: var(--green-700);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--brand-green);
}

.nav-links a::after {
  height: 2px;
  background: var(--brand-green);
}

.btn-primary,
.banner-tab.active {
  background: var(--brand-green);
  box-shadow: 0 10px 22px rgba(0, 200, 121, .20);
}

.btn-primary:hover {
  background: var(--blue-700);
  box-shadow: 0 14px 28px rgba(0, 160, 97, .22);
}

.btn-secondary,
.btn-ghost {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(0, 200, 121, .32);
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: var(--green-100);
}

.hero {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(241, 255, 249, .94) 48%, rgba(193, 244, 223, .52) 100%),
    radial-gradient(circle at 70% 18%, rgba(0, 200, 121, .13), transparent 28%),
    linear-gradient(90deg, rgba(0, 160, 97, .05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 160, 97, .038) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
}

.hero::before {
  opacity: .18;
  filter: saturate(.65) hue-rotate(54deg);
}

.hero::after {
  background: linear-gradient(180deg, transparent, #fff);
}

h1,
h2,
h3,
.hero-copy h1,
.banner-copy h2,
.metric-card strong,
.flow-card strong,
.phone-task b,
.mock-top,
.panel-title,
.delivery-step strong,
.faq-q {
  color: var(--ink);
}

.hero-copy .lead,
.banner-copy p,
.section-head p,
.lead,
.card p,
.metric-card small,
.flow-card small,
.phone-task span,
.check-list li,
.case-scope,
.case-result,
.faq-a div {
  color: var(--muted);
}

.hero-proof,
.hero-banner,
.card,
.metric-card,
.mock-panel,
.ecosystem-panel,
.phone-shell,
.ecosystem-phone,
.flow-card,
.resource-row,
.case-row,
.quote,
.about-panel,
.form-card,
.delivery-card,
.faq-item {
  border-color: var(--line);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-xs);
}

.hero-banner {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(241, 255, 249, .82)),
    linear-gradient(90deg, rgba(0, 200, 121, .05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 200, 121, .04) 1px, transparent 1px);
  background-size: auto, 34px 34px, 34px 34px;
}

.hero-banner::before {
  background: linear-gradient(115deg, transparent 0%, rgba(0, 200, 121, .11) 48%, transparent 62%);
}

.banner-tabs {
  background: rgba(241, 255, 249, .9);
  border-color: rgba(193, 244, 223, .8);
}

.banner-tab:hover {
  color: var(--green-700);
}

.section-band {
  background: rgba(241, 255, 249, .58);
  border-color: rgba(215, 235, 226, .72);
}

.section-dark {
  background:
    linear-gradient(180deg, rgba(241, 255, 249, .92), rgba(255, 255, 255, .96)),
    var(--green-100);
  color: var(--ink);
  border-top: 1px solid rgba(193, 244, 223, .72);
  border-bottom: 1px solid rgba(193, 244, 223, .72);
}

.section-dark h2,
.section-dark h2[style] {
  color: var(--ink) !important;
}

.section-dark .lead,
.section-dark .lead[style],
.section-dark .check-list li,
.section-dark .check-list li[style] {
  color: var(--muted) !important;
}

.section-dark .mock-panel {
  background: rgba(255, 255, 255, .94);
  border-color: rgba(193, 244, 223, .82);
  box-shadow: 0 16px 40px rgba(0, 80, 48, .08);
}

.section-dark .btn-white {
  color: #fff;
  background: var(--brand-green);
  border: 1px solid var(--brand-green);
  box-shadow: 0 10px 22px rgba(0, 200, 121, .18);
}

.section-dark .btn-white:hover {
  background: var(--blue-700);
  border-color: var(--blue-700);
}

.cta {
  background:
    linear-gradient(135deg, rgba(0, 160, 97, .98), rgba(0, 80, 48, .96)),
    var(--green-700);
}

.site-footer {
  background: #002818;
}

.proof-num,
.dash-kpi strong {
  color: var(--green-700);
}

.icon-box,
.metric-card > span,
.flow-card > span,
.status-icon {
  color: var(--green-700);
  background: var(--green-100);
}

.icon-box.green,
.icon-box.accent,
.tag,
.tag.green,
.tag.accent {
  color: var(--green-700);
  background: var(--green-100);
  border-color: rgba(0, 200, 121, .18);
}

.phone-top,
.delivery-step b,
.toast-icon {
  background: var(--brand-green);
}

.mock-top,
.dashboard-top {
  background: var(--brand-green);
  color: #fff;
}

.table th {
  color: var(--ink-soft);
  background: var(--green-100);
}

.table td,
.table th {
  border-color: var(--line);
}

.card:hover,
.metric-card:hover,
.flow-card:hover,
.mock-panel:hover,
.panel:hover,
.dash-kpi:hover,
.resource-row:hover,
.case-row:hover,
.quote:hover {
  border-color: rgba(0, 200, 121, .42);
  box-shadow: var(--shadow-sm);
}

.back-top {
  background: var(--green-700);
}

.toast {
  border-left-color: var(--brand-green);
}

@media (max-width: 860px) {
  .nav-links a.active {
    background: var(--green-100);
  }

  .hero {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(241, 255, 249, .94)),
      radial-gradient(circle at 70% 12%, rgba(0, 200, 121, .12), transparent 34%);
  }
}