/* ========== Reset ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }

/* ========== Page Base ========== */
body {
  font-family: 'Gabarito', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1A1A1A;
  -webkit-font-smoothing: antialiased;
  background-color: #FAFAFA;

  /* Layers:
     1) Subtle vignette (neutral)
     2) Field A  (BLACK, 0°)       — dense stroke-only curves
     3) Field B  (YELLOW, -25°)    — dense stroke-only curves
     4) Field C  (RED, +25°)       — dense stroke-only curves
     5) Micro-mesh -12° (BLACK, very thin)
     6) Micro-mesh +12° (BLACK, very thin)
     (Uganda map watermark is added via body::before so we can set opacity cleanly.)
  */
  background-image:
    radial-gradient(1200px 800px at 60% 40%, rgba(0,0,0,.035), transparent 72%),

    /* --- Field A: BLACK (0°), dense, stroke-only --- */
    url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 1920 1080%22 width%3D%221920%22 height%3D%221080%22%3E%3Cdefs%3E%3ClinearGradient id%3D%22gk%22 x1%3D%220%22 y1%3D%220%22 x2%3D%221920%22 y2%3D%220%22 gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop offset%3D%220%25%22 stop-color%3D%22%23000000%22 stop-opacity%3D%220.38%22/%3E%3Cstop offset%3D%2250%25%22 stop-color%3D%22%23000000%22 stop-opacity%3D%220.28%22/%3E%3Cstop offset%3D%22100%25%22 stop-color%3D%22%23000000%22 stop-opacity%3D%220.38%22/%3E%3C/linearGradient%3E%3Cstyle%3E.k%7Bfill%3Anone%3Bstroke%3Aurl(%23gk)%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%7D.t1%7Bstroke-width%3A1.0%7D.t2%7Bstroke-width%3A0.85%7D.t3%7Bstroke-width%3A0.7%7D%3C/style%3E%3C/defs%3E%3Cg%3E%0A%3Cpath class%3D%22k%20t1%22 d%3D%22M-120,120 C240,40 540,100 860,210 S1460,410 1780,280 1980,120 2040,160%22/%3E%3Cpath class%3D%22k%20t2%22 d%3D%22M-130,170 C220,100 520,160 840,270 S1440,470 1760,340 1980,180 2050,220%22/%3E%3Cpath class%3D%22k%20t3%22 d%3D%22M-140,220 C200,150 500,210 820,320 S1420,520 1740,390 1980,230 2060,270%22/%3E%3Cpath class%3D%22k%20t2%22 d%3D%22M-150,270 C220,200 540,260 880,370 S1500,570 1820,440 2000,280 2070,320%22/%3E%3Cpath class%3D%22k%20t1%22 d%3D%22M-160,320 C280,240 620,310 960,420 S1540,620 1860,490 2010,330 2080,370%22/%3E%3Cpath class%3D%22k%20t3%22 d%3D%22M-150,370 C300,290 660,360 1000,470 S1580,670 1900,540 2020,380 2090,420%22/%3E%3Cpath class%3D%22k%20t2%22 d%3D%22M-140,420 C320,340 700,410 1040,520 S1620,720 1940,590 2030,430 2100,470%22/%3E%3Cpath class%3D%22k%20t1%22 d%3D%22M-130,470 C340,390 740,460 1120,570 S1680,770 1960,640 2040,480 2110,520%22/%3E%3Cpath class%3D%22k%20t2%22 d%3D%22M-120,520 C360,440 780,500 1180,610 S1720,810 1980,680 2050,520 2120,560%22/%3E%3Cpath class%3D%22k%20t3%22 d%3D%22M-110,570 C380,490 820,550 1240,660 S1760,870 2000,740 2060,580 2130,620%22/%3E%3Cpath class%3D%22k%20t2%22 d%3D%22M-120,620 C400,540 860,600 1280,700 S1780,900 2000,770 2070,610 2140,650%22/%3E%3Cpath class%3D%22k%20t1%22 d%3D%22M-130,670 C420,590 900,650 1340,740 S1820,930 2010,800 2080,650 2150,690%22/%3E%3Cpath class%3D%22k%20t3%22 d%3D%22M-140,720 C440,640 940,700 1400,790 S1860,970 2020,840 2090,700 2160,740%22/%3E%3Cpath class%3D%22k%20t2%22 d%3D%22M-150,770 C460,690 980,750 1460,830 S1900,1000 2030,870 2100,730 2170,770%22/%3E%3Cpath class%3D%22k%20t3%22 d%3D%22M-160,820 C480,740 1020,800 1520,870 S1940,1030 2040,900 2110,770 2180,810%22/%3E%0A%3C/g%3E%3C/svg%3E'),

    /* --- Field B: YELLOW (-25°), dense --- */
    url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 1920 1080%22 width%3D%221920%22 height%3D%221080%22%3E%3Cdefs%3E%3ClinearGradient id%3D%22gy%22 x1%3D%220%22 y1%3D%220%22 x2%3D%221920%22 y2%3D%220%22 gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop offset%3D%220%25%22 stop-color%3D%22%23FCDC04%22 stop-opacity%3D%220.34%22/%3E%3Cstop offset%3D%2250%25%22 stop-color%3D%22%23FCDC04%22 stop-opacity%3D%220.26%22/%3E%3Cstop offset%3D%22100%25%22 stop-color%3D%22%23FCDC04%22 stop-opacity%3D%220.34%22/%3E%3C/linearGradient%3E%3Cstyle%3E.y%7Bfill%3Anone%3Bstroke%3Aurl(%23gy)%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%7D.s1%7Bstroke-width%3A0.95%7D.s2%7Bstroke-width%3A0.8%7D.s3%7Bstroke-width%3A0.65%7D%3C/style%3E%3C/defs%3E%3Cg transform%3D%22rotate(-25%20960%20540)%22%3E%0A%3Cpath class%3D%22y%20s1%22 d%3D%22M-220,220 C120,110 420,190 640,340 S1000,600 1280,500 1680,320 2060,300%22/%3E%3Cpath class%3D%22y%20s2%22 d%3D%22M-230,270 C140,160 420,240 650,380 S1020,630 1290,520 1690,340 2070,320%22/%3E%3Cpath class%3D%22y%20s3%22 d%3D%22M-240,320 C160,210 440,290 660,410 S1040,660 1300,540 1700,360 2080,340%22/%3E%3Cpath class%3D%22y%20s2%22 d%3D%22M-250,370 C180,260 460,340 680,440 S1060,690 1310,570 1710,390 2090,370%22/%3E%3Cpath class%3D%22y%20s1%22 d%3D%22M-260,420 C200,310 500,390 720,470 S1100,720 1340,600 1730,440 2100,420%22/%3E%3Cpath class%3D%22y%20s3%22 d%3D%22M-270,470 C220,360 520,440 760,520 S1140,750 1370,630 1750,480 2110,460%22/%3E%3Cpath class%3D%22y%20s2%22 d%3D%22M-280,520 C240,410 540,490 800,560 S1180,780 1400,650 1770,510 2120,500%22/%3E%3Cpath class%3D%22y%20s1%22 d%3D%22M-290,570 C260,460 560,540 840,600 S1220,810 1430,670 1790,540 2130,520%22/%3E%3Cpath class%3D%22y%20s2%22 d%3D%22M-300,620 C280,510 580,590 880,640 S1260,840 1460,690 1810,570 2140,550%22/%3E%3Cpath class%3D%22y%20s3%22 d%3D%22M-310,670 C300,560 600,630 920,670 S1300,870 1490,710 1830,600 2150,580%22/%3E%0A%3C/g%3E%3C/svg%3E'),

    /* --- Field C: RED (+25°), dense --- */
    url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 1920 1080%22 width%3D%221920%22 height%3D%221080%22%3E%3Cdefs%3E%3ClinearGradient id%3D%22gr%22 x1%3D%220%22 y1%3D%220%22 x2%3D%221920%22 y2%3D%220%22 gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop offset%3D%220%25%22 stop-color%3D%22%23D90000%22 stop-opacity%3D%220.30%22/%3E%3Cstop offset%3D%2250%25%22 stop-color%3D%22%23D90000%22 stop-opacity%3D%220.24%22/%3E%3Cstop offset%3D%22100%25%22 stop-color%3D%22%23D90000%22 stop-opacity%3D%220.30%22/%3E%3C/linearGradient%3E%3Cstyle%3E.r%7Bfill%3Anone%3Bstroke%3Aurl(%23gr)%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%7D.v1%7Bstroke-width%3A0.9%7D.v2%7Bstroke-width%3A0.75%7D.v3%7Bstroke-width%3A0.6%7D%3C/style%3E%3C/defs%3E%3Cg transform%3D%22rotate(25%20960%20540)%22%3E%0A%3Cpath class%3D%22r%20v1%22 d%3D%22M-220,180 C220,90 520,150 820,280 S1400,500 1720,380 1980,210 2100,240%22/%3E%3Cpath class%3D%22r%20v2%22 d%3D%22M-230,230 C200,150 500,210 820,330 S1380,530 1700,410 1960,250 2100,290%22/%3E%3Cpath class%3D%22r%20v3%22 d%3D%22M-240,280 C190,200 480,260 800,380 S1360,560 1680,440 1940,280 2080,320%22/%3E%3Cpath class%3D%22r%20v2%22 d%3D%22M-250,330 C220,240 540,300 880,410 S1480,610 1800,490 2020,340 2140,380%22/%3E%3Cpath class%3D%22r%20v1%22 d%3D%22M-260,380 C280,270 640,350 1000,460 S1600,660 1880,540 2060,410 2180,450%22/%3E%3Cpath class%3D%22r%20v3%22 d%3D%22M-270,430 C260,320 600,400 960,520 S1520,720 1800,600 2000,470 2140,510%22/%3E%3Cpath class%3D%22r%20v2%22 d%3D%22M-280,480 C320,370 680,450 1060,570 S1640,770 1900,650 2060,530 2180,570%22/%3E%3Cpath class%3D%22r%20v1%22 d%3D%22M-290,530 C360,420 760,500 1180,620 S1740,820 1960,700 2100,590 2220,630%22/%3E%3Cpath class%3D%22r%20v2%22 d%3D%22M-300,580 C380,470 800,550 1220,660 S1780,860 1980,740 2100,640 2240,680%22/%3E%0A%3C/g%3E%3C/svg%3E'),

    /* --- Micro mesh -12° (BLACK, very thin) --- */
    url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 1920 1080%22 width%3D%221920%22 height%3D%221080%22%3E%3Cg transform%3D%22rotate(-12%20960%20540)%22 stroke%3D%22%23000000%22 stroke-opacity%3D%220.16%22 stroke-width%3D%220.45%22 fill%3D%22none%22%3E%3Cpath d%3D%22M-200,200 C220,120 520,200 860,340 S1460,600 1780,520 2020,360 2140,400%22/%3E%3Cpath d%3D%22M-220,320 C240,220 560,300 900,420 S1500,680 1820,580 2040,420 2160,440%22/%3E%3Cpath d%3D%22M-240,440 C260,340 600,420 960,540 S1560,760 1860,640 2060,480 2180,520%22/%3E%3C/g%3E%3C/svg%3E'),

    /* --- Micro mesh +12° (BLACK, very thin) --- */
    url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 1920 1080%22 width%3D%221920%22 height%3D%221080%22%3E%3Cg transform%3D%22rotate(12%20960%20540)%22 stroke%3D%22%23000000%22 stroke-opacity%3D%220.16%22 stroke-width%3D%220.45%22 fill%3D%22none%22%3E%3Cpath d%3D%22M-200,180 C220,100 520,180 860,320 S1460,580 1780,500 2020,340 2140,380%22/%3E%3Cpath d%3D%22M-220,300 C240,200 560,280 900,400 S1500,660 1820,560 2040,400 2160,420%22/%3E%3Cpath d%3D%22M-240,420 C260,320 600,400 960,520 S1560,740 1860,620 2060,460 2180,500%22/%3E%3C/g%3E%3C/svg%3E');

  background-size: cover, cover, cover, cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: center, center, center, center, center, center;

  /* Create stacking context so ::before watermark sits above bg but below content */
  position: relative;
  z-index: 0;
}

/* ========== Uganda watermark (very faint, uses local uganda-map.svg) ========== */
body::before {
  content: "";
  position: fixed;     /* stays put on scroll; switch to absolute if you want it to scroll */
  inset: 0;
  pointer-events: none;
  z-index: 0;          /* under .page (which we lift to z-index:1) */
  background: center / min(70vw, 900px) auto no-repeat url("uganda-map.svg");
  opacity: 0.25;       /* faintness control */
  /* If your SVG is filled and a bit heavy, this helps soften it without dark blotches */
  filter: grayscale(1);
  /* Optional: give it a gentle tilt for vibe
     transform: rotate(-4deg); transform-origin: center; */
}

/* ========== Page wrapper ========== */
.page {
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 4rem;
  display: flex;
  flex-direction: column;

  position: relative;
  z-index: 1; /* ensure content sits above the watermark */
}

/* ========== Main Content - 75% ========== */
.content {
  flex: 0 0 75vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
}

.intro { display: flex; flex-direction: column; gap: 2rem; }
.logo { height: auto; width: 300px; max-width: 100%; }

.intro h1 {
  font-size: 3rem; font-weight: 600; color: #1A1A1A;
  letter-spacing: -0.02em; line-height: 1.2; max-width: 800px;
}

/* ========== Product Grid ========== */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.product-section {
  border: 2px solid;
  border-radius: 8px;
  padding: 2rem;
  background: rgba(255,255,255,0.72); /* keeps text readable over denser lines */
  backdrop-filter: blur(2px);
}
.product-section.green { border-color: #22C55E; }
.product-section.amber { border-color: #F59E0B; }
.product-section.blue  { border-color: #3B82F6; }

.product-section h2 {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: #666; margin-bottom: 1rem;
}

.product-item { margin-bottom: 1rem; }
.product-item:last-child { margin-bottom: 0; }
.product-logo { height: 48px; width: auto; }

.product-item h3 { display:flex; font-size: 1.25rem; font-weight: 600; color: #1A1A1A; margin-bottom: 0.5rem; align-items: center}
.product-item.admissionsug h3 { color: #1E3A8A; font-size: 1.5rem; font-weight: 700; }
.product-item p { font-size: 0.95rem; color: #666; line-height: 1.5; }

/* ========== Footer - 20% ========== */
.footer {
  flex: 0 0 20vh;
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.5rem; padding-top: 2rem;
}

.email { font-size: 1.125rem; font-weight: 500; color: #1A1A1A; text-decoration: none; }
.email:hover { color: #4A5FFF; }
.legal { font-size: 0.875rem; color: #999; }

/* ========== Responsive ========== */
@media (max-width: 1200px) {
  .page { padding: 0 3rem; }
  .intro h1 { font-size: 2.5rem; }
  .products { gap: 2rem; }
}
@media (max-width: 900px) {
  body::before { background-size: min(88vw, 760px) auto; opacity: 0.06; } /* a touch more visible on small screens */
  .page { min-height: 100vh; padding: 0 2rem; }
  .content { flex: 1; padding: 3rem 0; gap: 2rem; }
  .logo { width: 220px; }
  .intro h1 { font-size: 2rem; }
  .products { grid-template-columns: 1fr; gap: 1.5rem; }
  .product-section { padding: 1.5rem; }
  .footer { flex: 0; padding: 2rem 0; }
}