:root {
  --emerald: #0E7A5F;
  --emerald-light: #14946F;
  --emerald-dark: #0A5A46;
  --gold: #C9A24B;
  --gold-light: #DCC079;
  --cream: #FBF9F4;
  --surface: #FFFFFF;
  --text: #1B2420;
  --text-soft: #6C7771;
  --divider: #E7E2D7;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(10, 90, 70, 0.10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: "Tajawal", "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.85;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* Language visibility (default = Arabic) */
body[data-lang="ar"] .en { display: none; }
body[data-lang="en"] .ar { display: none; }
body[data-lang="en"] { direction: ltr; text-align: left; }
body[data-lang="ar"] { direction: rtl; text-align: right; }

.wrap { max-width: 820px; margin: 0 auto; padding: 0 22px 90px; }

/* Header */
header.hero {
  background: linear-gradient(135deg, var(--emerald-dark) 0%, var(--emerald) 55%, var(--emerald-light) 100%);
  color: #fff;
  padding: 54px 22px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
header.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -20%, rgba(201,162,75,0.35), transparent 60%);
  pointer-events: none;
}
.logo-full {
  width: 132px; height: auto; margin: 0 auto 14px; display: block;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.30));
}
header.hero h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: .3px; font-family: "Cairo","Tajawal",sans-serif; }
header.hero p.sub { margin: 8px 0 0; opacity: .92; font-size: 16px; }

/* Language toggle */
.langbar { position: relative; z-index: 2; margin-top: 22px; }
.langbar button {
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.12);
  color: #fff;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, transform .1s;
}
.langbar button:hover { background: rgba(255,255,255,0.22); }
.langbar button:active { transform: scale(.97); }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 38px;
  margin-top: -36px;
  position: relative;
  z-index: 1;
}
.effective {
  font-size: 14px;
  color: var(--text-soft);
  border-inline-start: 3px solid var(--gold);
  padding-inline-start: 12px;
  margin: 0 0 26px;
}

h2 {
  font-family: "Cairo","Tajawal",sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--emerald-dark);
  margin: 36px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--divider);
}
h2:first-of-type { margin-top: 8px; }
h3 { font-size: 18px; color: var(--emerald); margin: 22px 0 6px; }
p { margin: 0 0 14px; color: var(--text); }
ul { margin: 0 0 16px; padding-inline-start: 22px; }
li { margin-bottom: 8px; }
a { color: var(--emerald); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--emerald-dark); }

.note {
  background: var(--cream);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 18px 0;
}

/* Index tiles */
.tiles { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin-top: 8px; }
@media (max-width: 560px){ .tiles { grid-template-columns: 1fr; } }
.tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 28px 26px;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 8px 26px rgba(10,90,70,.06);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-light); text-decoration: none; }
.tile h3 { margin: 0 0 6px; color: var(--emerald-dark); font-size: 20px; }
.tile p { margin: 0; color: var(--text-soft); font-size: 15px; }

footer {
  text-align: center;
  color: var(--text-soft);
  font-size: 14px;
  margin-top: 40px;
}
footer a { font-weight: 700; }
.footlinks { margin-top: 10px; }
.footlinks a { margin: 0 10px; }