.tools-landing-page{background:var(--cream);overflow-x:hidden}
.tools-landing-page .site-header .header-shell{color:#fff}
.tools-landing-page .site-header.is-scrolled .header-shell{color:var(--ink)}
.tools-landing-page .mobile-menu .is-active{background:var(--cream);color:var(--green-700)}
.branded-theme-toggle{display:grid;place-items:center}
.branded-theme-toggle .theme-moon{display:none}
html[data-theme="dark"] .branded-theme-toggle .theme-sun{display:none}
html[data-theme="dark"] .branded-theme-toggle .theme-moon{display:block}

.tools-hero{position:relative;min-height:850px;padding:154px 0 90px;overflow:hidden;background:linear-gradient(116deg,#031f1b 0%,#07352f 55%,#051c19 100%)}
.tools-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:220px;background:linear-gradient(to top,rgba(1,19,16,.68),transparent);pointer-events:none}
.tools-hero-light{position:absolute;border-radius:50%;filter:blur(78px);pointer-events:none}
.tools-hero-light-one{width:610px;height:610px;inset-inline-end:2%;top:1%;background:rgba(31,130,98,.2)}
.tools-hero-light-two{width:390px;height:390px;inset-inline-end:34%;top:18%;background:rgba(229,167,42,.11)}
.tools-orbit{position:absolute;border:1px solid rgba(229,167,42,.13);border-radius:50%;pointer-events:none}
.tools-orbit-one{width:720px;height:720px;inset-inline-end:-230px;top:60px}
.tools-orbit-two{width:470px;height:470px;inset-inline-end:-105px;top:185px}
.tools-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:52px;min-height:610px}
.tools-hero-copy{max-width:680px;z-index:5}
.tools-hero-copy h1{margin:28px 0 25px;font-family:var(--display);font-size:clamp(58px,6.5vw,96px);font-weight:500;letter-spacing:-.052em;line-height:.98}
.tools-hero-copy h1 em{color:var(--gold-light);font-style:normal}
.tools-hero-lead{max-width:620px;color:rgba(255,255,255,.66);font-size:18px;line-height:1.78}
.tools-promises{display:flex;gap:44px;margin-top:46px;padding-top:26px;border-top:1px solid rgba(255,255,255,.11)}
.tools-promises div{display:flex;flex-direction:column;gap:4px}
.tools-promises strong{font-family:var(--display);font-size:31px;font-weight:500;color:#fff}
.tools-promises span{color:rgba(255,255,255,.44);font-size:11px;text-transform:uppercase;letter-spacing:.12em}

.tools-hero-visual{position:relative;z-index:4;min-height:580px}
.utility-stage{position:relative;width:min(100%,610px);height:580px;margin-inline:auto;perspective:1200px}
.utility-halo{position:absolute;inset:70px 10px 50px;border-radius:48%;background:radial-gradient(circle,rgba(229,167,42,.17),rgba(23,101,78,.13) 38%,transparent 72%);filter:blur(22px)}
.utility-feature{position:absolute;display:flex;flex-direction:column;color:#fff;text-decoration:none}
.utility-feature-main{inset:60px 65px 60px 55px;padding:42px 42px 36px;border:1px solid rgba(255,255,255,.13);border-radius:34px;background:linear-gradient(145deg,rgba(18,83,70,.95),rgba(4,35,30,.96));box-shadow:0 42px 100px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.08);overflow:hidden;transform:rotateY(-3deg) rotateX(1deg);transition:transform .45s ease,border-color .3s ease}
.utility-feature-main:hover{transform:rotateY(0) rotateX(0) translateY(-7px);border-color:rgba(229,167,42,.48)}
.utility-feature-main::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:19px 19px;mask-image:linear-gradient(90deg,transparent 32%,black);opacity:.28}
.utility-icon{position:relative;width:64px;height:64px;display:grid;place-items:center;border-radius:20px;color:var(--gold-light);background:rgba(229,167,42,.12);border:1px solid rgba(229,167,42,.26)}
.utility-icon .ui-icon{width:28px;height:28px}
.utility-status{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:28px;color:rgba(255,255,255,.6);font-size:10px;text-transform:uppercase;letter-spacing:.15em}
.utility-status i{width:7px;height:7px;border-radius:50%;background:#4dd19d;box-shadow:0 0 0 5px rgba(77,209,157,.08)}
.utility-feature-main>strong{position:relative;margin-top:15px;font-family:var(--display);font-size:47px;font-weight:500;letter-spacing:-.04em}
.utility-feature-main p{position:relative;max-width:340px;margin:10px 0 0;color:rgba(255,255,255,.57);line-height:1.7;font-size:14px}
.feature-link{position:relative;display:flex;align-items:center;gap:10px;margin-top:auto;color:var(--gold-light);font-weight:700;font-size:13px}
.feature-link .ui-icon{width:16px;height:16px}
.mushaf-preview{position:absolute;right:-12px;bottom:-10px;width:230px;height:185px;opacity:.7;transform:rotate(-8deg)}
html[dir="rtl"] .mushaf-preview{right:auto;left:-12px;transform:rotate(8deg)}
.mushaf-preview i{position:absolute;top:28px;width:105px;height:142px;border-radius:9px 18px 12px 9px;background:linear-gradient(90deg,#efe2bd,#fff9e8);box-shadow:0 12px 28px rgba(0,0,0,.2)}
.mushaf-preview i:first-child{left:8px;transform:skewY(-4deg)}
.mushaf-preview i:nth-child(2){right:8px;transform:skewY(4deg)}
.mushaf-preview b{position:absolute;left:50%;top:22px;width:9px;height:152px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.15),rgba(0,0,0,.3));border-radius:9px}
.utility-mini{position:absolute;width:158px;min-height:138px;padding:19px;border:1px solid rgba(255,255,255,.13);border-radius:24px;color:#fff;background:rgba(8,42,36,.9);box-shadow:0 24px 55px rgba(0,0,0,.28);backdrop-filter:blur(16px);transition:transform .3s ease,border-color .3s ease}
.utility-mini:hover{transform:translateY(-6px);border-color:rgba(229,167,42,.5)}
.utility-mini>span{width:39px;height:39px;display:grid;place-items:center;border-radius:13px;color:var(--gold-light);background:rgba(229,167,42,.12)}
.utility-mini>span .ui-icon{width:19px;height:19px}
.utility-mini strong{display:block;margin-top:14px;font-family:var(--display);font-size:19px;font-weight:500}
.utility-mini small{display:block;margin-top:3px;color:rgba(255,255,255,.42);font-size:10px}
.utility-mini-one{left:0;top:22px;transform:rotate(-5deg)}
.utility-mini-two{right:0;top:124px;transform:rotate(5deg)}
.utility-mini-three{left:7px;bottom:10px;transform:rotate(4deg)}
html[dir="rtl"] .utility-mini-one{left:auto;right:0;transform:rotate(5deg)}
html[dir="rtl"] .utility-mini-two{right:auto;left:0;transform:rotate(-5deg)}
html[dir="rtl"] .utility-mini-three{left:auto;right:7px;transform:rotate(-4deg)}

.tools-catalog{position:relative;padding:118px 0 125px;overflow:hidden}
.tools-catalog::before{content:"";position:absolute;width:500px;height:500px;left:-310px;top:30px;border:1px solid rgba(32,69,68,.07);border-radius:50%;box-shadow:0 0 0 42px rgba(32,69,68,.025),0 0 0 84px rgba(32,69,68,.018)}
html[dir="rtl"] .tools-catalog::before{left:auto;right:-310px}
.tools-section-intro h2 em{color:var(--green-700)}
.premium-tools-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row;gap:20px;align-items:stretch}
.premium-tool-card-featured{grid-column:span 8}
.premium-tool-card-qibla{grid-column:span 4}
.premium-tool-card-prayer,.premium-tool-card-date{grid-column:span 6}
.premium-tool-card{position:relative;min-height:390px;padding:30px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:28px;background:color-mix(in srgb,var(--paper) 97%,transparent);box-shadow:0 20px 55px rgba(15,45,38,.07);overflow:hidden;transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease}
.premium-tool-card:hover{transform:translateY(-8px);border-color:rgba(229,167,42,.55);box-shadow:0 30px 75px rgba(15,45,38,.13)}
.premium-tool-card::after{content:"";position:absolute;width:170px;height:170px;border:1px solid rgba(32,69,68,.08);border-radius:50%;right:-88px;bottom:-88px;box-shadow:0 0 0 24px rgba(32,69,68,.025)}
html[dir="rtl"] .premium-tool-card::after{right:auto;left:-88px}
.premium-tool-card-featured{min-height:440px;color:#fff;background:linear-gradient(137deg,#0b4038,#062d28);border-color:rgba(255,255,255,.08);box-shadow:0 30px 75px rgba(5,46,38,.2)}
.premium-tool-card-featured::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:20px 20px;mask-image:linear-gradient(90deg,transparent 30%,black);opacity:.22}
.premium-tool-card-featured::after{border-color:rgba(229,167,42,.13);box-shadow:0 0 0 32px rgba(229,167,42,.035)}
.premium-card-top{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between}
.premium-card-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:17px;color:var(--green-700);background:var(--cream);border:1px solid var(--line)}
.premium-card-icon .ui-icon{width:24px;height:24px}
.premium-tool-card-featured .premium-card-icon{color:var(--gold-light);background:rgba(229,167,42,.11);border-color:rgba(229,167,42,.22)}
.premium-card-number{color:var(--ink-soft);font-size:12px;letter-spacing:.08em}
.premium-tool-card-featured .premium-card-number{color:rgba(255,255,255,.35)}
.premium-card-copy{position:relative;z-index:2;display:flex;flex:1;flex-direction:column;max-width:680px;margin-top:42px}
.premium-tool-card-featured .premium-card-copy{max-width:56%;min-width:0}
.premium-tool-card-qibla .premium-card-copy,.premium-tool-card-prayer .premium-card-copy,.premium-tool-card-date .premium-card-copy{max-width:none}
.premium-card-label{color:var(--green-600);font-size:10px;font-weight:750;letter-spacing:.16em;text-transform:uppercase}
.premium-tool-card-featured .premium-card-label{color:var(--gold-light)}
.premium-card-copy h3{margin:10px 0 13px;font-family:var(--display);font-size:34px;font-weight:500;letter-spacing:-.035em}
.premium-tool-card-featured .premium-card-copy h3{font-size:49px}
.premium-card-copy p{max-width:560px;margin:0;color:var(--ink-soft);line-height:1.75;font-size:14px}
.premium-tool-card-featured .premium-card-copy p{color:rgba(255,255,255,.56)}
.premium-card-action{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:28px;font-weight:700;font-size:13px}
.card-arrow{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;transition:transform .25s ease,background .25s ease}
.card-arrow .ui-icon{width:16px;height:16px}
.premium-tool-card:hover .card-arrow{transform:translateX(4px);background:var(--cream)}
html[dir="rtl"] .premium-tool-card:hover .card-arrow{transform:translateX(-4px)}
.premium-tool-card-featured .card-arrow{border-color:rgba(255,255,255,.17);background:rgba(255,255,255,.05)}
.premium-tool-card-featured:hover .card-arrow{background:var(--gold);color:#173126}
.featured-book-art{position:absolute;right:20px;bottom:22px;width:310px;height:220px;opacity:.78;transform:rotate(-5deg)}
html[dir="rtl"] .featured-book-art{right:auto;left:20px;transform:rotate(5deg)}
.featured-book-art span{position:absolute;top:38px;width:145px;height:166px;border-radius:13px 26px 16px 11px;background:linear-gradient(90deg,#e8d29d,#fff4d2);box-shadow:0 18px 34px rgba(0,0,0,.2),inset 0 0 0 5px rgba(138,92,22,.16)}
.featured-book-art span:first-child{left:8px;transform:skewY(-5deg)}
.featured-book-art span:nth-child(2){right:8px;transform:skewY(5deg)}
.featured-book-art i{position:absolute;left:50%;top:31px;width:11px;height:181px;transform:translateX(-50%);border-radius:10px;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.17),rgba(0,0,0,.38))}

.privacy-strip{margin-top:24px;padding:24px 27px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:19px;border:1px solid var(--line);border-radius:22px;background:color-mix(in srgb,var(--paper) 91%,transparent)}
.privacy-strip-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;color:var(--green-700);background:var(--cream)}
.privacy-strip-icon .ui-icon{width:22px;height:22px}
.privacy-strip strong{display:block;font-family:var(--display);font-size:20px;font-weight:500}
.privacy-strip p{margin:4px 0 0;color:var(--ink-soft);font-size:13px}
.privacy-strip-badge{padding:9px 13px;border:1px solid rgba(229,167,42,.36);border-radius:999px;color:var(--green-700);font-size:10px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}

html[data-theme="dark"] .tools-catalog{background:#102321}
html[data-theme="dark"] .premium-tool-card:not(.premium-tool-card-featured),html[data-theme="dark"] .privacy-strip{background:#162d2a}
html[data-theme="dark"] .premium-card-icon,html[data-theme="dark"] .privacy-strip-icon{background:#0e211f}
html[data-theme="dark"] .tools-section-intro h2 em{color:var(--gold-light)}
html[data-theme="dark"] .privacy-strip-badge{color:var(--gold-light)}

@media(max-width:1120px){
  .tools-hero-grid{grid-template-columns:1fr .9fr;gap:20px}
  .utility-stage{transform:scale(.9);transform-origin:center}
  .desktop-nav{gap:18px}.desktop-nav a{font-size:12px}.header-cta{display:none}
  .premium-tool-card-featured .premium-card-copy{max-width:55%}
}
@media(max-width:900px){
  .tools-hero{min-height:auto;padding:135px 0 90px}
  .tools-hero-grid{grid-template-columns:1fr}
  .tools-hero-copy{max-width:720px}
  .tools-hero-visual{min-height:560px}
  .utility-stage{transform:none}
  .premium-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .premium-tool-card-featured{grid-column:1/-1}
  .premium-tool-card-qibla{grid-column:1/-1;min-height:330px}
  .premium-tool-card-prayer,.premium-tool-card-date{grid-column:auto}
  .premium-tool-card-featured .premium-card-copy{max-width:58%}
  .featured-book-art{opacity:.5}
}
@media(max-width:760px){
  .desktop-nav{display:none}.menu-button{display:block}.header-cta{display:none}
  .header-shell{min-height:62px;padding:6px 8px 6px 11px;border-radius:17px}
  .tools-hero{padding-top:118px}
  .tools-hero-copy h1{font-size:clamp(48px,14vw,68px)}
  .tools-promises{gap:20px;justify-content:space-between}
  .tools-promises strong{font-size:25px}.tools-promises span{font-size:9px}
  .tools-hero-visual{min-height:500px}
  .utility-stage{height:500px}
  .utility-feature-main{inset:45px 25px 45px;padding:32px}
  .utility-feature-main>strong{font-size:40px}
  .utility-mini{width:132px;min-height:118px;padding:15px}
  .utility-mini-one{left:-2px}.utility-mini-two{right:-2px}.utility-mini-three{left:4px}
  .mushaf-preview{width:190px;height:160px;opacity:.46}
  .premium-tools-grid{grid-template-columns:1fr}
  .premium-tool-card-featured,.premium-tool-card-qibla,.premium-tool-card-prayer,.premium-tool-card-date{grid-column:auto}
  .premium-tool-card-qibla{min-height:390px}
  .premium-tool-card-featured{min-height:500px}
  .premium-tool-card-featured .premium-card-copy{max-width:100%;padding-bottom:160px}
  .featured-book-art{right:50%;transform:translateX(50%) rotate(-3deg);bottom:8px}
  html[dir="rtl"] .featured-book-art{left:50%;right:auto;transform:translateX(-50%) rotate(3deg)}
  .privacy-strip{grid-template-columns:auto 1fr}.privacy-strip-badge{grid-column:1/-1;justify-self:start;margin-inline-start:67px}
}
@media(max-width:520px){
  .site-header{padding:8px 10px}.header-shell{border-radius:15px}
  .official-logo-horizontal{width:118px!important}
  .language-button{padding-inline:10px}.icon-button,.language-button,.menu-button{height:39px}.icon-button,.menu-button{width:39px}
  .tools-hero{padding:104px 0 74px}
  .tools-hero-copy h1{margin-top:23px;font-size:47px}
  .tools-hero-lead{font-size:16px}
  .hero-actions{display:grid}.hero-actions .button{width:100%}
  .tools-promises{margin-top:34px;padding-top:20px}.tools-promises div{max-width:31%}
  .tools-hero-visual{min-height:440px;margin-top:12px}
  .utility-stage{height:440px}
  .utility-feature-main{inset:42px 8px 38px;padding:27px 24px;border-radius:27px}
  .utility-feature-main p{font-size:12px;max-width:270px}.utility-feature-main>strong{font-size:35px}.utility-icon{width:53px;height:53px}
  .utility-mini{display:none}.mushaf-preview{right:-38px;bottom:-15px}
  html[dir="rtl"] .mushaf-preview{right:auto;left:-38px}
  .tools-catalog{padding:82px 0 90px}
  .section-intro{display:block;margin-bottom:36px}.section-intro>p{margin:22px 0 0}
  .premium-tool-card{min-height:350px;padding:24px;border-radius:23px}
  .premium-tool-card-featured{min-height:475px}
  .premium-tool-card-featured .premium-card-copy h3{font-size:39px}
  .premium-card-copy h3{font-size:30px}
  .featured-book-art{width:260px;height:190px}.featured-book-art span{width:121px;height:143px}.featured-book-art i{height:156px}
  .privacy-strip{padding:20px;grid-template-columns:1fr}.privacy-strip-icon{margin-bottom:2px}.privacy-strip-badge{grid-column:auto;margin:4px 0 0}
  .footer-top{grid-template-columns:1fr;gap:34px}.footer-bottom{display:block}.footer-bottom div{margin-top:14px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.premium-tool-card,.utility-feature-main,.utility-mini,.card-arrow{transition:none!important}}
