/* TawheedTech 2026 cross-site theme and typography audit */
:root{
  --tt-ui-latin:"Segoe UI",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --tt-ui-arabic:"Segoe UI","Noto Sans Arabic",Tahoma,Arial,sans-serif;
  --tt-ui-urdu:"Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --tt-ui-bengali:"Nirmala UI","Noto Sans Bengali",Vrinda,sans-serif;
  --tt-ui-devanagari:"Nirmala UI","Noto Sans Devanagari",Mangal,sans-serif;
  --tt-ui-malayalam:"Nirmala UI","Noto Sans Malayalam",Kartika,sans-serif;
  --tt-display-latin:Georgia,"Times New Roman",serif;
  --tt-focus:0 0 0 4px rgba(229,167,42,.22);
}
html{font-synthesis:none;text-size-adjust:100%}
body{font-family:var(--tt-ui-latin);text-rendering:optimizeLegibility;transition:background-color .25s ease,color .25s ease}
html[lang="ar"] body{font-family:var(--tt-ui-arabic)}
html[lang="ur"] body{font-family:var(--tt-ui-urdu)}
html[lang="bn"] body{font-family:var(--tt-ui-bengali)}
html[lang="hi"] body{font-family:var(--tt-ui-devanagari)}
html[lang="ml"] body{font-family:var(--tt-ui-malayalam)}
html:is([lang="ar"],[lang="ur"],[lang="bn"],[lang="hi"],[lang="ml"]) :where(h1,h2,h3,h4,h5,h6,.tt-hero h1,.tt-card h2,.tt-card h3,.inner-hero-copy h1,.section-heading h2,.section-intro h2,.tool-hero h1){font-family:inherit!important;letter-spacing:0!important}
html[lang="ar"] :where(h1,h2,h3,h4,h5,h6){line-height:1.24}
html[lang="ar"] :where(p,li,label,a,button,input,select,textarea,small){line-height:1.72}
html[lang="ur"] :where(h1,h2,h3,h4,h5,h6){line-height:1.55}
html[lang="ur"] :where(p,li,label,a,button,input,select,textarea,small){line-height:1.95}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid #e5a72a;outline-offset:3px;box-shadow:var(--tt-focus)}
:where(button,.button,.tt-button,.tool-actions button,.language-button,.header-search,.icon-button,.menu-button){font-family:inherit}

/* Inner pages begin on a light surface, unlike the dark homepage hero. */
html[data-theme="light"] body.tt-page:not(.premium-page) .site-header .header-shell{
  color:var(--ink,#172827);
  border-color:rgba(32,69,68,.12);
  background:color-mix(in srgb,var(--paper,#fffcf7) 91%,transparent);
  box-shadow:0 13px 42px rgba(18,54,51,.10);
  backdrop-filter:blur(20px);
}
html[data-theme="light"] body.tt-page:not(.premium-page) .site-header .official-logo-horizontal{background-image:url('/assets/brand/logo-horizontal-light.png')}
html[data-theme="light"] body.tt-page:not(.premium-page) .site-header :is(.icon-button,.language-button,.menu-button,.header-search){border-color:rgba(32,69,68,.14);background:rgba(255,255,255,.45);color:var(--ink,#172827)}
html[data-theme="dark"] body.tt-page:not(.premium-page) .site-header .header-shell{
  color:#fff;
  border-color:rgba(255,255,255,.1);
  background:color-mix(in srgb,#0d2322 91%,transparent);
  box-shadow:0 14px 48px rgba(0,0,0,.28);
  backdrop-filter:blur(20px);
}
html[data-theme="dark"] body.tt-page:not(.premium-page) .site-header :is(.icon-button,.language-button,.menu-button,.header-search){border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.045);color:#fff}
body.tt-page:not(.premium-page) .site-header .desktop-nav a{font-weight:650}
body.tt-page:not(.premium-page) .tt-shell-main{padding-top:112px}

/* Shared inner-page typography and surfaces. */
.tt-hero>*{position:relative;z-index:2}
.tt-hero{isolation:isolate;border:1px solid rgba(255,255,255,.075);background:
  radial-gradient(circle at 86% 8%,rgba(229,167,42,.12),transparent 28%),
  linear-gradient(135deg,#0b302d 0%,#0d2927 56%,#081f1d 100%)}
.tt-hero h1{max-width:850px;font-family:var(--tt-display-latin);font-weight:600;letter-spacing:-.045em}
.tt-hero p{margin-bottom:0}
html[dir="rtl"] .tt-hero{text-align:right}
html[dir="rtl"] .tt-hero h1{line-height:1.22;max-width:930px}
.tt-card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background-color .22s ease}
a.tt-card:hover,a.tt-card:focus-visible{transform:translateY(-5px);border-color:rgba(229,167,42,.48);box-shadow:0 26px 62px rgba(29,61,58,.14)}
.tt-card h2,.tt-card h3{font-family:var(--tt-display-latin);font-weight:650;line-height:1.16}
.tt-list li:last-child{border-bottom:0}
html[data-theme="dark"] .tt-table th,html[data-theme="dark"] .tt-table td{border-color:rgba(255,255,255,.11)}
html[data-theme="dark"] .tt-table th{color:#f2ca72}
html[dir="rtl"] .tt-table th,html[dir="rtl"] .tt-table td{text-align:right}

/* Apps directory rebuild. */
.apps-directory-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:56px;align-items:center;min-height:470px;padding:64px 68px}
.apps-directory-hero:after{width:520px;height:520px;right:-210px;top:-235px}
html[dir="rtl"] .apps-directory-hero:after{right:auto;left:-210px}
.apps-directory-copy{min-width:0}
.apps-directory-copy h1{font-size:clamp(46px,5.5vw,76px);margin:20px 0 18px}
.apps-directory-copy p{font-size:17px;max-width:720px}
.apps-trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.apps-trust-row span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.045);color:rgba(255,255,255,.82);font-size:12px;font-weight:750}
.apps-trust-row span:before{content:"";width:7px;height:7px;border-radius:50%;background:#45c88d;box-shadow:0 0 0 4px rgba(69,200,141,.11)}
.apps-directory-visual{position:relative;min-height:320px;display:grid;place-items:center}
.apps-visual-orbit{position:absolute;width:290px;height:290px;border:1px solid rgba(229,167,42,.2);border-radius:50%;box-shadow:0 0 0 34px rgba(229,167,42,.025),0 0 0 68px rgba(229,167,42,.018)}
.apps-visual-mark{position:absolute;width:112px;height:112px;display:grid;place-items:center;border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 48px rgba(0,0,0,.25);backdrop-filter:blur(8px)}
.apps-visual-mark img{width:76px;height:76px;border-radius:21px;object-fit:cover}
.apps-visual-mark:nth-of-type(2){transform:translate(0,-112px)}
.apps-visual-mark:nth-of-type(3){transform:translate(112px,0)}
.apps-visual-mark:nth-of-type(4){transform:translate(0,112px)}
.apps-visual-mark:nth-of-type(5){transform:translate(-112px,0)}
.apps-directory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:28px 0 72px}
.app-directory-card{position:relative;min-height:480px;display:flex;flex-direction:column;overflow:hidden;padding:30px;border:1px solid rgba(32,69,68,.13);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(255,250,241,.78));box-shadow:0 18px 48px rgba(29,61,58,.09);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.app-directory-card:before{content:"";position:absolute;inset-inline-end:-85px;top:-90px;width:225px;height:225px;border-radius:50%;background:radial-gradient(circle,rgba(229,167,42,.12),transparent 67%);pointer-events:none}
.app-directory-card:hover,.app-directory-card:focus-visible{transform:translateY(-7px);border-color:rgba(229,167,42,.62);box-shadow:0 30px 70px rgba(24,62,58,.15)}
.app-directory-card-top{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.app-directory-card .app-icon{width:78px;height:78px;border-radius:22px;object-fit:cover;box-shadow:0 13px 28px rgba(10,45,41,.17)}
.app-availability{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(32,69,68,.11);border-radius:999px;background:rgba(255,255,255,.58);color:#48615d;font-size:11px;font-weight:800}
.app-availability i{width:7px;height:7px;border-radius:50%;background:#23b879;box-shadow:0 0 0 4px rgba(35,184,121,.11)}
.app-directory-card-copy{position:relative;z-index:1;margin-top:29px}
.app-purpose{display:block;margin-bottom:9px;color:#a56d08;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.app-directory-card h2{margin:0;font-family:var(--tt-display-latin);font-size:clamp(31px,3vw,42px);font-weight:650;line-height:1.05;color:#102f2d}
.app-directory-card-copy p{margin:12px 0 0;color:#647572;font-size:15px}
.app-feature-list{position:relative;z-index:1;display:grid;gap:0;margin:24px 0 26px;padding:0;list-style:none}
.app-feature-list li{position:relative;padding:11px 0;padding-inline-start:24px;border-bottom:1px solid rgba(32,69,68,.09);color:#3e5652;font-size:13px;line-height:1.55}
.app-feature-list li:before{content:"";position:absolute;inset-inline-start:2px;top:19px;width:7px;height:7px;border-radius:50%;background:#e5a72a;box-shadow:0 0 0 4px rgba(229,167,42,.11)}
.app-feature-list li:last-child{border-bottom:0}
.app-card-link{position:relative;z-index:1;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:19px;border-top:1px solid rgba(32,69,68,.11);color:#143f3b;font-weight:850}
.app-card-link .ui-icon{width:19px;height:19px;transition:transform .2s ease}
.app-directory-card:hover .app-card-link .ui-icon{transform:translateX(4px)}
html[dir="rtl"] .app-directory-card:hover .app-card-link .ui-icon{transform:translateX(-4px) rotate(180deg)}
html[dir="rtl"] .app-card-link .ui-icon{transform:rotate(180deg)}
html[data-theme="dark"] .app-directory-card{background:linear-gradient(145deg,rgba(17,48,45,.97),rgba(10,39,36,.94));border-color:rgba(255,255,255,.1);box-shadow:0 22px 56px rgba(0,0,0,.24)}
html[data-theme="dark"] .app-directory-card h2{color:#fff9ed}
html[data-theme="dark"] .app-directory-card-copy p,html[data-theme="dark"] .app-feature-list li{color:#b9cbc7}
html[data-theme="dark"] .app-feature-list li,html[data-theme="dark"] .app-card-link{border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .app-availability{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#d4e2de}
html[data-theme="dark"] .app-card-link{color:#f1d58f}
html[dir="rtl"] .apps-directory-copy,html[dir="rtl"] .app-directory-card{text-align:right}
html[dir="rtl"] .app-directory-card h2{font-family:inherit}

/* Consistent controls and dark surfaces across forms/tools without touching Qur'an glyphs. */
html[data-theme="dark"] :where(input,select,textarea){color-scheme:dark}
:where(.contact-form,.premium-support-form,.panel,.result-box,.tool-card,.tt-card,.app-directory-card){background-clip:padding-box}
.quran-page-text,.quran-arabic,[data-quran-text],[data-quran-arabic]{font-synthesis:none!important}

@media(max-width:900px){
  body.tt-page:not(.premium-page) .tt-shell-main{padding-top:92px}
  .apps-directory-hero{grid-template-columns:1fr;padding:46px 30px;gap:22px}
  .apps-directory-visual{min-height:245px}
  .apps-visual-orbit{width:220px;height:220px}
  .apps-visual-mark{width:82px;height:82px;border-radius:25px}
  .apps-visual-mark img{width:58px;height:58px;border-radius:17px}
  .apps-visual-mark:nth-of-type(2){transform:translate(0,-82px)}
  .apps-visual-mark:nth-of-type(3){transform:translate(82px,0)}
  .apps-visual-mark:nth-of-type(4){transform:translate(0,82px)}
  .apps-visual-mark:nth-of-type(5){transform:translate(-82px,0)}
  .apps-directory-grid{grid-template-columns:1fr}
  .app-directory-card{min-height:0}
}
@media(max-width:560px){
  .apps-directory-hero{padding:38px 22px;border-radius:25px}
  .apps-directory-copy h1{font-size:clamp(39px,12vw,54px)}
  .apps-directory-copy p{font-size:15px}
  .apps-directory-visual{min-height:210px}
  .apps-visual-orbit{width:184px;height:184px}
  .apps-visual-mark{width:70px;height:70px;border-radius:21px}
  .apps-visual-mark img{width:50px;height:50px;border-radius:15px}
  .apps-visual-mark:nth-of-type(2){transform:translate(0,-68px)}
  .apps-visual-mark:nth-of-type(3){transform:translate(68px,0)}
  .apps-visual-mark:nth-of-type(4){transform:translate(0,68px)}
  .apps-visual-mark:nth-of-type(5){transform:translate(-68px,0)}
  .app-directory-card{padding:24px;border-radius:23px}
  .app-directory-card .app-icon{width:67px;height:67px;border-radius:19px}
}
@media(prefers-reduced-motion:reduce){.app-directory-card,.app-card-link .ui-icon,body{transition:none!important}}