/* Motion is decorative: content and navigation work without it. */
.hero{isolation:isolate;background:radial-gradient(ellipse at 50% 10%,#ffffffb0,transparent 65%)}
.hero h1{ text-wrap:balance }
.hero .orb-one{background:radial-gradient(circle at 35% 30%,#dfff9c,var(--lime) 65%);box-shadow:0 0 85px #b8fa6238}
.hero .orb-two{background:radial-gradient(circle at 35% 30%,#ffd7c9,var(--pink) 65%)}
.hero .hero-heart{position:absolute;z-index:0;right:4%;top:12%;width:clamp(110px,17vw,220px);height:auto;pointer-events:none;opacity:.18;transform:rotate(14deg);filter:drop-shadow(0 18px 30px #1bc87835)}
.button{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
.button span{transition:transform .25s ease}
.button:focus-visible,a:focus-visible{outline:3px solid #1bc878;outline-offset:5px}
.button:active{transform:translateY(1px) scale(.98)}
.button:not(.ghost){box-shadow:0 6px 0 #103d2d12,0 12px 28px #103d2d12}
.button:not(.ghost)::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#ffffff24 48%,transparent 75%);transform:translateX(-150%)}
.value-grid>div{position:relative;transition:transform .3s ease,border-color .3s ease}
.value-grid b{transition:color .3s ease}
.date-poster{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(140deg,#4bdd93 0%,#1bc878 55%,#b8fa62 140%);box-shadow:0 20px 55px #103d2d18}
.date-poster:before,.date-poster:after{content:'';position:absolute;z-index:-1;width:320px;height:320px;border:1px solid #103d2d20;border-radius:50%;right:-130px;bottom:-70px;pointer-events:none}
.date-poster:after{width:420px;height:420px;right:-180px;bottom:-120px}
.date-poster i{display:block;transform-origin:90% 80%;filter:drop-shadow(0 12px 14px #103d2d22)}
.brand span,.big-heart,.test h2 span{display:inline-block}
.heart-card{box-shadow:0 24px 60px #103d2d20}
input,textarea{transition:border-color .2s ease,box-shadow .2s ease}
input:focus,textarea:focus{outline:2px solid #1bc878;outline-offset:2px;box-shadow:0 0 0 5px #1bc87812}
.motion-toggle{position:fixed;right:14px;bottom:14px;z-index:20;border:1px solid #103d2d2b;background:#f7f4e9f5;color:#103d2d;font:11px Arial,sans-serif;letter-spacing:.02em;padding:10px 13px;border-radius:24px;cursor:pointer;box-shadow:0 3px 15px #103d2d12}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .button:hover{transform:translateY(-4px);box-shadow:0 12px 25px #103d2d25}
  .button:hover span{transform:translateX(5px)}
  .value-grid>div:hover{transform:translateY(-5px);border-color:#b8fa62}
  .value-grid>div:hover b{color:#b8fa62}
}
@media(prefers-reduced-motion:no-preference){
  html:not(.motion-paused) .orb-one{animation:orb-drift 12s ease-in-out infinite alternate}
  html:not(.motion-paused) .orb-two{animation:orb-drift 15s ease-in-out -5s infinite alternate-reverse}
  html:not(.motion-paused) .hero-heart{animation:heart-float 7s ease-in-out infinite}
  html:not(.motion-paused) .date-poster i{animation:heart-beat 4.8s ease-in-out infinite}
  html:not(.motion-paused) .big-heart{animation:heart-beat 4.8s ease-in-out infinite}
  html:not(.motion-paused) .hero .button:not(.ghost)::after{animation:button-sheen 7s ease-in-out 2s infinite}
}
@keyframes orb-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(25px,30px) scale(1.15)}}
@keyframes heart-float{0%,100%{transform:translateY(0) rotate(14deg)}50%{transform:translateY(-18px) rotate(6deg)}}
@keyframes heart-beat{0%,22%,100%{transform:scale(1)}8%{transform:scale(1.09)}15%{transform:scale(1.025)}}
@keyframes button-sheen{0%,65%{transform:translateX(-150%)}90%,100%{transform:translateX(150%)}}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.motion-toggle{display:none}}
@media(max-width:700px){.hero .hero-heart{right:2%;top:8%;opacity:.12}.motion-toggle{bottom:10px;right:10px;font-size:10px;padding:8px 11px}}
.thank-you{color:#127749;position:relative;background:linear-gradient(110deg,#103d2d,#15945b 50%,#103d2d);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero .hero-heart{opacity:.8;width:clamp(95px,13vw,165px);top:5%;right:5%;filter:drop-shadow(0 18px 20px #103d2d24)}
.hero .eyebrow:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#1bc878;margin-right:10px;box-shadow:0 0 0 5px #1bc87812}
.date-poster{border-radius:4px 36px 4px 4px}
.date-poster>span{position:relative;z-index:1}
.heart-card{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,#256346,#103d2d 65%);border:1px solid #6fa982;border-radius:6px}
.heart-card:before{content:'';position:absolute;inset:12px;border:1px solid #b8fa6235;pointer-events:none}
.heart-card .big-heart{text-shadow:0 8px 30px #b8fa6250}
.heart-card blockquote{overflow-wrap:anywhere}
@media(max-width:700px){.hero .hero-heart{top:3%;right:4%;width:85px;opacity:.65}.hero .eyebrow{max-width:260px;line-height:1.6}.hero .button{min-height:56px}}
.free-badge{display:inline-block;background:#b8fa62;color:#103d2d;border:1px solid #103d2d15;border-radius:20px;padding:5px 9px;font-size:10px;font-weight:800;letter-spacing:.08em;line-height:1}
.hero .rotating-words{display:inline-grid;vertical-align:bottom;max-width:100%;font-size:.82em;line-height:1.15}
.rotating-words>.thank-you{grid-area:1/1;white-space:nowrap;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.rotating-words>.word-active{opacity:1;transform:translateY(0)}
@media(max-width:700px){.hero .rotating-words{font-size:clamp(24px,8vw,44px)}}
.hero .headline-intro{display:block;text-wrap:balance}
.hero .rotating-words{display:grid;width:100%;margin-top:.04em}