/* ── Navigation ─────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.nav__inner {
  display: flex; align-items: center; gap: var(--space-8);
  height: var(--nav-height);
}
.nav__logo img { height: 48px; width: auto; }
.nav__links {
  display: flex; align-items: center; gap: var(--space-6);
  margin-left: auto;
}
.nav__link {
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-text); transition: color var(--transition);
}
.nav__link:hover { color: var(--color-accent); }
.nav__cta { margin-left: var(--space-4); }
.nav__hamburger {
  display: none; flex-direction: column; gap: var(--space-1);
  padding: var(--space-2); margin-left: auto;
}
.nav__hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--color-text); transition: var(--transition);
}

/* ── Button ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; border-radius: var(--radius-md);
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-accent); color: var(--color-white);
  padding: var(--space-3) var(--space-6);
}
.btn--primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
.btn--secondary {
  background: transparent; color: var(--color-accent);
  border: 2px solid var(--color-accent);
  padding: calc(var(--space-3) - 2px) calc(var(--space-6) - 2px);
}
.btn--secondary:hover { background: var(--color-accent); color: var(--color-white); }
.btn--sm { font-size: var(--text-sm); padding: var(--space-2) var(--space-4); }
.btn--lg { font-size: var(--text-lg); padding: var(--space-4) var(--space-10); }

/* ── Page offset for fixed nav ───────────────── */
body { padding-top: var(--nav-height); }

/* ── Mobile nav ─────────────────────────────── */
@media (max-width: 768px) {
  .nav__links {
    display: none; flex-direction: column; gap: var(--space-4);
    position: absolute; top: var(--nav-height); left: 0; right: 0;
    background: var(--color-white); padding: var(--space-6);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }
  .nav__links.is-open { display: flex; }
  .nav__hamburger { display: flex; }
  .nav__cta { display: none; }
}

/* ── Hero ───────────────────────────────────── */
.hero {
  background: var(--color-bg);
  padding: var(--space-24) 0 var(--space-20);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.hero__eyebrow {
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-accent); letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}
.hero__headline {
  font-size: var(--text-4xl); font-weight: 900;
  color: var(--color-primary); line-height: 1.3;
  margin-bottom: var(--space-6);
}
.hero__sub {
  font-size: var(--text-lg); color: var(--color-text-muted);
  margin-bottom: var(--space-10); line-height: 1.8;
}
.hero__checklist {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-10);
}
.hero__checklist-lead {
  font-size: var(--text-sm); font-weight: 700;
  color: var(--color-text-muted); margin-bottom: var(--space-4);
}
.hero__checklist ul { display: flex; flex-direction: column; gap: var(--space-3); }
.hero__checklist li {
  font-size: var(--text-sm); padding-left: var(--space-6);
  position: relative;
}
.hero__checklist li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--color-accent); font-weight: 700;
}
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero__image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
}

/* ── Compare Table ──────────────────────────── */
.compare-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-size: var(--text-xs);
}
.compare-table__col {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.compare-table__col--highlight {
  border-color: #dc2626;
  box-shadow: 0 4px 20px rgba(220,38,38,0.18);
}
.compare-table__head {
  background: var(--color-bg);
  padding: 10px 10px 8px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.compare-table__col--highlight .compare-table__head {
  background: #dc2626;
  border-bottom-color: #dc2626;
}
.compare-table__icon { font-size: 20px; display: block; margin-bottom: 4px; }
.compare-table__label {
  font-size: 13px;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1.2;
}
.compare-table__col--highlight .compare-table__label { color: #fff; font-family: var(--font-en); }
.compare-table__sub {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 3px;
  line-height: 1.4;
}
.compare-table__col--highlight .compare-table__sub { color: rgba(255,255,255,0.85); }
.compare-table__col--highlight .compare-table__sub strong { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.compare-table__rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.compare-table__rows li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  height: 30px;
  border-bottom: 1px solid var(--color-border);
  gap: 4px;
}
.compare-table__rows li:last-child { border-bottom: none; }
.compare-table__item-label { font-size: 11px; color: var(--color-text); white-space: nowrap; }
.compare-table__col--highlight .compare-table__item-label { font-weight: 500; }

/* marks */
.mark { font-size: 13px; font-weight: 700; flex-shrink: 0; line-height: 1; }
.mark--tri        { color: #d97706; }
.mark--circle     { color: #2563eb; }
.mark--circle-dbl { color: #dc2626; }
.mark--cross      { color: #94a3b8; }
.mark--check      { color: #dc2626; font-size: 15px; }

.compare-table__footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: 8px 10px;
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.4;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.compare-table__footer--highlight {
  background: #dc2626;
  border-top-color: #dc2626;
  color: rgba(255,255,255,0.9);
}
.compare-table__footer--highlight strong { color: #fff; font-size: 12px; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__content { order: 1; }
  .hero__image { order: 2; }
  .hero__image img { max-height: 280px; object-fit: cover; }
  .hero__headline { font-size: var(--text-3xl); }
}
@media (max-width: 480px) {
  .hero__headline { font-size: var(--text-2xl); }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { text-align: center; }
}

/* ── Section common ─────────────────────────── */
.section-header { text-align: center; margin-bottom: var(--space-16); }
.section-eyebrow {
  font-size: var(--text-sm); font-weight: 700;
  color: var(--color-accent); letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: var(--space-3);
}
.section-title {
  font-size: var(--text-2xl); font-weight: 900;
  color: var(--color-primary); line-height: 1.3;
}
.section-lead {
  font-size: var(--text-lg); color: var(--color-text-muted);
  margin-top: var(--space-4); line-height: 1.8;
}

/* ── Promises ───────────────────────────────── */
.promises { padding: var(--space-24) 0; background: var(--color-primary); }
.promises .section-eyebrow { color: var(--color-accent); opacity: 0.9; }
.promises .section-title    { color: var(--color-white); }
.promises__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.promise-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
}
.promise-card__number {
  font-family: var(--font-en); font-size: var(--text-3xl);
  font-weight: 700; color: var(--color-accent);
  margin-bottom: var(--space-4); line-height: 1;
}
.promise-card__title { font-size: var(--text-xl); font-weight: 900; color: var(--color-white); margin-bottom: var(--space-4); }
.promise-card__body  { font-size: var(--text-sm); color: var(--color-text-light); line-height: 1.9; }
@media (max-width: 768px) {
  .promises__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ── Audience ───────────────────────────────── */
.audience { padding: var(--space-20) 0; background: var(--color-bg); }
.audience__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.audience-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.audience-card__icon { font-size: 32px; }
.audience-card__title { font-size: var(--text-base); font-weight: 700; color: var(--color-primary); }
.audience-card__body { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; }
@media (max-width: 768px) { .audience__grid { grid-template-columns: 1fr; } }

/* ── Works ──────────────────────────────────── */
.works { padding: var(--space-24) 0; background: var(--color-white); }
.works__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-bottom: var(--space-10); }
.work-item { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); transition: box-shadow var(--transition); }
.work-item:hover { box-shadow: var(--shadow-md); }
.work-item__icon { font-size: 32px; margin-bottom: var(--space-4); }
.work-item__title { font-size: var(--text-base); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-2); }
.work-item__body  { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.8; }
.works__note { background: #eff6ff; border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-6); font-size: var(--text-sm); color: var(--color-text); line-height: 1.8; }
@media (max-width: 768px) { .works__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .works__grid { grid-template-columns: 1fr; } }

/* ── Voices ─────────────────────────────────── */
.voices { padding: var(--space-24) 0; background: var(--color-bg); }
.voices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.voice-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-sm); }
.voice-card__quote { font-size: var(--text-sm); line-height: 1.9; color: var(--color-text); margin-bottom: var(--space-6); position: relative; padding-top: var(--space-6); }
.voice-card__quote::before { content: '\201C'; position: absolute; top: -8px; left: -4px; font-size: 48px; color: var(--color-accent); opacity: 0.3; font-family: Georgia, serif; line-height: 1; }
.voice-card__footer { display: flex; flex-direction: column; gap: var(--space-1); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.voice-card__role  { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; }
.voice-card__usage { font-size: var(--text-xs); font-weight: 700; color: var(--color-accent); font-family: var(--font-en); }
@media (max-width: 768px) { .voices__grid { grid-template-columns: 1fr; } }

/* ── Price ──────────────────────────────────── */
.price { padding: var(--space-24) 0; background: var(--color-white); }
.price__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: start; }
.price-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); position: relative; }
.price-card--featured { border-color: var(--color-accent); box-shadow: var(--shadow-lg); transform: translateY(-8px); }
.price-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--color-accent); color: var(--color-white); font-size: var(--text-xs); font-weight: 700; padding: 2px 12px; border-radius: 99px; }
.price-card__label { font-size: var(--text-base); font-weight: 900; color: var(--color-primary); }
.price-card__desc  { font-size: var(--text-sm); color: var(--color-text-muted); }
.price-card__amount { display: flex; align-items: baseline; gap: var(--space-1); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.price-card__amount--contact { justify-content: center; }
.price-card__from { font-size: var(--text-xs); color: var(--color-text-muted); }
.price-card__num  { font-size: var(--text-2xl); font-weight: 900; color: var(--color-primary); font-family: var(--font-en); }
.price-card__unit { font-size: var(--text-sm); color: var(--color-text-muted); }
.price-card__volume { font-size: var(--text-xs); color: var(--color-accent); font-weight: 700; }
.price-card__features { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); min-height: 80px; }
.price-card__features li { padding-left: var(--space-5); position: relative; }
.price-card__features li::before { content: '\2013'; position: absolute; left: 0; color: var(--color-accent); }
@media (max-width: 768px) { .price__grid { grid-template-columns: 1fr; } .price-card--featured { transform: none; } }

/* ── Team ───────────────────────────────────── */
.team { padding: var(--space-24) 0; background: var(--color-bg); }
.team__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.team-card { display: flex; gap: var(--space-6); align-items: flex-start; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); }
.team-card__avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.team-card__avatar .material-icons { font-family: 'Material Icons'; font-size: 32px; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; }
.team-card__name { font-size: var(--text-base); font-weight: 700; color: var(--color-primary); margin-bottom: 2px; }
.team-card__role { font-size: var(--text-xs); color: var(--color-accent); font-weight: 500; margin-bottom: var(--space-3); }
.team-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.8; }
@media (max-width: 768px) { .team__grid { grid-template-columns: 1fr; } }

/* ── Mid CTA ────────────────────────────────── */
.mid-cta { background: var(--color-accent); padding: var(--space-10) 0; }
.mid-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.mid-cta__text { font-size: var(--text-lg); font-weight: 700; color: #fff; }
.mid-cta .btn--primary { background: #fff; color: var(--color-accent); border-color: #fff; }
.mid-cta .btn--primary:hover { background: #f0f4ff; }
@media (max-width: 600px) { .mid-cta__inner { flex-direction: column; text-align: center; } }

/* ── Company ────────────────────────────────── */
.company { padding: var(--space-24) 0; background: var(--color-white); }
.company__list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.company__row { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.company__row dt { font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); }
.company__row dd { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.8; }
.company__row dd a { color: var(--color-accent); text-decoration: underline; }
@media (max-width: 600px) { .company__row { grid-template-columns: 1fr; gap: var(--space-1); } }

/* ── Articles ───────────────────────────────── */
.articles { padding: var(--space-24) 0; background: var(--color-white); }
.articles__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.article-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: box-shadow var(--transition), border-color var(--transition); background: var(--color-bg); }
.article-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.article-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-md); }
.article-card__title { font-size: var(--text-base); font-weight: 700; color: var(--color-primary); line-height: 1.5; }
.article-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.8; flex: 1; }
.article-card__link { font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); margin-top: auto; }
@media (max-width: 768px) { .articles__grid { grid-template-columns: 1fr; } }

/* ── Flow ───────────────────────────────────── */
.flow { padding: var(--space-24) 0; background: var(--color-white); }
.flow__list { list-style: none; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); counter-reset: none; }
.flow__item { display: flex; gap: var(--space-8); align-items: flex-start; padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); position: relative; }
.flow__item:not(:last-child)::after { content: ''; position: absolute; left: 39px; bottom: calc(-1 * var(--space-6) + 4px); width: 2px; height: calc(var(--space-6) - 4px); background: var(--color-border); }
.flow__num { font-size: var(--text-2xl); font-weight: 900; color: var(--color-accent); line-height: 1; flex-shrink: 0; width: 48px; text-align: center; }
.flow__title { font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-2); }
.flow__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.8; }
@media (max-width: 768px) { .flow__item::after { display: none; } }

/* ── FAQ ────────────────────────────────────── */
.faq { padding: var(--space-24) 0; background: var(--color-bg); }
.faq__list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-2); }
.faq__item { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.faq__q { font-size: var(--text-base); font-weight: 700; color: var(--color-primary); padding: var(--space-6); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); transition: background var(--transition); }
.faq__q::after { content: '+'; font-size: var(--text-xl); font-weight: 400; color: var(--color-accent); flex-shrink: 0; line-height: 1; transition: transform var(--transition); }
.faq__item.is-open .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { background: var(--color-bg); }
.faq__a { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.9; padding: 0 var(--space-6) var(--space-6); display: none; }
.faq__item.is-open .faq__a { display: block; }

/* ── CTA Section ────────────────────────────── */
.cta-section { padding: var(--space-24) 0; background: var(--color-primary); }
.cta-section__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.cta-section__title { font-size: var(--text-2xl); font-weight: 900; color: var(--color-white); line-height: 1.5; margin-bottom: var(--space-6); }
.cta-section__body  { font-size: var(--text-base); color: var(--color-text-light); line-height: 1.9; margin-bottom: var(--space-12); }

/* ── Contact Form ───────────────────────────── */
.contact-form { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-10); text-align: left; display: flex; flex-direction: column; gap: var(--space-6); }
.contact-form__group { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-form__group label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.required { color: var(--color-danger); }
.contact-form__group input,
.contact-form__group select,
.contact-form__group textarea { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font: inherit; font-size: var(--text-sm); color: var(--color-text); transition: border-color var(--transition); width: 100%; }
.contact-form__group input:focus,
.contact-form__group select:focus,
.contact-form__group textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.contact-form__privacy { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; }
.contact-form__privacy a { color: var(--color-accent); text-decoration: underline; }
.contact-form__submit { width: 100%; justify-content: center; }

/* ── Footer ─────────────────────────────────── */
.footer { background: #0f1f33; padding: var(--space-16) 0 var(--space-10); }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; }
.footer__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.footer__brand img { filter: brightness(0) invert(1); opacity: 0.9; }
.footer__tagline { font-size: var(--text-sm); color: var(--color-text-light); }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); font-size: var(--text-sm); color: var(--color-text-light); }
.footer__nav a:hover { color: var(--color-white); }
.footer__legal { font-size: var(--text-xs); color: var(--color-text-muted); }
.footer__legal a { color: var(--color-text-light); }
.footer__legal a:hover { color: var(--color-white); }
.footer__copy { font-size: var(--text-xs); color: var(--color-text-muted); }