/* Hareth Group design system — the subset used by hareth.banan.tech.
   Copied from the "Hareth Group Design System" project in Claude Design
   (tokens/*.css + the .btn and .lit rules from tokens/components.css). */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&family=Montserrat:wght@400;500;800&display=swap');

:root {
  --color-bg: #0f0d0b;
  --color-surface: #1a1714;
  --color-surface-2: #241f1a;
  --color-text: #f4ecdf;
  --color-text-muted: #b9ad9a;
  --color-accent: #d4a24c;
  --color-divider: color-mix(in srgb, #d4a24c 28%, transparent);
  --color-divider-soft: color-mix(in srgb, #f4ecdf 10%, transparent);
  --color-accent-300: #ecc983;
  --color-accent-400: #e0b265;
  --color-accent-600: #b8862f;
  --color-neutral-900: #161310;
  --text-accent: var(--color-accent-400);
  --gold-gradient: linear-gradient(180deg, #f7e0a3 0%, #e2b867 38%, #c28c35 70%, #9a6a1f 100%);

  --font-heading: "Tajawal", "Segoe UI", sans-serif;
  --font-body: "Tajawal", "Segoe UI", sans-serif;
  --font-caps-latin: "Montserrat", sans-serif;
  --text-body: 15px;
  --leading-tight: 1.25;
  --leading-body: 1.7;

  --radius-lg: 24px;
  --radius-pill: 999px;

  --glow-sm: 0 0 12px color-mix(in srgb, #e2b867 35%, transparent);
  --glow-md: 0 0 28px color-mix(in srgb, #e2b867 40%, transparent), 0 0 4px color-mix(in srgb, #f7e0a3 60%, transparent);
  --glow-lg: 0 0 40px color-mix(in srgb, #e2b867 50%, transparent), 0 0 6px color-mix(in srgb, #f7e0a3 70%, transparent);
  --glow-ring: 0 0 0 2px #f2cf87, 0 0 24px 4px color-mix(in srgb, #e2a64a 60%, transparent), inset 0 0 40px color-mix(in srgb, #e2a64a 25%, transparent);
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { direction: rtl; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-heading); line-height: var(--leading-tight); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-accent); text-decoration: none; }
a:hover { color: var(--color-accent-300); }
img { display: block; max-width: 100%; height: auto; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 35%, transparent); }
.text-gold { color: var(--color-accent-400); }
.text-gold-metal { background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* buttons: pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:700;font-size:15px;line-height:1.2;padding:11px 24px;border-radius:var(--radius-pill);border:1px solid transparent;background:transparent;color:var(--color-text);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),color var(--dur-fast)}
.btn svg{width:20px;height:20px;stroke-width:1.75}
.btn-primary{background:var(--gold-gradient);color:var(--color-neutral-900);border-color:var(--color-accent-300)}
.btn-primary:hover{box-shadow:var(--glow-md);color:var(--color-neutral-900)}
.btn-primary:active{background:var(--color-accent-600);box-shadow:none}
.btn-secondary{border-color:var(--color-accent);color:var(--color-text)}
.btn-secondary:hover{background:color-mix(in srgb,var(--color-accent) 12%,transparent);box-shadow:var(--glow-sm);color:var(--color-text)}
.btn-sm{font-size:13px;padding:7px 16px}
.btn-lg{font-size:18px;padding:14px 30px}

/* imagery: warm the photos to match the gold palette */
.lit{filter:sepia(.12) saturate(.95) contrast(1.05)}

/* page chrome shared by every page on the site */
.container { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(15,13,11,0.78); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-divider-soft); }
.site-header .container { padding-block: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--color-text); }
.brand:hover { color: var(--color-text); }
.brand img { height: 40px; width: auto; }
.brand-name { display: flex; flex-direction: column; line-height: 1.2; direction: ltr; text-align: right; font-family: var(--font-caps-latin); }
.brand-name strong { font-weight: 800; font-size: 15px; letter-spacing: 0.04em; }
.brand-name small { font-size: 11px; color: var(--color-text-muted); letter-spacing: 0.18em; }
.kicker { display: flex; align-items: center; gap: 10px; color: var(--color-accent); font-size: 15px; font-weight: 700; }
.kicker::before { content: ""; width: 8px; height: 8px; background: var(--color-accent); transform: rotate(45deg); }
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; }
.site-footer { border-top: 1px solid var(--color-divider-soft); padding: 24px; text-align: center; font-size: 13px; color: var(--color-text-muted); }