/* ===== LIOI Design System — العناصر العامة ===== */
:root{
  /* === Core Colors (16_Design_System) === */
  --midnight:        #0A0A0F;
  --surface:         #12121A;
  --titanium:        #2A2A35;
  --titanium-light:  #3A3A48;
  --warm-white:      #F5F0EB;
  --warm-dim:        #B8B0A5;
  --gold:            #C9A96E;
  --gold-hover:      #D4B87D;
  --gold-muted:      #8A7A55;

  /* === Status Colors === */
  --status-success:  #4ADE80;
  --status-warning:  #FBBF24;
  --status-error:    #F87171;
  --status-info:     #60A5FA;

  /* === Fonts === */
  --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* === Type Scale (LIOI 16) === */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  /* === Spacing === */
  --sp-1: .5rem;  --sp-2: 1rem;  --sp-3: 1.5rem;  --sp-4: 2rem;  --sp-5: 3rem;  --sp-6: 4.5rem;
  --radius: .9rem;
  --radius-lg: 1.4rem;

  /* === Transitions === */
  --tr: .18s ease;
}

*{ box-sizing:border-box; margin:0; padding:0; letter-spacing:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-ar);
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--warm-white);
  background:var(--midnight);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--gold); text-decoration:none; transition:color var(--tr); }
a:hover{ color:var(--gold-hover); }
h1,h2,h3,h4,h5,h6{ font-weight:600; line-height:1.3; letter-spacing:0; }

.wrap{ width:min(100% - 2.5rem, 1160px); margin-inline:auto; }
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* ==== Buttons ==== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--gold); color:var(--midnight); font-weight:600;
  padding:.7rem 1.5rem; border-radius:999px; border:none; cursor:pointer;
  transition:background var(--tr), transform var(--tr);
}
.btn:hover{ background:var(--gold-hover); color:var(--midnight); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--gold); border:1px solid var(--gold-muted); }
.btn--ghost:hover{ border-color:var(--gold); }

/* ==== Badges ==== */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:var(--fs-micro); font-weight:500;
  padding:.3rem .8rem; border-radius:999px;
  background:var(--titanium); color:var(--warm-dim); border:1px solid var(--titanium);
}
.badge--gold{ color:var(--gold); border-color:var(--gold-muted); background:transparent; }

/* ==== Header ==== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,15,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--titanium);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 0; gap:1rem; }
.logo{ display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:1.2rem; color:var(--warm-white); }
.logo b{ display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:.65rem; background:var(--gold); color:var(--midnight); font-weight:700; }
.logo small{ color:var(--warm-dim); font-size:.75rem; font-weight:400; }
.nav{ display:flex; gap:1.25rem; }
.nav a{ color:var(--warm-dim); font-weight:500; font-size:var(--fs-caption); }
.nav a:hover{ color:var(--gold); }
.nav a.is-active{ color:var(--gold); }
.nav-toggle{ display:none; }
.nav-toggle,.icon-btn{
  width:2.4rem; height:2.4rem; border-radius:.6rem; border:1px solid var(--titanium);
  background:var(--surface); color:var(--warm-white); cursor:pointer; font-size:1.1rem;
  display:grid; place-items:center;
}
@media(max-width:820px){
  .nav{
    position:fixed; inset-inline:1rem; top:4.4rem; z-index:40;
    flex-direction:column; gap:.25rem; padding:.75rem;
    background:var(--surface); border:1px solid var(--titanium); border-radius:var(--radius-lg);
    box-shadow:0 20px 50px rgba(0,0,0,.5);
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:.6rem .75rem; border-radius:.6rem; }
  .nav a:hover{ background:var(--titanium); }
  .nav-toggle{ display:grid; }
}

/* ==== Hero ==== */
.hero{
  position:relative; overflow:hidden;
  padding:var(--sp-6) 0;
  background:
    radial-gradient(1000px 520px at 85% -10%, rgba(201,169,110,.14), transparent 60%),
    radial-gradient(760px 420px at 8% 115%, rgba(201,169,110,.08), transparent 60%);
}
.hero .inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center; }
.hero h1{ font-size:var(--fs-hero); font-weight:600; line-height:1.25; }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero .lead{ margin-top:1rem; color:var(--warm-dim); font-size:var(--fs-lg); max-width:46ch; }
.hero .actions{ margin-top:1.75rem; display:flex; gap:.9rem; flex-wrap:wrap; }
.hero .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; color:var(--gold); font-size:var(--fs-caption); font-weight:500; margin-bottom:1rem; }
.hero .visual{ position:relative; }
.hero .visual .frame{
  border-radius:var(--radius-lg); border:1px solid var(--titanium);
  background:linear-gradient(160deg, var(--surface), #0d0d14);
  padding:1.5rem; display:flex; flex-direction:column; gap:1rem;
}
.frame .row{ display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-caption); color:var(--warm-dim); }
.frame .bar{ height:.5rem; border-radius:999px; background:var(--titanium); overflow:hidden; }
.frame .bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--gold), var(--gold-muted)); }
@media(max-width:820px){
  .hero .inner{ grid-template-columns:1fr; }
  .hero .visual{ order:-1; }
}

/* ==== Sections ==== */
.section{ padding:var(--sp-5) 0; }
.section--alt{ background:var(--surface); border-block:1px solid var(--titanium); }
.section-head{ margin-bottom:var(--sp-3); }
.section-head .kicker{ color:var(--gold); font-size:var(--fs-caption); font-weight:500; }
.section-head h2{ font-size:var(--fs-h2); margin-top:.25rem; }
.section-head p{ color:var(--warm-dim); margin-top:.5rem; max-width:62ch; }

/* ==== Cards grid ==== */
.grid{ display:grid; gap:1.25rem; }
.grid--3{ grid-template-columns:repeat(3, 1fr); }
.grid--2{ grid-template-columns:repeat(2, 1fr); }
.grid--4{ grid-template-columns:repeat(4, 1fr); }
@media(max-width:900px){ .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:820px){ .grid--3,.grid--2{ grid-template-columns:1fr; } }
@media(max-width:560px){ .grid--4{ grid-template-columns:1fr; } }

.card{
  position:relative;
  background:var(--surface); border:1px solid var(--titanium); border-radius:var(--radius-lg);
  padding:1.5rem; transition:border-color var(--tr), transform var(--tr);
}
.card:hover{ border-color:var(--gold-muted); transform:translateY(-3px); }
.card .ic{ font-size:2rem; line-height:1; }
.card h3{ font-size:var(--fs-h3); margin:.9rem 0 .4rem; }
.card p{ color:var(--warm-dim); font-size:var(--fs-caption); }
.card .more{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.9rem; font-size:var(--fs-caption); font-weight:500; }
.card--link{ text-decoration:none; color:inherit; }

/* ==== Steps (01 Connect 02 Grow) ==== */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; counter-reset:step; }
.step{ position:relative; background:var(--surface); border:1px solid var(--titanium); border-radius:var(--radius-lg); padding:1.5rem; }
.step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--font-mono); font-size:var(--fs-h3); color:var(--gold);
  display:block; margin-bottom:.6rem;
}
.step h3{ font-size:var(--fs-h3); }
.step p{ color:var(--warm-dim); font-size:var(--fs-caption); margin-top:.4rem; }
@media(max-width:820px){ .steps{ grid-template-columns:1fr; } }

/* ==== Strip => CTA ==== */
.cta-strip{ padding:var(--sp-4) 0; text-align:center; background:linear-gradient(135deg, rgba(201,169,110,.1), rgba(201,169,110,.02)); border-block:1px solid var(--titanium); }
.cta-strip h2{ font-size:var(--fs-h2); }
.cta-strip p{ color:var(--warm-dim); margin:1rem auto 1.5rem; max-width:52ch; }

/* ==== Testimonials ==== */
.quote{ background:var(--surface); border:1px solid var(--titanium); border-radius:var(--radius-lg); padding:1.5rem; }
.quote p{ color:var(--warm-white); }
.quote .who{ margin-top:1rem; color:var(--gold); font-weight:600; }
.quote .role{ color:var(--warm-dim); font-size:var(--fs-caption); }

/* ==== Footer ==== */
.site-footer{ border-top:1px solid var(--titanium); font-size:var(--fs-micro); color:var(--warm-dim); padding:1.4rem 0; }
.site-footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.footer-note--brand{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; text-align:center; }
.fn-credit{ color:inherit; opacity:.8; }
.fn-credit:hover{ color:var(--gold); opacity:1; }
.fn-rights{ white-space:nowrap; }

/* ==== Forms ==== */
.form{ display:grid; gap:1rem; }
.form .field{ display:grid; gap:.35rem; }
.form label{ font-size:var(--fs-caption); color:var(--warm-dim); }
.form input, .form textarea{
  font-family:inherit; font-size:var(--fs-body); color:var(--warm-white);
  background:var(--surface); border:1px solid var(--titanium); border-radius:.7rem;
  padding:.65rem .9rem; width:100%; transition:border-color var(--tr);
}
.form input:focus, .form textarea:focus{ outline:none; border-color:var(--gold); }
.form .hpot{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.form .state{ font-size:var(--fs-caption); min-height:1.4em; }
.form .state.ok{ color:var(--status-success); }
.form .state.err{ color:var(--status-error); }

/* ==== Utility ==== */
.muted{ color:var(--warm-dim); }
.text-gold{ color:var(--gold); }
.tac{ text-align:center; }
.mt-2{ margin-top:var(--sp-2); }
.mt-3{ margin-top:var(--sp-3); }