:root{
  --rose-50:#FBE6EE; --rose:#EFB8C8; --rose-strong:#E28AA7;
  --black:#0F1115; --white:#FAFAFA;
  --shadow-soft:0 10px 25px rgba(15,17,21,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--black);background:var(--white);
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
.h-romantic{font-family:"Playfair Display", Georgia, "Times New Roman", serif; letter-spacing:.2px}
.container{width:min(1120px,92%);margin:0 auto}
.section{padding:64px 0}
.section-title{font-size:clamp(28px,3.2vw,42px);margin:0 0 20px}
.btn{display:inline-block;padding:12px 20px;border-radius:999px;
  font-weight:600;text-decoration:none;transition:all .2s ease}
.btn-primary{background:var(--rose-strong);color:#fff}
.btn-primary:hover{background:var(--rose)}
.btn-outline{color:var(--rose-strong);border:2px solid var(--rose-strong);background:transparent}
.btn-outline:hover{background:rgba(239,184,200,0.12)}
img{max-width:100%;display:block}
.logo-dot{width:14px;height:14px;border-radius:50%;background:var(--rose-strong);display:inline-block;margin-right:8px}

/* Animated hero gradient */
@keyframes hero-gradient-animation { 0% { --s-start-0:15%; --s-end-0:72%; --y-0:99%; --c-0:hsla(291,76%,91%,1); --x-0:37%; --s-start-1:4%; --s-end-1:56%; --y-1:78%; --c-1:hsla(224,99%,60%,1); --x-1:41%; --y-2:27%; --s-start-2:2%; --s-end-2:81%; --c-2:hsla(183,52%,85%,1); --x-2:49%; --y-3:43%; --x-3:59%; --s-start-3:7%; --s-end-3:70%; --c-3:hsla(207,75%,75%,1); --s-start-4:0%; --s-end-4:62%; --c-4:hsla(183,73%,64%,1); --y-4:8%; --x-4:87%; } 100% { --s-start-0:19%; --s-end-0:83%; --y-0:13%; --c-0:hsla(276,51%,95%,1); --x-0:79%; --s-start-1:1%; --s-end-1:73%; --y-1:20%; --c-1:hsla(298,86%,62%,1); --x-1:66%; --y-2:96%; --s-start-2:15%; --s-end-2:66%; --c-2:hsla(218,71%,85%,1); --x-2:47%; --y-3:84%; --x-3:28%; --s-start-3:5%; --s-end-3:68%; --c-3:hsla(236,68%,100%,1); --s-start-4:20%; --s-end-4:75%; --c-4:hsla(239,59%,70%,1); --y-4:82%; --x-4:37%; } }
@property --s-start-0 { syntax:'<percentage>'; inherits:false; initial-value:15% }
@property --s-end-0 { syntax:'<percentage>'; inherits:false; initial-value:72% }
@property --y-0 { syntax:'<percentage>'; inherits:false; initial-value:99% }
@property --c-0 { syntax:'<color>'; inherits:false; initial-value:hsla(291,76%,91%,1) }
@property --x-0 { syntax:'<percentage>'; inherits:false; initial-value:37% }
@property --s-start-1 { syntax:'<percentage>'; inherits:false; initial-value:4% }
@property --s-end-1 { syntax:'<percentage>'; inherits:false; initial-value:56% }
@property --y-1 { syntax:'<percentage>'; inherits:false; initial-value:78% }
@property --c-1 { syntax:'<color>'; inherits:false; initial-value:hsla(224,99%,60%,1) }
@property --x-1 { syntax:'<percentage>'; inherits:false; initial-value:41% }
@property --y-2 { syntax:'<percentage>'; inherits:false; initial-value:27% }
@property --s-start-2 { syntax:'<percentage>'; inherits:false; initial-value:2% }
@property --s-end-2 { syntax:'<percentage>'; inherits:false; initial-value:81% }
@property --c-2 { syntax:'<color>'; inherits:false; initial-value:hsla(183,52%,85%,1) }
@property --x-2 { syntax:'<percentage>'; inherits:false; initial-value:49% }
@property --y-3 { syntax:'<percentage>'; inherits:false; initial-value:43% }
@property --x-3 { syntax:'<percentage>'; inherits:false; initial-value:59% }
@property --s-start-3 { syntax:'<percentage>'; inherits:false; initial-value:7% }
@property --s-end-3 { syntax:'<percentage>'; inherits:false; initial-value:70% }
@property --c-3 { syntax:'<color>'; inherits:false; initial-value:hsla(207,75%,75%,1) }
@property --s-start-4 { syntax:'<percentage>'; inherits:false; initial-value:0% }
@property --s-end-4 { syntax:'<percentage>'; inherits:false; initial-value:62% }
@property --c-4 { syntax:'<color>'; inherits:false; initial-value:hsla(183,73%,64%,1) }
@property --y-4 { syntax:'<percentage>'; inherits:false; initial-value:8% }
@property --x-4 { syntax:'<percentage>'; inherits:false; initial-value:87% }
.hero{
  --y-0:99%; --c-0:hsla(291,76%,91%,1); --x-0:37%;
  --y-1:78%; --c-1:hsla(224,99%,60%,1); --x-1:41%;
  --y-2:27%; --c-2:hsla(183,52%,85%,1); --x-2:49%;
  --y-3:43%; --x-3:59%; --c-3:hsla(207,75%,75%,1);
  --c-4:hsla(183,73%,64%,1); --y-4:8%; --x-4:87%;
  background-color: hsla(223,89%,87%,1);
  background-image:
    radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)),
    radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)),
    radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)),
    radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)),
    radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4));
  animation: hero-gradient-animation 10s linear infinite alternate;
  color:#fff; text-align:center; min-height:62vh; display:flex; align-items:center;
}

@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg }
@keyframes spin-border { to { --angle: 360deg } }