:root{
    --brand1:#02aeee;
    --brand2:#fb8e0d;
    --ink:#0b1220;
    --muted:#6b7280;
}

body{
    color: var(--ink);
    background: radial-gradient(1200px 600px at 15% 10%, rgba(2,174,238,.15), transparent 55%),
                radial-gradient(1000px 500px at 85% 20%, rgba(251,142,13,.12), transparent 55%),
                linear-gradient(180deg, #ffffff, #f7fbff);
    overflow-x: hidden;
    font-family: "Tajawal", sans-serif !important;
    font-weight: 500;
    font-style: normal;
}

/* Navbar glass */
.nav-glass{
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,.75);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.brand-badge{
    width: 40px; height: 40px;
    display: grid; place-items:center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand1), var(--brand2));
    color: #fff;
    box-shadow: 0 12px 30px rgba(2,174,238,.18);
}

.btn-brand{
    background: linear-gradient(135deg, var(--brand1), var(--brand2));
    border: none;
    color: #fff;
    box-shadow: 0 12px 26px rgba(2,174,238,.18);
}
.btn-brand:hover{ opacity: .95; color:#fff; }

/* Animated blobs */
.blob{
    position: absolute;
    width: 520px; height: 520px;
    border-radius: 50%;
    filter: blur(38px);
    opacity: .35;
    animation: floaty 10s ease-in-out infinite;
    z-index: 0;
}
.blob.one{
    left: -180px; top: -200px;
    background: radial-gradient(circle at 30% 30%, rgba(2,174,238,.65), transparent 60%);
}
.blob.two{
    right: -220px; top: 80px;
    background: radial-gradient(circle at 30% 30%, rgba(251,142,13,.65), transparent 60%);
    animation-delay: 1.2s;
}
@keyframes floaty{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(0,18px) scale(1.03); }
}

/* Card polish */
.soft-card{
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 20px 45px rgba(15,23,42,.06);
}
.pill{
    display:inline-flex; align-items:center; gap:.5rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(255,255,255,.7);
    color: var(--muted);
    font-size: .9rem;
}
.feature-item{ display:flex; gap:.75rem; align-items:flex-start; }
.feature-icon{
    width: 36px; height:36px;
    border-radius: 12px;
    display:grid; place-items:center;
    background: rgba(2,174,238,.12);
    color: var(--brand1);
    flex: 0 0 36px;
}

/* Form */
.form-control, .form-select{
    border-radius: 12px;
    border-color: rgba(0,0,0,.10);
    padding: .72rem .9rem;
}
.form-control:focus, .form-select:focus{
    border-color: rgba(2,174,238,.65);
    box-shadow: 0 0 0 .2rem rgba(2,174,238,.18);
}

.page-wrap{ position: relative; z-index: 1; }

.hero-slide { min-height: 420px; border-radius: 20px; overflow: hidden; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform: scale(1.05); }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.15)); }
.hero-content { position:relative; z-index:2; }

.blob {
  pointer-events: none !important;
}

.modal {
  z-index: 3000 !important;
}

.modal-backdrop {
  z-index: 2990 !important;
}

.modal,
.modal * {
  pointer-events: auto !important;
}

.soft-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.soft-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(15,23,42,.10);
}