@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600&display=swap');
:root { color-scheme: light; --paper:#f5f2e9; --ink:#15352e; --muted:#60736d; --accent:#31745b; --accent-2:#9fcbb2; --line:rgba(21,53,46,.16); --card:rgba(255,255,255,.6); --display:"Manrope",system-ui,sans-serif; --body:"DM Sans",system-ui,sans-serif; --radius:1.2rem; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--paper); color:var(--ink); font-family:var(--body); transition:background .55s ease,color .55s ease; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-header { min-height:82px; padding:0 clamp(1.25rem,4vw,4.75rem); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:.8rem; font-weight:600; letter-spacing:-.02em; }
.brand-mark { width:28px; height:28px; display:grid; place-items:center; position:relative; }
.brand-mark i { position:absolute; width:20px; height:1px; background:var(--accent); transform-origin:center; }
.brand-mark i:first-child { transform:rotate(60deg); }.brand-mark i:last-child { transform:rotate(-60deg); }
.site-header nav { display:flex; gap:2rem; color:var(--muted); font-size:.85rem; }.header-cta { justify-self:end; padding:.7rem 1rem; border:1px solid var(--line); border-radius:999px; font-size:.85rem; }
.hero { min-height:680px; display:grid; grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr); gap:clamp(2rem,5vw,6rem); padding:clamp(4rem,8vw,8rem) clamp(1.25rem,6vw,7.5rem) clamp(3rem,6vw,6rem); align-items:center; }
.eyebrow { display:flex; align-items:center; gap:.65rem; color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:600; }.eyebrow span { width:1.8rem; height:1px; background:currentColor; }
h1,h2,h3 { font-family:var(--display); font-weight:400; letter-spacing:-.05em; } h1 { max-width:760px; font-size:clamp(3.5rem,7vw,7rem); line-height:.91; margin:1.35rem 0 1.8rem; } h1 em { font-weight:400; color:var(--accent); }
h1 em { font-style:normal; }
.intro { max-width:610px; color:var(--muted); font-size:clamp(1.02rem,1.5vw,1.24rem); line-height:1.65; }.hero-actions { display:flex; align-items:center; gap:1.5rem; margin-top:2.2rem; }.primary-button { display:inline-flex; gap:2rem; align-items:center; background:var(--ink); color:var(--paper); padding:1rem 1.2rem 1rem 1.4rem; border-radius:var(--radius); font-size:.9rem; transition:transform .25s ease; }.primary-button:hover { transform:translateY(-3px); }.hero-actions p { margin:0; color:var(--muted); font-size:.75rem; line-height:1.45; }.hero-actions strong { color:var(--ink); }
.hero-visual { position:relative; min-height:520px; isolation:isolate; display:grid; place-items:center; }.visual-glow { position:absolute; inset:8%; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 55%,transparent),transparent 67%); filter:blur(20px); }.orbit { position:absolute; border:1px solid var(--line); border-radius:50%; animation:orbit 22s linear infinite; }.orbit::after { content:""; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--accent); top:12%; left:16%; box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 13%,transparent); }.orbit-one { width:390px; height:390px; }.orbit-two { width:295px; height:295px; animation-duration:16s; animation-direction:reverse; }.center-stone { position:relative; z-index:2; width:150px; aspect-ratio:1; display:grid; place-items:center; text-align:center; border-radius:46% 54% 57% 43%/50% 42% 58% 50%; background:var(--ink); color:var(--paper); box-shadow:0 30px 70px color-mix(in srgb,var(--ink) 28%,transparent); animation:float 6s ease-in-out infinite; }.center-stone span { font-family:var(--display); font-size:1.35rem; line-height:1.05; }.map-card { position:absolute; z-index:3; width:142px; padding:.9rem 1rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); backdrop-filter:blur(14px); box-shadow:0 16px 50px rgba(17,48,38,.1); animation:float 7s ease-in-out infinite; }.map-card span,.floating-note span { display:block; color:var(--accent); font-size:.65rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:.25rem; }.map-card strong { font-size:.82rem; }.map-card-a { top:10%; left:8%; animation-delay:-1s; }.map-card-b { right:0; top:37%; animation-delay:-3s; }.map-card-c { left:13%; bottom:6%; animation-delay:-5s; }.visual-caption { position:absolute; bottom:0; right:6%; color:var(--muted); text-transform:uppercase; letter-spacing:.13em; font-size:.65rem; }
.experience { padding:clamp(5rem,10vw,10rem) clamp(1.25rem,7vw,8rem); display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,8vw,9rem); align-items:center; background:color-mix(in srgb,var(--accent) 5%,var(--paper)); border-top:1px solid var(--line); }.section-heading h2 { font-size:clamp(3rem,6vw,6rem); line-height:.93; margin:1rem 0 1.5rem; }.section-heading>p:last-child { color:var(--muted); max-width:42ch; line-height:1.7; }.device-stage { min-height:680px; position:relative; display:grid; place-items:center; }.phone-shell { width:min(100%,430px); min-height:620px; padding:1.2rem; border:1px solid var(--line); border-radius:2.6rem; background:var(--card); backdrop-filter:blur(18px); box-shadow:0 35px 90px color-mix(in srgb,var(--ink) 16%,transparent); position:relative; z-index:2; }.phone-top { display:flex; justify-content:space-between; padding:.55rem .4rem 1rem; font-size:.7rem; font-weight:600; }.step-count { color:var(--accent); }.progress { height:3px; background:var(--line); border-radius:2px; overflow:hidden; }.progress i { display:block; width:33%; height:100%; background:var(--accent); }.screen { padding:3rem 1rem 1rem; }.screen:not(.is-active) { display:none; }.question-kicker { color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:.65rem; }.screen h3 { font-size:clamp(2rem,4vw,3.3rem); line-height:1; margin:.75rem 0 2rem; }.answers { display:grid; gap:.65rem; }.answers button,.next-button { width:100%; border:1px solid var(--line); border-radius:var(--radius); background:transparent; color:var(--ink); padding:1rem; text-align:left; cursor:pointer; transition:.2s ease; }.answers button:hover,.answers button.is-selected { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,transparent); transform:translateX(4px); }.next-button { margin-top:1.6rem; display:flex; justify-content:space-between; background:var(--ink); color:var(--paper); }.next-button.subtle { background:transparent; color:var(--muted); }.screen-result>p { color:var(--muted); line-height:1.6; }.result-ring { width:145px; aspect-ratio:1; border:1px solid var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; gap:.5rem; margin:1.5rem 0; box-shadow:inset 0 0 0 9px color-mix(in srgb,var(--accent) 8%,transparent); animation:pulse 4s ease-in-out infinite; }.result-ring strong { font-family:var(--display); font-size:3rem; }.result-ring span { color:var(--muted); font-size:.65rem; }.insight-chip { border-left:2px solid var(--accent); padding:.8rem 1rem; color:var(--muted); font-size:.8rem; line-height:1.5; }.insight-chip span { display:block; color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-size:.6rem; margin-bottom:.25rem; }.floating-note { position:absolute; z-index:3; padding:1rem; min-width:150px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); font-size:.76rem; box-shadow:0 15px 40px rgba(17,48,38,.1); }.note-one { left:0; top:17%; animation:float 7s ease-in-out infinite; }.note-two { right:0; bottom:17%; animation:float 8s ease-in-out infinite -3s; }
.trust-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:1.35fr repeat(3,1fr); padding:0 clamp(1.25rem,4vw,4.75rem); }.trust-strip>* { padding:1.7rem 1.5rem; margin:0; border-right:1px solid var(--line); }.trust-strip>*:last-child { border-right:0; }.trust-strip>div { display:flex; gap:.85rem; }.trust-strip span { color:var(--accent); font-size:.7rem; }.trust-strip p { margin:0; color:var(--muted); font-size:.76rem; line-height:1.5; }.trust-strip strong { color:var(--ink); }
.artwork { position:absolute; inset:4%; overflow:hidden; border-radius:48% 52% 46% 54%/54% 43% 57% 46%; box-shadow:0 28px 90px color-mix(in srgb,var(--ink) 18%,transparent); transition:border-radius .55s ease,transform .55s ease; }
.art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.03); }.artwork::after { content:""; position:absolute; inset:0; background:linear-gradient(145deg,transparent 48%,color-mix(in srgb,var(--paper) 70%,transparent)); }
.visual-glow { z-index:-1; }.orbit { z-index:1; }.visual-caption { z-index:4; }
.next-button:disabled { cursor:not-allowed; opacity:.38; }
.save-progress { display:flex; align-items:center; gap:.45rem; margin:.75rem auto 0; border:0; background:transparent; color:var(--accent); cursor:pointer; font-size:.7rem; font-weight:600; }
.resume-dialog { width:min(calc(100% - 2rem),520px); padding:clamp(1.5rem,5vw,2.6rem); border:1px solid var(--line); border-radius:2rem; background:var(--paper); color:var(--ink); box-shadow:0 35px 100px rgba(7,28,21,.3); }
.resume-dialog::backdrop { background:rgba(5,20,15,.55); backdrop-filter:blur(6px); }
.resume-dialog h3 { max-width:10ch; margin:.7rem 0 1rem; font-size:clamp(2.2rem,6vw,3.7rem); line-height:.96; }
.resume-dialog>p:not(.question-kicker) { color:var(--muted); line-height:1.6; }
.dialog-close { position:absolute; top:1rem; right:1rem; width:2.4rem; height:2.4rem; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; font-size:1.3rem; }
.field-label { display:block; margin:1.5rem 0 .45rem; font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
#resume-email { width:100%; min-height:54px; padding:0 1rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--ink); font:inherit; outline:none; }
#resume-email:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }
.consent-choice { display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; margin-top:1rem; color:var(--muted); font-size:.76rem; line-height:1.45; cursor:pointer; }
.consent-choice input { width:1.05rem; height:1.05rem; margin-top:.1rem; accent-color:var(--accent); }.consent-choice strong { color:var(--ink); }
.resume-submit { width:100%; min-height:54px; margin-top:1.5rem; padding:0 1rem; display:flex; justify-content:space-between; align-items:center; border:0; border-radius:var(--radius); background:var(--ink); color:var(--paper); cursor:pointer; font:inherit; }
.resume-privacy,.resume-status { margin:.75rem 0 0; color:var(--muted); font-size:.68rem; line-height:1.45; }.resume-status.is-success { color:var(--accent); }
@keyframes orbit { to { transform:rotate(360deg); } } @keyframes float { 50% { transform:translateY(-12px) rotate(1deg); } } @keyframes pulse { 50% { box-shadow:inset 0 0 0 16px color-mix(in srgb,var(--accent) 12%,transparent),0 0 0 10px color-mix(in srgb,var(--accent) 4%,transparent); } }
@media (max-width:900px) { .site-header { grid-template-columns:1fr auto; }.site-header nav { display:none; }.hero,.experience { grid-template-columns:1fr; }.hero { padding-top:4rem; }.hero-visual { min-height:460px; }.experience { gap:1rem; }.device-stage { min-height:660px; }.trust-strip { grid-template-columns:1fr 1fr; }.trust-strip>* { border-bottom:1px solid var(--line); } }
@media (max-width:560px) { .site-header { min-height:66px; position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--paper) 90%,transparent); backdrop-filter:blur(14px); }.brand { font-size:.86rem; }.header-cta { font-size:0; }.header-cta span { font-size:1rem; }.hero { padding-top:3rem; }.hero-actions { align-items:flex-start; flex-direction:column; }.hero-visual { min-height:380px; transform:scale(.9); margin:-1rem; }.artwork { inset:1%; }.orbit-one { width:320px;height:320px; }.orbit-two { width:240px;height:240px; }.map-card { width:125px; padding:.7rem; }.experience { padding:4rem 1rem; }.section-heading { padding:0 .25rem 1rem; }.device-stage { min-height:auto; display:block; }.phone-shell { width:100%; min-height:610px; border-radius:2rem; padding:1rem; }.floating-note { display:none; }.trust-strip { grid-template-columns:1fr; }.trust-strip>* { border-right:0; }.screen { padding:2rem .35rem .5rem; }.answers button,.next-button { min-height:52px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }
.early-access { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,9rem); align-items:center; padding:clamp(5rem,10vw,9rem) clamp(1.25rem,7vw,8rem); border-bottom:1px solid var(--line); }
.early-access h2 { max-width:11ch; font-size:clamp(3rem,5.5vw,5.7rem); line-height:.94; margin:1rem 0 0; }
.signup-panel { padding:clamp(1.4rem,4vw,3rem); border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:0 24px 80px color-mix(in srgb,var(--ink) 10%,transparent); }
.signup-panel>p { max-width:46ch; margin:0 0 2rem; color:var(--muted); line-height:1.65; }
.signup-form label { display:block; margin-bottom:.55rem; color:var(--ink); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; }
.signup-row { display:grid; grid-template-columns:1fr auto; gap:.6rem; }
.signup-row input,.signup-row button { min-height:54px; border:1px solid var(--line); border-radius:var(--radius); font:inherit; }
.signup-row input { width:100%; padding:0 1rem; background:var(--paper); color:var(--ink); outline:none; }
.signup-row input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }
.signup-row button { display:flex; align-items:center; gap:1.2rem; padding:0 1.2rem; background:var(--ink); color:var(--paper); cursor:pointer; }
.signup-row button:disabled { cursor:wait; opacity:.58; }
.form-status { min-height:1.3em; margin:1rem 0 0; color:var(--muted); font-size:.72rem; line-height:1.5; }
.form-status.is-success { color:var(--accent); }.form-status.is-error { color:#a34738; }
.honeypot { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; }
footer { display:flex; justify-content:space-between; gap:2rem; padding:1.5rem clamp(1.25rem,4vw,4.75rem); color:var(--muted); font-size:.7rem; } footer span:first-child { color:var(--ink); font-weight:600; } footer nav { display:flex; gap:1rem; } footer a { text-decoration:underline; text-underline-offset:.18em; }
@media (max-width:900px) { .early-access { grid-template-columns:1fr; } }
@media (max-width:560px) { .early-access { padding:4rem 1rem; }.signup-row { grid-template-columns:1fr; }.signup-row button { justify-content:space-between; }.signup-panel { padding:1.25rem; } footer { flex-direction:column; } }