:root {
  --ink: #241c30;
  --violet: #493965;
  --night: #201a31;
  --lavender: #aa90c2;
  --blush: #edb7bd;
  --cream: #f7efe5;
  --paper: #fffaf4;
  --gold: #bd8d3c;
  --muted: #776d78;
  --line: rgba(47, 33, 56, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font-family: "Manrope", sans-serif; }
body::selection { background: #ccb7d9; color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.page-grain { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .055; 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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }

.header { position: absolute; top: 0; left: 50%; z-index: 20; width: min(1460px, calc(100% - 72px)); height: 92px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; transform: translateX(-50%); border-bottom: 1px solid rgba(54,36,63,.17); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 10px; letter-spacing: .18em; }.brand span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--gold); font-family: Georgia, serif; font-size: 16px; }.brand b { font-weight: 600; }
nav { display: flex; gap: 36px; font-size: 10px; }nav a { position: relative; }nav a::after { content: ""; position: absolute; right: 0; bottom: -6px; left: 0; height: 1px; transform: scaleX(0); background: currentColor; transition: transform .25s; }nav a:hover::after { transform: scaleX(1); }
.header-action { justify-self: end; font-size: 10px; font-weight: 600; }.header-action span { margin-left: 10px; color: var(--gold); }

.hero { position: relative; min-height: 850px; display: grid; grid-template-columns: minmax(420px, .88fr) minmax(520px, 1.12fr); grid-template-areas: "copy object"; align-items: center; overflow: hidden; padding: 110px max(42px, calc((100vw - 1400px)/2)) 42px; background: radial-gradient(circle at 78% 40%, #f4dce0 0, #eee0e8 24%, #f6eee5 62%); }
.hero::before { content: ""; position: absolute; top: 0; right: -13%; width: 65%; height: 100%; opacity: .25; background: repeating-radial-gradient(ellipse at center, transparent 0 100px, #9e84af 101px 102px); transform: rotate(-8deg); }
.hero-copy { grid-area: copy; position: relative; z-index: 4; align-self: center; max-width: 650px; animation: copyIn .9s .08s both cubic-bezier(.2,.75,.2,1); }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 25px; color: #6f5b78; font-size: 9px; font-weight: 600; letter-spacing: .22em; }.kicker i { width: 38px; height: 1px; background: currentColor; }.kicker.light { color: #c8b6d4; }
h1, h2 { margin: 0; font-family: "Bodoni Moda", Didot, serif; font-weight: 400; letter-spacing: -.055em; line-height: .95; }
h1 { font-size: clamp(66px, 6.3vw, 106px); }h1 em { color: #9d7692; font-weight: 400; }
.hero-deck { max-width: 535px; margin: 30px 0 34px; color: #665c68; font-size: 15px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 30px; }.pill { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; gap: 34px; padding: 0 25px; border: 0; border-radius: 100px; cursor: pointer; font-size: 10px; font-weight: 600; }.pill span { font-size: 15px; }.pill-dark { background: var(--ink); color: white; box-shadow: 0 13px 30px rgba(36,28,48,.16); }.pill-blush { background: var(--blush); color: var(--ink); }.underlink { padding: 10px 0 6px; border-bottom: 1px solid #a695a5; font-size: 10px; }.underlink span { margin-left: 12px; color: var(--gold); }
.hero-facts { display: flex; gap: 26px; margin: 48px 0 0; padding: 21px 0 0; border-top: 1px solid var(--line); list-style: none; color: #665d67; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }.hero-facts li { display: flex; gap: 8px; }.hero-facts span { color: var(--gold); }
.hero-object { grid-area: object; position: relative; z-index: 3; width: 100%; height: 700px; display: grid; place-items: center; perspective: 1200px; animation: objectIn 1.2s .15s both cubic-bezier(.16,.8,.22,1); }.hero-object > img { position: relative; z-index: 4; width: min(660px, 48vw); max-height: 700px; object-fit: contain; transform: translate3d(var(--move-x,0),var(--move-y,0),0) rotate(-1.5deg); filter: drop-shadow(0 42px 35px rgba(71,48,68,.25)); transition: transform .3s ease-out; animation: breathe 5s 1.4s ease-in-out infinite; }.hero-sun { position: absolute; width: min(560px, 42vw); aspect-ratio: 1; border-radius: 50%; background: rgba(255,248,233,.88); box-shadow: 0 0 100px rgba(255,246,229,.8); }.hero-orbit { position: absolute; border: 1px solid rgba(102,77,112,.2); border-radius: 50%; }.orbit-a { width: 78%; aspect-ratio: 1; transform: rotate(19deg); animation: orbitSpin 30s linear infinite; }.orbit-a::after { content: "✦"; position: absolute; top: 12%; left: 12%; color: var(--gold); }.orbit-b { width: 95%; aspect-ratio: 1; transform: rotate(-28deg); animation: orbitSpinBack 42s linear infinite; }.orbit-b::after { content: "☾"; position: absolute; right: 7%; bottom: 23%; color: #9f7cac; font-size: 22px; }
.hero-star { position: absolute; z-index: 2; color: var(--gold); animation: twinkle 2.4s ease-in-out infinite; }.star-a { top: 12%; right: 16%; font-size: 22px; }.star-b { bottom: 14%; left: 12%; font-size: 30px; animation-delay: -.9s; }.star-c { top: 45%; left: 3%; font-size: 12px; animation-delay: -1.5s; }
.object-note { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; color: #756575; font-size: 7px; letter-spacing: .14em; line-height: 1.5; }.object-note i { width: 52px; height: 1px; background: #9d8998; }.note-size { left: 1%; bottom: 20%; }.note-prototype { top: 19%; right: 0; }
.hero-index { position: absolute; right: 34px; bottom: 40px; display: flex; align-items: center; gap: 10px; transform: rotate(90deg) translateX(100%); transform-origin: right bottom; color: #8d7e8b; font-size: 7px; letter-spacing: .15em; }.hero-index b { color: var(--gold); }.hero-index span { width: 52px; height: 1px; background: #ad9eaa; }
@keyframes copyIn { from { opacity: 0; transform: translateX(-35px); } }
@keyframes objectIn { from { opacity: 0; transform: translateX(55px) scale(.94); } }
@keyframes breathe { 50% { transform: translate3d(var(--move-x,0),calc(var(--move-y,0) - 9px),0) rotate(.5deg); } }
@keyframes orbitSpin { to { transform: rotate(379deg); } }@keyframes orbitSpinBack { to { transform: rotate(-388deg); } }
@keyframes twinkle { 50% { opacity: .2; transform: scale(.65) rotate(30deg); } }

.ribbon { position: relative; z-index: 8; width: 104%; margin-left: -2%; overflow: hidden; transform: rotate(-1.2deg); color: white; background: var(--violet); box-shadow: 0 8px 25px rgba(43,30,53,.13); }.ribbon div { width: max-content; padding: 14px 0; font-family: "Bodoni Moda", serif; font-size: 14px; letter-spacing: .12em; animation: marquee 25s linear infinite; }@keyframes marquee { to { transform: translateX(-50%); } }
.section-pad { padding: 125px max(5vw, calc((100vw - 1280px)/2)); }.opening { min-height: 540px; display: grid; grid-template-columns: .2fr 1.15fr .65fr; gap: 75px; align-items: center; background: var(--paper); }.opening-mark { align-self: start; color: #b9914d; font-family: Georgia, serif; font-size: 64px; }.opening-copy { margin: 0; font-family: "Bodoni Moda", serif; font-size: clamp(42px, 4.2vw, 67px); letter-spacing: -.04em; line-height: 1.1; }.opening-copy em { color: #997d9c; }.opening-aside { align-self: end; padding: 20px 0; border-top: 1px solid var(--line); }.opening-aside span { color: var(--gold); font-size: 8px; letter-spacing: .2em; }.opening-aside p { margin: 15px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.72,.2,1); }.reveal.visible { opacity: 1; transform: none; }

.experience { color: white; background: var(--night); }.experience-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; padding-bottom: 70px; }.experience-head .kicker { grid-column: 1 / -1; }.experience h2, .object-section h2, .feedback h2 { font-size: clamp(54px, 5.5vw, 88px); }.experience h2 em, .object-section h2 em, .feedback h2 em { color: #d5aabf; font-weight: 400; }.experience-head > p:last-child { align-self: end; max-width: 430px; margin: 0 0 7px; color: rgba(255,255,255,.54); font-size: 13px; line-height: 1.75; }
.experience-body { display: grid; grid-template-columns: 1fr .9fr; gap: 100px; align-items: center; padding-top: 0; padding-bottom: 80px; }.product-demo { position: relative; min-height: 660px; display: grid; place-items: center; }.demo-aura { position: absolute; width: 75%; aspect-ratio: 1; border-radius: 50%; background: #6e4f7b; filter: blur(75px); opacity: .48; animation: auraPulse 4s ease-in-out infinite; }@keyframes auraPulse { 50% { opacity: .7; transform: scale(1.08); } }
.device-stage { position: relative; z-index: 2; width: min(600px, 47vw); aspect-ratio: 671/691; container-type: inline-size; }.device-stage > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 35px 38px rgba(0,0,0,.25)); }.device-screen { --accent: #a993ff; position: absolute; top: 35%; left: 31.15%; z-index: 1; width: 35.77%; height: 37.48%; padding: 2.1cqw 2.4cqw; overflow: hidden; border-radius: 4.2cqw; background: #0d0c13; color: white; transition: background .35s; }.device-screen.tools { --accent: #ff9cae; }.device-screen.changing { animation: screenChange .38s ease; }@keyframes screenChange { 45% { opacity: 0; transform: scale(.96); } }
.screen-bar { display: flex; justify-content: space-between; color: var(--accent); font-size: 1.35cqw; font-weight: 600; letter-spacing: .12em; }.screen-bar span:last-child { color: rgba(255,255,255,.35); }.screen-title { margin-top: 2.6cqw; color: var(--accent); font-size: 3.1cqw; font-weight: 600; letter-spacing: .02em; text-align: center; }.screen-subtitle { margin-top: .7cqw; color: rgba(255,255,255,.4); font-size: 1.25cqw; letter-spacing: .08em; text-align: center; }.screen-copy { margin: 5cqw .8cqw 0; font-size: 2.05cqw; line-height: 1.45; text-align: center; }.screen-footer { position: absolute; right: 2.4cqw; bottom: 1.8cqw; left: 2.4cqw; display: flex; justify-content: space-between; color: rgba(255,255,255,.35); font-size: 1.12cqw; }.screen-footer i { color: var(--accent); font-style: normal; letter-spacing: .12em; }
.screen-ratings { margin-top: 2.1cqw; }.screen-ratings div, .screen-sky div { display: flex; justify-content: space-between; padding: 1.25cqw .4cqw; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 1.7cqw; }.screen-ratings b { color: var(--accent); letter-spacing: .05em; }.screen-sky { margin-top: 2cqw; }.screen-sky div { padding: 1.5cqw .5cqw; }.quest-streak { margin: 2.2cqw 0; color: #6ad28b; font-size: 1.4cqw; letter-spacing: .15em; text-align: center; }.quest-card-screen { margin: 2cqw 0; padding: 3.2cqw 1.5cqw; border: 1px solid rgba(255,156,174,.48); border-radius: 1.6cqw; font-size: 1.8cqw; line-height: 1.45; text-align: center; }.tarot-mini { width: 10cqw; height: 14cqw; margin: 2.4cqw auto 1.2cqw; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 1cqw; color: var(--accent); font-size: 4cqw; }.tarot-name-screen { color: var(--accent); font-size: 2.3cqw; font-weight: 600; text-align: center; }.tarot-meaning-screen { margin-top: .7cqw; color: rgba(255,255,255,.45); font-size: 1.15cqw; letter-spacing: .1em; text-align: center; }.compat-orbits { display: flex; justify-content: center; margin: 2.2cqw 0; }.compat-orbits i { width: 7cqw; height: 7cqw; border: 1px solid var(--accent); border-radius: 50%; background: rgba(255,156,174,.1); }.compat-orbits i + i { margin-left: -1.8cqw; }.compat-copy { padding: 2.4cqw 1.3cqw; border: 1px solid rgba(255,156,174,.4); border-radius: 1.2cqw; font-size: 1.75cqw; line-height: 1.4; text-align: center; }
.feature-list { border-top: 1px solid rgba(255,255,255,.16); }.feature-row { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; gap: 15px; align-items: center; padding: 22px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.16); outline: 0; background: none; color: white; cursor: pointer; text-align: left; }.feature-row > span { color: rgba(255,255,255,.28); font-family: "Bodoni Moda", serif; font-size: 12px; }.feature-row div { display: grid; gap: 5px; }.feature-row b { font-family: "Bodoni Moda", serif; font-size: 22px; font-weight: 400; }.feature-row small { height: 0; overflow: hidden; color: rgba(255,255,255,.5); font-size: 10px; line-height: 1.6; transition: height .25s; }.feature-row > i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: rgba(255,255,255,.4); font-style: normal; transition: .25s; }.feature-row.active b { color: #e4b7cc; }.feature-row.active small { height: 32px; }.feature-row.active > i { transform: rotate(45deg); border-color: #e4b7cc; color: #e4b7cc; }.prototype-link { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 28px; border-top: 1px solid rgba(255,255,255,.12); background: #29213c; }.prototype-link a { font-size: 9px; font-weight: 600; letter-spacing: .17em; }.prototype-link a span { margin-left: 12px; color: #e5b4c9; }.prototype-link small { color: rgba(255,255,255,.34); font-size: 8px; }

.two-modes { display: grid; grid-template-columns: .8fr 1.2fr; gap: 120px; align-items: start; background: var(--paper); }.modes-heading { position: sticky; top: 80px; }.two-modes h2, .why h2, .price h2, .interest h2 { font-size: clamp(50px, 5.2vw, 82px); }.two-modes h2 em, .why h2 em, .interest h2 em { color: #9c7893; }.mode-switcher { padding-top: 30px; }.mode-track { position: relative; width: 100%; display: grid; grid-template-columns: 1fr 1fr; padding: 6px; border: 1px solid #b9a9b6; border-radius: 100px; }.mode-track button { position: relative; z-index: 2; height: 58px; border: 0; background: transparent; cursor: pointer; font-size: 10px; font-weight: 600; letter-spacing: .18em; transition: color .3s; }.mode-track button.active { color: white; }.mode-track > i { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: 100px; background: var(--violet); transition: transform .45s cubic-bezier(.22,.8,.25,1), background .3s; }.mode-track.tools > i { transform: translateX(100%); background: #a45f78; }.mode-copy { min-height: 210px; padding: 48px 10px 35px; border-bottom: 1px solid var(--line); }.mode-copy.changing { animation: modeCopy .4s ease; }@keyframes modeCopy { 50% { opacity: 0; transform: translateY(8px); } }.mode-copy p { max-width: 650px; margin: 0 0 25px; font-family: "Bodoni Moda", serif; font-size: 30px; line-height: 1.35; }.mode-copy span { color: var(--muted); font-size: 10px; line-height: 1.8; }.hold-hint { display: grid; grid-template-columns: 95px 1fr; gap: 25px; align-items: center; padding-top: 35px; }.hold-hint > div { width: 78px; height: 78px; display: grid; place-items: center; align-content: center; border: 1px solid #b49faf; border-radius: 50%; }.hold-hint > div i { width: 25px; height: 25px; margin-bottom: 4px; border: 1px solid var(--violet); border-radius: 50%; box-shadow: 0 0 0 5px rgba(73,57,101,.08); animation: holdPulse 2s infinite; }.hold-hint b { font-size: 7px; letter-spacing: .12em; }.hold-hint p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }@keyframes holdPulse { 50% { box-shadow: 0 0 0 12px rgba(73,57,101,0); } }

.object-section { display: grid; grid-template-columns: .72fr 1.28fr; min-height: 900px; color: white; background: #765d84; }.object-copy { padding-right: 50px; align-self: center; }.object-copy > p:last-child { max-width: 480px; margin: 30px 0 0; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.8; }.turntable { position: relative; min-width: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, #f4e4e1 0, #d8c3d4 52%, #bea7c2 100%); }.turntable::before { content: ""; position: absolute; width: 75%; aspect-ratio: 1; border: 1px solid rgba(83,58,86,.18); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.06), 0 0 0 140px rgba(255,255,255,.04); }.turntable-images { position: relative; z-index: 2; width: min(650px, 75%); height: 720px; }.turntable-images img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateX(70px) rotate(4deg) scale(.93); filter: drop-shadow(0 40px 38px rgba(69,42,68,.22)); transition: opacity .6s, transform .75s cubic-bezier(.2,.75,.2,1); }.turntable-images img.active { opacity: 1; transform: none; }.view-label { position: absolute; top: 40px; left: 40px; display: flex; align-items: center; gap: 12px; color: #67536b; font-size: 8px; letter-spacing: .17em; }.view-label span { color: var(--gold); }.view-label i { width: 45px; height: 1px; background: #8b7388; }.turntable-controls { position: absolute; z-index: 5; right: 36px; bottom: 35px; left: 36px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; }.turntable-controls > button { width: 42px; height: 42px; border: 1px solid rgba(60,39,66,.25); border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; }.turntable-controls > div { display: flex; justify-content: center; gap: 10px; }.turntable-controls > div button { width: 6px; height: 6px; padding: 0; border: 1px solid #6f5873; border-radius: 50%; background: transparent; cursor: pointer; }.turntable-controls > div button.active { background: #6f5873; }.material-note { position: absolute; z-index: 4; display: flex; align-items: center; gap: 9px; color: #67536b; font-size: 7px; letter-spacing: .14em; }.material-note i { width: 48px; height: 1px; background: #866e83; }.note-one { top: 27%; right: 3%; }.note-two { bottom: 24%; left: 3%; }
.why { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; background: var(--paper); }.why-list { border-top: 1px solid var(--line); }.why-list article { display: grid; grid-template-columns: 45px .8fr 1fr; gap: 20px; align-items: baseline; padding: 29px 0; border-bottom: 1px solid var(--line); }.why-list span { color: var(--gold); font-family: "Bodoni Moda", serif; font-size: 12px; }.why-list h3 { margin: 0; font-family: "Bodoni Moda", serif; font-size: 23px; font-weight: 400; }.why-list p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.price { position: relative; min-height: 610px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; color: white; background: var(--night); }.price-art { position: relative; overflow: hidden; background: url("designs/design1/background.png") center/cover; }.price-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--night)); }.price-art span { position: absolute; z-index: 2; color: #f5d283; animation: twinkle 2.5s infinite; }.price-art span:nth-child(1) { top: 25%; left: 27%; font-size: 30px; }.price-art span:nth-child(2) { top: 48%; left: 48%; color: #e2b5cf; font-size: 92px; animation-delay: -.6s; }.price-art span:nth-child(3) { bottom: 20%; left: 20%; font-size: 22px; animation-delay: -1.2s; }.price-copy { position: relative; z-index: 2; align-self: center; max-width: 620px; padding: 80px 7vw 80px 30px; }.price h2 em { color: #e4afc4; }.price-copy > p:nth-of-type(2) { max-width: 520px; margin: 30px 0 18px; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.8; }.price-copy small { color: rgba(255,255,255,.3); font-size: 8px; letter-spacing: .08em; }
.interest { display: grid; grid-template-columns: 1fr .85fr; gap: 100px; align-items: center; background: #ecdde1; }.interest-heading > span { color: #8b687d; font-size: 8px; letter-spacing: .17em; line-height: 1.7; }.interest-heading h2 { margin-top: 28px; }.interest-form { padding: 42px; border: 1px solid rgba(73,49,69,.16); background: rgba(255,250,244,.55); }.field { margin-bottom: 23px; }.field label { display: block; margin-bottom: 6px; color: #7e6a78; font-size: 8px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }.field input { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #b7a2ae; outline: 0; background: none; font-size: 13px; }.field input:focus { border-color: var(--violet); }.interest-form .pill { width: 100%; margin-top: 12px; }
.form-status { min-height: 16px; margin: 13px 0 0; color: #705570; font-size: 9px; line-height: 1.5; text-align: center; }
.feedback { display: grid; grid-template-columns: .65fr 1.35fr; gap: 110px; color: white; background: #473757; }.feedback-intro { position: sticky; top: 70px; }.feedback-intro > p:last-child { max-width: 410px; margin-top: 28px; color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.8; }.survey fieldset { margin: 0; padding: 27px 0; border: 0; border-top: 1px solid rgba(255,255,255,.15); }.survey legend { width: 100%; margin-bottom: 18px; font-family: "Bodoni Moda", serif; font-size: 18px; }.survey legend > span { display: inline-block; width: 35px; color: #e1b466; font-family: "Manrope", sans-serif; font-size: 8px; }.survey legend small { color: rgba(255,255,255,.36); font-family: "Manrope", sans-serif; font-size: 8px; }.options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }.options.short { grid-template-columns: repeat(3, 1fr); }.options input { position: absolute; opacity: 0; }.options span { min-height: 42px; display: grid; place-items: center; padding: 8px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.55); cursor: pointer; font-size: 9px; text-align: center; transition: .2s; }.options input:checked + span { border-color: #efb4c4; background: #efb4c4; color: var(--ink); }.survey select, .survey textarea { width: 100%; border: 1px solid rgba(255,255,255,.22); border-radius: 0; outline: 0; background: transparent; color: white; font-size: 11px; }.survey select { height: 44px; padding: 0 12px; color-scheme: dark; }.survey textarea { padding: 13px; resize: vertical; line-height: 1.5; }.survey select:focus, .survey textarea:focus { border-color: #efb4c4; }.survey .form-status { color: #efc9d4; }
footer { min-height: 150px; display: grid; grid-template-columns: 1fr auto auto auto; gap: 42px; align-items: center; padding: 35px max(5vw, calc((100vw - 1400px)/2)); color: rgba(255,255,255,.45); background: #1a1528; font-size: 9px; }footer .brand { color: white; }footer > a:nth-of-type(2) { color: #d9b5cc; }footer small { letter-spacing: .13em; }

@media (max-width: 1040px) {
  .header { width: calc(100% - 40px); }.header nav { display: none; }
  .hero { grid-template-columns: minmax(360px,.9fr) minmax(430px,1.1fr); padding-inline: 4vw; }.hero-object { height: 620px; }.hero-object > img { width: min(590px, 51vw); }.object-note { display: none; }
  .section-pad { padding: 95px 5vw; }.opening { grid-template-columns: .15fr 1.25fr .6fr; gap: 40px; }.experience-body { gap: 50px; }.product-demo { min-height: 560px; }.feature-row { padding: 18px 0; }.two-modes, .why { gap: 60px; }.object-section { grid-template-columns: .75fr 1.25fr; }.turntable-images { height: 650px; }.feedback { gap: 60px; }
}

@media (max-width: 780px) {
  .header { height: 72px; grid-template-columns: 1fr 1fr; }.header-action { font-size: 8px; }.brand { font-size: 8px; }
  .hero { min-height: auto; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "object"; padding: 125px 22px 45px; }.hero-copy { min-width: 0; max-width: 620px; }.hero-object { height: 520px; margin-top: 25px; }.hero-object > img { width: min(560px, 100vw); max-height: 540px; }.hero-sun { width: 78vw; }.hero-facts { flex-wrap: wrap; }.hero-index { display: none; }
  .opening { grid-template-columns: 1fr; gap: 30px; }.opening-mark { display: none; }.opening-aside { max-width: 430px; }
  .experience-head { grid-template-columns: 1fr; }.experience-head > p:last-child { margin-top: 25px; }.experience-body { grid-template-columns: 1fr; }.product-demo { min-height: 570px; }.device-stage { width: min(560px, 92vw); }.feature-list { max-width: 620px; margin: 0 auto; }.two-modes, .why, .interest, .feedback { grid-template-columns: 1fr; }.modes-heading, .feedback-intro { position: static; }.object-section { grid-template-columns: 1fr; }.object-copy { padding: 90px 6vw 60px; }.turntable { min-height: 720px; }.why-list article { grid-template-columns: 35px .8fr 1fr; }.price { grid-template-columns: .7fr 1.3fr; }.interest, .feedback { gap: 55px; }footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .header { width: calc(100% - 30px); }.header .brand b { max-width: 115px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  h1 { font-size: clamp(47px, 13vw, 62px); }.hero-deck { font-size: 13px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }.hero-facts { gap: 12px 20px; margin-top: 35px; }.hero-object { height: 410px; }.hero-object > img { width: 118vw; max-width: 520px; }.orbit-a { width: 95%; }.orbit-b { width: 110%; }
  .ribbon div { font-size: 11px; }.section-pad { padding: 75px 20px; }.opening { min-height: 0; }.opening-copy { font-size: 40px; }
  .experience h2, .object-section h2, .feedback h2, .two-modes h2, .why h2, .price h2, .interest h2 { font-size: 49px; }.experience-head { padding-bottom: 45px; }.experience-body { padding-top: 0; }.product-demo { min-height: 415px; margin-inline: -20px; }.device-stage { width: 420px; max-width: 110vw; }.feature-row b { font-size: 19px; }.prototype-link { align-items: flex-start; flex-direction: column; gap: 8px; padding-inline: 20px; }.mode-copy p { font-size: 25px; }.hold-hint { grid-template-columns: 75px 1fr; gap: 18px; }.hold-hint > div { width: 65px; height: 65px; }
  .object-copy { padding: 75px 20px 45px; }.turntable { min-height: 570px; }.turntable-images { width: 100%; height: 520px; }.view-label { top: 25px; left: 22px; }.material-note { display: none; }.turntable-controls { right: 20px; bottom: 20px; left: 20px; }.why-list article { grid-template-columns: 32px 1fr; }.why-list article p { grid-column: 2; }.price { grid-template-columns: 1fr; }.price-art { position: absolute; inset: 0; opacity: .28; }.price-copy { padding: 90px 20px; }.interest-form { padding: 28px 20px; }.options { grid-template-columns: 1fr 1fr; }.options label:last-child { grid-column: 1 / -1; }footer { grid-template-columns: 1fr; gap: 17px; text-align: center; }footer .brand { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }.hero-copy, .hero-object, .hero-object > img, .hero-orbit, .hero-star, .ribbon div, .demo-aura, .hold-hint > div i, .price-art span { animation: none; }.reveal { opacity: 1; transform: none; transition: none; }
}

/* Continuous marquee and equal-weight hero actions. */
.hero-actions { gap: 12px; }
.hero-actions .pill { min-width: 158px; }
.pill { transition: transform .2s, box-shadow .2s; }
.pill:hover { transform: translateY(-2px); }
.pill:disabled { cursor: wait; opacity: .65; transform: none; }
.pill-invert { border: 1px solid var(--ink); background: rgba(255,250,244,.78); color: var(--ink); box-shadow: 0 13px 30px rgba(89,58,80,.08); }
.ribbon { width: 100%; margin-left: 0; transform: none; }
.ribbon .marquee-track { display: flex; width: max-content; padding: 0; will-change: transform; animation: marquee 32s linear infinite; }
.marquee-track span { flex: 0 0 auto; padding: 14px 0; font-family: "Bodoni Moda", serif; font-size: 14px; letter-spacing: .12em; white-space: nowrap; }

/* The feature explorer mirrors the simulator's celestial paper display. */
.experience-head > p:last-child { max-width: 485px; color: rgba(255,255,255,.6); }
.experience-head > p:last-child strong { display: block; margin-bottom: 9px; color: #f4eaf0; font-weight: 500; }
.device-screen { --accent: #614875; background-color: #e8e2d4; background-image: repeating-linear-gradient(0deg, rgba(63,50,48,.025) 0, rgba(63,50,48,.025) 1px, transparent 1px, transparent 3px); box-shadow: inset 0 0 3.2cqw rgba(60,48,40,.13); color: #302b2b; font-family: Georgia, serif; }
.device-screen.tools { --accent: #874b57; }
.screen-bar, .screen-title, .screen-subtitle, .screen-footer, .tarot-meaning-screen { font-family: "Manrope", sans-serif; }
.screen-bar span:last-child { color: rgba(48,43,43,.45); }
.screen-subtitle { color: rgba(48,43,43,.5); }
.screen-footer { color: rgba(48,43,43,.48); }
.screen-ratings div, .screen-sky div { border-color: rgba(48,43,43,.12); }
.quest-streak { color: #3f8056; }
.quest-card-screen { border-color: rgba(135,75,87,.45); }
.tarot-meaning-screen { color: rgba(48,43,43,.55); }
.compat-orbits i { border-color: var(--accent); background: rgba(135,75,87,.09); }
.compat-copy { border-color: rgba(135,75,87,.4); }

@media (max-width: 520px) {
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-actions .pill { min-width: 0; width: 100%; padding-inline: 12px; gap: 12px; }
  .hero-object { height: 390px; }
  .hero-object > img { width: min(420px, calc(100vw - 12px)); max-width: none; }
  .orbit-a { width: 90%; }
  .orbit-b { width: 102%; }
  .marquee-track span { padding-block: 12px; font-size: 11px; }
  .section-pad { padding: 70px 20px; }
  .opening-copy { font-size: 38px; }
  .experience h2, .object-section h2, .feedback h2, .two-modes h2, .why h2, .price h2, .interest h2 { font-size: 45px; }
  .experience-head { padding-bottom: 40px; }
  .experience-head > p:last-child { font-size: 12px; }
  .experience-body { padding-top: 0; padding-bottom: 55px; }
  .product-demo { min-height: 380px; margin-inline: 0; }
  .device-stage { width: min(370px, calc(100vw - 24px)); }
  .feature-row { grid-template-columns: 30px 1fr auto; gap: 10px; }
  .turntable-images { width: 92%; height: 480px; }
}

@media (max-width: 370px) {
  .header-action { max-width: 100px; line-height: 1.4; text-align: right; }
  h1 { font-size: 44px; }
  .hero { padding-inline: 16px; }
  .hero-actions { grid-template-columns: 1fr; }
  .hero-object { height: 350px; }
  .hero-object > img { width: 104vw; }
  .section-pad { padding-inline: 16px; }
  .experience h2, .object-section h2, .feedback h2, .two-modes h2, .why h2, .price h2, .interest h2 { font-size: 41px; }
  .feature-row b { font-size: 17px; }
  .mode-track button { letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon .marquee-track { animation: none; }
}