*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: var(--color-primary); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 8px 16px; background: var(--color-primary); color: #fff;
}
.skip-link:focus { left: 8px; top: 8px; }
.container { max-width: 960px; margin: 0 auto; padding: 0 var(--space-md); }
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: rgba(10, 22, 40, 0.92); color: #fff;
  backdrop-filter: blur(8px);
}
.navbar-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--space-md); max-width: 960px; margin: 0 auto;
}
.navbar-logo {
  width: 36px; height: 36px; border-radius: 8px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.navbar-title { font-size: 15px; font-weight: 600; }
#main-content { padding-top: 52px; }
.chapter {
  scroll-snap-align: start;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-xxl) 0;
}
.chapter-hero {
  display: flex; align-items: center; justify-content: center;
  position: relative; color: #fff; text-align: center;
  padding: 0;
}
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--color-dark) 0%, var(--color-primary-dark) 45%, var(--color-dark-light) 100%);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.25));
}
.hero-content { position: relative; z-index: 2; padding: var(--space-xl); }
.hero-title {
  font-size: clamp(28px, 6vw, 42px);
  margin: 0 0 var(--space-md);
  font-weight: 700;
  animation: fadeInUp .8s ease both;
}
.hero-subtitle {
  font-size: clamp(15px, 3.5vw, 18px);
  opacity: .9;
  animation: fadeInUp .8s .2s ease both;
}
.hero-scroll-indicator {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  animation: bounce 2s infinite;
}
.scroll-arrow {
  display: block; width: 24px; height: 24px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg); opacity: .8;
}
.section-title {
  font-size: clamp(22px, 4vw, 28px);
  color: var(--color-primary);
  margin: 0 0 var(--space-sm);
}
.section-desc { color: var(--color-text-secondary); margin: 0 0 var(--space-lg); }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}
.contact-footer {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--color-border);
}
.contact-footer__btns { display: flex; gap: 8px; margin-bottom: 8px; }
.contact-footer__cta, .contact-footer__btn {
  flex: 1; text-align: center; padding: 10px; border-radius: 8px;
  font-size: 14px; text-decoration: none;
}
.contact-footer__cta { background: var(--color-primary); color: #fff; }
.contact-footer__btn { background: #f5f5f5; color: #333; }
.contact-footer__brand { font-size: 11px; color: #999; text-align: center; margin: 0; }
.r155-toast {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 8px; color: #fff;
  background: rgba(0,0,0,.78); font-size: 14px; opacity: 0;
  transition: opacity .25s; z-index: 500; pointer-events: none;
}
.r155-toast.show { opacity: 1; }
.toast-success { background: #1a7f37; }
.toast-error { background: #c41e2a; }