:root {
  --pink: #ec4899;
  --orange: #fb923c;
  --ink: #14142b;
  --muted: #f1f5f9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  color: var(--ink);
}

/* Paragraphs */
p {
  font-family: 'Poppins', sans-serif !important;
  justify-content: center;
}

/* ---------- Hero (background video) ---------- */
.hero1 {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding: 28px 56px 40px;
  display: flex;
  flex-direction: column;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  image-rendering: auto;
  filter: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hero-content{
  position: relative;
  z-index: 2;
}

/* =========================================
   LOGO
========================================= */

.logo {
    display: flex;
    align-items: center;
    gap: 16px;

    position: relative;
    z-index: 2;

    margin-left: 0;
}

.logo img {
    width: 75px;
    height: 55px;
    object-fit: contain;

    border-radius: 290px;
    background: #fff;
    padding: 4px;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-text h2 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.5px;

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

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    margin: 0;
    line-height: 1.1;

    -webkit-text-stroke: 0.5px rgba(0,0,0,.3);

    filter:
        drop-shadow(0 2px 4px rgba(0,0,0,.6))
        drop-shadow(0 0 8px rgba(0,0,0,.4));

    border-color: black;
}

.logo-text span {
    font-size: 10px;
    letter-spacing: 2.5px;

    color: #0f172a;
    font-weight: 800;

    display: block;
    margin-top: 3px;

    text-shadow:
        0 1px 6px rgba(255,255,255,.8),
        0 0 4px rgba(255,255,255,.6);
}

@media (max-width: 560px){
    .logo img{ width: 34px; height: 34px; }
    .logo-text h2{ font-size: 15px; }
    .logo-text span{ font-size: 8px; }
}
/* =========================================
   TOP HEADER
========================================= */

.top-bar {
    width: 100%;
    min-height: 100px;
    padding: 20px 40px;
    box-sizing: border-box;

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

    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;

    background: transparent;
}

/* ===================== MENU (grid button + dropdown) ===================== */
/* =========================================
   RIGHT SIDE
========================================= */

.top-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 28px;

    margin-left: auto;

    position: relative;
    z-index: 10;
}


/* =========================================
   EGS SOFTWARE SOLUTIONS
========================================= */

/*.tagline {
    display: block;

    padding: 7px 13px;

    color: #ff2f92;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 4px;
    line-height: 1.35;

    text-align: right;
    white-space: nowrap;

  


   
    text-shadow:
        0 0 6px rgba(255, 47, 146, .9),
        0 0 14px rgba(255, 47, 146, .55);

    position: relative;
    z-index: 20;
}*/

.grid-menu-link {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 12px;
  text-decoration: none !important;
  color: #fff !important;
  font-size: 14.5px;
  font-weight: 600;
  transform: translateX(14px);
  transition: opacity .35s ease, transform .35s ease, background .25s ease, padding-left .25s ease;
  width: 100%;
}

.grid-menu-link:hover,
.grid-menu-link:visited,
.grid-menu-link:active {
  color: #fff !important;
  text-decoration: none !important;
}

.grid-menu-link .item-icon {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
}
.grid-menu-link .item-icon svg { width: 15px; height: 15px; stroke: #ff9dc4; }
/* =========================================
   MENU ZONE
========================================= */

.menu-zone {
    width: 80px;
    height: 80px;

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

    position: relative;
    flex-shrink: 0;
}

/* =========================================
   GRID BUTTON
========================================= */
.grid-btn {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: linear-gradient(135deg, #1e1b2e, #14142b);
    color: #fff;

    border: 1.5px solid transparent;
    background-clip: padding-box;

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

    cursor: pointer;
    flex-shrink: 0;
    position: relative;

    box-shadow:
        0 0 0 2px rgba(236,72,153,.3),
        0 0 18px rgba(236,72,153,.35);

    transition:
        transform .2s ease-out,
        box-shadow .3s ease;
}

.grid-btn::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ec2f7b, #ff8f4d, #ec2f7b);
    z-index: -1;
    animation: gridBtnSpin 4s linear infinite;
    opacity: .8;
}

@keyframes gridBtnSpin {
    to { transform: rotate(360deg); }
}

.grid-btn svg {
    width: 16px;
    height: 16px;
}

.grid-btn:hover {
    transform: scale(1.08);

    box-shadow:
        0 0 0 6px rgba(236,72,153,.15),
        0 0 22px rgba(236,72,153,.45);
}

.grid-btn.magnet-glow {
    box-shadow:
        0 0 0 8px rgba(236,72,153,.25),
        0 0 0 16px rgba(251,146,60,.12);
}

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

@media (max-width: 560px) {

    .top-bar {
        min-height: 80px;
        padding: 0 14px;
    }

    .logo {
        gap: 7px;
    }

    .logo img {
        width: 50px;
        height: 40px;
    }

    .logo-text h3 {
        font-size: 15px;
    }

    .logo-text span {
        font-size: 8px;
        letter-spacing: 1.8px;
    }

    .top-right {
        gap: 8px;
    }

    .tagline {
        font-size: 8px;
        letter-spacing: 2px;
        padding: 5px 8px;
    }

    .menu-zone {
        width: 52px;
        height: 52px;
    }

    .grid-btn {
        width: 38px;
        height: 38px;
    }
}
.grid-menu {
  position: absolute;
  top: 60px; right: 0;
  width: 240px;
  background: rgba(20,10,30,.92);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 10px;              /* 12px → 10px, konjam tight-a */
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(.96);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility .3s;
  z-index: 100;
  overflow: visible;
}

.grid-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.grid-menu::before {
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 0 60px 20px rgba(236,47,123,.15), 0 0 100px 40px rgba(255,143,77,.08);
  border-radius: 30px;
}

@keyframes menuGlowSpin {
  to { transform: rotate(360deg); }
}

.grid-menu-item, .active-glow, .grid-menu-divider, .grid-menu-footer {
  position: relative;
  z-index: 1;
}

.grid-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;         /* 13px 16px → 12px 14px, consistent-a */
  margin-bottom: 2px;         /* ✅ NEW — ovvoru item-கும் chinna gap */
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .35s ease, transform .35s ease, background .25s ease, padding-left .25s ease;
}

.grid-menu-item.has-submenu {
   padding: 12px 14px !important;   /* pazhaya "padding: 0" override pannunga */
  margin-bottom: 2px;
}
.grid-menu-item:last-of-type {
  margin-bottom: 0;           
}
.grid-menu.open .grid-menu-item { opacity: 1; transform: translateX(0); }
.grid-menu.open .grid-menu-item:nth-child(2){ transition-delay: .06s; }
.grid-menu.open .grid-menu-item:nth-child(3){ transition-delay: .11s; }
.grid-menu.open .grid-menu-item:nth-child(4){ transition-delay: .16s; }
.grid-menu.open .grid-menu-item:nth-child(5){ transition-delay: .21s; }
.grid-menu-item:hover { background: rgba(255,255,255,.08); padding-left: 20px; }

.item-icon {
  position: relative;
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
  transition: background .3s ease, box-shadow .3s ease, transform .2s ease;
}
.item-icon svg { width: 15px; height: 15px; stroke: #ff9dc4; transition: stroke .3s ease; position: relative; z-index: 1; }
.grid-menu-item:hover .item-icon {
  background: linear-gradient(135deg,#ec2f7b,#ff8f4d);
  box-shadow: 0 0 20px rgba(236,47,123,.7), 0 0 34px rgba(255,143,77,.4);
  transform: scale(1.1);
}
.grid-menu-item:hover .item-icon svg { stroke: #fff; }

.item-icon::before {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(255,157,196,.35);
  animation: orbitSpin 5s linear infinite;
}
.item-icon::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  background: radial-gradient(circle 2.5px at 50% 0%, #ff9dc4 0%, #ff9dc4 100%, transparent 101%);
  filter: drop-shadow(0 0 4px rgba(255,157,196,.8));
  animation: orbitDot 5s linear infinite;
  pointer-events: none;
}
.grid-menu-item:nth-child(2) .item-icon::before, .grid-menu-item:nth-child(2) .item-icon::after{ animation-delay: -1s; }
.grid-menu-item:nth-child(3) .item-icon::before, .grid-menu-item:nth-child(3) .item-icon::after{ animation-delay: -2s; }
.grid-menu-item:nth-child(4) .item-icon::before, .grid-menu-item:nth-child(4) .item-icon::after{ animation-delay: -3s; }
.grid-menu-item:nth-child(5) .item-icon::before, .grid-menu-item:nth-child(5) .item-icon::after{ animation-delay: -4s; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitDot { to { transform: rotate(360deg); } }

.grid-menu-item:hover .item-icon::before {
  border-color: rgba(255,143,77,.9);
  animation-duration: 1.8s;
}
.grid-menu-item:hover .item-icon::after {
  background: radial-gradient(circle 3px at 50% 0%, #ffd166 0%, #ffd166 100%, transparent 101%);
  filter: drop-shadow(0 0 8px rgba(255,209,102,1));
  animation-duration: 1.8s;
}

.grid-menu-item .arrow {
  margin-left: auto;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s ease, transform .25s ease;
  font-size: 13px;
  color: #ff8f4d;
}
.grid-menu-item:hover .arrow { opacity: 1; transform: translateX(0); }


.active-glow {
  position: absolute;
  left: 8px; right: 8px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(236,47,123,.12), rgba(255,143,77,.06));
  border: 1px solid rgba(255,143,120,.25);
  pointer-events: none;
  opacity: 0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  z-index: 0;
}
.grid-menu:hover .active-glow { opacity: 1; }
/* ---------- Services sub-menu (click to open) ---------- */

.has-submenu {
  position: relative;
}

.has-submenu.submenu-open > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background .2s ease, padding-left .2s ease, color .2s ease;
}

.submenu {
  position: absolute;
  top: 0;
  right: calc(100% + 10px);   
  left: auto;
  width: 220px;
  background: rgba(20,10,30,.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 200;
}

.has-submenu.submenu-open > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.submenu-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition:
        background .3s ease,
        box-shadow .3s ease,
        transform .25s ease;
}
.submenu-icon svg {
    position: relative;
    z-index: 3;

    width: 12px;
    height: 12px;

    stroke: #ff9dc4;

    transition: stroke .3s ease;
}

.submenu-icon::before {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border: 1px dashed rgba(255,157,196,.45);

    animation: submenuOrbitSpin 5s linear infinite;

    pointer-events: none;
}

.submenu-icon::after {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle 2.5px at 50% 0%,
            #ff9dc4 0%,
            #ff9dc4 100%,
            transparent 101%
        );

    filter:
        drop-shadow(0 0 4px rgba(255,157,196,.9));

    animation: submenuOrbitDot 5s linear infinite;

    pointer-events: none;
}

.nested-submenu {
  top: 0;
  bottom: auto;
  max-height: 60vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;

  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(236,47,123,.4) transparent;
}

/* Chrome, Edge, Safari scrollbar */
.nested-submenu::-webkit-scrollbar {
  width: 5px;
}

.nested-submenu::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.nested-submenu::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ec2f7b, #ff8f4d);
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(236,47,123,.6);
  transition: box-shadow .3s ease;
}

.nested-submenu:hover::-webkit-scrollbar-thumb {
  box-shadow: 0 0 12px rgba(236,47,123,.9), 0 0 20px rgba(255,143,77,.5);
}

.nested-submenu::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff4d94, #ffa35c);
}



.submenu-item.has-submenu.nested-submenu-open > .nested-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@keyframes submenuOrbitSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes submenuOrbitDot {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


.submenu-item:hover .submenu-icon {
  background: linear-gradient(135deg,#ec2f7b,#ff8f4d);
}
.submenu-item:hover .submenu-icon svg {
  stroke: #fff;
}


.submenu-item:hover {
  background: rgba(255,255,255,.08);
  padding-left: 18px;
  color: #ff9dc4;
}

@media (max-width: 560px) {
  @media (max-width: 560px) {
  .submenu {
    position: static;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 4px;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    background: rgba(255,255,255,.04);
    border: none;
    border-radius: 12px;
    padding: 6px;
    box-shadow: none;
  }
  .has-submenu.submenu-open > .submenu {   /* direct child selector சேர்த்தேன் */
    display: block !important;              /* !important சேர்த்தேன் - override force பண்ண */
  }
}
 .has-submenu:hover > .submenu,
.has-submenu.submenu-open > .submenu {
  display: block;
}
  .submenu-item {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    color: #fff;              /* blue link color override */
    text-decoration: none;    /* underline நீக்கு */
    font-size: 12.5px;
    font-weight: 500;
  }
  .submenu-item:hover {
    background: rgba(255,255,255,.08);
    color: #ff9dc4;
  }
}

/* Only show the submenu that was clicked */
.grid-menu .submenu-item.has-submenu > .nested-submenu {
  display: none !important;
}

.grid-menu
.submenu-item.has-submenu.nested-submenu-open
> .nested-submenu {
  display: block !important;
}
/* =========================================================
   PREMIUM MOBILE MENU
========================================================= */

@media (max-width: 560px) {

    /* HEADER */
    .top-bar {
        min-height: 72px;
        padding: 0 12px;
    }

    .logo {
        gap: 6px;
    }

    .logo img {
        width: 46px;
        height: 38px;
        object-fit: contain;
    }

    .logo-text h3 {
        font-size: 14px;
        line-height: 1.1;
    }

    .logo-text span {
        font-size: 7px;
        letter-spacing: 1.5px;
    }

    .top-right {
        gap: 4px;
    }


    /* MENU BUTTON */

    .menu-zone {
        width: 48px;
        height: 48px;
    }

    .grid-btn {
        width: 38px;
        height: 38px;
    }

    .grid-btn svg {
        width: 15px;
        height: 15px;
    }


    /* =====================================================
       MAIN MENU PANEL
    ===================================================== */

    .grid-menu {

        position: fixed;

        top: 72px;
        right: 10px;

        width: min(270px, calc(100vw - 20px));

        max-height: calc(100vh - 88px);

        overflow-y: auto;
        overflow-x: hidden;

        padding: 12px;

        border-radius: 22px;

        background:
            linear-gradient(
                145deg,
                rgba(27,14,34,.97),
                rgba(14,8,22,.98)
            );

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

        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);

        box-shadow:
            0 30px 80px rgba(0,0,0,.65),
            0 0 40px rgba(236,47,123,.12);

        opacity: 0;
        visibility: hidden;

        transform:
            translateY(-12px)
            scale(.97);

        pointer-events: none;

        transition:
            opacity .28s ease,
            transform .28s cubic-bezier(.2,.8,.2,1),
            visibility .28s ease;

        z-index: 9999;

        scrollbar-width: none;
    }

    .grid-menu::-webkit-scrollbar {
        display: none;
    }


    .grid-menu.open {

        opacity: 1;
        visibility: visible;

        transform:
            translateY(0)
            scale(1);

        pointer-events: auto;
    }


    /* =====================================================
       MENU ITEM
    ===================================================== */

    .grid-menu-item {

        width: 100%;

        min-height: 52px;

        display: flex;

        align-items: center;

        gap: 12px;

        padding: 10px 12px;

        margin-bottom: 4px;

        border-radius: 14px;

        color: #fff;

        font-size: 14px;
        font-weight: 600;

        text-decoration: none;

        transform: translateX(10px);

        opacity: 0;

        transition:
            background .25s ease,
            transform .3s ease,
            opacity .3s ease;
    }


    .grid-menu.open .grid-menu-item {

        opacity: 1;

        transform: translateX(0);
    }


    .grid-menu-item:hover {

        background:
            linear-gradient(
                90deg,
                rgba(236,47,123,.12),
                rgba(255,143,77,.08)
            );
    }


    /* =====================================================
       ICON
    ===================================================== */

    .item-icon {

        width: 34px;
        height: 34px;

        flex-shrink: 0;

        border-radius: 50%;

        display: flex;

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

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

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

        position: relative;
    }


    .item-icon svg {

        width: 15px;
        height: 15px;

        stroke: #ff9dc4;

        position: relative;

        z-index: 2;
    }


    /* rotating orbit */

    .item-icon::before {

        content: "";

        position: absolute;

        inset: -4px;

        border-radius: 50%;

        border:
            1px dashed rgba(255,157,196,.38);

        animation:
            mobileMenuOrbit
            5s linear infinite;
    }


    /* glowing orbit dot */

    .item-icon::after {

        content: "";

        position: absolute;

        inset: -4px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle 2px at 50% 0%,
                #ff9dc4 0%,
                #ff9dc4 100%,
                transparent 101%
            );

        filter:
            drop-shadow(
                0 0 5px
                rgba(255,157,196,.9)
            );

        animation:
            mobileMenuOrbit
            5s linear infinite;
    }


    @keyframes mobileMenuOrbit {

        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }

    }


    /* =====================================================
       ARROW
    ===================================================== */

    .grid-menu-item .arrow {

        margin-left: auto;

        opacity: .7;

        transform: none;

        font-size: 14px;

        color: #ff8f4d;
    }


    /* =====================================================
       ABOUT / SERVICES CLICKABLE ITEM
    ===================================================== */

    .grid-menu-item.has-submenu {

        display: flex;

        flex-wrap: wrap;

        padding: 10px 12px !important;

        cursor: pointer;
    }


    /* =====================================================
       SUBMENU
       Company / Culture
    ===================================================== */

    .submenu {

        position: static !important;

        width: 100% !important;

        margin:
            4px
            0
            2px
            0;

        padding: 6px !important;

        display: none;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;

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

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

        border-radius: 15px;

        box-shadow:
            inset 0 1px
            rgba(255,255,255,.03);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }


    /* OPEN */

    .has-submenu.submenu-open > .submenu {

        display: block !important;

        animation:
            mobileSubmenuOpen
            .25s ease both;
    }


    @keyframes mobileSubmenuOpen {

        from {

            opacity: 0;

            transform:
                translateY(-6px)
                scale(.98);
        }

        to {

            opacity: 1;

            transform:
                translateY(0)
                scale(1);
        }

    }


    /* =====================================================
       SUBMENU ITEM
    ===================================================== */

    .submenu-item {

        width: 100%;

        min-height: 42px;

        display: flex !important;

        align-items: center;

        gap: 11px;

        padding: 8px 10px;

        margin: 2px 0;

        border-radius: 11px;

        color: #fff !important;

        text-decoration: none !important;

        font-size: 12.5px;

        font-weight: 500;

        transition:
            background .2s ease,
            transform .2s ease,
            color .2s ease;
    }


    .submenu-item:hover {

        background:
            linear-gradient(
                90deg,
                rgba(236,47,123,.15),
                rgba(255,143,77,.1)
            );

        color: #ff9dc4 !important;

        transform: translateX(3px);
    }


    /* =====================================================
       SUBMENU ICON
    ===================================================== */

    .submenu-icon {

        width: 27px;
        height: 27px;

        flex-shrink: 0;

        border-radius: 50%;

        display: flex;

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

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

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

        position: relative;
    }


    .submenu-icon svg {

        width: 12px;
        height: 12px;

        stroke: #ff9dc4;

        position: relative;

        z-index: 2;
    }


    .submenu-icon::before {

        content: "";

        position: absolute;

        inset: -3px;

        border-radius: 50%;

        border:
            1px dashed rgba(255,157,196,.3);

        animation:
            mobileSubOrbit
            5s linear infinite;
    }


    .submenu-icon::after {

        content: "";

        position: absolute;

        inset: -3px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle 1.8px at 50% 0%,
                #ff8f4d 0%,
                #ff8f4d 100%,
                transparent 101%
            );

        filter:
            drop-shadow(
                0 0 4px
                rgba(255,143,77,.9)
            );

        animation:
            mobileSubOrbit
            5s linear infinite;
    }


    @keyframes mobileSubOrbit {

        to {
            transform: rotate(360deg);
        }

    }


    /* =====================================================
       DIVIDER
    ===================================================== */

    .grid-menu-divider {

        height: 1px;

        margin:
            8px 5px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.12),
                transparent
            );
    }

/* Application Excellence sub pages - mobile reset */
.submenu-item.has-submenu > .nested-submenu {
    display: none;
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 4px 0 2px 0;
    padding: 6px !important;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    box-shadow: none;
}

/* Show when Application Excellence is clicked */
.submenu-item.has-submenu.nested-submenu-open > .nested-submenu {
    display: block !important;
}

/* JS inline "top" style-ஐ mobile-ல ignore பண்ண */
.nested-submenu {
    top: auto !important;
}

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

    .grid-menu-footer {

        padding:
            9px 12px 5px;

        font-size: 9px;

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

        letter-spacing: 1.5px;

        text-align: center;
    }

}
/* ===== FINAL MOBILE MENU FIX ===== */
@media screen and (max-width: 560px) {

  .grid-menu {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Services/About parent must increase its height */
  .grid-menu > .grid-menu-item.has-submenu {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* First-level submenu */
  .grid-menu > .grid-menu-item.has-submenu > .submenu {
    position: static !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 8px !important;
    overflow: visible !important;
  }

  /* Service category */
  .grid-menu .submenu-item.has-submenu {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Hide nested list initially */
  .grid-menu .submenu-item.has-submenu > .nested-submenu {
    display: none !important;
  }

  /* Show selected nested list as accordion */
  .grid-menu
  .submenu-item.has-submenu.nested-submenu-open
  > .nested-submenu {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;

    margin: 8px 0 4px !important;
    padding: 6px !important;

    overflow: visible !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    z-index: auto !important;
  }

  /* Do not hide main Services list */
  .grid-menu-item.has-submenu.submenu-open
  > .submenu:has(.nested-submenu-open) {
    display: block !important;
  }

  /* Nested links */
  .nested-submenu > a.submenu-item {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;

    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 8px !important;

    white-space: normal !important;
    line-height: 1.3 !important;
  }

  .nested-submenu > a.submenu-item > span:last-child {
    flex: 1 !important;
    min-width: 0 !important;
  }
}

/* Header changing title smooth fix */
.title-item {
  opacity: 0 !important;
  transform: translateY(18px) !important;
  filter: none !important;

  transition:
    opacity 0.45s ease,
    transform 0.45s ease !important;

  will-change: opacity, transform;
}

.title-item.active {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: none !important;
}

/* ===== MOBILE SUBMENU RIGHT-CUT FIX ===== */
@media screen and (max-width: 767px) {

  .grid-menu {
    right: 10px !important;
    left: auto !important;
    width: calc(100vw - 20px) !important;
    max-width: 320px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .grid-menu .grid-menu-item.has-submenu,
  .grid-menu .submenu-item.has-submenu {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* All submenus must open below—not on the right */
  .grid-menu .submenu,
  .grid-menu .nested-submenu {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    flex: 0 0 100% !important;
    clear: both !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  .grid-menu .nested-submenu {
    display: none !important;
    margin: 8px 0 4px !important;
    padding: 6px !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;

    background: rgba(10, 5, 16, 0.7) !important;
    border-radius: 12px !important;
  }

  .grid-menu
  .submenu-item.has-submenu.nested-submenu-open
  > .nested-submenu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nested-submenu > a.submenu-item {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding: 10px 6px !important;
    box-sizing: border-box !important;
  }

  .nested-submenu > a.submenu-item > span:last-child {
    display: block !important;
    min-width: 0 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;

    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .nested-submenu .submenu-icon {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }
}
/* =================== END MENU =================== */

/* ---------- hero content row ---------- */
.hero-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 120px;
}

.move-explore {
  width: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.move-explore .line { width: 1px; height: 54px; background: rgba(219,39,119,0.5); }
.move-explore .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.move-explore .label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 3px;
  color: wheat;
}

.hero-copy {
  width: 520px;
  flex: 0 0 520px;
}

#mainTitle{
    overflow:hidden;
}

#title1,
#title2,
#heroDesc{
    display:inline-block;
    transition:
        opacity .65s cubic-bezier(.22,1,.36,1),
        transform .65s cubic-bezier(.22,1,.36,1),
        filter .65s cubic-bezier(.22,1,.36,1);
}

.title-slider{
    height:160px;
    overflow:hidden;
    position:relative;
    background:transparent;
}


.title-track{
    position:relative;
    height:160px;
}

.title-item{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    opacity:0;
    transform:scale(.92);
    filter:blur(12px);
    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.22,1,.36,1),
        filter .75s ease;
   color: #000 !important;
}

.title-item.active{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
}

#mainTitle{
    background:transparent;
}

.hero-out{
    opacity:0;
    transform:translateY(40px) scale(.96);
    filter:blur(10px);
}

.hero-in{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
}

#title2{
    animation:titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow{
    0%,100%{
        text-shadow:
            0 0 8px rgba(236,72,153,.35),
            0 0 18px rgba(251,146,60,.25);
    }

    50%{
        text-shadow:
            0 0 18px rgba(236,72,153,.7),
            0 0 35px rgba(251,146,60,.5);
    }
}

.hero-show{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}
.grad1{
    font-family: 'Poppins';
    color: #000;
    font-size: clamp(34px, 10vw, 54px);   /* increased min & scaling */
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #000;
    -webkit-text-stroke: 1px #fff;
    text-stroke: 1px #fff;
    font-weight: 900;
    text-shadow:
        0 0 10px rgba(255,255,255,.9),
        0 0 20px rgba(255,255,255,.8),
        0 0 40px rgba(255,180,0,.9),
        0 0 80px rgba(255,120,0,.8);
}

.title-item .top{
    font-family: 'Poppins';
    font-size: clamp(29px, 6.5vw, 49px);
    font-weight: 700;
    display: block;
}


@keyframes glow{
    from{ box-shadow:0 0 10px rgba(236,72,153,.5); }
    to{ box-shadow:0 0 25px rgba(251,146,60,.8); }
}

@keyframes glowText{
    from{
        filter: brightness(1);
        text-shadow:
            0 0 10px rgba(255,215,0,.8),
            0 0 20px rgba(255,193,7,.7),
            0 0 40px rgba(255,152,0,.6);
    }
    to{
        filter: brightness(1.35);
        text-shadow:
            0 0 20px rgba(255,255,255,.9),
            0 0 35px rgba(255,215,0,1),
            0 0 60px rgba(255,193,7,.9),
            0 0 90px rgba(255,152,0,.8);
    }
}

.eyebrow1 { font-size: 14px; font-weight: 700; letter-spacing: 3px; color: #1e293b; margin: 0 0 10px; text-shadow: 0 1px 8px rgba(255,255,255,0.6); }
h1 { font-size: 68px; line-height: 1.05; font-weight: 800; margin: 0; color: #0f172a; text-shadow: 0 1px 10px rgba(255,255,255,0.5); }

h1 .grad {
  color: #000;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-stroke: 1.5px #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.script {
  font-family: 'poppins';
  font-size: 48px;
  color: #c2410c;
  margin: 4px 0 0;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
}
.hero-copy .desc{
    color:#d6d6d6;
    font-size:16px;
    line-height:1.9;
    font-weight:500;
    letter-spacing:.3px;

    text-shadow:
        0 2px 10px rgba(0,0,0,.75),
        0 0 20px rgba(0,0,0,.25);
}
.cta11 {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #1e1b2e, #14142b);
  color: #fff;
  border: 1px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  padding: 14px 10px 14px 26px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  box-shadow: 0 8px 24px -8px rgba(219,39,119,0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation:glow 2s infinite alternate;
}

.cta11::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink), var(--orange));
  z-index: -1;
}
.cta11:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px -6px rgba(219,39,119,0.7);
}
.cta11 .arrows {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--orange));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.cta11:hover .arrows { transform: translateX(4px) rotate(-45deg); }
.cta11 .arrows svg { width: 15px; height: 15px; }

/* ---------- stats ---------- */
.stats-col {
  margin-left: auto;
  margin-right: 24px;
  position: relative;
  width: 280px;
  flex: 0 0 280px;
  padding-left: 0;
  z-index: 2;
}

.stats { display: flex; flex-direction: column; gap: 22px; }

.stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 10px;
  margin-left: 20px;
  transition: transform .25s ease;
  padding:14px 18px 14px 28px;
  animation:float 5s ease-in-out infinite;
  background:rgba(15,15,20,0.55);
  backdrop-filter:blur(22px);
  border:1px solid rgba(236,72,153,0.18);
  box-shadow: 0 8px 25px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateX(40px);
}
.stat-card.reveal { animation: statSlideIn 1.5s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes statSlideIn { to { opacity: 1; transform: translateX(0); } }

.stat-card:nth-child(2){ animation-delay:.5s; }
.stat-card:nth-child(3){ animation-delay:1s; }
.stat-card:nth-child(4){ animation-delay:1.5s; }

@keyframes float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
}

.stat-card:hover{
    transform:translateX(-8px);
    box-shadow:
        0 0 25px rgba(236,72,153,.35),
        0 12px 35px rgba(0,0,0,.45);
}

.stat-icon{
    position:absolute; left:-20px; top:50%; transform:translateY(-50%);
    width:42px; height:42px; border-radius:50%; z-index: 2;
    background:rgba(15,15,20,.9);
    border:2px solid #ec4899;
    color:#ff5fb2;
    display:flex; align-items:center; justify-content:center;
    box-shadow:
        0 0 8px rgba(236,72,153,.8),
        0 0 18px rgba(236,72,153,.6),
        0 0 30px rgba(236,72,153,.4);
    transition:.35s;
    animation:iconGlow 2s ease-in-out infinite;
}
.stat-icon svg { width: 18px; height: 18px; }
.stat-icon::after {
  content: "";
  position: absolute;
  left: 40px; top: 50%;
  width: 20px; height: 1px;
  background: rgba(236,72,153,0.7);
}
.stat-card:hover .stat-icon{
    transform:translateY(-50%) scale(1.15);
    box-shadow:
        0 0 12px #ec4899,
        0 0 25px #ec4899,
        0 0 45px #fb923c,
        0 0 70px #fb923c;
}

.stat-text { display: flex; flex-direction: column; }
.stat-value {
  font-size: 18px; font-weight: 700; color: #fff;
  text-shadow: 0 0 12px #ec4899, 0 0 22px #fb923c;
  display: block;
}
.stat-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: rgba(255,255,255,0.65);
  display: block; white-space: nowrap;
}

.stat-card::before{
    content:"";
    position:absolute; inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg, rgba(236,72,153,.8), rgba(251,146,60,.6));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

.stat-card::after{
    content:"";
    position:absolute; inset:-2px;
    border-radius: inherit;
    background:linear-gradient(135deg, #000000, #1a1a1a, #2b2b2b, #000000);
    background-size:300%;
    animation:borderMove 5s linear infinite;
    z-index:-1;
}

/* ---------- glitch punch entrance ---------- */
h1#mainTitle { opacity: 0; transform: scale(1.4); }
h1#mainTitle.reveal {
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.2), opacity 0.15s ease;
  opacity: 1; transform: scale(1);
}
h1#mainTitle.glitch { text-shadow: 2px 0 #ec4899, -2px 0 #378ADD; }

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

@media (max-width: 1100px) {
  .hero-content { flex-wrap: wrap; justify-content: center; text-align: center; }
  .move-explore { display: none; }
  .hero-copy { max-width:580px; flex: 0 0 580px; }
  .hero-copy .desc { margin-left: auto; margin-right: auto; }
  .stats-col { margin-left: 0; width:260px; flex:0 0 260px; padding-left: 0; }
  .stats { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .stat-card::before { display: none; }
  .top-bar { flex-wrap: wrap; gap: 14px; }
  h1 { font-size: 45px; }
}

@media (max-width: 768px) {
  .hero { padding: 24px 24px 34px; }
  h1 { font-size: 40px; }
  .script { font-size: 36px; }
  .hero-copy { flex: 0 0 100%; max-width: 100%; }
  .hero-copy .desc { flex: 0 0 auto; max-width: 460px; }
  .stats-col { width: 100%; flex: 0 0 100%; margin-right: 0; }
  .stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 14px;
  flex-direction: unset;
}
.stat-card {
  margin-left: 0;
  box-sizing: border-box;
  width: 100%;
  padding-left: 26px;
}
  .stats { gap: 12px; }
  .stat-card { margin-left: 12px; }
}



@media (max-width: 560px) {
  .hero { min-height: 100vh; padding: 20px 20px 30px; }
  h1 { font-size: 34px; }
  .script { font-size: 30px; }
  .tagline { display: none; }

  .menu-zone { width: 56px; height: 56px; }
  .grid-btn { width: 36px; height: 36px; }

  .cta { padding: 12px 8px 12px 20px; font-size: 13px; margin-top: 18px; }
  .cta .arrow { width: 26px; height: 26px; }

  .stats-col { width: 100%; flex: 0 0 100%; }
  .title-slider,
  .title-track{
    height: 140px;   /* tune to taste, or use min-height + auto */
  }
  .stats {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 10px;
}
.stat-card {
  margin-left: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 10px 10px 22px;
  gap: 10px;
}
.grad1{
    letter-spacing: -0.5px;
  }
  .stat-value { font-size: 15px; }
  .stat-label { font-size: 9px; }
  .stat-icon { width: 34px; height: 34px; left: -16px; }
  .stat-icon svg { width: 14px; height: 14px; }

  .eyebrow { font-size: 12px; letter-spacing: 2px; }
}

@media (max-width: 400px) {
  h1 { font-size: 28px; }
  .script { font-size: 24px; }
  .hero-copy .desc { font-size: 13px; }
   .title-slider,
  .title-track{
    height: 120px;
  }
  .stats {
  grid-template-columns: 1fr;
  gap: 10px;
}
.stat-card { margin-left: 0; }
}
/* ===================== HERO INFINITE SCROLL MENU (marquee) ===================== */
.egs-scroll-menu{
    position:relative;
    width:100%;
    max-width:100%;
    overflow:hidden;
    padding:14px 0;
    margin-top:0;        /* hero-க்கும் marquee-க்கும் நடுவுல gap தேவை இல்ல எனில் 0 */
    background:#0a0409;
    border-top:1px solid rgba(255,122,26,.18);
    border-bottom:1px solid rgba(255,122,26,.18);
}
.egs-scroll-track{
    display:flex;align-items:center;width:max-content;
    animation:egsScrollLoop 75s linear infinite;
}
.egs-scroll-menu:hover .egs-scroll-track{animation-play-state:paused}
@keyframes egsScrollLoop{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.egs-scroll-menu::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.09) 46%,transparent 62%);
    transform:translateX(-120%);
    animation:egsSheen 6.5s ease-in-out infinite;
}
@keyframes egsSheen{0%{transform:translateX(-120%)}55%{transform:translateX(120%)}100%{transform:translateX(120%)}}

.egs-scroll-item{
    position:relative;display:flex;align-items:center;gap:12px;
    padding:0 30px;white-space:nowrap;
}
.egs-scroll-item::after{
    content:"";position:absolute;right:0;top:50%;width:4px;height:4px;border-radius:50%;
    transform:translateY(-50%);background:var(--orange);box-shadow:0 0 8px 1px rgba(255,122,26,.7);
}
.egs-scroll-item i{
    width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,rgba(255,122,26,.35),rgba(20,14,26,1) 70%);
    border:1.5px solid rgba(255,122,26,.6);
    box-shadow:0 0 14px -2px rgba(255,60,90,.65);
    color:#ff9d5c;
    animation:egsIconDance 2.6s ease-in-out infinite;
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.egs-scroll-item:nth-child(4n+1) i{animation-delay:0s}
.egs-scroll-item:nth-child(4n+2) i{animation-delay:.4s}
.egs-scroll-item:nth-child(4n+3) i{animation-delay:.8s}
.egs-scroll-item:nth-child(4n+4) i{animation-delay:1.2s}
@keyframes egsIconDance{
    0%,100%{transform:translateY(0) rotate(0deg)}
    25%{transform:translateY(-4px) rotate(-6deg)}
    50%{transform:translateY(0) rotate(0deg)}
    75%{transform:translateY(-2px) rotate(6deg)}
}
.egs-scroll-item:hover i{
    transform:scale(1.18) rotate(0deg);
    border-color:#ff9d5c;
    box-shadow:0 0 20px -2px rgba(255,122,26,.9);
    animation-play-state:paused;
}
.egs-scroll-item i svg{width:16px;height:16px;stroke:currentColor}
.egs-scroll-item span{
    font-size:13px;font-weight:700;letter-spacing:.2px;
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.egs-scroll-menu:hover .egs-scroll-track{animation-play-state:paused}
.egs-scroll-item:nth-child(3n+1) i{color:#ff5c95;border-color:rgba(255,33,121,.6);background:radial-gradient(circle at 35% 30%,rgba(255,33,121,.35),rgba(20,14,26,1) 70%)}
.egs-scroll-item:nth-child(3n+2) i{color:#d97dff;border-color:rgba(200,26,255,.6);background:radial-gradient(circle at 35% 30%,rgba(200,26,255,.35),rgba(20,14,26,1) 70%)}
.egs-scroll-item:nth-child(3n+3) i{color:#ff9d5c;border-color:rgba(255,122,26,.6);background:radial-gradient(circle at 35% 30%,rgba(255,122,26,.35),rgba(20,14,26,1) 70%)}
.egs-scroll-item:nth-child(3n+1) span{background:linear-gradient(90deg,#ff2179,#ff5c95);-webkit-background-clip:text;background-clip:text;color:transparent}
.egs-scroll-item:nth-child(3n+2) span{background:linear-gradient(90deg,#c81aff,#d97dff);-webkit-background-clip:text;background-clip:text;color:transparent}
.egs-scroll-item:nth-child(3n+3) span{background:linear-gradient(90deg,#ff7a1a,#ffb45c);-webkit-background-clip:text;background-clip:text;color:transparent}
.egs-scroll-item:nth-child(3n+1)::after{background:#ff2179;box-shadow:0 0 8px 1px rgba(255,33,121,.7)}
.egs-scroll-item:nth-child(3n+2)::after{background:#c81aff;box-shadow:0 0 8px 1px rgba(200,26,255,.7)}
.egs-scroll-item:nth-child(3n+3)::after{background:var(--orange)}
@media (max-width:820px){
    .egs-scroll-item{padding:0 20px;gap:9px}
    .egs-scroll-item span{font-size:12px}
    .egs-scroll-track{ animation-duration:55s; }
}
@media (max-width:480px){
    .egs-scroll-item{padding:0 14px;gap:7px}
    .egs-scroll-item i{width:26px;height:26px}
    .egs-scroll-item i svg{width:13px;height:13px}
    .egs-scroll-item span{font-size:11px}
    .egs-scroll-item::after{width:3px;height:3px}
}
/* =================== END HERO INFINITE SCROLL MENU =================== */















/* =========================================================
            COMPANY PAGE SECTION 1 HERO
========================================================= */

.egs-story-hero {
  position: relative;
  min-height: 100vh;
  padding: 150px 24px 90px;

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

  text-align: center;

  background: #000;
  color: #fff;

  overflow: hidden;
  isolation: isolate;
}


/* =========================================================
   AURORA BACKGROUND
========================================================= */

.egs-story-aurora {
  position: absolute;
  inset: -25%;

  z-index: -4;
  pointer-events: none;

  background:
    conic-gradient(
      from 0deg at 30% 30%,
      rgba(239, 63, 112, 0.38),
      transparent 30%,
      transparent 70%,
      rgba(168, 85, 247, 0.28),
      transparent 100%
    ),

    conic-gradient(
      from 180deg at 70% 70%,
      rgba(255, 107, 69, 0.32),
      transparent 35%,
      transparent 75%,
      rgba(239, 63, 112, 0.25),
      transparent 100%
    );

  filter: blur(65px);

  opacity: 0.8;

   animation:
    egsStoryAuroraSpin 24s linear infinite,
    egsAuroraBreath 7s ease-in-out infinite;
}


@keyframes egsStoryAuroraSpin {

  from {
    transform: rotate(0deg) scale(1);
  }

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

}
@keyframes egsAuroraBreath {

  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.85;
  }

}


/* =========================================================
   NOISE
========================================================= */

.egs-story-noise {
  position: absolute;
  inset: 0;

  z-index: -2;
  pointer-events: none;

  background-image:
    radial-gradient(
      rgba(255,255,255,0.035) 1px,
      transparent 1px
    );

  background-size: 3px 3px;

  opacity: 0.5;
}


/* =========================================================
   VIGNETTE
========================================================= */

.egs-story-vignette {
  position: absolute;
  inset: 0;

  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 70% 60% at 50% 45%,
      transparent 25%,
      rgba(0,0,0,0.35) 65%,
      #000 100%
    );
}


/* =========================================================
   INNER
========================================================= */

.egs-story-inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1000px;

  margin: 0 auto;
}


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

.egs-story-badge {
  display: inline-flex;

  align-items: center;
  gap: 9px;

  padding: 9px 18px;

  border-radius: 999px;

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

  border: 1px solid rgba(255,107,69,0.4);

  color: #ff9fbd;

  font-family: 'Poppins', sans-serif;

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

  letter-spacing: 1.5px;

  text-transform: uppercase;

  margin-bottom: 25px;

  backdrop-filter: blur(10px);
}


/* Badge dot */

.egs-story-badge-dot {
  width: 7px;
  height: 7px;

  flex-shrink: 0;

  border-radius: 50%;

  background: linear-gradient(
    135deg,
    #ef3f70,
    #ff6b45,
    #ff9a3d
  );

  box-shadow:
    0 0 8px rgba(255,107,69,0.9),
    0 0 18px rgba(239,63,112,0.5);

  animation: egsStoryDotPulse 1.6s ease-in-out infinite;
}


@keyframes egsStoryDotPulse {

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

  50% {
    transform: scale(0.65);
    opacity: 0.5;
  }

}


/* =========================================================
   TITLE
========================================================= */

.egs-story-title {
  margin: 0 0 20px;

  font-family: 'Poppins', sans-serif;

  font-size: clamp(38px, 5vw, 62px);

  line-height: 1.12;

  font-weight: 800;

  letter-spacing: -1.8px;

  color: #fff;
}


/* Gradient title */

.egs-story-gradient {
  display: inline;

  background: linear-gradient(
    100deg,
    #FF3D78 0%,
    #FF4F70 28%,
    #FF6B5A 55%,
    #FF8550 78%,
    #FF9A3D 100%
  );

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

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

  /* White glow remove */
  filter: none;
  text-shadow: none;
}

/* =========================================
   PREMIUM FLOATING BACKGROUND ORBS
========================================= */

.egs-story-bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -3;
  filter: blur(80px);
  opacity: 0.45;
}

/* Pink orb */

.egs-story-bg-orb.orb-one {
  width: 420px;
  height: 420px;

  top: -160px;
  left: -120px;

  background: radial-gradient(
    circle,
    rgba(255, 61, 120, 0.32),
    transparent 70%
  );

  animation:
    egsOrbFloatOne
    16s ease-in-out infinite;
}


/* Orange orb */

.egs-story-bg-orb.orb-two {
  width: 380px;
  height: 380px;

  right: -120px;
  bottom: -130px;

  background: radial-gradient(
    circle,
    rgba(255, 133, 80, 0.28),
    transparent 70%
  );

  animation:
    egsOrbFloatTwo
    19s ease-in-out infinite;
}


/* Purple/Pink subtle orb */

.egs-story-bg-orb.orb-three {
  width: 260px;
  height: 260px;

  top: 40%;
  left: 45%;

  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.14),
    transparent 70%
  );

  animation:
    egsOrbFloatThree
    13s ease-in-out infinite;
}


/* =========================================
   ORB ANIMATIONS
========================================= */

@keyframes egsOrbFloatOne {

  0%,
  100% {
    transform:
      translate(0, 0)
      scale(1);
  }

  50% {
    transform:
      translate(100px, 70px)
      scale(1.18);
  }

}


@keyframes egsOrbFloatTwo {

  0%,
  100% {
    transform:
      translate(0, 0)
      scale(1);
  }

  50% {
    transform:
      translate(-90px, -60px)
      scale(1.15);
  }

}


@keyframes egsOrbFloatThree {

  0%,
  100% {
    transform:
      translate(0, 0)
      scale(0.9);
  }

  50% {
    transform:
      translate(-50px, 40px)
      scale(1.15);
  }

}


/* =========================================
   PREMIUM LIGHT SWEEP
========================================= */

.egs-story-light-sweep {

  position: absolute;

  top: -30%;
  left: -20%;

  width: 40%;
  height: 160%;

  pointer-events: none;

  z-index: -2;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.025),
    transparent
  );

  transform: rotate(18deg);

  animation:
    egsLightSweep
    12s ease-in-out infinite;
}


@keyframes egsLightSweep {

  0% {
    transform:
      translateX(-100%)
      rotate(18deg);
  }

  45%,
  100% {
    transform:
      translateX(400%)
      rotate(18deg);
  }

}


/* =========================================================
   DESCRIPTION
========================================================= */

.egs-story-description {
  max-width: 640px;

  margin: 0 auto 40px;

  color: #c9c9d6;

  font-family: 'Poppins', sans-serif;

  font-size: 16px;

  line-height: 1.8;
}


/* =========================================================
   STATS CONTAINER
========================================================= */

.egs-story-stats {
  width: 100%;
  max-width: 720px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(130px, 1fr));

  gap: 18px;
}


/* =========================================================
   STAT CARD
========================================================= */

.egs-story-stat {
  --egs-story-color: #ef3f70;

  position: relative;

  padding: 25px 14px 22px;

  border-radius: 18px;

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

  border: 1px solid
    color-mix(
      in srgb,
      var(--egs-story-color) 40%,
      transparent
    );

  backdrop-filter: blur(14px);

  overflow: hidden;

  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.35s ease,
    background 0.35s ease;
}


/* Inner glow */

.egs-story-stat::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 50% 0%,
      var(--egs-story-color),
      transparent 70%
    );

  opacity: 0.14;

  transition: opacity 0.35s ease;

  pointer-events: none;
}


/* Hover */

.egs-story-stat:hover {
  transform:
    translateY(-8px)
    scale(1.035);

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

  box-shadow:
    0 18px 45px -10px
    var(--egs-story-color);
}


.egs-story-stat:hover::before {
  opacity: 0.28;
}


/* =========================================================
   STAT ICON
========================================================= */

.egs-story-stat-icon {
  position: relative;
  z-index: 1;

  width: 44px;
  height: 44px;

  margin: 0 auto 12px;

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

  border-radius: 50%;

  font-size: 19px;

  background:
    radial-gradient(
      circle,
      var(--egs-story-color) 0%,
      transparent 72%
    );

  box-shadow:
    0 0 22px
    var(--egs-story-color);

  animation:
    egsStoryIconFloat 3s ease-in-out infinite;
}


@keyframes egsStoryIconFloat {

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

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

}


/* =========================================================
   NUMBER
========================================================= */

.egs-story-stat-number {
  position: relative;
  z-index: 1;

  display: block;

  color: #fff;

  font-family: 'Poppins', sans-serif;

  font-size: 27px;

  font-weight: 800;

  line-height: 1;

  margin-bottom: 7px;

  text-shadow:
    0 0 22px
    var(--egs-story-color);
}


/* =========================================================
   LABEL
========================================================= */

.egs-story-stat-label {
  position: relative;
  z-index: 1;

  display: block;

  color: #c9c9d6;

  font-family: 'Poppins', sans-serif;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.8px;

  text-transform: uppercase;
}


/* =========================================================
   INDIVIDUAL COLORS
========================================================= */

.egs-story-pink {
  --egs-story-color: #ef3f70;
}

.egs-story-purple {
  --egs-story-color: #a855f7;
}

.egs-story-cyan {
  --egs-story-color: #22d3ee;
}

.egs-story-gold {
  --egs-story-color: #facc15;
}


/* =========================================================
   PARTICLES
========================================================= */
/* =========================================================
   EGS PREMIUM LIGHT PARTICLES
========================================================= */

.egs-story-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}


/* ---------- BASE PARTICLE ---------- */

.egs-story-particle {
  position: absolute;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #ff5f91;

  box-shadow:
    0 0 5px rgba(255,95,145,.95),
    0 0 12px rgba(255,95,145,.7),
    0 0 26px rgba(255,95,145,.35);

  opacity: 0;

  will-change: transform, opacity;

  animation:
    egsPremiumParticle
    var(--particle-speed)
    ease-in-out
    infinite;

  animation-delay: var(--particle-delay);
}


/* ---------- ORANGE PARTICLES ---------- */

.egs-story-particle.orange {

  background: #ff8a55;

  box-shadow:
    0 0 5px rgba(255,138,85,.95),
    0 0 13px rgba(255,138,85,.7),
    0 0 28px rgba(255,138,85,.35);
}


/* ---------- BRIGHT STAR PARTICLES ---------- */

.egs-story-particle.star {

  width: 5px;
  height: 5px;

  background: #fff;

  box-shadow:
    0 0 5px #fff,
    0 0 12px #ff7fa6,
    0 0 28px rgba(255,95,145,.8);

  animation:
    egsPremiumStar
    var(--particle-speed)
    ease-in-out
    infinite;

  animation-delay: var(--particle-delay);
}


/* =========================================================
   FLOATING MOVEMENT
========================================================= */

@keyframes egsPremiumParticle {

  0% {

    transform:
      translate3d(
        0,
        60px,
        0
      )
      scale(.25);

    opacity: 0;

  }

  12% {

    opacity: .75;

  }

  35% {

    transform:
      translate3d(
        var(--particle-x),
        -140px,
        0
      )
      scale(1);

    opacity: 1;

  }

  65% {

    transform:
      translate3d(
        calc(var(--particle-x) * -.5),
        -320px,
        0
      )
      scale(.8);

    opacity: .65;

  }

  85% {

    opacity: .35;

  }

  100% {

    transform:
      translate3d(
        var(--particle-x),
        -600px,
        0
      )
      scale(.1);

    opacity: 0;

  }

}


/* =========================================================
   STAR TWINKLE
========================================================= */

@keyframes egsPremiumStar {

  0% {

    transform:
      translate3d(0,40px,0)
      scale(.2)
      rotate(0deg);

    opacity: 0;

  }

  20% {

    opacity: 1;

  }

  40% {

    transform:
      translate3d(
        var(--particle-x),
        -160px,
        0
      )
      scale(1.5)
      rotate(45deg);

    opacity: 1;

  }

  55% {

    transform:
      translate3d(
        var(--particle-x),
        -230px,
        0
      )
      scale(.7)
      rotate(90deg);

    opacity: .5;

  }

  75% {

    opacity: .9;

  }

  100% {

    transform:
      translate3d(
        var(--particle-x),
        -500px,
        0
      )
      scale(.1)
      rotate(180deg);

    opacity: 0;

  }

}


/* =========================================================
   CROSS GLOW FOR STAR
========================================================= */

.egs-story-particle.star::before,
.egs-story-particle.star::after {

  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  pointer-events: none;

}


/* horizontal light */

.egs-story-particle.star::before {

  width: 22px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.8),
      transparent
    );

}


/* vertical light */

.egs-story-particle.star::after {

  width: 1px;
  height: 22px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(255,255,255,.8),
      transparent
    );

}


/* =========================================================
   VERY SMALL DUST
========================================================= */

.egs-story-particle.dust {

  width: 2px;
  height: 2px;

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

  box-shadow:
    0 0 5px rgba(255,255,255,.6);

  animation-duration: var(--particle-speed);

}


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

@media (max-width: 760px) {

  .egs-story-particle.star {

    width: 4px;
    height: 4px;

  }

}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {

  .egs-story-hero {
    min-height: auto;

    padding:
      130px
      20px
      70px;
  }

  .egs-story-title {
    font-size: clamp(34px, 8vw, 48px);
  }

  .egs-story-description {
    font-size: 14px;

    max-width: 560px;

    margin-bottom: 32px;
  }

  .egs-story-stats {
    grid-template-columns:
      repeat(2, 1fr);

    max-width: 420px;

    gap: 14px;
  }

}


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

@media (max-width: 480px) {

  .egs-story-hero {
    padding:
      115px
      16px
      55px;
  }

  .egs-story-badge {
    font-size: 9px;

    letter-spacing: 1px;

    padding:
      8px
      13px;
  }

  .egs-story-title {
    font-size: 31px;

    line-height: 1.18;

    letter-spacing: -0.8px;
  }

  .egs-story-description {
    font-size: 13px;

    line-height: 1.7;
  }

  .egs-story-stats {
    grid-template-columns:
      repeat(2, 1fr);

    gap: 12px;
  }

  .egs-story-stat {
    padding:
      20px
      10px
      18px;
  }

  .egs-story-stat-number {
    font-size: 23px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .egs-story-aurora,
  .egs-story-badge-dot,
  .egs-story-stat-icon,
  .egs-story-particle {
    animation: none !important;
  }

}

/*========================================================================
                OUR Story
========================================================================*/

/* =========================================================
   EGS ODX - OUR STORY + DIFFERENT
   UNIQUE CLASS PREFIX: egsodx-
========================================================= */

.egsodx-section,
.egsodx-section *{
    box-sizing:border-box;
}

.egsodx-section{
    --egsodx-ink:#2e2740;
    --egsodx-sub:#736a7f;

    --egsodx-pink:#e6396f;
    --egsodx-pink-light:#ff6f91;

    --egsodx-orange:#ff7a3d;
    --egsodx-orange-deep:#e6621f;

    --egsodx-purple:#8a6fe8;
    --egsodx-mint:#00c9a7;
    --egsodx-blue:#4f9eff;

    position:relative;
    overflow:hidden;

    width:100%;

    padding:48px 24px 38px;

    font-family:'Poppins',sans-serif;
    color:var(--egsodx-ink);

    background:
        radial-gradient(circle at 8% 8%,
        rgba(255,111,145,.16),
        transparent 26%),

        radial-gradient(circle at 92% 12%,
        rgba(138,111,232,.15),
        transparent 28%),

        radial-gradient(circle at 8% 92%,
        rgba(0,201,167,.11),
        transparent 28%),

        radial-gradient(circle at 92% 88%,
        rgba(255,122,61,.13),
        transparent 30%),

        linear-gradient(
            155deg,
            #fdf4f6 0%,
            #f4f7fb 48%,
            #f7fbf8 100%
        );
}


/* =========================================================
   BACKGROUND DECORATIONS
========================================================= */

.egsodx-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(75px);
    opacity:.13;
    pointer-events:none;
}

.egsodx-blob-one{
    width:310px;
    height:310px;
    top:-150px;
    left:-120px;
    background:var(--egsodx-pink);
}

.egsodx-blob-two{
    width:280px;
    height:280px;
    bottom:-130px;
    right:-100px;
    background:var(--egsodx-orange);
}

.egsodx-blob-three{
    width:240px;
    height:240px;
    top:38%;
    left:44%;
    background:var(--egsodx-purple);
}


.egsodx-sphere{
    position:absolute;
    border-radius:50%;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 30% 28%,
            #fff,
            var(--egsodx-pink-light) 58%,
            var(--egsodx-pink)
        );

    box-shadow:
        0 10px 25px rgba(230,57,111,.22);
}

.egsodx-sphere-one{
    width:42px;
    height:42px;
    left:4%;
    top:16%;
}

.egsodx-sphere-two{
    width:25px;
    height:25px;
    right:7%;
    top:18%;
    background:
        radial-gradient(circle at 30% 28%,#fff,#ffb27a 55%,#ff7a3d);
}

.egsodx-sphere-three{
    width:18px;
    height:18px;
    left:10%;
    bottom:12%;
    background:
        radial-gradient(circle at 30% 28%,#fff,#7ee8c7 55%,#00a186);
}


.egsodx-diamond{
    position:absolute;
    width:30px;
    height:30px;
    border:2px solid var(--egsodx-pink);
    border-radius:7px;
    transform:rotate(45deg);
    opacity:.8;
}

.egsodx-diamond-one{
    top:12%;
    right:6%;
}

.egsodx-diamond-two{
    bottom:16%;
    right:3%;
    border-color:var(--egsodx-purple);
}


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

.egsodx-container{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1140px;

    margin:0 auto;
}


/* =========================================================
   HEADER - COMPACT
========================================================= */

.egsodx-header{
    max-width:760px;

    margin:0 auto 30px;

    text-align:center;
}


.egsodx-eyebrow{
    display:inline-flex;

    padding:7px 18px;

    margin-bottom:12px;

    border-radius:999px;

    background:#2e2740;

    color:#fff;

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

    letter-spacing:.18em;
}


.egsodx-main-title{
    margin:0 0 10px;

    font-family: 'Poppins',sans-serif;

    font-size:clamp(30px,4vw,48px);
    line-height:1.08;

    color: #000;
    letter-spacing:-.04em;
}


.egsodx-main-title span{
    display:block;

    background:
        linear-gradient(
            100deg,
            var(--egsodx-pink),
            var(--egsodx-orange),
            var(--egsodx-purple)
        );

    background-size:220% auto;

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

    -webkit-text-fill-color:transparent;

    animation:egsodxTitleFlow 5s linear infinite;
}

@keyframes egsodxTitleFlow{
    to{
        background-position:220% center;
    }
}


.egsodx-intro{
    max-width:1220px;

    margin:0 auto;

    color: #000;

    font-size:17px;
    line-height:1.7;
    justify-content: center;
    text-align: center; 
}

.egsodx-intro strong{
    color:var(--egsodx-ink);
}


/* =========================================================
   SHOWCASE
========================================================= */

.egsodx-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
    gap: 26px;
    width: 100%;
}


/* =========================================================
   TIMELINE
========================================================= */

.egsodx-timeline{
    position:relative;

    display:flex;
    flex-direction:column;

    gap:10px;

    justify-content:center;
}

.egsodx-timeline::before{
    content:"";

    position:absolute;

    left:31px;
    top:28px;
    bottom:28px;

    width:2px;

    background:
        linear-gradient(
            180deg,
            var(--egsodx-pink),
            var(--egsodx-orange),
            var(--egsodx-mint)
        );

    opacity:.35;
}


.egsodx-milestone{
    position:relative;

    display:flex;
    align-items:center;

    gap:13px;

    min-height:92px;

    padding:12px 16px 12px 12px;

    border-radius:18px;

    overflow:hidden;

    cursor:pointer;

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

    border:1px solid rgba(46,39,64,.08);

    box-shadow:
        0 8px 22px rgba(80,50,80,.06);

    opacity:0;

    transform:translateY(18px);

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        opacity .6s ease;
}

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


.egsodx-milestone:hover{
    transform:translateX(4px);
}


.egsodx-milestone.egsodx-active{
    background:
        linear-gradient(
            115deg,
            var(--egsodx-pink),
            var(--egsodx-orange)
        );

    border-color:transparent;

    box-shadow:
        0 13px 28px rgba(230,85,26,.2);
}


.egsodx-milestone-icon{
    position:relative;
    z-index:2;

    width:48px;
    height:48px;

    flex-shrink:0;

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

    border-radius:13px;

    font-size:21px;

    background:
        linear-gradient(
            135deg,
            rgba(230,57,111,.13),
            rgba(255,122,61,.14)
        );
}

.egsodx-active .egsodx-milestone-icon{
    background:rgba(255,255,255,.22);
}
/*============================
   images for our story 
============================*/
.egsodx-visual-photo {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.egsodx-visual-photo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    display: block;
}



.egsodx-milestone-content{
    position:relative;
    z-index:2;

    flex:1;
}

.egsodx-year{
    display:block;

    margin-bottom:2px;

    color: maroon;

    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
}

.egsodx-milestone h3{
    margin:0 0 3px;

    font-size:15px;
    line-height:1.25;

    font-weight:700;
}

.egsodx-milestone p{
    margin:0;

    color: #000;

    font-size:12.5px;
    line-height:1.45;
}


.egsodx-active .egsodx-year,
.egsodx-active h3{
    color:#fff;
}

.egsodx-active p{
    color:rgba(255,255,255,.9);
}


.egsodx-milestone-arrow{
    position:relative;
    z-index:2;

    font-size:24px;

    color:var(--egsodx-pink);

    transition:transform .3s ease;
}

.egsodx-active .egsodx-milestone-arrow{
    color:#fff;
}

.egsodx-milestone:hover .egsodx-milestone-arrow{
    transform:translateX(5px);
}


.egsodx-item-progress{
    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:3px;

    background:rgba(255,255,255,.9);
}

.egsodx-active.egsodx-autoplay
.egsodx-item-progress{
    animation:egsodxProgress 3.4s linear forwards;
}

@keyframes egsodxProgress{
    from{width:0;}
    to{width:100%;}
}


/* =========================================================
   RIGHT VISUAL - REDUCED HEIGHT
========================================================= */

.egsodx-visual{
    position:relative;
    display:flex;
    align-items:flex-end;
    width: 100%;
    height: 480px;
    overflow: hidden;
    /*aspect-ratio: 12.7 / 8.5;*/
    border-radius:22px;
    background:var(--egsodx-visual-bg);
    box-shadow:
        0 20px 42px rgba(80,50,60,.17);
    transition:background .45s ease;
}


.egsodx-visual-pattern{
    position:absolute;
    inset:0;

    opacity:.12;

    background-image:
        radial-gradient(
            rgba(255,255,255,.8) 1px,
            transparent 1px
        );

    background-size:12px 12px;
}


.egsodx-visual-icon{
    position:absolute;

    top:42%;
    left:50%;

    transform:translate(-50%,-50%);

    font-size:105px;

    filter:drop-shadow(0 10px 20px rgba(0,0,0,.16));

    animation:egsodxIconFloat 3s ease-in-out infinite;
}

@keyframes egsodxIconFloat{
    50%{
        transform:
            translate(-50%,-56%)
            scale(1.05);
    }
}


.egsodx-visual-caption{
    position:relative;
    z-index:2;

    width:100%;

    padding:20px 22px 17px;

    text-align:center;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.6),
            rgba(0,0,0,.15),
            transparent
        );
}

.egsodx-visual-caption > span{
    color:#ffe14d;

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

    letter-spacing:.12em;
}

.egsodx-visual-caption h3{
    margin:6px 0;

    color:#fff;

    font-size:18px;
}

.egsodx-visual-caption p{
    max-width:430px;

    margin:0 auto;

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

    font-size:11.5px;
    line-height:1.55;
}


.egsodx-dots{
    display:flex;
    justify-content:center;

    gap:7px;

    margin-top:12px;
}

.egsodx-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:rgba(255,255,255,.4);
}

.egsodx-dot-active{
    background:var(--egsodx-pink-light);
}


/* =========================================================
   WHAT MAKES DIFFERENT - COMPACT
========================================================= */

.egsodx-different-section{
    position:relative;

    padding-top:8px;

    text-align:center;
}


.egsodx-different-head{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:18px;
}


.egsodx-small-line{
    width:55px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--egsodx-pink)
        );
}

.egsodx-small-line:last-child{
    background:
        linear-gradient(
            90deg,
            var(--egsodx-orange),
            transparent
        );
}


.egsodx-different-label{
    display:block;

    margin-bottom:3px;

    color:var(--egsodx-pink);

    font-size:10px;
    font-weight:800;

    letter-spacing:.2em;
}


.egsodx-different-head h2{
    margin:0;

    font-family:'Space Grotesk',sans-serif;

    font-size:clamp(25px,3.3vw,38px);

    line-height:1.1;
}

.egsodx-different-head h2 span{
    background:
        linear-gradient(
            90deg,
            var(--egsodx-pink),
            var(--egsodx-orange)
        );

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

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


.egsodx-different-sub{
    margin:8px 0 23px;

    color: maroon;

    font-size:14px;
}


/* =========================================================
   DIFFERENT CARDS - COMPACT
========================================================= */

.egsodx-different-cards{
    display:grid;

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

    gap:12px;

    align-items:stretch;
}


.egsodx-different-card{
    --egsodx-card-color:var(--egsodx-pink);

    position:relative;

    min-height:214px;

    padding:18px 15px 15px;

    overflow:hidden;

    text-align:left;

    border-radius:18px;

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

    border:
        3px solid
        color-mix(
            in srgb,
            var(--egsodx-card-color) 45%,
            transparent
        );

    box-shadow:
        0 10px 24px
        rgba(50,40,70,.06);

    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .6s ease,
        transform .35s ease,
        box-shadow .35s ease;
}


.egsodx-different-card.egsodx-card-visible{
    opacity:1;
    transform:translateY(0);
}


.egsodx-different-card:hover{
    transform:
        translateY(-7px)
        scale(1.015);

    box-shadow:
        0 18px 34px
        color-mix(
            in srgb,
            var(--egsodx-card-color) 20%,
            transparent
        );
}


.egsodx-card-pink{
    --egsodx-card-color:#e6396f;
}

.egsodx-card-purple{
    --egsodx-card-color:#8a6fe8;
}

.egsodx-card-mint{
    --egsodx-card-color:#00a98f;
}

.egsodx-card-orange{
    --egsodx-card-color:#ff7a3d;
}

.egsodx-card-blue{
    --egsodx-card-color:#4f9eff;
}


.egsodx-card-number{
    position:absolute;

    top:10px;
    right:12px;

    color:var(--egsodx-card-color);

    font-family:'Space Grotesk',sans-serif;

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

    opacity:.22;
}


.egsodx-card-icon{
    width:40px;
    height:40px;

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

    margin-bottom:13px;

    border-radius:12px;

    background:
        color-mix(
            in srgb,
            var(--egsodx-card-color) 15%,
            white
        );

    font-size:19px;
}


.egsodx-different-card h3{
    margin:0 0 7px;

    font-size:15px;
    line-height:1.3;
}

.egsodx-different-card p{
    margin:0;

    color: #000;

    font-size:12.5px;
    line-height:1.55;
}


.egsodx-card-arrow{
    position:absolute;

    left:15px;
    bottom:13px;

    width:25px;
    height:25px;

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

    border-radius:50%;

    background:var(--egsodx-card-color);

    color:#fff;

    font-size:13px;

    transition:transform .3s ease;
}

.egsodx-different-card:hover
.egsodx-card-arrow{
    transform:translateX(5px);
}


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

.egsodx-footer-line{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:14px;

    margin-top:26px;
}

.egsodx-footer-line span{
    width:55px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--egsodx-pink)
        );
}

.egsodx-footer-line span:last-child{
    background:
        linear-gradient(
            90deg,
            var(--egsodx-orange),
            transparent
        );
}

.egsodx-footer-line p{
    margin:0;

    color: maroon;

    font-size:13px;
}

.egsodx-footer-line b{
    color:var(--egsodx-pink);
}

/* =========================================================
   EGSODX - PREMIUM FULL ANIMATED MESH BACKGROUND
========================================================= */

.egsodx-section,
.egsodx-section *{
    box-sizing:border-box;
}

.egsodx-section{
    position:relative;
    width:100%;
    overflow:hidden;
    isolation:isolate;

    padding:70px 24px 65px;

    /* MAIN FULL BACKGROUND */
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(255, 74, 137, .32) 0%,
            transparent 26%
        ),
        radial-gradient(
            circle at 88% 8%,
            rgba(131, 92, 255, .28) 0%,
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 75%,
            rgba(255, 126, 70, .28) 0%,
            transparent 30%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(0, 210, 170, .22) 0%,
            transparent 28%
        ),
        radial-gradient(
            circle at 52% 45%,
            rgba(94, 165, 255, .18) 0%,
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #fff1f6 0%,
            #f7f0ff 22%,
            #edf4ff 45%,
            #effcf7 68%,
            #fff3eb 100%
        );

    background-size:
        160% 160%,
        180% 180%,
        170% 170%,
        180% 180%,
        150% 150%,
        100% 100%;

    animation:
        egsodxFullBgFlow 20s ease-in-out infinite;
}


/* =========================================================
   FULL BACKGROUND COLOR FLOW
========================================================= */

@keyframes egsodxFullBgFlow{

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

    25%{
        background-position:
            18% 12%,
            82% 15%,
            88% 82%,
            10% 85%,
            60% 40%,
            0% 0%;
    }

    50%{
        background-position:
            35% 25%,
            65% 30%,
            70% 65%,
            25% 70%,
            40% 60%,
            0% 0%;
    }

    75%{
        background-position:
            15% 35%,
            85% 22%,
            82% 78%,
            18% 72%,
            58% 45%,
            0% 0%;
    }
}


/* =========================================================
   LARGE MOVING AURORA LAYER
========================================================= */

.egsodx-section::before{
    content:"";

    position:absolute;
    inset:-35%;

    pointer-events:none;
    z-index:-1;

    background:
        radial-gradient(
            ellipse at 20% 20%,
            rgba(255, 82, 145, .30),
            transparent 32%
        ),
        radial-gradient(
            ellipse at 75% 18%,
            rgba(128, 94, 255, .25),
            transparent 35%
        ),
        radial-gradient(
            ellipse at 80% 75%,
            rgba(255, 133, 79, .25),
            transparent 32%
        ),
        radial-gradient(
            ellipse at 25% 80%,
            rgba(0, 202, 166, .20),
            transparent 35%
        );

    filter:blur(65px);

    opacity:.9;

    animation:
        egsodxAuroraMove 22s
        ease-in-out
        infinite alternate;
}


@keyframes egsodxAuroraMove{

    0%{
        transform:
            translate3d(-4%,-3%,0)
            rotate(-4deg)
            scale(1);
    }

    50%{
        transform:
            translate3d(5%,3%,0)
            rotate(5deg)
            scale(1.1);
    }

    100%{
        transform:
            translate3d(-2%,6%,0)
            rotate(-2deg)
            scale(1.04);
    }
}


/* =========================================================
   ANIMATED SOFT LIGHT LAYER
========================================================= */

.egsodx-section::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    z-index:0;

    background:
        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255,255,255,.18) 40%,
            rgba(255,255,255,.55) 50%,
            rgba(255,255,255,.18) 60%,
            transparent 80%
        );

    width:70%;

    transform:
        translateX(-150%)
        skewX(-18deg);

    animation:
        egsodxLightSweep
        13s ease-in-out infinite;
}


@keyframes egsodxLightSweep{

    0%,30%{
        transform:
            translateX(-160%)
            skewX(-18deg);
    }

    70%,100%{
        transform:
            translateX(260%)
            skewX(-18deg);
    }
}


/* =========================================================
   CONTENT ALWAYS ABOVE BACKGROUND
========================================================= */

.egsodx-container{
    position:relative;
    z-index:5;

    width:100%;
    max-width:1180px;

    margin:0 auto;
}


/* =========================================================
   FLOATING COLOR BLOBS
========================================================= */

.egsodx-blob{
    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(75px);

    opacity:.32;

    z-index:1;

    animation:
        egsodxBlobFloat
        ease-in-out
        infinite;
}


.egsodx-blob-one{
    width:400px;
    height:400px;

    top:-130px;
    left:-150px;

    background:
        radial-gradient(
            circle,
            #ff5d98 0%,
            rgba(255,93,152,.45) 42%,
            transparent 72%
        );

    animation-duration:18s;
}


.egsodx-blob-two{
    width:380px;
    height:380px;

    top:30%;
    right:-190px;

    background:
        radial-gradient(
            circle,
            #9470ff 0%,
            rgba(148,112,255,.40) 45%,
            transparent 72%
        );

    animation-duration:22s;
    animation-delay:-7s;
}


.egsodx-blob-three{
    width:420px;
    height:420px;

    bottom:-190px;
    left:35%;

    background:
        radial-gradient(
            circle,
            #ff965c 0%,
            rgba(255,150,92,.35) 42%,
            rgba(0,210,170,.18) 65%,
            transparent 75%
        );

    animation-duration:25s;
    animation-delay:-12s;
}


@keyframes egsodxBlobFloat{

    0%,100%{
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    33%{
        transform:
            translate3d(55px,35px,0)
            scale(1.1);
    }

    66%{
        transform:
            translate3d(-30px,70px,0)
            scale(.94);
    }
}


/* =========================================================
   FLOATING SPHERES
========================================================= */

.egsodx-sphere{
    position:absolute;

    border-radius:50%;

    pointer-events:none;

    z-index:2;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.55) 12%,
            var(--egsodx-sphere-color) 48%,
            var(--egsodx-sphere-deep) 100%
        );

    box-shadow:
        0 15px 30px rgba(90,70,120,.15),
        inset -5px -7px 12px rgba(0,0,0,.12),
        inset 4px 5px 8px rgba(255,255,255,.35);

    animation:
        egsodxSphereFloat
        ease-in-out
        infinite;
}


.egsodx-sphere-one{
    width:48px;
    height:48px;

    top:9%;
    left:5%;

    --egsodx-sphere-color:#ff709e;
    --egsodx-sphere-deep:#dc3f70;

    animation-duration:8s;
}


.egsodx-sphere-two{
    width:34px;
    height:34px;

    top:18%;
    right:7%;

    --egsodx-sphere-color:#9d7cff;
    --egsodx-sphere-deep:#7050d9;

    animation-duration:11s;
    animation-delay:-3s;
}


.egsodx-sphere-three{
    width:25px;
    height:25px;

    bottom:12%;
    left:10%;

    --egsodx-sphere-color:#54dfbd;
    --egsodx-sphere-deep:#16a582;

    animation-duration:9s;
    animation-delay:-5s;
}


@keyframes egsodxSphereFloat{

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

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


/* =========================================================
   FLOATING GRADIENT DIAMONDS
========================================================= */

.egsodx-diamond{
    position:absolute;

    pointer-events:none;

    z-index:2;

    border-radius:9px;

    background:
        linear-gradient(
            135deg,
            #ff6f9d,
            #8d70ff 50%,
            #ff9a5c
        );

    box-shadow:
        0 12px 25px rgba(120,80,170,.20);

    animation:
        egsodxDiamondFloat
        ease-in-out
        infinite;
}


.egsodx-diamond-one{
    width:42px;
    height:42px;

    top:42%;
    right:4%;

    animation-duration:10s;
}


.egsodx-diamond-two{
    width:24px;
    height:24px;

    top:22%;
    left:42%;

    background:
        linear-gradient(
            135deg,
            #7c6cff,
            #55b7ff
        );

    animation-duration:13s;
    animation-delay:-4s;
}


@keyframes egsodxDiamondFloat{

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

    50%{
        transform:
            rotate(135deg)
            translateY(-20px);
    }
}


/* =========================================================
   MOBILE BACKGROUND OPTIMIZATION
========================================================= */

@media(max-width:768px){

    .egsodx-section{
        padding:50px 16px;
    }

    .egsodx-blob-one{
        width:280px;
        height:280px;
    }

    .egsodx-blob-two{
        width:260px;
        height:260px;
    }

    .egsodx-blob-three{
        width:280px;
        height:280px;
    }

    .egsodx-section::before{
        filter:blur(45px);
    }

    .egsodx-diamond-one{
        right:-10px;
    }

    .egsodx-sphere-one{
        left:-10px;
    }
}


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

    .egsodx-section,
    .egsodx-section::before,
    .egsodx-section::after,
    .egsodx-blob,
    .egsodx-sphere,
    .egsodx-diamond{
        animation:none !important;
    }

}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:980px){

    .egsodx-section{
        padding:44px 20px 36px;
    }

    .egsodx-showcase{
        gap:18px;
    }

    .egsodx-different-cards{
        grid-template-columns:repeat(3,1fr);
    }

    .egsodx-different-card{
        min-height:205px;
    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width:760px){

    .egsodx-section{
        padding:38px 16px 32px;
    }

    .egsodx-header{
        margin-bottom:25px;
    }

    .egsodx-showcase{
        grid-template-columns:1fr;

        margin-bottom:32px;
    }

    .egsodx-visual{
        min-height:300px;
        order:-1;
    }

    .egsodx-timeline{
        gap:9px;
    }

    .egsodx-milestone{
        min-height:84px;
    }

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

}


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

@media(max-width:520px){

    .egsodx-main-title{
        font-size:30px;
    }

    .egsodx-intro{
        font-size:12px;
        line-height:1.65;
    }

    .egsodx-showcase{
        gap:15px;
    }

    .egsodx-visual{
        min-height:255px;
    }

    .egsodx-visual-icon{
        font-size:78px;
    }

    .egsodx-visual-caption{
        padding:16px 14px;
    }

    .egsodx-visual-caption h3{
        font-size:15px;
    }

    .egsodx-visual-caption p{
        font-size:10.5px;
    }

    .egsodx-milestone{
        gap:10px;

        padding:10px;

        min-height:78px;
    }

    .egsodx-milestone-icon{
        width:42px;
        height:42px;

        font-size:18px;
    }

    .egsodx-milestone h3{
        font-size:11.5px;
    }

    .egsodx-milestone p{
        font-size:9.5px;
    }

    .egsodx-milestone-arrow{
        font-size:19px;
    }

    .egsodx-different-head{
        gap:9px;
    }

    .egsodx-small-line{
        width:25px;
    }

    .egsodx-different-head h2{
        font-size:27px;
    }

    .egsodx-different-label{
        font-size:8px;
        letter-spacing:.13em;
    }

    .egsodx-different-sub{
        margin-bottom:18px;
        font-size:11px;
    }

    .egsodx-different-cards{
        gap:10px;
    }

    .egsodx-different-card{
        min-height:205px;

        padding:15px 12px;
    }

    .egsodx-different-card h3{
        font-size:12px;
    }

    .egsodx-different-card p{
        font-size:9.5px;
    }

    .egsodx-footer-line{
        gap:7px;
        margin-top:22px;
    }

    .egsodx-footer-line span{
        width:25px;
    }

    .egsodx-footer-line p{
        font-size:9px;
        text-align:center;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:360px){

    .egsodx-different-cards{
        grid-template-columns:1fr;
    }

    .egsodx-different-card{
        min-height:180px;
    }

}



/* =========================================================
   PREMIUM VISION & MISSION
========================================================= */



  body{ background:#000; overflow-x:hidden; }

  #xqv-egs-vm-section{ position:relative; padding:70px 10px 70px; overflow:hidden; }

  .xqv-egs-vm-aurora {
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background: #000;

    filter: blur(45px);
    animation: xqvEgsVmAuroraMove 18s ease-in-out infinite alternate;
}
 @keyframes xqvEgsVmAuroraMove {

    0% {
        transform: translate3d(-3%, -2%, 0) scale(1);
    }

    25% {
        transform: translate3d(4%, -4%, 0) scale(1.08);
    }

    50% {
        transform: translate3d(2%, 5%, 0) scale(1.12);
    }

    75% {
        transform: translate3d(-5%, 3%, 0) scale(1.06);
    }

    100% {
        transform: translate3d(3%, -2%, 0) scale(1.12);
    }
}

  .xqv-egs-vm-heading{ text-align:center; margin-bottom:60px; position:relative; z-index:2; }
  .xqv-egs-vm-eyebrow{
    display:inline-block; font-size:16px; font-weight:800; letter-spacing:3px;
    color:#ff9dc4; text-transform:uppercase; margin-bottom:14px;
    padding:6px 16px; border:1px solid rgba(255,143,120,.35); border-radius:999px;
    background:rgba(255,255,255,.03);
  }
  .xqv-egs-vm-title{ font-size:38px; font-weight:900; color:#fff; }
  .xqv-egs-vm-title .xqv-egs-vm-accent{
    background:linear-gradient(120deg,#ec2f7b,#ff8f4d,#facc15,#ff8f4d,#ec2f7b);
    background-size:250% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:xqv-egs-vm-text-shimmer 5s linear infinite;
  }
  @keyframes xqv-egs-vm-text-shimmer{ to{ background-position:-250% center; } }
  .xqv-egs-vm-intro{ color:#fff; font-size:15.5px; margin-top:16px; max-width:520px; margin-left:auto; margin-right:auto; line-height:1.8; }

  /* vision + mission cards */
  .xqv-egs-vm-duo{
    position:relative; z-index:2;
    max-width:900px; margin:0 auto 40px;
    display:grid; grid-template-columns:1fr 1fr;
    gap:22px;
  }
  @media (max-width:700px){ .xqv-egs-vm-duo{ grid-template-columns:1fr; } }

  .xqv-egs-vm-duo-card{
    position:relative;
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(16px);
    border:1.5px solid color-mix(in srgb, var(--c,#ec2f7b) 40%, transparent);
    border-radius:24px;
    padding:34px 28px;
    overflow:hidden;
    opacity:0; transform:translateY(30px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  }
  .xqv-egs-vm-duo-card.xqv-egs-vm-visible{ opacity:1; transform:translateY(0); }
  .xqv-egs-vm-duo-card:hover{ box-shadow:0 20px 50px -16px rgba(0,0,0,.35); }
  .xqv-egs-vm-duo-card::before{
    content:"";
    position:absolute; top:-40px; right:-40px;
    width:130px; height:130px; border-radius:50%;
    background:radial-gradient(circle, var(--c,#ec2f7b), transparent 70%);
    opacity:.15;
  }
  .xqv-egs-vm-duo-icon{
    width:52px; height:52px; border-radius:15px;
    background:linear-gradient(135deg, var(--c,#ec2f7b), var(--c2,#ff8f4d));
    display:flex; align-items:center; justify-content:center;
    font-size:24px; margin-bottom:18px;
    box-shadow:0 10px 24px -8px var(--c, rgba(236,47,123,.5));
    position:relative; z-index:1;
    transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  .xqv-egs-vm-duo-card:hover .xqv-egs-vm-duo-icon{ transform:rotate(-6deg) scale(1.08); }
  .xqv-egs-vm-duo-card h3{ color:#fff; font-size:19px; font-weight:800; margin-bottom:12px; position:relative; z-index:1; }
  .xqv-egs-vm-duo-card p{ color: whitesmoke; font-size:14px; line-height:1.85; position:relative; z-index:1; text-align:justify; }
  .xqv-egs-vm-duo-card.xqv-egs-vm-vision{ --c:#ec2f7b; --c2:#ff6ba8; }
  .xqv-egs-vm-duo-card.xqv-egs-vm-mission{ --c:#ff8f4d; --c2:#ffc266; }

  /* motto strip */
  .xqv-egs-vm-motto{
    position:relative; z-index:2;
    max-width:900px; margin:0 auto 40px;
    text-align:center;
    padding:20px 24px;
    border-radius:16px;
    background:linear-gradient(135deg, rgba(236,47,123,.1), rgba(255,143,77,.08));
    border:1px solid rgba(255,143,120,.2);
    color:#fff; font-size:13px; font-weight:600; letter-spacing:.5px;
    opacity:0; transform:scale(.96);
    transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .xqv-egs-vm-motto.xqv-egs-vm-visible{ opacity:1; transform:scale(1); }
  .xqv-egs-vm-motto span{ color:#ff9dc4; margin:0 6px; }

  /* pillars */
  .xqv-egs-vm-pillars-heading{ text-align:center; margin-bottom:26px; position:relative; z-index:2; }
  .xqv-egs-vm-pillars-heading h4{ color:#fff; font-size:20px; font-weight:800; }
  .xqv-egs-vm-pillars-heading h4 .xqv-egs-vm-accent-warm{ color:#ff9dc4; }

  .xqv-egs-vm-pillars{
    position:relative; z-index:2;
    max-width:1000px; margin:0 auto;
    display:grid; grid-template-columns:repeat(5, 1fr);
    gap:16px;
  }
  @media (max-width:900px){ .xqv-egs-vm-pillars{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .xqv-egs-vm-pillars{ grid-template-columns:1fr; } }

  .xqv-egs-vm-pillar{
    position:relative;
    background:rgba(255,255,255,.03);
    border:1.5px solid color-mix(in srgb, var(--pc,#ec2f7b) 45%, transparent);
    border-radius:16px;
    padding:20px 16px;
    text-align:center;
    opacity:0; transform:translateY(24px) scale(.95);
    transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  }
  .xqv-egs-vm-pillar.xqv-egs-vm-visible{ opacity:1; transform:translateY(0) scale(1); }
  .xqv-egs-vm-pillar:hover{ box-shadow:0 16px 36px -16px rgba(0,0,0,.3); transform:translateY(-4px); }
  .xqv-egs-vm-pillar-icon{ font-size:24px; margin-bottom:10px; }
  .xqv-egs-vm-pillar h5{ color:#fff; font-size:15.5px; font-weight:800; margin-bottom:6px; letter-spacing:.3px; }
  .xqv-egs-vm-pillar p{ color:#fff; font-size:14px; line-height:1.6; }

  .xqv-egs-vm-pillar:nth-child(1){ --pc:#ec2f7b; }
  .xqv-egs-vm-pillar:nth-child(2){ --pc:#a855f7; }
  .xqv-egs-vm-pillar:nth-child(3){ --pc:#22d3ee; }
  .xqv-egs-vm-pillar:nth-child(4){ --pc:#facc15; }
  .xqv-egs-vm-pillar:nth-child(5){ --pc:#ff8f4d; }

  /* ---------- core values ---------- */
  .xqv-egs-vm-values-heading{ text-align:center; margin:70px 0 26px; position:relative; z-index:2; }
  .xqv-egs-vm-values-heading h4{ color:#fff; font-size:28px; font-weight:800; }
  .xqv-egs-vm-values-heading h4 .xqv-egs-vm-accent-cool{
    background:linear-gradient(120deg,#22d3ee,#a855f7,#22d3ee);
    background-size:220% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:xqv-egs-vm-text-shimmer 5s linear infinite;
  }
  .xqv-egs-vm-values-intro{ color: wheat; font-size:20px; margin-top:8px; }

  .xqv-egs-vm-values{
    position:relative; z-index:2;
    max-width:1000px; margin:0 auto;
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:20px;
  }
/* Vision & Mission — section-only dark background */
#xqv-egs-vm-section {
  position: relative;
  isolation: isolate;
  
  padding: 70px 4px 80px;
  overflow: hidden;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(236, 47, 123, 0.18),
      transparent 38%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(255, 143, 77, 0.14),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      #120812 0%,
      #090711 48%,
      #110713 100%
    ) !important;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0px;

  box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#xqv-egs-vm-section .xqv-egs-vm-aurora {
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 30% 35%,
      rgba(236, 47, 123, 0.22),
      transparent 35%
    ),
    radial-gradient(
      circle at 70% 60%,
      rgba(168, 85, 247, 0.18),
      transparent 38%
    ),
    radial-gradient(
      circle at 50% 80%,
      rgba(255, 143, 77, 0.15),
      transparent 35%
    );

  filter: blur(45px);
  animation: xqvEgsVmAuroraMove 12s ease-in-out infinite;
}

@keyframes xqvEgsVmAuroraMove {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(4%, -3%, 0) scale(1.1);
  }
}

#xqv-egs-vm-section > *:not(.xqv-egs-vm-aurora) {
  position: relative;
  z-index: 1;
}

  @media (max-width:760px){ .xqv-egs-vm-values{ grid-template-columns:1fr; } }

  @media (max-width:760px){
    #xqv-egs-vm-section{ padding:70px 18px 80px; }
    .xqv-egs-vm-title{ font-size:28px; }
    .xqv-egs-vm-intro{ font-size:13px; }
    .xqv-egs-vm-duo-card{ padding:26px 20px; }
    .xqv-egs-vm-duo-card h3{ font-size:16px; }
    .xqv-egs-vm-duo-card p{ font-size:13px; }
    .xqv-egs-vm-motto{ font-size:11.5px; padding:16px 18px; }
    .xqv-egs-vm-pillars-heading h4{ font-size:17px; }
    .xqv-egs-vm-values-heading{ margin-top:50px; }
    .xqv-egs-vm-values-heading h4{ font-size:17px; }
    .xqv-egs-vm-value-card{ padding:20px 18px; }
  }
  @media (max-width: 768px) {
  #xqv-egs-vm-section {
   
    padding: 45px 18px;
  }
}
  @media (max-width:420px){
    .xqv-egs-vm-title{ font-size:24px; }
    .xqv-egs-vm-eyebrow{ font-size:10.5px; padding:5px 12px; }
    .xqv-egs-vm-duo-icon{ width:44px; height:44px; font-size:20px; }
    .xqv-egs-vm-pillar{ padding:16px 12px; }
    .xqv-egs-vm-value-card{ flex-direction:column; text-align:center; align-items:center; }
  }

  .xqv-egs-vm-value-card{
    position:relative;
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(14px);
    border:1.5px solid color-mix(in srgb, var(--vc,#22d3ee) 40%, transparent);
    border-radius:18px;
    padding:26px 22px;
    display:flex; gap:16px; align-items:flex-start;
    opacity:0; transform:translateX(-24px);
    transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  }
  .xqv-egs-vm-value-card:nth-child(even){ transform:translateX(24px); }
  .xqv-egs-vm-value-card.xqv-egs-vm-visible{ opacity:1; transform:translateX(0); }
  .xqv-egs-vm-value-card:hover{ box-shadow:0 16px 36px -16px rgba(0,0,0,.3); transform:translateY(-4px); }

  .xqv-egs-vm-value-icon{
    width:46px; height:46px; border-radius:13px; flex-shrink:0;
    background:linear-gradient(135deg, var(--vc,#22d3ee), var(--vc2,#67e8f9));
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
    box-shadow:0 8px 20px -6px var(--vc, rgba(34,211,238,.5));
  }
  .xqv-egs-vm-value-card h5{ color:#fff; font-size:18.5px; font-weight:800; margin-bottom:6px; }
  .xqv-egs-vm-value-card p{ color: whitesmoke; font-size:15px; line-height:1.7; }

  .xqv-egs-vm-value-card.xqv-egs-vm-value-1{ --vc:#ec2f7b; --vc2:#ff6ba8; }
  .xqv-egs-vm-value-card.xqv-egs-vm-value-2{ --vc:#ff8f4d; --vc2:#ffc266; }
  .xqv-egs-vm-value-card.xqv-egs-vm-value-3{ --vc:#a855f7; --vc2:#c9a6fb; }
  .xqv-egs-vm-value-card.xqv-egs-vm-value-4{ --vc:#22d3ee; --vc2:#67e8f9; }
  .xqv-egs-vm-value-card.xqv-egs-vm-value-5{ --vc:#facc15; --vc2:#fde68a; }
  .xqv-egs-vm-value-card.xqv-egs-vm-value-6{ --vc:#ec2f7b; --vc2:#a855f7; }

/* Vision Mission mobile cards fix */
@media (max-width: 760px) {
  .xqv-egs-vm-duo {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .xqv-egs-vm-duo-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .xqv-egs-vm-motto,
  .xqv-egs-vm-pillar,
  .xqv-egs-vm-value-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}








/*===================================================================================================
                     Global Presents Elshaddai
===================================================================================================*/

#egsGpxSection{
  --egs-gpx-pink:#e6266b;
  --egs-gpx-pink-soft:#f2a7c3;
  --egs-gpx-ink:#101426;
  --egs-gpx-muted:#4b5568;
  --egs-gpx-bg:#faf7f5;
  --egs-gpx-card:#ffffff;
}

#egsGpxSection,
#egsGpxSection *{box-sizing:border-box;}

.egs-gpx-shell{
  font-family:"Poppins",system-ui,sans-serif;
  background: white;
  background-size:300% 300%;
  animation:egsGpxGradientWave 14s ease-in-out infinite;
  color:var(--egs-gpx-ink);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:56px 40px 64px;
}
@keyframes egsGpxGradientWave{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.egs-gpx-bg-mesh{
  position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,183,130,.28), transparent 42%),
    radial-gradient(circle at 88% 15%, rgba(255,214,170,.30), transparent 42%),
    radial-gradient(circle at 25% 88%, rgba(255,196,148,.24), transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(240,124,38,.16), transparent 45%),
    radial-gradient(circle at 55% 45%, rgba(255,224,189,.20), transparent 55%);
  filter:blur(60px);
  animation:egsGpxMeshMove 15s ease-in-out infinite;
  z-index:0;
  pointer-events:none;
}
@keyframes egsGpxMeshMove{
  0%{ transform:translate(0,0) scale(1) rotate(0deg); }
  33%{ transform:translate(-30px,25px) scale(1.12) rotate(3deg); }
  66%{ transform:translate(25px,-20px) scale(1.06) rotate(-3deg); }
  100%{ transform:translate(0,0) scale(1) rotate(0deg); }
}
.egs-gpx-bg-orb{
  position:absolute; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none;
  animation:egsGpxOrbFloat 9s ease-in-out infinite;
}
.egs-gpx-bg-orb-one{ width:220px; height:220px; background:rgba(255,183,130,.16); top:8%; right:6%; }
.egs-gpx-bg-orb-two{ width:180px; height:180px; background:rgba(255,214,170,.16); bottom:10%; left:6%; animation-delay:-4s; }
@keyframes egsGpxOrbFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(20px,-22px) scale(1.15); } }

/* mouse-follow egs-gpx-spotlight */
.egs-gpx-spotlight{
  position:absolute; top:0; left:0;
  width:500px; height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,183,130,.14), transparent 70%);
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:1;
  opacity:0;
  transition:opacity .4s ease;
}
.egs-gpx-spotlight.egs-gpx-is-active{ opacity:1; }

/* ambient floating particles */
.egs-gpx-particle{
  position:absolute;
  width:3px; height:3px; border-radius:50%;
  background:var(--egs-gpx-particle-color, #e6266b);
  box-shadow:0 0 6px 1px var(--egs-gpx-particle-color, #e6266b);
  opacity:0;
  z-index:1; pointer-events:none;
  animation:egsGpxAmbientRise linear infinite;
}
@keyframes egsGpxAmbientRise{
  0%{ transform:translateY(0); opacity:0; }
  10%{ opacity:.4; }
  90%{ opacity:.4; }
  100%{ transform:translateY(-1200px); opacity:0; }
}

.egs-gpx-shell > :not(.egs-gpx-bg-mesh):not(.egs-gpx-bg-orb):not(.egs-gpx-spotlight):not(#egsGpxParticles){
  position:relative;
  z-index:2;
}

#egsGpxParticles{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.egs-gpx-top{
  display:grid;
  grid-template-columns:minmax(300px,0.85fr) 2.15fr;
  gap:40px;
  align-items:start;
}

.egs-gpx-left{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
  font-family:"Poppins",sans-serif;
}
.egs-gpx-left::before{ display:none; }

.egs-gpx-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--egs-gpx-pink); font-weight:800; font-size:12px; letter-spacing:.12em;
  background:rgba(230,38,107,.08);
  border:1px solid rgba(230,38,107,.2);
  padding:7px 16px; border-radius:999px;
}
.egs-gpx-eyebrow::before{ content:"✦"; }
.egs-gpx-title{ margin-top:18px; font-size:clamp(32px,4vw,56px); line-height:1.08; font-weight:800; letter-spacing:-.02em; font-family:"Poppins",sans-serif; }
.egs-gpx-title-line1 .egs-gpx-char{
  display:inline-block; opacity:0; transform:translateY(20px) rotateX(-40deg); filter:blur(3px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.egs-gpx-title-line1 .egs-gpx-char.egs-gpx-is-visible{ opacity:1; transform:translateY(0) rotateX(0); filter:blur(0); }
.egs-gpx-title-accent{
  background:linear-gradient(120deg, var(--egs-gpx-pink) 20%, #f59250 45%, var(--egs-gpx-pink) 75%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:egsGpxHeroShimmer 5s linear infinite;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease .5s, transform .6s cubic-bezier(.2,.8,.2,1) .5s;
}
.egs-gpx-title-accent.egs-gpx-is-visible{ opacity:1; transform:translateY(0); }
@keyframes egsGpxHeroShimmer{ to{ background-position:-220% center; } }
.egs-gpx-rule{
  display:block; width:0; height:3px; background:linear-gradient(90deg,var(--egs-gpx-pink),#f59250); margin:22px 0; border-radius:2px;
  transition:width 1s cubic-bezier(.2,.8,.2,1) .9s;
}
.egs-gpx-rule.egs-gpx-is-visible{ width:64px; }
.egs-gpx-desc{ color: #000; font-size:16px; line-height:1.75; max-width:420px; text-align:justify; font-weight:500; font-family:"Poppins",sans-serif; }
.egs-gpx-desc strong{ color:#0f172a; font-weight:700; }

.egs-gpx-features{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:90px; max-width:640px; padding:20px 0; }
.egs-gpx-features::before{
  content:"";
  position:absolute; inset:-10% -6%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,183,130,.22), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(240,124,38,.18), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(224,161,42,.12), transparent 55%);
  filter:blur(30px);
  animation:egsGpxFeaturesGlowMove 6s ease-in-out infinite;
  z-index:-1;
  border-radius:30px;
}
@keyframes egsGpxFeaturesGlowMove{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-12px,10px) scale(1.08); }
}
.egs-gpx-feature{
  text-align:center; padding:0;
  background:transparent; border:none; border-radius:0;
  box-shadow:none;
  transition:transform .25s ease;
}
.egs-gpx-feature:hover{ transform:translateY(-4px); }
.egs-gpx-icon{
  width:44px; height:44px; margin:0 auto 12px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  background:linear-gradient(135deg, var(--egs-gpx-feature-color, var(--egs-gpx-pink)), var(--egs-gpx-feature-color-two, #f2a7c3));
  box-shadow:0 8px 18px -4px var(--egs-gpx-feature-color, rgba(230,38,107,.5));
}
.egs-gpx-feature:nth-child(1) .egs-gpx-icon{ --egs-gpx-feature-color:#e6266b; --egs-gpx-feature-color-two:#f59250; }
.egs-gpx-feature:nth-child(2) .egs-gpx-icon{ --egs-gpx-feature-color:#7d63e0; --egs-gpx-feature-color-two:#a9c8f5; }
.egs-gpx-feature:nth-child(3) .egs-gpx-icon{ --egs-gpx-feature-color:#3d7bd6; --egs-gpx-feature-color-two:#6ee0c4; }
.egs-gpx-feature h4{ font-size:14px; letter-spacing:.05em; font-weight:800; margin-bottom:8px; color:#0f172a; }
.egs-gpx-feature p{ font-size:14.5px; color:var(--egs-gpx-muted); line-height:1.65; font-weight:500; }

/* ---------- MAP ---------- */
.egs-gpx-map-wrap{ position:relative; display:flex; flex-direction:column; gap:30px; }
.egs-gpx-map{
  position:relative; width:100%; aspect-ratio:16/8; min-height:320px;
  overflow:visible;
  background:transparent;
}
#egsGpxDotMap{position:absolute;inset:0;width:100%;height:100%}
.egs-gpx-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.egs-gpx-lines path{
  fill:none; stroke-width:.18; opacity:.75;
  stroke-dasharray:var(--egs-gpx-line-length); stroke-dashoffset:var(--egs-gpx-line-length);
  animation:egsGpxDraw 1.6s ease forwards;
  transition:opacity .3s ease, stroke-width .3s ease;
}
.egs-gpx-lines path.egs-gpx-is-dim{ opacity:.15; }
.egs-gpx-lines path.egs-gpx-is-highlighted{ opacity:1; stroke-width:.32; }
@keyframes egsGpxDraw{to{stroke-dashoffset:0}}

.egs-gpx-dot-end{ transition:opacity .3s ease, r .3s ease; }

.egs-gpx-marker{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:9px;
  white-space:nowrap;
  animation:egsGpxFade .6s ease both;
  transition:opacity .3s ease, transform .3s ease;
}
.egs-gpx-marker.egs-gpx-align-left{flex-direction:row-reverse}
.egs-gpx-marker.egs-gpx-is-dim{ opacity:.35; }
.egs-gpx-marker.egs-gpx-is-highlighted{ transform:translate(-50%,-50%) scale(1.12); z-index:5; }
@keyframes egsGpxFade{from{opacity:0;transform:translate(-50%,-42%)}}

.egs-gpx-flag{
  width:44px;height:44px; border-radius:50%; background:#fff;
  display:grid;place-items:center; font-size:23px; line-height:1;
  box-shadow:0 6px 16px rgba(17,20,40,.14);
  border:2px solid #fff; flex:0 0 auto;
  transition:box-shadow .3s ease;
}
.egs-gpx-marker.egs-gpx-is-highlighted .egs-gpx-flag{ box-shadow:0 0 0 5px var(--egs-gpx-marker-color, rgba(230,38,107,.25)), 0 10px 24px rgba(17,20,40,.2); }
.egs-gpx-marker b{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.04em; }
.egs-gpx-marker small{ display:block; font-size:11.5px; color:var(--egs-gpx-muted); }
.egs-gpx-marker.egs-gpx-align-left .egs-gpx-txt{text-align:right}

.egs-gpx-hq{ position:absolute; transform:translate(-50%,-50%); font-size:22px; z-index:3; }
.egs-gpx-hq-glow{
  position:absolute;left:50%;top:55%; width:120px;height:120px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(230,38,107,.35),transparent 65%);
  border-radius:50%; z-index:-1;
}
.egs-gpx-hq-ring{
  position:absolute; left:50%; top:55%;
  width:20px; height:20px;
  transform:translate(-50%,-50%);
  border:1.5px solid var(--egs-gpx-pink);
  border-radius:50%;
  opacity:0;
  animation:egsGpxSonarPing 3s ease-out infinite;
  pointer-events:none;
}
.egs-gpx-hq-ring:nth-child(2){ animation-delay:1s; }
.egs-gpx-hq-ring:nth-child(3){ animation-delay:2s; }
@keyframes egsGpxSonarPing{
  0%{ width:20px; height:20px; opacity:.7; }
  100%{ width:180px; height:180px; opacity:0; }
}

.egs-gpx-hq-card{
  position:absolute; transform:translate(-50%,-50%);
  background:#fff; border-radius:12px; padding:12px 20px; text-align:center;
  box-shadow:0 10px 26px rgba(17,20,40,.12); z-index:4;
}
.egs-gpx-hq-card strong{color:var(--egs-gpx-pink);font-size:14px;letter-spacing:.03em}
.egs-gpx-hq-card small{display:block;font-size:11px;color:var(--egs-gpx-muted);margin-top:2px;letter-spacing:.06em}
.egs-gpx-flag {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;

  overflow: hidden;
  border-radius: 50%;

  background: #ffffff;
  border: 3px solid #ffffff;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.egs-gpx-flag img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  border-radius: inherit;
}

.egs-gpx-marker:hover .egs-gpx-flag {
  transform: scale(1.12);
  box-shadow:
    0 0 0 5px rgba(236, 38, 107, 0.15),
    0 12px 25px rgba(0, 0, 0, 0.22);
}
/* ---------- REGIONS ---------- */
.egs-gpx-regions{
  position:relative; z-index:2;
  margin-top:0; background:transparent; border-radius:0;
  padding:0; box-shadow:none;
}
.egs-gpx-regions-head{ text-align:center; margin-bottom:36px; }
.egs-gpx-regions-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:800; letter-spacing:2.5px; color:var(--egs-gpx-pink);
  text-transform:uppercase; margin-bottom:12px;
}
.egs-gpx-regions-eyebrow .egs-gpx-eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--egs-gpx-pink); animation:egsGpxEyebrowPulse 1.6s ease-in-out infinite; }
@keyframes egsGpxEyebrowPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.egs-gpx-regions h3{
  font-size:30px; font-weight:800; letter-spacing:-.01em; color:#0f172a; line-height:1.25;
}
.egs-gpx-regions h3 .egs-gpx-heading-accent{
  background:linear-gradient(120deg, var(--egs-gpx-pink) 20%, #f59250 40%, #e0a12a 55%, #f59250 70%, var(--egs-gpx-pink) 90%);
  background-size:250% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:egsGpxTitleShimmer 5s linear infinite;
}
/* Global Presence title — always visible fallback */
.egs-gpx-title-line1,
.egs-gpx-title-line1 .egs-gpx-char {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

.egs-gpx-title-accent {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.egs-gpx-rule {
  width: 64px !important;
  opacity: 1 !important;
  visibility: visible !important;
}
@keyframes egsGpxTitleShimmer{ to{ background-position:-250% center; } }
.egs-gpx-regions-sub{
  color:var(--egs-gpx-muted); font-size:14px; margin-top:10px; font-weight:500;
  max-width:480px; margin-left:auto; margin-right:auto;
  text-align:justify; text-align-last:center; line-height:1.7;
}

.egs-gpx-region-grid{
  display:grid; grid-template-columns:repeat(5, minmax(150px,1fr)); gap:16px;
  overflow-x:auto;
  padding-bottom:10px;
  -webkit-overflow-scrolling:touch;
}
.egs-gpx-region-card:not(:last-child){ border-right:1px dashed rgba(15,23,42,.08); padding-right:14px; }

.egs-gpx-region-card{
  position:relative;
  background:transparent; border:none; border-radius:0;
  padding:0 8px; overflow:visible;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
  opacity:0; transform:translateY(24px);
  animation:egsGpxCardIn .6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes egsGpxCardIn{ to{ opacity:1; transform:translateY(0); } }
.egs-gpx-region-card:nth-child(1){ animation-delay:.05s; }
.egs-gpx-region-card:nth-child(2){ animation-delay:.15s; }
.egs-gpx-region-card:nth-child(3){ animation-delay:.25s; }
.egs-gpx-region-card:nth-child(4){ animation-delay:.35s; }
.egs-gpx-region-card:nth-child(5){ animation-delay:.45s; }
.egs-gpx-region-card:hover{ transform:translateY(-6px); }

.egs-gpx-region-card::before{
  content:"";
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle, var(--egs-gpx-region-color, #e6266b), transparent 70%);
  opacity:.15;
  transition:opacity .3s ease;
  pointer-events:none;
  z-index:-1;
}
.egs-gpx-region-card:hover::before{ opacity:.3; }

.egs-gpx-region-card::after{ display:none; }

.egs-gpx-rcard-count{
  display:inline-block;
  position:static;
  background:transparent; color:var(--egs-gpx-region-color, #e6266b);
  font-size:10px; font-weight:800; padding:0; border-radius:0;
  margin-bottom:8px;
  letter-spacing:.5px; text-transform:uppercase;
}

.egs-gpx-region-map{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; margin-bottom:16px;
  box-shadow:0 10px 22px -6px var(--egs-gpx-region-color, rgba(230,38,107,.5));
  position:relative; z-index:1;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.egs-gpx-region-card:hover .egs-gpx-region-map{ transform:rotate(-8deg) scale(1.1); }

.egs-gpx-tone-one{background:linear-gradient(160deg,#f9a8c8,#ef6ba0)}
.egs-gpx-tone-two{background:linear-gradient(160deg,#fbc08a,#f59250)}
.egs-gpx-tone-three{background:linear-gradient(160deg,#f5d38f,#e9b34d)}
.egs-gpx-tone-four{background:linear-gradient(160deg,#c3b6f3,#8f79e6)}
.egs-gpx-tone-five{background:linear-gradient(160deg,#a9c8f5,#6f9fe8)}

.egs-gpx-region-card h5{ font-size:15.5px; font-weight:800; letter-spacing:.03em; color:#0f172a; margin-bottom:4px; position:relative; z-index:1; }
.egs-gpx-rcard-tagline{
  font-size:12.5px; font-weight:600; margin-bottom:16px;
  font-style:italic; position:relative; z-index:1;
  text-align:justify; text-align-last:left;
}
.egs-gpx-color-pink{color:#e6266b}
.egs-gpx-color-orange{color:#f07c26}
.egs-gpx-color-amber{color:#e0a12a}
.egs-gpx-color-purple{color:#7d63e0}
.egs-gpx-color-blue{color:#3d7bd6}

.egs-gpx-rcard-divider{ display:none; }

.egs-gpx-flag-row{ display:flex; flex-wrap:wrap; gap:8px; position:relative; z-index:1; }
.egs-gpx-flag-chip{
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.5); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  padding:5px 10px 5px 6px; font-size:11px; font-weight:600; color:#374151;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.egs-gpx-flag-chip:hover{ transform:translateY(-2px); border-color:var(--egs-gpx-region-color, #e6266b); background:#fff; }
.egs-gpx-flag-chip .egs-gpx-flag-icon{
  width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
.egs-gpx-flag-chip.egs-gpx-is-hq{ background:var(--egs-gpx-region-color, #e6266b); color:#fff; border-color:var(--egs-gpx-region-color, #e6266b); }
.egs-gpx-flag-chip.egs-gpx-is-hq .egs-gpx-flag-icon{ background:rgba(255,255,255,.25); }

.egs-gpx-hq-card {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.egs-gpx-hq-flag {
  display: block;

  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  object-fit: cover;

  border: 2px solid #ffffff;
  border-radius: 50%;

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.18),
    0 0 0 3px rgba(230, 38, 107, 0.1);
}

.egs-gpx-hq-card > div {
  display: flex;
  flex-direction: column;
}

@media (max-width: 760px) {
  .egs-gpx-hq-flag {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .egs-gpx-hq-card {
    gap: 7px;
    padding: 9px 12px;
  }
}

@media (max-width:1200px){
  .egs-gpx-top{grid-template-columns:1fr}
  .egs-gpx-features{max-width:none}
}
@media (max-width:760px){
  .egs-gpx-shell{padding:36px 18px}
  .egs-gpx-features{grid-template-columns:1fr;gap:24px}
  .egs-gpx-feature{border-left:0;padding:0}
  .egs-gpx-marker small{display:none}
  .egs-gpx-flag{width:32px;height:32px;font-size:17px}
  .egs-gpx-marker b{font-size:9.5px}
  .egs-gpx-map{min-height:280px}
}
/* =====================================================
   FINAL GLOBAL PRESENCE MOBILE RESPONSIVE
===================================================== */
@media screen and (max-width: 760px) {

  #egsGpxSection {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #egsGpxSection.egs-gpx-shell {
    padding: 45px 14px 55px !important;
  }

  #egsGpxSection .egs-gpx-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 38px !important;

    width: 100% !important;
    min-width: 0 !important;
  }

  #egsGpxSection .egs-gpx-map-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 35px !important;

    width: 100% !important;
    min-width: 0 !important;

    overflow: visible !important;
  }

  #egsGpxSection .egs-gpx-map-scroll {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow: visible !important;
  }

  /* Complete map mobile width-க்குள் */
  #egsGpxSection .egs-gpx-map {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 260px !important;
    min-height: 260px !important;

    aspect-ratio: auto !important;

    overflow: visible !important;
  }

  #egsGpxSection #egsGpxDotMap,
  #egsGpxSection .egs-gpx-lines {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
  }

  /* Country flag and name */
  #egsGpxSection .egs-gpx-marker {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;

    white-space: normal !important;
    z-index: 4 !important;
  }

  #egsGpxSection .egs-gpx-flag {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;

    border-width: 2px !important;
  }

  /* Old display:none override */
  #egsGpxSection .egs-gpx-marker .egs-gpx-txt {
    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 58px !important;

    padding: 2px 3px !important;

    background: rgba(255, 255, 255, 0.78);
    border-radius: 4px;

    white-space: normal !important;
    line-height: 1.05 !important;
  }

  #egsGpxSection .egs-gpx-marker b {
    display: block !important;

    color: #101426 !important;

    font-size: 7px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #egsGpxSection .egs-gpx-marker small {
    display: none !important;
  }

  /* Trichy HQ */
  #egsGpxSection .egs-gpx-hq {
    font-size: 14px !important;
  }

  #egsGpxSection .egs-gpx-hq-ring {
    display: none !important;
  }

  #egsGpxSection .egs-gpx-hq-card {
    padding: 5px 7px !important;
    gap: 4px !important;

    transform:
      translate(-50%, -50%)
      scale(0.68) !important;

    transform-origin: center !important;
  }

  #egsGpxSection .egs-gpx-hq-flag {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
  }

  #egsGpxSection .egs-gpx-hq-card strong {
    font-size: 9px !important;
  }

  #egsGpxSection .egs-gpx-hq-card small {
    font-size: 7px !important;
  }



/* =====================================================
   REGIONS ONLY — MOBILE FIX
===================================================== */
  
#egsGpxSection .egs-gpx-regions {
  display: block !important;
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: auto !important;
  max-height: none !important;

  margin: 35px 0 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  opacity: 1 !important;
  visibility: visible !important;

  z-index: 5 !important;
}

/* Regions heading */
#egsGpxSection .egs-gpx-regions-head {
  display: block !important;
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 0 28px !important;
  padding: 0 5px !important;

  opacity: 1 !important;
  visibility: visible !important;

  text-align: center !important;
}

#egsGpxSection .egs-gpx-regions-eyebrow {
  display: inline-flex !important;
  margin-bottom: 10px !important;

  font-size: 10px !important;
  letter-spacing: 1.7px !important;
}

#egsGpxSection .egs-gpx-regions h3 {
  display: block !important;

  margin: 0 !important;

  font-size: 22px !important;
  line-height: 1.3 !important;

  opacity: 1 !important;
  visibility: visible !important;
}

#egsGpxSection .egs-gpx-regions-sub {
  display: block !important;

  width: 100% !important;
  max-width: 320px !important;

  margin: 10px auto 0 !important;

  font-size: 12px !important;
  line-height: 1.6 !important;

  text-align: center !important;
  text-align-last: center !important;
}

/* Region cards — one card per row */
#egsGpxSection .egs-gpx-region-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-auto-rows: auto !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: auto !important;
  max-height: none !important;

  gap: 18px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* Individual region card */
#egsGpxSection .egs-gpx-region-card {
  display: block !important;
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 175px !important;

  margin: 0 !important;
  padding: 20px 18px !important;

  overflow: hidden !important;

  opacity: 1 !important;
  visibility: visible !important;

  transform: none !important;
  animation: none !important;

  background: rgba(255, 255, 255, 0.48) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 18px !important;

  box-shadow: 0 12px 28px rgba(17, 20, 40, 0.08);
}

#egsGpxSection
.egs-gpx-region-card:not(:last-child) {
  border-right: 1px solid rgba(15, 23, 42, 0.09) !important;
}

/* Region icon */
#egsGpxSection .egs-gpx-region-map {
  width: 48px !important;
  height: 48px !important;

  margin: 0 0 14px !important;

  font-size: 22px !important;
}

/* Region text */
#egsGpxSection .egs-gpx-rcard-count {
  display: block !important;
  margin-bottom: 8px !important;
}

#egsGpxSection .egs-gpx-region-card h5 {
  display: block !important;

  margin-bottom: 5px !important;

  font-size: 16px !important;
  line-height: 1.3 !important;
}

#egsGpxSection .egs-gpx-rcard-tagline {
  display: block !important;

  margin-bottom: 15px !important;

  font-size: 12px !important;
  line-height: 1.5 !important;

  text-align: left !important;
  text-align-last: left !important;
}

/* Country chips */
#egsGpxSection .egs-gpx-flag-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;

  width: 100% !important;

  gap: 7px !important;
}

#egsGpxSection .egs-gpx-flag-chip {
  display: inline-flex !important;
  align-items: center !important;

  padding: 5px 8px 5px 5px !important;

  font-size: 10.5px !important;
  white-space: nowrap !important;
}

}

/*========================================
 CTO AND CEO SECTION
========================================
*/

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Segoe UI",Arial,sans-serif;
  background:#050509;
  color:#fff;
  overflow-x:hidden;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.lead-section{
  position:relative;
  padding:60px 20px 70px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(236,47,123,.10),
      transparent 45%
    ),
    linear-gradient(
      180deg,
      #050509 0%,
      #080811 48%,
      #050509 100%
    );

   width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  box-sizing: border-box !important;
}


/* =========================================================
   BACKGROUND ATMOSPHERE
========================================================= */

.lead-bg{
  position:absolute;
  inset:0;
  z-index:-5;
  overflow:hidden;
  pointer-events:none;
}


/* BIG GLOW ORBS */

.bg-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.45;
  will-change:transform;
}

.orb-1{
  width:520px;
  height:520px;
  left:-190px;
  top:5%;
  background:rgba(236,47,123,.12);
  animation:orbFloat1 15s ease-in-out infinite;
}

.orb-2{
  width:460px;
  height:460px;
  right:-150px;
  top:18%;
  background:rgba(168,85,247,.10);
  animation:orbFloat2 18s ease-in-out infinite;
}

.orb-3{
  width:400px;
  height:400px;
  left:42%;
  bottom:-240px;
  background:rgba(255,143,77,.10);
  animation:orbFloat3 13s ease-in-out infinite;
}


@keyframes orbFloat1{

  0%,100%{
    transform:translate(0,0) scale(1);
  }

  50%{
    transform:translate(90px,50px) scale(1.12);
  }

}

@keyframes orbFloat2{

  0%,100%{
    transform:translate(0,0) scale(1);
  }

  50%{
    transform:translate(-80px,70px) scale(1.1);
  }

}

@keyframes orbFloat3{

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

  50%{
    transform:translateY(-80px) scale(1.15);
  }

}


/* =========================================================
   PREMIUM RADIAL RINGS
========================================================= */

.bg-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.035);
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.ring-1{
  width:420px;
  height:420px;
  animation:ringRotate 25s linear infinite;
}

.ring-2{
  width:720px;
  height:720px;
  border-color:rgba(236,47,123,.035);
  animation:ringRotateReverse 35s linear infinite;
}

.ring-3{
  width:1050px;
  height:1050px;
  border-color:rgba(168,85,247,.025);
  animation:ringRotate 45s linear infinite;
}


@keyframes ringRotate{

  to{
    transform:translate(-50%,-50%) rotate(360deg);
  }

}

@keyframes ringRotateReverse{

  to{
    transform:translate(-50%,-50%) rotate(-360deg);
  }

}


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

.tech-grid{
  position:absolute;
  inset:0;
  z-index:-4;
  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:70px 70px;

  mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      rgba(0,0,0,.8) 35%,
      transparent 78%
    );

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      rgba(0,0,0,.8) 35%,
      transparent 78%
    );

  animation:gridMove 18s linear infinite;
}

@keyframes gridMove{

  to{
    background-position:
      70px 70px,
      70px 70px;
  }

}


/* =========================================================
   MOVING LIGHT LINES
========================================================= */

.light-line{
  position:absolute;
  z-index:-2;
  height:1px;
  width:35%;
  opacity:.16;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(236,47,123,.8),
    transparent
  );
  filter:blur(.2px);
}

.line-1{
  top:28%;
  left:-40%;
  animation:lineMove 9s linear infinite;
}

.line-2{
  top:52%;
  left:-40%;
  animation:lineMove 13s linear infinite 3s;
}

.line-3{
  top:72%;
  left:-40%;
  animation:lineMove 11s linear infinite 6s;
}

@keyframes lineMove{

  0%{
    transform:translateX(0);
    opacity:0;
  }

  15%{
    opacity:.15;
  }

  50%{
    opacity:.25;
  }

  85%{
    opacity:.15;
  }

  100%{
    transform:translateX(420%);
    opacity:0;
  }

}


/* =========================================================
   NOISE
========================================================= */

.bg-noise{
  position:absolute;
  inset:-50%;
  opacity:.025;
  pointer-events:none;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

  animation:noiseMove .25s steps(2) infinite;
}

@keyframes noiseMove{

  0%{
    transform:translate(0,0);
  }

  25%{
    transform:translate(2%,1%);
  }

  50%{
    transform:translate(-1%,2%);
  }

  75%{
    transform:translate(1%,-1%);
  }

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

}


/* =========================================================
   VIGNETTE
========================================================= */

.bg-vignette{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      ellipse at center,
      transparent 25%,
      rgba(0,0,0,.28) 70%,
      rgba(0,0,0,.65) 100%
    );
}


/* =========================================================
   PARTICLES
========================================================= */

#particleWrap{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}

.lead-particle{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;

  background:var(--pc,#ec2f7b);
  box-shadow:
    0 0 6px var(--pc,#ec2f7b),
    0 0 14px var(--pc,#ec2f7b);

  opacity:0;

  animation:
    particleRise linear infinite;
}

@keyframes particleRise{

  0%{
    transform:translate3d(0,20px,0);
    opacity:0;
  }

  12%{
    opacity:.4;
  }

  50%{
    transform:translate3d(20px,-40vh,0);
    opacity:.25;
  }

  88%{
    opacity:.15;
  }

  100%{
    transform:translate3d(-20px,-95vh,0);
    opacity:0;
  }

}


/* =========================================================
   FOUNDATION
========================================================= */

.foundation-wrap{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}

.building-outline{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(90%,900px);
  opacity:.045;
}

.building-outline svg{
  width:100%;
  height:auto;
  display:block;
}

.building-outline path,
.building-outline line{
  stroke:#fff;
  fill:none;
  stroke-width:1.2;
}


.foundation-base{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(236,47,123,.8),
      rgba(255,143,77,.8),
      rgba(168,85,247,.7),
      rgba(236,47,123,.8),
      transparent
    );

  background-size:200% 100%;

  box-shadow:
    0 0 18px rgba(236,47,123,.3);

  animation:baseFlow 6s linear infinite;
}

@keyframes baseFlow{

  to{
    background-position:-200% 0;
  }

}


.support-beam{
  position:absolute;
  bottom:0;
  width:1px;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--bc) 45%,
      var(--bc) 65%,
      transparent
    );

  opacity:0;

  animation:beamRise 4.5s ease-in-out infinite;
}

@keyframes beamRise{

  0%{
    height:0;
    opacity:0;
  }

  15%{
    opacity:.3;
  }

  50%{
    height:82%;
    opacity:.14;
  }

  85%{
    opacity:.06;
  }

  100%{
    height:100%;
    opacity:0;
  }

}


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

.lead-heading{
  position:relative;
  z-index:2;
  text-align:center;
  margin-bottom:40px;
}

.lead-label{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:7px 17px;

  border-radius:999px;

  border:1px solid rgba(236,47,123,.32);

  background:
    linear-gradient(
      135deg,
      rgba(236,47,123,.08),
      rgba(168,85,247,.05)
    );

  color:#ff9dc4;

  font-size:11px;
  font-weight:800;
  letter-spacing:4px;
  text-transform:uppercase;

  box-shadow:
    0 0 25px rgba(236,47,123,.06);

  backdrop-filter:blur(12px);
}

.lead-label::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ec2f7b;
  box-shadow:0 0 10px #ec2f7b;
  animation:labelPulse 2s ease-in-out infinite;
}

@keyframes labelPulse{

  0%,100%{
    opacity:.5;
    transform:scale(.8);
  }

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

}


.lead-titled{
    max-width:850px;
    margin:18px auto 0;
    color: #fff;
    font-size: 48px;
    line-height:1.08;
    font-weight:900;
    letter-spacing:-2px;

}

@keyframes titleShimmer{

  to{
    background-position:-300% center;
  }

}




.lead-sub{
  max-width:550px;
  margin:18px auto 0;

  color:#9b9baa;
  font-size:14px;
  line-height:1.8;
}


/* =========================================================
   CARDS
========================================================= */

.lead-stage{
  position:relative;
  z-index:3;

  max-width:900px;
  margin:0 auto;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:22px;
}


.lcard{
  --c:#ec2f7b;
  --c2:#ff6ba8;

  position:relative;

  padding:38px 30px 34px;

  text-align:center;

  border-radius:28px;

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

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);

  overflow:hidden;

  box-shadow:
    0 30px 80px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.07);

  opacity:0;

  transform:
    translateY(55px)
    scale(.96);

  transition:
    opacity .8s cubic-bezier(.2,.8,.2,1),
    transform .8s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    box-shadow .35s ease;
}


.lcard::before{
  content:"";

  position:absolute;
  inset:-1px;

  background:
    radial-gradient(
      circle at 50% 0%,
      var(--c),
      transparent 42%
    );

  opacity:.055;

  pointer-events:none;
}


.lcard::after{
  content:"";

  position:absolute;

  width:180px;
  height:180px;

  top:-110px;
  right:-100px;

  border-radius:50%;

  background:var(--c);

  filter:blur(70px);

  opacity:.12;

  pointer-events:none;
}


.lcard.revealed{
  opacity:1;
  transform:translateY(0) scale(1);
}


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

  border-color:
    color-mix(
      in srgb,
      var(--c) 45%,
      transparent
    );

  box-shadow:
    0 35px 90px rgba(0,0,0,.45),
    0 0 50px -30px var(--c),
    inset 0 1px 0 rgba(255,255,255,.1);
}


/* =========================================================
   HEX PHOTO
========================================================= */

.hex-wrap{
  position:relative;

  width:190px;
  height:210px;

  margin:0 auto 20px;
}

.hex-svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.hex-outline{
  fill:none;

  stroke:var(--c);

  stroke-width:2;

  stroke-dasharray:560;
  stroke-dashoffset:560;
}

.lcard.revealed .hex-outline{
  animation:
    hexTrace 1.8s ease forwards .3s,
    hexPulse 3s ease-in-out infinite 2.1s;
}

@keyframes hexTrace{

  to{
    stroke-dashoffset:0;

    filter:
      drop-shadow(0 0 4px var(--c))
      drop-shadow(0 0 12px color-mix(in srgb,var(--c) 50%,transparent));
  }

}

@keyframes hexPulse{

  0%,100%{
    filter:drop-shadow(0 0 4px var(--c));
  }

  50%{
    filter:drop-shadow(0 0 10px var(--c));
  }

}


/* =========================================================
   CEO / CTO HEX IMAGE — CLEAN PROFESSIONAL
========================================================= */

.hex-wrap{
    position:relative;
    width:190px;
    height:210px;
    margin:0 auto 20px;
}


/* Hexagon outline */

.hex-svg{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    z-index:4;
    overflow:visible;
}


/* Image area */

.hex-photo{
    position:absolute;

    top:11px;
    right:11px;
    bottom:11px;
    left:11px;

    overflow:hidden;

    clip-path:polygon(
        50% 2%,
        95% 25%,
        95% 75%,
        50% 98%,
        5% 75%,
        5% 25%
    );

    background:
        radial-gradient(
            circle at center,
            #28232d 0%,
            #15121a 65%,
            #0c0a0f 100%
        );

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

    z-index:2;
}


/* =========================================================
   ACTUAL CEO / CTO PHOTO
========================================================= */

.hex-photo img{
    width:100%;
    height:100%;

    display:block;

    /*
       IMPORTANT:
       contain prevents unwanted face cropping.
    */

    object-fit:contain;

    object-position:center center;

    transform:scale(1);

    transform-origin:center center;

    transition:
        transform .45s ease,
        filter .45s ease;
}


/* =========================================================
   CEO IMAGE
========================================================= */

.ceo .hex-photo img{
    object-position:center center;

    transform:scale(.92);
}


/* =========================================================
   CTO / CFO IMAGE
========================================================= */

.cfo .hex-photo img{
    object-position:center center;

    transform:scale(.92);
}


/* =========================================================
   SOFT IMAGE DEPTH
========================================================= */

.hex-photo::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0,0,0,.16) 100%
        );
}


/* =========================================================
   HOVER
========================================================= */

.lcard:hover .hex-photo img{
    transform:scale(.96);
}

/* =========================================================
   CARD CONTENT
========================================================= */

.lcard-name{
  color:#fff;
  font-size:22px;
  font-weight:800;
  margin-bottom:5px;
}

.lcard-role{
  color:var(--c);
  font-size:14px;
  font-weight:700;
  letter-spacing:.6px;
  margin-bottom:18px;
}


.years-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 18px;

  margin-bottom:18px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      var(--c),
      var(--c2)
    );

  box-shadow:
    0 0 22px -7px var(--c);
}

.years-num{
  color:#fff;
  font-size:20px;
  font-weight:900;
}

.years-label{
  color:#fff;
  font-size:15px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}


.lcard-desc{
  color:wheat;
  justify-content: center;

  font-size:13.5px;
  line-height:1.8;

  margin-bottom:20px;

  text-align:left;
}

.lcard-desc strong{
  color:#fff;
}


.lcard-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:center;
}

.lcard-tags span{
  padding:5px 11px;

  border-radius:999px;

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

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

  color: whitesmoke;

  font-size:13.5px;
  font-weight:600;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.lcard-tags span:hover{
  background:
    color-mix(
      in srgb,
      var(--c) 12%,
      transparent
    );

  border-color:
    color-mix(
      in srgb,
      var(--c) 40%,
      transparent
    );

  transform:translateY(-2px);
}


/* CFO */

.lcard.cfo{
  --c:#ff8f4d;
  --c2:#ffc266;
}


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

@media(max-width:800px){

  .lead-section{
    padding:90px 18px 110px;
  }

  .lead-stage{
    grid-template-columns:1fr;
    max-width:560px;
  }

  .lead-heading{
    margin-bottom:55px;
  }

  .lead-titled{
    letter-spacing:-1px;
  }

}

@media(max-width:500px){

  .lead-titled{
    font-size:34px;
  }

  .lead-sub{
    font-size:13px;
  }

  .lcard{
    padding:32px 22px;
  }

  .hex-wrap{
    transform:scale(.9);
    margin-bottom:5px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }

}

/*=========================================================
          Elshaddai Why you choose us 
========================================================= */
/* =========================================================
   EGS WHY CHOOSE PRISM
   Unique Prefix: egsWhyChoose
========================================================= */

.egsWhyChoosePrismSection{
    position:relative;
    width:100%;
    padding:40px 20px 30px;
    overflow:hidden;
    isolation:isolate;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(236,72,153,.16),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 20%,
            rgba(59,130,246,.15),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 85%,
            rgba(139,92,246,.14),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #fff7fb 0%,
            #f8f5ff 35%,
            #f4f8ff 68%,
            #fff7f2 100%
        );

    overflow:hidden;
    animation:egsWhyChooseBgFlow 22s ease-in-out infinite;
     width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  box-sizing: border-box !important;
}


.egsWhyChoosePrismSection::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    top:-250px;
    left:-180px;

    background:
        radial-gradient(
            circle,
            rgba(236,72,153,.16),
            transparent 70%
        );

    filter:blur(35px);

    pointer-events:none;

    animation:
        egsPinkGlowMove
        8s
        ease-in-out
        infinite alternate;
}


@keyframes egsPinkGlowMove{

    0%{
        transform:translate(0,0) scale(1);
        opacity:.65;
    }

    50%{
        transform:translate(100px,80px) scale(1.15);
        opacity:1;
    }

    100%{
        transform:translate(40px,140px) scale(.95);
        opacity:.7;
    }
}

.egsWhyChoosePrismSection::after{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-250px;
    bottom:-300px;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.16),
            transparent 70%
        );

    filter:blur(40px);

    pointer-events:none;

    animation:
        egsBlueGlowMove
        10s
        ease-in-out
        infinite alternate;
}


@keyframes egsBlueGlowMove{

    0%{
        transform:translate(0,0) scale(1);
        opacity:.6;
    }

    50%{
        transform:translate(-100px,-80px) scale(1.2);
        opacity:1;
    }

    100%{
        transform:translate(-40px,-140px) scale(.95);
        opacity:.7;
    }
}


/* =========================================
   FLOATING TECH OBJECTS
========================================= */

.egsFloatingObject{

    position:absolute;

    z-index:1;

    pointer-events:none;

    display:flex;

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

    color:rgba(139,92,246,.35);

    font-size:28px;

    filter:
        drop-shadow(
            0 0 14px
            rgba(139,92,246,.25)
        );

    animation:
        egsFloatingObjectMove
        7s
        ease-in-out
        infinite;
}


/* Object positions */

.egsObjectOne{

    top:18%;

    left:6%;

    font-size:34px;

    color:rgba(236,72,153,.35);

    animation-delay:0s;
}


.egsObjectTwo{

    top:32%;

    right:7%;

    font-size:42px;

    color:rgba(59,130,246,.30);

    animation-delay:1.5s;
}


.egsObjectThree{

    bottom:24%;

    left:8%;

    font-size:30px;

    color:rgba(16,185,129,.30);

    animation-delay:3s;
}


.egsObjectFour{

    bottom:18%;

    right:9%;

    font-size:38px;

    color:rgba(249,115,22,.30);

    animation-delay:4.5s;
}


/* Floating movement */

@keyframes egsFloatingObjectMove{

    0%{

        transform:
            translate3d(0,0,0)
            rotate(0deg)
            scale(1);

        opacity:.35;
    }

    50%{

        transform:
            translate3d(18px,-25px,0)
            rotate(45deg)
            scale(1.12);

        opacity:.7;
    }

    100%{

        transform:
            translate3d(-12px,18px,0)
            rotate(90deg)
            scale(.95);

        opacity:.35;
    }
}
/* =========================================================
   BACKGROUND
========================================================= */

@keyframes egsWhyChooseBgFlow{

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

    50%{
        background-position:
            15% 15%,
            85% 10%,
            10% 90%,
            90% 85%,
            55% 45%,
            0 0;
    }
}


.egsWhyChooseBlob{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    pointer-events:none;
    z-index:0;
}


.egsWhyChooseBlobOne{
    width:460px;
    height:460px;
    top:-140px;
    left:-120px;

    background:
        radial-gradient(
            circle,
            rgba(236,72,153,.42),
            transparent 70%
        );

    animation:egsWhyChooseDriftOne 16s ease-in-out infinite;
}
.egsWhyChoosePrismSection {
  margin-bottom: 0 !important;
}

.egsftr-footer {
  margin-top: 0 !important;
}

.egsWhyChooseBlobTwo{
    width:420px;
    height:420px;
    top:-100px;
    right:-100px;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.36),
            transparent 70%
        );

    animation:egsWhyChooseDriftTwo 19s ease-in-out infinite;
}


.egsWhyChooseBlobThree{
    width:400px;
    height:400px;
    bottom:-130px;
    left:-80px;

    background:
        radial-gradient(
            circle,
            rgba(16,185,129,.32),
            transparent 70%
        );

    animation:egsWhyChooseDriftThree 17s ease-in-out infinite;
}


.egsWhyChooseBlobFour{
    width:440px;
    height:440px;
    bottom:-120px;
    right:-110px;

    background:
        radial-gradient(
            circle,
            rgba(249,115,22,.36),
            transparent 70%
        );

    animation:egsWhyChooseDriftFour 20s ease-in-out infinite;
}


@keyframes egsWhyChooseDriftOne{

    0%,100%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(50px,40px) scale(1.15);
    }
}


@keyframes egsWhyChooseDriftTwo{

    0%,100%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(-45px,35px) scale(1.12);
    }
}


@keyframes egsWhyChooseDriftThree{

    0%,100%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(35px,-45px) scale(1.18);
    }
}


@keyframes egsWhyChooseDriftFour{

    0%,100%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(-40px,-35px) scale(1.14);
    }
}


/* =========================================================
   FLOATING STARS
========================================================= */

.egsWhyChooseStars{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
}


.egsWhyChooseStars i{
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;

    background:#ec4899;

    opacity:.3;

    animation:
        egsWhyChooseStarFloat
        4s
        ease-in-out
        infinite;
}


@keyframes egsWhyChooseStarFloat{

    0%,100%{
        transform:translateY(0) scale(.8);
        opacity:.18;
    }

    50%{
        transform:translateY(-12px) scale(1.5);
        opacity:.75;
    }
}


/* =========================================================
   HEADER
========================================================= */

.egsWhyChooseHeader{
    position:relative;
    z-index:20;

    width:100%;
    max-width:720px;

    margin:0 auto 40px;

    text-align:center;
}


.egsWhyChooseEyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;

    padding:8px 18px;

    border-radius:100px;

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

    border:
        1px solid
        rgba(236,72,153,.18);

    box-shadow:
        0 10px 25px
        rgba(120,40,50,.06);

    opacity:0;

    transform:translateY(14px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


.egsWhyChooseEyebrow.egsWhyChooseVisible{
    opacity:1;
    transform:translateY(0);
}


.egsWhyChoosePulse{
    width:7px;
    height:7px;

    flex-shrink:0;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #ec4899,
            #f97316
        );

    animation:
        egsWhyChoosePulseDot
        2s
        infinite;
}


@keyframes egsWhyChoosePulseDot{

    70%{
        box-shadow:
            0 0 0 8px
            rgba(236,72,153,0);
    }
}


.egsWhyChooseEyebrowText{
    color:#c2537a;

    font-size:14px;
    font-weight:800;

    letter-spacing:2.2px;
}


.egsWhyChooseEyebrowLine{
    width:20px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            #ec4899,
            #f97316
        );
}


/* =========================================================
   TITLE
========================================================= */

.egsWhyChooseTitle{
    margin:20px 0 12px;

    color:#1c1719;

    font-size: 43px;

    line-height:1.08;

    font-weight:800;

    letter-spacing:-.02em;
}


.egsWhyChooseTitleLine{
    display:block;
}


.egsWhyChooseWord{
    display:inline-block;

    opacity:0;

    transform:
        translateY(40px)
        rotateX(-60deg);
}


.egsWhyChooseTitle.egsWhyChooseVisible
.egsWhyChooseWord{

    animation:
        egsWhyChooseWordReveal
        .75s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


.egsWhyChooseTitle
.egsWhyChooseTitleLine:first-child
.egsWhyChooseWord:nth-child(1){

    animation-delay:.05s;
}


.egsWhyChooseTitle
.egsWhyChooseTitleLine:first-child
.egsWhyChooseWord:nth-child(2){

    animation-delay:.15s;
}


.egsWhyChooseAccentLine
.egsWhyChooseWord{

    background:
        linear-gradient(
            100deg,
            #e64091,
            #ef5c67,
            #f47a31,
            #e64091
        );

    background-size:300% auto;

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

    color:transparent;

    animation:
        egsWhyChooseGradientFlow
        6s
        linear
        infinite;
}


@keyframes egsWhyChooseWordReveal{

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


@keyframes egsWhyChooseGradientFlow{

    to{
        background-position:300% center;
    }
}


/* =========================================================
   SUBTITLE
========================================================= */

.egsWhyChooseSubtitle{
    max-width:520px;

    margin:auto;

    color: maroon;

    font-size:18px;

    line-height:1.65;

    opacity:0;

    transform:translateY(12px);

    transition:
        opacity .7s ease .3s,
        transform .7s ease .3s;
}


.egsWhyChooseSubtitle.egsWhyChooseVisible{
    opacity:1;
    transform:translateY(0);
}


.egsWhyChooseTitleGlow{
    width:90px;
    height:2px;

    margin:18px auto 0;

    border-radius:100px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ec4899,
            #f97316,
            transparent
        );

    transform:scaleX(0);

    transition:
        transform .8s ease .4s;
}


.egsWhyChooseTitleGlow.egsWhyChooseVisible{

    transform:scaleX(1);

    animation:
        egsWhyChooseTitleGlowPulse
        2.5s
        ease-in-out
        1.2s
        infinite;
}


@keyframes egsWhyChooseTitleGlowPulse{

    50%{
        opacity:.5;
    }
}


/* =========================================================
   EXPERIENCE CANVAS
========================================================= */

.egsWhyChooseExperienceWrapper{
    position:relative;

    z-index:2;

    width:100%;

    overflow:visible;

    display:flex;

    justify-content:center;
}


.egsWhyChooseExperience{
    position:relative;

    width:980px;
    height:350px;

    flex-shrink:0;

    transform-origin:top center;
}


/* =========================================================
   CENTER CORE
========================================================= */

.egsWhyChooseCore{
    position:absolute;

    left:372.5px;
    top:252.5px;

    width:215px;
    height:215px;

    z-index:10;

    display:flex;

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

    cursor:pointer;

    opacity:0;

    transform:scale(.6);

    transition:
        opacity .8s cubic-bezier(.34,1.2,.4,1),
        transform .8s cubic-bezier(.34,1.2,.4,1);
}


.egsWhyChooseCore.egsWhyChooseVisible{
    opacity:1;
    transform:scale(1);
}


.egsWhyChooseCoreAura{
    position:absolute;

    inset:-70px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(236,72,153,.2),
            rgba(249,115,22,.06) 45%,
            transparent 70%
        );

    filter:blur(16px);

    animation:
        egsWhyChooseCoreAura
        4s
        ease-in-out
        infinite;
}


@keyframes egsWhyChooseCoreAura{

    0%,100%{
        transform:scale(.92);
        opacity:.6;
    }

    50%{
        transform:scale(1.12);
        opacity:.95;
    }
}


.egsWhyChooseCoreFace{

    position:relative;

    width:185px;
    height:185px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

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

    background:
        radial-gradient(
            circle at 35% 25%,
            #ffffff 0%,
            #fff8f5 48%,
            #ffe9e2 100%
        );

    border:
        1px solid
        rgba(236,72,153,.25);

    box-shadow:
        0 25px 65px
        rgba(170,65,75,.18),
        inset 0 0 35px
        rgba(236,72,153,.1);

    z-index:4;
}


/* =========================================================
   CORE ORBITS
========================================================= */

.egsWhyChooseCoreOrbit{
    position:absolute;

    border-radius:50%;

    pointer-events:none;
}


.egsWhyChooseCoreOrbitOuter{
    inset:-21px;

    border:
        1px solid
        rgba(236,72,153,.32);

    border-right-color:
        rgba(249,115,22,.65);

    animation:
        egsWhyChooseOrbitClockwise
        13s
        linear
        infinite;
}


.egsWhyChooseCoreOrbitMiddle{
    inset:-38px;

    border:
        1px dashed
        rgba(249,115,22,.24);

    animation:
        egsWhyChooseOrbitReverse
        18s
        linear
        infinite;
}


.egsWhyChooseCoreOrbitInner{
    inset:-54px;

    border:
        1px solid
        rgba(236,72,153,.14);

    animation:
        egsWhyChooseOrbitClockwise
        24s
        linear
        infinite
        reverse;
}


@keyframes egsWhyChooseOrbitClockwise{

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


@keyframes egsWhyChooseOrbitReverse{

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


.egsWhyChooseCoreOrbit span{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #ec4899,
            #f97316
        );

    box-shadow:
        0 0 14px
        rgba(236,72,153,.55);
}


.egsWhyChooseCoreOrbitOuter span{
    top:7px;
    left:50%;
}


.egsWhyChooseCoreOrbitMiddle span{
    right:13px;
    bottom:13px;
}


.egsWhyChooseCoreOrbitInner span{
    top:38px;
    left:4px;
}


/* =========================================================
   CORE TEXT
========================================================= */

.egsWhyChooseCoreMini{
    color:#bd7b82;

    font-size:8px;

    font-weight:800;

    letter-spacing:3px;
}


.egsWhyChooseCoreNumber{

    margin-top:5px;

    font-size:60px;

    line-height:.9;

    font-weight:800;

    letter-spacing:-3px;

    background:
        linear-gradient(
            135deg,
            #e53e90,
            #f26d35
        );

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

    color:transparent;

    transition:
        opacity .35s ease,
        transform .35s ease;
}


.egsWhyChooseCoreNumber span{
    font-size:32px;
}


.egsWhyChooseCoreNumber.egsWhyChooseFade,
.egsWhyChooseCoreLabel.egsWhyChooseFade,
.egsWhyChooseCoreCaption.egsWhyChooseFade{

    opacity:0;

    transform:
        translateY(6px)
        scale(.94);
}


.egsWhyChooseCoreLabel{

    margin-top:8px;

    color:#2d2527;

    font-size:9px;

    font-weight:800;

    letter-spacing:3px;

    transition:
        opacity .35s ease,
        transform .35s ease;
}


.egsWhyChooseCoreCaption{

    margin-top:4px;

    color:#a29294;

    font-size:7px;

    letter-spacing:1.4px;

    transition:
        opacity .35s ease,
        transform .35s ease;
}


.egsWhyChooseCoreDots{

    position:absolute;

    bottom:-24px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:5px;

    z-index:6;
}


.egsWhyChooseCoreDots span{

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        rgba(236,72,153,.25);

    transition:
        background .4s ease,
        transform .4s ease;
}


.egsWhyChooseCoreDots span.egsWhyChooseActive{
    background:
        linear-gradient(
            135deg,
            #ec4899,
            #f97316
        );

    transform:scale(1.3);
}


/* =========================================================
   CONNECTION LINES
========================================================= */

.egsWhyChooseConnection{

    position:absolute;

    left:480px;
    top:360px;

    width:320px;
    height:2px;

    transform-origin:left center;

    z-index:2;

    border-radius:2px;

    transform:
        scaleX(0)
        rotate(var(--egs-angle));

    transition:
        transform .9s cubic-bezier(.2,.8,.2,1),
        height .3s ease,
        filter .3s ease,
        opacity .3s ease;
}


.egsWhyChooseConnection.egsWhyChooseVisible{

    transform:
        scaleX(1)
        rotate(var(--egs-angle));
}


.egsWhyChooseLineFill{

    position:absolute;

    inset:0;

    border-radius:2px;

    background:
        linear-gradient(
            90deg,
            var(--egs-c1),
            var(--egs-c2) 70%,
            transparent
        );

    opacity:.55;
}


.egsWhyChooseConnection.egsWhyChooseLineActive{

    height:3px;

    filter:
        drop-shadow(
            0 0 8px
            var(--egs-c1)
        )
        drop-shadow(
            0 0 16px
            var(--egs-c2)
        );
}


.egsWhyChooseConnection.egsWhyChooseLineActive
.egsWhyChooseLineFill{

    opacity:1;
}


/* =========================================================
   FLOW DOTS
========================================================= */

.egsWhyChooseFlowDot{

    position:absolute;

    top:50%;
    left:0;

    width:6px;
    height:6px;

    border-radius:50%;

    transform:translateY(-50%);

    background:var(--egs-c1);

    box-shadow:
        0 0 10px
        var(--egs-c1);

    animation:
        egsWhyChooseFlow
        3s
        linear
        infinite;

    opacity:0;
}


@keyframes egsWhyChooseFlow{

    0%{
        left:0;
        opacity:0;
    }

    12%{
        opacity:1;
    }

    88%{
        opacity:1;
    }

    100%{
        left:100%;
        opacity:0;
    }
}


/* =========================================================
   CARDS
========================================================= */

.egsWhyChooseCard{

    position:absolute;

    width:300px;
    min-height:150px;

    padding:16px 18px;

    border-radius:20px;

    overflow:hidden;

    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,.94),
            rgba(255,255,255,.80)
        );

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

    box-shadow:
        0 16px 34px
        rgba(80,40,60,.10),
        inset 0 1px 0
        rgba(255,255,255,.9);

    backdrop-filter:blur(14px);

    z-index:12;

    opacity:0;

    transform:
        translateY(34px)
        scale(.92);

    transition:
        opacity .7s cubic-bezier(.2,.8,.2,1),
        transform .55s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


.egsWhyChooseCard.egsWhyChooseVisible{

    opacity:1;

    transform:
        translateY(0)
        scale(1);
}


.egsWhyChooseCard::before{

    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:4px;

    background:
        linear-gradient(
            180deg,
            var(--egs-card-c1),
            var(--egs-card-c2)
        );

    opacity:.7;
}


.egsWhyChooseCard:hover{

    transform:
        translateY(-8px)
        scale(1.02) !important;

    border-color:
        var(--egs-card-c1);

    box-shadow:
        0 28px 60px
        rgba(80,40,60,.16),
        0 0 0 1px
        var(--egs-card-c1);
}


/* =========================================================
   CARD COLOR THEMES
========================================================= */

.egsWhyChooseCardPink{
    --egs-card-c1:#ec4899;
    --egs-card-c2:#f97316;
}


.egsWhyChooseCardBlue{
    --egs-card-c1:#3b82f6;
    --egs-card-c2:#06b6d4;
}


.egsWhyChooseCardPurple{
    --egs-card-c1:#8b5cf6;
    --egs-card-c2:#ec4899;
}


.egsWhyChooseCardOrange{
    --egs-card-c1:#f97316;
    --egs-card-c2:#fbbf24;
}


.egsWhyChooseCardGreen{
    --egs-card-c1:#10b981;
    --egs-card-c2:#06b6d4;
}


.egsWhyChooseCardRose{
    --egs-card-c1:#f43f5e;
    --egs-card-c2:#a855f7;
}


/* =========================================================
   CARD SHINE
========================================================= */

.egsWhyChooseCardShine{

    position:absolute;

    width:80px;
    height:180%;

    top:-40%;
    left:-130px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.7),
            transparent
        );

    transform:rotate(18deg);

    opacity:0;

    pointer-events:none;
}


.egsWhyChooseCard:hover
.egsWhyChooseCardShine{

    opacity:1;

    animation:
        egsWhyChooseCardShine
        .9s
        ease
        forwards;
}


@keyframes egsWhyChooseCardShine{

    to{
        left:130%;
    }
}


/* =========================================================
   CARD TOP
========================================================= */

.egsWhyChooseCardTop{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;
}


.egsWhyChooseCardNumber{

    color:#c8b7b6;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.5px;
}


.egsWhyChooseCardIcon{

    position:relative;

    width:42px;
    height:42px;

    display:flex;

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

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--egs-card-c1),
            var(--egs-card-c2)
        );

    font-size:19px;

    color:#fff;

    box-shadow:
        0 10px 22px -6px
        var(--egs-card-c1);

    transition:
        transform .4s
        cubic-bezier(.34,1.56,.64,1);
}


.egsWhyChooseCard:hover
.egsWhyChooseCardIcon{

    transform:
        translateY(-3px)
        rotate(-6deg)
        scale(1.08);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.egsWhyChooseCardContent{
    margin-top:10px;
}


.egsWhyChooseCardKicker{

    margin-bottom:4px;

    color:
        var(--egs-card-c1);

    font-size:12.5px;

    font-weight:800;

    letter-spacing:1.5px;
}


.egsWhyChooseCardContent h3{

    margin:0;

    color:#231d1f;

    font-size:17px;

    line-height:1.22;

    font-weight:700;
}


.egsWhyChooseCardContent h3 strong{

    background:
        linear-gradient(
            90deg,
            var(--egs-card-c1),
            var(--egs-card-c2)
        );

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

    color:transparent;

    font-weight:800;
}


.egsWhyChooseCardContent p{

    margin:6px 0 0;

    color:#000;

    font-size:13px;

    line-height:1.5;
}


.egsWhyChooseProof{

    display:inline-flex;

    align-items:center;

    gap:5px;

    margin-top:9px;

    padding:3px 10px;

    border-radius:20px;

    background:
        color-mix(
            in srgb,
            var(--egs-card-c1) 12%,
            white
        );

    font-size:15.5px;

    font-weight:700;

    color:
        var(--egs-card-c1);
}


.egsWhyChooseProof::before{

    content:"▲";

    font-size:7px;

    color:#22c55e;
}


/* =========================================================
   CARD FOOTER
========================================================= */

.egsWhyChooseCardFooter{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:9px;

    padding-top:8px;

    border-top:
        1px solid
        rgba(120,80,70,.08);
}


.egsWhyChooseCardFooter span{

    color:#b9a8a7;

    font-size:8.5px;

    letter-spacing:1px;
}


.egsWhyChooseCardFooter b{

    width:22px;
    height:22px;

    display:flex;

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

    border-radius:50%;

    background:
        color-mix(
            in srgb,
            var(--egs-card-c1) 10%,
            white
        );

    color:
        var(--egs-card-c1);

    font-size:11px;

    transition:.3s ease;
}


.egsWhyChooseCard:hover
.egsWhyChooseCardFooter b{

    transform:
        rotate(45deg)
        scale(1.1);

    background:
        linear-gradient(
            135deg,
            var(--egs-card-c1),
            var(--egs-card-c2)
        );

    color:#fff;
}


/* =========================================================
   IMPACT BAR
========================================================= */

.egsWhyChooseImpact{

    position:relative;

    z-index:2;

    width:min(1120px,100%);

    min-height:110px;

    margin:20px auto 0;

    padding:26px 34px;

    display:flex;

    align-items:center;

    gap:26px;

    border-radius:26px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(236,72,153,.08),
            rgba(59,130,246,.06),
            rgba(249,115,22,.08)
        ),
        rgba(255,255,255,.86);

    box-shadow:
        0 26px 60px -14px
        rgba(120,40,80,.22),
        0 0 0 1px
        rgba(255,255,255,.6)
        inset;

    backdrop-filter:blur(18px);

    opacity:0;

    transform:
        translateY(24px)
        scale(.97);

    transition:
        opacity .8s cubic-bezier(.2,.8,.2,1),
        transform .8s cubic-bezier(.2,.8,.2,1);
}


.egsWhyChooseImpact.egsWhyChooseVisible{

    opacity:1;

    transform:
        translateY(0)
        scale(1);
}


/* animated border */
/* =========================================================
   STATIC GRADIENT BORDER
========================================================= */

.egsWhyChooseImpact::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1.5px;

    border-radius:26px;

    z-index:0;

    background:
        linear-gradient(
            135deg,
            #ec4899,
            #f97316,
            #3b82f6,
            #8b5cf6
        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    /* STATIC */
    animation:none;
}


@keyframes egsWhyChooseImpactBorder{

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


/* light sweep */

/*.egsWhyChooseImpact::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:
        linear-gradient(
            100deg,
            transparent 40%,
            rgba(255,255,255,.65) 50%,
            transparent 60%
        );

    transform:translateX(-160%);

    animation:
        egsWhyChooseImpactSweep
        5s
        ease-in-out
        infinite;
}*/


@keyframes egsWhyChooseImpactSweep{

    0%,25%{
        transform:translateX(-160%);
    }

    55%{
        transform:translateX(160%);
    }

    100%{
        transform:translateX(160%);
    }
}


/* =========================================================
   IMPACT PULSE
========================================================= */

.egsWhyChooseImpactPulse{

    position:relative;

    z-index:2;

    width:60px;
    height:60px;

    flex-shrink:0;

    display:flex;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(236,72,153,.18),
            transparent 70%
        );
}


.egsWhyChooseImpactRing{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:
        1.5px solid
        rgba(236,72,153,.3);

    animation:
        egsWhyChooseRingPop
        2.2s
        ease-out
        infinite;
}


.egsWhyChooseImpactRing:nth-child(2){

    animation-delay:.7s;

    border-color:
        rgba(249,115,22,.3);
}


@keyframes egsWhyChooseRingPop{

    0%{
        transform:scale(.7);
        opacity:.9;
    }

    100%{
        transform:scale(1.6);
        opacity:0;
    }
}


.egsWhyChooseImpactCore{

    width:14px;
    height:14px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #ec4899,
            #f97316
        );

    box-shadow:
        0 0 20px
        rgba(236,72,153,.6);

    animation:
        egsWhyChooseImpactCorePulse
        2s
        ease-in-out
        infinite;

    position:relative;

    z-index:1;
}


@keyframes egsWhyChooseImpactCorePulse{

    50%{
        transform:scale(1.25);
    }
}


/* =========================================================
   IMPACT CONTENT
========================================================= */

.egsWhyChooseImpactContent{

    position:relative;

    z-index:2;

    flex:1;
}

.egsWhyChooseImpact{
    margin-top:90px;
}

.egsWhyChooseImpactContent small{

    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-bottom:6px;

    color:#c2537a;

    font-size:11px;

    font-weight:800;

    letter-spacing:2.2px;
}


.egsWhyChooseImpactContent small::before{

    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #ec4899,
            #f97316
        );

    animation:
        egsWhyChoosePulseDot
        1.6s
        ease-in-out
        infinite;
}


.egsWhyChooseImpactContent h3{

    margin:0;

    color:#211b1d;

    font-size:
        clamp(
            18px,
            2.4vw,
            24px
        );

    line-height:1.35;

    font-weight:700;
}


.egsWhyChooseImpactContent strong{

    background:
        linear-gradient(
            90deg,
            #ec4899,
            #f97316,
            #8b5cf6
        );

    background-size:200% auto;

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

    color:transparent;

    animation:
        egsWhyChooseGradientFlow
        5s
        linear
        infinite;

    font-weight:800;
}


/* =========================================================
   IMPACT ARROW
========================================================= */

.egsWhyChooseImpactArrow{

    position:relative;

    z-index:2;

    width:52px;
    height:52px;

    flex-shrink:0;

    display:flex;

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

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #ec4899,
            #f97316
        );

    color:#fff;

    font-size:20px;

    font-weight:700;

    box-shadow:
        0 14px 30px -8px
        rgba(236,72,153,.55);

    transition:
        transform .4s
        cubic-bezier(.34,1.56,.64,1),
        box-shadow .4s ease;

    cursor:pointer;
}


.egsWhyChooseImpact:hover
.egsWhyChooseImpactArrow{

    transform:
        rotate(45deg)
        scale(1.12);

    box-shadow:
        0 18px 38px -6px
        rgba(236,72,153,.7);
}

app-company .egsWhyChoosePrismSection {
  padding-bottom: 95px !important;
  margin-bottom: -65px !important;
}
/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:700px){

    .egsWhyChoosePrismSection{
        padding:45px 16px 35px;
    }


    .egsWhyChooseHeader{
        margin-bottom:30px;
    }


    .egsWhyChooseTitle{
        font-size:34px;
    }


    .egsWhyChooseSubtitle{
        font-size:13px;
    }


    .egsWhyChooseExperienceWrapper{
        overflow:visible;
    }


    .egsWhyChooseExperience{

        width:100%;
        height:auto;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:18px;

        transform:none !important;
    }


    .egsWhyChooseCore{

        position:relative;

        left:auto;
        top:auto;

        margin:0 0 10px;
    }


    .egsWhyChooseConnection{
        display:none;
    }


    .egsWhyChooseCard{

        position:relative;

        left:auto !important;
        top:auto !important;

        width:100%;

        max-width:420px;
    }


    .egsWhyChooseImpact{

        margin-top:35px;

        padding:22px 20px;

        gap:15px;

        border-radius:20px;
    }


    .egsWhyChooseImpactPulse{

        width:45px;
        height:45px;
    }


    .egsWhyChooseImpactContent h3{
        font-size:16px;
    }


    .egsWhyChooseImpactArrow{

        width:44px;
        height:44px;

        font-size:17px;
    }
}


@media(max-width:420px){

    .egsWhyChooseTitle{
        font-size:29px;
    }


    .egsWhyChooseCore{
        transform:scale(.9);
    }


    .egsWhyChooseImpactContent small{
        font-size:9px;
        letter-spacing:1.5px;
    }


    .egsWhyChooseImpactContent h3{
        font-size:14px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .egsWhyChoosePrismSection *,
    .egsWhyChoosePrismSection *::before,
    .egsWhyChoosePrismSection *::after{

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

        transition-duration:.01ms !important;
    }
}




























/* =================================
   WHY CHOOSE US SECTION INDEX PAGE
==================================== */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Poppins',sans-serif;}

/* ============ SECTION + NEON-BLACK BACKGROUND ============ */
.why-choose-section{
  position:relative;width:100%;padding:90px 35px 70px;overflow:hidden;
  background:linear-gradient(160deg,#050203 0%,#0f0508 45%,#080203 100%);
}
.why-choose-section .spotlight{
  position:absolute;top:-10%;left:50%;transform:translateX(-50%);
  width:1100px;height:700px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(217,119,6,.16) 0%, rgba(153,27,27,.12) 35%, transparent 70%);
}

.aurora-blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}
.aurora-1{width:600px;height:600px;top:-220px;left:-160px;background:radial-gradient(circle,rgba(217,119,6,.28),transparent 70%);}
.aurora-2{width:560px;height:560px;top:-140px;right:-180px;background:radial-gradient(circle,rgba(153,27,27,.26),transparent 70%);}
.aurora-3{width:480px;height:480px;bottom:-200px;left:25%;background:radial-gradient(circle,rgba(217,119,6,.2),transparent 70%);}
.aurora-4{width:340px;height:340px;bottom:5%;right:5%;background:radial-gradient(circle,rgba(153,27,27,.2),transparent 70%);}

.rim-top,.rim-bottom{position:absolute;left:0;right:0;height:1px;z-index:1;background:linear-gradient(90deg,transparent,rgba(236,72,153,.6),rgba(249,115,22,.6),transparent);}
.rim-top{top:0;} .rim-bottom{bottom:0;}

.grid-overlay{
  position:absolute;inset:0;z-index:0;opacity:.18;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 30%,black 0%,transparent 70%);
}

.why-sparkles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.why-sparkle-dot{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.9),0 0 18px 6px rgba(255,255,255,.4);animation:sparkleFloat 6s ease-in-out infinite;}
@keyframes sparkleFloat{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-20px)}}
.shooting-star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;box-shadow:0 0 6px 2px rgba(255,255,255,.8);opacity:0;z-index:1;pointer-events:none;}

/* ============ HEADING ============ */
.why-choose-heading{position:relative;z-index:2;text-align:center;max-width:740px;margin:0 auto 50px;}

.why-tag{
  position:relative;display:inline-flex;align-items:center;gap:10px;padding:9px 22px;border-radius:30px;margin-bottom:26px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);overflow:hidden;
  opacity:0;animation:tagPop .6s cubic-bezier(.34,1.56,.64,1) forwards .1s;
}
.why-tag::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);animation:tagShimmer 3.2s ease-in-out infinite;}
.why-tag-icon{font-size:13px;color:#dc2626;position:relative;z-index:1;animation:iconMorph 2.8s ease-in-out infinite;}
.why-tag-text{position:relative;z-index:1;font-size:12.5px;font-weight:700;letter-spacing:3px;background:linear-gradient(90deg,#dc2626,#d97706,#dc2626);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 3s linear infinite;}

.why-main-title{position:relative;font-size:44px;font-weight:900;line-height:1.22;margin:0 0 22px;}
.title-line{display:block;}
.wipe-text{
  display:inline-block;
  background-image:linear-gradient(90deg,#f8f4fb 0%,#f8f4fb 50%,rgba(248,244,251,.06) 50%,rgba(248,244,251,.06) 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wipeIn 1s cubic-bezier(.16,1,.3,1) forwards;
  text-shadow:0 0 40px rgba(236,72,153,.15);
}
.title-line.l1 .wipe-text{animation-delay:.35s;}
.title-line.l2 .wipe-text{animation-delay:.75s;}
.why-main-title .accent{
  background:linear-gradient(90deg,#dc2626 0%,#d97706 45%,#991b1b 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite;
}

.why-subtext{max-width:600px;margin:0 auto;color:#a99bb5;font-size:17px;line-height:1.6;opacity:0;animation:fadeUp .6s ease forwards 1.2s;}
.why-divider-wrap{margin-top:22px;display:flex;justify-content:center;}
.why-divider{height:2px;border-radius:2px;width:0;background:linear-gradient(90deg,transparent,#dc2626,#d97706,transparent);animation:drawDivider .9s ease forwards 1.5s;}

/* ============ CARDS — asymmetric cut shape ============ */
.why-cards-wrap{position:relative;max-width:1500px;margin:0 auto;display:flex;gap:24px;justify-content:center;flex-wrap:wrap;padding-top:56px;z-index:2;}
.why-connector-svg{position:absolute;left:0;top:-6px;width:100%;height:100px;pointer-events:none;z-index:0;}

.why-card{position:relative;width:192px;text-align:center;perspective:800px;opacity:0;transform:translateY(30px);}
.why-card::after{
  content:"";position:absolute;left:50%;top:50%;width:190px;height:190px;
  transform:translate(-50%,-50%) scale(.7);border-radius:50%;
  background:radial-gradient(circle,var(--glow) 0%,transparent 68%);
  filter:blur(22px);opacity:0;z-index:-1;pointer-events:none;
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.why-card.card-pop::after{opacity:.85;transform:translate(-50%,-50%) scale(1.15);}
.why-card.reveal{animation:whyCardIn .7s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes whyCardIn{to{opacity:1;transform:translateY(0);}}

.why-card-inner{position:relative;transition:transform .25s ease;transform-style:preserve-3d;}

.why-card-body{
  position:relative;z-index:1;padding:56px 18px 28px;min-height:236px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07);
  clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
  overflow:hidden;
  transition:box-shadow .7s cubic-bezier(.22,1,.36,1);
}
.why-card-body::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:conic-gradient(from 0deg,rgba(236,72,153,.8),rgba(249,115,22,.8),rgba(168,85,247,.8),rgba(6,182,212,.8),rgba(236,72,153,.8));
  animation:spinBorder 6s linear infinite;opacity:.5;
}
.why-card-body::after{
  content:"";position:absolute;inset:1.5px;z-index:-1;
  background:linear-gradient(160deg,#0a0512,#150a20);
  clip-path:polygon(25px 0,100% 0,100% calc(100% - 25px),calc(100% - 25px) 100%,0 100%,0 25px);
}

.why-card-body .corner-tl,.why-card-body .corner-br{position:absolute;width:26px;height:26px;z-index:2;pointer-events:none;}
.corner-tl{top:0;left:0;border-top:2px solid rgba(236,72,153,.6);border-left:2px solid transparent;}
.corner-br{bottom:0;right:0;border-bottom:2px solid rgba(249,115,22,.6);border-right:2px solid transparent;}
.why-badge{
  position:absolute;
  top:-32px;
  left:50%;
  margin-left:-40px;

  width:80px;
  height:80px;
  z-index:3;

  background:radial-gradient(
    circle at 35% 30%,
    rgba(255,255,255,.14),
    rgba(255,255,255,.025)
  );

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

  box-shadow:
    0 0 0 5px rgba(255,255,255,.05),
    0 0 30px 6px var(--glow,rgba(236,72,153,.4));

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

  transform-origin:center center;

  animation:
    blobMorph 7s ease-in-out infinite,
    badgeFloat 3.2s ease-in-out infinite;
}
.why-card:nth-child(2) .why-badge{animation-delay:0s, .3s;}
.why-card:nth-child(3) .why-badge{animation-delay:1s, .6s;}
.why-card:nth-child(4) .why-badge{animation-delay:2s, .9s;}
.why-card:nth-child(5) .why-badge{animation-delay:3s, 1.2s;}
.why-card:nth-child(6) .why-badge{animation-delay:4s, 1.5s;}

.why-badge::after{content:"";position:absolute;inset:-8px;border-radius:inherit;border:2px solid var(--glow,rgba(236,72,153,.6));opacity:0;}
.why-card:hover .why-badge::after{animation:rippleOut .8s ease-out;}

.why-badge svg{width:38px;height:38px;transition:transform .35s cubic-bezier(.34,1.56,.64,1);position:relative;z-index:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}
.why-card:hover .why-badge svg{transform:scale(1.2) rotate(-10deg);}

.why-card-body h4{position:relative;z-index:1;font-size:16.5px;font-weight:800;color:#fdf3ee;margin:0 0 8px;}
.why-card-body p{position:relative;z-index:1;font-size:16.5px;color: wheat;line-height:1.6;margin:0;}

.why-card.card-pop .why-card-body{animation:popBodyPulse 1.6s cubic-bezier(.22,1,.36,1);}
.why-card.card-pop .why-card-body{box-shadow:0 30px 70px -18px var(--glow), inset 0 1px 0 rgba(255,255,255,.2);animation:popBodyPulse 1.6s cubic-bezier(.22,1,.36,1);}

.why-card::after{
  content:"";position:absolute;left:50%;top:50%;width:190px;height:190px;
  transform:translate(-50%,-50%) scale(.7);border-radius:50%;
  background:radial-gradient(circle,var(--glow) 0%,transparent 68%);
  filter:blur(22px);opacity:0;z-index:-1;pointer-events:none;
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.why-card.card-pop::after{opacity:.85;transform:translate(-50%,-50%) scale(1.15);}
/* ============ KEYFRAMES ============ */
@keyframes auroraDrift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes spotlightPulse{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
@keyframes auroraMove1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.15)}}
@keyframes auroraMove2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-35px,25px) scale(1.1)}}
@keyframes auroraMove3{0%,100%{transform:translate(0,0) scale(1);opacity:.6}50%{transform:translate(20px,-30px) scale(1.2);opacity:.9}}
@keyframes tagPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes tagShimmer{0%{transform:translateX(-100%)}50%,100%{transform:translateX(100%)}}
@keyframes iconMorph{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.3)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes wipeIn{to{background-position:0% 0;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes drawDivider{to{width:70px}}
@keyframes spinBorder{to{transform:rotate(360deg)}}
@keyframes blobMorph{
  0%,100%{border-radius:60% 40% 55% 45%/45% 55% 40% 60%;}
  33%{border-radius:45% 55% 65% 35%/55% 40% 60% 45%;}
  66%{border-radius:55% 45% 40% 60%/40% 60% 45% 55%;}
}
@keyframes badgeFloat{
  0%,100%{
    translate:0 0;
  }

  50%{
    translate:0 -6px;
  }
}
@keyframes rippleOut{from{opacity:.8;transform:scale(.7)}to{opacity:0;transform:scale(1.5)}}
@keyframes popBodyPulse{
  0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}
  40%{box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
  70%{box-shadow:inset 0 1px 0 rgba(255,255,255,.18);}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
}
@keyframes popBadgeBounce{
  0%{transform:translateX(-50%) scale(1);}
  35%{transform:translateX(-50%) scale(1.32);}
  55%{transform:translateX(-50%) scale(1.12);}
  75%{transform:translateX(-50%) scale(1.26);}
  100%{transform:translateX(-50%) scale(1.22);}
}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* ============ RESPONSIVE ============ */
@media(max-width:1100px){.why-cards-wrap{gap:16px;}.why-card{width:162px;}.why-connector-svg{display:none;}}
@media(max-width:768px){
  .why-main-title{font-size:30px;}
  .why-subtext{font-size:14.5px;}
  .why-card{width:100%;max-width:320px;}
  .why-stats-bar{clip-path:none;border-radius:24px;justify-content:center;padding:24px;}
}

/* ===================== DETAILED SERVICES AUTO SHOWCASE ===================== */

.dsv-section{
    position: relative;
    padding: 65px 30px;
    background: radial-gradient(120% 100% at 50% 0%, #0a0508 0%, #050305 45%, #000000 100%);
    color: #fff;
    overflow: hidden;
}

.dsv-section::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(236,47,123,.22), transparent 40%),
        radial-gradient(circle at 88% 15%, rgba(168,85,247,.2), transparent 40%),
        radial-gradient(circle at 80% 88%, rgba(255,143,77,.18), transparent 40%),
        radial-gradient(circle at 15% 85%, rgba(56,189,248,.14), transparent 40%);
    filter: blur(80px);
    animation: dsvNebulaDrift 16s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes dsvNebulaDrift{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(20px,-15px) scale(1.05); }
}

.dsv-stars{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dsv-star{
    position: absolute; border-radius: 50%;
    background: #fff;
    animation: dsvTwinkle 3s ease-in-out infinite;
}
@keyframes dsvTwinkle{ 0%,100%{ opacity: .15; } 50%{ opacity: 1; } }

.dsv-shooting-star{
    position: absolute;
    width: 2px; height: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px 1px #fff;
    opacity: 0;
    animation: dsvShoot 6s ease-in infinite;
}
.dsv-shooting-star::before{
    content: "";
    position: absolute;
    top: 50%; right: 0;
    width: 80px; height: 1px;
    background: linear-gradient(90deg, transparent, #fff);
    transform: translateY(-50%);
}
@keyframes dsvShoot{
    0%{ opacity: 0; transform: translate(0,0); }
    3%{ opacity: 1; }
    15%{ opacity: 0; transform: translate(-260px, 160px); }
    100%{ opacity: 0; }
}

.dsv-heading{ position: relative; z-index: 1; text-align: center; max-width: 700px; margin: 0 auto 40px; }
.dsv-tag{ font-size: 12px; font-weight: 700; letter-spacing: 3px; color: #ff9dc4; margin-bottom: 14px; }
.dsv-heading h2{ font-size: 36px; font-weight: 800; margin-bottom: 12px; color: #fff; }
.dsv-word{
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    animation: dsvWordIn .6s ease forwards;
}
@keyframes dsvWordIn{ to{ opacity: 1; transform: translateY(0); } }
.dsv-accent{
    background: linear-gradient(90deg,#ec2f7b,#ff8f4d,#a855f7,#ec2f7b);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: dsvGradientMove 4s linear infinite;
}
@keyframes dsvGradientMove{ to{ background-position: 300% 0; } }
.dsv-heading p{ font-size: 14px; color: #d8c0e0; }

.dsv-tabs{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px;
}

.dsv-tab{
    flex: 0 0 auto !important;
    font-size: 13.5px !important;
    padding: 12px 22px !important;
}

/* 4th button → row 2 center */
.dsv-tab:nth-child(4){
    grid-column: 2 !important;
}

/* 5th button → row 2 center */
.dsv-tab:nth-child(5){
    grid-column: 2 !important;
}
/* Keep all buttons in their natural width */
.dsv-tabs > * {
  width: auto !important;
  margin: 0 !important;
}

.dsv-tab{
    padding: 10px 18px; border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    font-size: 12.5px; color: #e8d8f0;
    cursor: pointer; transition: all .3s ease;
    white-space: nowrap;
}
.dsv-tab.dsv-active{
    background: linear-gradient(135deg,#ec2f7b,#ff8f4d);
    color: #fff; border-color: transparent;
    box-shadow: 0 6px 20px rgba(236,47,123,.4);
}

.dsv-showcase-wrap{ position: relative; z-index: 1; max-width: 1050px; margin: 0 auto; }

.dsv-nav-btn{
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 5; overflow: hidden;
    animation: dsvNavPulse 2.5s ease-in-out infinite;
    transition: all .3s ease;
}
.dsv-nav-btn::before{
    content: "";
    position: absolute; top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
    transform: skewX(-20deg);
    animation: dsvNavShine 3s ease-in-out infinite;
}
@keyframes dsvNavShine{ 0%{left:-75%;} 50%{left:130%;} 100%{left:130%;} }
@keyframes dsvNavPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(236,47,123,.3);} 50%{box-shadow:0 0 0 8px rgba(236,47,123,0);} }
.dsv-nav-btn:hover{ background: linear-gradient(135deg,#ec2f7b,#ff8f4d); transform: translateY(-50%) scale(1.12); }
.dsv-prev{ left: -68px; }
.dsv-next{ right: -68px; }
.dsv-nav-btn svg{ width: 20px; height: 20px; stroke: #fff; position: relative; z-index: 1; }

.dsv-box{
    position: relative;
    background: linear-gradient(135deg, rgba(236,47,123,.1), rgba(168,85,247,.06), rgba(255,143,77,.08));
    border: 1.5px solid transparent;
    border-radius: 28px;
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    min-height: 380px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    transition: transform .35s ease, box-shadow .35s ease;
}
.dsv-box::before{
    content: "";
    position: absolute; inset: 0;
    padding: 1.5px;
    border-radius: 28px;
    background: conic-gradient(from 0deg, #ec2f7b, #a855f7, #ff8f4d, #ffd166, #ec2f7b);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: dsvBorderSpin 6s linear infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes dsvBorderSpin{ to{ transform: rotate(360deg); } }
.dsv-box:hover{ transform: translateY(-6px); box-shadow: 0 25px 60px rgba(0,0,0,.5), 0 0 50px rgba(236,47,123,.2); }

.dsv-corner-dot{ position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--dsv-accent,#ec2f7b); box-shadow: 0 0 10px 2px var(--dsv-accent,#ec2f7b); z-index: 2; animation: dsvCornerPulse 2.4s ease-in-out infinite; }
.dsv-corner-dot.tl{ top:14px; left:14px; }
.dsv-corner-dot.tr{ top:14px; right:14px; animation-delay:.3s; }
.dsv-corner-dot.bl{ bottom:14px; left:14px; animation-delay:.6s; }
.dsv-corner-dot.br{ bottom:14px; right:14px; animation-delay:.9s; }
@keyframes dsvCornerPulse{ 0%,100%{opacity:.5; transform:scale(1);} 50%{opacity:1; transform:scale(1.4);} }

.dsv-box-content{ position: relative; z-index: 2; opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s ease; }
.dsv-box-content.dsv-show{ opacity: 1; transform: translateY(0); }

.dsv-num{ font-size: 14px; font-weight: 700; color: var(--dsv-accent,#ec2f7b); margin-bottom: 8px; }
.dsv-box-content h3{
    font-size: 35px; font-weight: 800; margin-bottom: 14px;
    background: linear-gradient(90deg, #fff, var(--dsv-accent,#fff));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dsv-box-content p{ font-size: 14px; color: #fff; line-height: 1.65; margin-bottom: 22px; }

.dsv-checklist{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-bottom: 26px; }
.dsv-checklist span{ font-size: 12.5px; color: #fff; display: flex; align-items: center; gap: 6px; }
.dsv-checklist span::before{ content: "✓"; color: var(--dsv-accent,#ec2f7b); font-weight: 700; }

.dsv-explore-btn{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 24px; border-radius: 999px;
    border: 1px solid var(--dsv-accent,#ec2f7b);
    color: #fff; font-size: 13px; font-weight: 600;
    background: transparent; cursor: pointer;
    transition: all .3s ease;
}
.dsv-explore-btn:hover{ background: var(--dsv-accent,#ec2f7b); box-shadow: 0 8px 20px rgba(236,47,123,.4); }

.dsv-mockup{
    position: relative;
    z-index: 2;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.dsv-mockup-img{
    position: relative;
    z-index: 2;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
    display: block;
    opacity: 0;
    transform: scale(.9);

    border: 2px solid transparent;
    border-radius: 16px;

    box-shadow:
        0 0 0 1px rgba(236,72,153,.35),
        0 0 25px rgba(236,72,153,.25),
        0 0 45px rgba(249,115,22,.18);
    filter: brightness(1.5) contrast(1.1) saturate(1.25)
            drop-shadow(0 20px 45px rgba(0,0,0,.6));

    transition: opacity .4s ease, transform .4s ease;
    animation: dsvImgFloat 4s ease-in-out infinite;
}

.dsv-mockup::before{
    width: 420px;            /* glow-ஐயும் கூட்டுங்க, image size-க்கு match ஆக */
    height: 420px;
}


.dsv-mockup-img.dsv-show{ opacity: 1; transform: scale(1); }
@keyframes dsvImgFloat{ 0%,100%{ margin-top:0; } 50%{ margin-top:-14px; } }
.dsv-mockup::before{
    content: "";
    position: absolute;
    width: 340px; height: 340px;
    background: radial-gradient(circle, var(--dsv-accent, #ec2f7b) 0%, transparent 70%);
    opacity: .5;
    filter: blur(45px);
    z-index: 1;
    animation: dsvGlowPulse 3.5s ease-in-out infinite;
}
@keyframes dsvGlowPulse{ 0%,100%{ transform: scale(1); opacity: .4; } 50%{ transform: scale(1.15); opacity: .6; } }

.dsv-icon-circle{
    position: relative; z-index: 2;
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--dsv-accent,#ec2f7b);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 0 30px var(--dsv-accent,#ec2f7b);
}
.dsv-icon-circle span{ font-size: 26px; }

.dsv-progress-bar{ position: relative; z-index: 1; max-width: 1050px; margin: 24px auto 0; height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.dsv-progress-fill{ height: 100%; width: 0%; background: linear-gradient(90deg,#ec2f7b,#a855f7,#ff8f4d); }

.dsv-dots{ position: relative; z-index: 1; display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.dsv-dot{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; transition: all .3s ease; }
.dsv-dot.dsv-active{ width: 26px; border-radius: 5px; background: linear-gradient(90deg,#ec2f7b,#ff8f4d); box-shadow: 0 0 10px rgba(236,47,123,.6); }

.dsv-heading, .dsv-tabs, .dsv-showcase-wrap, .dsv-progress-bar, .dsv-dots{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s ease, transform .8s ease;
}

.dsv-heading.dsv-reveal{ opacity: 1; transform: translateY(0); }
.dsv-tabs.dsv-reveal{ opacity: 1; transform: translateY(0); transition-delay: .15s; }
.dsv-showcase-wrap.dsv-reveal{ opacity: 1; transform: translateY(0); transition-delay: .3s; }
.dsv-progress-bar.dsv-reveal{ opacity: 1; transform: translateY(0); transition-delay: .45s; }
.dsv-dots.dsv-reveal{ opacity: 1; transform: translateY(0); transition-delay: .5s; }
/* =========================================================
   DSV SECTION
   FULL MOBILE RESPONSIVE
   ========================================================= */

@media (max-width: 900px){

    /* ---------- MAIN SECTION ---------- */

    .dsv-section{
        width: 100%;
        min-height: auto;
        padding: 70px 24px 50px;
        overflow: hidden;
    }


    /* ---------- HEADING ---------- */

    .dsv-heading{
        width: 100%;
        text-align: center;
    }

    .dsv-heading h2{
        font-size: 30px !important;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .dsv-heading p{
        font-size: 13px !important;
        line-height: 1.6;
        max-width: 620px;
        margin: 0 auto;
    }


    /* ---------- TABS ---------- */

    .dsv-tabs{
        width: 100%;
        max-width: 700px;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;

        margin: 25px auto 0 !important;
        padding: 0 !important;

        justify-items: stretch;
        align-items: center;
    }

    .dsv-tab{
        width: 100% !important;
        min-width: 0;

        padding: 10px 8px !important;

        font-size: 11.5px !important;
        line-height: 1.25;

        text-align: center;

        white-space: normal !important;
        overflow-wrap: break-word;

        box-sizing: border-box;
    }

    /* Remove desktop grid placement */

    .dsv-tab:nth-child(1),
    .dsv-tab:nth-child(2),
    .dsv-tab:nth-child(3),
    .dsv-tab:nth-child(4){
        grid-column: auto !important;
    }

    /* 5th button centered */

    .dsv-tab:nth-child(5){
        grid-column: 1 / 3 !important;
        width: 65% !important;
        justify-self: center;
    }


    /* ---------- SHOWCASE ---------- */

    .dsv-showcase-wrap{
        width: 100%;
        margin-top: 25px;
    }

    .dsv-box{
        width: 100%;
        grid-template-columns: 1fr !important;

        padding: 30px !important;

        min-height: auto !important;

        gap: 20px;
    }


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

    .dsv-box-content{
        width: 100%;
        text-align: center;
    }

    .dsv-icon-circle{
        margin-left: auto;
        margin-right: auto;
    }

    .dsv-num{
        margin-top: 8px;
    }

    .dsv-box-content h3{
        font-size: 24px !important;
        line-height: 1.3;
    }

    .dsv-box-content p{
        font-size: 13px !important;
        line-height: 1.6;
    }


    /* ---------- CHECKLIST ---------- */

    .dsv-checklist{
        grid-template-columns: 1fr !important;
        gap: 8px;
        text-align: left;
    }


    /* ---------- MOCKUP ---------- */

    .dsv-mockup{
        width: 100%;
        height: 260px !important;

        margin-top: 5px;

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

    .dsv-mockup::before{
        width: 230px;
        height: 230px;
    }

    .dsv-mockup-img{
        max-width: 90%;
        max-height: 240px;

        object-fit: contain;
    }


    /* ---------- NAVIGATION BUTTONS ---------- */

    .dsv-nav-btn{
        width: 40px !important;
        height: 40px !important;

        top: 20% !important;

        z-index: 10;
    }

    .dsv-prev{
        left: 5px !important;
    }

    .dsv-next{
        right: 5px !important;
    }

    .dsv-nav-btn svg{
        width: 16px !important;
        height: 16px !important;
    }


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

    .dsv-explore-btn{
        max-width: 100%;
        padding: 11px 18px;
        font-size: 12px;
    }


    /* ---------- PROGRESS ---------- */

    .dsv-progress-bar{
        width: 90%;
        margin: 20px auto 0;
    }

    .dsv-dots{
        margin-top: 12px;
    }
}


/* =========================================================
   MOBILE — 600px
   ========================================================= */

@media (max-width: 600px){

    .dsv-section{
        padding: 60px 18px 40px;
    }


    /* ---------- HEADING ---------- */

    .dsv-heading h2{
        font-size: 27px !important;
    }

    .dsv-heading p{
        font-size: 12px !important;
        padding: 0 5px;
    }


    /* ---------- TABS ---------- */

    .dsv-tabs{
        margin-top: 22px !important;
        gap: 7px !important;
    }

    .dsv-tab{
        font-size: 10.5px !important;
        padding: 9px 6px !important;

        min-height: 38px;

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

    .dsv-tab:nth-child(5){
        width: 72% !important;
    }


    /* ---------- BOX ---------- */

    .dsv-box{
        padding: 25px 20px !important;
        border-radius: 20px;
    }

    .dsv-box-content h3{
        font-size: 22px !important;
    }

    .dsv-box-content p{
        font-size: 12.5px !important;
    }


    /* ---------- ICON ---------- */

    .dsv-icon-circle{
        width: 58px;
        height: 58px;
    }


    /* ---------- MOCKUP ---------- */

    .dsv-mockup{
        height: 220px !important;
    }

    .dsv-mockup::before{
        width: 190px;
        height: 190px;
    }

    .dsv-mockup-img{
        max-width: 88%;
        max-height: 205px;
    }


    /* ---------- ARROWS ---------- */

    .dsv-nav-btn{
        width: 36px !important;
        height: 36px !important;

        top: 18% !important;
    }

    .dsv-prev{
        left: 3px !important;
    }

    .dsv-next{
        right: 3px !important;
    }

    .dsv-nav-btn svg{
        width: 14px !important;
        height: 14px !important;
    }


    /* ---------- CORNER DECORATION ---------- */

    .dsv-corner-dot{
        display: none;
    }
}


/* =========================================================
   SMALL MOBILE — 480px
   ========================================================= */

@media (max-width: 480px){

    .dsv-section{
        padding: 52px 14px 35px;
    }


    /* ---------- HEADING ---------- */

    .dsv-heading h2{
        font-size: 24px !important;
        line-height: 1.25;
    }

    .dsv-heading p{
        font-size: 11.5px !important;
        line-height: 1.55;
    }


    /* ---------- TABS ---------- */

    .dsv-tabs{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: 100%;
        gap: 6px !important;

        margin-top: 20px !important;
    }

    .dsv-tab{
        font-size: 10px !important;

        min-height: 36px;

        padding: 8px 5px !important;

        border-radius: 18px;
    }

    .dsv-tab:nth-child(5){
        grid-column: 1 / 3 !important;
        width: 70% !important;
    }


    /* ---------- SHOWCASE ---------- */

    .dsv-showcase-wrap{
        margin-top: 22px;
    }

    .dsv-box{
        padding: 22px 16px !important;
        gap: 15px;
    }


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

    .dsv-num{
        font-size: 12px;
    }

    .dsv-box-content h3{
        font-size: 20px !important;
    }

    .dsv-box-content p{
        font-size: 12px !important;
        line-height: 1.55;
    }


    /* ---------- CHECKLIST ---------- */

    .dsv-checklist{
        gap: 7px;
    }


    /* ---------- MOCKUP ---------- */

    .dsv-mockup{
        height: 190px !important;
        margin-top: 0;
    }

    .dsv-mockup::before{
        width: 165px;
        height: 165px;
    }

    .dsv-mockup-img{
        max-width: 92%;
        max-height: 180px;
    }


    /* ---------- ARROWS ---------- */

    .dsv-nav-btn{
        width: 34px !important;
        height: 34px !important;

        top: 16% !important;
    }

    .dsv-nav-btn svg{
        width: 13px !important;
        height: 13px !important;
    }


    /* ---------- PROGRESS ---------- */

    .dsv-progress-bar{
        width: 85%;
        height: 3px;
    }
}


/* =========================================================
   VERY SMALL MOBILE — 380px
   ========================================================= */

@media (max-width: 380px){

    .dsv-section{
        padding: 45px 11px 30px;
    }


    .dsv-heading h2{
        font-size: 21px !important;
    }

    .dsv-heading p{
        font-size: 10.5px !important;
    }


    /* ---------- TABS ---------- */

    .dsv-tabs{
        gap: 5px !important;
    }

    .dsv-tab{
        font-size: 9px !important;
        padding: 7px 4px !important;
        min-height: 34px;
    }

    .dsv-tab:nth-child(5){
        width: 75% !important;
    }


    /* ---------- BOX ---------- */

    .dsv-box{
        padding: 20px 13px !important;
    }

    .dsv-box-content h3{
        font-size: 18px !important;
    }

    .dsv-box-content p{
        font-size: 11px !important;
    }


    /* ---------- MOCKUP ---------- */

    .dsv-mockup{
        height: 170px !important;
    }

    .dsv-mockup::before{
        width: 145px;
        height: 145px;
    }

    .dsv-mockup-img{
        max-height: 160px;
    }


    /* ---------- ARROWS ---------- */

    .dsv-nav-btn{
        width: 31px !important;
        height: 31px !important;
    }

    .dsv-nav-btn svg{
        width: 12px !important;
        height: 12px !important;
    }

    .dsv-prev{
        left: 1px !important;
    }

    .dsv-next{
        right: 1px !important;
    }
}


/* =========================================================
   EXTRA SMALL — 340px
   ========================================================= */

@media (max-width: 340px){

    .dsv-section{
        padding-left: 8px;
        padding-right: 8px;
    }

    .dsv-heading h2{
        font-size: 19px !important;
    }

    .dsv-tab{
        font-size: 8.5px !important;
        padding: 7px 3px !important;
    }

    .dsv-box{
        padding: 18px 11px !important;
    }

    .dsv-box-content h3{
        font-size: 17px !important;
    }

    .dsv-mockup{
        height: 155px !important;
    }

    .dsv-mockup::before{
        width: 130px;
        height: 130px;
    }
}
/* =================== END DETAILED SERVICES AUTO SHOWCASE =================== */



/* =============================
   SECTION WRAPPER + BACKGROUND GLOW BLOBS
   ============================= */
.section{
  position:relative;
  padding:70px 40px;
  background:linear-gradient(135deg,#fdf1ec 0%,#fbe2e6 45%,#ffe4d1 100%);
  overflow:hidden;
}
.glow-blob{position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none;}
.glow-orange{width:300px;height:300px;background:radial-gradient(circle,rgba(255,138,61,.35),transparent 70%);top:-80px;right:-60px;}
.glow-pink{width:260px;height:260px;background:radial-gradient(circle,rgba(224,68,122,.3),transparent 70%);bottom:-70px;left:-40px;}

/* connected dot network - subtle constellation behind content */
.net-svg{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.16;z-index:0;pointer-events:none;
}

/* floating brand orb balls (echoes the hero sphere visuals) */
.orb{
  position:absolute;border-radius:50%;
  animation:floatOrb 7s ease-in-out infinite;
  pointer-events:none;z-index:0;
}

/* particles rising slowly from the bottom */
.particle{
  position:absolute;bottom:0;border-radius:50%;
  background:#ff8a3d;
  animation:rise linear infinite;
  pointer-events:none;z-index:0;
}

/* =============================
   TWO-COLUMN LAYOUT (Journey | About)
   ============================= */
.wrap{
  display:grid;grid-template-columns:1fr 1.3fr;gap:60px;
  max-width:1100px;margin:0 auto;position:relative;z-index:1;
}

/* =============================
   OUR JOURNEY (left column - vertical timeline)
   ============================= */
.jr-label{font-size:16px;font-weight:700;letter-spacing:1.5px;color:#241a1f;margin-bottom:40px;}
.jr-timeline{position:relative;}
.jr-row{
  display:flex;gap:24px;align-items:flex-start;position:relative;
  padding-bottom:50px;opacity:0;animation:fadein .5s ease forwards;cursor:pointer;
}
/* staggered entrance timing for each milestone row */
.jr-row:nth-of-type(1){animation-delay:.3s;}
.jr-row:nth-of-type(2){animation-delay:.9s;}
.jr-row:nth-of-type(3){animation-delay:1.5s;}
.jr-row:nth-of-type(4){animation-delay:2.1s;padding-bottom:0;}
.jr-icon{
  width:46px;height:46px;border-radius:50%;background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:0 3px 8px rgba(0,0,0,.08);position:relative;z-index:1;
  animation:dotglow 2.4s ease-in-out infinite;
}
.jr-icon.last{background:linear-gradient(135deg,#e0447a,#ff8a3d);}
.jr-year{font-size:22px;font-weight:700;color:#241a1f;}
.jr-year.last{color:#ff8a3d;}
.jr-desc{font-size:15px;color:#8a7a80;margin-top:4px;}
.jr-note{font-size:15px;color:#a08a90;font-style:italic;margin:10px 0 28px;}

/* =============================
   EXPLORE MORE BUTTON (dark base + gradient fill on hover)
   ============================= */
.jr-btn{
  position:relative;
  display:inline-flex;align-items:center;gap:14px;
  padding:10px 10px 10px 28px;border-radius:50px;
  font-size:15px;font-weight:600;color:#fff;background:#241a1f;
  animation:glowpulse 2.6s ease-in-out infinite;
  overflow:hidden;
  transition:transform .25s ease, padding-right .25s ease, box-shadow .25s ease;
}
/* gradient layer that slides in from the left on hover */
.jr-btn::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,#e0447a,#ff8a3d);
  transform:translateX(-100%);
  transition:transform .35s ease;
  z-index:0;
}
.jr-btn:hover::before{transform:translateX(0);}
.jr-btn:hover{transform:translateY(-3px);padding-right:4px;box-shadow:0 10px 24px rgba(224,68,122,.4);}
.jr-btn-text{position:relative;z-index:1;}
.jr-arrow{
  position:relative;z-index:1;
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#e0447a,#ff8a3d);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;
  transition:transform .3s ease;
}
.jr-btn:hover .jr-arrow{transform:translateX(4px) rotate(45deg);}

/* =============================
   WHO WE ARE (right column - about text + stat cards)
   ============================= */

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Poppins',sans-serif;}

.section{
  position:relative;
  padding:75px 40px;
  background:linear-gradient(135deg,#fdf1ec 0%,#fbe2e6 45%,#ffe4d1 100%);
  background-size:200% 200%;
  animation:bgDrift 14s ease-in-out infinite;
  overflow:hidden;
}
.glow-blob{position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none;}
.glow-orange{width:300px;height:300px;background:radial-gradient(circle,rgba(255,138,61,.35),transparent 70%);top:-80px;right:-60px;animation:blobDrift1 10s ease-in-out infinite;}
.glow-pink{width:260px;height:260px;background:radial-gradient(circle,rgba(224,68,122,.3),transparent 70%);bottom:-70px;left:-40px;animation:blobDrift2 11s ease-in-out infinite;}
.glow-yellow{width:220px;height:220px;background:radial-gradient(circle,rgba(255,210,122,.3),transparent 70%);top:40%;left:45%;animation:blobDrift3 13s ease-in-out infinite;}

/* soft moving sheen sweeping across the whole section */
.bg-sheen{
  position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  animation:sheenSweep 7s ease-in-out infinite;
}

.net-svg{position:absolute;inset:0;width:100%;height:100%;opacity:.16;z-index:0;pointer-events:none;}
.orb{position:absolute;border-radius:50%;animation:floatOrb 7s ease-in-out infinite;pointer-events:none;z-index:0;}
.particle{position:absolute;bottom:0;border-radius:50%;background:#ff8a3d;animation:rise linear infinite;pointer-events:none;z-index:0;}

.wrap{
  display:grid;grid-template-columns:1fr 1.3fr;gap:60px;
  max-width:1100px;margin:0 auto;position:relative;z-index:1;
}

/* ============ SCROLL-IN COLUMNS ============ */
.col-journey{
  opacity:0;transform:translateX(-50px);
  transition:opacity .8s ease, transform .8s ease;
}
.col-journey.in-view{opacity:1;transform:translateX(0);}
.col-about{
  opacity:0;transform:translateX(50px);
  transition:opacity .8s ease, transform .8s ease;
}
.col-about.in-view{opacity:1;transform:translateX(0);}

/* ============ JOURNEY (LEFT) ============ */
.jr-label{font-size:18px;font-weight:900;letter-spacing:1.5px;color:#241a1f;margin-bottom:40px;}
.jr-timeline{position:relative;}

.jr-row{
  display:flex;gap:24px;align-items:flex-start;position:relative;
  padding-bottom:50px;cursor:pointer;
  opacity:0;transform:translateX(-18px);
  transition:opacity .6s ease, transform .6s ease;
}
.jr-row.in-view{opacity:1;transform:translateX(0);}
.jr-row:nth-of-type(1){transition-delay:.05s;}
.jr-row:nth-of-type(2){transition-delay:.2s;}
.jr-row:nth-of-type(3){transition-delay:.35s;}
.jr-row:nth-of-type(4){transition-delay:.5s;padding-bottom:0;}

/* --- icon (dot) --- */
.jr-icon{
  width:49px;height:49px;border-radius:50%;background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:0 3px 8px rgba(0,0,0,.08);position:relative;z-index:2;
  animation:dotglow 2.4s ease-in-out infinite;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}
.jr-row:hover .jr-icon{transform:scale(1.15) rotate(-8deg);}
.jr-icon.last{
  background:linear-gradient(135deg,#e0447a,#ff8a3d);
  width:56px;height:56px;font-size:24px;
  animation:dotglowBig 1.8s ease-in-out infinite;
}
/* --- active state: ball is passing this milestone --- */
.jr-icon.active{transform:scale(1.28);box-shadow:0 0 0 8px rgba(224,68,122,.15);}
.jr-year{font-size:22px;font-weight:700;color:#241a1f;transition:color .35s ease, transform .35s ease;}
.jr-year.last{color:#ff8a3d;font-size:25px;}
.jr-year.active{color: #000;transform:translateX(4px) scale(1.06);}
.jr-desc{font-size:15px;color:#8a7a80;margin-top:4px;}
.jr-note{font-size:15px;color:#a08a90;font-style:italic;margin:10px 0 28px;}

/* --- hover tooltip --- */
.jr-tooltip{
  position:absolute;
  left:128px;
  top:-6px;

  background:#241a1f;
  color:#fdf3ee;

  font-size:13.5px;
  line-height:1.5;

  padding:10px 24px;
  border-radius:10px;

  width:260px;
  max-width:260px;
  height:auto;

  opacity:0;
  visibility:hidden;
  transform:translateY(6px);

  transition:opacity .25s ease, transform .25s ease;

  z-index:5;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  pointer-events:none;

  box-sizing:border-box;
}
.jr-tooltip::before{
  content:"";position:absolute;left:-5px;top:16px;
  width:20px;height:10px;background:#241a1f;transform:rotate(45deg);
}
.jr-row:hover .jr-tooltip{opacity:1;visibility:visible;transform:translateY(0);}

/* --- travelling glow orb on the line --- */
.jr-line-wrap{position:absolute;left:0;top:4px;overflow:visible;}

/* ============ EXPLORE BUTTON ============ */
.jr-btn{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:10px 10px 10px 28px;border-radius:50px;
  font-size:15px;font-weight:600;color:#fff;background:#241a1f;
  animation:glowpulse 2.6s ease-in-out infinite;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.jr-btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,#e0447a,#ff8a3d);
  transform:translateX(-100%);transition:transform .35s ease;z-index:0;
}
.jr-btn:hover::before{transform:translateX(0);}
.jr-btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(224,68,122,.4);}
.jr-btn-text{position:relative;z-index:1;}
.jr-arrow{
  position:relative;z-index:1;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#e0447a,#ff8a3d);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;
  animation:arrowBounce 1.6s ease-in-out infinite;
}
.jr-btn:hover .jr-arrow{animation:none;transform:translateX(4px) rotate(45deg);}

.jr-progress{display:flex;gap:6px;margin-top:14px;margin-left:6px;}
.jr-progress span{width:5px;height:5px;border-radius:50%;background:#e0b8c4;animation:progressPulse 1.4s ease-in-out infinite;}
.jr-progress span:nth-child(2){animation-delay:.2s;}
.jr-progress span:nth-child(3){animation-delay:.4s;}

/* ============ WHO WE ARE BADGE (redesigned) ============ */
.ab-badge{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:9px 20px 9px 16px;border-radius:24px;
  background:#fffaf7;
  margin-bottom:24px;isolation:isolate;
  opacity:0;transform:scale(.7);
  animation:popIn .55s cubic-bezier(.34,1.56,.64,1) forwards .15s;
}
.ab-badge::before{
  content:"";position:absolute;inset:-2px;border-radius:26px;z-index:-2;
  background:conic-gradient(from 0deg,#e0447a,#ff8a3d,#ffd27a,#e0447a);
  animation:spinBorder 3.5s linear infinite;
}
.ab-badge::after{
  content:"";position:absolute;inset:0;border-radius:24px;z-index:-1;background:#fffaf7;
}
.ab-badge-icon{
  font-size:14px;display:inline-flex;
  animation:sparkleSpin 2.6s ease-in-out infinite;
}
.ab-eyebrow{
  font-size:13px;font-weight:800;letter-spacing:2px;
  background:linear-gradient(90deg,#e0447a,#ff8a3d,#e0447a);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 3s linear infinite;
}

.ab-headline{
  font-size:34px;font-weight:800;line-height:1.35;margin:0 0 20px;
  opacity:0;animation:fadeup .6s ease forwards .5s;
  font-family:'Poppins',sans-serif;
}
.ab-headline .strike-line{
  position:relative;display:inline-block;color:#b7abb0;font-weight:700;
}
.ab-headline .strike-line::after{
  content:"";position:absolute;left:-2%;right:-2%;top:52%;height:2.5px;
  background:#e0647f;transform:scaleX(0);transform-origin:left;
  animation:strikeDraw .55s ease forwards 1.4s;
}
.ab-headline .line2{display:block;margin-top:6px;color:#241a1f;font-weight:800;}
.shine{
  background:linear-gradient(90deg,#e0447a 0%,#ff8a3d 25%,#e0447a 50%,#ff8a3d 75%,#e0447a 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 4s linear infinite;
}
.ab-desc{
  font-size:15px;color:#5a4a50;line-height:1.75;margin-bottom:30px;max-width:480px;
  opacity:0;animation:fadeup .6s ease forwards .9s;
    text-align: justify !important;
  text-align-last: left !important;
}

.ab-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:480px;
  opacity:0;animation:fadeup .6s ease forwards 1.2s;
}
.ab-stat{
  position:relative;
  background:linear-gradient(135deg,#e0447a,#ff8a3d);
  border-radius:16px;padding:18px 20px;
  box-shadow:0 6px 16px rgba(224,68,122,.25);
  transition:transform .2s ease,box-shadow .2s ease;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}
.ab-stat:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 0 18px 3px rgba(224,68,122,.35);}
.ab-num{font-size:26px;font-weight:700;color:#fff;}
.ab-stat-label{font-size:12px;color:rgba(255,255,255,.85);margin-top:4px;}
.ab-stat-icon{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  animation:iconFloat 2.6s ease-in-out infinite;
}
.ab-stat:nth-child(2) .ab-stat-icon{animation:iconWiggle 2.2s ease-in-out infinite;}
.ab-stat:nth-child(3) .ab-stat-icon{animation:iconSpin 5s linear infinite;}
.ab-stat:nth-child(4) .ab-stat-icon{animation:iconPulse 2s ease-in-out infinite;}

/* ============ KEYFRAMES ============ */
@keyframes fadein{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes dotglow{0%,100%{filter:drop-shadow(0 0 3px rgba(224,68,122,.6))}50%{filter:drop-shadow(0 0 8px rgba(224,68,122,.9))}}
@keyframes dotglowBig{0%,100%{filter:drop-shadow(0 0 6px rgba(255,138,61,.7));transform:scale(1)}50%{filter:drop-shadow(0 0 16px rgba(255,138,61,1));transform:scale(1.06)}}
@keyframes glowpulse{0%,100%{box-shadow:0 0 12px 2px rgba(255,138,61,.5)}50%{box-shadow:0 0 22px 6px rgba(255,138,61,.75)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes floatOrb{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-18px)}}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.8}90%{opacity:.4}100%{transform:translateY(-320px);opacity:0}}
@keyframes arrowBounce{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes progressPulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
@keyframes popIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes spinBorder{to{transform:rotate(360deg)}}
@keyframes sparkleSpin{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(20deg) scale(1.25)}}
@keyframes strikeDraw{to{transform:scaleX(1)}}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes iconWiggle{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
@keyframes iconSpin{to{transform:rotate(360deg)}}
@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes bgDrift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes blobDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,25px) scale(1.15)}}
@keyframes blobDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(25px,-20px) scale(1.1)}}
@keyframes blobDrift3{0%,100%{transform:translate(0,0) scale(1);opacity:.5}50%{transform:translate(-20px,-25px) scale(1.25);opacity:.8}}
@keyframes sheenSweep{0%{transform:translateX(-30%) rotate(8deg)}50%{transform:translateX(30%) rotate(8deg)}100%{transform:translateX(-30%) rotate(8deg)}}

@media(max-width:850px){
  .section{padding:60px 24px;}
  .wrap{grid-template-columns:1fr;gap:56px;}
  .col-journey{order:2;}
  .col-about{order:1;}
  .col-journey, .col-about{transform:translateX(0);}
  .ab-headline{font-size:28px;}
}



/*===================================
        NEWS & EVENTS
===================================*/

/* ===================================
   NEWS & EVENTS — scoped styles only
   All selectors below are prefixed with .ne- so they can NEVER collide
   with .orb / body / other section styles defined elsewhere in your
   combined stylesheet. Do NOT rename these back to generic names like
   .orb or .panel — that is what caused the original conflict.
=================================== */

.ne-section{
  position:relative;
  padding:70px 40px;
  min-height:560px;
  border-radius:5px;
  overflow:hidden;
  background:linear-gradient(135deg,#fff5ee 0%,#ffe4d1 45%,#fbe2e6 100%);
  font-family:'Poppins',sans-serif;
}
.ne-section a{text-decoration:none;color:inherit;}
.ne-section button{font-family:inherit;border:none;background:none;cursor:pointer;}

/* diagonal light shine sweeping across the background */
.ne-shine-sweep{
  position:absolute;top:-20%;bottom:-20%;width:35%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 70%,transparent 100%);
  animation:neShineSweep 6s ease-in-out infinite;
  pointer-events:none;z-index:1;
}
@keyframes neShineSweep{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

/* =============================
   GLOWING FLOATING SPHERES (renamed from .orb -> .ne-orb)
   ============================= */
@keyframes neFloatBig{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(90px,-40px) rotate(180deg)}}
@keyframes neFloatBig2{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-80px,50px) rotate(-180deg)}}
@keyframes neFloatSmall{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,-60px)}}
@keyframes neRingPulse{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}}

.ne-orb{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff,#ffb27a 40%,#e0447a 100%);
  box-shadow:0 25px 60px rgba(224,68,122,.5), 0 0 40px rgba(255,138,61,.4), inset -8px -8px 18px rgba(0,0,0,.15);
}
.ne-orb1{width:120px;height:120px;top:4%;left:3%;animation:neFloatBig 9s ease-in-out infinite;}
.ne-orb2{width:90px;height:90px;bottom:8%;right:6%;animation:neFloatBig2 11s ease-in-out infinite;}
.ne-orb3{width:56px;height:56px;top:38%;left:16%;animation:neFloatSmall 6s ease-in-out infinite;}
.ne-orb4{width:44px;height:44px;top:15%;right:20%;animation:neFloatBig 7s ease-in-out infinite reverse;}
.ne-orb5{width:34px;height:34px;bottom:30%;left:8%;animation:neFloatBig2 8s ease-in-out infinite .5s;}

.ne-orb-ring{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,178,122,.25),transparent 70%);
}
.ne-orb-ring1{width:180px;height:180px;top:0;left:-2%;animation:neRingPulse 5s ease-in-out infinite;}
.ne-orb-ring2{width:140px;height:140px;bottom:2%;right:2%;animation:neRingPulse 6s ease-in-out infinite .5s;}

/* =============================
   TITLE
   ============================= */
.ne-title-wrap{
  position:relative;z-index:2;text-align:center;
  margin:0 auto 36px;
}
.ne-title{
  font-size:34px;font-weight:800;letter-spacing:2px;
  display:inline-flex;margin:0;
}

.demo-title{
  text-align:center;
  font-size:30px;
  font-weight:800;
  color:#241a1f;
  font-family:sans-serif;
  animation:bounceIn 0.9s cubic-bezier(0.34,1.56,0.64,1) both;
}
.demo-title .grad{
  background-image:linear-gradient(90deg,#e0447a,#ff8a3d,#e0447a,#ff8a3d,#e0447a);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shimmer 4s linear infinite;
  display:inline-block;
}

@keyframes bounceIn{
  0%{opacity:0;transform:scale(0.7) translateY(20px);}
  60%{opacity:1;transform:scale(1.08) translateY(-4px);}
  80%{transform:scale(0.97) translateY(2px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
@keyframes shimmer{
  0%{background-position:200% center;}
  100%{background-position:-200% center;}
}

.ne-letter{
  display:inline-block;
  opacity:0;
  background-image:linear-gradient(90deg,#ff1f7a,#ffb100,#ff1f7a,#ffb100,#ff1f7a);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(255,90,150,.5));
}
.ne-section.in-view .ne-letter{
  animation:neLetterPop .5s cubic-bezier(.34,1.56,.64,1) forwards, neShimmer 4s linear infinite 1s;
}
.ne-title-sparkle{
  position:absolute;top:-14px;right:calc(50% - 90px);font-size:20px;
  opacity:0;
}
.ne-section.in-view .ne-title-sparkle{
  animation:neSparkleIn .3s ease forwards 1.3s, neSparkleSpin 3s ease-in-out infinite 1.6s;
}

@keyframes neLetterPop{
  0%{opacity:0;transform:translateY(20px) scale(.6);}
  60%{opacity:1;transform:translateY(-4px) scale(1.1);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes neUnderlineGrow{from{width:0;}to{width:100%;}}
@keyframes neShimmer{0%{background-position:200% center;}100%{background-position:-200% center;}}
@keyframes neSparkleIn{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}}
@keyframes neSparkleSpin{
  0%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(180deg) scale(1.3);}
  100%{transform:rotate(360deg) scale(1);}
}

/* =============================
   GRID
   ============================= */
.ne-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1.1fr;gap:30px;
  max-width:1080px;margin:0 auto;align-items:start;
}
.ne-panel-label{
  font-size:20px;font-weight:700;letter-spacing:1.5px;color:#241a1f;margin-bottom:12px;
  opacity:0;
}
.ne-section.in-view .ne-panel-label{animation:neFadeup .6s ease forwards .5s;}

/* =============================
   NEWS CAROUSEL (left)
   ============================= */
.ne-carousel-frame{
  position:relative;border-radius:18px;overflow:hidden;
  min-height:440px;
  box-shadow:0 20px 44px rgba(90,35,64,.28), 0 0 0 3px rgba(255,255,255,.6), 0 0 40px rgba(255,138,61,.25);
  opacity:0;
  transition:transform .35s ease, box-shadow .35s ease;
  aspect-ratio: 12.7 / 8.5; 
}
.ne-carousel-frame:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 56px rgba(90,35,64,.35), 0 0 0 3px rgba(255,255,255,.8), 0 0 60px rgba(255,138,61,.4);
}
.ne-section.in-view .ne-carousel-frame{animation:neFadeup .6s ease forwards .55s;}
.ne-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease;}
.ne-slide.active{opacity:1;visibility:visible;}
.ne-slide-img{
  position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(160deg,#241a1f 0%,#5a2340 55%,#e0447a 100%);
}

.ne-slide-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#1a1015;
}
.ne-img-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);font-size:12px;border:1px dashed rgba(255,255,255,.3);box-sizing:border-box;
}
.ne-slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(20,10,15,.88) 0%,rgba(20,10,15,.4) 50%,rgba(20,10,15,.05) 75%,transparent 100%);
}
.ne-slide-content{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;color:#fff;}
.ne-slide-tag{
  display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,#e0447a,#ff8a3d);color:#fff;font-size:10px;font-weight:700;
  padding:5px 14px;border-radius:20px;margin-bottom:12px;
  box-shadow:0 6px 14px rgba(224,68,122,.5);
}
.ne-slide-h{font-size:22px;font-weight:750;line-height:1.3;margin-bottom:7px;}
.ne-slide-p{font-size:13.5px;opacity:.88;margin-bottom:8px;}
.ne-slide-date{font-size:15px;opacity:.75;}

.ne-nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:45px;height:45px;border-radius:50%;
  background:rgba(255,255,255,.9);
  color:#000;font-size:22px;display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,transform .25s ease,color .25s ease;
}
.ne-nav-btn::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:conic-gradient(from 0deg,#e0447a,#ff8a3d,#ffcf7a,#e0447a);
  animation:neSpinRing 3s linear infinite;
  z-index:-1;
}
@keyframes neSpinRing{to{transform:rotate(360deg);}}
.ne-nav-btn:hover{background:linear-gradient(135deg,#e0447a,#ff8a3d);color:#fff;transform:translateY(-50%) scale(1.1);}
.ne-nav-left{left:5px;}
.ne-nav-right{right:5px;}
.ne-nav-btn:active{transform:translateY(-50%) scale(.9);}

.ne-dots{position:absolute;bottom:14px;right:16px;z-index:3;display:flex;gap:7px;}
.ne-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:width .3s ease,background .3s ease;}
.ne-dot.active{width:20px;border-radius:6px;background:linear-gradient(90deg,#e0447a,#ff8a3d);}

/* =============================
   EVENTS LIST (right)
   ============================= */
.ne-ev-panel{
  position:relative;
  background:#fff;border-radius:18px;padding:28px 30px;
  min-height:490px;display:flex;flex-direction:column;
  box-shadow:0 16px 34px rgba(90,35,64,.14);
  opacity:0;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:auto;   /* margin-top:16px ku badhila ithu potukonga */
  padding-top:16px;
}
.ne-section.in-view .ne-ev-panel{animation:neFadeup .6s ease forwards .7s;}
.ne-ev-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:1.5px;color:#e0447a;
  margin-bottom:8px;display:flex;align-items:center;gap:8px;
}
.ne-ev-eyebrow::before{content:"";width:18px;height:2px;background:#e0447a;display:inline-block;}
.ne-ev-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.ne-ev-title{font-size:20px;font-weight:700;color:#241a1f;}
.ne-section .ne-ev-viewall {
  font-size: 13px;
  font-weight: 700;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ne-ev-list-viewport{overflow:hidden;position:relative;max-height:270px;}
.ne-ev-list-track{transition:transform .5s ease;}

.ne-ev-row{display:flex;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid #f3e6e2;}
.ne-ev-row:last-child{border-bottom:none;}
.ne-ev-badge{
  width:60px;height:60px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,#e0447a,#ff8a3d);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;
}
.ne-ev-badge b{font-size:20px;}
.ne-ev-badge span{font-size:10px;letter-spacing:.5px;}
.ne-ev-info{flex:1;min-width:0;}
.ne-ev-h{font-size:16px;font-weight:700;color:#241a1f;}
.ne-ev-p{font-size:13px;color:#8a7a80;margin-top:3px;}
.ne-ev-thumb{
  width:56px;height:56px;border-radius:12px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,#5a2340,#e0447a);
}
.ne-ev-thumb img{width:100%;height:100%;object-fit:cover;}

.ne-ev-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}
.ne-ev-nav-btn{
  position:relative;
  width:46px;height:46px;border-radius:50%;
  background:#fdf1ec;color:#000;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,color .25s ease,transform .2s ease;
}
.ne-ev-nav-btn::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:conic-gradient(from 0deg,#e0447a,#ff8a3d,#ffcf7a,#e0447a);
  animation:neSpinRing 3s linear infinite;
  z-index:-1;
}
.ne-ev-nav-btn:hover{background:linear-gradient(135deg,#e0447a,#ff8a3d);color:#fff;transform:scale(1.1);}
.ne-ev-nav-btn:active{transform:scale(.9);}

/* =============================
   KEYFRAMES
   ============================= */
@keyframes neFadeup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* =============================
   RESPONSIVE
   ============================= */
@media(max-width:800px){
  .ne-section{padding:50px 24px;min-height:auto;}
  .ne-grid{grid-template-columns:1fr;gap:22px;}
  .ne-title{font-size:24px;}
  .ne-title-wrap{margin-bottom:26px;}

  /* shrink + reposition spheres so they don't overwhelm a narrow screen */
  .ne-orb1{width:70px;height:70px;}
  .ne-orb2{width:54px;height:54px;}
  .ne-orb3{width:34px;height:34px;}
  .ne-orb4{width:28px;height:28px;}
  .ne-orb5{width:22px;height:22px;}
  .ne-orb-ring1,.ne-orb-ring2{width:110px;height:110px;}

  .ne-carousel-frame{min-height:300px;}
  .ne-slide-h{font-size:16px;}
  .ne-slide-content{padding:18px;}
  .ne-nav-btn{width:42px;height:42px;font-size:18px;}

  .ne-ev-panel{padding:22px 20px;min-height:auto;}
  .ne-ev-title{font-size:19px;}
  .ne-ev-badge{width:50px;height:50px;}
  .ne-ev-badge b{font-size:17px;}
  .ne-ev-list-viewport{max-height:230px;}
}

@media(max-width:480px){
  .ne-section{padding:40px 16px;border-radius:20px;}
  .ne-title{font-size:19px;}
  .ne-carousel-frame{min-height:260px;}
  .ne-slide-h{font-size:15px;}
  .ne-slide-p{font-size:11px;}
  .ne-nav-btn{width:36px;height:36px;font-size:15px;}
  .ne-nav-left{left:8px;}
  .ne-nav-right{right:8px;}

  .ne-ev-heading{flex-direction:column;align-items:flex-start;gap:6px;}
  .ne-ev-row{gap:12px;padding:14px 0;}
  .ne-ev-badge{width:44px;height:44px;}
  .ne-ev-badge b{font-size:15px;}
  .ne-ev-h{font-size:14px;}
  .ne-ev-p{font-size:11px;}
  .ne-ev-thumb{width:44px;height:44px;}
}


/*==================================
           Footer
==================================*/
/* =========================================================
   EL SHADDAI GLOBAL SOLUTIONS
   PREMIUM COMPACT FOOTER
========================================================= */


/* =========================================================
   RESET
========================================================= */

.egsftr-footer,
.egsftr-footer * {
    box-sizing: border-box;
}

.egsftr-footer {
    position: relative;
    width: 100%;

    overflow: hidden;

    color: #ffffff;

    font-family:
        "Inter",
        "Poppins",
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(236, 47, 123, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(249, 115, 22, 0.07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #18101f 0%,
            #100b18 55%,
            #0c0813 100%
        );

    border-top:
        1px solid rgba(255,255,255,0.08);
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.egsftr-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(45px);

    z-index: 0;
}

.egsftr-glow-1 {
    width: 180px;
    height: 180px;

    top: -90px;
    right: 8%;

    background:
        rgba(236,47,123,0.18);

    animation:
        egsftrGlowMove1 8s ease-in-out infinite;
}

.egsftr-glow-2 {
    width: 130px;
    height: 130px;

    bottom: 50px;
    left: 3%;

    background:
        rgba(249,115,22,0.10);

    animation:
        egsftrGlowMove2 10s ease-in-out infinite;
}


/* =========================================================
   CTA SECTION
========================================================= */

.egsftr-cta-section {
    position: relative;

    z-index: 2;

    max-width: 1250px;

    margin: 0 auto;

    padding:
        42px 35px
        34px;

    text-align: center;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}


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

.egsftr-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        7px 15px;

    border-radius: 30px;

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

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

    color:
        #ff8aaa;

    font-size: 11px;

    font-weight: 700;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;

    box-shadow:
        0 0 20px rgba(236,47,123,0.08);
}

.egsftr-badge span {
    color:
        #ff6f9e;

    font-size:
        15px;

    text-shadow:
        0 0 10px rgba(236,47,123,0.7);
}


/* =========================================================
   CTA SMALL TEXT
========================================================= */

.egsftr-small-title {
    margin-top: 16px;

    margin-bottom: 5px;

    color:
        #fff;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 17px;

    font-weight: 600;

    text-decoration:
        line-through;

    text-decoration-color:
        #fff;
}


/* =========================================================
   CTA MAIN TITLE
========================================================= */

.egsftr-main-title {
    margin: 0;

    color:
        #ffffff;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        clamp(30px, 3.4vw, 44px);

    line-height:
        1.15;

    font-weight:
        800;

    letter-spacing:
        -1px;
}

.egsftr-main-title span {

    background:
        linear-gradient(
            120deg,
            #ff277b,
            #ec2f7b 45%,
            #ff8938
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


/* =========================================================
   PROJECT BUTTON
========================================================= */

.egsftr-project-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        13px;

    margin-top:
        22px;

    padding:
        7px 7px 7px 23px;

    border-radius:
        50px;

    color:
        #ffffff;

    background:
        rgba(8,6,13,0.95);

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

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        all .3s ease;
}

.egsftr-project-btn:hover {

    border-color:
        #ff4d91;

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px rgba(236,47,123,0.18);
}

.egsftr-project-btn b {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #ff2478,
            #ff7b30
        );

    color:
        #ffffff;

    font-size:
        18px;

    box-shadow:
        0 0 20px rgba(236,47,123,0.40);

    transition:
        transform .3s ease;
}

.egsftr-project-btn:hover b {

    transform:
        translateX(4px);

    box-shadow:
        0 0 28px rgba(236,47,123,0.65);
}


/* =========================================================
   EMAIL TEXT
========================================================= */

.egsftr-email-text {

    margin-top:
        14px;

    color:
        #fff;

    font-size:
        13px;

    line-height:
        1.6;
}

.egsftr-email-text a {

    color:
        #fff;

    text-decoration:
        none;

    border-bottom:
        1px dashed #756b78;

    transition:
        all .25s ease;
}

.egsftr-email-text a:hover {

    color: wheat;

    border-color:
        #ff78a5;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.egsftr-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        1250px;

    margin:
        0 auto;

    padding:
        34px 35px;

    display:
        grid;

    grid-template-columns:
        1.25fr
        .85fr
        1.15fr
        1.3fr;

    gap:
        30px;
}


/* =========================================================
   COLUMN
========================================================= */

.egsftr-column {
    min-width:
        0;
}


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

.egsftr-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        18px;
}

.egsftr-heading-icon {

    width:
        40px;

    height:
        40px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            rgba(236,47,123,0.20),
            rgba(249,115,22,0.16)
        );

    border:
        1px solid rgba(255,73,139,0.80);

    color:
        #ffffff;

    font-size:
        16px;

    text-shadow:
        0 0 9px rgba(255,255,255,0.7);

    box-shadow:
        0 0 18px rgba(236,47,123,0.25);

    transition:
        all .3s ease;
}

.egsftr-heading:hover
.egsftr-heading-icon {

    background:
        linear-gradient(
            135deg,
            #ec2f7b,
            #f97316
        );

    border-color:
        #ffffff;

    transform:
        translateY(-3px)
        rotate(-5deg);

    box-shadow:
        0 0 25px rgba(236,47,123,0.55);
}


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

.egsftr-heading h3 {

    margin: 0;

    color:
        #ffffff;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        18px;

    font-weight:
        700;

    letter-spacing:
        -.2px;
}


/* =========================================================
   COMPANY DESCRIPTION
========================================================= */

.egsftr-description {

    margin:
        0 0 16px 51px;

    max-width:
        280px;

    color:
        #fff;

    font-size:
        13.5px;

    line-height:
        1.7;
}


/* =========================================================
   TAGS
========================================================= */

.egsftr-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin:
        0 0 17px 51px;
}

.egsftr-tags span {

    padding:
        5px 9px;

    border-radius:
        20px;

    color:
        #fff;

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

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

    font-size:
        10px;

    transition:
        all .25s ease;
}

.egsftr-tags span:hover {

    color:
        #ffffff;

    border-color:
        rgba(236,47,123,0.55);

    background:
        rgba(236,47,123,0.10);
}


/* =========================================================
   SOCIAL
========================================================= */

.egsftr-social {

    display:
        flex;

    gap:
        9px;

    margin-left:
        51px;
}

.egsftr-social a {

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #ffffff;

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

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

    text-decoration:
        none;

    font-size:
        15px;

    font-weight:
        700;

    transition:
        all .3s ease;
}

.egsftr-social a:hover {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #ec2f7b,
            #f97316
        );

    border-color:
        #ffffff;

    transform:
        translateY(-4px);

    box-shadow:
        0 0 22px rgba(236,47,123,0.40);
}


/* =========================================================
   QUICK LINKS
========================================================= */

.egsftr-links {

    list-style:
        none;

    padding:
        0;

    margin:
        0;
}

.egsftr-links li {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        9px;
}

.egsftr-links li span {

    width:
        22px;

    color:
        #fff;

    font-size:
        9px;

    font-weight:
        700;
}

.egsftr-links a {

    color:
        #fff;

    text-decoration:
        none;

    font-size:
        15px;

    transition:
        all .25s ease;
}

.egsftr-links a:hover {

    color:
        #ffffff;

    transform:
        translateX(4px);

    text-shadow:
        0 0 12px rgba(236,47,123,0.40);
}


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

.egsftr-services {

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    font-family: 'Poppins';
}

.egsftr-services a {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        7px 8px;

    border-radius:
        10px;

    color:
        #ffffff;

    text-decoration:
        none;

    transition:
        all .3s ease;
}

.egsftr-services a:hover {

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

    transform:
        translateX(3px);
}

.egsftr-service-icon {

    width:
        29px;

    height:
        29px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    color:
        #fff;

    background:
        rgba(236,47,123,0.10);

    border:
        1px solid rgba(236,47,123,0.35);

    font-size:
        13px;

    font-weight:
        800;

    transition:
        all .3s ease;
}

.egsftr-services a:hover
.egsftr-service-icon {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #ec2f7b,
            #f97316
        );

    border-color:
        #ffffff;

    box-shadow:
        0 0 15px rgba(236,47,123,0.40);
}

.egsftr-services div {

    flex:
        1;
}

.egsftr-services strong {

    display:
        block;

    color:
        #fff;

    font-size:
        15px;

    font-weight:
        700;
}

.egsftr-services small {

    display:
        block;

    margin-top:
        2px;

    color:
        #fff;

    font-size:
        14px;
}

.egsftr-services a > b {

    color:
        #fff;

    font-size:
        18px;

    transition:
        all .25s ease;
}

.egsftr-services a:hover > b {

    color:
        #fff;

    transform:
        translateX(3px);
}


/* =========================================================
   LOCATION
========================================================= */

.egsftr-location {

    padding:
        11px 12px;

    margin-bottom:
        8px;

    border-radius:
        11px;

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

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

    transition:
        all .3s ease;
}

.egsftr-location:hover {

    border-color:
        rgba(236,47,123,0.40);

    background:
        rgba(236,47,123,0.055);

    transform:
        translateY(-2px);
}

.egsftr-location-title {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        6px;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .5px;
}

.egsftr-location-title span {

    padding:
        3px 7px;

    border-radius:
        20px;

    color:
        #fff;

    background:
        rgba(236,47,123,0.12);

    border:
        1px solid rgba(236,47,123,0.35);

    font-size:
        10px;
}

.egsftr-location p {

    color:
        #fff;

    font-size:
        14px;

    line-height:
        1.55;
}


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

.egsftr-contact {

    margin-top:
        12px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}

.egsftr-contact a {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #fff;

    text-decoration:
        none;

    font-size:
        15px;

    transition:
        all .25s ease;
}

.egsftr-contact a span {

    width:
        28px;

    height:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        7px;

    color:
        #fff;

    background:
        rgba(236,47,123,0.10);

    border:
        1px solid rgba(236,47,123,0.30);

    font-size:
        11px;

    transition:
        all .3s ease;
}

.egsftr-contact a:hover {

    color:
        #ffffff;
}

.egsftr-contact a:hover span {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #ec2f7b,
            #f97316
        );

    border-color:
        #ffffff;

    box-shadow:
        0 0 16px rgba(236,47,123,0.40);
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.egsftr-bottom {

    position:
        relative;

    z-index:
        2;

    max-width:
        1250px;

    margin:
        0 auto;

    padding:
        15px 35px;

    border-top:
        1px solid rgba(255,255,255,0.07);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;
}

.egsftr-bottom p {

    margin:
        0;

    color:
        #fff;

    font-size:
        13px;
}

.egsftr-bottom div {

    display:
        flex;

    gap:
        20px;
}

.egsftr-bottom a {

    color:
        #fff;

    text-decoration:
        none;

    font-size:
        13px;

    transition:
        color .25s ease;
}

.egsftr-bottom a:hover {

    color:
        #ff78a5;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes egsftrGlowMove1 {

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

    50% {
        transform:
            translate(-20px,20px);
    }
}

@keyframes egsftrGlowMove2 {

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

    50% {
        transform:
            translate(18px,-15px);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .egsftr-content {

        grid-template-columns:
            1fr 1fr;

        gap:
            35px;
    }

}


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

@media (max-width: 650px) {

    .egsftr-cta-section {

        padding:
            35px 20px 28px;
    }

    .egsftr-main-title {

        font-size:
            29px;
    }

    .egsftr-small-title {

        font-size:
            15px;
    }

    .egsftr-content {

        grid-template-columns:
            1fr;

        padding:
            28px 20px;

        gap:
            28px;
    }

    .egsftr-description {

        margin-left:
            0;
    }

    .egsftr-tags {

        margin-left:
            0;
    }

    .egsftr-social {

        margin-left:
            0;
    }

    .egsftr-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            15px 20px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .egsftr-main-title {

        font-size:
            26px;
    }

    .egsftr-project-btn {

        font-size:
            13px;
    }

    .egsftr-heading h3 {

        font-size:
            15px;
    }

}
/*
=====================================
          TESTIMONIAL
=====================================*/
/* TESTIMONIAL SECTION */

.testimonials {
  --font-display: 'poppins-local', sans-serif;
  --font-body: 'Inter', sans-serif;
  --ink: #17130f;
  --card-white: #ffffff;
  --border: rgba(23, 19, 15, 0.08);
  --text-primary: #201a16;
  --text-secondary: #7a6f68;
  --rose: #e0306f;
  --orange: #ff8a3d;
  --gold: #ffcf7a;
  --gradient: linear-gradient(135deg, #e0306f 0%, #ff8a3d 100%);
  --radius-lg: 22px;
  --cream: #f5f9f6;
  --blush: #e2f0e7;
}

.testimonials {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 85% -10%, var(--blush) 0%, transparent 62%),
    radial-gradient(ellipse 65% 55% at -5% 108%, #dcefe4 0%, transparent 64%),
    linear-gradient(160deg, #f6faf7 0%, var(--cream) 45%, #e8f3ec 100%);
  font-family: var(--font-body);
  padding: 80px 24px 60px;
  overflow: hidden;
}

.orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.95), rgba(255,255,255,0) 44%),
    linear-gradient(135deg, var(--rose) 0%, var(--orange) 100%);
  box-shadow: inset -8px -10px 20px rgba(0,0,0,0.18), 0 24px 46px -14px rgba(224,48,111,0.4);
}
.orb.o1 { width: 150px; height: 150px; top: -50px; right: 8%; animation: orbFloat 9s ease-in-out infinite; }
.orb.o2 { width: 78px; height: 78px; bottom: 6%; left: 4%; animation: orbFloat 11s ease-in-out infinite 1s; }
.orb.o3 { width: 40px; height: 40px; top: 30%; right: 20%; animation: orbFloat 7s ease-in-out infinite .5s; }
.orb.o4 { width: 26px; height: 26px; bottom: 22%; right: 6%; opacity: .85; animation: orbFloat 8s ease-in-out infinite 1.4s; }
@keyframes orbFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-22px) translateX(8px); }
}

.t-ring-deco { position:absolute; border-radius: 50%; border: 1.5px solid rgba(224,48,111,0.16); pointer-events:none; z-index:0; }
.t-ring-deco.r1 { width: 210px; height: 210px; top: -70px; right: 5%; animation: spinSlow 50s linear infinite; }
.t-ring-deco.r2 { width: 110px; height: 110px; bottom: 2%; left: 1%; animation: spinSlow 36s linear infinite reverse; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

.t-container { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }

.t-header{ position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: 66px; }
.t-header > div{ max-width: 720px; }

.t-eyebrow {
  display: inline-flex; justify-content:center; align-items: center; gap: 8px;
  color: var(--ink); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 18px; padding: 9px 18px 9px 14px; border-radius: 999px;
  background: #fff; box-shadow: 0 6px 18px -8px rgba(23,19,15,0.18);
}
.t-eyebrow::before{ content:"\2726"; color: var(--orange); font-size: 13px; }

.t-heading {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(32px, 4.4vw, 46px); line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 16px;
}
.grad-text{ background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-sub { color: var(--text-secondary); font-size: 16px; line-height: 1.65; max-width: 440px; margin: 0; }

.t-viewall {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 22px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform .3s ease, box-shadow .3s ease;
}
.t-viewall .arrow-circle{ width: 34px; height: 34px; border-radius: 50%; background: var(--gradient); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: transform .3s ease; }
.t-viewall .arrow-circle svg{ width:15px; height:15px; color:#fff; }
.t-viewall:hover{ box-shadow: 0 14px 28px -8px rgba(224,48,111,0.4); transform: translateY(-50%) translateY(-2px); }
.t-viewall:hover .arrow-circle{ transform: translateX(2px); }

.carousel-row { display: flex; align-items: center; gap: 24px; }

.t-nav-wrap { position: relative; flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; padding: 3px; }
.t-nav-wrap::before{
  content:""; position: absolute; inset: -30%; z-index: 0;
  background: conic-gradient(from 0deg, var(--rose), var(--gold), var(--orange), var(--rose));
  animation: spin 4.5s linear infinite;
}
.t-nav-btn {
  position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%;
  border: none; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 10px 22px -8px rgba(23,19,15,0.5);
  transition: transform .25s ease, box-shadow .25s ease;
}
.t-nav-btn:hover { transform: scale(1.08); box-shadow: 0 14px 28px -6px rgba(224,48,111,0.55); }
.t-nav-btn svg { width: 18px; height: 18px; }
@keyframes spin { to { transform: rotate(360deg); } }

.carousel-track { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }

.t-slot { border-radius: var(--radius-lg); transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .45s ease; }
.t-slot.is-active { transform: scale(1.045) translateY(-6px); }
.t-slot.is-side { opacity: .7; transform: scale(.94); }

.t-card {
  position: relative; height: 100%; min-height: 260px;
  background: var(--card-white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px 28px 26px;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  box-shadow: 0 1px 2px rgba(23,19,15,0.03), 0 12px 26px -18px rgba(23,19,15,0.14);
  transition: background .4s ease, box-shadow .4s ease;
}
.t-slot.is-active .t-card{ background: var(--gradient); border-color: transparent; box-shadow: 0 26px 48px -16px rgba(224,48,111,0.45); }

.quote-badge{ position: absolute; top: 24px; right: 24px; width: 38px; height: 38px; border-radius: 12px; background: rgba(224,48,111,0.08); display:flex; align-items:center; justify-content:center; }
.quote-badge svg{ width:18px; height:18px; color: var(--rose); }
.t-slot.is-active .quote-badge{ background: rgba(255,255,255,0.2); }
.t-slot.is-active .quote-badge svg{ color:#fff; }

.t-rating{ display:flex; gap:3px; margin-bottom: 14px; }
.t-rating svg{ width:14px; height:14px; fill: var(--orange); }
.t-slot.is-active .t-rating svg{ fill:#ffe1b8; }

.t-quote { color: var(--text-primary); font-family: var(--font-body); font-weight: 500; font-size: 16.5px; line-height: 1.6; margin: 0; padding-right: 40px; }
.t-slot.is-active .t-quote{ color:#fff; }

.t-person { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.avatar { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--gradient); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; }
.t-slot.is-active .avatar{ background: #fff; color: var(--rose); }
.t-name { margin: 0; color: var(--text-primary); font-size: 14.5px; font-weight: 700; }
.t-role { margin: 2px 0 0; color: var(--text-secondary); font-size: 13px; }
.t-slot.is-active .t-name, .t-slot.is-active .t-role{ color:#fff; }
.t-slot.is-active .t-role{ opacity:.85; }

.t-controls{ display:flex; align-items:center; justify-content:center; gap: 14px; margin-top: 44px; }
.t-progress{ position:relative; width: 160px; height: 4px; border-radius: 4px; background: rgba(23,19,15,0.1); overflow:hidden; }
.t-progress-bar{ position:absolute; left:0; top:0; height:100%; width:0%; border-radius:4px; background: var(--gradient); }
.t-progress-bar.animate{ animation: fill var(--autoplay-ms) linear forwards; }
@keyframes fill { from { width: 0%; } to { width: 100%; } }
.dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(23,19,15,0.16); cursor: pointer; transition: all .3s ease; }
.dot.is-active { width: 22px; border-radius: 5px; background: var(--gradient); }

.t-nav-wrap:focus-within, .dot:focus-visible, .t-viewall:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

@media (max-width: 900px){ .t-viewall{ position: static; transform: none; margin-top: 14px; } }
@media (max-width: 880px) {
  .testimonials { padding: 90px 18px; }
  .t-header { flex-direction: column; align-items: flex-start; text-align:left; }
  .carousel-row { gap: 10px; }
  .t-nav-wrap { width: 46px; height: 46px; }
  .t-card { padding: 26px 22px; }
  .t-slot.is-active{ transform: scale(1.02) translateY(0); }
}

.testimonials .carousel-track {
  animation: none !important;
  transform: none !important;
}
/* =========================================================
   TESTIMONIALS
   Full Responsive CSS
========================================================= */

.testimonials {
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  --ink: #17130f;
  --card-white: #ffffff;
  --border: rgba(23, 19, 15, 0.08);

  --text-primary: #201a16;
  --text-secondary: #7a6f68;

  --rose: #e0306f;
  --orange: #ff8a3d;
  --gold: #ffcf7a;

  --gradient: linear-gradient(
    135deg,
    #e0306f 0%,
    #ff8a3d 100%
  );

  --radius-lg: 22px;

  --cream: #f5f9f6;
  --blush: #e2f0e7;

  position: relative;
  width: 100%;
  box-sizing: border-box;

  background:
    radial-gradient(
      ellipse 70% 60% at 85% -10%,
      var(--blush) 0%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 65% 55% at -5% 108%,
      #dcefe4 0%,
      transparent 64%
    ),
    linear-gradient(
      160deg,
      #f6faf7 0%,
      var(--cream) 45%,
      #e8f3ec 100%
    );

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

  padding: 130px 24px 120px;

  overflow: hidden;
}


/* =========================================================
   DECORATIVE ORBS
========================================================= */

.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle at 30% 26%,
      rgba(255,255,255,0.95),
      rgba(255,255,255,0) 44%
    ),
    linear-gradient(
      135deg,
      var(--rose) 0%,
      var(--orange) 100%
    );

  box-shadow:
    inset -8px -10px 20px rgba(0,0,0,0.18),
    0 24px 46px -14px rgba(224,48,111,0.4);
}

.orb.o1 {
  width: 150px;
  height: 150px;
  top: -50px;
  right: 8%;
  animation: orbFloat 9s ease-in-out infinite;
}

.orb.o2 {
  width: 78px;
  height: 78px;
  bottom: 6%;
  left: 4%;
  animation: orbFloat 11s ease-in-out infinite 1s;
}

.orb.o3 {
  width: 40px;
  height: 40px;
  top: 30%;
  right: 20%;
  animation: orbFloat 7s ease-in-out infinite .5s;
}

.orb.o4 {
  width: 26px;
  height: 26px;
  bottom: 22%;
  right: 6%;
  opacity: .85;
  animation: orbFloat 8s ease-in-out infinite 1.4s;
}

@keyframes orbFloat {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }

  50% {
    transform: translateY(-22px) translateX(8px);
  }
}


/* =========================================================
   RING DECORATION
========================================================= */

.t-ring-deco {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(224,48,111,0.16);
  pointer-events: none;
  z-index: 0;
}

.t-ring-deco.r1 {
  width: 210px;
  height: 210px;
  top: -70px;
  right: 5%;
  animation: spinSlow 50s linear infinite;
}

.t-ring-deco.r2 {
  width: 110px;
  height: 110px;
  bottom: 2%;
  left: 1%;
  animation: spinSlow 36s linear infinite reverse;
}

@keyframes spinSlow {
  to {
    transform: rotate(360deg);
  }
}


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

.t-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;

  position: relative;
  z-index: 1;

  box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.t-header {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  gap: 14px;

  margin-bottom: 66px;
}

.t-header > div {
  max-width: 720px;
}


/* Eyebrow */

.t-eyebrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  gap: 8px;

  color: var(--ink);

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

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

  margin: 0 0 18px;

  padding: 9px 18px 9px 14px;

  border-radius: 999px;

  background: #fff;

  box-shadow:
    0 6px 18px -8px rgba(23,19,15,0.18);
}

.t-eyebrow::before {
  content: "\2726";
  color: var(--orange);
  font-size: 13px;
}


/* Heading */

.t-heading {
  font-family: var(--font-display);

  font-weight: 800;

  color: var(--ink);

  font-size: clamp(32px, 4.4vw, 46px);

  line-height: 1.14;

  letter-spacing: -0.01em;

  margin: 0 0 16px;
}

.grad-text {
  background: var(--gradient);

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

  color: transparent;
}


/* Subtitle */

.t-sub {
  color: var(--text-secondary);

  font-size: 16px;
  line-height: 1.65;

  max-width: 940px;

  margin: 0;
}


/* =========================================================
   VIEW ALL
========================================================= */

.t-viewall {
  position: absolute;

  right: 0;
  top: 50%;

  transform: translateY(-50%);

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

  gap: 10px;

  padding: 8px 8px 8px 22px;

  border-radius: 999px;

  background: var(--ink);
  color: #fff;

  font-size: 14px;
  font-weight: 600;

  text-decoration: none;

  white-space: nowrap;

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

.t-viewall .arrow-circle {
  width: 34px;
  height: 34px;

  border-radius: 50%;

  background: var(--gradient);

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

  flex-shrink: 0;

  transition: transform .3s ease;
}

.t-viewall .arrow-circle svg {
  width: 15px;
  height: 15px;

  color: #fff;
}

.t-viewall:hover {
  box-shadow:
    0 14px 28px -8px rgba(224,48,111,0.4);

  transform:
    translateY(-50%)
    translateY(-2px);
}

.t-viewall:hover .arrow-circle {
  transform: translateX(2px);
}


/* =========================================================
   CAROUSEL ROW
========================================================= */

.carousel-row {
  display: flex;

  align-items: center;

  gap: 24px;

  width: 100%;
}


/* =========================================================
   NAVIGATION BUTTON
========================================================= */

.t-nav-wrap {
  position: relative;

  flex-shrink: 0;

  width: 60px;
  height: 60px;

  border-radius: 50%;

  padding: 3px;

  box-sizing: border-box;
}

.t-nav-wrap::before {
  content: "";

  position: absolute;

  inset: -30%;

  z-index: 0;

  background:
    conic-gradient(
      from 0deg,
      var(--rose),
      var(--gold),
      var(--orange),
      var(--rose)
    );

  animation: spin 4.5s linear infinite;
}

.t-nav-btn {
  position: relative;

  z-index: 1;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  border: none;

  background: var(--ink);
  color: #fff;

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

  cursor: pointer;

  box-shadow:
    0 10px 22px -8px rgba(23,19,15,0.5);

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

.t-nav-btn:hover {
  transform: scale(1.08);

  box-shadow:
    0 14px 28px -6px rgba(224,48,111,0.55);
}

.t-nav-btn svg {
  width: 18px;
  height: 18px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   CAROUSEL TRACK
========================================================= */

.carousel-track {
  flex: 1;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 24px;

  align-items: stretch;

  min-width: 0;
}


/* =========================================================
   TESTIMONIAL SLOT
========================================================= */

.t-slot {
  width: 100%;
  min-width: 0;

  border-radius: var(--radius-lg);

  transition:
    transform .5s cubic-bezier(.22,1,.36,1),
    opacity .45s ease;
}

.t-slot.is-active {
  transform:
    scale(1.045)
    translateY(-6px);
}

.t-slot.is-side {
  opacity: .7;

  transform: scale(.94);
}


/* =========================================================
   TESTIMONIAL CARD
========================================================= */

.t-card {
  position: relative;

  width: 100%;

  height: 100%;

  min-height: 260px;

  box-sizing: border-box;

  background: var(--card-white);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 32px 28px 26px;

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  box-shadow:
    0 1px 2px rgba(23,19,15,0.03),
    0 12px 26px -18px rgba(23,19,15,0.14);

  transition:
    background .4s ease,
    box-shadow .4s ease;
}

.t-slot.is-active .t-card {
  background: var(--gradient);

  border-color: transparent;

  box-shadow:
    0 26px 48px -16px rgba(224,48,111,0.45);
}


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

.quote-badge {
  position: absolute;

  top: 24px;
  right: 24px;

  width: 38px;
  height: 38px;

  border-radius: 12px;

  background: rgba(224,48,111,0.08);

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

.quote-badge svg {
  width: 18px;
  height: 18px;

  color: var(--rose);
}

.t-slot.is-active .quote-badge {
  background: rgba(255,255,255,0.2);
}

.t-slot.is-active .quote-badge svg {
  color: #fff;
}


/* =========================================================
   RATING
========================================================= */

.t-rating {
  display: flex;

  gap: 3px;

  margin-bottom: 14px;
}

.t-rating svg {
  width: 14px;
  height: 14px;

  fill: var(--orange);
}

.t-slot.is-active .t-rating svg {
  fill: #ffe1b8;
}


/* =========================================================
   QUOTE
========================================================= */

.t-quote {
  color: var(--text-primary);

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

  font-weight: 500;

  font-size: 16.5px;

  line-height: 1.6;

  margin: 0;

  padding-right: 40px;
}

.t-slot.is-active .t-quote {
  color: #fff;
}


/* =========================================================
   PERSON
========================================================= */

.t-person {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 26px;
}

.avatar {
  flex-shrink: 0;

  width: 46px;
  height: 46px;

  border-radius: 50%;

  background: var(--gradient);

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

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

  font-weight: 700;

  font-size: 14px;

  color: #fff;
}

.t-slot.is-active .avatar {
  background: #fff;
  color: var(--rose);
}

.t-name {
  margin: 0;

  color: var(--text-primary);

  font-size: 14.5px;

  font-weight: 700;
}

.t-role {
  margin: 2px 0 0;

  color: var(--text-secondary);

  font-size: 13px;
}

.t-slot.is-active .t-name,
.t-slot.is-active .t-role {
  color: #fff;
}

.t-slot.is-active .t-role {
  opacity: .85;
}


/* =========================================================
   CONTROLS
========================================================= */

.t-controls {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  margin-top: 44px;
}

.t-progress {
  position: relative;

  width: 160px;
  height: 4px;

  border-radius: 4px;

  background: rgba(23,19,15,0.1);

  overflow: hidden;
}

.t-progress-bar {
  position: absolute;

  left: 0;
  top: 0;

  height: 100%;
  width: 0%;

  border-radius: 4px;

  background: var(--gradient);
}

.t-progress-bar.animate {
  animation:
    fill var(--autoplay-ms)
    linear forwards;
}

@keyframes fill {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}


/* =========================================================
   DOTS
========================================================= */

.dots {
  display: flex;

  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;

  padding: 0;

  border: none;

  border-radius: 50%;

  background: rgba(23,19,15,0.16);

  cursor: pointer;

  transition: all .3s ease;
}

.dot.is-active {
  width: 22px;

  border-radius: 5px;

  background: var(--gradient);
}


/* =========================================================
   FOCUS
========================================================= */

.t-nav-wrap:focus-within,
.dot:focus-visible,
.t-viewall:focus-visible {
  outline: 2px solid var(--rose);

  outline-offset: 3px;
}


/* =========================================================
   TABLET — 900px
========================================================= */

@media (max-width: 900px) {

  .testimonials {
    padding: 100px 20px 90px;
  }

  .t-viewall {
    position: static;

    transform: none;

    margin-top: 14px;
  }
}


/* =========================================================
   TABLET — 880px
========================================================= */

@media (max-width: 880px) {

  .testimonials {
    padding: 90px 18px;
  }

  .t-header {
    flex-direction: column;

    align-items: flex-start;

    text-align: left;
  }

  .t-header > div {
    width: 100%;
    max-width: 720px;
  }

  .t-sub {
    max-width: 500px;
  }

  .carousel-row {
    gap: 12px;
  }

  .t-nav-wrap {
    width: 48px;
    height: 48px;
  }

  .t-card {
    padding: 26px 22px;
  }

  .t-slot.is-active {
    transform:
      scale(1.02)
      translateY(0);
  }
}


/* =========================================================
   MOBILE — 700px
========================================================= */

@media (max-width: 700px) {

  .testimonials {
    width: 100%;

    padding: 65px 14px 60px;

    box-sizing: border-box;

    overflow: hidden;
  }

  .t-container {
    width: 100%;
    max-width: 100%;
  }


  /* ---------- HEADER ---------- */

  .t-header {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 6px;

    margin-bottom: 32px;
  }

  .t-header > div {
    width: 100%;
    max-width: 100%;
  }

  .t-eyebrow {
    font-size: 10.5px;

    letter-spacing: .08em;

    padding: 8px 14px 8px 12px;

    margin-bottom: 12px;
  }

  .t-eyebrow::before {
    font-size: 11px;
  }

  .t-heading {
    font-size: clamp(28px, 8vw, 34px);

    line-height: 1.15;

    letter-spacing: -0.02em;

    margin-bottom: 10px;
  }

  .t-sub {
    width: 100%;

    max-width: 330px;

    margin: 0 auto;

    font-size: 13px;

    line-height: 1.6;
  }


  /* ---------- VIEW ALL ---------- */

  .t-viewall {
    position: static;

    transform: none;

    margin: 12px auto 0;

    padding: 6px 6px 6px 16px;

    font-size: 12px;

    gap: 8px;
  }

  .t-viewall .arrow-circle {
    width: 30px;
    height: 30px;
  }

  .t-viewall .arrow-circle svg {
    width: 13px;
    height: 13px;
  }


  /* ---------- CAROUSEL ---------- */

  .carousel-row {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 7px;
  }


  /* ---------- NAVIGATION STAYS VISIBLE ---------- */

  .t-nav-wrap {
    display: block;

    flex-shrink: 0;

    width: 40px;
    height: 40px;

    padding: 2px;

    box-sizing: border-box;
  }

  .t-nav-wrap::before {
    inset: -20%;
  }

  .t-nav-btn {
    width: 100%;
    height: 100%;
  }

  .t-nav-btn svg {
    width: 14px;
    height: 14px;
  }


  /* ---------- TRACK ---------- */

  .carousel-track {
    flex: 1;

    width: auto;

    min-width: 0;

    display: grid;

    grid-template-columns: 1fr;

    gap: 16px;
  }


  /* ---------- SLOTS ---------- */

  .t-slot {
    width: 100%;

    max-width: 100%;

    min-width: 0;

    opacity: 1;

    transform: none !important;
  }

  .t-slot.is-active {
    transform: none !important;
  }

  .t-slot.is-side {
    display: none;
  }


  /* ---------- CARD ---------- */

  .t-card {
    width: 100%;

    min-height: 250px;

    box-sizing: border-box;

    padding: 23px 18px 21px;

    border-radius: 18px;
  }


  /* ---------- QUOTE BADGE ---------- */

  .quote-badge {
    top: 17px;
    right: 17px;

    width: 33px;
    height: 33px;

    border-radius: 10px;
  }

  .quote-badge svg {
    width: 15px;
    height: 15px;
  }


  /* ---------- RATING ---------- */

  .t-rating {
    gap: 3px;

    margin-bottom: 12px;
  }

  .t-rating svg {
    width: 13px;
    height: 13px;
  }


  /* ---------- QUOTE ---------- */

  .t-quote {
    font-size: 14px;

    line-height: 1.6;

    padding-right: 35px;
  }


  /* ---------- PERSON ---------- */

  .t-person {
    gap: 10px;

    margin-top: 21px;
  }

  .avatar {
    width: 41px;
    height: 41px;

    font-size: 12px;
  }

  .t-name {
    font-size: 13px;
  }

  .t-role {
    font-size: 11.5px;

    line-height: 1.4;
  }


  /* ---------- CONTROLS ---------- */

  .t-controls {
    margin-top: 27px;

    gap: 10px;
  }

  .t-progress {
    width: 105px;

    height: 3px;
  }

  .dots {
    gap: 6px;
  }

  .dot {
    width: 7px;
    height: 7px;
  }

  .dot.is-active {
    width: 18px;
  }


  /* ---------- ORBS ---------- */

  .orb.o1 {
    width: 95px;
    height: 95px;

    top: -35px;
    right: -25px;
  }

  .orb.o2 {
    width: 55px;
    height: 55px;

    bottom: 5%;
    left: -20px;
  }

  .orb.o3 {
    width: 28px;
    height: 28px;

    top: 35%;
    right: 4%;
  }

  .orb.o4 {
    width: 20px;
    height: 20px;

    bottom: 20%;
    right: 3%;
  }


  /* ---------- RINGS ---------- */

  .t-ring-deco.r1 {
    width: 130px;
    height: 130px;

    top: -45px;
    right: -35px;
  }

  .t-ring-deco.r2 {
    width: 80px;
    height: 80px;

    bottom: 2%;
    left: -35px;
  }
}


/* =========================================================
   SMALL MOBILE — 480px
========================================================= */

@media (max-width: 480px) {

  .testimonials {
    padding: 58px 11px 55px;
  }

  .t-header {
    margin-bottom: 28px;
  }

  .t-heading {
    font-size: 28px;
  }

  .t-sub {
    font-size: 12.5px;

    max-width: 310px;
  }


  /* Smaller navigation */

  .t-nav-wrap {
    width: 36px;
    height: 36px;

    padding: 2px;
  }

  .t-nav-btn svg {
    width: 13px;
    height: 13px;
  }


  .carousel-row {
    gap: 5px;
  }


  /* Card */

  .t-card {
    min-height: 235px;

    padding: 21px 16px 19px;

    border-radius: 17px;
  }

  .quote-badge {
    width: 31px;
    height: 31px;

    top: 15px;
    right: 15px;
  }

  .t-quote {
    font-size: 13.5px;

    line-height: 1.6;

    padding-right: 32px;
  }

  .t-person {
    margin-top: 19px;
  }

  .avatar {
    width: 39px;
    height: 39px;
  }

  .t-name {
    font-size: 12.5px;
  }

  .t-role {
    font-size: 11px;
  }


  /* Controls */

  .t-controls {
    margin-top: 23px;
  }

  .t-progress {
    width: 90px;
  }
}


/* =========================================================
   VERY SMALL MOBILE — 380px
========================================================= */

@media (max-width: 380px) {

  .testimonials {
    padding-left: 9px;
    padding-right: 9px;
  }

  .t-heading {
    font-size: 26px;
  }

  .t-sub {
    font-size: 12px;
  }


  .t-nav-wrap {
    width: 34px;
    height: 34px;
  }

  .t-nav-btn svg {
    width: 12px;
    height: 12px;
  }


  .t-card {
    padding: 20px 14px 18px;
  }

  .t-quote {
    font-size: 13px;
  }

  .t-progress {
    width: 80px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .orb,
  .t-ring-deco,
  .t-nav-wrap::before,
  .t-progress-bar.animate,
  .t-slot,
  .t-nav-btn,
  .t-viewall,
  .arrow-circle {
    transition: none !important;
    animation: none !important;
  }
}


/* CASE STUDIES SECTION */


.cs-section {
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --ink: #17130f;
  --card-white: #ffffff;
  --border: rgba(23, 19, 15, 0.08);
  --text-primary: #201a16;
  --text-secondary: #7a6f68;
  --rose: #e0306f;
  --orange: #ff8a3d;
  --gold: #ffcf7a;
  --gradient: linear-gradient(135deg, #e0306f 0%, #ff8a3d 100%);
  --radius-lg: 24px;
}

.cs-section {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border-radius: 0;
  padding: 56px 40px;
  width: 100%;
  margin: 0;
}

/* ===== aurora blobs — real drifting shapes, not just static gradient ===== */
.aurora{ position:absolute; border-radius:50%; filter: blur(50px); pointer-events:none; z-index:0; will-change: transform; }
.aurora.a1{ width:680px; height:680px; top:-280px; right:-200px;
  background: linear-gradient(135deg, rgba(255,138,61,0.6), rgba(255,94,140,0.4));
  border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
  animation: morph1 13s ease-in-out infinite; }
.aurora.a2{ width:640px; height:640px; bottom:-280px; left:-220px;
  background: linear-gradient(135deg, rgba(224,48,111,0.65), rgba(255,138,61,0.35));
  border-radius: 42% 58% 35% 65% / 55% 40% 60% 45%;
  animation: morph2 16s ease-in-out infinite; }
.aurora.a3{ width:440px; height:440px; top:16%; left:36%;
  background: radial-gradient(circle, rgba(255,150,150,0.4), transparent 70%);
  border-radius: 50%;
  animation: auroraDrift3 14s ease-in-out infinite; }
.aurora.a4{ width:320px; height:320px; bottom:4%; right:6%;
  background: linear-gradient(135deg, rgba(255,207,122,0.5), rgba(255,138,61,0.3));
  border-radius: 65% 35% 55% 45% / 40% 60% 40% 60%;
  animation: morph1 11s ease-in-out infinite reverse; }
.aurora.a5{ width:400px; height:400px; top:-110px; left:-130px;
  background: linear-gradient(135deg, rgba(255,207,122,0.5), rgba(255,94,140,0.3));
  border-radius: 60% 40% 45% 55% / 55% 45% 55% 45%;
  animation: morph2 15s ease-in-out infinite reverse; }
.aurora.a6{ width:280px; height:280px; top:36%; left:1%;
  background: radial-gradient(circle, rgba(224,48,111,0.4), transparent 70%);
  border-radius: 50%;
  animation: auroraDrift2 13s ease-in-out infinite; }

@keyframes morph1{
  0%,100%{ border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%; transform: translate(0,0) rotate(0deg) scale(1); }
  33%{ border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; transform: translate(-40px,35px) rotate(8deg) scale(1.1); }
  66%{ border-radius: 65% 35% 55% 45% / 40% 55% 45% 60%; transform: translate(25px,-30px) rotate(-6deg) scale(1.05); }
}
@keyframes morph2{
  0%,100%{ border-radius: 42% 58% 35% 65% / 55% 40% 60% 45%; transform: translate(0,0) rotate(0deg) scale(1); }
  33%{ border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%; transform: translate(38px,-30px) rotate(-7deg) scale(1.1); }
  66%{ border-radius: 40% 60% 45% 55% / 60% 40% 55% 45%; transform: translate(-22px,28px) rotate(5deg) scale(1.05); }
}

@keyframes auroraDrift1{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-60px,50px) scale(1.15); } }
@keyframes auroraDrift2{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(55px,-45px) scale(1.12); } }
@keyframes auroraDrift3{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(30px,35px) scale(1.2); } }

/* ===== glossy floating orbs — signature premium touch ===== */
.gloss-orb{ position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,0.95), rgba(255,255,255,0) 44%), linear-gradient(135deg, #e0306f, #ff8a3d);
  box-shadow: inset -8px -10px 20px rgba(0,0,0,0.18), 0 24px 46px -14px rgba(224,48,111,0.4); }
.gloss-orb.g1{ width:110px; height:110px; top:60px; right:14%; animation: orbFloat 9s ease-in-out infinite; }
.gloss-orb.g2{ width:56px; height:56px; bottom:14%; left:10%; animation: orbFloat 11s ease-in-out infinite 1s; }
.gloss-orb.g3{ width:30px; height:30px; top:44%; right:6%; opacity:.85; animation: orbFloat 7s ease-in-out infinite .5s; }
.gloss-orb.g4{ width:44px; height:44px; top:16%; left:6%; opacity:.9; animation: orbFloat 8.5s ease-in-out infinite .3s; }
@keyframes orbFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-18px); } }

/* diagonal light sweep, passes across the section on a loop */
.cs-sweep{
  position: absolute; top: -20%; left: -35%; width: 55%; height: 140%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.5) 45%, rgba(255,220,190,0.35) 55%, transparent 100%);
  transform: rotate(12deg); pointer-events: none; z-index: 0;
  animation: sweep 8s ease-in-out infinite; mix-blend-mode: soft-light;
}
@keyframes sweep { 0% { left: -40%; } 50% { left: 115%; } 100% { left: -40%; } }

/* slow rotating ambient glow behind everything */
.cs-glow{
  position: absolute; top: 50%; left: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px;
  z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(224,48,111,0.08), rgba(255,138,61,0.1), transparent 30%, transparent 70%, rgba(224,48,111,0.08));
  animation: rotateGlow 34s linear infinite;
}
@keyframes rotateGlow { to { transform: rotate(360deg); } }

/* twinkling accent particles */
.spark{ position:absolute; border-radius:50%; background: var(--gradient); pointer-events:none; z-index:0; }
.spark.s1{ width:9px; height:9px; top:12%; right:28%; animation: twinkle 3s ease-in-out infinite; }
.spark.s2{ width:6px; height:6px; top:60%; left:22%; background: var(--orange); animation: twinkle 3.6s ease-in-out infinite .4s; }
.spark.s3{ width:11px; height:11px; bottom:20%; right:34%; animation: twinkle 4s ease-in-out infinite .8s; }
.spark.s4{ width:7px; height:7px; top:36%; left:46%; background: var(--rose); animation: twinkle 3.2s ease-in-out infinite .2s; }
.spark.s5{ width:5px; height:5px; top:8%; left:16%; animation: twinkle 2.8s ease-in-out infinite .6s; }
.spark.s6{ width:8px; height:8px; bottom:10%; left:48%; background: var(--orange); animation: twinkle 3.8s ease-in-out infinite 1s; }
@keyframes twinkle{ 0%,100%{ opacity:.25; transform: scale(.8); } 50%{ opacity:1; transform: scale(1.15); } }

.cs-container { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }

.cs-header{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 52px; flex-wrap: wrap; }
.cs-header-text{ max-width: 620px; }

.cs-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 16px; padding: 9px 18px 9px 14px; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px -8px rgba(23,19,15,0.18); }
.cs-eyebrow::before{ content:"\2726"; color: var(--orange); font-size: 13px; }

.cs-heading { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: clamp(30px, 4vw, 42px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 12px;
  animation: headingIn .7s ease both; }
.grad-text{
  background: linear-gradient(100deg, var(--rose), var(--gold), var(--orange), var(--rose));
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmerText 5s linear infinite;
}
@keyframes headingIn{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none; } }
@keyframes shimmerText{ to { background-position: 250% center; } }
.cs-eyebrow{ animation: headingIn .6s ease both; }
.cs-sub{ animation: headingIn .7s ease .1s both; }
.cs-sub { color: var(--text-secondary); font-size: 15.5px; line-height: 1.6; margin: 0; }

.cs-viewall { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 22px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .3s ease, box-shadow .3s ease; }
.cs-viewall .arrow-circle{ width: 34px; height: 34px; border-radius: 50%; background: var(--gradient); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: transform .3s ease; }
.cs-viewall .arrow-circle svg{ width:15px; height:15px; color:#fff; }
.cs-viewall:hover{ box-shadow: 0 14px 28px -8px rgba(224,48,111,0.4); transform: translateY(-2px); }
.cs-viewall:hover .arrow-circle{ transform: translateX(2px); }

/*================================================
                featured case study
================================================*/
.cs-featured {
  position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
  border-radius: var(--radius-lg); overflow: hidden; text-decoration: none;
  background: linear-gradient(165deg, #fff6f3 0%, #ffffff 55%);
  border: 1px solid rgba(224,48,111,0.14);
  box-shadow: 0 1px 2px rgba(23,19,15,0.03), 0 20px 40px -22px rgba(23,19,15,0.18);
  margin-bottom: 26px;
  transition: box-shadow .35s ease, transform .35s ease;
  animation: cardIn .6s ease both;
}
.cs-featured::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:2;
  background: var(--gradient);
}
.cs-featured:hover{ box-shadow: 0 26px 44px -20px rgba(224,48,111,0.26); transform: translateY(-4px); }

.cs-featured-thumb{ position: relative; overflow: hidden; min-height: 360px; }
.cs-featured-thumb img{ width: 100%; height: 100%; object-fit: cover; display:block; transition: transform .5s ease; }
.cs-featured:hover .cs-featured-thumb img{ transform: scale(1.05); }
.cs-featured-thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(23,19,15,0.55) 100%);
}

.cs-number{
  position: absolute; top: 20px; left: 20px; z-index: 2;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #fff;
  background: var(--gradient); padding: 8px 16px; border-radius: 999px;
  letter-spacing: .04em;
}
.cs-number.dark{ background: var(--ink); color: #fff; }

.cs-featured-tag{
  position: absolute; bottom: 20px; left: 20px; z-index: 2;
  color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255,255,255,0.18); backdrop-filter: blur(6px);
  padding: 7px 14px; border-radius: 999px;
}

.cs-featured-body{ padding: 40px 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.cs-featured-title{ font-family: var(--font-display);  text-align: justify !important;
  text-align-last: left !important; font-weight: 800; font-size: 26px; color: #000; margin: 0 0 12px; line-height: 1.25; }
.cs-featured-desc{ color: #000; font-size: 15px; line-height: 1.65; margin: 0 0 26px;  text-align: justify !important;
  text-align-last: left !important; }

.cs-stats{ display: flex; gap: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.cs-stat-value{ font-family: var(--font-display); font-weight: 800; font-size: 24px; color: #000;}
.cs-stat-value.grad{ background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-stat-label{ color: var(--text-secondary); font-size: 12.5px; margin-top: 3px; }

.cs-arrow-btn{
  position: absolute; bottom: 20px; right: 20px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  transform: scale(.85) rotate(-40deg); opacity: 0; transition: all .35s ease;
}
.cs-featured:hover .cs-arrow-btn{ transform: scale(1) rotate(0deg); opacity: 1; }
.cs-arrow-btn svg{ width: 17px; height: 17px; color: var(--ink); }

/* ===== grid of remaining case studies ===== */
.cs-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 46px; }

.cs-card{
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(165deg, #fff6f3 0%, #ffffff 55%);
  border: 1px solid rgba(224,48,111,0.14);
  box-shadow: 0 1px 2px rgba(23,19,15,0.03), 0 16px 32px -20px rgba(23,19,15,0.16);
  text-decoration: none; display: block;
  transition: transform .3s ease, box-shadow .3s ease;
  animation: cardIn .6s ease both;
}
.cs-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:2;
  background: var(--gradient);
}
.cs-card:nth-child(1){ animation-delay: .1s; }
.cs-card:nth-child(2){ animation-delay: .2s; }
.cs-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 38px -18px rgba(224,48,111,0.24); }

@keyframes cardIn{ from{ opacity:0; transform: translateY(20px);} to{ opacity:1; transform:none; } }

.cs-thumb{ position: relative; height: 290px; overflow: hidden; }
.cs-thumb img{ width: 100%; height: 100%; object-fit: cover; display:block; transition: transform .4s ease; }
.cs-card:hover .cs-thumb img{ transform: scale(1.05); }
.cs-thumb::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(23,19,15,0.5) 100%); }

.cs-thumb .cs-number{ top: 16px; left: 16px; font-size: 13px; padding: 6px 13px; }
.cs-thumb .cs-featured-tag{ bottom: 16px; left: 16px; font-size: 11.5px; padding: 6px 12px; }
.cs-thumb .cs-arrow-btn{ bottom: 16px; right: 16px; width: 40px; height: 40px; }

.cs-body{ padding: 24px 22px 22px; }
.cs-title{ font-family: var(--font-display);   text-align: justify !important;
  text-align-last: left !important; font-weight: 700; font-size: 24px; color: var(--text-primary); margin: 0 0 8px; line-height: 1.3; }
.cs-desc{ color: black; font-size: 14px; line-height: 1.6; margin: 0 0 18px;   text-align: justify !important;
  text-align-last: left !important;}
.cs-body .cs-stats{ padding-top: 16px; gap: 20px; }
.cs-body .cs-stat-value{ font-size: 19px; }

/* class added by JS once a card has scrolled into view (see case-studies.js) */
.cs-featured.in-view, .cs-card.in-view{ animation-play-state: running; }

/* =========================================
   CASE STUDIES — PERFECT MOBILE RESPONSIVE
   TEXT FIRST → IMAGE SECOND
========================================= */

@media (max-width: 700px) {

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

  .cs-section {
    width: 100%;
    max-width: 100%;
    padding: 55px 14px;
    overflow: hidden;
  }

  .cs-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }


  /* =========================
     HEADER
  ========================= */

  .cs-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    gap: 22px;

    margin-bottom: 34px;

    text-align: center;
  }

  .cs-header-text {
    width: 100%;
    max-width: 100%;
  }

  .cs-eyebrow {
    display: inline-flex;

    margin: 0 auto 14px;

    font-size: 10.5px;
    padding: 8px 14px;

    letter-spacing: .08em;
  }

  .cs-heading {
    width: 100%;

    font-size: clamp(30px, 9vw, 38px);
    line-height: 1.12;

    margin: 0 auto 12px;

    letter-spacing: -.02em;
  }

  .cs-sub {
    width: 100%;
    max-width: 340px;

    margin: 0 auto;

    font-size: 13.5px;
    line-height: 1.65;
  }

  .cs-viewall {
    align-self: center;

    padding: 7px 7px 7px 18px;

    font-size: 13px;
  }

  .cs-viewall .arrow-circle {
    width: 32px;
    height: 32px;
  }


  /* =========================
     FEATURED CARD
     IMPORTANT:
     TEXT FIRST
     IMAGE SECOND
  ========================= */

  .cs-featured {

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 100%;

    margin: 0 0 22px;

    border-radius: 20px;

    overflow: hidden;
  }


  /* TEXT COMES FIRST */

  .cs-featured-body {

    order: 1;

    width: 100%;
    min-width: 0;

    padding: 28px 22px 24px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }


  /* IMAGE COMES SECOND */

  .cs-featured-thumb {

    order: 2;

    width: 100%;
    min-width: 0;

    height: 260px;
    min-height: 260px;

    overflow: hidden;
  }

  .cs-featured-thumb img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
  }


  /* FEATURED TITLE */

  .cs-featured-title {

    width: 100%;

    font-size: 22px;
    line-height: 1.3;

    margin: 0 0 10px;
  }


  /* FEATURED DESCRIPTION */

  .cs-featured-desc {

    width: 100%;

    font-size: 13.5px;
    line-height: 1.65;

    margin: 0 0 20px;
  }


  /* =========================
     STATS
  ========================= */

  .cs-stats {

    width: 100%;

    display: flex;
    flex-wrap: wrap;

    gap: 16px 24px;

    padding-top: 18px;
  }

  .cs-stat {

    min-width: 60px;
  }

  .cs-stat-value {

    font-size: 21px;
  }

  .cs-stat-label {

    font-size: 11px;
  }


  /* =========================
     FEATURED NUMBER
  ========================= */

  .cs-featured-thumb .cs-number {

    top: 14px;
    left: 14px;

    font-size: 12px;

    padding: 6px 12px;
  }


  /* =========================
     FEATURED TAG
  ========================= */

  .cs-featured-thumb .cs-featured-tag {

    bottom: 14px;
    left: 14px;

    font-size: 10px;

    padding: 6px 10px;
  }


  /* =========================
     ARROW
  ========================= */

  .cs-arrow-btn {

    width: 38px;
    height: 38px;

    right: 14px;
    bottom: 14px;

    opacity: 1;

    transform: scale(1) rotate(0deg);
  }

  .cs-arrow-btn svg {
    width: 15px;
    height: 15px;
  }


  /* =========================
     SMALL CASE STUDY GRID
  ========================= */

  .cs-grid {

    width: 100%;
    max-width: 100%;

    display: grid;

    grid-template-columns: 1fr;

    gap: 20px;
  }


  /* =========================
     CARD
  ========================= */

  .cs-card {

    width: 100%;
    max-width: 100%;

    border-radius: 20px;

    overflow: hidden;
  }


  /* =========================
     CARD IMAGE
  ========================= */

  .cs-thumb {

    width: 100%;

    height: 230px;
    min-height: 230px;

    overflow: hidden;
  }

  .cs-thumb img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
  }


  /* =========================
     CARD BODY
  ========================= */

  .cs-body {

    width: 100%;

    padding: 20px 18px 20px;
  }

  .cs-title {

    width: 100%;

    font-size: 17px;
    line-height: 1.35;

    margin-bottom: 7px;
  }

  .cs-desc {

    width: 100%;

    font-size: 13px;
    line-height: 1.6;

    margin-bottom: 16px;
  }


  /* =========================
     CARD STATS
  ========================= */

  .cs-body .cs-stats {

    display: flex;
    flex-wrap: wrap;

    gap: 14px 20px;

    padding-top: 14px;
  }

  .cs-body .cs-stat-value {

    font-size: 18px;
  }

  .cs-body .cs-stat-label {

    font-size: 10.5px;
  }


  /* =========================
     CARD NUMBER
  ========================= */

  .cs-thumb .cs-number {

    top: 13px;
    left: 13px;

    font-size: 11px;

    padding: 6px 11px;
  }


  /* =========================
     CARD TAG
  ========================= */

  .cs-thumb .cs-featured-tag {

    bottom: 13px;
    left: 13px;

    font-size: 10px;

    padding: 5px 10px;
  }


  /* =========================
     DECORATIONS
  ========================= */

  .aurora.a1 {
    width: 360px;
    height: 360px;

    top: -150px;
    right: -160px;
  }

  .aurora.a2 {
    width: 350px;
    height: 350px;

    bottom: -150px;
    left: -170px;
  }

  .aurora.a3 {
    width: 260px;
    height: 260px;

    left: 20%;
  }

  .aurora.a4 {
    width: 190px;
    height: 190px;
  }

  .aurora.a5 {
    width: 220px;
    height: 220px;

    top: -80px;
    left: -100px;
  }

  .aurora.a6 {
    width: 170px;
    height: 170px;
  }


  /* =========================
     GLOSS ORBS
  ========================= */

  .gloss-orb.g1 {
    width: 65px;
    height: 65px;

    top: 45px;
    right: 5%;
  }

  .gloss-orb.g2 {
    width: 38px;
    height: 38px;

    left: 5%;
  }

  .gloss-orb.g3 {
    width: 20px;
    height: 20px;

    right: 3%;
  }

  .gloss-orb.g4 {
    width: 28px;
    height: 28px;

    left: 3%;
  }


  /* =========================
     SWEEP
  ========================= */

  .cs-sweep {

    width: 80%;
    left: -55%;

    opacity: .45;
  }


  /* =========================
     GLOW
  ========================= */

  .cs-glow {

    width: 550px;
    height: 550px;

    margin: -275px 0 0 -275px;
  }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .cs-section {
    padding: 45px 12px;
  }

  .cs-header {
    margin-bottom: 28px;
  }

  .cs-heading {
    font-size: 30px;
  }

  .cs-sub {
    max-width: 310px;
    font-size: 13px;
  }

  .cs-featured {
    border-radius: 18px;
  }

  .cs-featured-body {
    padding: 24px 18px 22px;
  }

  .cs-featured-title {
    font-size: 20px;
  }

  .cs-featured-desc {
    font-size: 13px;
  }

  .cs-featured-thumb {
    height: 220px;
    min-height: 220px;
  }

  .cs-grid {
    gap: 18px;
  }

  .cs-card {
    border-radius: 18px;
  }

  .cs-thumb {
    height: 210px;
    min-height: 210px;
  }

  .cs-body {
    padding: 18px 16px;
  }

  .cs-title{
    font-size: 16px;
  }

  .cs-desc {
    font-size: 12.5px;
  }
}


/* =========================================
   EXTRA SMALL DEVICES
========================================= */

@media (max-width: 360px) {

  .cs-section {
    padding-left: 10px;
    padding-right: 10px;
  }

  .cs-featured-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cs-featured-thumb {
    height: 195px;
    min-height: 195px;
  }

  .cs-thumb {
    height: 190px;
    min-height: 190px;
  }

  .cs-stats {
    gap: 12px 16px;
  }

  .cs-stat-value {
    font-size: 19px;
  }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 380px) {

  .case-study-content h1,
  .case-study-content h2,
  .case-studies-content h1,
  .case-studies-content h2 {

    max-width: 300px;

    font-size: 31px;

    line-height: 1.08;
  }

  .case-study-content p,
  .case-studies-content p {

    max-width: 290px;

    font-size: 13px;
  }
}

/*===============================================
               More case Studies
===============================================*/


.csflip-section {
  --accent: #D85A30;
  --accent2: #D4537E;
  --text-dark: #1a1a1a;
  --text-muted: #6b6b66;

  position: relative;
  overflow: hidden;
  border-radius: 0;
  padding: 56px 40px;
  width: 100%;
  margin: 0;
  background: linear-gradient(120deg, #fde3d4, #fbd6e4, #fde8d0, #fde3d4);
  background-size: 300% 300%;
  animation: csflipMeshMove 6s ease-in-out infinite;
}
@keyframes csflipMeshMove {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.csflip-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
  background-size: 200% auto;
  animation: topBarShift 4s linear infinite;
  z-index: 10;
}
@keyframes topBarShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---- background layer 1: breathing gradient mesh ---- */
.bg-mesh {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #fffefd, #fdf0ea, #fdeef4, #fffefd);
  background-size: 300% 300%;
  animation: meshShift 10s ease-in-out infinite;
  z-index: 0;
}
@keyframes meshShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---- background layer 2: isometric grid ---- */
.bg-iso {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.18;
  z-index: 1;
}

/* ---- background layer 3: circuit paths with glowing dots ---- */
.bg-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: 2;
}
#csflip-dot1, #csflip-dot2 { filter: drop-shadow(0 0 4px currentColor); }

/* ---- header ---- */
.csflip-header {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-bottom: 28px;
  overflow: visible;
}
.csflip-header::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0.08;
  transform: translate(-50%, -50%);
  animation: ringSpin 30s linear infinite;
  pointer-events: none;
}
.csflip-header::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  border: 1px solid var(--accent2);
  border-radius: 50%;
  opacity: 0.06;
  transform: translate(-50%, -50%);
  animation: ringSpin 45s linear infinite reverse;
  pointer-events: none;
}
@keyframes ringSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.csflip-tag {
  position: relative;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}
.csflip-tag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent2);
  margin-right: 8px;
  animation: dotPulse 1.8s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.5; }
}
.csflip-heading {
  position: relative;
  font-size: 34px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
  letter-spacing: -0.5px;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.15s forwards;
}
.csflip-heading .accent {
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textShift 4s linear infinite;
}
@keyframes textShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.csflip-sub {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0;
  animation: fadeUp 0.6s ease 0.3s forwards;
}

/* ---- csflip-filters-list ---- */
.csflip-filters {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 32px;
}
.csflip-filt {
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 30px;
  border: 1.5px solid #eee0d8;
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.25s ease;
}
.csflip-filt:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.csflip-filt.csflip-is-active {
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(216,90,48,0.3);
}

/* ---- grid ---- */
.csflip-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- flip card ---- */
.csflip-flip-card {
  aspect-ratio: 1 / 1;
  perspective: 1000px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(24px);
  animation: cardIn 0.6s ease forwards;
}
@keyframes cardIn {
  to { opacity: 1; transform: translateY(0); }
}
.csflip-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.csflip-flip-card.csflip-is-flipped .csflip-flip-inner {
  transform: rotateY(180deg);
}
.csflip-flip-front, .csflip-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.csflip-flip-front {
  background: linear-gradient(150deg, #ffffff 25%, #fce0cf 60%, #fbd7e0 100%);
  border: 2.5px solid transparent;
  background-image: linear-gradient(150deg, #ffffff 25%, #fce0cf 60%, #fbd7e0 100%), linear-gradient(120deg, var(--accent), var(--accent2), var(--accent));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 10px 24px rgba(216,90,48,0.16);
  justify-content: center;
  align-items: flex-start;
  animation: cardGlow 6s linear infinite;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.csflip-flip-card:hover .csflip-flip-front {
  box-shadow: 0 16px 36px rgba(216,90,48,0.32);
  transform: translateY(-3px);
}
@keyframes cardGlow {
  0%   { background-image: linear-gradient(150deg, #ffffff 25%, #fce0cf 60%, #fbd7e0 100%), linear-gradient(0deg,   var(--accent), var(--accent2), var(--accent)); }
  100% { background-image: linear-gradient(150deg, #ffffff 25%, #fce0cf 60%, #fbd7e0 100%), linear-gradient(360deg, var(--accent), var(--accent2), var(--accent)); }
}
.csflip-flip-front .csflip-corner-wedge {
  position: absolute;
  top: -30%;
  right: -30%;
  width: 65%;
  height: 65%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  opacity: 0.12;
  border-radius: 40%;
  pointer-events: none;
}
.csflip-flip-front .csflip-watermark {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 90px;
  height: 90px;
  opacity: 0.06;
  color: var(--accent);
  pointer-events: none;
}

.csflip-industry-icon {
  width: 22px;
  height: 22px;
  color: #fff;
  padding: 8px;
  box-sizing: content-box;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  margin-bottom: 12px;
  animation: iconPulse 2.4s ease-in-out infinite;
}
@keyframes iconPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.12) rotate(-4deg); }
}
.csflip-flip-front::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--accent) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.05;
  border-radius: 14px;
  pointer-events: none;
}
.csflip-flip-front::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.csflip-flip-back {
  background: linear-gradient(150deg, var(--accent), var(--accent2));
  color: #fff;
  transform: rotateY(180deg);
  justify-content: center;
}

.csflip-card-tag {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: #fdeee7;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.csflip-result-num {
  font-size: 30px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1;
  margin-bottom: 4px;
}
.csflip-result-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.csflip-tap-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--accent2);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.csflip-tap-hint svg {
  width: 12px;
  height: 12px;
  animation: arrowSlide 1.4s ease-in-out infinite;
}
@keyframes arrowSlide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.csflip-flip-card.big { grid-column: span 2; grid-row: span 2; }
.csflip-flip-card.big .csflip-flip-front .csflip-industry-icon { width: 34px; height: 34px; }
.csflip-flip-card.big .csflip-flip-front .csflip-result-num { font-size: 48px; }
.csflip-flip-card.big .csflip-flip-front .csflip-result-label { font-size: 14px; }

.csflip-back-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.csflip-back-desc {
  font-size: 11.5px;
  line-height: 1.5;
  opacity: 0.95;
  margin-bottom: 10px;
}
.csflip-back-stats {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
  border-top: 1px solid rgba(255,255,255,0.3);
  padding-top: 8px;
}

@media (max-width: 640px) {
  .csflip-heading { font-size: 26px; }
  .csflip-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   MORE CASE STUDIES — MOBILE RESPONSIVE
========================================= */

@media (max-width:640px){

  .csflip-section{
    padding:40px 16px;
  }

  /* Header */
  .csflip-header{
    margin-bottom:24px;
  }

  .csflip-heading{
    font-size:26px;
    line-height:1.2;
  }

  .csflip-sub{
    font-size:13px;
    line-height:1.5;
  }

  .csflip-header::before{
    width:140px;
    height:140px;
  }

  .csflip-header::after{
    width:200px;
    height:200px;
  }


  /* Filters */
  .csflip-filters{
    gap:6px;
    margin-bottom:24px;
  }

  .csflip-filt{
    padding:7px 12px;
    font-size:12px;
  }


  /* =================================
     CARD GRID
  ================================= */

  .csflip-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
    width:100%;
  }


  /* =================================
     CARD
  ================================= */

  .csflip-flip-card{
    width:100%;
    min-width:0;
    aspect-ratio:1 / 1;
  }


  /* =================================
     BIG CARD
  ================================= */

  .csflip-flip-card.big{
    grid-column:span 2;
    grid-row:span 2;
  }


  /* =================================
     CARD FRONT / BACK
  ================================= */

  .csflip-flip-front,
  .csflip-flip-back{
    border-radius:14px;
    padding:14px;
  }


  /* =================================
     INDUSTRY ICON — MOBILE
  ================================= */

  .csflip-industry-icon{
    width:20px;
    height:20px;

    padding:7px;

    box-sizing:content-box;

    border-radius:10px;

    margin-bottom:10px;

    flex-shrink:0;

    display:block;

    animation:iconPulse 2.4s ease-in-out infinite;
  }


  /* Big card icon */
  .csflip-flip-card.big .csflip-flip-front .csflip-industry-icon{
    width:26px;
    height:26px;
    padding:8px;
    border-radius:11px;
    margin-bottom:12px;
  }


  /* =================================
     CARD TEXT
  ================================= */

  .csflip-card-tag{
    font-size:9px;
    padding:3px 8px;
    margin-bottom:9px;
  }

  .csflip-result-num{
    font-size:23px;
  }

  .csflip-result-label{
    font-size:10px;
    margin-bottom:10px;
  }

  .csflip-tap-hint{
    font-size:9px;
  }

  .csflip-tap-hint svg{
    width:11px;
    height:11px;
  }


  /* =================================
     BIG CARD TEXT
  ================================= */

  .csflip-flip-card.big .csflip-flip-front .csflip-result-num{
    font-size:34px;
  }

  .csflip-flip-card.big .csflip-flip-front .csflip-result-label{
    font-size:12px;
  }


  /* =================================
     BACK SIDE
  ================================= */

  .csflip-back-title{
    font-size:12px;
    margin-bottom:6px;
  }

  .csflip-back-desc{
    font-size:10px;
    line-height:1.45;
    margin-bottom:8px;
  }

  .csflip-back-stats{
    font-size:9.5px;
    padding-top:7px;
  }

}
/*==============================================
            CLIENTS AND TESTIMONIAL
==============================================*/
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:sans-serif;}

.clg-section{
  --clg-accent:#E8714A;
  position:relative;
  overflow:hidden;
  width:100%;
  background:
    radial-gradient(ellipse 700px 400px at 15% 0%, rgba(232,113,74,0.14), transparent 60%),
    radial-gradient(ellipse 700px 400px at 85% 100%, rgba(232,113,74,0.08), transparent 60%),
    #0B0B0E;
  padding:80px 0;
}

.clg-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;}
.clg-glow-1{width:420px;height:420px;top:-140px;left:-100px;background:radial-gradient(circle,rgba(236,72,153,.16),transparent 70%);}
.clg-glow-2{width:420px;height:420px;bottom:-140px;right:-100px;background:radial-gradient(circle,rgba(249,115,22,.14),transparent 70%);}

.clg-head{position:relative;z-index:2;text-align:center;max-width:640px;margin:0 auto 60px;padding:0 20px;}
.clg-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--clg-accent);margin-bottom:14px;
}
.clg-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--clg-accent);
  box-shadow:0 0 0 4px rgba(232,113,74,.18);animation:clgPulseDot 1.6s ease-in-out infinite;}
@keyframes clgPulseDot{0%,100%{box-shadow:0 0 0 4px rgba(232,113,74,.18)}50%{box-shadow:0 0 0 8px rgba(232,113,74,.05)}}
.clg-heading{
  font-family:'Fraunces',serif;font-weight:500;font-size:40px;color:#F4F2ED;line-height:1.25;margin-bottom:12px;
}
.clg-heading .clg-num{font-family:'JetBrains Mono',monospace;color:#ec4899;}
.clg-heading .clg-accent{
  font-style:italic;
  background:linear-gradient(90deg,#ec4899,#f97316,#ec4899);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:clgTitleShine 4s linear infinite;
}
@keyframes clgTitleShine{0%{background-position:0% center}100%{background-position:200% center}}
.clg-sub{font-size:15px;color:#8B8791;}
.clg-sub b{color:#F4F2ED;font-weight:500;}

/* ============ ROWS ============ */
.clg-rows{position:relative;z-index:2;display:flex;flex-direction:column;gap:28px;}

.clg-row-wrap{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
}

.clg-track{
  display:flex;align-items:center;gap:28px;width:max-content;will-change:transform;
}
.clg-track.dir-rtl{ animation:clgScrollRTL 80s linear infinite; }
.clg-track.dir-ltr{ animation:clgScrollLTR 80s linear infinite; }
@keyframes clgScrollRTL{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes clgScrollLTR{ from{transform:translateX(-50%);} to{transform:translateX(0);} }

.clg-item{
  position:relative;flex-shrink:0;
  width:200px;height:120px;
  border-radius:18px;
  background:#ffffff;
  border:2px solid transparent;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.5);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease;
  overflow:hidden;
  animation:clgBreathe 4s ease-in-out infinite;
}
.clg-item:nth-child(3n+1){ animation-delay:0s; }
.clg-item:nth-child(3n+2){ animation-delay:.6s; }
.clg-item:nth-child(3n+3){ animation-delay:1.2s; }
@keyframes clgBreathe{
  0%,100%{ box-shadow:0 14px 34px -12px rgba(0,0,0,.5); }
  50%{ box-shadow:0 14px 34px -12px rgba(0,0,0,.5), 0 0 0 4px rgba(236,72,153,.12), 0 0 26px 2px rgba(236,72,153,.18); }
}

/* colorful gradient border ring, drawn behind the white card */
.clg-item::before{
  content:'';position:absolute;inset:0;border-radius:18px;z-index:-1;padding:2px;
  background:linear-gradient(135deg,#ec4899,#f97316,#ec4899);
  background-size:200% 200%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:clgBorderShift 4s linear infinite;
}
@keyframes clgBorderShift{ 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } }

/* periodic diagonal shine sweep across each card */
.clg-item::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-150%);
  animation:clgShine 5s ease-in-out infinite;
}
.clg-item:nth-child(4n+1)::after{ animation-delay:0s; }
.clg-item:nth-child(4n+2)::after{ animation-delay:1.2s; }
.clg-item:nth-child(4n+3)::after{ animation-delay:2.4s; }
.clg-item:nth-child(4n+4)::after{ animation-delay:3.6s; }
@keyframes clgShine{
  0%,30%{ transform:translateX(-150%); }
  55%{ transform:translateX(150%); }
  100%{ transform:translateX(150%); }
}

.clg-item img{
  width:100%;height:100%;object-fit:contain;padding:16px;display:block;position:relative;z-index:1;
}
.clg-item:hover{
  transform:scale(1.045) translateY(-5px);
  z-index:10;

  border:5px solid transparent;

  box-shadow:
    0 0 15px rgba(236,72,153,.9),
    0 0 35px rgba(236,72,153,.75),
    0 0 60px rgba(249,115,22,.65),
    0 0 90px rgba(168,85,247,.45);

  animation:clgUltraGlow 1.4s ease-in-out infinite alternate;
}


/* EXTRA THICK COLORFUL BORDER */
.clg-item:hover::before{
  inset:-4px;
  border-radius:22px;
  padding:5px;

  background:
    linear-gradient(
      120deg,
      #ec4899 0%,
      #f97316 25%,
      #a855f7 50%,
      #ec4899 75%,
      #f97316 100%
    );

  background-size:400% 400%;

  animation:clgUltraBorder 1.2s linear infinite;
}


/* BORDER COLOR MOVEMENT */
@keyframes clgUltraBorder{

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

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

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

}


/* STRONGER GLOW */
@keyframes clgUltraGlow{

  0%{
    box-shadow:
      0 0 15px rgba(236,72,153,.8),
      0 0 35px rgba(236,72,153,.6),
      0 0 60px rgba(249,115,22,.45),
      0 0 85px rgba(168,85,247,.3);
  }

  100%{
    box-shadow:
      0 0 25px rgba(236,72,153,1),
      0 0 50px rgba(236,72,153,.85),
      0 0 80px rgba(249,115,22,.7),
      0 0 110px rgba(168,85,247,.55);
  }

}

/* SOFT COLOR MOVEMENT */
@keyframes clgColorGlow{
  0%{
    transform:scale(.9) rotate(0deg);
    opacity:.65;
  }

  50%{
    transform:scale(1.08) rotate(3deg);
    opacity:1;
  }

  100%{
    transform:scale(.95) rotate(-3deg);
    opacity:.75;
  }
}

/* SMALL FLOAT */
@keyframes clgHoverFloat{
  0%,100%{
    transform:scale(1.04) translateY(-4px);
  }

  50%{
    transform:scale(1.045) translateY(-7px);
  }
}
.clg-item:hover::before{ animation-duration:1.5s; }
.clg-row-wrap:hover .clg-track{
  animation-play-state:paused;
}
/* rows fade/slide in on scroll */
.clg-row-wrap{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease;position:relative;
  width:100%;
  overflow:hidden;
  padding:12px 0; }
.clg-row-wrap.clg-in{ opacity:1; transform:translateY(0); }
/* =========================================================
   MOBILE RESPONSIVE — CLIENTS & TESTIMONIAL
========================================================= */

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

  .clg-section{
    padding:60px 0 65px;
  }

  .clg-head{
    max-width:560px;
    margin-bottom:42px;
    padding:0 24px;
  }

  .clg-tag{
    font-size:11px;
    letter-spacing:1.3px;
    margin-bottom:12px;
  }

  .clg-heading{
    font-size:32px;
    line-height:1.25;
    margin-bottom:10px;
  }

  .clg-sub{
    font-size:14px;
    line-height:1.6;
  }

  .clg-rows{
    gap:20px;
  }

  .clg-row-wrap{
    padding:8px 0;
    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
      );
    mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
      );
  }

  .clg-track{
    gap:18px;
  }

  .clg-item{
    width:165px;
    height:100px;
    border-radius:15px;
  }

  .clg-item img{
    padding:14px;
  }

  /* Tablet hover glow - softer */
  .clg-item:hover{
    transform:scale(1.035) translateY(-3px);

    box-shadow:
      0 0 12px rgba(236,72,153,.65),
      0 0 28px rgba(236,72,153,.45),
      0 0 45px rgba(249,115,22,.3);
  }
}


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

  .clg-section{
    padding:46px 0 50px;
  }

  /* ---------- HEADER ---------- */

  .clg-head{
    width:100%;
    max-width:100%;
    padding:0 18px;
    margin:0 auto 34px;
  }

  .clg-tag{
    font-size:10px;
    letter-spacing:1.2px;
    gap:7px;
    margin-bottom:10px;
  }

  .clg-tag::before{
    width:5px;
    height:5px;
    box-shadow:0 0 0 3px rgba(232,113,74,.16);
  }

  .clg-heading{
    font-size:25px;
    line-height:1.28;
    margin-bottom:10px;
  }

  .clg-sub{
    font-size:13px;
    line-height:1.55;
    max-width:330px;
    margin:0 auto;
  }


  /* ---------- ROWS ---------- */

  .clg-rows{
    width:100%;
    gap:15px;
  }

  .clg-row-wrap{
    width:100%;
    padding:7px 0;

    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
      );

    mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
      );
  }

  .clg-track{
    gap:12px;
  }


  /* ---------- LOGO CARD ---------- */

  .clg-item{
    width:132px;
    height:78px;
    border-radius:12px;
    border-width:1.5px;

    box-shadow:
      0 8px 20px -10px rgba(0,0,0,.65);

    animation:none;
  }

  .clg-item img{
    width:100%;
    height:100%;
    padding:9px;
    object-fit:contain;
  }


  /* ---------- BORDER ---------- */

  .clg-item::before{
    border-radius:12px;
    padding:1.5px;
  }


  /* ---------- SHINE ---------- */

  .clg-item::after{
    background:
      linear-gradient(
        115deg,
        transparent 42%,
        rgba(255,255,255,.35) 50%,
        transparent 58%
      );

    animation-duration:6s;
  }


  /* ---------- TOUCH DEVICES ---------- */

  /*
     Mobile-la hover permanent-a trigger aagura issue avoid pannum.
     Card touch pannumbodhu mattum subtle scale.
  */

  .clg-item:hover{
    transform:none;

    box-shadow:
      0 8px 20px -10px rgba(0,0,0,.65);
  }

  .clg-item:hover::before{
    animation:clgBorderShift 4s linear infinite;
  }

  .clg-row-wrap:hover .clg-track{
    animation-play-state:running;
  }


  /* ---------- SCROLL SPEED ---------- */

  .clg-track.dir-rtl{
    animation-duration:24s;
  }

  .clg-track.dir-ltr{
    animation-duration:24s;
  }


  /* ---------- GLOWS ---------- */

  .clg-glow-1{
    width:260px;
    height:260px;
    top:-100px;
    left:-120px;
    filter:blur(60px);
  }

  .clg-glow-2{
    width:260px;
    height:260px;
    bottom:-100px;
    right:-120px;
    filter:blur(60px);
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px){

  .clg-section{
    padding:40px 0 44px;
  }

  .clg-head{
    padding:0 16px;
    margin-bottom:30px;
  }

  .clg-heading{
    font-size:22px;
  }

  .clg-sub{
    font-size:12px;
    max-width:300px;
  }

  .clg-rows{
    gap:12px;
  }

  .clg-track{
    gap:10px;
  }

  .clg-item{
    width:118px;
    height:70px;
    border-radius:11px;
  }

  .clg-item::before{
    border-radius:11px;
  }

  .clg-item img{
    padding:8px;
  }

  .clg-track.dir-rtl,
  .clg-track.dir-ltr{
    animation-duration:21s;
  }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */
@media (max-width: 360px){

  .clg-section{
    padding:36px 0 40px;
  }

  .clg-heading{
    font-size:20px;
  }

  .clg-tag{
    font-size:9px;
  }

  .clg-sub{
    font-size:11.5px;
  }

  .clg-item{
    width:105px;
    height:64px;
  }

  .clg-track{
    gap:9px;
  }
}


/* =========================================================
   REDUCE MOTION
========================================================= */
@media (prefers-reduced-motion: reduce){

  .clg-track,
  .clg-item,
  .clg-item::before,
  .clg-item::after,
  .clg-tag::before,
  .clg-heading .clg-accent{
    animation:none !important;
  }

  .clg-row-wrap{
    opacity:1;
    transform:none;
  }
}



/*=================================
          CTA SECTION 5
=================================*/

.cta-section {
    --accent: #ec4899;
    --accent2: #f97316;
    --text-dark: #17130f;
    --text-muted: #68635f;

    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 58px 24px 52px;
    overflow: hidden;
    isolation: isolate;
    text-align: center;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(236,72,153,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(249,115,22,.15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff5f0 30%,
            #ffeaf2 55%,
            #fff8f4 78%,
            #ffffff 100%
        );

    background-size:
        100% 100%,
        100% 100%,
        250% 250%;

    animation: ctaGradientMove 12s ease-in-out infinite;
}


/* =========================================================
   ANIMATED BACKGROUND GRADIENT
========================================================= */

@keyframes ctaGradientMove {
    0% {
        background-position:
            0 0,
            0 0,
            0% 50%;
    }

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

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


/* =========================================================
   SOFT LIGHT AURA
========================================================= */

.cta-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: -180px;
    top: -260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(236,72,153,.20) 0%,
            rgba(236,72,153,.08) 35%,
            transparent 70%
        );

    filter: blur(15px);
    pointer-events: none;
    z-index: -1;

    animation: ctaAuraLeft 10s ease-in-out infinite;
}


.cta-section::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -180px;
    bottom: -280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(249,115,22,.18) 0%,
            rgba(249,115,22,.07) 38%,
            transparent 72%
        );

    filter: blur(18px);
    pointer-events: none;
    z-index: -1;

    animation: ctaAuraRight 12s ease-in-out infinite;
}


@keyframes ctaAuraLeft {
    0%,100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(80px,55px) scale(1.12);
    }
}


@keyframes ctaAuraRight {
    0%,100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(-70px,-50px) scale(1.1);
    }
}


/* =========================================================
   SOFT BLOBS
========================================================= */

.blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(12px);
    z-index: 0;
}


/* Blob 1 */

.blob1 {
    width: 300px;
    height: 300px;

    top: -130px;
    left: -90px;

    background:
        radial-gradient(
            circle,
            rgba(249,115,22,.30) 0%,
            rgba(249,115,22,.10) 42%,
            transparent 72%
        );

    animation: ctaBlob1 10s ease-in-out infinite;
}


/* Blob 2 */

.blob2 {
    width: 310px;
    height: 310px;

    right: -110px;
    bottom: -150px;

    background:
        radial-gradient(
            circle,
            rgba(236,72,153,.30) 0%,
            rgba(236,72,153,.10) 42%,
            transparent 72%
        );

    animation: ctaBlob2 12s ease-in-out infinite;
}


/* Blob 3 */

.blob3 {
    width: 180px;
    height: 180px;

    right: 16%;
    top: 15%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.85) 0%,
            rgba(255,255,255,.25) 45%,
            transparent 75%
        );

    opacity: .65;

    animation: ctaBlob3 8s ease-in-out infinite;
}


/* Blob 4 */

.blob4 {
    width: 180px;
    height: 180px;

    left: 16%;
    bottom: 0;

    background:
        radial-gradient(
            circle,
            rgba(249,115,22,.20) 0%,
            rgba(249,115,22,.08) 45%,
            transparent 75%
        );

    animation: ctaBlob4 9s ease-in-out infinite;
}


/* =========================================================
   BLOB ANIMATIONS
========================================================= */

@keyframes ctaBlob1 {
    0%,100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(65px,45px) scale(1.12);
    }
}


@keyframes ctaBlob2 {
    0%,100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(-55px,-40px) scale(1.1);
    }
}


@keyframes ctaBlob3 {
    0%,100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(-35px,25px) scale(1.08);
    }
}


@keyframes ctaBlob4 {
    0%,100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(35px,-30px) scale(1.1);
    }
}


/* =========================================================
   FLOATING LIGHT PARTICLES
========================================================= */

.cta-section .cta-content::before,
.cta-section .cta-content::after {
    content: "";
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ec4899;

    box-shadow:
        0 0 10px rgba(236,72,153,.7),
        0 0 22px rgba(236,72,153,.35);

    opacity: .6;

    pointer-events: none;
}


.cta-section .cta-content::before {
    left: -110px;
    top: 35%;

    animation: ctaParticleOne 5s ease-in-out infinite;
}


.cta-section .cta-content::after {
    right: -110px;
    top: 62%;

    background: #f97316;

    box-shadow:
        0 0 10px rgba(249,115,22,.7),
        0 0 22px rgba(249,115,22,.35);

    animation: ctaParticleTwo 6s ease-in-out infinite;
}


@keyframes ctaParticleOne {
    0%,100% {
        transform: translate(0,0);
        opacity: .25;
    }

    50% {
        transform: translate(35px,-25px);
        opacity: .8;
    }
}


@keyframes ctaParticleTwo {
    0%,100% {
        transform: translate(0,0);
        opacity: .25;
    }

    50% {
        transform: translate(-35px,25px);
        opacity: .8;
    }
}


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

.cta-content {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 780px;

    margin: 0 auto;
}


/* =========================================================
   TAG
========================================================= */

.cta-tag {
    display: inline-block;

    margin: 0 0 12px;

    padding: 6px 13px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;

    color: #d9468d;

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

    border: 1px solid rgba(236,72,153,.16);

    box-shadow:
        0 6px 20px rgba(236,72,153,.07);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


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

.cta-heading {
    margin: 0 0 12px;

    color: var(--text-dark);

    font-size: clamp(30px,4vw,50px);

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -1.5px;
}


.cta-heading .accent {
    color: transparent;

    background:
        linear-gradient(
            135deg,
            #ec4899,
            #f97316
        );

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


/* =========================================================
   DESCRIPTION
========================================================= */

.cta-sub {
    max-width: 620px;

    margin: 0 auto 24px;

    color: var(--text-muted);

    font-size: 15px;

    line-height: 1.55;
}


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

.cta-buttons {
    display: flex;

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

    gap: 12px;

    flex-wrap: wrap;

    margin-bottom: 17px;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.btn-primary1{
    display: inline-flex;

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

    gap: 9px;

    min-height: 50px;

    padding: 13px 24px;

    border: 0;
    border-radius: 999px;

    color: #fff;

    background: linear-gradient(
    100deg,
    #FF3D78 0%,
    #FF4F70 28%,
    #FF6B5A 55%,
    #FF8550 78%,
    #FF9A3D 100%
  );

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

    cursor: pointer;

    box-shadow:
        0 9px 25px rgba(236,72,153,.25),
        0 5px 15px rgba(249,115,22,.13);

    animation: ctaButtonGlow 3s ease-in-out infinite;

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


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

    box-shadow:
        0 15px 34px rgba(236,72,153,.35),
        0 9px 24px rgba(249,115,22,.22);
}


.btn-primary1 svg {
    width: 16px;
    height: 16px;

    transition:
        transform .25s ease;
}


.btn-primary1:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   CONSULTATION MODAL
========================================================= */

.consult-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 25px;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


/* OPEN STATE */

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


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

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

    background: rgba(8, 6, 12, .72);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* =========================================================
   DIALOG
========================================================= */

.consult-dialog {
    position: relative;
    z-index: 2;

    width: min(720px, 100%);
    max-height: calc(100vh - 50px);

    overflow-y: auto;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(236,72,153,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(249,115,22,.08),
            transparent 30%
        ),
        #ffffff;

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

    border-radius: 26px;

    padding: 30px;

    box-shadow:
        0 30px 90px rgba(0,0,0,.35),
        0 10px 35px rgba(236,72,153,.12);

    transform: translateY(25px) scale(.96);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1);
}


/* OPEN ANIMATION */

.consult-modal.active .consult-dialog {
    transform: translateY(0) scale(1);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.consult-close {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

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

    border: 1px solid rgba(23,19,15,.08);

    border-radius: 50%;

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

    color: #514b48;

    cursor: pointer;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}

.consult-close:hover {
    transform: rotate(90deg);

    background: #17130f;
    color: #ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.consult-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    padding-right: 45px;

    margin-bottom: 25px;
}


.consult-icon {
    flex: 0 0 auto;

    width: 46px;
    height: 46px;

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

    border-radius: 14px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #ec4899,
            #f97316
        );

    box-shadow:
        0 9px 22px rgba(236,72,153,.22);
}


.consult-label {
    display: block;

    margin-bottom: 4px;

    color: #d9468d;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.consult-header h3 {
    margin: 0 0 6px;

    color: #17130f;

    font-size: 27px;
    font-weight: 750;

    letter-spacing: -0.8px;
}


.consult-header p {
    margin: 0;

    max-width: 550px;

    color: #716b67;

    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   FORM
========================================================= */

.consult-form {
    width: 100%;
}


.consult-grid {
    display: grid;

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

    gap: 16px;
}


.consult-field {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.consult-field label {
    color: #302b28;

    font-size: 12px;
    font-weight: 700;
}


.consult-field label span {
    color: #ec4899;
}


.consult-field input,
.consult-field select,
.consult-field textarea {

    width: 100%;

    border: 1px solid #e7e1df;

    border-radius: 12px;

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

    color: #17130f;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.consult-field input,
.consult-field select {
    height: 45px;

    padding: 0 13px;
}


.consult-field textarea {
    min-height: 105px;

    resize: vertical;

    padding: 12px 13px;
}


.consult-field input::placeholder,
.consult-field textarea::placeholder {
    color: #aaa3a0;
}


.consult-field input:focus,
.consult-field select:focus,
.consult-field textarea:focus {

    border-color: #ec4899;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(236,72,153,.09);
}


/* =========================================================
   MESSAGE
========================================================= */

.consult-message-field {
    margin-top: 16px;
}


/* =========================================================
   FORM FOOTER
========================================================= */

.consult-form-footer {

    display: flex;

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

    gap: 18px;

    margin-top: 20px;
}


.consult-note {

    display: flex;
    align-items: center;

    gap: 7px;

    color: #817a76;

    font-size: 11px;
}


.consult-note svg {
    color: #ec4899;

    flex: 0 0 auto;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.consult-submit {

    display: inline-flex;

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

    gap: 9px;

    min-height: 46px;

    padding: 12px 21px;

    border: 0;

    border-radius: 999px;

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #FF3D78 0%,
            #FF4F70 28%,
            #FF6B5A 55%,
            #FF8550 78%,
            #FF9A3D 100%
        );

    font-family: inherit;

    font-size: 12.5px;
    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 9px 24px rgba(236,72,153,.24),
        0 5px 15px rgba(249,115,22,.12);

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


.consult-submit:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(236,72,153,.30),
        0 8px 20px rgba(249,115,22,.18);
}


.consult-submit svg {
    transition: transform .25s ease;
}


.consult-submit:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   SUCCESS STATE
========================================================= */

.consult-success {

    display: none;

    text-align: center;

    padding: 35px 15px 15px;
}


.consult-success.active {
    display: block;
}


.consult-form.hidden {
    display: none;
}


.success-icon {

    width: 68px;
    height: 68px;

    margin: 0 auto 18px;

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

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #ec4899,
            #f97316
        );

    box-shadow:
        0 12px 30px rgba(236,72,153,.24);
}


.consult-success h3 {

    margin: 0 0 8px;

    color: #17130f;

    font-size: 23px;
    font-weight: 750;

    letter-spacing: -.5px;
}


.consult-success p {

    max-width: 420px;

    margin: 0 auto 22px;

    color: #716b67;

    font-size: 13px;

    line-height: 1.6;
}


.success-close {

    min-width: 100px;

    padding: 10px 20px;

    border: 0;

    border-radius: 999px;

    color: #ffffff;

    background: #17130f;

    font-family: inherit;

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

    cursor: pointer;

    transition: transform .2s ease;
}


.success-close:hover {
    transform: translateY(-2px);
}


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

@media (max-width: 650px) {

    .consult-modal {
        padding: 14px;
    }

    .consult-dialog {
        max-height: calc(100vh - 28px);

        padding: 24px 18px;

        border-radius: 22px;
    }

    .consult-header {
        gap: 11px;

        padding-right: 35px;

        margin-bottom: 21px;
    }

    .consult-icon {
        width: 40px;
        height: 40px;

        border-radius: 12px;
    }

    .consult-header h3 {
        font-size: 22px;
    }

    .consult-header p {
        font-size: 12px;
    }

    .consult-grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .consult-message-field {
        margin-top: 13px;
    }

    .consult-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .consult-submit {
        width: 100%;
    }

    .consult-note {
        justify-content: center;
    }
}


/* =========================================================
   BODY LOCK
========================================================= */

body.consult-modal-open {
    overflow: hidden;
}









/* =========================================================
   BUTTON GLOW
========================================================= */

@keyframes ctaButtonGlow {
    0%,100% {
        box-shadow:
            0 9px 25px rgba(236,72,153,.22),
            0 5px 15px rgba(249,115,22,.12);
    }

    50% {
        box-shadow:
            0 12px 32px rgba(236,72,153,.32),
            0 7px 21px rgba(249,115,22,.18);
    }
}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.btn-secondary {
    display: inline-flex;

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

    gap: 8px;

    min-height: 50px;

    padding: 13px 22px;

    border-radius: 999px;

    border:
        1px solid rgba(37,211,102,.25);

    color: #202020;

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

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

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

    cursor: pointer;

    box-shadow:
        0 8px 22px rgba(37,211,102,.08);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.btn-secondary svg {
    width: 19px;
    height: 19px;

    flex-shrink: 0;

    fill: #25D366;

    transition:
        transform .25s ease,
        filter .25s ease;
}


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

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

    border-color:
        rgba(37,211,102,.65);

    color: #168c43;

    box-shadow:
        0 12px 30px rgba(37,211,102,.18);
}


.btn-secondary:hover svg {
    transform: scale(1.15);

    filter:
        drop-shadow(
            0 0 6px
            rgba(37,211,102,.55)
        );
}


/* =========================================================
   TRUST TEXT
========================================================= */

.cta-trust {
    margin: 0;

    color:
        rgba(104,99,95,.8);

    font-size: 12.5px;

    line-height: 1.4;
}


.accent-num {
    color: #d9468d;

    font-weight: 800;
}


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

@media (max-width: 768px) {

    .cta-section {
        padding: 48px 20px 44px;
    }

    .cta-heading {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .cta-sub {
        font-size: 14px;
        margin-bottom: 22px;
    }

    .blob1 {
        width: 220px;
        height: 220px;
        left: -110px;
        top: -100px;
    }

    .blob2 {
        width: 230px;
        height: 230px;
        right: -110px;
        bottom: -110px;
    }

    .cta-section::before {
        width: 360px;
        height: 360px;
    }

    .cta-section::after {
        width: 350px;
        height: 350px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .cta-section {
        width: 100%;
        padding: 42px 16px 38px;
    }

    .cta-content {
        width: 100%;
        max-width: 100%;
    }

    .cta-tag {
        font-size: 9px;
        letter-spacing: 1.4px;

        padding: 5px 10px;

        margin-bottom: 12px;
    }

    .cta-heading {
        font-size: 26px;
        line-height: 1.15;
        letter-spacing: -.7px;

        margin-bottom: 11px;
    }

    .cta-sub {
        font-size: 13.5px;
        line-height: 1.5;

        margin-bottom: 21px;
    }

    .cta-buttons {
        width: 100%;

        flex-direction: column;

        gap: 9px;

        margin-bottom: 16px;
    }

    .btn-primary1,
    .btn-secondary {
        width: 100%;

        min-height: 49px;

        padding: 12px 17px;

        justify-content: center;
    }

    .btn-primary1 {
        font-size: 13px;
    }

    .btn-secondary {
        font-size: 13px;
    }

    .btn-primary1 svg {
        width: 16px;
        height: 16px;
    }

    .btn-secondary svg {
        width: 19px;
        height: 19px;
    }

    .cta-trust {
        font-size: 11.5px;
    }

    .blob1 {
        width: 180px;
        height: 180px;

        top: -80px;
        left: -100px;
    }

    .blob2 {
        width: 190px;
        height: 190px;

        right: -100px;
        bottom: -90px;
    }

    .blob3 {
        width: 120px;
        height: 120px;

        right: 0;
        top: 20%;
    }

    .blob4 {
        width: 120px;
        height: 120px;

        left: 0;
        bottom: 5%;
    }

    .cta-section .cta-content::before {
        left: 3%;
        top: 25%;
    }

    .cta-section .cta-content::after {
        right: 3%;
        top: 68%;
    }
}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {

    .cta-section {
        padding: 38px 14px 34px;
    }

    .cta-heading {
        font-size: 23px;
    }

    .cta-sub {
        font-size: 12.5px;
    }

    .btn-primary1,
    .btn-secondary {
        min-height: 47px;
        font-size: 12px;
    }

    .cta-trust {
        font-size: 11px;
    }
}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    .cta-section,
    .cta-section::before,
    .cta-section::after,
    .blob1,
    .blob2,
    .blob3,
    .blob4,
    .btn-primary,
    .cta-section .cta-content::before,
    .cta-section .cta-content::after {
        animation: none !important;
    }
}
/* =========================================
   CTA SECTION — MOBILE RESPONSIVE
========================================= */

@media (max-width: 600px){

    .cta-section{
        width:100%;
        max-width:100%;
        margin:0;

        padding:45px 18px 42px;

        text-align:center;

        overflow:hidden;
    }

}
/* =========================================
   CTA SECTION — MOBILE RESPONSIVE
========================================= */

@media (max-width: 600px){

    .cta-section{
        width:100%;
        max-width:100%;
        margin:0;

        padding:45px 18px 42px;

        text-align:center;

        overflow:hidden;

        background-size:
            100% 100%,
            100% 100%,
            400% 400%;
    }


    /* CTA heading */
    .cta-section h1,
    .cta-section h2{
        font-size:26px;
        line-height:1.25;
        margin-bottom:14px;
    }


    /* CTA paragraph */
    .cta-section p{
        font-size:13.5px;
        line-height:1.7;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
    }


    /* CTA buttons */
    .cta-section a,
    .cta-section button{
        max-width:100%;
    }

}


/*=================================================== 
              CULTURE HERO SECTION
=====================================================*/


/* =========================================================
   EGS CULTURE HERO — UNIQUE NAMESPACE
   ========================================================= */

* {
  box-sizing: border-box;
}

.egsCulHero {
  position: relative;
  min-height: 720px;
  background: #000;
  overflow: hidden;
  padding: 80px 5% 70px;
}




/* ================= BLOBS ================= */

.egsCulBgBlob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.egsCulBlobOne {
  width: 480px;
  height: 480px;
  top: -160px;
  right: -140px;

  background: radial-gradient(
    circle,
    rgba(255,92,138,0.22),
    transparent 70%
  );

  animation: egsCulDriftOne 15s ease-in-out infinite;
}

.egsCulBlobTwo {
  width: 440px;
  height: 440px;
  bottom: -180px;
  left: -140px;

  background: radial-gradient(
    circle,
    rgba(255,138,61,0.2),
    transparent 70%
  );

  animation: egsCulDriftTwo 18s ease-in-out infinite;
}

@keyframes egsCulDriftOne {
  0%,100% {
    transform: translate(0,0) scale(1);
  }

  50% {
    transform: translate(-40px,30px) scale(1.1);
  }
}

@keyframes egsCulDriftTwo {
  0%,100% {
    transform: translate(0,0) scale(1);
  }

  50% {
    transform: translate(35px,-30px) scale(1.08);
  }
}


/* ================= PARTICLES ================= */

.egsCulParticle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.egsCulPink {
  background: linear-gradient(
    135deg,
    #ff5c8a,
    #e0306f
  );
}

.egsCulOrange {
  background: #ff8a3d;
}

.egsCulPtOne {
  width: 4px;
  height: 4px;
  top: 15%;
  left: 12%;
  opacity: .7;
  animation: egsCulTwinkle 3s ease-in-out infinite;
}

.egsCulPtTwo {
  width: 3px;
  height: 3px;
  top: 65%;
  left: 8%;
  opacity: .5;
  animation: egsCulTwinkle 4s ease-in-out infinite .5s;
}

.egsCulPtThree {
  width: 5px;
  height: 5px;
  top: 22%;
  right: 10%;
  opacity: .6;
  animation: egsCulTwinkle 3.5s ease-in-out infinite .2s;
}

.egsCulPtFour {
  width: 3px;
  height: 3px;
  top: 45%;
  right: 18%;
  opacity: .6;
  animation: egsCulTwinkle 4.5s ease-in-out infinite .8s;
}

.egsCulPtFive {
  width: 4px;
  height: 4px;
  bottom: 20%;
  left: 30%;
  opacity: .5;
  animation: egsCulTwinkle 3.2s ease-in-out infinite .3s;
}

.egsCulPtSix {
  width: 6px;
  height: 6px;
  bottom: 12%;
  right: 30%;
  opacity: .55;
  animation: egsCulTwinkle 4.2s ease-in-out infinite .6s;
}

.egsCulPtSeven {
  width: 3px;
  height: 3px;
  top: 8%;
  left: 45%;
  opacity: .5;
  animation: egsCulTwinkle 3.8s ease-in-out infinite .1s;
}

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

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


/* ================= SPHERES ================= */

.egsCulSphere {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle at 30% 26%,
      rgba(255,255,255,0.9),
      rgba(255,255,255,0) 44%
    ),
    linear-gradient(
      135deg,
      #e0306f,
      #ff8a3d
    );

  box-shadow:
    inset -6px -8px 16px rgba(0,0,0,0.3),
    0 20px 40px -12px rgba(224,48,111,0.4);
}

.egsCulSphereOne {
  width: 70px;
  height: 70px;
  top: 8%;
  right: 6%;
  animation: egsCulOrbFloat 9s ease-in-out infinite;
}

.egsCulSphereTwo {
  width: 34px;
  height: 34px;
  bottom: 10%;
  left: 4%;
  animation: egsCulOrbFloat 11s ease-in-out infinite 1s;
}

.egsCulSphereThree {
  width: 20px;
  height: 20px;
  top: 55%;
  left: 8%;
  opacity: .85;
  animation: egsCulOrbFloat 7s ease-in-out infinite .5s;
}

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

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


/* ================= DOODLES ================= */

.egsCulDoodle {
  position: absolute;
  stroke: rgba(255,255,255,0.35);
  fill: none;
  stroke-width: 1.6;
  pointer-events: none;
}

.egsCulPinkDoodle {
  stroke: rgba(255,92,138,0.5);
}

.egsCulOrangeDoodle {
  stroke: rgba(255,138,61,0.5);
}

.egsCulDoodleOne {
  top: 6%;
  left: 35%;
  width: 34px;
  animation: egsCulBob 5s ease-in-out infinite;
}

.egsCulDoodleTwo {
  top: 10%;
  right: 26%;
  width: 44px;
  animation: egsCulBob 6s ease-in-out infinite .4s;
}

.egsCulDoodleThree {
  top: 30%;
  left: 6%;
  width: 30px;
  animation: egsCulBob 5.5s ease-in-out infinite .2s;
}

.egsCulDoodleFour {
  top: 52%;
  right: 10%;
  width: 36px;
  animation: egsCulBob 4.8s ease-in-out infinite .6s;
}

.egsCulDoodleFive {
  bottom: 14%;
  left: 22%;
  width: 30px;
  animation: egsCulBob 6.2s ease-in-out infinite .1s;
}

.egsCulDoodleSix {
  top: 18%;
  right: 5%;
  width: 26px;
  animation: egsCulBob 5.2s ease-in-out infinite .8s;
}

.egsCulDoodleSeven {
  bottom: 8%;
  right: 32%;
  width: 28px;
  animation: egsCulBob 4.5s ease-in-out infinite .3s;
}

@keyframes egsCulBob {
  0%,100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(4deg);
  }
}


/* ================= MAIN GRID ================= */

.egsCulGrid {
  position: relative;
  z-index: 1;

  max-width: 1280px;
  margin: 10px auto 0;

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;

  min-height: auto;
}


/* ================= LEFT CONTENT ================= */

.egsCulTag {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 11px 22px;

  background: rgba(255, 92, 138, 0.07);
  border: 1px solid rgba(255, 92, 138, 0.28);

  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ff8fb3;

  margin-bottom: 35px;
  margin-top: 0;
}

.egsCulTagDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;

  background: linear-gradient(
    135deg,
    #ff5c8a,
    #ff8a3d
  );
}


.egsCulTitle {
  font-weight: 800;
  font-size: clamp(34px,4.5vw,56px);
  line-height: 1.12;

  color: #fff;

  margin: 0 0 26px;
}

.egsCulTitleSmall {
  display: block;
  font-size: .5em;
  font-weight: 700;
  color: #fff;
  opacity: .9;
}

.egsCulGradient {
  background: linear-gradient(
    100deg,
    #ff6b9d 0%,
    #ff8a3d 100%
  ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;

  -webkit-text-fill-color: transparent !important;
  color: transparent !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


.egsCulSubtitle {
  color: #a3a3ab;

  font-size: 16px;
  line-height: 1.75;

  max-width: 480px;

  margin: 0 0 40px;
}


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

.egsCulActions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.egsCulPrimaryBtn {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 8px 8px 8px 26px;
  border-radius: 999px;
  border: none;

  cursor: pointer;

  background: #000;
  color: #fff;

  font-family: 'Poppins',sans-serif;
  font-weight: 600;
  font-size: 15px;

  box-shadow:
    0 18px 40px -14px rgba(255,92,138,0.35);

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

.egsCulPrimaryBtn:hover {
  transform: translateY(-2px);

  box-shadow:
    0 22px 46px -12px rgba(255,92,138,0.5);
}

.egsCulArrowCircle {
  width: 38px;
  height: 38px;

  border-radius: 50%;

  background: linear-gradient(
    135deg,
    #e0306f,
    #ff8a3d
  );

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

  flex-shrink: 0;
}

.egsCulArrowCircle svg {
  width: 16px;
  height: 16px;
  color: #fff;
}


.egsCulOutlineBtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 16px 28px;
  border-radius: 999px;

  cursor: pointer;

  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.18);

  color: #fff;

  font-family: 'Poppins',sans-serif;
  font-weight: 600;
  font-size: 15px;

  transition:
    background .2s ease,
    border-color .2s ease;
}

.egsCulOutlineBtn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
}


/* ================= RIGHT VISUAL ================= */

.egsCulVisual {
  position: relative;
  height: 480px;
}


/* ================= PHOTO ================= */

.egsCulPhotoCard {
  position: absolute;

  top: 35px;
  left: 5%;

  width: 360px;
  height: 440px;

  z-index: 2;

  border-radius: 20px;
  overflow: hidden;

  border: 1.5px solid rgba(255,92,138,0.35);

  box-shadow:
    0 0 50px -10px rgba(255,92,138,0.3),
    0 25px 55px -20px rgba(0,0,0,0.85);

  animation: egsCulFloatCard 7s ease-in-out infinite;
}

.egsCulPhotoCard img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;

  animation: egsCulImgPulse 6s ease-in-out infinite;
}

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

  50% {
    transform: scale(1.06);
  }
}

.egsCulPhotoCard::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0,0,0,0.75) 100%
    );
}

.egsCulPhotoTag {
  position: absolute;

  bottom: 14px;
  left: 14px;

  z-index: 2;

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

  color: #fff;
}

.egsCulPhotoTag span {
  display: block;

  font-size: 10.5px;
  font-weight: 500;

  color: #c7c2d1;

  margin-top: 2px;
}

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

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


/* ================= STATS ================= */

.egsCulStatStack {
  position: absolute;

  top: 6%;
  right: 4%;

  z-index: 3;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);

  backdrop-filter: blur(10px);

  border-radius: 16px;

  padding: 16px 20px;

  box-shadow:
    0 20px 40px -16px rgba(0,0,0,0.6);

  animation:
    egsCulFloatCard 8s ease-in-out infinite .4s;
}

.egsCulStatRow {
  display: flex;
  align-items: baseline;
  gap: 8px;

  padding: 6px 0;
}

.egsCulStatRow:not(:last-child) {
  border-bottom:
    1px solid rgba(255,255,255,0.06);
}

.egsCulStatValue {
  font-weight: 800;
  font-size: 19px;
}

.egsCulStatPink {
  color: #ff8fb3;
}

.egsCulStatOrange {
  color: #ffb87a;
}

.egsCulStatPurple {
  color: #ff9fc0;
}

.egsCulStatLabel {
  font-size: 11.5px;
  color: whitesmoke;
}


/* ================= VALUES ================= */

.egsCulValuesMini {
  position: absolute;

  bottom: 4%;
  right: 8%;

  z-index: 3;

  width: 210px;

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

  border: none;

  backdrop-filter: blur(10px);

  border-radius: 16px;

  padding: 16px 18px;

  box-shadow:
    0 20px 40px -16px rgba(0,0,0,0.6);

  animation:
    egsCulFloatCard 6.5s ease-in-out infinite .8s;
}

.egsCulValueLabel {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;

  color: #8a8792;

  margin-bottom: 6px;
}

.egsCulValueWord {
  font-weight: 700;
  font-size: 16px;

  color: #fff;

  transition: opacity .4s ease;

  min-height: 22px;
}

.egsCulValueGradient {
  color: #ff8a3d !important;

  background: none !important;
  background-color: transparent !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border: none !important;
  box-shadow: none !important;

  padding: 0 !important;
}


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

@media (max-width: 960px) {

  .egsCulPhotoCard {
    position: relative;
    left: auto;
    margin: 0 auto;
  }

  .egsCulStatStack,
  .egsCulValuesMini {
    display: none;
  }

  .egsCulGrid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .egsCulSubtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .egsCulActions {
    justify-content: center;
  }

  .egsCulVisual {
    height: 360px;
    margin-top: 20px;
  }
}


/* ================= REDUCED MOTION ================= */

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

  .egsCulDoodle,
  .egsCulBgBlob,
  .egsCulParticle,
  .egsCulSphere,
  .egsCulPhotoCard,
  .egsCulPhotoCard img,
  .egsCulStatStack,
  .egsCulValuesMini {
    animation: none !important;
  }
}

/* =========================
   INSIGHTS SECTION (final, strong glow)
   Replace your previous .insights-section CSS block with this
========================= */

.insights-section {
  position: relative;
  width: 100%;
  padding: 90px 40px 80px;
  background: #050208;
  overflow: hidden;
}

.insights-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.insights-shine-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  left: -200px;
  z-index: 1;
  pointer-events: none;
}

.insights-blob {
  position: absolute;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}
.blob-1 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, #ec4899, #fb923c 70%, transparent);
  opacity: 0.45;
  top: -120px;
  left: -80px;
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
}
.blob-2 {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, #fb923c, #facc15 70%, transparent);
  opacity: 0.38;
  bottom: -120px;
  right: -60px;
  border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
}
.blob-3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #a855f7, #ec4899 70%, transparent);
  opacity: 0.32;
  top: 15%;
  right: 15%;
  border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%;
}
.blob-1 { opacity: 0.6; width: 450px; height: 450px; }
.blob-2 { opacity: 0.5; width: 400px; height: 400px; }
.blob-3 { opacity: 0.45; width: 350px; height: 350px; }

.insights-heading {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 650px;
  margin: 0 auto 50px;
}

.insights-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #f9a8d4;
  margin-bottom: 16px;
}
.insights-tag .tag-line {
  width: 24px;
  height: 1px;
  background: #f9a8d4;
  display: inline-block;
}

.insights-heading h2 {
  font-size: 44px;
  font-weight: 800;
  margin: 0 0 14px;
  color: #fff;
  text-shadow: 0 0 30px rgba(236,72,153,0.45);
}

.insights-subtext {
  margin: 0 auto;
  padding-inline: 16px;
  font-size: 15px;
  color: wheat;
  line-height: 1.6;
  text-align: center !important;
  text-align-last: center !important;
}


.insights-cards-wrap {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: nowrap;
}

.insight-card-border {
  width: 260px;
  flex-shrink: 0;
  animation: cardIdleGlow 3s ease-in-out infinite;
}
@keyframes cardIdleGlow {
  0%, 100% { box-shadow: 0 0 25px rgba(236,72,153,0.2); }
  50% { box-shadow: 0 0 40px rgba(236,72,153,0.45); }
}

.insight-card-border {
  width: 300px;
  border-radius: 18px;
  padding: 1.5px;
  background: conic-gradient(from 0deg, #ec4899, #fb923c, #facc15, #ec4899);
  box-shadow: 0 0 30px rgba(236,72,153,0.25);
  opacity: 0;
  transform: translateY(30px);
}
.insight-card-border.reveal {
  animation: insightCardIn 0.7s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes insightCardIn {
  to { opacity: 1; transform: translateY(0); }
}

.insight-card {
  background: #0d0714;
  border-radius: 16.5px;
  overflow: hidden;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.insight-body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.insight-body h4 {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.3;
  min-height: 44px;
}

.insight-body p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}

.insight-card-border {
  width: 300px;
  flex-shrink: 0;
  display: flex;
}
.insight-card-border:hover .insight-card {
  transform: translateY(-6px);
}
.insight-card-border:hover {
  box-shadow: 0 0 45px rgba(236,72,153,0.4);
}

.insight-thumb {
  width: 100%;
  height:200px;
  overflow: hidden;
}
.insight-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.insight-card-border:hover .insight-thumb img {
  transform: scale(1.08);
}

.insight-body {
  padding: 20px 20px 22px;
}

.insight-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #facc15;
  background: rgba(250,204,21,0.1);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.insight-body h4 {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.3;
}

.insight-body p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  margin: 0 0 16px;
}

.insight-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}

.insights-btn-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.insights-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #ec4899, #fb923c);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: btnIdleGlow 2.6s ease-in-out infinite;
}

@keyframes btnIdleGlow {
  0%, 100% { box-shadow: 0 8px 24px -8px rgba(236,72,153,0.5); }
  50% { box-shadow: 0 12px 34px -6px rgba(236,72,153,0.75), 0 0 20px 4px rgba(251,146,60,0.3); }
}

.insights-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  left: -80px;
  animation: btnShine 3s ease-in-out infinite;
}
@keyframes btnShine {
  to { left: 130%; }
}

.insights-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 18px 40px -10px rgba(236,72,153,0.8);
}

.insights-btn-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}
.insights-btn:hover .insights-btn-arrow {
  transform: translateX(5px) rotate(-10deg);
}
.insights-btn-arrow svg { width: 13px; height: 13px; }

/*
  READ MORE BUTTON
  Append this to the end of your insights section CSS
  (after the .insight-meta rule)
*/

.insight-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: none;
  border: none;
  color: #f9a8d4;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.insight-read-more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 1.5px;
  background: linear-gradient(90deg, #ec4899, #fb923c);
  transition: width 0.3s ease;
}

.insight-read-more:hover::after {
  width: 60px;
}

.insight-read-more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.insight-read-more:hover svg {
  transform: translateX(5px);
}

/*
  Adjust wrap width for 4 cards
*/
.insights-cards-wrap {
  max-width: 1400px !important;
}

/* =========================================
   FINAL MOBILE FIX — INSIGHTS CARDS
========================================= */

@media (max-width: 600px) {

  .insights-section {
    width: 100%;
    box-sizing: border-box;
    padding: 55px 12px 50px;
    overflow: hidden;
  }

  .insights-cards-wrap {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 18px;
    margin: 0 auto;
  }

  /* FORCE EVERY CARD SAME WIDTH */
  .insight-card-border {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    flex: 0 0 100% !important;

    box-sizing: border-box;
    margin: 0 !important;

    border-radius: 17px;
    padding: 1.5px;
  }

  .insight-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    border-radius: 15.5px;
  }

  /* IMAGE */
  .insight-thumb {
    width: 100%;
    height: 180px;
    overflow: hidden;
  }

  .insight-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  /* CONTENT */
  .insight-body {
    width: 100%;
    box-sizing: border-box;
    padding: 17px 17px 20px;
  }

  .insight-body h4 {
    font-size: 16px;
    line-height: 1.35;
    min-height: auto;
  }

  .insight-body p {
    font-size: 12.5px;
    line-height: 1.55;
  }

  .insight-meta {
    width: 100%;
    box-sizing: border-box;
  }

  /* READ MORE */
  .insight-read-more {
    margin-top: 13px;
  }

  /* HEADING */
  .insights-heading {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5px;
    margin-bottom: 32px;
  }

  .insights-heading h2 {
    font-size: 29px;
    line-height: 1.2;
  }

  .insights-subtext {
    font-size: 13px;
  }

  /* BOTTOM BUTTON */
  .insights-btn-wrap {
    margin-top: 35px;
  }

  .insights-btn {
    max-width: 100%;
    box-sizing: border-box;
    padding: 13px 22px;
  }
}


/* VERY SMALL PHONES */
@media (max-width: 380px) {

  .insights-section {
    padding-left: 10px;
    padding-right: 10px;
  }

  .insight-thumb {
    height: 165px;
  }

  .insights-heading h2 {
    font-size: 27px;
  }
}


/*========================================
           whatsapp & LinkedIn
========================================*/
/* =========================================
   EGS FLOATING ACTIONS
========================================= */

.egs-floating-actions {
    position: fixed;

    right: 25px;
    bottom: 30px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 15px;

    z-index: 99999;

    pointer-events: none;
}


/* =========================================
   COMMON ACTION BUTTON
========================================= */

.egs-float-action {
    position: relative;

    width: 58px;
    height: 58px;

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

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;

    color: #ffffff;
    text-decoration: none;

    cursor: pointer;

    overflow: visible;

    pointer-events: auto;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    transition:
        transform 0.35s ease,
        border-radius 0.35s ease,
        box-shadow 0.35s ease,
        filter 0.35s ease;
}


/* =========================================
   ICON
========================================= */

.egs-float-icon {
    width: 27px;
    height: 27px;

    position: relative;

    z-index: 2;

    flex-shrink: 0;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}


/* =========================================
   WHATSAPP
========================================= */

.egs-whatsapp-action {
    background:
        linear-gradient(
            135deg,
            rgba(37, 211, 102, 0.98),
            rgba(17, 145, 67, 0.92)
        );

    box-shadow:
        0 10px 30px rgba(37, 211, 102, 0.28),
        0 0 20px rgba(37, 211, 102, 0.18),
        inset 0 1px 2px rgba(255, 255, 255, 0.28);

    animation: egsWhatsappFloat 3s ease-in-out infinite;
}


/* =========================================
   LINKEDIN
========================================= */

.egs-linkedin-action {
    background:
        linear-gradient(
            135deg,
            rgba(10, 102, 194, 0.98),
            rgba(0, 65, 130, 0.94)
        );

    box-shadow:
        0 10px 30px rgba(10, 102, 194, 0.30),
        0 0 20px rgba(10, 102, 194, 0.18),
        inset 0 1px 2px rgba(255, 255, 255, 0.28);

    animation:
        egsLinkedinFloat 3s ease-in-out infinite;

    animation-delay: 0.35s;
}
/* =========================================
   EGS BACK TO TOP BUTTON
========================================= */
.egs-scroll-top-button {
  position: fixed;
  left: 25px;
  bottom: 30px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999999;

  background: linear-gradient(135deg, #ec4899, #f97316);
  color: #fff;
  box-shadow: 0 8px 22px rgba(236,72,153,0.4);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px) scale(0.85);

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

/* SHOW STATE */
.egs-scroll-top-button.egs-scroll-top-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* ICON */
.egs-scroll-top-button svg {
  width: 22px;
  height: 22px;
}

/* HIDE TEXT LABEL (icon-only button) */
.egs-scroll-top-button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* HOVER */
.egs-scroll-top-button:hover {
  transform: translateY(-5px) scale(1.06);
  box-shadow: 0 12px 30px rgba(236,72,153,0.55);
}

/* MOBILE */
@media (max-width: 600px) {
  .egs-scroll-top-button {
    left: 16px;
    bottom: 20px;
    width: 48px;
    height: 48px;
  }
  .egs-scroll-top-button svg {
    width: 20px;
    height: 20px;
  }
}

/* =========================================
   HOVER
========================================= */

.egs-float-action:hover {
    transform: translateY(-7px) scale(1.08);

    border-radius: 50%;

    filter: brightness(1.08);
}


.egs-float-action:hover .egs-float-icon {
    transform: scale(1.12) rotate(-5deg);

    filter:
        drop-shadow(
            0 0 8px rgba(255, 255, 255, 0.85)
        );
}


/* =========================================
   WHATSAPP HOVER
========================================= */

.egs-whatsapp-action:hover {
    box-shadow:
        0 15px 40px rgba(37, 211, 102, 0.45),
        0 0 35px rgba(37, 211, 102, 0.55),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}


/* =========================================
   LINKEDIN HOVER
========================================= */

.egs-linkedin-action:hover {
    box-shadow:
        0 15px 40px rgba(10, 102, 194, 0.45),
        0 0 35px rgba(10, 102, 194, 0.55),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}


/* =========================================
   BACK TO TOP HOVER
========================================= */

.egs-top-action:hover {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.27),
            rgba(255, 255, 255, 0.10)
        );

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(255, 255, 255, 0.22);
}


.egs-top-action:hover .egs-float-icon {
    transform: translateY(-3px);
}


/* =========================================
   TOOLTIP
========================================= */

.egs-float-label {
    position: absolute;

    right: 72px;
    top: 50%;

    padding: 9px 14px;

    border-radius: 10px;

    background: rgba(12, 12, 18, 0.96);

    color: #ffffff;

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

    font-size: 13px;
    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-50%)
        translateX(8px);

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

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}


/* =========================================
   SHOW TOOLTIP
========================================= */

.egs-float-action:hover .egs-float-label {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);
}


/* =========================================
   FLOATING ANIMATION
========================================= */

@keyframes egsWhatsappFloat {

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

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


@keyframes egsLinkedinFloat {

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

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


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

@media (max-width: 600px) {

    .egs-floating-actions {
        right: 16px;
        bottom: 20px;

        gap: 11px;
    }


    .egs-float-action {
        width: 52px;
        height: 52px;

        border-radius: 15px;
    }


    .egs-float-icon {
        width: 24px;
        height: 24px;
    }


    .egs-float-label {
        display: none;
    }
}


/* =========================================
   GLOBAL MOBILE OVERFLOW PROTECTION
========================================= */

html,
body {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;
}


* {
    box-sizing: border-box;
}


section,
header,
footer,
main {
    max-width: 100%;
}


@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }


    .container {
        width: 100%;
        max-width: 100%;

        padding-left: 20px;
        padding-right: 20px;
    }


    img,
    svg {
        max-width: 100%;
    }
}
















/*===================Career Page seperate ===================*/

*{box-sizing:border-box;margin:0;padding:0;}
html {
  scroll-behavior: smooth;
}
body{font-family:'Poppins',sans-serif;-webkit-font-smoothing:antialiased;}

.career-hero{
  position:relative;
  width:100%;
  min-height:100vh;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(224,68,122,.16) 0,
      rgba(224,68,122,.07) 90px,
      transparent 210px
    ),

    radial-gradient(
      circle at 88% 22%,
      rgba(255,138,61,.12) 0,
      rgba(255,138,61,.05) 80px,
      transparent 190px
    ),

    radial-gradient(
      circle at 70% 82%,
      rgba(155,90,220,.10) 0,
      rgba(155,90,220,.04) 90px,
      transparent 220px
    ),

    radial-gradient(
      circle at 25% 88%,
      rgba(255,45,122,.08) 0,
      transparent 180px
    ),

    linear-gradient(
      160deg,
      #08070a 0%,
      #100a10 55%,
      #08070a 100%
    );

  padding:100px 60px 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.ch-glow{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0;}
.ch-glow-1{width:480px;height:480px;top:-140px;left:-120px;background:radial-gradient(circle,rgba(224,68,122,.2),transparent 70%);animation:glowDrift 12s ease-in-out infinite;}
.ch-glow-2{width:420px;height:420px;bottom:-140px;right:-100px;background:radial-gradient(circle,rgba(255,138,61,.18),transparent 70%);animation:glowDrift 14s ease-in-out infinite reverse;}
@keyframes glowDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,20px) scale(1.1)}}

.ch-grid{
  position:absolute;inset:0;z-index:0;opacity:.1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at 25% 50%,black 0%,transparent 70%);
}

.ch-inner{
  position:relative;z-index:2;max-width:1300px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center;
}

/* left content */
.ch-badge{
  display:inline-flex;align-items:center;gap:9px;padding:8px 20px;border-radius:24px;margin-bottom:20px;margin-top: 26px;
  background:rgba(224,68,122,.1);border:1px solid rgba(224,68,122,.28);
  font-size:12px;font-weight:700;letter-spacing:2px;color:#ff8a3d;
  opacity:0;animation:popIn .6s cubic-bezier(.34,1.56,.64,1) forwards .1s;
}
.ch-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff8a3d;animation:blinkDot 1.4s ease-in-out infinite;}

/* =========================================
   SHARP & BRIGHT CAREER TITLE
========================================= */

.ch-title {
  font-size: 48px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 20px;
  color: #ffffff;

  /* Remove white glow / blur */
  text-shadow: none;
  filter: none;

  /* Make text crisp */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Highlight text - bright gradient */
.ch-title .highlight {
  background: linear-gradient(
    90deg,
    #ff4f9a 0%,
    #ff6b7a 45%,
    #ff9a4d 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Remove any inherited glow */
  text-shadow: none;
  filter: none;
}

/* Make normal title lines pure bright white */
.ch-title-line {
  color: #ffffff;
  text-shadow: none;
  filter: none;
}
.ch-desc{
  font-size:17.5px;color: wheat;line-height:1.8;max-width:440px;margin-bottom:32px;
  opacity:0;animation:fadeUp .6s ease forwards .55s;
}

.ch-cta-row{display:flex;align-items:center;gap:20px;margin-bottom:14px;opacity:0;animation:fadeUp .6s ease forwards .7s;}
.ch-btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:15px 30px;border-radius:50px;font-size:14.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#e0447a,#ff8a3d);
  box-shadow:0 14px 32px -10px rgba(224,68,122,.5);
  text-decoration:none;overflow:hidden;transition:transform .3s ease, box-shadow .3s ease;
}
.ch-btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform .5s ease;
}
.ch-btn:hover::before{transform:translateX(100%);}
.ch-btn:hover{transform:translateY(-3px);box-shadow:0 20px 42px -10px rgba(224,68,122,.65);}
.ch-btn-arrow{transition:transform .3s ease;}
.ch-btn:hover .ch-btn-arrow{transform:translateX(4px);}

.ch-roles-text{font-size:13px;color:#6d6270;opacity:0;animation:fadeUp .6s ease forwards .85s;margin-bottom:36px;}

.ch-divider{height:1px;background:linear-gradient(90deg,rgba(224,68,122,.3),rgba(255,138,61,.15),transparent);margin-bottom:28px;opacity:0;animation:fadeUp .6s ease forwards 1s;}

.ch-stats{display:flex;gap:44px;opacity:0;animation:fadeUp .6s ease forwards 1.15s;}
.ch-stats > div{transition:transform .3s ease;}
.ch-stats > div:hover{transform:translateY(-3px);}
.ch-stat-num{font-size:28px;font-weight:800;}
.ch-stat-num.cnt{
  background:linear-gradient(90deg,#e0447a,#ff8a3d);
  -webkit-background-clip:text;background-clip:text;color: whitesmoke;
}
.ch-stat-label{font-size:11.5px;color:#8a7a80;margin-top:5px;letter-spacing:.3px;}

/* right — before/after slider */
.ch-slider-wrap{
  position:relative;border-radius:20px;overflow:hidden;aspect-ratio:5/4.2;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.6);
  opacity:0;transform:translateX(30px);
  cursor:ew-resize;user-select:none;
}
.ch-slider-wrap.reveal{animation:slideIn .8s cubic-bezier(.16,1,.3,1) forwards .3s;}
@keyframes slideIn{to{opacity:1;transform:translateX(0);}}

.ch-img-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ch-img-before{filter:grayscale(1) brightness(.85);}
.ch-img-after{filter:none;}
.ch-img-after-wrap{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 2%);}

.ch-badge-label{
  position:absolute;top:16px;padding:7px 16px;border-radius:20px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;z-index:3;
}
.ch-badge-before{left:16px;} .ch-badge-after{right:16px;}

.ch-slider-handle{
  position:absolute;top:0;bottom:0;left:2%;width:3px;background:linear-gradient(180deg,#e0447a,#ff8a3d);
  z-index:4;transform:translateX(-50%);pointer-events:none;
}
.ch-slider-knob{
  position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#e0447a,#ff8a3d);
  transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;
  box-shadow:0 8px 20px -4px rgba(224,68,122,.6);
  animation:knobPulse 2.2s ease-in-out infinite;
}
@keyframes knobPulse{0%,100%{box-shadow:0 8px 20px -4px rgba(224,68,122,.6),0 0 0 0 rgba(224,68,122,.4)}50%{box-shadow:0 8px 20px -4px rgba(224,68,122,.6),0 0 0 10px rgba(224,68,122,0)}}

.ch-drag-hint{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  padding:8px 18px;border-radius:20px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  color:#e8e0e4;font-size:12px;font-weight:500;z-index:3;white-space:nowrap;
  animation:hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:.7}50%{opacity:1}}

@keyframes popIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes blinkDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
#egsCrWrapper {
  scroll-margin-top: 90px;
  position:relative !important;
  overflow:hidden !important;
}

@media(max-width:1000px){
  .ch-inner{grid-template-columns:1fr;gap:50px;}
  .ch-title{font-size:36px;}
}
@media(max-width:600px){
  .career-hero{padding:80px 24px 40px;}
  .ch-title{font-size:28px;}
  .ch-stats{gap:24px;flex-wrap:wrap;}
}


/*=================================
          SECTION 2 HIRING 
=================================*/
html {
  scroll-behavior: smooth;
}
body{
  background:linear-gradient(120deg,#fff3f7,#ffe9f2,#fff8ee,#f5eeff,#ffeaf3);
  background-size:400% 400%;
  animation:egsCrAuroraFlow 16s ease infinite;
  margin:0;
}
@keyframes egsCrAuroraFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.egsCrPage{
  position:relative !important;
  z-index:1;
  display:flex;
  overflow:hidden;
  padding:0 40px;
  justify-content:space-between;
  background:#ffd6e7;
  background:transparent;
  isolation:isolate;
  height:auto !important;
  min-height:120vh !important;
  overflow:hidden !important;
  padding-top:40px !important;
  padding-bottom:40px !important;
}
.egsCrPremiumBg{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,#fff 0%,#fff8fb 55%,#faf7ff 100%);
}

.egsCrLiquid{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.5;
}

.egsCrLiquid1{
  width:500px;
  height:500px;
  left:-150px;
  top:-150px;
  background:rgba(255,45,122,.25);
  animation:egsCrL1 12s ease-in-out infinite alternate;
}

.egsCrLiquid2{
  width:450px;
  height:450px;
  right:-130px;
  top:10%;
  background:rgba(255,106,0,.20);
  animation:egsCrL2 15s ease-in-out infinite alternate;
}

.egsCrLiquid3{
  width:500px;
  height:500px;
  left:35%;
  bottom:-280px;
  background:rgba(180,130,255,.18);
  animation:egsCrL3 18s ease-in-out infinite alternate;
}

@keyframes egsCrL1{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(180px,180px) scale(1.2)}
}

@keyframes egsCrL2{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-180px,120px) scale(1.15)}
}

@keyframes egsCrL3{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-120px,-100px) scale(1.2)}
}

.egsCrShineSweep{
  position:absolute;
  width:25%;
  height:150%;
  top:-25%;
  left:-50%;
  transform:rotate(25deg);

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.7),
    rgba(255,45,122,.05),
    transparent
  );

  filter:blur(18px);

  animation:egsCrSweep 9s ease-in-out infinite;
}

@keyframes egsCrSweep{
  0%{
    left:-50%;
    opacity:0;
  }

  20%{
    opacity:1;
  }

  55%{
    left:120%;
    opacity:.4;
  }

  70%,100%{
    left:120%;
    opacity:0;
  }
}

/* =========================================================
   EGS WOW BACKGROUND
   CINEMATIC AURORA + ENERGY + PARTICLES
========================================================= */

.egsCrWowBg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-1;

  background:
    radial-gradient(
      ellipse at center,
      #ffffff 0%,
      #fffafd 42%,
      #fff6fa 72%,
      #f8f5ff 100%
    );
}


/* =========================================================
   BIG MOVING ENERGY CLOUDS
========================================================= */

.egsCrEnergy{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  will-change:transform;
}

.egsCrEnergy1{
  width:700px;
  height:700px;

  left:-300px;
  top:-300px;

  background:
    radial-gradient(
      circle,
      rgba(255,35,120,.25) 0%,
      rgba(255,65,145,.12) 35%,
      transparent 70%
    );

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


.egsCrEnergy2{
  width:650px;
  height:650px;

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

  background:
    radial-gradient(
      circle,
      rgba(255,105,0,.22) 0%,
      rgba(255,170,70,.09) 38%,
      transparent 70%
    );

  animation:
    egsCrEnergyTwo
    17s
    ease-in-out
    infinite alternate;
}


.egsCrEnergy3{
  width:800px;
  height:550px;

  left:25%;
  bottom:-400px;

  background:
    radial-gradient(
      ellipse,
      rgba(170,120,255,.18) 0%,
      rgba(220,185,255,.07) 45%,
      transparent 72%
    );

  animation:
    egsCrEnergyThree
    20s
    ease-in-out
    infinite alternate;
}


@keyframes egsCrEnergyOne{

  0%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  35%{
    transform:
      translate3d(180px,100px,0)
      scale(1.25);
  }

  70%{
    transform:
      translate3d(360px,280px,0)
      scale(.95);
  }

  100%{
    transform:
      translate3d(150px,400px,0)
      scale(1.12);
  }
}


@keyframes egsCrEnergyTwo{

  0%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  40%{
    transform:
      translate3d(-200px,160px,0)
      scale(1.22);
  }

  75%{
    transform:
      translate3d(-420px,280px,0)
      scale(.92);
  }

  100%{
    transform:
      translate3d(-180px,420px,0)
      scale(1.12);
  }
}


@keyframes egsCrEnergyThree{

  0%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  50%{
    transform:
      translate3d(-200px,-130px,0)
      scale(1.3);
  }

  100%{
    transform:
      translate3d(260px,-80px,0)
      scale(.9);
  }
}


/* =========================================================
   HALO LIGHTS
========================================================= */

.egsCrHalo{
  position:absolute;
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.9) 0%,
      rgba(255,45,122,.12) 30%,
      transparent 70%
    );

  filter:blur(2px);

  animation:
    egsCrHaloPulse
    6s
    ease-in-out
    infinite;
}


.egsCrHalo1{
  width:280px;
  height:280px;

  left:28%;
  top:8%;
}


.egsCrHalo2{
  width:220px;
  height:220px;

  right:12%;
  bottom:15%;

  animation-delay:3s;
}


@keyframes egsCrHaloPulse{

  0%,100%{
    transform:scale(.8);
    opacity:.15;
  }

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


/* =========================================================
   PARTICLE FIELD
========================================================= */

.egsCrParticleField{
  position:absolute;
  inset:0;
}


.egsCrParticleField i{
  position:absolute;

  width:3px;
  height:3px;

  border-radius:50%;

  background:#ff2d7a;

  box-shadow:
    0 0 8px rgba(255,45,122,.7),
    0 0 20px rgba(255,45,122,.25);

  opacity:.18;

  animation:
    egsCrParticleFloat
    7s
    ease-in-out
    infinite;
}


/* particle positions */

.egsCrParticleField i:nth-child(1){left:4%;top:20%}
.egsCrParticleField i:nth-child(2){left:9%;top:65%;animation-delay:1s}
.egsCrParticleField i:nth-child(3){left:15%;top:38%;animation-delay:2s}
.egsCrParticleField i:nth-child(4){left:22%;top:80%;animation-delay:3s}
.egsCrParticleField i:nth-child(5){left:28%;top:18%;animation-delay:1.5s}
.egsCrParticleField i:nth-child(6){left:34%;top:52%;animation-delay:4s}
.egsCrParticleField i:nth-child(7){left:41%;top:30%;animation-delay:2.5s}
.egsCrParticleField i:nth-child(8){left:47%;top:86%;animation-delay:5s}
.egsCrParticleField i:nth-child(9){left:53%;top:15%;animation-delay:1s}
.egsCrParticleField i:nth-child(10){left:59%;top:63%;animation-delay:3.5s}
.egsCrParticleField i:nth-child(11){left:66%;top:35%;animation-delay:2s}
.egsCrParticleField i:nth-child(12){left:72%;top:78%;animation-delay:4.5s}
.egsCrParticleField i:nth-child(13){left:78%;top:20%;animation-delay:1.5s}
.egsCrParticleField i:nth-child(14){left:83%;top:50%;animation-delay:5s}
.egsCrParticleField i:nth-child(15){left:89%;top:30%;animation-delay:2.5s}
.egsCrParticleField i:nth-child(16){left:94%;top:72%;animation-delay:4s}
.egsCrParticleField i:nth-child(17){left:18%;top:90%;animation-delay:3s}
.egsCrParticleField i:nth-child(18){left:37%;top:10%;animation-delay:5.5s}
.egsCrParticleField i:nth-child(19){left:61%;top:90%;animation-delay:2s}
.egsCrParticleField i:nth-child(20){left:92%;top:12%;animation-delay:6s}


@keyframes egsCrParticleFloat{

  0%,100%{
    transform:
      translate3d(0,0,0)
      scale(.5);

    opacity:.08;
  }

  25%{
    opacity:.3;
  }

  50%{
    transform:
      translate3d(35px,-55px,0)
      scale(2);

    opacity:.65;
  }

  75%{
    transform:
      translate3d(-20px,-25px,0)
      scale(1);

    opacity:.2;
  }
}


/* =========================================================
   FLOWING ENERGY RIBBONS
========================================================= */

.egsCrFlowLine{
  position:absolute;

  width:1000px;
  height:140px;

  border-radius:50%;

  filter:blur(14px);

  opacity:.28;

  border-top:
    2px solid rgba(255,45,122,.22);

  border-bottom:
    1px solid rgba(255,106,0,.12);

  transform-origin:center;

  will-change:transform;
}


.egsCrFlow1{
  left:-300px;
  top:25%;

  transform:rotate(-13deg);

  animation:
    egsCrFlowMove1
    12s
    ease-in-out
    infinite;
}


.egsCrFlow2{
  right:-350px;
  top:55%;

  transform:rotate(12deg);

  border-color:
    rgba(190,130,255,.18);

  animation:
    egsCrFlowMove2
    15s
    ease-in-out
    infinite;
}


.egsCrFlow3{
  left:10%;
  bottom:5%;

  transform:rotate(-5deg);

  opacity:.18;

  animation:
    egsCrFlowMove3
    18s
    ease-in-out
    infinite;
}


@keyframes egsCrFlowMove1{

  0%,100%{
    transform:
      translateX(-20%)
      rotate(-13deg)
      scale(1);
  }

  50%{
    transform:
      translateX(65%)
      rotate(-7deg)
      scale(1.25);
  }
}


@keyframes egsCrFlowMove2{

  0%,100%{
    transform:
      translateX(20%)
      rotate(12deg)
      scale(1);
  }

  50%{
    transform:
      translateX(-65%)
      rotate(6deg)
      scale(1.3);
  }
}


@keyframes egsCrFlowMove3{

  0%,100%{
    transform:
      translateX(0)
      rotate(-5deg)
      scale(1);
  }

  50%{
    transform:
      translateX(35%)
      rotate(2deg)
      scale(1.2);
  }
}


/* =========================================================
   CINEMATIC LIGHT SWEEP
========================================================= */

.egsCrWowSweep{
  position:absolute;

  width:240px;
  height:150%;

  top:-25%;
  left:-30%;

  transform:rotate(24deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0),
      rgba(255,255,255,.7),
      rgba(255,45,122,.08),
      rgba(255,255,255,0),
      transparent
    );

  filter:blur(20px);

  animation:
    egsCrWowSweepMove
    8s
    cubic-bezier(.45,0,.55,1)
    infinite;
}


@keyframes egsCrWowSweepMove{

  0%{
    left:-35%;
    opacity:0;
  }

  12%{
    opacity:.8;
  }

  48%{
    left:115%;
    opacity:.5;
  }

  55%{
    left:115%;
    opacity:0;
  }

  100%{
    left:115%;
    opacity:0;
  }
}
#egsCrMesh{position:fixed;inset:0;z-index:-3}
.egsCrBlobLayer{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.egsCrDots{position:fixed;inset:0;z-index:-1;pointer-events:none;}
#egsCrParticles{position:fixed;inset:0;z-index:-1;opacity:0.7;pointer-events:none}
.egsCrSparkLayer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.egsCrShimmer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/*.egsCrPage{
  position:relative;
  z-index:1;
  display:flex;
  height:100vh;
  overflow:hidden;
  padding:0 40px;
  justify-content:space-between;
  background:transparent;
}*/
@keyframes egsCrAuroraFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.egsCrPage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255,45,122,0.08),
      transparent 25%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(255,106,0,0.07),
      transparent 25%
    );

  animation: egsCrSoftAurora 12s ease-in-out infinite alternate;
}

@keyframes egsCrSoftAurora{
  0%{
    transform:scale(1);
    opacity:.7;
  }
  100%{
    transform:scale(1.08);
    opacity:1;
  }
}
/* =========================================
   PREMIUM ANIMATED CAREERS BACKGROUND
========================================= */

.egsCrBgAnimation{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:-1;
  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      #fffafd 0%,
      #fff7fa 35%,
      #fffaf6 65%,
      #faf7ff 100%
    );
}

/* Soft moving glow blobs */
.egsCrGlow{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.45;
  will-change:transform;
}

.egsCrGlow1{
  width:420px;
  height:420px;
  left:-120px;
  top:-100px;

  background:rgba(255,45,122,.18);

  animation:egsCrGlowMove1 12s ease-in-out infinite alternate;
}

.egsCrGlow2{
  width:380px;
  height:380px;
  right:-100px;
  top:10%;

  background:rgba(255,106,0,.15);

  animation:egsCrGlowMove2 15s ease-in-out infinite alternate;
}

.egsCrGlow3{
  width:460px;
  height:460px;
  left:38%;
  bottom:-220px;

  background:rgba(185,145,255,.16);

  animation:egsCrGlowMove3 18s ease-in-out infinite alternate;
}


/* Blob movement */

@keyframes egsCrGlowMove1{

  0%{
    transform:translate(0,0) scale(1);
  }

  50%{
    transform:translate(180px,100px) scale(1.15);
  }

  100%{
    transform:translate(80px,220px) scale(.9);
  }

}

@keyframes egsCrGlowMove2{

  0%{
    transform:translate(0,0) scale(1);
  }

  50%{
    transform:translate(-160px,80px) scale(1.2);
  }

  100%{
    transform:translate(-80px,-100px) scale(.9);
  }

}

@keyframes egsCrGlowMove3{

  0%{
    transform:translate(0,0) scale(1);
  }

  50%{
    transform:translate(-120px,-100px) scale(1.18);
  }

  100%{
    transform:translate(140px,-50px) scale(.92);
  }

}


/* =========================================
   MOVING LIGHT BEAM
========================================= */

.egsCrLightBeam{
  position:absolute;

  width:45%;
  height:160%;

  top:-30%;
  left:-55%;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.55),
    rgba(255,45,122,.035),
    transparent
  );

  filter:blur(20px);

  transform:rotate(18deg);

  animation:egsCrLightSweep 10s ease-in-out infinite;
}

@keyframes egsCrLightSweep{

  0%{
    left:-55%;
    opacity:0;
  }

  15%{
    opacity:.7;
  }

  50%{
    left:110%;
    opacity:.35;
  }

  65%{
    opacity:0;
  }

  100%{
    left:110%;
    opacity:0;
  }

}

.egsCrFloatDots{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.egsCrFloatDots i{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;

  background:#ff2d7a;

  opacity:.25;

  box-shadow:
    0 0 12px rgba(255,45,122,.35);

  animation:egsCrFloatDot 8s ease-in-out infinite;
}

.egsCrFloatDots i:nth-child(1){
  left:12%;
  bottom:15%;
  animation-delay:0s;
}

.egsCrFloatDots i:nth-child(2){
  left:27%;
  top:20%;
  animation-delay:2s;
}

.egsCrFloatDots i:nth-child(3){
  left:42%;
  top:75%;
  animation-delay:4s;
}

.egsCrFloatDots i:nth-child(4){
  left:58%;
  top:15%;
  animation-delay:1s;
}

.egsCrFloatDots i:nth-child(5){
  left:70%;
  top:45%;
  animation-delay:3s;
}

.egsCrFloatDots i:nth-child(6){
  left:82%;
  top:75%;
  animation-delay:5s;
}

.egsCrFloatDots i:nth-child(7){
  left:90%;
  top:25%;
  animation-delay:1.5s;
}

.egsCrFloatDots i:nth-child(8){
  left:35%;
  top:45%;
  animation-delay:3.5s;
}

@keyframes egsCrFloatDot{

  0%,100%{
    transform:translateY(0) scale(1);
    opacity:.15;
  }

  50%{
    transform:translateY(-35px) scale(1.6);
    opacity:.5;
  }

}
.egsCrWowBg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-1;

  background:
    radial-gradient(
      ellipse at 15% 25%,
      rgba(255,45,122,.22) 0%,
      rgba(255,45,122,.10) 28%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 85% 25%,
      rgba(255,105,170,.18) 0%,
      rgba(255,45,122,.08) 32%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgba(255,90,155,.16) 0%,
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #fff3f8 0%,
      #ffe9f3 35%,
      #fff5fa 65%,
      #fff0f7 100%
    );
}
.egsCrEnergy1{
  width:700px;
  height:700px;
  left:-300px;
  top:-280px;

  background:
    radial-gradient(
      circle,
      rgba(255,20,110,.34) 0%,
      rgba(255,45,122,.20) 30%,
      rgba(255,100,170,.08) 55%,
      transparent 75%
    );

  filter:blur(85px);

  animation:egsCrEnergyOne 12s ease-in-out infinite alternate;
}


.egsCrEnergy2{
  width:650px;
  height:650px;
  right:-260px;
  top:-100px;

  background:
    radial-gradient(
      circle,
      rgba(255,45,122,.25) 0%,
      rgba(255,120,180,.15) 38%,
      rgba(255,180,210,.06) 55%,
      transparent 75%
    );

  filter:blur(90px);

  animation:egsCrEnergyTwo 15s ease-in-out infinite alternate;
}


.egsCrEnergy3{
  width:800px;
  height:500px;
  left:25%;
  bottom:-350px;

  background:
    radial-gradient(
      ellipse,
      rgba(255,45,122,.20) 0%,
      rgba(255,130,185,.10) 42%,
      transparent 75%
    );

  filter:blur(100px);

  animation:egsCrEnergyThree 18s ease-in-out infinite alternate;
}
.egsCrWowSweep{
  position:absolute;

  width:280px;
  height:180%;

  top:-40%;
  left:-40%;

  transform:rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0) 25%,
      rgba(255,255,255,.35) 40%,
      rgba(255,255,255,.95) 50%,
      rgba(255,190,220,.55) 55%,
      rgba(255,255,255,0) 70%,
      transparent 100%
    );

  filter:blur(12px);

  opacity:0;

  animation:
    egsCrWowShine
    6s
    cubic-bezier(.4,0,.6,1)
    infinite;
}


@keyframes egsCrWowShine{

  0%{
    left:-45%;
    opacity:0;
  }

  12%{
    opacity:.15;
  }

  25%{
    opacity:.8;
  }

  45%{
    left:115%;
    opacity:.65;
  }

  55%{
    left:125%;
    opacity:0;
  }

  100%{
    left:125%;
    opacity:0;
  }
}
.egsCrWowBg::before{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.8) 0%,
      rgba(255,45,122,.08) 28%,
      transparent 68%
    );

  filter:blur(25px);

  animation:egsCrCenterGlow 5s ease-in-out infinite alternate;
}

@keyframes egsCrCenterGlow{

  from{
    transform:translate(-50%,-50%) scale(.8);
    opacity:.45;
  }

  to{
    transform:translate(-50%,-50%) scale(1.3);
    opacity:.85;
  }
}
/* 2 SMALL CENTER CIRCLES — DARK PINK */
/*.egsCrCenterBtn{
  position:absolute !important;
  left:50% !important;
  top:calc(50% + 9px) !important;

  width:60px !important;
  height:60px !important;

  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  background:#fffafd !important;

 border: none !important;

  box-shadow:none !important;

  z-index:20 !important;
  pointer-events:none !important;
}
*/

/* SECOND SMALL CIRCLE */
/*.egsCrCenterBtn::before{
  content:"";

  position:absolute;
  width:110px;
  height:110px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  border-radius:50%;

  border:3px solid #e02a69;

  background:transparent;

  box-shadow:none;

  z-index:1;
}*/


/* TEXT ABOVE BOTH CIRCLES */
.egsCrCbTitle,
.egsCrCbSub{
  position:relative;
  z-index:5;
}

.egsCrCbTitle{
  color:#c9185b !important;
  font-family:'Poppins',sans-serif !important;
  font-weight:700 !important;
}

.egsCrCbSub{
  color:#e02a69 !important;
  font-family:'Poppins',sans-serif !important;
}

/* =========================================================
   EGS WHEEL — PERFECT OUTER BORDER ALIGNMENT
========================================================= */

/* Old rings hide */
.egsCrPulseRing{
  display:none !important;
}


/* Wheel container */
.egsCrWheelOuter{
  position:relative !important;
}


/* New perfectly centered border */
.egsCrWheelOuter::before{
  content:"";

  position:absolute;

  width:calc(100% - 30px);
  aspect-ratio:1 / 1;

  left:50%;
  top:8px;

  transform:translateX(-50%);

  border-radius:50%;

  border:2px solid #e65a88;

  box-sizing:border-box;

  pointer-events:none;

  z-index:4;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.7),
    0 0 14px rgba(217,27,99,.12);
}


/* ==========================================
   FINAL PREMIUM PINK WOW BACKGROUND
========================================== */

.egsCrFinalBg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(
      circle at 15% 25%,
      rgba(255,220,235,.30),
      transparent 45%
    ),
    radial-gradient(
      circle at 85% 20%,
      rgba(255,225,238,.25),
      transparent 48%
    ),
    radial-gradient(
      circle at 25% 85%,
      rgba(255,215,232,.22),
      transparent 50%
    ),
    radial-gradient(
      circle at 75% 80%,
      rgba(255,230,240,.25),
      transparent 50%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fffafd 25%,
      #fff7fa 50%,
      #fffafd 75%,
      #ffffff 100%
    );

  background-size:
    180% 180%,
    170% 170%,
    180% 180%,
    180% 180%,
    400% 400%;

  animation:egsCrUltraLightPink 18s ease-in-out infinite;
}

@keyframes egsCrUltraLightPink{

  0%{
    background-position:
      0% 20%,
      100% 10%,
      20% 90%,
      80% 80%,
      0% 50%;
  }

  50%{
    background-position:
      45% 45%,
      55% 35%,
      65% 55%,
      35% 65%,
      100% 50%;
  }

  100%{
    background-position:
      0% 20%,
      100% 10%,
      20% 90%,
      80% 80%,
      0% 50%;
  }
}

.egsCrShine{
  position:absolute;
  z-index:1;

  width:160px;
  height:170%;

  top:-35%;
  left:-35%;

  transform:rotate(24deg);

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.18),
    rgba(255,255,255,.55),
    rgba(255,235,243,.35),
    rgba(255,255,255,.12),
    transparent
  );

  filter:blur(18px);

  opacity:0;

  animation:egsCrSoftShine 9s ease-in-out infinite;
}

@keyframes egsCrSoftShine{

  0%{
    left:-35%;
    opacity:0;
  }

  18%{
    opacity:.3;
  }

  50%{
    left:115%;
    opacity:.2;
  }

  62%,100%{
    left:120%;
    opacity:0;
  }
}

@keyframes egsCrPinkBackground{

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

  25%{
    background-position:
      30% 50%,
      70% 30%,
      30% 70%,
      50% 100%;
  }

  50%{
    background-position:
      80% 30%,
      20% 60%,
      70% 30%,
      100% 50%;
  }

  75%{
    background-position:
      50% 80%,
      80% 70%,
      20% 40%,
      50% 0%;
  }

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

.egsCrSegmentLabel{
  width: 75px !important;
  max-width: 75px !important;

  font-size: 10px !important;
  line-height: 1.05 !important;

  text-align: center;
  white-space: normal !important;
  overflow: visible !important;

  word-break: normal !important;
  overflow-wrap: break-word !important;

  transform-origin: center center;
}

.egsCrPage > *:not(.egsCrFinalBg){
  position:relative;
  z-index:2;
}
.egsCrShine{
  position:absolute;
  z-index:1;

  width:260px;
  height:180%;

  top:-40%;
  left:-40%;

  transform:rotate(24deg);

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.05) 25%,
      rgba(255,255,255,.55) 42%,
      #ffffff 50%,
      rgba(255,210,230,.75) 56%,
      rgba(255,255,255,.05) 72%,
      transparent 100%
    );

  filter:blur(10px);

  opacity:0;

  animation:premiumShine 5s ease-in-out infinite;
}

@keyframes premiumShine{

  0%{
    left:-45%;
    opacity:0;
  }

  15%{
    opacity:.8;
  }

  45%{
    left:115%;
    opacity:.65;
  }

  55%{
    left:125%;
    opacity:0;
  }

  100%{
    left:125%;
    opacity:0;
  }
}

/* ---------- MOVING PINK GLOWS ---------- */

.egsCrPinkGlow{
  position:absolute;
  border-radius:50%;
  filter:blur(75px);
  will-change:transform;
}

.glow1{
  width:500px;
  height:500px;

  left:-180px;
  top:80px;

  background:rgba(255,35,115,.20);

  animation:
    pinkGlowOne
    10s
    ease-in-out
    infinite alternate;
}

.glow2{
  width:430px;
  height:430px;

  right:-120px;
  top:40px;

  background:rgba(255,65,145,.18);

  animation:
    pinkGlowTwo
    13s
    ease-in-out
    infinite alternate;
}

.glow3{
  width:550px;
  height:350px;

  left:35%;
  bottom:-180px;

  background:rgba(255,45,122,.14);

  animation:
    pinkGlowThree
    15s
    ease-in-out
    infinite alternate;
}

.glow1{
  background:rgba(255,20,110,.38);
  filter:blur(65px);
}

.glow2{
  background:rgba(255,35,125,.32);
  filter:blur(70px);
}

.glow3{
  background:rgba(255,20,110,.26);
  filter:blur(80px);
}

@keyframes pinkGlowOne{
  0%{
    transform:translate(0,0) scale(1);
  }

  100%{
    transform:translate(230px,170px) scale(1.25);
  }
}

@keyframes pinkGlowTwo{
  0%{
    transform:translate(0,0) scale(1);
  }

  100%{
    transform:translate(-240px,160px) scale(1.2);
  }
}

@keyframes pinkGlowThree{
  0%{
    transform:translate(0,0) scale(1);
  }

  100%{
    transform:translate(-120px,-100px) scale(1.25);
  }
}


/* ==========================================
   BIG WHITE / PINK SHINE
========================================== */

.egsCrShine{
  position:absolute;

  width:230px;
  height:160%;

  top:-30%;
  left:-30%;

  transform:rotate(24deg);

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0) 28%,
      rgba(255,255,255,.25) 40%,
      rgba(255,255,255,.95) 50%,
      rgba(255,185,215,.65) 56%,
      rgba(255,255,255,0) 70%,
      transparent 100%
    );

  filter:blur(10px);

  animation:
    premiumShine
    7s
    cubic-bezier(.45,0,.55,1)
    infinite;
}

.shine2{
  width:120px;

  opacity:.35;

  animation:
    premiumShine2
    11s
    cubic-bezier(.45,0,.55,1)
    infinite;
}


@keyframes premiumShine{

  0%{
    left:-40%;
    opacity:0;
  }

  15%{
    opacity:.8;
  }

  45%{
    left:115%;
    opacity:.7;
  }

  55%{
    left:125%;
    opacity:0;
  }

  100%{
    left:125%;
    opacity:0;
  }
}


@keyframes premiumShine2{

  0%,45%{
    left:-45%;
    opacity:0;
  }

  55%{
    opacity:.5;
  }

  80%{
    left:115%;
    opacity:.3;
  }

  100%{
    left:120%;
    opacity:0;
  }
}


/* ==========================================
   FLOATING PINK LIGHT DOTS
========================================== */

.egsCrLightDots{
  position:absolute;
  inset:0;
}

.egsCrLightDots span{
  position:absolute;

  width:6px;
  height:6px;

  border-radius:50%;

  background:#ff4b96;

  box-shadow:
    0 0 10px rgba(255,45,122,.7),
    0 0 25px rgba(255,45,122,.3);

  opacity:.25;

  animation:
    pinkDotFloat
    6s
    ease-in-out
    infinite;
}


.egsCrLightDots span:nth-child(1){
  left:7%;
  top:24%;
}

.egsCrLightDots span:nth-child(2){
  left:25%;
  top:18%;
  animation-delay:1s;
}

.egsCrLightDots span:nth-child(3){
  left:38%;
  top:72%;
  animation-delay:2s;
}

.egsCrLightDots span:nth-child(4){
  left:52%;
  top:12%;
  animation-delay:3s;
}

.egsCrLightDots span:nth-child(5){
  left:67%;
  top:78%;
  animation-delay:1.5s;
}

.egsCrLightDots span:nth-child(6){
  left:79%;
  top:20%;
  animation-delay:2.5s;
}

.egsCrLightDots span:nth-child(7){
  left:91%;
  top:48%;
  animation-delay:4s;
}

.egsCrLightDots span:nth-child(8){
  left:45%;
  top:40%;
  animation-delay:3.5s;
}


@keyframes pinkDotFloat{

  0%,100%{
    transform:translate(0,0) scale(.5);
    opacity:.12;
  }

  50%{
    transform:translate(18px,-35px) scale(1.7);
    opacity:.65;
  }
}

#egsCrMesh{position:fixed;inset:0;z-index:0}
#egsCrParticles{position:fixed;inset:0;z-index:2;opacity:0.7;pointer-events:none}

.egsCrBlobLayer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.egsCrBlob{position:absolute;border-radius:50%;filter:blur(80px);mix-blend-mode:multiply;opacity:0.5}
.egsCrB1{width:560px;height:560px;top:-130px;left:-110px;background:radial-gradient(circle,#ffaecb,transparent 70%);animation:egsCrF1 13s ease-in-out infinite}
.egsCrB2{width:480px;height:480px;bottom:-110px;right:-90px;background:radial-gradient(circle,#ffce8f,transparent 70%);animation:egsCrF2 17s ease-in-out infinite}
.egsCrB3{width:400px;height:400px;top:28%;left:40%;background:radial-gradient(circle,#cdaeff,transparent 70%);animation:egsCrF3 11s ease-in-out infinite}
.egsCrB4{width:360px;height:360px;top:60%;left:0%;background:radial-gradient(circle,#ffe08f,transparent 70%);animation:egsCrF4 19s ease-in-out infinite}
.egsCrB5{width:320px;height:320px;top:3%;right:22%;background:radial-gradient(circle,#ff9ec7,transparent 70%);animation:egsCrF5 15s ease-in-out infinite}
.egsCrB6{width:280px;height:280px;bottom:10%;left:30%;background:radial-gradient(circle,#ffb0e0,transparent 70%);animation:egsCrF6 21s ease-in-out infinite}
@keyframes egsCrF1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,100px) scale(1.2)}}
@keyframes egsCrF2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,-70px) scale(1.15)}}
@keyframes egsCrF3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-90px) scale(0.85)}}
@keyframes egsCrF4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,80px) scale(1.25)}}
@keyframes egsCrF5{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,60px) scale(1.1)}}
@keyframes egsCrF6{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,-50px) scale(1.2)}}

.egsCrDots{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  background-image:radial-gradient(rgba(255,45,122,0.16) 1.5px,transparent 1.5px);
  background-size:28px 28px;
  animation:egsCrDotDrift 20s linear infinite;
}
@keyframes egsCrDotDrift{from{background-position:0 0}to{background-position:56px 56px}}

.egsCrSparkLayer{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.egsCrSpark{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,0.95),rgba(255,45,122,0.4) 60%,transparent 75%);
  animation:egsCrRise linear infinite;
}
@keyframes egsCrRise{
  0%{transform:translateY(0) scale(0);opacity:0}
  10%{opacity:1;transform:scale(1)}
  90%{opacity:1}
  100%{transform:translateY(-115vh) scale(0.3);opacity:0}
}

.egsCrShimmer{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.egsCrShimmer::before{
  content:"";
  position:absolute;
  top:-50%;left:-50%;
  width:60%;height:200%;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,0.5) 50%,transparent 60%);
  animation:egsCrSweep 6s ease-in-out infinite;
}
@keyframes egsCrSweep{
  0%{transform:translateX(-100%) rotate(0deg)}
  50%{transform:translateX(250%) rotate(0deg)}
  100%{transform:translateX(250%) rotate(0deg)}
}

/* LEFT */
.egsCrLeft{
  width:460px;
  margin-left:20px;
  flex-shrink:0;
  padding:32px 32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  z-index:6;
}

.egsCrLogoBox{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.egsCrLogoIcon{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,#ff2d7a,#ff6a00);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#fff;font-family:'Poppins',sans-serif;
  box-shadow:0 4px 12px rgba(255,45,122,0.3), inset 0 1px 1px rgba(255,255,255,0.4);
}
.egsCrLogoName{font-size:17px;font-weight:800;color:#1a1a2e;line-height:1.2;font-family:'Poppins',sans-serif}
.egsCrLogoName span{color:#ff2d7a}
.egsCrLogoTag{font-size:8px;color:#ff6a00;letter-spacing:2px;text-transform:uppercase;font-weight:600;font-family:'Poppins',sans-serif}

/* ===== OPEN ROLES TAG - PREMIUM ANIMATED PILL ===== */
.egsCrTagPill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 16px;
  border-radius:20px;
  background:linear-gradient(90deg, rgba(255,45,122,0.1), rgba(255,106,0,0.1));
  border:1px solid transparent;
  background-clip:padding-box;
  position:relative;
  font-size:9.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#ff2d7a;
  font-weight:800;
  margin-bottom:14px;
  font-family:'Poppins',sans-serif;
  box-shadow:0 4px 16px rgba(255,45,122,0.15);
  overflow:hidden;
}
.egsCrTagPill::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1.5px;
  background:linear-gradient(90deg,#ff2d7a,#ff6a00,#ff2d7a);
  background-size:200% auto;
  animation:egsCrTagBorderFlow 3s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
@keyframes egsCrTagBorderFlow{to{background-position:200% center}}

.egsCrTagDot{
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,#ff2d7a,#ff6a00);
  animation:egsCrTagDotAnim 1.5s ease-in-out infinite;
  box-shadow:0 0 8px rgba(255,45,122,0.6);
}
@keyframes egsCrTagDotAnim{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.6)}}

/* TITLE */
.egsCrTitleWrap{position:relative;min-height:130px;margin-bottom:12px;margin-top: 30px;}
.egsCrCft{position:absolute;top:0;left:0;font-size:46px;font-weight:900;line-height:1.08;letter-spacing:-1.5px;transition:opacity .9s ease,transform .9s ease;color:#1a1a2e;font-family:'Poppins',sans-serif}
.egsCrCftHidden{opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden}
.egsCrCftVisible{opacity:1;transform:translateY(0);visibility:visible}
.egsCrTitlePink{
  background:linear-gradient(90deg,#ff2d7a,#ff6a00,#ff2d7a);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:egsCrShine 3s linear infinite;
}
@keyframes egsCrShine{to{background-position:200% center}}
.egsCrTitleGold{background:linear-gradient(90deg,#ff6a00,#ffcc00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* SUB */
.egsCrSubWrap{min-height:60px;margin-bottom:15px;}
.egsCrSubText{font-size:16px;color: #000;line-height:1.6;font-family:'Poppins',sans-serif}
.egsCrCursor{display:inline-block;width:2px;height:13px;background:#ff6a00;vertical-align:middle;margin-left:1px;animation:egsCrCursorBlink .65s step-end infinite}
@keyframes egsCrCursorBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ROLE CARD */
.egsCrRoleCard{
  background:#fff;
  border-radius:22px;
  padding:24px 26px;
  border:2px solid #ffd0e0;
  min-height:auto;
  position:relative;
  overflow:visible;
  padding-bottom:26px;
  transition:border-color .4s,box-shadow .4s,transform .3s;
  box-shadow:0 8px 32px rgba(255,45,122,0.1);
}
.egsCrRoleCard:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(255,45,122,0.18);
}
.egsCrRcTop{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.egsCrRcIcon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0;transition:background .4s}
.egsCrRcName{font-size:20px;font-weight:700;color:#000;line-height:1.25;font-family:'Poppins',sans-serif;word-break:break-word}
.egsCrRcCat{font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-top:3px;font-family:'Poppins',sans-serif}
.egsCrRcExp{font-size:15px;color: maroon;margin-top:2px;font-family:'Poppins',sans-serif}
.egsCrRcDesc{font-size:14px;color:#000;line-height:1.7;margin-bottom:14px;font-family:'Poppins',sans-serif}
.egsCrRcSkills{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px;max-width:100%}
.egsCrRcSkill{font-size:12px;font-weight:600;padding:3px 10px;border-radius:12px;color:#fff;font-family:'Poppins',sans-serif;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,0.1);border:1px solid rgba(255,255,255,0.3);transition:transform .2s}
.egsCrRcSkill:hover{transform:translateY(-2px) scale(1.05)}
.egsCrRcApply{
  display:inline-block;
  position:relative;
  margin-top:4px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:7px 18px;
  border-radius:18px;
  color:#fff;
  text-decoration:none;
  transition:transform .2s,box-shadow .2s;
  font-family:'Poppins',sans-serif;
  background:linear-gradient(135deg,#ff2d7a,#ff6a00);
  animation:egsCrPulseGlow 2s ease-in-out infinite;
}
.egsCrRcApply:hover{transform:scale(1.04);box-shadow:0 4px 16px rgba(255,45,122,0.35)}
@keyframes egsCrPulseGlow{
  0%,100%{box-shadow:0 4px 16px rgba(255,45,122,0.3)}
  50%{box-shadow:0 4px 24px rgba(255,45,122,0.6)}
}
@keyframes egsCrCardFadeAnim{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.egsCrCardAnim{animation:egsCrCardFadeAnim .35s ease both}

/* Thin pink border around wheel */
.egsCrWheelOuter::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:calc(100% + 12px);
    height:calc(100% + 12px);
    transform:translate(-50%,-50%);
    border:2px solid rgba(255,45,122,0.18);
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}

#egsCrCanvas{
    position:relative;
    z-index:1;
}

/* RIGHT */
.egsCrRight{
    flex:1;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:6;
}
.egsCrWheelOuter{
  position:relative;
  width:580px;
  height:580px;
  filter:drop-shadow(0 20px 60px rgba(255,45,122,0.25));
}

.egsCrPulseRing{position:absolute;top:50%;left:50%;border-radius:50%;border:2px solid rgba(255,45,122,0.2);pointer-events:none;animation:egsCrPulseAnim 2.5s ease-out infinite}
.egsCrPr1{width:520px;height:520px;transform:translate(-50%,-50%)}
.egsCrPr2{width:548px;height:548px;transform:translate(-50%,-50%);animation-delay:1.2s}
@keyframes egsCrPulseAnim{0%{opacity:.8;transform:translate(-50%,-50%) scale(.88)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}

.egsCrArrowPtr{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:22px solid #ff2d7a;z-index:5;filter:drop-shadow(0 3px 8px rgba(255,45,122,0.6))}

.egsCrCenterBtn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:110px;height:110px;border-radius:50%;
  background:linear-gradient(135deg,#fff,#fff5f8);
  border:3.5px solid #ff2d7a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:10;pointer-events:none;
  box-shadow:0 0 0 10px rgba(255,45,122,0.08), inset 0 2px 8px rgba(255,45,122,0.1), 0 8px 24px rgba(255,45,122,0.3);
}
.egsCrCbTitle{font-size:17px;font-weight:800;color:#ff2d7a;font-family:'Poppins',sans-serif}
.egsCrCbSub{font-size:8px;color:#ffb0c8;letter-spacing:1.5px;text-transform:uppercase;margin-top:2px;font-family:'Poppins',sans-serif}

.egsCrSpinBtns{position:absolute;bottom:-58px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px}
.egsCrSpinBtn{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#fff,#fff8fa);
  border:1.5px solid #ffd0e0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:16px;color:#ff2d7a;transition:all .2s;
  box-shadow:0 4px 14px rgba(255,45,122,0.15), inset 0 1px 2px rgba(255,255,255,0.8);
}
.egsCrSpinBtn:hover{background:#ff2d7a;color:#fff;transform:scale(1.1)}
.egsCrSpinLabel{font-size:12px;color:#cc88a0;font-weight:600;min-width:80px;text-align:center;font-family:'Poppins',sans-serif}

/* HR WIDGET */
#egsCrHrWidget{
    position:fixed !important;
    bottom:-600px;
    right:18px;
    z-index:999;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    transition:bottom .6s cubic-bezier(.34,1.4,.64,1);
}
#egsCrHrWidget.egsCrHrShow{bottom:0}
#egsCrHrImg{width:255px;display:block;animation:egsCrHrEntrance .2s ease, egsCrHrBobAnim 2.5s ease-in-out 0.5s infinite;filter:drop-shadow(0 8px 24px rgba(255,45,122,0.3))}
@keyframes egsCrHrEntrance{
  0%{transform:translateY(40px) scale(0.9);opacity:0}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes egsCrHrBobAnim{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#egsCrHrBubble{position:absolute;bottom:300px;right:178px;width:260px;background:#fff;border-radius:20px 20px 4px 20px;padding:18px;border:2px solid #ffd0e0;box-shadow:0 8px 32px rgba(255,45,122,0.15);opacity:0;transform:scale(0.8);transform-origin:bottom right;transition:all .4s cubic-bezier(.34,1.4,.64,1)}
#egsCrHrBubble.egsCrHrPop{opacity:1;transform:scale(1)}
#egsCrHrBubble::after{content:'';position:absolute;bottom:-10px;right:20px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #ffd0e0}
#egsCrHrBubble::before{content:'';position:absolute;bottom:-8px;right:21px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #fff;z-index:1}
.egsCrHrCloseBtn{position:absolute;top:8px;right:10px;background:none;border:none;font-size:15px;color:#cc88a0;cursor:pointer}
.egsCrHrCloseBtn:hover{color:#ff2d7a}
.egsCrHrHey{font-size:28px;font-weight:700;color:#000;margin-bottom:5px;font-family:'Poppins',sans-serif}
.egsCrHrMsg{font-size:15.5px;color:#000;line-height:1.5;min-height:36px;margin-bottom:12px;transition:opacity .3s;font-family:'Poppins',sans-serif}
.egsCrHrRoles{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.egsCrHrRoleItem{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;font-size:11px;font-weight:600;transition:all .3s;font-family:'Poppins',sans-serif}
.egsCrHrRoleItem span{font-size:16px}
.egsCrHrApplyBtn{display:block;text-align:center;padding:10px;border-radius:12px;background:linear-gradient(135deg,#ff2d7a,#ff6a00);color:#fff;font-size:11.5px;font-weight:700;text-decoration:none;letter-spacing:.5px;transition:transform .2s,box-shadow .2s;font-family:'Poppins',sans-serif}
.egsCrHrApplyBtn:hover{transform:scale(1.03);box-shadow:0 4px 16px rgba(255,45,122,0.4)}

/* =========================================
   SMOOTH USER SCROLL
========================================= */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.egsCrWrapper,
.egsCrPage {
  scroll-behavior: smooth;
}

/* =========================================
   SECTION HEIGHT FIX
========================================= */

.egsCrPage{
  height:auto !important;
  min-height:120vh !important;
  overflow:visible !important;
  padding-top:40px !important;
  padding-bottom:40px !important;
}

#egsCrHrWidget{
    position:absolute !important;
    bottom:0;
    right:18px;
    z-index:999;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    transition:bottom .6s cubic-bezier(.34,1.4,.64,1);
}

#egsCrHrWidget.egsCrHrShow{
    bottom:0;
}
/* =====================================================
   EGS CAREER - FINAL MOBILE FIX
   Paste at BOTTOM of your CSS file
===================================================== */

@media (max-width: 768px) {

  /* ── PAGE: vertical stack ── */
  .egsCrPage {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: 20px 16px 40px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 24px !important;
  }

  /* ── LEFT: full width, on top ── */
  .egsCrLeft {
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    padding: 12px 8px !important;
    text-align: center !important;
  }

  /* ── TITLE ── */
  .egsCrTitleWrap {
    min-height: 85px !important;
    width: 100% !important;
  }

  .egsCrCft {
    font-size: 32px !important;
    text-align: center !important;
    width: 100% !important;
    left: 0 !important;
  }

  /* ── SUB TEXT ── */
  .egsCrSubText {
    font-size: 12px !important;
    text-align: center !important;
  }

  /* ── ROLE CARD ── */
  .egsCrRoleCard {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
  }

  .egsCrRcName { font-size: 14px !important; }
  .egsCrRcDesc { font-size: 11px !important; }

  /* ── RIGHT: wheel below card ── */
  .egsCrRight {
    width: 100% !important;
    flex: none !important;
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-bottom: 50px !important;
  }

  /* ── WHEEL SIZE ── */
  .egsCrWheelOuter {
    width: 300px !important;
    height: 300px !important;
  }

  #egsCrCanvas {
    width: 300px !important;
    height: 300px !important;
    touch-action: none !important;
  }

  /* ── INNER CIRCLE FIX ── */
  .egsCrCenterBtn {
    width: 68px !important;
    height: 68px !important;
  }

  .egsCrCbTitle {
    font-size: 12px !important;
  }

  .egsCrCbSub {
    font-size: 6px !important;
    letter-spacing: 1px !important;
  }

  /* ── PULSE RINGS ── */
  .egsCrPr1 {
    width: 316px !important;
    height: 316px !important;
  }

  .egsCrPr2 {
    width: 334px !important;
    height: 334px !important;
  }

  /* ── SPIN BTNS ── */
  .egsCrSpinBtns {
    bottom: -44px !important;
  }

  .egsCrSpinBtn {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  .egsCrSpinLabel {
    font-size: 10px !important;
  }

  /* ── ARROW ── */
  .egsCrArrowPtr {
    border-left-width: 9px !important;
    border-right-width: 9px !important;
    border-top-width: 16px !important;
  }

  /* ── HR WIDGET: fixed bottom right, above footer ── */
  #egsCrHrWidget {
    position: fixed !important;
    bottom: -600px !important;
    right: 0 !important;
    z-index: 9999 !important;
    pointer-events: all !important;
  }

  #egsCrHrWidget.egsCrHrShow {
    bottom: 0 !important;
  }

  #egsCrHrImg {
    width: 180px !important;
    display: block !important;
  }

  #egsCrHrBubble {
    width: 195px !important;
    right: 118px !important;
    bottom: 175px !important;
    padding: 12px !important;
  }

  .egsCrHrHey    { font-size: 12px !important; }
  .egsCrHrMsg    { font-size: 10px !important; min-height: 24px !important; }
  .egsCrHrRoleItem { font-size: 9.5px !important; padding: 5px 8px !important; }
  .egsCrHrApplyBtn { font-size: 10px !important; padding: 8px !important; }
  .egsCrHrCloseBtn { font-size: 12px !important; }

}

/* ── SMALL PHONES ── */
@media (max-width: 400px) {

  .egsCrCft {
    font-size: 27px !important;
  }

  .egsCrWheelOuter {
    width: 260px !important;
    height: 260px !important;
  }

  #egsCrCanvas {
    width: 260px !important;
    height: 260px !important;
  }

  .egsCrCenterBtn {
    width: 60px !important;
    height: 60px !important;
  }

  .egsCrPr1 { width: 276px !important; height: 276px !important; }
  .egsCrPr2 { width: 292px !important; height: 292px !important; }

  #egsCrHrBubble {
    width: 180px !important;
    right: 108px !important;
  }

  #egsCrHrImg {
    width: 115px !important;
  }

}


/* ── CENTER CIRCLE SIZE FIX (desktop also) ── */
.egsCrCenterBtn {
  width: 96px !important;
  height: 96px !important;
}

/* Mobile center circle */
@media (max-width: 768px) {
  .egsCrCenterBtn {
    width: 62px !important;
    height: 62px !important;
  }
  .egsCrCbTitle {
    font-size: 11px !important;
  }
  .egsCrCbSub {
    font-size: 5.5px !important;
  }
}

@media (max-width: 400px) {
  .egsCrCenterBtn {
    width: 55px !important;
    height: 55px !important;
  }
}

/* =====================================
   CAREER APPLICATION POPUP
===================================== */

.egsCareerModal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.egsCareerModal.egsCareerModalOpen {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.egsCareerOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(7, 2, 10, 0.82);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.egsCareerDialog {
  position: relative;
  z-index: 2;
  width: min(680px, 100%);
  max-height: calc(100vh - 40px);
  padding: 35px;
  overflow-y: auto;
  color: #ffffff;
  background:
    radial-gradient(
      circle at top right,
      rgba(236, 30, 110, 0.2),
      transparent 38%
    ),
    #140a17;
  border: 1px solid rgba(236, 30, 110, 0.5);
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.egsCareerClose {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #ffffff;
  font-size: 27px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
}

.egsCareerClose:hover {
  color: #ffffff;
  background: #ec1e6e;
  border-color: #ec1e6e;
}

.egsCareerHeader {
  margin-bottom: 25px;
}

.egsCareerHeader span {
  display: inline-block;
  margin-bottom: 8px;
  color: #ff4081;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
}

.egsCareerHeader h2 {
  margin: 0 50px 8px 0;
  color: #ffffff;
  font-size: clamp(25px, 4vw, 36px);
  line-height: 1.15;
}

.egsCareerHeader p {
  margin: 0;
  color: #bdb3c2;
  font-size: 15px;
  line-height: 1.6;
}

.egsCareerForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.egsCareerField {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.egsCareerField label {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.egsCareerField input,
.egsCareerField select,
.egsCareerField textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 15px;
  color: #ffffff;
  font: inherit;
  outline: none;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 11px;
}

.egsCareerField input::placeholder,
.egsCareerField textarea::placeholder {
  color: #887e8d;
}

.egsCareerField input:focus,
.egsCareerField select:focus,
.egsCareerField textarea:focus {
  border-color: #ec1e6e;
  box-shadow: 0 0 0 3px rgba(236, 30, 110, 0.14);
}

.egsCareerField select option {
  color: #111111;
  background: #ffffff;
}

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

/* About You field */
.egsCareerField:has(textarea) {
  grid-column: 1 / -1;
}

.egsCareerResumeNote {
  grid-column: 1 / -1;
  margin: 0;
  color: #c4b8c8;
  font-size: 13px;
}

.egsCareerSubmit {
  grid-column: 1 / -1;
  width: 100%;
  padding: 15px 22px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  border: 0;
  border-radius: 50px;
  background: linear-gradient(90deg, #ec1e6e, #ff7a2f);
  box-shadow: 0 12px 30px rgba(236, 30, 110, 0.3);
  cursor: pointer;
}

.egsCareerSubmit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 35px rgba(236, 30, 110, 0.42);
}

.egsCrRcApply,
.egsCrHrApplyBtn {
  cursor: pointer;
}

/* Mobile */
@media (max-width: 650px) {
  .egsCareerModal {
    padding: 12px;
  }

  .egsCareerDialog {
    max-height: calc(100vh - 24px);
    padding: 28px 18px;
    border-radius: 18px;
  }

  .egsCareerForm {
    grid-template-columns: 1fr;
  }

  .egsCareerField:has(textarea),
  .egsCareerResumeNote,
  .egsCareerSubmit {
    grid-column: auto;
  }
}

/* Career popup white theme */
.egsCareerDialog {
  color: #1b1830 !important;
  background:
    radial-gradient(
      circle at top right,
      rgba(236, 30, 110, 0.12),
      transparent 38%
    ),
    #ffffff !important;
  border: 1px solid #ffd0e1 !important;
}

.egsCareerHeader h2,
.egsCareerField label {
  color: #1b1830 !important;
}

.egsCareerHeader p,
.egsCareerResumeNote {
  color: #6b6570 !important;
}

.egsCareerField input,
.egsCareerField select,
.egsCareerField textarea {
  color: #1b1830 !important;
  background: #fff8fb !important;
  border-color: #eadde3 !important;
}

.egsCareerField input::placeholder,
.egsCareerField textarea::placeholder {
  color: #9b9298 !important;
}

.egsCareerClose {
  color: #1b1830 !important;
  background: #fff1f6 !important;
  border-color: #ffd0e1 !important;
}

.egsCareerClose:hover {
  color: #ffffff !important;
  background: #ec1e6e !important;
}


/* Tablet */
@media (max-width: 768px) {
  .egsCareerModal {
    padding: 15px;
  }

  .egsCareerDialog {
    width: 100%;
    max-height: calc(100dvh - 30px);
    padding: 30px 22px;
  }

  .egsCareerForm {
    grid-template-columns: 1fr;
  }

  .egsCareerField,
  .egsCareerResumeNote,
  .egsCareerSubmit {
    grid-column: 1 / -1;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .egsCareerModal {
    align-items: flex-start;
    padding: 8px;
  }

  .egsCareerDialog {
    width: 100%;
    max-height: calc(100dvh - 16px);
    margin-top: 8px;
    padding: 25px 16px;
    border-radius: 16px;
  }

  .egsCareerHeader h2 {
    margin-right: 42px;
    font-size: 25px;
  }

  .egsCareerHeader p {
    font-size: 14px;
  }

  .egsCareerForm {
    gap: 14px;
  }

  .egsCareerField input,
  .egsCareerField select,
  .egsCareerField textarea {
    min-height: 48px;
    font-size: 16px;
  }

  .egsCareerField textarea {
    min-height: 100px;
  }

  .egsCareerSubmit {
    min-height: 50px;
  }
}

.egsCareerClose {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;

  font-family: Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
}
/*===============================================
              SECTION 3 Ladder
===============================================*/


.egsh-section, .egsh-section *{box-sizing:border-box;}
  .egsh-section{
    --egsh-ink:#3a2145;
    --egsh-sub:#57415f;
    --egsh-orange:#ff8a4c;
    --egsh-orange-deep:#ff6a2e;
    --egsh-pink:#ff5c9a;
    --egsh-pink-deep:#e6408f;
    --egsh-purple:#8a4fd8;
    --egsh-purple-deep:#7c3aed;
    --egsh-cream:#fff8f1;
    margin:0;font-family:'Poppins',sans-serif;color:var(--egsh-ink);
  }

  .egsh-stage{position:relative;width:100%;min-height:auto;overflow:hidden;padding:18px 60px 60px;
    display:flex;flex-direction:column;justify-content:center;
    background:linear-gradient(155deg, #fff0e4 0%, #ffdcc4 30%, #ffc9d4 65%, #ffe3d0 100%);
  }
  .egsh-aurora{position:absolute;inset:-45%;z-index:0;pointer-events:none;
    background:conic-gradient(from 0deg,
      rgba(255,138,60,0.55), rgba(255,90,140,0.5), rgba(255,60,110,0.48),
      rgba(255,190,90,0.52), rgba(255,110,150,0.5), rgba(255,138,60,0.55));
    filter:blur(95px) saturate(1.15);opacity:0.9;
    animation:egshAuroraSpin 26s linear infinite;
  }
  @keyframes egshAuroraSpin{0%{transform:rotate(0deg) scale(1);}50%{transform:rotate(180deg) scale(1.22);}100%{transform:rotate(360deg) scale(1);}}

  .egsh-aurora-2{position:absolute;inset:-35%;z-index:0;pointer-events:none;
    background:conic-gradient(from 90deg,
      rgba(255,210,120,0.35), rgba(255,140,70,0.3), rgba(255,100,150,0.3),
      rgba(255,210,120,0.35));
    filter:blur(80px);opacity:0.65;mix-blend-mode:soft-light;
    animation:egshAuroraSpin2 34s linear infinite reverse;
  }
  @keyframes egshAuroraSpin2{0%{transform:rotate(0deg) scale(1.1);}50%{transform:rotate(-180deg) scale(0.9);}100%{transform:rotate(-360deg) scale(1.1);}}

  .egsh-glaze{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(circle at 8% 92%, rgba(255,255,255,0.7), transparent 42%),
      radial-gradient(circle at 94% 6%, rgba(255,255,255,0.6), transparent 40%),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,0.32), transparent 65%);
  }
  .egsh-vignette{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(120,35,55,0.14) 100%);
  }

  .egsh-blob{position:absolute;filter:blur(72px);opacity:0.5;z-index:0;pointer-events:none;
    animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
  .egsh-blob-1{width:440px;height:440px;background:radial-gradient(circle,var(--egsh-orange),transparent 70%);top:-120px;left:-110px;
    animation-name:egshMorph1,egshDrift1;animation-duration:14s,20s;}
  .egsh-blob-2{width:400px;height:400px;background:radial-gradient(circle,#ff5c6e,transparent 70%);bottom:-110px;right:-90px;
    animation-name:egshMorph2,egshDrift2;animation-duration:16s,24s;}
  .egsh-blob-3{width:340px;height:340px;background:radial-gradient(circle,var(--egsh-pink),transparent 70%);top:40%;right:0%;
    animation-name:egshMorph1,egshDrift3;animation-duration:12s,16s;}
  @keyframes egshMorph1{
    0%,100%{border-radius:42% 58% 65% 35% / 45% 40% 60% 55%;}
    50%{border-radius:60% 40% 35% 65% / 55% 65% 35% 45%;}
  }
  @keyframes egshMorph2{
    0%,100%{border-radius:55% 45% 40% 60% / 40% 55% 45% 60%;}
    50%{border-radius:35% 65% 60% 40% / 60% 40% 60% 40%;}
  }
  @keyframes egshDrift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,80px) scale(1.2);}}
  @keyframes egshDrift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-55px,-65px) scale(1.15);}}
  @keyframes egshDrift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-45px,55px) scale(1.25);}}

  .egsh-bokeh{position:absolute;bottom:-40px;border-radius:50%;z-index:1;pointer-events:none;opacity:0;
    animation-name:egshFloatUp;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
  @keyframes egshFloatUp{
    0%{transform:translateY(0) translateX(0) scale(0.7);opacity:0;}
    12%{opacity:var(--egsh-bokeh-op,0.55);}
    88%{opacity:var(--egsh-bokeh-op,0.4);}
    100%{transform:translateY(-620px) translateX(24px) scale(1.15);opacity:0;}
  }

  .egsh-sparkle{position:absolute;border-radius:50%;background:#fff;z-index:0;pointer-events:none;animation:egshTwinkle 3.4s ease-in-out infinite;}
  @keyframes egshTwinkle{0%,100%{opacity:0.15;transform:scale(0.6);}50%{opacity:0.9;transform:scale(1.3);}}

  .egsh-theme-icon{position:absolute;z-index:0;pointer-events:none;
    display:flex;align-items:center;justify-content:center;
    border-radius:26%;
    background:linear-gradient(155deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35));
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    box-shadow:0 14px 30px rgba(120,50,90,0.16), inset 0 1px 0 rgba(255,255,255,0.85), 0 0 0 1px rgba(255,255,255,0.5);
    animation-name:egshThemeFloat;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
  @keyframes egshThemeFloat{
    0%,100%{transform:translateY(0) rotate(-5deg);}
    50%{transform:translateY(-18px) rotate(5deg);}
  }


  .egsh-head{position:relative;z-index:2;text-align:center;max-width:640px;margin:0 auto 6px;
    animation:egshHeadIn 0.9s cubic-bezier(.22,1,.36,1) both;}
  @keyframes egshHeadIn{0%{opacity:0;transform:translateY(24px);}100%{opacity:1;transform:translateY(0);}}
  .egsh-eyebrow{font-weight:600;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--egsh-orange-deep);margin-bottom:8px;}
  .egsh-title-wrap{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 8px;flex-wrap:wrap;}
  .egsh-title-spark{font-size:clamp(16px,2.2vw,24px);display:inline-block;animation:egshSparkSpin 2.6s ease-in-out infinite;}
  .egsh-title-spark.egsh-spark-b{animation-delay:0.5s;}
  @keyframes egshSparkSpin{0%,100%{transform:rotate(0deg) scale(1);opacity:0.85;}50%{transform:rotate(18deg) scale(1.25);opacity:1;}}
  .egsh-title{font-weight:800;font-size:clamp(18px,2.4vw,26px);line-height:1.15;margin:0;letter-spacing:-0.01em;
    color:#7a1440;
  }
  @keyframes egshShine{0%{background-position:0% center;}100%{background-position:200% center;}}
  .egsh-step-indicator{display:inline-flex;align-items:center;gap:8px;margin:4px 0;padding:4px 12px;border-radius:999px;
    background:linear-gradient(135deg,rgba(255,138,76,0.14),rgba(230,64,143,0.14),rgba(124,58,237,0.14));
    border:1px solid rgba(230,64,143,0.25);font-weight:600;font-size:11.5px;color:var(--egsh-pink-deep);
  }
  .egsh-sub{font-size:16.5px;color:var(--egsh-sub);line-height:1.5;font-weight:500;margin:0;}

  .egsh-diag-zone{position:relative;z-index:2;max-width:1180px;width:100%;margin:0 auto;aspect-ratio:1200/460;}
  .egsh-diag-zone svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}

  .egsh-character{position:absolute;font-size:78px;line-height:1;transform:translate(-50%,-62%);z-index:4;
    transition:left 0.06s linear, top 0.06s linear;filter:drop-shadow(0 8px 14px rgba(58,33,69,0.28));}
  .egsh-character::before{content:'';position:absolute;left:50%;top:50%;width:112px;height:112px;border-radius:50%;
    transform:translate(-50%,-50%) scale(0.6);
    background:radial-gradient(circle, rgba(255,196,120,0.75), rgba(255,120,170,0.35) 55%, transparent 75%);
    opacity:0;z-index:-1;pointer-events:none;transition:opacity 0.35s ease;}
  .egsh-character.egsh-glow::before{opacity:1;animation:egshCharGlow 1.1s ease-in-out infinite;}
  @keyframes egshCharGlow{0%,100%{transform:translate(-50%,-50%) scale(0.78);}50%{transform:translate(-50%,-50%) scale(1.18);}}
  .egsh-character::after{content:'';position:absolute;left:50%;bottom:-4px;width:52px;height:15px;border-radius:50%;
    background:radial-gradient(ellipse, rgba(58,33,69,0.32), transparent 72%);
    transform:translateX(-50%);z-index:-2;animation:egshShadowPulse 1.7s ease-in-out infinite;}
  @keyframes egshShadowPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:0.55;}50%{transform:translateX(-50%) scale(0.72);opacity:0.3;}}
  @keyframes egshCharPop{0%{transform:translate(-50%,-62%) scale(0.5) rotate(-8deg);}55%{transform:translate(-50%,-62%) scale(1.3) rotate(6deg);}100%{transform:translate(-50%,-62%) scale(1) rotate(0deg);}}
  .egsh-character.egsh-pop{animation:egshCharPop 0.55s cubic-bezier(.34,1.56,.64,1);}
  .egsh-character-emoji{display:inline-block;animation:egshBob 1.6s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,180,110,0.5));}
  @keyframes egshBob{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-7px) rotate(4deg);}}

  .egsh-trail{position:absolute;border-radius:50%;pointer-events:none;z-index:2;opacity:0;}

  .egsh-chip{position:absolute;transform:translateY(-50%) scale(0.92);width:186px;padding:11px 14px;border-radius:16px;
    background:
      linear-gradient(155deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8)) padding-box,
      linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5)) border-box;
    border:1.5px solid transparent;
    box-shadow:0 8px 20px rgba(120,60,140,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
    opacity:0.85;transition:opacity 0.5s ease, box-shadow 0.5s ease, transform 0.35s cubic-bezier(.2,.8,.3,1), background 0.5s ease;
    z-index:3;overflow:hidden;backdrop-filter:blur(8px);cursor:default;
  }
  .egsh-chip::after{content:'';position:absolute;inset:0;background:var(--egsh-tint);opacity:0.85;transition:opacity 0.5s ease;pointer-events:none;}
  .egsh-chip::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--egsh-accent);opacity:0.4;transition:opacity 0.5s ease, width 0.5s ease;}
  .egsh-chip.egsh-reached{opacity:1;
    box-shadow:0 20px 40px -10px var(--egsh-glow), 0 4px 12px rgba(120,60,140,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
    background:
      linear-gradient(155deg, rgba(255,255,255,0.95), rgba(255,255,255,0.82)) padding-box,
      var(--egsh-accent) border-box;
    animation:egshChipGlowPulse 2.6s ease-in-out infinite;
  }
  @keyframes egshChipGlowPulse{
    0%,100%{box-shadow:0 20px 40px -10px var(--egsh-glow), 0 4px 12px rgba(120,60,140,0.1), inset 0 1px 0 rgba(255,255,255,0.8);}
    50%{box-shadow:0 26px 52px -8px var(--egsh-glow), 0 6px 16px rgba(120,60,140,0.14), inset 0 1px 0 rgba(255,255,255,0.9);}
  }
  .egsh-chip.egsh-reached::after{opacity:1;}
  .egsh-chip.egsh-reached::before{opacity:1;width:5px;}
  .egsh-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;min-height:28px;flex-shrink:0;border-radius:9px;margin-bottom:6px;
    background:linear-gradient(135deg,#efe6f4,#e0d3e8);transition:background 0.5s ease, transform 0.35s cubic-bezier(.2,.8,.3,1), box-shadow 0.5s ease;
    font-size:15px;line-height:1;position:relative;box-shadow:0 2px 6px rgba(120,60,140,0.06);}
  .egsh-chip.egsh-reached .egsh-icon-wrap{background:var(--egsh-accent);box-shadow:0 6px 16px -2px var(--egsh-glow);animation:egshIconBounce 2.2s ease-in-out infinite;}
  @keyframes egshIconBounce{0%,100%{transform:scale(1.1) rotate(-4deg) translateY(0);}50%{transform:scale(1.15) rotate(-2deg) translateY(-3px);}}
  .egsh-chip-num{position:absolute;top:11px;right:13px;font-size:19px;font-weight:800;letter-spacing:0.04em;color:var(--egsh-sub);opacity:0.35;transition:opacity 0.5s ease, color 0.5s ease;}
  .egsh-chip.egsh-reached .egsh-chip-num{opacity:0.9;background:var(--egsh-accent);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .egsh-chip h3{margin:0 0 2px;font-size:20.5px;font-weight:800;color: #000;letter-spacing:-0.01em;line-height:1.25;}
  .egsh-chip p{margin:0;font-size:18px;line-height:1.45;color:var(--egsh-sub);font-weight:500;}
  .egsh-chip.egsh-reached p{color:#5a4468;}
  .egsh-chip.egsh-side-left{text-align:right;transform:translate(calc(-100% - 34px),-50%) scale(0.92);}
  .egsh-chip.egsh-side-left.egsh-reached{transform:translate(calc(-100% - 34px),-50%) scale(1.04);}
  .egsh-chip.egsh-side-left.egsh-reached:hover{transform:translate(calc(-100% - 34px),-50%) scale(1.07) rotate(0.6deg);}
  .egsh-chip.egsh-side-left::before{left:auto;right:0;}
  .egsh-chip.egsh-side-right{text-align:left;transform:translate(34px,-50%) scale(0.92);}
  .egsh-chip.egsh-side-right.egsh-reached{transform:translate(34px,-50%) scale(1.04);}
  .egsh-chip.egsh-side-right.egsh-reached:hover{transform:translate(34px,-50%) scale(1.07) rotate(-0.6deg);}

  .egsh-chip.egsh-final{width:198px;padding:14px 16px;}
  .egsh-chip.egsh-final .egsh-icon-wrap{width:36px;height:36px;font-size:19px;background:linear-gradient(135deg,#ffd27a,#ff6a2e);}
  .egsh-chip.egsh-final.egsh-reached{box-shadow:0 18px 40px -8px rgba(255,138,76,0.45);}
  .egsh-chip.egsh-final.egsh-reached .egsh-icon-wrap{animation:egshTrophyPulse 1.6s ease-in-out infinite;}
  @keyframes egshTrophyPulse{0%,100%{transform:scale(1.06);}50%{transform:scale(1.18);}}
  .egsh-chip.egsh-final h3{font-size:13.5px;}

  .egsh-confetti{position:absolute;width:6px;height:6px;border-radius:2px;pointer-events:none;z-index:5;opacity:0;}
  .egsh-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}


   
  @media (max-width:820px){
    .egsh-stage{padding:26px 20px 30px;}
  }

  @media (max-width:640px){
    .egsh-theme-icon{display:none;}
    .egsh-stage{min-height:auto;padding:22px 16px 26px;}
    .egsh-title{font-size:clamp(19px,5.6vw,26px);}
    .egsh-sub{font-size:12.5px;}

    .egsh-diag-zone{aspect-ratio:auto;height:auto;padding:6px 0 6px 30px;max-width:420px;}
    #egshRails{display:none;}
    .egsh-diag-zone::before{content:'';position:absolute;left:14px;top:6px;bottom:6px;width:4px;border-radius:4px;
      background:linear-gradient(180deg,#ff8a4c,#ff5c9a,#8a4fd8,#ffd27a);opacity:0.4;}

    .egsh-chip{position:static !important;transform:none !important;width:100%;max-width:none;
      margin:0 0 22px 0;text-align:left !important;padding:12px 14px;overflow:visible;}
    .egsh-chip::before{display:none;}
    .egsh-chip:last-child{margin-bottom:0;}
    .egsh-chip.egsh-final{width:100%;}
    .egsh-icon-wrap{width:32px !important;height:32px !important;min-width:32px !important;min-height:32px !important;font-size:17px !important;}
    .egsh-chip.egsh-final .egsh-icon-wrap{width:40px !important;height:40px !important;font-size:21px !important;}

    .egsh-character{font-size:56px;left:14px !important;}
    .egsh-character::before{width:76px;height:76px;}
  }

  @media (max-width:360px){
    .egsh-chip h3{font-size:12px;}
    .egsh-chip p{font-size:10px;}
  }

  @media (prefers-reduced-motion: reduce){
    .egsh-stage,.egsh-blob,.egsh-aurora,.egsh-aurora-2,.egsh-bokeh,.egsh-theme-icon,.egsh-title,.egsh-head,.egsh-title-spark,.egsh-character-emoji{animation:none;border-radius:50% !important;}
    .egsh-chip,.egsh-character{transition:none;}
  }













/* =========================================
   HRC — HIRING ROUNDS
   UNIQUE PREFIX: hrc-
========================================= */
.egsh-section, .egsh-section *{box-sizing:border-box;}
  .egsh-section{
    --egsh-ink:#3a2145;
    --egsh-sub:#57415f;
    --egsh-orange:#ff8a4c;
    --egsh-orange-deep:#ff6a2e;
    --egsh-pink:#ff5c9a;
    --egsh-pink-deep:#e6408f;
    --egsh-purple:#8a4fd8;
    --egsh-purple-deep:#7c3aed;
    --egsh-cream:#fff8f1;
    margin:0;font-family:'Poppins',sans-serif;color:var(--egsh-ink);
  }

  .egsh-stage{position:relative;width:100%;min-height:auto;overflow:hidden;padding:20px 90px 90px;
    display:flex;flex-direction:column;justify-content:center;
    background:linear-gradient(155deg, #fff0e4 0%, #ffdcc4 30%, #ffc9d4 65%, #ffe3d0 100%);
  }
  .egsh-aurora{position:absolute;inset:-45%;z-index:0;pointer-events:none;
    background:conic-gradient(from 0deg,
      rgba(255,138,60,0.55), rgba(255,90,140,0.5), rgba(255,60,110,0.48),
      rgba(255,190,90,0.52), rgba(255,110,150,0.5), rgba(255,138,60,0.55));
    filter:blur(95px) saturate(1.15);opacity:0.9;
    animation:egshAuroraSpin 26s linear infinite;
  }
  @keyframes egshAuroraSpin{0%{transform:rotate(0deg) scale(1);}50%{transform:rotate(180deg) scale(1.22);}100%{transform:rotate(360deg) scale(1);}}

  .egsh-aurora-2{position:absolute;inset:-35%;z-index:0;pointer-events:none;
    background:conic-gradient(from 90deg,
      rgba(255,210,120,0.35), rgba(255,140,70,0.3), rgba(255,100,150,0.3),
      rgba(255,210,120,0.35));
    filter:blur(80px);opacity:0.65;mix-blend-mode:soft-light;
    animation:egshAuroraSpin2 34s linear infinite reverse;
  }
  @keyframes egshAuroraSpin2{0%{transform:rotate(0deg) scale(1.1);}50%{transform:rotate(-180deg) scale(0.9);}100%{transform:rotate(-360deg) scale(1.1);}}

  .egsh-glaze{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(circle at 8% 92%, rgba(255,255,255,0.7), transparent 42%),
      radial-gradient(circle at 94% 6%, rgba(255,255,255,0.6), transparent 40%),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,0.32), transparent 65%);
  }
  .egsh-vignette{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(120,35,55,0.14) 100%);
  }

  .egsh-blob{position:absolute;filter:blur(72px);opacity:0.5;z-index:0;pointer-events:none;
    animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
  .egsh-blob-1{width:440px;height:440px;background:radial-gradient(circle,var(--egsh-orange),transparent 70%);top:-120px;left:-110px;
    animation-name:egshMorph1,egshDrift1;animation-duration:14s,20s;}
  .egsh-blob-2{width:400px;height:400px;background:radial-gradient(circle,#ff5c6e,transparent 70%);bottom:-110px;right:-90px;
    animation-name:egshMorph2,egshDrift2;animation-duration:16s,24s;}
  .egsh-blob-3{width:340px;height:340px;background:radial-gradient(circle,var(--egsh-pink),transparent 70%);top:40%;right:0%;
    animation-name:egshMorph1,egshDrift3;animation-duration:12s,16s;}
  @keyframes egshMorph1{
    0%,100%{border-radius:42% 58% 65% 35% / 45% 40% 60% 55%;}
    50%{border-radius:60% 40% 35% 65% / 55% 65% 35% 45%;}
  }
  @keyframes egshMorph2{
    0%,100%{border-radius:55% 45% 40% 60% / 40% 55% 45% 60%;}
    50%{border-radius:35% 65% 60% 40% / 60% 40% 60% 40%;}
  }
  @keyframes egshDrift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,80px) scale(1.2);}}
  @keyframes egshDrift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-55px,-65px) scale(1.15);}}
  @keyframes egshDrift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-45px,55px) scale(1.25);}}

  .egsh-bokeh{position:absolute;bottom:-40px;border-radius:50%;z-index:1;pointer-events:none;opacity:0;
    animation-name:egshFloatUp;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
  @keyframes egshFloatUp{
    0%{transform:translateY(0) translateX(0) scale(0.7);opacity:0;}
    12%{opacity:var(--egsh-bokeh-op,0.55);}
    88%{opacity:var(--egsh-bokeh-op,0.4);}
    100%{transform:translateY(-620px) translateX(24px) scale(1.15);opacity:0;}
  }

  .egsh-sparkle{position:absolute;border-radius:50%;background:#fff;z-index:0;pointer-events:none;animation:egshTwinkle 3.4s ease-in-out infinite;}
  @keyframes egshTwinkle{0%,100%{opacity:0.15;transform:scale(0.6);}50%{opacity:0.9;transform:scale(1.3);}}

  .egsh-theme-icon{position:absolute;z-index:0;pointer-events:none;
    display:flex;align-items:center;justify-content:center;
    border-radius:26%;
    background:linear-gradient(155deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35));
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    box-shadow:0 14px 30px rgba(120,50,90,0.16), inset 0 1px 0 rgba(255,255,255,0.85), 0 0 0 1px rgba(255,255,255,0.5);
    animation-name:egshThemeFloat;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
  @keyframes egshThemeFloat{
    0%,100%{transform:translateY(0) rotate(-5deg);}
    50%{transform:translateY(-18px) rotate(5deg);}
  }


  .egsh-head{position:relative;z-index:2;text-align:center;max-width:640px;margin:0 auto 6px;
    animation:egshHeadIn 0.9s cubic-bezier(.22,1,.36,1) both;}
  @keyframes egshHeadIn{0%{opacity:0;transform:translateY(24px);}100%{opacity:1;transform:translateY(0);}}
  .egsh-eyebrow{font-weight:700;font-size:15px;letter-spacing:0.18em;text-transform:uppercase;color:var(--egsh-orange-deep);margin-bottom:8px;}
  .egsh-title-wrap{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 8px;flex-wrap:wrap;}
  .egsh-title-spark{font-size:clamp(16px,2.2vw,24px);display:inline-block;animation:egshSparkSpin 2.6s ease-in-out infinite;}
  .egsh-title-spark.egsh-spark-b{animation-delay:0.5s;}
  @keyframes egshSparkSpin{0%,100%{transform:rotate(0deg) scale(1);opacity:0.85;}50%{transform:rotate(18deg) scale(1.25);opacity:1;}}
  .egsh-title{font-weight:800;font-size:clamp(18px,2.4vw,26px);line-height:1.15;margin:0;letter-spacing:-0.01em;
    color:#7a1440;
  }
  @keyframes egshShine{0%{background-position:0% center;}100%{background-position:200% center;}}
  .egsh-step-indicator{display:inline-flex;align-items:center;gap:8px;margin:4px 0;padding:4px 12px;border-radius:999px;
    background:linear-gradient(135deg,rgba(255,138,76,0.14),rgba(230,64,143,0.14),rgba(124,58,237,0.14));
    border:1px solid rgba(230,64,143,0.25);font-weight:600;font-size:11.5px;color:var(--egsh-pink-deep);
  }
  .egsh-sub{font-size:13.5px;color:var(--egsh-sub);line-height:1.5;font-weight:500;margin:0;}

  .egsh-diag-zone{position:relative;z-index:2;max-width:1180px;width:100%;margin:0 auto;aspect-ratio:1200/560;}
  .egsh-diag-zone svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}

  .egsh-character{position:absolute;font-size:78px;line-height:1;transform:translate(-50%,-62%);z-index:4;
    transition:left 0.06s linear, top 0.06s linear;filter:drop-shadow(0 8px 14px rgba(58,33,69,0.28));}
  .egsh-character::before{content:'';position:absolute;left:50%;top:50%;width:112px;height:112px;border-radius:50%;
    transform:translate(-50%,-50%) scale(0.6);
    background:radial-gradient(circle, rgba(255,196,120,0.75), rgba(255,120,170,0.35) 55%, transparent 75%);
    opacity:0;z-index:-1;pointer-events:none;transition:opacity 0.35s ease;}
  .egsh-character.egsh-glow::before{opacity:1;animation:egshCharGlow 1.1s ease-in-out infinite;}
  @keyframes egshCharGlow{0%,100%{transform:translate(-50%,-50%) scale(0.78);}50%{transform:translate(-50%,-50%) scale(1.18);}}
  .egsh-character::after{content:'';position:absolute;left:50%;bottom:-4px;width:52px;height:15px;border-radius:50%;
    background:radial-gradient(ellipse, rgba(58,33,69,0.32), transparent 72%);
    transform:translateX(-50%);z-index:-2;animation:egshShadowPulse 1.7s ease-in-out infinite;}
  @keyframes egshShadowPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:0.55;}50%{transform:translateX(-50%) scale(0.72);opacity:0.3;}}
  @keyframes egshCharPop{0%{transform:translate(-50%,-62%) scale(0.5) rotate(-8deg);}55%{transform:translate(-50%,-62%) scale(1.3) rotate(6deg);}100%{transform:translate(-50%,-62%) scale(1) rotate(0deg);}}
  .egsh-character.egsh-pop{animation:egshCharPop 0.55s cubic-bezier(.34,1.56,.64,1);}
  .egsh-character-emoji{display:inline-block;animation:egshBob 1.6s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,180,110,0.5));}
  @keyframes egshBob{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-7px) rotate(4deg);}}

  .egsh-trail{position:absolute;border-radius:50%;pointer-events:none;z-index:2;opacity:0;}

  .egsh-chip{position:absolute;transform:translateY(-50%) scale(0.92);width:300px;padding:8px 8px;border-radius:16px;
    background:
      linear-gradient(155deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8)) padding-box,
      linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5)) border-box;
    border:1.5px solid transparent;
    box-shadow:0 8px 20px rgba(120,60,140,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
    opacity:0.85;transition:opacity 0.5s ease, box-shadow 0.5s ease, transform 0.35s cubic-bezier(.2,.8,.3,1), background 0.5s ease;
    z-index:3;overflow:hidden;backdrop-filter:blur(8px);cursor:default;
  }
  .egsh-chip::after{content:'';position:absolute;inset:0;background:var(--egsh-tint);opacity:0.85;transition:opacity 0.5s ease;pointer-events:none;}
  .egsh-chip::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--egsh-accent);opacity:0.4;transition:opacity 0.5s ease, width 0.5s ease;}
  .egsh-chip.egsh-reached{opacity:1;
    box-shadow:0 20px 40px -10px var(--egsh-glow), 0 4px 12px rgba(120,60,140,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
    background:
      linear-gradient(155deg, rgba(255,255,255,0.95), rgba(255,255,255,0.82)) padding-box,
      var(--egsh-accent) border-box;
    animation:egshChipGlowPulse 2.6s ease-in-out infinite;
  }
  @keyframes egshChipGlowPulse{
    0%,100%{box-shadow:0 20px 40px -10px var(--egsh-glow), 0 4px 12px rgba(120,60,140,0.1), inset 0 1px 0 rgba(255,255,255,0.8);}
    50%{box-shadow:0 26px 52px -8px var(--egsh-glow), 0 6px 16px rgba(120,60,140,0.14), inset 0 1px 0 rgba(255,255,255,0.9);}
  }
  .egsh-chip.egsh-reached::after{opacity:1;}
  .egsh-chip.egsh-reached::before{opacity:1;width:5px;}
  .egsh-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;min-height:28px;flex-shrink:0;border-radius:9px;margin-bottom:6px;
    background:linear-gradient(135deg,#efe6f4,#e0d3e8);transition:background 0.5s ease, transform 0.35s cubic-bezier(.2,.8,.3,1), box-shadow 0.5s ease;
    font-size:15px;line-height:1;position:relative;box-shadow:0 2px 6px rgba(120,60,140,0.06);}
  .egsh-chip.egsh-reached .egsh-icon-wrap{background:var(--egsh-accent);box-shadow:0 6px 16px -2px var(--egsh-glow);animation:egshIconBounce 2.2s ease-in-out infinite;}
  @keyframes egshIconBounce{0%,100%{transform:scale(1.1) rotate(-4deg) translateY(0);}50%{transform:scale(1.15) rotate(-2deg) translateY(-3px);}}
  .egsh-chip-num{position:absolute;top:11px;right:13px;font-size:11px;font-weight:800;letter-spacing:0.04em;color:var(--egsh-sub);opacity:0.35;transition:opacity 0.5s ease, color 0.5s ease;}
  .egsh-chip.egsh-reached .egsh-chip-num{opacity:0.9;background:var(--egsh-accent);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .egsh-chip h3{margin:0 0 2px;font-size:22px;font-weight:800;color:var(--egsh-ink);letter-spacing:-0.01em;line-height:1.25;}
  .egsh-chip p{margin:0;font-size:14px;line-height:1.45;color:var(--egsh-sub);font-weight:500;}
  .egsh-chip.egsh-reached p{color:#5a4468;}
  .egsh-chip.egsh-side-left{text-align:right;transform:translate(calc(-100% - 34px),-50%) scale(0.92);}
  .egsh-chip.egsh-side-left.egsh-reached{transform:translate(calc(-100% - 34px),-50%) scale(1.04);}
  .egsh-chip.egsh-side-left.egsh-reached:hover{transform:translate(calc(-100% - 34px),-50%) scale(1.07) rotate(0.6deg);}
  .egsh-chip.egsh-side-left::before{left:auto;right:0;}
  .egsh-chip.egsh-side-right{text-align:left;transform:translate(34px,-50%) scale(0.92);}
  .egsh-chip.egsh-side-right.egsh-reached{transform:translate(34px,-50%) scale(1.04);}
  .egsh-chip.egsh-side-right.egsh-reached:hover{transform:translate(34px,-50%) scale(1.07) rotate(-0.6deg);}

  .egsh-chip.egsh-final{width:300px;padding:8px 8px;}
  .egsh-chip.egsh-final .egsh-icon-wrap{width:36px;height:36px;font-size:19px;background:linear-gradient(135deg,#ffd27a,#ff6a2e);}
  .egsh-chip.egsh-final.egsh-reached{box-shadow:0 18px 40px -8px rgba(255,138,76,0.45);}
  .egsh-chip.egsh-final.egsh-reached .egsh-icon-wrap{animation:egshTrophyPulse 1.6s ease-in-out infinite;}
  @keyframes egshTrophyPulse{0%,100%{transform:scale(1.06);}50%{transform:scale(1.18);}}
  .egsh-chip.egsh-final h3{font-size:13.5px;}

  .egsh-confetti{position:absolute;width:6px;height:6px;border-radius:2px;pointer-events:none;z-index:5;opacity:0;}
  .egsh-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

  @media (max-width:820px){
    .egsh-stage{padding:26px 20px 30px;}
  }

  @media (max-width:640px){
    .egsh-theme-icon{display:none;}
    .egsh-stage{min-height:auto;padding:22px 16px 26px;}
    .egsh-title{font-size:clamp(19px,5.6vw,26px);}
    .egsh-sub{font-size:12egsh-sub.5px;}

    .egsh-diag-zone{aspect-ratio:auto;height:auto;padding:6px 0 6px 30px;max-width:420px;}
    #egshRails{display:none;}
    .egsh-diag-zone::before{content:'';position:absolute;left:14px;top:6px;bottom:6px;width:4px;border-radius:4px;
      background:linear-gradient(180deg,#ff8a4c,#ff5c9a,#8a4fd8,#ffd27a);opacity:0.4;}

    .egsh-chip{position:static !important;transform:none !important;width:100%;max-width:none;
      margin:0 0 22px 0;text-align:left !important;padding:12px 14px;overflow:visible;}
    .egsh-chip::before{display:none;}
    .egsh-chip:last-child{margin-bottom:0;}
    .egsh-chip.egsh-final{width:100%;}
    .egsh-icon-wrap{width:32px !important;height:32px !important;min-width:32px !important;min-height:32px !important;font-size:17px !important;}
    .egsh-chip.egsh-final .egsh-icon-wrap{width:40px !important;height:40px !important;font-size:21px !important;}

    .egsh-character{font-size:56px;left:14px !important;}
    .egsh-character::before{width:76px;height:76px;}
  }

  @media (max-width:360px){
    .egsh-chip h3{font-size:12px;}
    .egsh-chip p{font-size:10px;}
  }

  @media (prefers-reduced-motion: reduce){
    .egsh-stage,.egsh-blob,.egsh-aurora,.egsh-aurora-2,.egsh-bokeh,.egsh-theme-icon,.egsh-title,.egsh-head,.egsh-title-spark,.egsh-character-emoji{animation:none;border-radius:50% !important;}
    .egsh-chip,.egsh-character{transition:none;}
  }




/*===================Case-Studies separate Page===================*/

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

html {
    scroll-behavior: smooth;
}
body{font-family:'Poppins',sans-serif;}

.case-hero{
  position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(160deg,#08070a 0%,#100a10 55%,#08070a 100%);
  padding:40px;
}

.hero-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}
.hero-glow-1{width:360px;height:360px;top:-100px;right:-80px;background:radial-gradient(circle,rgba(255,138,61,.16),transparent 70%);}
.hero-glow-2{width:320px;height:320px;bottom:-100px;left:-70px;background:radial-gradient(circle,rgba(224,68,122,.14),transparent 70%);}

/* scattered floating puzzle pieces, background layer */
.puzzle-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.puzzle-piece{
  fill:none;stroke:rgba(255,255,255,.1);stroke-width:1.5;
  animation:puzzleFloat ease-in-out infinite, pieceGlow ease-in-out infinite;
}
.puzzle-piece.dashed{stroke-dasharray:4 5;}
.puzzle-piece.accent-pink{stroke:rgba(224,68,122,.35);}
.puzzle-piece.accent-orange{stroke:rgba(255,138,61,.35);}

/* large blurred foreground piece for depth */
.fg-piece{position:absolute;z-index:1;pointer-events:none;filter:blur(1.5px);opacity:.5;animation:puzzleFloat ease-in-out infinite;}

/* the "solving" piece — snaps into place near the headline */
.solve-piece-wrap{position:relative;display:inline-block;margin-bottom:26px;}
.solve-piece{
  width:56px;height:56px;
  opacity:0;transform:scale(2.2) rotate(25deg) translateY(-40px);
  animation:snapIn .7s cubic-bezier(.34,1.56,.64,1) forwards 1.2s;
}
.solve-piece-flash{
  position:absolute;inset:0;border-radius:14px;
  background:radial-gradient(circle,rgba(255,207,122,.9),transparent 70%);
  opacity:0;
  animation:flashPulse .5s ease forwards 1.75s;
}

.case-hero-inner{
  padding-top: 30px;
  position:relative;
  z-index:2;
  max-width:1280px;
  margin:0 auto;
  width:100%;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:30px;
  align-items:center;
  text-align:left;
}

.case-hero-content{
  position:relative;
  z-index:2;
  max-width:none;
  text-align:left;
  padding-left:50px;
}

.stack-wrap{
  grid-column:2;
  grid-row:1;
}

/* stacked tilted project preview cards */
.stack-wrap{
  padding-top: 180px;
  position:relative;
  height:460px;
  margin-left:0;
  margin-right:auto;
  width:100%;
  max-width:420px;
  transform:translateX(50px);
}
.stack-parallax{position:absolute;will-change:transform;}
.stack-parallax:nth-child(1){top:10px;left:40px;z-index:1;}
.stack-parallax:nth-child(2){top:80px;left:130px;z-index:2;}
.stack-parallax:nth-child(3){top:190px;left:0px;z-index:3;}

.stack-card{
  position:relative;
  width:330px;
  border-radius:18px;
  overflow:hidden;

  background:linear-gradient(
    160deg,
    rgba(255,255,255,.075),
    rgba(255,255,255,.025)
  );

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

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

  box-shadow:
    0 30px 70px -22px rgba(0,0,0,.75),
    0 8px 25px rgba(0,0,0,.25);

  opacity:0;
  filter:blur(8px);

  transition:
    transform .4s ease,
    box-shadow .4s ease;
}
.stack-card.reveal{animation:stackInDramatic .9s cubic-bezier(.16,1,.3,1) forwards, idleFloat 5s ease-in-out infinite 1.9s;}
.stack-card-1{animation-delay:.3s, 1.9s;}
.stack-card-2{animation-delay:.55s, 2.4s;}
.stack-card-3{animation-delay:.8s, 2.9s;}
@keyframes stackInDramatic{
  0%{opacity:0;filter:blur(8px);transform:translateY(50px) scale(.75) rotate(0deg);}
  60%{opacity:1;filter:blur(0px);}
  100%{opacity:1;filter:blur(0px);transform:translateY(0) scale(1) rotate(var(--r,0deg));}
}
@keyframes idleFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-8px) rotate(var(--r,0deg));}}
.stack-card-1{--r:-8deg;} .stack-card-2{--r:5deg;} .stack-card-3{--r:-3deg;}
.stack-card:hover{transform:rotate(0deg) scale(1.05) translateY(-10px) !important;z-index:9;animation-play-state:paused;}
.stack-card-1:hover{box-shadow:0 34px 70px -18px rgba(224,68,122,.5);}
.stack-card-2:hover{box-shadow:0 34px 70px -18px rgba(124,58,237,.5);}
.stack-card-3:hover{box-shadow:0 34px 70px -18px rgba(34,197,94,.5);}

/* glowing rotating border ring */
.stack-card::before{
  content:"";position:absolute;inset:-1.5px;border-radius:15px;z-index:-1;
  background:conic-gradient(from 0deg,rgba(224,68,122,.9),rgba(255,138,61,.9),rgba(124,58,237,.9),rgba(224,68,122,.9));
  animation:spinBorder 5s linear infinite;
  opacity:0;transition:opacity .4s ease;
}
.stack-card:hover::before{opacity:1;}
@keyframes spinBorder{to{transform:rotate(360deg);}}

/* browser window chrome bar */
.stack-chrome{
  display:flex;align-items:center;gap:5px;padding:9px 12px;
  background:rgba(0,0,0,.25);position:relative;z-index:2;
}
.chrome-dot{width:7px;height:7px;border-radius:50%;}
.chrome-dot.red{background:#ff5f57;} .chrome-dot.yellow{background:#febc2e;} .chrome-dot.green{background:#28c840;}

.stack-thumb{
  height:175px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stack-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;

  transform:scale(1.08);

  transition:transform .6s ease;
}
.stack-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    transparent 45%,
    rgba(8,7,10,.28) 100%
  );
  z-index:1;
  pointer-events:none;
}
.stack-card-1 .stack-thumb{background:linear-gradient(135deg,#e0447a,#ff8a3d);}
.stack-card-2 .stack-thumb{background:linear-gradient(135deg,#7c3aed,#e0447a);}
.stack-card-3 .stack-thumb{background:linear-gradient(135deg,#0891b2,#22c55e);}

/* periodic shine sweep across thumbnail */
.stack-thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  transform:translateX(-150%);
  animation:shineSweep 4s ease-in-out infinite;
}
.stack-card-2 .stack-thumb::after{animation-delay:1.3s;}
.stack-card-3 .stack-thumb::after{animation-delay:2.6s;}
@keyframes shineSweep{0%,30%{transform:translateX(-150%);}55%{transform:translateX(150%);}100%{transform:translateX(150%);}}

/* result badge */
.stack-result{
  position:absolute;top:8px;right:8px;padding:4px 10px;border-radius:20px;
  background:rgba(0,0,0,.35);backdrop-filter:blur(6px);
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:#fff;
  display:flex;align-items:center;gap:4px;z-index:2;
}
.stack-result::before{content:"↑";color:#4ade80;font-weight:800;}

.stack-body{padding:14px 16px 16px;position:relative;z-index:2;}
.stack-tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#ff8a3d;letter-spacing:1px;margin-bottom:6px;}
.stack-title{font-size:14px;font-weight:700;color:#fdf3ee;}

.case-hero-content{position:relative;z-index:2;max-width:none;text-align:left;transform:translateX(25px);}
.case-hero-content .case-hero-desc{margin:0 0 34px;}
.case-hero-content .case-hero-actions{display:flex;}

.case-label{
  display:inline-flex;align-items:center;gap:9px;padding:8px 20px;border-radius:24px;margin-bottom:22px;
  background:rgba(224,68,122,.1);border:1px solid rgba(224,68,122,.28);
  font-size:12.5px;font-weight:700;letter-spacing:2.5px;color:#ff8a3d;
  opacity:0;animation:popIn .6s cubic-bezier(.34,1.56,.64,1) forwards .1s;
}
.case-label::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff8a3d;animation:blinkDot 1.4s ease-in-out infinite;}

.case-hero-title{
  font-size:54px;
  font-weight:900;
  line-height:1.18;
  margin:0 0 22px;
  color:#ffffff;
  text-shadow:0 2px 12px rgba(255,255,255,.08);
  opacity:0;
  animation:fadeUp .6s ease forwards .3s;
}
.case-hero-title .accent{
  background:linear-gradient(90deg,#e0447a,#ff8a3d,#e0447a);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite;
}

.case-hero-desc{
  font-size:15.5px;color:#a99bb5;line-height:1.8;max-width:580px;margin:0 auto 34px;
  opacity:0;animation:fadeUp .6s ease forwards .55s;
}

.case-hero-actions{opacity:0;animation:fadeUp .6s ease forwards .75s;}
.case-btn-primary{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:15px 32px;border-radius:50px;font-size:15px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#e0447a,#ff8a3d);
  box-shadow:0 14px 32px -10px rgba(224,68,122,.5);
  text-decoration:none;overflow:hidden;transition:transform .3s ease, box-shadow .3s ease;
}
.case-btn-primary::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform .5s ease;
}
.case-btn-primary:hover::before{transform:translateX(100%);}
.case-btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 42px -10px rgba(224,68,122,.65);}

@keyframes popIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes blinkDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes puzzleFloat{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(12px,-16px) rotate(6deg)}}
@keyframes pieceGlow{0%,100%{opacity:.5;filter:drop-shadow(0 0 0px rgba(255,138,61,0))}50%{opacity:1;filter:drop-shadow(0 0 6px rgba(255,138,61,.5))}}
@keyframes snapIn{
  0%{opacity:0;transform:scale(2.2) rotate(25deg) translateY(-40px);}
  60%{opacity:1;transform:scale(.9) rotate(-4deg) translateY(2px);}
  80%{transform:scale(1.08) rotate(2deg) translateY(-1px);}
  100%{opacity:1;transform:scale(1) rotate(0deg) translateY(0);}
}
#csflip-section {
    scroll-margin-top: 100px;
}
@keyframes flashPulse{0%{opacity:0;transform:scale(.6)}40%{opacity:.9;transform:scale(1.6)}100%{opacity:0;transform:scale(2.2)}}
/* =========================
   MOBILE RESPONSIVE
   ========================= */

@media (max-width: 900px){

.case-hero{
  padding:30px 14x 35px;
}

.case-hero-inner{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:600px;
  gap: 15px;
  padding-top: 0;
  text-align:center;
  }

  /* =====================
     TEXT FIRST
  ===================== */

  .case-hero-content{
    order:1;
    width:100%;
    max-width:100%;
    padding:0;
    text-align:center;
    transform:none;
  }

  .case-hero-title{
    font-size:38px;
    line-height:1.15;
    margin-bottom:20px;
  }

  .case-hero-desc{
    max-width:520px;
    margin:0 auto 28px;
    font-size:14px;
    line-height:1.7;
  }

  .case-hero-actions{
    justify-content:center;
  }

  /* =========================================
   MOBILE CARD COLOR / BORDER ANIMATION
========================================= */

.stack-card::before{
  opacity:1;
  inset:-1.5px;
  border-radius:18px;
  animation:spinBorder 4s linear infinite;
}

.stack-card{
  position:relative;
  z-index:1;
}

/* keep card content above animated border */
.stack-card > *{
  position:relative;
  z-index:2;
}

  /* =====================
     CARDS SECOND
  ===================== */

  .stack-wrap{
    order:2;

    position:relative;

    width:100%;
    max-width:340px;

    height:auto;

    margin:0 auto;

    padding:0;

    transform:none;

    display:flex;
    flex-direction:column;
    gap:25px;
  }


  /* REMOVE ABSOLUTE DESKTOP POSITION */
  .stack-parallax{
    position:relative !important;

    top:auto !important;
    left:auto !important;

    width:100%;

    transform:none !important;

    margin:0 !important;
  }


  /* EVERY CARD NORMAL FLOW */
  .stack-card{
    position:relative;

    width:100%;

    opacity:1;
    filter:none;

    transform:none !important;

    animation:none !important;
  }


  .stack-card:hover{
    transform:translateY(-5px) !important;
  }


  /* IMAGE */
  .stack-thumb{
    height:180px;
  }

}

@media (max-width:600px){

  .case-hero{
    padding:80px 16px 50px;
  }

  .case-hero-inner{
    gap:35px;
  }

  .case-hero-title{
    font-size:32px;
    line-height:1.15;
  }

  .case-hero-desc{
    font-size:13.5px;
  }

  .stack-wrap{
    max-width:310px;
    gap:22px;
  }

  .stack-card{
    width:100%;
  }

  .stack-thumb{
    height:170px;
  }

  .case-hero-content{
    width:100%;
    text-align:center;
  }

  .case-label{
    position:relative;

    /* மேலே கொண்டு வர */
    top:-10px;

    /* center fix */
    left:auto;
    right:auto;

    /* previous transform reset */
    transform:none;

    /* proper center */
    display:flex;
    width:max-content;
    margin-left:auto;
    margin-right:auto;
  }
}

/*================================================================================
                 FEATUED CASE STUDIES SECTION 2 SEPARATE PAGE
================================================================================*/
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Poppins',sans-serif;-webkit-font-smoothing:antialiased;}

.feat-section{
  position:relative;width:100%;padding:100px 50px;overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(224,68,122,.16), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(255,138,61,.16), transparent 45%),
    radial-gradient(circle at 75% 85%, rgba(168,85,247,.13), transparent 45%),
    radial-gradient(circle at 20% 85%, rgba(255,207,122,.14), transparent 45%),
    linear-gradient(180deg,#fffaf7 0%,#fdf1ec 50%,#fff8f3 100%);
  background-size:180% 180%;
  animation:meshDrift 16s ease-in-out infinite;
}
@keyframes meshDrift{0%,100%{background-position:0% 0%}50%{background-position:40% 30%}}

.feat-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;}
.feat-glow-1{width:600px;height:600px;top:-200px;left:-180px;background:radial-gradient(circle,rgba(224,68,122,.42),transparent 70%);animation:glowDrift1 10s ease-in-out infinite;}
.feat-glow-2{width:540px;height:540px;bottom:-180px;right:-150px;background:radial-gradient(circle,rgba(255,138,61,.4),transparent 70%);animation:glowDrift2 12s ease-in-out infinite;}
.feat-glow-3{width:420px;height:420px;top:25%;right:2%;background:radial-gradient(circle,rgba(168,85,247,.28),transparent 70%);animation:glowDrift3 9s ease-in-out infinite;}
.feat-glow-4{width:320px;height:320px;bottom:15%;left:8%;background:radial-gradient(circle,rgba(255,207,122,.35),transparent 70%);animation:glowDrift2 11s ease-in-out infinite reverse;}
.feat-spotlight{
  position:absolute;top:-15%;left:30%;width:1000px;height:700px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,207,122,.38) 0%, rgba(224,68,122,.18) 40%, transparent 70%);
  animation:spotBreathe 7s ease-in-out infinite;
}
.feat-rim{position:absolute;left:0;right:0;height:2px;z-index:1;background:linear-gradient(90deg,transparent,rgba(224,68,122,.5),rgba(255,138,61,.5),transparent);}
.feat-rim-top{top:0;} .feat-rim-bottom{bottom:0;}

@keyframes glowDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(35px,25px) scale(1.12)}}
@keyframes glowDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,-18px) scale(1.1)}}
@keyframes glowDrift3{0%,100%{transform:translate(0,0) scale(1);opacity:.65}50%{transform:translate(-18px,22px) scale(1.22);opacity:1}}
@keyframes spotBreathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}

.feat-sparkle{position:absolute;border-radius:50%;background:#ffcf7a;pointer-events:none;z-index:0;animation:sparkleTwinkle ease-in-out infinite;box-shadow:0 0 8px 2px rgba(255,207,122,.6);}
@keyframes sparkleTwinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.4)}}

/* floating bubbles */
.feat-bubble{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  animation:bubbleFloat ease-in-out infinite;
}
@keyframes bubbleFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-24px)}}
.feat-puzzle{position:absolute;top:60px;right:60px;z-index:1;opacity:.15;pointer-events:none;animation:puzzleFloat 8s ease-in-out infinite;}
@keyframes puzzleFloat{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(10px,-14px) rotate(6deg)}}

.feat-inner{
  position:relative;z-index:2;max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center;
}

/* left — image frame with layered depth + floating stat badges */
.feat-mockup{
  position:relative;
  opacity:0;transform:translateY(30px);
}
.feat-mockup.reveal{animation:featIn .8s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes featIn{to{opacity:1;transform:translateY(0);}}

/* blurred duplicate layers behind, for depth */
.img-layer{
  position:absolute;inset:0;border-radius:20px;
  background:linear-gradient(135deg,#e0447a,#7c3aed);
}
.img-layer-1{transform:rotate(-6deg) scale(.96);opacity:.35;filter:blur(2px);z-index:1;}
.img-layer-2{transform:rotate(4deg) scale(.98);opacity:.25;filter:blur(1px);z-index:2;background:linear-gradient(135deg,#ff8a3d,#e0447a);}

.img-main-frame{
  position:relative;z-index:3;border-radius:20px;overflow:hidden;
  transform:rotate(-2deg);
  box-shadow:0 40px 80px -20px rgba(224,68,122,.35), 0 0 0 1px rgba(0,0,0,.06);
  transition:transform .5s ease;
}
.feat-mockup:hover .img-main-frame{transform:rotate(0deg) scale(1.02);}
/*
.feat-screen-img{
  width:100%;height:440px;object-fit:cover;display:block;
}*/
.feat-screen-img{
  width:100%;
  height:420px;
  overflow:hidden;
  display:block;
  padding:0;
  margin:0;
  border:0;
  background:linear-gradient(135deg,#ff3b7f 0%,#ff5b6e 50%,#ff9a3c 100%);
}

.feat-screen-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  margin:0;
  padding:0;
  border:0;
}
.img-placeholder-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);font-family:'JetBrains Mono',monospace;font-size:14px;text-align:center;padding:20px;
}

/* floating glassmorphism stat badges over the image */
.float-badge{
  position:absolute;z-index:4;padding:12px 16px;border-radius:14px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(12px);
  box-shadow:0 16px 34px -12px rgba(0,0,0,.25);
  display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(14px) scale(.9);
}
.feat-mockup.reveal .float-badge{animation:badgeFloatIn .6s cubic-bezier(.34,1.56,.64,1) forwards, badgeIdle 3.4s ease-in-out infinite 1.2s;}
@keyframes badgeFloatIn{to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes badgeIdle{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px) scale(1);}}

.badge-1{top:-18px;right:-16px;animation-delay:.6s, 1.2s;}
.badge-2{bottom:24px;left:-24px;animation-delay:.85s, 1.6s;}

.float-badge-icon{
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;color: green;
}
.badge-1 .float-badge-icon{background:rgba(74,222,128,.18);}
.badge-2 .float-badge-icon{background:rgba(96,165,250,.18);}
.float-badge-num{font-size:15px;font-weight:800;color:#241a1f;}
.float-badge-txt{font-size:9.5px;color:#8a7a80;}

/* mini UI illustration inside the mockup screen */
.ui-mock{position:absolute;inset:24px;display:flex;flex-direction:column;gap:14px;}
.ui-row{display:flex;gap:14px;}
.ui-card{
  border-radius:10px;
  opacity:0;transform:translateY(12px);
}
.feat-mockup.reveal .ui-card{animation:uiCardIn .5s ease forwards;}
@keyframes uiCardIn{to{opacity:1;transform:translateY(0);}}

.ui-sidebar{
  width:64px;background:rgba(0,0,0,.18);
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 0;
}
.ui-nav-dot{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:13px;}
.ui-nav-dot.active{background:#fff;}

.ui-main{
  flex:1;background:rgba(255,255,255,.12);padding:16px;
  display:flex;flex-direction:column;gap:12px;
}
.ui-bar-lg{height:16px;width:55%;background:rgba(255,255,255,.35);border-radius:4px;}
.ui-bar-sm{height:9px;width:38%;background:rgba(255,255,255,.2);border-radius:4px;}
.ui-pill-row{display:flex;gap:8px;margin-top:auto;}
.ui-pill{padding:5px 12px;border-radius:20px;font-size:9px;font-family:'JetBrains Mono',monospace;color:#fff;}
.ui-pill.green{background:rgba(74,222,128,.35);}
.ui-pill.blue{background:rgba(96,165,250,.35);}

.ui-stat-row{display:flex;gap:12px;}
.ui-stat-box{
  flex:1;background:rgba(255,255,255,.14);border-radius:10px;padding:12px 14px;
  display:flex;flex-direction:column;gap:6px;
}
.ui-stat-icon{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;}
.ui-stat-box:nth-child(1) .ui-stat-icon{background:rgba(74,222,128,.3);}
.ui-stat-box:nth-child(2) .ui-stat-icon{background:rgba(96,165,250,.3);}
.ui-stat-box:nth-child(3) .ui-stat-icon{background:rgba(250,204,21,.3);}
.ui-stat-num{font-size:15px;font-weight:800;color:#fff;}
.ui-stat-txt{font-size:8px;color:rgba(255,255,255,.6);}

.ui-chart-card{height:100px;background:rgba(255,255,255,.12);border-radius:10px;padding:14px;}
.ui-chart{display:flex;align-items:flex-end;gap:7px;height:100%;}
.ui-chart span{flex:1;border-radius:3px 3px 0 0;}
.ui-chart span:nth-child(1){background:rgba(96,165,250,.5);}
.ui-chart span:nth-child(2){background:rgba(74,222,128,.5);}
.ui-chart span:nth-child(3){background:rgba(250,204,21,.5);}
.ui-chart span:nth-child(4){background:#fff;}
.ui-chart span:nth-child(5){background:rgba(96,165,250,.5);}
.ui-chart span:nth-child(6){background:rgba(74,222,128,.5);}

/* right — content */
.feat-content{}
.feat-content > *{opacity:0;transform:translateY(16px);}
.feat-content.reveal > *{animation:fadeUp .55s ease forwards;}
.feat-content.reveal .feat-label{animation-delay:.1s;}
.feat-content.reveal .feat-tag{animation-delay:.25s;}
.feat-content.reveal .feat-title{animation-delay:.4s;}
.feat-content.reveal .feat-problem{animation-delay:.55s;}
.feat-content.reveal .feat-stats{animation-delay:.7s;}
.feat-content.reveal .feat-btn{animation-delay:.9s;}

.feat-label{
  display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:24px;margin-bottom:22px;
  background:rgba(224,68,122,.1);border:1px solid rgba(224,68,122,.28);
  font-size:11.5px;font-weight:700;letter-spacing:2px;color:#ff8a3d;
}
.feat-label::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff8a3d;animation:blinkDot 1.4s ease-in-out infinite;}

.feat-tag{font-family:'poppins-local',monospace;font-size:11px;color:maroon;margin-bottom:10px;letter-spacing:.5px;}
.feat-title{font-size:32px;font-weight:800;color:#241a1f;line-height:1.3;margin-bottom:16px;}

.feat-problem{
  font-size:14.5px;color:#7a6a70;line-height:1.75;margin-bottom:32px;
  padding-left:16px;border-left:2px solid rgba(255,138,61,.5);
}
.feat-problem b{color:#241a1f;}

.feat-stats{display:flex;gap:0;margin-bottom:34px;}
.feat-stat{flex:1;padding-right:20px;}
.feat-stat + .feat-stat{padding-left:20px;border-left:1px solid rgba(0,0,0,.08);}
.feat-stat-num{font-size:29px;font-weight:900;color:#241a1f;}.feat-stat-num .accent{
  background:linear-gradient(90deg,#e0447a,#ff8a3d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.feat-stat-label{font-size:13.5px;color: maroon;margin-top:4px;line-height:1.4;}


.feat-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:14px 30px;
    border-radius:50px;
    font-size:14.5px;
    font-weight:600;
    font-family:inherit;
    color:#fff;
    background:linear-gradient(135deg,#e0447a,#ff8a3d);
    box-shadow:0 14px 32px -10px rgba(224,68,122,.5);
    text-decoration:none;
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;

    border:none !important;
    outline:none !important;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
}

.feat-btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform .5s ease;
}
.feat-btn:hover::before{transform:translateX(100%);}
.feat-btn:hover{transform:translateY(-3px);box-shadow:0 20px 42px -10px rgba(224,68,122,.65);}

@keyframes blinkDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* =========================================
   CASE STUDY POPUP
========================================= */

/* =========================================
   CASE STUDY FULL SCREEN - PREMIUM DESIGN
   NO SEPARATE BACKGROUND COLOR
========================================= */

/* BUTTON */
.feat-btn{
    border:none !important;
    outline:none !important;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    font-family:inherit;
}


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

.case-study-overlay{
    position:fixed;
    inset:0;
    z-index:99999;

    /* No separate background */
    background:transparent;
    backdrop-filter:none;

    overflow-y:auto;
    overflow-x:hidden;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.case-study-overlay.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


/* =========================================
   FULL PAGE
========================================= */

.case-study-page{
    position:relative;

    width:100%;
    min-height:100vh;

    /* Existing page style blend */
    background:
        radial-gradient(circle at 12% 15%, rgba(224,68,122,.12), transparent 28%),
        radial-gradient(circle at 88% 20%, rgba(255,138,61,.12), transparent 30%),
        radial-gradient(circle at 80% 85%, rgba(168,85,247,.08), transparent 25%),
        #fffaf7;

    transform:translateY(100%);
    transition:transform .7s cubic-bezier(.16,1,.3,1);

    padding:0 0 100px;
}

.case-study-overlay.active .case-study-page{
    transform:translateY(0);
}


/* =========================================
   CLOSE BUTTON
========================================= */

.case-study-close{
    position:fixed;
    top:25px;
    right:30px;

    width:52px;
    height:52px;

    z-index:100001;

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

    border:none;
    outline:none;

    border-radius:50%;

    background:rgba(255,255,255,.9);
    backdrop-filter:blur(12px);

    color:#241a1f;

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

    cursor:pointer;

    box-shadow:
        0 15px 40px rgba(0,0,0,.12),
        0 0 0 1px rgba(224,68,122,.08);

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

.case-study-close:hover{
    transform:rotate(90deg) scale(1.08);
    color:#e0447a;

    box-shadow:
        0 20px 45px rgba(224,68,122,.22),
        0 0 0 1px rgba(224,68,122,.2);
}


/* =========================================
   MAIN CONTENT
========================================= */

.case-study-content{
    position:relative;

    max-width:1180px;

    margin:0 auto;

    padding:110px 50px 80px;
}


/* =========================================
   TOP LABEL
========================================= */

.case-study-label{
    position:relative;

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

    padding:9px 18px;

    margin-bottom:22px;

    border-radius:50px;

    background:rgba(224,68,122,.07);

    border:1px solid rgba(224,68,122,.16);

    color:#e0447a;

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

    letter-spacing:2px;
}

.case-study-label::before{
    content:"";

    width:7px;
    height:7px;

    margin-right:9px;

    border-radius:50%;

    background:#ff8a3d;

    box-shadow:0 0 12px rgba(255,138,61,.7);

    animation:caseStudyPulse 1.8s ease-in-out infinite;
}

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

    50%{
        transform:scale(.65);
        opacity:.5;
    }
}


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

.case-study-content h2{
    max-width:750px;

    font-size:clamp(42px,5vw,68px);
    font-weight:850;

    line-height:1.08;

    letter-spacing:-2px;

    color:#241a1f;

    margin:0 0 24px;
}

.case-study-content > p:first-of-type{
    max-width:680px;

    font-size:17px;

    line-height:1.9;

    color:#76676e;

    margin-bottom:45px;
}


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

.case-study-image{
    position:relative;

    width:100%;

    height:520px;

    margin:20px 0 85px;

    padding:10px;

    border-radius:30px;

    overflow:hidden;

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

    box-shadow:
        0 40px 90px rgba(224,68,122,.16),
        0 0 0 1px rgba(255,255,255,.7);

    transform:rotate(-1deg);

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

.case-study-image::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            rgba(224,68,122,.12),
            transparent 45%,
            rgba(255,138,61,.08)
        );
}

.case-study-image:hover{
    transform:rotate(0deg) translateY(-8px);

    box-shadow:
        0 55px 110px rgba(224,68,122,.24),
        0 0 0 1px rgba(224,68,122,.08);
}

.case-study-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;

    border-radius:22px;
}


/* =========================================
   SECTION HEADINGS
========================================= */

.case-study-content h3{
    position:relative;

    font-size:clamp(28px,3vw,40px);

    font-weight:800;

    color:#241a1f;

    line-height:1.2;

    margin:75px 0 18px;

    padding-left:24px;
}

.case-study-content h3::before{
    content:"";

    position:absolute;

    left:0;
    top:8px;

    width:5px;
    height:38px;

    border-radius:10px;

    background:linear-gradient(
        180deg,
        #e0447a,
        #ff8a3d
    );

    box-shadow:0 0 18px rgba(224,68,122,.25);
}


/* TEXT BELOW HEADINGS */

.case-study-content h3 + p{
    max-width:850px;

    padding:25px 30px;

    border-radius:18px;

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

    border:1px solid rgba(224,68,122,.07);

    box-shadow:0 15px 45px rgba(0,0,0,.025);

    color:#76676e;

    font-size:15.5px;

    line-height:1.9;

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

.case-study-content h3 + p:hover{
    transform:translateX(8px);

    box-shadow:0 20px 50px rgba(224,68,122,.08);
}


/* =========================================
   RESULT SECTION
========================================= */

.case-study-result{
    position:relative;

    display:grid;

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

    gap:0;

    margin-top:90px;

    padding:50px 35px;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,.48)
        );

    border:1px solid rgba(224,68,122,.1);

    box-shadow:
        0 30px 80px rgba(224,68,122,.1);
}

.case-study-result::before{
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    top:-100px;
    right:-80px;

    border-radius:50%;

    background:rgba(255,138,61,.08);

    filter:blur(30px);

    pointer-events:none;
}

.case-study-result > div{
    position:relative;
    z-index:1;

    text-align:center;

    padding:18px 30px;
}

.case-study-result > div + div{
    border-left:1px solid rgba(0,0,0,.08);
}

.case-study-result strong{
    display:block;

    font-size:clamp(32px,4vw,48px);

    font-weight:900;

    letter-spacing:-1px;

    background:
        linear-gradient(
            90deg,
            #e0447a,
            #ff8a3d
        );

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

    color:transparent;
}

.case-study-result span{
    display:block;

    margin-top:8px;

    color:maroon;

    font-size:13px;

    font-weight:500;
}
@media(max-width:600px){

    /* =================================
       CASE STUDY POPUP - MOBILE
    ================================= */

    .case-study-page{
        padding-bottom:50px;
    }

    .case-study-content{
        padding:85px 20px 50px;
    }

    .case-study-close{
        top:15px;
        right:15px;
        width:46px;
        height:46px;
        font-size:28px;
    }

    .case-study-content h2{
        font-size:36px;
        letter-spacing:-1px;
    }

    .case-study-content > p:first-of-type{
        font-size:14px;
    }

    .case-study-image{
        height:280px;
        padding:6px;
        margin-bottom:55px;
        border-radius:22px;
    }

    .case-study-image img{
        border-radius:17px;
    }

    .case-study-content h3{
        font-size:27px;
        margin-top:55px;
        padding-left:18px;
    }

    .case-study-content h3::before{
        width:4px;
        height:30px;
        top:4px;
    }

    .case-study-content h3 + p{
        padding:20px;
        font-size:14px;
        line-height:1.8;
    }

    .case-study-result{
        grid-template-columns:1fr;
        margin-top:65px;
        padding:25px;
    }

    .case-study-result > div{
        padding:22px 10px;
    }

    .case-study-result > div + div{
        border-left:none;
        border-top:1px solid rgba(0,0,0,.08);
    }


    /* =================================
       FEATURED CASE STUDY - MOBILE
       TEXT FIRST → PHOTO SECOND
    ================================= */

    .feat-section{
        padding:55px 20px 60px;
    }

    .feat-inner{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:32px;
    }


    /* TEXT FIRST */

    .feat-content{
        order:1;
        width:100%;
        text-align:left;
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
    }

    .feat-content > *{
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        animation:none !important;
    }

    .feat-label{
        margin-bottom:18px;
    }

    .feat-title{
        font-size:24px;
        line-height:1.3;
        margin-bottom:16px;
    }

    .feat-problem{
        font-size:14px;
        line-height:1.7;
        margin-bottom:25px;
    }

    .feat-stats{
        flex-wrap:wrap;
        gap:16px;
        margin-bottom:28px;
    }

    .feat-stat{
        flex:1 1 40%;
        padding:0 !important;
        border:none !important;
    }

    .feat-stat-num{
        font-size:25px;
    }

    .feat-stat-label{
        font-size:12.5px;
    }


    /* PHOTO SECOND */

    .feat-mockup{
        order:2;
        width:100%;
        margin:0;
    }

    .feat-screen-img{
        width:100%;
        height:280px;
    }

    .feat-screen-img img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
        display:block;
    }


    /* FLOATING BADGES */

    .float-badge{
        padding:9px 12px;
        border-radius:12px;
    }

    .badge-1{
        top:-12px;
        right:-5px;
    }

    .badge-2{
        bottom:15px;
        left:-5px;
    }

}

/* =========================================
   CASE STUDY BEAUTY UPGRADE
   ADD THIS BELOW YOUR CURRENT CSS
========================================= */


/* =========================================
   PAGE DECORATION
========================================= */

.case-study-page{
    isolation:isolate;
}

.case-study-page::before,
.case-study-page::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}

.case-study-page::before{
    width:420px;
    height:420px;
    top:80px;
    left:-180px;

    background:
        radial-gradient(
            circle,
            rgba(224,68,122,.16),
            rgba(224,68,122,.04) 45%,
            transparent 72%
        );

    filter:blur(10px);

    animation:caseGlowMove 10s ease-in-out infinite;
}

.case-study-page::after{
    width:500px;
    height:500px;
    right:-220px;
    bottom:80px;

    background:
        radial-gradient(
            circle,
            rgba(255,138,61,.18),
            rgba(255,138,61,.04) 45%,
            transparent 72%
        );

    filter:blur(15px);

    animation:caseGlowMove2 12s ease-in-out infinite;
}

@keyframes caseGlowMove{
    0%,100%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(45px,30px) scale(1.15);
    }
}

@keyframes caseGlowMove2{
    0%,100%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(-40px,-35px) scale(1.12);
    }
}


/* CONTENT ABOVE DECORATION */

.case-study-content{
    z-index:1;
}


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

.case-study-label{
    box-shadow:
        0 10px 30px rgba(224,68,122,.08);

    animation:caseLabelFloat 3s ease-in-out infinite;
}

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

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


/* TITLE GRADIENT UNDERLINE */

.case-study-content h2{
    position:relative;
}

.case-study-content h2::after{
    content:"";

    display:block;

    width:110px;
    height:5px;

    margin-top:24px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #e0447a,
            #ff8a3d,
            #ffcf7a
        );

    box-shadow:
        0 6px 18px rgba(224,68,122,.25);
}


/* HERO DESCRIPTION */

.case-study-content > p:first-of-type{
    position:relative;

    padding-left:22px;
}

.case-study-content > p:first-of-type::before{
    content:"";

    position:absolute;

    left:0;
    top:7px;
    bottom:7px;

    width:3px;

    border-radius:20px;

    background:
        linear-gradient(
            180deg,
            #e0447a,
            #ff8a3d
        );
}


/* =========================================
   HERO IMAGE PREMIUM FRAME
========================================= */

.case-study-image{
    padding:12px;

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

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.8),
            rgba(255,255,255,.25)
        );

    box-shadow:
        0 50px 100px rgba(224,68,122,.17),
        0 20px 50px rgba(255,138,61,.10),
        inset 0 0 0 1px rgba(224,68,122,.05);
}


/* IMAGE TOP SHINE */

.case-study-image::after{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    z-index:3;

    pointer-events:none;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:skewX(-20deg);
}


/* SHINE ON HOVER */

.case-study-image:hover::after{
    animation:caseImageShine 1s ease forwards;
}

@keyframes caseImageShine{
    from{
        left:-120%;
    }

    to{
        left:150%;
    }
}


/* IMAGE ZOOM */

.case-study-image img{
    transition:transform .8s cubic-bezier(.16,1,.3,1);
}

.case-study-image:hover img{
    transform:scale(1.04);
}


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

.case-study-content h3{
    letter-spacing:-.8px;
}

.case-study-content h3::after{
    content:"";

    position:absolute;

    left:24px;
    bottom:-8px;

    width:50px;
    height:2px;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            #e0447a,
            #ff8a3d
        );

    opacity:.6;
}


/* =========================================
   TEXT CARDS PREMIUM LOOK
========================================= */

.case-study-content h3 + p{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,.35)
        );

    backdrop-filter:blur(12px);

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

    border-left:
        3px solid rgba(224,68,122,.35);

    box-shadow:
        0 18px 50px rgba(50,25,35,.035);
}

.case-study-content h3 + p::before{
    content:"";

    position:absolute;

    width:130px;
    height:130px;

    top:-75px;
    right:-55px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,138,61,.10),
            transparent 70%
        );
}


/* =========================================
   RESULT SECTION PREMIUM
========================================= */

.case-study-result{
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.88),
            rgba(255,250,247,.65)
        );

    box-shadow:
        0 35px 90px rgba(224,68,122,.12),
        0 10px 35px rgba(255,138,61,.06);

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


/* RESULT TOP LINE */

.case-study-result::after{
    content:"";

    position:absolute;

    top:0;
    left:10%;
    right:10%;

    height:3px;

    border-radius:0 0 20px 20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e0447a,
            #ff8a3d,
            transparent
        );
}


/* STAT HOVER */

.case-study-result > div{
    border-radius:20px;

    transition:
        transform .35s ease,
        background .35s ease;
}

.case-study-result > div:hover{
    transform:translateY(-8px);

    background:
        rgba(255,255,255,.65);
}

.case-study-result strong{
    text-shadow:
        0 10px 25px rgba(224,68,122,.10);
}


/* =========================================
   SMOOTHER OPEN ANIMATION
========================================= */

.case-study-overlay.active
.case-study-content{
    animation:caseContentReveal .8s .2s both;
}

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

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


/* =========================================
   MOBILE BEAUTY FIX
========================================= */

@media(max-width:600px){

    .case-study-page::before{
        width:260px;
        height:260px;
        left:-140px;
    }

    .case-study-page::after{
        width:280px;
        height:280px;
        right:-150px;
    }

    .case-study-label{
        font-size:9px;
        letter-spacing:1.5px;
        padding:8px 14px;
    }

    .case-study-content h2::after{
        width:75px;
        height:4px;
        margin-top:18px;
    }

    .case-study-image{
        padding:7px;
    }

    .case-study-content h3::after{
        left:18px;
    }

    .case-study-result > div:hover{
        transform:none;
    }
}











/*============================================================
                Elshaddai hero page section-1
============================================================*/
/* =====================================================
   EGS CULTURE SECTION - UNIQUE STYLES
===================================================== */

.egsCultureX-section,
.egsCultureX-section * {
    box-sizing: border-box;
}

.egsCultureX-section {
    position: relative;
    min-height: 100vh;
    background: #000;
    overflow: hidden;
    padding: 90px 5% 60px;
    font-family: 'Poppins', sans-serif;
}


/* =====================================================
   BACKGROUND GLOW
===================================================== */

.egsCultureX-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1100px;
    height: 1100px;
    margin: -550px 0 0 -550px;

    background: conic-gradient(
        from 0deg,
        rgba(224, 48, 111, 0.12),
        rgba(255, 138, 61, 0.12),
        transparent 30%,
        transparent 70%,
        rgba(224, 48, 111, 0.10)
    );

    pointer-events: none;
    animation: egsCultureXRotateGlow 32s linear infinite;
}

@keyframes egsCultureXRotateGlow {
    to {
        transform: rotate(360deg);
    }
}


/* =====================================================
   BACKGROUND BLOBS
===================================================== */

.egsCultureX-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.egsCultureX-blobOne {
    width: 480px;
    height: 480px;
    top: -160px;
    right: -140px;

    background: radial-gradient(
        circle,
        rgba(255, 92, 138, 0.22),
        transparent 70%
    );

    animation: egsCultureXDriftOne 15s ease-in-out infinite;
}

.egsCultureX-blobTwo {
    width: 440px;
    height: 440px;
    bottom: -180px;
    left: -140px;

    background: radial-gradient(
        circle,
        rgba(255, 138, 61, 0.20),
        transparent 70%
    );

    animation: egsCultureXDriftTwo 18s ease-in-out infinite;
}

@keyframes egsCultureXDriftOne {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-40px, 30px) scale(1.1);
    }
}

@keyframes egsCultureXDriftTwo {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(35px, -30px) scale(1.08);
    }
}


/* =====================================================
   PARTICLES
===================================================== */

.egsCultureX-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: egsCultureXTwinkle 3s ease-in-out infinite;
}

.egsCultureX-particlePink {
    background: linear-gradient(
        135deg,
        #ff5c8a,
        #e0306f
    );
}

.egsCultureX-particleOrange {
    background: #ff8a3d;
}

.egsCultureX-particleOne {
    width: 4px;
    height: 4px;
    top: 15%;
    left: 12%;
}

.egsCultureX-particleTwo {
    width: 3px;
    height: 3px;
    top: 65%;
    left: 8%;
    animation-delay: .5s;
}

.egsCultureX-particleThree {
    width: 5px;
    height: 5px;
    top: 22%;
    right: 10%;
    animation-delay: .2s;
}

.egsCultureX-particleFour {
    width: 3px;
    height: 3px;
    top: 45%;
    right: 18%;
    animation-delay: .8s;
}

.egsCultureX-particleFive {
    width: 4px;
    height: 4px;
    bottom: 20%;
    left: 30%;
    animation-delay: .3s;
}

.egsCultureX-particleSix {
    width: 6px;
    height: 6px;
    bottom: 12%;
    right: 30%;
    animation-delay: .6s;
}

.egsCultureX-particleSeven {
    width: 3px;
    height: 3px;
    top: 8%;
    left: 45%;
    animation-delay: .1s;
}

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

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


/* =====================================================
   FLOATING SPHERES
===================================================== */

.egsCultureX-sphere {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 30% 26%,
            rgba(255,255,255,.9),
            transparent 44%
        ),
        linear-gradient(
            135deg,
            #e0306f,
            #ff8a3d
        );

    box-shadow:
        inset -6px -8px 16px rgba(0,0,0,.3),
        0 20px 40px -12px rgba(224,48,111,.4);

    animation: egsCultureXOrbFloat 9s ease-in-out infinite;
}

.egsCultureX-sphereOne {
    width: 70px;
    height: 70px;
    top: 8%;
    right: 6%;
}

.egsCultureX-sphereTwo {
    width: 34px;
    height: 34px;
    bottom: 10%;
    left: 4%;
    animation-delay: 1s;
}

.egsCultureX-sphereThree {
    width: 20px;
    height: 20px;
    top: 55%;
    left: 8%;
    opacity: .85;
    animation-delay: .5s;
}

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

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


/* =====================================================
   DOODLES
===================================================== */

.egsCultureX-doodle {
    position: absolute;
    width: 34px;
    stroke: rgba(255,255,255,.35);
    fill: none;
    stroke-width: 1.6;
    pointer-events: none;

    animation: egsCultureXDoodleFloat 5s ease-in-out infinite;
}

.egsCultureX-doodlePink {
    stroke: rgba(255,92,138,.5);
}

.egsCultureX-doodleOrange {
    stroke: rgba(255,138,61,.5);
}

.egsCultureX-doodleOne {
    top: 6%;
    left: 35%;
}

.egsCultureX-doodleTwo {
    top: 10%;
    right: 26%;
    width: 44px;
}

.egsCultureX-doodleThree {
    top: 30%;
    left: 6%;
    width: 30px;
}

.egsCultureX-doodleFour {
    top: 52%;
    right: 10%;
    width: 36px;
}

.egsCultureX-doodleFive {
    bottom: 14%;
    left: 22%;
    width: 30px;
}

.egsCultureX-doodleSix {
    top: 18%;
    right: 5%;
    width: 26px;
}

.egsCultureX-doodleSeven {
    bottom: 8%;
    right: 32%;
    width: 28px;
}

@keyframes egsCultureXDoodleFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(4deg);
    }
}


/* =====================================================
   MAIN CONTAINER
===================================================== */

.egsCultureX-container {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;

    min-height: calc(100vh - 150px);

    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.egsCultureX-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 18px 9px 14px;
    margin-bottom: 30px;

    border-radius: 999px;

    background: rgba(255,92,138,.08);
    border: 1px solid rgba(255,92,138,.3);
    margin-top: 25px;
    color: #ff8fb3;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
}

.egsCultureX-tagDot {
    width: 6px;
    height: 6px;
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #ff5c8a,
        #ff8a3d
    );
}

.egsCultureX-title {
    margin: 0 0 26px;
    color: #fff;
    font-size: clamp(38px, 5.2vw, 64px);
    font-weight: 800;
    line-height: 1.12;
    text-shadow: none;   /* global h1 text-shadow-ah override pannunga */
}

.egsCultureX-smallTitle {
    display: block;
    font-size: .5em;
    font-weight: 700;
    opacity: .9;
}

.egsCultureX-gradientText {
    background: linear-gradient(100deg,#e0306f,#ff5c7a,#ff8a3d);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}

.egsCultureX-description {
    max-width: 480px;
    margin: 0 0 40px;

    color: #a3a3ab;
    font-size: 16px;
    line-height: 1.75;
}


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

.egsCultureX-buttonGroup {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.egsCultureX-primaryButton {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 8px 8px 8px 26px;

    border: none;
    border-radius: 999px;

    background: #000;
    color: #fff;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    box-shadow: 0 18px 40px -14px rgba(255,92,138,.35);

    transition: .25s ease;
}

.egsCultureX-primaryButton:hover {
    transform: translateY(-3px);

    box-shadow:
        0 22px 46px -12px
        rgba(255,92,138,.5);
}

.egsCultureX-arrowCircle {
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #e0306f,
        #ff8a3d
    );
}

.egsCultureX-arrowCircle svg {
    width: 16px;
    height: 16px;
}

.egsCultureX-outlineButton {
    padding: 16px 28px;

    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.18);

    background: rgba(255,255,255,.04);
    color: #fff;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
    transition: .25s ease;
}

.egsCultureX-outlineButton:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.4);
}


/* =====================================================
   RIGHT VISUAL
===================================================== */

.egsCultureX-visualArea {
    position: relative;
    height: 480px;
}


/* PHOTO CARD */

.egsCultureX-photoCard {
    position: absolute;
    top: 0;
    left: 1%;

    width: 390px;
    height: 440px;

    overflow: hidden;
    border-radius: 20px;

    border: 1.5px solid rgba(255,92,138,.35);

    box-shadow:
        0 0 50px -10px rgba(255,92,138,.3),
        0 25px 55px -20px rgba(0,0,0,.85);

    animation: egsCultureXCardFloat 7s ease-in-out infinite;
}

.egsCultureX-photoCard img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    animation: egsCultureXImageZoom 6s ease-in-out infinite;
}

.egsCultureX-photoCard::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        transparent 55%,
        rgba(0,0,0,.75) 100%
    );
}

.egsCultureX-photoLabel {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 2;

    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.egsCultureX-photoLabel span {
    display: block;
    margin-top: 2px;

    color: #c7c2d1;
    font-size: 10.5px;
    font-weight: 500;
}

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

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

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

    50% {
        transform: scale(1.06);
    }
}


/* =====================================================
   STAT CARD
===================================================== */

.egsCultureX-statCard {
    position: absolute;
    top: 6%;
    right: 4%;

    z-index: 3;

    padding: 16px 20px;

    border-radius: 16px;

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

    backdrop-filter: blur(10px);

    box-shadow:
        0 20px 40px -16px
        rgba(0,0,0,.6);

    animation: egsCultureXCardFloat 8s ease-in-out infinite;
}

.egsCultureX-statRow {
    display: flex;
    align-items: baseline;
    gap: 8px;

    padding: 6px 0;
}

.egsCultureX-statRow:not(:last-child) {
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.egsCultureX-statNumber {
    font-size: 19px;
    font-weight: 800;
}

.egsCultureX-pinkNumber {
    color: #ff8fb3;
}

.egsCultureX-orangeNumber {
    color: #ffb87a;
}

.egsCultureX-purpleNumber {
    color: #ff9fc0;
}

.egsCultureX-statLabel {
    color: #a3a3ab;
    font-size: 11.5px;
}


/* =====================================================
   VALUE CARD
===================================================== */

.egsCultureX-valueCard {
    position: absolute;
    bottom: 4%;
    right: 8%;

    z-index: 3;

    width: 210px;
    padding: 16px 18px;

    border-radius: 16px;

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

    backdrop-filter: blur(10px);

    box-shadow:
        0 20px 40px -16px
        rgba(0,0,0,.6);

    animation: egsCultureXCardFloat 6.5s ease-in-out infinite;
}

.egsCultureX-valueLabel {
    margin-bottom: 6px;

    color: #8a8792;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.egsCultureX-valueText {
    min-height: 22px;

    color: #fff;
    font-size: 16px;
    font-weight: 700;

    transition: opacity .4s ease;
}


/* =========================================================
   EGS CULTURE BUTTON NAVIGATION
========================================================= */

html {
    scroll-behavior: smooth;
}


/* BUTTON BASE */

.egsCultureX-primaryButton,
.egsCultureX-outlineButton {
    position: relative;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}


/* PRIMARY BUTTON */

.egsCultureX-primaryButton {
    border: none;
    outline: none;
    cursor: pointer;
}


/* OUTLINE BUTTON */

.egsCultureX-outlineButton {
    border: 1.5px solid rgba(255,255,255,.18);
    outline: none;
    cursor: pointer;
}


/* HOVER */

.egsCultureX-primaryButton:focus,
.egsCultureX-outlineButton:focus {
    outline: none;
}


/* =========================================================
   SCROLL TARGET OFFSET
========================================================= */

/*
   If your header is fixed,
   target section won't hide underneath it.
*/

#egsTeamSection,
#egsCrWrapper {
    scroll-margin-top: 90px;
}
/* =====================================================
   TABLET RESPONSIVE
===================================================== */

@media (max-width: 960px) {

    .egsCultureX-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .egsCultureX-description {
        margin-left: auto;
        margin-right: auto;
    }

    .egsCultureX-buttonGroup {
        justify-content: center;
    }

    .egsCultureX-visualArea {
        height: 390px;
        margin-top: 20px;
    }

    .egsCultureX-photoCard {
        left: 50%;
        transform: translateX(-50%);
        width: 320px;    /* ✅ NEW — container-ku match aaga reduce pannunga */
        height: 380px;
    }

    .egsCultureX-statCard,
    .egsCultureX-valueCard {
        display: none;
    }

    .egsCultureX-doodle {
        opacity: .5;
    }
}


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

@media (max-width: 576px) {

    .egsCultureX-section {
        min-height: auto;
        padding: 65px 20px 40px;
    }

    .egsCultureX-container {
        min-height: auto;
        gap: 20px;
    }

    .egsCultureX-title {
        font-size: 38px;
        line-height: 1.18;
    }

    .egsCultureX-description {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 28px;
    }

    .egsCultureX-tag {
        font-size: 10px;
        margin-bottom: 20px;
    }

    .egsCultureX-buttonGroup {
        gap: 12px;
    }

    .egsCultureX-primaryButton {
        padding-left: 20px;
        font-size: 13px;
    }

    .egsCultureX-outlineButton {
        padding: 13px 20px;
        font-size: 13px;
    }

    .egsCultureX-visualArea {
        height: 340px;
        margin-top: 10px;
    }

    .egsCultureX-photoCard {
        width: 220px;
        height: 290px;
        left: 50%;
    }

    .egsCultureX-sphereOne {
        width: 45px;
        height: 45px;
    }

    .egsCultureX-sphereTwo,
    .egsCultureX-sphereThree {
        display: none;
    }

    .egsCultureX-doodle {
        display: none;
    }
}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

    .egsCultureX-glow,
    .egsCultureX-blob,
    .egsCultureX-particle,
    .egsCultureX-sphere,
    .egsCultureX-doodle,
    .egsCultureX-photoCard,
    .egsCultureX-photoCard img,
    .egsCultureX-statCard,
    .egsCultureX-valueCard {
        animation: none !important;
    }
}


/* =========================================================
   EGS CULTURE
   MOBILE — FINAL COMPACT + PREMIUM
========================================================= */

@media (max-width: 768px) {

    .egsCultureX-section {
        width: 100% !important;
        min-height: auto !important;
        padding: 48px 14px 35px !important;
        overflow: hidden !important;
    }

    .egsCultureX-container {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 40px !important;
        align-items: center !important;

        text-align: center !important;
    }


    /* =====================================================
       TOP TAG
    ===================================================== */

    .egsCultureX-tag {
        margin-bottom: 30px !important;
        margin-top: 25px;

        padding: 6px 12px !important;

        font-size: 8px !important;
        line-height: 1 !important;

        letter-spacing: .08em !important;
        transform: translateY(18px) !important;
    }


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

    .egsCultureX-title {
        width: 100% !important;
        max-width: 430px !important;

        margin: 0 auto 14px !important;

        font-size: clamp(28px, 8vw, 40px) !important;

        line-height: 1.08 !important;

        letter-spacing: -.7px !important;
    }

    .egsCultureX-smallTitle {
        font-size: .45em !important;
        line-height: 1.1 !important;
    }


    /* =====================================================
       DESCRIPTION
    ===================================================== */

    .egsCultureX-description {
        width: 100% !important;
        max-width: 390px !important;

        margin: 0 auto 18px !important;

        font-size: 11.5px !important;
        line-height: 1.55 !important;
    }


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

    .egsCultureX-buttonGroup {
        width: 100% !important;

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

        gap: 8px !important;

        flex-wrap: nowrap !important;
    }

    .egsCultureX-primaryButton {
        min-height: 38px !important;

        padding: 4px 5px 4px 13px !important;

        font-size: 10px !important;

        gap: 6px !important;
    }

    .egsCultureX-arrowCircle {
        width: 29px !important;
        height: 29px !important;
    }

    .egsCultureX-arrowCircle svg {
        width: 12px !important;
        height: 12px !important;
    }

    .egsCultureX-outlineButton {
        min-height: 38px !important;

        padding: 9px 13px !important;

        font-size: 10px !important;
    }


    /* =====================================================
       VISUAL AREA
    ===================================================== */

    .egsCultureX-visualArea {
        position: relative !important;

        width: 100% !important;
        max-width: 390px !important;

        height: 330px !important;

        margin: 2px auto 0 !important;
    }


    /* =====================================================
       MAIN IMAGE
    ===================================================== */

    .egsCultureX-photoCard {
        position: absolute !important;

        top: 0 !important;
        left: 50% !important;

        width: 205px !important;
        height: 275px !important;

        transform: translateX(-50%) !important;

        border-radius: 16px !important;

        z-index: 2 !important;
    }

    .egsCultureX-photoLabel {
        left: 10px !important;
        bottom: 10px !important;

        font-size: 9px !important;
    }

    .egsCultureX-photoLabel span {
        font-size: 7.5px !important;
    }


    /* =====================================================
       STAT CARD
    ===================================================== */

    .egsCultureX-statCard {
        display: block !important;

        position: absolute !important;

        top: 18px !important;

        left: calc(50% + 52px) !important;
        right: auto !important;

        width: 145px !important;

        padding: 8px 10px !important;

        border-radius: 13px !important;

        background: rgba(25,20,24,.94) !important;

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

        backdrop-filter: blur(12px) !important;

        z-index: 5 !important;

        animation: none !important;
    }

    .egsCultureX-statRow {
        gap: 5px !important;
        padding: 5px 0 !important;
    }

    .egsCultureX-statNumber {
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .egsCultureX-statLabel {
        font-size: 7.5px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }


    /* =====================================================
       CORE VALUE CARD
    ===================================================== */

    .egsCultureX-valueCard {
        display: block !important;

        position: absolute !important;

        left: calc(50% + 5px) !important;
        right: auto !important;

        bottom: 3px !important;

        width: 155px !important;

        padding: 9px 11px !important;

        border-radius: 13px !important;

        background: rgba(25,20,24,.95) !important;

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

        backdrop-filter: blur(12px) !important;

        z-index: 6 !important;

        animation: none !important;
    }

    .egsCultureX-valueLabel {
        margin-bottom: 4px !important;

        font-size: 7px !important;
        letter-spacing: .08em !important;
    }

    .egsCultureX-valueText {
        min-height: 18px !important;

        font-size: 11px !important;
        line-height: 1.25 !important;
    }


    /* =====================================================
       SPHERE
    ===================================================== */

    .egsCultureX-sphereOne {
        display: block !important;

        width: 32px !important;
        height: 32px !important;

        top: -8px !important;
        right: 3% !important;

        z-index: 8 !important;
    }

    .egsCultureX-sphereTwo,
    .egsCultureX-sphereThree {
        display: none !important;
    }


    /* =====================================================
       DOODLES
    ===================================================== */

    .egsCultureX-doodle {
        display: none !important;
    }


    /* =====================================================
       PARTICLES
    ===================================================== */

    .egsCultureX-particleFour,
    .egsCultureX-particleFive,
    .egsCultureX-particleSix,
    .egsCultureX-particleSeven {
        display: none !important;
    }
}


/* =========================================================
   480px AND BELOW
========================================================= */

@media (max-width: 480px) {

    .egsCultureX-section {
        padding: 42px 11px 30px !important;
    }

    .egsCultureX-container {
        gap: 18px !important;
    }

    .egsCultureX-title {
        font-size: clamp(27px, 8.5vw, 35px) !important;
    }

    .egsCultureX-description {
        max-width: 330px !important;
        font-size: 10.5px !important;
    }

    .egsCultureX-visualArea {
        height: 315px !important;
    }

    .egsCultureX-photoCard {
        width: 190px !important;
        height: 260px !important;
    }

    .egsCultureX-statCard {
        left: calc(50% + 45px) !important;
        width: 135px !important;
    }

    .egsCultureX-statNumber {
        font-size: 12px !important;
    }

    .egsCultureX-statLabel {
        font-size: 7px !important;
    }

    .egsCultureX-valueCard {
        left: calc(50% + 0px) !important;
        width: 145px !important;
    }

    .egsCultureX-valueText {
        font-size: 10px !important;
    }
}


/* =========================================================
   360px AND BELOW
========================================================= */

@media (max-width: 360px) {

    .egsCultureX-section {
        padding: 38px 9px 27px !important;
    }

    .egsCultureX-title {
        font-size: 26px !important;
        line-height: 1.06 !important;
    }

    .egsCultureX-description {
        max-width: 290px !important;
        font-size: 10px !important;
    }

    .egsCultureX-buttonGroup {
        gap: 6px !important;
    }

    .egsCultureX-primaryButton {
        font-size: 9px !important;
        padding-left: 11px !important;
    }

    .egsCultureX-outlineButton {
        font-size: 9px !important;
        padding: 8px 11px !important;
    }

    .egsCultureX-arrowCircle {
        width: 27px !important;
        height: 27px !important;
    }

    .egsCultureX-visualArea {
        height: 295px !important;
    }

    .egsCultureX-photoCard {
        width: 175px !important;
        height: 240px !important;
    }

    .egsCultureX-statCard {
        left: calc(50% + 38px) !important;
        width: 125px !important;
        padding: 7px 8px !important;
    }

    .egsCultureX-statNumber {
        font-size: 11px !important;
    }

    .egsCultureX-statLabel {
        font-size: 6.5px !important;
    }

    .egsCultureX-valueCard {
        left: calc(50% - 2px) !important;
        width: 135px !important;
        padding: 8px 9px !important;
    }

    .egsCultureX-valueLabel {
        font-size: 6px !important;
    }

    .egsCultureX-valueText {
        font-size: 9.5px !important;
    }
}







/*============================================================
                Elshddai Core values section-2
============================================================*/

/* ============================================================
   ELSHADDAI CORE VALUES SECTION
============================================================ */

.elshaddaicorevalues-section * {
  box-sizing: border-box;
}

.elshaddaicorevalues-section {
  position: relative;
  background: #fdf3f1;
  padding: 70px 24px 80px;
  overflow: hidden;
}

/* ============================================================
   AURORA BACKGROUND
============================================================ */

.elshaddaicorevalues-aurora-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 70% at 50% 30%,
    rgba(255, 220, 235, 0.5),
    transparent 70%
  );
}

.elshaddaicorevalues-aurora-ribbon {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  filter: blur(30px);
}

.elshaddaicorevalues-aurora-ribbon .elshaddaicorevalues-band {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.elshaddaicorevalues-aurora-ribbon
.elshaddaicorevalues-band.elshaddaicorevalues-band1 {
  width: 900px;
  height: 260px;
  top: 8%;
  left: -15%;
  background: linear-gradient(
    90deg,
    transparent,
    #ff9ec4,
    #ffc1dc,
    transparent
  );
  animation: elshaddaicorevalues-ribbonFlow1 9s ease-in-out infinite;
}

.elshaddaicorevalues-aurora-ribbon
.elshaddaicorevalues-band.elshaddaicorevalues-band2 {
  width: 900px;
  height: 220px;
  top: 38%;
  right: -20%;
  background: linear-gradient(
    90deg,
    transparent,
    #ffb3d1,
    #ffd6e6,
    transparent
  );
  animation: elshaddaicorevalues-ribbonFlow2 11s ease-in-out infinite;
}

.elshaddaicorevalues-aurora-ribbon
.elshaddaicorevalues-band.elshaddaicorevalues-band3 {
  width: 820px;
  height: 240px;
  bottom: 6%;
  left: -10%;
  background: linear-gradient(
    90deg,
    transparent,
    #ff8fbd,
    #ffc9dd,
    transparent
  );
  animation: elshaddaicorevalues-ribbonFlow1 13s ease-in-out infinite reverse;
}

@keyframes elshaddaicorevalues-ribbonFlow1 {
  0%,
  100% {
    transform: translateX(0) rotate(-6deg) scaleY(1);
  }

  50% {
    transform: translateX(60px) rotate(-2deg) scaleY(1.2);
  }
}

@keyframes elshaddaicorevalues-ribbonFlow2 {
  0%,
  100% {
    transform: translateX(0) rotate(5deg) scaleY(1);
  }

  50% {
    transform: translateX(-60px) rotate(1deg) scaleY(1.15);
  }
}

/* ============================================================
   HOLOGRAPHIC SHINE
============================================================ */

.elshaddaicorevalues-holo-shine {
  position: absolute;
  top: -20%;
  left: -40%;
  width: 45%;
  height: 140%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.85) 45%,
    rgba(255, 220, 235, 0.6) 55%,
    transparent 100%
  );
  transform: rotate(12deg);
  mix-blend-mode: soft-light;
  animation: elshaddaicorevalues-holoShine 5s ease-in-out infinite;
}

@keyframes elshaddaicorevalues-holoShine {
  0% {
    left: -40%;
  }

  50% {
    left: 115%;
  }

  100% {
    left: -40%;
  }
}

.elshaddaicorevalues-holo-shine2 {
  position: absolute;
  top: -20%;
  left: -30%;
  width: 12%;
  height: 140%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.9) 50%,
    transparent 100%
  );
  transform: rotate(12deg);
  mix-blend-mode: soft-light;
  animation: elshaddaicorevalues-holoShine2 3.5s ease-in-out infinite 1.2s;
}

@keyframes elshaddaicorevalues-holoShine2 {
  0% {
    left: -30%;
  }

  50% {
    left: 110%;
  }

  100% {
    left: -30%;
  }
}

/* ============================================================
   STARS
============================================================ */

.elshaddaicorevalues-star {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation-name: elshaddaicorevalues-starTwinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.elshaddaicorevalues-star.elshaddaicorevalues-pink-star {
  background: radial-gradient(
    circle at 30% 30%,
    #ffffff,
    #ff8fb8 55%,
    #ff5c9a 100%
  ) !important;
}

.elshaddaicorevalues-star.elshaddaicorevalues-orange-star {
  background: radial-gradient(
    circle at 30% 30%,
    #ffffff,
    #ffaecb 55%,
    #ff5c9a 100%
  ) !important;
}

@keyframes elshaddaicorevalues-starTwinkle {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(0.6);
  }

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

/* ============================================================
   MAIN CONTAINER
============================================================ */

.elshaddaicorevalues-container {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.elshaddaicorevalues-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 30px;
}

.elshaddaicorevalues-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e0306f;
  box-shadow: 0 6px 18px -8px rgba(23, 19, 15, 0.15);
  margin-bottom: 20px;
}

.elshaddaicorevalues-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0306f, #ff8a3d);
  animation: elshaddaicorevalues-pulse 2s ease-in-out infinite;
}

@keyframes elshaddaicorevalues-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.elshaddaicorevalues-heading {
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 38px);
  color: #17130f;
  line-height: 1.25;
  margin: 0 0 16px;
  animation: elshaddaicorevalues-titleReveal 1s ease-out both;
}

@keyframes elshaddaicorevalues-titleReveal {
  from {
    opacity: 0;
    transform: translateY(35px);
  }

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

.elshaddaicorevalues-gradient-text {
  background: linear-gradient(135deg, #e0306f, #ff8a3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* FIXED - PARAGRAPH CLEARLY VISIBLE */
.elshaddaicorevalues-subtitle {
  color: #4a423d;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
}

/* ============================================================
   FLIP CARD ROW
============================================================ */

.elshaddaicorevalues-flip-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 88px;
  max-width: 1040px;
  margin: 70px auto 0;
  perspective: 1400px;
}

.elshaddaicorevalues-flip-card {
  position: relative;
  height: 340px;
  transition: transform 0.3s ease;
  cursor: pointer;
  padding: 3px;
  border-radius: 25px;
}

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

.elshaddaicorevalues-flip-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 26px;
  background: conic-gradient(
    from 0deg,
    #ff5c9a,
    #ffb37a,
    #e8b3ff,
    #ff5c9a
  );
  filter: blur(3px);
  opacity: 0.7;
  animation: elshaddaicorevalues-cardBorderSpin 5s linear infinite;
}

@keyframes elshaddaicorevalues-cardBorderSpin {
  to {
    transform: rotate(360deg);
  }
}

.elshaddaicorevalues-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.4s cubic-bezier(0.45, 0.05, 0.35, 1);
}

.elshaddaicorevalues-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 22px;
  padding: 30px 26px;
  background:
    radial-gradient(
      rgba(224, 48, 111, 0.08) 1px,
      transparent 1.2px
    ) 0 0 / 18px 18px,
    linear-gradient(
      165deg,
      #ffe1ec 0%,
      #fff5f8 60%,
      #ffffff 100%
    );
  box-shadow: 0 20px 44px -20px rgba(255, 92, 154, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.elshaddaicorevalues-flip-card:nth-child(2)
.elshaddaicorevalues-flip-face {
  background:
    radial-gradient(
      rgba(224, 48, 111, 0.08) 1px,
      transparent 1.2px
    ) 0 0 / 18px 18px,
    linear-gradient(
      165deg,
      #ffd6e6 0%,
      #fff0f6 60%,
      #ffffff 100%
    );
}

.elshaddaicorevalues-flip-card:nth-child(3)
.elshaddaicorevalues-flip-face {
  background:
    radial-gradient(
      rgba(224, 48, 111, 0.08) 1px,
      transparent 1.2px
    ) 0 0 / 18px 18px,
    linear-gradient(
      165deg,
      #ffe8f0 0%,
      #fff7fa 60%,
      #ffffff 100%
    );
}

.elshaddaicorevalues-flip-face::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 138, 180, 0.35),
    transparent 70%
  );
  animation: elshaddaicorevalues-cardBlobFloat 6s ease-in-out infinite;
}

@keyframes elshaddaicorevalues-cardBlobFloat {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-10px, 10px) scale(1.15);
  }
}

.elshaddaicorevalues-flip-card:nth-child(2)
.elshaddaicorevalues-flip-face::after {
  background: radial-gradient(
    circle,
    rgba(255, 170, 130, 0.35),
    transparent 70%
  );
}

.elshaddaicorevalues-flip-card:nth-child(3)
.elshaddaicorevalues-flip-face::after {
  background: radial-gradient(
    circle,
    rgba(200, 150, 255, 0.3),
    transparent 70%
  );
}

.elshaddaicorevalues-flip-num,
.elshaddaicorevalues-flip-icon,
.elshaddaicorevalues-flip-title,
.elshaddaicorevalues-flip-desc,
.elshaddaicorevalues-flip-progress {
  position: relative;
  z-index: 1;
}

.elshaddaicorevalues-flip-face::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 2;
  background: linear-gradient(
    90deg,
    #e0306f,
    #ff8a3d,
    #e0306f
  );
  background-size: 200% auto;
  animation: elshaddaicorevalues-barFlow 4s linear infinite;
}

@keyframes elshaddaicorevalues-barFlow {
  to {
    background-position: -200% 0;
  }
}

.elshaddaicorevalues-flip-face.elshaddaicorevalues-back {
  transform: rotateY(180deg);
}

.elshaddaicorevalues-flip-card:hover
.elshaddaicorevalues-flip-face {
  box-shadow: 0 26px 54px -16px rgba(255, 92, 154, 0.45);
}

.elshaddaicorevalues-flip-num {
  font-family: "Poppins";
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(224, 48, 111, 0.55);
  font-weight: 700;
  margin-bottom: 14px;
}

.elshaddaicorevalues-card-spark {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #ff5c9a, #ffb37a);
}

.elshaddaicorevalues-card-spark.elshaddaicorevalues-cs1 {
  width: 5px;
  height: 5px;
  top: 18%;
  right: 22%;
  animation: elshaddaicorevalues-cardSparkTwinkle 2.6s ease-in-out infinite;
}

.elshaddaicorevalues-card-spark.elshaddaicorevalues-cs2 {
  width: 4px;
  height: 4px;
  bottom: 24%;
  right: 14%;
  animation: elshaddaicorevalues-cardSparkTwinkle 3.2s ease-in-out infinite 0.5s;
}

.elshaddaicorevalues-card-spark.elshaddaicorevalues-cs3 {
  width: 3px;
  height: 3px;
  top: 40%;
  right: 30%;
  animation: elshaddaicorevalues-cardSparkTwinkle 2.9s ease-in-out infinite 0.9s;
}

@keyframes elshaddaicorevalues-cardSparkTwinkle {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.6);
  }

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

.elshaddaicorevalues-flip-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #e0306f, #ff8a3d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 14px 26px -10px rgba(224, 48, 111, 0.45);
  animation: elshaddaicorevalues-iconFloat 3.4s ease-in-out infinite;
}

@keyframes elshaddaicorevalues-iconFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-6px) rotate(-4deg);
  }
}

.elshaddaicorevalues-flip-icon::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 20px;
  z-index: -1;
  background: radial-gradient(
    circle,
    rgba(224, 48, 111, 0.35),
    transparent 70%
  );
  animation: elshaddaicorevalues-iconGlow 2.6s ease-in-out infinite;
}

@keyframes elshaddaicorevalues-iconGlow {
  0%,
  100% {
    transform: scale(0.85);
    opacity: 0.5;
  }

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

.elshaddaicorevalues-flip-title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #120f0c;
  margin: 0 0 12px;
  line-height: 1.3;
}

.elshaddaicorevalues-flip-desc {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #4a423d;
  line-height: 1.75;
  margin: 0;
  flex: 1;
  overflow: hidden;
}

.elshaddaicorevalues-flip-progress {
  height: 3px;
  border-radius: 3px;
  background: rgba(23, 19, 15, 0.08);
  overflow: hidden;
  margin-top: 16px;
}

.elshaddaicorevalues-flip-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #e0306f, #ff8a3d);
  border-radius: 3px;
}

.elshaddaicorevalues-flip-progress-bar.elshaddaicorevalues-animate {
  animation: elshaddaicorevalues-fillFlip
    var(--elshaddaicorevalues-flip-ms)
    linear
    forwards;
}

@keyframes elshaddaicorevalues-fillFlip {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

/* ============================================================
   DOTS
============================================================ */

.elshaddaicorevalues-flip-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}

.elshaddaicorevalues-flip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(23, 19, 15, 0.15);
  transition: all 0.3s ease;
}

.elshaddaicorevalues-flip-dot.elshaddaicorevalues-active {
  width: 22px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e0306f, #ff8a3d);
}

/* ============================================================
   TABLET & MOBILE RESPONSIVE
============================================================ */

@media (max-width: 860px) {
  .elshaddaicorevalues-section {
    padding: 80px 20px 90px;
  }

  .elshaddaicorevalues-flip-row {
    grid-template-columns: 1fr;
    gap: 34px;
    max-width: 420px;
  }

  .elshaddaicorevalues-flip-card {
    height: 280px;
  }
}

@media (max-width: 480px) {
  .elshaddaicorevalues-section {
    padding: 65px 15px 75px;
  }

  .elshaddaicorevalues-heading {
    font-size: 28px;
  }

  .elshaddaicorevalues-subtitle {
    font-size: 14px;
    line-height: 1.65;
  }

  .elshaddaicorevalues-tag {
    font-size: 10px;
    padding: 8px 14px;
  }

  .elshaddaicorevalues-flip-row {
    gap: 25px;
    margin-top: 30px;
  }

  .elshaddaicorevalues-flip-card {
    height: 300px;
  }

  .elshaddaicorevalues-flip-face {
    padding: 24px 20px;
  }

  .elshaddaicorevalues-flip-title {
    font-size: 18px;
  }

  .elshaddaicorevalues-flip-desc {
    font-size: 13px;
    line-height: 1.6;
  }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {
  .elshaddaicorevalues-flip-inner {
    transition: none !important;
  }

  .elshaddaicorevalues-flip-progress-bar.elshaddaicorevalues-animate {
    animation: none !important;
  }

  .elshaddaicorevalues-flip-icon,
  .elshaddaicorevalues-flip-icon::after,
  .elshaddaicorevalues-flip-face::before,
  .elshaddaicorevalues-flip-face::after,
  .elshaddaicorevalues-flip-card,
  .elshaddaicorevalues-flip-card::before,
  .elshaddaicorevalues-card-spark,
  .elshaddaicorevalues-dot,
  .elshaddaicorevalues-aurora-ribbon .elshaddaicorevalues-band,
  .elshaddaicorevalues-holo-shine,
  .elshaddaicorevalues-holo-shine2,
  .elshaddaicorevalues-star {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 860px) {
  .elshaddaicorevalues-flip-row {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .elshaddaicorevalues-flip-card {
    height: 280px;
  }
}

@media (max-width: 480px) {
  .elshaddaicorevalues-heading {
    font-size: 28px;
  }

  .elshaddaicorevalues-subtitle {
    font-size: 14px;
  }

  .elshaddaicorevalues-flip-card {
    height: 300px;
  }
}

/*============================================================
        Elshaddai employee engagement section-3
============================================================*/

/* =========================================================
   EGS EMPLOYEE ENGAGEMENT RHYTHM
   FINAL CSS
   UNIQUE PREFIX: egsEng
   DESKTOP + TABLET + MOBILE
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

#egsEngagementRhythmSection,
#egsEngagementRhythmSection *,
#egsEngagementRhythmSection *::before,
#egsEngagementRhythmSection *::after {
  box-sizing: border-box;
}


/* =========================================================
   MAIN SECTION
   ========================================================= */

#egsEngagementRhythmSection {

  --egsEng-bg: #100d18;
  --egsEng-bg2: #17121e;

  --egsEng-white: #ffffff;
  --egsEng-text: #d7d1dc;
  --egsEng-muted: #99919f;

  --egsEng-pink: #ff5c8a;
  --egsEng-pink-light: #ff9ab7;

  --egsEng-orange: #ff8a3d;
  --egsEng-orange-light: #ffad78;

  --egsEng-purple: #b994ff;
  --egsEng-green: #6ee7a0;

  position: relative;

  width: 100%;
  max-width: 100%;

  min-height: 720px;

  padding:
    90px 24px 100px;

  overflow: hidden;

  isolation: isolate;

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 92, 138, .075),
      transparent 27%
    ),
    radial-gradient(
      circle at 88% 22%,
      rgba(255, 138, 61, .065),
      transparent 28%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(185, 148, 255, .045),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      var(--egsEng-bg),
      var(--egsEng-bg2)
    );

  font-family:
    'Poppins',
    sans-serif;

  color: var(--egsEng-white);
}


/* =========================================================
   ANIMATED BACKGROUND ORB 1
   ========================================================= */

#egsEngagementRhythmSection::before {

  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  top: -260px;
  left: -170px;

  z-index: 0;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(255, 92, 138, .20) 0%,
      rgba(255, 92, 138, .075) 35%,
      transparent 72%
    );

  filter: blur(65px);

  opacity: .75;

  animation:
    egsEngBgOrbOne
    16s
    ease-in-out
    infinite;
}


/* =========================================================
   ANIMATED BACKGROUND ORB 2
   ========================================================= */

#egsEngagementRhythmSection::after {

  content: "";

  position: absolute;

  width: 560px;
  height: 560px;

  right: -230px;
  bottom: -300px;

  z-index: 0;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(255, 138, 61, .18) 0%,
      rgba(255, 138, 61, .065) 38%,
      transparent 72%
    );

  filter: blur(70px);

  opacity: .7;

  animation:
    egsEngBgOrbTwo
    19s
    ease-in-out
    infinite;
}


@keyframes egsEngBgOrbOne {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  25% {
    transform:
      translate3d(160px, 90px, 0)
      scale(1.1);
  }

  50% {
    transform:
      translate3d(290px, 210px, 0)
      scale(.92);
  }

  75% {
    transform:
      translate3d(120px, 290px, 0)
      scale(1.08);
  }
}


@keyframes egsEngBgOrbTwo {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  25% {
    transform:
      translate3d(-140px, -80px, 0)
      scale(1.1);
  }

  50% {
    transform:
      translate3d(-290px, -220px, 0)
      scale(.93);
  }

  75% {
    transform:
      translate3d(-100px, -300px, 0)
      scale(1.08);
  }
}


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

#egsEngagementRhythmSection
.egsEngContainer {

  position: relative;

  z-index: 10;

  width: min(
    1180px,
    100%
  );

  margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

#egsEngagementRhythmSection
.egsEngHeader {

  position: relative;

  z-index: 20;

  width: 100%;
  max-width: 760px;

  margin:
    0 auto 32px;

  text-align: center;

  opacity: 1;
  visibility: visible;
}


/* =========================================================
   TAG
   ========================================================= */

#egsEngagementRhythmSection
.egsEngTag {

  display: inline-flex;

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

  gap: 8px;

  min-height: 32px;

  margin-bottom: 17px;

  padding:
    7px 15px;

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

  border-radius: 999px;

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

  color:
    var(--egsEng-pink-light);

  font-size: 15px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: .14em;

  text-transform: uppercase;

  opacity: 1;
}


/* =========================================================
   TAG DOT
   ========================================================= */

#egsEngagementRhythmSection
.egsEngTagDot {

  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--egsEng-pink),
      var(--egsEng-orange)
    );

  box-shadow:
    0 0 10px
    rgba(255,92,138,.65);

  animation:
    egsEngTagPulse
    2.2s
    ease-in-out
    infinite;
}


@keyframes egsEngTagPulse {

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

  50% {
    transform: scale(1.45);
    opacity: .55;
  }
}


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

#egsEngagementRhythmSection
.egsEngHeading {

  position: relative;

  z-index: 20;

  margin:
    0 0 13px;

  color:
    #ffffff;

  font-size:
    clamp(
      28px,
      3.4vw,
      42px
    );

  font-weight: 700;

  line-height: 1.18;

  letter-spacing: -.035em;

  opacity: 1;

  visibility: visible;

  text-shadow:
    0 2px 16px
    rgba(0,0,0,.45);
}


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

#egsEngagementRhythmSection
.egsEngHeading em {

  font-style: normal;

  color:
    var(--egsEng-pink-light);

  background:
    linear-gradient(
      90deg,
      var(--egsEng-pink),
      var(--egsEng-orange)
    );

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

  -webkit-text-fill-color: transparent;

  color: transparent;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

#egsEngagementRhythmSection
.egsEngSubtitle {

  position: relative;

  z-index: 20;

  max-width: 680px;

  margin: 0 auto;

  color:
    var(--egsEng-text);

  font-size: 16px;

  font-weight: 500;

  line-height: 1.75;

  opacity: 1;

  visibility: visible;

  text-shadow:
    0 1px 10px
    rgba(0,0,0,.4);
}


/* =========================================================
   LEGEND
   ========================================================= */

#egsEngagementRhythmSection
.egsEngLegend {

  position: relative;

  z-index: 20;

  display: flex;

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

  flex-wrap: wrap;

  gap:
    12px 28px;

  margin:
    36px 0 48px;

  opacity: 1;

  visibility: visible;
}


#egsEngagementRhythmSection
.egsEngLegendItem {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color:
    #aaa2b1;

  font-family:
    'Poppins',
    monospace;

  font-size: 15px;

  letter-spacing: .05em;

  white-space: nowrap;

  opacity: 1;

  visibility: visible;

  margin-bottom: 20px;
}


#egsEngagementRhythmSection
.egsEngLegendDot {

  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;
}


#egsEngagementRhythmSection
.egsEngLegendLive {
  background: var(--egsEng-green);
  box-shadow:
    0 0 9px
    rgba(110,231,160,.6);
}


#egsEngagementRhythmSection
.egsEngLegendFast {
  background: var(--egsEng-pink);
  box-shadow:
    0 0 9px
    rgba(255,92,138,.6);
}


#egsEngagementRhythmSection
.egsEngLegendMedium {
  background: var(--egsEng-orange);
  box-shadow:
    0 0 9px
    rgba(255,138,61,.6);
}


#egsEngagementRhythmSection
.egsEngLegendSlow {
  background: var(--egsEng-purple);
  box-shadow:
    0 0 9px
    rgba(185,148,255,.6);
}


/* =========================================================
   TIMELINE STAGE
   ========================================================= */

#egsEngagementRhythmSection
.egsEngPulseStage {

  position: relative;

  z-index: 30;

  width: 100%;

  min-height: 190px;

  padding-top: 20px;

  overflow: visible;

  opacity: 1;

  visibility: visible;
}


/* =========================================================
   TIMELINE LINE
   ========================================================= */

#egsEngagementRhythmSection
.egsEngPulseLine {

  position: absolute;

  top: 69px;

  left: 0;
  right: 0;

  height: 3px;

  z-index: 1;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #6ee7a0 0%,
      #6ee7a0 8%,
      #ff5c8a 22%,
      #ff5c8a 38%,
      #ff8a3d 52%,
      #ff8a3d 68%,
      #b994ff 94%,
      #b994ff 100%
    );

  box-shadow:
    0 0 12px
    rgba(255,138,61,.20);

  pointer-events: none;
  display: none !important;

  display: block !important;

  visibility: visible !important;
  
  opacity: 1 !important;
}


/* line shine */

#egsEngagementRhythmSection
.egsEngPulseLine::after {

  content: "";

  position: absolute;

  top: 0;
  left: -20%;

  width: 20%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.8),
      transparent
    );

  animation:
    egsEngLineShine
    3.5s
    linear
    infinite;

  pointer-events: none;
  display: none !important;
}


@keyframes egsEngLineShine {

  from {
    left: -20%;
  }

  to {
    left: 120%;
  }
}


/* =========================================================
   MOVING BALL
   ========================================================= */

#egsEngagementRhythmSection
.egsEngSignalDot {

  position: absolute;

  top: 62.5px;

  left: 0;

  width: 16px;
  height: 16px;

  z-index: 50;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 30% 25%,
      #ffffff 0%,
      #ffd9c5 13%,
      #ff9a62 35%,
      #ff6b70 65%,
      #ff5c8a 100%
    );

  box-shadow:
    0 0 8px
    2px
    rgba(255,255,255,.35),

    0 0 15px
    4px
    rgba(255,138,61,.65),

    0 0 30px
    8px
    rgba(255,92,138,.25);

  transform:
    translateX(-50%);

  transition:
    left
    1.15s
    cubic-bezier(
      .45,
      0,
      .25,
      1
    );

  pointer-events: none;

  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;
}


/* =========================================================
   BALL POP
   ========================================================= */

#egsEngagementRhythmSection
.egsEngSignalDot.egsEngSignalPop {

  animation:
    egsEngSignalPop
    .48s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    );
}


@keyframes egsEngSignalPop {

  0% {
    transform:
      translateX(-50%)
      scale(1);
  }

  45% {
    transform:
      translateX(-50%)
      scale(1.5);
  }

  100% {
    transform:
      translateX(-50%)
      scale(1);
  }
}

#egsEngagementRhythmSection .egsEngNodeTitle {
    font-size: 16px !important;
  }

#egsEngagementRhythmSection .egsEngNodeIcon {
    width: 50px !important;
    height: 50px !important;

    font-size: 21px !important;

    border-radius: 14px !important;
  }

/* =========================================================
   NODE ROW
   ========================================================= */

#egsEngagementRhythmSection
.egsEngPulseRow {

  position: relative;

  z-index: 10;

  display: grid;

  grid-template-columns:
    repeat(
      7,
      minmax(0,1fr)
    );

  gap: 8px;

  width: 100%;

  opacity: 1;

  visibility: visible;
}


/* =========================================================
   NODE
   ========================================================= */

#egsEngagementRhythmSection
.egsEngPulseNode {

  position: relative;

  z-index: 20;

  display: flex;

  flex-direction: column;

  align-items: center;

  min-width: 0;

  padding: 0;

  border: 0;

  outline: none;

  background: transparent;

  cursor: pointer;

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

  animation:
    egsEngNodeAppear
    .5s
    ease
    both;
}


#egsEngagementRhythmSection
.egsEngPulseNode:nth-child(1) {
  animation-delay: .05s;
}

#egsEngagementRhythmSection
.egsEngPulseNode:nth-child(2) {
  animation-delay: .10s;
}

#egsEngagementRhythmSection
.egsEngPulseNode:nth-child(3) {
  animation-delay: .15s;
}

#egsEngagementRhythmSection
.egsEngPulseNode:nth-child(4) {
  animation-delay: .20s;
}

#egsEngagementRhythmSection
.egsEngPulseNode:nth-child(5) {
  animation-delay: .25s;
}

#egsEngagementRhythmSection
.egsEngPulseNode:nth-child(6) {
  animation-delay: .30s;
}

#egsEngagementRhythmSection
.egsEngPulseNode:nth-child(7) {
  animation-delay: .35s;
}


@keyframes egsEngNodeAppear {

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

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


/* =========================================================
   NODE DOT WRAPPER
   ========================================================= */

#egsEngagementRhythmSection
.egsEngNodeDotWrap {

  position: relative;

  display: flex;

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

  width: 100px;
  height: 100px;
}


/* =========================================================
   NODE DOT
   ========================================================= */

#egsEngagementRhythmSection
.egsEngNodeDot {

  position: relative;

  z-index: 25;

  width: 20px;
  height: 20px;

  border:
    3px solid
    var(--egsEng-bg);

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--egsEng-pink),
      var(--egsEng-orange)
    );

  box-shadow:
    0 0 0 1px
    rgba(255,255,255,.08);

  transition:
    transform
    .4s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    ),

    box-shadow
    .35s
    ease;
}


#egsEngagementRhythmSection
.egsEngPulseNode.egsEngNodeActive
.egsEngNodeDot {

  transform:
    scale(1.45);

  box-shadow:

    0 0 0 2px
    var(--egsEng-bg),

    0 0 12px
    3px
    rgba(255,138,61,.65),

    0 0 28px
    7px
    rgba(255,92,138,.28);
}


/* =========================================================
   NODE RING
   ========================================================= */

#egsEngagementRhythmSection
.egsEngNodeRing {

  position: absolute;

  width: 23px;
  height: 23px;

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

  border-radius: 50%;

  animation:
    egsEngNodeRipple
    2.5s
    ease-out
    infinite;

  pointer-events: none;
}


@keyframes egsEngNodeRipple {

  0% {
    transform: scale(.9);
    opacity: .75;
  }

  100% {
    transform: scale(2.15);
    opacity: 0;
  }
}


/* =========================================================
   NODE ICON
   ========================================================= */

#egsEngagementRhythmSection
.egsEngNodeIcon {

  position: absolute;

  top: -4px;

  z-index: 28;

  display: flex;

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

  width: 52px;
  height: 52px;

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

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.025)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.05);

  font-size: 24px;

  transform:
    translateY(-58px);

  transition:
    transform
    .4s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    ),

    background
    .3s
    ease,

    border-color
    .3s
    ease,

    box-shadow
    .3s
    ease;
}


#egsEngagementRhythmSection
.egsEngPulseNode.egsEngNodeActive
.egsEngNodeIcon {

  transform:
    translateY(-58px)
    scale(1.22);

  border-color:
    rgba(255,255,255,.12);

  background:
    linear-gradient(
      135deg,
      var(--egsEng-pink),
      var(--egsEng-orange)
    );

  box-shadow:
    0 10px 28px
    rgba(255,92,138,.20),

    0 0 20px
    rgba(255,138,61,.20);
}


/* =========================================================
   NODE FREQUENCY
   ========================================================= */

#egsEngagementRhythmSection
.egsEngNodeFrequency {

  position: relative;

  z-index: 40;

  display: block;

  margin-top: 12px;

  color:
    #91899d;

  font-family: 'poppins-local';

  font-size: 12.5px;

  line-height: 1.3;

  letter-spacing: .08em;

  text-align: center;

  text-transform: uppercase;

  opacity: 1;

  visibility: visible;

  transition:
    color
    .3s
    ease;
}


#egsEngagementRhythmSection
.egsEngPulseNode.egsEngNodeActive
.egsEngNodeFrequency {

  color:
    var(--egsEng-pink-light);
}


/* =========================================================
   NODE TITLE
   ========================================================= */

#egsEngagementRhythmSection
.egsEngNodeTitle {

  position: relative;

  z-index: 40;

  display: block;

  width: 100%;
  max-width: 145px;

  margin-top: 6px;

  color:
    #d1cbd6;

  font-size: 16px;

  font-weight: 600;

  line-height: 1.35;

  text-align: center;

  opacity: 1;

  visibility: visible;

  transition:
    color
    .3s
    ease;
}


#egsEngagementRhythmSection
.egsEngPulseNode.egsEngNodeActive
.egsEngNodeTitle {

  color:
    #ffffff;

  text-shadow:
    0 2px 12px
    rgba(0,0,0,.55);
}


/* =========================================================
   FOCUS
   ========================================================= */

#egsEngagementRhythmSection
.egsEngPulseNode:focus-visible
.egsEngNodeIcon {

  outline:
    2px solid
    var(--egsEng-pink);

  outline-offset: 4px;
}


/* =========================================================
   DETAIL PANEL
   ========================================================= */

#egsEngagementRhythmSection
.egsEngDetailPanel {

  position: relative;

  z-index: 60;

  width:
    min(
      700px,
      100%
    );

  min-height: 285px;

  margin:
    55px auto 0;

  padding:
    38px
    35px
    32px;

  overflow: hidden;

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

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  box-shadow:
    0 25px 70px
    rgba(0,0,0,.25),

    inset 0 1px 0
    rgba(255,255,255,.04);

  text-align: center;

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(12px)
    scale(.98);

  transition:
    opacity
    .4s
    ease,

    visibility
    .4s
    ease,

    transform
    .45s
    ease;
}


#egsEngagementRhythmSection
.egsEngDetailPanel.egsEngPanelVisible {

  opacity: 1;

  visibility: visible;

  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   DETAIL COUNTER
   ========================================================= */

#egsEngagementRhythmSection
.egsEngDetailCounter {

  position: absolute;

  top: 18px;
  right: 22px;

  z-index: 65;

  color:
    #807789;

  font-family:
    'Space Mono',
    monospace;

  font-size: 12px;

  letter-spacing: .05em;
}


#egsEngagementRhythmSection
.egsEngDetailCounter span {

  color:
    var(--egsEng-pink-light);

  font-weight: 700;
}


/* =========================================================
   DETAIL ICON
   ========================================================= */

#egsEngagementRhythmSection
.egsEngDetailIconWrap {

  position: relative;

  width: 82px;
  height: 82px;

  margin:
    0 auto 20px;
}


#egsEngagementRhythmSection
.egsEngDetailIconRing {

  position: absolute;

  inset: -6px;

  border-radius: 50%;

  background:
    conic-gradient(
      from 0deg,
      var(--egsEng-pink),
      var(--egsEng-orange),
      transparent 45%,
      transparent 62%,
      var(--egsEng-pink)
    );

  animation:
    egsEngDetailRingRotate
    5s
    linear
    infinite;
}


@keyframes egsEngDetailRingRotate {

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


#egsEngagementRhythmSection
.egsEngDetailIcon {

  position: relative;

  z-index: 2;

  display: flex;

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

  width: 82px;
  height: 82px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--egsEng-pink),
      var(--egsEng-orange)
    );

  box-shadow:
    0 12px 30px
    rgba(255,92,138,.20);

  font-size: 32px;
}


/* =========================================================
   DETAIL TEXT
   ========================================================= */

#egsEngagementRhythmSection
.egsEngDetailFrequency {

  position: relative;

  z-index: 65;

  margin-bottom: 8px;

  color:
    var(--egsEng-pink-light);

  font-family: 'Poppins';

  font-size: 10,5px;

  letter-spacing: .14em;

  text-transform: uppercase;
}


#egsEngagementRhythmSection
.egsEngDetailTitle {

  position: relative;

  z-index: 65;

  margin:
    0 0 11px;

  color:
    #ffffff;

  font-size: 22px;

  font-weight: 700;

  line-height: 1.3;
}


#egsEngagementRhythmSection
.egsEngDetailDescription {

  position: relative;

  z-index: 65;

  max-width: 590px;

  margin: 0 auto;

  color:
    #bcb5c5;

  font-size: 12.5px;

  line-height: 1.75;
}


/* =========================================================
   DETAIL PROGRESS
   ========================================================= */

#egsEngagementRhythmSection
.egsEngDetailProgress {

  width: 210px;
  height: 2px;

  margin:
    24px auto 0;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255,255,255,.08);
}


#egsEngagementRhythmSection
.egsEngDetailProgressBar {

  width: 0;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--egsEng-pink),
      var(--egsEng-orange)
    );
}


#egsEngagementRhythmSection
.egsEngDetailProgressBar.egsEngProgressAnimate {

  animation:
    egsEngProgressFill
    var(--egsEngAutoMs)
    linear
    forwards;
}


@keyframes egsEngProgressFill {

  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}


/* =========================================================
   FLOATING BACKGROUND PARTICLES
   ========================================================= */

#egsEngagementRhythmSection
.egsEngBgParticle {

  position: absolute;

  z-index: 2;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background:
    var(--egsEng-orange);

  box-shadow:
    0 0 10px
    rgba(255,138,61,.7);

  opacity: .3;

  pointer-events: none;

  animation:
    egsEngParticleFloat
    8s
    ease-in-out
    infinite;
}


@keyframes egsEngParticleFloat {

  0% {
    transform:
      translate3d(0,35px,0)
      scale(.6);

    opacity: .08;
  }

  50% {
    transform:
      translate3d(25px,-45px,0)
      scale(1.2);

    opacity: .55;
  }

  100% {
    transform:
      translate3d(-15px,-110px,0)
      scale(.4);

    opacity: 0;
  }
}


/* =========================================================
   DECORATIVE STARS
   ========================================================= */

#egsEngagementRhythmSection
.egsEngStar {

  position: absolute;

  z-index: 2;

  display: block;

  border-radius: 50%;

  pointer-events: none;

  animation:
    egsEngStarPulse
    3s
    ease-in-out
    infinite;
}


@keyframes egsEngStarPulse {

  0%,
  100% {
    transform: scale(.7);
    opacity: .2;
  }

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


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  #egsEngagementRhythmSection {

    padding:
      80px
      20px
      90px;
  }


  #egsEngagementRhythmSection
  .egsEngPulseRow {

    gap: 4px;
  }


  #egsEngagementRhythmSection
  .egsEngNodeTitle {

    max-width: 120px;

    font-size: 10px;
  }


  #egsEngagementRhythmSection
  .egsEngNodeIcon {

    width: 48px;
    height: 48px;

    font-size: 19px;
  }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 850px) {

  #egsEngagementRhythmSection {

    padding:
      70px
      16px
      80px;
  }


  #egsEngagementRhythmSection
  .egsEngHeading {

    font-size: 32px;
  }


  #egsEngagementRhythmSection
  .egsEngSubtitle {

    font-size: 12.5px;
  }


  #egsEngagementRhythmSection
  .egsEngNodeDotWrap {

    width: 82px;
    height: 82px;
  }


  #egsEngagementRhythmSection
  .egsEngNodeTitle {

    max-width: 105px;

    font-size: 9.5px;
  }


  #egsEngagementRhythmSection
  .egsEngNodeFrequency {

    font-size: 7.5px;
  }


  #egsEngagementRhythmSection
  .egsEngNodeIcon {

    width: 44px;
    height: 44px;

    font-size: 17px;

    transform:
      translateY(-49px);
  }


  #egsEngagementRhythmSection
  .egsEngPulseNode.egsEngNodeActive
  .egsEngNodeIcon {

    transform:
      translateY(-49px)
      scale(1.18);
  }

}

/* =========================================================
   EGS ENGAGEMENT RHYTHM
   MOBILE RESPONSIVE — FINAL
   ========================================================= */

@media (max-width: 768px) {

  /* MAIN SECTION */
  #egsEngagementRhythmSection {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height: auto !important;

    padding: 55px 14px 65px !important;

    overflow: hidden !important;
  }


  /* CONTAINER */
  #egsEngagementRhythmSection
  .egsEngContainer {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
  }


  /* =====================================================
     HEADER
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngHeader {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto 28px !important;

    text-align: center !important;
  }


  #egsEngagementRhythmSection
  .egsEngHeading {

    width: 100% !important;

    margin-bottom: 12px !important;

    font-size: clamp(
      25px,
      8vw,
      32px
    ) !important;

    line-height: 1.2 !important;

    letter-spacing: -.025em !important;

    color: #fff !important;

    opacity: 1 !important;

    visibility: visible !important;
  }


  #egsEngagementRhythmSection
  .egsEngSubtitle {

    width: 100% !important;

    max-width: 520px !important;

    margin: 0 auto !important;

    padding: 0 5px !important;

    font-size: 11px !important;

    line-height: 1.7 !important;

    color: #c8c1cd !important;

    opacity: 1 !important;

    visibility: visible !important;
  }


  /* =====================================================
     LEGEND
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngLegend {

    display: flex !important;

    width: 100% !important;

    max-width: 360px !important;

    margin: 25px auto 32px !important;

    padding: 0 !important;

    justify-content: center !important;

    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 10px 15px !important;
  }


  #egsEngagementRhythmSection
  .egsEngLegendItem {

    font-size: 7px !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;
  }


  /* =====================================================
     TIMELINE AREA
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngPulseStage {

    width: 100% !important;

    min-height: auto !important;

    height: auto !important;

    padding: 0 !important;

    overflow: visible !important;
  }


  /* Hide desktop horizontal line */
  #egsEngagementRhythmSection
  .egsEngPulseLine {

    display: none !important;
  }


  /* Hide moving ball on mobile */
  #egsEngagementRhythmSection
  .egsEngSignalDot {

    display: none !important;
  }


  /* =====================================================
     MOBILE NODE GRID
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngPulseRow {

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;

    max-width: 520px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    gap: 38px 10px !important;

    align-items: start !important;
  }


  /* =====================================================
     NODE
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngPulseNode {

    position: relative !important;

    display: flex !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 125px !important;

    margin: 0 !important;

    padding: 0 !important;

    align-items: center !important;

    justify-content: flex-start !important;

    flex-direction: column !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;
  }


  /* =====================================================
     ICON
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngNodeIcon {

    position: absolute !important;

    top: 0 !important;

    left: 50% !important;

    width: 44px !important;

    height: 44px !important;

    margin: 0 !important;

    transform:
      translateX(-50%)
      translateY(0) !important;

    border-radius: 13px !important;

    font-size: 18px !important;

    z-index: 20 !important;
  }


  #egsEngagementRhythmSection
  .egsEngPulseNode.egsEngNodeActive
  .egsEngNodeIcon {

    transform:
      translateX(-50%)
      scale(1.12) !important;
  }


  /* =====================================================
     DOT
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngNodeDotWrap {

    position: relative !important;

    width: 100% !important;

    height: 65px !important;

    margin: 0 !important;

    display: flex !important;

    align-items: flex-end !important;

    justify-content: center !important;
  }


  #egsEngagementRhythmSection
  .egsEngNodeDot {

    width: 17px !important;

    height: 17px !important;

    border-width: 2px !important;

    z-index: 25 !important;
  }


  #egsEngagementRhythmSection
  .egsEngPulseNode.egsEngNodeActive
  .egsEngNodeDot {

    transform: scale(1.3) !important;
  }


  /* =====================================================
     FREQUENCY
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngNodeFrequency {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin: 8px 0 0 !important;

    padding: 0 !important;

    color: #9c94a5 !important;

    font-size: 7px !important;

    line-height: 1.3 !important;

    letter-spacing: .06em !important;

    text-align: center !important;

    opacity: 1 !important;

    visibility: visible !important;

    z-index: 30 !important;
  }


  #egsEngagementRhythmSection
  .egsEngPulseNode.egsEngNodeActive
  .egsEngNodeFrequency {

    color: #ff91b0 !important;
  }


  /* =====================================================
     TITLE
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngNodeTitle {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    max-width: 145px !important;

    margin: 5px auto 0 !important;

    padding: 0 3px !important;

    color: #d4ced8 !important;

    font-size: 9.5px !important;

    font-weight: 600 !important;

    line-height: 1.35 !important;

    text-align: center !important;

    white-space: normal !important;

    overflow-wrap: break-word !important;

    opacity: 1 !important;

    visibility: visible !important;

    z-index: 30 !important;
  }


  #egsEngagementRhythmSection
  .egsEngPulseNode.egsEngNodeActive
  .egsEngNodeTitle {

    color: #ffffff !important;

    text-shadow:
      0 2px 10px
      rgba(0,0,0,.55) !important;
  }


  /* =====================================================
     DETAIL CARD
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngDetailPanel {

    position: relative !important;

    width: 100% !important;

    max-width: 520px !important;

    min-height: 250px !important;

    margin: 40px auto 0 !important;

    padding:
      30px
      16px
      25px !important;

    border-radius: 18px !important;

    overflow: hidden !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

    z-index: 50 !important;
  }


  /* =====================================================
     DETAIL COUNTER
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngDetailCounter {

    top: 13px !important;

    right: 15px !important;

    font-size: 7.5px !important;
  }


  /* =====================================================
     DETAIL ICON
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngDetailIconWrap {

    width: 65px !important;

    height: 65px !important;

    margin:
      0 auto 17px !important;
  }


  #egsEngagementRhythmSection
  .egsEngDetailIcon {

    width: 65px !important;

    height: 65px !important;

    font-size: 26px !important;
  }


  /* =====================================================
     DETAIL TEXT
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngDetailFrequency {

    margin-bottom: 7px !important;

    font-size: 7.5px !important;

    letter-spacing: .12em !important;

    color: #ff91b0 !important;
  }


  #egsEngagementRhythmSection
  .egsEngDetailTitle {

    margin-bottom: 9px !important;

    font-size: 18px !important;

    line-height: 1.3 !important;

    color: #fff !important;
  }


  #egsEngagementRhythmSection
  .egsEngDetailDescription {

    width: 100% !important;

    max-width: 440px !important;

    margin: 0 auto !important;

    font-size: 10.5px !important;

    line-height: 1.7 !important;

    color: #bbb4c3 !important;
  }


  /* =====================================================
     PROGRESS
     ===================================================== */

  #egsEngagementRhythmSection
  .egsEngDetailProgress {

    width: 150px !important;

    height: 2px !important;

    margin:
      19px auto 0 !important;
  }
}


/* =========================================================
   SMALL MOBILE — 480px
   ========================================================= */

@media (max-width: 480px) {

  #egsEngagementRhythmSection {

    padding:
      48px
      10px
      58px !important;
  }


  #egsEngagementRhythmSection
  .egsEngHeading {

    font-size: 24px !important;
  }


  #egsEngagementRhythmSection
  .egsEngSubtitle {

    font-size: 10.5px !important;

    line-height: 1.65 !important;
  }


  #egsEngagementRhythmSection
  .egsEngLegend {

    max-width: 330px !important;

    gap:
      8px 11px !important;

    margin:
      23px auto 28px !important;
  }


  #egsEngagementRhythmSection
  .egsEngLegendItem {

    font-size: 6.5px !important;
  }


  #egsEngagementRhythmSection
  .egsEngPulseRow {

    max-width: 430px !important;

    gap:
      32px 5px !important;
  }


  #egsEngagementRhythmSection
  .egsEngPulseNode {

    min-height: 115px !important;
  }


  #egsEngagementRhythmSection
  .egsEngNodeIcon {

    width: 40px !important;

    height: 40px !important;

    border-radius: 11px !important;

    font-size: 16px !important;
  }


  #egsEngagementRhythmSection
  .egsEngNodeTitle {

    max-width: 125px !important;

    font-size: 8.5px !important;
  }


  #egsEngagementRhythmSection
  .egsEngNodeFrequency {

    font-size: 6.3px !important;
  }


  #egsEngagementRhythmSection
  .egsEngDetailPanel {

    margin-top: 34px !important;

    min-height: 245px !important;

    padding:
      28px
      13px
      23px !important;
  }


  #egsEngagementRhythmSection
  .egsEngDetailTitle {

    font-size: 17px !important;
  }


  #egsEngagementRhythmSection
  .egsEngDetailDescription {

    font-size: 10px !important;
  }
}


/* =========================================================
   VERY SMALL MOBILE — 360px
   ========================================================= */

@media (max-width: 360px) {

  #egsEngagementRhythmSection {

    padding:
      42px
      8px
      52px !important;
  }


  #egsEngagementRhythmSection
  .egsEngHeading {

    font-size: 21px !important;
  }


  #egsEngagementRhythmSection
  .egsEngSubtitle {

    font-size: 13.5px !important;
  }


  #egsEngagementRhythmSection
  .egsEngLegendItem {

    font-size: 14px !important;
  }


  #egsEngagementRhythmSection
  .egsEngPulseRow {

    gap:
      28px 3px !important;
  }


  #egsEngagementRhythmSection
  .egsEngNodeTitle {

    max-width: 112px !important;

    font-size: 15px !important;
  }


  #egsEngagementRhythmSection
  .egsEngNodeFrequency {

    font-size: 8.8px !important;
  }


  #egsEngagementRhythmSection
  .egsEngDetailPanel {

    padding:
      27px
      11px
      22px !important;
  }


  #egsEngagementRhythmSection
  .egsEngDetailTitle {

    font-size: 18px !important;
  }


  #egsEngagementRhythmSection
  .egsEngDetailDescription {

    font-size: 13px !important;
  }
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  #egsEngagementRhythmSection
  .egsEngPulseNode {

    -webkit-tap-highlight-color:
      transparent;
  }

}

/*==================================================================
                Work Culture
==================================================================*/


/* ============================================================
   EGS WORK CULTURE SECTION
   All classes use egsCulture- prefix
============================================================ */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    background: #fffaf8;
}


/* ============================================================
   MAIN SECTION
============================================================ */

.egsCulture-section {
    position: relative;
    overflow: hidden;

    padding: 90px 24px 90px;

    background:
        linear-gradient(
            120deg,
            #fff5f8 0%,
            #ffe9f0 35%,
            #fff0f5 65%,
            #ffeef2 100%
        );

    background-size: 220% 220%;

    animation: egsCultureMeshFlow 12s ease-in-out infinite;
}


@keyframes egsCultureMeshFlow {

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

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

}


/* ============================================================
   BACKGROUND SWEEP
============================================================ */

.egsCulture-sweep {
    position: absolute;

    top: -20%;
    left: -40%;

    width: 50%;
    height: 140%;

    background:
        linear-gradient(
            100deg,
            transparent 0%,
            rgba(255, 255, 255, 0.55) 45%,
            rgba(255, 200, 220, 0.4) 55%,
            transparent 100%
        );

    transform: rotate(12deg);

    pointer-events: none;

    z-index: 0;

    animation: egsCultureSweepMove 9s ease-in-out infinite;

    mix-blend-mode: soft-light;
}


@keyframes egsCultureSweepMove {

    0% {
        left: -40%;
    }

    50% {
        left: 115%;
    }

    100% {
        left: -40%;
    }

}


/* ============================================================
   BACKGROUND BLOBS
============================================================ */

.egsCulture-blob {
    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

    z-index: 0;
}


.egsCulture-blobOne {
    width: 560px;
    height: 560px;

    top: -190px;
    right: -170px;

    background:
        radial-gradient(
            circle,
            rgba(255, 92, 154, 0.32),
            transparent 70%
        );

    animation:
        egsCultureBlobDriftOne
        13s
        ease-in-out
        infinite;
}


.egsCulture-blobTwo {
    width: 520px;
    height: 520px;

    bottom: -210px;
    left: -170px;

    background:
        radial-gradient(
            circle,
            rgba(224, 48, 111, 0.3),
            transparent 70%
        );

    animation:
        egsCultureBlobDriftTwo
        16s
        ease-in-out
        infinite;
}


.egsCulture-blobThree {
    width: 360px;
    height: 360px;

    top: 35%;
    left: 40%;

    background:
        radial-gradient(
            circle,
            rgba(255, 150, 190, 0.22),
            transparent 70%
        );

    animation:
        egsCultureBlobDriftOne
        11s
        ease-in-out
        infinite reverse;
}


@keyframes egsCultureBlobDriftOne {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-45px, 32px) scale(1.14);
    }

}


@keyframes egsCultureBlobDriftTwo {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(38px, -30px) scale(1.1);
    }

}


/* ============================================================
   FLOATING ORBS
============================================================ */

.egsCulture-orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    background:
        radial-gradient(
            circle at 30% 26%,
            rgba(255, 255, 255, 0.95),
            rgba(255, 255, 255, 0) 44%
        ),
        linear-gradient(
            135deg,
            #e0306f,
            #ff8a3d
        );

    box-shadow:
        inset -6px -8px 16px rgba(0, 0, 0, 0.18),
        0 20px 40px -12px rgba(224, 48, 111, 0.35);
}


.egsCulture-orbOne {
    width: 60px;
    height: 60px;

    top: 6%;
    right: 12%;

    animation:
        egsCultureOrbFloat
        9s
        ease-in-out
        infinite;
}


.egsCulture-orbTwo {
    width: 34px;
    height: 34px;

    bottom: 10%;
    left: 8%;

    animation:
        egsCultureOrbFloat
        11s
        ease-in-out
        infinite 1s;
}


.egsCulture-orbThree {
    width: 20px;
    height: 20px;

    top: 50%;
    right: 4%;

    opacity: 0.85;

    animation:
        egsCultureOrbFloat
        7s
        ease-in-out
        infinite 0.5s;
}


@keyframes egsCultureOrbFloat {

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

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

}


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

.egsCulture-container {
    position: relative;

    z-index: 1;

    max-width: 1180px;

    margin: 0 auto;
}


/* ============================================================
   HEADER
============================================================ */

.egsCulture-header {
    max-width: 680px;

    margin: 0 auto 56px;

    text-align: center;
}


.egsCulture-tag {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 18px 9px 14px;

    margin-bottom: 20px;

    border-radius: 999px;

    background: #ffffff;

    color: #e0306f;

    font-size: 12.5px;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    box-shadow:
        0 6px 18px -8px rgba(23, 19, 15, 0.15);

    opacity: 0;

    animation:
        egsCultureHeaderIn
        0.6s
        ease
        forwards;
}


.egsCulture-tagDot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #e0306f,
            #ff8a3d
        );

    animation:
        egsCultureTagPulse
        2s
        ease-in-out
        infinite;
}


@keyframes egsCultureTagPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

}


.egsCulture-heading {
    margin: 0 0 16px;

    color: #17130f;

    font-size: clamp(28px, 3.6vw, 38px);

    font-weight: 700;

    line-height: 1.25;

    opacity: 0;

    animation:
        egsCultureHeaderIn
        0.7s
        ease
        0.1s
        forwards;
}


.egsCulture-gradientText {
    background:
        linear-gradient(
            100deg,
            #e0306f,
            #ffb37a,
            #ff8a3d,
            #e0306f
        );

    background-size: 250% auto;

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

    color: transparent;

    animation:
        egsCultureGradientShimmer
        5s
        linear
        infinite;
}


@keyframes egsCultureGradientShimmer {

    to {
        background-position: 250% center;
    }

}


.egsCulture-subtitle {
    margin: 0;

    color: #7a6f68;

    font-size: 15px;

    line-height: 1.7;

    opacity: 0;

    animation:
        egsCultureHeaderIn
        0.7s
        ease
        0.18s
        forwards;
}


@keyframes egsCultureHeaderIn {

    from {
        opacity: 0;

        transform: translateY(14px);
    }

    to {
        opacity: 1;

        transform: none;
    }

}


/* ============================================================
   BENTO GRID
============================================================ */

.egsCulture-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 220px);
    gap: 20px;
    perspective: 1600px;
}

/* ============================================================
   COMMON CARD
============================================================ */

.egsCulture-card {
    position: relative;

    border-radius: 22px;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(28px)
        rotateX(-12deg)
        scale(0.94);

    transform-style: preserve-3d;

    transition:
        opacity 0.7s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.egsCulture-card.isVisible {
    opacity: 1;

    transform: none;

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.35s ease;
}


.egsCulture-card:hover {
    box-shadow:
        0 30px 60px -18px rgba(224, 48, 111, 0.35);

    z-index: 5;
}


/* ============================================================
   LARGE CARD
============================================================ */

.egsCulture-cardLarge {
    grid-column: span 2;

    grid-row: span 2;
}


.egsCulture-cardInner {
    position: relative;

    height: 100%;

    overflow: hidden;
}


.egsCulture-cardLarge img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.3s ease-out;
}


.egsCulture-cardLarge.isParallax img {
    transition:
        transform 0.1s ease-out;
}


/* ============================================================
   IMAGE OVERLAY
============================================================ */

.egsCulture-imageOverlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(224, 48, 111, 0.1) 0%,
            rgba(23, 19, 15, 0.15) 35%,
            rgba(23, 19, 15, 0.85) 100%
        );
}


/* ============================================================
   CARD SHINE
============================================================ */

.egsCulture-cardShine {
    position: absolute;

    top: -20%;
    left: -40%;

    width: 45%;
    height: 140%;

    background:
        linear-gradient(
            100deg,
            transparent 0%,
            rgba(255, 255, 255, 0.35) 45%,
            transparent 100%
        );

    transform: rotate(12deg);

    pointer-events: none;

    opacity: 0;

    transition: opacity 0.3s ease;
}


.egsCulture-cardLarge:hover .egsCulture-cardShine {
    opacity: 1;

    animation:
        egsCultureShineSweep
        1.1s
        ease-in-out;
}


@keyframes egsCultureShineSweep {

    0% {
        left: -40%;
    }

    100% {
        left: 120%;
    }

}


/* ============================================================
   LARGE CARD CONTENT
============================================================ */

.egsCulture-cardContent {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 28px 26px;

    color: #ffffff;

    transition:
        transform 0.4s ease;
}


.egsCulture-cardLarge:hover .egsCulture-cardContent {
    transform: translateY(-8px);
}


.egsCulture-cardNumber {
    margin-bottom: 10px;

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

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.08em;
}


.egsCulture-cardTitle {
    margin: 0 0 10px;

    font-size: 21px;

    font-weight: 700;

    line-height: 1.3;
}


.egsCulture-cardDescription {
    margin: 0;

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

    font-size: 13.5px;

    line-height: 1.6;
}


/* ============================================================
   SMALL CARD
============================================================ */

.egsCulture-cardSmall {
    grid-column: span 2;

    grid-row: span 1;
}


.egsCulture-smallInner {
    position: relative;

    z-index: 1;

    height: 100%;

    padding: 24px 22px;

    border-radius: 22px;

    background: #ffffff;

    display: flex;

    flex-direction: column;

    justify-content: center;

    box-shadow:
        0 1px 2px rgba(23, 19, 15, 0.03),
        0 14px 28px -20px rgba(23, 19, 15, 0.15);
}


/* ============================================================
   ANIMATED BORDER
============================================================ */

@property --egsCultureBorderAngle {

    syntax: "<angle>";

    inherits: false;

    initial-value: 0deg;
}


.egsCulture-smallInner::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    border-radius: inherit;

    padding: 2px;

    background:
        conic-gradient(
            from var(--egsCultureBorderAngle),
            #e0306f,
            #ff8a3d,
            #ffd27a,
            #6ee7a0,
            #996eff,
            #e0306f
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    animation:
        egsCultureBorderRotate
        5s
        linear
        infinite;
}


@keyframes egsCultureBorderRotate {

    to {
        --egsCultureBorderAngle: 360deg;
    }

}


.egsCulture-cardSmall:hover .egsCulture-smallInner {
    box-shadow:
        0 26px 50px -14px rgba(224, 48, 111, 0.35);
}


.egsCulture-cardSmall:hover .egsCulture-smallInner::before {
    padding: 2.5px;
}


/* ============================================================
   WATERMARK NUMBER
============================================================ */

.egsCulture-numberWatermark {
    position: absolute;

    top: -14px;
    right: 6px;

    z-index: 0;

    color: rgba(224, 48, 111, 0.06);

    font-size: 74px;

    font-weight: 800;

    line-height: 1;

    user-select: none;

    pointer-events: none;

    animation:
        egsCultureWatermarkPulse
        4s
        ease-in-out
        infinite;
}


@keyframes egsCultureWatermarkPulse {

    0%,
    100% {
        color: rgba(224, 48, 111, 0.05);
    }

    50% {
        color: rgba(224, 48, 111, 0.12);
    }

}

/* ============================================================
   BOTTOM EXTRA CARD
============================================================ */

.egsCulture-cardBottom {
    grid-column: 3 / span 2;
    grid-row: 3;

    min-height: 220px;
    grid-column: 1 / span 2;
    grid-row: 3;
}

/* ============================================================
   ICON
============================================================ */

.egsCulture-icon {
    position: relative;

    z-index: 1;

    width: 42px;
    height: 42px;

    margin-bottom: 14px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    background:
        linear-gradient(
            120deg,
            #e0306f,
            #ff8a3d,
            #ffd27a,
            #e0306f
        );

    background-size: 250% auto;

    box-shadow:
        0 12px 22px -10px rgba(224, 48, 111, 0.4);

    animation:
        egsCultureIconFloat
        3.6s
        ease-in-out
        infinite,
        egsCultureIconShimmer
        4s
        linear
        infinite;
}


@keyframes egsCultureIconShimmer {

    to {
        background-position: 250% center;
    }

}


@keyframes egsCultureIconFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);

        box-shadow:
            0 12px 22px -10px rgba(224, 48, 111, 0.4);
    }

    50% {
        transform: translateY(-5px) rotate(-4deg);

        box-shadow:
            0 16px 30px -8px rgba(224, 48, 111, 0.6);
    }

}


.egsCulture-cardSmall:hover .egsCulture-icon {
    animation:
        egsCultureIconFloat
        3.6s
        ease-in-out
        infinite,
        egsCultureIconShimmer
        4s
        linear
        infinite,
        egsCultureIconBounce
        0.5s
        cubic-bezier(.34, 1.56, .64, 1);
}


@keyframes egsCultureIconBounce {

    0% {
        transform: scale(1) translateY(0);
    }

    50% {
        transform: scale(1.25) rotate(-8deg);
    }

    100% {
        transform: scale(1) translateY(0);
    }

}


/* ============================================================
   SMALL CARD TEXT
============================================================ */

.egsCulture-smallTitle {
    position: relative;

    z-index: 1;

    margin: 0 0 8px;

    color: #17130f;

    font-size: 15.5px;

    font-weight: 700;

    line-height: 1.3;
}


.egsCulture-smallDescription {
    position: relative;

    z-index: 1;

    margin: 0;

    color: #7a6f68;

    font-size: 12.5px;

    line-height: 1.55;
}


/* ============================================================
   RESPONSIVE - TABLET
============================================================ */

@media (max-width: 900px) {

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

        grid-template-rows: none;
    }


    .egsCulture-cardLarge {
        grid-column: span 2;

        grid-row: span 1;

        height: 320px;
    }

    .egsCulture-cardBottom {
        grid-column: span 2;
        grid-row: auto;

        min-height: 220px;
    }

    .egsCulture-cardSmall {
        grid-column: span 1;

        grid-row: span 1;

        height: 220px;
    }

}


.egsCulture-cardBottom .egsCulture-smallInner {
    background:
        linear-gradient(
            135deg,
            #fff 0%,
            #fff5f8 50%,
            #fff0e8 100%
        );
}
.egsCulture-cardSmall {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.egsCulture-cardSmall:hover {
    transform: translateY(-10px) !important;
}
.egsCulture-smallInner {
    overflow: hidden;
}

.egsCulture-smallInner::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -100px;
    right: -80px;
    border-radius: 50%;
    background: rgba(224, 48, 111, 0.08);
    filter: blur(30px);
    transition: transform 0.5s ease;
}

.egsCulture-cardSmall:hover .egsCulture-smallInner::after {
    transform: scale(2);
}

.egsCulture-smallInner {
    position: relative;
}

.egsCulture-smallInner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #e0306f, #ff8a3d);
    transition: width 0.5s ease;
}

.egsCulture-cardSmall:hover .egsCulture-smallInner::after {
    width: 100%;
}

/* ============================================================
   EGS CULTURE IMPACT STATEMENT CARD
============================================================ */

.egsCulture-quoteCard {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    max-width: 1180px;
    min-height: 150px;

    margin: 45px auto 0;
    padding: 28px 150px;

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

    text-align: center;

    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            #21151c 0%,
            #351421 48%,
            #20151c 100%
        );

    box-shadow:
        0 25px 60px -28px rgba(68, 18, 39, 0.55);

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s ease;
}


/* Animated premium gradient border */

.egsCulture-quoteCard::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: -2px;

    border-radius: inherit;

    background:
        conic-gradient(
            from 0deg,
            #e0306f,
            #ff8a3d,
            #ffd27a,
            #e0306f,
            #ff8a3d,
            #e0306f
        );

    animation:
        egsCultureImpactBorder 7s linear infinite;
}


@keyframes egsCultureImpactBorder {

    to {
        transform: rotate(360deg);
    }

}


/* Inner layer */

.egsCulture-quoteCard::after {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 2px;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 50% -80%,
            rgba(255, 138, 61, 0.35),
            transparent 50%
        ),
        linear-gradient(
            135deg,
            #21151c,
            #351421,
            #20151c
        );
}


/* Quote Symbol */

.egsCulture-quoteMark {
    position: absolute;

    top: -18px;
    left: 45px;

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

    font-family: Georgia, serif;

    font-size: 135px;

    font-weight: bold;

    line-height: 1;

    pointer-events: none;
}


/* Main Statement */

/* Main Statement Text */

.egsCulture-quoteCard p {
    position: relative;
    z-index: 2;

    max-width: 820px;

    margin: 0 0 12px;

    font-size: clamp(18px, 2vw, 25px);

    font-weight: 700;

    line-height: 1.45;

    letter-spacing: -0.015em;

    /* Premium Text Gradient */
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffd6a8 35%,
        #ff9f6d 55%,
        #ffd6a8 75%,
        #ffffff 100%
    );

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

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

    background-size: 200% auto;

    animation: egsCultureTextShine 5s linear infinite;
}


@keyframes egsCultureTextShine {
    to {
        background-position: 200% center;
    }
}


/* Highlight important line */

.egsCulture-quoteCard p::first-line {
    color: #ffd6a8;
}


/* Brand */

.egsCulture-quoteBrand {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #ffb37a;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .22em;

    text-transform: uppercase;
}


.egsCulture-quoteBrand::before,
.egsCulture-quoteBrand::after {
    content: "";

    width: 35px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff8a3d
        );
}


.egsCulture-quoteBrand::after {
    transform: rotate(180deg);
}


/* Floating spotlight */

.egsCulture-quoteCard:hover {
    transform: translateY(-8px) scale(1.01);

    box-shadow:
        0 35px 75px -28px rgba(224, 48, 111, 0.5);
}


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

@media (max-width: 560px) {

    .egsCulture-quoteCard {
        min-height: 145px;

        padding: 25px 30px;

        border-radius: 20px;
    }


    .egsCulture-quoteCard::after {
        border-radius: 18px;
    }


    .egsCulture-quoteMark {
        top: -8px;
        left: 18px;

        font-size: 85px;
    }


    .egsCulture-quoteCard p {
        margin-bottom: 10px;

        font-size: 16px;

        line-height: 1.5;
    }


    .egsCulture-quoteBrand {
        font-size: 8px;

        letter-spacing: .15em;
    }


    .egsCulture-quoteBrand::before,
    .egsCulture-quoteBrand::after {
        width: 22px;
    }

}

/* ============================================================
   RESPONSIVE - MOBILE
============================================================ */

@media (max-width: 560px) {

    .egsCulture-section {
        padding: 75px 16px 85px;
    }


    .egsCulture-header {
        margin-bottom: 38px;
    }
    


    .egsCulture-cardBottom {
        grid-column: span 1;
        grid-row: auto;

        min-height: 220px;
    }


    .egsCulture-heading {
        font-size: 28px;
    }


    .egsCulture-subtitle {
        font-size: 13.5px;
    }


    .egsCulture-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .egsCulture-cardLarge,
    .egsCulture-cardSmall {
        grid-column: span 1;
    }


    .egsCulture-cardLarge {
        height: 330px;
    }


    .egsCulture-cardSmall {
        height: 220px;
    }


    .egsCulture-cardContent {
        padding: 24px 20px;
    }


    .egsCulture-cardTitle {
        font-size: 19px;
    }


    .egsCulture-cardDescription {
        font-size: 12.5px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .egsCulture-card {
        transition: none !important;

        opacity: 1 !important;

        transform: none !important;
    }


    .egsCulture-blob,
    .egsCulture-orb,
    .egsCulture-section,
    .egsCulture-sweep,
    .egsCulture-cardShine,
    .egsCulture-tag,
    .egsCulture-tagDot,
    .egsCulture-heading,
    .egsCulture-gradientText,
    .egsCulture-subtitle,
    .egsCulture-numberWatermark,
    .egsCulture-icon,
    .egsCulture-smallInner {
        animation: none !important;
    }


    .egsCulture-tag,
    .egsCulture-heading,
    .egsCulture-subtitle {
        opacity: 1 !important;

        transform: none !important;
    }


    .egsCulture-cardLarge .egsCulture-cardContent {
        transition: none !important;
    }

}









































































































/* =====contact page  HERO BLACK THEME ===== */
/* ============================================
   SECTION 1 — HERO
============================================ */
.contact-hero-dark {
  position: relative;
  min-height: 100vh;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 90px;
}

.contact-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.sketch-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sketch-path { stroke-dasharray: 200; stroke-dashoffset: 200; opacity: 0; }
.sketch-group { opacity: 0.35; }

.emoji-field { position: absolute; inset: 0; }
.floating-emoji {
  position: absolute;
  font-size: 22px;
  opacity: 0.4;
  animation: emojiFloat 5s ease-in-out infinite;
}
@keyframes emojiFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(6deg); }
}

.hero-orb { position: absolute; border-radius: 50%; will-change: transform; }
.hero-orb-a {
  width: 220px; height: 220px; top: -10%; left: 5%;
  background: radial-gradient(circle, #a855f7, transparent 70%);
  filter: blur(50px); opacity: 0.4;
}
.hero-orb-b {
  width: 180px; height: 180px; bottom: -5%; right: 8%;
  background: radial-gradient(circle, #f97316, transparent 70%);
  filter: blur(50px); opacity: 0.35;
}

.contact-hero-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4vw 6vw 6vw;
  gap: 60px;
}

.contact-hero-content { flex: 1.15; min-width: 0; color: #fff; }

.hook-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid rgba(236,72,153,0.4);
  border-radius: 999px; background: rgba(236,72,153,0.08);
  font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; color: #f4a6c9;
}
.hook-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ec4899;
  box-shadow: 0 0 10px #ec4899; animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.contact-hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 700; line-height: 1.15; margin: 22px 0 18px;
  color: #fff; text-shadow: none; filter: none; word-break: break-word;
}

.hook-rotator {
  position: relative; display: inline-block; height: 1.2em;
  overflow: hidden; vertical-align: bottom; width: 100%; max-width: 480px;
}
.hook-word {
  display: block; height: 1.2em;
  background: linear-gradient(90deg, #c084fc, #ec4899, #fb923c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(30px); position: absolute; inset: 0;
  text-shadow: none; filter: none; white-space: nowrap;
}
.hook-word.active { animation: hookIn 2.6s ease forwards; }
@keyframes hookIn {
  0% { opacity: 0; transform: translateY(30px); }
  10%, 85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}

.contact-hero-desc {
  font-size: 1.05rem; color: #c4b5cc; max-width: 480px;
  line-height: 1.7; margin-bottom: 30px; text-shadow: none; filter: none;
}

.hero-cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 36px; }

.contact-hero-cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px;
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  color: #fff; border: none; border-radius: 999px; font-weight: 600; font-size: 15px;
  cursor: pointer; box-shadow: 0 0 22px rgba(236,72,153,0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-hero-cta:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 30px rgba(236,72,153,0.6); }
.contact-hero-cta i { transition: transform 0.25s ease; }
.contact-hero-cta:hover i { transform: translateX(4px); }

.hero-cta-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 15px 24px;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; color: #fff;
  text-decoration: none; font-size: 15px; font-weight: 500;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.hero-cta-ghost i { color: #4ade80; }
.hero-cta-ghost:hover { background: rgba(37,211,102,0.12); border-color: #25d366; color: #25d366; }

.hero-trust-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-trust-item { display: flex; flex-direction: column; gap: 2px; }
.hero-trust-item strong {
  font-size: 1.4rem; font-weight: 600;
  background: linear-gradient(90deg, #c084fc, #ec4899, #f97316);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: none;
}
.hero-trust-item span { font-size: 12px; color: #8a8794; text-transform: uppercase; letter-spacing: 0.5px; }
.hero-trust-divider { width: 1px; height: 30px; background: rgba(255,255,255,0.15); }

.hero-chat-col { flex: 1; min-width: 0; position: relative; display: flex; justify-content: center; }
.hero-chat-glow {
  position: absolute; inset: -6px; border-radius: 22px;
  background: linear-gradient(135deg, #ec4899, #f97316);
  opacity: 0.6; filter: blur(16px); max-width: 320px; margin: auto;
}
.hero-chat-box { position: relative; width: 100%; max-width: 320px; background: #111; border-radius: 18px; padding: 20px; }
.hero-chat-box::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 2px;
  background: linear-gradient(135deg, #ec4899, #f97316);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.hero-chat-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 0.5px solid rgba(255,255,255,0.1);
}
.hero-chat-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #ec4899, #f97316); flex-shrink: 0; }
.hero-chat-name { font-size: 14px; color: #fff; font-weight: 500; }
.hero-chat-status { font-size: 11px; color: #4ade80; }
.hero-chat-area { min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.chat-bubble { font-size: 13px; padding: 10px 14px; max-width: 82%; opacity: 0; transition: opacity 0.5s ease; line-height: 1.4; }
.chat-bubble.them { background: #1e1e1e; color: #e5e5e5; border-radius: 12px 12px 12px 3px; }
.chat-bubble.us { background: linear-gradient(135deg, #ec4899, #f97316); color: #fff; font-weight: 500; border-radius: 12px 12px 3px 12px; margin-left: auto; }
.hero-chat-typing { display: flex; gap: 4px; margin-top: 10px; opacity: 0; }
.hero-chat-typing .dot { width: 6px; height: 6px; border-radius: 50%; background: #8a8480; display: inline-block; }

@media (max-width: 900px) {
  .contact-hero-dark { padding-top: 70px; }
  .contact-hero-wrap { flex-direction: column; padding: 8vw 6vw 10vw; gap: 36px; text-align: center; }
  .contact-hero-content { order: 1; }
  .hero-chat-col { order: 2; margin-top: 10px; }
  .contact-hero-title { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .hook-rotator { max-width: 100%; }
  .hero-cta-row, .hero-trust-row { justify-content: center; }
  .contact-hero-desc { margin-left: auto; margin-right: auto; }
  .hero-chat-box, .hero-chat-glow { max-width: 280px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .contact-hero-cta, .hero-cta-ghost { flex: 1; justify-content: center; }
  .hero-cta-row { width: 100%; }
  .hero-trust-row { gap: 12px; }
  .hero-trust-item strong { font-size: 1.1rem; }
  .hero-trust-item span { font-size: 10px; }
  .hero-orb-a, .hero-orb-b { width: 160px; height: 160px; }
}


/* ============================================
   SECTION 2 — OFFICE + MAP
============================================ */
.office-map-section { background: #fdf1e9; padding: 2px 6vw; }

.office-map-outer {
  position: relative; max-width: 1100px; margin: 0 auto;
  border-radius: 20px; padding: 40px 26px; overflow: hidden; background: #fdf1e9;
}

.bg-conic-glow {
  position: absolute; top: 5%; left: 50%; width: 600px; height: 600px;
  margin: -300px 0 0 -300px;
  background: conic-gradient(from 0deg, transparent, rgba(236,72,153,0.28), transparent 30%, rgba(249,115,22,0.22), transparent 60%);
  filter: blur(30px); z-index: 0; pointer-events: none;
}
.bg-constellation { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.office-section-title { position: relative; z-index: 1; text-align: center; margin-bottom: 32px; }
.office-title-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(236,72,153,0.1); border-radius: 999px; padding: 5px 13px;
  font-size: 10px; font-weight: 700; color: #c4795f; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 12px;
}
.office-title-dot { width: 6px; height: 6px; border-radius: 50%; background: #ec4899; display: inline-block; }
.office-title-heading { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: #1a1a1a; margin: 0 0 8px; }
.office-title-gradient {
  background: linear-gradient(90deg, #ec4899, #f97316);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.office-title-desc { font-size: 20px; color: #8a7568; max-width: 420px; margin: 0 auto; }

.office-map-border-wrap { position: relative; z-index: 1; border-radius: 22px; }
.office-map-glow {
  position: absolute; inset: -3px; border-radius: 24px;
  background: linear-gradient(135deg, #ec4899, #f97316, #ec4899);
  opacity: 0.5; filter: blur(14px);
}

.office-map-box {
  position: relative; border-radius: 22px; overflow: hidden; display: flex;
  min-height: 460px; background: #fff8f2; box-shadow: 0 25px 60px rgba(236,72,153,0.15);
}
.office-map-box::before {
  content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 2px;
  background: linear-gradient(135deg, #ec4899, #f97316);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 5;
}

.office-card-col { flex: 1; min-width: 280px; padding: 28px 26px; position: relative; overflow: hidden; }
.office-card-blob {
  position: absolute; top: -40px; right: -40px; width: 130px; height: 130px;
  border-radius: 50%; background: radial-gradient(circle, #ffe1d3, transparent 70%); pointer-events: none;
}

.office-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; position: relative; }
.office-open-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(90deg, rgba(236,72,153,0.1), rgba(249,115,22,0.1));
  border-radius: 999px; padding: 4px 11px; margin-bottom: 9px;
  font-size: 9px; font-weight: 700; color: #c4795f; text-transform: uppercase; letter-spacing: 0.4px;
}
.office-open-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; display: inline-block; }
.office-card-name { font-size: 17px; font-weight: 800; color: #1a1a1a; letter-spacing: -0.3px; }
.office-card-tag { font-size: 10px; color: grey; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 900; margin-top: 2px; }
.office-logo-badge {
  width: 44px; height: 44px; border-radius: 13px;
  background: linear-gradient(135deg, #ec4899, #f97316);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(236,72,153,0.4); transform: rotate(-4deg);
}

.office-stats-row { display: flex; gap: 10px; margin-bottom: 20px; position: relative; }
.office-stat-card { flex: 1; background: linear-gradient(135deg, #fff5f0, #ffe9dc); border-radius: 13px; padding: 12px; position: relative; overflow: hidden; }
.office-stat-card i { position: absolute; right: 6px; top: 6px; font-size: 22px; color: rgba(236,72,153,0.15); }
.office-stat-value {
  font-size: 19px; font-weight: 800;
  background: linear-gradient(90deg, #ec4899, #f97316);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.office-stat-label { font-size: 10px; color: maroon; text-transform: uppercase; font-weight: 700; }

.office-detail-list { display: flex; flex-direction: column; gap: 13px; margin-bottom: 20px; position: relative; }
.office-detail-row { display: flex; gap: 11px; align-items: flex-start; }
.office-detail-icon {
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(236,72,153,0.1); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #ec4899; font-size: 13px;
}
.office-detail-label { font-size: 16px; color: #c4795f; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; margin-bottom: 2px; }
.office-detail-value { font-size: 13px; color: #3a2a24; line-height: 1.5; }
.office-detail-value span { color: text-muted; margin-left: 4px; }
.office-detail-gradient {
  background: linear-gradient(90deg, #ec4899, #f97316);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700;
}

.office-whatsapp-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
  border: none; border-radius: 999px; font-weight: 700; font-size: 12.5px; cursor: pointer;
  text-decoration: none; box-shadow: 0 10px 24px rgba(34,197,94,0.35); position: relative;
  transition: transform 0.2s ease;
}
.office-whatsapp-btn:hover { transform: translateY(-2px); }
.office-whatsapp-ring { position: absolute; inset: 0; border-radius: 999px; border: 2px solid #22c55e; opacity: 0; pointer-events: none; }

.office-map-col { flex: 1.3; min-width: 280px; position: relative; }
.map-embed-wrap { position: relative; width: 100%; height: 100%; min-height: 460px; }
.map-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; filter: saturate(0.85) contrast(0.95); }

.map-open-btn {
  position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px); border-radius: 8px; padding: 8px 14px; font-size: 11px;
  color: #3a2a24; font-weight: 700; display: flex; align-items: center; gap: 6px;
  text-decoration: none; z-index: 3;
}

.bounce-pin {
  position: absolute; left: 50%; top: 48%; transform: translate(-50%, -100%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.pin-label {
  background: #1a1a1a; color: #fff; font-size: 10px; font-weight: 700; padding: 5px 11px;
  border-radius: 6px; margin-bottom: 6px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.pin-shadow { width: 14px; height: 4px; background: rgba(0,0,0,0.15); border-radius: 50%; margin-top: 2px; filter: blur(2px); }

@media (max-width: 800px) {
  .office-map-section { padding: 40px 5vw; }
  .office-map-outer { padding: 24px 16px; }
  .office-map-box { flex-direction: column; min-height: auto; }
  .office-card-col { padding: 24px 20px; }
  .office-map-col, .map-embed-wrap { min-height: 320px; height: 320px; }
  .bounce-pin { top: 50%; }
  .bg-conic-glow { width: 400px; height: 400px; margin: -200px 0 0 -200px; }
}
@media (max-width: 480px) {
  .office-card-header { flex-wrap: wrap; gap: 10px; }
  .office-detail-value { font-size: 11px; }
  .pin-label { font-size: 9px; padding: 4px 9px; }
  .office-title-heading { font-size: 1.4rem; }
}
/* =========================================
   COMING SOON MODAL (Global)
========================================= */
.cs-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cs-modal-overlay.cs-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cs-modal {
  max-width: 380px;
  width: 100%;
  background: linear-gradient(160deg, #1a0f14, #120a10);
  border: 1px solid rgba(236,72,153,0.3);
  border-radius: 22px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(236,72,153,0.25);

  opacity: 0;
  transform: scale(0.7) translateY(30px);
  transition: opacity 0.5s cubic-bezier(.34,1.56,.64,1), transform 0.5s cubic-bezier(.34,1.56,.64,1);
}
.cs-modal-overlay.cs-visible .cs-modal {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.cs-modal-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(249,115,22,0.1));
  border: 1px solid rgba(236,72,153,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(236,72,153,0.12);
  border: 1px solid rgba(236,72,153,0.35);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 10.5px;
  font-weight: 700;
  color: #f4a6c9;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 16px;
}
.cs-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ec4899;
  display: inline-block;
}

.cs-titled {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.3;
}
.cs-titled-highlight {
  background: linear-gradient(90deg, #ec4899, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cs-desce {
  font-size: 12.5px;
  color: #c4b5cc;
  line-height: 1.65;
  margin: 0 0 26px;
}

.cs-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(90deg, #ec4899, #f97316);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(236,72,153,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cs-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(236,72,153,0.55);
}

@media (max-width: 480px) {
  .cs-modal { padding: 28px 22px; }
  .cs-title { font-size: 19px; }
}


























/*
===========================================================
                 Application Engineering

===========================================================*/



 :root{
    --egs-dark:#0b0710;
    --egs-dark2:#120a18;
    --egs-pink:#ff2d78;
    --egs-orange:#ff7a3d;
    --egs-gradient: linear-gradient(90deg,var(--egs-pink),var(--egs-orange));
    --egs-light:#f7f5f8;
    --egs-white:#ffffff;
    --egs-text:#17121f;
    --egs-muted:#645f70;
    --egs-text-light:#ffffff;
    --egs-text-light-muted:#bdb6c9;
    --egs-border:#eceaf0;
    --egs-radius:16px;
    --egs-max:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Poppins',Arial,Helvetica,sans-serif;
    background:var(--egs-light);
    color:var(--egs-text);
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  .egs-container{max-width:var(--egs-max);margin:0 auto;padding:0 40px;}
  h1,h2,h3,h4{font-weight:800;letter-spacing:-0.01em;}
  .egs-accent{background:var(--egs-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}

  .egs-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--egs-pink);font-size:12px;font-weight:700;letter-spacing:1.2px;
    border:1px solid rgba(255,45,120,.4);
    padding:6px 14px;border-radius:100px;
    margin-bottom:20px;
    margin-top: 30px;
  }
  .egs-eyebrow.egs-plain{border:none;padding:0;}
  .egs-eyebrow.egs-plain::after{content:"";flex:1;max-width:50px;height:1px;background:var(--egs-pink);opacity:.6;}

  /* ================= HERO ================= */
  .egs-hero{
    background:radial-gradient(ellipse at 80% 20%, #2a0f22 0%, var(--egs-dark) 55%);
    padding:70px 0 60px;
    overflow:hidden;
  }
  .egs-hero-grid{
    display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center;
  }
  .egs-hero-content h1{
    font-size:49px;line-height:1.14;color:var(--egs-text-light);margin-bottom:20px;
  }

  .egs-hero-content h1 span{
    background: linear-gradient(90deg, var(--wadv-pink), var(--wadv-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}
  .egs-hero-content p{
    color:var(--egs-text-light-muted);font-size:15.5px;line-height:1.75;max-width:480px;margin-bottom:30px;
  }
  .egs-hero-ctas{display:flex;gap:14px;margin-bottom:44px;flex-wrap:wrap;}
  .egs-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 26px;border-radius:100px;
    font-weight:600;font-size:14.5px;
    transition:.25s;
    border:1.5px solid transparent;
  }
  .egs-btn-primary{
    background:var(--egs-gradient);color:#fff;
    box-shadow:0 10px 30px rgba(255,45,120,.35);
  }
  .egs-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,45,120,.5);}
  .egs-btn-outline{
    background:transparent;color:#fff;border-color:rgba(255,255,255,.25);
  }
  .egs-btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.06);}

  .egs-stats{display:flex;gap:40px;flex-wrap:wrap;}
  .egs-stat{display:flex;align-items:center;gap:12px;}
  .egs-stat-icon{
    width:42px;height:42px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,45,120,.12);color:var(--egs-pink);font-size:18px;
  }
  .egs-stat strong{display:block;font-size:20px;color:#fff;font-weight:800;line-height:1.1;}
  .egs-stat span{font-size:17.5px;color:#fff;font-weight:500;}
  .egs-hero-img{
    width: 130%;
    max-width: 680px;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.4));
  }

  /* hero visual - 3D cube */
  .egs-hero-visual{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;}
  .egs-hero-orbit-icon{
    position:absolute;width:52px;height:52px;border-radius:14px;
    background:#1c1226;border:1px solid rgba(255,45,120,.35);
    display:flex;align-items:center;justify-content:center;
    color:var(--egs-pink);font-size:20px;
    box-shadow:0 12px 30px rgba(0,0,0,.4);
    animation:egsFloat 4.5s ease-in-out infinite;
  }
  .egs-hero-orbit-icon.egs-o1{top:8%; left:2%; animation-delay:0s;}
  .egs-hero-orbit-icon.egs-o2{top:2%; right:8%; animation-delay:.8s;}
  .egs-hero-orbit-icon.egs-o3{bottom:14%; left:-2%; animation-delay:1.6s;}
  .egs-hero-orbit-icon.egs-o4{bottom:6%; right:0%; animation-delay:2.4s;}
  @keyframes egsFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
  }

  /* ================= SERVICES ================= */
   /* ================= SERVICES ================= */
.egs-services{
  background: linear-gradient(180deg, #ffffff 0%, #fdf7f9 100%);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.egs-services::before{
  content:"";
  position:absolute; top:-15%; left:-10%;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.egs-services::after{
  content:"";
  position:absolute; bottom:-15%; right:-8%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,122,61,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.egs-services .egs-container{position:relative; z-index:1;}

.egs-services-head{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:50px;
}
.egs-services-head h2{font-size:40px;line-height:1.25;}
.egs-services-head .egs-lead{color:var(--egs-muted);font-size:16.5px;line-height:1.8;padding-bottom:4px;}

/* --- marquee track --- */
.egs-marquee{
  overflow: hidden;
  position: relative;
  padding: 30px 0 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.egs-service-grid{
  display:flex;
  gap:22px;
  width:max-content;
  perspective: 1200px;
}

.egs-service-card{
  --card-color: var(--egs-pink);
  background:#fff;
  border:1px solid var(--egs-border);
  border-radius:20px;
  padding:30px 24px;          /* ⬅ reduced from 32px 24px */
  position:relative;
  overflow:hidden;
  width: 240px;
  flex: 0 0 260px;
  transform-style: preserve-3d;
  transition: box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
.egs-service-card:nth-child(5n+1){ --card-color:#ff2d78; }
.egs-service-card:nth-child(5n+2){ --card-color:#8b5cf6; }
.egs-service-card:nth-child(5n+3){ --card-color:#3ba7ff; }
.egs-service-card:nth-child(5n+4){ --card-color:#2dd4c7; }
.egs-service-card:nth-child(5n+5){ --card-color:#ffb020; }

.egs-service-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--card-color), transparent);
}

.egs-service-card:hover{
  box-shadow: 0 30px 50px color-mix(in srgb, var(--card-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--card-color) 35%, transparent);
}

.egs-marquee-dots{
  display:flex;justify-content:center;gap:8px;margin-top:26px;
}
.egs-marquee-dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--egs-border);
  transition: all .3s ease;
}
.egs-marquee-dot.egs-dot-active{
  width:26px;border-radius:5px;
  background: var(--egs-gradient);
}

.egs-service-num{
  font-size:26px;             /* ⬅ reduced from 34px */
  font-weight:800;
  color: color-mix(in srgb, var(--card-color) 20%, white);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--card-color) 55%, transparent);
  margin-bottom:4px;
  line-height:1;
  transform: translateZ(25px);
  transition: text-shadow .3s ease, color .3s ease;
}
.egs-service-card.egs-card-focused .egs-service-num{
  color: var(--card-color);
  text-shadow: 0 0 18px color-mix(in srgb, var(--card-color) 60%, transparent);
}

.egs-service-icon{
  width:48px;height:48px;border-radius:15px;  /* ⬅ reduced from 56px */
  background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 55%, var(--egs-orange)));
  display:flex;align-items:center;justify-content:center;
  color: whitesmoke;font-size:22px;margin-bottom:16px;  /* ⬅ reduced margin/font */
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 45%, transparent);
  transition: transform .3s ease;
  transform: translateZ(35px);
}
.egs-service-card:hover .egs-service-icon{
  transform: translateZ(35px) scale(1.12) rotate(-8deg);
}

.egs-service-card h3{
  font-size:16px;line-height:1.28;margin-bottom:6px;color:var(--egs-text);
  min-height:0;           /* ⬅ reduced from 44px */
  transform: translateZ(20px);
}

.egs-service-card ul{margin-bottom:8px; transform: translateZ(15px);}   /* ⬅ reduced from 22px */
.egs-service-card li{
 font-size:13.5px;color: black;line-height:1.55;padding-left:16px;position:relative;
}
.egs-service-card li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
  background: var(--card-color);
}

.egs-service-link{
  font-size:12.5px;font-weight:700;color:var(--card-color);display:inline-flex;align-items:center;gap:6px;
  transform: translateZ(20px);
}
.egs-service-link svg{width:13px;height:13px;transition:.2s;}
.egs-service-card:hover .egs-service-link svg{transform:translateX(4px);}

@media (prefers-reduced-motion: reduce){
  .egs-service-grid{ animation:none !important; }
}

  /* ================= TECH STACK ================= */
 .egs-tech{
  background: var(--egs-dark);
  padding: 70px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* terminal */
.egs-terminal{
  background:#0f0a17; border:1px solid rgba(255,45,120,.25); border-radius:12px;
  padding:16px 20px; max-width:520px; margin-bottom:40px; font-family:'Poppins';
}
.egs-terminal-bar{display:flex; gap:6px; margin-bottom:12px;}
.egs-terminal-bar span{width:9px;height:9px;border-radius:50%;background:#444;}
.egs-terminal-body{font-size:13px; color:#3ddc84;}
.egs-terminal-prompt{color:var(--egs-pink); margin-right:8px;}
.egs-cursor{animation: egsBlink 1s step-end infinite;}
@keyframes egsBlink{50%{opacity:0;}}

/* stacked layer feel on grid */
.egs-tech-grid{
  perspective: 1000px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
}
.egs-tech-col{
  transform: translateZ(0) rotateX(2deg);
  transition: transform .3s ease;
}
.egs-tech-col:hover{
  transform: translateZ(20px) rotateX(0deg) translateY(-4px);
}

.egs-tech-icon{ transition: transform .4s cubic-bezier(.34,1.56,.64,1); }

/* ticker */
.egs-tech-ticker-wrap{overflow:hidden; margin-top:40px; border-top:1px solid rgba(255,255,255,.08); padding-top:20px; width: 100%}
.egs-tech-ticker{display:flex; gap:14px; width:max-content; animation: egsTicker 20s linear infinite; font-size:16px; color:var(--egs-text-light-muted); white-space: nowrap;}
.egs-tech-ticker span{
  margin-right: 6px;
}
.egs-tech-ticker span:nth-child(odd){color:var(--egs-pink); font-weight:600;}

@keyframes egsTicker{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@keyframes egsTicker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.egs-tech::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, rgba(255,45,120,.18) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:.4;
  z-index:0;
  animation: egsDotsDrift 18s linear infinite;
}
.egs-tech .egs-container{ position:relative; z-index:1; }

@keyframes egsDotsDrift{
  from{ background-position: 0 0; }
  to{ background-position: 68px 68px; }
}

.egs-tech::after{
  content:"";
  position:absolute; top:-10%; right:-8%;
  width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,122,61,.14), transparent 70%);
  filter: blur(20px);
  z-index:0;
}

@keyframes egsTechIn{
  from{ opacity:0; transform: translateY(26px); }
  to{ opacity:1; transform: translateY(0); }
}

.egs-tech-col{
  opacity:0;
  animation: egsTechIn .6s ease forwards;
}
.egs-tech-col:nth-child(1){ animation-delay:.05s; }
.egs-tech-col:nth-child(2){ animation-delay:.15s; }
.egs-tech-col:nth-child(3){ animation-delay:.25s; }
.egs-tech-col:nth-child(4){ animation-delay:.35s; }
.egs-tech-col:nth-child(5){ animation-delay:.45s; }
.egs-tech-col:nth-child(6){ animation-delay:.55s; }

.egs-tech-top{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:50px;
  align-items:center;
  margin-bottom:30px;
  color: #fff;
}
.egs-tech-top h2{font-size:35px;line-height:1.28; color: #fff;}
.egs-tech-top p{color: whitesmoke;font-size:14.5px;line-height:1.8;}

.egs-terminal{
  background:#0f0a17; border:1px solid rgba(255,45,120,.25); border-radius:12px;
  padding:16px 20px; width:100%; margin-bottom:44px; font-family: 'Poppins';
}
.egs-terminal-bar{display:flex; gap:6px; margin-bottom:12px;}
.egs-terminal-bar span{width:9px;height:9px;border-radius:50%;background:#444;}
.egs-terminal-body{font-size:13px; color:#3ddc84; min-height:18px;}
.egs-terminal-prompt{color:var(--egs-pink); margin-right:8px;}
.egs-cursor{animation: egsBlink 1s step-end infinite;}
@keyframes egsBlink{50%{opacity:0;}}

  .egs-tech-grid{
    display:grid;grid-template-columns:repeat(6,1fr);gap:44px;
  }
  .egs-tech-col-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
  .egs-tech-icon{
    width:36px;height:36px;border-radius:9px;
    background:rgba(255,45,120,.12);border:1px solid rgba(255,45,120,.3);
    display:flex;align-items:center;justify-content:center;color:var(--egs-pink);font-size:17px;
    flex-shrink:0;
  }
  .egs-tech-col-head h4{font-size:14px;font-weight:700;color:#fff;line-height:1.35;}
 .egs-tech-col li{font-size:14px;color: whitesmoke;line-height:2;}


  /* ================= INDUSTRIES ================= */
.egs-industries{
  background: linear-gradient(180deg, #ffffff 0%, #fdf2f6 100%);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}
.egs-industries::before{
  content:"";
  position:absolute; top:-15%; left:-8%;
  width:400px; height:400px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.14), transparent 70%);
  filter: blur(20px); z-index:0;
  animation: egsBlobFloat1 10s ease-in-out infinite;
}
.egs-industries::after{
  content:"";
  position:absolute; bottom:-15%; right:-8%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(139,92,246,.13), transparent 70%);
  filter: blur(20px); z-index:0;
  animation: egsBlobFloat2 12s ease-in-out infinite;
}
@keyframes egsBlobFloat1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-20px) scale(1.1); }
}
@keyframes egsBlobFloat2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-25px,25px) scale(1.15); }
}
.egs-industries .egs-container{ position:relative; z-index:1; }

.egs-industries-top{
  text-align:center;
  display:block;
  margin-bottom:50px;
}
.egs-industries-top h2{
  font-size:32px;
  line-height:1.3;
  max-width:600px;
  margin:0 auto;
  color:#000;
}
.egs-industries-top .egs-rule{
  margin:18px auto 0;
}

/* ---- grid ---- */
.egs-ind-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:16px;
}

/* ---- card shell + pop-in reveal ---- */
.egs-ind-card{
  perspective: 1000px;
  height:210px;
  position: relative;
  border-radius: 14px;
  cursor:pointer;
  opacity:0;
  animation: egsIndPop .5s ease forwards;
  transition: transform .3s ease;
}
.egs-ind-card:hover{
  transform: translateY(-6px);
}

@keyframes egsIndPop{
  0%{ opacity:0; transform: translateY(22px) scale(.9); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
.egs-ind-card:nth-child(1){animation-delay:.03s;} .egs-ind-card:nth-child(2){animation-delay:.06s;}
.egs-ind-card:nth-child(3){animation-delay:.09s;} .egs-ind-card:nth-child(4){animation-delay:.12s;}
.egs-ind-card:nth-child(5){animation-delay:.15s;} .egs-ind-card:nth-child(6){animation-delay:.18s;}
.egs-ind-card:nth-child(7){animation-delay:.21s;} .egs-ind-card:nth-child(8){animation-delay:.24s;}
.egs-ind-card:nth-child(9){animation-delay:.27s;} .egs-ind-card:nth-child(10){animation-delay:.30s;}
.egs-ind-card:nth-child(11){animation-delay:.33s;} .egs-ind-card:nth-child(12){animation-delay:.36s;}
.egs-ind-card:nth-child(13){animation-delay:.39s;} .egs-ind-card:nth-child(14){animation-delay:.42s;}

/* ---- rotating gradient border ring ---- */
.egs-ind-card::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:14px;
  background: conic-gradient(from 0deg, var(--card-color), var(--card-color-2), var(--card-color));
  animation: egsBorderSpin 4s linear infinite;
  z-index:0;
}
@keyframes egsBorderSpin{
  from{ filter: hue-rotate(0deg); }
  to{ filter: hue-rotate(360deg); }
}

/* ---- per-card accent colors ---- */
.egs-ind-card:nth-child(7n+1){ --card-color:#ff2d78; --card-color-2:#ff7a3d; }
.egs-ind-card:nth-child(7n+2){ --card-color:#8b5cf6; --card-color-2:#3ba7ff; }
.egs-ind-card:nth-child(7n+3){ --card-color:#3ba7ff; --card-color-2:#2dd4c7; }
.egs-ind-card:nth-child(7n+4){ --card-color:#2dd4c7; --card-color-2:#22c55e; }
.egs-ind-card:nth-child(7n+5){ --card-color:#ffb020; --card-color-2:#ff7a3d; }
.egs-ind-card:nth-child(7n+6){ --card-color:#ec4899; --card-color-2:#ff2d78; }
.egs-ind-card:nth-child(7n+7){ --card-color:#22c55e; --card-color-2:#2dd4c7; }

/* ---- 3D flip mechanism ---- */
.egs-ind-inner{
  position:relative; z-index:1;
  width:100%; height:100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4,.2,.2,1);
}
.egs-ind-card:hover .egs-ind-inner,
.egs-ind-card.egs-flipped .egs-ind-inner{
  transform: rotateY(180deg);
}

.egs-ind-front, .egs-ind-back{
  position:absolute; inset:0;
  backface-visibility: hidden;
  border-radius:16px;
  padding:16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border: 2px solid transparent;
  background-image: linear-gradient(#fff,#fff), linear-gradient(135deg, var(--card-color,#ff2d78), var(--card-color-2,#ff7a3d));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.egs-ind-back{
  transform: rotateY(180deg);
}

/* ---- icon ---- */
.egs-ind-icon{
  width:48px;height:48px;margin:0 auto 12px;border-radius:14px;
  background: linear-gradient(135deg, var(--card-color), var(--card-color-2));
  color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 45%, transparent);
  animation: egsIconFloat 3s ease-in-out infinite;
}
@keyframes egsIconFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-5px) rotate(-4deg); }
}
.egs-ind-card:hover .egs-ind-icon{
  animation: egsIconFloat 3s ease-in-out infinite, egsIconPop .5s ease;
}
@keyframes egsIconPop{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.2); }
}

/* ---- text ---- */
.egs-ind-front span{
  font-size:15px;font-weight:600;color:var(--egs-text);line-height:1.4;
}
.egs-ind-back p{
  font-size:13px; color: #000; line-height:1.6; margin-bottom:10px;
}
.egs-ind-back .egs-ind-badge{
  font-size:9.5px; font-weight:700; color:var(--card-color);
  border:1px solid var(--card-color); border-radius:100px; padding:3px 10px;
}

/* ---- responsive ---- */
@media(max-width:1024px){
  .egs-ind-grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:640px){
  .egs-ind-grid{grid-template-columns:repeat(2,1fr);}
}

/* ================= WHY CHOOSE ================= */
.egs-why{
  background: var(--egs-dark2);
  padding: 90px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.egs-why::before{
  content:"";
  position:absolute; top:-10%; right:-8%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.egs-why .egs-container{ position:relative; z-index:1; }

.egs-why-top h2{font-size:34px;line-height:1.28;margin-bottom:14px;color: #fff}
.egs-why-top .egs-rule{width:44px;height:3px;background:var(--egs-gradient);border-radius:2px;margin-bottom:44px;}

.egs-why-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:22px;
}

@media(max-width:900px){
  .egs-why-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media(max-width:640px){
  .egs-why-grid{grid-template-columns:1fr !important;}
}
.egs-why-item{
  background: rgba(255,255,255,.03);
  border: 1px solid color-mix(in srgb, var(--wc) 35%, transparent);
  border-radius: 18px;
  padding: 28px 24px;
  text-align:left;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
  opacity:0;
  animation: egsWhyIn .6s ease forwards;
}
.egs-why-item:nth-child(1){ --wc:#ff2d78; animation-delay:.05s; }
.egs-why-item:nth-child(2){ --wc:#8b5cf6; animation-delay:.15s; }
.egs-why-item:nth-child(3){ --wc:#3ba7ff; animation-delay:.25s; }
.egs-why-item:nth-child(4){ --wc:#2dd4c7; animation-delay:.35s; }
.egs-why-item:nth-child(5){ --wc:#ffb020; animation-delay:.45s; }
.egs-why-item:nth-child(6){ --wc:#ec4899; animation-delay:.55s; }

@keyframes egsWhyIn{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}

.egs-why-item:hover{
  transform: translateY(-8px);
  background: rgba(255,255,255,.05);
  border-color: var(--wc);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--wc) 20%, transparent);
}

.egs-why-icon{
  width:56px;height:56px;border-radius:14px;
  background: color-mix(in srgb, var(--wc) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--wc) 40%, transparent);
  display:flex;align-items:center;justify-content:center;
  color: var(--wc); font-size:22px;
  margin-bottom:18px;
  transition: transform .3s ease, background .3s ease;
}
.egs-why-item:hover .egs-why-icon{
  transform: scale(1.12) rotate(-6deg);
  background: var(--wc);
  color:#fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--wc) 55%, transparent);
}

.egs-why-item h4{
  font-size:16.5px;
  color: var(--wc);
  margin-bottom:10px;
  font-weight:700;
}
.egs-why-item p{
  font-size:13.5px; color: whitesmoke; line-height:1.7;
}

/* ================= CTA ================= */
.egs-cta-wrap{padding:0 0 60px;background:var(--egs-dark2);}

.egs-cta{
  max-width:var(--egs-max);margin:0 auto;
  border-radius:24px;padding:48px 50px;
  display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  position:relative;overflow:hidden;
  border:1px solid rgba(255,45,120,.25);

  background: linear-gradient(120deg, #2a0f22, #1a0f28, #2a1a12, #1a0f28);
  background-size: 300% 300%;
  animation: egsCtaGradient 10s ease infinite;
}
@keyframes egsCtaGradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.egs-cta::after{
  content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,61,.35), transparent 70%);
}
.egs-cta::before{
  content:"";position:absolute;left:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,45,120,.28), transparent 70%);
}

.egs-cta-text{position:relative;z-index:1;max-width:560px;}
.egs-cta-text h2{font-size:30px;color:#fff;line-height:1.3;margin-bottom:12px;}
.egs-cta-text p{color: wheat;font-size:15.5px;line-height:1.7;}

.egs-cta-right{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}

.egs-cta .egs-btn{position:relative;white-space:nowrap;}

/* button wrap — smooth pulse via box-shadow, no separate ring element */
.egs-cta-btn-wrap{
  position:relative;
  display:inline-flex;
  border-radius:100px;
}
.egs-cta-btn-wrap .egs-btn{
  animation: egsBtnPulse 2.2s ease-in-out infinite;
}
@keyframes egsBtnPulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,45,120,.5); }
  70%{ box-shadow: 0 0 0 14px rgba(255,45,120,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,45,120,0); }
}

/* trust strip — tick only on text spans, not on the dot separators */
.egs-cta-trust{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color: var(--egs-text-light-muted);
}
.egs-cta-trust span{ display:flex; align-items:center; gap:6px; }
.egs-cta-trust span:not(.egs-dot)::before{
  content:"✓";
  color: var(--egs-pink);
  font-weight:700;
  margin-right:2px;
}
.egs-cta-trust .egs-dot{ opacity:.4; }

@media(max-width:640px){
  .egs-cta{padding:34px 26px;}
  .egs-cta-text h2{font-size:22px;}
  .egs-cta-right{align-items:flex-start; width:100%;}
}

  /* ================= RESPONSIVE ================= */
  @media(max-width:1024px){
    .egs-service-grid{grid-template-columns:repeat(3,1fr);}
    .egs-tech-grid{grid-template-columns:repeat(3,1fr);}
    .egs-ind-grid{grid-template-columns:repeat(4,1fr);}
    .egs-why-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media(max-width:900px){
    .egs-hero-grid{grid-template-columns:1fr;}
    .egs-hero-visual{
    order:2;              /* image goes AFTER text */
    min-height:260px;
    margin-top:10px;
  }
    .egs-services-head, .egs-tech-top, .egs-industries-top{grid-template-columns:1fr;}
  }
  @media(max-width:640px){
    .egs-container{padding:0 20px;}
    .egs-hero-content h1{font-size:32px;}
    .egs-service-grid{grid-template-columns:1fr;}
    .egs-tech-grid{grid-template-columns:repeat(2,1fr);}
    .egs-ind-grid{grid-template-columns:repeat(2,1fr);}
    .egs-why-grid{grid-template-columns:1fr 1fr;}
    .egs-stats{gap:22px;}
    .egs-cta{padding:34px 26px;}
    .egs-cta-text h2{font-size:22px;}
  }

  @media (prefers-reduced-motion: reduce){
    .egs-cube, .egs-hero-orbit-icon{animation:none !important;}
  }

  


/* =========================================================
   WEB APP DEVELOPMENT
   UNIQUE PREFIX : WADV
========================================================= */

:root {
    --wadv-dark: #0c0812;
    --wadv-dark-2: #120d1a;

    --wadv-pink: #ff2d78;
    --wadv-orange: #ff7a3d;

    --wadv-gradient:
        linear-gradient(90deg, #ff2d78, #ff7a3d);

    --wadv-light: #f6f5f8;
    --wadv-white: #ffffff;

    --wadv-text: #161320;
    --wadv-muted: #6b6878;
    --wadv-light-muted: #b9b3c7;

    --wadv-border: #ececf1;
}


/* =========================================================
   RESET
========================================================= */

.wadv-hero,
.wadv-provide,
.wadv-process,
.wadv-results,
.wadv-breadcrumb {
    box-sizing: border-box;
}

.wadv-hero *,
.wadv-provide *,
.wadv-process *,
.wadv-results *,
.wadv-breadcrumb * {
    box-sizing: border-box;
}

.wadv-hero h1,
.wadv-hero p,
.wadv-provide h2,
.wadv-provide h3,
.wadv-provide p,
.wadv-process h2,
.wadv-process h4,
.wadv-process p,
.wadv-results h2,
.wadv-results h4,
.wadv-results p {
    margin: 0;
}

.wadv-hero img,
.wadv-provide img,
.wadv-process img,
.wadv-results img {
    max-width: 100%;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.wadv-container {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.wadv-breadcrumb {
    background: var(--wadv-dark);
    color: var(--wadv-light-muted);
    font-size: 13px;
    padding: 18px 0 10px;
}

.wadv-breadcrumb span {
    opacity: 0.8;
}


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

.wadv-hero {
    position: relative;
    overflow: hidden;
    padding: 38px 0 48px;
    color: #fff;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(112, 30, 82, 0.38),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255, 45, 120, 0.08),
            transparent 35%
        ),
        var(--wadv-dark);
}


.wadv-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 55px;
    align-items: center;
}


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

.wadv-hero-content {
    min-width: 0;
}

.wadv-eyebrow,
.wadv-section-eyebrow {
    margin-top: 70px;
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--wadv-pink);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
}

.wadv-eyebrow {
    margin-bottom: 18px;
}

.wadv-eyebrow::after,
.wadv-section-eyebrow::after {
    content: "";
    display: block;

    width: 42px;
    height: 1px;

    background: var(--wadv-pink);
    opacity: 0.65;
}


.wadv-hero h1 {
    max-width: 620px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.12;
    font-weight: 800;

    color: #fff;

    margin-bottom: 20px;
}


.wadv-hero h1 span,
.wadv-section-intro h2 span,
.wadv-process-intro h2 span,
.wadv-results-content h2 span {
    background: var(--wadv-gradient);

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

    color: transparent;
}


.wadv-hero-content > p {
    max-width: 540px;

    color: var(--wadv-light-muted);

    font-size: 17px;
    line-height: 1.75;

    margin-bottom: 28px;
}

.wadv-hero-content h1 span{
    background: linear-gradient(90deg, var(--wadv-pink), var(--wadv-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.wadv-hero-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}

.wadv-hero-content h1{
    text-shadow: none;
}
.wadv-hero-checks > div {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #fff;

    font-size: 13px;
    font-weight: 600;
}


.wadv-check-icon {
    width: 19px;
    height: 19px;

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

    border-radius: 50%;

    background: var(--wadv-gradient);

    font-size: 11px;
}


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

.wadv-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;

    padding: 25px 10px;
}



.wadv-dashboard-imgwrap{
    position: relative;
    z-index: 2;
}

.wadv-dashboard-img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.wadv-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 12px;
}


.wadv-stat-card {
    min-width: 0;

    padding: 10px;

    background: #1e1730;

    border-radius: 8px;
}


.wadv-stat-label {
    color: var(--wadv-light-muted);

    font-size: 9px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.wadv-stat-value {
    color: #fff;

    font-size: 15px;
    font-weight: 800;

    margin-top: 3px;
}


.wadv-stat-growth {
    color: #3ddc84;

    font-size: 9px;

    margin-top: 2px;
}


.wadv-chart-box {
    width: 100%;
    height: 95px;

    overflow: hidden;

    border-radius: 8px;

    background: #1e1730;
}


.wadv-chart-box svg {
    width: 100%;
    height: 100%;
}


/* =========================================================
   FLOATING HERO ICONS
========================================================= */

.wadv-floating-icon {
    position: absolute;
    z-index: 5;

    width: 52px;
    height: 52px;

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

    border-radius: 14px;

    color: #fff;

    font-size: 20px;

    background: var(--wadv-gradient);

    box-shadow:
        0 10px 30px rgba(255, 45, 120, 0.35);

    animation: wadvFloat 4s ease-in-out infinite;
}


.wadv-float-code {
    top: 5%;
    left: -2%;
}


.wadv-float-cloud {
    top: 0;
    right: -2%;

    background:
        linear-gradient(
            135deg,
            #3b2fb0,
            #5b4de6
        );

    animation-delay: -1s;
}


.wadv-float-database {
    right: -2%;
    bottom: 4%;

    background:
        linear-gradient(
            135deg,
            #c22a5c,
            #ff2d78
        );

    animation-delay: -2s;
}


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

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


/* =========================================================
   TECHNOLOGY FLOW
========================================================= */

.wadv-flow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: 30px;
}


.wadv-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 9px;
}


.wadv-flow-circle {
    width: 56px;
    height: 56px;

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

    border: 1.5px solid var(--flow-color, #35283f);
    border-radius: 50%;

    background: #160f20;

    color: var(--flow-color, #fff);

    font-size: 20px;

    box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
               0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
    transition:.25s;
}
.wadv-flow-node:hover .wadv-flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.wadv-flow-node:nth-child(1) .wadv-flow-circle{ --flow-color:#3ba7ff; }
.wadv-flow-node:nth-child(3) .wadv-flow-circle{ --flow-color:#ff2d78; }
.wadv-flow-node:nth-child(5) .wadv-flow-circle{ --flow-color:#2dd4c7; }
.wadv-flow-node:nth-child(7) .wadv-flow-circle{ --flow-color:#e8ebff; }

.flow-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:60px;flex-wrap:wrap;}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:10px;}
.flow-circle{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;background:#160f20;
  border:1.5px solid var(--flow-color, #35283f);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
             0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
  color:var(--flow-color, var(--text-light));
  transition:.25s;
}
.flow-node:hover .flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.flow-node:nth-child(1) .flow-circle{ --flow-color:#3ba7ff; }
.flow-node:nth-child(3) .flow-circle{ --flow-color:#ff2d78; }
.flow-node:nth-child(5) .flow-circle{ --flow-color:#2dd4c7; }
.flow-node:nth-child(7) .flow-circle{ --flow-color:#e8ebff; }
.flow-node span{font-size:11px;letter-spacing:1px;color:var(--text-light-muted);font-weight:600;}
.flow-node:hover span{color:var(--flow-color);}
.flow-arrow{color:var(--orange);font-size:18px;}

@keyframes arrowMove{
  0%{transform:translateX(0); opacity:.35;}
  50%{transform:translateX(8px); opacity:1; text-shadow:0 0 10px var(--wadv-orange);}
  100%{transform:translateX(0); opacity:.35;}
}

.wadv-flow-arrow {
    color: var(--wadv-orange);
    font-size: 18px;
    display: inline-block;
    animation: arrowMove 1.4s ease-in-out infinite;
}
.wadv-flow .wadv-flow-arrow:nth-of-type(1){animation-delay:0s;}
.wadv-flow .wadv-flow-arrow:nth-of-type(2){animation-delay:.3s;}
.wadv-flow .wadv-flow-arrow:nth-of-type(3){animation-delay:.6s;}

.wadv-flow-node span {
    color: var(--wadv-light-muted);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;

    text-align: center;
}


.wadv-flow-arrow {
    color: var(--wadv-orange);

    font-size: 18px;
}


/* =========================================================
   PROVIDE SECTION
========================================================= */

.wadv-provide {
    padding: 80px 0;

    background: #fdf2f6;
}


.wadv-provide-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;
}


.wadv-section-eyebrow {
    margin-bottom: 14px;
}


.wadv-section-intro h2,
.wadv-process-intro h2,
.wadv-results-content h2 {
    font-size: clamp(27px, 3vw, 34px);
    color: #000;
    line-height: 1.25;
    font-weight: 800;
}


.wadv-section-intro > p,
.wadv-process-intro > p,
.wadv-results-content > p {
    color: maroon;

    font-size: 14px;
    line-height: 1.75;

    margin-top: 16px;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.wadv-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.wadv-service-card {
    padding: 24px 20px;

    background: #fff;

    border: 1px solid lightpink;
    border-radius: 13px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
  --card-bg: #ffffff;
  --card-color: var(--wadv-pink);
  background: var(--card-bg);
  transition: background .3s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.wadv-service-card:nth-child(1){ --card-bg:#fff1f5; --card-color:#ff2d78; }
.wadv-service-card:nth-child(2){ --card-bg:#eef7ff; --card-color:#3ba7ff; }
.wadv-service-card:nth-child(3){ --card-bg:#fff9ec; --card-color:#ffb020; }
.wadv-service-card:nth-child(4){ --card-bg:#ecfdfb; --card-color:#2dd4c7; }
.wadv-service-card:nth-child(5){ --card-bg:#f5f1ff; --card-color:#8b5cf6; }
.wadv-service-card:nth-child(6){ --card-bg:#fff2ec; --card-color:#ff7a3d; }
.wadv-service-card:nth-child(7){ --card-bg:#eefdf3; --card-color:#22c55e; }
.wadv-service-card:nth-child(8){ --card-bg:#fdeef7; --card-color:#ec4899; }

.wadv-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 60%, var(--wadv-orange)));

    color: #fff;

    font-size: 18px;

    box-shadow: 0 6px 16px color-mix(in srgb, var(--card-color) 45%, transparent);

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

.wadv-service-card:hover .wadv-service-icon {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 65%, transparent);
}
.wadv-service-card:hover .wadv-service-icon{
  background: var(--card-color);
  color: #fff;
}


.wadv-service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 45, 120, 0.2);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.07);
}

/* gradient border on hover */
.wadv-service-card{
  position: relative;
  overflow: hidden;
}
.wadv-service-card::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--wadv-pink), var(--wadv-orange));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.wadv-service-card:hover::before{
  opacity: 1;
}

/* icon pop on hover */
.wadv-service-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.wadv-service-card:hover .wadv-service-icon{
  transform: scale(1.12) rotate(-6deg);
  background: linear-gradient(135deg, var(--wadv-pink), var(--wadv-orange));
  color: #fff;
}

/* scroll reveal setup — cards start hidden */
.wadv-service-card{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.wadv-service-card.wadv-reveal{
  opacity: 1;
  transform: translateY(0);
}

.wadv-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: #fdeef2;

    color: var(--wadv-pink);

    font-size: 18px;
}


.wadv-service-card h3 {
    color: var(--wadv-text);

    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;

    margin-bottom: 8px;
}


.wadv-service-card p {
    color: #000;

    font-size: 12.5px;
    line-height: 1.65;
}


/* =========================================================
   PROCESS
========================================================= */

.wadv-process {
    padding: 50px 0;

    background: var(--wadv-dark);

    color: #fff;
}


.wadv-process-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;

    align-items: center;
}


.wadv-process-intro .wadv-section-eyebrow {
    color: var(--wadv-pink);
}


.wadv-process-intro h2 {
    color: #fff;
}


.wadv-process-intro > p {
    color: var(--wadv-light-muted);
}
/* =========================================================
   PROCESS STEPS
========================================================= */
.wadv-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@keyframes stepPopIn{
  0%{
    opacity:0;
    transform: scale(.4) translateY(30px);
  }
  60%{
    opacity:1;
    transform: scale(1.08) translateY(-6px);
  }
  80%{
    transform: scale(.96) translateY(2px);
  }
  100%{
    opacity:1;
    transform: scale(1) translateY(0);
  }
}
@keyframes lineDraw{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

.wadv-step {
    position: relative;
    z-index: 2;
    text-align: center;

    opacity: 0;
    animation: stepPopIn .65s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.wadv-step-line {
    position: absolute;
    top: 38px;
    left: 8%;
    right: 8%;
    height: 2px;
    z-index: 1;
    border-radius: 2px;

    background: linear-gradient(
        90deg,
        var(--wadv-pink),
        var(--wadv-orange)
    );
    opacity: .35;
    overflow: visible;
}

@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}
@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}

.wadv-step-line::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);

  width: 22px;
  height: 6px;
  border-radius: 50%;

  background: #fff;
  box-shadow:
    0 0 10px 3px var(--wadv-pink),
    0 0 20px 6px var(--wadv-orange);

  animation: runLight 6.2s linear infinite;
}

.wadv-step:nth-child(2){ --step-color:#ff2d78; animation-delay: .5s; }
.wadv-step:nth-child(3){ --step-color:#3ba7ff; animation-delay: .8s; }
.wadv-step:nth-child(4){ --step-color:#2dd4c7; animation-delay: 1.1s; }
.wadv-step:nth-child(5){ --step-color:#ffb020; animation-delay: 1.4s; }

.wadv-step-circle {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 1.5px solid var(--step-color, var(--wadv-pink));
    border-radius: 50%;
    background: #160f20;
    font-size: 28px;
    color: var(--step-color, #fff);

    box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color, var(--wadv-pink)) 12%, transparent),
                0 0 20px color-mix(in srgb, var(--step-color, var(--wadv-pink)) 45%, transparent);

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

.wadv-step:hover .wadv-step-circle{
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--step-color, var(--wadv-pink)) 20%, transparent),
              0 0 30px color-mix(in srgb, var(--step-color, var(--wadv-pink)) 75%, transparent);
}

.wadv-step-number {
    color: var(--wadv-orange);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
}
.wadv-step:hover .wadv-step-number{
  color: var(--step-color);
}

.wadv-step h4 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 8px;
}
.wadv-step p {
    color: var(--wadv-light-muted);
    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   WHAT YOU GET
========================================================= */

.wadv-results {
    padding: 80px 0;
    background: linear-gradient(
        160deg,
        #ffffff 0%,
        #ffe9f0 35%,
        #ffe3d9 70%,
        #fff5ec 100%
    );
}

@keyframes blobFloat1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-20px) scale(1.1); }
}
@keyframes blobFloat2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-25px,25px) scale(1.15); }
}

.wadv-results {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #fffaf8;
}

.wadv-results::before,
.wadv-results::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.wadv-results::before{
    width: 420px;
    height: 420px;
    top: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(255,45,120,0.35), transparent 70%);
    animation: blobFloat1 9s ease-in-out infinite;
}

.wadv-results::after{
    width: 460px;
    height: 460px;
    bottom: -15%;
    right: -10%;
    background: radial-gradient(circle, rgba(255,122,61,0.35), transparent 70%);
    animation: blobFloat2 11s ease-in-out infinite;
}

.wadv-results-grid{
    position: relative;
    z-index: 1;
}

.wadv-results-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.1fr);

    gap: 60px;

    align-items: center;

    position: relative;   /* NEW */
    z-index: 1; 
}


/* =========================================================
   LAPTOP
========================================================= */

.wadv-laptop-area {
    position: relative;

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

    padding: 30px 20px;
}


.wadv-laptop {
    width: min(100%, 430px);

    position: relative;

    padding: 16px;

    background: #171022;

    border-radius: 14px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.2);
}


.wadv-laptop-screen {
    min-height: 220px;

    padding: 14px;

    border-radius: 8px;

    background: #1e1730;
}


.wadv-laptop-line {
    height: 8px;

    margin-bottom: 8px;

    border-radius: 4px;

    background: #33284a;
}


.wadv-line-40 {
    width: 40%;
}

.wadv-line-60 {
    width: 60%;
}

.wadv-line-80 {
    width: 80%;
}


.wadv-laptop-base {
    height: 14px;

    margin-top: 10px;

    border-radius: 0 0 10px 10px;

    background: #0f0a17;
}

@keyframes laptopFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

.wadv-laptop-img {
    width: min(100%, 460px);
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.25));

    animation: laptopFloat 5s ease-in-out infinite;
}

@keyframes badgeFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes badgePopIn{
  0%{ opacity:0; transform: scale(.3) translateY(20px); }
  60%{ opacity:1; transform: scale(1.15) translateY(-4px); }
  100%{ opacity:1; transform: scale(1) translateY(0); }
}

.wadv-mini-badge{
  opacity: 0;
  animation:
    badgePopIn .6s cubic-bezier(.34,1.56,.64,1) forwards,
    badgeFloat 3.5s ease-in-out infinite;
}

.wadv-mini-code{
  animation-delay: .2s, 1s;   /* pop-in delay, then float delay */
}
.wadv-mini-security{
  animation-delay: .4s, 1.3s;
}
.wadv-mini-growth{
  animation-delay: .6s, 1.6s;
}
.wadv-mini-success{
  animation-delay: .8s, 1.9s;
}

@keyframes benefitSlideIn{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}

.wadv-benefit{
  opacity: 0;
  animation: benefitSlideIn .6s ease forwards;
}

.wadv-benefit:nth-child(1){ animation-delay: .3s; }
.wadv-benefit:nth-child(2){ animation-delay: .5s; }
.wadv-benefit:nth-child(3){ animation-delay: .7s; }
.wadv-benefit:nth-child(4){ animation-delay: .9s; }

.wadv-benefit-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}

.wadv-benefit:hover .wadv-benefit-icon{
  transform: scale(1.15) rotate(-6deg);
  background: linear-gradient(135deg, var(--wadv-pink), var(--wadv-orange));
  color: #fff;
}

/* =========================================================
   LAPTOP FLOATING BADGES
========================================================= */

.wadv-mini-badge {
    position: absolute;
    z-index: 4;

    width: 54px;
    height: 54px;

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

    border-radius: 10px;

    color: #fff;

    font-size: 16px;

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


.wadv-mini-code {
    top: -6%;
    left: 8%;

    background: var(--wadv-gradient);
}


.wadv-mini-security {
    top: -20%;
    right: 10%;

    background: #2b2340;
}


.wadv-mini-growth {
    right: 8%;
    bottom: -14%;

    background: #2b2340;
}


.wadv-mini-success {
    left: 40%;
    bottom: -13%;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: var(--wadv-gradient);
}


/* =========================================================
   BENEFITS
========================================================= */

.wadv-benefit-grid {
    display: grid;

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

    gap: 26px 24px;

    margin-top: 28px;
}


.wadv-benefit {
    display: flex;

    gap: 14px;

    min-width: 0;
}


.wadv-benefit-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 9px;

    background: #fdeef2;

    color: var(--wadv-pink);

    font-size: 17px;
}


.wadv-benefit h4 {
    color: var(--wadv-text);

    font-size: 20px;

    margin-bottom: 5px;
}


.wadv-benefit p {
    color: var(--wadv-muted);

    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .wadv-container {
        width: min(1180px, calc(100% - 48px));
    }


    .wadv-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .wadv-provide-grid,
    .wadv-process-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .wadv-section-intro,
    .wadv-process-intro {
        max-width: 650px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .wadv-hero {
        padding-top: 40px;
    }


    .wadv-hero-grid,
    .wadv-results-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }
    
    .wadv-results-content {
        order: 1;
    }

    .wadv-laptop-area {
        order: 2;
    }

    .wadv-hero-content {
        text-align: center;
    }


    .wadv-eyebrow {
        justify-content: center;
    }


    .wadv-hero h1 {
        margin-left: auto;
        margin-right: auto;
    }


    .wadv-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }


    .wadv-hero-checks {
        justify-content: center;
    }


    .wadv-hero-visual {
        max-width: 680px;

        margin: 0 auto;
    }


    .wadv-results-content {
        max-width: 700px;
        margin: 0 auto;
    }


    .wadv-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 40px;
    }


    .wadv-step-line {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */
/* HERO TEXT MOBILE FIX ONLY
@media screen and (max-width:600px){
  .wadv-hero-content{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:0 4px;
    text-align:left !important;
  }

  .wadv-eyebrow{
    width:100%;
    max-width:100%;
    margin-top:54px;
    margin-bottom:18px;
    justify-content:flex-start !important;
    gap:8px;
    font-size:10px;
    line-height:1.4;
    letter-spacing:.7px;
    white-space:normal;
  }

  .wadv-eyebrow::after{
    width:34px;
    flex:0 0 34px;
  }

  .wadv-hero h1{
    width:100%;
    max-width:360px;
    margin:0 0 18px;
    padding:0;
    font-size:clamp(28px,7.6vw,32px);
    line-height:1.12;
    letter-spacing:-.4px;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .wadv-hero h1 span{
    display:inline;
  }

  .wadv-hero-content > p{
    width:100%;
    max-width:350px;
    margin:0 0 26px;
    padding:0 2px;
    font-size:14px;
    line-height:1.5;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .wadv-hero-checks{
    width:100%;
    max-width:100%;
    margin:0;
    align-items:flex-start;
    gap:11px;
    text-align:left;
  }

  .wadv-hero-checks > div{
    width:auto;
    justify-content:flex-start;
    font-size:13px;
    line-height:1.35;
  }
}

@media screen and (max-width:380px){
  .wadv-eyebrow{margin-top:48px;font-size:9px;}
  .wadv-eyebrow::after{width:26px;flex-basis:26px;}

  .wadv-hero h1{
    max-width:320px;
    font-size:26px;
  }

  .wadv-hero-content > p{
    max-width:320px;
    font-size:13.5px;
  }
}


@media screen and (max-width:380px){
  .wadv-eyebrow{margin-top:48px;font-size:9px;}
  .wadv-eyebrow::after{width:26px;flex-basis:26px;}

  .wadv-hero h1{
    max-width:320px;
    font-size:26px;
  }

  .wadv-hero-content > p{
    max-width:320px;
    font-size:13.5px;
  }
}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .wadv-container {
        width: calc(100% - 24px);
    }


    .wadv-hero h1 {
        font-size: 28px;
    }


    .wadv-dashboard-sidebar {
        width: 65px;
        flex-basis: 65px;
    }


    .wadv-dashboard-main {
        padding: 8px;
    }


    .wadv-stat-value {
        font-size: 10px;
    }


    .wadv-flow {
        gap: 4px;
    }


    .wadv-flow-circle {
        width: 38px;
        height: 38px;
    }


    .wadv-flow-arrow {
        font-size: 11px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .wadv-floating-icon,
    .wadv-service-card {
        animation: none;
        transition: none;
    }

}

/*============================================================
               Mobile App Development
============================================================*/
 :root{
    --mad-black:#0b0b10;
    --mad-black-2:#121016;
    --mad-pink:#ef2d7e;
    --mad-orange:#f6923a;
    --mad-cream:#faf5f2;
    --mad-cream-2:#f4ece7;
    --mad-white:#ffffff;
    --mad-text-dark:#141217;
    --mad-text-muted:#6b6570;
    --mad-text-light:#c9c4cd;
    --mad-gradient: linear-gradient(90deg, var(--mad-pink), var(--mad-orange));
    --mad-radius: 16px;
    --mad-max-w: 1200px;
  }

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

  @keyframes mad-mesh-move{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(-3%, 2%) scale(1.08); }
    100%{ transform: translate(0,0) scale(1); }
  }
  @keyframes mad-mesh-move-2{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(4%, -3%) scale(1.05); }
    100%{ transform: translate(0,0) scale(1); }
  }
  @keyframes mad-pulse{
    0%,100%{ opacity:0.55; transform: translateX(-50%) scale(1); }
    50%{ opacity:0.9; transform: translateX(-50%) scale(1.12); }
  }
  @keyframes mad-float-y{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
  }
  @keyframes mad-fade-up-blur{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}
  @keyframes mad-count-fade{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
  }
  @keyframes mad-draw-line{
    from{ stroke-dashoffset: 260; }
    to{ stroke-dashoffset: 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .mad-hero *{ animation: none !important; transition: none !important; }
  }

  body{
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    color: var(--mad-text-dark);
    background: var(--mad-white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}

  .mad-container{
    max-width: var(--mad-max-w);
    margin: 0 auto;
    padding: 0 32px;
  }

  .mad-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color: var(--mad-pink);
  }
  .mad-eyebrow-dot{
    width:6px; height:6px; border-radius:50%;
    background: var(--mad-pink);
    display:inline-block;
  }
  .mad-eyebrow--boxed{
    position:relative;
    border:1px solid transparent;
    padding:8px 16px;
    border-radius:999px;
    background:
      linear-gradient(#0b0b10,#0b0b10) padding-box,
      conic-gradient(from 0deg, var(--mad-pink), var(--mad-orange), var(--mad-pink)) border-box;
    animation: mad-border-spin 4s linear infinite;
  }
  @keyframes mad-border-spin{
    to{ filter: hue-rotate(0deg); background:
      linear-gradient(#0b0b10,#0b0b10) padding-box,
      conic-gradient(from 360deg, var(--mad-pink), var(--mad-orange), var(--mad-pink)) border-box;
    }
  }

  .mad-gradient-text{
    background: linear-gradient(100deg, var(--mad-pink) 20%, var(--mad-orange) 40%, #ffd8b0 50%, var(--mad-orange) 60%, var(--mad-pink) 80%);
    background-size: 250% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation: mad-shimmer 5s linear infinite;
  }
  @keyframes mad-shimmer{
    0%{ background-position: 200% 0; }
    100%{ background-position: -50% 0; }
  }

  /* ---------------- HERO ---------------- */
  .mad-hero{
    background: #08080c;
    color: var(--mad-white);
    padding: 105px 0 50px;
    overflow:hidden;
    position:relative;
  }
  .mad-hero__mesh{
    position:absolute; inset:-10%;
    z-index:0;
    pointer-events:none;
  }
  .mad-hero__mesh span{
    position:absolute;
    border-radius:50%;
    filter: blur(70px);
    opacity:0.5;
  }
  .mad-hero__mesh span:nth-child(1){
    width:420px; height:420px; top:-8%; right:8%;
    background: radial-gradient(circle, rgba(239,45,126,0.55), transparent 70%);
    animation: mad-mesh-move 14s ease-in-out infinite;
  }
  .mad-hero__mesh span:nth-child(2){
    width:380px; height:380px; bottom:-10%; right:26%;
    background: radial-gradient(circle, rgba(246,146,58,0.4), transparent 70%);
    animation: mad-mesh-move-2 18s ease-in-out infinite;
  }
  .mad-hero__mesh span:nth-child(3){
    width:300px; height:300px; top:20%; left:-6%;
    background: radial-gradient(circle, rgba(120,40,160,0.35), transparent 70%);
    animation: mad-mesh-move 20s ease-in-out infinite reverse;
  }
  .mad-hero__grain{
    position:absolute; inset:0; z-index:1;
    opacity:0.05;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .mad-hero__particles{
    position:absolute; inset:0; z-index:1; pointer-events:none;
  }
  .mad-hero__particles span{
    position:absolute;
    width:3px; height:3px;
    border-radius:50%;
    background: var(--mad-orange);
    opacity:0.5;
    animation: mad-particle-float linear infinite;
  }
  .mad-hero__particles span:nth-child(odd){ background: var(--mad-pink); }
  @keyframes mad-particle-float{
    0%{ transform: translateY(0) translateX(0); opacity:0; }
    10%{ opacity:0.6; }
    90%{ opacity:0.6; }
    100%{ transform: translateY(-140px) translateX(20px); opacity:0; }
  }
  .mad-hero__spotlight{
    position:absolute;
    top:-20%; left:50%;
    width:600px; height:500px;
    transform: translateX(-50%);
    background: conic-gradient(from 180deg at 50% 0%, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
    z-index:1;
    pointer-events:none;
  }
  .mad-hero__cursor-glow{
    position:absolute;
    width:420px; height:420px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(239,45,126,0.16), transparent 70%);
    top:0; left:0;
    transform: translate(-50%,-50%);
    pointer-events:none;
    z-index:1;
    opacity:0;
    transition: opacity 0.4s ease;
  }
  .mad-hero__grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items:center;
  }
 .mad-hero__title{
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  margin: 20px 0 20px;
  letter-spacing:-0.5px;
  color: #ffffff;
  text-shadow: none;
  animation: mad-fade-up-blur 0.8s ease both;
  animation-delay: 0.05s;
}
  .mad-hero__desc{
    color: whitesmoke;
    font-size: 17px;
    max-width: 480px;
    margin-bottom: 24px;
    animation: mad-fade-up-blur 0.8s ease both;
    animation-delay: 0.2s;
  }
  .mad-hero__features{
    display:flex;
    flex-wrap:wrap;
    gap: 14px 28px;
    margin-bottom: 36px;
  }
  .mad-hero__feature{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color: whitesmoke;
    opacity:0;
    animation: mad-count-fade 0.6s ease forwards;
    transition: transform 0.25s ease, color 0.25s ease;
    cursor:default;
  }
  .mad-hero__feature:hover{
    transform: translateX(4px);
    color: #fff;
  }
  .mad-hero__feature:nth-child(1){ animation-delay:0.35s; }
  .mad-hero__feature:nth-child(2){ animation-delay:0.45s; }
  .mad-hero__feature:nth-child(3){ animation-delay:0.55s; }
  .mad-hero__feature:nth-child(4){ animation-delay:0.65s; }
  .mad-hero__feature:nth-child(5){ animation-delay:0.75s; }
  .mad-check{
    width:18px; height:18px;
    border-radius:50%;
    background: rgba(239,45,126,0.15);
    color: var(--mad-pink);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    flex-shrink:0;
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .mad-hero__feature:hover .mad-check{
    transform: scale(1.15);
    background: var(--mad-pink);
    color:#fff;
  }

  .mad-stats{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    opacity:0;
    animation: mad-count-fade 0.7s ease forwards;
    animation-delay: 0.85s;
  }
  .mad-stat{
    position:relative;
    padding: 22px 16px 18px;
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow:hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  .mad-stat::before{
    content:"";
    position:absolute; inset:0;
    border-radius:16px;
    padding:1px;
    background: var(--mad-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:0;
    transition: opacity 0.3s ease;
    pointer-events:none;
  }
  .mad-stat:hover{
    transform: translateY(-6px) scale(1.03);
    border-color: transparent;
    background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
    box-shadow: 0 16px 34px rgba(239,45,126,0.22);
  }
  .mad-stat:hover::before{ opacity:1; }
  .mad-stat__icon{
    width:34px; height:34px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(239,45,126,0.22), rgba(246,146,58,0.16));
    color: var(--mad-pink);
    font-size:15px;
    margin-bottom:12px;
    transform: rotate(-90deg) scale(0.5);
    opacity:0;
    animation: mad-icon-spin-in 0.6s ease forwards;
  }
  .mad-stat:nth-child(1) .mad-stat__icon{ animation-delay: 1s; }
  .mad-stat:nth-child(2) .mad-stat__icon{ animation-delay: 1.12s; }
  .mad-stat:nth-child(3) .mad-stat__icon{ animation-delay: 1.24s; }
  .mad-stat:nth-child(4) .mad-stat__icon{ animation-delay: 1.36s; }
  .mad-stat__num{ font-size:24px; font-weight:800; letter-spacing:-0.3px; }
  .mad-stat__label{ font-size:12px; color: var(--mad-text-muted); margin-top:3px;}
  .mad-stat__bar{
    height:3px;
    border-radius:2px;
    background: rgba(255,255,255,0.08);
    margin-top:14px;
    overflow:hidden;
  }
  .mad-stat__bar span{
    display:block;
    height:100%;
    width:0%;
    background: var(--mad-gradient);
    border-radius:2px;
    transition: width 1.3s cubic-bezier(.22,1,.36,1);
  }
  @keyframes mad-icon-spin-in{
    to{ transform: rotate(0deg) scale(1); opacity:1; }
  }

  /* Hero phone showcase */
  .mad-hero__visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: 460px;
    perspective: 1200px;
    opacity:0;
    animation: mad-count-fade 1s ease forwards;
    animation-delay: 0.3s;
  }
  .mad-hero__glow{
    position:absolute;
    bottom:10px;
    left:50%;
    width: 340px;
    height: 100px;
    background: radial-gradient(ellipse at center, rgba(239,45,126,0.55), rgba(246,146,58,0.15) 60%, transparent 75%);
    filter: blur(6px);
    border-radius:50%;
    animation: mad-pulse 4s ease-in-out infinite;
  }
  .mad-phones{
    position:relative;
    display:flex;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    gap: -20px;
    z-index:2;
    animation: mad-zoom-reveal 1s cubic-bezier(.22,1,.36,1) both;
    animation-delay: 0.2s;
  }
  @keyframes mad-zoom-reveal{
    from{ transform: scale(1.25); opacity:0; }
    to{ transform: scale(1); opacity:1; }
  }
  .mad-phone{
    width: 220px;
    height: 420px;
    background: #0d0d10;
    border: 6px solid #1c1c22;
    border-radius: 34px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    padding: 14px 12px;
    position:relative;
    display:flex;
    flex-direction:column;
    gap:20px;
    overflow:hidden;
  }
  .mad-phone::after{
    content:"";
    position:absolute;
    top:-120%; left:-40%;
    width:60%; height:340%;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
    transform: rotate(20deg);
    animation: mad-screen-sweep 5s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes mad-screen-sweep{
    0%,100%{ left:-40%; }
    50%{ left:110%; }
  }
  .mad-hero__visual:hover .mad-phones{
    transform: rotateY(-6deg) rotateX(3deg);
  }
  .mad-phone--front{
    transform: translateY(30px);
    margin-left:-40px;
    z-index:3;
    transition: transform 0.4s ease;
  }

  .mad-phone--back{
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.92);
}
    .mad-hero__visual:hover .mad-phone--front{
    transform: translateY(24px) translateZ(30px);
  }
  .mad-hero__visual:hover .mad-phone--back{
  transform: translateY(-14px) scale(0.98) translateZ(-10px);
  filter: brightness(0.88);
}
  .mad-phone__notch{
    position:absolute;
    top:0; left:50%; transform:translateX(-50%);
    width:70px; height:18px;
    background:#1c1c22;
    border-radius:0 0 12px 12px;
  }
  .mad-phone__status{
    display:flex; justify-content:space-between;
    font-size:9px; color:#fff; opacity:0.6;
    margin-top:6px;
  }
  .mad-phone__greeting{ font-size:11px; color:#8f8b93; margin-top:8px;}
  .mad-phone__name{ font-size:14px; font-weight:700; color:#fff;}
  .mad-phone__balance-card{
    background: linear-gradient(135deg, #241621, #1a1220);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:14px;
    padding:12px;
    margin-top:8px;
  }
  .mad-phone__balance-label{ font-size:9px; color:#8f8b93;}
  .mad-phone__balance-amount{ font-size:20px; font-weight:800; color:#fff; margin-top:4px;}
  .mad-phone__balance-chart{ height:30px; margin-top:8px;}
  .mad-phone__tx-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:9.5px; color:#cfcbd4;
    padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .mad-phone__tx-amt{ color:#ef2d7e; font-weight:700;}
  .mad-phone__tabbar{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,0.06);
  }
  .mad-phone__tab{ font-size:8px; color:#68636f; text-align:center;}
  .mad-phone__tab--active{ color:#ef2d7e;}

  .mad-phone__cats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px;
  }
  .mad-phone__cat{
    background: rgba(255,255,255,0.04);
    border-radius:10px;
    padding:8px 4px;
    text-align:center;
    font-size:7px;
    color:#cfcbd4;
  }
  .mad-phone__cat-ic{ font-size:14px; margin-bottom:2px;}
  .mad-phone__promo{
    background: linear-gradient(135deg, #3a1024, #201018);
    border-radius:12px;
    padding:10px;
    margin-top:10px;
    font-size:9px;
    color:#fff;
  }
  .mad-phone__promo strong{ font-size:12px; display:block; margin-bottom:4px;}
  .mad-phone__products{
    display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px;
  }
  .mad-phone__product{
    background: rgba(255,255,255,0.04);
    border-radius:8px;
    padding:8px 4px;
    text-align:center;
    font-size:7px;
    color:#cfcbd4;
  }

  .mad-badge{
    position:absolute;
    width:60px; height:60px;
    border-radius:18px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px;
    font-size:9px;
    font-weight:700;
    color:#fff;
    background: rgba(20,18,22,0.9);
    z-index:4;
  }
  .mad-badge--ios{ left:-5%; top:18%; border:1px solid rgba(239,45,126,0.5); }
  .mad-badge--android{ right:2%; top:18%; border:1px solid rgba(246,146,58,0.5); }
  .mad-badge--float{ animation: mad-float-y 4s ease-in-out infinite; }
  .mad-badge--float-2{ animation: mad-float-y 4.5s ease-in-out infinite 0.6s; }

  .mad-phone__balance-chart polyline{
    animation: mad-draw-line 1.6s ease forwards;
    animation-delay: 1.1s;
  }
  .mad-tx-row--1, .mad-tx-row--2, .mad-tx-row--3{
    opacity:0;
    animation: mad-count-fade 0.5s ease forwards;
  }
  .mad-tx-row--1{ animation-delay: 1.5s; }
  .mad-tx-row--2{ animation-delay: 1.65s; }
  .mad-tx-row--3{ animation-delay: 1.8s; }
  .mad-badge__icon{ font-size:20px; }

  /* ================= MAD-HERO — RESPONSIVE (ALL SIZES) ================= */

@media (max-width: 980px){
  .mad-hero{
    padding: 80px 0 40px;
  }
  .mad-hero__grid{
    display:flex;
    flex-direction:column;
    gap: 40px;
  }
  .mad-hero-content{
    order:1;
  }
  .mad-hero__visual{
    order:2;
    min-height:360px;
    overflow: hidden;
  }
  .mad-hero__title{
    font-size: 34px;
  }
  .mad-hero__desc{
    font-size: 15px;
    max-width: 100%;
  }
  .mad-hero__features{
    gap: 12px 22px;
    margin-bottom: 28px;
  }
  .mad-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .mad-phones{
    transform: scale(0.62);
    transform-origin: center center;
  }
}

@media (max-width: 640px){
  .mad-container{
    padding: 0 20px;
  }
  .mad-hero{
    padding: 70px 0 36px;
  }
  .mad-hero__grid{
    gap: 32px;
  }
  .mad-hero__title{
    font-size: 27px;
    line-height: 1.2;
    margin: 14px 0 14px;
  }
  .mad-hero__desc{
    font-size: 13.5px;
    margin-bottom: 20px;
  }
  .mad-hero__features{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
  }
  .mad-hero__feature{
    font-size: 13px;
  }
  .mad-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .mad-stat{
    padding: 16px 12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .mad-stat__num{
    font-size: 19px;
  }
  .mad-stat__label{
    font-size: 10.5px;
  }
  .mad-stat__icon{
    width: 28px;
    height: 28px;
    font-size: 13px;
    margin-bottom: 8px;
  }
  .mad-hero__visual{
    min-height: 300px;
  }
 .mad-phones{
    transform: scale(0.6);
    transform-origin: center center;
  }
  .mad-hero__visual:hover .mad-phones{
    transform: scale(0.72) rotateY(-6deg) rotateX(3deg);
  }
  .mad-badge{
    width: 48px;
    height: 48px;
    font-size: 8px;
    border-radius: 14px;
  }
  .mad-badge__icon{
    font-size: 16px;
  }
  .mad-hero__stats-wrap{
    overflow-x:auto;
  }
}

@media (max-width: 380px){
  .mad-hero__title{
    font-size: 23px;
  }
  .mad-stats{
    grid-template-columns: 1fr 1fr;
  }
  .mad-stat__num{
    font-size: 17px;
  }
  .mad-phones{
    transform: scale(0.48);
  }
}

  /* ---------------- SECTION 2: Powerful Apps ---------------- */
.mad-platforms{
  position:relative;
  background: var(--mad-white);
  padding: 88px 0;
  overflow:hidden;
}
.mad-platforms::before{
  content:"";
  position:absolute;
  top:-100px; right:-80px;
  width:520px; height:520px;
  background: radial-gradient(circle, rgba(239,45,126,0.16), transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: mad-platform-blob-1 12s ease-in-out infinite;
}
.mad-platforms::after{
  content:"";
  position:absolute;
  bottom:-120px; left:-80px;
  width:460px; height:460px;
  background: radial-gradient(circle, rgba(246,146,58,0.14), transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: mad-platform-blob-2 15s ease-in-out infinite;
}
@keyframes mad-platform-blob-1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-30px, 25px) scale(1.1); }
}
@keyframes mad-platform-blob-2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(25px, -20px) scale(1.08); }
}
.mad-platforms__top, .mad-perks{
  position:relative;
  z-index:1;
}
  .mad-platforms__top{
    display:grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    align-items:start;
  }
  .mad-section-title{
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    line-height:1.2;
    margin: 14px 0 16px;
    color: var(--mad-text-dark);
  }
  .mad-section-desc{
    color: var(--mad-text-muted);
    font-size:15px;
    max-width:400px;
  }
  .mad-platform-cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

.mad-platform-card{
  background: var(--mad-cream);
  border: 1px solid #ece1da;
  border-radius: var(--mad-radius);
  border-color: var(--mad-pink);
  padding: 28px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow: 0 6px 18px rgba(20,18,23,0.05);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.mad-platform-card:hover{
  border-color: var(--mad-pink);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(239,45,126,0.12);
}
.mad-platform-card__icon{
  width:54px; height:54px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(239,45,126,0.14), rgba(246,146,58,0.1));
  font-size:26px;
  transition: transform 0.25s ease;
}
.mad-platform-card:hover .mad-platform-card__icon{
  transform: scale(1.08) rotate(-4deg);
}
  .mad-platform-card__title{ font-size:17px; font-weight:700; color: var(--mad-text-dark); }
  .mad-platform-card__text{ font-size:13.5px; color: var(--mad-text-muted); }
.mad-platform-card__underline{
  width:32px; height:4px;
  background: var(--mad-gradient);
  border-radius:3px;
  margin-top:auto;
  transition: width 0.3s ease;
}
.mad-platform-card:hover .mad-platform-card__underline{
  width:56px;
}

.mad-perks{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
  padding-top: 40px;
  position:relative;
}
.mad-perk{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:20px 12px;
  border-radius:16px;
  position: relative;
  transition: background 0.25s ease, transform 0.25s ease;
}

.mad-perk__label::after{
  content:"";
  position:absolute;
  bottom:0; left:0;
  width:0;
  height:2px;
  background: var(--mad-gradient);
  transition: width 0.25s ease;
}
.mad-perk:hover{
  background: var(--mad-cream);
  transform: translateY(-3px);
}
.mad-perk:not(:last-child)::after{
  content:"";
  position:absolute;
  top:10px; right:-12px;
  bottom:10px;
  width:1px;
  background: #ece1da;
}
.mad-perks::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:70%;
  height:1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ece1da 20%, #ece1da 80%, transparent);
}
.mad-perks::after{
  content:"✦";
  position:absolute;
  top:-8px; left:50%;
  transform: translateX(-50%);
  color: var(--mad-pink);
  font-size:14px;
  background: var(--mad-white);
  padding: 0 12px;
}
.mad-perk__icon{
  width:70px; height:70px;
  border-radius:16px;
  background: linear-gradient(135deg, var(--mad-pink), #f6923a);
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  color:#fff;
  box-shadow: 0 8px 22px rgba(239,45,126,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: madPerkPulse 2.4s ease-in-out infinite;
}

.mad-perk:hover .mad-perk__icon{
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 14px 30px rgba(239,45,126,0.5);
}
.mad-perk__label{
  font-size:16px;
  font-weight:600;
  position:relative;
  padding-bottom:4px;
  color: var(--mad-text-dark);
}
.mad-perk__label::after{
  content:"";
  position:absolute;
  bottom:0; left:0;
  width:0;
  height:2px;
  background: var(--mad-gradient);
  transition: width 0.25s ease;
}
.mad-perk:hover .mad-perk__label::after{
  width:100%;
}
.mad-perk__desc{
  font-size:15.5px;
  color: maroon;
  margin-top:2px;
}
.mad-platforms__badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.mad-platforms__badge{
  font-size:13.5px;
  font-weight:600;
  padding:8px 14px;
  border-radius:999px;
  background: #fff;
  border:1.5px solid;
  transition: transform .2s ease;
}
.mad-platforms__badge:hover{ transform: translateY(-2px); }
.mad-badge-swift{ border-color:#ff5722; color:#ff5722; }
.mad-badge-kotlin{ border-color:#8b5cf6; color:#8b5cf6; }
.mad-badge-react{ border-color:#3ba7ff; color:#3ba7ff; }
.mad-badge-flutter{ border-color:#2dd4c7; color:#2dd4c7; }

@keyframes madPerkPulse{
  0%,100%{ box-shadow: 0 4px 14px rgba(239,45,126,0.08); }
  50%{ box-shadow: 0 4px 22px rgba(239,45,126,0.28); }
}
.mad-perk__icon{
  animation: madPerkPulse 2.4s ease-in-out infinite;
}
.mad-perk:nth-child(1) .mad-perk__icon{ animation-delay:0s; }
.mad-perk:nth-child(2) .mad-perk__icon{ animation-delay:.3s; }
.mad-perk:nth-child(3) .mad-perk__icon{ animation-delay:.6s; }
.mad-perk:nth-child(4) .mad-perk__icon{ animation-delay:.9s; }
.mad-platform-cards{
  perspective: 1000px;
}
.mad-platform-card{
  position:relative;
  transform-style: preserve-3d;
  transition: transform .15s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.mad-platform-card__num{
  font-size:26px;
  font-weight:800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(239,45,126,.4);
  position:absolute;
  top:16px; right:20px;
}
.mad-platform-card__icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--mad-gradient);
  color:#fff;
  font-size:22px;
  box-shadow: 0 10px 24px rgba(239,45,126,.35);
  transition: transform 0.25s ease;
}
.mad-platform-card:hover .mad-platform-card__icon{
  transform: scale(1.1) rotate(-6deg);
}
  /* ---------------- SECTION 3: Ecosystem ---------------- */
  .mad-ecosystem{
    background: var(--mad-black);
    color:#fff;
    padding: 75px 0;
    overflow-x:auto;
  }
  .mad-ecosystem__intro{
    max-width:670px;
    margin-bottom:57px;
  }
  .mad-flow{
    display:flex;
    align-items:center;
    gap: 14px;
    flex-wrap:nowrap;
  }
  .mad-flow__phone{
    width:155px;
    background:#141017;
    border:6px solid #211c26;
    border-radius:29px;
    padding:14px 10px;
    flex-shrink:0;
  }
  .mad-flow__phone-label{ font-size:8px; color:#8f8b93; }
.mad-flow__phone-ring{
  width:64px; height:64px;
  border-radius:50%;
  border:6px solid #2a2430;
  border-top-color: var(--mad-pink);
  border-right-color: var(--mad-orange);
  margin: 12px auto;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
  animation: mad-ring-spin 3s linear infinite;
}
@keyframes mad-ring-spin{
  to{ transform: rotate(360deg); }
}
  .mad-flow__phone-bars{
    display:flex; align-items:flex-end; gap:3px; height:30px; margin-top:10px;
  }
.mad-flow__phone-bars span{
  flex:1; background: linear-gradient(180deg, var(--mad-pink), var(--mad-orange)); border-radius:2px;
  animation: mad-bar-pulse 1.6s ease-in-out infinite;
}
.mad-flow__phone-bars span:nth-child(1){ animation-delay:0s; }
.mad-flow__phone-bars span:nth-child(2){ animation-delay:0.15s; }
.mad-flow__phone-bars span:nth-child(3){ animation-delay:0.3s; }
.mad-flow__phone-bars span:nth-child(4){ animation-delay:0.45s; }
.mad-flow__phone-bars span:nth-child(5){ animation-delay:0.6s; }
.mad-flow__phone-bars span:nth-child(6){ animation-delay:0.75s; }
@keyframes mad-bar-pulse{
  0%,100%{ transform: scaleY(0.6); opacity:0.7; }
  50%{ transform: scaleY(1); opacity:1; }
}
.mad-flow__arrow{
  color: var(--mad-orange);
  font-size:48px;
  flex-shrink:0;
  position:relative;
  width:25px;
  text-align:center;
  overflow:visible;
}
.mad-flow__arrow::after{
  content:"";
  position:absolute;
  top:50%; left:0;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--mad-pink);
  box-shadow: 0 0 8px var(--mad-pink), 0 0 14px rgba(239,45,126,0.6);
  transform: translateY(-50%);
  animation: mad-dot-travel 1.8s linear infinite;
}
.mad-flow__arrow:nth-of-type(1)::after{ animation-delay: 0s; }
@keyframes mad-dot-travel{
  0%{ left:0; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}
  .mad-flow__box{
    background:#141017;
    border:1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 16px;
    width: 150px;
    flex-shrink:0;
    text-align:center;
  }
  .mad-flow__box:hover{
  border-color: rgba(239,45,126,0.5);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(239,45,126,0.15);
}
  .mad-flow__box-icon{
    font-size:29px;
    color: var(--mad-pink);
    margin-bottom:10px;
  }
  .mad-flow__box-title{ font-size:18px; font-weight:700; margin-bottom:9px; color: white;}
  .mad-flow__box-text{ font-size:15.5px; color:whitesmoke; line-height:1.4;}

  .mad-flow__integrations{
    background:#141017;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:18px 18px;
    width: 170px;
    flex-shrink:0;
  }
  .mad-flow__integrations-title{ font-size:18px; font-weight:700; margin-bottom:14px;}
  .mad-flow__integrations li{
    display:flex; align-items:center; gap:10px;
    font-size:14px; color: whitesmoke;
    padding:5px 0;
  }
.mad-flow__integrations li span:first-child{
  color: var(--mad-pink);
  font-size:12px;
  width:29px; height:29px;
  border-radius:7px;
  background: linear-gradient(135deg, rgba(239,45,126,0.18), rgba(246,146,58,0.12));
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
  .mad-flow__caption{
    text-align:center;
    font-size:13px;
    font-weight:700;
    color: var(--mad-pink);
    margin-top:10px;
  }


  /* ---------------- SECTION 4: Business Impact ---------------- */
  .mad-impact{
  background: linear-gradient(160deg, var(--mad-cream) 0%, #f9d9e4 50%, #fce0c8 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.mad-impact::before{
  content:"";
  position:absolute; top:-10%; left:-8%;
  width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(239,45,126,.10), transparent 70%);
  filter: blur(20px);
  animation: madImpactBlobDrift 8s ease-in-out infinite;
}
@keyframes madImpactBlobDrift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(20px,-15px) scale(1.08); }
}
.mad-impact::after{
  content:"";
  position:absolute; bottom:-12%; right:-8%;
  width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(246,146,58,.12), transparent 70%);
  filter: blur(20px);
  animation: madImpactBlobDrift2 10s ease-in-out infinite;
  z-index:0;
}
@keyframes madImpactBlobDrift2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-18px,15px) scale(1.1); }
}

.mad-impact .mad-container{ position:relative; z-index:1; }

@keyframes madImpactFadeUp{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}
.mad-impact .mad-eyebrow,
.mad-impact .mad-section-title,
.mad-impact__desc{
  opacity:0;
  animation: madImpactFadeUp .6s ease forwards;
}
.mad-impact .mad-eyebrow{ animation-delay:.1s; }
.mad-impact .mad-section-title{ animation-delay:.25s; }
.mad-impact__desc{ animation-delay:.4s; }
  .mad-impact__grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items:center;
  }
  .mad-impact__desc{
    color: var(--mad-text-muted);
    font-size:15px;
    max-width:420px;
    margin-bottom:32px;
  }
  .mad-impact__list{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px;
  }
  .mad-impact__item{
    display:flex;
    gap:12px;
  }
  .mad-impact__icon{
    width:40px; height:40px;
    border-radius:10px;
    background: var(--mad-pink);
    color: var(--mad-pink);
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
    flex-shrink:0;
  }
  .mad-impact__item-title{ font-size:16.5px; font-weight:700; margin-bottom:4px; color: #000;}
  .mad-impact__item-text{ font-size:13.5px; color: var(--mad-text-muted); line-height:1.4;}

  .mad-impact__visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:460px;
  }
  .mad-impact__blob{
    position:absolute;
    width: 340px; height:340px;
    background: radial-gradient(circle, rgba(239,45,126,0.16), rgba(246,146,58,0.06) 70%, transparent 80%);
    border-radius:50%;
  }
  .mad-impact__phone{
    width:220px;
    background:#0d0d10;
    border:7px solid #1c1c22;
    border-radius:36px;
    padding:16px 14px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
    position:relative;
    z-index:2;
  }
  .mad-impact__phone-notch{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:80px; height:20px; background:#1c1c22; border-radius:0 0 14px 14px;
  }
  .mad-impact__phone-label{ font-size:10px; color:#8f8b93; margin-top:10px;}
  .mad-impact__phone-amount{ font-size:22px; font-weight:800; color:#fff; margin:4px 0;}
  .mad-impact__phone-delta{ font-size:10px; color:#3ddc84; margin-bottom:8px;}
  .mad-impact__phone-chart{ height:60px; }
  .mad-impact__phone-products{ margin-top:14px; }
  .mad-impact__phone-heading{ font-size:9px; color:#8f8b93; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px;}
  .mad-impact__phone-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:9.5px; color:#cfcbd4; padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .mad-impact__phone-row span:last-child{ color:#fff; font-weight:600;}

  .mad-impact__float{
    position:absolute;
    background:#000;
    border-radius:12px;
    padding:12px 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:600;
    z-index:3;
    width:150px;
  }
  .mad-impact__float-icon{
    width:35px;height:35px;border-radius:8px;
    background: var(--mad-cream-2);
    color: var(--mad-pink);
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
    flex-shrink:0;
  }
  .mad-impact__float--tl{ top:6%; left:-2%; }
  .mad-impact__float--bl{ bottom:8%; left:-4%; }
  .mad-impact__float--tr{ top:8%; right:-4%; }
  .mad-impact__float--br{ bottom:12%; right:-2%; }


  /* blob pulse */
@keyframes madImpactBlob{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.1); opacity:.85; }
}
.mad-impact__blob{
  animation: madImpactBlob 6s ease-in-out infinite;
}

/* phone entrance + float */
@keyframes madPhoneIn{
  from{ opacity:0; transform: scale(.85) translateY(30px); }
  to{ opacity:1; transform: scale(1) translateY(0); }
}
@keyframes madPhoneFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
.mad-impact__phone{
  opacity:0;
  animation: madPhoneIn .8s ease forwards, madPhoneFloat 5s ease-in-out 1s infinite;
}

/* chart line draw */
.mad-impact__phone-chart polyline{
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: madChartDraw 1.6s ease forwards 1.2s;
}
@keyframes madChartDraw{
  to{ stroke-dashoffset: 0; }
}

/* floating badges — staggered pop-in + individual float rhythm */
@keyframes madFloatPop{
  from{ opacity:0; transform: translateY(20px) scale(.7); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes madFloatDrift{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.mad-impact__float{
  opacity:0;
  animation: madFloatPop .6s ease forwards, madFloatDrift 4s ease-in-out infinite;
}
.mad-impact__float--tl{ animation-delay: .3s, 1.5s; }
.mad-impact__float--bl{ animation-delay: .5s, 1.8s; }
.mad-impact__float--tr{ animation-delay: .7s, 2.1s; }
.mad-impact__float--br{ animation-delay: .9s, 2.4s; }

/* left list items — staggered slide-in */
@keyframes madImpactItemIn{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}
.mad-impact__item{
  opacity:0;
  animation: madImpactItemIn .6s ease forwards;
}
.mad-impact__item:nth-child(1){ animation-delay:.1s; }
.mad-impact__item:nth-child(2){ animation-delay:.25s; }
.mad-impact__item:nth-child(3){ animation-delay:.4s; }
.mad-impact__item:nth-child(4){ animation-delay:.55s; }

/* icon hover pop */
.mad-impact__icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.mad-impact__item:hover .mad-impact__icon{
  transform: scale(1.15) rotate(-6deg);
  background: var(--mad-gradient);
  color:#fff;
}
/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 980px){
  .mad-hero{ padding: 80px 0 40px; }
  .mad-hero__grid{
    display:flex;
    flex-direction:column;
    gap: 40px;
  }
  .mad-hero-content{ order:1; }
  .mad-hero__visual{
    order:2;
    width:100%;
    overflow:visible;
    min-height:420px;
  }
  .mad-hero__title{ font-size: 34px; }
  .mad-hero__desc{ font-size: 15px; max-width: 100%; }
  .mad-hero__features{ gap: 12px 22px; margin-bottom: 28px; }
  .mad-stats{ grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* other sections — unchanged */
  .mad-platforms__top{ grid-template-columns:1fr; }
  .mad-platform-cards{ grid-template-columns:1fr 1fr; }
  .mad-perks{ grid-template-columns: 1fr 1fr; }
  .mad-impact__grid{ grid-template-columns:1fr; }
  .mad-impact__grid > :not(.mad-impact__visual){ order:1; }
  .mad-impact__visual{ order:2; }
}

@media (max-width: 640px){
  .mad-container{ padding:0 20px; }

  .mad-hero{ padding: 70px 0 36px; }
  .mad-hero__grid{ gap: 32px; }
  .mad-hero__title{ font-size: 27px; line-height: 1.2; margin: 14px 0 14px; }
  .mad-hero__desc{ font-size: 13.5px; margin-bottom: 20px; }
  .mad-hero__features{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
  }
  .mad-hero__feature{ font-size: 13px; }

  .mad-stats{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .mad-stat{
    padding: 16px 12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .mad-stat__num{ font-size: 19px; }
  .mad-stat__label{ font-size: 10.5px; }
  .mad-stat__icon{ width: 28px; height: 28px; font-size: 13px; margin-bottom: 8px; }

  /* PHONES — no scale(), real size reduced so nothing gets clipped */
  .mad-hero__visual{
    min-height: 330px;
    padding: 26px 10px 34px;
    overflow:visible;
  }
  .mad-phones{
    width:max-content;
    max-width:100%;
    margin:0 auto;
    transform:none;
  }
  .mad-phone{
    width: 130px;
    height: 250px;
    flex:0 0 auto;
    padding: 8px 6px;
    border-radius: 20px;
    border-width: 4px;
    gap: 10px;
  }
  .mad-phone--front{
    margin-left: -30px;
    transform: translateY(18px);
  }
  .mad-phone--back{
    transform: translateY(-6px) scale(0.96);
  }
  .mad-hero__visual:hover .mad-phone--front{
    transform: translateY(16px) translateZ(20px);
  }
  .mad-hero__visual:hover .mad-phone--back{
    transform: translateY(-8px) scale(0.96) translateZ(-10px);
  }

  .mad-phone__notch{ width: 40px; height: 10px; }
  .mad-phone__status{ font-size: 6px; }
  .mad-phone__greeting{ font-size: 7px; margin-top: 4px; }
  .mad-phone__name{ font-size: 9px; }
  .mad-phone__balance-card{ padding: 7px; margin-top: 5px; border-radius: 9px; }
  .mad-phone__balance-label{ font-size: 6px; }
  .mad-phone__balance-amount{ font-size: 13px; margin-top: 2px; }
  .mad-phone__tx-row{ font-size: 6.5px; padding: 4px 0; }
  .mad-phone__tabbar{ padding-top: 5px; }
  .mad-phone__tab{ font-size: 6px; }
  .mad-phone__cats{ gap: 4px; margin-top: 6px; }
  .mad-phone__cat{ padding: 5px 2px; font-size: 5px; border-radius: 7px; }
  .mad-phone__cat-ic{ font-size: 9px; }
  .mad-phone__promo{ padding: 6px; margin-top: 6px; font-size: 6px; border-radius: 8px; }
  .mad-phone__promo strong{ font-size: 8px; margin-bottom: 2px; }
  .mad-phone__products{ gap: 4px; margin-top: 6px; }
  .mad-phone__product{ padding: 5px 2px; font-size: 5px; border-radius: 6px; }

  .mad-badge{ width: 34px; height: 34px; font-size: 6px; border-radius: 10px; gap: 1px; }
  .mad-badge__icon{ font-size: 11px; }
  .mad-badge--ios{ left:-2%; top:14%; }
  .mad-badge--android{ right:-2%; top:14%; }

  /* other sections — unchanged */
  .mad-platform-cards{ grid-template-columns:1fr; }
  .mad-perks{ grid-template-columns:1fr 1fr; gap:20px 14px; }
  .mad-impact__list{ grid-template-columns:1fr; }
  .mad-impact__float{ display:none; }
  .mad-hero__stats-wrap{ overflow-x:auto; }
}

@media (max-width: 380px){
  .mad-hero__title{ font-size: 23px; }
  .mad-stats{ grid-template-columns: 1fr 1fr; }
  .mad-stat__num{ font-size: 17px; }

  .mad-hero__visual{
    min-height:280px;
    padding-top:24px;
    padding-bottom:30px;
    overflow:visible;
  }
  .mad-phone{
    width: 108px;
    height: 210px;
    padding: 6px 5px;
    border-width: 3px;
    border-radius: 16px;
  }
  .mad-phone--front{
    margin-left: -24px;
    transform: translateY(14px);
  }
  .mad-phone__balance-amount{ font-size: 11px; }
  .mad-badge{ width: 28px; height: 28px; font-size: 5px; }
  .mad-badge__icon{ font-size: 9px; }
  .mad-hero__stats-wrap{ overflow-x:auto; }
}

/* =========================================================
   SECTION 3 + SECTION 4 — MOBILE RESPONSIVE FIX
   ========================================================= */
@media (max-width:980px){
  /* Section 3: horizontal desktop flow becomes vertical */
  .mad-ecosystem{
    padding:64px 0;
    overflow-x:hidden;
  }
  .mad-ecosystem__intro{
    width:100%;
    max-width:100%;
    margin-bottom:38px;
  }
  .mad-flow{
    width:100%;
    max-width:100%;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:14px;
  }
  .mad-flow__phone{
    width:190px;
    max-width:70vw;
    margin:0 auto;
  }
  .mad-flow__arrow{
    width:34px;
    height:34px;
    line-height:34px;
    margin:0 auto;
    font-size:38px;
    transform:rotate(90deg);
  }
  .mad-flow__box,
  .mad-flow__integrations{
    width:100%;
    max-width:520px;
    margin:0 auto;
  }
  .mad-flow__caption{
    width:100%;
    margin-top:18px;
  }

  /* Section 4: text first and image second */
  .mad-impact__grid{
    grid-template-columns:1fr;
    gap:38px;
  }
  .mad-impact__grid > *{min-width:0;}
  .mad-impact__grid > :not(.mad-impact__visual){order:1;}
  .mad-impact__visual{order:2;}
}

@media (max-width:640px){
  .mad-ecosystem{padding:48px 0;}
  .mad-ecosystem__intro{margin-bottom:30px;}
  .mad-flow{gap:12px;}
  .mad-flow__phone{
    width:min(180px,70vw);
    padding:13px 10px;
    border-width:5px;
    border-radius:25px;
  }
  .mad-flow__phone-ring{
    width:58px;
    height:58px;
    margin:10px auto;
  }
  .mad-flow__arrow{
    width:30px;
    height:30px;
    line-height:30px;
    font-size:34px;
  }
  .mad-flow__box,
  .mad-flow__integrations{
    max-width:100%;
    padding:16px 14px;
  }
  .mad-flow__box-title,
  .mad-flow__integrations-title{font-size:16px;}
  .mad-flow__box-text{font-size:13.5px;}
  .mad-flow__integrations li{font-size:13px;}
  .mad-flow__caption{
    font-size:12px;
    line-height:1.5;
  }

  .mad-impact{padding:54px 0;}
  .mad-impact__grid{gap:28px;}
  .mad-impact__desc{
    max-width:100%;
    margin-bottom:26px;
  }
  .mad-impact__visual{
    order:2;
    width:100%;
    min-height:390px;
    overflow:hidden;
  }
  .mad-impact__blob{width:280px;height:280px;}
  .mad-impact__phone{
    width:min(210px,72vw);
    padding:15px 13px;
  }
}

@media (max-width:380px){
  .mad-ecosystem{padding:42px 0;}
  .mad-flow__phone{width:160px;}
  .mad-flow__box,
  .mad-flow__integrations{padding:14px 12px;}

  .mad-impact__visual{min-height:350px;}
  .mad-impact__phone{width:190px;}
  .mad-impact__blob{width:240px;height:240px;}
}

/*==============================================================
                  Progressive_web_app
==============================================================*/
  /* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --pwasvc-ink:#0a0a0d;
    --pwasvc-ink-soft:#141319;
    --pwasvc-ink-line:#27252f;
    --pwasvc-cream:#f6efe2;
    --pwasvc-cream-soft:#fbf6ec;
    --pwasvc-pink:#ef1568;
    --pwasvc-pink-dim:#c01057;
    --pwasvc-line-dark:rgba(255,255,255,.22);
    --pwasvc-line-cream:#c9bfa4;
    --pwasvc-pink-soft:#fbdde9;
    --pwasvc-orange:#f2542d;
    --pwasvc-orange-soft:#fbdfd0;
    --pwasvc-blue:#2f8fff;
    --pwasvc-blue-soft:#dcebff;
    --pwasvc-teal:#17c9a8;
    --pwasvc-teal-soft:#d9f7f0;
    --pwasvc-text-dark:#18151b;
    --pwasvc-text-dark-muted:#736d7a;
    --pwasvc-text-light:#f6f3ee;
    --pwasvc-text-light-muted:#a49eae;
    --pwasvc-font-display:'Space Grotesk', sans-serif;
    --pwasvc-font-body:'Inter', sans-serif;
    --pwasvc-radius-lg:20px;
    --pwasvc-radius-md:14px;
    --pwasvc-radius-sm:8px;
    --pwasvc-maxw:1240px;
    /* screen-scene colors (device mockup "photo" area) */
    --pwasvc-scene-sky-1:#141a29;
    --pwasvc-scene-sky-2:#1d2740;
    --pwasvc-scene-sky-3:#293654;
    --pwasvc-scene-peak-back:rgba(255,255,255,.08);
    --pwasvc-scene-peak-front:rgba(255,255,255,.16);
    --pwasvc-purple:#9b5de5;
    --pwasvc-purple-soft:#ece1fb;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family:var(--pwasvc-font-body);
    color:var(--pwasvc-text-dark);
    background:var(--pwasvc-cream);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{ display:block; max-width:100%; }
  h1,h2,h3{ font-family:var(--pwasvc-font-display); margin:0; }
  p{ margin:0; }
  a{ text-decoration:none; color:inherit; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; }

  .pwasvc-wrap{
    max-width:var(--pwasvc-maxw);
    margin:0 auto;
    padding:0 48px;
  }

.pwasvc-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pwasvc-pink);
  margin-bottom:16px;
  padding:6px 14px 6px 6px;
  border:1px solid rgba(239,21,104,.35);
  border-radius:999px;
  background:rgba(239,21,104,.08);
}
.pwasvc-eyebrow__icon{
  width:20px; height:20px; border-radius:50%;
  background:var(--pwasvc-pink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.pwasvc-eyebrow__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--pwasvc-pink);
  margin-left:2px;
  animation:pwasvcEyebrowPulse 1.6s ease-in-out infinite;
}
@keyframes pwasvcEyebrowPulse{
  0%,100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(239,21,104,.5); }
  50%{ opacity:.6; transform:scale(1.3); box-shadow:0 0 0 4px rgba(239,21,104,0); }
}
  .pwasvc-eyebrow::before{
    content:"";
    width:16px; height:2px;
    background:var(--pwasvc-pink);
    display:inline-block;
    border-radius:2px;
  }

  /* ============================================================
     SCROLL-REVEAL ANIMATION ENGINE
     ============================================================ */
  .pwasvc-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.22,.8,.28,1), transform .8s cubic-bezier(.22,.8,.28,1);
    transition-delay:var(--pwasvc-delay, 0s);
  }
  .pwasvc-reveal.is-visible{ opacity:1; transform:translateY(0); }
  .pwasvc-reveal--pop{ transform:scale(.92) translateY(10px); }
  .pwasvc-reveal--pop.is-visible{ transform:scale(1) translateY(0); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .pwasvc-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    *{ animation:none !important; }
  }

  /* ============================================================
     SHARED — DEVICE MOCKUP COMPONENT ("scene" = fake webpage)
     ============================================================ */
  .pwasvc-scene{
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 82% 14%, rgba(239,21,104,.35), transparent 40%),
      linear-gradient(180deg, var(--pwasvc-scene-sky-1) 0%, var(--pwasvc-scene-sky-2) 55%, var(--pwasvc-scene-sky-3) 100%);
    overflow:hidden;
  }
  .pwasvc-scene__peak{
    position:absolute; left:0; right:0; bottom:0; height:62%;
  }
  .pwasvc-scene__peak--back{
    background:var(--pwasvc-scene-peak-back);
    clip-path:polygon(0% 100%,0% 66%,14% 48%,28% 62%,44% 30%,58% 55%,74% 40%,88% 58%,100% 46%,100% 100%);
  }
  .pwasvc-scene__peak--front{
    background:var(--pwasvc-scene-peak-front);
    clip-path:polygon(0% 100%,0% 80%,18% 58%,34% 76%,52% 52%,68% 74%,84% 56%,100% 76%,100% 100%);
  }

  .pwasvc-mock{ position:relative; width:100%; }
  .pwasvc-mock__navbar{
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 5%;
    height:15%;
    background:rgba(8,8,11,.55);
    backdrop-filter:blur(2px);
  }
  .pwasvc-mock__brand{
    font-family:var(--pwasvc-font-display);
    font-weight:700;
    color:#fff;
    font-size:11px;
  }
  .pwasvc-mock__navlinks{
    display:flex; align-items:center; gap:9px;
  }
  .pwasvc-mock__navlinks span{
    font-size:6.5px;
    color:var(--pwasvc-text-light-muted);
    font-weight:600;
  }
  .pwasvc-mock__navlinks em{
    font-style:normal;
    font-size:6.5px;
    font-weight:700;
    color:#fff;
    background:var(--pwasvc-pink);
    padding:3px 8px;
    border-radius:20px;
  }
  .pwasvc-mock__burger{
    width:16px; height:11px;
    position:relative;
  }
  .pwasvc-mock__burger span, .pwasvc-mock__burger::before, .pwasvc-mock__burger::after{
    content:""; position:absolute; left:0; right:0; height:1.4px; background:#fff; border-radius:2px;
  }
  .pwasvc-mock__burger::before{ top:0; }
  .pwasvc-mock__burger span{ top:50%; transform:translateY(-50%); }
  .pwasvc-mock__burger::after{ bottom:0; }

  .pwasvc-mock__body{
    position:relative; z-index:2;
    padding:9% 6% 0;
  }
  .pwasvc-mock__headline{
    font-family:var(--pwasvc-font-display);
    font-weight:700;
    color:#fff;
    line-height:1.18;
    font-size:15px;
    max-width:62%;
    margin-bottom:9%;
  }
  .pwasvc-mock__cta{
    display:inline-block;
    background:var(--pwasvc-pink);
    color:#fff;
    font-weight:700;
    font-size:7px;
    letter-spacing:.02em;
    padding:6px 14px;
    border-radius:5px;
    margin-bottom:11%;
  }
  .pwasvc-mock__chips{
    display:flex; gap:6%;
  }
  .pwasvc-mock__chip{
    flex:1;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:6px;
    padding:7% 6%;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    text-align:center;
  }
  .pwasvc-mock__chip svg{ color:var(--pwasvc-pink); width:11px; height:11px; }
  .pwasvc-mock__chip span{
    font-size:5.6px; font-weight:700; color:var(--pwasvc-text-light-muted); line-height:1.3;
  }

  /* size modifiers scale the whole internal typography */
  .pwasvc-mock--lg .pwasvc-mock__headline{ font-size:19px; }
  .pwasvc-mock--lg .pwasvc-mock__cta{ font-size:8.5px; padding:8px 18px; }
  .pwasvc-mock--sm .pwasvc-mock__headline{ font-size:11px; margin-bottom:12%; }
  .pwasvc-mock--sm .pwasvc-mock__cta{ font-size:6px; padding:4px 10px; }
  .pwasvc-mock--sm .pwasvc-mock__navlinks{ display:none; }
  .pwasvc-mock--xs .pwasvc-mock__headline{ font-size:8.5px; margin-bottom:14%; max-width:78%;}
  .pwasvc-mock--xs .pwasvc-mock__cta{ font-size:5px; padding:3px 8px; }
  .pwasvc-mock--xs .pwasvc-mock__navlinks{ display:none; }
  .pwasvc-mock--xs .pwasvc-mock__chips{ gap:8%; }
  .pwasvc-mock--xs .pwasvc-mock__chip{ padding:9% 5%; }

  /* Laptop frame */
  .pwasvc-laptop{ width:100%; filter:drop-shadow(0 30px 46px rgba(0,0,0,.45)); }
  .pwasvc-laptop__screen{
    position:relative;
    border:7px solid #16151b;
    border-bottom:none;
    border-radius:12px 12px 0 0;
    aspect-ratio:16/10.4;
    background:#0b0c10;
    overflow:hidden;
  }
  .pwasvc-laptop__base{
    height:9px;
    background:linear-gradient(180deg,#232229,#131217);
    border-radius:0 0 4px 4px;
    position:relative;
  }
  .pwasvc-laptop__base::after{
    content:"";
    position:absolute; left:50%; top:0; transform:translateX(-50%);
    width:14%; height:4px; background:#34323b; border-radius:0 0 5px 5px;
  }

  /* Tablet frame */
  .pwasvc-tablet{ width:100%; filter:drop-shadow(0 24px 40px rgba(0,0,0,.42)); }
  .pwasvc-tablet__body{
    position:relative;
    border:7px solid #16151b;
    border-radius:16px;
    aspect-ratio:3/4;
    background:#0b0c10;
    overflow:hidden;
  }
  .pwasvc-tablet__body::before{
    content:"";
    position:absolute; top:5px; left:50%; transform:translateX(-50%);
    width:5px; height:5px; border-radius:50%;
    background:#2c2b33; z-index:3;
  }

  /* Phone frame */
  .pwasvc-phone{ width:100%; filter:drop-shadow(0 18px 32px rgba(0,0,0,.4)); }
  .pwasvc-phone__body{
    position:relative;
    border:6px solid #16151b;
    border-radius:22px;
    aspect-ratio:9/18.5;
    background:#0b0c10;
    overflow:hidden;
  }
  .pwasvc-phone__body::before{
    content:"";
    position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:26%; height:5px; border-radius:6px;
    background:#16151b; z-index:3;
  }

  /* ============================================================
     SECTION 1 — HERO
     ============================================================ */
  .pwasvc-hero{
    background:
      radial-gradient(ellipse 900px 520px at 84% 6%, rgba(239,21,104,.22), transparent 62%),
      radial-gradient(ellipse 620px 420px at 6% 92%, rgba(239,21,104,.10), transparent 60%),
      var(--pwasvc-ink);
    color:var(--pwasvc-text-light);
    padding:96px 0 88px;
    position:relative;
    overflow:hidden;
  }
  .pwasvc-hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(ellipse 900px 600px at 78% 10%, #000 0%, transparent 70%);
            mask-image:radial-gradient(ellipse 900px 600px at 78% 10%, #000 0%, transparent 70%);
    pointer-events:none;
  }
  .pwasvc-hero::after{
    content:"";
    position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(239,21,104,.55), transparent);
  }
  .pwasvc-hero__blob{
    position:absolute; border-radius:50%; filter:blur(70px);
    pointer-events:none; z-index:0;
    animation:pwasvcDrift 12s ease-in-out infinite;
  }
  .pwasvc-hero__blob--a{
    width:380px; height:380px; top:-120px; right:-60px;
    background:radial-gradient(circle, rgba(239,21,104,.32), transparent 70%);
  }
  .pwasvc-hero__blob--b{
    width:280px; height:280px; bottom:-90px; right:28%;
    background:radial-gradient(circle, rgba(255,120,170,.16), transparent 70%);
    animation-delay:-4s; animation-duration:15s;
  }
  @keyframes pwasvcDrift{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-18px, 22px) scale(1.08); }
  }
  .pwasvc-hero__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
    position:relative;
    z-index:1;
  }
 
.pwasvc-hero__title{
    font-size:clamp(34px, 4.4vw, 52px);
    line-height:1.06;
    font-weight:700;
    letter-spacing:-.02em;
    margin-bottom:20px;

    position:relative;

    /* Clean white text */
    color:#ffffff;

    /* Remove all blur / glow */
    filter:none;
    text-shadow:none;

    /* No artificial stroke */
    -webkit-text-stroke:0;

    animation:none;
}

.pwasvc-hero__title::before{
    display:none;
}
@keyframes pwasvcTitleGlow{
  0%,100%{ opacity:.28; }
  50%{ opacity:.55; }
}
  @keyframes pwasvcShine{
    0%{ background-position:120% 0; }
    50%{ background-position:0% 0; }
    100%{ background-position:120% 0; }
  }
 .pwasvc-hero__title em{
    font-style:normal;

    background:linear-gradient(
        100deg,
        #ef1568 0%,
        #ff4f91 45%,
        #f2542d 100%
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    color:transparent;

    position:relative;
    display:inline;
    
    /* No animation */
    animation:none;

    /* No shadow */
    filter:none;
    text-shadow:none;
}
.pwasvc-hero__title em::after{
    display:none;
}
  .pwasvc-hero__desc{
    font-size:16px;
    line-height:1.65;
    color: whitesmoke;
    max-width:440px;
    margin-bottom:44px;
    color: grey;
  }
  .pwasvc-hero__desc strong{ color: maroon; font-weight:700; }
.pwasvc-hero__desc em{ color:var(--pwasvc-pink); font-style:normal; font-weight:700; }
  .pwasvc-flowRow{ display:flex; align-items:center; gap:0; }
  .pwasvc-flowNode{ display:flex; flex-direction:column; align-items:center; text-align:center; width:130px; align-self:flex-start; }
  .pwasvc-flowNode__iconWrap{
    position:relative;
    width:64px; height:64px;
    margin-bottom:14px;
    animation:pwasvcNodeFloat 4.5s ease-in-out infinite;
  }
  .pwasvc-flowNode:nth-child(1) .pwasvc-flowNode__iconWrap{ animation-delay:0s; }
  .pwasvc-flowNode:nth-child(3) .pwasvc-flowNode__iconWrap{ animation-delay:-1.5s; }
  .pwasvc-flowNode:nth-child(5) .pwasvc-flowNode__iconWrap{ animation-delay:-3s; }
  @keyframes pwasvcNodeFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
  }
  .pwasvc-flowNode__iconWrap::before{
    content:"";
    position:absolute; inset:-4px;
    border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0%, var(--pwasvc-pink) 18%, transparent 38%, transparent 100%);
    opacity:.65;
    animation:pwasvcRingSpin 5s linear infinite;
  }
  @keyframes pwasvcRingSpin{ to{ transform:rotate(360deg); } }
  .pwasvc-flowNode__icon{
    width:64px; height:64px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--pwasvc-ink-line);
    background:radial-gradient(circle at 30% 25%, rgba(239,21,104,.14), var(--pwasvc-ink-soft) 70%);
    color:var(--pwasvc-pink);
    position:absolute; inset:0;
    z-index:1;
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
  }
  .pwasvc-flowNode__icon--hex{
    clip-path:polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  }
  .pwasvc-flowNode:hover .pwasvc-flowNode__icon{
    transform:scale(1.08);
    border-color:var(--pwasvc-pink);
    background:radial-gradient(circle at 30% 25%, rgba(239,21,104,.32), var(--pwasvc-ink-soft) 75%);
    box-shadow:0 14px 30px -12px rgba(239,21,104,.75), 0 0 0 4px rgba(239,21,104,.08);
  }
  .pwasvc-flowNode:hover .pwasvc-flowNode__iconWrap::before{ opacity:1; animation-duration:2s; }
  .pwasvc-flowNode__label{ font-family:var(--pwasvc-font-display); font-weight:700; font-size:13px; letter-spacing:.06em; margin-bottom:8px; }
  .pwasvc-flowNode:nth-child(1) .pwasvc-flowNode__icon{ color:var(--pwasvc-blue); background:radial-gradient(circle at 30% 25%, rgba(47,143,255,.16), var(--pwasvc-ink-soft) 70%); }
  .pwasvc-flowNode:nth-child(1) .pwasvc-flowNode__iconWrap::before{ background:conic-gradient(from 0deg, transparent 0%, var(--pwasvc-blue) 18%, transparent 38%, transparent 100%); }
  .pwasvc-flowNode:nth-child(1):hover .pwasvc-flowNode__icon{ border-color:var(--pwasvc-blue); background:radial-gradient(circle at 30% 25%, rgba(47,143,255,.35), var(--pwasvc-ink-soft) 75%); box-shadow:0 14px 30px -12px rgba(47,143,255,.75), 0 0 0 4px rgba(47,143,255,.08); }

  .pwasvc-flowNode:nth-child(5) .pwasvc-flowNode__icon{ color:var(--pwasvc-teal); background:radial-gradient(circle at 30% 25%, rgba(23,201,168,.16), var(--pwasvc-ink-soft) 70%); }
  .pwasvc-flowNode:nth-child(5) .pwasvc-flowNode__iconWrap::before{ background:conic-gradient(from 0deg, transparent 0%, var(--pwasvc-teal) 18%, transparent 38%, transparent 100%); }
  .pwasvc-flowNode:nth-child(5):hover .pwasvc-flowNode__icon{ border-color:var(--pwasvc-teal); background:radial-gradient(circle at 30% 25%, rgba(23,201,168,.35), var(--pwasvc-ink-soft) 75%); box-shadow:0 14px 30px -12px rgba(23,201,168,.75), 0 0 0 4px rgba(23,201,168,.08); }

  .pwasvc-flowNode__copy{ font-size:13.5px; line-height:1.5; color: wheat; }
  .pwasvc-flowConnector{
    flex:1; height:2px; margin:0 -6px 46px; min-width:20px;
    background-image:repeating-linear-gradient(90deg, var(--pwasvc-line-dark) 0 6px, transparent 6px 12px);
    background-size:24px 2px;
    opacity:.6;
    animation:pwasvcFlowDash 1.4s linear infinite;
  }
  @keyframes pwasvcFlowDash{ to{ background-position:-24px 0; } }

  .pwasvc-oneExp{ position:relative; margin-top:34px; display:inline-flex; align-items:center; justify-content:center; width:150px; height:150px; }
  .pwasvc-oneExp__orbit{
    position:absolute; inset:0;
    border-radius:50%;
    border:1px dashed rgba(239,21,104,.4);
    animation:pwasvcOrbitSpin 14s linear infinite;
  }
  .pwasvc-oneExp__orbit::before{
    content:"";
    position:absolute; top:-3px; left:50%; transform:translateX(-50%);
    width:6px; height:6px; border-radius:50%;
    background:var(--pwasvc-pink);
    box-shadow:0 0 10px 2px rgba(239,21,104,.8);
  }
  @keyframes pwasvcOrbitSpin{ to{ transform:rotate(360deg); } }
  .pwasvc-oneExp__badge{
    width:118px; height:118px; border-radius:50%;
    border:1.5px solid var(--pwasvc-pink);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:radial-gradient(circle at 40% 30%, rgba(239,21,104,.16), rgba(239,21,104,.04) 70%);
    text-align:center;
    animation:pwasvcPulseRing 3.2s ease-in-out infinite;
    position:relative; z-index:2;
  }
  @keyframes pwasvcPulseRing{
    0%,100%{ box-shadow:0 0 0 0 rgba(239,21,104,.35), 0 0 24px 2px rgba(239,21,104,.18); }
    50%{ box-shadow:0 0 0 14px rgba(239,21,104,0), 0 0 34px 6px rgba(239,21,104,.3); }
  }
  .pwasvc-oneExp__badge strong{ font-family:var(--pwasvc-font-display); font-size:16px; font-weight:700; letter-spacing:.02em; color:var(--pwasvc-text-light); }
  .pwasvc-oneExp__badge span{ font-size:9.5px; letter-spacing:.14em; color:var(--pwasvc-pink); font-weight:700; margin-top:3px; }

  /* ---- Hero right-side device stack + circuit connector lines ---- */
  .pwasvc-heroStack{
    position:relative;
    min-height:430px;
    perspective:1400px;
    z-index:2;
  }
  .pwasvc-heroStack__glow{
    position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
    width:80%; height:60px; border-radius:50%;
    background:radial-gradient(ellipse, rgba(239,21,104,.4), transparent 72%);
    filter:blur(18px);
    z-index:1;
    animation:pwasvcGlowPulse 4s ease-in-out infinite;
  }
  @keyframes pwasvcGlowPulse{
    0%,100%{ opacity:.55; transform:translateX(-50%) scale(1); }
    50%{ opacity:.9; transform:translateX(-50%) scale(1.06); }
  }
  .pwasvc-hero__connectors{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible; display:none; }
  .pwasvc-hero__connectors.is-ready{ display:block; }
  .pwasvc-hero__connectors path{
    fill:none; stroke:var(--pwasvc-line-dark); stroke-width:1.6; stroke-dasharray:4 5; opacity:.85;
    stroke-dashoffset:300;
    animation:pwasvcDash 3.4s linear infinite;
  }
  @keyframes pwasvcDash{ to{ stroke-dashoffset:0; } }
  .pwasvc-hero__connectors circle{ fill:var(--pwasvc-pink); }
  .pwasvc-hero__connectors circle.pwasvc-hero__connectorStart{ fill:var(--pwasvc-ink); stroke:var(--pwasvc-pink); stroke-width:2; }

  .pwasvc-heroStack__item{
    position:absolute; z-index:2;
    transform-style:preserve-3d;
    animation:pwasvcFloat 6s ease-in-out infinite;
    transition:transform .5s ease, filter .5s ease;
  }
  .pwasvc-heroStack__item--laptop{
    top:0; left:0; width:76%; z-index:2;
    transform:rotateY(-9deg) rotateX(3deg);
    animation-delay:0s;
  }
  .pwasvc-heroStack__item--tablet{
    top:20%; right:0; width:33%; z-index:3;
    transform:rotateY(-9deg) rotateX(3deg);
    animation-delay:-1.6s;
  }
  .pwasvc-heroStack__item--phone{
    bottom:0; right:4%; width:19%; z-index:4;
    transform:rotateY(-9deg) rotateX(3deg);
    animation-delay:-3.2s;
  }
  @keyframes pwasvcFloat{
    0%,100%{ margin-top:0; }
    50%{ margin-top:-10px; }
  }
  .pwasvc-heroStack:hover .pwasvc-heroStack__item{
    filter:drop-shadow(0 20px 30px rgba(239,21,104,.25));
  }
  .pwasvc-heroStack:hover .pwasvc-heroStack__item--laptop{ transform:rotateY(0deg) rotateX(0deg) scale(1.02); }
  .pwasvc-heroStack:hover .pwasvc-heroStack__item--tablet{ transform:rotateY(0deg) rotateX(0deg) scale(1.03) translateY(-4px); }
  .pwasvc-heroStack:hover .pwasvc-heroStack__item--phone{ transform:rotateY(0deg) rotateX(0deg) scale(1.04) translateY(-8px); }

  /* ============================================================
     SECTION 2 — PWA ADVANTAGE
     ============================================================ */
.pwasvc-advantage{
  background:var(--pwasvc-cream);
  padding:100px 0;
  position:relative;
  overflow:hidden;
}
.pwasvc-advantage::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(20,15,10,.08) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 780px 480px at 50% 40%, #000 0%, transparent 72%);
          mask-image:radial-gradient(ellipse 780px 480px at 50% 40%, #000 0%, transparent 72%);
  pointer-events:none;
}
.pwasvc-advantage__blob{
  position:absolute; border-radius:50%; filter:blur(80px);
  pointer-events:none; z-index:0;
  animation:pwasvcDrift 13s ease-in-out infinite;
}
.pwasvc-advantage__blob--a{
  width:340px; height:340px; top:-100px; left:-80px;
  background:radial-gradient(circle, rgba(47,143,255,.26), transparent 70%);
}
.pwasvc-advantage__blob--b{
  width:300px; height:300px; bottom:-90px; right:-60px;
  background:radial-gradient(circle, rgba(23,201,168,.24), transparent 70%);
  animation-delay:-5s; animation-duration:16s;
}
.pwasvc-advantage__blob--c{
  width:260px; height:260px; top:30%; left:38%;
  background:radial-gradient(circle, rgba(239,21,104,.18), transparent 70%);
  animation-delay:-8s; animation-duration:14s;
}
.pwasvc-advantage__blob--d{
  width:220px; height:220px; top:8%; right:12%;
  background:radial-gradient(circle, rgba(242,84,45,.18), transparent 70%);
  animation-delay:-3s; animation-duration:11s;
}

.pwasvc-advantage__spotlight{
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(239,21,104,.14), transparent 70%);
  pointer-events:none;
  z-index:0;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .3s ease;
}
.pwasvc-advantage__spotlight.is-active{ opacity:1; }
  .pwasvc-advantage__grid{
    display:grid;
    grid-template-columns:0.82fr 1fr 0.82fr;
    gap:40px;
    align-items:center;
    position:relative;
    z-index:1;
  }
  .pwasvc-advantage__title{ font-size:clamp(30px, 3.6vw, 42px); line-height:1.1; font-weight:700; letter-spacing:-.01em; margin-bottom:18px; }
  .pwasvc-advantage__desc{ font-size:15.5px; line-height:1.65; color:var(--pwasvc-text-dark-muted); max-width:360px; }

  .pwasvc-diagram{ position:relative; display:flex; flex-direction:column; align-items:center; gap:0; perspective:1200px; }
  .pwasvc-diagram__laptop{
    width:100%; max-width:280px;
    animation:pwasvcFloatSoft 5s ease-in-out infinite;
    transition:transform .4s ease, filter .4s ease;
    position: relative;
  }
.pwasvc-diagram__laptop::before{
  content:"";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:130%; height:130%; border-radius:50%;
  background:radial-gradient(circle, rgba(239,21,104,.28), transparent 65%);
  filter:blur(30px);
  z-index:-1;
  animation:pwasvcHaloPulse 3.4s ease-in-out infinite;
}
@keyframes pwasvcHaloPulse{
  0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.08); }
}
.pwasvc-diagram__laptop .pwasvc-laptop__screen{ position:relative; overflow:hidden; }
.pwasvc-diagram__laptop .pwasvc-laptop__screen::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  background-size:250% 250%;
  animation:pwasvcScreenShine 5s ease-in-out infinite;
  pointer-events:none;
  z-index:5;
}
@keyframes pwasvcScreenShine{
  0%{ background-position:130% 130%; }
  50%{ background-position:-30% -30%; }
  100%{ background-position:130% 130%; }
}
  .pwasvc-diagram__laptop .pwasvc-laptop__screen{ border-color:#1c1a22; }
  .pwasvc-diagram:hover .pwasvc-diagram__laptop{
    transform:rotateX(4deg) scale(1.03);
    filter:drop-shadow(0 22px 34px rgba(239,21,104,.22));
  }
  @keyframes pwasvcFloatSoft{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-7px); }
  }

  .pwasvc-pill{
    font-family:var(--pwasvc-font-display);
    font-size:11px; font-weight:700; letter-spacing:.08em;
    color:var(--pwasvc-pink); background:var(--pwasvc-pink-soft);
    border:1px solid var(--pwasvc-pink); padding:7px 18px; border-radius:999px;
    white-space:nowrap;
    position:relative;
    box-shadow:0 0 0 0 rgba(239,21,104,.35);
    animation:pwasvcPillPulse 2.6s ease-in-out infinite;
  }
  @keyframes pwasvcPillPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(239,21,104,.28); }
    50%{ box-shadow:0 0 0 8px rgba(239,21,104,0); }
  }
  .pwasvc-diagram__connector{
    width:2px; height:22px;
    background-image:repeating-linear-gradient(180deg, var(--pwasvc-line-cream) 0 6px, transparent 6px 12px);
    background-size:2px 24px;
    opacity:.65;
    animation:pwasvcFlowDashV 1.2s linear infinite;
  }
  @keyframes pwasvcFlowDashV{ to{ background-position:0 -24px; } }

  .pwasvc-diagram__branch{ display:flex; justify-content:center; align-items:flex-end; gap:22px; margin:6px 0; }
  .pwasvc-diagram__branchItem{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    transition:transform .3s ease, filter .3s ease;
    animation:pwasvcFloatSoft 4.5s ease-in-out infinite;
  }
  .pwasvc-diagram__branchItem--mobile{ width:15%; animation-delay:-.4s; }
  .pwasvc-diagram__branchItem--tablet{ width:22%; animation-delay:-1.6s; }
  .pwasvc-diagram__branchItem--desktop{ width:34%; animation-delay:-2.8s; }
  .pwasvc-diagram__branchItem:hover{ transform:translateY(-6px) scale(1.04); filter:drop-shadow(0 14px 22px rgba(0,0,0,.18)); }
  .pwasvc-diagram__monitor{ width:100%; }
  .pwasvc-diagram__monitorScreen{
    position:relative; border:5px solid #1c1a22; border-radius:6px;
    aspect-ratio:16/10.5; background:#0b0c10; overflow:hidden;
  }
  .pwasvc-diagram__monitorStand{
    width:26%; height:8px; background:#1c1a22; margin:0 auto; border-radius:0 0 3px 3px;
  }
  .pwasvc-diagram__branchLabel{
    font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--pwasvc-text-dark-muted);
    padding:3px 9px; border-radius:20px; transition:color .3s ease, background .3s ease;
  }
  .pwasvc-diagram__branchItem--mobile .pwasvc-diagram__branchLabel{ }
  .pwasvc-diagram__branchItem--mobile:hover .pwasvc-diagram__branchLabel{ color:var(--pwasvc-teal); background:var(--pwasvc-teal-soft); }
  .pwasvc-diagram__branchItem--tablet:hover .pwasvc-diagram__branchLabel{ color:var(--pwasvc-pink); background:var(--pwasvc-pink-soft); }
  .pwasvc-diagram__branchItem--desktop:hover .pwasvc-diagram__branchLabel{ color:var(--pwasvc-blue); background:var(--pwasvc-blue-soft); }

  .pwasvc-features{ display:flex; flex-direction:column; gap:26px; }
  .pwasvc-featureItem{
  display:flex; gap:16px;
  position:relative;
  padding:9px 11px 9px 14px;
  border-radius:12px;
  transition:background .3s ease, transform .3s ease;
}
.pwasvc-featureItem::before{
  content:"";
  position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:3px;
  background:var(--pwasvc-pink);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s ease;
}
.pwasvc-featureItem:nth-child(1)::before{ background:var(--pwasvc-blue); }
.pwasvc-featureItem:nth-child(3)::before{ background:var(--pwasvc-teal); }
.pwasvc-featureItem:nth-child(4)::before{ background:var(--pwasvc-orange); }
.pwasvc-featureItem:hover{ background:rgba(0,0,0,.035); transform:translateX(4px); }
.pwasvc-featureItem:hover::before{ transform:scaleY(1); }
.pwasvc-featureItem__num{
  position:absolute; right:14px; top:10px;
  font-family:var(--pwasvc-font-display);
  font-weight:700; font-size:11px; letter-spacing:.06em;
  color:var(--pwasvc-text-dark-muted); opacity:.5;
}
  .pwasvc-featureItem__icon{
    flex:none; width:46px; height:46px; border-radius:50%;
    background:var(--pwasvc-pink-soft); color:var(--pwasvc-pink);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    transition:transform .35s ease, background .35s ease, box-shadow .35s ease;
  }
  .pwasvc-featureItem__icon::before{
    content:""; position:absolute; inset:-5px; border-radius:50%;
    border:1.5px dashed currentColor; opacity:0; transition:opacity .35s ease;
  }
  .pwasvc-featureItem:hover .pwasvc-featureItem__icon{ transform:scale(1.1) rotate(-6deg); background:var(--pwasvc-pink); color:#fff; box-shadow:0 12px 26px -10px rgba(239,21,104,.55); }
  .pwasvc-featureItem:hover .pwasvc-featureItem__icon::before{ opacity:.5; animation:pwasvcRingSpin 6s linear infinite; }
  .pwasvc-featureItem:nth-child(1) .pwasvc-featureItem__icon{ background:var(--pwasvc-blue-soft); color:var(--pwasvc-blue); }
  .pwasvc-featureItem:nth-child(1):hover .pwasvc-featureItem__icon{ background:var(--pwasvc-blue); color:#fff; box-shadow:0 12px 26px -10px rgba(47,143,255,.55); }
  .pwasvc-featureItem:nth-child(3) .pwasvc-featureItem__icon{ background:var(--pwasvc-teal-soft); color:var(--pwasvc-teal); }
  .pwasvc-featureItem:nth-child(3):hover .pwasvc-featureItem__icon{ background:var(--pwasvc-teal); color:#fff; box-shadow:0 12px 26px -10px rgba(23,201,168,.55); }
  .pwasvc-featureItem:nth-child(4) .pwasvc-featureItem__icon{ background:var(--pwasvc-orange-soft); color:var(--pwasvc-orange); }
  .pwasvc-featureItem:nth-child(4):hover .pwasvc-featureItem__icon{ background:var(--pwasvc-orange); color:#fff; box-shadow:0 12px 26px -10px rgba(242,84,45,.55); }
  .pwasvc-featureItem__title{ font-family:var(--pwasvc-font-display); font-size:16.5px; font-weight:700; margin-bottom:5px; color: #000 }
  .pwasvc-featureItem__copy{ font-size:13.5px; line-height:1.55; color:var(--pwasvc-text-dark-muted); }

  .pwasvc-diagram{ transition:transform .15s ease-out; transform-style:preserve-3d; }
.pwasvc-diagram__laptop{ transition:transform .15s ease-out, filter .3s ease; }
.pwasvc-diagram__branchItem{ transition:transform .15s ease-out, filter .3s ease; }
  /* ============================================================
     SECTION 3 — INSIDE THE PWA EXPERIENCE
     ============================================================ */
  .pwasvc-inside{ background:var(--pwasvc-ink); color:var(--pwasvc-text-light); padding:100px 0 0; }
  .pwasvc-inside__top{ display:grid; grid-template-columns:0.85fr 1.3fr; gap:30px; align-items:center; padding-bottom:80px; }
 .pwasvc-inside__title{
  font-size:clamp(30px, 3.6vw, 42px);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:18px;
  background:linear-gradient(100deg, var(--pwasvc-orange) 0%, var(--pwasvc-pink) 45%, var(--pwasvc-purple) 90%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:pwasvcShine 8s ease-in-out infinite;
}
  .pwasvc-inside__desc{ font-size:16.5px; line-height:1.65; color: #fff; max-width:380px; }

  .pwasvc-layerDiagram{ display:grid; grid-template-columns:1fr 1.1fr 1fr; align-items:center; gap:6px; }
  .pwasvc-layerCol{ display:flex; flex-direction:column; gap:36px; }
  .pwasvc-layerCol--right{ align-items:flex-end; text-align:right; }
  .pwasvc-layerNote{ display:flex; gap:12px; max-width:180px; position:relative; }
  .pwasvc-layerCol--right .pwasvc-layerNote{ flex-direction:row-reverse; }
  .pwasvc-layerNote__icon{
    flex:none; width:38px; height:38px; border-radius:10px;
    border:1.5px solid var(--pwasvc-ink-line); background:var(--pwasvc-ink-soft);
    color:var(--pwasvc-pink); display:flex; align-items:center; justify-content:center;
    transition:border-color .3s ease, transform .3s ease; position:relative;
  }
  .pwasvc-layerNote__icon::after{
    content:""; position:absolute; top:50%; width:16px; height:0;
    border-top:2px dotted var(--pwasvc-line-dark); opacity:.6;
  }
  .pwasvc-layerCol .pwasvc-layerNote__icon::after{ right:-16px; }
  .pwasvc-layerCol--right .pwasvc-layerNote__icon::after{ left:-16px; }
  .pwasvc-layerNote:hover .pwasvc-layerNote__icon{ transform:translateY(-3px); }
  .pwasvc-layerCol:nth-child(1) .pwasvc-layerNote:nth-child(1) .pwasvc-layerNote__icon{ color:var(--pwasvc-blue); }
  .pwasvc-layerCol:nth-child(1) .pwasvc-layerNote:nth-child(1):hover .pwasvc-layerNote__icon{ border-color:var(--pwasvc-blue); }
  .pwasvc-layerCol:nth-child(1) .pwasvc-layerNote:nth-child(2):hover .pwasvc-layerNote__icon{ border-color:var(--pwasvc-pink); }
  .pwasvc-layerCol--right .pwasvc-layerNote:nth-child(1) .pwasvc-layerNote__icon{ color:var(--pwasvc-teal); }
  .pwasvc-layerCol--right .pwasvc-layerNote:nth-child(1):hover .pwasvc-layerNote__icon{ border-color:var(--pwasvc-teal); }
  .pwasvc-layerCol--right .pwasvc-layerNote:nth-child(2) .pwasvc-layerNote__icon{ color:var(--pwasvc-orange); }
  .pwasvc-layerCol--right .pwasvc-layerNote:nth-child(2):hover .pwasvc-layerNote__icon{ border-color:var(--pwasvc-orange); }
  .pwasvc-layerNote__title{ font-family:var(--pwasvc-font-display); font-size:15.5px; font-weight:700; margin-bottom:3px; }
  .pwasvc-layerNote__copy{ font-size:14.5px; line-height:1.5; color:var(--pwasvc-text-light-muted); }

  .pwasvc-brandLaptop{ width:100%; max-width:340px; margin:0 auto; }
  .pwasvc-brandLaptop .pwasvc-laptop__screen{
    background:
      radial-gradient(circle at 50% 45%, rgba(239,21,104,.35), transparent 62%),
      #0b0a10;
    display:flex; align-items:center; justify-content:center;
    border-color:#201d28;
    overflow: hidden;
  }
  .pwasvc-brandLaptop .pwasvc-laptop__screen::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px);
  pointer-events:none; z-index:4;
}
.pwasvc-brandLaptop .pwasvc-laptop__screen::after{
  content:"";
  position:absolute; left:0; right:0; height:24%;
  background:linear-gradient(180deg, transparent, rgba(239,21,104,.4), transparent);
  filter:blur(2px);
  pointer-events:none; z-index:5;
  animation:pwasvcScanMove 3s linear infinite;
}
@keyframes pwasvcScanMove{
  0%{ transform:translateY(-40%); }
  100%{ transform:translateY(420%); }
}
  .pwasvc-brandLaptop__mark{
    font-family:var(--pwasvc-font-display); font-weight:700;
    font-size:15%;
    color:transparent;
    background:linear-gradient(90deg,#ff4f93,var(--pwasvc-pink));
    -webkit-background-clip:text; background-clip:text;
    letter-spacing:.04em;
    text-shadow:0 0 30px rgba(239,21,104,.4);
    position:relative;
  }
  .pwasvc-brandLaptop__mark::after{
    content:""; position:absolute; left:8%; right:8%; bottom:-18%; height:2px;
    background:linear-gradient(90deg, transparent, var(--pwasvc-pink), transparent);
    opacity:.7;
  }

  .pwasvc-stripBar{ border-top:1px solid var(--pwasvc-ink-line); background:var(--pwasvc-ink-soft); padding:26px 0; margin-top:0; }
  .pwasvc-stripList{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0; }
  .pwasvc-stripItem{
    display:flex; align-items:center; gap:10px; padding:6px 28px;
    font-size:13.5px; font-weight:600; color:var(--pwasvc-text-light);
    border-right:1px solid var(--pwasvc-ink-line); transition:color .3s ease;
  }
  .pwasvc-stripItem:last-child{ border-right:none; }
  .pwasvc-stripItem svg{ flex:none; transition:transform .3s ease, color .3s ease, filter .3s ease; }
.pwasvc-stripItem:hover svg{ transform:scale(1.25) rotate(-6deg); }
.pwasvc-stripItem:nth-child(1) svg{ color:var(--pwasvc-blue); }
.pwasvc-stripItem:nth-child(1):hover svg{ filter:drop-shadow(0 0 8px rgba(47,143,255,.7)); }
.pwasvc-stripItem:nth-child(2) svg{ color:var(--pwasvc-pink); }
.pwasvc-stripItem:nth-child(2):hover svg{ filter:drop-shadow(0 0 8px rgba(239,21,104,.7)); }
.pwasvc-stripItem:nth-child(3) svg{ color:var(--pwasvc-teal); }
.pwasvc-stripItem:nth-child(3):hover svg{ filter:drop-shadow(0 0 8px rgba(23,201,168,.7)); }
.pwasvc-stripItem:nth-child(4) svg{ color:var(--pwasvc-orange); }
.pwasvc-stripItem:nth-child(4):hover svg{ filter:drop-shadow(0 0 8px rgba(242,84,45,.7)); }
.pwasvc-stripItem:nth-child(5) svg{ color:var(--pwasvc-purple); }
.pwasvc-stripItem:nth-child(5):hover svg{ filter:drop-shadow(0 0 8px rgba(155,93,229,.7)); }
.pwasvc-stripItem:hover{ color:var(--pwasvc-text-light); }

  .pwasvc-layerWire{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
.pwasvc-layerWire path{
  fill:none; stroke-width:1.8; stroke-dasharray:5 6; stroke-dashoffset:200;
  opacity:.85; animation:pwasvcDash 2.2s linear infinite;
  stroke-linecap:round;
}
.pwasvc-layerWire circle{ opacity:.9; }
.pwasvc-layerWire .w-blue{ stroke:var(--pwasvc-blue); filter:drop-shadow(0 0 5px rgba(47,143,255,.65)); }
.pwasvc-layerWire .w-pink{ stroke:var(--pwasvc-pink); filter:drop-shadow(0 0 5px rgba(239,21,104,.65)); }
.pwasvc-layerWire .w-teal{ stroke:var(--pwasvc-teal); filter:drop-shadow(0 0 5px rgba(23,201,168,.65)); }
.pwasvc-layerWire .w-orange{ stroke:var(--pwasvc-orange); filter:drop-shadow(0 0 5px rgba(242,84,45,.65)); }
.pwasvc-layerWire circle.w-blue{ fill:var(--pwasvc-blue); }
.pwasvc-layerWire circle.w-pink{ fill:var(--pwasvc-pink); }
.pwasvc-layerWire circle.w-teal{ fill:var(--pwasvc-teal); }
.pwasvc-layerWire circle.w-orange{ fill:var(--pwasvc-orange); }
.pwasvc-layerDiagram{ position:relative; }

  /* ============================================================
     SECTION 4 — BUILT AROUND YOUR USERS
     ============================================================ */
  .pwasvc-journey{background: linear-gradient(160deg, var(--mad-cream) 0%, #f9d9e4 50%, #fce0c8 100%);padding:80px 0 90px; }
  .pwasvc-journey__header{ max-width:640px; margin:0 0 64px; }
  .pwasvc-journey__title{ font-size:clamp(28px, 3.4vw, 38px); line-height:1.15; font-weight:700; letter-spacing:-.01em; color: #000;}

  .pwasvc-steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; position:relative; }
  .pwasvc-step{ position:relative; }
  .pwasvc-step__icon{
    width:82px; height:82px; border-radius:50%;
    background: linear-gradient(135deg, var(--mad-pink), #f6923a);
    display:flex; align-items:center; justify-content:center; margin-bottom:22px;
    position:relative; transition:transform .35s ease, box-shadow .35s ease;
  }
  .pwasvc-step:nth-child(2) .pwasvc-step__icon,
  .pwasvc-step:nth-child(4) .pwasvc-step__icon{ background: #000; color:var(--pwasvc-orange); }
  .pwasvc-step:hover .pwasvc-step__icon{ transform:translateY(-5px); box-shadow:0 14px 28px -14px rgba(0,0,0,.25); }
  .pwasvc-step__num{ font-family:var(--pwasvc-font-display); font-weight:900; font-size:14px; color:var(--pwasvc-orange); letter-spacing:.06em; margin-bottom:4px; display:block; }
  .pwasvc-step:nth-child(1) .pwasvc-step__num, .pwasvc-step:nth-child(3) .pwasvc-step__num{ color:var(--pwasvc-pink); }
  .pwasvc-step__title{ font-family:var(--pwasvc-font-display); font-weight:700; font-size:20px;color: #000; letter-spacing:.03em; margin-bottom:10px; text-transform:uppercase; }
  .pwasvc-step__copy{ font-size:15.5px; line-height:1.55; color: maroon; max-width:230px; }

  .pwasvc-journey__divider{ display:flex; align-items:center; margin:70px 0 46px; }
  .pwasvc-journey__divider::before, .pwasvc-journey__divider::after{ content:""; flex:1; height:1px; background:linear-gradient(to right, transparent, #d8cdb8, transparent); }
  .pwasvc-journey__dividerDot{ width:9px; height:9px; border-radius:50%; background:var(--pwasvc-pink); margin:0 14px; flex:none; }

  .pwasvc-journey__closing{
    text-align:center; font-family:var(--pwasvc-font-display); font-size:clamp(17px, 2vw, 21px);
    line-height:1.55; font-weight:500; color:var(--pwasvc-text-dark); max-width:760px; margin:0 auto;
  }

  /* =========================================================
   PWA — FINAL MOBILE RESPONSIVE ONLY
   Paste AFTER the complete desktop CSS.
   ========================================================= */

@media screen and (max-width: 768px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .pwasvc-wrap{
    width:100%;
    max-width:100%;
    padding:0 16px;
  }

  .pwasvc-hero,
  .pwasvc-advantage,
  .pwasvc-inside,
  .pwasvc-journey{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  /* SECTION 1 */
  .pwasvc-hero{padding:52px 0 46px; padding-top: 90px !important;}
  .pwasvc-hero__grid{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:38px;
  }
  .pwasvc-hero__grid > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .pwasvc-hero__title{
    width:100%;
    max-width:100%;
    font-size:clamp(30px,9vw,38px);
    line-height:1.12;
    overflow-wrap:anywhere;
  }
  .pwasvc-hero__desc{
    width:100%;
    max-width:100%;
    margin-bottom:32px;
    font-size:14px;
  }
  .pwasvc-flowRow{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:8px;
  }
  .pwasvc-flowNode{
    width:100%;
    min-width:0;
  }
  .pwasvc-flowConnector{display:none;}
  .pwasvc-flowNode__iconWrap,
  .pwasvc-flowNode__icon{
    width:52px;
    height:52px;
  }
  .pwasvc-flowNode__label{font-size:11px;}
  .pwasvc-flowNode__copy{
    width:100%;
    padding:0 2px;
    font-size:10.5px;
    overflow-wrap:anywhere;
  }
  .pwasvc-oneExp{
    display:flex;
    width:130px;
    height:130px;
    margin:30px auto 0;
  }
  .pwasvc-oneExp__badge{width:104px;height:104px;}
  .pwasvc-heroStack{
    width:100%;
    min-height:280px;
    margin:0;
    order:2;
  }
  .pwasvc-heroStack__item--laptop{left:1%;width:73%;}
  .pwasvc-heroStack__item--tablet{right:1%;width:33%;}
  .pwasvc-heroStack__item--phone{right:7%;width:19%;}

  /* SECTION 2 */
  .pwasvc-advantage{padding:52px 0;}
  .pwasvc-advantage__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:34px;
    text-align:left;
  }
  .pwasvc-advantage__grid > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .pwasvc-advantage__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .pwasvc-advantage__desc{max-width:100%;}
  .pwasvc-diagram{
    width:100%;
    max-width:340px;
    margin:0 auto;
  }
  .pwasvc-diagram__laptop{width:78%;max-width:250px;}
  .pwasvc-diagram__branch{
    width:100%;
    max-width:320px;
    gap:10px;
  }
  .pwasvc-diagram__branchItem--mobile{width:18%;}
  .pwasvc-diagram__branchItem--tablet{width:26%;}
  .pwasvc-diagram__branchItem--desktop{width:39%;}
  .pwasvc-pill{font-size:9px;padding:6px 12px;}
  .pwasvc-features{width:100%;gap:18px;}
  .pwasvc-featureItem{
    display:flex;
    width:100%;
    max-width:100%;
    gap:12px;
    padding:10px 8px 10px 12px;
  }
  .pwasvc-featureItem__icon{width:42px;height:42px;}
  .pwasvc-featureItem__title{font-size:15px;}
  .pwasvc-featureItem__copy{font-size:13px;}

  /* SECTION 3 */
  .pwasvc-inside{padding:52px 0 0;}
  .pwasvc-inside__top{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:14px;
    padding-bottom:40px;
  }
  .pwasvc-inside__top > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .pwasvc-inside__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .pwasvc-inside__desc{max-width:100%;font-size:14.5px;}
  .pwasvc-layerDiagram{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:24px;
  }
  .pwasvc-layerDiagram > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .pwasvc-brandLaptop{
    order:1;
    width:100%;
    max-width:300px;
    margin:0 auto 8px;
  }
  .pwasvc-layerCol,
  .pwasvc-layerCol--right{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    gap:16px;
    align-items:start;
    text-align:left;
  }
  .pwasvc-layerCol{order:2;}
  .pwasvc-layerCol--right{order:3;}
  .pwasvc-layerNote,
  .pwasvc-layerCol--right .pwasvc-layerNote{
    display:flex;
    flex-direction:row;
    width:100%;
    max-width:100%;
    gap:10px;
  }
  .pwasvc-layerNote__icon::after,
  .pwasvc-layerWire{display:none;}
  .pwasvc-layerNote__title{font-size:14px;}
  .pwasvc-layerNote__copy{font-size:12.5px;}
  .pwasvc-stripBar{padding:22px 0;}
  .pwasvc-stripList{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    gap:10px;
  }
  .pwasvc-stripItem{
    width:100%;
    min-width:0;
    padding:8px 6px;
    border-right:0;
    font-size:12px;
  }

  /* SECTION 4 */
  .pwasvc-journey{padding:52px 0;}
  .pwasvc-journey__header{
    width:100%;
    max-width:100%;
    margin-bottom:36px;
  }
  .pwasvc-journey__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .pwasvc-steps{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:28px;
  }
  .pwasvc-step{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    width:100%;
    column-gap:14px;
    align-items:start;
  }
  .pwasvc-step__icon{
    grid-row:1 / span 3;
    width:64px;
    height:64px;
    margin:0;
  }
  .pwasvc-step__num,
  .pwasvc-step__title,
  .pwasvc-step__copy{grid-column:2;}
  .pwasvc-step__title{font-size:17px;margin-bottom:5px;}
  .pwasvc-step__copy{max-width:100%;font-size:13.5px;}
  .pwasvc-journey__divider{margin:42px 0 30px;}
  .pwasvc-journey__closing{font-size:16px;}
}

@media screen and (max-width:380px){
  .pwasvc-wrap{padding:0 12px;}
  .pwasvc-hero__title{font-size:28px;}
  .pwasvc-flowNode__iconWrap,
  .pwasvc-flowNode__icon{width:46px;height:46px;}
  .pwasvc-flowNode__label{font-size:10px;}
  .pwasvc-flowNode__copy{font-size:9.5px;}
  .pwasvc-heroStack{min-height:240px;}
  .pwasvc-layerCol,
  .pwasvc-layerCol--right,
  .pwasvc-stripList{grid-template-columns:minmax(0,1fr);}
  .pwasvc-step{grid-template-columns:56px minmax(0,1fr);}
  .pwasvc-step__icon{width:56px;height:56px;}
}



/*
========================================================
         saas product development
========================================================*/

/* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --svc-bg-dark:#0a0a0c;
    --svc-bg-dark-2:#100c0e;
    --svc-bg-cream:#faf3ee;
    --svc-card-dark:#141010;
    --svc-card-dark-border:#241c1c;
    --svc-accent:#ff2f6e;
    --svc-accent-2:#ff8a4c;
    --svc-accent-soft:rgba(255,47,110,.14);
    --svc-text-light:#f6f1ee;
    --svc-text-light-muted:#a79e9c;
    --svc-text-dark:#1c1616;
    --svc-text-dark-muted:#6f6462;
    --svc-line:rgba(255,255,255,.09);
    --svc-line-dark:rgba(28,22,22,.1);
    --svc-radius:20px;
    --svc-font-display:'Manrope', sans-serif;
    --svc-font-body:'Inter', sans-serif;
    --svc-font-mono:'IBM Plex Mono', monospace;
    --svc-ease:cubic-bezier(.16,.8,.28,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--svc-font-body);
    background:var(--svc-bg-cream);
    color:var(--svc-text-dark);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  .svc-wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

  .svc-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--svc-font-mono);
    font-size:12.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--svc-accent);
    margin-bottom:18px;
    margin-top: 40px;
  }
  .svc-eyebrow::before{
    content:""; width:16px; height:2px; background:var(--svc-accent); border-radius:2px;
  }
  .svc-eyebrow-num{color:inherit; opacity:.55; font-weight:600;}

  h1,h2,h3{font-family:var(--svc-font-display); font-weight:600; letter-spacing:-.02em;}

  /* reveal-on-scroll base */
  [data-svc-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--svc-ease), transform .8s var(--svc-ease);}
  [data-svc-reveal].svc-in{opacity:1; transform:translateY(0);}
  [data-svc-reveal="stagger"] > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--svc-ease), transform .7s var(--svc-ease);}
  [data-svc-reveal="stagger"].svc-in > *{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    [data-svc-reveal], [data-svc-reveal="stagger"] > *{opacity:1 !important; transform:none !important;}
  }
/*==============================================
        Saas Development
==============================================*/

 /* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --svc-bg-dark:#0a0a0c;
    --svc-bg-dark-2:#100c0e;
    --svc-bg-cream:#faf3ee;
    --svc-card-dark:#141010;
    --svc-card-dark-border:#241c1c;
    --svc-accent:#ff2f6e;
    --svc-accent-2:#ff8a4c;
    --svc-accent-soft:rgba(255,47,110,.14);
    --svc-text-light:#f6f1ee;
    --svc-text-light-muted:#a79e9c;
    --svc-text-dark:#1c1616;
    --svc-text-dark-muted:#6f6462;
    --svc-line:rgba(255,255,255,.09);
    --svc-line-dark:rgba(28,22,22,.1);
    --svc-radius:20px;
    --svc-font-display:'Manrope', sans-serif;
    --svc-font-body:'Inter', sans-serif;
    --svc-font-mono:'IBM Plex Mono', monospace;
    --svc-ease:cubic-bezier(.16,.8,.28,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--svc-font-body);
    background:var(--svc-bg-cream);
    color:var(--svc-text-dark);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  .svc-wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

  .svc-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--svc-font-mono);
    font-size:12.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--svc-accent);
    margin-bottom:18px;
  }
  .svc-eyebrow::before{
    content:""; width:16px; height:2px; background:var(--svc-accent); border-radius:2px;
  }
  .svc-eyebrow-num{color:inherit; opacity:.55; font-weight:600;}

  h1,h2,h3{font-family:var(--svc-font-display); font-weight:600; letter-spacing:-.02em;}

  /* reveal-on-scroll base */
  [data-svc-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--svc-ease), transform .8s var(--svc-ease);}
  [data-svc-reveal].svc-in{opacity:1; transform:translateY(0);}
  [data-svc-reveal="stagger"] > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--svc-ease), transform .7s var(--svc-ease);}
  [data-svc-reveal="stagger"].svc-in > *{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    [data-svc-reveal], [data-svc-reveal="stagger"] > *{opacity:1 !important; transform:none !important;}
  }

  /* ============================================================
     HERO SECTION
     ============================================================ */
  .svc-hero{
    position:relative;
    background:radial-gradient(120% 100% at 82% 0%, #1c0f13 0%, var(--svc-bg-dark) 55%), var(--svc-bg-dark);
    color:var(--svc-text-light);
    padding:70px 0 60px;
    overflow:hidden;
  }
  .svc-hero::before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(60% 55% at 72% 25%, rgba(255,47,110,.16), transparent 65%),
               radial-gradient(45% 40% at 15% 85%, rgba(255,138,76,.10), transparent 70%);
    pointer-events:none;
  }
  .svc-hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr;
    gap:56px; align-items:center; position:relative; z-index:1;
  }

  .svc-hero-title{
    position:relative;
    font-family:var(--svc-font-display);
    font-weight:800;
    font-size: 45px;
    line-height:1.0;
    letter-spacing:-.035em;
    margin-bottom:24px;
  }
  .svc-hero-title .svc-line{
    display:block; opacity:0; transform:translateY(20px);
    animation:svc-title-in .8s var(--svc-ease) forwards;
  }
  .svc-hero-title .svc-line:nth-child(1){animation-delay:.05s;}
  .svc-hero-title .svc-line:nth-child(2){animation-delay:.22s;}
  @keyframes svc-title-in{
    to{opacity:1; transform:translateY(0);}
  }
  .svc-hero-title .svc-accent-word{
  background:linear-gradient(97deg, var(--svc-accent) 0%, var(--svc-accent-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
  display:inline-block;
  text-shadow:0 0 24px rgba(255,47,110,.35), 0 0 44px rgba(255,138,76,.18);
}
  @media (prefers-reduced-motion: reduce){
    .svc-hero-title .svc-line{opacity:1; transform:none; animation:none;}
  }

  .svc-hero-para{
    font-size:18.5px; line-height:1.7;
    color: whitesmoke;
    max-width:480px;
    margin-bottom:28px;
  }

  .svc-hero-platform-sep{width:3px; height:3px; border-radius:50%; background:var(--svc-text-light-muted); opacity:.5; flex:none;}

  .svc-hero-cta{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    margin-bottom:48px;
  }
  .svc-hero-btn{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--svc-font-body); font-size:14.5px; font-weight:600;
    padding:14px 28px; border-radius:999px;
    text-decoration:none; cursor:pointer; border:none;
    transition:transform .35s var(--svc-ease), box-shadow .35s var(--svc-ease), background .35s var(--svc-ease);
  }
  .svc-hero-btn svg{width:16px; height:16px; transition:transform .35s var(--svc-ease);}
  .svc-hero-btn--primary{
    background:linear-gradient(97deg, var(--svc-accent), var(--svc-accent-2));
    color:#0a0505;
    box-shadow:0 16px 34px -12px rgba(255,47,110,.55);
  }
  .svc-hero-btn--primary:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 42px -12px rgba(255,47,110,.7);
  }
  .svc-hero-btn--primary:hover svg{transform:translateX(3px);}
  .svc-hero-btn--ghost{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.16);
    color:var(--svc-text-light);
  }
  .svc-hero-btn--ghost:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.3);
  }

  .svc-hero-orbit-panel{
    position:relative;
  }
  .svc-hero-orbit-eyebrow{
    font-family:var(--svc-font-mono); font-size:14.5px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase;
    color: whitesmoke;
    margin-bottom:16px;
  }
  .svc-hero-orbit{
    display:flex; align-items:flex-start; gap:2px; position:relative;
  }
  .svc-hero-orbit-item{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    width:82px; flex:none;
  }
  .svc-hero-orbit-circle{
    --glow: var(--item-color, var(--svc-accent));
    width:60px; height:60px; border-radius:50%;
    background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.06), rgba(0,0,0,.4));
    border:1.5px solid var(--glow);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    color:var(--glow);
    position:relative; z-index:2;
    box-shadow:0 0 0 0 transparent;
    animation:svc-badge-pulse 3.2s ease-in-out infinite;
    transition:transform .4s var(--svc-ease);
  }
  .svc-hero-orbit-item:nth-child(1) .svc-hero-orbit-circle{animation-delay:0s;}
  .svc-hero-orbit-item:nth-child(3) .svc-hero-orbit-circle{animation-delay:.5s;}
  .svc-hero-orbit-item:nth-child(5) .svc-hero-orbit-circle{animation-delay:1s;}
  .svc-hero-orbit-item:nth-child(7) .svc-hero-orbit-circle{animation-delay:1.5s;}
  .svc-hero-orbit-item:nth-child(9) .svc-hero-orbit-circle{animation-delay:2s;}
  @keyframes svc-badge-pulse{
    0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--glow) 45%, transparent);}
    50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--glow) 0%, transparent);}
  }
  .svc-hero-orbit-item:hover .svc-hero-orbit-circle{
    transform:translateY(-5px) scale(1.08);
    background:var(--glow);
    color:#0a0a0a;
  }
  .svc-hero-orbit-circle svg{width:22px; height:22px;}
  .svc-hero-orbit-label{
    font-family:var(--svc-font-mono);
    font-size:14.5px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--svc-text-light);
    margin-bottom:5px;
  }
  .svc-hero-orbit-desc{
    font-size:12px; line-height:1.4; color:var(--svc-text-light-muted);
  }
  .svc-hero-orbit-arrow{
    flex:none; align-self:flex-start;
    margin-top:22px;
    width:24px; height:14px;
    position:relative; overflow:hidden;
  }
  .svc-hero-orbit-arrow svg{
    width:24px; height:14px; color:rgba(255,255,255,.28);
    animation:svc-arrow-flow 1.8s ease-in-out infinite;
  }
  @keyframes svc-arrow-flow{
    0%,100%{transform:translateX(0); opacity:.5;}
    50%{transform:translateX(4px); opacity:1;}
  }

  .svc-hero-visual{
    position:relative;
    animation:svc-float 7s ease-in-out infinite;
  }
  @keyframes svc-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
  }
  .svc-hero-visual-glow{
    position:absolute; inset:-40px;
    background:radial-gradient(50% 50% at 50% 50%, rgba(255,47,110,.35), transparent 70%);
    filter:blur(30px);
    z-index:0;
    animation:svc-pulse 4.5s ease-in-out infinite;
  }
  @keyframes svc-pulse{
    0%,100%{opacity:.55; transform:scale(1);}
    50%{opacity:.9; transform:scale(1.05);}
  }
  /* REPLACE the src below with your own dashboard screenshot */
  .svc-hero-visual-frame img{
    width:150%; border-radius:12px; display:block;
  }
  .svc-hero-chip{
    position:absolute; z-index:3;
    display:flex; align-items:center; gap:8px;
    background:rgba(20,15,15,.85);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    padding:9px 16px;
    font-family:var(--svc-font-mono);
    font-size:16px; font-weight:600; letter-spacing:.03em;
    color:var(--svc-text-light);
    box-shadow:0 16px 34px -14px rgba(0,0,0,.6);
  }
  .svc-hero-chip svg{width:15px; height:15px; flex:none;}
  .svc-hero-chip--top{
    top:-18px; left:-22px;
    color:var(--svc-accent);
    animation:svc-chip-float-a 5.5s ease-in-out infinite;
  }
  .svc-hero-chip--top svg{color:var(--svc-accent);}
  .svc-hero-chip--bottom{
    bottom:-16px; right:-18px;
    animation:svc-chip-float-b 6.2s ease-in-out infinite;
  }
  .svc-hero-chip--bottom svg{color:#14e0b0;}
  .svc-hero-chip--bottom .svc-chip-dot{
    width:7px; height:7px; border-radius:50%; background:#14e0b0;
    box-shadow:0 0 0 3px rgba(20,224,176,.22);
  }
  @keyframes svc-chip-float-a{
    0%,100%{transform:translateY(0) rotate(-2deg);}
    50%{transform:translateY(-9px) rotate(1deg);}
  }
  @keyframes svc-chip-float-b{
    0%,100%{transform:translateY(0) rotate(2deg);}
    50%{transform:translateY(-8px) rotate(-1deg);}
  }

  /* ============================================================
   SECTION 02 — LAYERS (cream)
   ============================================================ */
.svc-layers{
  background:var(--svc-bg-cream);
  padding:34px 0;
  position:relative;
  overflow:hidden;
}
.svc-layers::before{
  content:"";
  position:absolute; top:-120px; right:-120px; width:480px; height:480px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,47,110,.10), transparent 70%);
  pointer-events:none;
  animation:svc-blob-breathe 8s ease-in-out infinite;
}
.svc-layers::after{
  content:"";
  position:absolute; bottom:-140px; left:-100px; width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,138,76,.10), transparent 70%);
  pointer-events:none;
  animation:svc-blob-breathe 9s ease-in-out infinite 1.5s;
}
@keyframes svc-blob-breathe{
  0%,100%{opacity:.7; transform:scale(1);}
  50%{opacity:1; transform:scale(1.15);}
}
.svc-layers-grid{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:64px; align-items:center;
}
.svc-layers-image-wrap{
  position:relative;
}
.svc-layers-image-glow{
  position:absolute; inset:-28px;
  background:radial-gradient(55% 55% at 50% 50%, rgba(255,47,110,.28), transparent 70%);
  filter:blur(26px);
  z-index:0;
  animation:svc-pulse 4.5s ease-in-out infinite;
}
.svc-layers-image{
  position:relative; z-index:1;
  border-radius:var(--svc-radius);
  background:#fff;
  box-shadow:0 40px 70px -35px rgba(28,22,22,.25);
  padding:8px;
  transform:rotate(-1.2deg);
  transition:transform .5s var(--svc-ease), box-shadow .5s var(--svc-ease);
}
.svc-layers-image::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(135deg, var(--svc-accent) 0%, var(--svc-accent-2) 50%, rgba(255,138,76,.2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.5;
  transition:opacity .4s var(--svc-ease);
}
.svc-layers-image:hover{transform:rotate(0deg) translateY(-6px); box-shadow:0 50px 90px -30px rgba(255,47,110,.3);}
.svc-layers-image:hover::before{opacity:1;}
/* REPLACE the src below with your own dashboard screenshot */
.svc-layers-image img{
  width:100%;
  height:520px;
  object-fit: fill;
  border-radius:14px;
  display:block;
}

.svc-layers-chip{
  position:absolute; z-index:2;
  display:flex; align-items:center; gap:7px;
  background:rgba(20,15,15,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:8px 14px;
  font-family:var(--svc-font-mono);
  font-size:10.5px; font-weight:600; letter-spacing:.03em;
  color:#fff;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.55);
}
.svc-layers-chip svg{width:13px; height:13px; flex:none; color:var(--svc-accent-2);}
.svc-layers-chip--a{top:-14px; right:-16px; animation:svc-chip-float-a 5.5s ease-in-out infinite;}
.svc-layers-chip--b{bottom:-14px; left:-14px; animation:svc-chip-float-b 6.2s ease-in-out infinite;}
.svc-layers-chip--b .svc-chip-dot{width:6px; height:6px; border-radius:50%; background:#14e0b0; box-shadow:0 0 0 3px rgba(20,224,176,.22);}

.svc-layers-title{
  font-family:var(--svc-font-display);
  font-weight:800;
  font-size: 35px;
  line-height:1.12;
  letter-spacing:-.02em;
  margin-bottom:44px;
  color:var(--svc-text-dark);
  max-width:520px;
}
.svc-layers-title .svc-accent-word{
  background:linear-gradient(97deg, var(--svc-accent), var(--svc-accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 24px rgba(255,47,110,.35), 0 0 44px rgba(255,138,76,.18);
}
.svc-layers-content{position:relative;}
.svc-layers-body{display:flex; gap:28px; align-items:flex-start;}
.svc-layers-list{position:relative; flex:1; min-width:0; display:flex; flex-direction:column; gap:12px;}
.svc-layers-item{
  --item-color: var(--svc-accent);
  display:flex; gap:14px; align-items:center;
  padding:10px 14px 10px 16px;
  background:#fff;
  border:2px solid color-mix(in srgb, var(--item-color) 22%, rgba(28,22,22,.08));
  border-radius:14px;
  box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
  position:relative;
  overflow:hidden;
  transform:scale(1);
  transition:transform .4s var(--svc-ease), box-shadow .4s var(--svc-ease), border-color .4s var(--svc-ease);
  animation:svc-card-spotlight 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.svc-layers-item::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--item-color), color-mix(in srgb, var(--item-color) 40%, transparent));
}
.svc-layers-item::after{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--item-color) 16%, transparent), transparent);
  transform:skewX(-18deg);
  pointer-events:none;
}
.svc-layers-item:hover::after{
  animation:svc-card-shimmer 1s ease forwards;
}
@keyframes svc-card-shimmer{
  to{left:120%;}
}
.svc-layers-item:hover{
  transform:translateX(6px) translateY(-3px) scale(1.02);
  box-shadow:0 24px 44px -20px color-mix(in srgb, var(--item-color) 40%, rgba(28,22,22,.28));
  border-color:color-mix(in srgb, var(--item-color) 65%, transparent);
  animation-play-state:paused;
}
@keyframes svc-card-spotlight{
  0%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
  4%{
    transform:scale(1.035);
    box-shadow:0 0 0 5px color-mix(in srgb, var(--item-color) 18%, transparent),
               0 30px 60px -14px color-mix(in srgb, var(--item-color) 55%, rgba(28,22,22,.3));
    border-color:var(--item-color);
  }
  16%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
  100%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
}
.svc-layers-item-icon{
  flex:none; width:48px; height:48px; border-radius:13px;
  background:linear-gradient(150deg, var(--item-color), color-mix(in srgb, var(--item-color) 65%, #000 15%));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), inset 0 -6px 10px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  position:relative; z-index:1;
  transition:transform .35s var(--svc-ease), box-shadow .35s var(--svc-ease);
  animation:svc-icon-spotlight 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.svc-layers-item-icon::before,
.svc-layers-item-icon::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--item-color);
  opacity:0;
  animation:svc-icon-ripple 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.svc-layers-item-icon::after{ animation-delay:calc(var(--spot-delay, 0s) + .15s); }
.svc-layers-item-icon svg{width:21px; height:21px; stroke-width:2;}
.svc-layers-item:hover .svc-layers-item-icon{
  transform:scale(1.14) rotate(-5deg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 10px 22px -6px color-mix(in srgb, var(--item-color) 70%, transparent);
  animation-play-state:paused;
}
.svc-layers-item:hover .svc-layers-item-icon::before,
.svc-layers-item:hover .svc-layers-item-icon::after{ animation-play-state:paused; opacity:0; }
@keyframes svc-icon-spotlight{
  0%{ transform:scale(1) rotate(0deg); }
  4%{ transform:scale(1.22) rotate(-8deg); }
  16%{ transform:scale(1) rotate(0deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
@keyframes svc-icon-ripple{
  0%{ transform:scale(1); opacity:0; }
  4%{ transform:scale(1); opacity:.7; }
  20%{ transform:scale(1.7); opacity:0; }
  100%{ transform:scale(1); opacity:0; }
}
.svc-layers-item-title{
  font-family:var(--svc-font-mono);
  font-size:14.5px; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--item-color);
  margin-bottom:4px;
}
.svc-layers-item-desc{font-size:16px; line-height:1.55; color: #000; max-width:400px;}

.svc-layers-list[data-svc-reveal="stagger"] > .svc-layers-item{
  transform:translateX(-26px);
}
.svc-layers-list[data-svc-reveal="stagger"].svc-in > .svc-layers-item{
  transform:translateX(0);
}

.svc-layers-flow{
  flex:none;
  align-self:flex-start;
  background:none;
  border:none;
  box-shadow:none;
  padding:16px 16px 14px;
  width:190px;
  display:flex; flex-direction:column;
  transition:transform .4s var(--svc-ease);
  position:relative;
  overflow:visible;
}
.svc-layers-flow:hover{
  transform:translateY(-4px);
}
.svc-layers-flow:hover{
  transform:translateY(-4px);
  box-shadow:0 34px 64px -26px rgba(255,47,110,.3);
}


.svc-layers-flow-title{
  font-family:var(--svc-font-mono);
  font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--svc-text-dark-muted);
  margin-bottom:18px;
  display:flex; align-items:center; gap:7px;
}
.svc-layers-flow-title svg{width:13px; height:13px; color:var(--svc-accent); flex:none;}
.svc-layers-flow-track{position:relative;}
.svc-layers-flow-track::before{
  content:"";
  position:absolute; left:11px; top:6px; bottom:6px; width:3px;
  background:repeating-linear-gradient(
    180deg,
    color-mix(in srgb, var(--svc-accent) 70%, transparent) 0px,
    color-mix(in srgb, var(--svc-accent) 70%, transparent) 5px,
    transparent 5px,
    transparent 11px
  );
  background-size:3px 22px;
  border-radius:3px;
  animation:svc-track-flow .9s linear infinite;
  box-shadow:0 0 14px 1px rgba(255,47,110,.35);
}
@keyframes svc-track-flow{
  0%{background-position:0 0;}
  100%{background-position:0 22px;}
}

.svc-layers-flow-beam,
.svc-layers-flow-beam--b,
.svc-layers-flow-beam--c{
  position:absolute; left:6px; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--svc-accent) 55%, transparent 100%);
  box-shadow:0 0 18px 6px var(--svc-accent), 0 0 0 4px rgba(255,47,110,.25);
  top:0; opacity:0;
}
.svc-layers-flow-beam{ animation:svc-beam-travel 2.2s linear infinite; }
.svc-layers-flow-beam--b{ animation:svc-beam-travel 2.2s linear infinite .7s; }
.svc-layers-flow-beam--c{ animation:svc-beam-travel 2.2s linear infinite 1.4s; }

@keyframes svc-beam-travel{
  0%{top:0%; opacity:0; transform:scale(.5);}
  10%{opacity:1; transform:scale(1);}
  90%{opacity:1; transform:scale(1);}
  100%{top:96%; opacity:0; transform:scale(.5);}
}
.svc-layers-flow-step{
  display:flex; align-items:center; gap:12px;
  font-family:var(--svc-font-mono); font-size:16.5px; font-weight:550;
  letter-spacing:.03em; color:var(--svc-text-dark);
  padding:30px 0; position:relative; z-index:1;
  transition:transform .3s var(--svc-ease), color .3s var(--svc-ease);
}
.svc-layers-flow-step:hover{transform:translateX(3px); color:var(--step-color);}
.svc-layers-flow-step .svc-dot{
  width:16px; height:16px; border-radius:50%;
  background:var(--step-color, var(--svc-accent));
  border:2px solid #fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--step-color, var(--svc-accent)) 30%, transparent);
  flex:none;
  animation:svc-flow-dot-pulse 3.6s ease-in-out infinite;
}
.svc-layers-flow-step:nth-child(2) .svc-dot{animation-delay:0s;}
.svc-layers-flow-step:nth-child(3) .svc-dot{animation-delay:.3s;}
.svc-layers-flow-step:nth-child(4) .svc-dot{animation-delay:.6s;}
.svc-layers-flow-step:nth-child(5) .svc-dot{animation-delay:.9s;}
.svc-layers-flow-step:nth-child(6) .svc-dot{animation-delay:1.2s;}
.svc-layers-flow-step:nth-child(7) .svc-dot{animation-delay:1.5s;}
@keyframes svc-flow-dot-pulse{
  0%,80%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--step-color, var(--svc-accent)) 30%, transparent); transform:scale(1);}
  15%{box-shadow:0 0 0 6px color-mix(in srgb, var(--step-color, var(--svc-accent)) 15%, transparent); transform:scale(1.3);}
}

/* Responsive (add inside your existing @media blocks) */
@media (max-width: 980px){
  .svc-layers-grid{grid-template-columns:1fr; gap:40px;}
  .svc-layers-image-wrap{order:-1;}
  .svc-layers-image{transform:none;}
  .svc-layers-chip{display:none;}
  .svc-layers-body{flex-direction:column;}
  .svc-layers-flow{width:100%;}
}
@media (max-width: 640px){
  .svc-layers-list::before{left:24px;}
}
  /* ============================================================
     SECTION 03 — ECOSYSTEM (dark)
     ============================================================ */
  .svc-ecosystem{
    background:var(--svc-bg-dark);
    color:var(--svc-text-light);
    padding: 34px 0;
    position:relative;
    overflow:hidden;
  }
  .svc-ecosystem::before{
    content:"";
    position:absolute; left:50%; top:44%; width:900px; height:900px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(255,47,110,.14), transparent 65%);
    filter:blur(10px);
    pointer-events:none;
  }
  .svc-ecosystem-head{max-width:560px; margin:0 auto 54px; text-align:center;}
  .svc-ecosystem-head .svc-eyebrow{justify-content:center;}
  .svc-ecosystem-title{font-size: 35px; line-height:1.15; color: #fff;}

.svc-ecosystem-diagram{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  grid-template-areas:
    "top   top   top"
    "l1    img   r1"
    "l2    img   r2"
    "b1    .     b2";
  gap:8px 60px;
  max-width:1060px; margin:0 auto;
}
 .svc-eco-node{
  --item-color: var(--svc-accent);
  background:var(--svc-card-dark);
  border:1.5px solid color-mix(in srgb, var(--item-color) 30%, var(--svc-card-dark-border));
  border-radius:14px;
  padding:18px 20px;
  display:flex; gap:14px; align-items:flex-start;
  position:relative; z-index:2;
  transition:transform .4s var(--svc-ease), border-color .4s var(--svc-ease), box-shadow .4s var(--svc-ease);
}
.svc-eco-node:hover{
  transform:translateY(-5px) scale(1.02);
  border-color:var(--item-color);
  box-shadow:0 24px 46px -18px color-mix(in srgb, var(--item-color) 55%, transparent);
}
.svc-eco-node-icon{
  flex:none; width:40px; height:40px; border-radius:11px;
  background:linear-gradient(150deg, var(--item-color), color-mix(in srgb, var(--item-color) 65%, #000 15%));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -5px 8px rgba(0,0,0,.2), 0 8px 18px -8px color-mix(in srgb, var(--item-color) 60%, transparent);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--svc-ease), box-shadow .35s var(--svc-ease);
}
.svc-eco-node:hover .svc-eco-node-icon{
  transform:scale(1.12) rotate(-5deg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 12px 24px -8px color-mix(in srgb, var(--item-color) 70%, transparent);
}
.svc-eco-node-icon svg{width:18px; height:18px; stroke-width:2;}
.svc-eco-node-title{
  font-family:var(--svc-font-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--item-color);
  margin-bottom:6px;
}
.svc-eco-node-desc{font-size:14.5px; line-height:1.55; color:var(--svc-text-light-muted);}

  .svc-eco-top{grid-area:top; justify-self:center; text-align:center; max-width:220px;}
  .svc-eco-top .svc-eco-node{flex-direction:column; align-items:center; text-align:center;}
  .svc-eco-l1{grid-area:l1; align-self:start;}
  .svc-eco-l2{grid-area:l2; align-self:start;}
  .svc-eco-r1{grid-area:r1; align-self:start;}
  .svc-eco-r2{grid-area:r2; align-self:start;}
  .svc-eco-b1{grid-area:b1;}
  .svc-eco-b2{grid-area:b2;}

  .svc-eco-center{
    grid-area:img; position:relative; z-index:1;
    border-radius:18px; overflow:hidden;
    border:1px solid rgba(255,47,110,.3);
    background:#0f0b0b;
    box-shadow:0 40px 90px -30px rgba(255,47,110,.25);
    align-self:center;
  }
  /* REPLACE the src below with your own product screenshot */
  .svc-eco-center img{width:160%; display:block;}

  .svc-eco-lines{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;}
  .svc-eco-lines path{
    fill:none; stroke:rgba(255,47,110,.4); stroke-width:.5;
    stroke-dasharray:100;
    stroke-dashoffset:100;
    transition:stroke-dashoffset 1.6s var(--svc-ease);
    vector-effect:non-scaling-stroke;
  }
  .svc-eco-pill{
    fill:none; stroke:rgba(255,47,110,.45); stroke-width:.5;
    stroke-dasharray:3 2.4;
    vector-effect:non-scaling-stroke;
  }
  .svc-eco-dot{fill:var(--svc-accent); opacity:0; transition:opacity .5s var(--svc-ease) .9s;}
  .svc-ecosystem.svc-in .svc-eco-lines path{stroke-dashoffset:0;}
  .svc-ecosystem.svc-in .svc-eco-dot{opacity:1;}

  /* ============================================================
     SECTION 04 — EVOLVE (cream)
     ============================================================ */
 .svc-evolve{
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(255,47,110,.16), transparent 60%),
    radial-gradient(500px 380px at 85% 15%, rgba(255,138,76,.15), transparent 60%),
    radial-gradient(550px 420px at 75% 85%, rgba(168,85,247,.13), transparent 60%),
    radial-gradient(480px 380px at 20% 85%, rgba(20,224,176,.12), transparent 60%),
    var(--svc-bg-cream);
  background-size:200% 200%;
  animation:svc-mesh-move 18s ease-in-out infinite;
  padding:70px 0 60px;
  position:relative;
  overflow:hidden;
}
@keyframes svc-mesh-move{
  0%,100%{background-position:0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%;}
  50%{background-position:20% 30%, 80% 25%, 75% 70%, 25% 75%, 0% 0%;}
}
.svc-evolve-particle{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--svc-accent) 70%, transparent 100%);
  opacity:0; pointer-events:none; z-index:0;
  animation:svc-particle-float linear infinite;
}
@keyframes svc-particle-float{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  15%{opacity:.65;}
  85%{opacity:.65;}
  100%{transform:translateY(-160px) translateX(24px); opacity:0;}
}
  .svc-evolve-head{max-width:600px; margin:0 auto 64px; text-align:center;}
  .svc-evolve-head .svc-eyebrow{justify-content:center;}
  .svc-evolve-title{font-size:clamp(28px,3.4vw,40px); line-height:1.15;}

  .svc-evolve-steps{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:28px; position:relative; margin-bottom:70px;
  }
  .svc-evolve-steps::before{
    content:"";
    position:absolute; top:38px; left:12%; right:12%; height:1px;
    background:repeating-linear-gradient(90deg, rgba(28,22,22,.18) 0 6px, transparent 6px 12px);
    z-index:0;
  }
  .svc-evolve-step{text-align:center; position:relative; z-index:1;}

  .svc-evolve-steps::before{
  content:"";
  position:absolute; top:40px; left:12%; right:12%; height:3px;
  background:linear-gradient(90deg,#3b82f6,#ff2f6e,#14e0b0,#ff8a4c,#3b82f6);
  background-size:200% 100%;
  border-radius:3px;
  opacity:.9;
  box-shadow:0 0 16px 3px rgba(255,47,110,.35);
  z-index:0;
  animation:svc-line-flow 4s linear infinite, svc-line-glow 2.4s ease-in-out infinite;
}
@keyframes svc-line-flow{
  0%{background-position:0% 0%;}
  100%{background-position:200% 0%;}
}
@keyframes svc-line-glow{
  0%,100%{box-shadow:0 0 16px 3px rgba(255,47,110,.3);}
  50%{box-shadow:0 0 28px 8px rgba(255,47,110,.6);}
}
.svc-evolve-step-icon{
  width:80px; height:80px; border-radius:50%; margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  color:#fff;
  /*transition:transform .4s ease;*/
  animation:svc-icon-bounce 3s ease-in-out infinite;
}
.svc-evolve-step:nth-child(1) .svc-evolve-step-icon{
  background:linear-gradient(150deg,#3b82f6,#1d4ed8);
  box-shadow:0 12px 26px -8px rgba(59,130,246,.65);
}
.svc-evolve-step:nth-child(2) .svc-evolve-step-icon{
  background:linear-gradient(150deg,#ff2f6e,#c81e56);
  box-shadow:0 12px 26px -8px rgba(255,47,110,.65);
}
.svc-evolve-step:nth-child(3) .svc-evolve-step-icon{
  background:linear-gradient(150deg,#14e0b0,#0d9488);
  box-shadow:0 12px 26px -8px rgba(20,224,176,.65);
}
.svc-evolve-step:nth-child(4) .svc-evolve-step-icon{
  background:linear-gradient(150deg,#ff8a4c,#ea580c);
  box-shadow:0 12px 26px -8px rgba(255,138,76,.65);
}

.svc-evolve-step-icon::before{
  content:"";
  position:absolute; inset:-9px; border-radius:50%;
  border:2px dashed rgba(0,0,0,.18);
  animation:svc-ring-spin 7s linear infinite;
}
.svc-evolve-step-icon::after{
  content:"";
  position:absolute; inset:-4px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,255,255,.5);
  animation:svc-ring-pulse 2.4s ease-out infinite;
}
.svc-evolve-step-icon svg{ position:relative; z-index:1; width:28px; height:28px;}

@keyframes svc-icon-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
@keyframes svc-ring-spin{
  to{transform:rotate(360deg);}
}
@keyframes svc-ring-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,47,110,.4);}
  70%{box-shadow:0 0 0 16px rgba(255,47,110,0);}
  100%{box-shadow:0 0 0 0 rgba(255,47,110,0);}
}
.svc-evolve-step:hover .svc-evolve-step-icon{
  transform:scale(1.15) translateY(-10px);
  animation-play-state:paused;
}
  .svc-evolve-step-label{
    font-family: 'poppins-local'; font-size:20px; font-weight:900;
    letter-spacing:.1em; text-transform:uppercase; color:var(--svc-accent);
    margin-bottom:10px;
  }
  .svc-evolve-step-desc{font-size:16px; line-height:1.6; color: maroon; max-width:220px; margin:0 auto;}

.svc-evolve-quote-card{
  max-width:760px; margin:0 auto;
  background: var(--pwasvc-ink);
  border:1.5px solid rgba(255,47,110,.18);
  border-radius:20px;
  padding:2px 22px 22px;
  position:relative;
  box-shadow:0 30px 60px -30px rgba(28,22,22,.3);
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
}
.svc-evolve-quote-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit; padding:1.5px;
  background:linear-gradient(120deg,#3b82f6,#ff2f6e,#14e0b0,#ff8a4c,#3b82f6);
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:svc-border-flow 6s linear infinite;
  opacity:.6;
}
@keyframes svc-border-flow{
  0%{background-position:0% 50%;}
  100%{background-position:300% 50%;}
}
.svc-evolve-quote-card:hover{
  transform:translateY(-4px);
  box-shadow:0 40px 74px -26px rgba(255,47,110,.28);
}
.svc-evolve-quote-mark{
  width:34px; height:34px; color:var(--svc-accent); opacity:.35;
  margin-bottom:10px; display:block;
}
.svc-evolve-quote{
  position:relative; z-index:1;
  font-family:var(--svc-font-display);
  font-weight:600;
  font-size:clamp(19px,2.1vw,23px);
  line-height:1.55;
  color: #fff;
  margin:0;
  border-left:none;
  padding:0;
}
.svc-evolve-quote .svc-accent-word{
  background:linear-gradient(97deg,var(--svc-accent),var(--svc-accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 980px){
    .svc-hero-grid{grid-template-columns:1fr; gap:48px;}
    .svc-hero-visual{order:2;}
    .svc-hero-chip{font-size:10px; padding:7px 11px;}
    .svc-hero-chip--top{top:-12px; left:-10px;}
    .svc-hero-chip--bottom{bottom:-12px; right:-10px;}
    .svc-layers-grid{grid-template-columns:1fr; gap:40px;}
    .svc-layers-image-wrap{order:2;}
    .svc-layers-image{transform:none;}
    .svc-layers-chip{display:none;}
    .svc-layers-body{flex-direction:column;}
    .svc-layers-flow{width:100%;}
    .svc-ecosystem-diagram{
      grid-template-columns:1fr; grid-template-areas:
        "top" "img" "l1" "r1" "l2" "r2" "b1" "b2";
    }
    .svc-eco-center{order:-1; max-width:520px; margin:0 auto 8px;}
    .svc-eco-lines{display:none;}
    .svc-evolve-steps{grid-template-columns:1fr 1fr; row-gap:44px;}
    .svc-evolve-steps::before{display:none;}
  }

  @media (max-width: 640px){
    .svc-wrap{padding:0 20px;}
    .svc-hero{padding:64px 0 56px;}
    .svc-hero-orbit{flex-wrap:wrap; row-gap:24px; justify-content:flex-start;}
    .svc-hero-orbit-arrow{display:none;}
    .svc-hero-orbit-item{width:auto; margin-right:10px;}
    .svc-hero-cta{gap:12px;}
    .svc-hero-btn{padding:13px 20px; font-size:13.5px; flex:1 1 auto; justify-content:center;}
    .svc-hero-chip{display:none;}
    .svc-layers, .svc-ecosystem, .svc-evolve{padding:72px 0;}
    .svc-layers-list::before{left:24px;}
    .svc-evolve-steps{grid-template-columns:1fr; gap:36px;}
    .svc-evolve-quote{font-size:18px; padding-left:18px;}
  }


/*===============================================
          Api Sevices Development
===============================================*/

   :root{
    --black:#0a0a0c;
    --black2:#111114;
    --cream:#f6efe6;
    --cream2:#efe6d9;
    --pink:#ff2f5b;
    --orange:#ff7a3d;
    --grad: linear-gradient(90deg,var(--pink),var(--orange));
    --text-dark:#e9e6df;
    --text-dim:#9a968f;
    --text-light:#1a1714;
    --text-light-dim:#6b665e;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{background:var(--black);color:var(--text-dark);line-height:1.5;}
  img,svg{display:block;}
  .wrap{max-width:1200px;margin:0 auto;padding:0 48px;}
  .eyebrow22{
    display:flex;align-items:center;gap:10px;
    font-size:12px;font-weight:700;letter-spacing:.16em;
    color:#ff3860;text-transform:uppercase;margin-bottom:18px;
    margin-top: 30px;
  }
  .eyebrow22 .num{
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;border:1px solid var(--pink);border-radius:50%;
    font-size:11px;color:var(--pink);
  }
  h1,h2{
    font-weight:800;letter-spacing:-0.025em;line-height:1.06;
  }
  h1{
    font-size:50px;
    color:#ffffff;
  }

.highlight{
    background:linear-gradient(100deg,#ff3860,#ff8a65);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color: none !important;
    filter: none !important;
}

  h2{font-size:38px;color:var(--text-light);}
  .lead-dark p{color:#a7a29a;font-size:16px;max-width:420px;margin-top:18px;line-height:1.6;}
  .lead-light p{color:var(--text-light-dim);font-size:15.5px;max-width:420px;margin-top:18px;}

  @keyframes shine{
    0%{background-position:0% 50%;}
    100%{background-position:300% 50%;}
  }
  @keyframes fadeUp{
    from{opacity:0;transform:translateY(22px);}
    to{opacity:1;transform:translateY(0);}
  }
  @keyframes floatOrb{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-16px,22px) scale(1.08);}
  }
  @keyframes pulseGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(255,56,96,.35);}
    50%{box-shadow:0 0 0 10px rgba(255,56,96,0);}
  }
  .fade-in{opacity:0;animation:fadeUp .8s ease forwards;}
  .fade-in.d1{animation-delay:.05s;}
  .fade-in.d2{animation-delay:.2s;}
  .fade-in.d3{animation-delay:.35s;}
  .fade-in.d4{animation-delay:.5s;}
  .fade-in.d5{animation-delay:.65s;}

  /* ============ SECTION 1 : HERO ============ */
  .hero{
    background:
      radial-gradient(ellipse at 75% 20%, rgba(255,60,80,.10), transparent 55%),
      var(--black);
    padding:80px 0 70px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid #1c1a19;
  }
  .orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;}
  .orb1{width:280px;height:280px;background:radial-gradient(circle,rgba(255,56,96,.35),transparent 70%);top:-60px;right:20%;animation:floatOrb 9s ease-in-out infinite;}
  .orb2{width:220px;height:220px;background:radial-gradient(circle,rgba(255,122,61,.28),transparent 70%);bottom:-40px;left:5%;animation:floatOrb 11s ease-in-out infinite reverse;}
  .orb3{width:180px;height:180px;background:radial-gradient(circle,rgba(255,56,96,.22),transparent 70%);top:40%;right:2%;animation:floatOrb 7s ease-in-out infinite;}
  .hero .wrap{position:relative;z-index:1;}
  .hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
  .hero h1{
    font-size:50px;
    font-weight:800;
    line-height:1.06;
    letter-spacing:-0.025em;
    color:#ffffff;

    /* Remove unwanted glow / blur */
    filter:none;
    text-shadow:none;
    -webkit-text-stroke:0;

    margin-bottom:16px;
}

.hero h1 .highlight{
    background:linear-gradient(
        100deg,
        #ff3860 0%,
        #ff5876 45%,
        #ff8a65 100%
    );

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

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

    filter:none;
    text-shadow:none;

    /* No shine animation */
    animation:none;
}
  .features-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;
  }
  @keyframes floatIcon{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
  }
  @keyframes spinRing{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  .feature{
    border-top:1px solid #2a2724;padding-top:20px;
    transition:transform .3s ease;
  }
  .feature:hover{transform:translateY(-6px);}
  .feature .icon-badge{
    width:50px;height:50px;border-radius:50%;
    position:relative;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;
    background:#141014;
    animation:floatIcon 3.5s ease-in-out infinite;
  }
  .feature .icon-badge::before{
    content:"";position:absolute;inset:-2px;border-radius:50%;
    background:conic-gradient(from 0deg,#ff3860,#ff8a65,#ff3860);
    animation:spinRing 4s linear infinite;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  }
  .feature .icon-badge::after{
    content:"";position:absolute;inset:2px;border-radius:50%;
    background:#141014;
    box-shadow:0 0 16px 2px rgba(255,56,96,.45) inset;
  }
  .feature:nth-child(2) .icon-badge{animation-delay:.6s;}
  .feature:nth-child(3) .icon-badge{animation-delay:1.2s;}
  .feature:nth-child(4) .icon-badge{animation-delay:1.8s;}
  .feature svg{width:20px;height:20px;stroke:#ff5876;margin:0;position:relative;z-index:1;}
  .feature .ftitle{font-size:12.5px;font-weight:700;letter-spacing:.09em;color:#fff;margin-bottom:8px;}
  .feature .fdesc{font-size:12.5px;color:#8b877f;line-height:1.5;}

  /* hero diagram */
  .diagram{position:relative;padding-top:6px;}
  .hero-diagram-img{margin-top: 70px;width:100%;height:auto;border-radius:16px; height: 430px;}
  .top-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .device-card{
    background:linear-gradient(160deg,#17151a,#0e0d10);
    border:1px solid #2b2730;border-radius:14px;padding:16px 12px 22px;
    text-align:center;position:relative;
  }
  .device-card .icon-circle{
    width:34px;height:34px;border-radius:50%;
    background:rgba(255,60,80,.12);
    display:flex;align-items:center;justify-content:center;margin:0 auto 10px;
  }
  .device-card .icon-circle svg{width:17px;height:17px;stroke:var(--pink);margin:0;}
  .device-card .label{font-size:10px;font-weight:700;letter-spacing:.08em;color:#e7e3dc;margin-bottom:10px;}
  .device-screen{
    height:56px;border-radius:6px;
    background:linear-gradient(160deg,#1c1a20,#131116);
    border:1px solid #2c2833;
  }
  .connector-mid{
    display:flex;justify-content:center;padding:16px 0;position:relative;
  }
  .connector-mid::before{
    content:"";position:absolute;top:0;left:50%;width:1px;height:100%;
    background:linear-gradient(var(--pink),transparent);opacity:.5;
  }
  .core-box{
    background:linear-gradient(160deg,#19161b,#0c0b0d);
    border:1px solid var(--pink);
    box-shadow:0 0 30px rgba(255,50,80,.18), inset 0 0 20px rgba(255,90,60,.05);
    border-radius:12px;text-align:center;padding:20px;
    position:relative;
  }
  .core-box .title{font-size:20px;font-weight:800;letter-spacing:.04em;color:#fff;}
  .core-box .chip{
    margin:14px auto 0;width:34px;height:22px;border-radius:5px;
    background:rgba(255,90,60,.12);border:1px solid rgba(255,90,60,.4);
    display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--orange);
  }
  .bottom-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
  .sys-card{
    background:linear-gradient(160deg,#17151a,#0e0d10);
    border:1px solid #2b2730;border-radius:12px;padding:16px 14px;
  }
  .sys-card .icon-circle{
    width:30px;height:30px;border-radius:8px;
    background:rgba(255,60,80,.12);
    display:flex;align-items:center;justify-content:center;margin-bottom:10px;
  }
  .sys-card .icon-circle svg{width:15px;height:15px;stroke:var(--pink);margin:0;}
  .sys-card .label{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#e7e3dc;margin-bottom:4px;}
  .sys-card .sub{font-size:10.5px;color:var(--text-dim);}
  /* =====================================================
   API HERO — UNIQUE CONFLICT FIX
===================================================== */

#egsApiHero {
  position: relative;
  width: 100%;
  padding: 80px 0 70px;
  overflow: hidden;
  color: #e9e6df;
  background:
    radial-gradient(
      ellipse at 75% 20%,
      rgba(255, 60, 80, 0.10),
      transparent 55%
    ),
    #0a0a0c;
}

#egsApiHero > .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

#egsApiHero .features-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 22px !important;
  width: 100% !important;
  margin-top: 44px !important;
}

/* White tall boxes remove */
#egsApiHero .features-row .feature {
  display: block !important;
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 20px 0 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #2a2724 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: #ffffff !important;
  text-align: left !important;
  overflow: visible !important;
}

#egsApiHero .features-row .feature:hover {
  transform: translateY(-6px);
}

#egsApiHero .feature .icon-badge {
  display: flex !important;
  align-items: center;
  justify-content: center;

  position: relative;
  width: 50px !important;
  height: 50px !important;

  margin: 0 0 16px !important;
  padding: 0 !important;

  background: #141014 !important;
  border: 0 !important;
  border-radius: 50% !important;
}

#egsApiHero .feature .icon-badge::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #141014;
  box-shadow: inset 0 0 16px 2px rgba(255, 56, 96, 0.45);
}

#egsApiHero .feature .icon-badge svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  stroke: #ff5876 !important;
}

#egsApiHero .feature .ftitle {
  display: block !important;
  margin: 0 0 8px !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
}

#egsApiHero .feature .fdesc {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #8b877f !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

#egsApiHero .diagram {
  position: relative;
  width: 100%;
  padding-top: 6px;
}

#egsApiHero .hero-diagram-img {
  display: block;
  width: 100%;
  height: 430px;
  margin-top: 70px;
  object-fit: cover;
  border-radius: 16px;
}

/* Tablet */
@media screen and (max-width: 992px) {
  #egsApiHero > .wrap {
    grid-template-columns: 1fr;
    padding: 0 28px;
  }

  #egsApiHero .features-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #egsApiHero .hero-diagram-img {
    height: auto;
    margin-top: 20px;
  }
}

/* Mobile */
@media screen and (max-width: 576px) {
  #egsApiHero {
    padding: 55px 0 45px;
  }

  #egsApiHero > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding: 0 18px;
  }

  #egsApiHero h1 {
    font-size: clamp(34px, 10vw, 46px);
  }

  #egsApiHero .lead-dark p {
    max-width: 100%;
    font-size: 15px;
  }

  #egsApiHero .features-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 16px !important;
    margin-top: 35px !important;
  }

  #egsApiHero .features-row .feature {
    padding-top: 16px !important;
  }

  #egsApiHero .feature .fdesc {
    font-size: 12px !important;
  }

  #egsApiHero .hero-diagram-img {
    width: 100%;
    height: auto;
    margin-top: 0;
  }
}


   /* ============ SECTION 2: WHAT WE CONNECT ============ */
  .connect-sec{
    background:
      radial-gradient(circle at 15% 20%, rgba(255,56,96,.10), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(255,122,61,.12), transparent 45%),
      radial-gradient(circle at 60% 10%, rgba(255,138,101,.08), transparent 40%),
      linear-gradient(155deg,#f8f1e8 0%,#f3e8db 55%,#f6ecdf 100%);
    background-size:200% 200%,200% 200%,200% 200%,100% 100%;
    animation:meshShift 18s ease-in-out infinite;
    color:var(--text-light);
    padding:70px 0;
    position:relative;
    overflow:hidden;
  }
  .connect-sec::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:radial-gradient(circle,rgba(120,90,60,.10) 1px,transparent 1.4px);
    background-size:26px 26px;
    -webkit-mask:radial-gradient(circle at 20% 30%, #000 0%, transparent 60%);
    mask:radial-gradient(circle at 20% 30%, #000 0%, transparent 60%);
  }
  @keyframes meshShift{
    0%,100%{background-position:0% 0%,100% 100%,50% 0%,0 0;}
    50%{background-position:20% 15%,80% 85%,60% 10%,0 0;}
  }
  .connect-sec .cs-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;}
  .connect-sec .cs-orb1{width:320px;height:320px;background:radial-gradient(circle,rgba(255,56,96,.16),transparent 70%);top:-80px;left:30%;animation:floatOrb 12s ease-in-out infinite;}
  .connect-sec .cs-orb2{width:260px;height:260px;background:radial-gradient(circle,rgba(255,122,61,.14),transparent 70%);bottom:-60px;right:8%;animation:floatOrb 10s ease-in-out infinite reverse;}
  .connect-sec .wrap{position:relative;z-index:1; padding: 6px;}
  .connect-sec .eyebrow{
    color:var(--pink);position:relative;
  }
  .connect-sec .eyebrow::after{
    content:"";display:inline-block;width:28px;height:1.5px;
    background:linear-gradient(90deg,var(--pink),transparent);margin-left:4px;vertical-align:middle;
  }
  .connect-sec h2{color:var(--text-light);text-shadow:0 2px 18px rgba(255,90,60,.08);}
  .connect-sec .heading-highlight{
    background:linear-gradient(100deg,#ff3860,#ff8a65);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 14px rgba(255,80,100,.35));
  }
  .connect-left{position:relative;padding-left:22px;}
  .connect-left::before{
    content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;
    background:linear-gradient(180deg,var(--pink),var(--orange));
  }
  .connect-left .lead-light p{
    position:relative;font-size:16px;line-height:1.75;color: black;
  }
 .connect-outer{
  display:grid;grid-template-columns:0.65fr 1.9fr;gap:10px;align-items:start;margin-top:10px;
}
  .connect-left .eyebrow,
  .connect-left h2,
  .connect-left .lead-light{margin-top:0;}
  .connect-grid{
    display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:40px;align-items:start;position:relative;
  }
  .connect-lines{
    position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  }
  @property --border-angle{
    syntax:'<angle>';
    inherits:false;
    initial-value:0deg;
  }
  @keyframes floatCard{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
  }
  @keyframes cardGlowPink{
    0%,100%{box-shadow:0 10px 24px rgba(255,56,96,.10);}
    50%{box-shadow:0 20px 42px rgba(255,56,96,.26);}
  }
  @keyframes cardGlowOrange{
    0%,100%{box-shadow:0 10px 24px rgba(255,122,61,.10);}
    50%{box-shadow:0 20px 42px rgba(255,122,61,.26);}
  }
  @keyframes borderRotate{
    to{--border-angle:360deg;}
  }
  @keyframes ringSpinCW{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  @keyframes ringSpinCCW{
    from{transform:rotate(0deg);}
    to{transform:rotate(-360deg);}
  }
  @keyframes iconPulseRing{
    0%,100%{opacity:.5;transform:scale(1);}
    50%{opacity:1;transform:scale(1.08);}
  }
  .side-col{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1;}
.conn-card{
  position:relative;
  background:linear-gradient(165deg,#fff7f2 0%,#ffe9ee 100%);
  border:none;border-radius:18px;padding:26px 24px 28px;min-height:132px;
  box-shadow:0 2px 8px rgba(120,90,60,.05), 0 1px 2px rgba(120,90,60,.04);
  animation:floatCard 4.5s ease-in-out infinite;
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
  overflow:hidden;
}
.side-col:first-child .conn-card{
  background:linear-gradient(165deg,#fff0f2 0%,#ffd9e0 100%);
}
.side-col:last-child .conn-card{
  background:linear-gradient(165deg,#fff3e6 0%,#ffdcbf 100%);
}
.conn-card::after{
  content:"";position:absolute;top:-40%;right:-25%;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85),transparent 70%);
  pointer-events:none;opacity:.7;
}
.conn-card .ctitle{
  font-size:13.5px;font-weight:800;letter-spacing:.03em;color:#241f1a;
  transition:color .3s ease;
}

.conn-card::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  padding:2.2px;
  background:conic-gradient(from var(--border-angle),#ff3860,#ff6f8c,#ff8a65,#ffc199,#ff8a65,#ff3860);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:borderRotate 4s linear infinite;
  pointer-events:none;
  opacity:.9;
  filter:drop-shadow(0 0 6px rgba(255,80,100,.35));
  transition:opacity .3s ease, filter .3s ease;
}
.conn-card:hover::before{
  opacity:1;
  filter:drop-shadow(0 0 12px rgba(255,80,100,.55));
}
.side-col:first-child .conn-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(255,56,96,.10), transparent 55%),
    linear-gradient(165deg,#ffffff 0%,#fff5f6 55%,#ffedf0 100%);
}
.side-col:last-child .conn-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(255,122,61,.12), transparent 55%),
    linear-gradient(165deg,#ffffff 0%,#fff7ee 55%,#ffefe0 100%);
}
.conn-card::after{
  content:"";position:absolute;top:-40%;right:-25%;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%);
  pointer-events:none;opacity:.6;
}
.conn-card:hover{
  transform:translateY(-14px) scale(1.035);
  box-shadow:0 26px 48px rgba(255,56,96,.24);
}
.side-col:last-child .conn-card:hover{
  box-shadow:0 26px 48px rgba(255,122,61,.24);
}
.conn-card:hover::before{opacity:1;}
.conn-card > *{position:relative;z-index:1;}
.side-col:first-child .conn-card:nth-child(1){animation-delay:0s,0s;}
.side-col:first-child .conn-card:nth-child(2){animation-delay:.5s,.4s;}
.side-col:first-child .conn-card:nth-child(3){animation-delay:1s,.8s;}
.side-col:last-child .conn-card:nth-child(1){animation-delay:1.5s,1.2s;}
.side-col:last-child .conn-card:nth-child(2){animation-delay:2s,1.6s;}
.side-col:last-child .conn-card:nth-child(3){animation-delay:2.5s,2s;}
.conn-card:hover{
  transform:translateY(-14px) scale(1.035);
  box-shadow:0 26px 48px rgba(255,56,96,.24);
}
.conn-card .top{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.conn-card:hover .ctitle{color:var(--pink);}
.side-col:last-child .conn-card:hover .ctitle{color:var(--orange);}
.conn-card .cdesc{font-size:12.5px;color:#847c70;line-height:1.65;}
  .conn-card .top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}

.conn-card:hover .ic.pink{box-shadow:0 10px 22px rgba(255,56,96,.38);}
.conn-card:hover .ic.orange{box-shadow:0 10px 22px rgba(255,122,61,.38);}
.conn-card .ic svg{width:20px;height:20px;margin:0;position:relative;z-index:1;}
.conn-card .ic.pink svg{stroke:var(--pink);}
.conn-card .ic.orange svg{stroke:var(--orange);}
  .conn-card .ctitle{font-size:13px;font-weight:700;letter-spacing:.04em;}
  .conn-card .cdesc{font-size:13.5px;color: black;line-height:1.6;}

.conn-card .ic{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s ease, box-shadow .35s ease;
  position:relative;
}
.conn-card .ic::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid currentColor;opacity:.3;
  animation:iconPulseRing 2.6s ease-in-out infinite;
}
.conn-card .ic::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.06);
  pointer-events:none;
}
.conn-card .ic.pink{
  background:linear-gradient(150deg,#ffeef0 0%,#ffd2da 55%,#ffb8c6 100%);
  color:var(--pink);
  box-shadow:0 6px 14px rgba(255,56,96,.22);
}
.conn-card .ic.orange{
  background:linear-gradient(150deg,#fff1e6 0%,#ffdcc4 55%,#ffc39a 100%);
  color:var(--orange);
  box-shadow:0 6px 14px rgba(255,122,61,.22);
}
.conn-card:hover .ic{
  transform:rotate(-10deg) scale(1.16);
}
  .hub-wrap{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:340px;align-self:center;z-index:1;}
  .hub-ring{
    position:absolute;border-radius:50%;border:1px dashed #e3b7a9;
  }
  .ring1{width:340px;height:340px;animation:ringSpinCW 30s linear infinite;}
  .ring2{width:260px;height:260px;border-style:dotted;animation:ringSpinCCW 22s linear infinite;}
  .hub-core{
  position:relative;z-index:2;border-radius:50%;
  width:250px;height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(160,40,40,.12);border:1px solid #f0d9cb;
  animation:cardGlowPink 3s ease-in-out infinite;
}
.hub-core .stack-img{
  width:970px;height:auto;
  max-width:100%;
  object-fit:contain;
  margin-bottom:8px;
}
  .hub-core .htitle{font-size:16px;font-weight:800;letter-spacing:.04em;}
  .hub-core .hsub{font-size:10.5px;color:var(--text-light-dim);margin-top:2px;}

  /* ============ SECTION 3: API ENGINE ============ */
/* ==========================================================
   SECTION 3: THE API ENGINE
   All classes prefixed with "eng-" so nothing clashes with
   other sections/stylesheets on the page.
   ========================================================== */

* { box-sizing: border-box; }

body{
  margin:0;
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  background:#0a0a0a;
}

.eng-sec{
  background:#0a0a0a;
  color:#fff;
  padding:80px 0;
  overflow:hidden;
}

.eng-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
}

.eng-grid{
  display:grid;
  grid-template-columns:0.8fr 1.4fr;
  gap:40px;
  align-items:center;
}

/* -------------------- LEFT -------------------- */
.eng-left{
  border-left:2px solid #ff2d55;
  padding-left:24px;
}

.eng-eyebrow{
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
  color:#fff;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.eng-eyebrow::after{
  content:'';
  width:30px;
  height:1px;
  background:#ff2d55;
}

.eng-left h2{
  font-size:40px;
  font-weight:800;
  line-height:1.25;
  margin:0 0 20px;
  color: #fff;
}

.eng-accent{
  background:linear-gradient(90deg,#ff2d55,#ff7a3d);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.eng-lead{
  font-size:18px;
  line-height:1.7;
  color: #e5e5e5;
  max-width:360px;
  margin:0;
}

/* -------------------- RIGHT: cards + orbit -------------------- */
.eng-right{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}

.eng-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.eng-card{
  border:1px solid #4a1622;
  border-radius:12px;
  padding:16px 18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:rgba(255,45,85,.04);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.eng-card:hover{
  border-color:#ff2d55;
  background:rgba(255,45,85,.08);
  transform:translateY(-2px);
}

.eng-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #ff2d55;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.eng-icon svg{
  width:18px;
  height:18px;
  stroke:#ff2d55;
  margin:0;
}

.eng-ctext h4{
  font-size:13px;
  font-weight:800;
  letter-spacing:.05em;
  margin:0 0 6px;
  color:#fff;
}
.eng-ctext p{
  font-size:12px;
  line-height:1.6;
  color:#9a9a9a;
  margin:0;
}

/* -------------------- ORBIT (image + connecting lines) -------------------- */
.eng-orbit{
  width:260px;
  height:260px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}

.eng-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  overflow:visible;
}
.eng-lines path{
  fill:none;
  stroke:#ff2d55;
  stroke-width:1.4;
  stroke-dasharray:4 4;
  opacity:.59;
  filter:drop-shadow(0 0 3px rgba(255,45,85,.6));
  animation:eng-dash 22s linear infinite;
}
@keyframes eng-dash{
  to{ stroke-dashoffset:-200; }
}

.eng-orbit-glow{
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,45,85,.35) 0%,rgba(255,45,85,0) 70%);
  z-index:0;
  animation:eng-pulse 4s ease-in-out infinite;
}
@keyframes eng-pulse{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}

.eng-orbit-img{
  width:260px;
  height:260px;
  object-fit:contain;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 0 25px rgba(255,45,85,.55));
}

/* fallback shown via JS if the image fails to load */
.eng-orbit-fallback{
  position:relative;
  z-index:2;
  width:110px;
  height:110px;
  border-radius:20px;
  background:linear-gradient(145deg,#1a1a2e,#0d0d1a);
  border:1px solid #ff2d55;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:0 0 30px rgba(255,45,85,.45);
}
.eng-orbit-fallback svg{
  width:34px;
  height:34px;
  stroke:#00d4ff;
  margin:0;
}
.eng-orbit-fallback span{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:#00d4ff;
  text-shadow:0 0 10px rgba(0,212,255,.8);
}

/* -------------------- STATS / TECH STACK ROW -------------------- */
.eng-stats{
  margin-top:56px;
  border:1px solid #ff2d55;
  border-radius:100px;
  padding:18px 36px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:36px;
  background:rgba(255,255,255,.02);
}

.eng-stat{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:#e5e5e5;
  white-space:nowrap;
}
.eng-stat svg{
  width:16px;
  height:16px;
  stroke:#ff2d55;
  margin:0;
  flex:none;
}

/* reveal-on-scroll state, toggled by JS via IntersectionObserver */
.eng-card,
.eng-orbit,
.eng-stat{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.eng-card.is-visible,
.eng-orbit.is-visible,
.eng-stat.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .eng-wrap{padding:0 24px;}
  .eng-grid{grid-template-columns:1fr;gap:40px;}
  .eng-left{
    border-left:none;
    padding-left:0;
    border-top:2px solid #ff2d55;
    padding-top:20px;
  }
  .eng-right{grid-template-columns:1fr;justify-items:center;}
  .eng-orbit{order:-1;margin-bottom:20px;}
  .eng-col{width:100%;max-width:420px;}
  .eng-stats{
    border-radius:20px;
    gap:20px;
    padding:20px;
    justify-content:flex-start;
  }
}

@media(max-width:600px){
  .eng-left h2{font-size:27px;}
  .eng-stats{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
  }
  .eng-stats::-webkit-scrollbar{display:none;}
}
/* ============ SECTION 4: PROCESS (self-contained, no shared class names) ============ */
.proc-sec{
  background: linear-gradient(160deg, var(--mad-cream) 0%, #f9d9e4 50%, #fce0c8 100%);
  color:#2b2b2b;
  padding:70px 0 60px;
  overflow:hidden;
}

.proc-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 40px;
  display:block; /* explicitly NOT grid, avoids any inherited grid rule */
}

.proc-eyebrow{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:#ff4f79;
  margin-bottom:14px;
}
.proc-num{margin-right:6px;}

/* Heading row: h2 left, lead paragraph right */
.proc-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  width:100%;
}
.proc-head h2{
  font-size:32px;
  line-height:1.25;
  margin:0;
  color:#1a1a1a;
  font-weight:800;
}
.proc-lead{
  font-size:17px;
  line-height:1.6;
  color: black;
  margin:0;
  max-width:420px;
}

/* Steps row — always full width, never confined by proc-head grid */
.proc-steps{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:start;
  width:100%;
  margin-top:60px;
}

.proc-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 10px;
}

.proc-circle{
  width:84px;
  height:84px;
  border-radius:50%;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.18);
  background: linear-gradient(135deg, var(--mad-pink), #f6923a);
}
.proc-circle svg{
  width:48px;
  height:48px;
  margin:0;
  display:block;
}

.proc-step:nth-child(odd) .proc-circle{background:#ffe0e5;}
.proc-step:nth-child(odd) .proc-circle svg{stroke:#ff4f79;}
.proc-step:nth-child(even) .proc-circle{background:#ffe6d6;}
.proc-step:nth-child(even) .proc-circle svg{stroke:#ff8a3d;}

.proc-snum{
  position:absolute;
  top:-4px;
  right:-2px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#ff4f79;
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.proc-step:nth-child(even) .proc-snum{background:#ff8a3d;}

.proc-label{
  font-size:15px;
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:10px;
  color:#1a1a1a;
}

.proc-desc{
  font-size:13.5px;
  color: maroon;
  line-height:1.6;
  max-width:180px;
  margin:0 auto;
  margin-bottom: 30px;
}

.proc-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  height:84px;
  color:#ff4f79;
  font-size:35px;
  font-weight:600;
}


/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .proc-wrap{padding:0 24px;}
  .proc-head{grid-template-columns:1fr;gap:20px;}
  .proc-head h2{font-size:27px;}

  .proc-steps{
    display:flex;
    flex-direction:column;
    gap:32px;
    margin-top:40px;
  }
  .proc-arrow{display:none;}
  .proc-desc{max-width:280px;}

  .proc-closing{flex-direction:column;text-align:center;}
  .proc-closing p{text-align:center;}
}

/* =========================================================
   COMPLETE MOBILE RESPONSIVE — FINAL
   Desktop styles above remain unchanged.
   ========================================================= */
@media (max-width:768px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  img,svg{max-width:100%;}
  .wrap,.eng-wrap,.proc-wrap{
    width:100%;
    max-width:100%;
    padding-left:18px;
    padding-right:18px;
  }

  /* Section 1 — Hero */
  .hero{padding:54px 0 48px;}
  .hero .wrap{
    display:flex;
    flex-direction:column;
    gap:34px;
    align-items:stretch;
  }
  .hero h1{
    font-size:clamp(34px,10vw,44px);
    line-height:1.1;
    overflow-wrap:anywhere;
  }
  .lead-dark p{
    max-width:100%;
    font-size:15px;
    line-height:1.7;
  }
  .features-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 16px;
    margin-top:34px;
  }
  .feature{min-width:0;}
  .diagram{width:100%;padding-top:0;}
  .hero-diagram-img{
    width:100%;
    height:auto;
    max-height:none;
    margin-top:0;
    border-radius:12px;
    object-fit:contain;
  }
  .orb1{width:190px;height:190px;right:-50px;}
  .orb2{width:160px;height:160px;left:-55px;}
  .orb3{display:none;}

  /* Section 2 — What We Connect */
  .connect-sec{padding:52px 0;}
  .connect-sec .wrap{padding-left:18px;padding-right:18px;}
  .connect-outer{
    display:flex;
    flex-direction:column;
    gap:34px;
    margin-top:0;
  }
  .connect-left{width:100%;padding-left:16px;}
  .connect-sec h2{
    font-size:clamp(29px,8.5vw,38px);
    line-height:1.15;
  }
  .connect-left .lead-light p{
    max-width:100%;
    font-size:15px;
    line-height:1.7;
  }
  .connect-grid{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:20px;
  }
  .connect-lines{display:none;}
  .side-col{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }
  .conn-card{
    width:100%;
    min-height:0;
    padding:20px 18px;
    animation:none;
  }
  .conn-card:hover{transform:none;}
  .hub-wrap{
    order:-1;
    width:100%;
    min-height:270px;
    height:270px;
    overflow:hidden;
  }
  .ring1{width:260px;height:260px;}
  .ring2{width:205px;height:205px;}
  .hub-core{width:190px;height:190px;}
  .hub-core .stack-img{
    width:100%;
    max-width:190px;
    height:auto;
    margin:0;
  }

  /* Section 3 — API Engine */
  .eng-sec{padding:54px 0;}
  .eng-grid{gap:34px;}
  .eng-left h2{
    font-size:clamp(29px,8.5vw,38px);
    line-height:1.2;
  }
  .eng-lead{max-width:100%;font-size:15px;}
  .eng-right{width:100%;gap:22px;}
  .eng-col{width:100%;max-width:none;gap:14px;}
  .eng-card{width:100%;padding:15px;}
  .eng-orbit{
    width:min(260px,78vw);
    height:min(260px,78vw);
    margin-bottom:8px;
  }
  .eng-orbit-img{width:100%;height:100%;}
  .eng-orbit-glow{width:70%;height:70%;}
  .eng-stats{
    width:100%;
    margin-top:36px;
    padding:18px;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    overflow:visible;
    border-radius:18px;
  }
  .eng-stat{white-space:normal;}

  /* Section 4 — Process */
  .proc-sec{padding:52px 0 42px;}
  .proc-head{gap:16px;}
  .proc-head h2{
    font-size:clamp(28px,8vw,34px);
    line-height:1.2;
  }
  .proc-lead{max-width:100%;font-size:15px;}
  .proc-steps{gap:26px;margin-top:34px;}
  .proc-step{width:100%;padding:0;}
  .proc-circle{width:78px;height:78px;margin-bottom:14px;}
  .proc-circle svg{width:42px;height:42px;}
  .proc-desc{
    max-width:320px;
    margin-bottom:0;
    font-size:13.5px;
  }
}

@media (max-width:480px){
  .wrap,.eng-wrap,.proc-wrap,
  .connect-sec .wrap{
    padding-left:14px;
    padding-right:14px;
  }
  .hero{padding:44px 0 40px;}
  .hero h1{font-size:32px;}
  .eyebrow22{font-size:10.5px;letter-spacing:.12em;}
  .features-row{gap:22px 12px;}
  .feature .icon-badge{width:44px;height:44px;}
  .feature .ftitle,.feature .fdesc{font-size:12px;}
  .connect-sec,.eng-sec{padding:44px 0;}
  .conn-card .top{gap:10px;}
  .conn-card .ic{width:42px;height:42px;}
  .conn-card .cdesc{font-size:13px;}
  .hub-wrap{height:240px;min-height:240px;}
  .ring1{width:230px;height:230px;}
  .ring2{width:180px;height:180px;}
  .hub-core{width:165px;height:165px;}
  .hub-core .stack-img{max-width:165px;}
  .eng-card{gap:10px;padding:14px 12px;}
  .eng-ctext p{font-size:11.5px;}
  .proc-sec{padding:44px 0 38px;}
}

@media (prefers-reduced-motion:reduce){
  .hero *,
  .connect-sec *,
  .eng-sec *,
  .proc-sec *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}












/*=============================================================
                Ai Powered Business Solutions
=============================================================*/

:root{
    --ai-dark:#0b0710;
    --ai-dark2:#120a18;
    --ai-pink:#ff2d78;
    --ai-orange:#ff7a3d;
    --ai-gradient: linear-gradient(90deg,var(--ai-pink),var(--ai-orange));
    --ai-light:#f7f5f8;
    --ai-white:#ffffff;
    --ai-text:#17121f;
    --ai-muted:#645f70;
    --ai-text-light:#ffffff;
    --ai-text-light-muted:#bdb6c9;
    --ai-border:#eceaf0;
    --ai-radius:16px;
    --ai-max:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Poppins',Arial,Helvetica,sans-serif;
    background:var(--ai-light);
    color:var(--ai-text);
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  .ai-container{max-width:var(--ai-max);margin:0 auto;padding:0 40px;}
  h1,h2,h3,h4{font-weight:800;letter-spacing:-0.01em;}
  .ai-accent{background:var(--ai-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}

  .ai-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--ai-pink);font-size:12px;font-weight:700;letter-spacing:1.2px;
    border:1px solid rgba(255,45,120,.4);
    padding:6px 14px;border-radius:100px;
    margin-bottom:20px;
    margin-top: 30px;
  }
  .ai-eyebrow.ai-plain{border:none;padding:0;}
  .ai-eyebrow.ai-plain::after{content:"";flex:1;max-width:50px;height:1px;background:var(--ai-pink);opacity:.6;}

  /* ================= HERO ================= */
  .ai-hero{
    background:radial-gradient(ellipse at 80% 20%, #2a0f22 0%, var(--ai-dark) 55%);
    padding:70px 0 60px;
    overflow:hidden;
  }
  .ai-hero-grid{
    display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center;
  }
  .ai-hero-content h1{
    font-size:49px;line-height:1.14;color:var(--ai-text-light);margin-bottom:20px;
  }

  .ai-hero-content h1 span{
    background: linear-gradient(90deg, var(--ai-pink), var(--ai-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}
  .ai-hero-content p{
    color:var(--ai-text-light-muted);font-size:15.5px;line-height:1.75;max-width:480px;margin-bottom:30px;
  }
  .ai-hero-ctas{display:flex;gap:14px;margin-bottom:44px;flex-wrap:wrap;}
  .ai-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 26px;border-radius:100px;
    font-weight:600;font-size:14.5px;
    transition:.25s;
    border:1.5px solid transparent;
  }
  .ai-btn-primary{
    background:var(--ai-gradient);color:#fff;
    box-shadow:0 10px 30px rgba(255,45,120,.35);
  }
  .ai-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,45,120,.5);}
  .ai-btn-outline{
    background:transparent;color:#fff;border-color:rgba(255,255,255,.25);
  }
  .ai-btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.06);}

  .ai-stats{display:flex;gap:40px;flex-wrap:wrap;}
  .ai-stat{display:flex;align-items:center;gap:12px;}
  .ai-stat-icon{
    width:42px;height:42px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,45,120,.12);color:var(--ai-pink);font-size:18px;
  }
  .ai-stat strong{display:block;font-size:20px;color:#fff;font-weight:800;line-height:1.1;}
  .ai-stat span{font-size:12.5px;color:#fff;font-weight:500;}
  .ai-hero-img{
    width: 130%;
    max-width: 680px;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.4));
  }

  /* hero visual - 3D cube */
  .ai-hero-visual{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;}
  .ai-hero-orbit-icon{
    position:absolute;width:52px;height:52px;border-radius:14px;
    background:#1c1226;border:1px solid rgba(255,45,120,.35);
    display:flex;align-items:center;justify-content:center;
    color:var(--ai-pink);font-size:20px;
    box-shadow:0 12px 30px rgba(0,0,0,.4);
    animation:aiFloat 4.5s ease-in-out infinite;
  }
  .ai-hero-orbit-icon.ai-o1{top:8%; left:2%; animation-delay:0s;}
  .ai-hero-orbit-icon.ai-o2{top:2%; right:8%; animation-delay:.8s;}
  .ai-hero-orbit-icon.ai-o3{bottom:14%; left:-2%; animation-delay:1.6s;}
  .ai-hero-orbit-icon.ai-o4{bottom:6%; right:0%; animation-delay:2.4s;}
  @keyframes aiFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
  }

  /* ================= SERVICES ================= */
.ai-services{
  background: linear-gradient(180deg, #ffffff 0%, #fdf7f9 100%);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.ai-services::before{
  content:"";
  position:absolute; top:-15%; left:-10%;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.ai-services::after{
  content:"";
  position:absolute; bottom:-15%; right:-8%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,122,61,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.ai-services .ai-container{position:relative; z-index:1;}

.ai-services-head{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:50px;
}
.ai-services-head h2{font-size:40px;line-height:1.25;}
.ai-services-head .ai-lead{color:var(--ai-muted);font-size:16.5px;line-height:1.8;padding-bottom:4px;}

/* --- marquee track --- */
.ai-marquee{
  overflow: hidden;
  position: relative;
  padding: 30px 0 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.ai-service-grid{
  display:flex;
  gap:22px;
  width:max-content;
  perspective: 1200px;
}

.ai-service-card{
  --card-color: var(--ai-pink);
  background:#fff;
  border:1px solid var(--ai-border);
  border-radius:20px;
  padding:30px 24px;
  position:relative;
  overflow:hidden;
  width: 240px;
  flex: 0 0 260px;
  transform-style: preserve-3d;
  transition: box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
.ai-service-card:nth-child(5n+1){ --card-color:#ff2d78; }
.ai-service-card:nth-child(5n+2){ --card-color:#8b5cf6; }
.ai-service-card:nth-child(5n+3){ --card-color:#3ba7ff; }
.ai-service-card:nth-child(5n+4){ --card-color:#2dd4c7; }
.ai-service-card:nth-child(5n+5){ --card-color:#ffb020; }

.ai-service-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--card-color), transparent);
}

.ai-service-card:hover{
  box-shadow: 0 30px 50px color-mix(in srgb, var(--card-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--card-color) 35%, transparent);
}

.ai-marquee-dots{
  display:flex;justify-content:center;gap:8px;margin-top:26px;
}
.ai-marquee-dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--ai-border);
  transition: all .3s ease;
}
.ai-marquee-dot.ai-dot-active{
  width:26px;border-radius:5px;
  background: var(--ai-gradient);
}

.ai-service-num{
  font-size:26px;
  font-weight:800;
  color: color-mix(in srgb, var(--card-color) 20%, white);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--card-color) 55%, transparent);
  margin-bottom:4px;
  line-height:1;
  transform: translateZ(25px);
  transition: text-shadow .3s ease, color .3s ease;
}
.ai-service-card.ai-card-focused .ai-service-num{
  color: var(--card-color);
  text-shadow: 0 0 18px color-mix(in srgb, var(--card-color) 60%, transparent);
}

.ai-service-icon{
  width:48px;height:48px;border-radius:15px;
  background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 55%, var(--ai-orange)));
  display:flex;align-items:center;justify-content:center;
  color: whitesmoke;font-size:22px;margin-bottom:16px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 45%, transparent);
  transition: transform .3s ease;
  transform: translateZ(35px);
}
.ai-service-card:hover .ai-service-icon{
  transform: translateZ(35px) scale(1.12) rotate(-8deg);
}

.ai-service-card h3{
  font-size:16px;line-height:1.28;margin-bottom:6px;color:var(--ai-text);
  min-height:0;
  transform: translateZ(20px);
}

.ai-service-card ul{margin-bottom:8px; transform: translateZ(15px);}
.ai-service-card li{
 font-size:13.5px;color: black;line-height:1.55;padding-left:16px;position:relative;
}
.ai-service-card li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
  background: var(--card-color);
}

.ai-service-link{
  font-size:12.5px;font-weight:700;color:var(--card-color);display:inline-flex;align-items:center;gap:6px;
  transform: translateZ(20px);
}
.ai-service-link svg{width:13px;height:13px;transition:.2s;}
.ai-service-card:hover .ai-service-link svg{transform:translateX(4px);}

@media (prefers-reduced-motion: reduce){
  .ai-service-grid{ animation:none !important; }
}

  /* ================= TECH STACK ================= */
 .ai-tech{
  background: var(--ai-dark);
  padding: 70px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.ai-terminal{
  background:#0f0a17; border:1px solid rgba(255,45,120,.25); border-radius:12px;
  padding:16px 20px; max-width:520px; margin-bottom:40px; font-family:'Poppins';
}
.ai-terminal-bar{display:flex; gap:6px; margin-bottom:12px;}
.ai-terminal-bar span{width:9px;height:9px;border-radius:50%;background:#444;}
.ai-terminal-body{font-size:13px; color:#3ddc84;}
.ai-terminal-prompt{color:var(--ai-pink); margin-right:8px;}
.ai-cursor{animation: aiBlink 1s step-end infinite;}
@keyframes aiBlink{50%{opacity:0;}}

.ai-tech-grid{
  perspective: 1000px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
}
.ai-tech-col{
  transform: translateZ(0) rotateX(2deg);
  transition: transform .3s ease;
}
.ai-tech-col:hover{
  transform: translateZ(20px) rotateX(0deg) translateY(-4px);
}

.ai-tech-icon{ transition: transform .4s cubic-bezier(.34,1.56,.64,1); }

.ai-tech-ticker-wrap{overflow:hidden; margin-top:40px; border-top:1px solid rgba(255,255,255,.08); padding-top:20px; width: 100%}
.ai-tech-ticker{display:flex; gap:14px; width:max-content; animation: aiTicker 20s linear infinite; font-size:16px; color:var(--ai-text-light-muted); white-space: nowrap;}
.ai-tech-ticker span{
  margin-right: 6px;
}
.ai-tech-ticker span:nth-child(odd){color:var(--ai-pink); font-weight:600;}

@keyframes aiTicker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.ai-tech::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, rgba(255,45,120,.18) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:.4;
  z-index:0;
  animation: aiDotsDrift 18s linear infinite;
}
.ai-tech .ai-container{ position:relative; z-index:1; }

@keyframes aiDotsDrift{
  from{ background-position: 0 0; }
  to{ background-position: 68px 68px; }
}

.ai-tech::after{
  content:"";
  position:absolute; top:-10%; right:-8%;
  width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,122,61,.14), transparent 70%);
  filter: blur(20px);
  z-index:0;
}

@keyframes aiTechIn{
  from{ opacity:0; transform: translateY(26px); }
  to{ opacity:1; transform: translateY(0); }
}

.ai-tech-col{
  opacity:0;
  animation: aiTechIn .6s ease forwards;
}
.ai-tech-col:nth-child(1){ animation-delay:.05s; }
.ai-tech-col:nth-child(2){ animation-delay:.15s; }
.ai-tech-col:nth-child(3){ animation-delay:.25s; }
.ai-tech-col:nth-child(4){ animation-delay:.35s; }
.ai-tech-col:nth-child(5){ animation-delay:.45s; }
.ai-tech-col:nth-child(6){ animation-delay:.55s; }

.ai-tech-top{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:50px;
  align-items:center;
  margin-bottom:30px;
  color: #fff;
}
.ai-tech-top h2{font-size:35px;line-height:1.28; color: #fff;}
.ai-tech-top p{color: whitesmoke;font-size:14.5px;line-height:1.8;}

.ai-terminal{
  background:#0f0a17; border:1px solid rgba(255,45,120,.25); border-radius:12px;
  padding:16px 20px; width:100%; margin-bottom:44px; font-family: 'Poppins';
}
.ai-terminal-body{font-size:13px; color:#3ddc84; min-height:18px;}

  .ai-tech-grid{
    display:grid;grid-template-columns:repeat(6,1fr);gap:44px;
  }
  .ai-tech-col-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
  .ai-tech-icon{
    width:36px;height:36px;border-radius:9px;
    background:rgba(255,45,120,.12);border:1px solid rgba(255,45,120,.3);
    display:flex;align-items:center;justify-content:center;color:var(--ai-pink);font-size:17px;
    flex-shrink:0;
  }
  .ai-tech-col-head h4{font-size:14px;font-weight:700;color:#fff;line-height:1.35;}
 .ai-tech-col li{font-size:14px;color: whitesmoke;line-height:2;}


  /* ================= INDUSTRIES ================= */
.ai-industries{
  background: linear-gradient(180deg, #ffffff 0%, #fdf2f6 100%);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}
.ai-industries::before{
  content:"";
  position:absolute; top:-15%; left:-8%;
  width:400px; height:400px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.14), transparent 70%);
  filter: blur(20px); z-index:0;
  animation: aiBlobFloat1 10s ease-in-out infinite;
}
.ai-industries::after{
  content:"";
  position:absolute; bottom:-15%; right:-8%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(139,92,246,.13), transparent 70%);
  filter: blur(20px); z-index:0;
  animation: aiBlobFloat2 12s ease-in-out infinite;
}
@keyframes aiBlobFloat1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-20px) scale(1.1); }
}
@keyframes aiBlobFloat2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-25px,25px) scale(1.15); }
}
.ai-industries .ai-container{ position:relative; z-index:1; }

.ai-industries-top{
  text-align:center;
  display:block;
  margin-bottom:50px;
}
.ai-industries-top h2{
  font-size:32px;
  line-height:1.3;
  max-width:600px;
  margin:0 auto;
  color:#000;
}
.ai-industries-top .ai-rule{
  margin:18px auto 0;
}

.ai-ind-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:16px;
}

.ai-ind-card{
  perspective: 1000px;
  height:210px;
  position: relative;
  border-radius: 14px;
  cursor:pointer;
  opacity:0;
  animation: aiIndPop .5s ease forwards;
  transition: transform .3s ease;
}
.ai-ind-card:hover{
  transform: translateY(-6px);
}

@keyframes aiIndPop{
  0%{ opacity:0; transform: translateY(22px) scale(.9); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
.ai-ind-card:nth-child(1){animation-delay:.03s;} .ai-ind-card:nth-child(2){animation-delay:.06s;}
.ai-ind-card:nth-child(3){animation-delay:.09s;} .ai-ind-card:nth-child(4){animation-delay:.12s;}
.ai-ind-card:nth-child(5){animation-delay:.15s;} .ai-ind-card:nth-child(6){animation-delay:.18s;}
.ai-ind-card:nth-child(7){animation-delay:.21s;} .ai-ind-card:nth-child(8){animation-delay:.24s;}
.ai-ind-card:nth-child(9){animation-delay:.27s;} .ai-ind-card:nth-child(10){animation-delay:.30s;}
.ai-ind-card:nth-child(11){animation-delay:.33s;} .ai-ind-card:nth-child(12){animation-delay:.36s;}
.ai-ind-card:nth-child(13){animation-delay:.39s;} .ai-ind-card:nth-child(14){animation-delay:.42s;}

.ai-ind-card::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:14px;
  background: conic-gradient(from 0deg, var(--card-color), var(--card-color-2), var(--card-color));
  animation: aiBorderSpin 4s linear infinite;
  z-index:0;
}
@keyframes aiBorderSpin{
  from{ filter: hue-rotate(0deg); }
  to{ filter: hue-rotate(360deg); }
}

.ai-ind-card:nth-child(7n+1){ --card-color:#ff2d78; --card-color-2:#ff7a3d; }
.ai-ind-card:nth-child(7n+2){ --card-color:#8b5cf6; --card-color-2:#3ba7ff; }
.ai-ind-card:nth-child(7n+3){ --card-color:#3ba7ff; --card-color-2:#2dd4c7; }
.ai-ind-card:nth-child(7n+4){ --card-color:#2dd4c7; --card-color-2:#22c55e; }
.ai-ind-card:nth-child(7n+5){ --card-color:#ffb020; --card-color-2:#ff7a3d; }
.ai-ind-card:nth-child(7n+6){ --card-color:#ec4899; --card-color-2:#ff2d78; }
.ai-ind-card:nth-child(7n+7){ --card-color:#22c55e; --card-color-2:#2dd4c7; }

.ai-ind-inner{
  position:relative; z-index:1;
  width:100%; height:100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4,.2,.2,1);
}
.ai-ind-card:hover .ai-ind-inner,
.ai-ind-card.ai-flipped .ai-ind-inner{
  transform: rotateY(180deg);
}

.ai-ind-front, .ai-ind-back{
  position:absolute; inset:0;
  backface-visibility: hidden;
  border-radius:16px;
  padding:16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border: 2px solid transparent;
  background-image: linear-gradient(#fff,#fff), linear-gradient(135deg, var(--card-color,#ff2d78), var(--card-color-2,#ff7a3d));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.ai-ind-back{
  transform: rotateY(180deg);
}

.ai-ind-icon{
  width:48px;height:48px;margin:0 auto 12px;border-radius:14px;
  background: linear-gradient(135deg, var(--card-color), var(--card-color-2));
  color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 45%, transparent);
  animation: aiIconFloat 3s ease-in-out infinite;
}
@keyframes aiIconFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-5px) rotate(-4deg); }
}
.ai-ind-card:hover .ai-ind-icon{
  animation: aiIconFloat 3s ease-in-out infinite, aiIconPop .5s ease;
}
@keyframes aiIconPop{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.2); }
}

.ai-ind-front span{
  font-size:15px;font-weight:600;color:var(--ai-text);line-height:1.4;
}
.ai-ind-back p{
  font-size:13px; color: #000; line-height:1.6; margin-bottom:10px;
}
.ai-ind-back .ai-ind-badge{
  font-size:9.5px; font-weight:700; color:var(--card-color);
  border:1px solid var(--card-color); border-radius:100px; padding:3px 10px;
}

@media(max-width:1024px){
  .ai-ind-grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:640px){
  .ai-ind-grid{grid-template-columns:repeat(2,1fr);}
}

/* ================= WHY CHOOSE ================= */
.ai-why{
  background: var(--ai-dark2);
  padding: 90px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.ai-why::before{
  content:"";
  position:absolute; top:-10%; right:-8%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.ai-why .ai-container{ position:relative; z-index:1; }

.ai-why-top h2{font-size:34px;line-height:1.28;margin-bottom:14px;color: #fff}
.ai-why-top .ai-rule{width:44px;height:3px;background:var(--ai-gradient);border-radius:2px;margin-bottom:44px;}

.ai-why-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:22px;
}

@media(max-width:900px){
  .ai-why-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media(max-width:640px){
  .ai-why-grid{grid-template-columns:1fr !important;}
}
.ai-why-item{
  background: rgba(255,255,255,.03);
  border: 1px solid color-mix(in srgb, var(--wc) 35%, transparent);
  border-radius: 18px;
  padding: 28px 24px;
  text-align:left;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
  opacity:0;
  animation: aiWhyIn .6s ease forwards;
}
.ai-why-item:nth-child(1){ --wc:#ff2d78; animation-delay:.05s; }
.ai-why-item:nth-child(2){ --wc:#8b5cf6; animation-delay:.15s; }
.ai-why-item:nth-child(3){ --wc:#3ba7ff; animation-delay:.25s; }
.ai-why-item:nth-child(4){ --wc:#2dd4c7; animation-delay:.35s; }
.ai-why-item:nth-child(5){ --wc:#ffb020; animation-delay:.45s; }
.ai-why-item:nth-child(6){ --wc:#ec4899; animation-delay:.55s; }

@keyframes aiWhyIn{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}

.ai-why-item:hover{
  transform: translateY(-8px);
  background: rgba(255,255,255,.05);
  border-color: var(--wc);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--wc) 20%, transparent);
}

.ai-why-icon{
  width:56px;height:56px;border-radius:14px;
  background: color-mix(in srgb, var(--wc) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--wc) 40%, transparent);
  display:flex;align-items:center;justify-content:center;
  color: var(--wc); font-size:22px;
  margin-bottom:18px;
  transition: transform .3s ease, background .3s ease;
}
.ai-why-item:hover .ai-why-icon{
  transform: scale(1.12) rotate(-6deg);
  background: var(--wc);
  color:#fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--wc) 55%, transparent);
}

.ai-why-item h4{
  font-size:16.5px;
  color: var(--wc);
  margin-bottom:10px;
  font-weight:700;
}
.ai-why-item p{
  font-size:13.5px; color: whitesmoke; line-height:1.7;
}

/* ================= CTA ================= */
.ai-cta-wrap{padding:0 0 60px;background:var(--ai-dark2);}

.ai-cta{
  max-width:var(--ai-max);margin:0 auto;
  border-radius:24px;padding:48px 50px;
  display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  position:relative;overflow:hidden;
  border:1px solid rgba(255,45,120,.25);

  background: linear-gradient(120deg, #2a0f22, #1a0f28, #2a1a12, #1a0f28);
  background-size: 300% 300%;
  animation: aiCtaGradient 10s ease infinite;
}
@keyframes aiCtaGradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.ai-cta::after{
  content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,61,.35), transparent 70%);
}
.ai-cta::before{
  content:"";position:absolute;left:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,45,120,.28), transparent 70%);
}

.ai-cta-text{position:relative;z-index:1;max-width:560px;}
.ai-cta-text h2{font-size:30px;color:#fff;line-height:1.3;margin-bottom:12px;}
.ai-cta-text p{color: wheat;font-size:15.5px;line-height:1.7;}

.ai-cta-right{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}

.ai-cta .ai-btn{position:relative;white-space:nowrap;}

.ai-cta-btn-wrap{
  position:relative;
  display:inline-flex;
  border-radius:100px;
}
.ai-cta-btn-wrap .ai-btn{
  animation: aiBtnPulse 2.2s ease-in-out infinite;
}
@keyframes aiBtnPulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,45,120,.5); }
  70%{ box-shadow: 0 0 0 14px rgba(255,45,120,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,45,120,0); }
}

.ai-cta-trust{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color: var(--ai-text-light-muted);
}
.ai-cta-trust span{ display:flex; align-items:center; gap:6px; }
.ai-cta-trust span:not(.ai-dot)::before{
  content:"✓";
  color: var(--ai-pink);
  font-weight:700;
  margin-right:2px;
}
.ai-cta-trust .ai-dot{ opacity:.4; }

@media(max-width:640px){
  .ai-cta{padding:34px 26px;}
  .ai-cta-text h2{font-size:22px;}
  .ai-cta-right{align-items:flex-start; width:100%;}
}

  /* ================= RESPONSIVE ================= */
  @media(max-width:1024px){
    .ai-service-grid{grid-template-columns:repeat(3,1fr);}
    .ai-tech-grid{grid-template-columns:repeat(3,1fr);}
    .ai-ind-grid{grid-template-columns:repeat(4,1fr);}
    .ai-why-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media(max-width:900px){
    .ai-hero-grid{grid-template-columns:1fr;}
    .ai-hero-visual{
    order:2;
    min-height:260px;
    margin-top:10px;
  }
    .ai-services-head, .ai-tech-top, .ai-industries-top{grid-template-columns:1fr;}
  }
  @media(max-width:640px){
    .ai-container{padding:0 20px;}
    .ai-hero-content h1{font-size:32px;}
    .ai-service-grid{grid-template-columns:1fr;}
    .ai-tech-grid{grid-template-columns:repeat(2,1fr);}
    .ai-ind-grid{grid-template-columns:repeat(2,1fr);}
    .ai-why-grid{grid-template-columns:1fr 1fr;}
    .ai-stats{gap:22px;}
    .ai-cta{padding:34px 26px;}
    .ai-cta-text h2{font-size:22px;}
  }

  @media (prefers-reduced-motion: reduce){
    .ai-cube, .ai-hero-orbit-icon{animation:none !important;}
  }

/* =========================================================
                Strategic AI Consulting
========================================================= */

:root {
    --saic-dark: #0c0812;
    --saic-dark-2: #120d1a;

    --saic-pink: #ff2d78;
    --saic-orange: #ff7a3d;

    --saic-gradient:
        linear-gradient(90deg, #ff2d78, #ff7a3d);

    --saic-light: #f6f5f8;
    --saic-white: #ffffff;

    --saic-text: #161320;
    --saic-muted: #6b6878;
    --saic-light-muted: #b9b3c7;

    --saic-border: #ececf1;
}


/* =========================================================
   RESET
========================================================= */

.saic-hero,
.saic-provide,
.saic-process,
.saic-results,
.saic-breadcrumb {
    box-sizing: border-box;
}

.saic-hero *,
.saic-provide *,
.saic-process *,
.saic-results *,
.saic-breadcrumb * {
    box-sizing: border-box;
}

.saic-hero h1,
.saic-hero p,
.saic-provide h2,
.saic-provide h3,
.saic-provide p,
.saic-process h2,
.saic-process h4,
.saic-process p,
.saic-results h2,
.saic-results h4,
.saic-results p {
    margin: 0;
}

.saic-hero img,
.saic-provide img,
.saic-process img,
.saic-results img {
    max-width: 100%;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.saic-container {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.saic-breadcrumb {
    background: var(--saic-dark);
    color: var(--saic-light-muted);
    font-size: 13px;
    padding: 18px 0 10px;
}

.saic-breadcrumb span {
    opacity: 0.8;
}


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

.saic-hero {
    position: relative;
    overflow: hidden;
    padding: 58px 0 48px;
    color: #fff;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(112, 30, 82, 0.38),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255, 45, 120, 0.08),
            transparent 35%
        ),
        var(--saic-dark);
}


.saic-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 55px;
    align-items: center;
}


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

.saic-hero-content {
    min-width: 0;
}

.saic-eyebrow,
.saic-section-eyebrow {
    margin-top: 70px;
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--saic-pink);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.saic-eyebrow {
    margin-bottom: 18px;
}

.saic-eyebrow::after,
.saic-section-eyebrow::after {
    content: "";
    display: block;

    width: 42px;
    height: 1px;

    background: var(--saic-pink);
    opacity: 0.65;
}


.saic-hero h1 {
    max-width: 620px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.12;
    font-weight: 800;

    color: #fff;

    margin-bottom: 20px;
}


.saic-hero h1 span,
.saic-section-intro h2 span,
.saic-process-intro h2 span,
.saic-results-content h2 span {
    background: var(--saic-gradient);

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

    color: transparent;
}


.saic-hero-content > p {
    max-width: 540px;

    color: var(--saic-light-muted);

    font-size: 15px;
    line-height: 1.75;

    margin-bottom: 28px;
}

.saic-hero-content h1 span{
    background: linear-gradient(90deg, var(--saic-pink), var(--saic-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.saic-hero-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}

.saic-hero-content h1{
    text-shadow: none;
}
.saic-hero-checks > div {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #fff;

    font-size: 13px;
    font-weight: 600;
}


.saic-check-icon {
    width: 19px;
    height: 19px;

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

    border-radius: 50%;

    background: var(--saic-gradient);

    font-size: 11px;
}


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

.saic-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;

    padding: 25px 10px;
}



.saic-dashboard-imgwrap{
    position: relative;
    z-index: 2;
}

.saic-dashboard-img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.saic-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 12px;
}


.saic-stat-card {
    min-width: 0;

    padding: 10px;

    background: #1e1730;

    border-radius: 8px;
}


.saic-stat-label {
    color: var(--saic-light-muted);

    font-size: 9px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.saic-stat-value {
    color: #fff;

    font-size: 15px;
    font-weight: 800;

    margin-top: 3px;
}


.saic-stat-growth {
    color: #3ddc84;

    font-size: 9px;

    margin-top: 2px;
}


.saic-chart-box {
    width: 100%;
    height: 95px;

    overflow: hidden;

    border-radius: 8px;

    background: #1e1730;
}


.saic-chart-box svg {
    width: 100%;
    height: 100%;
}


/* =========================================================
   FLOATING HERO ICONS
========================================================= */

.saic-floating-icon {
    position: absolute;
    z-index: 5;

    width: 52px;
    height: 52px;

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

    border-radius: 14px;

    color: #fff;

    font-size: 20px;

    background: var(--saic-gradient);

    box-shadow:
        0 10px 30px rgba(255, 45, 120, 0.35);

    animation: saicFloat 4s ease-in-out infinite;
}


.saic-float-code {
    top: 5%;
    left: -2%;
}


.saic-float-cloud {
    top: 0;
    right: -2%;

    background:
        linear-gradient(
            135deg,
            #3b2fb0,
            #5b4de6
        );

    animation-delay: -1s;
}


.saic-float-database {
    right: -2%;
    bottom: 4%;

    background:
        linear-gradient(
            135deg,
            #c22a5c,
            #ff2d78
        );

    animation-delay: -2s;
}


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

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


/* =========================================================
   TECHNOLOGY FLOW
========================================================= */

.saic-flow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: 30px;
}


.saic-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 9px;
}


.saic-flow-circle {
    width: 56px;
    height: 56px;

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

    border: 1.5px solid var(--flow-color, #35283f);
    border-radius: 50%;

    background: #160f20;

    color: var(--flow-color, #fff);

    font-size: 20px;

    box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
               0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
    transition:.25s;
}
.saic-flow-node:hover .saic-flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.saic-flow-node:nth-child(1) .saic-flow-circle{ --flow-color:#3ba7ff; }
.saic-flow-node:nth-child(3) .saic-flow-circle{ --flow-color:#ff2d78; }
.saic-flow-node:nth-child(5) .saic-flow-circle{ --flow-color:#2dd4c7; }
.saic-flow-node:nth-child(7) .saic-flow-circle{ --flow-color:#e8ebff; }

.flow-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:60px;flex-wrap:wrap;}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:10px;}
.flow-circle{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;background:#160f20;
  border:1.5px solid var(--flow-color, #35283f);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
             0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
  color:var(--flow-color, var(--text-light));
  transition:.25s;
}
.flow-node:hover .flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.flow-node:nth-child(1) .flow-circle{ --flow-color:#3ba7ff; }
.flow-node:nth-child(3) .flow-circle{ --flow-color:#ff2d78; }
.flow-node:nth-child(5) .flow-circle{ --flow-color:#2dd4c7; }
.flow-node:nth-child(7) .flow-circle{ --flow-color:#e8ebff; }
.flow-node span{font-size:11px;letter-spacing:1px;color:var(--text-light-muted);font-weight:600;}
.flow-node:hover span{color:var(--flow-color);}
.flow-arrow{color:var(--orange);font-size:18px;}

@keyframes arrowMove{
  0%{transform:translateX(0); opacity:.35;}
  50%{transform:translateX(8px); opacity:1; text-shadow:0 0 10px var(--saic-orange);}
  100%{transform:translateX(0); opacity:.35;}
}

.saic-flow-arrow {
    color: var(--saic-orange);
    font-size: 18px;
    display: inline-block;
    animation: arrowMove 1.4s ease-in-out infinite;
}
.saic-flow .saic-flow-arrow:nth-of-type(1){animation-delay:0s;}
.saic-flow .saic-flow-arrow:nth-of-type(2){animation-delay:.3s;}
.saic-flow .saic-flow-arrow:nth-of-type(3){animation-delay:.6s;}

.saic-flow-node span {
    color: var(--saic-light-muted);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;

    text-align: center;
}


.saic-flow-arrow {
    color: var(--saic-orange);

    font-size: 18px;
}


/* =========================================================
   PROVIDE SECTION
========================================================= */

.saic-provide {
    padding: 80px 0;

    background: #fdf2f6;
}


.saic-provide-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;
}


.saic-section-eyebrow {
    margin-bottom: 14px;
}


.saic-section-intro h2,
.saic-process-intro h2,
.saic-results-content h2 {
    font-size: clamp(27px, 3vw, 34px);
    color: #000;
    line-height: 1.25;
    font-weight: 800;
}


.saic-section-intro > p,
.saic-process-intro > p,
.saic-results-content > p {
    color: maroon;

    font-size: 14px;
    line-height: 1.75;

    margin-top: 16px;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.saic-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.saic-service-card {
    padding: 24px 20px;

    background: #fff;

    border: 1px solid lightpink;
    border-radius: 13px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
  --card-bg: #ffffff;
  --card-color: var(--saic-pink);
  background: var(--card-bg);
  transition: background .3s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.saic-service-card:nth-child(1){ --card-bg:#fff1f5; --card-color:#ff2d78; }
.saic-service-card:nth-child(2){ --card-bg:#eef7ff; --card-color:#3ba7ff; }
.saic-service-card:nth-child(3){ --card-bg:#fff9ec; --card-color:#ffb020; }
.saic-service-card:nth-child(4){ --card-bg:#ecfdfb; --card-color:#2dd4c7; }
.saic-service-card:nth-child(5){ --card-bg:#f5f1ff; --card-color:#8b5cf6; }
.saic-service-card:nth-child(6){ --card-bg:#fff2ec; --card-color:#ff7a3d; }
.saic-service-card:nth-child(7){ --card-bg:#eefdf3; --card-color:#22c55e; }
.saic-service-card:nth-child(8){ --card-bg:#fdeef7; --card-color:#ec4899; }

.saic-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 60%, var(--saic-orange)));

    color: #fff;

    font-size: 18px;

    box-shadow: 0 6px 16px color-mix(in srgb, var(--card-color) 45%, transparent);

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

.saic-service-card:hover .saic-service-icon {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 65%, transparent);
}
.saic-service-card:hover .saic-service-icon{
  background: var(--card-color);
  color: #fff;
}


.saic-service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 45, 120, 0.2);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.07);
}

/* gradient border on hover */
.saic-service-card{
  position: relative;
  overflow: hidden;
}
.saic-service-card::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--saic-pink), var(--saic-orange));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.saic-service-card:hover::before{
  opacity: 1;
}

/* icon pop on hover */
.saic-service-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.saic-service-card:hover .saic-service-icon{
  transform: scale(1.12) rotate(-6deg);
  background: linear-gradient(135deg, var(--saic-pink), var(--saic-orange));
  color: #fff;
}

/* scroll reveal setup — cards start hidden */
.saic-service-card{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.saic-service-card.saic-reveal{
  opacity: 1;
  transform: translateY(0);
}

.saic-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: #fdeef2;

    color: var(--saic-pink);

    font-size: 18px;
}


.saic-service-card h3 {
    color: var(--saic-text);

    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;

    margin-bottom: 8px;
}


.saic-service-card p {
    color: var(--saic-muted);

    font-size: 12.5px;
    line-height: 1.65;
}


/* =========================================================
   PROCESS
========================================================= */

.saic-process {
    padding: 50px 0;

    background: var(--saic-dark);

    color: #fff;
}


.saic-process-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;

    align-items: center;
}


.saic-process-intro .saic-section-eyebrow {
    color: var(--saic-pink);
}


.saic-process-intro h2 {
    color: #fff;
}


.saic-process-intro > p {
    color: var(--saic-light-muted);
}
/* =========================================================
   PROCESS STEPS
========================================================= */
.saic-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@keyframes stepPopIn{
  0%{
    opacity:0;
    transform: scale(.4) translateY(30px);
  }
  60%{
    opacity:1;
    transform: scale(1.08) translateY(-6px);
  }
  80%{
    transform: scale(.96) translateY(2px);
  }
  100%{
    opacity:1;
    transform: scale(1) translateY(0);
  }
}
@keyframes lineDraw{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

.saic-step {
    position: relative;
    z-index: 2;
    text-align: center;

    opacity: 0;
    animation: stepPopIn .65s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.saic-step-line {
    position: absolute;
    top: 38px;
    left: 8%;
    right: 8%;
    height: 2px;
    z-index: 1;
    border-radius: 2px;

    background: linear-gradient(
        90deg,
        var(--saic-pink),
        var(--saic-orange)
    );
    opacity: .35;
    overflow: visible;
}

@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}
@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}

.saic-step-line::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);

  width: 22px;
  height: 6px;
  border-radius: 50%;

  background: #fff;
  box-shadow:
    0 0 10px 3px var(--saic-pink),
    0 0 20px 6px var(--saic-orange);

  animation: runLight 6.2s linear infinite;
}

.saic-step:nth-child(2){ --step-color:#ff2d78; animation-delay: .5s; }
.saic-step:nth-child(3){ --step-color:#3ba7ff; animation-delay: .8s; }
.saic-step:nth-child(4){ --step-color:#2dd4c7; animation-delay: 1.1s; }
.saic-step:nth-child(5){ --step-color:#ffb020; animation-delay: 1.4s; }

.saic-step-circle {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 1.5px solid var(--step-color, var(--saic-pink));
    border-radius: 50%;
    background: #160f20;
    font-size: 28px;
    color: var(--step-color, #fff);

    box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color, var(--saic-pink)) 12%, transparent),
                0 0 20px color-mix(in srgb, var(--step-color, var(--saic-pink)) 45%, transparent);

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

.saic-step:hover .saic-step-circle{
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--step-color, var(--saic-pink)) 20%, transparent),
              0 0 30px color-mix(in srgb, var(--step-color, var(--saic-pink)) 75%, transparent);
}

.saic-step-number {
    color: var(--saic-orange);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
}
.saic-step:hover .saic-step-number{
  color: var(--step-color);
}

.saic-step h4 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 8px;
}
.saic-step p {
    color: var(--saic-light-muted);
    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   WHAT YOU GET
========================================================= */

.saic-results {
    padding: 80px 0;
    background: linear-gradient(
        160deg,
        #ffffff 0%,
        #ffe9f0 35%,
        #ffe3d9 70%,
        #fff5ec 100%
    );
}

@keyframes blobFloat1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-20px) scale(1.1); }
}
@keyframes blobFloat2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-25px,25px) scale(1.15); }
}

.saic-results {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #fffaf8;
}

.saic-results::before,
.saic-results::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.saic-results::before{
    width: 420px;
    height: 420px;
    top: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(255,45,120,0.35), transparent 70%);
    animation: blobFloat1 9s ease-in-out infinite;
}

.saic-results::after{
    width: 460px;
    height: 460px;
    bottom: -15%;
    right: -10%;
    background: radial-gradient(circle, rgba(255,122,61,0.35), transparent 70%);
    animation: blobFloat2 11s ease-in-out infinite;
}

.saic-results-grid{
    position: relative;
    z-index: 1;
}

.saic-results-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.1fr);

    gap: 60px;

    align-items: center;

    position: relative;   /* NEW */
    z-index: 1; 
}


/* =========================================================
   LAPTOP
========================================================= */

.saic-laptop-area {
    position: relative;

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

    padding: 30px 20px;
}


.saic-laptop {
    width: min(100%, 430px);

    position: relative;

    padding: 16px;

    background: #171022;

    border-radius: 14px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.2);
}


.saic-laptop-screen {
    min-height: 220px;

    padding: 14px;

    border-radius: 8px;

    background: #1e1730;
}


.saic-laptop-line {
    height: 8px;

    margin-bottom: 8px;

    border-radius: 4px;

    background: #33284a;
}


.saic-line-40 {
    width: 40%;
}

.saic-line-60 {
    width: 60%;
}

.saic-line-80 {
    width: 80%;
}


.saic-laptop-base {
    height: 14px;

    margin-top: 10px;

    border-radius: 0 0 10px 10px;

    background: #0f0a17;
}

@keyframes laptopFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

.saic-laptop-img {
    width: min(100%, 460px);
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.25));

    animation: laptopFloat 5s ease-in-out infinite;
}

@keyframes badgeFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes badgePopIn{
  0%{ opacity:0; transform: scale(.3) translateY(20px); }
  60%{ opacity:1; transform: scale(1.15) translateY(-4px); }
  100%{ opacity:1; transform: scale(1) translateY(0); }
}

.saic-mini-badge{
  opacity: 0;
  animation:
    badgePopIn .6s cubic-bezier(.34,1.56,.64,1) forwards,
    badgeFloat 3.5s ease-in-out infinite;
}

.saic-mini-code{
  animation-delay: .2s, 1s;   /* pop-in delay, then float delay */
}
.saic-mini-security{
  animation-delay: .4s, 1.3s;
}
.saic-mini-growth{
  animation-delay: .6s, 1.6s;
}
.saic-mini-success{
  animation-delay: .8s, 1.9s;
}

@keyframes benefitSlideIn{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}

.saic-benefit{
  opacity: 0;
  animation: benefitSlideIn .6s ease forwards;
}

.saic-benefit:nth-child(1){ animation-delay: .3s; }
.saic-benefit:nth-child(2){ animation-delay: .5s; }
.saic-benefit:nth-child(3){ animation-delay: .7s; }
.saic-benefit:nth-child(4){ animation-delay: .9s; }

.saic-benefit-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}

.saic-benefit:hover .saic-benefit-icon{
  transform: scale(1.15) rotate(-6deg);
  background: linear-gradient(135deg, var(--saic-pink), var(--saic-orange));
  color: #fff;
}

/* =========================================================
   LAPTOP FLOATING BADGES
========================================================= */

.saic-mini-badge {
    position: absolute;
    z-index: 4;

    width: 54px;
    height: 54px;

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

    border-radius: 10px;

    color: #fff;

    font-size: 16px;

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


.saic-mini-code {
    top: -6%;
    left: 8%;

    background: var(--saic-gradient);
}


.saic-mini-security {
    top: -20%;
    right: 10%;

    background: #2b2340;
}


.saic-mini-growth {
    right: 8%;
    bottom: -14%;

    background: #2b2340;
}


.saic-mini-success {
    left: 40%;
    bottom: -13%;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: var(--saic-gradient);
}


/* =========================================================
   BENEFITS
========================================================= */

.saic-benefit-grid {
    display: grid;

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

    gap: 26px 24px;

    margin-top: 28px;
}


.saic-benefit {
    display: flex;

    gap: 14px;

    min-width: 0;
}


.saic-benefit-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 9px;

    background: #fdeef2;

    color: var(--saic-pink);

    font-size: 17px;
}


.saic-benefit h4 {
    color: var(--saic-text);

    font-size: 20px;

    margin-bottom: 5px;
}


.saic-benefit p {
    color: var(--saic-muted);

    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .saic-container {
        width: min(1180px, calc(100% - 48px));
    }


    .saic-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .saic-provide-grid,
    .saic-process-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .saic-section-intro,
    .saic-process-intro {
        max-width: 650px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .saic-hero {
        padding-top: 40px;
    }


    .saic-hero-grid,
    .saic-results-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }
    
    .saic-results-content {
        order: 1;
    }

    .saic-laptop-area {
        order: 2;
    }

    .saic-hero-content {
        text-align: center;
    }


    .saic-eyebrow {
        justify-content: center;
    }


    .saic-hero h1 {
        margin-left: auto;
        margin-right: auto;
    }


    .saic-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }


    .saic-hero-checks {
        justify-content: center;
    }


    .saic-hero-visual {
        max-width: 680px;

        margin: 0 auto;
    }


    .saic-results-content {
        max-width: 700px;
        margin: 0 auto;
    }


    .saic-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 40px;
    }


    .saic-step-line {
        display: none;
    }

}


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

@media (max-width: 600px) {

    .saic-container {
        width: calc(100% - 32px);
    }


    .saic-breadcrumb {
        padding: 14px 0;
        font-size: 11px;
    }


    .saic-hero {
        padding: 36px 0 55px;
    }


    .saic-hero-grid {
        grid-template-columns:1fr; gap:48px;
    }


    .saic-eyebrow,
    .saic-section-eyebrow {
        font-size: 10px;
        letter-spacing: 0.8px;
    }


    .saic-hero h1 {
        font-size: 31px;
        line-height: 1.15;
    }


    .saic-hero-content > p {
        font-size: 13px;
        line-height: 1.7;
    }


    .saic-hero-checks {
        flex-direction: column;
        align-items: center;

        gap: 11px;
    }


    /* Mobile Dashboard */

    .saic-hero-visual {
        padding: 22px 0;
    }


    .saic-dashboard {
        border-radius: 12px;
    }


    .saic-dashboard-body {
        min-height: 235px;
    }


    .saic-dashboard-sidebar {
        width: 75px;
        flex-basis: 75px;

        padding: 12px 7px;

        font-size: 8px;
    }


    .saic-side-item {
        padding: 7px 4px;
    }


    .saic-dashboard-main {
        padding: 11px;
    }


    .saic-dashboard-title {
        font-size: 11px;
    }


    .saic-stat-row {
        gap: 5px;
    }


    .saic-stat-card {
        padding: 7px;
    }


    .saic-stat-label {
        font-size: 7px;
    }


    .saic-stat-value {
        font-size: 11px;
    }


    .saic-stat-growth {
        font-size: 7px;
    }


    .saic-chart-box {
        height: 65px;
    }


    .saic-floating-icon {
        width: 40px;
        height: 40px;

        font-size: 15px;

        border-radius: 10px;
    }


    .saic-float-code {
        left: -5%;
    }


    .saic-float-cloud {
        right: -5%;
    }


    .saic-float-database {
        right: -5%;
        bottom: 0;
    }


    /* Flow */

    .saic-flow {
        display: grid;

        grid-template-columns:
            1fr
            auto
            1fr
            auto
            1fr
            auto
            1fr;

        gap: 7px;

        margin-top: 42px;
    }


    .saic-flow-circle {
        width: 43px;
        height: 43px;

        font-size: 15px;
    }


    .saic-flow-node span {
        max-width: 70px;

        font-size: 7px;
        line-height: 1.3;
    }


    .saic-flow-arrow {
        font-size: 14px;
    }


    /* Provide */

    .saic-provide {
        padding: 58px 0;
    }


    .saic-provide-grid,
    .saic-process-grid,
    .saic-results-grid {
        gap: 35px;
    }


    .saic-section-intro h2,
    .saic-process-intro h2,
    .saic-results-content h2 {
        font-size: 27px;
    }


    .saic-section-intro > p,
    .saic-process-intro > p,
    .saic-results-content > p {
        font-size: 13px;
    }


    .saic-service-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .saic-service-card {
        padding: 21px 18px;
    }


    /* Process */

    .saic-process {
        padding: 58px 0;
    }


    .saic-steps {
        grid-template-columns: 1fr;

        gap: 34px;
    }


    .saic-step-circle {
        width: 65px;
        height: 65px;

        font-size: 22px;
    }


    .saic-step {
        max-width: 330px;

        margin: 0 auto;
    }


    /* Results */

    .saic-results {
        padding: 58px 0;
    }


    .saic-laptop-area {
        padding: 30px 10px 45px;
    }


    .saic-laptop {
        width: 100%;
    }


    .saic-laptop-screen {
        min-height: 175px;
    }


    .saic-mini-code {
        left: 2%;
    }


    .saic-mini-security {
        right: 0;
    }


    .saic-mini-growth {
        right: 5%;
    }


    .saic-benefit-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .saic-container {
        width: calc(100% - 24px);
    }


    .saic-hero h1 {
        font-size: 28px;
    }


    .saic-dashboard-sidebar {
        width: 65px;
        flex-basis: 65px;
    }


    .saic-dashboard-main {
        padding: 8px;
    }


    .saic-stat-value {
        font-size: 10px;
    }


    .saic-flow {
        gap: 4px;
    }


    .saic-flow-circle {
        width: 38px;
        height: 38px;
    }


    .saic-flow-arrow {
        font-size: 11px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .saic-floating-icon,
    .saic-service-card {
        animation: none;
        transition: none;
    }

}

/*============================================================
               Advanced Machine Learning Solutions
============================================================*/
 :root{
    --amls-black:#0b0b10;
    --amls-black-2:#121016;
    --amls-pink:#ef2d7e;
    --amls-orange:#f6923a;
    --amls-cream:#faf5f2;
    --amls-cream-2:#f4ece7;
    --amls-white:#ffffff;
    --amls-text-dark:#141217;
    --amls-text-muted:#6b6570;
    --amls-text-light:#c9c4cd;
    --amls-gradient: linear-gradient(90deg, var(--amls-pink), var(--amls-orange));
    --amls-radius: 16px;
    --amls-max-w: 1200px;
  }

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

  @keyframes amls-mesh-move{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(-3%, 2%) scale(1.08); }
    100%{ transform: translate(0,0) scale(1); }
  }
  @keyframes amls-mesh-move-2{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(4%, -3%) scale(1.05); }
    100%{ transform: translate(0,0) scale(1); }
  }
  @keyframes amls-pulse{
    0%,100%{ opacity:0.55; transform: translateX(-50%) scale(1); }
    50%{ opacity:0.9; transform: translateX(-50%) scale(1.12); }
  }
  @keyframes amls-float-y{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
  }
  @keyframes amls-fade-up-blur{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}
  @keyframes amls-count-fade{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
  }
  @keyframes amls-draw-line{
    from{ stroke-dashoffset: 260; }
    to{ stroke-dashoffset: 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .amls-hero *{ animation: none !important; transition: none !important; }
  }

  body{
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    color: var(--amls-text-dark);
    background: var(--amls-white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}

  .amls-container{
    max-width: var(--amls-max-w);
    margin: 0 auto;
    padding: 0 32px;
  }

  .amls-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color: var(--amls-pink);
  }
  .amls-eyebrow-dot{
    width:6px; height:6px; border-radius:50%;
    background: var(--amls-pink);
    display:inline-block;
  }
  .amls-eyebrow--boxed{
    position:relative;
    border:1px solid transparent;
    padding:8px 16px;
    border-radius:999px;
    background:
      linear-gradient(#0b0b10,#0b0b10) padding-box,
      conic-gradient(from 0deg, var(--amls-pink), var(--amls-orange), var(--amls-pink)) border-box;
    animation: amls-border-spin 4s linear infinite;
  }
  @keyframes amls-border-spin{
    to{ filter: hue-rotate(0deg); background:
      linear-gradient(#0b0b10,#0b0b10) padding-box,
      conic-gradient(from 360deg, var(--amls-pink), var(--amls-orange), var(--amls-pink)) border-box;
    }
  }

  .amls-gradient-text{
    background: linear-gradient(100deg, var(--amls-pink) 20%, var(--amls-orange) 40%, #ffd8b0 50%, var(--amls-orange) 60%, var(--amls-pink) 80%);
    background-size: 250% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation: amls-shimmer 5s linear infinite;
  }
  @keyframes amls-shimmer{
    0%{ background-position: 200% 0; }
    100%{ background-position: -50% 0; }
  }

  /* ---------------- HERO ---------------- */
  .amls-hero{
    background: #08080c;
    color: var(--amls-white);
    padding: 105px 0 50px;
    overflow:hidden;
    position:relative;
  }
  .amls-hero__mesh{
    position:absolute; inset:-10%;
    z-index:0;
    pointer-events:none;
  }
  .amls-hero__mesh span{
    position:absolute;
    border-radius:50%;
    filter: blur(70px);
    opacity:0.5;
  }
  .amls-hero__mesh span:nth-child(1){
    width:420px; height:420px; top:-8%; right:8%;
    background: radial-gradient(circle, rgba(239,45,126,0.55), transparent 70%);
    animation: amls-mesh-move 14s ease-in-out infinite;
  }
  .amls-hero__mesh span:nth-child(2){
    width:380px; height:380px; bottom:-10%; right:26%;
    background: radial-gradient(circle, rgba(246,146,58,0.4), transparent 70%);
    animation: amls-mesh-move-2 18s ease-in-out infinite;
  }
  .amls-hero__mesh span:nth-child(3){
    width:300px; height:300px; top:20%; left:-6%;
    background: radial-gradient(circle, rgba(120,40,160,0.35), transparent 70%);
    animation: amls-mesh-move 20s ease-in-out infinite reverse;
  }
  .amls-hero__grain{
    position:absolute; inset:0; z-index:1;
    opacity:0.05;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .amls-hero__particles{
    position:absolute; inset:0; z-index:1; pointer-events:none;
  }
  .amls-hero__particles span{
    position:absolute;
    width:3px; height:3px;
    border-radius:50%;
    background: var(--amls-orange);
    opacity:0.5;
    animation: amls-particle-float linear infinite;
  }
  .amls-hero__particles span:nth-child(odd){ background: var(--amls-pink); }
  @keyframes amls-particle-float{
    0%{ transform: translateY(0) translateX(0); opacity:0; }
    10%{ opacity:0.6; }
    90%{ opacity:0.6; }
    100%{ transform: translateY(-140px) translateX(20px); opacity:0; }
  }
  .amls-hero__spotlight{
    position:absolute;
    top:-20%; left:50%;
    width:600px; height:500px;
    transform: translateX(-50%);
    background: conic-gradient(from 180deg at 50% 0%, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
    z-index:1;
    pointer-events:none;
  }
  .amls-hero__cursor-glow{
    position:absolute;
    width:420px; height:420px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(239,45,126,0.16), transparent 70%);
    top:0; left:0;
    transform: translate(-50%,-50%);
    pointer-events:none;
    z-index:1;
    opacity:0;
    transition: opacity 0.4s ease;
  }
  .amls-hero__grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items:center;
  }
 .amls-hero__title{
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  margin: 20px 0 20px;
  letter-spacing:-0.5px;
  color: #ffffff;
  text-shadow: none;
  animation: amls-fade-up-blur 0.8s ease both;
  animation-delay: 0.05s;
}
  .amls-hero__desc{
    color: whitesmoke;
    font-size: 17px;
    max-width: 480px;
    margin-bottom: 24px;
    animation: amls-fade-up-blur 0.8s ease both;
    animation-delay: 0.2s;
  }
  .amls-hero__features{
    display:flex;
    flex-wrap:wrap;
    gap: 14px 28px;
    margin-bottom: 36px;
  }
  .amls-hero__feature{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color: whitesmoke;
    opacity:0;
    animation: amls-count-fade 0.6s ease forwards;
    transition: transform 0.25s ease, color 0.25s ease;
    cursor:default;
  }
  .amls-hero__feature:hover{
    transform: translateX(4px);
    color: #fff;
  }
  .amls-hero__feature:nth-child(1){ animation-delay:0.35s; }
  .amls-hero__feature:nth-child(2){ animation-delay:0.45s; }
  .amls-hero__feature:nth-child(3){ animation-delay:0.55s; }
  .amls-hero__feature:nth-child(4){ animation-delay:0.65s; }
  .amls-hero__feature:nth-child(5){ animation-delay:0.75s; }
  .amls-check{
    width:18px; height:18px;
    border-radius:50%;
    background: rgba(239,45,126,0.15);
    color: var(--amls-pink);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    flex-shrink:0;
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .amls-hero__feature:hover .amls-check{
    transform: scale(1.15);
    background: var(--amls-pink);
    color:#fff;
  }

  .amls-stats{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    opacity:0;
    animation: amls-count-fade 0.7s ease forwards;
    animation-delay: 0.85s;
  }
  .amls-stat{
    position:relative;
    padding: 22px 16px 18px;
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow:hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  .amls-stat::before{
    content:"";
    position:absolute; inset:0;
    border-radius:16px;
    padding:1px;
    background: var(--amls-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:0;
    transition: opacity 0.3s ease;
    pointer-events:none;
  }
  .amls-stat:hover{
    transform: translateY(-6px) scale(1.03);
    border-color: transparent;
    background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
    box-shadow: 0 16px 34px rgba(239,45,126,0.22);
  }
  .amls-stat:hover::before{ opacity:1; }
  .amls-stat__icon{
    width:34px; height:34px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(239,45,126,0.22), rgba(246,146,58,0.16));
    color: var(--amls-pink);
    font-size:15px;
    margin-bottom:12px;
    transform: rotate(-90deg) scale(0.5);
    opacity:0;
    animation: amls-icon-spin-in 0.6s ease forwards;
  }
  .amls-stat:nth-child(1) .amls-stat__icon{ animation-delay: 1s; }
  .amls-stat:nth-child(2) .amls-stat__icon{ animation-delay: 1.12s; }
  .amls-stat:nth-child(3) .amls-stat__icon{ animation-delay: 1.24s; }
  .amls-stat:nth-child(4) .amls-stat__icon{ animation-delay: 1.36s; }
  .amls-stat__num{ font-size:24px; font-weight:800; letter-spacing:-0.3px; }
  .amls-stat__label{ font-size:12px; color: var(--amls-text-muted); margin-top:3px;}
  .amls-stat__bar{
    height:3px;
    border-radius:2px;
    background: rgba(255,255,255,0.08);
    margin-top:14px;
    overflow:hidden;
  }
  .amls-stat__bar span{
    display:block;
    height:100%;
    width:0%;
    background: var(--amls-gradient);
    border-radius:2px;
    transition: width 1.3s cubic-bezier(.22,1,.36,1);
  }
  @keyframes amls-icon-spin-in{
    to{ transform: rotate(0deg) scale(1); opacity:1; }
  }

  /* Hero phone showcase */
  .amls-hero__visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: 460px;
    perspective: 1200px;
    opacity:0;
    animation: amls-count-fade 1s ease forwards;
    animation-delay: 0.3s;
  }
  .amls-hero__glow{
    position:absolute;
    bottom:10px;
    left:50%;
    width: 340px;
    height: 100px;
    background: radial-gradient(ellipse at center, rgba(239,45,126,0.55), rgba(246,146,58,0.15) 60%, transparent 75%);
    filter: blur(6px);
    border-radius:50%;
    animation: amls-pulse 4s ease-in-out infinite;
  }
  .amls-phones{
    position:relative;
    display:flex;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    gap: -20px;
    z-index:2;
    animation: amls-zoom-reveal 1s cubic-bezier(.22,1,.36,1) both;
    animation-delay: 0.2s;
  }
  @keyframes amls-zoom-reveal{
    from{ transform: scale(1.25); opacity:0; }
    to{ transform: scale(1); opacity:1; }
  }
  .amls-phone{
    width: 220px;
    height: 420px;
    background: #0d0d10;
    border: 6px solid #1c1c22;
    border-radius: 34px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    padding: 14px 12px;
    position:relative;
    display:flex;
    flex-direction:column;
    gap:20px;
    overflow:hidden;
  }
  .amls-phone::after{
    content:"";
    position:absolute;
    top:-120%; left:-40%;
    width:60%; height:340%;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
    transform: rotate(20deg);
    animation: amls-screen-sweep 5s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes amls-screen-sweep{
    0%,100%{ left:-40%; }
    50%{ left:110%; }
  }
  .amls-hero__visual:hover .amls-phones{
    transform: rotateY(-6deg) rotateX(3deg);
  }
  .amls-phone--front{
    transform: translateY(30px);
    margin-left:-40px;
    z-index:3;
    transition: transform 0.4s ease;
  }

  .amls-phone--back{
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.92);
}
    .amls-hero__visual:hover .amls-phone--front{
    transform: translateY(24px) translateZ(30px);
  }
  .amls-hero__visual:hover .amls-phone--back{
  transform: translateY(-14px) scale(0.98) translateZ(-10px);
  filter: brightness(0.88);
}
  .amls-phone__notch{
    position:absolute;
    top:0; left:50%; transform:translateX(-50%);
    width:70px; height:18px;
    background:#1c1c22;
    border-radius:0 0 12px 12px;
  }
  .amls-phone__status{
    display:flex; justify-content:space-between;
    font-size:9px; color:#fff; opacity:0.6;
    margin-top:6px;
  }
  .amls-phone__greeting{ font-size:11px; color:#8f8b93; margin-top:8px;}
  .amls-phone__name{ font-size:14px; font-weight:700; color:#fff;}
  .amls-phone__balance-card{
    background: linear-gradient(135deg, #241621, #1a1220);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:14px;
    padding:12px;
    margin-top:8px;
  }
  .amls-phone__balance-label{ font-size:9px; color:#8f8b93;}
  .amls-phone__balance-amount{ font-size:20px; font-weight:800; color:#fff; margin-top:4px;}
  .amls-phone__balance-chart{ height:30px; margin-top:8px;}
  .amls-phone__tx-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:9.5px; color:#cfcbd4;
    padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .amls-phone__tx-amt{ color:#ef2d7e; font-weight:700;}
  .amls-phone__tabbar{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,0.06);
  }
  .amls-phone__tab{ font-size:8px; color:#68636f; text-align:center;}
  .amls-phone__tab--active{ color:#ef2d7e;}

  .amls-phone__cats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px;
  }
  .amls-phone__cat{
    background: rgba(255,255,255,0.04);
    border-radius:10px;
    padding:8px 4px;
    text-align:center;
    font-size:7px;
    color:#cfcbd4;
  }
  .amls-phone__cat-ic{ font-size:14px; margin-bottom:2px;}
  .amls-phone__promo{
    background: linear-gradient(135deg, #3a1024, #201018);
    border-radius:12px;
    padding:10px;
    margin-top:10px;
    font-size:9px;
    color:#fff;
  }
  .amls-phone__promo strong{ font-size:12px; display:block; margin-bottom:4px;}
  .amls-phone__products{
    display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px;
  }
  .amls-phone__product{
    background: rgba(255,255,255,0.04);
    border-radius:8px;
    padding:8px 4px;
    text-align:center;
    font-size:7px;
    color:#cfcbd4;
  }

  .amls-badge{
    position:absolute;
    width:60px; height:60px;
    border-radius:18px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px;
    font-size:9px;
    font-weight:700;
    color:#fff;
    background: rgba(20,18,22,0.9);
    z-index:4;
  }
  .amls-badge--ios{ left:-5%; top:18%; border:1px solid rgba(239,45,126,0.5); }
  .amls-badge--android{ right:2%; top:18%; border:1px solid rgba(246,146,58,0.5); }
  .amls-badge--float{ animation: amls-float-y 4s ease-in-out infinite; }
  .amls-badge--float-2{ animation: amls-float-y 4.5s ease-in-out infinite 0.6s; }

  .amls-phone__balance-chart polyline{
    animation: amls-draw-line 1.6s ease forwards;
    animation-delay: 1.1s;
  }
  .amls-tx-row--1, .amls-tx-row--2, .amls-tx-row--3{
    opacity:0;
    animation: amls-count-fade 0.5s ease forwards;
  }
  .amls-tx-row--1{ animation-delay: 1.5s; }
  .amls-tx-row--2{ animation-delay: 1.65s; }
  .amls-tx-row--3{ animation-delay: 1.8s; }
  .amls-badge__icon{ font-size:20px; }

  /* ================= AMLS-HERO — RESPONSIVE (ALL SIZES) ================= */

@media (max-width: 980px){
  .amls-hero{
    padding: 80px 0 40px;
  }
  .amls-hero__grid{
    display:flex;
    flex-direction:column;
    gap: 40px;
  }
  .amls-hero-content{
    order:1;
  }
  .amls-hero__visual{
    order:2;
    min-height:360px;
    overflow: hidden;
  }
  .amls-hero__title{
    font-size: 34px;
  }
  .amls-hero__desc{
    font-size: 15px;
    max-width: 100%;
  }
  .amls-hero__features{
    gap: 12px 22px;
    margin-bottom: 28px;
  }
  .amls-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .amls-phones{
    transform: scale(0.62);
    transform-origin: center center;
  }
}

@media (max-width: 640px){
  .amls-container{
    padding: 0 20px;
  }
  .amls-hero{
    padding: 70px 0 36px;
  }
  .amls-hero__grid{
    gap: 32px;
  }
  .amls-hero__title{
    font-size: 27px;
    line-height: 1.2;
    margin: 14px 0 14px;
  }
  .amls-hero__desc{
    font-size: 13.5px;
    margin-bottom: 20px;
  }
  .amls-hero__features{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
  }
  .amls-hero__feature{
    font-size: 13px;
  }
  .amls-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .amls-stat{
    padding: 16px 12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .amls-stat__num{
    font-size: 19px;
  }
  .amls-stat__label{
    font-size: 10.5px;
  }
  .amls-stat__icon{
    width: 28px;
    height: 28px;
    font-size: 13px;
    margin-bottom: 8px;
  }
  .amls-hero__visual{
    min-height: 300px;
  }
 .amls-phones{
    transform: scale(0.6);
    transform-origin: center center;
  }
  .amls-hero__visual:hover .amls-phones{
    transform: scale(0.72) rotateY(-6deg) rotateX(3deg);
  }
  .amls-badge{
    width: 48px;
    height: 48px;
    font-size: 8px;
    border-radius: 14px;
  }
  .amls-badge__icon{
    font-size: 16px;
  }
  .amls-hero__stats-wrap{
    overflow-x:auto;
  }
}

@media (max-width: 380px){
  .amls-hero__title{
    font-size: 23px;
  }
  .amls-stats{
    grid-template-columns: 1fr 1fr;
  }
  .amls-stat__num{
    font-size: 17px;
  }
  .amls-phones{
    transform: scale(0.48);
  }
}

  /* ---------------- SECTION 2: Powerful Apps ---------------- */
.amls-platforms{
  position:relative;
  background: var(--amls-white);
  padding: 88px 0;
  overflow:hidden;
}
.amls-platforms::before{
  content:"";
  position:absolute;
  top:-100px; right:-80px;
  width:520px; height:520px;
  background: radial-gradient(circle, rgba(239,45,126,0.16), transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: amls-platform-blob-1 12s ease-in-out infinite;
}
.amls-platforms::after{
  content:"";
  position:absolute;
  bottom:-120px; left:-80px;
  width:460px; height:460px;
  background: radial-gradient(circle, rgba(246,146,58,0.14), transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: amls-platform-blob-2 15s ease-in-out infinite;
}
@keyframes amls-platform-blob-1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-30px, 25px) scale(1.1); }
}
@keyframes amls-platform-blob-2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(25px, -20px) scale(1.08); }
}
.amls-platforms__top, .amls-perks{
  position:relative;
  z-index:1;
}
  .amls-platforms__top{
    display:grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    align-items:start;
  }
  .amls-section-title{
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    line-height:1.2;
    margin: 14px 0 16px;
    color: var(--amls-text-dark);
  }
  .amls-section-desc{
    color: var(--amls-text-muted);
    font-size:15px;
    max-width:400px;
  }
  .amls-platform-cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

.amls-platform-card{
  background: var(--amls-cream);
  border: 1px solid #ece1da;
  border-radius: var(--amls-radius);
  border-color: var(--amls-pink);
  padding: 28px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow: 0 6px 18px rgba(20,18,23,0.05);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.amls-platform-card:hover{
  border-color: var(--amls-pink);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(239,45,126,0.12);
}
.amls-platform-card__icon{
  width:54px; height:54px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(239,45,126,0.14), rgba(246,146,58,0.1));
  font-size:26px;
  transition: transform 0.25s ease;
}
.amls-platform-card:hover .amls-platform-card__icon{
  transform: scale(1.08) rotate(-4deg);
}
  .amls-platform-card__title{ font-size:17px; font-weight:700; color: var(--amls-text-dark); }
  .amls-platform-card__text{ font-size:13.5px; color: var(--amls-text-muted); }
.amls-platform-card__underline{
  width:32px; height:4px;
  background: var(--amls-gradient);
  border-radius:3px;
  margin-top:auto;
  transition: width 0.3s ease;
}
.amls-platform-card:hover .amls-platform-card__underline{
  width:56px;
}

.amls-perks{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
  padding-top: 40px;
  position:relative;
}
.amls-perk{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:20px 12px;
  border-radius:16px;
  position: relative;
  transition: background 0.25s ease, transform 0.25s ease;
}

.amls-perk__label::after{
  content:"";
  position:absolute;
  bottom:0; left:0;
  width:0;
  height:2px;
  background: var(--amls-gradient);
  transition: width 0.25s ease;
}
.amls-perk:hover{
  background: var(--amls-cream);
  transform: translateY(-3px);
}
.amls-perk:not(:last-child)::after{
  content:"";
  position:absolute;
  top:10px; right:-12px;
  bottom:10px;
  width:1px;
  background: #ece1da;
}
.amls-perks::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:70%;
  height:1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ece1da 20%, #ece1da 80%, transparent);
}
.amls-perks::after{
  content:"✦";
  position:absolute;
  top:-8px; left:50%;
  transform: translateX(-50%);
  color: var(--amls-pink);
  font-size:14px;
  background: var(--amls-white);
  padding: 0 12px;
}
.amls-perk__icon{
  width:70px; height:70px;
  border-radius:16px;
  background: linear-gradient(135deg, var(--amls-pink), #f6923a);
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  color:#fff;
  box-shadow: 0 8px 22px rgba(239,45,126,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: amlsPerkPulse 2.4s ease-in-out infinite;
}

.amls-perk:hover .amls-perk__icon{
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 14px 30px rgba(239,45,126,0.5);
}
.amls-perk__label{
  font-size:16px;
  font-weight:600;
  position:relative;
  padding-bottom:4px;
  color: var(--amls-text-dark);
}
.amls-perk__label::after{
  content:"";
  position:absolute;
  bottom:0; left:0;
  width:0;
  height:2px;
  background: var(--amls-gradient);
  transition: width 0.25s ease;
}
.amls-perk:hover .amls-perk__label::after{
  width:100%;
}
.amls-perk__desc{
  font-size:15.5px;
  color: maroon;
  margin-top:2px;
}
.amls-platforms__badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.amls-platforms__badge{
  font-size:13.5px;
  font-weight:600;
  padding:8px 14px;
  border-radius:999px;
  background: #fff;
  border:1.5px solid;
  transition: transform .2s ease;
}
.amls-platforms__badge:hover{ transform: translateY(-2px); }
.amls-badge-swift{ border-color:#ff5722; color:#ff5722; }
.amls-badge-kotlin{ border-color:#8b5cf6; color:#8b5cf6; }
.amls-badge-react{ border-color:#3ba7ff; color:#3ba7ff; }
.amls-badge-flutter{ border-color:#2dd4c7; color:#2dd4c7; }

@keyframes amlsPerkPulse{
  0%,100%{ box-shadow: 0 4px 14px rgba(239,45,126,0.08); }
  50%{ box-shadow: 0 4px 22px rgba(239,45,126,0.28); }
}
.amls-perk__icon{
  animation: amlsPerkPulse 2.4s ease-in-out infinite;
}
.amls-perk:nth-child(1) .amls-perk__icon{ animation-delay:0s; }
.amls-perk:nth-child(2) .amls-perk__icon{ animation-delay:.3s; }
.amls-perk:nth-child(3) .amls-perk__icon{ animation-delay:.6s; }
.amls-perk:nth-child(4) .amls-perk__icon{ animation-delay:.9s; }
.amls-platform-cards{
  perspective: 1000px;
}
.amls-platform-card{
  position:relative;
  transform-style: preserve-3d;
  transition: transform .15s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.amls-platform-card__num{
  font-size:26px;
  font-weight:800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(239,45,126,.4);
  position:absolute;
  top:16px; right:20px;
}
.amls-platform-card__icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--amls-gradient);
  color:#fff;
  font-size:22px;
  box-shadow: 0 10px 24px rgba(239,45,126,.35);
  transition: transform 0.25s ease;
}
.amls-platform-card:hover .amls-platform-card__icon{
  transform: scale(1.1) rotate(-6deg);
}
  /* ---------------- SECTION 3: Ecosystem ---------------- */
  .amls-ecosystem{
    background: var(--amls-black);
    color:#fff;
    padding: 75px 0;
    overflow-x:auto;
  }
  .amls-ecosystem__intro{
    max-width:670px;
    margin-bottom:57px;
  }
  .amls-flow{
    display:flex;
    align-items:center;
    gap: 14px;
    flex-wrap:nowrap;
  }
  .amls-flow__phone{
    width:155px;
    background:#141017;
    border:6px solid #211c26;
    border-radius:29px;
    padding:14px 10px;
    flex-shrink:0;
  }
  .amls-flow__phone-label{ font-size:8px; color:#8f8b93; }
.amls-flow__phone-ring{
  width:64px; height:64px;
  border-radius:50%;
  border:6px solid #2a2430;
  border-top-color: var(--amls-pink);
  border-right-color: var(--amls-orange);
  margin: 12px auto;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
  animation: amls-ring-spin 3s linear infinite;
}
@keyframes amls-ring-spin{
  to{ transform: rotate(360deg); }
}
  .amls-flow__phone-bars{
    display:flex; align-items:flex-end; gap:3px; height:30px; margin-top:10px;
  }
.amls-flow__phone-bars span{
  flex:1; background: linear-gradient(180deg, var(--amls-pink), var(--amls-orange)); border-radius:2px;
  animation: amls-bar-pulse 1.6s ease-in-out infinite;
}
.amls-flow__phone-bars span:nth-child(1){ animation-delay:0s; }
.amls-flow__phone-bars span:nth-child(2){ animation-delay:0.15s; }
.amls-flow__phone-bars span:nth-child(3){ animation-delay:0.3s; }
.amls-flow__phone-bars span:nth-child(4){ animation-delay:0.45s; }
.amls-flow__phone-bars span:nth-child(5){ animation-delay:0.6s; }
.amls-flow__phone-bars span:nth-child(6){ animation-delay:0.75s; }
@keyframes amls-bar-pulse{
  0%,100%{ transform: scaleY(0.6); opacity:0.7; }
  50%{ transform: scaleY(1); opacity:1; }
}
.amls-flow__arrow{
  color: var(--amls-orange);
  font-size:48px;
  flex-shrink:0;
  position:relative;
  width:25px;
  text-align:center;
  overflow:visible;
}
.amls-flow__arrow::after{
  content:"";
  position:absolute;
  top:50%; left:0;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--amls-pink);
  box-shadow: 0 0 8px var(--amls-pink), 0 0 14px rgba(239,45,126,0.6);
  transform: translateY(-50%);
  animation: amls-dot-travel 1.8s linear infinite;
}
.amls-flow__arrow:nth-of-type(1)::after{ animation-delay: 0s; }
@keyframes amls-dot-travel{
  0%{ left:0; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}
  .amls-flow__box{
    background:#141017;
    border:1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 16px;
    width: 150px;
    flex-shrink:0;
    text-align:center;
  }
  .amls-flow__box:hover{
  border-color: rgba(239,45,126,0.5);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(239,45,126,0.15);
}
  .amls-flow__box-icon{
    font-size:29px;
    color: var(--amls-pink);
    margin-bottom:10px;
  }
  .amls-flow__box-title{ font-size:18px; font-weight:700; margin-bottom:9px; color: white;}
  .amls-flow__box-text{ font-size:15.5px; color:whitesmoke; line-height:1.4;}

  .amls-flow__integrations{
    background:#141017;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:18px 18px;
    width: 170px;
    flex-shrink:0;
  }
  .amls-flow__integrations-title{ font-size:18px; font-weight:700; margin-bottom:14px;}
  .amls-flow__integrations li{
    display:flex; align-items:center; gap:10px;
    font-size:14px; color: whitesmoke;
    padding:5px 0;
  }
.amls-flow__integrations li span:first-child{
  color: var(--amls-pink);
  font-size:12px;
  width:29px; height:29px;
  border-radius:7px;
  background: linear-gradient(135deg, rgba(239,45,126,0.18), rgba(246,146,58,0.12));
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
  .amls-flow__caption{
    text-align:center;
    font-size:13px;
    font-weight:700;
    color: var(--amls-pink);
    margin-top:10px;
  }


  /* ---------------- SECTION 4: Business Impact ---------------- */
  .amls-impact{
  background: linear-gradient(160deg, var(--amls-cream) 0%, #f9d9e4 50%, #fce0c8 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.amls-impact::before{
  content:"";
  position:absolute; top:-10%; left:-8%;
  width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(239,45,126,.10), transparent 70%);
  filter: blur(20px);
  animation: amlsImpactBlobDrift 8s ease-in-out infinite;
}
@keyframes amlsImpactBlobDrift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(20px,-15px) scale(1.08); }
}
.amls-impact::after{
  content:"";
  position:absolute; bottom:-12%; right:-8%;
  width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(246,146,58,.12), transparent 70%);
  filter: blur(20px);
  animation: amlsImpactBlobDrift2 10s ease-in-out infinite;
  z-index:0;
}
@keyframes amlsImpactBlobDrift2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-18px,15px) scale(1.1); }
}

.amls-impact .amls-container{ position:relative; z-index:1; }

@keyframes amlsImpactFadeUp{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}
.amls-impact .amls-eyebrow,
.amls-impact .amls-section-title,
.amls-impact__desc{
  opacity:0;
  animation: amlsImpactFadeUp .6s ease forwards;
}
.amls-impact .amls-eyebrow{ animation-delay:.1s; }
.amls-impact .amls-section-title{ animation-delay:.25s; }
.amls-impact__desc{ animation-delay:.4s; }
  .amls-impact__grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items:center;
  }
  .amls-impact__desc{
    color: var(--amls-text-muted);
    font-size:15px;
    max-width:420px;
    margin-bottom:32px;
  }
  .amls-impact__list{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px;
  }
  .amls-impact__item{
    display:flex;
    gap:12px;
  }
  .amls-impact__icon{
    width:40px; height:40px;
    border-radius:10px;
    background: var(--amls-pink);
    color: var(--amls-pink);
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
    flex-shrink:0;
  }
  .amls-impact__item-title{ font-size:16.5px; font-weight:700; margin-bottom:4px; color: #000;}
  .amls-impact__item-text{ font-size:13.5px; color: var(--amls-text-muted); line-height:1.4;}

  .amls-impact__visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:460px;
  }
  .amls-impact__blob{
    position:absolute;
    width: 340px; height:340px;
    background: radial-gradient(circle, rgba(239,45,126,0.16), rgba(246,146,58,0.06) 70%, transparent 80%);
    border-radius:50%;
  }
  .amls-impact__phone{
    width:220px;
    background:#0d0d10;
    border:7px solid #1c1c22;
    border-radius:36px;
    padding:16px 14px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
    position:relative;
    z-index:2;
  }
  .amls-impact__phone-notch{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:80px; height:20px; background:#1c1c22; border-radius:0 0 14px 14px;
  }
  .amls-impact__phone-label{ font-size:10px; color:#8f8b93; margin-top:10px;}
  .amls-impact__phone-amount{ font-size:22px; font-weight:800; color:#fff; margin:4px 0;}
  .amls-impact__phone-delta{ font-size:10px; color:#3ddc84; margin-bottom:8px;}
  .amls-impact__phone-chart{ height:60px; }
  .amls-impact__phone-products{ margin-top:14px; }
  .amls-impact__phone-heading{ font-size:9px; color:#8f8b93; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px;}
  .amls-impact__phone-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:9.5px; color:#cfcbd4; padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .amls-impact__phone-row span:last-child{ color:#fff; font-weight:600;}

  .amls-impact__float{
    position:absolute;
    background:#000;
    border-radius:12px;
    padding:12px 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:600;
    z-index:3;
    width:150px;
  }
  .amls-impact__float-icon{
    width:35px;height:35px;border-radius:8px;
    background: var(--amls-cream-2);
    color: var(--amls-pink);
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
    flex-shrink:0;
  }
  .amls-impact__float--tl{ top:6%; left:-2%; color: #fff;}
  .amls-impact__float--bl{ bottom:8%; left:-4%; color: #fff;}
  .amls-impact__float--tr{ top:8%; right:-4%; color: #fff;}
  .amls-impact__float--br{ bottom:12%; right:-2%; color: #fff;}


  /* blob pulse */
@keyframes amlsImpactBlob{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.1); opacity:.85; }
}
.amls-impact__blob{
  animation: amlsImpactBlob 6s ease-in-out infinite;
}

/* phone entrance + float */
@keyframes amlsPhoneIn{
  from{ opacity:0; transform: scale(.85) translateY(30px); }
  to{ opacity:1; transform: scale(1) translateY(0); }
}
@keyframes amlsPhoneFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
.amls-impact__phone{
  opacity:0;
  animation: amlsPhoneIn .8s ease forwards, amlsPhoneFloat 5s ease-in-out 1s infinite;
}

/* chart line draw */
.amls-impact__phone-chart polyline{
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: amlsChartDraw 1.6s ease forwards 1.2s;
}
@keyframes amlsChartDraw{
  to{ stroke-dashoffset: 0; }
}

/* floating badges — staggered pop-in + individual float rhythm */
@keyframes amlsFloatPop{
  from{ opacity:0; transform: translateY(20px) scale(.7); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes amlsFloatDrift{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.amls-impact__float{
  opacity:0;
  animation: amlsFloatPop .6s ease forwards, amlsFloatDrift 4s ease-in-out infinite;
}
.amls-impact__float--tl{ animation-delay: .3s, 1.5s; }
.amls-impact__float--bl{ animation-delay: .5s, 1.8s; }
.amls-impact__float--tr{ animation-delay: .7s, 2.1s; }
.amls-impact__float--br{ animation-delay: .9s, 2.4s; }

/* left list items — staggered slide-in */
@keyframes amlsImpactItemIn{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}
.amls-impact__item{
  opacity:0;
  animation: amlsImpactItemIn .6s ease forwards;
}
.amls-impact__item:nth-child(1){ animation-delay:.1s; }
.amls-impact__item:nth-child(2){ animation-delay:.25s; }
.amls-impact__item:nth-child(3){ animation-delay:.4s; }
.amls-impact__item:nth-child(4){ animation-delay:.55s; }

/* icon hover pop */
.amls-impact__icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.amls-impact__item:hover .amls-impact__icon{
  transform: scale(1.15) rotate(-6deg);
  background: var(--amls-gradient);
  color:#fff;
}
/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 980px){
  .amls-hero{ padding: 80px 0 40px; }
  .amls-hero__grid{
    display:flex;
    flex-direction:column;
    gap: 40px;
  }
  .amls-hero-content{ order:1; }
  .amls-hero__visual{
    order:2;
    width:100%;
    overflow:visible;
    min-height:420px;
  }
  .amls-hero__title{ font-size: 34px; }
  .amls-hero__desc{ font-size: 15px; max-width: 100%; }
  .amls-hero__features{ gap: 12px 22px; margin-bottom: 28px; }
  .amls-stats{ grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* other sections — unchanged */
  .amls-platforms__top{ grid-template-columns:1fr; }
  .amls-platform-cards{ grid-template-columns:1fr 1fr; }
  .amls-perks{ grid-template-columns: 1fr 1fr; }
  .amls-impact__grid{ grid-template-columns:1fr; }
  .amls-impact__grid > :not(.amls-impact__visual){ order:1; }
  .amls-impact__visual{ order:2; }
}

@media (max-width: 640px){
  .amls-container{ padding:0 20px; }

  .amls-hero{ padding: 70px 0 36px; }
  .amls-hero__grid{ gap: 32px; }
  .amls-hero__title{ font-size: 27px; line-height: 1.2; margin: 14px 0 14px; }
  .amls-hero__desc{ font-size: 13.5px; margin-bottom: 20px; }
  .amls-hero__features{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
  }
  .amls-hero__feature{ font-size: 13px; }

  .amls-stats{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .amls-stat{
    padding: 16px 12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .amls-stat__num{ font-size: 19px; }
  .amls-stat__label{ font-size: 10.5px; }
  .amls-stat__icon{ width: 28px; height: 28px; font-size: 13px; margin-bottom: 8px; }

  /* PHONES — no scale(), real size reduced so nothing gets clipped */
  .amls-hero__visual{
    min-height: 330px;
    padding: 26px 10px 34px;
    overflow:visible;
  }
  .amls-phones{
    width:max-content;
    max-width:100%;
    margin:0 auto;
    transform:none;
  }
  .amls-phone{
    width: 130px;
    height: 250px;
    flex:0 0 auto;
    padding: 8px 6px;
    border-radius: 20px;
    border-width: 4px;
    gap: 10px;
  }
  .amls-phone--front{
    margin-left: -30px;
    transform: translateY(18px);
  }
  .amls-phone--back{
    transform: translateY(-6px) scale(0.96);
  }
  .amls-hero__visual:hover .amls-phone--front{
    transform: translateY(16px) translateZ(20px);
  }
  .amls-hero__visual:hover .amls-phone--back{
    transform: translateY(-8px) scale(0.96) translateZ(-10px);
  }

  .amls-phone__notch{ width: 40px; height: 10px; }
  .amls-phone__status{ font-size: 6px; }
  .amls-phone__greeting{ font-size: 7px; margin-top: 4px; }
  .amls-phone__name{ font-size: 9px; }
  .amls-phone__balance-card{ padding: 7px; margin-top: 5px; border-radius: 9px; }
  .amls-phone__balance-label{ font-size: 6px; }
  .amls-phone__balance-amount{ font-size: 13px; margin-top: 2px; }
  .amls-phone__tx-row{ font-size: 6.5px; padding: 4px 0; }
  .amls-phone__tabbar{ padding-top: 5px; }
  .amls-phone__tab{ font-size: 6px; }
  .amls-phone__cats{ gap: 4px; margin-top: 6px; }
  .amls-phone__cat{ padding: 5px 2px; font-size: 5px; border-radius: 7px; }
  .amls-phone__cat-ic{ font-size: 9px; }
  .amls-phone__promo{ padding: 6px; margin-top: 6px; font-size: 6px; border-radius: 8px; }
  .amls-phone__promo strong{ font-size: 8px; margin-bottom: 2px; }
  .amls-phone__products{ gap: 4px; margin-top: 6px; }
  .amls-phone__product{ padding: 5px 2px; font-size: 5px; border-radius: 6px; }

  .amls-badge{ width: 34px; height: 34px; font-size: 6px; border-radius: 10px; gap: 1px; }
  .amls-badge__icon{ font-size: 11px; }
  .amls-badge--ios{ left:-2%; top:14%; }
  .amls-badge--android{ right:-2%; top:14%; }

  /* other sections — unchanged */
  .amls-platform-cards{ grid-template-columns:1fr; }
  .amls-perks{ grid-template-columns:1fr 1fr; gap:20px 14px; }
  .amls-impact__list{ grid-template-columns:1fr; }
  .amls-impact__float{ display:none; }
  .amls-hero__stats-wrap{ overflow-x:auto; }
}

@media (max-width: 380px){
  .amls-hero__title{ font-size: 23px; }
  .amls-stats{ grid-template-columns: 1fr 1fr; }
  .amls-stat__num{ font-size: 17px; }

  .amls-hero__visual{
    min-height:280px;
    padding-top:24px;
    padding-bottom:30px;
    overflow:visible;
  }
  .amls-phone{
    width: 108px;
    height: 210px;
    padding: 6px 5px;
    border-width: 3px;
    border-radius: 16px;
  }
  .amls-phone--front{
    margin-left: -24px;
    transform: translateY(14px);
  }
  .amls-phone__balance-amount{ font-size: 11px; }
  .amls-badge{ width: 28px; height: 28px; font-size: 5px; }
  .amls-badge__icon{ font-size: 9px; }
  .amls-hero__stats-wrap{ overflow-x:auto; }
}

/* =========================================================
   SECTION 3 + SECTION 4 — MOBILE RESPONSIVE FIX
   ========================================================= */
@media (max-width:980px){
  /* Section 3: horizontal desktop flow becomes vertical */
  .amls-ecosystem{
    padding:64px 0;
    overflow-x:hidden;
  }
  .amls-ecosystem__intro{
    width:100%;
    max-width:100%;
    margin-bottom:38px;
  }
  .amls-flow{
    width:100%;
    max-width:100%;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:14px;
  }
  .amls-flow__phone{
    width:190px;
    max-width:70vw;
    margin:0 auto;
  }
  .amls-flow__arrow{
    width:34px;
    height:34px;
    line-height:34px;
    margin:0 auto;
    font-size:38px;
    transform:rotate(90deg);
  }
  .amls-flow__box,
  .amls-flow__integrations{
    width:100%;
    max-width:520px;
    margin:0 auto;
  }
  .amls-flow__caption{
    width:100%;
    margin-top:18px;
  }

  /* Section 4: text first and image second */
  .amls-impact__grid{
    grid-template-columns:1fr;
    gap:38px;
  }
  .amls-impact__grid > *{min-width:0;}
  .amls-impact__grid > :not(.amls-impact__visual){order:1;}
  .amls-impact__visual{order:2;}
}

@media (max-width:640px){
  .amls-ecosystem{padding:48px 0;}
  .amls-ecosystem__intro{margin-bottom:30px;}
  .amls-flow{gap:12px;}
  .amls-flow__phone{
    width:min(180px,70vw);
    padding:13px 10px;
    border-width:5px;
    border-radius:25px;
  }
  .amls-flow__phone-ring{
    width:58px;
    height:58px;
    margin:10px auto;
  }
  .amls-flow__arrow{
    width:30px;
    height:30px;
    line-height:30px;
    font-size:34px;
  }
  .amls-flow__box,
  .amls-flow__integrations{
    max-width:100%;
    padding:16px 14px;
  }
  .amls-flow__box-title,
  .amls-flow__integrations-title{font-size:16px;}
  .amls-flow__box-text{font-size:13.5px;}
  .amls-flow__integrations li{font-size:13px;}
  .amls-flow__caption{
    font-size:12px;
    line-height:1.5;
  }

  .amls-impact{padding:54px 0;}
  .amls-impact__grid{gap:28px;}
  .amls-impact__desc{
    max-width:100%;
    margin-bottom:26px;
  }
  .amls-impact__visual{
    order:2;
    width:100%;
    min-height:390px;
    overflow:hidden;
  }
  .amls-impact__blob{width:280px;height:280px;}
  .amls-impact__phone{
    width:min(210px,72vw);
    padding:15px 13px;
  }
}

@media (max-width:380px){
  .amls-ecosystem{padding:42px 0;}
  .amls-flow__phone{width:160px;}
  .amls-flow__box,
  .amls-flow__integrations{padding:14px 12px;}

  .amls-impact__visual{min-height:350px;}
  .amls-impact__phone{width:190px;}
  .amls-impact__blob{width:240px;height:240px;}
}

/* =====================================================
   SECTION 4 — MOBILE FLOATING CARDS FIX
   ===================================================== */

@media (max-width: 768px) {

  .amls-impact__visual {
    position: relative !important;
    width: 100% !important;
    min-height: 470px !important;
    padding: 60px 0 !important;
    overflow: visible !important;
  }

  .amls-impact__phone {
    position: relative !important;
    z-index: 2 !important;
    width: 205px !important;
    max-width: 64vw !important;
  }

  .amls-impact__blob {
    width: 285px !important;
    height: 285px !important;
    max-width: 88vw !important;
    max-height: 88vw !important;
  }

  /* Show all four floating cards */
  .amls-impact__float {
    display: flex !important;
    position: absolute !important;
    z-index: 4 !important;

    width: 128px !important;
    min-height: 48px !important;
    padding: 8px 9px !important;

    align-items: center !important;
    gap: 7px !important;

    background: #000 !important;
    color: #fff !important;

    border-radius: 10px !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18) !important;
  }

  .amls-impact__float-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;

    border-radius: 7px !important;
    font-size: 14px !important;
  }

  /* Top left */
  .amls-impact__float--tl {
    top: 35px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* Top right */
  .amls-impact__float--tr {
    top: 78px !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
  }

  /* Bottom left */
  .amls-impact__float--bl {
    bottom: 80px !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
  }

  /* Bottom right */
  .amls-impact__float--br {
    right: 0 !important;
    bottom: 35px !important;
    left: auto !important;
    top: auto !important;
  }
}


/* Small mobile */
@media (max-width: 480px) {

  .amls-impact__visual {
    min-height: 440px !important;
    padding: 58px 0 !important;
  }

  .amls-impact__phone {
    width: 190px !important;
    max-width: 62vw !important;
  }

  .amls-impact__blob {
    width: 255px !important;
    height: 255px !important;
  }

  .amls-impact__float {
    width: 116px !important;
    min-height: 45px !important;
    padding: 7px !important;
    gap: 6px !important;
    font-size: 8.5px !important;
  }

  .amls-impact__float-icon {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    font-size: 12px !important;
  }

  .amls-impact__float--tl {
    top: 35px !important;
    left: 0 !important;
  }

  .amls-impact__float--tr {
    top: 78px !important;
    right: 0 !important;
  }

  .amls-impact__float--bl {
    bottom: 78px !important;
    left: 0 !important;
  }

  .amls-impact__float--br {
    right: 0 !important;
    bottom: 35px !important;
  }
}


/* Very small mobile */
@media (max-width: 360px) {

  .amls-impact__visual {
    min-height: 410px !important;
  }

  .amls-impact__phone {
    width: 175px !important;
  }

  .amls-impact__blob {
    width: 230px !important;
    height: 230px !important;
  }

  .amls-impact__float {
    width: 104px !important;
    padding: 6px !important;
    font-size: 7.5px !important;
  }

  .amls-impact__float-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 11px !important;
  }
}

/*/ ====================================================
//            Generative AI Experiences
// ====================================================*/


/*==============================================================
                  Generative_AI_Experiences
==============================================================*/
  /* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --gaiex-ink:#0a0a0d;
    --gaiex-ink-soft:#141319;
    --gaiex-ink-line:#27252f;
    --gaiex-cream:#f6efe2;
    --gaiex-cream-soft:#fbf6ec;
    --gaiex-pink:#ef1568;
    --gaiex-pink-dim:#c01057;
    --gaiex-line-dark:rgba(255,255,255,.22);
    --gaiex-line-cream:#c9bfa4;
    --gaiex-pink-soft:#fbdde9;
    --gaiex-orange:#f2542d;
    --gaiex-orange-soft:#fbdfd0;
    --gaiex-blue:#2f8fff;
    --gaiex-blue-soft:#dcebff;
    --gaiex-teal:#17c9a8;
    --gaiex-teal-soft:#d9f7f0;
    --gaiex-text-dark:#18151b;
    --gaiex-text-dark-muted:#736d7a;
    --gaiex-text-light:#f6f3ee;
    --gaiex-text-light-muted:#a49eae;
    --gaiex-font-display:'Space Grotesk', sans-serif;
    --gaiex-font-body:'Inter', sans-serif;
    --gaiex-radius-lg:20px;
    --gaiex-radius-md:14px;
    --gaiex-radius-sm:8px;
    --gaiex-maxw:1240px;
    /* screen-scene colors (device mockup "photo" area) */
    --gaiex-scene-sky-1:#141a29;
    --gaiex-scene-sky-2:#1d2740;
    --gaiex-scene-sky-3:#293654;
    --gaiex-scene-peak-back:rgba(255,255,255,.08);
    --gaiex-scene-peak-front:rgba(255,255,255,.16);
    --gaiex-purple:#9b5de5;
    --gaiex-purple-soft:#ece1fb;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family:var(--gaiex-font-body);
    color:var(--gaiex-text-dark);
    background:var(--gaiex-cream);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{ display:block; max-width:100%; }
  h1,h2,h3{ font-family:var(--gaiex-font-display); margin:0; }
  p{ margin:0; }
  a{ text-decoration:none; color:inherit; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; }

  .gaiex-wrap{
    max-width:var(--gaiex-maxw);
    margin:0 auto;
    padding:0 48px;
  }

.gaiex-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gaiex-pink);
  margin-bottom:16px;
  padding:6px 14px 6px 6px;
  border:1px solid rgba(239,21,104,.35);
  border-radius:999px;
  background:rgba(239,21,104,.08);
}
.gaiex-eyebrow__icon{
  width:20px; height:20px; border-radius:50%;
  background:var(--gaiex-pink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.gaiex-eyebrow__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gaiex-pink);
  margin-left:2px;
  animation:gaiexEyebrowPulse 1.6s ease-in-out infinite;
}
@keyframes gaiexEyebrowPulse{
  0%,100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(239,21,104,.5); }
  50%{ opacity:.6; transform:scale(1.3); box-shadow:0 0 0 4px rgba(239,21,104,0); }
}
  .gaiex-eyebrow::before{
    content:"";
    width:16px; height:2px;
    background:var(--gaiex-pink);
    display:inline-block;
    border-radius:2px;
  }

  /* ============================================================
     SCROLL-REVEAL ANIMATION ENGINE
     ============================================================ */
  .gaiex-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.22,.8,.28,1), transform .8s cubic-bezier(.22,.8,.28,1);
    transition-delay:var(--gaiex-delay, 0s);
  }
  .gaiex-reveal.is-visible{ opacity:1; transform:translateY(0); }
  .gaiex-reveal--pop{ transform:scale(.92) translateY(10px); }
  .gaiex-reveal--pop.is-visible{ transform:scale(1) translateY(0); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .gaiex-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    *{ animation:none !important; }
  }

  /* ============================================================
     SHARED — DEVICE MOCKUP COMPONENT ("scene" = fake webpage)
     ============================================================ */
  .gaiex-scene{
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 82% 14%, rgba(239,21,104,.35), transparent 40%),
      linear-gradient(180deg, var(--gaiex-scene-sky-1) 0%, var(--gaiex-scene-sky-2) 55%, var(--gaiex-scene-sky-3) 100%);
    overflow:hidden;
  }
  .gaiex-scene__peak{
    position:absolute; left:0; right:0; bottom:0; height:62%;
  }
  .gaiex-scene__peak--back{
    background:var(--gaiex-scene-peak-back);
    clip-path:polygon(0% 100%,0% 66%,14% 48%,28% 62%,44% 30%,58% 55%,74% 40%,88% 58%,100% 46%,100% 100%);
  }
  .gaiex-scene__peak--front{
    background:var(--gaiex-scene-peak-front);
    clip-path:polygon(0% 100%,0% 80%,18% 58%,34% 76%,52% 52%,68% 74%,84% 56%,100% 76%,100% 100%);
  }

  .gaiex-mock{ position:relative; width:100%; }
  .gaiex-mock__navbar{
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 5%;
    height:15%;
    background:rgba(8,8,11,.55);
    backdrop-filter:blur(2px);
  }
  .gaiex-mock__brand{
    font-family:var(--gaiex-font-display);
    font-weight:700;
    color:#fff;
    font-size:11px;
  }
  .gaiex-mock__navlinks{
    display:flex; align-items:center; gap:9px;
  }
  .gaiex-mock__navlinks span{
    font-size:6.5px;
    color:var(--gaiex-text-light-muted);
    font-weight:600;
  }
  .gaiex-mock__navlinks em{
    font-style:normal;
    font-size:6.5px;
    font-weight:700;
    color:#fff;
    background:var(--gaiex-pink);
    padding:3px 8px;
    border-radius:20px;
  }
  .gaiex-mock__burger{
    width:16px; height:11px;
    position:relative;
  }
  .gaiex-mock__burger span, .gaiex-mock__burger::before, .gaiex-mock__burger::after{
    content:""; position:absolute; left:0; right:0; height:1.4px; background:#fff; border-radius:2px;
  }
  .gaiex-mock__burger::before{ top:0; }
  .gaiex-mock__burger span{ top:50%; transform:translateY(-50%); }
  .gaiex-mock__burger::after{ bottom:0; }

  .gaiex-mock__body{
    position:relative; z-index:2;
    padding:9% 6% 0;
  }
  .gaiex-mock__headline{
    font-family:var(--gaiex-font-display);
    font-weight:700;
    color:#fff;
    line-height:1.18;
    font-size:15px;
    max-width:62%;
    margin-bottom:9%;
  }
  .gaiex-mock__cta{
    display:inline-block;
    background:var(--gaiex-pink);
    color:#fff;
    font-weight:700;
    font-size:7px;
    letter-spacing:.02em;
    padding:6px 14px;
    border-radius:5px;
    margin-bottom:11%;
  }
  .gaiex-mock__chips{
    display:flex; gap:6%;
  }
  .gaiex-mock__chip{
    flex:1;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:6px;
    padding:7% 6%;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    text-align:center;
  }
  .gaiex-mock__chip svg{ color:var(--gaiex-pink); width:11px; height:11px; }
  .gaiex-mock__chip span{
    font-size:5.6px; font-weight:700; color:var(--gaiex-text-light-muted); line-height:1.3;
  }

  /* size modifiers scale the whole internal typography */
  .gaiex-mock--lg .gaiex-mock__headline{ font-size:19px; }
  .gaiex-mock--lg .gaiex-mock__cta{ font-size:8.5px; padding:8px 18px; }
  .gaiex-mock--sm .gaiex-mock__headline{ font-size:11px; margin-bottom:12%; }
  .gaiex-mock--sm .gaiex-mock__cta{ font-size:6px; padding:4px 10px; }
  .gaiex-mock--sm .gaiex-mock__navlinks{ display:none; }
  .gaiex-mock--xs .gaiex-mock__headline{ font-size:8.5px; margin-bottom:14%; max-width:78%;}
  .gaiex-mock--xs .gaiex-mock__cta{ font-size:5px; padding:3px 8px; }
  .gaiex-mock--xs .gaiex-mock__navlinks{ display:none; }
  .gaiex-mock--xs .gaiex-mock__chips{ gap:8%; }
  .gaiex-mock--xs .gaiex-mock__chip{ padding:9% 5%; }

  /* Laptop frame */
  .gaiex-laptop{ width:100%; filter:drop-shadow(0 30px 46px rgba(0,0,0,.45)); }
  .gaiex-laptop__screen{
    position:relative;
    border:7px solid #16151b;
    border-bottom:none;
    border-radius:12px 12px 0 0;
    aspect-ratio:16/10.4;
    background:#0b0c10;
    overflow:hidden;
  }
  .gaiex-laptop__base{
    height:9px;
    background:linear-gradient(180deg,#232229,#131217);
    border-radius:0 0 4px 4px;
    position:relative;
  }
  .gaiex-laptop__base::after{
    content:"";
    position:absolute; left:50%; top:0; transform:translateX(-50%);
    width:14%; height:4px; background:#34323b; border-radius:0 0 5px 5px;
  }

  /* Tablet frame */
  .gaiex-tablet{ width:100%; filter:drop-shadow(0 24px 40px rgba(0,0,0,.42)); }
  .gaiex-tablet__body{
    position:relative;
    border:7px solid #16151b;
    border-radius:16px;
    aspect-ratio:3/4;
    background:#0b0c10;
    overflow:hidden;
  }
  .gaiex-tablet__body::before{
    content:"";
    position:absolute; top:5px; left:50%; transform:translateX(-50%);
    width:5px; height:5px; border-radius:50%;
    background:#2c2b33; z-index:3;
  }

  /* Phone frame */
  .gaiex-phone{ width:100%; filter:drop-shadow(0 18px 32px rgba(0,0,0,.4)); }
  .gaiex-phone__body{
    position:relative;
    border:6px solid #16151b;
    border-radius:22px;
    aspect-ratio:9/18.5;
    background:#0b0c10;
    overflow:hidden;
  }
  .gaiex-phone__body::before{
    content:"";
    position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:26%; height:5px; border-radius:6px;
    background:#16151b; z-index:3;
  }

  /* ============================================================
     SECTION 1 — HERO
     ============================================================ */
  .gaiex-hero{
    background:
      radial-gradient(ellipse 900px 520px at 84% 6%, rgba(239,21,104,.22), transparent 62%),
      radial-gradient(ellipse 620px 420px at 6% 92%, rgba(239,21,104,.10), transparent 60%),
      var(--gaiex-ink);
    color:var(--gaiex-text-light);
    padding:96px 0 88px;
    position:relative;
    overflow:hidden;
  }
  .gaiex-hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(ellipse 900px 600px at 78% 10%, #000 0%, transparent 70%);
            mask-image:radial-gradient(ellipse 900px 600px at 78% 10%, #000 0%, transparent 70%);
    pointer-events:none;
  }
  .gaiex-hero::after{
    content:"";
    position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(239,21,104,.55), transparent);
  }
  .gaiex-hero__blob{
    position:absolute; border-radius:50%; filter:blur(70px);
    pointer-events:none; z-index:0;
    animation:gaiexDrift 12s ease-in-out infinite;
  }
  .gaiex-hero__blob--a{
    width:380px; height:380px; top:-120px; right:-60px;
    background:radial-gradient(circle, rgba(239,21,104,.32), transparent 70%);
  }
  .gaiex-hero__blob--b{
    width:280px; height:280px; bottom:-90px; right:28%;
    background:radial-gradient(circle, rgba(255,120,170,.16), transparent 70%);
    animation-delay:-4s; animation-duration:15s;
  }
  @keyframes gaiexDrift{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-18px, 22px) scale(1.08); }
  }
  .gaiex-hero__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
    position:relative;
    z-index:1;
  }
 
.gaiex-hero__title{
    font-size:clamp(34px, 4.4vw, 52px);
    line-height:1.06;
    font-weight:700;
    letter-spacing:-.02em;
    margin-bottom:20px;

    position:relative;

    /* Clean white text */
    color:#ffffff;

    /* Remove all blur / glow */
    filter:none;
    text-shadow:none;

    /* No artificial stroke */
    -webkit-text-stroke:0;

    animation:none;
}

.gaiex-hero__title::before{
    display:none;
}
@keyframes gaiexTitleGlow{
  0%,100%{ opacity:.28; }
  50%{ opacity:.55; }
}
  @keyframes gaiexShine{
    0%{ background-position:120% 0; }
    50%{ background-position:0% 0; }
    100%{ background-position:120% 0; }
  }
 .gaiex-hero__title em{
    font-style:normal;

    background:linear-gradient(
        100deg,
        #ef1568 0%,
        #ff4f91 45%,
        #f2542d 100%
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    color:transparent;

    position:relative;
    display:inline;
    
    /* No animation */
    animation:none;

    /* No shadow */
    filter:none;
    text-shadow:none;
}
.gaiex-hero__title em::after{
    display:none;
}
  .gaiex-hero__desc{
    font-size:16px;
    line-height:1.65;
    color: whitesmoke;
    max-width:440px;
    margin-bottom:44px;
    color: grey;
  }
  .gaiex-hero__desc strong{ color: maroon; font-weight:700; }
.gaiex-hero__desc em{ color:var(--gaiex-pink); font-style:normal; font-weight:700; }
  .gaiex-flowRow{ display:flex; align-items:center; gap:0; }
  .gaiex-flowNode{ display:flex; flex-direction:column; align-items:center; text-align:center; width:130px; align-self:flex-start; }
  .gaiex-flowNode__iconWrap{
    position:relative;
    width:64px; height:64px;
    margin-bottom:14px;
    animation:gaiexNodeFloat 4.5s ease-in-out infinite;
  }
  .gaiex-flowNode:nth-child(1) .gaiex-flowNode__iconWrap{ animation-delay:0s; }
  .gaiex-flowNode:nth-child(3) .gaiex-flowNode__iconWrap{ animation-delay:-1.5s; }
  .gaiex-flowNode:nth-child(5) .gaiex-flowNode__iconWrap{ animation-delay:-3s; }
  @keyframes gaiexNodeFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
  }
  .gaiex-flowNode__iconWrap::before{
    content:"";
    position:absolute; inset:-4px;
    border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0%, var(--gaiex-pink) 18%, transparent 38%, transparent 100%);
    opacity:.65;
    animation:gaiexRingSpin 5s linear infinite;
  }
  @keyframes gaiexRingSpin{ to{ transform:rotate(360deg); } }
  .gaiex-flowNode__icon{
    width:64px; height:64px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--gaiex-ink-line);
    background:radial-gradient(circle at 30% 25%, rgba(239,21,104,.14), var(--gaiex-ink-soft) 70%);
    color:var(--gaiex-pink);
    position:absolute; inset:0;
    z-index:1;
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
  }
  .gaiex-flowNode__icon--hex{
    clip-path:polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  }
  .gaiex-flowNode:hover .gaiex-flowNode__icon{
    transform:scale(1.08);
    border-color:var(--gaiex-pink);
    background:radial-gradient(circle at 30% 25%, rgba(239,21,104,.32), var(--gaiex-ink-soft) 75%);
    box-shadow:0 14px 30px -12px rgba(239,21,104,.75), 0 0 0 4px rgba(239,21,104,.08);
  }
  .gaiex-flowNode:hover .gaiex-flowNode__iconWrap::before{ opacity:1; animation-duration:2s; }
  .gaiex-flowNode__label{ font-family:var(--gaiex-font-display); font-weight:700; font-size:13px; letter-spacing:.06em; margin-bottom:8px; }
  .gaiex-flowNode:nth-child(1) .gaiex-flowNode__icon{ color:var(--gaiex-blue); background:radial-gradient(circle at 30% 25%, rgba(47,143,255,.16), var(--gaiex-ink-soft) 70%); }
  .gaiex-flowNode:nth-child(1) .gaiex-flowNode__iconWrap::before{ background:conic-gradient(from 0deg, transparent 0%, var(--gaiex-blue) 18%, transparent 38%, transparent 100%); }
  .gaiex-flowNode:nth-child(1):hover .gaiex-flowNode__icon{ border-color:var(--gaiex-blue); background:radial-gradient(circle at 30% 25%, rgba(47,143,255,.35), var(--gaiex-ink-soft) 75%); box-shadow:0 14px 30px -12px rgba(47,143,255,.75), 0 0 0 4px rgba(47,143,255,.08); }

  .gaiex-flowNode:nth-child(5) .gaiex-flowNode__icon{ color:var(--gaiex-teal); background:radial-gradient(circle at 30% 25%, rgba(23,201,168,.16), var(--gaiex-ink-soft) 70%); }
  .gaiex-flowNode:nth-child(5) .gaiex-flowNode__iconWrap::before{ background:conic-gradient(from 0deg, transparent 0%, var(--gaiex-teal) 18%, transparent 38%, transparent 100%); }
  .gaiex-flowNode:nth-child(5):hover .gaiex-flowNode__icon{ border-color:var(--gaiex-teal); background:radial-gradient(circle at 30% 25%, rgba(23,201,168,.35), var(--gaiex-ink-soft) 75%); box-shadow:0 14px 30px -12px rgba(23,201,168,.75), 0 0 0 4px rgba(23,201,168,.08); }

  .gaiex-flowNode__copy{ font-size:13.5px; line-height:1.5; color: wheat; }
  .gaiex-flowConnector{
    flex:1; height:2px; margin:0 -6px 46px; min-width:20px;
    background-image:repeating-linear-gradient(90deg, var(--gaiex-line-dark) 0 6px, transparent 6px 12px);
    background-size:24px 2px;
    opacity:.6;
    animation:gaiexFlowDash 1.4s linear infinite;
  }
  @keyframes gaiexFlowDash{ to{ background-position:-24px 0; } }

  .gaiex-oneExp{ position:relative; margin-top:34px; display:inline-flex; align-items:center; justify-content:center; width:150px; height:150px; }
  .gaiex-oneExp__orbit{
    position:absolute; inset:0;
    border-radius:50%;
    border:1px dashed rgba(239,21,104,.4);
    animation:gaiexOrbitSpin 14s linear infinite;
  }
  .gaiex-oneExp__orbit::before{
    content:"";
    position:absolute; top:-3px; left:50%; transform:translateX(-50%);
    width:6px; height:6px; border-radius:50%;
    background:var(--gaiex-pink);
    box-shadow:0 0 10px 2px rgba(239,21,104,.8);
  }
  @keyframes gaiexOrbitSpin{ to{ transform:rotate(360deg); } }
  .gaiex-oneExp__badge{
    width:118px; height:118px; border-radius:50%;
    border:1.5px solid var(--gaiex-pink);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:radial-gradient(circle at 40% 30%, rgba(239,21,104,.16), rgba(239,21,104,.04) 70%);
    text-align:center;
    animation:gaiexPulseRing 3.2s ease-in-out infinite;
    position:relative; z-index:2;
  }
  @keyframes gaiexPulseRing{
    0%,100%{ box-shadow:0 0 0 0 rgba(239,21,104,.35), 0 0 24px 2px rgba(239,21,104,.18); }
    50%{ box-shadow:0 0 0 14px rgba(239,21,104,0), 0 0 34px 6px rgba(239,21,104,.3); }
  }
  .gaiex-oneExp__badge strong{ font-family:var(--gaiex-font-display); font-size:16px; font-weight:700; letter-spacing:.02em; color:var(--gaiex-text-light); }
  .gaiex-oneExp__badge span{ font-size:9.5px; letter-spacing:.14em; color:var(--gaiex-pink); font-weight:700; margin-top:3px; }

 /* =====================================================
   GENERATIVE AI HERO — RIGHT SIDE IMAGE
   ===================================================== */

.gaiex-heroImageWrap {
  position: relative;
  z-index: 2;

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

  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.gaiex-heroImage {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  object-fit: contain;

  filter: drop-shadow(0 25px 45px rgba(18, 19, 29, 0.18));

  animation: gaiexHeroImageFloat 5s ease-in-out infinite;
}

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

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


/* Tablet */
@media (max-width: 980px) {

  .gaiex-heroImageWrap {
    max-width: 520px;
  }

  .gaiex-heroImage {
    max-width: 500px;
  }
}


/* Mobile */
@media (max-width: 640px) {

  .gaiex-heroStack {
    width: 100% !important;
    min-height: auto !important;
    padding: 15px 0 10px !important;
    overflow: visible !important;
  }

  .gaiex-heroImageWrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }

  .gaiex-heroImage {
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
}


/* Small mobile */
@media (max-width: 380px) {

  .gaiex-heroImage {
    max-width: 310px !important;
  }
}
  /* ============================================================
     SECTION 2 — GENERATIVE AI ADVANTAGE
     ============================================================ */
.gaiex-advantage{
  background:var(--gaiex-cream);
  padding:100px 0;
  position:relative;
  overflow:hidden;
}
.gaiex-advantage::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(20,15,10,.08) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 780px 480px at 50% 40%, #000 0%, transparent 72%);
          mask-image:radial-gradient(ellipse 780px 480px at 50% 40%, #000 0%, transparent 72%);
  pointer-events:none;
}
.gaiex-advantage__blob{
  position:absolute; border-radius:50%; filter:blur(80px);
  pointer-events:none; z-index:0;
  animation:gaiexDrift 13s ease-in-out infinite;
}
.gaiex-advantage__blob--a{
  width:340px; height:340px; top:-100px; left:-80px;
  background:radial-gradient(circle, rgba(47,143,255,.26), transparent 70%);
}
.gaiex-advantage__blob--b{
  width:300px; height:300px; bottom:-90px; right:-60px;
  background:radial-gradient(circle, rgba(23,201,168,.24), transparent 70%);
  animation-delay:-5s; animation-duration:16s;
}
.gaiex-advantage__blob--c{
  width:260px; height:260px; top:30%; left:38%;
  background:radial-gradient(circle, rgba(239,21,104,.18), transparent 70%);
  animation-delay:-8s; animation-duration:14s;
}
.gaiex-advantage__blob--d{
  width:220px; height:220px; top:8%; right:12%;
  background:radial-gradient(circle, rgba(242,84,45,.18), transparent 70%);
  animation-delay:-3s; animation-duration:11s;
}

.gaiex-advantage__spotlight{
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(239,21,104,.14), transparent 70%);
  pointer-events:none;
  z-index:0;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .3s ease;
}
.gaiex-advantage__spotlight.is-active{ opacity:1; }
  .gaiex-advantage__grid{
    display:grid;
    grid-template-columns:0.82fr 1fr 0.82fr;
    gap:40px;
    align-items:center;
    position:relative;
    z-index:1;
  }
  .gaiex-advantage__title{ font-size:clamp(30px, 3.6vw, 42px); line-height:1.1; font-weight:700; letter-spacing:-.01em; margin-bottom:18px; }
  .gaiex-advantage__desc{ font-size:15.5px; line-height:1.65; color:var(--gaiex-text-dark-muted); max-width:360px; }

  .gaiex-diagram{ position:relative; display:flex; flex-direction:column; align-items:center; gap:0; perspective:1200px; }
  .gaiex-diagram__laptop{
    width:100%; max-width:280px;
    animation:gaiexFloatSoft 5s ease-in-out infinite;
    transition:transform .4s ease, filter .4s ease;
    position: relative;
  }
.gaiex-diagram__laptop::before{
  content:"";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:130%; height:130%; border-radius:50%;
  background:radial-gradient(circle, rgba(239,21,104,.28), transparent 65%);
  filter:blur(30px);
  z-index:-1;
  animation:gaiexHaloPulse 3.4s ease-in-out infinite;
}
@keyframes gaiexHaloPulse{
  0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.08); }
}
.gaiex-diagram__laptop .gaiex-laptop__screen{ position:relative; overflow:hidden; }
.gaiex-diagram__laptop .gaiex-laptop__screen::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  background-size:250% 250%;
  animation:gaiexScreenShine 5s ease-in-out infinite;
  pointer-events:none;
  z-index:5;
}
@keyframes gaiexScreenShine{
  0%{ background-position:130% 130%; }
  50%{ background-position:-30% -30%; }
  100%{ background-position:130% 130%; }
}
  .gaiex-diagram__laptop .gaiex-laptop__screen{ border-color:#1c1a22; }
  .gaiex-diagram:hover .gaiex-diagram__laptop{
    transform:rotateX(4deg) scale(1.03);
    filter:drop-shadow(0 22px 34px rgba(239,21,104,.22));
  }
  @keyframes gaiexFloatSoft{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-7px); }
  }

  .gaiex-pill{
    font-family:var(--gaiex-font-display);
    font-size:11px; font-weight:700; letter-spacing:.08em;
    color:var(--gaiex-pink); background:var(--gaiex-pink-soft);
    border:1px solid var(--gaiex-pink); padding:7px 18px; border-radius:999px;
    white-space:nowrap;
    position:relative;
    box-shadow:0 0 0 0 rgba(239,21,104,.35);
    animation:gaiexPillPulse 2.6s ease-in-out infinite;
  }
  @keyframes gaiexPillPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(239,21,104,.28); }
    50%{ box-shadow:0 0 0 8px rgba(239,21,104,0); }
  }
  .gaiex-diagram__connector{
    width:2px; height:22px;
    background-image:repeating-linear-gradient(180deg, var(--gaiex-line-cream) 0 6px, transparent 6px 12px);
    background-size:2px 24px;
    opacity:.65;
    animation:gaiexFlowDashV 1.2s linear infinite;
  }
  @keyframes gaiexFlowDashV{ to{ background-position:0 -24px; } }

  .gaiex-diagram__branch{ display:flex; justify-content:center; align-items:flex-end; gap:22px; margin:6px 0; }
  .gaiex-diagram__branchItem{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    transition:transform .3s ease, filter .3s ease;
    animation:gaiexFloatSoft 4.5s ease-in-out infinite;
  }
  .gaiex-diagram__branchItem--mobile{ width:15%; animation-delay:-.4s; }
  .gaiex-diagram__branchItem--tablet{ width:22%; animation-delay:-1.6s; }
  .gaiex-diagram__branchItem--desktop{ width:34%; animation-delay:-2.8s; }
  .gaiex-diagram__branchItem:hover{ transform:translateY(-6px) scale(1.04); filter:drop-shadow(0 14px 22px rgba(0,0,0,.18)); }
  .gaiex-diagram__monitor{ width:100%; }
  .gaiex-diagram__monitorScreen{
    position:relative; border:5px solid #1c1a22; border-radius:6px;
    aspect-ratio:16/10.5; background:#0b0c10; overflow:hidden;
  }
  .gaiex-diagram__monitorStand{
    width:26%; height:8px; background:#1c1a22; margin:0 auto; border-radius:0 0 3px 3px;
  }
  .gaiex-diagram__branchLabel{
    font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--gaiex-text-dark-muted);
    padding:3px 9px; border-radius:20px; transition:color .3s ease, background .3s ease;
  }
  .gaiex-diagram__branchItem--mobile .gaiex-diagram__branchLabel{ }
  .gaiex-diagram__branchItem--mobile:hover .gaiex-diagram__branchLabel{ color:var(--gaiex-teal); background:var(--gaiex-teal-soft); }
  .gaiex-diagram__branchItem--tablet:hover .gaiex-diagram__branchLabel{ color:var(--gaiex-pink); background:var(--gaiex-pink-soft); }
  .gaiex-diagram__branchItem--desktop:hover .gaiex-diagram__branchLabel{ color:var(--gaiex-blue); background:var(--gaiex-blue-soft); }

  .gaiex-features{ display:flex; flex-direction:column; gap:26px; }
  .gaiex-featureItem{
  display:flex; gap:16px;
  position:relative;
  padding:9px 11px 9px 14px;
  border-radius:12px;
  transition:background .3s ease, transform .3s ease;
}
.gaiex-featureItem::before{
  content:"";
  position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:3px;
  background:var(--gaiex-pink);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s ease;
}
.gaiex-featureItem:nth-child(1)::before{ background:var(--gaiex-blue); }
.gaiex-featureItem:nth-child(3)::before{ background:var(--gaiex-teal); }
.gaiex-featureItem:nth-child(4)::before{ background:var(--gaiex-orange); }
.gaiex-featureItem:hover{ background:rgba(0,0,0,.035); transform:translateX(4px); }
.gaiex-featureItem:hover::before{ transform:scaleY(1); }
.gaiex-featureItem__num{
  position:absolute; right:14px; top:10px;
  font-family:var(--gaiex-font-display);
  font-weight:700; font-size:11px; letter-spacing:.06em;
  color:var(--gaiex-text-dark-muted); opacity:.5;
}
  .gaiex-featureItem__icon{
    flex:none; width:46px; height:46px; border-radius:50%;
    background:var(--gaiex-pink-soft); color:var(--gaiex-pink);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    transition:transform .35s ease, background .35s ease, box-shadow .35s ease;
  }
  .gaiex-featureItem__icon::before{
    content:""; position:absolute; inset:-5px; border-radius:50%;
    border:1.5px dashed currentColor; opacity:0; transition:opacity .35s ease;
  }
  .gaiex-featureItem:hover .gaiex-featureItem__icon{ transform:scale(1.1) rotate(-6deg); background:var(--gaiex-pink); color:#fff; box-shadow:0 12px 26px -10px rgba(239,21,104,.55); }
  .gaiex-featureItem:hover .gaiex-featureItem__icon::before{ opacity:.5; animation:gaiexRingSpin 6s linear infinite; }
  .gaiex-featureItem:nth-child(1) .gaiex-featureItem__icon{ background:var(--gaiex-blue-soft); color:var(--gaiex-blue); }
  .gaiex-featureItem:nth-child(1):hover .gaiex-featureItem__icon{ background:var(--gaiex-blue); color:#fff; box-shadow:0 12px 26px -10px rgba(47,143,255,.55); }
  .gaiex-featureItem:nth-child(3) .gaiex-featureItem__icon{ background:var(--gaiex-teal-soft); color:var(--gaiex-teal); }
  .gaiex-featureItem:nth-child(3):hover .gaiex-featureItem__icon{ background:var(--gaiex-teal); color:#fff; box-shadow:0 12px 26px -10px rgba(23,201,168,.55); }
  .gaiex-featureItem:nth-child(4) .gaiex-featureItem__icon{ background:var(--gaiex-orange-soft); color:var(--gaiex-orange); }
  .gaiex-featureItem:nth-child(4):hover .gaiex-featureItem__icon{ background:var(--gaiex-orange); color:#fff; box-shadow:0 12px 26px -10px rgba(242,84,45,.55); }
  .gaiex-featureItem__title{ font-family:var(--gaiex-font-display); font-size:16.5px; font-weight:700; margin-bottom:5px; color: #000 }
  .gaiex-featureItem__copy{ font-size:13.5px; line-height:1.55; color:var(--gaiex-text-dark-muted); }

  .gaiex-diagram{ transition:transform .15s ease-out; transform-style:preserve-3d; }
.gaiex-diagram__laptop{ transition:transform .15s ease-out, filter .3s ease; }
.gaiex-diagram__branchItem{ transition:transform .15s ease-out, filter .3s ease; }
  /* ============================================================
     SECTION 3 — INSIDE THE GENERATIVE AI EXPERIENCE
     ============================================================ */
  .gaiex-inside{ background:var(--gaiex-ink); color:var(--gaiex-text-light); padding:100px 0 0; }
  .gaiex-inside__top{ display:grid; grid-template-columns:0.85fr 1.3fr; gap:30px; align-items:center; padding-bottom:80px; }
 .gaiex-inside__title{
  font-size:clamp(30px, 3.6vw, 42px);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:18px;
  background:linear-gradient(100deg, var(--gaiex-orange) 0%, var(--gaiex-pink) 45%, var(--gaiex-purple) 90%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gaiexShine 8s ease-in-out infinite;
}
  .gaiex-inside__desc{ font-size:16.5px; line-height:1.65; color: #fff; max-width:380px; }

  .gaiex-layerDiagram{ display:grid; grid-template-columns:1fr 1.1fr 1fr; align-items:center; gap:6px; }
  .gaiex-layerCol{ display:flex; flex-direction:column; gap:36px; }
  .gaiex-layerCol--right{ align-items:flex-end; text-align:right; }
  .gaiex-layerNote{ display:flex; gap:12px; max-width:180px; position:relative; }
  .gaiex-layerCol--right .gaiex-layerNote{ flex-direction:row-reverse; }
  .gaiex-layerNote__icon{
    flex:none; width:38px; height:38px; border-radius:10px;
    border:1.5px solid var(--gaiex-ink-line); background:var(--gaiex-ink-soft);
    color:var(--gaiex-pink); display:flex; align-items:center; justify-content:center;
    transition:border-color .3s ease, transform .3s ease; position:relative;
  }
  .gaiex-layerNote__icon::after{
    content:""; position:absolute; top:50%; width:16px; height:0;
    border-top:2px dotted var(--gaiex-line-dark); opacity:.6;
  }
  .gaiex-layerCol .gaiex-layerNote__icon::after{ right:-16px; }
  .gaiex-layerCol--right .gaiex-layerNote__icon::after{ left:-16px; }
  .gaiex-layerNote:hover .gaiex-layerNote__icon{ transform:translateY(-3px); }
  .gaiex-layerCol:nth-child(1) .gaiex-layerNote:nth-child(1) .gaiex-layerNote__icon{ color:var(--gaiex-blue); }
  .gaiex-layerCol:nth-child(1) .gaiex-layerNote:nth-child(1):hover .gaiex-layerNote__icon{ border-color:var(--gaiex-blue); }
  .gaiex-layerCol:nth-child(1) .gaiex-layerNote:nth-child(2):hover .gaiex-layerNote__icon{ border-color:var(--gaiex-pink); }
  .gaiex-layerCol--right .gaiex-layerNote:nth-child(1) .gaiex-layerNote__icon{ color:var(--gaiex-teal); }
  .gaiex-layerCol--right .gaiex-layerNote:nth-child(1):hover .gaiex-layerNote__icon{ border-color:var(--gaiex-teal); }
  .gaiex-layerCol--right .gaiex-layerNote:nth-child(2) .gaiex-layerNote__icon{ color:var(--gaiex-orange); }
  .gaiex-layerCol--right .gaiex-layerNote:nth-child(2):hover .gaiex-layerNote__icon{ border-color:var(--gaiex-orange); }
  .gaiex-layerNote__title{ font-family:var(--gaiex-font-display); font-size:15.5px; font-weight:700; margin-bottom:3px; }
  .gaiex-layerNote__copy{ font-size:14.5px; line-height:1.5; color:var(--gaiex-text-light-muted); }

  .gaiex-brandLaptop{ width:100%; max-width:340px; margin:0 auto; }
  .gaiex-brandLaptop .gaiex-laptop__screen{
    background:
      radial-gradient(circle at 50% 45%, rgba(239,21,104,.35), transparent 62%),
      #0b0a10;
    display:flex; align-items:center; justify-content:center;
    border-color:#201d28;
    overflow: hidden;
  }
  .gaiex-brandLaptop .gaiex-laptop__screen::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px);
  pointer-events:none; z-index:4;
}
.gaiex-brandLaptop .gaiex-laptop__screen::after{
  content:"";
  position:absolute; left:0; right:0; height:24%;
  background:linear-gradient(180deg, transparent, rgba(239,21,104,.4), transparent);
  filter:blur(2px);
  pointer-events:none; z-index:5;
  animation:gaiexScanMove 3s linear infinite;
}
@keyframes gaiexScanMove{
  0%{ transform:translateY(-40%); }
  100%{ transform:translateY(420%); }
}
  .gaiex-brandLaptop__mark{
    font-family:var(--gaiex-font-display); font-weight:700;
    font-size:15%;
    color:transparent;
    background:linear-gradient(90deg,#ff4f93,var(--gaiex-pink));
    -webkit-background-clip:text; background-clip:text;
    letter-spacing:.04em;
    text-shadow:0 0 30px rgba(239,21,104,.4);
    position:relative;
  }
  .gaiex-brandLaptop__mark::after{
    content:""; position:absolute; left:8%; right:8%; bottom:-18%; height:2px;
    background:linear-gradient(90deg, transparent, var(--gaiex-pink), transparent);
    opacity:.7;
  }

  .gaiex-stripBar{ border-top:1px solid var(--gaiex-ink-line); background:var(--gaiex-ink-soft); padding:26px 0; margin-top:0; }
  .gaiex-stripList{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0; }
  .gaiex-stripItem{
    display:flex; align-items:center; gap:10px; padding:6px 28px;
    font-size:13.5px; font-weight:600; color:var(--gaiex-text-light);
    border-right:1px solid var(--gaiex-ink-line); transition:color .3s ease;
  }
  .gaiex-stripItem:last-child{ border-right:none; }
  .gaiex-stripItem svg{ flex:none; transition:transform .3s ease, color .3s ease, filter .3s ease; }
.gaiex-stripItem:hover svg{ transform:scale(1.25) rotate(-6deg); }
.gaiex-stripItem:nth-child(1) svg{ color:var(--gaiex-blue); }
.gaiex-stripItem:nth-child(1):hover svg{ filter:drop-shadow(0 0 8px rgba(47,143,255,.7)); }
.gaiex-stripItem:nth-child(2) svg{ color:var(--gaiex-pink); }
.gaiex-stripItem:nth-child(2):hover svg{ filter:drop-shadow(0 0 8px rgba(239,21,104,.7)); }
.gaiex-stripItem:nth-child(3) svg{ color:var(--gaiex-teal); }
.gaiex-stripItem:nth-child(3):hover svg{ filter:drop-shadow(0 0 8px rgba(23,201,168,.7)); }
.gaiex-stripItem:nth-child(4) svg{ color:var(--gaiex-orange); }
.gaiex-stripItem:nth-child(4):hover svg{ filter:drop-shadow(0 0 8px rgba(242,84,45,.7)); }
.gaiex-stripItem:nth-child(5) svg{ color:var(--gaiex-purple); }
.gaiex-stripItem:nth-child(5):hover svg{ filter:drop-shadow(0 0 8px rgba(155,93,229,.7)); }
.gaiex-stripItem:hover{ color:var(--gaiex-text-light); }

  .gaiex-layerWire{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
.gaiex-layerWire path{
  fill:none; stroke-width:1.8; stroke-dasharray:5 6; stroke-dashoffset:200;
  opacity:.85; animation:gaiexDash 2.2s linear infinite;
  stroke-linecap:round;
}
.gaiex-layerWire circle{ opacity:.9; }
.gaiex-layerWire .w-blue{ stroke:var(--gaiex-blue); filter:drop-shadow(0 0 5px rgba(47,143,255,.65)); }
.gaiex-layerWire .w-pink{ stroke:var(--gaiex-pink); filter:drop-shadow(0 0 5px rgba(239,21,104,.65)); }
.gaiex-layerWire .w-teal{ stroke:var(--gaiex-teal); filter:drop-shadow(0 0 5px rgba(23,201,168,.65)); }
.gaiex-layerWire .w-orange{ stroke:var(--gaiex-orange); filter:drop-shadow(0 0 5px rgba(242,84,45,.65)); }
.gaiex-layerWire circle.w-blue{ fill:var(--gaiex-blue); }
.gaiex-layerWire circle.w-pink{ fill:var(--gaiex-pink); }
.gaiex-layerWire circle.w-teal{ fill:var(--gaiex-teal); }
.gaiex-layerWire circle.w-orange{ fill:var(--gaiex-orange); }
.gaiex-layerDiagram{ position:relative; }

  /* ============================================================
     SECTION 4 — BUILT AROUND YOUR USERS
     ============================================================ */
  .gaiex-journey{background: linear-gradient(160deg, var(--mad-cream) 0%, #f9d9e4 50%, #fce0c8 100%);padding:80px 0 90px; }
  .gaiex-journey__header{ max-width:640px; margin:0 0 64px; }
  .gaiex-journey__title{ font-size:clamp(28px, 3.4vw, 38px); line-height:1.15; font-weight:700; letter-spacing:-.01em; color: #000;}

  .gaiex-steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; position:relative; }
  .gaiex-step{ position:relative; }
  .gaiex-step__icon{
    width:82px; height:82px; border-radius:50%;
    background: linear-gradient(135deg, var(--mad-pink), #f6923a);
    display:flex; align-items:center; justify-content:center; margin-bottom:22px;
    position:relative; transition:transform .35s ease, box-shadow .35s ease;
  }
  .gaiex-step:nth-child(2) .gaiex-step__icon,
  .gaiex-step:nth-child(4) .gaiex-step__icon{ background: #000; color:var(--gaiex-orange); }
  .gaiex-step:hover .gaiex-step__icon{ transform:translateY(-5px); box-shadow:0 14px 28px -14px rgba(0,0,0,.25); }
  .gaiex-step__num{ font-family:var(--gaiex-font-display); font-weight:900; font-size:14px; color:var(--gaiex-orange); letter-spacing:.06em; margin-bottom:4px; display:block; }
  .gaiex-step:nth-child(1) .gaiex-step__num, .gaiex-step:nth-child(3) .gaiex-step__num{ color:var(--gaiex-pink); }
  .gaiex-step__title{ font-family:var(--gaiex-font-display); font-weight:700; font-size:20px;color: #000; letter-spacing:.03em; margin-bottom:10px; text-transform:uppercase; }
  .gaiex-step__copy{ font-size:15.5px; line-height:1.55; color: maroon; max-width:230px; }

  .gaiex-journey__divider{ display:flex; align-items:center; margin:70px 0 46px; }
  .gaiex-journey__divider::before, .gaiex-journey__divider::after{ content:""; flex:1; height:1px; background:linear-gradient(to right, transparent, #d8cdb8, transparent); }
  .gaiex-journey__dividerDot{ width:9px; height:9px; border-radius:50%; background:var(--gaiex-pink); margin:0 14px; flex:none; }
/* ============================================================
   GENERATIVE AI — QUOTE CARD
   ============================================================ */

.gaiex-evolve-quote-card {
  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: 980px;

  margin: 55px auto 0;
  padding: 30px 30px 22px;

  overflow: hidden;

  background: #000;
  border: 1px solid rgba(113, 75, 255, 0.14);
  border-radius: 26px;

  box-shadow:
    0 24px 65px rgba(30, 22, 65, 0.1),
    0 8px 24px rgba(122, 75, 255, 0.07);

  text-align: center;
}


/* Gradient decoration */
.gaiex-evolve-quote-card::before {
  content: "";

  position: absolute;
  top: -120px;
  left: -100px;
  z-index: -1;

  width: 280px;
  height: 280px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(118, 75, 255, 0.17),
      transparent 70%
    );

  animation:
    gaiexQuoteGlow 6s ease-in-out infinite;
}


.gaiex-evolve-quote-card::after {
  content: "";

  position: absolute;
  right: -100px;
  bottom: -130px;
  z-index: -1;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 68, 153, 0.14),
      transparent 70%
    );

  animation:
    gaiexQuoteGlow 7s ease-in-out 1s infinite reverse;
}


/* Quote icon */
.gaiex-evolve-quote-mark {
  display: block;

  width: 45px;
  height: 45px;

  margin: 0 auto 20px;

  color: #774cff;

  filter:
    drop-shadow(0 8px 16px rgba(119, 76, 255, 0.22));

  animation:
    gaiexQuoteMarkFloat 4s ease-in-out infinite;
}


/* Quote text */
.gaiex-evolve-quote {
  max-width: 720px;

  margin: 0 auto;

  color: #fff;

  font-size: clamp(20px, 2vw, 29px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.4px;
}


/* Highlighted text */
.gaiex-accent-word {
  color: transparent;

  background:
    linear-gradient(
      90deg,
      #7047f5 0%,
      #a742e8 45%,
      #ed427f 100%
    );

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


/* Hover effect */
.gaiex-evolve-quote-card {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}


.gaiex-evolve-quote-card:hover {
  transform: translateY(-6px);

  border-color: rgba(113, 75, 255, 0.28);

  box-shadow:
    0 30px 75px rgba(30, 22, 65, 0.14),
    0 12px 28px rgba(122, 75, 255, 0.1);
}


/* Animations */
@keyframes gaiexQuoteGlow {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }

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


@keyframes gaiexQuoteMarkFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-7px) rotate(-4deg);
  }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 768px) {

  .gaiex-evolve-quote-card {
    max-width: 100%;

    margin-top: 42px;
    padding: 38px 30px 36px;

    border-radius: 22px;
  }

  .gaiex-evolve-quote-mark {
    width: 40px;
    height: 40px;

    margin-bottom: 17px;
  }

  .gaiex-evolve-quote {
    font-size: 20px;
    line-height: 1.55;
  }
}


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

@media (max-width: 480px) {

  .gaiex-evolve-quote-card {
    width: 100%;

    margin-top: 35px;
    padding: 32px 20px 30px;

    border-radius: 18px;
  }

  .gaiex-evolve-quote-mark {
    width: 34px;
    height: 34px;

    margin-bottom: 15px;
  }

  .gaiex-evolve-quote {
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: -0.1px;
  }

  .gaiex-evolve-quote-card::before {
    width: 210px;
    height: 210px;
  }

  .gaiex-evolve-quote-card::after {
    width: 220px;
    height: 220px;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .gaiex-evolve-quote-card,
  .gaiex-evolve-quote-card::before,
  .gaiex-evolve-quote-card::after,
  .gaiex-evolve-quote-mark {
    animation: none !important;
    transition: none !important;
  }
}

  /* =========================================================
   GENERATIVE AI EXPERIENCES — FINAL MOBILE RESPONSIVE ONLY
   Paste AFTER the complete desktop CSS.
   ========================================================= */

@media screen and (max-width: 768px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .gaiex-wrap{
    width:100%;
    max-width:100%;
    padding:0 16px;
  }

  .gaiex-hero,
  .gaiex-advantage,
  .gaiex-inside,
  .gaiex-journey{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  /* SECTION 1 */
  .gaiex-hero{padding:52px 0 46px; padding-top: 90px !important;}
  .gaiex-hero__grid{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:38px;
  }
  .gaiex-hero__grid > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .gaiex-hero__title{
    width:100%;
    max-width:100%;
    font-size:clamp(30px,9vw,38px);
    line-height:1.12;
    overflow-wrap:anywhere;
  }
  .gaiex-hero__desc{
    width:100%;
    max-width:100%;
    margin-bottom:32px;
    font-size:14px;
  }
  .gaiex-flowRow{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:8px;
  }
  .gaiex-flowNode{
    width:100%;
    min-width:0;
  }
  .gaiex-flowConnector{display:none;}
  .gaiex-flowNode__iconWrap,
  .gaiex-flowNode__icon{
    width:52px;
    height:52px;
  }
  .gaiex-flowNode__label{font-size:11px;}
  .gaiex-flowNode__copy{
    width:100%;
    padding:0 2px;
    font-size:10.5px;
    overflow-wrap:anywhere;
  }
  .gaiex-oneExp{
    display:flex;
    width:130px;
    height:130px;
    margin:30px auto 0;
  }
  .gaiex-oneExp__badge{width:104px;height:104px;}
  .gaiex-heroStack{
    width:100%;
    min-height:280px;
    margin:0;
    order:2;
  }
  .gaiex-heroStack__item--laptop{left:1%;width:73%;}
  .gaiex-heroStack__item--tablet{right:1%;width:33%;}
  .gaiex-heroStack__item--phone{right:7%;width:19%;}

  /* SECTION 2 */
  .gaiex-advantage{padding:52px 0;}
  .gaiex-advantage__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:34px;
    text-align:left;
  }
  .gaiex-advantage__grid > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .gaiex-advantage__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .gaiex-advantage__desc{max-width:100%;}
  .gaiex-diagram{
    width:100%;
    max-width:340px;
    margin:0 auto;
  }
  .gaiex-diagram__laptop{width:78%;max-width:250px;}
  .gaiex-diagram__branch{
    width:100%;
    max-width:320px;
    gap:10px;
  }
  .gaiex-diagram__branchItem--mobile{width:18%;}
  .gaiex-diagram__branchItem--tablet{width:26%;}
  .gaiex-diagram__branchItem--desktop{width:39%;}
  .gaiex-pill{font-size:9px;padding:6px 12px;}
  .gaiex-features{width:100%;gap:18px;}
  .gaiex-featureItem{
    display:flex;
    width:100%;
    max-width:100%;
    gap:12px;
    padding:10px 8px 10px 12px;
  }
  .gaiex-featureItem__icon{width:42px;height:42px;}
  .gaiex-featureItem__title{font-size:15px;}
  .gaiex-featureItem__copy{font-size:13px;}

  /* SECTION 3 */
  .gaiex-inside{padding:52px 0 0;}
  .gaiex-inside__top{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:14px;
    padding-bottom:40px;
  }
  .gaiex-inside__top > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .gaiex-inside__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .gaiex-inside__desc{max-width:100%;font-size:14.5px;}
  .gaiex-layerDiagram{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:24px;
  }
  .gaiex-layerDiagram > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .gaiex-brandLaptop{
    order:1;
    width:100%;
    max-width:300px;
    margin:0 auto 8px;
  }
  .gaiex-layerCol,
  .gaiex-layerCol--right{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    gap:16px;
    align-items:start;
    text-align:left;
  }
  .gaiex-layerCol{order:2;}
  .gaiex-layerCol--right{order:3;}
  .gaiex-layerNote,
  .gaiex-layerCol--right .gaiex-layerNote{
    display:flex;
    flex-direction:row;
    width:100%;
    max-width:100%;
    gap:10px;
  }
  .gaiex-layerNote__icon::after,
  .gaiex-layerWire{display:none;}
  .gaiex-layerNote__title{font-size:14px;}
  .gaiex-layerNote__copy{font-size:12.5px;}
  .gaiex-stripBar{padding:22px 0;}
  .gaiex-stripList{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    gap:10px;
  }
  .gaiex-stripItem{
    width:100%;
    min-width:0;
    padding:8px 6px;
    border-right:0;
    font-size:12px;
  }

  /* SECTION 4 */
  .gaiex-journey{padding:52px 0;}
  .gaiex-journey__header{
    width:100%;
    max-width:100%;
    margin-bottom:36px;
  }
  .gaiex-journey__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .gaiex-steps{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:28px;
  }
  .gaiex-step{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    width:100%;
    column-gap:14px;
    align-items:start;
  }
  .gaiex-step__icon{
    grid-row:1 / span 3;
    width:64px;
    height:64px;
    margin:0;
  }
  .gaiex-step__num,
  .gaiex-step__title,
  .gaiex-step__copy{grid-column:2;}
  .gaiex-step__title{font-size:17px;margin-bottom:5px;}
  .gaiex-step__copy{max-width:100%;font-size:13.5px;}
  .gaiex-journey__divider{margin:42px 0 30px;}
  .gaiex-journey__closing{font-size:16px;}
}

@media screen and (max-width:380px){
  .gaiex-wrap{padding:0 12px;}
  .gaiex-hero__title{font-size:28px;}
  .gaiex-flowNode__iconWrap,
  .gaiex-flowNode__icon{width:46px;height:46px;}
  .gaiex-flowNode__label{font-size:10px;}
  .gaiex-flowNode__copy{font-size:9.5px;}
  .gaiex-heroStack{min-height:240px;}
  .gaiex-layerCol,
  .gaiex-layerCol--right,
  .gaiex-stripList{grid-template-columns:minmax(0,1fr);}
  .gaiex-step{grid-template-columns:56px minmax(0,1fr);}
  .gaiex-step__icon{width:56px;height:56px;}
}



/*
========================================================
         saas product development
========================================================*/

/* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --scpa-bg-dark:#0a0a0c;
    --scpa-bg-dark-2:#100c0e;
    --scpa-bg-cream:#faf3ee;
    --scpa-card-dark:#141010;
    --scpa-card-dark-border:#241c1c;
    --scpa-accent:#ff2f6e;
    --scpa-accent-2:#ff8a4c;
    --scpa-accent-soft:rgba(255,47,110,.14);
    --scpa-text-light:#f6f1ee;
    --scpa-text-light-muted:#a79e9c;
    --scpa-text-dark:#1c1616;
    --scpa-text-dark-muted:#6f6462;
    --scpa-line:rgba(255,255,255,.09);
    --scpa-line-dark:rgba(28,22,22,.1);
    --scpa-radius:20px;
    --scpa-font-display:'Manrope', sans-serif;
    --scpa-font-body:'Inter', sans-serif;
    --scpa-font-mono:'IBM Plex Mono', monospace;
    --scpa-ease:cubic-bezier(.16,.8,.28,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--scpa-font-body);
    background:var(--scpa-bg-cream);
    color:var(--scpa-text-dark);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  .scpa-wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

  .scpa-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--scpa-font-mono);
    font-size:12.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--scpa-accent);
    margin-bottom:18px;
    margin-top: 40px;
  }
  .scpa-eyebrow::before{
    content:""; width:16px; height:2px; background:var(--scpa-accent); border-radius:2px;
  }
  .scpa-eyebrow-num{color:inherit; opacity:.55; font-weight:600;}

  h1,h2,h3{font-family:var(--scpa-font-display); font-weight:600; letter-spacing:-.02em;}

  /* reveal-on-scroll base */
  [data-scpa-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--scpa-ease), transform .8s var(--scpa-ease);}
  [data-scpa-reveal].scpa-in{opacity:1; transform:translateY(0);}
  [data-scpa-reveal="stagger"] > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--scpa-ease), transform .7s var(--scpa-ease);}
  [data-scpa-reveal="stagger"].scpa-in > *{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    [data-scpa-reveal], [data-scpa-reveal="stagger"] > *{opacity:1 !important; transform:none !important;}
  }
/*==============================================
        Smart Chatbots Process Automation
==============================================*/

 /* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --scpa-bg-dark:#0a0a0c;
    --scpa-bg-dark-2:#100c0e;
    --scpa-bg-cream:#faf3ee;
    --scpa-card-dark:#141010;
    --scpa-card-dark-border:#241c1c;
    --scpa-accent:#ff2f6e;
    --scpa-accent-2:#ff8a4c;
    --scpa-accent-soft:rgba(255,47,110,.14);
    --scpa-text-light:#f6f1ee;
    --scpa-text-light-muted:#a79e9c;
    --scpa-text-dark:#1c1616;
    --scpa-text-dark-muted:#6f6462;
    --scpa-line:rgba(255,255,255,.09);
    --scpa-line-dark:rgba(28,22,22,.1);
    --scpa-radius:20px;
    --scpa-font-display:'Manrope', sans-serif;
    --scpa-font-body:'Inter', sans-serif;
    --scpa-font-mono:'IBM Plex Mono', monospace;
    --scpa-ease:cubic-bezier(.16,.8,.28,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--scpa-font-body);
    background:var(--scpa-bg-cream);
    color:var(--scpa-text-dark);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  .scpa-wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

  .scpa-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--scpa-font-mono);
    font-size:12.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--scpa-accent);
    margin-bottom:18px;
  }
  .scpa-eyebrow::before{
    content:""; width:16px; height:2px; background:var(--scpa-accent); border-radius:2px;
  }
  .scpa-eyebrow-num{color:inherit; opacity:.55; font-weight:600;}

  h1,h2,h3{font-family:var(--scpa-font-display); font-weight:600; letter-spacing:-.02em;}

  /* reveal-on-scroll base */
  [data-scpa-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--scpa-ease), transform .8s var(--scpa-ease);}
  [data-scpa-reveal].scpa-in{opacity:1; transform:translateY(0);}
  [data-scpa-reveal="stagger"] > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--scpa-ease), transform .7s var(--scpa-ease);}
  [data-scpa-reveal="stagger"].scpa-in > *{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    [data-scpa-reveal], [data-scpa-reveal="stagger"] > *{opacity:1 !important; transform:none !important;}
  }

  /* ============================================================
     HERO SECTION
     ============================================================ */
  .scpa-hero{
    position:relative;
    background:radial-gradient(120% 100% at 82% 0%, #1c0f13 0%, var(--scpa-bg-dark) 55%), var(--scpa-bg-dark);
    color:var(--scpa-text-light);
    padding:70px 0 60px;
    overflow:hidden;
  }
  .scpa-hero::before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(60% 55% at 72% 25%, rgba(255,47,110,.16), transparent 65%),
               radial-gradient(45% 40% at 15% 85%, rgba(255,138,76,.10), transparent 70%);
    pointer-events:none;
  }
  .scpa-hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr;
    gap:56px; align-items:center; position:relative; z-index:1;
  }

  .scpa-hero-title{
    position:relative;
    font-family:var(--scpa-font-display);
    font-weight:800;
    font-size: 45px;
    line-height:1.0;
    letter-spacing:-.035em;
    margin-bottom:24px;
  }
  .scpa-hero-title .scpa-line{
    display:block; opacity:0; transform:translateY(20px);
    animation:scpa-title-in .8s var(--scpa-ease) forwards;
  }
  .scpa-hero-title .scpa-line:nth-child(1){animation-delay:.05s;}
  .scpa-hero-title .scpa-line:nth-child(2){animation-delay:.22s;}
  @keyframes scpa-title-in{
    to{opacity:1; transform:translateY(0);}
  }
  .scpa-hero-title .scpa-accent-word{
  background:linear-gradient(97deg, var(--scpa-accent) 0%, var(--scpa-accent-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
  display:inline-block;
  text-shadow:0 0 24px rgba(255,47,110,.35), 0 0 44px rgba(255,138,76,.18);
}
  @media (prefers-reduced-motion: reduce){
    .scpa-hero-title .scpa-line{opacity:1; transform:none; animation:none;}
  }

  .scpa-hero-para{
    font-size:18.5px; line-height:1.7;
    color: whitesmoke;
    max-width:480px;
    margin-bottom:28px;
  }

  .scpa-hero-platform-sep{width:3px; height:3px; border-radius:50%; background:var(--scpa-text-light-muted); opacity:.5; flex:none;}

  .scpa-hero-cta{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    margin-bottom:48px;
  }
  .scpa-hero-btn{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--scpa-font-body); font-size:14.5px; font-weight:600;
    padding:14px 28px; border-radius:999px;
    text-decoration:none; cursor:pointer; border:none;
    transition:transform .35s var(--scpa-ease), box-shadow .35s var(--scpa-ease), background .35s var(--scpa-ease);
  }
  .scpa-hero-btn svg{width:16px; height:16px; transition:transform .35s var(--scpa-ease);}
  .scpa-hero-btn--primary{
    background:linear-gradient(97deg, var(--scpa-accent), var(--scpa-accent-2));
    color:#0a0505;
    box-shadow:0 16px 34px -12px rgba(255,47,110,.55);
  }
  .scpa-hero-btn--primary:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 42px -12px rgba(255,47,110,.7);
  }
  .scpa-hero-btn--primary:hover svg{transform:translateX(3px);}
  .scpa-hero-btn--ghost{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.16);
    color:var(--scpa-text-light);
  }
  .scpa-hero-btn--ghost:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.3);
  }

  .scpa-hero-orbit-panel{
    position:relative;
  }
  .scpa-hero-orbit-eyebrow{
    font-family:var(--scpa-font-mono); font-size:14.5px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase;
    color: whitesmoke;
    margin-bottom:16px;
  }
  .scpa-hero-orbit{
    display:flex; align-items:flex-start; gap:2px; position:relative;
  }
  .scpa-hero-orbit-item{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    width:82px; flex:none;
  }
  .scpa-hero-orbit-circle{
    --glow: var(--item-color, var(--scpa-accent));
    width:60px; height:60px; border-radius:50%;
    background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.06), rgba(0,0,0,.4));
    border:1.5px solid var(--glow);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    color:var(--glow);
    position:relative; z-index:2;
    box-shadow:0 0 0 0 transparent;
    animation:scpa-badge-pulse 3.2s ease-in-out infinite;
    transition:transform .4s var(--scpa-ease);
  }
  .scpa-hero-orbit-item:nth-child(1) .scpa-hero-orbit-circle{animation-delay:0s;}
  .scpa-hero-orbit-item:nth-child(3) .scpa-hero-orbit-circle{animation-delay:.5s;}
  .scpa-hero-orbit-item:nth-child(5) .scpa-hero-orbit-circle{animation-delay:1s;}
  .scpa-hero-orbit-item:nth-child(7) .scpa-hero-orbit-circle{animation-delay:1.5s;}
  .scpa-hero-orbit-item:nth-child(9) .scpa-hero-orbit-circle{animation-delay:2s;}
  @keyframes scpa-badge-pulse{
    0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--glow) 45%, transparent);}
    50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--glow) 0%, transparent);}
  }
  .scpa-hero-orbit-item:hover .scpa-hero-orbit-circle{
    transform:translateY(-5px) scale(1.08);
    background:var(--glow);
    color:#0a0a0a;
  }
  .scpa-hero-orbit-circle svg{width:22px; height:22px;}
  .scpa-hero-orbit-label{
    font-family:var(--scpa-font-mono);
    font-size:14.5px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--scpa-text-light);
    margin-bottom:5px;
  }
  .scpa-hero-orbit-desc{
    font-size:12px; line-height:1.4; color:var(--scpa-text-light-muted);
  }
  .scpa-hero-orbit-arrow{
    flex:none; align-self:flex-start;
    margin-top:22px;
    width:24px; height:14px;
    position:relative; overflow:hidden;
  }
  .scpa-hero-orbit-arrow svg{
    width:24px; height:14px; color:rgba(255,255,255,.28);
    animation:scpa-arrow-flow 1.8s ease-in-out infinite;
  }
  @keyframes scpa-arrow-flow{
    0%,100%{transform:translateX(0); opacity:.5;}
    50%{transform:translateX(4px); opacity:1;}
  }

  .scpa-hero-visual{
    position:relative;
    animation:scpa-float 7s ease-in-out infinite;
  }
  @keyframes scpa-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
  }
  .scpa-hero-visual-glow{
    position:absolute; inset:-40px;
    background:radial-gradient(50% 50% at 50% 50%, rgba(255,47,110,.35), transparent 70%);
    filter:blur(30px);
    z-index:0;
    animation:scpa-pulse 4.5s ease-in-out infinite;
  }
  @keyframes scpa-pulse{
    0%,100%{opacity:.55; transform:scale(1);}
    50%{opacity:.9; transform:scale(1.05);}
  }
  /* REPLACE the src below with your own dashboard screenshot */
  .scpa-hero-visual-frame img{
    width:150%; border-radius:12px; display:block;
  }
  .scpa-hero-chip{
    position:absolute; z-index:3;
    display:flex; align-items:center; gap:8px;
    background:rgba(20,15,15,.85);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    padding:9px 16px;
    font-family:var(--scpa-font-mono);
    font-size:16px; font-weight:600; letter-spacing:.03em;
    color:var(--scpa-text-light);
    box-shadow:0 16px 34px -14px rgba(0,0,0,.6);
  }
  .scpa-hero-chip svg{width:15px; height:15px; flex:none;}
  .scpa-hero-chip--top{
    top:-18px; left:-22px;
    color:var(--scpa-accent);
    animation:scpa-chip-float-a 5.5s ease-in-out infinite;
  }
  .scpa-hero-chip--top svg{color:var(--scpa-accent);}
  .scpa-hero-chip--bottom{
    bottom:-16px; right:-18px;
    animation:scpa-chip-float-b 6.2s ease-in-out infinite;
  }
  .scpa-hero-chip--bottom svg{color:#14e0b0;}
  .scpa-hero-chip--bottom .scpa-chip-dot{
    width:7px; height:7px; border-radius:50%; background:#14e0b0;
    box-shadow:0 0 0 3px rgba(20,224,176,.22);
  }
  @keyframes scpa-chip-float-a{
    0%,100%{transform:translateY(0) rotate(-2deg);}
    50%{transform:translateY(-9px) rotate(1deg);}
  }
  @keyframes scpa-chip-float-b{
    0%,100%{transform:translateY(0) rotate(2deg);}
    50%{transform:translateY(-8px) rotate(-1deg);}
  }

  /* ============================================================
   SECTION 02 — LAYERS (cream)
   ============================================================ */
.scpa-layers{
  background:var(--scpa-bg-cream);
  padding:34px 0;
  position:relative;
  overflow:hidden;
}
.scpa-layers::before{
  content:"";
  position:absolute; top:-120px; right:-120px; width:480px; height:480px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,47,110,.10), transparent 70%);
  pointer-events:none;
  animation:scpa-blob-breathe 8s ease-in-out infinite;
}
.scpa-layers::after{
  content:"";
  position:absolute; bottom:-140px; left:-100px; width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,138,76,.10), transparent 70%);
  pointer-events:none;
  animation:scpa-blob-breathe 9s ease-in-out infinite 1.5s;
}
@keyframes scpa-blob-breathe{
  0%,100%{opacity:.7; transform:scale(1);}
  50%{opacity:1; transform:scale(1.15);}
}
.scpa-layers-grid{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:64px; align-items:center;
}
.scpa-layers-image-wrap{
  position:relative;
}
.scpa-layers-image-glow{
  position:absolute; inset:-28px;
  background:radial-gradient(55% 55% at 50% 50%, rgba(255,47,110,.28), transparent 70%);
  filter:blur(26px);
  z-index:0;
  animation:scpa-pulse 4.5s ease-in-out infinite;
}
.scpa-layers-image{
  position:relative; z-index:1;
  border-radius:var(--scpa-radius);
  background:#fff;
  box-shadow:0 40px 70px -35px rgba(28,22,22,.25);
  padding:8px;
  transform:rotate(-1.2deg);
  transition:transform .5s var(--scpa-ease), box-shadow .5s var(--scpa-ease);
}
.scpa-layers-image::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(135deg, var(--scpa-accent) 0%, var(--scpa-accent-2) 50%, rgba(255,138,76,.2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.5;
  transition:opacity .4s var(--scpa-ease);
}
.scpa-layers-image:hover{transform:rotate(0deg) translateY(-6px); box-shadow:0 50px 90px -30px rgba(255,47,110,.3);}
.scpa-layers-image:hover::before{opacity:1;}
/* REPLACE the src below with your own dashboard screenshot */
.scpa-layers-image img{
  width:100%;
  height:520px;
  object-fit: fill;
  border-radius:14px;
  display:block;
}

.scpa-layers-chip{
  position:absolute; z-index:2;
  display:flex; align-items:center; gap:7px;
  background:rgba(20,15,15,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:8px 14px;
  font-family:var(--scpa-font-mono);
  font-size:10.5px; font-weight:600; letter-spacing:.03em;
  color:#fff;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.55);
}
.scpa-layers-chip svg{width:13px; height:13px; flex:none; color:var(--scpa-accent-2);}
.scpa-layers-chip--a{top:-14px; right:-16px; animation:scpa-chip-float-a 5.5s ease-in-out infinite;}
.scpa-layers-chip--b{bottom:-14px; left:-14px; animation:scpa-chip-float-b 6.2s ease-in-out infinite;}
.scpa-layers-chip--b .scpa-chip-dot{width:6px; height:6px; border-radius:50%; background:#14e0b0; box-shadow:0 0 0 3px rgba(20,224,176,.22);}

.scpa-layers-title{
  font-family:var(--scpa-font-display);
  font-weight:800;
  font-size: 35px;
  line-height:1.12;
  letter-spacing:-.02em;
  margin-bottom:44px;
  color:var(--scpa-text-dark);
  max-width:520px;
}
.scpa-layers-title .scpa-accent-word{
  background:linear-gradient(97deg, var(--scpa-accent), var(--scpa-accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 24px rgba(255,47,110,.35), 0 0 44px rgba(255,138,76,.18);
}
.scpa-layers-content{position:relative;}
.scpa-layers-body{display:flex; gap:28px; align-items:flex-start;}
.scpa-layers-list{position:relative; flex:1; min-width:0; display:flex; flex-direction:column; gap:12px;}
.scpa-layers-item{
  --item-color: var(--scpa-accent);
  display:flex; gap:14px; align-items:center;
  padding:10px 14px 10px 16px;
  background:#fff;
  border:2px solid color-mix(in srgb, var(--item-color) 22%, rgba(28,22,22,.08));
  border-radius:14px;
  box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
  position:relative;
  overflow:hidden;
  transform:scale(1);
  transition:transform .4s var(--scpa-ease), box-shadow .4s var(--scpa-ease), border-color .4s var(--scpa-ease);
  animation:scpa-card-spotlight 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.scpa-layers-item::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--item-color), color-mix(in srgb, var(--item-color) 40%, transparent));
}
.scpa-layers-item::after{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--item-color) 16%, transparent), transparent);
  transform:skewX(-18deg);
  pointer-events:none;
}
.scpa-layers-item:hover::after{
  animation:scpa-card-shimmer 1s ease forwards;
}
@keyframes scpa-card-shimmer{
  to{left:120%;}
}
.scpa-layers-item:hover{
  transform:translateX(6px) translateY(-3px) scale(1.02);
  box-shadow:0 24px 44px -20px color-mix(in srgb, var(--item-color) 40%, rgba(28,22,22,.28));
  border-color:color-mix(in srgb, var(--item-color) 65%, transparent);
  animation-play-state:paused;
}
@keyframes scpa-card-spotlight{
  0%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
  4%{
    transform:scale(1.035);
    box-shadow:0 0 0 5px color-mix(in srgb, var(--item-color) 18%, transparent),
               0 30px 60px -14px color-mix(in srgb, var(--item-color) 55%, rgba(28,22,22,.3));
    border-color:var(--item-color);
  }
  16%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
  100%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
}
.scpa-layers-item-icon{
  flex:none; width:48px; height:48px; border-radius:13px;
  background:linear-gradient(150deg, var(--item-color), color-mix(in srgb, var(--item-color) 65%, #000 15%));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), inset 0 -6px 10px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  position:relative; z-index:1;
  transition:transform .35s var(--scpa-ease), box-shadow .35s var(--scpa-ease);
  animation:scpa-icon-spotlight 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.scpa-layers-item-icon::before,
.scpa-layers-item-icon::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--item-color);
  opacity:0;
  animation:scpa-icon-ripple 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.scpa-layers-item-icon::after{ animation-delay:calc(var(--spot-delay, 0s) + .15s); }
.scpa-layers-item-icon svg{width:21px; height:21px; stroke-width:2;}
.scpa-layers-item:hover .scpa-layers-item-icon{
  transform:scale(1.14) rotate(-5deg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 10px 22px -6px color-mix(in srgb, var(--item-color) 70%, transparent);
  animation-play-state:paused;
}
.scpa-layers-item:hover .scpa-layers-item-icon::before,
.scpa-layers-item:hover .scpa-layers-item-icon::after{ animation-play-state:paused; opacity:0; }
@keyframes scpa-icon-spotlight{
  0%{ transform:scale(1) rotate(0deg); }
  4%{ transform:scale(1.22) rotate(-8deg); }
  16%{ transform:scale(1) rotate(0deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
@keyframes scpa-icon-ripple{
  0%{ transform:scale(1); opacity:0; }
  4%{ transform:scale(1); opacity:.7; }
  20%{ transform:scale(1.7); opacity:0; }
  100%{ transform:scale(1); opacity:0; }
}
.scpa-layers-item-title{
  font-family:var(--scpa-font-mono);
  font-size:14.5px; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--item-color);
  margin-bottom:4px;
}
.scpa-layers-item-desc{font-size:16px; line-height:1.55; color: #000; max-width:400px;}

.scpa-layers-list[data-scpa-reveal="stagger"] > .scpa-layers-item{
  transform:translateX(-26px);
}
.scpa-layers-list[data-scpa-reveal="stagger"].scpa-in > .scpa-layers-item{
  transform:translateX(0);
}

.scpa-layers-flow{
  flex:none;
  align-self:flex-start;
  background:none;
  border:none;
  box-shadow:none;
  padding:16px 16px 14px;
  width:190px;
  display:flex; flex-direction:column;
  transition:transform .4s var(--scpa-ease);
  position:relative;
  overflow:visible;
}
.scpa-layers-flow:hover{
  transform:translateY(-4px);
}
.scpa-layers-flow:hover{
  transform:translateY(-4px);
  box-shadow:0 34px 64px -26px rgba(255,47,110,.3);
}


.scpa-layers-flow-title{
  font-family:var(--scpa-font-mono);
  font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--scpa-text-dark-muted);
  margin-bottom:18px;
  display:flex; align-items:center; gap:7px;
}
.scpa-layers-flow-title svg{width:13px; height:13px; color:var(--scpa-accent); flex:none;}
.scpa-layers-flow-track{position:relative;}
.scpa-layers-flow-track::before{
  content:"";
  position:absolute; left:11px; top:6px; bottom:6px; width:3px;
  background:repeating-linear-gradient(
    180deg,
    color-mix(in srgb, var(--scpa-accent) 70%, transparent) 0px,
    color-mix(in srgb, var(--scpa-accent) 70%, transparent) 5px,
    transparent 5px,
    transparent 11px
  );
  background-size:3px 22px;
  border-radius:3px;
  animation:scpa-track-flow .9s linear infinite;
  box-shadow:0 0 14px 1px rgba(255,47,110,.35);
}
@keyframes scpa-track-flow{
  0%{background-position:0 0;}
  100%{background-position:0 22px;}
}

.scpa-layers-flow-beam,
.scpa-layers-flow-beam--b,
.scpa-layers-flow-beam--c{
  position:absolute; left:6px; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--scpa-accent) 55%, transparent 100%);
  box-shadow:0 0 18px 6px var(--scpa-accent), 0 0 0 4px rgba(255,47,110,.25);
  top:0; opacity:0;
}
.scpa-layers-flow-beam{ animation:scpa-beam-travel 2.2s linear infinite; }
.scpa-layers-flow-beam--b{ animation:scpa-beam-travel 2.2s linear infinite .7s; }
.scpa-layers-flow-beam--c{ animation:scpa-beam-travel 2.2s linear infinite 1.4s; }

@keyframes scpa-beam-travel{
  0%{top:0%; opacity:0; transform:scale(.5);}
  10%{opacity:1; transform:scale(1);}
  90%{opacity:1; transform:scale(1);}
  100%{top:96%; opacity:0; transform:scale(.5);}
}
.scpa-layers-flow-step{
  display:flex; align-items:center; gap:12px;
  font-family:var(--scpa-font-mono); font-size:16.5px; font-weight:550;
  letter-spacing:.03em; color:var(--scpa-text-dark);
  padding:30px 0; position:relative; z-index:1;
  transition:transform .3s var(--scpa-ease), color .3s var(--scpa-ease);
}
.scpa-layers-flow-step:hover{transform:translateX(3px); color:var(--step-color);}
.scpa-layers-flow-step .scpa-dot{
  width:16px; height:16px; border-radius:50%;
  background:var(--step-color, var(--scpa-accent));
  border:2px solid #fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--step-color, var(--scpa-accent)) 30%, transparent);
  flex:none;
  animation:scpa-flow-dot-pulse 3.6s ease-in-out infinite;
}
.scpa-layers-flow-step:nth-child(2) .scpa-dot{animation-delay:0s;}
.scpa-layers-flow-step:nth-child(3) .scpa-dot{animation-delay:.3s;}
.scpa-layers-flow-step:nth-child(4) .scpa-dot{animation-delay:.6s;}
.scpa-layers-flow-step:nth-child(5) .scpa-dot{animation-delay:.9s;}
.scpa-layers-flow-step:nth-child(6) .scpa-dot{animation-delay:1.2s;}
.scpa-layers-flow-step:nth-child(7) .scpa-dot{animation-delay:1.5s;}
@keyframes scpa-flow-dot-pulse{
  0%,80%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--step-color, var(--scpa-accent)) 30%, transparent); transform:scale(1);}
  15%{box-shadow:0 0 0 6px color-mix(in srgb, var(--step-color, var(--scpa-accent)) 15%, transparent); transform:scale(1.3);}
}

/* Responsive (add inside your existing @media blocks) */
@media (max-width: 980px){
  .scpa-layers-grid{grid-template-columns:1fr; gap:40px;}
  .scpa-layers-image-wrap{order:-1;}
  .scpa-layers-image{transform:none;}
  .scpa-layers-chip{display:none;}
  .scpa-layers-body{flex-direction:column;}
  .scpa-layers-flow{width:100%;}
}
@media (max-width: 640px){
  .scpa-layers-list::before{left:24px;}
}
  /* ============================================================
     SECTION 03 — ECOSYSTEM (dark)
     ============================================================ */
  .scpa-ecosystem{
    background:var(--scpa-bg-dark);
    color:var(--scpa-text-light);
    padding: 34px 0;
    position:relative;
    overflow:hidden;
  }
  .scpa-ecosystem::before{
    content:"";
    position:absolute; left:50%; top:44%; width:900px; height:900px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(255,47,110,.14), transparent 65%);
    filter:blur(10px);
    pointer-events:none;
  }
  .scpa-ecosystem-head{max-width:560px; margin:0 auto 54px; text-align:center;}
  .scpa-ecosystem-head .scpa-eyebrow{justify-content:center;}
  .scpa-ecosystem-title{font-size: 35px; line-height:1.15; color: #fff;}

.scpa-ecosystem-diagram{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  grid-template-areas:
    "top   top   top"
    "l1    img   r1"
    "l2    img   r2"
    "b1    .     b2";
  gap:8px 60px;
  max-width:1060px; margin:0 auto;
}
 .scpa-eco-node{
  --item-color: var(--scpa-accent);
  background:var(--scpa-card-dark);
  border:1.5px solid color-mix(in srgb, var(--item-color) 30%, var(--scpa-card-dark-border));
  border-radius:14px;
  padding:18px 20px;
  display:flex; gap:14px; align-items:flex-start;
  position:relative; z-index:2;
  transition:transform .4s var(--scpa-ease), border-color .4s var(--scpa-ease), box-shadow .4s var(--scpa-ease);
}
.scpa-eco-node:hover{
  transform:translateY(-5px) scale(1.02);
  border-color:var(--item-color);
  box-shadow:0 24px 46px -18px color-mix(in srgb, var(--item-color) 55%, transparent);
}
.scpa-eco-node-icon{
  flex:none; width:40px; height:40px; border-radius:11px;
  background:linear-gradient(150deg, var(--item-color), color-mix(in srgb, var(--item-color) 65%, #000 15%));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -5px 8px rgba(0,0,0,.2), 0 8px 18px -8px color-mix(in srgb, var(--item-color) 60%, transparent);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--scpa-ease), box-shadow .35s var(--scpa-ease);
}
.scpa-eco-node:hover .scpa-eco-node-icon{
  transform:scale(1.12) rotate(-5deg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 12px 24px -8px color-mix(in srgb, var(--item-color) 70%, transparent);
}
.scpa-eco-node-icon svg{width:18px; height:18px; stroke-width:2;}
.scpa-eco-node-title{
  font-family:var(--scpa-font-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--item-color);
  margin-bottom:6px;
}
.scpa-eco-node-desc{font-size:14.5px; line-height:1.55; color:var(--scpa-text-light-muted);}

  .scpa-eco-top{grid-area:top; justify-self:center; text-align:center; max-width:220px;}
  .scpa-eco-top .scpa-eco-node{flex-direction:column; align-items:center; text-align:center;}
  .scpa-eco-l1{grid-area:l1; align-self:start;}
  .scpa-eco-l2{grid-area:l2; align-self:start;}
  .scpa-eco-r1{grid-area:r1; align-self:start;}
  .scpa-eco-r2{grid-area:r2; align-self:start;}
  .scpa-eco-b1{grid-area:b1;}
  .scpa-eco-b2{grid-area:b2;}

  .scpa-eco-center{
    grid-area:img; position:relative; z-index:1;
    border-radius:18px; overflow:hidden;
    border:1px solid rgba(255,47,110,.3);
    background:#0f0b0b;
    box-shadow:0 40px 90px -30px rgba(255,47,110,.25);
    align-self:center;
  }
  /* REPLACE the src below with your own product screenshot */
  .scpa-eco-center img{width:160%; display:block;}

  .scpa-eco-lines{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;}
  .scpa-eco-lines path{
    fill:none; stroke:rgba(255,47,110,.4); stroke-width:.5;
    stroke-dasharray:100;
    stroke-dashoffset:100;
    transition:stroke-dashoffset 1.6s var(--scpa-ease);
    vector-effect:non-scaling-stroke;
  }
  .scpa-eco-pill{
    fill:none; stroke:rgba(255,47,110,.45); stroke-width:.5;
    stroke-dasharray:3 2.4;
    vector-effect:non-scaling-stroke;
  }
  .scpa-eco-dot{fill:var(--scpa-accent); opacity:0; transition:opacity .5s var(--scpa-ease) .9s;}
  .scpa-ecosystem.scpa-in .scpa-eco-lines path{stroke-dashoffset:0;}
  .scpa-ecosystem.scpa-in .scpa-eco-dot{opacity:1;}

  /* ============================================================
     SECTION 04 — EVOLVE (cream)
     ============================================================ */
 .scpa-evolve{
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(255,47,110,.16), transparent 60%),
    radial-gradient(500px 380px at 85% 15%, rgba(255,138,76,.15), transparent 60%),
    radial-gradient(550px 420px at 75% 85%, rgba(168,85,247,.13), transparent 60%),
    radial-gradient(480px 380px at 20% 85%, rgba(20,224,176,.12), transparent 60%),
    var(--mad-cream);
  background-size:200% 200%;
  animation:scpa-mesh-move 18s ease-in-out infinite;
  padding:70px 0 60px;
  position:relative;
  overflow:hidden;
}
@keyframes scpa-mesh-move{
  0%,100%{background-position:0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%;}
  50%{background-position:20% 30%, 80% 25%, 75% 70%, 25% 75%, 0% 0%;}
}
.scpa-evolve-particle{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--scpa-accent) 70%, transparent 100%);
  opacity:0; pointer-events:none; z-index:0;
  animation:scpa-particle-float linear infinite;
}
@keyframes scpa-particle-float{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  15%{opacity:.65;}
  85%{opacity:.65;}
  100%{transform:translateY(-160px) translateX(24px); opacity:0;}
}
  .scpa-evolve-head{max-width:600px; margin:0 auto 64px; text-align:center;}
  .scpa-evolve-head .scpa-eyebrow{justify-content:center;}
  .scpa-evolve-title{font-size:clamp(28px,3.4vw,40px); line-height:1.15;}

  .scpa-evolve-steps{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:28px; position:relative; margin-bottom:70px;
  }
  .scpa-evolve-steps::before{
    content:"";
    position:absolute; top:38px; left:12%; right:12%; height:1px;
    background:repeating-linear-gradient(90deg, rgba(28,22,22,.18) 0 6px, transparent 6px 12px);
    z-index:0;
  }
  .scpa-evolve-step{text-align:center; position:relative; z-index:1;}

  .scpa-evolve-steps::before{
  content:"";
  position:absolute; top:40px; left:12%; right:12%; height:3px;
  background:linear-gradient(90deg,#3b82f6,#ff2f6e,#14e0b0,#ff8a4c,#3b82f6);
  background-size:200% 100%;
  border-radius:3px;
  opacity:.9;
  box-shadow:0 0 16px 3px rgba(255,47,110,.35);
  z-index:0;
  animation:scpa-line-flow 4s linear infinite, scpa-line-glow 2.4s ease-in-out infinite;
}
@keyframes scpa-line-flow{
  0%{background-position:0% 0%;}
  100%{background-position:200% 0%;}
}
@keyframes scpa-line-glow{
  0%,100%{box-shadow:0 0 16px 3px rgba(255,47,110,.3);}
  50%{box-shadow:0 0 28px 8px rgba(255,47,110,.6);}
}
.scpa-evolve-step-icon{
  width:80px; height:80px; border-radius:50%; margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  color:#fff;
  /*transition:transform .4s ease;*/
  animation:scpa-icon-bounce 3s ease-in-out infinite;
}
.scpa-evolve-step:nth-child(1) .scpa-evolve-step-icon{
  background:linear-gradient(150deg,#3b82f6,#1d4ed8);
  box-shadow:0 12px 26px -8px rgba(59,130,246,.65);
}
.scpa-evolve-step:nth-child(2) .scpa-evolve-step-icon{
  background:linear-gradient(150deg,#ff2f6e,#c81e56);
  box-shadow:0 12px 26px -8px rgba(255,47,110,.65);
}
.scpa-evolve-step:nth-child(3) .scpa-evolve-step-icon{
  background:linear-gradient(150deg,#14e0b0,#0d9488);
  box-shadow:0 12px 26px -8px rgba(20,224,176,.65);
}
.scpa-evolve-step:nth-child(4) .scpa-evolve-step-icon{
  background:linear-gradient(150deg,#ff8a4c,#ea580c);
  box-shadow:0 12px 26px -8px rgba(255,138,76,.65);
}

.scpa-evolve-step-icon::before{
  content:"";
  position:absolute; inset:-9px; border-radius:50%;
  border:2px dashed rgba(0,0,0,.18);
  animation:scpa-ring-spin 7s linear infinite;
}
.scpa-evolve-step-icon::after{
  content:"";
  position:absolute; inset:-4px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,255,255,.5);
  animation:scpa-ring-pulse 2.4s ease-out infinite;
}
.scpa-evolve-step-icon svg{ position:relative; z-index:1; width:28px; height:28px;}

@keyframes scpa-icon-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
@keyframes scpa-ring-spin{
  to{transform:rotate(360deg);}
}
@keyframes scpa-ring-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,47,110,.4);}
  70%{box-shadow:0 0 0 16px rgba(255,47,110,0);}
  100%{box-shadow:0 0 0 0 rgba(255,47,110,0);}
}
.scpa-evolve-step:hover .scpa-evolve-step-icon{
  transform:scale(1.15) translateY(-10px);
  animation-play-state:paused;
}
  .scpa-evolve-step-label{
    font-family: 'poppins-local'; font-size:20px; font-weight:900;
    letter-spacing:.1em; text-transform:uppercase; color:var(--scpa-accent);
    margin-bottom:10px;
  }
  .scpa-evolve-step-desc{font-size:16px; line-height:1.6; color: maroon; max-width:220px; margin:0 auto;}

.scpa-evolve-quote-card{
  max-width:760px; margin:0 auto;
  background: #000;
  border:1.5px solid rgba(255,47,110,.18);
  border-radius:20px;
  padding:2px 22px 22px;
  position:relative;
  box-shadow:0 30px 60px -30px rgba(28,22,22,.3);
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
}
.scpa-evolve-quote-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit; padding:1.5px;
  background:linear-gradient(120deg,#3b82f6,#ff2f6e,#14e0b0,#ff8a4c,#3b82f6);
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:scpa-border-flow 6s linear infinite;
  opacity:.6;
}
@keyframes scpa-border-flow{
  0%{background-position:0% 50%;}
  100%{background-position:300% 50%;}
}
.scpa-evolve-quote-card:hover{
  transform:translateY(-4px);
  box-shadow:0 40px 74px -26px rgba(255,47,110,.28);
}
.scpa-evolve-quote-mark{
  width:34px; height:34px; color:var(--scpa-accent); opacity:.35;
  margin-bottom:10px; display:block;
}
.scpa-evolve-quote{
  position:relative; z-index:1;
  font-family:var(--scpa-font-display);
  font-weight:600;
  font-size:clamp(19px,2.1vw,23px);
  line-height:1.55;
  color: #fff;
  margin:0;
  border-left:none;
  padding:0;
}
.scpa-evolve-quote .scpa-accent-word{
  background:linear-gradient(97deg,var(--scpa-accent),var(--scpa-accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 980px){
    .scpa-hero-grid{grid-template-columns:1fr; gap:48px;}
    .scpa-hero-visual{order:2;}
    .scpa-hero-chip{font-size:10px; padding:7px 11px;}
    .scpa-hero-chip--top{top:-12px; left:-10px;}
    .scpa-hero-chip--bottom{bottom:-12px; right:-10px;}
    .scpa-layers-grid{grid-template-columns:1fr; gap:40px;}
    .scpa-layers-image-wrap{order:2;}
    .scpa-layers-image{transform:none;}
    .scpa-layers-chip{display:none;}
    .scpa-layers-body{flex-direction:column;}
    .scpa-layers-flow{width:100%;}
    .scpa-ecosystem-diagram{
      grid-template-columns:1fr; grid-template-areas:
        "top" "img" "l1" "r1" "l2" "r2" "b1" "b2";
    }
    .scpa-eco-center{order:-1; max-width:520px; margin:0 auto 8px;}
    .scpa-eco-lines{display:none;}
    .scpa-evolve-steps{grid-template-columns:1fr 1fr; row-gap:44px;}
    .scpa-evolve-steps::before{display:none;}
  }

  @media (max-width: 640px){
    .scpa-wrap{padding:0 20px;}
    .scpa-hero{padding:64px 0 56px;}
    .scpa-hero-orbit{flex-wrap:wrap; row-gap:24px; justify-content:flex-start;}
    .scpa-hero-orbit-arrow{display:none;}
    .scpa-hero-orbit-item{width:auto; margin-right:10px;}
    .scpa-hero-cta{gap:12px;}
    .scpa-hero-btn{padding:13px 20px; font-size:13.5px; flex:1 1 auto; justify-content:center;}
    .scpa-hero-chip{display:none;}
    .scpa-layers, .scpa-ecosystem, .scpa-evolve{padding:72px 0;}
    .scpa-layers-list::before{left:24px;}
    .scpa-evolve-steps{grid-template-columns:1fr; gap:36px;}
    .scpa-evolve-quote{font-size:18px; padding-left:18px;}
  }

/*// ==============================================================
//                data driven insights analytics
// ==============================================================*/

   :root{
    --ddia-black:#0a0a0c;
    --ddia-black2:#111114;
    --ddia-cream:#f6efe6;
    --ddia-cream2:#efe6d9;
    --ddia-pink:#ff2f5b;
    --ddia-orange:#ff7a3d;
    --ddia-grad: linear-gradient(90deg,var(--ddia-pink),var(--ddia-orange));
    --ddia-text-dark:#e9e6df;
    --ddia-text-dim:#9a968f;
    --ddia-text-light:#1a1714;
    --ddia-text-light-dim:#6b665e;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{background:var(--ddia-black);color:var(--ddia-text-dark);line-height:1.5;}
  img,svg{display:block;}
  .ddia-wrap{max-width:1200px;margin:0 auto;padding:0 48px;}
  .ddia-eyebrow22{
    display:flex;align-items:center;gap:10px;
    font-size:12px;font-weight:700;letter-spacing:.16em;
    color:#ff3860;text-transform:uppercase;margin-bottom:18px;
    margin-top: 30px;
  }
  .ddia-eyebrow22 .ddia-num{
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;border:1px solid var(--ddia-pink);border-radius:50%;
    font-size:11px;color:var(--ddia-pink);
  }
  h1,h2{
    font-weight:800;letter-spacing:-0.025em;line-height:1.06;
  }
  h1{
    font-size:50px;
    color:#ffffff;
  }

.ddia-highlight{
    background:linear-gradient(100deg,#ff3860,#ff8a65);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color: none !important;
    filter: none !important;
}

  h2{font-size:38px;color:var(--ddia-text-light);}
  .ddia-lead-dark p{color:#a7a29a;font-size:16px;max-width:420px;margin-top:18px;line-height:1.6;}
  .ddia-lead-light p{color:var(--ddia-text-light-dim);font-size:15.5px;max-width:420px;margin-top:18px;}

  @keyframes shine{
    0%{background-position:0% 50%;}
    100%{background-position:300% 50%;}
  }
  @keyframes fadeUp{
    from{opacity:0;transform:translateY(22px);}
    to{opacity:1;transform:translateY(0);}
  }
  @keyframes floatOrb{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-16px,22px) scale(1.08);}
  }
  @keyframes pulseGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(255,56,96,.35);}
    50%{box-shadow:0 0 0 10px rgba(255,56,96,0);}
  }
  .ddia-fade-in{opacity:0;animation:fadeUp .8s ease forwards;}
  .ddia-fade-in.ddia-d1{animation-delay:.05s;}
  .ddia-fade-in.ddia-d2{animation-delay:.2s;}
  .ddia-fade-in.ddia-d3{animation-delay:.35s;}
  .ddia-fade-in.ddia-d4{animation-delay:.5s;}
  .ddia-fade-in.ddia-d5{animation-delay:.65s;}

  /* ============ SECTION 1 : HERO ============ */
  .ddia-hero{
    background:
      radial-gradient(ellipse at 75% 20%, rgba(255,60,80,.10), transparent 55%),
      var(--ddia-black);
    padding:80px 0 70px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid #1c1a19;
  }
  .ddia-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;}
  .ddia-orb1{width:280px;height:280px;background:radial-gradient(circle,rgba(255,56,96,.35),transparent 70%);top:-60px;right:20%;animation:floatOrb 9s ease-in-out infinite;}
  .ddia-orb2{width:220px;height:220px;background:radial-gradient(circle,rgba(255,122,61,.28),transparent 70%);bottom:-40px;left:5%;animation:floatOrb 11s ease-in-out infinite reverse;}
  .ddia-orb3{width:180px;height:180px;background:radial-gradient(circle,rgba(255,56,96,.22),transparent 70%);top:40%;right:2%;animation:floatOrb 7s ease-in-out infinite;}
  .ddia-hero .ddia-wrap{position:relative;z-index:1;}
  .ddia-hero .ddia-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
  .ddia-hero h1{
    font-size:50px;
    font-weight:800;
    line-height:1.06;
    letter-spacing:-0.025em;
    color:#ffffff;

    /* Remove unwanted glow / blur */
    filter:none;
    text-shadow:none;
    -webkit-text-stroke:0;

    margin-bottom:16px;
}

.ddia-hero h1 .ddia-highlight{
    background:linear-gradient(
        100deg,
        #ff3860 0%,
        #ff5876 45%,
        #ff8a65 100%
    );

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

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

    filter:none;
    text-shadow:none;

    /* No shine animation */
    animation:none;
}
  .ddia-features-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;
  }
  @keyframes floatIcon{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
  }
  @keyframes spinRing{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  .ddia-feature{
    border-top:1px solid #2a2724;padding-top:20px;
    transition:transform .3s ease;
  }
  .ddia-feature:hover{transform:translateY(-6px);}
  .ddia-feature .ddia-icon-badge1{
    width:50px;height:50px;border-radius:50%;
    position:relative;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;
    background:#141014;
    animation:floatIcon 3.5s ease-in-out infinite;
  }
  .ddia-feature .ddia-icon-badge1::before{
    content:"";position:absolute;inset:-2px;border-radius:50%;
    background:conic-gradient(from 0deg,#ff3860,#ff8a65,#ff3860);
    animation:spinRing 4s linear infinite;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  }
  .ddia-feature .ddia-icon-badge1::after{
    content:"";position:absolute;inset:2px;border-radius:50%;
    background:#141014;
    box-shadow:0 0 16px 2px rgba(255,56,96,.45) inset;
  }
  .ddia-feature:nth-child(2) .ddia-icon-badge1{animation-delay:.6s;}
  .ddia-feature:nth-child(3) .ddia-icon-badge1{animation-delay:1.2s;}
  .ddia-feature:nth-child(4) .ddia-icon-badge1{animation-delay:1.8s;}
  .ddia-feature svg{width:20px;height:20px;stroke:#ff5876;margin:0;position:relative;z-index:1;}
  .ddia-feature .ddia-ftitle{font-size:12.5px;font-weight:700;letter-spacing:.09em;color:#fff;margin-bottom:8px;}
  .ddia-feature .ddia-fdesc{font-size:12.5px;color:#8b877f;line-height:1.5;}

  /* hero diagram */
  .ddia-diagram{position:relative;padding-top:6px;}
  .ddia-hero-diagram-img{margin-top: 70px;width:100%;height:auto;border-radius:16px; height: 430px;}
  .ddia-top-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .ddia-device-card{
    background:linear-gradient(160deg,#17151a,#0e0d10);
    border:1px solid #2b2730;border-radius:14px;padding:16px 12px 22px;
    text-align:center;position:relative;
  }
  .ddia-device-card .ddia-icon-circle{
    width:34px;height:34px;border-radius:50%;
    background:rgba(255,60,80,.12);
    display:flex;align-items:center;justify-content:center;margin:0 auto 10px;
  }
  .ddia-device-card .ddia-icon-circle svg{width:17px;height:17px;stroke:var(--ddia-pink);margin:0;}
  .ddia-device-card .ddia-label{font-size:10px;font-weight:700;letter-spacing:.08em;color:#e7e3dc;margin-bottom:10px;}
  .ddia-device-screen{
    height:56px;border-radius:6px;
    background:linear-gradient(160deg,#1c1a20,#131116);
    border:1px solid #2c2833;
  }
  .ddia-connector-mid{
    display:flex;justify-content:center;padding:16px 0;position:relative;
  }
  .ddia-connector-mid::before{
    content:"";position:absolute;top:0;left:50%;width:1px;height:100%;
    background:linear-gradient(var(--ddia-pink),transparent);opacity:.5;
  }
  .ddia-core-box{
    background:linear-gradient(160deg,#19161b,#0c0b0d);
    border:1px solid var(--ddia-pink);
    box-shadow:0 0 30px rgba(255,50,80,.18), inset 0 0 20px rgba(255,90,60,.05);
    border-radius:12px;text-align:center;padding:20px;
    position:relative;
  }
  .ddia-core-box .ddia-title{font-size:20px;font-weight:800;letter-spacing:.04em;color:#fff;}
  .ddia-core-box .ddia-chip{
    margin:14px auto 0;width:34px;height:22px;border-radius:5px;
    background:rgba(255,90,60,.12);border:1px solid rgba(255,90,60,.4);
    display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--ddia-orange);
  }
  .ddia-bottom-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
  .ddia-sys-card{
    background:linear-gradient(160deg,#17151a,#0e0d10);
    border:1px solid #2b2730;border-radius:12px;padding:16px 14px;
  }
  .ddia-sys-card .ddia-icon-circle{
    width:30px;height:30px;border-radius:8px;
    background:rgba(255,60,80,.12);
    display:flex;align-items:center;justify-content:center;margin-bottom:10px;
  }
  .ddia-sys-card .ddia-icon-circle svg{width:15px;height:15px;stroke:var(--ddia-pink);margin:0;}
  .ddia-sys-card .ddia-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#e7e3dc;margin-bottom:4px;}
  .ddia-sys-card .ddia-sub{font-size:10.5px;color:var(--ddia-text-dim);}

   /* ============ SECTION 2: WHAT WE CONNECT ============ */
  .ddia-connect-sec{
    background:
      radial-gradient(circle at 15% 20%, rgba(255,56,96,.10), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(255,122,61,.12), transparent 45%),
      radial-gradient(circle at 60% 10%, rgba(255,138,101,.08), transparent 40%),
      linear-gradient(155deg,#f8f1e8 0%,#f3e8db 55%,#f6ecdf 100%);
    background-size:200% 200%,200% 200%,200% 200%,100% 100%;
    animation:meshShift 18s ease-in-out infinite;
    color:var(--ddia-text-light);
    padding:70px 0;
    position:relative;
    overflow:hidden;
  }
  .ddia-connect-sec::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:radial-gradient(circle,rgba(120,90,60,.10) 1px,transparent 1.4px);
    background-size:26px 26px;
    -webkit-mask:radial-gradient(circle at 20% 30%, #000 0%, transparent 60%);
    mask:radial-gradient(circle at 20% 30%, #000 0%, transparent 60%);
  }
  @keyframes meshShift{
    0%,100%{background-position:0% 0%,100% 100%,50% 0%,0 0;}
    50%{background-position:20% 15%,80% 85%,60% 10%,0 0;}
  }
  .ddia-connect-sec .ddia-cs-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;}
  .ddia-connect-sec .ddia-cs-orb1{width:320px;height:320px;background:radial-gradient(circle,rgba(255,56,96,.16),transparent 70%);top:-80px;left:30%;animation:floatOrb 12s ease-in-out infinite;}
  .ddia-connect-sec .ddia-cs-orb2{width:260px;height:260px;background:radial-gradient(circle,rgba(255,122,61,.14),transparent 70%);bottom:-60px;right:8%;animation:floatOrb 10s ease-in-out infinite reverse;}
  .ddia-connect-sec .ddia-wrap{position:relative;z-index:1; padding: 6px;}
  .ddia-connect-sec .ddia-eyebrow{
    color:var(--ddia-pink);position:relative;
  }
  .ddia-connect-sec .ddia-eyebrow::after{
    content:"";display:inline-block;width:28px;height:1.5px;
    background:linear-gradient(90deg,var(--ddia-pink),transparent);margin-left:4px;vertical-align:middle;
  }
  .ddia-connect-sec h2{color:var(--ddia-text-light);text-shadow:0 2px 18px rgba(255,90,60,.08);}
  .ddia-connect-sec .ddia-heading-highlight{
    background:linear-gradient(100deg,#ff3860,#ff8a65);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 14px rgba(255,80,100,.35));
  }
  .ddia-connect-left{position:relative;padding-left:22px;}
  .ddia-connect-left::before{
    content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;
    background:linear-gradient(180deg,var(--ddia-pink),var(--ddia-orange));
  }
  .ddia-connect-left .ddia-lead-light p{
    position:relative;font-size:16px;line-height:1.75;color: black;
  }
 .ddia-connect-outer{
  display:grid;grid-template-columns:0.65fr 1.9fr;gap:10px;align-items:start;margin-top:10px;
}
  .ddia-connect-left .ddia-eyebrow,
  .ddia-connect-left h2,
  .ddia-connect-left .ddia-lead-light{margin-top:0;}
  .ddia-connect-grid{
    display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:40px;align-items:start;position:relative;
  }
  .ddia-connect-lines{
    position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  }
  @property --ddia-border-angle{
    syntax:'<angle>';
    inherits:false;
    initial-value:0deg;
  }
  @keyframes floatCard{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
  }
  @keyframes cardGlowPink{
    0%,100%{box-shadow:0 10px 24px rgba(255,56,96,.10);}
    50%{box-shadow:0 20px 42px rgba(255,56,96,.26);}
  }
  @keyframes cardGlowOrange{
    0%,100%{box-shadow:0 10px 24px rgba(255,122,61,.10);}
    50%{box-shadow:0 20px 42px rgba(255,122,61,.26);}
  }
  @keyframes borderRotate{
    to{--ddia-border-angle:360deg;}
  }
  @keyframes ringSpinCW{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  @keyframes ringSpinCCW{
    from{transform:rotate(0deg);}
    to{transform:rotate(-360deg);}
  }
  @keyframes iconPulseRing{
    0%,100%{opacity:.5;transform:scale(1);}
    50%{opacity:1;transform:scale(1.08);}
  }
  .ddia-side-col{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1;}
.ddia-conn-card{
  position:relative;
  background:linear-gradient(165deg,#fff7f2 0%,#ffe9ee 100%);
  border:none;border-radius:18px;padding:26px 24px 28px;min-height:132px;
  box-shadow:0 2px 8px rgba(120,90,60,.05), 0 1px 2px rgba(120,90,60,.04);
  animation:floatCard 4.5s ease-in-out infinite;
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
  overflow:hidden;
}
.ddia-side-col:first-child .ddia-conn-card{
  background:linear-gradient(165deg,#fff0f2 0%,#ffd9e0 100%);
}
.ddia-side-col:last-child .ddia-conn-card{
  background:linear-gradient(165deg,#fff3e6 0%,#ffdcbf 100%);
}
.ddia-conn-card::after{
  content:"";position:absolute;top:-40%;right:-25%;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85),transparent 70%);
  pointer-events:none;opacity:.7;
}
.ddia-conn-card .ddia-ctitle{
  font-size:13.5px;font-weight:800;letter-spacing:.03em;color:#241f1a;
  transition:color .3s ease;
}

.ddia-conn-card::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  padding:2.2px;
  background:conic-gradient(from var(--ddia-border-angle),#ff3860,#ff6f8c,#ff8a65,#ffc199,#ff8a65,#ff3860);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:borderRotate 4s linear infinite;
  pointer-events:none;
  opacity:.9;
  filter:drop-shadow(0 0 6px rgba(255,80,100,.35));
  transition:opacity .3s ease, filter .3s ease;
}
.ddia-conn-card:hover::before{
  opacity:1;
  filter:drop-shadow(0 0 12px rgba(255,80,100,.55));
}
.ddia-side-col:first-child .ddia-conn-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(255,56,96,.10), transparent 55%),
    linear-gradient(165deg,#ffffff 0%,#fff5f6 55%,#ffedf0 100%);
}
.ddia-side-col:last-child .ddia-conn-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(255,122,61,.12), transparent 55%),
    linear-gradient(165deg,#ffffff 0%,#fff7ee 55%,#ffefe0 100%);
}
.ddia-conn-card::after{
  content:"";position:absolute;top:-40%;right:-25%;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%);
  pointer-events:none;opacity:.6;
}
.ddia-conn-card:hover{
  transform:translateY(-14px) scale(1.035);
  box-shadow:0 26px 48px rgba(255,56,96,.24);
}
.ddia-side-col:last-child .ddia-conn-card:hover{
  box-shadow:0 26px 48px rgba(255,122,61,.24);
}
.ddia-conn-card:hover::before{opacity:1;}
.ddia-conn-card > *{position:relative;z-index:1;}
.ddia-side-col:first-child .ddia-conn-card:nth-child(1){animation-delay:0s,0s;}
.ddia-side-col:first-child .ddia-conn-card:nth-child(2){animation-delay:.5s,.4s;}
.ddia-side-col:first-child .ddia-conn-card:nth-child(3){animation-delay:1s,.8s;}
.ddia-side-col:last-child .ddia-conn-card:nth-child(1){animation-delay:1.5s,1.2s;}
.ddia-side-col:last-child .ddia-conn-card:nth-child(2){animation-delay:2s,1.6s;}
.ddia-side-col:last-child .ddia-conn-card:nth-child(3){animation-delay:2.5s,2s;}
.ddia-conn-card:hover{
  transform:translateY(-14px) scale(1.035);
  box-shadow:0 26px 48px rgba(255,56,96,.24);
}
.ddia-conn-card .ddia-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.ddia-conn-card:hover .ddia-ctitle{color:var(--ddia-pink);}
.ddia-side-col:last-child .ddia-conn-card:hover .ddia-ctitle{color:var(--ddia-orange);}
.ddia-conn-card .ddia-cdesc{font-size:12.5px;color:#847c70;line-height:1.65;}
  .ddia-conn-card .ddia-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}

.ddia-conn-card:hover .ddia-ic.ddia-pink{box-shadow:0 10px 22px rgba(255,56,96,.38);}
.ddia-conn-card:hover .ddia-ic.ddia-orange{box-shadow:0 10px 22px rgba(255,122,61,.38);}
.ddia-conn-card .ddia-ic svg{width:20px;height:20px;margin:0;position:relative;z-index:1;}
.ddia-conn-card .ddia-ic.ddia-pink svg{stroke:var(--ddia-pink);}
.ddia-conn-card .ddia-ic.ddia-orange svg{stroke:var(--ddia-orange);}
  .ddia-conn-card .ddia-ctitle{font-size:13px;font-weight:700;letter-spacing:.04em;}
  .ddia-conn-card .ddia-cdesc{font-size:13.5px;color: black;line-height:1.6;}

.ddia-conn-card .ddia-ic{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s ease, box-shadow .35s ease;
  position:relative;
}
.ddia-conn-card .ddia-ic::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid currentColor;opacity:.3;
  animation:iconPulseRing 2.6s ease-in-out infinite;
}
.ddia-conn-card .ddia-ic::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.06);
  pointer-events:none;
}
.ddia-conn-card .ddia-ic.ddia-pink{
  background:linear-gradient(150deg,#ffeef0 0%,#ffd2da 55%,#ffb8c6 100%);
  color:var(--ddia-pink);
  box-shadow:0 6px 14px rgba(255,56,96,.22);
}
.ddia-conn-card .ddia-ic.ddia-orange{
  background:linear-gradient(150deg,#fff1e6 0%,#ffdcc4 55%,#ffc39a 100%);
  color:var(--ddia-orange);
  box-shadow:0 6px 14px rgba(255,122,61,.22);
}
.ddia-conn-card:hover .ddia-ic{
  transform:rotate(-10deg) scale(1.16);
}
  .ddia-hub-wrap{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:340px;align-self:center;z-index:1;}
  .ddia-hub-ring{
    position:absolute;border-radius:50%;border:1px dashed #e3b7a9;
  }
  .ddia-ring1{width:340px;height:340px;animation:ringSpinCW 30s linear infinite;}
  .ddia-ring2{width:260px;height:260px;border-style:dotted;animation:ringSpinCCW 22s linear infinite;}
  .ddia-hub-core{
  position:relative;z-index:2;border-radius:50%;
  width:250px;height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(160,40,40,.12);border:1px solid #f0d9cb;
  animation:cardGlowPink 3s ease-in-out infinite;
}
.ddia-hub-core .ddia-stack-img{
  width:970px;height:auto;
  max-width:100%;
  object-fit:contain;
  margin-bottom:8px;
}
  .ddia-hub-core .ddia-htitle{font-size:16px;font-weight:800;letter-spacing:.04em;}
  .ddia-hub-core .ddia-hsub{font-size:10.5px;color:var(--ddia-text-light-dim);margin-top:2px;}

  /* ============ SECTION 3: ANALYTICS ENGINE ============ */
/* ==========================================================
   SECTION 3: THE ANALYTICS ENGINE
   All classes prefixed with "eng-" so nothing clashes with
   other sections/stylesheets on the page.
   ========================================================== */

* { box-sizing: border-box; }

body{
  margin:0;
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  background:#0a0a0a;
}

.ddia-eng-sec{
  background:#0a0a0a;
  color:#fff;
  padding:80px 0;
  overflow:hidden;
}

.ddia-eng-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
}

.ddia-eng-grid{
  display:grid;
  grid-template-columns:0.8fr 1.4fr;
  gap:40px;
  align-items:center;
}

/* -------------------- LEFT -------------------- */
.ddia-eng-left{
  border-left:2px solid #ff2d55;
  padding-left:24px;
}

.ddia-eng-eyebrow{
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
  color:#fff;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.ddia-eng-eyebrow::after{
  content:'';
  width:30px;
  height:1px;
  background:#ff2d55;
}

.ddia-eng-left h2{
  font-size:40px;
  font-weight:800;
  line-height:1.25;
  margin:0 0 20px;
  color: #fff;
}

.ddia-eng-accent{
  background:linear-gradient(90deg,#ff2d55,#ff7a3d);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.ddia-eng-lead{
  font-size:18px;
  line-height:1.7;
  color: #e5e5e5;
  max-width:360px;
  margin:0;
}

/* -------------------- RIGHT: cards + orbit -------------------- */
.ddia-eng-right{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}

.ddia-eng-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.ddia-eng-card{
  border:1px solid #4a1622;
  border-radius:12px;
  padding:16px 18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:rgba(255,45,85,.04);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.ddia-eng-card:hover{
  border-color:#ff2d55;
  background:rgba(255,45,85,.08);
  transform:translateY(-2px);
}

.ddia-eng-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #ff2d55;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ddia-eng-icon svg{
  width:18px;
  height:18px;
  stroke:#ff2d55;
  margin:0;
}

.ddia-eng-ctext h4{
  font-size:13px;
  font-weight:800;
  letter-spacing:.05em;
  margin:0 0 6px;
  color:#fff;
}
.ddia-eng-ctext p{
  font-size:12px;
  line-height:1.6;
  color:#9a9a9a;
  margin:0;
}

/* -------------------- ORBIT (image + connecting lines) -------------------- */
.ddia-eng-orbit{
  width:260px;
  height:260px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}

.ddia-eng-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  overflow:visible;
}
.ddia-eng-lines path{
  fill:none;
  stroke:#ff2d55;
  stroke-width:1.4;
  stroke-dasharray:4 4;
  opacity:.59;
  filter:drop-shadow(0 0 3px rgba(255,45,85,.6));
  animation:eng-dash 22s linear infinite;
}
@keyframes eng-dash{
  to{ stroke-dashoffset:-200; }
}

.ddia-eng-orbit-glow{
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,45,85,.35) 0%,rgba(255,45,85,0) 70%);
  z-index:0;
  animation:eng-pulse 4s ease-in-out infinite;
}
@keyframes eng-pulse{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}

.ddia-eng-orbit-img{
  width:260px;
  height:260px;
  object-fit:contain;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 0 25px rgba(255,45,85,.55));
}

/* fallback shown via JS if the image fails to load */
.ddia-eng-orbit-fallback{
  position:relative;
  z-index:2;
  width:110px;
  height:110px;
  border-radius:20px;
  background:linear-gradient(145deg,#1a1a2e,#0d0d1a);
  border:1px solid #ff2d55;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:0 0 30px rgba(255,45,85,.45);
}
.ddia-eng-orbit-fallback svg{
  width:34px;
  height:34px;
  stroke:#00d4ff;
  margin:0;
}
.ddia-eng-orbit-fallback span{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:#00d4ff;
  text-shadow:0 0 10px rgba(0,212,255,.8);
}

/* -------------------- STATS / TECH STACK ROW -------------------- */
.ddia-eng-stats{
  margin-top:56px;
  border:1px solid #ff2d55;
  border-radius:100px;
  padding:18px 36px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:36px;
  background:rgba(255,255,255,.02);
}

.ddia-eng-stat{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:#e5e5e5;
  white-space:nowrap;
}
.ddia-eng-stat svg{
  width:16px;
  height:16px;
  stroke:#ff2d55;
  margin:0;
  flex:none;
}

/* reveal-on-scroll state, toggled by JS via IntersectionObserver */
.ddia-eng-card,
.ddia-eng-orbit,
.ddia-eng-stat{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.ddia-eng-card.ddia-is-visible,
.ddia-eng-orbit.ddia-is-visible,
.ddia-eng-stat.ddia-is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .ddia-eng-wrap{padding:0 24px;}
  .ddia-eng-grid{grid-template-columns:1fr;gap:40px;}
  .ddia-eng-left{
    border-left:none;
    padding-left:0;
    border-top:2px solid #ff2d55;
    padding-top:20px;
  }
  .ddia-eng-right{grid-template-columns:1fr;justify-items:center;}
  .ddia-eng-orbit{order:-1;margin-bottom:20px;}
  .ddia-eng-col{width:100%;max-width:420px;}
  .ddia-eng-stats{
    border-radius:20px;
    gap:20px;
    padding:20px;
    justify-content:flex-start;
  }
}

@media(max-width:600px){
  .ddia-eng-left h2{font-size:27px;}
  .ddia-eng-stats{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
  }
  .ddia-eng-stats::-webkit-scrollbar{display:none;}
}
/* ============ SECTION 4: PROCESS (self-contained, no shared class names) ============ */
.ddia-proc-sec{
  background: linear-gradient(160deg, var(--ddia-cream) 0%, #f9d9e4 50%, #fce0c8 100%);
  color:#2b2b2b;
  padding:70px 0 60px;
  overflow:hidden;
}

.ddia-proc-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 40px;
  display:block; /* explicitly NOT grid, avoids any inherited grid rule */
}

.ddia-proc-eyebrow{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:#ff4f79;
  margin-bottom:14px;
}
.ddia-proc-num{margin-right:6px;}

/* Heading row: h2 left, lead paragraph right */
.ddia-proc-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  width:100%;
}
.ddia-proc-head h2{
  font-size:32px;
  line-height:1.25;
  margin:0;
  color:#1a1a1a;
  font-weight:800;
}
.ddia-proc-lead{
  font-size:17px;
  line-height:1.6;
  color: black;
  margin:0;
  max-width:420px;
}

/* Steps row — always full width, never confined by proc-head grid */
.ddia-proc-steps{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:start;
  width:100%;
  margin-top:60px;
}

.ddia-proc-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 10px;
}

.ddia-proc-circle{
  width:84px;
  height:84px;
  border-radius:50%;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.18);
  background: linear-gradient(135deg, var(--ddia-pink), #f6923a);
}
.ddia-proc-circle svg{
  width:48px;
  height:48px;
  margin:0;
  display:block;
}

.ddia-proc-step:nth-child(odd) .ddia-proc-circle{background:#ffe0e5;}
.ddia-proc-step:nth-child(odd) .ddia-proc-circle svg{stroke:#ff4f79;}
.ddia-proc-step:nth-child(even) .ddia-proc-circle{background:#ffe6d6;}
.ddia-proc-step:nth-child(even) .ddia-proc-circle svg{stroke:#ff8a3d;}

.ddia-proc-snum{
  position:absolute;
  top:-4px;
  right:-2px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#ff4f79;
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.ddia-proc-step:nth-child(even) .ddia-proc-snum{background:#ff8a3d;}

.ddia-proc-label{
  font-size:15px;
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:10px;
  color:#1a1a1a;
}

.ddia-proc-desc{
  font-size:13.5px;
  color: maroon;
  line-height:1.6;
  max-width:180px;
  margin:0 auto;
  margin-bottom: 30px;
}

.ddia-proc-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  height:84px;
  color:#ff4f79;
  font-size:35px;
  font-weight:600;
}


/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .ddia-proc-wrap{padding:0 24px;}
  .ddia-proc-head{grid-template-columns:1fr;gap:20px;}
  .ddia-proc-head h2{font-size:27px;}

  .ddia-proc-steps{
    display:flex;
    flex-direction:column;
    gap:32px;
    margin-top:40px;
  }
  .ddia-proc-arrow{display:none;}
  .ddia-proc-desc{max-width:280px;}

  .ddia-proc-closing{flex-direction:column;text-align:center;}
  .ddia-proc-closing p{text-align:center;}
}

/* =========================================================
   COMPLETE MOBILE RESPONSIVE — FINAL
   Desktop styles above remain unchanged.
   ========================================================= */
@media (max-width:768px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  img,svg{max-width:100%;}
  .ddia-wrap,.ddia-eng-wrap,.ddia-proc-wrap{
    width:100%;
    max-width:100%;
    padding-left:18px;
    padding-right:18px;
  }

  /* Section 1 — Hero */
  .ddia-hero{padding:54px 0 48px;}
  .ddia-hero .ddia-wrap{
    display:flex;
    flex-direction:column;
    gap:34px;
    align-items:stretch;
  }
  .ddia-hero h1{
    font-size:clamp(34px,10vw,44px);
    line-height:1.1;
    overflow-wrap:anywhere;
  }
  .ddia-lead-dark p{
    max-width:100%;
    font-size:15px;
    line-height:1.7;
  }
  .ddia-features-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 16px;
    margin-top:34px;
  }
  .ddia-feature{min-width:0;}
  .ddia-diagram{width:100%;padding-top:0;}
  .ddia-hero-diagram-img{
    width:100%;
    height:auto;
    max-height:none;
    margin-top:0;
    border-radius:12px;
    object-fit:contain;
  }
  .ddia-orb1{width:190px;height:190px;right:-50px;}
  .ddia-orb2{width:160px;height:160px;left:-55px;}
  .ddia-orb3{display:none;}

  /* Section 2 — What We Connect */
  .ddia-connect-sec{padding:52px 0;}
  .ddia-connect-sec .ddia-wrap{padding-left:18px;padding-right:18px;}
  .ddia-connect-outer{
    display:flex;
    flex-direction:column;
    gap:34px;
    margin-top:0;
  }
  .ddia-connect-left{width:100%;padding-left:16px;}
  .ddia-connect-sec h2{
    font-size:clamp(29px,8.5vw,38px);
    line-height:1.15;
  }
  .ddia-connect-left .ddia-lead-light p{
    max-width:100%;
    font-size:15px;
    line-height:1.7;
  }
  .ddia-connect-grid{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:20px;
  }
  .ddia-connect-lines{display:none;}
  .ddia-side-col{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }
  .ddia-conn-card{
    width:100%;
    min-height:0;
    padding:20px 18px;
    animation:none;
  }
  .ddia-conn-card:hover{transform:none;}
  .ddia-hub-wrap{
    order:-1;
    width:100%;
    min-height:270px;
    height:270px;
    overflow:hidden;
  }
  .ddia-ring1{width:260px;height:260px;}
  .ddia-ring2{width:205px;height:205px;}
  .ddia-hub-core{width:190px;height:190px;}
  .ddia-hub-core .ddia-stack-img{
    width:100%;
    max-width:190px;
    height:auto;
    margin:0;
  }

  /* Section 3 — Analytics Engine */
  .ddia-eng-sec{padding:54px 0;}
  .ddia-eng-grid{gap:34px;}
  .ddia-eng-left h2{
    font-size:clamp(29px,8.5vw,38px);
    line-height:1.2;
  }
  .ddia-eng-lead{max-width:100%;font-size:15px;}
  .ddia-eng-right{width:100%;gap:22px;}
  .ddia-eng-col{width:100%;max-width:none;gap:14px;}
  .ddia-eng-card{width:100%;padding:15px;}
  .ddia-eng-orbit{
    width:min(260px,78vw);
    height:min(260px,78vw);
    margin-bottom:8px;
  }
  .ddia-eng-orbit-img{width:100%;height:100%;}
  .ddia-eng-orbit-glow{width:70%;height:70%;}
  .ddia-eng-stats{
    width:100%;
    margin-top:36px;
    padding:18px;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    overflow:visible;
    border-radius:18px;
  }
  .ddia-eng-stat{white-space:normal;}

  /* Section 4 — Process */
  .ddia-proc-sec{padding:52px 0 42px;}
  .ddia-proc-head{gap:16px;}
  .ddia-proc-head h2{
    font-size:clamp(28px,8vw,34px);
    line-height:1.2;
  }
  .ddia-proc-lead{max-width:100%;font-size:15px;}
  .ddia-proc-steps{gap:26px;margin-top:34px;}
  .ddia-proc-step{width:100%;padding:0;}
  .ddia-proc-circle{width:78px;height:78px;margin-bottom:14px;}
  .ddia-proc-circle svg{width:42px;height:42px;}
  .ddia-proc-desc{
    max-width:320px;
    margin-bottom:0;
    font-size:13.5px;
  }
}

@media (max-width:480px){
  .ddia-wrap,.ddia-eng-wrap,.ddia-proc-wrap,
  .ddia-connect-sec .ddia-wrap{
    padding-left:14px;
    padding-right:14px;
  }
  .ddia-hero{padding:44px 0 40px;}
  .ddia-hero h1{font-size:32px;}
  .ddia-eyebrow22{font-size:10.5px;letter-spacing:.12em;}
  .ddia-features-row{gap:22px 12px;}
  .ddia-feature .ddia-icon-badge1{width:44px;height:44px;}
  .ddia-feature .ddia-ftitle,.ddia-feature .ddia-fdesc{font-size:12px;}
  .ddia-connect-sec,.ddia-eng-sec{padding:44px 0;}
  .ddia-conn-card .ddia-top{gap:10px;}
  .ddia-conn-card .ddia-ic{width:42px;height:42px;}
  .ddia-conn-card .ddia-cdesc{font-size:13px;}
  .ddia-hub-wrap{height:240px;min-height:240px;}
  .ddia-ring1{width:230px;height:230px;}
  .ddia-ring2{width:180px;height:180px;}
  .ddia-hub-core{width:165px;height:165px;}
  .ddia-hub-core .ddia-stack-img{max-width:165px;}
  .ddia-eng-card{gap:10px;padding:14px 12px;}
  .ddia-eng-ctext p{font-size:11.5px;}
  .ddia-proc-sec{padding:44px 0 38px;}
}

@media (prefers-reduced-motion:reduce){
  .ddia-hero *,
  .ddia-connect-sec *,
  .ddia-eng-sec *,
  .ddia-proc-sec *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   DATA-DRIVEN INSIGHTS — QUOTE + INLINE REVEAL
   ============================================================ */

[data-ddia-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}

[data-ddia-reveal].ddia-is-visible{
  opacity:1;
  transform:translateY(0);
}

.ddia-svc-evolve-quote-card{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:980px;
  margin:52px auto 0;
  padding:23px 28px 25px;
  overflow:hidden;
  text-align:center;
  background:#000;
  border:1px solid rgba(255,47,91,.15);
  border-radius:24px;
  box-shadow:0 24px 65px rgba(60,30,35,.1),0 8px 22px rgba(255,47,91,.07);
  transition:opacity .7s ease,transform .7s ease,box-shadow .35s ease,border-color .35s ease;
}

.ddia-svc-evolve-quote-card::before,
.ddia-svc-evolve-quote-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:260px;
  height:260px;
  border-radius:50%;
  pointer-events:none;
}

.ddia-svc-evolve-quote-card::before{
  top:-130px;
  left:-100px;
  background:radial-gradient(circle,rgba(255,47,91,.17),transparent 70%);
}

.ddia-svc-evolve-quote-card::after{
  right:-100px;
  bottom:-140px;
  background:radial-gradient(circle,rgba(255,122,61,.16),transparent 70%);
}

.ddia-svc-evolve-quote-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,47,91,.3);
  box-shadow:0 30px 70px rgba(60,30,35,.14),0 12px 28px rgba(255,47,91,.1);
}

.ddia-svc-evolve-quote-card.ddia-is-visible:hover{
  transform:translateY(-5px);
}

.ddia-svc-evolve-quote-mark{
  display:block;
  width:44px;
  height:44px;
  margin:0 auto 18px;
  color:var(--ddia-pink);
  filter:drop-shadow(0 7px 15px rgba(255,47,91,.2));
}

.ddia-svc-evolve-quote{
  max-width:820px;
  margin:0 auto;
  color:#fff;
  font-size:clamp(19px,2vw,28px);
  font-weight:600;
  line-height:1.55;
  letter-spacing:-.35px;
}

.ddia-svc-accent-word{
  color:transparent;
  background:linear-gradient(90deg,var(--ddia-pink),var(--ddia-orange));
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

@media (max-width:768px){
  .ddia-svc-evolve-quote-card{
    max-width:100%;
    margin-top:40px;
    padding:36px 28px 34px;
    border-radius:20px;
  }

  .ddia-svc-evolve-quote-mark{
    width:38px;
    height:38px;
    margin-bottom:16px;
  }

  .ddia-svc-evolve-quote{
    font-size:19px;
  }
}

@media (max-width:480px){
  .ddia-svc-evolve-quote-card{
    margin-top:34px;
    padding:30px 18px 28px;
    border-radius:17px;
  }

  .ddia-svc-evolve-quote-mark{
    width:33px;
    height:33px;
    margin-bottom:14px;
  }

  .ddia-svc-evolve-quote{
    font-size:16.5px;
    line-height:1.6;
  }
}

@media (prefers-reduced-motion:reduce){
  [data-ddia-reveal],
  .ddia-svc-evolve-quote-card{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

















/*===========================================================
                  Digital Transforamtion
===========================================================*/



:root{
    --dt-dark:#0b0710;
    --dt-dark2:#120a18;
    --dt-pink:#ff2d78;
    --dt-orange:#ff7a3d;
    --dt-gradient: linear-gradient(90deg,var(--dt-pink),var(--dt-orange));
    --dt-light:#f7f5f8;
    --dt-white:#ffffff;
    --dt-text:#17121f;
    --dt-muted:#645f70;
    --dt-text-light:#ffffff;
    --dt-text-light-muted:#bdb6c9;
    --dt-border:#eceaf0;
    --dt-radius:16px;
    --dt-max:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Poppins',Arial,Helvetica,sans-serif;
    background:var(--dt-light);
    color:var(--dt-text);
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  .dt-container{max-width:var(--dt-max);margin:0 auto;padding:0 40px;}
  h1,h2,h3,h4{font-weight:800;letter-spacing:-0.01em;}
  .dt-accent{background:var(--dt-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}

  .dt-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--dt-pink);font-size:12px;font-weight:700;letter-spacing:1.2px;
    border:1px solid rgba(255,45,120,.4);
    padding:6px 14px;border-radius:100px;
    margin-bottom:20px;
    margin-top: 30px;
  }
  .dt-eyebrow.dt-plain{border:none;padding:0;}
  .dt-eyebrow.dt-plain::after{content:"";flex:1;max-width:50px;height:1px;background:var(--dt-pink);opacity:.6;}

  /* ================= HERO ================= */
  .dt-hero{
    background:radial-gradient(ellipse at 80% 20%, #2a0f22 0%, var(--dt-dark) 55%);
    padding:70px 0 60px;
    overflow:hidden;
  }
  .dt-hero-grid{
    display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center;
  }
  .dt-hero-content h1{
    font-size:49px;line-height:1.14;color:var(--dt-text-light);margin-bottom:20px;
  }
  .dt-hero-content h1 span{
    background: linear-gradient(90deg, var(--dt-pink), var(--dt-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
  }
  .dt-hero-content p{
    color:var(--dt-text-light-muted);font-size:15.5px;line-height:1.75;max-width:480px;margin-bottom:30px;
  }
  .dt-hero-ctas{display:flex;gap:14px;margin-bottom:44px;flex-wrap:wrap;}
  .dt-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 26px;border-radius:100px;
    font-weight:600;font-size:14.5px;
    transition:.25s;
    border:1.5px solid transparent;
  }
  .dt-btn-primary{
    background:var(--dt-gradient);color:#fff;
    box-shadow:0 10px 30px rgba(255,45,120,.35);
  }
  .dt-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,45,120,.5);}
  .dt-btn-outline{
    background:transparent;color:#fff;border-color:rgba(255,255,255,.25);
  }
  .dt-btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.06);}

  .dt-stats{display:flex;gap:40px;flex-wrap:wrap;}
  .dt-stat{display:flex;align-items:center;gap:12px;}
  .dt-stat-icon{
    width:42px;height:42px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,45,120,.12);color:var(--dt-pink);font-size:18px;
  }
  .dt-stat strong{display:block;font-size:20px;color:#fff;font-weight:800;line-height:1.1;}
  .dt-stat span{font-size:12.5px;color:#fff;font-weight:500;}
  .dt-hero-img{
    width: 130%;
    max-width: 680px;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.4));
  }

  .dt-hero-visual{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;}
  .dt-hero-orbit-icon{
    position:absolute;width:52px;height:52px;border-radius:14px;
    background:#1c1226;border:1px solid rgba(255,45,120,.35);
    display:flex;align-items:center;justify-content:center;
    color:var(--dt-pink);font-size:20px;
    box-shadow:0 12px 30px rgba(0,0,0,.4);
    animation:dtFloat 4.5s ease-in-out infinite;
  }
  .dt-hero-orbit-icon.dt-o1{top:8%; left:2%; animation-delay:0s;}
  .dt-hero-orbit-icon.dt-o2{top:2%; right:8%; animation-delay:.8s;}
  .dt-hero-orbit-icon.dt-o3{bottom:14%; left:-2%; animation-delay:1.6s;}
  .dt-hero-orbit-icon.dt-o4{bottom:6%; right:0%; animation-delay:2.4s;}
  @keyframes dtFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
  }

  /* ================= SERVICES ================= */
.dt-services{
  background: linear-gradient(180deg, #ffffff 0%, #fdf7f9 100%);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.dt-services::before{
  content:"";
  position:absolute; top:-15%; left:-10%;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.dt-services::after{
  content:"";
  position:absolute; bottom:-15%; right:-8%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,122,61,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.dt-services .dt-container{position:relative; z-index:1;}

.dt-services-head{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:50px;
}
.dt-services-head h2{font-size:40px;line-height:1.25;}
.dt-services-head .dt-lead{color:var(--dt-muted);font-size:16.5px;line-height:1.8;padding-bottom:4px;}

.dt-marquee{
  overflow: hidden;
  position: relative;
  padding: 30px 0 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.dt-service-grid{
  display:flex;
  gap:22px;
  width:max-content;
  perspective: 1200px;
}

.dt-service-card{
  --card-color: var(--dt-pink);
  background:#fff;
  border:1px solid var(--dt-border);
  border-radius:20px;
  padding:30px 24px;
  position:relative;
  overflow:hidden;
  width: 240px;
  flex: 0 0 260px;
  transform-style: preserve-3d;
  transition: box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
.dt-service-card:nth-child(5n+1){ --card-color:#ff2d78; }
.dt-service-card:nth-child(5n+2){ --card-color:#8b5cf6; }
.dt-service-card:nth-child(5n+3){ --card-color:#3ba7ff; }
.dt-service-card:nth-child(5n+4){ --card-color:#2dd4c7; }
.dt-service-card:nth-child(5n+5){ --card-color:#ffb020; }

.dt-service-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--card-color), transparent);
}
.dt-service-card:hover{
  box-shadow: 0 30px 50px color-mix(in srgb, var(--card-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--card-color) 35%, transparent);
}

.dt-marquee-dots{display:flex;justify-content:center;gap:8px;margin-top:26px;}
.dt-marquee-dot{width:8px;height:8px;border-radius:50%;background: var(--dt-border);transition: all .3s ease;}
.dt-marquee-dot.dt-dot-active{width:26px;border-radius:5px;background: var(--dt-gradient);}

.dt-service-num{
  font-size:26px;font-weight:800;
  color: color-mix(in srgb, var(--card-color) 20%, white);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--card-color) 55%, transparent);
  margin-bottom:4px;line-height:1;
  transform: translateZ(25px);
  transition: text-shadow .3s ease, color .3s ease;
}
.dt-service-card.dt-card-focused .dt-service-num{
  color: var(--card-color);
  text-shadow: 0 0 18px color-mix(in srgb, var(--card-color) 60%, transparent);
}
.dt-service-icon{
  width:48px;height:48px;border-radius:15px;
  background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 55%, var(--dt-orange)));
  display:flex;align-items:center;justify-content:center;
  color: whitesmoke;font-size:22px;margin-bottom:16px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 45%, transparent);
  transition: transform .3s ease;
  transform: translateZ(35px);
}
.dt-service-card:hover .dt-service-icon{transform: translateZ(35px) scale(1.12) rotate(-8deg);}
.dt-service-card h3{font-size:16px;line-height:1.28;margin-bottom:6px;color:var(--dt-text);min-height:0;transform: translateZ(20px);}
.dt-service-card ul{margin-bottom:8px; transform: translateZ(15px);}
.dt-service-card li{font-size:13.5px;color: black;line-height:1.55;padding-left:16px;position:relative;}
.dt-service-card li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background: var(--card-color);}
.dt-service-link{font-size:12.5px;font-weight:700;color:var(--card-color);display:inline-flex;align-items:center;gap:6px;transform: translateZ(20px);}
.dt-service-link svg{width:13px;height:13px;transition:.2s;}
.dt-service-card:hover .dt-service-link svg{transform:translateX(4px);}

@media (prefers-reduced-motion: reduce){ .dt-service-grid{ animation:none !important; } }

  /* ================= TECH STACK ================= */
 .dt-tech{background: var(--dt-dark);padding: 70px 0;color: #fff;position: relative;overflow: hidden;}
.dt-terminal{background:#0f0a17; border:1px solid rgba(255,45,120,.25); border-radius:12px;padding:16px 20px; max-width:520px; margin-bottom:40px; font-family:'Poppins';}
.dt-terminal-bar{display:flex; gap:6px; margin-bottom:12px;}
.dt-terminal-bar span{width:9px;height:9px;border-radius:50%;background:#444;}
.dt-terminal-body{font-size:13px; color:#3ddc84;}
.dt-terminal-prompt{color:var(--dt-pink); margin-right:8px;}
.dt-cursor{animation: dtBlink 1s step-end infinite;}
@keyframes dtBlink{50%{opacity:0;}}

.dt-tech-grid{perspective: 1000px;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;}
.dt-tech-col{transform: translateZ(0) rotateX(2deg);transition: transform .3s ease;}
.dt-tech-col:hover{transform: translateZ(20px) rotateX(0deg) translateY(-4px);}
.dt-tech-icon{ transition: transform .4s cubic-bezier(.34,1.56,.64,1); }

.dt-tech-ticker-wrap{overflow:hidden; margin-top:40px; border-top:1px solid rgba(255,255,255,.08); padding-top:20px; width: 100%}
.dt-tech-ticker{display:flex; gap:14px; width:max-content; animation: dtTicker 20s linear infinite; font-size:16px; color:var(--dt-text-light-muted); white-space: nowrap;}
.dt-tech-ticker span{margin-right: 6px;}
.dt-tech-ticker span:nth-child(odd){color:var(--dt-pink); font-weight:600;}
@keyframes dtTicker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

.dt-tech::before{
  content:"";position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,45,120,.18) 1px, transparent 1px);
  background-size: 34px 34px;opacity:.4;z-index:0;
  animation: dtDotsDrift 18s linear infinite;
}
.dt-tech .dt-container{ position:relative; z-index:1; }
@keyframes dtDotsDrift{ from{ background-position: 0 0; } to{ background-position: 68px 68px; } }
.dt-tech::after{
  content:"";position:absolute; top:-10%; right:-8%;width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,122,61,.14), transparent 70%);filter: blur(20px);z-index:0;
}
@keyframes dtTechIn{ from{ opacity:0; transform: translateY(26px); } to{ opacity:1; transform: translateY(0); } }
.dt-tech-col{opacity:0;animation: dtTechIn .6s ease forwards;}
.dt-tech-col:nth-child(1){ animation-delay:.05s; }
.dt-tech-col:nth-child(2){ animation-delay:.15s; }
.dt-tech-col:nth-child(3){ animation-delay:.25s; }
.dt-tech-col:nth-child(4){ animation-delay:.35s; }
.dt-tech-col:nth-child(5){ animation-delay:.45s; }
.dt-tech-col:nth-child(6){ animation-delay:.55s; }

.dt-tech-top{display:grid;grid-template-columns:0.85fr 1.15fr;gap:50px;align-items:center;margin-bottom:30px;color: #fff;}
.dt-tech-top h2{font-size:35px;line-height:1.28; color: #fff;}
.dt-tech-top p{color: whitesmoke;font-size:14.5px;line-height:1.8;}
.dt-terminal-body{font-size:13px; color:#3ddc84; min-height:18px;}

  .dt-tech-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:44px;}
  .dt-tech-col-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
  .dt-tech-icon{
    width:36px;height:36px;border-radius:9px;
    background:rgba(255,45,120,.12);border:1px solid rgba(255,45,120,.3);
    display:flex;align-items:center;justify-content:center;color:var(--dt-pink);font-size:17px;
    flex-shrink:0;
  }
  .dt-tech-col-head h4{font-size:14px;font-weight:700;color:#fff;line-height:1.35;}
 .dt-tech-col li{font-size:14px;color: whitesmoke;line-height:2;}

  /* ================= INDUSTRIES ================= */
.dt-industries{background: linear-gradient(180deg, #ffffff 0%, #fdf2f6 100%);padding: 70px 0;position: relative;overflow: hidden;}
.dt-industries::before{
  content:"";position:absolute; top:-15%; left:-8%;width:400px; height:400px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.14), transparent 70%);filter: blur(20px); z-index:0;
  animation: dtBlobFloat1 10s ease-in-out infinite;
}
.dt-industries::after{
  content:"";position:absolute; bottom:-15%; right:-8%;width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(139,92,246,.13), transparent 70%);filter: blur(20px); z-index:0;
  animation: dtBlobFloat2 12s ease-in-out infinite;
}
@keyframes dtBlobFloat1{0%,100%{ transform: translate(0,0) scale(1); }50%{ transform: translate(30px,-20px) scale(1.1); }}
@keyframes dtBlobFloat2{0%,100%{ transform: translate(0,0) scale(1); }50%{ transform: translate(-25px,25px) scale(1.15); }}
.dt-industries .dt-container{ position:relative; z-index:1; }

.dt-industries-top{text-align:center;display:block;margin-bottom:50px;}
.dt-industries-top h2{font-size:32px;line-height:1.3;max-width:600px;margin:0 auto;color:#000;}
.dt-industries-top .dt-rule{margin:18px auto 0;}

.dt-ind-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:16px;}
.dt-ind-card{
  perspective: 1000px;height:210px;position: relative;border-radius: 14px;cursor:pointer;
  opacity:0;animation: dtIndPop .5s ease forwards;transition: transform .3s ease;
}
.dt-ind-card:hover{transform: translateY(-6px);}
@keyframes dtIndPop{0%{ opacity:0; transform: translateY(22px) scale(.9); }100%{ opacity:1; transform: translateY(0) scale(1); }}
.dt-ind-card:nth-child(1){animation-delay:.03s;} .dt-ind-card:nth-child(2){animation-delay:.06s;}
.dt-ind-card:nth-child(3){animation-delay:.09s;} .dt-ind-card:nth-child(4){animation-delay:.12s;}
.dt-ind-card:nth-child(5){animation-delay:.15s;} .dt-ind-card:nth-child(6){animation-delay:.18s;}
.dt-ind-card:nth-child(7){animation-delay:.21s;} .dt-ind-card:nth-child(8){animation-delay:.24s;}
.dt-ind-card:nth-child(9){animation-delay:.27s;} .dt-ind-card:nth-child(10){animation-delay:.30s;}
.dt-ind-card:nth-child(11){animation-delay:.33s;} .dt-ind-card:nth-child(12){animation-delay:.36s;}
.dt-ind-card:nth-child(13){animation-delay:.39s;} .dt-ind-card:nth-child(14){animation-delay:.42s;}

.dt-ind-card::before{
  content:"";position:absolute; inset:-2px;border-radius:14px;
  background: conic-gradient(from 0deg, var(--card-color), var(--card-color-2), var(--card-color));
  animation: dtBorderSpin 4s linear infinite;z-index:0;
}
@keyframes dtBorderSpin{from{ filter: hue-rotate(0deg); }to{ filter: hue-rotate(360deg); }}

.dt-ind-card:nth-child(7n+1){ --card-color:#ff2d78; --card-color-2:#ff7a3d; }
.dt-ind-card:nth-child(7n+2){ --card-color:#8b5cf6; --card-color-2:#3ba7ff; }
.dt-ind-card:nth-child(7n+3){ --card-color:#3ba7ff; --card-color-2:#2dd4c7; }
.dt-ind-card:nth-child(7n+4){ --card-color:#2dd4c7; --card-color-2:#22c55e; }
.dt-ind-card:nth-child(7n+5){ --card-color:#ffb020; --card-color-2:#ff7a3d; }
.dt-ind-card:nth-child(7n+6){ --card-color:#ec4899; --card-color-2:#ff2d78; }
.dt-ind-card:nth-child(7n+7){ --card-color:#22c55e; --card-color-2:#2dd4c7; }

.dt-ind-inner{
  position:relative; z-index:1;width:100%; height:100%;
  transform-style: preserve-3d;transition: transform .6s cubic-bezier(.4,.2,.2,1);
}
.dt-ind-card:hover .dt-ind-inner,
.dt-ind-card.dt-flipped .dt-ind-inner{transform: rotateY(180deg);}

.dt-ind-front, .dt-ind-back{
  position:absolute; inset:0;backface-visibility: hidden;border-radius:16px;padding:16px;
  text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border: 2px solid transparent;
  background-image: linear-gradient(#fff,#fff), linear-gradient(135deg, var(--card-color,#ff2d78), var(--card-color-2,#ff7a3d));
  background-origin: border-box;background-clip: padding-box, border-box;
}
.dt-ind-back{transform: rotateY(180deg);}

.dt-ind-icon{
  width:48px;height:48px;margin:0 auto 12px;border-radius:14px;
  background: linear-gradient(135deg, var(--card-color), var(--card-color-2));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 45%, transparent);
  animation: dtIconFloat 3s ease-in-out infinite;
}
@keyframes dtIconFloat{0%,100%{ transform: translateY(0) rotate(0deg); }50%{ transform: translateY(-5px) rotate(-4deg); }}
.dt-ind-card:hover .dt-ind-icon{animation: dtIconFloat 3s ease-in-out infinite, dtIconPop .5s ease;}
@keyframes dtIconPop{0%,100%{ transform: scale(1); }50%{ transform: scale(1.2); }}

.dt-ind-front span{font-size:15px;font-weight:600;color:var(--dt-text);line-height:1.4;}
.dt-ind-back p{font-size:13px; color: #000; line-height:1.6; margin-bottom:10px;}
.dt-ind-back .dt-ind-badge{font-size:9.5px; font-weight:700; color:var(--card-color);border:1px solid var(--card-color); border-radius:100px; padding:3px 10px;}

@media(max-width:1024px){ .dt-ind-grid{grid-template-columns:repeat(4,1fr);} }
@media(max-width:640px){ .dt-ind-grid{grid-template-columns:repeat(2,1fr);} }

/* ================= WHY CHOOSE ================= */
.dt-why{background: var(--dt-dark2);padding: 90px 0;color: #fff;position: relative;overflow: hidden;}
.dt-why::before{
  content:"";position:absolute; top:-10%; right:-8%;width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.10), transparent 70%);filter: blur(20px); z-index:0;
}
.dt-why .dt-container{ position:relative; z-index:1; }
.dt-why-top h2{font-size:34px;line-height:1.28;margin-bottom:14px;color: #fff}
.dt-why-top .dt-rule{width:44px;height:3px;background:var(--dt-gradient);border-radius:2px;margin-bottom:44px;}

.dt-why-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:22px;}
@media(max-width:900px){ .dt-why-grid{grid-template-columns:repeat(2,1fr) !important;} }
@media(max-width:640px){ .dt-why-grid{grid-template-columns:1fr !important;} }

.dt-why-item{
  background: rgba(255,255,255,.03);
  border: 1px solid color-mix(in srgb, var(--wc) 35%, transparent);
  border-radius: 18px;padding: 28px 24px;text-align:left;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
  opacity:0;animation: dtWhyIn .6s ease forwards;
}
.dt-why-item:nth-child(1){ --wc:#ff2d78; animation-delay:.05s; }
.dt-why-item:nth-child(2){ --wc:#8b5cf6; animation-delay:.15s; }
.dt-why-item:nth-child(3){ --wc:#3ba7ff; animation-delay:.25s; }
.dt-why-item:nth-child(4){ --wc:#2dd4c7; animation-delay:.35s; }
.dt-why-item:nth-child(5){ --wc:#ffb020; animation-delay:.45s; }
.dt-why-item:nth-child(6){ --wc:#ec4899; animation-delay:.55s; }
@keyframes dtWhyIn{from{ opacity:0; transform: translateY(24px); }to{ opacity:1; transform: translateY(0); }}
.dt-why-item:hover{transform: translateY(-8px);background: rgba(255,255,255,.05);border-color: var(--wc);box-shadow: 0 20px 40px color-mix(in srgb, var(--wc) 20%, transparent);}
.dt-why-icon{
  width:56px;height:56px;border-radius:14px;
  background: color-mix(in srgb, var(--wc) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--wc) 40%, transparent);
  display:flex;align-items:center;justify-content:center;color: var(--wc); font-size:22px;
  margin-bottom:18px;transition: transform .3s ease, background .3s ease;
}
.dt-why-item:hover .dt-why-icon{transform: scale(1.12) rotate(-6deg);background: var(--wc);color:#fff;box-shadow: 0 8px 20px color-mix(in srgb, var(--wc) 55%, transparent);}
.dt-why-item h4{font-size:16.5px;color: var(--wc);margin-bottom:10px;font-weight:700;}
.dt-why-item p{font-size:13.5px; color: whitesmoke; line-height:1.7;}

/* ================= CTA ================= */
.dt-cta-wrap{padding:0 0 60px;background:var(--dt-dark2);}
.dt-cta{
  max-width:var(--dt-max);margin:0 auto;border-radius:24px;padding:48px 50px;
  display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  position:relative;overflow:hidden;border:1px solid rgba(255,45,120,.25);
  background: linear-gradient(120deg, #2a0f22, #1a0f28, #2a1a12, #1a0f28);
  background-size: 300% 300%;animation: dtCtaGradient 10s ease infinite;
}
@keyframes dtCtaGradient{0%{ background-position: 0% 50%; }50%{ background-position: 100% 50%; }100%{ background-position: 0% 50%; }}
.dt-cta::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(255,122,61,.35), transparent 70%);}
.dt-cta::before{content:"";position:absolute;left:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle, rgba(255,45,120,.28), transparent 70%);}
.dt-cta-text{position:relative;z-index:1;max-width:560px;}
.dt-cta-text h2{font-size:30px;color:#fff;line-height:1.3;margin-bottom:12px;}
.dt-cta-text p{color: wheat;font-size:15.5px;line-height:1.7;}
.dt-cta-right{position:relative; z-index:1;display:flex; flex-direction:column; align-items:flex-end; gap:14px;}
.dt-cta .dt-btn{position:relative;white-space:nowrap;}
.dt-cta-btn-wrap{position:relative;display:inline-flex;border-radius:100px;}
.dt-cta-btn-wrap .dt-btn{animation: dtBtnPulse 2.2s ease-in-out infinite;}
@keyframes dtBtnPulse{0%{ box-shadow: 0 0 0 0 rgba(255,45,120,.5); }70%{ box-shadow: 0 0 0 14px rgba(255,45,120,0); }100%{ box-shadow: 0 0 0 0 rgba(255,45,120,0); }}
.dt-cta-trust{display:flex; align-items:center; gap:8px; flex-wrap:wrap;font-size:12px; color: var(--dt-text-light-muted);}
.dt-cta-trust span{ display:flex; align-items:center; gap:6px; }
.dt-cta-trust span:not(.dt-dot)::before{content:"✓";color: var(--dt-pink);font-weight:700;margin-right:2px;}
.dt-cta-trust .dt-dot{ opacity:.4; }

@media(max-width:640px){ .dt-cta{padding:34px 26px;} .dt-cta-text h2{font-size:22px;} .dt-cta-right{align-items:flex-start; width:100%;} }

  /* ================= RESPONSIVE ================= */
  @media(max-width:1024px){
    .dt-service-grid{grid-template-columns:repeat(3,1fr);}
    .dt-tech-grid{grid-template-columns:repeat(3,1fr);}
    .dt-ind-grid{grid-template-columns:repeat(4,1fr);}
    .dt-why-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media(max-width:900px){
    .dt-hero-grid{grid-template-columns:1fr;}
    .dt-hero-visual{ order:2; min-height:260px; margin-top:10px; }
    .dt-services-head, .dt-tech-top, .dt-industries-top{grid-template-columns:1fr;}
  }
  @media(max-width:640px){
    .dt-container{padding:0 20px;}
    .dt-hero-content h1{font-size:32px;}
    .dt-service-grid{grid-template-columns:1fr;}
    .dt-tech-grid{grid-template-columns:repeat(2,1fr);}
    .dt-ind-grid{grid-template-columns:repeat(2,1fr);}
    .dt-why-grid{grid-template-columns:1fr 1fr;}
    .dt-stats{gap:22px;}
    .dt-cta{padding:34px 26px;}
    .dt-cta-text h2{font-size:22px;}
  }
  @media (prefers-reduced-motion: reduce){ .dt-cube, .dt-hero-orbit-icon{animation:none !important;} }


/* =========================================================
           ADVANCED SEO STRATEGIES
========================================================= */

:root {
    --aso-dark: #0c0812;
    --aso-dark-2: #120d1a;

    --aso-pink: #ff2d78;
    --aso-orange: #ff7a3d;

    --aso-gradient:
        linear-gradient(90deg, #ff2d78, #ff7a3d);

    --aso-light: #f6f5f8;
    --aso-white: #ffffff;

    --aso-text: #161320;
    --aso-muted: #6b6878;
    --aso-light-muted: #b9b3c7;

    --aso-border: #ececf1;
}


/* =========================================================
   RESET
========================================================= */

.aso-hero,
.aso-provide,
.aso-process,
.aso-results,
.aso-breadcrumb {
    box-sizing: border-box;
}

.aso-hero *,
.aso-provide *,
.aso-process *,
.aso-results *,
.aso-breadcrumb * {
    box-sizing: border-box;
}

.aso-hero h1,
.aso-hero p,
.aso-provide h2,
.aso-provide h3,
.aso-provide p,
.aso-process h2,
.aso-process h4,
.aso-process p,
.aso-results h2,
.aso-results h4,
.aso-results p {
    margin: 0;
}

.aso-hero img,
.aso-provide img,
.aso-process img,
.aso-results img {
    max-width: 100%;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.aso-container {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.aso-breadcrumb {
    background: var(--aso-dark);
    color: var(--aso-light-muted);
    font-size: 13px;
    padding: 18px 0 10px;
}

.aso-breadcrumb span {
    opacity: 0.8;
}


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

.aso-hero {
    position: relative;
    overflow: hidden;
    padding: 38px 0 48px;
    color: #fff;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(112, 30, 82, 0.38),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255, 45, 120, 0.08),
            transparent 35%
        ),
        var(--aso-dark);
}


.aso-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 55px;
    align-items: center;
}


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

.aso-hero-content {
    min-width: 0;
}

.aso-eyebrow,
.aso-section-eyebrow {
    margin-top: 70px;
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--aso-pink);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
}

.aso-eyebrow {
    margin-bottom: 18px;
}

.aso-eyebrow::after,
.aso-section-eyebrow::after {
    content: "";
    display: block;

    width: 42px;
    height: 1px;

    background: var(--aso-pink);
    opacity: 0.65;
}


.aso-hero h1 {
    max-width: 620px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.12;
    font-weight: 800;

    color: #fff;

    margin-bottom: 20px;
}


.aso-hero h1 span,
.aso-section-intro h2 span,
.aso-process-intro h2 span,
.aso-results-content h2 span {
    background: var(--aso-gradient);

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

    color: transparent;
}


.aso-hero-content > p {
    max-width: 540px;

    color: var(--aso-light-muted);

    font-size: 17px;
    line-height: 1.75;

    margin-bottom: 28px;
}

.aso-hero-content h1 span{
    background: linear-gradient(90deg, var(--aso-pink), var(--aso-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.aso-hero-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}

.aso-hero-content h1{
    text-shadow: none;
}
.aso-hero-checks > div {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #fff;

    font-size: 13px;
    font-weight: 600;
}


.aso-check-icon {
    width: 19px;
    height: 19px;

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

    border-radius: 50%;

    background: var(--aso-gradient);

    font-size: 11px;
}


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

.aso-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;

    padding: 25px 10px;
}



.aso-dashboard-imgwrap{
    position: relative;
    z-index: 2;
}

.aso-dashboard-img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.aso-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 12px;
}


.aso-stat-card {
    min-width: 0;

    padding: 10px;

    background: #1e1730;

    border-radius: 8px;
}


.aso-stat-label {
    color: var(--aso-light-muted);

    font-size: 9px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.aso-stat-value {
    color: #fff;

    font-size: 15px;
    font-weight: 800;

    margin-top: 3px;
}


.aso-stat-growth {
    color: #3ddc84;

    font-size: 9px;

    margin-top: 2px;
}


.aso-chart-box {
    width: 100%;
    height: 95px;

    overflow: hidden;

    border-radius: 8px;

    background: #1e1730;
}


.aso-chart-box svg {
    width: 100%;
    height: 100%;
}


/* =========================================================
   FLOATING HERO ICONS
========================================================= */

.aso-floating-icon {
    position: absolute;
    z-index: 5;

    width: 52px;
    height: 52px;

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

    border-radius: 14px;

    color: #fff;

    font-size: 20px;

    background: var(--aso-gradient);

    box-shadow:
        0 10px 30px rgba(255, 45, 120, 0.35);

    animation: asoFloat 4s ease-in-out infinite;
}


.aso-float-code {
    top: 5%;
    left: -2%;
}


.aso-float-cloud {
    top: 0;
    right: -2%;

    background:
        linear-gradient(
            135deg,
            #3b2fb0,
            #5b4de6
        );

    animation-delay: -1s;
}


.aso-float-database {
    right: -2%;
    bottom: 4%;

    background:
        linear-gradient(
            135deg,
            #c22a5c,
            #ff2d78
        );

    animation-delay: -2s;
}


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

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


/* =========================================================
   TECHNOLOGY / STRATEGY FLOW
========================================================= */

.aso-flow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: 30px;
}


.aso-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 9px;
}


.aso-flow-circle {
    width: 56px;
    height: 56px;

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

    border: 1.5px solid var(--flow-color, #35283f);
    border-radius: 50%;

    background: #160f20;

    color: var(--flow-color, #fff);

    font-size: 20px;

    box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
               0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
    transition:.25s;
}
.aso-flow-node:hover .aso-flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.aso-flow-node:nth-child(1) .aso-flow-circle{ --flow-color:#3ba7ff; }
.aso-flow-node:nth-child(3) .aso-flow-circle{ --flow-color:#ff2d78; }
.aso-flow-node:nth-child(5) .aso-flow-circle{ --flow-color:#2dd4c7; }
.aso-flow-node:nth-child(7) .aso-flow-circle{ --flow-color:#e8ebff; }

@keyframes arrowMove{
  0%{transform:translateX(0); opacity:.35;}
  50%{transform:translateX(8px); opacity:1; text-shadow:0 0 10px var(--aso-orange);}
  100%{transform:translateX(0); opacity:.35;}
}

.aso-flow-arrow {
    color: var(--aso-orange);
    font-size: 18px;
    display: inline-block;
    animation: arrowMove 1.4s ease-in-out infinite;
}
.aso-flow .aso-flow-arrow:nth-of-type(1){animation-delay:0s;}
.aso-flow .aso-flow-arrow:nth-of-type(2){animation-delay:.3s;}
.aso-flow .aso-flow-arrow:nth-of-type(3){animation-delay:.6s;}

.aso-flow-node span {
    color: var(--aso-light-muted);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;

    text-align: center;
}


/* =========================================================
   PROVIDE SECTION
========================================================= */

.aso-provide {
    padding: 80px 0;

    background: #fdf2f6;
}


.aso-provide-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;
}


.aso-section-eyebrow {
    margin-bottom: 14px;
}


.aso-section-intro h2,
.aso-process-intro h2,
.aso-results-content h2 {
    font-size: clamp(27px, 3vw, 34px);
    color: #000;
    line-height: 1.25;
    font-weight: 800;
}


.aso-section-intro > p,
.aso-process-intro > p,
.aso-results-content > p {
    color: maroon;

    font-size: 14px;
    line-height: 1.75;

    margin-top: 16px;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.aso-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.aso-service-card {
    padding: 24px 20px;

    background: #fff;

    border: 1px solid lightpink;
    border-radius: 13px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
  --card-bg: #ffffff;
  --card-color: var(--aso-pink);
  background: var(--card-bg);
  transition: background .3s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.aso-service-card:nth-child(1){ --card-bg:#fff1f5; --card-color:#ff2d78; }
.aso-service-card:nth-child(2){ --card-bg:#eef7ff; --card-color:#3ba7ff; }
.aso-service-card:nth-child(3){ --card-bg:#fff9ec; --card-color:#ffb020; }
.aso-service-card:nth-child(4){ --card-bg:#ecfdfb; --card-color:#2dd4c7; }
.aso-service-card:nth-child(5){ --card-bg:#f5f1ff; --card-color:#8b5cf6; }
.aso-service-card:nth-child(6){ --card-bg:#fff2ec; --card-color:#ff7a3d; }
.aso-service-card:nth-child(7){ --card-bg:#eefdf3; --card-color:#22c55e; }
.aso-service-card:nth-child(8){ --card-bg:#fdeef7; --card-color:#ec4899; }

.aso-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 60%, var(--aso-orange)));

    color: #fff;

    font-size: 18px;

    box-shadow: 0 6px 16px color-mix(in srgb, var(--card-color) 45%, transparent);

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

.aso-service-card:hover .aso-service-icon {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 65%, transparent);
    background: var(--card-color);
    color: #fff;
}


.aso-service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 45, 120, 0.2);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.07);
}

/* gradient border on hover */
.aso-service-card{
  position: relative;
  overflow: hidden;
}
.aso-service-card::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--aso-pink), var(--aso-orange));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.aso-service-card:hover::before{
  opacity: 1;
}

/* scroll reveal setup — cards start hidden */
.aso-service-card{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.aso-service-card.aso-reveal{
  opacity: 1;
  transform: translateY(0);
}

.aso-service-card h3 {
    color: var(--aso-text);

    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;

    margin-bottom: 8px;
}


.aso-service-card p {
    color: #000;

    font-size: 12.5px;
    line-height: 1.65;
}


/* =========================================================
   PROCESS
========================================================= */

.aso-process {
    padding: 50px 0;

    background: var(--aso-dark);

    color: #fff;
}


.aso-process-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;

    align-items: center;
}


.aso-process-intro .aso-section-eyebrow {
    color: var(--aso-pink);
}


.aso-process-intro h2 {
    color: #fff;
}


.aso-process-intro > p {
    color: var(--aso-light-muted);
}
/* =========================================================
   PROCESS STEPS
========================================================= */
.aso-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@keyframes stepPopIn{
  0%{
    opacity:0;
    transform: scale(.4) translateY(30px);
  }
  60%{
    opacity:1;
    transform: scale(1.08) translateY(-6px);
  }
  80%{
    transform: scale(.96) translateY(2px);
  }
  100%{
    opacity:1;
    transform: scale(1) translateY(0);
  }
}

.aso-step {
    position: relative;
    z-index: 2;
    text-align: center;

    opacity: 0;
    animation: stepPopIn .65s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.aso-step-line {
    position: absolute;
    top: 38px;
    left: 8%;
    right: 8%;
    height: 2px;
    z-index: 1;
    border-radius: 2px;

    background: linear-gradient(
        90deg,
        var(--aso-pink),
        var(--aso-orange)
    );
    opacity: .35;
    overflow: visible;
}

@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}

.aso-step-line::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);

  width: 22px;
  height: 6px;
  border-radius: 50%;

  background: #fff;
  box-shadow:
    0 0 10px 3px var(--aso-pink),
    0 0 20px 6px var(--aso-orange);

  animation: runLight 6.2s linear infinite;
}

.aso-step:nth-child(2){ --step-color:#ff2d78; animation-delay: .5s; }
.aso-step:nth-child(3){ --step-color:#3ba7ff; animation-delay: .8s; }
.aso-step:nth-child(4){ --step-color:#2dd4c7; animation-delay: 1.1s; }
.aso-step:nth-child(5){ --step-color:#ffb020; animation-delay: 1.4s; }

.aso-step-circle {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 1.5px solid var(--step-color, var(--aso-pink));
    border-radius: 50%;
    background: #160f20;
    font-size: 28px;
    color: var(--step-color, #fff);

    box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color, var(--aso-pink)) 12%, transparent),
                0 0 20px color-mix(in srgb, var(--step-color, var(--aso-pink)) 45%, transparent);

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

.aso-step:hover .aso-step-circle{
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--step-color, var(--aso-pink)) 20%, transparent),
              0 0 30px color-mix(in srgb, var(--step-color, var(--aso-pink)) 75%, transparent);
}

.aso-step-number {
    color: var(--aso-orange);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
}
.aso-step:hover .aso-step-number{
  color: var(--step-color);
}

.aso-step h4 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 8px;
}
.aso-step p {
    color: var(--aso-light-muted);
    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   WHAT YOU GET
========================================================= */

@keyframes blobFloat1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-20px) scale(1.1); }
}
@keyframes blobFloat2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-25px,25px) scale(1.15); }
}

.aso-results {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #fffaf8;
}

.aso-results::before,
.aso-results::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.aso-results::before{
    width: 420px;
    height: 420px;
    top: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(255,45,120,0.35), transparent 70%);
    animation: blobFloat1 9s ease-in-out infinite;
}

.aso-results::after{
    width: 460px;
    height: 460px;
    bottom: -15%;
    right: -10%;
    background: radial-gradient(circle, rgba(255,122,61,0.35), transparent 70%);
    animation: blobFloat2 11s ease-in-out infinite;
}

.aso-results-grid{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.1fr);
    gap: 60px;
    align-items: center;
}


/* =========================================================
   LAPTOP
========================================================= */

.aso-laptop-area {
    position: relative;

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

    padding: 30px 20px;
}


.aso-laptop {
    width: min(100%, 430px);

    position: relative;

    padding: 16px;

    background: #171022;

    border-radius: 14px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.2);
}


.aso-laptop-screen {
    min-height: 220px;

    padding: 14px;

    border-radius: 8px;

    background: #1e1730;
}


.aso-laptop-line {
    height: 8px;

    margin-bottom: 8px;

    border-radius: 4px;

    background: #33284a;
}


.aso-line-40 {
    width: 40%;
}

.aso-line-60 {
    width: 60%;
}

.aso-line-80 {
    width: 80%;
}


.aso-laptop-base {
    height: 14px;

    margin-top: 10px;

    border-radius: 0 0 10px 10px;

    background: #0f0a17;
}

@keyframes laptopFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

.aso-laptop-img {
    width: min(100%, 460px);
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.25));

    animation: laptopFloat 5s ease-in-out infinite;
}

@keyframes badgeFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes badgePopIn{
  0%{ opacity:0; transform: scale(.3) translateY(20px); }
  60%{ opacity:1; transform: scale(1.15) translateY(-4px); }
  100%{ opacity:1; transform: scale(1) translateY(0); }
}

.aso-mini-badge{
  opacity: 0;
  animation:
    badgePopIn .6s cubic-bezier(.34,1.56,.64,1) forwards,
    badgeFloat 3.5s ease-in-out infinite;
}

.aso-mini-code{
  animation-delay: .2s, 1s;
}
.aso-mini-security{
  animation-delay: .4s, 1.3s;
}
.aso-mini-growth{
  animation-delay: .6s, 1.6s;
}
.aso-mini-success{
  animation-delay: .8s, 1.9s;
}

@keyframes benefitSlideIn{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}

.aso-benefit{
  opacity: 0;
  animation: benefitSlideIn .6s ease forwards;
}

.aso-benefit:nth-child(1){ animation-delay: .3s; }
.aso-benefit:nth-child(2){ animation-delay: .5s; }
.aso-benefit:nth-child(3){ animation-delay: .7s; }
.aso-benefit:nth-child(4){ animation-delay: .9s; }

.aso-benefit-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}

.aso-benefit:hover .aso-benefit-icon{
  transform: scale(1.15) rotate(-6deg);
  background: linear-gradient(135deg, var(--aso-pink), var(--aso-orange));
  color: #fff;
}

/* =========================================================
   LAPTOP FLOATING BADGES
========================================================= */

.aso-mini-badge {
    position: absolute;
    z-index: 4;

    width: 54px;
    height: 54px;

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

    border-radius: 10px;

    color: #fff;

    font-size: 16px;

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


.aso-mini-code {
    top: -6%;
    left: 8%;

    background: var(--aso-gradient);
}


.aso-mini-security {
    top: -20%;
    right: 10%;

    background: #2b2340;
}


.aso-mini-growth {
    right: 8%;
    bottom: -14%;

    background: #2b2340;
}


.aso-mini-success {
    left: 40%;
    bottom: -13%;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: var(--aso-gradient);
}


/* =========================================================
   BENEFITS
========================================================= */

.aso-benefit-grid {
    display: grid;

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

    gap: 26px 24px;

    margin-top: 28px;
}


.aso-benefit {
    display: flex;

    gap: 14px;

    min-width: 0;
}


.aso-benefit-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 9px;

    background: #fdeef2;

    color: var(--aso-pink);

    font-size: 17px;
}


.aso-benefit h4 {
    color: var(--aso-text);

    font-size: 20px;

    margin-bottom: 5px;
}


.aso-benefit p {
    color: var(--aso-muted);

    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .aso-container {
        width: min(1180px, calc(100% - 48px));
    }


    .aso-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .aso-provide-grid,
    .aso-process-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .aso-section-intro,
    .aso-process-intro {
        max-width: 650px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .aso-hero {
        padding-top: 40px;
    }


    .aso-hero-grid,
    .aso-results-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }
    
    .aso-results-content {
        order: 1;
    }

    .aso-laptop-area {
        order: 2;
    }

    .aso-hero-content {
        text-align: center;
    }


    .aso-eyebrow {
        justify-content: center;
    }


    .aso-hero h1 {
        margin-left: auto;
        margin-right: auto;
    }


    .aso-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }


    .aso-hero-checks {
        justify-content: center;
    }


    .aso-hero-visual {
        max-width: 680px;

        margin: 0 auto;
    }


    .aso-results-content {
        max-width: 700px;
        margin: 0 auto;
    }


    .aso-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 40px;
    }


    .aso-step-line {
        display: none;
    }

}


/* =========================================================
   MOBILE — HERO TEXT FIX
========================================================= */

@media screen and (max-width:600px){
  .aso-hero-content{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:0 4px;
    text-align:left !important;
  }

  .aso-eyebrow{
    width:100%;
    max-width:100%;
    margin-top:54px;
    margin-bottom:18px;
    justify-content:flex-start !important;
    gap:8px;
    font-size:10px;
    line-height:1.4;
    letter-spacing:.7px;
    white-space:normal;
  }

  .aso-eyebrow::after{
    width:34px;
    flex:0 0 34px;
  }

  .aso-hero h1{
    width:100%;
    max-width:360px;
    margin:0 0 18px;
    padding:0;
    font-size:clamp(28px,7.6vw,32px);
    line-height:1.12;
    letter-spacing:-.4px;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .aso-hero h1 span{
    display:inline;
  }

  .aso-hero-content > p{
    width:100%;
    max-width:350px;
    margin:0 0 26px;
    padding:0 2px;
    font-size:14px;
    line-height:1.5;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .aso-hero-checks{
    width:100%;
    max-width:100%;
    margin:0;
    align-items:flex-start;
    gap:11px;
    text-align:left;
  }

  .aso-hero-checks > div{
    width:auto;
    justify-content:flex-start;
    font-size:13px;
    line-height:1.35;
  }
}

@media screen and (max-width:380px){
  .aso-eyebrow{margin-top:48px;font-size:9px;}
  .aso-eyebrow::after{width:26px;flex-basis:26px;}

  .aso-hero h1{
    max-width:320px;
    font-size:26px;
  }

  .aso-hero-content > p{
    max-width:320px;
    font-size:13.5px;
  }
}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .aso-container {
        width: calc(100% - 24px);
    }


    .aso-hero h1 {
        font-size: 28px;
    }


    .aso-flow {
        gap: 4px;
    }


    .aso-flow-circle {
        width: 38px;
        height: 38px;
    }


    .aso-flow-arrow {
        font-size: 11px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .aso-floating-icon,
    .aso-service-card {
        animation: none;
        transition: none;
    }

}

/*============================================================
               Social Media Engagement & Campaigns
============================================================*/
 :root{
    --smc-black:#0b0b10;
    --smc-black-2:#121016;
    --smc-pink:#ef2d7e;
    --smc-orange:#f6923a;
    --smc-cream:#faf5f2;
    --smc-cream-2:#f4ece7;
    --smc-white:#ffffff;
    --smc-text-dark:#141217;
    --smc-text-muted:#6b6570;
    --smc-text-light:#c9c4cd;
    --smc-gradient: linear-gradient(90deg, var(--smc-pink), var(--smc-orange));
    --smc-radius: 16px;
    --smc-max-w: 1200px;
  }

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

  @keyframes smc-mesh-move{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(-3%, 2%) scale(1.08); }
    100%{ transform: translate(0,0) scale(1); }
  }
  @keyframes smc-mesh-move-2{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(4%, -3%) scale(1.05); }
    100%{ transform: translate(0,0) scale(1); }
  }
  @keyframes smc-pulse{
    0%,100%{ opacity:0.55; transform: translateX(-50%) scale(1); }
    50%{ opacity:0.9; transform: translateX(-50%) scale(1.12); }
  }
  @keyframes smc-float-y{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
  }
  @keyframes smc-fade-up-blur{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}
  @keyframes smc-count-fade{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
  }
  @keyframes smc-draw-line{
    from{ stroke-dashoffset: 260; }
    to{ stroke-dashoffset: 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .smc-hero *{ animation: none !important; transition: none !important; }
  }

  body{
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    color: var(--smc-text-dark);
    background: var(--smc-white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}

  .smc-container{
    max-width: var(--smc-max-w);
    margin: 0 auto;
    padding: 0 32px;
  }

  .smc-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color: var(--smc-pink);
  }
  .smc-eyebrow-dot{
    width:6px; height:6px; border-radius:50%;
    background: var(--smc-pink);
    display:inline-block;
  }
  .smc-eyebrow--boxed{
    position:relative;
    border:1px solid transparent;
    padding:8px 16px;
    border-radius:999px;
    background:
      linear-gradient(#0b0b10,#0b0b10) padding-box,
      conic-gradient(from 0deg, var(--smc-pink), var(--smc-orange), var(--smc-pink)) border-box;
    animation: smc-border-spin 4s linear infinite;
  }
  @keyframes smc-border-spin{
    to{ filter: hue-rotate(0deg); background:
      linear-gradient(#0b0b10,#0b0b10) padding-box,
      conic-gradient(from 360deg, var(--smc-pink), var(--smc-orange), var(--smc-pink)) border-box;
    }
  }

  .smc-gradient-text{
    background: linear-gradient(100deg, var(--smc-pink) 20%, var(--smc-orange) 40%, #ffd8b0 50%, var(--smc-orange) 60%, var(--smc-pink) 80%);
    background-size: 250% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation: smc-shimmer 5s linear infinite;
  }
  @keyframes smc-shimmer{
    0%{ background-position: 200% 0; }
    100%{ background-position: -50% 0; }
  }

  /* ---------------- HERO ---------------- */
  .smc-hero{
    background: #08080c;
    color: var(--smc-white);
    padding: 105px 0 50px;
    overflow:hidden;
    position:relative;
  }
  .smc-hero__mesh{
    position:absolute; inset:-10%;
    z-index:0;
    pointer-events:none;
  }
  .smc-hero__mesh span{
    position:absolute;
    border-radius:50%;
    filter: blur(70px);
    opacity:0.5;
  }
  .smc-hero__mesh span:nth-child(1){
    width:420px; height:420px; top:-8%; right:8%;
    background: radial-gradient(circle, rgba(239,45,126,0.55), transparent 70%);
    animation: smc-mesh-move 14s ease-in-out infinite;
  }
  .smc-hero__mesh span:nth-child(2){
    width:380px; height:380px; bottom:-10%; right:26%;
    background: radial-gradient(circle, rgba(246,146,58,0.4), transparent 70%);
    animation: smc-mesh-move-2 18s ease-in-out infinite;
  }
  .smc-hero__mesh span:nth-child(3){
    width:300px; height:300px; top:20%; left:-6%;
    background: radial-gradient(circle, rgba(120,40,160,0.35), transparent 70%);
    animation: smc-mesh-move 20s ease-in-out infinite reverse;
  }
  .smc-hero__grain{
    position:absolute; inset:0; z-index:1;
    opacity:0.05;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .smc-hero__particles{
    position:absolute; inset:0; z-index:1; pointer-events:none;
  }
  .smc-hero__particles span{
    position:absolute;
    width:3px; height:3px;
    border-radius:50%;
    background: var(--smc-orange);
    opacity:0.5;
    animation: smc-particle-float linear infinite;
  }
  .smc-hero__particles span:nth-child(odd){ background: var(--smc-pink); }
  @keyframes smc-particle-float{
    0%{ transform: translateY(0) translateX(0); opacity:0; }
    10%{ opacity:0.6; }
    90%{ opacity:0.6; }
    100%{ transform: translateY(-140px) translateX(20px); opacity:0; }
  }
  .smc-hero__spotlight{
    position:absolute;
    top:-20%; left:50%;
    width:600px; height:500px;
    transform: translateX(-50%);
    background: conic-gradient(from 180deg at 50% 0%, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
    z-index:1;
    pointer-events:none;
  }
  .smc-hero__cursor-glow{
    position:absolute;
    width:420px; height:420px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(239,45,126,0.16), transparent 70%);
    top:0; left:0;
    transform: translate(-50%,-50%);
    pointer-events:none;
    z-index:1;
    opacity:0;
    transition: opacity 0.4s ease;
  }
  .smc-hero__grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items:center;
  }
 .smc-hero__title{
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  margin: 20px 0 20px;
  letter-spacing:-0.5px;
  color: #ffffff;
  text-shadow: none;
  animation: smc-fade-up-blur 0.8s ease both;
  animation-delay: 0.05s;
}
  .smc-hero__desc{
    color: whitesmoke;
    font-size: 17px;
    max-width: 480px;
    margin-bottom: 24px;
    animation: smc-fade-up-blur 0.8s ease both;
    animation-delay: 0.2s;
  }
  .smc-hero__features{
    display:flex;
    flex-wrap:wrap;
    gap: 14px 28px;
    margin-bottom: 36px;
  }
  .smc-hero__feature{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color: whitesmoke;
    opacity:0;
    animation: smc-count-fade 0.6s ease forwards;
    transition: transform 0.25s ease, color 0.25s ease;
    cursor:default;
  }
  .smc-hero__feature:hover{
    transform: translateX(4px);
    color: #fff;
  }
  .smc-hero__feature:nth-child(1){ animation-delay:0.35s; }
  .smc-hero__feature:nth-child(2){ animation-delay:0.45s; }
  .smc-hero__feature:nth-child(3){ animation-delay:0.55s; }
  .smc-hero__feature:nth-child(4){ animation-delay:0.65s; }
  .smc-hero__feature:nth-child(5){ animation-delay:0.75s; }
  .smc-check{
    width:18px; height:18px;
    border-radius:50%;
    background: rgba(239,45,126,0.15);
    color: var(--smc-pink);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    flex-shrink:0;
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .smc-hero__feature:hover .smc-check{
    transform: scale(1.15);
    background: var(--smc-pink);
    color:#fff;
  }

  .smc-stats{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    opacity:0;
    animation: smc-count-fade 0.7s ease forwards;
    animation-delay: 0.85s;
  }
  .smc-stat{
    position:relative;
    padding: 22px 16px 18px;
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow:hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  .smc-stat::before{
    content:"";
    position:absolute; inset:0;
    border-radius:16px;
    padding:1px;
    background: var(--smc-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:0;
    transition: opacity 0.3s ease;
    pointer-events:none;
  }
  .smc-stat:hover{
    transform: translateY(-6px) scale(1.03);
    border-color: transparent;
    background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
    box-shadow: 0 16px 34px rgba(239,45,126,0.22);
  }
  .smc-stat:hover::before{ opacity:1; }
  .smc-stat__icon{
    width:34px; height:34px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(239,45,126,0.22), rgba(246,146,58,0.16));
    color: var(--smc-pink);
    font-size:15px;
    margin-bottom:12px;
    transform: rotate(-90deg) scale(0.5);
    opacity:0;
    animation: smc-icon-spin-in 0.6s ease forwards;
  }
  .smc-stat:nth-child(1) .smc-stat__icon{ animation-delay: 1s; }
  .smc-stat:nth-child(2) .smc-stat__icon{ animation-delay: 1.12s; }
  .smc-stat:nth-child(3) .smc-stat__icon{ animation-delay: 1.24s; }
  .smc-stat:nth-child(4) .smc-stat__icon{ animation-delay: 1.36s; }
  .smc-stat__num{ font-size:24px; font-weight:800; letter-spacing:-0.3px; }
  .smc-stat__label{ font-size:12px; color: var(--smc-text-muted); margin-top:3px;}
  .smc-stat__bar{
    height:3px;
    border-radius:2px;
    background: rgba(255,255,255,0.08);
    margin-top:14px;
    overflow:hidden;
  }
  .smc-stat__bar span{
    display:block;
    height:100%;
    width:0%;
    background: var(--smc-gradient);
    border-radius:2px;
    transition: width 1.3s cubic-bezier(.22,1,.36,1);
  }
  @keyframes smc-icon-spin-in{
    to{ transform: rotate(0deg) scale(1); opacity:1; }
  }

  /* Hero phone showcase */
  .smc-hero__visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: 460px;
    perspective: 1200px;
    opacity:0;
    animation: smc-count-fade 1s ease forwards;
    animation-delay: 0.3s;
  }
  .smc-hero__glow{
    position:absolute;
    bottom:10px;
    left:50%;
    width: 340px;
    height: 100px;
    background: radial-gradient(ellipse at center, rgba(239,45,126,0.55), rgba(246,146,58,0.15) 60%, transparent 75%);
    filter: blur(6px);
    border-radius:50%;
    animation: smc-pulse 4s ease-in-out infinite;
  }
  .smc-phones{
    position:relative;
    display:flex;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    gap: -20px;
    z-index:2;
    animation: smc-zoom-reveal 1s cubic-bezier(.22,1,.36,1) both;
    animation-delay: 0.2s;
  }
  @keyframes smc-zoom-reveal{
    from{ transform: scale(1.25); opacity:0; }
    to{ transform: scale(1); opacity:1; }
  }
  .smc-phone{
    width: 220px;
    height: 420px;
    background: #0d0d10;
    border: 6px solid #1c1c22;
    border-radius: 34px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    padding: 14px 12px;
    position:relative;
    display:flex;
    flex-direction:column;
    gap:20px;
    overflow:hidden;
  }
  .smc-phone::after{
    content:"";
    position:absolute;
    top:-120%; left:-40%;
    width:60%; height:340%;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
    transform: rotate(20deg);
    animation: smc-screen-sweep 5s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes smc-screen-sweep{
    0%,100%{ left:-40%; }
    50%{ left:110%; }
  }
  .smc-hero__visual:hover .smc-phones{
    transform: rotateY(-6deg) rotateX(3deg);
  }
  .smc-phone--front{
    transform: translateY(30px);
    margin-left:-40px;
    z-index:3;
    transition: transform 0.4s ease;
  }

  .smc-phone--back{
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.92);
}
    .smc-hero__visual:hover .smc-phone--front{
    transform: translateY(24px) translateZ(30px);
  }
  .smc-hero__visual:hover .smc-phone--back{
  transform: translateY(-14px) scale(0.98) translateZ(-10px);
  filter: brightness(0.88);
}
  .smc-phone__notch{
    position:absolute;
    top:0; left:50%; transform:translateX(-50%);
    width:70px; height:18px;
    background:#1c1c22;
    border-radius:0 0 12px 12px;
  }
  .smc-phone__status{
    display:flex; justify-content:space-between;
    font-size:9px; color:#fff; opacity:0.6;
    margin-top:6px;
  }
  .smc-phone__greeting{ font-size:11px; color:#8f8b93; margin-top:8px;}
  .smc-phone__name{ font-size:14px; font-weight:700; color:#fff;}
  .smc-phone__balance-card{
    background: linear-gradient(135deg, #241621, #1a1220);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:14px;
    padding:12px;
    margin-top:8px;
  }
  .smc-phone__balance-label{ font-size:9px; color:#8f8b93;}
  .smc-phone__balance-amount{ font-size:20px; font-weight:800; color:#fff; margin-top:4px;}
  .smc-phone__balance-chart{ height:30px; margin-top:8px;}
  .smc-phone__tx-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:9.5px; color:#cfcbd4;
    padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .smc-phone__tx-amt{ color:#ef2d7e; font-weight:700;}
  .smc-phone__tabbar{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,0.06);
  }
  .smc-phone__tab{ font-size:8px; color:#68636f; text-align:center;}
  .smc-phone__tab--active{ color:#ef2d7e;}

  .smc-phone__cats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px;
  }
  .smc-phone__cat{
    background: rgba(255,255,255,0.04);
    border-radius:10px;
    padding:8px 4px;
    text-align:center;
    font-size:7px;
    color:#cfcbd4;
  }
  .smc-phone__cat-ic{ font-size:14px; margin-bottom:2px;}
  .smc-phone__promo{
    background: linear-gradient(135deg, #3a1024, #201018);
    border-radius:12px;
    padding:10px;
    margin-top:10px;
    font-size:9px;
    color:#fff;
  }
  .smc-phone__promo strong{ font-size:12px; display:block; margin-bottom:4px;}
  .smc-phone__products{
    display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px;
  }
  .smc-phone__product{
    background: rgba(255,255,255,0.04);
    border-radius:8px;
    padding:8px 4px;
    text-align:center;
    font-size:7px;
    color:#cfcbd4;
  }

  .smc-badge{
    position:absolute;
    width:60px; height:60px;
    border-radius:18px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px;
    font-size:9px;
    font-weight:700;
    color:#fff;
    background: rgba(20,18,22,0.9);
    z-index:4;
  }
  .smc-badge--ios{ left:-5%; top:18%; border:1px solid rgba(239,45,126,0.5); }
  .smc-badge--android{ right:2%; top:18%; border:1px solid rgba(246,146,58,0.5); }
  .smc-badge--float{ animation: smc-float-y 4s ease-in-out infinite; }
  .smc-badge--float-2{ animation: smc-float-y 4.5s ease-in-out infinite 0.6s; }

  .smc-phone__balance-chart polyline{
    animation: smc-draw-line 1.6s ease forwards;
    animation-delay: 1.1s;
  }
  .smc-tx-row--1, .smc-tx-row--2, .smc-tx-row--3{
    opacity:0;
    animation: smc-count-fade 0.5s ease forwards;
  }
  .smc-tx-row--1{ animation-delay: 1.5s; }
  .smc-tx-row--2{ animation-delay: 1.65s; }
  .smc-tx-row--3{ animation-delay: 1.8s; }
  .smc-badge__icon{ font-size:20px; }

  /* ================= SMC-HERO — RESPONSIVE (ALL SIZES) ================= */

@media (max-width: 980px){
  .smc-hero{
    padding: 80px 0 40px;
  }
  .smc-hero__grid{
    display:flex;
    flex-direction:column;
    gap: 40px;
  }
  .smc-hero-content{
    order:1;
  }
  .smc-hero__visual{
    order:2;
    min-height:360px;
    overflow: hidden;
  }
  .smc-hero__title{
    font-size: 34px;
  }
  .smc-hero__desc{
    font-size: 15px;
    max-width: 100%;
  }
  .smc-hero__features{
    gap: 12px 22px;
    margin-bottom: 28px;
  }
  .smc-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .smc-phones{
    transform: scale(0.62);
    transform-origin: center center;
  }
}

@media (max-width: 640px){
  .smc-container{
    padding: 0 20px;
  }
  .smc-hero{
    padding: 70px 0 36px;
  }
  .smc-hero__grid{
    gap: 32px;
  }
  .smc-hero__title{
    font-size: 27px;
    line-height: 1.2;
    margin: 14px 0 14px;
  }
  .smc-hero__desc{
    font-size: 13.5px;
    margin-bottom: 20px;
  }
  .smc-hero__features{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
  }
  .smc-hero__feature{
    font-size: 13px;
  }
  .smc-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .smc-stat{
    padding: 16px 12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .smc-stat__num{
    font-size: 19px;
  }
  .smc-stat__label{
    font-size: 10.5px;
  }
  .smc-stat__icon{
    width: 28px;
    height: 28px;
    font-size: 13px;
    margin-bottom: 8px;
  }
  .smc-hero__visual{
    min-height: 300px;
  }
 .smc-phones{
    transform: scale(0.6);
    transform-origin: center center;
  }
  .smc-hero__visual:hover .smc-phones{
    transform: scale(0.72) rotateY(-6deg) rotateX(3deg);
  }
  .smc-badge{
    width: 48px;
    height: 48px;
    font-size: 8px;
    border-radius: 14px;
  }
  .smc-badge__icon{
    font-size: 16px;
  }
  .smc-hero__stats-wrap{
    overflow-x:auto;
  }
}

@media (max-width: 380px){
  .smc-hero__title{
    font-size: 23px;
  }
  .smc-stats{
    grid-template-columns: 1fr 1fr;
  }
  .smc-stat__num{
    font-size: 17px;
  }
  .smc-phones{
    transform: scale(0.48);
  }
}

  /* ---------------- SECTION 2: Powerful Apps ---------------- */
.smc-platforms{
  position:relative;
  background: var(--smc-white);
  padding: 88px 0;
  overflow:hidden;
}
.smc-platforms::before{
  content:"";
  position:absolute;
  top:-100px; right:-80px;
  width:520px; height:520px;
  background: radial-gradient(circle, rgba(239,45,126,0.16), transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: smc-platform-blob-1 12s ease-in-out infinite;
}
.smc-platforms::after{
  content:"";
  position:absolute;
  bottom:-120px; left:-80px;
  width:460px; height:460px;
  background: radial-gradient(circle, rgba(246,146,58,0.14), transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: smc-platform-blob-2 15s ease-in-out infinite;
}
@keyframes smc-platform-blob-1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-30px, 25px) scale(1.1); }
}
@keyframes smc-platform-blob-2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(25px, -20px) scale(1.08); }
}
.smc-platforms__top, .smc-perks{
  position:relative;
  z-index:1;
}
  .smc-platforms__top{
    display:grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    align-items:start;
  }
  .smc-section-title{
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    line-height:1.2;
    margin: 14px 0 16px;
    color: var(--smc-text-dark);
  }
  .smc-section-desc{
    color: var(--smc-text-muted);
    font-size:15px;
    max-width:400px;
  }
  .smc-platform-cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

.smc-platform-card{
  background: var(--smc-cream);
  border: 1px solid #ece1da;
  border-radius: var(--smc-radius);
  border-color: var(--smc-pink);
  padding: 28px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow: 0 6px 18px rgba(20,18,23,0.05);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.smc-platform-card:hover{
  border-color: var(--smc-pink);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(239,45,126,0.12);
}
.smc-platform-card__icon{
  width:54px; height:54px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(239,45,126,0.14), rgba(246,146,58,0.1));
  font-size:26px;
  transition: transform 0.25s ease;
}
.smc-platform-card:hover .smc-platform-card__icon{
  transform: scale(1.08) rotate(-4deg);
}
  .smc-platform-card__title{ font-size:17px; font-weight:700; color: var(--smc-text-dark); }
  .smc-platform-card__text{ font-size:13.5px; color: var(--smc-text-muted); }
.smc-platform-card__underline{
  width:32px; height:4px;
  background: var(--smc-gradient);
  border-radius:3px;
  margin-top:auto;
  transition: width 0.3s ease;
}
.smc-platform-card:hover .smc-platform-card__underline{
  width:56px;
}

.smc-perks{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
  padding-top: 40px;
  position:relative;
}
.smc-perk{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:20px 12px;
  border-radius:16px;
  position: relative;
  transition: background 0.25s ease, transform 0.25s ease;
}

.smc-perk__label::after{
  content:"";
  position:absolute;
  bottom:0; left:0;
  width:0;
  height:2px;
  background: var(--smc-gradient);
  transition: width 0.25s ease;
}
.smc-perk:hover{
  background: var(--smc-cream);
  transform: translateY(-3px);
}
.smc-perk:not(:last-child)::after{
  content:"";
  position:absolute;
  top:10px; right:-12px;
  bottom:10px;
  width:1px;
  background: #ece1da;
}
.smc-perks::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:70%;
  height:1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ece1da 20%, #ece1da 80%, transparent);
}
.smc-perks::after{
  content:"✦";
  position:absolute;
  top:-8px; left:50%;
  transform: translateX(-50%);
  color: var(--smc-pink);
  font-size:14px;
  background: var(--smc-white);
  padding: 0 12px;
}
.smc-perk__icon{
  width:70px; height:70px;
  border-radius:16px;
  background: linear-gradient(135deg, var(--smc-pink), #f6923a);
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  color:#fff;
  box-shadow: 0 8px 22px rgba(239,45,126,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: smcPerkPulse 2.4s ease-in-out infinite;
}

.smc-perk:hover .smc-perk__icon{
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 14px 30px rgba(239,45,126,0.5);
}
.smc-perk__label{
  font-size:16px;
  font-weight:600;
  position:relative;
  padding-bottom:4px;
  color: var(--smc-text-dark);
}
.smc-perk__label::after{
  content:"";
  position:absolute;
  bottom:0; left:0;
  width:0;
  height:2px;
  background: var(--smc-gradient);
  transition: width 0.25s ease;
}
.smc-perk:hover .smc-perk__label::after{
  width:100%;
}
.smc-perk__desc{
  font-size:15.5px;
  color: maroon;
  margin-top:2px;
}
.smc-platforms__badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.smc-platforms__badge{
  font-size:13.5px;
  font-weight:600;
  padding:8px 14px;
  border-radius:999px;
  background: #fff;
  border:1.5px solid;
  transition: transform .2s ease;
}
.smc-platforms__badge:hover{ transform: translateY(-2px); }
.smc-badge-swift{ border-color:#ff5722; color:#ff5722; }
.smc-badge-kotlin{ border-color:#8b5cf6; color:#8b5cf6; }
.smc-badge-react{ border-color:#3ba7ff; color:#3ba7ff; }
.smc-badge-flutter{ border-color:#2dd4c7; color:#2dd4c7; }

@keyframes smcPerkPulse{
  0%,100%{ box-shadow: 0 4px 14px rgba(239,45,126,0.08); }
  50%{ box-shadow: 0 4px 22px rgba(239,45,126,0.28); }
}
.smc-perk__icon{
  animation: smcPerkPulse 2.4s ease-in-out infinite;
}
.smc-perk:nth-child(1) .smc-perk__icon{ animation-delay:0s; }
.smc-perk:nth-child(2) .smc-perk__icon{ animation-delay:.3s; }
.smc-perk:nth-child(3) .smc-perk__icon{ animation-delay:.6s; }
.smc-perk:nth-child(4) .smc-perk__icon{ animation-delay:.9s; }
.smc-platform-cards{
  perspective: 1000px;
}
.smc-platform-card{
  position:relative;
  transform-style: preserve-3d;
  transition: transform .15s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.smc-platform-card__num{
  font-size:26px;
  font-weight:800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(239,45,126,.4);
  position:absolute;
  top:16px; right:20px;
}
.smc-platform-card__icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--smc-gradient);
  color:#fff;
  font-size:22px;
  box-shadow: 0 10px 24px rgba(239,45,126,.35);
  transition: transform 0.25s ease;
}
.smc-platform-card:hover .smc-platform-card__icon{
  transform: scale(1.1) rotate(-6deg);
}
  /* ---------------- SECTION 3: Ecosystem ---------------- */
  .smc-ecosystem{
    background: var(--smc-black);
    color:#fff;
    padding: 75px 0;
    overflow-x:auto;
  }
  .smc-ecosystem__intro{
    max-width:670px;
    margin-bottom:57px;
  }
  .smc-flow{
    display:flex;
    align-items:center;
    gap: 14px;
    flex-wrap:nowrap;
  }
  .smc-flow__phone{
    width:155px;
    background:#141017;
    border:6px solid #211c26;
    border-radius:29px;
    padding:14px 10px;
    flex-shrink:0;
  }
  .smc-flow__phone-label{ font-size:8px; color:#8f8b93; }
.smc-flow__phone-ring{
  width:64px; height:64px;
  border-radius:50%;
  border:6px solid #2a2430;
  border-top-color: var(--smc-pink);
  border-right-color: var(--smc-orange);
  margin: 12px auto;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
  animation: smc-ring-spin 3s linear infinite;
}
@keyframes smc-ring-spin{
  to{ transform: rotate(360deg); }
}
  .smc-flow__phone-bars{
    display:flex; align-items:flex-end; gap:3px; height:30px; margin-top:10px;
  }
.smc-flow__phone-bars span{
  flex:1; background: linear-gradient(180deg, var(--smc-pink), var(--smc-orange)); border-radius:2px;
  animation: smc-bar-pulse 1.6s ease-in-out infinite;
}
.smc-flow__phone-bars span:nth-child(1){ animation-delay:0s; }
.smc-flow__phone-bars span:nth-child(2){ animation-delay:0.15s; }
.smc-flow__phone-bars span:nth-child(3){ animation-delay:0.3s; }
.smc-flow__phone-bars span:nth-child(4){ animation-delay:0.45s; }
.smc-flow__phone-bars span:nth-child(5){ animation-delay:0.6s; }
.smc-flow__phone-bars span:nth-child(6){ animation-delay:0.75s; }
@keyframes smc-bar-pulse{
  0%,100%{ transform: scaleY(0.6); opacity:0.7; }
  50%{ transform: scaleY(1); opacity:1; }
}
.smc-flow__arrow{
  color: var(--smc-orange);
  font-size:48px;
  flex-shrink:0;
  position:relative;
  width:25px;
  text-align:center;
  overflow:visible;
}
.smc-flow__arrow::after{
  content:"";
  position:absolute;
  top:50%; left:0;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--smc-pink);
  box-shadow: 0 0 8px var(--smc-pink), 0 0 14px rgba(239,45,126,0.6);
  transform: translateY(-50%);
  animation: smc-dot-travel 1.8s linear infinite;
}
.smc-flow__arrow:nth-of-type(1)::after{ animation-delay: 0s; }
@keyframes smc-dot-travel{
  0%{ left:0; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}
  .smc-flow__box{
    background:#141017;
    border:1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 16px;
    width: 150px;
    flex-shrink:0;
    text-align:center;
  }
  .smc-flow__box:hover{
  border-color: rgba(239,45,126,0.5);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(239,45,126,0.15);
}
  .smc-flow__box-icon{
    font-size:29px;
    color: var(--smc-pink);
    margin-bottom:10px;
  }
  .smc-flow__box-title{ font-size:18px; font-weight:700; margin-bottom:9px; color: white;}
  .smc-flow__box-text{ font-size:15.5px; color:whitesmoke; line-height:1.4;}

  .smc-flow__integrations{
    background:#141017;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:18px 18px;
    width: 170px;
    flex-shrink:0;
  }
  .smc-flow__integrations-title{ font-size:18px; font-weight:700; margin-bottom:14px;}
  .smc-flow__integrations li{
    display:flex; align-items:center; gap:10px;
    font-size:14px; color: whitesmoke;
    padding:5px 0;
  }
.smc-flow__integrations li span:first-child{
  color: var(--smc-pink);
  font-size:12px;
  width:29px; height:29px;
  border-radius:7px;
  background: linear-gradient(135deg, rgba(239,45,126,0.18), rgba(246,146,58,0.12));
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
  .smc-flow__caption{
    text-align:center;
    font-size:13px;
    font-weight:700;
    color: var(--smc-pink);
    margin-top:10px;
  }


  /* ---------------- SECTION 4: Business Impact ---------------- */
  .smc-impact{
  background: linear-gradient(160deg, var(--smc-cream) 0%, #f9d9e4 50%, #fce0c8 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.smc-impact::before{
  content:"";
  position:absolute; top:-10%; left:-8%;
  width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(239,45,126,.10), transparent 70%);
  filter: blur(20px);
  animation: smcImpactBlobDrift 8s ease-in-out infinite;
}
@keyframes smcImpactBlobDrift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(20px,-15px) scale(1.08); }
}
.smc-impact::after{
  content:"";
  position:absolute; bottom:-12%; right:-8%;
  width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(246,146,58,.12), transparent 70%);
  filter: blur(20px);
  animation: smcImpactBlobDrift2 10s ease-in-out infinite;
  z-index:0;
}
@keyframes smcImpactBlobDrift2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-18px,15px) scale(1.1); }
}

.smc-impact .smc-container{ position:relative; z-index:1; }

@keyframes smcImpactFadeUp{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}
.smc-impact .smc-eyebrow,
.smc-impact .smc-section-title,
.smc-impact__desc{
  opacity:0;
  animation: smcImpactFadeUp .6s ease forwards;
}
.smc-impact .smc-eyebrow{ animation-delay:.1s; }
.smc-impact .smc-section-title{ animation-delay:.25s; }
.smc-impact__desc{ animation-delay:.4s; }
  .smc-impact__grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items:center;
  }
  .smc-impact__desc{
    color: var(--smc-text-muted);
    font-size:15px;
    max-width:420px;
    margin-bottom:32px;
  }
  .smc-impact__list{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px;
  }
  .smc-impact__item{
    display:flex;
    gap:12px;
  }
  .smc-impact__icon{
    width:40px; height:40px;
    border-radius:10px;
    background: var(--smc-pink);
    color: var(--smc-pink);
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
    flex-shrink:0;
  }
  .smc-impact__item-title{ font-size:16.5px; font-weight:700; margin-bottom:4px; color: #000;}
  .smc-impact__item-text{ font-size:13.5px; color: var(--smc-text-muted); line-height:1.4;}

  .smc-impact__visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:460px;
  }
  .smc-impact__blob{
    position:absolute;
    width: 340px; height:340px;
    background: radial-gradient(circle, rgba(239,45,126,0.16), rgba(246,146,58,0.06) 70%, transparent 80%);
    border-radius:50%;
  }
  .smc-impact__phone{
    width:220px;
    background:#0d0d10;
    border:7px solid #1c1c22;
    border-radius:36px;
    padding:16px 14px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
    position:relative;
    z-index:2;
  }
  .smc-impact__phone-notch{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:80px; height:20px; background:#1c1c22; border-radius:0 0 14px 14px;
  }
  .smc-impact__phone-label{ font-size:10px; color:#8f8b93; margin-top:10px;}
  .smc-impact__phone-amount{ font-size:22px; font-weight:800; color:#fff; margin:4px 0;}
  .smc-impact__phone-delta{ font-size:10px; color:#3ddc84; margin-bottom:8px;}
  .smc-impact__phone-chart{ height:60px; }
  .smc-impact__phone-products{ margin-top:14px; }
  .smc-impact__phone-heading{ font-size:9px; color:#8f8b93; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px;}
  .smc-impact__phone-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:9.5px; color:#cfcbd4; padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .smc-impact__phone-row span:last-child{ color:#fff; font-weight:600;}

  .smc-impact__float{
    position:absolute;
    background:#000;
    border-radius:12px;
    padding:12px 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:600;
    z-index:3;
    width:150px;
  }
  .smc-impact__float-icon{
    width:35px;height:35px;border-radius:8px;
    background: var(--smc-cream-2);
    color: var(--smc-pink);
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
    flex-shrink:0;
  }
  .smc-impact__float--tl{ top:6%; left:-2%; }
  .smc-impact__float--bl{ bottom:8%; left:-4%; }
  .smc-impact__float--tr{ top:8%; right:-4%; }
  .smc-impact__float--br{ bottom:12%; right:-2%; }


  /* blob pulse */
@keyframes smcImpactBlob{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.1); opacity:.85; }
}
.smc-impact__blob{
  animation: smcImpactBlob 6s ease-in-out infinite;
}

/* phone entrance + float */
@keyframes smcPhoneIn{
  from{ opacity:0; transform: scale(.85) translateY(30px); }
  to{ opacity:1; transform: scale(1) translateY(0); }
}
@keyframes smcPhoneFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
.smc-impact__phone{
  opacity:0;
  animation: smcPhoneIn .8s ease forwards, smcPhoneFloat 5s ease-in-out 1s infinite;
}

/* chart line draw */
.smc-impact__phone-chart polyline{
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: smcChartDraw 1.6s ease forwards 1.2s;
}
@keyframes smcChartDraw{
  to{ stroke-dashoffset: 0; }
}

/* floating badges — staggered pop-in + individual float rhythm */
@keyframes smcFloatPop{
  from{ opacity:0; transform: translateY(20px) scale(.7); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes smcFloatDrift{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.smc-impact__float{
  opacity:0;
  animation: smcFloatPop .6s ease forwards, smcFloatDrift 4s ease-in-out infinite;
}
.smc-impact__float--tl{ animation-delay: .3s, 1.5s; }
.smc-impact__float--bl{ animation-delay: .5s, 1.8s; }
.smc-impact__float--tr{ animation-delay: .7s, 2.1s; }
.smc-impact__float--br{ animation-delay: .9s, 2.4s; }

/* left list items — staggered slide-in */
@keyframes smcImpactItemIn{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}
.smc-impact__item{
  opacity:0;
  animation: smcImpactItemIn .6s ease forwards;
}
.smc-impact__item:nth-child(1){ animation-delay:.1s; }
.smc-impact__item:nth-child(2){ animation-delay:.25s; }
.smc-impact__item:nth-child(3){ animation-delay:.4s; }
.smc-impact__item:nth-child(4){ animation-delay:.55s; }

/* icon hover pop */
.smc-impact__icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.smc-impact__item:hover .smc-impact__icon{
  transform: scale(1.15) rotate(-6deg);
  background: var(--smc-gradient);
  color:#fff;
}
/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 980px){
  .smc-hero{ padding: 80px 0 40px; }
  .smc-hero__grid{
    display:flex;
    flex-direction:column;
    gap: 40px;
  }
  .smc-hero-content{ order:1; }
  .smc-hero__visual{
    order:2;
    width:100%;
    overflow:visible;
    min-height:420px;
  }
  .smc-hero__title{ font-size: 34px; }
  .smc-hero__desc{ font-size: 15px; max-width: 100%; }
  .smc-hero__features{ gap: 12px 22px; margin-bottom: 28px; }
  .smc-stats{ grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* other sections — unchanged */
  .smc-platforms__top{ grid-template-columns:1fr; }
  .smc-platform-cards{ grid-template-columns:1fr 1fr; }
  .smc-perks{ grid-template-columns: 1fr 1fr; }
  .smc-impact__grid{ grid-template-columns:1fr; }
  .smc-impact__grid > :not(.smc-impact__visual){ order:1; }
  .smc-impact__visual{ order:2; }
}

@media (max-width: 640px){
  .smc-container{ padding:0 20px; }

  .smc-hero{ padding: 70px 0 36px; }
  .smc-hero__grid{ gap: 32px; }
  .smc-hero__title{ font-size: 27px; line-height: 1.2; margin: 14px 0 14px; }
  .smc-hero__desc{ font-size: 13.5px; margin-bottom: 20px; }
  .smc-hero__features{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
  }
  .smc-hero__feature{ font-size: 13px; }

  .smc-stats{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .smc-stat{
    padding: 16px 12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .smc-stat__num{ font-size: 19px; }
  .smc-stat__label{ font-size: 10.5px; }
  .smc-stat__icon{ width: 28px; height: 28px; font-size: 13px; margin-bottom: 8px; }

  /* PHONES — no scale(), real size reduced so nothing gets clipped */
  .smc-hero__visual{
    min-height: 330px;
    padding: 26px 10px 34px;
    overflow:visible;
  }
  .smc-phones{
    width:max-content;
    max-width:100%;
    margin:0 auto;
    transform:none;
  }
  .smc-phone{
    width: 130px;
    height: 250px;
    flex:0 0 auto;
    padding: 8px 6px;
    border-radius: 20px;
    border-width: 4px;
    gap: 10px;
  }
  .smc-phone--front{
    margin-left: -30px;
    transform: translateY(18px);
  }
  .smc-phone--back{
    transform: translateY(-6px) scale(0.96);
  }
  .smc-hero__visual:hover .smc-phone--front{
    transform: translateY(16px) translateZ(20px);
  }
  .smc-hero__visual:hover .smc-phone--back{
    transform: translateY(-8px) scale(0.96) translateZ(-10px);
  }

  .smc-phone__notch{ width: 40px; height: 10px; }
  .smc-phone__status{ font-size: 6px; }
  .smc-phone__greeting{ font-size: 7px; margin-top: 4px; }
  .smc-phone__name{ font-size: 9px; }
  .smc-phone__balance-card{ padding: 7px; margin-top: 5px; border-radius: 9px; }
  .smc-phone__balance-label{ font-size: 6px; }
  .smc-phone__balance-amount{ font-size: 13px; margin-top: 2px; }
  .smc-phone__tx-row{ font-size: 6.5px; padding: 4px 0; }
  .smc-phone__tabbar{ padding-top: 5px; }
  .smc-phone__tab{ font-size: 6px; }
  .smc-phone__cats{ gap: 4px; margin-top: 6px; }
  .smc-phone__cat{ padding: 5px 2px; font-size: 5px; border-radius: 7px; }
  .smc-phone__cat-ic{ font-size: 9px; }
  .smc-phone__promo{ padding: 6px; margin-top: 6px; font-size: 6px; border-radius: 8px; }
  .smc-phone__promo strong{ font-size: 8px; margin-bottom: 2px; }
  .smc-phone__products{ gap: 4px; margin-top: 6px; }
  .smc-phone__product{ padding: 5px 2px; font-size: 5px; border-radius: 6px; }

  .smc-badge{ width: 34px; height: 34px; font-size: 6px; border-radius: 10px; gap: 1px; }
  .smc-badge__icon{ font-size: 11px; }
  .smc-badge--ios{ left:-2%; top:14%; }
  .smc-badge--android{ right:-2%; top:14%; }

  /* other sections — unchanged */
  .smc-platform-cards{ grid-template-columns:1fr; }
  .smc-perks{ grid-template-columns:1fr 1fr; gap:20px 14px; }
  .smc-impact__list{ grid-template-columns:1fr; }
  .smc-impact__float{ display:none; }
  .smc-hero__stats-wrap{ overflow-x:auto; }
}

@media (max-width: 380px){
  .smc-hero__title{ font-size: 23px; }
  .smc-stats{ grid-template-columns: 1fr 1fr; }
  .smc-stat__num{ font-size: 17px; }

  .smc-hero__visual{
    min-height:280px;
    padding-top:24px;
    padding-bottom:30px;
    overflow:visible;
  }
  .smc-phone{
    width: 108px;
    height: 210px;
    padding: 6px 5px;
    border-width: 3px;
    border-radius: 16px;
  }
  .smc-phone--front{
    margin-left: -24px;
    transform: translateY(14px);
  }
  .smc-phone__balance-amount{ font-size: 11px; }
  .smc-badge{ width: 28px; height: 28px; font-size: 5px; }
  .smc-badge__icon{ font-size: 9px; }
  .smc-hero__stats-wrap{ overflow-x:auto; }
}

/* =========================================================
   SECTION 3 + SECTION 4 — MOBILE RESPONSIVE FIX
   ========================================================= */
@media (max-width:980px){
  /* Section 3: horizontal desktop flow becomes vertical */
  .smc-ecosystem{
    padding:64px 0;
    overflow-x:hidden;
  }
  .smc-ecosystem__intro{
    width:100%;
    max-width:100%;
    margin-bottom:38px;
  }
  .smc-flow{
    width:100%;
    max-width:100%;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:14px;
  }
  .smc-flow__phone{
    width:190px;
    max-width:70vw;
    margin:0 auto;
  }
  .smc-flow__arrow{
    width:34px;
    height:34px;
    line-height:34px;
    margin:0 auto;
    font-size:38px;
    transform:rotate(90deg);
  }
  .smc-flow__box,
  .smc-flow__integrations{
    width:100%;
    max-width:520px;
    margin:0 auto;
  }
  .smc-flow__caption{
    width:100%;
    margin-top:18px;
  }

  /* Section 4: text first and image second */
  .smc-impact__grid{
    grid-template-columns:1fr;
    gap:38px;
  }
  .smc-impact__grid > *{min-width:0;}
  .smc-impact__grid > :not(.smc-impact__visual){order:1;}
  .smc-impact__visual{order:2;}
}

@media (max-width:640px){
  .smc-ecosystem{padding:48px 0;}
  .smc-ecosystem__intro{margin-bottom:30px;}
  .smc-flow{gap:12px;}
  .smc-flow__phone{
    width:min(180px,70vw);
    padding:13px 10px;
    border-width:5px;
    border-radius:25px;
  }
  .smc-flow__phone-ring{
    width:58px;
    height:58px;
    margin:10px auto;
  }
  .smc-flow__arrow{
    width:30px;
    height:30px;
    line-height:30px;
    font-size:34px;
  }
  .smc-flow__box,
  .smc-flow__integrations{
    max-width:100%;
    padding:16px 14px;
  }
  .smc-flow__box-title,
  .smc-flow__integrations-title{font-size:16px;}
  .smc-flow__box-text{font-size:13.5px;}
  .smc-flow__integrations li{font-size:13px;}
  .smc-flow__caption{
    font-size:12px;
    line-height:1.5;
  }

  .smc-impact{padding:54px 0;}
  .smc-impact__grid{gap:28px;}
  .smc-impact__desc{
    max-width:100%;
    margin-bottom:26px;
  }
  .smc-impact__visual{
    order:2;
    width:100%;
    min-height:390px;
    overflow:hidden;
  }
  .smc-impact__blob{width:280px;height:280px;}
  .smc-impact__phone{
    width:min(210px,72vw);
    padding:15px 13px;
  }
}

@media (max-width:380px){
  .smc-ecosystem{padding:42px 0;}
  .smc-flow__phone{width:160px;}
  .smc-flow__box,
  .smc-flow__integrations{padding:14px 12px;}

  .smc-impact__visual{min-height:350px;}
  .smc-impact__phone{width:190px;}
  .smc-impact__blob{width:240px;height:240px;}
}

/*// =======================================================
 //            Paid Advertising & Lead Generation
 // =======================================================*/

/*==============================================================
                  Paid Advertising & Lead Generation
==============================================================*/
  /* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --pal-ink:#0a0a0d;
    --pal-ink-soft:#141319;
    --pal-ink-line:#27252f;
    --pal-cream:#f6efe2;
    --pal-cream-soft:#fbf6ec;
    --pal-pink:#ef1568;
    --pal-pink-dim:#c01057;
    --pal-line-dark:rgba(255,255,255,.22);
    --pal-line-cream:#c9bfa4;
    --pal-pink-soft:#fbdde9;
    --pal-orange:#f2542d;
    --pal-orange-soft:#fbdfd0;
    --pal-blue:#2f8fff;
    --pal-blue-soft:#dcebff;
    --pal-teal:#17c9a8;
    --pal-teal-soft:#d9f7f0;
    --pal-text-dark:#18151b;
    --pal-text-dark-muted:#736d7a;
    --pal-text-light:#f6f3ee;
    --pal-text-light-muted:#a49eae;
    --pal-font-display:'Space Grotesk', sans-serif;
    --pal-font-body:'Inter', sans-serif;
    --pal-radius-lg:20px;
    --pal-radius-md:14px;
    --pal-radius-sm:8px;
    --pal-maxw:1240px;
    /* screen-scene colors (device mockup "photo" area) */
    --pal-scene-sky-1:#141a29;
    --pal-scene-sky-2:#1d2740;
    --pal-scene-sky-3:#293654;
    --pal-scene-peak-back:rgba(255,255,255,.08);
    --pal-scene-peak-front:rgba(255,255,255,.16);
    --pal-purple:#9b5de5;
    --pal-purple-soft:#ece1fb;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family:var(--pal-font-body);
    color:var(--pal-text-dark);
    background:var(--pal-cream);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{ display:block; max-width:100%; }
  h1,h2,h3{ font-family:var(--pal-font-display); margin:0; }
  p{ margin:0; }
  a{ text-decoration:none; color:inherit; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; }

  .pal-wrap{
    max-width:var(--pal-maxw);
    margin:0 auto;
    padding:0 48px;
  }

.pal-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pal-pink);
  margin-bottom:16px;
  padding:6px 14px 6px 6px;
  border:1px solid rgba(239,21,104,.35);
  border-radius:999px;
  background:rgba(239,21,104,.08);
}
.pal-eyebrow__icon{
  width:20px; height:20px; border-radius:50%;
  background:var(--pal-pink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.pal-eyebrow__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--pal-pink);
  margin-left:2px;
  animation:palEyebrowPulse 1.6s ease-in-out infinite;
}
@keyframes palEyebrowPulse{
  0%,100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(239,21,104,.5); }
  50%{ opacity:.6; transform:scale(1.3); box-shadow:0 0 0 4px rgba(239,21,104,0); }
}
  .pal-eyebrow::before{
    content:"";
    width:16px; height:2px;
    background:var(--pal-pink);
    display:inline-block;
    border-radius:2px;
  }

  /* ============================================================
     SCROLL-REVEAL ANIMATION ENGINE
     ============================================================ */
  .pal-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.22,.8,.28,1), transform .8s cubic-bezier(.22,.8,.28,1);
    transition-delay:var(--pal-delay, 0s);
  }
  .pal-reveal.is-visible{ opacity:1; transform:translateY(0); }
  .pal-reveal--pop{ transform:scale(.92) translateY(10px); }
  .pal-reveal--pop.is-visible{ transform:scale(1) translateY(0); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .pal-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    *{ animation:none !important; }
  }

  /* ============================================================
     SHARED — DEVICE MOCKUP COMPONENT ("scene" = fake webpage)
     ============================================================ */
  .pal-scene{
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 82% 14%, rgba(239,21,104,.35), transparent 40%),
      linear-gradient(180deg, var(--pal-scene-sky-1) 0%, var(--pal-scene-sky-2) 55%, var(--pal-scene-sky-3) 100%);
    overflow:hidden;
  }
  .pal-scene__peak{
    position:absolute; left:0; right:0; bottom:0; height:62%;
  }
  .pal-scene__peak--back{
    background:var(--pal-scene-peak-back);
    clip-path:polygon(0% 100%,0% 66%,14% 48%,28% 62%,44% 30%,58% 55%,74% 40%,88% 58%,100% 46%,100% 100%);
  }
  .pal-scene__peak--front{
    background:var(--pal-scene-peak-front);
    clip-path:polygon(0% 100%,0% 80%,18% 58%,34% 76%,52% 52%,68% 74%,84% 56%,100% 76%,100% 100%);
  }

  .pal-mock{ position:relative; width:100%; }
  .pal-mock__navbar{
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 5%;
    height:15%;
    background:rgba(8,8,11,.55);
    backdrop-filter:blur(2px);
  }
  .pal-mock__brand{
    font-family:var(--pal-font-display);
    font-weight:700;
    color:#fff;
    font-size:11px;
  }
  .pal-mock__navlinks{
    display:flex; align-items:center; gap:9px;
  }
  .pal-mock__navlinks span{
    font-size:6.5px;
    color:var(--pal-text-light-muted);
    font-weight:600;
  }
  .pal-mock__navlinks em{
    font-style:normal;
    font-size:6.5px;
    font-weight:700;
    color:#fff;
    background:var(--pal-pink);
    padding:3px 8px;
    border-radius:20px;
  }
  .pal-mock__burger{
    width:16px; height:11px;
    position:relative;
  }
  .pal-mock__burger span, .pal-mock__burger::before, .pal-mock__burger::after{
    content:""; position:absolute; left:0; right:0; height:1.4px; background:#fff; border-radius:2px;
  }
  .pal-mock__burger::before{ top:0; }
  .pal-mock__burger span{ top:50%; transform:translateY(-50%); }
  .pal-mock__burger::after{ bottom:0; }

  .pal-mock__body{
    position:relative; z-index:2;
    padding:9% 6% 0;
  }
  .pal-mock__headline{
    font-family:var(--pal-font-display);
    font-weight:700;
    color:#fff;
    line-height:1.18;
    font-size:15px;
    max-width:62%;
    margin-bottom:9%;
  }
  .pal-mock__cta{
    display:inline-block;
    background:var(--pal-pink);
    color:#fff;
    font-weight:700;
    font-size:7px;
    letter-spacing:.02em;
    padding:6px 14px;
    border-radius:5px;
    margin-bottom:11%;
  }
  .pal-mock__chips{
    display:flex; gap:6%;
  }
  .pal-mock__chip{
    flex:1;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:6px;
    padding:7% 6%;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    text-align:center;
  }
  .pal-mock__chip svg{ color:var(--pal-pink); width:11px; height:11px; }
  .pal-mock__chip span{
    font-size:5.6px; font-weight:700; color:var(--pal-text-light-muted); line-height:1.3;
  }

  /* size modifiers scale the whole internal typography */
  .pal-mock--lg .pal-mock__headline{ font-size:19px; }
  .pal-mock--lg .pal-mock__cta{ font-size:8.5px; padding:8px 18px; }
  .pal-mock--sm .pal-mock__headline{ font-size:11px; margin-bottom:12%; }
  .pal-mock--sm .pal-mock__cta{ font-size:6px; padding:4px 10px; }
  .pal-mock--sm .pal-mock__navlinks{ display:none; }
  .pal-mock--xs .pal-mock__headline{ font-size:8.5px; margin-bottom:14%; max-width:78%;}
  .pal-mock--xs .pal-mock__cta{ font-size:5px; padding:3px 8px; }
  .pal-mock--xs .pal-mock__navlinks{ display:none; }
  .pal-mock--xs .pal-mock__chips{ gap:8%; }
  .pal-mock--xs .pal-mock__chip{ padding:9% 5%; }

  /* Laptop frame */
  .pal-laptop{ width:100%; filter:drop-shadow(0 30px 46px rgba(0,0,0,.45)); }
  .pal-laptop__screen{
    position:relative;
    border:7px solid #16151b;
    border-bottom:none;
    border-radius:12px 12px 0 0;
    aspect-ratio:16/10.4;
    background:#0b0c10;
    overflow:hidden;
  }
  .pal-laptop__base{
    height:9px;
    background:linear-gradient(180deg,#232229,#131217);
    border-radius:0 0 4px 4px;
    position:relative;
  }
  .pal-laptop__base::after{
    content:"";
    position:absolute; left:50%; top:0; transform:translateX(-50%);
    width:14%; height:4px; background:#34323b; border-radius:0 0 5px 5px;
  }

  /* Tablet frame */
  .pal-tablet{ width:100%; filter:drop-shadow(0 24px 40px rgba(0,0,0,.42)); }
  .pal-tablet__body{
    position:relative;
    border:7px solid #16151b;
    border-radius:16px;
    aspect-ratio:3/4;
    background:#0b0c10;
    overflow:hidden;
  }
  .pal-tablet__body::before{
    content:"";
    position:absolute; top:5px; left:50%; transform:translateX(-50%);
    width:5px; height:5px; border-radius:50%;
    background:#2c2b33; z-index:3;
  }

  /* Phone frame */
  .pal-phone{ width:100%; filter:drop-shadow(0 18px 32px rgba(0,0,0,.4)); }
  .pal-phone__body{
    position:relative;
    border:6px solid #16151b;
    border-radius:22px;
    aspect-ratio:9/18.5;
    background:#0b0c10;
    overflow:hidden;
  }
  .pal-phone__body::before{
    content:"";
    position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:26%; height:5px; border-radius:6px;
    background:#16151b; z-index:3;
  }

  /* ============================================================
     SECTION 1 — HERO
     ============================================================ */
  .pal-hero{
    background:
      radial-gradient(ellipse 900px 520px at 84% 6%, rgba(239,21,104,.22), transparent 62%),
      radial-gradient(ellipse 620px 420px at 6% 92%, rgba(239,21,104,.10), transparent 60%),
      var(--pal-ink);
    color:var(--pal-text-light);
    padding:96px 0 88px;
    position:relative;
    overflow:hidden;
  }
  .pal-hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(ellipse 900px 600px at 78% 10%, #000 0%, transparent 70%);
            mask-image:radial-gradient(ellipse 900px 600px at 78% 10%, #000 0%, transparent 70%);
    pointer-events:none;
  }
  .pal-hero::after{
    content:"";
    position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(239,21,104,.55), transparent);
  }
  .pal-hero__blob{
    position:absolute; border-radius:50%; filter:blur(70px);
    pointer-events:none; z-index:0;
    animation:palDrift 12s ease-in-out infinite;
  }
  .pal-hero__blob--a{
    width:380px; height:380px; top:-120px; right:-60px;
    background:radial-gradient(circle, rgba(239,21,104,.32), transparent 70%);
  }
  .pal-hero__blob--b{
    width:280px; height:280px; bottom:-90px; right:28%;
    background:radial-gradient(circle, rgba(255,120,170,.16), transparent 70%);
    animation-delay:-4s; animation-duration:15s;
  }
  @keyframes palDrift{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-18px, 22px) scale(1.08); }
  }
  .pal-hero__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
    position:relative;
    z-index:1;
  }
 
.pal-hero__title{
    font-size:clamp(34px, 4.4vw, 52px);
    line-height:1.06;
    font-weight:700;
    letter-spacing:-.02em;
    margin-bottom:20px;

    position:relative;

    /* Clean white text */
    color:#ffffff;

    /* Remove all blur / glow */
    filter:none;
    text-shadow:none;

    /* No artificial stroke */
    -webkit-text-stroke:0;

    animation:none;
}

.pal-hero__title::before{
    display:none;
}
@keyframes palTitleGlow{
  0%,100%{ opacity:.28; }
  50%{ opacity:.55; }
}
  @keyframes palShine{
    0%{ background-position:120% 0; }
    50%{ background-position:0% 0; }
    100%{ background-position:120% 0; }
  }
 .pal-hero__title em{
    font-style:normal;

    background:linear-gradient(
        100deg,
        #ef1568 0%,
        #ff4f91 45%,
        #f2542d 100%
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    color:transparent;

    position:relative;
    display:inline;
    
    /* No animation */
    animation:none;

    /* No shadow */
    filter:none;
    text-shadow:none;
}
.pal-hero__title em::after{
    display:none;
}
  .pal-hero__desc{
    font-size:16px;
    line-height:1.65;
    color: whitesmoke;
    max-width:440px;
    margin-bottom:44px;
    color: grey;
  }
  .pal-hero__desc strong{ color: maroon; font-weight:700; }
.pal-hero__desc em{ color:var(--pal-pink); font-style:normal; font-weight:700; }
  .pal-flowRow{ display:flex; align-items:center; gap:0; }
  .pal-flowNode{ display:flex; flex-direction:column; align-items:center; text-align:center; width:130px; align-self:flex-start; }
  .pal-flowNode__iconWrap{
    position:relative;
    width:64px; height:64px;
    margin-bottom:14px;
    animation:palNodeFloat 4.5s ease-in-out infinite;
  }
  .pal-flowNode:nth-child(1) .pal-flowNode__iconWrap{ animation-delay:0s; }
  .pal-flowNode:nth-child(3) .pal-flowNode__iconWrap{ animation-delay:-1.5s; }
  .pal-flowNode:nth-child(5) .pal-flowNode__iconWrap{ animation-delay:-3s; }
  @keyframes palNodeFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
  }
  .pal-flowNode__iconWrap::before{
    content:"";
    position:absolute; inset:-4px;
    border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0%, var(--pal-pink) 18%, transparent 38%, transparent 100%);
    opacity:.65;
    animation:palRingSpin 5s linear infinite;
  }
  @keyframes palRingSpin{ to{ transform:rotate(360deg); } }
  .pal-flowNode__icon{
    width:64px; height:64px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--pal-ink-line);
    background:radial-gradient(circle at 30% 25%, rgba(239,21,104,.14), var(--pal-ink-soft) 70%);
    color:var(--pal-pink);
    position:absolute; inset:0;
    z-index:1;
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
  }
  .pal-flowNode__icon--hex{
    clip-path:polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  }
  .pal-flowNode:hover .pal-flowNode__icon{
    transform:scale(1.08);
    border-color:var(--pal-pink);
    background:radial-gradient(circle at 30% 25%, rgba(239,21,104,.32), var(--pal-ink-soft) 75%);
    box-shadow:0 14px 30px -12px rgba(239,21,104,.75), 0 0 0 4px rgba(239,21,104,.08);
  }
  .pal-flowNode:hover .pal-flowNode__iconWrap::before{ opacity:1; animation-duration:2s; }
  .pal-flowNode__label{ font-family:var(--pal-font-display); font-weight:700; font-size:13px; letter-spacing:.06em; margin-bottom:8px; }
  .pal-flowNode:nth-child(1) .pal-flowNode__icon{ color:var(--pal-blue); background:radial-gradient(circle at 30% 25%, rgba(47,143,255,.16), var(--pal-ink-soft) 70%); }
  .pal-flowNode:nth-child(1) .pal-flowNode__iconWrap::before{ background:conic-gradient(from 0deg, transparent 0%, var(--pal-blue) 18%, transparent 38%, transparent 100%); }
  .pal-flowNode:nth-child(1):hover .pal-flowNode__icon{ border-color:var(--pal-blue); background:radial-gradient(circle at 30% 25%, rgba(47,143,255,.35), var(--pal-ink-soft) 75%); box-shadow:0 14px 30px -12px rgba(47,143,255,.75), 0 0 0 4px rgba(47,143,255,.08); }

  .pal-flowNode:nth-child(5) .pal-flowNode__icon{ color:var(--pal-teal); background:radial-gradient(circle at 30% 25%, rgba(23,201,168,.16), var(--pal-ink-soft) 70%); }
  .pal-flowNode:nth-child(5) .pal-flowNode__iconWrap::before{ background:conic-gradient(from 0deg, transparent 0%, var(--pal-teal) 18%, transparent 38%, transparent 100%); }
  .pal-flowNode:nth-child(5):hover .pal-flowNode__icon{ border-color:var(--pal-teal); background:radial-gradient(circle at 30% 25%, rgba(23,201,168,.35), var(--pal-ink-soft) 75%); box-shadow:0 14px 30px -12px rgba(23,201,168,.75), 0 0 0 4px rgba(23,201,168,.08); }

  .pal-flowNode__copy{ font-size:13.5px; line-height:1.5; color: wheat; }
  .pal-flowConnector{
    flex:1; height:2px; margin:0 -6px 46px; min-width:20px;
    background-image:repeating-linear-gradient(90deg, var(--pal-line-dark) 0 6px, transparent 6px 12px);
    background-size:24px 2px;
    opacity:.6;
    animation:palFlowDash 1.4s linear infinite;
  }
  @keyframes palFlowDash{ to{ background-position:-24px 0; } }

  .pal-oneExp{ position:relative; margin-top:34px; display:inline-flex; align-items:center; justify-content:center; width:150px; height:150px; }
  .pal-oneExp__orbit{
    position:absolute; inset:0;
    border-radius:50%;
    border:1px dashed rgba(239,21,104,.4);
    animation:palOrbitSpin 14s linear infinite;
  }
  .pal-oneExp__orbit::before{
    content:"";
    position:absolute; top:-3px; left:50%; transform:translateX(-50%);
    width:6px; height:6px; border-radius:50%;
    background:var(--pal-pink);
    box-shadow:0 0 10px 2px rgba(239,21,104,.8);
  }
  @keyframes palOrbitSpin{ to{ transform:rotate(360deg); } }
  .pal-oneExp__badge{
    width:118px; height:118px; border-radius:50%;
    border:1.5px solid var(--pal-pink);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:radial-gradient(circle at 40% 30%, rgba(239,21,104,.16), rgba(239,21,104,.04) 70%);
    text-align:center;
    animation:palPulseRing 3.2s ease-in-out infinite;
    position:relative; z-index:2;
  }
  @keyframes palPulseRing{
    0%,100%{ box-shadow:0 0 0 0 rgba(239,21,104,.35), 0 0 24px 2px rgba(239,21,104,.18); }
    50%{ box-shadow:0 0 0 14px rgba(239,21,104,0), 0 0 34px 6px rgba(239,21,104,.3); }
  }
  .pal-oneExp__badge strong{ font-family:var(--pal-font-display); font-size:16px; font-weight:700; letter-spacing:.02em; color:var(--pal-text-light); }
  .pal-oneExp__badge span{ font-size:9.5px; letter-spacing:.14em; color:var(--pal-pink); font-weight:700; margin-top:3px; }

  /* ---- Hero right-side device stack + circuit connector lines ---- */
  .pal-heroStack{
    position:relative;
    min-height:430px;
    perspective:1400px;
    z-index:2;
  }
  .pal-heroStack__glow{
    position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
    width:80%; height:60px; border-radius:50%;
    background:radial-gradient(ellipse, rgba(239,21,104,.4), transparent 72%);
    filter:blur(18px);
    z-index:1;
    animation:palGlowPulse 4s ease-in-out infinite;
  }
  @keyframes palGlowPulse{
    0%,100%{ opacity:.55; transform:translateX(-50%) scale(1); }
    50%{ opacity:.9; transform:translateX(-50%) scale(1.06); }
  }
  .pal-hero__connectors{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible; display:none; }
  .pal-hero__connectors.is-ready{ display:block; }
  .pal-hero__connectors path{
    fill:none; stroke:var(--pal-line-dark); stroke-width:1.6; stroke-dasharray:4 5; opacity:.85;
    stroke-dashoffset:300;
    animation:palDash 3.4s linear infinite;
  }
  @keyframes palDash{ to{ stroke-dashoffset:0; } }
  .pal-hero__connectors circle{ fill:var(--pal-pink); }
  .pal-hero__connectors circle.pal-hero__connectorStart{ fill:var(--pal-ink); stroke:var(--pal-pink); stroke-width:2; }

  .pal-heroStack__item{
    position:absolute; z-index:2;
    transform-style:preserve-3d;
    animation:palFloat 6s ease-in-out infinite;
    transition:transform .5s ease, filter .5s ease;
  }
  .pal-heroStack__item--laptop{
    top:0; left:0; width:76%; z-index:2;
    transform:rotateY(-9deg) rotateX(3deg);
    animation-delay:0s;
  }
  .pal-heroStack__item--tablet{
    top:20%; right:0; width:33%; z-index:3;
    transform:rotateY(-9deg) rotateX(3deg);
    animation-delay:-1.6s;
  }
  .pal-heroStack__item--phone{
    bottom:0; right:4%; width:19%; z-index:4;
    transform:rotateY(-9deg) rotateX(3deg);
    animation-delay:-3.2s;
  }
  @keyframes palFloat{
    0%,100%{ margin-top:0; }
    50%{ margin-top:-10px; }
  }
  .pal-heroStack:hover .pal-heroStack__item{
    filter:drop-shadow(0 20px 30px rgba(239,21,104,.25));
  }
  .pal-heroStack:hover .pal-heroStack__item--laptop{ transform:rotateY(0deg) rotateX(0deg) scale(1.02); }
  .pal-heroStack:hover .pal-heroStack__item--tablet{ transform:rotateY(0deg) rotateX(0deg) scale(1.03) translateY(-4px); }
  .pal-heroStack:hover .pal-heroStack__item--phone{ transform:rotateY(0deg) rotateX(0deg) scale(1.04) translateY(-8px); }

  /* ============================================================
     SECTION 2 — PWA ADVANTAGE
     ============================================================ */
.pal-advantage{
  background:var(--pal-cream);
  padding:100px 0;
  position:relative;
  overflow:hidden;
}
.pal-advantage::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(20,15,10,.08) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 780px 480px at 50% 40%, #000 0%, transparent 72%);
          mask-image:radial-gradient(ellipse 780px 480px at 50% 40%, #000 0%, transparent 72%);
  pointer-events:none;
}
.pal-advantage__blob{
  position:absolute; border-radius:50%; filter:blur(80px);
  pointer-events:none; z-index:0;
  animation:palDrift 13s ease-in-out infinite;
}
.pal-advantage__blob--a{
  width:340px; height:340px; top:-100px; left:-80px;
  background:radial-gradient(circle, rgba(47,143,255,.26), transparent 70%);
}
.pal-advantage__blob--b{
  width:300px; height:300px; bottom:-90px; right:-60px;
  background:radial-gradient(circle, rgba(23,201,168,.24), transparent 70%);
  animation-delay:-5s; animation-duration:16s;
}
.pal-advantage__blob--c{
  width:260px; height:260px; top:30%; left:38%;
  background:radial-gradient(circle, rgba(239,21,104,.18), transparent 70%);
  animation-delay:-8s; animation-duration:14s;
}
.pal-advantage__blob--d{
  width:220px; height:220px; top:8%; right:12%;
  background:radial-gradient(circle, rgba(242,84,45,.18), transparent 70%);
  animation-delay:-3s; animation-duration:11s;
}

.pal-advantage__spotlight{
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(239,21,104,.14), transparent 70%);
  pointer-events:none;
  z-index:0;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .3s ease;
}
.pal-advantage__spotlight.is-active{ opacity:1; }
  .pal-advantage__grid{
    display:grid;
    grid-template-columns:0.82fr 1fr 0.82fr;
    gap:40px;
    align-items:center;
    position:relative;
    z-index:1;
  }
  .pal-advantage__title{ font-size:clamp(30px, 3.6vw, 42px); line-height:1.1; font-weight:700; letter-spacing:-.01em; margin-bottom:18px; }
  .pal-advantage__desc{ font-size:15.5px; line-height:1.65; color:var(--pal-text-dark-muted); max-width:360px; }

  .pal-diagram{ position:relative; display:flex; flex-direction:column; align-items:center; gap:0; perspective:1200px; }
  .pal-diagram__laptop{
    width:100%; max-width:280px;
    animation:palFloatSoft 5s ease-in-out infinite;
    transition:transform .4s ease, filter .4s ease;
    position: relative;
  }
.pal-diagram__laptop::before{
  content:"";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:130%; height:130%; border-radius:50%;
  background:radial-gradient(circle, rgba(239,21,104,.28), transparent 65%);
  filter:blur(30px);
  z-index:-1;
  animation:palHaloPulse 3.4s ease-in-out infinite;
}
@keyframes palHaloPulse{
  0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.08); }
}
.pal-diagram__laptop .pal-laptop__screen{ position:relative; overflow:hidden; }
.pal-diagram__laptop .pal-laptop__screen::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  background-size:250% 250%;
  animation:palScreenShine 5s ease-in-out infinite;
  pointer-events:none;
  z-index:5;
}
@keyframes palScreenShine{
  0%{ background-position:130% 130%; }
  50%{ background-position:-30% -30%; }
  100%{ background-position:130% 130%; }
}
  .pal-diagram__laptop .pal-laptop__screen{ border-color:#1c1a22; }
  .pal-diagram:hover .pal-diagram__laptop{
    transform:rotateX(4deg) scale(1.03);
    filter:drop-shadow(0 22px 34px rgba(239,21,104,.22));
  }
  @keyframes palFloatSoft{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-7px); }
  }

  .pal-pill{
    font-family:var(--pal-font-display);
    font-size:11px; font-weight:700; letter-spacing:.08em;
    color:var(--pal-pink); background:var(--pal-pink-soft);
    border:1px solid var(--pal-pink); padding:7px 18px; border-radius:999px;
    white-space:nowrap;
    position:relative;
    box-shadow:0 0 0 0 rgba(239,21,104,.35);
    animation:palPillPulse 2.6s ease-in-out infinite;
  }
  @keyframes palPillPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(239,21,104,.28); }
    50%{ box-shadow:0 0 0 8px rgba(239,21,104,0); }
  }
  .pal-diagram__connector{
    width:2px; height:22px;
    background-image:repeating-linear-gradient(180deg, var(--pal-line-cream) 0 6px, transparent 6px 12px);
    background-size:2px 24px;
    opacity:.65;
    animation:palFlowDashV 1.2s linear infinite;
  }
  @keyframes palFlowDashV{ to{ background-position:0 -24px; } }

  .pal-diagram__branch{ display:flex; justify-content:center; align-items:flex-end; gap:22px; margin:6px 0; }
  .pal-diagram__branchItem{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    transition:transform .3s ease, filter .3s ease;
    animation:palFloatSoft 4.5s ease-in-out infinite;
  }
  .pal-diagram__branchItem--mobile{ width:15%; animation-delay:-.4s; }
  .pal-diagram__branchItem--tablet{ width:22%; animation-delay:-1.6s; }
  .pal-diagram__branchItem--desktop{ width:34%; animation-delay:-2.8s; }
  .pal-diagram__branchItem:hover{ transform:translateY(-6px) scale(1.04); filter:drop-shadow(0 14px 22px rgba(0,0,0,.18)); }
  .pal-diagram__monitor{ width:100%; }
  .pal-diagram__monitorScreen{
    position:relative; border:5px solid #1c1a22; border-radius:6px;
    aspect-ratio:16/10.5; background:#0b0c10; overflow:hidden;
  }
  .pal-diagram__monitorStand{
    width:26%; height:8px; background:#1c1a22; margin:0 auto; border-radius:0 0 3px 3px;
  }
  .pal-diagram__branchLabel{
    font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--pal-text-dark-muted);
    padding:3px 9px; border-radius:20px; transition:color .3s ease, background .3s ease;
  }
  .pal-diagram__branchItem--mobile .pal-diagram__branchLabel{ }
  .pal-diagram__branchItem--mobile:hover .pal-diagram__branchLabel{ color:var(--pal-teal); background:var(--pal-teal-soft); }
  .pal-diagram__branchItem--tablet:hover .pal-diagram__branchLabel{ color:var(--pal-pink); background:var(--pal-pink-soft); }
  .pal-diagram__branchItem--desktop:hover .pal-diagram__branchLabel{ color:var(--pal-blue); background:var(--pal-blue-soft); }

  .pal-features{ display:flex; flex-direction:column; gap:26px; }
  .pal-featureItem{
  display:flex; gap:16px;
  position:relative;
  padding:9px 11px 9px 14px;
  border-radius:12px;
  transition:background .3s ease, transform .3s ease;
}
.pal-featureItem::before{
  content:"";
  position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:3px;
  background:var(--pal-pink);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s ease;
}
.pal-featureItem:nth-child(1)::before{ background:var(--pal-blue); }
.pal-featureItem:nth-child(3)::before{ background:var(--pal-teal); }
.pal-featureItem:nth-child(4)::before{ background:var(--pal-orange); }
.pal-featureItem:hover{ background:rgba(0,0,0,.035); transform:translateX(4px); }
.pal-featureItem:hover::before{ transform:scaleY(1); }
.pal-featureItem__num{
  position:absolute; right:14px; top:10px;
  font-family:var(--pal-font-display);
  font-weight:700; font-size:11px; letter-spacing:.06em;
  color:var(--pal-text-dark-muted); opacity:.5;
}
  .pal-featureItem__icon{
    flex:none; width:46px; height:46px; border-radius:50%;
    background:var(--pal-pink-soft); color:var(--pal-pink);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    transition:transform .35s ease, background .35s ease, box-shadow .35s ease;
  }
  .pal-featureItem__icon::before{
    content:""; position:absolute; inset:-5px; border-radius:50%;
    border:1.5px dashed currentColor; opacity:0; transition:opacity .35s ease;
  }
  .pal-featureItem:hover .pal-featureItem__icon{ transform:scale(1.1) rotate(-6deg); background:var(--pal-pink); color:#fff; box-shadow:0 12px 26px -10px rgba(239,21,104,.55); }
  .pal-featureItem:hover .pal-featureItem__icon::before{ opacity:.5; animation:palRingSpin 6s linear infinite; }
  .pal-featureItem:nth-child(1) .pal-featureItem__icon{ background:var(--pal-blue-soft); color:var(--pal-blue); }
  .pal-featureItem:nth-child(1):hover .pal-featureItem__icon{ background:var(--pal-blue); color:#fff; box-shadow:0 12px 26px -10px rgba(47,143,255,.55); }
  .pal-featureItem:nth-child(3) .pal-featureItem__icon{ background:var(--pal-teal-soft); color:var(--pal-teal); }
  .pal-featureItem:nth-child(3):hover .pal-featureItem__icon{ background:var(--pal-teal); color:#fff; box-shadow:0 12px 26px -10px rgba(23,201,168,.55); }
  .pal-featureItem:nth-child(4) .pal-featureItem__icon{ background:var(--pal-orange-soft); color:var(--pal-orange); }
  .pal-featureItem:nth-child(4):hover .pal-featureItem__icon{ background:var(--pal-orange); color:#fff; box-shadow:0 12px 26px -10px rgba(242,84,45,.55); }
  .pal-featureItem__title{ font-family:var(--pal-font-display); font-size:16.5px; font-weight:700; margin-bottom:5px; color: #000 }
  .pal-featureItem__copy{ font-size:13.5px; line-height:1.55; color:var(--pal-text-dark-muted); }

  .pal-diagram{ transition:transform .15s ease-out; transform-style:preserve-3d; }
.pal-diagram__laptop{ transition:transform .15s ease-out, filter .3s ease; }
.pal-diagram__branchItem{ transition:transform .15s ease-out, filter .3s ease; }
  /* ============================================================
     SECTION 3 — INSIDE THE PWA EXPERIENCE
     ============================================================ */
  .pal-inside{ background:var(--pal-ink); color:var(--pal-text-light); padding:100px 0 0; }
  .pal-inside__top{ display:grid; grid-template-columns:0.85fr 1.3fr; gap:30px; align-items:center; padding-bottom:80px; }
 .pal-inside__title{
  font-size:clamp(30px, 3.6vw, 42px);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:18px;
  background:linear-gradient(100deg, var(--pal-orange) 0%, var(--pal-pink) 45%, var(--pal-purple) 90%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:palShine 8s ease-in-out infinite;
}
  .pal-inside__desc{ font-size:16.5px; line-height:1.65; color: #fff; max-width:380px; }

  .pal-layerDiagram{ display:grid; grid-template-columns:1fr 1.1fr 1fr; align-items:center; gap:6px; }
  .pal-layerCol{ display:flex; flex-direction:column; gap:36px; }
  .pal-layerCol--right{ align-items:flex-end; text-align:right; }
  .pal-layerNote{ display:flex; gap:12px; max-width:180px; position:relative; }
  .pal-layerCol--right .pal-layerNote{ flex-direction:row-reverse; }
  .pal-layerNote__icon{
    flex:none; width:38px; height:38px; border-radius:10px;
    border:1.5px solid var(--pal-ink-line); background:var(--pal-ink-soft);
    color:var(--pal-pink); display:flex; align-items:center; justify-content:center;
    transition:border-color .3s ease, transform .3s ease; position:relative;
  }
  .pal-layerNote__icon::after{
    content:""; position:absolute; top:50%; width:16px; height:0;
    border-top:2px dotted var(--pal-line-dark); opacity:.6;
  }
  .pal-layerCol .pal-layerNote__icon::after{ right:-16px; }
  .pal-layerCol--right .pal-layerNote__icon::after{ left:-16px; }
  .pal-layerNote:hover .pal-layerNote__icon{ transform:translateY(-3px); }
  .pal-layerCol:nth-child(1) .pal-layerNote:nth-child(1) .pal-layerNote__icon{ color:var(--pal-blue); }
  .pal-layerCol:nth-child(1) .pal-layerNote:nth-child(1):hover .pal-layerNote__icon{ border-color:var(--pal-blue); }
  .pal-layerCol:nth-child(1) .pal-layerNote:nth-child(2):hover .pal-layerNote__icon{ border-color:var(--pal-pink); }
  .pal-layerCol--right .pal-layerNote:nth-child(1) .pal-layerNote__icon{ color:var(--pal-teal); }
  .pal-layerCol--right .pal-layerNote:nth-child(1):hover .pal-layerNote__icon{ border-color:var(--pal-teal); }
  .pal-layerCol--right .pal-layerNote:nth-child(2) .pal-layerNote__icon{ color:var(--pal-orange); }
  .pal-layerCol--right .pal-layerNote:nth-child(2):hover .pal-layerNote__icon{ border-color:var(--pal-orange); }
  .pal-layerNote__title{ font-family:var(--pal-font-display); font-size:15.5px; font-weight:700; margin-bottom:3px; }
  .pal-layerNote__copy{ font-size:14.5px; line-height:1.5; color:var(--pal-text-light-muted); }

  .pal-brandLaptop{ width:100%; max-width:340px; margin:0 auto; }
  .pal-brandLaptop .pal-laptop__screen{
    background:
      radial-gradient(circle at 50% 45%, rgba(239,21,104,.35), transparent 62%),
      #0b0a10;
    display:flex; align-items:center; justify-content:center;
    border-color:#201d28;
    overflow: hidden;
  }
  .pal-brandLaptop .pal-laptop__screen::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px);
  pointer-events:none; z-index:4;
}
.pal-brandLaptop .pal-laptop__screen::after{
  content:"";
  position:absolute; left:0; right:0; height:24%;
  background:linear-gradient(180deg, transparent, rgba(239,21,104,.4), transparent);
  filter:blur(2px);
  pointer-events:none; z-index:5;
  animation:palScanMove 3s linear infinite;
}
@keyframes palScanMove{
  0%{ transform:translateY(-40%); }
  100%{ transform:translateY(420%); }
}
  .pal-brandLaptop__mark{
    font-family:var(--pal-font-display); font-weight:700;
    font-size:15%;
    color:transparent;
    background:linear-gradient(90deg,#ff4f93,var(--pal-pink));
    -webkit-background-clip:text; background-clip:text;
    letter-spacing:.04em;
    text-shadow:0 0 30px rgba(239,21,104,.4);
    position:relative;
  }
  .pal-brandLaptop__mark::after{
    content:""; position:absolute; left:8%; right:8%; bottom:-18%; height:2px;
    background:linear-gradient(90deg, transparent, var(--pal-pink), transparent);
    opacity:.7;
  }

  .pal-stripBar{ border-top:1px solid var(--pal-ink-line); background:var(--pal-ink-soft); padding:26px 0; margin-top:0; }
  .pal-stripList{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0; }
  .pal-stripItem{
    display:flex; align-items:center; gap:10px; padding:6px 28px;
    font-size:13.5px; font-weight:600; color:var(--pal-text-light);
    border-right:1px solid var(--pal-ink-line); transition:color .3s ease;
  }
  .pal-stripItem:last-child{ border-right:none; }
  .pal-stripItem svg{ flex:none; transition:transform .3s ease, color .3s ease, filter .3s ease; }
.pal-stripItem:hover svg{ transform:scale(1.25) rotate(-6deg); }
.pal-stripItem:nth-child(1) svg{ color:var(--pal-blue); }
.pal-stripItem:nth-child(1):hover svg{ filter:drop-shadow(0 0 8px rgba(47,143,255,.7)); }
.pal-stripItem:nth-child(2) svg{ color:var(--pal-pink); }
.pal-stripItem:nth-child(2):hover svg{ filter:drop-shadow(0 0 8px rgba(239,21,104,.7)); }
.pal-stripItem:nth-child(3) svg{ color:var(--pal-teal); }
.pal-stripItem:nth-child(3):hover svg{ filter:drop-shadow(0 0 8px rgba(23,201,168,.7)); }
.pal-stripItem:nth-child(4) svg{ color:var(--pal-orange); }
.pal-stripItem:nth-child(4):hover svg{ filter:drop-shadow(0 0 8px rgba(242,84,45,.7)); }
.pal-stripItem:nth-child(5) svg{ color:var(--pal-purple); }
.pal-stripItem:nth-child(5):hover svg{ filter:drop-shadow(0 0 8px rgba(155,93,229,.7)); }
.pal-stripItem:hover{ color:var(--pal-text-light); }

  .pal-layerWire{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
.pal-layerWire path{
  fill:none; stroke-width:1.8; stroke-dasharray:5 6; stroke-dashoffset:200;
  opacity:.85; animation:palDash 2.2s linear infinite;
  stroke-linecap:round;
}
.pal-layerWire circle{ opacity:.9; }
.pal-layerWire .w-blue{ stroke:var(--pal-blue); filter:drop-shadow(0 0 5px rgba(47,143,255,.65)); }
.pal-layerWire .w-pink{ stroke:var(--pal-pink); filter:drop-shadow(0 0 5px rgba(239,21,104,.65)); }
.pal-layerWire .w-teal{ stroke:var(--pal-teal); filter:drop-shadow(0 0 5px rgba(23,201,168,.65)); }
.pal-layerWire .w-orange{ stroke:var(--pal-orange); filter:drop-shadow(0 0 5px rgba(242,84,45,.65)); }
.pal-layerWire circle.w-blue{ fill:var(--pal-blue); }
.pal-layerWire circle.w-pink{ fill:var(--pal-pink); }
.pal-layerWire circle.w-teal{ fill:var(--pal-teal); }
.pal-layerWire circle.w-orange{ fill:var(--pal-orange); }
.pal-layerDiagram{ position:relative; }

  /* ============================================================
     SECTION 4 — BUILT AROUND YOUR USERS
     ============================================================ */
  .pal-journey{background: linear-gradient(160deg, var(--pal-cream) 0%, #f9d9e4 50%, #fce0c8 100%);padding:80px 0 90px; }
  .pal-journey__header{ max-width:640px; margin:0 0 64px; }
  .pal-journey__title{ font-size:clamp(28px, 3.4vw, 38px); line-height:1.15; font-weight:700; letter-spacing:-.01em; color: #000;}

  .pal-steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; position:relative; }
  .pal-step{ position:relative; }
  .pal-step__icon{
    width:82px; height:82px; border-radius:50%;
    background: linear-gradient(135deg, var(--pal-pink), #f6923a);
    display:flex; align-items:center; justify-content:center; margin-bottom:22px;
    position:relative; transition:transform .35s ease, box-shadow .35s ease;
  }
  .pal-step:nth-child(2) .pal-step__icon,
  .pal-step:nth-child(4) .pal-step__icon{ background: #000; color:var(--pal-orange); }
  .pal-step:hover .pal-step__icon{ transform:translateY(-5px); box-shadow:0 14px 28px -14px rgba(0,0,0,.25); }
  .pal-step__num{ font-family:var(--pal-font-display); font-weight:900; font-size:14px; color:var(--pal-orange); letter-spacing:.06em; margin-bottom:4px; display:block; }
  .pal-step:nth-child(1) .pal-step__num, .pal-step:nth-child(3) .pal-step__num{ color:var(--pal-pink); }
  .pal-step__title{ font-family:var(--pal-font-display); font-weight:700; font-size:20px;color: #000; letter-spacing:.03em; margin-bottom:10px; text-transform:uppercase; }
  .pal-step__copy{ font-size:15.5px; line-height:1.55; color: maroon; max-width:230px; }

  .pal-journey__divider{ display:flex; align-items:center; margin:70px 0 46px; }
  .pal-journey__divider::before, .pal-journey__divider::after{ content:""; flex:1; height:1px; background:linear-gradient(to right, transparent, #d8cdb8, transparent); }
  .pal-journey__dividerDot{ width:9px; height:9px; border-radius:50%; background:var(--pal-pink); margin:0 14px; flex:none; }

  .pal-journey__closing{
    text-align:center; font-family:var(--pal-font-display); font-size:clamp(17px, 2vw, 21px);
    line-height:1.55; font-weight:500; color:var(--pal-text-dark); max-width:760px; margin:0 auto;
  }

  /* =========================================================
   PWA — FINAL MOBILE RESPONSIVE ONLY
   Paste AFTER the complete desktop CSS.
   ========================================================= */

@media screen and (max-width: 768px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .pal-wrap{
    width:100%;
    max-width:100%;
    padding:0 16px;
  }

  .pal-hero,
  .pal-advantage,
  .pal-inside,
  .pal-journey{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  /* SECTION 1 */
  .pal-hero{padding:52px 0 46px; padding-top: 90px !important;}
  .pal-hero__grid{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:38px;
  }
  .pal-hero__grid > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .pal-hero__title{
    width:100%;
    max-width:100%;
    font-size:clamp(30px,9vw,38px);
    line-height:1.12;
    overflow-wrap:anywhere;
  }
  .pal-hero__desc{
    width:100%;
    max-width:100%;
    margin-bottom:32px;
    font-size:14px;
  }
  .pal-flowRow{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:8px;
  }
  .pal-flowNode{
    width:100%;
    min-width:0;
  }
  .pal-flowConnector{display:none;}
  .pal-flowNode__iconWrap,
  .pal-flowNode__icon{
    width:52px;
    height:52px;
  }
  .pal-flowNode__label{font-size:11px;}
  .pal-flowNode__copy{
    width:100%;
    padding:0 2px;
    font-size:10.5px;
    overflow-wrap:anywhere;
  }
  .pal-oneExp{
    display:flex;
    width:130px;
    height:130px;
    margin:30px auto 0;
  }
  .pal-oneExp__badge{width:104px;height:104px;}
  .pal-heroStack{
    width:100%;
    min-height:280px;
    margin:0;
    order:2;
  }
  .pal-heroStack__item--laptop{left:1%;width:73%;}
  .pal-heroStack__item--tablet{right:1%;width:33%;}
  .pal-heroStack__item--phone{right:7%;width:19%;}

  /* SECTION 2 */
  .pal-advantage{padding:52px 0;}
  .pal-advantage__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:34px;
    text-align:left;
  }
  .pal-advantage__grid > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .pal-advantage__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .pal-advantage__desc{max-width:100%;}
  .pal-diagram{
    width:100%;
    max-width:340px;
    margin:0 auto;
  }
  .pal-diagram__laptop{width:78%;max-width:250px;}
  .pal-diagram__branch{
    width:100%;
    max-width:320px;
    gap:10px;
  }
  .pal-diagram__branchItem--mobile{width:18%;}
  .pal-diagram__branchItem--tablet{width:26%;}
  .pal-diagram__branchItem--desktop{width:39%;}
  .pal-pill{font-size:9px;padding:6px 12px;}
  .pal-features{width:100%;gap:18px;}
  .pal-featureItem{
    display:flex;
    width:100%;
    max-width:100%;
    gap:12px;
    padding:10px 8px 10px 12px;
  }
  .pal-featureItem__icon{width:42px;height:42px;}
  .pal-featureItem__title{font-size:15px;}
  .pal-featureItem__copy{font-size:13px;}

  /* SECTION 3 */
  .pal-inside{padding:52px 0 0;}
  .pal-inside__top{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:14px;
    padding-bottom:40px;
  }
  .pal-inside__top > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .pal-inside__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .pal-inside__desc{max-width:100%;font-size:14.5px;}
  .pal-layerDiagram{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:24px;
  }
  .pal-layerDiagram > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .pal-brandLaptop{
    order:1;
    width:100%;
    max-width:300px;
    margin:0 auto 8px;
  }
  .pal-layerCol,
  .pal-layerCol--right{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    gap:16px;
    align-items:start;
    text-align:left;
  }
  .pal-layerCol{order:2;}
  .pal-layerCol--right{order:3;}
  .pal-layerNote,
  .pal-layerCol--right .pal-layerNote{
    display:flex;
    flex-direction:row;
    width:100%;
    max-width:100%;
    gap:10px;
  }
  .pal-layerNote__icon::after,
  .pal-layerWire{display:none;}
  .pal-layerNote__title{font-size:14px;}
  .pal-layerNote__copy{font-size:12.5px;}
  .pal-stripBar{padding:22px 0;}
  .pal-stripList{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    gap:10px;
  }
  .pal-stripItem{
    width:100%;
    min-width:0;
    padding:8px 6px;
    border-right:0;
    font-size:12px;
  }

  /* SECTION 4 */
  .pal-journey{padding:52px 0;}
  .pal-journey__header{
    width:100%;
    max-width:100%;
    margin-bottom:36px;
  }
  .pal-journey__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .pal-steps{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:28px;
  }
  .pal-step{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    width:100%;
    column-gap:14px;
    align-items:start;
  }
  .pal-step__icon{
    grid-row:1 / span 3;
    width:64px;
    height:64px;
    margin:0;
  }
  .pal-step__num,
  .pal-step__title,
  .pal-step__copy{grid-column:2;}
  .pal-step__title{font-size:17px;margin-bottom:5px;}
  .pal-step__copy{max-width:100%;font-size:13.5px;}
  .pal-journey__divider{margin:42px 0 30px;}
  .pal-journey__closing{font-size:16px;}
}

@media screen and (max-width:380px){
  .pal-wrap{padding:0 12px;}
  .pal-hero__title{font-size:28px;}
  .pal-flowNode__iconWrap,
  .pal-flowNode__icon{width:46px;height:46px;}
  .pal-flowNode__label{font-size:10px;}
  .pal-flowNode__copy{font-size:9.5px;}
  .pal-heroStack{min-height:240px;}
  .pal-layerCol,
  .pal-layerCol--right,
  .pal-stripList{grid-template-columns:minmax(0,1fr);}
  .pal-step{grid-template-columns:56px minmax(0,1fr);}
  .pal-step__icon{width:56px;height:56px;}
}

/*===========================================================
             Content Brand Stroytelling
===========================================================*/



/*
========================================================
         Content & Brand Storytelling
========================================================*/

/* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --cbst-bg-dark:#0a0a0c;
    --cbst-bg-dark-2:#100c0e;
    --cbst-bg-cream:#faf3ee;
    --cbst-card-dark:#141010;
    --cbst-card-dark-border:#241c1c;
    --cbst-accent:#ff2f6e;
    --cbst-accent-2:#ff8a4c;
    --cbst-accent-soft:rgba(255,47,110,.14);
    --cbst-text-light:#f6f1ee;
    --cbst-text-light-muted:#a79e9c;
    --cbst-text-dark:#1c1616;
    --cbst-text-dark-muted:#6f6462;
    --cbst-line:rgba(255,255,255,.09);
    --cbst-line-dark:rgba(28,22,22,.1);
    --cbst-radius:20px;
    --cbst-font-display:'Manrope', sans-serif;
    --cbst-font-body:'Inter', sans-serif;
    --cbst-font-mono:'IBM Plex Mono', monospace;
    --cbst-ease:cubic-bezier(.16,.8,.28,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--cbst-font-body);
    background:var(--cbst-bg-cream);
    color:var(--cbst-text-dark);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  .cbst-wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

  .cbst-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--cbst-font-mono);
    font-size:12.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--cbst-accent);
    margin-bottom:18px;
    margin-top: 40px;
  }
  .cbst-eyebrow::before{
    content:""; width:16px; height:2px; background:var(--cbst-accent); border-radius:2px;
  }
  .cbst-eyebrow-num{color:inherit; opacity:.55; font-weight:600;}

  h1,h2,h3{font-family:var(--cbst-font-display); font-weight:600; letter-spacing:-.02em;}

  /* reveal-on-scroll base */
  [data-cbst-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--cbst-ease), transform .8s var(--cbst-ease);}
  [data-cbst-reveal].cbst-in{opacity:1; transform:translateY(0);}
  [data-cbst-reveal="stagger"] > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--cbst-ease), transform .7s var(--cbst-ease);}
  [data-cbst-reveal="stagger"].cbst-in > *{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    [data-cbst-reveal], [data-cbst-reveal="stagger"] > *{opacity:1 !important; transform:none !important;}
  }
/*==============================================
        Content & Brand Storytelling Development
==============================================*/

 /* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --cbst-bg-dark:#0a0a0c;
    --cbst-bg-dark-2:#100c0e;
    --cbst-bg-cream:#faf3ee;
    --cbst-card-dark:#141010;
    --cbst-card-dark-border:#241c1c;
    --cbst-accent:#ff2f6e;
    --cbst-accent-2:#ff8a4c;
    --cbst-accent-soft:rgba(255,47,110,.14);
    --cbst-text-light:#f6f1ee;
    --cbst-text-light-muted:#a79e9c;
    --cbst-text-dark:#1c1616;
    --cbst-text-dark-muted:#6f6462;
    --cbst-line:rgba(255,255,255,.09);
    --cbst-line-dark:rgba(28,22,22,.1);
    --cbst-radius:20px;
    --cbst-font-display:'Manrope', sans-serif;
    --cbst-font-body:'Inter', sans-serif;
    --cbst-font-mono:'IBM Plex Mono', monospace;
    --cbst-ease:cubic-bezier(.16,.8,.28,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--cbst-font-body);
    background:var(--cbst-bg-cream);
    color:var(--cbst-text-dark);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  .cbst-wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

  .cbst-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--cbst-font-mono);
    font-size:12.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--cbst-accent);
    margin-bottom:18px;
  }
  .cbst-eyebrow::before{
    content:""; width:16px; height:2px; background:var(--cbst-accent); border-radius:2px;
  }
  .cbst-eyebrow-num{color:inherit; opacity:.55; font-weight:600;}

  h1,h2,h3{font-family:var(--cbst-font-display); font-weight:600; letter-spacing:-.02em;}

  /* reveal-on-scroll base */
  [data-cbst-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--cbst-ease), transform .8s var(--cbst-ease);}
  [data-cbst-reveal].cbst-in{opacity:1; transform:translateY(0);}
  [data-cbst-reveal="stagger"] > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--cbst-ease), transform .7s var(--cbst-ease);}
  [data-cbst-reveal="stagger"].cbst-in > *{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    [data-cbst-reveal], [data-cbst-reveal="stagger"] > *{opacity:1 !important; transform:none !important;}
  }

  /* ============================================================
     HERO SECTION
     ============================================================ */
  .cbst-hero{
    position:relative;
    background:radial-gradient(120% 100% at 82% 0%, #1c0f13 0%, var(--cbst-bg-dark) 55%), var(--cbst-bg-dark);
    color:var(--cbst-text-light);
    padding:70px 0 60px;
    overflow:hidden;
  }
  .cbst-hero::before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(60% 55% at 72% 25%, rgba(255,47,110,.16), transparent 65%),
               radial-gradient(45% 40% at 15% 85%, rgba(255,138,76,.10), transparent 70%);
    pointer-events:none;
  }
  .cbst-hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr;
    gap:56px; align-items:center; position:relative; z-index:1;
  }

  .cbst-hero-title{
    position:relative;
    font-family:var(--cbst-font-display);
    font-weight:800;
    font-size: 45px;
    line-height:1.0;
    letter-spacing:-.035em;
    margin-bottom:24px;
  }
  .cbst-hero-title .cbst-line{
    display:block; opacity:0; transform:translateY(20px);
    animation:cbst-title-in .8s var(--cbst-ease) forwards;
  }
  .cbst-hero-title .cbst-line:nth-child(1){animation-delay:.05s;}
  .cbst-hero-title .cbst-line:nth-child(2){animation-delay:.22s;}
  @keyframes cbst-title-in{
    to{opacity:1; transform:translateY(0);}
  }
  .cbst-hero-title .cbst-accent-word{
  background:linear-gradient(97deg, var(--cbst-accent) 0%, var(--cbst-accent-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
  display:inline-block;
  text-shadow:0 0 24px rgba(255,47,110,.35), 0 0 44px rgba(255,138,76,.18);
}
  @media (prefers-reduced-motion: reduce){
    .cbst-hero-title .cbst-line{opacity:1; transform:none; animation:none;}
  }

  .cbst-hero-para{
    font-size:18.5px; line-height:1.7;
    color: whitesmoke;
    max-width:480px;
    margin-bottom:28px;
  }

  .cbst-hero-platform-sep{width:3px; height:3px; border-radius:50%; background:var(--cbst-text-light-muted); opacity:.5; flex:none;}

  .cbst-hero-cta{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    margin-bottom:48px;
  }
  .cbst-hero-btn{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--cbst-font-body); font-size:14.5px; font-weight:600;
    padding:14px 28px; border-radius:999px;
    text-decoration:none; cursor:pointer; border:none;
    transition:transform .35s var(--cbst-ease), box-shadow .35s var(--cbst-ease), background .35s var(--cbst-ease);
  }
  .cbst-hero-btn svg{width:16px; height:16px; transition:transform .35s var(--cbst-ease);}
  .cbst-hero-btn--primary{
    background:linear-gradient(97deg, var(--cbst-accent), var(--cbst-accent-2));
    color:#0a0505;
    box-shadow:0 16px 34px -12px rgba(255,47,110,.55);
  }
  .cbst-hero-btn--primary:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 42px -12px rgba(255,47,110,.7);
  }
  .cbst-hero-btn--primary:hover svg{transform:translateX(3px);}
  .cbst-hero-btn--ghost{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.16);
    color:var(--cbst-text-light);
  }
  .cbst-hero-btn--ghost:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.3);
  }

  .cbst-hero-orbit-panel{
    position:relative;
  }
  .cbst-hero-orbit-eyebrow{
    font-family:var(--cbst-font-mono); font-size:14.5px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase;
    color: whitesmoke;
    margin-bottom:16px;
  }
  .cbst-hero-orbit{
    display:flex; align-items:flex-start; gap:2px; position:relative;
  }
  .cbst-hero-orbit-item{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    width:82px; flex:none;
  }
  .cbst-hero-orbit-circle{
    --glow: var(--item-color, var(--cbst-accent));
    width:60px; height:60px; border-radius:50%;
    background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.06), rgba(0,0,0,.4));
    border:1.5px solid var(--glow);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    color:var(--glow);
    position:relative; z-index:2;
    box-shadow:0 0 0 0 transparent;
    animation:cbst-badge-pulse 3.2s ease-in-out infinite;
    transition:transform .4s var(--cbst-ease);
  }
  .cbst-hero-orbit-item:nth-child(1) .cbst-hero-orbit-circle{animation-delay:0s;}
  .cbst-hero-orbit-item:nth-child(3) .cbst-hero-orbit-circle{animation-delay:.5s;}
  .cbst-hero-orbit-item:nth-child(5) .cbst-hero-orbit-circle{animation-delay:1s;}
  .cbst-hero-orbit-item:nth-child(7) .cbst-hero-orbit-circle{animation-delay:1.5s;}
  .cbst-hero-orbit-item:nth-child(9) .cbst-hero-orbit-circle{animation-delay:2s;}
  @keyframes cbst-badge-pulse{
    0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--glow) 45%, transparent);}
    50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--glow) 0%, transparent);}
  }
  .cbst-hero-orbit-item:hover .cbst-hero-orbit-circle{
    transform:translateY(-5px) scale(1.08);
    background:var(--glow);
    color:#0a0a0a;
  }
  .cbst-hero-orbit-circle svg{width:22px; height:22px;}
  .cbst-hero-orbit-label{
    font-family:var(--cbst-font-mono);
    font-size:14.5px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--cbst-text-light);
    margin-bottom:5px;
  }
  .cbst-hero-orbit-desc{
    font-size:12px; line-height:1.4; color:var(--cbst-text-light-muted);
  }
  .cbst-hero-orbit-arrow{
    flex:none; align-self:flex-start;
    margin-top:22px;
    width:24px; height:14px;
    position:relative; overflow:hidden;
  }
  .cbst-hero-orbit-arrow svg{
    width:24px; height:14px; color:rgba(255,255,255,.28);
    animation:cbst-arrow-flow 1.8s ease-in-out infinite;
  }
  @keyframes cbst-arrow-flow{
    0%,100%{transform:translateX(0); opacity:.5;}
    50%{transform:translateX(4px); opacity:1;}
  }

  .cbst-hero-visual{
    position:relative;
    animation:cbst-float 7s ease-in-out infinite;
  }
  @keyframes cbst-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
  }
  .cbst-hero-visual-glow{
    position:absolute; inset:-40px;
    background:radial-gradient(50% 50% at 50% 50%, rgba(255,47,110,.35), transparent 70%);
    filter:blur(30px);
    z-index:0;
    animation:cbst-pulse 4.5s ease-in-out infinite;
  }
  @keyframes cbst-pulse{
    0%,100%{opacity:.55; transform:scale(1);}
    50%{opacity:.9; transform:scale(1.05);}
  }
  /* REPLACE the src below with your own dashboard screenshot */
  .cbst-hero-visual-frame img{
    width:150%; border-radius:12px; display:block;
  }
  .cbst-hero-chip{
    position:absolute; z-index:3;
    display:flex; align-items:center; gap:8px;
    background:rgba(20,15,15,.85);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    padding:9px 16px;
    font-family:var(--cbst-font-mono);
    font-size:16px; font-weight:600; letter-spacing:.03em;
    color:var(--cbst-text-light);
    box-shadow:0 16px 34px -14px rgba(0,0,0,.6);
  }
  .cbst-hero-chip svg{width:15px; height:15px; flex:none;}
  .cbst-hero-chip--top{
    top:-18px; left:-22px;
    color:var(--cbst-accent);
    animation:cbst-chip-float-a 5.5s ease-in-out infinite;
  }
  .cbst-hero-chip--top svg{color:var(--cbst-accent);}
  .cbst-hero-chip--bottom{
    bottom:-16px; right:-18px;
    animation:cbst-chip-float-b 6.2s ease-in-out infinite;
  }
  .cbst-hero-chip--bottom svg{color:#14e0b0;}
  .cbst-hero-chip--bottom .cbst-chip-dot{
    width:7px; height:7px; border-radius:50%; background:#14e0b0;
    box-shadow:0 0 0 3px rgba(20,224,176,.22);
  }
  @keyframes cbst-chip-float-a{
    0%,100%{transform:translateY(0) rotate(-2deg);}
    50%{transform:translateY(-9px) rotate(1deg);}
  }
  @keyframes cbst-chip-float-b{
    0%,100%{transform:translateY(0) rotate(2deg);}
    50%{transform:translateY(-8px) rotate(-1deg);}
  }

  /* ============================================================
   SECTION 02 — LAYERS (cream)
   ============================================================ */
.cbst-layers{
  background:var(--cbst-bg-cream);
  padding:34px 0;
  position:relative;
  overflow:hidden;
}
.cbst-layers::before{
  content:"";
  position:absolute; top:-120px; right:-120px; width:480px; height:480px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,47,110,.10), transparent 70%);
  pointer-events:none;
  animation:cbst-blob-breathe 8s ease-in-out infinite;
}
.cbst-layers::after{
  content:"";
  position:absolute; bottom:-140px; left:-100px; width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,138,76,.10), transparent 70%);
  pointer-events:none;
  animation:cbst-blob-breathe 9s ease-in-out infinite 1.5s;
}
@keyframes cbst-blob-breathe{
  0%,100%{opacity:.7; transform:scale(1);}
  50%{opacity:1; transform:scale(1.15);}
}
.cbst-layers-grid{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:64px; align-items:center;
}
.cbst-layers-image-wrap{
  position:relative;
}
.cbst-layers-image-glow{
  position:absolute; inset:-28px;
  background:radial-gradient(55% 55% at 50% 50%, rgba(255,47,110,.28), transparent 70%);
  filter:blur(26px);
  z-index:0;
  animation:cbst-pulse 4.5s ease-in-out infinite;
}
.cbst-layers-image{
  position:relative; z-index:1;
  border-radius:var(--cbst-radius);
  background:#fff;
  box-shadow:0 40px 70px -35px rgba(28,22,22,.25);
  padding:8px;
  transform:rotate(-1.2deg);
  transition:transform .5s var(--cbst-ease), box-shadow .5s var(--cbst-ease);
}
.cbst-layers-image::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(135deg, var(--cbst-accent) 0%, var(--cbst-accent-2) 50%, rgba(255,138,76,.2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.5;
  transition:opacity .4s var(--cbst-ease);
}
.cbst-layers-image:hover{transform:rotate(0deg) translateY(-6px); box-shadow:0 50px 90px -30px rgba(255,47,110,.3);}
.cbst-layers-image:hover::before{opacity:1;}
/* REPLACE the src below with your own dashboard screenshot */
.cbst-layers-image img{
  width:100%;
  height:520px;
  object-fit: fill;
  border-radius:14px;
  display:block;
}

.cbst-layers-chip{
  position:absolute; z-index:2;
  display:flex; align-items:center; gap:7px;
  background:rgba(20,15,15,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:8px 14px;
  font-family:var(--cbst-font-mono);
  font-size:10.5px; font-weight:600; letter-spacing:.03em;
  color:#fff;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.55);
}
.cbst-layers-chip svg{width:13px; height:13px; flex:none; color:var(--cbst-accent-2);}
.cbst-layers-chip--a{top:-14px; right:-16px; animation:cbst-chip-float-a 5.5s ease-in-out infinite;}
.cbst-layers-chip--b{bottom:-14px; left:-14px; animation:cbst-chip-float-b 6.2s ease-in-out infinite;}
.cbst-layers-chip--b .cbst-chip-dot{width:6px; height:6px; border-radius:50%; background:#14e0b0; box-shadow:0 0 0 3px rgba(20,224,176,.22);}

.cbst-layers-title{
  font-family:var(--cbst-font-display);
  font-weight:800;
  font-size: 35px;
  line-height:1.12;
  letter-spacing:-.02em;
  margin-bottom:44px;
  color:var(--cbst-text-dark);
  max-width:520px;
}
.cbst-layers-title .cbst-accent-word{
  background:linear-gradient(97deg, var(--cbst-accent), var(--cbst-accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 24px rgba(255,47,110,.35), 0 0 44px rgba(255,138,76,.18);
}
.cbst-layers-content{position:relative;}
.cbst-layers-body{display:flex; gap:28px; align-items:flex-start;}
.cbst-layers-list{position:relative; flex:1; min-width:0; display:flex; flex-direction:column; gap:12px;}
.cbst-layers-item{
  --item-color: var(--cbst-accent);
  display:flex; gap:14px; align-items:center;
  padding:10px 14px 10px 16px;
  background:#fff;
  border:2px solid color-mix(in srgb, var(--item-color) 22%, rgba(28,22,22,.08));
  border-radius:14px;
  box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
  position:relative;
  overflow:hidden;
  transform:scale(1);
  transition:transform .4s var(--cbst-ease), box-shadow .4s var(--cbst-ease), border-color .4s var(--cbst-ease);
  animation:cbst-card-spotlight 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.cbst-layers-item::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--item-color), color-mix(in srgb, var(--item-color) 40%, transparent));
}
.cbst-layers-item::after{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--item-color) 16%, transparent), transparent);
  transform:skewX(-18deg);
  pointer-events:none;
}
.cbst-layers-item:hover::after{
  animation:cbst-card-shimmer 1s ease forwards;
}
@keyframes cbst-card-shimmer{
  to{left:120%;}
}
.cbst-layers-item:hover{
  transform:translateX(6px) translateY(-3px) scale(1.02);
  box-shadow:0 24px 44px -20px color-mix(in srgb, var(--item-color) 40%, rgba(28,22,22,.28));
  border-color:color-mix(in srgb, var(--item-color) 65%, transparent);
  animation-play-state:paused;
}
@keyframes cbst-card-spotlight{
  0%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
  4%{
    transform:scale(1.035);
    box-shadow:0 0 0 5px color-mix(in srgb, var(--item-color) 18%, transparent),
               0 30px 60px -14px color-mix(in srgb, var(--item-color) 55%, rgba(28,22,22,.3));
    border-color:var(--item-color);
  }
  16%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
  100%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
}
.cbst-layers-item-icon{
  flex:none; width:48px; height:48px; border-radius:13px;
  background:linear-gradient(150deg, var(--item-color), color-mix(in srgb, var(--item-color) 65%, #000 15%));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), inset 0 -6px 10px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  position:relative; z-index:1;
  transition:transform .35s var(--cbst-ease), box-shadow .35s var(--cbst-ease);
  animation:cbst-icon-spotlight 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.cbst-layers-item-icon::before,
.cbst-layers-item-icon::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--item-color);
  opacity:0;
  animation:cbst-icon-ripple 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.cbst-layers-item-icon::after{ animation-delay:calc(var(--spot-delay, 0s) + .15s); }
.cbst-layers-item-icon svg{width:21px; height:21px; stroke-width:2;}
.cbst-layers-item:hover .cbst-layers-item-icon{
  transform:scale(1.14) rotate(-5deg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 10px 22px -6px color-mix(in srgb, var(--item-color) 70%, transparent);
  animation-play-state:paused;
}
.cbst-layers-item:hover .cbst-layers-item-icon::before,
.cbst-layers-item:hover .cbst-layers-item-icon::after{ animation-play-state:paused; opacity:0; }
@keyframes cbst-icon-spotlight{
  0%{ transform:scale(1) rotate(0deg); }
  4%{ transform:scale(1.22) rotate(-8deg); }
  16%{ transform:scale(1) rotate(0deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
@keyframes cbst-icon-ripple{
  0%{ transform:scale(1); opacity:0; }
  4%{ transform:scale(1); opacity:.7; }
  20%{ transform:scale(1.7); opacity:0; }
  100%{ transform:scale(1); opacity:0; }
}
.cbst-layers-item-title{
  font-family:var(--cbst-font-mono);
  font-size:14.5px; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--item-color);
  margin-bottom:4px;
}
.cbst-layers-item-desc{font-size:16px; line-height:1.55; color: #000; max-width:400px;}

.cbst-layers-list[data-cbst-reveal="stagger"] > .cbst-layers-item{
  transform:translateX(-26px);
}
.cbst-layers-list[data-cbst-reveal="stagger"].cbst-in > .cbst-layers-item{
  transform:translateX(0);
}

.cbst-layers-flow{
  flex:none;
  align-self:flex-start;
  background:none;
  border:none;
  box-shadow:none;
  padding:16px 16px 14px;
  width:190px;
  display:flex; flex-direction:column;
  transition:transform .4s var(--cbst-ease);
  position:relative;
  overflow:visible;
}
.cbst-layers-flow:hover{
  transform:translateY(-4px);
}
.cbst-layers-flow:hover{
  transform:translateY(-4px);
  box-shadow:0 34px 64px -26px rgba(255,47,110,.3);
}


.cbst-layers-flow-title{
  font-family:var(--cbst-font-mono);
  font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cbst-text-dark-muted);
  margin-bottom:18px;
  display:flex; align-items:center; gap:7px;
}
.cbst-layers-flow-title svg{width:13px; height:13px; color:var(--cbst-accent); flex:none;}
.cbst-layers-flow-track{position:relative;}
.cbst-layers-flow-track::before{
  content:"";
  position:absolute; left:11px; top:6px; bottom:6px; width:3px;
  background:repeating-linear-gradient(
    180deg,
    color-mix(in srgb, var(--cbst-accent) 70%, transparent) 0px,
    color-mix(in srgb, var(--cbst-accent) 70%, transparent) 5px,
    transparent 5px,
    transparent 11px
  );
  background-size:3px 22px;
  border-radius:3px;
  animation:cbst-track-flow .9s linear infinite;
  box-shadow:0 0 14px 1px rgba(255,47,110,.35);
}
@keyframes cbst-track-flow{
  0%{background-position:0 0;}
  100%{background-position:0 22px;}
}

.cbst-layers-flow-beam,
.cbst-layers-flow-beam--b,
.cbst-layers-flow-beam--c{
  position:absolute; left:6px; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--cbst-accent) 55%, transparent 100%);
  box-shadow:0 0 18px 6px var(--cbst-accent), 0 0 0 4px rgba(255,47,110,.25);
  top:0; opacity:0;
}
.cbst-layers-flow-beam{ animation:cbst-beam-travel 2.2s linear infinite; }
.cbst-layers-flow-beam--b{ animation:cbst-beam-travel 2.2s linear infinite .7s; }
.cbst-layers-flow-beam--c{ animation:cbst-beam-travel 2.2s linear infinite 1.4s; }

@keyframes cbst-beam-travel{
  0%{top:0%; opacity:0; transform:scale(.5);}
  10%{opacity:1; transform:scale(1);}
  90%{opacity:1; transform:scale(1);}
  100%{top:96%; opacity:0; transform:scale(.5);}
}
.cbst-layers-flow-step{
  display:flex; align-items:center; gap:12px;
  font-family:var(--cbst-font-mono); font-size:16.5px; font-weight:550;
  letter-spacing:.03em; color:var(--cbst-text-dark);
  padding:30px 0; position:relative; z-index:1;
  transition:transform .3s var(--cbst-ease), color .3s var(--cbst-ease);
}
.cbst-layers-flow-step:hover{transform:translateX(3px); color:var(--step-color);}
.cbst-layers-flow-step .cbst-dot{
  width:16px; height:16px; border-radius:50%;
  background:var(--step-color, var(--cbst-accent));
  border:2px solid #fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--step-color, var(--cbst-accent)) 30%, transparent);
  flex:none;
  animation:cbst-flow-dot-pulse 3.6s ease-in-out infinite;
}
.cbst-layers-flow-step:nth-child(2) .cbst-dot{animation-delay:0s;}
.cbst-layers-flow-step:nth-child(3) .cbst-dot{animation-delay:.3s;}
.cbst-layers-flow-step:nth-child(4) .cbst-dot{animation-delay:.6s;}
.cbst-layers-flow-step:nth-child(5) .cbst-dot{animation-delay:.9s;}
.cbst-layers-flow-step:nth-child(6) .cbst-dot{animation-delay:1.2s;}
.cbst-layers-flow-step:nth-child(7) .cbst-dot{animation-delay:1.5s;}
@keyframes cbst-flow-dot-pulse{
  0%,80%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--step-color, var(--cbst-accent)) 30%, transparent); transform:scale(1);}
  15%{box-shadow:0 0 0 6px color-mix(in srgb, var(--step-color, var(--cbst-accent)) 15%, transparent); transform:scale(1.3);}
}

/* Responsive (add inside your existing @media blocks) */
@media (max-width: 980px){
  .cbst-layers-grid{grid-template-columns:1fr; gap:40px;}
  .cbst-layers-image-wrap{order:-1;}
  .cbst-layers-image{transform:none;}
  .cbst-layers-chip{display:none;}
  .cbst-layers-body{flex-direction:column;}
  .cbst-layers-flow{width:100%;}
}
@media (max-width: 640px){
  .cbst-layers-list::before{left:24px;}
}
  /* ============================================================
     SECTION 03 — ECOSYSTEM (dark)
     ============================================================ */
  .cbst-ecosystem{
    background:var(--cbst-bg-dark);
    color:var(--cbst-text-light);
    padding: 34px 0;
    position:relative;
    overflow:hidden;
  }
  .cbst-ecosystem::before{
    content:"";
    position:absolute; left:50%; top:44%; width:900px; height:900px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(255,47,110,.14), transparent 65%);
    filter:blur(10px);
    pointer-events:none;
  }
  .cbst-ecosystem-head{max-width:560px; margin:0 auto 54px; text-align:center;}
  .cbst-ecosystem-head .cbst-eyebrow{justify-content:center;}
  .cbst-ecosystem-title{font-size: 35px; line-height:1.15; color: #fff;}

.cbst-ecosystem-diagram{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  grid-template-areas:
    "top   top   top"
    "l1    img   r1"
    "l2    img   r2"
    "b1    .     b2";
  gap:8px 60px;
  max-width:1060px; margin:0 auto;
}
 .cbst-eco-node{
  --item-color: var(--cbst-accent);
  background:var(--cbst-card-dark);
  border:1.5px solid color-mix(in srgb, var(--item-color) 30%, var(--cbst-card-dark-border));
  border-radius:14px;
  padding:18px 20px;
  display:flex; gap:14px; align-items:flex-start;
  position:relative; z-index:2;
  transition:transform .4s var(--cbst-ease), border-color .4s var(--cbst-ease), box-shadow .4s var(--cbst-ease);
}
.cbst-eco-node:hover{
  transform:translateY(-5px) scale(1.02);
  border-color:var(--item-color);
  box-shadow:0 24px 46px -18px color-mix(in srgb, var(--item-color) 55%, transparent);
}
.cbst-eco-node-icon{
  flex:none; width:40px; height:40px; border-radius:11px;
  background:linear-gradient(150deg, var(--item-color), color-mix(in srgb, var(--item-color) 65%, #000 15%));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -5px 8px rgba(0,0,0,.2), 0 8px 18px -8px color-mix(in srgb, var(--item-color) 60%, transparent);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--cbst-ease), box-shadow .35s var(--cbst-ease);
}
.cbst-eco-node:hover .cbst-eco-node-icon{
  transform:scale(1.12) rotate(-5deg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 12px 24px -8px color-mix(in srgb, var(--item-color) 70%, transparent);
}
.cbst-eco-node-icon svg{width:18px; height:18px; stroke-width:2;}
.cbst-eco-node-title{
  font-family:var(--cbst-font-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--item-color);
  margin-bottom:6px;
}
.cbst-eco-node-desc{font-size:14.5px; line-height:1.55; color:var(--cbst-text-light-muted);}

  .cbst-eco-top{grid-area:top; justify-self:center; text-align:center; max-width:220px;}
  .cbst-eco-top .cbst-eco-node{flex-direction:column; align-items:center; text-align:center;}
  .cbst-eco-l1{grid-area:l1; align-self:start;}
  .cbst-eco-l2{grid-area:l2; align-self:start;}
  .cbst-eco-r1{grid-area:r1; align-self:start;}
  .cbst-eco-r2{grid-area:r2; align-self:start;}
  .cbst-eco-b1{grid-area:b1;}
  .cbst-eco-b2{grid-area:b2;}

  .cbst-eco-center{
    grid-area:img; position:relative; z-index:1;
    border-radius:18px; overflow:hidden;
    border:1px solid rgba(255,47,110,.3);
    background:#0f0b0b;
    box-shadow:0 40px 90px -30px rgba(255,47,110,.25);
    align-self:center;
  }
  /* REPLACE the src below with your own product screenshot */
  .cbst-eco-center img{width:160%; display:block;}

  .cbst-eco-lines{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;}
  .cbst-eco-lines path{
    fill:none; stroke:rgba(255,47,110,.4); stroke-width:.5;
    stroke-dasharray:100;
    stroke-dashoffset:100;
    transition:stroke-dashoffset 1.6s var(--cbst-ease);
    vector-effect:non-scaling-stroke;
  }
  .cbst-eco-pill{
    fill:none; stroke:rgba(255,47,110,.45); stroke-width:.5;
    stroke-dasharray:3 2.4;
    vector-effect:non-scaling-stroke;
  }
  .cbst-eco-dot{fill:var(--cbst-accent); opacity:0; transition:opacity .5s var(--cbst-ease) .9s;}
  .cbst-ecosystem.cbst-in .cbst-eco-lines path{stroke-dashoffset:0;}
  .cbst-ecosystem.cbst-in .cbst-eco-dot{opacity:1;}

  /* ============================================================
     SECTION 04 — EVOLVE (cream)
     ============================================================ */
 .cbst-evolve{
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(255,47,110,.16), transparent 60%),
    radial-gradient(500px 380px at 85% 15%, rgba(255,138,76,.15), transparent 60%),
    radial-gradient(550px 420px at 75% 85%, rgba(168,85,247,.13), transparent 60%),
    radial-gradient(480px 380px at 20% 85%, rgba(20,224,176,.12), transparent 60%),
    var(--cbst-bg-cream);
  background-size:200% 200%;
  animation:cbst-mesh-move 18s ease-in-out infinite;
  padding:70px 0 60px;
  position:relative;
  overflow:hidden;
}
@keyframes cbst-mesh-move{
  0%,100%{background-position:0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%;}
  50%{background-position:20% 30%, 80% 25%, 75% 70%, 25% 75%, 0% 0%;}
}
.cbst-evolve-particle{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--cbst-accent) 70%, transparent 100%);
  opacity:0; pointer-events:none; z-index:0;
  animation:cbst-particle-float linear infinite;
}
@keyframes cbst-particle-float{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  15%{opacity:.65;}
  85%{opacity:.65;}
  100%{transform:translateY(-160px) translateX(24px); opacity:0;}
}
  .cbst-evolve-head{max-width:600px; margin:0 auto 64px; text-align:center;}
  .cbst-evolve-head .cbst-eyebrow{justify-content:center;}
  .cbst-evolve-title{font-size:clamp(28px,3.4vw,40px); line-height:1.15;}

  .cbst-evolve-steps{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:28px; position:relative; margin-bottom:70px;
  }
  .cbst-evolve-steps::before{
    content:"";
    position:absolute; top:38px; left:12%; right:12%; height:1px;
    background:repeating-linear-gradient(90deg, rgba(28,22,22,.18) 0 6px, transparent 6px 12px);
    z-index:0;
  }
  .cbst-evolve-step{text-align:center; position:relative; z-index:1;}

  .cbst-evolve-steps::before{
  content:"";
  position:absolute; top:40px; left:12%; right:12%; height:3px;
  background:linear-gradient(90deg,#3b82f6,#ff2f6e,#14e0b0,#ff8a4c,#3b82f6);
  background-size:200% 100%;
  border-radius:3px;
  opacity:.9;
  box-shadow:0 0 16px 3px rgba(255,47,110,.35);
  z-index:0;
  animation:cbst-line-flow 4s linear infinite, cbst-line-glow 2.4s ease-in-out infinite;
}
@keyframes cbst-line-flow{
  0%{background-position:0% 0%;}
  100%{background-position:200% 0%;}
}
@keyframes cbst-line-glow{
  0%,100%{box-shadow:0 0 16px 3px rgba(255,47,110,.3);}
  50%{box-shadow:0 0 28px 8px rgba(255,47,110,.6);}
}
.cbst-evolve-step-icon{
  width:80px; height:80px; border-radius:50%; margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  color:#fff;
  /*transition:transform .4s ease;*/
  animation:cbst-icon-bounce 3s ease-in-out infinite;
}
.cbst-evolve-step:nth-child(1) .cbst-evolve-step-icon{
  background:linear-gradient(150deg,#3b82f6,#1d4ed8);
  box-shadow:0 12px 26px -8px rgba(59,130,246,.65);
}
.cbst-evolve-step:nth-child(2) .cbst-evolve-step-icon{
  background:linear-gradient(150deg,#ff2f6e,#c81e56);
  box-shadow:0 12px 26px -8px rgba(255,47,110,.65);
}
.cbst-evolve-step:nth-child(3) .cbst-evolve-step-icon{
  background:linear-gradient(150deg,#14e0b0,#0d9488);
  box-shadow:0 12px 26px -8px rgba(20,224,176,.65);
}
.cbst-evolve-step:nth-child(4) .cbst-evolve-step-icon{
  background:linear-gradient(150deg,#ff8a4c,#ea580c);
  box-shadow:0 12px 26px -8px rgba(255,138,76,.65);
}

.cbst-evolve-step-icon::before{
  content:"";
  position:absolute; inset:-9px; border-radius:50%;
  border:2px dashed rgba(0,0,0,.18);
  animation:cbst-ring-spin 7s linear infinite;
}
.cbst-evolve-step-icon::after{
  content:"";
  position:absolute; inset:-4px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,255,255,.5);
  animation:cbst-ring-pulse 2.4s ease-out infinite;
}
.cbst-evolve-step-icon svg{ position:relative; z-index:1; width:28px; height:28px;}

@keyframes cbst-icon-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
@keyframes cbst-ring-spin{
  to{transform:rotate(360deg);}
}
@keyframes cbst-ring-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,47,110,.4);}
  70%{box-shadow:0 0 0 16px rgba(255,47,110,0);}
  100%{box-shadow:0 0 0 0 rgba(255,47,110,0);}
}
.cbst-evolve-step:hover .cbst-evolve-step-icon{
  transform:scale(1.15) translateY(-10px);
  animation-play-state:paused;
}
  .cbst-evolve-step-label{
    font-family: 'poppins-local'; font-size:20px; font-weight:900;
    letter-spacing:.1em; text-transform:uppercase; color:var(--cbst-accent);
    margin-bottom:10px;
  }
  .cbst-evolve-step-desc{font-size:16px; line-height:1.6; color: maroon; max-width:220px; margin:0 auto;}

.cbst-evolve-quote-card{
  max-width:760px; margin:0 auto;
  background:var(--cbst-card-dark);
  border:1.5px solid rgba(255,47,110,.18);
  border-radius:20px;
  padding:2px 22px 22px;
  position:relative;
  box-shadow:0 30px 60px -30px rgba(28,22,22,.3);
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
}
.cbst-evolve-quote-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit; padding:1.5px;
  background:linear-gradient(120deg,#3b82f6,#ff2f6e,#14e0b0,#ff8a4c,#3b82f6);
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:cbst-border-flow 6s linear infinite;
  opacity:.6;
}
@keyframes cbst-border-flow{
  0%{background-position:0% 50%;}
  100%{background-position:300% 50%;}
}
.cbst-evolve-quote-card:hover{
  transform:translateY(-4px);
  box-shadow:0 40px 74px -26px rgba(255,47,110,.28);
}
.cbst-evolve-quote-mark{
  width:34px; height:34px; color:var(--cbst-accent); opacity:.35;
  margin-bottom:10px; display:block;
}
.cbst-evolve-quote{
  position:relative; z-index:1;
  font-family:var(--cbst-font-display);
  font-weight:600;
  font-size:clamp(19px,2.1vw,23px);
  line-height:1.55;
  color: #fff;
  margin:0;
  border-left:none;
  padding:0;
}
.cbst-evolve-quote .cbst-accent-word{
  background:linear-gradient(97deg,var(--cbst-accent),var(--cbst-accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 980px){
    .cbst-hero-grid{grid-template-columns:1fr; gap:48px;}
    .cbst-hero-visual{order:2;}
    .cbst-hero-chip{font-size:10px; padding:7px 11px;}
    .cbst-hero-chip--top{top:-12px; left:-10px;}
    .cbst-hero-chip--bottom{bottom:-12px; right:-10px;}
    .cbst-layers-grid{grid-template-columns:1fr; gap:40px;}
    .cbst-layers-image-wrap{order:2;}
    .cbst-layers-image{transform:none;}
    .cbst-layers-chip{display:none;}
    .cbst-layers-body{flex-direction:column;}
    .cbst-layers-flow{width:100%;}
    .cbst-ecosystem-diagram{
      grid-template-columns:1fr; grid-template-areas:
        "top" "img" "l1" "r1" "l2" "r2" "b1" "b2";
    }
    .cbst-eco-center{order:-1; max-width:520px; margin:0 auto 8px;}
    .cbst-eco-lines{display:none;}
    .cbst-evolve-steps{grid-template-columns:1fr 1fr; row-gap:44px;}
    .cbst-evolve-steps::before{display:none;}
  }

  @media (max-width: 640px){
    .cbst-wrap{padding:0 20px;}
    .cbst-hero{padding:64px 0 56px;}
    .cbst-hero-orbit{flex-wrap:wrap; row-gap:24px; justify-content:flex-start;}
    .cbst-hero-orbit-arrow{display:none;}
    .cbst-hero-orbit-item{width:auto; margin-right:10px;}
    .cbst-hero-cta{gap:12px;}
    .cbst-hero-btn{padding:13px 20px; font-size:13.5px; flex:1 1 auto; justify-content:center;}
    .cbst-hero-chip{display:none;}
    .cbst-layers, .cbst-ecosystem, .cbst-evolve{padding:72px 0;}
    .cbst-layers-list::before{left:24px;}
    .cbst-evolve-steps{grid-template-columns:1fr; gap:36px;}
    .cbst-evolve-quote{font-size:18px; padding-left:18px;}
  }






/*========================================================
           Marketing Automation Email Funnels
========================================================*/


/*===============================================
          Marketing Automation & Email Funnels
===============================================*/

   :root{
    --maef-black:#0a0a0c;
    --maef-black-2:#111114;
    --maef-cream:#f6efe6;
    --maef-cream-2:#efe6d9;
    --maef-pink:#ff2f5b;
    --maef-orange:#ff7a3d;
    --maef-gradient: linear-gradient(90deg,var(--maef-pink),var(--maef-orange));
    --maef-text-dark:#e9e6df;
    --maef-text-dim:#9a968f;
    --maef-text-light:#1a1714;
    --maef-text-light-dim:#6b665e;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{background:var(--maef-black);color:var(--maef-text-dark);line-height:1.5;}
  img,svg{display:block;}
  .maef-wrap{max-width:1200px;margin:0 auto;padding:0 48px;}
  .maef-eyebrow22{
    display:flex;align-items:center;gap:10px;
    font-size:12px;font-weight:700;letter-spacing:.16em;
    color:#ff3860;text-transform:uppercase;margin-bottom:18px;
    margin-top: 30px;
  }
  .maef-eyebrow22 .maef-num{
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;border:1px solid var(--maef-pink);border-radius:50%;
    font-size:11px;color:var(--maef-pink);
  }
  h1,h2{
    font-weight:800;letter-spacing:-0.025em;line-height:1.06;
  }
  h1{
    font-size:50px;
    color:#ffffff;
  }

.maef-highlight{
    background:linear-gradient(100deg,#ff3860,#ff8a65);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    filter: none !important;
}

  h2{font-size:38px;color:var(--maef-text-light);}
  .maef-lead-dark p{color:#a7a29a;font-size:16px;max-width:420px;margin-top:18px;line-height:1.6;}
  .maef-lead-light p{color:var(--maef-text-light-dim);font-size:15.5px;max-width:420px;margin-top:18px;}

  @keyframes maef-shine{
    0%{background-position:0% 50%;}
    100%{background-position:300% 50%;}
  }
  @keyframes maef-fade-up{
    from{opacity:0;transform:translateY(22px);}
    to{opacity:1;transform:translateY(0);}
  }
  @keyframes maef-float-orb{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-16px,22px) scale(1.08);}
  }
  @keyframes maef-pulse-glow{
    0%,100%{box-shadow:0 0 0 0 rgba(255,56,96,.35);}
    50%{box-shadow:0 0 0 10px rgba(255,56,96,0);}
  }
  .maef-fade-in{opacity:0;animation:maef-fade-up .8s ease forwards;}
  .maef-fade-in.maef-d1{animation-delay:.05s;}
  .maef-fade-in.maef-d2{animation-delay:.2s;}
  .maef-fade-in.maef-d3{animation-delay:.35s;}
  .maef-fade-in.maef-d4{animation-delay:.5s;}
  .maef-fade-in.maef-d5{animation-delay:.65s;}

  /* ============ SECTION 1 : HERO ============ */
  .maef-hero{
    background:
      radial-gradient(ellipse at 75% 20%, rgba(255,60,80,.10), transparent 55%),
      var(--maef-black);
    padding:80px 0 70px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid #1c1a19;
  }
  .maef-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;}
  .maef-orb1{width:280px;height:280px;background:radial-gradient(circle,rgba(255,56,96,.35),transparent 70%);top:-60px;right:20%;animation:maef-float-orb 9s ease-in-out infinite;}
  .maef-orb2{width:220px;height:220px;background:radial-gradient(circle,rgba(255,122,61,.28),transparent 70%);bottom:-40px;left:5%;animation:maef-float-orb 11s ease-in-out infinite reverse;}
  .maef-orb3{width:180px;height:180px;background:radial-gradient(circle,rgba(255,56,96,.22),transparent 70%);top:40%;right:2%;animation:maef-float-orb 7s ease-in-out infinite;}
  .maef-hero .maef-wrap{position:relative;z-index:1;}
  .maef-hero .maef-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
  .maef-hero h1{
    font-size:50px;
    font-weight:800;
    line-height:1.06;
    letter-spacing:-0.025em;
    color:#ffffff;

    /* Remove unwanted glow / blur */
    filter:none;
    text-shadow:none;
    -webkit-text-stroke:0;

    margin-bottom:16px;
}

.maef-hero h1 .maef-highlight{
    background:linear-gradient(
        100deg,
        #ff3860 0%,
        #ff5876 45%,
        #ff8a65 100%
    );

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

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

    filter:none;
    text-shadow:none;

    /* No shine animation */
    animation:none;
}
  .maef-features-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;
  }
  @keyframes maef-float-icon{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
  }
  @keyframes maef-spin-ring{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  .maef-feature{
    border-top:1px solid #2a2724;padding-top:20px;
    transition:transform .3s ease;
  }
  .maef-feature:hover{transform:translateY(-6px);}
  .maef-feature .maef-icon-badge{
    width:50px;height:50px;border-radius:50%;
    position:relative;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;
    background:#141014;
    animation:maef-float-icon 3.5s ease-in-out infinite;
  }
  .maef-feature .maef-icon-badge::before{
    content:"";position:absolute;inset:-2px;border-radius:50%;
    background:conic-gradient(from 0deg,#ff3860,#ff8a65,#ff3860);
    animation:maef-spin-ring 4s linear infinite;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  }
  .maef-feature .maef-icon-badge::after{
    content:"";position:absolute;inset:2px;border-radius:50%;
    background:#141014;
    box-shadow:0 0 16px 2px rgba(255,56,96,.45) inset;
  }
  .maef-feature:nth-child(2) .maef-icon-badge{animation-delay:.6s;}
  .maef-feature:nth-child(3) .maef-icon-badge{animation-delay:1.2s;}
  .maef-feature:nth-child(4) .maef-icon-badge{animation-delay:1.8s;}
  .maef-feature svg{width:20px;height:20px;stroke:#ff5876;margin:0;position:relative;z-index:1;}
  .maef-feature .maef-ftitle{font-size:12.5px;font-weight:700;letter-spacing:.09em;color:#fff;margin-bottom:8px;}
  .maef-feature .maef-fdesc{font-size:12.5px;color:#8b877f;line-height:1.5;}

  /* maef-hero maef-diagram */
  .maef-diagram{position:relative;padding-top:6px;}
  .maef-hero-diagram-img{margin-top: 70px;width:100%;height:auto;border-radius:16px; height: 430px;}
  .maef-top-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .maef-device-card{
    background:linear-gradient(160deg,#17151a,#0e0d10);
    border:1px solid #2b2730;border-radius:14px;padding:16px 12px 22px;
    text-align:center;position:relative;
  }
  .maef-device-card .maef-icon-circle{
    width:34px;height:34px;border-radius:50%;
    background:rgba(255,60,80,.12);
    display:flex;align-items:center;justify-content:center;margin:0 auto 10px;
  }
  .maef-device-card .maef-icon-circle svg{width:17px;height:17px;stroke:var(--maef-pink);margin:0;}
  .maef-device-card .maef-label{font-size:10px;font-weight:700;letter-spacing:.08em;color:#e7e3dc;margin-bottom:10px;}
  .maef-device-screen{
    height:56px;border-radius:6px;
    background:linear-gradient(160deg,#1c1a20,#131116);
    border:1px solid #2c2833;
  }
  .maef-connector-mid{
    display:flex;justify-content:center;padding:16px 0;position:relative;
  }
  .maef-connector-mid::before{
    content:"";position:absolute;top:0;left:50%;width:1px;height:100%;
    background:linear-gradient(var(--maef-pink),transparent);opacity:.5;
  }
  .maef-core-box{
    background:linear-gradient(160deg,#19161b,#0c0b0d);
    border:1px solid var(--maef-pink);
    box-shadow:0 0 30px rgba(255,50,80,.18), inset 0 0 20px rgba(255,90,60,.05);
    border-radius:12px;text-align:center;padding:20px;
    position:relative;
  }
  .maef-core-box .maef-title{font-size:20px;font-weight:800;letter-spacing:.04em;color:#fff;}
  .maef-core-box .maef-chip{
    margin:14px auto 0;width:34px;height:22px;border-radius:5px;
    background:rgba(255,90,60,.12);border:1px solid rgba(255,90,60,.4);
    display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--maef-orange);
  }
  .maef-bottom-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
  .maef-sys-card{
    background:linear-gradient(160deg,#17151a,#0e0d10);
    border:1px solid #2b2730;border-radius:12px;padding:16px 14px;
  }
  .maef-sys-card .maef-icon-circle{
    width:30px;height:30px;border-radius:8px;
    background:rgba(255,60,80,.12);
    display:flex;align-items:center;justify-content:center;margin-bottom:10px;
  }
  .maef-sys-card .maef-icon-circle svg{width:15px;height:15px;stroke:var(--maef-pink);margin:0;}
  .maef-sys-card .maef-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#e7e3dc;margin-bottom:4px;}
  .maef-sys-card .maef-sub{font-size:10.5px;color:var(--maef-text-dim);}

   /* ============ SECTION 2: AUTOMATED CUSTOMER JOURNEYS ============ */
  .maef-connect-sec{
    background:
      radial-gradient(circle at 15% 20%, rgba(255,56,96,.10), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(255,122,61,.12), transparent 45%),
      radial-gradient(circle at 60% 10%, rgba(255,138,101,.08), transparent 40%),
      linear-gradient(155deg,#f8f1e8 0%,#f3e8db 55%,#f6ecdf 100%);
    background-size:200% 200%,200% 200%,200% 200%,100% 100%;
    animation:maef-mesh-shift 18s ease-in-out infinite;
    color:var(--maef-text-light);
    padding:70px 0;
    position:relative;
    overflow:hidden;
  }
  .maef-connect-sec::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:radial-gradient(circle,rgba(120,90,60,.10) 1px,transparent 1.4px);
    background-size:26px 26px;
    -webkit-mask:radial-gradient(circle at 20% 30%, #000 0%, transparent 60%);
    mask:radial-gradient(circle at 20% 30%, #000 0%, transparent 60%);
  }
  @keyframes maef-mesh-shift{
    0%,100%{background-position:0% 0%,100% 100%,50% 0%,0 0;}
    50%{background-position:20% 15%,80% 85%,60% 10%,0 0;}
  }
  .maef-connect-sec .maef-cs-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;}
  .maef-connect-sec .maef-cs-orb1{width:320px;height:320px;background:radial-gradient(circle,rgba(255,56,96,.16),transparent 70%);top:-80px;left:30%;animation:maef-float-orb 12s ease-in-out infinite;}
  .maef-connect-sec .maef-cs-orb2{width:260px;height:260px;background:radial-gradient(circle,rgba(255,122,61,.14),transparent 70%);bottom:-60px;right:8%;animation:maef-float-orb 10s ease-in-out infinite reverse;}
  .maef-connect-sec .maef-wrap{position:relative;z-index:1; padding: 6px;}
  .maef-connect-sec .maef-eyebrow{
    color:var(--maef-pink);position:relative;
  }
  .maef-connect-sec .maef-eyebrow::after{
    content:"";display:inline-block;width:28px;height:1.5px;
    background:linear-gradient(90deg,var(--maef-pink),transparent);margin-left:4px;vertical-align:middle;
  }
  .maef-connect-sec h2{color:var(--maef-text-light);text-shadow:0 2px 18px rgba(255,90,60,.08);}
  .maef-connect-sec .maef-heading-highlight{
    background:linear-gradient(100deg,#ff3860,#ff8a65);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 14px rgba(255,80,100,.35));
  }
  .maef-connect-left{position:relative;padding-left:22px;}
  .maef-connect-left::before{
    content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;
    background:linear-gradient(180deg,var(--maef-pink),var(--maef-orange));
  }
  .maef-connect-left .maef-lead-light p{
    position:relative;font-size:16px;line-height:1.75;color: black;
  }
 .maef-connect-outer{
  display:grid;grid-template-columns:0.65fr 1.9fr;gap:10px;align-items:start;margin-top:10px;
}
  .maef-connect-left .maef-eyebrow,
  .maef-connect-left h2,
  .maef-connect-left .maef-lead-light{margin-top:0;}
  .maef-connect-grid{
    display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:40px;align-items:start;position:relative;
  }
  .maef-connect-lines{
    position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  }
  @property --maef-border-angle{
    syntax:'<angle>';
    inherits:false;
    initial-value:0deg;
  }
  @keyframes maef-float-card{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
  }
  @keyframes maef-card-glow-pink{
    0%,100%{box-shadow:0 10px 24px rgba(255,56,96,.10);}
    50%{box-shadow:0 20px 42px rgba(255,56,96,.26);}
  }
  @keyframes maef-card-glow-orange{
    0%,100%{box-shadow:0 10px 24px rgba(255,122,61,.10);}
    50%{box-shadow:0 20px 42px rgba(255,122,61,.26);}
  }
  @keyframes maef-border-rotate{
    to{--maef-border-angle:360deg;}
  }
  @keyframes maef-ring-spin-cw{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  @keyframes maef-ring-spin-ccw{
    from{transform:rotate(0deg);}
    to{transform:rotate(-360deg);}
  }
  @keyframes maef-icon-pulse-ring{
    0%,100%{opacity:.5;transform:scale(1);}
    50%{opacity:1;transform:scale(1.08);}
  }
  .maef-side-col{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1;}
.maef-conn-card{
  position:relative;
  background:linear-gradient(165deg,#fff7f2 0%,#ffe9ee 100%);
  border:none;border-radius:18px;padding:26px 24px 28px;min-height:132px;
  box-shadow:0 2px 8px rgba(120,90,60,.05), 0 1px 2px rgba(120,90,60,.04);
  animation:maef-float-card 4.5s ease-in-out infinite;
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
  overflow:hidden;
}
.maef-side-col:first-child .maef-conn-card{
  background:linear-gradient(165deg,#fff0f2 0%,#ffd9e0 100%);
}
.maef-side-col:last-child .maef-conn-card{
  background:linear-gradient(165deg,#fff3e6 0%,#ffdcbf 100%);
}
.maef-conn-card::after{
  content:"";position:absolute;top:-40%;right:-25%;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85),transparent 70%);
  pointer-events:none;opacity:.7;
}
.maef-conn-card .maef-ctitle{
  font-size:13.5px;font-weight:800;letter-spacing:.03em;color:#241f1a;
  transition:color .3s ease;
}

.maef-conn-card::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  padding:2.2px;
  background:conic-gradient(from var(--maef-border-angle),#ff3860,#ff6f8c,#ff8a65,#ffc199,#ff8a65,#ff3860);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:maef-border-rotate 4s linear infinite;
  pointer-events:none;
  opacity:.9;
  filter:drop-shadow(0 0 6px rgba(255,80,100,.35));
  transition:opacity .3s ease, filter .3s ease;
}
.maef-conn-card:hover::before{
  opacity:1;
  filter:drop-shadow(0 0 12px rgba(255,80,100,.55));
}
.maef-side-col:first-child .maef-conn-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(255,56,96,.10), transparent 55%),
    linear-gradient(165deg,#ffffff 0%,#fff5f6 55%,#ffedf0 100%);
}
.maef-side-col:last-child .maef-conn-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(255,122,61,.12), transparent 55%),
    linear-gradient(165deg,#ffffff 0%,#fff7ee 55%,#ffefe0 100%);
}
.maef-conn-card::after{
  content:"";position:absolute;top:-40%;right:-25%;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%);
  pointer-events:none;opacity:.6;
}
.maef-conn-card:hover{
  transform:translateY(-14px) scale(1.035);
  box-shadow:0 26px 48px rgba(255,56,96,.24);
}
.maef-side-col:last-child .maef-conn-card:hover{
  box-shadow:0 26px 48px rgba(255,122,61,.24);
}
.maef-conn-card:hover::before{opacity:1;}
.maef-conn-card > *{position:relative;z-index:1;}
.maef-side-col:first-child .maef-conn-card:nth-child(1){animation-delay:0s,0s;}
.maef-side-col:first-child .maef-conn-card:nth-child(2){animation-delay:.5s,.4s;}
.maef-side-col:first-child .maef-conn-card:nth-child(3){animation-delay:1s,.8s;}
.maef-side-col:last-child .maef-conn-card:nth-child(1){animation-delay:1.5s,1.2s;}
.maef-side-col:last-child .maef-conn-card:nth-child(2){animation-delay:2s,1.6s;}
.maef-side-col:last-child .maef-conn-card:nth-child(3){animation-delay:2.5s,2s;}
.maef-conn-card:hover{
  transform:translateY(-14px) scale(1.035);
  box-shadow:0 26px 48px rgba(255,56,96,.24);
}
.maef-conn-card .maef-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.maef-conn-card:hover .maef-ctitle{color:var(--maef-pink);}
.maef-side-col:last-child .maef-conn-card:hover .maef-ctitle{color:var(--maef-orange);}
.maef-conn-card .maef-cdesc{font-size:12.5px;color:#847c70;line-height:1.65;}
  .maef-conn-card .maef-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}

.maef-conn-card:hover .maef-ic.maef-pink{box-shadow:0 10px 22px rgba(255,56,96,.38);}
.maef-conn-card:hover .maef-ic.maef-orange{box-shadow:0 10px 22px rgba(255,122,61,.38);}
.maef-conn-card .maef-ic svg{width:20px;height:20px;margin:0;position:relative;z-index:1;}
.maef-conn-card .maef-ic.maef-pink svg{stroke:var(--maef-pink);}
.maef-conn-card .maef-ic.maef-orange svg{stroke:var(--maef-orange);}
  .maef-conn-card .maef-ctitle{font-size:13px;font-weight:700;letter-spacing:.04em;}
  .maef-conn-card .maef-cdesc{font-size:13.5px;color: black;line-height:1.6;}

.maef-conn-card .maef-ic{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s ease, box-shadow .35s ease;
  position:relative;
}
.maef-conn-card .maef-ic::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid currentColor;opacity:.3;
  animation:maef-icon-pulse-ring 2.6s ease-in-out infinite;
}
.maef-conn-card .maef-ic::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.06);
  pointer-events:none;
}
.maef-conn-card .maef-ic.maef-pink{
  background:linear-gradient(150deg,#ffeef0 0%,#ffd2da 55%,#ffb8c6 100%);
  color:var(--maef-pink);
  box-shadow:0 6px 14px rgba(255,56,96,.22);
}
.maef-conn-card .maef-ic.maef-orange{
  background:linear-gradient(150deg,#fff1e6 0%,#ffdcc4 55%,#ffc39a 100%);
  color:var(--maef-orange);
  box-shadow:0 6px 14px rgba(255,122,61,.22);
}
.maef-conn-card:hover .maef-ic{
  transform:rotate(-10deg) scale(1.16);
}
  .maef-hub-wrap{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:340px;align-self:center;z-index:1;}
  .maef-hub-ring{
    position:absolute;border-radius:50%;border:1px dashed #e3b7a9;
  }
  .maef-ring1{width:340px;height:340px;animation:maef-ring-spin-cw 30s linear infinite;}
  .maef-ring2{width:260px;height:260px;border-style:dotted;animation:maef-ring-spin-ccw 22s linear infinite;}
  .maef-hub-core{
  position:relative;z-index:2;border-radius:50%;
  width:250px;height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(160,40,40,.12);border:1px solid #f0d9cb;
  animation:maef-card-glow-pink 3s ease-in-out infinite;
}
.maef-hub-core .maef-stack-img{
  width:970px;height:auto;
  max-width:100%;
  object-fit:contain;
  margin-bottom:8px;
}
  .maef-hub-core .maef-htitle{font-size:16px;font-weight:800;letter-spacing:.04em;}
  .maef-hub-core .maef-hsub{font-size:10.5px;color:var(--maef-text-light-dim);margin-top:2px;}

  /* ============ SECTION 3: AUTOMATION ENGINE ============ */
/* ==========================================================
   SECTION 3: THE AUTOMATION ENGINE
   All classes prefixed with "eng-" so nothing clashes with
   other sections/stylesheets on the page.
   ========================================================== */

* { box-sizing: border-box; }

body{
  margin:0;
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  background:#0a0a0a;
}

.maef-eng-sec{
  background:#0a0a0a;
  color:#fff;
  padding:80px 0;
  overflow:hidden;
}

.maef-eng-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
}

.maef-eng-grid{
  display:grid;
  grid-template-columns:0.8fr 1.4fr;
  gap:40px;
  align-items:center;
}

/* -------------------- LEFT -------------------- */
.maef-eng-left{
  border-left:2px solid #ff2d55;
  padding-left:24px;
}

.maef-eng-eyebrow{
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
  color:#fff;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.maef-eng-eyebrow::after{
  content:'';
  width:30px;
  height:1px;
  background:#ff2d55;
}

.maef-eng-left h2{
  font-size:40px;
  font-weight:800;
  line-height:1.25;
  margin:0 0 20px;
  color: #fff;
}

.maef-eng-accent{
  background:linear-gradient(90deg,#ff2d55,#ff7a3d);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.maef-eng-lead{
  font-size:18px;
  line-height:1.7;
  color: #e5e5e5;
  max-width:360px;
  margin:0;
}

/* -------------------- RIGHT: cards + orbit -------------------- */
.maef-eng-right{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}

.maef-eng-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.maef-eng-card{
  border:1px solid #4a1622;
  border-radius:12px;
  padding:16px 18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:rgba(255,45,85,.04);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.maef-eng-card:hover{
  border-color:#ff2d55;
  background:rgba(255,45,85,.08);
  transform:translateY(-2px);
}

.maef-eng-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #ff2d55;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.maef-eng-icon svg{
  width:18px;
  height:18px;
  stroke:#ff2d55;
  margin:0;
}

.maef-eng-ctext h4{
  font-size:13px;
  font-weight:800;
  letter-spacing:.05em;
  margin:0 0 6px;
  color:#fff;
}
.maef-eng-ctext p{
  font-size:12px;
  line-height:1.6;
  color:#9a9a9a;
  margin:0;
}

/* -------------------- ORBIT (image + connecting lines) -------------------- */
.maef-eng-orbit{
  width:260px;
  height:260px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}

.maef-eng-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  overflow:visible;
}
.maef-eng-lines path{
  fill:none;
  stroke:#ff2d55;
  stroke-width:1.4;
  stroke-dasharray:4 4;
  opacity:.59;
  filter:drop-shadow(0 0 3px rgba(255,45,85,.6));
  animation:maef-eng-dash 22s linear infinite;
}
@keyframes maef-eng-dash{
  to{ stroke-dashoffset:-200; }
}

.maef-eng-orbit-glow{
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,45,85,.35) 0%,rgba(255,45,85,0) 70%);
  z-index:0;
  animation:maef-eng-pulse 4s ease-in-out infinite;
}
@keyframes maef-eng-pulse{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}

.maef-eng-orbit-img{
  width:260px;
  height:260px;
  object-fit:contain;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 0 25px rgba(255,45,85,.55));
}

/* fallback shown via JS if the image fails to load */
.maef-eng-orbit-fallback{
  position:relative;
  z-index:2;
  width:110px;
  height:110px;
  border-radius:20px;
  background:linear-gradient(145deg,#1a1a2e,#0d0d1a);
  border:1px solid #ff2d55;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:0 0 30px rgba(255,45,85,.45);
}
.maef-eng-orbit-fallback svg{
  width:34px;
  height:34px;
  stroke:#00d4ff;
  margin:0;
}
.maef-eng-orbit-fallback span{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:#00d4ff;
  text-shadow:0 0 10px rgba(0,212,255,.8);
}

/* -------------------- STATS / TECH STACK ROW -------------------- */
.maef-eng-stats{
  margin-top:56px;
  border:1px solid #ff2d55;
  border-radius:100px;
  padding:18px 36px;
  display:flex;
  flex-wrap:maef-wrap;
  align-items:center;
  justify-content:center;
  gap:36px;
  background:rgba(255,255,255,.02);
}

.maef-eng-stat{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:#e5e5e5;
  white-space:nowrap;
}
.maef-eng-stat svg{
  width:16px;
  height:16px;
  stroke:#ff2d55;
  margin:0;
  flex:none;
}

/* reveal-on-scroll state, toggled by JS via IntersectionObserver */
.maef-eng-card,
.maef-eng-orbit,
.maef-eng-stat{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.maef-eng-card.maef-is-visible,
.maef-eng-orbit.maef-is-visible,
.maef-eng-stat.maef-is-visible{
  opacity:1;
  transform:translateY(0);
}

.maef-conn-card,
.maef-proc-step,
.maef-js-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease, transform .65s ease;
}
.maef-conn-card.maef-is-visible,
.maef-proc-step.maef-is-visible,
.maef-js-reveal.maef-is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .maef-eng-wrap{padding:0 24px;}
  .maef-eng-grid{grid-template-columns:1fr;gap:40px;}
  .maef-eng-left{
    border-left:none;
    padding-left:0;
    border-top:2px solid #ff2d55;
    padding-top:20px;
  }
  .maef-eng-right{grid-template-columns:1fr;justify-items:center;}
  .maef-eng-orbit{order:-1;margin-bottom:20px;}
  .maef-eng-col{width:100%;max-width:420px;}
  .maef-eng-stats{
    border-radius:20px;
    gap:20px;
    padding:20px;
    justify-content:flex-start;
  }
}

@media(max-width:600px){
  .maef-eng-left h2{font-size:27px;}
  .maef-eng-stats{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
  }
  .maef-eng-stats::-webkit-scrollbar{display:none;}
}
/* ============ SECTION 4: PROCESS (self-contained, no shared class names) ============ */
.maef-proc-sec{
  background:linear-gradient(160deg,#f6efe6 0%,#f9d9e4 50%,#fce0c8 100%);
  color:#2b2b2b;
  padding:70px 0 60px;
  overflow:hidden;
}

.maef-proc-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 40px;
  display:block; /* explicitly NOT grid, avoids any inherited grid rule */
}

.maef-proc-eyebrow{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:#ff4f79;
  margin-bottom:14px;
}
.maef-proc-num{margin-right:6px;}

/* Heading row: h2 left, lead paragraph right */
.maef-proc-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  width:100%;
}
.maef-proc-head h2{
  font-size:32px;
  line-height:1.25;
  margin:0;
  color:#1a1a1a;
  font-weight:800;
}
.maef-proc-lead{
  font-size:17px;
  line-height:1.6;
  color: black;
  margin:0;
  max-width:420px;
}

/* Steps row — always full width, never confined by maef-proc-head grid */
.maef-proc-steps{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:start;
  width:100%;
  margin-top:60px;
}

.maef-proc-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 10px;
}

.maef-proc-circle{
  width:84px;
  height:84px;
  border-radius:50%;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.18);
  background:linear-gradient(135deg,#ff2f5b,#f6923a);
}
.maef-proc-circle svg{
  width:48px;
  height:48px;
  margin:0;
  display:block;
}

.maef-proc-step:nth-child(odd) .maef-proc-circle{background:#ffe0e5;}
.maef-proc-step:nth-child(odd) .maef-proc-circle svg{stroke:#ff4f79;}
.maef-proc-step:nth-child(even) .maef-proc-circle{background:#ffe6d6;}
.maef-proc-step:nth-child(even) .maef-proc-circle svg{stroke:#ff8a3d;}

.maef-proc-snum{
  position:absolute;
  top:-4px;
  right:-2px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#ff4f79;
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.maef-proc-step:nth-child(even) .maef-proc-snum{background:#ff8a3d;}

.maef-proc-label{
  font-size:15px;
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:10px;
  color:#1a1a1a;
}

.maef-proc-desc{
  font-size:13.5px;
  color: maroon;
  line-height:1.6;
  max-width:180px;
  margin:0 auto;
  margin-bottom: 30px;
}

.maef-proc-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  height:84px;
  color:#ff4f79;
  font-size:35px;
  font-weight:600;
}

.maef-svc-evolve-quote-card{
  max-width:780px;
  margin:34px auto 0;
  padding:26px 28px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,47,91,.25);
  border-radius:20px;
  background:#111114;
  box-shadow:0 24px 55px -30px rgba(70,10,28,.55);
}
.maef-svc-evolve-quote-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 12% 10%,rgba(255,47,91,.18),transparent 44%);
  pointer-events:none;
}
.maef-svc-evolve-quote-mark{
  width:34px;
  height:34px;
  margin-bottom:10px;
  color:#ff2f5b;
  opacity:.55;
}
.maef-svc-evolve-quote{
  position:relative;
  z-index:1;
  margin:0;
  color:#f8f4ef;
  font-size:clamp(18px,2vw,23px);
  font-weight:650;
  line-height:1.55;
}
.maef-svc-accent-word{
  background:linear-gradient(95deg,#ff2f5b,#ff7a3d);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}


/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .maef-proc-wrap{padding:0 24px;}
  .maef-proc-head{grid-template-columns:1fr;gap:20px;}
  .maef-proc-head h2{font-size:27px;}

  .maef-proc-steps{
    display:flex;
    flex-direction:column;
    gap:32px;
    margin-top:40px;
  }
  .maef-proc-arrow{display:none;}
  .maef-proc-desc{max-width:280px;}

  .maef-proc-closing{flex-direction:column;text-align:center;}
  .maef-proc-closing p{text-align:center;}
}

/* =========================================================
   COMPLETE MOBILE RESPONSIVE — FINAL
   Desktop styles above remain unchanged.
   ========================================================= */
@media (max-width:768px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  img,svg{max-width:100%;}
  .maef-wrap,.maef-eng-wrap,.maef-proc-wrap{
    width:100%;
    max-width:100%;
    padding-left:18px;
    padding-right:18px;
  }

  /* Section 1 — Hero */
  .maef-hero{padding:54px 0 48px;}
  .maef-hero .maef-wrap{
    display:flex;
    flex-direction:column;
    gap:34px;
    align-items:stretch;
  }
  .maef-hero h1{
    font-size:clamp(34px,10vw,44px);
    line-height:1.1;
    overflow-wrap:anywhere;
  }
  .maef-lead-dark p{
    max-width:100%;
    font-size:15px;
    line-height:1.7;
  }
  .maef-features-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 16px;
    margin-top:34px;
  }
  .maef-feature{min-width:0;}
  .maef-diagram{width:100%;padding-top:0;}
  .maef-hero-diagram-img{
    width:100%;
    height:auto;
    max-height:none;
    margin-top:0;
    border-radius:12px;
    object-fit:contain;
  }
  .maef-orb1{width:190px;height:190px;right:-50px;}
  .maef-orb2{width:160px;height:160px;left:-55px;}
  .maef-orb3{display:none;}

  /* Section 2 — What We Connect */
  .maef-connect-sec{padding:52px 0;}
  .maef-connect-sec .maef-wrap{padding-left:18px;padding-right:18px;}
  .maef-connect-outer{
    display:flex;
    flex-direction:column;
    gap:34px;
    margin-top:0;
  }
  .maef-connect-left{width:100%;padding-left:16px;}
  .maef-connect-sec h2{
    font-size:clamp(29px,8.5vw,38px);
    line-height:1.15;
  }
  .maef-connect-left .maef-lead-light p{
    max-width:100%;
    font-size:15px;
    line-height:1.7;
  }
  .maef-connect-grid{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:20px;
  }
  .maef-connect-lines{display:none;}
  .maef-side-col{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }
  .maef-conn-card{
    width:100%;
    min-height:0;
    padding:20px 18px;
    animation:none;
  }
  .maef-conn-card:hover{transform:none;}
  .maef-hub-wrap{
    order:-1;
    width:100%;
    min-height:270px;
    height:270px;
    overflow:hidden;
  }
  .maef-ring1{width:260px;height:260px;}
  .maef-ring2{width:205px;height:205px;}
  .maef-hub-core{width:190px;height:190px;}
  .maef-hub-core .maef-stack-img{
    width:100%;
    max-width:190px;
    height:auto;
    margin:0;
  }

  /* Section 3 — Automation Engine */
  .maef-eng-sec{padding:54px 0;}
  .maef-eng-grid{gap:34px;}
  .maef-eng-left h2{
    font-size:clamp(29px,8.5vw,38px);
    line-height:1.2;
  }
  .maef-eng-lead{max-width:100%;font-size:15px;}
  .maef-eng-right{width:100%;gap:22px;}
  .maef-eng-col{width:100%;max-width:none;gap:14px;}
  .maef-eng-card{width:100%;padding:15px;}
  .maef-eng-orbit{
    width:min(260px,78vw);
    height:min(260px,78vw);
    margin-bottom:8px;
  }
  .maef-eng-orbit-img{width:100%;height:100%;}
  .maef-eng-orbit-glow{width:70%;height:70%;}
  .maef-eng-stats{
    width:100%;
    margin-top:36px;
    padding:18px;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    overflow:visible;
    border-radius:18px;
  }
  .maef-eng-stat{white-space:normal;}

  /* Section 4 — Process */
  .maef-proc-sec{padding:52px 0 42px;}
  .maef-proc-head{gap:16px;}
  .maef-proc-head h2{
    font-size:clamp(28px,8vw,34px);
    line-height:1.2;
  }
  .maef-proc-lead{max-width:100%;font-size:15px;}
  .maef-proc-steps{gap:26px;margin-top:34px;}
  .maef-proc-step{width:100%;padding:0;}
  .maef-proc-circle{width:78px;height:78px;margin-bottom:14px;}
  .maef-proc-circle svg{width:42px;height:42px;}
  .maef-proc-desc{
    max-width:320px;
    margin-bottom:0;
    font-size:13.5px;
  }
}

@media (max-width:480px){
  .maef-wrap,.maef-eng-wrap,.maef-proc-wrap,
  .maef-connect-sec .maef-wrap{
    padding-left:14px;
    padding-right:14px;
  }
  .maef-hero{padding:44px 0 40px;}
  .maef-hero h1{font-size:32px;}
  .maef-eyebrow22{font-size:10.5px;letter-spacing:.12em;}
  .maef-features-row{gap:22px 12px;}
  .maef-feature .maef-icon-badge{width:44px;height:44px;}
  .maef-feature .maef-ftitle,.maef-feature .maef-fdesc{font-size:12px;}
  .maef-connect-sec,.maef-eng-sec{padding:44px 0;}
  .maef-conn-card .maef-top{gap:10px;}
  .maef-conn-card .maef-ic{width:42px;height:42px;}
  .maef-conn-card .maef-cdesc{font-size:13px;}
  .maef-hub-wrap{height:240px;min-height:240px;}
  .maef-ring1{width:230px;height:230px;}
  .maef-ring2{width:180px;height:180px;}
  .maef-hub-core{width:165px;height:165px;}
  .maef-hub-core .maef-stack-img{max-width:165px;}
  .maef-eng-card{gap:10px;padding:14px 12px;}
  .maef-eng-ctext p{font-size:11.5px;}
  .maef-proc-sec{padding:44px 0 38px;}
  .maef-svc-evolve-quote-card{margin-top:28px;padding:22px 18px;}
  .maef-svc-evolve-quote{font-size:17px;}
}

@media (prefers-reduced-motion:reduce){
  .maef-hero *,
  .maef-connect-sec *,
  .maef-eng-sec *,
  .maef-proc-sec *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  .maef-eng-card,
  .maef-eng-orbit,
  .maef-eng-stat,
  .maef-conn-card,
  .maef-proc-step,
  .maef-js-reveal{
    transition:none !important;
  }
}


/*===========================================================
               Data analytics Performance insights
===========================================================*/




/* =========================================================
   DATA ANALYTICS & PERFORMANCE INSIGHTS
   UNIQUE PREFIX : DAPI
========================================================= */

:root {
    --dapi-dark: #0c0812;
    --dapi-dark-2: #120d1a;

    --dapi-pink: #ff2d78;
    --dapi-orange: #ff7a3d;

    --dapi-gradient:
        linear-gradient(90deg, #ff2d78, #ff7a3d);

    --dapi-light: #f6f5f8;
    --dapi-white: #ffffff;

    --dapi-text: #161320;
    --dapi-muted: #6b6878;
    --dapi-light-muted: #b9b3c7;

    --dapi-border: #ececf1;
}


/* =========================================================
   RESET
========================================================= */

.dapi-hero,
.dapi-provide,
.dapi-process,
.dapi-results,
.dapi-breadcrumb {
    box-sizing: border-box;
}

.dapi-hero *,
.dapi-provide *,
.dapi-process *,
.dapi-results *,
.dapi-breadcrumb * {
    box-sizing: border-box;
}

.dapi-hero h1,
.dapi-hero p,
.dapi-provide h2,
.dapi-provide h3,
.dapi-provide p,
.dapi-process h2,
.dapi-process h4,
.dapi-process p,
.dapi-results h2,
.dapi-results h4,
.dapi-results p {
    margin: 0;
}

.dapi-hero img,
.dapi-provide img,
.dapi-process img,
.dapi-results img {
    max-width: 100%;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.dapi-container {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.dapi-breadcrumb {
    background: var(--dapi-dark);
    color: var(--dapi-light-muted);
    font-size: 13px;
    padding: 18px 0 10px;
}

.dapi-breadcrumb span {
    opacity: 0.8;
}


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

.dapi-hero {
    position: relative;
    overflow: hidden;
    padding: 38px 0 48px;
    color: #fff;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(112, 30, 82, 0.38),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255, 45, 120, 0.08),
            transparent 35%
        ),
        var(--dapi-dark);
}


.dapi-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 55px;
    align-items: center;
}


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

.dapi-hero-content {
    min-width: 0;
}

.dapi-eyebrow,
.dapi-section-eyebrow {
    margin-top: 70px;
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--dapi-pink);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
}

.dapi-eyebrow {
    margin-bottom: 18px;
}

.dapi-eyebrow::after,
.dapi-section-eyebrow::after {
    content: "";
    display: block;

    width: 42px;
    height: 1px;

    background: var(--dapi-pink);
    opacity: 0.65;
}


.dapi-hero h1 {
    max-width: 620px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.12;
    font-weight: 800;

    color: #fff;

    margin-bottom: 20px;
}


.dapi-hero h1 span,
.dapi-section-intro h2 span,
.dapi-process-intro h2 span,
.dapi-results-content h2 span {
    background: var(--dapi-gradient);

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

    color: transparent;
}


.dapi-hero-content > p {
    max-width: 540px;

    color: var(--dapi-light-muted);

    font-size: 17px;
    line-height: 1.75;

    margin-bottom: 28px;
}

.dapi-hero-content h1 span{
    background: linear-gradient(90deg, var(--dapi-pink), var(--dapi-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.dapi-hero-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}

.dapi-hero-content h1{
    text-shadow: none;
}
.dapi-hero-checks > div {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #fff;

    font-size: 13px;
    font-weight: 600;
}


.dapi-check-icon {
    width: 19px;
    height: 19px;

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

    border-radius: 50%;

    background: var(--dapi-gradient);

    font-size: 11px;
}


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

.dapi-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;

    padding: 25px 10px;
}



.dapi-dashboard-imgwrap{
    position: relative;
    z-index: 2;
}

.dapi-dashboard-img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.dapi-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 12px;
}


.dapi-stat-card {
    min-width: 0;

    padding: 10px;

    background: #1e1730;

    border-radius: 8px;
}


.dapi-stat-label {
    color: var(--dapi-light-muted);

    font-size: 9px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.dapi-stat-value {
    color: #fff;

    font-size: 15px;
    font-weight: 800;

    margin-top: 3px;
}


.dapi-stat-growth {
    color: #3ddc84;

    font-size: 9px;

    margin-top: 2px;
}


.dapi-chart-box {
    width: 100%;
    height: 95px;

    overflow: hidden;

    border-radius: 8px;

    background: #1e1730;
}


.dapi-chart-box svg {
    width: 100%;
    height: 100%;
}


/* =========================================================
   FLOATING HERO ICONS
========================================================= */

.dapi-floating-icon {
    position: absolute;
    z-index: 5;

    width: 52px;
    height: 52px;

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

    border-radius: 14px;

    color: #fff;

    font-size: 20px;

    background: var(--dapi-gradient);

    box-shadow:
        0 10px 30px rgba(255, 45, 120, 0.35);

    animation: dapiFloat 4s ease-in-out infinite;
}


.dapi-float-code {
    top: 5%;
    left: -2%;
}


.dapi-float-cloud {
    top: 0;
    right: -2%;

    background:
        linear-gradient(
            135deg,
            #3b2fb0,
            #5b4de6
        );

    animation-delay: -1s;
}


.dapi-float-database {
    right: -2%;
    bottom: 4%;

    background:
        linear-gradient(
            135deg,
            #c22a5c,
            #ff2d78
        );

    animation-delay: -2s;
}


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

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


/* =========================================================
   TECHNOLOGY FLOW
========================================================= */

.dapi-flow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: 30px;
}


.dapi-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 9px;
}


.dapi-flow-circle {
    width: 56px;
    height: 56px;

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

    border: 1.5px solid var(--flow-color, #35283f);
    border-radius: 50%;

    background: #160f20;

    color: var(--flow-color, #fff);

    font-size: 20px;

    box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
               0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
    transition:.25s;
}
.dapi-flow-node:hover .dapi-flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.dapi-flow-node:nth-child(1) .dapi-flow-circle{ --flow-color:#3ba7ff; }
.dapi-flow-node:nth-child(3) .dapi-flow-circle{ --flow-color:#ff2d78; }
.dapi-flow-node:nth-child(5) .dapi-flow-circle{ --flow-color:#2dd4c7; }
.dapi-flow-node:nth-child(7) .dapi-flow-circle{ --flow-color:#e8ebff; }

.dapi-flow-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:60px;flex-wrap:wrap;}
.dapi-flow-node{display:flex;flex-direction:column;align-items:center;gap:10px;}
.dapi-flow-circle{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;background:#160f20;
  border:1.5px solid var(--flow-color, #35283f);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
             0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
  color:var(--flow-color, var(--text-light));
  transition:.25s;
}
.dapi-flow-node:hover .dapi-flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.dapi-flow-node:nth-child(1) .dapi-flow-circle{ --flow-color:#3ba7ff; }
.dapi-flow-node:nth-child(3) .dapi-flow-circle{ --flow-color:#ff2d78; }
.dapi-flow-node:nth-child(5) .dapi-flow-circle{ --flow-color:#2dd4c7; }
.dapi-flow-node:nth-child(7) .dapi-flow-circle{ --flow-color:#e8ebff; }
.dapi-flow-node span{font-size:11px;letter-spacing:1px;color:var(--text-light-muted);font-weight:600;}
.dapi-flow-node:hover span{color:var(--flow-color);}
.dapi-flow-arrow{color:var(--orange);font-size:18px;}

@keyframes arrowMove{
  0%{transform:translateX(0); opacity:.35;}
  50%{transform:translateX(8px); opacity:1; text-shadow:0 0 10px var(--dapi-orange);}
  100%{transform:translateX(0); opacity:.35;}
}

.dapi-flow-arrow {
    color: var(--dapi-orange);
    font-size: 18px;
    display: inline-block;
    animation: arrowMove 1.4s ease-in-out infinite;
}
.dapi-flow .dapi-flow-arrow:nth-of-type(1){animation-delay:0s;}
.dapi-flow .dapi-flow-arrow:nth-of-type(2){animation-delay:.3s;}
.dapi-flow .dapi-flow-arrow:nth-of-type(3){animation-delay:.6s;}

.dapi-flow-node span {
    color: var(--dapi-light-muted);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;

    text-align: center;
}


.dapi-flow-arrow {
    color: var(--dapi-orange);

    font-size: 18px;
}


/* =========================================================
   PROVIDE SECTION
========================================================= */

.dapi-provide {
    padding: 80px 0;

    background: #fdf2f6;
}


.dapi-provide-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;
}


.dapi-section-eyebrow {
    margin-bottom: 14px;
}


.dapi-section-intro h2,
.dapi-process-intro h2,
.dapi-results-content h2 {
    font-size: clamp(27px, 3vw, 34px);
    color: #000;
    line-height: 1.25;
    font-weight: 800;
}


.dapi-section-intro > p,
.dapi-process-intro > p,
.dapi-results-content > p {
    color: maroon;

    font-size: 14px;
    line-height: 1.75;

    margin-top: 16px;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.dapi-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.dapi-service-card {
    padding: 24px 20px;

    background: #fff;

    border: 1px solid lightpink;
    border-radius: 13px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
  --card-bg: #ffffff;
  --card-color: var(--dapi-pink);
  background: var(--card-bg);
  transition: background .3s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.dapi-service-card:nth-child(1){ --card-bg:#fff1f5; --card-color:#ff2d78; }
.dapi-service-card:nth-child(2){ --card-bg:#eef7ff; --card-color:#3ba7ff; }
.dapi-service-card:nth-child(3){ --card-bg:#fff9ec; --card-color:#ffb020; }
.dapi-service-card:nth-child(4){ --card-bg:#ecfdfb; --card-color:#2dd4c7; }
.dapi-service-card:nth-child(5){ --card-bg:#f5f1ff; --card-color:#8b5cf6; }
.dapi-service-card:nth-child(6){ --card-bg:#fff2ec; --card-color:#ff7a3d; }
.dapi-service-card:nth-child(7){ --card-bg:#eefdf3; --card-color:#22c55e; }
.dapi-service-card:nth-child(8){ --card-bg:#fdeef7; --card-color:#ec4899; }

.dapi-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 60%, var(--dapi-orange)));

    color: #fff;

    font-size: 18px;

    box-shadow: 0 6px 16px color-mix(in srgb, var(--card-color) 45%, transparent);

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

.dapi-service-card:hover .dapi-service-icon {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 65%, transparent);
}
.dapi-service-card:hover .dapi-service-icon{
  background: var(--card-color);
  color: #fff;
}


.dapi-service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 45, 120, 0.2);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.07);
}

/* gradient border on hover */
.dapi-service-card{
  position: relative;
  overflow: hidden;
}
.dapi-service-card::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--dapi-pink), var(--dapi-orange));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.dapi-service-card:hover::before{
  opacity: 1;
}

/* icon pop on hover */
.dapi-service-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.dapi-service-card:hover .dapi-service-icon{
  transform: scale(1.12) rotate(-6deg);
  background: linear-gradient(135deg, var(--dapi-pink), var(--dapi-orange));
  color: #fff;
}

/* scroll reveal setup — cards start hidden */
.dapi-service-card{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.dapi-service-card.dapi-reveal{
  opacity: 1;
  transform: translateY(0);
}

.dapi-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: #fdeef2;

    color: var(--dapi-pink);

    font-size: 18px;
}


.dapi-service-card h3 {
    color: var(--dapi-text);

    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;

    margin-bottom: 8px;
}


.dapi-service-card p {
    color: #000;

    font-size: 12.5px;
    line-height: 1.65;
}


/* =========================================================
   PROCESS
========================================================= */

.dapi-process {
    padding: 50px 0;

    background: var(--dapi-dark);

    color: #fff;
}


.dapi-process-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;

    align-items: center;
}


.dapi-process-intro .dapi-section-eyebrow {
    color: var(--dapi-pink);
}


.dapi-process-intro h2 {
    color: #fff;
}


.dapi-process-intro > p {
    color: var(--dapi-light-muted);
}
/* =========================================================
   PROCESS STEPS
========================================================= */
.dapi-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@keyframes stepPopIn{
  0%{
    opacity:0;
    transform: scale(.4) translateY(30px);
  }
  60%{
    opacity:1;
    transform: scale(1.08) translateY(-6px);
  }
  80%{
    transform: scale(.96) translateY(2px);
  }
  100%{
    opacity:1;
    transform: scale(1) translateY(0);
  }
}
@keyframes lineDraw{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

.dapi-step {
    position: relative;
    z-index: 2;
    text-align: center;

    opacity:0;
    transform:translateY(22px) scale(.96);
    animation:none;
    transition:opacity .65s ease, transform .65s cubic-bezier(.34,1.56,.64,1);
}

.dapi-step.dapi-reveal{
    opacity:1;
    transform:translateY(0) scale(1);
}

.dapi-step-line {
    position: absolute;
    top: 38px;
    left: 8%;
    right: 8%;
    height: 2px;
    z-index: 1;
    border-radius: 2px;

    background: linear-gradient(
        90deg,
        var(--dapi-pink),
        var(--dapi-orange)
    );
    opacity:0;
    transform:scaleX(0);
    transform-origin:left center;
    transition:opacity .7s ease, transform 1s ease;
    overflow: visible;
}

.dapi-step-line.dapi-reveal{
    opacity:.35;
    transform:scaleX(1);
}

@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}
@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}

.dapi-step-line::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);

  width: 22px;
  height: 6px;
  border-radius: 50%;

  background: #fff;
  box-shadow:
    0 0 10px 3px var(--dapi-pink),
    0 0 20px 6px var(--dapi-orange);

  animation: runLight 6.2s linear infinite;
}

.dapi-step:nth-child(2){ --step-color:#ff2d78; animation-delay: .5s; }
.dapi-step:nth-child(3){ --step-color:#3ba7ff; animation-delay: .8s; }
.dapi-step:nth-child(4){ --step-color:#2dd4c7; animation-delay: 1.1s; }
.dapi-step:nth-child(5){ --step-color:#ffb020; animation-delay: 1.4s; }

.dapi-step-circle {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 1.5px solid var(--step-color, var(--dapi-pink));
    border-radius: 50%;
    background: #160f20;
    font-size: 28px;
    color: var(--step-color, #fff);

    box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color, var(--dapi-pink)) 12%, transparent),
                0 0 20px color-mix(in srgb, var(--step-color, var(--dapi-pink)) 45%, transparent);

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

.dapi-step:hover .dapi-step-circle{
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--step-color, var(--dapi-pink)) 20%, transparent),
              0 0 30px color-mix(in srgb, var(--step-color, var(--dapi-pink)) 75%, transparent);
}

.dapi-step-number {
    color: var(--dapi-orange);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
}
.dapi-step:hover .dapi-step-number{
  color: var(--step-color);
}

.dapi-step h4 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 8px;
}
.dapi-step p {
    color: var(--dapi-light-muted);
    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   WHAT YOU GET
========================================================= */

.dapi-results {
    padding: 80px 0;
    background: linear-gradient(
        160deg,
        #ffffff 0%,
        #ffe9f0 35%,
        #ffe3d9 70%,
        #fff5ec 100%
    );
}

@keyframes blobFloat1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-20px) scale(1.1); }
}
@keyframes blobFloat2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-25px,25px) scale(1.15); }
}

.dapi-results {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #fffaf8;
}

.dapi-results::before,
.dapi-results::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.dapi-results::before{
    width: 420px;
    height: 420px;
    top: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(255,45,120,0.35), transparent 70%);
    animation: blobFloat1 9s ease-in-out infinite;
}

.dapi-results::after{
    width: 460px;
    height: 460px;
    bottom: -15%;
    right: -10%;
    background: radial-gradient(circle, rgba(255,122,61,0.35), transparent 70%);
    animation: blobFloat2 11s ease-in-out infinite;
}

.dapi-results-grid{
    position: relative;
    z-index: 1;
}

.dapi-results-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.1fr);

    gap: 60px;

    align-items: center;

    position: relative;   /* NEW */
    z-index: 1; 
}


/* =========================================================
   LAPTOP
========================================================= */

.dapi-laptop-area {
    position: relative;

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

    padding: 30px 20px;
}


.dapi-laptop {
    width: min(100%, 430px);

    position: relative;

    padding: 16px;

    background: #171022;

    border-radius: 14px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.2);
}


.dapi-laptop-screen {
    min-height: 220px;

    padding: 14px;

    border-radius: 8px;

    background: #1e1730;
}


.dapi-laptop-line {
    height: 8px;

    margin-bottom: 8px;

    border-radius: 4px;

    background: #33284a;
}


.dapi-line-40 {
    width: 40%;
}

.dapi-line-60 {
    width: 60%;
}

.dapi-line-80 {
    width: 80%;
}


.dapi-laptop-base {
    height: 14px;

    margin-top: 10px;

    border-radius: 0 0 10px 10px;

    background: #0f0a17;
}

@keyframes laptopFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

.dapi-laptop-img {
    width: min(100%, 460px);
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.25));

    animation: laptopFloat 5s ease-in-out infinite;
}

@keyframes badgeFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes badgePopIn{
  0%{ opacity:0; transform: scale(.3) translateY(20px); }
  60%{ opacity:1; transform: scale(1.15) translateY(-4px); }
  100%{ opacity:1; transform: scale(1) translateY(0); }
}

.dapi-mini-badge{
  opacity: 0;
  animation:
    badgePopIn .6s cubic-bezier(.34,1.56,.64,1) forwards,
    badgeFloat 3.5s ease-in-out infinite;
}

.dapi-mini-code{
  animation-delay: .2s, 1s;   /* pop-in delay, then float delay */
}
.dapi-mini-security{
  animation-delay: .4s, 1.3s;
}
.dapi-mini-growth{
  animation-delay: .6s, 1.6s;
}
.dapi-mini-success{
  animation-delay: .8s, 1.9s;
}

@keyframes benefitSlideIn{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}

.dapi-benefit{
  opacity: 0;
  animation: benefitSlideIn .6s ease forwards;
}

.dapi-benefit:nth-child(1){ animation-delay: .3s; }
.dapi-benefit:nth-child(2){ animation-delay: .5s; }
.dapi-benefit:nth-child(3){ animation-delay: .7s; }
.dapi-benefit:nth-child(4){ animation-delay: .9s; }

.dapi-benefit-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}

.dapi-benefit:hover .dapi-benefit-icon{
  transform: scale(1.15) rotate(-6deg);
  background: linear-gradient(135deg, var(--dapi-pink), var(--dapi-orange));
  color: #fff;
}

/* =========================================================
   LAPTOP FLOATING BADGES
========================================================= */

.dapi-mini-badge {
    position: absolute;
    z-index: 4;

    width: 54px;
    height: 54px;

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

    border-radius: 10px;

    color: #fff;

    font-size: 16px;

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


.dapi-mini-code {
    top: -6%;
    left: 8%;

    background: var(--dapi-gradient);
}


.dapi-mini-security {
    top: -20%;
    right: 10%;

    background: #2b2340;
}


.dapi-mini-growth {
    right: 8%;
    bottom: -14%;

    background: #2b2340;
}


.dapi-mini-success {
    left: 40%;
    bottom: -13%;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: var(--dapi-gradient);
}


/* =========================================================
   BENEFITS
========================================================= */

.dapi-benefit-grid {
    display: grid;

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

    gap: 26px 24px;

    margin-top: 28px;
}


.dapi-benefit {
    display: flex;

    gap: 14px;

    min-width: 0;
}


.dapi-benefit-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 9px;

    background: #fdeef2;

    color: var(--dapi-pink);

    font-size: 17px;
}


.dapi-benefit h4 {
    color: var(--dapi-text);

    font-size: 20px;

    margin-bottom: 5px;
}


.dapi-benefit p {
    color: var(--dapi-muted);

    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .dapi-container {
        width: min(1180px, calc(100% - 48px));
    }


    .dapi-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .dapi-provide-grid,
    .dapi-process-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .dapi-section-intro,
    .dapi-process-intro {
        max-width: 650px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .dapi-hero {
        padding-top: 40px;
    }


    .dapi-hero-grid,
    .dapi-results-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }
    
    .dapi-results-content {
        order: 1;
    }

    .dapi-laptop-area {
        order: 2;
    }

    .dapi-hero-content {
        text-align: center;
    }


    .dapi-eyebrow {
        justify-content: center;
    }


    .dapi-hero h1 {
        margin-left: auto;
        margin-right: auto;
    }


    .dapi-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }


    .dapi-hero-checks {
        justify-content: center;
    }


    .dapi-hero-visual {
        max-width: 680px;

        margin: 0 auto;
    }


    .dapi-results-content {
        max-width: 700px;
        margin: 0 auto;
    }


    .dapi-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 40px;
    }


    .dapi-step-line {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */
/* HERO TEXT MOBILE FIX ONLY
@media screen and (max-width:600px){
  .dapi-hero-content{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:0 4px;
    text-align:left !important;
  }

  .dapi-eyebrow{
    width:100%;
    max-width:100%;
    margin-top:54px;
    margin-bottom:18px;
    justify-content:flex-start !important;
    gap:8px;
    font-size:10px;
    line-height:1.4;
    letter-spacing:.7px;
    white-space:normal;
  }

  .dapi-eyebrow::after{
    width:34px;
    flex:0 0 34px;
  }

  .dapi-hero h1{
    width:100%;
    max-width:360px;
    margin:0 0 18px;
    padding:0;
    font-size:clamp(28px,7.6vw,32px);
    line-height:1.12;
    letter-spacing:-.4px;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .dapi-hero h1 span{
    display:inline;
  }

  .dapi-hero-content > p{
    width:100%;
    max-width:350px;
    margin:0 0 26px;
    padding:0 2px;
    font-size:14px;
    line-height:1.5;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .dapi-hero-checks{
    width:100%;
    max-width:100%;
    margin:0;
    align-items:flex-start;
    gap:11px;
    text-align:left;
  }

  .dapi-hero-checks > div{
    width:auto;
    justify-content:flex-start;
    font-size:13px;
    line-height:1.35;
  }
}

@media screen and (max-width:380px){
  .dapi-eyebrow{margin-top:48px;font-size:9px;}
  .dapi-eyebrow::after{width:26px;flex-basis:26px;}

  .dapi-hero h1{
    max-width:320px;
    font-size:26px;
  }

  .dapi-hero-content > p{
    max-width:320px;
    font-size:13.5px;
  }
}


@media screen and (max-width:380px){
  .dapi-eyebrow{margin-top:48px;font-size:9px;}
  .dapi-eyebrow::after{width:26px;flex-basis:26px;}

  .dapi-hero h1{
    max-width:320px;
    font-size:26px;
  }

  .dapi-hero-content > p{
    max-width:320px;
    font-size:13.5px;
  }
}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .dapi-container {
        width: calc(100% - 24px);
    }


    .dapi-hero h1 {
        font-size: 28px;
    }


    .dapi-dashboard-sidebar {
        width: 65px;
        flex-basis: 65px;
    }


    .dapi-dashboard-main {
        padding: 8px;
    }


    .dapi-stat-value {
        font-size: 10px;
    }


    .dapi-flow {
        gap: 4px;
    }


    .dapi-flow-circle {
        width: 38px;
        height: 38px;
    }


    .dapi-flow-arrow {
        font-size: 11px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .dapi-floating-icon,
    .dapi-service-card,
    .dapi-step,
    .dapi-step-line {
        animation: none;
        transition: none;
    }

    .dapi-service-card,
    .dapi-step,
    .dapi-step-line{
        opacity:1;
        transform:none;
    }

}






















/*  ==================================================================
                     Product Innovation
  ==================================================================*/


  :root{
    --pnx-dark:#0b0710;
    --pnx-dark2:#120a18;
    --pnx-pink:#ff2d78;
    --pnx-orange:#ff7a3d;
    --pnx-gradient: linear-gradient(90deg,var(--pnx-pink),var(--pnx-orange));
    --pnx-light:#f7f5f8;
    --pnx-white:#ffffff;
    --pnx-text:#17121f;
    --pnx-muted:#645f70;
    --pnx-text-light:#ffffff;
    --pnx-text-light-muted:#bdb6c9;
    --pnx-border:#eceaf0;
    --pnx-radius:16px;
    --pnx-max:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Poppins',Arial,Helvetica,sans-serif;
    background:var(--pnx-light);
    color:var(--pnx-text);
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  .pnx-container{max-width:var(--pnx-max);margin:0 auto;padding:0 40px;}
  h1,h2,h3,h4{font-weight:800;letter-spacing:-0.01em;}
  .pnx-accent{background:var(--pnx-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}

  .pnx-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--pnx-pink);font-size:12px;font-weight:700;letter-spacing:1.2px;
    border:1px solid rgba(255,45,120,.4);
    padding:6px 14px;border-radius:100px;
    margin-bottom:20px;
    margin-top: 30px;
  }
  .pnx-eyebrow.pnx-plain{border:none;padding:0;}
  .pnx-eyebrow.pnx-plain::after{content:"";flex:1;max-width:50px;height:1px;background:var(--pnx-pink);opacity:.6;}

  /* ================= HERO ================= */
  .pnx-hero{
    background:radial-gradient(ellipse at 80% 20%, #2a0f22 0%, var(--pnx-dark) 55%);
    padding:70px 0 60px;
    overflow:hidden;
  }
  .pnx-hero-grid{
    display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center;
  }
  .pnx-hero-content h1{
    font-size:49px;line-height:1.14;color:var(--pnx-text-light);margin-bottom:20px;
  }

  .pnx-hero-content h1 span{
    background: linear-gradient(90deg, var(--pnx-pink), var(--pnx-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}
  .pnx-hero-content p{
    color:var(--pnx-text-light-muted);font-size:15.5px;line-height:1.75;max-width:480px;margin-bottom:30px;
  }
  .pnx-hero-ctas{display:flex;gap:14px;margin-bottom:44px;flex-wrap:wrap;}
  .pnx-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 26px;border-radius:100px;
    font-weight:600;font-size:14.5px;
    transition:.25s;
    border:1.5px solid transparent;
  }
  .pnx-btn-primary{
    background:var(--pnx-gradient);color:#fff;
    box-shadow:0 10px 30px rgba(255,45,120,.35);
  }
  .pnx-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,45,120,.5);}
  .pnx-btn-outline{
    background:transparent;color:#fff;border-color:rgba(255,255,255,.25);
  }
  .pnx-btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.06);}

  .pnx-stats{display:flex;gap:40px;flex-wrap:wrap;}
  .pnx-stat{display:flex;align-items:center;gap:12px;}
  .pnx-stat-icon{
    width:42px;height:42px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,45,120,.12);color:var(--pnx-pink);font-size:18px;
  }
  .pnx-stat strong{display:block;font-size:20px;color:#fff;font-weight:800;line-height:1.1;}
  .pnx-stat span{font-size:12.5px;color:#fff;font-weight:500;}
  .pnx-hero-img{
    width: 130%;
    max-width: 680px;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.4));
  }

  /* hero visual - 3D cube */
  .pnx-hero-visual{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;}
  .pnx-hero-orbit-icon{
    position:absolute;width:52px;height:52px;border-radius:14px;
    background:#1c1226;border:1px solid rgba(255,45,120,.35);
    display:flex;align-items:center;justify-content:center;
    color:var(--pnx-pink);font-size:20px;
    box-shadow:0 12px 30px rgba(0,0,0,.4);
    animation:aiFloat 4.5s ease-in-out infinite;
  }
  .pnx-hero-orbit-icon.pnx-o1{top:8%; left:2%; animation-delay:0s;}
  .pnx-hero-orbit-icon.pnx-o2{top:2%; right:8%; animation-delay:.8s;}
  .pnx-hero-orbit-icon.pnx-o3{bottom:14%; left:-2%; animation-delay:1.6s;}
  .pnx-hero-orbit-icon.pnx-o4{bottom:6%; right:0%; animation-delay:2.4s;}
  @keyframes aiFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
  }

  /* ================= SERVICES ================= */
.pnx-services{
  background: linear-gradient(180deg, #ffffff 0%, #fdf7f9 100%);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.pnx-services::before{
  content:"";
  position:absolute; top:-15%; left:-10%;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.pnx-services::after{
  content:"";
  position:absolute; bottom:-15%; right:-8%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,122,61,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.pnx-services .pnx-container{position:relative; z-index:1;}

.pnx-services-head{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:50px;
}
.pnx-services-head h2{font-size:40px;line-height:1.25;}
.pnx-services-head .pnx-lead{color:var(--pnx-muted);font-size:16.5px;line-height:1.8;padding-bottom:4px;}

/* --- marquee track --- */
.pnx-marquee{
  overflow: hidden;
  position: relative;
  padding: 30px 0 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.pnx-service-grid{
  display:flex;
  gap:22px;
  width:max-content;
  perspective: 1200px;
}

.pnx-service-card{
  --card-color: var(--pnx-pink);
  background:#fff;
  border:1px solid var(--pnx-border);
  border-radius:20px;
  padding:30px 24px;
  position:relative;
  overflow:hidden;
  width: 240px;
  flex: 0 0 260px;
  transform-style: preserve-3d;
  transition: box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
.pnx-service-card:nth-child(5n+1){ --card-color:#ff2d78; }
.pnx-service-card:nth-child(5n+2){ --card-color:#8b5cf6; }
.pnx-service-card:nth-child(5n+3){ --card-color:#3ba7ff; }
.pnx-service-card:nth-child(5n+4){ --card-color:#2dd4c7; }
.pnx-service-card:nth-child(5n+5){ --card-color:#ffb020; }

.pnx-service-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--card-color), transparent);
}

.pnx-service-card:hover{
  box-shadow: 0 30px 50px color-mix(in srgb, var(--card-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--card-color) 35%, transparent);
}

.pnx-marquee-dots{
  display:flex;justify-content:center;gap:8px;margin-top:26px;
}
.pnx-marquee-dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--pnx-border);
  transition: all .3s ease;
}
.pnx-marquee-dot.pnx-dot-active{
  width:26px;border-radius:5px;
  background: var(--pnx-gradient);
}

.pnx-service-num{
  font-size:26px;
  font-weight:800;
  color: color-mix(in srgb, var(--card-color) 20%, white);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--card-color) 55%, transparent);
  margin-bottom:4px;
  line-height:1;
  transform: translateZ(25px);
  transition: text-shadow .3s ease, color .3s ease;
}
.pnx-service-card.pnx-card-focused .pnx-service-num{
  color: var(--card-color);
  text-shadow: 0 0 18px color-mix(in srgb, var(--card-color) 60%, transparent);
}

.pnx-service-icon{
  width:48px;height:48px;border-radius:15px;
  background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 55%, var(--pnx-orange)));
  display:flex;align-items:center;justify-content:center;
  color: whitesmoke;font-size:22px;margin-bottom:16px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 45%, transparent);
  transition: transform .3s ease;
  transform: translateZ(35px);
}
.pnx-service-card:hover .pnx-service-icon{
  transform: translateZ(35px) scale(1.12) rotate(-8deg);
}

.pnx-service-card h3{
  font-size:16px;line-height:1.28;margin-bottom:6px;color:var(--pnx-text);
  min-height:0;
  transform: translateZ(20px);
}

.pnx-service-card ul{margin-bottom:8px; transform: translateZ(15px);}
.pnx-service-card li{
 font-size:13.5px;color: black;line-height:1.55;padding-left:16px;position:relative;
}
.pnx-service-card li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
  background: var(--card-color);
}

.pnx-service-link{
  font-size:12.5px;font-weight:700;color:var(--card-color);display:inline-flex;align-items:center;gap:6px;
  transform: translateZ(20px);
}
.pnx-service-link svg{width:13px;height:13px;transition:.2s;}
.pnx-service-card:hover .pnx-service-link svg{transform:translateX(4px);}

@media (prefers-reduced-motion: reduce){
  .pnx-service-grid{ animation:none !important; }
}

  /* ================= TECH STACK ================= */
 .pnx-tech{
  background: var(--pnx-dark);
  padding: 70px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.pnx-terminal{
  background:#0f0a17; border:1px solid rgba(255,45,120,.25); border-radius:12px;
  padding:16px 20px; max-width:520px; margin-bottom:40px; font-family:'Poppins';
}
.pnx-terminal-bar{display:flex; gap:6px; margin-bottom:12px;}
.pnx-terminal-bar span{width:9px;height:9px;border-radius:50%;background:#444;}
.pnx-terminal-body{font-size:13px; color:#3ddc84;}
.pnx-terminal-prompt{color:var(--pnx-pink); margin-right:8px;}
.pnx-cursor{animation: aiBlink 1s step-end infinite;}
@keyframes aiBlink{50%{opacity:0;}}

.pnx-tech-grid{
  perspective: 1000px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
}
.pnx-tech-col{
  transform: translateZ(0) rotateX(2deg);
  transition: transform .3s ease;
}
.pnx-tech-col:hover{
  transform: translateZ(20px) rotateX(0deg) translateY(-4px);
}

.pnx-tech-icon{ transition: transform .4s cubic-bezier(.34,1.56,.64,1); }

.pnx-tech-ticker-wrap{overflow:hidden; margin-top:40px; border-top:1px solid rgba(255,255,255,.08); padding-top:20px; width: 100%}
.pnx-tech-ticker{display:flex; gap:14px; width:max-content; animation: aiTicker 20s linear infinite; font-size:16px; color:var(--pnx-text-light-muted); white-space: nowrap;}
.pnx-tech-ticker span{
  margin-right: 6px;
}
.pnx-tech-ticker span:nth-child(odd){color:var(--pnx-pink); font-weight:600;}

@keyframes aiTicker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.pnx-tech::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, rgba(255,45,120,.18) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:.4;
  z-index:0;
  animation: aiDotsDrift 18s linear infinite;
}
.pnx-tech .pnx-container{ position:relative; z-index:1; }

@keyframes aiDotsDrift{
  from{ background-position: 0 0; }
  to{ background-position: 68px 68px; }
}

.pnx-tech::after{
  content:"";
  position:absolute; top:-10%; right:-8%;
  width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,122,61,.14), transparent 70%);
  filter: blur(20px);
  z-index:0;
}

@keyframes aiTechIn{
  from{ opacity:0; transform: translateY(26px); }
  to{ opacity:1; transform: translateY(0); }
}

.pnx-tech-col{
  opacity:0;
  animation: aiTechIn .6s ease forwards;
}
.pnx-tech-col:nth-child(1){ animation-delay:.05s; }
.pnx-tech-col:nth-child(2){ animation-delay:.15s; }
.pnx-tech-col:nth-child(3){ animation-delay:.25s; }
.pnx-tech-col:nth-child(4){ animation-delay:.35s; }
.pnx-tech-col:nth-child(5){ animation-delay:.45s; }
.pnx-tech-col:nth-child(6){ animation-delay:.55s; }

.pnx-tech-top{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:50px;
  align-items:center;
  margin-bottom:30px;
  color: #fff;
}
.pnx-tech-top h2{font-size:35px;line-height:1.28; color: #fff;}
.pnx-tech-top p{color: whitesmoke;font-size:14.5px;line-height:1.8;}

.pnx-terminal{
  background:#0f0a17; border:1px solid rgba(255,45,120,.25); border-radius:12px;
  padding:16px 20px; width:100%; margin-bottom:44px; font-family: 'Poppins';
}
.pnx-terminal-body{font-size:13px; color:#3ddc84; min-height:18px;}

  .pnx-tech-grid{
    display:grid;grid-template-columns:repeat(6,1fr);gap:44px;
  }
  .pnx-tech-col-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
  .pnx-tech-icon{
    width:36px;height:36px;border-radius:9px;
    background:rgba(255,45,120,.12);border:1px solid rgba(255,45,120,.3);
    display:flex;align-items:center;justify-content:center;color:var(--pnx-pink);font-size:17px;
    flex-shrink:0;
  }
  .pnx-tech-col-head h4{font-size:14px;font-weight:700;color:#fff;line-height:1.35;}
 .pnx-tech-col li{font-size:14px;color: whitesmoke;line-height:2;}


  /* ================= INDUSTRIES ================= */
.pnx-industries{
  background: linear-gradient(180deg, #ffffff 0%, #fdf2f6 100%);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}
.pnx-industries::before{
  content:"";
  position:absolute; top:-15%; left:-8%;
  width:400px; height:400px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.14), transparent 70%);
  filter: blur(20px); z-index:0;
  animation: aiBlobFloat1 10s ease-in-out infinite;
}
.pnx-industries::after{
  content:"";
  position:absolute; bottom:-15%; right:-8%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(139,92,246,.13), transparent 70%);
  filter: blur(20px); z-index:0;
  animation: aiBlobFloat2 12s ease-in-out infinite;
}
@keyframes aiBlobFloat1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-20px) scale(1.1); }
}
@keyframes aiBlobFloat2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-25px,25px) scale(1.15); }
}
.pnx-industries .pnx-container{ position:relative; z-index:1; }

.pnx-industries-top{
  text-align:center;
  display:block;
  margin-bottom:50px;
}
.pnx-industries-top h2{
  font-size:32px;
  line-height:1.3;
  max-width:600px;
  margin:0 auto;
  color:#000;
}
.pnx-industries-top .pnx-rule{
  margin:18px auto 0;
}

.pnx-ind-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:16px;
}

.pnx-ind-card{
  perspective: 1000px;
  height:210px;
  position: relative;
  border-radius: 14px;
  cursor:pointer;
  opacity:0;
  animation: aiIndPop .5s ease forwards;
  transition: transform .3s ease;
}
.pnx-ind-card:hover{
  transform: translateY(-6px);
}

@keyframes aiIndPop{
  0%{ opacity:0; transform: translateY(22px) scale(.9); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
.pnx-ind-card:nth-child(1){animation-delay:.03s;} .pnx-ind-card:nth-child(2){animation-delay:.06s;}
.pnx-ind-card:nth-child(3){animation-delay:.09s;} .pnx-ind-card:nth-child(4){animation-delay:.12s;}
.pnx-ind-card:nth-child(5){animation-delay:.15s;} .pnx-ind-card:nth-child(6){animation-delay:.18s;}
.pnx-ind-card:nth-child(7){animation-delay:.21s;} .pnx-ind-card:nth-child(8){animation-delay:.24s;}
.pnx-ind-card:nth-child(9){animation-delay:.27s;} .pnx-ind-card:nth-child(10){animation-delay:.30s;}
.pnx-ind-card:nth-child(11){animation-delay:.33s;} .pnx-ind-card:nth-child(12){animation-delay:.36s;}
.pnx-ind-card:nth-child(13){animation-delay:.39s;} .pnx-ind-card:nth-child(14){animation-delay:.42s;}

.pnx-ind-card::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:14px;
  background: conic-gradient(from 0deg, var(--card-color), var(--card-color-2), var(--card-color));
  animation: aiBorderSpin 4s linear infinite;
  z-index:0;
}
@keyframes aiBorderSpin{
  from{ filter: hue-rotate(0deg); }
  to{ filter: hue-rotate(360deg); }
}

.pnx-ind-card:nth-child(7n+1){ --card-color:#ff2d78; --card-color-2:#ff7a3d; }
.pnx-ind-card:nth-child(7n+2){ --card-color:#8b5cf6; --card-color-2:#3ba7ff; }
.pnx-ind-card:nth-child(7n+3){ --card-color:#3ba7ff; --card-color-2:#2dd4c7; }
.pnx-ind-card:nth-child(7n+4){ --card-color:#2dd4c7; --card-color-2:#22c55e; }
.pnx-ind-card:nth-child(7n+5){ --card-color:#ffb020; --card-color-2:#ff7a3d; }
.pnx-ind-card:nth-child(7n+6){ --card-color:#ec4899; --card-color-2:#ff2d78; }
.pnx-ind-card:nth-child(7n+7){ --card-color:#22c55e; --card-color-2:#2dd4c7; }

.pnx-ind-inner{
  position:relative; z-index:1;
  width:100%; height:100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4,.2,.2,1);
}
.pnx-ind-card:hover .pnx-ind-inner,
.pnx-ind-card.pnx-flipped .pnx-ind-inner{
  transform: rotateY(180deg);
}

.pnx-ind-front, .pnx-ind-back{
  position:absolute; inset:0;
  backface-visibility: hidden;
  border-radius:16px;
  padding:16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border: 2px solid transparent;
  background-image: linear-gradient(#fff,#fff), linear-gradient(135deg, var(--card-color,#ff2d78), var(--card-color-2,#ff7a3d));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.pnx-ind-back{
  transform: rotateY(180deg);
}

.pnx-ind-icon{
  width:48px;height:48px;margin:0 auto 12px;border-radius:14px;
  background: linear-gradient(135deg, var(--card-color), var(--card-color-2));
  color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 45%, transparent);
  animation: aiIconFloat 3s ease-in-out infinite;
}
@keyframes aiIconFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-5px) rotate(-4deg); }
}
.pnx-ind-card:hover .pnx-ind-icon{
  animation: aiIconFloat 3s ease-in-out infinite, aiIconPop .5s ease;
}
@keyframes aiIconPop{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.2); }
}

.pnx-ind-front span{
  font-size:15px;font-weight:600;color:var(--pnx-text);line-height:1.4;
}
.pnx-ind-back p{
  font-size:13px; color: #000; line-height:1.6; margin-bottom:10px;
}
.pnx-ind-back .pnx-ind-badge{
  font-size:9.5px; font-weight:700; color:var(--card-color);
  border:1px solid var(--card-color); border-radius:100px; padding:3px 10px;
}

@media(max-width:1024px){
  .pnx-ind-grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:640px){
  .pnx-ind-grid{grid-template-columns:repeat(2,1fr);}
}

/* ================= WHY CHOOSE ================= */
.pnx-why{
  background: var(--pnx-dark2);
  padding: 90px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.pnx-why::before{
  content:"";
  position:absolute; top:-10%; right:-8%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.pnx-why .pnx-container{ position:relative; z-index:1; }

.pnx-why-top h2{font-size:34px;line-height:1.28;margin-bottom:14px;color: #fff}
.pnx-why-top .pnx-rule{width:44px;height:3px;background:var(--pnx-gradient);border-radius:2px;margin-bottom:44px;}

.pnx-why-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:22px;
}

@media(max-width:900px){
  .pnx-why-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media(max-width:640px){
  .pnx-why-grid{grid-template-columns:1fr !important;}
}
.pnx-why-item{
  background: rgba(255,255,255,.03);
  border: 1px solid color-mix(in srgb, var(--wc) 35%, transparent);
  border-radius: 18px;
  padding: 28px 24px;
  text-align:left;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
  opacity:0;
  animation: aiWhyIn .6s ease forwards;
}
.pnx-why-item:nth-child(1){ --wc:#ff2d78; animation-delay:.05s; }
.pnx-why-item:nth-child(2){ --wc:#8b5cf6; animation-delay:.15s; }
.pnx-why-item:nth-child(3){ --wc:#3ba7ff; animation-delay:.25s; }
.pnx-why-item:nth-child(4){ --wc:#2dd4c7; animation-delay:.35s; }
.pnx-why-item:nth-child(5){ --wc:#ffb020; animation-delay:.45s; }
.pnx-why-item:nth-child(6){ --wc:#ec4899; animation-delay:.55s; }

@keyframes aiWhyIn{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}

.pnx-why-item:hover{
  transform: translateY(-8px);
  background: rgba(255,255,255,.05);
  border-color: var(--wc);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--wc) 20%, transparent);
}

.pnx-why-icon{
  width:56px;height:56px;border-radius:14px;
  background: color-mix(in srgb, var(--wc) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--wc) 40%, transparent);
  display:flex;align-items:center;justify-content:center;
  color: var(--wc); font-size:22px;
  margin-bottom:18px;
  transition: transform .3s ease, background .3s ease;
}
.pnx-why-item:hover .pnx-why-icon{
  transform: scale(1.12) rotate(-6deg);
  background: var(--wc);
  color:#fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--wc) 55%, transparent);
}

.pnx-why-item h4{
  font-size:16.5px;
  color: var(--wc);
  margin-bottom:10px;
  font-weight:700;
}
.pnx-why-item p{
  font-size:13.5px; color: whitesmoke; line-height:1.7;
}

/* ================= CTA ================= */
.pnx-cta-wrap{padding:0 0 60px;background:var(--pnx-dark2);}

.pnx-cta{
  max-width:var(--pnx-max);margin:0 auto;
  border-radius:24px;padding:48px 50px;
  display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  position:relative;overflow:hidden;
  border:1px solid rgba(255,45,120,.25);

  background: linear-gradient(120deg, #2a0f22, #1a0f28, #2a1a12, #1a0f28);
  background-size: 300% 300%;
  animation: aiCtaGradient 10s ease infinite;
}
@keyframes aiCtaGradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.pnx-cta::after{
  content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,61,.35), transparent 70%);
}
.pnx-cta::before{
  content:"";position:absolute;left:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,45,120,.28), transparent 70%);
}

.pnx-cta-text{position:relative;z-index:1;max-width:560px;}
.pnx-cta-text h2{font-size:30px;color:#fff;line-height:1.3;margin-bottom:12px;}
.pnx-cta-text p{color: wheat;font-size:15.5px;line-height:1.7;}

.pnx-cta-right{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}

.pnx-cta .pnx-btn{position:relative;white-space:nowrap;}

.pnx-cta-btn-wrap{
  position:relative;
  display:inline-flex;
  border-radius:100px;
}
.pnx-cta-btn-wrap .pnx-btn{
  animation: aiBtnPulse 2.2s ease-in-out infinite;
}
@keyframes aiBtnPulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,45,120,.5); }
  70%{ box-shadow: 0 0 0 14px rgba(255,45,120,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,45,120,0); }
}

.pnx-cta-trust{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color: var(--pnx-text-light-muted);
}
.pnx-cta-trust span{ display:flex; align-items:center; gap:6px; }
.pnx-cta-trust span:not(.pnx-dot)::before{
  content:"✓";
  color: var(--pnx-pink);
  font-weight:700;
  margin-right:2px;
}
.pnx-cta-trust .pnx-dot{ opacity:.4; }

@media(max-width:640px){
  .pnx-cta{padding:34px 26px;}
  .pnx-cta-text h2{font-size:22px;}
  .pnx-cta-right{align-items:flex-start; width:100%;}
}

  /* ================= RESPONSIVE ================= */
  @media(max-width:1024px){
    .pnx-service-grid{grid-template-columns:repeat(3,1fr);}
    .pnx-tech-grid{grid-template-columns:repeat(3,1fr);}
    .pnx-ind-grid{grid-template-columns:repeat(4,1fr);}
    .pnx-why-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media(max-width:900px){
    .pnx-hero-grid{grid-template-columns:1fr;}
    .pnx-hero-visual{
    order:2;
    min-height:260px;
    margin-top:10px;
  }
    .pnx-services-head, .pnx-tech-top, .pnx-industries-top{grid-template-columns:1fr;}
  }
  @media(max-width:640px){
    .pnx-container{padding:0 20px;}
    .pnx-hero-content h1{font-size:32px;}
    .pnx-service-grid{grid-template-columns:1fr;}
    .pnx-tech-grid{grid-template-columns:repeat(2,1fr);}
    .pnx-ind-grid{grid-template-columns:repeat(2,1fr);}
    .pnx-why-grid{grid-template-columns:1fr 1fr;}
    .pnx-stats{gap:22px;}
    .pnx-cta{padding:34px 26px;}
    .pnx-cta-text h2{font-size:22px;}
  }

  @media (prefers-reduced-motion: reduce){
    .pnx-cube, .pnx-hero-orbit-icon{animation:none !important;}
  }

  


/* =========================================================
   PRODUCT STRATEGY & ROADMAPPING
   UNIQUE PREFIX : PSRM
========================================================= */

:root {
    --psrm-dark: #0c0812;
    --psrm-dark-2: #120d1a;

    --psrm-pink: #ff2d78;
    --psrm-orange: #ff7a3d;

    --psrm-gradient:
        linear-gradient(90deg, #ff2d78, #ff7a3d);

    --psrm-light: #f6f5f8;
    --psrm-white: #ffffff;

    --psrm-text: #161320;
    --psrm-muted: #6b6878;
    --psrm-light-muted: #b9b3c7;

    --psrm-border: #ececf1;
}


/* =========================================================
   RESET
========================================================= */

.psrm-hero,
.psrm-provide,
.psrm-process,
.psrm-results,
.psrm-breadcrumb {
    box-sizing: border-box;
}

.psrm-hero *,
.psrm-provide *,
.psrm-process *,
.psrm-results *,
.psrm-breadcrumb * {
    box-sizing: border-box;
}

.psrm-hero h1,
.psrm-hero p,
.psrm-provide h2,
.psrm-provide h3,
.psrm-provide p,
.psrm-process h2,
.psrm-process h4,
.psrm-process p,
.psrm-results h2,
.psrm-results h4,
.psrm-results p {
    margin: 0;
}

.psrm-hero img,
.psrm-provide img,
.psrm-process img,
.psrm-results img {
    max-width: 100%;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.psrm-container {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.psrm-breadcrumb {
    background: var(--psrm-dark);
    color: var(--psrm-light-muted);
    font-size: 13px;
    padding: 18px 0 10px;
}

.psrm-breadcrumb span {
    opacity: 0.8;
}


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

.psrm-hero {
    position: relative;
    overflow: hidden;
    padding: 38px 0 48px;
    color: #fff;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(112, 30, 82, 0.38),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255, 45, 120, 0.08),
            transparent 35%
        ),
        var(--psrm-dark);
}


.psrm-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 55px;
    align-items: center;
}


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

.psrm-hero-content {
    min-width: 0;
}

.psrm-eyebrow,
.psrm-section-eyebrow {
    margin-top: 70px;
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--psrm-pink);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
}

.psrm-eyebrow {
    margin-bottom: 18px;
}

.psrm-eyebrow::after,
.psrm-section-eyebrow::after {
    content: "";
    display: block;

    width: 42px;
    height: 1px;

    background: var(--psrm-pink);
    opacity: 0.65;
}


.psrm-hero h1 {
    max-width: 620px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.12;
    font-weight: 800;

    color: #fff;

    margin-bottom: 20px;
}


.psrm-hero h1 span,
.psrm-section-intro h2 span,
.psrm-process-intro h2 span,
.psrm-results-content h2 span {
    background: var(--psrm-gradient);

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

    color: transparent;
}


.psrm-hero-content > p {
    max-width: 540px;

    color: var(--psrm-light-muted);

    font-size: 17px;
    line-height: 1.75;

    margin-bottom: 28px;
}

.psrm-hero-content h1 span{
    background: linear-gradient(90deg, var(--psrm-pink), var(--psrm-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.psrm-hero-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}

.psrm-hero-content h1{
    text-shadow: none;
}
.psrm-hero-checks > div {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #fff;

    font-size: 13px;
    font-weight: 600;
}


.psrm-check-icon {
    width: 19px;
    height: 19px;

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

    border-radius: 50%;

    background: var(--psrm-gradient);

    font-size: 11px;
}


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

.psrm-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;

    padding: 25px 10px;
}



.psrm-dashboard-imgwrap{
    position: relative;
    z-index: 2;
}

.psrm-dashboard-img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.psrm-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 12px;
}


.psrm-stat-card {
    min-width: 0;

    padding: 10px;

    background: #1e1730;

    border-radius: 8px;
}


.psrm-stat-label {
    color: var(--psrm-light-muted);

    font-size: 9px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.psrm-stat-value {
    color: #fff;

    font-size: 15px;
    font-weight: 800;

    margin-top: 3px;
}


.psrm-stat-growth {
    color: #3ddc84;

    font-size: 9px;

    margin-top: 2px;
}


.psrm-chart-box {
    width: 100%;
    height: 95px;

    overflow: hidden;

    border-radius: 8px;

    background: #1e1730;
}


.psrm-chart-box svg {
    width: 100%;
    height: 100%;
}


/* =========================================================
   FLOATING HERO ICONS
========================================================= */

.psrm-floating-icon {
    position: absolute;
    z-index: 5;

    width: 52px;
    height: 52px;

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

    border-radius: 14px;

    color: #fff;

    font-size: 20px;

    background: var(--psrm-gradient);

    box-shadow:
        0 10px 30px rgba(255, 45, 120, 0.35);

    animation: psrmFloat 4s ease-in-out infinite;
}


.psrm-float-code {
    top: 5%;
    left: -2%;
}


.psrm-float-cloud {
    top: 0;
    right: -2%;

    background:
        linear-gradient(
            135deg,
            #3b2fb0,
            #5b4de6
        );

    animation-delay: -1s;
}


.psrm-float-database {
    right: -2%;
    bottom: 4%;

    background:
        linear-gradient(
            135deg,
            #c22a5c,
            #ff2d78
        );

    animation-delay: -2s;
}


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

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


/* =========================================================
   TECHNOLOGY FLOW
========================================================= */

.psrm-flow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: 30px;
}


.psrm-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 9px;
}


.psrm-flow-circle {
    width: 56px;
    height: 56px;

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

    border: 1.5px solid var(--flow-color, #35283f);
    border-radius: 50%;

    background: #160f20;

    color: var(--flow-color, #fff);

    font-size: 20px;

    box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
               0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
    transition:.25s;
}
.psrm-flow-node:hover .psrm-flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.psrm-flow-node:nth-child(1) .psrm-flow-circle{ --flow-color:#3ba7ff; }
.psrm-flow-node:nth-child(3) .psrm-flow-circle{ --flow-color:#ff2d78; }
.psrm-flow-node:nth-child(5) .psrm-flow-circle{ --flow-color:#2dd4c7; }
.psrm-flow-node:nth-child(7) .psrm-flow-circle{ --flow-color:#e8ebff; }

.flow-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:60px;flex-wrap:wrap;}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:10px;}
.flow-circle{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;background:#160f20;
  border:1.5px solid var(--flow-color, #35283f);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
             0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
  color:var(--flow-color, var(--text-light));
  transition:.25s;
}
.flow-node:hover .flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.flow-node:nth-child(1) .flow-circle{ --flow-color:#3ba7ff; }
.flow-node:nth-child(3) .flow-circle{ --flow-color:#ff2d78; }
.flow-node:nth-child(5) .flow-circle{ --flow-color:#2dd4c7; }
.flow-node:nth-child(7) .flow-circle{ --flow-color:#e8ebff; }
.flow-node span{font-size:11px;letter-spacing:1px;color:var(--text-light-muted);font-weight:600;}
.flow-node:hover span{color:var(--flow-color);}
.flow-arrow{color:var(--orange);font-size:18px;}

@keyframes arrowMove{
  0%{transform:translateX(0); opacity:.35;}
  50%{transform:translateX(8px); opacity:1; text-shadow:0 0 10px var(--psrm-orange);}
  100%{transform:translateX(0); opacity:.35;}
}

.psrm-flow-arrow {
    color: var(--psrm-orange);
    font-size: 18px;
    display: inline-block;
    animation: arrowMove 1.4s ease-in-out infinite;
}
.psrm-flow .psrm-flow-arrow:nth-of-type(1){animation-delay:0s;}
.psrm-flow .psrm-flow-arrow:nth-of-type(2){animation-delay:.3s;}
.psrm-flow .psrm-flow-arrow:nth-of-type(3){animation-delay:.6s;}

.psrm-flow-node span {
    color: var(--psrm-light-muted);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;

    text-align: center;
}


.psrm-flow-arrow {
    color: var(--psrm-orange);

    font-size: 18px;
}


/* =========================================================
   PROVIDE SECTION
========================================================= */

.psrm-provide {
    padding: 80px 0;

    background: #fdf2f6;
}


.psrm-provide-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;
}


.psrm-section-eyebrow {
    margin-bottom: 14px;
}


.psrm-section-intro h2,
.psrm-process-intro h2,
.psrm-results-content h2 {
    font-size: clamp(27px, 3vw, 34px);
    color: #000;
    line-height: 1.25;
    font-weight: 800;
}


.psrm-section-intro > p,
.psrm-process-intro > p,
.psrm-results-content > p {
    color: maroon;

    font-size: 14px;
    line-height: 1.75;

    margin-top: 16px;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.psrm-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.psrm-service-card {
    padding: 24px 20px;

    background: #fff;

    border: 1px solid lightpink;
    border-radius: 13px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
  --card-bg: #ffffff;
  --card-color: var(--psrm-pink);
  background: var(--card-bg);
  transition: background .3s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.psrm-service-card:nth-child(1){ --card-bg:#fff1f5; --card-color:#ff2d78; }
.psrm-service-card:nth-child(2){ --card-bg:#eef7ff; --card-color:#3ba7ff; }
.psrm-service-card:nth-child(3){ --card-bg:#fff9ec; --card-color:#ffb020; }
.psrm-service-card:nth-child(4){ --card-bg:#ecfdfb; --card-color:#2dd4c7; }
.psrm-service-card:nth-child(5){ --card-bg:#f5f1ff; --card-color:#8b5cf6; }
.psrm-service-card:nth-child(6){ --card-bg:#fff2ec; --card-color:#ff7a3d; }
.psrm-service-card:nth-child(7){ --card-bg:#eefdf3; --card-color:#22c55e; }
.psrm-service-card:nth-child(8){ --card-bg:#fdeef7; --card-color:#ec4899; }

.psrm-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 60%, var(--psrm-orange)));

    color: #fff;

    font-size: 18px;

    box-shadow: 0 6px 16px color-mix(in srgb, var(--card-color) 45%, transparent);

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

.psrm-service-card:hover .psrm-service-icon {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 65%, transparent);
}
.psrm-service-card:hover .psrm-service-icon{
  background: var(--card-color);
  color: #fff;
}


.psrm-service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 45, 120, 0.2);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.07);
}

/* gradient border on hover */
.psrm-service-card{
  position: relative;
  overflow: hidden;
}
.psrm-service-card::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--psrm-pink), var(--psrm-orange));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.psrm-service-card:hover::before{
  opacity: 1;
}

/* icon pop on hover */
.psrm-service-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.psrm-service-card:hover .psrm-service-icon{
  transform: scale(1.12) rotate(-6deg);
  background: linear-gradient(135deg, var(--psrm-pink), var(--psrm-orange));
  color: #fff;
}

/* scroll reveal setup — cards start hidden */
.psrm-service-card{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.psrm-service-card.psrm-reveal{
  opacity: 1;
  transform: translateY(0);
}

.psrm-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: #fdeef2;

    color: var(--psrm-pink);

    font-size: 18px;
}


.psrm-service-card h3 {
    color: var(--psrm-text);

    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;

    margin-bottom: 8px;
}


.psrm-service-card p {
    color: #000;

    font-size: 12.5px;
    line-height: 1.65;
}


/* =========================================================
   PROCESS
========================================================= */

.psrm-process {
    padding: 50px 0;

    background: var(--psrm-dark);

    color: #fff;
}


.psrm-process-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;

    align-items: center;
}


.psrm-process-intro .psrm-section-eyebrow {
    color: var(--psrm-pink);
}


.psrm-process-intro h2 {
    color: #fff;
}


.psrm-process-intro > p {
    color: var(--psrm-light-muted);
}
/* =========================================================
   PROCESS STEPS
========================================================= */
.psrm-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@keyframes stepPopIn{
  0%{
    opacity:0;
    transform: scale(.4) translateY(30px);
  }
  60%{
    opacity:1;
    transform: scale(1.08) translateY(-6px);
  }
  80%{
    transform: scale(.96) translateY(2px);
  }
  100%{
    opacity:1;
    transform: scale(1) translateY(0);
  }
}
@keyframes lineDraw{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

.psrm-step {
    position: relative;
    z-index: 2;
    text-align: center;

    opacity: 0;
    animation: stepPopIn .65s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.psrm-step-line {
    position: absolute;
    top: 38px;
    left: 8%;
    right: 8%;
    height: 2px;
    z-index: 1;
    border-radius: 2px;

    background: linear-gradient(
        90deg,
        var(--psrm-pink),
        var(--psrm-orange)
    );
    opacity: .35;
    overflow: visible;
}

@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}
@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}

.psrm-step-line::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);

  width: 22px;
  height: 6px;
  border-radius: 50%;

  background: #fff;
  box-shadow:
    0 0 10px 3px var(--psrm-pink),
    0 0 20px 6px var(--psrm-orange);

  animation: runLight 6.2s linear infinite;
}

.psrm-step:nth-child(2){ --step-color:#ff2d78; animation-delay: .5s; }
.psrm-step:nth-child(3){ --step-color:#3ba7ff; animation-delay: .8s; }
.psrm-step:nth-child(4){ --step-color:#2dd4c7; animation-delay: 1.1s; }
.psrm-step:nth-child(5){ --step-color:#ffb020; animation-delay: 1.4s; }

.psrm-step-circle {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 1.5px solid var(--step-color, var(--psrm-pink));
    border-radius: 50%;
    background: #160f20;
    font-size: 28px;
    color: var(--step-color, #fff);

    box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color, var(--psrm-pink)) 12%, transparent),
                0 0 20px color-mix(in srgb, var(--step-color, var(--psrm-pink)) 45%, transparent);

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

.psrm-step:hover .psrm-step-circle{
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--step-color, var(--psrm-pink)) 20%, transparent),
              0 0 30px color-mix(in srgb, var(--step-color, var(--psrm-pink)) 75%, transparent);
}

.psrm-step-number {
    color: var(--psrm-orange);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
}
.psrm-step:hover .psrm-step-number{
  color: var(--step-color);
}

.psrm-step h4 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 8px;
}
.psrm-step p {
    color: var(--psrm-light-muted);
    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   WHAT YOU GET
========================================================= */

.psrm-results {
    padding: 80px 0;
    background: linear-gradient(
        160deg,
        #ffffff 0%,
        #ffe9f0 35%,
        #ffe3d9 70%,
        #fff5ec 100%
    );
}

@keyframes blobFloat1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-20px) scale(1.1); }
}
@keyframes blobFloat2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-25px,25px) scale(1.15); }
}

.psrm-results {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #fffaf8;
}

.psrm-results::before,
.psrm-results::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.psrm-results::before{
    width: 420px;
    height: 420px;
    top: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(255,45,120,0.35), transparent 70%);
    animation: blobFloat1 9s ease-in-out infinite;
}

.psrm-results::after{
    width: 460px;
    height: 460px;
    bottom: -15%;
    right: -10%;
    background: radial-gradient(circle, rgba(255,122,61,0.35), transparent 70%);
    animation: blobFloat2 11s ease-in-out infinite;
}

.psrm-results-grid{
    position: relative;
    z-index: 1;
}

.psrm-results-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.1fr);

    gap: 60px;

    align-items: center;

    position: relative;   /* NEW */
    z-index: 1; 
}


/* =========================================================
   LAPTOP
========================================================= */

.psrm-laptop-area {
    position: relative;

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

    padding: 30px 20px;
}


.psrm-laptop {
    width: min(100%, 430px);

    position: relative;

    padding: 16px;

    background: #171022;

    border-radius: 14px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.2);
}


.psrm-laptop-screen {
    min-height: 220px;

    padding: 14px;

    border-radius: 8px;

    background: #1e1730;
}


.psrm-laptop-line {
    height: 8px;

    margin-bottom: 8px;

    border-radius: 4px;

    background: #33284a;
}


.psrm-line-40 {
    width: 40%;
}

.psrm-line-60 {
    width: 60%;
}

.psrm-line-80 {
    width: 80%;
}


.psrm-laptop-base {
    height: 14px;

    margin-top: 10px;

    border-radius: 0 0 10px 10px;

    background: #0f0a17;
}

@keyframes laptopFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

.psrm-laptop-img {
    width: min(100%, 460px);
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.25));

    animation: laptopFloat 5s ease-in-out infinite;
}

@keyframes badgeFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes badgePopIn{
  0%{ opacity:0; transform: scale(.3) translateY(20px); }
  60%{ opacity:1; transform: scale(1.15) translateY(-4px); }
  100%{ opacity:1; transform: scale(1) translateY(0); }
}

.psrm-mini-badge{
  opacity: 0;
  animation:
    badgePopIn .6s cubic-bezier(.34,1.56,.64,1) forwards,
    badgeFloat 3.5s ease-in-out infinite;
}

.psrm-mini-code{
  animation-delay: .2s, 1s;   /* pop-in delay, then float delay */
}
.psrm-mini-security{
  animation-delay: .4s, 1.3s;
}
.psrm-mini-growth{
  animation-delay: .6s, 1.6s;
}
.psrm-mini-success{
  animation-delay: .8s, 1.9s;
}

@keyframes benefitSlideIn{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}

.psrm-benefit{
  opacity: 0;
  animation: benefitSlideIn .6s ease forwards;
}

.psrm-benefit:nth-child(1){ animation-delay: .3s; }
.psrm-benefit:nth-child(2){ animation-delay: .5s; }
.psrm-benefit:nth-child(3){ animation-delay: .7s; }
.psrm-benefit:nth-child(4){ animation-delay: .9s; }

.psrm-benefit-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}

.psrm-benefit:hover .psrm-benefit-icon{
  transform: scale(1.15) rotate(-6deg);
  background: linear-gradient(135deg, var(--psrm-pink), var(--psrm-orange));
  color: #fff;
}

/* =========================================================
   LAPTOP FLOATING BADGES
========================================================= */

.psrm-mini-badge {
    position: absolute;
    z-index: 4;

    width: 54px;
    height: 54px;

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

    border-radius: 10px;

    color: #fff;

    font-size: 16px;

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


.psrm-mini-code {
    top: -6%;
    left: 8%;

    background: var(--psrm-gradient);
}


.psrm-mini-security {
    top: -20%;
    right: 10%;

    background: #2b2340;
}


.psrm-mini-growth {
    right: 8%;
    bottom: -14%;

    background: #2b2340;
}


.psrm-mini-success {
    left: 40%;
    bottom: -13%;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: var(--psrm-gradient);
}


/* =========================================================
   BENEFITS
========================================================= */

.psrm-benefit-grid {
    display: grid;

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

    gap: 26px 24px;

    margin-top: 28px;
}


.psrm-benefit {
    display: flex;

    gap: 14px;

    min-width: 0;
}


.psrm-benefit-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 9px;

    background: #fdeef2;

    color: var(--psrm-pink);

    font-size: 17px;
}


.psrm-benefit h4 {
    color: var(--psrm-text);

    font-size: 20px;

    margin-bottom: 5px;
}


.psrm-benefit p {
    color: var(--psrm-muted);

    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .psrm-container {
        width: min(1180px, calc(100% - 48px));
    }


    .psrm-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .psrm-provide-grid,
    .psrm-process-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .psrm-section-intro,
    .psrm-process-intro {
        max-width: 650px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .psrm-hero {
        padding-top: 40px;
    }


    .psrm-hero-grid,
    .psrm-results-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }
    
    .psrm-results-content {
        order: 1;
    }

    .psrm-laptop-area {
        order: 2;
    }

    .psrm-hero-content {
        text-align: center;
    }


    .psrm-eyebrow {
        justify-content: center;
    }


    .psrm-hero h1 {
        margin-left: auto;
        margin-right: auto;
    }


    .psrm-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }


    .psrm-hero-checks {
        justify-content: center;
    }


    .psrm-hero-visual {
        max-width: 680px;

        margin: 0 auto;
    }


    .psrm-results-content {
        max-width: 700px;
        margin: 0 auto;
    }


    .psrm-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 40px;
    }


    .psrm-step-line {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */
/* HERO TEXT MOBILE FIX ONLY
@media screen and (max-width:600px){
  .psrm-hero-content{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:0 4px;
    text-align:left !important;
  }

  .psrm-eyebrow{
    width:100%;
    max-width:100%;
    margin-top:54px;
    margin-bottom:18px;
    justify-content:flex-start !important;
    gap:8px;
    font-size:10px;
    line-height:1.4;
    letter-spacing:.7px;
    white-space:normal;
  }

  .psrm-eyebrow::after{
    width:34px;
    flex:0 0 34px;
  }

  .psrm-hero h1{
    width:100%;
    max-width:360px;
    margin:0 0 18px;
    padding:0;
    font-size:clamp(28px,7.6vw,32px);
    line-height:1.12;
    letter-spacing:-.4px;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .psrm-hero h1 span{
    display:inline;
  }

  .psrm-hero-content > p{
    width:100%;
    max-width:350px;
    margin:0 0 26px;
    padding:0 2px;
    font-size:14px;
    line-height:1.5;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .psrm-hero-checks{
    width:100%;
    max-width:100%;
    margin:0;
    align-items:flex-start;
    gap:11px;
    text-align:left;
  }

  .psrm-hero-checks > div{
    width:auto;
    justify-content:flex-start;
    font-size:13px;
    line-height:1.35;
  }
}

@media screen and (max-width:380px){
  .psrm-eyebrow{margin-top:48px;font-size:9px;}
  .psrm-eyebrow::after{width:26px;flex-basis:26px;}

  .psrm-hero h1{
    max-width:320px;
    font-size:26px;
  }

  .psrm-hero-content > p{
    max-width:320px;
    font-size:13.5px;
  }
}


@media screen and (max-width:380px){
  .psrm-eyebrow{margin-top:48px;font-size:9px;}
  .psrm-eyebrow::after{width:26px;flex-basis:26px;}

  .psrm-hero h1{
    max-width:320px;
    font-size:26px;
  }

  .psrm-hero-content > p{
    max-width:320px;
    font-size:13.5px;
  }
}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .psrm-container {
        width: calc(100% - 24px);
    }


    .psrm-hero h1 {
        font-size: 28px;
    }


    .psrm-dashboard-sidebar {
        width: 65px;
        flex-basis: 65px;
    }


    .psrm-dashboard-main {
        padding: 8px;
    }


    .psrm-stat-value {
        font-size: 10px;
    }


    .psrm-flow {
        gap: 4px;
    }


    .psrm-flow-circle {
        width: 38px;
        height: 38px;
    }


    .psrm-flow-arrow {
        font-size: 11px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .psrm-floating-icon,
    .psrm-service-card {
        animation: none;
        transition: none;
    }

}

/* =========================================================
   PRODUCT STRATEGY — SCROLL REVEAL CONTROL
========================================================= */

.psrm-dashboard-imgwrap{
    transform-style: preserve-3d;
    transition: transform .25s ease;
    will-change: transform;
}

.psrm-step{
    opacity: 0;
    animation: none;
}

.psrm-step.psrm-reveal{
    opacity: 1;
    animation: stepPopIn .65s cubic-bezier(.34, 1.56, .64, 1) forwards;
    animation-delay: 0s;
}

.psrm-step-line{
    transform: scaleX(0);
    transform-origin: left center;
}

.psrm-step-line.psrm-reveal{
    animation: lineDraw .9s ease forwards;
}

@media (prefers-reduced-motion: reduce){
    .psrm-step,
    .psrm-step.psrm-reveal,
    .psrm-step-line,
    .psrm-step-line.psrm-reveal{
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}


/*============================================================
               UI/UX Design & Prototyping
============================================================*/
 :root{
    --uxdp-black:#0b0b10;
    --uxdp-black-2:#121016;
    --uxdp-pink:#ef2d7e;
    --uxdp-orange:#f6923a;
    --uxdp-cream:#faf5f2;
    --uxdp-cream-2:#f4ece7;
    --uxdp-white:#ffffff;
    --uxdp-text-dark:#141217;
    --uxdp-text-muted:#6b6570;
    --uxdp-text-light:#c9c4cd;
    --uxdp-gradient: linear-gradient(90deg, var(--uxdp-pink), var(--uxdp-orange));
    --uxdp-radius: 16px;
    --uxdp-max-w: 1200px;
  }

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

  @keyframes uxdp-mesh-move{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(-3%, 2%) scale(1.08); }
    100%{ transform: translate(0,0) scale(1); }
  }
  @keyframes uxdp-mesh-move-2{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(4%, -3%) scale(1.05); }
    100%{ transform: translate(0,0) scale(1); }
  }
  @keyframes uxdp-pulse{
    0%,100%{ opacity:0.55; transform: translateX(-50%) scale(1); }
    50%{ opacity:0.9; transform: translateX(-50%) scale(1.12); }
  }
  @keyframes uxdp-float-y{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
  }
  @keyframes uxdp-fade-up-blur{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}
  @keyframes uxdp-count-fade{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
  }
  @keyframes uxdp-draw-line{
    from{ stroke-dashoffset: 260; }
    to{ stroke-dashoffset: 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .uxdp-hero *{ animation: none !important; transition: none !important; }
  }

  body{
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    color: var(--uxdp-text-dark);
    background: var(--uxdp-white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}

  .uxdp-container{
    max-width: var(--uxdp-max-w);
    margin: 0 auto;
    padding: 0 32px;
  }

  .uxdp-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color: var(--uxdp-pink);
  }
  .uxdp-eyebrow-dot{
    width:6px; height:6px; border-radius:50%;
    background: var(--uxdp-pink);
    display:inline-block;
  }
  .uxdp-eyebrow--boxed{
    position:relative;
    border:1px solid transparent;
    padding:8px 16px;
    border-radius:999px;
    background:
      linear-gradient(#0b0b10,#0b0b10) padding-box,
      conic-gradient(from 0deg, var(--uxdp-pink), var(--uxdp-orange), var(--uxdp-pink)) border-box;
    animation: uxdp-border-spin 4s linear infinite;
  }
  @keyframes uxdp-border-spin{
    to{ filter: hue-rotate(0deg); background:
      linear-gradient(#0b0b10,#0b0b10) padding-box,
      conic-gradient(from 360deg, var(--uxdp-pink), var(--uxdp-orange), var(--uxdp-pink)) border-box;
    }
  }

  .uxdp-gradient-text{
    background: linear-gradient(100deg, var(--uxdp-pink) 20%, var(--uxdp-orange) 40%, #ffd8b0 50%, var(--uxdp-orange) 60%, var(--uxdp-pink) 80%);
    background-size: 250% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation: uxdp-shimmer 5s linear infinite;
  }
  @keyframes uxdp-shimmer{
    0%{ background-position: 200% 0; }
    100%{ background-position: -50% 0; }
  }

  /* ---------------- HERO ---------------- */
  .uxdp-hero{
    background: #08080c;
    color: var(--uxdp-white);
    padding: 105px 0 50px;
    overflow:hidden;
    position:relative;
  }
  .uxdp-hero__mesh{
    position:absolute; inset:-10%;
    z-index:0;
    pointer-events:none;
  }
  .uxdp-hero__mesh span{
    position:absolute;
    border-radius:50%;
    filter: blur(70px);
    opacity:0.5;
  }
  .uxdp-hero__mesh span:nth-child(1){
    width:420px; height:420px; top:-8%; right:8%;
    background: radial-gradient(circle, rgba(239,45,126,0.55), transparent 70%);
    animation: uxdp-mesh-move 14s ease-in-out infinite;
  }
  .uxdp-hero__mesh span:nth-child(2){
    width:380px; height:380px; bottom:-10%; right:26%;
    background: radial-gradient(circle, rgba(246,146,58,0.4), transparent 70%);
    animation: uxdp-mesh-move-2 18s ease-in-out infinite;
  }
  .uxdp-hero__mesh span:nth-child(3){
    width:300px; height:300px; top:20%; left:-6%;
    background: radial-gradient(circle, rgba(120,40,160,0.35), transparent 70%);
    animation: uxdp-mesh-move 20s ease-in-out infinite reverse;
  }
  .uxdp-hero__grain{
    position:absolute; inset:0; z-index:1;
    opacity:0.05;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .uxdp-hero__particles{
    position:absolute; inset:0; z-index:1; pointer-events:none;
  }
  .uxdp-hero__particles span{
    position:absolute;
    width:3px; height:3px;
    border-radius:50%;
    background: var(--uxdp-orange);
    opacity:0.5;
    animation: uxdp-particle-float linear infinite;
  }
  .uxdp-hero__particles span:nth-child(odd){ background: var(--uxdp-pink); }
  @keyframes uxdp-particle-float{
    0%{ transform: translateY(0) translateX(0); opacity:0; }
    10%{ opacity:0.6; }
    90%{ opacity:0.6; }
    100%{ transform: translateY(-140px) translateX(20px); opacity:0; }
  }
  .uxdp-hero__spotlight{
    position:absolute;
    top:-20%; left:50%;
    width:600px; height:500px;
    transform: translateX(-50%);
    background: conic-gradient(from 180deg at 50% 0%, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
    z-index:1;
    pointer-events:none;
  }
  .uxdp-hero__cursor-glow{
    position:absolute;
    width:420px; height:420px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(239,45,126,0.16), transparent 70%);
    top:0; left:0;
    transform: translate(-50%,-50%);
    pointer-events:none;
    z-index:1;
    opacity:0;
    transition: opacity 0.4s ease;
  }
  .uxdp-hero__grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items:center;
  }
 .uxdp-hero__title{
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  margin: 20px 0 20px;
  letter-spacing:-0.5px;
  color: #ffffff;
  text-shadow: none;
  animation: uxdp-fade-up-blur 0.8s ease both;
  animation-delay: 0.05s;
}
  .uxdp-hero__desc{
    color: whitesmoke;
    font-size: 17px;
    max-width: 480px;
    margin-bottom: 24px;
    animation: uxdp-fade-up-blur 0.8s ease both;
    animation-delay: 0.2s;
  }
  .uxdp-hero__features{
    display:flex;
    flex-wrap:wrap;
    gap: 14px 28px;
    margin-bottom: 36px;
  }
  .uxdp-hero__feature{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color: whitesmoke;
    opacity:0;
    animation: uxdp-count-fade 0.6s ease forwards;
    transition: transform 0.25s ease, color 0.25s ease;
    cursor:default;
  }
  .uxdp-hero__feature:hover{
    transform: translateX(4px);
    color: #fff;
  }
  .uxdp-hero__feature:nth-child(1){ animation-delay:0.35s; }
  .uxdp-hero__feature:nth-child(2){ animation-delay:0.45s; }
  .uxdp-hero__feature:nth-child(3){ animation-delay:0.55s; }
  .uxdp-hero__feature:nth-child(4){ animation-delay:0.65s; }
  .uxdp-hero__feature:nth-child(5){ animation-delay:0.75s; }
  .uxdp-check{
    width:18px; height:18px;
    border-radius:50%;
    background: rgba(239,45,126,0.15);
    color: var(--uxdp-pink);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    flex-shrink:0;
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .uxdp-hero__feature:hover .uxdp-check{
    transform: scale(1.15);
    background: var(--uxdp-pink);
    color:#fff;
  }

  .uxdp-stats{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    opacity:0;
    animation: uxdp-count-fade 0.7s ease forwards;
    animation-delay: 0.85s;
  }
  .uxdp-stat{
    position:relative;
    padding: 22px 16px 18px;
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow:hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  .uxdp-stat::before{
    content:"";
    position:absolute; inset:0;
    border-radius:16px;
    padding:1px;
    background: var(--uxdp-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:0;
    transition: opacity 0.3s ease;
    pointer-events:none;
  }
  .uxdp-stat:hover{
    transform: translateY(-6px) scale(1.03);
    border-color: transparent;
    background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
    box-shadow: 0 16px 34px rgba(239,45,126,0.22);
  }
  .uxdp-stat:hover::before{ opacity:1; }
  .uxdp-stat__icon{
    width:34px; height:34px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(239,45,126,0.22), rgba(246,146,58,0.16));
    color: var(--uxdp-pink);
    font-size:15px;
    margin-bottom:12px;
    transform: rotate(-90deg) scale(0.5);
    opacity:0;
    animation: uxdp-icon-spin-in 0.6s ease forwards;
  }
  .uxdp-stat:nth-child(1) .uxdp-stat__icon{ animation-delay: 1s; }
  .uxdp-stat:nth-child(2) .uxdp-stat__icon{ animation-delay: 1.12s; }
  .uxdp-stat:nth-child(3) .uxdp-stat__icon{ animation-delay: 1.24s; }
  .uxdp-stat:nth-child(4) .uxdp-stat__icon{ animation-delay: 1.36s; }
  .uxdp-stat__num{ font-size:24px; font-weight:800; letter-spacing:-0.3px; }
  .uxdp-stat__label{ font-size:12px; color: var(--uxdp-text-muted); margin-top:3px;}
  .uxdp-stat__bar{
    height:3px;
    border-radius:2px;
    background: rgba(255,255,255,0.08);
    margin-top:14px;
    overflow:hidden;
  }
  .uxdp-stat__bar span{
    display:block;
    height:100%;
    width:0%;
    background: var(--uxdp-gradient);
    border-radius:2px;
    transition: width 1.3s cubic-bezier(.22,1,.36,1);
  }
  @keyframes uxdp-icon-spin-in{
    to{ transform: rotate(0deg) scale(1); opacity:1; }
  }

  /* Hero phone showcase */
  .uxdp-hero__visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: 460px;
    perspective: 1200px;
    opacity:0;
    animation: uxdp-count-fade 1s ease forwards;
    animation-delay: 0.3s;
  }
  .uxdp-hero__glow{
    position:absolute;
    bottom:10px;
    left:50%;
    width: 340px;
    height: 100px;
    background: radial-gradient(ellipse at center, rgba(239,45,126,0.55), rgba(246,146,58,0.15) 60%, transparent 75%);
    filter: blur(6px);
    border-radius:50%;
    animation: uxdp-pulse 4s ease-in-out infinite;
  }
  .uxdp-phones{
    position:relative;
    display:flex;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    gap: -20px;
    z-index:2;
    animation: uxdp-zoom-reveal 1s cubic-bezier(.22,1,.36,1) both;
    animation-delay: 0.2s;
  }
  @keyframes uxdp-zoom-reveal{
    from{ transform: scale(1.25); opacity:0; }
    to{ transform: scale(1); opacity:1; }
  }
  .uxdp-phone{
    width: 220px;
    height: 420px;
    background: #0d0d10;
    border: 6px solid #1c1c22;
    border-radius: 34px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    padding: 14px 12px;
    position:relative;
    display:flex;
    flex-direction:column;
    gap:20px;
    overflow:hidden;
  }
  .uxdp-phone::after{
    content:"";
    position:absolute;
    top:-120%; left:-40%;
    width:60%; height:340%;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
    transform: rotate(20deg);
    animation: uxdp-screen-sweep 5s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes uxdp-screen-sweep{
    0%,100%{ left:-40%; }
    50%{ left:110%; }
  }
  .uxdp-hero__visual:hover .uxdp-phones{
    transform: rotateY(-6deg) rotateX(3deg);
  }
  .uxdp-phone--front{
    transform: translateY(30px);
    margin-left:-40px;
    z-index:3;
    transition: transform 0.4s ease;
  }

  .uxdp-phone--back{
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.92);
}
    .uxdp-hero__visual:hover .uxdp-phone--front{
    transform: translateY(24px) translateZ(30px);
  }
  .uxdp-hero__visual:hover .uxdp-phone--back{
  transform: translateY(-14px) scale(0.98) translateZ(-10px);
  filter: brightness(0.88);
}
  .uxdp-phone__notch{
    position:absolute;
    top:0; left:50%; transform:translateX(-50%);
    width:70px; height:18px;
    background:#1c1c22;
    border-radius:0 0 12px 12px;
  }
  .uxdp-phone__status{
    display:flex; justify-content:space-between;
    font-size:9px; color:#fff; opacity:0.6;
    margin-top:6px;
  }
  .uxdp-phone__greeting{ font-size:11px; color:#8f8b93; margin-top:8px;}
  .uxdp-phone__name{ font-size:14px; font-weight:700; color:#fff;}
  .uxdp-phone__balance-card{
    background: linear-gradient(135deg, #241621, #1a1220);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:14px;
    padding:12px;
    margin-top:8px;
  }
  .uxdp-phone__balance-label{ font-size:9px; color:#8f8b93;}
  .uxdp-phone__balance-amount{ font-size:20px; font-weight:800; color:#fff; margin-top:4px;}
  .uxdp-phone__balance-chart{ height:30px; margin-top:8px;}
  .uxdp-phone__tx-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:9.5px; color:#cfcbd4;
    padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .uxdp-phone__tx-amt{ color:#ef2d7e; font-weight:700;}
  .uxdp-phone__tabbar{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,0.06);
  }
  .uxdp-phone__tab{ font-size:8px; color:#68636f; text-align:center;}
  .uxdp-phone__tab--active{ color:#ef2d7e;}

  .uxdp-phone__cats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px;
  }
  .uxdp-phone__cat{
    background: rgba(255,255,255,0.04);
    border-radius:10px;
    padding:8px 4px;
    text-align:center;
    font-size:7px;
    color:#cfcbd4;
  }
  .uxdp-phone__cat-ic{ font-size:14px; margin-bottom:2px;}
  .uxdp-phone__promo{
    background: linear-gradient(135deg, #3a1024, #201018);
    border-radius:12px;
    padding:10px;
    margin-top:10px;
    font-size:9px;
    color:#fff;
  }
  .uxdp-phone__promo strong{ font-size:12px; display:block; margin-bottom:4px;}
  .uxdp-phone__products{
    display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px;
  }
  .uxdp-phone__product{
    background: rgba(255,255,255,0.04);
    border-radius:8px;
    padding:8px 4px;
    text-align:center;
    font-size:7px;
    color:#cfcbd4;
  }

  .uxdp-badge{
    position:absolute;
    width:60px; height:60px;
    border-radius:18px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px;
    font-size:9px;
    font-weight:700;
    color:#fff;
    background: rgba(20,18,22,0.9);
    z-index:4;
  }
  .uxdp-badge--ios{ left:-5%; top:18%; border:1px solid rgba(239,45,126,0.5); }
  .uxdp-badge--android{ right:2%; top:18%; border:1px solid rgba(246,146,58,0.5); }
  .uxdp-badge--float{ animation: uxdp-float-y 4s ease-in-out infinite; }
  .uxdp-badge--float-2{ animation: uxdp-float-y 4.5s ease-in-out infinite 0.6s; }

  .uxdp-phone__balance-chart polyline{
    animation: uxdp-draw-line 1.6s ease forwards;
    animation-delay: 1.1s;
  }
  .uxdp-tx-row--1, .uxdp-tx-row--2, .uxdp-tx-row--3{
    opacity:0;
    animation: uxdp-count-fade 0.5s ease forwards;
  }
  .uxdp-tx-row--1{ animation-delay: 1.5s; }
  .uxdp-tx-row--2{ animation-delay: 1.65s; }
  .uxdp-tx-row--3{ animation-delay: 1.8s; }
  .uxdp-badge__icon{ font-size:20px; }

  /* ================= UXDP-HERO — RESPONSIVE (ALL SIZES) ================= */

@media (max-width: 980px){
  .uxdp-hero{
    padding: 80px 0 40px;
  }
  .uxdp-hero__grid{
    display:flex;
    flex-direction:column;
    gap: 40px;
  }
  .uxdp-hero-content{
    order:1;
  }
  .uxdp-hero__visual{
    order:2;
    min-height:360px;
    overflow: hidden;
  }
  .uxdp-hero__title{
    font-size: 34px;
  }
  .uxdp-hero__desc{
    font-size: 15px;
    max-width: 100%;
  }
  .uxdp-hero__features{
    gap: 12px 22px;
    margin-bottom: 28px;
  }
  .uxdp-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .uxdp-phones{
    transform: scale(0.62);
    transform-origin: center center;
  }
}

@media (max-width: 640px){
  .uxdp-container{
    padding: 0 20px;
  }
  .uxdp-hero{
    padding: 70px 0 36px;
  }
  .uxdp-hero__grid{
    gap: 32px;
  }
  .uxdp-hero__title{
    font-size: 27px;
    line-height: 1.2;
    margin: 14px 0 14px;
  }
  .uxdp-hero__desc{
    font-size: 13.5px;
    margin-bottom: 20px;
  }
  .uxdp-hero__features{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
  }
  .uxdp-hero__feature{
    font-size: 13px;
  }
  .uxdp-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .uxdp-stat{
    padding: 16px 12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .uxdp-stat__num{
    font-size: 19px;
  }
  .uxdp-stat__label{
    font-size: 10.5px;
  }
  .uxdp-stat__icon{
    width: 28px;
    height: 28px;
    font-size: 13px;
    margin-bottom: 8px;
  }
  .uxdp-hero__visual{
    min-height: 300px;
  }
 .uxdp-phones{
    transform: scale(0.6);
    transform-origin: center center;
  }
  .uxdp-hero__visual:hover .uxdp-phones{
    transform: scale(0.72) rotateY(-6deg) rotateX(3deg);
  }
  .uxdp-badge{
    width: 48px;
    height: 48px;
    font-size: 8px;
    border-radius: 14px;
  }
  .uxdp-badge__icon{
    font-size: 16px;
  }
  .uxdp-hero__stats-wrap{
    overflow-x:auto;
  }
}

@media (max-width: 380px){
  .uxdp-hero__title{
    font-size: 23px;
  }
  .uxdp-stats{
    grid-template-columns: 1fr 1fr;
  }
  .uxdp-stat__num{
    font-size: 17px;
  }
  .uxdp-phones{
    transform: scale(0.48);
  }
}

  /* ---------------- SECTION 2: Powerful Apps ---------------- */
.uxdp-platforms{
  position:relative;
  background: var(--uxdp-white);
  padding: 88px 0;
  overflow:hidden;
}
.uxdp-platforms::before{
  content:"";
  position:absolute;
  top:-100px; right:-80px;
  width:520px; height:520px;
  background: radial-gradient(circle, rgba(239,45,126,0.16), transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: uxdp-platform-blob-1 12s ease-in-out infinite;
}
.uxdp-platforms::after{
  content:"";
  position:absolute;
  bottom:-120px; left:-80px;
  width:460px; height:460px;
  background: radial-gradient(circle, rgba(246,146,58,0.14), transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: uxdp-platform-blob-2 15s ease-in-out infinite;
}
@keyframes uxdp-platform-blob-1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-30px, 25px) scale(1.1); }
}
@keyframes uxdp-platform-blob-2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(25px, -20px) scale(1.08); }
}
.uxdp-platforms__top, .uxdp-perks{
  position:relative;
  z-index:1;
}
  .uxdp-platforms__top{
    display:grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    align-items:start;
  }
  .uxdp-section-title{
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    line-height:1.2;
    margin: 14px 0 16px;
    color: var(--uxdp-text-dark);
  }
  .uxdp-section-desc{
    color: var(--uxdp-text-muted);
    font-size:15px;
    max-width:400px;
  }
  .uxdp-platform-cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

.uxdp-platform-card{
  background: var(--uxdp-cream);
  border: 1px solid #ece1da;
  border-radius: var(--uxdp-radius);
  border-color: var(--uxdp-pink);
  padding: 28px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow: 0 6px 18px rgba(20,18,23,0.05);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.uxdp-platform-card:hover{
  border-color: var(--uxdp-pink);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(239,45,126,0.12);
}
.uxdp-platform-card__icon{
  width:54px; height:54px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(239,45,126,0.14), rgba(246,146,58,0.1));
  font-size:26px;
  transition: transform 0.25s ease;
}
.uxdp-platform-card:hover .uxdp-platform-card__icon{
  transform: scale(1.08) rotate(-4deg);
}
  .uxdp-platform-card__title{ font-size:17px; font-weight:700; color: var(--uxdp-text-dark); }
  .uxdp-platform-card__text{ font-size:13.5px; color: var(--uxdp-text-muted); }
.uxdp-platform-card__underline{
  width:32px; height:4px;
  background: var(--uxdp-gradient);
  border-radius:3px;
  margin-top:auto;
  transition: width 0.3s ease;
}
.uxdp-platform-card:hover .uxdp-platform-card__underline{
  width:56px;
}

.uxdp-perks{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
  padding-top: 40px;
  position:relative;
}
.uxdp-perk{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:20px 12px;
  border-radius:16px;
  position: relative;
  transition: background 0.25s ease, transform 0.25s ease;
}

.uxdp-perk__label::after{
  content:"";
  position:absolute;
  bottom:0; left:0;
  width:0;
  height:2px;
  background: var(--uxdp-gradient);
  transition: width 0.25s ease;
}
.uxdp-perk:hover{
  background: var(--uxdp-cream);
  transform: translateY(-3px);
}
.uxdp-perk:not(:last-child)::after{
  content:"";
  position:absolute;
  top:10px; right:-12px;
  bottom:10px;
  width:1px;
  background: #ece1da;
}
.uxdp-perks::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:70%;
  height:1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ece1da 20%, #ece1da 80%, transparent);
}
.uxdp-perks::after{
  content:"✦";
  position:absolute;
  top:-8px; left:50%;
  transform: translateX(-50%);
  color: var(--uxdp-pink);
  font-size:14px;
  background: var(--uxdp-white);
  padding: 0 12px;
}
.uxdp-perk__icon{
  width:70px; height:70px;
  border-radius:16px;
  background: linear-gradient(135deg, var(--uxdp-pink), #f6923a);
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  color:#fff;
  box-shadow: 0 8px 22px rgba(239,45,126,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: uxdpPerkPulse 2.4s ease-in-out infinite;
}

.uxdp-perk:hover .uxdp-perk__icon{
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 14px 30px rgba(239,45,126,0.5);
}
.uxdp-perk__label{
  font-size:16px;
  font-weight:600;
  position:relative;
  padding-bottom:4px;
  color: var(--uxdp-text-dark);
}
.uxdp-perk__label::after{
  content:"";
  position:absolute;
  bottom:0; left:0;
  width:0;
  height:2px;
  background: var(--uxdp-gradient);
  transition: width 0.25s ease;
}
.uxdp-perk:hover .uxdp-perk__label::after{
  width:100%;
}
.uxdp-perk__desc{
  font-size:15.5px;
  color: maroon;
  margin-top:2px;
}
.uxdp-platforms__badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.uxdp-platforms__badge{
  font-size:13.5px;
  font-weight:600;
  padding:8px 14px;
  border-radius:999px;
  background: #fff;
  border:1.5px solid;
  transition: transform .2s ease;
}
.uxdp-platforms__badge:hover{ transform: translateY(-2px); }
.uxdp-badge-swift{ border-color:#ff5722; color:#ff5722; }
.uxdp-badge-kotlin{ border-color:#8b5cf6; color:#8b5cf6; }
.uxdp-badge-react{ border-color:#3ba7ff; color:#3ba7ff; }
.uxdp-badge-flutter{ border-color:#2dd4c7; color:#2dd4c7; }

@keyframes uxdpPerkPulse{
  0%,100%{ box-shadow: 0 4px 14px rgba(239,45,126,0.08); }
  50%{ box-shadow: 0 4px 22px rgba(239,45,126,0.28); }
}
.uxdp-perk__icon{
  animation: uxdpPerkPulse 2.4s ease-in-out infinite;
}
.uxdp-perk:nth-child(1) .uxdp-perk__icon{ animation-delay:0s; }
.uxdp-perk:nth-child(2) .uxdp-perk__icon{ animation-delay:.3s; }
.uxdp-perk:nth-child(3) .uxdp-perk__icon{ animation-delay:.6s; }
.uxdp-perk:nth-child(4) .uxdp-perk__icon{ animation-delay:.9s; }
.uxdp-platform-cards{
  perspective: 1000px;
}
.uxdp-platform-card{
  position:relative;
  transform-style: preserve-3d;
  transition: transform .15s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.uxdp-platform-card__num{
  font-size:26px;
  font-weight:800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(239,45,126,.4);
  position:absolute;
  top:16px; right:20px;
}
.uxdp-platform-card__icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--uxdp-gradient);
  color:#fff;
  font-size:22px;
  box-shadow: 0 10px 24px rgba(239,45,126,.35);
  transition: transform 0.25s ease;
}
.uxdp-platform-card:hover .uxdp-platform-card__icon{
  transform: scale(1.1) rotate(-6deg);
}
  /* ---------------- SECTION 3: Ecosystem ---------------- */
  .uxdp-ecosystem{
    background: var(--uxdp-black);
    color:#fff;
    padding: 75px 0;
    overflow-x:auto;
  }
  .uxdp-ecosystem__intro{
    max-width:670px;
    margin-bottom:57px;
  }
  .uxdp-flow{
    display:flex;
    align-items:center;
    gap: 14px;
    flex-wrap:nowrap;
  }
  .uxdp-flow__phone{
    width:155px;
    background:#141017;
    border:6px solid #211c26;
    border-radius:29px;
    padding:14px 10px;
    flex-shrink:0;
  }
  .uxdp-flow__phone-label{ font-size:8px; color:#8f8b93; }
.uxdp-flow__phone-ring{
  width:64px; height:64px;
  border-radius:50%;
  border:6px solid #2a2430;
  border-top-color: var(--uxdp-pink);
  border-right-color: var(--uxdp-orange);
  margin: 12px auto;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
  animation: uxdp-ring-spin 3s linear infinite;
}
@keyframes uxdp-ring-spin{
  to{ transform: rotate(360deg); }
}
  .uxdp-flow__phone-bars{
    display:flex; align-items:flex-end; gap:3px; height:30px; margin-top:10px;
  }
.uxdp-flow__phone-bars span{
  flex:1; background: linear-gradient(180deg, var(--uxdp-pink), var(--uxdp-orange)); border-radius:2px;
  animation: uxdp-bar-pulse 1.6s ease-in-out infinite;
}
.uxdp-flow__phone-bars span:nth-child(1){ animation-delay:0s; }
.uxdp-flow__phone-bars span:nth-child(2){ animation-delay:0.15s; }
.uxdp-flow__phone-bars span:nth-child(3){ animation-delay:0.3s; }
.uxdp-flow__phone-bars span:nth-child(4){ animation-delay:0.45s; }
.uxdp-flow__phone-bars span:nth-child(5){ animation-delay:0.6s; }
.uxdp-flow__phone-bars span:nth-child(6){ animation-delay:0.75s; }
@keyframes uxdp-bar-pulse{
  0%,100%{ transform: scaleY(0.6); opacity:0.7; }
  50%{ transform: scaleY(1); opacity:1; }
}
.uxdp-flow__arrow{
  color: var(--uxdp-orange);
  font-size:48px;
  flex-shrink:0;
  position:relative;
  width:25px;
  text-align:center;
  overflow:visible;
}
.uxdp-flow__arrow::after{
  content:"";
  position:absolute;
  top:50%; left:0;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--uxdp-pink);
  box-shadow: 0 0 8px var(--uxdp-pink), 0 0 14px rgba(239,45,126,0.6);
  transform: translateY(-50%);
  animation: uxdp-dot-travel 1.8s linear infinite;
}
.uxdp-flow__arrow:nth-of-type(1)::after{ animation-delay: 0s; }
@keyframes uxdp-dot-travel{
  0%{ left:0; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}
  .uxdp-flow__box{
    background:#141017;
    border:1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 16px;
    width: 150px;
    flex-shrink:0;
    text-align:center;
  }
  .uxdp-flow__box:hover{
  border-color: rgba(239,45,126,0.5);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(239,45,126,0.15);
}
  .uxdp-flow__box-icon{
    font-size:29px;
    color: var(--uxdp-pink);
    margin-bottom:10px;
  }
  .uxdp-flow__box-title{ font-size:18px; font-weight:700; margin-bottom:9px; color: white;}
  .uxdp-flow__box-text{ font-size:15.5px; color:whitesmoke; line-height:1.4;}

  .uxdp-flow__integrations{
    background:#141017;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:18px 18px;
    width: 170px;
    flex-shrink:0;
  }
  .uxdp-flow__integrations-title{ font-size:18px; font-weight:700; margin-bottom:14px;}
  .uxdp-flow__integrations li{
    display:flex; align-items:center; gap:10px;
    font-size:14px; color: whitesmoke;
    padding:5px 0;
  }
.uxdp-flow__integrations li span:first-child{
  color: var(--uxdp-pink);
  font-size:12px;
  width:29px; height:29px;
  border-radius:7px;
  background: linear-gradient(135deg, rgba(239,45,126,0.18), rgba(246,146,58,0.12));
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
  .uxdp-flow__caption{
    text-align:center;
    font-size:13px;
    font-weight:700;
    color: var(--uxdp-pink);
    margin-top:10px;
  }


  /* ---------------- SECTION 4: Business Impact ---------------- */
  .uxdp-impact{
  background: linear-gradient(160deg, var(--uxdp-cream) 0%, #f9d9e4 50%, #fce0c8 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.uxdp-impact::before{
  content:"";
  position:absolute; top:-10%; left:-8%;
  width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(239,45,126,.10), transparent 70%);
  filter: blur(20px);
  animation: uxdpImpactBlobDrift 8s ease-in-out infinite;
}
@keyframes uxdpImpactBlobDrift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(20px,-15px) scale(1.08); }
}
.uxdp-impact::after{
  content:"";
  position:absolute; bottom:-12%; right:-8%;
  width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(246,146,58,.12), transparent 70%);
  filter: blur(20px);
  animation: uxdpImpactBlobDrift2 10s ease-in-out infinite;
  z-index:0;
}
@keyframes uxdpImpactBlobDrift2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-18px,15px) scale(1.1); }
}

.uxdp-impact .uxdp-container{ position:relative; z-index:1; }

@keyframes uxdpImpactFadeUp{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}
.uxdp-impact .uxdp-eyebrow,
.uxdp-impact .uxdp-section-title,
.uxdp-impact__desc{
  opacity:0;
  animation: uxdpImpactFadeUp .6s ease forwards;
}
.uxdp-impact .uxdp-eyebrow{ animation-delay:.1s; }
.uxdp-impact .uxdp-section-title{ animation-delay:.25s; }
.uxdp-impact__desc{ animation-delay:.4s; }
  .uxdp-impact__grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items:center;
  }
  .uxdp-impact__desc{
    color: var(--uxdp-text-muted);
    font-size:15px;
    max-width:420px;
    margin-bottom:32px;
  }
  .uxdp-impact__list{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px;
  }
  .uxdp-impact__item{
    display:flex;
    gap:12px;
  }
  .uxdp-impact__icon{
    width:40px; height:40px;
    border-radius:10px;
    background: var(--uxdp-pink);
    color: var(--uxdp-pink);
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
    flex-shrink:0;
  }
  .uxdp-impact__item-title{ font-size:16.5px; font-weight:700; margin-bottom:4px; color: #000;}
  .uxdp-impact__item-text{ font-size:13.5px; color: var(--uxdp-text-muted); line-height:1.4;}

  .uxdp-impact__visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:460px;
  }
  .uxdp-impact__blob{
    position:absolute;
    width: 340px; height:340px;
    background: radial-gradient(circle, rgba(239,45,126,0.16), rgba(246,146,58,0.06) 70%, transparent 80%);
    border-radius:50%;
  }
  .uxdp-impact__phone{
    width:220px;
    background:#0d0d10;
    border:7px solid #1c1c22;
    border-radius:36px;
    padding:16px 14px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
    position:relative;
    z-index:2;
  }
  .uxdp-impact__phone-notch{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:80px; height:20px; background:#1c1c22; border-radius:0 0 14px 14px;
  }
  .uxdp-impact__phone-label{ font-size:10px; color:#8f8b93; margin-top:10px;}
  .uxdp-impact__phone-amount{ font-size:22px; font-weight:800; color:#fff; margin:4px 0;}
  .uxdp-impact__phone-delta{ font-size:10px; color:#3ddc84; margin-bottom:8px;}
  .uxdp-impact__phone-chart{ height:60px; }
  .uxdp-impact__phone-products{ margin-top:14px; }
  .uxdp-impact__phone-heading{ font-size:9px; color:#8f8b93; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px;}
  .uxdp-impact__phone-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:9.5px; color:#cfcbd4; padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .uxdp-impact__phone-row span:last-child{ color:#fff; font-weight:600;}

  .uxdp-impact__float{
    position:absolute;
    background:#000;
    border-radius:12px;
    padding:12px 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:600;
    z-index:3;
    width:150px;
  }
  .uxdp-impact__float-icon{
    width:35px;height:35px;border-radius:8px;
    background: var(--uxdp-cream-2);
    color: var(--uxdp-pink);
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
    flex-shrink:0;
  }
  .uxdp-impact__float--tl{ top:6%; left:-2%; }
  .uxdp-impact__float--bl{ bottom:8%; left:-4%; }
  .uxdp-impact__float--tr{ top:8%; right:-4%; }
  .uxdp-impact__float--br{ bottom:12%; right:-2%; }


  /* blob pulse */
@keyframes uxdpImpactBlob{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.1); opacity:.85; }
}
.uxdp-impact__blob{
  animation: uxdpImpactBlob 6s ease-in-out infinite;
}

/* phone entrance + float */
@keyframes uxdpPhoneIn{
  from{ opacity:0; transform: scale(.85) translateY(30px); }
  to{ opacity:1; transform: scale(1) translateY(0); }
}
@keyframes uxdpPhoneFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
.uxdp-impact__phone{
  opacity:0;
  animation: uxdpPhoneIn .8s ease forwards, uxdpPhoneFloat 5s ease-in-out 1s infinite;
}

/* chart line draw */
.uxdp-impact__phone-chart polyline{
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: uxdpChartDraw 1.6s ease forwards 1.2s;
}
@keyframes uxdpChartDraw{
  to{ stroke-dashoffset: 0; }
}

/* floating badges — staggered pop-in + individual float rhythm */
@keyframes uxdpFloatPop{
  from{ opacity:0; transform: translateY(20px) scale(.7); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes uxdpFloatDrift{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.uxdp-impact__float{
  opacity:0;
  animation: uxdpFloatPop .6s ease forwards, uxdpFloatDrift 4s ease-in-out infinite;
}
.uxdp-impact__float--tl{ animation-delay: .3s, 1.5s; }
.uxdp-impact__float--bl{ animation-delay: .5s, 1.8s; }
.uxdp-impact__float--tr{ animation-delay: .7s, 2.1s; }
.uxdp-impact__float--br{ animation-delay: .9s, 2.4s; }

/* left list items — staggered slide-in */
@keyframes uxdpImpactItemIn{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}
.uxdp-impact__item{
  opacity:0;
  animation: uxdpImpactItemIn .6s ease forwards;
}
.uxdp-impact__item:nth-child(1){ animation-delay:.1s; }
.uxdp-impact__item:nth-child(2){ animation-delay:.25s; }
.uxdp-impact__item:nth-child(3){ animation-delay:.4s; }
.uxdp-impact__item:nth-child(4){ animation-delay:.55s; }

/* icon hover pop */
.uxdp-impact__icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.uxdp-impact__item:hover .uxdp-impact__icon{
  transform: scale(1.15) rotate(-6deg);
  background: var(--uxdp-gradient);
  color:#fff;
}
/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 980px){
  .uxdp-hero{ padding: 80px 0 40px; }
  .uxdp-hero__grid{
    display:flex;
    flex-direction:column;
    gap: 40px;
  }
  .uxdp-hero-content{ order:1; }
  .uxdp-hero__visual{
    order:2;
    width:100%;
    overflow:visible;
    min-height:420px;
  }
  .uxdp-hero__title{ font-size: 34px; }
  .uxdp-hero__desc{ font-size: 15px; max-width: 100%; }
  .uxdp-hero__features{ gap: 12px 22px; margin-bottom: 28px; }
  .uxdp-stats{ grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* other sections — unchanged */
  .uxdp-platforms__top{ grid-template-columns:1fr; }
  .uxdp-platform-cards{ grid-template-columns:1fr 1fr; }
  .uxdp-perks{ grid-template-columns: 1fr 1fr; }
  .uxdp-impact__grid{ grid-template-columns:1fr; }
  .uxdp-impact__grid > :not(.uxdp-impact__visual){ order:1; }
  .uxdp-impact__visual{ order:2; }
}

@media (max-width: 640px){
  .uxdp-container{ padding:0 20px; }

  .uxdp-hero{ padding: 70px 0 36px; }
  .uxdp-hero__grid{ gap: 32px; }
  .uxdp-hero__title{ font-size: 27px; line-height: 1.2; margin: 14px 0 14px; }
  .uxdp-hero__desc{ font-size: 13.5px; margin-bottom: 20px; }
  .uxdp-hero__features{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
  }
  .uxdp-hero__feature{ font-size: 13px; }

  .uxdp-stats{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .uxdp-stat{
    padding: 16px 12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .uxdp-stat__num{ font-size: 19px; }
  .uxdp-stat__label{ font-size: 10.5px; }
  .uxdp-stat__icon{ width: 28px; height: 28px; font-size: 13px; margin-bottom: 8px; }

  /* PHONES — no scale(), real size reduced so nothing gets clipped */
  .uxdp-hero__visual{
    min-height: 330px;
    padding: 26px 10px 34px;
    overflow:visible;
  }
  .uxdp-phones{
    width:max-content;
    max-width:100%;
    margin:0 auto;
    transform:none;
  }
  .uxdp-phone{
    width: 130px;
    height: 250px;
    flex:0 0 auto;
    padding: 8px 6px;
    border-radius: 20px;
    border-width: 4px;
    gap: 10px;
  }
  .uxdp-phone--front{
    margin-left: -30px;
    transform: translateY(18px);
  }
  .uxdp-phone--back{
    transform: translateY(-6px) scale(0.96);
  }
  .uxdp-hero__visual:hover .uxdp-phone--front{
    transform: translateY(16px) translateZ(20px);
  }
  .uxdp-hero__visual:hover .uxdp-phone--back{
    transform: translateY(-8px) scale(0.96) translateZ(-10px);
  }

  .uxdp-phone__notch{ width: 40px; height: 10px; }
  .uxdp-phone__status{ font-size: 6px; }
  .uxdp-phone__greeting{ font-size: 7px; margin-top: 4px; }
  .uxdp-phone__name{ font-size: 9px; }
  .uxdp-phone__balance-card{ padding: 7px; margin-top: 5px; border-radius: 9px; }
  .uxdp-phone__balance-label{ font-size: 6px; }
  .uxdp-phone__balance-amount{ font-size: 13px; margin-top: 2px; }
  .uxdp-phone__tx-row{ font-size: 6.5px; padding: 4px 0; }
  .uxdp-phone__tabbar{ padding-top: 5px; }
  .uxdp-phone__tab{ font-size: 6px; }
  .uxdp-phone__cats{ gap: 4px; margin-top: 6px; }
  .uxdp-phone__cat{ padding: 5px 2px; font-size: 5px; border-radius: 7px; }
  .uxdp-phone__cat-ic{ font-size: 9px; }
  .uxdp-phone__promo{ padding: 6px; margin-top: 6px; font-size: 6px; border-radius: 8px; }
  .uxdp-phone__promo strong{ font-size: 8px; margin-bottom: 2px; }
  .uxdp-phone__products{ gap: 4px; margin-top: 6px; }
  .uxdp-phone__product{ padding: 5px 2px; font-size: 5px; border-radius: 6px; }

  .uxdp-badge{ width: 34px; height: 34px; font-size: 6px; border-radius: 10px; gap: 1px; }
  .uxdp-badge__icon{ font-size: 11px; }
  .uxdp-badge--ios{ left:-2%; top:14%; }
  .uxdp-badge--android{ right:-2%; top:14%; }

  /* other sections — unchanged */
  .uxdp-platform-cards{ grid-template-columns:1fr; }
  .uxdp-perks{ grid-template-columns:1fr 1fr; gap:20px 14px; }
  .uxdp-impact__list{ grid-template-columns:1fr; }
  .uxdp-impact__float{ display:none; }
  .uxdp-hero__stats-wrap{ overflow-x:auto; }
}

@media (max-width: 380px){
  .uxdp-hero__title{ font-size: 23px; }
  .uxdp-stats{ grid-template-columns: 1fr 1fr; }
  .uxdp-stat__num{ font-size: 17px; }

  .uxdp-hero__visual{
    min-height:280px;
    padding-top:24px;
    padding-bottom:30px;
    overflow:visible;
  }
  .uxdp-phone{
    width: 108px;
    height: 210px;
    padding: 6px 5px;
    border-width: 3px;
    border-radius: 16px;
  }
  .uxdp-phone--front{
    margin-left: -24px;
    transform: translateY(14px);
  }
  .uxdp-phone__balance-amount{ font-size: 11px; }
  .uxdp-badge{ width: 28px; height: 28px; font-size: 5px; }
  .uxdp-badge__icon{ font-size: 9px; }
  .uxdp-hero__stats-wrap{ overflow-x:auto; }
}

/* =========================================================
   SECTION 3 + SECTION 4 — MOBILE RESPONSIVE FIX
   ========================================================= */
@media (max-width:980px){
  /* Section 3: horizontal desktop flow becomes vertical */
  .uxdp-ecosystem{
    padding:64px 0;
    overflow-x:hidden;
  }
  .uxdp-ecosystem__intro{
    width:100%;
    max-width:100%;
    margin-bottom:38px;
  }
  .uxdp-flow{
    width:100%;
    max-width:100%;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:14px;
  }
  .uxdp-flow__phone{
    width:190px;
    max-width:70vw;
    margin:0 auto;
  }
  .uxdp-flow__arrow{
    width:34px;
    height:34px;
    line-height:34px;
    margin:0 auto;
    font-size:38px;
    transform:rotate(90deg);
  }
  .uxdp-flow__box,
  .uxdp-flow__integrations{
    width:100%;
    max-width:520px;
    margin:0 auto;
  }
  .uxdp-flow__caption{
    width:100%;
    margin-top:18px;
  }

  /* Section 4: text first and image second */
  .uxdp-impact__grid{
    grid-template-columns:1fr;
    gap:38px;
  }
  .uxdp-impact__grid > *{min-width:0;}
  .uxdp-impact__grid > :not(.uxdp-impact__visual){order:1;}
  .uxdp-impact__visual{order:2;}
}

@media (max-width:640px){
  .uxdp-ecosystem{padding:48px 0;}
  .uxdp-ecosystem__intro{margin-bottom:30px;}
  .uxdp-flow{gap:12px;}
  .uxdp-flow__phone{
    width:min(180px,70vw);
    padding:13px 10px;
    border-width:5px;
    border-radius:25px;
  }
  .uxdp-flow__phone-ring{
    width:58px;
    height:58px;
    margin:10px auto;
  }
  .uxdp-flow__arrow{
    width:30px;
    height:30px;
    line-height:30px;
    font-size:34px;
  }
  .uxdp-flow__box,
  .uxdp-flow__integrations{
    max-width:100%;
    padding:16px 14px;
  }
  .uxdp-flow__box-title,
  .uxdp-flow__integrations-title{font-size:16px;}
  .uxdp-flow__box-text{font-size:13.5px;}
  .uxdp-flow__integrations li{font-size:13px;}
  .uxdp-flow__caption{
    font-size:12px;
    line-height:1.5;
  }

  .uxdp-impact{padding:54px 0;}
  .uxdp-impact__grid{gap:28px;}
  .uxdp-impact__desc{
    max-width:100%;
    margin-bottom:26px;
  }
  .uxdp-impact__visual{
    order:2;
    width:100%;
    min-height:390px;
    overflow:hidden;
  }
  .uxdp-impact__blob{width:280px;height:280px;}
  .uxdp-impact__phone{
    width:min(210px,72vw);
    padding:15px 13px;
  }
}

@media (max-width:380px){
  .uxdp-ecosystem{padding:42px 0;}
  .uxdp-flow__phone{width:160px;}
  .uxdp-flow__box,
  .uxdp-flow__integrations{padding:14px 12px;}

  .uxdp-impact__visual{min-height:350px;}
  .uxdp-impact__phone{width:190px;}
  .uxdp-impact__blob{width:240px;height:240px;}
}

/*==================================================
              MVP Developement
==================================================*/


/*==============================================================
                  MVP_Development
==============================================================*/
  /* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --mvpd-ink:#0a0a0d;
    --mvpd-ink-soft:#141319;
    --mvpd-ink-line:#27252f;
    --mvpd-cream:#f6efe2;
    --mvpd-cream-soft:#fbf6ec;
    --mvpd-pink:#ef1568;
    --mvpd-pink-dim:#c01057;
    --mvpd-line-dark:rgba(255,255,255,.22);
    --mvpd-line-cream:#c9bfa4;
    --mvpd-pink-soft:#fbdde9;
    --mvpd-orange:#f2542d;
    --mvpd-orange-soft:#fbdfd0;
    --mvpd-blue:#2f8fff;
    --mvpd-blue-soft:#dcebff;
    --mvpd-teal:#17c9a8;
    --mvpd-teal-soft:#d9f7f0;
    --mvpd-text-dark:#18151b;
    --mvpd-text-dark-muted:#736d7a;
    --mvpd-text-light:#f6f3ee;
    --mvpd-text-light-muted:#a49eae;
    --mvpd-font-display:'Space Grotesk', sans-serif;
    --mvpd-font-body:'Inter', sans-serif;
    --mvpd-radius-lg:20px;
    --mvpd-radius-md:14px;
    --mvpd-radius-sm:8px;
    --mvpd-maxw:1240px;
    /* screen-scene colors (device mockup "photo" area) */
    --mvpd-scene-sky-1:#141a29;
    --mvpd-scene-sky-2:#1d2740;
    --mvpd-scene-sky-3:#293654;
    --mvpd-scene-peak-back:rgba(255,255,255,.08);
    --mvpd-scene-peak-front:rgba(255,255,255,.16);
    --mvpd-purple:#9b5de5;
    --mvpd-purple-soft:#ece1fb;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family:var(--mvpd-font-body);
    color:var(--mvpd-text-dark);
    background:var(--mvpd-cream);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{ display:block; max-width:100%; }
  h1,h2,h3{ font-family:var(--mvpd-font-display); margin:0; }
  p{ margin:0; }
  a{ text-decoration:none; color:inherit; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; }

  .mvpd-wrap{
    max-width:var(--mvpd-maxw);
    margin:0 auto;
    padding:0 48px;
  }

.mvpd-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mvpd-pink);
  margin-bottom:16px;
  padding:6px 14px 6px 6px;
  border:1px solid rgba(239,21,104,.35);
  border-radius:999px;
  background:rgba(239,21,104,.08);
}
.mvpd-eyebrow__icon{
  width:20px; height:20px; border-radius:50%;
  background:var(--mvpd-pink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.mvpd-eyebrow__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--mvpd-pink);
  margin-left:2px;
  animation:mvpdEyebrowPulse 1.6s ease-in-out infinite;
}
@keyframes mvpdEyebrowPulse{
  0%,100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(239,21,104,.5); }
  50%{ opacity:.6; transform:scale(1.3); box-shadow:0 0 0 4px rgba(239,21,104,0); }
}
  .mvpd-eyebrow::before{
    content:"";
    width:16px; height:2px;
    background:var(--mvpd-pink);
    display:inline-block;
    border-radius:2px;
  }

  /* ============================================================
     SCROLL-REVEAL ANIMATION ENGINE
     ============================================================ */
  .mvpd-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.22,.8,.28,1), transform .8s cubic-bezier(.22,.8,.28,1);
    transition-delay:var(--mvpd-delay, 0s);
  }
  .mvpd-reveal.mvpd-is-visible{ opacity:1; transform:translateY(0); }
  .mvpd-reveal--pop{ transform:scale(.92) translateY(10px); }
  .mvpd-reveal--pop.mvpd-is-visible{ transform:scale(1) translateY(0); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .mvpd-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    *{ animation:none !important; }
  }

  /* ============================================================
     SHARED — DEVICE MOCKUP COMPONENT ("scene" = fake webpage)
     ============================================================ */
  .mvpd-scene{
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 82% 14%, rgba(239,21,104,.35), transparent 40%),
      linear-gradient(180deg, var(--mvpd-scene-sky-1) 0%, var(--mvpd-scene-sky-2) 55%, var(--mvpd-scene-sky-3) 100%);
    overflow:hidden;
  }
  .mvpd-scene__peak{
    position:absolute; left:0; right:0; bottom:0; height:62%;
  }
  .mvpd-scene__peak--back{
    background:var(--mvpd-scene-peak-back);
    clip-path:polygon(0% 100%,0% 66%,14% 48%,28% 62%,44% 30%,58% 55%,74% 40%,88% 58%,100% 46%,100% 100%);
  }
  .mvpd-scene__peak--front{
    background:var(--mvpd-scene-peak-front);
    clip-path:polygon(0% 100%,0% 80%,18% 58%,34% 76%,52% 52%,68% 74%,84% 56%,100% 76%,100% 100%);
  }

  .mvpd-mock{ position:relative; width:100%; }
  .mvpd-mock__navbar{
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 5%;
    height:15%;
    background:rgba(8,8,11,.55);
    backdrop-filter:blur(2px);
  }
  .mvpd-mock__brand{
    font-family:var(--mvpd-font-display);
    font-weight:700;
    color:#fff;
    font-size:11px;
  }
  .mvpd-mock__navlinks{
    display:flex; align-items:center; gap:9px;
  }
  .mvpd-mock__navlinks span{
    font-size:6.5px;
    color:var(--mvpd-text-light-muted);
    font-weight:600;
  }
  .mvpd-mock__navlinks em{
    font-style:normal;
    font-size:6.5px;
    font-weight:700;
    color:#fff;
    background:var(--mvpd-pink);
    padding:3px 8px;
    border-radius:20px;
  }
  .mvpd-mock__burger{
    width:16px; height:11px;
    position:relative;
  }
  .mvpd-mock__burger span, .mvpd-mock__burger::before, .mvpd-mock__burger::after{
    content:""; position:absolute; left:0; right:0; height:1.4px; background:#fff; border-radius:2px;
  }
  .mvpd-mock__burger::before{ top:0; }
  .mvpd-mock__burger span{ top:50%; transform:translateY(-50%); }
  .mvpd-mock__burger::after{ bottom:0; }

  .mvpd-mock__body{
    position:relative; z-index:2;
    padding:9% 6% 0;
  }
  .mvpd-mock__headline{
    font-family:var(--mvpd-font-display);
    font-weight:700;
    color:#fff;
    line-height:1.18;
    font-size:15px;
    max-width:62%;
    margin-bottom:9%;
  }
  .mvpd-mock__cta{
    display:inline-block;
    background:var(--mvpd-pink);
    color:#fff;
    font-weight:700;
    font-size:7px;
    letter-spacing:.02em;
    padding:6px 14px;
    border-radius:5px;
    margin-bottom:11%;
  }
  .mvpd-mock__chips{
    display:flex; gap:6%;
  }
  .mvpd-mock__chip{
    flex:1;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:6px;
    padding:7% 6%;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    text-align:center;
  }
  .mvpd-mock__chip svg{ color:var(--mvpd-pink); width:11px; height:11px; }
  .mvpd-mock__chip span{
    font-size:5.6px; font-weight:700; color:var(--mvpd-text-light-muted); line-height:1.3;
  }

  /* size modifiers scale the whole internal typography */
  .mvpd-mock--lg .mvpd-mock__headline{ font-size:19px; }
  .mvpd-mock--lg .mvpd-mock__cta{ font-size:8.5px; padding:8px 18px; }
  .mvpd-mock--sm .mvpd-mock__headline{ font-size:11px; margin-bottom:12%; }
  .mvpd-mock--sm .mvpd-mock__cta{ font-size:6px; padding:4px 10px; }
  .mvpd-mock--sm .mvpd-mock__navlinks{ display:none; }
  .mvpd-mock--xs .mvpd-mock__headline{ font-size:8.5px; margin-bottom:14%; max-width:78%;}
  .mvpd-mock--xs .mvpd-mock__cta{ font-size:5px; padding:3px 8px; }
  .mvpd-mock--xs .mvpd-mock__navlinks{ display:none; }
  .mvpd-mock--xs .mvpd-mock__chips{ gap:8%; }
  .mvpd-mock--xs .mvpd-mock__chip{ padding:9% 5%; }

  /* Laptop frame */
  .mvpd-laptop{ width:100%; filter:drop-shadow(0 30px 46px rgba(0,0,0,.45)); }
  .mvpd-laptop__screen{
    position:relative;
    border:7px solid #16151b;
    border-bottom:none;
    border-radius:12px 12px 0 0;
    aspect-ratio:16/10.4;
    background:#0b0c10;
    overflow:hidden;
  }
  .mvpd-laptop__base{
    height:9px;
    background:linear-gradient(180deg,#232229,#131217);
    border-radius:0 0 4px 4px;
    position:relative;
  }
  .mvpd-laptop__base::after{
    content:"";
    position:absolute; left:50%; top:0; transform:translateX(-50%);
    width:14%; height:4px; background:#34323b; border-radius:0 0 5px 5px;
  }

  /* Tablet frame */
  .mvpd-tablet{ width:100%; filter:drop-shadow(0 24px 40px rgba(0,0,0,.42)); }
  .mvpd-tablet__body{
    position:relative;
    border:7px solid #16151b;
    border-radius:16px;
    aspect-ratio:3/4;
    background:#0b0c10;
    overflow:hidden;
  }
  .mvpd-tablet__body::before{
    content:"";
    position:absolute; top:5px; left:50%; transform:translateX(-50%);
    width:5px; height:5px; border-radius:50%;
    background:#2c2b33; z-index:3;
  }

  /* Phone frame */
  .mvpd-phone{ width:100%; filter:drop-shadow(0 18px 32px rgba(0,0,0,.4)); }
  .mvpd-phone__body{
    position:relative;
    border:6px solid #16151b;
    border-radius:22px;
    aspect-ratio:9/18.5;
    background:#0b0c10;
    overflow:hidden;
  }
  .mvpd-phone__body::before{
    content:"";
    position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:26%; height:5px; border-radius:6px;
    background:#16151b; z-index:3;
  }

  /* ============================================================
     SECTION 1 — HERO
     ============================================================ */
  .mvpd-hero{
    background:
      radial-gradient(ellipse 900px 520px at 84% 6%, rgba(239,21,104,.22), transparent 62%),
      radial-gradient(ellipse 620px 420px at 6% 92%, rgba(239,21,104,.10), transparent 60%),
      var(--mvpd-ink);
    color:var(--mvpd-text-light);
    padding:96px 0 88px;
    position:relative;
    overflow:hidden;
  }
  .mvpd-hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(ellipse 900px 600px at 78% 10%, #000 0%, transparent 70%);
            mask-image:radial-gradient(ellipse 900px 600px at 78% 10%, #000 0%, transparent 70%);
    pointer-events:none;
  }
  .mvpd-hero::after{
    content:"";
    position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(239,21,104,.55), transparent);
  }
  .mvpd-hero__blob{
    position:absolute; border-radius:50%; filter:blur(70px);
    pointer-events:none; z-index:0;
    animation:mvpdDrift 12s ease-in-out infinite;
  }
  .mvpd-hero__blob--a{
    width:380px; height:380px; top:-120px; right:-60px;
    background:radial-gradient(circle, rgba(239,21,104,.32), transparent 70%);
  }
  .mvpd-hero__blob--b{
    width:280px; height:280px; bottom:-90px; right:28%;
    background:radial-gradient(circle, rgba(255,120,170,.16), transparent 70%);
    animation-delay:-4s; animation-duration:15s;
  }
  @keyframes mvpdDrift{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-18px, 22px) scale(1.08); }
  }
  .mvpd-hero__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
    position:relative;
    z-index:1;
  }
 
.mvpd-hero__title{
    font-size:clamp(34px, 4.4vw, 52px);
    line-height:1.06;
    font-weight:700;
    letter-spacing:-.02em;
    margin-bottom:20px;

    position:relative;

    /* Clean white text */
    color:#ffffff;

    /* Remove all blur / glow */
    filter:none;
    text-shadow:none;

    /* No artificial stroke */
    -webkit-text-stroke:0;

    animation:none;
}

.mvpd-hero__title::before{
    display:none;
}
@keyframes mvpdTitleGlow{
  0%,100%{ opacity:.28; }
  50%{ opacity:.55; }
}
  @keyframes mvpdShine{
    0%{ background-position:120% 0; }
    50%{ background-position:0% 0; }
    100%{ background-position:120% 0; }
  }
 .mvpd-hero__title em{
    font-style:normal;

    background:linear-gradient(
        100deg,
        #ef1568 0%,
        #ff4f91 45%,
        #f2542d 100%
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    color:transparent;

    position:relative;
    display:inline;
    
    /* No animation */
    animation:none;

    /* No shadow */
    filter:none;
    text-shadow:none;
}
.mvpd-hero__title em::after{
    display:none;
}
  .mvpd-hero__desc{
    font-size:16px;
    line-height:1.65;
    color: whitesmoke;
    max-width:440px;
    margin-bottom:44px;
    color: grey;
  }
  .mvpd-hero__desc strong{ color: maroon; font-weight:700; }
.mvpd-hero__desc em{ color:var(--mvpd-pink); font-style:normal; font-weight:700; }
  .mvpd-flowRow{ display:flex; align-items:center; gap:0; }
  .mvpd-flowNode{ display:flex; flex-direction:column; align-items:center; text-align:center; width:130px; align-self:flex-start; }
  .mvpd-flowNode__iconWrap{
    position:relative;
    width:64px; height:64px;
    margin-bottom:14px;
    animation:mvpdNodeFloat 4.5s ease-in-out infinite;
  }
  .mvpd-flowNode:nth-child(1) .mvpd-flowNode__iconWrap{ animation-delay:0s; }
  .mvpd-flowNode:nth-child(3) .mvpd-flowNode__iconWrap{ animation-delay:-1.5s; }
  .mvpd-flowNode:nth-child(5) .mvpd-flowNode__iconWrap{ animation-delay:-3s; }
  @keyframes mvpdNodeFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
  }
  .mvpd-flowNode__iconWrap::before{
    content:"";
    position:absolute; inset:-4px;
    border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0%, var(--mvpd-pink) 18%, transparent 38%, transparent 100%);
    opacity:.65;
    animation:mvpdRingSpin 5s linear infinite;
  }
  @keyframes mvpdRingSpin{ to{ transform:rotate(360deg); } }
  .mvpd-flowNode__icon{
    width:64px; height:64px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--mvpd-ink-line);
    background:radial-gradient(circle at 30% 25%, rgba(239,21,104,.14), var(--mvpd-ink-soft) 70%);
    color:var(--mvpd-pink);
    position:absolute; inset:0;
    z-index:1;
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
  }
  .mvpd-flowNode__icon--hex{
    clip-path:polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  }
  .mvpd-flowNode:hover .mvpd-flowNode__icon{
    transform:scale(1.08);
    border-color:var(--mvpd-pink);
    background:radial-gradient(circle at 30% 25%, rgba(239,21,104,.32), var(--mvpd-ink-soft) 75%);
    box-shadow:0 14px 30px -12px rgba(239,21,104,.75), 0 0 0 4px rgba(239,21,104,.08);
  }
  .mvpd-flowNode:hover .mvpd-flowNode__iconWrap::before{ opacity:1; animation-duration:2s; }
  .mvpd-flowNode__label{ font-family:var(--mvpd-font-display); font-weight:700; font-size:13px; letter-spacing:.06em; margin-bottom:8px; }
  .mvpd-flowNode:nth-child(1) .mvpd-flowNode__icon{ color:var(--mvpd-blue); background:radial-gradient(circle at 30% 25%, rgba(47,143,255,.16), var(--mvpd-ink-soft) 70%); }
  .mvpd-flowNode:nth-child(1) .mvpd-flowNode__iconWrap::before{ background:conic-gradient(from 0deg, transparent 0%, var(--mvpd-blue) 18%, transparent 38%, transparent 100%); }
  .mvpd-flowNode:nth-child(1):hover .mvpd-flowNode__icon{ border-color:var(--mvpd-blue); background:radial-gradient(circle at 30% 25%, rgba(47,143,255,.35), var(--mvpd-ink-soft) 75%); box-shadow:0 14px 30px -12px rgba(47,143,255,.75), 0 0 0 4px rgba(47,143,255,.08); }

  .mvpd-flowNode:nth-child(5) .mvpd-flowNode__icon{ color:var(--mvpd-teal); background:radial-gradient(circle at 30% 25%, rgba(23,201,168,.16), var(--mvpd-ink-soft) 70%); }
  .mvpd-flowNode:nth-child(5) .mvpd-flowNode__iconWrap::before{ background:conic-gradient(from 0deg, transparent 0%, var(--mvpd-teal) 18%, transparent 38%, transparent 100%); }
  .mvpd-flowNode:nth-child(5):hover .mvpd-flowNode__icon{ border-color:var(--mvpd-teal); background:radial-gradient(circle at 30% 25%, rgba(23,201,168,.35), var(--mvpd-ink-soft) 75%); box-shadow:0 14px 30px -12px rgba(23,201,168,.75), 0 0 0 4px rgba(23,201,168,.08); }

  .mvpd-flowNode__copy{ font-size:13.5px; line-height:1.5; color: wheat; }
  .mvpd-flowConnector{
    flex:1; height:2px; margin:0 -6px 46px; min-width:20px;
    background-image:repeating-linear-gradient(90deg, var(--mvpd-line-dark) 0 6px, transparent 6px 12px);
    background-size:24px 2px;
    opacity:.6;
    animation:mvpdFlowDash 1.4s linear infinite;
  }
  @keyframes mvpdFlowDash{ to{ background-position:-24px 0; } }

  .mvpd-oneExp{ position:relative; margin-top:34px; display:inline-flex; align-items:center; justify-content:center; width:150px; height:150px; }
  .mvpd-oneExp__orbit{
    position:absolute; inset:0;
    border-radius:50%;
    border:1px dashed rgba(239,21,104,.4);
    animation:mvpdOrbitSpin 14s linear infinite;
  }
  .mvpd-oneExp__orbit::before{
    content:"";
    position:absolute; top:-3px; left:50%; transform:translateX(-50%);
    width:6px; height:6px; border-radius:50%;
    background:var(--mvpd-pink);
    box-shadow:0 0 10px 2px rgba(239,21,104,.8);
  }
  @keyframes mvpdOrbitSpin{ to{ transform:rotate(360deg); } }
  .mvpd-oneExp__badge{
    width:118px; height:118px; border-radius:50%;
    border:1.5px solid var(--mvpd-pink);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:radial-gradient(circle at 40% 30%, rgba(239,21,104,.16), rgba(239,21,104,.04) 70%);
    text-align:center;
    animation:mvpdPulseRing 3.2s ease-in-out infinite;
    position:relative; z-index:2;
  }
  @keyframes mvpdPulseRing{
    0%,100%{ box-shadow:0 0 0 0 rgba(239,21,104,.35), 0 0 24px 2px rgba(239,21,104,.18); }
    50%{ box-shadow:0 0 0 14px rgba(239,21,104,0), 0 0 34px 6px rgba(239,21,104,.3); }
  }
  .mvpd-oneExp__badge strong{ font-family:var(--mvpd-font-display); font-size:16px; font-weight:700; letter-spacing:.02em; color:var(--mvpd-text-light); }
  .mvpd-oneExp__badge span{ font-size:9.5px; letter-spacing:.14em; color:var(--mvpd-pink); font-weight:700; margin-top:3px; }

  /* ---- Hero right-side device stack + circuit connector lines ---- */
  .mvpd-heroStack{
    position:relative;
    min-height:430px;
    perspective:1400px;
    z-index:2;
  }
  .mvpd-heroStack__glow{
    position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
    width:80%; height:60px; border-radius:50%;
    background:radial-gradient(ellipse, rgba(239,21,104,.4), transparent 72%);
    filter:blur(18px);
    z-index:1;
    animation:mvpdGlowPulse 4s ease-in-out infinite;
  }
  @keyframes mvpdGlowPulse{
    0%,100%{ opacity:.55; transform:translateX(-50%) scale(1); }
    50%{ opacity:.9; transform:translateX(-50%) scale(1.06); }
  }
  .mvpd-hero__connectors{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible; display:none; }
  .mvpd-hero__connectors.mvpd-is-ready{ display:block; }
  .mvpd-hero__connectors path{
    fill:none; stroke:var(--mvpd-line-dark); stroke-width:1.6; stroke-dasharray:4 5; opacity:.85;
    stroke-dashoffset:300;
    animation:mvpdDash 3.4s linear infinite;
  }
  @keyframes mvpdDash{ to{ stroke-dashoffset:0; } }
  .mvpd-hero__connectors circle{ fill:var(--mvpd-pink); }
  .mvpd-hero__connectors circle.mvpd-hero__connectorStart{ fill:var(--mvpd-ink); stroke:var(--mvpd-pink); stroke-width:2; }

  .mvpd-heroStack__item{
    position:absolute; z-index:2;
    transform-style:preserve-3d;
    animation:mvpdFloat 6s ease-in-out infinite;
    transition:transform .5s ease, filter .5s ease;
  }
  .mvpd-heroStack__item--laptop{
    top:0; left:0; width:76%; z-index:2;
    transform:rotateY(-9deg) rotateX(3deg);
    animation-delay:0s;
  }
  .mvpd-heroStack__item--tablet{
    top:20%; right:0; width:33%; z-index:3;
    transform:rotateY(-9deg) rotateX(3deg);
    animation-delay:-1.6s;
  }
  .mvpd-heroStack__item--phone{
    bottom:0; right:4%; width:19%; z-index:4;
    transform:rotateY(-9deg) rotateX(3deg);
    animation-delay:-3.2s;
  }
  @keyframes mvpdFloat{
    0%,100%{ margin-top:0; }
    50%{ margin-top:-10px; }
  }
  .mvpd-heroStack:hover .mvpd-heroStack__item{
    filter:drop-shadow(0 20px 30px rgba(239,21,104,.25));
  }
  .mvpd-heroStack:hover .mvpd-heroStack__item--laptop{ transform:rotateY(0deg) rotateX(0deg) scale(1.02); }
  .mvpd-heroStack:hover .mvpd-heroStack__item--tablet{ transform:rotateY(0deg) rotateX(0deg) scale(1.03) translateY(-4px); }
  .mvpd-heroStack:hover .mvpd-heroStack__item--phone{ transform:rotateY(0deg) rotateX(0deg) scale(1.04) translateY(-8px); }

  /* ============================================================
     SECTION 2 — MVP ADVANTAGE
     ============================================================ */
.mvpd-advantage{
  background:var(--mvpd-cream);
  padding:100px 0;
  position:relative;
  overflow:hidden;
}
.mvpd-advantage::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(20,15,10,.08) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 780px 480px at 50% 40%, #000 0%, transparent 72%);
          mask-image:radial-gradient(ellipse 780px 480px at 50% 40%, #000 0%, transparent 72%);
  pointer-events:none;
}
.mvpd-advantage__blob{
  position:absolute; border-radius:50%; filter:blur(80px);
  pointer-events:none; z-index:0;
  animation:mvpdDrift 13s ease-in-out infinite;
}
.mvpd-advantage__blob--a{
  width:340px; height:340px; top:-100px; left:-80px;
  background:radial-gradient(circle, rgba(47,143,255,.26), transparent 70%);
}
.mvpd-advantage__blob--b{
  width:300px; height:300px; bottom:-90px; right:-60px;
  background:radial-gradient(circle, rgba(23,201,168,.24), transparent 70%);
  animation-delay:-5s; animation-duration:16s;
}
.mvpd-advantage__blob--c{
  width:260px; height:260px; top:30%; left:38%;
  background:radial-gradient(circle, rgba(239,21,104,.18), transparent 70%);
  animation-delay:-8s; animation-duration:14s;
}
.mvpd-advantage__blob--d{
  width:220px; height:220px; top:8%; right:12%;
  background:radial-gradient(circle, rgba(242,84,45,.18), transparent 70%);
  animation-delay:-3s; animation-duration:11s;
}

.mvpd-advantage__spotlight{
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(239,21,104,.14), transparent 70%);
  pointer-events:none;
  z-index:0;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .3s ease;
}
.mvpd-advantage__spotlight.mvpd-is-active{ opacity:1; }
  .mvpd-advantage__grid{
    display:grid;
    grid-template-columns:0.82fr 1fr 0.82fr;
    gap:40px;
    align-items:center;
    position:relative;
    z-index:1;
  }
  .mvpd-advantage__title{ font-size:clamp(30px, 3.6vw, 42px); line-height:1.1; font-weight:700; letter-spacing:-.01em; margin-bottom:18px; }
  .mvpd-advantage__desc{ font-size:15.5px; line-height:1.65; color:var(--mvpd-text-dark-muted); max-width:360px; }

  .mvpd-diagram{ position:relative; display:flex; flex-direction:column; align-items:center; gap:0; perspective:1200px; }
  .mvpd-diagram__laptop{
    width:100%; max-width:280px;
    animation:mvpdFloatSoft 5s ease-in-out infinite;
    transition:transform .4s ease, filter .4s ease;
    position: relative;
  }
.mvpd-diagram__laptop::before{
  content:"";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:130%; height:130%; border-radius:50%;
  background:radial-gradient(circle, rgba(239,21,104,.28), transparent 65%);
  filter:blur(30px);
  z-index:-1;
  animation:mvpdHaloPulse 3.4s ease-in-out infinite;
}
@keyframes mvpdHaloPulse{
  0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.08); }
}
.mvpd-diagram__laptop .mvpd-laptop__screen{ position:relative; overflow:hidden; }
.mvpd-diagram__laptop .mvpd-laptop__screen::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  background-size:250% 250%;
  animation:mvpdScreenShine 5s ease-in-out infinite;
  pointer-events:none;
  z-index:5;
}
@keyframes mvpdScreenShine{
  0%{ background-position:130% 130%; }
  50%{ background-position:-30% -30%; }
  100%{ background-position:130% 130%; }
}
  .mvpd-diagram__laptop .mvpd-laptop__screen{ border-color:#1c1a22; }
  .mvpd-diagram:hover .mvpd-diagram__laptop{
    transform:rotateX(4deg) scale(1.03);
    filter:drop-shadow(0 22px 34px rgba(239,21,104,.22));
  }
  @keyframes mvpdFloatSoft{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-7px); }
  }

  .mvpd-pill{
    font-family:var(--mvpd-font-display);
    font-size:11px; font-weight:700; letter-spacing:.08em;
    color:var(--mvpd-pink); background:var(--mvpd-pink-soft);
    border:1px solid var(--mvpd-pink); padding:7px 18px; border-radius:999px;
    white-space:nowrap;
    position:relative;
    box-shadow:0 0 0 0 rgba(239,21,104,.35);
    animation:mvpdPillPulse 2.6s ease-in-out infinite;
  }
  @keyframes mvpdPillPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(239,21,104,.28); }
    50%{ box-shadow:0 0 0 8px rgba(239,21,104,0); }
  }
  .mvpd-diagram__connector{
    width:2px; height:22px;
    background-image:repeating-linear-gradient(180deg, var(--mvpd-line-cream) 0 6px, transparent 6px 12px);
    background-size:2px 24px;
    opacity:.65;
    animation:mvpdFlowDashV 1.2s linear infinite;
  }
  @keyframes mvpdFlowDashV{ to{ background-position:0 -24px; } }

  .mvpd-diagram__branch{ display:flex; justify-content:center; align-items:flex-end; gap:22px; margin:6px 0; }
  .mvpd-diagram__branchItem{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    transition:transform .3s ease, filter .3s ease;
    animation:mvpdFloatSoft 4.5s ease-in-out infinite;
  }
  .mvpd-diagram__branchItem--mobile{ width:15%; animation-delay:-.4s; }
  .mvpd-diagram__branchItem--tablet{ width:22%; animation-delay:-1.6s; }
  .mvpd-diagram__branchItem--desktop{ width:34%; animation-delay:-2.8s; }
  .mvpd-diagram__branchItem:hover{ transform:translateY(-6px) scale(1.04); filter:drop-shadow(0 14px 22px rgba(0,0,0,.18)); }
  .mvpd-diagram__monitor{ width:100%; }
  .mvpd-diagram__monitorScreen{
    position:relative; border:5px solid #1c1a22; border-radius:6px;
    aspect-ratio:16/10.5; background:#0b0c10; overflow:hidden;
  }
  .mvpd-diagram__monitorStand{
    width:26%; height:8px; background:#1c1a22; margin:0 auto; border-radius:0 0 3px 3px;
  }
  .mvpd-diagram__branchLabel{
    font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--mvpd-text-dark-muted);
    padding:3px 9px; border-radius:20px; transition:color .3s ease, background .3s ease;
  }
  .mvpd-diagram__branchItem--mobile .mvpd-diagram__branchLabel{ }
  .mvpd-diagram__branchItem--mobile:hover .mvpd-diagram__branchLabel{ color:var(--mvpd-teal); background:var(--mvpd-teal-soft); }
  .mvpd-diagram__branchItem--tablet:hover .mvpd-diagram__branchLabel{ color:var(--mvpd-pink); background:var(--mvpd-pink-soft); }
  .mvpd-diagram__branchItem--desktop:hover .mvpd-diagram__branchLabel{ color:var(--mvpd-blue); background:var(--mvpd-blue-soft); }

  .mvpd-features{ display:flex; flex-direction:column; gap:26px; }
  .mvpd-featureItem{
  display:flex; gap:16px;
  position:relative;
  padding:9px 11px 9px 14px;
  border-radius:12px;
  transition:background .3s ease, transform .3s ease;
}
.mvpd-featureItem::before{
  content:"";
  position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:3px;
  background:var(--mvpd-pink);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s ease;
}
.mvpd-featureItem:nth-child(1)::before{ background:var(--mvpd-blue); }
.mvpd-featureItem:nth-child(3)::before{ background:var(--mvpd-teal); }
.mvpd-featureItem:nth-child(4)::before{ background:var(--mvpd-orange); }
.mvpd-featureItem:hover{ background:rgba(0,0,0,.035); transform:translateX(4px); }
.mvpd-featureItem:hover::before{ transform:scaleY(1); }
.mvpd-featureItem__num{
  position:absolute; right:14px; top:10px;
  font-family:var(--mvpd-font-display);
  font-weight:700; font-size:11px; letter-spacing:.06em;
  color:var(--mvpd-text-dark-muted); opacity:.5;
}
  .mvpd-featureItem__icon{
    flex:none; width:46px; height:46px; border-radius:50%;
    background:var(--mvpd-pink-soft); color:var(--mvpd-pink);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    transition:transform .35s ease, background .35s ease, box-shadow .35s ease;
  }
  .mvpd-featureItem__icon::before{
    content:""; position:absolute; inset:-5px; border-radius:50%;
    border:1.5px dashed currentColor; opacity:0; transition:opacity .35s ease;
  }
  .mvpd-featureItem:hover .mvpd-featureItem__icon{ transform:scale(1.1) rotate(-6deg); background:var(--mvpd-pink); color:#fff; box-shadow:0 12px 26px -10px rgba(239,21,104,.55); }
  .mvpd-featureItem:hover .mvpd-featureItem__icon::before{ opacity:.5; animation:mvpdRingSpin 6s linear infinite; }
  .mvpd-featureItem:nth-child(1) .mvpd-featureItem__icon{ background:var(--mvpd-blue-soft); color:var(--mvpd-blue); }
  .mvpd-featureItem:nth-child(1):hover .mvpd-featureItem__icon{ background:var(--mvpd-blue); color:#fff; box-shadow:0 12px 26px -10px rgba(47,143,255,.55); }
  .mvpd-featureItem:nth-child(3) .mvpd-featureItem__icon{ background:var(--mvpd-teal-soft); color:var(--mvpd-teal); }
  .mvpd-featureItem:nth-child(3):hover .mvpd-featureItem__icon{ background:var(--mvpd-teal); color:#fff; box-shadow:0 12px 26px -10px rgba(23,201,168,.55); }
  .mvpd-featureItem:nth-child(4) .mvpd-featureItem__icon{ background:var(--mvpd-orange-soft); color:var(--mvpd-orange); }
  .mvpd-featureItem:nth-child(4):hover .mvpd-featureItem__icon{ background:var(--mvpd-orange); color:#fff; box-shadow:0 12px 26px -10px rgba(242,84,45,.55); }
  .mvpd-featureItem__title{ font-family:var(--mvpd-font-display); font-size:16.5px; font-weight:700; margin-bottom:5px; color: #000 }
  .mvpd-featureItem__copy{ font-size:13.5px; line-height:1.55; color:var(--mvpd-text-dark-muted); }

  .mvpd-diagram{ transition:transform .15s ease-out; transform-style:preserve-3d; }
.mvpd-diagram__laptop{ transition:transform .15s ease-out, filter .3s ease; }
.mvpd-diagram__branchItem{ transition:transform .15s ease-out, filter .3s ease; }
  /* ============================================================
     SECTION 3 — INSIDE THE MVP DEVELOPMENT PROCESS
     ============================================================ */
  .mvpd-inside{ background:var(--mvpd-ink); color:var(--mvpd-text-light); padding:100px 0 0; }
  .mvpd-inside__top{ display:grid; grid-template-columns:0.85fr 1.3fr; gap:30px; align-items:center; padding-bottom:80px; }
 .mvpd-inside__title{
  font-size:clamp(30px, 3.6vw, 42px);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:18px;
  background:linear-gradient(100deg, var(--mvpd-orange) 0%, var(--mvpd-pink) 45%, var(--mvpd-purple) 90%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:mvpdShine 8s ease-in-out infinite;
}
  .mvpd-inside__desc{ font-size:16.5px; line-height:1.65; color: #fff; max-width:380px; }

  .mvpd-layerDiagram{ display:grid; grid-template-columns:1fr 1.1fr 1fr; align-items:center; gap:6px; }
  .mvpd-layerCol{ display:flex; flex-direction:column; gap:36px; }
  .mvpd-layerCol--right{ align-items:flex-end; text-align:right; }
  .mvpd-layerNote{ display:flex; gap:12px; max-width:180px; position:relative; }
  .mvpd-layerCol--right .mvpd-layerNote{ flex-direction:row-reverse; }
  .mvpd-layerNote__icon{
    flex:none; width:38px; height:38px; border-radius:10px;
    border:1.5px solid var(--mvpd-ink-line); background:var(--mvpd-ink-soft);
    color:var(--mvpd-pink); display:flex; align-items:center; justify-content:center;
    transition:border-color .3s ease, transform .3s ease; position:relative;
  }
  .mvpd-layerNote__icon::after{
    content:""; position:absolute; top:50%; width:16px; height:0;
    border-top:2px dotted var(--mvpd-line-dark); opacity:.6;
  }
  .mvpd-layerCol .mvpd-layerNote__icon::after{ right:-16px; }
  .mvpd-layerCol--right .mvpd-layerNote__icon::after{ left:-16px; }
  .mvpd-layerNote:hover .mvpd-layerNote__icon{ transform:translateY(-3px); }
  .mvpd-layerCol:nth-child(1) .mvpd-layerNote:nth-child(1) .mvpd-layerNote__icon{ color:var(--mvpd-blue); }
  .mvpd-layerCol:nth-child(1) .mvpd-layerNote:nth-child(1):hover .mvpd-layerNote__icon{ border-color:var(--mvpd-blue); }
  .mvpd-layerCol:nth-child(1) .mvpd-layerNote:nth-child(2):hover .mvpd-layerNote__icon{ border-color:var(--mvpd-pink); }
  .mvpd-layerCol--right .mvpd-layerNote:nth-child(1) .mvpd-layerNote__icon{ color:var(--mvpd-teal); }
  .mvpd-layerCol--right .mvpd-layerNote:nth-child(1):hover .mvpd-layerNote__icon{ border-color:var(--mvpd-teal); }
  .mvpd-layerCol--right .mvpd-layerNote:nth-child(2) .mvpd-layerNote__icon{ color:var(--mvpd-orange); }
  .mvpd-layerCol--right .mvpd-layerNote:nth-child(2):hover .mvpd-layerNote__icon{ border-color:var(--mvpd-orange); }
  .mvpd-layerNote__title{ font-family:var(--mvpd-font-display); font-size:15.5px; font-weight:700; margin-bottom:3px; }
  .mvpd-layerNote__copy{ font-size:14.5px; line-height:1.5; color:var(--mvpd-text-light-muted); }

  .mvpd-brandLaptop{ width:100%; max-width:340px; margin:0 auto; }
  .mvpd-brandLaptop .mvpd-laptop__screen{
    background:
      radial-gradient(circle at 50% 45%, rgba(239,21,104,.35), transparent 62%),
      #0b0a10;
    display:flex; align-items:center; justify-content:center;
    border-color:#201d28;
    overflow: hidden;
  }
  .mvpd-brandLaptop .mvpd-laptop__screen::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px);
  pointer-events:none; z-index:4;
}
.mvpd-brandLaptop .mvpd-laptop__screen::after{
  content:"";
  position:absolute; left:0; right:0; height:24%;
  background:linear-gradient(180deg, transparent, rgba(239,21,104,.4), transparent);
  filter:blur(2px);
  pointer-events:none; z-index:5;
  animation:mvpdScanMove 3s linear infinite;
}
@keyframes mvpdScanMove{
  0%{ transform:translateY(-40%); }
  100%{ transform:translateY(420%); }
}
  .mvpd-brandLaptop__mark{
    font-family:var(--mvpd-font-display); font-weight:700;
    font-size:15%;
    color:transparent;
    background:linear-gradient(90deg,#ff4f93,var(--mvpd-pink));
    -webkit-background-clip:text; background-clip:text;
    letter-spacing:.04em;
    text-shadow:0 0 30px rgba(239,21,104,.4);
    position:relative;
  }
  .mvpd-brandLaptop__mark::after{
    content:""; position:absolute; left:8%; right:8%; bottom:-18%; height:2px;
    background:linear-gradient(90deg, transparent, var(--mvpd-pink), transparent);
    opacity:.7;
  }

  .mvpd-stripBar{ border-top:1px solid var(--mvpd-ink-line); background:var(--mvpd-ink-soft); padding:26px 0; margin-top:0; }
  .mvpd-stripList{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0; }
  .mvpd-stripItem{
    display:flex; align-items:center; gap:10px; padding:6px 28px;
    font-size:13.5px; font-weight:600; color:var(--mvpd-text-light);
    border-right:1px solid var(--mvpd-ink-line); transition:color .3s ease;
  }
  .mvpd-stripItem:last-child{ border-right:none; }
  .mvpd-stripItem svg{ flex:none; transition:transform .3s ease, color .3s ease, filter .3s ease; }
.mvpd-stripItem:hover svg{ transform:scale(1.25) rotate(-6deg); }
.mvpd-stripItem:nth-child(1) svg{ color:var(--mvpd-blue); }
.mvpd-stripItem:nth-child(1):hover svg{ filter:drop-shadow(0 0 8px rgba(47,143,255,.7)); }
.mvpd-stripItem:nth-child(2) svg{ color:var(--mvpd-pink); }
.mvpd-stripItem:nth-child(2):hover svg{ filter:drop-shadow(0 0 8px rgba(239,21,104,.7)); }
.mvpd-stripItem:nth-child(3) svg{ color:var(--mvpd-teal); }
.mvpd-stripItem:nth-child(3):hover svg{ filter:drop-shadow(0 0 8px rgba(23,201,168,.7)); }
.mvpd-stripItem:nth-child(4) svg{ color:var(--mvpd-orange); }
.mvpd-stripItem:nth-child(4):hover svg{ filter:drop-shadow(0 0 8px rgba(242,84,45,.7)); }
.mvpd-stripItem:nth-child(5) svg{ color:var(--mvpd-purple); }
.mvpd-stripItem:nth-child(5):hover svg{ filter:drop-shadow(0 0 8px rgba(155,93,229,.7)); }
.mvpd-stripItem:hover{ color:var(--mvpd-text-light); }

  .mvpd-layerWire{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
.mvpd-layerWire path{
  fill:none; stroke-width:1.8; stroke-dasharray:5 6; stroke-dashoffset:200;
  opacity:.85; animation:mvpdDash 2.2s linear infinite;
  stroke-linecap:round;
}
.mvpd-layerWire circle{ opacity:.9; }
.mvpd-layerWire .mvpd-wire-blue{ stroke:var(--mvpd-blue); filter:drop-shadow(0 0 5px rgba(47,143,255,.65)); }
.mvpd-layerWire .mvpd-wire-pink{ stroke:var(--mvpd-pink); filter:drop-shadow(0 0 5px rgba(239,21,104,.65)); }
.mvpd-layerWire .mvpd-wire-teal{ stroke:var(--mvpd-teal); filter:drop-shadow(0 0 5px rgba(23,201,168,.65)); }
.mvpd-layerWire .mvpd-wire-orange{ stroke:var(--mvpd-orange); filter:drop-shadow(0 0 5px rgba(242,84,45,.65)); }
.mvpd-layerWire circle.mvpd-wire-blue{ fill:var(--mvpd-blue); }
.mvpd-layerWire circle.mvpd-wire-pink{ fill:var(--mvpd-pink); }
.mvpd-layerWire circle.mvpd-wire-teal{ fill:var(--mvpd-teal); }
.mvpd-layerWire circle.mvpd-wire-orange{ fill:var(--mvpd-orange); }
.mvpd-layerDiagram{ position:relative; }

  /* ============================================================
     SECTION 4 — BUILT AROUND YOUR USERS
     ============================================================ */
  .mvpd-journey{background: linear-gradient(160deg, var(--mad-cream) 0%, #f9d9e4 50%, #fce0c8 100%);padding:80px 0 90px; }
  .mvpd-journey__header{ max-width:640px; margin:0 0 64px; }
  .mvpd-journey__title{ font-size:clamp(28px, 3.4vw, 38px); line-height:1.15; font-weight:700; letter-spacing:-.01em; color: #000;}

  .mvpd-steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; position:relative; }
  .mvpd-step{ position:relative; }
  .mvpd-step__icon{
    width:82px; height:82px; border-radius:50%;
    background: linear-gradient(135deg, var(--mad-pink), #f6923a);
    display:flex; align-items:center; justify-content:center; margin-bottom:22px;
    position:relative; transition:transform .35s ease, box-shadow .35s ease;
  }
  .mvpd-step:nth-child(2) .mvpd-step__icon,
  .mvpd-step:nth-child(4) .mvpd-step__icon{ background: #000; color:var(--mvpd-orange); }
  .mvpd-step:hover .mvpd-step__icon{ transform:translateY(-5px); box-shadow:0 14px 28px -14px rgba(0,0,0,.25); }
  .mvpd-step__num{ font-family:var(--mvpd-font-display); font-weight:900; font-size:14px; color:var(--mvpd-orange); letter-spacing:.06em; margin-bottom:4px; display:block; }
  .mvpd-step:nth-child(1) .mvpd-step__num, .mvpd-step:nth-child(3) .mvpd-step__num{ color:var(--mvpd-pink); }
  .mvpd-step__title{ font-family:var(--mvpd-font-display); font-weight:700; font-size:20px;color: #000; letter-spacing:.03em; margin-bottom:10px; text-transform:uppercase; }
  .mvpd-step__copy{ font-size:15.5px; line-height:1.55; color: maroon; max-width:230px; }

  .mvpd-journey__divider{ display:flex; align-items:center; margin:70px 0 46px; }
  .mvpd-journey__divider::before, .mvpd-journey__divider::after{ content:""; flex:1; height:1px; background:linear-gradient(to right, transparent, #d8cdb8, transparent); }
  .mvpd-journey__dividerDot{ width:9px; height:9px; border-radius:50%; background:var(--mvpd-pink); margin:0 14px; flex:none; }

  .mvpd-journey__closing{
    text-align:center; font-family:var(--mvpd-font-display); font-size:clamp(17px, 2vw, 21px);
    line-height:1.55; font-weight:500; color:var(--mvpd-text-dark); max-width:760px; margin:0 auto;
  }

  /* =========================================================
   MVP DEVELOPMENT — FINAL MOBILE RESPONSIVE ONLY
   Paste AFTER the complete desktop CSS.
   ========================================================= */

@media screen and (max-width: 768px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .mvpd-wrap{
    width:100%;
    max-width:100%;
    padding:0 16px;
  }

  .mvpd-hero,
  .mvpd-advantage,
  .mvpd-inside,
  .mvpd-journey{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  /* SECTION 1 */
  .mvpd-hero{padding:52px 0 46px; padding-top: 90px !important;}
  .mvpd-hero__grid{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:38px;
  }
  .mvpd-hero__grid > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .mvpd-hero__title{
    width:100%;
    max-width:100%;
    font-size:clamp(30px,9vw,38px);
    line-height:1.12;
    overflow-wrap:anywhere;
  }
  .mvpd-hero__desc{
    width:100%;
    max-width:100%;
    margin-bottom:32px;
    font-size:14px;
  }
  .mvpd-flowRow{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:8px;
  }
  .mvpd-flowNode{
    width:100%;
    min-width:0;
  }
  .mvpd-flowConnector{display:none;}
  .mvpd-flowNode__iconWrap,
  .mvpd-flowNode__icon{
    width:52px;
    height:52px;
  }
  .mvpd-flowNode__label{font-size:11px;}
  .mvpd-flowNode__copy{
    width:100%;
    padding:0 2px;
    font-size:10.5px;
    overflow-wrap:anywhere;
  }
  .mvpd-oneExp{
    display:flex;
    width:130px;
    height:130px;
    margin:30px auto 0;
  }
  .mvpd-oneExp__badge{width:104px;height:104px;}
  .mvpd-heroStack{
    width:100%;
    min-height:280px;
    margin:0;
    order:2;
  }
  .mvpd-heroStack__item--laptop{left:1%;width:73%;}
  .mvpd-heroStack__item--tablet{right:1%;width:33%;}
  .mvpd-heroStack__item--phone{right:7%;width:19%;}

  /* SECTION 2 */
  .mvpd-advantage{padding:52px 0;}
  .mvpd-advantage__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:34px;
    text-align:left;
  }
  .mvpd-advantage__grid > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .mvpd-advantage__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .mvpd-advantage__desc{max-width:100%;}
  .mvpd-diagram{
    width:100%;
    max-width:340px;
    margin:0 auto;
  }
  .mvpd-diagram__laptop{width:78%;max-width:250px;}
  .mvpd-diagram__branch{
    width:100%;
    max-width:320px;
    gap:10px;
  }
  .mvpd-diagram__branchItem--mobile{width:18%;}
  .mvpd-diagram__branchItem--tablet{width:26%;}
  .mvpd-diagram__branchItem--desktop{width:39%;}
  .mvpd-pill{font-size:9px;padding:6px 12px;}
  .mvpd-features{width:100%;gap:18px;}
  .mvpd-featureItem{
    display:flex;
    width:100%;
    max-width:100%;
    gap:12px;
    padding:10px 8px 10px 12px;
  }
  .mvpd-featureItem__icon{width:42px;height:42px;}
  .mvpd-featureItem__title{font-size:15px;}
  .mvpd-featureItem__copy{font-size:13px;}

  /* SECTION 3 */
  .mvpd-inside{padding:52px 0 0;}
  .mvpd-inside__top{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:14px;
    padding-bottom:40px;
  }
  .mvpd-inside__top > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .mvpd-inside__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .mvpd-inside__desc{max-width:100%;font-size:14.5px;}
  .mvpd-layerDiagram{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:24px;
  }
  .mvpd-layerDiagram > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .mvpd-brandLaptop{
    order:1;
    width:100%;
    max-width:300px;
    margin:0 auto 8px;
  }
  .mvpd-layerCol,
  .mvpd-layerCol--right{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    gap:16px;
    align-items:start;
    text-align:left;
  }
  .mvpd-layerCol{order:2;}
  .mvpd-layerCol--right{order:3;}
  .mvpd-layerNote,
  .mvpd-layerCol--right .mvpd-layerNote{
    display:flex;
    flex-direction:row;
    width:100%;
    max-width:100%;
    gap:10px;
  }
  .mvpd-layerNote__icon::after,
  .mvpd-layerWire{display:none;}
  .mvpd-layerNote__title{font-size:14px;}
  .mvpd-layerNote__copy{font-size:12.5px;}
  .mvpd-stripBar{padding:22px 0;}
  .mvpd-stripList{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    gap:10px;
  }
  .mvpd-stripItem{
    width:100%;
    min-width:0;
    padding:8px 6px;
    border-right:0;
    font-size:12px;
  }

  /* SECTION 4 */
  .mvpd-journey{padding:52px 0;}
  .mvpd-journey__header{
    width:100%;
    max-width:100%;
    margin-bottom:36px;
  }
  .mvpd-journey__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .mvpd-steps{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:28px;
  }
  .mvpd-step{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    width:100%;
    column-gap:14px;
    align-items:start;
  }
  .mvpd-step__icon{
    grid-row:1 / span 3;
    width:64px;
    height:64px;
    margin:0;
  }
  .mvpd-step__num,
  .mvpd-step__title,
  .mvpd-step__copy{grid-column:2;}
  .mvpd-step__title{font-size:17px;margin-bottom:5px;}
  .mvpd-step__copy{max-width:100%;font-size:13.5px;}
  .mvpd-journey__divider{margin:42px 0 30px;}
  .mvpd-journey__closing{font-size:16px;}
}

@media screen and (max-width:380px){
  .mvpd-wrap{padding:0 12px;}
  .mvpd-hero__title{font-size:28px;}
  .mvpd-flowNode__iconWrap,
  .mvpd-flowNode__icon{width:46px;height:46px;}
  .mvpd-flowNode__label{font-size:10px;}
  .mvpd-flowNode__copy{font-size:9.5px;}
  .mvpd-heroStack{min-height:240px;}
  .mvpd-layerCol,
  .mvpd-layerCol--right,
  .mvpd-stripList{grid-template-columns:minmax(0,1fr);}
  .mvpd-step{grid-template-columns:56px minmax(0,1fr);}
  .mvpd-step__icon{width:56px;height:56px;}
}

/* ============================================================
   MVP HERO IMAGE + QUOTE CARD
   ============================================================ */

.mvpd-hero__connectors,
.mvpd-heroStack__item{
  display:none !important;
}

.mvpd-heroStack{
  display:flex;
  align-items:center;
  justify-content:center;
}

.mvpd-heroImageWrap{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:600px;
  margin:0 auto;
}

.mvpd-heroImage{
  display:block;
  width:100%;
  max-width:560px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 28px 45px rgba(17,20,45,.18));
  animation:mvpdHeroImageFloat 5s ease-in-out infinite;
}

@keyframes mvpdHeroImageFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}

.mvpd-evolve-quote-card{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:980px;
  margin:44px auto 0;
  padding:23px 28px 20px;
  overflow:hidden;
  text-align:center;
  background: #000;
  border:1px solid rgba(113,75,255,.14);
  border-radius:24px;
  box-shadow:0 24px 65px rgba(30,22,65,.1),0 8px 24px rgba(122,75,255,.07);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

[data-mvpd-reveal]{
  opacity:0;
  transform:translateY(22px);
}

[data-mvpd-reveal].mvpd-is-visible{
  opacity:1;
  transform:translateY(0);
}

.mvpd-evolve-quote-card[data-mvpd-reveal]{
  transition:opacity .7s ease,transform .7s ease,box-shadow .35s ease,border-color .35s ease;
}

.mvpd-evolve-quote-card::before,
.mvpd-evolve-quote-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:270px;
  height:270px;
  border-radius:50%;
  pointer-events:none;
}

.mvpd-evolve-quote-card::before{
  top:-135px;
  left:-105px;
  background:radial-gradient(circle,rgba(113,75,255,.16),transparent 70%);
}

.mvpd-evolve-quote-card::after{
  right:-105px;
  bottom:-145px;
  background:radial-gradient(circle,rgba(255,76,145,.14),transparent 70%);
}

.mvpd-evolve-quote-card:hover{
  transform:translateY(-5px);
  border-color:rgba(113,75,255,.28);
  box-shadow:0 30px 72px rgba(30,22,65,.14),0 12px 28px rgba(122,75,255,.1);
}

.mvpd-evolve-quote-mark{
  display:block;
  width:44px;
  height:44px;
  margin:0 auto 18px;
  color:#774cff;
  filter:drop-shadow(0 7px 15px rgba(119,76,255,.22));
}

.mvpd-evolve-quote{
  max-width:820px;
  margin:0 auto;
  color:#fff;
  font-size:clamp(19px,2vw,28px);
  font-weight:600;
  line-height:1.55;
  letter-spacing:-.35px;
}

.mvpd-accent-word{
  color:transparent;
  background:linear-gradient(90deg,#7047f5,#a742e8 50%,#ed427f);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

@media screen and (max-width:980px){
  .mvpd-heroStack{min-height:auto;padding:20px 0;}
  .mvpd-heroImageWrap{max-width:520px;}
  .mvpd-heroImage{max-width:500px;}
}

@media screen and (max-width:640px){
  .mvpd-heroStack{width:100%;padding:12px 0 20px;overflow:visible;}
  .mvpd-heroImageWrap{max-width:100%;padding:0 6px;}
  .mvpd-heroImage{max-width:370px;}

  .mvpd-evolve-quote-card{
    max-width:100%;
    margin-top:38px;
    padding:34px 22px 32px;
    border-radius:19px;
  }

  .mvpd-evolve-quote-mark{width:36px;height:36px;margin-bottom:15px;}
  .mvpd-evolve-quote{font-size:17px;line-height:1.6;}
}

@media screen and (max-width:380px){
  .mvpd-heroImage{max-width:310px;}
  .mvpd-evolve-quote-card{padding:28px 17px 27px;}
  .mvpd-evolve-quote{font-size:16px;}
}

@media (prefers-reduced-motion:reduce){
  .mvpd-heroImage,
  .mvpd-evolve-quote-card{
    animation:none !important;
    transition:none !important;
  }
}


/*========================================================
             Full Scale Product Engineering
========================================================*/



/*
========================================================
         Full-Scale Product Engineering
========================================================*/

/* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --fspe-bg-dark:#0a0a0c;
    --fspe-bg-dark-2:#100c0e;
    --fspe-bg-cream:#faf3ee;
    --fspe-card-dark:#141010;
    --fspe-card-dark-border:#241c1c;
    --fspe-accent:#ff2f6e;
    --fspe-accent-2:#ff8a4c;
    --fspe-accent-soft:rgba(255,47,110,.14);
    --fspe-text-light:#f6f1ee;
    --fspe-text-light-muted:#a79e9c;
    --fspe-text-dark:#1c1616;
    --fspe-text-dark-muted:#6f6462;
    --fspe-line:rgba(255,255,255,.09);
    --fspe-line-dark:rgba(28,22,22,.1);
    --fspe-radius:20px;
    --fspe-font-display:'Manrope', sans-serif;
    --fspe-font-body:'Inter', sans-serif;
    --fspe-font-mono:'IBM Plex Mono', monospace;
    --fspe-ease:cubic-bezier(.16,.8,.28,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--fspe-font-body);
    background:var(--fspe-bg-cream);
    color:var(--fspe-text-dark);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  .fspe-wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

  .fspe-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--fspe-font-mono);
    font-size:12.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--fspe-accent);
    margin-bottom:18px;
    margin-top: 40px;
  }
  .fspe-eyebrow::before{
    content:""; width:16px; height:2px; background:var(--fspe-accent); border-radius:2px;
  }
  .fspe-eyebrow-num{color:inherit; opacity:.55; font-weight:600;}

  h1,h2,h3{font-family:var(--fspe-font-display); font-weight:600; letter-spacing:-.02em;}

  /* reveal-on-scroll base */
  [data-fspe-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--fspe-ease), transform .8s var(--fspe-ease);}
  [data-fspe-reveal].fspe-in{opacity:1; transform:translateY(0);}
  [data-fspe-reveal="stagger"] > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--fspe-ease), transform .7s var(--fspe-ease);}
  [data-fspe-reveal="stagger"].fspe-in > *{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    [data-fspe-reveal], [data-fspe-reveal="stagger"] > *{opacity:1 !important; transform:none !important;}
  }
/*==============================================
        Full-Scale Product Engineering Development
==============================================*/

 /* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --fspe-bg-dark:#0a0a0c;
    --fspe-bg-dark-2:#100c0e;
    --fspe-bg-cream:#faf3ee;
    --fspe-card-dark:#141010;
    --fspe-card-dark-border:#241c1c;
    --fspe-accent:#ff2f6e;
    --fspe-accent-2:#ff8a4c;
    --fspe-accent-soft:rgba(255,47,110,.14);
    --fspe-text-light:#f6f1ee;
    --fspe-text-light-muted:#a79e9c;
    --fspe-text-dark:#1c1616;
    --fspe-text-dark-muted:#6f6462;
    --fspe-line:rgba(255,255,255,.09);
    --fspe-line-dark:rgba(28,22,22,.1);
    --fspe-radius:20px;
    --fspe-font-display:'Manrope', sans-serif;
    --fspe-font-body:'Inter', sans-serif;
    --fspe-font-mono:'IBM Plex Mono', monospace;
    --fspe-ease:cubic-bezier(.16,.8,.28,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--fspe-font-body);
    background:var(--fspe-bg-cream);
    color:var(--fspe-text-dark);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  .fspe-wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

  .fspe-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--fspe-font-mono);
    font-size:12.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--fspe-accent);
    margin-bottom:18px;
  }
  .fspe-eyebrow::before{
    content:""; width:16px; height:2px; background:var(--fspe-accent); border-radius:2px;
  }
  .fspe-eyebrow-num{color:inherit; opacity:.55; font-weight:600;}

  h1,h2,h3{font-family:var(--fspe-font-display); font-weight:600; letter-spacing:-.02em;}

  /* reveal-on-scroll base */
  [data-fspe-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--fspe-ease), transform .8s var(--fspe-ease);}
  [data-fspe-reveal].fspe-in{opacity:1; transform:translateY(0);}
  [data-fspe-reveal="stagger"] > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--fspe-ease), transform .7s var(--fspe-ease);}
  [data-fspe-reveal="stagger"].fspe-in > *{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    [data-fspe-reveal], [data-fspe-reveal="stagger"] > *{opacity:1 !important; transform:none !important;}
  }

  /* ============================================================
     HERO SECTION
     ============================================================ */
  .fspe-hero{
    position:relative;
    background:radial-gradient(120% 100% at 82% 0%, #1c0f13 0%, var(--fspe-bg-dark) 55%), var(--fspe-bg-dark);
    color:var(--fspe-text-light);
    padding:70px 0 60px;
    overflow:hidden;
  }
  .fspe-hero::before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(60% 55% at 72% 25%, rgba(255,47,110,.16), transparent 65%),
               radial-gradient(45% 40% at 15% 85%, rgba(255,138,76,.10), transparent 70%);
    pointer-events:none;
  }
  .fspe-hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr;
    gap:56px; align-items:center; position:relative; z-index:1;
  }

  .fspe-hero-title{
    position:relative;
    font-family:var(--fspe-font-display);
    font-weight:800;
    font-size: 45px;
    line-height:1.0;
    letter-spacing:-.035em;
    margin-bottom:24px;
  }
  .fspe-hero-title .fspe-line{
    display:block; opacity:0; transform:translateY(20px);
    animation:fspe-title-in .8s var(--fspe-ease) forwards;
  }
  .fspe-hero-title .fspe-line:nth-child(1){animation-delay:.05s;}
  .fspe-hero-title .fspe-line:nth-child(2){animation-delay:.22s;}
  @keyframes fspe-title-in{
    to{opacity:1; transform:translateY(0);}
  }
  .fspe-hero-title .fspe-accent-word{
  background:linear-gradient(97deg, var(--fspe-accent) 0%, var(--fspe-accent-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
  display:inline-block;
  text-shadow:0 0 24px rgba(255,47,110,.35), 0 0 44px rgba(255,138,76,.18);
}
  @media (prefers-reduced-motion: reduce){
    .fspe-hero-title .fspe-line{opacity:1; transform:none; animation:none;}
  }

  .fspe-hero-para{
    font-size:18.5px; line-height:1.7;
    color: whitesmoke;
    max-width:480px;
    margin-bottom:28px;
  }

  .fspe-hero-platform-sep{width:3px; height:3px; border-radius:50%; background:var(--fspe-text-light-muted); opacity:.5; flex:none;}

  .fspe-hero-cta{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    margin-bottom:48px;
  }
  .fspe-hero-btn{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--fspe-font-body); font-size:14.5px; font-weight:600;
    padding:14px 28px; border-radius:999px;
    text-decoration:none; cursor:pointer; border:none;
    transition:transform .35s var(--fspe-ease), box-shadow .35s var(--fspe-ease), background .35s var(--fspe-ease);
  }
  .fspe-hero-btn svg{width:16px; height:16px; transition:transform .35s var(--fspe-ease);}
  .fspe-hero-btn--primary{
    background:linear-gradient(97deg, var(--fspe-accent), var(--fspe-accent-2));
    color:#0a0505;
    box-shadow:0 16px 34px -12px rgba(255,47,110,.55);
  }
  .fspe-hero-btn--primary:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 42px -12px rgba(255,47,110,.7);
  }
  .fspe-hero-btn--primary:hover svg{transform:translateX(3px);}
  .fspe-hero-btn--ghost{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.16);
    color:var(--fspe-text-light);
  }
  .fspe-hero-btn--ghost:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.3);
  }

  .fspe-hero-orbit-panel{
    position:relative;
  }
  .fspe-hero-orbit-eyebrow{
    font-family:var(--fspe-font-mono); font-size:14.5px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase;
    color: whitesmoke;
    margin-bottom:16px;
  }
  .fspe-hero-orbit{
    display:flex; align-items:flex-start; gap:2px; position:relative;
  }
  .fspe-hero-orbit-item{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    width:82px; flex:none;
  }
  .fspe-hero-orbit-circle{
    --glow: var(--item-color, var(--fspe-accent));
    width:60px; height:60px; border-radius:50%;
    background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.06), rgba(0,0,0,.4));
    border:1.5px solid var(--glow);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    color:var(--glow);
    position:relative; z-index:2;
    box-shadow:0 0 0 0 transparent;
    animation:fspe-badge-pulse 3.2s ease-in-out infinite;
    transition:transform .4s var(--fspe-ease);
  }
  .fspe-hero-orbit-item:nth-child(1) .fspe-hero-orbit-circle{animation-delay:0s;}
  .fspe-hero-orbit-item:nth-child(3) .fspe-hero-orbit-circle{animation-delay:.5s;}
  .fspe-hero-orbit-item:nth-child(5) .fspe-hero-orbit-circle{animation-delay:1s;}
  .fspe-hero-orbit-item:nth-child(7) .fspe-hero-orbit-circle{animation-delay:1.5s;}
  .fspe-hero-orbit-item:nth-child(9) .fspe-hero-orbit-circle{animation-delay:2s;}
  @keyframes fspe-badge-pulse{
    0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--glow) 45%, transparent);}
    50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--glow) 0%, transparent);}
  }
  .fspe-hero-orbit-item:hover .fspe-hero-orbit-circle{
    transform:translateY(-5px) scale(1.08);
    background:var(--glow);
    color:#0a0a0a;
  }
  .fspe-hero-orbit-circle svg{width:22px; height:22px;}
  .fspe-hero-orbit-label{
    font-family:var(--fspe-font-mono);
    font-size:14.5px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--fspe-text-light);
    margin-bottom:5px;
  }
  .fspe-hero-orbit-desc{
    font-size:12px; line-height:1.4; color:var(--fspe-text-light-muted);
  }
  .fspe-hero-orbit-arrow{
    flex:none; align-self:flex-start;
    margin-top:22px;
    width:24px; height:14px;
    position:relative; overflow:hidden;
  }
  .fspe-hero-orbit-arrow svg{
    width:24px; height:14px; color:rgba(255,255,255,.28);
    animation:fspe-arrow-flow 1.8s ease-in-out infinite;
  }
  @keyframes fspe-arrow-flow{
    0%,100%{transform:translateX(0); opacity:.5;}
    50%{transform:translateX(4px); opacity:1;}
  }

  .fspe-hero-visual{
    position:relative;
    animation:fspe-float 7s ease-in-out infinite;
  }
  @keyframes fspe-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
  }
  .fspe-hero-visual-glow{
    position:absolute; inset:-40px;
    background:radial-gradient(50% 50% at 50% 50%, rgba(255,47,110,.35), transparent 70%);
    filter:blur(30px);
    z-index:0;
    animation:fspe-pulse 4.5s ease-in-out infinite;
  }
  @keyframes fspe-pulse{
    0%,100%{opacity:.55; transform:scale(1);}
    50%{opacity:.9; transform:scale(1.05);}
  }
  /* REPLACE the src below with your own dashboard screenshot */
  .fspe-hero-visual-frame img{
    width:150%; border-radius:12px; display:block;
  }
  .fspe-hero-chip{
    position:absolute; z-index:3;
    display:flex; align-items:center; gap:8px;
    background:rgba(20,15,15,.85);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    padding:9px 16px;
    font-family:var(--fspe-font-mono);
    font-size:16px; font-weight:600; letter-spacing:.03em;
    color:var(--fspe-text-light);
    box-shadow:0 16px 34px -14px rgba(0,0,0,.6);
  }
  .fspe-hero-chip svg{width:15px; height:15px; flex:none;}
  .fspe-hero-chip--top{
    top:-18px; left:-22px;
    color:var(--fspe-accent);
    animation:fspe-chip-float-a 5.5s ease-in-out infinite;
  }
  .fspe-hero-chip--top svg{color:var(--fspe-accent);}
  .fspe-hero-chip--bottom{
    bottom:-16px; right:-18px;
    animation:fspe-chip-float-b 6.2s ease-in-out infinite;
  }
  .fspe-hero-chip--bottom svg{color:#14e0b0;}
  .fspe-hero-chip--bottom .fspe-chip-dot{
    width:7px; height:7px; border-radius:50%; background:#14e0b0;
    box-shadow:0 0 0 3px rgba(20,224,176,.22);
  }
  @keyframes fspe-chip-float-a{
    0%,100%{transform:translateY(0) rotate(-2deg);}
    50%{transform:translateY(-9px) rotate(1deg);}
  }
  @keyframes fspe-chip-float-b{
    0%,100%{transform:translateY(0) rotate(2deg);}
    50%{transform:translateY(-8px) rotate(-1deg);}
  }

  /* ============================================================
   SECTION 02 — LAYERS (cream)
   ============================================================ */
.fspe-layers{
  background:var(--fspe-bg-cream);
  padding:34px 0;
  position:relative;
  overflow:hidden;
}
.fspe-layers::before{
  content:"";
  position:absolute; top:-120px; right:-120px; width:480px; height:480px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,47,110,.10), transparent 70%);
  pointer-events:none;
  animation:fspe-blob-breathe 8s ease-in-out infinite;
}
.fspe-layers::after{
  content:"";
  position:absolute; bottom:-140px; left:-100px; width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,138,76,.10), transparent 70%);
  pointer-events:none;
  animation:fspe-blob-breathe 9s ease-in-out infinite 1.5s;
}
@keyframes fspe-blob-breathe{
  0%,100%{opacity:.7; transform:scale(1);}
  50%{opacity:1; transform:scale(1.15);}
}
.fspe-layers-grid{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:64px; align-items:center;
}
.fspe-layers-image-wrap{
  position:relative;
}
.fspe-layers-image-glow{
  position:absolute; inset:-28px;
  background:radial-gradient(55% 55% at 50% 50%, rgba(255,47,110,.28), transparent 70%);
  filter:blur(26px);
  z-index:0;
  animation:fspe-pulse 4.5s ease-in-out infinite;
}
.fspe-layers-image{
  position:relative; z-index:1;
  border-radius:var(--fspe-radius);
  background:#fff;
  box-shadow:0 40px 70px -35px rgba(28,22,22,.25);
  padding:8px;
  transform:rotate(-1.2deg);
  transition:transform .5s var(--fspe-ease), box-shadow .5s var(--fspe-ease);
}
.fspe-layers-image::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(135deg, var(--fspe-accent) 0%, var(--fspe-accent-2) 50%, rgba(255,138,76,.2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.5;
  transition:opacity .4s var(--fspe-ease);
}
.fspe-layers-image:hover{transform:rotate(0deg) translateY(-6px); box-shadow:0 50px 90px -30px rgba(255,47,110,.3);}
.fspe-layers-image:hover::before{opacity:1;}
/* REPLACE the src below with your own dashboard screenshot */
.fspe-layers-image img{
  width:100%;
  height:520px;
  object-fit: fill;
  border-radius:14px;
  display:block;
}

.fspe-layers-chip{
  position:absolute; z-index:2;
  display:flex; align-items:center; gap:7px;
  background:rgba(20,15,15,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:8px 14px;
  font-family:var(--fspe-font-mono);
  font-size:10.5px; font-weight:600; letter-spacing:.03em;
  color:#fff;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.55);
}
.fspe-layers-chip svg{width:13px; height:13px; flex:none; color:var(--fspe-accent-2);}
.fspe-layers-chip--a{top:-14px; right:-16px; animation:fspe-chip-float-a 5.5s ease-in-out infinite;}
.fspe-layers-chip--b{bottom:-14px; left:-14px; animation:fspe-chip-float-b 6.2s ease-in-out infinite;}
.fspe-layers-chip--b .fspe-chip-dot{width:6px; height:6px; border-radius:50%; background:#14e0b0; box-shadow:0 0 0 3px rgba(20,224,176,.22);}

.fspe-layers-title{
  font-family:var(--fspe-font-display);
  font-weight:800;
  font-size: 35px;
  line-height:1.12;
  letter-spacing:-.02em;
  margin-bottom:44px;
  color:var(--fspe-text-dark);
  max-width:520px;
}
.fspe-layers-title .fspe-accent-word{
  background:linear-gradient(97deg, var(--fspe-accent), var(--fspe-accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 24px rgba(255,47,110,.35), 0 0 44px rgba(255,138,76,.18);
}
.fspe-layers-content{position:relative;}
.fspe-layers-body{display:flex; gap:28px; align-items:flex-start;}
.fspe-layers-list{position:relative; flex:1; min-width:0; display:flex; flex-direction:column; gap:12px;}
.fspe-layers-item{
  --item-color: var(--fspe-accent);
  display:flex; gap:14px; align-items:center;
  padding:10px 14px 10px 16px;
  background:#fff;
  border:2px solid color-mix(in srgb, var(--item-color) 22%, rgba(28,22,22,.08));
  border-radius:14px;
  box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
  position:relative;
  overflow:hidden;
  transform:scale(1);
  transition:transform .4s var(--fspe-ease), box-shadow .4s var(--fspe-ease), border-color .4s var(--fspe-ease);
  animation:fspe-card-spotlight 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.fspe-layers-item::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--item-color), color-mix(in srgb, var(--item-color) 40%, transparent));
}
.fspe-layers-item::after{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--item-color) 16%, transparent), transparent);
  transform:skewX(-18deg);
  pointer-events:none;
}
.fspe-layers-item:hover::after{
  animation:fspe-card-shimmer 1s ease forwards;
}
@keyframes fspe-card-shimmer{
  to{left:120%;}
}
.fspe-layers-item:hover{
  transform:translateX(6px) translateY(-3px) scale(1.02);
  box-shadow:0 24px 44px -20px color-mix(in srgb, var(--item-color) 40%, rgba(28,22,22,.28));
  border-color:color-mix(in srgb, var(--item-color) 65%, transparent);
  animation-play-state:paused;
}
@keyframes fspe-card-spotlight{
  0%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
  4%{
    transform:scale(1.035);
    box-shadow:0 0 0 5px color-mix(in srgb, var(--item-color) 18%, transparent),
               0 30px 60px -14px color-mix(in srgb, var(--item-color) 55%, rgba(28,22,22,.3));
    border-color:var(--item-color);
  }
  16%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
  100%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
}
.fspe-layers-item-icon{
  flex:none; width:48px; height:48px; border-radius:13px;
  background:linear-gradient(150deg, var(--item-color), color-mix(in srgb, var(--item-color) 65%, #000 15%));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), inset 0 -6px 10px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  position:relative; z-index:1;
  transition:transform .35s var(--fspe-ease), box-shadow .35s var(--fspe-ease);
  animation:fspe-icon-spotlight 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.fspe-layers-item-icon::before,
.fspe-layers-item-icon::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--item-color);
  opacity:0;
  animation:fspe-icon-ripple 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.fspe-layers-item-icon::after{ animation-delay:calc(var(--spot-delay, 0s) + .15s); }
.fspe-layers-item-icon svg{width:21px; height:21px; stroke-width:2;}
.fspe-layers-item:hover .fspe-layers-item-icon{
  transform:scale(1.14) rotate(-5deg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 10px 22px -6px color-mix(in srgb, var(--item-color) 70%, transparent);
  animation-play-state:paused;
}
.fspe-layers-item:hover .fspe-layers-item-icon::before,
.fspe-layers-item:hover .fspe-layers-item-icon::after{ animation-play-state:paused; opacity:0; }
@keyframes fspe-icon-spotlight{
  0%{ transform:scale(1) rotate(0deg); }
  4%{ transform:scale(1.22) rotate(-8deg); }
  16%{ transform:scale(1) rotate(0deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
@keyframes fspe-icon-ripple{
  0%{ transform:scale(1); opacity:0; }
  4%{ transform:scale(1); opacity:.7; }
  20%{ transform:scale(1.7); opacity:0; }
  100%{ transform:scale(1); opacity:0; }
}
.fspe-layers-item-title{
  font-family:var(--fspe-font-mono);
  font-size:14.5px; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--item-color);
  margin-bottom:4px;
}
.fspe-layers-item-desc{font-size:16px; line-height:1.55; color: #000; max-width:400px;}

.fspe-layers-list[data-fspe-reveal="stagger"] > .fspe-layers-item{
  transform:translateX(-26px);
}
.fspe-layers-list[data-fspe-reveal="stagger"].fspe-in > .fspe-layers-item{
  transform:translateX(0);
}

.fspe-layers-flow{
  flex:none;
  align-self:flex-start;
  background:none;
  border:none;
  box-shadow:none;
  padding:16px 16px 14px;
  width:190px;
  display:flex; flex-direction:column;
  transition:transform .4s var(--fspe-ease);
  position:relative;
  overflow:visible;
}
.fspe-layers-flow:hover{
  transform:translateY(-4px);
}
.fspe-layers-flow:hover{
  transform:translateY(-4px);
  box-shadow:0 34px 64px -26px rgba(255,47,110,.3);
}


.fspe-layers-flow-title{
  font-family:var(--fspe-font-mono);
  font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fspe-text-dark-muted);
  margin-bottom:18px;
  display:flex; align-items:center; gap:7px;
}
.fspe-layers-flow-title svg{width:13px; height:13px; color:var(--fspe-accent); flex:none;}
.fspe-layers-flow-track{position:relative;}
.fspe-layers-flow-track::before{
  content:"";
  position:absolute; left:11px; top:6px; bottom:6px; width:3px;
  background:repeating-linear-gradient(
    180deg,
    color-mix(in srgb, var(--fspe-accent) 70%, transparent) 0px,
    color-mix(in srgb, var(--fspe-accent) 70%, transparent) 5px,
    transparent 5px,
    transparent 11px
  );
  background-size:3px 22px;
  border-radius:3px;
  animation:fspe-track-flow .9s linear infinite;
  box-shadow:0 0 14px 1px rgba(255,47,110,.35);
}
@keyframes fspe-track-flow{
  0%{background-position:0 0;}
  100%{background-position:0 22px;}
}

.fspe-layers-flow-beam,
.fspe-layers-flow-beam--b,
.fspe-layers-flow-beam--c{
  position:absolute; left:6px; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--fspe-accent) 55%, transparent 100%);
  box-shadow:0 0 18px 6px var(--fspe-accent), 0 0 0 4px rgba(255,47,110,.25);
  top:0; opacity:0;
}
.fspe-layers-flow-beam{ animation:fspe-beam-travel 2.2s linear infinite; }
.fspe-layers-flow-beam--b{ animation:fspe-beam-travel 2.2s linear infinite .7s; }
.fspe-layers-flow-beam--c{ animation:fspe-beam-travel 2.2s linear infinite 1.4s; }

@keyframes fspe-beam-travel{
  0%{top:0%; opacity:0; transform:scale(.5);}
  10%{opacity:1; transform:scale(1);}
  90%{opacity:1; transform:scale(1);}
  100%{top:96%; opacity:0; transform:scale(.5);}
}
.fspe-layers-flow-step{
  display:flex; align-items:center; gap:12px;
  font-family:var(--fspe-font-mono); font-size:16.5px; font-weight:550;
  letter-spacing:.03em; color:var(--fspe-text-dark);
  padding:30px 0; position:relative; z-index:1;
  transition:transform .3s var(--fspe-ease), color .3s var(--fspe-ease);
}
.fspe-layers-flow-step:hover{transform:translateX(3px); color:var(--step-color);}
.fspe-layers-flow-step .fspe-dot{
  width:16px; height:16px; border-radius:50%;
  background:var(--step-color, var(--fspe-accent));
  border:2px solid #fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--step-color, var(--fspe-accent)) 30%, transparent);
  flex:none;
  animation:fspe-flow-dot-pulse 3.6s ease-in-out infinite;
}
.fspe-layers-flow-step:nth-child(2) .fspe-dot{animation-delay:0s;}
.fspe-layers-flow-step:nth-child(3) .fspe-dot{animation-delay:.3s;}
.fspe-layers-flow-step:nth-child(4) .fspe-dot{animation-delay:.6s;}
.fspe-layers-flow-step:nth-child(5) .fspe-dot{animation-delay:.9s;}
.fspe-layers-flow-step:nth-child(6) .fspe-dot{animation-delay:1.2s;}
.fspe-layers-flow-step:nth-child(7) .fspe-dot{animation-delay:1.5s;}
@keyframes fspe-flow-dot-pulse{
  0%,80%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--step-color, var(--fspe-accent)) 30%, transparent); transform:scale(1);}
  15%{box-shadow:0 0 0 6px color-mix(in srgb, var(--step-color, var(--fspe-accent)) 15%, transparent); transform:scale(1.3);}
}

/* Responsive (add inside your existing @media blocks) */
@media (max-width: 980px){
  .fspe-layers-grid{grid-template-columns:1fr; gap:40px;}
  .fspe-layers-image-wrap{order:-1;}
  .fspe-layers-image{transform:none;}
  .fspe-layers-chip{display:none;}
  .fspe-layers-body{flex-direction:column;}
  .fspe-layers-flow{width:100%;}
}
@media (max-width: 640px){
  .fspe-layers-list::before{left:24px;}
}
  /* ============================================================
     SECTION 03 — ECOSYSTEM (dark)
     ============================================================ */
  .fspe-ecosystem{
    background:var(--fspe-bg-dark);
    color:var(--fspe-text-light);
    padding: 34px 0;
    position:relative;
    overflow:hidden;
  }
  .fspe-ecosystem::before{
    content:"";
    position:absolute; left:50%; top:44%; width:900px; height:900px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(255,47,110,.14), transparent 65%);
    filter:blur(10px);
    pointer-events:none;
  }
  .fspe-ecosystem-head{max-width:560px; margin:0 auto 54px; text-align:center;}
  .fspe-ecosystem-head .fspe-eyebrow{justify-content:center;}
  .fspe-ecosystem-title{font-size: 35px; line-height:1.15; color: #fff;}

.fspe-ecosystem-diagram{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  grid-template-areas:
    "top   top   top"
    "l1    img   r1"
    "l2    img   r2"
    "b1    .     b2";
  gap:8px 60px;
  max-width:1060px; margin:0 auto;
}
 .fspe-eco-node{
  --item-color: var(--fspe-accent);
  background:var(--fspe-card-dark);
  border:1.5px solid color-mix(in srgb, var(--item-color) 30%, var(--fspe-card-dark-border));
  border-radius:14px;
  padding:18px 20px;
  display:flex; gap:14px; align-items:flex-start;
  position:relative; z-index:2;
  transition:transform .4s var(--fspe-ease), border-color .4s var(--fspe-ease), box-shadow .4s var(--fspe-ease);
}
.fspe-eco-node:hover{
  transform:translateY(-5px) scale(1.02);
  border-color:var(--item-color);
  box-shadow:0 24px 46px -18px color-mix(in srgb, var(--item-color) 55%, transparent);
}
.fspe-eco-node-icon{
  flex:none; width:40px; height:40px; border-radius:11px;
  background:linear-gradient(150deg, var(--item-color), color-mix(in srgb, var(--item-color) 65%, #000 15%));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -5px 8px rgba(0,0,0,.2), 0 8px 18px -8px color-mix(in srgb, var(--item-color) 60%, transparent);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--fspe-ease), box-shadow .35s var(--fspe-ease);
}
.fspe-eco-node:hover .fspe-eco-node-icon{
  transform:scale(1.12) rotate(-5deg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 12px 24px -8px color-mix(in srgb, var(--item-color) 70%, transparent);
}
.fspe-eco-node-icon svg{width:18px; height:18px; stroke-width:2;}
.fspe-eco-node-title{
  font-family:var(--fspe-font-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--item-color);
  margin-bottom:6px;
}
.fspe-eco-node-desc{font-size:14.5px; line-height:1.55; color:var(--fspe-text-light-muted);}

  .fspe-eco-top{grid-area:top; justify-self:center; text-align:center; max-width:220px;}
  .fspe-eco-top .fspe-eco-node{flex-direction:column; align-items:center; text-align:center;}
  .fspe-eco-l1{grid-area:l1; align-self:start;}
  .fspe-eco-l2{grid-area:l2; align-self:start;}
  .fspe-eco-r1{grid-area:r1; align-self:start;}
  .fspe-eco-r2{grid-area:r2; align-self:start;}
  .fspe-eco-b1{grid-area:b1;}
  .fspe-eco-b2{grid-area:b2;}

  .fspe-eco-center{
    grid-area:img; position:relative; z-index:1;
    border-radius:18px; overflow:hidden;
    border:1px solid rgba(255,47,110,.3);
    background:#0f0b0b;
    box-shadow:0 40px 90px -30px rgba(255,47,110,.25);
    align-self:center;
  }
  /* REPLACE the src below with your own product screenshot */
  .fspe-eco-center img{width:160%; display:block;}

  .fspe-eco-lines{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;}
  .fspe-eco-lines path{
    fill:none; stroke:rgba(255,47,110,.4); stroke-width:.5;
    stroke-dasharray:100;
    stroke-dashoffset:100;
    transition:stroke-dashoffset 1.6s var(--fspe-ease);
    vector-effect:non-scaling-stroke;
  }
  .fspe-eco-pill{
    fill:none; stroke:rgba(255,47,110,.45); stroke-width:.5;
    stroke-dasharray:3 2.4;
    vector-effect:non-scaling-stroke;
  }
  .fspe-eco-dot{fill:var(--fspe-accent); opacity:0; transition:opacity .5s var(--fspe-ease) .9s;}
  .fspe-ecosystem.fspe-in .fspe-eco-lines path{stroke-dashoffset:0;}
  .fspe-ecosystem.fspe-in .fspe-eco-dot{opacity:1;}

  /* ============================================================
     SECTION 04 — EVOLVE (cream)
     ============================================================ */
 .fspe-evolve{
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(255,47,110,.16), transparent 60%),
    radial-gradient(500px 380px at 85% 15%, rgba(255,138,76,.15), transparent 60%),
    radial-gradient(550px 420px at 75% 85%, rgba(168,85,247,.13), transparent 60%),
    radial-gradient(480px 380px at 20% 85%, rgba(20,224,176,.12), transparent 60%),
    var(--fspe-bg-cream);
  background-size:200% 200%;
  animation:fspe-mesh-move 18s ease-in-out infinite;
  padding:70px 0 60px;
  position:relative;
  overflow:hidden;
}
@keyframes fspe-mesh-move{
  0%,100%{background-position:0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%;}
  50%{background-position:20% 30%, 80% 25%, 75% 70%, 25% 75%, 0% 0%;}
}
.fspe-evolve-particle{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--fspe-accent) 70%, transparent 100%);
  opacity:0; pointer-events:none; z-index:0;
  animation:fspe-particle-float linear infinite;
}
@keyframes fspe-particle-float{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  15%{opacity:.65;}
  85%{opacity:.65;}
  100%{transform:translateY(-160px) translateX(24px); opacity:0;}
}
  .fspe-evolve-head{max-width:600px; margin:0 auto 64px; text-align:center;}
  .fspe-evolve-head .fspe-eyebrow{justify-content:center;}
  .fspe-evolve-title{font-size:clamp(28px,3.4vw,40px); line-height:1.15;}

  .fspe-evolve-steps{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:28px; position:relative; margin-bottom:70px;
  }
  .fspe-evolve-steps::before{
    content:"";
    position:absolute; top:38px; left:12%; right:12%; height:1px;
    background:repeating-linear-gradient(90deg, rgba(28,22,22,.18) 0 6px, transparent 6px 12px);
    z-index:0;
  }
  .fspe-evolve-step{text-align:center; position:relative; z-index:1;}

  .fspe-evolve-steps::before{
  content:"";
  position:absolute; top:40px; left:12%; right:12%; height:3px;
  background:linear-gradient(90deg,#3b82f6,#ff2f6e,#14e0b0,#ff8a4c,#3b82f6);
  background-size:200% 100%;
  border-radius:3px;
  opacity:.9;
  box-shadow:0 0 16px 3px rgba(255,47,110,.35);
  z-index:0;
  animation:fspe-line-flow 4s linear infinite, fspe-line-glow 2.4s ease-in-out infinite;
}
@keyframes fspe-line-flow{
  0%{background-position:0% 0%;}
  100%{background-position:200% 0%;}
}
@keyframes fspe-line-glow{
  0%,100%{box-shadow:0 0 16px 3px rgba(255,47,110,.3);}
  50%{box-shadow:0 0 28px 8px rgba(255,47,110,.6);}
}
.fspe-evolve-step-icon{
  width:80px; height:80px; border-radius:50%; margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  color:#fff;
  /*transition:transform .4s ease;*/
  animation:fspe-icon-bounce 3s ease-in-out infinite;
}
.fspe-evolve-step:nth-child(1) .fspe-evolve-step-icon{
  background:linear-gradient(150deg,#3b82f6,#1d4ed8);
  box-shadow:0 12px 26px -8px rgba(59,130,246,.65);
}
.fspe-evolve-step:nth-child(2) .fspe-evolve-step-icon{
  background:linear-gradient(150deg,#ff2f6e,#c81e56);
  box-shadow:0 12px 26px -8px rgba(255,47,110,.65);
}
.fspe-evolve-step:nth-child(3) .fspe-evolve-step-icon{
  background:linear-gradient(150deg,#14e0b0,#0d9488);
  box-shadow:0 12px 26px -8px rgba(20,224,176,.65);
}
.fspe-evolve-step:nth-child(4) .fspe-evolve-step-icon{
  background:linear-gradient(150deg,#ff8a4c,#ea580c);
  box-shadow:0 12px 26px -8px rgba(255,138,76,.65);
}

.fspe-evolve-step-icon::before{
  content:"";
  position:absolute; inset:-9px; border-radius:50%;
  border:2px dashed rgba(0,0,0,.18);
  animation:fspe-ring-spin 7s linear infinite;
}
.fspe-evolve-step-icon::after{
  content:"";
  position:absolute; inset:-4px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,255,255,.5);
  animation:fspe-ring-pulse 2.4s ease-out infinite;
}
.fspe-evolve-step-icon svg{ position:relative; z-index:1; width:28px; height:28px;}

@keyframes fspe-icon-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
@keyframes fspe-ring-spin{
  to{transform:rotate(360deg);}
}
@keyframes fspe-ring-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,47,110,.4);}
  70%{box-shadow:0 0 0 16px rgba(255,47,110,0);}
  100%{box-shadow:0 0 0 0 rgba(255,47,110,0);}
}
@media (hover:hover) and (pointer:fine){
  .fspe-evolve-step:hover .fspe-evolve-step-icon{
    transform:scale(1.15) translateY(-10px);
    animation-play-state:paused;
  }
}
  .fspe-evolve-step-label{
    font-family: 'poppins-local'; font-size:20px; font-weight:900;
    letter-spacing:.1em; text-transform:uppercase; color:var(--fspe-accent);
    margin-bottom:10px;
  }
  .fspe-evolve-step-desc{font-size:16px; line-height:1.6; color: maroon; max-width:220px; margin:0 auto;}

.fspe-evolve-quote-card{
  max-width:760px; margin:0 auto;
  background:var(--fspe-card-dark);
  border:1.5px solid rgba(255,47,110,.18);
  border-radius:20px;
  padding:2px 22px 22px;
  position:relative;
  box-shadow:0 30px 60px -30px rgba(28,22,22,.3);
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
}
.fspe-evolve-quote-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit; padding:1.5px;
  background:linear-gradient(120deg,#3b82f6,#ff2f6e,#14e0b0,#ff8a4c,#3b82f6);
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:fspe-border-flow 6s linear infinite;
  opacity:.6;
}
@keyframes fspe-border-flow{
  0%{background-position:0% 50%;}
  100%{background-position:300% 50%;}
}
.fspe-evolve-quote-card:hover{
  transform:translateY(-4px);
  box-shadow:0 40px 74px -26px rgba(255,47,110,.28);
}
.fspe-evolve-quote-mark{
  width:34px; height:34px; color:var(--fspe-accent); opacity:.35;
  margin-bottom:10px; display:block;
}
.fspe-evolve-quote{
  position:relative; z-index:1;
  font-family:var(--fspe-font-display);
  font-weight:600;
  font-size:clamp(19px,2.1vw,23px);
  line-height:1.55;
  color: #fff;
  margin:0;
  border-left:none;
  padding:0;
}
.fspe-evolve-quote .fspe-accent-word{
  background:linear-gradient(97deg,var(--fspe-accent),var(--fspe-accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 980px){
    .fspe-hero-grid{grid-template-columns:1fr; gap:48px;}
    .fspe-hero-visual{order:2;}
    .fspe-hero-chip{font-size:10px; padding:7px 11px;}
    .fspe-hero-chip--top{top:-12px; left:-10px;}
    .fspe-hero-chip--bottom{bottom:-12px; right:-10px;}
    .fspe-layers-grid{grid-template-columns:1fr; gap:40px;}
    .fspe-layers-image-wrap{order:2;}
    .fspe-layers-image{transform:none;}
    .fspe-layers-chip{display:none;}
    .fspe-layers-body{flex-direction:column;}
    .fspe-layers-flow{width:100%;}
    .fspe-ecosystem-diagram{
      grid-template-columns:1fr; grid-template-areas:
        "top" "img" "l1" "r1" "l2" "r2" "b1" "b2";
    }
    .fspe-eco-center{order:-1; max-width:520px; margin:0 auto 8px;}
    .fspe-eco-lines{display:none;}
    .fspe-evolve-steps{grid-template-columns:1fr 1fr; row-gap:44px;}
    .fspe-evolve-steps::before{display:none;}
  }

  @media (max-width: 640px){
    .fspe-wrap{padding:0 20px;}
    .fspe-hero{padding:64px 0 56px;}
    .fspe-hero-orbit{flex-wrap:wrap; row-gap:24px; justify-content:flex-start;}
    .fspe-hero-orbit-arrow{display:none;}
    .fspe-hero-orbit-item{width:auto; margin-right:10px;}
    .fspe-hero-cta{gap:12px;}
    .fspe-hero-btn{padding:13px 20px; font-size:13.5px; flex:1 1 auto; justify-content:center;}
    .fspe-hero-chip{display:none;}
    .fspe-layers, .fspe-ecosystem, .fspe-evolve{padding:72px 0;}
    .fspe-layers-list::before{left:24px;}
    .fspe-evolve-steps{grid-template-columns:1fr; gap:36px;}
    .fspe-evolve-quote{font-size:18px; padding-left:18px;}
  }


/*==========================================================
              Product Testing Quality assurance
==========================================================*/


/*===============================================
          Product Testing & Quality Assurance
===============================================*/

   :root{
    --black:#0a0a0c;
    --black2:#111114;
    --cream:#f6efe6;
    --cream2:#efe6d9;
    --pink:#ff2f5b;
    --orange:#ff7a3d;
    --grad: linear-gradient(90deg,var(--pink),var(--orange));
    --text-dark:#e9e6df;
    --text-dim:#9a968f;
    --text-light:#1a1714;
    --text-light-dim:#6b665e;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{background:var(--black);color:var(--text-dark);line-height:1.5;}
  img,svg{display:block;}
  .ptqa-wrap{max-width:1200px;margin:0 auto;padding:0 48px;}
  .ptqa-eyebrow22{
    display:flex;align-items:center;gap:10px;
    font-size:12px;font-weight:700;letter-spacing:.16em;
    color:#ff3860;text-transform:uppercase;margin-bottom:18px;
    margin-top: 30px;
  }
  .ptqa-eyebrow22 .ptqa-num{
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;border:1px solid var(--pink);border-radius:50%;
    font-size:11px;color:var(--pink);
  }
  h1,h2{
    font-weight:800;letter-spacing:-0.025em;line-height:1.06;
  }
  h1{
    font-size:50px;
    color:#ffffff;
  }

.ptqa-highlight{
    background:linear-gradient(100deg,#ff3860,#ff8a65);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    filter: none !important;
}

  h2{font-size:38px;color:var(--text-light);}
  .ptqa-lead-dark p{color:#a7a29a;font-size:16px;max-width:420px;margin-top:18px;line-height:1.6;}
  .ptqa-lead-light p{color:var(--text-light-dim);font-size:15.5px;max-width:420px;margin-top:18px;}

  @keyframes ptqa-shine{
    0%{background-position:0% 50%;}
    100%{background-position:300% 50%;}
  }
  @keyframes ptqa-fade-up{
    from{opacity:0;transform:translateY(22px);}
    to{opacity:1;transform:translateY(0);}
  }
  @keyframes ptqa-float-orb{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-16px,22px) scale(1.08);}
  }
  @keyframes ptqa-pulse-glow{
    0%,100%{box-shadow:0 0 0 0 rgba(255,56,96,.35);}
    50%{box-shadow:0 0 0 10px rgba(255,56,96,0);}
  }
  .ptqa-fade-in{opacity:0;animation:ptqa-fade-up .8s ease forwards;}
  .ptqa-fade-in.ptqa-d1{animation-delay:.05s;}
  .ptqa-fade-in.ptqa-d2{animation-delay:.2s;}
  .ptqa-fade-in.ptqa-d3{animation-delay:.35s;}
  .ptqa-fade-in.ptqa-d4{animation-delay:.5s;}
  .ptqa-fade-in.ptqa-d5{animation-delay:.65s;}

  /* ============ SECTION 1 : HERO ============ */
  .ptqa-hero{
    background:
      radial-gradient(ellipse at 75% 20%, rgba(255,60,80,.10), transparent 55%),
      var(--black);
    padding:80px 0 70px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid #1c1a19;
  }
  .ptqa-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;}
  .ptqa-orb1{width:280px;height:280px;background:radial-gradient(circle,rgba(255,56,96,.35),transparent 70%);top:-60px;right:20%;animation:ptqa-float-orb 9s ease-in-out infinite;}
  .ptqa-orb2{width:220px;height:220px;background:radial-gradient(circle,rgba(255,122,61,.28),transparent 70%);bottom:-40px;left:5%;animation:ptqa-float-orb 11s ease-in-out infinite reverse;}
  .ptqa-orb3{width:180px;height:180px;background:radial-gradient(circle,rgba(255,56,96,.22),transparent 70%);top:40%;right:2%;animation:ptqa-float-orb 7s ease-in-out infinite;}
  .ptqa-hero .ptqa-wrap{position:relative;z-index:1;}
  .ptqa-hero .ptqa-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
  .ptqa-hero h1{
    font-size:50px;
    font-weight:800;
    line-height:1.06;
    letter-spacing:-0.025em;
    color:#ffffff;

    /* Remove unwanted glow / blur */
    filter:none;
    text-shadow:none;
    -webkit-text-stroke:0;

    margin-bottom:16px;
}

.ptqa-hero h1 .ptqa-highlight{
    background:linear-gradient(
        100deg,
        #ff3860 0%,
        #ff5876 45%,
        #ff8a65 100%
    );

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

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

    filter:none;
    text-shadow:none;

    /* No shine animation */
    animation:none;
}
  .ptqa-features-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;
  }
  @keyframes ptqa-float-icon{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
  }
  @keyframes ptqa-spin-ring{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  .ptqa-feature{
    border-top:1px solid #2a2724;padding-top:20px;
    transition:transform .3s ease;
  }
  .ptqa-feature:hover{transform:translateY(-6px);}
  .ptqa-feature .ptqa-icon-badge{
    width:50px;height:50px;border-radius:50%;
    position:relative;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;
    background:#141014;
    animation:ptqa-float-icon 3.5s ease-in-out infinite;
  }
  .ptqa-feature .ptqa-icon-badge::before{
    content:"";position:absolute;inset:-2px;border-radius:50%;
    background:conic-gradient(from 0deg,#ff3860,#ff8a65,#ff3860);
    animation:ptqa-spin-ring 4s linear infinite;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  }
  .ptqa-feature .ptqa-icon-badge::after{
    content:"";position:absolute;inset:2px;border-radius:50%;
    background:#141014;
    box-shadow:0 0 16px 2px rgba(255,56,96,.45) inset;
  }
  .ptqa-feature:nth-child(2) .ptqa-icon-badge{animation-delay:.6s;}
  .ptqa-feature:nth-child(3) .ptqa-icon-badge{animation-delay:1.2s;}
  .ptqa-feature:nth-child(4) .ptqa-icon-badge{animation-delay:1.8s;}
  .ptqa-feature svg{width:20px;height:20px;stroke:#ff5876;margin:0;position:relative;z-index:1;}
  .ptqa-feature .ptqa-ftitle{font-size:12.5px;font-weight:700;letter-spacing:.09em;color:#fff;margin-bottom:8px;}
  .ptqa-feature .ptqa-fdesc{font-size:12.5px;color:#8b877f;line-height:1.5;}

  /* ptqa-hero ptqa-diagram */
  .ptqa-diagram{position:relative;padding-top:6px;}
  .ptqa-hero-diagram-img{margin-top: 70px;width:100%;height:auto;border-radius:16px; height: 430px;}
  .ptqa-top-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .ptqa-device-card{
    background:linear-gradient(160deg,#17151a,#0e0d10);
    border:1px solid #2b2730;border-radius:14px;padding:16px 12px 22px;
    text-align:center;position:relative;
  }
  .ptqa-device-card .ptqa-icon-circle{
    width:34px;height:34px;border-radius:50%;
    background:rgba(255,60,80,.12);
    display:flex;align-items:center;justify-content:center;margin:0 auto 10px;
  }
  .ptqa-device-card .ptqa-icon-circle svg{width:17px;height:17px;stroke:var(--pink);margin:0;}
  .ptqa-device-card .ptqa-label{font-size:10px;font-weight:700;letter-spacing:.08em;color:#e7e3dc;margin-bottom:10px;}
  .ptqa-device-screen{
    height:56px;border-radius:6px;
    background:linear-gradient(160deg,#1c1a20,#131116);
    border:1px solid #2c2833;
  }
  .ptqa-connector-mid{
    display:flex;justify-content:center;padding:16px 0;position:relative;
  }
  .ptqa-connector-mid::before{
    content:"";position:absolute;top:0;left:50%;width:1px;height:100%;
    background:linear-gradient(var(--pink),transparent);opacity:.5;
  }
  .ptqa-core-box{
    background:linear-gradient(160deg,#19161b,#0c0b0d);
    border:1px solid var(--pink);
    box-shadow:0 0 30px rgba(255,50,80,.18), inset 0 0 20px rgba(255,90,60,.05);
    border-radius:12px;text-align:center;padding:20px;
    position:relative;
  }
  .ptqa-core-box .ptqa-title{font-size:20px;font-weight:800;letter-spacing:.04em;color:#fff;}
  .ptqa-core-box .ptqa-chip{
    margin:14px auto 0;width:34px;height:22px;border-radius:5px;
    background:rgba(255,90,60,.12);border:1px solid rgba(255,90,60,.4);
    display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--orange);
  }
  .ptqa-bottom-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
  .ptqa-sys-card{
    background:linear-gradient(160deg,#17151a,#0e0d10);
    border:1px solid #2b2730;border-radius:12px;padding:16px 14px;
  }
  .ptqa-sys-card .ptqa-icon-circle{
    width:30px;height:30px;border-radius:8px;
    background:rgba(255,60,80,.12);
    display:flex;align-items:center;justify-content:center;margin-bottom:10px;
  }
  .ptqa-sys-card .ptqa-icon-circle svg{width:15px;height:15px;stroke:var(--pink);margin:0;}
  .ptqa-sys-card .ptqa-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#e7e3dc;margin-bottom:4px;}
  .ptqa-sys-card .ptqa-sub{font-size:10.5px;color:var(--text-dim);}

   /* ============ SECTION 2: WHAT WE TEST ============ */
  .ptqa-connect-sec{
    background:
      radial-gradient(circle at 15% 20%, rgba(255,56,96,.10), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(255,122,61,.12), transparent 45%),
      radial-gradient(circle at 60% 10%, rgba(255,138,101,.08), transparent 40%),
      linear-gradient(155deg,#f8f1e8 0%,#f3e8db 55%,#f6ecdf 100%);
    background-size:200% 200%,200% 200%,200% 200%,100% 100%;
    animation:ptqa-mesh-shift 18s ease-in-out infinite;
    color:var(--text-light);
    padding:70px 0;
    position:relative;
    overflow:hidden;
  }
  .ptqa-connect-sec::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:radial-gradient(circle,rgba(120,90,60,.10) 1px,transparent 1.4px);
    background-size:26px 26px;
    -webkit-mask:radial-gradient(circle at 20% 30%, #000 0%, transparent 60%);
    mask:radial-gradient(circle at 20% 30%, #000 0%, transparent 60%);
  }
  @keyframes ptqa-mesh-shift{
    0%,100%{background-position:0% 0%,100% 100%,50% 0%,0 0;}
    50%{background-position:20% 15%,80% 85%,60% 10%,0 0;}
  }
  .ptqa-connect-sec .ptqa-cs-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;}
  .ptqa-connect-sec .ptqa-cs-orb1{width:320px;height:320px;background:radial-gradient(circle,rgba(255,56,96,.16),transparent 70%);top:-80px;left:30%;animation:ptqa-float-orb 12s ease-in-out infinite;}
  .ptqa-connect-sec .ptqa-cs-orb2{width:260px;height:260px;background:radial-gradient(circle,rgba(255,122,61,.14),transparent 70%);bottom:-60px;right:8%;animation:ptqa-float-orb 10s ease-in-out infinite reverse;}
  .ptqa-connect-sec .ptqa-wrap{position:relative;z-index:1; padding: 6px;}
  .ptqa-connect-sec .ptqa-eyebrow{
    color:var(--pink);position:relative;
  }
  .ptqa-connect-sec .ptqa-eyebrow::after{
    content:"";display:inline-block;width:28px;height:1.5px;
    background:linear-gradient(90deg,var(--pink),transparent);margin-left:4px;vertical-align:middle;
  }
  .ptqa-connect-sec h2{color:var(--text-light);text-shadow:0 2px 18px rgba(255,90,60,.08);}
  .ptqa-connect-sec .ptqa-heading-highlight{
    background:linear-gradient(100deg,#ff3860,#ff8a65);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 14px rgba(255,80,100,.35));
  }
  .ptqa-connect-left{position:relative;padding-left:22px;}
  .ptqa-connect-left::before{
    content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;
    background:linear-gradient(180deg,var(--pink),var(--orange));
  }
  .ptqa-connect-left .ptqa-lead-light p{
    position:relative;font-size:16px;line-height:1.75;color: black;
  }
 .ptqa-connect-outer{
  display:grid;grid-template-columns:0.65fr 1.9fr;gap:10px;align-items:start;margin-top:10px;
}
  .ptqa-connect-left .ptqa-eyebrow,
  .ptqa-connect-left h2,
  .ptqa-connect-left .ptqa-lead-light{margin-top:0;}
  .ptqa-connect-grid{
    display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:40px;align-items:start;position:relative;
  }
  .ptqa-connect-lines{
    position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  }
  @property --border-angle{
    syntax:'<angle>';
    inherits:false;
    initial-value:0deg;
  }
  @keyframes ptqa-float-card{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
  }
  @keyframes ptqa-card-glow-pink{
    0%,100%{box-shadow:0 10px 24px rgba(255,56,96,.10);}
    50%{box-shadow:0 20px 42px rgba(255,56,96,.26);}
  }
  @keyframes ptqa-card-glow-orange{
    0%,100%{box-shadow:0 10px 24px rgba(255,122,61,.10);}
    50%{box-shadow:0 20px 42px rgba(255,122,61,.26);}
  }
  @keyframes ptqa-border-rotate{
    to{--border-angle:360deg;}
  }
  @keyframes ptqa-ring-spin-cw{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  @keyframes ptqa-ring-spin-ccw{
    from{transform:rotate(0deg);}
    to{transform:rotate(-360deg);}
  }
  @keyframes ptqa-icon-pulse-ring{
    0%,100%{opacity:.5;transform:scale(1);}
    50%{opacity:1;transform:scale(1.08);}
  }
  .ptqa-side-col{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1;}
.ptqa-conn-card{
  position:relative;
  background:linear-gradient(165deg,#fff7f2 0%,#ffe9ee 100%);
  border:none;border-radius:18px;padding:26px 24px 28px;min-height:132px;
  box-shadow:0 2px 8px rgba(120,90,60,.05), 0 1px 2px rgba(120,90,60,.04);
  animation:ptqa-float-card 4.5s ease-in-out infinite;
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
  overflow:hidden;
}
.ptqa-side-col:first-child .ptqa-conn-card{
  background:linear-gradient(165deg,#fff0f2 0%,#ffd9e0 100%);
}
.ptqa-side-col:last-child .ptqa-conn-card{
  background:linear-gradient(165deg,#fff3e6 0%,#ffdcbf 100%);
}
.ptqa-conn-card::after{
  content:"";position:absolute;top:-40%;right:-25%;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85),transparent 70%);
  pointer-events:none;opacity:.7;
}
.ptqa-conn-card .ptqa-ctitle{
  font-size:13.5px;font-weight:800;letter-spacing:.03em;color:#241f1a;
  transition:color .3s ease;
}

.ptqa-conn-card::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  padding:2.2px;
  background:conic-gradient(from var(--border-angle),#ff3860,#ff6f8c,#ff8a65,#ffc199,#ff8a65,#ff3860);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:ptqa-border-rotate 4s linear infinite;
  pointer-events:none;
  opacity:.9;
  filter:drop-shadow(0 0 6px rgba(255,80,100,.35));
  transition:opacity .3s ease, filter .3s ease;
}
.ptqa-conn-card:hover::before{
  opacity:1;
  filter:drop-shadow(0 0 12px rgba(255,80,100,.55));
}
.ptqa-side-col:first-child .ptqa-conn-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(255,56,96,.10), transparent 55%),
    linear-gradient(165deg,#ffffff 0%,#fff5f6 55%,#ffedf0 100%);
}
.ptqa-side-col:last-child .ptqa-conn-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(255,122,61,.12), transparent 55%),
    linear-gradient(165deg,#ffffff 0%,#fff7ee 55%,#ffefe0 100%);
}
.ptqa-conn-card::after{
  content:"";position:absolute;top:-40%;right:-25%;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%);
  pointer-events:none;opacity:.6;
}
.ptqa-conn-card:hover{
  transform:translateY(-14px) scale(1.035);
  box-shadow:0 26px 48px rgba(255,56,96,.24);
}
.ptqa-side-col:last-child .ptqa-conn-card:hover{
  box-shadow:0 26px 48px rgba(255,122,61,.24);
}
.ptqa-conn-card:hover::before{opacity:1;}
.ptqa-conn-card > *{position:relative;z-index:1;}
.ptqa-side-col:first-child .ptqa-conn-card:nth-child(1){animation-delay:0s,0s;}
.ptqa-side-col:first-child .ptqa-conn-card:nth-child(2){animation-delay:.5s,.4s;}
.ptqa-side-col:first-child .ptqa-conn-card:nth-child(3){animation-delay:1s,.8s;}
.ptqa-side-col:last-child .ptqa-conn-card:nth-child(1){animation-delay:1.5s,1.2s;}
.ptqa-side-col:last-child .ptqa-conn-card:nth-child(2){animation-delay:2s,1.6s;}
.ptqa-side-col:last-child .ptqa-conn-card:nth-child(3){animation-delay:2.5s,2s;}
.ptqa-conn-card:hover{
  transform:translateY(-14px) scale(1.035);
  box-shadow:0 26px 48px rgba(255,56,96,.24);
}
.ptqa-conn-card .ptqa-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.ptqa-conn-card:hover .ptqa-ctitle{color:var(--pink);}
.ptqa-side-col:last-child .ptqa-conn-card:hover .ptqa-ctitle{color:var(--orange);}
.ptqa-conn-card .ptqa-cdesc{font-size:12.5px;color:#847c70;line-height:1.65;}
  .ptqa-conn-card .ptqa-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}

.ptqa-conn-card:hover .ptqa-ic.ptqa-pink{box-shadow:0 10px 22px rgba(255,56,96,.38);}
.ptqa-conn-card:hover .ptqa-ic.ptqa-orange{box-shadow:0 10px 22px rgba(255,122,61,.38);}
.ptqa-conn-card .ptqa-ic svg{width:20px;height:20px;margin:0;position:relative;z-index:1;}
.ptqa-conn-card .ptqa-ic.ptqa-pink svg{stroke:var(--pink);}
.ptqa-conn-card .ptqa-ic.ptqa-orange svg{stroke:var(--orange);}
  .ptqa-conn-card .ptqa-ctitle{font-size:13px;font-weight:700;letter-spacing:.04em;}
  .ptqa-conn-card .ptqa-cdesc{font-size:13.5px;color: black;line-height:1.6;}

.ptqa-conn-card .ptqa-ic{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s ease, box-shadow .35s ease;
  position:relative;
}
.ptqa-conn-card .ptqa-ic::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid currentColor;opacity:.3;
  animation:ptqa-icon-pulse-ring 2.6s ease-in-out infinite;
}
.ptqa-conn-card .ptqa-ic::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.06);
  pointer-events:none;
}
.ptqa-conn-card .ptqa-ic.ptqa-pink{
  background:linear-gradient(150deg,#ffeef0 0%,#ffd2da 55%,#ffb8c6 100%);
  color:var(--pink);
  box-shadow:0 6px 14px rgba(255,56,96,.22);
}
.ptqa-conn-card .ptqa-ic.ptqa-orange{
  background:linear-gradient(150deg,#fff1e6 0%,#ffdcc4 55%,#ffc39a 100%);
  color:var(--orange);
  box-shadow:0 6px 14px rgba(255,122,61,.22);
}
.ptqa-conn-card:hover .ptqa-ic{
  transform:rotate(-10deg) scale(1.16);
}
  .ptqa-hub-wrap{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:340px;align-self:center;z-index:1;}
  .ptqa-hub-ring{
    position:absolute;border-radius:50%;border:1px dashed #e3b7a9;
  }
  .ptqa-ring1{width:340px;height:340px;animation:ptqa-ring-spin-cw 30s linear infinite;}
  .ptqa-ring2{width:260px;height:260px;border-style:dotted;animation:ptqa-ring-spin-ccw 22s linear infinite;}
  .ptqa-hub-core{
  position:relative;z-index:2;border-radius:50%;
  width:250px;height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(160,40,40,.12);border:1px solid #f0d9cb;
  animation:ptqa-card-glow-pink 3s ease-in-out infinite;
}
.ptqa-hub-core .ptqa-stack-img{
  width:970px;height:auto;
  max-width:100%;
  object-fit:contain;
  margin-bottom:8px;
}
  .ptqa-hub-core .ptqa-htitle{font-size:16px;font-weight:800;letter-spacing:.04em;}
  .ptqa-hub-core .ptqa-hsub{font-size:10.5px;color:var(--text-light-dim);margin-top:2px;}

  /* ============ SECTION 3: QUALITY ENGINE ============ */
/* ==========================================================
   SECTION 3: THE QUALITY ENGINE
   All classes prefixed with "eng-" so nothing clashes with
   other sections/stylesheets on the page.
   ========================================================== */

* { box-sizing: border-box; }

body{
  margin:0;
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  background:#0a0a0a;
}

.ptqa-eng-sec{
  background:#0a0a0a;
  color:#fff;
  padding:80px 0;
  overflow:hidden;
}

.ptqa-eng-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
}

.ptqa-eng-grid{
  display:grid;
  grid-template-columns:0.8fr 1.4fr;
  gap:40px;
  align-items:center;
}

/* -------------------- LEFT -------------------- */
.ptqa-eng-left{
  border-left:2px solid #ff2d55;
  padding-left:24px;
}

.ptqa-eng-eyebrow{
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
  color:#fff;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.ptqa-eng-eyebrow::after{
  content:'';
  width:30px;
  height:1px;
  background:#ff2d55;
}

.ptqa-eng-left h2{
  font-size:40px;
  font-weight:800;
  line-height:1.25;
  margin:0 0 20px;
  color: #fff;
}

.ptqa-eng-accent{
  background:linear-gradient(90deg,#ff2d55,#ff7a3d);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.ptqa-eng-lead{
  font-size:18px;
  line-height:1.7;
  color: #e5e5e5;
  max-width:360px;
  margin:0;
}

/* -------------------- RIGHT: cards + orbit -------------------- */
.ptqa-eng-right{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}

.ptqa-eng-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.ptqa-eng-card{
  border:1px solid #4a1622;
  border-radius:12px;
  padding:16px 18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:rgba(255,45,85,.04);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.ptqa-eng-card:hover{
  border-color:#ff2d55;
  background:rgba(255,45,85,.08);
  transform:translateY(-2px);
}

.ptqa-eng-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #ff2d55;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ptqa-eng-icon svg{
  width:18px;
  height:18px;
  stroke:#ff2d55;
  margin:0;
}

.ptqa-eng-ctext h4{
  font-size:13px;
  font-weight:800;
  letter-spacing:.05em;
  margin:0 0 6px;
  color:#fff;
}
.ptqa-eng-ctext p{
  font-size:12px;
  line-height:1.6;
  color:#9a9a9a;
  margin:0;
}

/* -------------------- ORBIT (image + connecting lines) -------------------- */
.ptqa-eng-orbit{
  width:260px;
  height:260px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}

.ptqa-eng-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  overflow:visible;
}
.ptqa-eng-lines path{
  fill:none;
  stroke:#ff2d55;
  stroke-width:1.4;
  stroke-dasharray:4 4;
  opacity:.59;
  filter:drop-shadow(0 0 3px rgba(255,45,85,.6));
  animation:ptqa-eng-dash 22s linear infinite;
}
@keyframes ptqa-eng-dash{
  to{ stroke-dashoffset:-200; }
}

.ptqa-eng-orbit-glow{
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,45,85,.35) 0%,rgba(255,45,85,0) 70%);
  z-index:0;
  animation:ptqa-eng-pulse 4s ease-in-out infinite;
}
@keyframes ptqa-eng-pulse{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}

.ptqa-eng-orbit-img{
  width:260px;
  height:260px;
  object-fit:contain;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 0 25px rgba(255,45,85,.55));
}

/* fallback shown via JS if the image fails to load */
.ptqa-eng-orbit-fallback{
  position:relative;
  z-index:2;
  width:110px;
  height:110px;
  border-radius:20px;
  background:linear-gradient(145deg,#1a1a2e,#0d0d1a);
  border:1px solid #ff2d55;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:0 0 30px rgba(255,45,85,.45);
}
.ptqa-eng-orbit-fallback svg{
  width:34px;
  height:34px;
  stroke:#00d4ff;
  margin:0;
}
.ptqa-eng-orbit-fallback span{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:#00d4ff;
  text-shadow:0 0 10px rgba(0,212,255,.8);
}

/* -------------------- STATS / TECH STACK ROW -------------------- */
.ptqa-eng-stats{
  margin-top:56px;
  border:1px solid #ff2d55;
  border-radius:100px;
  padding:18px 36px;
  display:flex;
  flex-wrap:ptqa-wrap;
  align-items:center;
  justify-content:center;
  gap:36px;
  background:rgba(255,255,255,.02);
}

.ptqa-eng-stat{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:#e5e5e5;
  white-space:nowrap;
}
.ptqa-eng-stat svg{
  width:16px;
  height:16px;
  stroke:#ff2d55;
  margin:0;
  flex:none;
}

/* reveal-on-scroll state, toggled by JS via IntersectionObserver */
.ptqa-eng-card,
.ptqa-eng-orbit,
.ptqa-eng-stat{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.ptqa-eng-card.ptqa-is-visible,
.ptqa-eng-orbit.ptqa-is-visible,
.ptqa-eng-stat.ptqa-is-visible{
  opacity:1;
  transform:translateY(0);
}

.ptqa-conn-card,
.ptqa-proc-step,
.ptqa-js-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease, transform .65s ease;
}
.ptqa-conn-card.ptqa-is-visible,
.ptqa-proc-step.ptqa-is-visible,
.ptqa-js-reveal.ptqa-is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .ptqa-eng-wrap{padding:0 24px;}
  .ptqa-eng-grid{grid-template-columns:1fr;gap:40px;}
  .ptqa-eng-left{
    border-left:none;
    padding-left:0;
    border-top:2px solid #ff2d55;
    padding-top:20px;
  }
  .ptqa-eng-right{grid-template-columns:1fr;justify-items:center;}
  .ptqa-eng-orbit{order:-1;margin-bottom:20px;}
  .ptqa-eng-col{width:100%;max-width:420px;}
  .ptqa-eng-stats{
    border-radius:20px;
    gap:20px;
    padding:20px;
    justify-content:flex-start;
  }
}

@media(max-width:600px){
  .ptqa-eng-left h2{font-size:27px;}
  .ptqa-eng-stats{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
  }
  .ptqa-eng-stats::-webkit-scrollbar{display:none;}
}
/* ============ SECTION 4: PROCESS (self-contained, no shared class names) ============ */
.ptqa-proc-sec{
  background:linear-gradient(160deg,#f6efe6 0%,#f9d9e4 50%,#fce0c8 100%);
  color:#2b2b2b;
  padding:70px 0 60px;
  overflow:hidden;
}

.ptqa-proc-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 40px;
  display:block; /* explicitly NOT grid, avoids any inherited grid rule */
}

.ptqa-proc-eyebrow{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:#ff4f79;
  margin-bottom:14px;
}
.ptqa-proc-num{margin-right:6px;}

/* Heading row: h2 left, lead paragraph right */
.ptqa-proc-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  width:100%;
}
.ptqa-proc-head h2{
  font-size:32px;
  line-height:1.25;
  margin:0;
  color:#1a1a1a;
  font-weight:800;
}
.ptqa-proc-lead{
  font-size:17px;
  line-height:1.6;
  color: black;
  margin:0;
  max-width:420px;
}

/* Steps row — always full width, never confined by ptqa-proc-head grid */
.ptqa-proc-steps{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:start;
  width:100%;
  margin-top:60px;
}

.ptqa-proc-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 10px;
}

.ptqa-proc-circle{
  width:84px;
  height:84px;
  border-radius:50%;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.18);
  background:linear-gradient(135deg,#ff2f5b,#f6923a);
}
.ptqa-proc-circle svg{
  width:48px;
  height:48px;
  margin:0;
  display:block;
}

.ptqa-proc-step:nth-child(odd) .ptqa-proc-circle{background:#ffe0e5;}
.ptqa-proc-step:nth-child(odd) .ptqa-proc-circle svg{stroke:#ff4f79;}
.ptqa-proc-step:nth-child(even) .ptqa-proc-circle{background:#ffe6d6;}
.ptqa-proc-step:nth-child(even) .ptqa-proc-circle svg{stroke:#ff8a3d;}

.ptqa-proc-snum{
  position:absolute;
  top:-4px;
  right:-2px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#ff4f79;
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.ptqa-proc-step:nth-child(even) .ptqa-proc-snum{background:#ff8a3d;}

.ptqa-proc-label{
  font-size:15px;
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:10px;
  color:#1a1a1a;
}

.ptqa-proc-desc{
  font-size:13.5px;
  color: maroon;
  line-height:1.6;
  max-width:180px;
  margin:0 auto;
  margin-bottom: 30px;
}

.ptqa-proc-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  height:84px;
  color:#ff4f79;
  font-size:35px;
  font-weight:600;
}

.ptqa-svc-evolve-quote-card{
  max-width:780px;
  margin:34px auto 0;
  padding:26px 28px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,47,91,.25);
  border-radius:20px;
  background:#111114;
  box-shadow:0 24px 55px -30px rgba(70,10,28,.55);
}
.ptqa-svc-evolve-quote-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 12% 10%,rgba(255,47,91,.18),transparent 44%);
  pointer-events:none;
}
.ptqa-svc-evolve-quote-mark{
  width:34px;
  height:34px;
  margin-bottom:10px;
  color:#ff2f5b;
  opacity:.55;
}
.ptqa-svc-evolve-quote{
  position:relative;
  z-index:1;
  margin:0;
  color:#f8f4ef;
  font-size:clamp(18px,2vw,23px);
  font-weight:650;
  line-height:1.55;
}
.ptqa-svc-accent-word{
  background:linear-gradient(95deg,#ff2f5b,#ff7a3d);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}


/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .ptqa-proc-wrap{padding:0 24px;}
  .ptqa-proc-head{grid-template-columns:1fr;gap:20px;}
  .ptqa-proc-head h2{font-size:27px;}

  .ptqa-proc-steps{
    display:flex;
    flex-direction:column;
    gap:32px;
    margin-top:40px;
  }
  .ptqa-proc-arrow{display:none;}
  .ptqa-proc-desc{max-width:280px;}

  .ptqa-proc-closing{flex-direction:column;text-align:center;}
  .ptqa-proc-closing p{text-align:center;}
}

/* =========================================================
   COMPLETE MOBILE RESPONSIVE — FINAL
   Desktop styles above remain unchanged.
   ========================================================= */
@media (max-width:768px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  img,svg{max-width:100%;}
  .ptqa-wrap,.ptqa-eng-wrap,.ptqa-proc-wrap{
    width:100%;
    max-width:100%;
    padding-left:18px;
    padding-right:18px;
  }

  /* Section 1 — Hero */
  .ptqa-hero{padding:54px 0 48px;}
  .ptqa-hero .ptqa-wrap{
    display:flex;
    flex-direction:column;
    gap:34px;
    align-items:stretch;
  }
  .ptqa-hero h1{
    font-size:clamp(34px,10vw,44px);
    line-height:1.1;
    overflow-wrap:anywhere;
  }
  .ptqa-lead-dark p{
    max-width:100%;
    font-size:15px;
    line-height:1.7;
  }
  .ptqa-features-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 16px;
    margin-top:34px;
  }
  .ptqa-feature{min-width:0;}
  .ptqa-diagram{width:100%;padding-top:0;}
  .ptqa-hero-diagram-img{
    width:100%;
    height:auto;
    max-height:none;
    margin-top:0;
    border-radius:12px;
    object-fit:contain;
  }
  .ptqa-orb1{width:190px;height:190px;right:-50px;}
  .ptqa-orb2{width:160px;height:160px;left:-55px;}
  .ptqa-orb3{display:none;}

  /* Section 2 — What We Connect */
  .ptqa-connect-sec{padding:52px 0;}
  .ptqa-connect-sec .ptqa-wrap{padding-left:18px;padding-right:18px;}
  .ptqa-connect-outer{
    display:flex;
    flex-direction:column;
    gap:34px;
    margin-top:0;
  }
  .ptqa-connect-left{width:100%;padding-left:16px;}
  .ptqa-connect-sec h2{
    font-size:clamp(29px,8.5vw,38px);
    line-height:1.15;
  }
  .ptqa-connect-left .ptqa-lead-light p{
    max-width:100%;
    font-size:15px;
    line-height:1.7;
  }
  .ptqa-connect-grid{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:20px;
  }
  .ptqa-connect-lines{display:none;}
  .ptqa-side-col{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }
  .ptqa-conn-card{
    width:100%;
    min-height:0;
    padding:20px 18px;
    animation:none;
  }
  .ptqa-conn-card:hover{transform:none;}
  .ptqa-hub-wrap{
    order:-1;
    width:100%;
    min-height:270px;
    height:270px;
    overflow:hidden;
  }
  .ptqa-ring1{width:260px;height:260px;}
  .ptqa-ring2{width:205px;height:205px;}
  .ptqa-hub-core{width:190px;height:190px;}
  .ptqa-hub-core .ptqa-stack-img{
    width:100%;
    max-width:190px;
    height:auto;
    margin:0;
  }

  /* Section 3 — Quality Engine */
  .ptqa-eng-sec{padding:54px 0;}
  .ptqa-eng-grid{gap:34px;}
  .ptqa-eng-left h2{
    font-size:clamp(29px,8.5vw,38px);
    line-height:1.2;
  }
  .ptqa-eng-lead{max-width:100%;font-size:15px;}
  .ptqa-eng-right{width:100%;gap:22px;}
  .ptqa-eng-col{width:100%;max-width:none;gap:14px;}
  .ptqa-eng-card{width:100%;padding:15px;}
  .ptqa-eng-orbit{
    width:min(260px,78vw);
    height:min(260px,78vw);
    margin-bottom:8px;
  }
  .ptqa-eng-orbit-img{width:100%;height:100%;}
  .ptqa-eng-orbit-glow{width:70%;height:70%;}
  .ptqa-eng-stats{
    width:100%;
    margin-top:36px;
    padding:18px;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    overflow:visible;
    border-radius:18px;
  }
  .ptqa-eng-stat{white-space:normal;}

  /* Section 4 — Process */
  .ptqa-proc-sec{padding:52px 0 42px;}
  .ptqa-proc-head{gap:16px;}
  .ptqa-proc-head h2{
    font-size:clamp(28px,8vw,34px);
    line-height:1.2;
  }
  .ptqa-proc-lead{max-width:100%;font-size:15px;}
  .ptqa-proc-steps{gap:26px;margin-top:34px;}
  .ptqa-proc-step{width:100%;padding:0;}
  .ptqa-proc-circle{width:78px;height:78px;margin-bottom:14px;}
  .ptqa-proc-circle svg{width:42px;height:42px;}
  .ptqa-proc-desc{
    max-width:320px;
    margin-bottom:0;
    font-size:13.5px;
  }
}

@media (max-width:480px){
  .ptqa-wrap,.ptqa-eng-wrap,.ptqa-proc-wrap,
  .ptqa-connect-sec .ptqa-wrap{
    padding-left:14px;
    padding-right:14px;
  }
  .ptqa-hero{padding:44px 0 40px;}
  .ptqa-hero h1{font-size:32px;}
  .ptqa-eyebrow22{font-size:10.5px;letter-spacing:.12em;}
  .ptqa-features-row{gap:22px 12px;}
  .ptqa-feature .ptqa-icon-badge{width:44px;height:44px;}
  .ptqa-feature .ptqa-ftitle,.ptqa-feature .ptqa-fdesc{font-size:12px;}
  .ptqa-connect-sec,.ptqa-eng-sec{padding:44px 0;}
  .ptqa-conn-card .ptqa-top{gap:10px;}
  .ptqa-conn-card .ptqa-ic{width:42px;height:42px;}
  .ptqa-conn-card .ptqa-cdesc{font-size:13px;}
  .ptqa-hub-wrap{height:240px;min-height:240px;}
  .ptqa-ring1{width:230px;height:230px;}
  .ptqa-ring2{width:180px;height:180px;}
  .ptqa-hub-core{width:165px;height:165px;}
  .ptqa-hub-core .ptqa-stack-img{max-width:165px;}
  .ptqa-eng-card{gap:10px;padding:14px 12px;}
  .ptqa-eng-ctext p{font-size:11.5px;}
  .ptqa-proc-sec{padding:44px 0 38px;}
  .ptqa-svc-evolve-quote-card{margin-top:28px;padding:22px 18px;}
  .ptqa-svc-evolve-quote{font-size:17px;}
}

@media (prefers-reduced-motion:reduce){
  .ptqa-hero *,
  .ptqa-connect-sec *,
  .ptqa-eng-sec *,
  .ptqa-proc-sec *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  .ptqa-eng-card,
  .ptqa-eng-orbit,
  .ptqa-eng-stat,
  .ptqa-conn-card,
  .ptqa-proc-step,
  .ptqa-js-reveal{
    transition:none !important;
  }
}


/*=============================================================
         Continuous Support Enchancemants
=============================================================*/



/* =========================================================
   CONTINUOUS SUPPORT & ENHANCEMENTS
   UNIQUE PREFIX : CSEH
========================================================= */

:root {
    --cseh-dark: #0c0812;
    --cseh-dark-2: #120d1a;

    --cseh-pink: #ff2d78;
    --cseh-orange: #ff7a3d;

    --cseh-gradient:
        linear-gradient(90deg, #ff2d78, #ff7a3d);

    --cseh-light: #f6f5f8;
    --cseh-white: #ffffff;

    --cseh-text: #161320;
    --cseh-muted: #6b6878;
    --cseh-light-muted: #b9b3c7;

    --cseh-border: #ececf1;
}


/* =========================================================
   RESET
========================================================= */

.cseh-hero,
.cseh-provide,
.cseh-process,
.cseh-results,
.cseh-breadcrumb {
    box-sizing: border-box;
}

.cseh-hero *,
.cseh-provide *,
.cseh-process *,
.cseh-results *,
.cseh-breadcrumb * {
    box-sizing: border-box;
}

.cseh-hero h1,
.cseh-hero p,
.cseh-provide h2,
.cseh-provide h3,
.cseh-provide p,
.cseh-process h2,
.cseh-process h4,
.cseh-process p,
.cseh-results h2,
.cseh-results h4,
.cseh-results p {
    margin: 0;
}

.cseh-hero img,
.cseh-provide img,
.cseh-process img,
.cseh-results img {
    max-width: 100%;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.cseh-container {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.cseh-breadcrumb {
    background: var(--cseh-dark);
    color: var(--cseh-light-muted);
    font-size: 13px;
    padding: 18px 0 10px;
}

.cseh-breadcrumb span {
    opacity: 0.8;
}


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

.cseh-hero {
    position: relative;
    overflow: hidden;
    padding: 38px 0 48px;
    color: #fff;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(112, 30, 82, 0.38),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255, 45, 120, 0.08),
            transparent 35%
        ),
        var(--cseh-dark);
}


.cseh-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 55px;
    align-items: center;
}


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

.cseh-hero-content {
    min-width: 0;
}

.cseh-eyebrow,
.cseh-section-eyebrow {
    margin-top: 70px;
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--cseh-pink);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
}

.cseh-eyebrow {
    margin-bottom: 18px;
}

.cseh-eyebrow::after,
.cseh-section-eyebrow::after {
    content: "";
    display: block;

    width: 42px;
    height: 1px;

    background: var(--cseh-pink);
    opacity: 0.65;
}


.cseh-hero h1 {
    max-width: 620px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.12;
    font-weight: 800;

    color: #fff;

    margin-bottom: 20px;
}


.cseh-hero h1 span,
.cseh-section-intro h2 span,
.cseh-process-intro h2 span,
.cseh-results-content h2 span {
    background: var(--cseh-gradient);

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

    color: transparent;
}


.cseh-hero-content > p {
    max-width: 540px;

    color: var(--cseh-light-muted);

    font-size: 17px;
    line-height: 1.75;

    margin-bottom: 28px;
}

.cseh-hero-content h1 span{
    background: linear-gradient(90deg, var(--cseh-pink), var(--cseh-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.cseh-hero-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}

.cseh-hero-content h1{
    text-shadow: none;
}
.cseh-hero-checks > div {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #fff;

    font-size: 13px;
    font-weight: 600;
}


.cseh-check-icon {
    width: 19px;
    height: 19px;

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

    border-radius: 50%;

    background: var(--cseh-gradient);

    font-size: 11px;
}


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

.cseh-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;

    padding: 25px 10px;
}



.cseh-dashboard-imgwrap{
    position: relative;
    z-index: 2;
}

.cseh-dashboard-img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.cseh-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 12px;
}


.cseh-stat-card {
    min-width: 0;

    padding: 10px;

    background: #1e1730;

    border-radius: 8px;
}


.cseh-stat-label {
    color: var(--cseh-light-muted);

    font-size: 9px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.cseh-stat-value {
    color: #fff;

    font-size: 15px;
    font-weight: 800;

    margin-top: 3px;
}


.cseh-stat-growth {
    color: #3ddc84;

    font-size: 9px;

    margin-top: 2px;
}


.cseh-chart-box {
    width: 100%;
    height: 95px;

    overflow: hidden;

    border-radius: 8px;

    background: #1e1730;
}


.cseh-chart-box svg {
    width: 100%;
    height: 100%;
}


/* =========================================================
   FLOATING HERO ICONS
========================================================= */

.cseh-floating-icon {
    position: absolute;
    z-index: 5;

    width: 52px;
    height: 52px;

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

    border-radius: 14px;

    color: #fff;

    font-size: 20px;

    background: var(--cseh-gradient);

    box-shadow:
        0 10px 30px rgba(255, 45, 120, 0.35);

    animation: csehFloat 4s ease-in-out infinite;
}


.cseh-float-code {
    top: 5%;
    left: -2%;
}


.cseh-float-cloud {
    top: 0;
    right: -2%;

    background:
        linear-gradient(
            135deg,
            #3b2fb0,
            #5b4de6
        );

    animation-delay: -1s;
}


.cseh-float-database {
    right: -2%;
    bottom: 4%;

    background:
        linear-gradient(
            135deg,
            #c22a5c,
            #ff2d78
        );

    animation-delay: -2s;
}


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

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


/* =========================================================
   TECHNOLOGY FLOW
========================================================= */

.cseh-flow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: 30px;
}


.cseh-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 9px;
}


.cseh-flow-circle {
    width: 56px;
    height: 56px;

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

    border: 1.5px solid var(--flow-color, #35283f);
    border-radius: 50%;

    background: #160f20;

    color: var(--flow-color, #fff);

    font-size: 20px;

    box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
               0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
    transition:.25s;
}
.cseh-flow-node:hover .cseh-flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.cseh-flow-node:nth-child(1) .cseh-flow-circle{ --flow-color:#3ba7ff; }
.cseh-flow-node:nth-child(3) .cseh-flow-circle{ --flow-color:#ff2d78; }
.cseh-flow-node:nth-child(5) .cseh-flow-circle{ --flow-color:#2dd4c7; }
.cseh-flow-node:nth-child(7) .cseh-flow-circle{ --flow-color:#e8ebff; }

.cseh-flow-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:60px;flex-wrap:wrap;}
.cseh-flow-node{display:flex;flex-direction:column;align-items:center;gap:10px;}
.cseh-flow-circle{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;background:#160f20;
  border:1.5px solid var(--flow-color, #35283f);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
             0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
  color:var(--flow-color, var(--text-light));
  transition:.25s;
}
.cseh-flow-node:hover .cseh-flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.cseh-flow-node:nth-child(1) .cseh-flow-circle{ --flow-color:#3ba7ff; }
.cseh-flow-node:nth-child(3) .cseh-flow-circle{ --flow-color:#ff2d78; }
.cseh-flow-node:nth-child(5) .cseh-flow-circle{ --flow-color:#2dd4c7; }
.cseh-flow-node:nth-child(7) .cseh-flow-circle{ --flow-color:#e8ebff; }
.cseh-flow-node span{font-size:11px;letter-spacing:1px;color:var(--text-light-muted);font-weight:600;}
.cseh-flow-node:hover span{color:var(--flow-color);}
.cseh-flow-arrow{color:var(--orange);font-size:18px;}

@keyframes arrowMove{
  0%{transform:translateX(0); opacity:.35;}
  50%{transform:translateX(8px); opacity:1; text-shadow:0 0 10px var(--cseh-orange);}
  100%{transform:translateX(0); opacity:.35;}
}

.cseh-flow-arrow {
    color: var(--cseh-orange);
    font-size: 18px;
    display: inline-block;
    animation: arrowMove 1.4s ease-in-out infinite;
}
.cseh-flow .cseh-flow-arrow:nth-of-type(1){animation-delay:0s;}
.cseh-flow .cseh-flow-arrow:nth-of-type(2){animation-delay:.3s;}
.cseh-flow .cseh-flow-arrow:nth-of-type(3){animation-delay:.6s;}

.cseh-flow-node span {
    color: var(--cseh-light-muted);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;

    text-align: center;
}


.cseh-flow-arrow {
    color: var(--cseh-orange);

    font-size: 18px;
}


/* =========================================================
   PROVIDE SECTION
========================================================= */

.cseh-provide {
    padding: 80px 0;

    background: #fdf2f6;
}


.cseh-provide-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;
}


.cseh-section-eyebrow {
    margin-bottom: 14px;
}


.cseh-section-intro h2,
.cseh-process-intro h2,
.cseh-results-content h2 {
    font-size: clamp(27px, 3vw, 34px);
    color: #000;
    line-height: 1.25;
    font-weight: 800;
}


.cseh-section-intro > p,
.cseh-process-intro > p,
.cseh-results-content > p {
    color: maroon;

    font-size: 14px;
    line-height: 1.75;

    margin-top: 16px;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.cseh-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.cseh-service-card {
    padding: 24px 20px;

    background: #fff;

    border: 1px solid lightpink;
    border-radius: 13px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
  --card-bg: #ffffff;
  --card-color: var(--cseh-pink);
  background: var(--card-bg);
  transition: background .3s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cseh-service-card:nth-child(1){ --card-bg:#fff1f5; --card-color:#ff2d78; }
.cseh-service-card:nth-child(2){ --card-bg:#eef7ff; --card-color:#3ba7ff; }
.cseh-service-card:nth-child(3){ --card-bg:#fff9ec; --card-color:#ffb020; }
.cseh-service-card:nth-child(4){ --card-bg:#ecfdfb; --card-color:#2dd4c7; }
.cseh-service-card:nth-child(5){ --card-bg:#f5f1ff; --card-color:#8b5cf6; }
.cseh-service-card:nth-child(6){ --card-bg:#fff2ec; --card-color:#ff7a3d; }
.cseh-service-card:nth-child(7){ --card-bg:#eefdf3; --card-color:#22c55e; }
.cseh-service-card:nth-child(8){ --card-bg:#fdeef7; --card-color:#ec4899; }

.cseh-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 60%, var(--cseh-orange)));

    color: #fff;

    font-size: 18px;

    box-shadow: 0 6px 16px color-mix(in srgb, var(--card-color) 45%, transparent);

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

.cseh-service-card:hover .cseh-service-icon {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 65%, transparent);
}
.cseh-service-card:hover .cseh-service-icon{
  background: var(--card-color);
  color: #fff;
}


.cseh-service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 45, 120, 0.2);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.07);
}

/* gradient border on hover */
.cseh-service-card{
  position: relative;
  overflow: hidden;
}
.cseh-service-card::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--cseh-pink), var(--cseh-orange));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.cseh-service-card:hover::before{
  opacity: 1;
}

/* icon pop on hover */
.cseh-service-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.cseh-service-card:hover .cseh-service-icon{
  transform: scale(1.12) rotate(-6deg);
  background: linear-gradient(135deg, var(--cseh-pink), var(--cseh-orange));
  color: #fff;
}

/* scroll reveal setup — cards start hidden */
.cseh-service-card{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.cseh-service-card.cseh-reveal{
  opacity: 1;
  transform: translateY(0);
}

.cseh-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: #fdeef2;

    color: var(--cseh-pink);

    font-size: 18px;
}


.cseh-service-card h3 {
    color: var(--cseh-text);

    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;

    margin-bottom: 8px;
}


.cseh-service-card p {
    color: #000;

    font-size: 12.5px;
    line-height: 1.65;
}


/* =========================================================
   PROCESS
========================================================= */

.cseh-process {
    padding: 50px 0;

    background: var(--cseh-dark);

    color: #fff;
}


.cseh-process-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;

    align-items: center;
}


.cseh-process-intro .cseh-section-eyebrow {
    color: var(--cseh-pink);
}


.cseh-process-intro h2 {
    color: #fff;
}


.cseh-process-intro > p {
    color: var(--cseh-light-muted);
}
/* =========================================================
   PROCESS STEPS
========================================================= */
.cseh-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@keyframes stepPopIn{
  0%{
    opacity:0;
    transform: scale(.4) translateY(30px);
  }
  60%{
    opacity:1;
    transform: scale(1.08) translateY(-6px);
  }
  80%{
    transform: scale(.96) translateY(2px);
  }
  100%{
    opacity:1;
    transform: scale(1) translateY(0);
  }
}
@keyframes lineDraw{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

.cseh-step {
    position: relative;
    z-index: 2;
    text-align: center;

    opacity:0;
    transform:translateY(22px) scale(.96);
    animation:none;
    transition:opacity .65s ease, transform .65s cubic-bezier(.34,1.56,.64,1);
}

.cseh-step.cseh-reveal{
    opacity:1;
    transform:translateY(0) scale(1);
}

.cseh-step-line {
    position: absolute;
    top: 38px;
    left: 8%;
    right: 8%;
    height: 2px;
    z-index: 1;
    border-radius: 2px;

    background: linear-gradient(
        90deg,
        var(--cseh-pink),
        var(--cseh-orange)
    );
    opacity:0;
    transform:scaleX(0);
    transform-origin:left center;
    transition:opacity .7s ease, transform 1s ease;
    overflow: visible;
}

.cseh-step-line.cseh-reveal{
    opacity:.35;
    transform:scaleX(1);
}

@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}
@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}

.cseh-step-line::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);

  width: 22px;
  height: 6px;
  border-radius: 50%;

  background: #fff;
  box-shadow:
    0 0 10px 3px var(--cseh-pink),
    0 0 20px 6px var(--cseh-orange);

  animation: runLight 6.2s linear infinite;
}

.cseh-step:nth-child(2){ --step-color:#ff2d78; animation-delay: .5s; }
.cseh-step:nth-child(3){ --step-color:#3ba7ff; animation-delay: .8s; }
.cseh-step:nth-child(4){ --step-color:#2dd4c7; animation-delay: 1.1s; }
.cseh-step:nth-child(5){ --step-color:#ffb020; animation-delay: 1.4s; }

.cseh-step-circle {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 1.5px solid var(--step-color, var(--cseh-pink));
    border-radius: 50%;
    background: #160f20;
    font-size: 28px;
    color: var(--step-color, #fff);

    box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color, var(--cseh-pink)) 12%, transparent),
                0 0 20px color-mix(in srgb, var(--step-color, var(--cseh-pink)) 45%, transparent);

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

.cseh-step:hover .cseh-step-circle{
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--step-color, var(--cseh-pink)) 20%, transparent),
              0 0 30px color-mix(in srgb, var(--step-color, var(--cseh-pink)) 75%, transparent);
}

.cseh-step-number {
    color: var(--cseh-orange);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
}
.cseh-step:hover .cseh-step-number{
  color: var(--step-color);
}

.cseh-step h4 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 8px;
}
.cseh-step p {
    color: var(--cseh-light-muted);
    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   WHAT YOU GET
========================================================= */

.cseh-results {
    padding: 80px 0;
    background: linear-gradient(
        160deg,
        #ffffff 0%,
        #ffe9f0 35%,
        #ffe3d9 70%,
        #fff5ec 100%
    );
}

@keyframes blobFloat1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-20px) scale(1.1); }
}
@keyframes blobFloat2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-25px,25px) scale(1.15); }
}

.cseh-results {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #fffaf8;
}

.cseh-results::before,
.cseh-results::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.cseh-results::before{
    width: 420px;
    height: 420px;
    top: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(255,45,120,0.35), transparent 70%);
    animation: blobFloat1 9s ease-in-out infinite;
}

.cseh-results::after{
    width: 460px;
    height: 460px;
    bottom: -15%;
    right: -10%;
    background: radial-gradient(circle, rgba(255,122,61,0.35), transparent 70%);
    animation: blobFloat2 11s ease-in-out infinite;
}

.cseh-results-grid{
    position: relative;
    z-index: 1;
}

.cseh-results-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.1fr);

    gap: 60px;

    align-items: center;

    position: relative;   /* NEW */
    z-index: 1; 
}


/* =========================================================
   LAPTOP
========================================================= */

.cseh-laptop-area {
    position: relative;

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

    padding: 30px 20px;
}


.cseh-laptop {
    width: min(100%, 430px);

    position: relative;

    padding: 16px;

    background: #171022;

    border-radius: 14px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.2);
}


.cseh-laptop-screen {
    min-height: 220px;

    padding: 14px;

    border-radius: 8px;

    background: #1e1730;
}


.cseh-laptop-line {
    height: 8px;

    margin-bottom: 8px;

    border-radius: 4px;

    background: #33284a;
}


.cseh-line-40 {
    width: 40%;
}

.cseh-line-60 {
    width: 60%;
}

.cseh-line-80 {
    width: 80%;
}


.cseh-laptop-base {
    height: 14px;

    margin-top: 10px;

    border-radius: 0 0 10px 10px;

    background: #0f0a17;
}

@keyframes laptopFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

.cseh-laptop-img {
    width: min(100%, 460px);
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.25));

    animation: laptopFloat 5s ease-in-out infinite;
}

@keyframes badgeFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes badgePopIn{
  0%{ opacity:0; transform: scale(.3) translateY(20px); }
  60%{ opacity:1; transform: scale(1.15) translateY(-4px); }
  100%{ opacity:1; transform: scale(1) translateY(0); }
}

.cseh-mini-badge{
  opacity: 0;
  animation:
    badgePopIn .6s cubic-bezier(.34,1.56,.64,1) forwards,
    badgeFloat 3.5s ease-in-out infinite;
}

.cseh-mini-code{
  animation-delay: .2s, 1s;   /* pop-in delay, then float delay */
}
.cseh-mini-security{
  animation-delay: .4s, 1.3s;
}
.cseh-mini-growth{
  animation-delay: .6s, 1.6s;
}
.cseh-mini-success{
  animation-delay: .8s, 1.9s;
}

@keyframes benefitSlideIn{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}

.cseh-benefit{
  opacity: 0;
  animation: benefitSlideIn .6s ease forwards;
}

.cseh-benefit:nth-child(1){ animation-delay: .3s; }
.cseh-benefit:nth-child(2){ animation-delay: .5s; }
.cseh-benefit:nth-child(3){ animation-delay: .7s; }
.cseh-benefit:nth-child(4){ animation-delay: .9s; }

.cseh-benefit-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}

.cseh-benefit:hover .cseh-benefit-icon{
  transform: scale(1.15) rotate(-6deg);
  background: linear-gradient(135deg, var(--cseh-pink), var(--cseh-orange));
  color: #fff;
}

/* =========================================================
   LAPTOP FLOATING BADGES
========================================================= */

.cseh-mini-badge {
    position: absolute;
    z-index: 4;

    width: 54px;
    height: 54px;

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

    border-radius: 10px;

    color: #fff;

    font-size: 16px;

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


.cseh-mini-code {
    top: -6%;
    left: 8%;

    background: var(--cseh-gradient);
}


.cseh-mini-security {
    top: -20%;
    right: 10%;

    background: #2b2340;
}


.cseh-mini-growth {
    right: 8%;
    bottom: -14%;

    background: #2b2340;
}


.cseh-mini-success {
    left: 40%;
    bottom: -13%;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: var(--cseh-gradient);
}


/* =========================================================
   BENEFITS
========================================================= */

.cseh-benefit-grid {
    display: grid;

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

    gap: 26px 24px;

    margin-top: 28px;
}


.cseh-benefit {
    display: flex;

    gap: 14px;

    min-width: 0;
}


.cseh-benefit-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 9px;

    background: #fdeef2;

    color: var(--cseh-pink);

    font-size: 17px;
}


.cseh-benefit h4 {
    color: var(--cseh-text);

    font-size: 20px;

    margin-bottom: 5px;
}


.cseh-benefit p {
    color: var(--cseh-muted);

    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .cseh-container {
        width: min(1180px, calc(100% - 48px));
    }


    .cseh-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .cseh-provide-grid,
    .cseh-process-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .cseh-section-intro,
    .cseh-process-intro {
        max-width: 650px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .cseh-hero {
        padding-top: 40px;
    }


    .cseh-hero-grid,
    .cseh-results-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }
    
    .cseh-results-content {
        order: 1;
    }

    .cseh-laptop-area {
        order: 2;
    }

    .cseh-hero-content {
        text-align: center;
    }


    .cseh-eyebrow {
        justify-content: center;
    }


    .cseh-hero h1 {
        margin-left: auto;
        margin-right: auto;
    }


    .cseh-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }


    .cseh-hero-checks {
        justify-content: center;
    }


    .cseh-hero-visual {
        max-width: 680px;

        margin: 0 auto;
    }


    .cseh-results-content {
        max-width: 700px;
        margin: 0 auto;
    }


    .cseh-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 40px;
    }


    .cseh-step-line {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */
/* HERO TEXT MOBILE FIX ONLY
@media screen and (max-width:600px){
  .cseh-hero-content{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:0 4px;
    text-align:left !important;
  }

  .cseh-eyebrow{
    width:100%;
    max-width:100%;
    margin-top:54px;
    margin-bottom:18px;
    justify-content:flex-start !important;
    gap:8px;
    font-size:10px;
    line-height:1.4;
    letter-spacing:.7px;
    white-space:normal;
  }

  .cseh-eyebrow::after{
    width:34px;
    flex:0 0 34px;
  }

  .cseh-hero h1{
    width:100%;
    max-width:360px;
    margin:0 0 18px;
    padding:0;
    font-size:clamp(28px,7.6vw,32px);
    line-height:1.12;
    letter-spacing:-.4px;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .cseh-hero h1 span{
    display:inline;
  }

  .cseh-hero-content > p{
    width:100%;
    max-width:350px;
    margin:0 0 26px;
    padding:0 2px;
    font-size:14px;
    line-height:1.5;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .cseh-hero-checks{
    width:100%;
    max-width:100%;
    margin:0;
    align-items:flex-start;
    gap:11px;
    text-align:left;
  }

  .cseh-hero-checks > div{
    width:auto;
    justify-content:flex-start;
    font-size:13px;
    line-height:1.35;
  }
}

@media screen and (max-width:380px){
  .cseh-eyebrow{margin-top:48px;font-size:9px;}
  .cseh-eyebrow::after{width:26px;flex-basis:26px;}

  .cseh-hero h1{
    max-width:320px;
    font-size:26px;
  }

  .cseh-hero-content > p{
    max-width:320px;
    font-size:13.5px;
  }
}


@media screen and (max-width:380px){
  .cseh-eyebrow{margin-top:48px;font-size:9px;}
  .cseh-eyebrow::after{width:26px;flex-basis:26px;}

  .cseh-hero h1{
    max-width:320px;
    font-size:26px;
  }

  .cseh-hero-content > p{
    max-width:320px;
    font-size:13.5px;
  }
}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .cseh-container {
        width: calc(100% - 24px);
    }


    .cseh-hero h1 {
        font-size: 28px;
    }


    .cseh-dashboard-sidebar {
        width: 65px;
        flex-basis: 65px;
    }


    .cseh-dashboard-main {
        padding: 8px;
    }


    .cseh-stat-value {
        font-size: 10px;
    }


    .cseh-flow {
        gap: 4px;
    }


    .cseh-flow-circle {
        width: 38px;
        height: 38px;
    }


    .cseh-flow-arrow {
        font-size: 11px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .cseh-floating-icon,
    .cseh-service-card,
    .cseh-step,
    .cseh-step-line {
        animation: none;
        transition: none;
    }

    .cseh-service-card,
    .cseh-step,
    .cseh-step-line{
        opacity:1;
        transform:none;
    }

}
























/*//=============================================================
//              Experience Design (UI/UX)
// =============================================================*/

:root{
    --xdz-dark:#0b0710;
    --xdz-dark2:#120a18;
    --xdz-pink:#ff2d78;
    --xdz-orange:#ff7a3d;
    --xdz-gradient: linear-gradient(90deg,var(--xdz-pink),var(--xdz-orange));
    --xdz-light:#f7f5f8;
    --xdz-white:#ffffff;
    --xdz-text:#17121f;
    --xdz-muted:#645f70;
    --xdz-text-light:#ffffff;
    --xdz-text-light-muted:#bdb6c9;
    --xdz-border:#eceaf0;
    --xdz-radius:16px;
    --xdz-max:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Poppins',Arial,Helvetica,sans-serif;
    background:var(--xdz-light);
    color:var(--xdz-text);
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  .xdz-container{max-width:var(--xdz-max);margin:0 auto;padding:0 40px;}
  h1,h2,h3,h4{font-weight:800;letter-spacing:-0.01em;}
  .xdz-accent{background:var(--xdz-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}

  .xdz-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--xdz-pink);font-size:12px;font-weight:700;letter-spacing:1.2px;
    border:1px solid rgba(255,45,120,.4);
    padding:6px 14px;border-radius:100px;
    margin-bottom:20px;
    margin-top: 30px;
  }
  .xdz-eyebrow.xdz-plain{border:none;padding:0;}
  .xdz-eyebrow.xdz-plain::after{content:"";flex:1;max-width:50px;height:1px;background:var(--xdz-pink);opacity:.6;}

  /* ================= HERO ================= */
  .xdz-hero{
    background:radial-gradient(ellipse at 80% 20%, #2a0f22 0%, var(--xdz-dark) 55%);
    padding:70px 0 60px;
    overflow:hidden;
  }
  .xdz-hero-grid{
    display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center;
  }
  .xdz-hero-content h1{
    font-size:49px;line-height:1.14;color:var(--xdz-text-light);margin-bottom:20px;
  }

  .xdz-hero-content h1 span{
    background: linear-gradient(90deg, var(--xdz-pink), var(--xdz-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}
  .xdz-hero-content p{
    color:var(--xdz-text-light-muted);font-size:15.5px;line-height:1.75;max-width:480px;margin-bottom:30px;
  }
  .xdz-hero-ctas{display:flex;gap:14px;margin-bottom:44px;flex-wrap:wrap;}
  .xdz-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 26px;border-radius:100px;
    font-weight:600;font-size:14.5px;
    transition:.25s;
    border:1.5px solid transparent;
  }
  .xdz-btn-primary{
    background:var(--xdz-gradient);color:#fff;
    box-shadow:0 10px 30px rgba(255,45,120,.35);
  }
  .xdz-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,45,120,.5);}
  .xdz-btn-outline{
    background:transparent;color:#fff;border-color:rgba(255,255,255,.25);
  }
  .xdz-btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.06);}

  .xdz-stats{display:flex;gap:20px;flex-wrap:wrap;}
  .xdz-stat{display:flex;align-items:center;gap:6px;}
  .xdz-stat-icon{
    width:42px;height:42px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,45,120,.12);color:var(--xdz-pink);font-size:18px;
  }
  .xdz-stat strong{display:block;font-size:16px;color:#fff;font-weight:800;line-height:1.1;}
  .xdz-stat span{font-size:11.5px;color:#fff;font-weight:500;}
  .xdz-hero-img{
    width: 130%;
    max-width: 680px;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.4));
  }

  /* hero visual - 3D cube */
  .xdz-hero-visual{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;}
  .xdz-hero-orbit-icon{
    position:absolute;width:52px;height:52px;border-radius:14px;
    background:#1c1226;border:1px solid rgba(255,45,120,.35);
    display:flex;align-items:center;justify-content:center;
    color:var(--xdz-pink);font-size:20px;
    box-shadow:0 12px 30px rgba(0,0,0,.4);
    animation:aiFloat 4.5s ease-in-out infinite;
  }
  .xdz-hero-orbit-icon.xdz-o1{top:8%; left:2%; animation-delay:0s;}
  .xdz-hero-orbit-icon.xdz-o2{top:2%; right:8%; animation-delay:.8s;}
  .xdz-hero-orbit-icon.xdz-o3{bottom:14%; left:-2%; animation-delay:1.6s;}
  .xdz-hero-orbit-icon.xdz-o4{bottom:6%; right:0%; animation-delay:2.4s;}
  @keyframes aiFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
  }

  /* ================= SERVICES ================= */
.xdz-services{
  background: linear-gradient(180deg, #ffffff 0%, #fdf7f9 100%);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.xdz-services::before{
  content:"";
  position:absolute; top:-15%; left:-10%;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.xdz-services::after{
  content:"";
  position:absolute; bottom:-15%; right:-8%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,122,61,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.xdz-services .xdz-container{position:relative; z-index:1;}

.xdz-services-head{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:50px;
}
.xdz-services-head h2{font-size:40px;line-height:1.25;}
.xdz-services-head .xdz-lead{color:var(--xdz-muted);font-size:16.5px;line-height:1.8;padding-bottom:4px;}

/* --- marquee track --- */
.xdz-marquee{
  overflow: hidden;
  position: relative;
  padding: 30px 0 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.xdz-service-grid{
  display:flex;
  gap:22px;
  width:max-content;
  perspective: 1200px;
}

.xdz-service-card{
  --card-color: var(--xdz-pink);
  background:#fff;
  border:1px solid var(--xdz-border);
  border-radius:20px;
  padding:30px 24px;
  position:relative;
  overflow:hidden;
  width: 240px;
  flex: 0 0 260px;
  transform-style: preserve-3d;
  transition: box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
.xdz-service-card:nth-child(5n+1){ --card-color:#ff2d78; }
.xdz-service-card:nth-child(5n+2){ --card-color:#8b5cf6; }
.xdz-service-card:nth-child(5n+3){ --card-color:#3ba7ff; }
.xdz-service-card:nth-child(5n+4){ --card-color:#2dd4c7; }
.xdz-service-card:nth-child(5n+5){ --card-color:#ffb020; }

.xdz-service-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--card-color), transparent);
}

.xdz-service-card:hover{
  box-shadow: 0 30px 50px color-mix(in srgb, var(--card-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--card-color) 35%, transparent);
}

.xdz-marquee-dots{
  display:flex;justify-content:center;gap:8px;margin-top:26px;
}
.xdz-marquee-dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--xdz-border);
  transition: all .3s ease;
}
.xdz-marquee-dot.xdz-dot-active{
  width:26px;border-radius:5px;
  background: var(--xdz-gradient);
}

.xdz-service-num{
  font-size:26px;
  font-weight:800;
  color: color-mix(in srgb, var(--card-color) 20%, white);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--card-color) 55%, transparent);
  margin-bottom:4px;
  line-height:1;
  transform: translateZ(25px);
  transition: text-shadow .3s ease, color .3s ease;
}
.xdz-service-card.xdz-card-focused .xdz-service-num{
  color: var(--card-color);
  text-shadow: 0 0 18px color-mix(in srgb, var(--card-color) 60%, transparent);
}

.xdz-service-icon{
  width:48px;height:48px;border-radius:15px;
  background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 55%, var(--xdz-orange)));
  display:flex;align-items:center;justify-content:center;
  color: whitesmoke;font-size:22px;margin-bottom:16px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 45%, transparent);
  transition: transform .3s ease;
  transform: translateZ(35px);
}
.xdz-service-card:hover .xdz-service-icon{
  transform: translateZ(35px) scale(1.12) rotate(-8deg);
}

.xdz-service-card h3{
  font-size:16px;line-height:1.28;margin-bottom:6px;color:var(--xdz-text);
  min-height:0;
  transform: translateZ(20px);
}

.xdz-service-card ul{margin-bottom:8px; transform: translateZ(15px);}
.xdz-service-card li{
 font-size:13.5px;color: black;line-height:1.55;padding-left:16px;position:relative;
}
.xdz-service-card li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
  background: var(--card-color);
}

.xdz-service-link{
  font-size:12.5px;font-weight:700;color:var(--card-color);display:inline-flex;align-items:center;gap:6px;
  transform: translateZ(20px);
}
.xdz-service-link svg{width:13px;height:13px;transition:.2s;}
.xdz-service-card:hover .xdz-service-link svg{transform:translateX(4px);}

@media (prefers-reduced-motion: reduce){
  .xdz-service-grid{ animation:none !important; }
}

  /* ================= TECH STACK ================= */
 .xdz-tech{
  background: var(--xdz-dark);
  padding: 70px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.xdz-terminal{
  background:#0f0a17; border:1px solid rgba(255,45,120,.25); border-radius:12px;
  padding:16px 20px; max-width:520px; margin-bottom:40px; font-family:'Poppins';
}
.xdz-terminal-bar{display:flex; gap:6px; margin-bottom:12px;}
.xdz-terminal-bar span{width:9px;height:9px;border-radius:50%;background:#444;}
.xdz-terminal-body{font-size:13px; color:#3ddc84;}
.xdz-terminal-prompt{color:var(--xdz-pink); margin-right:8px;}
.xdz-cursor{animation: aiBlink 1s step-end infinite;}
@keyframes aiBlink{50%{opacity:0;}}

.xdz-tech-grid{
  perspective: 1000px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
}
.xdz-tech-col{
  transform: translateZ(0) rotateX(2deg);
  transition: transform .3s ease;
}
.xdz-tech-col:hover{
  transform: translateZ(20px) rotateX(0deg) translateY(-4px);
}

.xdz-tech-icon{ transition: transform .4s cubic-bezier(.34,1.56,.64,1); }

.xdz-tech-ticker-wrap{overflow:hidden; margin-top:40px; border-top:1px solid rgba(255,255,255,.08); padding-top:20px; width: 100%}
.xdz-tech-ticker{display:flex; gap:14px; width:max-content; animation: aiTicker 20s linear infinite; font-size:16px; color:var(--xdz-text-light-muted); white-space: nowrap;}
.xdz-tech-ticker span{
  margin-right: 6px;
}
.xdz-tech-ticker span:nth-child(odd){color:var(--xdz-pink); font-weight:600;}

@keyframes aiTicker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.xdz-tech::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, rgba(255,45,120,.18) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:.4;
  z-index:0;
  animation: aiDotsDrift 18s linear infinite;
}
.xdz-tech .xdz-container{ position:relative; z-index:1; }

@keyframes aiDotsDrift{
  from{ background-position: 0 0; }
  to{ background-position: 68px 68px; }
}

.xdz-tech::after{
  content:"";
  position:absolute; top:-10%; right:-8%;
  width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,122,61,.14), transparent 70%);
  filter: blur(20px);
  z-index:0;
}

@keyframes aiTechIn{
  from{ opacity:0; transform: translateY(26px); }
  to{ opacity:1; transform: translateY(0); }
}

.xdz-tech-col{
  opacity:0;
  animation: aiTechIn .6s ease forwards;
}
.xdz-tech-col:nth-child(1){ animation-delay:.05s; }
.xdz-tech-col:nth-child(2){ animation-delay:.15s; }
.xdz-tech-col:nth-child(3){ animation-delay:.25s; }
.xdz-tech-col:nth-child(4){ animation-delay:.35s; }
.xdz-tech-col:nth-child(5){ animation-delay:.45s; }
.xdz-tech-col:nth-child(6){ animation-delay:.55s; }

.xdz-tech-top{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:50px;
  align-items:center;
  margin-bottom:30px;
  color: #fff;
}
.xdz-tech-top h2{font-size:35px;line-height:1.28; color: #fff;}
.xdz-tech-top p{color: whitesmoke;font-size:14.5px;line-height:1.8;}

.xdz-terminal{
  background:#0f0a17; border:1px solid rgba(255,45,120,.25); border-radius:12px;
  padding:16px 20px; width:100%; margin-bottom:44px; font-family: 'Poppins';
}
.xdz-terminal-body{font-size:13px; color:#3ddc84; min-height:18px;}

  .xdz-tech-grid{
    display:grid;grid-template-columns:repeat(6,1fr);gap:44px;
  }
  .xdz-tech-col-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
  .xdz-tech-icon{
    width:36px;height:36px;border-radius:9px;
    background:rgba(255,45,120,.12);border:1px solid rgba(255,45,120,.3);
    display:flex;align-items:center;justify-content:center;color:var(--xdz-pink);font-size:17px;
    flex-shrink:0;
  }
  .xdz-tech-col-head h4{font-size:14px;font-weight:700;color:#fff;line-height:1.35;}
 .xdz-tech-col li{font-size:14px;color: whitesmoke;line-height:2;}


  /* ================= INDUSTRIES ================= */
.xdz-industries{
  background: linear-gradient(180deg, #ffffff 0%, #fdf2f6 100%);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}
.xdz-industries::before{
  content:"";
  position:absolute; top:-15%; left:-8%;
  width:400px; height:400px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.14), transparent 70%);
  filter: blur(20px); z-index:0;
  animation: aiBlobFloat1 10s ease-in-out infinite;
}
.xdz-industries::after{
  content:"";
  position:absolute; bottom:-15%; right:-8%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(139,92,246,.13), transparent 70%);
  filter: blur(20px); z-index:0;
  animation: aiBlobFloat2 12s ease-in-out infinite;
}
@keyframes aiBlobFloat1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-20px) scale(1.1); }
}
@keyframes aiBlobFloat2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-25px,25px) scale(1.15); }
}
.xdz-industries .xdz-container{ position:relative; z-index:1; }

.xdz-industries-top{
  text-align:center;
  display:block;
  margin-bottom:50px;
}
.xdz-industries-top h2{
  font-size:32px;
  line-height:1.3;
  max-width:600px;
  margin:0 auto;
  color:#000;
}
.xdz-industries-top .xdz-rule{
  margin:18px auto 0;
}

.xdz-ind-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:16px;
}

.xdz-ind-card{
  perspective: 1000px;
  height:210px;
  position: relative;
  border-radius: 14px;
  cursor:pointer;
  opacity:0;
  animation: aiIndPop .5s ease forwards;
  transition: transform .3s ease;
}
.xdz-ind-card:hover{
  transform: translateY(-6px);
}

@keyframes aiIndPop{
  0%{ opacity:0; transform: translateY(22px) scale(.9); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
.xdz-ind-card:nth-child(1){animation-delay:.03s;} .xdz-ind-card:nth-child(2){animation-delay:.06s;}
.xdz-ind-card:nth-child(3){animation-delay:.09s;} .xdz-ind-card:nth-child(4){animation-delay:.12s;}
.xdz-ind-card:nth-child(5){animation-delay:.15s;} .xdz-ind-card:nth-child(6){animation-delay:.18s;}
.xdz-ind-card:nth-child(7){animation-delay:.21s;} .xdz-ind-card:nth-child(8){animation-delay:.24s;}
.xdz-ind-card:nth-child(9){animation-delay:.27s;} .xdz-ind-card:nth-child(10){animation-delay:.30s;}
.xdz-ind-card:nth-child(11){animation-delay:.33s;} .xdz-ind-card:nth-child(12){animation-delay:.36s;}
.xdz-ind-card:nth-child(13){animation-delay:.39s;} .xdz-ind-card:nth-child(14){animation-delay:.42s;}

.xdz-ind-card::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:14px;
  background: conic-gradient(from 0deg, var(--card-color), var(--card-color-2), var(--card-color));
  animation: aiBorderSpin 4s linear infinite;
  z-index:0;
}
@keyframes aiBorderSpin{
  from{ filter: hue-rotate(0deg); }
  to{ filter: hue-rotate(360deg); }
}

.xdz-ind-card:nth-child(7n+1){ --card-color:#ff2d78; --card-color-2:#ff7a3d; }
.xdz-ind-card:nth-child(7n+2){ --card-color:#8b5cf6; --card-color-2:#3ba7ff; }
.xdz-ind-card:nth-child(7n+3){ --card-color:#3ba7ff; --card-color-2:#2dd4c7; }
.xdz-ind-card:nth-child(7n+4){ --card-color:#2dd4c7; --card-color-2:#22c55e; }
.xdz-ind-card:nth-child(7n+5){ --card-color:#ffb020; --card-color-2:#ff7a3d; }
.xdz-ind-card:nth-child(7n+6){ --card-color:#ec4899; --card-color-2:#ff2d78; }
.xdz-ind-card:nth-child(7n+7){ --card-color:#22c55e; --card-color-2:#2dd4c7; }

.xdz-ind-inner{
  position:relative; z-index:1;
  width:100%; height:100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4,.2,.2,1);
}
.xdz-ind-card:hover .xdz-ind-inner,
.xdz-ind-card.xdz-flipped .xdz-ind-inner{
  transform: rotateY(180deg);
}

.xdz-ind-front, .xdz-ind-back{
  position:absolute; inset:0;
  backface-visibility: hidden;
  border-radius:16px;
  padding:16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border: 2px solid transparent;
  background-image: linear-gradient(#fff,#fff), linear-gradient(135deg, var(--card-color,#ff2d78), var(--card-color-2,#ff7a3d));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.xdz-ind-back{
  transform: rotateY(180deg);
}

.xdz-ind-icon{
  width:48px;height:48px;margin:0 auto 12px;border-radius:14px;
  background: linear-gradient(135deg, var(--card-color), var(--card-color-2));
  color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 45%, transparent);
  animation: aiIconFloat 3s ease-in-out infinite;
}
@keyframes aiIconFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-5px) rotate(-4deg); }
}
.xdz-ind-card:hover .xdz-ind-icon{
  animation: aiIconFloat 3s ease-in-out infinite, aiIconPop .5s ease;
}
@keyframes aiIconPop{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.2); }
}

.xdz-ind-front span{
  font-size:15px;font-weight:600;color:var(--xdz-text);line-height:1.4;
}
.xdz-ind-back p{
  font-size:13px; color: #000; line-height:1.6; margin-bottom:10px;
}
.xdz-ind-back .xdz-ind-badge{
  font-size:9.5px; font-weight:700; color:var(--card-color);
  border:1px solid var(--card-color); border-radius:100px; padding:3px 10px;
}

@media(max-width:1024px){
  .xdz-ind-grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:640px){
  .xdz-ind-grid{grid-template-columns:repeat(2,1fr);}
}

/* ================= WHY CHOOSE ================= */
.xdz-why{
  background: var(--xdz-dark2);
  padding: 90px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.xdz-why::before{
  content:"";
  position:absolute; top:-10%; right:-8%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,120,.10), transparent 70%);
  filter: blur(20px); z-index:0;
}
.xdz-why .xdz-container{ position:relative; z-index:1; }

.xdz-why-top h2{font-size:34px;line-height:1.28;margin-bottom:14px;color: #fff}
.xdz-why-top .xdz-rule{width:44px;height:3px;background:var(--xdz-gradient);border-radius:2px;margin-bottom:44px;}

.xdz-why-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:22px;
}

@media(max-width:900px){
  .xdz-why-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media(max-width:640px){
  .xdz-why-grid{grid-template-columns:1fr !important;}
}
.xdz-why-item{
  background: rgba(255,255,255,.03);
  border: 1px solid color-mix(in srgb, var(--wc) 35%, transparent);
  border-radius: 18px;
  padding: 28px 24px;
  text-align:left;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
  opacity:0;
  animation: aiWhyIn .6s ease forwards;
}
.xdz-why-item:nth-child(1){ --wc:#ff2d78; animation-delay:.05s; }
.xdz-why-item:nth-child(2){ --wc:#8b5cf6; animation-delay:.15s; }
.xdz-why-item:nth-child(3){ --wc:#3ba7ff; animation-delay:.25s; }
.xdz-why-item:nth-child(4){ --wc:#2dd4c7; animation-delay:.35s; }
.xdz-why-item:nth-child(5){ --wc:#ffb020; animation-delay:.45s; }
.xdz-why-item:nth-child(6){ --wc:#ec4899; animation-delay:.55s; }

@keyframes aiWhyIn{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}

.xdz-why-item:hover{
  transform: translateY(-8px);
  background: rgba(255,255,255,.05);
  border-color: var(--wc);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--wc) 20%, transparent);
}

.xdz-why-icon{
  width:56px;height:56px;border-radius:14px;
  background: color-mix(in srgb, var(--wc) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--wc) 40%, transparent);
  display:flex;align-items:center;justify-content:center;
  color: var(--wc); font-size:22px;
  margin-bottom:18px;
  transition: transform .3s ease, background .3s ease;
}
.xdz-why-item:hover .xdz-why-icon{
  transform: scale(1.12) rotate(-6deg);
  background: var(--wc);
  color:#fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--wc) 55%, transparent);
}

.xdz-why-item h4{
  font-size:16.5px;
  color: var(--wc);
  margin-bottom:10px;
  font-weight:700;
}
.xdz-why-item p{
  font-size:13.5px; color: whitesmoke; line-height:1.7;
}

/* ================= CTA ================= */
.xdz-cta-wrap{padding:0 0 60px;background:var(--xdz-dark2);}

.xdz-cta{
  max-width:var(--xdz-max);margin:0 auto;
  border-radius:24px;padding:48px 50px;
  display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  position:relative;overflow:hidden;
  border:1px solid rgba(255,45,120,.25);

  background: linear-gradient(120deg, #2a0f22, #1a0f28, #2a1a12, #1a0f28);
  background-size: 300% 300%;
  animation: aiCtaGradient 10s ease infinite;
}
@keyframes aiCtaGradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.xdz-cta::after{
  content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,61,.35), transparent 70%);
}
.xdz-cta::before{
  content:"";position:absolute;left:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,45,120,.28), transparent 70%);
}

.xdz-cta-text{position:relative;z-index:1;max-width:560px;}
.xdz-cta-text h2{font-size:30px;color:#fff;line-height:1.3;margin-bottom:12px;}
.xdz-cta-text p{color: wheat;font-size:15.5px;line-height:1.7;}

.xdz-cta-right{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}

.xdz-cta .xdz-btn{position:relative;white-space:nowrap;}

.xdz-cta-btn-wrap{
  position:relative;
  display:inline-flex;
  border-radius:100px;
}
.xdz-cta-btn-wrap .xdz-btn{
  animation: aiBtnPulse 2.2s ease-in-out infinite;
}
@keyframes aiBtnPulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,45,120,.5); }
  70%{ box-shadow: 0 0 0 14px rgba(255,45,120,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,45,120,0); }
}

.xdz-cta-trust{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color: var(--xdz-text-light-muted);
}
.xdz-cta-trust span{ display:flex; align-items:center; gap:6px; }
.xdz-cta-trust span:not(.xdz-dot)::before{
  content:"✓";
  color: var(--xdz-pink);
  font-weight:700;
  margin-right:2px;
}
.xdz-cta-trust .xdz-dot{ opacity:.4; }

@media(max-width:640px){
  .xdz-cta{padding:34px 26px;}
  .xdz-cta-text h2{font-size:22px;}
  .xdz-cta-right{align-items:flex-start; width:100%;}
}

  /* ================= RESPONSIVE ================= */
  @media(max-width:1024px){
    .xdz-service-grid{grid-template-columns:repeat(3,1fr);}
    .xdz-tech-grid{grid-template-columns:repeat(3,1fr);}
    .xdz-ind-grid{grid-template-columns:repeat(4,1fr);}
    .xdz-why-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media(max-width:900px){
    .xdz-hero-grid{grid-template-columns:1fr;}
    .xdz-hero-visual{
    order:2;
    min-height:260px;
    margin-top:10px;
  }
    .xdz-services-head, .xdz-tech-top, .xdz-industries-top{grid-template-columns:1fr;}
  }
  @media(max-width:640px){
    .xdz-container{padding:0 20px;}
    .xdz-hero-content h1{font-size:32px;}
    .xdz-service-grid{grid-template-columns:1fr;}
    .xdz-tech-grid{grid-template-columns:repeat(2,1fr);}
    .xdz-ind-grid{grid-template-columns:repeat(2,1fr);}
    .xdz-why-grid{grid-template-columns:1fr 1fr;}
    .xdz-stats{gap:22px;}
    .xdz-cta{padding:34px 26px;}
    .xdz-cta-text h2{font-size:22px;}
  }

  @media (prefers-reduced-motion: reduce){
    .xdz-cube, .xdz-hero-orbit-icon{animation:none !important;}
  }

/*======================================================================
                 Business Consulting Services
======================================================================
*/


/* =========================================================
   BUSINESS CONSULTING SERVICES
   UNIQUE PREFIX : BCSS
========================================================= */

:root {
    --bcss-dark: #0c0812;
    --bcss-dark-2: #120d1a;

    --bcss-pink: #ff2d78;
    --bcss-orange: #ff7a3d;

    --bcss-gradient:
        linear-gradient(90deg, #ff2d78, #ff7a3d);

    --bcss-light: #f6f5f8;
    --bcss-white: #ffffff;

    --bcss-text: #161320;
    --bcss-muted: #6b6878;
    --bcss-light-muted: #b9b3c7;

    --bcss-border: #ececf1;
}


/* =========================================================
   RESET
========================================================= */

.bcss-hero,
.bcss-provide,
.bcss-process,
.bcss-results,
.bcss-breadcrumb {
    box-sizing: border-box;
}

.bcss-hero *,
.bcss-provide *,
.bcss-process *,
.bcss-results *,
.bcss-breadcrumb * {
    box-sizing: border-box;
}

.bcss-hero h1,
.bcss-hero p,
.bcss-provide h2,
.bcss-provide h3,
.bcss-provide p,
.bcss-process h2,
.bcss-process h4,
.bcss-process p,
.bcss-results h2,
.bcss-results h4,
.bcss-results p {
    margin: 0;
}

.bcss-hero img,
.bcss-provide img,
.bcss-process img,
.bcss-results img {
    max-width: 100%;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.bcss-container {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.bcss-breadcrumb {
    background: var(--bcss-dark);
    color: var(--bcss-light-muted);
    font-size: 13px;
    padding: 18px 0 10px;
}

.bcss-breadcrumb span {
    opacity: 0.8;
}


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

.bcss-hero {
    position: relative;
    overflow: hidden;
    padding: 38px 0 48px;
    color: #fff;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(112, 30, 82, 0.38),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255, 45, 120, 0.08),
            transparent 35%
        ),
        var(--bcss-dark);
}


.bcss-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 55px;
    align-items: center;
}


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

.bcss-hero-content {
    min-width: 0;
}

.bcss-eyebrow,
.bcss-section-eyebrow {
    margin-top: 70px;
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--bcss-pink);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
}

.bcss-eyebrow {
    margin-bottom: 18px;
}

.bcss-eyebrow::after,
.bcss-section-eyebrow::after {
    content: "";
    display: block;

    width: 42px;
    height: 1px;

    background: var(--bcss-pink);
    opacity: 0.65;
}


.bcss-hero h1 {
    max-width: 620px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.12;
    font-weight: 800;

    color: #fff;

    margin-bottom: 20px;
}


.bcss-hero h1 span,
.bcss-section-intro h2 span,
.bcss-process-intro h2 span,
.bcss-results-content h2 span {
    background: var(--bcss-gradient);

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

    color: transparent;
}


.bcss-hero-content > p {
    max-width: 540px;

    color: var(--bcss-light-muted);

    font-size: 17px;
    line-height: 1.75;

    margin-bottom: 28px;
}

.bcss-hero-content h1 span{
    background: linear-gradient(90deg, var(--bcss-pink), var(--bcss-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.bcss-hero-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}

.bcss-hero-content h1{
    text-shadow: none;
}
.bcss-hero-checks > div {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #fff;

    font-size: 13px;
    font-weight: 600;
}


.bcss-check-icon {
    width: 19px;
    height: 19px;

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

    border-radius: 50%;

    background: var(--bcss-gradient);

    font-size: 11px;
}


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

.bcss-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;

    padding: 25px 10px;
}



.bcss-dashboard-imgwrap{
    position: relative;
    z-index: 2;
}

.bcss-dashboard-img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.bcss-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 12px;
}


.bcss-stat-card {
    min-width: 0;

    padding: 10px;

    background: #1e1730;

    border-radius: 8px;
}


.bcss-stat-label {
    color: var(--bcss-light-muted);

    font-size: 9px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.bcss-stat-value {
    color: #fff;

    font-size: 15px;
    font-weight: 800;

    margin-top: 3px;
}


.bcss-stat-growth {
    color: #3ddc84;

    font-size: 9px;

    margin-top: 2px;
}


.bcss-chart-box {
    width: 100%;
    height: 95px;

    overflow: hidden;

    border-radius: 8px;

    background: #1e1730;
}


.bcss-chart-box svg {
    width: 100%;
    height: 100%;
}


/* =========================================================
   FLOATING HERO ICONS
========================================================= */

.bcss-floating-icon {
    position: absolute;
    z-index: 5;

    width: 52px;
    height: 52px;

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

    border-radius: 14px;

    color: #fff;

    font-size: 20px;

    background: var(--bcss-gradient);

    box-shadow:
        0 10px 30px rgba(255, 45, 120, 0.35);

    animation: bcssFloat 4s ease-in-out infinite;
}


.bcss-float-code {
    top: 5%;
    left: -2%;
}


.bcss-float-cloud {
    top: 0;
    right: -2%;

    background:
        linear-gradient(
            135deg,
            #3b2fb0,
            #5b4de6
        );

    animation-delay: -1s;
}


.bcss-float-database {
    right: -2%;
    bottom: 4%;

    background:
        linear-gradient(
            135deg,
            #c22a5c,
            #ff2d78
        );

    animation-delay: -2s;
}


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

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


/* =========================================================
   TECHNOLOGY FLOW
========================================================= */

.bcss-flow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: 30px;
}


.bcss-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 9px;
}


.bcss-flow-circle {
    width: 56px;
    height: 56px;

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

    border: 1.5px solid var(--flow-color, #35283f);
    border-radius: 50%;

    background: #160f20;

    color: var(--flow-color, #fff);

    font-size: 20px;

    box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
               0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
    transition:.25s;
}
.bcss-flow-node:hover .bcss-flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.bcss-flow-node:nth-child(1) .bcss-flow-circle{ --flow-color:#3ba7ff; }
.bcss-flow-node:nth-child(3) .bcss-flow-circle{ --flow-color:#ff2d78; }
.bcss-flow-node:nth-child(5) .bcss-flow-circle{ --flow-color:#2dd4c7; }
.bcss-flow-node:nth-child(7) .bcss-flow-circle{ --flow-color:#e8ebff; }

.flow-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:60px;flex-wrap:wrap;}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:10px;}
.flow-circle{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;background:#160f20;
  border:1.5px solid var(--flow-color, #35283f);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
             0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
  color:var(--flow-color, var(--text-light));
  transition:.25s;
}
.flow-node:hover .flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.flow-node:nth-child(1) .flow-circle{ --flow-color:#3ba7ff; }
.flow-node:nth-child(3) .flow-circle{ --flow-color:#ff2d78; }
.flow-node:nth-child(5) .flow-circle{ --flow-color:#2dd4c7; }
.flow-node:nth-child(7) .flow-circle{ --flow-color:#e8ebff; }
.flow-node span{font-size:11px;letter-spacing:1px;color:var(--text-light-muted);font-weight:600;}
.flow-node:hover span{color:var(--flow-color);}
.flow-arrow{color:var(--orange);font-size:18px;}

@keyframes arrowMove{
  0%{transform:translateX(0); opacity:.35;}
  50%{transform:translateX(8px); opacity:1; text-shadow:0 0 10px var(--bcss-orange);}
  100%{transform:translateX(0); opacity:.35;}
}

.bcss-flow-arrow {
    color: var(--bcss-orange);
    font-size: 18px;
    display: inline-block;
    animation: arrowMove 1.4s ease-in-out infinite;
}
.bcss-flow .bcss-flow-arrow:nth-of-type(1){animation-delay:0s;}
.bcss-flow .bcss-flow-arrow:nth-of-type(2){animation-delay:.3s;}
.bcss-flow .bcss-flow-arrow:nth-of-type(3){animation-delay:.6s;}

.bcss-flow-node span {
    color: var(--bcss-light-muted);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;

    text-align: center;
}


.bcss-flow-arrow {
    color: var(--bcss-orange);

    font-size: 18px;
}


/* =========================================================
   PROVIDE SECTION
========================================================= */

.bcss-provide {
    padding: 80px 0;

    background: #fdf2f6;
}


.bcss-provide-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;
}


.bcss-section-eyebrow {
    margin-bottom: 14px;
}


.bcss-section-intro h2,
.bcss-process-intro h2,
.bcss-results-content h2 {
    font-size: clamp(27px, 3vw, 34px);
    color: #000;
    line-height: 1.25;
    font-weight: 800;
}


.bcss-section-intro > p,
.bcss-process-intro > p,
.bcss-results-content > p {
    color: maroon;

    font-size: 14px;
    line-height: 1.75;

    margin-top: 16px;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.bcss-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.bcss-service-card {
    padding: 24px 20px;

    background: #fff;

    border: 1px solid lightpink;
    border-radius: 13px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
  --card-bg: #ffffff;
  --card-color: var(--bcss-pink);
  background: var(--card-bg);
  transition: background .3s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.bcss-service-card:nth-child(1){ --card-bg:#fff1f5; --card-color:#ff2d78; }
.bcss-service-card:nth-child(2){ --card-bg:#eef7ff; --card-color:#3ba7ff; }
.bcss-service-card:nth-child(3){ --card-bg:#fff9ec; --card-color:#ffb020; }
.bcss-service-card:nth-child(4){ --card-bg:#ecfdfb; --card-color:#2dd4c7; }
.bcss-service-card:nth-child(5){ --card-bg:#f5f1ff; --card-color:#8b5cf6; }
.bcss-service-card:nth-child(6){ --card-bg:#fff2ec; --card-color:#ff7a3d; }
.bcss-service-card:nth-child(7){ --card-bg:#eefdf3; --card-color:#22c55e; }
.bcss-service-card:nth-child(8){ --card-bg:#fdeef7; --card-color:#ec4899; }

.bcss-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 60%, var(--bcss-orange)));

    color: #fff;

    font-size: 18px;

    box-shadow: 0 6px 16px color-mix(in srgb, var(--card-color) 45%, transparent);

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

.bcss-service-card:hover .bcss-service-icon {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 65%, transparent);
}
.bcss-service-card:hover .bcss-service-icon{
  background: var(--card-color);
  color: #fff;
}


.bcss-service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 45, 120, 0.2);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.07);
}

/* gradient border on hover */
.bcss-service-card{
  position: relative;
  overflow: hidden;
}
.bcss-service-card::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--bcss-pink), var(--bcss-orange));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.bcss-service-card:hover::before{
  opacity: 1;
}

/* icon pop on hover */
.bcss-service-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.bcss-service-card:hover .bcss-service-icon{
  transform: scale(1.12) rotate(-6deg);
  background: linear-gradient(135deg, var(--bcss-pink), var(--bcss-orange));
  color: #fff;
}

/* scroll reveal setup — cards start hidden */
.bcss-service-card{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.bcss-service-card.bcss-reveal{
  opacity: 1;
  transform: translateY(0);
}

.bcss-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: #fdeef2;

    color: var(--bcss-pink);

    font-size: 18px;
}


.bcss-service-card h3 {
    color: var(--bcss-text);

    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;

    margin-bottom: 8px;
}


.bcss-service-card p {
    color: #000;

    font-size: 12.5px;
    line-height: 1.65;
}


/* =========================================================
   PROCESS
========================================================= */

.bcss-process {
    padding: 50px 0;

    background: var(--bcss-dark);

    color: #fff;
}


.bcss-process-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;

    align-items: center;
}


.bcss-process-intro .bcss-section-eyebrow {
    color: var(--bcss-pink);
}


.bcss-process-intro h2 {
    color: #fff;
}


.bcss-process-intro > p {
    color: var(--bcss-light-muted);
}
/* =========================================================
   PROCESS STEPS
========================================================= */
.bcss-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@keyframes stepPopIn{
  0%{
    opacity:0;
    transform: scale(.4) translateY(30px);
  }
  60%{
    opacity:1;
    transform: scale(1.08) translateY(-6px);
  }
  80%{
    transform: scale(.96) translateY(2px);
  }
  100%{
    opacity:1;
    transform: scale(1) translateY(0);
  }
}
@keyframes lineDraw{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

.bcss-step {
    position: relative;
    z-index: 2;
    text-align: center;

    opacity: 0;
    animation: stepPopIn .65s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.bcss-step-line {
    position: absolute;
    top: 38px;
    left: 8%;
    right: 8%;
    height: 2px;
    z-index: 1;
    border-radius: 2px;

    background: linear-gradient(
        90deg,
        var(--bcss-pink),
        var(--bcss-orange)
    );
    opacity: .35;
    overflow: visible;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .8s ease;
}
.bcss-step-line.bcss-reveal{ transform: scaleX(1); }

.bcss-dashboard-imgwrap{
    transition: transform .25s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.bcss-floating-icon.bcss-icon-active,
.bcss-mini-badge.bcss-icon-active{
    transform: scale(1.08);
}

@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}
@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}

.bcss-step-line::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);

  width: 22px;
  height: 6px;
  border-radius: 50%;

  background: #fff;
  box-shadow:
    0 0 10px 3px var(--bcss-pink),
    0 0 20px 6px var(--bcss-orange);

  animation: runLight 6.2s linear infinite;
}

.bcss-step:nth-child(2){ --step-color:#ff2d78; animation-delay: .5s; }
.bcss-step:nth-child(3){ --step-color:#3ba7ff; animation-delay: .8s; }
.bcss-step:nth-child(4){ --step-color:#2dd4c7; animation-delay: 1.1s; }
.bcss-step:nth-child(5){ --step-color:#ffb020; animation-delay: 1.4s; }

.bcss-step-circle {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 1.5px solid var(--step-color, var(--bcss-pink));
    border-radius: 50%;
    background: #160f20;
    font-size: 28px;
    color: var(--step-color, #fff);

    box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color, var(--bcss-pink)) 12%, transparent),
                0 0 20px color-mix(in srgb, var(--step-color, var(--bcss-pink)) 45%, transparent);

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

.bcss-step:hover .bcss-step-circle{
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--step-color, var(--bcss-pink)) 20%, transparent),
              0 0 30px color-mix(in srgb, var(--step-color, var(--bcss-pink)) 75%, transparent);
}

.bcss-step-number {
    color: var(--bcss-orange);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
}
.bcss-step:hover .bcss-step-number{
  color: var(--step-color);
}

.bcss-step h4 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 8px;
}
.bcss-step p {
    color: var(--bcss-light-muted);
    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   WHAT YOU GET
========================================================= */

.bcss-results {
    padding: 80px 0;
    background: linear-gradient(
        160deg,
        #ffffff 0%,
        #ffe9f0 35%,
        #ffe3d9 70%,
        #fff5ec 100%
    );
}

@keyframes blobFloat1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-20px) scale(1.1); }
}
@keyframes blobFloat2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-25px,25px) scale(1.15); }
}

.bcss-results {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #fffaf8;
}

.bcss-results::before,
.bcss-results::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.bcss-results::before{
    width: 420px;
    height: 420px;
    top: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(255,45,120,0.35), transparent 70%);
    animation: blobFloat1 9s ease-in-out infinite;
}

.bcss-results::after{
    width: 460px;
    height: 460px;
    bottom: -15%;
    right: -10%;
    background: radial-gradient(circle, rgba(255,122,61,0.35), transparent 70%);
    animation: blobFloat2 11s ease-in-out infinite;
}

.bcss-results-grid{
    position: relative;
    z-index: 1;
}

.bcss-results-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.1fr);

    gap: 60px;

    align-items: center;

    position: relative;   /* NEW */
    z-index: 1; 
}


/* =========================================================
   LAPTOP
========================================================= */

.bcss-laptop-area {
    position: relative;

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

    padding: 30px 20px;
}


.bcss-laptop {
    width: min(100%, 430px);

    position: relative;

    padding: 16px;

    background: #171022;

    border-radius: 14px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.2);
}


.bcss-laptop-screen {
    min-height: 220px;

    padding: 14px;

    border-radius: 8px;

    background: #1e1730;
}


.bcss-laptop-line {
    height: 8px;

    margin-bottom: 8px;

    border-radius: 4px;

    background: #33284a;
}


.bcss-line-40 {
    width: 40%;
}

.bcss-line-60 {
    width: 60%;
}

.bcss-line-80 {
    width: 80%;
}


.bcss-laptop-base {
    height: 14px;

    margin-top: 10px;

    border-radius: 0 0 10px 10px;

    background: #0f0a17;
}

@keyframes laptopFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

.bcss-laptop-img {
    width: min(100%, 460px);
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.25));

    animation: laptopFloat 5s ease-in-out infinite;
}

@keyframes badgeFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes badgePopIn{
  0%{ opacity:0; transform: scale(.3) translateY(20px); }
  60%{ opacity:1; transform: scale(1.15) translateY(-4px); }
  100%{ opacity:1; transform: scale(1) translateY(0); }
}

.bcss-mini-badge{
  opacity: 0;
  animation:
    badgePopIn .6s cubic-bezier(.34,1.56,.64,1) forwards,
    badgeFloat 3.5s ease-in-out infinite;
}

.bcss-mini-code{
  animation-delay: .2s, 1s;   /* pop-in delay, then float delay */
}
.bcss-mini-security{
  animation-delay: .4s, 1.3s;
}
.bcss-mini-growth{
  animation-delay: .6s, 1.6s;
}
.bcss-mini-success{
  animation-delay: .8s, 1.9s;
}

@keyframes benefitSlideIn{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}

.bcss-benefit{
  opacity: 0;
  animation: benefitSlideIn .6s ease forwards;
}

.bcss-benefit:nth-child(1){ animation-delay: .3s; }
.bcss-benefit:nth-child(2){ animation-delay: .5s; }
.bcss-benefit:nth-child(3){ animation-delay: .7s; }
.bcss-benefit:nth-child(4){ animation-delay: .9s; }

.bcss-benefit-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}

.bcss-benefit:hover .bcss-benefit-icon{
  transform: scale(1.15) rotate(-6deg);
  background: linear-gradient(135deg, var(--bcss-pink), var(--bcss-orange));
  color: #fff;
}

/* =========================================================
   LAPTOP FLOATING BADGES
========================================================= */

.bcss-mini-badge {
    position: absolute;
    z-index: 4;

    width: 54px;
    height: 54px;

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

    border-radius: 10px;

    color: #fff;

    font-size: 16px;

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


.bcss-mini-code {
    top: -6%;
    left: 8%;

    background: var(--bcss-gradient);
}


.bcss-mini-security {
    top: -20%;
    right: 10%;

    background: #2b2340;
}


.bcss-mini-growth {
    right: 8%;
    bottom: -14%;

    background: #2b2340;
}


.bcss-mini-success {
    left: 40%;
    bottom: -13%;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: var(--bcss-gradient);
}


/* =========================================================
   BENEFITS
========================================================= */

.bcss-benefit-grid {
    display: grid;

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

    gap: 26px 24px;

    margin-top: 28px;
}


.bcss-benefit {
    display: flex;

    gap: 14px;

    min-width: 0;
}


.bcss-benefit-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 9px;

    background: #fdeef2;

    color: var(--bcss-pink);

    font-size: 17px;
}


.bcss-benefit h4 {
    color: var(--bcss-text);

    font-size: 20px;

    margin-bottom: 5px;
}


.bcss-benefit p {
    color: var(--bcss-muted);

    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .bcss-container {
        width: min(1180px, calc(100% - 48px));
    }


    .bcss-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .bcss-provide-grid,
    .bcss-process-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .bcss-section-intro,
    .bcss-process-intro {
        max-width: 650px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .bcss-hero {
        padding-top: 40px;
    }


    .bcss-hero-grid,
    .bcss-results-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }
    
    .bcss-results-content {
        order: 1;
    }

    .bcss-laptop-area {
        order: 2;
    }

    .bcss-hero-content {
        text-align: center;
    }


    .bcss-eyebrow {
        justify-content: center;
    }


    .bcss-hero h1 {
        margin-left: auto;
        margin-right: auto;
    }


    .bcss-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }


    .bcss-hero-checks {
        justify-content: center;
    }


    .bcss-hero-visual {
        max-width: 680px;

        margin: 0 auto;
    }


    .bcss-results-content {
        max-width: 700px;
        margin: 0 auto;
    }


    .bcss-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 40px;
    }


    .bcss-step-line {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */
/* HERO TEXT MOBILE FIX ONLY
@media screen and (max-width:600px){
  .bcss-hero-content{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:0 4px;
    text-align:left !important;
  }

  .bcss-eyebrow{
    width:100%;
    max-width:100%;
    margin-top:54px;
    margin-bottom:18px;
    justify-content:flex-start !important;
    gap:8px;
    font-size:10px;
    line-height:1.4;
    letter-spacing:.7px;
    white-space:normal;
  }

  .bcss-eyebrow::after{
    width:34px;
    flex:0 0 34px;
  }

  .bcss-hero h1{
    width:100%;
    max-width:360px;
    margin:0 0 18px;
    padding:0;
    font-size:clamp(28px,7.6vw,32px);
    line-height:1.12;
    letter-spacing:-.4px;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .bcss-hero h1 span{
    display:inline;
  }

  .bcss-hero-content > p{
    width:100%;
    max-width:350px;
    margin:0 0 26px;
    padding:0 2px;
    font-size:14px;
    line-height:1.5;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .bcss-hero-checks{
    width:100%;
    max-width:100%;
    margin:0;
    align-items:flex-start;
    gap:11px;
    text-align:left;
  }

  .bcss-hero-checks > div{
    width:auto;
    justify-content:flex-start;
    font-size:13px;
    line-height:1.35;
  }
}

@media screen and (max-width:380px){
  .bcss-eyebrow{margin-top:48px;font-size:9px;}
  .bcss-eyebrow::after{width:26px;flex-basis:26px;}

  .bcss-hero h1{
    max-width:320px;
    font-size:26px;
  }

  .bcss-hero-content > p{
    max-width:320px;
    font-size:13.5px;
  }
}


@media screen and (max-width:380px){
  .bcss-eyebrow{margin-top:48px;font-size:9px;}
  .bcss-eyebrow::after{width:26px;flex-basis:26px;}

  .bcss-hero h1{
    max-width:320px;
    font-size:26px;
  }

  .bcss-hero-content > p{
    max-width:320px;
    font-size:13.5px;
  }
}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .bcss-container {
        width: calc(100% - 24px);
    }


    .bcss-hero h1 {
        font-size: 28px;
    }


    .bcss-dashboard-sidebar {
        width: 65px;
        flex-basis: 65px;
    }


    .bcss-dashboard-main {
        padding: 8px;
    }


    .bcss-stat-value {
        font-size: 10px;
    }


    .bcss-flow {
        gap: 4px;
    }


    .bcss-flow-circle {
        width: 38px;
        height: 38px;
    }


    .bcss-flow-arrow {
        font-size: 11px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .bcss-floating-icon,
    .bcss-service-card {
        animation: none;
        transition: none;
    }

}



/*=========================================================================
                Ui Ux Experience Design
=========================================================================*/


/*============================================================
             UI/UX EXPERIENCE DESIGN — UXDS
============================================================*/
 :root{
    --uxds-black:#0b0b10;
    --uxds-black-2:#121016;
    --uxds-pink:#ef2d7e;
    --uxds-orange:#f6923a;
    --uxds-cream:#faf5f2;
    --uxds-cream-2:#f4ece7;
    --uxds-white:#ffffff;
    --uxds-text-dark:#141217;
    --uxds-text-muted:#6b6570;
    --uxds-text-light:#c9c4cd;
    --uxds-gradient: linear-gradient(90deg, var(--uxds-pink), var(--uxds-orange));
    --uxds-radius: 16px;
    --uxds-max-w: 1200px;
  }

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

  @keyframes uxds-mesh-move{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(-3%, 2%) scale(1.08); }
    100%{ transform: translate(0,0) scale(1); }
  }
  @keyframes uxds-mesh-move-2{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(4%, -3%) scale(1.05); }
    100%{ transform: translate(0,0) scale(1); }
  }
  @keyframes uxds-pulse{
    0%,100%{ opacity:0.55; transform: translateX(-50%) scale(1); }
    50%{ opacity:0.9; transform: translateX(-50%) scale(1.12); }
  }
  @keyframes uxds-float-y{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
  }
  @keyframes uxds-fade-up-blur{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}
  @keyframes uxds-count-fade{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
  }
  @keyframes uxds-draw-line{
    from{ stroke-dashoffset: 260; }
    to{ stroke-dashoffset: 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .uxds-hero *{ animation: none !important; transition: none !important; }
  }

  body{
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    color: var(--uxds-text-dark);
    background: var(--uxds-white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}

  .uxds-container{
    max-width: var(--uxds-max-w);
    margin: 0 auto;
    padding: 0 32px;
  }

  .uxds-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color: var(--uxds-pink);
  }
  .uxds-eyebrow-dot{
    width:6px; height:6px; border-radius:50%;
    background: var(--uxds-pink);
    display:inline-block;
  }
  .uxds-eyebrow--boxed{
    position:relative;
    border:1px solid transparent;
    padding:8px 16px;
    border-radius:999px;
    background:
      linear-gradient(#0b0b10,#0b0b10) padding-box,
      conic-gradient(from 0deg, var(--uxds-pink), var(--uxds-orange), var(--uxds-pink)) border-box;
    animation: uxds-border-spin 4s linear infinite;
  }
  @keyframes uxds-border-spin{
    to{ filter: hue-rotate(0deg); background:
      linear-gradient(#0b0b10,#0b0b10) padding-box,
      conic-gradient(from 360deg, var(--uxds-pink), var(--uxds-orange), var(--uxds-pink)) border-box;
    }
  }

  .uxds-gradient-text{
    background: linear-gradient(100deg, var(--uxds-pink) 20%, var(--uxds-orange) 40%, #ffd8b0 50%, var(--uxds-orange) 60%, var(--uxds-pink) 80%);
    background-size: 250% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation: uxds-shimmer 5s linear infinite;
  }
  @keyframes uxds-shimmer{
    0%{ background-position: 200% 0; }
    100%{ background-position: -50% 0; }
  }

  /* ---------------- HERO ---------------- */
  .uxds-hero{
    background: #08080c;
    color: var(--uxds-white);
    padding: 105px 0 50px;
    overflow:hidden;
    position:relative;
  }
  .uxds-hero__mesh{
    position:absolute; inset:-10%;
    z-index:0;
    pointer-events:none;
  }
  .uxds-hero__mesh span{
    position:absolute;
    border-radius:50%;
    filter: blur(70px);
    opacity:0.5;
  }
  .uxds-hero__mesh span:nth-child(1){
    width:420px; height:420px; top:-8%; right:8%;
    background: radial-gradient(circle, rgba(239,45,126,0.55), transparent 70%);
    animation: uxds-mesh-move 14s ease-in-out infinite;
  }
  .uxds-hero__mesh span:nth-child(2){
    width:380px; height:380px; bottom:-10%; right:26%;
    background: radial-gradient(circle, rgba(246,146,58,0.4), transparent 70%);
    animation: uxds-mesh-move-2 18s ease-in-out infinite;
  }
  .uxds-hero__mesh span:nth-child(3){
    width:300px; height:300px; top:20%; left:-6%;
    background: radial-gradient(circle, rgba(120,40,160,0.35), transparent 70%);
    animation: uxds-mesh-move 20s ease-in-out infinite reverse;
  }
  .uxds-hero__grain{
    position:absolute; inset:0; z-index:1;
    opacity:0.05;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .uxds-hero__particles{
    position:absolute; inset:0; z-index:1; pointer-events:none;
  }
  .uxds-hero__particles span{
    position:absolute;
    width:3px; height:3px;
    border-radius:50%;
    background: var(--uxds-orange);
    opacity:0.5;
    animation: uxds-particle-float linear infinite;
  }
  .uxds-hero__particles span:nth-child(odd){ background: var(--uxds-pink); }
  @keyframes uxds-particle-float{
    0%{ transform: translateY(0) translateX(0); opacity:0; }
    10%{ opacity:0.6; }
    90%{ opacity:0.6; }
    100%{ transform: translateY(-140px) translateX(20px); opacity:0; }
  }
  .uxds-hero__spotlight{
    position:absolute;
    top:-20%; left:50%;
    width:600px; height:500px;
    transform: translateX(-50%);
    background: conic-gradient(from 180deg at 50% 0%, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
    z-index:1;
    pointer-events:none;
  }
  .uxds-hero__cursor-glow{
    position:absolute;
    width:420px; height:420px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(239,45,126,0.16), transparent 70%);
    top:0; left:0;
    transform: translate(-50%,-50%);
    pointer-events:none;
    z-index:1;
    opacity:0;
    transition: opacity 0.4s ease;
  }
  .uxds-hero__cursor-glow.uxds-cursor-active{opacity:1;}
  .uxds-hero__grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items:center;
  }
 .uxds-hero__title{
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  margin: 20px 0 20px;
  letter-spacing:-0.5px;
  color: #ffffff;
  text-shadow: none;
  animation: uxds-fade-up-blur 0.8s ease both;
  animation-delay: 0.05s;
}
  .uxds-hero__desc{
    color: whitesmoke;
    font-size: 17px;
    max-width: 480px;
    margin-bottom: 24px;
    animation: uxds-fade-up-blur 0.8s ease both;
    animation-delay: 0.2s;
  }
  .uxds-hero__features{
    display:flex;
    flex-wrap:wrap;
    gap: 14px 28px;
    margin-bottom: 36px;
  }
  .uxds-hero__feature{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color: whitesmoke;
    opacity:0;
    animation: uxds-count-fade 0.6s ease forwards;
    transition: transform 0.25s ease, color 0.25s ease;
    cursor:default;
  }
  .uxds-hero__feature:hover{
    transform: translateX(4px);
    color: #fff;
  }
  .uxds-hero__feature:nth-child(1){ animation-delay:0.35s; }
  .uxds-hero__feature:nth-child(2){ animation-delay:0.45s; }
  .uxds-hero__feature:nth-child(3){ animation-delay:0.55s; }
  .uxds-hero__feature:nth-child(4){ animation-delay:0.65s; }
  .uxds-hero__feature:nth-child(5){ animation-delay:0.75s; }
  .uxds-check{
    width:18px; height:18px;
    border-radius:50%;
    background: rgba(239,45,126,0.15);
    color: var(--uxds-pink);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    flex-shrink:0;
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .uxds-hero__feature:hover .uxds-check{
    transform: scale(1.15);
    background: var(--uxds-pink);
    color:#fff;
  }

  .uxds-stats{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    opacity:0;
    animation: uxds-count-fade 0.7s ease forwards;
    animation-delay: 0.85s;
  }
  .uxds-stat{
    position:relative;
    padding: 22px 16px 18px;
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow:hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  .uxds-stat::before{
    content:"";
    position:absolute; inset:0;
    border-radius:16px;
    padding:1px;
    background: var(--uxds-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:0;
    transition: opacity 0.3s ease;
    pointer-events:none;
  }
  .uxds-stat:hover{
    transform: translateY(-6px) scale(1.03);
    border-color: transparent;
    background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
    box-shadow: 0 16px 34px rgba(239,45,126,0.22);
  }
  .uxds-stat:hover::before{ opacity:1; }
  .uxds-stat__icon{
    width:34px; height:34px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(239,45,126,0.22), rgba(246,146,58,0.16));
    color: var(--uxds-pink);
    font-size:15px;
    margin-bottom:12px;
    transform: rotate(-90deg) scale(0.5);
    opacity:0;
    animation: uxds-icon-spin-in 0.6s ease forwards;
  }
  .uxds-stat:nth-child(1) .uxds-stat__icon{ animation-delay: 1s; }
  .uxds-stat:nth-child(2) .uxds-stat__icon{ animation-delay: 1.12s; }
  .uxds-stat:nth-child(3) .uxds-stat__icon{ animation-delay: 1.24s; }
  .uxds-stat:nth-child(4) .uxds-stat__icon{ animation-delay: 1.36s; }
  .uxds-stat__num{ font-size:24px; font-weight:800; letter-spacing:-0.3px; }
  .uxds-stat__label{ font-size:12px; color: var(--uxds-text-muted); margin-top:3px;}
  .uxds-stat__bar{
    height:3px;
    border-radius:2px;
    background: rgba(255,255,255,0.08);
    margin-top:14px;
    overflow:hidden;
  }
  .uxds-stat__bar span{
    display:block;
    height:100%;
    width:0%;
    background: var(--uxds-gradient);
    border-radius:2px;
    transition: width 1.3s cubic-bezier(.22,1,.36,1);
  }
  @keyframes uxds-icon-spin-in{
    to{ transform: rotate(0deg) scale(1); opacity:1; }
  }

  /* Hero phone showcase */
  .uxds-hero__visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: 460px;
    perspective: 1200px;
    opacity:0;
    animation: uxds-count-fade 1s ease forwards;
    animation-delay: 0.3s;
  }
  .uxds-hero__glow{
    position:absolute;
    bottom:10px;
    left:50%;
    width: 340px;
    height: 100px;
    background: radial-gradient(ellipse at center, rgba(239,45,126,0.55), rgba(246,146,58,0.15) 60%, transparent 75%);
    filter: blur(6px);
    border-radius:50%;
    animation: uxds-pulse 4s ease-in-out infinite;
  }
  .uxds-phones{
    position:relative;
    display:flex;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    gap: -20px;
    z-index:2;
    animation: uxds-zoom-reveal 1s cubic-bezier(.22,1,.36,1) both;
    animation-delay: 0.2s;
  }
  @keyframes uxds-zoom-reveal{
    from{ transform: scale(1.25); opacity:0; }
    to{ transform: scale(1); opacity:1; }
  }
  .uxds-phone{
    width: 220px;
    height: 420px;
    background: #0d0d10;
    border: 6px solid #1c1c22;
    border-radius: 34px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    padding: 14px 12px;
    position:relative;
    display:flex;
    flex-direction:column;
    gap:20px;
    overflow:hidden;
  }
  .uxds-phone::after{
    content:"";
    position:absolute;
    top:-120%; left:-40%;
    width:60%; height:340%;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
    transform: rotate(20deg);
    animation: uxds-screen-sweep 5s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes uxds-screen-sweep{
    0%,100%{ left:-40%; }
    50%{ left:110%; }
  }
  .uxds-hero__visual:hover .uxds-phones{
    transform: rotateY(-6deg) rotateX(3deg);
  }
  .uxds-phone--front{
    transform: translateY(30px);
    margin-left:-40px;
    z-index:3;
    transition: transform 0.4s ease;
  }

  .uxds-phone--back{
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.92);
}
    .uxds-hero__visual:hover .uxds-phone--front{
    transform: translateY(24px) translateZ(30px);
  }
  .uxds-hero__visual:hover .uxds-phone--back{
  transform: translateY(-14px) scale(0.98) translateZ(-10px);
  filter: brightness(0.88);
}
  .uxds-phone__notch{
    position:absolute;
    top:0; left:50%; transform:translateX(-50%);
    width:70px; height:18px;
    background:#1c1c22;
    border-radius:0 0 12px 12px;
  }
  .uxds-phone__status{
    display:flex; justify-content:space-between;
    font-size:9px; color:#fff; opacity:0.6;
    margin-top:6px;
  }
  .uxds-phone__greeting{ font-size:11px; color:#8f8b93; margin-top:8px;}
  .uxds-phone__name{ font-size:14px; font-weight:700; color:#fff;}
  .uxds-phone__balance-card{
    background: linear-gradient(135deg, #241621, #1a1220);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:14px;
    padding:12px;
    margin-top:8px;
  }
  .uxds-phone__balance-label{ font-size:9px; color:#8f8b93;}
  .uxds-phone__balance-amount{ font-size:20px; font-weight:800; color:#fff; margin-top:4px;}
  .uxds-phone__balance-chart{ height:30px; margin-top:8px;}
  .uxds-phone__tx-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:9.5px; color:#cfcbd4;
    padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .uxds-phone__tx-amt{ color:#ef2d7e; font-weight:700;}
  .uxds-phone__tabbar{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,0.06);
  }
  .uxds-phone__tab{ font-size:8px; color:#68636f; text-align:center;}
  .uxds-phone__tab--active{ color:#ef2d7e;}

  .uxds-phone__cats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px;
  }
  .uxds-phone__cat{
    background: rgba(255,255,255,0.04);
    border-radius:10px;
    padding:8px 4px;
    text-align:center;
    font-size:7px;
    color:#cfcbd4;
  }
  .uxds-phone__cat-ic{ font-size:14px; margin-bottom:2px;}
  .uxds-phone__promo{
    background: linear-gradient(135deg, #3a1024, #201018);
    border-radius:12px;
    padding:10px;
    margin-top:10px;
    font-size:9px;
    color:#fff;
  }
  .uxds-phone__promo strong{ font-size:12px; display:block; margin-bottom:4px;}
  .uxds-phone__products{
    display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px;
  }
  .uxds-phone__product{
    background: rgba(255,255,255,0.04);
    border-radius:8px;
    padding:8px 4px;
    text-align:center;
    font-size:7px;
    color:#cfcbd4;
  }

  .uxds-badge{
    position:absolute;
    width:60px; height:60px;
    border-radius:18px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px;
    font-size:9px;
    font-weight:700;
    color:#fff;
    background: rgba(20,18,22,0.9);
    z-index:4;
  }
  .uxds-badge--ios{ left:-5%; top:18%; border:1px solid rgba(239,45,126,0.5); }
  .uxds-badge--android{ right:2%; top:18%; border:1px solid rgba(246,146,58,0.5); }
  .uxds-badge--float{ animation: uxds-float-y 4s ease-in-out infinite; }
  .uxds-badge--float-2{ animation: uxds-float-y 4.5s ease-in-out infinite 0.6s; }

  .uxds-phone__balance-chart polyline{
    animation: uxds-draw-line 1.6s ease forwards;
    animation-delay: 1.1s;
  }
  .uxds-tx-row--1, .uxds-tx-row--2, .uxds-tx-row--3{
    opacity:0;
    animation: uxds-count-fade 0.5s ease forwards;
  }
  .uxds-tx-row--1{ animation-delay: 1.5s; }
  .uxds-tx-row--2{ animation-delay: 1.65s; }
  .uxds-tx-row--3{ animation-delay: 1.8s; }
  .uxds-badge__icon{ font-size:20px; }

  /* ================= UXDS-HERO — RESPONSIVE (ALL SIZES) ================= */

@media (max-width: 980px){
  .uxds-hero{
    padding: 80px 0 40px;
  }
  .uxds-hero__grid{
    display:flex;
    flex-direction:column;
    gap: 40px;
  }
  .uxds-hero-content{
    order:1;
  }
  .uxds-hero__visual{
    order:2;
    min-height:360px;
    overflow: hidden;
  }
  .uxds-hero__title{
    font-size: 34px;
  }
  .uxds-hero__desc{
    font-size: 15px;
    max-width: 100%;
  }
  .uxds-hero__features{
    gap: 12px 22px;
    margin-bottom: 28px;
  }
  .uxds-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .uxds-phones{
    transform: scale(0.62);
    transform-origin: center center;
  }
}

@media (max-width: 640px){
  .uxds-container{
    padding: 0 20px;
  }
  .uxds-hero{
    padding: 70px 0 36px;
  }
  .uxds-hero__grid{
    gap: 32px;
  }
  .uxds-hero__title{
    font-size: 27px;
    line-height: 1.2;
    margin: 14px 0 14px;
  }
  .uxds-hero__desc{
    font-size: 13.5px;
    margin-bottom: 20px;
  }
  .uxds-hero__features{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
  }
  .uxds-hero__feature{
    font-size: 13px;
  }
  .uxds-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .uxds-stat{
    padding: 16px 12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .uxds-stat__num{
    font-size: 19px;
  }
  .uxds-stat__label{
    font-size: 10.5px;
  }
  .uxds-stat__icon{
    width: 28px;
    height: 28px;
    font-size: 13px;
    margin-bottom: 8px;
  }
  .uxds-hero__visual{
    min-height: 300px;
  }
 .uxds-phones{
    transform: scale(0.6);
    transform-origin: center center;
  }
  .uxds-hero__visual:hover .uxds-phones{
    transform: scale(0.72) rotateY(-6deg) rotateX(3deg);
  }
  .uxds-badge{
    width: 48px;
    height: 48px;
    font-size: 8px;
    border-radius: 14px;
  }
  .uxds-badge__icon{
    font-size: 16px;
  }
  .uxds-hero__stats-wrap{
    overflow-x:auto;
  }
}

@media (max-width: 380px){
  .uxds-hero__title{
    font-size: 23px;
  }
  .uxds-stats{
    grid-template-columns: 1fr 1fr;
  }
  .uxds-stat__num{
    font-size: 17px;
  }
  .uxds-phones{
    transform: scale(0.48);
  }
}

  /* ---------------- SECTION 2: Powerful Apps ---------------- */
.uxds-platforms{
  position:relative;
  background: var(--uxds-white);
  padding: 88px 0;
  overflow:hidden;
}
.uxds-platforms::before{
  content:"";
  position:absolute;
  top:-100px; right:-80px;
  width:520px; height:520px;
  background: radial-gradient(circle, rgba(239,45,126,0.16), transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: uxds-platform-blob-1 12s ease-in-out infinite;
}
.uxds-platforms::after{
  content:"";
  position:absolute;
  bottom:-120px; left:-80px;
  width:460px; height:460px;
  background: radial-gradient(circle, rgba(246,146,58,0.14), transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: uxds-platform-blob-2 15s ease-in-out infinite;
}
@keyframes uxds-platform-blob-1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-30px, 25px) scale(1.1); }
}
@keyframes uxds-platform-blob-2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(25px, -20px) scale(1.08); }
}
.uxds-platforms__top, .uxds-perks{
  position:relative;
  z-index:1;
}
  .uxds-platforms__top{
    display:grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    align-items:start;
  }
  .uxds-section-title{
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    line-height:1.2;
    margin: 14px 0 16px;
    color: var(--uxds-text-dark);
  }
  .uxds-section-desc{
    color: var(--uxds-text-muted);
    font-size:15px;
    max-width:400px;
  }
  .uxds-platform-cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

.uxds-platform-card{
  background: var(--uxds-cream);
  border: 1px solid #ece1da;
  border-radius: var(--uxds-radius);
  border-color: var(--uxds-pink);
  padding: 28px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow: 0 6px 18px rgba(20,18,23,0.05);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.uxds-platform-card:hover{
  border-color: var(--uxds-pink);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(239,45,126,0.12);
}
.uxds-platform-card__icon{
  width:54px; height:54px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(239,45,126,0.14), rgba(246,146,58,0.1));
  font-size:26px;
  transition: transform 0.25s ease;
}
.uxds-platform-card:hover .uxds-platform-card__icon{
  transform: scale(1.08) rotate(-4deg);
}
  .uxds-platform-card__title{ font-size:17px; font-weight:700; color: var(--uxds-text-dark); }
  .uxds-platform-card__text{ font-size:13.5px; color: var(--uxds-text-muted); }
.uxds-platform-card__underline{
  width:32px; height:4px;
  background: var(--uxds-gradient);
  border-radius:3px;
  margin-top:auto;
  transition: width 0.3s ease;
}
.uxds-platform-card:hover .uxds-platform-card__underline{
  width:56px;
}

.uxds-perks{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
  padding-top: 40px;
  position:relative;
}
.uxds-perk{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:20px 12px;
  border-radius:16px;
  position: relative;
  transition: background 0.25s ease, transform 0.25s ease;
}

.uxds-perk__label::after{
  content:"";
  position:absolute;
  bottom:0; left:0;
  width:0;
  height:2px;
  background: var(--uxds-gradient);
  transition: width 0.25s ease;
}
.uxds-perk:hover{
  background: var(--uxds-cream);
  transform: translateY(-3px);
}
.uxds-perk:not(:last-child)::after{
  content:"";
  position:absolute;
  top:10px; right:-12px;
  bottom:10px;
  width:1px;
  background: #ece1da;
}
.uxds-perks::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:70%;
  height:1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ece1da 20%, #ece1da 80%, transparent);
}
.uxds-perks::after{
  content:"✦";
  position:absolute;
  top:-8px; left:50%;
  transform: translateX(-50%);
  color: var(--uxds-pink);
  font-size:14px;
  background: var(--uxds-white);
  padding: 0 12px;
}
.uxds-perk__icon{
  width:70px; height:70px;
  border-radius:16px;
  background: linear-gradient(135deg, var(--uxds-pink), #f6923a);
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  color:#fff;
  box-shadow: 0 8px 22px rgba(239,45,126,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: uxdsPerkPulse 2.4s ease-in-out infinite;
}

.uxds-perk:hover .uxds-perk__icon{
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 14px 30px rgba(239,45,126,0.5);
}
.uxds-perk__label{
  font-size:16px;
  font-weight:600;
  position:relative;
  padding-bottom:4px;
  color: var(--uxds-text-dark);
}
.uxds-perk__label::after{
  content:"";
  position:absolute;
  bottom:0; left:0;
  width:0;
  height:2px;
  background: var(--uxds-gradient);
  transition: width 0.25s ease;
}
.uxds-perk:hover .uxds-perk__label::after{
  width:100%;
}
.uxds-perk__desc{
  font-size:15.5px;
  color: maroon;
  margin-top:2px;
}
.uxds-platforms__badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.uxds-platforms__badge{
  font-size:13.5px;
  font-weight:600;
  padding:8px 14px;
  border-radius:999px;
  background: #fff;
  border:1.5px solid;
  transition: transform .2s ease;
}
.uxds-platforms__badge:hover{ transform: translateY(-2px); }
.uxds-badge-swift{ border-color:#ff5722; color:#ff5722; }
.uxds-badge-kotlin{ border-color:#8b5cf6; color:#8b5cf6; }
.uxds-badge-react{ border-color:#3ba7ff; color:#3ba7ff; }
.uxds-badge-flutter{ border-color:#2dd4c7; color:#2dd4c7; }

@keyframes uxdsPerkPulse{
  0%,100%{ box-shadow: 0 4px 14px rgba(239,45,126,0.08); }
  50%{ box-shadow: 0 4px 22px rgba(239,45,126,0.28); }
}
.uxds-perk__icon{
  animation: uxdsPerkPulse 2.4s ease-in-out infinite;
}
.uxds-perk:nth-child(1) .uxds-perk__icon{ animation-delay:0s; }
.uxds-perk:nth-child(2) .uxds-perk__icon{ animation-delay:.3s; }
.uxds-perk:nth-child(3) .uxds-perk__icon{ animation-delay:.6s; }
.uxds-perk:nth-child(4) .uxds-perk__icon{ animation-delay:.9s; }
.uxds-platform-cards{
  perspective: 1000px;
}
.uxds-platform-card{
  position:relative;
  transform-style: preserve-3d;
  transition: transform .15s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.uxds-platform-card__num{
  font-size:26px;
  font-weight:800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(239,45,126,.4);
  position:absolute;
  top:16px; right:20px;
}
.uxds-platform-card__icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--uxds-gradient);
  color:#fff;
  font-size:22px;
  box-shadow: 0 10px 24px rgba(239,45,126,.35);
  transition: transform 0.25s ease;
}
.uxds-platform-card:hover .uxds-platform-card__icon{
  transform: scale(1.1) rotate(-6deg);
}
  /* ---------------- SECTION 3: Ecosystem ---------------- */
  .uxds-ecosystem{
    background: var(--uxds-black);
    color:#fff;
    padding: 75px 0;
    overflow-x:auto;
  }
  .uxds-ecosystem__intro{
    max-width:670px;
    margin-bottom:57px;
  }
  .uxds-flow{
    display:flex;
    align-items:center;
    gap: 9px;
    flex-wrap:nowrap;
  }
  .uxds-flow__phone{
    width:155px;
    background:#141017;
    border:6px solid #211c26;
    border-radius:29px;
    padding:14px 10px;
    flex-shrink:0;
  }
  .uxds-flow__phone-label{ font-size:8px; color:#8f8b93; }
.uxds-flow__phone-ring{
  width:64px; height:64px;
  border-radius:50%;
  border:6px solid #2a2430;
  border-top-color: var(--uxds-pink);
  border-right-color: var(--uxds-orange);
  margin: 12px auto;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
  animation: uxds-ring-spin 3s linear infinite;
}
@keyframes uxds-ring-spin{
  to{ transform: rotate(360deg); }
}
  .uxds-flow__phone-bars{
    display:flex; align-items:flex-end; gap:3px; height:30px; margin-top:10px;
  }
.uxds-flow__phone-bars span{
  flex:1; background: linear-gradient(180deg, var(--uxds-pink), var(--uxds-orange)); border-radius:2px;
  animation: uxds-bar-pulse 1.6s ease-in-out infinite;
}
.uxds-flow__phone-bars span:nth-child(1){ animation-delay:0s; }
.uxds-flow__phone-bars span:nth-child(2){ animation-delay:0.15s; }
.uxds-flow__phone-bars span:nth-child(3){ animation-delay:0.3s; }
.uxds-flow__phone-bars span:nth-child(4){ animation-delay:0.45s; }
.uxds-flow__phone-bars span:nth-child(5){ animation-delay:0.6s; }
.uxds-flow__phone-bars span:nth-child(6){ animation-delay:0.75s; }
@keyframes uxds-bar-pulse{
  0%,100%{ transform: scaleY(0.6); opacity:0.7; }
  50%{ transform: scaleY(1); opacity:1; }
}
.uxds-flow__arrow{
  color: var(--uxds-orange);
  font-size:48px;
  flex-shrink:0;
  position:relative;
  width:25px;
  text-align:center;
  overflow:visible;
}
.uxds-flow__arrow::after{
  content:"";
  position:absolute;
  top:50%; left:0;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--uxds-pink);
  box-shadow: 0 0 8px var(--uxds-pink), 0 0 14px rgba(239,45,126,0.6);
  transform: translateY(-50%);
  animation: uxds-dot-travel 1.8s linear infinite;
}
.uxds-flow__arrow:nth-of-type(1)::after{ animation-delay: 0s; }
@keyframes uxds-dot-travel{
  0%{ left:0; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}
  .uxds-flow__box{
    background:#141017;
    border:1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 16px;
    width: 150px;
    flex-shrink:0;
    text-align:center;
  }
  .uxds-flow__box:hover{
  border-color: rgba(239,45,126,0.5);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(239,45,126,0.15);
}
  .uxds-flow__box-icon{
    font-size:29px;
    color: var(--uxds-pink);
    margin-bottom:10px;
  }
  .uxds-flow__box-title{ font-size:18px; font-weight:700; margin-bottom:9px; color: white;}
  .uxds-flow__box-text{ font-size:15.5px; color:whitesmoke; line-height:1.4;}

  .uxds-flow__integrations{
    background:#141017;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:18px 18px;
    width: 170px;
    flex-shrink:0;
  }
  .uxds-flow__integrations-title{ font-size:18px; font-weight:700; margin-bottom:14px;}
  .uxds-flow__integrations li{
    display:flex; align-items:center; gap:10px;
    font-size:14px; color: whitesmoke;
    padding:5px 0;
  }
.uxds-flow__integrations li span:first-child{
  color: var(--uxds-pink);
  font-size:12px;
  width:29px; height:29px;
  border-radius:7px;
  background: linear-gradient(135deg, rgba(239,45,126,0.18), rgba(246,146,58,0.12));
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
  .uxds-flow__caption{
    text-align:center;
    font-size:13px;
    font-weight:700;
    color: var(--uxds-pink);
    margin-top:10px;
  }


  /* ---------------- SECTION 4: Business Impact ---------------- */
  .uxds-impact{
  background: linear-gradient(160deg, var(--uxds-cream) 0%, #f9d9e4 50%, #fce0c8 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.uxds-impact::before{
  content:"";
  position:absolute; top:-10%; left:-8%;
  width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(239,45,126,.10), transparent 70%);
  filter: blur(20px);
  animation: uxdsImpactBlobDrift 8s ease-in-out infinite;
}
@keyframes uxdsImpactBlobDrift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(20px,-15px) scale(1.08); }
}
.uxds-impact::after{
  content:"";
  position:absolute; bottom:-12%; right:-8%;
  width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(246,146,58,.12), transparent 70%);
  filter: blur(20px);
  animation: uxdsImpactBlobDrift2 10s ease-in-out infinite;
  z-index:0;
}
@keyframes uxdsImpactBlobDrift2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-18px,15px) scale(1.1); }
}

.uxds-impact .uxds-container{ position:relative; z-index:1; }

@keyframes uxdsImpactFadeUp{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}
.uxds-impact .uxds-eyebrow,
.uxds-impact .uxds-section-title,
.uxds-impact__desc{
  opacity:0;
  animation: uxdsImpactFadeUp .6s ease forwards;
}
.uxds-impact .uxds-eyebrow{ animation-delay:.1s; }
.uxds-impact .uxds-section-title{ animation-delay:.25s; }
.uxds-impact__desc{ animation-delay:.4s; }
  .uxds-impact__grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items:center;
  }
  .uxds-impact__desc{
    color: var(--uxds-text-muted);
    font-size:15px;
    max-width:420px;
    margin-bottom:32px;
  }
  .uxds-impact__list{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px;
  }
  .uxds-impact__item{
    display:flex;
    gap:12px;
  }
  .uxds-impact__icon{
    width:40px; height:40px;
    border-radius:10px;
    background: var(--uxds-pink);
    color: var(--uxds-pink);
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
    flex-shrink:0;
  }
  .uxds-impact__item-title{ font-size:16.5px; font-weight:700; margin-bottom:4px; color: #000;}
  .uxds-impact__item-text{ font-size:13.5px; color: var(--uxds-text-muted); line-height:1.4;}

  .uxds-impact__visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:460px;
  }
  .uxds-impact__blob{
    position:absolute;
    width: 340px; height:340px;
    background: radial-gradient(circle, rgba(239,45,126,0.16), rgba(246,146,58,0.06) 70%, transparent 80%);
    border-radius:50%;
  }
  .uxds-impact__phone{
    width:220px;
    background:#0d0d10;
    border:7px solid #1c1c22;
    border-radius:36px;
    padding:16px 14px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
    position:relative;
    z-index:2;
  }
  .uxds-impact__phone-notch{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:80px; height:20px; background:#1c1c22; border-radius:0 0 14px 14px;
  }
  .uxds-impact__phone-label{ font-size:10px; color:#8f8b93; margin-top:10px;}
  .uxds-impact__phone-amount{ font-size:22px; font-weight:800; color:#fff; margin:4px 0;}
  .uxds-impact__phone-delta{ font-size:10px; color:#3ddc84; margin-bottom:8px;}
  .uxds-impact__phone-chart{ height:60px; }
  .uxds-impact__phone-products{ margin-top:14px; }
  .uxds-impact__phone-heading{ font-size:9px; color:#8f8b93; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px;}
  .uxds-impact__phone-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:9.5px; color:#cfcbd4; padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .uxds-impact__phone-row span:last-child{ color:#fff; font-weight:600;}

  .uxds-impact__float{
    position:absolute;
    background:#000;
    border-radius:12px;
    padding:12px 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:600;
    z-index:3;
    width:150px;
  }
  .uxds-impact__float-icon{
    width:35px;height:35px;border-radius:8px;
    background: var(--uxds-cream-2);
    color: var(--uxds-pink);
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
    flex-shrink:0;
  }
  .uxds-impact__float--tl{ top:6%; left:-2%; }
  .uxds-impact__float--bl{ bottom:8%; left:-4%; }
  .uxds-impact__float--tr{ top:8%; right:-4%; }
  .uxds-impact__float--br{ bottom:12%; right:-2%; }


  /* blob pulse */
@keyframes uxdsImpactBlob{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.1); opacity:.85; }
}
.uxds-impact__blob{
  animation: uxdsImpactBlob 6s ease-in-out infinite;
}

/* phone entrance + float */
@keyframes uxdsPhoneIn{
  from{ opacity:0; transform: scale(.85) translateY(30px); }
  to{ opacity:1; transform: scale(1) translateY(0); }
}
@keyframes uxdsPhoneFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
.uxds-impact__phone{
  opacity:0;
  animation: uxdsPhoneIn .8s ease forwards, uxdsPhoneFloat 5s ease-in-out 1s infinite;
}

/* chart line draw */
.uxds-impact__phone-chart polyline{
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: uxdsChartDraw 1.6s ease forwards 1.2s;
}
@keyframes uxdsChartDraw{
  to{ stroke-dashoffset: 0; }
}

/* floating badges — staggered pop-in + individual float rhythm */
@keyframes uxdsFloatPop{
  from{ opacity:0; transform: translateY(20px) scale(.7); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes uxdsFloatDrift{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.uxds-impact__float{
  opacity:0;
  animation: uxdsFloatPop .6s ease forwards, uxdsFloatDrift 4s ease-in-out infinite;
}
.uxds-impact__float--tl{ animation-delay: .3s, 1.5s; }
.uxds-impact__float--bl{ animation-delay: .5s, 1.8s; }
.uxds-impact__float--tr{ animation-delay: .7s, 2.1s; }
.uxds-impact__float--br{ animation-delay: .9s, 2.4s; }

/* left list items — staggered slide-in */
@keyframes uxdsImpactItemIn{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}
.uxds-impact__item{
  opacity:0;
  animation: uxdsImpactItemIn .6s ease forwards;
}
.uxds-impact__item:nth-child(1){ animation-delay:.1s; }
.uxds-impact__item:nth-child(2){ animation-delay:.25s; }
.uxds-impact__item:nth-child(3){ animation-delay:.4s; }
.uxds-impact__item:nth-child(4){ animation-delay:.55s; }

/* icon hover pop */
.uxds-impact__icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.uxds-impact__item:hover .uxds-impact__icon{
  transform: scale(1.15) rotate(-6deg);
  background: var(--uxds-gradient);
  color:#fff;
}
/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 980px){
  .uxds-hero{ padding: 80px 0 40px; }
  .uxds-hero__grid{
    display:flex;
    flex-direction:column;
    gap: 40px;
  }
  .uxds-hero-content{ order:1; }
  .uxds-hero__visual{
    order:2;
    width:100%;
    overflow:visible;
    min-height:420px;
  }
  .uxds-hero__title{ font-size: 34px; }
  .uxds-hero__desc{ font-size: 15px; max-width: 100%; }
  .uxds-hero__features{ gap: 12px 22px; margin-bottom: 28px; }
  .uxds-stats{ grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* other sections — unchanged */
  .uxds-platforms__top{ grid-template-columns:1fr; }
  .uxds-platform-cards{ grid-template-columns:1fr 1fr; }
  .uxds-perks{ grid-template-columns: 1fr 1fr; }
  .uxds-impact__grid{ grid-template-columns:1fr; }
  .uxds-impact__grid > :not(.uxds-impact__visual){ order:1; }
  .uxds-impact__visual{ order:2; }
}

@media (max-width: 640px){
  .uxds-container{ padding:0 20px; }

  .uxds-hero{ padding: 70px 0 36px; }
  .uxds-hero__grid{ gap: 32px; }
  .uxds-hero__title{ font-size: 27px; line-height: 1.2; margin: 14px 0 14px; }
  .uxds-hero__desc{ font-size: 13.5px; margin-bottom: 20px; }
  .uxds-hero__features{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
  }
  .uxds-hero__feature{ font-size: 13px; }

  .uxds-stats{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .uxds-stat{
    padding: 16px 12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .uxds-stat__num{ font-size: 19px; }
  .uxds-stat__label{ font-size: 10.5px; }
  .uxds-stat__icon{ width: 28px; height: 28px; font-size: 13px; margin-bottom: 8px; }

  /* PHONES — no scale(), real size reduced so nothing gets clipped */
  .uxds-hero__visual{
    min-height: 330px;
    padding: 26px 10px 34px;
    overflow:visible;
  }
  .uxds-phones{
    width:max-content;
    max-width:100%;
    margin:0 auto;
    transform:none;
  }
  .uxds-phone{
    width: 130px;
    height: 250px;
    flex:0 0 auto;
    padding: 8px 6px;
    border-radius: 20px;
    border-width: 4px;
    gap: 10px;
  }
  .uxds-phone--front{
    margin-left: -30px;
    transform: translateY(18px);
  }
  .uxds-phone--back{
    transform: translateY(-6px) scale(0.96);
  }
  .uxds-hero__visual:hover .uxds-phone--front{
    transform: translateY(16px) translateZ(20px);
  }
  .uxds-hero__visual:hover .uxds-phone--back{
    transform: translateY(-8px) scale(0.96) translateZ(-10px);
  }

  .uxds-phone__notch{ width: 40px; height: 10px; }
  .uxds-phone__status{ font-size: 6px; }
  .uxds-phone__greeting{ font-size: 7px; margin-top: 4px; }
  .uxds-phone__name{ font-size: 9px; }
  .uxds-phone__balance-card{ padding: 7px; margin-top: 5px; border-radius: 9px; }
  .uxds-phone__balance-label{ font-size: 6px; }
  .uxds-phone__balance-amount{ font-size: 13px; margin-top: 2px; }
  .uxds-phone__tx-row{ font-size: 6.5px; padding: 4px 0; }
  .uxds-phone__tabbar{ padding-top: 5px; }
  .uxds-phone__tab{ font-size: 6px; }
  .uxds-phone__cats{ gap: 4px; margin-top: 6px; }
  .uxds-phone__cat{ padding: 5px 2px; font-size: 5px; border-radius: 7px; }
  .uxds-phone__cat-ic{ font-size: 9px; }
  .uxds-phone__promo{ padding: 6px; margin-top: 6px; font-size: 6px; border-radius: 8px; }
  .uxds-phone__promo strong{ font-size: 8px; margin-bottom: 2px; }
  .uxds-phone__products{ gap: 4px; margin-top: 6px; }
  .uxds-phone__product{ padding: 5px 2px; font-size: 5px; border-radius: 6px; }

  .uxds-badge{ width: 34px; height: 34px; font-size: 6px; border-radius: 10px; gap: 1px; }
  .uxds-badge__icon{ font-size: 11px; }
  .uxds-badge--ios{ left:-2%; top:14%; }
  .uxds-badge--android{ right:-2%; top:14%; }

  /* other sections — unchanged */
  .uxds-platform-cards{ grid-template-columns:1fr; }
  .uxds-perks{ grid-template-columns:1fr 1fr; gap:20px 14px; }
  .uxds-impact__list{ grid-template-columns:1fr; }
  .uxds-impact__float{ display:none; }
  .uxds-hero__stats-wrap{ overflow-x:auto; }
}

@media (max-width: 380px){
  .uxds-hero__title{ font-size: 23px; }
  .uxds-stats{ grid-template-columns: 1fr 1fr; }
  .uxds-stat__num{ font-size: 17px; }

  .uxds-hero__visual{
    min-height:280px;
    padding-top:24px;
    padding-bottom:30px;
    overflow:visible;
  }
  .uxds-phone{
    width: 108px;
    height: 210px;
    padding: 6px 5px;
    border-width: 3px;
    border-radius: 16px;
  }
  .uxds-phone--front{
    margin-left: -24px;
    transform: translateY(14px);
  }
  .uxds-phone__balance-amount{ font-size: 11px; }
  .uxds-badge{ width: 28px; height: 28px; font-size: 5px; }
  .uxds-badge__icon{ font-size: 9px; }
  .uxds-hero__stats-wrap{ overflow-x:auto; }
}

/* =========================================================
   SECTION 3 + SECTION 4 — MOBILE RESPONSIVE FIX
   ========================================================= */
@media (max-width:980px){
  /* Section 3: horizontal desktop flow becomes vertical */
  .uxds-ecosystem{
    padding:64px 0;
    overflow-x:hidden;
  }
  .uxds-ecosystem__intro{
    width:100%;
    max-width:100%;
    margin-bottom:38px;
  }
  .uxds-flow{
    width:100%;
    max-width:100%;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:14px;
  }
  .uxds-flow__phone{
    width:190px;
    max-width:70vw;
    margin:0 auto;
  }
  .uxds-flow__arrow{
    width:34px;
    height:34px;
    line-height:34px;
    margin:0 auto;
    font-size:38px;
    transform:rotate(90deg);
  }
  .uxds-flow__box,
  .uxds-flow__integrations{
    width:100%;
    max-width:520px;
    margin:0 auto;
  }
  .uxds-flow__caption{
    width:100%;
    margin-top:18px;
  }

  /* Section 4: text first and image second */
  .uxds-impact__grid{
    grid-template-columns:1fr;
    gap:38px;
  }
  .uxds-impact__grid > *{min-width:0;}
  .uxds-impact__grid > :not(.uxds-impact__visual){order:1;}
  .uxds-impact__visual{order:2;}
}

@media (max-width:640px){
  .uxds-ecosystem{padding:48px 0;}
  .uxds-ecosystem__intro{margin-bottom:30px;}
  .uxds-flow{gap:12px;}
  .uxds-flow__phone{
    width:min(180px,70vw);
    padding:13px 10px;
    border-width:5px;
    border-radius:25px;
  }
  .uxds-flow__phone-ring{
    width:58px;
    height:58px;
    margin:10px auto;
  }
  .uxds-flow__arrow{
    width:30px;
    height:30px;
    line-height:30px;
    font-size:34px;
  }
  .uxds-flow__box,
  .uxds-flow__integrations{
    max-width:100%;
    padding:16px 14px;
  }
  .uxds-flow__box-title,
  .uxds-flow__integrations-title{font-size:16px;}
  .uxds-flow__box-text{font-size:13.5px;}
  .uxds-flow__integrations li{font-size:13px;}
  .uxds-flow__caption{
    font-size:12px;
    line-height:1.5;
  }

  .uxds-impact{padding:54px 0;}
  .uxds-impact__grid{gap:28px;}
  .uxds-impact__desc{
    max-width:100%;
    margin-bottom:26px;
  }
  .uxds-impact__visual{
    order:2;
    width:100%;
    min-height:390px;
    overflow:hidden;
  }
  .uxds-impact__blob{width:280px;height:280px;}
  .uxds-impact__phone{
    width:min(210px,72vw);
    padding:15px 13px;
  }
}

@media (max-width:380px){
  .uxds-ecosystem{padding:42px 0;}
  .uxds-flow__phone{width:160px;}
  .uxds-flow__box,
  .uxds-flow__integrations{padding:14px 12px;}

  .uxds-impact__visual{min-height:350px;}
  .uxds-impact__phone{width:190px;}
  .uxds-impact__blob{width:240px;height:240px;}
}



/*===================================================================
             Content Strategy Storytelling
===================================================================
*/


/*==============================================================
          CONTENT STRATEGY & STORYTELLING — CSTS
==============================================================*/
  /* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --csts-ink:#0a0a0d;
    --csts-ink-soft:#141319;
    --csts-ink-line:#27252f;
    --csts-cream:#f6efe2;
    --csts-cream-soft:#fbf6ec;
    --csts-pink:#ef1568;
    --csts-pink-dim:#c01057;
    --csts-line-dark:rgba(255,255,255,.22);
    --csts-line-cream:#c9bfa4;
    --csts-pink-soft:#fbdde9;
    --csts-orange:#f2542d;
    --csts-orange-soft:#fbdfd0;
    --csts-blue:#2f8fff;
    --csts-blue-soft:#dcebff;
    --csts-teal:#17c9a8;
    --csts-teal-soft:#d9f7f0;
    --csts-text-dark:#18151b;
    --csts-text-dark-muted:#736d7a;
    --csts-text-light:#f6f3ee;
    --csts-text-light-muted:#a49eae;
    --csts-font-display:'Space Grotesk', sans-serif;
    --csts-font-body:'Inter', sans-serif;
    --csts-radius-lg:20px;
    --csts-radius-md:14px;
    --csts-radius-sm:8px;
    --csts-maxw:1240px;
    /* screen-scene colors (device mockup "photo" area) */
    --csts-scene-sky-1:#141a29;
    --csts-scene-sky-2:#1d2740;
    --csts-scene-sky-3:#293654;
    --csts-scene-peak-back:rgba(255,255,255,.08);
    --csts-scene-peak-front:rgba(255,255,255,.16);
    --csts-purple:#9b5de5;
    --csts-purple-soft:#ece1fb;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family:var(--csts-font-body);
    color:var(--csts-text-dark);
    background:var(--csts-cream);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{ display:block; max-width:100%; }
  h1,h2,h3{ font-family:var(--csts-font-display); margin:0; }
  p{ margin:0; }
  a{ text-decoration:none; color:inherit; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; }

  .csts-page{ overflow:hidden; }

  .csts-wrap{
    max-width:var(--csts-maxw);
    margin:0 auto;
    padding:0 48px;
  }

.csts-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--csts-pink);
  margin-bottom:16px;
  padding:6px 14px 6px 6px;
  border:1px solid rgba(239,21,104,.35);
  border-radius:999px;
  background:rgba(239,21,104,.08);
}
.csts-eyebrow__icon{
  width:20px; height:20px; border-radius:50%;
  background:var(--csts-pink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.csts-eyebrow__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--csts-pink);
  margin-left:2px;
  animation:cstsEyebrowPulse 1.6s ease-in-out infinite;
}
@keyframes cstsEyebrowPulse{
  0%,100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(239,21,104,.5); }
  50%{ opacity:.6; transform:scale(1.3); box-shadow:0 0 0 4px rgba(239,21,104,0); }
}
  .csts-eyebrow::before{
    content:"";
    width:16px; height:2px;
    background:var(--csts-pink);
    display:inline-block;
    border-radius:2px;
  }

  /* ============================================================
     SCROLL-REVEAL ANIMATION ENGINE
     ============================================================ */
  .csts-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.22,.8,.28,1), transform .8s cubic-bezier(.22,.8,.28,1);
    transition-delay:var(--csts-delay, 0s);
  }
  .csts-reveal.csts-is-visible{ opacity:1; transform:translateY(0); }
  .csts-reveal--pop{ transform:scale(.92) translateY(10px); }
  .csts-reveal--pop.csts-is-visible{ transform:scale(1) translateY(0); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .csts-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    *{ animation:none !important; }
  }

  /* ============================================================
     SHARED — DEVICE MOCKUP COMPONENT ("scene" = fake webpage)
     ============================================================ */
  .csts-scene{
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 82% 14%, rgba(239,21,104,.35), transparent 40%),
      linear-gradient(180deg, var(--csts-scene-sky-1) 0%, var(--csts-scene-sky-2) 55%, var(--csts-scene-sky-3) 100%);
    overflow:hidden;
  }
  .csts-scene__peak{
    position:absolute; left:0; right:0; bottom:0; height:62%;
  }
  .csts-scene__peak--back{
    background:var(--csts-scene-peak-back);
    clip-path:polygon(0% 100%,0% 66%,14% 48%,28% 62%,44% 30%,58% 55%,74% 40%,88% 58%,100% 46%,100% 100%);
  }
  .csts-scene__peak--front{
    background:var(--csts-scene-peak-front);
    clip-path:polygon(0% 100%,0% 80%,18% 58%,34% 76%,52% 52%,68% 74%,84% 56%,100% 76%,100% 100%);
  }

  .csts-mock{ position:relative; width:100%; }
  .csts-mock__navbar{
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 5%;
    height:15%;
    background:rgba(8,8,11,.55);
    backdrop-filter:blur(2px);
  }
  .csts-mock__brand{
    font-family:var(--csts-font-display);
    font-weight:700;
    color:#fff;
    font-size:11px;
  }
  .csts-mock__navlinks{
    display:flex; align-items:center; gap:9px;
  }
  .csts-mock__navlinks span{
    font-size:6.5px;
    color:var(--csts-text-light-muted);
    font-weight:600;
  }
  .csts-mock__navlinks em{
    font-style:normal;
    font-size:6.5px;
    font-weight:700;
    color:#fff;
    background:var(--csts-pink);
    padding:3px 8px;
    border-radius:20px;
  }
  .csts-mock__burger{
    width:16px; height:11px;
    position:relative;
  }
  .csts-mock__burger span, .csts-mock__burger::before, .csts-mock__burger::after{
    content:""; position:absolute; left:0; right:0; height:1.4px; background:#fff; border-radius:2px;
  }
  .csts-mock__burger::before{ top:0; }
  .csts-mock__burger span{ top:50%; transform:translateY(-50%); }
  .csts-mock__burger::after{ bottom:0; }

  .csts-mock__body{
    position:relative; z-index:2;
    padding:9% 6% 0;
  }
  .csts-mock__headline{
    font-family:var(--csts-font-display);
    font-weight:700;
    color:#fff;
    line-height:1.18;
    font-size:15px;
    max-width:62%;
    margin-bottom:9%;
  }
  .csts-mock__cta{
    display:inline-block;
    background:var(--csts-pink);
    color:#fff;
    font-weight:700;
    font-size:7px;
    letter-spacing:.02em;
    padding:6px 14px;
    border-radius:5px;
    margin-bottom:11%;
  }
  .csts-mock__chips{
    display:flex; gap:6%;
  }
  .csts-mock__chip{
    flex:1;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:6px;
    padding:7% 6%;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    text-align:center;
  }
  .csts-mock__chip svg{ color:var(--csts-pink); width:11px; height:11px; }
  .csts-mock__chip span{
    font-size:5.6px; font-weight:700; color:var(--csts-text-light-muted); line-height:1.3;
  }

  /* size modifiers scale the whole internal typography */
  .csts-mock--lg .csts-mock__headline{ font-size:19px; }
  .csts-mock--lg .csts-mock__cta{ font-size:8.5px; padding:8px 18px; }
  .csts-mock--sm .csts-mock__headline{ font-size:11px; margin-bottom:12%; }
  .csts-mock--sm .csts-mock__cta{ font-size:6px; padding:4px 10px; }
  .csts-mock--sm .csts-mock__navlinks{ display:none; }
  .csts-mock--xs .csts-mock__headline{ font-size:8.5px; margin-bottom:14%; max-width:78%;}
  .csts-mock--xs .csts-mock__cta{ font-size:5px; padding:3px 8px; }
  .csts-mock--xs .csts-mock__navlinks{ display:none; }
  .csts-mock--xs .csts-mock__chips{ gap:8%; }
  .csts-mock--xs .csts-mock__chip{ padding:9% 5%; }

  /* Laptop frame */
  .csts-laptop{ width:100%; filter:drop-shadow(0 30px 46px rgba(0,0,0,.45)); }
  .csts-laptop__screen{
    position:relative;
    border:7px solid #16151b;
    border-bottom:none;
    border-radius:12px 12px 0 0;
    aspect-ratio:16/10.4;
    background:#0b0c10;
    overflow:hidden;
  }
  .csts-laptop__base{
    height:9px;
    background:linear-gradient(180deg,#232229,#131217);
    border-radius:0 0 4px 4px;
    position:relative;
  }
  .csts-laptop__base::after{
    content:"";
    position:absolute; left:50%; top:0; transform:translateX(-50%);
    width:14%; height:4px; background:#34323b; border-radius:0 0 5px 5px;
  }

  /* Tablet frame */
  .csts-tablet{ width:100%; filter:drop-shadow(0 24px 40px rgba(0,0,0,.42)); }
  .csts-tablet__body{
    position:relative;
    border:7px solid #16151b;
    border-radius:16px;
    aspect-ratio:3/4;
    background:#0b0c10;
    overflow:hidden;
  }
  .csts-tablet__body::before{
    content:"";
    position:absolute; top:5px; left:50%; transform:translateX(-50%);
    width:5px; height:5px; border-radius:50%;
    background:#2c2b33; z-index:3;
  }

  /* Phone frame */
  .csts-phone{ width:100%; filter:drop-shadow(0 18px 32px rgba(0,0,0,.4)); }
  .csts-phone__body{
    position:relative;
    border:6px solid #16151b;
    border-radius:22px;
    aspect-ratio:9/18.5;
    background:#0b0c10;
    overflow:hidden;
  }
  .csts-phone__body::before{
    content:"";
    position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:26%; height:5px; border-radius:6px;
    background:#16151b; z-index:3;
  }

  /* ============================================================
     SECTION 1 — HERO
     ============================================================ */
  .csts-hero{
    background:
      radial-gradient(ellipse 900px 520px at 84% 6%, rgba(239,21,104,.22), transparent 62%),
      radial-gradient(ellipse 620px 420px at 6% 92%, rgba(239,21,104,.10), transparent 60%),
      var(--csts-ink);
    color:var(--csts-text-light);
    padding:96px 0 88px;
    position:relative;
    overflow:hidden;
  }
  .csts-hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(ellipse 900px 600px at 78% 10%, #000 0%, transparent 70%);
            mask-image:radial-gradient(ellipse 900px 600px at 78% 10%, #000 0%, transparent 70%);
    pointer-events:none;
  }
  .csts-hero::after{
    content:"";
    position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(239,21,104,.55), transparent);
  }
  .csts-hero__blob{
    position:absolute; border-radius:50%; filter:blur(70px);
    pointer-events:none; z-index:0;
    animation:cstsDrift 12s ease-in-out infinite;
  }
  .csts-hero__blob--a{
    width:380px; height:380px; top:-120px; right:-60px;
    background:radial-gradient(circle, rgba(239,21,104,.32), transparent 70%);
  }
  .csts-hero__blob--b{
    width:280px; height:280px; bottom:-90px; right:28%;
    background:radial-gradient(circle, rgba(255,120,170,.16), transparent 70%);
    animation-delay:-4s; animation-duration:15s;
  }
  @keyframes cstsDrift{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-18px, 22px) scale(1.08); }
  }
  .csts-hero__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
    position:relative;
    z-index:1;
  }
 
.csts-hero__title{
    font-size:clamp(34px, 4.4vw, 52px);
    line-height:1.06;
    font-weight:700;
    letter-spacing:-.02em;
    margin-bottom:20px;

    position:relative;

    /* Clean white text */
    color:#ffffff;

    /* Remove all blur / glow */
    filter:none;
    text-shadow:none;

    /* No artificial stroke */
    -webkit-text-stroke:0;

    animation:none;
}

.csts-hero__title::before{
    display:none;
}
@keyframes cstsTitleGlow{
  0%,100%{ opacity:.28; }
  50%{ opacity:.55; }
}
  @keyframes cstsShine{
    0%{ background-position:120% 0; }
    50%{ background-position:0% 0; }
    100%{ background-position:120% 0; }
  }
 .csts-hero__title em{
    font-style:normal;

    background:linear-gradient(
        100deg,
        #ef1568 0%,
        #ff4f91 45%,
        #f2542d 100%
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    color:transparent;

    position:relative;
    display:inline;
    
    /* No animation */
    animation:none;

    /* No shadow */
    filter:none;
    text-shadow:none;
}
.csts-hero__title em::after{
    display:none;
}
  .csts-hero__desc{
    font-size:16px;
    line-height:1.65;
    color: whitesmoke;
    max-width:440px;
    margin-bottom:44px;
    color: grey;
  }
  .csts-hero__desc strong{ color: maroon; font-weight:700; }
.csts-hero__desc em{ color:var(--csts-pink); font-style:normal; font-weight:700; }
  .csts-flowRow{ display:flex; align-items:center; gap:0; }
  .csts-flowNode{ display:flex; flex-direction:column; align-items:center; text-align:center; width:130px; align-self:flex-start; }
  .csts-flowNode__iconWrap{
    position:relative;
    width:64px; height:64px;
    margin-bottom:14px;
    animation:cstsNodeFloat 4.5s ease-in-out infinite;
  }
  .csts-flowNode:nth-child(1) .csts-flowNode__iconWrap{ animation-delay:0s; }
  .csts-flowNode:nth-child(3) .csts-flowNode__iconWrap{ animation-delay:-1.5s; }
  .csts-flowNode:nth-child(5) .csts-flowNode__iconWrap{ animation-delay:-3s; }
  @keyframes cstsNodeFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
  }
  .csts-flowNode__iconWrap::before{
    content:"";
    position:absolute; inset:-4px;
    border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0%, var(--csts-pink) 18%, transparent 38%, transparent 100%);
    opacity:.65;
    animation:cstsRingSpin 5s linear infinite;
  }
  @keyframes cstsRingSpin{ to{ transform:rotate(360deg); } }
  .csts-flowNode__icon{
    width:64px; height:64px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--csts-ink-line);
    background:radial-gradient(circle at 30% 25%, rgba(239,21,104,.14), var(--csts-ink-soft) 70%);
    color:var(--csts-pink);
    position:absolute; inset:0;
    z-index:1;
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
  }
  .csts-flowNode__icon--hex{
    clip-path:polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  }
  .csts-flowNode:hover .csts-flowNode__icon{
    transform:scale(1.08);
    border-color:var(--csts-pink);
    background:radial-gradient(circle at 30% 25%, rgba(239,21,104,.32), var(--csts-ink-soft) 75%);
    box-shadow:0 14px 30px -12px rgba(239,21,104,.75), 0 0 0 4px rgba(239,21,104,.08);
  }
  .csts-flowNode:hover .csts-flowNode__iconWrap::before{ opacity:1; animation-duration:2s; }
  .csts-flowNode__label{ font-family:var(--csts-font-display); font-weight:700; font-size:13px; letter-spacing:.06em; margin-bottom:8px; }
  .csts-flowNode:nth-child(1) .csts-flowNode__icon{ color:var(--csts-blue); background:radial-gradient(circle at 30% 25%, rgba(47,143,255,.16), var(--csts-ink-soft) 70%); }
  .csts-flowNode:nth-child(1) .csts-flowNode__iconWrap::before{ background:conic-gradient(from 0deg, transparent 0%, var(--csts-blue) 18%, transparent 38%, transparent 100%); }
  .csts-flowNode:nth-child(1):hover .csts-flowNode__icon{ border-color:var(--csts-blue); background:radial-gradient(circle at 30% 25%, rgba(47,143,255,.35), var(--csts-ink-soft) 75%); box-shadow:0 14px 30px -12px rgba(47,143,255,.75), 0 0 0 4px rgba(47,143,255,.08); }

  .csts-flowNode:nth-child(5) .csts-flowNode__icon{ color:var(--csts-teal); background:radial-gradient(circle at 30% 25%, rgba(23,201,168,.16), var(--csts-ink-soft) 70%); }
  .csts-flowNode:nth-child(5) .csts-flowNode__iconWrap::before{ background:conic-gradient(from 0deg, transparent 0%, var(--csts-teal) 18%, transparent 38%, transparent 100%); }
  .csts-flowNode:nth-child(5):hover .csts-flowNode__icon{ border-color:var(--csts-teal); background:radial-gradient(circle at 30% 25%, rgba(23,201,168,.35), var(--csts-ink-soft) 75%); box-shadow:0 14px 30px -12px rgba(23,201,168,.75), 0 0 0 4px rgba(23,201,168,.08); }

  .csts-flowNode__copy{ font-size:13.5px; line-height:1.5; color: wheat; }
  .csts-flowConnector{
    flex:1; height:2px; margin:0 -6px 46px; min-width:20px;
    background-image:repeating-linear-gradient(90deg, var(--csts-line-dark) 0 6px, transparent 6px 12px);
    background-size:24px 2px;
    opacity:.6;
    animation:cstsFlowDash 1.4s linear infinite;
  }
  @keyframes cstsFlowDash{ to{ background-position:-24px 0; } }

  .csts-oneExp{ position:relative; margin-top:34px; display:inline-flex; align-items:center; justify-content:center; width:150px; height:150px; }
  .csts-oneExp__orbit{
    position:absolute; inset:0;
    border-radius:50%;
    border:1px dashed rgba(239,21,104,.4);
    animation:cstsOrbitSpin 14s linear infinite;
  }
  .csts-oneExp__orbit::before{
    content:"";
    position:absolute; top:-3px; left:50%; transform:translateX(-50%);
    width:6px; height:6px; border-radius:50%;
    background:var(--csts-pink);
    box-shadow:0 0 10px 2px rgba(239,21,104,.8);
  }
  @keyframes cstsOrbitSpin{ to{ transform:rotate(360deg); } }
  .csts-oneExp__badge{
    width:118px; height:118px; border-radius:50%;
    border:1.5px solid var(--csts-pink);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:radial-gradient(circle at 40% 30%, rgba(239,21,104,.16), rgba(239,21,104,.04) 70%);
    text-align:center;
    animation:cstsPulseRing 3.2s ease-in-out infinite;
    position:relative; z-index:2;
  }
  @keyframes cstsPulseRing{
    0%,100%{ box-shadow:0 0 0 0 rgba(239,21,104,.35), 0 0 24px 2px rgba(239,21,104,.18); }
    50%{ box-shadow:0 0 0 14px rgba(239,21,104,0), 0 0 34px 6px rgba(239,21,104,.3); }
  }
  .csts-oneExp__badge strong{ font-family:var(--csts-font-display); font-size:16px; font-weight:700; letter-spacing:.02em; color:var(--csts-text-light); }
  .csts-oneExp__badge span{ font-size:9.5px; letter-spacing:.14em; color:var(--csts-pink); font-weight:700; margin-top:3px; }

  /* ---- Hero right-side device stack + circuit connector lines ---- */
  .csts-heroStack{
    position:relative;
    min-height:430px;
    perspective:1400px;
    z-index:2;
  }
  .csts-heroStack__glow{
    position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
    width:80%; height:60px; border-radius:50%;
    background:radial-gradient(ellipse, rgba(239,21,104,.4), transparent 72%);
    filter:blur(18px);
    z-index:1;
    animation:cstsGlowPulse 4s ease-in-out infinite;
  }
  @keyframes cstsGlowPulse{
    0%,100%{ opacity:.55; transform:translateX(-50%) scale(1); }
    50%{ opacity:.9; transform:translateX(-50%) scale(1.06); }
  }
  .csts-hero__connectors{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible; display:none; }
  .csts-hero__connectors.csts-is-ready{ display:block; }
  .csts-hero__connectors path{
    fill:none; stroke:var(--csts-line-dark); stroke-width:1.6; stroke-dasharray:4 5; opacity:.85;
    stroke-dashoffset:300;
    animation:cstsDash 3.4s linear infinite;
  }
  @keyframes cstsDash{ to{ stroke-dashoffset:0; } }
  .csts-hero__connectors circle{ fill:var(--csts-pink); }
  .csts-hero__connectors circle.csts-hero__connectorStart{ fill:var(--csts-ink); stroke:var(--csts-pink); stroke-width:2; }

  .csts-heroStack__item{
    position:absolute; z-index:2;
    transform-style:preserve-3d;
    animation:cstsFloat 6s ease-in-out infinite;
    transition:transform .5s ease, filter .5s ease;
  }
  .csts-heroStack__item--laptop{
    top:0; left:0; width:76%; z-index:2;
    transform:rotateY(-9deg) rotateX(3deg);
    animation-delay:0s;
  }
  .csts-heroStack__item--tablet{
    top:20%; right:0; width:33%; z-index:3;
    transform:rotateY(-9deg) rotateX(3deg);
    animation-delay:-1.6s;
  }
  .csts-heroStack__item--phone{
    bottom:0; right:4%; width:19%; z-index:4;
    transform:rotateY(-9deg) rotateX(3deg);
    animation-delay:-3.2s;
  }
  @keyframes cstsFloat{
    0%,100%{ margin-top:0; }
    50%{ margin-top:-10px; }
  }
  .csts-heroStack:hover .csts-heroStack__item{
    filter:drop-shadow(0 20px 30px rgba(239,21,104,.25));
  }
  .csts-heroStack:hover .csts-heroStack__item--laptop{ transform:rotateY(0deg) rotateX(0deg) scale(1.02); }
  .csts-heroStack:hover .csts-heroStack__item--tablet{ transform:rotateY(0deg) rotateX(0deg) scale(1.03) translateY(-4px); }
  .csts-heroStack:hover .csts-heroStack__item--phone{ transform:rotateY(0deg) rotateX(0deg) scale(1.04) translateY(-8px); }

  /* ============================================================
     SECTION 2 — STORY STRATEGY ADVANTAGE
     ============================================================ */
.csts-advantage{
  background:var(--csts-cream);
  padding:100px 0;
  position:relative;
  overflow:hidden;
}
.csts-advantage::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(20,15,10,.08) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 780px 480px at 50% 40%, #000 0%, transparent 72%);
          mask-image:radial-gradient(ellipse 780px 480px at 50% 40%, #000 0%, transparent 72%);
  pointer-events:none;
}
.csts-advantage__blob{
  position:absolute; border-radius:50%; filter:blur(80px);
  pointer-events:none; z-index:0;
  animation:cstsDrift 13s ease-in-out infinite;
}
.csts-advantage__blob--a{
  width:340px; height:340px; top:-100px; left:-80px;
  background:radial-gradient(circle, rgba(47,143,255,.26), transparent 70%);
}
.csts-advantage__blob--b{
  width:300px; height:300px; bottom:-90px; right:-60px;
  background:radial-gradient(circle, rgba(23,201,168,.24), transparent 70%);
  animation-delay:-5s; animation-duration:16s;
}
.csts-advantage__blob--c{
  width:260px; height:260px; top:30%; left:38%;
  background:radial-gradient(circle, rgba(239,21,104,.18), transparent 70%);
  animation-delay:-8s; animation-duration:14s;
}
.csts-advantage__blob--d{
  width:220px; height:220px; top:8%; right:12%;
  background:radial-gradient(circle, rgba(242,84,45,.18), transparent 70%);
  animation-delay:-3s; animation-duration:11s;
}

.csts-advantage__spotlight{
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(239,21,104,.14), transparent 70%);
  pointer-events:none;
  z-index:0;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .3s ease;
}
.csts-advantage__spotlight.csts-is-active{ opacity:1; }
  .csts-advantage__grid{
    display:grid;
    grid-template-columns:0.82fr 1fr 0.82fr;
    gap:40px;
    align-items:center;
    position:relative;
    z-index:1;
  }
  .csts-advantage__title{ font-size:clamp(30px, 3.6vw, 42px); line-height:1.1; font-weight:700; letter-spacing:-.01em; margin-bottom:18px; }
  .csts-advantage__desc{ font-size:15.5px; line-height:1.65; color:var(--csts-text-dark-muted); max-width:360px; }

  .csts-diagram{ position:relative; display:flex; flex-direction:column; align-items:center; gap:0; perspective:1200px; }
  .csts-diagram__laptop{
    width:100%; max-width:280px;
    animation:cstsFloatSoft 5s ease-in-out infinite;
    transition:transform .4s ease, filter .4s ease;
    position: relative;
  }
.csts-diagram__laptop::before{
  content:"";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:130%; height:130%; border-radius:50%;
  background:radial-gradient(circle, rgba(239,21,104,.28), transparent 65%);
  filter:blur(30px);
  z-index:-1;
  animation:cstsHaloPulse 3.4s ease-in-out infinite;
}
@keyframes cstsHaloPulse{
  0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.08); }
}
.csts-diagram__laptop .csts-laptop__screen{ position:relative; overflow:hidden; }
.csts-diagram__laptop .csts-laptop__screen::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  background-size:250% 250%;
  animation:cstsScreenShine 5s ease-in-out infinite;
  pointer-events:none;
  z-index:5;
}
@keyframes cstsScreenShine{
  0%{ background-position:130% 130%; }
  50%{ background-position:-30% -30%; }
  100%{ background-position:130% 130%; }
}
  .csts-diagram__laptop .csts-laptop__screen{ border-color:#1c1a22; }
  .csts-diagram:hover .csts-diagram__laptop{
    transform:rotateX(4deg) scale(1.03);
    filter:drop-shadow(0 22px 34px rgba(239,21,104,.22));
  }
  @keyframes cstsFloatSoft{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-7px); }
  }

  .csts-pill{
    font-family:var(--csts-font-display);
    font-size:11px; font-weight:700; letter-spacing:.08em;
    color:var(--csts-pink); background:var(--csts-pink-soft);
    border:1px solid var(--csts-pink); padding:7px 18px; border-radius:999px;
    white-space:nowrap;
    position:relative;
    box-shadow:0 0 0 0 rgba(239,21,104,.35);
    animation:cstsPillPulse 2.6s ease-in-out infinite;
  }
  @keyframes cstsPillPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(239,21,104,.28); }
    50%{ box-shadow:0 0 0 8px rgba(239,21,104,0); }
  }
  .csts-diagram__connector{
    width:2px; height:22px;
    background-image:repeating-linear-gradient(180deg, var(--csts-line-cream) 0 6px, transparent 6px 12px);
    background-size:2px 24px;
    opacity:.65;
    animation:cstsFlowDashV 1.2s linear infinite;
  }
  @keyframes cstsFlowDashV{ to{ background-position:0 -24px; } }

  .csts-diagram__branch{ display:flex; justify-content:center; align-items:flex-end; gap:22px; margin:6px 0; }
  .csts-diagram__branchItem{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    transition:transform .3s ease, filter .3s ease;
    animation:cstsFloatSoft 4.5s ease-in-out infinite;
  }
  .csts-diagram__branchItem--mobile{ width:15%; animation-delay:-.4s; }
  .csts-diagram__branchItem--tablet{ width:22%; animation-delay:-1.6s; }
  .csts-diagram__branchItem--desktop{ width:34%; animation-delay:-2.8s; }
  .csts-diagram__branchItem:hover{ transform:translateY(-6px) scale(1.04); filter:drop-shadow(0 14px 22px rgba(0,0,0,.18)); }
  .csts-diagram__monitor{ width:100%; }
  .csts-diagram__monitorScreen{
    position:relative; border:5px solid #1c1a22; border-radius:6px;
    aspect-ratio:16/10.5; background:#0b0c10; overflow:hidden;
  }
  .csts-diagram__monitorStand{
    width:26%; height:8px; background:#1c1a22; margin:0 auto; border-radius:0 0 3px 3px;
  }
  .csts-diagram__branchLabel{
    font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--csts-text-dark-muted);
    padding:3px 9px; border-radius:20px; transition:color .3s ease, background .3s ease;
  }
  .csts-diagram__branchItem--mobile .csts-diagram__branchLabel{ }
  .csts-diagram__branchItem--mobile:hover .csts-diagram__branchLabel{ color:var(--csts-teal); background:var(--csts-teal-soft); }
  .csts-diagram__branchItem--tablet:hover .csts-diagram__branchLabel{ color:var(--csts-pink); background:var(--csts-pink-soft); }
  .csts-diagram__branchItem--desktop:hover .csts-diagram__branchLabel{ color:var(--csts-blue); background:var(--csts-blue-soft); }

  .csts-features{ display:flex; flex-direction:column; gap:26px; }
  .csts-featureItem{
  display:flex; gap:16px;
  position:relative;
  padding:9px 11px 9px 14px;
  border-radius:12px;
  transition:background .3s ease, transform .3s ease;
}
.csts-featureItem::before{
  content:"";
  position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:3px;
  background:var(--csts-pink);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s ease;
}
.csts-featureItem:nth-child(1)::before{ background:var(--csts-blue); }
.csts-featureItem:nth-child(3)::before{ background:var(--csts-teal); }
.csts-featureItem:nth-child(4)::before{ background:var(--csts-orange); }
.csts-featureItem:hover{ background:rgba(0,0,0,.035); transform:translateX(4px); }
.csts-featureItem:hover::before{ transform:scaleY(1); }
.csts-featureItem__num{
  position:absolute; right:14px; top:10px;
  font-family:var(--csts-font-display);
  font-weight:700; font-size:11px; letter-spacing:.06em;
  color:var(--csts-text-dark-muted); opacity:.5;
}
  .csts-featureItem__icon{
    flex:none; width:46px; height:46px; border-radius:50%;
    background:var(--csts-pink-soft); color:var(--csts-pink);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    transition:transform .35s ease, background .35s ease, box-shadow .35s ease;
  }
  .csts-featureItem__icon::before{
    content:""; position:absolute; inset:-5px; border-radius:50%;
    border:1.5px dashed currentColor; opacity:0; transition:opacity .35s ease;
  }
  .csts-featureItem:hover .csts-featureItem__icon{ transform:scale(1.1) rotate(-6deg); background:var(--csts-pink); color:#fff; box-shadow:0 12px 26px -10px rgba(239,21,104,.55); }
  .csts-featureItem:hover .csts-featureItem__icon::before{ opacity:.5; animation:cstsRingSpin 6s linear infinite; }
  .csts-featureItem:nth-child(1) .csts-featureItem__icon{ background:var(--csts-blue-soft); color:var(--csts-blue); }
  .csts-featureItem:nth-child(1):hover .csts-featureItem__icon{ background:var(--csts-blue); color:#fff; box-shadow:0 12px 26px -10px rgba(47,143,255,.55); }
  .csts-featureItem:nth-child(3) .csts-featureItem__icon{ background:var(--csts-teal-soft); color:var(--csts-teal); }
  .csts-featureItem:nth-child(3):hover .csts-featureItem__icon{ background:var(--csts-teal); color:#fff; box-shadow:0 12px 26px -10px rgba(23,201,168,.55); }
  .csts-featureItem:nth-child(4) .csts-featureItem__icon{ background:var(--csts-orange-soft); color:var(--csts-orange); }
  .csts-featureItem:nth-child(4):hover .csts-featureItem__icon{ background:var(--csts-orange); color:#fff; box-shadow:0 12px 26px -10px rgba(242,84,45,.55); }
  .csts-featureItem__title{ font-family:var(--csts-font-display); font-size:16.5px; font-weight:700; margin-bottom:5px; color: #000 }
  .csts-featureItem__copy{ font-size:13.5px; line-height:1.55; color:var(--csts-text-dark-muted); }

  .csts-diagram{ transition:transform .15s ease-out; transform-style:preserve-3d; }
.csts-diagram__laptop{ transition:transform .15s ease-out, filter .3s ease; }
.csts-diagram__branchItem{ transition:transform .15s ease-out, filter .3s ease; }
  /* ============================================================
     SECTION 3 — INSIDE THE CONTENT STRATEGY
     ============================================================ */
  .csts-inside{ background:var(--csts-ink); color:var(--csts-text-light); padding:100px 0 0; }
  .csts-inside__top{ display:grid; grid-template-columns:0.85fr 1.3fr; gap:30px; align-items:center; padding-bottom:80px; }
 .csts-inside__title{
  font-size:clamp(30px, 3.6vw, 42px);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:18px;
  background:linear-gradient(100deg, var(--csts-orange) 0%, var(--csts-pink) 45%, var(--csts-purple) 90%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:cstsShine 8s ease-in-out infinite;
}
  .csts-inside__desc{ font-size:16.5px; line-height:1.65; color: #fff; max-width:380px; }

  .csts-layerDiagram{ display:grid; grid-template-columns:1fr 1.1fr 1fr; align-items:center; gap:6px; }
  .csts-layerCol{ display:flex; flex-direction:column; gap:36px; }
  .csts-layerCol--right{ align-items:flex-end; text-align:right; }
  .csts-layerNote{ display:flex; gap:12px; max-width:180px; position:relative; }
  .csts-layerCol--right .csts-layerNote{ flex-direction:row-reverse; }
  .csts-layerNote__icon{
    flex:none; width:38px; height:38px; border-radius:10px;
    border:1.5px solid var(--csts-ink-line); background:var(--csts-ink-soft);
    color:var(--csts-pink); display:flex; align-items:center; justify-content:center;
    transition:border-color .3s ease, transform .3s ease; position:relative;
  }
  .csts-layerNote__icon::after{
    content:""; position:absolute; top:50%; width:16px; height:0;
    border-top:2px dotted var(--csts-line-dark); opacity:.6;
  }
  .csts-layerCol .csts-layerNote__icon::after{ right:-16px; }
  .csts-layerCol--right .csts-layerNote__icon::after{ left:-16px; }
  .csts-layerNote:hover .csts-layerNote__icon{ transform:translateY(-3px); }
  .csts-layerCol:nth-child(1) .csts-layerNote:nth-child(1) .csts-layerNote__icon{ color:var(--csts-blue); }
  .csts-layerCol:nth-child(1) .csts-layerNote:nth-child(1):hover .csts-layerNote__icon{ border-color:var(--csts-blue); }
  .csts-layerCol:nth-child(1) .csts-layerNote:nth-child(2):hover .csts-layerNote__icon{ border-color:var(--csts-pink); }
  .csts-layerCol--right .csts-layerNote:nth-child(1) .csts-layerNote__icon{ color:var(--csts-teal); }
  .csts-layerCol--right .csts-layerNote:nth-child(1):hover .csts-layerNote__icon{ border-color:var(--csts-teal); }
  .csts-layerCol--right .csts-layerNote:nth-child(2) .csts-layerNote__icon{ color:var(--csts-orange); }
  .csts-layerCol--right .csts-layerNote:nth-child(2):hover .csts-layerNote__icon{ border-color:var(--csts-orange); }
  .csts-layerNote__title{ font-family:var(--csts-font-display); font-size:15.5px; font-weight:700; margin-bottom:3px; }
  .csts-layerNote__copy{ font-size:14.5px; line-height:1.5; color:var(--csts-text-light-muted); }

  .csts-brandLaptop{ width:100%; max-width:340px; margin:0 auto; }
  .csts-brandLaptop .csts-laptop__screen{
    background:
      radial-gradient(circle at 50% 45%, rgba(239,21,104,.35), transparent 62%),
      #0b0a10;
    display:flex; align-items:center; justify-content:center;
    border-color:#201d28;
    overflow: hidden;
  }
  .csts-brandLaptop .csts-laptop__screen::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px);
  pointer-events:none; z-index:4;
}
.csts-brandLaptop .csts-laptop__screen::after{
  content:"";
  position:absolute; left:0; right:0; height:24%;
  background:linear-gradient(180deg, transparent, rgba(239,21,104,.4), transparent);
  filter:blur(2px);
  pointer-events:none; z-index:5;
  animation:cstsScanMove 3s linear infinite;
}
@keyframes cstsScanMove{
  0%{ transform:translateY(-40%); }
  100%{ transform:translateY(420%); }
}
  .csts-brandLaptop__mark{
    font-family:var(--csts-font-display); font-weight:700;
    font-size:15%;
    color:transparent;
    background:linear-gradient(90deg,#ff4f93,var(--csts-pink));
    -webkit-background-clip:text; background-clip:text;
    letter-spacing:.04em;
    text-shadow:0 0 30px rgba(239,21,104,.4);
    position:relative;
  }
  .csts-brandLaptop__mark::after{
    content:""; position:absolute; left:8%; right:8%; bottom:-18%; height:2px;
    background:linear-gradient(90deg, transparent, var(--csts-pink), transparent);
    opacity:.7;
  }

  .csts-stripBar{ border-top:1px solid var(--csts-ink-line); background:var(--csts-ink-soft); padding:26px 0; margin-top:0; }
  .csts-stripList{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0; }
  .csts-stripItem{
    display:flex; align-items:center; gap:10px; padding:6px 28px;
    font-size:13.5px; font-weight:600; color:var(--csts-text-light);
    border-right:1px solid var(--csts-ink-line); transition:color .3s ease;
  }
  .csts-stripItem:last-child{ border-right:none; }
  .csts-stripItem svg{ flex:none; transition:transform .3s ease, color .3s ease, filter .3s ease; }
.csts-stripItem:hover svg{ transform:scale(1.25) rotate(-6deg); }
.csts-stripItem:nth-child(1) svg{ color:var(--csts-blue); }
.csts-stripItem:nth-child(1):hover svg{ filter:drop-shadow(0 0 8px rgba(47,143,255,.7)); }
.csts-stripItem:nth-child(2) svg{ color:var(--csts-pink); }
.csts-stripItem:nth-child(2):hover svg{ filter:drop-shadow(0 0 8px rgba(239,21,104,.7)); }
.csts-stripItem:nth-child(3) svg{ color:var(--csts-teal); }
.csts-stripItem:nth-child(3):hover svg{ filter:drop-shadow(0 0 8px rgba(23,201,168,.7)); }
.csts-stripItem:nth-child(4) svg{ color:var(--csts-orange); }
.csts-stripItem:nth-child(4):hover svg{ filter:drop-shadow(0 0 8px rgba(242,84,45,.7)); }
.csts-stripItem:nth-child(5) svg{ color:var(--csts-purple); }
.csts-stripItem:nth-child(5):hover svg{ filter:drop-shadow(0 0 8px rgba(155,93,229,.7)); }
.csts-stripItem:hover{ color:var(--csts-text-light); }

  .csts-layerWire{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
.csts-layerWire path{
  fill:none; stroke-width:1.8; stroke-dasharray:5 6; stroke-dashoffset:200;
  opacity:.85; animation:cstsDash 2.2s linear infinite;
  stroke-linecap:round;
}
.csts-layerWire circle{ opacity:.9; }
.csts-layerWire .csts-w-blue{ stroke:var(--csts-blue); filter:drop-shadow(0 0 5px rgba(47,143,255,.65)); }
.csts-layerWire .csts-w-pink{ stroke:var(--csts-pink); filter:drop-shadow(0 0 5px rgba(239,21,104,.65)); }
.csts-layerWire .csts-w-teal{ stroke:var(--csts-teal); filter:drop-shadow(0 0 5px rgba(23,201,168,.65)); }
.csts-layerWire .csts-w-orange{ stroke:var(--csts-orange); filter:drop-shadow(0 0 5px rgba(242,84,45,.65)); }
.csts-layerWire circle.csts-w-blue{ fill:var(--csts-blue); }
.csts-layerWire circle.csts-w-pink{ fill:var(--csts-pink); }
.csts-layerWire circle.csts-w-teal{ fill:var(--csts-teal); }
.csts-layerWire circle.csts-w-orange{ fill:var(--csts-orange); }
.csts-layerDiagram{ position:relative; }

  /* ============================================================
     SECTION 4 — BUILT AROUND YOUR USERS
     ============================================================ */
  .csts-journey{background: linear-gradient(160deg, var(--mad-cream) 0%, #f9d9e4 50%, #fce0c8 100%);padding:80px 0 90px; }
  .csts-journey__header{ max-width:640px; margin:0 0 64px; }
  .csts-journey__title{ font-size:clamp(28px, 3.4vw, 38px); line-height:1.15; font-weight:700; letter-spacing:-.01em; color: #000;}

  .csts-steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; position:relative; }
  .csts-step{ position:relative; }
  .csts-step__icon{
    width:82px; height:82px; border-radius:50%;
    background: linear-gradient(135deg, var(--mad-pink), #f6923a);
    display:flex; align-items:center; justify-content:center; margin-bottom:22px;
    position:relative; transition:transform .35s ease, box-shadow .35s ease;
  }
  .csts-step:nth-child(2) .csts-step__icon,
  .csts-step:nth-child(4) .csts-step__icon{ background: #000; color:var(--csts-orange); }
  .csts-step:hover .csts-step__icon{ transform:translateY(-5px); box-shadow:0 14px 28px -14px rgba(0,0,0,.25); }
  .csts-step__num{ font-family:var(--csts-font-display); font-weight:900; font-size:14px; color:var(--csts-orange); letter-spacing:.06em; margin-bottom:4px; display:block; }
  .csts-step:nth-child(1) .csts-step__num, .csts-step:nth-child(3) .csts-step__num{ color:var(--csts-pink); }
  .csts-step__title{ font-family:var(--csts-font-display); font-weight:700; font-size:20px;color: #000; letter-spacing:.03em; margin-bottom:10px; text-transform:uppercase; }
  .csts-step__copy{ font-size:15.5px; line-height:1.55; color: maroon; max-width:230px; }

  .csts-journey__divider{ display:flex; align-items:center; margin:70px 0 46px; }
  .csts-journey__divider::before, .csts-journey__divider::after{ content:""; flex:1; height:1px; background:linear-gradient(to right, transparent, #d8cdb8, transparent); }
  .csts-journey__dividerDot{ width:9px; height:9px; border-radius:50%; background:var(--csts-pink); margin:0 14px; flex:none; }

  .csts-journey__closing{
    text-align:center; font-family:var(--csts-font-display); font-size:clamp(17px, 2vw, 21px);
    line-height:1.55; font-weight:500; color:var(--csts-text-dark); max-width:760px; margin:0 auto;
  }

  /* =========================================================
   CSTS — FINAL MOBILE RESPONSIVE
   Paste AFTER the complete desktop CSS.
   ========================================================= */

@media screen and (max-width: 768px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .csts-wrap{
    width:100%;
    max-width:100%;
    padding:0 16px;
  }

  .csts-hero,
  .csts-advantage,
  .csts-inside,
  .csts-journey{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  /* SECTION 1 */
  .csts-hero{padding:52px 0 46px; padding-top: 90px !important;}
  .csts-hero__grid{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:38px;
  }
  .csts-hero__grid > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .csts-hero__title{
    width:100%;
    max-width:100%;
    font-size:clamp(30px,9vw,38px);
    line-height:1.12;
    overflow-wrap:anywhere;
  }
  .csts-hero__desc{
    width:100%;
    max-width:100%;
    margin-bottom:32px;
    font-size:14px;
  }
  .csts-flowRow{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:8px;
  }
  .csts-flowNode{
    width:100%;
    min-width:0;
  }
  .csts-flowConnector{display:none;}
  .csts-flowNode__iconWrap,
  .csts-flowNode__icon{
    width:52px;
    height:52px;
  }
  .csts-flowNode__label{font-size:11px;}
  .csts-flowNode__copy{
    width:100%;
    padding:0 2px;
    font-size:10.5px;
    overflow-wrap:anywhere;
  }
  .csts-oneExp{
    display:flex;
    width:130px;
    height:130px;
    margin:30px auto 0;
  }
  .csts-oneExp__badge{width:104px;height:104px;}
  .csts-heroStack{
    width:100%;
    min-height:280px;
    margin:0;
    order:2;
  }
  .csts-heroStack__item--laptop{left:1%;width:73%;}
  .csts-heroStack__item--tablet{right:1%;width:33%;}
  .csts-heroStack__item--phone{right:7%;width:19%;}

  /* SECTION 2 */
  .csts-advantage{padding:52px 0;}
  .csts-advantage__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:34px;
    text-align:left;
  }
  .csts-advantage__grid > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .csts-advantage__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .csts-advantage__desc{max-width:100%;}
  .csts-diagram{
    width:100%;
    max-width:340px;
    margin:0 auto;
  }
  .csts-diagram__laptop{width:78%;max-width:250px;}
  .csts-diagram__branch{
    width:100%;
    max-width:320px;
    gap:10px;
  }
  .csts-diagram__branchItem--mobile{width:18%;}
  .csts-diagram__branchItem--tablet{width:26%;}
  .csts-diagram__branchItem--desktop{width:39%;}
  .csts-pill{font-size:9px;padding:6px 12px;}
  .csts-features{width:100%;gap:18px;}
  .csts-featureItem{
    display:flex;
    width:100%;
    max-width:100%;
    gap:12px;
    padding:10px 8px 10px 12px;
  }
  .csts-featureItem__icon{width:42px;height:42px;}
  .csts-featureItem__title{font-size:15px;}
  .csts-featureItem__copy{font-size:13px;}

  /* SECTION 3 */
  .csts-inside{padding:52px 0 0;}
  .csts-inside__top{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:14px;
    padding-bottom:40px;
  }
  .csts-inside__top > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .csts-inside__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .csts-inside__desc{max-width:100%;font-size:14.5px;}
  .csts-layerDiagram{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:24px;
  }
  .csts-layerDiagram > *{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .csts-brandLaptop{
    order:1;
    width:100%;
    max-width:300px;
    margin:0 auto 8px;
  }
  .csts-layerCol,
  .csts-layerCol--right{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    gap:16px;
    align-items:start;
    text-align:left;
  }
  .csts-layerCol{order:2;}
  .csts-layerCol--right{order:3;}
  .csts-layerNote,
  .csts-layerCol--right .csts-layerNote{
    display:flex;
    flex-direction:row;
    width:100%;
    max-width:100%;
    gap:10px;
  }
  .csts-layerNote__icon::after,
  .csts-layerWire{display:none;}
  .csts-layerNote__title{font-size:14px;}
  .csts-layerNote__copy{font-size:12.5px;}
  .csts-stripBar{padding:22px 0;}
  .csts-stripList{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    gap:10px;
  }
  .csts-stripItem{
    width:100%;
    min-width:0;
    padding:8px 6px;
    border-right:0;
    font-size:12px;
  }

  /* SECTION 4 */
  .csts-journey{padding:52px 0;}
  .csts-journey__header{
    width:100%;
    max-width:100%;
    margin-bottom:36px;
  }
  .csts-journey__title{
    font-size:clamp(29px,8vw,36px);
    overflow-wrap:anywhere;
  }
  .csts-steps{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:28px;
  }
  .csts-step{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    width:100%;
    column-gap:14px;
    align-items:start;
  }
  .csts-step__icon{
    grid-row:1 / span 3;
    width:64px;
    height:64px;
    margin:0;
  }
  .csts-step__num,
  .csts-step__title,
  .csts-step__copy{grid-column:2;}
  .csts-step__title{font-size:17px;margin-bottom:5px;}
  .csts-step__copy{max-width:100%;font-size:13.5px;}
  .csts-journey__divider{margin:42px 0 30px;}
  .csts-journey__closing{font-size:16px;}
}

.csts-evolve-quote-card{
  position:relative;
  max-width:920px;
  margin:0 auto;
  padding:28px 28px 28px 56px;
  border:1px solid rgba(239,21,104,.24);
  border-radius:var(--csts-radius-lg);
  background: #000;
  box-shadow:0 18px 50px rgba(28,17,24,.08);
}
.csts-evolve-quote-mark{
  position:absolute;
  top:27px;
  left:28px;
  width:34px;
  color:var(--csts-pink);
  opacity:.72;
}
.csts-evolve-quote{
  font-family:var(--csts-font-display);
  font-size: 22px;
  font-weight:600;
  line-height:1.45;
  color: #fff;
}
.csts-accent-word{ color:var(--csts-pink); }

@media (prefers-reduced-motion:reduce){
  .csts-reveal{opacity:1;transform:none;transition:none;}
  .csts-oneExp__orbit{animation:none;}
}

@media screen and (max-width:640px){
  .csts-evolve-quote-card{padding:54px 22px 26px;margin:0 4px;}
  .csts-evolve-quote-mark{top:18px;left:20px;width:28px;}
  .csts-evolve-quote{font-size:18px;line-height:1.55;}
}

@media screen and (max-width:380px){
  .csts-wrap{padding:0 12px;}
  .csts-hero__title{font-size:28px;}
  .csts-flowNode__iconWrap,
  .csts-flowNode__icon{width:46px;height:46px;}
  .csts-flowNode__label{font-size:10px;}
  .csts-flowNode__copy{font-size:9.5px;}
  .csts-heroStack{min-height:240px;}
  .csts-layerCol,
  .csts-layerCol--right,
  .csts-stripList{grid-template-columns:minmax(0,1fr);}
  .csts-step{grid-template-columns:56px minmax(0,1fr);}
  .csts-step__icon{width:56px;height:56px;}
}


/*=================================================================
             Infographic visual communication design
=================================================================*/



/*
========================================================
         Infographic & Visual Communication Design
========================================================*/

/* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --ivcd-bg-dark:#0a0a0c;
    --ivcd-bg-dark-2:#100c0e;
    --ivcd-bg-cream:#faf3ee;
    --ivcd-card-dark:#141010;
    --ivcd-card-dark-border:#241c1c;
    --ivcd-accent:#ff2f6e;
    --ivcd-accent-2:#ff8a4c;
    --ivcd-accent-soft:rgba(255,47,110,.14);
    --ivcd-text-light:#f6f1ee;
    --ivcd-text-light-muted:#a79e9c;
    --ivcd-text-dark:#1c1616;
    --ivcd-text-dark-muted:#6f6462;
    --ivcd-line:rgba(255,255,255,.09);
    --ivcd-line-dark:rgba(28,22,22,.1);
    --ivcd-radius:20px;
    --ivcd-font-display:'Manrope', sans-serif;
    --ivcd-font-body:'Inter', sans-serif;
    --ivcd-font-mono:'IBM Plex Mono', monospace;
    --ivcd-ease:cubic-bezier(.16,.8,.28,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--ivcd-font-body);
    background:var(--ivcd-bg-cream);
    color:var(--ivcd-text-dark);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  .ivcd-wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

  .ivcd-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--ivcd-font-mono);
    font-size:12.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ivcd-accent);
    margin-bottom:18px;
    margin-top: 40px;
  }
  .ivcd-eyebrow::before{
    content:""; width:16px; height:2px; background:var(--ivcd-accent); border-radius:2px;
  }
  .ivcd-eyebrow-num{color:inherit; opacity:.55; font-weight:600;}

  h1,h2,h3{font-family:var(--ivcd-font-display); font-weight:600; letter-spacing:-.02em;}

  /* reveal-on-scroll base */
  [data-ivcd-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ivcd-ease), transform .8s var(--ivcd-ease);}
  [data-ivcd-reveal].ivcd-in{opacity:1; transform:translateY(0);}
  [data-ivcd-reveal="stagger"] > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ivcd-ease), transform .7s var(--ivcd-ease);}
  [data-ivcd-reveal="stagger"].ivcd-in > *{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    [data-ivcd-reveal], [data-ivcd-reveal="stagger"] > *{opacity:1 !important; transform:none !important;}
  }
/*==============================================
        Infographic & Visual Communication Design Development
==============================================*/

 /* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --ivcd-bg-dark:#0a0a0c;
    --ivcd-bg-dark-2:#100c0e;
    --ivcd-bg-cream:#faf3ee;
    --ivcd-card-dark:#141010;
    --ivcd-card-dark-border:#241c1c;
    --ivcd-accent:#ff2f6e;
    --ivcd-accent-2:#ff8a4c;
    --ivcd-accent-soft:rgba(255,47,110,.14);
    --ivcd-text-light:#f6f1ee;
    --ivcd-text-light-muted:#a79e9c;
    --ivcd-text-dark:#1c1616;
    --ivcd-text-dark-muted:#6f6462;
    --ivcd-line:rgba(255,255,255,.09);
    --ivcd-line-dark:rgba(28,22,22,.1);
    --ivcd-radius:20px;
    --ivcd-font-display:'Manrope', sans-serif;
    --ivcd-font-body:'Inter', sans-serif;
    --ivcd-font-mono:'IBM Plex Mono', monospace;
    --ivcd-ease:cubic-bezier(.16,.8,.28,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--ivcd-font-body);
    background:var(--ivcd-bg-cream);
    color:var(--ivcd-text-dark);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  .ivcd-wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

  .ivcd-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--ivcd-font-mono);
    font-size:12.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ivcd-accent);
    margin-bottom:18px;
  }
  .ivcd-eyebrow::before{
    content:""; width:16px; height:2px; background:var(--ivcd-accent); border-radius:2px;
  }
  .ivcd-eyebrow-num{color:inherit; opacity:.55; font-weight:600;}

  h1,h2,h3{font-family:var(--ivcd-font-display); font-weight:600; letter-spacing:-.02em;}

  /* reveal-on-scroll base */
  [data-ivcd-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ivcd-ease), transform .8s var(--ivcd-ease);}
  [data-ivcd-reveal].ivcd-in{opacity:1; transform:translateY(0);}
  [data-ivcd-reveal="stagger"] > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ivcd-ease), transform .7s var(--ivcd-ease);}
  [data-ivcd-reveal="stagger"].ivcd-in > *{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    [data-ivcd-reveal], [data-ivcd-reveal="stagger"] > *{opacity:1 !important; transform:none !important;}
  }

  /* ============================================================
     HERO SECTION
     ============================================================ */
  .ivcd-hero{
    position:relative;
    background:radial-gradient(120% 100% at 82% 0%, #1c0f13 0%, var(--ivcd-bg-dark) 55%), var(--ivcd-bg-dark);
    color:var(--ivcd-text-light);
    padding:70px 0 60px;
    overflow:hidden;
  }
  .ivcd-hero::before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(60% 55% at 72% 25%, rgba(255,47,110,.16), transparent 65%),
               radial-gradient(45% 40% at 15% 85%, rgba(255,138,76,.10), transparent 70%);
    pointer-events:none;
  }
  .ivcd-hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr;
    gap:56px; align-items:center; position:relative; z-index:1;
  }

  .ivcd-hero-title{
    position:relative;
    font-family:var(--ivcd-font-display);
    font-weight:800;
    font-size: 45px;
    line-height:1.0;
    letter-spacing:-.035em;
    margin-bottom:24px;
  }
  .ivcd-hero-title .ivcd-line{
    display:block; opacity:0; transform:translateY(20px);
    animation:ivcd-title-in .8s var(--ivcd-ease) forwards;
  }
  .ivcd-hero-title .ivcd-line:nth-child(1){animation-delay:.05s;}
  .ivcd-hero-title .ivcd-line:nth-child(2){animation-delay:.22s;}
  @keyframes ivcd-title-in{
    to{opacity:1; transform:translateY(0);}
  }
  .ivcd-hero-title .ivcd-accent-word{
  background:linear-gradient(97deg, var(--ivcd-accent) 0%, var(--ivcd-accent-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
  display:inline-block;
  text-shadow:0 0 24px rgba(255,47,110,.35), 0 0 44px rgba(255,138,76,.18);
}
  @media (prefers-reduced-motion: reduce){
    .ivcd-hero-title .ivcd-line{opacity:1; transform:none; animation:none;}
  }

  .ivcd-hero-para{
    font-size:18.5px; line-height:1.7;
    color: whitesmoke;
    max-width:480px;
    margin-bottom:28px;
  }

  .ivcd-hero-platform-sep{width:3px; height:3px; border-radius:50%; background:var(--ivcd-text-light-muted); opacity:.5; flex:none;}

  .ivcd-hero-cta{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    margin-bottom:48px;
  }
  .ivcd-hero-btn{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--ivcd-font-body); font-size:14.5px; font-weight:600;
    padding:14px 28px; border-radius:999px;
    text-decoration:none; cursor:pointer; border:none;
    transition:transform .35s var(--ivcd-ease), box-shadow .35s var(--ivcd-ease), background .35s var(--ivcd-ease);
  }
  .ivcd-hero-btn svg{width:16px; height:16px; transition:transform .35s var(--ivcd-ease);}
  .ivcd-hero-btn--primary{
    background:linear-gradient(97deg, var(--ivcd-accent), var(--ivcd-accent-2));
    color:#0a0505;
    box-shadow:0 16px 34px -12px rgba(255,47,110,.55);
  }
  .ivcd-hero-btn--primary:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 42px -12px rgba(255,47,110,.7);
  }
  .ivcd-hero-btn--primary:hover svg{transform:translateX(3px);}
  .ivcd-hero-btn--ghost{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.16);
    color:var(--ivcd-text-light);
  }
  .ivcd-hero-btn--ghost:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.3);
  }

  .ivcd-hero-orbit-panel{
    position:relative;
  }
  .ivcd-hero-orbit-eyebrow{
    font-family:var(--ivcd-font-mono); font-size:14.5px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase;
    color: whitesmoke;
    margin-bottom:16px;
  }
  .ivcd-hero-orbit{
    display:flex; align-items:flex-start; gap:2px; position:relative;
  }
  .ivcd-hero-orbit-item{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    width:82px; flex:none;
  }
  .ivcd-hero-orbit-circle{
    --glow: var(--item-color, var(--ivcd-accent));
    width:60px; height:60px; border-radius:50%;
    background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.06), rgba(0,0,0,.4));
    border:1.5px solid var(--glow);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    color:var(--glow);
    position:relative; z-index:2;
    box-shadow:0 0 0 0 transparent;
    animation:ivcd-badge-pulse 3.2s ease-in-out infinite;
    transition:transform .4s var(--ivcd-ease);
  }
  .ivcd-hero-orbit-item:nth-child(1) .ivcd-hero-orbit-circle{animation-delay:0s;}
  .ivcd-hero-orbit-item:nth-child(3) .ivcd-hero-orbit-circle{animation-delay:.5s;}
  .ivcd-hero-orbit-item:nth-child(5) .ivcd-hero-orbit-circle{animation-delay:1s;}
  .ivcd-hero-orbit-item:nth-child(7) .ivcd-hero-orbit-circle{animation-delay:1.5s;}
  .ivcd-hero-orbit-item:nth-child(9) .ivcd-hero-orbit-circle{animation-delay:2s;}
  @keyframes ivcd-badge-pulse{
    0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--glow) 45%, transparent);}
    50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--glow) 0%, transparent);}
  }
  .ivcd-hero-orbit-item:hover .ivcd-hero-orbit-circle{
    transform:translateY(-5px) scale(1.08);
    background:var(--glow);
    color:#0a0a0a;
  }
  .ivcd-hero-orbit-circle svg{width:22px; height:22px;}
  .ivcd-hero-orbit-label{
    font-family:var(--ivcd-font-mono);
    font-size:14.5px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ivcd-text-light);
    margin-bottom:5px;
  }
  .ivcd-hero-orbit-desc{
    font-size:12px; line-height:1.4; color:var(--ivcd-text-light-muted);
  }
  .ivcd-hero-orbit-arrow{
    flex:none; align-self:flex-start;
    margin-top:22px;
    width:24px; height:14px;
    position:relative; overflow:hidden;
  }
  .ivcd-hero-orbit-arrow svg{
    width:24px; height:14px; color:rgba(255,255,255,.28);
    animation:ivcd-arrow-flow 1.8s ease-in-out infinite;
  }
  @keyframes ivcd-arrow-flow{
    0%,100%{transform:translateX(0); opacity:.5;}
    50%{transform:translateX(4px); opacity:1;}
  }

  .ivcd-hero-visual{
    position:relative;
    animation:ivcd-float 7s ease-in-out infinite;
  }
  @keyframes ivcd-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
  }
  .ivcd-hero-visual-glow{
    position:absolute; inset:-40px;
    background:radial-gradient(50% 50% at 50% 50%, rgba(255,47,110,.35), transparent 70%);
    filter:blur(30px);
    z-index:0;
    animation:ivcd-pulse 4.5s ease-in-out infinite;
  }
  @keyframes ivcd-pulse{
    0%,100%{opacity:.55; transform:scale(1);}
    50%{opacity:.9; transform:scale(1.05);}
  }
  /* REPLACE the src below with your own dashboard screenshot */
  .ivcd-hero-visual-frame img{
    width:150%; border-radius:12px; display:block;
  }
  .ivcd-hero-chip{
    position:absolute; z-index:3;
    display:flex; align-items:center; gap:8px;
    background:rgba(20,15,15,.85);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    padding:9px 16px;
    font-family:var(--ivcd-font-mono);
    font-size:16px; font-weight:600; letter-spacing:.03em;
    color:var(--ivcd-text-light);
    box-shadow:0 16px 34px -14px rgba(0,0,0,.6);
  }
  .ivcd-hero-chip svg{width:15px; height:15px; flex:none;}
  .ivcd-hero-chip--top{
    top:-18px; left:-22px;
    color:var(--ivcd-accent);
    animation:ivcd-chip-float-a 5.5s ease-in-out infinite;
  }
  .ivcd-hero-chip--top svg{color:var(--ivcd-accent);}
  .ivcd-hero-chip--bottom{
    bottom:-16px; right:-18px;
    animation:ivcd-chip-float-b 6.2s ease-in-out infinite;
  }
  .ivcd-hero-chip--bottom svg{color:#14e0b0;}
  .ivcd-hero-chip--bottom .ivcd-chip-dot{
    width:7px; height:7px; border-radius:50%; background:#14e0b0;
    box-shadow:0 0 0 3px rgba(20,224,176,.22);
  }
  @keyframes ivcd-chip-float-a{
    0%,100%{transform:translateY(0) rotate(-2deg);}
    50%{transform:translateY(-9px) rotate(1deg);}
  }
  @keyframes ivcd-chip-float-b{
    0%,100%{transform:translateY(0) rotate(2deg);}
    50%{transform:translateY(-8px) rotate(-1deg);}
  }

  /* ============================================================
   SECTION 02 — LAYERS (cream)
   ============================================================ */
.ivcd-layers{
  background:var(--ivcd-bg-cream);
  padding:34px 0;
  position:relative;
  overflow:hidden;
}
.ivcd-layers::before{
  content:"";
  position:absolute; top:-120px; right:-120px; width:480px; height:480px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,47,110,.10), transparent 70%);
  pointer-events:none;
  animation:ivcd-blob-breathe 8s ease-in-out infinite;
}
.ivcd-layers::after{
  content:"";
  position:absolute; bottom:-140px; left:-100px; width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,138,76,.10), transparent 70%);
  pointer-events:none;
  animation:ivcd-blob-breathe 9s ease-in-out infinite 1.5s;
}
@keyframes ivcd-blob-breathe{
  0%,100%{opacity:.7; transform:scale(1);}
  50%{opacity:1; transform:scale(1.15);}
}
.ivcd-layers-grid{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:64px; align-items:center;
}
.ivcd-layers-image-wrap{
  position:relative;
}
.ivcd-layers-image-glow{
  position:absolute; inset:-28px;
  background:radial-gradient(55% 55% at 50% 50%, rgba(255,47,110,.28), transparent 70%);
  filter:blur(26px);
  z-index:0;
  animation:ivcd-pulse 4.5s ease-in-out infinite;
}
.ivcd-layers-image{
  position:relative; z-index:1;
  border-radius:var(--ivcd-radius);
  background:#fff;
  box-shadow:0 40px 70px -35px rgba(28,22,22,.25);
  padding:8px;
  transform:rotate(-1.2deg);
  transition:transform .5s var(--ivcd-ease), box-shadow .5s var(--ivcd-ease);
}
.ivcd-layers-image::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(135deg, var(--ivcd-accent) 0%, var(--ivcd-accent-2) 50%, rgba(255,138,76,.2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.5;
  transition:opacity .4s var(--ivcd-ease);
}
.ivcd-layers-image:hover{transform:rotate(0deg) translateY(-6px); box-shadow:0 50px 90px -30px rgba(255,47,110,.3);}
.ivcd-layers-image:hover::before{opacity:1;}
/* REPLACE the src below with your own dashboard screenshot */
.ivcd-layers-image img{
  width:100%;
  height:520px;
  object-fit: fill;
  border-radius:14px;
  display:block;
}

.ivcd-layers-chip{
  position:absolute; z-index:2;
  display:flex; align-items:center; gap:7px;
  background:rgba(20,15,15,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:8px 14px;
  font-family:var(--ivcd-font-mono);
  font-size:10.5px; font-weight:600; letter-spacing:.03em;
  color:#fff;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.55);
}
.ivcd-layers-chip svg{width:13px; height:13px; flex:none; color:var(--ivcd-accent-2);}
.ivcd-layers-chip--a{top:-14px; right:-16px; animation:ivcd-chip-float-a 5.5s ease-in-out infinite;}
.ivcd-layers-chip--b{bottom:-14px; left:-14px; animation:ivcd-chip-float-b 6.2s ease-in-out infinite;}
.ivcd-layers-chip--b .ivcd-chip-dot{width:6px; height:6px; border-radius:50%; background:#14e0b0; box-shadow:0 0 0 3px rgba(20,224,176,.22);}

.ivcd-layers-title{
  font-family:var(--ivcd-font-display);
  font-weight:800;
  font-size: 35px;
  line-height:1.12;
  letter-spacing:-.02em;
  margin-bottom:44px;
  color:var(--ivcd-text-dark);
  max-width:520px;
}
.ivcd-layers-title .ivcd-accent-word{
  background:linear-gradient(97deg, var(--ivcd-accent), var(--ivcd-accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 24px rgba(255,47,110,.35), 0 0 44px rgba(255,138,76,.18);
}
.ivcd-layers-content{position:relative;}
.ivcd-layers-body{display:flex; gap:28px; align-items:flex-start;}
.ivcd-layers-list{position:relative; flex:1; min-width:0; display:flex; flex-direction:column; gap:12px;}
.ivcd-layers-item{
  --item-color: var(--ivcd-accent);
  display:flex; gap:14px; align-items:center;
  padding:10px 14px 10px 16px;
  background:#fff;
  border:2px solid color-mix(in srgb, var(--item-color) 22%, rgba(28,22,22,.08));
  border-radius:14px;
  box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
  position:relative;
  overflow:hidden;
  transform:scale(1);
  transition:transform .4s var(--ivcd-ease), box-shadow .4s var(--ivcd-ease), border-color .4s var(--ivcd-ease);
  animation:ivcd-card-spotlight 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.ivcd-layers-item::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--item-color), color-mix(in srgb, var(--item-color) 40%, transparent));
}
.ivcd-layers-item::after{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--item-color) 16%, transparent), transparent);
  transform:skewX(-18deg);
  pointer-events:none;
}
.ivcd-layers-item:hover::after{
  animation:ivcd-card-shimmer 1s ease forwards;
}
@keyframes ivcd-card-shimmer{
  to{left:120%;}
}
.ivcd-layers-item:hover{
  transform:translateX(6px) translateY(-3px) scale(1.02);
  box-shadow:0 24px 44px -20px color-mix(in srgb, var(--item-color) 40%, rgba(28,22,22,.28));
  border-color:color-mix(in srgb, var(--item-color) 65%, transparent);
  animation-play-state:paused;
}
@keyframes ivcd-card-spotlight{
  0%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
  4%{
    transform:scale(1.035);
    box-shadow:0 0 0 5px color-mix(in srgb, var(--item-color) 18%, transparent),
               0 30px 60px -14px color-mix(in srgb, var(--item-color) 55%, rgba(28,22,22,.3));
    border-color:var(--item-color);
  }
  16%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
  100%{
    transform:scale(1);
    box-shadow:0 14px 30px -22px rgba(28,22,22,.25);
    border-color:color-mix(in srgb, var(--item-color) 20%, rgba(28,22,22,.08));
  }
}
.ivcd-layers-item-icon{
  flex:none; width:48px; height:48px; border-radius:13px;
  background:linear-gradient(150deg, var(--item-color), color-mix(in srgb, var(--item-color) 65%, #000 15%));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), inset 0 -6px 10px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  position:relative; z-index:1;
  transition:transform .35s var(--ivcd-ease), box-shadow .35s var(--ivcd-ease);
  animation:ivcd-icon-spotlight 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.ivcd-layers-item-icon::before,
.ivcd-layers-item-icon::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--item-color);
  opacity:0;
  animation:ivcd-icon-ripple 10s ease-in-out infinite;
  animation-delay:var(--spot-delay, 0s);
}
.ivcd-layers-item-icon::after{ animation-delay:calc(var(--spot-delay, 0s) + .15s); }
.ivcd-layers-item-icon svg{width:21px; height:21px; stroke-width:2;}
.ivcd-layers-item:hover .ivcd-layers-item-icon{
  transform:scale(1.14) rotate(-5deg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 10px 22px -6px color-mix(in srgb, var(--item-color) 70%, transparent);
  animation-play-state:paused;
}
.ivcd-layers-item:hover .ivcd-layers-item-icon::before,
.ivcd-layers-item:hover .ivcd-layers-item-icon::after{ animation-play-state:paused; opacity:0; }
@keyframes ivcd-icon-spotlight{
  0%{ transform:scale(1) rotate(0deg); }
  4%{ transform:scale(1.22) rotate(-8deg); }
  16%{ transform:scale(1) rotate(0deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
@keyframes ivcd-icon-ripple{
  0%{ transform:scale(1); opacity:0; }
  4%{ transform:scale(1); opacity:.7; }
  20%{ transform:scale(1.7); opacity:0; }
  100%{ transform:scale(1); opacity:0; }
}
.ivcd-layers-item-title{
  font-family:var(--ivcd-font-mono);
  font-size:14.5px; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--item-color);
  margin-bottom:4px;
}
.ivcd-layers-item-desc{font-size:16px; line-height:1.55; color: #000; max-width:400px;}

.ivcd-layers-list[data-ivcd-reveal="stagger"] > .ivcd-layers-item{
  transform:translateX(-26px);
}
.ivcd-layers-list[data-ivcd-reveal="stagger"].ivcd-in > .ivcd-layers-item{
  transform:translateX(0);
}

.ivcd-layers-flow{
  flex:none;
  align-self:flex-start;
  background:none;
  border:none;
  box-shadow:none;
  padding:16px 16px 14px;
  width:190px;
  display:flex; flex-direction:column;
  transition:transform .4s var(--ivcd-ease);
  position:relative;
  overflow:visible;
}
.ivcd-layers-flow:hover{
  transform:translateY(-4px);
}
.ivcd-layers-flow:hover{
  transform:translateY(-4px);
  box-shadow:0 34px 64px -26px rgba(255,47,110,.3);
}


.ivcd-layers-flow-title{
  font-family:var(--ivcd-font-mono);
  font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ivcd-text-dark-muted);
  margin-bottom:18px;
  display:flex; align-items:center; gap:7px;
}
.ivcd-layers-flow-title svg{width:13px; height:13px; color:var(--ivcd-accent); flex:none;}
.ivcd-layers-flow-track{position:relative;}
.ivcd-layers-flow-track::before{
  content:"";
  position:absolute; left:11px; top:6px; bottom:6px; width:3px;
  background:repeating-linear-gradient(
    180deg,
    color-mix(in srgb, var(--ivcd-accent) 70%, transparent) 0px,
    color-mix(in srgb, var(--ivcd-accent) 70%, transparent) 5px,
    transparent 5px,
    transparent 11px
  );
  background-size:3px 22px;
  border-radius:3px;
  animation:ivcd-track-flow .9s linear infinite;
  box-shadow:0 0 14px 1px rgba(255,47,110,.35);
}
@keyframes ivcd-track-flow{
  0%{background-position:0 0;}
  100%{background-position:0 22px;}
}

.ivcd-layers-flow-beam,
.ivcd-layers-flow-beam--b,
.ivcd-layers-flow-beam--c{
  position:absolute; left:6px; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--ivcd-accent) 55%, transparent 100%);
  box-shadow:0 0 18px 6px var(--ivcd-accent), 0 0 0 4px rgba(255,47,110,.25);
  top:0; opacity:0;
}
.ivcd-layers-flow-beam{ animation:ivcd-beam-travel 2.2s linear infinite; }
.ivcd-layers-flow-beam--b{ animation:ivcd-beam-travel 2.2s linear infinite .7s; }
.ivcd-layers-flow-beam--c{ animation:ivcd-beam-travel 2.2s linear infinite 1.4s; }

@keyframes ivcd-beam-travel{
  0%{top:0%; opacity:0; transform:scale(.5);}
  10%{opacity:1; transform:scale(1);}
  90%{opacity:1; transform:scale(1);}
  100%{top:96%; opacity:0; transform:scale(.5);}
}
.ivcd-layers-flow-step{
  display:flex; align-items:center; gap:12px;
  font-family:var(--ivcd-font-mono); font-size:16.5px; font-weight:550;
  letter-spacing:.03em; color:var(--ivcd-text-dark);
  padding:30px 0; position:relative; z-index:1;
  transition:transform .3s var(--ivcd-ease), color .3s var(--ivcd-ease);
}
.ivcd-layers-flow-step:hover{transform:translateX(3px); color:var(--step-color);}
.ivcd-layers-flow-step .ivcd-dot{
  width:16px; height:16px; border-radius:50%;
  background:var(--step-color, var(--ivcd-accent));
  border:2px solid #fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--step-color, var(--ivcd-accent)) 30%, transparent);
  flex:none;
  animation:ivcd-flow-dot-pulse 3.6s ease-in-out infinite;
}
.ivcd-layers-flow-step:nth-child(2) .ivcd-dot{animation-delay:0s;}
.ivcd-layers-flow-step:nth-child(3) .ivcd-dot{animation-delay:.3s;}
.ivcd-layers-flow-step:nth-child(4) .ivcd-dot{animation-delay:.6s;}
.ivcd-layers-flow-step:nth-child(5) .ivcd-dot{animation-delay:.9s;}
.ivcd-layers-flow-step:nth-child(6) .ivcd-dot{animation-delay:1.2s;}
.ivcd-layers-flow-step:nth-child(7) .ivcd-dot{animation-delay:1.5s;}
@keyframes ivcd-flow-dot-pulse{
  0%,80%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--step-color, var(--ivcd-accent)) 30%, transparent); transform:scale(1);}
  15%{box-shadow:0 0 0 6px color-mix(in srgb, var(--step-color, var(--ivcd-accent)) 15%, transparent); transform:scale(1.3);}
}

/* Responsive (add inside your existing @media blocks) */
@media (max-width: 980px){
  .ivcd-layers-grid{grid-template-columns:1fr; gap:40px;}
  .ivcd-layers-image-wrap{order:-1;}
  .ivcd-layers-image{transform:none;}
  .ivcd-layers-chip{display:none;}
  .ivcd-layers-body{flex-direction:column;}
  .ivcd-layers-flow{width:100%;}
}
@media (max-width: 640px){
  .ivcd-layers-list::before{left:24px;}
}
  /* ============================================================
     SECTION 03 — ECOSYSTEM (dark)
     ============================================================ */
  .ivcd-ecosystem{
    background:var(--ivcd-bg-dark);
    color:var(--ivcd-text-light);
    padding: 34px 0;
    position:relative;
    overflow:hidden;
  }
  .ivcd-ecosystem::before{
    content:"";
    position:absolute; left:50%; top:44%; width:900px; height:900px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(255,47,110,.14), transparent 65%);
    filter:blur(10px);
    pointer-events:none;
  }
  .ivcd-ecosystem-head{max-width:560px; margin:0 auto 54px; text-align:center;}
  .ivcd-ecosystem-head .ivcd-eyebrow{justify-content:center;}
  .ivcd-ecosystem-title{font-size: 35px; line-height:1.15; color: #fff;}

.ivcd-ecosystem-diagram{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  grid-template-areas:
    "top   top   top"
    "l1    img   r1"
    "l2    img   r2"
    "b1    .     b2";
  gap:8px 60px;
  max-width:1060px; margin:0 auto;
}
 .ivcd-eco-node{
  --item-color: var(--ivcd-accent);
  background:var(--ivcd-card-dark);
  border:1.5px solid color-mix(in srgb, var(--item-color) 30%, var(--ivcd-card-dark-border));
  border-radius:14px;
  padding:18px 20px;
  display:flex; gap:14px; align-items:flex-start;
  position:relative; z-index:2;
  transition:transform .4s var(--ivcd-ease), border-color .4s var(--ivcd-ease), box-shadow .4s var(--ivcd-ease);
}
.ivcd-eco-node:hover{
  transform:translateY(-5px) scale(1.02);
  border-color:var(--item-color);
  box-shadow:0 24px 46px -18px color-mix(in srgb, var(--item-color) 55%, transparent);
}
.ivcd-eco-node-icon{
  flex:none; width:40px; height:40px; border-radius:11px;
  background:linear-gradient(150deg, var(--item-color), color-mix(in srgb, var(--item-color) 65%, #000 15%));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -5px 8px rgba(0,0,0,.2), 0 8px 18px -8px color-mix(in srgb, var(--item-color) 60%, transparent);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--ivcd-ease), box-shadow .35s var(--ivcd-ease);
}
.ivcd-eco-node:hover .ivcd-eco-node-icon{
  transform:scale(1.12) rotate(-5deg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 12px 24px -8px color-mix(in srgb, var(--item-color) 70%, transparent);
}
.ivcd-eco-node-icon svg{width:18px; height:18px; stroke-width:2;}
.ivcd-eco-node-title{
  font-family:var(--ivcd-font-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--item-color);
  margin-bottom:6px;
}
.ivcd-eco-node-desc{font-size:14.5px; line-height:1.55; color:var(--ivcd-text-light-muted);}

  .ivcd-eco-top{grid-area:top; justify-self:center; text-align:center; max-width:220px;}
  .ivcd-eco-top .ivcd-eco-node{flex-direction:column; align-items:center; text-align:center;}
  .ivcd-eco-l1{grid-area:l1; align-self:start;}
  .ivcd-eco-l2{grid-area:l2; align-self:start;}
  .ivcd-eco-r1{grid-area:r1; align-self:start;}
  .ivcd-eco-r2{grid-area:r2; align-self:start;}
  .ivcd-eco-b1{grid-area:b1;}
  .ivcd-eco-b2{grid-area:b2;}

  .ivcd-eco-center{
    grid-area:img; position:relative; z-index:1;
    border-radius:18px; overflow:hidden;
    border:1px solid rgba(255,47,110,.3);
    background:#0f0b0b;
    box-shadow:0 40px 90px -30px rgba(255,47,110,.25);
    align-self:center;
  }
  /* REPLACE the src below with your own product screenshot */
  .ivcd-eco-center img{width:160%; display:block;}

  .ivcd-eco-lines{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;}
  .ivcd-eco-lines path{
    fill:none; stroke:rgba(255,47,110,.4); stroke-width:.5;
    stroke-dasharray:100;
    stroke-dashoffset:100;
    transition:stroke-dashoffset 1.6s var(--ivcd-ease);
    vector-effect:non-scaling-stroke;
  }
  .ivcd-eco-pill{
    fill:none; stroke:rgba(255,47,110,.45); stroke-width:.5;
    stroke-dasharray:3 2.4;
    vector-effect:non-scaling-stroke;
  }
  .ivcd-eco-dot{fill:var(--ivcd-accent); opacity:0; transition:opacity .5s var(--ivcd-ease) .9s;}
  .ivcd-ecosystem.ivcd-in .ivcd-eco-lines path{stroke-dashoffset:0;}
  .ivcd-ecosystem.ivcd-in .ivcd-eco-dot{opacity:1;}

  /* ============================================================
     SECTION 04 — EVOLVE (cream)
     ============================================================ */
 .ivcd-evolve{
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(255,47,110,.16), transparent 60%),
    radial-gradient(500px 380px at 85% 15%, rgba(255,138,76,.15), transparent 60%),
    radial-gradient(550px 420px at 75% 85%, rgba(168,85,247,.13), transparent 60%),
    radial-gradient(480px 380px at 20% 85%, rgba(20,224,176,.12), transparent 60%),
    var(--ivcd-bg-cream);
  background-size:200% 200%;
  animation:ivcd-mesh-move 18s ease-in-out infinite;
  padding:70px 0 60px;
  position:relative;
  overflow:hidden;
}
@keyframes ivcd-mesh-move{
  0%,100%{background-position:0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%;}
  50%{background-position:20% 30%, 80% 25%, 75% 70%, 25% 75%, 0% 0%;}
}
.ivcd-evolve-particle{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--ivcd-accent) 70%, transparent 100%);
  opacity:0; pointer-events:none; z-index:0;
  animation:ivcd-particle-float linear infinite;
}
@keyframes ivcd-particle-float{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  15%{opacity:.65;}
  85%{opacity:.65;}
  100%{transform:translateY(-160px) translateX(24px); opacity:0;}
}
  .ivcd-evolve-head{max-width:600px; margin:0 auto 64px; text-align:center;}
  .ivcd-evolve-head .ivcd-eyebrow{justify-content:center;}
  .ivcd-evolve-title{font-size:clamp(28px,3.4vw,40px); line-height:1.15;}

  .ivcd-evolve-steps{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:28px; position:relative; margin-bottom:70px;
  }
  .ivcd-evolve-steps::before{
    content:"";
    position:absolute; top:38px; left:12%; right:12%; height:1px;
    background:repeating-linear-gradient(90deg, rgba(28,22,22,.18) 0 6px, transparent 6px 12px);
    z-index:0;
  }
  .ivcd-evolve-step{text-align:center; position:relative; z-index:1;}

  .ivcd-evolve-steps::before{
  content:"";
  position:absolute; top:40px; left:12%; right:12%; height:3px;
  background:linear-gradient(90deg,#3b82f6,#ff2f6e,#14e0b0,#ff8a4c,#3b82f6);
  background-size:200% 100%;
  border-radius:3px;
  opacity:.9;
  box-shadow:0 0 16px 3px rgba(255,47,110,.35);
  z-index:0;
  animation:ivcd-line-flow 4s linear infinite, ivcd-line-glow 2.4s ease-in-out infinite;
}
@keyframes ivcd-line-flow{
  0%{background-position:0% 0%;}
  100%{background-position:200% 0%;}
}
@keyframes ivcd-line-glow{
  0%,100%{box-shadow:0 0 16px 3px rgba(255,47,110,.3);}
  50%{box-shadow:0 0 28px 8px rgba(255,47,110,.6);}
}
.ivcd-evolve-step-icon{
  width:80px; height:80px; border-radius:50%; margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  color:#fff;
  /*transition:transform .4s ease;*/
  animation:ivcd-icon-bounce 3s ease-in-out infinite;
}
.ivcd-evolve-step:nth-child(1) .ivcd-evolve-step-icon{
  background:linear-gradient(150deg,#3b82f6,#1d4ed8);
  box-shadow:0 12px 26px -8px rgba(59,130,246,.65);
}
.ivcd-evolve-step:nth-child(2) .ivcd-evolve-step-icon{
  background:linear-gradient(150deg,#ff2f6e,#c81e56);
  box-shadow:0 12px 26px -8px rgba(255,47,110,.65);
}
.ivcd-evolve-step:nth-child(3) .ivcd-evolve-step-icon{
  background:linear-gradient(150deg,#14e0b0,#0d9488);
  box-shadow:0 12px 26px -8px rgba(20,224,176,.65);
}
.ivcd-evolve-step:nth-child(4) .ivcd-evolve-step-icon{
  background:linear-gradient(150deg,#ff8a4c,#ea580c);
  box-shadow:0 12px 26px -8px rgba(255,138,76,.65);
}

.ivcd-evolve-step-icon::before{
  content:"";
  position:absolute; inset:-9px; border-radius:50%;
  border:2px dashed rgba(0,0,0,.18);
  animation:ivcd-ring-spin 7s linear infinite;
}
.ivcd-evolve-step-icon::after{
  content:"";
  position:absolute; inset:-4px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,255,255,.5);
  animation:ivcd-ring-pulse 2.4s ease-out infinite;
}
.ivcd-evolve-step-icon svg{ position:relative; z-index:1; width:28px; height:28px;}

@keyframes ivcd-icon-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
@keyframes ivcd-ring-spin{
  to{transform:rotate(360deg);}
}
@keyframes ivcd-ring-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,47,110,.4);}
  70%{box-shadow:0 0 0 16px rgba(255,47,110,0);}
  100%{box-shadow:0 0 0 0 rgba(255,47,110,0);}
}
.ivcd-evolve-step:hover .ivcd-evolve-step-icon{
  transform:scale(1.15) translateY(-10px);
  animation-play-state:paused;
}
  .ivcd-evolve-step-label{
    font-family: 'poppins-local'; font-size:20px; font-weight:900;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ivcd-accent);
    margin-bottom:10px;
  }
  .ivcd-evolve-step-desc{font-size:16px; line-height:1.6; color: maroon; max-width:220px; margin:0 auto;}

.ivcd-evolve-quote-card{
  max-width:760px; margin:0 auto;
  background:var(--ivcd-card-dark);
  border:1.5px solid rgba(255,47,110,.18);
  border-radius:20px;
  padding:2px 22px 22px;
  position:relative;
  box-shadow:0 30px 60px -30px rgba(28,22,22,.3);
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
}
.ivcd-evolve-quote-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit; padding:1.5px;
  background:linear-gradient(120deg,#3b82f6,#ff2f6e,#14e0b0,#ff8a4c,#3b82f6);
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ivcd-border-flow 6s linear infinite;
  opacity:.6;
}
@keyframes ivcd-border-flow{
  0%{background-position:0% 50%;}
  100%{background-position:300% 50%;}
}
.ivcd-evolve-quote-card:hover{
  transform:translateY(-4px);
  box-shadow:0 40px 74px -26px rgba(255,47,110,.28);
}
.ivcd-evolve-quote-mark{
  width:34px; height:34px; color:var(--ivcd-accent); opacity:.35;
  margin-bottom:10px; display:block;
}
.ivcd-evolve-quote{
  position:relative; z-index:1;
  font-family:var(--ivcd-font-display);
  font-weight:600;
  font-size:clamp(19px,2.1vw,23px);
  line-height:1.55;
  color: #fff;
  margin:0;
  border-left:none;
  padding:0;
}
.ivcd-evolve-quote .ivcd-accent-word{
  background:linear-gradient(97deg,var(--ivcd-accent),var(--ivcd-accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 980px){
    .ivcd-hero-grid{grid-template-columns:1fr; gap:48px;}
    .ivcd-hero-visual{order:2;}
    .ivcd-hero-chip{font-size:10px; padding:7px 11px;}
    .ivcd-hero-chip--top{top:-12px; left:-10px;}
    .ivcd-hero-chip--bottom{bottom:-12px; right:-10px;}
    .ivcd-layers-grid{grid-template-columns:1fr; gap:40px;}
    .ivcd-layers-image-wrap{order:2;}
    .ivcd-layers-image{transform:none;}
    .ivcd-layers-chip{display:none;}
    .ivcd-layers-body{flex-direction:column;}
    .ivcd-layers-flow{width:100%;}
    .ivcd-ecosystem-diagram{
      grid-template-columns:1fr; grid-template-areas:
        "top" "img" "l1" "r1" "l2" "r2" "b1" "b2";
    }
    .ivcd-eco-center{order:-1; max-width:520px; margin:0 auto 8px;}
    .ivcd-eco-lines{display:none;}
    .ivcd-evolve-steps{grid-template-columns:1fr 1fr; row-gap:44px;}
    .ivcd-evolve-steps::before{display:none;}
  }

  @media (max-width: 640px){
    .ivcd-wrap{padding:0 20px;}
    .ivcd-hero{padding:64px 0 56px;}
    .ivcd-hero-orbit{flex-wrap:wrap; row-gap:24px; justify-content:flex-start;}
    .ivcd-hero-orbit-arrow{display:none;}
    .ivcd-hero-orbit-item{width:auto; margin-right:10px;}
    .ivcd-hero-cta{gap:12px;}
    .ivcd-hero-btn{padding:13px 20px; font-size:13.5px; flex:1 1 auto; justify-content:center;}
    .ivcd-hero-chip{display:none;}
    .ivcd-layers, .ivcd-ecosystem, .ivcd-evolve{padding:72px 0;}
    .ivcd-layers-list::before{left:24px;}
    .ivcd-evolve-steps{grid-template-columns:1fr; gap:36px;}
    .ivcd-evolve-quote{font-size:18px; padding-left:18px;}
  }



/*================================================================
         Branding Coporate Communiaction
================================================================*/


/*===============================================
          Branding & Corporate Communication
===============================================*/

   :root{
    --bcc-black:#0a0a0c;
    --bcc-black-2:#111114;
    --bcc-cream:#f6efe6;
    --bcc-cream-2:#efe6d9;
    --bcc-pink:#ff2f5b;
    --bcc-orange:#ff7a3d;
    --bcc-gradient: linear-gradient(90deg,var(--bcc-pink),var(--bcc-orange));
    --bcc-text-dark:#e9e6df;
    --bcc-text-dim:#9a968f;
    --bcc-text-light:#1a1714;
    --bcc-text-light-dim:#6b665e;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{background:var(--bcc-black);color:var(--bcc-text-dark);line-height:1.5;}
  img,svg{display:block;}
  .bcc-wrap{max-width:1200px;margin:0 auto;padding:0 48px;}
  .bcc-eyebrow22{
    display:flex;align-items:center;gap:10px;
    font-size:12px;font-weight:700;letter-spacing:.16em;
    color:#ff3860;text-transform:uppercase;margin-bottom:18px;
    margin-top: 30px;
  }
  .bcc-eyebrow22 .bcc-num{
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;border:1px solid var(--bcc-pink);border-radius:50%;
    font-size:11px;color:var(--bcc-pink);
  }
  h1,h2{
    font-weight:800;letter-spacing:-0.025em;line-height:1.06;
  }
  h1{
    font-size:50px;
    color:#ffffff;
  }

.bcc-highlight{
    background:linear-gradient(100deg,#ff3860,#ff8a65);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    filter: none !important;
}

  h2{font-size:38px;color:var(--bcc-text-light);}
  .bcc-lead-dark p{color:#a7a29a;font-size:16px;max-width:420px;margin-top:18px;line-height:1.6;}
  .bcc-lead-light p{color:var(--bcc-text-light-dim);font-size:15.5px;max-width:420px;margin-top:18px;}

  @keyframes bcc-shine{
    0%{background-position:0% 50%;}
    100%{background-position:300% 50%;}
  }
  @keyframes bcc-fade-up{
    from{opacity:0;transform:translateY(22px);}
    to{opacity:1;transform:translateY(0);}
  }
  @keyframes bcc-float-orb{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-16px,22px) scale(1.08);}
  }
  @keyframes bcc-pulse-glow{
    0%,100%{box-shadow:0 0 0 0 rgba(255,56,96,.35);}
    50%{box-shadow:0 0 0 10px rgba(255,56,96,0);}
  }
  .bcc-fade-in{opacity:0;animation:bcc-fade-up .8s ease forwards;}
  .bcc-fade-in.bcc-d1{animation-delay:.05s;}
  .bcc-fade-in.bcc-d2{animation-delay:.2s;}
  .bcc-fade-in.bcc-d3{animation-delay:.35s;}
  .bcc-fade-in.bcc-d4{animation-delay:.5s;}
  .bcc-fade-in.bcc-d5{animation-delay:.65s;}

  /* ============ SECTION 1 : HERO ============ */
  .bcc-hero{
    background:
      radial-gradient(ellipse at 75% 20%, rgba(255,60,80,.10), transparent 55%),
      var(--bcc-black);
    padding:80px 0 70px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid #1c1a19;
  }
  .bcc-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;}
  .bcc-orb1{width:280px;height:280px;background:radial-gradient(circle,rgba(255,56,96,.35),transparent 70%);top:-60px;right:20%;animation:bcc-float-orb 9s ease-in-out infinite;}
  .bcc-orb2{width:220px;height:220px;background:radial-gradient(circle,rgba(255,122,61,.28),transparent 70%);bottom:-40px;left:5%;animation:bcc-float-orb 11s ease-in-out infinite reverse;}
  .bcc-orb3{width:180px;height:180px;background:radial-gradient(circle,rgba(255,56,96,.22),transparent 70%);top:40%;right:2%;animation:bcc-float-orb 7s ease-in-out infinite;}
  .bcc-hero .bcc-wrap{position:relative;z-index:1;}
  .bcc-hero .bcc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
  .bcc-hero h1{
    font-size:50px;
    font-weight:800;
    line-height:1.06;
    letter-spacing:-0.025em;
    color:#ffffff;

    /* Remove unwanted glow / blur */
    filter:none;
    text-shadow:none;
    -webkit-text-stroke:0;

    margin-bottom:16px;
}

.bcc-hero h1 .bcc-highlight{
    background:linear-gradient(
        100deg,
        #ff3860 0%,
        #ff5876 45%,
        #ff8a65 100%
    );

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

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

    filter:none;
    text-shadow:none;

    /* No shine animation */
    animation:none;
}
  .bcc-features-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;
  }
  @keyframes bcc-float-icon{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
  }
  @keyframes bcc-spin-ring{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  .bcc-feature{
    border-top:1px solid #2a2724;padding-top:20px;
    transition:transform .3s ease;
  }
  .bcc-feature:hover{transform:translateY(-6px);}
  .bcc-feature .bcc-icon-badge{
    width:50px;height:50px;border-radius:50%;
    position:relative;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;
    background:#141014;
    animation:bcc-float-icon 3.5s ease-in-out infinite;
  }
  .bcc-feature .bcc-icon-badge::before{
    content:"";position:absolute;inset:-2px;border-radius:50%;
    background:conic-gradient(from 0deg,#ff3860,#ff8a65,#ff3860);
    animation:bcc-spin-ring 4s linear infinite;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  }
  .bcc-feature .bcc-icon-badge::after{
    content:"";position:absolute;inset:2px;border-radius:50%;
    background:#141014;
    box-shadow:0 0 16px 2px rgba(255,56,96,.45) inset;
  }
  .bcc-feature:nth-child(2) .bcc-icon-badge{animation-delay:.6s;}
  .bcc-feature:nth-child(3) .bcc-icon-badge{animation-delay:1.2s;}
  .bcc-feature:nth-child(4) .bcc-icon-badge{animation-delay:1.8s;}
  .bcc-feature svg{width:20px;height:20px;stroke:#ff5876;margin:0;position:relative;z-index:1;}
  .bcc-feature .bcc-ftitle{font-size:12.5px;font-weight:700;letter-spacing:.09em;color:#fff;margin-bottom:8px;}
  .bcc-feature .bcc-fdesc{font-size:12.5px;color:#8b877f;line-height:1.5;}

  /* bcc-hero bcc-diagram */
  .bcc-diagram{position:relative;padding-top:6px;}
  .bcc-hero-diagram-img{margin-top: 70px;width:100%;height:auto;border-radius:16px; height: 430px;}
  .bcc-top-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .bcc-device-card{
    background:linear-gradient(160deg,#17151a,#0e0d10);
    border:1px solid #2b2730;border-radius:14px;padding:16px 12px 22px;
    text-align:center;position:relative;
  }
  .bcc-device-card .bcc-icon-circle{
    width:34px;height:34px;border-radius:50%;
    background:rgba(255,60,80,.12);
    display:flex;align-items:center;justify-content:center;margin:0 auto 10px;
  }
  .bcc-device-card .bcc-icon-circle svg{width:17px;height:17px;stroke:var(--bcc-pink);margin:0;}
  .bcc-device-card .bcc-label{font-size:10px;font-weight:700;letter-spacing:.08em;color:#e7e3dc;margin-bottom:10px;}
  .bcc-device-screen{
    height:56px;border-radius:6px;
    background:linear-gradient(160deg,#1c1a20,#131116);
    border:1px solid #2c2833;
  }
  .bcc-connector-mid{
    display:flex;justify-content:center;padding:16px 0;position:relative;
  }
  .bcc-connector-mid::before{
    content:"";position:absolute;top:0;left:50%;width:1px;height:100%;
    background:linear-gradient(var(--bcc-pink),transparent);opacity:.5;
  }
  .bcc-core-box{
    background:linear-gradient(160deg,#19161b,#0c0b0d);
    border:1px solid var(--bcc-pink);
    box-shadow:0 0 30px rgba(255,50,80,.18), inset 0 0 20px rgba(255,90,60,.05);
    border-radius:12px;text-align:center;padding:20px;
    position:relative;
  }
  .bcc-core-box .bcc-title{font-size:20px;font-weight:800;letter-spacing:.04em;color:#fff;}
  .bcc-core-box .bcc-chip{
    margin:14px auto 0;width:34px;height:22px;border-radius:5px;
    background:rgba(255,90,60,.12);border:1px solid rgba(255,90,60,.4);
    display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--bcc-orange);
  }
  .bcc-bottom-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
  .bcc-sys-card{
    background:linear-gradient(160deg,#17151a,#0e0d10);
    border:1px solid #2b2730;border-radius:12px;padding:16px 14px;
  }
  .bcc-sys-card .bcc-icon-circle{
    width:30px;height:30px;border-radius:8px;
    background:rgba(255,60,80,.12);
    display:flex;align-items:center;justify-content:center;margin-bottom:10px;
  }
  .bcc-sys-card .bcc-icon-circle svg{width:15px;height:15px;stroke:var(--bcc-pink);margin:0;}
  .bcc-sys-card .bcc-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#e7e3dc;margin-bottom:4px;}
  .bcc-sys-card .bcc-sub{font-size:10.5px;color:var(--bcc-text-dim);}

   /* ============ SECTION 2: CONNECTED BRAND SYSTEM ============ */
  .bcc-connect-sec{
    background:
      radial-gradient(circle at 15% 20%, rgba(255,56,96,.10), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(255,122,61,.12), transparent 45%),
      radial-gradient(circle at 60% 10%, rgba(255,138,101,.08), transparent 40%),
      linear-gradient(155deg,#f8f1e8 0%,#f3e8db 55%,#f6ecdf 100%);
    background-size:200% 200%,200% 200%,200% 200%,100% 100%;
    animation:bcc-mesh-shift 18s ease-in-out infinite;
    color:var(--bcc-text-light);
    padding:70px 0;
    position:relative;
    overflow:hidden;
  }
  .bcc-connect-sec::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:radial-gradient(circle,rgba(120,90,60,.10) 1px,transparent 1.4px);
    background-size:26px 26px;
    -webkit-mask:radial-gradient(circle at 20% 30%, #000 0%, transparent 60%);
    mask:radial-gradient(circle at 20% 30%, #000 0%, transparent 60%);
  }
  @keyframes bcc-mesh-shift{
    0%,100%{background-position:0% 0%,100% 100%,50% 0%,0 0;}
    50%{background-position:20% 15%,80% 85%,60% 10%,0 0;}
  }
  .bcc-connect-sec .bcc-cs-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;}
  .bcc-connect-sec .bcc-cs-orb1{width:320px;height:320px;background:radial-gradient(circle,rgba(255,56,96,.16),transparent 70%);top:-80px;left:30%;animation:bcc-float-orb 12s ease-in-out infinite;}
  .bcc-connect-sec .bcc-cs-orb2{width:260px;height:260px;background:radial-gradient(circle,rgba(255,122,61,.14),transparent 70%);bottom:-60px;right:8%;animation:bcc-float-orb 10s ease-in-out infinite reverse;}
  .bcc-connect-sec .bcc-wrap{position:relative;z-index:1; padding: 6px;}
  .bcc-connect-sec .bcc-eyebrow{
    color:var(--bcc-pink);position:relative;
  }
  .bcc-connect-sec .bcc-eyebrow::after{
    content:"";display:inline-block;width:28px;height:1.5px;
    background:linear-gradient(90deg,var(--bcc-pink),transparent);margin-left:4px;vertical-align:middle;
  }
  .bcc-connect-sec h2{color:var(--bcc-text-light);text-shadow:0 2px 18px rgba(255,90,60,.08);}
  .bcc-connect-sec .bcc-heading-highlight{
    background:linear-gradient(100deg,#ff3860,#ff8a65);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 14px rgba(255,80,100,.35));
  }
  .bcc-connect-left{position:relative;padding-left:22px;}
  .bcc-connect-left::before{
    content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;
    background:linear-gradient(180deg,var(--bcc-pink),var(--bcc-orange));
  }
  .bcc-connect-left .bcc-lead-light p{
    position:relative;font-size:16px;line-height:1.75;color: black;
  }
 .bcc-connect-outer{
  display:grid;grid-template-columns:0.65fr 1.9fr;gap:10px;align-items:start;margin-top:10px;
}
  .bcc-connect-left .bcc-eyebrow,
  .bcc-connect-left h2,
  .bcc-connect-left .bcc-lead-light{margin-top:0;}
  .bcc-connect-grid{
    display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:40px;align-items:start;position:relative;
  }
  .bcc-connect-lines{
    position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  }
  @property --bcc-border-angle{
    syntax:'<angle>';
    inherits:false;
    initial-value:0deg;
  }
  @keyframes bcc-float-card{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
  }
  @keyframes bcc-card-glow-pink{
    0%,100%{box-shadow:0 10px 24px rgba(255,56,96,.10);}
    50%{box-shadow:0 20px 42px rgba(255,56,96,.26);}
  }
  @keyframes bcc-card-glow-orange{
    0%,100%{box-shadow:0 10px 24px rgba(255,122,61,.10);}
    50%{box-shadow:0 20px 42px rgba(255,122,61,.26);}
  }
  @keyframes bcc-border-rotate{
    to{--bcc-border-angle:360deg;}
  }
  @keyframes bcc-ring-spin-cw{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  @keyframes bcc-ring-spin-ccw{
    from{transform:rotate(0deg);}
    to{transform:rotate(-360deg);}
  }
  @keyframes bcc-icon-pulse-ring{
    0%,100%{opacity:.5;transform:scale(1);}
    50%{opacity:1;transform:scale(1.08);}
  }
  .bcc-side-col{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1;}
.bcc-conn-card{
  position:relative;
  background:linear-gradient(165deg,#fff7f2 0%,#ffe9ee 100%);
  border:none;border-radius:18px;padding:26px 24px 28px;min-height:132px;
  box-shadow:0 2px 8px rgba(120,90,60,.05), 0 1px 2px rgba(120,90,60,.04);
  animation:bcc-float-card 4.5s ease-in-out infinite;
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
  overflow:hidden;
}
.bcc-side-col:first-child .bcc-conn-card{
  background:linear-gradient(165deg,#fff0f2 0%,#ffd9e0 100%);
}
.bcc-side-col:last-child .bcc-conn-card{
  background:linear-gradient(165deg,#fff3e6 0%,#ffdcbf 100%);
}
.bcc-conn-card::after{
  content:"";position:absolute;top:-40%;right:-25%;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85),transparent 70%);
  pointer-events:none;opacity:.7;
}
.bcc-conn-card .bcc-ctitle{
  font-size:13.5px;font-weight:800;letter-spacing:.03em;color:#241f1a;
  transition:color .3s ease;
}

.bcc-conn-card::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  padding:2.2px;
  background:conic-gradient(from var(--bcc-border-angle),#ff3860,#ff6f8c,#ff8a65,#ffc199,#ff8a65,#ff3860);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:bcc-border-rotate 4s linear infinite;
  pointer-events:none;
  opacity:.9;
  filter:drop-shadow(0 0 6px rgba(255,80,100,.35));
  transition:opacity .3s ease, filter .3s ease;
}
.bcc-conn-card:hover::before{
  opacity:1;
  filter:drop-shadow(0 0 12px rgba(255,80,100,.55));
}
.bcc-side-col:first-child .bcc-conn-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(255,56,96,.10), transparent 55%),
    linear-gradient(165deg,#ffffff 0%,#fff5f6 55%,#ffedf0 100%);
}
.bcc-side-col:last-child .bcc-conn-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(255,122,61,.12), transparent 55%),
    linear-gradient(165deg,#ffffff 0%,#fff7ee 55%,#ffefe0 100%);
}
.bcc-conn-card::after{
  content:"";position:absolute;top:-40%;right:-25%;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%);
  pointer-events:none;opacity:.6;
}
.bcc-conn-card:hover{
  transform:translateY(-14px) scale(1.035);
  box-shadow:0 26px 48px rgba(255,56,96,.24);
}
.bcc-side-col:last-child .bcc-conn-card:hover{
  box-shadow:0 26px 48px rgba(255,122,61,.24);
}
.bcc-conn-card:hover::before{opacity:1;}
.bcc-conn-card > *{position:relative;z-index:1;}
.bcc-side-col:first-child .bcc-conn-card:nth-child(1){animation-delay:0s,0s;}
.bcc-side-col:first-child .bcc-conn-card:nth-child(2){animation-delay:.5s,.4s;}
.bcc-side-col:first-child .bcc-conn-card:nth-child(3){animation-delay:1s,.8s;}
.bcc-side-col:last-child .bcc-conn-card:nth-child(1){animation-delay:1.5s,1.2s;}
.bcc-side-col:last-child .bcc-conn-card:nth-child(2){animation-delay:2s,1.6s;}
.bcc-side-col:last-child .bcc-conn-card:nth-child(3){animation-delay:2.5s,2s;}
.bcc-conn-card:hover{
  transform:translateY(-14px) scale(1.035);
  box-shadow:0 26px 48px rgba(255,56,96,.24);
}
.bcc-conn-card .bcc-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.bcc-conn-card:hover .bcc-ctitle{color:var(--bcc-pink);}
.bcc-side-col:last-child .bcc-conn-card:hover .bcc-ctitle{color:var(--bcc-orange);}
.bcc-conn-card .bcc-cdesc{font-size:12.5px;color:#847c70;line-height:1.65;}
  .bcc-conn-card .bcc-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}

.bcc-conn-card:hover .bcc-ic.bcc-pink{box-shadow:0 10px 22px rgba(255,56,96,.38);}
.bcc-conn-card:hover .bcc-ic.bcc-orange{box-shadow:0 10px 22px rgba(255,122,61,.38);}
.bcc-conn-card .bcc-ic svg{width:20px;height:20px;margin:0;position:relative;z-index:1;}
.bcc-conn-card .bcc-ic.bcc-pink svg{stroke:var(--bcc-pink);}
.bcc-conn-card .bcc-ic.bcc-orange svg{stroke:var(--bcc-orange);}
  .bcc-conn-card .bcc-ctitle{font-size:13px;font-weight:700;letter-spacing:.04em;}
  .bcc-conn-card .bcc-cdesc{font-size:13.5px;color: black;line-height:1.6;}

.bcc-conn-card .bcc-ic{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s ease, box-shadow .35s ease;
  position:relative;
}
.bcc-conn-card .bcc-ic::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid currentColor;opacity:.3;
  animation:bcc-icon-pulse-ring 2.6s ease-in-out infinite;
}
.bcc-conn-card .bcc-ic::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.06);
  pointer-events:none;
}
.bcc-conn-card .bcc-ic.bcc-pink{
  background:linear-gradient(150deg,#ffeef0 0%,#ffd2da 55%,#ffb8c6 100%);
  color:var(--bcc-pink);
  box-shadow:0 6px 14px rgba(255,56,96,.22);
}
.bcc-conn-card .bcc-ic.bcc-orange{
  background:linear-gradient(150deg,#fff1e6 0%,#ffdcc4 55%,#ffc39a 100%);
  color:var(--bcc-orange);
  box-shadow:0 6px 14px rgba(255,122,61,.22);
}
.bcc-conn-card:hover .bcc-ic{
  transform:rotate(-10deg) scale(1.16);
}
  .bcc-hub-wrap{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:340px;align-self:center;z-index:1;}
  .bcc-hub-ring{
    position:absolute;border-radius:50%;border:1px dashed #e3b7a9;
  }
  .bcc-ring1{width:340px;height:340px;animation:bcc-ring-spin-cw 30s linear infinite;}
  .bcc-ring2{width:260px;height:260px;border-style:dotted;animation:bcc-ring-spin-ccw 22s linear infinite;}
  .bcc-hub-core{
  position:relative;z-index:2;border-radius:50%;
  width:250px;height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(160,40,40,.12);border:1px solid #f0d9cb;
  animation:bcc-card-glow-pink 3s ease-in-out infinite;
}
.bcc-hub-core .bcc-stack-img{
  width:970px;height:auto;
  max-width:100%;
  object-fit:contain;
  margin-bottom:8px;
}
  .bcc-hub-core .bcc-htitle{font-size:16px;font-weight:800;letter-spacing:.04em;}
  .bcc-hub-core .bcc-hsub{font-size:10.5px;color:var(--bcc-text-light-dim);margin-top:2px;}

  /* ============ SECTION 3: BRAND COMMUNICATION ENGINE ============ */
/* ==========================================================
   SECTION 3: THE BRAND COMMUNICATION ENGINE
   All classes prefixed with "eng-" so nothing clashes with
   other sections/stylesheets on the page.
   ========================================================== */

* { box-sizing: border-box; }

body{
  margin:0;
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  background:#0a0a0a;
}

.bcc-eng-sec{
  background:#0a0a0a;
  color:#fff;
  padding:80px 0;
  overflow:hidden;
}

.bcc-eng-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
}

.bcc-eng-grid{
  display:grid;
  grid-template-columns:0.8fr 1.4fr;
  gap:40px;
  align-items:center;
}

/* -------------------- LEFT -------------------- */
.bcc-eng-left{
  border-left:2px solid #ff2d55;
  padding-left:24px;
}

.bcc-eng-eyebrow{
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
  color:#fff;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.bcc-eng-eyebrow::after{
  content:'';
  width:30px;
  height:1px;
  background:#ff2d55;
}

.bcc-eng-left h2{
  font-size:40px;
  font-weight:800;
  line-height:1.25;
  margin:0 0 20px;
  color: #fff;
}

.bcc-eng-accent{
  background:linear-gradient(90deg,#ff2d55,#ff7a3d);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.bcc-eng-lead{
  font-size:18px;
  line-height:1.7;
  color: #e5e5e5;
  max-width:360px;
  margin:0;
}

/* -------------------- RIGHT: cards + orbit -------------------- */
.bcc-eng-right{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}

.bcc-eng-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.bcc-eng-card{
  border:1px solid #4a1622;
  border-radius:12px;
  padding:16px 18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:rgba(255,45,85,.04);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.bcc-eng-card:hover{
  border-color:#ff2d55;
  background:rgba(255,45,85,.08);
  transform:translateY(-2px);
}

.bcc-eng-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #ff2d55;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bcc-eng-icon svg{
  width:18px;
  height:18px;
  stroke:#ff2d55;
  margin:0;
}

.bcc-eng-ctext h4{
  font-size:13px;
  font-weight:800;
  letter-spacing:.05em;
  margin:0 0 6px;
  color:#fff;
}
.bcc-eng-ctext p{
  font-size:12px;
  line-height:1.6;
  color:#9a9a9a;
  margin:0;
}

/* -------------------- ORBIT (image + connecting lines) -------------------- */
.bcc-eng-orbit{
  width:260px;
  height:260px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}

.bcc-eng-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  overflow:visible;
}
.bcc-eng-lines path{
  fill:none;
  stroke:#ff2d55;
  stroke-width:1.4;
  stroke-dasharray:4 4;
  opacity:.59;
  filter:drop-shadow(0 0 3px rgba(255,45,85,.6));
  animation:bcc-eng-dash 22s linear infinite;
}
@keyframes bcc-eng-dash{
  to{ stroke-dashoffset:-200; }
}

.bcc-eng-orbit-glow{
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,45,85,.35) 0%,rgba(255,45,85,0) 70%);
  z-index:0;
  animation:bcc-eng-pulse 4s ease-in-out infinite;
}
@keyframes bcc-eng-pulse{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}

.bcc-eng-orbit-img{
  width:260px;
  height:260px;
  object-fit:contain;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 0 25px rgba(255,45,85,.55));
}

/* fallback shown via JS if the image fails to load */
.bcc-eng-orbit-fallback{
  position:relative;
  z-index:2;
  width:110px;
  height:110px;
  border-radius:20px;
  background:linear-gradient(145deg,#1a1a2e,#0d0d1a);
  border:1px solid #ff2d55;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:0 0 30px rgba(255,45,85,.45);
}
.bcc-eng-orbit-fallback svg{
  width:34px;
  height:34px;
  stroke:#00d4ff;
  margin:0;
}
.bcc-eng-orbit-fallback span{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:#00d4ff;
  text-shadow:0 0 10px rgba(0,212,255,.8);
}

/* -------------------- STATS / TECH STACK ROW -------------------- */
.bcc-eng-stats{
  margin-top:56px;
  border:1px solid #ff2d55;
  border-radius:100px;
  padding:18px 36px;
  display:flex;
  flex-wrap:bcc-wrap;
  align-items:center;
  justify-content:center;
  gap:36px;
  background:rgba(255,255,255,.02);
}

.bcc-eng-stat{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:#e5e5e5;
  white-space:nowrap;
}
.bcc-eng-stat svg{
  width:16px;
  height:16px;
  stroke:#ff2d55;
  margin:0;
  flex:none;
}

/* reveal-on-scroll state, toggled by JS via IntersectionObserver */
.bcc-eng-card,
.bcc-eng-orbit,
.bcc-eng-stat{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.bcc-eng-card.bcc-is-visible,
.bcc-eng-orbit.bcc-is-visible,
.bcc-eng-stat.bcc-is-visible{
  opacity:1;
  transform:translateY(0);
}

.bcc-conn-card,
.bcc-proc-step,
.bcc-js-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease, transform .65s ease;
}
.bcc-conn-card.bcc-is-visible,
.bcc-proc-step.bcc-is-visible,
.bcc-js-reveal.bcc-is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .bcc-eng-wrap{padding:0 24px;}
  .bcc-eng-grid{grid-template-columns:1fr;gap:40px;}
  .bcc-eng-left{
    border-left:none;
    padding-left:0;
    border-top:2px solid #ff2d55;
    padding-top:20px;
  }
  .bcc-eng-right{grid-template-columns:1fr;justify-items:center;}
  .bcc-eng-orbit{order:-1;margin-bottom:20px;}
  .bcc-eng-col{width:100%;max-width:420px;}
  .bcc-eng-stats{
    border-radius:20px;
    gap:20px;
    padding:20px;
    justify-content:flex-start;
  }
}

@media(max-width:600px){
  .bcc-eng-left h2{font-size:27px;}
  .bcc-eng-stats{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
  }
  .bcc-eng-stats::-webkit-scrollbar{display:none;}
}
/* ============ SECTION 4: PROCESS (self-contained, no shared class names) ============ */
.bcc-proc-sec{
  background:linear-gradient(160deg,#f6efe6 0%,#f9d9e4 50%,#fce0c8 100%);
  color:#2b2b2b;
  padding:70px 0 60px;
  overflow:hidden;
}

.bcc-proc-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 40px;
  display:block; /* explicitly NOT grid, avoids any inherited grid rule */
}

.bcc-proc-eyebrow{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:#ff4f79;
  margin-bottom:14px;
}
.bcc-proc-num{margin-right:6px;}

/* Heading row: h2 left, lead paragraph right */
.bcc-proc-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  width:100%;
}
.bcc-proc-head h2{
  font-size:32px;
  line-height:1.25;
  margin:0;
  color:#1a1a1a;
  font-weight:800;
}
.bcc-proc-lead{
  font-size:17px;
  line-height:1.6;
  color: black;
  margin:0;
  max-width:420px;
}

/* Steps row — always full width, never confined by bcc-proc-head grid */
.bcc-proc-steps{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:start;
  width:100%;
  margin-top:60px;
}

.bcc-proc-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 10px;
}

.bcc-proc-circle{
  width:84px;
  height:84px;
  border-radius:50%;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.18);
  background:linear-gradient(135deg,#ff2f5b,#f6923a);
}
.bcc-proc-circle svg{
  width:48px;
  height:48px;
  margin:0;
  display:block;
}

.bcc-proc-step:nth-child(odd) .bcc-proc-circle{background:#ffe0e5;}
.bcc-proc-step:nth-child(odd) .bcc-proc-circle svg{stroke:#ff4f79;}
.bcc-proc-step:nth-child(even) .bcc-proc-circle{background:#ffe6d6;}
.bcc-proc-step:nth-child(even) .bcc-proc-circle svg{stroke:#ff8a3d;}

.bcc-proc-snum{
  position:absolute;
  top:-4px;
  right:-2px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#ff4f79;
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.bcc-proc-step:nth-child(even) .bcc-proc-snum{background:#ff8a3d;}

.bcc-proc-label{
  font-size:15px;
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:10px;
  color:#1a1a1a;
}

.bcc-proc-desc{
  font-size:13.5px;
  color: maroon;
  line-height:1.6;
  max-width:180px;
  margin:0 auto;
  margin-bottom: 30px;
}

.bcc-proc-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  height:84px;
  color:#ff4f79;
  font-size:35px;
  font-weight:600;
}

.bcc-svc-evolve-quote-card{
  max-width:780px;
  margin:34px auto 0;
  padding:26px 28px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,47,91,.25);
  border-radius:20px;
  background:#111114;
  box-shadow:0 24px 55px -30px rgba(70,10,28,.55);
}
.bcc-svc-evolve-quote-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 12% 10%,rgba(255,47,91,.18),transparent 44%);
  pointer-events:none;
}
.bcc-svc-evolve-quote-mark{
  width:34px;
  height:34px;
  margin-bottom:10px;
  color:#ff2f5b;
  opacity:.55;
}
.bcc-svc-evolve-quote{
  position:relative;
  z-index:1;
  margin:0;
  color:#f8f4ef;
  font-size:clamp(18px,2vw,23px);
  font-weight:650;
  line-height:1.55;
}
.bcc-svc-accent-word{
  background:linear-gradient(95deg,#ff2f5b,#ff7a3d);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}


/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .bcc-proc-wrap{padding:0 24px;}
  .bcc-proc-head{grid-template-columns:1fr;gap:20px;}
  .bcc-proc-head h2{font-size:27px;}

  .bcc-proc-steps{
    display:flex;
    flex-direction:column;
    gap:32px;
    margin-top:40px;
  }
  .bcc-proc-arrow{display:none;}
  .bcc-proc-desc{max-width:280px;}

  .bcc-proc-closing{flex-direction:column;text-align:center;}
  .bcc-proc-closing p{text-align:center;}
}

/* =========================================================
   COMPLETE MOBILE RESPONSIVE — FINAL
   Desktop styles above remain unchanged.
   ========================================================= */
@media (max-width:768px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  img,svg{max-width:100%;}
  .bcc-wrap,.bcc-eng-wrap,.bcc-proc-wrap{
    width:100%;
    max-width:100%;
    padding-left:18px;
    padding-right:18px;
  }

  /* Section 1 — Hero */
  .bcc-hero{padding:54px 0 48px;}
  .bcc-hero .bcc-wrap{
    display:flex;
    flex-direction:column;
    gap:34px;
    align-items:stretch;
  }
  .bcc-hero h1{
    font-size:clamp(34px,10vw,44px);
    line-height:1.1;
    overflow-wrap:anywhere;
  }
  .bcc-lead-dark p{
    max-width:100%;
    font-size:15px;
    line-height:1.7;
  }
  .bcc-features-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 16px;
    margin-top:34px;
  }
  .bcc-feature{min-width:0;}
  .bcc-diagram{width:100%;padding-top:0;}
  .bcc-hero-diagram-img{
    width:100%;
    height:auto;
    max-height:none;
    margin-top:0;
    border-radius:12px;
    object-fit:contain;
  }
  .bcc-orb1{width:190px;height:190px;right:-50px;}
  .bcc-orb2{width:160px;height:160px;left:-55px;}
  .bcc-orb3{display:none;}

  /* Section 2 — What We Connect */
  .bcc-connect-sec{padding:52px 0;}
  .bcc-connect-sec .bcc-wrap{padding-left:18px;padding-right:18px;}
  .bcc-connect-outer{
    display:flex;
    flex-direction:column;
    gap:34px;
    margin-top:0;
  }
  .bcc-connect-left{width:100%;padding-left:16px;}
  .bcc-connect-sec h2{
    font-size:clamp(29px,8.5vw,38px);
    line-height:1.15;
  }
  .bcc-connect-left .bcc-lead-light p{
    max-width:100%;
    font-size:15px;
    line-height:1.7;
  }
  .bcc-connect-grid{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:20px;
  }
  .bcc-connect-lines{display:none;}
  .bcc-side-col{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }
  .bcc-conn-card{
    width:100%;
    min-height:0;
    padding:20px 18px;
    animation:none;
  }
  .bcc-conn-card:hover{transform:none;}
  .bcc-hub-wrap{
    order:-1;
    width:100%;
    min-height:270px;
    height:270px;
    overflow:hidden;
  }
  .bcc-ring1{width:260px;height:260px;}
  .bcc-ring2{width:205px;height:205px;}
  .bcc-hub-core{width:190px;height:190px;}
  .bcc-hub-core .bcc-stack-img{
    width:100%;
    max-width:190px;
    height:auto;
    margin:0;
  }

  /* Section 3 — Brand Communication Engine */
  .bcc-eng-sec{padding:54px 0;}
  .bcc-eng-grid{gap:34px;}
  .bcc-eng-left h2{
    font-size:clamp(29px,8.5vw,38px);
    line-height:1.2;
  }
  .bcc-eng-lead{max-width:100%;font-size:15px;}
  .bcc-eng-right{width:100%;gap:22px;}
  .bcc-eng-col{width:100%;max-width:none;gap:14px;}
  .bcc-eng-card{width:100%;padding:15px;}
  .bcc-eng-orbit{
    width:min(260px,78vw);
    height:min(260px,78vw);
    margin-bottom:8px;
  }
  .bcc-eng-orbit-img{width:100%;height:100%;}
  .bcc-eng-orbit-glow{width:70%;height:70%;}
  .bcc-eng-stats{
    width:100%;
    margin-top:36px;
    padding:18px;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    overflow:visible;
    border-radius:18px;
  }
  .bcc-eng-stat{white-space:normal;}

  /* Section 4 — Process */
  .bcc-proc-sec{padding:52px 0 42px;}
  .bcc-proc-head{gap:16px;}
  .bcc-proc-head h2{
    font-size:clamp(28px,8vw,34px);
    line-height:1.2;
  }
  .bcc-proc-lead{max-width:100%;font-size:15px;}
  .bcc-proc-steps{gap:26px;margin-top:34px;}
  .bcc-proc-step{width:100%;padding:0;}
  .bcc-proc-circle{width:78px;height:78px;margin-bottom:14px;}
  .bcc-proc-circle svg{width:42px;height:42px;}
  .bcc-proc-desc{
    max-width:320px;
    margin-bottom:0;
    font-size:13.5px;
  }
}

@media (max-width:480px){
  .bcc-wrap,.bcc-eng-wrap,.bcc-proc-wrap,
  .bcc-connect-sec .bcc-wrap{
    padding-left:14px;
    padding-right:14px;
  }
  .bcc-hero{padding:44px 0 40px;}
  .bcc-hero h1{font-size:32px;}
  .bcc-eyebrow22{font-size:10.5px;letter-spacing:.12em;}
  .bcc-features-row{gap:22px 12px;}
  .bcc-feature .bcc-icon-badge{width:44px;height:44px;}
  .bcc-feature .bcc-ftitle,.bcc-feature .bcc-fdesc{font-size:12px;}
  .bcc-connect-sec,.bcc-eng-sec{padding:44px 0;}
  .bcc-conn-card .bcc-top{gap:10px;}
  .bcc-conn-card .bcc-ic{width:42px;height:42px;}
  .bcc-conn-card .bcc-cdesc{font-size:13px;}
  .bcc-hub-wrap{height:240px;min-height:240px;}
  .bcc-ring1{width:230px;height:230px;}
  .bcc-ring2{width:180px;height:180px;}
  .bcc-hub-core{width:165px;height:165px;}
  .bcc-hub-core .bcc-stack-img{max-width:165px;}
  .bcc-eng-card{gap:10px;padding:14px 12px;}
  .bcc-eng-ctext p{font-size:11.5px;}
  .bcc-proc-sec{padding:44px 0 38px;}
  .bcc-svc-evolve-quote-card{margin-top:28px;padding:22px 18px;}
  .bcc-svc-evolve-quote{font-size:17px;}
}

@media (prefers-reduced-motion:reduce){
  .bcc-hero *,
  .bcc-connect-sec *,
  .bcc-eng-sec *,
  .bcc-proc-sec *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  .bcc-eng-card,
  .bcc-eng-orbit,
  .bcc-eng-stat,
  .bcc-conn-card,
  .bcc-proc-step,
  .bcc-js-reveal{
    transition:none !important;
  }
}






/*============================================================
          Office Workflow Optimization solutions
============================================================*/



/* =========================================================
   OFFICE & WORKFLOW OPTIMIZATION SOLUTIONS
   UNIQUE PREFIX : OWOS
========================================================= */

:root {
    --owos-dark: #0c0812;
    --owos-dark-2: #120d1a;

    --owos-pink: #ff2d78;
    --owos-orange: #ff7a3d;

    --owos-gradient:
        linear-gradient(90deg, #ff2d78, #ff7a3d);

    --owos-light: #f6f5f8;
    --owos-white: #ffffff;

    --owos-text: #161320;
    --owos-muted: #6b6878;
    --owos-light-muted: #b9b3c7;

    --owos-border: #ececf1;
}


/* =========================================================
   RESET
========================================================= */

.owos-hero,
.owos-provide,
.owos-process,
.owos-results,
.owos-breadcrumb {
    box-sizing: border-box;
}

.owos-hero *,
.owos-provide *,
.owos-process *,
.owos-results *,
.owos-breadcrumb * {
    box-sizing: border-box;
}

.owos-hero h1,
.owos-hero p,
.owos-provide h2,
.owos-provide h3,
.owos-provide p,
.owos-process h2,
.owos-process h4,
.owos-process p,
.owos-results h2,
.owos-results h4,
.owos-results p {
    margin: 0;
}

.owos-hero img,
.owos-provide img,
.owos-process img,
.owos-results img {
    max-width: 100%;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.owos-container {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.owos-breadcrumb {
    background: var(--owos-dark);
    color: var(--owos-light-muted);
    font-size: 13px;
    padding: 18px 0 10px;
}

.owos-breadcrumb span {
    opacity: 0.8;
}


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

.owos-hero {
    position: relative;
    overflow: hidden;
    padding: 38px 0 48px;
    color: #fff;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(112, 30, 82, 0.38),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255, 45, 120, 0.08),
            transparent 35%
        ),
        var(--owos-dark);
}


.owos-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 55px;
    align-items: center;
}


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

.owos-hero-content {
    min-width: 0;
}

.owos-eyebrow,
.owos-section-eyebrow {
    margin-top: 70px;
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--owos-pink);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
}

.owos-eyebrow {
    margin-bottom: 18px;
}

.owos-eyebrow::after,
.owos-section-eyebrow::after {
    content: "";
    display: block;

    width: 42px;
    height: 1px;

    background: var(--owos-pink);
    opacity: 0.65;
}


.owos-hero h1 {
    max-width: 620px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.12;
    font-weight: 800;

    color: #fff;

    margin-bottom: 20px;
}


.owos-hero h1 span,
.owos-section-intro h2 span,
.owos-process-intro h2 span,
.owos-results-content h2 span {
    background: var(--owos-gradient);

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

    color: transparent;
}


.owos-hero-content > p {
    max-width: 540px;

    color: var(--owos-light-muted);

    font-size: 17px;
    line-height: 1.75;

    margin-bottom: 28px;
}

.owos-hero-content h1 span{
    background: linear-gradient(90deg, var(--owos-pink), var(--owos-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.owos-hero-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}

.owos-hero-content h1{
    text-shadow: none;
}
.owos-hero-checks > div {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #fff;

    font-size: 13px;
    font-weight: 600;
}


.owos-check-icon {
    width: 19px;
    height: 19px;

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

    border-radius: 50%;

    background: var(--owos-gradient);

    font-size: 11px;
}


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

.owos-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;

    padding: 25px 10px;
}



.owos-dashboard-imgwrap{
    position: relative;
    z-index: 2;
}

.owos-dashboard-img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.owos-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 12px;
}


.owos-stat-card {
    min-width: 0;

    padding: 10px;

    background: #1e1730;

    border-radius: 8px;
}


.owos-stat-label {
    color: var(--owos-light-muted);

    font-size: 9px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.owos-stat-value {
    color: #fff;

    font-size: 15px;
    font-weight: 800;

    margin-top: 3px;
}


.owos-stat-growth {
    color: #3ddc84;

    font-size: 9px;

    margin-top: 2px;
}


.owos-chart-box {
    width: 100%;
    height: 95px;

    overflow: hidden;

    border-radius: 8px;

    background: #1e1730;
}


.owos-chart-box svg {
    width: 100%;
    height: 100%;
}


/* =========================================================
   FLOATING HERO ICONS
========================================================= */

.owos-floating-icon {
    position: absolute;
    z-index: 5;

    width: 52px;
    height: 52px;

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

    border-radius: 14px;

    color: #fff;

    font-size: 20px;

    background: var(--owos-gradient);

    box-shadow:
        0 10px 30px rgba(255, 45, 120, 0.35);

    animation: owosFloat 4s ease-in-out infinite;
}


.owos-float-code {
    top: 5%;
    left: -2%;
}


.owos-float-cloud {
    top: 0;
    right: -2%;

    background:
        linear-gradient(
            135deg,
            #3b2fb0,
            #5b4de6
        );

    animation-delay: -1s;
}


.owos-float-database {
    right: -2%;
    bottom: 4%;

    background:
        linear-gradient(
            135deg,
            #c22a5c,
            #ff2d78
        );

    animation-delay: -2s;
}


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

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


/* =========================================================
   TECHNOLOGY FLOW
========================================================= */

.owos-flow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: 30px;
}


.owos-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 9px;
}


.owos-flow-circle {
    width: 56px;
    height: 56px;

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

    border: 1.5px solid var(--flow-color, #35283f);
    border-radius: 50%;

    background: #160f20;

    color: var(--flow-color, #fff);

    font-size: 20px;

    box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
               0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
    transition:.25s;
}
.owos-flow-node:hover .owos-flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.owos-flow-node:nth-child(1) .owos-flow-circle{ --flow-color:#3ba7ff; }
.owos-flow-node:nth-child(3) .owos-flow-circle{ --flow-color:#ff2d78; }
.owos-flow-node:nth-child(5) .owos-flow-circle{ --flow-color:#2dd4c7; }
.owos-flow-node:nth-child(7) .owos-flow-circle{ --flow-color:#e8ebff; }

.owos-flow-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:60px;flex-wrap:wrap;}
.owos-flow-node{display:flex;flex-direction:column;align-items:center;gap:10px;}
.owos-flow-circle{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;background:#160f20;
  border:1.5px solid var(--flow-color, #35283f);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--flow-color,#35283f) 15%, transparent),
             0 0 18px color-mix(in srgb, var(--flow-color,#35283f) 55%, transparent);
  color:var(--flow-color, var(--text-light));
  transition:.25s;
}
.owos-flow-node:hover .owos-flow-circle{
  transform:translateY(-4px) scale(1.06);
}
.owos-flow-node:nth-child(1) .owos-flow-circle{ --flow-color:#3ba7ff; }
.owos-flow-node:nth-child(3) .owos-flow-circle{ --flow-color:#ff2d78; }
.owos-flow-node:nth-child(5) .owos-flow-circle{ --flow-color:#2dd4c7; }
.owos-flow-node:nth-child(7) .owos-flow-circle{ --flow-color:#e8ebff; }
.owos-flow-node span{font-size:11px;letter-spacing:1px;color:var(--text-light-muted);font-weight:600;}
.owos-flow-node:hover span{color:var(--flow-color);}
.owos-flow-arrow{color:var(--orange);font-size:18px;}

@keyframes arrowMove{
  0%{transform:translateX(0); opacity:.35;}
  50%{transform:translateX(8px); opacity:1; text-shadow:0 0 10px var(--owos-orange);}
  100%{transform:translateX(0); opacity:.35;}
}

.owos-flow-arrow {
    color: var(--owos-orange);
    font-size: 18px;
    display: inline-block;
    animation: arrowMove 1.4s ease-in-out infinite;
}
.owos-flow .owos-flow-arrow:nth-of-type(1){animation-delay:0s;}
.owos-flow .owos-flow-arrow:nth-of-type(2){animation-delay:.3s;}
.owos-flow .owos-flow-arrow:nth-of-type(3){animation-delay:.6s;}

.owos-flow-node span {
    color: var(--owos-light-muted);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;

    text-align: center;
}


.owos-flow-arrow {
    color: var(--owos-orange);

    font-size: 18px;
}


/* =========================================================
   PROVIDE SECTION
========================================================= */

.owos-provide {
    padding: 80px 0;

    background: #fdf2f6;
}


.owos-provide-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;
}


.owos-section-eyebrow {
    margin-bottom: 14px;
}


.owos-section-intro h2,
.owos-process-intro h2,
.owos-results-content h2 {
    font-size: clamp(27px, 3vw, 34px);
    color: #000;
    line-height: 1.25;
    font-weight: 800;
}


.owos-section-intro > p,
.owos-process-intro > p,
.owos-results-content > p {
    color: maroon;

    font-size: 14px;
    line-height: 1.75;

    margin-top: 16px;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.owos-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.owos-service-card {
    padding: 24px 20px;

    background: #fff;

    border: 1px solid lightpink;
    border-radius: 13px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
  --card-bg: #ffffff;
  --card-color: var(--owos-pink);
  background: var(--card-bg);
  transition: background .3s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.owos-service-card:nth-child(1){ --card-bg:#fff1f5; --card-color:#ff2d78; }
.owos-service-card:nth-child(2){ --card-bg:#eef7ff; --card-color:#3ba7ff; }
.owos-service-card:nth-child(3){ --card-bg:#fff9ec; --card-color:#ffb020; }
.owos-service-card:nth-child(4){ --card-bg:#ecfdfb; --card-color:#2dd4c7; }
.owos-service-card:nth-child(5){ --card-bg:#f5f1ff; --card-color:#8b5cf6; }
.owos-service-card:nth-child(6){ --card-bg:#fff2ec; --card-color:#ff7a3d; }
.owos-service-card:nth-child(7){ --card-bg:#eefdf3; --card-color:#22c55e; }
.owos-service-card:nth-child(8){ --card-bg:#fdeef7; --card-color:#ec4899; }

.owos-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 60%, var(--owos-orange)));

    color: #fff;

    font-size: 18px;

    box-shadow: 0 6px 16px color-mix(in srgb, var(--card-color) 45%, transparent);

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

.owos-service-card:hover .owos-service-icon {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 65%, transparent);
}
.owos-service-card:hover .owos-service-icon{
  background: var(--card-color);
  color: #fff;
}


.owos-service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 45, 120, 0.2);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.07);
}

/* gradient border on hover */
.owos-service-card{
  position: relative;
  overflow: hidden;
}
.owos-service-card::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--owos-pink), var(--owos-orange));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.owos-service-card:hover::before{
  opacity: 1;
}

/* icon pop on hover */
.owos-service-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.owos-service-card:hover .owos-service-icon{
  transform: scale(1.12) rotate(-6deg);
  background: linear-gradient(135deg, var(--owos-pink), var(--owos-orange));
  color: #fff;
}

/* scroll reveal setup — cards start hidden */
.owos-service-card{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.owos-service-card.owos-reveal{
  opacity: 1;
  transform: translateY(0);
}

.owos-service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 15px;

    border-radius: 10px;

    background: #fdeef2;

    color: var(--owos-pink);

    font-size: 18px;
}


.owos-service-card h3 {
    color: var(--owos-text);

    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;

    margin-bottom: 8px;
}


.owos-service-card p {
    color: #000;

    font-size: 12.5px;
    line-height: 1.65;
}


/* =========================================================
   PROCESS
========================================================= */

.owos-process {
    padding: 50px 0;

    background: var(--owos-dark);

    color: #fff;
}


.owos-process-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);

    gap: 50px;

    align-items: center;
}


.owos-process-intro .owos-section-eyebrow {
    color: var(--owos-pink);
}


.owos-process-intro h2 {
    color: #fff;
}


.owos-process-intro > p {
    color: var(--owos-light-muted);
}
/* =========================================================
   PROCESS STEPS
========================================================= */
.owos-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@keyframes stepPopIn{
  0%{
    opacity:0;
    transform: scale(.4) translateY(30px);
  }
  60%{
    opacity:1;
    transform: scale(1.08) translateY(-6px);
  }
  80%{
    transform: scale(.96) translateY(2px);
  }
  100%{
    opacity:1;
    transform: scale(1) translateY(0);
  }
}
@keyframes lineDraw{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

.owos-step {
    position: relative;
    z-index: 2;
    text-align: center;

    opacity:0;
    transform:translateY(22px) scale(.96);
    animation:none;
    transition:opacity .65s ease, transform .65s cubic-bezier(.34,1.56,.64,1);
}

.owos-step.owos-reveal{
    opacity:1;
    transform:translateY(0) scale(1);
}

.owos-step-line {
    position: absolute;
    top: 38px;
    left: 8%;
    right: 8%;
    height: 2px;
    z-index: 1;
    border-radius: 2px;

    background: linear-gradient(
        90deg,
        var(--owos-pink),
        var(--owos-orange)
    );
    opacity:0;
    transform:scaleX(0);
    transform-origin:left center;
    transition:opacity .7s ease, transform 1s ease;
    overflow: visible;
}

.owos-step-line.owos-reveal{
    opacity:.35;
    transform:scaleX(1);
}

@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}
@keyframes runLight{
  0%{
    left: 0%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}

.owos-step-line::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);

  width: 22px;
  height: 6px;
  border-radius: 50%;

  background: #fff;
  box-shadow:
    0 0 10px 3px var(--owos-pink),
    0 0 20px 6px var(--owos-orange);

  animation: runLight 6.2s linear infinite;
}

.owos-step:nth-child(2){ --step-color:#ff2d78; animation-delay: .5s; }
.owos-step:nth-child(3){ --step-color:#3ba7ff; animation-delay: .8s; }
.owos-step:nth-child(4){ --step-color:#2dd4c7; animation-delay: 1.1s; }
.owos-step:nth-child(5){ --step-color:#ffb020; animation-delay: 1.4s; }

.owos-step-circle {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 1.5px solid var(--step-color, var(--owos-pink));
    border-radius: 50%;
    background: #160f20;
    font-size: 28px;
    color: var(--step-color, #fff);

    box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color, var(--owos-pink)) 12%, transparent),
                0 0 20px color-mix(in srgb, var(--step-color, var(--owos-pink)) 45%, transparent);

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

.owos-step:hover .owos-step-circle{
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--step-color, var(--owos-pink)) 20%, transparent),
              0 0 30px color-mix(in srgb, var(--step-color, var(--owos-pink)) 75%, transparent);
}

.owos-step-number {
    color: var(--owos-orange);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
}
.owos-step:hover .owos-step-number{
  color: var(--step-color);
}

.owos-step h4 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 8px;
}
.owos-step p {
    color: var(--owos-light-muted);
    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   WHAT YOU GET
========================================================= */

.owos-results {
    padding: 80px 0;
    background: linear-gradient(
        160deg,
        #ffffff 0%,
        #ffe9f0 35%,
        #ffe3d9 70%,
        #fff5ec 100%
    );
}

@keyframes blobFloat1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-20px) scale(1.1); }
}
@keyframes blobFloat2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-25px,25px) scale(1.15); }
}

.owos-results {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #fffaf8;
}

.owos-results::before,
.owos-results::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.owos-results::before{
    width: 420px;
    height: 420px;
    top: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(255,45,120,0.35), transparent 70%);
    animation: blobFloat1 9s ease-in-out infinite;
}

.owos-results::after{
    width: 460px;
    height: 460px;
    bottom: -15%;
    right: -10%;
    background: radial-gradient(circle, rgba(255,122,61,0.35), transparent 70%);
    animation: blobFloat2 11s ease-in-out infinite;
}

.owos-results-grid{
    position: relative;
    z-index: 1;
}

.owos-results-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.1fr);

    gap: 60px;

    align-items: center;

    position: relative;   /* NEW */
    z-index: 1; 
}


/* =========================================================
   LAPTOP
========================================================= */

.owos-laptop-area {
    position: relative;

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

    padding: 30px 20px;
}


.owos-laptop {
    width: min(100%, 430px);

    position: relative;

    padding: 16px;

    background: #171022;

    border-radius: 14px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.2);
}


.owos-laptop-screen {
    min-height: 220px;

    padding: 14px;

    border-radius: 8px;

    background: #1e1730;
}


.owos-laptop-line {
    height: 8px;

    margin-bottom: 8px;

    border-radius: 4px;

    background: #33284a;
}


.owos-line-40 {
    width: 40%;
}

.owos-line-60 {
    width: 60%;
}

.owos-line-80 {
    width: 80%;
}


.owos-laptop-base {
    height: 14px;

    margin-top: 10px;

    border-radius: 0 0 10px 10px;

    background: #0f0a17;
}

@keyframes laptopFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

.owos-laptop-img {
    width: min(100%, 460px);
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.25));

    animation: laptopFloat 5s ease-in-out infinite;
}

@keyframes badgeFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes badgePopIn{
  0%{ opacity:0; transform: scale(.3) translateY(20px); }
  60%{ opacity:1; transform: scale(1.15) translateY(-4px); }
  100%{ opacity:1; transform: scale(1) translateY(0); }
}

.owos-mini-badge{
  opacity: 0;
  animation:
    badgePopIn .6s cubic-bezier(.34,1.56,.64,1) forwards,
    badgeFloat 3.5s ease-in-out infinite;
}

.owos-mini-code{
  animation-delay: .2s, 1s;   /* pop-in delay, then float delay */
}
.owos-mini-security{
  animation-delay: .4s, 1.3s;
}
.owos-mini-growth{
  animation-delay: .6s, 1.6s;
}
.owos-mini-success{
  animation-delay: .8s, 1.9s;
}

@keyframes benefitSlideIn{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}

.owos-benefit{
  opacity: 0;
  animation: benefitSlideIn .6s ease forwards;
}

.owos-benefit:nth-child(1){ animation-delay: .3s; }
.owos-benefit:nth-child(2){ animation-delay: .5s; }
.owos-benefit:nth-child(3){ animation-delay: .7s; }
.owos-benefit:nth-child(4){ animation-delay: .9s; }

.owos-benefit-icon{
  transition: transform .3s ease, background .3s ease, color .3s ease;
}

.owos-benefit:hover .owos-benefit-icon{
  transform: scale(1.15) rotate(-6deg);
  background: linear-gradient(135deg, var(--owos-pink), var(--owos-orange));
  color: #fff;
}

/* =========================================================
   LAPTOP FLOATING BADGES
========================================================= */

.owos-mini-badge {
    position: absolute;
    z-index: 4;

    width: 54px;
    height: 54px;

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

    border-radius: 10px;

    color: #fff;

    font-size: 16px;

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


.owos-mini-code {
    top: -6%;
    left: 8%;

    background: var(--owos-gradient);
}


.owos-mini-security {
    top: -20%;
    right: 10%;

    background: #2b2340;
}


.owos-mini-growth {
    right: 8%;
    bottom: -14%;

    background: #2b2340;
}


.owos-mini-success {
    left: 40%;
    bottom: -13%;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: var(--owos-gradient);
}


/* =========================================================
   BENEFITS
========================================================= */

.owos-benefit-grid {
    display: grid;

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

    gap: 26px 24px;

    margin-top: 28px;
}


.owos-benefit {
    display: flex;

    gap: 14px;

    min-width: 0;
}


.owos-benefit-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 9px;

    background: #fdeef2;

    color: var(--owos-pink);

    font-size: 17px;
}


.owos-benefit h4 {
    color: var(--owos-text);

    font-size: 20px;

    margin-bottom: 5px;
}


.owos-benefit p {
    color: var(--owos-muted);

    font-size: 14px;
    line-height: 1.6;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .owos-container {
        width: min(1180px, calc(100% - 48px));
    }


    .owos-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .owos-provide-grid,
    .owos-process-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .owos-section-intro,
    .owos-process-intro {
        max-width: 650px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .owos-hero {
        padding-top: 40px;
    }


    .owos-hero-grid,
    .owos-results-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }
    
    .owos-results-content {
        order: 1;
    }

    .owos-laptop-area {
        order: 2;
    }

    .owos-hero-content {
        text-align: center;
    }


    .owos-eyebrow {
        justify-content: center;
    }


    .owos-hero h1 {
        margin-left: auto;
        margin-right: auto;
    }


    .owos-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }


    .owos-hero-checks {
        justify-content: center;
    }


    .owos-hero-visual {
        max-width: 680px;

        margin: 0 auto;
    }


    .owos-results-content {
        max-width: 700px;
        margin: 0 auto;
    }


    .owos-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 40px;
    }


    .owos-step-line {
        display: none;
    }

}


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


@media screen and (max-width:600px){
  .owos-hero-content{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:0 4px;
    text-align:left !important;
  }

  .owos-eyebrow{
    width:100%;
    max-width:100%;
    margin-top:54px;
    margin-bottom:18px;
    justify-content:flex-start !important;
    gap:8px;
    font-size:10px;
    line-height:1.4;
    letter-spacing:.7px;
    white-space:normal;
  }

  .owos-eyebrow::after{
    width:34px;
    flex:0 0 34px;
  }

  .owos-hero h1{
    width:100%;
    max-width:360px;
    margin:0 0 18px;
    padding:0;
    font-size:clamp(28px,7.6vw,32px);
    line-height:1.12;
    letter-spacing:-.4px;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .owos-hero h1 span{
    display:inline;
  }

  .owos-hero-content > p{
    width:100%;
    max-width:350px;
    margin:0 0 26px;
    padding:0 2px;
    font-size:14px;
    line-height:1.5;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .owos-hero-checks{
    width:100%;
    max-width:100%;
    margin:0;
    align-items:flex-start;
    gap:11px;
    text-align:left;
  }

  .owos-hero-checks > div{
    width:auto;
    justify-content:flex-start;
    font-size:13px;
    line-height:1.35;
  }
}

@media screen and (max-width:380px){
  .owos-eyebrow{margin-top:48px;font-size:9px;}
  .owos-eyebrow::after{width:26px;flex-basis:26px;}

  .owos-hero h1{
    max-width:320px;
    font-size:26px;
  }

  .owos-hero-content > p{
    max-width:320px;
    font-size:13.5px;
  }
}


@media screen and (max-width:380px){
  .owos-eyebrow{margin-top:48px;font-size:9px;}
  .owos-eyebrow::after{width:26px;flex-basis:26px;}

  .owos-hero h1{
    max-width:320px;
    font-size:26px;
  }

  .owos-hero-content > p{
    max-width:320px;
    font-size:13.5px;
  }
}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .owos-container {
        width: calc(100% - 24px);
    }


    .owos-hero h1 {
        font-size: 28px;
    }


    .owos-dashboard-sidebar {
        width: 65px;
        flex-basis: 65px;
    }


    .owos-dashboard-main {
        padding: 8px;
    }


    .owos-stat-value {
        font-size: 10px;
    }


    .owos-flow {
        gap: 4px;
    }


    .owos-flow-circle {
        width: 38px;
        height: 38px;
    }


    .owos-flow-arrow {
        font-size: 11px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .owos-floating-icon,
    .owos-service-card,
    .owos-step,
    .owos-step-line {
        animation: none;
        transition: none;
    }

    .owos-service-card,
    .owos-step,
    .owos-step-line{
        opacity:1;
        transform:none;
    }

}
















/*=======================================================
                     Industries
=======================================================*/

:root{
  --black:#0a0a0d;
  --black-soft:#121216;
  --pink:#ec1c6b;
  --coral:#ff6b4a;
  --offwhite:#f7f2ea;
  --charcoal:#2a2621;
  --gray:#6b6560;
  --border-dark:rgba(255,255,255,0.08);
  --border-light:#e8e0d5;
  --header-height:80px; /* adjust to match your actual header height */
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--offwhite);
  overflow-x:hidden;
  width:100%;
}
img{max-width:100%;display:block;}
.accent-text{background:linear-gradient(90deg,var(--pink),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ===================== HERO ===================== */
.hero{
  background:radial-gradient(ellipse at 75% 30%, #1a0a12 0%, var(--black) 55%);
  color:#fff;
  padding:clamp(48px,8vw,90px) clamp(20px,5vw,64px);
  position:relative;
  overflow:hidden;
  width:100%;
}
.hero-inner{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  color:var(--pink);font-weight:700;font-size:13px;letter-spacing:1.5px;
  margin-bottom:20px;
}
.eyebrow::before{content:'';width:28px;height:2px;background:linear-gradient(90deg,var(--pink),var(--coral));flex-shrink:0;}
.hero h1{
  font-size:clamp(28px,5vw,54px);
  font-weight:800;line-height:1.15;letter-spacing:-1px;margin-bottom:22px;
  word-wrap:break-word;
}
.hero-underline{width:70px;height:4px;background:linear-gradient(90deg,var(--pink),var(--coral));border-radius:4px;margin:18px 0 22px;}
.hero p.desc{
  font-size:clamp(14px,1.6vw,17px);color:#c9c5c1;line-height:1.7;max-width:480px;margin-bottom:32px;
}
.hero-stats{display:flex;gap:clamp(14px,3vw,32px);flex-wrap:wrap;row-gap:16px;}
.stat{display:flex;align-items:center;gap:10px;}
.stat svg{flex-shrink:0;}
.stat b{display:block;font-size:clamp(16px,2vw,20px);font-weight:800;}
.stat span{display:block;font-size:11.5px;color:#a39d97;white-space:nowrap;}
.stat-sep{width:1px;background:var(--border-dark);align-self:stretch;}

/* Hero Image */
.hero-image{
  position:relative;width:100%;
  border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 0 60px rgba(236,28,107,0.15);
}
.hero-image img{
  width:100%;height:100%;
  display:block;object-fit:cover;
  border-radius:20px;
}

/* ---------- HERO RESPONSIVE BREAKPOINTS ---------- */
@media(max-width:1024px){
  .hero-inner{gap:32px;}
}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:32px;}
  .hero p.desc{max-width:none;}
  .hero-image{order:2;}
}
@media(max-width:768px){
  .hero{padding:calc(var(--header-height) + 24px) 20px 40px;}
  .hero-stats{gap:16px;}
}
@media(max-width:480px){
  .hero{padding:calc(var(--header-height) + 20px) 16px 36px;}
  .hero h1{font-size:clamp(24px,7.5vw,32px);}
  .hero-underline{margin:14px 0 18px;}
  .hero p.desc{font-size:14px;line-height:1.65;margin-bottom:26px;}
  .hero-stats{gap:12px;row-gap:14px;}
  .stat{gap:8px;}
  .stat b{font-size:16px;}
  .stat span{font-size:10.5px;}
}
@media(max-width:360px){
  .hero{padding:calc(var(--header-height) + 16px) 14px 32px;}
  .hero h1{font-size:22px;}
  .hero-stats{flex-wrap:wrap;}
  .stat-sep{display:none;}
}
@media(max-width:1440px) and (min-width:1025px){
  .hero-inner{max-width:1320px;}
}

/* ===================== INDUSTRIES ===================== */
.industries-section{
  padding:clamp(40px,6vw,80px) 0;
  background:linear-gradient(160deg,#ffffff 0%,#faf7f3 100%);
  width:100%;
  overflow:hidden;
}
.sec-head{max-width:700px;margin:0 auto 40px;text-align:center;padding:0 20px;}
.sec-eyebrow{color:var(--pink);font-weight:700;font-size:12.5px;letter-spacing:1.5px;margin-bottom:12px;}
.sec-head h2{font-size:clamp(24px,4vw,42px);font-weight:800;color:var(--charcoal);line-height:1.25;letter-spacing:-0.5px;}
.sec-head p{color:#5a544e;font-size:clamp(13.5px,1.6vw,16px);line-height:1.7;margin-top:16px;}

@media(max-width:480px){
  .sec-head{margin:0 auto 28px;padding:0 16px;}
  .sec-head h2{line-height:1.3;}
  .sec-head p{margin-top:12px;}
}

/* ---------- CAROUSEL ---------- */
.carousel-wrap{position:relative;padding:0 20px;width:100%;}
.carousel-viewport{overflow-x:auto;overflow-y:visible;max-width:1280px;margin:0 auto;scrollbar-width:none;-ms-overflow-style:none;}
.carousel-viewport::-webkit-scrollbar{display:none;}
.carousel-track{
  display:flex;gap:22px;width:max-content;
  animation:scroll-carousel 60s linear infinite;
  padding:20px 4px 30px;
}
.carousel-track.paused{animation-play-state:paused;}
@keyframes scroll-carousel{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

.industry-card{
  flex:0 0 clamp(260px,23vw,310px);
  width:clamp(260px,23vw,310px);
  background:linear-gradient(165deg,#fffaf7 0%,#fff5f0 100%);
  border:1.5px solid var(--border-light);
  border-radius:20px;
  padding:clamp(22px,3vw,30px) clamp(20px,2.5vw,26px) 24px;
  box-shadow:0 6px 20px rgba(40,20,10,0.06);
  position:relative;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
  display:flex;
  flex-direction:column;
}
.industry-card:hover{
  transform:translateY(-10px) scale(1.015);
  box-shadow:0 24px 50px rgba(236,28,107,0.18), 0 4px 14px rgba(0,0,0,0.06);
  border-color:rgba(236,28,107,0.25);
  background:linear-gradient(165deg,#fff5f8 0%,#fff0ea 100%);
}

.card-num-bg{
  position:absolute;
  top:-6px;right:8px;
  font-size:clamp(56px,7vw,78px);
  font-weight:900;
  color:rgba(236,28,107,0.05);
  line-height:1;
  pointer-events:none;
  transition:color .35s ease, transform .35s ease;
}
.industry-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--pink),var(--coral));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
}
.industry-card::after{
  content:'';position:absolute;left:0;bottom:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--pink),var(--coral));
  transition:width .4s ease;
}
.industry-card:hover::before{transform:scaleX(1);}
.industry-card:hover::after{width:100%;}
.industry-card:hover .card-num-bg{color:rgba(236,28,107,0.09);transform:scale(1.05);}

.card-num{
  color:var(--pink);
  font-weight:800;
  font-size:12px;
  letter-spacing:1.5px;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.card-num::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(236,28,107,0.3),transparent);
}

.card-icon{
  width:clamp(50px,6vw,60px);height:clamp(50px,6vw,60px);
  border-radius:18px;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  background:#fff;
  padding:2px;
  flex-shrink:0;
  transition:all .4s cubic-bezier(.2,.8,.2,1);
}
.card-icon::before{
  content:'';
  position:absolute;inset:0;
  border-radius:18px;
  padding:1.5px;
  background:linear-gradient(135deg,var(--pink),var(--coral));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0.35;
  transition:opacity .4s ease;
}
.card-icon::after{
  content:'';
  position:absolute;inset:2px;
  border-radius:16px;
  background:linear-gradient(145deg,rgba(236,28,107,0.08),rgba(255,107,74,0.06));
  transition:background .4s ease;
  z-index:0;
}
.card-icon svg{
  position:relative;
  z-index:1;
  width:clamp(22px,2.5vw,26px);
  height:clamp(22px,2.5vw,26px);
  transition:transform .4s ease;
}
.card-icon-dot{
  position:absolute;
  top:-4px;right:-4px;
  width:9px;height:9px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--coral));
  box-shadow:0 0 8px rgba(236,28,107,0.5);
  opacity:0;
  transform:scale(0.5);
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  z-index:2;
}
.industry-card:hover .card-icon{
  background:linear-gradient(145deg,var(--pink),var(--coral));
  border-color:transparent;
  transform:rotate(-6deg) scale(1.08);
  box-shadow:0 8px 20px rgba(236,28,107,0.35);
}
.industry-card:hover .card-icon::before{opacity:1;}
.industry-card:hover .card-icon::after{background:linear-gradient(145deg,var(--pink),var(--coral));}
.industry-card:hover .card-icon svg{stroke:#fff;transform:rotate(6deg) scale(1.05);}
.industry-card:hover .card-icon-dot{opacity:1;transform:scale(1);}

.industry-card h3{
  font-size:clamp(17px,1.8vw,19px);
  font-weight:800;
  color:var(--charcoal);
  margin-bottom:10px;
  line-height:1.3;
  letter-spacing:-0.2px;
  position:relative;
}
.industry-card p{
  font-size:clamp(13px,1.5vw,14px);
  color: #000;
  line-height:1.65;
  flex-grow:1;
  margin-bottom:18px;
  position:relative;
}

.read-more{
  background:none;
  border:none;
  color:var(--pink);
  font-weight:700;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  padding:10px 0 0;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  width:fit-content;
}
.read-more::after{
  content:'';
  position:absolute;
  bottom:6px;left:0;
  width:0;height:1.5px;
  background:linear-gradient(90deg,var(--pink),var(--coral));
  transition:width .3s ease;
}
.read-more:hover::after{width:calc(100% - 24px);}
.read-more svg{transition:transform .3s ease;flex-shrink:0;}
.read-more:hover svg{transform:translateX(5px);}

.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--border-light);
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.arrow-left{left:0;}
.arrow-right{right:0;}

.dots{display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap;padding:0 20px;}
.dot{width:8px;height:8px;border-radius:50%;background:#ddd6cc;flex-shrink:0;}
.dot.active{background:var(--pink);width:22px;border-radius:4px;transition:all .3s ease;}

/* ---------- CAROUSEL RESPONSIVE ---------- */
@media(max-width:1024px){
  .industry-card{flex:0 0 clamp(250px,30vw,290px);width:clamp(250px,30vw,290px);}
}
@media(max-width:768px){
  .carousel-wrap{padding:0 16px;}
  .carousel-arrow{display:none;}
  .industry-card{flex:0 0 78vw;width:78vw;max-width:340px;}
}
@media(max-width:480px){
  .carousel-wrap{padding:0 14px;}
  .carousel-track{gap:16px;padding:16px 2px 26px;}
  .industry-card{flex:0 0 85vw;width:85vw;max-width:none;padding:22px 20px 22px;}
  .card-num-bg{font-size:52px;top:-4px;right:6px;}
  .card-icon{width:48px;height:48px;margin-bottom:14px;}
  .industry-card h3{font-size:16.5px;margin-bottom:8px;}
  .industry-card p{font-size:13px;line-height:1.6;margin-bottom:14px;}
}
@media(max-width:360px){
  .industry-card{flex:0 0 88vw;width:88vw;padding:20px 18px 20px;}
  .card-num-bg{font-size:44px;}
}
@media(max-width:320px){
  .carousel-wrap{padding:0 10px;}
  .industry-card{flex:0 0 90vw;width:90vw;padding:18px 16px 18px;}
}

/* ===================== MODAL ===================== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;z-index:999;padding:20px;
  opacity:0;transition:opacity .25s ease;
}
.modal-overlay.open{display:flex;opacity:1;}
.modal{
  background:#0d0d10;border:1px solid rgba(255,255,255,0.1);border-radius:20px;
  max-width:560px;width:100%;max-height:85vh;overflow-y:auto;
  position:relative;padding:36px 32px 32px;color:#fff;
  transform:scale(0.94);transition:transform .25s ease;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  -webkit-overflow-scrolling:touch;
}
.modal-overlay.open .modal{transform:scale(1);}
.modal::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--pink),var(--coral));
  border-radius:20px 20px 0 0;
}
.modal-close{
  position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.06);border:none;color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  min-width:36px;min-height:36px;
  z-index:100;
  pointer-events:auto;
}
.modal-close:hover{background:rgba(255,255,255,0.12);}
.modal-title{font-size:clamp(19px,3vw,26px);font-weight:800;margin-bottom:14px;letter-spacing:-0.3px;padding-right:36px;}
.modal-desc{color:#fff;font-size:17px;line-height:1.75;margin-bottom:18px;}
.modal-desc-2{color:#fff;font-size:16.5px;line-height:1.75;margin-bottom:22px;}
.modal-subhead{font-size:13.5px;letter-spacing:1.2px;color:var(--coral);font-weight:700;margin-bottom:14px;}
.modal-outcomes{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px;}
.outcome-chip{
  display:flex;align-items:center;gap:6px;
  background:linear-gradient(145deg,rgba(236,28,107,0.1),rgba(255,107,74,0.08));
  border:1px solid rgba(236,28,107,0.2);
  padding:7px 12px;border-radius:30px;
  font-size:12px;font-weight:700;color:#fff;
}
.outcome-chip svg{flex-shrink:0;}
.key-areas{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.key-item{
  display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#e5e1dc;
  background:rgba(255,255,255,0.04);padding:12px 14px;border-radius:10px;line-height:1.4;
}
.key-item svg{flex-shrink:0;margin-top:2px;}
body.modal-lock{overflow:hidden;position:fixed;width:100%;}

/* ---------- MODAL RESPONSIVE ---------- */
@media(max-width:768px){
  .modal{max-width:90vw;padding:32px 26px 28px;}
}
@media(max-width:480px){
  .modal-overlay{padding:0;align-items:flex-end;}
  .modal{
    max-width:100%;width:100%;
    max-height:90vh;
    border-radius:20px 20px 0 0;
    padding:28px 20px 24px;
  }
  .modal::before{border-radius:20px 20px 0 0;}
  .modal-title{font-size:19px;padding-right:32px;}
  .modal-desc,.modal-desc-2{font-size:13px;line-height:1.7;}
  .key-areas{grid-template-columns:1fr;gap:10px;}
  .key-item{font-size:12.5px;padding:11px 13px;}
  .modal-close{top:14px;right:14px;}
}
@media(max-width:320px){
  .modal{padding:22px 16px 20px;}
  .modal-title{font-size:17px;}
}

/* ===================== FEATURE STRIP ===================== */
.feature-strip{
  max-width:1280px;margin:60px auto 0;padding:0 20px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:16px;
}
.feature{
  background:#fff;
  padding:28px 18px;
  text-align:center;
  border-radius:18px;
  border:1.5px solid var(--pink);
  box-shadow:0 4px 14px rgba(40,20,10,0.05);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  position:relative;
  overflow:hidden;
}
.feature::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--pink),var(--coral));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
}
.feature:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(236,28,107,0.15);
  border-color:var(--pink);
}
.feature:hover::before{transform:scaleX(1);}
.feature svg{
  width:28px;height:28px;
  margin-bottom:14px;
  padding:13px;
  border-radius:14px;
  background:linear-gradient(145deg,var(--pink),var(--coral));
  box-sizing:content-box;
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  stroke:#fff;
}
.feature:hover svg{
  transform:scale(1.08) rotate(-6deg);
}
.feature b{
  display:block;
  font-size:17.5px;
  font-weight:800;
  color:var(--charcoal);
  margin-bottom:8px;
  letter-spacing:-0.1px;
}
.feature p{
  font-size:14.5px;
  color:var(--gray);
  line-height:1.6;
}

/* ---------- FEATURE STRIP RESPONSIVE ---------- */
@media(max-width:1024px){
  .feature-strip{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:480px){
  .feature-strip{grid-template-columns:repeat(2,1fr);gap:12px;margin:40px auto 0;padding:0 16px;}
  .feature{padding:22px 14px;border-radius:14px;}
  .feature svg{width:20px;height:20px;padding:11px;margin-bottom:10px;}
  .feature b{font-size:13.5px;margin-bottom:6px;}
  .feature p{font-size:11.5px;line-height:1.5;}
}
@media(max-width:320px){
  .feature-strip{gap:10px;padding:0 12px;}
  .feature{padding:18px 12px;}
}

#modalOverlay {
  z-index: 2147483000 !important;
}

#modalOverlay .modal {
  position: relative !important;
  z-index: 1 !important;
}

#modalClose {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;

  z-index: 2147483647 !important;

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

  width: 40px !important;
  height: 40px !important;

  padding: 0 !important;

  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 50% !important;

  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}


/* =========================================================
                      Products
========================================================= */

/* ======================================================
     EGS PRODUCTS PAGE — namespaced under .egsprod- to avoid
     collisions when embedded into the existing site.
     ====================================================== */
.egsprod-root {
    --egsprod-black: #0a0508;
    --egsprod-black-soft: #120a10;
    --egsprod-black-card: #1a1015;
    --egsprod-pink: #ec1b6f;
    --egsprod-pink-bright: #ff2e87;
    --egsprod-coral: #ff7a3d;
    --egsprod-gradient: linear-gradient(120deg, var(--egsprod-pink) 0%, var(--egsprod-coral) 100%);
    --egsprod-cream: #fbf3ee;
    --egsprod-cream-card: #ffffff;
    --egsprod-charcoal: #221a1d;
    --egsprod-charcoal-soft: #6b5c60;
    --egsprod-line: rgba(236, 27, 111, 0.18);
    --egsprod-white: #ffffff;
    --egsprod-white-soft: rgba(255,255,255,0.72);
    --egsprod-radius-lg: 24px;
    --egsprod-radius-md: 16px;
    --egsprod-radius-sm: 10px;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: var(--egsprod-charcoal);
    background: var(--egsprod-cream);
    overflow-x: hidden;
    width: 100%;
  }

  .egsprod-root * { box-sizing: border-box; }
  .egsprod-root img { max-width: 100%; display: block; }
  .egsprod-root button { font-family: inherit; }

  .egsprod-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 64px);
  }

  .egsprod-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18.5px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--egsprod-pink), var(--egsprod-coral));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 18px;
  }
  .egsprod-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, var(--egsprod-pink), var(--egsprod-coral));
    display: inline-block;
  }

  /* ============ HERO — DARK ============ */
  .egsprod-hero {
    background:
      radial-gradient(ellipse 900px 500px at 82% 15%, rgba(236,27,111,0.16), transparent 60%),
      radial-gradient(ellipse 700px 500px at 20% 100%, rgba(255,122,61,0.10), transparent 60%),
      var(--egsprod-black);
    color: var(--egsprod-white);
    padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 7vw, 90px);
    position: relative;
  }

  .egsprod-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 60px);
    align-items: center;
  }

  .egsprod-hero-heading {
    font-size: clamp(2.1rem, 4vw, 3.15rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.01em;
    margin: 0 0 22px;
  }
  .egsprod-hero-heading span {
    background: var(--egsprod-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .egsprod-hero-sub {
    font-size: clamp(0.98rem, 1.1vw, 1.08rem);
    line-height: 1.7;
    color: var(--egsprod-white-soft);
    max-width: 480px;
    margin: 0 0 36px;
  }

  .egsprod-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 36px);
  }
  .egsprod-stat {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .egsprod-stat-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(236,27,111,0.12);
    border: 1px solid rgba(236,27,111,0.35);
    color: var(--egsprod-pink-bright);
  }
  .egsprod-stat-icon svg { width: 18px; height: 18px; }
  .egsprod-stat-num {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .egsprod-stat-label {
    font-size: 0.72rem;
    color: var(--egsprod-white-soft);
    letter-spacing: 0.01em;
  }

  .egsprod-hero-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 509 / 390;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .egsprod-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(236,27,111,0.25));
    animation: egsprod-float 6s ease-in-out infinite;
  }

  @keyframes egsprod-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  /* ============ PRODUCTS — LIGHT ============ */
  .egsprod-products {
    background: #fdf0e9;
    padding: clamp(64px, 9vw, 110px) 0 clamp(70px, 9vw, 110px);
    position: relative;
    overflow: hidden;
  }
  .egsprod-products::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    top: -220px;
    left: -160px;
    background: radial-gradient(circle, rgba(236,27,111,0.07), transparent 70%);
    pointer-events: none;
  }
  .egsprod-products::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    bottom: -200px;
    right: -150px;
    background: radial-gradient(circle, rgba(255,122,61,0.08), transparent 70%);
    pointer-events: none;
  }

  .egsprod-section-head {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 680px;
    margin: 0 auto 48px;
  }
  .egsprod-section-head .egsprod-eyebrow { justify-content: center; }
  .egsprod-section-head .egsprod-eyebrow::before { display: none; }

  .egsprod-section-title {
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 16px;
    color: var(--egsprod-charcoal);
  }
  .egsprod-section-sub {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--egsprod-charcoal-soft);
  }
  .egsprod-title-rule {
    width: 54px;
    height: 3px;
    margin: 20px auto 0;
    border-radius: 2px;
    background: var(--egsprod-gradient);
  }

  .egsprod-carousel-shell {
    position: relative;
    z-index: 1;
    padding: 40px clamp(16px, 4vw, 40px) 34px;
    border-radius: 28px;
    background:
      radial-gradient(ellipse 520px 260px at 12% 0%, rgba(236,27,111,0.06), transparent 65%),
      radial-gradient(ellipse 520px 260px at 88% 100%, rgba(255,122,61,0.07), transparent 65%),
      linear-gradient(180deg, rgba(236,27,111,0.045) 0%, rgba(255,122,61,0.03) 100%);
    border: 1px solid rgba(34,26,29,0.06);
  }

  .egsprod-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
  .egsprod-carousel-viewport::-webkit-scrollbar { display: none; height: 0; }

  .egsprod-carousel-track {
    display: flex;
    gap: 22px;
    width: max-content;
    animation: egsprod-scroll 38s linear infinite;
  }
  .egsprod-carousel-track.egsprod-paused {
    animation-play-state: paused;
  }

  @keyframes egsprod-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .egsprod-card {
    flex: 0 0 auto;
    width: 250px;
    position: relative;
    background: var(--egsprod-cream-card);
    border: 1px solid rgba(34,26,29,0.07);
    border-radius: 20px;
    padding: 28px 22px 24px;
    text-align: left;
    box-shadow: 0 10px 30px rgba(34,20,25,0.05);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(.2,.8,.3,1), box-shadow 0.4s ease, border-color 0.4s ease;
  }
  .egsprod-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--egsprod-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
  }
  .egsprod-card::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    top: -70px;
    right: -70px;
    background: radial-gradient(circle, rgba(236,27,111,0.10), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .egsprod-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 50px rgba(236,27,111,0.16);
    border-color: rgba(236,27,111,0.28);
  }
  .egsprod-card:hover::before { transform: scaleX(1); }
  .egsprod-card:hover::after { opacity: 1; }

  .egsprod-card-num {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--egsprod-pink);
    background: rgba(236,27,111,0.08);
    border: 1px solid rgba(236,27,111,0.18);
    padding: 3px 9px;
    border-radius: 999px;
    z-index: 1;
  }

  .egsprod-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(236,27,111,0.10), rgba(255,122,61,0.10));
    color: var(--egsprod-pink);
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(.2,.8,.3,1), background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
  }
  .egsprod-card-icon svg { width: 26px; height: 26px; }
  .egsprod-card:hover .egsprod-card-icon {
    background: var(--egsprod-gradient);
    color: #fff;
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 10px 22px rgba(236,27,111,0.32);
  }

  .egsprod-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--egsprod-charcoal);
    margin: 0 0 10px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
  }

  .egsprod-card-desc {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--egsprod-charcoal-soft);
    margin: 0 0 20px;
    min-height: 78px;
    position: relative;
    z-index: 1;
  }

  .egsprod-card-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    white-space: nowrap;
    background: rgba(236,27,111,0.07);
    border: 1px solid rgba(236,27,111,0.16);
    padding: 9px 8px 9px 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--egsprod-pink);
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  .egsprod-card-cta-arrow {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--egsprod-gradient);
    color: #fff;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.3s ease;
  }
  .egsprod-card-cta-arrow svg { width: 12px; height: 12px; }
  .egsprod-card-cta:hover {
    background: var(--egsprod-gradient);
    color: #fff;
    border-color: transparent;
  }
  .egsprod-card-cta:hover .egsprod-card-cta-arrow { transform: translateX(3px); background: rgba(255,255,255,0.25); }
  .egsprod-card-cta:focus-visible,
  .egsprod-nav-btn:focus-visible,
  .egsprod-modal-close:focus-visible,
  .egsprod-cta-btn:focus-visible {
    outline: 2px solid var(--egsprod-pink);
    outline-offset: 3px;
  }

  .egsprod-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(34,26,29,0.12);
    background: var(--egsprod-cream-card);
    color: var(--egsprod-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(34,20,25,0.10);
    z-index: 3;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .egsprod-nav-btn:hover { background: var(--egsprod-gradient); color: #fff; }
  .egsprod-nav-btn svg { width: 18px; height: 18px; }
  .egsprod-nav-prev { left: 4px; }
  .egsprod-nav-next { right: 4px; }

  .egsprod-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
  }
  .egsprod-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(34,26,29,0.18);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
  }
  .egsprod-dot.egsprod-dot-active {
    background: var(--egsprod-gradient);
    width: 20px;
    border-radius: 4px;
  }

  /* ============ MODAL ============ */
  .egsprod-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6,3,5,0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .egsprod-modal-overlay.egsprod-modal-open {
    opacity: 1;
    visibility: visible;
  }

  .egsprod-modal {
    background: var(--egsprod-black-soft);
    border: 1px solid rgba(236,27,111,0.25);
    border-radius: var(--egsprod-radius-lg);
    max-width: 880px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    color: var(--egsprod-white);
    padding: clamp(24px, 4vw, 44px);
    position: relative;
    box-shadow: 0 40px 90px rgba(0,0,0,0.55);
    transform: scale(0.94) translateY(14px);
    transition: transform 0.35s cubic-bezier(.2,.9,.3,1);
  }
  .egsprod-modal-overlay.egsprod-modal-open .egsprod-modal {
    transform: scale(1) translateY(0);
  }

  .egsprod-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease;
  }
  .egsprod-modal-close:hover { background: var(--egsprod-gradient); border-color: transparent; }
  .egsprod-modal-close svg { width: 16px; height: 16px; }

  .egsprod-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 26px;
    padding-right: 46px;
  }
  .egsprod-modal-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(236,27,111,0.3);
    color: var(--egsprod-pink-bright);
  }
  .egsprod-modal-icon svg { width: 28px; height: 28px; }
  .egsprod-modal-title { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 700; margin: 0 0 6px; }
  .egsprod-modal-tag {
    font-size: 0.85rem;
    font-weight: 600;
    background: linear-gradient(90deg, var(--egsprod-pink-bright), var(--egsprod-coral));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0;
  }

  .egsprod-modal-body {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 34px;
  }

  .egsprod-modal-intro {
    font-size: 0.94rem;
    line-height: 1.75;
    color: var(--egsprod-white-soft);
    margin: 0 0 22px;
  }

  .egsprod-modal-subhead {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--egsprod-pink-bright);
    margin: 0 0 14px;
  }

  .egsprod-tag-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
  }
  .egsprod-tag-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 12px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--egsprod-white-soft);
  }
  .egsprod-tag-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--egsprod-coral); }

  .egsprod-modal-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .egsprod-modal-list li {
    display: flex;
    gap: 10px;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--egsprod-white-soft);
  }
  .egsprod-modal-list svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--egsprod-pink-bright);
  }
  .egsprod-modal-list b { color: #fff; font-weight: 600; }

  .egsprod-modal-usecases {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
  }
  .egsprod-usecase-pill {
    font-size: 0.76rem;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--egsprod-white-soft);
  }

  .egsprod-modal-footer {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--egsprod-radius-md);
    padding: 18px 22px;
  }
  .egsprod-modal-footer-left { display: flex; align-items: center; gap: 14px; }
  .egsprod-modal-footer-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--egsprod-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .egsprod-modal-footer-icon svg { width: 18px; height: 18px; }
  .egsprod-modal-footer-label { font-size: 0.8rem; font-weight: 700; color: var(--egsprod-pink-bright); margin: 0 0 3px; }
  .egsprod-modal-footer-text { font-size: 0.82rem; color: var(--egsprod-white-soft); margin: 0; max-width: 320px; }

  .egsprod-demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--egsprod-gradient);
    color: #fff;
    border: none;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.25s ease, transform 0.25s ease;
  }
  .egsprod-demo-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .egsprod-demo-btn svg { width: 14px; height: 14px; }
  /* Attractive full-width product image */
.egsprod-card-image {
  position: relative;
  width: calc(100% + 48px) !important;
  height: 190px !important;
  margin: -24px -24px 24px !important;
  padding: 0 !important;
  overflow: hidden;
  background: linear-gradient(135deg, #fff0f6, #fff7f1);
  border: 0 !important;
  border-bottom: 1px solid rgba(236, 30, 110, 0.18) !important;
  border-radius: 22px 22px 0 0 !important;
  box-shadow: none !important;
}

.egsprod-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 65%,
    rgba(236, 30, 110, 0.08)
  );
}

.egsprod-card-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  transition: transform 0.45s ease;
}

.egsprod-card:hover .egsprod-card-image img {
  transform: scale(1.07);
}

/* Card number image மேலே தெரிய */
.egsprod-card-num {
  z-index: 5 !important;
}

/* Tablet */
@media (max-width: 768px) {
  .egsprod-card-image {
    width: calc(100% + 40px) !important;
    height: 175px !important;
    margin: -20px -20px 21px !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .egsprod-card-image {
    width: calc(100% + 32px) !important;
    height: 165px !important;
    margin: -16px -16px 20px !important;
  }
}
  /* ============ ECOSYSTEM — DARK ============ */
  .egsprod-ecosystem {
    background: var(--egsprod-black);
    color: var(--egsprod-white);
    padding: clamp(64px, 9vw, 110px) 0;
    position: relative;
  }
  .egsprod-eco-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 20px;
  }
  .egsprod-eco-head .egsprod-eyebrow { justify-content: center; }
  .egsprod-eco-head .egsprod-eyebrow::before { display: none; }
  .egsprod-eco-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: #fff;
  }

  .egsprod-eco-visual {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1 / 1;
    margin: 40px auto 0;
  }

  .egsprod-eco-ring-outer,
  .egsprod-eco-ring-inner {
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    pointer-events: none;
  }
  .egsprod-eco-ring-outer {
    border: 1.5px dashed rgba(236,27,111,0.32);
    animation: egsprod-spin 50s linear infinite;
  }
  .egsprod-eco-ring-inner {
    inset: 16%;
    border: 1px dashed rgba(255,122,61,0.22);
    animation: egsprod-spin-rev 65s linear infinite;
  }
  @keyframes egsprod-spin { to { transform: rotate(360deg); } }
  @keyframes egsprod-spin-rev { to { transform: rotate(-360deg); } }

  .egsprod-eco-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .egsprod-eco-lines line {
    stroke: url(#egsprodLineGrad);
    stroke-width: 0.35;
    stroke-dasharray: 1.6 1.6;
    opacity: 0.55;
  }
  .egsprod-eco-lines circle.egsprod-eco-flow {
    fill: var(--egsprod-pink-bright);
    r: 0.9;
    opacity: 0;
  }

  .egsprod-eco-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(236,27,111,0.14), rgba(10,5,8,0.9) 72%);
    border: 1.5px solid rgba(236,27,111,0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
    animation: egsprod-core-pulse 3.2s ease-in-out infinite;
  }
  @keyframes egsprod-core-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(236,27,111,0.28); }
    50% { box-shadow: 0 0 0 14px rgba(236,27,111,0); }
  }
  .egsprod-eco-core-name {
    font-size: clamp(1.1rem, 3vw, 1.7rem);
    font-weight: 800;
    background: var(--egsprod-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
  }
  .egsprod-eco-core-label {
    font-size: clamp(0.44rem, 1vw, 0.62rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--egsprod-white-soft);
    margin-top: 6px;
  }

  .egsprod-eco-nodes {
    position: absolute;
    inset: 0;
    z-index: 4;
  }
  .egsprod-eco-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 92px;
    text-align: center;
  }
 /* Increase ecosystem node circles */
.egsprod-eco-node-icon {
  width: 56px !important;
  height: 56px !important;

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

  border-width: 2px !important;
  border-radius: 50% !important;

  box-shadow:
    0 0 0 7px rgba(236, 27, 111, 0.08),
    0 10px 30px rgba(236, 27, 111, 0.24) !important;
}

/* Increase SVG icon */
.egsprod-eco-node-icon svg {
  width: 25px !important;
  height: 25px !important;

  stroke-width: 2.2 !important;
}

  .egsprod-modal-title,
#egsprodModalTitle {
  background: linear-gradient(
    90deg,
    #ec1b6f,
    #ff7a3d
  ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
  .egsprod-eco-node-icon svg { width: 19px; height: 19px; }
  @keyframes egsprod-node-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,61,0.35); }
    50% { box-shadow: 0 0 0 8px rgba(255,122,61,0); }
  }

  .egsprod-eco-node:hover .egsprod-eco-node-icon {
    transform: scale(1.1);
    color: #fff;
    background: var(--egsprod-gradient);
    border-color: transparent;
  }
/* Equal product-card height and aligned buttons */
.egsprod-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 410px !important;
}

.egsprod-card-title {
  min-height: 58px !important;
}

.egsprod-card-desc {
  min-height: 110px !important;
  margin-bottom: 20px !important;
}

.egsprod-card-cta {
  width: 100% !important;
  margin-top: auto !important;
}
@media (max-width: 600px) {
  .egsprod-card {
    min-height: 380px !important;
  }

  .egsprod-card-title,
  .egsprod-card-desc {
    min-height: auto !important;
  }
}

.egsprod-card {
  min-height: 560px !important;
}

.egsprod-card-tagline {
  margin: 8px 0 12px;
  color: #ec1b6f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.egsprod-card-desc {
  min-height: auto !important;
  margin: 0 0 16px !important;
}

.egsprod-card-features {
  display: grid;
  gap: 9px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.egsprod-card-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #6b5c60;
  font-size: 13px;
  line-height: 1.4;
}

.egsprod-card-features li span {
  flex: 0 0 auto;
  color: #ec1b6f;
  font-weight: 800;
}

.egsprod-card-cta {
  margin-top: auto !important;
}
/* Reduce Products section height */
.egsprod-products {
  padding-top: 55px !important;
  padding-bottom: 45px !important;
}

.egsprod-section-head {
  margin-bottom: 28px !important;
}

.egsprod-carousel-shell {
  margin-top: 20px !important;
}

.egsprod-card {
  min-height: 500px !important;
}

.egsprod-carousel-dots {
  margin-top: 16px !important;
}

/* Increase ecosystem product-name size */
.egsprod-eco-node-label {
  width: 145px !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;

  color: #ffffff !important;
  text-align: center !important;

  white-space: normal !important;
}

.egsprod-eco-core-name {
  font-size: 30px !important;
  line-height: 1.2 !important;
}

.egsprod-eco-core-label {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
}



  @media (max-width: 560px) {
    .egsprod-eco-visual { max-width: 380px; }
    .egsprod-eco-node { width: 72px; }
    .egsprod-eco-node-icon { width: 36px; height: 36px; }
    .egsprod-eco-node-icon svg { width: 16px; height: 16px; }
    .egsprod-eco-node-label { font-size: 0.6rem; }
  }

  .egsprod-eco-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    max-width: 980px;
    margin: 64px auto 0;
    padding-top: 44px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .egsprod-eco-benefit {
    text-align: center;
    padding: 0 8px;
  }
  .egsprod-eco-benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(236,27,111,0.08);
    border: 1px solid rgba(236,27,111,0.3);
    color: var(--egsprod-pink-bright);
    transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
  }
  .egsprod-eco-benefit-icon svg { width: 22px; height: 22px; }
  .egsprod-eco-benefit:hover .egsprod-eco-benefit-icon {
    transform: translateY(-5px) scale(1.06);
    background: var(--egsprod-gradient);
    color: #fff;
  }
  .egsprod-eco-benefit-title { font-size: 20x; font-weight: 700; margin: 0 0 8px; }
  .egsprod-eco-benefit-desc { font-size: 16px; line-height: 1.6; color: var(--egsprod-white-soft); margin: 0; }
  /* Product modal responsive image */
.egsprod-modal {
  width: min(920px, calc(100vw - 30px)) !important;
  max-width: 920px !important;
  overflow-x: hidden !important;
}

.egsprod-modal-banner {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: #100712;
  border-radius: 22px 22px 0 0;
}

.egsprod-modal-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.egsprod-modal-head {
  display: block !important;
  padding: 25px 28px 15px !important;
}

.egsprod-modal-title {
  max-width: calc(100% - 55px);
  margin: 0 0 8px !important;
  color: #ffffff !important;
  font-size: clamp(27px, 4vw, 42px) !important;
  line-height: 1.1 !important;
  overflow-wrap: break-word;
}

.egsprod-modal-tag {
  margin: 0 !important;
  color: #ff4081 !important;
  line-height: 1.5;
}

.egsprod-modal-body,
.egsprod-modal-footer {
  max-width: 100%;
  overflow-x: hidden;
}

.egsprod-modal-close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  z-index: 20 !important;
}

/* Tablet */
@media (max-width: 768px) {
  .egsprod-modal-banner {
    height: 220px;
  }

  .egsprod-modal-head {
    padding: 22px 20px 12px !important;
  }

  .egsprod-modal-body {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .egsprod-modal {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 17px !important;
  }

  .egsprod-modal-banner {
    height: 175px;
    border-radius: 17px 17px 0 0;
  }

  .egsprod-modal-title {
    max-width: 100%;
    font-size: 26px !important;
  }
}

/* Modal image — full image visible */
.egsprod-modal {
  width: min(920px, calc(100vw - 30px)) !important;
  max-width: 920px !important;
  overflow-x: hidden !important;
}

.egsprod-modal-banner {
  position: relative;
  width: 100% !important;
  height: 300px !important;
  padding: 12px;
  overflow: hidden !important;
  box-sizing: border-box;
  background: #0c0610;
  border-radius: 22px 22px 0 0;
}

.egsprod-modal-banner img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 14px;
}

.egsprod-modal-head {
  width: 100% !important;
  padding: 22px 28px 15px !important;
  box-sizing: border-box;
}

.egsprod-modal-title {
  max-width: calc(100% - 55px);
  margin: 0 0 8px !important;
  overflow-wrap: break-word;
}

.egsprod-modal-body,
.egsprod-modal-footer {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow-x: hidden !important;
}

/* Tablet */
@media (max-width: 768px) {
  .egsprod-modal-banner {
    height: 240px !important;
    padding: 10px;
  }

  .egsprod-modal-head {
    padding: 20px !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .egsprod-modal {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }

  .egsprod-modal-banner {
    height: 190px !important;
    padding: 8px;
    border-radius: 17px 17px 0 0;
  }

  .egsprod-modal-banner img {
    border-radius: 11px;
  }

  .egsprod-modal-head {
    padding: 18px 16px !important;
  }

  .egsprod-modal-title {
    max-width: 100%;
  }
}
.egsprod-carousel-track {
  align-items: stretch !important;
}

.egsprod-card {
  display: flex !important;
  flex-direction: column !important;
  height: 650px !important;
  min-height: 650px !important;
  max-height: 650px !important;
  box-sizing: border-box !important;
}

.egsprod-card-features {
  margin-bottom: 15px !important;
}

.egsprod-card-cta {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* Tablet */
@media (max-width: 768px) {
  .egsprod-card {
    height: 620px !important;
    min-height: 620px !important;
    max-height: 620px !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .egsprod-card {
    height: 600px !important;
    min-height: 600px !important;
    max-height: 600px !important;
  }
}

  /* ============ CTA — LIGHT ============ */
  .egsprod-cta {
    background: var(--egsprod-cream);
    padding: clamp(56px, 7vw, 84px) 0;
  }
  .egsprod-cta-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    background: var(--egsprod-cream-card);
    border-radius: var(--egsprod-radius-lg);
    padding: clamp(30px, 4vw, 50px) clamp(28px, 4vw, 54px);
    box-shadow: 0 26px 60px rgba(34,20,25,0.09);
    overflow: hidden;
    isolation: isolate;
  }
  .egsprod-cta-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(236,27,111,0.5), rgba(255,122,61,0.15) 35%, rgba(236,27,111,0.05) 60%, rgba(255,122,61,0.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
  }
  .egsprod-cta-inner::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    right: -120px;
    top: -140px;
    background: radial-gradient(circle, rgba(236,27,111,0.10), transparent 68%);
    z-index: -1;
  }
  .egsprod-cta-glow-2 {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    left: -90px;
    bottom: -110px;
    background: radial-gradient(circle, rgba(255,122,61,0.10), transparent 68%);
    z-index: -1;
    pointer-events: none;
  }
  .egsprod-cta-left { max-width: 420px; display: flex; gap: 16px; align-items: flex-start; }
  .egsprod-cta-badge {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--egsprod-gradient);
    color: #fff;
    box-shadow: 0 10px 24px rgba(236,27,111,0.3);
    animation: egsprod-cta-float 3.4s ease-in-out infinite;
  }
  .egsprod-cta-badge svg { width: 22px; height: 22px; }
  @keyframes egsprod-cta-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-6deg); }
  }
  .egsprod-cta-title {
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 700;
    line-height: 1.28;
    margin: 12px 0 0;
    color: var(--egsprod-charcoal);
  }
  .egsprod-cta-mid {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--egsprod-charcoal-soft);
    max-width: 360px;
    flex: 1 1 260px;
    position: relative;
    z-index: 2;
  }
  .egsprod-cta-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--egsprod-gradient);
    color: #fff;
    border: none;
    padding: 16px 30px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 14px 30px rgba(236,27,111,0.28);
    transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }
  .egsprod-cta-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(236,27,111,0.38);
  }
  .egsprod-cta-btn svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
  .egsprod-cta-btn:hover svg { transform: translateX(3px); }
   

  .egsprod-root h1,
.egsprod-root h2,
.egsprod-root h3,
.egsprod-root p,
.egsprod-root span,
.egsprod-root div {
  text-shadow: none !important;
  filter: none !important;
}
  /* ============ RESPONSIVE ============ */
  @media (max-width: 980px) {
    .egsprod-hero-grid { grid-template-columns: 1fr; }
    .egsprod-hero-visual { max-width: 460px; margin: 8px auto 0; }
    .egsprod-modal-body { grid-template-columns: 1fr; }
    .egsprod-eco-benefits { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  }

  @media (max-width: 640px) {
    .egsprod-hero { text-align: left; }
    .egsprod-hero-stats { gap: 16px 26px; }
    .egsprod-card { width: 74vw; max-width: 270px; }
    .egsprod-nav-btn { display: none; }
    .egsprod-cta-inner { flex-direction: column; align-items: flex-start; text-align: left; }
    .egsprod-cta-btn { width: 100%; justify-content: center; }
    .egsprod-modal { padding: 22px 18px; max-height: 92vh; }
    .egsprod-modal-head { padding-right: 40px; }
    .egsprod-tag-grid { grid-template-columns: 1fr; }
    .egsprod-eco-benefits { grid-template-columns: 1fr 1fr; gap: 26px 16px; margin-top: 48px; padding-top: 34px; }
  }

  @media (max-width: 420px) {
    .egsprod-eco-benefits { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .egsprod-carousel-track { animation: none; }
    .egsprod-hero-visual img { animation: none; }
    .egsprod-eco-ring-outer, .egsprod-eco-ring-inner, .egsprod-eco-core,
    .egsprod-eco-node-icon, .egsprod-cta-badge, .egsprod-eco-flow { animation: none; }
  }
@media (max-width: 600px) {
  .egsprod-eco-node-label {
    width: 90px !important;
    font-size: 10px !important;
  }

  .egsprod-eco-core-name {
    font-size: 21px !important;
  }

  .egsprod-eco-core-label {
    font-size: 8px !important;
  }
}
/* Mobile CTA center-gap fix */
@media (max-width: 640px) {
  .egsprod-cta {
    padding: 35px 0 !important;
  }

  .egsprod-cta-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 22px !important;
    min-height: auto !important;
    height: auto !important;

    padding: 30px 26px !important;
  }

  .egsprod-cta-left {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .egsprod-cta-mid {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;

    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .egsprod-cta-btn {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Product card image */
.egsprod-card-image {
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  padding: 5px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #fff1f5;
  border: 1px solid #ffd0df;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(236, 30, 110, 0.17);
}

.egsprod-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 13px;
}

/* Tablet */
@media (max-width: 768px) {
  .egsprod-card-image {
    width: 64px;
    height: 64px;
    margin-bottom: 15px;
    border-radius: 16px;
  }

  .egsprod-card-image img {
    border-radius: 11px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .egsprod-card-image {
    width: 58px;
    height: 58px;
    margin-bottom: 13px;
    padding: 4px;
    border-radius: 14px;
  }

  .egsprod-card-image img {
    border-radius: 10px;
  }
}
/* ==============================================
               Blog
============================================== */

/* =========================================
   EGS BLOG HERO — UNIQUE CSS
========================================= */

.egsblog-hero {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  padding: 70px 5vw 60px;
  background: #000000;
}

.egsblog-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: #000;
  background-size: 25px 25px;
}

.egsblog-hero-glow {
  position: absolute;
  top: -160px;
  right: -100px;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(65px);
  background: rgba(236, 30, 110, 0.24);
}

.egsblog-hero-lines {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  opacity: 0.55;
  pointer-events: none;
}

/* Breadcrumb */

.egsblog-breadcrumb {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 50px;
  font-size: 13px;
  font-weight: 800;
}

.egsblog-breadcrumb a {
  color: #ffffff !important;
  text-decoration: none;
}

.egsblog-breadcrumb a:hover {
  color: #ec1e6e !important;
}

.egsblog-separator {
  color: #77717e !important;
}

.egsblog-current {
  color: #ec1e6e !important;
}

/* Hero layout */

.egsblog-hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(400px, 1fr);
  align-items: center;
  gap: 65px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.egsblog-hero-content {
  margin-top: 50px;
  width: 100%;
  max-width: 610px;
}

.egsblog-eyebrow {
  margin: 0 0 14px !important;
  color: #ff7a2f !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

.egsblog-eyebrow span {
  color: #ec1e6e !important;
  opacity: 1 !important;
  filter: none !important;
}

.egsblog-heading-rule {
  width: 72px;
  height: 4px;
  margin-bottom: 24px;
  border-radius: 10px;
  background:
    linear-gradient(
      90deg,
      #ec1e6e,
      #ff7a2f
    );
}

.egsblog-main-heading {
  margin: 0 0 24px !important;
  color: #ffffff !important;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}

.egsblog-main-heading .egsblog-heading-accent {
  display: inline-block;
  color: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  background:
    linear-gradient(
      90deg,
      #ec1e6e,
      #ff7a2f
    ) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.egsblog-hero-description {
  width: 100%;
  max-width: 540px;
  margin: 0 0 34px !important;
  color: #bab5c3 !important;
  font-size: 16px;
  line-height: 1.75;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Explore button */

.egsblog-explore-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 52px;
  padding: 10px 24px;
  border: 0 !important;
  border-radius: 50px;
  color: #ffffff !important;
  background:
    linear-gradient(
      90deg,
      #ec1e6e 0%,
      #ff426f 48%,
      #ff7a2f 100%
    ) !important;
  box-shadow:
    0 13px 30px rgba(236, 30, 110, 0.34);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  opacity: 1 !important;
  filter: none !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.egsblog-explore-button:hover {
  color: #ffffff !important;
  box-shadow:
    0 17px 38px rgba(236, 30, 110, 0.48);
  transform: translateY(-3px);
}

.egsblog-explore-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  color: #ec1e6e !important;
  background: #ffffff !important;
  font-size: 13px;
}

.egsblog-button-arrow {
  color: #ffffff !important;
  font-size: 18px;
  transition: transform 0.3s ease;
}

.egsblog-explore-button:hover
.egsblog-button-arrow {
  transform: translateX(5px);
}

/* Right-side image */

.egsblog-hero-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 450px;
}

.egsblog-image-glow {
  position: absolute;
  width: 85%;
  height: 75%;
  border-radius: 50%;
  background: #000;
  filter: blur(65px);
  pointer-events: none;
}

.egsblog-hero-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 610px;
  height: auto;
  max-height: 500px;
  object-fit: contain;
  border-radius: 24px;
  opacity: 1 !important;

  animation:
    egsblogImageFloat 5s ease-in-out infinite;
}

.egsblog-image-badge {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  min-width: 175px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  background: rgba(12, 7, 18, 0.86);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
}

.egsblog-image-badge strong {
  color: #ec1e6e !important;
  font-size: 13px;
  letter-spacing: 3px;
  opacity: 1 !important;
}

.egsblog-image-badge span {
  margin-top: 4px;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  opacity: 1 !important;
}

/* Image animation */

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

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

/* Tablet */

@media (max-width: 980px) {
  .egsblog-hero {
    min-height: auto;
    padding-top: 105px;
  }

  .egsblog-hero-inner {
    grid-template-columns: 1fr;
    gap: 45px;
    text-align: center;
  }

  .egsblog-hero-content {
    max-width: 760px;
    margin: 0 auto;
  }

  .egsblog-heading-rule {
    margin-right: auto;
    margin-left: auto;
  }

  .egsblog-hero-description {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .egsblog-breadcrumb {
    justify-content: center;
  }

  .egsblog-hero-image-wrapper {
    min-height: 380px;
  }

  .egsblog-hero-image {
    max-width: 560px;
  }

  .egsblog-image-badge {
    right: 8%;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .egsblog-hero {
    padding: 90px 18px 55px;
  }

  .egsblog-breadcrumb {
    margin-bottom: 38px;
  }

  .egsblog-main-heading {
    font-size: 34px;
    letter-spacing: -0.7px;
  }

  .egsblog-hero-description {
    font-size: 14.5px;
  }

  .egsblog-explore-button {
    width: 100%;
  }

  .egsblog-hero-image-wrapper {
    min-height: 290px;
  }

  .egsblog-hero-image {
    max-height: 310px;
  }

  .egsblog-image-badge {
    right: 0;
    bottom: 5px;
    min-width: 145px;
    padding: 12px 15px;
  }
}

/* =========================================
   BLOG ARTICLES SECTION
========================================= */
/* =========================================
   SECTION 2 — UNIQUE BLOG ARTICLES
========================================= */

.egsblog-articles {
  width: 100%;
  padding: 75px 24px 95px;
  color: #1b1830;
  background:
    radial-gradient(
      circle at 5% 10%,
      rgba(236, 30, 110, 0.07),
      transparent 28%
    ),
    radial-gradient(
      circle at 95% 90%,
      rgba(255, 122, 47, 0.08),
      transparent 30%
    ),
    #fdf1f4;
}

.egsblog-section-header {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 42px;
}

.egsblog-section-heading-wrapper {
  max-width: 650px;
}

.egsblog-section-eyebrow {
  margin: 0 0 10px !important;
  color: #ec1e6e !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

.egsblog-section-heading {
  margin: 0 !important;
  color: #1b1830 !important;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

.egsblog-section-heading span {
  color: #ec1e6e !important;
  opacity: 1 !important;
  filter: none !important;
}

.egsblog-section-rule {
  width: 64px;
  height: 4px;
  margin: 13px 0 17px;
  border-radius: 5px;
  background:
    linear-gradient(
      90deg,
      #ec1e6e,
      #ff7a2f
    );
}

.egsblog-section-description {
  margin: 0 !important;
  color: #6b6b7a !important;
  font-size: 15px;
  line-height: 1.7;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Card list */

.egsblog-article-list {
  display: grid;
  gap: 26px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* Article card */

.egsblog-article-card {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  width: 100%;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid rgba(236, 30, 110, 0.12);
  border-radius: 18px;
  color: #1b1830 !important;
  background: #ffffff !important;
  box-shadow:
    0 8px 25px rgba(35, 12, 45, 0.08);
  opacity: 1 !important;
  filter: none !important;
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.egsblog-article-card:hover {
  border-color: rgba(236, 30, 110, 0.35);
  box-shadow:
    0 20px 42px rgba(236, 30, 110, 0.15);
  transform: translateY(-5px);
}

/* Card visual */

.egsblog-card-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 250px;
  overflow: hidden;
}

.egsblog-card-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(
      rgba(255, 255, 255, 0.055) 1px,
      transparent 1px
    );
  background-size: 20px 20px;
}

.egsblog-visual-ai {
  background:
    radial-gradient(
      circle at 50% 42%,
      #3b122a,
      #0a0610 68%
    );
}

.egsblog-visual-experience {
  background:
    radial-gradient(
      circle at 50% 42%,
      #251440,
      #09060f 68%
    );
}

.egsblog-visual-engineering {
  background:
    radial-gradient(
      circle at 50% 42%,
      #102c3b,
      #08060e 68%
    );
}

.egsblog-visual-ring {
  position: absolute;
  width: 185px;
  height: 185px;
  border: 1px solid rgba(236, 30, 110, 0.42);
  border-radius: 50%;
  box-shadow:
    0 0 40px rgba(236, 30, 110, 0.14);
}

.egsblog-visual-ring::before {
  position: absolute;
  inset: 25px;
  border: 1px dashed rgba(255, 122, 47, 0.34);
  border-radius: 50%;
  content: "";
}

.egsblog-visual-symbol {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 90px;
  height: 90px;
  border: 2px solid #ec1e6e;
  border-radius: 22px;
  color: #ffffff !important;
  background:
    linear-gradient(
      145deg,
      rgba(236, 30, 110, 0.25),
      rgba(10, 7, 16, 0.96)
    );
  box-shadow:
    0 0 34px rgba(236, 30, 110, 0.32);
  font-size: 29px;
  font-weight: 800;
  opacity: 1 !important;
  filter: none !important;
  transition: transform 0.35s ease;
}

.egsblog-article-card:hover
.egsblog-visual-symbol {
  transform: translateY(-5px) rotate(-2deg);
}

/* Card content */

.egsblog-card-content {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 32px;
  color: #1b1830 !important;
  background: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
}

.egsblog-bookmark {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #ded9e2;
  border-radius: 9px;
  color: #948e9c !important;
  background: #ffffff;
  opacity: 1 !important;
  filter: none !important;
}

.egsblog-category {
  margin: 0 48px 10px 0 !important;
  color: #ec1e6e !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.7px;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

.egsblog-card-heading {
  max-width: 92%;
  margin: 0 0 11px !important;
  color: #1b1830 !important;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.32;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}

.egsblog-card-description {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  margin: 0 0 18px !important;
  color: #6b6b7a !important;
  font-size: 14px;
  line-height: 1.7;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.egsblog-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

/* Read More redirect link */

.egsblog-read-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ec1e6e !important;
  background: transparent !important;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  opacity: 1 !important;
  filter: none !important;
}

.egsblog-link-arrow {
  display: inline-block;
  color: #ec1e6e !important;
  font-size: 18px;
  opacity: 1 !important;
  transition: transform 0.3s ease;
}

.egsblog-read-link:hover
.egsblog-link-arrow {
  transform: translateX(6px);
}

.egsblog-published-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b6b7a !important;
  font-size: 13px;
  opacity: 1 !important;
  filter: none !important;
}

.egsblog-calendar-icon {
  color: #948e9c !important;
  font-size: 13px;
  opacity: 1 !important;
}

/* Tablet */

@media (max-width: 820px) {
  .egsblog-article-card {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .egsblog-card-content {
    padding: 27px 25px;
  }
}

/* Mobile */

@media (max-width: 650px) {
  .egsblog-articles {
    padding: 55px 16px 75px;
  }

  .egsblog-section-header {
    margin-bottom: 32px;
  }

  .egsblog-article-card {
    grid-template-columns: 1fr;
  }

  .egsblog-card-visual {
    min-height: 205px;
  }

  .egsblog-card-content {
    padding: 25px 20px;
  }

  .egsblog-card-heading {
    max-width: 90%;
    font-size: 19px;
  }

  .egsblog-card-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ====================================
               Ai-Automation Blog
==================================== */

:host {
  --egsai-pink: #ec1e6e;
  --egsai-orange: #ff7a2f;
  --egsai-dark: #19151f;
  --egsai-gray: #696370;
  display: block;
}

.egsai-page,
.egsai-page * {
  box-sizing: border-box;
}

.egsai-page {
  min-height: 100vh;
  overflow: hidden;
  color: var(--egsai-dark);
  background: #fff8fa;
  font-family: 'poppins', Arial, sans-serif;
}

.egsai-page h1,
.egsai-page h2,
.egsai-page h3,
.egsai-page p {
  margin: 0;
}

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

.egsai-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  padding: 100px 24px 80px;
  background: #000;
}

.egsai-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: #000;
  background-size: 25px 25px;
}

.egsai-hero-glow {
  position: absolute;
  top: -220px;
  right: -160px;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(75px);
  background: #000;
}

.egsai-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

/* Breadcrumb */

.egsai-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 50px;
  font-size: 12px;
  font-weight: 700;
}



/* Hero layout */

.egsai-hero-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(390px, 0.96fr);
  align-items: center;
  gap: 70px;
}

.egsai-hero-content {
  width: 100%;
  max-width: 650px;
}

.egsai-category {
  display: inline-flex;
  margin-bottom: 20px !important;
  padding: 9px 17px;
  border: 1px solid rgba(236, 30, 110, 0.55);
  border-radius: 30px;
  color: #ff5c98 !important;
  background: rgba(236, 30, 110, 0.11);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.1px;
  opacity: 1 !important;
  filter: none !important;
}

.egsai-title {
  margin-bottom: 25px !important;
  color: #ffffff !important;
  font-size: clamp(42px, 4.3vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.7px;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}

.egsai-title span {
  display: inline;
  color: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  background:
    linear-gradient(
      90deg,
      var(--egsai-pink),
      var(--egsai-orange)
    ) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.egsai-summary {
  max-width: 610px;
  margin-bottom: 28px !important;
  color: #bbb5c4 !important;
  font-size: 16px;
  line-height: 1.75;
  opacity: 1 !important;
  filter: none !important;
}

.egsai-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
}

.egsai-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #aaa4b1 !important;
  font-size: 13px;
  font-weight: 600;
  opacity: 1 !important;
}

.egsai-meta-item b {
  color: var(--egsai-pink) !important;
}

.egsai-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #655f6d;
}

/* Right image */

.egsai-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}

.egsai-image-glow {
  position: absolute;
  width: 85%;
  height: 80%;
  border-radius: 50%;
  background: rgba(236, 30, 110, 0.27);
  filter: blur(70px);
}

.egsai-image-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  border: 1px solid rgba(236, 30, 110, 0.38);
  border-radius: 26px;
  background: #0b0711;
  box-shadow:
    0 30px 65px rgba(0, 0, 0, 0.42),
    0 0 45px rgba(236, 30, 110, 0.14);
  animation: egsaiImageFloat 5s ease-in-out infinite;
}

.egsai-image {
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
  opacity: 1 !important;
  filter: none !important;
}

.egsai-image-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 42%,
      rgba(6, 3, 10, 0.92) 100%
    );
}

.egsai-image-caption {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 15px;
  background: rgba(12, 7, 18, 0.8);
  backdrop-filter: blur(12px);
}

.egsai-caption-icon {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsai-pink),
      var(--egsai-orange)
    );
  font-size: 15px;
  font-weight: 800;
}

.egsai-image-caption div {
  display: flex;
  flex-direction: column;
}

.egsai-image-caption strong {
  color: #ffffff !important;
  font-size: 14px;
  opacity: 1 !important;
}

.egsai-image-caption small {
  margin-top: 3px;
  color: #bcb6c2 !important;
  font-size: 11px;
  opacity: 1 !important;
}

.egsai-floating-card {
  position: absolute;
  z-index: 4;
  top: 35px;
  right: -25px;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 215px;
  padding: 14px 16px;
  border: 1px solid rgba(236, 30, 110, 0.3);
  border-radius: 14px;
  background: rgba(16, 9, 22, 0.92);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

.egsai-floating-card > span {
  display: grid;
  flex: 0 0 35px;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsai-pink),
      var(--egsai-orange)
    );
}

.egsai-floating-card div {
  display: flex;
  flex-direction: column;
}

.egsai-floating-card strong {
  color: #ffffff !important;
  font-size: 12px;
}

.egsai-floating-card small {
  margin-top: 2px;
  color: #aaa4b1 !important;
  font-size: 10px;
  line-height: 1.4;
}

/* =========================================
   ARTICLE
========================================= */

.egsai-article {
  padding: 75px 24px 100px;
  background:
    radial-gradient(
      circle at 0% 20%,
      rgba(236, 30, 110, 0.06),
      transparent 25%
    ),
    radial-gradient(
      circle at 100% 85%,
      rgba(255, 122, 47, 0.07),
      transparent 28%
    ),
    #fff8fa;
}

.egsai-article-container {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 58px 65px;
  border: 1px solid rgba(236, 30, 110, 0.1);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 14px 45px rgba(37, 14, 43, 0.08);
}

.egsai-content-section {
  margin-bottom: 48px;
}

.egsai-content-section:last-of-type {
  margin-bottom: 25px;
}

.egsai-content-section h2 {
  position: relative;
  margin-bottom: 19px !important;
  padding-left: 20px;
  color: #1b1721 !important;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  opacity: 1 !important;
  filter: none !important;
}

.egsai-content-section h2::before {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 5px;
  border-radius: 5px;
  content: "";
  background:
    linear-gradient(
      180deg,
      var(--egsai-pink),
      var(--egsai-orange)
    );
}

.egsai-content-section p,
.egsai-introduction {
  margin-bottom: 20px !important;
  color: var(--egsai-gray) !important;
  font-size: 16px;
  line-height: 1.9;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

.egsai-introduction {
  color: #37303e !important;
  font-size: 18px !important;
  font-weight: 600;
}

/* Highlight */

.egsai-highlight {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  margin: 10px 0 50px;
  padding: 26px 28px;
  border: 1px solid rgba(236, 30, 110, 0.15);
  border-left: 5px solid var(--egsai-pink);
  border-radius: 0 16px 16px 0;
  background:
    linear-gradient(
      90deg,
      rgba(236, 30, 110, 0.09),
      rgba(255, 122, 47, 0.04)
    );
}

.egsai-highlight-icon {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsai-pink),
      var(--egsai-orange)
    );
}

.egsai-highlight p {
  color: #302937 !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
}

/* Benefit cards */

.egsai-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 17px;
}

.egsai-benefit-card {
  padding: 23px;
  border: 1px solid rgba(236, 30, 110, 0.12);
  border-radius: 15px;
  background: #fff8fa;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.egsai-benefit-card:hover {
  box-shadow: 0 12px 28px rgba(236, 30, 110, 0.12);
  transform: translateY(-4px);
}

.egsai-benefit-card > span {
  color: var(--egsai-pink) !important;
  font-size: 11px;
  font-weight: 800;
}

.egsai-benefit-card h3 {
  margin: 8px 0 9px !important;
  color: #211b28 !important;
  font-size: 17px;
  font-weight: 800;
}

.egsai-benefit-card p {
  margin: 0 !important;
  color: var(--egsai-gray) !important;
  font-size: 14px;
  line-height: 1.65;
}

/* Feature list */

.egsai-feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.egsai-feature-list li {
  position: relative;
  padding: 16px 17px 16px 43px;
  border: 1px solid rgba(236, 30, 110, 0.1);
  border-radius: 12px;
  color: #514b58 !important;
  background: #fff8fa;
  font-size: 14px;
  line-height: 1.55;
}

.egsai-feature-list li::before {
  position: absolute;
  top: 16px;
  left: 16px;
  color: var(--egsai-pink);
  content: "✓";
  font-weight: 800;
}

/* Process */

.egsai-process {
  display: grid;
  gap: 16px;
}

.egsai-process-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 17px;
  padding: 20px;
  border: 1px solid rgba(236, 30, 110, 0.1);
  border-radius: 14px;
  background: #fffafb;
}

.egsai-process-item > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsai-pink),
      var(--egsai-orange)
    );
  font-size: 12px;
  font-weight: 800;
}

.egsai-process-item h3 {
  margin-bottom: 6px !important;
  color: #211b28 !important;
  font-size: 17px;
  font-weight: 800;
}

.egsai-process-item p {
  margin: 0 !important;
  color: var(--egsai-gray) !important;
  font-size: 14px;
  line-height: 1.65;
}



/* CTA */

.egsai-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 55px;
  padding: 34px 36px;
  border-radius: 19px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(236, 30, 110, 0.25),
      transparent 38%
    ),
    #0b0711;
}

.egsai-cta p {
  margin-bottom: 7px !important;
  color: #ff629b !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.egsai-cta h2 {
  margin-bottom: 8px !important;
  color: #ffffff !important;
  font-size: 25px;
  font-weight: 800;
}

.egsai-cta div > span {
  color: #aaa4b1 !important;
  font-size: 13px;
  line-height: 1.6;
}

.egsai-cta-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 15px 23px;
  border-radius: 35px;
  color: #ffffff !important;
  background:
    linear-gradient(
      90deg,
      var(--egsai-pink),
      var(--egsai-orange)
    );
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.egsai-cta-button b {
  color: #ffffff !important;
  font-size: 17px;
  transition: transform 0.3s ease;
}

.egsai-cta-button:hover b {
  transform: translateX(5px);
}

/* Back link */

.egsai-back-link {
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid #eee8f0;
}

.egsai-back-link a {
  color: var(--egsai-pink) !important;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

/* Animation */

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

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

/* Tablet */

@media (max-width: 950px) {
  .egsai-hero-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .egsai-hero-content {
    max-width: 760px;
    margin: 0 auto;
  }

  .egsai-summary {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .egsai-meta {
    justify-content: center;
  }

  .egsai-image-frame {
    max-width: 600px;
  }

  .egsai-floating-card {
    right: 5%;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .egsai-hero {
    min-height: auto;
    padding: 95px 16px 60px;
  }

  .egsai-breadcrumb {
    justify-content: center;
    margin-bottom: 35px;
  }

  .egsai-title {
    font-size: 36px;
    letter-spacing: -0.8px;
  }

  .egsai-summary {
    font-size: 15px;
  }

  .egsai-image-wrapper {
    min-height: 330px;
  }

  .egsai-image {
    height: 310px;
  }

  .egsai-floating-card {
    display: none;
  }

  .egsai-article {
    padding: 40px 14px 65px;
  }

  .egsai-article-container {
    padding: 32px 21px;
    border-radius: 17px;
  }

  .egsai-introduction {
    font-size: 16px !important;
  }

  .egsai-benefit-grid,
  .egsai-feature-list {
    grid-template-columns: 1fr;
  }

  .egsai-highlight {
    flex-direction: column;
    padding: 22px;
  }

  .egsai-process-item {
    grid-template-columns: 42px 1fr;
    padding: 17px;
  }

  .egsai-process-item > span {
    width: 42px;
    height: 42px;
  }

  .egsai-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 27px 22px;
  }

  .egsai-cta-button {
    justify-content: center;
    width: 100%;
  }
}

.egsai-title {
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

.egsai-title span {
  display: inline-block;
  color: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;

  background: linear-gradient(
    90deg,
    #ec1e6e 0%,
    #ff426f 45%,
    #ff7a2f 100%
  ) !important;

  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* =========================================
   SECTION 2 — FORCE TEXT COLOR FIX
========================================= */

/* Main article background */

.egsai-page .egsai-article {
  color: #211b28 !important;
  background: #fff8fa !important;
}

.egsai-page .egsai-article-container {
  color: #211b28 !important;
  background: #ffffff !important;
}

/* All normal paragraphs and generated spans */

.egsai-page
.egsai-article-container
.egsai-content-section p,
.egsai-page
.egsai-article-container
.egsai-content-section p span,
.egsai-page
.egsai-article-container
.egsai-content-section p strong,
.egsai-page
.egsai-article-container
.egsai-content-section p div {
  color: #5f5967 !important;
  -webkit-text-fill-color: #5f5967 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  transform: none !important;
}

/* First introduction paragraph */

.egsai-page
.egsai-article-container
p.egsai-introduction,
.egsai-page
.egsai-article-container
p.egsai-introduction span,
.egsai-page
.egsai-article-container
p.egsai-introduction strong {
  color: #27212e !important;
  -webkit-text-fill-color: #27212e !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.8 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

/* Section headings and generated spans */

.egsai-page
.egsai-article-container
.egsai-content-section h2,
.egsai-page
.egsai-article-container
.egsai-content-section h2 span {
  color: #18121f !important;
  -webkit-text-fill-color: #18121f !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

/* Highlight content */

.egsai-page
.egsai-article-container
.egsai-highlight p,
.egsai-page
.egsai-article-container
.egsai-highlight p span {
  color: #21192a !important;
  -webkit-text-fill-color: #21192a !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Benefit headings */

.egsai-page
.egsai-benefit-card h3,
.egsai-page
.egsai-benefit-card h3 span,
.egsai-page
.egsai-process-item h3,
.egsai-page
.egsai-process-item h3 span {
  color: #211a28 !important;
  -webkit-text-fill-color: #211a28 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Benefit and process paragraphs */

.egsai-page
.egsai-benefit-card p,
.egsai-page
.egsai-benefit-card p span,
.egsai-page
.egsai-process-item p,
.egsai-page
.egsai-process-item p span {
  color: #625c69 !important;
  -webkit-text-fill-color: #625c69 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Feature list */

.egsai-page
.egsai-feature-list li,
.egsai-page
.egsai-feature-list li span {
  color: #514a59 !important;
  -webkit-text-fill-color: #514a59 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* =========================================
   SECTION 2 — FORCE TEXT COLOR FIX
========================================= */

/* Main article background */

.egsai-page .egsai-article {
  color: #211b28 !important;
  background: #fff8fa !important;
}

.egsai-page .egsai-article-container {
  color: #211b28 !important;
  background: #ffffff !important;
}

/* All normal paragraphs and generated spans */

.egsai-page
.egsai-article-container
.egsai-content-section p,
.egsai-page
.egsai-article-container
.egsai-content-section p span,
.egsai-page
.egsai-article-container
.egsai-content-section p strong,
.egsai-page
.egsai-article-container
.egsai-content-section p div {
  color: #5f5967 !important;
  -webkit-text-fill-color: #5f5967 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  transform: none !important;
}

/* First introduction paragraph */

.egsai-page
.egsai-article-container
p.egsai-introduction,
.egsai-page
.egsai-article-container
p.egsai-introduction span,
.egsai-page
.egsai-article-container
p.egsai-introduction strong {
  color: #27212e !important;
  -webkit-text-fill-color: #27212e !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.8 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

/* Section headings and generated spans */

.egsai-page
.egsai-article-container
.egsai-content-section h2,
.egsai-page
.egsai-article-container
.egsai-content-section h2 span {
  color: #18121f !important;
  -webkit-text-fill-color: #18121f !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

/* Highlight content */

.egsai-page
.egsai-article-container
.egsai-highlight p,
.egsai-page
.egsai-article-container
.egsai-highlight p span {
  color: #21192a !important;
  -webkit-text-fill-color: #21192a !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Benefit headings */

.egsai-page
.egsai-benefit-card h3,
.egsai-page
.egsai-benefit-card h3 span,
.egsai-page
.egsai-process-item h3,
.egsai-page
.egsai-process-item h3 span {
  color: #211a28 !important;
  -webkit-text-fill-color: #211a28 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Benefit and process paragraphs */

.egsai-page
.egsai-benefit-card p,
.egsai-page
.egsai-benefit-card p span,
.egsai-page
.egsai-process-item p,
.egsai-page
.egsai-process-item p span {
  color: #625c69 !important;
  -webkit-text-fill-color: #625c69 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Feature list */

.egsai-page
.egsai-feature-list li,
.egsai-page
.egsai-feature-list li span {
  color: #514a59 !important;
  -webkit-text-fill-color: #514a59 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
}

/* ===========================================
     Experience - Design (BloG) 
=========================================== */

:host {
  --egsexp-pink: #ec1e6e;
  --egsexp-orange: #ff7a2f;
  --egsexp-dark: #19151f;
  --egsexp-gray: #625c69;
  display: block;
}

.egsexp-page,
.egsexp-page * {
  box-sizing: border-box;
}

.egsexp-page {
  min-height: 100vh;
  overflow: hidden;
  color: var(--egsexp-dark);
  background: #fff8fa;
  font-family: "Segoe UI", Arial, sans-serif;
}

.egsexp-page h1,
.egsexp-page h2,
.egsexp-page h3,
.egsexp-page p {
  margin: 0;
}

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

.egsexp-hero {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  padding: 120px 24px 80px;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(236, 30, 110, 0.28),
      transparent 37%
    ),
    radial-gradient(
      circle at 100% 90%,
      rgba(255, 122, 47, 0.15),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #07050d,
      #0e0715 55%,
      #170710
    );
}

.egsexp-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(
      rgba(255, 255, 255, 0.055) 1px,
      transparent 1px
    );
  background-size: 25px 25px;
}

.egsexp-hero-glow {
  position: absolute;
  top: -220px;
  right: -160px;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(75px);
  background: rgba(236, 30, 110, 0.2);
}

.egsexp-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

.egsexp-hero-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(390px, 0.96fr);
  align-items: center;
  gap: 70px;
}

.egsexp-hero-content {
  width: 100%;
  max-width: 650px;
}

.egsexp-category {
  display: inline-flex;
  margin: 0 0 20px !important;
  padding: 9px 17px;
  border: 1px solid rgba(236, 30, 110, 0.55);
  border-radius: 30px;
  color: #ff5c98 !important;
  -webkit-text-fill-color: #ff5c98 !important;
  background: rgba(236, 30, 110, 0.11);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.1px;
  opacity: 1 !important;
  filter: none !important;
}

.egsexp-title {
  margin: 0 0 25px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(42px, 4.3vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.7px;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}

.egsexp-title span {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background:
    linear-gradient(
      90deg,
      var(--egsexp-pink),
      var(--egsexp-orange)
    );
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

.egsexp-summary {
  max-width: 610px;
  margin: 0 0 28px !important;
  color: #bbb5c4 !important;
  -webkit-text-fill-color: #bbb5c4 !important;
  font-size: 16px;
  line-height: 1.75;
  opacity: 1 !important;
  filter: none !important;
}

.egsexp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
}

.egsexp-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #aaa4b1 !important;
  -webkit-text-fill-color: #aaa4b1 !important;
  font-size: 13px;
  font-weight: 600;
  opacity: 1 !important;
}

.egsexp-meta-item b {
  color: var(--egsexp-pink) !important;
  -webkit-text-fill-color: var(--egsexp-pink) !important;
}

.egsexp-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #655f6d;
}

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

.egsexp-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}

.egsexp-image-glow {
  position: absolute;
  width: 85%;
  height: 80%;
  border-radius: 50%;
  background: rgba(236, 30, 110, 0.27);
  filter: blur(70px);
}

.egsexp-image-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  height: 440px;
  overflow: hidden;
  border: 1px solid rgba(236, 30, 110, 0.38);
  border-radius: 26px;
  background: #0b0711;
  box-shadow:
    0 30px 65px rgba(0, 0, 0, 0.42),
    0 0 45px rgba(236, 30, 110, 0.14);
  animation: egsexpImageFloat 5s ease-in-out infinite;
}

.egsexp-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.egsexp-image-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 42%,
      rgba(6, 3, 10, 0.92)
    );
}

.egsexp-image-caption {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 15px;
  background: rgba(12, 7, 18, 0.82);
  backdrop-filter: blur(12px);
}

.egsexp-caption-icon {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsexp-pink),
      var(--egsexp-orange)
    );
  font-size: 15px;
  font-weight: 800;
}

.egsexp-image-caption div {
  display: flex;
  flex-direction: column;
}

.egsexp-image-caption strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px;
  opacity: 1 !important;
}

.egsexp-image-caption small {
  margin-top: 3px;
  color: #bcb6c2 !important;
  -webkit-text-fill-color: #bcb6c2 !important;
  font-size: 11px;
  opacity: 1 !important;
}

.egsexp-floating-card {
  position: absolute;
  z-index: 4;
  top: 35px;
  right: -25px;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 220px;
  padding: 14px 16px;
  border: 1px solid rgba(236, 30, 110, 0.3);
  border-radius: 14px;
  background: rgba(16, 9, 22, 0.92);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

.egsexp-floating-card > span {
  display: grid;
  flex: 0 0 35px;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsexp-pink),
      var(--egsexp-orange)
    );
}

.egsexp-floating-card div {
  display: flex;
  flex-direction: column;
}

.egsexp-floating-card strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 12px;
}

.egsexp-floating-card small {
  margin-top: 2px;
  color: #aaa4b1 !important;
  -webkit-text-fill-color: #aaa4b1 !important;
  font-size: 10px;
  line-height: 1.4;
}

/* =========================================
   ARTICLE SECTION
========================================= */

.egsexp-article {
  position: relative;
  padding: 80px 24px 100px;
  background:
    radial-gradient(
      circle at 5% 8%,
      rgba(236, 30, 110, 0.1),
      transparent 25%
    ),
    radial-gradient(
      circle at 95% 90%,
      rgba(255, 122, 47, 0.09),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #fff7fa,
      #ffffff 48%,
      #fff7fa
    );
}

.egsexp-article::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(
      rgba(236, 30, 110, 0.08) 1px,
      transparent 1px
    );
  background-size: 30px 30px;
}

.egsexp-article-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
  padding: 60px 65px;
  border: 1px solid rgba(236, 30, 110, 0.15);
  border-radius: 24px;
  color: #211b28 !important;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fffafb
    );
  box-shadow:
    0 25px 70px rgba(54, 16, 48, 0.12);
}

.egsexp-article-container::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  content: "";
  background:
    linear-gradient(
      90deg,
      var(--egsexp-pink),
      #ff426f,
      var(--egsexp-orange)
    );
}

/* Content sections */

.egsexp-content-section {
  position: relative;
  margin-bottom: 50px;
  padding-bottom: 48px;
}

.egsexp-content-section:last-of-type {
  margin-bottom: 20px;
  padding-bottom: 0;
}

.egsexp-content-section:not(:last-of-type)::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(236, 30, 110, 0.25),
      rgba(255, 122, 47, 0.2),
      transparent
    );
}

/* First intro box */

.egsexp-content-section:first-child {
  padding: 30px;
  border: 1px solid rgba(236, 30, 110, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(236, 30, 110, 0.07),
      rgba(255, 122, 47, 0.04)
    );
}

.egsexp-content-section:first-child::before {
  display: inline-flex;
  margin-bottom: 17px;
  padding: 7px 13px;
  border-radius: 25px;
  color: var(--egsexp-pink);
  content: "✦  KEY INSIGHT";
  background: rgba(236, 30, 110, 0.1);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

/* Paragraph color */

.egsexp-page
.egsexp-content-section p,
.egsexp-page
.egsexp-content-section p span,
.egsexp-page
.egsexp-content-section p strong {
  margin: 0 0 20px !important;
  color: var(--egsexp-gray) !important;
  -webkit-text-fill-color: var(--egsexp-gray) !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

/* Introduction paragraph */

.egsexp-page
p.egsexp-introduction,
.egsexp-page
p.egsexp-introduction span {
  color: #28212e !important;
  -webkit-text-fill-color: #28212e !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.8 !important;
}

/* Headings */

.egsexp-content-section h2 {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0 0 22px !important;
  padding-left: 65px;
  color: #18121f !important;
  -webkit-text-fill-color: #18121f !important;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}

.egsexp-content-section h2::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #ffffff;
  content: "✦";
  background:
    linear-gradient(
      135deg,
      var(--egsexp-pink),
      var(--egsexp-orange)
    );
  box-shadow:
    0 9px 22px rgba(236, 30, 110, 0.25);
  font-size: 15px;
}

/* Highlight */

.egsexp-highlight {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  margin: 0 0 50px;
  padding: 27px 29px;
  border: 1px solid rgba(236, 30, 110, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(
      120deg,
      rgba(236, 30, 110, 0.11),
      rgba(255, 122, 47, 0.07)
    );
  box-shadow:
    0 14px 30px rgba(236, 30, 110, 0.09);
}

.egsexp-highlight-icon {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsexp-pink),
      var(--egsexp-orange)
    );
}

.egsexp-page
.egsexp-highlight p {
  margin: 0 !important;
  color: #21192a !important;
  -webkit-text-fill-color: #21192a !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  opacity: 1 !important;
  filter: none !important;
}

/* Benefit cards */

.egsexp-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.egsexp-benefit-card {
  min-height: 190px;
  padding: 24px;
  border: 1px solid rgba(236, 30, 110, 0.15);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fff7fa
    );
  box-shadow:
    0 10px 28px rgba(42, 13, 38, 0.07);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.egsexp-benefit-card:hover {
  box-shadow:
    0 17px 34px rgba(236, 30, 110, 0.14);
  transform: translateY(-5px);
}

.egsexp-benefit-card > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsexp-pink),
      var(--egsexp-orange)
    );
  font-size: 11px;
  font-weight: 800;
}

.egsexp-benefit-card h3 {
  margin: 14px 0 9px !important;
  color: #211a28 !important;
  -webkit-text-fill-color: #211a28 !important;
  font-size: 18px;
  font-weight: 800;
  opacity: 1 !important;
  filter: none !important;
}

.egsexp-benefit-card p {
  margin: 0 !important;
  color: var(--egsexp-gray) !important;
  -webkit-text-fill-color: var(--egsexp-gray) !important;
  font-size: 14px;
  line-height: 1.7;
  opacity: 1 !important;
  filter: none !important;
}

/* Feature list */

.egsexp-feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.egsexp-feature-list li {
  position: relative;
  min-height: 68px;
  padding: 20px 18px 20px 54px;
  border: 1px solid rgba(236, 30, 110, 0.14);
  border-radius: 13px;
  color: #514a59 !important;
  -webkit-text-fill-color: #514a59 !important;
  background: #ffffff;
  font-size: 14px;
  line-height: 1.55;
  opacity: 1 !important;
  filter: none !important;
}

.egsexp-feature-list li::before {
  position: absolute;
  top: 19px;
  left: 17px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #ffffff;
  content: "✓";
  background:
    linear-gradient(
      135deg,
      var(--egsexp-pink),
      var(--egsexp-orange)
    );
  font-size: 11px;
  font-weight: 800;
}

/* Process */

.egsexp-process {
  display: grid;
  gap: 16px;
}

.egsexp-process-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 20px;
  padding: 22px;
  border: 1px solid rgba(236, 30, 110, 0.14);
  border-radius: 15px;
  background: #ffffff;
  box-shadow:
    0 8px 24px rgba(42, 13, 38, 0.06);
}

.egsexp-process-item > span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsexp-pink),
      var(--egsexp-orange)
    );
  font-size: 11px;
  font-weight: 800;
}

.egsexp-process-item h3 {
  margin: 2px 0 7px !important;
  color: #211a28 !important;
  -webkit-text-fill-color: #211a28 !important;
  font-size: 18px;
  font-weight: 800;
  opacity: 1 !important;
  filter: none !important;
}

.egsexp-process-item p {
  margin: 0 !important;
  color: var(--egsexp-gray) !important;
  -webkit-text-fill-color: var(--egsexp-gray) !important;
  font-size: 14px;
  line-height: 1.65;
  opacity: 1 !important;
  filter: none !important;
}

/* CTA */

.egsexp-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 190px;
  margin-top: 55px;
  padding: 38px;
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(236, 30, 110, 0.32),
      transparent 38%
    ),
    #0b0711;
  box-shadow:
    0 20px 45px rgba(22, 6, 20, 0.24);
}

.egsexp-cta p {
  margin: 0 0 7px !important;
  color: #ff629b !important;
  -webkit-text-fill-color: #ff629b !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  opacity: 1 !important;
}

.egsexp-cta h2 {
  margin: 0 0 8px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 26px;
  font-weight: 800;
  opacity: 1 !important;
}

.egsexp-cta div > span {
  color: #aaa4b1 !important;
  -webkit-text-fill-color: #aaa4b1 !important;
  font-size: 13px;
  line-height: 1.6;
  opacity: 1 !important;
}

.egsexp-cta-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 23px;
  border-radius: 35px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      90deg,
      var(--egsexp-pink),
      var(--egsexp-orange)
    );
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.egsexp-cta-button b {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 17px;
}

/* Back link */

.egsexp-back-link {
  margin-top: 42px;
  padding-top: 27px;
  border-top: 1px solid #eee8f0;
}

.egsexp-back-link a {
  color: var(--egsexp-pink) !important;
  -webkit-text-fill-color: var(--egsexp-pink) !important;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  opacity: 1 !important;
}

/* Animation */

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

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

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

@media (max-width: 950px) {
  .egsexp-hero-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .egsexp-hero-content {
    max-width: 760px;
    margin: 0 auto;
  }

  .egsexp-summary {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .egsexp-meta {
    justify-content: center;
  }

  .egsexp-image-frame {
    max-width: 600px;
  }

  .egsexp-floating-card {
    right: 5%;
  }
}

@media (max-width: 760px) {
  .egsexp-article {
    padding: 55px 18px 80px;
  }

  .egsexp-article-container {
    padding: 45px 35px;
  }

  .egsexp-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .egsexp-hero {
    min-height: auto;
    padding: 95px 16px 60px;
  }

  .egsexp-title {
    font-size: 36px;
    letter-spacing: -0.8px;
  }

  .egsexp-summary {
    font-size: 15px;
  }

  .egsexp-image-wrapper {
    min-height: 330px;
  }

  .egsexp-image-frame {
    height: 310px;
  }

  .egsexp-floating-card {
    display: none;
  }

  .egsexp-article {
    padding: 40px 14px 65px;
  }

  .egsexp-article-container {
    padding: 32px 20px;
    border-radius: 18px;
  }

  .egsexp-content-section:first-child {
    padding: 22px;
  }

  .egsexp-content-section h2 {
    display: block;
    min-height: auto;
    padding-top: 60px;
    padding-left: 0;
    font-size: 25px;
  }

  .egsexp-benefit-grid,
  .egsexp-feature-list {
    grid-template-columns: 1fr;
  }

  .egsexp-highlight {
    flex-direction: column;
    padding: 22px;
  }

  .egsexp-process-item {
    grid-template-columns: 46px 1fr;
    gap: 15px;
    padding: 18px;
  }

  .egsexp-process-item > span {
    width: 46px;
    height: 46px;
  }

  .egsexp-cta {
    padding: 28px 22px;
  }

  .egsexp-cta-button {
    width: 100%;
  }
}

/* =========================================
   BENEFIT CARDS BACKGROUND COLORS
========================================= */

.egsexp-benefit-card {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent !important;
}

/* Better Usability */

.egsexp-benefit-card:nth-child(1) {
  border-color: rgba(236, 30, 110, 0.25) !important;
  background:
    linear-gradient(
      135deg,
      #fff0f6 0%,
      #ffe4ef 100%
    ) !important;
}

/* Higher Engagement */

.egsexp-benefit-card:nth-child(2) {
  border-color: rgba(255, 122, 47, 0.28) !important;
  background:
    linear-gradient(
      135deg,
      #fff5ed 0%,
      #ffe8d7 100%
    ) !important;
}

/* Stronger Brand Trust */

.egsexp-benefit-card:nth-child(3) {
  border-color: rgba(124, 92, 255, 0.25) !important;
  background:
    linear-gradient(
      135deg,
      #f5f1ff 0%,
      #eae2ff 100%
    ) !important;
}

/* Improved Conversions */

.egsexp-benefit-card:nth-child(4) {
  border-color: rgba(20, 170, 150, 0.25) !important;
  background:
    linear-gradient(
      135deg,
      #edfffb 0%,
      #d9f8f1 100%
    ) !important;
}

/* Decorative glow */

.egsexp-benefit-card::after {
  position: absolute;
  right: -45px;
  bottom: -45px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  opacity: 0.4;
}

.egsexp-benefit-card:nth-child(1)::after {
  background: rgba(236, 30, 110, 0.22);
}

.egsexp-benefit-card:nth-child(2)::after {
  background: rgba(255, 122, 47, 0.22);
}

.egsexp-benefit-card:nth-child(3)::after {
  background: rgba(124, 92, 255, 0.2);
}

.egsexp-benefit-card:nth-child(4)::after {
  background: rgba(20, 170, 150, 0.2);
}

/* Number color */

.egsexp-benefit-card:nth-child(1) > span {
  background:
    linear-gradient(
      135deg,
      #ec1e6e,
      #ff598f
    ) !important;
}

.egsexp-benefit-card:nth-child(2) > span {
  background:
    linear-gradient(
      135deg,
      #ff7a2f,
      #ffad65
    ) !important;
}

.egsexp-benefit-card:nth-child(3) > span {
  background:
    linear-gradient(
      135deg,
      #7c5cff,
      #a88fff
    ) !important;
}

.egsexp-benefit-card:nth-child(4) > span {
  background:
    linear-gradient(
      135deg,
      #14aa96,
      #4fd2be
    ) !important;
}

/* Keep content above glow */

.egsexp-benefit-card > * {
  position: relative;
  z-index: 2;
}

.egsexp-benefit-card:hover {
  box-shadow:
    0 18px 38px rgba(42, 13, 38, 0.15);
  transform: translateY(-6px);
}

/* =========================================
   EXPERIENCE HERO HEADING COLOR
========================================= */

.egsexp-page
.egsexp-hero
.egsexp-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}

.egsexp-page
.egsexp-hero
.egsexp-title span {
  display: inline;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;

  background: linear-gradient(
    90deg,
    #ec1e6e 0%,
    #ff426f 45%,
    #ff7a2f 100%
  ) !important;

  background-size: 100% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}

/* =======================================
      Application-Engineering-Blog
======================================= */

:host {
  --egsapp-pink: #ec1e6e;
  --egsapp-orange: #ff7a2f;
  --egsapp-dark: #19151f;
  --egsapp-gray: #625c69;
  display: block;
}

.egsapp-page,
.egsapp-page * {
  box-sizing: border-box;
}

.egsapp-page {
  min-height: 100vh;
  overflow: hidden;
  color: var(--egsapp-dark);
  background: #fff8fa;
  font-family: "Segoe UI", Arial, sans-serif;
}

.egsapp-page h1,
.egsapp-page h2,
.egsapp-page h3,
.egsapp-page p {
  margin: 0;
}

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

.egsapp-hero {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  padding: 120px 24px 80px;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(236, 30, 110, 0.28),
      transparent 37%
    ),
    radial-gradient(
      circle at 100% 90%,
      rgba(255, 122, 47, 0.15),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #07050d,
      #0e0715 55%,
      #170710
    );
}

.egsapp-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(
      rgba(255, 255, 255, 0.055) 1px,
      transparent 1px
    );
  background-size: 25px 25px;
}

.egsapp-hero-glow {
  position: absolute;
  top: -220px;
  right: -160px;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(75px);
  background: rgba(236, 30, 110, 0.2);
}

.egsapp-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

.egsapp-hero-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(390px, 0.96fr);
  align-items: center;
  gap: 70px;
}

.egsapp-hero-content {
  width: 100%;
  max-width: 650px;
}

.egsapp-category {
  display: inline-flex;
  margin: 0 0 20px !important;
  padding: 9px 17px;
  border: 1px solid rgba(236, 30, 110, 0.55);
  border-radius: 30px;
  color: #ff5c98 !important;
  -webkit-text-fill-color: #ff5c98 !important;
  background: rgba(236, 30, 110, 0.11);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.1px;
  opacity: 1 !important;
  filter: none !important;
}

.egsapp-title {
  margin: 0 0 25px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(42px, 4.3vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.7px;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}

.egsapp-title span {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background:
    linear-gradient(
      90deg,
      var(--egsapp-pink),
      var(--egsapp-orange)
    );
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

.egsapp-summary {
  max-width: 610px;
  margin: 0 0 28px !important;
  color: #bbb5c4 !important;
  -webkit-text-fill-color: #bbb5c4 !important;
  font-size: 16px;
  line-height: 1.75;
  opacity: 1 !important;
  filter: none !important;
}

.egsapp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
}

.egsapp-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #aaa4b1 !important;
  -webkit-text-fill-color: #aaa4b1 !important;
  font-size: 13px;
  font-weight: 600;
  opacity: 1 !important;
}

.egsapp-meta-item b {
  color: var(--egsapp-pink) !important;
  -webkit-text-fill-color: var(--egsapp-pink) !important;
}

.egsapp-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #655f6d;
}

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

.egsapp-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}

.egsapp-image-glow {
  position: absolute;
  width: 85%;
  height: 80%;
  border-radius: 50%;
  background: rgba(236, 30, 110, 0.27);
  filter: blur(70px);
}

.egsapp-image-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  height: 440px;
  overflow: hidden;
  border: 1px solid rgba(236, 30, 110, 0.38);
  border-radius: 26px;
  background: #0b0711;
  box-shadow:
    0 30px 65px rgba(0, 0, 0, 0.42),
    0 0 45px rgba(236, 30, 110, 0.14);
  animation: egsappImageFloat 5s ease-in-out infinite;
}

.egsapp-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.egsapp-image-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 42%,
      rgba(6, 3, 10, 0.92)
    );
}

.egsapp-image-caption {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 15px;
  background: rgba(12, 7, 18, 0.82);
  backdrop-filter: blur(12px);
}

.egsapp-caption-icon {
  display: grid;
  flex: 0 0 48px;
  place-items: center;
  width: 48px;
  height: 44px;
  border-radius: 12px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsapp-pink),
      var(--egsapp-orange)
    );
  font-size: 13px;
  font-weight: 800;
}

.egsapp-image-caption div {
  display: flex;
  flex-direction: column;
}

.egsapp-image-caption strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px;
  opacity: 1 !important;
}

.egsapp-image-caption small {
  margin-top: 3px;
  color: #bcb6c2 !important;
  -webkit-text-fill-color: #bcb6c2 !important;
  font-size: 11px;
  opacity: 1 !important;
}

.egsapp-floating-card {
  position: absolute;
  z-index: 4;
  top: 35px;
  right: -25px;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 220px;
  padding: 14px 16px;
  border: 1px solid rgba(236, 30, 110, 0.3);
  border-radius: 14px;
  background: rgba(16, 9, 22, 0.92);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

.egsapp-floating-card > span {
  display: grid;
  flex: 0 0 35px;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsapp-pink),
      var(--egsapp-orange)
    );
}

.egsapp-floating-card div {
  display: flex;
  flex-direction: column;
}

.egsapp-floating-card strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 12px;
}

.egsapp-floating-card small {
  margin-top: 2px;
  color: #aaa4b1 !important;
  -webkit-text-fill-color: #aaa4b1 !important;
  font-size: 10px;
  line-height: 1.4;
}

/* =========================================
   ARTICLE SECTION
========================================= */

.egsapp-article {
  position: relative;
  padding: 80px 24px 100px;
  background:
    radial-gradient(
      circle at 5% 8%,
      rgba(236, 30, 110, 0.1),
      transparent 25%
    ),
    radial-gradient(
      circle at 95% 90%,
      rgba(255, 122, 47, 0.09),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #fff7fa,
      #ffffff 48%,
      #fff7fa
    );
}

.egsapp-article::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(
      rgba(236, 30, 110, 0.08) 1px,
      transparent 1px
    );
  background-size: 30px 30px;
}

.egsapp-article-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
  padding: 60px 65px;
  border: 1px solid rgba(236, 30, 110, 0.15);
  border-radius: 24px;
  color: #211b28 !important;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fffafb
    );
  box-shadow:
    0 25px 70px rgba(54, 16, 48, 0.12);
}

.egsapp-article-container::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  content: "";
  background:
    linear-gradient(
      90deg,
      var(--egsapp-pink),
      #ff426f,
      var(--egsapp-orange)
    );
}

/* Content sections */

.egsapp-content-section {
  position: relative;
  margin-bottom: 50px;
  padding-bottom: 48px;
}

.egsapp-content-section:last-of-type {
  margin-bottom: 20px;
  padding-bottom: 0;
}

.egsapp-content-section:not(:last-of-type)::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(236, 30, 110, 0.25),
      rgba(255, 122, 47, 0.2),
      transparent
    );
}

/* Introduction */

.egsapp-content-section:first-child {
  padding: 30px;
  border: 1px solid rgba(236, 30, 110, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(236, 30, 110, 0.07),
      rgba(255, 122, 47, 0.04)
    );
}

.egsapp-content-section:first-child::before {
  display: inline-flex;
  margin-bottom: 17px;
  padding: 7px 13px;
  border-radius: 25px;
  color: var(--egsapp-pink);
  content: "✦  KEY INSIGHT";
  background: rgba(236, 30, 110, 0.1);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.egsapp-page
.egsapp-content-section p,
.egsapp-page
.egsapp-content-section p span,
.egsapp-page
.egsapp-content-section p strong {
  margin: 0 0 20px !important;
  color: var(--egsapp-gray) !important;
  -webkit-text-fill-color: var(--egsapp-gray) !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

.egsapp-page
p.egsapp-introduction,
.egsapp-page
p.egsapp-introduction span {
  color: #28212e !important;
  -webkit-text-fill-color: #28212e !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.8 !important;
}

/* Headings */

.egsapp-content-section h2 {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0 0 22px !important;
  padding-left: 65px;
  color: #18121f !important;
  -webkit-text-fill-color: #18121f !important;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

.egsapp-content-section h2::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #ffffff;
  content: "✦";
  background:
    linear-gradient(
      135deg,
      var(--egsapp-pink),
      var(--egsapp-orange)
    );
  box-shadow:
    0 9px 22px rgba(236, 30, 110, 0.25);
}

/* Highlight */

.egsapp-highlight {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  margin: 0 0 50px;
  padding: 27px 29px;
  border: 1px solid rgba(236, 30, 110, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(
      120deg,
      rgba(236, 30, 110, 0.11),
      rgba(255, 122, 47, 0.07)
    );
  box-shadow:
    0 14px 30px rgba(236, 30, 110, 0.09);
}

.egsapp-highlight-icon {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsapp-pink),
      var(--egsapp-orange)
    );
}

.egsapp-page
.egsapp-highlight p {
  margin: 0 !important;
  color: #21192a !important;
  -webkit-text-fill-color: #21192a !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  opacity: 1 !important;
}

/* Benefit cards */

.egsapp-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.egsapp-benefit-card {
  min-height: 190px;
  padding: 24px;
  border: 1px solid rgba(236, 30, 110, 0.15);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fff7fa
    );
  box-shadow:
    0 10px 28px rgba(42, 13, 38, 0.07);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.egsapp-benefit-card:hover {
  box-shadow:
    0 17px 34px rgba(236, 30, 110, 0.14);
  transform: translateY(-5px);
}

.egsapp-benefit-card > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsapp-pink),
      var(--egsapp-orange)
    );
  font-size: 11px;
  font-weight: 800;
}

.egsapp-benefit-card h3 {
  margin: 14px 0 9px !important;
  color: #211a28 !important;
  -webkit-text-fill-color: #211a28 !important;
  font-size: 18px;
  font-weight: 800;
}

.egsapp-benefit-card p {
  margin: 0 !important;
  color: var(--egsapp-gray) !important;
  -webkit-text-fill-color: var(--egsapp-gray) !important;
  font-size: 14px;
  line-height: 1.7;
  opacity: 1 !important;
}

/* Benefit card colors */

.egsapp-benefit-card:nth-child(1) {
  background:
    linear-gradient(
      135deg,
      #fff0f6,
      #ffe4ef
    );
}

.egsapp-benefit-card:nth-child(2) {
  background:
    linear-gradient(
      135deg,
      #fff5ed,
      #ffe8d7
    );
}

.egsapp-benefit-card:nth-child(3) {
  background:
    linear-gradient(
      135deg,
      #f5f1ff,
      #eae2ff
    );
}

.egsapp-benefit-card:nth-child(4) {
  background:
    linear-gradient(
      135deg,
      #edfffb,
      #d9f8f1
    );
}

/* Feature list */

.egsapp-feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.egsapp-feature-list li {
  position: relative;
  min-height: 68px;
  padding: 20px 18px 20px 54px;
  border: 1px solid rgba(236, 30, 110, 0.14);
  border-radius: 13px;
  color: #514a59 !important;
  -webkit-text-fill-color: #514a59 !important;
  background: #ffffff;
  font-size: 14px;
  line-height: 1.55;
}

.egsapp-feature-list li::before {
  position: absolute;
  top: 19px;
  left: 17px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #ffffff;
  content: "✓";
  background:
    linear-gradient(
      135deg,
      var(--egsapp-pink),
      var(--egsapp-orange)
    );
  font-size: 11px;
  font-weight: 800;
}

/* Process */

.egsapp-process {
  display: grid;
  gap: 16px;
}

.egsapp-process-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 20px;
  padding: 22px;
  border: 1px solid rgba(236, 30, 110, 0.14);
  border-radius: 15px;
  background: #ffffff;
  box-shadow:
    0 8px 24px rgba(42, 13, 38, 0.06);
}

.egsapp-process-item > span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--egsapp-pink),
      var(--egsapp-orange)
    );
  font-size: 11px;
  font-weight: 800;
}

.egsapp-process-item h3 {
  margin: 2px 0 7px !important;
  color: #211a28 !important;
  -webkit-text-fill-color: #211a28 !important;
  font-size: 18px;
  font-weight: 800;
}

.egsapp-process-item p {
  margin: 0 !important;
  color: var(--egsapp-gray) !important;
  -webkit-text-fill-color: var(--egsapp-gray) !important;
  font-size: 14px;
  line-height: 1.65;
}

/* CTA */

.egsapp-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 190px;
  margin-top: 55px;
  padding: 38px;
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(236, 30, 110, 0.32),
      transparent 38%
    ),
    #0b0711;
  box-shadow:
    0 20px 45px rgba(22, 6, 20, 0.24);
}

.egsapp-cta p {
  margin: 0 0 7px !important;
  color: #ff629b !important;
  -webkit-text-fill-color: #ff629b !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.egsapp-cta h2 {
  margin: 0 0 8px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 26px;
  font-weight: 800;
}

.egsapp-cta div > span {
  color: #aaa4b1 !important;
  -webkit-text-fill-color: #aaa4b1 !important;
  font-size: 13px;
  line-height: 1.6;
}

.egsapp-cta-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 23px;
  border-radius: 35px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      90deg,
      var(--egsapp-pink),
      var(--egsapp-orange)
    );
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.egsapp-cta-button b {
  color: #ffffff !important;
  font-size: 17px;
}

/* Back link */

.egsapp-back-link {
  margin-top: 42px;
  padding-top: 27px;
  border-top: 1px solid #eee8f0;
}

.egsapp-back-link a {
  color: var(--egsapp-pink) !important;
  -webkit-text-fill-color: var(--egsapp-pink) !important;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

/* Animation */

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

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

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

@media (max-width: 950px) {
  .egsapp-hero-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .egsapp-hero-content {
    max-width: 760px;
    margin: 0 auto;
  }

  .egsapp-summary {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .egsapp-meta {
    justify-content: center;
  }

  .egsapp-image-frame {
    max-width: 600px;
  }

  .egsapp-floating-card {
    right: 5%;
  }
}

@media (max-width: 760px) {
  .egsapp-article {
    padding: 55px 18px 80px;
  }

  .egsapp-article-container {
    padding: 45px 35px;
  }

  .egsapp-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .egsapp-hero {
    min-height: auto;
    padding: 95px 16px 60px;
  }

  .egsapp-title {
    font-size: 36px;
    letter-spacing: -0.8px;
  }

  .egsapp-summary {
    font-size: 15px;
  }

  .egsapp-image-wrapper {
    min-height: 330px;
  }

  .egsapp-image-frame {
    height: 310px;
  }

  .egsapp-floating-card {
    display: none;
  }

  .egsapp-article {
    padding: 40px 14px 65px;
  }

  .egsapp-article-container {
    padding: 32px 20px;
    border-radius: 18px;
  }

  .egsapp-content-section:first-child {
    padding: 22px;
  }

  .egsapp-content-section h2 {
    display: block;
    min-height: auto;
    padding-top: 60px;
    padding-left: 0;
    font-size: 25px;
  }

  .egsapp-benefit-grid,
  .egsapp-feature-list {
    grid-template-columns: 1fr;
  }

  .egsapp-highlight {
    flex-direction: column;
    padding: 22px;
  }

  .egsapp-process-item {
    grid-template-columns: 46px 1fr;
    gap: 15px;
    padding: 18px;
  }

  .egsapp-process-item > span {
    width: 46px;
    height: 46px;
  }

  .egsapp-cta {
    padding: 28px 22px;
  }

  .egsapp-cta-button {
    width: 100%;
  }
}

/* =========================================
   APPLICATION ENGINEERING HERO HEADING
========================================= */

.egsapp-page
.egsapp-hero
.egsapp-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}

.egsapp-page
.egsapp-hero
.egsapp-title span {
  display: inline;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;

  background: linear-gradient(
    90deg,
    #ec1e6e 0%,
    #ff426f 45%,
    #ff7a2f 100%
  ) !important;

  background-size: 100% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}

/* AI image height reduce */

.egsblog-card-visual.egsblog-visual-ai {
  align-self: center;
  height: 280px !important;
  min-height: 280px !important;
}

.egsblog-ai-image {
  width: 100% !important;
  height: 210px !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 650px) {
  .egsblog-card-visual.egsblog-visual-ai,
  .egsblog-ai-image {
    height: 180px !important;
    min-height: 180px !important;
  }
}

/* =========================================
   WHY CHOOSE US — 6 CARDS ONE ROW
========================================= */

@media (min-width: 1101px) {
  .why-cards-wrap {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: calc(100% - 40px) !important;
    max-width: 1240px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-top: 56px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    flex-wrap: nowrap !important;
  }

  .why-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .why-card-inner {
    width: 100% !important;
  }

  .why-card-body {
    width: 100% !important;
    min-height: 250px !important;
    padding: 56px 13px 25px !important;
  }

  .why-card-body h4 {
    margin-top: 10px;
    font-size: 15px !important;
    margin-bottom: 20px;
  }

  .why-card-body p {
    margin-top: 10px;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}
/* =========================================
   INSIGHTS SECTION — FINAL FIX
   Desktop: 4 cards in one row
   Images: complete image, no cropping
========================================= */

.insights-section {
  width: 100% !important;
  overflow: hidden !important;
  padding-right: 24px !important;
  padding-left: 24px !important;
}

/* Cards wrapper */

.insights-cards-wrap {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 20px !important;

  width: 100% !important;
  max-width: 1280px !important;

  margin-right: auto !important;
  margin-left: auto !important;

  padding: 0 !important;
  overflow: visible !important;

  transform: none !important;
}

/* Outer card border */

.insight-card-border {
  display: flex !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 1px !important;

  overflow: hidden !important;
  border-radius: 20px !important;
}

/* Main card */

.insight-card {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;

  overflow: hidden !important;
  border-radius: 19px !important;
  background: #0d0615 !important;
}

/* =========================================
   IMAGE — NO CUT
========================================= */

.insight-thumb {
  position: relative !important;

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

  flex: 0 0 225px !important;

  width: 100% !important;
  height: 225px !important;
  min-height: 225px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  background: #ffffff !important;
}

/* Complete image visible */

.insight-thumb img {
  position: static !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;

  margin: 0 auto !important;

  object-fit: contain !important;
  object-position: center center !important;

  opacity: 1 !important;
  visibility: visible !important;

  filter: none !important;
  transform: none !important;

  transition: none !important;
}

/* Disable image zoom on hover */

.insight-card:hover .insight-thumb img,
.insight-card-border:hover .insight-thumb img {
  object-fit: contain !important;
  transform: none !important;
  filter: none !important;
}

/* =========================================
   CARD CONTENT
========================================= */

.insight-body {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;

  width: 100% !important;
  min-width: 0 !important;

  padding: 22px !important;

  color: #ffffff !important;
  background: #0d0615 !important;
}

/* Category */

.insight-tag {
  display: inline-flex !important;
  align-items: center !important;

  width: 100% !important;
  min-height: 27px !important;

  margin: 0 0 14px !important;
  padding: 6px 13px !important;

  border-radius: 20px !important;

  color: #ffd400 !important;
  -webkit-text-fill-color: #ffd400 !important;

  background: rgba(255, 196, 0, 0.1) !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;

  opacity: 1 !important;
  filter: none !important;
}

/* Heading */

.insight-body h4 {
  display: block !important;

  width: 100% !important;
  min-height: 50px !important;

  margin: 0 0 13px !important;

  overflow: visible !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;

  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Description */

.insight-body > p {
  display: -webkit-box !important;

  min-height: 52px !important;
  margin: 0 0 17px !important;

  overflow: hidden !important;

  color: #aaa4b1 !important;
  -webkit-text-fill-color: #aaa4b1 !important;

  font-size: 14px !important;
  line-height: 1.6 !important;

  opacity: 1 !important;
  filter: none !important;

  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
}

/* Date and reading time */

.insight-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 10px !important;

  width: 100% !important;

  margin-top: auto !important;
  padding-top: 15px !important;

  border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
}

.insight-meta span {
  color: #8e8797 !important;
  -webkit-text-fill-color: #8e8797 !important;

  font-size: 11px !important;

  opacity: 1 !important;
  filter: none !important;
}

/* Read more button */

.insight-read-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;

  width: fit-content !important;

  margin-top: 17px !important;
  padding: 0 !important;

  border: 0 !important;

  color: #ff70af !important;
  -webkit-text-fill-color: #ff70af !important;

  background: transparent !important;

  font: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;

  opacity: 1 !important;
  cursor: pointer !important;
}

.insight-read-more span {
  color: #ff70af !important;
  -webkit-text-fill-color: #ff70af !important;
}

.insight-read-more svg {
  width: 16px !important;
  height: 16px !important;

  color: #ff70af !important;
  stroke: #ff70af !important;

  transition: transform 0.3s ease !important;
}

.insight-read-more:hover svg {
  transform: translateX(5px) !important;
}

/* =========================================
   TABLET — 2 CARDS
========================================= */

@media (min-width: 651px) and (max-width: 1000px) {
  .insights-section {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .insights-cards-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;

    max-width: 780px !important;
  }

  .insight-thumb {
    flex-basis: 230px !important;

    height: 230px !important;
    min-height: 230px !important;
  }
}

/* =========================================
   MOBILE — 1 CARD
========================================= */

@media (max-width: 650px) {
  .insights-section {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .insights-cards-wrap {
    grid-template-columns: 1fr !important;
    gap: 22px !important;

    width: 100% !important;
    max-width: 390px !important;
  }

  .insight-card-border {
    width: 100% !important;
  }

  .insight-thumb {
    flex-basis: 215px !important;

    width: 100% !important;
    height: 215px !important;
    min-height: 215px !important;
  }

  .insight-thumb img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  .insight-body {
    padding: 20px !important;
  }

  .insight-body h4 {
    min-height: auto !important;
    font-size: 18px !important;
  }
}

/* =========================================
   INSIGHT IMAGE — NO CUT, NO WHITE GAP
========================================= */

.insight-thumb {
  display: block !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  background: transparent !important;

  flex: none !important;
}

.insight-thumb img {
  position: static !important;

  display: block !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: initial !important;
  object-position: center !important;

  opacity: 1 !important;
  visibility: visible !important;

  filter: none !important;
  transform: none !important;
}

/* Hover zoom disable */

.insight-card:hover
.insight-thumb img,
.insight-card-border:hover
.insight-thumb img {
  width: 100% !important;
  height: auto !important;
  transform: none !important;
}

/* Tablet and mobile overrides */

@media (max-width: 1000px) {
  .insight-thumb {
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
  }

  .insight-thumb img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: initial !important;
  }
}

a.insights-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

a.insights-btn span {
  pointer-events: none;
}

.insights-btn-wrap {
  position: relative !important;
  z-index: 999 !important;
  pointer-events: auto !important;
}

.insights-btn {
  position: relative !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.insights-btn span,
.insights-btn svg {
  pointer-events: none !important;
}

.insights-shine-sweep,
.insights-stars,
.insights-blob {
  pointer-events: none !important;
}

/* =====================================
             Gallery
===================================== */

/* =========================================
   EGS GALLERY PAGE
========================================= */

.egsgallery-page {
  --egsgallery-pink: #ec176c;
  --egsgallery-orange: #ff762e;
  --egsgallery-dark: #030303;
  --egsgallery-text: #211a25;

  width: 100%;
  overflow: hidden;
  font-family: inherit;
}

.egsgallery-page,
.egsgallery-page * {
  box-sizing: border-box;
}

.egsgallery-container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

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

.egsgallery-hero {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 680px;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 76% 75%,
      rgba(255, 118, 46, 0.11),
      transparent 30%
    ),
    linear-gradient(
      110deg,
      #020203 42%,
      #0b090a 100%
    );
}

/* No background dots */
.egsgallery-hero::before {
  display: none;
}

/* Soft neutral light */
.egsgallery-hero::after {
  content: "";
  position: absolute;
  right: -150px;
  bottom: -230px;
  width: 650px;
  height: 450px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  filter: blur(100px);
  pointer-events: none;
}

.egsgallery-hero-glow {
  display: none;
}

.egsgallery-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: center;
  gap: 20px;
  min-height: 680px;
}

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

.egsgallery-hero-content {
  position: relative;
  z-index: 3;
  padding: 105px 0 75px;
}

.egsgallery-breadcrumb {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 30px;
  color: #bcb5bc;
  font-size: 14px;
  font-weight: 700;
}

.egsgallery-breadcrumb a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.25s ease;
}

.egsgallery-breadcrumb a:hover {
  color: var(--egsgallery-orange);
}

.egsgallery-breadcrumb span {
  color: #8d858d;
}

.egsgallery-breadcrumb strong {
  color: var(--egsgallery-pink);
}

.egsgallery-hero h1 {
  margin: 0 0 25px;
  color: #ffffff;
  font-size: clamp(58px, 6vw, 86px);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -4px;
  white-space: nowrap;
}

.egsgallery-hero h1 span {
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--egsgallery-pink),
    #ff3f81,
    var(--egsgallery-orange)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.egsgallery-hero p {
  max-width: 540px;
  margin: 0;
  color: #d7d1d6;
  font-size: 18px;
  line-height: 1.75;
}

.egsgallery-title-line {
  width: 100px;
  height: 4px;
  margin-top: 29px;
  border-radius: 20px;
  background: linear-gradient(
    90deg,
    var(--egsgallery-pink),
    var(--egsgallery-orange)
  );
}

/* =========================================
   HERO CAMERA IMAGE
========================================= */

.egsgallery-hero-image {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 420px;
  overflow: visible;
}

/* No pink glow behind image */
.egsgallery-hero-image::before {
  display: none;
}

.egsgallery-hero-image img {
  position: relative;
  z-index: 2;
  display: block;
  width: 112%;
  height: 100%;
  max-width: none;
  margin: 0 -7% 0 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(
    0 30px 40px rgba(0, 0, 0, 0.78)
  );
}

/* =========================================
   GALLERY SECTION
========================================= */

.egsgallery-section {
  position: relative;
  padding: 90px 0 70px;
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 118, 46, 0.055),
      transparent 25%
    ),
    #fff9f7;
}

.egsgallery-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}

.egsgallery-section-head > div > span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--egsgallery-pink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.2px;
}

.egsgallery-section-head h2 {
  margin: 0;
  color: var(--egsgallery-text);
  font-size: clamp(36px, 5vw, 55px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.5px;
}

.egsgallery-section-head p {
  max-width: 455px;
  margin: 0;
  color: #000;
  font-size: 18px;
  line-height: 1.7;
}

/* =========================================
   FIVE IMAGE GRID
========================================= */

.egsgallery-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 250px;
  gap: 17px;
}

.egsgallery-card {
  position: relative;
  grid-column: span 2;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border: 0;
  border-radius: 19px;
  background: #120914;
  box-shadow:
    0 15px 40px rgba(41, 20, 34, 0.13);
  cursor: pointer;
  isolation: isolate;
}

/* First image large */
.egsgallery-card.egsgallery-featured {
  grid-column: span 4;
  grid-row: span 2;
}

/* Fourth and fifth images */
.egsgallery-card:nth-child(4),
.egsgallery-card:nth-child(5) {
  grid-column: span 3;
}

.egsgallery-card img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition:
    transform 0.55s ease,
    filter 0.55s ease;
}

.egsgallery-card:hover img {
  transform: scale(1.06);
  filter: saturate(1.08);
}

.egsgallery-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(5, 2, 6, 0.02) 25%,
    rgba(6, 2, 8, 0.22) 55%,
    rgba(6, 2, 8, 0.9) 100%
  );
  transition: background 0.35s ease;
}

.egsgallery-card:hover .egsgallery-card-overlay {
  background: linear-gradient(
    180deg,
    rgba(5, 2, 6, 0.02) 15%,
    rgba(6, 2, 8, 0.15) 48%,
    rgba(6, 2, 8, 0.94) 100%
  );
}

.egsgallery-card-content {
  position: absolute;
  right: 21px;
  bottom: 20px;
  left: 21px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.egsgallery-card-content small {
  color: #ff719f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

.egsgallery-card-content strong {
  max-width: 82%;
  color: #ffffff;
  font-size: 19px;
  font-weight: 750;
  line-height: 1.3;
}

.egsgallery-featured .egsgallery-card-content strong {
  font-size: clamp(22px, 3vw, 32px);
}

.egsgallery-card-arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  font-size: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--egsgallery-pink),
    var(--egsgallery-orange)
  );
  box-shadow: 0 10px 24px rgba(236, 23, 108, 0.3);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.egsgallery-card:hover .egsgallery-card-arrow {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   IMAGE LIGHTBOX
========================================= */

.egsgallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.egsgallery-lightbox.egsgallery-lightbox-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.egsgallery-lightbox-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(3, 1, 5, 0.91);
  backdrop-filter: blur(9px);
  cursor: pointer;
}

.egsgallery-lightbox-dialog {
  position: relative;
  z-index: 2;
  width: min(960px, 100%);
  max-height: calc(100dvh - 44px);
  overflow: hidden;
  color: #ffffff;
  background: #100811;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}

.egsgallery-lightbox-dialog img {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 125px);
  object-fit: contain;
  object-position: center;
  background: #070407;
}

.egsgallery-lightbox-dialog p {
  margin: 0;
  padding: 17px 21px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}

.egsgallery-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  padding: 0;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(5, 2, 7, 0.75);
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}

.egsgallery-lightbox-close:hover {
  background: var(--egsgallery-pink);
  border-color: var(--egsgallery-pink);
}

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

@media (max-width: 900px) {
  .egsgallery-hero {
    min-height: auto;
  }

  .egsgallery-hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: auto;
    padding-top: 55px;
  }

  .egsgallery-hero-content {
    padding: 75px 0 15px;
    text-align: center;
  }

  .egsgallery-breadcrumb {
    justify-content: center;
  }

  .egsgallery-hero h1 {
    white-space: normal;
  }

  .egsgallery-hero p {
    margin-inline: auto;
  }

  .egsgallery-title-line {
    margin-inline: auto;
  }

  .egsgallery-hero-image {
    height: 430px;
  }

  .egsgallery-hero-image img {
    width: 100%;
    margin: 0;
  }

  .egsgallery-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .egsgallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 270px;
  }

  .egsgallery-card,
  .egsgallery-card.egsgallery-featured,
  .egsgallery-card:nth-child(4),
  .egsgallery-card:nth-child(5) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .egsgallery-card.egsgallery-featured {
    grid-column: 1 / -1;
    grid-row: span 2;
  }

  .egsgallery-card-arrow {
    opacity: 1;
    transform: none;
  }
}

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

@media (max-width: 550px) {
  .egsgallery-container {
    width: calc(100% - 28px);
  }

  .egsgallery-hero-grid {
    padding-top: 30px;
  }

  .egsgallery-hero-content {
    padding: 65px 0 5px;
  }

  .egsgallery-breadcrumb {
    margin-bottom: 22px;
    font-size: 12px;
  }

  .egsgallery-hero h1 {
    font-size: 51px;
    line-height: 1;
    letter-spacing: -2px;
  }

  .egsgallery-hero p {
    font-size: 16px;
    line-height: 1.65;
  }

  .egsgallery-hero-image {
    height: 310px;
  }

  .egsgallery-section {
    padding: 68px 0 75px;
  }

  .egsgallery-section-head {
    margin-bottom: 27px;
  }

  .egsgallery-section-head h2 {
    font-size: 37px;
  }

  .egsgallery-section-head p {
    font-size: 15px;
  }

  .egsgallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 255px;
    gap: 14px;
  }

  .egsgallery-card,
  .egsgallery-card.egsgallery-featured,
  .egsgallery-card:nth-child(4),
  .egsgallery-card:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
  }

  .egsgallery-card-content {
    right: 17px;
    bottom: 17px;
    left: 17px;
  }

  .egsgallery-card-content strong,
  .egsgallery-featured .egsgallery-card-content strong {
    font-size: 18px;
  }

  .egsgallery-card-arrow {
    top: 13px;
    right: 13px;
    width: 38px;
    height: 38px;
  }

  .egsgallery-lightbox {
    padding: 10px;
  }

  .egsgallery-lightbox-dialog {
    max-height: calc(100dvh - 20px);
    border-radius: 15px;
  }

  .egsgallery-lightbox-dialog img {
    max-height: calc(100dvh - 95px);
  }
}

/* Remove heading shadow and glow */
.egsgallery-hero h1,
.egsgallery-hero h1 span {
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
  -webkit-filter: none !important;
}

.egsgallery-hero h1 {
  color: #ffffff !important;
}

.egsgallery-hero h1 span {
  color: transparent !important;
  background: linear-gradient(
    90deg,
    #ec176c,
    #ff762e
  ) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ================================================
         News and Events seperate page
=============================================== */

/* =========================================
   NEWS & EVENTS
========================================= */

:host {
  display: block;
}

.egsnews-page {
  --egsnews-pink: #ec176c;
  --egsnews-orange: #ff762e;
  --egsnews-dark: #030303;
  --egsnews-text: #211a25;
  --egsnews-muted: #706873;

  width: 100%;
  margin: 0;
  font-family: inherit;
}

.egsnews-page,
.egsnews-page *,
.egsnews-page *::before,
.egsnews-page *::after {
  box-sizing: border-box;
}

.egsnews-page .egsnews-container {
  width: min(1180px, calc(100% - 80px));
  margin-inline: auto;
}

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

.egsnews-page .egsnews-hero {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 420px;
  margin: 0;
  padding: 145px 0 70px;
  overflow: hidden;
  color: #ffffff;
  background: #030303 !important;
}

/* No dots or background glow */
.egsnews-hero::before,
.egsnews-hero::after {
  display: none !important;
}

.egsnews-page .egsnews-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
}

.egsnews-page .egsnews-hero-content {
  position: relative;
  inset: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Breadcrumb */

.egsnews-page .egsnews-breadcrumb {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 30px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.egsnews-breadcrumb a {
  color: #ffffff;
  text-decoration: none;
}

.egsnews-breadcrumb a:hover {
  color: #ff762e;
}

.egsnews-breadcrumb span[aria-hidden] {
  color: #a99da7;
  font-size: 20px;
}

.egsnews-breadcrumb span[aria-current] {
  color: #ff408b;
}

/* Eyebrow */

.egsnews-page .egsnews-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  color: #bdb3bc;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1.8px;
}

/* Heading */

.egsnews-page .egsnews-hero-title {
  margin: 0 0 24px;
  padding: 0;
  color: #ffffff !important;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -2px;
  white-space: normal;
  text-wrap: balance;
  background: none;
  -webkit-text-fill-color: #ffffff;
  text-shadow: none !important;
  filter: none !important;
}

.egsnews-page .egsnews-hero-title span {
  display: block;
  margin-top: 7px;
  color: #ff408b;
  background: linear-gradient(
    100deg,
    #ec176c 0%,
    #ff408b 45%,
    #ff762e 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  filter: none !important;
}

/* Description */

.egsnews-page .egsnews-hero-description {
  max-width: 530px;
  margin: 0;
  padding: 0;
  color: #cec5cd !important;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.85;
  text-shadow: none;
  -webkit-text-fill-color: currentColor;
}

/* Hero button */

.egsnews-page .egsnews-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  min-height: 52px;
  margin-top: 30px;
  padding: 14px 24px;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  background: linear-gradient(
    100deg,
    var(--egsnews-pink),
    var(--egsnews-orange)
  );
  transition: transform 0.25s ease;
}

.egsnews-hero-button span {
  font-size: 21px;
  line-height: 1;
}

.egsnews-hero-button:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

/* Hero image */

.egsnews-page .egsnews-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 490px;
  margin: 0;
  padding: 0;
}

.egsnews-page .egsnews-hero-image {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  transform: none;
}

/* =========================================
   UPDATES SECTION
========================================= */

.egsnews-page .egsnews-updates {
  margin: 0;
  padding: 35px 0 85px;
  color: var(--egsnews-text);
  background: #fffaf8;
  scroll-margin-top: 115px;
}

/* Filters */

.egsnews-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 48px;
}

.egsnews-filter {
  min-width: 105px;
  min-height: 46px;
  padding: 11px 25px;
  color: var(--egsnews-text);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid #eadfe4;
  border-radius: 30px;
  background: #ffffff;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.egsnews-filter:hover {
  color: var(--egsnews-pink);
  border-color: var(--egsnews-pink);
}

.egsnews-filter.egsnews-filter-active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(
    100deg,
    var(--egsnews-pink),
    var(--egsnews-orange)
  );
}

/* Section heading */

.egsnews-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 18px;
}

.egsnews-section-label {
  color: #bc0e50;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.egsnews-page .egsnews-section-head h2 {
  margin: 8px 0 0;
  color: var(--egsnews-text);
  font-size: clamp(30px, 3.5vw, 43px);
  font-weight: 800;
  line-height: 1.15;
  text-shadow: none;
  -webkit-text-fill-color: currentColor;
}

.egsnews-section-head h2 span {
  color: var(--egsnews-pink);
}

.egsnews-page .egsnews-section-head p {
  max-width: 510px;
  margin: 0;
  color: #000;
  font-size: 15px;
  line-height: 1.75;
}

.egsnews-page .egsnews-result-count {
  margin: 0 0 25px;
  color: #786e77;
  font-size: 13px;
}

/* =========================================
   THREE CARDS
========================================= */

.egsnews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
}

.egsnews-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #eee5e9;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(38, 17, 28, 0.06);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.egsnews-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(38, 17, 28, 0.1);
}

/* Image shown without cropping */

.egsnews-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f6f0f3;
}

.egsnews-card-image img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.egsnews-card-category {
  position: absolute;
  left: 15px;
  bottom: 15px;
  padding: 7px 13px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 20px;
  background: #bc0e50;
}

/* Card content */

.egsnews-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 25px;
}

.egsnews-page .egsnews-card h3 {
  margin: 0 0 15px;
  color: var(--egsnews-text);
  font-size: 21px;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-shadow: none;
  -webkit-text-fill-color: currentColor;
}

.egsnews-page .egsnews-card-summary {
  margin: 0 0 23px;
  color: var(--egsnews-muted);
  font-size: 15px;
  line-height: 1.8;
}

.egsnews-card-details {
  width: 100%;
  margin-bottom: 22px;
  padding-top: 18px;
  border-top: 1px solid #eee4ea;
}

.egsnews-card-details[hidden] {
  display: none !important;
}

.egsnews-page .egsnews-card-details p {
  margin: 0 0 15px;
  color: #625a65;
  font-size: 14px;
  line-height: 1.85;
}

.egsnews-card-details p:last-child {
  margin-bottom: 0;
}

.egsnews-read-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: auto;
  padding: 5px 0;
  color: #bc0e50;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.egsnews-read-more span {
  font-size: 20px;
}

.egsnews-read-more:hover {
  color: #8c083a;
}

/* =========================================
   BOTTOM BANNER
========================================= */

.egsnews-bottom-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 55px;
  padding: 35px 38px;
  border: 1px solid #2f202b;
  border-radius: 20px;
  background: #0c070c;
}

.egsnews-note-label {
  color: #ff8ab8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.egsnews-page .egsnews-bottom-note h2 {
  margin: 9px 0 10px;
  color: #ffffff;
  font-size: clamp(25px, 3vw, 35px);
  line-height: 1.2;
  text-shadow: none;
  -webkit-text-fill-color: currentColor;
}

.egsnews-bottom-note h2 span {
  color: #ff762e;
}

.egsnews-page .egsnews-bottom-note p {
  margin: 0;
  color: #c5b9c4;
  font-size: 14px;
  line-height: 1.7;
}

.egsnews-gallery-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 48px;
  padding: 13px 23px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  border-radius: 30px;
  background: linear-gradient(
    100deg,
    var(--egsnews-pink),
    var(--egsnews-orange)
  );
}

.egsnews-gallery-link:hover {
  color: #ffffff;
}

/* KEYBOARD FOCUS */

.egsnews-page button:focus-visible,
.egsnews-page a:focus-visible {
  outline: 3px solid #ff762e;
  outline-offset: 4px;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {
  .egsnews-page .egsnews-container {
    width: calc(100% - 40px);
  }

  .egsnews-page .egsnews-hero {
    min-height: auto;
    padding: 125px 0 40px;
  }

  .egsnews-page .egsnews-hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .egsnews-page .egsnews-hero-content {
    max-width: 680px;
  }

  .egsnews-page .egsnews-hero-title {
    font-size: clamp(43px, 6.8vw, 60px);
  }

  .egsnews-page .egsnews-hero-description {
    max-width: 600px;
  }

  .egsnews-page .egsnews-hero-visual {
    width: 100%;
    max-width: 600px;
    height: 360px;
    margin-inline: auto;
  }

  .egsnews-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

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

  .egsnews-bottom-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

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

@media (max-width: 580px) {
  .egsnews-page .egsnews-container {
    width: calc(100% - 32px);
  }

  .egsnews-page .egsnews-hero {
    padding: 115px 0 30px;
  }

  .egsnews-page .egsnews-breadcrumb {
    gap: 9px;
    margin-bottom: 24px;
    font-size: 11px;
  }

  .egsnews-page .egsnews-eyebrow {
    margin-bottom: 15px;
    font-size: 10px;
    letter-spacing: 1.4px;
  }

  .egsnews-page .egsnews-hero-title {
    margin-bottom: 20px;
    font-size: clamp(36px, 9vw, 48px);
    line-height: 1.13;
    letter-spacing: -1.3px;
  }

  .egsnews-page .egsnews-hero-description {
    font-size: 16px;
    line-height: 1.75;
  }

  .egsnews-page .egsnews-hero-button {
    min-height: 48px;
    margin-top: 24px;
    padding: 12px 20px;
    font-size: 13px;
  }

  .egsnews-page .egsnews-hero-visual {
    height: 260px;
  }

  .egsnews-page .egsnews-updates {
    padding: 25px 0 55px;
  }

  .egsnews-filters {
    gap: 8px;
    margin-bottom: 35px;
  }

  .egsnews-filter {
    min-width: 80px;
    padding: 10px 17px;
    font-size: 14px;
  }

  .egsnews-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .egsnews-card-body {
    padding: 22px;
  }

  .egsnews-page .egsnews-card h3 {
    font-size: 20px;
  }

  .egsnews-bottom-note {
    margin-top: 35px;
    padding: 27px 23px;
  }

  .egsnews-gallery-link {
    width: 100%;
  }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  .egsnews-card,
  .egsnews-filter,
  .egsnews-hero-button {
    transition: none;
  }

  .egsnews-card:hover,
  .egsnews-hero-button:hover {
    transform: none;
  }
}
.egsnews-page .egsnews-hero-button {
  padding-left: 34px;
  padding-right: 24px;
}

/* Reduce space above breadcrumb */
.egsnews-page .egsnews-hero {
  min-height: auto;
  padding-top: 120px;
  padding-bottom: 45px;
}

.egsnews-page .egsnews-hero-content {
  align-self: start;
  padding-top: 15px;
}

/* Mobile */
@media (max-width: 580px) {
  .egsnews-page .egsnews-hero {
    padding-top: 110px;
  }

  .egsnews-page .egsnews-hero-content {
    padding-top: 0;
  }
}

.egsnews-page .egsnews-grid {
  align-items: start;
}

.egsnews-page .egsnews-card {
  height: auto;
  min-height: 0;
  align-self: start;
}

.cs-section {
  position: relative;
}

.cs-section > .cs-glow,
.cs-section > .aurora,
.cs-section > .cs-sweep,
.cs-section > .spark,
.cs-section > .gloss-orb {
  pointer-events: none;
}

.cs-section .cs-container {
  position: relative;
  z-index: 2;
}

.cs-section .cs-viewall {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
}

#egsCrWrapper {
  scroll-margin-top: 100px;
}

.career-hero .ch-btn {
  cursor: pointer;
  font-family: inherit;
}

.why-choose-section .why-subtext {
  width: 100%;
  max-width: 650px;
  margin: 18px auto 0 !important;
  padding: 0 16px;
  box-sizing: border-box;
  text-align: center !important;
  text-align-last: center !important;
  line-height: 1.6;
}


/* =====================================
   TABLET — GALLERY + NEWS
===================================== */

@media (max-width: 900px) {
  .egsgallery-page .egsgallery-hero {
    min-height: auto;
  }

  .egsgallery-page .egsgallery-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    gap: 24px;
    padding-top: 120px;
  }

  .egsgallery-page .egsgallery-hero-content {
    min-width: 0;
    padding: 0;
    text-align: center;
  }

  .egsgallery-page .egsgallery-breadcrumb {
    position: static;
    flex-wrap: wrap;
    justify-content: center;
  }

  .egsgallery-page .egsgallery-hero h1 {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .egsgallery-page .egsgallery-hero p {
    margin-inline: auto;
    text-align: center !important;
    text-align-last: center !important;
  }

  .egsgallery-page .egsgallery-hero-image {
    width: 100%;
    max-width: 620px;
    height: 360px;
    margin-inline: auto;
  }

  .egsgallery-page .egsgallery-hero-image img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
  }

  .egsgallery-page .egsgallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 250px;
  }

  .egsgallery-page .egsgallery-card,
  .egsgallery-page .egsgallery-card.egsgallery-featured,
  .egsgallery-page .egsgallery-card:nth-child(4),
  .egsgallery-page .egsgallery-card:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
  }

  .egsgallery-page .egsgallery-card.egsgallery-featured {
    grid-column: 1 / -1;
  }

  .egsnews-page .egsnews-hero {
    min-height: auto;
    padding: 120px 0 35px;
  }

  .egsnews-page .egsnews-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
  }

  .egsnews-page .egsnews-hero-content {
    min-width: 0;
    padding: 0;
  }

  .egsnews-page .egsnews-hero-visual {
    height: 340px;
  }
}

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

@media (max-width: 600px) {
  /* Container spacing */
  .egsgallery-page .egsgallery-container,
  .egsnews-page .egsnews-container {
    width: calc(100% - 32px);
    max-width: 100%;
    margin-inline: auto;
  }

  /* Gallery hero */
  .egsgallery-page .egsgallery-hero-grid {
    padding-top: 115px;
    gap: 18px;
  }

  .egsgallery-page .egsgallery-breadcrumb {
    margin-bottom: 22px;
    gap: 10px;
    font-size: 11px;
  }

  .egsgallery-page .egsgallery-hero h1 {
    margin-bottom: 20px;
    font-size: clamp(38px, 10vw, 52px);
    line-height: 1.1;
    letter-spacing: -1.5px;
  }

  .egsgallery-page .egsgallery-hero p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.7;
  }

  .egsgallery-page .egsgallery-title-line {
    margin: 22px auto 0;
  }

  .egsgallery-page .egsgallery-hero-image {
    height: clamp(220px, 65vw, 310px);
  }

  /* Gallery heading */
  .egsgallery-page .egsgallery-section {
    padding: 48px 0;
  }

  .egsgallery-page .egsgallery-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 25px;
  }

  .egsgallery-page .egsgallery-section-head h2 {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.2;
    letter-spacing: -0.8px;
  }

  .egsgallery-page .egsgallery-section-head p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.7;
    text-align: left !important;
    text-align-last: left !important;
  }

  /* Five photos — one column */
  .egsgallery-page .egsgallery-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 16px;
  }

  .egsgallery-page .egsgallery-card,
  .egsgallery-page .egsgallery-card.egsgallery-featured,
  .egsgallery-page .egsgallery-card:nth-child(4),
  .egsgallery-page .egsgallery-card:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
    height: auto;
    min-width: 0;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  .egsgallery-page .egsgallery-card-content {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .egsgallery-page .egsgallery-card-content strong {
    max-width: 100%;
    font-size: 17px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .egsgallery-page .egsgallery-card-arrow {
    width: 44px;
    height: 44px;
    opacity: 1;
    transform: none;
  }

  /* Gallery popup */
  .egsgallery-page .egsgallery-lightbox {
    padding: 12px;
  }

  .egsgallery-page .egsgallery-lightbox-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    border-radius: 15px;
  }

  .egsgallery-page .egsgallery-lightbox-dialog img {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 120px);
    object-fit: contain;
  }

  .egsgallery-page .egsgallery-lightbox-dialog p {
    padding: 16px;
    font-size: 14px;
    overflow-wrap: anywhere;
    text-align: left !important;
    text-align-last: left !important;
  }

  .egsgallery-page .egsgallery-lightbox-close {
    width: 44px;
    height: 44px;
    top: 10px;
    right: 10px;
  }

  /* News hero */
  .egsnews-page .egsnews-hero {
    padding: 115px 0 30px;
  }

  .egsnews-page .egsnews-hero-title {
    font-size: clamp(32px, 8.5vw, 45px);
    line-height: 1.16;
    letter-spacing: -1px;
  }

  .egsnews-page .egsnews-hero-description {
    font-size: 16px;
    line-height: 1.75;
    text-align: left !important;
    text-align-last: left !important;
  }

  .egsnews-page .egsnews-hero-visual {
    height: clamp(210px, 60vw, 300px);
  }

  .egsnews-page .egsnews-hero-button {
    max-width: 100%;
    min-height: 48px;
    padding: 13px 20px;
    font-size: 13px;
    white-space: normal;
  }

  /* News cards */
  .egsnews-page .egsnews-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }

  .egsnews-page .egsnews-card {
    height: auto;
    min-height: 0;
  }

  .egsnews-page .egsnews-card-body {
    padding: 20px;
  }

  .egsnews-page .egsnews-card h3 {
    font-size: 20px;
    line-height: 1.4;
  }

  .egsnews-page .egsnews-card-summary,
  .egsnews-page .egsnews-card-details p,
  .egsnews-page .egsnews-section-head p,
  .egsnews-page .egsnews-bottom-note p {
    text-align: left !important;
    text-align-last: left !important;
  }

  .egsnews-page .egsnews-filters {
    gap: 8px;
  }

  .egsnews-page .egsnews-filter {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
  }

  .egsnews-page .egsnews-bottom-note {
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 20px;
    gap: 22px;
  }

  .egsnews-page .egsnews-gallery-link {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

.testimonials .t-quote {
  text-align: justify !important;
  text-align-last: left !important;
}

#exploreSection {
  scroll-margin-top: 100px;
}

/* Three evenly spaced cards */
.insights-section .insights-cards-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: calc(100% - 48px);
  max-width: 1200px;
  margin: 40px auto 0 !important;
  padding: 0;
  box-sizing: border-box;
  align-items: stretch;
}

.insights-section .insight-card-border {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.insights-section .insight-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Same image area; full image remains visible */
.insights-section .insight-thumb {
  width: 100%;
  height: auto !important;
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #100916;
}

.insights-section .insight-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
}

/* Remove fixed heights and text clipping */
.insights-section .insight-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
  padding: 24px;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
}

.insights-section .insight-body h4 {
  margin: 0;
  height: auto !important;
  min-height: 0 !important;
  font-size: 20px;
  line-height: 1.4;
}

.insights-section .insight-body > p {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  white-space: normal;
  text-overflow: clip;
  font-size: 15px;
  line-height: 1.75;
  color: #c8c0cd;
  text-align: justify !important;
  text-align-last: left !important;

}

/* Keep metadata and buttons aligned at the bottom */
.insights-section .insight-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto !important;
  padding-top: 16px;
}

.insights-section .insight-read-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ff70b0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.insights-section .insight-read-more svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.insights-section .insights-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 900px) {
  .insights-section .insights-cards-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .insights-section .insights-cards-wrap {
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
    gap: 20px;
    margin-top: 28px !important;
  }

  .insights-section .insight-body {
    padding: 20px;
  }
}

.insights-section .insights-cards-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: calc(100% - 64px) !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.insights-section .insight-card-border {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.insights-section .insight-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .insights-section .insights-cards-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .insights-section .insights-cards-wrap {
    grid-template-columns: 1fr !important;
    width: calc(100% - 32px) !important;
    gap: 20px !important;
  }
}