:root{
  --raad-green:#1E8F4E;
  --raad-green-dark:#166C3B;
  --raad-green-soft: rgba(30,143,78,.12);

  --text:#0F172A;
  --muted:#64748B;
  --border:#E5E7EB;

  --bg:#FFFFFF;
  --soft:#F4F7F6;

  --shadow: 0 18px 45px rgba(2, 8, 23, 0.10);
  --shadow-hover: 0 26px 70px rgba(2, 8, 23, 0.16);

  --radius: 18px;
}

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* HEADER */
.raad-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  z-index: 1030;
  transition: box-shadow .2s ease, background .2s ease, backdrop-filter .2s ease;
}
.raad-header.scrolled{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(2,8,23,.10);
}

.raad-logo{ height:44px; width:auto; }

/* Animated brand */
.brand-title{
  font-weight: 950;
  font-size: 1.15rem;
  letter-spacing: -0.35px;
  color: var(--text);
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    0 10px 22px rgba(15,23,42,.18);
  display: inline-block;
  animation: raad-wind 4.5s ease-in-out infinite;
}
.brand-title::after{
  content:"";
  position:absolute;
  left:-10%;
  top:0;
  width:50%;
  height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  animation: raad-shine 6.5s ease-in-out infinite;
}
@keyframes raad-wind{
  0%,100% { transform: translateY(0) rotate(-0.2deg); }
  50%     { transform: translateY(-2px) rotate(0.2deg); }
}
@keyframes raad-shine{
  0%, 55% { opacity: 0; transform: translateX(-40%) skewX(-18deg); }
  70%     { opacity: .55; transform: translateX(95%) skewX(-18deg); }
  100%    { opacity: 0; transform: translateX(120%) skewX(-18deg); }
}

.brand-subtitle{
  color: var(--muted);
  font-size: .82rem;
}

.navbar-nav{ list-style:none; padding-left:0; margin-bottom:0; }
.navbar-nav .nav-link{
  color: var(--text) !important;
  font-weight: 650;
  padding: .55rem .9rem;
  border-radius: 999px;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}
.navbar-nav .nav-link:hover{
  background: var(--raad-green-soft);
  color: var(--raad-green-dark) !important;
  transform: translateY(-1px);
}
.navbar-nav .nav-link.active{
  background: var(--raad-green-soft);
  box-shadow: inset 0 0 0 1px rgba(30,143,78,.20);
  color: var(--raad-green-dark) !important;
}
.navbar-nav .nav-link.nav-login{
  background: var(--raad-green);
  color:#fff !important;
  padding: .55rem 1rem;
}
.navbar-nav .nav-link.nav-login:hover{
  background: var(--raad-green-dark);
  color:#fff !important;
}

/* HERO */
.raad-hero-banner{
  position: relative;
  height: 78vh;
  min-height: 650px;
  overflow: hidden;
  background:#000;
}
.raad-hero-banner img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.raad-hero-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.35) 100%);
  z-index:1;
}
.raad-headline-block{
  position:absolute;
  left:0;
  bottom:35px;
  z-index:3;
  background: var(--raad-green);
  color:#fff;
  padding: 34px 38px;
  width: min(920px, 92vw);
  box-shadow: 0 22px 55px rgba(0,0,0,.28);
}
.raad-headline-block h1{
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 950;
  line-height: 1.05;
  margin: 0 0 10px;
  letter-spacing: -0.4px;
}
.raad-headline-block p{
  margin:0 0 18px;
  opacity:.95;
  max-width: 70ch;
}
.raad-headline-block .btn{
  border-radius: 0;
  font-weight: 900;
  padding: .75rem 1.25rem;
}

/* Buttons */
.btn-raad{
  background: var(--raad-green);
  color: #fff;
  border: 0;
  font-weight: 900;
  border-radius: 999px;
  padding: .8rem 1.3rem;
}
.btn-raad:hover{
  background: var(--raad-green-dark);
  color:#fff;
}

.section-grey{
  background: var(--soft);
  padding: 3.2rem 0;
}
.section-title{
  font-weight: 950;
  letter-spacing: -0.5px;
}

/* Carousel */
.raad-carousel{
  border-radius: var(--radius);
}
.raad-carousel-img{
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(2,8,23,.12);
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: invert(1);
}

/* Featured Cards */
.raad-card{
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background:#fff;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.raad-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.raad-card img{
  width:100%;
  height: 210px;
  object-fit: cover;
}
.raad-card .card-body{
  padding: 1.15rem 1.15rem 1.25rem;
}
.meta{
  color: var(--muted);
  font-size: .86rem;
}
.read-link{
  font-weight: 900;
  color: var(--raad-green-dark);
  text-decoration: none;
}
.read-link:hover{
  color: var(--raad-green);
  text-decoration: underline;
}

/* ===== Mission/Vision/Daily Tasks Circle Cards ===== */
.raad-pill-section{
  margin-top: -54px;
  padding: 0 0 18px;
  position: relative;
  z-index: 5;
}
.raad-pill-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(229,231,235,.7);
  border-radius: 999px;
  padding: 18px 20px;
  min-height: 170px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  box-shadow: 0 18px 45px rgba(2, 8, 23, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.raad-pill-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 70px rgba(2, 8, 23, 0.16);
  border-color: rgba(30,143,78,.28);
}
.raad-pill-icon{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--raad-green-soft);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(30,143,78,.20);
}
.raad-pill-icon svg{
  width: 34px;
  height: 34px;
  fill: var(--raad-green-dark);
}
.raad-pill-title{
  margin: 0 0 6px;
  font-weight: 950;
  color: var(--text);
}
.raad-pill-text{
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.45;
}

/* OUR WORK */
.raad-ourwork{ padding: 3.4rem 0; background: #fff; }
.raad-ourwork-kicker{
  font-weight: 950;
  letter-spacing: .12em;
  color: var(--raad-green-dark);
  font-size: 1.65rem;
  text-transform: uppercase;
}
.raad-ourwork-sub{
  max-width: 72ch;
  margin: .65rem auto 1rem;
  color: var(--muted);
  font-size: 1.05rem;
}
.raad-ourwork-btn{
  border-width: 2px;
  font-weight: 850;
  border-radius: 12px;
  padding: .55rem 1rem;
}
.raad-work-tile{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap: 14px;
  min-height: 180px;
  border-radius: 18px;
  text-decoration:none;
  color:#fff;
  box-shadow: 0 16px 40px rgba(2,8,23,.10);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  position:relative;
  overflow:hidden;
  padding: 22px;
  background: linear-gradient(135deg, var(--raad-green-dark), var(--raad-green));
}
.raad-work-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%);
  opacity:.7;
}
.raad-work-tile::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 70% 30%, rgba(0,0,0,.16), transparent 55%);
  transform: rotate(12deg);
  opacity:.45;
}
.tile-2{ background: linear-gradient(135deg, #146a3a, #1e8f4e); }
.tile-3{ background: linear-gradient(135deg, #0f5b31, #1a8046); }
.tile-4{ background: linear-gradient(135deg, #166c3b, #22a05a); }
.tile-5{ background: linear-gradient(135deg, #0e5530, #1e8f4e); }
.tile-6{ background: linear-gradient(135deg, #125f36, #1b874b); }
.tile-7{ background: linear-gradient(135deg, #0c4f2a, #1a7f44); }
.tile-8{ background: linear-gradient(135deg, #166c3b, #2ac06a); }
.tile-9{ background: linear-gradient(135deg, #0f5b31, #22a05a); }

.raad-work-tile:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(2,8,23,.18);
  filter: saturate(1.06);
}
.raad-work-icon{ width: 64px; height: 64px; position: relative; z-index: 1; }
.raad-work-icon svg{ width: 100%; height: 100%; fill: #fff; opacity: .95; }
.raad-work-title{
  position: relative;
  z-index: 1;
  font-weight: 950;
  letter-spacing: .06em;
  font-size: .95rem;
  text-align: center;
  text-transform: uppercase;
}

/* Footer */
.raad-footer{ background: #071015; color: rgba(255,255,255,.88); }
.raad-footer-top{ border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-title{ font-weight: 900; margin-bottom: .8rem; }
.footer-links li{ margin-bottom: .45rem; }
.footer-links a{ color: rgba(255,255,255,.78); text-decoration:none; }
.footer-links a:hover{ color:#fff; text-decoration: underline; }
.footer-chip{
  display:inline-flex;
  padding: .4rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  text-decoration:none;
  font-size: .85rem;
}
.footer-chip:hover{ border-color: rgba(255,255,255,.35); color:#fff; }
.raad-footer-bottom{ background:#050B10; }

/* Reveal */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity: 1; transform: translateY(0); }

/* Scroll to top */
#scrollTopBtn{
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--raad-green);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1050;
}
#scrollTopBtn.show{ opacity: 1; visibility: visible; transform: translateY(0); }
#scrollTopBtn:hover{ background: var(--raad-green-dark); }

/* Mobile */
@media (max-width: 768px){
  .raad-hero-banner{ height: 62vh; min-height: 420px; }
  .raad-headline-block{ bottom: 0; width: 100%; padding: 18px 16px; }
  .raad-headline-block h1{ font-size: 1.85rem; }

  .raad-pill-section{ margin-top: 0; padding-top: 18px; }
  .raad-pill-card{ border-radius: var(--radius); grid-template-columns: 56px 1fr; min-height: auto; }
  .raad-pill-icon{ width: 56px; height: 56px; }
  .raad-pill-icon svg{ width: 30px; height: 30px; }

  .raad-work-tile{ min-height: 160px; }
  .raad-work-icon{ width: 56px; height: 56px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .brand-title, .brand-title::after{ animation:none !important; }
  *{ scroll-behavior:auto !important; transition:none !important; }
}