@font-face{
  font-family:"Cairo Local";
  src:url("../fonts/Cairo/static/Cairo-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face{
  font-family:"Cairo Local";
  src:url("../fonts/Cairo/static/Cairo-Bold.ttf") format("truetype");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

@font-face{
  font-family:"Cairo Local";
  src:url("../fonts/Cairo/static/Cairo-ExtraBold.ttf") format("truetype");
  font-style:normal;
  font-weight:800;
  font-display:swap;
}

@font-face{
  font-family:"Tajawal Local";
  src:url("../fonts/Tajawal/Tajawal-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face{
  font-family:"Tajawal Local";
  src:url("../fonts/Tajawal/Tajawal-Medium.ttf") format("truetype");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}

@font-face{
  font-family:"Tajawal Local";
  src:url("../fonts/Tajawal/Tajawal-Bold.ttf") format("truetype");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

@font-face{
  font-family:"Tajawal Local";
  src:url("../fonts/Tajawal/Tajawal-ExtraBold.ttf") format("truetype");
  font-style:normal;
  font-weight:800;
  font-display:swap;
}

:root{
  --bg:#f6efdf;
  --bg-deep:#eadcbf;
  --surface:rgba(255,252,246,.82);
  --surface-strong:#fffaf3;
  --forest-950:#062817;
  --forest-900:#076734;
  --forest-800:#0a8a45;
  --forest-700:#16a34a;
  --forest-300:#8fd0a8;
  --sand-200:#eadcc2;
  --sand-100:#f9f1e2;
  --gold:#f0c419;
  --gold-soft:#f7e38c;
  --copper:#c41439;
  --copper-soft:#f4ccd6;
  --text:#183227;
  --muted:#5d7164;
  --line:rgba(6,31,23,.12);
  --line-strong:rgba(6,31,23,.2);
  --white:#fff;
  --display-font:"Cairo Local","Cairo","Tahoma",sans-serif;
  --body-font:"Tajawal Local","IBM Plex Sans Arabic","Tahoma","Segoe UI",sans-serif;
  --container:min(1180px,92vw);
  --radius-xl:36px;
  --radius-lg:26px;
  --radius-md:18px;
  --shadow-xl:0 32px 90px rgba(6,40,23,.14);
  --shadow-lg:0 22px 54px rgba(6,40,23,.1);
  --shadow-md:0 12px 28px rgba(6,40,23,.08);
}

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-width:320px;
  font-family:var(--body-font);
  color:var(--text);
  background:
    radial-gradient(circle at 90% 8%, rgba(240,196,25,.28), transparent 18%),
    radial-gradient(circle at 12% 18%, rgba(10,138,69,.12), transparent 22%),
    linear-gradient(180deg, #fffdf9 0%, var(--bg) 48%, #fff8ef 100%);
  line-height:1.7;
  overflow-x:hidden;
}

::selection{
  background:rgba(203,155,69,.24);
  color:var(--forest-950);
}

img{display:block;max-width:100%}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
  color:inherit;
}

p,
h1,
h2,
h3{
  margin:0;
}

ul,
ol{
  margin:0;
  padding:0;
}

.container{
  width:var(--container);
  margin-inline:auto;
}

.section{
  position:relative;
  padding:clamp(3.8rem, 7vw, 5.8rem) 0;
}

.page-shell{
  position:relative;
  isolation:isolate;
}

.ambient{
  position:fixed;
  inset:auto;
  pointer-events:none;
  z-index:-1;
  filter:blur(10px);
}

.ambient--one{
  width:28rem;
  height:28rem;
  top:7rem;
  left:-9rem;
  border-radius:41% 59% 67% 33%;
  background:radial-gradient(circle, rgba(17,80,58,.14), transparent 72%);
  animation:drift 14s ease-in-out infinite;
}

.ambient--two{
  width:26rem;
  height:26rem;
  top:34rem;
  right:-10rem;
  border-radius:62% 38% 47% 53%;
  background:radial-gradient(circle, rgba(203,105,71,.12), transparent 70%);
  animation:drift 18s ease-in-out infinite reverse;
}

.ambient--grid{
  inset:0;
  filter:none;
  background-image:radial-gradient(rgba(13,51,38,.08) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.14), transparent 42%);
  opacity:.32;
}

.card{
  border:1px solid rgba(6,31,23,.08);
  border-radius:var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,243,.88));
  box-shadow:var(--shadow-lg);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.card:hover{
  transform:translateY(-.2rem);
  border-color:rgba(6,31,23,.14);
  box-shadow:0 18px 42px rgba(6,40,23,.12);
}

.eyebrow,
.section-heading__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.65rem 1rem;
  border-radius:999px;
  border:1px solid rgba(203,155,69,.24);
  background:rgba(255,255,255,.72);
  color:var(--forest-800);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:var(--shadow-md);
}

.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:2rem;
}

.section-heading--light .section-heading__title,
.section-heading--light .section-heading__eyebrow{
  color:var(--white);
}

.section-heading__title{
  max-width:16ch;
  font-family:var(--display-font);
  font-size:clamp(2rem, 4.2vw, 3.45rem);
  line-height:1.22;
  color:var(--forest-900);
  letter-spacing:-.01em;
}

.section-heading__text{
  max-width:42rem;
  color:var(--muted);
  font-size:.98rem;
  line-height:1.9;
  font-weight:700;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:3rem;
  padding:.82rem 1.22rem;
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  font-size:.95rem;
  font-weight:900;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}

.button:hover{
  transform:translateY(-3px);
}

.button--primary{
  background:linear-gradient(135deg, var(--forest-800), var(--forest-700));
  color:var(--white);
  box-shadow:0 18px 34px rgba(17,80,58,.24);
}

.button--accent{
  background:linear-gradient(135deg, var(--copper), #b44f2d);
  color:var(--white);
  box-shadow:0 18px 34px rgba(203,105,71,.22);
}

.button--secondary{
  background:rgba(255,255,255,.74);
  color:var(--forest-900);
  border-color:var(--line);
}

.button--ghost{
  background:rgba(255,255,255,.58);
  color:var(--forest-800);
  border-color:rgba(13,51,38,.14);
}

.button--ghost-light{
  background:rgba(255,255,255,.12);
  color:var(--white);
  border-color:rgba(255,255,255,.2);
}

.mini-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.4rem;
  padding:.55rem .95rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--white);
  font-size:.82rem;
  font-weight:800;
  cursor:pointer;
  transition:transform .25s ease, background-color .25s ease;
}

.mini-link:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.14);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:2.4rem;
  padding:.55rem .95rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
}

.badge--urgent{
  background:rgba(203,105,71,.15);
  color:#8b3e21;
  border:1px solid rgba(203,105,71,.18);
}

.badge--soft{
  background:rgba(17,80,58,.1);
  color:var(--forest-800);
  border:1px solid rgba(17,80,58,.12);
}

.toast{
  position:fixed;
  left:1rem;
  bottom:1rem;
  z-index:50;
  min-width:min(18rem, calc(100vw - 2rem));
  max-width:22rem;
  padding:.9rem 1rem;
  border-radius:1rem;
  background:rgba(6,31,23,.94);
  color:var(--white);
  box-shadow:var(--shadow-lg);
  font-size:.9rem;
  font-weight:900;
  opacity:0;
  transform:translateY(1rem);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}

.toast.is-visible{
  opacity:1;
  transform:translateY(0);
}

.reveal{
  opacity:0;
  transform:translateY(2rem);
  transition:opacity .8s ease, transform .8s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}

@keyframes drift{
  50%{transform:translateY(1.8rem) rotate(5deg)}
}

@keyframes bob{
  50%{transform:translateY(-.45rem)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{
    opacity:1;
    transform:none;
  }
}

@media (max-width: 860px){
  .section{
    padding:4rem 0;
  }

  .section-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .section-heading__title,
  .section-heading__text{
    max-width:none;
  }
}

@media (max-width: 640px){
  .button{
    width:100%;
  }

  .toast{
    left:.75rem;
    right:.75rem;
    max-width:none;
  }
}