:root {
  --ink:#35153d; --plum:#4f174a; --rose:#e86c81; --peach:#ffc49f;
  --paper:#fffaf5; --line:#ead7d2; --muted:#846371;
  --sans:'DM Sans',sans-serif; --serif:'Playfair Display',serif; --mono:'DM Mono',monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:var(--sans); }
.wrap { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.ambient { position:absolute; z-index:-1; border-radius:50%; filter:blur(70px); opacity:.22; }
.ambient-one { width:420px; height:420px; top:40px; left:-230px; background:#ff9e9e; }
.ambient-two { width:360px; height:400px; top:130px; right:-180px; background:#c492ec; }

.site-header { height:96px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); font:700 21px var(--serif); letter-spacing:-.7px; text-decoration:none; }
.brand-mark { margin-right:5px; color:#e75276; font:24px var(--sans); }
nav { display:flex; gap:33px; margin-left:110px; }
nav a,.footer a { color:var(--ink); font-size:13px; text-decoration:none; }
.header-cta { display:flex; align-items:center; min-height:38px; padding-bottom:3px; border-bottom:1px solid var(--ink); color:var(--ink); font-size:13px; font-weight:700; text-decoration:none; }
.header-cta span { margin-left:6px; color:var(--rose); font-size:17px; }

.hero { display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:60px; min-height:608px; padding:45px 26px 70px; }
.eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 18px; color:#9d6174; font:500 10px var(--mono); letter-spacing:1.25px; text-transform:uppercase; }
.eyebrow i { display:block; width:20px; height:1px; background:var(--rose); }
.hero h1,.how h2,.maker h2,.notes h2,.closing h2 { margin:0; font:600 clamp(49px,5.5vw,73px)/1.02 var(--serif); letter-spacing:-3.4px; }
.hero h1 em,.how h2 em,.maker h2 em,.notes h2 em,.closing h2 em { color:#e65c73; font-weight:500; }
.hero-text { max-width:460px; margin:24px 0 29px; color:#795568; font-size:16px; line-height:1.7; }
.primary-btn { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:48px; padding:13px 20px 13px 23px; border:0; border-radius:3px; background:var(--plum); color:white; font:700 14px var(--sans); cursor:pointer; text-decoration:none; touch-action:manipulation; transition:transform .2s,background .2s; }
.primary-btn:hover { background:#68205e; transform:translateY(-2px); }
.primary-btn span { font-size:20px; line-height:12px; }
.hero-proof { display:flex; align-items:center; gap:12px; margin-top:41px; }
.hero-proof p { margin:0; color:#8f6c79; font-size:11px; }.hero-proof strong{color:var(--ink)}
.avatars { display:flex; }.avatars span { display:grid; width:27px; height:27px; margin-right:-7px; place-items:center; border:2px solid var(--paper); border-radius:50%; background:#d46c8a; color:white; font-size:10px; }.avatars span:nth-child(2){background:#e7a27e}.avatars span:nth-child(3){background:#a37aba}
.hero-art { position:relative; height:477px; }.art-frame { position:absolute; top:5px; right:42px; width:357px; height:438px; overflow:hidden; border-radius:175px 175px 10px 10px; box-shadow:0 26px 45px rgba(75,22,59,.18); }.art-frame img { width:100%; height:100%; object-fit:cover; }.top-star { position:absolute; top:29px; right:28px; color:white; font-size:27px; }
.now-playing { position:absolute; z-index:1; bottom:13px; left:0; display:flex; align-items:center; gap:10px; min-width:224px; padding:13px; background:#fffdf8; box-shadow:0 10px 25px rgba(82,31,56,.12); }.mini-disc { display:grid; width:36px; height:36px; place-items:center; border-radius:50%; background:linear-gradient(135deg,#e77687,#793b69); color:white; font-size:17px; }.now-playing small { display:block; margin-bottom:3px; color:#ad7d85; font:8px var(--mono); letter-spacing:.7px; text-transform:uppercase; }.now-playing b { font-size:11px; }.play-button { margin-left:auto; border:0; background:transparent; color:var(--rose); cursor:pointer; }
.art-caption { position:absolute; right:-30px; bottom:5px; color:#a27282; font:italic 14px/1.35 var(--serif); }
.ticker { overflow:hidden; padding:15px 0; background:var(--peach); color:#6d284d; font:18px var(--serif); white-space:nowrap; transform:rotate(-1.2deg) scale(1.02); }.ticker-track { display:flex; width:max-content; animation:scroll 60s linear infinite; }.ticker-half { flex:0 0 auto; }.ticker span { margin:0 27px; color:#c45671; font-family:var(--sans); }@keyframes scroll{to{transform:translateX(-50%)}}

.how { padding:157px 26px 142px; }.section-intro { display:flex; align-items:flex-start; justify-content:space-between; }.how h2,.notes h2 { font-size:50px; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:42px; margin-top:66px; }.steps article { position:relative; padding-top:20px; }.step-number { position:absolute; z-index:1; top:27px; right:10px; padding:5px; background:rgba(255,250,245,.86); color:#8e6674; font:10px var(--mono); }.step-photo { height:166px; overflow:hidden; margin:0 0 17px; border-radius:3px; box-shadow:0 14px 24px rgba(92,42,63,.1); }.step-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }.steps article:hover .step-photo img { transform:scale(1.05); }.steps article:nth-child(3) .step-photo img { object-position:58% 45%; }.step-icon { display:grid; width:47px; height:47px; margin-bottom:16px; place-items:center; border-radius:50%; background:#fde3dc; color:#d46e83; font:23px var(--serif); }.steps article:nth-child(2) .step-icon { background:#f1e2f0; color:#96639b; }.steps article:nth-child(3) .step-icon { background:#fce6cd; color:#e09b63; }.steps h3 { margin:0 0 10px; font:600 19px var(--serif); }.steps p { max-width:270px; margin:0; color:#80616d; font-size:13px; line-height:1.7; }

.maker { position:relative; display:grid; grid-template-columns:.85fr 1.15fr; gap:78px; overflow:hidden; margin-bottom:155px; padding:91px 87px 88px; background:#45173f; color:white; }.maker:before { position:absolute; top:-115px; right:33%; color:#592154; content:'✦'; font-size:290px; opacity:.55; }.maker-heading { position:relative; }.maker .eyebrow { color:#dfa9ba; }.maker .eyebrow i { background:#ffb6a7; }.maker h2 { font-size:53px; letter-spacing:-2.7px; }.maker h2 em { color:#ffa09b; }.maker-heading>p:not(.eyebrow) { max-width:266px; margin:20px 0 31px; color:#d2b1c3; font-size:14px; line-height:1.6; }.delivery-note { display:flex; gap:10px; align-items:flex-start; padding-top:21px; border-top:1px solid #6e3e67; }.delivery-note>span { color:#ff9a8e; font-size:18px; }.delivery-note b { display:block; font-size:12px; }.delivery-note small { display:block; margin-top:4px; color:#c9a0b7; font-size:11px; }
.song-form { position:relative; z-index:1; min-height:424px; padding:25px 29px 22px; background:#fffdf9; color:var(--ink); }.form-top { display:flex; justify-content:space-between; padding-bottom:19px; border-bottom:1px solid var(--line); color:#97727d; font:10px var(--mono); letter-spacing:.7px; }.form-top b { color:var(--rose); }.form-panel { display:none; padding-top:27px; }.form-panel.active { display:block; }.form-question { margin:0 0 20px; font:600 21px var(--serif); }.choice-grid,.vibe-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }.choice-grid { margin-bottom:23px; }.choice,.vibe-choice { min-height:44px; border:1px solid #e8d8d4; background:#fffaf5; color:#77566a; font:12px var(--sans); cursor:pointer; text-align:left; touch-action:manipulation; transition:.2s; }.choice span,.vibe-choice span { margin:0 7px 0 10px; color:var(--rose); font-size:15px; }.choice:hover,.choice.selected,.vibe-choice:hover,.vibe-choice.selected { border-color:#d9778d; background:#fff0ed; color:var(--ink); }.field-label { display:block; margin:15px 0 8px; color:#926c78; font:10px var(--mono); letter-spacing:.55px; }input,textarea { width:100%; padding:12px; border:1px solid #e8d8d4; background:white; color:var(--ink); font:13px var(--sans); outline-color:#da7d8f; }textarea { height:105px; resize:vertical; }.tiny-note { margin:16px 0; color:#a08389; font-size:10px; line-height:1.5; }.form-actions { position:absolute; right:29px; bottom:22px; left:29px; display:flex; align-items:center; justify-content:space-between; }.text-btn { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:8px 16px; border:1px solid #e2d1d1; border-radius:3px; background:#fff; color:#7a5866; font:600 12px var(--sans); cursor:pointer; touch-action:manipulation; transition:border-color .2s,background .2s,color .2s; }.text-btn:hover { border-color:#d9778d; background:#fff0ed; color:var(--ink); }.text-btn[disabled] { visibility:hidden; }.step-dots { display:flex; gap:6px; }.step-dot { min-width:27px; height:22px; padding:0 7px; border:1px solid var(--line); border-radius:11px; background:transparent; color:#bd9fa9; font:600 10px var(--mono); letter-spacing:.5px; cursor:pointer; touch-action:manipulation; transition:.18s; }.step-dot.done { border-color:#e6adba; color:var(--rose); }.step-dot.done:hover { border-color:#d9778d; background:#fff0ed; color:var(--ink); }.step-dot.active { border-color:var(--rose); background:var(--rose); color:#fff; cursor:default; }.step-dot:disabled { cursor:default; opacity:.5; }.form-error { position:absolute; right:29px; bottom:60px; left:29px; margin:0; padding:9px 12px; border-left:2px solid #d3596f; border-radius:2px; background:#fdecef; color:#a83553; font:12px var(--sans); }.form-error[hidden] { display:none; }.primary-btn[disabled] { opacity:.7; cursor:default; transform:none; }

.notes { display:grid; grid-template-columns:.8fr 1.4fr; gap:68px; align-items:center; padding:0 80px 155px; }.notes h2 { font-size:47px; }.note-card { position:relative; min-height:330px; overflow:hidden; background:#5a2548; box-shadow:10px 12px 0 #fff2ea; transform:rotate(1.5deg); }.note-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.note-card:after { position:absolute; inset:0; background:linear-gradient(90deg,rgba(62,21,53,.88),rgba(76,25,56,.64) 48%,rgba(76,25,56,.08)); content:''; }.note-copy { position:relative; z-index:1; width:66%; padding:36px 35px; color:white; }.quote { margin:0 0 27px; color:white; font:italic 20px/1.43 var(--serif); }.quote-footer { display:flex; align-items:center; gap:10px; }.avatar { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; background:#e78887; color:white; font:11px var(--mono); }.quote-footer p { margin:0; }.quote-footer b,.quote-footer small { display:block; font-size:10px; }.quote-footer small { margin-top:3px; color:#f0bdc2; }.quote-mark { height:40px; margin-left:auto; color:#ffc09e; font:48px var(--serif); }
.closing { display:flex; flex-direction:column; align-items:center; padding:73px 20px 81px; background:linear-gradient(100deg,#e76f7f,#e28092); color:white; text-align:center; }.closing>span { margin-bottom:19px; font-size:24px; }.closing h2 { font-size:47px; letter-spacing:-2.3px; }.closing h2 em { color:#fff0dc; }.closing .primary-btn { margin-top:28px; background:white; color:#64274e; }.footer { display:flex; align-items:center; justify-content:space-between; padding:34px 0 37px; }.footer p { margin:0; color:#9b727b; font:italic 13px var(--serif); }.footer div { display:flex; gap:17px; }.footer a { color:#805b69; font-size:11px; }.success-toast { position:fixed; z-index:5; right:24px; bottom:24px; display:none; gap:11px; align-items:flex-start; padding:18px 21px; border-left:3px solid var(--rose); background:#fffaf6; color:var(--ink); box-shadow:0 15px 42px rgba(70,22,61,.23); }.success-toast.show { display:flex; }.success-toast span { color:var(--rose); font-size:18px; }.success-toast b { font-size:13px; }.success-toast p { margin:5px 0 0; color:#8c6d78; font-size:11px; }

@media (max-width:800px) { .wrap{width:min(100% - 32px,580px)} nav{display:none}.site-header{height:78px}.hero{grid-template-columns:1fr;gap:40px;padding:48px 0 75px}.hero-art{height:390px}.art-frame{right:20px;width:285px;height:365px}.art-caption{right:0}.how{padding:100px 0}.section-intro{display:block}.steps{grid-template-columns:1fr;gap:38px;margin-top:45px}.steps article{padding:0 0 6px}.step-photo{height:210px;max-width:380px}.step-number{top:8px;right:9px}.maker{grid-template-columns:1fr;gap:42px;margin-bottom:95px;padding:60px 24px}.song-form{min-height:445px}.notes{grid-template-columns:1fr;gap:45px;padding:0 0 100px}.note-card{min-height:360px;transform:none}.note-copy{width:74%;padding:35px 30px}.footer{flex-wrap:wrap;gap:16px}.footer p{order:3;width:100%}.closing h2{font-size:39px} }
@media (max-width:430px) { .site-header{padding-top:max(0px,env(safe-area-inset-top))}.header-cta{min-height:44px}.hero h1{font-size:50px;letter-spacing:-2.5px}.art-frame{right:3px}.now-playing{left:-8px}.choice-grid,.vibe-grid{grid-template-columns:1fr}.form-panel{padding-top:20px}.form-actions{bottom:16px}.song-form{min-height:500px}.notes h2,.how h2{font-size:42px}.maker h2{font-size:46px}input,textarea{font-size:16px}.step-photo{height:185px}.note-card{min-height:410px}.note-copy{width:100%;padding:28px 25px}.note-card:after{background:linear-gradient(180deg,rgba(62,21,53,.88),rgba(76,25,56,.67) 58%,rgba(76,25,56,.19))}.success-toast{right:16px;bottom:max(16px,env(safe-area-inset-bottom));left:16px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.ticker-track{animation:none}.primary-btn,.step-photo img{transition:none} }

/* ---------- Motion: scroll reveals + ambient life (auto-disabled for reduced-motion) ---------- */
@media (prefers-reduced-motion:no-preference) {
  html.js [data-reveal] { opacity:0; transform:translateY(26px); transition:opacity .85s cubic-bezier(.16,.7,.3,1) var(--d,0s), transform .85s cubic-bezier(.16,.7,.3,1) var(--d,0s); will-change:opacity,transform; }
  html.js [data-reveal="scale"] { transform:scale(.95) translateY(18px); }
  html.js [data-reveal].is-visible { opacity:1; transform:none; }

  .ambient-one { animation:drift-a 19s ease-in-out infinite alternate; }
  .ambient-two { animation:drift-b 23s ease-in-out infinite alternate; }
  .mini-disc { animation:spin 5.5s linear infinite; }
  .now-playing { animation:floaty 5s ease-in-out infinite; }
  .play-button::after { content:''; position:absolute; inset:-7px; border-radius:50%; border:1px solid var(--rose); opacity:0; animation:ripple 2.6s ease-out infinite; }
  .top-star { animation:twinkle 3.4s ease-in-out infinite; }
  .closing>span { animation:twinkle 3.9s ease-in-out infinite; }
  .success-toast.show { animation:toast-in .55s cubic-bezier(.16,.7,.3,1); }
}
@keyframes drift-a { to { transform:translate(46px,34px) scale(1.09); } }
@keyframes drift-b { to { transform:translate(-38px,44px) scale(1.06); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes twinkle { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(.86); } }
@keyframes ripple { 0% { opacity:.5; transform:scale(.75); } 80%,100% { opacity:0; transform:scale(1.6); } }
@keyframes toast-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* ---------- Hover micro-interactions ---------- */
.brand-mark { display:inline-block; transition:transform .45s cubic-bezier(.16,.7,.3,1); }
.brand:hover .brand-mark { transform:rotate(120deg) scale(1.15); }
nav a { position:relative; }
nav a::after { content:''; position:absolute; left:0; bottom:-5px; width:100%; height:1px; background:var(--rose); transform:scaleX(0); transform-origin:right; transition:transform .32s cubic-bezier(.16,.7,.3,1); }
nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.primary-btn span { transition:transform .25s ease; }
.primary-btn:hover span { transform:translateX(4px); }
.header-cta span { display:inline-block; transition:transform .25s ease; }
.header-cta:hover span { transform:translate(3px,-3px); }
.play-button { position:relative; transition:transform .2s ease; }
.play-button:hover { transform:scale(1.14); }
.steps article { transition:transform .45s cubic-bezier(.16,.7,.3,1); }
.steps article:hover { transform:translateY(-7px); }
.step-icon { transition:transform .4s cubic-bezier(.16,.7,.3,1); }
.steps article:hover .step-icon { transform:rotate(-8deg) scale(1.08); }
.choice,.vibe-choice { transition:border-color .2s,background .2s,color .2s,transform .2s; }
.choice:hover,.vibe-choice:hover { transform:translateY(-2px); }
.choice.selected,.vibe-choice.selected { transform:translateY(-1px); }
.note-card { transition:transform .55s cubic-bezier(.16,.7,.3,1),box-shadow .55s; }
.note-card:hover { transform:rotate(0deg) translateY(-5px); box-shadow:14px 16px 0 #fff2ea; }
.avatars span { transition:transform .3s ease; }
.hero-proof:hover .avatars span { transform:translateY(-2px); }
.delivery-note>span { display:inline-block; transition:transform .45s cubic-bezier(.16,.7,.3,1); }
.maker-heading:hover .delivery-note>span { transform:rotate(90deg) scale(1.1); }