:root{
  --brand:#263993;
  --deep:#173b8e;
  --mid:#2f67d6;
  --light:#f4fbff;
  --glass: rgba(255,255,255,.16);
  --glass2: rgba(255,255,255,.24);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, Arial;
  color:#fff;
  background:#0b1a3a;
}
.hero{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 600px at 70% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
    linear-gradient(135deg,var(--deep),var(--mid),#6fc2ff,var(--light));

  color: var(--brand);
}
/* Stars: golden + shimmer */
.stars, .stars::before, .stars::after{
  content:"";
  position:absolute;
  inset:-15%;
  pointer-events:none;
  background-repeat:repeat;
  mix-blend-mode: screen;
}
.stars{
  opacity:.72;
  filter: blur(.1px);
  background-image:
    radial-gradient(circle at 12% 28%, rgba(255,210,120,.92) 0 1.15px, rgba(255,210,120,0) 3px),
    radial-gradient(circle at 32% 52%, rgba(255,200,90,.75) 0 1px, rgba(255,200,90,0) 2.6px),
    radial-gradient(circle at 68% 18%, rgba(255,220,140,.88) 0 1.35px, rgba(255,220,140,0) 3.2px),
    radial-gradient(circle at 78% 62%, rgba(255,210,120,.65) 0 .95px, rgba(255,210,120,0) 2.5px),
    radial-gradient(circle at 88% 40%, rgba(255,230,160,.8) 0 1.05px, rgba(255,230,160,0) 2.9px);
  animation: starDrift 18s linear infinite;
}
.stars::before{
  opacity:.55;
  background-image:
    radial-gradient(circle at 18% 18%, rgba(255,215,130,.95) 0 1.9px, rgba(255,215,130,0) 4.6px),
    radial-gradient(circle at 55% 40%, rgba(255,205,110,.78) 0 1.4px, rgba(255,205,110,0) 3.8px),
    radial-gradient(circle at 86% 24%, rgba(255,230,170,.9) 0 1.75px, rgba(255,230,170,0) 4.3px),
    radial-gradient(circle at 24% 74%, rgba(255,220,150,.7) 0 1.25px, rgba(255,220,150,0) 3.6px);
  filter: blur(.15px);
  animation: starShimmer 3.6s ease-in-out infinite;
}
.stars::after{
  opacity:.35;
  background-image:
    radial-gradient(circle at 22% 72%, rgba(255,210,120,.8) 0 .95px, rgba(255,210,120,0) 2.8px),
    radial-gradient(circle at 62% 78%, rgba(255,220,150,.82) 0 1.15px, rgba(255,220,150,0) 3.2px),
    radial-gradient(circle at 92% 70%, rgba(255,200,90,.7) 0 .9px, rgba(255,200,90,0) 2.7px);
  animation: starTwinkle 2.9s ease-in-out infinite;
}
@keyframes starDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-2.5%, 1.5%, 0)}}
@keyframes starShimmer{0%,100%{opacity:.45; transform:scale(1)}50%{opacity:.85; transform:scale(1.01)}}
@keyframes starTwinkle{0%,100%{opacity:.25}50%{opacity:.55}}
/* Waves */
.wave{
  position:absolute; left:-10%; right:-10%;
  height:52%; top:-8%;
  background:
    radial-gradient(1200px 420px at 30% 80%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  clip-path: path("M 0 160 C 200 60 420 60 640 140 C 900 240 1120 220 1400 110 L 1400 0 L 0 0 Z");
  opacity:.65;
}
.wave2{
  position:absolute; left:-10%; right:-10%;
  height:58%; top:12%;
  background:
    radial-gradient(1200px 460px at 75% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(255,255,255,0));
  clip-path: path("M 0 220 C 260 140 520 110 740 180 C 980 260 1200 280 1400 210 L 1400 0 L 0 0 Z");
  opacity:.55;
}
/* Topbar */
.topbar{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:26px clamp(16px, 4vw, 48px);
}
.brand img{
  height:150px;
  width:auto;
  filter:
    drop-shadow(0 0 14px rgba(255,255,255,.45))
    drop-shadow(0 20px 36px rgba(0,0,0,.45));
}
.nav{
  display:flex; gap:22px; align-items:center;
  opacity:.95; font-weight:700;
}
.nav a{color:#fff; text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}
.lang{display:flex; gap:10px; align-items:center}
.lang button{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  font-weight:800;
}
.lang button.active{background: rgba(255,255,255,.24)}
/* Main */
.content{
  position:relative; z-index:3;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: min(6vw, 60px);
  align-items:center;
  padding: 10px clamp(16px, 4vw, 48px) 70px;
}
@media (max-width: 980px){
  .content{ grid-template-columns:1fr; text-align:center; }
  .nav{display:none}
}
.headline{
  font-size: clamp(40px, 6vw, 64px);
  line-height:1.05;
  margin:0;
  text-shadow: 0 18px 42px rgba(0,0,0,.25);
  position:relative;
  transform: translateX(18%);
}
html[dir="rtl"] .headline{ transform: translateX(-18%); }
@media (max-width: 980px){
  .headline, html[dir="rtl"] .headline{ transform:none; }
}
.headline::after{
  content:"";
  position:absolute;
  inset:-10px -14px;
  border-radius:18px;
  background: radial-gradient(200px 80px at 30% 40%, rgba(255,220,150,.22), rgba(255,255,255,0) 70%);
  filter: blur(6px);
  opacity:.55;
  z-index:-1;
  animation: glowPulse 2.8s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.45; transform:scale(1)}50%{opacity:.8; transform:scale(1.02)}}
.sub{
  margin:14px 0 24px;
  font-size: clamp(16px, 2.1vw, 20px);
  opacity:.92;
  max-width: 52ch;
}
.form{
  display:flex; gap:10px; align-items:center;
  max-width: 760px;
  flex-wrap:wrap;
}
@media (max-width: 980px){
  .form{ margin:0 auto; justify-content:center; }
}
.field{
  flex:1 1 240px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.14);
  color:#fff;
  padding:14px 16px;
  border-radius: 999px;
  outline:none;
  backdrop-filter: blur(10px);
}
.field::placeholder{ color: rgba(255,255,255,.75); }
.btn{
  padding:14px 18px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.22);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 20px 44px rgba(0,0,0,.18);
}
.status{ margin-top:10px; font-weight:900; min-height:22px; }
.note{ margin-top:12px; opacity:.9; font-size:14px; }
/* Coin */
.coinWrap{display:flex; justify-content:center; align-items:center; position:relative;}
.coin{
  width: min(308px, 56vw);
  height:auto;
  filter: drop-shadow(0 26px 42px rgba(0,0,0,.28));
  transform: rotate(-7deg);
  animation: float 6.2s ease-in-out infinite;
}
@keyframes float{0%,100%{transform: translateY(0) rotate(-7deg);}50%{transform: translateY(-10px) rotate(-6deg);}}

/* ===== Additions for multi-section landing ===== */
.actions{display:flex;align-items:center;gap:12px}
.linkBtn{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);color:#fff;cursor:pointer;font-weight:950}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);font-weight:950;margin-bottom:14px}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
@media(max-width:980px){.mini{grid-template-columns:1fr;max-width:520px;margin:18px auto 0}}
.miniCard{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:12px;backdrop-filter: blur(10px)}
.miniIcon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);font-weight:950}
.miniTitle{font-weight:950}
.miniText{opacity:.9;font-size:13px;margin-top:2px}
.aiCard{position:absolute;bottom:18px;left:18px;width:min(300px,70%);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:12px;backdrop-filter: blur(10px)}
html[dir="rtl"] .aiCard{left:auto; right:18px}
.aiTitle{font-weight:950;margin-bottom:4px}
.aiText{opacity:.9;font-size:13px;line-height:1.5}

.section{padding:72px clamp(16px,4vw,48px);background:#071532}
.section:nth-of-type(even){background:#06112a}
.sectionInner{max-width:1100px;margin:0 auto}
.h2{margin:0 0 12px;font-size:clamp(28px,3vw,38px)}
.p{margin:0 0 22px;opacity:.92;max-width:72ch;line-height:1.7}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:980px){.grid3,.grid2{grid-template-columns:1fr}}

.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px}
.cardIcon{font-size:20px;margin-bottom:8px}
.cardTitle{font-weight:950;margin-bottom:6px}
.cardText{opacity:.9;line-height:1.6;font-size:14px}
.list{margin:0;padding:0 18px;opacity:.95;line-height:1.8}
.list li{margin:8px 0}

.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:980px){.steps{grid-template-columns:1fr}}
.step{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px}
.stepNo{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);font-weight:950}
.stepTitle{font-weight:950;margin-bottom:4px}
.stepText{opacity:.9;line-height:1.6;font-size:14px}

.tip{margin-top:16px;padding:12px 14px;border-radius:16px;background:rgba(255,220,150,.10);border:1px solid rgba(255,220,150,.22);opacity:.95;line-height:1.7}

.ctaRow{display:flex;gap:14px;align-items:center;margin-top:18px;flex-wrap:wrap}
.link{color:#fff;opacity:.9}
.link:hover{opacity:1}

.footer{background:#040c1e;padding:22px clamp(16px,4vw,48px)}
.footerInner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:14px;opacity:.9}
.footerLeft{font-weight:900}
.footerRight{font-weight:950}

/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:50}
.modal.open{display:block}
.modalOverlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modalCard{position:relative;width:min(720px, calc(100% - 24px));margin: 60px auto;background:rgba(9,18,44,.92);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:14px;backdrop-filter: blur(12px);box-shadow: 0 40px 90px rgba(0,0,0,.45)
  max-height: 85vh;
  overflow-y: auto;
}
.modalTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modalTitle{font-weight:950}
.x{width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);color:#fff;cursor:pointer;font-size:22px;line-height:0}
.tabs,.tabs2{display:flex;gap:10px;margin-bottom:10px}
.tab,.tab2{flex:1;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-weight:950}
.tab2{background:rgba(255,255,255,.06)}
.tab.active{background:rgba(255,255,255,.18)}
.tab2.active{background:rgba(255,255,255,.14)}
.panel{margin-top:6px}
.hidden{display:none}
.muted{opacity:.85;font-size:13px;margin-top:10px;line-height:1.6}
.grid2Form{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:720px){.grid2Form{grid-template-columns:1fr}}

.hero .btn, .hero .linkBtn, .hero .nav a{color:#fff;}

.hero .field{color:#fff;}


/* Contact */
.contactRow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:14px}
.contactBtn{
  display:flex;gap:10px;align-items:center;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  font-weight:900;
}
.contactBtn:hover{background:rgba(255,255,255,.12)}
.ico{width:34px;height:34px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16)}
.field.area{
  border-radius:18px;
  resize:vertical;
  flex:1 1 100%;
}

/* Modal scrolling */
.modalCard::-webkit-scrollbar{width:8px}
.modalCard::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.25);
  border-radius:8px;
}
.modalCard::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
}


/* EN option B: reverse hero gradient direction for better logo/text clarity (no frames) */
html.is-en .hero{
  background:
    radial-gradient(1200px 600px at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(315deg, var(--deep), var(--mid), #6fc2ff, var(--light));
}
/* Slightly increase text clarity in EN */
html.is-en .sub{opacity:1}
html.is-en .nav a{opacity:1}
html.is-en .brand img{
  filter: drop-shadow(0 0 10px rgba(255,255,255,.22)) drop-shadow(0 18px 28px rgba(0,0,0,.35));
}

/* Robust modal scroll (fix signup form not scrolling) */
.modal.open{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.modalCard{
  margin: 24px auto !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}





.waSvg{width:22px;height:22px;display:block;fill:#25D366}

/* ===== Soft Uniform Hover FX (Readable) ===== */
.section .card,
.section .step,
.section .contactBtn{
  position: relative;
  transform-origin: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Clear scale without aggression */
.section .card:hover,
.section .step:hover,
.section .contactBtn:hover{
  transform: scale(1.06);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
}

/* EVEN soft backlight (TV-like, no hotspots) */
.section .card::after,
.section .step::after,
.section .contactBtn::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 26px;
  background: linear-gradient(
    180deg,
    rgba(255, 220, 150, .22),
    rgba(255, 220, 150, .22)
  );
  filter: blur(14px);
  opacity: 0;
  z-index:-1;
  pointer-events:none;
  transition: opacity .25s ease;
}

.section .card:hover::after,
.section .step:hover::after,
.section .contactBtn:hover::after{
  opacity: 1;
}

/* Icon gentle glow + micro wobble */
.section .cardIcon,
.section .stepNo,
.section .ico{
  transition: transform .25s ease, filter .25s ease;
}

.section .card:hover .cardIcon,
.section .step:hover .stepNo,
.section .contactBtn:hover .ico{
  transform: scale(1.08);
  filter: drop-shadow(0 0 14px rgba(255,220,150,.55));
}

@keyframes softWobble{
  0%{transform: scale(1.08)}
  50%{transform: scale(1.08) rotate(1.5deg)}
  100%{transform: scale(1.08)}
}
.section .card:hover .cardIcon,
.section .step:hover .stepNo,
.section .contactBtn:hover .ico{
  animation: softWobble .45s ease-in-out;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .section .card,
  .section .step,
  .section .contactBtn,
  .section .cardIcon,
  .section .stepNo,
  .section .ico{
    transition:none;
    animation:none !important;
  }
}

.toast{margin-top:10px;font-weight:900;opacity:0;transform:translateY(6px);transition:opacity .25s ease, transform .25s ease}
.toast.show{opacity:1;transform:translateY(0)}

/* Stats */
.statsGrid{grid-template-columns: repeat(3, minmax(0, 1fr));}
.statCard{text-align:center}
.statNum{font-size:44px;line-height:1;font-weight:1000;margin-top:6px;margin-bottom:10px}
@media (max-width: 900px){
  .statsGrid{grid-template-columns: 1fr;}
  .statNum{font-size:40px;}
}



/* Slogan glow (matches icon FX) */
.badge .sloganHeroGlow{
  display:inline-block;
  transition: transform .25s ease, filter .25s ease, text-shadow .25s ease;
  text-shadow: 0 0 10px rgba(255,220,150,.22);
}
.badge:hover .sloganHeroGlow{
  transform: scale(1.08);
  filter: drop-shadow(0 0 14px rgba(255,220,150,.55));
  animation: softWobble .45s ease-in-out;
  text-shadow: 0 0 12px rgba(255,220,150,.30);
}

/* Footer: ثابتة وإضاءة خفيفة */
.sloganFooterGlow{
  display:inline-block;
  text-shadow: 0 0 8px rgba(255,220,150,.18), 0 0 14px rgba(255,220,150,.12);
}

/* v23 user ads */
select.field{appearance:none}


/* === Early Registration Colors (ALCASHLK brand) === */
#formEarly .field::placeholder{
  color: rgba(11,45,107,.72) !important;
}
#formEarly select.field{
  color: #0b2d6b !important;
}


/* === EarlyReg Button Text Color (MASTER v49.1) === */
#formEarly .btn,
#formEarly #btn{
  color:#0b2e7a !important; /* dark blue like logo */
}
#formEarly .btn:hover,
#formEarly #btn:hover{
  background: rgba(255,255,255,.18) !important;
}


/* === Early Registration Colors Fix (v49.4) === */
#formEarly input,
#formEarly select,
#formEarly textarea{
  color: #0b2e7a !important; /* dark blue like logo */
  -webkit-text-fill-color: #0b2e7a !important;
}

/* === ALCASHLK Logo Shadow Disabled v49.6 === */
.logo,
img.logo,
img[class*="logo"]{
  box-shadow: none !important;
  filter: none !important;
}

/* === ALCASHLK Logo Clear (NO OVERLAY / NO BLUR) v49.7 === */
.logo,
.logo *,
img.logo,
img[class*="logo"]{
  background: transparent !important;
}

.logo-wrapper,
.logo-container,
.header-logo,
.header .logo{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

.header::before,
.header::after{
  content: none !important;
  display: none !important;
}

/* Hard reset any blur/overlay affecting images */
img{
  backdrop-filter: none;
}

/* === LOGO DETACHED (v49.8) === */
.top-logo{
  position: fixed;
  top: 18px;
  inset-inline-start: 18px;
  z-index: 9999;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.top-logo .brand,
.top-logo img{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.top-logo img{
  display:block;
  height: 46px;
  width: auto;
}

/* Hide logo inside hero topbar to avoid duplicate */
.topbar .brand{ display:none !important; }

/* === LOGO RESTORED & CLEAR (v49.9) === */
.topbar .brand{ 
  display:flex !important;
  align-items:center;
  gap:10px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}
.topbar .brand img{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  height: 46px;
  width: auto;
  display:block;
}
/* If detached header exists in any cached HTML, hide it */
.top-logo{ display:none !important; }

/* === LOGO SIZE TUNING (v49.10) === */
.topbar .brand img{
  height: 68px !important;
}
@media (max-width: 768px){
  .topbar .brand img{
    height: 54px !important;
  }
}

.topbar{
  min-height: 84px;
}
@media (max-width: 768px){
  .topbar{ min-height: 70px; }
}


/* Tablets */
@media (max-width: 1024px){
  .topbar .brand img{
    height: 92px !important;
  }
}

/* Mobile */
@media (max-width: 768px){
  .topbar .brand img{
    height: 72px !important;
  }
}

/* Ensure header space */
.topbar{
  min-height: 130px !important;
}

/* === LOGO SIZE +40% (v49.12) === */
/* Desktop */
.topbar .brand img{
  height: 154px !important; /* 110px + 40% */
}

/* Tablet */
@media (max-width: 1024px){
  .topbar .brand img{
    height: 128px !important;
  }
}

/* Mobile */
@media (max-width: 768px){
  .topbar .brand img{
    height: 100px !important;
  }
}

/* Header breathing space */
.topbar{
  min-height: 175px !important;
}