:root{
      --bg:#0b1020; --bg-2:#0e1428; --text:#e8eef9; --muted:#aebbd7;
      --card:#121a35; --accent:#41e7bf; --accent-2:#7aa2ff; --border:rgba(255,255,255,.12);
      --radius:16px; --maxw:1200px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),var(--bg-2));color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;line-height:1.6}
    a{color:var(--accent);text-decoration:none}
    .container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
    header.topbar{position:sticky;top:0;z-index:30;background:rgba(5,8,16,.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
    .topbar-inner{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:10px 0}
    .brand{font-weight:800;letter-spacing:.3px}
    .mode-switch{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .mode-switch button{
      appearance:none;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
      color:var(--text);padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:700
    }
    .mode-switch button.active{background:linear-gradient(180deg,var(--accent),#15caa0);color:#06241c;border:none}
    nav.nav{display:flex;gap:12px;flex-wrap:wrap}
    nav.nav a{color:var(--muted);font-weight:700}
    .hero{padding:40px 0}
    .badge{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.05)}
    .h1{font-size: clamp(28px, 5vw, 48px);line-height:1.1;margin:12px 0 8px;font-weight:900}
    .sub{font-size: clamp(14px, 2.2vw, 18px);color:var(--muted);margin:0 0 16px}
    .cta-row{display:flex;flex-wrap:wrap;gap:10px}
    .btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;border-radius:12px;
         border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));color:var(--text);font-weight:800}
    .btn.primary{background:linear-gradient(180deg,var(--accent),#18d5aa);color:#07231b;border:none}
    section{padding:50px 0;border-top:1px solid var(--border)}
    .two-col{display:grid;grid-template-columns:1fr;gap:18px}
    .card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:var(--radius);padding:18px}
    .col h2{margin:0 0 8px;font-size: clamp(20px, 3vw, 28px)}
    .col ul{margin:0 0 0 1em}
    .col.ar ul{margin:0 1em 0 0}
    .features{display:grid;grid-template-columns:1fr;gap:12px}
    .feature{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid var(--border);border-radius:12px;padding:12px}
    .testi{border-left:3px solid var(--accent);padding:12px;background:rgba(255,255,255,.03);border-radius:12px}
    footer{padding:28px 0;border-top:1px solid var(--border);color:var(--muted)}
    /* Side-by-side layout for BOTH mode on medium+ screens */
    @media (min-width: 900px){
      body[data-mode="both"] .two-col{grid-template-columns:1fr 1fr}
      .divider{border-right:1px solid var(--border);padding-right:16px}
      .col.ar{padding-left:16px}
    }
    /* Visibility rules by mode */
    /* Default: English only */
    .col.en{display:block}
    .col.ar{display:none}
    nav.nav.en{display:flex}
    nav.nav.ar{display:none}
    /* Arabic only */
    body[data-mode="ar"] .col.en{display:none}
    body[data-mode="ar"] .col.ar{display:block}
    body[data-mode="ar"] nav.nav.en{display:none}
    body[data-mode="ar"] nav.nav.ar{display:flex}
    /* Both */
    body[data-mode="both"] .col.en{display:block}
    body[data-mode="both"] .col.ar{display:block}
    body[data-mode="both"] nav.nav.en{display:flex}
    body[data-mode="both"] nav.nav.ar{display:flex}
    /* Alignments */
    .col.en{text-align:left}
    .col.ar{text-align:right; direction: rtl}

/* ===== Additional shared styles for subpages ===== */
.page-hero{padding:40px 0}
.page-hero .h1{font-size: clamp(26px, 4.5vw, 44px); margin: 8px 0}
.page-hero .sub{max-width: 70ch}
.breadcrumbs{font-size:.95rem;color:var(--muted);margin:6px 0 2px}
.breadcrumbs a{color:var(--muted)}
.grid{display:grid;gap:14px}
.grid.products{grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))}
.product-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;border:1px solid var(--border);
              background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.product-img{width:100%;aspect-ratio:16/10;border-radius:10px;background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
             border:1px solid var(--border)}
.product-card h3{margin:0;font-size:1.05rem}
.product-card .meta{color:var(--muted);font-size:.95rem}
.product-card .price{font-weight:900}
.product-card .row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 14px}
.input, select, textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.03);
                         color:var(--text)}
.input::placeholder, textarea::placeholder{color:var(--muted)}
label{font-weight:700;display:block;margin:8px 0 6px}
.form-row{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:800px){ .form-row{grid-template-columns:1fr 1fr} }
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px 8px;text-align:left}
.table th{color:var(--muted);font-weight:800}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:10px 0 16px}
.stat{padding:14px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
.kicker{font-size:.9rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
hr.soft{border:none;border-top:1px solid var(--border);margin:18px 0}
.badge.cat{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.03)}
.notice{padding:12px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);background:rgba(255,255,255,.03)}
code,pre{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
/* Buttons row helpers */
.row-gap{display:flex;gap:8px;flex-wrap:wrap}
/* Pricing cards */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.tier{border:1px solid var(--border);border-radius:16px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
.tier h3{margin:0 0 6px}
.tier .price{font-size:1.6rem;font-weight:900;margin:4px 0}
.tier ul{margin:8px 0 0 1.1em}
.tier .btn{width:100%}
/* Blog */
.post-card{border:1px solid var(--border);border-radius:14px;padding:14px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
.post-card h3{margin:0 0 6px}
/* 404 */
.center{display:flex;align-items:center;justify-content:center;min-height:50vh;text-align:center}