/* ============================================================
   gohary.uk — bilingual EN/AR landing page
   ============================================================ */

:root{
  --bg-0:#070a14;
  --bg-1:#0b1220;
  --bg-2:#101a30;
  --surface:#0e1729;
  --line:#1d2a44;
  --line-2:#2a3a5c;
  --text:#e6ecf6;
  --text-2:#a8b3c8;
  --text-3:#6f7d96;
  --brand:#5eead4;       /* teal */
  --brand-2:#22d3ee;     /* cyan */
  --brand-3:#a78bfa;     /* purple accent */
  --danger:#f87171;
  --ok:#34d399;
  --max:1180px;
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 12px 40px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  --font-en:"Inter","Manrope",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --font-ar:"Cairo","Inter",system-ui,sans-serif;
  --font-head:"Manrope","Inter",system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg-0); color:var(--text);
  font-family:var(--font-en); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
[dir="rtl"] body{ font-family:var(--font-ar); }

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }

.container{ max-width:var(--max); margin-inline:auto; padding-inline:24px; }

.eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.14em;
  font-size:12px; font-weight:700; color:var(--brand);
  padding:6px 10px; border:1px solid color-mix(in oklab, var(--brand) 35%, transparent);
  border-radius:999px; background:color-mix(in oklab, var(--brand) 8%, transparent);
}
[dir="rtl"] .eyebrow{ letter-spacing:0; }

h1,h2,h3{ font-family:var(--font-head); color:var(--text); letter-spacing:-.01em; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{ font-family:var(--font-ar); letter-spacing:0; }
h1{ font-size:clamp(34px,5.2vw,58px); line-height:1.08; font-weight:800; margin:.5em 0 .4em; }
h2{ font-size:clamp(26px,3.4vw,40px); line-height:1.15; font-weight:800; margin:.2em 0 .5em; }
h3{ font-size:20px; font-weight:700; margin:.2em 0 .6em; }

p{ color:var(--text-2); margin:0 0 1em; }
.muted{ color:var(--text-3); }

/* --------- nav --------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:18px;
  padding:14px 24px;
  background:linear-gradient(180deg, rgba(7,10,20,.92), rgba(7,10,20,.65));
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; }
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center;
  font-family:var(--font-head); font-weight:800; font-size:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#06121a; letter-spacing:.04em;
  box-shadow:0 6px 18px color-mix(in oklab, var(--brand) 35%, transparent);
}
.brand-mark.small{ width:24px; height:24px; font-size:11px; margin-inline-end:8px; }
.brand-name{ font-size:15px; }
.nav-links{ display:flex; gap:22px; margin-inline-start:auto; }
.nav-links a{
  color:var(--text-2); font-size:14.5px; font-weight:500;
  padding:8px 2px; border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav-links a:hover{ color:var(--text); border-bottom-color:var(--brand); }
.nav-actions{ display:flex; gap:10px; align-items:center; }
.menu-toggle{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--text); margin:4px 0; border-radius:2px; transition:transform .2s; }

.btn-primary, .btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:10px;
  font-weight:600; font-size:14.5px; line-height:1;
  cursor:pointer; border:1px solid transparent;
  transition:transform .12s, background .2s, border-color .2s, color .2s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#06121a;
  box-shadow:0 8px 22px color-mix(in oklab, var(--brand) 25%, transparent);
}
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.btn-ghost{
  background:transparent; color:var(--text);
  border-color:var(--line-2);
}
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }

/* --------- hero --------- */
.hero{
  position:relative; overflow:hidden;
  padding:110px 0 90px;
  background:
    radial-gradient(1100px 600px at 80% -10%, color-mix(in oklab, var(--brand-3) 18%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 60%),
    var(--bg-0);
}
.hero-glow{
  position:absolute; inset:auto -10% -50% -10%; height:60%;
  background:radial-gradient(60% 60% at 50% 0%, color-mix(in oklab, var(--brand-2) 18%, transparent), transparent 70%);
  filter:blur(40px);
  pointer-events:none;
}
.hero-inner{ position:relative; }
.lead{
  font-size:clamp(16px,1.6vw,19px); color:var(--text-2); max-width:780px;
}
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 36px; }
.hero-strip{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  border-top:1px solid var(--line);
  padding-top:24px;
}
.hero-strip li{ display:flex; flex-direction:column; gap:2px; }
.hero-strip strong{ color:var(--text); font-size:15px; }
.hero-strip span{ color:var(--text-3); font-size:13px; }

/* --------- sections --------- */
.section{ padding:84px 0; }
.section-alt{ background:var(--bg-1); border-block:1px solid var(--line); }
.section-head{ max-width:760px; margin-bottom:36px; }
.section-head h2{ margin-top:.4em; }

/* --------- cards --------- */
.cards{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px;
  position:relative; transition:border-color .2s, transform .2s;
}
.card:hover{ border-color:var(--brand); transform:translateY(-2px); }
.card-icon{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:color-mix(in oklab, var(--brand) 14%, transparent);
  color:var(--brand);
  margin-bottom:14px;
}
.card-icon svg{ width:22px; height:22px; }
.card-tags{
  list-style:none; padding:0; margin:14px 0 0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.card-tags li{
  font-size:12px; padding:4px 10px; border-radius:999px;
  background:color-mix(in oklab, var(--brand-2) 10%, transparent);
  border:1px solid color-mix(in oklab, var(--brand-2) 28%, transparent);
  color:color-mix(in oklab, var(--brand-2) 80%, white);
  font-weight:500;
}

/* --------- approach grid --------- */
.grid-3{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.block{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px;
}
.block h3{ color:var(--brand); }

/* --------- standards --------- */
.standards{
  list-style:none; padding:0; margin:0;
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.standards li{
  display:flex; flex-direction:column;
  padding:18px 20px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line);
}
.standards strong{ color:var(--text); font-size:15px; }
.standards span{ color:var(--text-3); font-size:13.5px; margin-top:4px; }

/* --------- about --------- */
.about-grid{
  display:grid; gap:42px;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  align-items:start;
}
.about-aside{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:24px;
}
.about-aside h3{ color:var(--brand); margin-top:0; }
.about-aside ul{ list-style:none; padding:0; margin:0; }
.about-aside li{
  position:relative; padding-inline-start:22px; padding-block:8px;
  color:var(--text-2);
}
.about-aside li::before{
  content:""; position:absolute; inset-inline-start:0; top:18px;
  width:8px; height:8px; border-radius:2px;
  background:var(--brand); transform:rotate(45deg);
}

/* --------- contact --------- */
.contact-grid{
  display:grid; gap:42px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:start;
}
.contact-list{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.contact-list li{ display:flex; gap:14px; align-items:baseline; }
.contact-list .lbl{
  width:90px; color:var(--text-3); font-size:13px; text-transform:uppercase; letter-spacing:.1em;
}
[dir="rtl"] .contact-list .lbl{ letter-spacing:0; }
.contact-list a{ color:var(--brand); }

.form{
  display:grid; gap:14px;
  grid-template-columns:1fr 1fr;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1 / -1; }
.form label{ font-size:13px; color:var(--text-3); }
.form input, .form select, .form textarea{
  width:100%;
  background:var(--bg-1); color:var(--text);
  border:1px solid var(--line-2);
  border-radius:10px;
  padding:11px 12px; font-size:15px; font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
}
.form textarea{ resize:vertical; min-height:120px; }
.form button{ grid-column:1 / -1; justify-self:flex-start; padding:12px 26px; }
.form-status{ grid-column:1 / -1; margin:0; font-size:14px; }
.form-status.ok{ color:var(--ok); }
.form-status.err{ color:var(--danger); }

/* --------- footer --------- */
.footer{ background:var(--bg-1); border-top:1px solid var(--line); padding:28px 0; }
.footer-inner{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--text-3); font-size:13.5px; }
.footer-inner > div{ display:flex; align-items:center; gap:8px; }

/* --------- responsive --------- */
@media (max-width: 880px){
  .nav-links{ display:none; }
  .nav-actions .btn-primary{ display:none; }
  .menu-toggle{ display:block; margin-inline-start:auto; }
  .nav.open .nav-links{
    display:flex; flex-direction:column; gap:8px;
    position:absolute; top:60px; inset-inline:0;
    background:var(--bg-1); border-bottom:1px solid var(--line);
    padding:14px 24px;
  }
  .nav.open .nav-actions{ position:absolute; top:14px; inset-inline-end:64px; }
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .hero{ padding:80px 0 70px; }
}

/* --------- focus visible --------- */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

/* --------- selection --------- */
::selection{ background:color-mix(in oklab, var(--brand) 35%, transparent); color:var(--text); }