/* ── Design tokens ─────────────────────────────────────── */
:root {
  --blue:      #1e4fa3;
  --blue-l:    #3b6fc7;
  --blue-xl:   #e8f0fb;
  --navy:      #163a73;
  --gold:      #c8963e;
  --gold-l:    #f5e8d0;
  --dark:      #1b2430;
  --mid:       #556273;
  --light:     #f5f8fc;
  --white:     #ffffff;
  --radius:    10px;
  --shadow:    0 4px 24px rgba(30,79,163,.10);
  --ff-head:   'Playfair Display', Georgia, serif;
  --ff-body:   'DM Sans', system-ui, sans-serif;
}

    /* ── Reset / Base ──────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--ff-body);
      font-size: 15px;
      color: var(--mid);
      background: var(--white);
      line-height: 1.7;
    }
    h1,h2,h3,h4,h5 {
      font-family: var(--ff-head);
      color: var(--dark);
      line-height: 1.25;
    }
    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }
    section { padding: 72px 0; }
    .section-label {
      font-family: var(--ff-body);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 10px;
    }
    .section-title {
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      margin-bottom: 16px;
    }
    .section-sub {
      color: var(--mid);
      max-width: 560px;
      line-height: 1.75;
    }
    .btn-green {
      background: var(--blue);
      color: #fff;
      border: none;
      padding: 12px 28px;
      border-radius: 50px;
      font-weight: 500;
      font-size: 14px;
      transition: background .2s, transform .15s;
    }
    .btn-green:hover { background: var(--blue-l); color: #fff; transform: translateY(-1px); }
    .btn-outline-green {
      border: 1.5px solid var(--blue);
      color: var(--blue);
      background: transparent;
      padding: 11px 26px;
      border-radius: 50px;
      font-weight: 500;
      font-size: 14px;
      transition: all .2s;
    }
    .btn-outline-green:hover { background: var(--blue); color: #fff; }

    /* ── Top bar ───────────────────────────────────────────── */
    #topbar {
      background: var(--blue);
      color: rgba(255,255,255,.85);
      font-size: 13px;
      padding: 7px 0;
    }
    #topbar a { color: rgba(255,255,255,.85); transition: color .15s; }
    #topbar a:hover { color: #fff; }
    #topbar .social-links a {
      width: 26px; height: 26px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 50%;
      background: rgba(255,255,255,.15);
      margin-right: 4px;
      font-size: 11px;
    }
    #topbar .social-links a:hover { background: rgba(255,255,255,.3); }

    /* ── Navbar ────────────────────────────────────────────── */
    #mainNav {
      background: var(--white);
      box-shadow: 0 2px 20px rgba(0,0,0,.07);
      padding: 0;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    #mainNav .navbar-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
    }
    .brand-icon {
      width: 46px; height: 46px;
      background: var(--blue);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      font-size: 20px;
      flex-shrink: 0;
    }
    .brand-text-main {
      font-family: var(--ff-head);
      font-size: 18px;
      font-weight: 700;
      color: var(--dark);
      line-height: 1.1;
    }
    .brand-text-sub {
      font-size: 11px;
      color: var(--gold);
      letter-spacing: 1px;
      font-weight: 500;
      text-transform: uppercase;
    }
    #mainNav .nav-link {
      font-size: 14px;
      font-weight: 500;
      color: var(--mid) !important;
      padding: 28px 16px !important;
      transition: color .15s;
      position: relative;
    }
    #mainNav .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%; right: 50%;
      height: 2px;
      background: var(--blue);
      transition: left .2s, right .2s;
    }
    #mainNav .nav-link:hover,
    #mainNav .nav-link.active { color: var(--blue) !important; }
    #mainNav .nav-link:hover::after,
    #mainNav .nav-link.active::after { left: 16px; right: 16px; }
    .dropdown-menu {
      border: none;
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      padding: 8px 0;
      min-width: 240px;
    }
    .dropdown-item {
      font-size: 13.5px;
      padding: 9px 20px;
      color: var(--mid);
    }
    .dropdown-item:hover { background: var(--blue-xl); color: var(--blue); }
    .navbar-toggler { border: none; }
    .navbar-toggler:focus { box-shadow: none; }

    /* ── Hero / Carousel ───────────────────────────────────── */
    #hero {
      background: var(--light);
      position: relative;
      overflow: hidden;
    }
    .hero-slide {
      background: linear-gradient(135deg, #e8f0fb 0%, #d8e5f8 100%);
      padding: 80px 0 60px;
      min-height: 520px;
      display: flex;
      align-items: center;
    }
    .hero-slide.slide-2 { background: linear-gradient(135deg, #f5e8d0 0%, #eddbb8 100%); }
    .hero-slide.slide-3 { background: linear-gradient(135deg, #e8eef5 0%, #d0dded 100%); }
    .hero-tag {
      display: inline-block;
      background: var(--blue);
      color: #fff;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 4px 14px;
      border-radius: 50px;
      margin-bottom: 20px;
      font-weight: 500;
    }
    .hero-slide.slide-2 .hero-tag { background: var(--gold); }
    .hero-slide.slide-3 .hero-tag { background: #3a6b9a; }
    .hero-slide h1 {
      font-size: clamp(2rem, 4vw, 3.4rem);
      color: var(--dark);
      margin-bottom: 18px;
    }
    .hero-slide p {
      font-size: 16px;
      color: var(--mid);
      max-width: 500px;
      line-height: 1.8;
      margin-bottom: 32px;
    }
    .hero-graphic {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .hero-card {
      background: var(--white);
      border-radius: 20px;
      padding: 36px;
      box-shadow: 0 20px 60px rgba(30,79,163,.15);
      text-align: center;
      max-width: 320px;
    }
    .hero-card .icon-wrap {
      width: 72px; height: 72px;
      border-radius: 50%;
      background: var(--blue-xl);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px;
      font-size: 28px;
      color: var(--blue);
    }
    .hero-card.card-gold .icon-wrap { background: var(--gold-l); color: var(--gold); }
    .hero-card.card-blue .icon-wrap { background: #e0eaf5; color: #3a6b9a; }
    .hero-card h4 { font-size: 1.3rem; color: var(--dark); margin-bottom: 8px; }
    .hero-card p { font-size: 13.5px; color: var(--mid); margin: 0; }
    .hero-stat-row {
      display: flex;
      gap: 24px;
      margin-top: 28px;
    }
    .hero-stat {
      background: var(--white);
      border-radius: var(--radius);
      padding: 14px 20px;
      box-shadow: 0 4px 16px rgba(30,79,163,.08);
      flex: 1;
    }
    .hero-stat .num {
      font-family: var(--ff-head);
      font-size: 1.5rem;
      color: var(--blue);
      font-weight: 700;
    }
    .hero-stat .lbl {
      font-size: 11px;
      color: var(--mid);
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    /* Owl hero nav */
    #heroOwl .owl-dots { margin-top: 24px; }
    #heroOwl .owl-dot span {
      background: rgba(30,79,163,.25) !important;
      width: 8px; height: 8px;
    }
    #heroOwl .owl-dot.active span { background: var(--blue) !important; width: 24px; border-radius: 4px; }
    #heroOwl .owl-nav button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: var(--white) !important;
      border-radius: 50% !important;
      width: 44px; height: 44px;
      box-shadow: var(--shadow);
      color: var(--blue) !important;
      font-size: 18px !important;
      line-height: 1 !important;
    }
    #heroOwl .owl-nav button.owl-prev { left: 16px; }
    #heroOwl .owl-nav button.owl-next { right: 16px; }
    #heroOwl .owl-nav button:hover { background: var(--blue) !important; color: #fff !important; }
    #heroOwl { position: relative; }

    /* ── About / Intro ─────────────────────────────────────── */
    #about { background: var(--white); }
    .about-img-wrap {
      position: relative;
    }
    .about-main-img {
      border-radius: 20px;
      width: 100%;
      height: 400px;
      object-fit: cover;
    }
    .about-badge {
      position: absolute;
      bottom: -24px;
      right: -24px;
      background: var(--blue);
      color: #fff;
      border-radius: 16px;
      padding: 18px 24px;
      box-shadow: var(--shadow);
      text-align: center;
    }
    .about-badge .num { font-family: var(--ff-head); font-size: 2rem; font-weight: 700; }
    .about-badge .txt { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; }
    .about-feature {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      margin-bottom: 24px;
    }
    .about-feature-icon {
      width: 44px; height: 44px;
      border-radius: 10px;
      background: var(--blue-xl);
      display: flex; align-items: center; justify-content: center;
      color: var(--blue);
      font-size: 18px;
      flex-shrink: 0;
    }
    .about-feature h6 { font-size: .9rem; color: var(--dark); margin-bottom: 3px; }
    .about-feature p { font-size: 13.5px; margin: 0; }

    /* Decorative block image for about */
    .about-img-placeholder {
      width: 100%;
      height: 400px;
      border-radius: 20px;
      background: linear-gradient(
    135deg,
    var(--blue) 0%,
    var(--blue-l) 50%,
    #b7cceb 100%
  );
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .about-img-placeholder::before {
      content: '';
      position: absolute;
      width: 300px; height: 300px;
      border-radius: 50%;
      border: 60px solid rgba(255,255,255,.12);
      top: -80px; right: -80px;
    }
    .about-img-placeholder::after {
      content: '';
      position: absolute;
      width: 200px; height: 200px;
      border-radius: 50%;
      border: 40px solid rgba(255,255,255,.08);
      bottom: -60px; left: -60px;
    }
    .about-img-placeholder i {
      font-size: 80px;
      color: rgba(255,255,255,.6);
      position: relative;
      z-index: 1;
    }

    /* ── Products ──────────────────────────────────────────── */
    #products { background: var(--light); }
    .product-card {
      background: var(--white);
      border-radius: 16px;
      padding: 32px 28px;
      height: 100%;
      border: 1px solid rgba(30,79,163,.08);
      transition: transform .2s, box-shadow .2s;
    }
    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow);
    }
    .product-icon {
      width: 52px; height: 52px;
      border-radius: 12px;
      background: var(--blue-xl);
      color: var(--blue);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
      margin-bottom: 18px;
    }
    .product-card h5 {
      font-size: 1rem;
      margin-bottom: 10px;
      color: var(--dark);
    }
    .product-card p { font-size: 13.5px; margin: 0; color: var(--mid); }
    .product-card .learn-more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      color: var(--blue);
      margin-top: 16px;
      transition: gap .15s;
    }
    .product-card:hover .learn-more { gap: 10px; }

    /* ── Why Join ──────────────────────────────────────────── */
    #why {
      background: var(--navy);
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    #why::before {
      content: '';
      position: absolute;
      width: 600px; height: 600px;
      border-radius: 50%;
      border: 120px solid rgba(255,255,255,.05);
      top: -200px; right: -200px;
    }
    #why .section-label { color: var(--gold); }
    #why .section-title { color: #fff; }
    #why .section-sub { color: rgba(255,255,255,.8); max-width: none; }
    .why-item {
      display: flex;
      gap: 16px;
      margin-bottom: 28px;
      position: relative;
    }
    .why-num {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.3);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--ff-head);
      font-size: 1rem;
      color: #fff;
      flex-shrink: 0;
    }
    .why-item h6 { color: #fff; margin-bottom: 4px; font-size: .95rem; }
    .why-item p { color: rgba(255,255,255,.75); font-size: 13.5px; margin: 0; }
    .why-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 16px;
    }
    .why-stat-card {
      background: rgba(255,255,255,.1);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255,255,255,.12);
    }
    .why-stat-card .big { font-family: var(--ff-head); font-size: 2rem; color: #fff; }
    .why-stat-card .sm { font-size: 12px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: 1px; }

    /* ── Testimonials / Partners carousel ─────────────────── */
    #testimonials { background: var(--white); }
    .testimonial-card {
      background: var(--light);
      border-radius: 16px;
      padding: 32px;
      margin: 8px;
    }
    .testimonial-card .quote { font-size: 2.5rem; color: var(--blue); line-height: 1; margin-bottom: 8px; font-family: Georgia; }
    .testimonial-card p { font-size: 14px; line-height: 1.8; color: var(--mid); margin-bottom: 20px; }
    .testimonial-author { display: flex; align-items: center; gap: 12px; }
    .testimonial-avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--blue);
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      font-family: var(--ff-head);
      font-size: 1.1rem;
    }
    .testimonial-author-name { font-weight: 600; color: var(--dark); font-size: 14px; }
    .testimonial-author-role { font-size: 12px; color: var(--mid); }
    #testimonialsOwl .owl-dots { margin-top: 24px; text-align: center; }
    #testimonialsOwl .owl-dot span { background: rgba(30,79,163,.2) !important; }
    #testimonialsOwl .owl-dot.active span { background: var(--blue) !important; }

    /* ── AGM Reports ───────────────────────────────────────── */
    #reports { background: var(--light); }
    .report-card {
      background: var(--white);
      border-radius: 12px;
      padding: 20px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      border: 1px solid rgba(30,79,163,.08);
      margin-bottom: 12px;
      transition: box-shadow .2s;
    }
    .report-card:hover { box-shadow: var(--shadow); }
    .report-icon {
      width: 44px; height: 44px;
      border-radius: 10px;
      background: var(--gold-l);
      color: var(--gold);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }
    .report-card .title { font-weight: 600; color: var(--dark); font-size: 14px; }
    .report-card .sub { font-size: 12px; color: var(--mid); }
    .report-dl { margin-left: auto; color: var(--blue); font-size: 18px; transition: transform .15s; }
    .report-card:hover .report-dl { transform: translateY(2px); }

    /* ── Contact / CTA ─────────────────────────────────────── */
    #contact { background: var(--white); }
    .contact-info-item {
      display: flex;
      gap: 14px;
      margin-bottom: 24px;
    }
    .contact-icon {
      width: 44px; height: 44px;
      border-radius: 10px;
      background: var(--blue-xl);
      color: var(--blue);
      display: flex; align-items: center; justify-content: center;
      font-size: 17px;
      flex-shrink: 0;
    }
    .contact-info-item h6 { font-size: .9rem; color: var(--dark); margin-bottom: 2px; }
    .contact-info-item p { font-size: 13.5px; margin: 0; }
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
      width: 100%;
      border: 1.5px solid #e2e8e4;
      border-radius: var(--radius);
      padding: 12px 16px;
      font-family: var(--ff-body);
      font-size: 14px;
      color: var(--dark);
      background: var(--white);
      transition: border .15s;
      outline: none;
      margin-bottom: 14px;
    }
    .contact-form input:focus,
    .contact-form textarea:focus { border-color: var(--blue); }
    .contact-form textarea { resize: vertical; min-height: 120px; }
    .map-embed {
      width: 100%;
      height: 300px;
      border-radius: 16px;
      overflow: hidden;
      background: var(--light);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1.5px solid #e2e8e4;
      font-size: 13px;
      color: var(--mid);
      margin-top: 24px;
      position: relative;
    }
    .map-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #e8f0fb, #d8e5f8);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .map-placeholder i { font-size: 36px; color: var(--blue); }
    .map-placeholder p { font-size: 13px; color: var(--mid); margin: 0; text-align: center; }

    /* ── Footer ────────────────────────────────────────────── */
    footer {
      background: var(--dark);
      color: rgba(255,255,255,.7);
      padding: 60px 0 0;
    }
    footer h5 {
      font-family: var(--ff-body);
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: rgba(255,255,255,.5);
      margin-bottom: 20px;
    }
    footer .footer-brand {
      font-family: var(--ff-head);
      font-size: 1.6rem;
      color: #fff;
      margin-bottom: 12px;
    }
    footer p { font-size: 14px; line-height: 1.75; }
    footer a { color: rgba(255,255,255,.6); font-size: 14px; transition: color .15s; }
    footer a:hover { color: var(--gold); }
    footer ul { list-style: none; padding: 0; margin: 0; }
    footer ul li { margin-bottom: 10px; }
    footer ul li a::before { content: '→ '; opacity: .4; }
    .footer-social a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,.1);
      color: rgba(255,255,255,.7);
      margin-right: 6px;
      font-size: 13px;
      transition: background .15s, color .15s;
    }
    .footer-social a:hover { background: var(--gold); color: #fff; }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 18px 0;
      margin-top: 48px;
      font-size: 13px;
      color: rgba(255,255,255,.4);
    }
    .footer-bottom a { color: rgba(255,255,255,.4); }
    .footer-bottom a:hover { color: var(--gold); }

    /* ── Back to top ───────────────────────────────────────── */
    #backTop {
      position: fixed;
      bottom: 20px; right: 28px;
      width: 44px; height: 44px;
      background: var(--blue);
      color: #fff;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      box-shadow: 0 4px 16px rgba(30,79,163,.3);
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s, transform .2s;
      z-index: 999;
      border: none;
    }
    #backTop.show { opacity: 1; pointer-events: auto; }
    #backTop:hover { transform: translateY(-3px); }

    /* ── Utility ───────────────────────────────────────────── */
    .divider {
      width: 48px; height: 3px;
      background: var(--gold);
      border-radius: 2px;
      margin-bottom: 28px;
    }
    .green-pill {
      display: inline-block;
      background: var(--blue-xl);
      color: var(--blue);
      border-radius: 50px;
      padding: 4px 14px;
      font-size: 12px;
      font-weight: 500;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-up { animation: fadeUp .6s ease both; }

    /* ── Responsive ────────────────────────────────────────── */
    @media (max-width: 991px) {
      #mainNav .nav-link { padding: 14px 16px !important; }
      #mainNav .nav-link::after { display: none; }
      .about-badge { bottom: -16px; right: -8px; }
      .why-stats { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 767px) {
      section { padding: 52px 0; }
      .hero-stat-row { flex-direction: column; gap: 12px; }
      .about-badge { position: static; margin-top: 16px; display: inline-block; }
      #topbar .d-none { display: none !important; }
    }