@font-face{font-family:Plex;src:url('./fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Cormorant;src:url('./fonts/CormorantGaramond-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Amiri;src:url('./fonts/Amiri-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
:root{color-scheme:dark;--ink:#291b29;--paper:#f3ebdd;--gold:#c8ac79;--muted:#d0c2c9;--rule:rgba(243,235,221,.22);--edge:clamp(24px,5.2vw,100px);--display:Cormorant,Georgia,serif}
*{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%;font-family:Plex,Arial,sans-serif}
body{margin:0;color:var(--paper);font-size:16px;line-height:1.7}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
a:focus-visible{outline:2px solid var(--paper);outline-offset:7px}
.skip{position:absolute;inset-block-start:12px;inset-inline-start:16px;padding:10px 18px;background:var(--paper);color:var(--ink);z-index:10;transform:translateY(-180%)}
.skip:focus{transform:none}
.launch{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100svh;overflow:clip}
.visual{position:absolute;inset-block:0;inset-inline-start:46%;inset-inline-end:0;z-index:-2;margin:0;overflow:hidden;background:#26151f}
.visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:51% center;animation:picture-in 1400ms cubic-bezier(.2,.7,.2,1) both}
.visual::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(41,27,41,.58) 11%,rgba(41,27,41,.08) 43%),linear-gradient(180deg,rgba(41,27,41,.3),transparent 35%,transparent 65%,rgba(41,27,41,.68))}
.header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px var(--edge);min-height:130px}
.brand{display:block;width:94px;height:94px;flex-shrink:0}
.brand img{display:block;width:100%;height:100%}
.header-right{display:flex;align-items:center;gap:32px}
.origin{font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 12px #291b29}
.language{display:inline-flex;align-items:center;justify-content:center;min-width:74px;min-height:46px;padding:4px 16px;border:1px solid rgba(243,235,221,.45);background:rgba(41,27,41,.65);font-size:15px;transition:background 180ms,border-color 180ms}
.language:hover{background:var(--ink);border-color:var(--paper)}
.main{flex:1;display:flex;align-items:center;padding:35px var(--edge) 64px;min-height:570px}
.copy{width:min(580px,52%);animation:reveal 700ms cubic-bezier(.2,.7,.2,1) both}
.eyebrow{display:flex;align-items:center;gap:15px;margin:0 0 28px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:'';width:38px;height:1px;background:var(--gold)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(76px,7.6vw,132px);line-height:.96;letter-spacing:-.035em;margin:0 0 32px;text-wrap:balance}
h1 span{display:block}
h1 .special{font-style:italic;color:#dec89e}
.intro{max-width:370px;color:var(--muted);margin:0 0 33px;line-height:1.9;font-size:16px;text-wrap:pretty}
.follow{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;min-height:58px;min-width:245px;padding:14px 23px;background:var(--paper);color:var(--ink);font-size:15px;border:1px solid var(--paper);transition:background 180ms,transform 180ms}
.follow svg{width:20px;height:20px;flex-shrink:0;transition:transform 180ms}
@media(hover:hover){.follow:hover{background:#fffaf0}.follow:hover svg{transform:translate(2px,-2px)}}
.follow:active{transform:scale(.985)}
.handle{margin:14px 0 0;font-size:12px;color:var(--muted);letter-spacing:.04em}
.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 var(--edge);padding:23px 0 26px;border-top:1px solid var(--rule);font-size:11px;color:var(--muted)}
.footer span{display:block}
.footer-name{letter-spacing:.17em;text-transform:uppercase}
.footer .domain{font-size:12px;letter-spacing:.04em}
html[lang=ar]{--display:Amiri,serif}
[dir=rtl] .origin,[dir=rtl] .eyebrow,[dir=rtl] .footer-name{letter-spacing:0}
[dir=rtl] h1{font-size:clamp(68px,6.5vw,110px);line-height:1.25;letter-spacing:0;margin-bottom:22px}
[dir=rtl] h1 .special{font-style:normal}
[dir=rtl] .copy{width:min(580px,52%)}
[dir=rtl] .visual::after{background:linear-gradient(270deg,var(--ink) 0%,rgba(41,27,41,.58) 11%,rgba(41,27,41,.08) 43%),linear-gradient(180deg,rgba(41,27,41,.3),transparent 35%,transparent 65%,rgba(41,27,41,.68))}
[dir=rtl] .intro{font-size:17px;line-height:1.95}
@keyframes reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes picture-in{from{opacity:.4;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@media(min-width:1700px){.main{padding-block:65px 100px}.copy{width:650px}.intro{font-size:18px;max-width:400px}}
@media(max-width:1000px){.origin{display:none}.visual{inset-inline-start:40%}.copy,[dir=rtl] .copy{width:62%}.main{min-height:630px}h1{font-size:clamp(74px,10vw,100px)}.visual::after{background:linear-gradient(90deg,var(--ink),rgba(41,27,41,.55) 42%,rgba(41,27,41,.2))}[dir=rtl] .visual::after{background:linear-gradient(270deg,var(--ink),rgba(41,27,41,.55) 42%,rgba(41,27,41,.2))}}
@media(max-width:600px){
 .launch{min-height:100svh;display:grid;grid-template-columns:1fr;grid-template-rows:auto 200px 1fr auto}
 .header{grid-row:1;padding:14px var(--edge);min-height:90px}.brand{width:70px;height:70px}.language{min-height:44px;min-width:70px}.header-right{gap:0}
 .visual{position:relative;grid-row:2;inset:auto;z-index:-1;margin:0 var(--edge);height:200px;overflow:hidden}
 .visual img{object-position:50% 47%;animation:none}
 .visual::after,[dir=rtl] .visual::after{background:linear-gradient(180deg,rgba(41,27,41,.05) 50%,rgba(41,27,41,.5))}
 .main{grid-row:3;padding:30px var(--edge) 38px;min-height:0;align-items:flex-start}.copy,[dir=rtl] .copy{width:100%;max-width:none}
 .eyebrow{margin-bottom:19px;font-size:10px;gap:12px}.eyebrow::before{width:26px}
 h1{font-size:clamp(53px,13vw,76px);line-height:1.02;letter-spacing:-.03em;margin-bottom:22px}
 h1 span{display:inline}h1 .special{display:inline}h1 span:last-child{display:block}
 .intro{font-size:14px;line-height:1.85;max-width:310px;margin-bottom:23px}.follow{min-height:54px;min-width:240px;font-size:14px}.handle{font-size:11px;margin-top:10px}
 .footer{grid-row:4;gap:12px;flex-wrap:wrap;padding-block:19px 22px;font-size:10px}.footer .domain{font-size:10px}.footer-name{letter-spacing:.1em}
 [dir=rtl] h1{font-size:clamp(48px,12vw,66px);line-height:1.35;margin-bottom:15px}[dir=rtl] .intro{font-size:15px;max-width:320px}[dir=rtl] .eyebrow{font-size:12px}
}
@media(max-width:360px){.visual{height:170px}.launch{grid-template-rows:auto 170px 1fr auto}.follow{width:100%;min-width:0}.footer{align-items:flex-start;flex-direction:column;gap:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.follow:active,.follow:hover svg{transform:none}}
@media(prefers-contrast:more){:root{--muted:#f3ebdd;--gold:#dec89e;--rule:#f3ebdd}.language{background:var(--ink);border-color:var(--paper)}}
@media(forced-colors:active){.follow,.language{border:1px solid ButtonText}.visual{display:none}.launch{display:flex}.eyebrow::before{background:CanvasText}}
@media(min-width:601px) and (max-height:800px){
 .header{min-height:100px;padding-block:12px}.brand{width:74px;height:74px}
 .main{min-height:0;padding-block:20px 32px}
 h1{font-size:clamp(62px,6vw,88px);margin-bottom:24px}
 .eyebrow{margin-bottom:20px}.intro{margin-bottom:24px}
 [dir=rtl] h1{font-size:clamp(60px,5.4vw,82px);line-height:1.2}
 [dir=rtl] h1 span{display:inline}[dir=rtl] h1 span:last-child{display:block}
}
[dir=rtl] .handle{text-align:right}
