*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:#f4dfc3;color:#352316;font-family:Georgia,'Times New Roman',serif;overflow-x:hidden}
body{background:linear-gradient(180deg,#fff5e8,#f2d6b3)}
.cover{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at top,#fff8ed,#e9cda7);display:flex;align-items:center;justify-content:center;transition:opacity .9s ease,visibility .9s ease;overflow:hidden}
.cover.hide{opacity:0;visibility:hidden}
.cover-card{width:min(92vw,430px);height:min(82vh,660px);min-height:570px;position:relative;border-radius:34px;overflow:hidden;background:linear-gradient(145deg,#fff4e8,#e8cda8);border:1px solid rgba(180,128,57,.55);box-shadow:0 30px 90px rgba(80,48,20,.28)}
.cover-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 18%,rgba(255,255,255,.75),transparent 18%),radial-gradient(circle at 82% 82%,rgba(255,255,255,.55),transparent 18%),repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 2px,transparent 2px 12px)}
.tulle{position:absolute;inset:-10px;z-index:4;transition:transform 1.35s cubic-bezier(.2,.86,.16,1),opacity .8s ease;filter:drop-shadow(0 8px 18px rgba(80,45,18,.18))}
.tulle.left{clip-path:polygon(0 0,100% 0,58% 50%,100% 100%,0 100%)}
.tulle.right{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,42% 50%)}
.tulle:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(33deg,rgba(255,255,255,.48) 0 2px,rgba(255,255,255,0) 2px 10px),repeating-linear-gradient(-33deg,rgba(255,255,255,.25) 0 1px,rgba(255,255,255,0) 1px 12px),radial-gradient(circle at 18% 26%,#fff 0 4px,transparent 5px),radial-gradient(circle at 31% 42%,rgba(255,255,255,.9) 0 3px,transparent 4px),radial-gradient(circle at 74% 30%,#fff 0 4px,transparent 5px),radial-gradient(circle at 65% 68%,rgba(255,255,255,.9) 0 3px,transparent 4px),linear-gradient(115deg,rgba(255,255,255,.82),rgba(255,255,255,.35),rgba(230,205,174,.65));background-size:auto,auto,42px 42px,45px 45px,38px 38px,44px 44px,auto}
.tulle:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 18%,#fff 0 13px,transparent 14px),radial-gradient(circle at 16% 22%,#fff1df 0 8px,transparent 9px),radial-gradient(circle at 88% 78%,#fff 0 13px,transparent 14px),radial-gradient(circle at 82% 74%,#fff1df 0 8px,transparent 9px),radial-gradient(ellipse at 12% 30%,rgba(120,135,78,.28) 0 18px,transparent 19px),radial-gradient(ellipse at 85% 69%,rgba(120,135,78,.28) 0 18px,transparent 19px)}
.cover.open .tulle.left{transform:translateX(-88%) rotate(-8deg);opacity:.7}
.cover.open .tulle.right{transform:translateX(88%) rotate(8deg);opacity:.7}
.pearl-line{position:absolute;left:50%;top:50%;width:130%;height:14px;transform:translate(-50%,-50%);z-index:6;background:radial-gradient(circle,#fff 0 5px,#d1aa70 6px,transparent 7px);background-size:22px 14px;transition:.45s}
.cover.open .pearl-line{opacity:0}
.seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,#fff7e9 0%,#d3a85f 72%,#a8752c 100%);border:3px solid #b78335;display:flex;align-items:center;justify-content:center;color:#8d5b20;font-size:32px;font-weight:bold;box-shadow:0 12px 35px rgba(70,42,15,.32);transition:.5s}
.cover.open .seal{transform:translate(-50%,-50%) scale(.15) rotate(25deg);opacity:0}
.cover-title{position:absolute;left:0;right:0;top:14%;z-index:8;text-align:center;color:#4a3017}
.cover-title .small{letter-spacing:7px;font-size:16px;margin-bottom:18px}
.cover-title .date{letter-spacing:8px;font-size:18px}
.tap{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);z-index:11;border:1px solid #bd8a3b;background:rgba(255,255,255,.84);border-radius:999px;padding:15px 28px;font-size:18px;color:#3b2a1b;box-shadow:0 10px 26px rgba(90,55,20,.16);transition:.45s}
.cover.open .tap{opacity:0;transform:translateX(-50%) translateY(18px)}
.invite{max-width:560px;margin:0 auto;background:#fff0db;position:relative;overflow:hidden;box-shadow:0 0 36px rgba(80,45,16,.22)}
.share-fixed{position:fixed;right:12px;top:max(12px,env(safe-area-inset-top));z-index:30;border:1px solid #bd914f;border-radius:999px;background:rgba(255,250,242,.94);padding:10px 14px;color:#3b2a1b;font-weight:700;box-shadow:0 6px 20px rgba(80,50,20,.14)}
.music{position:fixed;left:12px;top:max(12px,env(safe-area-inset-top));z-index:30;width:52px;height:52px;border-radius:50%;border:1px solid #bd914f;background:rgba(255,250,242,.94);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 6px 20px rgba(80,50,20,.14)}
.hero{position:relative;min-height:680px;background:#15110d;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(1.05) contrast(1.03)}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.02) 40%,rgba(0,0,0,.45) 78%,rgba(255,240,219,.98) 100%)}
.tulle-open{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.22) 20%,transparent 42%),linear-gradient(245deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.22) 20%,transparent 42%);opacity:.75}
.flowers-side{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at 7% 58%,#fff 0 18px,transparent 19px),radial-gradient(circle at 12% 62%,#fff2e2 0 12px,transparent 13px),radial-gradient(circle at 92% 58%,#fff 0 18px,transparent 19px),radial-gradient(circle at 88% 62%,#fff2e2 0 12px,transparent 13px),radial-gradient(circle at 7% 72%,#fff 0 17px,transparent 18px),radial-gradient(circle at 93% 72%,#fff 0 17px,transparent 18px)}
.hero-text{position:absolute;left:18px;right:18px;bottom:48px;z-index:7;text-align:center;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.55)}
.names{font-family:"Segoe Script","Lucida Calligraphy",cursive;font-size:39px;line-height:1.1;color:#f3c97f;font-style:italic;text-shadow:0 2px 9px rgba(0,0,0,.58),0 0 10px rgba(255,225,150,.28)}
.content{position:relative;text-align:center;background:linear-gradient(180deg,#fff0db,#f8e3c7);padding:26px 16px 40px}
.content:before,.content:after{content:"";position:absolute;top:0;bottom:0;width:44px;opacity:.5;background-image:radial-gradient(circle,#fff 0 5px,transparent 6px),radial-gradient(circle,#d1aa70 0 2px,transparent 3px);background-size:29px 29px,20px 20px;pointer-events:none}
.content:before{left:0}.content:after{right:0}
.card,.verse,.count,.rsvp,.share-bottom,footer{position:relative;z-index:2}
.verse{margin-bottom:18px}
.verse .arabic{font-size:22px;color:#a97935;margin-bottom:8px}
.verse p{font-size:20px;line-height:1.32;margin:0 0 6px}
.verse span{font-size:16px}
.count{border:1px solid rgba(190,139,62,.32);border-radius:24px;background:rgba(255,255,255,.70);padding:18px 12px;margin:18px 0 18px;box-shadow:0 6px 18px rgba(80,45,15,.05)}
.count-title{letter-spacing:2.8px;text-transform:uppercase;color:#9b6725;font-weight:bold;font-size:14px;margin-bottom:13px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid div{background:rgba(255,255,255,.88);border:1px solid rgba(190,139,62,.20);border-radius:15px;padding:12px 2px}
.grid b{display:block;font-size:30px;color:#b37c2e;line-height:1}
.grid span{font-size:11px;text-transform:uppercase}
.events{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.card{border:1px solid rgba(190,139,62,.30);border-radius:22px;background:rgba(255,255,255,.68);padding:18px 8px;min-height:250px}
.card h2{letter-spacing:4px;font-size:22px;margin:0 0 10px;text-transform:uppercase}
.card p{font-size:15px;line-height:1.38;margin:7px 0}
.btnrow{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.btn{display:block;text-decoration:none;border:1px solid #bd8a3b;border-radius:999px;padding:9px 7px;color:#9a6725;background:rgba(255,255,255,.83);font-weight:bold;font-size:13px}
.btn.gold{background:linear-gradient(135deg,#c99845,#b87e2a);color:white}
.rsvp,.share-bottom{display:flex;align-items:center;gap:14px;margin:18px auto 0;max-width:400px;text-decoration:none;background:rgba(255,255,255,.76);border:1px solid rgba(190,139,62,.32);border-radius:24px;padding:15px 18px;color:#8a5b21;font-size:18px;font-weight:bold;box-shadow:0 8px 20px rgba(80,45,15,.1);text-align:left;width:100%}
.rsvp small,.share-bottom small{display:block;color:#3a291a;font-weight:400;font-size:13px;margin-top:3px}
.ico{width:48px;height:48px;border-radius:50%;background:#b9812d;color:white;display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto}
footer{font-family:"Segoe Script","Lucida Calligraphy",cursive;font-size:24px;color:#8d602b;margin-top:26px;font-style:italic}
@media(max-width:390px){.hero{min-height:640px}.names{font-size:34px}.events{gap:9px}.card{padding:16px 6px}.card p{font-size:14px}}