:root{color-scheme:dark light;font-family:Segoe UI,Tahoma,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}.asal-shell{color-scheme:dark;--asal-bg: #060302;--asal-bg-top: #140c08;--asal-bg-bottom: #060302;--asal-orbit-field: #07111f;--asal-orbit-line: rgb(210 162 96 / 18%);--asal-orbit-core: rgb(210 162 96 / 22%);--asal-orbit-haze: rgb(35 20 11 / 58%);--asal-surface: rgb(35 20 11 / 82%);--asal-surface-raised: rgb(45 27 15 / 88%);--asal-surface-muted: rgb(42 33 22 / 82%);--asal-text: #f5e6c6;--asal-text-muted: #d4b27c;--asal-muted: var(--asal-text-muted);--asal-border: rgb(210 162 96 / 42%);--asal-border-soft: rgb(210 162 96 / 22%);--asal-accent: #d2a260;--asal-accent-strong: #f2c987;--asal-accent-soft: rgb(210 162 96 / 14%);--asal-on-accent: #1a0d05;--asal-glass: rgb(255 248 226 / 7%);--asal-danger: #ef8f8f;--asal-success: #8fd9ad;--asal-focus: #7fb9d7;--asal-border-danger: color-mix(in srgb, var(--asal-danger), transparent 55%);--asal-border-success: color-mix(in srgb, var(--asal-success), transparent 55%);--asal-surface-danger: color-mix(in srgb, var(--asal-danger) 12%, var(--asal-surface-raised));--asal-surface-success: color-mix(in srgb, var(--asal-success) 12%, var(--asal-surface-raised));--asal-surface-warning: color-mix(in srgb, var(--asal-accent-strong) 12%, var(--asal-surface-raised));--asal-surface-focus: color-mix(in srgb, var(--asal-focus) 12%, var(--asal-surface-raised));--asal-nav-active-bg: color-mix(in srgb, var(--asal-accent), transparent 84%);--asal-nav-active-border: color-mix(in srgb, var(--asal-accent), transparent 45%);--asal-space-1: .25rem;--asal-space-2: .5rem;--asal-space-3: .75rem;--asal-space-4: 1rem;--asal-space-5: 1.5rem;--asal-space-6: 2rem;--asal-space-7: 3rem;--asal-space-8: 4.5rem;--asal-radius: 20px;--asal-radius-sm: 12px;--asal-radius-xl: 32px;--asal-radius-pill: 999px;--asal-shadow: 0 22px 60px rgb(0 0 0 / 34%);--asal-shadow-soft: 0 16px 38px rgb(0 0 0 / 20%);--asal-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--asal-focus), transparent 68%);--asal-shadow-danger: 0 10px 28px color-mix(in srgb, var(--asal-danger), transparent 74%);--asal-font-body: "Segoe UI", Tahoma, system-ui, sans-serif;--asal-font-quran: "Asal Quran", serif;--asal-font-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;--asal-text-xs: .75rem;--asal-text-sm: .875rem;--asal-text-base: 1rem;--asal-text-md: 1.1rem;--asal-text-lg: 1.25rem;--asal-text-xl: clamp(1.35rem, 3vw, 2rem);--asal-text-2xl: clamp(1.65rem, 3.5vw, 2.35rem);--asal-text-3xl: clamp(2rem, 7vw, 4.25rem);--asal-leading-tight: 1.1;--asal-leading-snug: 1.25;--asal-leading-normal: 1.65;--asal-leading-relaxed: 1.8;--asal-leading-quran: 2.45;--asal-dur-fast: .12s;--asal-dur-base: .18s;--asal-dur-slow: .25s;--asal-dur-orbital: 24s;--asal-ease: cubic-bezier(.16, 1, .3, 1);--asal-ease-out: cubic-bezier(.4, 0, .2, 1);--asal-density-compact: .88;--asal-density-comfortable: 1;--asal-density-spacious: 1.16;--asal-section-gap: var(--asal-space-5);--asal-card-pad: var(--asal-space-5);--asal-panel-pad: var(--asal-space-4);--asal-grain-opacity: .12;--asal-lattice-opacity: .42;--asal-theme-name: "night";--asal-surface-1: var(--asal-surface);--asal-surface-2: var(--asal-surface-raised);--asal-surface-3: var(--asal-surface-muted);--asal-surface-soft: var(--asal-surface-muted);--asal-border-strong: var(--asal-border);--asal-border-1: var(--asal-border-soft);--asal-radius-lg: calc(var(--asal-radius) + 8px);--asal-content-max: 1160px;--asal-reading-max: 58rem;--asal-legal-max: 900px;--asal-motion-fast: .16s ease;--asal-motion: .22s cubic-bezier(.16, 1, .3, 1);--asal-motion-slow: .32s ease;--asal-shadow-raise: 0 24px 56px color-mix(in srgb, var(--asal-accent), transparent 84%);--asal-touch-min: 2.75rem;--asal-touch-pill: .45rem 1rem}.asal-shell[data-visual-theme=day]{color-scheme:light;--asal-bg: #f1e3ca;--asal-bg-top: #fcf4e7;--asal-bg-bottom: #f1e3ca;--asal-orbit-field: #e5d3b6;--asal-orbit-line: rgb(95 68 39 / 16%);--asal-orbit-core: rgb(200 154 85 / 20%);--asal-orbit-haze: rgb(255 248 238 / 70%);--asal-surface: rgb(248 238 223 / 88%);--asal-surface-raised: rgb(255 248 238 / 94%);--asal-surface-muted: rgb(243 230 212 / 88%);--asal-text: #5f4427;--asal-text-muted: #8e6c46;--asal-border: rgb(211 177 132 / 72%);--asal-border-soft: rgb(160 112 58 / 20%);--asal-accent: #c89a55;--asal-accent-strong: #7a5529;--asal-accent-soft: rgb(200 154 85 / 16%);--asal-on-accent: #241608;--asal-glass: rgb(255 255 255 / 42%);--asal-danger: #9f2f2f;--asal-success: #2f7d57;--asal-focus: #1d6f9f;--asal-shadow: 0 20px 46px rgb(140 102 62 / 14%);--asal-shadow-soft: 0 14px 28px rgb(140 102 62 / 10%);--asal-grain-opacity: .08;--asal-lattice-opacity: .32;--asal-theme-name: "day"}.asal-shell[data-accent-mood=dhikr]{--asal-accent: #d2a260;--asal-accent-strong: #f2c987;--asal-accent-soft: rgb(210 162 96 / 16%)}.asal-shell[data-accent-mood=quran]{--asal-accent: #c49a58;--asal-accent-strong: #e8c488;--asal-accent-soft: rgb(196 154 88 / 14%)}.asal-shell[data-accent-mood=prayer]{--asal-accent: #b89250;--asal-accent-strong: #dfb875;--asal-accent-soft: rgb(184 146 80 / 14%)}.asal-shell .asal-mood-dhikr{--asal-accent: #d2a260;--asal-accent-strong: #f2c987}.asal-shell .asal-mood-quran{--asal-accent: #c49a58;--asal-accent-strong: #e8c488}.asal-shell .asal-mood-prayer{--asal-accent: #b89250;--asal-accent-strong: #dfb875}*{box-sizing:border-box}html{overflow-x:hidden}.asal-shell{margin:0;min-height:100vh;overflow-x:hidden;position:relative;isolation:isolate;background:radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--asal-accent),transparent 82%),transparent 24rem),radial-gradient(circle at 78% 4%,var(--asal-orbit-core),transparent 28rem),radial-gradient(circle at 6% 18%,var(--asal-orbit-haze),transparent 30rem),linear-gradient(145deg,var(--asal-bg-top) 0%,var(--asal-orbit-field) 46%,var(--asal-bg-bottom) 100%);color:var(--asal-text)}.asal-shell:before,.asal-shell:after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none}.asal-shell:before{background:linear-gradient(115deg,transparent 0 18%,var(--asal-orbit-line) 18.15% 18.28%,transparent 18.45% 100%),linear-gradient(64deg,transparent 0 35%,var(--asal-orbit-line) 35.1% 35.22%,transparent 35.38% 100%),radial-gradient(ellipse at 72% 12%,transparent 0 22%,var(--asal-orbit-line) 22.2% 22.6%,transparent 22.85% 100%),radial-gradient(ellipse at 20% 68%,transparent 0 18%,var(--asal-orbit-line) 18.15% 18.45%,transparent 18.7% 100%);opacity:var(--asal-lattice-opacity)}.asal-shell:after{z-index:0;background-image:repeating-linear-gradient(0deg,rgb(255 255 255 / 3%) 0 1px,transparent 1px 5px),radial-gradient(circle at 50% 50%,transparent 0 56%,rgb(0 0 0 / 18%) 100%);mix-blend-mode:overlay;opacity:var(--asal-grain-opacity)}a{color:var(--asal-accent-strong);text-decoration-thickness:.08em;text-underline-offset:.22em;transition:color .16s ease,opacity .16s ease,border-color .16s ease,transform .16s ease}a:hover{color:color-mix(in srgb,var(--asal-accent-strong),white 18%)}button,input,select,textarea{font:inherit;min-width:0}input,select,textarea{width:100%;border:1px solid var(--asal-border);border-radius:var(--asal-radius);background:var(--asal-surface-raised);color:var(--asal-text);padding:.78rem .85rem}textarea{min-height:7rem;resize:vertical}button,.button-link,.asal-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid transparent;border-radius:var(--asal-radius);background:var(--asal-accent);color:#fffaf2;cursor:pointer;padding:var(--asal-touch-pill);text-decoration:none;min-height:var(--asal-touch-min);max-width:100%;font-weight:600;box-shadow:0 12px 26px color-mix(in srgb,var(--asal-accent),transparent 72%);transition:transform var(--asal-motion-fast),box-shadow var(--asal-motion-fast),background var(--asal-motion-fast),border-color var(--asal-motion-fast),filter var(--asal-motion-fast)}button.secondary,.button-link.secondary,.asal-btn--secondary{background:var(--asal-surface-raised);border-color:var(--asal-border);color:var(--asal-text);box-shadow:none}button.danger,.button-link.danger,.asal-btn--danger{background:var(--asal-danger);border-color:color-mix(in srgb,var(--asal-danger),transparent 30%);color:var(--asal-on-accent);box-shadow:var(--asal-shadow-danger)}button.ghost,.button-link.ghost,.asal-btn--ghost{background:transparent;border-color:var(--asal-border-soft);color:var(--asal-text-muted);box-shadow:none;padding:calc(.78rem - 1px) calc(1rem - 1px)}button:hover,.button-link:hover,.asal-btn:hover{transform:translateY(-1px);box-shadow:0 16px 34px color-mix(in srgb,var(--asal-accent),transparent 66%);filter:brightness(1.04)}button.secondary:hover,.button-link.secondary:hover,.asal-btn--secondary:hover{border-color:var(--asal-accent);box-shadow:var(--asal-shadow-soft);filter:none}button.ghost:hover,.button-link.ghost:hover,.asal-btn--ghost:hover{border-color:var(--asal-accent);color:var(--asal-text);background:var(--asal-glass);filter:none}.row>button,.row>.button-link,.row>.asal-btn{flex:0 0 auto}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--asal-focus),transparent 68%);outline-offset:2px}main{width:100%;max-width:1160px;margin:0 auto;padding:1.1rem clamp(1rem,3vw,2.25rem) 4.5rem;position:relative;z-index:1}h1,h2,h3,p{margin-block-start:0}h1{font-size:clamp(2rem,7vw,4.25rem);line-height:1.1;letter-spacing:-.04em;text-wrap:balance}h2{font-size:clamp(1.35rem,3vw,2rem);line-height:1.22;text-wrap:balance}p,li{line-height:1.8}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;border:1px solid var(--asal-border);border-radius:calc(var(--asal-radius) + 6px);background:linear-gradient(135deg,rgb(255 255 255 / 8%),transparent),var(--asal-surface);box-shadow:var(--asal-shadow);padding:.85rem 1rem;min-width:0;backdrop-filter:blur(18px);position:sticky;top:.75rem;z-index:10}.topbar .nav{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity;padding-block:.2rem}.topbar .nav::-webkit-scrollbar{height:4px}.topbar .nav a{scroll-snap-align:start;flex:0 0 auto}.brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--asal-text);font-weight:750;text-decoration:none;min-width:0}.brand-mark{display:inline-grid;width:2.25rem;height:2.25rem;place-items:center;border-radius:999px;background:radial-gradient(circle at 35% 24%,#fff6d9,var(--asal-accent) 42%,var(--asal-accent-strong) 100%);color:#1f1407;box-shadow:0 0 0 1px var(--asal-border),0 12px 28px color-mix(in srgb,var(--asal-accent),transparent 68%)}.nav a{border:1px solid transparent;border-radius:999px;color:var(--asal-text-muted);padding:.28rem .55rem;text-decoration:none}.nav a:hover{border-color:var(--asal-border-soft);background:var(--asal-glass);color:var(--asal-text)}.nav a.is-active,.nav a[aria-current=page]{border-color:var(--asal-nav-active-border);background:var(--asal-nav-active-bg);color:var(--asal-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--asal-accent),transparent 72%)}.nav{display:flex;flex-wrap:wrap;gap:.75rem;color:var(--asal-text-muted);min-width:0}.stack{display:grid;gap:1rem;min-width:0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--asal-space-4);min-width:0}.card{background:radial-gradient(circle at 82% 0%,var(--asal-accent-soft),transparent 12rem),linear-gradient(145deg,rgb(255 255 255 / 7%),transparent 42%),var(--asal-surface);border:1px solid var(--asal-border);border-radius:var(--asal-radius);box-shadow:var(--asal-shadow);padding:clamp(1rem,3vw,1.5rem);min-width:0;position:relative;overflow:hidden}.card>*{position:relative;z-index:1}.card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--asal-accent),transparent 78%),transparent) top / 100% 1px no-repeat,linear-gradient(180deg,var(--asal-glass),transparent 52%)}.panel{border:1px solid var(--asal-border);border-radius:var(--asal-radius);background:linear-gradient(145deg,rgb(255 255 255 / 6%),transparent 48%),var(--asal-surface-raised);padding:1rem;min-width:0;box-shadow:var(--asal-shadow-soft)}.hero-card{border-radius:var(--asal-radius-xl);padding:clamp(1.35rem,5vw,3rem);min-height:clamp(20rem,36vw,29rem);justify-content:end;background:radial-gradient(circle at 13% 18%,color-mix(in srgb,var(--asal-accent),transparent 64%),transparent 10rem),radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--asal-focus),transparent 76%),transparent 18rem),linear-gradient(145deg,color-mix(in srgb,var(--asal-surface-raised),transparent 6%),color-mix(in srgb,var(--asal-surface),transparent 1%))}.premium-web-shell{position:relative}.premium-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(17rem,.75fr);align-items:end;gap:clamp(1.2rem,4vw,2.5rem)}.hero-copy{display:grid;gap:1rem;max-width:72ch}.hero-orbit-card{display:grid;gap:1rem;align-self:stretch;border:1px solid var(--asal-border);border-radius:calc(var(--asal-radius-xl) - 6px);background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--asal-accent),transparent 64%),transparent 11rem),linear-gradient(160deg,var(--asal-glass),transparent 58%),color-mix(in srgb,var(--asal-surface-raised),transparent 5%);box-shadow:inset 0 1px #ffffff1a,var(--asal-shadow-soft);padding:clamp(1rem,3vw,1.5rem);overflow:hidden}.hero-orbit-card:before{content:"";display:block;width:min(100%,13rem);aspect-ratio:1;justify-self:center;border:1px solid var(--asal-border);border-radius:999px;background:radial-gradient(circle,color-mix(in srgb,var(--asal-accent-strong),transparent 72%) 0 13%,transparent 13.5% 100%),radial-gradient(circle,transparent 0 37%,var(--asal-border-soft) 37.3% 38.2%,transparent 38.6% 100%),conic-gradient(from 18deg,transparent 0 11%,var(--asal-border-soft) 11.2% 11.8%,transparent 12% 49%,var(--asal-border-soft) 49.2% 49.9%,transparent 50.2% 100%),radial-gradient(circle,var(--asal-accent-soft),transparent 70%);box-shadow:0 0 50px color-mix(in srgb,var(--asal-accent),transparent 78%)}.hero-orbit-card strong{color:var(--asal-accent-strong);font-size:clamp(1.4rem,4vw,2.35rem);line-height:1.12}.luxury-route-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:.75rem}.route-pill{display:grid;gap:.35rem;border:1px solid var(--asal-border-soft);border-radius:calc(var(--asal-radius) + 2px);background:linear-gradient(145deg,var(--asal-glass),transparent 52%),color-mix(in srgb,var(--asal-surface-raised),transparent 4%);padding:.9rem}.route-pill span{color:var(--asal-text-muted);font-size:.88rem}.route-pill strong{color:var(--asal-text);line-height:1.35}.showcase-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:.8rem}.showcase-strip .panel{min-height:8.5rem}.product-note{border-inline-start:3px solid var(--asal-accent);border-radius:calc(var(--asal-radius) - 4px);background:color-mix(in srgb,var(--asal-accent-soft),transparent 24%);padding:.85rem 1rem}.hero-card:after{content:"۞";position:absolute;inset-block-start:clamp(1rem,4vw,2rem);inset-inline-start:clamp(1rem,4vw,2rem);z-index:0;color:color-mix(in srgb,var(--asal-accent),transparent 86%);font-family:Times New Roman,serif;font-size:clamp(2.25rem,7vw,4.5rem);line-height:1;opacity:.55;transform:rotate(-6deg);pointer-events:none}.hero-card .muted{max-width:68ch;font-size:clamp(1rem,1.7vw,1.18rem)}.section-card{border-radius:calc(var(--asal-radius) + 8px)}.module-card,.metric-card,.insight-panel{transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease}.module-card:hover,.metric-card:hover,.insight-panel:hover{border-color:var(--asal-accent);box-shadow:0 24px 56px color-mix(in srgb,var(--asal-accent),transparent 84%);transform:translateY(-2px)}.metric-card strong,.metric-card h2,.metric-card h3,.panel strong{color:var(--asal-accent-strong);font-size:clamp(1.45rem,4vw,2.5rem);line-height:1.15}.fine-print-card{background:linear-gradient(145deg,color-mix(in srgb,var(--asal-surface-muted),transparent 6%),transparent),var(--asal-surface-muted)}.reader-surface{border-radius:var(--asal-radius-xl);padding:clamp(1.1rem,3.5vw,2rem)}.compass-shell{display:grid;place-items:center;width:min(100%,19rem);aspect-ratio:1;margin-inline:auto;border:1px solid var(--asal-border);border-radius:999px;background:radial-gradient(circle at 50% 50%,transparent 0 31%,var(--asal-border-soft) 31.3% 31.8%,transparent 32.1% 100%),conic-gradient(from 0deg,transparent 0 8%,var(--asal-border-soft) 8.2% 8.5%,transparent 8.7% 25%,var(--asal-border-soft) 25.2% 25.5%,transparent 25.7% 100%),radial-gradient(circle,var(--asal-surface-raised),transparent 72%);box-shadow:inset 0 0 34px color-mix(in srgb,var(--asal-accent),transparent 84%),var(--asal-shadow-soft)}.compass-needle{width:.42rem;height:43%;border-radius:999px;background:linear-gradient(180deg,var(--asal-accent-strong),var(--asal-accent));transform-origin:50% 88%;transform:rotate(var(--qibla-bearing, 0deg));box-shadow:0 0 26px color-mix(in srgb,var(--asal-accent),transparent 42%)}.muted{color:var(--asal-text-muted)}.eyebrow{color:var(--asal-accent-strong);font-weight:750;letter-spacing:.04em}.row{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;min-width:0}.row>input,.row>select,.row>textarea{flex:1 1 12rem}.spread{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-width:0}pre{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}progress{width:100%}.badge{display:inline-flex;align-items:center;border:1px solid var(--asal-border);border-radius:999px;background:var(--asal-surface-raised);color:var(--asal-text-muted);padding:.28rem .65rem;font-size:.88rem}.badge.success{color:var(--asal-success);border-color:color-mix(in srgb,var(--asal-success),transparent 70%)}.badge.warning{color:var(--asal-accent-strong)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@font-face{font-family:Asal Quran;src:url(/assets/asal/quran_amiri_quran.ttf) format("truetype");font-display:swap}.quran-text{font-family:Asal Quran,serif;line-height:2.2;font-size:1.5rem}@media(max-width:680px){.spread{align-items:flex-start;flex-direction:column}.topbar{gap:.65rem}.hero-card{min-height:auto}.premium-hero{grid-template-columns:1fr}}@media(prefers-reduced-motion:no-preference){.asal-shell:before{animation:asal-orbital-drift var(--asal-dur-orbital) ease-in-out infinite alternate;transform-origin:50% 20%}}@keyframes asal-orbital-drift{0%{transform:translateZ(0) rotate(0) scale(1)}to{transform:translate3d(0,-.6rem,0) rotate(.35deg) scale(1.015)}}
