:root{
  --bg: #F7F4EE;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --glass: rgba(255,255,255,0.62);
  --glass-strong: rgba(255,255,255,0.84);
  --border: rgba(26,22,14,0.11);
  --border-strong: rgba(26,22,14,0.19);
  --text: #1A1712;
  --text-dim: #5B5748;
  --text-faint: #8A8678;
  --accent: #B8860B;
  --accent-bright: #96700A;
  --accent-2: #A0522D;
  --accent-2-bright: #7D3F21;
  --danger: #C0392B;
  --success: #2F7A4F;
  --radius-pill: 999px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 20px 50px -22px rgba(40,35,20,0.18);
  --glow-accent: 0 0 0 1px rgba(184,134,11,0.22), 0 8px 26px -8px rgba(184,134,11,0.3);
  --glow-gold: 0 0 22px -6px rgba(160,82,45,0.35);
  --sheen: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 48%, transparent 66%);
}
[data-theme="dark"]{
  --bg: #060a12;
  --bg-2: #0c1220;
  --surface: #10192b;
  --surface-2: #152036;
  --glass: rgba(14,20,36,0.42);
  --glass-strong: rgba(14,20,36,0.68);
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.18);
  --text: #eef2f7;
  --text-dim: #8b96ab;
  --text-faint: #5c6478;
  --accent: #D4AF37;
  --accent-bright: #F0C864;
  --accent-2: #C17F45;
  --accent-2-bright: #D99860;
  --danger: #e0685a;
  --success: #4fbf8b;
  --glow-accent: 0 0 0 1px rgba(212,175,55,0.25), 0 8px 30px -6px rgba(212,175,55,0.35);
  --glow-gold: 0 0 24px -4px rgba(193,127,69,0.5);
  --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--bg);
  color: var(--text);
  font-family:'Tajawal','Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  transition: background .3s ease, color .3s ease;
  min-height:100vh;
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:#04151a;}

.eyebrow{
  font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-bright); margin-bottom:10px; display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--accent); display:inline-block;}

h1,h2,h3{font-family:'Cairo',sans-serif; margin:0;}

.site-nav{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:9999;
  display:flex; align-items:center; gap:18px;
  padding:12px 18px 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  backdrop-filter: blur(34px) saturate(200%);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  border:1px solid var(--border-strong);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.04);
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease, border-radius .35s ease;
  width:fit-content; max-width:calc(100% - 28px);
  overflow:visible;
}
.site-nav::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6; border-radius:inherit; overflow:hidden;
  background: radial-gradient(120% 200% at 15% -60%, rgba(255,255,255,0.22), transparent 55%);
}
.site-nav.scrolled{
  background: var(--glass-strong);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.24);
}
.nav-brand{
  display:flex; align-items:center; flex-shrink:0; position:relative;
  font-family:'Playfair Display', serif; font-weight:600; font-size:15px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text); background:var(--glass-strong); border:1px solid var(--border);
  padding:9px 20px; border-radius:var(--radius-pill); box-shadow:var(--shadow);
}
.nav-links{display:flex; align-items:center; gap:2px; font-size:14.5px; position:relative;}
.nav-links a{
  padding:10px 17px; border-radius:var(--radius-pill); color:var(--text-dim);
  transition: all .18s ease; font-weight:500; white-space:nowrap; position:relative;
}
.nav-links a:hover{color:var(--text); background:rgba(255,255,255,0.06);}
.nav-links a.active{color: #fff; background:linear-gradient(135deg, var(--accent-bright), var(--accent)); box-shadow: var(--glow-accent); font-weight:700;}
[data-theme="dark"] .nav-links a.active{color:var(--bg);}

.account-island{
  position:fixed; top:14px; inset-inline-start:14px; z-index:9999;
  display:flex; align-items:center; gap:9px;
  padding:9px 14px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  backdrop-filter: blur(34px) saturate(200%);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  border:1px solid var(--border-strong);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.22);
}
.tier-badge-float{
  position:fixed; top:14px; inset-inline-end:14px; z-index:9999;
  display:none; align-items:center;
  padding:9px 16px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  backdrop-filter: blur(34px) saturate(200%);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  border:1px solid var(--border-strong);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.22);
}
.tier-badge-float.visible{display:flex;}
.nav-user{position:relative; flex-shrink:0; display:flex; align-items:center; gap:9px;}
.theme-btn, .lang-btn{
  height:36px; border-radius:999px; cursor:pointer; border:1px solid var(--border-strong);
  background:rgba(255,255,255,0.04); color:var(--text-dim); font-size:14px;
  display:flex; align-items:center; justify-content:center; transition:all .18s ease; flex-shrink:0;
}
.theme-btn{width:36px;}
.lang-btn{padding:0 14px; font-family:'Tajawal',sans-serif; font-weight:700; font-size:12.5px; gap:6px;}
.theme-btn:hover, .lang-btn:hover{border-color:var(--accent); color:var(--text);}

.nav-burger{
  display:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--border-strong);
  background:rgba(255,255,255,0.04); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  flex-shrink:0;
}
.nav-burger span{width:15px; height:2px; background:var(--text); border-radius:2px; transition:all .25s ease;}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width:900px){
  .site-nav{
    right:auto; left:14px; transform:none; top:14px; width:auto; max-width:calc(100% - 28px);
    padding:9px 12px;
  }
  .nav-brand{font-size:15px; gap:7px;}
  .nav-burger{display:flex;}

  .nav-links{
    display:none;
    position:fixed; top:66px; left:14px; right:14px; z-index:9998;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--glass-strong); backdrop-filter:blur(34px) saturate(200%);
    border:1px solid var(--border-strong); border-radius:20px; padding:8px;
    max-height:70vh; overflow-y:auto;
  }
  .nav-links.open{display:flex;}
  .nav-links a{text-align:center; padding:13px 20px;}

  .account-island{
    inset-inline-start:auto; right:14px; left:auto; top:14px;
    padding:7px 10px; gap:6px;
  }
  .tier-badge-float{
    inset-inline-end:auto; right:14px; left:auto; top:60px;
    padding:7px 12px;
  }
  .lang-btn{padding:0 10px; font-size:11px;}
  .theme-btn{width:32px; height:32px;}
  .tier-badge-nav{font-size:10px; padding:4px 10px;}
}
@media (max-width:380px){
}
.avatar-btn{
  width:38px; height:38px; border-radius:50%; cursor:pointer; border:1.5px solid var(--border-strong);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center; color:#04151a; font-family:'Cairo',sans-serif; font-weight:700; font-size:14px;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: var(--glow-gold);
}
.avatar-btn:hover{transform:scale(1.07); box-shadow: var(--glow-accent), var(--glow-gold);}
.user-menu{
  position:absolute; top:calc(100% + 12px); left:0; min-width:240px;
  background:var(--glass-strong); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,0.12);
  padding:14px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition: all .18s ease; z-index:210;
}
.nav-user.open .user-menu, .nav-user:hover .user-menu{opacity:1; visibility:visible; transform:translateY(0);}
.user-menu-header{display:flex; align-items:center; gap:10px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--border);}
.user-menu-header .avatar-btn{cursor:default;}
.user-menu-name{font-family:'Cairo',sans-serif; font-weight:700; font-size:14px; color:var(--text);}
.user-menu-sub{font-size:11.5px; color:var(--text-faint); margin-top:2px;}
.user-menu-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 8px; border-radius:9px; font-size:13.5px; color:var(--text-dim); cursor:pointer;
  transition: background .15s ease;
}
.user-menu-item:hover{background:rgba(255,255,255,0.06); color:var(--text);}
.login-form{display:flex; flex-direction:column; gap:8px;}
.login-form input{
  background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-family:'Tajawal',sans-serif; font-size:13px; padding:8px 10px;
}
.login-form input:focus{outline:none; border-color:var(--accent);}
.btn-mini{
  font-family:'Tajawal',sans-serif; font-size:13px; font-weight:700; padding:8px 10px;
  border-radius:8px; border:none; cursor:pointer; background:var(--accent); color:#04151a;
}
.toggle-switch{
  width:38px; height:22px; border-radius:999px; background:var(--border-strong); position:relative; cursor:pointer; flex-shrink:0;
  transition: background .2s ease;
}
.toggle-switch.on{background:var(--accent);}
.toggle-switch .knob{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff;
  transition: transform .2s ease;
}
.toggle-switch.on .knob{transform:translateX(16px);}
.demo-note{font-size:10.5px; color:var(--text-faint); line-height:1.6; margin-top:10px; padding-top:10px; border-top:1px solid var(--border);}
.auth-error{font-size:11.5px; color:var(--danger); min-height:14px; line-height:1.5;}
.auth-switch{font-size:11.5px; color:var(--text-faint); text-align:center; margin-top:2px;}
.auth-switch a{color:var(--accent-bright); font-weight:700; cursor:pointer;}

.page-shell{max-width:1180px; margin:0 auto; padding:120px 20px 80px;}
.glass-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow: 0 20px 40px -28px rgba(20,30,50,0.18);
}
[data-theme="dark"] .glass-card{box-shadow:0 30px 60px -35px rgba(0,0,0,0.5);}

.btn{
  font-family:'Tajawal',sans-serif; font-size:14px; font-weight:600;
  padding:11px 20px; border-radius:var(--radius-pill); cursor:pointer;
  border:1px solid var(--border-strong); background:transparent; color:var(--text-dim);
  transition:all .18s ease; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{border-color:var(--accent); color:var(--text);}
.btn.primary{
  background:linear-gradient(135deg, var(--accent-bright), var(--accent));
  color:#04151a; border-color:transparent; font-weight:700; box-shadow:var(--glow-accent);
  position:relative; overflow:hidden;
}
.btn.primary::after{
  content:""; position:absolute; inset:0; background:var(--sheen); transform:translateX(-120%);
  transition: transform .6s ease;
}
.btn.primary:hover::after{transform:translateX(120%);}
.btn.primary:hover{filter:brightness(1.06); box-shadow:var(--glow-accent), var(--glow-gold);}
.btn.small{padding:7px 14px; font-size:12.5px;}
.btn.danger{color:var(--danger); border-color:rgba(224,104,90,0.4);}

footer.site-footer{
  max-width:1180px; margin:0 auto; padding:40px 20px 60px; text-align:center;
  color:var(--text-faint); font-size:12.5px; border-top:1px solid var(--border); margin-top:60px;
}

.footer-rich{max-width:1180px; margin:60px auto 0; padding:60px 20px 30px; border-top:1px solid var(--border);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:40px;}
.footer-col h4{font-family:'Cairo',sans-serif; font-size:14px; color:var(--text); margin-bottom:16px;}
.footer-col a{display:block; font-family:'Tajawal',sans-serif; font-size:13px; color:var(--text-dim); margin-bottom:10px;}
.footer-col a:hover{color:var(--accent-bright);}
.footer-brand{display:flex; align-items:center; gap:10px; font-family:'Playfair Display',serif; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:17px; color:var(--text); margin-bottom:12px;}
.footer-brand p{font-family:'Tajawal',sans-serif; font-size:13px; color:var(--text-faint); line-height:1.8; max-width:280px; margin:0;}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:24px; border-top:1px solid var(--border); font-family:'Tajawal',sans-serif; font-size:12px; color:var(--text-faint);}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }

[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
[data-reveal].revealed{opacity:1; transform:translateY(0);}
[data-reveal="1"].revealed{transition-delay:.05s;}
[data-reveal="2"].revealed{transition-delay:.15s;}
[data-reveal="3"].revealed{transition-delay:.25s;}
[data-reveal="4"].revealed{transition-delay:.35s;}

.tier-badge-nav{
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 16px; border-radius:999px;
  font-family:'Tajawal',sans-serif; font-size:13px; font-weight:800;
  letter-spacing:.3px; position:relative; overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  white-space:nowrap;
}
.tier-badge-basic{
  background:#EDEAE0; color:#7A7568; box-shadow:none;
}
.tier-badge-plus{
  background:linear-gradient(135deg, #10B981 0%, #059669 55%, #047857 100%);
  color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.15);
}
.tier-badge-elite{
  background:linear-gradient(135deg, #0B0B0D 0%, #2B2B30 35%, #6B6B72 65%, #D8D8DC 100%);
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.tier-badge-elite::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
  animation: tierEliteShine 3.2s ease-in-out infinite;
}
@keyframes tierEliteShine{
  0%{ left:-60%; }
  35%{ left:130%; }
  100%{ left:130%; }
}
.tier-badge-business{
  background:linear-gradient(135deg, #1B2A4A 0%, #24365E 60%, #1B2A4A 100%);
  color:#F0C674; text-shadow:0 1px 1px rgba(0,0,0,.3);
  border:1px solid rgba(240,198,116,.4);
}

.maint-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(12,10,6,0.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  animation: maintFadeIn .22s ease-out both;
}
[data-theme="dark"] .maint-overlay{ background:rgba(2,4,8,0.68); }
.maint-overlay[hidden]{ display:none; }

.maint-card{
  width:min(440px, 100%);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  box-shadow:var(--shadow), var(--glow-accent);
  padding:30px 26px 24px;
  text-align:center;
  animation: maintPopIn .26s cubic-bezier(.2,.9,.3,1.2) both;
}
.maint-icon{
  width:60px; height:60px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:var(--accent-2);
  background:rgba(160,82,45,0.12);
  border:1px solid rgba(160,82,45,0.28);
  animation: maintPulse 2.4s ease-in-out infinite;
}
[data-theme="dark"] .maint-icon{
  background:rgba(193,127,69,0.16);
  border-color:rgba(193,127,69,0.34);
}
.maint-title{
  margin:0 0 10px;
  font-size:1.22rem; font-weight:800; line-height:1.5;
  color:var(--text);
}
.maint-desc{
  margin:0 0 14px;
  font-size:.95rem; line-height:1.9;
  color:var(--text-dim);
}
.maint-note{
  margin:0 0 20px;
  font-size:.82rem; color:var(--text-faint);
}
.maint-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.maint-btn{
  font-family:inherit; font-size:.9rem; font-weight:700;
  padding:11px 20px; border-radius:var(--radius-pill);
  border:1px solid transparent; cursor:pointer;
  background:var(--accent); color:#fff;
  transition:transform .15s ease, filter .15s ease, background .15s ease;
}
.maint-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.maint-btn:disabled{ opacity:.6; cursor:default; transform:none; }
.maint-btn.ghost{
  background:transparent; color:var(--text-dim);
  border-color:var(--border-strong);
}
.maint-btn.ghost:hover{ color:var(--text); background:var(--glass); }

.maint-pill{
  position:fixed; z-index:9998;
  bottom:18px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:.84rem; font-weight:700;
  padding:9px 16px; border-radius:var(--radius-pill);
  cursor:pointer;
  color:var(--text);
  background:var(--glass-strong);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.maint-pill[hidden]{ display:none; }
.maint-pill-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--danger);
  animation: maintPulse 1.6s ease-in-out infinite;
}

@keyframes maintFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes maintPopIn{
  from{ opacity:0; transform:translateY(10px) scale(.96); }
  to{ opacity:1; transform:none; }
}
@keyframes maintPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.45; }
}
@media (prefers-reduced-motion: reduce){
  .maint-overlay, .maint-card, .maint-icon, .maint-pill-dot{ animation:none; }
}
@media (max-width:480px){
  .maint-card{ padding:26px 18px 20px; }
  .maint-title{ font-size:1.08rem; }
  .maint-actions{ flex-direction:column; }
  .maint-btn{ width:100%; }
}