/* Sadiqoon Turath — Design System
   Brand: Navy #0D1F3C (anchor) · Gold #C9A84C · Off-white #F5F2ED
   Fonts: IBM Plex Sans / IBM Plex Sans Arabic */
:root{
  --navy:#0D1F3C; --navy-2:#132b52; --navy-3:#1a3768;
  --gold:#C9A84C; --gold-soft:#e0c87e; --gold-dim:#8a6d1d;
  --paper:#F5F2ED; --card:#ffffff; --ink:#22262e; --muted:#5b6270;
  --line:rgba(13,31,60,.12); --line-gold:rgba(201,168,76,.45);
  --radius:14px; --shadow:0 10px 30px rgba(13,31,60,.08);
  --sans:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.85;font-size:17px}
[dir=rtl] body, [dir=rtl]{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 1.25rem}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(13,31,60,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-gold)}
.site-header .wrap{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:.6rem 1.25rem}
.brand{display:flex;align-items:center;gap:.65rem;color:#fff}
.brand img{height:42px;width:42px;border-radius:50%}
.brand .b-name{font-weight:600;font-size:1.05rem;line-height:1.2}
.brand .b-sub{font-size:.72rem;color:rgba(255,255,255,.55)}
.nav{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.nav a{color:rgba(255,255,255,.82);font-size:.92rem;padding:.25rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.active{color:var(--gold-soft);border-bottom-color:var(--gold)}
.lang-switch{display:flex;border:1px solid var(--line-gold);border-radius:999px;overflow:hidden}
.lang-switch button{background:none;border:0;color:rgba(255,255,255,.75);font-family:inherit;font-size:.8rem;padding:.28rem .7rem;cursor:pointer}
.lang-switch button.on{background:var(--gold);color:var(--navy);font-weight:600}

/* Hero */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%);color:#fff;padding:4.5rem 0 4rem;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:
 radial-gradient(600px 300px at 85% 15%,rgba(201,168,76,.14),transparent 60%),
 radial-gradient(500px 260px at 10% 90%,rgba(201,168,76,.08),transparent 60%);pointer-events:none}
.hero .kicker{color:var(--gold-soft);letter-spacing:.06em;font-size:.85rem;font-weight:600;text-transform:uppercase}
.hero h1{font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.35;margin:.6rem 0 1rem;font-weight:700}
.hero h1 em{color:var(--gold-soft);font-style:normal}
.hero p.lead{max-width:46rem;color:rgba(255,255,255,.82);font-size:1.08rem}
.hero .cta-row{margin-top:1.8rem;display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.65rem 1.5rem;border-radius:999px;font-weight:600;font-size:.95rem;border:1px solid transparent;transition:.2s}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-soft)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft)}
.hero .stats{display:flex;gap:2.2rem;margin-top:2.4rem;flex-wrap:wrap}
.hero .stat b{display:block;font-size:1.5rem;color:var(--gold-soft)}
.hero .stat span{font-size:.85rem;color:rgba(255,255,255,.6)}

/* Sections */
.block{padding:3.6rem 0}
.block.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.block.navy{background:var(--navy);color:#fff}
.sec-title{font-size:1.7rem;font-weight:700;color:var(--navy);margin-bottom:.5rem}
.block.navy .sec-title{color:#fff}
.sec-sub{color:var(--muted);max-width:50rem;margin-bottom:2rem}
.block.navy .sec-sub{color:rgba(255,255,255,.7)}
.sec-title::after{content:"";display:block;width:64px;height:3px;background:var(--gold);margin-top:.55rem;border-radius:2px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.4rem;box-shadow:var(--shadow);transition:.25s;position:relative}
.card:hover{transform:translateY(-4px);border-color:var(--line-gold)}
.card .ic{width:46px;height:46px;border-radius:12px;background:var(--navy);color:var(--gold-soft);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.9rem}
.card h3{color:var(--navy);font-size:1.12rem;margin-bottom:.45rem}
.card p{font-size:.93rem;color:var(--muted)}
.card .arrow{color:var(--gold-dim);font-weight:600;font-size:.88rem;display:inline-block;margin-top:.8rem}
.block.navy .card{background:rgba(255,255,255,.05);border-color:rgba(201,168,76,.25);box-shadow:none}
.block.navy .card h3{color:var(--gold-soft)}
.block.navy .card p{color:rgba(255,255,255,.72)}

/* Feature list */
.feat{display:flex;gap:.9rem;margin-bottom:1.2rem}
.feat .dot{flex-shrink:0;width:10px;height:10px;border-radius:50%;background:var(--gold);margin-top:.65rem}
.feat h4{color:var(--navy);font-size:1.02rem}
.feat p{font-size:.92rem;color:var(--muted)}

/* Tables */
.tbl-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:600px}
th{background:var(--navy);color:#fff;padding:.75rem .9rem;text-align:start;font-weight:600}
td{padding:.7rem .9rem;border-top:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even){background:var(--paper)}
td.hl{background:rgba(201,168,76,.12);color:var(--navy);font-weight:500}
.note{font-size:.85rem;color:var(--muted);margin-top:.7rem}

/* Chat demo */
.chat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)}
.bubble{padding:.7rem 1rem;border-radius:14px;margin-bottom:.7rem;font-size:.92rem;max-width:92%}
.bubble.q{background:var(--navy);color:#fff;border-end-start-radius:4px}
.bubble.a{background:var(--paper);border:1px solid var(--line);border-end-end-radius:4px;margin-inline-start:auto}
.bubble .src{display:block;margin-top:.4rem;font-size:.78rem;color:var(--gold-dim)}

/* Clients */
.clients{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem}
.client{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.75rem 1rem;font-size:.88rem;color:var(--navy);text-align:center}

/* Steps */
.steps{counter-reset:s;display:grid;gap:1rem}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;display:flex;gap:1rem;align-items:flex-start;box-shadow:var(--shadow)}
.step::before{counter-increment:s;content:counter(s);flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:700;display:flex;align-items:center;justify-content:center}
.step h4{color:var(--navy)}
.step p{font-size:.92rem;color:var(--muted)}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--navy),var(--navy-3));color:#fff;border-radius:var(--radius);padding:2.4rem 2rem;text-align:center;border:1px solid var(--line-gold)}
.cta-band h2{font-size:1.5rem;margin-bottom:.6rem}
.cta-band p{color:rgba(255,255,255,.75);margin-bottom:1.4rem}

/* Footer */
.site-footer{background:var(--navy);color:rgba(255,255,255,.7);padding:2.5rem 0 1.5rem;margin-top:3rem}
.fnav{display:flex;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.fnav a{color:rgba(255,255,255,.75);font-size:.9rem}
.fnav a:hover{color:var(--gold-soft)}
.fmeta{font-size:.8rem;color:rgba(255,255,255,.45);border-top:1px solid rgba(255,255,255,.12);padding-top:1.1rem}
.badge{display:inline-block;background:rgba(201,168,76,.15);color:var(--gold-soft);border:1px solid var(--line-gold);border-radius:999px;font-size:.75rem;padding:.15rem .7rem;margin-inline-start:.5rem;vertical-align:middle}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:start}
@media(max-width:820px){.two-col{grid-template-columns:1fr}.nav{display:none}}