@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  color-scheme:light dark;
  --paper:#F7F4EF; --paper-raised:#FFFDF9;
  --ink:#14161A; --ink-soft:#4A4F57;
  --accent:#00627F;       /* AA-safe on paper: use for text and links */
  --accent-mark:#00AEEF;  /* process cyan: marks and rules only */
  --magenta-mark:#EC008C; /* process magenta: marks only */
  --rule:#DCD6CC;
  --measure:66ch;
  --step--1:clamp(.82rem,.79rem + .15vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.12rem);
  --step-1:clamp(1.25rem,1.16rem + .45vw,1.5rem);
  --step-2:clamp(1.6rem,1.42rem + .9vw,2.1rem);
  --step-3:clamp(2.1rem,1.7rem + 2vw,3.3rem);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#101215; --paper-raised:#171A1F;
    --ink:#F2EFE9; --ink-soft:#AEB4BD;
    --accent:#5CC8E8; --rule:#2A2F36;
  }
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
  font-size:var(--step-0);line-height:1.65;-webkit-text-size-adjust:100%}
html:lang(en) body{font-family:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif}
h1,h2,h3{line-height:1.2;text-wrap:balance;font-weight:600;margin:0 0 .5em}
p{margin:0 0 1em;max-width:var(--measure)}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px}
.wrap{width:min(72rem,100% - 2.5rem);margin-inline:auto}
.section{padding-block:clamp(2.5rem,6vw,5rem);border-block-start:1px solid var(--rule)}
.skip-link{position:absolute;inset-inline-start:-9999px}
.skip-link:focus{inset-inline-start:1rem;inset-block-start:1rem;position:fixed;
  background:var(--paper-raised);padding:.6rem 1rem;z-index:10}
.site-header{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  width:min(72rem,100% - 2.5rem);margin-inline:auto;padding-block:1.1rem}
.wordmark{font-size:var(--step-1);font-weight:600;letter-spacing:.02em;
  color:var(--ink);text-decoration:none}
.wordmark small{display:block;font-size:var(--step--1);font-weight:400;
  color:var(--ink-soft);letter-spacing:.14em;text-transform:uppercase}
.pill{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--step--1);
  padding:.25rem .7rem;border:1px solid var(--rule);border-radius:100px;color:var(--ink-soft)}
.pill--dev::before{content:'';inline-size:.5rem;block-size:.5rem;border-radius:50%;
  background:var(--magenta-mark)}
.lang-toggle{margin-inline-start:auto;font-size:var(--step--1);
  border:1px solid var(--rule);border-radius:100px;padding:.3rem .9rem;text-decoration:none}
.site-footer{border-block-start:1px solid var(--rule);padding-block:2rem;
  color:var(--ink-soft);font-size:var(--step--1)}
.site-footer p{margin:0 0 .3rem}

.hero{padding-block:clamp(2.5rem,7vw,6rem)}
.eyebrow{font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.9rem}
.hero h1{font-size:var(--step-3);max-width:18ch}
.lede{font-size:var(--step-1);color:var(--ink-soft);max-width:46ch}
.cta{display:inline-block;margin-block-start:.5rem;background:var(--ink);color:var(--paper);
  text-decoration:none;padding:.75rem 1.6rem;border-radius:2px;font-weight:600}
.cta:hover{background:var(--accent)}
.colourbar{margin-block-start:clamp(2rem,5vw,3.5rem);block-size:10px;
  background:linear-gradient(to right,var(--accent-mark) 0 25%,var(--magenta-mark) 25% 50%,#FFF200 50% 75%,var(--ink) 75% 100%)}
#notice h2{font-size:var(--step-1)}

.statement{font-size:var(--step-1);max-width:38ch;border-inline-start:3px solid var(--accent-mark);
  padding-inline-start:1.2rem}
.marklist{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,4vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.marklist > li{position:relative;padding-block-start:2rem}
.marklist > li::before{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:14px;block-size:14px;
  background:
    linear-gradient(var(--accent-mark),var(--accent-mark)) 50% 0/1px 100% no-repeat,
    linear-gradient(var(--accent-mark),var(--accent-mark)) 0 50%/100% 1px no-repeat}
.marklist h3{font-size:var(--step-0);margin-bottom:.35rem}
.marklist p{color:var(--ink-soft);font-size:var(--step--1);margin:0}

.cards{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.card{background:var(--paper-raised);border:1px solid var(--rule);padding:1.4rem}
.card__art{inline-size:80px;block-size:48px;color:var(--ink-soft);display:block;
  margin-block-end:1rem}
.card h3{font-size:var(--step-0);margin-bottom:.4rem}
.card p{color:var(--ink-soft);font-size:var(--step--1);margin:0}

.tech{position:relative}
.pill--status{margin-block-end:.8rem}
.pill--live{border-color:var(--accent);color:var(--accent)}
.pill--upcoming{border-style:dashed}
.tech[data-status="upcoming"]{border-style:dashed}

.contact-grid{display:grid;gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));align-items:start}
.contact-channels{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.contact-channels li{display:grid;gap:.15rem}
.channel-label{font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft)}
.field{display:grid;gap:.35rem;margin-block-end:1rem}
.field label{font-size:var(--step--1);color:var(--ink-soft)}
.field input,.field textarea{font:inherit;color:var(--ink);background:var(--paper-raised);
  border:1px solid var(--rule);padding:.6rem .7rem;border-radius:2px;inline-size:100%}
.field textarea{resize:vertical}
.field--invalid input,.field--invalid textarea{border-color:var(--magenta-mark)}
.field-error{color:var(--magenta-mark);font-size:var(--step--1);margin:.2rem 0 0}
.form-status{padding:.75rem 1rem;border:1px solid var(--rule);background:var(--paper-raised)}
.form-status[data-state="error"]{border-color:var(--magenta-mark)}
.hp-field{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

.lang-toggle,.contact-channels a,.site-footer a{min-block-size:24px;display:inline-flex;
  align-items:center}
.cta{min-block-size:44px;display:inline-flex;align-items:center;justify-content:center}

@media (max-width:26rem){
  .wordmark small{letter-spacing:.08em}
  .site-header{gap:.6rem}
}
img,svg{max-inline-size:100%}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media (forced-colors:active){
  .cta{border:1px solid ButtonText}
  .colourbar{display:none}
}

/* WhatsApp channel. The glyph carries the meaning, so the link's accessible
   name comes from aria-label, not from visible text.
   Colour is WhatsApp's darker brand teal rather than its bright green: the
   bright green reaches only ~1.9:1 against the paper background, below the 3:1
   WCAG asks of a meaningful graphic, while the teal clears it at ~4.3:1 and sits
   better against the site's restrained palette. Dark mode uses the bright green,
   which has ample contrast on the ink ground.
   The 44px box is a comfortable thumb target — this is the primary way a Libyan
   buyer will make contact, and it is reached on a phone. */
.wa-link{display:inline-flex;align-items:center;justify-content:center;
  inline-size:28px;block-size:28px;margin-inline-start:-.25rem;
  border-radius:4px;color:#128C7E}
.wa-link svg{inline-size:20px;block-size:20px;fill:currentColor;display:block}
/* A comfortable thumb target where it is actually thumbed, without making the
   glyph loom over 17px text on a desktop browser — at 28px it was 1.6x the body
   size and its row stood 50% taller than the email beside it. */
@media (pointer:coarse){
  .wa-link{inline-size:44px;block-size:44px;margin-inline-start:-.6rem}
  .wa-link svg{inline-size:24px;block-size:24px}
}
.wa-link:hover{color:#0E6F63}
@media (prefers-color-scheme:dark){
  .wa-link{color:#25D366}
  .wa-link:hover{color:#4BE383}
}