/* ─────────────────────────────────────────
   ARQIVA Landing Page Styles
   Fixed & Enhanced Version
───────────────────────────────────────── */

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

:root {
  --cream: #f6f3ef;
  --ink: #171717;
  --red: #c84d5d;
  --muted: rgba(23, 23, 23, 0.38);
  --rule: rgba(23, 23, 23, 0.1);
  --white: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
}

/* BUG FIX: italic needs the font loaded with ital axis */
em {
  font-style: italic;
  color: var(--red);
}

/* ── Container ── */
.container {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 64px;
  padding-right: 64px;
}

/* ── Header ── */
/* BUG FIX: replaced missing utility classes (.flex .justify-between .items-center)
   with proper header layout via header-inner */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 36px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding 0.4s ease;
}

.header.scrolled {
  background: rgba(246, 243, 239, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.header.scrolled .header-inner {
  padding-top: 20px;
  padding-bottom: 20px;
}

.logo {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}

.nav {
  display: flex;
  gap: 44px;
}

.nav-link {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s ease;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width 0.25s ease;
}

.nav-link:hover {
  color: var(--ink);
}

.nav-link:hover::after {
  width: 100%;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-cta {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 77, 93, 0.4);
  padding-bottom: 2px;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.nav-cta:hover {
  opacity: 0.6;
}

/* Hamburger button (hidden on desktop) */
.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 28px;
}

.menu-btn span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}

.menu-btn.open span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.menu-btn.open span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 24px 64px 32px;
  gap: 24px;
  background: rgba(246, 243, 239, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  /* hidden by default */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), padding 0.4s ease;
  padding-top: 0;
  padding-bottom: 0;
}

.mobile-menu.open {
  max-height: 400px;
  padding-top: 24px;
  padding-bottom: 32px;
}

.mobile-link {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.mobile-link:hover {
  color: var(--ink);
}

.mobile-link--cta {
  color: var(--red);
  border-bottom: 1px solid rgba(200, 77, 93, 0.35);
  padding-bottom: 2px;
  align-self: flex-start;
}

/* ── Hero ── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 120px;
}

.hero-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  flex: 1;
  padding-bottom: 80px;
}

.eyebrow {
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 48px;
}

.hero-text h1 {
  font-size: clamp(60px, 9vw, 130px);
  letter-spacing: -0.02em;
}

.hero-content .hero-desc {
  font-size: 14px;
  line-height: 2;
  color: var(--muted);
  margin-bottom: 52px;
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* BUG FIX: hero-foot now uses .container for alignment consistency */
.hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  padding-bottom: 28px;
  border-top: 1px solid var(--rule);
}

.hf-label {
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
}

.hf-stats {
  display: flex;
  gap: 72px;
}

.hf-stat {
  text-align: center;
}

.hf-val {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 300;
  display: block;
  margin-bottom: 4px;
}

.hf-key {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Buttons ── */
.btn-solid,
.btn-outline,
.btn-cta,
.btn-cta-outline {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 17px 36px;
  text-decoration: none;
  display: block;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  /* Ensures focus is visible for keyboard users */
  outline-offset: 3px;
}

.btn-solid {
  color: var(--white);
  background: var(--ink);
}

.btn-solid:hover {
  background: var(--red);
}

.btn-solid:focus-visible {
  outline: 2px solid var(--red);
}

.btn-outline {
  color: var(--muted);
  border: 1px solid var(--rule);
}

.btn-outline:hover {
  color: var(--ink);
  border-color: rgba(23, 23, 23, 0.25);
}

.btn-outline:focus-visible {
  outline: 2px solid var(--ink);
}

/* ── Sections ── */
.section {
  padding-top: 160px;
  padding-bottom: 160px;
}

/* Divider rule between sections */
.section-rule {
  height: 1px;
  background: var(--rule);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
}

.section-rule-inner {
  height: 1px;
  background: var(--rule);
}

.section-tag {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 52px;
}

.section-title {
  font-size: clamp(40px, 5.2vw, 76px);
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin-bottom: 24px;
}

.section-body,
.modules-body,
.phil-body,
.materials-intro {
  font-size: 13.5px;
  line-height: 2.1;
  color: var(--muted);
  max-width: 420px;
}

/* ── Product ── */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 140px;
  align-items: start;
}

.sticky-col {
  position: sticky;
  top: 120px;
}

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.feature {
  background: var(--cream);
  padding: 56px 44px;
  transition: background 0.35s ease;
}

.feature:hover {
  background: var(--white);
}

.feat-num {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--red);
  display: block;
  margin-bottom: 32px;
}

.feat-name {
  font-family: 'Playfair Display', serif;
  font-size: 25px;
  font-weight: 300;
  margin-bottom: 14px;
}

.feat-desc {
  font-size: 12.5px;
  line-height: 2;
  color: var(--muted);
}

/* ── Philosophy ── */
.dark {
  background: var(--ink);
}

.dark-title {
  color: var(--white);
}

.phil-body {
  color: rgba(255, 255, 255, 0.35);
  margin-top: 36px;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 160px;
  align-items: start;
}

.values {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.value-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 36px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.value-num {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.2);
}

.value-text {
  font-family: 'Playfair Display', serif;
  font-size: 23px;
  font-weight: 300;
  color: var(--white);
  line-height: 1.3;
}

/* ── Modules ── */
.modules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 160px;
  align-items: start;
}

.modules-body {
  margin-top: 36px;
}

.module-list {
  border-top: 1px solid var(--rule);
}

.module {
  display: grid;
  grid-template-columns: 36px 1fr 20px;
  gap: 20px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  cursor: default;
  transition: padding-left 0.3s ease;
}

.module:hover {
  padding-left: 10px;
}

.module-num {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--red);
}

/* BUG FIX: module-info children are spans — need display:block to stack */
.module-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.module-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 300;
  display: block;
}

.module-desc {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: block;
}

.module-arr {
  font-size: 13px;
  color: rgba(23, 23, 23, 0.12);
  transition: color 0.25s ease, transform 0.25s ease;
  justify-self: end;
}

.module:hover .module-arr {
  color: var(--red);
  transform: translateX(4px);
}

/* ── Materials ── */
.materials-head {
  max-width: 640px;
  margin: 0 auto 100px;
  text-align: center;
}

/* BUG FIX: materials-grid-wrap constrains grid to same container width */
.materials-grid-wrap {
  padding-top: 0;
}

.materials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.material-box {
  background: var(--cream);
  padding: 72px 56px;
  transition: background 0.35s ease;
  text-align: left;
}

.material-box:hover {
  background: var(--white);
}

.mat-label {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 48px;
  display: block;
}

.mat-name {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--ink);
}

.mat-desc {
  font-size: 12.5px;
  line-height: 2;
  color: var(--muted);
}

/* ── CTA ── */
.cta-section {
  padding-top: 0;
  padding-bottom: 160px;
}

.cta-box {
  background: var(--ink);
  padding: 120px 100px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 80px;
  align-items: end;
}

.cta-tag {
  color: #b87580 !important;
}

.cta-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.06;
  color: var(--white);
  margin-top: 40px;
}

/* BUG FIX: cta-title em needs explicit white-override since parent is dark */
.cta-title em {
  color: #c07580;
}

.cta-note {
  font-size: 13px;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 48px;
}

.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-cta {
  color: var(--ink);
  background: var(--white);
  padding: 18px 40px;
}

.btn-cta:hover {
  background: var(--red);
  color: var(--white);
}

.btn-cta:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.btn-cta-outline {
  color: rgba(255, 255, 255, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px 40px;
}

.btn-cta-outline:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── New Hero Styles ───────────────────────────────────────── */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 200px;
  padding-bottom: 160px;
  min-height: 100vh;
  justify-content: center;
}
.hero-text h1 {
  font-size: clamp(72px, 9vw, 140px);
  letter-spacing: -0.03em;
}
.hero-title-main {
  font-size: clamp(80px, 12vw, 180px) !important;
  letter-spacing: -0.02em !important;
  color: var(--red);
  font-family: 'Playfair Display', serif;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 32px;
}
.hero-subtitle {
  font-size: clamp(18px, 2.8vw, 28px);
  font-weight: 300;
  margin-top: 0;
  color: var(--muted);
  letter-spacing: 0.08em;
  font-family: 'Jost', sans-serif;
}
.hero-desc {
  font-size: 14px;
  line-height: 2;
  color: var(--muted);
  margin-top: 48px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 56px;
}
.hero-actions .btn-solid,
.hero-actions .btn-outline {
  width: 280px;
  text-align: center;
}
.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.iphone-mockup {
  width: 320px;
  height: 640px;
  border: 8px solid var(--rule);
  border-radius: 40px;
  background: var(--cream);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}
.iphone-screen {
  width: 90%;
  height: 92%;
  background: var(--white);
  border-radius: 28px;
  border: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
}
.iphone-screen-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
}

/* ── Problem Section ───────────────────────────────────────── */
.problem-section .section-title {
  max-width: 640px;
  margin-bottom: 56px;
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.problem-item {
  background: var(--cream);
  padding: 60px 44px;
  transition: background 0.35s ease;
}
.problem-item:hover {
  background: var(--white);
}
.problem-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 16px;
  color: var(--ink);
}
.problem-desc {
  font-size: 12.5px;
  line-height: 2;
  color: var(--muted);
}
.problem-note {
  font-size: 14px;
  line-height: 2;
  color: var(--ink);
  margin-top: 48px;
  text-align: center;
}

/* ── Flow Section ───────────────────────────────────────── */
.flow-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.flow-step {
  position: relative;
  padding-left: 40px;
  margin-bottom: 40px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--ink);
}
.flow-step-name::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 4px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--red);
  border-radius: 50%;
  background: var(--cream);
}
.flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: -32px;
  top: 22px;
  width: 2px;
  height: calc(100% - 22px);
  background: var(--rule);
}

/* ── Features Section ───────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.feature-card {
  background: var(--cream);
  padding: 56px 44px;
  transition: background 0.35s ease;
}
.feature-card:hover {
  background: var(--white);
}
.feature-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 16px;
  color: var(--ink);
}
.feature-desc {
  font-size: 12.5px;
  line-height: 2;
  color: var(--muted);
  margin-bottom: 24px;
}
.feature-image {
  width: 70%;
  max-width: 280px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border: 6px solid var(--rule);
  border-radius: 28px;
  background: var(--white);
  overflow: hidden;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}
.feature-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Dashboard Section ──────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.dashboard-mockup {
  width: 280px;
  margin: 0 auto;
  border: 6px solid var(--rule);
  border-radius: 32px;
  background: var(--cream);
  overflow: hidden;
  box-shadow: 0 16px 50px rgba(0,0,0,0.08);
}
.dashboard-screen {
  width: 100%;
  background: var(--white);
  overflow: hidden;
}
.dashboard-screen-img {
  width: 100%;
  height: auto;
  display: block;
}
.dashboard-content .section-title {
  margin-bottom: 24px;
}
.dashboard-list {
  list-style: none;
  padding-left: 0;
  font-size: 15px;
  line-height: 2;
  color: var(--muted);
}
.dashboard-list li {
  margin-bottom: 12px;
}

/* ── Who Section ────────────────────────────────────────── */
.who-list {
  list-style: none;
  padding-left: 0;
  margin-top: 36px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 2;
  color: var(--muted);
}
.who-note {
  font-size: 13.5px;
  color: var(--red);
  margin-top: 8px;
}

/* ── Philosophy Section ─────────────────────────────────── */
.philosophy-section {
  background: var(--ink);
  color: var(--white);
}
.philosophy-section .section-title {
  color: var(--white);
}
.philo-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 60px;
  margin-top: 48px;
}
.philo-item h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 8px;
  color: var(--white);
}
.philo-item p {
  font-size: 13px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.55);
}

/* ── CTA Section ───────────────────────────────────────── */
.cta-section .cta-box {
  background: var(--ink);
  padding: 120px 100px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  align-items: center;
}
.cta-section .cta-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--white);
  margin-top: 8px;
}
.cta-section .cta-note {
  font-size: 16px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 16px;
}

/* ── Responsive Adjustments for New Sections ────────────── */
@media (max-width: 1100px) {
  .hero-content {
    text-align: center;
  }
  .problem-grid {
    grid-template-columns: 1fr;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .philo-values {
    grid-template-columns: 1fr;
  }
  .cta-section .cta-box {
    grid-template-columns: 1fr;
    padding: 72px 48px;
    gap: 52px;
  }
}
@media (max-width: 640px) {
  .hero-content {
    padding-top: 140px;
    padding-bottom: 100px;
  }
  .iphone-mockup {
    width: 260px;
    height: 520px;
  }
  .problem-item {
    padding: 44px 32px;
  }
  .features-grid {
    gap: 1px;
  }
  .feature-image {
    width: 60%;
    max-width: 220px;
  }
  .dashboard-mockup {
    width: 240px;
  }
}

/* ── Footer ── */
.footer {
  border-top: 1px solid var(--rule);
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 64px;
}

.f-brand {
  display: flex;
  align-items: center;
  gap: 28px;
}

.f-logo {
  font-size: 10px;
  letter-spacing: 0.44em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
}

.f-sep {
  width: 1px;
  height: 14px;
  background: var(--rule);
  flex-shrink: 0;
}

.f-tag {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.f-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.f-link {
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.f-link:hover {
  color: var(--ink);
}

.f-copy {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: rgba(23, 23, 23, 0.22);
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* ── Responsive — Tablet (≤1100px) ── */
@media (max-width: 1100px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }

  .header-inner {
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .header.scrolled .header-inner {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  /* Show hamburger, hide desktop nav */
  .nav {
    display: none;
  }

  .menu-btn {
    display: flex;
  }

  .mobile-menu {
    display: flex;
    padding-left: 32px;
    padding-right: 32px;
  }

  .hero-wrapper {
    grid-template-columns: 1fr;
    padding-bottom: 60px;
  }

  .hf-stats {
    gap: 36px;
  }

  .section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .product-grid,
  .philosophy-grid,
  .modules-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  /* BUG FIX: sticky-col must not be sticky on mobile (causes layout issues) */
  .sticky-col {
    position: static;
  }

  .materials-grid {
    grid-template-columns: 1fr;
  }

  .cta-section {
    padding-bottom: 100px;
  }

  .cta-box {
    grid-template-columns: 1fr;
    padding: 72px 48px;
    gap: 52px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
    padding: 36px 32px;
  }

  .f-brand {
    flex-direction: column;
    gap: 10px;
  }

  .f-sep {
    display: none;
  }
}

/* ── Responsive — Mobile (≤640px) ── */
@media (max-width: 640px) {
  .header-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .mobile-menu {
    padding-left: 24px;
    padding-right: 24px;
  }

  .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero-wrapper {
    padding-bottom: 40px;
  }

  .hero-text h1 {
    font-size: 52px;
  }

  .hf-stats {
    gap: 24px;
  }

  .features {
    grid-template-columns: 1fr;
  }

  .feature {
    padding: 44px 32px;
  }

  .material-box {
    padding: 52px 36px;
  }

  .cta-box {
    padding: 52px 32px;
  }

  .cta-title {
    font-size: min(5.2vw, 28px);
  }

  .section-title {
    font-size: min(5.2vw, 36px);
  }

  .dashboard-content .section-title {
    font-size: min(5.2vw, 36px);
  }

  .footer-inner {
    padding: 32px 24px;
  }

  .f-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .section-rule {
    padding: 0 24px;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ── Contact Page ───────────────────────
   Defines styles specific to the dedicated contact page. These styles
   inherit the same minimalist, editorial feel as the landing page and
   respect the existing colour palette and type hierarchy. Responsive
   variants mirror those used elsewhere in the site to ensure
   consistency across breakpoints. */

/* Contact hero section */
.contact-hero {
  padding-top: 220px;
  padding-bottom: 140px;
}

.contact-hero-inner {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.contact-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(60px, 6vw, 120px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--ink);
}

.contact-tagline {
  font-size: 16px;
  line-height: 2;
  color: var(--muted);
  margin-top: 28px;
}

/* Contact details section */
.contact-details {
  padding-top: 80px;
  padding-bottom: 160px;
}

.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: flex-start;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 64px;
  padding-right: 64px;
}

.contact-info h2,
.contact-form h2 {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 300;
  margin-bottom: 24px;
}

.contact-info p {
  font-size: 14px;
  line-height: 2;
  color: var(--muted);
  margin-bottom: 16px;
}

.contact-info a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.3s ease;
}

.contact-info a:hover {
  border-color: var(--ink);
}

/* Form styling */
.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 18px;
  font-size: 14px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  border-radius: 2px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form button {
  align-self: flex-start;
  margin-top: 12px;
}

/* Contact section button styling
   Ensures the contact action button within the index page does not span
   the entire container width. Instead it sizes to its content and
   maintains an elegant presence. */
.contact-buttons a {
  width: fit-content;
  padding-left: 40px;
  padding-right: 40px;
}

.contact-buttons {
  margin-top: 24px;
}

/* Active nav link on contact page */
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--ink);
}

/* Responsive adjustments for contact page */
@media (max-width: 1100px) {
  .contact-container {
    grid-template-columns: 1fr;
    gap: 60px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 640px) {
  .contact-hero {
    padding-top: 180px;
    padding-bottom: 100px;
  }
  .contact-title {
    font-size: 48px;
  }
  .contact-container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .contact-info h2,
  .contact-form h2 {
    font-size: 26px;
  }
}

/* ── Hero Box (ARQIVA wordmark) ───────────────────────────
   These styles restore the large ARQIVA mark in the hero section
   without the surrounding red fill or border. The wrapper centres the
   mark within the hero and ensures proper spacing. */
.hero-box-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding-top: 120px;
  padding-bottom: 80px;
}

.hero-box {
  border: none;
  background: none;
  color: var(--red);
  font-family: 'Playfair Display', serif;
  font-weight: 300;
  font-size: clamp(72px, 10vw, 180px);
  letter-spacing: 0.2em;
  padding: 0;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
}

@media (max-width: 640px) {
  .hero-box {
    font-size: clamp(48px, 20vw, 96px);
    padding: 24px 32px;
  }
}

/* ─────────────────────────────────────────
   Pricing, Auth & Account Pages
   These classes style the new subscription
   pages (pricing, signup/login and account).
   They follow the same minimal, high-end
   aesthetic as the main landing page while
   introducing flexible layouts.
───────────────────────────────────────── */

/* Pricing Page */
.pricing-section {
  padding: 120px 0;
}

.pricing-head {
  text-align: center;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-top: 60px;
}

.plan-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 40px 32px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.plan-title {
  font-size: 28px;
  font-family: 'Playfair Display', serif;
  margin-bottom: 8px;
}

.plan-price {
  font-size: 24px;
  margin-bottom: 12px;
}

.plan-limit {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 12px;
}

.plan-features {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 24px;
}

.plan-subtitle {
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.plan-period {
  font-size: 16px;
  font-weight: 300;
  color: var(--muted);
}

.plan-feature-list {
  list-style: none;
  text-align: left;
  margin-bottom: 20px;
  padding: 0;
}

.plan-feature-list li {
  font-size: 14px;
  line-height: 2;
  color: var(--ink);
  padding-left: 20px;
  position: relative;
}

.plan-feature-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 600;
}

.plan-limit-list {
  list-style: none;
  text-align: left;
  margin-bottom: 20px;
  padding: 0;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}

.plan-limit-list li {
  font-size: 13px;
  line-height: 2;
  color: var(--muted);
  padding-left: 20px;
  position: relative;
}

.plan-limit-list li::before {
  content: '\2717';
  position: absolute;
  left: 0;
  color: var(--muted);
}

.plan-tagline {
  font-size: 13px;
  color: var(--red);
  font-style: italic;
  margin-bottom: 24px;
  letter-spacing: 0.05em;
}

.plan-card-featured {
  border-color: var(--red);
  position: relative;
}

.plan-card-featured::before {
  content: 'RECOMMENDED';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  letter-spacing: 0.15em;
  padding: 4px 16px;
  border-radius: 20px;
}

.plan-btn {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}

.plan-btn-solid {
  color: var(--white);
  background: var(--ink);
  border: 1px solid var(--ink);
  transition: background 0.3s ease;
}

.plan-btn-solid:hover {
  background: var(--red);
}

.plan-btn-outline {
  color: var(--ink);
  border: 1px solid var(--ink);
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease;
}

.plan-btn-outline:hover {
  background: var(--ink);
  color: var(--cream);
}

/* Auth Pages */
.auth-section {
  padding: 120px 0;
}

.auth-container {
  max-width: 480px;
  margin: 0 auto;
}

.auth-title {
  text-align: center;
  font-size: 36px;
  font-family: 'Playfair Display', serif;
  margin-bottom: 40px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-input {
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--cream);
  color: var(--ink);
  font-size: 14px;
}

.auth-submit {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.auth-submit:hover {
  background: var(--red);
}

.auth-link {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}

.auth-link a {
  color: var(--ink);
  text-decoration: underline;
}

.auth-link a:hover {
  color: var(--red);
}

/* Account Page */
.account-section {
  padding: 120px 0;
}

.account-head {
  text-align: center;
  margin-bottom: 40px;
}

.account-info {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--rule);
  padding: 40px 32px;
  border-radius: 12px;
  background: var(--cream);
}

.account-info p {
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--muted);
}

.account-info p span {
  color: var(--ink);
  font-weight: 400;
}

.account-info .btn-outline {
  margin-top: 24px;
}

/* ── Navbar 登入狀態控制（防閃爍）──────────────────────────
   預設隱藏所有登入狀態相關連結。
   updateNavbar() 在 DOMContentLoaded 後依 token 決定顯示哪些。
   使用 visibility:hidden + display:none 雙保險避免畫面閃爍。 */
.nav-login,
.nav-get-started,
.nav-account,
.nav-open {
  display: none;
}