:root {
  --color-primary-50: #fdf8f0;
  --color-primary-100: #f9eddb;
  --color-primary-200: #f0d4a8;
  --color-primary-300: #e4b76e;
  --color-primary-400: #d49a3f;
  --color-primary-500: #c4832a;
  --color-primary-600: #a86820;
  --color-primary-700: #8a501c;
  --color-primary-800: #6e3f1a;
  --color-primary-900: #5a3418;
  --color-neutral-50: #fafaf8;
  --color-neutral-100: #f0efec;
  --color-neutral-200: #dfddd8;
  --color-neutral-300: #c5c2bb;
  --color-neutral-400: #9e9a91;
  --color-neutral-500: #7a756c;
  --color-neutral-600: #5c5851;
  --color-neutral-700: #413e39;
  --color-neutral-800: #272523;
  --color-neutral-900: #141312;
  --color-neutral-950: #0a0908;
  --surface-primary: #0a0908;
  --surface-elevated: #141312;
  --surface-card: #1a1917;
  --surface-card-hover: #222120;
  --surface-overlay: rgba(10, 9, 8, 0.85);
  --text-primary: #f0efec;
  --text-secondary: #9e9a91;
  --text-tertiary: #7a756c;
  --text-accent: #d49a3f;
  --text-on-primary: #0a0908;
  --border-subtle: rgba(223, 221, 216, 0.08);
  --border-default: rgba(223, 221, 216, 0.12);
  --border-strong: rgba(223, 221, 216, 0.2);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.12);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --font-display: "Inter", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--surface-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
}

img {
  display: block;
}

.font-display {
  font-family: var(--font-display);
}

.text-accent {
  color: var(--text-accent);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(212, 154, 63, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 30%, rgba(196, 131, 42, 0.04) 0%, transparent 50%),
    var(--surface-primary);
}

.grain-overlay {
  opacity: 0.03;
  background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 256 256%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%224%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E');
  background-size: 200px 200px;
}

.hero-image-overlay {
  background: linear-gradient(180deg, transparent 40%, rgba(10, 9, 8, 0.6) 100%);
}

.section-image-overlay {
  background: linear-gradient(180deg, transparent 50%, rgba(10, 9, 8, 0.4) 100%);
}

.memory-fragment {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.memory-fragment-top {
  width: 5rem;
  height: 7rem;
  opacity: 0.6;
  border-radius: var(--radius-md);
  transform: rotate(6deg);
  background: linear-gradient(135deg, var(--surface-card) 0%, var(--surface-elevated) 100%);
}

.memory-fragment-bottom {
  width: 4rem;
  height: 6rem;
  opacity: 0.4;
  border-radius: var(--radius-sm);
  transform: rotate(-4deg);
  background: linear-gradient(135deg, var(--color-primary-900) 0%, var(--surface-card) 100%);
}

#lang-toggle {
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: transparent;
}

#lang-menu {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  z-index: 60;
}

.lang-option {
  color: var(--text-secondary);
}

.lang-option[data-active="true"] {
  color: var(--text-primary);
}

.lang-dot {
  background: var(--text-accent);
}

.section-line {
  background: var(--color-primary-400);
  opacity: 0.4;
}

.section-elevated {
  background: var(--surface-elevated);
}

.scenario-card,
.highlight-card,
.success-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}

.scenario-card {
  transition: border-color 150ms ease;
}

.icon-wrap,
.success-icon {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  color: var(--text-accent);
}

.success-icon {
  width: 3rem;
  height: 3rem;
  background: var(--color-primary-900);
}

.cta-button {
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary-400);
  color: var(--text-on-primary);
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease;
}

.form-input {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
}

.form-helper {
  margin: 0;
}

.footer-border {
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-primary);
}

.back-to-top-button {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: rgba(20, 19, 18, 0.92);
  color: var(--text-primary);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, color 180ms ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.back-to-top-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

html.privacy-app-mode body.privacy-page {
  background: #ffffff;
  color: #171717;
  --text-primary: #171717;
  --text-secondary: #44403c;
  --text-tertiary: #78716c;
  --text-accent: #c58a27;
  --surface-primary: #ffffff;
  --border-subtle: #ece7dd;
}

html.privacy-app-mode body.privacy-page .hero-bg,
html.privacy-app-mode body.privacy-page .grain-overlay,
html.privacy-app-mode body.privacy-page .memory-fragment,
html.privacy-app-mode body.privacy-page .cta-glow {
  display: none !important;
}

html.privacy-app-mode body.privacy-page #main-nav,
html.privacy-app-mode body.privacy-page .footer-border,
html.privacy-app-mode body.privacy-page [data-role="privacy-home-link"],
html.privacy-app-mode body.privacy-page [data-role="terms-home-link"] {
  display: none !important;
}

html.privacy-app-mode body.privacy-page #privacy-eyebrow,
html.privacy-app-mode body.privacy-page #terms-eyebrow {
  display: none !important;
}

html.privacy-app-mode body.privacy-page article > div > span.text-accent:first-child {
  display: none !important;
}

html.privacy-app-mode body.privacy-page main {
  min-height: auto;
}

html.privacy-app-mode body.privacy-page section {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

html.privacy-app-mode body.privacy-page .mx-auto.w-full.max-w-4xl {
  max-width: 44rem;
}

html.privacy-app-mode body.privacy-page .scenario-card,
html.privacy-app-mode body.privacy-page .highlight-card,
html.privacy-app-mode body.privacy-page .success-card {
  background: #ffffff;
  border: 1px solid #ece7dd;
  border-radius: 24px;
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.05);
}

html.privacy-app-mode body.privacy-page .rounded-\[28px\] {
  border-radius: 24px !important;
}

html.privacy-app-mode body.privacy-page .text-secondary,
html.privacy-app-mode body.privacy-page .text-tertiary {
  color: #525252 !important;
}

html.privacy-app-mode body.privacy-page .text-accent {
  color: #c58a27 !important;
}

html.privacy-app-mode body.privacy-page h1,
html.privacy-app-mode body.privacy-page h2,
html.privacy-app-mode body.privacy-page h3 {
  color: #171717 !important;
}

html.privacy-app-mode body.privacy-page article {
  padding: 1.5rem !important;
}

html.privacy-app-mode body.privacy-page #privacy-content,
html.privacy-app-mode body.privacy-page #terms-content {
  gap: 1rem !important;
}

html.privacy-app-mode body.privacy-page article > div {
  color: #44403c;
  font-size: 1rem;
  line-height: 1.9;
}

html.privacy-app-mode body.privacy-page article > div > * + *,
html.privacy-app-mode body.privacy-page #privacy-content > * + *,
html.privacy-app-mode body.privacy-page #terms-content > * + * {
  margin-top: 1rem !important;
}

html.privacy-app-mode body.privacy-page article h1 {
  margin-top: 0 !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em;
}

html.privacy-app-mode body.privacy-page article h1 + p,
html.privacy-app-mode body.privacy-page article h1 + p + p {
  margin-top: 0.4rem !important;
  color: #78716c !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
}

html.privacy-app-mode body.privacy-page article h1 + p + p + p {
  margin-top: 1.2rem !important;
}

html.privacy-app-mode body.privacy-page article p {
  color: #44403c;
}

html.privacy-app-mode body.privacy-page article h2,
html.privacy-app-mode body.privacy-page #privacy-content h2,
html.privacy-app-mode body.privacy-page #terms-content h2 {
  margin-top: 2.15rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid #f1ece3;
  font-size: 1.24rem !important;
  line-height: 1.4 !important;
  font-weight: 650;
}

html.privacy-app-mode body.privacy-page article h3,
html.privacy-app-mode body.privacy-page #privacy-content h3,
html.privacy-app-mode body.privacy-page #terms-content h3 {
  margin-top: 1.2rem !important;
  font-size: 1.1rem !important;
  line-height: 1.4 !important;
  font-weight: 600;
}

html.privacy-app-mode body.privacy-page article h2:first-of-type,
html.privacy-app-mode body.privacy-page #privacy-content h2:first-of-type,
html.privacy-app-mode body.privacy-page #terms-content h2:first-of-type {
  margin-top: 1.9rem !important;
}

html.privacy-app-mode body.privacy-page article a:not([data-role="privacy-home-link"]):not([data-role="terms-home-link"]) {
  color: #8a501c;
  text-underline-offset: 0.18em;
}

@media (max-width: 639px) {
  html.privacy-app-mode body.privacy-page section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  html.privacy-app-mode body.privacy-page .mx-auto.w-full.max-w-4xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  html.privacy-app-mode body.privacy-page h1 {
    font-size: 2rem !important;
    line-height: 1.12 !important;
  }

  html.privacy-app-mode body.privacy-page h2 {
    font-size: 1.16rem !important;
    line-height: 1.35 !important;
  }

  html.privacy-app-mode body.privacy-page h3 {
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  html.privacy-app-mode body.privacy-page article {
    padding: 1.25rem !important;
  }
}

.back-to-top-button:hover {
  color: var(--text-accent);
  border-color: var(--border-strong);
}

.back-to-top-button:focus-visible {
  outline: 2px solid var(--color-primary-400);
  outline-offset: 2px;
}

.cta-glow {
  background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(212, 154, 63, 0.06) 0%, transparent 70%);
}

.reveal-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(0.32, 0.72, 0, 1), transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

.nav-scrolled {
  background: rgba(10, 9, 8, 0.9) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(223, 221, 216, 0.06);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes breathe {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }

  50% {
    transform: translateY(8px);
    opacity: 1;
  }
}

.breathing-arrow {
  animation: breathe 2.4s ease-in-out infinite;
}

#hero-cta:hover,
#subscribe-form button[type="submit"]:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

#hero-cta:active,
#subscribe-form button[type="submit"]:active {
  transform: translateY(0);
}

#hero-cta:focus-visible,
#subscribe-form button[type="submit"]:focus-visible,
#lang-toggle:focus-visible {
  outline: 2px solid var(--color-primary-400);
  outline-offset: 2px;
}

#lang-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.lang-option:hover {
  background: var(--surface-card-hover);
  color: var(--text-primary);
}

#subscribe-form input[type="email"]:focus {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 2px rgba(212, 154, 63, 0.2);
}

#scenarios .group:hover {
  border-color: var(--border-strong);
}

@media (max-width: 639px) {
  #hero h1 {
    font-size: 2.5rem !important;
  }

  .hero-slogan {
    font-size: 1.75rem !important;
    line-height: 1.2;
  }

  .breathing-arrow svg {
    width: 20px;
    height: 20px;
  }

  .back-to-top-button {
    right: 1rem;
    bottom: 1rem;
    width: 2.7rem;
    height: 2.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .breathing-arrow {
    animation: none;
    opacity: 0.7;
  }

  .group img,
  .cta-button,
  #lang-toggle,
  .back-to-top-button {
    transition: none !important;
  }
}

@media (hover: none) {
  #hero-cta:hover,
  #subscribe-form button[type="submit"]:hover,
  #lang-toggle:hover {
    filter: none;
    transform: none;
    color: inherit;
    border-color: inherit;
  }

  .back-to-top-button:hover {
    color: var(--text-primary);
    border-color: var(--border-default);
  }

  #scenarios .group:hover {
    border-color: var(--border-subtle);
  }
}