/* ========================================================================
   Buttons
   ======================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:var(--radius-pill);
  font-weight:700; font-size:.95rem; font-family:var(--font-body);
  border:1px solid transparent; white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--color-primary); color:#fff; box-shadow:0 10px 24px -8px rgba(21,118,110,.55); }
.btn-primary:hover{ background:var(--color-primary-strong); transform:translateY(-1px); }
.btn-secondary{ background:var(--color-surface); color:var(--color-ink); border-color:var(--color-border); }
.btn-secondary:hover{ border-color:var(--ink-300); transform:translateY(-1px); }
.btn-accent{ background:var(--color-accent); color:#fff; box-shadow:0 10px 24px -8px rgba(213,88,63,.5); }
.btn-accent:hover{ background:var(--coral-600); transform:translateY(-1px); }
.btn-light{ background:#fff; color:var(--navy-900); }
.btn-light:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-outline-light:hover{ background:rgba(255,255,255,.1); }
.btn-sm{ padding:9px 16px; font-size:.86rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

.link-arrow{ display:inline-flex; align-items:center; gap:7px; font-weight:700; color:var(--color-primary-strong); }
.link-arrow svg{ transition:transform var(--dur-fast) var(--ease); }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ========================================================================
   Grids
   ======================================================================== */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } }

/* ========================================================================
   Cards: feature / audience / capability
   ======================================================================== */
.feature-card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:26px 24px; transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  position:relative;
}
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--teal-200); }
.feature-card-icon{
  width:48px; height:48px; border-radius:13px; background:var(--color-primary-soft); color:var(--color-primary-strong);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.feature-card h3{ margin-bottom:8px; font-size:1.08rem; }
.feature-card p{ font-size:.94rem; }
.feature-card-tag{
  position:absolute; top:22px; right:22px; font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--color-primary-strong); background:var(--color-primary-soft); padding:4px 10px; border-radius:var(--radius-pill);
}

.audience-card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:32px 28px; display:flex; flex-direction:column; height:100%;
}
.audience-card-icon{
  width:54px; height:54px; border-radius:15px; background:var(--navy-900); color:var(--teal-200);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.audience-card h3{ font-size:1.3rem; margin-bottom:10px; }
.audience-card > p{ margin-bottom:18px; }
.check-list{ display:flex; flex-direction:column; gap:11px; margin-bottom:22px; flex-grow:1; }
.check-list li{ display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:var(--color-text); }
.check-list li svg{ color:var(--color-primary); margin-top:3px; flex-shrink:0; }

.capability-tile{ display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:var(--radius-md); background:var(--color-surface-alt); }
.capability-tile svg{ color:var(--color-primary-strong); flex-shrink:0; margin-top:2px; width:24px; height:24px; }
.capability-tile h4{ margin-bottom:4px; font-size:.96rem; }
.capability-tile p{ font-size:.86rem; margin:0; }

/* ========================================================================
   Page hero
   ======================================================================== */
.page-hero{
  padding-block:clamp(52px,6vw,96px) clamp(40px,4vw,64px);
  background:
    radial-gradient(1100px 480px at 15% -10%, var(--teal-50), transparent 60%),
    var(--color-bg);
  border-bottom:1px solid var(--color-border);
}
.page-hero h1{ max-width:820px; }
.page-hero-desc{ font-size:1.14rem; max-width:680px; margin-top:14px; }
.page-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.breadcrumb{ font-size:.84rem; color:var(--color-text-muted); margin-bottom:16px; }
.breadcrumb a:hover{ color:var(--color-primary-strong); }
.breadcrumb .sep{ margin-inline:8px; color:var(--ink-300); }

/* ========================================================================
   CTA band
   ======================================================================== */
.cta-band{ background:linear-gradient(135deg, var(--navy-900), var(--teal-800)); color:#fff; padding-block:clamp(48px,5vw,80px); margin-block:0; }
.cta-band-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.cta-band h2{ color:#fff; max-width:520px; }
.cta-band p{ color:rgba(255,255,255,.78); max-width:480px; margin-top:10px; }
.cta-band-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ========================================================================
   Accordion (FAQ)
   ======================================================================== */
.accordion{ display:flex; flex-direction:column; gap:12px; }
.accordion-item{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; }
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:none; border:none; padding:19px 22px; text-align:left;
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--color-ink);
}
.accordion-chevron{ flex-shrink:0; transition:transform var(--dur-base) var(--ease); color:var(--color-text-muted); }
.accordion-item.is-open .accordion-chevron{ transform:rotate(180deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height var(--dur-base) var(--ease); }
.accordion-panel-inner{ padding:0 22px 20px; }
.accordion-item.is-open .accordion-panel{ max-height:600px; }

/* ========================================================================
   Pricing
   ======================================================================== */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
@media (max-width:960px){ .pricing-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.pricing-card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:30px 26px; display:flex; flex-direction:column;
}
.pricing-card.is-featured{ border-color:var(--color-primary); box-shadow:var(--shadow-lg); position:relative; background:linear-gradient(180deg, var(--teal-50), var(--color-surface) 30%); }
.pricing-badge{ position:absolute; top:-13px; left:26px; background:var(--color-primary); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:6px 14px; border-radius:var(--radius-pill); }
.pricing-card h3{ font-size:1.2rem; }
.pricing-card .plan-audience{ font-size:.86rem; color:var(--color-text-muted); margin-bottom:18px; }
.pricing-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:6px; }
.pricing-price .amount{ font-family:var(--font-display); font-size:2.4rem; font-weight:800; color:var(--color-ink); }
.pricing-price .period{ color:var(--color-text-muted); font-size:.9rem; }
.pricing-note{ font-size:.82rem; color:var(--color-text-muted); margin-bottom:22px; }
.pricing-features{ display:flex; flex-direction:column; gap:11px; margin-bottom:24px; flex-grow:1; }
.pricing-features li{ display:flex; gap:9px; align-items:flex-start; font-size:.9rem; }
.pricing-features li svg{ color:var(--color-primary); flex-shrink:0; margin-top:3px; }
.pricing-disclaimer{
  margin-top:20px; font-size:.85rem; color:var(--color-text-muted); background:var(--color-surface-alt);
  border:1px solid var(--color-border); border-radius:var(--radius-md); padding:16px 18px;
}

/* ========================================================================
   Forms
   ======================================================================== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.form-field{ display:flex; flex-direction:column; gap:7px; }
.form-field.full{ grid-column:1/-1; }
.form-field label{ font-size:.86rem; font-weight:700; color:var(--color-ink); }
.form-field .req{ color:var(--color-accent); }
.form-field input, .form-field select, .form-field textarea{
  border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:12px 14px;
  background:var(--color-surface); color:var(--color-text); font-size:.95rem;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--color-primary); box-shadow:0 0 0 4px var(--color-primary-soft);
}
.form-field textarea{ resize:vertical; min-height:120px; }
.form-hint{ font-size:.78rem; color:var(--color-text-muted); }
.form-panel{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,40px); box-shadow:var(--shadow-md);
}
.form-success{
  display:none; text-align:center; padding:40px 20px;
}
.form-success.is-visible{ display:block; }
.form-success-icon{
  width:64px; height:64px; border-radius:50%; background:var(--teal-50); color:var(--color-primary-strong);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.form-demo-notice{
  display:flex; gap:10px; align-items:flex-start; font-size:.83rem; color:var(--color-text-muted);
  background:var(--color-surface-alt); border:1px dashed var(--color-border); border-radius:var(--radius-md);
  padding:13px 16px; margin-bottom:22px;
}
.form-demo-notice svg{ flex-shrink:0; color:var(--amber-400); margin-top:1px; }

/* ========================================================================
   Badges / tags / lists
   ======================================================================== */
.tag-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{ font-size:.8rem; font-weight:700; padding:7px 14px; border-radius:var(--radius-pill); background:var(--color-surface-alt); border:1px solid var(--color-border); color:var(--color-text); }

.stat-strip{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; }
.stat-strip > div{ flex:1 1 200px; padding:22px 24px; border-right:1px solid var(--color-border); }
.stat-strip > div:last-child{ border-right:none; }
.stat-strip h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-muted); margin-bottom:6px; }
.stat-strip p{ margin:0; font-size:.94rem; color:var(--color-ink); font-weight:600; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; gap:36px; } }
.two-col.reverse .col-media{ order:2; }
@media (max-width:900px){ .two-col.reverse .col-media{ order:0; } }

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

.role-badge{
  display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700;
  padding:6px 12px; border-radius:var(--radius-pill); background:var(--navy-900); color:var(--teal-200);
}