@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/tajawal-300.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/tajawal-400.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/tajawal-500.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/tajawal-700.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/tajawal-800.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 900; font-display: swap; src: url("./fonts/tajawal-900.woff2") format("woff2"); }

:root {
  --font-tajawal: "Tajawal";
  --ink: #071d18;
  --green: #0b3c32;
  --green-2: #145647;
  --cream: #f6f1e4;
  --paper: #fbf8f0;
  --gold: #d7b65b;
  --gold-light: #f0db9e;
  --muted: #70817b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-tajawal), "Tajawal", Tahoma, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
::selection { background: var(--gold); color: var(--ink); }

.site-shell { min-height: 100vh; overflow: hidden; }
.topbar {
  align-items: center;
  display: flex;
  height: 96px;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 82px);
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 20;
}
.brand-lockup img { display: block; height: auto; width: 230px; }
.brand-lockup--compact { background: rgba(255,255,255,.92); border-radius: 7px; padding: 7px 10px; }
.brand-lockup--compact img { width: 158px; }
.topbar-actions { align-items: center; color: #f7f0df; display: flex; font-size: 14px; gap: 30px; }
.topbar-actions > a:first-child { opacity: .78; }
.text-button { border: 1px solid rgba(215,182,91,.5); border-radius: 999px; padding: 10px 19px; transition: .25s ease; }
.text-button:hover { background: var(--gold); color: var(--ink); }

.hero {
  align-items: center;
  background:
    radial-gradient(circle at 78% 42%, rgba(38,112,89,.52), transparent 25%),
    radial-gradient(circle at 18% 85%, rgba(215,182,91,.16), transparent 28%),
    linear-gradient(128deg, #03120f 0%, #082e27 48%, #0b4438 75%, #061d18 100%);
  color: white;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 100svh;
  overflow: hidden;
  padding: 120px clamp(24px, 7vw, 120px) 80px;
  position: relative;
}
.hero::before {
  background-image: radial-gradient(rgba(255,255,255,.13) .7px, transparent .7px);
  background-size: 8px 8px;
  content: "";
  inset: 0;
  opacity: .1;
  pointer-events: none;
  position: absolute;
}
.hero::after { background: linear-gradient(90deg, transparent, rgba(215,182,91,.23), transparent); bottom: 0; content: ""; height: 1px; left: 8%; right: 8%; }
.hero-architecture { bottom: -9%; height: 92%; opacity: .75; pointer-events: none; position: absolute; right: 49%; width: 52%; }
.architecture-arch { border: 1px solid rgba(230,199,116,.16); border-bottom: 0; border-radius: 48% 48% 0 0; bottom: 0; left: 50%; position: absolute; transform: translateX(-50%); }
.architecture-arch::before { background: linear-gradient(180deg, rgba(215,182,91,.45), transparent); content: ""; height: 55%; position: absolute; right: -1px; top: 28%; width: 1px; }
.architecture-arch--outer { height: 94%; width: 94%; }
.architecture-arch--middle { height: 79%; width: 73%; }
.architecture-arch--inner { height: 64%; width: 52%; }
.hero-copy { max-width: 720px; position: relative; z-index: 4; }
.eyebrow { color: var(--gold-light); display: inline-flex; font-size: 14px; letter-spacing: .07em; margin-bottom: 22px; }
.eyebrow::before { background: var(--gold); content: ""; height: 1px; margin: 10px 0 0 14px; width: 36px; }
.hero h1 { font-weight: 300; letter-spacing: -.035em; line-height: 1.04; margin: 0; }
.hero h1 span { display: block; font-size: clamp(52px, 7vw, 102px); }
.hero h1 strong { background: linear-gradient(120deg, #b78d2c, #f3dda1 48%, #c59d3f); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; font-size: clamp(70px, 9vw, 132px); font-weight: 800; }
.hero-copy > p { color: rgba(255,255,255,.68); font-size: clamp(16px, 1.5vw, 21px); line-height: 2; margin: 30px 0 38px; max-width: 630px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; }
.primary-button, .secondary-button { align-items: center; border-radius: 5px; display: inline-flex; font-size: 15px; justify-content: center; min-height: 56px; padding: 0 24px; transition: .25s ease; }
.primary-button { background: linear-gradient(135deg, #f0d98f, #cda744); color: #122c24; gap: 30px; box-shadow: 0 14px 50px rgba(0,0,0,.22); }
.primary-button:hover { transform: translateY(-3px); box-shadow: 0 18px 60px rgba(215,182,91,.25); }
.primary-button b { font-size: 21px; font-weight: 400; }
.secondary-button { border: 1px solid rgba(255,255,255,.24); color: rgba(255,255,255,.8); }
.secondary-button:hover { border-color: var(--gold); color: var(--gold-light); }
.hero-emblem { align-items: center; display: flex; justify-content: center; min-height: 610px; position: relative; z-index: 3; }
.emblem-arch { align-items: center; background: linear-gradient(160deg, rgba(255,251,239,.99), rgba(238,226,191,.97)); border: 1px solid #d8b85e; border-radius: 48% 48% 8px 8px; box-shadow: 0 38px 110px rgba(0,0,0,.38), inset 0 0 0 7px rgba(255,255,255,.54), inset 0 0 0 8px rgba(169,127,34,.18); display: flex; flex-direction: column; height: min(38vw, 580px); justify-content: center; padding: 52px 35px 34px; position: relative; width: min(35vw, 530px); z-index: 2; }
.emblem-arch::before, .emblem-arch::after { border: 1px solid rgba(155,116,24,.28); border-radius: 48% 48% 5px 5px; content: ""; inset: 18px; pointer-events: none; position: absolute; }
.emblem-arch::after { border-color: rgba(255,255,255,.85); inset: 23px; }
.hero-emblem img { mix-blend-mode: multiply; position: relative; width: 92%; z-index: 2; }
.emblem-star { color: #b78e31; font-size: 18px; position: absolute; top: 48px; }
.emblem-caption { align-items: center; color: #285245; display: flex; font-size: 12px; gap: 11px; margin-top: 18px; position: relative; z-index: 2; }
.emblem-caption i { background: #b48b30; height: 1px; width: 32px; }
.emblem-caption b { color: #a57a20; font-size: 15px; font-weight: 700; }
.emblem-halo { animation: pulse-halo 5s ease-in-out infinite; border: 1px solid rgba(215,182,91,.3); border-radius: 50%; height: min(43vw, 650px); position: absolute; width: min(43vw, 650px); }
.emblem-halo::before, .emblem-halo::after { border: 1px solid rgba(215,182,91,.12); border-radius: 50%; content: ""; inset: -35px; position: absolute; }
.emblem-halo::after { inset: -82px; }
.hero-orbit { border: 1px solid rgba(215,182,91,.12); border-radius: 50%; pointer-events: none; position: absolute; }
.hero-orbit--one { height: 840px; left: -580px; top: -410px; width: 840px; }
.hero-orbit--two { bottom: -470px; height: 750px; right: 30%; width: 750px; }
.hero-spark { animation: float-spark 4s ease-in-out infinite; color: var(--gold); font-size: 20px; opacity: .55; position: absolute; }