@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root{
    --pink-1:#fff8fa;
    --pink-2:#fce7ee;
    --pink-3:#f7c8d7;
    --pink-4:#e8a1b7;
    --rose:#bd657f;
    --rose-dark:#88495e;
    --ink:#44373c;
    --muted:#8e7d83;
    --line:#eadde1;
    --white:#fffdfd;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-height:100vh;
    color:var(--ink);
    font-family:"DM Sans",Arial,sans-serif;
    background:
        radial-gradient(circle at 8% 10%, rgba(248,205,219,.65), transparent 24%),
        radial-gradient(circle at 90% 85%, rgba(244,214,224,.7), transparent 27%),
        #f9f2f4;
}
button,input,select,textarea{font:inherit}
button,a{transition:.2s ease}
a{text-decoration:none}

.page-shell{
    width:min(1450px,96vw);
    min-height:92vh;
    margin:4vh auto;
    display:grid;
    grid-template-columns:43% 57%;
    overflow:hidden;
    border-radius:28px;
    background:rgba(255,255,255,.8);
    box-shadow:0 25px 70px rgba(115,69,83,.14);
    border:1px solid rgba(255,255,255,.8);
}

.brand-panel{
    position:relative;
    overflow:hidden;
    padding:78px 7vw 35px 6vw;
    background:
      radial-gradient(circle at 75% 18%, rgba(255,255,255,.75), transparent 18%),
      linear-gradient(145deg,#fff9f8 0%,#f9e8e9 53%,#f5dfe5 100%);
}
.brand-kicker,.mini-label{
    color:#b46778;
    letter-spacing:3px;
    font-size:12px;
    font-weight:700;
}
.brand-panel h1{
    margin:22px 0 18px;
    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(48px,4.5vw,76px);
    line-height:.98;
    letter-spacing:-2px;
    font-weight:600;
}
.brand-panel h1 span{color:#c06a80}
.brand-panel p{
    max-width:560px;
    color:#796a6f;
    font-size:18px;
    line-height:1.8;
}

.brand-note{
    position:absolute;
    bottom:32px;
    left:6vw;
    color:#a47a86;
    font-size:12px;
    letter-spacing:1.2px;
}

.garden-art{
    position:absolute;
    left:8%;
    right:5%;
    bottom:8%;
    height:210px;
}
.ground{
    position:absolute;bottom:0;left:0;right:0;height:6px;
    border-radius:50%;background:#d7d3c6;
}
.trunk{
    position:absolute;bottom:8px;left:62%;height:116px;width:8px;
    background:#9d7468;border-radius:8px;
}
.tree{position:absolute}
.crown{
    position:absolute;border-radius:50%;
    background:#e8b18f;
    box-shadow:inset -9px -9px 0 rgba(197,131,104,.13);
}
.c1{width:110px;height:110px;left:54%;top:14px}
.c2{width:70px;height:70px;left:48%;top:60px}
.c3{width:76px;height:76px;left:63%;top:62px}
.book{
    position:absolute;height:17px;border-radius:5px;left:25%;transform:skewX(-3deg);
}
.b1{width:160px;bottom:42px;background:#9d6656}
.b2{width:175px;bottom:20px;background:#7b9072}
.b3{width:150px;bottom:0;background:#d28c66}
.mug{
    position:absolute;bottom:18px;left:9%;width:44px;height:50px;
    border:6px solid #9d7164;border-top:none;border-radius:0 0 12px 12px;
}
.mug:after{
    content:"";position:absolute;right:-25px;top:4px;width:20px;height:23px;
    border:5px solid #9d7164;border-left:0;border-radius:0 14px 14px 0;
}

.form-panel{background:rgba(255,253,253,.9);overflow:auto}
.form-inner{max-width:900px;padding:54px 6vw 45px;margin:auto}
.mobile-logo{display:none;color:var(--rose);font-weight:800;letter-spacing:4px}
.top-title h2{
    margin:4px 0 5px;
    font-family:"Playfair Display",Georgia,serif;
    font-size:42px;
    line-height:1.1;
}
.top-title p{margin:0;color:var(--muted);font-size:15px}

.steps{
    display:flex;align-items:flex-start;margin:38px 0 40px;
}
.step{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:58px}
.step b{
    width:38px;height:38px;display:grid;place-items:center;
    border:1px solid var(--line);border-radius:50%;
    color:#a99a9f;background:#fff;font-size:13px;
}
.step.active b{color:white;background:var(--rose);border-color:var(--rose)}
.step span{font-size:12px;color:#a49499}
.step.active span{color:var(--rose);font-weight:600}
.line{height:1px;background:#e7dfe2;flex:1;margin:19px 8px 0}
.line.active{background:#dfa0b3}

.section-heading{
    display:flex;gap:17px;align-items:flex-start;margin-bottom:28px;
}
.section-heading>span{color:#b66a7e;font-size:13px;font-weight:800;letter-spacing:1px}
.section-heading h3{margin:0 0 4px;font-size:24px}
.section-heading p{margin:0;color:var(--muted);font-size:13px}

.register-form label{
    display:block;margin:0 0 8px;
    font-size:14px;font-weight:600;color:#5e5055;
}
.register-form label em{color:#c56680;font-style:normal}
.register-form input,.register-form select,.register-form textarea{
    width:100%;border:1px solid #e7dce0;border-radius:15px;
    background:#fffafa;padding:15px 16px;color:var(--ink);
    outline:none;margin-bottom:20px;
}
.register-form textarea{resize:vertical;min-height:125px}
.register-form input:focus,.register-form select:focus,.register-form textarea:focus{
    border-color:#d99aae;box-shadow:0 0 0 4px rgba(217,154,174,.12);
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.password-wrap{position:relative}
.password-wrap input{padding-right:75px}
.password-wrap button{
    position:absolute;right:8px;top:7px;border:0;border-radius:10px;
    padding:9px 10px;background:#f2e3e7;color:#8f6170;cursor:pointer;
}
.info-box,.review-box{
    border-radius:15px;background:#f7efea;color:#89766e;
    padding:14px 16px;font-size:12px;line-height:1.6;margin:0 0 24px;
}
.review-box{background:#fff4f7;border:1px solid #f0d9e0}
.review-box div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px dashed #ead2d9}
.review-box div:last-child{border-bottom:0}
.review-box span{color:#a28790}.review-box strong{font-weight:600;text-align:right}

.primary-btn,.secondary-btn{
    min-height:50px;border-radius:14px;padding:0 20px;
    display:inline-flex;align-items:center;justify-content:center;gap:12px;
    cursor:pointer;font-weight:700;
}
.primary-btn{
    width:100%;border:1px solid var(--rose);
    color:#fff;background:linear-gradient(135deg,#ca7890,#b85f79);
    box-shadow:0 12px 24px rgba(184,95,121,.18);
}
.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.secondary-btn{
    border:1px solid #eadce0;color:#8d6873;background:#fff;
}
.secondary-btn:hover{background:#fff4f6}
.button-row{display:grid;grid-template-columns:170px 1fr;gap:12px}
.button-row .primary-btn{width:100%}
.privacy-note{text-align:center;color:#a5949a;font-size:11px;margin:23px 0 0}
.alert{
    background:#fff0f3;border:1px solid #efc9d4;color:#a34d67;
    padding:14px 16px;border-radius:14px;margin-bottom:22px;font-size:13px;line-height:1.7;
}

.petals{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.petal{
    position:absolute;color:#d789a0;font-size:25px;opacity:.35;
    animation:float 8s ease-in-out infinite;
}
.p1{left:5%;top:18%}.p2{left:31%;top:7%;font-size:17px;animation-delay:1s}
.p3{right:8%;top:18%;font-size:19px;animation-delay:2s}
.p4{right:26%;top:70%;font-size:27px;animation-delay:3s}
.p5{left:12%;bottom:12%;font-size:18px;animation-delay:1.5s}
.p6{left:44%;bottom:8%;font-size:15px;animation-delay:2.5s}
.p7{right:43%;top:27%;font-size:14px;animation-delay:4s}
.p8{right:4%;bottom:22%;font-size:22px;animation-delay:5s}
@keyframes float{50%{transform:translateY(-12px) rotate(8deg);opacity:.55}}

.success-page{display:grid;place-items:center;padding:30px}
.success-card{
    position:relative;z-index:2;width:min(580px,94vw);padding:58px 48px;
    text-align:center;border-radius:28px;background:#fffafb;
    border:1px solid #f0dfe4;box-shadow:0 25px 70px rgba(115,69,83,.15);
}
.success-flower{font-size:62px;margin-bottom:10px}
.success-card h1{
    font-family:"Playfair Display",Georgia,serif;font-size:42px;margin:10px 0;
}
.success-card p{color:var(--muted);line-height:1.7;margin-bottom:28px}
.success-card .primary-btn{width:auto;padding:0 28px}

@media(max-width:900px){
    .page-shell{grid-template-columns:1fr;margin:0;width:100%;min-height:100vh;border-radius:0}
    .brand-panel{display:none}
    .form-inner{padding:35px 7vw 45px}
    .mobile-logo{display:block;margin-bottom:30px}
}
@media(max-width:600px){
    .top-title h2{font-size:34px}
    .two-col{grid-template-columns:1fr;gap:0}
    .button-row{grid-template-columns:1fr}
    .steps{margin:30px 0}
    .step span{font-size:10px}
    .step{min-width:45px}
    .line{margin-left:3px;margin-right:3px}
    .success-card{padding:45px 24px}
}