:root {
  --plum: #100820;
  --plum-2: #241038;
  --gold: #e7c66e;
  --gold-soft: #f2d98e;
  --ink: #211625;
  --paper: #f8f3ea;
  --muted: #d4c8bf;
  --line: rgba(231, 198, 110, .38);
  --sans: "DM Sans", system-ui, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }

.site-header { align-items: center; backdrop-filter: blur(10px); background: rgba(16, 8, 32, .92); display: flex; gap: 34px; justify-content: space-between; padding: 18px max(5vw, 28px); position: fixed; top: 0; width: 100%; z-index: 10; }
.brand { align-items: center; display: inline-flex; gap: 12px; }
.brand > img:first-child { height: 48px; object-fit: contain; width: 58px; }
.brand-name { color: var(--gold-soft); font-size: 24px; font-weight: 400; letter-spacing: .18em; line-height: 1; }
nav { display: flex; gap: 30px; margin-left: auto; }
nav a { color: #f7ebd3; font-size: 14px; opacity: .9; }
nav a:hover, .text-link:hover { color: var(--gold); }
.button { align-items: center; background: linear-gradient(110deg, #dcb85d, #f0d27e); border-radius: 999px; color: #241625; display: inline-flex; font-size: 15px; font-weight: 700; gap: 10px; justify-content: center; padding: 16px 26px; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { box-shadow: 0 10px 28px rgba(226, 191, 95, .22); transform: translateY(-2px); }
.button-small { font-size: 13px; padding: 12px 18px; }

.hero { background: var(--plum) url("assets/zaaati-hero-cosmic.webp") center / cover; color: var(--paper); display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); min-height: 735px; overflow: hidden; padding: 170px max(8vw, 48px) 80px; position: relative; }
.hero::after { background: linear-gradient(90deg, rgba(16, 8, 32, .88) 0%, rgba(16, 8, 32, .5) 46%, rgba(16, 8, 32, .05) 100%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.hero-copy, .hero-visual { position: relative; }
.hero-copy { align-self: center; max-width: 680px; z-index: 2; }
.hero-visual { z-index: 1; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .28em; margin: 0 0 22px; text-transform: uppercase; }
.gold { color: #b3913d; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-family: var(--serif); font-size: clamp(50px, 6vw, 92px); font-weight: 500; letter-spacing: -.045em; line-height: .98; margin-bottom: 28px; }
h1 em { color: var(--gold); font-style: italic; }
.hero-lead { color: #f2e7da; font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); line-height: 1.3; max-width: 520px; }
.download-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 18px; }
.store-button { align-items: center; background: #0c0811; border: 1px solid rgba(242, 217, 142, .7); border-radius: 12px; color: #fffaf3; display: flex; gap: 10px; min-width: 190px; padding: 10px 16px; }
.store-button span:last-child { display: flex; flex-direction: column; font-size: 18px; font-weight: 700; line-height: 1.05; }
.store-button small { font-size: 9px; font-weight: 400; letter-spacing: .04em; margin-bottom: 4px; opacity: .7; }
.store-icon, .play-icon { color: var(--gold); font-size: 25px; line-height: 1; }
.microcopy { color: var(--gold-soft); font-size: 12px; letter-spacing: .14em; }
.hero-visual { align-self: end; display: flex; justify-content: center; }
.screen-stack { height: 620px; position: relative; transform: translate(-1%, 5%); width: min(520px, 100%); }
.screen-stack img { border: 5px solid #171022; border-radius: 32px; box-shadow: 0 30px 45px rgba(0, 0, 0, .5); display: block; height: auto; position: absolute; }
.screen-main { right: 12%; top: 0; width: 62%; z-index: 3; }
.screen-back { opacity: .72; top: 11%; width: 55%; }
.screen-back-left { left: -7%; transform: rotate(-8deg); }
.screen-back-right { right: 0; transform: rotate(8deg); }

/* Hero de index2: misma composición que index.html, aislada del resto de la página. */
.version-two .hero {
  background: var(--plum) url("assets/zaaati-hero-cosmic.webp") center / cover;
  color: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  min-height: 735px;
  overflow: hidden;
  padding: 170px max(8vw, 48px) 80px;
  position: relative;
}
.version-two .hero::after { background: linear-gradient(90deg, rgba(16, 8, 32, .88) 0%, rgba(16, 8, 32, .5) 46%, rgba(16, 8, 32, .05) 100%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.version-two .hero-copy, .version-two .hero-visual { position: relative; }
.version-two .hero-copy { align-self: center; max-width: 680px; z-index: 2; }
.version-two .hero-visual { align-self: end; display: flex; justify-content: center; z-index: 1; }
.version-two .hero h1 { font-family: var(--serif); font-size: clamp(50px, 6vw, 92px); font-weight: 500; letter-spacing: -.045em; line-height: .98; margin-bottom: 28px; }
.version-two .hero h1 em { color: var(--gold); font-style: italic; }
.version-two .hero .hero-lead { color: #f2e7da; font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); line-height: 1.3; max-width: 520px; }
.version-two .hero .download-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 18px; }
.version-two .hero .store-button { align-items: center; background: #0c0811; border: 1px solid rgba(242, 217, 142, .7); border-radius: 12px; color: #fffaf3; display: flex; gap: 10px; min-width: 190px; padding: 10px 16px; }
.version-two .hero .store-button span:last-child { display: flex; flex-direction: column; font-size: 18px; font-weight: 700; line-height: 1.05; }
.version-two .hero .store-button small { font-size: 9px; font-weight: 400; letter-spacing: .04em; margin-bottom: 4px; opacity: .7; }
.version-two .hero .store-icon, .version-two .hero .play-icon { color: var(--gold); font-size: 25px; line-height: 1; }
.version-two .hero .microcopy { color: var(--gold-soft); font-size: 12px; letter-spacing: .14em; }
.version-two .hero .screen-stack { height: 620px; position: relative; transform: translate(-6%, 5%); width: min(520px, 100%); }
.version-two .hero .screen-stack img { border: 5px solid #171022; border-radius: 32px; box-shadow: 0 30px 45px rgba(0, 0, 0, .5); display: block; height: auto; position: absolute; }
.version-two .hero .screen-main { right: 12%; top: 0; width: 62%; z-index: 3; }
.version-two .hero .screen-main { transition: transform 500ms ease; }
.version-two .hero .screen-main:hover { transform: translateY(-0.5rem); }
.version-two .hero .screen-back { opacity: 1; top: 11%; filter: blur(.5px); transition: all 500ms ease; width: 55%; }
.version-two .hero .screen-back-left { left: -7%; transform: rotate(-12deg) scale(.9); }
.version-two .hero .screen-back-right { right: -12%; transform: rotate(12deg) scale(.9); }
.version-two .hero .screen-back-left:hover { opacity: 1; transform: rotate(-12deg) scale(.95); }
.version-two .hero .screen-back-right:hover { opacity: 1; transform: rotate(12deg) scale(.95); }

.section-narrow { margin: 0 auto; max-width: 1160px; padding: 120px 28px; }
.intro { background: url("assets/zaaati-community-parallax.webp") center / cover fixed; color: var(--paper); max-width: none; position: relative; text-align: center; }
.intro h2, .community h2, .final-cta h2 { font-family: var(--serif); font-size: clamp(34px, 4.2vw, 58px); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; }
.intro .eyebrow { background: rgba(16, 8, 32, .2); color: var(--paper); display: table; margin-left: auto; margin-right: auto; padding: 8px 12px; }
.intro h2 { background: rgba(16, 8, 32, .2); margin-left: auto; margin-right: auto; max-width: 900px; padding: 12px 20px 18px; text-shadow: 0 2px 14px rgba(16, 8, 32, .45); }
.intro p:last-child { background: rgba(16, 8, 32, .2); color: var(--paper); font-size: 18px; line-height: 1.7; margin: 26px auto 0; max-width: 650px; padding: 12px 18px; text-shadow: 0 1px 10px rgba(16, 8, 32, .45); }
.feature-grid { background: linear-gradient(115deg, #100820, #241038); color: var(--paper); display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); max-width: none; padding: 92px max(8vw, 48px); position: relative; }
.feature-grid::before { border-top: 1px solid rgba(231, 198, 110, .35); content: ""; left: max(8vw, 48px); position: absolute; right: max(8vw, 48px); top: 44px; }
.feature-card { background: transparent; border: 0; border-right: 1px solid rgba(231, 198, 110, .25); min-height: 260px; padding: 6px clamp(24px, 4vw, 64px); position: relative; }
.feature-card:first-child { padding-left: 0; }
.feature-card:last-child { border-right: 0; padding-right: 0; }
.feature-card-dark { background: transparent; color: var(--paper); }
.feature-number { color: var(--gold); font-size: 11px; letter-spacing: .22em; opacity: .8; }
.feature-symbol { color: var(--gold); display: block; font-family: var(--serif); font-size: 40px; line-height: 1; margin: 30px 0 22px; }
.feature-card h3 { color: var(--gold-soft); font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1.1; margin-bottom: 16px; }
.feature-card p { color: #d4c8d1; font-size: 15px; line-height: 1.7; margin: 0; max-width: 330px; }
.real-product { align-items: center; display: grid; gap: 70px; grid-template-columns: .82fr 1.18fr; padding-top: 35px; }
.real-product-copy h2 { font-family: var(--serif); font-size: clamp(34px, 4vw, 54px); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; }
.real-product-copy > p:not(.eyebrow) { color: #675a57; font-size: 17px; line-height: 1.7; }
.real-screen-pair { align-items: flex-start; display: flex; gap: 24px; justify-content: center; }
.real-screen-pair figure { margin: 0; width: 43%; }
.real-screen-pair img { border: 5px solid #170c25; border-radius: 25px; box-shadow: 0 22px 40px rgba(35, 19, 48, .2); display: block; width: 100%; }
.real-screen-pair figure:first-child { margin-top: 54px; }
.real-screen-pair figcaption { color: #8d7131; font-size: 12px; letter-spacing: .14em; margin-top: 14px; text-align: center; text-transform: uppercase; }
.version-two .real-product { background: url("assets/horoscopes-constellations.webp") center / cover fixed; display: block; max-width: none; overflow: visible; padding: 0; position: relative; }
.version-two .real-product::before { display: none; }
.version-two .real-product-inner { align-items: start; display: grid; gap: 70px; grid-template-columns: .82fr 1.18fr; margin: 0 auto; max-width: 1160px; min-height: calc(100vh + 220px); padding: 0 28px; position: relative; z-index: 1; }
.version-two .real-product-copy h2 { color: #fff; }
.version-two .real-product-copy > p:not(.eyebrow) { color: #D5C8C6; }
.version-two .real-product-copy { align-self: start; padding: 120px 0; position: sticky; top: 25vh; }
.version-two .real-screen-pair { align-items: stretch; height: calc(100vh + 220px); }
.version-two .real-screen-pair figure { align-items: center; display: flex; flex-direction: column; height: 100%; margin-top: 0; width: 100%; }
.version-two .real-screen-pair img { border: 0; border-radius: 0; box-shadow: none; height: 100%; max-width: 100%; object-fit: contain; width: auto; }
.version-two .ritual-feature { align-items: center; background: linear-gradient(90deg, rgba(16, 8, 32, .45), rgba(16, 8, 32, .18)), url("assets/holistic-practices-wallpaper.webp") center / cover; color: var(--paper); display: flex; justify-content: center; max-width: none; min-height: 680px; overflow: hidden; padding: 120px max(8vw, 48px); position: relative; }
.version-two .ritual-copy { margin: 0 auto; max-width: 760px; position: relative; text-align: center; z-index: 1; }
.version-two .ritual-copy h2 { color: var(--paper); }
.version-two .ritual-copy > p:not(.eyebrow) { color: #D5C8C6; }
.community { background: var(--plum); color: var(--paper); display: grid; grid-template-columns: 1.15fr .85fr; min-height: 550px; }
.community-image { background: url("assets/zaaati-community.webp") center / cover; min-height: 550px; }
.community-copy { align-self: center; max-width: 520px; padding: 60px clamp(36px, 7vw, 110px) 60px 70px; }
.community-copy h2 { color: var(--gold-soft); }
.community-copy > p:not(.eyebrow) { color: #d5c8c6; font-size: 17px; line-height: 1.7; }
.text-link { color: var(--gold); display: inline-flex; font-size: 15px; font-weight: 700; gap: 12px; margin-top: 20px; }
.manifesto { align-items: end; display: grid; gap: 70px; grid-template-columns: 1fr 1fr; max-width: 1120px; padding-bottom: 95px; padding-top: 145px; }
.manifesto h2, .circle-feature h2, .daily-suite h2, .seal-feature h2, .ritual-feature h2 { font-family: var(--serif); font-size: clamp(36px, 4.5vw, 64px); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; margin: 0; }
.manifesto-copy { color: #675a57; font-size: 19px; line-height: 1.7; margin: 0; max-width: 500px; }
.name-origin { align-items: center; border-top: 1px solid rgba(141, 113, 49, .28); display: grid; gap: 8vw; grid-template-columns: .7fr 1.3fr; max-width: 1120px; padding-bottom: 110px; padding-top: 105px; }
.name-origin-mark { color: var(--gold); font-family: Georgia, serif; font-size: clamp(70px, 10vw, 150px); line-height: 1; opacity: .85; }
.name-origin-copy { max-width: 650px; }
.name-origin-brand { align-items: center; display: inline-flex; gap: 10px; margin-bottom: 22px; }
.name-origin-brand .brand-name { color: var(--plum); font-size: clamp(30px, 4vw, 48px); }
.name-origin-copy h2 { font-family: var(--serif); font-size: clamp(34px, 4.5vw, 62px); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; margin: 0 0 24px; }
.name-origin-copy > p:not(.eyebrow) { color: #675a57; font-size: 18px; line-height: 1.7; margin: 0; max-width: 600px; }
.name-origin-copy em { color: #8d7131; font-family: var(--serif); }
.experience-grid { background: #f0e8dc; display: grid; grid-template-columns: 1.2fr 1fr 1fr; padding: 0 max(8vw, 48px); }
.experience-card { border-left: 1px solid rgba(141, 113, 49, .3); min-height: 360px; padding: 72px clamp(25px, 4vw, 64px); position: relative; }
.experience-card:first-child { border-left: 0; padding-left: 0; }
.experience-card-featured { background: var(--plum); color: var(--paper); margin: 0 0 -1px; }
.experience-kicker, .daily-label { color: #977631; display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.experience-card-featured .experience-kicker { color: var(--gold); }
.experience-card h3 { font-family: var(--serif); font-size: clamp(28px, 3vw, 42px); font-weight: 500; letter-spacing: -.03em; line-height: 1.08; margin: 80px 0 18px; max-width: 380px; }
.experience-card:not(.experience-card-featured) h3 { margin-top: 80px; }
.experience-card p { color: #675a57; font-size: 16px; line-height: 1.65; margin: 0; max-width: 340px; }
.experience-card-featured p { color: #d7cbd2; }
.experience-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.experience-pills span { border: 1px solid rgba(231, 198, 110, .5); border-radius: 999px; color: var(--gold-soft); font-size: 12px; padding: 8px 12px; }
.experience-arrow { bottom: 62px; color: #a17f35; font-size: 25px; position: absolute; right: 28px; }

/* Alternative wireframe layout: same composition, using the existing palette. */
.version-two .manifesto { background: var(--plum); color: var(--paper); display: block; max-width: none; padding: 48px max(5vw, 24px) 42px; }
.version-two .manifesto-heading { max-width: 780px; }
.version-two .manifesto h2 { color: var(--paper); font-size: clamp(30px, 3.8vw, 56px); }
.version-two .manifesto-copy { color: #d7cbd2; font-size: 16px; margin-top: 18px; max-width: 720px; }
.version-two .experience-grid { background: var(--plum); gap: 18px; margin-top: 0; padding: 0 max(5vw, 24px) 42px; }
.version-two .experience-card,
.version-two .experience-card:first-child { background: rgba(248, 243, 234, .045); border: 1px solid rgba(248, 243, 234, .035); border-radius: 17px; color: var(--paper); min-height: 214px; overflow: hidden; padding: 24px clamp(22px, 2.5vw, 34px) 22px; position: relative; }
.version-two .experience-card-featured { background: rgba(16, 8, 32, .72); border-color: rgba(231, 198, 110, .18); }
.version-two .experience-card::after,
.version-two .experience-card-featured::before { display: none; }
.version-two .experience-card h3,
.version-two .experience-card:not(.experience-card-featured) h3 { color: var(--paper); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.08; margin: 40px 0 12px; max-width: 340px; position: relative; z-index: 1; }
.version-two .experience-card-featured h3 { color: var(--gold-soft); }
.version-two .experience-card p { color: #d7cbd2; font-size: 12px; line-height: 1.5; max-width: 285px; position: relative; z-index: 1; }
.version-two .experience-card-featured p { color: #d7cbd2; max-width: 330px; }
.version-two .experience-pills { margin-top: auto; padding-top: 18px; position: relative; z-index: 1; }
.version-two .experience-pills span { background: rgba(248, 243, 234, .08); border: 0; border-radius: 999px; color: #d7cbd2; font-size: 9px; letter-spacing: .02em; padding: 5px 9px; }
.version-two .experience-pills span + span::before { content: none; }
.version-two .experience-arrow { color: var(--gold); right: clamp(22px, 2.5vw, 34px); top: 20px; }
.version-two .experience-arrow-back { left: clamp(22px, 2.5vw, 34px); right: auto; }
.version-two .experience-action { bottom: 22px; color: var(--gold-soft); font-size: 9px; font-weight: 700; left: clamp(22px, 2.5vw, 34px); letter-spacing: .06em; position: absolute; text-transform: uppercase; }
.version-two .experience-action span { font-size: 13px; margin-left: 4px; }
.version-two .ecosystem-section { background: var(--plum); color: var(--paper); padding: 96px max(5vw, 24px) 104px; }
.version-two .ecosystem-intro { align-items: center; column-gap: clamp(32px, 6vw, 92px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr); margin: 0 auto 58px; max-width: 1120px; }
.version-two .ecosystem-intro .eyebrow { color: var(--gold-soft); margin-bottom: 16px; }
.version-two .ecosystem-intro h2 { font-family: var(--serif); font-size: clamp(36px, 5vw, 64px); font-weight: 500; letter-spacing: -.04em; line-height: 1.02; margin: 0 0 24px; max-width: 780px; }
.version-two .ecosystem-intro > p:last-child { color: #d7cbd2; font-size: 17px; line-height: 1.7; margin: 0; max-width: 720px; }
.version-two .ecosystem-visual { align-self: center; grid-column: 2; grid-row: 1 / span 3; justify-self: end; max-width: 380px; width: 100%; }
.version-two .ecosystem-visual img { display: block; height: auto; width: 100%; }
.version-two .ecosystem-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin: 0 auto; max-width: 1280px; }
.version-two .ecosystem-card { background: var(--plum); border: 1px solid rgba(231, 198, 110, .18); border-radius: 18px; display: flex; flex-direction: column; min-height: 300px; padding: 26px 28px 24px; }
.version-two .ecosystem-card-featured { background: var(--plum); border: 1px solid rgba(231, 198, 110, .18); }
.version-two .ecosystem-card-top { align-items: center; color: var(--gold-soft); display: flex; font-size: 11px; font-weight: 600; justify-content: space-between; letter-spacing: .16em; text-transform: uppercase; }
.version-two .ecosystem-card-top span:last-child { font-size: 24px; font-weight: 400; letter-spacing: 0; line-height: 1; }
.version-two .ecosystem-card h3 { color: var(--paper); font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.15; margin: 34px 0 14px; }
.version-two .ecosystem-card-featured h3 { color: var(--gold-soft); }
.version-two .ecosystem-card p { color: #d7cbd2; font-size: 13px; line-height: 1.55; margin: 0; max-width: 360px; }
.version-two .ecosystem-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; }
.version-two .ecosystem-tags span { background: rgba(248, 243, 234, .08); border-radius: 999px; color: #d7cbd2; font-size: 10px; padding: 6px 10px; }
.version-two .ecosystem-card > a { color: var(--gold-soft); font-size: 10px; font-weight: 700; letter-spacing: .08em; margin-top: auto; padding-top: 24px; text-transform: uppercase; }
.version-two .ecosystem-card > a span { font-size: 14px; margin-left: 4px; }
.version-two .circle-feature-source > div { max-width: none; padding-left: max(5vw, 28px) !important; padding-right: 0 !important; }
.version-two .circle-feature-source > div > .grid { column-gap: 0 !important; }
.version-two .circle-feature-source { padding-bottom: 80px; padding-top: 50px; }
.version-two .circle-feature-source .circle-feature-copy > span.font-label-sm { color: var(--gold); display: block !important; font-family: var(--sans) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .28em !important; line-height: 1.2 !important; margin-bottom: 22px !important; }
.version-two .circle-feature-source .grid { align-items: stretch !important; }
.version-two .circle-stage-visual { align-items: stretch; align-self: stretch; display: flex; justify-content: stretch; min-height: 100%; overflow: hidden; position: relative; width: 100%; }
.version-two .circle-stage-visual::before, .version-two .circle-stage-visual::after { display: none; }
.version-two .circle-stage-image { border: 0; border-radius: 0; box-shadow: none; display: block; height: 100%; max-width: none; object-fit: cover; padding: 0; position: relative; transform: none; width: 100%; z-index: 1; }
.version-two .circle-feature-source h2 { color: var(--paper) !important; font-family: var(--serif) !important; font-size: clamp(34px, 3.2vw, 40px) !important; font-weight: 500 !important; letter-spacing: -.04em !important; line-height: 1.04 !important; margin-bottom: 24px !important; max-width: 780px; }
.version-two .circle-feature-source p.font-body-lg { color: #d7cbd2 !important; font-family: var(--sans) !important; font-size: 15px !important; line-height: 1.6 !important; max-width: 780px; }
.version-two .circle-feature { background: var(--plum); display: block; margin: 0; max-width: none; padding: 112px max(5vw, 24px); }
.version-two .circle-feature-inner { align-items: center; display: grid; gap: 5rem; grid-template-columns: 5fr 7fr; margin: 0 auto; max-width: 1280px; }
.version-two .circle-feature-image { border: 0; box-shadow: none; max-width: 320px; overflow: visible; position: relative; }
.version-two .circle-device { background: var(--plum-2); border: 1px solid rgba(231, 198, 110, .2); border-radius: 38px; box-shadow: 0 24px 50px rgba(0, 0, 0, .45); margin: 0 auto; max-width: 286px; padding: 8px; }
.version-two .circle-device img { border-radius: 30px; display: block; width: 100%; }
.version-two .circle-active-badge { background: rgba(56, 50, 66, .9); border-radius: 14px; bottom: -12px; box-shadow: 0 12px 28px rgba(0, 0, 0, .3); color: var(--paper); font-size: 10px; left: 50%; letter-spacing: .06em; padding: 10px 14px; position: absolute; transform: translateX(-20%); white-space: nowrap; }
.version-two .circle-feature-copy { max-width: 620px; }
.version-two .circle-feature h2 { color: var(--paper); font-size: clamp(34px, 3.2vw, 40px); margin-bottom: 24px; }
.version-two .circle-feature-copy > p:not(.eyebrow) { color: #d7cbd2; font-size: 15px; line-height: 1.6; }
.version-two .circle-details { border: 0; margin: 32px 0 34px; max-width: 560px; }
.version-two .circle-details div { align-items: center; background: var(--plum-2); border: 0; border-radius: 12px; display: flex; gap: 14px; margin-bottom: 10px; min-height: 72px; padding: 16px; }
.version-two .circle-details .circle-detail-icon { align-items: center; background: rgba(231, 198, 110, .12); border-radius: 50%; color: var(--gold-soft); display: inline-flex; flex: 0 0 32px; font-size: 18px; height: 32px; justify-content: center; width: 32px; }
.version-two .circle-details div > div { background: transparent; border-radius: 0; display: block; margin: 0; padding: 0; }
.version-two .circle-details strong { color: var(--paper); display: block; font-family: var(--serif); font-size: 14px; margin-bottom: 3px; }
.version-two .circle-details div > div > span { color: #bfb1c2; font-size: 11px; }
.circle-feature { align-items: center; background: var(--plum); color: var(--paper); display: grid; gap: 8vw; grid-template-columns: 1.05fr .95fr; padding: 120px max(8vw, 48px); }
.circle-feature-image { border: 1px solid rgba(231, 198, 110, .35); box-shadow: 0 30px 65px rgba(0, 0, 0, .35); max-width: 610px; overflow: hidden; }
.circle-feature-image img { display: block; width: 100%; }
.circle-feature-copy { max-width: 570px; }
.circle-feature h2 { color: var(--gold-soft); margin-bottom: 25px; }
.circle-feature-copy > p:not(.eyebrow) { color: #d8cbd2; font-size: 17px; line-height: 1.7; }
.circle-details { border-top: 1px solid rgba(231, 198, 110, .3); margin-top: 34px; }
.circle-details div { border-bottom: 1px solid rgba(231, 198, 110, .18); display: grid; gap: 14px; grid-template-columns: 120px 1fr; padding: 16px 0; }
.circle-details strong { color: var(--gold-soft); font-size: 14px; }
.circle-details span { color: #c9bbc7; font-size: 14px; }
.daily-suite { max-width: 1200px; }
.daily-suite-intro { align-items: end; display: grid; gap: 50px; grid-template-columns: 1fr 1fr; margin-bottom: 65px; }
.daily-suite-intro h2 { grid-column: 1 / -1; max-width: 760px; }
.daily-suite-intro > p:last-child { color: #675a57; font-size: 17px; line-height: 1.7; margin: 0 0 5px; max-width: 400px; }
.daily-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.daily-card { border: 1px solid #d9c7a0; min-height: 310px; padding: 30px; position: relative; }
.daily-card-lunar { background: #efe6d5; }
.daily-card-tarot { background: var(--plum); color: var(--paper); }
.daily-card-notifications { background: #e8ddcf; }
.daily-icon { color: #a5802d; display: block; font-family: var(--serif); font-size: 38px; line-height: 1; margin-bottom: 25px; }
.daily-card-tarot .daily-icon, .daily-card-tarot .daily-label { color: var(--gold); }
.daily-card h3 { font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.08; margin: 54px 0 15px; }
.daily-card p { color: #675a57; font-size: 14px; line-height: 1.65; margin: 0; }
.daily-card-tarot p { color: #d6cad2; }
.feature-story { align-items: stretch; display: grid; gap: 0; grid-template-columns: 1fr 1fr; min-height: 680px; padding: 0; }
.feature-story-lunar { background: #eee4d2; }
.feature-story-tarot { background: var(--plum); color: var(--paper); grid-template-columns: 1fr 1fr; }
.feature-story-notifications { background: #e6dccc; }
.feature-story-image { box-shadow: none; min-height: 680px; overflow: hidden; }
.feature-story-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.feature-story-copy { align-self: center; max-width: 620px; padding: 90px max(6vw, 48px); }
.feature-story-lunar .feature-story-copy, .feature-story-notifications .feature-story-copy { padding-right: max(8vw, 70px); }
.feature-story-tarot .feature-story-copy { justify-self: end; padding-left: max(8vw, 70px); }
.feature-story-copy h2 { margin-bottom: 25px; }
.feature-story-copy > p:not(.eyebrow) { color: #675a57; font-size: 18px; line-height: 1.75; }
.feature-story-tarot .feature-story-copy > p:not(.eyebrow) { color: #d8cbd2; }
.version-two .feature-story-copy .eyebrow { font-size: 13px; }
.version-two .feature-story-copy h2 { font-size: clamp(36px, 4.2vw, 60px); }
.version-two .feature-story-copy > p:not(.eyebrow) { font-size: 20px; }
.version-two .feature-story-copy > .text-link { font-size: 17px; }
.version-two .feature-story-tarot .feature-story-copy .eyebrow,
.version-two .feature-story-tarot .feature-story-copy > .text-link { color: var(--gold-soft); }
.version-two .feature-story-lunar .feature-story-copy .eyebrow,
.version-two .feature-story-lunar .feature-story-copy > .text-link,
.version-two .feature-story-notifications .feature-story-copy .eyebrow,
.version-two .feature-story-notifications .feature-story-copy > .text-link { color: #8d7131; }
.version-two .feature-story-lunar .feature-story-copy h2 {
  color: #211625;
  font-family: var(--serif);
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.06;
}
.version-two .feature-story-tarot .feature-story-copy h2,
.version-two .feature-story-notifications .feature-story-copy h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.06;
}
.seal-feature { align-items: center; background: linear-gradient(120deg, #160b27, #2d1541); color: var(--paper); display: grid; gap: 8vw; grid-template-columns: 1fr .8fr; min-height: 680px; overflow: hidden; padding: 100px max(8vw, 48px); }
.seal-feature-copy { max-width: 610px; }
.seal-feature h2 { color: var(--gold-soft); margin-bottom: 24px; }
.seal-feature-copy > p:not(.eyebrow) { color: #d8cbd2; font-size: 17px; line-height: 1.7; }
.seal-list { border-top: 1px solid rgba(231, 198, 110, .3); display: grid; margin: 35px 0; }
.seal-list span { border-bottom: 1px solid rgba(231, 198, 110, .18); color: #d8cbd2; font-size: 14px; padding: 15px 0; }
.seal-list b { color: var(--gold); font-size: 11px; letter-spacing: .15em; margin-right: 18px; }
.seal-visual { justify-self: center; max-width: 360px; transform: rotate(5deg); }
.seal-visual img { border: 5px solid #171022; border-radius: 32px; box-shadow: 0 30px 50px rgba(0, 0, 0, .45); display: block; width: 100%; }
.ritual-feature { align-items: center; display: grid; gap: 9vw; grid-template-columns: .72fr 1.28fr; max-width: 1100px; }
.ritual-visual { max-width: 320px; transform: rotate(-4deg); }
.ritual-visual img { border: 5px solid #170c25; border-radius: 25px; box-shadow: 0 22px 40px rgba(35, 19, 48, .22); display: block; width: 100%; }
.ritual-copy { max-width: 610px; }
.ritual-copy h2 { margin-bottom: 24px; }
.ritual-copy > p:not(.eyebrow) { color: #675a57; font-size: 17px; line-height: 1.7; }
.quote { max-width: 900px; text-align: center; }
.quote-mark { color: var(--gold); font-family: var(--serif); font-size: 80px; line-height: .5; }
blockquote { font-family: var(--serif); font-size: clamp(28px, 3.5vw, 48px); font-style: italic; line-height: 1.18; margin: 25px 0; }
.quote p { color: #a37f36; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.final-cta { background: linear-gradient(130deg, #26103f, #100820); color: var(--paper); padding: 105px 28px; text-align: center; }
.final-cta h2 { color: var(--gold-soft); margin-bottom: 32px; }
.final-cta-brand-line { color: var(--paper); display: inline-block; font-family: var(--sans); font-size: 1em; font-weight: 400; letter-spacing: normal; }
.site-footer { align-items: center; background: #0b0615; color: #bfb1ac; display: flex; font-size: 12px; justify-content: space-between; padding: 25px max(5vw, 28px); }
.footer-brand > img:first-child { height: 32px; width: 39px; }
.footer-brand .brand-name { font-size: 16px; }

@media (max-width: 850px) {
  .site-header { gap: 16px; padding: 14px 20px; }
  nav { display: none; }
  .hero { display: block; min-height: 820px; padding: 145px 25px 0; }
  .hero-copy { max-width: 600px; }
  h1 { font-size: clamp(48px, 13vw, 74px); }
  .hero-visual { margin: -10px auto 0; max-width: 580px; }
  .screen-stack { height: 570px; transform: translate(-1%, 0); }
  .screen-main { right: 12%; width: 61%; }
  .screen-back { width: 54%; }
  .version-two .hero { display: block; min-height: 820px; padding: 145px 25px 0; }
  .version-two .hero-copy { max-width: 600px; }
  .version-two .hero h1 { font-size: clamp(48px, 13vw, 74px); }
  .version-two .hero-visual { margin: -10px auto 0; max-width: 580px; }
  .version-two .hero .screen-stack { height: 570px; transform: translate(-6%, 0); }
  .version-two .hero .screen-main { right: 12%; width: 61%; }
  .version-two .hero .screen-back { width: 54%; }
  .version-two .real-product { background-attachment: scroll; }
  .version-two .real-product-inner { grid-template-columns: 1fr; gap: 30px; min-height: 0; }
  .version-two .real-product-copy { padding: 85px 0; position: static; }
  .version-two .real-screen-pair { height: auto; }
  .feature-grid, .community { grid-template-columns: 1fr; }
  .intro { background-attachment: scroll; }
  .feature-grid { padding: 75px 28px; }
  .feature-grid::before { left: 28px; right: 28px; top: 35px; }
  .feature-card, .feature-card:first-child, .feature-card:last-child { border-bottom: 1px solid rgba(231, 198, 110, .25); border-right: 0; min-height: 0; padding: 34px 0; }
  .feature-card:last-child { border-bottom: 0; }
  .manifesto, .name-origin, .circle-feature, .seal-feature, .ritual-feature { grid-template-columns: 1fr; }
  .manifesto { gap: 28px; padding-bottom: 80px; padding-top: 95px; }
  .name-origin { gap: 32px; padding-bottom: 80px; padding-top: 80px; }
  .name-origin-mark { font-size: 88px; }
  .experience-grid, .daily-grid { grid-template-columns: 1fr; }
  .experience-card, .experience-card:first-child { border-bottom: 1px solid rgba(141, 113, 49, .3); border-left: 0; min-height: 0; padding: 46px 0; }
  .version-two .experience-card { min-height: 0; padding-bottom: 46px; padding-top: 46px; }
  .version-two .experience-card + .experience-card { border-left: 0; }
  .version-two .ecosystem-section { padding-bottom: 80px; padding-top: 78px; }
  .version-two .ecosystem-intro { margin-bottom: 38px; }
  .version-two .ecosystem-intro { display: block; }
  .version-two .ecosystem-visual { margin: 36px auto 0; max-width: 300px; }
  .version-two .ecosystem-grid { grid-template-columns: 1fr; }
  .version-two .ecosystem-card { min-height: 260px; }
  .experience-card-featured { padding-left: 28px; padding-right: 28px; }
  .experience-card h3, .experience-card:not(.experience-card-featured) h3 { margin-top: 38px; }
  .experience-arrow { bottom: 45px; right: 0; }
  .circle-feature { gap: 45px; padding: 80px 28px; }
  .version-two .circle-feature { padding: 80px 28px; }
  .version-two .circle-feature-inner { gap: 48px; grid-template-columns: 1fr; }
  .version-two .circle-feature-image { max-width: 300px; }
  .version-two .circle-stage-visual { min-height: 320px; }
  .version-two .circle-stage-image { height: auto; }
  .daily-suite-intro { display: block; margin-bottom: 40px; }
  .daily-suite-intro h2 { margin-bottom: 25px; }
  .daily-card { min-height: 245px; }
  .feature-story, .feature-story-tarot { grid-template-columns: 1fr; min-height: 0; padding: 0; }
  .feature-story-image { min-height: 420px; }
  .feature-story-copy, .feature-story-lunar .feature-story-copy, .feature-story-notifications .feature-story-copy, .feature-story-tarot .feature-story-copy { justify-self: stretch; max-width: none; padding: 75px 28px 85px; }
  .feature-story-tarot .feature-story-copy { order: 1; }
  .feature-story-tarot .feature-story-image { order: 2; }
  .seal-feature { gap: 50px; padding: 80px 28px; }
  .seal-visual { max-width: 280px; }
  .ritual-feature { gap: 42px; }
  .ritual-visual { justify-self: center; }
  .version-two .ritual-feature { min-height: 620px; padding: 85px 28px; }
  .version-two .ritual-copy { margin-left: 0; }
  .real-product { grid-template-columns: 1fr; gap: 30px; }
  .community-image { min-height: 330px; }
  .community-copy { padding: 65px 28px 75px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro { background-attachment: scroll; }
}

@media (max-width: 500px) {
  .site-header .button-small { font-size: 11px; padding: 10px 12px; }
  .brand > img:first-child { height: 40px; width: 48px; }
  .brand-name { font-size: 19px; letter-spacing: .18em; }
  .hero { min-height: 735px; }
  .screen-stack { height: 470px; }
  .hero-lead { font-size: 20px; }
  .version-two .hero { min-height: 735px; }
  .version-two .hero .screen-stack { height: 470px; }
  .version-two .hero .hero-lead { font-size: 20px; }
  .store-button { flex: 1; min-width: 0; }
  .store-button span:last-child { font-size: 15px; }
  .section-narrow { padding: 85px 20px; }
}