/* ===== Tokens ===== */
:root{
  --ink: #0b1020;
  --ink-soft: #3d4354;
  --muted: #72798a;
  --paper: #ffffff;
  --page: #f2f1f8;
  --line: #e5e8f0;
  --navy: #0f5f88;
  --teal: #15b9a7;
  --mint: #8bdcba;
  --violet: #614092;
  --coral: #ff7c74;
  --gold: #ffd17b;
  --deep: #121a34;

  --font-latin-display: 'Space Grotesk', sans-serif;
  --font-latin-body: 'Inter', sans-serif;
  --font-arabic: 'Almarai', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --max-w: 1120px;
  --edge: 24px;
}

@media (min-width: 900px){
  :root{ --edge: 52px; }
}

/* ===== Reset ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,
body{
  max-width:100%;
  overflow-x:hidden;
}
body{
  margin:0;
  background:
    radial-gradient(circle at 18% 0%, rgba(139,220,186,0.24), transparent 30rem),
    linear-gradient(180deg, #f7f6fb 0%, var(--page) 100%);
  color:var(--ink);
  font-family:var(--font-latin-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{
  font-family:var(--font-latin-display);
  margin:0;
  line-height:1.04;
  letter-spacing:0;
}
p{ margin:0; }

body.lang-ar{ font-family:var(--font-arabic); }
body.lang-ar h1,
body.lang-ar h2,
body.lang-ar h3{
  font-family:var(--font-arabic);
  font-weight:800;
  letter-spacing:0;
}
body.lang-ar .eyebrow,
body.lang-ar .contact-label,
body.lang-ar .brand-arabic{ font-family:var(--font-arabic); }
body.lang-ar .eyebrow{ font-family:var(--font-mono); }

.wrap{
  width:100%;
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:var(--edge);
}

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:0.04;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}

/* ===== Header ===== */
.site-header{
  position:absolute;
  top:28px;
  left:0;
  right:0;
  z-index:20;
  background:transparent;
  border:0;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:#fff;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
}
.brand-mark{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
}
.brand-word{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.brand-latin{
  font-family:var(--font-latin-display);
  font-weight:700;
  font-size:1rem;
  letter-spacing:0;
}
.brand-arabic{
  font-family:var(--font-arabic);
  font-weight:700;
  font-size:0.82rem;
  color:#a9f1df;
  margin-top:2px;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:26px;
  font-size:0.82rem;
}
.site-nav a{
  opacity:0.86;
  transition:opacity .2s ease;
}
.site-nav a:hover{ opacity:1; }

.lang-switch{
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(12px);
}
.lang-btn{
  min-width:38px;
  min-height:30px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,0.82);
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0;
  transition:background .2s ease, color .2s ease;
}
.lang-btn.is-active{
  background:var(--coral);
  color:#fff;
  font-weight:600;
}
.lang-btn:not(.is-active):hover{
  background:rgba(255,255,255,0.12);
  color:#fff;
}

/* ===== Shared ===== */
.eyebrow{
  margin-block-end:14px;
  color:#dff8ef;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0;
  text-transform:uppercase;
}
.eyebrow-dark{ color:#7a548f; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:8px;
  font-weight:700;
  font-size:0.86rem;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary{
  background:var(--coral);
  color:#fff;
}
.btn-primary:hover{
  background:#ff6a60;
  transform:translateY(-2px);
}
.btn-ghost{
  border:1px solid rgba(255,255,255,0.48);
  color:#fff;
}
.btn-ghost:hover{
  border-color:#fff;
  background:rgba(255,255,255,0.1);
  transform:translateY(-2px);
}
.btn-large{
  margin-block-start:34px;
  min-height:48px;
  padding-inline:26px;
}

/* ===== Hero ===== */
.hero{
  position:relative;
  overflow:hidden;
  min-height:680px;
  padding-block:0;
  color:#fff;
  background:
    radial-gradient(circle at 79% 22%, rgba(255,124,116,0.34), transparent 18rem),
    linear-gradient(130deg, #0d718c 0%, #126a8a 36%, #563f90 100%);
}
.hero::before{
  content:"";
  position:absolute;
  left:-8%;
  bottom:-15%;
  width:58%;
  height:32%;
  background:
    radial-gradient(ellipse at 66% 12%, rgba(255,255,255,0.55), transparent 16%),
    linear-gradient(110deg, #00a4d2 0%, #05c3b0 44%, #a4efd1 100%);
  border-radius:48% 52% 0 0 / 100% 100% 0 0;
  transform:rotate(5deg);
  opacity:0.96;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  right:-156px;
  bottom:-158px;
  width:390px;
  height:390px;
  border-radius:50%;
  border:70px solid transparent;
  border-top-color:#ff5f93;
  border-left-color:#ff8a6e;
  border-bottom-color:#ffe08b;
  transform:rotate(-31deg);
  filter:drop-shadow(0 34px 40px rgba(16,17,35,0.24));
}
.hero-inner{
  position:relative;
  z-index:1;
  width:100%;
  min-height:680px;
  display:block;
  padding-block:124px 78px;
}
.hero-inner::before{
  content:none;
}
.hero-inner::after{
  content:none;
}
.hero-text{
  position:relative;
  z-index:2;
  width:min(100%, 620px);
  max-width:620px;
}
.hero-headline{
  max-width:16ch;
  margin-block-end:18px;
  font-size:3rem;
}
body.lang-ar .hero-headline{ max-width:18ch; }
.hero-sub{
  max-width:54ch;
  margin-block-end:26px;
  color:rgba(255,255,255,0.84);
  font-size:1rem;
}
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.hero-mark{
  position:absolute;
  z-index:1;
  right:64px;
  top:92px;
  width:330px;
  opacity:0.18;
  animation:mark-in 1s .15s ease both;
}
.mark-svg{ width:100%; height:auto; }
.ring{ fill:none; }

@keyframes mark-in{
  from{ opacity:0; transform:scale(0.92) rotate(-5deg); }
  to{ opacity:0.18; transform:scale(1) rotate(0); }
}

/* ===== Sections ===== */
.section{
  position:relative;
  padding-block:62px;
}
.section-light{
  background:var(--paper);
  color:var(--ink);
}
.section-dark{
  color:#fff;
  background:
    linear-gradient(135deg, rgba(20,184,166,0.9), rgba(97,64,146,0.95)),
    #23315a;
}
.section-head{
  max-width:700px;
  margin-block-end:28px;
}
.section-head h2{
  font-size:2rem;
  color:inherit;
}
.section-light .section-head h2{ color:var(--ink); }
.section-light p{ color:var(--ink-soft); }
.section-dark .section-head p,
.section-dark .card p{ color:rgba(255,255,255,0.82); }

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* About */
#about{
  padding-block:46px 56px;
  background:
    linear-gradient(135deg, rgba(20,184,166,0.9), rgba(97,64,146,0.95)),
    #23315a;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,0.16);
}
#about .section-head h2{
  color:#fff;
}
#about .eyebrow-dark{
  color:#dff8ef;
}
#about p{
  color:rgba(255,255,255,0.84);
}
.about-inner{
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(280px, .98fr);
  gap:34px;
  align-items:center;
}
.about-body p{
  max-width:62ch;
  margin-block-end:24px;
  color:rgba(255,255,255,0.84);
  font-size:1rem;
}
.fact-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.08);
}
.fact-row li{
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  color:#fff;
  text-align:center;
  font-family:var(--font-latin-display);
  font-size:1.08rem;
  font-weight:700;
}
.fact-row li + li{ border-inline-start:1px solid rgba(255,255,255,0.18); }

/* Card grids */
.card-grid{
  display:grid;
  gap:0;
  border:1px solid rgba(255,255,255,0.22);
}
.two-col{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.four-col{ grid-template-columns:repeat(4, minmax(0, 1fr)); }

.card{
  position:relative;
  overflow:hidden;
  min-height:240px;
  padding:114px 26px 26px;
  border:0;
  border-inline-start:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  transition:background .22s ease, transform .22s ease;
}
.card:first-child{ border-inline-start:0; }
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:92px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0)),
    radial-gradient(circle at 18% 20%, #ffd17b, transparent 26%),
    linear-gradient(120deg, #0f5f88, #15b9a7 45%, #ff7c74);
}
.card:nth-child(2)::before{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0)),
    radial-gradient(circle at 78% 18%, #8bdcba, transparent 24%),
    linear-gradient(120deg, #614092, #0f5f88 48%, #ffd17b);
}
.card:hover{
  background:rgba(255,255,255,0.14);
  transform:translateY(-3px);
}
.card h3{
  margin-block-end:12px;
  font-size:1.28rem;
}
.card p{
  color:rgba(255,255,255,0.82);
  font-size:0.94rem;
}

.card-alt{
  min-height:190px;
  padding:24px;
  border-inline-start:1px solid var(--line);
  background:#fff;
  color:var(--ink);
}
.card-alt:first-child{ border-inline-start:0; }
.card-alt::before{
  inset:auto 22px 22px auto;
  width:42px;
  height:42px;
  border-radius:50%;
  background:
    radial-gradient(circle at 62% 38%, #fff 0 19%, transparent 20%),
    linear-gradient(135deg, var(--teal), var(--violet));
  opacity:0.9;
}
.card-alt:hover{
  background:#fbfcff;
  transform:translateY(-3px);
}
.card-alt h3{
  color:var(--ink);
  font-size:1.1rem;
  margin-block-end:12px;
  padding-inline-end:38px;
}
.card-alt p{
  color:var(--ink-soft);
}
.work-note{
  margin-block-start:24px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:0.84rem;
}

#work{
  border-bottom:1px solid var(--line);
}
#work .card-grid{
  border-color:var(--line);
}

/* Contact */
.section-contact{
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 8%, rgba(255,209,123,0.22), transparent 18rem),
    linear-gradient(125deg, #165f86 0%, #644091 100%);
}
.section-contact::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:64px;
  background:linear-gradient(90deg, rgba(21,185,167,0.95), rgba(255,124,116,0.86));
}
.contact-inner{
  position:relative;
  z-index:1;
}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  max-width:760px;
  border:1px solid rgba(255,255,255,0.22);
}
.contact-item{
  min-height:102px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:22px;
  border-block-end:1px solid rgba(255,255,255,0.18);
  border-inline-start:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
}
.contact-item:nth-child(odd){ border-inline-start:0; }
.contact-item:nth-last-child(-n+2){ border-block-end:0; }
.contact-label{
  color:#a9f1df;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0;
  text-transform:uppercase;
}
.contact-value{
  color:#fff;
  font-size:1rem;
  overflow-wrap:anywhere;
}
a.contact-item:hover .contact-value{ color:var(--gold); }

/* Footer */
.site-footer{
  background:#fff;
  color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding-block:26px;
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  justify-content:space-between;
  align-items:center;
}
.legal{
  font-family:var(--font-mono);
  font-size:0.76rem;
}
.copyright{ font-size:0.82rem; }

/* ===== Responsive ===== */
@media (max-width: 960px){
  .site-header{ top:24px; }
  .site-nav{ display:none; }
  .hero-inner{
    min-height:640px;
    padding-block:116px 68px;
  }
  .hero-headline{ font-size:2.65rem; }
  .hero-mark{
    right:-56px;
    top:104px;
    width:280px;
  }
  .about-inner{ grid-template-columns:1fr; }
  .four-col{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .card:nth-child(odd){ border-inline-start:0; }
  .card:nth-child(n+3){ border-block-start:1px solid var(--line); }
}

@media (max-width: 700px){
  :root{ --edge:18px; }
  .site-header{ top:20px; }
  .site-header .wrap{
    position:relative;
  }
  .header-inner{ gap:14px; }
  .site-header .wrap{
    padding-inline:18px;
  }
  .brand-mark{ width:28px; height:28px; }
  .brand-latin{ font-size:0.92rem; }
  .brand-arabic{ display:none; }
  .lang-btn{
    min-width:28px;
    min-height:28px;
    padding:0 6px;
  }
  .lang-switch{
    position:fixed;
    top:58px;
    right:auto;
    left:18px;
    gap:2px;
    padding:3px;
  }
  .hero{
    min-height:620px;
  }
  .hero-inner{
    min-height:620px;
    padding-block:96px 104px;
  }
  .hero::before{
    width:112%;
    height:22%;
    left:-16%;
    bottom:-6%;
  }
  .hero::after{
    width:260px;
    height:260px;
    right:-150px;
    bottom:-72px;
    border-width:42px;
  }
  .hero-headline{ font-size:2.12rem; }
  .hero-sub{ font-size:0.95rem; }
  .hero-text,
  .section-head,
  .about-body{
    width:100%;
    max-width:354px;
  }
  .hero-sub{
    max-width:354px;
  }
  .hero-mark{
    right:-64px;
    top:58%;
    width:260px;
  }
  .section{ padding-block:48px; }
  #about{ padding-block:46px 48px; }
  .section-head h2{ font-size:1.74rem; }
  .fact-row,
  .two-col,
  .four-col,
  .contact-grid{
    grid-template-columns:1fr;
  }
  .fact-row li{
    min-height:82px;
  }
  .fact-row li + li{
    border-inline-start:0;
    border-block-start:1px solid var(--line);
  }
  .card,
  .card-alt{
    border-inline-start:0;
    border-block-start:1px solid rgba(255,255,255,0.18);
  }
  .card:first-child,
  .card-alt:first-child{
    border-block-start:0;
  }
  .card-alt:nth-child(n+3){
    border-block-start:1px solid var(--line);
  }
  .contact-item{
    border-inline-start:0;
  }
  .contact-item:nth-last-child(2){
    border-block-end:1px solid rgba(255,255,255,0.18);
  }
  .footer-inner{
    display:block;
  }
  .copyright{ margin-block-start:8px; }
}

/* ===== Accessibility ===== */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-mark,
  .reveal{
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}