/* ============================================================
   Components CSS v2 — rvatec 視覚 DNA 全面適用
   DNA-1: 巨大アウトライン背景文字
   DNA-2: EN/JP 2段見出しコントラスト
   DNA-3: セクション交互レイアウト
   DNA-4: 強コントラスト帯
   DNA-5: 大胆な余白
   DNA-6: ヒーローレイヤード演出
   DNA-7: スクロール微小パララックス
   ============================================================ */

/* ============================================================
   Demo Banner
   ============================================================ */

/* DEMO bar - sticky 最上部、header とは独立レイヤー */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 101;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-primary-50);
  color: var(--color-brand-primary-900);
  border-bottom: 1px solid var(--color-brand-primary-200);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.demo-banner > .container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}

.demo-banner strong {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background-color: var(--color-brand-primary-700);
  color: #FFFFFF;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
}

/* ============================================================
   Button
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  transform: scale(1.02);
}

/* Primary */
.btn--primary {
  background-color: var(--color-brand-primary-600);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-primary-600);
}

.btn--primary:hover {
  background-color: var(--color-brand-primary-700);
  border-color: var(--color-brand-primary-700);
  box-shadow: var(--shadow-md);
}

/* Outline */
.btn--outline {
  background-color: transparent;
  color: var(--color-brand-primary-600);
  border-color: var(--color-brand-primary-600);
}

.btn--outline:hover {
  background-color: var(--color-brand-primary-50);
  box-shadow: var(--shadow-sm);
}

/* Ghost（ダーク帯コンテキスト用） */
.btn--ghost {
  background-color: var(--color-text-inverse);
  color: var(--color-brand-primary-700);
  border-color: var(--color-text-inverse);
}

.btn--ghost:hover {
  background-color: var(--color-brand-primary-50);
  box-shadow: var(--shadow-md);
}

/* Large */
.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
  min-height: 64px;
}

/* ============================================================
   DNA-1: 巨大アウトライン背景文字 — section__watermark
   rvatec: all_bg_copy パターン
   ============================================================ */

.section__watermark {
  position: absolute;
  bottom: -0.05em;
  right: -2vw;
  font-size: clamp(8rem, 20vw, 18rem);
  font-weight: 900;
  font-family: var(--font-family-sans);
  /* フォールバック (Firefox 旧版・stroke 非対応): 薄い塗りで存在感を担保 */
  color: rgba(59, 130, 246, 0.07);
  -webkit-text-stroke: 3px rgba(59, 130, 246, 0.20);
  letter-spacing: -0.05em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 0;
  line-height: 0.85;
  /* DNA-7: パララックスの transform はJS側で付与 */
  will-change: transform;
}

/* stroke 対応ブラウザでは塗りを透明化（stroke のみ見せる） */
@supports (-webkit-text-stroke: 1px currentColor) {
  .section__watermark {
    color: transparent;
  }
}

/* DNA-4 逆配色帯の中でのウォーターマーク */
.section__watermark--light {
  color: rgba(255, 255, 255, 0.08);
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.28);
}

@supports (-webkit-text-stroke: 1px currentColor) {
  .section__watermark--light {
    color: transparent;
  }
}

/* ============================================================
   DNA-2: EN/JP 2段見出し — section-heading
   rvatec: all_title_sec パターン
   ============================================================ */

.section-heading {
  margin-bottom: var(--space-12);
}

.section-heading--center {
  text-align: center;
}

.section-heading__en {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.3em;
  color: var(--color-brand-primary-500);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  position: relative;
}

/* 左寄せの時だけ縦ライン装飾 */
.section-heading:not(.section-heading--center) .section-heading__en {
  padding-left: var(--space-8);
}

.section-heading:not(.section-heading--center) .section-heading__en::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--space-6);
  height: 1px;
  background: var(--color-brand-primary-500);
}

.section-heading--center .section-heading__en::after {
  content: '';
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--color-brand-primary-500);
  margin: var(--space-3) auto 0;
}

.section-heading__jp {
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text-heading);
  margin-bottom: 0;
}

/* インバース帯（support など）内の見出し */
.section--inverse .section-heading__jp {
  color: var(--color-text-inverse);
}

.section--inverse .section-heading__en {
  color: rgba(255, 255, 255, 0.7);
}

.section--inverse .section-heading__en::before,
.section--inverse .section-heading__en::after {
  background: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   DNA-5: セクション共通 — 大きな余白と overflow 制御
   rvatec: 上下 padding 100-160px 相当
   ============================================================ */

.section {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 12vw, 10rem) 0;
}

/* ============================================================
   DNA-4: 強コントラスト帯 — section--inverse
   rvatec: top_strength パターン（濃ネイビーグラデ）
   ============================================================ */

.section--inverse {
  background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 50%, #2563EB 100%);
  color: var(--color-text-inverse);
}

/* ============================================================
   DNA-3: セクション交互レイアウト — section__split
   rvatec: top_content / top_content_left パターン
   ============================================================ */

.section__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 960px) {
  .section__split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }

  /* 反転レイアウト: 画像を右、テキストを左に */
  .section__split--reverse .section__visual {
    order: 2;
  }

  .section__split--reverse .section__text {
    order: 1;
  }
}

/* ============================================================
   ビジュアルブロック（CSS グラデで画像代替）
   ============================================================ */

.section__visual {
  position: relative;
}

.visual-block {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

/* About: 青系グラデ */
.visual-block--about {
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 40%, #3B82F6 70%, #60A5FA 100%);
}

/* Courses: ディープネイビー + 青 */
.visual-block--courses {
  background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 50%, #2563EB 100%);
}

.visual-block__num {
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.visual-block__label {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.2em;
}

.visual-block__icon {
  width: 80px;
  height: 80px;
  opacity: 0.9;
}

.visual-block__icon svg {
  width: 100%;
  height: 100%;
}

/* Courses ビジュアル: 数字統計 */
.visual-block__stats {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.visual-block__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.visual-block__stat-num {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--color-text-inverse);
  line-height: 1;
}

.visual-block__stat-num sup {
  font-size: 0.5em;
  vertical-align: super;
}

.visual-block__stat-label {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.1em;
}

/* ============================================================
   Section-specific background colors
   ============================================================ */

.section--about   { background-color: var(--color-surface-base); }
.section--courses { background-color: var(--color-surface-raised); }
/* section--support uses section--inverse */
.section--cases   { background-color: var(--color-surface-base); }
.section--pricing { background-color: var(--color-surface-raised); }
.section--news    { background-color: var(--color-surface-base); }
.section--faq     { background-color: var(--color-surface-raised); }

/* ============================================================
   About: 大きな数字 + 短文（カード枠なし）
   ============================================================ */

.about-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
  position: relative;
  z-index: 1;
}

.about-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border-subtle);
}

.about-point:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.about-point__num {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--color-brand-primary-200);
  line-height: 1;
  letter-spacing: -0.04em;
  user-select: none;
  flex-shrink: 0;
}

.about-point__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-snug);
}

.about-point__text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

/* （旧 .grid-3 / .grid-4 は v2 で section__split / 個別 grid に置換され未使用となったため削除） */

/* ============================================================
   Header
   ============================================================ */

/* ============================================================
   Header — 1 行横並び (Logo | Nav | Tel + CTA + Hamburger)
   ユーザー指示:「PC では必ず 1 行横並び。nav は縦折り返ししない。
   flex-wrap: nowrap、white-space: nowrap、min-width: 0」
   ============================================================ */
.site-header {
  position: sticky;
  top: 32px; /* DEMO bar 下に sticky */
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 35, 70, 0.08);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  max-width: 1280px;
  height: 76px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
}

.site-header__logo {
  flex: 0 0 auto;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  letter-spacing: -0.01em;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.site-header__logo span {
  color: var(--color-brand-primary-500);
}

/* Global Nav (PC only): 横一列 */
.global-nav {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 1024px) {
  .global-nav {
    display: flex;
  }
}

.global-nav ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.global-nav__item {
  white-space: nowrap;
  line-height: 1;
}

.global-nav__item a {
  display: inline-block;
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: color var(--duration-fast) var(--easing-standard);
}

.global-nav__item a:hover {
  color: var(--color-brand-primary-600);
}

/* Header right area */
.site-header__right {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(10px, 1.5vw, 18px);
  white-space: nowrap;
}

.site-header__tel {
  display: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  line-height: 1;
  margin: 0;
}

.site-header__tel a {
  color: inherit;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .site-header__tel {
    display: block;
  }
}

.site-header__cta {
  display: none;
  white-space: nowrap;
  min-height: 44px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 700;
}

@media (min-width: 768px) {
  .site-header__cta {
    display: inline-flex;
  }
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
}

@media (min-width: 1024px) {
  .hamburger {
    display: none;
  }
}

.hamburger__line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text-primary);
  border-radius: var(--radius-full);
  transition:
    transform var(--duration-normal) var(--easing-standard),
    opacity var(--duration-fast) var(--easing-standard);
}

.hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 110;
  visibility: hidden;
}

.drawer.is-open {
  visibility: visible;
}

.drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.5);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-standard);
}

.drawer.is-open .drawer__overlay {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100%;
  background-color: var(--color-surface-base);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--easing-decelerate);
  overflow-y: auto;
  padding: var(--space-16) var(--space-6) var(--space-8);
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.drawer-nav__item a {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ============================================================
   Tab（講座選択）
   ============================================================ */

.tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.tab-btn {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border: 2px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  cursor: pointer;
  background-color: var(--color-surface-base);
  transition:
    color var(--duration-fast),
    border-color var(--duration-fast),
    background-color var(--duration-fast);
}

.tab-btn:hover {
  color: var(--color-brand-primary-600);
  border-color: var(--color-brand-primary-300);
}

.tab-btn.is-active {
  color: var(--color-text-inverse);
  background-color: var(--color-brand-primary-600);
  border-color: var(--color-brand-primary-600);
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .tab-panel.is-active {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Course card */
.course-card {
  background-color: var(--color-surface-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition:
    transform var(--duration-normal) var(--easing-standard),
    box-shadow var(--duration-normal) var(--easing-standard);
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.course-card__category {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-primary-600);
  background-color: var(--color-brand-primary-100);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.course-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  line-height: var(--line-height-snug);
  margin-bottom: var(--space-2);
}

.course-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

/* ============================================================
   Support strength — インバース帯用カード（DNA-4）
   ============================================================ */

.support-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .support-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .support-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.support-item {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  backdrop-filter: blur(4px);
  transition:
    background-color var(--duration-normal) var(--easing-standard),
    transform var(--duration-normal) var(--easing-standard);
}

.support-item:hover {
  background-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-4px);
}

.support-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-text-inverse);
  margin: 0 auto var(--space-5);
}

.support-item__icon svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.support-item__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-3);
}

.support-item__text {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.8);
  line-height: var(--line-height-normal);
}

.support__cta {
  margin-top: var(--space-16);
  text-align: center;
  position: relative;
  z-index: 1;
}

.support__cta-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-6);
}

/* ============================================================
   Cases — 編集型（画像メイン + テキスト最小）
   ============================================================ */

.cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .cases-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.case-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-normal) var(--easing-standard),
    box-shadow var(--duration-normal) var(--easing-standard);
}

.case-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.case-item__visual {
  flex-shrink: 0;
}

.case-visual {
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--space-6);
  position: relative;
}

.case-visual--a {
  background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 60%, #2563EB 100%);
}

.case-visual--b {
  background: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 60%, #60A5FA 100%);
}

.case-visual--c {
  background: linear-gradient(135deg, #1E40AF 0%, #2563EB 50%, #3B82F6 100%);
}

.case-visual__label {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-1);
}

.case-visual__type {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.03em;
  line-height: 1;
}

.case-item__body {
  padding: var(--space-6);
  background-color: var(--color-surface-base);
  border: 1px solid var(--color-border-subtle);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  flex: 1;
}

.case-item__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  line-height: var(--line-height-snug);
  margin-bottom: var(--space-3);
}

.case-item__result {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-4);
}

.case-item__link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-primary-600);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: gap var(--duration-fast);
  text-decoration: none;
}

.case-item__link:hover {
  gap: var(--space-3);
}

/* ============================================================
   Accordion（FAQ）
   ============================================================ */

.accordion {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.accordion__item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.accordion__item:last-child {
  border-bottom: none;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-5) var(--space-6);
  text-align: left;
  background-color: var(--color-surface-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color var(--duration-fast);
  gap: var(--space-4);
}

.accordion__trigger:hover {
  background-color: var(--color-brand-primary-50);
}

.accordion__trigger[aria-expanded="true"] {
  color: var(--color-brand-primary-700);
  background-color: var(--color-brand-primary-50);
}

.accordion__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-brand-primary-500);
  transition: transform var(--duration-normal) var(--easing-standard);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(180deg);
}

.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-slow) var(--easing-decelerate);
}

.accordion__panel.is-open {
  max-height: 400px;
}

.accordion__content {
  padding: var(--space-4) var(--space-6) var(--space-5);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  background-color: var(--color-surface-raised);
  border-top: 1px solid var(--color-border-subtle);
}

.accordion__q-label {
  color: var(--color-brand-primary-600);
  font-weight: var(--font-weight-bold);
  margin-right: var(--space-2);
}

.accordion__a-label {
  color: var(--color-status-success);
  font-weight: var(--font-weight-bold);
  margin-right: var(--space-2);
}

/* ============================================================
   News list
   ============================================================ */

.news-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  z-index: 1;
}

.news-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-surface-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition:
    background-color var(--duration-fast),
    box-shadow var(--duration-fast),
    transform var(--duration-normal);
  text-decoration: none;
  color: inherit;
}

.news-item:hover {
  background-color: var(--color-brand-primary-50);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.news-item__date {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
  min-width: 6rem;
}

.news-item__title {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.news-item__arrow {
  flex-shrink: 0;
  color: var(--color-brand-primary-500);
  font-size: 1.25rem;
  margin-left: auto;
}

/* ============================================================
   Pricing table
   ============================================================ */

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-card {
  background-color: var(--color-surface-base);
  border: 2px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  text-align: center;
  transition:
    transform var(--duration-normal) var(--easing-standard),
    box-shadow var(--duration-normal) var(--easing-standard);
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.pricing-card--featured {
  border-color: var(--color-brand-primary-500);
  background: linear-gradient(135deg, var(--color-brand-primary-50), var(--color-surface-base));
  position: relative;
}

.pricing-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-brand-primary-600);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pricing-card__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-4);
}

.pricing-card__price {
  font-size: var(--font-size-price);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary-700);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.pricing-card__unit {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
}

.pricing-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-6);
}

.pricing-card__features {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.pricing-feature__check {
  flex-shrink: 0;
  color: var(--color-status-success);
  font-weight: var(--font-weight-bold);
}

.pricing-feature--disabled {
  color: var(--color-text-muted);
}

.pricing-feature--disabled .pricing-feature__check {
  color: var(--color-text-muted);
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding-block: var(--space-16) var(--space-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.footer-col__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary-300);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.footer-col__logo {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-3);
}

.footer-col__logo span {
  color: var(--color-brand-primary-400);
}

.footer-col__company {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-4);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-nav__item a {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--duration-fast);
}

.footer-nav__item a:hover {
  color: var(--color-text-inverse);
}

.footer-copy {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-8);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

/* ============================================================
   Utility
   ============================================================ */

.text-center { text-align: center; }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }

.inline-link {
  color: var(--color-brand-primary-600);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast);
}

.inline-link:hover {
  color: var(--color-brand-primary-800);
}