:root{
  --ink:#12181F;
  --ink-soft:#1B232C;
  --mist:#ECEFEA;
  --mist-soft:#E2E6DF;
  --signal:#E8A33D;
  --signal-soft:#F0C07A;
  --pine:#4F7268;
  --pine-soft:#6B9389;
  --slate:#5C6773;
  --slate-light:#9BA6B2;
  --paper:#F7F8F6;
  --max-w:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}
[dir="rtl"] body{ font-family:'IBM Plex Sans Arabic', sans-serif; }
[dir="ltr"] body{ font-family:'IBM Plex Sans', sans-serif; }
.ltr{ direction:ltr; unicode-bidi:isolate; }
h1,h2,h3{
  font-family:'Vazirmatn', 'Space Grotesk', sans-serif;
  margin:0;
  font-weight:800;
  letter-spacing:-0.01em;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 28px; }

:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(18,24,31,0.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
  gap:16px;
}
.brand{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:20px;
  color:#fff;
  letter-spacing:0.01em;
  flex:0 0 auto;
}
.header-note{
  font-size:13px;
  color:var(--slate-light);
  flex:1;
  text-align:center;
}
@media (max-width:680px){ .header-note{ display:none; } }

.lang-switch{
  display:flex;
  gap:4px;
  flex:0 0 auto;
}
.lang-switch a{
  font-size:12.5px;
  font-family:'Space Grotesk', sans-serif;
  color:var(--slate-light);
  padding:6px 10px;
  border-radius:999px;
  transition:background .15s ease, color .15s ease;
}
.lang-switch a:hover{ background:rgba(255,255,255,0.08); color:#fff; }
.lang-switch a[aria-current="true"]{
  background:var(--signal);
  color:var(--ink);
  font-weight:700;
}

/* ---------- LANGUAGE BANNER ---------- */
.lang-banner{
  display:none;
  background:var(--signal);
  color:var(--ink);
}
.lang-banner.is-visible{ display:block; }
.lang-banner .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:10px 28px;
  font-size:14px;
  font-family:'Space Grotesk', sans-serif;
}
.lang-banner-actions{ display:flex; align-items:center; gap:10px; }
.lang-banner button{
  border:none;
  background:var(--ink);
  color:#fff;
  font-family:'Vazirmatn', 'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:13px;
  padding:6px 16px;
  border-radius:999px;
  cursor:pointer;
}
.lang-banner-dismiss{
  background:transparent !important;
  color:var(--ink) !important;
  font-size:18px !important;
  line-height:1;
  padding:4px 8px !important;
  font-weight:400 !important;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232,163,61,0.14), transparent 60%), var(--ink);
  color:#fff;
  overflow:hidden;
  padding:120px 0 0;
}
.hero-inner{
  text-align:center;
  max-width:720px;
  margin:0 auto;
  padding-bottom:140px;
}
.eyebrow{
  display:inline-block;
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;
  letter-spacing:0.18em;
  color:var(--signal-soft);
  text-transform:uppercase;
  margin-bottom:28px;
  direction:ltr;
}
.hero h1{
  font-size:clamp(32px, 5.4vw, 54px);
  line-height:1.32;
  color:#fff;
}
.hero h1 span{ display:block; }
.hero h1 .accent{ color:var(--signal-soft); }
.hero-sub{
  margin-top:26px;
  font-size:17px;
  line-height:1.9;
  color:var(--slate-light);
  max-width:520px;
  margin-inline:auto;
}

.hero-form{
  margin-top:44px;
  display:flex;
  justify-content:center;
  max-width:420px;
  margin-inline:auto;
}
.hero-form-shell{
  display:flex;
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;
  padding:5px 5px 5px 18px;
  align-items:center;
  gap:8px;
}
[dir="rtl"] .hero-form-shell{ padding:5px 18px 5px 5px; }
.hero-form input{
  flex:1;
  background:transparent;
  border:none;
  color:#fff;
  font-family:inherit;
  font-size:14px;
  padding:10px 6px;
}
.hero-form input::placeholder{ color:var(--slate-light); }
.hero-form input:focus{ outline:none; }
.btn-signal{
  background:var(--signal);
  color:var(--ink);
  border:none;
  font-family:'Vazirmatn', 'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:14px;
  padding:11px 22px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .15s ease, background .15s ease;
}
.btn-signal:hover{ background:var(--signal-soft); transform:translateY(-1px); }
.form-hint{
  margin-top:14px;
  font-size:12.5px;
  color:var(--slate-light);
}

.horizon{
  position:absolute;
  bottom:0; left:0; right:0;
  height:90px;
  background:linear-gradient(to top, var(--mist) 0%, transparent 100%);
}
.horizon-line{
  position:absolute;
  bottom:86px; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--signal-soft) 50%, transparent);
  box-shadow:0 0 24px 1px rgba(232,163,61,0.55);
}

/* ---------- SECTION SHELLS ---------- */
.section{ padding:108px 0; }
.section-content{ background:var(--mist); position:relative; }
.section-apps{ background:var(--ink); color:#fff; }
.section-head{ max-width:560px; margin:0 auto 64px; text-align:center; }
.section .eyebrow-dark{
  display:inline-block;
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--pine);
  margin-bottom:18px;
  direction:ltr;
}
.section-apps .eyebrow-dark{ color:var(--signal-soft); }
.section-head h2{
  font-size:clamp(26px, 3.6vw, 36px);
  line-height:1.4;
  color:var(--ink);
}
.section-apps .section-head h2{ color:#fff; }
.section-head .lede{
  margin-top:18px;
  font-size:15.5px;
  line-height:1.9;
  color:var(--slate);
}
.section-apps .section-head .lede{ color:var(--slate-light); }

/* ---------- PATH MOTIF ---------- */
.path-field{ position:relative; }
.path-svg{
  position:absolute;
  top:-26px; right:0; left:0;
  width:100%;
  height:120%;
  z-index:0;
  pointer-events:none;
}

/* ---------- CONTENT GRID ---------- */
.content-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.content-card{
  background:var(--paper);
  border:1px solid rgba(18,24,31,0.07);
  border-radius:18px;
  padding:30px 26px 28px;
  text-align:start;
  transition:transform .25s ease, box-shadow .25s ease;
}
.content-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px -20px rgba(18,24,31,0.35); }
.node{
  width:11px; height:11px;
  border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 5px rgba(232,163,61,0.18);
  margin-bottom:18px;
}
.content-card h3{ font-size:18px; color:var(--ink); margin-bottom:10px; }
.content-card p{ font-size:14.5px; line-height:1.85; color:var(--slate); }
.content-foot-note{ margin-top:46px; text-align:center; font-size:13.5px; color:var(--slate); }

/* ---------- APPS SPOTLIGHT ---------- */
.spotlight{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
  background:var(--ink-soft);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  padding:46px 40px;
  display:flex;
  align-items:center;
  gap:36px;
  text-align:start;
}
.spotlight-icon{
  flex:0 0 96px;
  width:96px; height:96px;
  border-radius:20px;
  background:linear-gradient(155deg, var(--pine), #2E443E);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono', monospace;
  font-size:30px;
  color:var(--pine-soft);
}
.spotlight-body{ flex:1; min-width:0; }
.spotlight-eyebrow{ font-size:12px; color:var(--pine-soft); letter-spacing:0.06em; margin-bottom:8px; }
.spotlight h3{ font-size:22px; color:#fff; margin-bottom:10px; }
.spotlight p{ font-size:14.5px; line-height:1.85; color:var(--slate-light); margin-bottom:20px; }
.btn-outline{
  display:inline-block;
  border:1px solid rgba(255,255,255,0.22);
  color:#fff;
  font-family:'Vazirmatn', 'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:13.5px;
  padding:10px 22px;
  border-radius:999px;
  transition:background .15s ease, border-color .15s ease;
}
.btn-outline:hover{ background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.4); }

.upcoming{ max-width:760px; margin:30px auto 0; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.upcoming-tag{
  font-size:13px; color:var(--slate-light);
  border:1px dashed rgba(255,255,255,0.18);
  border-radius:999px; padding:8px 18px;
  display:flex; align-items:center; gap:8px;
}
.upcoming-tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--slate-light); }

/* ---------- FOOTER ---------- */
.site-footer{ background:var(--ink); border-top:1px solid rgba(255,255,255,0.07); padding:26px 0 34px; }
.site-footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.site-footer span{ font-size:13px; color:var(--slate-light); }

/* ---------- REVEAL ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .content-grid{ grid-template-columns:repeat(2, 1fr); }
  .spotlight{ flex-direction:column; text-align:center; padding:38px 28px; }
  .spotlight-body{ text-align:center; }
  .content-card{ text-align:center; }
}
@media (max-width:560px){
  .hero{ padding-top:90px; }
  .hero-inner{ padding-bottom:110px; }
  .content-grid{ grid-template-columns:1fr; }
  .section{ padding:76px 0; }
  .hero-form-shell{ flex-direction:column; border-radius:18px; padding:14px; gap:10px; }
  .hero-form input{ width:100%; text-align:center; }
  .btn-signal{ width:100%; }
  .lang-banner .wrap{ flex-direction:column; align-items:flex-start; gap:8px; }
}