/* Basayer — static site styles. No build step. Edit colours in :root. */
:root{
  --bg:#0a1220; --bg-alt:#0d1728; --surface:#111d33; --surface-2:#16253f;
  --text:#e8eef8; --muted:#a3b2c8; --border:#243553;
  --accent:#2dd4bf; --accent-ink:#04201c; --accent-2:#38bdf8;
  --radius:16px; --maxw:1120px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic","Noto Naskh Arabic",Tahoma,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#f6f9fc; --bg-alt:#eaf1f8; --surface:#ffffff; --surface-2:#f1f6fb;
    --text:#0b1a2e; --muted:#44546b; --border:#d3dfec;
    --accent:#0d9488; --accent-ink:#ffffff; --accent-2:#0369a1;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.7;font-size:1.0625rem;-webkit-font-smoothing:antialiased}
html[lang="ar"] body{line-height:1.9}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{line-height:1.25;margin:0 0 .5em;letter-spacing:-.01em}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0;line-height:1.45}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}

/* Language switching: both languages live in the markup; CSS shows one. */
html[lang="ar"] [data-l="en"],html[lang="en"] [data-l="ar"]{display:none!important}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
.icon{width:24px;height:24px;flex:none}
.mono{font-family:var(--mono);font-size:.9em;opacity:.9}

:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:8px;z-index:100;text-decoration:none;font-weight:700}
.skip:focus{top:12px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--border)}
.bar{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.2rem}
.brand-mark{width:34px;height:34px;flex:none}
.brand-name{display:flex;align-items:baseline;gap:8px}
.brand-ar{font-weight:700;color:var(--accent);font-size:1rem}
.actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.nav{display:none}
.nav a{text-decoration:none;color:var(--muted);padding:8px 12px;border-radius:8px;font-size:.98rem}
.nav a:hover{color:var(--text);background:var(--surface)}
.lang-toggle,.menu-toggle{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 14px;cursor:pointer;min-height:40px;font-weight:600}
.lang-toggle:hover,.menu-toggle:hover{border-color:var(--accent)}
.menu-toggle{width:44px;padding:0;display:grid;place-items:center}
.bars,.bars::before,.bars::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s,opacity .2s}
.bars::before,.bars::after{content:"";position:absolute;inset-inline-start:0}
.bars::before{top:-6px}.bars::after{top:6px}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}
.nav.open{display:flex;flex-direction:column;position:absolute;inset-inline:0;top:100%;background:var(--bg);border-bottom:1px solid var(--border);padding:10px 20px 16px}
.nav.open a{padding:12px 8px;font-size:1.05rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-decoration:none;font-weight:700;padding:14px 22px;border-radius:12px;border:1px solid transparent;min-height:48px;transition:transform .15s,background .15s,border-color .15s}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent);background:var(--surface)}
.arrow{width:20px;height:20px}
[dir="rtl"] .arrow{transform:scaleX(-1)}

/* Hero */
.hero{position:relative;overflow:hidden;padding:56px 0 64px;background:
  radial-gradient(900px 420px at 85% -10%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),
  radial-gradient(700px 380px at 0% 20%,color-mix(in srgb,var(--accent-2) 14%,transparent),transparent 70%),var(--bg)}
.hero-grid{display:grid;gap:36px;align-items:center}
.eyebrow{color:var(--accent);font-weight:700;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
html[lang="ar"] .eyebrow{letter-spacing:0;text-transform:none;font-size:1rem}
.hero h1{font-size:clamp(2rem,6.4vw,3.5rem);font-weight:800;margin-bottom:.45em}
.lead{color:var(--muted);font-size:1.15rem;max-width:60ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-art{display:none}
.art{width:100%;height:auto;max-width:460px;margin-inline:auto;display:block}
.art .n{animation:float 7s ease-in-out infinite}
.art .n:nth-child(2){animation-delay:-1.5s}.art .n:nth-child(3){animation-delay:-3s}.art .n:nth-child(4){animation-delay:-4.5s}
@keyframes float{50%{transform:translateY(-6px)}}

/* Sections */
.section{padding:64px 0}
.section.alt{background:var(--bg-alt);border-block:1px solid var(--border)}
.section-head{max-width:720px;margin-bottom:32px}
.section-head h2,.contact h2{font-size:clamp(1.55rem,4.2vw,2.3rem);font-weight:800}
.section-lead{color:var(--muted);font-size:1.1rem}
.grid{display:grid;gap:16px}

.cards{grid-template-columns:1fr}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 60%,var(--border))}
.card h3{font-size:1.15rem}
.card p{color:var(--muted);margin:0}
.ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);margin-bottom:14px}

.steps{grid-template-columns:1fr;counter-reset:s}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.step h3{font-size:1.15rem}.step p{color:var(--muted);margin:0}
.num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:800;margin-bottom:12px}

.why{grid-template-columns:1fr}
.why li{display:flex;gap:14px;align-items:flex-start;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.why h3{font-size:1.1rem;margin-bottom:.3em}.why p{color:var(--muted);margin:0}
.tick{color:var(--accent);margin-top:4px}

.work{grid-template-columns:1fr}
.work-card{position:relative;border:2px dashed var(--border);border-radius:var(--radius);padding:20px;background:transparent}
.work-card h3{font-size:1.1rem}.work-card p{color:var(--muted);margin:0}
.thumb{aspect-ratio:16/9;border-radius:12px;margin-bottom:14px;background:repeating-linear-gradient(135deg,var(--surface) 0 12px,var(--surface-2) 12px 24px)}
.tag{position:absolute;top:30px;inset-inline-start:30px;z-index:1;background:var(--bg);color:var(--muted);border:1px solid var(--border);border-radius:999px;font-size:.8rem;padding:2px 12px}

.contact{display:grid;gap:28px;background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:24px;padding:28px}
.contact-actions{display:flex;flex-direction:column;gap:12px;justify-content:center}
.contact-actions .btn{justify-content:flex-start}

.site-footer{border-top:1px solid var(--border);padding:28px 0 40px;color:var(--muted);font-size:.95rem}
.site-footer p{margin:0 0 .6em}.muted{font-size:.9rem}

/* Larger screens */
@media (min-width:700px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .work{grid-template-columns:repeat(3,1fr)}
  .wrap{padding-inline:28px}
}
@media (min-width:960px){
  .nav,.nav.open{display:flex;position:static;flex-direction:row;background:none;border:0;padding:0;margin-inline-start:20px;gap:2px}
  .nav.open a{padding:8px 12px;font-size:.98rem}
  .menu-toggle{display:none}
  .hero{padding:96px 0 104px}
  .hero-grid{grid-template-columns:1.15fr .85fr}
  .hero-art{display:block}
  .cards{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .section{padding:92px 0}
  .contact{grid-template-columns:1.2fr 1fr;align-items:center;padding:48px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (forced-colors:active){.btn-primary{border-color:currentColor}}

/* 404 page */
.nf{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:48px}
.nf h1{font-size:clamp(2rem,6vw,3rem)}