:root{
    --emerald:#0d2b1f; --emerald-2:#173d2b; --emerald-glow:#1f4a35;
    --gold:#c9a24a; --gold-light:#d4af6a;
    --ivory:#f2ede0; --ink:#1c1c1c; --ink-soft:#5c5648;
    --line:#e3d9bf;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:'Cairo',sans-serif; color:var(--ink); background:var(--ivory); line-height:1.6;}
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
  .eyebrow{font-family:'Poppins',sans-serif; font-size:11px; letter-spacing:4px; color:var(--gold);
    text-transform:uppercase; font-weight:600; margin-bottom:14px; display:block;}
  h2.title{font-family:'Aref Ruqaa',serif; font-size:clamp(28px,4vw,42px); color:var(--emerald); margin-bottom:10px;}
  .lead{color:var(--ink-soft); font-size:16px; max-width:560px;}
  .btn{display:inline-flex; align-items:center; gap:8px; padding:14px 30px; border-radius:3px;
    font-family:'Poppins',sans-serif; font-size:13px; letter-spacing:.5px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:all .25s ease;}
  .btn-gold{background:var(--gold); color:var(--emerald); }
  .btn-gold:hover{background:var(--gold-light); transform:translateY(-2px);}
  .btn-outline{border-color:rgba(242,237,224,.5); color:var(--ivory);}
  .btn-outline:hover{border-color:var(--gold); color:var(--gold);}
  .btn-outline-dark{border-color:var(--emerald); color:var(--emerald);}
  .btn-outline-dark:hover{background:var(--emerald); color:var(--ivory);}
  section{padding:100px 0;}
  .note{position:fixed; bottom:0; inset-inline:0; background:var(--emerald); color:var(--ivory);
    font-family:'Poppins',sans-serif; font-size:12px; text-align:center; padding:10px; letter-spacing:.5px; z-index:99;}
  .note b{color:var(--gold-light);}

  /* HEADER */
  header{position:sticky; top:0; z-index:50; background:rgba(13,43,31,.92); backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(201,162,74,.2);}
  header .wrap{display:flex; align-items:center; justify-content:space-between; height:84px;}
  .logo-word{font-family:'Lora',serif; letter-spacing:7px; font-size:20px; color:var(--ivory);}
  .logo-word span{color:var(--gold);}
  nav{display:flex; gap:34px; font-family:'Poppins',sans-serif; font-size:13px; color:rgba(242,237,224,.8);}
  nav a:hover{color:var(--gold-light);}
  .navcta{display:flex; align-items:center; gap:18px;}
  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer;}
  .burger span{width:22px; height:2px; background:var(--ivory);}

  /* HERO */
  .hero{background:radial-gradient(120% 140% at 20% -10%, var(--emerald-glow), var(--emerald) 55%);
    color:var(--ivory); padding:110px 0 130px; position:relative; overflow:hidden;}
  .hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center;}
  .hero .eyebrow{color:var(--gold-light);}
  .hero h1{font-family:'Aref Ruqaa',serif; font-size:clamp(34px,4.4vw,54px); line-height:1.35; margin-bottom:22px;}
  .hero h1 em{font-style:normal; color:var(--gold-light);}
  .hero p{color:rgba(242,237,224,.75); font-size:16.5px; max-width:460px; margin-bottom:34px;}
  .hero .ctas{display:flex; gap:14px; flex-wrap:wrap;}

  /* signature: the "invitation card" that opens itself */
  .card-stage{position:relative; height:440px; display:flex; align-items:center; justify-content:center; perspective:1600px;}
  .invite-card{width:300px; height:390px; position:relative; transform-style:preserve-3d; animation:reveal 1.4s .3s cubic-bezier(.22,1,.36,1) both;}
  .invite-cover, .invite-inner{position:absolute; inset:0; border-radius:4px; backface-visibility:hidden;}
  .invite-cover{background:linear-gradient(160deg,var(--gold-light),var(--gold)); display:flex; align-items:center; justify-content:center;
    box-shadow:0 30px 60px rgba(0,0,0,.35); animation:openCover 5s ease-in-out infinite; animation-delay:1.6s; transform-origin:right center;}
  .invite-cover .m{font-family:'Lora',serif; font-size:15px; letter-spacing:6px; color:var(--emerald);}
  .invite-inner{background:var(--ivory); box-shadow:0 30px 60px rgba(0,0,0,.35); z-index:-1; padding:34px 26px; text-align:center;}
  .invite-inner .k{font-family:'Poppins',sans-serif; font-size:9.5px; letter-spacing:3px; color:var(--gold); text-transform:uppercase; margin-bottom:16px;}
  .invite-inner .names{font-family:'Aref Ruqaa',serif; font-size:26px; color:var(--emerald); margin-bottom:10px;}
  .invite-inner .dash{width:34px; height:1px; background:var(--gold); margin:16px auto;}
  .invite-inner .date{font-family:'Poppins',sans-serif; font-size:11px; letter-spacing:1.5px; color:var(--ink-soft);}
  .invite-inner .btnmini{margin-top:22px; display:inline-block; font-family:'Poppins',sans-serif; font-size:10px; letter-spacing:2px;
    color:var(--emerald); border:1px solid var(--gold); padding:9px 20px; border-radius:2px;}
  @keyframes reveal{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);}}
  @keyframes openCover{0%,18%{transform:rotateY(0deg);} 45%,80%{transform:rotateY(-165deg);} 100%{transform:rotateY(-165deg);}}
  @media (prefers-reduced-motion: reduce){ .invite-cover{animation:none;} .invite-card{animation:none;} }

  /* WHAT IS */
  .about{background:var(--ivory);}
  .about .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center;}
  .browser{border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:0 20px 50px rgba(13,43,31,.1); background:#fff;}
  .browser .bar{background:#efe9d8; padding:10px 14px; display:flex; gap:6px;}
  .browser .bar i{width:8px; height:8px; border-radius:50%; background:#d8cfb2; display:inline-block;}
  .browser .screen{background:var(--emerald); padding:34px 20px; text-align:center;}
  .browser .screen .names{font-family:'Aref Ruqaa',serif; color:var(--ivory); font-size:20px;}
  .browser .screen .sub{font-family:'Poppins',sans-serif; color:var(--gold-light); font-size:9px; letter-spacing:3px; margin-top:8px;}
  .about ul{margin-top:26px; display:flex; flex-direction:column; gap:14px;}
  .about li{display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); font-size:14.5px;}
  .about li .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); margin-top:8px; flex-shrink:0;}

  /* FEATURES */
  .features{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .fgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:50px; border:1px solid var(--line);}
  .fcard{background:#fff; padding:34px 26px;}
  .fcard .ic{width:42px; height:42px; border-radius:50%; border:1px solid var(--gold); display:flex; align-items:center; justify-content:center;
    font-family:'Lora',serif; color:var(--gold); font-size:16px; margin-bottom:20px;}
  .fcard h3{font-family:'Cairo',sans-serif; font-weight:700; font-size:15.5px; color:var(--emerald); margin-bottom:8px;}
  .fcard p{font-size:13px; color:var(--ink-soft);}

  /* GALLERY / TEMPLATES */
  .gallery{background:var(--ivory);}
  .tabs{display:flex; gap:8px; flex-wrap:wrap; margin:40px 0 36px; border-bottom:1px solid var(--line); padding-bottom:0;}
  .tab{font-family:'Poppins',sans-serif; font-size:12.5px; letter-spacing:.5px; padding:12px 18px; color:var(--ink-soft);
    border-bottom:2px solid transparent; cursor:pointer; transition:.2s;}
  .tab.active{color:var(--emerald); border-color:var(--gold); font-weight:600;}
  .tab .soon{font-size:9px; color:var(--gold); border:1px solid var(--gold); border-radius:10px; padding:1px 7px; margin-inline-start:6px;}
  .gpanel{display:none; grid-template-columns:repeat(3,1fr); gap:22px;}
  .gpanel.active{display:grid;}
  .gcard{background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; transition:.25s;}
  .gcard:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(13,43,31,.12);}
  .gcard .thumb{height:200px; background:linear-gradient(150deg,var(--emerald),var(--emerald-2)); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;}
  .gcard .thumb .names{font-family:'Aref Ruqaa',serif; color:var(--ivory); font-size:19px;}
  .gcard .thumb .tag{font-family:'Poppins',sans-serif; color:var(--gold-light); font-size:8.5px; letter-spacing:2.5px;}
  .gcard .meta{padding:16px 18px; display:flex; align-items:center; justify-content:space-between;}
  .gcard .meta .name{font-size:13.5px; font-weight:600; color:var(--emerald);}
  .gcard .meta a{font-family:'Poppins',sans-serif; font-size:11px; color:var(--gold); border-bottom:1px solid var(--gold);}
  .placeholder-card{background:#fff; border:1px dashed var(--line); border-radius:6px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:10px; padding:60px 20px; text-align:center;}
  .placeholder-card .ic{width:46px; height:46px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:18px;}
  .placeholder-card p{font-family:'Poppins',sans-serif; font-size:11.5px; color:var(--ink-soft); letter-spacing:.5px;}

  /* STEPS */
  .steps{background:var(--emerald); color:var(--ivory);}
  .steps .eyebrow{color:var(--gold-light);}
  .steps .title{color:var(--ivory);}
  .stepsrow{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:50px; position:relative;}
  .stepsrow::before{content:""; position:absolute; top:22px; inset-inline:8%; height:1px; background:rgba(201,162,74,.3);}
  .step{position:relative;}
  .step .n{font-family:'Lora',serif; font-size:15px; color:var(--gold); width:44px; height:44px; border:1px solid var(--gold);
    border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--emerald); position:relative; margin-bottom:20px;}
  .step h4{font-family:'Cairo',sans-serif; font-weight:700; font-size:14.5px; margin-bottom:8px;}
  .step p{font-size:12.5px; color:rgba(242,237,224,.7);}

  /* CONTACT */
  .contact{background:var(--ivory);}
  .contact .wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
  .ccard{background:#fff; border:1px solid var(--line); border-radius:8px; padding:40px;}
  .ccard .row{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); font-size:14px;}
  .ccard .row:last-child{border:none;}
  .ccard .row span:first-child{color:var(--ink-soft); font-family:'Poppins',sans-serif; font-size:11.5px; letter-spacing:1px;}
  .ccard .row span:last-child{font-weight:600; color:var(--emerald);}
  .wa-cta{background:var(--emerald); border-radius:8px; padding:44px 36px; text-align:center; color:var(--ivory); height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;}
  .wa-cta .wa-ic{width:54px; height:54px; border-radius:50%; border:1px solid var(--gold); display:flex; align-items:center;
    justify-content:center; font-size:22px; color:var(--gold-light); margin-bottom:18px;}
  .wa-cta h3{font-family:'Cairo',sans-serif; font-weight:700; font-size:18px; margin-bottom:10px;}
  .wa-cta p{font-size:13.5px; color:rgba(242,237,224,.7); max-width:320px; margin-bottom:26px;}

  /* FOOTER */
  footer{background:var(--emerald); color:rgba(242,237,224,.6); padding:50px 0 90px; text-align:center;}
  footer .logo-word{margin-bottom:14px; justify-content:center; display:flex;}
  footer p{font-family:'Poppins',sans-serif; font-size:11px; letter-spacing:.5px;}
  footer .flinks{display:flex; gap:24px; justify-content:center; margin:18px 0; font-family:'Poppins',sans-serif; font-size:12px;}
  footer .flinks a:hover{color:var(--gold-light);}

  @media (max-width:860px){
    nav, .navcta .btn{display:none;}
    .burger{display:flex;}
    .hero .wrap, .about .wrap, .contact .wrap{grid-template-columns:1fr;}
    .fgrid{grid-template-columns:repeat(2,1fr);}
    .gpanel.active{grid-template-columns:1fr 1fr;}
    .stepsrow{grid-template-columns:1fr 1fr;}
    .stepsrow::before{display:none;}
  }

/* قائمة الجوال المنسدلة */
@media (max-width:860px){
  header nav.open{
    display:flex; flex-direction:column; gap:0; position:absolute; top:84px; inset-inline:0;
    background:var(--emerald); padding:10px 28px 20px; border-top:1px solid rgba(201,162,74,.2);
  }
  header nav.open a{padding:14px 0; border-bottom:1px solid rgba(242,237,224,.08); font-size:14px;}
}

/* رسالة تنبيه عامة (نجاح / خطأ) */
.gallery-empty{grid-column:1/-1; text-align:center; padding:40px; color:var(--ink-soft); font-family:'Poppins',sans-serif; font-size:13px;}