:root {
  --rt-primary: #4e72a8;
  --rt-primary-dark: #3d5d8a;
  --rt-teal: #66a39e;
  --rt-purple: #756fa5;
  --rt-bg-start: #f3f6fc;
  --rt-bg-end: #fcfcff;
  --rt-text: rgba(0, 0, 0, 0.88);
  --rt-text-muted: rgba(0, 0, 0, 0.62);
  --rt-card-border: rgba(0, 0, 0, 0.08);
  --rt-shadow: 0 0.5rem 1.5rem rgba(78, 114, 168, 0.12);
  /* sticky ナビ（バッジ含む）より少し余裕を見たオフセット */
  --rt-sticky-offset: 5.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --rt-bg-start: #0f1421;
    --rt-bg-end: #161e2e;
    --rt-text: rgba(255, 255, 255, 0.92);
    --rt-text-muted: rgba(255, 255, 255, 0.72);
    --rt-card-border: rgba(255, 255, 255, 0.12);
    --rt-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
  }
}

html {
  scroll-behavior: smooth;
}

/* ページ内リンク先が sticky ヘッダーに隠れないようにする（#top には付けない） */
#features,
#pricing,
#screenshots,
#ipad {
  scroll-margin-top: var(--rt-sticky-offset);
}

body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    system-ui, -apple-system, sans-serif;
  color: var(--rt-text);
  background: linear-gradient(
    145deg,
    var(--rt-bg-start) 0%,
    var(--rt-bg-end) 55%,
    var(--rt-bg-start) 100%
  );
  min-height: 100vh;
}

.rt-navbar {
  backdrop-filter: blur(12px);
  /* Bootstrap デフォルトの薄い文字色を上書きして、常に可読性を確保する */
  --bs-navbar-color: var(--rt-text) !important;
  --bs-navbar-hover-color: var(--rt-primary) !important;
  --bs-navbar-disabled-color: var(--rt-text-muted) !important;
  --bs-navbar-toggler-border-color: var(--rt-card-border) !important;

  /* 半透明だと背景と混ざって読みにくくなるため、ほぼ不透明に寄せる */
  background: color-mix(in srgb, var(--rt-bg-end) 96%, transparent) !important;
  border-bottom: 1px solid var(--rt-card-border);
}

.rt-navbar .navbar-brand,
.rt-navbar .nav-link {
  color: var(--rt-text) !important;
  opacity: 0.95;
}

.rt-navbar .nav-link:hover,
.rt-navbar .nav-link:focus {
  color: var(--rt-primary) !important;
  opacity: 1;
}

.rt-navbar .navbar-toggler {
  color: var(--rt-text) !important;
  border-color: var(--rt-card-border) !important;
}

.rt-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  box-shadow: var(--rt-shadow);
}

.rt-hero-icon {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  box-shadow: var(--rt-shadow);
}

.rt-gradient-text {
  background: linear-gradient(120deg, var(--rt-primary), var(--rt-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-rt-primary {
  --bs-btn-bg: var(--rt-primary);
  --bs-btn-border-color: var(--rt-primary);
  --bs-btn-hover-bg: var(--rt-primary-dark);
  --bs-btn-hover-border-color: var(--rt-primary-dark);
  --bs-btn-active-bg: var(--rt-primary-dark);
  --bs-btn-active-border-color: var(--rt-primary-dark);
  --bs-btn-disabled-bg: var(--rt-primary);
  --bs-btn-disabled-border-color: var(--rt-primary);
}

.rt-feature-card {
  border: 1px solid var(--rt-card-border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--rt-bg-end) 70%, white);
  box-shadow: var(--rt-shadow);
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (prefers-color-scheme: dark) {
  .rt-feature-card {
    background: color-mix(in srgb, var(--rt-bg-end) 85%, black);
  }
}

.rt-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.75rem 2rem rgba(78, 114, 168, 0.18);
}

.rt-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--rt-primary) 22%, transparent),
    color-mix(in srgb, var(--rt-teal) 22%, transparent)
  );
}

.rt-section-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rt-muted {
  color: var(--rt-text-muted);
}

.rt-carousel {
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--rt-card-border);
  box-shadow: var(--rt-shadow);
  background: color-mix(in srgb, var(--rt-bg-end) 90%, white);
}

.rt-carousel .carousel-item img {
  max-height: min(78vh, 720px);
  width: auto;
  margin: 0 auto;
  object-fit: contain;
}

.rt-carousel .carousel-caption {
  position: static;
  padding: 0.75rem 1rem 1.35rem;
  color: var(--rt-text);
  background: color-mix(in srgb, var(--rt-bg-end) 92%, transparent);
  min-height: 4.5rem;
}

.rt-ipad-shot {
  border-radius: 1rem;
  border: 1px solid var(--rt-card-border);
  box-shadow: var(--rt-shadow);
  transition: transform 0.2s ease;
}

.rt-ipad-shot:hover {
  transform: scale(1.02);
}

.rt-footer {
  border-top: 1px solid var(--rt-card-border);
  margin-top: 4rem;
}

.rt-kicker {
  letter-spacing: 0.12em;
}

/* App Store 公式バッジ（アートワークは加工しない。画面上の高さは 40px 以上） */
.rt-app-store-badge {
  display: inline-block;
  line-height: 0;
}

.rt-app-store-badge:focus-visible {
  outline: 2px solid var(--rt-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.rt-app-store-badge img {
  height: 40px;
  width: auto;
  vertical-align: middle;
}

.rt-app-store-badge--hero img {
  height: 44px;
}

.rt-app-store-badge--disabled {
  pointer-events: none;
  opacity: 0.45;
}

.rt-hero-hook {
  color: var(--rt-text);
  letter-spacing: -0.01em;
}

.rt-pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8125rem;
  background: color-mix(in srgb, var(--rt-primary) 14%, transparent);
  color: var(--rt-primary-dark);
  border: 1px solid color-mix(in srgb, var(--rt-primary) 28%, transparent);
}

@media (prefers-color-scheme: dark) {
  .rt-pill {
    background: color-mix(in srgb, var(--rt-primary) 22%, transparent);
    color: color-mix(in srgb, white 88%, var(--rt-primary));
    border-color: color-mix(in srgb, var(--rt-primary) 40%, transparent);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .rt-hero-shot {
    animation: rt-float 5s ease-in-out infinite;
  }
}

@keyframes rt-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.rt-scenario-block {
  max-width: 40rem;
  border-radius: 1rem;
  border: 1px solid var(--rt-card-border);
  background: color-mix(in srgb, var(--rt-bg-end) 75%, white);
  box-shadow: var(--rt-shadow);
}

@media (prefers-color-scheme: dark) {
  .rt-scenario-block {
    background: color-mix(in srgb, var(--rt-bg-end) 88%, black);
  }
}

.rt-scenario-list {
  color: var(--rt-text);
  line-height: 1.65;
}

.rt-scenario-list li + li {
  margin-top: 0.35rem;
}

.rt-feature-card--spotlight {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--rt-primary) 35%, var(--rt-card-border));
  box-shadow: 0 0.5rem 2rem rgba(78, 114, 168, 0.2);
}

.rt-feature-card--spotlight:hover {
  transform: translateY(-2px);
}

.rt-spotlight-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rt-primary);
  background: color-mix(in srgb, var(--rt-primary) 12%, transparent);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}

.rt-text-emphasis {
  color: var(--rt-text);
  font-weight: 600;
}

.rt-carousel-benefit {
  color: var(--rt-text-muted);
  font-weight: 400;
  line-height: 1.45;
}

.rt-inline-link {
  color: var(--rt-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rt-inline-link:hover {
  color: var(--rt-primary-dark);
}