/* Core styling for Kawkab Al-Najah Coming Soon page */
:root {
  --brand-accent: #ffc107;
  --brand-accent-rgb: 255,193,7;
  --bg-deep: #0d1b2a;
  --bg-alt: #132739;
  --gradient-1: linear-gradient(140deg,#0d1b2a 0%,#132739 40%,#173550 70%,#1e3f5c 100%);
  --gradient-accent: radial-gradient(circle at 30% 30%, rgba(var(--brand-accent-rgb),0.18), transparent 70%);
  --font-stack: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --easing-smooth: cubic-bezier(.4,.12,.2,1);
  --glass-bg: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.12);
}

html, body { font-family: var(--font-stack); background: var(--bg-deep); color: #fff; }
body { position: relative; overflow-x: hidden; }

.bg-canvas { position: fixed; inset:0; overflow:hidden; }
.gradient-overlay { position:absolute; inset:0; background: var(--gradient-1); mix-blend-mode:normal; }
.gradient-overlay::after { content:""; position:absolute; inset:0; background: var(--gradient-accent); opacity:.9; }

.noise { position:absolute; inset:0; background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABTUlEQVRoge2Z0Q2DMAxF/6kJ2AM2gA3YADZgA7aADdgANuBQvVbKQJxqMkqcb7f4kSoOfZ9Md5F1atAnCMMcb4AUQCPxkgFN0DDCIlg0TfV8hlxSwhrwBtmOQhsYWvAcwjmC3CkUxJ8l6QbeQOmApu0T9nTB8SftP2RyNeDJkD9DrgrgCrgAkcJvShR6FZAzCahNQm8F3sz9xX3hG0iJgqj5KAS6ghZCILpgn5gZ8gUd0NgiGFoik2gT6gTWgA1qJjwzlTe6hZcoGnoVwyAkZphmqf4NZRl+6Rz9c7b+q4y8MRS4guaVsObsv2FNsL0ow8KXVOanYuslPfpWfXfpQJZK/J3gbvGNs/6S6HgFcQ6zbYR7kI+KwDIKcAp9o73griXxu5QGq9JOMcwnSxA2YsOIuQdiOEAv/msFuBHk1d0uQfmlgSrxsXzQoxMXAMuiRvwH0i5C2rqlK8AAAAASUVORK5CYII=") repeat; opacity:.08; mix-blend-mode:overlay; pointer-events:none; }

.floating-shapes { position:absolute; inset:0; }
.floating-shapes li { position:absolute; display:block; width: clamp(140px, 18vw, 260px); aspect-ratio:1; background: radial-gradient(circle at 30% 30%, rgba(var(--brand-accent-rgb),0.35), rgba(var(--brand-accent-rgb),0.05) 60%, transparent 75%); border-radius:50%; filter: blur(4px) saturate(120%); animation: float 28s var(--easing-smooth) infinite; opacity:.22; }
.floating-shapes li:nth-child(1){ top:10%; left:5%; animation-duration:32s; }
.floating-shapes li:nth-child(2){ top:60%; left:15%; animation-duration:30s; }
.floating-shapes li:nth-child(3){ top:20%; right:10%; animation-duration:34s; }
.floating-shapes li:nth-child(4){ top:70%; right:8%; animation-duration:29s; }
.floating-shapes li:nth-child(5){ top:40%; left:45%; animation-duration:36s; }
.floating-shapes li:nth-child(6){ top:85%; left:55%; animation-duration:33s; }

@keyframes float { 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(0,-40px,0) scale(1.08);} }

.navbar { background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.brand-mark { display:inline-grid; place-items:center; width:46px; height:46px; font-weight:600; border-radius:14px; background:linear-gradient(145deg,#1f3d57,#112435); color:var(--brand-accent); font-size:1.15rem; letter-spacing:.5px; box-shadow:0 4px 12px -2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08) inset; backdrop-filter: blur(6px); }
.brand-text { font-weight:500; font-size:1.15rem; letter-spacing:.5px; }

.brand-heading { background: linear-gradient(90deg,#fff 0%,var(--brand-accent) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 18px rgba(var(--brand-accent-rgb),0.15)); }

.countdown .time-box { background: var(--glass-bg); border:1px solid var(--glass-border); padding:1rem .85rem; width:110px; max-width:25vw; border-radius:20px; backdrop-filter: blur(8px) saturate(140%); position:relative; overflow:hidden; }
.countdown .time-box::before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(var(--brand-accent-rgb),0.28), transparent 60%); opacity:.3; mix-blend-mode:overlay; }
.countdown .num { display:block; font-size:2rem; font-weight:600; letter-spacing:1px; line-height:1; }
.countdown .label { font-size:.7rem; text-transform:uppercase; letter-spacing:1.5px; opacity:.65; font-weight:500; }

.subscription-form .form-control { background:rgba(255,255,255,0.08); border:0; color:#fff; }
.subscription-form .form-control:focus { box-shadow:none; background:rgba(255,255,255,0.14); }
.subscription-form .btn { border:0; }
.subscription-form .btn:hover { filter:brightness(1.05) saturate(115%); }

.btn-icon { width:52px; height:52px; border-radius:18px; display:inline-flex; align-items:center; justify-content:center; backdrop-filter: blur(6px); border:1px solid var(--glass-border); background: var(--glass-bg); transition: all .35s var(--easing-smooth); }
.btn-icon:hover:not(.disabled) { background: rgba(var(--brand-accent-rgb),0.18); border-color: rgba(var(--brand-accent-rgb),0.6); color:var(--brand-accent); transform:translateY(-4px); box-shadow:0 6px 18px -4px rgba(var(--brand-accent-rgb),0.45); }
.btn-icon.disabled { opacity:.4; cursor:default; }

footer { background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }

/* Responsive tweaks */
@media (max-width: 768px){
  .countdown .time-box { width:78px; padding:.85rem .5rem; border-radius:16px; }
  .countdown .num { font-size:1.4rem; }
  .brand-heading { font-size:2.2rem; }
}

@media (max-width: 420px){
  .brand-mark { width:40px; height:40px; font-size:1rem; border-radius:12px; }
  .brand-text { font-size:1rem; }
}

/* Arabic description card */
.glass-card { 
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 1.25rem 1.25rem;
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.glass-card h2 { color:#fff; font-weight:600; }
.glass-card p { color: rgba(255,255,255,.85); line-height: 1.9; }

.arabic-text { font-family: 'Tajawal', var(--font-stack); letter-spacing: 0; }
.arabic-text h2, .arabic-text p { text-align: right; }