/* ================= FONT ================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

/* ================= ROOT ================= */
:root {
   --black: #0a0f1e;

    /* Green Palette (UPDATED to Navy base) */
    --green-darkest: #0f1833;  /* deep shadow / footer */
    --green-brand:   #1b2a55;  /* logo color — primary */
    --green-mid:     #2d3f77;  /* accent / hover / highlights */
    --green-pale:    #eef1f8;  /* background / surface */

    /* Main Theme */
    --navy: var(--green-brand);
    --navy-deep: #0f1833;
    --navy-gradient-deep: linear-gradient(
        90deg,
        var(--green-brand),
        var(--green-brand),
        var(--green-darkest)
    );

    --slate: #3a4a79;

    /* Supporting Colors */
    --mahogany: #522d23;
    --mahogany-bright: #8a4a38;
    --mahogany-glow: #7a4433;
    --blood: #a83b2a;

    /* Neutral */
    --parchment: #bdb2a2;
    --cream: #f4f1eb;
    --deep-cream: #e8e2d8;
    --white: #ffffff;

    /* Gold Accent */
    --gold: #c9a96e;
    --gold-rgba-point-2: rgba(201, 169, 110, 0.2);
    --gold-bright: #dfc48a;

    /* Text */
    --text-body: #2a2a2a;
    --text-muted: rgba(189, 178, 162, 0.65);

    --text: var(--text-body);
    --muted: var(--text-muted);
    --font-body: 'Palatino Linotype', 'Palatino', 'Book Antiqua', serif;
    --font-display: 'Cormorant Garamond', serif;
    --fs-060: 0.6rem;
    --fs-070: 0.7rem;
    --fs-078: 0.78rem;
    --fs-080: 0.8rem;
    --fs-082: 0.82rem;
    --fs-084: 0.84rem;
    --fs-086: 0.86rem;
    --fs-088: 0.88rem;
    --fs-090: 0.9rem;
    --fs-092: 0.92rem;
    --fs-094: 0.94rem;
    --fs-095: 0.95rem;
    --fs-100: 1rem;
    --fs-102: 1.02rem;
    --fs-105: 1.05rem;
    --fs-108: 1.08rem;
    --fs-110: 1.1rem;
    --fs-115: 1.15rem;
    --fs-120: 1.2rem;
    --fs-125: 1.25rem;
    --fs-130: 1.3rem;
    --fs-135: 1.35rem;
    --fs-140: 1.4rem;
    --fs-155: 1.55rem;
    --fs-165: 1.65rem;
    --fs-170: 1.7rem;
    --fs-190: 1.9rem;
    --fs-200: 2rem;
    --fs-240: 2.4rem;
    --fs-250: 2.5rem;
    --fs-260: 2.6rem;
    --fs-300: 3rem;
    --fs-320: 3.2rem;
    --fs-350: 3.5rem;
    --fs-700: 7rem;
    --fs-800: 8rem;
    --fs-13px: 13px;
    --fs-fluid-quote-sm: clamp(1.3rem, 2.4vw, 1.8rem);
    --fs-fluid-quote-md: clamp(1.3rem, 2.5vw, 1.9rem);
    --fs-fluid-section: clamp(2rem, 3.5vw, 2.8rem);
    --fs-fluid-cta: clamp(2.2rem, 4vw, 3.2rem);
    --fs-fluid-hero-analyst: clamp(2.8rem, 5.5vw, 4.8rem);
    --fs-fluid-hero-home: clamp(2rem, 3.2vw, 2.8rem);
    --fs-fluid-loader: clamp(2.4rem, 6vw, 4.8rem);
    --fs-fluid-hero-nemesis: clamp(3.5rem, 7vw, 6.5rem);
    --fs-fluid-mobile-display: clamp(2rem, 12vw, 3rem);
    --fs-fluid-mobile-display-lg: clamp(2.45rem, 12vw, 3.5rem);
    --fs-fluid-mobile-hero: clamp(2.8rem, 9vw, 4.5rem);
    --fs-fluid-mission: clamp(2.5rem, 5vw, 4rem);
    --fs-fluid-mission-lg: clamp(3rem, 5vw, 5rem);
}

/* ================= BASE ================= */
html{
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  color: var(--navy-deep);
  letter-spacing: 0.5px;
}

/* HELPER */

@media (max-width: 992px) {
    .d-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================
   WIDTH HELPER
/* =========================
/* WIDTH HELPER 5% - 100% */
.w-5   { width: 5% !important; }
.w-10  { width: 10% !important; }
.w-15  { width: 15% !important; }
.w-20  { width: 20% !important; }
.w-25  { width: 25% !important; }
.w-30  { width: 30% !important; }
.w-35  { width: 35% !important; }
.w-40  { width: 40% !important; }
.w-45  { width: 45% !important; }
.w-50  { width: 50% !important; }
.w-55  { width: 55% !important; }
.w-60  { width: 60% !important; }
.w-65  { width: 65% !important; }
.w-70  { width: 70% !important; }
.w-75  { width: 75% !important; }
.w-80  { width: 80% !important; }
.w-85  { width: 85% !important; }
.w-90  { width: 90% !important; }
.w-95  { width: 95% !important; }
.w-100 { width: 100% !important; }

/* =========================
   BASE DIVIDER SYSTEM
========================= */
.divider,
.divider-only-left {
  position: relative;
  display: inline-block;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;

  --divider-width: clamp(10%, 20vw, 40%);
  --divider-color: var(--mahogany-bright);
  --divider-height: 2px;
}

/* APPLY GLOBAL LINE STYLE */
.divider::before,
.divider::after,
.divider-only-left::before,
.divider-only-left::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: var(--divider-height);
  background: var(--divider-color);
}

/* =========================
   POSITION
========================= */

/* LEFT */
.divider-left,
.divider-only-left {
  padding-left: 35px;
}

.divider-left::before,
.divider-only-left::before {
  left: 0;
  width: var(--divider-width);
}

/* RIGHT */
.divider-right {
  padding-right: 35px;
}

.divider-right::after {
  right: 0;
  width: var(--divider-width);
}

/* CENTER */
.divider-center {
  padding: 0 35px;
  display: inline-block;
}

.divider-center::before {
  left: 0;
  width: var(--divider-width);
}

.divider-center::after {
  right: 0;
  width: var(--divider-width);
}

/* =========================
   WIDTH SCALE (OPTIONAL OVERRIDE)
========================= */
.divider-w-3  { --divider-width: 3%; }
.divider-w-5  { --divider-width: 5%; }
.divider-w-10 { --divider-width: 10%; }
.divider-w-15 { --divider-width: 15%; }
.divider-w-20 { --divider-width: 20%; }
.divider-w-25 { --divider-width: 25%; }
.divider-w-30 { --divider-width: 30%; }
.divider-w-40 { --divider-width: 40%; }
.divider-w-50 { --divider-width: 50%; }
.divider-w-60 { --divider-width: 60%; }
.divider-w-70 { --divider-width: 70%; }
.divider-w-80 { --divider-width: 80%; }
.divider-w-90 { --divider-width: 90%; }
.divider-w-100 { --divider-width: 100%; }

/* =========================
   THICKNESS
========================= */
.divider-thin {
  --divider-height: 1px;
}

.divider-bold {
  --divider-height: 3px;
}

/* =========================
   COLORS
========================= */
.divider-mahagony {
  --divider-color: var(--mahogany-bright);
}

.divider-navy {
  --divider-color: var(--navy);
}

.divider-gold {
  --divider-color: var(--gold);
}

.divider-dark {
  --divider-color: var(--mahogany-glow);
}

.divider-light {
  --divider-color: rgba(138, 74, 56, 0.25);
}

/* ================= LINKS ================= */
a {
  color: var(--navy);
  text-decoration: none;
  transition: 0.25s;
}

a:hover {
  color: var(--gold);
}

.container{
  width:90vw;
  max-width: 1600px;
}

.w-80{
  width: 80%;
}


/* Custom POINTER */
/* ===============================
   CUSTOM POINTER
================================ */

/* hide default cursor */
html.has-custom-pointer,
html.has-custom-pointer * {
  cursor: none !important;
}

/* base cursor */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* DOT */
.cursor-dot {
  width: 10px;
  height: 10px;
  background: var(--mahogany);
  border-radius: 50%;
  mix-blend-mode: difference;
  box-shadow:
    0 0 0 2px rgba(244, 241, 235, 0.45),
    0 0 18px rgba(201, 169, 110, 0.28);
}

/* RING */
.cursor-ring {
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(82, 45, 35, 0.58);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(201, 169, 110, 0.14);
  transition:
    width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s,
    opacity 0.2s ease;
}

/* hover effect */
.cursor-ring.hover {
  width: 70px;
  height: 70px;
  border-color: var(--gold);
  box-shadow: 0 0 28px rgba(201, 169, 110, 0.22);
}

/* ===============================
   MOBILE DISABLE
================================ */

/* device tanpa hover (touch) */
@media (hover: none), (pointer: coarse) {
  html.has-custom-pointer,
  html.has-custom-pointer * {
    cursor: auto !important;
  }

  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

/* tambahan safety untuk mobile kecil */
@media (max-width: 768px) {
  html.has-custom-pointer,
  html.has-custom-pointer * {
    cursor: auto !important;
  }

  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

/* ================= BUTTON ================= */
.btn {
  border-radius: 6px;
  padding: 10px 22px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn-spacing {
    letter-spacing: 0.14em; /* bisa kamu adjust */
    text-transform: uppercase; /* optional, biar lebih rapi */
}

/* PRIMARY BUTTON */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    letter-spacing: 0.14em;
    padding: 1rem 2.2rem;
    background: var(--gold);
    color: var(--navy-deep);

    text-decoration: none;
    font-family: inherit;
    font-size: var(--fs-086);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    border: none;
    cursor: pointer;

    position: relative;
    z-index: 0;              /* penting: buat stacking context */
    overflow: hidden;

    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* HOVER BACKGROUND ANIMATION */
/* PRIMARY BUTTON */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    padding: 1rem 2.2rem;

    background: var(--gold);
    color: var(--green-darkest);

    text-decoration: none;
    font-family: inherit;
    font-size: var(--fs-086);
    font-weight: 600;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    border: none;
    cursor: pointer;

    position: relative;
    overflow: hidden;
    isolation: isolate;

    transition:
        color 0.4s ease,
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s ease;
}

/* HOVER BACKGROUND ANIMATION */
.btn-primary::before {
    content: '';

    position: absolute;
    inset: 0;

    background: var(--green-brand);

    transform: translateY(101%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    z-index: -1;
}

/* HOVER */
.btn-primary:hover::before {
    transform: translateY(0);
}

.btn-primary:hover {
    color: var(--white);
    box-shadow: 0 12px 35px rgba(20, 51, 35, 0.35);
}

/* IMPORTANT:
   kalau ada span / icon di dalam button */
.btn-primary span,
.btn-primary i,
.btn-primary svg {
    position: relative;
    z-index: 2;
    transition: color 0.4s ease;
}

/* force text/icon color berubah */
.btn-primary:hover span,
.btn-primary:hover i,
.btn-primary:hover svg {
    color: var(--white);
}

/* ensure icon & text always above background */
.btn-primary span,
.btn-primary i {
  position: relative;
  z-index: 1;
  color: var(--navy-deep);
}
.btn-outline {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 1rem 1.7rem;
  background: transparent;
  color: var(--parchment);
  text-decoration: none;
  font-family: inherit;
  font-size: var(--fs-086);
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(189,178,162,0.2);
  cursor: none;
  transition: all 0.35s;
}

.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201,169,110,0.05);
}
.custom-hover {
  transform: translateY(0) scale(1);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}

.custom-hover:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0,0,0,0.12);

}
/* ================= GOLD BUTTON ================= */

/* SOLID */
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  border: none;
  color: var(--navy-deep);
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 6px;
  transition: all 0.25s ease;
}

.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--navy-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201,169,110,0.35);
}

.btn-gold:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-gold:focus {
  box-shadow: 0 0 0 0.2rem rgba(201,169,110,0.3);
}


/* OUTLINE */
.btn-outline-gold {
  background: var(--navy-deep);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 6px;
  transition: all 0.25s ease;
}

.btn-outline-gold:hover {
  background: var(--gold);
  color: var(--navy-deep);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(201,169,110,0.25);
}

.btn-outline-gold:focus {
  box-shadow: 0 0 0 0.2rem rgba(201,169,110,0.25);
}
/* ================= NAV LINK GOLD ================= */
.nav-menu .nav-link {
  font-weight: 500;
  position: relative;
  transition: all 0.25s ease;
}
.nav-menu .nav-link a{
    text-decoration: none;
    color: var(--cream);
    font-size: var(--fs-090);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition: color 0.3s, opacity 0.3s;
    opacity: 0.8;
}

/* HOVER */
.nav-menu .nav-link:hover {
  color: var(--gold);
}

/* ACTIVE */
.nav-menu .nav-link.active {
  color: var(--gold);
}

#navLogo{
  height: 55px;
  width: auto;
}
/* UNDERLINE ANIMATION */
.nav-menu .nav-link::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--gold);
  transition: width 0.3s ease;
}

.nav-menu .nav-link:hover::after,
.nav-menu .nav-link.active::after {
  width: 100%;
}

.pulse-dot {
    color: var(--gold);
    position: relative;
}

.nav-cta {
  padding: 0.5rem 1.5rem !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 2px;
  opacity: 1 !important;
  transition: all 0.35s !important;
}

/* FIXED */
.nav-scrolled .nav-cta {
  border-color: var(--navy) !important;
  background: var(--navy);
  color: var(--cream) !important;
}

/* hover normal */
.nav-cta:hover {
  background: var(--mahogany-glow);
}

/* FIXED */
.nav-scrolled .nav-cta:hover {
  background: var(--mahogany);
  border-color: var(--mahogany) !important;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--gold);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple 1.5s infinite;
}

@keyframes ripple {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.6;
    }
    100% {
        width: 25px;
        height: 25px;
        opacity: 0;
    }
}


/* ================= BADGE ================= */

.badge-gold {
  background: rgba(201,169,110,0.15);
  color: var(--gold);
  border: 1px solid rgba(201,169,110,0.4);
  padding: 6px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}


/* OPTIONAL: BADGE SOLID */
.badge-gold-solid {
  background: var(--gold);
  color: var(--navy-deep);
  padding: 6px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
}
/* ================= CARD ================= */
.card {
  border: none;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.card-title {
  font-family: var(--font-display);
}

/* ================= NAVBAR ================= */
.navbar {
  background: transparent !important;
}

.navbar-brand {
  font-family: var(--font-display);
  color: var(--white) !important;
}

.navbar a {
  color: var(--white) !important;
  font-weight: 500;
}

.navbar a:hover {
  color: var(--gold) !important;
}

/* ================= FORM ================= */
.form-control {
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.1);
  padding: 10px;
  transition: 0.2s;
}

.form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 0.2rem rgba(201,169,110,0.2);
}

/* ================= UTILITIES ================= */
.text-gold { color: var(--gold); }
.text-navy { color: var(--navy); }
.text-emphasis{ color: var(--text-muted)}
.border-emphasis{ border-color: var(--text-muted)}
.text-gold-bright { color: var(--gold-bright); }
.text-mahagony { color: var(--mahagony); }
.bg-navy { background: var(--navy); }
.bg-deep-navy { background: var(--navy-deep); }
.bg-cream { background: var(--cream); }/* GOLD */
/* warna border biasa */
.border-gold {
    border: 1px solid var(--gold-rgba-point-2); /* tipis secara visual */
}

/* shimmer khusus */
.border-gold-shimmer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;

    background: linear-gradient(90deg, var(--gold), var(--mahogany-glow), var(--gold));
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* MAHOGANY */
.border-mahogany {
    border-color: var(--mahogany-bright) !important;
}

/* OPTIONAL (darker version) */
.border-mahogany-dark {
    border-color: var(--mahogany-glow) !important;
}
.font-display { font-family: var(--font-display); }

/* ================= NAV WRAPPER ================= */
.nav-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    transition: all 0.35s ease;
}

.nav-inner {
    padding: 20px 0;
    transition: 0.3s;
}

/* SCROLLED STYLE */
.nav-scrolled {
    background: var(--cream);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.nav-scrolled .nav-inner {
    padding: 10px 0;
}

/* HIDE NAV */
.nav-hidden {
    transform: translateY(-100%);
}

/* ================= MENU ================= */
.nav-menu {
    list-style: none;
    gap: 30px;
    margin: 0;
    display: flex;
}

/* BASE LINK */
.nav-menu a {
    text-decoration: none;
    color: var(--cream);
    font-size: var(--fs-090);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    opacity: 0.8;
    position: relative;
}

/* HOVER */
.nav-menu a:hover {
    color: var(--gold);
    opacity: 1;
}

/* ACTIVE */
.nav-menu a.active {
    color: var(--gold);
    opacity: 1;
}

/* UNDERLINE */
.nav-menu a::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--gold);
    transition: width 0.3s ease;
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 100%;
}

/* ================= SCROLLED MENU ================= */
.nav-scrolled .nav-menu a {
    color: var(--navy);
    opacity: 1;
}

.nav-scrolled .nav-menu a:hover {
    color: var(--gold);
}

.nav-scrolled .nav-menu a.active {
    color: var(--navy);
}

/* ================= CTA BUTTON ================= */
.nav-cta {
    padding: 0.5rem 1.5rem !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 2px;
    color: var(--cream);
    transition: all 0.35s !important;
}

/* SCROLLED CTA */
.nav-scrolled .nav-cta {
    border-color: var(--navy) !important;
    background: var(--navy);
    color: var(--cream) !important;
}

/* CTA HOVER */
.nav-cta:hover {
    background: var(--mahogany-glow);
}

/* SCROLLED HOVER */
.nav-scrolled .nav-cta:hover {
    background: var(--mahogany);
    border-color: var(--mahogany) !important;
}

/* ================= TOGGLE ================= */
.menu-toggle {
    font-size: 22px;
    color: white;
    cursor: pointer;
    position: relative;
    z-index: 10001; /* FIX klik */
}

.nav-scrolled .menu-toggle {
    color: var(--navy);
}

/* ================= MOBILE MENU ================= */
/* ================= MOBILE MENU ================= */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;

    width: 100%;
    height: 100vh;

    background: #0f1b2d;

    transform: translateX(100%);
    transition: transform 0.3s ease;

    z-index: 9999;

    padding: 2rem 1.5rem;

    display: flex;
    flex-direction: column;
}

/* ACTIVE STATE */
.mobile-menu.active {
    transform: translateX(0);
}

/* ================= TOP BAR ================= */
.mobile-menu-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    margin-bottom: 1.5rem;
}

/* ================= CLOSE BUTTON ================= */
.mobile-menu-close {
    background: transparent;
    border: none;

    font-size: 32px;
    line-height: 1;

    color: #fff;
    cursor: pointer;
}

/* ================= MENU LINKS ================= */
.mobile-menu a {
    color: #fff;
    text-decoration: none;

    font-size: 1.2rem;

    padding: 10px 0;
    display: block;
}
/* ================= OVERLAY ================= */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    z-index: 9998;
}

.mobile-overlay.active {
    opacity: 1;
    pointer-events: all;
}
/* Scroll indicator */
  .scroll-indicator {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
    gap: 0.6rem;
    z-index: 3;
    opacity: 1;
    animation: heroFadeUp 0.8s 3s ease forwards;
  }

  .scroll-indicator span {
    font-size: var(--fs-082); letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(189,178,162,0.35);
  }

  .scroll-line {
    width: 1px; height: 40px;
    background: linear-gradient(to bottom, rgba(201,169,110,0.5), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
  }

  @keyframes scrollPulse {
    0%, 100% { transform: scaleY(1); opacity: 0.5; }
    50% { transform: scaleY(0.5); opacity: 0.2; }
  }
  
.hero-section {
    height: calc(100vh - 85px) !important;
}
/* COUNTING SECTION */
.counting{
  font-family: var(--font-display);
  font-size: var(--fs-350);
  font-weight: 300;
  line-height: 1;
  color: var(--navy);
}

/* =========================
   GLOBAL SECTION FIXES
========================= */

section {
  position: relative;
}

/* Hindari 100vh kaku di mobile */
#about, #participants, #speakers,
#program, #exhibitor-profile, #venue{
  min-height: 100vh;
  height: auto;
  display: flex;
  align-items: center;
}

/* fallback spacing mobile */
@media (max-width: 768px) {
  #about,
  #program {
    padding: 4rem 0;
  }
}


.slide-event{
    position:relative;
    min-height:520px;
    border-radius:2px;
    overflow:hidden;

    background-size:cover;
    background-position:center;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:2rem;

    isolation:isolate;

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

/* HOVER CARD */
.slide-event:hover{
    transform:translateY(-6px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);
}

/* DARK OVERLAY */
.slide-event::before{
    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(10,15,30,.05) 0%,
        rgba(10,15,30,.28) 35%,
        rgba(10,15,30,.95) 100%
    );

    z-index:1;

    transition:.45s ease;
}

/* DARKER ON HOVER */
.slide-event:hover::before{
    background:
    linear-gradient(
        180deg,
        rgba(10,15,30,.15) 0%,
        rgba(10,15,30,.48) 35%,
        rgba(10,15,30,.98) 100%
    );
}

/* GOLD BORDER */
.slide-event::after{
    content:"";

    position:absolute;
    inset:0;

    border:1px solid rgba(201,169,110,.12);

    pointer-events:none;

    z-index:3;

    transition:.4s ease;
}

.slide-event:hover::after{
    border-color:rgba(201,169,110,.4);
}

/* LIGHT EFFECT */
.card-overlay{
    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle at top right,
        rgba(201,169,110,.14),
        transparent 35%
    );

    z-index:1;
}

/* CONTENT LAYER */
.card-header,
.card-content,
.visit-btn{
    position:relative;
    z-index:4;
}

/* HEADER ANIMATION */
.card-header{
    transform:translateY(65px);
    transition:.5s ease;
    padding-bottom:55px
}

.slide-event:hover .card-header{
    transform:translateY(0);
    padding-bottom: 0;
}

/* TITLE */
.card-title{
    color:var(--white);

    font-size:clamp(1.8rem,2vw,2.4rem);
    line-height:1.15;

    margin-bottom:1rem;

    font-family:var(--font-display);
    font-weight:600;

    letter-spacing:.2px;

    max-width:90%;
}

/* BADGE */
.event-date,
.event-badge{
    display:inline-flex;
    align-items:center;

    width:max-content;

    padding:.45rem .9rem;

    background:
    linear-gradient(
        90deg,
        rgba(201,169,110,.25),
        rgba(201,169,110,.04)
    );

    border:1px solid rgba(201,169,110,.18);

    backdrop-filter:blur(10px);

    color:var(--gold-bright);

    font-size:var(--fs-080);
    font-weight:600;
    letter-spacing:1.5px;

    text-transform:uppercase;

    margin:0;
}

/* CONTENT HIDDEN DEFAULT */
.card-content{
    max-height:0;

    opacity:0;

    overflow:hidden;

    transform:translateY(20px);

    transition:
        max-height .55s ease,
        opacity .4s ease,
        transform .5s ease,
        margin-top .4s ease;

    margin-top:0;
}

/* SHOW CONTENT ON HOVER */
.slide-event:hover{
  border-bottom:5px solid var(--gold)
}
.slide-event:hover .card-content{
    max-height:300px;

    opacity:1;

    transform:translateY(0);

    margin-top:1rem;
}

/* DESCRIPTION */
.card-description{
    color:rgba(255,255,255,.82);

    font-size:var(--fs-094);
    line-height:1.9;

    max-width:95%;

    font-family:var(--font-body);
}

/* BUTTON */
.visit-btn{
    position:absolute;

    top:1.25rem;
    right:1.25rem;

    display:inline-flex;
    align-items:center;

    gap:.4rem;

    text-decoration:none;

    padding:.8rem 1rem;
}

/* .visit-btn:hover{
    background:var(--gold);

    color:var(--black);

    border-color:rgba(255,255,255,.25);
} */

/* SWIPER BUTTON */
.btn-swiper{
    width:56px;
    height:56px;

    border:none;

    background:var(--navy-deep);

    color:var(--gold);

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.35s ease;

    position:relative;

    overflow:hidden;
}

.btn-swiper::before{
    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(201,169,110,.18),
        transparent
    );

    opacity:0;

    transition:.35s ease;
}

.btn-swiper:hover::before{
    opacity:1;
}

.btn-swiper:hover{
    background:var(--mahogany);

    color:var(--gold-bright);

    transform:translateY(-3px);
}

.btn-swiper i{
    position:relative;
    z-index:2;
}

.btn-swiper.swiper-button-disabled{
    opacity:.28;

    cursor:not-allowed;

    transform:none !important;
}

/* TABLET */
@media(max-width:991px){

    .slide-event{
        min-height:460px;

        padding:1.5rem;
    }

    .card-header{
        transform:translateY(0);
    }

    .card-content{
        max-height:300px;

        opacity:1;

        transform:none;

        margin-top:1rem;
    }

    .card-title{
        font-size:var(--fs-fluid-mobile-display);

        max-width:100%;
    }

    .card-description{
        font-size:var(--fs-090);

        max-width:100%;
    }

    .visit-btn{
        top:1rem;
        right:1rem;

        padding:.7rem .9rem;
    }
}

/* MOBILE */
@media(max-width:576px){

    .slide-event{
        min-height:420px;
    }

    .card-title{
        font-size:2rem;
    }

    .btn-swiper{
        width:48px;
        height:48px;
    }
}

/* =========================
   ABOUT SECTION
========================= */

#about h2 {
  font-family: var(--font-display);
  font-size: var(--fs-fluid-section);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

/* VISUAL CARD */
.visual-card {
  width: 280px;
  max-width: 100%;
  padding: 28px;
  border-radius: 6px;
  transition: all 0.3s ease;
  transform: rotate(-3deg);
}

.visual-card:hover {
  transform: rotate(0deg) scale(1.02);
}

/* LIGHT */
.light-card {
  background: var(--white);
  color: var(--navy);
}

/* DARK */
.dark-card {
  background: var(--navy);
  color: var(--cream);
  transform: rotate(3deg);
}

/* ICON */
.card-icon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.dark-card .card-icon {
  border-color: var(--cream);
}

.visual-card h5 {
  font-family: var(--font-display);
  font-size: var(--fs-115);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.visual-card.dark-card h5 {
  color: var(--cream);
}

.visual-card p {
  font-size: var(--fs-080);
  line-height: 1.7;
  opacity: 0.65;
}

.dark-card p {
  color: rgba(255,255,255,0.7);
}

/* mobile card fix */
@media (max-width: 768px) {
  .visual-card {
    width: 100%;
    transform: none !important;
  }
}


/* =========================
   PROGRAM SECTION
========================= */

#program {
  position: relative;
}

#program::before, #speakers:before, #exhibitor-profile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--parchment), transparent);
}

/* PROGRAM TAG */
.btn-programP {
  padding: 0.22rem 0.65rem;
  font-size: var(--fs-082);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(28, 43, 86, 0.08);
  color: var(--slate);
}

/* FIX typo dari HTML kamu */
.btn-program {
  padding: 0.22rem 0.65rem;
  font-size: var(--fs-082);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(28, 43, 86, 0.08);
  color: var(--slate);
}
/* =========================
   PROGRAM SECTION CLEAN
========================= */

.program-section {
  padding: 120px 0;
}

/* title */
.program-title {
  font-family: var(--font-display);
  font-size: var(--fs-fluid-section);
}

.program-subtitle {
  font-size: var(--fs-092);
  line-height: 1.75;
  color: var(--text-emphasis);
}

/* GRID RESPONSIVE (fix d-grid problem) */
.program-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
}

@media (max-width: 992px) {
  .program-grid {
    grid-template-columns: 1fr;
  }
}

/* CARD BASE */
.custom-card {
  border-radius: 4px;
  transition: 0.4s ease;
  height: 100%;
}

.custom-card:hover {
  transform: translateY(-6px);
}

/* DARK CARD */
.dark-card {
  background: var(--navy-deep);
  color: var(--cream);
}

/* LIGHT CARD */
.light-card {
  background: var(--white);
  color: var(--navy);
}

/* NUMBER */
.program-number {
  font-size: var(--fs-300);
  opacity: 0.15;
  font-family: var(--font-display);
  margin-bottom: 10px;
}

/* TITLE */
.program-card-title {
  font-family: serif;
  margin-bottom: 10px;
}

/* STATUS */
.program-status {
  font-size: var(--fs-082);
  letter-spacing: 1px;
  color: var(--gold);
  margin-bottom: 12px;
}

.program-status.muted {
  color: rgba(31, 42, 68, 0.6);
}

/* DESC */
.program-desc {
  font-size: var(--fs-092);
  line-height: 1.75;
}

/* TAGS */
.tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tag {
  padding: 0.22rem 0.65rem;
  font-size: var(--fs-082);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(201, 169, 110, 0.15);
}

.tag-outline {
  border-color: rgba(28, 43, 86, 0.12);
  color: var(--slate);
}

/* BADGE */
.badge-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: #c9a96e;
  color: #000;
  font-size: 12px;
  letter-spacing: 2px;
}


/* =========================
   APPROACH SECTION
========================= */

#approach {
  position: relative;
  overflow: hidden;
}

#approach > * {
  position: relative;
  z-index: 1;
}

#approach::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(82, 45, 35, 0.18), transparent),
    radial-gradient(ellipse 35% 35% at 10% 80%, rgba(58, 74, 121, 0.22), transparent),
    radial-gradient(ellipse 30% 30% at 50% 50%, rgba(201, 169, 110, 0.05), transparent);

  animation: meshDrift 14s ease-in-out infinite alternate;
}

@keyframes meshDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-2%, 2%) scale(1.05); }
  100% { transform: translate(2%, -2%) scale(1.08); }
}

/* =========================
   APPROACH SECTION FIXED
========================= */

.approach-section {
  padding: 120px 0;
  background: var(--navy-deep);
}

/* REMOVE 100vh (ini biang masalah) */
#approach {
  min-height: 100vh;   /* tetap full layar */
  height: auto;        /* tetap fleksibel kalau konten lebih tinggi */
  display: flex;
  align-items: center; /* center vertical */
}

/* HEADER */
.approach-header {
  margin-bottom: 40px;
}

.approach-label {
  font-size: var(--fs-082);
  letter-spacing: 0.2em;
  color: var(--gold);
  display: block;
  margin-bottom: 12px;
}

.approach-title {
  font-family: var(--font-display);
  font-size: var(--fs-fluid-section);
  color: #fff;
  margin-bottom: 12px;
}

.approach-subtitle {
  font-size: var(--fs-092);
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
}

/* CARD */
.approach-card {
  padding: 2.5rem;
  height: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  transition: 0.4s ease;
  position: relative;
  overflow: hidden;
}

.approach-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.05);
}

/* NUMBER */
.approach-number {
  font-size: var(--fs-082);
  letter-spacing: 0.2em;
  color: var(--gold);
  display: inline-block;
  margin-bottom: 1rem;
}

/* TITLE */
.approach-card h4 {
  font-family: var(--font-display);
  color: #fff;
  margin-bottom: 0.8rem;
}

/* TEXT */
.approach-card p {
  font-size: var(--fs-092);
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
}

/* MOBILE FIX */
@media (max-width: 768px) {
  .approach-section {
    padding: 80px 0;
  }

  .approach-card {
    padding: 1.5rem;
  }
}

/* =========================
   VENUE / MAP
========================= */

.ripple-wrapper {
  width: 50px;
  height: 50px;
  background: var(--navy-deep);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulseBox 3s infinite;
}

@keyframes pulseBox {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.25);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(201, 169, 110, 0);
  }
}

.map-pin i {
  font-size: 18px;
  color: var(--gold);
}

#map-icon smaall {
  font-size: var(--fs-082);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.45);
}

.icon-box {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================
   ENROLL SECTION
========================= */

#register p {
  font-size: var(--fs-095);
  line-height: 1.75;
  color: rgba(189, 178, 162, 0.55);
  margin-bottom: 2.5rem;
}

.cta-ornament {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.cta-ornament span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.15;
}

.cta-ornament span:nth-child(2) { opacity: 0.3; }
.cta-ornament span:nth-child(3) { opacity: 0.6; }
.cta-ornament span:nth-child(4) { opacity: 0.3; }
.cta-ornament span:nth-child(5) { opacity: 0.15; }


/* =========================
   FOOTER FIX
========================= */

footer{
    background:var(--navy-deep);

    color:var(--cream);

    padding:4rem 2rem 2rem;

    border-top:1px solid rgba(201,169,110,.06);

    position:relative;

    overflow:hidden;
}

/* =========================
   DEFAULT LINK
========================= */
footer a{
    color:rgba(255,255,255,.72);

    text-decoration:none;

    transition:.3s ease;
}

/* =========================
   HEADINGS
========================= */
footer h4,
.footer-title{
    color:var(--gold);

    font-size:var(--fs-095);

    font-weight:600;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:1.4rem;
}

/* =========================
   PARAGRAPH
========================= */
footer p{
    color:rgba(255,255,255,.68);

    line-height:1.9;

    font-size:var(--fs-092);

    margin:0;
}

/* =========================
   FOOTER LINKS
========================= */
.footer-links{
    margin:0;
    padding:0;
}

.footer-links li{
    list-style:none;

    margin-bottom:.9rem;
}

.footer-links a{
    display:inline-block;

    color:rgba(255,255,255,.68);

    font-size:var(--fs-092);

    transition:.3s ease;
}

.footer-links a:hover{
    color:var(--gold);

    transform:translateX(4px);
}

/* =========================
   SOCIAL BUTTONS
========================= */
.footer-social{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.1);

    background:rgba(255,255,255,.03);

    color:var(--white);

    transition:.35s ease;

    flex-shrink:0;
}

.footer-social:hover{
    background:var(--gold);

    border-color:var(--gold);

    color:var(--black);

    transform:translateY(-3px);
}

/* =========================
   ICON BOX
========================= */
.footer-icon{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.06);

    color:var(--gold);

    flex-shrink:0;
}

/* =========================
   TEXT MUTED
========================= */
.text-light-emphasis{
    color:rgba(255,255,255,.68);
}

/* =========================
   DIVIDER
========================= */
footer .border-top{
    border-color:rgba(255,255,255,.08) !important;
}

/* =========================
   HOVER GLOW
========================= */
footer::before{
    content:"";

    position:absolute;

    top:-120px;
    right:-120px;

    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(201,169,110,.08),
        transparent 70%
    );

    pointer-events:none;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:991px){

    footer{
        padding:3.5rem 1.5rem 2rem;
    }
}

@media(max-width:768px){

    .footer-social{
        width:38px;
        height:38px;
    }

    .footer-icon{
        width:38px;
        height:38px;
    }

    footer h4,
    .footer-title{
        font-size:var(--fs-090);
    }
}

@media(max-width:576px){

    footer{
        padding:3rem 1rem 1.5rem;
    }

    .footer-links a{
        font-size:var(--fs-090);
    }

    footer p{
        font-size:var(--fs-090);
    }
}

/* SPEAKER SLIDE */
.speaker-card{
    position:relative;

    background:var(--white);

    overflow:hidden;

    transition:.45s ease;

    border:1px solid rgba(201,169,110,.08);

    height:100%;
}

.speaker-card:hover{
    transform:translateY(-8px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.08);
}

.speaker-image-wrapper{
    position:relative;

    overflow:hidden;

    aspect-ratio:1 / 1.15;

    background:#f8f8f8;
}

.speaker-image{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .7s ease;
}

.speaker-card:hover .speaker-image{
    transform:scale(1.06);
}

.speaker-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(10,15,30,.02),
        rgba(10,15,30,.18)
    );
}

.speaker-content{
    padding:1.4rem;
}

.speaker-name{
    font-family:var(--font-display);

    font-size:1.45rem;

    line-height:1.2;

    color:var(--navy);

    margin-bottom:.65rem;
}

.speaker-role{
    font-size:var(--fs-090);

    color:var(--mahogany);

    line-height:1.7;

    margin-bottom:1rem;

    min-height:50px;
}

.speaker-company{
    display:inline-flex;
    align-items:center;

    padding:.45rem .8rem;

    border:1px solid rgba(201,169,110,.15);

    background:
    linear-gradient(
        90deg,
        rgba(201,169,110,.08),
        transparent
    );

    color:var(--navy);

    font-size:var(--fs-080);

    letter-spacing:.8px;

    text-transform:uppercase;

    font-weight:600;
}

/* SWIPER BUTTON */
.btn-swiper{
    width:56px;
    height:56px;

    border:none;

    background:var(--navy-deep);

    color:var(--gold);

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.35s ease;

    position:relative;

    overflow:hidden;
}

.btn-swiper::before{
    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(201,169,110,.18),
        transparent
    );

    opacity:0;

    transition:.35s ease;
}

.btn-swiper:hover::before{
    opacity:1;
}

.btn-swiper:hover{
    background:var(--mahogany);

    color:var(--gold-bright);

    transform:translateY(-3px);
}

.btn-swiper i{
    position:relative;
    z-index:2;
}

.btn-swiper.swiper-button-disabled{
    opacity:.28;

    cursor:not-allowed;

    transform:none !important;
}

@media(max-width:991px){

    .speaker-name{
        font-size:1.25rem;
    }

    .speaker-role{
        min-height:auto;
    }
}

@media(max-width:576px){

    .speaker-content{
        padding:1rem;
    }

    .speaker-name{
        font-size:1.15rem;
    }

    .btn-swiper{
        width:48px;
        height:48px;
    }
}
.participant-card{
    position:relative;

    background:var(--white);

    border:1px solid rgba(201,169,110,.08);

    overflow:hidden;

    transition:.45s ease;

    height:100%;
}

.participant-card:hover{
    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.08);
}

.participant-logo-wrap{
    height:240px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:2rem;

    background:
    linear-gradient(
        180deg,
        rgba(201,169,110,.03),
        rgba(201,169,110,.01)
    );

    border-bottom:1px solid rgba(201,169,110,.08);
}

.participant-logo{
    max-width:100%;
    max-height:120px;

    object-fit:contain;

    transition:.45s ease;
}

.participant-card:hover .participant-logo{
    transform:scale(1.05);
}

.participant-content{
    padding:1.5rem;
}

.participant-meta{
    display:flex;
    align-items:center;
    gap:.6rem;

    flex-wrap:wrap;

    margin-bottom:1rem;
}

.participant-country,
.participant-booth{
    display:inline-flex;
    align-items:center;

    padding:.4rem .7rem;

    font-size:var(--fs-078);

    font-weight:600;

    letter-spacing:.8px;

    text-transform:uppercase;

    border:1px solid rgba(201,169,110,.12);

    background:
    linear-gradient(
        90deg,
        rgba(201,169,110,.08),
        transparent
    );

    color:var(--navy);
}

.participant-company{
    font-family:var(--font-display);

    font-size:1.5rem;

    line-height:1.25;

    color:var(--navy);

    margin-bottom:1rem;
}

.participant-category{
    color:var(--mahogany);

    font-size:var(--fs-090);

    line-height:1.8;
}

@media(max-width:991px){

    .participant-company{
        font-size:1.3rem;
    }

    .participant-logo-wrap{
        height:200px;
    }
}

@media(max-width:576px){

    .participant-content{
        padding:1.1rem;
    }

    .participant-company{
        font-size:1.15rem;
    }

    .participant-logo-wrap{
        height:180px;
        padding:1.5rem;
    }
}

/* =========================================================
   MARKET INSIGHT
========================================================= */

#market-insight{
    background:var(--green-pale);
    position:relative;
    overflow:hidden;
}

/* MAIN INFOGRAPHIC */
.ai-infographic{
    background:
        radial-gradient(circle at top right, rgba(201,169,110,0.08), transparent 30%),
        linear-gradient(
            135deg,
            rgba(255,255,255,0.95),
            rgba(240,245,242,1)
        );

    border:1px solid rgba(20,51,35,0.08);
    border-radius:32px;
    position:relative;
    overflow:hidden;
    box-shadow:
        0 25px 60px rgba(14,36,24,0.08),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

/* CARD */
.info-card{
    background:rgba(255,255,255,0.78);
    backdrop-filter:blur(12px);

    border:1px solid rgba(20,51,35,0.08);
    border-radius:28px;

    padding:32px;

    box-shadow:
        0 10px 35px rgba(14,36,24,0.06);

    height:100%;
}

/* ICON */
.icon-box{
    width:68px;
    height:68px;

    border-radius:20px;

    background:linear-gradient(
        135deg,
        var(--green-brand),
        var(--green-mid)
    );

    color:var(--white);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:var(--fs-140);

    box-shadow:
        0 10px 25px rgba(20,51,35,0.18);
}

/* TEXT */
.info-card small{
    color:var(--mahogany-bright);
    letter-spacing:0.18em;
    font-size:var(--fs-078);
}

.info-card h3{
    color:var(--navy-deep);
    font-size:clamp(2rem, 4vw + 1rem, 3.5rem);
    line-height:1;
}

.info-card h4,
.info-card h5{
    color:var(--green-brand);
    font-size:var(--fs-155);
}

.info-card p{
    color:rgba(42,42,42,0.8);
    line-height:1.9;
    font-size:var(--fs-095);
}

/* CENTER GLOBE */
.center-globe{
    width:100%;
    max-width:360px;
    aspect-ratio:1/1;

    border-radius:50%;

    padding:16px;

    position:relative;
    overflow:hidden;

    box-shadow:
        0 0 0 10px rgba(201,169,110,0.08),
        0 25px 80px rgba(20,51,35,0.22);
}

/* SPINNING GRADIENT */
.center-globe::before{
    content:'';

    position:absolute;
    inset:-20%;

    background:conic-gradient(
        from 0deg,
        var(--green-mid),
        var(--gold),
        var(--green-brand),
        var(--green-darkest),
        var(--green-mid)
    );

    animation:spinGlow 8s linear infinite;
}

/* INNER CIRCLE */
.globe-circle{
    width:100%;
    height:100%;

    border-radius:50%;

    background:
        radial-gradient(
            circle at top,
            rgba(255,255,255,0.95),
            rgba(240,245,242,1)
        );

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    padding:45px;

    border:1px solid rgba(20,51,35,0.08);

    position:relative;
    z-index:2;
}

/* OPTIONAL EXTRA GLOW */
.center-globe::after{
    content:'';

    position:absolute;
    inset:10px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,0.15);

    z-index:1;
}

/* ANIMATION */
@keyframes spinGlow{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

.globe-circle small{
    color:var(--mahogany-bright);
    letter-spacing:0.15em;
}

.globe-circle h1{
    color:var(--green-brand);
    font-size:clamp(4rem, 9vw, 7rem);
    line-height:1;
}

.globe-circle p{
    color:rgba(42,42,42,0.75);
    line-height:1.8;
}

/* MINI BOX */
.mini-box{
    background:
        linear-gradient(
            135deg,
            rgba(240,245,242,1),
            rgba(255,255,255,1)
        );

    border:1px solid rgba(20,51,35,0.06);

    border-radius:20px;

    padding:24px;

    text-align:center;

    transition:all .35s ease;
}

.mini-box:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(14,36,24,0.08);
}

.mini-box i{
    font-size:var(--fs-170);
    color:var(--gold);
}

.mini-box p{
    color:var(--green-brand);
    font-size:var(--fs-088);
    font-weight:600;
}

/* PROGRESS */
.custom-progress{
    height:12px;
    border-radius:50px;
    overflow:hidden;

    background:rgba(20,51,35,0.08);
}

.custom-progress .progress-bar{
    background:
        linear-gradient(
            90deg,
            var(--gold),
            var(--green-mid)
        );

    border-radius:50px;
}

/* HIGHLIGHT CARD */
.highlight-card{
    background:
        linear-gradient(
            135deg,
            var(--green-brand),
            var(--green-darkest)
        );

    color:var(--white);

    border:none;
}

.highlight-card h3,
.highlight-card h5,
.highlight-card p,
.highlight-card small{
    color:var(--white);
}

/* CITY LINE */
.city-line{
    width:100%;
    height:5px;

    border-radius:50px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            var(--green-mid),
            transparent
        );

    opacity:0.6;

    margin-top:30px;
}

/* RESPONSIVE */
@media(max-width:991px){

    .center-globe{
        max-width:280px;
        margin-bottom:20px;
    }

    .info-card{
        padding:24px;
    }

}

@media(max-width:576px){

    .ai-infographic{
        border-radius:24px;
    }

    .info-card{
        border-radius:22px;
    }

    .icon-box{
        width:58px;
        height:58px;
    }

}