/* Expressive homepage, with shared responsive improvements for every route. */
:root { --ink:#2b2144; --muted:#726782; --pink:#ba3667; }
body { overflow-wrap:break-word; }
.header { height:82px; background:#fffaf6f5; border-color:#ede2eb; transition:box-shadow .3s,background .3s; }
.header.scrolled { box-shadow:0 6px 28px #35204412; background:#fffafafa; }
.brand { font-size:21px; letter-spacing:-.9px; }
.brand span span { color:#b13b69; }
.navlinks a { position:relative; }
.navlinks a:not(.btn):after { content:''; position:absolute; left:0; bottom:-7px; height:2px; width:0; background:#b13b69; transition:width .25s; }
.navlinks a:not(.btn):hover:after { width:100%; }
.btn { min-height:49px; background:linear-gradient(110deg,#c9366d,#e65b76); box-shadow:0 7px 20px #bd36652b; }
.btn:hover { transform:translateY(-3px); }
.btn span:last-child { transition:transform .2s; }
.btn:hover span:last-child { transform:translateX(3px); }
.btn.green { background:linear-gradient(110deg,#197b52,#249769); }
.home-page .hero {
  --glow-x:22%; --glow-y:30%;
  isolation:isolate;
  color:#fff7ed;
  background:radial-gradient(ellipse at 92% 65%,#663669 0%,transparent 48%),radial-gradient(ellipse at 10% 0%,#48365e 0%,transparent 65%),#241d3a;
}
.home-page .hero:before { content:''; position:absolute; inset:0; pointer-events:none; z-index:-1; background:radial-gradient(450px circle at var(--glow-x) var(--glow-y),#c66d9424,transparent 80%); }
.home-page .hero:after { content:''; position:absolute; inset:0; opacity:.055; z-index:-1; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' 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' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E"); }
.home-page .hero-grid { min-height:695px; padding-top:75px; padding-bottom:55px; grid-template-columns:1.2fr 1fr; gap:38px; }
.home-page .hero-grid>div:first-child { z-index:3; position:relative; }
.home-page .hero .pill { color:#f5cad6; background:#ffffff09; border-color:#d9b3d731; font-size:10px; letter-spacing:1.6px; padding:9px 15px; }
.home-page .hero .pill .dot { background:#acd5b6; box-shadow:0 0 0 4px #cbe4d013; }
.home-page .hero h1 { font-size:clamp(47px,4.5vw,67px); letter-spacing:-3.3px; line-height:1.14; position:relative; font-weight:700; padding-bottom:17px; }
.home-page .hero h1 span { font-family:'Playfair Display',serif; font-style:italic; font-weight:500; background:linear-gradient(90deg,#f3a7bd 0%,#fac799 48%,#deb4ed 100%); background-size:200% auto; background-clip:text; color:transparent; animation:feeling-colors 9s ease-in-out infinite; white-space:nowrap; }
.love-underline { width:75%; max-width:450px; height:24px; display:block; position:absolute; bottom:-2px; left:3px; overflow:visible; }
.love-underline path { fill:none; stroke:#d789ac; stroke-width:2; stroke-linecap:round; stroke-dasharray:480; stroke-dashoffset:480; animation:draw-love 1.5s .7s ease forwards; }
.home-page .hero p { color:#d1c4d6; margin-top:24px; max-width:465px; font-size:14px; line-height:1.9; }
.home-page .hero-actions { margin-top:30px; gap:14px; }
.home-page .hero-actions>.btn:first-child { background:linear-gradient(110deg,#f09ab5,#ffd0ad); color:#392338; box-shadow:0 7px 30px #ed83aa27; border-color:#ffd5d54a; }
.home-page .hero-actions>.btn.secondary { background:#ffffff07; border-color:#cab8d647; color:#f9eef5; }
.home-page .hero-note { color:#b6a7c3; margin-top:30px; }
.home-page .hero-note strong { color:#f5d9e2; }
.home-page .tiny-icons span { background:#51415f; border-color:#342b48; }
.hero-stars { position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero-stars i { position:absolute; left:var(--x); top:var(--y); width:var(--size); height:var(--size); border-radius:50%; background:#ffe3c9; box-shadow:0 0 8px #ffddc94d; animation:star-breathe 5s var(--delay) ease-in-out infinite; opacity:.2; }
.home-page .hero-art { height:520px; perspective:1000px; z-index:2; }
.art-halo { position:absolute; width:350px; height:350px; border-radius:50%; background:linear-gradient(140deg,#c389ad2f,#d5af7826); filter:blur(32px); animation:halo-breathe 7s ease-in-out infinite; }
.home-page .orbit { width:420px; height:420px; border-color:#d2adc024; }
.home-page .orbit.two { width:480px; height:480px; border-color:#d2adc040; opacity:.6; animation:orbit-drift 80s linear infinite; }
.home-page .phone { transform:rotate(7deg) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .3s ease-out; border-color:#f5ddcd; width:255px; height:480px; box-shadow:0 0 0 2px #fff4db20,25px 35px 80px #120f274d; background:radial-gradient(ellipse at 10% 10%,#fff5dd,transparent 70%),linear-gradient(155deg,#fffaf4,#f6dfeb); }
.home-page .phone:before { background:#f5ddcd; }
.home-page .phone .script { color:#593849; font-size:32px; }
.home-page .phone .name { color:#b74270; }
.home-page .phone .cake-art { animation:cake-wiggle 6s ease-in-out infinite; }
.home-page .phone button { background:linear-gradient(110deg,#b73c71,#d66483); }
.home-page .float-label { padding:13px 17px; border-color:#fbe3e68c; background:#fff8f4f5; color:#47314f; box-shadow:0 12px 35px #100d2633; max-width:255px; font-size:9px; }
.home-page .float-label.top { top:70px; left:-13px; animation:note-float 6s ease-in-out infinite; }
.home-page .float-label.bottom { bottom:62px; right:-20px; animation:note-float 6.5s -3s ease-in-out infinite; }
.home-page .float-label strong { font-size:12px; }
.home-page .art-spark { color:#efc5a8; font-size:33px; }
.home-page .art-spark.one { top:28px; right:25px; animation:spark-spin 14s linear infinite; }
.home-page .art-spark.two { bottom:25px; left:22px; animation:heart-rise 5s ease-in-out infinite; }
.love-stamp { position:absolute; right:5px; top:24px; color:#eac7d6; border:1px solid #eac7d64a; width:78px; height:78px; display:flex; flex-direction:column; justify-content:center; text-align:center; border-radius:50%; font-size:8px; line-height:1.4; letter-spacing:.4px; transform:rotate(13deg); }
.love-stamp b { font-family:serif; font-size:25px; font-weight:400; line-height:1; }
.home-page .benefits { border-color:#d2adc024; padding:25px 0; position:relative; }
.home-page .benefits div { color:#b5a6c3; border-color:#d2adc024; }
.home-page .benefits strong { color:#f2dfe5; font-weight:500; }
.home-page .hero-grid>div:first-child>.pill { animation:hero-arrive .75s both; }
.home-page .hero h1 { animation:hero-arrive .8s .1s both; }
.home-page .hero-grid>div:first-child>p { animation:hero-arrive .8s .2s both; }
.home-page .hero-actions { animation:hero-arrive .8s .3s both; }
.home-page .hero-note { animation:hero-arrive .8s .4s both; }
.occasion-ribbon { overflow:hidden; padding:19px 0; border-bottom:1px solid #eed9df; background:#f7e8ea; color:#954b6b; }
.ribbon-track { display:flex; width:max-content; animation:occasion-scroll 45s linear infinite; }
.ribbon-track span { display:flex; align-items:center; white-space:nowrap; gap:33px; padding-right:33px; font-size:10px; letter-spacing:2px; font-weight:600; }
.ribbon-track i { font-family:serif; font-style:normal; font-size:17px; color:#b36283; }
.occasion-ribbon:hover .ribbon-track { animation-play-state:paused; }
.home-page #experiences { padding-top:90px; padding-bottom:85px; }
.home-page .section-head { max-width:660px; }
.home-page h2 { color:#39254b; letter-spacing:-1.8px; }
.home-page .section-head h2 span { color:#b33c71; }
.home-page .eyebrow { color:#a93e6d; font-size:10px; letter-spacing:2px; }
.home-page .section-head p { color:#7c6e86; }
.home-page .chip { min-height:44px; background:#fff9f7; color:#78627d; border-color:#e8dbe5; padding:10px 20px; transition:background .25s,transform .25s; }
.home-page .chip:hover { transform:translateY(-2px); background:#f8e9f0; }
.home-page .chip.active { background:#48305c; border-color:#48305c; color:#fff6f2; box-shadow:0 5px 14px #48305c16; }
.home-page .catalog { gap:25px; }
.home-page .card { border-radius:23px; border-color:#eae0e6; box-shadow:0 6px 30px #60304507; position:relative; }
.home-page .card:hover { transform:translateY(-7px); box-shadow:0 20px 45px #69415b17; }
.home-page .card-art { height:205px; }
.home-page .card-art:before { content:'✦'; font-size:90px; top:30px; left:30px; color:#ffffff90; }
.home-page .card-art:after { content:'♡'; font-size:125px; top:80px; right:15px; }
.home-page .card:nth-child(3n+1) .card-art:before { content:'♡'; }
.home-page .card .main-emoji { font-size:79px; transition:transform .45s; }
.home-page .card:hover .main-emoji { transform:scale(1.18) rotate(-9deg); }
.home-page .card-art .badge { padding:5px 11px; color:#584362; font-size:9px; backdrop-filter:blur(8px); }
.home-page .card-art .art-note { color:#6d4565; font-size:14px; opacity:.8; }
.home-page .card-body { padding:25px; }
.home-page .category { color:#a14071; }
.home-page .card h3 { color:#39294b; font-size:20px; }
.home-page .card p { color:#807185; }
.home-page .card-bottom a { color:#a73769; }
.home-page .how { background:radial-gradient(ellipse at 10% 100%,#e9edde,transparent 55%),#f4f2ea; border-color:#e7e6d9; }
.home-page .step-icon { width:77px; height:77px; border-radius:24px; background:#fffcf7; box-shadow:0 8px 24px #6e68450b; transform:rotate(-5deg); transition:transform .3s; border-color:#e7dfcf; }
.home-page .step:hover .step-icon { transform:rotate(4deg) translateY(-6px); }
.home-page .step h3 { color:#46394e; }
.home-page .step-num { color:#9e8b69; }
.home-page .stories { padding:10px 0; }
.home-page .memory-collage { height:375px; background:radial-gradient(ellipse,#f5d4e1,transparent 70%); }
.home-page .polaroid { border-radius:3px; animation:memory-sway 8s ease-in-out infinite; }
.home-page .polaroid.second { animation-delay:-4s; }
.home-page .story-copy blockquote { background:linear-gradient(100deg,#fae8ec,#fffaf2); border-color:#b97e9f; color:#8a486c; border-radius:0 12px 12px 0; }
.home-page .faq-wrap details { background:#fffdfb; border:1px solid #eadfe5; border-radius:13px; padding:19px 23px; margin-bottom:10px; transition:background .3s; }
.home-page .faq-wrap details[open] { background:#fcf0f4; border-color:#e6cbd8; }
.home-page .faq-wrap summary { color:#513c5c; }
.home-page .cta { overflow:hidden; isolation:isolate; padding:65px 35px; background:radial-gradient(ellipse at 0% 0%,#594572,transparent 65%),radial-gradient(ellipse at 100% 100%,#713b62,transparent 65%),#302340; border:0; box-shadow:0 20px 50px #48273b16; }
.home-page .cta:before,.home-page .cta:after { content:'♡'; position:absolute; font-family:serif; color:#ffffff0b; font-size:260px; line-height:1; left:-30px; top:15px; transform:rotate(-20deg); z-index:-1; }
.home-page .cta:after { left:auto; right:-35px; top:45px; transform:rotate(20deg); }
.home-page .cta h2 { color:#fff2e9; }
.home-page .cta h2 .script { color:#f1b4c7; }
.home-page .cta p { color:#ceb9d3; }
.home-page .cta .pill { background:#ffffff08; border-color:#e4bfd228; color:#e8c4d5; }
.home-page .cta .btn { background:linear-gradient(110deg,#eaa0b9,#ffceaa); color:#422744; }
.footer { background:#f6f0f3; border-color:#e9dfe7; }
.floating-wa { background:#257e60; box-shadow:0 8px 25px #257e6025; width:53px; height:53px; }
[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .65s var(--reveal-delay,0ms),transform .65s var(--reveal-delay,0ms); }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }
.home-page .card.is-visible:hover { transform:translateY(-7px); }
/* Universal device support: flexible tracks, safe media and comfortable controls. */
img,video,canvas,audio { max-width:100%; }
.page,.wrap { width:100%; }
.creator-grid { grid-template-columns:minmax(0,1fr) minmax(0,370px); }
.demo-layout { grid-template-columns:minmax(0,1fr) minmax(0,380px); }
.form-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
.route-bar { flex-wrap:wrap; gap:10px 20px; }
.route-bar>.eyebrow { font-size:9px; }
.exp-body h2 { overflow-wrap:anywhere; }
.gallery-nav button { width:44px; height:44px; }
.upload-thumb button { width:28px; height:28px; }
.exp-top button { width:37px; height:37px; }
.btn.small { min-height:44px; }
.record-controls,.creator-bottom,.hero-actions { flex-wrap:wrap; }
.field input,.field select,.field textarea { min-width:0; }
.gift-row>* { min-width:0; }
.gift-row strong { overflow-wrap:anywhere; }
@keyframes hero-arrive { from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)} }
@keyframes feeling-colors { 0%,100%{background-position:0% center}50%{background-position:100% center} }
@keyframes draw-love { to{stroke-dashoffset:0} }
@keyframes star-breathe { 0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.7;transform:scale(1.3)} }
@keyframes halo-breathe { 0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1.12)} }
@keyframes orbit-drift { to{transform:rotate(360deg)} }
@keyframes note-float { 0%,100%{translate:0 0}50%{translate:0 -11px} }
@keyframes cake-wiggle { 0%,85%,100%{transform:rotate(0)}90%{transform:rotate(-5deg)}95%{transform:rotate(5deg)} }
@keyframes spark-spin { to{transform:rotate(180deg)} }
@keyframes heart-rise { 0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-10px) rotate(4deg)} }
@keyframes occasion-scroll { to{transform:translateX(-50%)} }
@keyframes memory-sway { 0%,100%{translate:0 0}50%{translate:0 -7px} }
@media(min-width:1600px) { .wrap{max-width:1280px}.home-page .hero-grid{min-height:750px}.home-page .hero h1{font-size:75px}.home-page .hero-art{height:550px}.home-page .phone{width:275px;height:510px}.home-page .phone:before{left:80px}.home-page .phone .cake-art{margin-block:25px} }
@media(max-width:1050px) { .navlinks{gap:19px}.brand{font-size:18px}.home-page .hero h1{font-size:49px;letter-spacing:-2.6px}.home-page .hero-grid{gap:20px}.home-page .float-label.top{left:-10px}.home-page .float-label.bottom{right:-5px}.love-stamp{right:-5px}.creator-grid{grid-template-columns:minmax(0,1fr) minmax(0,330px)}.demo-layout{grid-template-columns:minmax(0,1fr) minmax(0,350px)} }
@media(max-width:860px) and (min-width:761px) { .navlinks{gap:14px;font-size:11px}.navlinks .btn{padding-inline:14px;font-size:11px}.nav{gap:15px}.home-page .hero-grid{grid-template-columns:1.1fr 1fr}.home-page .hero h1{font-size:43px}.home-page .hero-art{transform:scale(.8);margin-inline:-25px}.home-page .hero p{font-size:13px}.home-page .catalog{gap:15px}.home-page .card-body{padding:19px}.home-page .card h3{font-size:17px} }
@media(max-width:760px) {
  .header{height:72px}.navlinks{top:72px}.brand{font-size:18px}.menu{min-height:42px;min-width:42px}
  .home-page .hero-grid{grid-template-columns:minmax(0,1fr);min-height:0;text-align:center;gap:0;padding-top:50px;padding-bottom:12px}
  .home-page .hero h1{font-size:clamp(42px,7.8vw,61px);letter-spacing:-2.4px;line-height:1.2;padding-bottom:20px}
  .home-page .hero h1 span{white-space:normal}.love-underline{width:72%;left:14%;bottom:0;max-width:none}
  .home-page .hero .pill{font-size:8px;letter-spacing:1.3px;padding:8px 12px;margin-bottom:23px}
  .home-page .hero p{font-size:13px;margin-top:21px;max-width:440px;padding:0 8px}.home-page .hero p br{display:none}
  .home-page .hero-actions{justify-content:center;gap:10px;margin-top:26px}.home-page .hero-actions .btn{font-size:12px;padding:13px 20px}
  .home-page .hero-note{justify-content:center;margin-top:25px;font-size:10px}
  .home-page .hero-art{height:490px;margin:23px 0 0;transform:scale(.88)}
  .home-page .float-label.top{left:calc(50% - 194px);top:63px}.home-page .float-label.bottom{right:calc(50% - 194px);bottom:43px}
  .home-page .orbit{width:390px;height:390px}.home-page .orbit.two{width:455px;height:455px}
  .home-page .art-spark.one{right:calc(50% - 150px);top:13px}.home-page .art-spark.two{left:calc(50% - 160px);bottom:32px}
  .love-stamp{right:calc(50% - 182px);top:0;width:69px;height:69px;font-size:7px}
  .home-page .benefits{padding:23px 0 28px;gap:20px 10px}.home-page .benefits div{font-size:10px;gap:10px;padding-left:5px}.home-page .benefits strong{font-size:11px}.home-page .benefits span{font-size:18px}
  .occasion-ribbon{padding:14px 0}.ribbon-track span{font-size:9px;gap:23px;padding-right:23px}
  .home-page #experiences{padding-top:60px;padding-bottom:60px}.home-page .section-head h2{font-size:35px;letter-spacing:-1.5px}.home-page .eyebrow{font-size:9px;letter-spacing:1.5px;line-height:1.9}
  .home-page .filters{margin:23px 0 25px;gap:7px}.home-page .chip{padding:9px 14px;font-size:11px}
  .home-page .catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.home-page .card-art{height:165px}.home-page .card .main-emoji{font-size:66px}.home-page .card-body{padding:18px}.home-page .card h3{font-size:17px}.home-page .card-art .badge{font-size:8px;max-width:calc(100% - 24px)}.home-page .card-art .art-note{font-size:11px}
  .home-page .memory-collage{height:330px}.home-page .cta{padding:42px 25px;border-radius:23px}.home-page .cta h2{font-size:32px;line-height:1.3}.home-page .cta .pill{font-size:10px}
  .home-page .faq-wrap details{padding:17px}.home-page .faq-wrap summary{font-size:13px}.home-page .faq-wrap details p{font-size:12px}
  .creator-grid,.demo-layout{grid-template-columns:minmax(0,1fr)}.field input,.field select,.field textarea{font-size:16px}
  .dashboard-head>div{min-width:0}.dashboard-head .btn{flex-shrink:0;font-size:11px;padding-inline:13px}.dashboard-head{gap:12px}
  .creator-preview{position:static}.footer-grid{gap:26px}.footer p{font-size:12px}.footer-bottom{line-height:1.8}
  .gift-full{padding:18px 12px}.gift-full .experience{border-radius:23px;min-height:calc(100svh - 75px)}.gift-full .exp-body{min-height:calc(100svh - 170px)}
}
@media(max-width:420px) {
  .wrap{padding-inline:20px}.page{padding-inline:16px}.brand{font-size:17px}.home-page .hero-grid{padding-top:41px}.home-page .hero h1{font-size:42px;letter-spacing:-2px}.home-page .hero h1 span{font-size:43px}
  .home-page .hero-actions .btn{font-size:11px;padding-inline:18px}.home-page .hero-note{gap:11px}.home-page .hero-art{height:443px;transform:scale(.78);margin:12px -18px -9px}
  .home-page .float-label{max-width:205px;padding:10px 12px;font-size:8px}.home-page .float-label strong{font-size:11px}
  .home-page .catalog{grid-template-columns:minmax(0,1fr);gap:21px}.home-page .card-art{height:205px}.home-page .card .main-emoji{font-size:78px}.home-page .card-body{padding:23px}.home-page .card h3{font-size:20px}.home-page .card p{font-size:12px;margin-bottom:20px}.home-page .card-art .art-note{font-size:14px}.home-page .card-art .badge{font-size:9px}
  .home-page .section-head h2{font-size:32px}.home-page .section-head p{font-size:12px}.home-page .step h3{font-size:14px}.home-page .step p{font-size:11px}.home-page .step-icon{width:64px;height:64px}
  .form-row{grid-template-columns:minmax(0,1fr)}.panel{padding:18px}.creator-bottom{flex-direction:column}.creator-bottom .btn{width:100%}.experience{padding-inline:20px}.exp-body h2{font-size:30px}.exp-body .exp-name{font-size:38px}
  .home-page .benefits strong{font-size:10px}.home-page .benefits div{font-size:9px}.home-page .benefits span{font-size:17px}
  .footer-grid{gap:28px 18px}.footer-links{font-size:11px}.floating-wa{right:14px;bottom:17px}.backtop{right:22px;bottom:78px}
}
@media(max-width:350px) {
  .wrap{padding-inline:16px}.home-page .hero h1{font-size:36px}.home-page .hero h1 span{font-size:37px}.home-page .hero .pill{font-size:7px;letter-spacing:1px}.home-page .hero-actions .btn{padding-inline:14px;font-size:10px}.home-page .hero-note{font-size:9px}.home-page .hero-art{transform:scale(.7);height:415px;margin-top:0;margin-bottom:-15px}.home-page .chip{font-size:10px;padding-inline:12px}.home-page .benefits{gap:18px 8px}.brand{font-size:16px}.brand img{width:32px;height:32px}.dashboard-head h1{font-size:24px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.experience{padding-inline:16px}.envelope{max-width:100%}
}
@media(prefers-reduced-motion:reduce) { [data-reveal]{opacity:1;transform:none}.love-underline path{stroke-dashoffset:0}.ribbon-track{animation:none}.home-page .phone{transform:rotate(7deg)} }