@font-face{font-family:Cairo;src:url("./assets/Cairo.ttf") format("truetype");font-style:normal;font-weight:200 1000;font-display:swap}
:root{color-scheme:dark;--bg:#06110d;--white:#f4f4f0;--muted:#96b4a5;--green:#28c76f}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--white);font-family:Cairo,Tahoma,Arial,sans-serif;display:flex;flex-direction:column;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 48% 48% at 50% 40%,#168a4c55,transparent 85%),radial-gradient(ellipse 65% 55% at 5% 100%,#0c543c55,transparent 80%),radial-gradient(ellipse 45% 55% at 100% 0%,#115c3b33,transparent 85%);z-index:0}

.masthead,footer{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:40px 60px;gap:24px}
.masthead{direction:ltr}.masthead>span:first-child{font-size:13px;letter-spacing:4px;font-weight:600}.edition{direction:rtl;font-size:12px;color:var(--muted)}
main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 22px 82px;min-height:510px}
.identity{position:relative;display:grid;place-items:center;width:210px;height:210px;margin-bottom:34px}
.logo{position:relative;width:210px;height:210px;object-fit:contain;animation:breathe 3.8s ease-in-out infinite;will-change:transform,opacity}
.halo{position:absolute;width:138px;height:138px;border-radius:50%;background:#28c76f22;box-shadow:0 0 95px 35px #28c76f30;animation:halo 3.8s ease-in-out infinite}
.message{width:100%;max-width:900px}.eyebrow{color:var(--green);font-size:14px;margin:0 0 19px;font-weight:400}
.phrases{display:grid;align-items:center;min-height:100px}
.phrase{grid-area:1/1;margin:0;opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .8s ease;font-size:clamp(30px,4.3vw,58px);line-height:1.65;font-weight:600;text-wrap:balance;pointer-events:none}
.phrase.active{opacity:1;transform:translateY(0)}.phrase span{color:#7d8580;font-weight:300}
.separator{width:34px;height:2px;background:var(--green);box-shadow:0 0 16px #28c76f66;margin:30px auto 0}
footer{font-size:11px;color:#777e7a;direction:ltr;padding-top:20px;padding-bottom:max(36px,env(safe-area-inset-bottom))}footer>span:first-child{letter-spacing:2px}footer>span:last-child{direction:rtl}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes breathe{0%,100%{transform:scale(.97);opacity:.73}50%{transform:scale(1.035);opacity:1}}
@keyframes halo{0%,100%{transform:scale(.88);opacity:.3}50%{transform:scale(1.1);opacity:.9}}
@media(max-width:600px){.masthead{padding:30px 30px}.masthead>span:first-child{font-size:11px;letter-spacing:3px}.edition{font-size:11px}main{padding:30px 24px 65px;min-height:450px}.identity{width:176px;height:176px;margin-bottom:30px}.logo{width:176px;height:176px}.halo{width:110px;height:110px}.eyebrow{font-size:12px;margin-bottom:14px}.phrases{min-height:112px}.phrase{font-size:clamp(28px,7.5vw,40px)}footer{padding:18px 30px 30px;font-size:10px}}
@media(max-height:650px) and (min-width:601px){main{min-height:340px;padding:12px 24px 30px}.identity,.logo{width:140px;height:140px}.identity{margin-bottom:12px}.masthead,footer{padding-top:22px;padding-bottom:22px}}
@media(prefers-reduced-motion:reduce){.logo,.halo{animation:none;will-change:auto}.logo{opacity:1}.halo{opacity:.5}.phrase{transition:none;transform:none}}
/* Full readable fallback; JavaScript enhances it with whole-character typing. */
.statement{margin:0;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:clamp(18px,5.5vw,52px);font-weight:600;line-height:1.65;direction:ltr}
.statement-line{display:block;width:max-content;max-width:100%;white-space:nowrap;color:var(--white);clip-path:none}
.statement-green{color:var(--green)}
@keyframes write-first{0%,2%{opacity:1;clip-path:inset(0 100% 0 0)}24%,92%{opacity:1;clip-path:inset(0)}98%,100%{opacity:0;clip-path:inset(0)}}
@keyframes write-second{0%,28%{opacity:1;clip-path:inset(0 100% 0 0)}43%,92%{opacity:1;clip-path:inset(0)}98%,100%{opacity:0;clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.statement-line{animation:none;clip-path:none;opacity:1}}
.has-typing .statement-line{position:relative;animation:none;clip-path:none;opacity:1;transition:opacity .5s ease}
.type-reserve{visibility:hidden;display:block}
.type-live{position:absolute;inset:0;text-align:left;white-space:pre;color:inherit}
.type-caret{display:none;width:2px;height:.78em;margin-left:.09em;background:var(--green);vertical-align:-.02em;opacity:.7}
.is-typing .type-caret{display:inline-block;animation:type-blink 1.15s step-end infinite}
.typing-reset .statement-line{opacity:0}
@keyframes type-blink{0%,65%,100%{opacity:.7}66%,99%{opacity:0}}
@media(prefers-reduced-motion:reduce){.has-typing .statement-line{transition:none}.type-caret{display:none!important}}
.sound-toggle{font:500 11px Cairo,sans-serif;letter-spacing:.5px;color:var(--muted);border:1px solid #28c76f30;background:#0b201766;border-radius:999px;padding:9px 15px;min-height:40px;cursor:pointer}
.sound-toggle[hidden]{display:none}
.sound-toggle[aria-pressed="true"]{color:var(--green);border-color:#28c76f70}
.sound-toggle:focus-visible{outline:2px solid var(--green);outline-offset:4px}

/* Minimal layout: logo and statement only, without page chrome. */
main{min-height:100svh;padding-top:max(40px,env(safe-area-inset-top));padding-bottom:max(40px,env(safe-area-inset-bottom))}

/* Premium English typography: restrained first line, emphatic second. */
.statement{font-family:Cairo,Arial,sans-serif;font-weight:500;letter-spacing:-.025em;line-height:1.5;gap:10px}
.statement-green{font-weight:700;letter-spacing:-.035em}

/* Comparison v17: more hierarchy, a closer logo and a quieter first line. */
.identity,.logo{width:241.5px;height:241.5px}
.identity{margin-bottom:30px}
.statement{gap:4px}
.statement-line{font-size:clamp(18px,4.4vw,42px);color:#c7d2cc;letter-spacing:-.02em}
.statement-green{font-size:clamp(29px,7vw,66px);color:var(--green);font-weight:700;letter-spacing:-.035em}
@media(max-width:600px){.identity,.logo{width:202.4px;height:202.4px}.identity{margin-bottom:26px}}
@media(max-height:650px) and (min-width:601px){.identity,.logo{width:161px;height:161px}.identity{margin-bottom:22px}}