/* Self-hosted (not loaded from fonts.googleapis.com) so no visitor IP is sent to Google on font
   load - both are OFL-licensed, free for commercial use. Each family's weights (500/600/700 for
   Cormorant Garamond, 400/500/600/700 for Manrope) all live inside the same variable-font file per
   subset, so a single @font-face per subset with a font-weight range covers every weight in use. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --header-height: 84px;
  --announcement-height: 0px;
  --ink: #0d0b0c;
  --ink-soft: #171214;
  --wine: #3b161f;
  --wine-light: #6a2638;
  --gold: #d6ad55;
  --gold-light: #f0d690;
  --ivory: #f2eadb;
  --muted: #b9aa9f;
  --line: rgba(214, 173, 85, 0.25);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  padding-top: calc(var(--header-height) + var(--announcement-height));
  color: var(--ivory);
  background: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
}

/* Atmosphere: fixed to the viewport (not the page) so the glow, smoke, and
   vignette stay consistent as you scroll instead of fading to flat black
   past the hero. Layered wine + gold glows read as depth, not decoration. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 62rem 46rem at 84% 6%, rgba(106, 38, 56, 0.4), transparent 68%),
    radial-gradient(ellipse 54rem 50rem at 4% 96%, rgba(214, 173, 85, 0.1), transparent 62%),
    radial-gradient(ellipse 80rem 64rem at 50% 48%, rgba(59, 22, 31, 0.22), transparent 72%),
    var(--ink);
}

/* Soft vignette to pull focus toward the center and keep the far edges of
   the screen from ever reading as an empty, undefined void. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse 90rem 72rem at 50% 42%, transparent 50%, rgba(6, 5, 5, 0.6) 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Fireflies: fixed to the viewport (like .noise) so they drift consistently
   over the whole page rather than scrolling away after the hero. Kept sparse,
   slow, and dim so it reads as ambiance, not a decoration. */
.fireflies {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.firefly {
  position: absolute;
  width: var(--size, 1.5px);
  height: var(--size, 1.5px);
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 3px 1px rgba(240, 214, 144, 0.35), 0 0 7px 2px rgba(214, 173, 85, 0.15);
  opacity: 0;
  animation: firefly-drift var(--duration, 12s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes firefly-drift {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12% {
    opacity: 0.4;
  }
  50% {
    transform: translate(14px, -46px);
    opacity: 0.18;
  }
  88% {
    opacity: 0.38;
  }
  100% {
    transform: translate(-10px, -92px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .firefly {
    animation: none;
    opacity: 0.4;
  }
}

.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 44px 10px 16px;
  background: linear-gradient(90deg, var(--wine-light), var(--wine));
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.announcement-bar[hidden] {
  display: none;
}

.announcement-bar p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ivory);
  font-weight: 600;
}

.announcement-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.announcement-dismiss {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.announcement-dismiss:hover {
  color: var(--ivory);
  background: rgba(242, 234, 219, 0.1);
}

.site-header {
  position: fixed;
  top: var(--announcement-height);
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  height: var(--header-height);
  background: linear-gradient(180deg, rgba(59, 22, 31, 0.32), rgba(13, 11, 12, 0.86));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -28px;
  height: 28px;
  background: linear-gradient(180deg, rgba(13, 11, 12, 0.4), transparent);
  pointer-events: none;
}

.site-header-inner {
  width: min(1180px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--gold-light);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

nav {
  display: flex;
  gap: 34px;
  color: var(--muted);
  font-size: 0.82rem;
}

nav a,
.header-cta,
.header-link {
  transition: color 180ms ease;
}

nav a:hover,
.header-cta:hover,
.header-link:hover {
  color: var(--gold-light);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-link {
  color: var(--muted);
  font-size: 0.82rem;
}

.tutorial-nav {
  position: relative;
}

.tutorial-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.tutorial-toggle[hidden] {
  display: none;
}

.tutorial-caret {
  font-size: 0.6rem;
  transition: transform 180ms ease;
}

.tutorial-toggle[aria-expanded="true"] .tutorial-caret {
  transform: rotate(180deg);
}

.tutorial-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 55;
  min-width: 240px;
  padding: 6px;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.tutorial-menu[hidden] {
  display: none;
}

.tutorial-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  color: var(--ivory);
  font-size: 0.82rem;
  white-space: nowrap;
  border-top: 1px solid rgba(214, 173, 85, 0.12);
}

.tutorial-menu a:first-child {
  border-top: none;
}

.tutorial-menu a::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.6;
  transition: opacity 150ms ease;
}

.tutorial-menu a:hover,
.tutorial-menu a:focus-visible {
  background: rgba(214, 173, 85, 0.1);
  color: var(--gold-light);
}

.tutorial-menu a:hover::before,
.tutorial-menu a:focus-visible::before {
  opacity: 1;
}

.header-cta {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--gold-light);
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

main,
footer {
  position: relative;
  z-index: 2;
}

.hero {
  width: min(1180px, calc(100% - 48px));
  min-height: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 70px;
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: var(--serif);
  line-height: 0.98;
}

h1 {
  margin-bottom: 26px;
  font-size: clamp(4rem, 7.5vw, 7.2rem);
  font-weight: 600;
  letter-spacing: -0.045em;
}

h1 em {
  color: var(--gold-light);
  font-weight: 500;
}

.hero-text {
  max-width: 620px;
  margin-bottom: 34px;
  color: var(--muted);
  font-size: 1.08rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button {
  min-height: 54px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: #18110b;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
}

.button-primary:hover {
  background: var(--ivory);
}

.button-secondary {
  color: var(--gold-light);
  background: rgba(13, 11, 12, 0.5);
}

.button-secondary:hover {
  color: var(--ink);
  background: var(--gold-light);
}

.microcopy {
  margin-top: 22px;
  color: #837871;
  font-size: 0.72rem;
}

.hero-art {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.orbit {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.orbit-one {
  width: 450px;
  height: 450px;
  animation: drift 12s ease-in-out infinite;
}

.orbit-two {
  width: 330px;
  height: 330px;
  border-style: dashed;
  animation: spin 28s linear infinite;
}

.mouse-photo-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.mouse-photo-wrap::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: rgba(214, 173, 85, 0.22);
  filter: blur(45px);
  z-index: -1;
}

.mouse-photo {
  width: 260px;
  max-width: 70%;
  height: auto;
  transform: rotate(6deg);
  filter: drop-shadow(0 35px 60px rgba(0, 0, 0, 0.6));
}

.floating-label {
  position: absolute;
  padding: 7px 13px;
  border: 1px solid var(--line);
  color: var(--gold-light);
  background: rgba(13, 11, 12, 0.86);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  animation: float 5s ease-in-out infinite;
}

.label-one {
  top: 20%;
  left: 6%;
}

.label-two {
  right: 2%;
  bottom: 29%;
  animation-delay: -1.5s;
}

.label-three {
  bottom: 9%;
  left: 22%;
  animation-delay: -3s;
}

.edition-seal {
  position: absolute;
  top: 10%;
  right: 0;
  width: 92px;
  height: 92px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-light);
  background: rgba(59, 22, 31, 0.65);
  transform: rotate(8deg);
}

.edition-seal span {
  font-size: 0.48rem;
  letter-spacing: 0.2em;
}

.edition-seal strong {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.trust-strip {
  min-height: 88px;
  padding: 20px 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #a99a90;
  background: rgba(23, 18, 20, 0.72);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
}

.trust-strip i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 130px 0;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 62px;
}

.section-heading h2,
.premium-section h2,
.final-cta h2 {
  margin-bottom: 20px;
  font-size: clamp(3rem, 5.4vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.section-heading > p:last-child,
.premium-section p {
  color: var(--muted);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.feature-card {
  min-height: 330px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(59, 22, 31, 0.28), transparent 60%),
    rgba(23, 18, 20, 0.86);
}

.feature-card-large {
  grid-column: span 2;
  position: relative;
  overflow: hidden;
  justify-content: space-between;
}

.feature-card-signature {
  gap: 28px;
  border-color: rgba(214, 173, 85, 0.45);
  background:
    radial-gradient(ellipse 90% 65% at 92% 2%, rgba(214, 173, 85, 0.11), rgba(214, 173, 85, 0.03) 35%, transparent 62%),
    linear-gradient(135deg, #3b161f, #1a1114 78%);
}

.card-number {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.05rem;
}

.feature-card h3,
.process-list h3 {
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.1;
}

.feature-card p,
.process-list p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.profile-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-stack-label {
  margin: 0;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.profile-stack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-stack-row span,
.profile-stack-row a {
  padding: 8px 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-light);
  background: rgba(13, 11, 12, 0.55);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.profile-stack-row a {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.profile-stack-row a:hover,
.profile-stack-row a:focus-visible {
  background: var(--gold);
  color: #18110b;
  border-color: var(--gold);
}

.coming-soon-tip {
  position: fixed;
  z-index: 80;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 8px 14px;
  background: var(--ink-soft);
  border: 1px solid var(--gold);
  border-radius: 6px;
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.coming-soon-tip.is-visible {
  opacity: 1;
}

.process-section {
  border-top: 1px solid var(--line);
}

.process-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.process-list li {
  padding: 31px 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 30px;
  border-bottom: 1px solid var(--line);
}

.process-list > li > span {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 2rem;
}

.process-list h3 {
  margin-bottom: 6px;
}

.premium-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 74px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 60px;
  border: 1px solid rgba(214, 173, 85, 0.45);
  background:
    radial-gradient(circle at 90% 20%, rgba(214, 173, 85, 0.15), transparent 22rem),
    linear-gradient(135deg, #3b161f, #1a1114 62%);
}

.premium-section h2 {
  max-width: 700px;
}

.premium-section p:last-child {
  max-width: 650px;
  margin-bottom: 0;
}

.pricing-toggle {
  display: inline-flex;
  margin-bottom: 46px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  overflow: hidden;
}

.toggle-option {
  padding: 12px 28px;
  border: none;
  color: var(--muted);
  background: transparent;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.toggle-option.is-active {
  color: #18110b;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
}

.save-badge {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--gold-light);
  background: rgba(214, 173, 85, 0.16);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.toggle-option.is-active .save-badge {
  color: #18110b;
  background: rgba(24, 17, 11, 0.14);
}

.pricing-card {
  max-width: 460px;
  padding: 54px;
  border: 1px solid rgba(214, 173, 85, 0.45);
  background:
    radial-gradient(ellipse 90% 65% at 92% 2%, rgba(214, 173, 85, 0.11), rgba(214, 173, 85, 0.03) 35%, transparent 62%),
    linear-gradient(135deg, #3b161f, #1a1114 78%);
}

.pricing-card-head h3 {
  margin: 6px 0 18px;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 600;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.price-amount {
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--gold-light);
}

.price-period {
  color: var(--muted);
  font-size: 0.9rem;
}

.price-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.price-php {
  margin: 6px 0 0;
  color: var(--gold-light);
  font-size: 0.9rem;
}

.pricing-features {
  margin: 34px 0;
  padding: 24px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  color: var(--ivory);
  font-size: 0.88rem;
}

.pricing-features li {
  padding-left: 22px;
  position: relative;
}

.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
}

.payment-method-toggle {
  display: flex;
  width: fit-content;
  margin: 4px auto 22px;
}

.qr-frame {
  width: 200px;
  height: 200px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  background: rgba(242, 234, 219, 0.04);
}

.qr-image {
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
}

.qr-account {
  margin: 0 0 6px;
  text-align: center;
  color: var(--gold-light);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.qr-safety-note {
  margin: 0 0 26px;
  text-align: center;
  color: #837871;
  font-size: 0.68rem;
  font-style: italic;
}

.manual-steps {
  margin: 0 0 26px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.85rem;
  display: grid;
  gap: 6px;
}

.manual-pay-cta {
  width: 100%;
}

.pricing-microcopy {
  margin-top: 14px;
  text-align: center;
}

.inline-link {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inline-link:hover {
  color: var(--ivory);
}

.faq-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
}

.faq-list {
  border-top: 1px solid var(--line);
}

details {
  padding: 25px 4px;
  border-bottom: 1px solid var(--line);
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 1.45rem;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  color: var(--gold);
  font-family: var(--sans);
  font-size: 1rem;
}

details[open] summary::after {
  content: "−";
}

details p {
  padding: 14px 40px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.final-cta {
  padding: 140px 24px;
  text-align: center;
  border-top: 1px solid var(--line);
  background: radial-gradient(circle at 50% 80%, rgba(106, 38, 56, 0.32), transparent 30rem);
}

.final-cta h2 {
  max-width: 790px;
  margin-right: auto;
  margin-left: auto;
}

footer {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid var(--line);
  color: #796f69;
  font-size: 0.72rem;
}

footer p {
  margin: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
}

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

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

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

@keyframes drift {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

@media (max-width: 900px) {
  nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    gap: 2px;
    padding: 10px 24px 22px;
    background: rgba(13, 11, 12, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
  }

  nav.is-open a {
    padding: 13px 0;
    border-bottom: 1px solid rgba(214, 173, 85, 0.12);
    color: var(--ivory);
    font-size: 0.95rem;
  }

  nav.is-open a:last-child {
    border-bottom: none;
  }

  .hero {
    min-height: auto;
    padding: 100px 0 70px;
    grid-template-columns: 1fr;
  }

  .hero-art {
    min-height: 470px;
  }

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

  .feature-card-large {
    grid-column: span 2;
  }

  .premium-section,
  .faq-section {
    grid-template-columns: 1fr;
  }

  .premium-section {
    align-items: start;
  }

  .faq-section {
    gap: 20px;
  }
}

@media (max-width: 620px) {
  .site-header-inner,
  .hero,
  .section,
  .premium-section,
  footer {
    width: min(100% - 30px, 1180px);
  }

  :root {
    --header-height: 68px;
  }

  .header-cta {
    font-size: 0.68rem;
  }

  .header-actions {
    gap: 14px;
  }

  .header-link {
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .hero {
    padding-top: 76px;
    gap: 32px;
  }

  h1 {
    font-size: clamp(3.4rem, 17vw, 5rem);
  }

  .hero-actions {
    display: grid;
  }

  .button {
    width: 100%;
  }

  .hero-art {
    min-height: 390px;
    transform: scale(0.85);
  }

  .trust-strip {
    padding: 24px 15px;
    flex-wrap: wrap;
    gap: 14px 20px;
  }

  .section {
    padding: 90px 0;
  }

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

  .feature-card-large {
    grid-column: span 1;
    min-height: 480px;
  }

  .process-list li {
    grid-template-columns: 55px 1fr;
    gap: 12px;
  }

  .premium-section {
    padding: 48px 26px;
  }

  footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}