@font-face{font-family:Alexandria;src:url(alexandria-arabic.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Alexandria;src:url(alexandria-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--sail:#D03A34;--white:#fff;--harbour:#3F0D0B;--ink:#2B1312;--mist:#6B4A48;--line:#EFD3D0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:Alexandria,system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;font-weight:350}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.hero{position:relative;overflow:hidden;background:var(--sail);color:var(--white);min-height:min(100svh,920px);padding:clamp(20px,3vw,36px) clamp(20px,5vw,72px) clamp(56px,8vw,104px);display:flex;flex-direction:column}
.bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{width:clamp(112px,13vw,168px);height:auto}
.langs{display:flex;gap:4px}
.langs button{font:inherit;font-size:.9375rem;font-weight:400;color:var(--white);background:none;border:1.5px solid transparent;border-radius:999px;padding:7px 15px;min-height:44px;cursor:pointer}
.langs button:hover{border-color:rgba(255,255,255,.55)}
.langs button[aria-pressed=true]{background:var(--white);color:var(--sail);font-weight:600}
.copy{position:relative;z-index:2;margin-block:auto 0;padding-block-start:clamp(48px,9vh,96px);max-width:min(54%,44rem)}
.status{margin:0 0 20px;font-weight:500}
.status::before{content:"";display:inline-block;width:.6em;height:.6em;margin-inline-end:.55em;border-radius:50%;background:var(--white)}
h1{margin:0;font-size:clamp(2.5rem,5.4vw,5rem);line-height:1.05;font-weight:750;letter-spacing:-.025em;text-wrap:balance}
.lead{margin:clamp(20px,2.5vw,32px) 0 0;max-width:30em;font-size:clamp(1.125rem,1.7vw,1.5rem);line-height:1.45;font-weight:300}
.ship{position:absolute;z-index:1;inset-inline-end:-13vw;inset-block-start:clamp(104px,15vh,150px);width:min(60vw,1040px);height:auto;pointer-events:none;animation:sail 1.5s cubic-bezier(.16,.84,.3,1) both}
@keyframes sail{from{opacity:0;transform:translate3d(-7%,2%,0) rotate(-1.5deg)}to{opacity:1;transform:none}}
[dir=rtl] .ship{animation-name:sail-rtl}
@keyframes sail-rtl{from{opacity:0;transform:translate3d(7%,2%,0) rotate(1.5deg)}to{opacity:1;transform:none}}
.steps{padding:clamp(64px,9vw,128px) clamp(20px,5vw,72px)}
h2{margin:0;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.12;font-weight:650;letter-spacing:-.015em}
.steps ol{list-style:none;counter-reset:s;margin:clamp(36px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
.steps li{counter-increment:s;border-block-start:3px solid var(--sail);padding-block-start:20px}
.steps li::before{content:counter(s);display:block;color:var(--sail);font-size:clamp(3rem,5.5vw,5rem);line-height:1;font-weight:750;margin-block-end:22px}
h3{margin:0 0 10px;font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.25;font-weight:600}
.steps p{margin:0;color:var(--mist);max-width:34em}
.notice{background:var(--harbour);color:var(--white);padding:clamp(40px,5vw,72px) clamp(20px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(28px,4vw,64px);align-items:baseline}
.notice h2{font-size:clamp(1.5rem,2.4vw,2.125rem)}
.notice p{margin:0;max-width:36em;font-weight:300}
footer{padding:24px clamp(20px,5vw,72px);color:var(--mist);font-size:.9375rem}
[dir=rtl] h1,[dir=rtl] h2{letter-spacing:0;line-height:1.28}
[dir=rtl] h1{font-size:clamp(2.25rem,5.4vw,4.75rem)}
[dir=rtl] .lead,[dir=rtl] .steps p,[dir=rtl] .notice p{line-height:1.75}
[dir=rtl] h3{line-height:1.45}
@media (max-width:860px){
  .hero{min-height:0;padding-block-end:0}
  .copy{max-width:none;margin-block:0;padding-block-start:44px}
  .ship{position:relative;inset:auto;width:112%;max-width:none;margin-block-start:28px;margin-inline-start:6%}
  .steps ol,.notice{grid-template-columns:1fr}
  .langs button{padding:7px 11px}
}
@media (prefers-reduced-motion:reduce){.ship{animation:none}}
