@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap");


/*
  FONT BUNCH ASLI (OPSIONAL)
  CSS ini langsung berjalan dengan Google Font Bowlby One sebagai alternatif
  yang mirip. Kalau kamu sudah mempunyai lisensi/file font Bunch, letakkan
  Bunch.woff2 di assets/fonts/ lalu AKTIFKAN @font-face di bawah:

  @font-face {
      font-family: "GENFES Bunch";
      src: url("../assets/fonts/Bunch.woff2") format("woff2");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
  }

  Tidak ada file font yang disertakan dalam paket ini.
*/

/* GENFES — HOME PAGE CSS */

/* ========================================
   HERO
======================================== */

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: var(--white);
}


/* ========================================
   HERO BACKGROUND
======================================== */
.hero-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}



/* ========================================
   HERO VIDEO - MOBILE RESPONSIVE
======================================== */

@media (max-width: 768px) {
    .hero-background {
        overflow: hidden;
    }

    .hero-background video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        object-position: 85% center;
    }
}


/* ========================================
   HERO OVERLAY
======================================== */

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(17, 20, 39, 0.96) 0%,
            rgba(32, 27, 72, 0.88) 38%,
            rgba(67, 48, 125, 0.68) 70%,
            rgba(92, 70, 150, 0.42) 100%);

    z-index: -2;
}




/* ========================================
   HERO CONTAINER
======================================== */

.hero-container {
    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 80px;
}




/* ========================================
   HERO CONTENT
======================================== */

.hero-content {
    width: 60%;

    max-width: 760px;

    position: relative;

    z-index: 2;
}


.hero-label {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

    color: #c4b5fd;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;
}


.hero-label span {
    width: 35px;
    height: 2px;

    background: var(--violet);
}


.hero h1 {
    font-family: "Playfair Display", serif;

    font-size: clamp(50px,
            6vw,
            88px);

    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -2px;

    margin-bottom: 30px;
}


.hero h1 strong {
    display: block;

    background:
        linear-gradient(90deg,
            #ffffff,
            #c4b5fd);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.hero-description {
    max-width: 570px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 38px;
}




/* ========================================
   HERO BUTTONS
======================================== */

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 15px;
}


.btn {
    display: inline-flex;

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

    gap: 9px;

    min-height: 52px;

    padding: 0 25px;

    border-radius: 50px;

    border: 1px solid transparent;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all var(--transition);
}


.btn-primary {
    background:
        linear-gradient(135deg,
            var(--purple),
            var(--violet));

    color: var(--white);

    box-shadow:
        0 10px 30px rgba(124, 58, 237, 0.35);
}


.btn-primary:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(124, 58, 237, 0.5);
}


.btn-primary i {
    font-size: 18px;
}


.btn-outline {
    border-color: rgba(255, 255, 255, 0.3);

    color: var(--white);

    background: rgba(255, 255, 255, 0.03);

    backdrop-filter: blur(5px);
}


.btn-outline:hover {
    background: var(--white);

    color: var(--deep-blue);

    transform: translateY(-3px);
}




/* ========================================
   HERO DECORATION
======================================== */

.hero-decoration {
    position: absolute;

    right: 0;
    top: 50%;

    width: 400px;
    height: 400px;

    pointer-events: none;

    transform: translateY(-50%);
}


.decoration-circle {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(196, 181, 253, 0.25);
}


.circle-one {
    width: 320px;
    height: 320px;

    top: 20px;
    right: 10px;
}


.circle-two {
    width: 230px;
    height: 230px;

    top: 65px;
    right: 55px;

    background:
        radial-gradient(circle,
            rgba(139, 92, 246, 0.18),
            transparent 70%);
}



/* ========================================
   HERO CARD / GENFES DECORATION
======================================== */
.hero-card {
    position: absolute;

    right: 10px;
    bottom: 60px;

    width: 520px;

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

    padding: 0;

    background: transparent;
    border: none;
    border-radius: 0;

    box-shadow: none;
}

/* Gambar Kalimat Genfes */

.hero-card img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}



/* ========================================
   PLACEHOLDER SECTION
======================================== */

.placeholder-section {
    min-height: 70vh;

    display: flex;

    align-items: center;

    padding: 100px 0;

    background: var(--white);
}


.dark-section {
    background: var(--deep-blue);

    color: var(--white);
}


.section-label {
    margin-bottom: 15px;

    color: var(--purple);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;
}


.placeholder-section h2 {
    max-width: 800px;

    font-family: "Playfair Display", serif;

    font-size: clamp(40px,
            5vw,
            70px);

    line-height: 1.1;

    margin-bottom: 20px;
}


.placeholder-section h2 span {
    color: var(--violet);
}




/* ========================================
   VIDEO MODAL
======================================== */

.video-modal {
    position: fixed;

    inset: 0;

    display: flex;

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

    padding: 30px;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity var(--transition),
        visibility var(--transition);

    z-index: 2000;
}


.video-modal.active {
    opacity: 1;

    visibility: visible;
}


.video-modal-overlay {
    position: absolute;

    inset: 0;

    background: rgba(5, 7, 20, 0.88);

    backdrop-filter: blur(10px);
}


.video-modal-content {
    position: relative;

    width: min(1000px,
            100%);

    z-index: 2;

    transform: scale(0.95);

    transition:
        transform var(--transition);
}


.video-modal.active .video-modal-content {
    transform: scale(1);
}


.video-wrapper {
    overflow: hidden;

    border-radius: 18px;

    background: #000;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5);
}


.video-wrapper video {
    width: 100%;

    max-height: 75vh;
}


.video-close {
    position: absolute;

    top: -50px;
    right: 0;

    width: 40px;
    height: 40px;

    display: flex;

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

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

    border-radius: 50%;

    background: rgba(17, 24, 39, 0.8);

    color: var(--white);

    cursor: pointer;

    transition: all var(--transition);

    z-index: 3;
}


.video-close:hover {
    background: var(--purple);

    transform: rotate(90deg);
}




/* ========================================
   ABOUT STORY - TYPEWRITER
======================================== */


/* Teks terlihat secara default */
.about-story .story-label,
.about-story h2,
.about-story p {
    opacity: 1;
}

@keyframes typingCursor {
    50% {
        opacity: 0;
    }
}

/* Menghormati pengaturan pengurangan animasi */
@media (prefers-reduced-motion: reduce) {
    .about-story .typing-active::after {
        animation: none;
    }
}



/* =========================
   ABOUT GENFES
========================== */

.about-section {
    position: relative;
    padding: 90px 0;
    background:
        radial-gradient(circle at 1px 1px, rgba(139, 92, 246, 0.12) 1px, transparent 1px),
        #11145c;

    background-size: 12px 12px;
    color: #ffffff;
}


/* Section Heading */

.section-heading {
    text-align: center;
    margin-bottom: 35px;
}

.section-heading span {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.heading-line {
    width: 35px;
    height: 2px;
    background: #8b5cf6;
    margin: 8px auto 0;
}


/* About Main */

.about-main {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    align-items: stretch;
}


/* Gallery */



/* ========================================
   ABOUT GALLERY
======================================== */

.about-gallery {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-template-rows: 325px 195px;

    gap: 20px;

    width: 100%;
}




/* =========================
   ABOUT RESPONSIVE
========================== */

@media (max-width: 900px) {

    .about-main {
        grid-template-columns: 1fr;
    }

    .about-story {
        padding: 22px;
    }

    .about-statistics {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-advantages {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .about-section {
        padding: 70px 0;
    }

    .section-heading {
        margin-bottom: 25px;
    }

    .section-heading span {
        font-size: 12px;
    }


    .about-gallery {
        grid-template-rows: 190px 110px;
        gap: 8px;
    }


    .about-story {
        padding: 18px;
    }

    .about-story h2 {
        font-size: 20px;
    }

    .about-story p {
        font-size: 11px;
    }


    .about-statistics {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stat-card {
        padding: 15px 8px;
    }

    .stat-card strong {
        font-size: 17px;
    }


    .about-advantages {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .advantage-card {
        padding: 17px;
    }

}




/* ========================================
   SERVICES - LEFT TO RIGHT ANIMATION
======================================== */

.services-section .service-card {
    opacity: 0;
    transform: translateX(-40px);

    transition:
        opacity 2s ease,
        transform 2s cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: var(--service-delay, 0ms);
}

.services-section .service-card.service-card-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Pertahankan efek hover setelah kartu masuk */
.services-section .service-card.service-card-visible:hover {
    transform: translateY(-6px);
}





/* =========================
   OUR SERVICES
========================== */

.services-section {
    position: relative;
    padding: 90px 0;

    background:
        radial-gradient(circle at 1px 1px,
            rgba(167, 139, 250, 0.12) 1px,
            transparent 1px),
        linear-gradient(135deg,
            #17165c,
            #24166f,
            #312e81);

    background-size: 12px 12px, 100% 100%;

    color: #ffffff;
}




/* =========================
   HEADING
========================== */

.services-heading {
    text-align: center;
    margin-bottom: 38px;
}

.services-heading h2 {
    margin: 0 0 8px;

    font-size: 28px;
    font-weight: 700;

    color: #ffffff;
}

.services-heading h2 span {
    color: #a78bfa;
}

.services-heading p {
    margin: 0;

    color: #cbd5ff;

    font-size: 12px;
}




/* =========================
   SERVICES GRID
========================== */

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}




/* =========================
   RESPONSIVE
========================== */

@media (max-width: 900px) {

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .services-section {
        padding: 70px 0;
    }

    .services-heading h2 {
        font-size: 24px;
    }

    .services-heading p {
        font-size: 11px;
        line-height: 1.6;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .service-card {
        min-height: auto;
        padding: 25px 20px;
    }

}



/* =========================
   CONTACT CTA
========================== */

.contact-cta {
    padding: 90px 0;

    background:
        radial-gradient(circle at 1px 1px,
            rgba(167, 139, 250, 0.10) 1px,
            transparent 1px),
        linear-gradient(135deg,
            #18194f 0%,
            #211b5d 45%,
            #29216d 75%,
            #312e81 100%);

    background-size: 12px 12px, 100% 100%;

    color: #ffffff;
}


.contact-cta-content {
    max-width: 700px;

    margin: auto;

    text-align: center;
}


.contact-cta-content .section-label {
    display: block;

    margin-bottom: 12px;

    color: #a78bfa;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.contact-cta-content h2 {
    margin: 0 0 15px;

    font-size: 38px;
    line-height: 1.2;
}


.contact-cta-content h2 span {
    color: #a78bfa;
}


.contact-cta-content p {
    max-width: 550px;

    margin: 0 auto 25px;

    color: #cbd5ff;

    font-size: 12px;
    line-height: 1.7;
}


.contact-cta-button {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 12px 20px;

    border-radius: 6px;

    background: #ffffff;

    color: #312e81;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.contact-cta-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.2);
}


@media (max-width: 600px) {

    .contact-cta {
        padding: 70px 0;
    }

    .contact-cta-content h2 {
        font-size: 28px;
    }

    .contact-cta-content p {
        font-size: 11px;
    }

}




/* ========================================
   GENFES ANIMATION
======================================== */

/* ----------------------------------------
   SCROLL REVEAL
---------------------------------------- */

.reveal-element {
    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: var(--animation-delay, 0s);
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}




/* ========================================
   ABOUT ANIMATION
======================================== */

.about-gallery.reveal-element {
    opacity: 0;
    transform: translateX(-50px);
}

.about-gallery.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}

.about-story.reveal-element {
    opacity: 0;
    transform: translateX(50px);
}

.about-story.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}

.about-gallery,
.about-story {
    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Statistics */


/* Statistics - bergerak dari kiri ke kanan */
.stat-card.reveal-element {
    opacity: 0;
    transform: translateX(-50px);
}

.stat-card.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}

.stat-card {
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
    transition-delay: var(--animation-delay, 0s);
}

/* Advantages */

.advantage-card.reveal-element {
    opacity: 0;
    transform: translateY(25px);
}

.advantage-card.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

.advantage-card {
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
}

/* Image hover */

.about-image img {
    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-image:hover img {
    transform: scale(1.035);
}


/* ----------------------------------------
   STATISTICS
---------------------------------------- */

.stat-card.reveal-element {
    transform: translateY(25px) scale(0.97);
}

.stat-card.reveal-visible {
    transform: translateY(0) scale(1);
}


/* ----------------------------------------
   ADVANTAGES
---------------------------------------- */

.advantage-card.reveal-element {
    transform: translateY(25px);
}

.advantage-card.reveal-visible {
    transform: translateY(0);
}




/* ========================================
   SERVICES ANIMATION
======================================== */

.service-card.reveal-element {
    opacity: 0;
    transform: translateY(30px);
}

.service-card.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

.service-card {
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;
}

.service-card:hover {
    transform: translateY(-7px);
}


/* ----------------------------------------
   ADVANTAGE HOVER
---------------------------------------- */

.advantage-card {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.advantage-card:hover {
    transform: translateY(-5px);
}


/* ----------------------------------------
   STAT HOVER
---------------------------------------- */

.stat-card {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}


/* ----------------------------------------
   ABOUT IMAGE
---------------------------------------- */

.about-image {
    overflow: hidden;
}

.about-image img {
    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-image:hover img {
    transform: scale(1.035);
}


/* ----------------------------------------
   HERO CONTENT
---------------------------------------- */

.hero-content {
    animation:
        heroContentIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes heroContentIn {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

}


/* ----------------------------------------
   HERO DECORATION
---------------------------------------- */

.circle-one {
    animation:
        softFloatOne 6s ease-in-out infinite;
}

.circle-two {
    animation:
        softFloatTwo 8s ease-in-out infinite;
}

.hero-card {
    animation:
        softFloatCard 5s ease-in-out infinite;
}


/* ----------------------------------------
   CIRCLE ONE
---------------------------------------- */

@keyframes softFloatOne {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}


/* ----------------------------------------
   CIRCLE TWO
---------------------------------------- */

@keyframes softFloatTwo {

    0%,
    100% {
        transform: translateY(0);
    }

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

}


/* ----------------------------------------
   GENFES LOGO
---------------------------------------- */

@keyframes softFloatCard {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

}


/* ----------------------------------------
   BUTTON
---------------------------------------- */

.btn,
.contact-cta-button,
.event-read-more {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.btn:hover,
.contact-cta-button:hover,
.event-read-more:hover {
    transform: translateY(-2px);
}


/* ----------------------------------------
   SCROLL INDICATOR
---------------------------------------- */

.scroll-indicator i {
    animation:
        scrollArrow 2s ease-in-out infinite;
}

@keyframes scrollArrow {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.7;
    }

    50% {
        transform: translateY(6px);
        opacity: 1;
    }

}


/* ----------------------------------------
   NAVBAR
---------------------------------------- */

.navbar {
    transition:
        background 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease;
}

.navbar.scrolled {
    backdrop-filter: blur(12px);

    box-shadow:
        0 8px 25px rgba(17, 24, 39, 0.12);
}


/* ----------------------------------------
   VIDEO MODAL
---------------------------------------- */

.video-modal {
    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.video-modal.active {
    opacity: 1;
    visibility: visible;
}

.video-modal-content {
    transform:
        scale(0.96) translateY(15px);

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-modal.active .video-modal-content {
    transform:
        scale(1) translateY(0);
}


/* ----------------------------------------
   BODY MODAL
---------------------------------------- */

body.modal-open {
    overflow: hidden;
}




/* =========================
   HERO BACKGROUND VIDEO
========================= */

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Lapisan gelap agar teks tetap terbaca */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.48);
}

/* Pastikan konten tetap di atas background */
.hero-container {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .article-detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .article-body {
        display: block;
        width: 100%;
        min-width: 0;
        height: auto;
        overflow: visible;
        visibility: visible;
    }

    .article-body h1,
    .article-body .article-meta,
    .article-body p {
        display: block;
        visibility: visible;
        color: #333;
    }
}

/* FIX FINAL: ARTIKEL HARUS SELALU TERLIHAT */

.article-detail:not([hidden]) .article-body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.article-detail:not([hidden]) .article-body h1,
.article-detail:not([hidden]) .article-body .article-meta,
.article-detail:not([hidden]) .article-body p {
    display: revert !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    color: #333;
}

/* Posisi foto kiri dan artikel kanan */
.article-detail:not([hidden]) .article-detail-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 40px;
}

/* Tampilan HP */
@media (max-width: 768px) {
    .article-detail:not([hidden]) .article-detail-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}


/* STATISTICS: kartu masuk dari kiri */
.stat-card.reveal-element {
    opacity: 0;
    transform: translateX(-50px);
}

.stat-card.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ADVANTAGES: kartu masuk dari kiri */
.advantage-card.reveal-element {
    opacity: 0;
    transform: translateX(-50px);
}

.advantage-card.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Transisi dan urutan animasi */
.stat-card,
.advantage-card {
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
    transition-delay: var(--animation-delay, 0s);
}


/* Statistics - One Way Slide to the Left */

.stat-card.reveal-element {
    opacity: 0;
    transform: translateX(50px);
}

.stat-card.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}

.stat-card {
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--animation-delay, 0s);
}




/* ========================================
   STATISTICS - INFINITE LEFT MARQUEE
======================================== */

.about-statistics {
    width: 100%;
    overflow: hidden;
}

.about-statistics .stats-track {
    display: flex;
    width: max-content;
    gap: 24px;
    animation: statisticsMarquee 20s linear infinite;
    will-change: transform;
}

.about-statistics .stat-card {
    flex: 0 0 220px;
}

/* Gerakan berulang ke kiri */
@keyframes statisticsMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Berhenti sementara saat diarahkan mouse */
.about-statistics:hover .stats-track {
    animation-play-state: paused;
}

/* =====================================================
   HOME — SEAMLESS SECTION BACKGROUNDS
   Hanya background: tidak mengubah layout / animasi / konten.
   Transisi warna: Hero -> About -> Services -> Contact -> Footer
   ===================================================== */

/* Hero: video tetap terlihat, bagian bawah menyatu ke About. */
.hero {
    background: #11145c;
}

.hero-overlay {
    background: linear-gradient(180deg,
            rgba(17, 20, 92, 0.35) 0%,
            rgba(17, 20, 92, 0.50) 40%,
            rgba(17, 20, 92, 0.78) 77%,
            #11145c 100%);
}

/* About: mulai dari warna akhir Hero, mengalir ke Services. */
.about-section {
    background-color: #11145c;
    background-image:
        linear-gradient(rgba(115, 225, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(115, 225, 255, 0.045) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 40%, rgba(112, 90, 205, 0.13), transparent 70%),
        linear-gradient(180deg, #11145c 0%, #131652 65%, #141650 100%);
    background-size: 110px 110px, 110px 110px, auto, auto;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
}

/* Services: grid dan palet disamakan, warna atas sama dengan About. */
.services-section {
    background-color: #141650;
    background-image:
        linear-gradient(rgba(115, 225, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(115, 225, 255, 0.045) 1px, transparent 1px),
        radial-gradient(ellipse at 85% 35%, rgba(118, 86, 214, 0.16), transparent 65%),
        linear-gradient(180deg, #141650 0%, #151650 65%, #17164f 100%);
    background-size: 110px 110px, 110px 110px, auto, auto;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
}

/* Contact: menyambung dari Services hingga warna awal footer global. */
.contact-cta {
    background-color: #17164f;
    background-image:
        linear-gradient(rgba(115, 225, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(115, 225, 255, 0.045) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 15%, rgba(118, 86, 214, 0.17), transparent 68%),
        linear-gradient(180deg, #17164f 0%, #171845 55%, #111827 100%);
    background-size: 110px 110px, 110px 110px, auto, auto;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
}


/* =========================================================
   GENFES — GLASSMORPHISM / SOFT GLOW DESIGN SYSTEM
   Layer tambahan: CSS asli, konten, dan interaksi dipertahankan.
   Efek disesuaikan untuk mouse, layar sentuh, dan reduced motion.
========================================================= */

/* Home: memoles kartu tanpa mengganti gradasi antarseksi dan animasi reveal. */
.about-story,
.about-statistics .stat-card,
.about-advantages .advantage-card,
.services-section .service-card {
    border: 1px solid rgba(197, 207, 255, .25);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(104, 119, 207, .18), rgba(42, 42, 117, .31) 58%, rgba(26, 35, 91, .28));
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13),
        0 17px 42px rgba(1, 6, 36, .21), 0 0 24px rgba(102, 127, 255, .045);
}

.about-gallery .about-image,
.about-image-main,
.about-image-small {
    border-radius: 18px;
    border: 1px solid rgba(194, 207, 255, .18);
    box-shadow: 0 14px 38px rgba(3, 8, 43, .22), 0 0 20px rgba(94, 128, 244, .075);
}

.about-highlight {
    background: rgba(90, 111, 214, .14);
    border: 1px solid rgba(193, 208, 255, .17);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 13px;
}

.services-section .service-icon {
    background: linear-gradient(135deg, rgba(114, 139, 255, .88), rgba(113, 75, 222, .85));
    box-shadow: 0 10px 24px rgba(106, 124, 250, .23), inset 0 1px 0 rgba(255, 255, 255, .20);
}

.contact-cta-content {
    border: 1px solid rgba(193, 207, 255, .23);
    border-radius: 24px;
    padding: clamp(25px, 4vw, 46px);
    background: linear-gradient(130deg, rgba(105, 122, 220, .17), rgba(37, 45, 117, .26));
    -webkit-backdrop-filter: blur(15px) saturate(140%);
    backdrop-filter: blur(15px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13),
        0 18px 50px rgba(0, 5, 30, .22), 0 0 44px rgba(89, 128, 255, .10);
}

@media (hover: hover) and (pointer: fine) {

    /* Hover ditambahkan ke state visible agar tidak mengganggu animasi masuk. */
    .about-story:hover,
    .about-statistics .stat-card:hover,
    .about-advantages .advantage-card:hover,
    .services-section .service-card.service-card-visible:hover {
        border-color: rgba(192, 210, 255, .55);
        background: linear-gradient(145deg, rgba(109, 135, 235, .29), rgba(48, 53, 134, .36));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
            0 24px 53px rgba(2, 7, 38, .30),
            0 0 34px rgba(76, 151, 255, .15), 0 0 48px rgba(146, 97, 250, .09);
    }
}

@media (max-width: 600px) {
    .contact-cta-content {
        padding: 25px 19px;
        border-radius: 19px;
    }

    .about-story,
    .about-statistics .stat-card,
    .about-advantages .advantage-card,
    .services-section .service-card {
        border-radius: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .about-story,
    .about-statistics .stat-card,
    .about-advantages .advantage-card,
    .services-section .service-card {
        transition: none !important;
    }
}


/* ============================================================
   GENFES — BUNCH-STYLE DISPLAY TYPOGRAPHY + GRADIENT TITLES
   Layer ini HANYA menyentuh typography, warna judul dan
   efek glow judul. Desain glass, video, kartu & JS dipertahankan.
   ============================================================ */
:root {
    --genfes-display-font: "GENFES Bunch", "Bowlby One", sans-serif;
    --genfes-ui-font: "Montserrat", "Inter", sans-serif;
    --genfes-title-gradient: linear-gradient(110deg,
            #ffffff 0%, #ece7ff 22%, #c3a8ff 48%,
            #9182ff 72%, #77c7ff 100%);
    --genfes-title-accent: linear-gradient(105deg,
            #ded5ff 0%, #a889ff 43%, #72caff 100%);
}

@keyframes genfesTitleShimmer {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {

    /* Menonaktifkan animasi teks bila pengguna mengurangi gerakan. */
    .genfes-title-motion-safe {
        animation: none !important;
    }
}

/* Judul besar, font display bold, dan gradasi putih–ungu–biru. */
.hero h1,
.about-story h2,
.services-heading h2,
.contact-cta-content h2,
.placeholder-section h2 {
    font-family: var(--genfes-display-font);
    font-weight: 400;
    /* Font display umumnya sudah ekstra tebal. */
    letter-spacing: -0.025em;
    line-height: 1.18;
    background-image: var(--genfes-title-gradient);
    background-size: 185% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 4px 17px rgba(120, 109, 251, .14));
    animation: genfesTitleShimmer 12s ease-in-out infinite;
}

/* Kata aksen punya gradient ungu–cyan agar terasa seperti neon glow. */
.hero h1 strong,
.services-heading h2 span,
.contact-cta-content h2 span,
.placeholder-section h2 span {
    background-image: var(--genfes-title-accent);
    background-size: 150% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Judul kartu sengaja menggunakan Montserrat: lebih mudah dibaca. */
.about-advantages .advantage-card h3,
.services-section .service-card h3 {
    font-family: var(--genfes-ui-font);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

/* Font display lebar, jadi ukuran judul di HP dikendalikan. */
.hero h1 {
    font-size: clamp(38px, 5.25vw, 75px);
    overflow-wrap: break-word;
}

.about-story h2 {
    font-size: clamp(22px, 2.4vw, 29px);
}

.services-heading h2 {
    font-size: clamp(25px, 3vw, 36px);
}

.contact-cta-content h2 {
    font-size: clamp(29px, 3.5vw, 42px);
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: clamp(33px, 8.6vw, 49px);
        letter-spacing: -.03em;
    }

    .about-story h2 {
        font-size: clamp(21px, 6vw, 26px);
    }

    .services-heading h2 {
        font-size: clamp(25px, 7vw, 30px);
    }

    .contact-cta-content h2 {
        font-size: clamp(27px, 7.4vw, 33px);
    }
}

@media (max-width: 380px) {
    .hero h1 {
        font-size: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero h1,
    .about-story h2,
    .services-heading h2,
    .contact-cta-content h2,
    .placeholder-section h2 {
        animation: none;
        background-position: 50% 50%;
    }
}

/* ===============================================================
   GENFES — HERO TYPOGRAPHY REFINEMENT (SCREENSHOT FEEDBACK)
   Hanya Hero Home dan navbar pada halaman Home.
   Heading: rounded/bubble + efek timbul + jarak dua baris.
   Navbar & deskripsi: Montserrat regular, ukuran normal.
   Tidak mengubah video, glass cards, warna section, animasi lain.
   =============================================================== */

/* Rounded, soft and dimensional instead of compressed display text. */
.hero h1 {
    font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif;
    font-weight: 700;
    font-size: clamp(39px, 5vw, 73px);
    line-height: 1.22;
    letter-spacing: -0.035em;
    margin-bottom: 32px;
    background-image: linear-gradient(165deg,
            #fff 0%, #f4eaff 20%, #dec8ff 43%,
            #b7a0ff 73%, #94bbff 100%);
    background-size: 165% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke: .35px rgba(248, 241, 255, .2);
    filter:
        drop-shadow(0 2px 0 rgba(247, 224, 255, .27)) drop-shadow(0 5px 0 rgba(79, 50, 153, .48)) drop-shadow(0 11px 20px rgba(25, 19, 94, .35));
}

/* Baris kedua diberi jarak nyata, bukan cuma line-height. */
.hero h1 strong {
    display: block;
    margin-top: clamp(12px, 1.15vw, 20px);
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.2;
    background-image: linear-gradient(145deg,
            #f2e8ff 0%, #d6c0ff 32%,
            #ad91fb 70%, #81c5ff 100%);
    background-size: 150% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Orange annotations: navbar normal weight & consistent sizing. */
.navbar .nav-link,
.navbar .nav-login {
    font-family: "Montserrat", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
}

/* Orange annotation: body copy, no bold / enlarged text. */
.hero-description {
    font-family: "Montserrat", "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0;
}

/* Keep heading comfortably separated and readable on mobile. */
@media (max-width: 768px) {
    .hero h1 {
        font-size: clamp(32px, 8.2vw, 48px);
        line-height: 1.2;
        letter-spacing: -0.03em;
        margin-bottom: 26px;
    }

    .hero h1 strong {
        margin-top: 12px;
    }

    .hero-description {
        font-size: 14px;
        line-height: 1.8;
    }

    .navbar .nav-link {
        font-size: 15px;
    }

    .navbar .nav-login {
        font-size: 14px;
    }
}

@media (max-width: 380px) {
    .hero h1 {
        font-size: 31px;
    }

    .hero h1 strong {
        margin-top: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero h1 {
        animation: none;
        background-position: 50% 50%;
    }
}


/* =====================================================================
   GENFES — FINAL CONSISTENT TYPOGRAPHY (HOME / NEWS / EVENT / CONTACT)
   Visual: rounded 'bubble' display headings (Fredoka), soft raised
   lavender gradient, and regular Montserrat interface text.
   Style only: preserved HTML, JavaScript, video, glassmorphism,
   scroll animations, footer structure, and mobile card/carousel layout.
   ===================================================================== */
:root {
    --genfes-display-font: "Fredoka", "Arial Rounded MT Bold", sans-serif;
    --genfes-ui-font: "Montserrat", "Inter", sans-serif;
    --genfes-title-gradient: linear-gradient(160deg,
            #ffffff 0%, #f2e9ff 22%, #d9c4ff 44%,
            #b299ff 73%, #8fc5ff 100%);
    --genfes-title-accent: linear-gradient(145deg,
            #f2eaff 0%, #d8c0ff 35%, #ad93ff 72%, #86c7ff 100%);
}

/* Navbar, body, footer and button copy: Montserrat, at their existing sizes. */
body,
button,
input,
textarea,
select,
.navbar,
.footer {
    font-family: var(--genfes-ui-font);
}

body {
    font-weight: 400;
}

.navbar .nav-link,
.navbar .nav-login {
    font-family: var(--genfes-ui-font);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
}

/* Consistent heading material (rounded, gradient, subtle 3D relief). */
.hero h1,
.about-story h2,
.services-heading h2,
.contact-cta-content h2,
.placeholder-section h2 {
    font-family: var(--genfes-display-font);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.22;
    background-image: var(--genfes-title-gradient);
    background-size: 165% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke: 0.3px rgba(255, 248, 255, .16);
    filter: drop-shadow(0 2px 0 rgba(238, 217, 255, .18)) drop-shadow(0 4px 0 rgba(64, 41, 139, .30)) drop-shadow(0 9px 17px rgba(18, 20, 82, .22));
    overflow-wrap: break-word;
}

/* Individual accent words keep the same family, with a soft blue-violet gradient. */
.hero h1 strong,
.services-heading h2 span,
.contact-cta-content h2 span,
.placeholder-section h2 span {
    font-family: inherit;
    background-image: var(--genfes-title-accent);
    background-size: 150% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Article, card, and contact panel headings remain a readable UI font. */
.about-advantages .advantage-card h3,
.services-section .service-card h3 {
    font-family: var(--genfes-ui-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
}

/* Body copy is regular: no surprise bolding or larger sizes. */
.hero-description,
.about-story p,
.services-heading p,
.contact-cta-content p {
    font-family: var(--genfes-ui-font);
    font-weight: 400;
    letter-spacing: 0;
}

@media (max-width: 768px) {
    .navbar .nav-link {
        font-size: 15px;
        font-weight: 400;
    }

    .navbar .nav-login {
        font-size: 14px;
        font-weight: 400;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero h1,
    .about-story h2,
    .services-heading h2,
    .contact-cta-content h2,
    .placeholder-section h2 {
        animation: none;
        background-position: 50% 50%;
    }
}

/* HOME: keep the approved bubble spacing between both hero lines. */
.hero h1 {
    font-size: clamp(39px, 5vw, 73px);
    line-height: 1.23;
    margin-bottom: 32px;
}

.hero h1 strong {
    display: block;
    margin-top: clamp(12px, 1.15vw, 20px);
    line-height: 1.2;
    font-weight: 700;
}

.hero-description {
    font-size: 16px;
    line-height: 1.85;
}

.about-story h2 {
    font-size: clamp(22px, 2.4vw, 29px);
}

.services-heading h2 {
    font-size: clamp(25px, 3vw, 36px);
}

.contact-cta-content h2 {
    font-size: clamp(29px, 3.5vw, 42px);
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: clamp(32px, 8.2vw, 48px);
        line-height: 1.24;
        margin-bottom: 26px;
    }

    .hero h1 strong {
        margin-top: 12px;
    }

    .hero-description {
        font-size: 14px;
        line-height: 1.8;
    }

    .about-story h2 {
        font-size: clamp(21px, 6vw, 26px);
    }

    .services-heading h2 {
        font-size: clamp(25px, 7vw, 30px);
    }

    .contact-cta-content h2 {
        font-size: clamp(27px, 7.4vw, 33px);
    }
}

@media (max-width: 380px) {
    .hero h1 {
        font-size: 31px;
    }
}

/* ======================================================
   OUR SERVICES: HORIZONTAL SWIPE KHUSUS HP
   Desktop dan tablet tetap menggunakan grid aslinya.
   ====================================================== */
.services-swipe-hint {
    display: none;
}

@media (max-width: 600px) {
    .services-section .services-heading {
        margin-bottom: 16px;
    }

    .services-swipe-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0 0 16px;
        font-size: 11px;
        line-height: 1.5;
        color: #cbd5ff;
        text-align: center;
    }

    .services-swipe-hint i {
        color: #c4b5fd;
        font-size: 15px;
    }

    .services-section .services-grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(167, 139, 250, .75) rgba(255, 255, 255, .06);
        padding: 5px 0 18px;
    }

    .services-section .services-grid::-webkit-scrollbar {
        height: 5px;
    }

    .services-section .services-grid::-webkit-scrollbar-thumb {
        background: rgba(167, 139, 250, .75);
        border-radius: 10px;
    }

    .services-section .services-grid::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, .06);
        border-radius: 10px;
    }

    .services-section .services-grid>.service-card {
        flex: 0 0 86%;
        width: 86%;
        min-width: 0;
        min-height: 225px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        padding: 26px 20px;
    }

    .services-section .services-grid:focus-visible {
        outline: 2px solid #c4b5fd;
        outline-offset: 4px;
        border-radius: 8px;
    }
}


/* ======================================================
   ABOUT / ADVANTAGES: 3 KOLOM RAPI PADA LAYAR HP
   Ketiga kartu langsung terlihat tanpa swipe / scroll horizontal.
   Desktop tetap mengikuti pengaturan grid awal.
   ====================================================== */
@media (max-width: 600px) {
    .about-section .about-advantages {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: clamp(6px, 2vw, 10px);
        width: 100%;
        margin-top: 24px;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    .about-section .about-advantages>.advantage-card {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: initial;
        min-width: 0;
        min-height: 0;
        width: auto;
        padding: clamp(9px, 2.5vw, 13px) clamp(7px, 2.1vw, 12px);
        border-radius: 14px;
        text-align: center;
        overflow-wrap: break-word;
    }

    .about-section .about-advantages .advantage-icon {
        flex-shrink: 0;
        margin-bottom: 9px;
        font-size: clamp(19px, 5vw, 23px);
        line-height: 1.2;
    }

    .about-section .about-advantages .advantage-card h3 {
        min-height: 2.7em;
        margin-bottom: 8px;
        font-size: clamp(9.5px, 2.8vw, 11px);
        font-weight: 700;
        line-height: 1.35;
        overflow-wrap: break-word;
    }

    .about-section .about-advantages .advantage-card p {
        margin: 0;
        font-size: clamp(9px, 2.45vw, 10px);
        line-height: 1.5;
        overflow-wrap: break-word;
    }
}


/* GENFES - ABOUT ICONS */

.stat-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    color: #c4b5fd;
}

.advantage-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    color: #c4b5fd;
}

/* Responsive Mobile */
@media (max-width: 600px) {
    .stat-icon i {
        font-size: 20px;
    }

    .advantage-icon i {
        font-size: 20px;
    }
}

/* ============================================================
   HOME / OUR SERVICES — SELARAS DENGAN EVENT / OUR PROGRAMS
   Khusus .services-section. Tidak mengubah warna tema, konten,
   navbar, halaman Events, ataupun animasi hamburger.
   ============================================================ */

/* Heading meniru ritme Program yang Berdampak di Events. */
.services-section .services-heading {
    max-width: 730px;
    margin: 0 0 35px;
    text-align: left;
}

.services-section .services-heading .services-label {
    display: block;
    margin: 0 0 10px;
    color: #a78bfa;
    font-family: var(--genfes-ui-font, "Montserrat", "Inter", sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.services-section .services-heading h2 {
    margin: 0 0 10px;
    font-size: clamp(28px, 3.1vw, 39px);
    line-height: 1.3;
}

.services-section .services-heading p {
    max-width: 600px;
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5f5;
}

/* Empat layanan: dua pasang kartu dengan proporsi yang seimbang. */
.services-section .services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

/* Bentuk kartu glass, sama dengan program cards pada halaman Events. */
.services-section .services-grid>.service-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 250px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(195, 208, 255, .24);
    border-radius: 18px;
    background: linear-gradient(145deg,
            rgba(105, 112, 205, .20),
            rgba(34, 43, 113, .34) 56%,
            rgba(34, 39, 96, .28));
    -webkit-backdrop-filter: blur(15px) saturate(145%);
    backdrop-filter: blur(15px) saturate(145%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 18px 44px rgba(3, 8, 39, .24),
        0 0 35px rgba(72, 119, 255, .055);
    text-align: center;
    transition:
        opacity .6s ease,
        transform .7s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease,
        box-shadow .45s ease,
        background .4s ease;
}

.services-section .services-grid>.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 5%, rgba(167, 139, 250, .16), transparent 65%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
}

/* Ikon ditempatkan di tengah bagian atas, seperti Program cards. */
.services-section .service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    margin: 0 auto 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(126, 139, 255, .8), rgba(91, 71, 204, .85));
    box-shadow:
        0 10px 26px rgba(75, 96, 245, .24),
        inset 0 1px 0 rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 21px;
    transform: translateY(0) rotate(0);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s ease, background .45s ease;
}

.services-section .service-icon i {
    display: inline-block;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.services-section .service-card h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-family: var(--genfes-ui-font, "Montserrat", "Inter", sans-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.35;
    text-align: center;
    width: 100%;
}

.services-section .service-card p {
    margin: 0;
    color: #cbd5f5;
    font-family: var(--genfes-ui-font, "Montserrat", "Inter", sans-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
    text-align: center;
    width: 100%;
}

@media (hover: hover) and (pointer: fine) {
    .services-section .services-grid>.service-card.service-card-visible:hover {
        transform: translateY(-7px);
        border-color: rgba(186, 210, 255, .54);
        background: linear-gradient(145deg,
                rgba(108, 124, 230, .30),
                rgba(48, 57, 137, .43) 55%,
                rgba(32, 42, 105, .36));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .21),
            0 25px 54px rgba(3, 8, 40, .37),
            0 0 35px rgba(82, 146, 255, .18),
            0 0 60px rgba(151, 95, 255, .13);
    }

    .services-section .services-grid>.service-card:hover::before {
        opacity: 1;
    }

    .services-section .services-grid>.service-card:hover .service-icon {
        transform: translateY(-5px) rotate(-4deg);
        box-shadow: 0 14px 28px rgba(118, 86, 214, .42),
            0 0 20px rgba(167, 139, 250, .20);
    }

    .services-section .services-grid>.service-card:hover .service-icon i {
        transform: scale(1.12) rotate(4deg);
    }
}

/* Tablet tetap dua kolom, dengan kartu yang proporsional. */
@media (min-width: 601px) and (max-width: 900px) {
    .services-section .services-grid {
        gap: 18px;
    }

    .services-section .services-grid>.service-card {
        padding: 25px 22px;
    }
}

/* HP mengikuti Program yang Berdampak: scroll-snap horizontal. */
@media (max-width: 600px) {
    .services-section {
        padding: 68px 0 76px;
    }

    .services-section .services-heading {
        max-width: none;
        margin: 0 0 30px;
        text-align: center;
    }

    .services-section .services-heading h2 {
        margin-bottom: 12px;
        font-size: clamp(25px, 7vw, 32px);
        line-height: 1.25;
    }

    .services-section .services-heading p {
        max-width: 340px;
        margin-inline: auto;
        font-size: 13px;
        line-height: 1.8;
    }

    .services-section .services-grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 4px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding: 6px 4px 20px;
        scrollbar-width: thin;
        scrollbar-color: rgba(167, 139, 250, .5) transparent;
    }

    .services-section .services-grid>.service-card {
        flex: 0 0 min(78vw, 300px);
        width: min(78vw, 300px);
        min-width: 0;
        min-height: 0;
        padding: 27px 20px 25px;
        border-radius: 20px;
        text-align: center;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .services-section .service-icon {
        width: 58px;
        height: 58px;
        margin: 0 auto 18px;
        border-radius: 17px;
        font-size: 25px;
    }

    .services-section .service-card h3 {
        margin-bottom: 11px;
        font-size: 19px;
        line-height: 1.35;
        text-align: center;
    }

    .services-section .service-card p {
        margin: 0 auto;
        font-size: 12px;
        line-height: 1.8;
        text-align: center;
    }
}

@media (max-width: 380px) {
    .services-section .services-grid>.service-card {
        padding: 25px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .services-section .services-grid>.service-card,
    .services-section .services-grid>.service-card::before,
    .services-section .service-icon,
    .services-section .service-icon i {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   GENFES — ABOUT OUR COMPANY: 3D ICONS (REFERENSI)
   Hanya mengganti gambar/icon. Kartu, teks, layout,
   HTML, JS, navbar, hero, dan warna website tetap.
   Ikon SVG sudah ditanam di CSS: tidak perlu folder aset baru.
   ============================================================ */

/* Hilangkan pelat/kotak ikon dari versi sebelumnya. */
.about-statistics .stat-icon,
.about-advantages .advantage-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    margin-bottom: 14px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    filter: none;
    isolation: auto;
    overflow: visible;
    transform: none;
}

.about-statistics .stat-icon::before,
.about-advantages .advantage-icon::before {
    content: none;
}

/* Sembunyikan ikon Bootstrap DATAR, ganti dengan SVG berlapis 3D. */
.about-statistics .stat-icon i,
.about-advantages .advantage-icon i {
    display: none;
}

.about-statistics .stat-icon::after,
.about-advantages .advantage-icon::after {
    content: "";
    display: block;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 3px 6px rgba(18, 13, 95, .25));
    transition: transform .3s ease, filter .3s ease;
    pointer-events: none;
}

/* Empat statistik, berlaku pula pada empat kartu duplikat marquee. */
/* Members */
.about-statistics .stat-card:nth-child(4n + 1) .stat-icon::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id%3D%22purple%22%20x1%3D%220.15%22%20y1%3D%220.05%22%20x2%3D%220.87%22%20y2%3D%220.95%22%3E%3Cstop%20stop-color%3D%22%23D9C0FF%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%239B83FF%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22%236C4CEC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234532B8%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22purple2%22%20x1%3D%220.15%22%20y1%3D%220%22%20x2%3D%22.8%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23BD9EFF%22%2F%3E%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%23724CE8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23362A9E%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22blue%22%20x1%3D%220.05%22%20y1%3D%220%22%20x2%3D%22.95%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FAFDFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23C5E1FF%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%238CA9FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235965D9%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22calendar%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23C3AAFF%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%238065F2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235541D2%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22gold%22%20x1%3D%22.15%22%20y1%3D%22.05%22%20x2%3D%22.88%22%20y2%3D%22.95%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23FFF6E8%22%2F%3E%3Cstop%20offset%3D%22.67%22%20stop-color%3D%22%23FFDBAB%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ECAA81%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22rocket%22%20x1%3D%22.08%22%20y1%3D%22.08%22%20x2%3D%22.9%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23E6EAFF%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23AAACFF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23656AD6%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3CradialGradient%20id%3D%22glow%22%3E%3Cstop%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%22.30%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%0A%20%20%3Cfilter%20id%3D%22shadow%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22230%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%223.0%22%20stdDeviation%3D%222%22%20flood-color%3D%22%231F1985%22%20flood-opacity%3D%22.55%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23glow%29%22%20%2F%3E%0A%3Cg%20filter%3D%22url%28%23shadow%29%22%3E%3Cg%20opacity%3D%22.88%22%20fill%3D%22url%28%23purple2%29%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2224%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%2249%22%20cy%3D%2224%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M5%2044c0-6%204-10%2010-10s10%204%2010%2010v6H5z%22%2F%3E%3Cpath%20d%3D%22M39%2044c0-6%204-10%2010-10s10%204%2010%2010v6H39z%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2219%22%20r%3D%2210%22%20fill%3D%22url%28%23purple%29%22%20stroke%3D%22%23DAC4FF%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M17%2043c0-9%206-15%2015-15s15%206%2015%2015v9H17z%22%20fill%3D%22url%28%23purple%29%22%20stroke%3D%22%23B69FFF%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2215%22%20rx%3D%224.5%22%20ry%3D%222%22%20transform%3D%22rotate%28-20%2028%2015%29%22%20fill%3D%22%23fff%22%20opacity%3D%22.42%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Events */
.about-statistics .stat-card:nth-child(4n + 2) .stat-icon::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id%3D%22purple%22%20x1%3D%220.15%22%20y1%3D%220.05%22%20x2%3D%220.87%22%20y2%3D%220.95%22%3E%3Cstop%20stop-color%3D%22%23D9C0FF%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%239B83FF%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22%236C4CEC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234532B8%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22purple2%22%20x1%3D%220.15%22%20y1%3D%220%22%20x2%3D%22.8%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23BD9EFF%22%2F%3E%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%23724CE8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23362A9E%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22blue%22%20x1%3D%220.05%22%20y1%3D%220%22%20x2%3D%22.95%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FAFDFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23C5E1FF%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%238CA9FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235965D9%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22calendar%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23C3AAFF%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%238065F2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235541D2%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22gold%22%20x1%3D%22.15%22%20y1%3D%22.05%22%20x2%3D%22.88%22%20y2%3D%22.95%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23FFF6E8%22%2F%3E%3Cstop%20offset%3D%22.67%22%20stop-color%3D%22%23FFDBAB%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ECAA81%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22rocket%22%20x1%3D%22.08%22%20y1%3D%22.08%22%20x2%3D%22.9%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23E6EAFF%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23AAACFF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23656AD6%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3CradialGradient%20id%3D%22glow%22%3E%3Cstop%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%22.30%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%0A%20%20%3Cfilter%20id%3D%22shadow%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22230%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%223.0%22%20stdDeviation%3D%222%22%20flood-color%3D%22%231F1985%22%20flood-opacity%3D%22.55%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23glow%29%22%20%2F%3E%0A%3Cg%20filter%3D%22url%28%23shadow%29%22%3E%3Crect%20x%3D%229%22%20y%3D%2213%22%20width%3D%2246%22%20height%3D%2243%22%20rx%3D%228%22%20fill%3D%22url%28%23calendar%29%22%20stroke%3D%22%23AAA0FF%22%20stroke-width%3D%221.3%22%2F%3E%3Cpath%20d%3D%22M9%2024h46v7H9z%22%20fill%3D%22%23423ABF%22%20opacity%3D%22.75%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%228%22%20width%3D%227%22%20height%3D%2213%22%20rx%3D%223.2%22%20fill%3D%22url%28%23blue%29%22%2F%3E%3Crect%20x%3D%2241%22%20y%3D%228%22%20width%3D%227%22%20height%3D%2213%22%20rx%3D%223.2%22%20fill%3D%22url%28%23blue%29%22%2F%3E%3Cg%20fill%3D%22%23D9DCFF%22%20opacity%3D%22.95%22%3E%3Crect%20x%3D%2217%22%20y%3D%2234%22%20width%3D%227%22%20height%3D%226%22%20rx%3D%221.8%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%2234%22%20width%3D%227%22%20height%3D%226%22%20rx%3D%221.8%22%2F%3E%3Crect%20x%3D%2239%22%20y%3D%2234%22%20width%3D%227%22%20height%3D%226%22%20rx%3D%221.8%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%2244%22%20width%3D%227%22%20height%3D%226%22%20rx%3D%221.8%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%2244%22%20width%3D%227%22%20height%3D%226%22%20rx%3D%221.8%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cpath%20d%3D%22M13%2018q3-3%208-3h20%22%20fill%3D%22none%22%20stroke%3D%22%23FFF%22%20stroke-width%3D%222%22%20opacity%3D%22.26%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Partners */
.about-statistics .stat-card:nth-child(4n + 3) .stat-icon::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id%3D%22purple%22%20x1%3D%220.15%22%20y1%3D%220.05%22%20x2%3D%220.87%22%20y2%3D%220.95%22%3E%3Cstop%20stop-color%3D%22%23D9C0FF%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%239B83FF%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22%236C4CEC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234532B8%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22purple2%22%20x1%3D%220.15%22%20y1%3D%220%22%20x2%3D%22.8%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23BD9EFF%22%2F%3E%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%23724CE8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23362A9E%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22blue%22%20x1%3D%220.05%22%20y1%3D%220%22%20x2%3D%22.95%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FAFDFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23C5E1FF%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%238CA9FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235965D9%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22calendar%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23C3AAFF%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%238065F2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235541D2%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22gold%22%20x1%3D%22.15%22%20y1%3D%22.05%22%20x2%3D%22.88%22%20y2%3D%22.95%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23FFF6E8%22%2F%3E%3Cstop%20offset%3D%22.67%22%20stop-color%3D%22%23FFDBAB%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ECAA81%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22rocket%22%20x1%3D%22.08%22%20y1%3D%22.08%22%20x2%3D%22.9%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23E6EAFF%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23AAACFF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23656AD6%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3CradialGradient%20id%3D%22glow%22%3E%3Cstop%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%22.30%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%0A%20%20%3Cfilter%20id%3D%22shadow%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22230%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%223.0%22%20stdDeviation%3D%222%22%20flood-color%3D%22%231F1985%22%20flood-opacity%3D%22.55%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23glow%29%22%20%2F%3E%0A%3Cpath%20d%3D%22M32%207.5%2039.3%2023.7%2057%2026.2%2044%2038.4%2047.2%2056%2032%2047.4%2016.8%2056%2020%2038.4%207%2026.2%2024.7%2023.7Z%22%20fill%3D%22url%28%23gold%29%22%20stroke%3D%22%23FFF7EE%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23shadow%29%22%2F%3E%3Cpath%20d%3D%22M32%207.5%2032%2047.4%2016.8%2056%2020%2038.4%207%2026.2%2024.7%2023.7Z%22%20fill%3D%22%23FFDFB6%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22m32%208%207.3%2016%2017%202-16-1-9-13%22%20fill%3D%22%23fff%22%20opacity%3D%22.6%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Impact Programs */
.about-statistics .stat-card:nth-child(4n + 4) .stat-icon::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id%3D%22purple%22%20x1%3D%220.15%22%20y1%3D%220.05%22%20x2%3D%220.87%22%20y2%3D%220.95%22%3E%3Cstop%20stop-color%3D%22%23D9C0FF%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%239B83FF%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22%236C4CEC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234532B8%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22purple2%22%20x1%3D%220.15%22%20y1%3D%220%22%20x2%3D%22.8%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23BD9EFF%22%2F%3E%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%23724CE8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23362A9E%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22blue%22%20x1%3D%220.05%22%20y1%3D%220%22%20x2%3D%22.95%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FAFDFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23C5E1FF%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%238CA9FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235965D9%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22calendar%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23C3AAFF%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%238065F2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235541D2%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22gold%22%20x1%3D%22.15%22%20y1%3D%22.05%22%20x2%3D%22.88%22%20y2%3D%22.95%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23FFF6E8%22%2F%3E%3Cstop%20offset%3D%22.67%22%20stop-color%3D%22%23FFDBAB%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ECAA81%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22rocket%22%20x1%3D%22.08%22%20y1%3D%22.08%22%20x2%3D%22.9%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23E6EAFF%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23AAACFF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23656AD6%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3CradialGradient%20id%3D%22glow%22%3E%3Cstop%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%22.30%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%0A%20%20%3Cfilter%20id%3D%22shadow%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22230%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%223.0%22%20stdDeviation%3D%222%22%20flood-color%3D%22%231F1985%22%20flood-opacity%3D%22.55%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23glow%29%22%20%2F%3E%0A%3Cg%20filter%3D%22url%28%23shadow%29%22%3E%3Cpath%20d%3D%22M6%2029.5%2056%209.5q4-1.3%202.7%203.9L43.5%2057q-1%203-4.8.2L28%2044l-9%206v-14Z%22%20fill%3D%22url%28%23blue%29%22%20stroke%3D%22%23EEF3FF%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m19%2036%2037-23-28%2031-9%206Z%22%20fill%3D%22%236C7DDB%22%20opacity%3D%22.6%22%2F%3E%3Cpath%20d%3D%22m28%2044%2012.7%2013L35%2036%22%20fill%3D%22%23525DBB%22%20opacity%3D%22.55%22%2F%3E%3Cpath%20d%3D%22M56%2012%2028%2044%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.6%22%20opacity%3D%22.72%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}

/* Tiga keunggulan Innovate, Connect, Create Impact. */
/* Innovate */
.about-advantages .advantage-card:nth-child(1) .advantage-icon::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id%3D%22purple%22%20x1%3D%220.15%22%20y1%3D%220.05%22%20x2%3D%220.87%22%20y2%3D%220.95%22%3E%3Cstop%20stop-color%3D%22%23D9C0FF%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%239B83FF%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22%236C4CEC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234532B8%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22purple2%22%20x1%3D%220.15%22%20y1%3D%220%22%20x2%3D%22.8%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23BD9EFF%22%2F%3E%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%23724CE8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23362A9E%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22blue%22%20x1%3D%220.05%22%20y1%3D%220%22%20x2%3D%22.95%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FAFDFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23C5E1FF%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%238CA9FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235965D9%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22calendar%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23C3AAFF%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%238065F2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235541D2%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22gold%22%20x1%3D%22.15%22%20y1%3D%22.05%22%20x2%3D%22.88%22%20y2%3D%22.95%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23FFF6E8%22%2F%3E%3Cstop%20offset%3D%22.67%22%20stop-color%3D%22%23FFDBAB%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ECAA81%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22rocket%22%20x1%3D%22.08%22%20y1%3D%22.08%22%20x2%3D%22.9%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23E6EAFF%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23AAACFF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23656AD6%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3CradialGradient%20id%3D%22glow%22%3E%3Cstop%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%22.30%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%0A%20%20%3Cfilter%20id%3D%22shadow%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22230%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%223.0%22%20stdDeviation%3D%222%22%20flood-color%3D%22%231F1985%22%20flood-opacity%3D%22.55%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23glow%29%22%20%2F%3E%0A%3Cg%20filter%3D%22url%28%23shadow%29%22%3E%3Cpath%20d%3D%22M32%207c-12%200-20%209-20%2020%200%209%205%2014%2010%2019%201%201%202%203%202.5%205h15c.6-2%201.7-4.1%203-5.4%205-5%209.5-10.4%209.5-18.6C52%2016%2044%207%2032%207Z%22%20fill%3D%22url%28%23gold%29%22%20stroke%3D%22%23FFF7E9%22%20stroke-width%3D%221.3%22%2F%3E%3Cpath%20d%3D%22M24%2050h16v5a4%204%200%200%201-4%204h-8a4%204%200%200%201-4-4z%22%20fill%3D%22url%28%23purple%29%22%2F%3E%3Crect%20x%3D%2225%22%20y%3D%2248%22%20width%3D%2214%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%23D5B9FF%22%2F%3E%3Cpath%20d%3D%22M20%2026c0-7%205-11%2011-12%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.65%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}

/* Connect */
.about-advantages .advantage-card:nth-child(2) .advantage-icon::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id%3D%22purple%22%20x1%3D%220.15%22%20y1%3D%220.05%22%20x2%3D%220.87%22%20y2%3D%220.95%22%3E%3Cstop%20stop-color%3D%22%23D9C0FF%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%239B83FF%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22%236C4CEC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234532B8%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22purple2%22%20x1%3D%220.15%22%20y1%3D%220%22%20x2%3D%22.8%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23BD9EFF%22%2F%3E%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%23724CE8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23362A9E%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22blue%22%20x1%3D%220.05%22%20y1%3D%220%22%20x2%3D%22.95%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FAFDFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23C5E1FF%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%238CA9FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235965D9%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22calendar%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23C3AAFF%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%238065F2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235541D2%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22gold%22%20x1%3D%22.15%22%20y1%3D%22.05%22%20x2%3D%22.88%22%20y2%3D%22.95%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23FFF6E8%22%2F%3E%3Cstop%20offset%3D%22.67%22%20stop-color%3D%22%23FFDBAB%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ECAA81%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22rocket%22%20x1%3D%22.08%22%20y1%3D%22.08%22%20x2%3D%22.9%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23E6EAFF%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23AAACFF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23656AD6%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3CradialGradient%20id%3D%22glow%22%3E%3Cstop%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%22.30%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%0A%20%20%3Cfilter%20id%3D%22shadow%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22230%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%223.0%22%20stdDeviation%3D%222%22%20flood-color%3D%22%231F1985%22%20flood-opacity%3D%22.55%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23glow%29%22%20%2F%3E%0A%3Cg%20filter%3D%22url%28%23shadow%29%22%3E%3Cg%20opacity%3D%22.88%22%20fill%3D%22url%28%23purple2%29%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2224%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%2249%22%20cy%3D%2224%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M5%2044c0-6%204-10%2010-10s10%204%2010%2010v6H5z%22%2F%3E%3Cpath%20d%3D%22M39%2044c0-6%204-10%2010-10s10%204%2010%2010v6H39z%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2219%22%20r%3D%2210%22%20fill%3D%22url%28%23purple%29%22%20stroke%3D%22%23DAC4FF%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M17%2043c0-9%206-15%2015-15s15%206%2015%2015v9H17z%22%20fill%3D%22url%28%23purple%29%22%20stroke%3D%22%23B69FFF%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2215%22%20rx%3D%224.5%22%20ry%3D%222%22%20transform%3D%22rotate%28-20%2028%2015%29%22%20fill%3D%22%23fff%22%20opacity%3D%22.42%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Create Impact */
.about-advantages .advantage-card:nth-child(3) .advantage-icon::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id%3D%22purple%22%20x1%3D%220.15%22%20y1%3D%220.05%22%20x2%3D%220.87%22%20y2%3D%220.95%22%3E%3Cstop%20stop-color%3D%22%23D9C0FF%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%239B83FF%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22%236C4CEC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234532B8%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22purple2%22%20x1%3D%220.15%22%20y1%3D%220%22%20x2%3D%22.8%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23BD9EFF%22%2F%3E%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%23724CE8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23362A9E%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22blue%22%20x1%3D%220.05%22%20y1%3D%220%22%20x2%3D%22.95%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FAFDFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23C5E1FF%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%238CA9FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235965D9%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22calendar%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23C3AAFF%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%238065F2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235541D2%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22gold%22%20x1%3D%22.15%22%20y1%3D%22.05%22%20x2%3D%22.88%22%20y2%3D%22.95%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23FFF6E8%22%2F%3E%3Cstop%20offset%3D%22.67%22%20stop-color%3D%22%23FFDBAB%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ECAA81%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22rocket%22%20x1%3D%22.08%22%20y1%3D%22.08%22%20x2%3D%22.9%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23E6EAFF%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23AAACFF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23656AD6%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3CradialGradient%20id%3D%22glow%22%3E%3Cstop%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%22.30%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239481FF%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%0A%20%20%3Cfilter%20id%3D%22shadow%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22230%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%223.0%22%20stdDeviation%3D%222%22%20flood-color%3D%22%231F1985%22%20flood-opacity%3D%22.55%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23glow%29%22%20%2F%3E%0A%3Cg%20filter%3D%22url%28%23shadow%29%22%3E%3Cpath%20d%3D%22M23%2040c1-18%2013-29%2032-32%201%2020-11%2033-29%2034Z%22%20fill%3D%22url%28%23rocket%29%22%20stroke%3D%22%23E9ECFF%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M23%2040%2010%2044%2014%2028l16-5Z%22%20fill%3D%22url%28%23purple%29%22%2F%3E%3Cpath%20d%3D%22m34%2044-3%2013%2016-8%201-16Z%22%20fill%3D%22url%28%23purple2%29%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2224%22%20r%3D%226.5%22%20fill%3D%22%235245C8%22%20stroke%3D%22%23CBD0FF%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2224%22%20r%3D%222.4%22%20fill%3D%22%23C9E9FF%22%2F%3E%3Cpath%20d%3D%22m20%2045-4%207-6%203%203-8Z%22%20fill%3D%22%23FFCE89%22%2F%3E%3Cpath%20d%3D%22m23%2049-3%207-3%201%202-7Z%22%20fill%3D%22%23FFF0BB%22%2F%3E%3Cpath%20d%3D%22M54%2010C45%2011%2038%2015%2032%2020%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20opacity%3D%22.45%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}


@media (hover: hover) and (pointer: fine) {

    .about-statistics .stat-card:hover .stat-icon,
    .about-advantages .advantage-card:hover .advantage-icon {
        transform: none;
        box-shadow: none;
        background: none;
    }

    .about-statistics .stat-card:hover .stat-icon::after,
    .about-advantages .advantage-card:hover .advantage-icon::after {
        transform: translateY(-2px) scale(1.08);
        filter: drop-shadow(0 5px 8px rgba(91, 75, 221, .35));
    }
}

@media (max-width: 600px) {

    .about-statistics .stat-icon,
    .about-advantages .advantage-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 9px;
    }

    .about-statistics .stat-icon::after,
    .about-advantages .advantage-icon::after {
        width: 37px;
        height: 37px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .about-statistics .stat-icon::after,
    .about-advantages .advantage-icon::after {
        transition: none;
    }
}