@import "tailwindcss";
@import "tw-animate-css";
@import "../vendor/shadcn-tailwind-4.13.0.css";

@font-face {
  font-family: "Vazirmatn Variable";
  src: url("/fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Vazirmatn Variable";
  src: url("/fonts/vazirmatn-latin-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF;
}
@font-face {
  font-family: "Estedad Variable";
  src: url("/fonts/estedad-arabic-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Estedad Variable";
  src: url("/fonts/estedad-latin-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF;
}
@font-face {
  font-family: "Noto Sans Arabic Variable";
  src: url("/fonts/noto-sans-arabic-arabic-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Noto Sans Arabic Variable";
  src: url("/fonts/noto-sans-arabic-latin-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF;
}

:root {
  --site-font: "Vazirmatn Variable", Tahoma, Arial, sans-serif;
  --background: #f7f8f5;
  --foreground: #10251d;
  --card: #ffffff;
  --card-foreground: #10251d;
  --popover: #ffffff;
  --popover-foreground: #10251d;
  --primary: #0a5a3c;
  --primary-foreground: #ffffff;
  --secondary: #edf3ef;
  --secondary-foreground: #0a4a34;
  --muted: #edf1ee;
  --muted-foreground: #5c7169;
  --accent: #f1e4c4;
  --accent-foreground: #624817;
  --destructive: #bd2c2c;
  --border: #dce6e0;
  --input: #dce6e0;
  --ring: #b98a2e;
  --chart-1: #0a5a3c;
  --chart-2: #d5aa49;
  --chart-3: #1d7b59;
  --chart-4: #8f6a20;
  --chart-5: #49645a;
  --radius: 0.875rem;
  --sidebar: #f4f7f5;
  --sidebar-foreground: #10251d;
  --sidebar-primary: #0a5a3c;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f1e4c4;
  --sidebar-accent-foreground: #624817;
  --sidebar-border: #dce6e0;
  --sidebar-ring: #b98a2e;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --font-sans: var(--site-font);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--site-font); }
body[data-site-font="estedad"] { --site-font: "Estedad Variable", Tahoma, Arial, sans-serif; }
body[data-site-font="noto-sans-arabic"] { --site-font: "Noto Sans Arabic Variable", Tahoma, Arial, sans-serif; }
body[data-site-font="tahoma"] { --site-font: Tahoma, Arial, sans-serif; }
a { text-decoration: none; }

.market-grid {
  background-image: linear-gradient(rgba(8, 78, 54, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 78, 54, .055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black 15%, transparent 92%);
}

.nav-link { color: #3c584e; transition: color .2s ease; }
.nav-link:hover { color: #b58422; }
.eyebrow { color: #a67820; font-size: .875rem; font-weight: 800; }
.section-title { margin-top: .65rem; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 900; line-height: 1.45; letter-spacing: 0; color: #092f22; }
.section-lead { margin-top: 1rem; color: #60766e; font-size: 1.05rem; line-height: 2; }

.path-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #dce6e0; border-radius: 2rem; padding: clamp(1.6rem, 4vw, 2.75rem); min-height: 470px; }
.path-card::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; left: -120px; top: -120px; opacity: .35; }
.path-card-green { background: linear-gradient(145deg, #f4faf6, #ffffff); }
.path-card-green::after { background: #9ad8b9; }
.path-card-gold { background: linear-gradient(145deg, #fffaf0, #ffffff); }
.path-card-gold::after { background: #efd38f; }
.path-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 18px; background: #0a5a3c; color: white; margin-bottom: 2rem; box-shadow: 0 12px 28px rgba(10,90,60,.17); }
.path-card-gold .path-icon { background: #d4a946; color: #173c2d; }
.path-icon svg { width: 28px; height: 28px; }
.path-card h3 { margin-top: .6rem; font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: 900; color: #11372a; }
.path-card > p:not(:first-of-type) { margin-top: 1.1rem; color: #5b7168; line-height: 2; }
.path-card ul { margin-top: 1.7rem; display: grid; gap: .85rem; padding: 0; list-style: none; color: #38564b; font-size: .95rem; font-weight: 700; }
.path-card li { display: flex; align-items: center; gap: .65rem; }
.path-card li svg { width: 17px; height: 17px; color: #b88725; }
.card-link { position: relative; z-index: 1; display: inline-flex; width: fit-content; align-items: center; gap: .4rem; margin-top: auto; padding-top: 2rem; color: #0a5a3c; font-weight: 900; }
.card-link svg { width: 18px; }
.contact-choice { min-height: 150px; border: 1px solid rgba(255,255,255,.12); border-radius: 1.25rem; padding: 1.15rem; display: flex; flex-direction: column; justify-content: center; color: white; background: rgba(255,255,255,.055); transition: transform .2s ease, background .2s ease; }
.contact-choice:hover { transform: translateY(-3px); background: rgba(255,255,255,.1); }
.contact-choice svg { width: 24px; margin-bottom: 1rem; color: #e0b651; }
.contact-choice strong { font-size: .95rem; }
.contact-choice span { margin-top: .35rem; font-size: .72rem; color: rgba(236,253,245,.55); }
.page-section { width: min(1240px, calc(100% - 2.5rem)); margin-inline: auto; padding-block: clamp(4rem, 8vw, 6.5rem); }
.content-card { border: 1px solid rgba(7, 63, 43, .11); border-radius: 2rem; background: #fff; padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 18px 55px rgba(9, 56, 39, .055); }
.status-badge { border: 1px solid rgba(184, 135, 37, .2); border-radius: 999px; background: #fff8e7; padding: .45rem .75rem; color: #8c661b; font-size: .72rem; font-weight: 800; }
.feature-list { margin-top: 1.5rem; display: grid; gap: .8rem; padding: 0; list-style: none; color: #3d5b50; font-size: .92rem; font-weight: 700; }
.feature-list li { display: flex; align-items: center; gap: .6rem; }
.feature-list svg { width: 17px; height: 17px; color: #b88725; }
.contact-info-card { display: flex; align-items: center; gap: 1rem; border: 1px solid rgba(7, 63, 43, .11); border-radius: 1.35rem; background: #fff; padding: 1.15rem; color: #143d2f; transition: transform .2s ease, border-color .2s ease; }
.contact-info-card:hover { transform: translateX(-3px); border-color: rgba(184, 135, 37, .4); }
.contact-info-card > svg { width: 22px; color: #b88725; }
.contact-info-card span { display: grid; gap: .3rem; }
.contact-info-card strong { font-size: .9rem; }
.contact-info-card small { color: #6a7f77; font-size: .72rem; }
.form-label { display: grid; gap: .65rem; color: #274a3d; font-size: .85rem; font-weight: 800; }
.form-input { width: 100%; border: 1px solid #d6e2db; border-radius: 1rem; background: #f9fbf9; padding: .9rem 1rem; color: #16382c; font: inherit; font-size: .9rem; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.form-input:focus { border-color: #b88725; box-shadow: 0 0 0 3px rgba(184, 135, 37, .12); }
.form-input::placeholder { color: #93a29c; font-weight: 400; }

@media (max-width: 640px) { .path-card { min-height: 490px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}