/* Approved composition, adapted to ZikrSoul's midnight-blue frosted UI. */
:root{--body-bg:#030914;--primary:#edc774;--lavender:#dceaff;--body-text:#b7c5da;--button-border:#fae1a2;--dark:#0b1b30;--smoky-black:#06101f;--blue:#2c8fff;--glass-border:#6484ae55}
body{background:#030914;color:#f8faff;overflow-x:hidden}.container,.site-width{width:calc(100% - 96px);max-width:1240px;margin:0 auto}html{scroll-padding-top:100px}.navbar{background:transparent}.navbar-flex{min-height:90px}.navbar-flex-right{background:linear-gradient(125deg,#152539cf,#071322dd);border:1px solid #6d8eb638;border-radius:14px;backdrop-filter:blur(22px)}.single-nav-link:hover{color:#efcc80}.zs-wordmark{font-size:23px}.zs-eyebrow{font-size:11px;color:#aec5e7;letter-spacing:.14em}.primary-button-inner{background:linear-gradient(125deg,#fff1bd,#e4b452)!important;color:#0a1424!important;box-shadow:0 0 20px #edc77420}.primary-button-text{color:#081426!important}.primary-button{border-color:#f9dfa0!important}.banner-section{background:radial-gradient(ellipse at 95% 10%,#0b387b80,transparent 46%),#030914;padding-top:145px;min-height:855px}.banner-section:before{content:"";position:absolute;pointer-events:none;width:650px;height:400px;right:-210px;top:-60px;transform:rotate(-38deg);background:radial-gradient(ellipse,#1379ec65,transparent 63%);filter:blur(25px)}.banner-section:after{content:"";position:absolute;pointer-events:none;left:7%;top:160px;width:440px;height:280px;opacity:.16;background-image:linear-gradient(#7f9ab640 1px,transparent 1px),linear-gradient(90deg,#7f9ab640 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(#000,transparent)}.banner-content-wrap{margin-top:90px;max-width:530px;z-index:2}.banner-title{font-size:76px;line-height:1.06;letter-spacing:-3px;margin:20px 0 30px;background:none;color:#f7f9ff;-webkit-text-fill-color:currentColor}.banner-details{font-size:17px;line-height:1.7;max-width:450px;margin-bottom:40px}.banner-image-wrapper{height:710px;max-width:570px}.banner-hand{position:absolute;width:100%;bottom:0;right:0;filter:none}.banner-image-overlay{background:linear-gradient(transparent,#030914 85%);z-index:4;height:100px}.device{border:5px solid #141a22;box-shadow:0 0 0 1px #88949d,0 0 0 3px #252c35,0 20px 65px #0008;border-radius:38px;overflow:hidden;background:#000;aspect-ratio:1320/2868;flex:none}.device>img{width:100%;height:100%;display:block;object-fit:cover;transform:none;border-radius:32px}.hero-device{width:50%;max-width:50%;left:8.1%;top:0;position:absolute;z-index:3;inset:0 auto auto 8.1%;aspect-ratio:1320/2868}.landing-content{background:radial-gradient(ellipse at 0 28%,#0b2c5035,transparent 35%)}.pillars{display:flex;align-items:center;justify-content:space-between;padding:34px 0 18px;gap:20px}.pillars>span{display:flex;align-items:center;gap:15px;font-size:15px;color:#ced8e5}.pillars svg{width:24px;height:24px;color:#c4d4e8}svg{flex-shrink:0}.orbit-section{position:relative;min-height:650px;display:flex;align-items:center;justify-content:center;padding:65px 0}.orbit-aura{position:absolute;width:680px;height:320px;background:radial-gradient(ellipse,#1974bc58,transparent 65%);filter:blur(10px);pointer-events:none}.orbit-line{position:absolute;width:650px;height:250px;border:1px solid #7cb7ed75;border-radius:50%;transform:rotate(-2deg);box-shadow:0 0 24px #175d9a18;pointer-events:none}.orbit-device{width:265px;z-index:2}.orbit-label{position:absolute;z-index:3;font-size:18px;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:12px}.orbit-label>span{display:grid;place-items:center;background:linear-gradient(135deg,#234161bd,#0b1c32);border:1px solid #7599c455;box-shadow:inset 0 1px #b7d9fc22;width:58px;height:58px;border-radius:50%;color:#c4e1fa}.orbit-label svg{width:26px;height:26px}.label-read{left:18%;top:21%}.label-listen{right:18%;top:21%}.label-reflect{left:18%;bottom:22%}.label-remember{right:17%;bottom:22%}.connection{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding-top:15px;min-height:550px}.connection-visual{position:relative;display:flex;justify-content:center;height:515px;overflow:hidden}.connection-visual:after{content:"";position:absolute;inset:70% 0 0;background:linear-gradient(transparent,#030914);pointer-events:none}.connection-visual:before{content:"";position:absolute;inset:12% 0 0;background:radial-gradient(ellipse,#1376ca40,transparent 65%);filter:blur(20px)}.connection-device{width:275px;position:relative;align-self:flex-start}.landing-content h2{font-size:42px;line-height:1.18;letter-spacing:-1px;font-weight:400;margin:0 0 28px}.connection-copy ul{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:23px}.connection-copy li{display:flex;gap:16px;align-items:center;color:#d9e1ef;font-size:18px}.connection-copy li>span{width:30px;height:30px;border:1px solid #6787aa55;border-radius:50%;background:#163454;display:grid;place-items:center;color:#edcb80}.connection-copy li svg{width:16px;height:16px}.feature-section,.how-section,.offline-section{padding-top:55px}.three-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.glass{background:linear-gradient(125deg,#1b3046a8,#0a1727c9 65%);border:1px solid var(--glass-border);box-shadow:inset 0 1px #bcd6f51c,0 10px 40px #0002;backdrop-filter:blur(24px);border-radius:22px;overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.glass:hover{transform:translateY(-5px);border-color:#77abe8a6;box-shadow:0 15px 40px #06345b40,inset 0 1px #ffffff22}.feature-card{padding:24px 24px 0;min-height:345px}.card-heading{display:flex;align-items:flex-start;gap:16px}.icon-tile{display:grid;place-items:center;min-width:48px;height:48px;border-radius:12px;background:linear-gradient(140deg,#2d4d70a8,#172c43);border:1px solid #7296c257;box-shadow:inset 0 1px #c8e1ff22;color:#bcdcf8}.icon-tile svg{width:25px;height:25px}.landing-content h3{font-weight:500;font-size:18px;line-height:1.3;margin:3px 0 12px;letter-spacing:-.2px}.landing-content p{font-size:14px;line-height:1.6;color:#b6c5d8;margin:0}.app-snippet{height:185px;overflow:hidden;border:1px solid #6488ad55;border-bottom:0;border-radius:17px 17px 0 0;margin-top:28px;background:#030914}.app-snippet img{display:block;width:100%;height:auto}.reader-snippet img{margin-top:-22%}.hadith-snippet img{margin-top:-17%}.home-snippet img{margin-top:-26%}.step-card{padding:25px;min-height:225px}.step-title{display:flex;gap:15px;align-items:center;margin-bottom:16px}.step-title>span{display:grid;place-items:center;background:#20476e;color:#d5eaff;border:1px solid #719bc855;border-radius:9px;font-size:14px;width:34px;height:34px;flex:none}.step-title h3{margin:0}.step-card>p{padding-left:49px}.mini-row{display:flex;align-items:center;gap:12px;padding:13px;margin-top:24px;border:1px solid #7ba6d035;border-radius:13px;background:linear-gradient(120deg,#1b324a,#122338);font-size:13px;color:#d9e6f6}.mini-row>svg{width:22px;height:22px;color:#c1ddf5}.mini-row>svg:last-child{margin-left:auto;width:17px}.mini-row small{display:block;font-size:10px;color:#94abc2;margin-top:2px}.reminder{margin:28px 8px 0;padding:11px 16px;text-align:center;font-size:13px;color:#e1c78e;border:1px solid #b8a67566;background:#173044;border-radius:30px}.offline-section h2{font-size:36px}.offline-card{display:flex;align-items:flex-start;gap:15px;padding:24px;min-height:155px}.offline-card .icon-tile{min-width:42px;height:42px}.offline-card h3{font-size:17px}.download-section{position:relative;text-align:center;padding-top:135px;padding-bottom:105px;isolation:isolate}.download-section h2{font-size:44px;position:relative}.download-aura{position:absolute;z-index:-1;left:15%;right:15%;bottom:5%;height:230px;background:radial-gradient(ellipse,#0c63ac7a,transparent 68%);filter:blur(14px)}.store-buttons{display:flex;justify-content:center;gap:24px;margin-top:36px}.store-buttons>a{display:flex;align-items:center;gap:12px;border:1px solid #8aafd285;border-radius:13px;background:#0b1a2bb3;box-shadow:inset 0 1px #ffffff18;padding:12px 25px;color:#f8faff;font-size:22px;line-height:1.05;transition:transform .2s,border-color .2s}.store-buttons>a:hover{transform:translateY(-3px);border-color:#f0cf85}.store-buttons img{width:28px;max-height:35px}.store-buttons small{display:block;text-align:left;font-size:10px;margin-bottom:4px}.site-footer{display:flex;align-items:center;flex-wrap:wrap;gap:24px;padding-top:22px;padding-bottom:25px;border-top:1px solid #617fa529}.site-footer nav{margin-left:auto;display:flex;gap:32px;font-size:14px;color:#afbed3}.template-credit{width:100%;font-size:10px;color:#688099}.template-credit a{color:inherit}.reveal.in-view{animation:enter .8s ease both}@keyframes enter{from{opacity:.2;transform:translateY(22px)}to{opacity:1;transform:none}}.orbit-aura{animation:breathe 8s ease-in-out infinite alternate}@keyframes breathe{to{transform:scale(1.16);opacity:.7}}
@media(min-width:1450px){.banner-section{min-height:900px}.banner-image-wrapper{height:735px}}
@media(max-width:991px){.container,.site-width{width:calc(100% - 48px)}.banner-title{font-size:58px}.banner-content-wrap{max-width:48%;margin-top:65px}.banner-section{min-height:700px;padding-top:110px}.banner-image-wrapper{max-width:48%;height:560px}.hero-device{width:60%;max-width:60%;left:0;inset:0 auto auto 0;border-radius:26px}.device>img{border-radius:22px}.landing-content h2{font-size:34px}.three-grid{gap:14px}.feature-card,.step-card,.offline-card{padding:18px}.card-heading{gap:10px}.icon-tile{min-width:38px;height:38px}.landing-content h3{font-size:16px}.landing-content p{font-size:13px}.step-card>p{padding-left:0}.step-title{gap:10px}.connection{gap:30px}.connection-copy li{font-size:16px}.orbit-line{width:580px}.label-read,.label-reflect{left:10%}.label-listen{right:10%}.label-remember{right:8%}}
@media(max-width:767px){.container,.site-width{width:calc(100% - 40px)}.navbar-flex{min-height:76px}.navbar-flex-right{border:0;background:transparent;backdrop-filter:none}.banner-section{padding-top:110px;min-height:0}.banner-flex-wrap{display:flex;flex-direction:column;gap:50px}.banner-content-wrap{max-width:100%;margin-top:25px;text-align:left}.banner-title{font-size:54px;letter-spacing:-2px}.banner-details{font-size:16px;max-width:90%}.banner-image-wrapper{max-width:480px;height:615px;margin:0 auto;width:100%}.hero-device{width:55%;max-width:55%;left:10%;inset:0 auto auto 10%}.banner-image-overlay{height:85px}.pillars{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:25px 0}.pillars>span{font-size:12px;gap:10px}.pillars svg{width:22px}.orbit-section{min-height:560px;padding:40px 0}.orbit-device{width:210px;border-radius:30px}.orbit-line{width:90%;height:200px}.orbit-label{font-size:13px;gap:9px}.orbit-label>span{width:42px;height:42px}.orbit-label svg{width:21px}.label-read{left:0;top:15%}.label-listen{right:0;top:15%}.label-reflect{left:0;bottom:15%}.label-remember{right:-3%;bottom:15%}.connection{grid-template-columns:1fr;gap:25px;padding-top:10px}.connection-visual{height:390px}.connection-device{width:235px}.connection-copy{padding:10px 5px 20px}.connection-copy ul{gap:18px}.landing-content h2{font-size:32px}.three-grid{grid-template-columns:1fr;gap:18px}.feature-section,.how-section,.offline-section{padding-top:48px}.feature-card{padding:24px 24px 0;min-height:280px}.card-heading h3{font-size:19px}.landing-content p{font-size:14px}.app-snippet{height:180px}.reader-snippet img{margin-top:-18%}.hadith-snippet img{margin-top:-13%}.home-snippet img{margin-top:-23%}.step-card{padding:24px;min-height:215px}.step-card>p{padding-left:49px}.offline-card{min-height:130px;padding:24px}.offline-section h2{font-size:31px}.download-section{padding:85px 0 65px}.download-section h2{font-size:33px}.store-buttons{gap:12px}.store-buttons>a{font-size:18px;padding:12px 16px;gap:8px}.store-buttons img{width:23px}.site-footer{gap:18px}.site-footer nav{gap:18px;font-size:12px}.zs-wordmark{font-size:20px}.zs-wordmark img{width:28px;height:28px}}
@media(max-width:390px){.banner-title{font-size:48px}.banner-image-wrapper{height:530px}.orbit-device{width:180px}.orbit-section{min-height:480px}.orbit-label{font-size:11px}.orbit-label>span{width:36px;height:36px}.store-buttons>a{padding:11px;font-size:16px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* Brand badge removed at both paint and runtime, including delayed injection. */
.w-webflow-badge,a.w-webflow-badge{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;width:0!important;height:0!important;overflow:hidden!important}
@media(prefers-reduced-motion:no-preference){
.banner-section:before{animation:blue-light 9s ease-in-out infinite alternate}
.orbit-device{animation:phone-float 7s ease-in-out infinite}
.orbit-line{animation:orbit-turn 14s ease-in-out infinite alternate}
.orbit-line:after{content:"";position:absolute;top:18%;left:10%;width:7px;height:7px;border-radius:50%;background:#afd5ff;box-shadow:0 0 20px #5eb4ff}
.orbit-label>span{animation:icon-glow 5s ease-in-out infinite alternate}
.label-listen>span{animation-delay:-2s}.label-reflect>span{animation-delay:-1s}.label-remember>span{animation-delay:-3s}
.download-aura{animation:blue-light 8s ease-in-out infinite alternate}
}
@keyframes phone-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes blue-light{from{opacity:.5;filter:blur(22px)}to{opacity:1;filter:blur(34px)}}
@keyframes orbit-turn{from{transform:rotate(-9deg) scale(.98)}to{transform:rotate(9deg) scale(1.03)}}
@keyframes icon-glow{to{box-shadow:0 0 25px #2b89d83d,inset 0 1px #d3e9ff44;border-color:#8fc5fd88}}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}

/* Extended app introduction — authentic, screen-only captures. */
.product-tour{padding-top:70px}.tour-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px;padding:75px 0;min-height:730px}.tour-reverse .tour-copy{order:2}.tour-reverse .tour-visual{order:1}.tour-eyebrow{display:block;font-size:11px;letter-spacing:.2em;color:#8dbce9;margin-bottom:22px}.tour-copy h2{max-width:520px;font-size:48px!important;line-height:1.12!important;margin-bottom:25px}.tour-copy>p{font-size:17px;line-height:1.8;max-width:500px}.tour-copy ul{display:grid;gap:18px;padding:0;margin:30px 0;list-style:none}.tour-copy li{display:flex;gap:13px;font-size:15px;line-height:1.6;color:#c8d6e8}.tour-copy li>span{color:#ebca80}.tour-link{color:#f0d491;font-size:15px;display:inline-flex;gap:20px;align-items:center}.tour-link:hover{color:#fff0c4}.tour-visual{min-height:620px;position:relative;display:flex;justify-content:center;align-items:center;isolation:isolate}.tour-halo{position:absolute;z-index:-1;inset:12% -8%;background:radial-gradient(ellipse,#1766aa5e,transparent 67%);filter:blur(30px)}.tour-device{width:270px;position:relative;z-index:2;transform:rotate(-3deg)}.tour-reverse .tour-device{transform:rotate(3deg)}.tour-secondary{position:absolute;width:200px;right:-12px;bottom:4%;z-index:3;transform:rotate(8deg);border-radius:30px;box-shadow:0 0 0 1px #7894ad,0 25px 60px #000a}.tour-secondary>img{border-radius:24px}.tour-section:has(.tour-secondary) .tour-device{margin-right:100px}.tour-section+.tour-section{border-top:1px solid #739ac91b}
@media(max-width:991px){.tour-section{gap:32px;min-height:650px}.tour-copy h2{font-size:38px!important}.tour-device{width:230px}.tour-secondary{width:160px;right:-8px}.tour-section:has(.tour-secondary) .tour-device{margin-right:65px}.tour-visual{min-height:560px}}
@media(max-width:767px){.product-tour{padding-top:30px}.tour-section{grid-template-columns:1fr;padding:48px 0;gap:25px;min-height:0}.tour-reverse .tour-copy,.tour-reverse .tour-visual{order:initial}.tour-copy h2{font-size:35px!important}.tour-copy>p{font-size:15px}.tour-copy li{font-size:14px}.tour-visual{min-height:575px}.tour-device{width:245px}.tour-secondary{width:175px;right:0;bottom:0}.tour-section:has(.tour-secondary) .tour-device{margin-right:65px}}

/* Keep the hero screen opaque while its entrance settles into the hand. */
.hero-device{opacity:1!important;visibility:visible!important}
/* Leave room above the phone for its outer bezel/shadow before the bottom fade clips it. */
.connection-visual{padding-top:8px;box-sizing:border-box}

/* The phone rests in the hand after its one-time entrance. */
.hero-device,.hero-device>img{animation:none;filter:none}
.banner-image-wrapper>.banner-hand{height:auto;aspect-ratio:1104/1160;object-fit:contain}

/* Clip decorative paint at the viewport, without a scrolling wrapper around pins. */
html{overflow-x:clip}
body{overflow-x:clip}
@media(max-width:767px){
 .banner-section{overflow:clip;padding-top:100px}
 .banner-section:after{width:86%;left:7%;background-size:30px 30px}
 .banner-flex-wrap>*{min-width:0}
 .banner-content-wrap{width:100%;margin-inline:0}
 .banner-title{font-size:clamp(38px,8.5vw,54px);letter-spacing:-.04em;overflow-wrap:normal}
 .banner-details{max-width:100%}
 .zs-eyebrow{font-size:clamp(9px,2.3vw,11px);letter-spacing:.12em}
 /* Scale the complete hand/phone composition together, rather than using a fixed height. */
 .banner-image-wrapper{width:100%;max-width:480px;height:auto;aspect-ratio:570/710;padding-top:0}
 .hero-device{width:50%;max-width:50%;inset:0 auto auto 8.1%;border-width:3px;border-radius:clamp(16px,4.5vw,26px)}
 .hero-device>img{border-radius:clamp(12px,3.5vw,22px)}
 .banner-hand{max-width:100%}
 .banner-image-overlay{height:15%}
 .connection,.tour-section{grid-template-columns:minmax(0,1fr)}
 .connection-copy,.connection-visual,.tour-copy,.tour-visual{min-width:0}
 .tour-copy h2,.tour-copy p,.tour-link{overflow-wrap:anywhere}
 .label-remember{right:0}
}