:root {
  --paper: #f7f0e7;
  --paper-deep: #eee2d5;
  --ink: #211d1b;
  --muted: #716963;
  --berry: #ef3f67;
  --berry-dark: #c8244d;
  --gold: #e9a52b;
  --leaf: #477a57;
  --white: #fffdfa;
  --line: rgba(42, 31, 25, 0.12);
  --shadow: 0 26px 60px rgba(61, 37, 25, 0.15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.section-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.site-header { position: relative; z-index: 20; width: min(1280px, calc(100% - 48px)); height: 92px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.brand img { border-radius: 13px; box-shadow: 0 7px 18px rgba(196, 45, 79, 0.18); }
nav { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 700; color: #59514c; }
nav a { transition: color .2s ease; }
nav a:hover { color: var(--berry); }
.nav-privacy { border: 1px solid var(--line); border-radius: 999px; padding: 11px 17px; background: rgba(255,255,255,.36); }

.hero { min-height: 720px; padding: 78px 0 80px; display: grid; grid-template-columns: .95fr 1.05fr; gap: 68px; align-items: center; }
.eyebrow { margin: 0 0 22px; display: flex; align-items: center; gap: 10px; color: var(--berry-dark); font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 24px; height: 2px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 26px; font-size: clamp(54px, 6vw, 86px); line-height: .97; letter-spacing: -.065em; font-weight: 900; }
h1 em { color: var(--berry); font-style: normal; }
.hero-lead { max-width: 590px; margin-bottom: 30px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.store-button { min-width: 178px; height: 58px; padding: 8px 17px; border-radius: 14px; display: inline-flex; align-items: center; gap: 12px; color: white; background: var(--ink); box-shadow: 0 12px 26px rgba(32, 26, 23, .16); font-size: 17px; font-weight: 700; }
.store-button small { display: block; font-size: 8px; line-height: 1.4; letter-spacing: .12em; opacity: .72; }
.store-mark { width: 26px; text-align: center; font-size: 22px; }
.store-mark.apple { font-size: 28px; line-height: 0; }
.is-coming { opacity: .54; box-shadow: none; cursor: default; }
.availability { margin: 16px 0 0; color: #9a9089; font-size: 11px; font-weight: 700; letter-spacing: .05em; }

.hero-visual { position: relative; min-height: 620px; display: grid; place-items: center; }
.phone-frame { position: relative; z-index: 3; width: 332px; padding: 12px; border: 3px solid #3b332f; border-radius: 48px; background: #1e1a18; box-shadow: 0 38px 80px rgba(52, 29, 23, .28), inset 0 0 0 1px #776d66; transform: rotate(3deg); }
.phone-screen { position: relative; height: 626px; overflow: hidden; border-radius: 35px; background: #d3aa79; }
.phone-screen > img { width: 100%; height: 100%; object-fit: cover; }
.phone-speaker { position: absolute; z-index: 9; top: 21px; left: 50%; width: 92px; height: 24px; border-radius: 18px; background: #1e1a18; transform: translateX(-50%); }
.screen-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(31,24,20,.37), transparent 22%, transparent 70%, rgba(27,19,15,.5)); }
.mini-top { position: absolute; top: 48px; left: 22px; right: 22px; display: flex; justify-content: space-between; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .16em; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
.mini-top strong { font-size: 14px; }
.map-node { position: absolute; width: 38px; height: 38px; border: 3px solid rgba(255,255,255,.78); border-radius: 50%; display: grid; place-items: center; color: white; background: rgba(236,61,100,.92); box-shadow: 0 8px 20px rgba(91,32,39,.25); font-size: 13px; font-weight: 900; }
.node-one { left: 93px; bottom: 155px; }.node-two { right: 68px; bottom: 256px; }.node-three { left: 65px; bottom: 355px; }
.painter-token { position: absolute; left: 119px; bottom: 184px; width: 44px; height: 54px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 22px 22px 18px 18px; color: white; background: var(--berry); box-shadow: 0 10px 25px rgba(96,20,39,.35); }
.painter-token span { font-size: 18px; }
.screen-card { position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 19px; background: rgba(255,253,250,.91); backdrop-filter: blur(12px); }
.screen-card small { grid-column: 1 / -1; color: var(--berry-dark); font-size: 7px; font-weight: 900; letter-spacing: .16em; }.screen-card strong { font-size: 16px; }.screen-card span { color: var(--muted); font-size: 9px; font-weight: 700; }
.floating-card { position: absolute; z-index: 5; right: 3%; bottom: 56px; padding: 14px 18px 14px 13px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.8); border-radius: 17px; background: rgba(255,253,250,.89); box-shadow: var(--shadow); backdrop-filter: blur(10px); transform: rotate(-4deg); }
.floating-card small { display:block; color: #90857d; font-size: 7px; font-weight: 900; letter-spacing: .13em; }.floating-card strong { font-size: 12px; }.drop-icon { width: 34px; height: 34px; display:grid; place-items:center; border-radius: 50% 50% 50% 12%; color: var(--berry); background: #ffd7df; transform: rotate(-20deg); }
.paint-splash { position: absolute; border-radius: 50%; filter: blur(.2px); }.splash-one { width: 220px; height: 220px; right: 7%; top: 8%; background: #efbb46; opacity: .26; }.splash-two { width: 300px; height: 190px; left: 4%; bottom: 11%; background: var(--berry); opacity: .13; transform: rotate(-22deg); }

.intro-strip { min-height: 150px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; color: white; background: var(--berry); }
.intro-strip div { min-height: 74px; display: flex; align-items: center; justify-content: center; gap: 15px; border-right: 1px solid rgba(255,255,255,.24); }.intro-strip div:last-child { border: 0; }
.intro-strip strong { font-size: 46px; line-height: 1; letter-spacing: -.05em; }.intro-strip span { max-width: 110px; font-size: 11px; font-weight: 800; line-height: 1.35; letter-spacing: .11em; text-transform: uppercase; }

.how-section { padding: 130px 0; }
.section-heading { max-width: 620px; margin-bottom: 55px; }
.section-heading h2 { margin-bottom: 22px; font-size: clamp(44px, 5vw, 68px); line-height: 1.02; letter-spacing: -.055em; }
.section-heading > p:last-child { color: var(--muted); font-size: 17px; line-height: 1.65; }
.section-heading.centered { margin-inline: auto; text-align: center; }.section-heading.centered .eyebrow { justify-content: center; color: #f8c6d2; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { min-height: 405px; padding: 28px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,253,250,.58); box-shadow: 0 14px 40px rgba(75,50,34,.05); }
.feature-number { color: #aaa099; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.feature-card h3 { margin-bottom: 11px; font-size: 23px; letter-spacing: -.035em; }.feature-card p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.tilt-demo, .paint-demo, .score-demo { height: 208px; display: grid; place-items: center; }
.tilt-demo { position: relative; }.demo-phone { position: relative; width: 92px; height: 151px; border: 5px solid #332b27; border-radius: 20px; background: #fff; transform: rotate(12deg); box-shadow: 0 14px 30px rgba(50,35,27,.16); }.demo-drop { position: absolute; left: 24px; bottom: 27px; width: 37px; height: 37px; border-radius: 50% 50% 50% 10px; background: var(--berry); transform: rotate(-20deg); }.motion-line { position: absolute; right: 36px; top: 30px; color: var(--berry); font-size: 38px; }
.paint-demo { position: relative; grid-template-columns: repeat(4, 38px); align-content: center; justify-content: center; }.paint-demo span { width: 42px; height: 42px; margin-left: -6px; border-radius: 50%; background: var(--berry); }.paint-demo i { position: absolute; right: 71px; width: 47px; height: 47px; border-radius: 50% 50% 50% 12px; background: linear-gradient(145deg,#ff7893,var(--berry-dark)); transform: rotate(-17deg); box-shadow: inset 5px 5px 7px rgba(255,255,255,.35), 0 7px 13px rgba(181,27,65,.22); }
.score-demo { align-content: center; }.score-demo strong { color: var(--berry); font-size: 54px; letter-spacing: -.06em; }.score-demo span { width: 160px; height: 9px; overflow: hidden; border-radius: 10px; background: #e3dad1; }.score-demo span i { display: block; width: 87%; height: 100%; border-radius: inherit; background: var(--berry); }.score-demo small { margin-top: 10px; color: #a0968f; font-size: 8px; font-weight: 900; letter-spacing: .18em; }

.worlds-section { padding: 130px 0; color: white; background: #24201e; }
.world-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 310px; gap: 16px; }
.world-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 26px; background: #443933; }.world-card::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(22,15,12,.86),transparent 68%); }.world-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }.world-card:hover img { transform: scale(1.04); }.world-card > div { position: absolute; z-index:2; left:22px; right:18px; bottom:18px; }.world-card small { color:#ffd1dc; font-size:8px; font-weight:900; letter-spacing:.17em; }.world-card h3 { margin:5px 0 0; font-size:20px; }.world-card p { margin:5px 0 0; color:rgba(255,255,255,.7); font-size:11px; line-height:1.4; }
.world-large { grid-column: span 2; grid-row: span 2; }.world-wide { grid-column: span 2; }

.story-section { padding: 140px 0; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 100px; }
.story-art { position: relative; }.story-art img { width: 100%; border: 12px solid var(--white); border-radius: 44% 44% 30px 30px; box-shadow: var(--shadow); }.story-drop { position:absolute; right:-24px; top:42%; width:76px; height:76px; display:grid; place-items:center; border:7px solid rgba(255,255,255,.75); border-radius:50% 50% 50% 16px; color:var(--berry); background:linear-gradient(145deg,#ff87a0,var(--berry-dark)); box-shadow:0 14px 28px rgba(151,25,55,.25); transform:rotate(-30deg); }
.story-copy h2 { margin-bottom: 26px; font-size: clamp(42px,5vw,65px); line-height:1.04; letter-spacing:-.055em; }.story-copy > p:not(.eyebrow) { color:var(--muted); font-size:16px; line-height:1.75; }
.story-note { margin-top:30px; padding:20px 22px; display:grid; gap:5px; border-left:4px solid var(--gold); border-radius:0 15px 15px 0; background:rgba(255,255,255,.5); }.story-note strong { font-size:14px; }.story-note span { color:var(--muted); font-size:12px; line-height:1.5; }

.final-cta { position:relative; overflow:hidden; padding:110px 24px 120px; text-align:center; color:white; background:var(--berry); }.final-cta > img { margin:0 auto 26px; border-radius:27px; box-shadow:0 18px 40px rgba(105,12,37,.25); }.final-cta .eyebrow { justify-content:center; color:white; opacity:.72; }.final-cta h2 { margin-bottom:20px; font-size:clamp(53px,7vw,86px); line-height:.95; letter-spacing:-.065em; }.final-cta > p:not(.eyebrow) { margin-bottom:30px; font-size:16px; opacity:.78; }.centered-row { justify-content:center; }.light-button { color:var(--ink); background:white; }.cta-drop { position:absolute; border-radius:50%; background:rgba(255,255,255,.08); }.drop-left { width:390px;height:390px;left:-180px;top:30px; }.drop-right { width:280px;height:280px;right:-95px;bottom:-80px; }

footer { min-height:120px; padding:28px max(24px,calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; gap:28px; color:#766c65; background:#1f1b19; font-size:11px; }.footer-brand { color:white; }.footer-brand img { border-radius:11px; }.footer-brand span { font-size:15px; } footer p { margin:0; } footer > div { display:flex; gap:22px; } footer a:hover { color:white; }

.privacy-body { background:#faf5ee; }.privacy-header { background:rgba(250,245,238,.94); }.privacy-main { width:min(860px,calc(100% - 48px)); margin:0 auto; padding:80px 0 120px; }.privacy-hero { padding-bottom:54px; border-bottom:1px solid var(--line); }.privacy-hero h1 { max-width:760px; margin-bottom:20px; font-size:clamp(48px,7vw,76px); }.privacy-hero > p:not(.eyebrow) { max-width:660px; color:var(--muted); font-size:17px; line-height:1.65; }.updated { margin-top:24px!important; font-size:11px!important; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.privacy-content { padding-top:42px; }.privacy-content section { padding:26px 0; border-bottom:1px solid var(--line); }.privacy-content section:last-child { border-bottom:0; }.privacy-content h2 { margin-bottom:15px; font-size:25px; letter-spacing:-.035em; }.privacy-content h3 { margin:20px 0 8px; font-size:16px; }.privacy-content p,.privacy-content li { color:#625a54; font-size:14px; line-height:1.75; }.privacy-content ul { margin:10px 0 0; padding-left:22px; }.privacy-content a { color:var(--berry-dark); text-decoration:underline; text-underline-offset:3px; }.policy-callout { padding:18px 20px; border:1px solid rgba(239,63,103,.22); border-radius:16px; background:#fff4f6; }.controller-card { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:16px; padding:22px; border-radius:18px; background:white; box-shadow:0 10px 30px rgba(56,35,23,.06); }.controller-card span { display:block; color:#9a9089; font-size:9px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }.controller-card strong,.controller-card a { display:block; margin-top:4px; font-size:14px; }

@media (max-width: 900px) {
  nav a:not(.nav-privacy) { display:none; }
  .hero { grid-template-columns:1fr; padding-top:60px; text-align:center; }.hero-copy .eyebrow,.store-row { justify-content:center; }.hero-lead { margin-inline:auto; }.hero-visual { min-height:650px; }
  .feature-grid { grid-template-columns:1fr; }.feature-card { min-height:auto; display:grid; grid-template-columns:180px 1fr; column-gap:20px; }.feature-number { grid-column:1/-1; }.feature-card > div:nth-child(2) { grid-row:2/4; height:210px; }.feature-card h3 { align-self:end; }
  .world-grid { grid-template-columns:repeat(2,1fr); }.story-section { grid-template-columns:1fr; gap:60px; }.story-art { width:min(520px,90%); margin:auto; }
}

@media (max-width: 620px) {
  .section-shell,.site-header,.privacy-main { width:calc(100% - 32px); }.site-header { height:76px; }.brand img { width:40px;height:40px; }.brand span { font-size:15px; }.nav-privacy { padding:9px 13px;font-size:11px; }
  .hero { padding:54px 0 60px; }.hero h1 { font-size:50px; }.hero-lead { font-size:15px; }.store-button { min-width:157px;height:54px;font-size:14px; }.hero-visual { min-height:560px; }.phone-frame { width:282px;border-radius:41px; }.phone-screen { height:528px;border-radius:30px; }.floating-card { right:-2%;bottom:26px; }.node-one { left:78px;bottom:132px; }.node-two { right:55px;bottom:216px; }.node-three { left:54px;bottom:300px; }.painter-token { left:101px;bottom:156px; }
  .intro-strip { grid-template-columns:1fr; padding:20px 0; }.intro-strip div { border-right:0;border-bottom:1px solid rgba(255,255,255,.2); }.intro-strip strong { font-size:36px; }
  .how-section,.worlds-section,.story-section { padding:88px 0; }.section-heading h2 { font-size:44px; }.feature-card { display:block; }.feature-card > div:nth-child(2) { height:190px; }.feature-card h3 { margin-top:0; }
  .world-grid { grid-template-columns:1fr;grid-auto-rows:280px; }.world-large,.world-wide { grid-column:auto;grid-row:auto; }.world-large { min-height:420px; }
  .story-drop { width:60px;height:60px;right:-15px; }.story-copy h2 { font-size:43px; }
  .final-cta { padding:85px 18px 95px; }.final-cta h2 { font-size:54px; }
  footer { padding:35px 20px;flex-direction:column;text-align:center; }.controller-card { grid-template-columns:1fr; }.privacy-main { padding-top:55px; }.privacy-hero h1 { font-size:50px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .world-card img { transition:none; } }