[data-page=about] .header{position:sticky;top:0;z-index:30;background:var(--bg)}
.about-page{padding:64px 0 72px;line-height:1.85}
.about-hero{max-width:820px;margin:0 auto 80px;text-align:center}
.about-eyebrow{margin:0 0 12px;color:var(--muted);font-size:13px;font-weight:500;line-height:1.6}
.about-hero h1{margin:0 0 24px;font-size:clamp(40px,5.3vw,68px);font-weight:700;line-height:1.35;letter-spacing:-.025em}
.about-hero h1>span{color:var(--muted)}
.about-intro{max-width:660px;margin:0 auto;color:var(--muted);font-size:19px;line-height:1.9}
.about-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:22px;margin-top:30px}
.about-primary{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 22px;border-radius:9px;background:var(--button);color:var(--button-text);font-size:15px;font-weight:500;text-decoration:none;line-height:1.5}
.about-secondary{display:inline-flex;align-items:center;gap:12px;color:var(--text);font-size:14px;text-decoration:none;line-height:1.7}
.about-secondary:hover{text-decoration:underline;text-underline-offset:4px}
.about-page :is(a):focus-visible{outline:2px solid var(--focus);outline-offset:5px}
.about-story{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;padding:54px 0;border-top:1px solid var(--border)}
.about-page h2{margin:0 0 16px;font-size:30px;font-weight:600;line-height:1.55}
.about-prose p,.about-name p:not(.about-eyebrow),.about-founder p:not(.about-eyebrow),.about-trust p{margin:0 0 16px;color:var(--muted);font-size:17px;line-height:1.9}
.about-name{display:grid;grid-template-columns:.65fr 1.35fr;align-items:center;gap:54px;padding:38px;border:1px solid var(--border);border-radius:16px;background:var(--soft);margin:12px 0 64px}
.about-brand{font-family:Inter,Arial,sans-serif;font-size:clamp(46px,6vw,78px);font-weight:800;letter-spacing:-.06em;direction:ltr;text-align:center}
.about-brand>span{color:var(--muted)}
.about-name-visual{display:grid;justify-items:center;gap:24px;min-width:0}
.about-pronunciation{display:grid;gap:6px;text-align:center;margin:0!important;line-height:1.5!important}
.about-pronunciation>span{color:var(--muted);font-size:13px}
.about-pronunciation>strong{font-size:29px;font-weight:500;letter-spacing:-.02em;color:var(--text)}
.about-arabic-name{font-family:Tajawal,Arial,sans-serif;font-size:1.15em;white-space:nowrap;unicode-bidi:isolate}
.about-letter-key{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0}
.about-letter-key>div{min-width:0;padding-top:12px;border-top:1px solid var(--border)}
.about-letter-key dt{font-size:24px;font-weight:600;line-height:1.3;margin-bottom:8px}
.about-letter-key dd{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.about-name p.about-pronunciation-note{font-size:14px;line-height:1.75}
.about-logo{display:grid;grid-template-columns:.65fr 1.35fr;align-items:center;gap:54px;margin-bottom:64px}
.about-logo p:not(.about-eyebrow){margin:0 0 16px;color:var(--muted);font-size:17px;line-height:1.9}
.about-logo-visual{display:grid;justify-items:center;gap:28px;margin:0;padding:36px 24px;min-width:0}
.about-logo-mark{width:136px;height:136px;font-size:136px;color:#000}
:root[data-theme=dark] .about-logo-mark{color:#fff}
.about-logo-visual figcaption{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;color:var(--text);font-size:22px;line-height:1.5}
.about-logo-visual figcaption>span:nth-child(2){color:var(--muted);font-size:16px}
.about-logo-visual .about-logo-caption{flex-basis:100%;font-size:12px;text-align:center;color:var(--muted)}
.about-name p:last-child,.about-founder p:last-child,.about-trust p:last-child{margin-bottom:0}
.about-principles{margin-bottom:64px}
.about-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.about-cards article{min-width:0;padding:26px;border:1px solid var(--border);border-radius:12px}
.about-number{display:block;color:var(--muted);font-size:12px;line-height:1;margin-bottom:24px}
.about-cards h3{font-size:21px;font-weight:500;line-height:1.6;margin:0 0 10px}
.about-cards p{font-size:16px;line-height:1.9;color:var(--muted);margin:0}
.about-founder{display:flex;align-items:center;justify-content:space-between;gap:42px;padding:46px 0;border-block:1px solid var(--border)}
.about-founder>div{max-width:700px}.about-founder>a{flex-shrink:0}
.about-trust{padding-top:50px}
.about-trust-intro{max-width:680px}
.about-trust h2{font-size:25px}
.about-resource-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:14px;margin-top:28px}
.about-resource-links a{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0;min-height:158px;padding:22px;border:1px solid var(--border);border-radius:12px;color:var(--text);text-decoration:none;transition:background 150ms,border-color 150ms}
.about-resource-links a:hover{background:var(--soft);border-color:var(--focus)}
.about-resource-links a:hover .about-resource-title{text-decoration:underline;text-underline-offset:4px}
.about-resource-icon{width:24px;height:24px;color:var(--muted)}
.about-resource-copy{display:grid;gap:6px;min-width:0;line-height:1.5}
.about-resource-title{font-size:15px;font-weight:500}
.about-resource-copy>span{font-size:12px;color:var(--muted)}
.about-resource-arrow{position:absolute;top:20px;right:20px;font-size:18px;line-height:1;color:var(--muted)}
@media(max-width:800px){.about-page{padding-top:42px}.about-hero{margin-bottom:46px}.about-intro{font-size:17px}.about-story,.about-name,.about-trust{grid-template-columns:1fr;gap:24px}.about-story{padding:34px 0}.about-name{padding:26px;margin-bottom:40px}.about-page h2{font-size:25px}.about-cards{grid-template-columns:1fr}.about-cards article{padding:22px}.about-cards p{font-size:16px}.about-founder{align-items:flex-start;flex-direction:column;gap:22px;padding:34px 0}.about-trust{padding-top:34px}.about-principles{margin-bottom:40px}}
@media(max-width:800px){.about-name-visual{gap:16px;padding-block:8px 20px}.about-letter-key{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.about-logo{grid-template-columns:1fr;gap:22px;margin-bottom:40px}.about-logo-visual{padding:12px 24px 22px}.about-logo-mark{width:112px;height:112px;font-size:112px}}
@media(max-width:900px){.about-resource-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.about-resource-links{grid-template-columns:1fr;gap:10px;margin-top:24px}.about-resource-links a{flex-direction:row;align-items:center;gap:16px;min-height:84px;padding:18px 42px 18px 18px}.about-resource-arrow{top:50%;right:18px;transform:translateY(-50%)}}
