:root{
    --navy:#0a1628;
    --navy-deep:#060d18;
    --navy-soft:#101f38;
    --paper:#eef2f7;
    --gold:#e3ad4f;
    --teal:#2bc4b0;
    --line:rgba(238,242,247,0.12);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; overflow-x:hidden; overscroll-behavior-x:none; width:100%;}
  body{background:var(--navy); color:var(--paper); font-family:'Manrope', sans-serif; line-height:1.6; overflow-x:hidden; overscroll-behavior-x:none; width:100%; position:relative;}
  h1,h2,h3{font-family:'Fraunces', serif; letter-spacing:-0.01em;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1160px; margin:0 auto; padding:0 28px; position:relative; z-index:2;}

  .blob{position:fixed; border-radius:50%; filter:blur(100px); z-index:0; pointer-events:none;}
  .blob-1{width:520px; height:520px; background:rgba(227,173,79,0.14); top:-160px; right:-140px; animation:float1 18s ease-in-out infinite;}
  .blob-2{width:460px; height:460px; background:rgba(43,196,176,0.14); bottom:-160px; left:-140px; animation:float2 22s ease-in-out infinite;}
  @keyframes float1{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-50px,60px) scale(1.12);}}
  @keyframes float2{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(50px,-50px) scale(1.1);}}

  .reveal{opacity:0; transform:translateY(26px); transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* NAV */
  nav{position:sticky; top:0; z-index:50; background:rgba(6,13,24,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
  nav .wrap{display:flex; align-items:center; justify-content:space-between; height:76px;}
  .brand{font-family:'Fraunces', serif; font-weight:800; font-size:1.2rem; display:flex; align-items:center; gap:8px;}
  .brand .mark{color:var(--navy); background:linear-gradient(135deg, var(--gold), var(--teal)); width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem;}
  .navlinks{display:flex; gap:30px; font-size:0.9rem; font-weight:500;}
  .navlinks a{position:relative; padding-bottom:4px; opacity:0.85;}
  .navlinks a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--gold); transition:width 0.25s ease;}
  .navlinks a:hover{opacity:1;}
  .navlinks a:hover::after{width:100%;}
  .nav-cta{background:linear-gradient(135deg, var(--gold), #f0c674); color:var(--navy-deep); padding:10px 22px; border-radius:30px; font-size:0.86rem; font-weight:700; transition:transform 0.2s;}
  .nav-cta:hover{transform:translateY(-2px);}
  .menu-toggle{display:none; font-size:1.6rem; background:none; border:none; color:var(--paper); cursor:pointer;}
  .mobile-panel{display:none; flex-direction:column; background:var(--navy-soft); border-bottom:1px solid var(--line);}
  .mobile-panel.open{display:flex;}
  .mobile-panel a{padding:16px 28px; border-bottom:1px solid var(--line); font-weight:500;}

  /* HERO */
  header.hero{
    padding:150px 0 60px; position:relative;
    background:
      linear-gradient(180deg, rgba(6,13,24,0.55), rgba(6,13,24,0.92) 75%, var(--navy)),
      url('https://lh3.googleusercontent.com/grass-cs/ACvplmOqKl2OODZjk0g_f8HNbouG0YCbH8yy-1J0mCIbpbyotZ6fIRFDNfkJM672K9vQXNxlO_tnXExTHar8cMUr4NY5byxqdo5J7gP8LrBLp15sf1FgghLaJV1hn-8aW9MrG2d3nUAn=s4800-w720-h600') center/cover no-repeat;
  }
  .eyebrow{color:var(--gold); font-weight:600; font-size:0.85rem; margin-bottom:18px; letter-spacing:0.04em; text-transform:uppercase;}
  .hero h1{font-size:clamp(2.6rem,6vw,4.4rem); line-height:1.05; max-width:16ch; font-weight:600; text-shadow:0 4px 30px rgba(0,0,0,0.4);}
  .accent-text{background:linear-gradient(90deg, var(--gold), var(--teal), var(--gold)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 5s linear infinite;}
  @keyframes shimmer{0%{background-position:0% center;} 100%{background-position:200% center;}}
  .hero-sub{margin-top:20px; opacity:0.75; max-width:56ch; font-size:1.05rem;}

  /* SEARCH WIDGET */
  .search-widget{
    margin-top:44px; background:var(--navy-soft); border:1px solid var(--line); border-radius:16px;
    padding:8px; box-shadow:0 30px 60px rgba(0,0,0,0.35);
  }
  .tabs{display:flex; gap:4px; padding:6px;}
  .tab{
    padding:11px 20px; border-radius:10px; font-size:0.88rem; font-weight:600; cursor:pointer;
    opacity:0.6; transition:opacity 0.2s, background 0.2s;
  }
  .tab.active{opacity:1; background:rgba(227,173,79,0.14); color:var(--gold);}
  .search-panel{display:none; padding:20px; gap:14px; grid-template-columns:1fr 1fr 1fr auto;}
  .search-panel.active{display:grid;}
  .search-field label{display:block; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--gold); margin-bottom:7px; font-weight:600;}
  .search-field input, .search-field select{
    width:100%; background:var(--navy); border:1px solid var(--line); color:var(--paper);
    padding:12px 14px; border-radius:8px; font-family:'Manrope',sans-serif; font-size:0.92rem;
  }
  .search-btn{
    background:linear-gradient(135deg, var(--gold), #f0c674); color:var(--navy-deep); border:none;
    padding:0 28px; border-radius:8px; font-weight:700; font-size:0.92rem; cursor:pointer; align-self:end;
    min-height:46px; position:relative; overflow:hidden;
  }
  .search-btn::before{content:""; position:absolute; top:0; left:-75%; width:50%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent); transform:skewX(-20deg);}
  .search-btn:hover::before{animation:shine 0.8s ease;}
  @keyframes shine{from{left:-75%;} to{left:130%;}}

  /* STRIP */
  .strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; font-size:0.82rem; color:var(--gold); letter-spacing:0.03em; overflow:hidden; white-space:nowrap; margin-top:60px;}
  .marquee-track{display:inline-flex; gap:60px; animation:marquee 24s linear infinite;}
  .marquee-track span{flex:none;}
  @keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

  /* STATS */
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
  .stat-card{background:var(--navy-soft); padding:36px 24px; text-align:center;}
  .stat-icon{font-size:1.6rem; margin-bottom:10px;}
  .stat-num{font-family:'Fraunces', serif; font-size:2.4rem; font-weight:600; color:var(--gold);}
  .stat-label{font-size:0.82rem; opacity:0.65; margin-top:6px;}

  /* ABOUT */
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .about-photo{border-radius:16px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 60px rgba(0,0,0,0.35);}
  .about-photo img{width:100%; height:100%; object-fit:cover;}
  .about-text p{opacity:0.75; margin-top:16px; font-size:0.98rem;}
  .about-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px;}
  .about-list div{font-size:0.88rem; opacity:0.85; padding:10px 0; border-bottom:1px solid var(--line);}
  .about-list div::before{content:"✓ "; color:var(--teal);}

  /* PHOTO BANNER */
  .photo-banner{
    position:relative; height:380px; margin:0 auto; max-width:1160px; border-radius:20px; overflow:hidden;
  }
  .photo-banner img{width:100%; height:100%; object-fit:cover;}
  .photo-banner-overlay{
    position:absolute; inset:0; background:linear-gradient(90deg, rgba(6,13,24,0.88), rgba(6,13,24,0.3));
    display:flex; flex-direction:column; justify-content:center; padding:0 60px;
  }
  .photo-banner-overlay .eyebrow{margin-bottom:12px;}
  .photo-banner-overlay h2{font-size:clamp(1.7rem,3.5vw,2.4rem); max-width:16ch;}
  .photo-banner-overlay p{opacity:0.8; max-width:38ch; margin-top:14px;}

  /* SECTIONS */
  .section{padding:100px 0;}
  .section-head{max-width:56ch; margin-bottom:54px;}
  .section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
  .section-head h2{font-size:clamp(2rem,4vw,2.7rem);}
  .section-head p{opacity:0.72; margin-top:14px;}

  /* DESTINATIONS */
  .dest-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .dest-card{
    border-radius:14px; overflow:hidden; position:relative; aspect-ratio:3/4; border:1px solid var(--line);
    transition:transform 0.3s ease;
  }
  .dest-card:hover{transform:translateY(-8px);}
  .dest-bg{position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 0.4s ease;}
  .dest-card:hover .dest-bg{transform:scale(1.08);}
  .dest-overlay{position:absolute; inset:0; background:linear-gradient(to top, rgba(6,13,24,0.9), transparent 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:22px;}
  .dest-overlay .from{font-size:0.72rem; opacity:0.7; text-transform:uppercase; letter-spacing:0.04em;}
  .dest-overlay h3{font-size:1.3rem; margin:4px 0 6px;}
  .dest-overlay .price{color:var(--gold); font-weight:600; font-size:0.9rem;}

  /* WHY US */
  .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
  .why-card{background:var(--navy); padding:34px 26px; transition:background 0.25s ease, transform 0.25s ease;}
  .why-card:hover{background:var(--navy-soft); transform:translateY(-4px);}
  .why-icon{width:44px; height:44px; border-radius:10px; background:rgba(227,173,79,0.14); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:1.2rem;}
  .why-card h3{font-size:1.05rem; margin-bottom:8px;}
  .why-card p{font-size:0.88rem; opacity:0.7;}

  /* PACKAGES */
  .pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .pkg-card{background:var(--navy-soft); border:1px solid var(--line); border-radius:14px; padding:28px; transition:transform 0.25s ease, border-color 0.25s ease;}
  .pkg-card:hover{transform:translateY(-6px); border-color:var(--teal);}
  .pkg-tag{font-size:0.74rem; color:var(--teal); text-transform:uppercase; letter-spacing:0.04em; font-weight:700; margin-bottom:12px;}
  .pkg-card h3{font-size:1.25rem; margin-bottom:10px;}
  .pkg-card p{opacity:0.72; font-size:0.9rem; margin-bottom:18px;}
  .pkg-price{font-size:1.5rem; font-weight:700; color:var(--gold); font-family:'Fraunces',serif;}
  .pkg-price span{font-size:0.8rem; opacity:0.6; font-weight:400; color:var(--paper);}
  .pkg-list{list-style:none; margin:16px 0; padding:0;}
  .pkg-list li{font-size:0.85rem; opacity:0.75; padding:6px 0; border-bottom:1px dotted var(--line);}
  .pkg-list li::before{content:"✓ "; color:var(--teal);}

  /* TESTIMONIALS */
  .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .testi-card{background:var(--navy-soft); border-radius:14px; padding:28px; border:1px solid var(--line);}
  .testi-stars{color:var(--gold); margin-bottom:14px; font-size:0.95rem;}
  .testi-card p{font-style:italic; opacity:0.85; font-size:0.92rem;}
  .testi-who{margin-top:16px; font-weight:600; font-size:0.88rem; color:var(--teal); display:flex; align-items:center; gap:10px;}
  .testi-avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--gold), var(--teal)); color:var(--navy-deep); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.78rem; font-family:'Fraunces',serif;}

  /* BOOKING FORM */
  .book-section{background:var(--navy-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .book-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px;}
  .book-text p{opacity:0.72; margin-top:18px; max-width:36ch;}
  .book-text ul{margin-top:24px; list-style:none;}
  .book-text li{padding:10px 0; border-bottom:1px solid var(--line); font-size:0.9rem; opacity:0.85;}
  .book-text li::before{content:"— "; color:var(--gold);}
  form.book-form{display:grid; gap:16px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  label{display:block; font-size:0.78rem; margin-bottom:7px; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:0.03em;}
  input, textarea, select{
    width:100%; background:var(--navy); border:1px solid var(--line); color:var(--paper);
    padding:13px 14px; font-family:'Manrope', sans-serif; font-size:0.94rem; border-radius:8px;
  }
  input:focus, textarea:focus, select:focus{outline:1px solid var(--gold); outline-offset:1px;}
  textarea{resize:vertical; min-height:90px;}
  .submit-btn{background:linear-gradient(135deg, var(--gold), #f0c674); color:var(--navy-deep); border:none; padding:16px; border-radius:8px; font-weight:700; font-size:0.98rem; cursor:pointer; font-family:'Fraunces',serif;}
  .form-note{font-size:0.8rem; opacity:0.55;}

  /* FOOTER */
  footer{padding:70px 0 36px;}
  .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--line);}
  .footer-brand{font-family:'Fraunces', serif; font-weight:800; font-size:1.25rem; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
  .footer-col h4{font-size:0.78rem; letter-spacing:0.05em; color:var(--gold); margin-bottom:14px; font-weight:700; text-transform:uppercase;}
  .footer-col div{opacity:0.72; font-size:0.9rem; margin-bottom:9px;}
  .footer-col div a{transition:opacity 0.2s, color 0.2s;}
  .footer-col div a:hover{opacity:1; color:var(--gold);}
  .footer-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:0.78rem; opacity:0.5; flex-wrap:wrap; gap:10px;}

  .whatsapp-float{
    position:fixed; bottom:24px; right:24px; z-index:60; background:var(--teal); color:var(--navy-deep);
    padding:14px 22px; border-radius:30px; font-size:0.9rem; font-weight:700;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
  }

  @media (max-width:980px){
    .dest-grid{grid-template-columns:repeat(2,1fr);}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .pkg-grid, .testi-grid{grid-template-columns:1fr;}
    .about-grid{grid-template-columns:1fr;}
    .about-photo{aspect-ratio:16/9;}
    .photo-banner{height:300px;}
    .photo-banner-overlay{padding:0 30px;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}

    /* PERFORMANCE MODE: swap expensive glass distortion for lightweight blur-only glass */
    .glass, nav, .why-card, .work-card, .pkg-card, .testi-card, .hajj-pkg-card,
    .step-card, .exp-card, .practical-card, .quick-info-item,
    .stat-card, .admin-stat, .ref-reward, .ref-generator, .deposit-box, .hajj-modal {
      backdrop-filter: blur(10px) saturate(130%) !important;
      -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
    }
    .glass::before{ animation: none !important; display:none; }
    .glass::after{ display:none; }
    .hajj-pkg-card, .pkg-card{ animation:none !important; }

    .blob{ filter: blur(50px) !important; }
    .blob-3{ display:none; }

    .plane-path{ display:none; }

    .whatsapp-float, .hajj-trigger, .ref-trigger{
      padding:10px 14px; font-size:0.76rem; bottom:16px; right:14px;
      max-width:calc(100vw - 28px); white-space:nowrap;
    }
    .hajj-trigger{ bottom:66px; }
    .ref-trigger{ bottom:116px; }
    .back-to-top{ width:38px; height:38px; bottom:16px; left:14px; }

    header.hero{ padding:100px 0 40px; }
    .nav-logo{ height:32px; }
    .search-widget{ margin-top:30px; }
  }
  @media (max-width:860px){
    .navlinks, .nav-cta{display:none;}
    .menu-toggle{display:block;}
    .search-panel{grid-template-columns:1fr;}
    .book-grid{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr; gap:30px;}
  }

/* SERVICE DETAIL PAGES */
.svc-hero{
  position:relative; height:420px; display:flex; align-items:flex-end; margin-top:0;
}
.svc-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.svc-hero-overlay{
  position:relative; z-index:1; width:100%;
  background:linear-gradient(0deg, rgba(6,13,24,0.96), rgba(6,13,24,0.4) 70%, rgba(6,13,24,0.15));
  padding:70px 0 40px;
}
.svc-hero-overlay .wrap{position:relative; z-index:2;}
.breadcrumb{font-size:0.82rem; opacity:0.7; margin-bottom:16px;}
.breadcrumb a{color:var(--gold);}
.svc-hero h1{font-size:clamp(2rem,4.5vw,3.2rem);}
.svc-hero p{opacity:0.82; max-width:52ch; margin-top:14px; font-size:1.02rem;}

.svc-body{display:grid; grid-template-columns:1.3fr 0.9fr; gap:60px; padding:90px 0;}
.svc-body h2{font-size:1.7rem; margin-bottom:16px;}
.svc-body p{opacity:0.78; margin-bottom:18px; font-size:0.98rem;}
.svc-included{list-style:none; margin:20px 0;}
.svc-included li{padding:10px 0; border-bottom:1px dotted var(--line); font-size:0.92rem; opacity:0.85;}
.svc-included li::before{content:"✓ "; color:var(--teal); font-weight:700;}

.svc-side{background:var(--navy-soft); border:1px solid var(--line); border-radius:14px; padding:30px; align-self:start;}
.svc-side h3{font-size:1.1rem; margin-bottom:14px;}
.svc-side p{opacity:0.75; font-size:0.9rem; margin-bottom:20px;}
.svc-side img{border-radius:10px; margin-bottom:20px; width:100%; aspect-ratio:4/3; object-fit:cover;}

.svc-related{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:20px;}
.svc-related a{
  display:block; padding:16px 18px; border:1px solid var(--line); border-radius:10px; font-size:0.88rem; font-weight:600;
  transition:border-color 0.2s, color 0.2s;
}
.svc-related a:hover{border-color:var(--gold); color:var(--gold);}

@media (max-width:860px){
  .svc-body{grid-template-columns:1fr;}
  .svc-related{grid-template-columns:1fr;}
}

/* HAJJ POPUP */
.hajj-popup{
  position:fixed; bottom:24px; left:24px; z-index:70; max-width:340px;
  background:var(--navy-soft); border:1px solid var(--gold); border-radius:16px;
  padding:22px; box-shadow:0 20px 50px rgba(0,0,0,0.5);
  transform:translateY(140%); opacity:0; transition:transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
}
.hajj-popup.show{transform:translateY(0); opacity:1;}
.hajj-popup-close{
  position:absolute; top:10px; right:12px; background:none; border:none; color:var(--paper);
  opacity:0.5; font-size:1.1rem; cursor:pointer; line-height:1;
}
.hajj-popup-close:hover{opacity:1;}
.hajj-popup .tag{font-size:0.72rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.04em; font-weight:700; margin-bottom:8px;}
.hajj-popup h4{font-family:'Fraunces',serif; font-size:1.15rem; margin-bottom:8px; padding-right:16px;}
.hajj-popup p{font-size:0.86rem; opacity:0.78; margin-bottom:16px;}
.hajj-popup a.btn{padding:11px 18px; font-size:0.85rem; display:inline-block;}
@media (max-width:600px){
  .hajj-popup{left:16px; right:16px; max-width:none; bottom:16px;}
}

/* HAJJ & UMRAH PROMO */
:root{
  --hajj-green:#0d5c3f;
  --hajj-gold:#d4af37;
}
.hajj-trigger{
  position:fixed; bottom:90px; right:24px; z-index:59;
  background:linear-gradient(135deg, var(--hajj-green), #0a4530); color:#f4f2ea;
  padding:13px 20px; border-radius:30px; font-size:0.85rem; font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,0.4); border:1px solid rgba(212,175,55,0.5);
  display:flex; align-items:center; gap:8px; cursor:pointer;
  animation:hajjPulse 2.6s ease-in-out infinite;
}
@keyframes hajjPulse{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 0 rgba(212,175,55,0.4);} 50%{box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 8px rgba(212,175,55,0);}}

.hajj-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:100; display:none;
  align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px);
}
.hajj-modal-overlay.open{display:flex;}
.hajj-modal{
  background:var(--navy-soft); border:1px solid rgba(212,175,55,0.3); border-radius:18px;
  max-width:480px; width:100%; overflow:hidden; position:relative;
  animation:hajjPopIn 0.35s ease;
}
@keyframes hajjPopIn{from{opacity:0; transform:scale(0.94) translateY(10px);} to{opacity:1; transform:scale(1) translateY(0);}}
.hajj-modal-photo{height:170px; position:relative;}
.hajj-modal-photo img{width:100%; height:100%; object-fit:cover;}
.hajj-modal-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, var(--navy-soft), transparent 60%);}
.hajj-modal-close{
  position:absolute; top:14px; right:14px; background:rgba(0,0,0,0.5); color:#fff; border:none;
  width:32px; height:32px; border-radius:50%; font-size:1.1rem; cursor:pointer; z-index:2;
}
.hajj-modal-body{padding:26px 28px 30px;}
.hajj-modal-body .eyebrow{color:var(--hajj-gold);}
.hajj-modal-body h2{font-size:1.5rem; margin:10px 0 12px;}
.hajj-modal-body p{opacity:0.8; font-size:0.92rem; margin-bottom:20px;}
.hajj-modal-actions{display:flex; gap:12px; flex-wrap:wrap;}
.btn-hajj{
  background:linear-gradient(135deg, var(--hajj-gold), #e8c86a); color:var(--navy-deep);
  padding:13px 24px; border-radius:8px; font-weight:700; font-size:0.9rem; flex:1; text-align:center;
}
.btn-hajj-ghost{border:1px solid var(--line); color:var(--paper); padding:13px 20px; border-radius:8px; font-size:0.88rem;}

/* HAJJ PAGE SPECIFIC */
.hajj-hero{background:linear-gradient(180deg, rgba(6,13,24,0.5), rgba(6,13,24,0.94) 80%, var(--navy)), var(--hajj-green);}
.countdown-strip{
  background:var(--hajj-green); border-top:1px solid rgba(212,175,55,0.3); border-bottom:1px solid rgba(212,175,55,0.3);
  padding:26px 0;
}
.countdown-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center;}
.countdown-num{font-family:'Fraunces',serif; font-size:2rem; font-weight:600; color:var(--hajj-gold);}
.countdown-label{font-size:0.8rem; opacity:0.85; margin-top:4px;}
.hajj-note{font-size:0.82rem; opacity:0.65; text-align:center; margin-top:16px;}

.hajj-pkg-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.hajj-pkg-card{background:var(--navy-soft); border:1px solid var(--line); border-radius:14px; padding:30px; transition:border-color 0.25s, transform 0.25s;}
.hajj-pkg-card:hover{border-color:var(--hajj-gold); transform:translateY(-6px);}
.hajj-pkg-tag{font-size:0.75rem; color:var(--hajj-gold); text-transform:uppercase; letter-spacing:0.04em; font-weight:700; margin-bottom:10px;}
.hajj-pkg-card h3{font-size:1.3rem; margin-bottom:10px;}
.hajj-pkg-card p{opacity:0.75; font-size:0.9rem; margin-bottom:16px;}

.faq-item{border-bottom:1px solid var(--line); padding:20px 0;}
.faq-q{font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:0.98rem;}
.faq-a{max-height:0; overflow:hidden; transition:max-height 0.3s ease; opacity:0.78; font-size:0.9rem;}
.faq-item.open .faq-a{max-height:200px; margin-top:12px;}
.faq-toggle{color:var(--hajj-gold); font-size:1.2rem; transition:transform 0.25s;}
.faq-item.open .faq-toggle{transform:rotate(45deg);}

@media (max-width:860px){
  .countdown-grid{grid-template-columns:repeat(2,1fr);}
  .hajj-pkg-grid{grid-template-columns:1fr;}
}

/* LOGO */
.brand{display:flex; align-items:center;}
.nav-logo{height:42px; width:auto; display:block;}
.footer-brand{display:flex; align-items:center; margin-bottom:12px;}
.footer-logo{height:38px; width:auto; display:block;}
@media (max-width:860px){
  .nav-logo{height:36px;}
}

/* HAJJ ITINERARY & QUICK INFO */
.quick-info-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:30px 0 10px;}
.quick-info-item{background:var(--navy-soft); padding:20px; text-align:center;}
.quick-info-label{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--gold); margin-bottom:6px;}
.quick-info-value{font-size:0.95rem; font-weight:600;}

.itin-day{display:grid; grid-template-columns:100px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--line);}
.itin-day:last-child{border-bottom:none;}
.itin-date{font-family:'Fraunces',serif; color:var(--gold); font-weight:600; font-size:0.95rem;}
.itin-date span{display:block; font-size:0.72rem; opacity:0.6; font-weight:400; margin-top:2px;}
.itin-body h4{font-size:1.05rem; margin-bottom:8px;}
.itin-body p{opacity:0.78; font-size:0.9rem; margin-bottom:0;}

.inc-exc-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px;}
.inc-exc-col h4{font-size:0.95rem; margin-bottom:12px;}
.inc-list{list-style:none;}
.inc-list li{padding:8px 0; font-size:0.88rem; opacity:0.82;}
.inc-list.yes li::before{content:"✓ "; color:var(--teal); font-weight:700;}
.inc-list.no li::before{content:"✕ "; color:#e07a5f; font-weight:700;}

.practical-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:10px;}
.practical-card{background:var(--navy-soft); border:1px solid var(--line); border-radius:12px; padding:22px;}
.practical-card h4{font-size:0.95rem; color:var(--gold); margin-bottom:10px;}
.practical-card p{font-size:0.87rem; opacity:0.78;}

@media (max-width:860px){
  .quick-info-grid{grid-template-columns:repeat(2,1fr);}
  .inc-exc-grid{grid-template-columns:1fr;}
  .practical-grid{grid-template-columns:1fr;}
  .itin-day{grid-template-columns:1fr;}
}

/* ADMIN */
.admin-gate{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.admin-gate-box{background:var(--navy-soft); border:1px solid var(--line); border-radius:16px; padding:40px; max-width:380px; width:100%; text-align:center;}
.admin-gate-box h1{font-size:1.4rem; margin-bottom:8px;}
.admin-gate-box p{opacity:0.7; font-size:0.88rem; margin-bottom:24px;}
.admin-gate-box input{margin-bottom:14px;}
.admin-gate-error{color:#e07a5f; font-size:0.82rem; margin-top:10px; display:none;}

.admin-wrap{display:none; padding:40px 28px; max-width:1200px; margin:0 auto;}
.admin-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; flex-wrap:wrap; gap:14px;}
.admin-header h1{font-size:1.6rem;}
.admin-logout{border:1px solid var(--line); padding:9px 18px; border-radius:8px; font-size:0.85rem; cursor:pointer; background:none; color:var(--paper);}

.admin-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px;}
.admin-stat{background:var(--navy-soft); border:1px solid var(--line); border-radius:12px; padding:20px;}
.admin-stat-num{font-family:'Fraunces',serif; font-size:1.8rem; color:var(--gold); font-weight:600;}
.admin-stat-label{font-size:0.8rem; opacity:0.65; margin-top:4px;}

.admin-toolbar{display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.admin-toolbar input, .admin-toolbar select{max-width:220px;}
.admin-refresh{background:var(--gold); color:var(--navy-deep); border:none; padding:11px 20px; border-radius:8px; font-weight:700; font-size:0.85rem; cursor:pointer;}

.admin-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px;}
table.admin-table{width:100%; border-collapse:collapse; font-size:0.86rem; min-width:800px;}
table.admin-table th{text-align:left; padding:14px 16px; background:var(--navy-soft); color:var(--gold); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.03em; border-bottom:1px solid var(--line);}
table.admin-table td{padding:14px 16px; border-bottom:1px solid var(--line); opacity:0.9;}
table.admin-table tr:last-child td{border-bottom:none;}
table.admin-table tr:hover td{background:rgba(255,255,255,0.02);}
.admin-empty{padding:40px; text-align:center; opacity:0.6;}
.admin-badge{padding:4px 10px; border-radius:20px; font-size:0.72rem; font-weight:600;}
.admin-badge.hajj{background:rgba(212,175,55,0.15); color:#d4af37;}
.admin-badge.web{background:rgba(43,196,176,0.15); color:var(--teal);}

/* FLATPICKR THEME OVERRIDE */
.flatpickr-calendar{
  background:var(--navy-soft); border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,0.4);
  font-family:'Manrope', sans-serif;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after{border-bottom-color:var(--navy-soft);}
.flatpickr-months .flatpickr-month{color:var(--gold); fill:var(--gold);}
.flatpickr-current-month .flatpickr-monthDropdown-months{background:var(--navy-soft); color:var(--gold);}
.flatpickr-weekdays{background:var(--navy-soft);}
span.flatpickr-weekday{color:var(--gold); background:var(--navy-soft);}
.flatpickr-day{color:var(--paper);}
.flatpickr-day.today{border-color:var(--gold);}
.flatpickr-day:hover{background:rgba(227,173,79,0.15); border-color:transparent;}
.flatpickr-day.selected, .flatpickr-day.selected:hover{background:var(--gold); border-color:var(--gold); color:var(--navy-deep);}
.flatpickr-day.flatpickr-disabled{color:rgba(244,242,234,0.25);}
.flatpickr-prev-month svg, .flatpickr-next-month svg{fill:var(--gold);}

/* PRELOADER */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--navy);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  transition:opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.hide{opacity:0; visibility:hidden;}
.preloader-logo{width:120px; height:auto; animation:preloaderPulse 1.6s ease-in-out infinite;}
@keyframes preloaderPulse{0%,100%{opacity:0.6; transform:scale(0.96);} 50%{opacity:1; transform:scale(1.02);}}
.preloader-bar{width:160px; height:3px; background:var(--line); border-radius:4px; overflow:hidden; position:relative;}
.preloader-bar::after{
  content:""; position:absolute; top:0; left:0; height:100%; width:40%; border-radius:4px;
  background:linear-gradient(90deg, var(--gold), var(--teal));
  animation:preloaderSlide 1.1s ease-in-out infinite;
}
@keyframes preloaderSlide{0%{left:-40%;} 100%{left:100%;}}
.preloader-text{font-family:'Fraunces', serif; font-size:0.85rem; color:var(--gold); letter-spacing:0.08em; text-transform:uppercase;}

/* REFERRAL PROGRAM */
.ref-hero{text-align:center; max-width:640px; margin:0 auto;}
.ref-badge-big{
  width:70px; height:70px; border-radius:50%; background:linear-gradient(135deg, var(--gold), var(--teal));
  display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 20px;
}
.ref-reward{
  background:var(--navy-soft); border:1px solid rgba(212,175,55,0.3); border-radius:16px; padding:30px;
  margin:30px 0; text-align:center;
}
.ref-reward .amount{font-family:'Fraunces',serif; font-size:2.6rem; color:var(--gold); font-weight:700;}
.ref-reward .caption{opacity:0.75; font-size:0.95rem; margin-top:8px;}

.ref-generator{background:var(--navy-soft); border:1px solid var(--line); border-radius:16px; padding:32px; max-width:520px; margin:40px auto;}
.ref-link-box{display:none; margin-top:20px;}
.ref-link-row{display:flex; gap:10px; margin-top:10px;}
.ref-link-row input{flex:1; background:var(--navy); border:1px solid var(--line); color:var(--gold); padding:12px 14px; border-radius:8px; font-size:0.88rem;}
.ref-copy-btn{background:var(--gold); color:var(--navy-deep); border:none; padding:0 20px; border-radius:8px; font-weight:700; font-size:0.85rem; cursor:pointer; white-space:nowrap;}
.ref-share-row{display:flex; gap:10px; margin-top:14px;}
.ref-share-row a{flex:1; text-align:center; padding:11px; border-radius:8px; font-size:0.85rem; font-weight:600;}

.ref-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:20px;}
.ref-step{background:var(--navy); padding:28px 22px; text-align:center;}
.ref-step-num{width:36px; height:36px; border-radius:50%; background:rgba(227,173,79,0.15); color:var(--gold); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-weight:700; font-family:'Fraunces',serif;}
.ref-step h4{font-size:0.98rem; margin-bottom:6px;}
.ref-step p{font-size:0.85rem; opacity:0.7;}

/* REFERRAL PROMO POPUP (reuses hajj-modal-overlay structure) */
.ref-trigger{
  position:fixed; bottom:156px; right:24px; z-index:58;
  background:linear-gradient(135deg, var(--gold), #f0c674); color:var(--navy-deep);
  padding:13px 20px; border-radius:30px; font-size:0.85rem; font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  display:flex; align-items:center; gap:8px; cursor:pointer;
}

@media (max-width:860px){
  .ref-steps{grid-template-columns:1fr;}
  .ref-share-row{flex-direction:column;}
}

/* ============ LIQUID GLASS DESIGN SYSTEM (true refraction) ============ */
.glass{
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(4px) url(#liquid-glass-distortion) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 28px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 1.5px 0 rgba(255,255,255,0.25),
    inset 0 -1px 8px rgba(0,0,0,0.15),
    inset 2px 0 6px rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.glass::before{
  /* animated specular highlight sweep, like light catching curved glass */
  content:"";
  position:absolute; top:-50%; left:-20%; width:60%; height:200%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 45%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.16) 55%, transparent 70%);
  transform: rotate(8deg);
  animation: glassSheen 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glassSheen{
  0%, 100%{ left:-40%; }
  50%{ left:110%; }
}
.glass::after{
  /* edge glow that simulates light bending at the glass boundary */
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 24px rgba(255,255,255,0.03);
}

/* Apply glass to nav for a frosted floating feel */
nav{
  background: rgba(10,22,40,0.5) !important;
  backdrop-filter: blur(6px) url(#liquid-glass-distortion) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* Glassy cards site-wide */
.why-card, .work-card, .pkg-card, .testi-card, .hajj-pkg-card,
.step-card, .exp-card, .practical-card, .quick-info-item,
.stat-card, .admin-stat, .ref-reward, .ref-generator, .deposit-box {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(5px) url(#liquid-glass-distortion) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 22px;
  transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.why-card:hover, .work-card:hover, .pkg-card:hover, .hajj-pkg-card:hover, .step-card:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  border-color: rgba(227,173,79,0.35) !important;
}

/* Modals get real glass */
.hajj-modal{
  background: rgba(16,31,56,0.6) !important;
  backdrop-filter: blur(8px) url(#liquid-glass-distortion) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.16) !important;
}

/* Forms embedded in glass panels */
.book-form, .order-form, .reserve-form, form.intake, .admin-gate-box {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 28px;
}

/* Buttons: subtle glass shine sweep on ALL primary buttons */
.btn-primary, .submit-btn, .nav-cta, .search-btn, .order-submit {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.2,0.9,0.3,1.3), box-shadow 0.25s ease;
}
.btn-primary::after, .submit-btn::after, .nav-cta::after {
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn-primary:hover::after, .submit-btn:hover::after, .nav-cta:hover::after { left: 130%; }
.btn-primary:hover, .submit-btn:hover, .nav-cta:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 12px 28px rgba(227,173,79,0.25);
}

/* Smoother, springier reveal animation */
.reveal{
  opacity:0;
  transform: translateY(34px) scale(0.98);
  filter: blur(4px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1), filter 0.8s ease;
}
.reveal.in{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }

/* Floating ambient glass orbs behind content (adds depth on scroll) */
.glass-orb{
  position:fixed; border-radius:50%; filter:blur(80px); z-index:0; pointer-events:none; opacity:0.5;
}

/* Card icons get a soft glass glow */
.why-icon, .ref-step-num, .stat-icon {
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 14px rgba(0,0,0,0.2);
}

/* Table rows: subtle glass hover on admin tables */
table.admin-table tr:hover td{
  background: rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(4px);
}

/* Gradient-animated border on the destination/pkg cards for extra polish */
@keyframes borderGlow{
  0%,100%{ box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(227,173,79,0.08); }
  50%{ box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(227,173,79,0.22); }
}
.hajj-pkg-card, .pkg-card{ animation: borderGlow 4s ease-in-out infinite; }

/* PLANE FLIGHT ANIMATION */
.plane-path{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.plane-svg{ position:absolute; width:100%; height:100%; top:0; left:0; }
.plane-dash{
  fill:none; stroke:rgba(227,173,79,0.35); stroke-width:1.5; stroke-dasharray:6 8;
  stroke-linecap:round; animation:dashMove 3s linear infinite;
}
@keyframes dashMove{ to{ stroke-dashoffset:-140; } }
.plane-icon{
  animation: flyPath 14s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
  transform-origin:center;
}
@keyframes flyPath{
  0%{ offset-distance:0%; opacity:0; }
  4%{ opacity:1; }
  92%{ opacity:1; }
  100%{ offset-distance:100%; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .plane-icon{ animation:none; opacity:0; }
  .plane-dash{ animation:none; }
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
  .glass::before, .btn-primary::after, .submit-btn::after { display:none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* BACK TO TOP */
.back-to-top{
  position:fixed; bottom:24px; left:24px; z-index:58;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,0.06); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--gold); display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; cursor:pointer; opacity:0; visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
}
.back-to-top.show{ opacity:1; visibility:visible; }
.back-to-top:hover{ transform:translateY(-4px); }