* {
                margin: 0;
                padding: 0;
                box-sizing: border-box
            }

            :root {
                /* Unified palette — warm cream base with deep violet accents */
                --bg-0: #fdfcfa;
                --bg-1: #f8f6f2;
                --bg-2: #f1eeea;
                --bg-3: #e8e4de;
                --bg-4: #ddd8d0;
                --white: #ffffff;
                --ink: #18131e;
                --ink-2: #2c2436;
                --ink-3: #463c54;
                --ink-4: #5e5470;
                --muted: #8a8298;
                --silver: #a9a3b4;
                --pearl: #ccc8d4;
                /* Accent spectrum */
                --v: #6b3fa0;
                --v-d: #5a2e90;
                --v-dd: #4a2080;
                --v-l: #8b60c0;
                --v-xl: #b898e0;
                --v-xxl: #ddd0f0;
                --v-bg: rgba(107,63,160,.05);
                --v-bg2: rgba(107,63,160,.10);
                --v-bg3: rgba(107,63,160,.18);
                --v-glow: 0 4px 24px rgba(107,63,160,.18);
                --v-glow2: 0 8px 40px rgba(107,63,160,.22);
                --gold: #b8892e;
                --gold-l: #d4a94e;
                --gold-bg: rgba(184,137,46,.07);
                --teal: #0e8a72;
                --teal-bg: rgba(14,138,114,.06);
                --coral: #d4594e;
                --coral-bg: rgba(212,89,78,.06);
                --blue: #3a6ad4;
                --blue-bg: rgba(58,106,212,.06);
                /* Typography */
                --serif: 'Fraunces',Georgia,serif;
                --sans: 'Inter',system-ui,sans-serif;
                --mono: 'JetBrains Mono',monospace;
                /* Radius */
                --r: 10px;
                --r2: 16px;
                --r3: 24px;
                --r-full: 9999px;
                /* Motion */
                --ease: cubic-bezier(.22,1,.36,1);
                --ease-b: cubic-bezier(.34,1.56,.64,1);
                /* Shadows */
                --sh-xs: 0 1px 2px rgba(24,19,30,.03);
                --sh-s: 0 1px 4px rgba(24,19,30,.04),0 4px 16px rgba(24,19,30,.03);
                --sh-m: 0 4px 12px rgba(24,19,30,.05),0 16px 40px rgba(24,19,30,.04);
                --sh-l: 0 8px 24px rgba(107,63,160,.06),0 24px 56px rgba(24,19,30,.05);
                --sh-xl: 0 16px 48px rgba(107,63,160,.10),0 40px 80px rgba(24,19,30,.06);
                /* Section spacing */
                --sec-y: clamp(80px,10vw,140px);
            }

            html {
                scroll-behavior: smooth;
                scroll-padding-top: 80px
            }

            body {
                font-family: var(--sans);
                background: var(--bg-0);
                color: var(--ink);
                overflow-x: hidden;
                -webkit-font-smoothing: antialiased;
                line-height: 1.6
            }

            ::selection {
                background: var(--v);
                color: #fff
            }

            img {
                display: block;
                max-width: 100%
            }

            a {
                text-decoration: none;
                color: inherit
            }

            button {
                font-family: var(--sans)
            }

            /* ===================== SMOOTH SCROLL PROGRESS ===================== */
            .scroll-progress {
                position: fixed;
                top: 0;
                left: 0;
                height: 3px;
                background: linear-gradient(90deg,var(--v),var(--v-l),var(--gold-l));
                z-index: 9999;
                width: 0;
                transition: none;
                border-radius: 0 3px 3px 0
            }

            /* ===================== GLOBAL GRAIN ===================== */
            body::after {
                content: '';
                position: fixed;
                inset: 0;
                pointer-events: none;
                z-index: 9998;
                opacity: .018;
                background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
            }

            /* ===================== HEADER ===================== */
            header {
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 900;
                padding: 1rem 0;
                transition: all .4s var(--ease)
            }

            header.scrolled {
                background: rgba(253,252,250,.94);
                backdrop-filter: blur(24px) saturate(1.6);
                padding: .7rem 0;
                box-shadow: 0 1px 0 var(--bg-3)
            }

            .h-w {
                max-width: 1340px;
                margin: 0 auto;
                padding: 0 2rem;
                display: flex;
                justify-content: space-between;
                align-items: center
            }

            .logo-a img {
                width: 140px;
                height: 38px;
                object-fit: cover;
                object-position: center 47%;
                transition: all .3s var(--ease-b)
            }

            .logo-a:hover img {
                transform: scale(1.04)
            }

            .h-nav {
                display: flex;
                align-items: center;
                gap: 0
            }

            .h-link {
                font-size: 13.5px;
                font-weight: 500;
                color: var(--ink-3);
                padding: 8px 14px;
                border-radius: var(--r);
                transition: all .25s;
                position: relative
            }

            .h-link:hover,.h-link.act {
                color: var(--v);
                background: var(--v-bg)
            }

            .h-cta {
                margin-left: 12px;
                background: var(--v);
                color: #fff;
                padding: 9px 22px;
                border-radius: var(--r);
                font-size: 13px;
                font-weight: 600;
                border: none;
                cursor: pointer;
                transition: all .3s var(--ease);
                box-shadow: var(--v-glow)
            }

            .h-cta:hover {
                background: var(--v-d);
                transform: translateY(-1px);
                box-shadow: var(--v-glow2)
            }

            .hbg {
                display: none;
                background: none;
                border: none;
                cursor: pointer;
                padding: 6px;
                flex-direction: column;
                gap: 4px
            }

            .hbg span {
                width: 20px;
                height: 1.5px;
                background: var(--ink);
                border-radius: 2px;
                transition: all .3s var(--ease)
            }

            .hbg.on span:nth-child(1) {
                transform: rotate(45deg) translate(4px,4px)
            }

            .hbg.on span:nth-child(2) {
                opacity: 0
            }

            .hbg.on span:nth-child(3) {
                transform: rotate(-45deg) translate(4px,-4px)
            }

            .mob-m {
                display: none;
                position: fixed;
                inset: 0;
                top: 56px;
                background: rgba(253,252,250,.98);
                backdrop-filter: blur(20px);
                z-index: 899;
                flex-direction: column;
                padding: 1.5rem 2rem;
                gap: .5rem
            }

            .mob-m.on {
                display: flex
            }

            .mob-m a {
                font-size: 18px;
                font-weight: 600;
                color: var(--ink);
                padding: 1rem 0;
                border-bottom: 1px solid var(--bg-3);
                transition: color .2s
            }

            .mob-m a:hover {
                color: var(--v)
            }

            /* ===================== HERO ===================== */
            .hero {
                min-height: 100vh;
                display: flex;
                align-items: center;
                padding: 7rem 2rem 5rem;
                position: relative;
                overflow: hidden;
                background: linear-gradient(160deg,var(--bg-0) 0%,var(--v-xxl) 40%,var(--bg-1) 70%,var(--bg-0) 100%)
            }

            .hero::before {
                content: '';
                position: absolute;
                top: -200px;
                right: -200px;
                width: 700px;
                height: 700px;
                background: radial-gradient(circle,rgba(107,63,160,.12),transparent 70%);
                border-radius: 50%;
                animation: heroPulse 8s ease-in-out infinite;
                pointer-events: none
            }

            .hero::after {
                content: '';
                position: absolute;
                bottom: -150px;
                left: -100px;
                width: 500px;
                height: 500px;
                background: radial-gradient(circle,rgba(184,137,46,.08),transparent 70%);
                border-radius: 50%;
                animation: heroPulse 10s ease-in-out infinite 3s;
                pointer-events: none
            }

            @keyframes heroPulse {
                0%,100% {
                    transform: scale(1);
                    opacity: .7
                }

                50% {
                    transform: scale(1.15);
                    opacity: 1
                }
            }

            .hero-w {
                max-width: 1340px;
                margin: 0 auto;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 4rem;
                align-items: center;
                position: relative;
                z-index: 2
            }

            .hero-badge {
                display: inline-flex;
                align-items: center;
                gap: .5rem;
                background: var(--white);
                color: var(--v);
                padding: 7px 16px;
                border-radius: var(--r-full);
                font-size: 12.5px;
                font-weight: 600;
                margin-bottom: 1.5rem;
                border: 1px solid var(--v-bg3);
                box-shadow: var(--sh-s);
                animation: fadeUp .7s var(--ease) .1s both
            }

            .hero-badge .dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--teal);
                animation: pulse 2s infinite
            }

            @keyframes pulse {
                0%,100% {
                    opacity: 1;
                    transform: scale(1)
                }

                50% {
                    opacity: .4;
                    transform: scale(.7)
                }
            }

            .hero h1 {
                font-family: var(--serif);
                font-size: clamp(38px,5.2vw,68px);
                font-weight: 600;
                line-height: 1.08;
                color: var(--ink);
                margin-bottom: 1.5rem;
                animation: fadeUp .8s var(--ease) .2s both
            }

            .hero h1 .acc {
                background: linear-gradient(135deg,var(--v),var(--v-l));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                font-style: italic
            }

            .hero-p {
                font-size: 17px;
                line-height: 1.9;
                color: var(--muted);
                max-width: 500px;
                margin-bottom: 2.5rem;
                animation: fadeUp .8s var(--ease) .3s both
            }

            .hero-btns {
                display: flex;
                gap: 1rem;
                flex-wrap: wrap;
                animation: fadeUp .8s var(--ease) .4s both
            }

            .btn-v {
                padding: 14px 32px;
                background: var(--v);
                color: #fff;
                border: none;
                border-radius: var(--r);
                font-size: 14.5px;
                font-weight: 600;
                cursor: pointer;
                transition: all .3s var(--ease);
                box-shadow: var(--v-glow);
                display: inline-flex;
                align-items: center;
                gap: .5rem
            }

            .btn-v:hover {
                background: var(--v-d);
                transform: translateY(-2px);
                box-shadow: var(--v-glow2)
            }

            .btn-w {
                padding: 14px 32px;
                background: var(--white);
                color: var(--ink-2);
                border: 1.5px solid var(--bg-3);
                border-radius: var(--r);
                font-size: 14.5px;
                font-weight: 600;
                cursor: pointer;
                transition: all .3s var(--ease);
                display: inline-flex;
                align-items: center;
                gap: .5rem;
                box-shadow: var(--sh-xs)
            }

            .btn-w:hover {
                border-color: var(--v-l);
                color: var(--v);
                transform: translateY(-2px);
                box-shadow: var(--sh-m)
            }

            /* Hero visual */
            .hero-vis {
                position: relative;
                animation: fadeUp .9s var(--ease) .5s both
            }

            .hv-stack {
                position: relative;
                height: 480px
            }

            .hv-c {
                position: absolute;
                border-radius: var(--r2);
                overflow: hidden;
                box-shadow: var(--sh-l);
                transition: all .5s var(--ease);
                border: 3px solid var(--white)
            }

            .hv-c img {
                width: 100%;
                height: 100%;
                object-fit: cover
            }

            .hv-c:hover {
                z-index: 10!important;
                transform: rotate(0deg) scale(1.03)!important;
                box-shadow: var(--sh-xl)
            }

            .hv-1 {
                width: 300px;
                height: 370px;
                top: 10px;
                left: 0;
                z-index: 3;
                transform: rotate(-2.5deg)
            }

            .hv-2 {
                width: 240px;
                height: 290px;
                top: 50px;
                right: 0;
                z-index: 2;
                transform: rotate(3deg)
            }

            .hv-3 {
                width: 220px;
                height: 170px;
                bottom: 0;
                left: 50px;
                z-index: 4;
                transform: rotate(-1deg)
            }

            .hv-float {
                position: absolute;
                background: var(--white);
                border-radius: var(--r);
                padding: 10px 16px;
                box-shadow: var(--sh-m);
                z-index: 5;
                display: flex;
                align-items: center;
                gap: .6rem;
                font-size: 12.5px;
                font-weight: 600;
                color: var(--ink-2);
                border: 1px solid var(--bg-3);
                animation: floatY 5s ease-in-out infinite
            }

            .hv-float.f1 {
                top: 0;
                right: 30px
            }

            .hv-float.f2 {
                bottom: 30px;
                right: 10px;
                animation-delay: -2.5s
            }

            .hv-float .fi {
                width: 34px;
                height: 34px;
                border-radius: var(--r);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 13px
            }

            @keyframes floatY {
                0%,100% {
                    transform: translateY(0)
                }

                50% {
                    transform: translateY(-10px)
                }
            }

            @keyframes fadeUp {
                from {
                    opacity: 0;
                    transform: translateY(28px)
                }

                to {
                    opacity: 1;
                    transform: translateY(0)
                }
            }

            /* ===================== MARQUEE ===================== */
            .marquee-s {
                padding: 1.8rem 0;
                background: var(--white);
                border-bottom: 1px solid var(--bg-2);
                overflow: hidden
            }

            .marq-l {
                text-align: center;
                font-size: 11px;
                font-weight: 600;
                letter-spacing: 3px;
                text-transform: uppercase;
                color: var(--silver);
                margin-bottom: 1.2rem
            }

            .marq {
                display: flex;
                gap: 3.5rem;
                animation: mScroll 23.333333s linear infinite;
                width: max-content
            }

            .marq-i {
                font-size: 15px;
                font-weight: 600;
                color: var(--bg-4);
                white-space: nowrap;
                display: flex;
                align-items: center;
                gap: .5rem;
                transition: color .3s;
                letter-spacing: .3px
            }

            .marq-i:hover {
                color: var(--silver)
            }

            @keyframes mScroll {
                0% {
                    transform: translateX(0)
                }

                100% {
                    transform: translateX(-50%)
                }
            }

            /* ===================== SECTION SYSTEM ===================== */
            .s-pad {
                padding: var(--sec-y) 2rem
            }

            .ctn {
                max-width: 1340px;
                margin: 0 auto
            }

            .s-chip {
                display: inline-flex;
                align-items: center;
                gap: .5rem;
                background: var(--v-bg);
                color: var(--v);
                padding: 6px 14px;
                border-radius: var(--r-full);
                font-size: 11.5px;
                font-weight: 600;
                letter-spacing: .5px;
                text-transform: uppercase;
                margin-bottom: 1rem;
                border: 1px solid var(--v-bg2)
            }

            .s-chip i {
                font-size: 9px
            }

            .s-title {
                font-family: var(--serif);
                font-size: clamp(30px,3.8vw,48px);
                font-weight: 600;
                color: var(--ink);
                line-height: 1.15;
                margin-bottom: .8rem
            }

            .s-desc {
                font-size: 16px;
                line-height: 1.9;
                color: var(--muted);
                max-width: 540px
            }

            .s-head {
                display: flex;
                justify-content: space-between;
                align-items: end;
                margin-bottom: 3.5rem;
                flex-wrap: wrap;
                gap: 2rem
            }

            .va {
                font-size: 13.5px;
                font-weight: 600;
                color: var(--v);
                display: inline-flex;
                align-items: center;
                gap: .4rem;
                transition: gap .3s
            }

            .va:hover {
                gap: .7rem
            }

            /* Reveal */
            .rv {
                opacity: 0;
                transform: translateY(32px);
                transition: all .65s var(--ease)
            }

            .rv.vis {
                opacity: 1;
                transform: translateY(0)
            }

            .rd1 {
                transition-delay: .08s
            }

            .rd2 {
                transition-delay: .16s
            }

            .rd3 {
                transition-delay: .24s
            }

            .rd4 {
                transition-delay: .32s
            }

            /* Alternating backgrounds — unified color grading */
            .bg-0 {
                background: var(--bg-0)
            }

            .bg-1 {
                background: var(--bg-1)
            }

            .bg-w {
                background: var(--white)
            }

            /* ====== INTERACTIVE IMPACT SECTION ====== */

.bg-v {
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 6rem 0;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Animated background overlay */
.bg-v::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(107,63,160,.2) 0%, transparent 50%);
  animation: overlayFloat 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes overlayFloat {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(20px, -10px); }
  50% { transform: translate(-10px, 20px); }
  75% { transform: translate(-20px, -15px); }
}

            /* =============== INTERACTIVE 5-COLUMN PROGRAMS ========= */
           /* ====== INTERACTIVE 5-COL PROGRAMS ====== */

.pg-5col {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 3rem;
  perspective: 1000px;
}

.pc-compact {
  background: var(--white);
  border-radius: var(--r2);
  padding: 1.5rem 1.2rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all .5s var(--ease);
  border: 1px solid var(--bg-3);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(60px) rotateX(10deg);
}

.pc-compact.vis {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

.pc-compact:nth-child(1) { transition-delay: 0s; }
.pc-compact:nth-child(2) { transition-delay: .12s; }
.pc-compact:nth-child(3) { transition-delay: .24s; }
.pc-compact:nth-child(4) { transition-delay: .36s; }
.pc-compact:nth-child(5) { transition-delay: .48s; }

.pc-compact:hover {
  border-color: var(--v-bg3);
  box-shadow: 0 16px 48px rgba(107,63,160,.15);
  transform: translateY(-8px) scale(1.02);
}

.pc-compact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(107,63,160,.05) 0%, transparent 100%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  z-index: 0;
}

.pc-compact:hover::before {
  opacity: 1;
}

.pc-compact::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
  z-index: 2;
}

.pc-compact:hover::after {
  transform: scaleX(1);
}

.pc-compact.pc-v::after { background: linear-gradient(90deg, var(--v), var(--v-l)); }
.pc-compact.pc-t::after { background: linear-gradient(90deg, var(--teal), #26a886); }
.pc-compact.pc-b::after { background: linear-gradient(90deg, var(--blue), #5a8de8); }
.pc-compact.pc-g::after { background: linear-gradient(90deg, var(--gold), var(--gold-l)); }
.pc-compact.pc-c::after { background: linear-gradient(90deg, var(--coral), #e8756e); }

.pc-compact-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 1rem;
  transition: all .4s var(--ease-b);
  position: relative;
  z-index: 1;
  animation: iconPulse 3s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.pc-compact:hover .pc-compact-icon {
  transform: scale(1.15) rotate(-15deg);
  animation: none;
  box-shadow: 0 8px 20px rgba(107,63,160,.2);
}

.pc-compact-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: .4rem;
  display: block;
  position: relative;
  z-index: 1;
  transition: all .3s;
}

.pc-compact:hover .pc-compact-tag {
  letter-spacing: 2px;
}

.pc-compact h3 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .6rem;
  line-height: 1.3;
  position: relative;
  z-index: 1;
  transition: color .3s;
}

.pc-compact:hover h3 {
  color: var(--v);
}

.pc-compact p {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  flex-grow: 1;
  margin-bottom: .8rem;
  position: relative;
  z-index: 1;
  transition: color .3s;
}

.pc-compact:hover p {
  color: var(--ink-2);
}

.pc-compact-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.pc-compact-pill {
  font-size: 9px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-weight: 500;
  border: 1px solid transparent;
  transition: all .3s var(--ease);
  opacity: 0.8;
  transform: scale(0.95);
}

.pc-compact:hover .pc-compact-pill {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.pc-compact-pill:nth-child(1) { transition-delay: 0s; }
.pc-compact-pill:nth-child(2) { transition-delay: .08s; }
.pc-compact-pill:nth-child(3) { transition-delay: .16s; }

.pc-compact-arr {
  position: absolute;
  top: 1.5rem;
  right: 1.2rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: all .3s var(--ease);
  background: var(--bg-1);
  color: var(--muted);
  z-index: 2;
}

.pc-compact:hover .pc-compact-arr {
  background: var(--v);
  color: #fff;
  transform: translateX(4px) rotate(45deg);
  box-shadow: 0 4px 16px rgba(107,63,160,.25);
}

@media(max-width: 1440px) {
  .pg-5col {
    grid-template-columns: repeat(5, 1fr);
    gap: .8rem;
  }
  .pc-compact {
    padding: 1.2rem 1rem;
  }
  .pc-compact h3 {
    font-size: 15px;
  }
  .pc-compact p {
    font-size: 12px;
  }
}

@media(max-width: 1024px) {
  .pg-5col {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .pc-compact {
    padding: 1.5rem 1.2rem;
  }
  .pc-compact h3 {
    font-size: 16px;
  }
}

@media(max-width: 768px) {
  .pg-5col {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media(max-width: 480px) {
  .pg-5col {
    grid-template-columns: 1fr;
  }
}
            
            /* Color helpers */
            .ic-v {
                background: var(--v-bg);
                color: var(--v)
            }

            .ic-t {
                background: var(--teal-bg);
                color: var(--teal)
            }

            .ic-b {
                background: var(--blue-bg);
                color: var(--blue)
            }

            .ic-g {
                background: var(--gold-bg);
                color: var(--gold)
            }

            .ic-c {
                background: var(--coral-bg);
                color: var(--coral)
            }

            .pill-v {
                background: var(--v-bg);
                color: var(--v);
                border-color: var(--v-bg2)
            }

            .pill-t {
                background: var(--teal-bg);
                color: var(--teal)
            }

            .pill-b {
                background: var(--blue-bg);
                color: var(--blue)
            }

            .pill-g {
                background: var(--gold-bg);
                color: var(--gold)
            }

            .pill-c {
                background: var(--coral-bg);
                color: var(--coral)
            }

            .tag-v {
                color: var(--v)
            }

            .tag-t {
                color: var(--teal)
            }

            .tag-b {
                color: var(--blue)
            }

            .tag-g {
                color: var(--gold)
            }

            .tag-c {
                color: var(--coral)
            }

            /* ===================== IMPACT ===================== */
        
.imp-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  border-radius: var(--r2);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* Impact item card */
.imp-i {
  text-align: center;
  padding: 3.5rem 1.5rem;
  position: relative;
  transition: all .5s var(--ease);
  border-right: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  
  /* Reveal animation */
  opacity: 0;
  transform: translateY(40px) scale(0.95);
}

.imp-i.vis {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger delays */
.imp-i:nth-child(1) { transition-delay: 0s; }
.imp-i:nth-child(2) { transition-delay: .15s; }
.imp-i:nth-child(3) { transition-delay: .3s; }
.imp-i:nth-child(4) { transition-delay: .45s; }

/* Remove right border from last item */
.imp-i:last-child {
  border-right: none;
}

/* Hover effect */
.imp-i:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-8px) scale(1.03);
  box-shadow: inset 0 0 30px rgba(255,255,255,.1);
}

/* === NUMBER ANIMATION === */
.imp-n {
  font-family: var(--serif);
  font-size: clamp(38px, 4.5vw, 58px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: .3rem;
  position: relative;
  
  /* Pulse animation */
  animation: numberPulse 2s ease-in-out infinite;
}

@keyframes numberPulse {
  0%, 100% { 
    transform: scale(1);
    text-shadow: 0 0 0px rgba(255,255,255,0);
  }
  50% { 
    transform: scale(1.03);
    text-shadow: 0 0 20px rgba(255,255,255,.3);
  }
}

/* Stop pulse saat counting */
.imp-i.counting .imp-n {
  animation: none;
  text-shadow: 0 0 15px rgba(255,255,255,.2);
}

/* Counter complete glow */
.imp-i.vis .imp-n {
  animation: numberGlow 3s ease-in-out infinite;
}

@keyframes numberGlow {
  0%, 100% { text-shadow: 0 0 0px rgba(255,255,255,0); }
  50% { text-shadow: 0 0 20px rgba(255,255,255,.3); }
}

/* === LABEL === */
.imp-l {
  font-size: 13px;
  opacity: .75;
  margin-top: .5rem;
  font-weight: 400;
  letter-spacing: .5px;
  transition: opacity .3s;
}

.imp-i:hover .imp-l {
  opacity: 1;
}

/* === PROGRESS BAR === */
.imp-bar {
  width: 36px;
  height: 3px;
  background: rgba(255,255,255,.2);
  border-radius: 3px;
  margin: 1.2rem auto 0;
  overflow: hidden;
  position: relative;
}

.imp-bar-f {
  height: 100%;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,.5));
  border-radius: 3px;
  width: 0;
  transition: width 2s var(--ease);
  box-shadow: 0 0 10px rgba(255,255,255,.4);
}

.imp-i.vis .imp-bar-f {
  width: 100%;
}

/* Bar shimmer effect */
.imp-bar-f::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: barShimmer 2s infinite;
}

@keyframes barShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* === CORNER ACCENT === */
.imp-i::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.3), transparent);
  opacity: 0;
  transition: opacity .5s;
}

.imp-i:hover::before {
  opacity: 1;
}

/* === RESPONSIVE === */
@media(max-width: 1024px) {
  .imp-g {
    grid-template-columns: repeat(2, 1fr);
  }
  .imp-i:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,.1);
  }
  .imp-i:nth-child(2n) {
    border-right: none;
  }
  .imp-i:nth-child(3),
  .imp-i:nth-child(4) {
    border-top: 1px solid rgba(255,255,255,.1);
  }
}

@media(max-width: 768px) {
  .imp-g {
    grid-template-columns: 1fr;
  }
  .imp-i {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .imp-i:last-child {
    border-bottom: none;
  }
}
            /* ===================== NEWS ===================== */
            .nf {
                display: flex;
                gap: .4rem;
                flex-wrap: wrap
            }

            .nfb {
                padding: 7px 16px;
                border-radius: var(--r-full);
                font-size: 12.5px;
                font-weight: 500;
                cursor: pointer;
                border: 1px solid var(--bg-3);
                background: var(--white);
                color: var(--ink-4);
                transition: all .25s;
                font-family: var(--sans)
            }

            .nfb.act,.nfb:hover {
                background: var(--v);
                color: #fff;
                border-color: var(--v)
            }

            .ng {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1.2rem
            }

            .ng .nc:first-child {
                grid-row: span 2
            }

            .nc {
                background: var(--white);
                border-radius: var(--r2);
                overflow: hidden;
                cursor: pointer;
                transition: all .4s var(--ease);
                border: 1px solid var(--bg-3);
                position: relative
            }

            .nc:hover {
                border-color: transparent;
                box-shadow: var(--sh-l);
                transform: translateY(-4px)
            }

            .nc-img {
                width: 100%;
                height: 200px;
                object-fit: cover;
                transition: transform .6s var(--ease)
            }

            .nc:first-child .nc-img {
                height: 100%;
                min-height: 420px;
                position: absolute;
                inset: 0
            }

            .nc:hover .nc-img {
                transform: scale(1.03)
            }

            .nc-b {
                padding: 1.8rem
            }

            .nc:first-child .nc-b {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 2.5rem;
                z-index: 2;
                background: linear-gradient(transparent,rgba(24,19,30,.85))
            }

            .nc:first-child::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(transparent 50%,rgba(24,19,30,.4));
                z-index: 1
            }

            .nm {
                display: flex;
                align-items: center;
                gap: .8rem;
                margin-bottom: .7rem;
                font-size: 11.5px;
                font-weight: 500;
                color: var(--silver)
            }

            .nc:first-child .nm {
                color: rgba(255,255,255,.65)
            }

            .ncat {
                padding: 3px 9px;
                border-radius: 6px;
                font-size: 10px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: .5px
            }

            .nc-t {
                font-family: var(--serif);
                font-size: 19px;
                font-weight: 600;
                color: var(--ink);
                line-height: 1.35;
                margin-bottom: .5rem
            }

            .nc:first-child .nc-t {
                font-size: 24px;
                color: #fff
            }

            .nc-e {
                font-size: 13.5px;
                line-height: 1.7;
                color: var(--muted)
            }

            .nc:first-child .nc-e {
                color: rgba(255,255,255,.7)
            }

            /* ===================== EVENTS ===================== */
            .evg {
                display: grid;
                grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
                gap: 1.2rem
            }

            .evc {
                border-radius: var(--r2);
                overflow: hidden;
                background: var(--white);
                border: 1px solid var(--bg-3);
                transition: all .4s var(--ease);
                cursor: pointer
            }

            .evc:hover {
                box-shadow: var(--sh-l);
                transform: translateY(-4px);
                border-color: transparent
            }

            .ev-img {
                width: 100%;
                height: 200px;
                object-fit: cover;
                transition: transform .5s var(--ease)
            }

            .evc:hover .ev-img {
                transform: scale(1.03)
            }

            .ev-b {
                padding: 1.8rem
            }

            .ev-db {
                display: inline-flex;
                align-items: center;
                gap: .4rem;
                background: var(--v-bg);
                color: var(--v);
                padding: 5px 12px;
                border-radius: var(--r);
                font-size: 11.5px;
                font-weight: 600;
                margin-bottom: .8rem;
                border: 1px solid var(--v-bg2)
            }

            .ev-t {
                font-family: var(--serif);
                font-size: 19px;
                font-weight: 600;
                color: var(--ink);
                margin-bottom: .5rem;
                line-height: 1.3
            }

            .ev-desc {
                font-size: 13.5px;
                color: var(--muted);
                line-height: 1.7;
                margin-bottom: 1rem
            }

            .ev-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                gap: .8rem
            }

            .ev-inf {
                display: flex;
                gap: 1.2rem;
                font-size: 12px;
                color: var(--silver);
                flex-wrap: wrap
            }

            .ev-inf span {
                display: flex;
                align-items: center;
                gap: .3rem
            }

            .ev-st {
                display: inline-block;
                padding: 4px 10px;
                border-radius: 6px;
                font-size: 10.5px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: .5px
            }

            .st-o {
                background: var(--teal-bg);
                color: var(--teal)
            }

            .st-s {
                background: var(--gold-bg);
                color: var(--gold)
            }

            /* ===================== ABOUT ===================== */
            .ab-g {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 5rem;
                align-items: center
            }

            .ab-iw {
                position: relative
            }

            .ab-im {
                border-radius: var(--r3);
                overflow: hidden;
                box-shadow: var(--sh-l)
            }

            .ab-im img {
                width: 100%;
                height: 460px;
                object-fit: cover
            }

            .ab-fl {
                position: absolute;
                background: var(--white);
                border-radius: var(--r);
                padding: 1rem 1.4rem;
                box-shadow: var(--sh-m);
                display: flex;
                align-items: center;
                gap: .8rem;
                animation: floatY 5s ease-in-out infinite;
                border: 1px solid var(--bg-3);
                z-index: 3
            }

            .ab-fl.f1 {
                top: -16px;
                right: -16px
            }

            .ab-fl.f2 {
                bottom: 24px;
                left: -16px;
                animation-delay: -2.5s
            }

            .ab-fl .fn {
                font-family: var(--serif);
                font-size: 26px;
                font-weight: 700;
                color: var(--v)
            }

            .ab-fl .ft {
                font-size: 12px;
                font-weight: 500;
                color: var(--muted);
                line-height: 1.3
            }

            .ab-t p {
                font-size: 15.5px;
                line-height: 1.95;
                color: var(--muted);
                margin-bottom: 1.4rem
            }

            .ab-vals {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1rem;
                margin-top: 2rem
            }

            .av {
                padding: 1.4rem;
                border-radius: var(--r);
                border: 1px solid var(--bg-3);
                background: var(--white);
                transition: all .3s var(--ease)
            }

            .av:hover {
                border-color: var(--v-bg2);
                box-shadow: var(--sh-s);
                transform: translateY(-2px)
            }

            .av h4 {
                font-family: var(--serif);
                font-size: 17px;
                font-weight: 600;
                color: var(--ink);
                margin-bottom: .3rem
            }

            .av p {
                font-size: 12.5px;
                line-height: 1.7;
                color: var(--muted);
                margin: 0
            }

            /* ===================== TIMELINE ===================== */
            .tl-w {
                position: relative;
                max-width: 760px;
                margin: 3rem auto 0
            }

            .tl-ln {
                position: absolute;
                left: 50%;
                width: 2px;
                top: 0;
                bottom: 0;
                background: var(--bg-3);
                transform: translateX(-50%)
            }

            .tl-i {
                display: flex;
                margin-bottom: 2.5rem;
                position: relative
            }

            .tl-i:nth-child(odd) {
                flex-direction: row-reverse;
                text-align: right
            }

            .tl-d {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: var(--v);
                border: 3px solid var(--bg-1);
                box-shadow: 0 0 0 3px var(--v-bg2);
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                z-index: 2
            }

            .tl-c {
                width: calc(50% - 36px);
                padding: 1.3rem;
                background: var(--white);
                border-radius: var(--r);
                border: 1px solid var(--bg-3);
                transition: all .3s var(--ease)
            }

            .tl-c:hover {
                border-color: var(--v-bg2);
                box-shadow: var(--sh-s)
            }

            .tl-y {
                font-family: var(--mono);
                font-size: 11px;
                color: var(--v);
                font-weight: 600;
                margin-bottom: .2rem
            }

            .tl-c h4 {
                font-size: 15px;
                font-weight: 600;
                color: var(--ink);
                margin-bottom: .2rem
            }

            .tl-c p {
                font-size: 12.5px;
                color: var(--muted);
                line-height: 1.6
            }

            /* ===================== PUBLICATIONS ===================== */
            .pub-g {
                display: grid;
                grid-template-columns: repeat(auto-fit,minmax(270px,1fr));
                gap: 1.2rem
            }

            @media (min-width: 1180px) {
                .pub-g {
                    grid-template-columns: repeat(4, 1fr);
                }
            }

            .pub-c {
                background: var(--white);
                border-radius: var(--r2);
                overflow: hidden;
                border: 1px solid var(--bg-3);
                transition: all .4s var(--ease);
                cursor: pointer
            }

            .pub-c:hover {
                box-shadow: var(--sh-l);
                transform: translateY(-4px);
                border-color: transparent
            }

            .pub-cv {
                width: 100%;
                height: 170px;
                object-fit: cover;
                transition: transform .5s var(--ease)
            }

            .pub-c:hover .pub-cv {
                transform: scale(1.03)
            }

            .pub-b {
                padding: 1.6rem
            }

            .pub-tp {
                font-size: 10.5px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 1px;
                color: var(--v);
                margin-bottom: .4rem
            }

            .pub-tt {
                font-family: var(--serif);
                font-size: 17px;
                font-weight: 600;
                color: var(--ink);
                margin-bottom: .4rem;
                line-height: 1.35
            }

            .pub-mt {
                font-size: 12.5px;
                color: var(--silver)
            }

            .pub-dl {
                display: inline-flex;
                align-items: center;
                gap: .4rem;
                margin-top: .8rem;
                font-size: 12.5px;
                font-weight: 600;
                color: var(--v);
                transition: gap .3s
            }

            .pub-c:hover .pub-dl {
                gap: .7rem
            }

            /* ===================== TEAM ===================== */
            .tm-g {
                display: grid;
                grid-template-columns: repeat(auto-fill,minmax(190px,1fr));
                gap: 1.2rem;
                margin-top: 3rem
            }

            .tm-c {
                text-align: center;
                padding: 1.8rem 1.2rem;
                border-radius: var(--r2);
                background: var(--bg-1);
                border: 1px solid transparent;
                transition: all .4s var(--ease);
                cursor: pointer
            }

            .tm-c:hover {
                background: var(--white);
                border-color: var(--v-bg2);
                box-shadow: var(--sh-m);
                transform: translateY(-4px)
            }

            .tm-im {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                object-fit: cover;
                margin: 0 auto 1rem;
                border: 3px solid var(--white);
                box-shadow: var(--sh-s);
                transition: all .3s var(--ease)
            }

            .tm-c:hover .tm-im {
                border-color: var(--v-xl);
                transform: scale(1.05)
            }

            .tm-n {
                font-family: var(--serif);
                font-size: 16px;
                font-weight: 600;
                color: var(--ink);
                margin-bottom: .2rem
            }

            .tm-r {
                font-size: 10.5px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 1px;
                color: var(--v);
                margin-bottom: .7rem
            }

            .tm-bio {
                font-size: 12.5px;
                color: var(--muted);
                line-height: 1.6
            }

            .tm-s {
                display: flex;
                justify-content: center;
                gap: .4rem;
                margin-top: .8rem
            }

            .tm-s a {
                width: 28px;
                height: 28px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--bg-3);
                color: var(--muted);
                font-size: 11px;
                transition: all .2s
            }

            .tm-s a:hover {
                background: var(--v);
                color: #fff
            }

            /* ===================== TESTIMONIALS ===================== */
            .ts-g {
                display: grid;
                grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
                gap: 1.2rem
            }

            .ts-c {
                background: var(--white);
                border-radius: var(--r2);
                padding: 2.2rem;
                border: 1px solid var(--bg-3);
                transition: all .3s var(--ease);
                position: relative
            }

            .ts-c::before {
                content: '\201C';
                position: absolute;
                top: 16px;
                right: 24px;
                font-family: var(--serif);
                font-size: 64px;
                color: var(--v-bg2);
                line-height: 1
            }

            .ts-c:hover {
                box-shadow: var(--sh-m);
                border-color: transparent;
                transform: translateY(-3px)
            }

            .ts-stars {
                color: var(--gold-l);
                font-size: 13px;
                margin-bottom: 1rem;
                letter-spacing: 1px
            }

            .ts-q {
                font-family: var(--serif);
                font-size: 17px;
                font-weight: 400;
                font-style: italic;
                color: var(--ink-2);
                line-height: 1.7;
                margin-bottom: 1.4rem
            }

            .ts-a {
                display: flex;
                align-items: center;
                gap: .8rem
            }

            .ts-a img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                object-fit: cover
            }

            .ta-n {
                font-size: 13.5px;
                font-weight: 600;
                color: var(--ink)
            }

            .ta-r {
                font-size: 11.5px;
                color: var(--silver)
            }

            /* ===================== FAQ ===================== */
            .fq-l {
                max-width: 760px;
                margin: 3rem auto 0
            }

            .fq-i {
                border-bottom: 1px solid var(--bg-3)
            }

            .fq-q {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 1.3rem 0;
                background: none;
                border: none;
                cursor: pointer;
                font-size: 15.5px;
                font-weight: 600;
                color: var(--ink);
                font-family: var(--sans);
                text-align: left;
                transition: color .2s;
                gap: 1rem
            }

            .fq-q:hover {
                color: var(--v)
            }

            .fq-q i {
                font-size: 12px;
                color: var(--silver);
                transition: all .3s var(--ease);
                flex-shrink: 0
            }

            .fq-i.on .fq-q i {
                transform: rotate(180deg);
                color: var(--v)
            }

            .fq-a {
                max-height: 0;
                overflow: hidden;
                transition: max-height .4s var(--ease)
            }

            .fq-i.on .fq-a {
                max-height: 300px
            }

            .fq-a p {
                font-size: 14.5px;
                line-height: 1.85;
                color: var(--muted);
                padding-bottom: 1.3rem
            }

            /* ===================== NEWSLETTER ===================== */
            .nl-w {
                position: relative;
                z-index: 1;
                text-align: center
            }

            .nl-t {
                font-family: var(--serif);
                font-size: clamp(26px,3.5vw,40px);
                font-weight: 600;
                margin-bottom: .8rem
            }

            .nl-d {
                font-size: 15.5px;
                opacity: .85;
                margin-bottom: 2rem;
                max-width: 440px;
                margin-left: auto;
                margin-right: auto
            }

            .nl-f {
                display: flex;
                gap: .6rem;
                max-width: 420px;
                margin: 0 auto
            }

            .nl-f input {
                flex: 1;
                padding: 13px 18px;
                border-radius: var(--r);
                border: none;
                font-size: 14.5px;
                font-family: var(--sans);
                background: rgba(255,255,255,.15);
                color: #fff;
                backdrop-filter: blur(6px);
                outline: none;
                border: 1px solid rgba(255,255,255,.15)
            }

            .nl-f input::placeholder {
                color: rgba(255,255,255,.55)
            }

            .nl-f input:focus {
                border-color: rgba(255,255,255,.4);
                background: rgba(255,255,255,.2)
            }

            .nl-f button {
                padding: 13px 26px;
                border-radius: var(--r);
                background: #fff;
                color: var(--v);
                border: none;
                font-size: 13.5px;
                font-weight: 700;
                cursor: pointer;
                transition: all .3s;
                font-family: var(--sans);
                white-space: nowrap
            }

            .nl-f button:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 16px rgba(0,0,0,.15)
            }

            /* ===================== CONTACT ===================== */
            .ct-g {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 5rem;
                align-items: start
            }

            .cf {
                display: grid;
                gap: 1.2rem
            }

            .c-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1rem
            }

            .cfl label {
                font-size: 11px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 1px;
                color: var(--silver);
                margin-bottom: .4rem;
                display: block
            }

            .cfl input,.cfl textarea,.cfl select {
                width: 100%;
                padding: 12px 14px;
                border: 1.5px solid var(--bg-3);
                border-radius: var(--r);
                font-size: 14.5px;
                font-family: var(--sans);
                color: var(--ink);
                background: var(--bg-1);
                transition: all .25s;
                outline: none
            }

            .cfl input:focus,.cfl textarea:focus,.cfl select:focus {
                border-color: var(--v);
                box-shadow: 0 0 0 3px var(--v-bg);
                background: var(--white)
            }

            .cfl textarea {
                resize: vertical;
                min-height: 110px
            }

            .c-info {
                background: var(--bg-1);
                border-radius: var(--r3);
                padding: 2.5rem;
                border: 1px solid var(--bg-3)
            }

            .c-info h3 {
                font-family: var(--serif);
                font-size: 24px;
                font-weight: 600;
                color: var(--ink);
                margin-bottom: 2rem
            }

            .ci {
                display: flex;
                gap: 1rem;
                margin-bottom: 1.6rem;
                align-items: flex-start
            }

            .ci-ic {
                width: 40px;
                height: 40px;
                border-radius: var(--r);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 15px;
                flex-shrink: 0
            }

            .ci h4 {
                font-size: 13.5px;
                font-weight: 600;
                color: var(--ink);
                margin-bottom: .15rem
            }

            .ci p,.ci a {
                font-size: 13.5px;
                color: var(--muted);
                line-height: 1.5;
                transition: color .2s
            }

            .ci a:hover {
                color: var(--v)
            }

            .c-map {
                width: 100%;
                height: 180px;
                border-radius: var(--r);
                margin-top: 1.2rem;
                overflow: hidden;
                border: 1px solid var(--bg-3)
            }

            .c-map img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                filter: saturate(.8)
            }

            /* ===================== FOOTER ===================== */
            footer {
                background: var(--ink);
                color: rgba(255,255,255,.6);
                padding: 4.5rem 2rem 1.8rem
            }

            .ft-g {
                max-width: 1340px;
                margin: 0 auto;
                display: grid;
                grid-template-columns: 2fr 1fr 1fr 1fr;
                gap: 2.5rem;
                margin-bottom: 2.5rem
            }

            .ft-br img {
                height: 26px;
                margin-bottom: .8rem;
                filter: brightness(10)
            }

            .ft-br p {
                font-size: 13.5px;
                line-height: 1.7;
                opacity: .5;
                max-width: 280px
            }

            .ft-soc {
                display: flex;
                gap: .5rem;
                margin-top: 1.2rem
            }

            .ft-soc a {
                width: 34px;
                height: 34px;
                border-radius: var(--r);
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(255,255,255,.06);
                color: rgba(255,255,255,.4);
                font-size: 13px;
                transition: all .25s;
                opacity: 1
            }

            .ft-soc a:hover {
                background: var(--v);
                color: #fff
            }

            .ft-c h4 {
                font-size: 12px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 1.5px;
                color: rgba(255,255,255,.9);
                margin-bottom: 1.2rem
            }

            .ft-c a {
                display: block;
                font-size: 13.5px;
                margin-bottom: .6rem;
                opacity: .4;
                transition: opacity .2s
            }

            .ft-c a:hover {
                opacity: .9
            }

            .ft-bot {
                max-width: 1340px;
                margin: 0 auto;
                padding-top: 1.8rem;
                border-top: 1px solid rgba(255,255,255,.06);
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                opacity: .35;
                flex-wrap: wrap;
                gap: .8rem
            }

            /* ===================== MODAL ===================== */
            .mo {
                display: none;
                position: fixed;
                inset: 0;
                z-index: 950;
                background: rgba(24,19,30,.45);
                backdrop-filter: blur(8px);
                align-items: center;
                justify-content: center
            }

            .mo.on {
                display: flex
            }

            .mb {
                background: var(--white);
                border-radius: var(--r3);
                padding: 2.5rem;
                max-width: 460px;
                width: 92%;
                box-shadow: var(--sh-xl);
                animation: fadeUp .35s var(--ease);
                position: relative
            }

            .mx {
                position: absolute;
                top: 1rem;
                right: 1.2rem;
                background: var(--bg-1);
                border: none;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                font-size: 18px;
                color: var(--muted);
                cursor: pointer;
                transition: all .2s;
                display: flex;
                align-items: center;
                justify-content: center
            }

            .mx:hover {
                background: var(--bg-3);
                color: var(--ink)
            }

            .mb h2 {
                font-family: var(--serif);
                font-size: 26px;
                font-weight: 600;
                color: var(--ink);
                margin-bottom: .3rem
            }

            .mb .ms {
                font-size: 14px;
                color: var(--muted);
                margin-bottom: 1.8rem
            }

            .mb .cfl {
                margin-bottom: 1.2rem
            }

            /* ===================== BACK TO TOP ===================== */
            .btt {
                position: fixed;
                bottom: 2rem;
                right: 2rem;
                width: 42px;
                height: 42px;
                border-radius: 50%;
                background: var(--v);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                cursor: pointer;
                box-shadow: var(--v-glow);
                transition: all .3s var(--ease);
                opacity: 0;
                transform: translateY(16px);
                z-index: 100;
                border: none
            }

            .btt.on {
                opacity: 1;
                transform: translateY(0)
            }

            .btt:hover {
                transform: translateY(-3px);
                box-shadow: var(--v-glow2)
            }

            /* ===================== RESPONSIVE ===================== */
            @media(max-width: 1024px) {
                .hero-w,.ab-g,.ct-g {
                    grid-template-columns:1fr;
                    gap: 3rem
                }

                .hero-vis {
                    order: -1
                }

                .hv-stack {
                    height: 320px
                }

                .hv-1 {
                    width: 240px;
                    height: 300px
                }

                .hv-2 {
                    width: 190px;
                    height: 230px
                }

                .hv-3 {
                    width: 180px;
                    height: 140px
                }

                .imp-g {
                    grid-template-columns: 1fr 1fr
                }

                .ng {
                    grid-template-columns: 1fr
                }

                .ng .nc:first-child {
                    grid-row: span 1
                }

                .ft-g {
                    grid-template-columns: 1fr 1fr
                }

                .tl-ln,.tl-d {
                    left: 18px
                }

                .tl-i,.tl-i:nth-child(odd) {
                    flex-direction: row;
                    text-align: left
                }

                .tl-c {
                    width: calc(100% - 52px);
                    margin-left: 44px
                }
            }

            @media(max-width: 768px) {
                .s-pad {
                    padding:56px 1.5rem
                }

                .h-w {
                    padding: 0 1.5rem
                }

                .h-nav .h-link {
                    display: none
                }

                .hbg {
                    display: flex
                }

                .hero {
                    padding: 6rem 1.5rem 3.5rem
                }

                .hv-stack {
                    height: 260px
                }

                .hv-1 {
                    width: 190px;
                    height: 240px
                }

                .hv-2 {
                    width: 150px;
                    height: 190px
                }

                .hv-3 {
                    width: 150px;
                    height: 110px
                }

                .hv-float {
                    display: none
                }

                .pg,.evg,.ts-g,.pub-g {
                    grid-template-columns: 1fr
                }

                .ab-vals,.c-row {
                    grid-template-columns: 1fr
                }

                .tm-g {
                    grid-template-columns: 1fr 1fr
                }

                .nl-f {
                    flex-direction: column
                }

                .ft-g {
                    grid-template-columns: 1fr
                }
            }

            @media(max-width: 480px) {
                .tm-g,.imp-g {
                    grid-template-columns:1fr
                }

                .imp-i::after {
                    display: none!important
                }

                .imp-i {
                    border-bottom: 1px solid rgba(255,255,255,.08)
                }

                .ft-bot {
                    flex-direction: column;
                    text-align: center
                }
            }