/* ==========================================================================
   Atlas Lab — the 4 site templates (body.tpl-*). Admin → Design → Templates.
   ========================================================================== */

/* ---------- Hayat: full photo hero, centred text, soft cards ---------- */
.tpl-hayat .hero { padding: 120px 0 150px; background: linear-gradient(180deg, rgba(var(--_d-rgb), .78), rgba(var(--_d-rgb), .55)), var(--hero-bg) center / cover no-repeat; color: rgba(255, 255, 255, .88); text-align: center; }
.tpl-hayat .hero .wrap { grid-template-columns: 1fr; max-width: 900px; }
.tpl-hayat .hero h1 { color: #fff; }
.tpl-hayat .hero .hl { color: #fff; background: linear-gradient(transparent 62%, rgba(var(--_a-rgb), .55) 62%); }
.tpl-hayat .hero .lead { margin-inline: auto; }
.tpl-hayat .hero-btns, .tpl-hayat .hero .stats { justify-content: center; }
.tpl-hayat .hero .stats b { color: #fff; }
.tpl-hayat .hero .stats > div { border-color: rgba(255, 255, 255, .25); }
.tpl-hayat .hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .7); }
.tpl-hayat .hero-media { display: none; }
.tpl-hayat .card { border-color: transparent; box-shadow: 0 14px 40px rgba(var(--_d-rgb), .07); }
.tpl-hayat .sec-soft { background: linear-gradient(180deg, var(--_l), #fff); }
.tpl-hayat .head .sub { color: var(--_a); }

/* ---------- Noor: minimal, centred hero + wide photo, crisp corners ---------- */
.tpl-noor { --_r: 8px; }
.tpl-noor .hero { padding: 70px 0 110px; background: #fff; text-align: center; }
.tpl-noor .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
.tpl-noor .hero .lead { margin-inline: auto; max-width: 680px; }
.tpl-noor .hero-btns, .tpl-noor .hero .stats { justify-content: center; }
.tpl-noor .hero-media img { aspect-ratio: 21 / 8; border-radius: 10px; box-shadow: none; }
.tpl-noor .hero-media::before { display: none; }
.tpl-noor .float-card { inset-inline-start: 50%; transform: translateX(50%); bottom: -26px; }
[dir=ltr] .tpl-noor .float-card { transform: translateX(-50%); }
.tpl-noor .btn, .tpl-noor .sl .btn { border-radius: 6px; }
.tpl-noor .card, .tpl-noor .sl-card, .tpl-noor .side-box, .tpl-noor .form-card, .tpl-noor .faq details, .tpl-noor .strip .grid, .tpl-noor .cta { border-radius: 8px; }
.tpl-noor .card:hover { transform: none; box-shadow: 0 0 0 2px var(--_p); }
.tpl-noor .ico { border-radius: 8px; }
.tpl-noor .header { box-shadow: 0 1px 0 var(--_b); }
.tpl-noor .nav a { border-radius: 6px; }
.tpl-noor .hl { background: none; border-bottom: 3px solid var(--_a); }
.tpl-noor .cta { background: var(--_d); box-shadow: none; }

/* ---------- Raya: dark gradient hero, pill buttons, outlined cards ---------- */
.tpl-raya { --_r: 22px; }
.tpl-raya .topbar { background: var(--_p); }
.tpl-raya .hero { padding: 80px 0 140px; background: radial-gradient(700px 420px at 15% 20%, rgba(var(--_a-rgb), .35), transparent 60%), linear-gradient(135deg, var(--_d), var(--_p)); color: rgba(255, 255, 255, .85); }
.tpl-raya .hero h1, .tpl-raya .hero .stats b { color: #fff; }
.tpl-raya .hero .hl { color: #fff; background: linear-gradient(transparent 60%, rgba(var(--_a-rgb), .6) 60%); }
.tpl-raya .hero .badge { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
.tpl-raya .hero .btn { background: #fff; border-color: #fff; color: var(--_d); }
.tpl-raya .hero .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.tpl-raya .hero .stats > div { border-color: rgba(255, 255, 255, .2); }
.tpl-raya .hero-media img { border-radius: 46% 54% 40% 60% / 52% 40% 60% 48%; aspect-ratio: 1; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.tpl-raya .hero-media::before { inset: -18px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.tpl-raya .btn, .tpl-raya .sl .btn, .tpl-raya .lang, .tpl-raya .burger { border-radius: 999px; }
.tpl-raya .card { border: 2px solid var(--_l); }
.tpl-raya .card:hover { border-color: var(--_p); }
.tpl-raya .ico { border-radius: 50%; background: linear-gradient(135deg, var(--_p), var(--_a)); color: #fff; }
.tpl-raya .head .sub { display: inline-block; padding: 4px 14px; border-radius: 30px; background: var(--_l); }
.tpl-raya .head .sub::before, .tpl-raya .head .sub::after { display: none; }
.tpl-raya .cta { background: linear-gradient(120deg, var(--_d), var(--_p)); }

@media (max-width: 960px) {
	.tpl-hayat .hero { padding: 80px 0 120px; }
	.tpl-noor .hero-media img { aspect-ratio: 16 / 9; }
}