/* Go Ijaza — pre-launch site
   One stylesheet for both languages. Layout uses logical properties,
   so the Arabic (RTL) and English (LTR) pages share every rule. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Sora';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/sora-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Sora';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/sora-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Sora';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/sora-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Sora';font-weight:800;font-style:normal;font-display:swap;src:url('fonts/sora-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Tajawal';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/tajawal-arabic-400-normal.woff2') format('woff2');unicode-range:U+0020,U+00A0,U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Tajawal';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/tajawal-arabic-700-normal.woff2') format('woff2');unicode-range:U+0020,U+00A0,U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'El Messiri';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/el-messiri-arabic-700-normal.woff2') format('woff2');unicode-range:U+0020,U+00A0,U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}

/* ---------- Brand tokens ---------- */
:root{
  --teal-900:#06302E;
  --teal-800:#0A3F3C;
  --teal-700:#0E4D4A;
  --teal-500:#1C6E69;
  --teal-200:#BFD8D4;
  --gold-500:#C9973E;
  --gold-300:#E8C27A;
  --coral-500:#E2704E;
  --sand-050:#FBF9F4;
  --sand-100:#F3EEE2;
  --sand-200:#E6DCC2;
  --ink-900:#1B2422;
  --ink-600:#55605B;

  --font-body:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-head:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --page:1200px;
  --gutter:clamp(20px,5vw,56px);
}
:root:lang(ar){
  --font-body:'Tajawal','Sora',system-ui,'Segoe UI',Tahoma,sans-serif;
  --font-head:'El Messiri','Sora',system-ui,'Segoe UI',Tahoma,sans-serif;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--sand-050);color:var(--ink-900);
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
:lang(ar) body{font-size:17.5px;line-height:1.8}
h1,h2,h3,p{margin:0}
a{color:inherit}
svg{direction:ltr;display:block}
[lang="en"]{font-family:'Sora',system-ui,sans-serif}
[lang="ar"]{font-family:'Tajawal','Sora',system-ui,sans-serif}
[hidden]{display:none !important}

:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px;border-radius:6px}
.on-light :focus-visible{outline-color:var(--teal-700)}

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.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}
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:20;background:var(--gold-500);color:var(--ink-900);padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Header ---------- */
.top{position:absolute;inset-inline:0;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand svg{width:32px;height:32px;flex:none}
.brand span{font-family:'Sora',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.01em;line-height:1}
.top-end{display:flex;align-items:center;gap:10px}
.status{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--gold-300);
  padding:7px 14px;border:1px solid rgba(232,194,122,.35);border-radius:100px;line-height:1.3;
}
.status i{width:7px;height:7px;border-radius:50%;background:var(--gold-300);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.lang{
  font-size:13.5px;font-weight:600;color:#fff;text-decoration:none;
  padding:7px 14px;border:1px solid rgba(255,255,255,.22);border-radius:100px;line-height:1.3;
  transition:background .15s,border-color .15s;
}
.lang:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,var(--teal-800) 0%,var(--teal-900) 70%,#052725 100%);
}
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  align-items:center;gap:clamp(24px,5vw,72px);
  padding-block:clamp(120px,15vh,168px) clamp(64px,10vh,112px);
}
.hero h1{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(32px,4.1vw,54px);line-height:1.1;letter-spacing:-.035em;
  text-wrap:balance;
}
:lang(ar) .hero h1{line-height:1.35;letter-spacing:0;font-size:clamp(36px,5vw,66px)}
.hero h1 span{display:block}
.hero .lede{
  margin-top:22px;max-width:33em;color:var(--teal-200);
  font-size:17px;line-height:1.7;
}
:lang(ar) .hero .lede{font-size:19px;line-height:1.85}

/* ---------- Sign-up form ---------- */
.signup-wrap{margin-top:34px;max-width:480px}
.signup{
  display:flex;gap:8px;padding:6px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  transition:border-color .15s,background .15s;
}
.signup:focus-within{border-color:var(--gold-300);background:rgba(255,255,255,.1)}
.signup input[type=email]{
  flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;
  padding:12px 18px;font:inherit;font-size:15.5px;direction:ltr;text-align:start;
}
.signup input[type=email]:placeholder-shown{direction:inherit}
.signup input::placeholder{color:#8FADA8;opacity:1}
.signup button{
  flex:none;border:0;border-radius:100px;cursor:pointer;white-space:nowrap;
  background:var(--gold-500);color:var(--ink-900);
  padding:12px 24px;font:inherit;font-weight:700;font-size:15px;
  transition:background .15s,transform .1s;
}
.signup button:hover{background:var(--gold-300)}
.signup button:active{transform:translateY(1px)}
.signup button[disabled]{opacity:.6;cursor:progress}
.signup-note{margin-top:12px;font-size:13.5px;color:#8FB3AD;padding-inline-start:20px}
.signup-msg{font-weight:700;font-size:16px;line-height:1.6}
.signup-msg.ok{
  display:flex;align-items:center;gap:12px;color:#fff;
  padding:16px 20px;border-radius:16px;
  background:rgba(232,194,122,.12);border:1px solid rgba(232,194,122,.4);
}
.signup-msg.ok:focus{outline:none}
.signup-msg.ok svg{width:22px;height:22px;flex:none;color:var(--gold-300)}
.signup-msg.err{margin-top:12px;color:#FFB59E;font-size:14.5px;padding-inline-start:20px}

/* ---------- The window (hero art) ---------- */
.window{position:relative;justify-self:end;width:min(100%,380px)}
.window::before{
  content:"";position:absolute;inset:-22%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,194,122,.2),rgba(232,194,122,0) 72%);
}
.window svg{position:relative;z-index:1;width:100%;height:auto;overflow:visible}
.window .sun{animation:sunrise 2.2s cubic-bezier(.2,.7,.2,1) both}
.window .glow{animation:glow 2.2s ease-out both}
.window .cloud-a{animation:drift 2.6s ease-out both}
.window .cloud-b{animation:drift 2.6s ease-out both reverse}
@keyframes sunrise{from{transform:translateY(46px)}to{transform:none}}
@keyframes glow{from{opacity:0}to{opacity:1}}
@keyframes drift{from{transform:translateX(-14px)}to{transform:none}}

/* ---------- Sections on light ground ---------- */
.band{padding-block:clamp(64px,9vw,112px)}
.band h2{
  font-family:var(--font-head);font-weight:700;color:var(--teal-900);
  font-size:clamp(26px,3.2vw,38px);line-height:1.15;letter-spacing:-.025em;text-wrap:balance;
}
:lang(ar) .band h2{line-height:1.4;letter-spacing:0;font-size:clamp(28px,3.4vw,40px)}
.band .intro{margin-top:14px;color:var(--ink-600);max-width:28em}

/* What's coming */
.coming .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,88px);align-items:start}
.coming ul{list-style:none;margin:0;padding:0}
.coming li{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;align-items:start;
  padding-block:26px;border-top:1px solid var(--sand-200);
}
.coming li:first-child{border-top:0;padding-top:4px}
.coming li:last-child{padding-bottom:0}
.coming .ic{
  width:52px;height:52px;border-radius:14px;background:var(--sand-100);
  display:grid;place-items:center;color:var(--teal-700);
}
.coming .ic svg{width:26px;height:26px}
.coming h3{font-family:var(--font-body);font-size:18px;font-weight:700;color:var(--ink-900);line-height:1.4}
:lang(ar) .coming h3{font-size:20px}
.coming li p{margin-top:4px;color:var(--ink-600);font-size:15.5px}
:lang(ar) .coming li p{font-size:17px}

/* Destinations */
.places{background:var(--sand-100)}
.places ul{
  list-style:none;margin:clamp(32px,5vw,56px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3.4vw,44px);
}
.places li{text-align:center}
.places svg{width:100%;height:auto;max-width:220px;margin-inline:auto}
.places span{display:block;margin-top:16px;font-weight:700;color:var(--teal-900);font-size:16px}
:lang(ar) .places span{font-size:18px}

/* ---------- Closing call ---------- */
.closing{background:var(--teal-900);color:#fff;text-align:center;padding-block:clamp(64px,9vw,104px)}
.closing h2{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(26px,3.4vw,40px);line-height:1.15;letter-spacing:-.025em;text-wrap:balance;
}
:lang(ar) .closing h2{line-height:1.4;letter-spacing:0;font-size:clamp(28px,3.6vw,42px)}
.closing p.sub{margin-top:12px;color:var(--teal-200)}
.closing .signup-wrap{margin-inline:auto}
.closing .signup-note,.closing .signup-msg.err{padding-inline-start:0}
.closing .signup-msg.ok{justify-content:center}

/* ---------- Footer ---------- */
.foot{background:var(--teal-900);color:#8FB3AD;border-top:1px solid rgba(255,255,255,.1)}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-block:28px}
.foot .brand svg{width:26px;height:26px}
.foot .brand span{font-size:17px}
.foot small{font-size:13px}
.socials{display:flex;gap:10px}
.socials a{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;transition:background .15s;
}
.socials a:hover{background:rgba(255,255,255,.18)}
.socials svg{width:17px;height:17px}

/* ---------- Not-found page ---------- */
.lost{min-height:100vh;display:grid;place-items:center;background:var(--teal-900);color:#fff;text-align:center;padding:40px var(--gutter)}
.lost .brand{margin-bottom:36px}
.lost h1{font-family:'El Messiri','Sora',sans-serif;font-size:clamp(26px,4vw,38px);line-height:1.4}
.lost p{margin-top:8px;color:var(--teal-200)}
.lost .links{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.lost .links a{padding:11px 22px;border-radius:100px;background:var(--gold-500);color:var(--ink-900);font-weight:700;text-decoration:none}
.lost .links a:hover{background:var(--gold-300)}

/* ---------- Small screens ---------- */
@media (max-width:860px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);padding-block:112px 64px;gap:48px}
  .window{width:min(74%,300px);justify-self:center}
  .coming .wrap{grid-template-columns:minmax(0,1fr)}
  .coming li:first-child{padding-top:0}
  .places ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
}
@media (max-width:480px){
  .top .wrap{padding-block:16px}
  .brand span{font-size:18px}
  .status,.lang{padding:6px 11px;font-size:12.5px}
  .signup{flex-direction:column;border-radius:20px;padding:8px}
  .signup input[type=email]{padding:12px 14px;text-align:center}
  .signup button{width:100%;padding-block:13px}
  .signup-note,.signup-msg.err{padding-inline-start:0;text-align:center}
  .coming li{grid-template-columns:44px minmax(0,1fr);gap:16px}
  .coming .ic{width:44px;height:44px;border-radius:12px}
  .coming .ic svg{width:22px;height:22px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}