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

:root {
    --color-primary: #84c900;
    --color-primary-strong: #9ae100;
    --color-secondary: #091318;
    --color-accent: #dfe5e8;
    --color-bg: #061116;
    --color-surface: #0d1d24;
    --color-surface-raised: #112b35;
    --color-surface-muted: #0a171d;
    --color-card: #0d1d24;
    --color-text: #edf5f8;
    --color-text-soft: #dfe8eb;
    --color-text-muted: #9aa9b0;
    --color-border: rgba(132, 201, 0, 0.22);
    --color-input: #0d1a20;
    --color-link: #9ae100;
    --color-focus: #9ae100;
    --color-placeholder: #9aa9b0;
    --bs-body-bg: #061116;
    --bs-body-color: #edf5f8;
    --bs-border-color: rgba(132, 201, 0, 0.22);
    --bs-table-color: #edf5f8;
    --bs-table-bg: #0d1d24;
    --bs-modal-bg: #112b35;
    --color-shadow: rgba(2, 8, 11, 0.38);
    --container-width: 1400px;
    --header-height: 80px;
    --header-padding: clamp(20px, 4vw, 65px);
    --radius-sm: 8px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --section-spacing-desktop: 96px;
    --section-spacing-mobile: 64px;
    --font-body: 'Poppins', sans-serif;
    --font-heading: 'Poppins', sans-serif;
    --font-size-body: 16px;
    --font-size-small: 13px;
    --line-height-body: 1.7;
    --line-height-heading: 1.2;
    --h1-size: clamp(29px, 3.1vw, 46px);
    --h2-size: clamp(24px, 2.4vw, 36px);
    --h3-size: clamp(22px, 1.8vw, 30px);
    --h4-size: clamp(18px, 1.3vw, 22px);
    --header-link-size: 12px;
    --header-link-weight: 500;
    --header-dropdown-width: 210px;
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 20px;
    --space-5: 24px;
    --space-6: 28px;
    --space-7: 32px;
    --space-8: 40px;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.18);
    --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.12);
    --transition-base: 0.25s ease;
    --transition-fast: 0.2s ease;
    --breakpoint-tablet: 991px;
    --btn-radius-pill: 999px;
    --btn-shadow: 0 8px 24px rgba(170, 255, 0, 0.2);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    background: var(--color-bg);
    color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--space-4);
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--line-height-heading);
    letter-spacing: -0.04em;
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }

p,
ul,
ol {
    margin: 0 0 var(--space-4);
}

a,
button,
input,
textarea,
select {
    font: inherit;
}

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

.container-shell,
.header-inner,
.section-inner {
    width: min(100%, var(--container-width));
    margin-inline: auto;
}

.section {
    position: relative;
    padding-block: var(--section-spacing-desktop);
}

.section--compact {
    padding-block: calc(var(--section-spacing-desktop) * 0.7);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: var(--color-text);
    font-size: clamp(9px, 0.75vw, 12px);
    font-weight: 600;
    letter-spacing: 1.2px;
    line-height: 1.5;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 25px;
    height: 3px;
    border-radius: 10px;
    background: var(--color-primary);
    flex-shrink: 0;
}

.section-heading {
    margin: 0 0 var(--space-4);
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: var(--h2-size);
    line-height: var(--line-height-heading);
    letter-spacing: -0.05em;
}

.section-subtitle {
    color: var(--color-text-soft);
    font-size: 15px;
    line-height: 1.7;
}

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.btn,
.quote-button,
.btn-services,
.btn-contact {
    --btn-font-size: 12px;
    --btn-padding-x: 22px;
    --btn-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: var(--btn-height);
    padding: 0 var(--btn-padding-x);
    border-radius: var(--btn-radius-pill);
    border: 1px solid transparent;
    text-decoration: none;
    font-size: var(--btn-font-size);
    font-weight: 650;
    line-height: 1;
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.btn-primary,
.btn-services,
.quote-button {
    background: var(--color-primary);
    color: var(--color-secondary);
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(170, 255, 0, 0.18);
}

.btn-secondary,
.btn-contact {
    background: rgba(255, 255, 255, 0.025);
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.48);
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.quote-button:hover,
.btn-services:hover,
.btn-contact:hover {
    transform: translateY(-2px);
}

.btn-primary:hover,
.btn-services:hover,
.quote-button:hover {
    background: var(--color-primary-strong);
    box-shadow: var(--btn-shadow);
}

.btn-secondary:hover,
.btn-contact:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--color-secondary);
}

@media (max-width: 991px) {
    .section {
        padding-block: var(--section-spacing-mobile);
    }
}

/* =========================
   HEADER
========================= */

.site-header {
    width: 100%;
    height: var(--header-height);
    background: rgba(6, 17, 22, 0.78);
    border-bottom: 1px solid rgba(132, 201, 0, 0.12);
    position: sticky;
    top: 0;
    z-index: 9999;
    overflow: visible;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 26px rgba(2, 8, 11, 0.12);
    transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
    background-image: radial-gradient(circle at 70% 50%, rgba(170, 255, 0, 0.04), transparent 35%);
}

.header-inner {
    width: min(100%, var(--container-width));
    height: var(--header-height);
    margin: 0 auto;
    padding: 0 var(--header-padding);
    display: flex;
    align-items: center;
    position: relative;
}

.logo {
    width: 175px;
    height: var(--header-height);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 8px 0;
    position: relative;
}

.logo img {
    width: 150px;
    height: auto;
    max-height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(132, 201, 0, 0.18));
}

.logo svg {
    width: 36px;
    height: 32px;
    flex: 0 0 auto;
    color: var(--color-text);
}

.logo-wordmark {
    display: flex;
    flex-direction: column;
    margin-left: 7px;
    color: var(--color-text);
    line-height: 1.1;
    white-space: nowrap;
}

.logo-wordmark strong {
    font-size: 15px;
    font-weight: 700;
}

.logo-wordmark small {
    margin-top: 3px;
    font-size: 8px;
    font-weight: 500;
}

.main-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 100%;
}

.main-nav > ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 29px);
    margin: 0;
    padding: 0;
}

.main-nav > ul > li {
    position: relative;
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.main-nav a {
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--header-link-size);
    font-weight: var(--header-link-weight);
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color var(--transition-base), transform var(--transition-base);
}

.main-nav > ul > li > a {
    height: var(--header-height);
    display: flex;
    align-items: center;
    position: relative;
}

.main-nav > ul > li > a.active {
    color: var(--color-primary);
}

.main-nav > ul > li > a.active::after,
.main-nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 10px;
    transform: translateX(-50%);
    box-shadow: 0 0 5px rgba(170, 255, 0, 0.7), 0 0 12px rgba(170, 255, 0, 0.35);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-nav > ul > li > a.active::after,
.main-nav > ul > li > a:hover::after {
    width: 100%;
}

.main-nav > ul > li > a:hover {
    color: var(--color-primary);
    transform: translateY(-1px);
}

.main-nav .bi-chevron-down {
    font-size: 8px;
    margin-left: 5px;
    position: relative;
    top: 1px;
}

.has-dropdown {
    position: relative;
}

.dropdown {
    position: absolute;
    top: var(--header-height);
    left: -15px;
    width: var(--header-dropdown-width);
    padding: 8px 0;
    margin: 0;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 30px var(--color-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scaleY(0.92) scaleX(0.98);
    transform-origin: top center;
    transition: all var(--transition-base);
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scaleY(1) scaleX(1);
}

.dropdown li {
    width: 100%;
}

.dropdown li a {
    display: block;
    width: 100%;
    padding: 9px 16px;
    font-size: 11px;
    color: var(--color-text-soft);
}

.dropdown li a:hover {
    background: rgba(170, 255, 0, 0.08);
    color: var(--color-primary);
}

.quote-button {
    height: 33px;
    min-width: 134px;
    margin-left: 28px;
    padding: 0 7px 0 17px;
    border-radius: 20px;
    background: var(--color-primary);
    color: var(--color-bg) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    font-size: 10px !important;
    font-weight: 600 !important;
    transition: transform var(--transition-base), background var(--transition-base);
}

.quote-button:hover {
    background: var(--color-primary-strong);
    transform: translateY(-1px);
}

.quote-arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-arrow i {
    font-size: 11px;
}

.mobile-menu-btn {
    display: none;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-size: 27px;
    cursor: pointer;
}

@media (max-width: 991px) {
    .site-header {
        height: auto;
    }

    .header-inner {
        height: var(--header-height);
        padding: 0 20px;
        justify-content: space-between;
    }

    .logo {
        width: 150px;
    }

    .logo img {
        width: 150px;
    }

    .mobile-menu-btn {
        display: block;
    }

    .main-nav {
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: auto;
        padding: 15px 20px 20px;
        background: rgba(6, 17, 22, 0.92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        display: none;
        flex-direction: column;
        align-items: flex-start;
        border-top: 1px solid var(--color-border);
        box-shadow: 0 18px 30px rgba(2, 8, 11, 0.2);
    }

    .main-nav.show {
        display: flex;
    }

    .main-nav > ul {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .main-nav > ul > li {
        width: 100%;
        height: auto;
    }

    .main-nav > ul > li > a {
        width: 100%;
        height: auto;
        padding: 12px 0;
    }

    .main-nav > ul > li > a.active::after {
        bottom: 5px;
    }

    .dropdown {
        position: static;
        display: none;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
    }

    .has-dropdown:hover .dropdown,
    .has-dropdown:focus-within .dropdown {
        display: block;
    }

    .quote-button {
        margin: 15px 0 0;
        width: 145px;
    }
}

/* =========================================
   PREMIUM HEADER EFFECT
========================================= */

.site-header {
    overflow: visible;
    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(132, 201, 0, 0.08),
            transparent 35%
        ),
        linear-gradient(135deg, rgba(8, 18, 22, 0.98), rgba(3, 14, 18, 0.98));
    border-bottom: 1px solid rgba(132, 201, 0, 0.12);
}


/* =========================================
   NAV LINK ANIMATION
========================================= */

.main-nav > ul > li > a {
    position: relative;
    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


/* Animated line */

.main-nav > ul > li > a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 14px;

    width: 0;
    height: 2px;

    background: #aaff00;

    border-radius: 10px;

    transform: translateX(-50%);

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

    transition:
        width 0.35s cubic-bezier(.4,0,.2,1);
}


/* Hover */

.main-nav > ul > li > a:hover::after {
    width: 100%;
}


/* Active */

.main-nav > ul > li > a.active::after {
    width: 100%;
}


/* =========================================
   MENU HOVER LIFT
========================================= */

.main-nav > ul > li > a:hover {
    color: #aaff00;

    transform: translateY(-1px);
}


/* =========================================
   DROPDOWN PREMIUM ANIMATION
========================================= */

.dropdown {
    transform-origin: top center;

    transform:
        translateY(12px)
        scaleY(.92)
        scaleX(.98);

    opacity: 0;
    visibility: hidden;

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

.has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scaleY(1)
        scaleX(1);
}


/* Dropdown items */

.dropdown li {
    overflow: hidden;
}

.dropdown li a {
    position: relative;

    transform: translateX(-8px);

    opacity: 0;

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

.has-dropdown:hover .dropdown li a {
    transform: translateX(0);
    opacity: 1;
}


/* Individual delay */

.has-dropdown:hover .dropdown li:nth-child(1) a {
    transition-delay: .03s;
}

.has-dropdown:hover .dropdown li:nth-child(2) a {
    transition-delay: .06s;
}

.has-dropdown:hover .dropdown li:nth-child(3) a {
    transition-delay: .09s;
}

.has-dropdown:hover .dropdown li:nth-child(4) a {
    transition-delay: .12s;
}

.has-dropdown:hover .dropdown li:nth-child(5) a {
    transition-delay: .15s;
}


/* =========================================
   DROPDOWN HOVER LINE
========================================= */

.dropdown li a::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 2px;
    height: 100%;

    background: #aaff00;

    transform: scaleY(0);

    transition: transform .25s ease;
}

.dropdown li a:hover::before {
    transform: scaleY(1);
}

.dropdown li a:hover {
    padding-left: 21px;

    background: rgba(170,255,0,.06);
}

.dropdown li a[aria-current="page"] {
    color: var(--color-primary);
}


/* =========================================
   QUOTE BUTTON
========================================= */

.quote-button {
    position: relative;

    overflow: hidden;

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

.quote-button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

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

    transform: skewX(-20deg);

    transition: left .6s ease;
}

.quote-button:hover::before {
    left: 130%;
}

.quote-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 25px rgba(170,255,0,.18);
}


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

.quote-arrow {
    transition:
        transform .3s ease,
        background .3s ease;
}

.quote-button:hover .quote-arrow {
    transform: rotate(-45deg);
}


/* =========================================
   CUSTOM CURSOR
========================================= */

.custom-cursor {
    position: fixed;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #aaff00;

    pointer-events: none;

    z-index: 999999;

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

    box-shadow:
        0 0 8px #aaff00,
        0 0 20px rgba(170,255,0,.6);

    transition:
        width .2s ease,
        height .2s ease;
}


/* Cursor outer ring */

.cursor-ring {
    position: fixed;

    width: 34px;
    height: 34px;

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

    border-radius: 50%;

    pointer-events: none;

    z-index: 999998;

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

    transition:
        width .25s ease,
        height .25s ease,
        border-color .25s ease;
}


/* Cursor hover */

.cursor-hover .custom-cursor {
    width: 16px;
    height: 16px;
}

.cursor-hover .cursor-ring {
    width: 48px;
    height: 48px;

    border-color: #aaff00;
}


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

@media (max-width: 991px) {

    .custom-cursor,
    .cursor-ring {
        display: none;
    }

}


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

.hero-section {
    width: 100%;
    height: 330px;

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(3, 15, 21, 0.98) 0%,
            rgba(3, 15, 21, 0.90) 32%,
            rgba(3, 15, 21, 0.35) 65%,
            rgba(3, 15, 21, 0.10) 100%
        );

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

    border-bottom: 2px solid #aaff00;
}


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

.hero-container {
    width: 100%;
    max-width: 1400px;

    height: 100%;

    margin: 0 auto;

    padding-left: 65px;

    display: flex;
    align-items: center;
}


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

.hero-content {
    width: 48%;

    position: relative;
    z-index: 5;

    margin-top: -3px;
}


/* =========================================
   SMALL TOP LINE
========================================= */

.hero-small-title {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: #ffffff;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: .4px;

    text-transform: uppercase;
}

.small-line {
    width: 21px;
    height: 4px;

    background: #aaff00;

    border-radius: 5px;
}

.hero-small-title strong {
    color: #aaff00;

    font-weight: 600;
}


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

.hero-content h1 {
    margin: 0;

    color: #ffffff;

    font-size: 30px;

    line-height: 1.12;

    font-weight: 700;

    letter-spacing: -0.8px;
}

.hero-content h1 span {
    display: block;

    color: #aaff00;
}


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

.hero-content > p {
    width: 470px;

    margin: 9px 0 14px;

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

    font-size: 10px;

    line-height: 1.55;

    font-weight: 400;
}


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

.hero-buttons {
    display: flex;
    align-items: center;

    gap: 13px;
}


/* Explore button */

.btn-services {
    height: 36px;

    min-width: 162px;

    padding: 0 7px 0 20px;

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

    background: #aaff00;

    color: #071217;

    text-decoration: none;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 600;

    transition: all .3s ease;
}

.btn-services span {
    width: 25px;
    height: 25px;

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

    background: #071217;

    color: #aaff00;

    border-radius: 50%;

    transition: transform .3s ease;
}

.btn-services:hover {
    color: #071217;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(170,255,0,.20);
}

.btn-services:hover span {
    transform: translateX(3px);
}


/* Contact button */

.btn-contact {
    height: 36px;

    min-width: 98px;

    padding: 0 20px;

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

    color: #ffffff;

    border: 1px solid #ffffff;

    border-radius: 20px;

    text-decoration: none;

    font-size: 10px;

    transition: all .3s ease;
}

.btn-contact:hover {
    color: #071217;

    background: #ffffff;
}


/* =========================================
   FEATURES
========================================= */

.hero-features {
    margin-top: 29px;

    display: flex;
    align-items: center;

    gap: 30px;
}


/* Feature */

.feature-item {
    display: flex;
    align-items: center;

    gap: 7px;
}


/* Icon */

.feature-icon {
    width: 23px;
    height: 23px;

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

    color: #aaff00;

    font-size: 17px;
}


/* Text */

.feature-item h4 {
    margin: 0;

    color: #ffffff;

    font-size: 8px;

    font-weight: 500;

    line-height: 1.3;

    white-space: nowrap;
}

.feature-item p {
    margin: 2px 0 0;

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

    font-size: 7px;

    line-height: 1.2;

    white-space: nowrap;
}


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

@media (max-width: 1200px) {

    .hero-container {
        padding-left: 45px;
    }

    .hero-content {
        width: 52%;
    }

    .hero-features {
        gap: 20px;
    }

}


@media (max-width: 991px) {

    .hero-section {
        height: 500px;

        background-position: 60% center;
    }

    .hero-container {
        padding: 40px 25px;
        align-items: flex-start;
    }

    .hero-content {
        width: 100%;
        max-width: 550px;
    }

    .hero-content h1 {
        font-size: 35px;
    }

    .hero-content > p {
        width: 100%;
        max-width: 480px;

        font-size: 12px;
    }

    .hero-features {
        flex-wrap: wrap;

        gap: 18px 25px;
    }

}


@media (max-width: 576px) {

    .hero-section {
        height: 620px;

        background-position: 65% center;
    }

    .hero-container {
        padding: 35px 20px;
    }

    .hero-content h1 {
        font-size: 28px;
    }

    .hero-content > p {
        font-size: 11px;
    }

    .hero-buttons {
        flex-wrap: wrap;
    }

    .hero-features {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 18px;
    }

}

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

.hero-section {
    position: relative;

    width: 100%;
    height: 330px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(105, 170, 0, .12),
            transparent 30%
        ),
        linear-gradient(
            90deg,
            #061116 0%,
            #07151b 55%,
            #061116 100%
        );

    border-bottom: 2px solid #aaff00;
}


.hero-container {
    width: 100%;
    max-width: 1400px;

    height: 100%;

    margin: auto;

    padding: 0 65px;

    display: flex;
    align-items: center;
}


/* =====================================
   LEFT CONTENT
===================================== */

.hero-content {
    width: 50%;

    position: relative;
    z-index: 10;
}


/* =====================================
   RIGHT VISUAL
===================================== */

.hero-visual {
    position: absolute;

    right: 30px;
    top: 0;

    width: 52%;
    height: 100%;

    overflow: hidden;
}


/* =====================================
   GREEN TECH CIRCLES
===================================== */

.tech-circle {
    position: absolute;

    border-radius: 50%;

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

    z-index: 2;
}

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

    right: 220px;
    top: 42px;

    background:
        radial-gradient(
            circle,
            rgba(170,255,0,.35),
            rgba(170,255,0,.08) 50%,
            transparent 70%
        );

    box-shadow:
        0 0 30px rgba(170,255,0,.18);

    animation: pulseCircle 4s ease-in-out infinite;
}

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

    right: 190px;
    top: 10px;

    border-color: rgba(170,255,0,.12);

    animation: rotateCircle 18s linear infinite;
}


@keyframes pulseCircle {

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

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


@keyframes rotateCircle {

    from {
        transform: rotate(0deg);
    }

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


/* =====================================
   FLOATING ICONS
===================================== */

.floating-icon {
    position: absolute;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    color: #aaff00;

    background:
        rgba(6,17,22,.82);

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

    box-shadow:
        0 0 12px rgba(170,255,0,.15),
        inset 0 0 12px rgba(170,255,0,.05);

    backdrop-filter: blur(5px);

    z-index: 20;

    cursor: pointer;

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


/* Icon hover */

.floating-icon:hover {

    color: #061116;

    background: #aaff00;

    transform:
        scale(1.25)
        rotate(8deg);

    box-shadow:
        0 0 12px #aaff00,
        0 0 30px rgba(170,255,0,.55);
}


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

.icon-mail {
    top: 18px;
    right: 255px;

    animation: floatOne 4s ease-in-out infinite;
}

.icon-security {
    top: 72px;
    right: 195px;

    animation: floatTwo 4.5s ease-in-out infinite;
}

.icon-cloud {
    top: 115px;
    right: 300px;

    width: 64px;
    height: 64px;

    font-size: 24px;

    animation: floatThree 4s ease-in-out infinite;
}

.icon-server {
    top: 120px;
    right: 125px;

    animation: floatOne 5s ease-in-out infinite;
}

.icon-code {
    top: 190px;
    right: 225px;

    animation: floatTwo 4.2s ease-in-out infinite;
}


/* =====================================
   FLOAT ANIMATIONS
===================================== */

@keyframes floatOne {

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

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


@keyframes floatTwo {

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

    50% {
        transform: translate(7px,-13px);
    }
}


@keyframes floatThree {

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

    50% {
        transform: translateY(-8px) scale(1.04);
    }
}


/* =====================================
   CONNECTION LINES
===================================== */

.connection-line {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #aaff00,
            transparent
        );

    opacity: .45;

    transform-origin: left center;

    z-index: 3;

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

.line-one {
    width: 90px;

    top: 65px;
    right: 235px;

    transform: rotate(90deg);
}

.line-two {
    width: 100px;

    top: 138px;
    right: 175px;

    transform: rotate(25deg);
}

.line-three {
    width: 90px;

    top: 210px;
    right: 250px;

    transform: rotate(-40deg);
}


@keyframes lineGlow {

    0%,100% {
        opacity: .25;
    }

    50% {
        opacity: .8;
    }
}


/* ==========================================
   PREMIUM HERO — RESPONSIVE MASTER CSS
   JashCode IT / Dark Tech Theme
========================================== */

.hero-section {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: clamp(330px, 32vw, 470px);
    min-height: 330px;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 78% 45%,
            rgba(170, 255, 0, 0.12),
            transparent 36%
        ),
        linear-gradient(
            110deg,
            #061116 0%,
            #091920 55%,
            #061116 100%
        );

    border-bottom: 2px solid #aaff00;
}

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

    width: 100%;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;

    padding: 35px clamp(24px, 5vw, 72px);

    display: flex;
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 10;

    width: 52%;
    max-width: 650px;
    margin: 0;

    flex-shrink: 0;
}

/* Top label */

.hero-small-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;

    margin-bottom: 14px;

    color: #fff;
    font-size: clamp(9px, 0.75vw, 12px);
    font-weight: 600;
    letter-spacing: 1.2px;
    line-height: 1.5;
    text-transform: uppercase;
}

.small-line {
    width: 25px;
    height: 3px;
    flex-shrink: 0;

    background: #aaff00;
    border-radius: 10px;
}

.hero-small-title strong {
    color: #aaff00;
    font-weight: 700;
}

/* Main heading */

.hero-content h1 {
    max-width: 620px;
    margin: 0;

    color: #fff;

    font-size: clamp(29px, 3.1vw, 46px);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -1.2px;

    overflow-wrap: break-word;
}

.hero-content h1 span {
    display: block;
    color: #aaff00;
}

/* Description */

.hero-content > p {
    width: 100%;
    max-width: 490px;

    margin: 16px 0 22px;

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

    font-size: clamp(12px, 0.95vw, 14px);
    font-weight: 400;
    line-height: 1.8;
}

/* Buttons */

.hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-services,
.btn-contact {
    min-height: 44px;
    box-sizing: border-box;

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

    text-decoration: none;
    border-radius: 50px;

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

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.btn-services {
    gap: 16px;
    padding: 6px 7px 6px 20px;

    color: #071217;
    background: #aaff00;
    border: 1px solid #aaff00;
}

.btn-services span {
    width: 30px;
    height: 30px;
    flex-shrink: 0;

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

    color: #aaff00;
    background: #071217;
    border-radius: 50%;

    transition: transform 0.25s ease;
}

.btn-contact {
    padding: 0 23px;

    color: #fff;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.48);
}

.btn-services:hover {
    color: #071217;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(170, 255, 0, 0.2);
}

.btn-services:hover span {
    transform: translateX(3px);
}

.btn-contact:hover {
    color: #071217;
    background: #fff;
    border-color: #fff;
    transform: translateY(-2px);
}

/* Feature highlights */

.hero-features {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 27px;

    margin-top: clamp(22px, 2.5vw, 34px);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 9px;

    min-width: 0;
}

.feature-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

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

    color: #aaff00;
    font-size: 20px;

    background: rgba(170, 255, 0, 0.07);
    border: 1px solid rgba(170, 255, 0, 0.18);
    border-radius: 10px;
}

.feature-item h4 {
    margin: 0;

    color: #fff;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.4;
}

.feature-item p {
    margin: 3px 0 0;

    color: rgba(255, 255, 255, 0.58);
    font-size: 10px;
    line-height: 1.45;
}

/* Right-side visual */

.hero-visual {
    position: absolute;
    z-index: 1;

    top: 0;
    right: 0;

    width: 53%;
    height: 100%;
    overflow: hidden;

    pointer-events: auto;

    background:
        radial-gradient(
            ellipse at 55% 65%,
            rgba(170, 255, 0, 0.075),
            transparent 56%
        );
}

.hero-visual::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(192, 255, 116, .2) .7px, transparent .7px);
    background-size: 24px 24px;
    opacity: .22;
    mask-image: radial-gradient(ellipse at center, #000 12%, transparent 75%);
}

.hero-visual::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, rgba(74, 124, 40, .13), transparent 64%);
}

/* Decorative circles */

.tech-circle {
    position: absolute;
    z-index: 1;

    border: 1px solid rgba(170, 255, 0, 0.3);
    border-radius: 50%;

    pointer-events: none;
}

.circle-one {
    width: clamp(155px, 19vw, 250px);
    aspect-ratio: 1;

    right: clamp(125px, 17vw, 245px);
    top: 50%;
    transform: translateY(-50%);

    background: radial-gradient(
        circle,
        rgba(170, 255, 0, 0.18),
        rgba(170, 255, 0, 0.04) 53%,
        transparent 72%
    );

    box-shadow: 0 0 35px rgba(170, 255, 0, 0.1);

    animation: pulseCircle 4s ease-in-out infinite;
}

.circle-two {
    width: clamp(205px, 24vw, 315px);
    aspect-ratio: 1;

    right: clamp(95px, 14vw, 205px);
    top: 50%;

    border-color: rgba(170, 255, 0, 0.12);

    transform: translateY(-50%);
    animation: rotateCircle 24s linear infinite;
}

.hero-orbit-ring {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: min(91%, 560px);
    aspect-ratio: 2.1 / 1;
    transform: translate(-50%, -50%) rotate(-18deg);
    border: 1px solid rgba(123, 224, 255, .14);
    border-radius: 50%;
    pointer-events: none;
    animation: orbitDrift 16s ease-in-out infinite alternate;
}

.hero-orbit-ring::before,
.hero-orbit-ring::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(170, 255, 0, .12);
    border-radius: 50%;
}

.hero-orbit-ring::before {
    inset: 9px -12px;
    transform: rotate(24deg);
}

.hero-orbit-ring::after {
    inset: -11px 12px;
    border-style: dashed;
    opacity: .55;
    transform: rotate(-29deg);
}

.hero-orbit-ring > span {
    position: absolute;
    top: 10%;
    left: 18%;
    width: 7px;
    height: 7px;
    border: 2px solid #c6ff72;
    border-radius: 50%;
    background: #17251a;
    box-shadow: 0 0 13px rgba(170, 255, 0, .8);
}

.hero-system-status {
    position: absolute;
    z-index: 8;
    top: 3%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 27px;
    padding: 0 11px;
    transform: translateX(-50%);
    border: 1px solid rgba(169, 255, 114, .17);
    border-radius: 20px;
    background: rgba(4, 16, 19, .76);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .16);
    color: rgba(224, 238, 228, .57);
    font: 600 7px/1 'Poppins', sans-serif;
    letter-spacing: .65px;
    white-space: nowrap;
    backdrop-filter: blur(9px);
}

.hero-system-status strong {
    color: #c3f58d;
    font-size: 7px;
    font-weight: 600;
}

.hero-status-pulse {
    position: relative;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #91f85f;
    box-shadow: 0 0 9px rgba(145, 248, 95, .8);
}

.hero-status-pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(145, 248, 95, .55);
    border-radius: inherit;
    animation: statusPing 2s ease-out infinite;
}

/* Live code editor */
.hero-code-stream {
    position: absolute;
    z-index: 7;
    top: 50%;
    left: 50%;
    width: min(78%, 470px);
    min-height: 246px;
    overflow: hidden;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(150, 255, 52, .25);
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(14, 27, 34, .97), rgba(4, 13, 18, .97));
    box-shadow:
        0 22px 58px rgba(0, 0, 0, .4),
        0 0 48px rgba(170, 255, 0, .1),
        0 0 0 5px rgba(170, 255, 0, .025),
        inset 0 1px rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
    pointer-events: none;
    animation: editorHover 6s ease-in-out infinite;
}

.hero-code-stream::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -45%;
    left: -65%;
    width: 36%;
    height: 190%;
    transform: rotate(24deg);
    background: linear-gradient(90deg, transparent, rgba(195, 255, 146, .045), transparent);
    animation: editorSheen 9s ease-in-out infinite;
}

.hero-code-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 39px;
    padding: 0 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .025);
    color: rgba(231, 240, 235, .8);
    font: 500 10px/1.3 'Fira Code', Consolas, monospace;
    letter-spacing: .1px;
}

.hero-code-window-controls {
    display: flex;
    gap: 5px;
}

.hero-code-window-controls span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff6b65;
}

.hero-code-window-controls span:nth-child(2) {
    background: #ffca58;
}

.hero-code-window-controls span:nth-child(3) {
    background: #5bd68b;
}

.hero-code-filename {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #cddbd4;
}

.hero-code-filename i {
    color: #7fc8ff;
    font-size: 12px;
}

.hero-code-indicator {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #aaff00;
    box-shadow: 0 0 8px rgba(170, 255, 0, .8);
    animation: pulseCircle 1.8s ease-in-out infinite;
}

.hero-code-live {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #c5f58a;
    font: 600 8px/1 'Poppins', sans-serif;
    letter-spacing: .8px;
}

.hero-code-output {
    display: grid;
    gap: 5px;
    min-height: 157px;
    padding: 13px 15px 10px;
    overflow: hidden;
    color: #d7e7dc;
    font: 10px/1.55 'Fira Code', Consolas, monospace;
}

.hero-code-row {
    display: flex;
    min-width: 0;
    min-height: 15px;
    white-space: pre;
}

.hero-code-number {
    width: 27px;
    flex: 0 0 27px;
    color: rgba(174, 198, 184, .38);
    user-select: none;
}

.hero-code-row code {
    min-width: 0;
    overflow: hidden;
    color: #d7e7dc;
    font: inherit;
    text-overflow: clip;
}

.hero-code-text {
    color: #d7e7dc;
}

.hero-code-row:nth-child(1) .hero-code-text,
.hero-code-row:nth-child(4) .hero-code-text {
    color: #c792ea;
}

.hero-code-row:nth-child(2) .hero-code-text,
.hero-code-row:nth-child(5) .hero-code-text {
    color: #82d9a5;
}

.hero-code-row:nth-child(3) .hero-code-text {
    color: #f3c878;
}

.hero-code-cursor {
    display: inline-block;
    width: 6px;
    height: 13px;
    margin-left: 2px;
    vertical-align: -3px;
    background: #aaff00;
    animation: blink 0.8s steps(2, start) infinite;
}

.hero-code-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 14px;
    border-top: 1px solid rgba(255, 255, 255, .075);
    color: rgba(202, 219, 208, .65);
    font: 500 8px/1.2 'Poppins', sans-serif;
}

.hero-code-footer span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.hero-code-footer i {
    color: #aaff00;
}

.hero-code-runtime {
    color: rgba(202, 219, 208, .48);
}

.hero-runtime-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px !important;
    height: 10px;
}

.hero-runtime-bars i {
    width: 2px;
    height: 4px;
    border-radius: 2px;
    background: #aaff00;
    animation: runtimeBars .8s ease-in-out infinite alternate;
}

.hero-runtime-bars i:nth-child(2) { height: 8px; animation-delay: .2s; }
.hero-runtime-bars i:nth-child(3) { height: 6px; animation-delay: .4s; }
.hero-runtime-bars i:nth-child(4) { height: 9px; animation-delay: .1s; }

.hero-metric-card {
    position: absolute;
    z-index: 8;
    right: 2%;
    bottom: 3%;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 145px;
    padding: 9px 11px;
    border: 1px solid rgba(170, 255, 0, .16);
    border-radius: 10px;
    background: rgba(4, 16, 19, .82);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
    backdrop-filter: blur(10px);
    animation: metricFloat 5s ease-in-out infinite;
}

.hero-metric-icon {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border: 1px solid rgba(170, 255, 0, .18);
    border-radius: 8px;
    background: rgba(170, 255, 0, .08);
    color: #bdff60;
    font-size: 13px;
}

.hero-metric-copy {
    display: grid;
    gap: 3px;
}

.hero-metric-copy > span {
    color: rgba(215, 229, 219, .5);
    font: 600 6px/1 'Poppins', sans-serif;
    letter-spacing: .55px;
}

.hero-metric-copy strong {
    color: #e8f5e7;
    font: 600 13px/1 'Poppins', sans-serif;
}

.hero-metric-copy small {
    color: #aaff00;
    font-size: 8px;
}

.hero-metric-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 21px;
    margin-left: auto;
}

.hero-metric-chart i {
    width: 3px;
    height: 40%;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(#c5ff72, rgba(170, 255, 0, .25));
    animation: chartPulse 1.3s ease-in-out infinite alternate;
}

.hero-metric-chart i:nth-child(2) { height: 67%; animation-delay: .25s; }
.hero-metric-chart i:nth-child(3) { height: 52%; animation-delay: .5s; }
.hero-metric-chart i:nth-child(4) { height: 88%; animation-delay: .15s; }
.hero-metric-chart i:nth-child(5) { height: 62%; animation-delay: .4s; }
.hero-metric-chart i:nth-child(6) { height: 100%; animation-delay: .65s; }
.hero-metric-chart i:nth-child(7) { height: 76%; animation-delay: .3s; }

@keyframes orbitDrift {
    from { transform: translate(-50%, -50%) rotate(-18deg); }
    to { transform: translate(-50%, -50%) rotate(-11deg); }
}

@keyframes statusPing {
    from { transform: scale(.55); opacity: .85; }
    to { transform: scale(1.75); opacity: 0; }
}

@keyframes editorHover {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
}

@keyframes editorSheen {
    0%, 65% { left: -65%; opacity: 0; }
    72% { opacity: 1; }
    88%, 100% { left: 130%; opacity: 0; }
}

@keyframes metricFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

@keyframes chartPulse {
    to { opacity: .5; }
}

@keyframes runtimeBars {
    to { height: 3px; opacity: .55; }
}

@keyframes blink {
    to { visibility: hidden; }
}

/* Floating service icons */

.floating-icon {
    position: absolute;
    z-index: 8;

    width: 42px;
    height: 42px;

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

    color: #aaff00;
    background: rgba(6, 17, 22, 0.88);

    border: 1px solid rgba(170, 255, 0, 0.45);
    border-radius: 50%;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.18),
        inset 0 0 12px rgba(170, 255, 0, 0.04);

    backdrop-filter: blur(8px);

    transition:
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.floating-icon:hover {
    color: #061116;
    background: #aaff00;
    box-shadow: 0 0 25px rgba(170, 255, 0, 0.35);
}

/* Icon positions */

.icon-mail {
    top: 8%;
    left: 3%;
    animation: floatOne 4s ease-in-out infinite;
}

.icon-security {
    top: 38%;
    right: 3%;
    animation: floatTwo 4.5s ease-in-out infinite;
}

.icon-cloud {
    top: 70%;
    left: 3%;

    width: 52px;
    height: 52px;
    font-size: 22px;

    animation: floatThree 4s ease-in-out infinite;
}

.icon-server {
    top: 70%;
    right: 3%;
    animation: floatOne 5s ease-in-out infinite;
}

.icon-code {
    top: 8%;
    right: 3%;
    animation: floatTwo 4.2s ease-in-out infinite;
}

/* Connector lines */

.connection-line {
    position: absolute;
    z-index: 2;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(170, 255, 0, 0.85),
        transparent
    );

    opacity: 0.4;
    transform-origin: left center;
    pointer-events: none;

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

.line-one {
    width: 75px;
    top: 24%;
    right: 34%;
    transform: rotate(90deg);
}

.line-two {
    width: 80px;
    top: 42%;
    right: 23%;
    transform: rotate(25deg);
}

.line-three {
    width: 75px;
    top: 66%;
    right: 34%;
    transform: rotate(-40deg);
}

/* Animations */

@keyframes pulseCircle {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}

@keyframes rotateCircle {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

@keyframes floatOne {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

@keyframes floatTwo {
    0%, 100% { translate: 0 0; }
    50% { translate: 5px -9px; }
}

@keyframes floatThree {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}

@keyframes lineGlow {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.7; }
}

/* ==========================================
   LAPTOP / SMALL DESKTOP
========================================== */

@media (max-width: 1100px) {
    .hero-container {
        padding-left: 38px;
        padding-right: 30px;
    }

    .hero-content {
        width: 55%;
    }

    .hero-content h1 {
        font-size: clamp(30px, 3.5vw, 39px);
    }

    .hero-visual {
        width: 50%;
    }

    .hero-features {
        gap: 14px;
    }

    .feature-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .feature-item h4 {
        font-size: 10px;
    }

    .feature-item p {
        font-size: 9px;
    }

}

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

@media (max-width: 767px) {
    .hero-section {
        height: auto;
        min-height: 0;

        background:
            radial-gradient(
                ellipse at 80% 25%,
                rgba(170, 255, 0, 0.09),
                transparent 42%
            ),
            linear-gradient(
                155deg,
                #061116,
                #091920 65%,
                #061116
            );
    }

    .hero-container {
        min-height: 0;
        height: auto;

        padding: 42px 28px 30px;

        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-content {
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
    }

    .hero-small-title {
        margin-bottom: 12px;
        font-size: 10px;
        letter-spacing: 1px;
    }

    .hero-content h1 {
        max-width: 540px;
        font-size: clamp(32px, 5.3vw, 43px);
        line-height: 1.12;
        letter-spacing: -0.8px;
    }

    .hero-content > p {
        max-width: 510px;
        margin: 14px 0 20px;

        font-size: 13px;
        line-height: 1.75;
    }

    .hero-buttons {
        gap: 11px;
    }

    .btn-services,
    .btn-contact {
        min-height: 44px;
        font-size: 12px;
    }

    .hero-features {
        margin-top: 23px;
        gap: 15px 22px;
    }

    .feature-item h4 {
        font-size: 11px;
    }

    .feature-item p {
        font-size: 10px;
    }

    /* Visual becomes a separate lower section */

    .hero-visual {
        position: relative;
        top: auto;
        right: auto;

        width: calc(100% + 56px);
        height: clamp(270px, 44vw, 330px);

        margin: 18px -28px -30px;
        flex-shrink: 0;

        overflow: hidden;
    }

    .circle-one {
        width: clamp(170px, 33vw, 225px);
        right: 50%;
        top: 52%;
        transform: translate(50%, -50%);
    }

    .circle-two {
        width: clamp(220px, 42vw, 280px);
        right: 50%;
        top: 52%;
        transform: translate(50%, -50%);
    }

    .hero-code-stream {
        width: min(88%, 430px);
        min-height: 220px;
    }

    .hero-system-status,
    .hero-metric-card {
        display: none;
    }

    .hero-orbit-ring {
        width: 94%;
    }

    .hero-code-output {
        gap: 4px;
        min-height: 142px;
        padding: 11px 12px 8px;
        font-size: 9px;
    }

    .hero-code-number {
        width: 23px;
        flex-basis: 23px;
    }

    .icon-mail {
        top: 10%;
        left: 2%;
    }

    .icon-security {
        top: 40%;
        right: 2%;
    }

    .icon-cloud {
        top: 70%;
        left: 2%;
    }

    .icon-server {
        top: 70%;
        right: 2%;
    }

    .icon-code {
        top: 10%;
        right: 2%;
    }
}

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

@media (max-width: 480px) {
    .hero-container {
        padding: 32px 20px 24px;
    }

    .hero-small-title {
        gap: 7px;
        margin-bottom: 11px;

        font-size: 9px;
        letter-spacing: 0.7px;
    }

    .small-line {
        width: 20px;
        height: 3px;
    }

    .hero-content h1 {
        font-size: clamp(29px, 8vw, 36px);
        line-height: 1.13;
        letter-spacing: -0.7px;
    }

    .hero-content > p {
        margin: 13px 0 18px;

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

    .hero-buttons {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
        gap: 9px;

        width: 100%;
    }

    .btn-services,
    .btn-contact {
        width: 100%;
        min-width: 0;
        min-height: 44px;

        font-size: 11px;
        white-space: nowrap;
    }

    .btn-services {
        gap: 6px;
        padding: 5px 6px 5px 12px;
    }

    .btn-services span {
        width: 28px;
        height: 28px;
    }

    .btn-contact {
        padding: 0 8px;
    }

    .hero-features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 15px 10px;
        margin-top: 23px;
    }

    .feature-item {
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .feature-icon {
        width: 31px;
        height: 31px;
        flex-basis: 31px;

        border-radius: 9px;
        font-size: 17px;
    }

    .feature-item h4 {
        font-size: 10px;
        line-height: 1.35;
        white-space: normal;
    }

    .feature-item p {
        font-size: 9px;
        line-height: 1.4;
        white-space: normal;
    }

    .hero-visual {
        width: calc(100% + 40px);
        height: 270px;

        margin: 18px -20px -24px;
    }

    .hero-code-stream {
        width: calc(100% - 70px);
        min-height: 220px;
    }

    .hero-orbit-ring {
        width: 110%;
    }

    .hero-code-header {
        min-height: 36px;
        padding: 0 10px;
        gap: 8px;
    }

    .hero-code-output {
        gap: 4px;
        min-height: 150px;
        padding: 10px 10px 8px;
        font-size: 8px;
    }

    .hero-code-number {
        width: 21px;
        flex-basis: 21px;
    }

    .hero-code-footer {
        min-height: 28px;
        padding: 0 10px;
        font-size: 7px;
    }

    .circle-one {
        width: 170px;
    }

    .circle-two {
        width: 220px;
    }

    .floating-icon {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .icon-mail {
        top: 8%;
        left: 2%;
        right: auto;
    }

    .icon-security {
        top: 42%;
        right: 2%;
    }

    .icon-cloud {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .line-one {
        width: 42px;
        top: 25%;
        right: 60%;
    }

    .line-two {
        width: 48px;
        top: 43%;
        right: 20%;
    }

    .line-three {
        width: 45px;
        top: 67%;
        right: 29%;
    }
}

/* ==========================================
   EXTRA SMALL PHONES
========================================== */

@media (max-width: 360px) {
    .hero-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-content h1 {
        font-size: 28px;
    }

    .hero-content > p {
        font-size: 11px;
    }

    .hero-buttons {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        gap: 7px;
    }

    .btn-services,
    .btn-contact {
        font-size: 10px;
    }

    .btn-services {
        padding-left: 9px;
    }

    .hero-features {
        gap: 14px 7px;
    }

    .feature-item {
        gap: 6px;
    }

    .feature-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 15px;
    }

    .feature-item h4 {
        font-size: 9px;
    }

    .feature-item p {
        font-size: 8px;
    }

    .hero-visual {
        height: 250px;
    }


}

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

@media (prefers-reduced-motion: reduce) {
    .hero-section *,
    .hero-section *::before,
    .hero-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}


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

.services-section {
    position: relative;
    width: 100%;
    min-height: 430px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 80%,
            rgba(91, 160, 0, .22),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 30%,
            rgba(0, 110, 120, .12),
            transparent 35%
        ),
        #061216;

    border-bottom: 2px solid #aaff00;
}


/* Background */

.services-bg {
    position: absolute;

    width: 620px;
    height: 300px;

    border-radius: 50%;

    pointer-events: none;

    opacity: .8;
}

.services-bg-left {
    left: -360px;
    bottom: -190px;

    border: 2px solid rgba(139,255,0,.28);

    background:
        radial-gradient(
            ellipse,
            rgba(130,255,0,.18),
            transparent 70%
        );

    transform: rotate(20deg);

    animation: curveMove 7s ease-in-out infinite;
}

.services-bg-right {
    right: -360px;
    bottom: -190px;

    border: 2px solid rgba(139,255,0,.28);

    background:
        radial-gradient(
            ellipse,
            rgba(130,255,0,.18),
            transparent 70%
        );

    transform: rotate(-20deg);

    animation: curveMove2 7s ease-in-out infinite;
}

@keyframes curveMove {

    0%,100% {
        transform: rotate(20deg) translate(0,0);
    }

    50% {
        transform: rotate(23deg) translate(15px,-12px);
    }
}

@keyframes curveMove2 {

    0%,100% {
        transform: rotate(-20deg) translate(0,0);
    }

    50% {
        transform: rotate(-23deg) translate(-15px,-12px);
    }
}


/* =====================================================
   WRAPPER
===================================================== */

.services-wrapper {
    position: relative;
    z-index: 2;

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

    margin: auto;

    padding: 18px 65px 25px;

    display: grid;

    grid-template-columns: 285px 1fr;

    gap: 28px;
}


/* =====================================================
   LEFT
===================================================== */

.services-left {
    padding-top: 8px;
}

.services-label {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #fff;

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

    margin-bottom: 10px;
}

.services-label span {
    width: 21px;
    height: 3px;

    border-radius: 20px;

    background: #aaff00;

    box-shadow: 0 0 9px #aaff00;
}

.services-left h2 {
    margin: 0;

    color: #fff;

    font-size: 21px;

    line-height: 1.25;

    font-weight: 650;
}

.services-left > p {
    margin: 13px 0 16px;

    max-width: 245px;

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

    font-size: 9px;

    line-height: 1.55;
}


/* BUTTON */

.services-btn {
    width: 128px;
    height: 33px;

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

    padding: 0 9px 0 14px;

    border: 1px solid #aaff00;

    border-radius: 20px;

    color: #fff;

    text-decoration: none;

    font-size: 9px;

    transition: .35s ease;
}

.services-btn i {
    color: #aaff00;

    transition: .35s ease;
}

.services-btn:hover {
    color: #071116;

    background: #aaff00;

    box-shadow: 0 0 25px rgba(170,255,0,.3);

    transform: translateY(-2px);
}

.services-btn:hover i {
    color: #071116;
    transform: translateX(5px);
}


/* ARROWS */

.services-nav {
    display: flex;

    gap: 8px;

    margin-top: 25px;
}

.services-nav button {
    width: 20px;
    height: 20px;

    border-radius: 50%;

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

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

    color: #fff;

    font-size: 8px;

    cursor: pointer;

    transition: .3s ease;
}

.services-nav button:hover {
    background: #aaff00;

    color: #071116;

    border-color: #aaff00;

    transform: scale(1.15);
}


/* =====================================================
   SERVICE LIST
===================================================== */

.services-list {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


/* =====================================================
   SERVICE BOX
===================================================== */

.service-box {
    position: relative;

    width: 100%;

    border: 1px solid rgba(68,145,160,.4);

    border-radius: 7px;

    background:
        linear-gradient(
            90deg,
            rgba(8,28,34,.92),
            rgba(6,20,25,.88)
        );

    overflow: hidden;

    opacity: 0;

    transform: translateX(35px);

    animation: serviceAppear .6s ease forwards;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.service-box:nth-child(1) { animation-delay: .05s; }
.service-box:nth-child(2) { animation-delay: .10s; }
.service-box:nth-child(3) { animation-delay: .15s; }
.service-box:nth-child(4) { animation-delay: .20s; }
.service-box:nth-child(5) { animation-delay: .25s; }
.service-box:nth-child(6) { animation-delay: .30s; }
.service-box:nth-child(7) { animation-delay: .35s; }
.service-box:nth-child(8) { animation-delay: .40s; }
.service-box:nth-child(9) { animation-delay: .45s; }
.service-box:nth-child(10) { animation-delay: .50s; }

@keyframes serviceAppear {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Hover */

.service-box:not(.google-box):hover {
    border-color: #aaff00;

    transform: translateX(4px);

    box-shadow:
        0 5px 25px rgba(0,0,0,.3),
        inset 3px 0 0 #aaff00;
}


/* =====================================================
   SERVICE HEADER
===================================================== */

.service-head {
    min-height: 28px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 0 10px;
}


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

.service-main-icon {
    width: 23px;
    height: 23px;

    flex: 0 0 23px;

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

    border-radius: 5px;

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

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

.service-box:hover .service-main-icon {
    transform:
        scale(1.2)
        rotate(-6deg);

    box-shadow:
        0 0 14px rgba(170,255,0,.35);
}


/* GOOGLE */

.google-icon {
    background: transparent;

    color: #061216;

    font-size: 23px;
}


/* MICROSOFT */

.microsoft-icon {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2px;

    padding: 3px;
}

.microsoft-icon span:nth-child(1) {
    background: #f35325;
}

.microsoft-icon span:nth-child(2) {
    background: #81bc06;
}

.microsoft-icon span:nth-child(3) {
    background: #05a6f0;
}

.microsoft-icon span:nth-child(4) {
    background: #ffba08;
}


/* ZOHO */

.zoho-icon {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ef4444,
            #f59e0b,
            #06b6d4
        );
}


/* SOFTWARE */

.software-icon {
    color: #061216;

    background:
        linear-gradient(
            135deg,
            #aaff00,
            #45f0cf
        );
}


/* WEBSITE DEVELOPMENT */

.website-dev-icon {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #00c6ff,
            #0072ff
        );
}


/* WEBSITE DESIGN */

.design-icon {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff4ecd,
            #8b5cf6
        );
}


/* VIDEO */

.video-icon {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff416c,
            #ff4b2b
        );
}


/* MARKETING */

.marketing-icon {
    color: #061216;

    background:
        linear-gradient(
            135deg,
            #aaff00,
            #00e5ff
        );
}


/* SERVER */

.server-icon {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #ec4899
        );
}


/* BACKUP */

.backup-icon {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff9f1c,
            #ff3d68
        );
}


/* =====================================================
   SERVICE NAME
===================================================== */

.service-name {
    flex: 1;
}

.service-name h3 {
    margin: 0;

    color: #f5f8f8;

    font-size: 9px;

    font-weight: 500;
}


/* =====================================================
   TOGGLE
===================================================== */

.service-toggle {
    width: 25px;
    height: 25px;

    border: 0;

    background: transparent;

    color: #fff;

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

    cursor: pointer;

    transition:
        transform .45s ease,
        color .3s ease;
}

.service-box.active .service-toggle {
    transform: rotate(180deg);

    color: #aaff00;
}


/* =====================================================
   BODY
===================================================== */

.service-body {
    max-height: 0;

    overflow: hidden;

    padding: 0 44px;

    opacity: 0;

    transition:
        max-height .5s cubic-bezier(.4,0,.2,1),
        padding .4s ease,
        opacity .3s ease;
}

.service-box.active .service-body {
    max-height: 150px;

    padding-top: 3px;
    padding-bottom: 12px;

    opacity: 1;
}


/* Description */

.body-text {
    margin: 0 0 9px;

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

    font-size: 8px;

    line-height: 1.5;
}


/* =====================================================
   SUB SERVICES
===================================================== */

.sub-services {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.sub-service {
    display: flex;
    align-items: center;

    gap: 5px;

    min-width: 92px;

    padding: 4px 7px 4px 4px;

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

    border-radius: 20px;

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

    color: #fff;

    transition:
        .3s ease;

    animation: subItem .4s ease both;
}

.service-box.active .sub-service:nth-child(1) {
    animation-delay: .05s;
}

.service-box.active .sub-service:nth-child(2) {
    animation-delay: .10s;
}

.service-box.active .sub-service:nth-child(3) {
    animation-delay: .15s;
}

.service-box.active .sub-service:nth-child(4) {
    animation-delay: .20s;
}

.service-box.active .sub-service:nth-child(5) {
    animation-delay: .25s;
}

@keyframes subItem {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.95);
    }

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

.sub-service:hover {
    border-color: #aaff00;

    background: rgba(170,255,0,.08);

    transform: translateY(-3px);

    box-shadow:
        0 5px 15px rgba(0,0,0,.2);
}

.sub-service strong {
    font-size: 7px;

    font-weight: 500;

    white-space: nowrap;
}


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

.sub-icon {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

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

    border-radius: 50%;

    color: #fff;

    font-size: 9px;

    transition: .3s ease;
}

.sub-service:hover .sub-icon {
    transform: rotate(8deg) scale(1.12);
}


/* GOOGLE */

.gmail {
    color: #ea4335;
}

.drive {
    color: #4285f4;
}

.calendar {
    color: #1a73e8;
}

.meet {
    color: #34a853;
}

.docs {
    color: #4285f4;
}

.sheets {
    color: #0f9d58;
}


/* MICROSOFT */

.word {
    background: #185abd;
}

.excel {
    background: #107c41;
}

.power {
    background: #d24726;
}

.teams {
    background: #6264a7;
}


/* ZOHO */

.zoho-crm {
    background: #f44336;
}

.zoho-books {
    background: #16a34a;
}

.zoho-mail {
    background: #f97316;
}

.zoho-people {
    background: #8b5cf6;
}


/* SOFTWARE */

.software-web {
    background: #06b6d4;
}

.api {
    background: #a855f7;
}

.custom {
    background: #f59e0b;
}

.testing {
    background: #22c55e;
}


/* WEBSITE */

.html {
    background: #e44d26;
}

.php {
    background: #777bb4;
}

.responsive {
    background: #06b6d4;
}

.ecommerce {
    background: #f59e0b;
}


/* DESIGN */

.ui {
    background: #ec4899;
}

.ux {
    background: #8b5cf6;
}

.branding {
    background: #f97316;
}

.prototype {
    background: #06b6d4;
}


/* VIDEO */

.reels {
    background: #e1306c;
}

.motion {
    background: #8b5cf6;
}

.editing {
    background: #ef4444;
}

.ads-video {
    background: #f59e0b;
}


/* MARKETING */

.seo {
    background: #22c55e;
}

.social {
    background: #e1306c;
}

.ads {
    background: #4285f4;
}

.analytics {
    background: #f59e0b;
}


/* SERVER */

.monitoring {
    background: #06b6d4;
}

.security {
    background: #22c55e;
}

.hosting {
    background: #8b5cf6;
}

.maintenance {
    background: #f97316;
}


/* BACKUP */

.backup {
    background: #06b6d4;
}

.migration {
    background: #8b5cf6;
}

.recovery {
    background: #22c55e;
}

.disaster {
    background: #ef4444;
}


/* =====================================================
   GOOGLE SPECIAL
===================================================== */

.google-box {
    border-color: #aaff00;

    background:
        linear-gradient(
            90deg,
            #aaff00 0%,
            #9eff00 42%,
            #b7ff35 70%,
            #5d8135 100%
        );

    color: #061216;
}

.google-box .service-head {
    min-height: 63px;

    padding: 0 14px;
}

.google-box .service-name h3 {
    color: #061216;

    font-size: 10px;

    font-weight: 700;
}

.google-box .service-name::after {
    content:
        "Boost productivity and collaboration with Google Workspace.";

    display: block;

    margin-top: 4px;

    color: #173400;

    font-size: 7px;
}

.google-box .service-toggle {
    color: #061216;
}


/* Google preview */

.service-preview-icons {
    display: flex;

    gap: 7px;

    margin-left: auto;
}

.service-preview-icons span {
    width: 27px;
    height: 27px;

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

    border-radius: 6px;

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

    font-size: 13px;

    box-shadow: 0 3px 10px rgba(0,0,0,.12);

    transition: .3s ease;
}

.service-preview-icons span:hover {
    transform: translateY(-5px) scale(1.1);
}


/* Google body */

.google-box .service-body {
    color: #061216;
}

.google-box .body-text {
    color: #173400;
}


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

@media (max-width: 1000px) {

    .services-wrapper {
        padding-left: 35px;
        padding-right: 35px;

        grid-template-columns: 250px 1fr;

        gap: 20px;
    }

    .service-preview-icons {
        display: none;
    }
}


@media (max-width: 800px) {

    .services-wrapper {
        grid-template-columns: 1fr;

        padding: 35px 25px;

        gap: 30px;
    }

    .services-left {
        max-width: 500px;
    }

    .services-left h2 {
        font-size: 28px;
    }

    .services-left > p {
        font-size: 11px;

        max-width: 450px;
    }

}


@media (max-width: 550px) {

    .services-wrapper {
        padding: 30px 15px;
    }

    .services-left h2 {
        font-size: 23px;
    }

    .service-head {
        min-height: 35px;

        padding: 0 8px;

        gap: 8px;
    }

    .google-box .service-head {
        min-height: 55px;

        padding: 0 9px;
    }

    .service-main-icon {
        width: 22px;
        height: 22px;

        flex-basis: 22px;
    }

    .service-name h3 {
        font-size: 8px;
    }

    .service-body {
        padding-left: 35px;
        padding-right: 10px;
    }

    .sub-services {
        gap: 5px;
    }

    .sub-service {
        min-width: auto;

        padding-right: 6px;
    }

    .sub-service strong {
        font-size: 6.5px;
    }

    .service-preview-icons {
        display: none;
    }

}

/* ==============================================
   SECTION ONLY - NO GLOBAL BODY/HEADER STYLING
============================================== */

.asx-services {
  --asx-lime: #b6ff00;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 17px 6.25%;
  background: #041116;
  color: #f5f8fa;
  font-family: Arial, Helvetica, sans-serif;
}

.asx-services * { box-sizing: border-box; }

.asx-services::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(61deg, transparent 0 8%, #84b7250c 8.2% 13%, transparent 13.2%),
    linear-gradient(125deg, transparent 0 82%, #84b72512 82.2% 90%, transparent 90.2%),
    radial-gradient(ellipse at 0 100%, #8bbd182b, transparent 32%),
    radial-gradient(ellipse at 100% 100%, #84ba1722, transparent 27%),
    linear-gradient(115deg,#091813 0%,#041116 50%,#031017 100%);
}

.asx-container {
  max-width: 1400px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(245px,.68fr) minmax(0,1.45fr);
  gap: clamp(32px,5.5vw,90px);
  align-items: start;
}

/* LEFT CONTENT */

.asx-intro {
  padding-top: 11px;
  animation: asxIntro .7s ease both;
}

.asx-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
  color: #eaf1ef;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .6px;
}

.asx-eyebrow-line {
  width: 21px;
  height: 4px;
  flex: 0 0 21px;
  border-radius: 5px;
  background: var(--asx-lime);
  box-shadow: 0 0 10px #b6ff0045;
}

.asx-intro h2 {
  max-width: 330px;
  margin: 0 0 12px;
  color: #f7f9fa;
  font-size: clamp(24px,2.1vw,32px);
  line-height: 1.17;
  font-weight: 750;
  letter-spacing: -.9px;
}

.asx-intro p {
  max-width: 285px;
  margin: 0;
  color: #c5d0d4;
  font-size: 11px;
  line-height: 1.65;
}

.asx-intro-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 16px;
}

.asx-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 8px 13px 8px 17px;
  border: 1px solid var(--asx-lime);
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  transition: background .25s,color .25s,box-shadow .25s;
}

.asx-btn-arrow {
  color: var(--asx-lime);
  font-size: 17px;
  transition: transform .25s;
}

.asx-view-btn:hover {
  color: #0b1405;
  background: var(--asx-lime);
  box-shadow: 0 0 22px #b6ff002e;
}

.asx-view-btn:hover .asx-btn-arrow {
  color: #0b1405;
  transform: translateX(3px);
}

.asx-navigation { display: flex; gap: 9px; }

.asx-nav-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid #ffffff1c;
  border-radius: 50%;
  background: #ffffff18;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: background .2s,color .2s;
}

.asx-nav-btn:hover {
  background: var(--asx-lime);
  color: #09120a;
}

/* ACCORDION */

.asx-accordion { min-width: 0; }

.asx-item {
  --accent: #b6ff00;
  --tint: #b6ff0010;
  position: relative;
  margin: 0 0 2px;
  border: 1px solid #1b353d;
  border-radius: 8px;
  overflow: hidden;
  background: #06151bc9;
  transition: border-color .28s,background .28s,box-shadow .28s;
}

.asx-google { --accent:#b6ff00; --tint:#b6ff0012; }
.asx-microsoft { --accent:#4db9ff; --tint:#4db9ff12; }
.asx-zoho { --accent:#ff9b50; --tint:#ff9b5012; }
.asx-software { --accent:#b49aff; --tint:#b49aff12; }
.asx-webdev { --accent:#43dfd0; --tint:#43dfd012; }
.asx-design { --accent:#ff79bd; --tint:#ff79bd12; }
.asx-video { --accent:#ff806c; --tint:#ff806c12; }
.asx-marketing { --accent:#d0f94d; --tint:#d0f94d12; }
.asx-apps { --accent:#59c9ff; --tint:#59c9ff12; }
.asx-server { --accent:#a7aaff; --tint:#a7aaff12; }
.asx-backup { --accent:#ffc95b; --tint:#ffc95b12; }

.asx-item:hover,
.asx-item.asx-open {
  border-color: color-mix(in srgb,var(--accent) 60%,#1b353d);
  background: linear-gradient(110deg,var(--tint),#041116f5 90%);
}

.asx-item.asx-open {
  box-shadow: inset 3px 0 var(--accent),0 5px 20px #0000001c;
}

.asx-trigger {
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 4px 11px;
  border: 0;
  background: transparent;
  color: #f4f8f9;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.asx-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: grid;
  place-items: center;
  color: var(--accent);
  transition: transform .3s,filter .3s;
}

.asx-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.3;
}

.asx-icon > svg[viewBox="0 0 48 48"] {
  width: 20px;
  height: 20px;
}

.asx-name {
  flex: 1;
  min-width: 0;
  color: #f3f7f8;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.45;
}

.asx-chevron {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: grid;
  place-items: center;
  color: #eaf0f2;
  transition: transform .3s,color .3s;
}

.asx-chevron svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.asx-item.asx-open .asx-chevron {
  color: var(--accent);
  transform: rotate(180deg);
}

.asx-item:hover .asx-icon,
.asx-item.asx-open .asx-icon {
  filter: drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 45%,transparent));
}

.asx-item.asx-open .asx-icon { transform: scale(1.08); }

/* EXPANDED CONTENT */

.asx-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  opacity: 0;
  transition: opacity .28s,visibility .28s;
}

.asx-panel-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 15px 0 53px;
}

.asx-item.asx-open .asx-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
}

.asx-item.asx-open .asx-panel-inner {
  padding-bottom: 13px;
  animation: asxPanelIn .3s ease both;
}

.asx-description { min-width: 0; flex: 1; }

.asx-description h3 {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
}

.asx-description p {
  max-width: 480px;
  margin: 0;
  color: #c7d3d7;
  font-size: 10px;
  line-height: 1.6;
}

/* GOOGLE APPS */

.asx-brand-apps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.asx-app-logo {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid #ffffff22;
  border-radius: 7px;
  background: #ffffff10;
  transition: transform .25s,background .25s;
}

.asx-app-logo svg { width: 100%; height: 100%; }

.asx-app-logo:hover {
  transform: translateY(-3px);
  background: #ffffff19;
}

/* MICROSOFT / ZOHO BRAND APP TILES */

.asx-mini-app {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff20;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  transition: transform .25s;
}

.asx-mini-app:hover { transform: translateY(-3px); }

.app-word { background:#185ABD20;color:#48A0FF; }
.app-excel { background:#107C4120;color:#35D18A; }
.app-powerpoint { background:#D3523020;color:#FF906C; }
.app-teams { background:#6264A720;color:#B5A6FF; }

.app-zoho-crm { color:#FF9B50;background:#FF9B5018; }
.app-zoho-mail { color:#49B9FF;background:#49B9FF18; }
.app-zoho-books { color:#40D6AA;background:#40D6AA18; }
.app-zoho-work { color:#B69AFF;background:#B69AFF18; }

.asx-zoho-logo {
  width: 21px;
  height: 21px;
  border-radius: 5px;
  background: conic-gradient(#e74646 0 25%,#f7b529 25% 50%,#2db67c 50% 75%,#3285ff 75%);
  color: white;
  font-size: 12px;
  font-weight: 800;
}

.asx-zoho-logo span {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: #08151b;
}

/* SERVICE FEATURE ICONS */

.asx-feature-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  flex: 0 0 auto;
}

.asx-feature-icons span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  border-radius: 7px;
  background: var(--tint);
  color: #e3ecef;
  font-size: 9px;
  transition: background .2s,border-color .2s;
}

.asx-feature-icons span:hover {
  border-color: var(--accent);
}

.asx-feature-icons svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

/* ANIMATIONS */

@keyframes asxIntro {
  from { opacity:0; transform:translateX(-12px); }
  to { opacity:1; transform:translateX(0); }
}

@keyframes asxPanelIn {
  from { opacity:0; transform:translateY(-5px); }
  to { opacity:1; transform:translateY(0); }
}

/* RESPONSIVE */

@media (min-width:1500px) {
  .asx-services {
    padding-left:max(6.25%,calc((100% - 1400px)/2));
    padding-right:max(6.25%,calc((100% - 1400px)/2));
  }
}

@media (max-width:900px) {
  .asx-services { padding:42px 5%; }
  .asx-container {
    grid-template-columns:1fr;
    gap:28px;
  }
  .asx-intro h2 { max-width:600px;font-size:32px; }
  .asx-intro p { max-width:540px;font-size:12px; }
  .asx-trigger { min-height:39px; }
  .asx-name { font-size:12px; }
  .asx-icon { width:22px;height:22px;flex-basis:22px; }
  .asx-icon svg { width:20px;height:20px; }
}

@media (max-width:520px) {
  .asx-services { padding:34px 15px; }
  .asx-container { gap:25px; }
  .asx-intro h2 { font-size:29px; }
  .asx-intro p { font-size:12px; }
  .asx-intro-actions { gap:22px; }
  .asx-trigger { min-height:41px;gap:10px;padding:7px 10px; }
  .asx-name { font-size:11px; }
  .asx-panel-inner {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding-left:43px;
    padding-right:10px;
  }
  .asx-item.asx-open .asx-panel-inner { padding-bottom:14px; }
  .asx-description h3 { font-size:12px; }
  .asx-description p { font-size:11px; }
  .asx-brand-apps { gap:7px; }
  .asx-app-logo,.asx-mini-app { width:28px;height:28px; }
  .asx-feature-icons { gap:6px; }
  .asx-feature-icons span { font-size:9px;padding:7px; }
}

@media (prefers-reduced-motion:reduce) {
  .asx-services *,
  .asx-services *::before,
  .asx-services *::after {
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}


/* ===========================================
   JASHCODE IT SECTION STYLES
   All styles scoped to this section
=========================================== */

.alp-why-section {
  --alp-green: #b6ff00;
  --alp-bg: #031116;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 6.3% 30px;
  background: var(--alp-bg);
  color: #f5f8fa;
  font-family: Arial, Helvetica, sans-serif;
}

.alp-why-section *,
.alp-why-section *::before,
.alp-why-section *::after {
  box-sizing: border-box;
}

.alp-why-section a {
  text-decoration: none;
}

.alp-why-section::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 48% 50%, #16411e60, transparent 34%),
    radial-gradient(ellipse at 0 100%, #77aa0925, transparent 28%),
    radial-gradient(ellipse at 100% 0%, #0b33403b, transparent 35%),
    linear-gradient(110deg, #031015, #06191e 48%, #031015);
}

.alp-why-inner {
  max-width: 1400px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3.2vw, 48px);
}

/* EYEBROW */

.alp-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #d9e8c6;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .65px;
}

.alp-eyebrow > span {
  width: 19px;
  height: 4px;
  flex-shrink: 0;
  border-radius: 5px;
  background: var(--alp-green);
  box-shadow: 0 0 12px #b6ff0055;
}

.alp-why-left,
.alp-about {
  min-width: 0;
  animation: alpFadeUp .8s ease both;
}

.alp-about {
  animation-delay: .15s;
}

.alp-why-left h2,
.alp-about h2 {
  margin: 0 0 10px;
  color: #f7f9fa;
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 750;
  letter-spacing: -.6px;
  line-height: 1.2;
}

.alp-intro,
.alp-about-text {
  margin: 0;
  color: #d0dbe0;
  font-size: 12px;
  line-height: 1.65;
}

/* LEFT FEATURE GRID */

.alp-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 13px;
  margin: 20px 0 20px;
}

.alp-feature {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  transition: transform .3s ease;
}

.alp-feature:hover {
  transform: translateX(3px);
}

.alp-feature-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid #8ac90080;
  border-radius: 10px;
  color: var(--alp-green);
  background: linear-gradient(145deg, #b6ff001b, #b6ff0005);
  box-shadow: inset 0 0 13px #b6ff0008;
  transition: background .3s, box-shadow .3s;
}

.alp-feature:hover .alp-feature-icon {
  background: #b6ff001c;
  box-shadow: 0 0 17px #b6ff0025;
}

.alp-feature-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.alp-feature h4 {
  margin: 0 0 3px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.alp-feature p {
  margin: 0;
  color: #b9c6ca;
  font-size: 9px;
  line-height: 1.45;
}

/* BUTTONS */

.alp-primary-btn,
.alp-outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  border-radius: 30px;
  font-size: 10px;
  font-weight: 700;
  transition: transform .25s, background .25s, box-shadow .25s;
}

.alp-primary-btn {
  padding: 11px 16px 11px 19px;
  color: #0b1504;
  background: var(--alp-green);
  box-shadow: 0 0 0 #b6ff0000;
}

.alp-primary-btn svg,
.alp-outline-btn svg {
  width: 14px;
  height: 14px;
  transition: transform .25s;
}

.alp-primary-btn:hover {
  color: #0b1504;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px #b6ff0030;
}

.alp-primary-btn:hover svg,
.alp-outline-btn:hover svg {
  transform: translateX(4px);
}

.alp-outline-btn {
  padding: 8px 12px;
  border: 1px solid var(--alp-green);
  color: var(--alp-green);
  background: #b6ff0006;
}

.alp-outline-btn:hover {
  color: #071206;
  background: var(--alp-green);
}

/* ===========================================
   CENTRE TECH VISUAL
=========================================== */

.alp-visual {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1.03;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  perspective: 800px;
}

.alp-visual-glow {
  position: absolute;
  z-index: -2;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #b6ff001c 0%, #2acb7130 26%, #00c7ff10 52%, transparent 72%);
  filter: blur(12px);
  animation: alpGlow 5s ease-in-out infinite alternate;
}

.alp-visual-grid {
  position: absolute;
  z-index: -1;
  inset: 10% -5%;
  opacity: .25;
  background-image:
    linear-gradient(#8bff0011 1px, transparent 1px),
    linear-gradient(90deg, #8bff0011 1px, transparent 1px);
  background-size: 25px 25px;
  mask-image: radial-gradient(ellipse, #000, transparent 72%);
}

.alp-tech-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.alp-line {
  fill: none;
  stroke: #b6ff00;
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
  animation: alpDash 6s linear infinite;
}

.alp-line-2 { animation-delay: -2s; }
.alp-line-3 { animation-delay: -4s; }

.alp-line-dot {
  fill: var(--alp-green);
  filter: drop-shadow(0 0 5px #b6ff00);
  animation: alpDot 2.4s ease-in-out infinite;
}

/* LAPTOP */

.alp-laptop-scene {
  position: relative;
  width: 95%;
  max-width: 410px;
  transform: rotate(-5deg);
  animation: alpLaptopFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 16px 20px #0008);
}

.alp-laptop-back-glow {
  position: absolute;
  z-index: -1;
  inset: 0 5% 3%;
  border-radius: 50%;
  background: #b6ff001a;
  filter: blur(23px);
}

.alp-laptop-screen {
  position: relative;
  width: 81%;
  margin: 0 auto;
  padding: 5px;
  border: 1px solid #b6ff00a8;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(140deg, #18313a, #061116 45%, #162a2e);
  box-shadow:
    0 0 0 1px #b6ff0022,
    0 0 15px #b6ff0035,
    inset 0 0 8px #b6ff0015;
}

.alp-screen-top {
  min-height: 23px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: #0b2026;
  border-radius: 4px 4px 0 0;
}

.alp-screen-dots {
  display: flex;
  gap: 3px;
}

.alp-screen-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff766b;
}

.alp-screen-dots span:nth-child(2) { background: #ffd45e; }
.alp-screen-dots span:nth-child(3) { background: #b6ff00; }

.alp-screen-label {
  flex: 1;
  color: #c9d9dd;
  font-size: clamp(4px,.55vw,7px);
  letter-spacing: .6px;
}

.alp-screen-top > svg {
  width: 10px;
  height: 10px;
  color: var(--alp-green);
}

.alp-screen-content {
  min-height: 125px;
  display: flex;
  overflow: hidden;
  background: linear-gradient(130deg,#10282d,#07151b);
}

.alp-screen-sidebar {
  width: 22px;
  flex: 0 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 10px 4px;
  border-right: 1px solid #ffffff10;
  background: #071217;
}

.alp-sidebar-logo {
  color: var(--alp-green);
}

.alp-sidebar-logo svg {
  width: 12px;
  height: 12px;
}

.alp-screen-sidebar > span {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: #335058;
}

.alp-screen-sidebar > span.active {
  background: #b6ff00;
  box-shadow: 0 0 8px #b6ff0080;
}

.alp-dashboard {
  flex: 1;
  min-width: 0;
  padding: 10px;
}

.alp-dashboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.alp-dashboard-heading > div {
  display: grid;
  gap: 3px;
}

.alp-dashboard-heading span {
  color: #a6c3ca;
  font-size: 5px;
  letter-spacing: .7px;
}

.alp-dashboard-heading strong {
  color: #fff;
  font-size: clamp(7px,.8vw,10px);
}

.alp-dashboard-heading > svg {
  width: 12px;
  height: 12px;
  color: #b6ff00;
}

.alp-dashboard-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.alp-dash-card {
  position: relative;
  min-width: 0;
  padding: 7px;
  border: 1px solid #2c5354;
  border-radius: 5px;
  background: linear-gradient(140deg,#15363a,#0a1c21);
}

.alp-dash-card > svg {
  width: 11px;
  height: 11px;
  display: block;
  margin-bottom: 5px;
  color: var(--alp-green);
}

.alp-dash-card > span {
  display: block;
  margin-bottom: 4px;
  color: #b5cbd0;
  font-size: clamp(5px,.55vw,7px);
}

.alp-dash-card strong {
  display: block;
  color: #f4f9fa;
  font-size: clamp(9px,1vw,13px);
}

.alp-progress {
  height: 3px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 5px;
  background: #284147;
}

.alp-progress span {
  width: 86%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--alp-green);
  animation: alpProgress 2s ease-in-out infinite alternate;
}

.alp-status-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b6ff00;
  box-shadow: 0 0 7px #b6ff00;
}

.alp-chart-card {
  margin-top: 7px;
  padding: 7px;
  border: 1px solid #2c5354;
  border-radius: 5px;
  background: #0b1e23;
}

.alp-chart-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  color: #dbe7e9;
  font-size: clamp(5px,.6vw,7px);
}

.alp-chart-title svg {
  width: 10px;
  height: 10px;
  color: var(--alp-green);
}

.alp-chart {
  display: block;
  width: 100%;
  height: 38px;
  overflow: visible;
}

/* LAPTOP BASE */

.alp-laptop-base {
  position: relative;
  width: 100%;
  margin-top: -1px;
  padding-top: 1px;
  filter: drop-shadow(0 4px 7px #0008);
}

.alp-laptop-base-top {
  position: relative;
  width: 100%;
  height: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3px;
  border: 1px solid #6cbb8a;
  background: linear-gradient(180deg,#b4d6c5,#4c7775 40%,#163538 90%);
  clip-path: polygon(20% 0,80% 0,100% 70%,94% 100%,6% 100%,0 70%);
}

.alp-keyboard {
  width: 42%;
  height: 7px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 2px;
  opacity: .75;
}

.alp-keyboard span {
  border-radius: 1px;
  background: #0d272a;
}

.alp-trackpad {
  width: 20%;
  height: 3px;
  margin-top: 1px;
  border: 1px solid #719b90;
  border-radius: 0 0 3px 3px;
}

.alp-laptop-front {
  width: 34%;
  height: 3px;
  margin: -1px auto 0;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg,#718f8b,#d6eee0,#718f8b);
}

/* FLOATING ICONS */

.alp-float-icon {
  position: absolute;
  z-index: 2;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid #b6ff0055;
  border-radius: 11px;
  background: #0b2527dd;
  color: var(--alp-green);
  box-shadow: 0 0 18px #b6ff0018;
  animation: alpIconFloat 4s ease-in-out infinite;
}

.alp-float-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.8;
}

.alp-cloud-one {
  top: 28%;
  left: 0;
}

.alp-cloud-two {
  top: 53%;
  left: 8%;
  animation-delay: -1.7s;
}

.alp-shield {
  top: 20%;
  right: 2%;
  animation-delay: -2.3s;
}

/* PARTICLES */

.alp-particle {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c6ff49;
  box-shadow: 0 0 10px 2px #b6ff0075;
  animation: alpParticle 3s ease-in-out infinite;
}

.alp-p1 { top: 18%; left: 27%; }
.alp-p2 { top: 36%; right: 12%; animation-delay: -.7s; }
.alp-p3 { bottom: 23%; left: 18%; animation-delay: -1.4s; }
.alp-p4 { bottom: 18%; right: 24%; animation-delay: -2s; }
.alp-p5 { top: 12%; right: 34%; animation-delay: -.4s; }

/* FLOATING STATUS CARD */

.alp-floating-card {
  position: absolute;
  z-index: 3;
  right: -1%;
  bottom: 17%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid #b6ff0045;
  border-radius: 9px;
  background: #071b20ed;
  box-shadow: 0 8px 25px #0005, 0 0 15px #b6ff000b;
  animation: alpCardFloat 4.5s ease-in-out infinite;
}

.alp-floating-card-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #b6ff0017;
  color: var(--alp-green);
}

.alp-floating-card-icon svg {
  width: 17px;
  height: 17px;
}

.alp-floating-card > div:last-child {
  display: grid;
  gap: 4px;
}

.alp-floating-card strong {
  color: #fff;
  font-size: 9px;
}

.alp-floating-card span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #b7c8cc;
  font-size: 7px;
}

.alp-floating-card span b {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--alp-green);
  box-shadow: 0 0 6px #b6ff00;
}

.alp-visual-caption {
  position: absolute;
  bottom: 1%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  color: #a9c2c6;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1px;
  transform: translateX(-50%);
}

.alp-visual-caption span {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--alp-green);
  box-shadow: 0 0 8px #b6ff00;
}

/* ===========================================
   RIGHT ABOUT PANEL
=========================================== */

.alp-about .alp-eyebrow {
  margin-bottom: 10px;
}

.alp-about h2 {
  font-size: clamp(20px,1.8vw,26px);
}

.alp-about-text {
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.65;
}

/* STATS */

.alp-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  margin: 0 0 10px;
  padding: 10px 0;
  border: 1px solid #315058;
  border-radius: 11px;
  background: linear-gradient(120deg,#07171c80,#06141a50);
}

.alp-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  text-align: center;
}

.alp-stat + .alp-stat {
  border-left: 1px solid #315058;
}

.alp-stat-icon {
  margin-bottom: 5px;
  color: var(--alp-green);
}

.alp-stat-icon svg {
  width: 19px;
  height: 19px;
  fill: #b6ff0025;
  stroke-width: 2;
}

.alp-stat strong {
  margin-bottom: 4px;
  color: var(--alp-green);
  font-size: clamp(13px,1.2vw,17px);
  font-weight: 800;
  line-height: 1.2;
}

.alp-stat > span {
  color: #e1e9eb;
  font-size: 9px;
  line-height: 1.4;
}

.alp-bottom-line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg,#8dbb00,#b6ff00,#8dbb00);
  box-shadow: 0 0 10px #b6ff0044;
  transform-origin: left;
  animation: alpLineReveal 1.5s ease both;
}

/* ===========================================
   ANIMATION KEYFRAMES
=========================================== */

@keyframes alpFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes alpGlow {
  from { opacity: .6; transform: scale(.94); }
  to { opacity: 1; transform: scale(1.06); }
}

@keyframes alpLaptopFloat {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-7px) rotate(-3.5deg); }
}

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

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

@keyframes alpParticle {
  0%,100% { opacity: .3; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.5); }
}

@keyframes alpDot {
  0%,100% { opacity: .5; }
  50% { opacity: 1; }
}

@keyframes alpDash {
  to { stroke-dashoffset: -44; }
}

@keyframes alpProgress {
  from { width: 72%; }
  to { width: 92%; }
}

@keyframes alpLineReveal {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

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

@media (max-width: 1100px) {
  .alp-why-section {
    padding: 40px 4%;
  }

  .alp-why-inner {
    grid-template-columns: minmax(0,1fr) minmax(230px,.9fr);
    gap: 35px 28px;
  }

  .alp-why-left h2 {
    font-size: 26px;
  }

  .alp-visual {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .alp-about {
    grid-column: 1;
    grid-row: 2;
  }

  .alp-about h2 {
    font-size: 23px;
  }

  .alp-feature-grid {
    gap: 15px 10px;
  }

  .alp-floating-card {
    right: -3%;
  }
}

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

@media (max-width: 650px) {
  .alp-why-section {
    padding: 36px 20px 32px;
  }

  .alp-why-inner {
    grid-template-columns: minmax(0,1fr);
    gap: 28px;
  }

  .alp-why-left {
    grid-column: 1;
    grid-row: 1;
  }

  .alp-visual {
    grid-column: 1;
    grid-row: 2;
    width: min(100%,390px);
    margin: 0 auto;
    aspect-ratio: 1 / .92;
  }

  .alp-about {
    grid-column: 1;
    grid-row: 3;
  }

  .alp-why-left h2,
  .alp-about h2 {
    font-size: 27px;
  }

  .alp-intro,
  .alp-about-text {
    font-size: 13px;
  }

  .alp-feature-grid {
    gap: 17px 12px;
    margin: 22px 0;
  }

  .alp-feature-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .alp-feature h4 {
    font-size: 11px;
  }

  .alp-feature p {
    font-size: 10px;
  }

  .alp-primary-btn,
  .alp-outline-btn {
    font-size: 11px;
  }

  .alp-screen-content {
    min-height: 130px;
  }

  .alp-floating-card {
    right: 0;
    bottom: 14%;
    padding: 7px 9px;
  }

  .alp-visual-caption {
    bottom: 0;
    font-size: 6px;
    letter-spacing: .7px;
  }

  .alp-stats {
    padding: 13px 0;
  }

  .alp-stat {
    padding: 2px 3px;
  }

  .alp-stat strong {
    font-size: 16px;
  }

  .alp-stat > span {
    font-size: 9px;
  }
}

@media (max-width: 380px) {
  .alp-why-section {
    padding-right: 15px;
    padding-left: 15px;
  }

  .alp-feature-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .alp-feature-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .alp-visual {
    width: 100%;
  }

  .alp-floating-card {
    transform: scale(.88);
    transform-origin: right bottom;
  }

  .alp-stat > span {
    font-size: 8px;
  }
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
  .alp-why-section *,
  .alp-why-section *::before,
  .alp-why-section *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}


/* =====================================
   JASHCODE IT LAYOUT FIX
   Left | Centre | Right - Same Row
===================================== */

#alp-why-section {
    width: 100%;
    overflow: hidden;
    padding: 30px 0 24px;
}

#alp-why-section .alp-why-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 24px !important;
}

/* LEFT */
#alp-why-section .alp-why-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100%;
    min-width: 0;
    align-self: center;
}

/* CENTRE LAPTOP */
#alp-why-section .alp-visual {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    align-self: center;
}

/* RIGHT ABOUT */
#alp-why-section .alp-about {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100%;
    min-width: 0;
    align-self: center;
}

/* Keep headings and paragraphs inside their columns */
#alp-why-section .alp-why-left h2,
#alp-why-section .alp-about h2 {
    max-width: 100%;
    overflow-wrap: break-word;
}

#alp-why-section .alp-intro,
#alp-why-section .alp-about-text {
    max-width: 100%;
}

/* Feature icons and text */
#alp-why-section .alp-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
}

#alp-why-section .alp-feature {
    min-width: 0;
}

#alp-why-section .alp-feature h4,
#alp-why-section .alp-feature p {
    overflow-wrap: anywhere;
}

/* Laptop and floating elements */
#alp-why-section .alp-laptop-scene {
    width: 100%;
    max-width: 410px;
    margin: 0 auto;
}

#alp-why-section .alp-floating-card {
    max-width: 90%;
}

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

@media (min-width: 651px) and (max-width: 1000px) {
    #alp-why-section {
        padding: 28px 0;
    }

    #alp-why-section .alp-why-inner {
        padding: 0 22px;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    #alp-why-section .alp-why-left h2,
    #alp-why-section .alp-about h2 {
        font-size: 21px;
    }

    #alp-why-section .alp-feature-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #alp-why-section .alp-feature-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    #alp-why-section .alp-feature h4 {
        font-size: 9px;
    }

    #alp-why-section .alp-feature p,
    #alp-why-section .alp-about-text {
        font-size: 10px;
    }

    #alp-why-section .alp-stats {
        grid-template-columns: 1fr;
    }

    #alp-why-section .alp-stat + .alp-stat {
        border-left: 0;
        border-top: 1px solid #315058;
        padding-top: 8px;
        margin-top: 8px;
    }

    #alp-why-section .alp-floating-card {
        right: -2%;
        transform: scale(.8);
        transform-origin: right center;
    }
}

/* =====================================
   MOBILE: STACK ONLY ON SMALL SCREENS
===================================== */

@media (max-width: 650px) {
    #alp-why-section .alp-why-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 28px !important;
        padding: 0 20px;
    }

    #alp-why-section .alp-why-left {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #alp-why-section .alp-visual {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
    }

    #alp-why-section .alp-about {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    #alp-why-section .alp-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #alp-why-section .alp-stat + .alp-stat {
        border-top: 0;
        border-left: 1px solid #315058;
        margin-top: 0;
        padding-top: 2px;
    }

    #alp-why-section .alp-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ===== GrowthCloud IT Services Section ===== */

.gc-services {
  --gc-green: #b4f500;
  --gc-border: #30434b;
  --gc-white: #f5f7fa;

  width: 100%;
  padding: 20px 0 15px;
  background:
    radial-gradient(ellipse at 70% 0%, #061519 0%, transparent 60%),
    linear-gradient(110deg, #030a0d 0%, #01080b 100%);
  color: var(--gc-white);
  font-family: inherit;
  box-sizing: border-box;
  overflow: hidden;
}

.gc-services *,
.gc-services *::before,
.gc-services *::after {
  box-sizing: border-box;
}

.gc-services-inner {
  width: 100%;
  max-width: 1280px;
  padding: 0 20px;
  margin: 0 auto;
}

.gc-services-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 9px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .3px;
  color: #f4f6f7;
}

.gc-label-line {
  display: inline-block;
  width: 19px;
  height: 4px;
  border-radius: 10px;
  background: var(--gc-green);
  box-shadow: 0 0 8px rgba(180, 245, 0, .2);
}

.gc-services-heading {
  margin: 0 0 10px;
  padding: 0;
  color: #f7f8fa;
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.5px;
}

.gc-services-row {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.gc-services-track {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}

.gc-services-track::-webkit-scrollbar {
  display: none;
}

.gc-service-card {
  flex: 0 0 104px;
  min-width: 104px;
  height: 87px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 9px 5px 7px;
  border: 1px solid var(--gc-border);
  border-radius: 11px;
  background: rgba(5, 14, 18, .55);
  color: #fff;
  text-decoration: none !important;
  text-align: center;
  scroll-snap-align: start;
  transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.gc-service-card svg {
  display: block;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
}

.gc-service-card span {
  display: block;
  color: #f4f6f8;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 500;
}

.gc-service-card:hover {
  border-color: var(--gc-green);
  background: rgba(180, 245, 0, .055);
  box-shadow: 0 0 16px rgba(180, 245, 0, .07);
  transform: translateY(-2px);
}

.gc-service-card:hover span {
  color: #fff;
}

.gc-zoho-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  gap: 1px;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1px;
  font-family: Arial, sans-serif;
}

.gc-zoho-logo span {
  padding: 2px 1px;
  border-radius: 2px;
  color: #101719;
  font-size: 13px;
  font-weight: 900;
}

.gc-zoho-logo span:nth-child(1) {
  background: #f3a52c;
  transform: rotate(-5deg);
}

.gc-zoho-logo span:nth-child(2) {
  background: #e54e40;
  transform: rotate(4deg);
}

.gc-zoho-logo span:nth-child(3) {
  background: #24b4dc;
  transform: rotate(-3deg);
}

.gc-zoho-logo span:nth-child(4) {
  background: #58bf72;
  transform: rotate(5deg);
}

.gc-services-next {
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  padding: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #29383e;
  border-radius: 50%;
  background: #1c292e;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.gc-services-next svg {
  width: 17px;
  height: 17px;
}

.gc-services-next:hover {
  background: var(--gc-green);
  color: #071014;
}

.gc-services-next:focus-visible,
.gc-service-card:focus-visible {
  outline: 2px solid var(--gc-green);
  outline-offset: 3px;
}

/* Tablet */
@media (max-width: 768px) {
  .gc-services {
    padding: 22px 0;
  }

  .gc-services-inner {
    padding: 0 18px;
  }

  .gc-services-heading {
    font-size: 22px;
  }

  .gc-services-row {
    gap: 10px;
  }

  .gc-services-track {
    gap: 9px;
  }

  .gc-service-card {
    flex-basis: 108px;
    min-width: 108px;
    height: 91px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .gc-services-inner {
    padding: 0 14px;
  }

  .gc-services-heading {
    max-width: 320px;
    font-size: 21px;
    line-height: 1.3;
  }

  .gc-services-row {
    gap: 9px;
  }

  .gc-services-track {
    gap: 8px;
  }

  .gc-service-card {
    flex-basis: 105px;
    min-width: 105px;
    height: 90px;
  }

  .gc-services-next {
    flex-basis: 29px;
    width: 29px;
    height: 29px;
  }
}


/* ===== Testimonials Section ===== */

.gc-testimonials {
  --gc-testimonial-green: #b5f500;
  --gc-testimonial-yellow: #f6ed00;
  --gc-testimonial-border: #35474e;

  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 20px 0 14px;
  box-sizing: border-box;
  color: #fff;
  font-family: inherit;

  background:
    linear-gradient(
      90deg,
      rgba(3, 13, 20, .89),
      rgba(3, 12, 17, .64)
    ),
    linear-gradient(
      0deg,
      rgba(1, 12, 9, .70),
      rgba(3, 13, 20, .28)
    ),
    url("../images/testmonials.png");

  background-size: cover;
  background-position: center 52%;
  background-repeat: no-repeat;
}

.gc-testimonials *,
.gc-testimonials *::before,
.gc-testimonials *::after {
  box-sizing: border-box;
}

.gc-testimonials-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.gc-testimonials-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: #f4f7f8;
  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .15px;
}

.gc-testimonials-line {
  width: 19px;
  height: 4px;
  display: inline-block;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--gc-testimonial-green);
}

.gc-testimonials-heading {
  margin: 0 0 15px;
  padding: 0;
  color: #f6f7f9;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -.4px;
}

.gc-testimonials-carousel {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-width: 0;
}

.gc-testimonials-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.gc-testimonials-track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  transition: transform .45s ease;
  will-change: transform;
}

.gc-testimonial-card {
  position: relative;
  flex: 0 0 calc((100% - 24px) / 2);
  min-width: 0;
  min-height: 116px;
  padding: 12px 13px 10px 43px;
  border: 1px solid var(--gc-testimonial-border);
  border-radius: 11px;
  background: rgba(1, 10, 14, .78);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .08);
  display: flex;
  align-items: flex-start;
}

.gc-testimonial-quote {
  position: absolute;
  top: 5px;
  left: 12px;
  color: var(--gc-testimonial-yellow);
  font-family: Georgia, serif;
  font-size: 43px;
  font-weight: 700;
  line-height: 1;
}

.gc-testimonial-content {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gc-testimonial-content p {
  margin: 0 0 7px;
  padding: 0;
  color: #e3e9ed;
  font-size: 10px;
  line-height: 1.45;
  font-weight: 400;
}

.gc-testimonial-stars {
  margin: 0 0 7px;
  color: #ffe500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 1px;
}

.gc-testimonial-content h3 {
  margin: 0 0 2px;
  padding: 0;
  color: #fff;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
}

.gc-testimonial-role {
  display: block;
  color: #d5dfe4;
  font-size: 9px;
  line-height: 1.4;
  font-weight: 400;
}

.gc-testimonials-arrow {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 50%;
  background: rgba(20, 32, 39, .85);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.gc-testimonials-arrow svg {
  width: 13px;
  height: 13px;
}

.gc-testimonials-arrow:hover {
  background: var(--gc-testimonial-green);
  color: #071014;
}

.gc-testimonials-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 14px;
  margin-top: 12px;
}

.gc-testimonials-dot {
  width: 5px;
  height: 5px;
  padding: 0;
  flex: 0 0 5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: width .25s ease, border-radius .25s ease,
    background .25s ease;
}

.gc-testimonials-dot.is-active {
  width: 16px;
  flex-basis: 16px;
  border-radius: 5px;
  background: var(--gc-testimonial-green);
}

.gc-testimonials-arrow:focus-visible,
.gc-testimonials-dot:focus-visible {
  outline: 2px solid var(--gc-testimonial-green);
  outline-offset: 4px;
}

/* Tablet */
@media (max-width: 900px) {
  .gc-testimonials-track {
    gap: 14px;
  }

  .gc-testimonial-card {
    flex-basis: calc((100% - 14px) / 2);
  }

  .gc-testimonials-inner {
    padding: 0 18px;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .gc-testimonials {
    padding: 22px 0 16px;
  }

  .gc-testimonials-inner {
    padding: 0 14px;
  }

  .gc-testimonials-heading {
    margin-bottom: 13px;
    font-size: 22px;
  }

  .gc-testimonials-carousel {
    gap: 8px;
  }

  .gc-testimonials-track {
    gap: 12px;
  }

  .gc-testimonial-card {
    flex-basis: 100%;
    min-height: 125px;
    padding: 14px 12px 12px 43px;
  }

  .gc-testimonial-content p {
    font-size: 12px;
  }

  .gc-testimonial-content h3 {
    font-size: 11px;
  }

  .gc-testimonial-role {
    font-size: 10px;
  }

  .gc-testimonials-pagination {
    margin-top: 14px;
  }
}


/* JASHCODE IT FOOTER — SCREENSHOT MATCH */

.as-footer {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #020e13;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

.as-footer *,
.as-footer *::before,
.as-footer *::after {
  box-sizing: border-box;
}

.as-footer a {
  color: inherit;
  text-decoration: none;
}

/* TOP BAR: 70px */

.as-footer-top {
  height: 70px;
  min-height: 70px;
  border-top: 2px solid #a7e900;
  border-bottom: 1px solid #a7e900;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 4% 50%,
      rgba(174, 238, 0, .5), transparent 28%),
    linear-gradient(100deg,
      #243e00 0%, #102000 23%,
      #04140d 48%, #010d12 100%);
}

.as-footer-top-inner {
  position: relative;
  width: calc(100% - 40px);
  max-width: 890px;
  height: 67px;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 305px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

/* LOGO */

.as-footer-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  white-space: nowrap;
}

.as-footer-logo {
  width: 48px;
  height: 43px;
  flex: 0 0 48px;
}

.as-footer-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.as-footer-brand-text strong {
  font-family: Arial, sans-serif;
  font-size: 19px;
  line-height: 21px;
  font-weight: 700;
  letter-spacing: -.6px;
  color: #baf12c;
}

.as-footer-brand-text small {
  color: #fff;
  font-size: 10px;
  line-height: 12px;
}

/* CENTER TEXT */

.as-footer-intro {
  min-width: 0;
  white-space: nowrap;
}

.as-footer-intro h2 {
  margin: 0 0 5px;
  padding: 0;
  color: #fff;
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  letter-spacing: -.2px;
}

.as-footer-intro p {
  margin: 0;
  padding: 0;
  color: #f1f4f5;
  font-size: 10px;
  line-height: 13px;
}

/* CONTACT DETAILS */

.as-footer-contacts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.as-footer-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 20px;
  padding: 0 12px;
  border-right: 1px solid rgba(255, 255, 255, .13);
  color: #f5f7f8;
  font-size: 11px;
  line-height: 12px;
  white-space: nowrap;
}

.as-footer-contact:first-child {
  padding-left: 0;
}

.as-footer-contact:last-child {
  padding-right: 0;
  border-right: 0;
}

.as-footer-contact svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: #b7f400;
}

/* BOTTOM BAR: 37px */

.as-footer-bottom {
  height: 37px;
  min-height: 37px;
  background: linear-gradient(100deg, #031017, #010b10);
}

.as-footer-bottom-inner {
  width: calc(100% - 40px);
  max-width: 890px;
  height: 37px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.as-footer-copyright {
  margin: 0;
  padding: 0;
  color: #dce3e8;
  font-size: 10px;
  line-height: 12px;
  white-space: nowrap;
}

.as-footer-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 21px;
  white-space: nowrap;
}

.as-footer-nav a {
  padding: 4px 0;
  color: #e5eaed;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  transition: color .2s ease;
}

.as-footer-nav a:hover {
  color: #b7f400;
}

/* TABLET */

@media (max-width: 950px) {
  .as-footer-top {
    height: auto;
    min-height: 70px;
  }

  .as-footer-top-inner {
    height: auto;
    min-height: 67px;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 10px 16px;
    padding: 10px 0;
  }

  .as-footer-intro {
    white-space: normal;
  }

  .as-footer-contacts {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .as-footer-contact:first-child {
    padding-left: 0;
  }

  .as-footer-bottom {
    height: auto;
  }

  .as-footer-bottom-inner {
    height: auto;
    min-height: 42px;
    flex-wrap: wrap;
    padding: 10px 0;
  }

  .as-footer-nav {
    gap: 16px;
  }
}

/* MOBILE */

@media (max-width: 600px) {
  .as-footer-top-inner {
    width: calc(100% - 32px);
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
  }

  .as-footer-brand {
    gap: 9px;
  }

  .as-footer-intro h2 {
    font-size: 15px;
    line-height: 21px;
    white-space: normal;
  }

  .as-footer-intro p {
    font-size: 14px;
    line-height: 16px;
  }

  .as-footer-contacts {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .as-footer-contact,
  .as-footer-contact:first-child,
  .as-footer-contact:last-child {
    justify-content: flex-start;
    padding: 0;
    border: 0;
    font-size: 14px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .as-footer-bottom-inner {
    width: calc(100% - 32px);
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 0;
  }

  .as-footer-copyright {
    white-space: normal;
    font-size: 10px;
  }

  .as-footer-nav {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px 19px;
  }

  .as-footer-nav a {
    font-size: 10px;
  }
}

.has-dropdown:focus-within .dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scaleY(1) scaleX(1);
}

.has-dropdown:focus-within .dropdown li a {
  transform: translateX(0);
  opacity: 1;
}

.skip-link {
  position: absolute;
  z-index: 10001;
  top: 1rem;
  left: 1rem;
  padding: 0.65rem 1rem;
  color: var(--color-bg);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Theme toggle */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin-left: 12px;
  padding: 0;
  border: 1px solid rgba(170, 255, 0, .45);
  border-radius: 50%;
  background: rgba(170, 255, 0, .08);
  color: #d9ff9a;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.theme-toggle:hover {
  background: #aaff00;
  color: #061116;
}

.theme-toggle:focus-visible {
  outline: 2px solid #aaff00;
  outline-offset: 3px;
}

.theme-toggle i {
  font-size: 12px;
}

html[data-theme="light"] {
  color-scheme: light;
  --color-primary: #84c900;
  --color-primary-strong: #9ae100;
  --color-secondary: #112025;
  --color-accent: #5a7d00;
  --color-bg: #f4f7f9;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-muted: #edf3f3;
  --color-card: #ffffff;
  --color-text: #1d2933;
  --color-text-soft: #35434a;
  --color-text-muted: #5d6d78;
  --color-border: rgba(91, 133, 0, 0.18);
  --color-input: #eef5f7;
  --color-link: #4e7900;
  --color-focus: #689800;
  --color-placeholder: #687983;
  --bs-body-bg: #f4f7f9;
  --bs-body-color: #1d2933;
  --bs-border-color: rgba(91, 133, 0, 0.18);
  --bs-table-color: #1d2933;
  --bs-table-bg: #ffffff;
  --bs-modal-bg: #ffffff;
  --color-shadow: rgba(20, 35, 45, 0.10);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] body {
  background: var(--color-bg);
  color: var(--color-text);
}

html[data-theme="light"] .site-header {
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(244,247,249,0.97));
  border-color: rgba(34, 52, 61, 0.08);
  box-shadow: 0 2px 14px var(--color-shadow);
}

html[data-theme="light"] .main-nav a,
html[data-theme="light"] .dropdown li a {
  color: var(--color-text-soft);
}

html[data-theme="light"] .main-nav > ul > li > a.active,
html[data-theme="light"] .main-nav > ul > li > a:hover {
  color: var(--color-accent);
}

html[data-theme="light"] .main-nav > ul > li > a::after {
  background: var(--color-primary);
}

html[data-theme="light"] .dropdown {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 10px 30px var(--color-shadow);
}

html[data-theme="light"] .dropdown li a:hover {
  background: rgba(142, 192, 0, 0.08);
  color: var(--color-accent);
}

html[data-theme="light"] .dropdown li a[aria-current="page"] {
  color: var(--color-accent);
}

html[data-theme="light"] .mobile-menu-btn {
  color: var(--color-accent);
}

html[data-theme="light"] .theme-toggle {
  border-color: #c5d4af;
  background: #f3f8e9;
  color: #3f6200;
}

html[data-theme="light"] .theme-toggle:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #17210a;
}

html[data-theme="light"] .hero-section {
  background:
    linear-gradient(90deg,
      rgba(247, 250, 252, .98) 0%,
      rgba(247, 250, 252, .92) 36%,
      rgba(247, 250, 252, .55) 68%,
      rgba(247, 250, 252, .28) 100%
    );
  background-size: cover;
  background-position: center center;
}

html[data-theme="light"] .hero-small-title,
html[data-theme="light"] .hero-content h1 {
  color: #1b2932;
}

html[data-theme="light"] .hero-content > p {
  color: #46545d;
}

html[data-theme="light"] .btn-contact {
  color: #35424b;
  border-color: rgba(36, 55, 67, .45);
}

html[data-theme="light"] .feature-item h4 {
  color: #273740;
}

html[data-theme="light"] .feature-item p {
  color: #53616a;
}

html[data-theme="light"] .asx-services {
  background: #f1f5f3;
  color: #1d2c33;
}

html[data-theme="light"] .asx-services::before {
  background:
    radial-gradient(ellipse at 0 100%, rgba(182, 255, 0, .12), transparent 35%),
    linear-gradient(115deg, #f7faf8, #edf3ef 50%, #f7faf8);
}

html[data-theme="light"] .asx-eyebrow,
html[data-theme="light"] .asx-intro h2,
html[data-theme="light"] .asx-trigger,
html[data-theme="light"] .asx-name,
html[data-theme="light"] .asx-chevron {
  color: #26353c;
}

html[data-theme="light"] .asx-intro p,
html[data-theme="light"] .asx-description p {
  color: #536169;
}

html[data-theme="light"] .asx-view-btn {
  color: #334400;
}

html[data-theme="light"] .asx-item,
html[data-theme="light"] .asx-item:hover,
html[data-theme="light"] .asx-item.asx-open {
  border-color: #d1dbd5;
  background: #fff;
}

html[data-theme="light"] .asx-nav-btn {
  border-color: #d1dbd5;
  background: #fff;
  color: #34434a;
}

html[data-theme="light"] .alp-why-section {
  --alp-bg: #f6f8f7;
  background: var(--alp-bg);
  color: #243139;
}

html[data-theme="light"] .alp-why-section::before {
  background:
    radial-gradient(ellipse at 48% 50%, rgba(151, 194, 99, .13), transparent 36%),
    linear-gradient(110deg, #f7faf8, #edf3ef 48%, #f7faf8);
}

html[data-theme="light"] .alp-eyebrow,
html[data-theme="light"] .alp-why-left h2,
html[data-theme="light"] .alp-about h2,
html[data-theme="light"] .alp-feature h4 {
  color: #25343b;
}

html[data-theme="light"] .alp-intro,
html[data-theme="light"] .alp-about-text,
html[data-theme="light"] .alp-feature p {
  color: #536169;
}

html[data-theme="light"] .alp-feature-icon {
  background: #fff;
  box-shadow: 0 3px 12px rgba(35, 55, 40, .08);
}

html[data-theme="light"] .gc-services {
  --gc-border: #d4ded8;
  background: linear-gradient(110deg, #f4f7f5, #eaf0ed);
  color: #26353c;
}

html[data-theme="light"] .gc-services-label,
html[data-theme="light"] .gc-services-heading {
  color: #25343b;
}

html[data-theme="light"] .gc-service-card {
  background: #fff;
  color: #26353c;
  box-shadow: 0 3px 12px rgba(30, 50, 40, .06);
}

html[data-theme="light"] .gc-service-card span {
  color: #34434a;
}

html[data-theme="light"] .gc-testimonials {
  background:
    linear-gradient(90deg, rgba(247, 250, 252, .94), rgba(238, 244, 241, .9)),
    url("../images/testmonials.png");
  background-size: cover;
  background-position: center 52%;
}

html[data-theme="light"] .gc-testimonials-label,
html[data-theme="light"] .gc-testimonials-heading {
  color: #25343b;
}

html[data-theme="light"] .gc-testimonial-card {
  border-color: #d3ddd7;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 16px rgba(35, 55, 45, .08);
}

html[data-theme="light"] .gc-testimonial-content p {
  color: #45545c;
}

html[data-theme="light"] .gc-testimonial-content h3 {
  color: #243139;
}

html[data-theme="light"] .gc-testimonial-role {
  color: #58666d;
}

html[data-theme="light"] .gc-testimonials-arrow {
  border-color: #d3ddd7;
  background: #fff;
  color: #34434a;
}

html[data-theme="light"] .as-footer {
  background: #f5f8f6;
  color: #29373d;
}

html[data-theme="light"] .as-footer-top {
  background:
    radial-gradient(ellipse at 4% 50%, rgba(174, 238, 0, .2), transparent 28%),
    linear-gradient(100deg, #edf5df, #f4f7f3 50%, #eaf0ed);
}

html[data-theme="light"] .as-footer-brand-text small,
html[data-theme="light"] .as-footer-intro h2,
html[data-theme="light"] .as-footer-intro p,
html[data-theme="light"] .as-footer-contact,
html[data-theme="light"] .as-footer-copyright,
html[data-theme="light"] .as-footer-nav a {
  color: #34434a;
}

html[data-theme="light"] .as-footer-bottom {
  background: #e8eeeb;
}

html[data-theme="light"] .as-footer-contact {
  border-color: rgba(35, 55, 45, .16);
}

html[data-theme="light"] .as-footer-contact svg {
  color: #648f00;
}

@media (max-width: 991px) {
  .theme-toggle {
    margin: 14px 0 0;
  }

  html[data-theme="light"] .main-nav {
    background: #fff;
    box-shadow: 0 10px 18px rgba(20, 35, 45, .1);
  }
}




    /* Scope styles within .about class to avoid global conflicts */
    .about {
      position: relative;
      background-color: #080B10;
      color: #ffffff;
      padding: 60px 24px;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Ambient Green Glow Background Accents */
    .about::before {
      content: '';
      position: absolute;
      top: -10%;
      left: -10%;
      width: 40%;
      height: 60%;
      background: radial-gradient(circle, rgba(140, 248, 0, 0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .about::after {
      content: '';
      position: absolute;
      bottom: -10%;
      right: -10%;
      width: 40%;
      height: 60%;
      background: radial-gradient(circle, rgba(140, 248, 0, 0.1) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Main Grid Layout */
    .about-container {
      max-width: 1280px;
      width: 100%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    @media (min-width: 1024px) {
      .about-container {
        grid-template-columns: 1.1fr 0.9fr 0.7fr;
        gap: 32px;
      }
    }

    /* --- LEFT CONTENT --- */
    .about-left {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .about-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #ffffff;
    }

    .about-badge-bar {
      width: 28px;
      height: 8px;
      background-color: #8CF800;
      border-radius: 20px;
    }

    .about-heading {
      font-size: 38px;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.5px;
      margin: 0;
    }

    @media (min-width: 768px) {
      .about-heading {
        font-size: 48px;
      }
    }

    .about-heading-green {
      color: #8CF800;
    }

    .about-description {
      font-size: 15px;
      line-height: 1.6;
      color: #9CA3AF;
      margin: 0;
      max-width: 520px;
    }

    .about-buttons {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      margin-top: 10px;
    }

    /* Buttons Styling */
    .about-btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background-color: #8CF800;
      color: #080B10;
      font-weight: 700;
      font-size: 14px;
      padding: 12px 20px 12px 24px;
      border-radius: 50px;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 4px 20px rgba(140, 248, 0, 0.2);
    }

    .about-btn-primary:hover {
      background-color: #7ce000;
      transform: translateY(-2px);
    }

    .about-btn-icon {
      width: 28px;
      height: 28px;
      background-color: #080B10;
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    .about-btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: transparent;
      color: #ffffff;
      font-weight: 600;
      font-size: 14px;
      padding: 14px 28px;
      border-radius: 50px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .about-btn-secondary:hover {
      border-color: #ffffff;
      background-color: rgba(255, 255, 255, 0.05);
    }

    /* --- CENTER CONTENT (LAPTOP MOCKUP & CODE) --- */
    .about-center {
      display: flex;
      justify-content: center;
    }

    .about-laptop {
      width: 100%;
      max-width: 440px;
      background: #1e2530;
      border-radius: 16px;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
      position: relative;
    }

    /* Webcam Dot */
    .about-laptop::before {
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      background: #4B5563;
      border-radius: 50%;
      margin: 0 auto 8px auto;
    }

    .about-editor {
      background-color: #0d1117;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.05);
      font-family: 'Fira Code', Consolas, Monaco, monospace;
      font-size: 13px;
    }

    .about-editor-header {
      background-color: #161b22;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .about-editor-dots {
      display: flex;
      gap: 6px;
    }

    .about-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .about-dot-red { background-color: #ff5f56; }
    .about-dot-yellow { background-color: #ffbd2e; }
    .about-dot-green { background-color: #27c93f; }

    .about-editor-title {
      font-family: sans-serif;
      font-size: 11px;
      color: #8B949E;
    }

    .about-code {
      padding: 16px;
      line-height: 1.6;
      color: #e6edf3;
      overflow-x: auto;
      margin: 0;
    }

    /* Syntax Highlighting */
    .about-code .keyword { color: #ff7b72; }
    .about-code .component { color: #79c0ff; }
    .about-code .string { color: #a5d6ff; }
    .about-code .tag { color: #7ee787; }
    .about-code .attr { color: #d2a8ff; }
    .about-code .indent-1 { padding-left: 16px; }
    .about-code .indent-2 { padding-left: 32px; }

    /* --- RIGHT CONTENT (FEATURE CARDS) --- */
    .about-right {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .about-card {
      background: rgba(13, 19, 15, 0.7);
      border: 1px solid rgba(140, 248, 0, 0.3);
      border-radius: 16px;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .about-card:hover {
      border-color: #8CF800;
      box-shadow: 0 0 15px rgba(140, 248, 0, 0.2);
      transform: translateX(4px);
    }

    .about-card-icon {
      color: #8CF800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .about-card-text {
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      line-height: 1.3;
    }

/* About page refresh */
.about {
  --about-bg: #061116;
  --about-panel: rgba(8, 22, 27, .82);
  --about-card: rgba(9, 25, 30, .76);
  --about-border: rgba(170, 255, 0, .2);
  --about-accent: #aaff00;
  --about-heading: #f6faf7;
  --about-copy: #b6c5c4;
  position: relative;
  isolation: isolate;
  min-height: 520px;
  padding: clamp(52px, 7vw, 92px) clamp(20px, 5vw, 72px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(48, 105, 45, .2), transparent 40%),
    linear-gradient(115deg, #061116 0%, #09191d 52%, #061116 100%);
  color: var(--about-heading);
}

.about::before {
  z-index: -1;
  inset: 0;
  width: auto;
  height: auto;
  opacity: .26;
  background-image: radial-gradient(rgba(190, 255, 137, .24) .7px, transparent .7px);
  background-size: 26px 26px;
  mask-image: linear-gradient(90deg, transparent, #000 48%, transparent);
}

.about::after {
  z-index: -1;
  right: -10%;
  bottom: -30%;
  width: 45%;
  height: 75%;
  background: radial-gradient(ellipse, rgba(170, 255, 0, .12), transparent 70%);
}

.about-container {
  max-width: 1360px;
  grid-template-columns: minmax(240px, .88fr) minmax(360px, 1.25fr) minmax(170px, .58fr);
  gap: clamp(24px, 3vw, 48px);
}

.about-left {
  gap: 18px;
}

.about-badge {
  gap: 10px;
  color: #d7e6dd;
  font-size: 10px;
  letter-spacing: 1.8px;
}

.about-badge-bar {
  width: 22px;
  height: 4px;
  background: var(--about-accent);
  box-shadow: 0 0 12px rgba(170, 255, 0, .42);
}

.about-heading {
  color: var(--about-heading);
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -1.6px;
}

.about-heading-green {
  color: var(--about-accent);
  text-shadow: 0 0 24px rgba(170, 255, 0, .13);
}

.about-description {
  max-width: 440px;
  color: var(--about-copy);
  font-size: 13px;
  line-height: 1.8;
}

.about-buttons {
  gap: 11px;
  margin-top: 4px;
}

.about-btn-primary {
  gap: 13px;
  padding: 7px 8px 7px 17px;
  border: 1px solid var(--about-accent);
  background: var(--about-accent);
  color: #0a1507;
  font-size: 11px;
  box-shadow: 0 8px 26px rgba(170, 255, 0, .14);
}

.about-btn-primary:hover {
  background: #c0ff47;
  color: #0a1507;
}

.about-btn-icon {
  width: 27px;
  height: 27px;
  background: #10200b;
  color: var(--about-accent);
}

.about-btn-secondary {
  padding: 11px 17px;
  border-color: rgba(222, 239, 228, .25);
  color: #e5eee8;
  font-size: 11px;
}

.about-btn-secondary:hover {
  border-color: var(--about-accent);
  background: rgba(170, 255, 0, .07);
  color: var(--about-accent);
}

.about-center {
  min-width: 0;
  perspective: 1100px;
}

.about-laptop {
  width: 100%;
  max-width: 540px;
  padding: 8px;
  border: 1px solid rgba(199, 226, 210, .16);
  border-radius: 16px 16px 11px 11px;
  background: linear-gradient(145deg, #233238, #111c21 68%);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, .42),
    0 0 42px rgba(170, 255, 0, .07),
    inset 0 1px rgba(255, 255, 255, .13);
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .3s ease;
}

.about-laptop::before {
  width: 5px;
  height: 5px;
  margin: 0 auto 7px;
  background: #aaff00;
  box-shadow: 0 0 8px rgba(170, 255, 0, .7);
}

.about-editor {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(46, 85, 53, .15), transparent 44%),
    #071116;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .24);
  font-size: 11px;
}

.about-editor-header {
  min-height: 39px;
  padding: 0 13px;
  background: rgba(255, 255, 255, .035);
  border-bottom-color: rgba(255, 255, 255, .08);
}

.about-editor-dots {
  gap: 5px;
}

.about-dot {
  width: 7px;
  height: 7px;
}

.about-editor-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #c6d5cd;
  font: 500 9px/1.2 'Fira Code', Consolas, monospace;
}

.about-editor-title i {
  color: #7fc8ff;
  font-size: 12px;
}

.about-editor-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #c5f58a;
  font: 600 7px/1 'Poppins', sans-serif;
  letter-spacing: .7px;
}

.about-editor-live span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--about-accent);
  box-shadow: 0 0 8px rgba(170, 255, 0, .72);
  animation: aboutStatusPulse 1.8s ease-in-out infinite;
}

.about-code {
  min-height: 224px;
  padding: 15px 13px;
  overflow: hidden;
  color: #dce9e1;
  font: 10px/1.8 'Fira Code', Consolas, monospace;
  tab-size: 2;
}

.about-code code {
  display: block;
  white-space: normal;
}

.about-code-line {
  display: flex;
  min-height: 18px;
  white-space: pre;
}

.about-code-number {
  width: 30px;
  flex: 0 0 30px;
  color: rgba(187, 210, 194, .35);
  user-select: none;
}

.about-code-text {
  color: #dce9e1;
}

.about-code-line:nth-child(1) .about-code-text,
.about-code-line:nth-child(4) .about-code-text {
  color: #c792ea;
}

.about-code-line:nth-child(2) .about-code-text,
.about-code-line:nth-child(5) .about-code-text {
  color: #82d9a5;
}

.about-code-line:nth-child(3) .about-code-text,
.about-code-line:nth-child(6) .about-code-text {
  color: #f3c878;
}

.about-code-line:nth-child(7) .about-code-text,
.about-code-line:nth-child(8) .about-code-text {
  color: #aaff00;
}

.about-code-cursor {
  display: inline-block;
  width: 6px;
  height: 13px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--about-accent);
  animation: aboutCursorBlink .8s steps(2, start) infinite;
}

.about-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 29px;
  padding: 0 12px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: rgba(202, 219, 208, .58);
  font: 500 7px/1 'Poppins', sans-serif;
  letter-spacing: .2px;
}

.about-editor-footer span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.about-editor-footer i {
  color: var(--about-accent);
}

.about-laptop-base {
  position: relative;
  width: 108%;
  height: 8px;
  margin: 0 -4% -15px;
  border: 1px solid rgba(191, 216, 200, .19);
  border-top: 1px solid rgba(215, 239, 223, .3);
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, #36464a, #111b1f);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .28);
}

.about-laptop-base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 43%;
  width: 14%;
  height: 3px;
  border-radius: 0 0 5px 5px;
  background: rgba(194, 215, 199, .18);
}

.about-right {
  gap: 12px;
}

.about-card {
  min-height: 82px;
  padding: 14px;
  border: 1px solid rgba(170, 255, 0, .16);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(13, 30, 33, .9), rgba(7, 19, 23, .82));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  cursor: default;
}

.about-card:hover {
  border-color: rgba(170, 255, 0, .55);
  background: linear-gradient(135deg, rgba(26, 45, 33, .96), rgba(7, 19, 23, .9));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2), 0 0 20px rgba(170, 255, 0, .07);
  transform: translateY(-3px);
}

.about-card-icon {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(170, 255, 0, .17);
  border-radius: 10px;
  background: rgba(170, 255, 0, .06);
  color: var(--about-accent);
}

.about-card-icon svg {
  width: 19px;
  height: 19px;
}

.about-card-text {
  color: #edf4ef;
  font-size: 12px;
  line-height: 1.4;
}

@keyframes aboutCursorBlink {
  to { visibility: hidden; }
}

@keyframes aboutStatusPulse {
  50% { opacity: .45; }
}

@media (max-width: 700px) {
  .about-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 32px;
  }

  .about-right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-card {
    min-height: 74px;
  }
}

@media (max-width: 700px) {
  .about {
    padding: 48px 20px;
  }

  .about-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .about-left {
    gap: 15px;
  }

  .about-heading {
    font-size: clamp(34px, 9vw, 46px);
  }

  .about-description {
    font-size: 12px;
  }

  .about-center {
    width: 100%;
  }

  .about-laptop {
    max-width: 520px;
    margin: auto;
  }

  .about-right {
    grid-column: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .about-card {
    min-height: 88px;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 11px;
  }

  .about-card-text {
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  .about-right {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-card {
    min-height: 64px;
    flex-direction: row;
    align-items: center;
  }

  .about-code {
    font-size: 8px;
  }

  .about-code-number {
    width: 24px;
    flex-basis: 24px;
  }
}

html[data-theme="light"] .about {
  --about-bg: #f4f8f5;
  --about-panel: rgba(255, 255, 255, .92);
  --about-card: rgba(255, 255, 255, .88);
  --about-border: rgba(95, 143, 15, .22);
  --about-accent: #649600;
  --about-heading: #1f3029;
  --about-copy: #52645b;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(156, 202, 108, .2), transparent 42%),
    linear-gradient(115deg, #f7faf8, #edf4ef 52%, #f7faf8);
}

html[data-theme="light"] .about::before {
  background-image: radial-gradient(rgba(94, 142, 43, .25) .7px, transparent .7px);
}

html[data-theme="light"] .about-badge {
  color: #52645b;
}

html[data-theme="light"] .about-btn-secondary {
  border-color: rgba(48, 73, 58, .28);
  color: #30493a;
}

html[data-theme="light"] .about-btn-secondary:hover {
  border-color: #649600;
  color: #4f7900;
}

html[data-theme="light"] .about-card {
  border-color: rgba(95, 143, 15, .2);
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(243, 248, 243, .92));
}

html[data-theme="light"] .about-card-text {
  color: #263b30;
}

html[data-theme="light"] .about-laptop {
  border-color: rgba(61, 91, 68, .25);
  background: linear-gradient(145deg, #d6e0d9, #aab9b0 68%);
  box-shadow: 0 24px 55px rgba(47, 69, 53, .2), 0 0 35px rgba(100, 150, 0, .09);
}

/* Keep the hero-sized minimum without clipping content on shorter viewports. */
.about {
  height: auto;
  min-height: clamp(330px, 32vw, 470px);
  padding: clamp(24px, 3.2vw, 46px) clamp(24px, 5vw, 72px);
  border-bottom: 1px solid rgba(170, 255, 0, .16);
}

.about::before {
  opacity: .2;
  mask-image: linear-gradient(90deg, transparent 3%, #000 54%, transparent 100%);
}

.about::after {
  right: 26%;
  bottom: -65%;
  width: 48%;
  height: 110%;
  background: radial-gradient(ellipse, rgba(170, 255, 0, .11), transparent 70%);
}

.about-container {
  height: auto;
  grid-template-columns: minmax(220px, .86fr) minmax(330px, 1.3fr) minmax(155px, .55fr);
  gap: clamp(20px, 2.5vw, 40px);
}

.about-left {
  gap: clamp(11px, 1.3vw, 18px);
}

.about-heading {
  font-size: clamp(32px, 3.15vw, 46px);
  letter-spacing: -1.8px;
}

.about-description {
  font-size: clamp(11px, .88vw, 13px);
  line-height: 1.72;
}

.about-center {
  position: relative;
  align-items: center;
  isolation: isolate;
}

.about-center::before,
.about-center::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 112%;
  aspect-ratio: 1.9 / 1;
  border: 1px solid rgba(170, 255, 0, .11);
  border-radius: 50%;
  pointer-events: none;
}

.about-center::before {
  transform: translate(-50%, -50%) rotate(-20deg);
  animation: aboutOrbit 18s linear infinite;
}

.about-center::after {
  width: 98%;
  border-style: dashed;
  border-color: rgba(132, 204, 22, .16);
  transform: translate(-50%, -50%) rotate(24deg);
  animation: aboutOrbitReverse 25s linear infinite;
}

.about-laptop {
  max-width: 510px;
  transform: rotateX(2deg) rotateY(-3deg);
}

.about-code {
  min-height: clamp(144px, 14vw, 190px);
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: clamp(8px, .72vw, 10px);
  line-height: 1.7;
}

.about-code-line {
  min-height: 16px;
}

.about-right {
  gap: 10px;
}

.about-card {
  min-height: 72px;
  padding: 11px;
}

@keyframes aboutOrbit {
  to { transform: translate(-50%, -50%) rotate(340deg); }
}

@keyframes aboutOrbitReverse {
  to { transform: translate(-50%, -50%) rotate(-336deg); }
}

@media (min-width: 1024px) and (max-width: 1120px) {
  .about-code {
    min-height: 144px;
    font-size: 8px;
  }

  .about-code-line {
    min-height: 14px;
  }
}

@media (max-width: 700px) {
  .about {
    height: auto;
    min-height: 0;
    padding: 48px clamp(20px, 5vw, 48px);
  }

  .about-container {
    height: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  .about-right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-card {
    min-height: 74px;
  }
}

@media (min-width: 701px) and (max-width: 1023px) {
  .about {
    min-height: 0;
    padding: 40px clamp(20px, 4vw, 42px);
  }

  .about-container {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) minmax(112px, .6fr);
    gap: clamp(12px, 2vw, 20px);
  }

  .about-heading {
    font-size: clamp(26px, 3.5vw, 36px);
    letter-spacing: -1px;
  }

  .about-description {
    font-size: clamp(10px, 1.35vw, 12px);
  }

  .about-center::before,
  .about-center::after {
    width: 120%;
  }

  .about-laptop {
    transform: none;
  }

  .about-right {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .about-card {
    min-height: 68px;
    gap: 8px;
    padding: 9px;
  }

  .about-card-icon {
    width: 32px;
    height: 32px;
  }

  .about-card-icon svg {
    width: 17px;
    height: 17px;
  }

  .about-card-text {
    font-size: 10px;
  }
}

@media (max-width: 700px) {
  .about {
    padding: 42px clamp(16px, 5vw, 24px);
  }

  .about-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .about-left {
    gap: 15px;
  }

  .about-heading {
    font-size: clamp(32px, 8vw, 42px);
    line-height: 1.1;
  }

  .about-description {
    max-width: 60ch;
    font-size: 13px;
    line-height: 1.7;
  }

  .about-buttons {
    gap: 10px;
  }

  .about-center {
    width: 100%;
  }

  .about-center::before,
  .about-center::after {
    width: 115%;
  }

  .about-laptop {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    transform: none;
  }

  .about-code {
    min-height: clamp(150px, 48vw, 190px);
    font-size: clamp(8px, 2.4vw, 9px);
  }

  .about-code-number {
    width: 26px;
    flex-basis: 26px;
  }

  .about-right {
    grid-column: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .about-card {
    min-width: 0;
    min-height: 82px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 10px;
  }

  .about-card-text {
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  .about {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .about-container {
    gap: 22px;
  }

  .about-heading {
    font-size: clamp(30px, 8.5vw, 34px);
  }

  .about-buttons {
    align-items: stretch;
  }

  .about-btn-primary,
  .about-btn-secondary {
    justify-content: center;
    padding-right: 13px;
    padding-left: 13px;
  }

  .about-code {
    min-height: 150px;
    font-size: 8px;
  }

  .about-code-number {
    width: 22px;
    flex-basis: 22px;
  }

  .about-card {
    padding: 8px;
  }

  .about-card-icon {
    width: 32px;
    height: 32px;
  }

  .about-card-text {
    font-size: 9px;
  }
}

html[data-theme="light"] .about {
  border-bottom-color: rgba(100, 150, 0, .22);
}

html[data-theme="light"] .about-center::before {
  border-color: rgba(100, 150, 0, .2);
}

html[data-theme="light"] .about-center::after {
  border-color: rgba(100, 150, 0, .16);
}



/* ===== JASHCODE IT ABOUT SECTION ===== */
.jash-about,
.jash-about * {
    box-sizing: border-box;
}

.jash-about {
    --lime: #aaff00;
    --bg: #001014;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--bg);
    color: #f5f8fa;
    border-top: 2px solid var(--lime);
    border-bottom: 1px solid #263a24;
    font-family: Arial, Helvetica, sans-serif;
}

.jash-about-inner {
    display: grid;
    grid-template-columns: 35% 40% 25%;
    align-items: stretch;
    min-height: 335px;
    max-width: 1600px;
    margin: auto;
}

/* ===== LEFT GRAPHIC AREA ===== */
.jash-visual {
    position: relative;
    min-width: 0;
    min-height: 335px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 45% 45%, #075174 0%, #00283d 40%,
        #001014 78%);
    clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
}

.jash-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(125deg, transparent 35%, rgba(0,170,255,.15)),
        repeating-linear-gradient(
            0deg, transparent 0 28px,
            rgba(0,204,255,.12) 29px 30px
        ),
        repeating-linear-gradient(
            90deg, transparent 0 28px,
            rgba(0,204,255,.12) 29px 30px
        );
    opacity: .7;
    z-index: -1;
}

.jash-visual::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 130%;
    right: 12%;
    top: -15%;
    background: linear-gradient(
        180deg, #d5ff26, #8aff00 55%, #2a8c00
    );
    transform: skewX(-22deg);
    filter: drop-shadow(0 0 18px rgba(170,255,0,.65));
    opacity: .95;
    z-index: -1;
}

/* Digital orbital rings */
.jash-orbit {
    position: absolute;
    left: 42%;
    top: 47%;
    width: 225px;
    height: 225px;
    border: 1px solid rgba(0,205,255,.55);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(65deg);
    box-shadow: 0 0 22px rgba(0,175,255,.15);
    animation: jashOrbit 12s linear infinite;
}

.jash-orbit.orbit-two {
    width: 175px;
    height: 275px;
    border-color: rgba(170,255,0,.6);
    transform: translate(-50%, -50%) rotateX(65deg) rotateZ(60deg);
    animation-duration: 16s;
    animation-direction: reverse;
}

.jash-orbit.orbit-three {
    width: 270px;
    height: 160px;
    border-color: rgba(0,185,255,.45);
    transform: translate(-50%, -50%) rotateX(65deg) rotateZ(-35deg);
    animation-duration: 20s;
}

@keyframes jashOrbit {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

/* Central digital brain / network */
.jash-tech-art {
    position: absolute;
    width: 82%;
    height: 85%;
    left: 1%;
    top: 7%;
    overflow: visible;
}

.jash-tech-art .network-line {
    stroke-dasharray: 7 9;
    animation: jashDash 5s linear infinite;
}

@keyframes jashDash {
    to { stroke-dashoffset: -100; }
}

.jash-tech-art .pulse-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: jashPulse 2s ease-in-out infinite alternate;
}

.jash-tech-art .pulse-node:nth-of-type(2n) {
    animation-delay: .7s;
}

@keyframes jashPulse {
    from { opacity: .4; }
    to { opacity: 1; }
}

.jash-tech-label {
    position: absolute;
    left: 10%;
    bottom: 12%;
    color: #c5faff;
    font-size: 10px;
    letter-spacing: 3px;
    font-weight: bold;
    text-shadow: 0 0 10px #00c8ff;
}

.jash-tech-label span {
    color: var(--lime);
}

.jash-scan {
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, transparent, #aaff00, #00cfff, transparent);
    box-shadow: 0 0 15px #00cfff;
    opacity: .7;
    animation: jashScan 6s ease-in-out infinite;
}

@keyframes jashScan {
    0%, 100% { top: 8%; opacity: 0; }
    15%, 80% { opacity: .8; }
    90% { top: 90%; opacity: 0; }
}

/* ===== MIDDLE CONTENT ===== */
.jash-story {
    padding: 38px 28px 30px 24px;
    min-width: 0;
    align-self: center;
}

.jash-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 9px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #f3f6f7;
}

.jash-eyebrow::before {
    content: "";
    width: 20px;
    height: 6px;
    border-radius: 10px;
    background: var(--lime);
    display: inline-block;
}

.jash-story h2 {
    color: #f6f7f8;
    font-size: clamp(20px, 2.1vw, 22px);
    line-height: 1.2;
    margin: 0 0 2px;
    font-weight: 750;
    letter-spacing: -.6px;
}

.jash-story h3 {
    color: var(--lime);
    font-size: clamp(22px, 2.4vw, 27px);
    line-height: 1.2;
    margin: 0 0 12px;
    font-weight: 750;
    letter-spacing: -.5px;
}

.jash-story p {
    color: #e0e6e9;
    font-size: 11.2px;
    line-height: 1.55;
    margin: 0 0 7px;
    font-weight: 400;
}

.jash-know-more {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
    margin-top: 7px;
    padding: 7px 12px 7px 19px;
    min-width: 108px;
    border: 1px solid var(--lime);
    border-radius: 30px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 10px;
    font-weight: 600;
    background: transparent;
    transition: background .25s, color .25s, box-shadow .25s;
}

.jash-know-more span {
    color: var(--lime);
    font-size: 17px;
    line-height: 10px;
    transition: transform .25s;
}

.jash-know-more:hover {
    background: var(--lime);
    color: #071006 !important;
    box-shadow: 0 0 20px rgba(170,255,0,.22);
}

.jash-know-more:hover span {
    color: #071006;
    transform: translateX(3px);
}

/* ===== RIGHT STATISTICS ===== */
.jash-stats {
    margin: 30px 0;
    padding: 0 24px;
    border-left: 1px solid rgba(170,255,0,.5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.jash-stat {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 0 0 12px;
    min-height: 70px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.jash-stat:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.jash-stat-icon {
    width: 42px;
    height: 42px;
    color: var(--lime);
    display: flex;
    align-items: center;
    justify-content: center;
}

.jash-stat-icon svg {
    width: 39px;
    height: 39px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jash-stat h4 {
    color: var(--lime);
    font-size: 23px;
    font-weight: 750;
    line-height: 1.1;
    margin: 0 0 5px;
    letter-spacing: -.5px;
}

.jash-stat p {
    color: #f0f2f3;
    font-size: 10.5px;
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
}

/* ===== TABLET ===== */
@media (max-width: 900px) {
    .jash-about-inner {
        grid-template-columns: 38% 62%;
    }

    .jash-visual {
        grid-row: 1;
        min-height: 330px;
    }

    .jash-story {
        padding: 32px 25px 30px 12px;
    }

    .jash-stats {
        grid-column: 1 / -1;
        margin: 0 25px 25px;
        padding: 20px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(170,255,0,.5);
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .jash-stat {
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 8px;
        border-bottom: 0;
        padding: 0;
    }

    .jash-stat-icon,
    .jash-stat-icon svg {
        width: 32px;
        height: 32px;
    }

    .jash-stat h4 {
        font-size: 20px;
    }

    .jash-stat p {
        white-space: normal;
        font-size: 10px;
    }
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
    .jash-about-inner {
        grid-template-columns: 1fr;
    }

    .jash-visual {
        grid-row: auto;
        min-height: 275px;
        clip-path: none;
    }

    .jash-visual::after {
        width: 45px;
        right: 8%;
    }

    .jash-tech-art {
        width: 90%;
        height: 90%;
        left: 0;
        top: 4%;
    }

    .jash-orbit {
        width: 190px;
        height: 190px;
    }

    .jash-story {
        padding: 27px 23px 28px;
    }

    .jash-story h2 {
        font-size: 23px;
    }

    .jash-story h3 {
        font-size: 27px;
    }

    .jash-story p {
        font-size: 13px;
        line-height: 1.65;
    }

    .jash-eyebrow {
        font-size: 10px;
    }

    .jash-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0 23px 25px;
        gap: 0 14px;
    }

    .jash-stat {
        min-height: 83px;
        padding: 13px 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .jash-stat:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .jash-stat h4 {
        font-size: 21px;
    }

    .jash-stat p {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jash-about *,
    .jash-about *::before,
    .jash-about *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ===== OUR VALUES SECTION ===== */
.values-section,
.values-section * {
    box-sizing: border-box;
}

.values-section {
    --v-lime: #aaff00;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #001014;
    color: #f6f8fa;
    border-top: 2px solid var(--v-lime);
    isolation: isolate;
    font-family: Arial, Helvetica, sans-serif;
}

.values-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 0% 70%,
            rgba(66, 151, 0, .25), transparent 38%),
        radial-gradient(ellipse at 100% 40%,
            rgba(0, 110, 95, .12), transparent 42%),
        linear-gradient(110deg, #00110b, #001014 60%, #00130c);
    z-index: -3;
}

/* ===== ANIMATED TECH BACKGROUND ===== */
.values-tech-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 32%;
    height: 100%;
    min-height: 270px;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.values-tech-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            transparent 70%, #001014 100%),
        repeating-linear-gradient(
            0deg, transparent 0 29px,
            rgba(170, 255, 0, .09) 30px
        ),
        repeating-linear-gradient(
            90deg, transparent 0 29px,
            rgba(170, 255, 0, .07) 30px
        );
    mask-image: linear-gradient(
        180deg, transparent, #000 20%, #000 80%, transparent
    );
}

.values-tech-bg::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    left: 23%;
    top: 45%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(64, 255, 0, .12);
    filter: blur(50px);
    animation: valuesGlow 5s ease-in-out infinite alternate;
}

.values-circuit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.values-circuit .circuit-line {
    stroke: #7dff00;
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 5 9;
    opacity: .45;
    animation: valuesCircuitFlow 8s linear infinite;
}

.values-circuit .circuit-line.blue {
    stroke: #00d9ff;
    opacity: .4;
    animation-duration: 12s;
}

.values-circuit .circuit-node {
    fill: #b5ff00;
    filter: drop-shadow(0 0 4px #aaff00);
    animation: valuesNodePulse 2.5s ease-in-out infinite alternate;
}

.values-circuit .circuit-node:nth-child(2n) {
    animation-delay: 1s;
}

.values-particles {
    position: absolute;
    inset: 0;
}

.values-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #caff55;
    box-shadow: 0 0 9px #aaff00;
    animation: valuesFloat 6s ease-in-out infinite alternate;
}

.values-particle:nth-child(1) {
    left: 12%; top: 22%;
}
.values-particle:nth-child(2) {
    left: 25%; top: 48%;
    animation-delay: 1s;
}
.values-particle:nth-child(3) {
    left: 8%; top: 72%;
    animation-delay: 2s;
}
.values-particle:nth-child(4) {
    left: 42%; top: 30%;
    animation-delay: .6s;
}
.values-particle:nth-child(5) {
    left: 34%; top: 83%;
    animation-delay: 1.5s;
}
.values-particle:nth-child(6) {
    left: 19%; top: 58%;
    animation-delay: 2.4s;
}

.values-light-beam {
    position: absolute;
    left: -20%;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        transparent, #aaff00, #00eaff, transparent
    );
    box-shadow: 0 0 14px rgba(170,255,0,.65);
    opacity: .5;
    transform: rotate(18deg);
    animation: valuesBeam 8s ease-in-out infinite;
}

@keyframes valuesCircuitFlow {
    to { stroke-dashoffset: -112; }
}

@keyframes valuesNodePulse {
    from { opacity: .3; }
    to { opacity: 1; }
}

@keyframes valuesFloat {
    from { transform: translateY(12px); opacity: .25; }
    to { transform: translateY(-18px); opacity: 1; }
}

@keyframes valuesGlow {
    from { opacity: .35; }
    to { opacity: .85; }
}

@keyframes valuesBeam {
    0% { left: -20%; opacity: 0; }
    20% { opacity: .6; }
    80% { opacity: .5; }
    100% { left: 110%; opacity: 0; }
}

/* ===== MAIN LAYOUT ===== */
.values-inner {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 34px 4.5%;
    display: grid;
    grid-template-columns: 28% 72%;
    gap: 0;
    align-items: stretch;
}

/* ===== LEFT INTRO ===== */
.values-intro {
    position: relative;
    padding: 0 28px 0 0;
    align-self: start;
    z-index: 1;
}

.values-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #f4f6f5;
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 11px;
}

.values-eyebrow::before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 6px;
    border-radius: 10px;
    background: var(--v-lime);
    box-shadow: 0 0 10px rgba(170,255,0,.2);
}

.values-intro h2 {
    margin: 0 0 11px;
    color: #f8fafb;
    font-size: clamp(23px, 2.5vw, 26px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.5px;
}

.values-intro h2 span {
    color: var(--v-lime);
}

.values-intro p {
    margin: 0;
    color: #e0e7e8;
    font-size: 12px;
    line-height: 1.65;
    font-weight: 400;
    max-width: 260px;
}

/* Decorative underline */
.values-underline {
    position: relative;
    margin-top: 18px;
    width: 100px;
    height: 13px;
}

.values-underline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 75px;
    height: 2px;
    background: var(--v-lime);
    transform: rotate(-12deg);
    box-shadow: 0 0 8px rgba(170,255,0,.3);
}

.values-underline::after {
    content: "";
    position: absolute;
    left: 72px;
    top: 1px;
    width: 25px;
    height: 2px;
    background: var(--v-lime);
    transform: rotate(-20deg);
}

/* ===== THREE VALUE CARDS ===== */
.values-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.values-card {
    min-width: 0;
    min-height: 218px;
    padding: 19px 20px 16px;
    border: 1px solid rgba(115, 157, 68, .4);
    border-radius: 15px;
    background: linear-gradient(
        145deg,
        rgba(3, 22, 25, .92),
        rgba(0, 13, 19, .96)
    );
    position: relative;
    overflow: hidden;
    transition:
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.values-card::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    left: -100%;
    top: 0;
    background: linear-gradient(
        90deg, transparent, var(--v-lime), transparent
    );
    transition: left .6s ease;
}

.values-card:hover {
    border-color: rgba(170,255,0,.85);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.2);
}

.values-card:hover::before {
    left: 100%;
}

.values-card-icon {
    width: 40px;
    height: 40px;
    display: block;
    margin-bottom: 9px;
    color: var(--v-lime);
}

.values-card-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px rgba(170,255,0,.12));
}

.values-card h3 {
    color: #f5f7f8;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: -.3px;
}

.values-card h3 span {
    color: var(--v-lime);
}

.values-card p {
    color: #e3e9eb;
    font-size: 12.5px;
    line-height: 1.58;
    font-weight: 400;
    margin: 0;
}

/* ===== VALUES LIST ===== */
.values-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.values-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #f0f3f4;
    font-size: 12.5px;
    line-height: 1.25;
    margin: 0 !important;
    padding: 0 !important;
}

.values-list li::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    color: #001014;
    background: var(--v-lime);
    font-size: 8px;
    font-weight: 900;
}

/* ===== TABLET ===== */
@media (max-width: 900px) {
    .values-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 30px 28px;
    }

    .values-intro {
        padding-right: 0;
    }

    .values-intro p {
        max-width: 500px;
    }

    .values-tech-bg {
        width: 100%;
        height: 45%;
    }

    .values-cards {
        gap: 12px;
    }

    .values-card {
        padding: 18px 16px;
        min-height: 220px;
    }
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
    .values-inner {
        padding: 27px 20px;
        gap: 22px;
    }

    .values-intro h2 {
        font-size: 27px;
    }

    .values-intro p {
        font-size: 13px;
        max-width: 100%;
    }

    .values-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .values-card {
        min-height: 0;
        padding: 22px;
        border-radius: 13px;
    }

    .values-card-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 10px;
    }

    .values-card h3 {
        font-size: 20px;
    }

    .values-card p,
    .values-list li {
        font-size: 13px;
        line-height: 1.65;
    }

    .values-list {
        gap: 8px;
    }

    .values-tech-bg {
        width: 100%;
        height: 350px;
        opacity: .8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .values-section *,
    .values-section *::before,
    .values-section *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== TECHNOLOGY INNOVATION SECTION ===== */
.jash-innovation,
.jash-innovation * {
    box-sizing: border-box;
}

.jash-innovation {
    --ai-lime: #aaff00;
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: #001014;
    color: #f5f8fa;
    border-top: 2px solid var(--ai-lime);
    font-family: Arial, Helvetica, sans-serif;
}

.jash-innovation::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse at 52% 50%,
            rgba(0, 100, 135, .22), transparent 44%),
        radial-gradient(ellipse at 0 70%,
            rgba(88, 155, 0, .15), transparent 38%),
        linear-gradient(110deg, #001014, #00131a 55%, #001014);
}

.ai-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .28;
    background-image:
        linear-gradient(rgba(0, 200, 255, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 200, 255, .09) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(90deg, transparent, black 35%, black 75%, transparent);
}

.ai-layout {
    max-width: 1600px;
    min-height: 280px;
    margin: auto;
    padding: 24px 5% 24px 6.3%;
    display: grid;
    grid-template-columns: 31% 48% 21%;
    align-items: center;
    gap: 0;
}

/* LEFT CONTENT */
.ai-intro {
    position: relative;
    z-index: 2;
    padding-right: 22px;
}

.ai-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    color: #f4f7f8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
}

.ai-eyebrow::before {
    content: "";
    width: 23px;
    height: 6px;
    border-radius: 8px;
    background: var(--ai-lime);
}

.ai-intro h2 {
    margin: 0 0 11px;
    color: #f7f9fa;
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 750;
    letter-spacing: -.8px;
    line-height: 1.13;
}

.ai-intro h2 span {
    color: var(--ai-lime);
}

.ai-intro p {
    margin: 0 0 17px;
    max-width: 330px;
    color: #dce6e9;
    font-size: 11.5px;
    line-height: 1.65;
}

.ai-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 7px 10px 7px 19px;
    min-height: 36px;
    border: 1px solid var(--ai-lime);
    border-radius: 30px;
    background: var(--ai-lime);
    color: #071006 !important;
    text-decoration: none !important;
    font-size: 10.5px;
    font-weight: 700;
    transition: .25s ease;
}

.ai-button:hover {
    color: #071006 !important;
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(170,255,0,.25);
}

.ai-button span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    color: var(--ai-lime);
    background: #061008;
    font-size: 15px;
}

/* CENTER TECHNOLOGY VISUAL */
.ai-visual {
    position: relative;
    height: 235px;
    min-width: 0;
    overflow: hidden;
}

.ai-halo {
    position: absolute;
    width: 215px;
    height: 215px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0, 191, 255, .09);
    filter: blur(24px);
}

.ai-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 210px;
    height: 95px;
    border: 1px solid rgba(0, 205, 255, .7);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    animation: aiRotate 12s linear infinite;
}

.ai-orbit.orbit-b {
    width: 220px;
    height: 100px;
    border-color: rgba(170,255,0,.7);
    transform: translate(-50%, -50%) rotate(48deg);
    animation-duration: 16s;
    animation-direction: reverse;
}

.ai-orbit.orbit-c {
    width: 155px;
    height: 155px;
    border-color: rgba(0, 170, 255, .4);
    transform: translate(-50%, -50%);
    animation-duration: 20s;
}

@keyframes aiRotate {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

.ai-globe {
    position: absolute;
    width: 142px;
    height: 142px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 218, 255, .8);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%,
            rgba(0, 230, 255, .38), transparent 32%),
        radial-gradient(circle at 65% 75%,
            rgba(0, 98, 255, .3), transparent 40%),
        linear-gradient(135deg, #052f47, #00121f 70%);
    box-shadow:
        inset -10px -10px 30px rgba(0, 100, 255, .2),
        0 0 25px rgba(0, 191, 255, .2);
    animation: aiFloat 4s ease-in-out infinite;
}

.ai-globe::before,
.ai-globe::after {
    content: "";
    position: absolute;
    inset: 12px 34px;
    border: 1px solid rgba(0, 217, 255, .6);
    border-radius: 50%;
}

.ai-globe::after {
    inset: 0 23px;
    border-color: rgba(170,255,0,.45);
    transform: rotate(90deg);
}

.ai-globe svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

@keyframes aiFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

/* Floating tech nodes */
.ai-node {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(170,255,0,.6);
    border-radius: 12px;
    color: var(--ai-lime);
    background: rgba(0, 20, 25, .94);
    box-shadow: 0 0 20px rgba(170,255,0,.07);
    animation: aiNodeFloat 4s ease-in-out infinite;
}

.ai-node svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ai-node.cloud {
    left: 8%;
    top: 19%;
}

.ai-node.shield {
    right: 8%;
    top: 15%;
    animation-delay: .7s;
}

.ai-node.code {
    left: 12%;
    bottom: 13%;
    animation-delay: 1.2s;
}

.ai-node.data {
    right: 8%;
    bottom: 13%;
    animation-delay: .4s;
}

@keyframes aiNodeFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}

/* Small glowing data particles */
.ai-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ai-lime);
    box-shadow: 0 0 9px var(--ai-lime);
    animation: aiParticle 3s ease-in-out infinite alternate;
}

.ai-particle.p1 { left: 25%; top: 14%; }
.ai-particle.p2 { right: 24%; top: 42%; animation-delay: 1s; }
.ai-particle.p3 { left: 28%; bottom: 18%; animation-delay: .5s; }
.ai-particle.p4 { right: 22%; bottom: 26%; animation-delay: 1.5s; }

@keyframes aiParticle {
    from { opacity: .25; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(-8px); }
}

/* RIGHT QUOTE */
.ai-quote {
    position: relative;
    z-index: 2;
    padding-left: 17px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ai-quote blockquote {
    margin: 0;
    color: #dce6eb;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: clamp(20px, 2.1vw, 25px);
    line-height: 1.12;
    transform: rotate(-4deg);
}

.ai-quote .mark {
    color: var(--ai-lime);
    font-size: 26px;
    font-weight: 700;
}

.ai-quote-line {
    width: 74px;
    height: 3px;
    margin: 13px 0 0 7px;
    border-radius: 100%;
    background: var(--ai-lime);
    transform: rotate(-16deg);
    box-shadow: 0 0 12px rgba(170,255,0,.3);
}

/* TABLET */
@media (max-width: 900px) {
    .ai-layout {
        grid-template-columns: 40% 60%;
        padding: 28px;
        gap: 10px 0;
    }

    .ai-visual {
        height: 250px;
    }

    .ai-quote {
        grid-column: 1 / -1;
        align-items: center;
        padding: 15px;
        border-top: 1px solid rgba(170,255,0,.18);
    }

    .ai-quote blockquote {
        text-align: center;
        transform: none;
        font-size: 22px;
    }

    .ai-quote-line {
        margin-left: auto;
        margin-right: auto;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .ai-layout {
        grid-template-columns: 1fr;
        padding: 28px 22px 24px;
    }

    .ai-intro {
        padding-right: 0;
    }

    .ai-intro h2 {
        font-size: 29px;
    }

    .ai-intro p {
        max-width: 100%;
        font-size: 13px;
    }

    .ai-visual {
        height: 255px;
        margin: 2px -5px;
    }

    .ai-node {
        width: 39px;
        height: 39px;
    }

    .ai-node.cloud { left: 2%; }
    .ai-node.shield { right: 2%; }
    .ai-node.code { left: 3%; }
    .ai-node.data { right: 2%; }

    .ai-globe {
        width: 132px;
        height: 132px;
    }

    .ai-orbit {
        width: 190px;
    }

    .ai-orbit.orbit-b {
        width: 200px;
    }

    .ai-quote {
        padding: 22px 0 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jash-innovation *,
    .jash-innovation *::before,
    .jash-innovation *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ===== jash FUTURE CTA ===== */
.jash-cta,
.jash-cta * {
    box-sizing: border-box;
}

.jash-cta {
    --cta-lime: #aaff00;
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    padding: 20px 5%;
    color: #fff;
    background: #001014;
    border-top: 1px solid rgba(170,255,0,.75);
    border-bottom: 1px solid rgba(170,255,0,.35);
    font-family: Arial, Helvetica, sans-serif;
}

.jash-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(ellipse at 5% 50%,
            rgba(50,145,0,.28), transparent 35%),
        radial-gradient(ellipse at 95% 50%,
            rgba(53,155,0,.3), transparent 38%),
        linear-gradient(100deg, #001014, #00201c 50%, #001014);
}

.jash-cta::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: .38;
    background-image:
        radial-gradient(circle, rgba(170,255,0,.8) 1px, transparent 1.5px);
    background-size: 23px 23px;
    mask-image: linear-gradient(
        90deg, black, transparent 32%, transparent 68%, black
    );
    animation: ctaParticles 12s linear infinite;
}

@keyframes ctaParticles {
    from { background-position: 0 0; }
    to { background-position: 46px -46px; }
}

/* Animated light waves */
.jash-cta-waves {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .7;
}

.jash-cta-waves path {
    fill: none;
    stroke: #8eff00;
    stroke-width: 1;
    stroke-dasharray: 5 7;
    animation: ctaWaveMove 12s linear infinite;
}

.jash-cta-waves path:nth-child(2) {
    stroke: #00c8ff;
    opacity: .45;
    animation-duration: 17s;
}

.jash-cta-waves path:nth-child(3) {
    stroke-width: 2;
    opacity: .35;
    animation-duration: 21s;
}

@keyframes ctaWaveMove {
    to { stroke-dashoffset: -150; }
}

/* Layout */
.jash-cta-inner {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    min-height: 62px;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
}

/* Animated cloud icon */
.jash-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 76px;
    height: 60px;
    color: var(--cta-lime);
}

.jash-cta-icon::before {
    content: "";
    position: absolute;
    width: 60px;
    height: 45px;
    border-radius: 50%;
    background: rgba(170,255,0,.18);
    filter: blur(20px);
    animation: ctaGlow 2.5s ease-in-out infinite alternate;
}

.jash-cta-icon svg {
    position: relative;
    width: 68px;
    height: 58px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(170,255,0,.3));
    animation: ctaCloudFloat 3.5s ease-in-out infinite;
}

@keyframes ctaGlow {
    from { opacity: .4; transform: scale(.85); }
    to { opacity: 1; transform: scale(1.15); }
}

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

/* Text panel */
.jash-cta-content {
    min-width: 0;
    position: relative;
    padding: 10px 16px;
    border-left: 1px solid rgba(170,255,0,.4);
    border-top: 1px solid rgba(170,255,0,.3);
    border-bottom: 1px solid rgba(170,255,0,.3);
    border-radius: 13px 0 0 13px;
    background: linear-gradient(
        90deg, rgba(0,18,21,.85), rgba(0,25,25,.35)
    );
}

.jash-cta-content::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    width: 70px;
    height: 1px;
    background: var(--cta-lime);
    box-shadow: 0 0 9px var(--cta-lime);
}

.jash-cta-content h2 {
    margin: 0 0 5px;
    color: #f7f9fa;
    font-size: clamp(17px, 1.8vw, 21px);
    font-weight: 750;
    letter-spacing: -.4px;
    line-height: 1.2;
}

.jash-cta-content p {
    margin: 0;
    color: #dce5e7;
    font-size: 11.5px;
    line-height: 1.5;
}

/* Button */
.jash-cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    padding: 8px 12px 8px 18px;
    min-width: 154px;
    min-height: 39px;
    border-radius: 40px;
    border: 1px solid var(--cta-lime);
    color: #061004 !important;
    background: var(--cta-lime);
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
    transition: transform .25s ease, box-shadow .25s ease;
}

.jash-cta-button:hover {
    color: #061004 !important;
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(170,255,0,.35);
}

.jash-cta-button .cta-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 50%;
    color: var(--cta-lime);
    background: #071007;
    font-size: 15px;
    transition: transform .25s ease;
}

.jash-cta-button:hover .cta-arrow {
    transform: translateX(2px);
}

/* Tablet */
@media (max-width: 800px) {
    .jash-cta {
        padding: 22px 25px;
    }

    .jash-cta-inner {
        grid-template-columns: 65px minmax(0, 1fr);
        gap: 14px;
    }

    .jash-cta-icon {
        width: 60px;
    }

    .jash-cta-icon svg {
        width: 58px;
    }

    .jash-cta-button {
        grid-column: 2;
        justify-self: start;
    }

    .jash-cta-content {
        padding: 11px 13px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .jash-cta {
        padding: 22px 18px;
    }

    .jash-cta-inner {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .jash-cta-icon {
        justify-content: flex-start;
        height: 48px;
    }

    .jash-cta-icon svg {
        width: 59px;
        height: 48px;
    }

    .jash-cta-content {
        padding: 12px 13px;
        border-radius: 8px;
    }

    .jash-cta-content h2 {
        font-size: 19px;
        line-height: 1.35;
    }

    .jash-cta-content p {
        font-size: 12px;
        line-height: 1.6;
    }

    .jash-cta-button {
        grid-column: 1;
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jash-cta *,
    .jash-cta *::before,
    .jash-cta *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ===== SMART IT HERO SECTION ===== */
.smart-it-hero,
.smart-it-hero * {
  box-sizing: border-box;
}

.smart-it-hero {
  --si-green: #b5ff00;
  --si-dark: #020c0f;
  position: relative;
  width: 100%;
  min-height: 280px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(ellipse at 70% 55%, rgba(91,139,0,.15), transparent 38%),
    linear-gradient(105deg, #02090c 0%, #031013 52%, #071310 100%);
  font-family: Inter, Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

.smart-it-hero a {
  text-decoration: none;
}

.si-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .14;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(181,255,0,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181,255,0,.09) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent, black 50%, black);
}

.si-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(65px);
}

.si-glow-one {
  width: 230px;
  height: 140px;
  top: 70px;
  left: 48%;
  background: rgba(112,255,0,.12);
}

.si-glow-two {
  width: 180px;
  height: 130px;
  right: 0;
  bottom: -65px;
  background: rgba(181,255,0,.09);
}

.si-hero-inner {
  width: 100%;
  max-width: 1440px;
  min-height: 280px;
  margin: 0 auto;
  padding: 25px 5.85%;
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: center;
  gap: 0;
}

/* ===== LEFT CONTENT ===== */
.si-content {
  position: relative;
  z-index: 4;
  max-width: 520px;
  padding: 0 0 2px;
}

.si-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  color: #f5f8fa;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .35px;
}

.si-eyebrow-line {
  display: block;
  width: 24px;
  height: 5px;
  border-radius: 10px;
  background: var(--si-green);
  box-shadow: 0 0 12px rgba(181,255,0,.3);
}

.si-content h1 {
  padding: 0;
  margin: 0 0 8px;
  color: #f5f6f8;
  font-size: clamp(24px, 2.85vw, 31px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.8px;
}

.si-content h1 span {
  display: block;
  margin-top: 2px;
  color: var(--si-green);
}

.si-description {
  max-width: 415px;
  margin: 0 0 14px;
  color: #e0e5e8;
  font-size: 12px;
  line-height: 1.48;
  font-weight: 400;
}

.si-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.si-btn-primary,
.si-btn-outline {
  min-height: 35px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 8px 13px;
  border-radius: 30px;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
  transition: background .25s ease, transform .25s ease,
              box-shadow .25s ease, color .25s ease;
}

.si-btn-primary {
  color: #101900;
  background: var(--si-green);
  border: 1px solid var(--si-green);
  box-shadow: 0 0 18px rgba(181,255,0,.07);
}

.si-btn-primary:hover {
  color: #101900;
  background: #d0ff68;
  box-shadow: 0 0 24px rgba(181,255,0,.32);
  transform: translateY(-2px);
}

.si-arrow {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #192900;
  color: var(--si-green);
  font-size: 12px;
}

.si-btn-outline {
  min-width: 134px;
  color: #fff;
  border: 1px solid #c4c8ca;
  background: rgba(255,255,255,.015);
}

.si-btn-outline:hover {
  color: var(--si-green);
  border-color: var(--si-green);
  background: rgba(181,255,0,.05);
  transform: translateY(-2px);
}

/* ===== RIGHT INFOGRAPHIC ===== */
.si-visual {
  position: relative;
  width: 100%;
  height: 235px;
  min-width: 0;
  perspective: 800px;
}

.si-light-beam {
  position: absolute;
  width: 68%;
  height: 125px;
  left: 15%;
  top: 48px;
  opacity: .55;
  filter: blur(22px);
  background: radial-gradient(ellipse, rgba(171,255,0,.34), transparent 67%);
}

.si-floor-glow {
  position: absolute;
  left: 3%;
  right: 2%;
  bottom: 8px;
  height: 36px;
  border-top: 2px solid rgba(181,255,0,.44);
  background: linear-gradient(0deg, rgba(181,255,0,.09), transparent);
  transform: perspective(150px) rotateX(18deg);
  box-shadow: 0 -4px 18px rgba(181,255,0,.12);
}

.si-orbit {
  position: absolute;
  border: 1px solid rgba(181,255,0,.13);
  transform: skewY(-13deg) rotate(-6deg);
  pointer-events: none;
}

.si-orbit-one {
  width: 72%;
  height: 75%;
  left: 12%;
  top: 12%;
  border-radius: 18px;
}

.si-orbit-two {
  width: 60%;
  height: 63%;
  left: 21%;
  top: 18%;
  border-color: rgba(181,255,0,.09);
  border-radius: 12px;
}

.si-tech-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--si-green);
  box-shadow: 0 0 12px 3px rgba(181,255,0,.5);
  animation: siParticle 3s ease-in-out infinite;
}

.si-particle-one { top: 35px; left: 43%; }
.si-particle-two { top: 90px; left: 82%; animation-delay: .7s; }
.si-particle-three { top: 180px; left: 22%; animation-delay: 1.4s; }
.si-particle-four { top: 52px; left: 70%; animation-delay: 1.9s; }

@keyframes siParticle {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.7); }
}

/* ===== CSS PLANT ===== */
.si-plant {
  position: absolute;
  width: 45px;
  height: 96px;
  bottom: 26px;
  left: 3%;
  z-index: 1;
}

.si-leaf {
  position: absolute;
  width: 16px;
  height: 30px;
  border: 1px solid rgba(179,255,40,.65);
  background: linear-gradient(135deg, #426b11, #071b0c);
  border-radius: 100% 0 100% 0;
  transform-origin: bottom right;
  box-shadow: inset 0 0 8px rgba(181,255,0,.1);
}

.leaf-one { left: 7px; top: 8px; transform: rotate(-36deg); }
.leaf-two { left: 20px; top: 4px; transform: rotate(30deg) scale(.9); }
.leaf-three { left: 0; top: 31px; transform: rotate(-53deg) scale(.85); }
.leaf-four { left: 24px; top: 27px; transform: rotate(37deg); }
.leaf-five { left: 12px; top: 41px; transform: rotate(-4deg) scale(.8); }

.si-plant-stem {
  position: absolute;
  left: 21px;
  top: 28px;
  width: 2px;
  height: 36px;
  background: #587e20;
}

.si-plant-pot {
  position: absolute;
  width: 34px;
  height: 25px;
  left: 5px;
  bottom: 0;
  background: linear-gradient(90deg, #17201d, #52625a, #18201c);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
  border-bottom: 1px solid rgba(181,255,0,.3);
}

/* ===== LAPTOP ===== */
.si-laptop-scene {
  position: absolute;
  width: 61%;
  height: 152px;
  left: 18%;
  top: 62px;
  z-index: 2;
  transform: rotate(-4deg) skewY(-1deg);
  filter: drop-shadow(0 10px 15px rgba(0,0,0,.55));
  animation: siLaptopFloat 5s ease-in-out infinite;
}

@keyframes siLaptopFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

.si-laptop-lid {
  position: absolute;
  width: 88%;
  height: 130px;
  left: 6%;
  top: 0;
  padding: 7px 7px 6px;
  overflow: hidden;
  border: 2px solid #65736b;
  border-bottom: 3px solid #b2c3a4;
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(140deg, #101c21, #05090d);
  box-shadow:
    0 0 0 1px rgba(181,255,0,.14),
    0 0 17px rgba(181,255,0,.15),
    inset 0 0 15px rgba(181,255,0,.04);
}

.si-laptop-lid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.07), transparent 35%);
}

.si-screen-top {
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  background: #18272d;
  color: #a8b4b7;
  font-size: 6px;
}

.si-camera {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a7ff00;
}

.si-screen-brand {
  margin-right: auto;
  margin-left: 7px;
  letter-spacing: 1px;
}

.si-screen-controls {
  letter-spacing: 2px;
}

.si-editor {
  height: calc(100% - 14px);
  display: flex;
  background: #0a121b;
  overflow: hidden;
}

.si-editor-sidebar {
  width: 23px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  color: #647b83;
  background: #101c27;
  font-size: 9px;
}

.si-sidebar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #aaff00;
}

.si-editor-code {
  flex: 1;
  min-width: 0;
  padding: 4px 5px;
  overflow: hidden;
  color: #c5d2dd;
  font-family: Consolas, "Courier New", monospace;
  font-size: clamp(5px, .67vw, 8px);
  line-height: 1.55;
}

.si-code-heading {
  padding-bottom: 3px;
  margin-bottom: 2px;
  color: #d5e1e6;
  border-bottom: 1px solid #25333d;
  font-family: Arial, sans-serif;
  font-size: 7px;
}

.si-file-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 4px;
  border-radius: 50%;
  background: #ffbd56;
}

.si-code-line {
  display: flex;
  gap: 7px;
  white-space: nowrap;
}

.si-ln { color: #536673; }

.si-code-line i {
  font-style: normal;
}

.si-purple { color: #c792ea; }
.si-blue { color: #82aaff; }
.si-green { color: #c3e88d; }
.si-orange { color: #f78c6c; }
.si-yellow { color: #ffcb6b; }

.si-active-line {
  margin-top: 1px;
  background: rgba(181,255,0,.06);
}

.si-cursor {
  display: inline-block;
  width: 4px;
  height: 8px;
  margin-left: 3px;
  vertical-align: middle;
  background: var(--si-green);
  animation: siBlink 1s steps(2) infinite;
}

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

.si-laptop-base {
  position: absolute;
  width: 111%;
  height: 16px;
  left: -5.5%;
  top: 126px;
  border: 1px solid #89958b;
  border-top: 2px solid #d1d7cb;
  border-radius: 2px 2px 12px 12px;
  background: linear-gradient(180deg, #65736b, #1a2422 70%, #0b1010);
  box-shadow: 0 5px 8px rgba(0,0,0,.65);
}

.si-laptop-notch {
  position: absolute;
  width: 21%;
  height: 4px;
  left: 39.5%;
  top: 0;
  border-radius: 0 0 5px 5px;
  background: #27332f;
}

.si-laptop-edge {
  position: absolute;
  height: 1px;
  left: 12%;
  right: 12%;
  bottom: 3px;
  background: rgba(181,255,0,.35);
}

/* ===== FLOATING INFOGRAPHICS ===== */
.si-float-card {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  color: #fff;
  border: 1px solid rgba(181,255,0,.9);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(18,37,31,.94), rgba(3,14,15,.96));
  box-shadow:
    0 0 12px rgba(181,255,0,.1),
    inset 0 0 12px rgba(181,255,0,.04);
  animation: siCardFloat 4s ease-in-out infinite;
}

.si-float-card svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.si-card-code {
  left: 8%;
  top: 115px;
  width: 40px;
  height: 40px;
  animation-delay: -.5s;
}

.si-card-web {
  left: 65%;
  top: 48px;
  width: 46px;
  height: 46px;
  animation-delay: -1.4s;
}

.si-card-mobile {
  left: 79%;
  top: 88px;
  width: 47px;
  height: 47px;
  animation-delay: -.8s;
}

.si-card-cloud {
  left: 71%;
  top: 137px;
  width: 45px;
  height: 42px;
  animation-delay: -2s;
}

.si-card-monitor {
  left: 88%;
  top: 133px;
  width: 42px;
  height: 42px;
  animation-delay: -1.1s;
}

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

/* ===== DEVELOPMENT TAG ===== */
.si-development-tag {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 1%;
  min-width: 175px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 2px solid var(--si-green);
  border-radius: 11px;
  color: #f5f7f8;
  background: rgba(3,15,16,.92);
  font-size: 12px;
  font-weight: 750;
  transform: rotate(-4deg);
  box-shadow: 0 0 12px rgba(181,255,0,.08);
}

.si-code-icon {
  color: var(--si-green);
  font-family: Consolas, monospace;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -3px;
}

.si-tag-light {
  position: absolute;
  width: 40px;
  height: 2px;
  right: -1px;
  bottom: -2px;
  background: var(--si-green);
  box-shadow: 0 0 12px 3px rgba(181,255,0,.65);
}

.si-development-tag::after {
  content: "";
  position: absolute;
  left: 42px;
  bottom: -12px;
  border-top: 12px solid var(--si-green);
  border-right: 10px solid transparent;
}

/* ===== HANDWRITTEN SLOGAN ===== */
.si-handwritten {
  position: absolute;
  z-index: 5;
  right: -1%;
  top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--si-green);
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(14px, 1.9vw, 22px);
  line-height: 1.35;
  font-style: italic;
  font-weight: 500;
  transform: rotate(-8deg);
  text-shadow: 0 0 14px rgba(181,255,0,.13);
}

.si-hand-underline {
  width: 95%;
  height: 9px;
  margin-top: 0;
  border-top: 2px solid var(--si-green);
  transform: rotate(-8deg) skewX(-24deg);
  border-radius: 50%;
}

.si-hand-underline::after {
  content: "";
  display: block;
  width: 80%;
  margin-top: 4px;
  margin-left: 12%;
  border-top: 1px solid rgba(181,255,0,.7);
}

/* ===== STATUS ===== */
.si-status {
  position: absolute;
  z-index: 4;
  left: 34%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #aebdb3;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.3px;
}

.si-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--si-green);
  box-shadow: 0 0 8px var(--si-green);
}

/* ===== TABLET ===== */
@media (min-width: 1200px) {
  .si-hero-inner {
    padding-left: 6%;
    padding-right: 6%;
  }

  .si-visual {
    height: 260px;
  }

  .si-laptop-scene {
    top: 68px;
    height: 165px;
  }

  .si-laptop-lid {
    height: 140px;
  }

  .si-laptop-base {
    top: 136px;
  }

  .si-description {
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  .si-hero-inner {
    grid-template-columns: 47% 53%;
    padding: 25px 4%;
  }

  .si-content h1 {
    font-size: clamp(23px, 3.1vw, 29px);
  }

  .si-description {
    font-size: 11px;
  }

  .si-actions {
    gap: 8px;
  }

  .si-btn-primary,
  .si-btn-outline {
    font-size: 9px;
    gap: 7px;
  }

  .si-visual {
    transform: scale(.96);
    transform-origin: center right;
  }

  .si-handwritten {
    right: -1%;
    font-size: 15px;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  .smart-it-hero {
    min-height: auto;
  }

  .si-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 32px 22px 24px;
    gap: 10px;
  }

  .si-content {
    max-width: 100%;
  }

  .si-eyebrow {
    margin-bottom: 12px;
    font-size: 10px;
  }

  .si-content h1 {
    font-size: clamp(27px, 7vw, 35px);
    line-height: 1.12;
    letter-spacing: -.8px;
    margin-bottom: 12px;
  }

  .si-description {
    max-width: 480px;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 17px;
  }

  .si-actions {
    gap: 10px;
  }

  .si-btn-primary,
  .si-btn-outline {
    min-height: 40px;
    padding: 9px 13px;
    font-size: 10px;
  }

  .si-visual {
    width: 100%;
    height: 250px;
    margin-top: 10px;
    transform: none;
    transform-origin: center;
  }

  .si-laptop-scene {
    width: 66%;
    left: 12%;
    top: 72px;
  }

  .si-development-tag {
    left: 1%;
    top: 8px;
    min-width: 157px;
    height: 43px;
    font-size: 10px;
  }

  .si-code-icon {
    font-size: 21px;
  }

  .si-handwritten {
    top: 10px;
    right: 0;
    font-size: 15px;
  }

  .si-card-code {
    left: 3%;
    top: 133px;
  }

  .si-card-web {
    left: 69%;
    top: 66px;
  }

  .si-card-mobile {
    left: 81%;
    top: 116px;
  }

  .si-card-cloud {
    left: 72%;
    top: 166px;
  }

  .si-card-monitor {
    left: 87%;
    top: 170px;
  }

  .si-plant {
    left: 0;
    bottom: 27px;
  }

  .si-status {
    left: 30%;
    bottom: 0;
  }
}

/* Small phones */
@media (max-width: 380px) {
  .si-hero-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .si-content h1 {
    font-size: 27px;
  }

  .si-description {
    font-size: 12px;
  }

  .si-actions {
    gap: 8px;
  }

  .si-btn-primary,
  .si-btn-outline {
    padding: 9px 10px;
    font-size: 9px;
  }

  .si-visual {
    height: 220px;
  }

  .si-laptop-scene {
    top: 65px;
  }

  .si-handwritten {
    font-size: 12px;
  }

  .si-float-card {
    width: 36px;
    height: 36px;
  }

  .si-float-card svg {
    width: 24px;
    height: 24px;
  }
}

/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  .smart-it-hero *,
  .smart-it-hero *::before,
  .smart-it-hero *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


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

#wdServices {
  --wd-green: #b6ff00;
  --wd-bg: #020e12;
  --wd-border: #122c32;
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 25px 1.8%;
  overflow: hidden;
  color: #f7fafb;
  background:
    radial-gradient(ellipse at 15% 45%, rgba(91,145,0,.09), transparent 40%),
    radial-gradient(ellipse at 65% 100%, rgba(0,96,83,.08), transparent 38%),
    #020e12;
  border-top: 1px solid rgba(181,255,0,.65);
  font-family: Inter, Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

#wdServices button,
#wdServices a {
  font-family: inherit;
}

#wdServices button:focus-visible,
#wdServices a:focus-visible {
  outline: 2px solid var(--wd-green);
  outline-offset: 3px;
}

#wdServices .wd-layout {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 32% 31% 32%;
  gap: 2.5%;
  align-items: center;
}

/* LEFT VISUAL */
#wdServices .wd-visual {
  position: relative;
  width: 100%;
  height: 233px;
  overflow: hidden;
  border-radius: 9px;
  background:
    radial-gradient(ellipse at 42% 48%, rgba(115,177,0,.19), transparent 50%),
    linear-gradient(135deg, #101d13, #051114 70%);
  box-shadow: inset 0 0 0 1px rgba(183,255,0,.06);
  perspective: 800px;
}

#wdServices .wd-backlight {
  position: absolute;
  left: 12%;
  top: 8%;
  width: 70%;
  height: 80%;
  border-radius: 50%;
  background: rgba(129,255,0,.13);
  filter: blur(35px);
}

#wdServices .wd-tech-grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(182,255,0,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(182,255,0,.12) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(90deg, black, transparent);
}

#wdServices .wd-light-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #b6ff00, transparent);
  box-shadow: 0 0 15px 3px rgba(182,255,0,.3);
}

/* CSS PLANT */
#wdServices .wd-plant {
  position: absolute;
  z-index: 1;
  left: 2%;
  bottom: 20px;
  width: 54px;
  height: 150px;
}

#wdServices .wd-leaf {
  position: absolute;
  width: 22px;
  height: 58px;
  border-radius: 100% 0 100% 0;
  border: 1px solid rgba(167,255,30,.55);
  background: linear-gradient(145deg, #9bc51d, #24480d 58%, #06180b);
  transform-origin: bottom center;
  box-shadow: inset 0 0 9px rgba(181,255,0,.12);
}

#wdServices .wd-leaf.l1 {
  left: 2px; top: 8px; transform: rotate(-34deg);
}
#wdServices .wd-leaf.l2 {
  left: 25px; top: 2px; transform: rotate(29deg);
}
#wdServices .wd-leaf.l3 {
  left: 2px; top: 38px; transform: rotate(-48deg) scale(.88);
}
#wdServices .wd-leaf.l4 {
  left: 33px; top: 32px; transform: rotate(39deg) scale(.9);
}
#wdServices .wd-leaf.l5 {
  left: 17px; top: 48px; transform: rotate(-5deg) scale(.8);
}

#wdServices .wd-pot {
  position: absolute;
  left: 9px;
  bottom: 0;
  width: 36px;
  height: 38px;
  background: linear-gradient(90deg, #1b281e, #68745d, #1b281e);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 15% 100%);
  border-bottom: 1px solid var(--wd-green);
}

/* LAPTOP */
#wdServices .wd-laptop {
  position: absolute;
  z-index: 2;
  left: 12%;
  top: 60px;
  width: 72%;
  height: 157px;
  transform: rotate(-5deg);
  animation: wdLaptopFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 10px 9px rgba(0,0,0,.6));
}

#wdServices .wd-laptop-screen {
  position: absolute;
  left: 4%;
  top: 0;
  width: 90%;
  height: 127px;
  padding: 5px;
  border: 2px solid #697b7d;
  border-bottom-color: #d1d9c8;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(145deg, #19282d, #03070a);
  box-shadow: 0 0 12px rgba(182,255,0,.16);
}

#wdServices .wd-browser {
  height: 13px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  background: #18262b;
  color: #e5ebec;
}

#wdServices .wd-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
#wdServices .wd-dot.red { background: #ff7777; }
#wdServices .wd-dot.yellow { background: #ffd66c; }
#wdServices .wd-dot.green { background: #a7ff55; }

#wdServices .wd-browser-name {
  margin-left: 5px;
  font-size: 6px;
  letter-spacing: .4px;
}

#wdServices .wd-webpage {
  position: relative;
  height: calc(100% - 13px);
  overflow: hidden;
  background: linear-gradient(130deg, #101f29, #0a151b);
}

#wdServices .wd-web-nav {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #e5ebee;
  background: rgba(5,14,20,.92);
  font-size: 5px;
}

#wdServices .wd-brand-mark {
  color: var(--wd-green);
  font-size: 9px;
}

#wdServices .wd-web-content {
  display: grid;
  grid-template-columns: 52% 48%;
  height: 75px;
  padding: 6px 5px 0;
}

#wdServices .wd-web-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

#wdServices .wd-web-copy small {
  font-size: 4px;
  color: var(--wd-green);
  letter-spacing: .5px;
}

#wdServices .wd-web-copy strong {
  color: #fff;
  font-size: clamp(9px, 1.15vw, 15px);
  line-height: 1.1;
  letter-spacing: -.4px;
}

#wdServices .wd-web-copy p {
  margin: 0;
  font-size: 4px;
  color: #b8c5cb;
}

#wdServices .wd-fake-button {
  padding: 3px 5px;
  color: #172200;
  background: var(--wd-green);
  border-radius: 2px;
  font-size: 4px;
}

#wdServices .wd-building {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  background: linear-gradient(180deg, #132d40, #9bb2a4 70%, #293a2e);
}

#wdServices .wd-building-sky {
  position: absolute;
  inset: 0 0 40%;
  background: linear-gradient(130deg, #31556b, #7eaaac);
}

#wdServices .wd-building-main {
  position: absolute;
  width: 65%;
  height: 70%;
  left: 17%;
  bottom: 0;
  border: 1px solid #b5c7bd;
  background: linear-gradient(90deg, #b1bcb5, #e5e9d9, #849e9b);
  transform: skewY(-7deg);
}

#wdServices .wd-window-grid {
  position: absolute;
  inset: 7% 10%;
  background-image:
    linear-gradient(90deg, transparent 43%, #304d58 44%, #304d58 48%, transparent 49%),
    linear-gradient(transparent 43%, #304d58 44%, #304d58 48%, transparent 49%);
  background-size: 15px 14px;
}

#wdServices .wd-building-side {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20%;
  height: 72%;
  background: linear-gradient(90deg, #607b77, #263c43);
  transform: skewY(19deg);
}

#wdServices .wd-building-ground {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 9px;
  background: linear-gradient(#85957e, #283b32);
}

#wdServices .wd-web-bottom {
  display: flex;
  gap: 5px;
  padding: 5px 4px;
}

#wdServices .wd-web-bottom span {
  width: 22%;
  height: 4px;
  border-radius: 2px;
  background: #344f59;
}

#wdServices .wd-web-bottom span:first-child {
  background: var(--wd-green);
}

#wdServices .wd-laptop-base {
  position: absolute;
  top: 124px;
  left: -3%;
  width: 105%;
  height: 16px;
  border: 1px solid #83918b;
  border-top: 2px solid #d4ded1;
  border-radius: 1px 1px 9px 9px;
  background: linear-gradient(#74827a, #242d29 65%, #0d1312);
}

#wdServices .wd-laptop-base span {
  position: absolute;
  top: 0;
  left: 38%;
  width: 24%;
  height: 4px;
  background: #27342d;
  border-radius: 0 0 5px 5px;
}

@keyframes wdLaptopFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

/* PHONE */
#wdServices .wd-phone {
  position: absolute;
  z-index: 4;
  width: 59px;
  height: 112px;
  right: 24%;
  bottom: 17px;
  transform: rotate(-5deg);
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.55));
  animation: wdPhoneFloat 4s ease-in-out infinite;
}

#wdServices .wd-phone-frame {
  width: 100%;
  height: 100%;
  padding: 4px;
  border: 2px solid #87928a;
  border-radius: 10px;
  background: linear-gradient(135deg, #202a29, #050909);
  box-shadow: 0 0 8px rgba(181,255,0,.18);
}

#wdServices .wd-phone-notch {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 35%;
  width: 30%;
  height: 4px;
  border-radius: 0 0 5px 5px;
  background: #080c0d;
}

#wdServices .wd-phone-screen {
  height: 100%;
  overflow: hidden;
  background: #f4f7f4;
  border-radius: 5px;
  color: #18251f;
}

#wdServices .wd-phone-header {
  height: 17px;
  padding: 4px 5px;
  display: flex;
  justify-content: space-between;
  font-size: 6px;
  background: #fff;
}

#wdServices .wd-phone-header span:first-child {
  color: #5b9b00;
}

#wdServices .wd-phone-hero {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 5px 4px;
  background: #e9f2e7;
}

#wdServices .wd-phone-hero small {
  font-size: 4px;
  color: #628800;
}

#wdServices .wd-phone-hero strong {
  font-size: 10px;
  line-height: 1.15;
}

#wdServices .wd-phone-button {
  width: 32px;
  height: 7px;
  margin-top: 3px;
  border-radius: 2px;
  background: #91d700;
}

#wdServices .wd-phone-art {
  height: 32px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #7d9b91, #d8e6d2);
}

#wdServices .wd-phone-building {
  position: absolute;
  left: 22%;
  bottom: 0;
  width: 52%;
  height: 85%;
  background: repeating-linear-gradient(
    90deg, #637d75 0 5px, #b6d1b9 5px 8px
  );
  border-top: 3px solid #e4eadd;
}

#wdServices .wd-phone-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 5px;
}

#wdServices .wd-phone-lines span {
  height: 3px;
  border-radius: 3px;
  background: #d4ded7;
}

#wdServices .wd-phone-lines span:first-child { width: 85%; }
#wdServices .wd-phone-lines span:nth-child(2) { width: 65%; }
#wdServices .wd-phone-lines span:nth-child(3) { width: 75%; }

#wdServices .wd-phone-bottom {
  display: flex;
  justify-content: space-around;
  padding: 4px;
  color: #629900;
  border-top: 1px solid #dce5dc;
  font-size: 8px;
}

@keyframes wdPhoneFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

/* FLOATING INFOGRAPHIC CARDS */
#wdServices .wd-mini-card {
  position: absolute;
  z-index: 5;
  width: 38px;
  height: 39px;
  display: grid;
  place-items: center;
  color: var(--wd-green);
  border: 1px solid rgba(182,255,0,.85);
  border-radius: 7px;
  background: rgba(3,20,20,.92);
  box-shadow: 0 0 12px rgba(182,255,0,.12);
  animation: wdIconFloat 3.5s ease-in-out infinite;
}

#wdServices .wd-mini-card svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#wdServices .wd-mini-one {
  top: 34px;
  right: 13%;
}

#wdServices .wd-mini-two {
  top: 22px;
  left: 47%;
  width: 33px;
  height: 33px;
  animation-delay: -1.3s;
}

@keyframes wdIconFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

#wdServices .wd-image-caption {
  position: absolute;
  bottom: 8px;
  left: 35%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: #c4d0c7;
}

#wdServices .wd-pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wd-green);
  box-shadow: 0 0 8px var(--wd-green);
}

/* CENTER CONTENT */
#wdServices .wd-content {
  position: relative;
  min-width: 0;
  align-self: center;
  padding: 5px 0 4px;
}

#wdServices .wd-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: #f3f7f8;
  font-size: 8px;
  font-weight: 800;
}

#wdServices .wd-eyebrow-bar {
  display: inline-block;
  width: 22px;
  height: 5px;
  border-radius: 8px;
  background: var(--wd-green);
  box-shadow: 0 0 9px rgba(182,255,0,.2);
}

#wdServices .wd-title {
  margin: 0 0 3px;
  padding: 0;
  color: #f7f8fa;
  font-size: clamp(20px, 2.15vw, 24px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.65px;
}

#wdServices .wd-subtitle {
  margin: 0 0 12px;
  padding: 0;
  color: var(--wd-green);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

#wdServices .wd-description {
  min-height: 83px;
  margin: 0 0 14px;
  color: #d7dfe3;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.65;
}

#wdServices .wd-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-width: 103px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--wd-green);
  border-radius: 25px;
  background: var(--wd-green);
  color: #152000;
  font-size: 9px;
  font-weight: 800;
  transition: .25s ease;
}

#wdServices .wd-cta:hover {
  background: #d3ff71;
  color: #152000;
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(182,255,0,.18);
}

#wdServices .wd-cta-arrow {
  font-size: 15px;
  line-height: 1;
}

#wdServices .wd-content-bottom {
  display: none;
}

/* RIGHT SERVICE LIST */
#wdServices .wd-services {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 8px;
  border-left: 1px solid rgba(182,255,0,.35);
}

#wdServices .wd-service {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 37px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  text-align: left;
  color: #f2f5f7;
  border: 1px solid #112c33;
  border-radius: 9px;
  background: linear-gradient(100deg, rgba(7,22,27,.94), rgba(4,20,25,.8));
  cursor: pointer;
  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    color .25s ease;
}

#wdServices .wd-service:hover {
  border-color: rgba(182,255,0,.55);
  background: rgba(16,36,29,.95);
}

#wdServices .wd-service.active {
  color: #142000;
  background: linear-gradient(100deg, #a8ee00, #baff05);
  border-color: #b6ff00;
  box-shadow: 0 0 16px rgba(182,255,0,.07);
}

#wdServices .wd-service-icon {
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  color: var(--wd-green);
}

#wdServices .wd-service-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#wdServices .wd-service.active .wd-service-icon {
  color: #192800;
}

#wdServices .wd-service-name {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
}

#wdServices .wd-chevron {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}

#wdServices .wd-service.active .wd-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

/* TABLET */
@media (min-width: 1100px) {
  #wdServices .wd-layout {
    grid-template-columns: 32% 31% 32%;
  }

  #wdServices .wd-visual {
    height: 233px;
  }
}

@media (max-width: 1099px) {
  #wdServices {
    padding: 28px 3%;
  }

  #wdServices .wd-layout {
    grid-template-columns: 44% 52%;
    gap: 4%;
  }

  #wdServices .wd-visual {
    height: 260px;
  }

  #wdServices .wd-content {
    grid-column: 2;
    grid-row: 1;
  }

  #wdServices .wd-services {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(182,255,0,.3);
  }

  #wdServices .wd-service {
    min-height: 46px;
  }

  #wdServices .wd-service-name {
    font-size: 11px;
  }

  #wdServices .wd-description {
    min-height: 0;
  }
}

/* MOBILE */
@media (max-width: 600px) {
  #wdServices {
    padding: 22px 16px;
  }

  #wdServices .wd-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 23px;
  }

  #wdServices .wd-visual {
    height: 245px;
    width: 100%;
    order: 1;
  }

  #wdServices .wd-content {
    order: 2;
    width: 100%;
    padding: 0;
  }

  #wdServices .wd-title {
    font-size: 26px;
  }

  #wdServices .wd-subtitle {
    font-size: 13px;
    margin-bottom: 10px;
  }

  #wdServices .wd-description {
    font-size: 12px;
    line-height: 1.7;
    margin-bottom: 14px;
  }

  #wdServices .wd-services {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 16px;
  }

  #wdServices .wd-service {
    min-height: 48px;
    padding: 9px 12px;
    gap: 12px;
  }

  #wdServices .wd-service-name {
    font-size: 12px;
  }

  #wdServices .wd-service-icon,
  #wdServices .wd-service-icon svg {
    width: 24px;
    height: 24px;
  }

  #wdServices .wd-laptop {
    width: 72%;
    left: 10%;
    top: 65px;
  }

  #wdServices .wd-phone {
    right: 19%;
    bottom: 14px;
  }

  #wdServices .wd-content-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: #8d9d9c;
    font-size: 9px;
  }

  #wdServices .wd-bottom-line {
    width: 25px;
    height: 2px;
    background: var(--wd-green);
  }
}

@media (max-width: 380px) {
  #wdServices {
    padding-left: 12px;
    padding-right: 12px;
  }

  #wdServices .wd-visual {
    height: 215px;
  }

  #wdServices .wd-laptop {
    top: 58px;
  }

  #wdServices .wd-phone {
    width: 52px;
    height: 100px;
    right: 17%;
  }

  #wdServices .wd-service {
    padding: 8px 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #wdServices *,
  #wdServices *::before,
  #wdServices *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* FIX: KEEP ALL 3 COLUMNS TOGETHER */
@media (min-width: 601px) {
  #wdServices .wd-layout {
    display: grid !important;
    grid-template-columns: 32% 31% 32% !important;
    gap: 2.5% !important;
    align-items: center !important;
  }

  #wdServices .wd-visual {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  #wdServices .wd-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  #wdServices .wd-services {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 0 0 0 8px !important;
    border-left: 1px solid rgba(182, 255, 0, .35) !important;
    border-top: 0 !important;
    min-width: 0 !important;
  }

  #wdServices .wd-service {
    width: 100% !important;
    min-height: 37px !important;
  }
}

/* Only mobile: stack sections vertically */
@media (max-width: 600px) {
  #wdServices .wd-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  #wdServices .wd-visual,
  #wdServices .wd-content,
  #wdServices .wd-services {
    width: 100% !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  #wdServices .wd-services {
    display: flex !important;
    flex-direction: column !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(182, 255, 0, .3) !important;
    padding: 16px 0 0 !important;
  }
}

/* =========================================
   MODERN IT PORTFOLIO
   All styles scoped to #itPortfolio
========================================= */
#itPortfolio,
#itPortfolio * {
  box-sizing: border-box;
}

#itPortfolio {
  --itp-green: #b7ff00;
  --itp-text: #f5f7fb;
  --itp-muted: #b7c4ce;
  --itp-border: rgba(65, 157, 183, .34);

  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 34px 5.1% 20px;
  overflow: hidden;
  color: var(--itp-text);
  background:
    radial-gradient(ellipse at 12% 12%, rgba(0, 191, 166, .07), transparent 32%),
    radial-gradient(ellipse at 93% 90%, rgba(100, 255, 0, .06), transparent 29%),
    linear-gradient(125deg, #020c11, #03151b 55%, #020c11);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
}

#itPortfolio a {
  text-decoration: none;
}

#itPortfolio .itp-container {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
}

#itPortfolio .itp-bg-glow {
  position: absolute;
  z-index: -1;
  width: 350px;
  height: 300px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

#itPortfolio .itp-glow-a {
  top: 90px;
  left: -180px;
  background: rgba(0, 210, 180, .08);
}

#itPortfolio .itp-glow-b {
  right: -200px;
  bottom: -100px;
  background: rgba(183, 255, 0, .09);
}

#itPortfolio .itp-grid-bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(80, 190, 194, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 190, 194, .11) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, black, transparent 90%);
}

/* HEADER */
#itPortfolio .itp-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  margin-bottom: 24px;
}

#itPortfolio .itp-heading {
  min-width: 0;
}

#itPortfolio .itp-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  color: #e5edf0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
}

#itPortfolio .itp-eyebrow > span {
  width: 24px;
  height: 4px;
  border-radius: 6px;
  background: var(--itp-green);
  box-shadow: 0 0 12px rgba(183,255,0,.28);
}

#itPortfolio .itp-header h2 {
  padding: 0;
  margin: 0;
  color: #f7f9fc;
  font-size: clamp(25px, 2.9vw, 37px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -1.1px;
}

#itPortfolio .itp-header h2 > span {
  color: var(--itp-green);
}

#itPortfolio .itp-header-right {
  max-width: 350px;
  padding-bottom: 3px;
}

#itPortfolio .itp-header-right > p {
  margin: 0 0 13px;
  color: #d0dce4;
  font-size: 13px;
  line-height: 1.75;
}

#itPortfolio .itp-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8da5af;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
}

#itPortfolio .itp-live-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--itp-green);
  box-shadow: 0 0 9px rgba(183,255,0,.65);
}

#itPortfolio .itp-mobile-intro {
  display: none;
}

/* SERVICE GRID */
#itPortfolio .itp-services {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  align-items: stretch;
}

/* CARDS */
#itPortfolio .itp-card {
  --itp-accent: #54d9d2;
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: 181px;
  flex-direction: column;
  padding: 17px 17px 13px;
  overflow: hidden;
  border: 1px solid var(--itp-border);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(8, 29, 37, .97), rgba(3, 17, 24, .96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

#itPortfolio .itp-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 180px;
  height: 120px;
  top: -75px;
  right: -60px;
  border-radius: 50%;
  background: var(--itp-accent);
  opacity: .08;
  filter: blur(40px);
  transition: opacity .3s ease;
}

#itPortfolio .itp-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--itp-accent), transparent 30%);
  box-shadow:
    0 13px 30px rgba(0,0,0,.23),
    0 0 22px color-mix(in srgb, var(--itp-accent), transparent 94%);
  background: linear-gradient(145deg, rgba(12, 38, 44, .98), rgba(4, 19, 25, .98));
}

#itPortfolio .itp-card:hover::before {
  opacity: .19;
}

#itPortfolio .itp-featured {
  --itp-accent: #b7ff00;
  border-color: rgba(183,255,0,.72);
  background:
    radial-gradient(ellipse at 0 0, rgba(183,255,0,.12), transparent 67%),
    linear-gradient(145deg, #10251c, #04141a);
  box-shadow:
    inset 0 0 0 1px rgba(183,255,0,.13),
    0 0 20px rgba(183,255,0,.055);
}

#itPortfolio .itp-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(183,255,0,.07), transparent 55%);
  pointer-events: none;
}

#itPortfolio .itp-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
}

#itPortfolio .itp-index {
  color: #59747f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  opacity: .75;
  transition: color .3s ease;
}

#itPortfolio .itp-card:hover .itp-index {
  color: var(--itp-accent);
}

#itPortfolio .itp-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  border: 1px solid color-mix(in srgb, var(--itp-accent), transparent 78%);
  border-radius: 13px;
  color: var(--itp-accent);
  background: color-mix(in srgb, var(--itp-accent), transparent 92%);
  transition: transform .3s ease, background .3s ease;
}

#itPortfolio .itp-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#itPortfolio .itp-card:hover .itp-icon {
  transform: translateY(-2px) scale(1.06);
  background: color-mix(in srgb, var(--itp-accent), transparent 86%);
}

/* INDIVIDUAL COLOR PALETTE */
#itPortfolio .itp-web       { --itp-accent: #b7ff00; }
#itPortfolio .itp-mobile    { --itp-accent: #44caff; }
#itPortfolio .itp-software  { --itp-accent: #b28aff; }
#itPortfolio .itp-cloud     { --itp-accent: #54e5cf; }
#itPortfolio .itp-server    { --itp-accent: #ffb454; }
#itPortfolio .itp-database  { --itp-accent: #59a8ff; }
#itPortfolio .itp-email     { --itp-accent: #ff7198; }
#itPortfolio .itp-marketing { --itp-accent: #ffcf52; }
#itPortfolio .itp-graphic   { --itp-accent: #ff8bcb; }
#itPortfolio .itp-domain    { --itp-accent: #65e5a5; }
#itPortfolio .itp-backup    { --itp-accent: #85aaff; }

#itPortfolio .itp-card h3 {
  margin: 0 0 7px;
  padding: 0;
  color: #f3f7fb;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 750;
  letter-spacing: -.15px;
}

#itPortfolio .itp-card > p {
  margin: 0 0 15px;
  color: var(--itp-muted);
  font-size: 11px;
  line-height: 1.7;
  font-weight: 400;
}

#itPortfolio .itp-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(135,183,194,.11);
}

#itPortfolio .itp-tag {
  min-width: 0;
  color: #7995a1;
  font-size: 8px;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: .6px;
}

#itPortfolio .itp-card-arrow {
  width: 27px;
  height: 27px;
  display: grid;
  flex: 0 0 27px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--itp-accent), transparent 65%);
  border-radius: 9px;
  color: var(--itp-accent);
  background: color-mix(in srgb, var(--itp-accent), transparent 93%);
  font-size: 17px;
  line-height: 1;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}

#itPortfolio .itp-card-arrow:hover {
  color: #07120b;
  background: var(--itp-accent);
  transform: rotate(45deg);
}

#itPortfolio .itp-card-glow {
  position: absolute;
  z-index: -1;
  right: -55px;
  bottom: -70px;
  width: 150px;
  height: 100px;
  border-radius: 50%;
  background: var(--itp-accent);
  opacity: .025;
  filter: blur(35px);
  pointer-events: none;
}

#itPortfolio .itp-card:hover .itp-card-glow {
  opacity: .12;
}

/* BRAND CARDS */
#itPortfolio .itp-brand-card {
  --itp-accent: #4acfe1;
  background:
    radial-gradient(ellipse at 8% 0, rgba(49,180,220,.07), transparent 62%),
    linear-gradient(145deg, #071c24, #04131a);
}

#itPortfolio .itp-brand-logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  overflow: hidden;
  border: 1px solid rgba(170,206,220,.17);
  border-radius: 13px;
  background: rgba(255,255,255,.055);
  box-shadow: 0 5px 16px rgba(0,0,0,.15);
}

#itPortfolio .itp-brand-logo svg {
  display: block;
  width: 34px;
  height: 34px;
}

#itPortfolio .itp-google-logo svg,
#itPortfolio .itp-ms-logo svg {
  width: 34px;
  height: 34px;
}

#itPortfolio .itp-zoho-logo {
  width: 105px;
  flex-basis: 105px;
  padding: 5px;
  background: rgba(255,255,255,.96);
}

#itPortfolio .itp-zoho-logo svg {
  width: 96px;
  max-width: 100%;
  height: 34px;
}

#itPortfolio .itp-brand-badge {
  color: #91a9b7;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
  opacity: .85;
}

/* CONTACT FEATURE CARD */
#itPortfolio .itp-contact-card {
  --itp-accent: #b7ff00;
  position: relative;
  isolation: isolate;
  grid-column: span 2;
  min-width: 0;
  min-height: 181px;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 23px 25px;
  overflow: hidden;
  border: 1px solid rgba(183,255,0,.58);
  border-radius: 15px;
  background:
    radial-gradient(ellipse at 0 100%, rgba(183,255,0,.18), transparent 58%),
    linear-gradient(110deg, #11291a, #071b1b 70%, #071817);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .3s ease, box-shadow .3s ease;
}

#itPortfolio .itp-contact-card:hover {
  border-color: var(--itp-green);
  box-shadow: 0 0 28px rgba(183,255,0,.08);
}

#itPortfolio .itp-contact-icon {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 66px;
  display: grid;
  flex: 0 0 66px;
  place-items: center;
  border: 1px solid rgba(183,255,0,.3);
  border-radius: 18px;
  color: var(--itp-green);
  background: rgba(183,255,0,.07);
  box-shadow: 0 0 24px rgba(183,255,0,.08);
}

#itPortfolio .itp-contact-icon svg {
  width: 43px;
  height: 43px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#itPortfolio .itp-contact-content {
  position: relative;
  z-index: 2;
  min-width: 0;
}

#itPortfolio .itp-contact-label {
  display: block;
  margin-bottom: 5px;
  color: var(--itp-green);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.1px;
}

#itPortfolio .itp-contact-content h3 {
  margin: 0 0 5px;
  padding: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

#itPortfolio .itp-contact-content p {
  max-width: 390px;
  margin: 0 0 12px;
  color: #d2e0d9;
  font-size: 11px;
  line-height: 1.7;
}

#itPortfolio .itp-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid var(--itp-green);
  border-radius: 25px;
  color: #152100;
  background: var(--itp-green);
  font-size: 10px;
  font-weight: 800;
  transition: transform .25s ease, box-shadow .25s ease;
}

#itPortfolio .itp-contact-btn:hover {
  color: #152100;
  transform: translateY(-2px);
  box-shadow: 0 0 17px rgba(183,255,0,.25);
}

#itPortfolio .itp-contact-btn span {
  font-size: 16px;
}

#itPortfolio .itp-contact-decoration {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  height: 100%;
  opacity: .34;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 85% 25%, rgba(183,255,0,.45) 1px, transparent 2px),
    radial-gradient(circle at 75% 65%, rgba(183,255,0,.5) 1px, transparent 2px);
  background-size: 30px 30px;
  mask-image: linear-gradient(90deg, transparent, black);
}

#itPortfolio .itp-circuit {
  position: absolute;
  right: -25px;
  bottom: 20px;
  width: 180px;
  height: 35px;
  border-top: 1px solid rgba(183,255,0,.75);
  border-right: 1px solid rgba(183,255,0,.5);
  transform: skewY(-28deg);
}

#itPortfolio .itp-circuit.c2 {
  right: 12px;
  bottom: 48px;
  width: 135px;
}

#itPortfolio .itp-circuit.c3 {
  right: 45px;
  bottom: 77px;
  width: 100px;
}

/* FOOTER */
#itPortfolio .itp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 18px;
  color: #718994;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.15px;
}

#itPortfolio .itp-footer > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

#itPortfolio .itp-footer i {
  width: 17px;
  height: 3px;
  border-radius: 3px;
  background: var(--itp-green);
}

#itPortfolio .itp-footer b {
  padding-left: 5px;
  color: var(--itp-green);
  font-size: 13px;
}

/* TABLET */
@media (max-width: 1050px) {
  #itPortfolio {
    padding: 30px 3%;
  }

  #itPortfolio .itp-services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  #itPortfolio .itp-card,
  #itPortfolio .itp-contact-card {
    min-height: 180px;
  }

  #itPortfolio .itp-header h2 {
    font-size: 30px;
  }

  #itPortfolio .itp-contact-card {
    grid-column: span 2;
  }
}

/* MOBILE */
@media (max-width: 640px) {
  #itPortfolio {
    padding: 27px 16px 18px;
  }

  #itPortfolio .itp-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }

  #itPortfolio .itp-header h2 {
    font-size: clamp(25px, 7vw, 32px);
    line-height: 1.2;
    letter-spacing: -.7px;
  }

  #itPortfolio .itp-header-right {
    max-width: 100%;
  }

  #itPortfolio .itp-header-right > p {
    margin-bottom: 0;
    font-size: 12px;
  }

  #itPortfolio .itp-header-meta {
    display: none;
  }

  #itPortfolio .itp-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #itPortfolio .itp-card {
    min-height: 195px;
    padding: 13px 12px 11px;
    border-radius: 12px;
  }

  #itPortfolio .itp-card-top {
    margin-bottom: 10px;
  }

  #itPortfolio .itp-icon,
  #itPortfolio .itp-brand-logo {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 11px;
  }

  #itPortfolio .itp-icon svg {
    width: 23px;
    height: 23px;
  }

  #itPortfolio .itp-brand-logo svg {
    width: 29px;
    height: 29px;
  }

  #itPortfolio .itp-zoho-logo {
    width: 87px;
    flex-basis: 87px;
    padding: 4px;
  }

  #itPortfolio .itp-zoho-logo svg {
    width: 80px;
    height: 28px;
  }

  #itPortfolio .itp-card h3 {
    font-size: 12px;
    line-height: 1.4;
  }

  #itPortfolio .itp-card > p {
    font-size: 10px;
    line-height: 1.65;
    margin-bottom: 10px;
  }

  #itPortfolio .itp-card-footer {
    gap: 5px;
    padding-top: 8px;
  }

  #itPortfolio .itp-tag {
    font-size: 7px;
    letter-spacing: .25px;
  }

  #itPortfolio .itp-card-arrow {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    font-size: 15px;
  }

  #itPortfolio .itp-contact-card {
    grid-column: 1 / -1;
    min-height: 190px;
    padding: 20px 16px;
    gap: 13px;
    border-radius: 13px;
  }

  #itPortfolio .itp-contact-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 13px;
  }

  #itPortfolio .itp-contact-icon svg {
    width: 32px;
    height: 32px;
  }

  #itPortfolio .itp-contact-content h3 {
    font-size: 16px;
  }

  #itPortfolio .itp-contact-content p {
    font-size: 10px;
  }

  #itPortfolio .itp-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding-top: 17px;
    font-size: 7px;
  }
}

/* VERY SMALL SCREENS */
@media (max-width: 360px) {
  #itPortfolio {
    padding-left: 11px;
    padding-right: 11px;
  }

  #itPortfolio .itp-services {
    gap: 7px;
  }

  #itPortfolio .itp-card {
    padding: 11px 9px;
  }

  #itPortfolio .itp-card h3 {
    font-size: 11px;
  }

  #itPortfolio .itp-card > p {
    font-size: 9px;
  }

  #itPortfolio .itp-tag {
    font-size: 6px;
  }

  #itPortfolio .itp-index {
    font-size: 8px;
  }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  #itPortfolio *,
  #itPortfolio *::before,
  #itPortfolio *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ===== JASHCODE IT WHY CHOOSE SECTION ===== */
#asWhyChoose,
#asWhyChoose * {
  box-sizing: border-box;
}

#asWhyChoose {
  --asw-lime: #b8ff00;
  --asw-white: #f7f9fc;

  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 250px;
  padding: 32px 5.4%;
  overflow: hidden;
  background: #041015;
  color: var(--asw-white);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  border-top: 1px solid rgba(184,255,0,.8);
}

/* Ambient lighting */
#asWhyChoose .asw-atmosphere {
  position: absolute;
  z-index: -4;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 100%, rgba(0,180,140,.18), transparent 42%),
    radial-gradient(ellipse at 70% 0%, rgba(143,255,0,.13), transparent 36%),
    linear-gradient(105deg, #06151b 0%, #071b20 50%, #031014 100%);
}

#asWhyChoose .asw-grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .16;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(184,255,0,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,255,0,.10) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, transparent, black 60%, transparent);
}

/* CSS mountain silhouettes - no images */
#asWhyChoose .asw-mountain {
  position: absolute;
  z-index: -3;
  inset: 0;
  pointer-events: none;
}

#asWhyChoose .asw-mountain-back {
  opacity: .55;
  background: #172f35;
  clip-path: polygon(
    0 72%, 7% 47%, 13% 61%, 20% 25%, 26% 50%,
    34% 15%, 41% 48%, 49% 20%, 58% 52%,
    65% 27%, 73% 50%, 81% 17%, 89% 49%,
    95% 31%, 100% 53%, 100% 100%, 0 100%
  );
}

#asWhyChoose .asw-mountain-front {
  opacity: .72;
  background:
    linear-gradient(180deg, rgba(4,28,27,.12), #041412 90%);
  clip-path: polygon(
    0 83%, 9% 70%, 17% 86%, 26% 64%, 34% 83%,
    42% 69%, 52% 88%, 64% 65%, 74% 85%,
    83% 69%, 91% 85%, 100% 70%, 100% 100%, 0 100%
  );
}

#asWhyChoose .asw-scanline {
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--asw-lime), transparent);
  box-shadow: 0 0 20px rgba(184,255,0,.7);
  animation: aswScan 8s linear infinite;
  pointer-events: none;
}

@keyframes aswScan {
  0% { left: -30%; }
  100% { left: 110%; }
}

#asWhyChoose .asw-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(0, 1.7fr);
  gap: 34px;
  align-items: center;
}

/* LEFT INTRO */
#asWhyChoose .asw-intro {
  min-width: 0;
  animation: aswFadeUp .8s ease both;
}

#asWhyChoose .asw-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  color: #e7edf0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

#asWhyChoose .asw-eyebrow-line {
  width: 24px;
  height: 4px;
  border-radius: 5px;
  background: var(--asw-lime);
  box-shadow: 0 0 12px rgba(184,255,0,.35);
}

#asWhyChoose .asw-intro h2 {
  margin: 0 0 6px;
  padding: 0;
  font-size: clamp(23px, 2.1vw, 31px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.8px;
  color: #fff;
}

#asWhyChoose .asw-intro h2 span {
  color: var(--asw-lime);
}

#asWhyChoose .asw-intro p {
  max-width: 390px;
  margin: 0 0 16px;
  color: #d2dfe4;
  font-size: 12px;
  line-height: 1.75;
}

#asWhyChoose .asw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 36px;
  padding: 7px 10px 7px 15px;
  border: 1px solid var(--asw-lime);
  border-radius: 25px;
  color: var(--asw-lime);
  background: rgba(2,14,16,.38);
  font-size: 11px;
  font-weight: 750;
  transition: color .3s ease, background .3s ease, box-shadow .3s ease;
}

#asWhyChoose .asw-button:hover {
  color: #071006;
  background: var(--asw-lime);
  box-shadow: 0 0 22px rgba(184,255,0,.25);
}

#asWhyChoose .asw-button-arrow {
  display: inline-grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: var(--asw-lime);
  color: #071006;
  font-size: 14px;
  transition: transform .3s ease;
}

#asWhyChoose .asw-button:hover .asw-button-arrow {
  transform: rotate(45deg);
}

/* FEATURES */
#asWhyChoose .asw-features {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  min-width: 0;
}

#asWhyChoose .asw-feature {
  --asw-delay: 0ms;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 120px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  text-align: center;
  border-left: 1px solid rgba(184,255,0,.25);
  animation: aswFadeUp .7s ease both;
  animation-delay: var(--asw-delay);
  transition: background .3s ease;
}

#asWhyChoose .asw-feature:hover {
  background: linear-gradient(180deg, rgba(184,255,0,.08), transparent);
}

#asWhyChoose .asw-icon-wrap {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 9px;
  place-items: center;
  color: var(--asw-lime);
  transition: transform .35s ease, filter .35s ease;
}

#asWhyChoose .asw-icon-wrap::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(184,255,0,.22);
  border-radius: 13px;
  background: rgba(184,255,0,.045);
  transform: rotate(45deg) scale(.75);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}

#asWhyChoose .asw-icon-wrap svg {
  position: relative;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(184,255,0,.15));
}

#asWhyChoose .asw-feature:hover .asw-icon-wrap {
  transform: translateY(-3px) scale(1.08);
  filter: drop-shadow(0 0 9px rgba(184,255,0,.35));
}

#asWhyChoose .asw-feature:hover .asw-icon-wrap::before {
  transform: rotate(0deg) scale(1);
  opacity: 1;
}

#asWhyChoose .asw-number {
  position: absolute;
  top: 9px;
  right: 9px;
  color: rgba(210,233,225,.45);
  font-size: 8px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .3s ease, transform .3s ease;
}

#asWhyChoose .asw-feature:hover .asw-number {
  opacity: 1;
  transform: translateY(0);
}

#asWhyChoose .asw-feature h3 {
  margin: 0;
  padding: 0;
  color: #f4f7f8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  transition: color .3s ease;
}

#asWhyChoose .asw-feature:hover h3 {
  color: var(--asw-lime);
}

#asWhyChoose .asw-feature-line {
  width: 0;
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--asw-lime);
  box-shadow: 0 0 8px rgba(184,255,0,.6);
  transition: width .3s ease;
}

#asWhyChoose .asw-feature:hover .asw-feature-line {
  width: 27px;
}

#asWhyChoose .asw-bottom-glow {
  position: absolute;
  z-index: -1;
  right: 10%;
  bottom: -70px;
  width: 60%;
  height: 100px;
  border-radius: 50%;
  background: rgba(184,255,0,.07);
  filter: blur(45px);
  pointer-events: none;
}

@keyframes aswFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* TABLET */
@media (max-width: 900px) {
  #asWhyChoose {
    padding: 28px 4%;
  }

  #asWhyChoose .asw-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  #asWhyChoose .asw-intro p {
    max-width: 540px;
  }

  #asWhyChoose .asw-feature {
    min-height: 115px;
  }
}

/* MOBILE */
@media (max-width: 560px) {
  #asWhyChoose {
    padding: 26px 18px;
  }

  #asWhyChoose .asw-inner {
    gap: 22px;
  }

  #asWhyChoose .asw-intro h2 {
    font-size: 26px;
  }

  #asWhyChoose .asw-intro p {
    font-size: 12px;
  }

  #asWhyChoose .asw-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(184,255,0,.18);
    border-left: 1px solid rgba(184,255,0,.18);
  }

  #asWhyChoose .asw-feature {
    min-height: 130px;
    padding: 15px 8px;
    border-left: 0;
    border-bottom: 1px solid rgba(184,255,0,.18);
    border-right: 1px solid rgba(184,255,0,.18);
  }

  #asWhyChoose .asw-feature:last-child {
    grid-column: 1 / -1;
  }

  #asWhyChoose .asw-icon-wrap {
    margin-bottom: 8px;
  }
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
  #asWhyChoose *,
  #asWhyChoose *::before,
  #asWhyChoose *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================
   JASHCODE IT WEB DEVELOPMENT HERO
   No external images or libraries required
========================================== */

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

#wdHero {
  --wd-lime: #b7ff00;
  --wd-dark: #020d11;
  --wd-white: #f7f9fc;

  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  background: var(--wd-dark);
  color: var(--wd-white);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  border-top: 1px solid rgba(183,255,0,.4);
}

#wdHero a {
  text-decoration: none;
}

#wdHero .wd-bg-glow {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    radial-gradient(ellipse at 73% 50%, rgba(40,255,0,.12), transparent 36%),
    radial-gradient(ellipse at 92% 10%, rgba(0,190,130,.12), transparent 30%),
    linear-gradient(105deg, #020c10 0%, #031316 48%, #04100e 100%);
}

#wdHero .wd-grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  background-image:
    linear-gradient(rgba(183,255,0,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,255,0,.12) 1px, transparent 1px);
  background-size: 45px 45px;
  mask-image: linear-gradient(90deg, transparent 20%, #000 80%);
}

#wdHero .wd-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1600px;
  min-height: 300px;
  margin: 0 auto;
  padding: 25px 5.7%;
}

/* LEFT CONTENT */

#wdHero .wd-content {
  position: relative;
  z-index: 3;
  min-width: 0;
  animation: wdReveal .8s ease both;
}

#wdHero .wd-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: #eef4f5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
}

#wdHero .wd-pulse {
  width: 24px;
  height: 5px;
  border-radius: 10px;
  background: var(--wd-lime);
  box-shadow: 0 0 12px rgba(183,255,0,.45);
  animation: wdPulse 2.5s infinite;
}

#wdHero .wd-content h1 {
  margin: 0 0 5px;
  color: #fff;
  font-size: clamp(28px, 3vw, 43px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.1px;
}

#wdHero .wd-content h1 span {
  display: block;
  color: var(--wd-lime);
  text-shadow: 0 0 24px rgba(183,255,0,.12);
}

#wdHero .wd-content h2 {
  margin: 7px 0 12px;
  color: #f2f6f7;
  font-size: clamp(14px, 1.45vw, 18px);
  line-height: 1.4;
  font-weight: 750;
}

#wdHero .wd-content p {
  max-width: 465px;
  margin: 0;
  color: #d0dce0;
  font-size: 12px;
  line-height: 1.65;
}

#wdHero .wd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  margin-top: 17px;
}

#wdHero .wd-btn {
  display: inline-flex;
  min-height: 37px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 10px 7px 17px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 750;
  transition: background .3s, color .3s, transform .3s, box-shadow .3s;
}

#wdHero .wd-btn:hover {
  transform: translateY(-3px);
}

#wdHero .wd-btn-primary {
  background: var(--wd-lime);
  border: 1px solid var(--wd-lime);
  color: #101a00;
  box-shadow: 0 0 20px rgba(183,255,0,.12);
}

#wdHero .wd-btn-primary:hover {
  box-shadow: 0 0 26px rgba(183,255,0,.38);
}

#wdHero .wd-btn-icon {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: #102000;
  color: var(--wd-lime);
  font-size: 15px;
}

#wdHero .wd-btn-outline {
  border: 1px solid rgba(255,255,255,.75);
  background: rgba(0,0,0,.15);
  color: white;
}

#wdHero .wd-btn-outline:hover {
  border-color: var(--wd-lime);
  color: var(--wd-lime);
}

#wdHero .wd-outline-arrow {
  font-size: 14px;
}

#wdHero .wd-trust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: #8fa5a8;
  font-size: 10px;
}

#wdHero .wd-trust-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wd-lime);
  box-shadow: 0 0 8px var(--wd-lime);
}

/* RIGHT VISUAL STAGE */

#wdHero .wd-visual {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 300px;
  perspective: 1000px;
  isolation: isolate;
}

#wdHero .wd-circuit {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: rgba(183,255,0,.5);
  stroke-width: 1;
  opacity: .6;
}

#wdHero .wd-circuit circle {
  fill: var(--wd-lime);
  filter: drop-shadow(0 0 5px var(--wd-lime));
}

#wdHero .wd-orbit {
  position: absolute;
  z-index: -2;
  width: 400px;
  height: 180px;
  border: 1px solid rgba(183,255,0,.15);
  border-radius: 50%;
  pointer-events: none;
}

#wdHero .wd-orbit-one {
  right: -90px;
  top: 65px;
  transform: rotate(-15deg);
}

#wdHero .wd-orbit-two {
  right: 30px;
  top: 105px;
  transform: rotate(17deg);
}

#wdHero .wd-light-beam {
  position: absolute;
  z-index: -1;
  width: 22px;
  height: 260px;
  top: -35px;
  background: linear-gradient(180deg, transparent, rgba(183,255,0,.3), transparent);
  transform: rotate(-20deg);
  filter: blur(4px);
  pointer-events: none;
}

#wdHero .wd-beam-a {
  left: 38%;
  animation: wdBeam 5s ease-in-out infinite;
}

#wdHero .wd-beam-b {
  left: 82%;
  opacity: .5;
  transform: rotate(23deg);
  animation: wdBeam 6s ease-in-out infinite reverse;
}

/* LAPTOP */

#wdHero .wd-laptop {
  position: absolute;
  z-index: 2;
  left: 10%;
  top: 53px;
  width: 70%;
  max-width: 425px;
  transform: rotate(-2deg);
  transform-style: preserve-3d;
  animation: wdLaptopFloat 5s ease-in-out infinite;
}

#wdHero .wd-laptop-screen {
  position: relative;
  aspect-ratio: 1.52 / 1;
  overflow: hidden;
  border: 2px solid #34494a;
  border-radius: 10px 10px 4px 4px;
  background: #071419;
  box-shadow:
    0 0 0 1px rgba(183,255,0,.3),
    0 0 24px rgba(183,255,0,.16),
    0 15px 40px rgba(0,0,0,.7),
    inset 0 0 12px rgba(183,255,0,.06);
}

#wdHero .wd-screen-glass {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.07), transparent 32%);
}

#wdHero .wd-browser {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 27px;
  padding: 0 10px;
  background: #0c2023;
  border-bottom: 1px solid rgba(183,255,0,.18);
  font-size: 6px;
  color: #d9e5e5;
}

#wdHero .wd-brand {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-weight: 800;
}

#wdHero .wd-brand-mark {
  display: grid;
  width: 12px;
  height: 12px;
  place-items: center;
  color: #102000;
  background: var(--wd-lime);
  border-radius: 50%;
  font-size: 9px;
}

#wdHero .wd-browser-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

#wdHero .wd-menu {
  color: var(--wd-lime);
}

#wdHero .wd-site-preview {
  position: relative;
  height: calc(100% - 27px);
  display: flex;
  overflow: hidden;
  background: linear-gradient(115deg, #071b24 0%, #10282e 55%, #193632 100%);
}

#wdHero .wd-site-copy {
  position: relative;
  z-index: 2;
  width: 59%;
  padding: 13px 0 5px 13px;
}

#wdHero .wd-site-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--wd-lime);
  font-size: 5px;
  font-weight: 800;
  letter-spacing: 1px;
}

#wdHero .wd-site-copy h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(13px, 1.55vw, 21px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.3px;
}

#wdHero .wd-site-copy p {
  margin: 7px 0 9px;
  color: #b9c9cb;
  font-size: 6px;
}

#wdHero .wd-mini-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 20px;
  color: #0a1400;
  background: var(--wd-lime);
  font-size: 6px;
  font-weight: 800;
}

#wdHero .wd-mini-stats {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  color: #9cb2b3;
  font-size: 5px;
}

#wdHero .wd-mini-stats b {
  display: block;
  color: white;
  font-size: 9px;
}

/* CSS ABSTRACT ARTWORK */

#wdHero .wd-artwork {
  position: absolute;
  inset: 0 0 0 48%;
  overflow: hidden;
  background: radial-gradient(ellipse at 55% 65%, rgba(183,255,0,.15), transparent 60%);
}

#wdHero .wd-art-sun {
  position: absolute;
  top: 15%;
  right: 17%;
  width: 39%;
  aspect-ratio: 1;
  border: 1px solid rgba(183,255,0,.65);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183,255,0,.2), transparent 70%);
  box-shadow: 0 0 22px rgba(183,255,0,.12);
}

#wdHero .wd-art-peak {
  position: absolute;
  bottom: 8%;
  width: 0;
  height: 0;
  border-left: 65px solid transparent;
  border-right: 65px solid transparent;
}

#wdHero .wd-peak-back {
  right: -5%;
  border-bottom: 120px solid #244a45;
  transform: scale(1.1);
}

#wdHero .wd-peak-mid {
  right: 19%;
  border-left-width: 75px;
  border-right-width: 75px;
  border-bottom: 145px solid #426c60;
}

#wdHero .wd-peak-front {
  right: 37%;
  border-left-width: 65px;
  border-right-width: 65px;
  border-bottom: 105px solid #102e30;
}

#wdHero .wd-art-line {
  position: absolute;
  z-index: 2;
  bottom: 25%;
  left: 4%;
  width: 120%;
  height: 1px;
  background: rgba(183,255,0,.55);
  transform: rotate(-15deg);
  box-shadow: 0 0 8px rgba(183,255,0,.6);
}

#wdHero .wd-art-stars {
  position: absolute;
  top: 16%;
  right: 8%;
  color: var(--wd-lime);
  font-size: 9px;
}

#wdHero .wd-art-stars span {
  margin: 0 8px;
  font-size: 12px;
}

#wdHero .wd-art-bottom {
  position: absolute;
  right: -10%;
  bottom: -4%;
  width: 130%;
  height: 27%;
  background: linear-gradient(0deg, #0b1a1c, #152b2c);
  transform: rotate(-7deg);
}

#wdHero .wd-code-strip {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 19px;
  padding: 0 9px;
  background: #091316;
  color: #9eb5b7;
  font-size: 5px;
}

#wdHero .wd-code-green {
  color: var(--wd-lime);
}

#wdHero .wd-code-active {
  color: var(--wd-lime);
}

#wdHero .wd-code-live {
  margin-left: auto;
  color: var(--wd-lime);
  letter-spacing: .4px;
}

/* LAPTOP BASE */

#wdHero .wd-laptop-base {
  position: relative;
  z-index: 2;
  width: 112%;
  height: 11px;
  margin-left: -6%;
  background: linear-gradient(180deg, #c3ceca 0%, #667878 35%, #24393a 70%, #0c191c 100%);
  clip-path: polygon(5% 0, 95% 0, 100% 75%, 87% 100%, 13% 100%, 0 75%);
  box-shadow: 0 4px 12px #000;
}

#wdHero .wd-laptop-notch {
  position: absolute;
  top: 0;
  left: 42%;
  width: 16%;
  height: 3px;
  border-radius: 0 0 5px 5px;
  background: #647778;
}

#wdHero .wd-laptop-shadow {
  width: 120%;
  height: 12px;
  margin-left: -10%;
  border-radius: 50%;
  background: rgba(183,255,0,.22);
  filter: blur(12px);
}

/* FLOATING INFOGRAPHIC LABELS */

#wdHero .wd-float {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(183,255,0,.65);
  border-radius: 14px;
  background: rgba(3,18,21,.9);
  box-shadow: 0 0 18px rgba(183,255,0,.09);
  backdrop-filter: blur(9px);
  color: #fff;
  animation: wdFloat 4s ease-in-out infinite;
}

#wdHero .wd-float strong,
#wdHero .wd-float span {
  display: block;
  font-size: 10px;
  line-height: 1.5;
}

#wdHero .wd-float strong {
  font-weight: 750;
}

#wdHero .wd-float span {
  color: #e0e9e9;
}

#wdHero .wd-code-label {
  top: 38px;
  left: -1%;
}

#wdHero .wd-code-symbol {
  color: var(--wd-lime);
  font-size: 24px;
  font-weight: 800;
}

#wdHero .wd-responsive-label {
  top: 17px;
  right: 9%;
  animation-delay: -.9s;
}

#wdHero .wd-responsive-label svg {
  width: 26px;
  height: 32px;
  stroke: var(--wd-lime);
  stroke-width: 2.5;
}

#wdHero .wd-seo-label {
  right: -1%;
  bottom: 39px;
  animation-delay: -1.7s;
}

#wdHero .wd-seo-label svg {
  width: 30px;
  height: 30px;
  stroke: var(--wd-lime);
  stroke-width: 2;
}

#wdHero .wd-feature-chip {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(183,255,0,.22);
  border-radius: 7px;
  background: rgba(5,24,24,.88);
  color: #dfe9e8;
  font-size: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,.25);
  animation: wdFloat 5s ease-in-out infinite;
}

#wdHero .wd-feature-chip span {
  color: var(--wd-lime);
  font-weight: 900;
}

#wdHero .wd-chip-speed {
  left: 11%;
  bottom: 17px;
}

#wdHero .wd-chip-secure {
  right: 15%;
  bottom: 9px;
  animation-delay: -2s;
}

/* CODE CARD */

#wdHero .wd-code-card {
  position: absolute;
  z-index: 5;
  right: 21%;
  bottom: 3px;
  width: 182px;
  overflow: hidden;
  border: 1px solid rgba(183,255,0,.35);
  border-radius: 9px;
  background: rgba(3,15,20,.95);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  animation: wdCardFloat 5s ease-in-out infinite;
}

#wdHero .wd-code-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 25px;
  padding: 0 9px;
  background: #102124;
  color: #9eb6b8;
  font-size: 8px;
}

#wdHero .wd-window-dots {
  display: flex;
  gap: 3px;
}

#wdHero .wd-window-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #708b8b;
}

#wdHero .wd-window-dots i:first-child {
  background: #ff8174;
}

#wdHero .wd-window-dots i:nth-child(2) {
  background: #ffcf68;
}

#wdHero .wd-window-dots i:nth-child(3) {
  background: var(--wd-lime);
}

#wdHero .wd-live-dot {
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--wd-lime);
  box-shadow: 0 0 6px var(--wd-lime);
}

#wdHero .wd-code-lines {
  padding: 8px 7px 10px;
  color: #d4e2e1;
  font-family: Consolas, monospace;
  font-size: 8px;
  line-height: 1.85;
  white-space: nowrap;
}

#wdHero .wd-code-lines > div > span {
  display: inline-block;
  width: 20px;
  color: #5d7678;
}

#wdHero .wd-code-lines .wd-indent {
  padding-left: 12px;
}

#wdHero .wd-syntax-purple {
  color: #c8a0ff;
  font-style: normal;
}

#wdHero .wd-syntax-blue {
  color: #79caff;
  font-style: normal;
}

#wdHero .wd-syntax-green {
  color: var(--wd-lime);
  font-style: normal;
}

#wdHero .wd-cursor {
  color: var(--wd-lime);
  animation: wdBlink 1s steps(2, start) infinite;
}

/* PHONE */

#wdHero .wd-phone {
  position: absolute;
  z-index: 4;
  top: 105px;
  right: 9%;
  width: 20%;
  max-width: 112px;
  min-width: 77px;
  transform: rotate(5deg);
  animation: wdPhoneFloat 4.5s ease-in-out infinite;
}

#wdHero .wd-phone-frame {
  position: relative;
  padding: 5px;
  overflow: hidden;
  border: 2px solid #657b7b;
  border-radius: 17px;
  background: linear-gradient(120deg, #263c3d, #071114 50%, #425655);
  box-shadow:
    0 0 0 1px rgba(183,255,0,.35),
    0 0 22px rgba(183,255,0,.14),
    0 18px 25px rgba(0,0,0,.6);
}

#wdHero .wd-phone-notch {
  position: absolute;
  z-index: 4;
  top: 6px;
  left: 50%;
  width: 35%;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 10px;
  background: #030a0d;
}

#wdHero .wd-phone-screen {
  overflow: hidden;
  min-height: 175px;
  border-radius: 11px;
  background: #07181d;
}

#wdHero .wd-phone-header {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 25px;
  padding: 8px 5px 0;
  color: white;
  font-size: 6px;
  font-weight: 750;
}

#wdHero .wd-phone-header .wd-brand-mark {
  width: 9px;
  height: 9px;
  font-size: 6px;
}

#wdHero .wd-phone-menu {
  margin-left: auto;
  color: var(--wd-lime);
  font-size: 10px;
}

#wdHero .wd-phone-art {
  position: relative;
  height: 72px;
  overflow: hidden;
  margin-top: 5px;
  background: linear-gradient(150deg, #0b292c, #244a41);
}

#wdHero .wd-phone-sun {
  position: absolute;
  top: 9px;
  right: 12px;
  width: 25px;
  height: 25px;
  border: 1px solid var(--wd-lime);
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(183,255,0,.2);
}

#wdHero .wd-phone-mountain,
#wdHero .wd-phone-mountain-two {
  position: absolute;
  bottom: -3px;
  width: 0;
  height: 0;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-bottom: 57px solid #5b8371;
}

#wdHero .wd-phone-mountain {
  right: -7px;
}

#wdHero .wd-phone-mountain-two {
  left: -9px;
  border-bottom-color: #153b35;
  border-bottom-width: 43px;
}

#wdHero .wd-phone-copy {
  padding: 9px 7px;
}

#wdHero .wd-phone-copy > span {
  color: var(--wd-lime);
  font-size: 5px;
  letter-spacing: .5px;
}

#wdHero .wd-phone-copy h4 {
  margin: 5px 0;
  color: #fff;
  font-size: 10px;
  line-height: 1.25;
}

#wdHero .wd-phone-copy p {
  margin: 0 0 7px;
  color: #b5c5c5;
  font-size: 5px;
  line-height: 1.4;
}

#wdHero .wd-phone-cta {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 12px;
  background: var(--wd-lime);
  color: #101900;
  font-size: 5px;
  font-weight: 800;
}

#wdHero .wd-phone-skeleton {
  width: 100%;
  height: 3px;
  margin-top: 9px;
  border-radius: 5px;
  background: #294247;
}

#wdHero .wd-phone-skeleton.short {
  width: 65%;
  margin-top: 4px;
}

#wdHero .wd-phone-bottom {
  display: flex;
  justify-content: space-around;
  margin-top: 9px;
  padding-top: 6px;
  border-top: 1px solid #284347;
  color: var(--wd-lime);
  font-size: 6px;
}

#wdHero .wd-phone-reflection {
  position: absolute;
  z-index: -1;
  right: -10%;
  bottom: -9px;
  left: -10%;
  height: 15px;
  border-radius: 50%;
  background: rgba(183,255,0,.3);
  filter: blur(12px);
}

/* FLOOR AND MOTION */

#wdHero .wd-floor-light {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(183,255,0,.8), transparent);
  box-shadow: 0 0 15px rgba(183,255,0,.3);
}

#wdHero .wd-floor-line {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: -14px;
  left: 0;
  height: 55px;
  background: repeating-linear-gradient(
    165deg,
    transparent 0 29px,
    rgba(183,255,0,.08) 30px,
    transparent 31px 55px
  );
  mask-image: linear-gradient(0deg, transparent, black);
}

@keyframes wdReveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wdPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(183,255,0,.25); }
  50% { box-shadow: 0 0 16px rgba(183,255,0,.8); }
}

@keyframes wdFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes wdLaptopFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes wdPhoneFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes wdCardFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes wdBeam {
  0%, 100% { opacity: .25; }
  50% { opacity: .8; }
}

@keyframes wdBlink {
  to { visibility: hidden; }
}

/* TABLET */
@media (max-width: 900px) {
  #wdHero .wd-layout {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 28px 4%;
  }

  #wdHero .wd-content h1 {
    font-size: clamp(27px, 4vw, 36px);
  }

  #wdHero .wd-visual {
    height: 280px;
  }

  #wdHero .wd-laptop {
    left: 6%;
    top: 72px;
    width: 76%;
  }

  #wdHero .wd-code-label {
    left: -2%;
    top: 40px;
  }

  #wdHero .wd-responsive-label {
    right: 1%;
    top: 22px;
  }

  #wdHero .wd-phone {
    right: 5%;
    top: 116px;
  }

  #wdHero .wd-seo-label {
    right: -2%;
    bottom: 36px;
  }

  #wdHero .wd-code-card {
    right: 18%;
    bottom: 2px;
    width: 155px;
  }

  #wdHero .wd-feature-chip {
    display: none;
  }
}

/* MOBILE */
@media (max-width: 600px) {
  #wdHero .wd-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 28px 20px 12px;
  }

  #wdHero .wd-content h1 {
    font-size: clamp(30px, 8vw, 39px);
    letter-spacing: -.8px;
  }

  #wdHero .wd-content h2 {
    font-size: 15px;
  }

  #wdHero .wd-content p {
    max-width: 100%;
    font-size: 12px;
  }

  #wdHero .wd-actions {
    gap: 9px;
  }

  #wdHero .wd-btn {
    min-height: 38px;
    font-size: 10px;
  }

  #wdHero .wd-trust {
    margin-top: 12px;
  }

  #wdHero .wd-visual {
    height: 275px;
    margin-top: 0;
  }

  #wdHero .wd-laptop {
    left: 5%;
    top: 73px;
    width: 78%;
    max-width: 360px;
  }

  #wdHero .wd-code-label {
    top: 35px;
    left: 0;
    padding: 7px 9px;
  }

  #wdHero .wd-responsive-label {
    top: 15px;
    right: 0;
    padding: 7px;
  }

  #wdHero .wd-responsive-label strong,
  #wdHero .wd-responsive-label span {
    font-size: 8px;
  }

  #wdHero .wd-phone {
    top: 113px;
    right: 4%;
    width: 21%;
    min-width: 72px;
  }

  #wdHero .wd-code-card {
    right: 17%;
    bottom: 1px;
    width: 145px;
  }

  #wdHero .wd-seo-label {
    right: -1%;
    bottom: 34px;
    padding: 7px;
  }

  #wdHero .wd-seo-label strong,
  #wdHero .wd-seo-label span {
    font-size: 8px;
  }

  #wdHero .wd-chip-speed,
  #wdHero .wd-chip-secure {
    display: none;
  }

  #wdHero .wd-orbit-one {
    right: -190px;
  }

  #wdHero .wd-orbit-two {
    right: -110px;
  }
}

@media (max-width: 380px) {
  #wdHero .wd-layout {
    padding-right: 14px;
    padding-left: 14px;
  }

  #wdHero .wd-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  #wdHero .wd-visual {
    height: 245px;
  }

  #wdHero .wd-code-label {
    transform: scale(.85);
    transform-origin: left center;
  }

  #wdHero .wd-code-card {
    right: 12%;
    width: 125px;
  }

  #wdHero .wd-code-lines {
    font-size: 7px;
  }

  #wdHero .wd-seo-label {
    transform: scale(.85);
    transform-origin: right center;
  }
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
  #wdHero *,
  #wdHero *::before,
  #wdHero *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ========================================
   WEB DEVELOPMENT SECTION
   COMPLETE HTML + CSS + JAVASCRIPT
   NO IMAGES / NO EXTERNAL LIBRARIES
======================================== */

#wd-unique-section,
#wd-unique-section * {
  box-sizing: border-box;
}

#wd-unique-section {
  --wd-lime: #b8ff00;
  --wd-cyan: #00d9ff;
  --wd-purple: #b58aff;
  --wd-orange: #ffb15b;
  --wd-bg: #020c10;

  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(34, 92, 39, .15), transparent 42%),
    linear-gradient(120deg, #020b0f, #031418 65%, #020c10);
  color: #fff;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  border-top: 2px solid rgba(184, 255, 0, .8);
}

#wd-unique-section .wd-top-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--wd-lime), transparent);
  animation: wd-line-sweep 5s linear infinite;
}

#wd-unique-section .wd-background-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(184,255,0,.16) 1px, transparent 1px),
    linear-gradient(90deg,rgba(184,255,0,.16) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, transparent, black);
}

#wd-unique-section .wd-container {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 25px;
  width: 100%;
  max-width: 1500px;
  min-height: 340px;
  margin: 0 auto;
  padding: 28px 5.5%;
}

/* ========================================
   LEFT CONTENT
======================================== */

#wd-unique-section .wd-content {
  position: relative;
  z-index: 2;
  min-width: 0;
  animation: wd-content-enter .8s ease both;
}

#wd-unique-section .wd-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #e7eeee;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
}

#wd-unique-section .wd-eyebrow-line {
  width: 25px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--wd-lime);
  box-shadow: 0 0 10px rgba(184,255,0,.35);
}

#wd-unique-section .wd-heading {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(25px, 2.5vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.8px;
}

#wd-unique-section .wd-heading span {
  color: var(--wd-lime);
}

#wd-unique-section .wd-description {
  max-width: 460px;
  margin: 0;
  color: #d0dcdf;
  font-size: 12px;
  line-height: 1.7;
}

/* Feature grid */

#wd-unique-section .wd-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px 15px;
  margin-top: 20px;
}

#wd-unique-section .wd-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

#wd-unique-section .wd-feature-icon {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1.5px solid var(--wd-lime);
  border-radius: 10px;
  background: rgba(184,255,0,.045);
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

#wd-unique-section .wd-feature:hover .wd-feature-icon {
  transform: translateY(-4px);
  background: rgba(184,255,0,.13);
  box-shadow: 0 0 17px rgba(184,255,0,.16);
}

#wd-unique-section .wd-feature-icon svg {
  display: block;
  width: 27px;
  height: 27px;
  fill: none;
  stroke: var(--wd-lime);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#wd-unique-section .wd-feature-copy {
  min-width: 0;
  padding-top: 2px;
}

#wd-unique-section .wd-feature-copy h3 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}

#wd-unique-section .wd-feature-copy p {
  margin: 0;
  color: #c7d4d6;
  font-size: 11px;
  line-height: 1.55;
}

/* ========================================
   RIGHT SIDE - TECHNOLOGY BLUEPRINT
======================================== */

#wd-unique-section .wd-blueprint {
  position: relative;
  width: 100%;
  height: 310px;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(184,255,0,.25);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 47%, rgba(39,90,40,.25), transparent 48%),
    linear-gradient(145deg,#07151a,#031014 65%,#071c1d);
  box-shadow: inset 0 0 35px rgba(0,217,255,.025);
}

#wd-unique-section .bp-glow {
  position: absolute;
  z-index: -1;
  inset: 20%;
  border-radius: 50%;
  background: rgba(113,255,0,.12);
  filter: blur(35px);
  animation: wd-glow-pulse 4s ease-in-out infinite alternate;
}

#wd-unique-section .bp-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .25;
  background-image:
    linear-gradient(rgba(0,217,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,217,255,.12) 1px,transparent 1px);
  background-size: 23px 23px;
  mask-image: linear-gradient(130deg,transparent,#000 30%,#000 85%,transparent);
}

#wd-unique-section .bp-label {
  position: absolute;
  z-index: 5;
  top: 13px;
  left: 15px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d5e1e1;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .8px;
}

#wd-unique-section .bp-live-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--wd-lime);
  box-shadow: 0 0 9px var(--wd-lime);
  animation: wd-blink 1.5s infinite;
}

#wd-unique-section .bp-counter {
  position: absolute;
  top: 12px;
  right: 14px;
  color: var(--wd-lime);
  font-size: 11px;
  font-weight: 800;
}

#wd-unique-section .bp-counter span {
  color: #728b8c;
  font-size: 9px;
}

/* Circuit connections */

#wd-unique-section .bp-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#wd-unique-section .bp-wire {
  fill: none;
  stroke: #9bf83d;
  stroke-width: 1.2;
  stroke-opacity: .48;
  stroke-dasharray: 5 4;
  animation: wd-dash-flow 10s linear infinite;
}

#wd-unique-section .bp-wire-blue {
  stroke: var(--wd-cyan);
  stroke-opacity: .5;
}

#wd-unique-section .bp-pulse {
  fill: var(--wd-lime);
  filter: drop-shadow(0 0 4px var(--wd-lime));
}

#wd-unique-section .bp-pulse-blue {
  fill: var(--wd-cyan);
  filter: drop-shadow(0 0 4px var(--wd-cyan));
}

/* Central engine */

#wd-unique-section .bp-core {
  position: absolute;
  z-index: 3;
  top: 47%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  border: 1px solid rgba(184,255,0,.75);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%,rgba(184,255,0,.14),transparent 65%),
    #061416;
  box-shadow:
    0 0 0 7px rgba(184,255,0,.035),
    0 0 0 14px rgba(0,217,255,.025),
    0 0 25px rgba(184,255,0,.12),
    inset 0 0 25px rgba(184,255,0,.07);
  transform: translate(-50%,-50%);
  animation: wd-core-float 5s ease-in-out infinite;
}

#wd-unique-section .bp-ring {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(184,255,0,.3);
  border-top-color: var(--wd-lime);
  border-right-color: transparent;
  border-radius: 50%;
  pointer-events: none;
  animation: wd-rotate 8s linear infinite;
}

#wd-unique-section .bp-ring-two {
  inset: -17px;
  border-color: rgba(0,217,255,.2);
  border-bottom-color: var(--wd-cyan);
  border-left-color: transparent;
  animation-duration: 12s;
  animation-direction: reverse;
}

#wd-unique-section .bp-core-icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  margin-bottom: 5px;
  border-radius: 12px;
  background: rgba(184,255,0,.07);
  box-shadow: 0 0 18px rgba(184,255,0,.12);
}

#wd-unique-section .bp-core-icon svg {
  width: 37px;
  height: 37px;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#wd-unique-section .bp-core-title {
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

#wd-unique-section .bp-core-subtitle {
  margin-top: 4px;
  color: #91aaa7;
  font-size: 6px;
  letter-spacing: .5px;
}

#wd-unique-section .bp-core-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: var(--wd-lime);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .6px;
}

#wd-unique-section .bp-core-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wd-lime);
  box-shadow: 0 0 6px var(--wd-lime);
}

/* Four service nodes */

#wd-unique-section .bp-node {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 168px;
  min-height: 55px;
  padding: 7px;
  border: 1px solid rgba(124,169,165,.27);
  border-radius: 9px;
  background: linear-gradient(115deg,rgba(12,34,37,.97),rgba(4,19,23,.97));
  box-shadow: 0 5px 17px rgba(0,0,0,.2);
  transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
  cursor: default;
}

#wd-unique-section .bp-node:hover,
#wd-unique-section .bp-node.bp-selected {
  border-color: var(--wd-lime);
  background: linear-gradient(115deg,rgba(33,57,30,.98),rgba(4,24,26,.98));
  box-shadow: 0 0 18px rgba(184,255,0,.13);
  transform: translateY(-3px);
}

#wd-unique-section .bp-frontend {
  top: 48px;
  left: 3%;
}

#wd-unique-section .bp-backend {
  top: 48px;
  right: 3%;
}

#wd-unique-section .bp-seo {
  bottom: 57px;
  left: 3%;
}

#wd-unique-section .bp-performance {
  right: 3%;
  bottom: 57px;
}

#wd-unique-section .bp-node-icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
}

#wd-unique-section .bp-node-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#wd-unique-section .bp-purple {
  color: #bd91ff;
  background: rgba(189,145,255,.12);
}

#wd-unique-section .bp-orange {
  color: #ffb15b;
  background: rgba(255,177,91,.12);
}

#wd-unique-section .bp-green {
  color: #b8ff00;
  background: rgba(184,255,0,.1);
}

#wd-unique-section .bp-cyan {
  color: #00d9ff;
  background: rgba(0,217,255,.1);
}

#wd-unique-section .bp-node-copy {
  min-width: 0;
  flex: 1;
}

#wd-unique-section .bp-node-copy span {
  display: block;
  margin-bottom: 3px;
  color: #829d9b;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .55px;
}

#wd-unique-section .bp-node-copy strong {
  display: block;
  color: #f5faf8;
  font-size: 10px;
  line-height: 1.35;
}

#wd-unique-section .bp-node-copy small {
  display: block;
  margin-top: 3px;
  color: #a3b7b6;
  font-size: 7px;
  line-height: 1.4;
}

#wd-unique-section .bp-check {
  display: grid;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  place-items: center;
  border: 1px solid rgba(184,255,0,.35);
  border-radius: 50%;
  color: var(--wd-lime);
  font-size: 9px;
}

/* Floating technology tags */

#wd-unique-section .bp-tech-tag {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  background: rgba(5,20,24,.96);
  color: #e7f1ef;
  font-size: 8px;
  font-weight: 800;
  box-shadow: 0 5px 12px rgba(0,0,0,.25);
  animation: wd-tag-float 4s ease-in-out infinite;
}

#wd-unique-section .bp-html {
  top: 111px;
  left: 35%;
}

#wd-unique-section .bp-css {
  top: 198px;
  left: 36%;
  animation-delay: -1.4s;
}

#wd-unique-section .bp-js {
  top: 110px;
  right: 35%;
  animation-delay: -.8s;
}

#wd-unique-section .bp-html-symbol {
  color: #ff8d50;
  font-size: 12px;
}

#wd-unique-section .bp-css-symbol {
  color: #4c9dff;
  font-size: 13px;
}

#wd-unique-section .bp-js-symbol {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 2px;
  background: #ffe34d;
  color: #25230a;
  font-size: 8px;
}

/* Bottom info strip */

#wd-unique-section .bp-bottom {
  position: absolute;
  z-index: 6;
  right: 14px;
  bottom: 9px;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(144,185,177,.18);
}

#wd-unique-section .bp-bottom-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

#wd-unique-section .bp-star {
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(184,255,0,.3);
  border-radius: 7px;
  background: rgba(184,255,0,.08);
  color: var(--wd-lime);
}

#wd-unique-section .bp-bottom-info strong,
#wd-unique-section .bp-bottom-info small {
  display: block;
}

#wd-unique-section .bp-bottom-info strong {
  font-size: 9px;
}

#wd-unique-section .bp-bottom-info small {
  margin-top: 3px;
  color: #92a8a7;
  font-size: 7px;
}

#wd-unique-section .bp-progress {
  width: 100px;
  flex-shrink: 0;
}

#wd-unique-section .bp-progress-track {
  height: 4px;
  overflow: hidden;
  border-radius: 8px;
  background: #213435;
}

#wd-unique-section .bp-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--wd-lime),var(--wd-cyan));
  box-shadow: 0 0 9px rgba(184,255,0,.4);
  animation: wd-progress 3s ease-in-out infinite alternate;
}

#wd-unique-section .bp-progress small {
  display: block;
  margin-top: 5px;
  color: var(--wd-lime);
  font-size: 6px;
  letter-spacing: .8px;
  text-align: right;
}

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

@keyframes wd-line-sweep {
  0% { transform: translateX(-25%); opacity: .3; }
  50% { opacity: 1; }
  100% { transform: translateX(25%); opacity: .3; }
}

@keyframes wd-content-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wd-glow-pulse {
  from { opacity: .45; transform: scale(.92); }
  to { opacity: 1; transform: scale(1.08); }
}

@keyframes wd-blink {
  50% { opacity: .35; }
}

@keyframes wd-dash-flow {
  to { stroke-dashoffset: -80; }
}

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

@keyframes wd-core-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -4px; }
}

@keyframes wd-tag-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes wd-progress {
  from { width: 35%; }
  to { width: 100%; }
}

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

@media (min-width: 601px) and (max-width: 1000px) {
  #wd-unique-section .wd-container {
    gap: 17px;
    padding: 26px 4%;
  }

  #wd-unique-section .wd-heading {
    font-size: clamp(23px, 3vw, 29px);
  }

  #wd-unique-section .wd-description {
    font-size: 11px;
  }

  #wd-unique-section .wd-features {
    gap: 16px 10px;
  }

  #wd-unique-section .wd-feature {
    gap: 7px;
  }

  #wd-unique-section .wd-feature-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  #wd-unique-section .wd-feature-icon svg {
    width: 24px;
    height: 24px;
  }

  #wd-unique-section .wd-feature-copy h3 {
    font-size: 10px;
  }

  #wd-unique-section .wd-feature-copy p {
    font-size: 10px;
  }

  #wd-unique-section .wd-blueprint {
    height: 310px;
  }

  #wd-unique-section .bp-node {
    width: 45%;
    gap: 5px;
    padding: 6px;
  }

  #wd-unique-section .bp-node-icon {
    flex-basis: 27px;
    width: 27px;
    height: 27px;
  }

  #wd-unique-section .bp-node-icon svg {
    width: 20px;
    height: 20px;
  }

  #wd-unique-section .bp-node-copy strong {
    font-size: 9px;
  }

  #wd-unique-section .bp-node-copy small {
    font-size: 6px;
  }

  #wd-unique-section .bp-check {
    display: none;
  }

  #wd-unique-section .bp-core {
    width: 105px;
    height: 105px;
  }
}

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

@media (max-width: 600px) {
  #wd-unique-section .wd-container {
    grid-template-columns: minmax(0,1fr);
    gap: 18px;
    padding: 26px 18px 18px;
  }

  #wd-unique-section .wd-heading {
    font-size: clamp(25px, 7vw, 33px);
    line-height: 1.2;
  }

  #wd-unique-section .wd-description {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.7;
  }

  #wd-unique-section .wd-features {
    gap: 17px 12px;
    margin-top: 19px;
  }

  #wd-unique-section .wd-feature {
    gap: 8px;
  }

  #wd-unique-section .wd-feature-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  #wd-unique-section .wd-feature-icon svg {
    width: 25px;
    height: 25px;
  }

  #wd-unique-section .wd-feature-copy h3 {
    font-size: 11px;
  }

  #wd-unique-section .wd-feature-copy p {
    font-size: 10px;
  }

  #wd-unique-section .wd-blueprint {
    height: 325px;
    border-radius: 13px;
  }

  #wd-unique-section .bp-core {
    top: 49%;
    width: 100px;
    height: 100px;
  }

  #wd-unique-section .bp-core-icon {
    width: 34px;
    height: 34px;
  }

  #wd-unique-section .bp-core-icon svg {
    width: 29px;
    height: 29px;
  }

  #wd-unique-section .bp-core-title {
    font-size: 9px;
  }

  #wd-unique-section .bp-core-subtitle {
    font-size: 5px;
  }

  #wd-unique-section .bp-node {
    width: 43%;
    min-height: 50px;
    gap: 5px;
    padding: 6px;
  }

  #wd-unique-section .bp-frontend,
  #wd-unique-section .bp-backend {
    top: 48px;
  }

  #wd-unique-section .bp-frontend,
  #wd-unique-section .bp-seo {
    left: 3%;
  }

  #wd-unique-section .bp-backend,
  #wd-unique-section .bp-performance {
    right: 3%;
  }

  #wd-unique-section .bp-seo,
  #wd-unique-section .bp-performance {
    bottom: 57px;
  }

  #wd-unique-section .bp-node-icon {
    flex-basis: 25px;
    width: 25px;
    height: 25px;
  }

  #wd-unique-section .bp-node-icon svg {
    width: 19px;
    height: 19px;
  }

  #wd-unique-section .bp-node-copy span {
    font-size: 5px;
  }

  #wd-unique-section .bp-node-copy strong {
    font-size: 8px;
  }

  #wd-unique-section .bp-node-copy small {
    font-size: 6px;
    white-space: normal;
  }

  #wd-unique-section .bp-check {
    display: none;
  }

  #wd-unique-section .bp-html {
    top: 119px;
    left: 4%;
  }

  #wd-unique-section .bp-css {
    top: 177px;
    left: 4%;
  }

  #wd-unique-section .bp-js {
    top: 119px;
    right: 4%;
  }

  #wd-unique-section .bp-bottom {
    right: 9px;
    bottom: 8px;
    left: 9px;
    gap: 5px;
  }

  #wd-unique-section .bp-bottom-info {
    gap: 5px;
  }

  #wd-unique-section .bp-star {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
  }

  #wd-unique-section .bp-bottom-info strong {
    font-size: 7px;
  }

  #wd-unique-section .bp-bottom-info small {
    font-size: 6px;
  }

  #wd-unique-section .bp-progress {
    width: 70px;
  }
}

/* EXTRA SMALL MOBILE */

@media (max-width: 370px) {
  #wd-unique-section .wd-container {
    padding-right: 13px;
    padding-left: 13px;
  }

  #wd-unique-section .wd-features {
    column-gap: 8px;
  }

  #wd-unique-section .wd-feature {
    gap: 6px;
  }

  #wd-unique-section .wd-feature-icon {
    flex-basis: 31px;
    width: 31px;
    height: 31px;
  }

  #wd-unique-section .wd-feature-icon svg {
    width: 22px;
    height: 22px;
  }

  #wd-unique-section .wd-feature-copy h3 {
    font-size: 10px;
  }

  #wd-unique-section .wd-feature-copy p {
    font-size: 9px;
  }

  #wd-unique-section .bp-node {
    width: 45%;
  }

  #wd-unique-section .bp-node-copy strong {
    font-size: 7px;
  }

  #wd-unique-section .bp-node-copy small {
    font-size: 5.5px;
  }

  #wd-unique-section .bp-bottom-info small {
    display: none;
  }

  #wd-unique-section .bp-progress {
    width: 60px;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  #wd-unique-section *,
  #wd-unique-section *::before,
  #wd-unique-section *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ===== WEB DEVELOPMENT SERVICES STRIP ===== */
#web-services-strip,
#web-services-strip * {
  box-sizing: border-box;
}

#web-services-strip {
  --lime: #b8ff00;
  --bg: #020d11;
  width: 100%;
  position: relative;
  overflow: hidden;
  color: #fff;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(ellipse at 78% 40%, rgba(34,90,41,.13), transparent 40%),
    linear-gradient(105deg, #020b0f, #031216 65%, #020b0f);
  border-top: 1px solid var(--lime);
  border-bottom: 1px solid rgba(184,255,0,.45);
}

#web-services-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: -25%;
  width: 25%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e4ff8c, transparent);
  box-shadow: 0 0 12px var(--lime);
  animation: wss-sweep 6s linear infinite;
  pointer-events: none;
}

#web-services-strip .wss-inner {
  width: 100%;
  max-width: 1500px;
  min-height: 115px;
  margin: auto;
  padding: 14px 5.5%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 32px;
}

/* LEFT CONTENT */
#web-services-strip .wss-content {
  min-width: 0;
}

#web-services-strip .wss-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  color: #f0f5f3;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .55px;
  text-transform: uppercase;
}

#web-services-strip .wss-label-line {
  display: inline-block;
  width: 24px;
  height: 5px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--lime);
  box-shadow: 0 0 9px rgba(184,255,0,.25);
}

#web-services-strip .wss-heading {
  margin: 0 0 7px;
  color: #f7f9f8;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 750;
  letter-spacing: -.65px;
  line-height: 1.2;
}

#web-services-strip .wss-description {
  max-width: 440px;
  margin: 0;
  color: #d3dddf;
  font-size: 11px;
  line-height: 1.55;
}

/* RIGHT SERVICE CARDS */
#web-services-strip .wss-services {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
}

#web-services-strip .wss-card {
  position: relative;
  min-width: 0;
  min-height: 80px;
  padding: 12px 5px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(72,133,137,.12);
  border-right-color: rgba(72,133,137,.22);
  border-radius: 11px;
  background: rgba(2,18,22,.26);
  text-align: center;
  cursor: pointer;
  outline: none;
  transition:
    background .3s ease,
    border-color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

#web-services-strip .wss-card + .wss-card {
  margin-left: -1px;
}

#web-services-strip .wss-card:hover,
#web-services-strip .wss-card:focus-visible,
#web-services-strip .wss-card.wss-active {
  z-index: 2;
  border-color: rgba(184,255,0,.45);
  background: linear-gradient(
    180deg,
    rgba(184,255,0,.07),
    rgba(184,255,0,.015)
  );
  box-shadow: inset 0 0 18px rgba(184,255,0,.025);
  transform: translateY(-2px);
}

#web-services-strip .wss-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  color: var(--lime);
  filter: drop-shadow(0 0 4px rgba(184,255,0,.10));
  transition: transform .3s ease, filter .3s ease;
}

#web-services-strip .wss-card:hover .wss-icon,
#web-services-strip .wss-card.wss-active .wss-icon {
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 0 7px rgba(184,255,0,.35));
}

#web-services-strip .wss-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#web-services-strip .wss-card-title {
  display: block;
  max-width: 100%;
  color: #f3f7f6;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* RESPONSIVE: TABLET */
@media (min-width: 601px) and (max-width: 900px) {
  #web-services-strip .wss-inner {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
    gap: 18px;
    padding-right: 3%;
    padding-left: 3%;
  }

  #web-services-strip .wss-heading {
    font-size: 19px;
  }

  #web-services-strip .wss-description {
    font-size: 10px;
  }

  #web-services-strip .wss-card {
    min-height: 76px;
    padding-right: 3px;
    padding-left: 3px;
  }

  #web-services-strip .wss-icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  #web-services-strip .wss-card-title {
    font-size: 9px;
  }
}

/* RESPONSIVE: MOBILE */
@media (max-width: 600px) {
  #web-services-strip .wss-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
    padding: 22px 17px 18px;
  }

  #web-services-strip .wss-heading {
    font-size: 23px;
  }

  #web-services-strip .wss-description {
    max-width: 100%;
    font-size: 12px;
  }

  #web-services-strip .wss-services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  #web-services-strip .wss-card,
  #web-services-strip .wss-card + .wss-card {
    min-height: 88px;
    margin-left: 0;
    padding: 12px 5px;
    border: 1px solid rgba(72,133,137,.25);
    border-radius: 9px;
  }

  #web-services-strip .wss-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  #web-services-strip .wss-card-title {
    font-size: 10px;
  }
}

/* VERY SMALL MOBILE */
@media (max-width: 360px) {
  #web-services-strip .wss-inner {
    padding-right: 12px;
    padding-left: 12px;
  }

  #web-services-strip .wss-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #web-services-strip .wss-heading {
    font-size: 21px;
  }
}

@keyframes wss-sweep {
  0% { left: -25%; }
  100% { left: 110%; }
}

@media (prefers-reduced-motion: reduce) {
  #web-services-strip *,
  #web-services-strip *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================
   WOW TECHNOLOGY SHOWCASE
   Pure HTML + CSS + JavaScript
   No images / No external libraries
========================================== */

#wow-tech, #wow-tech * { box-sizing: border-box; }

#wow-tech {
  --lime: #b8ff00;
  --cyan: #00e5ff;
  --purple: #a98bff;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  color: #fff;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(ellipse at 63% 50%, rgba(34,100,38,.23), transparent 35%),
    radial-gradient(ellipse at 85% 10%, rgba(0,229,255,.08), transparent 30%),
    linear-gradient(110deg,#02090d,#031518 58%,#020b10);
  border-top: 1px solid rgba(184,255,0,.8);
  border-bottom: 1px solid rgba(184,255,0,.8);
}

#wow-tech .wt-grid-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(0,229,255,.12) 1px, transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.12) 1px,transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(90deg, transparent, black 30%, black 90%, transparent);
}

#wow-tech .wt-scanline {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 22%;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,rgba(184,255,0,.035),transparent);
  transform: skewX(-18deg);
  animation: wt-scan 9s linear infinite;
}

#wow-tech .wt-container {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr 1.12fr .72fr;
  align-items: center;
  gap: 22px;
  max-width: 1500px;
  min-height: 178px;
  margin: auto;
  padding: 22px 5.4%;
}

/* LEFT CONTENT */

#wow-tech .wt-intro { min-width: 0; }

#wow-tech .wt-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  color: #e8f0ef;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

#wow-tech .wt-eyebrow i {
  display: block;
  width: 23px;
  height: 5px;
  border-radius: 8px;
  background: var(--lime);
  box-shadow: 0 0 12px rgba(184,255,0,.5);
}

#wow-tech .wt-title {
  margin: 0 0 7px;
  color: #fff;
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.7px;
}

#wow-tech .wt-title span {
  color: var(--lime);
  text-shadow: 0 0 18px rgba(184,255,0,.16);
}

#wow-tech .wt-description {
  margin: 0;
  max-width: 400px;
  color: #c8d7d9;
  font-size: 11px;
  line-height: 1.65;
}

/* TECHNOLOGY BADGES */

#wow-tech .wt-tech-list {
  display: grid;
  grid-template-columns: repeat(8,minmax(0,1fr));
  gap: 4px;
  margin-top: 15px;
}

#wow-tech .wt-tech {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 57px;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgba(255,255,255,.015);
  transition: .3s ease;
}

#wow-tech .wt-tech:hover {
  border-color: rgba(184,255,0,.4);
  background: rgba(184,255,0,.07);
  transform: translateY(-4px);
}

#wow-tech .wt-tech-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

#wow-tech .wt-tech-icon svg {
  width: 27px;
  height: 27px;
  display: block;
}

#wow-tech .wt-tech-name {
  color: #e7eeee;
  font-size: 8px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

#wow-tech .wt-html { color: #ff7043; }
#wow-tech .wt-css { color: #399bff; }
#wow-tech .wt-js { color: #ffe65c; }
#wow-tech .wt-react { color: #56e6ff; }
#wow-tech .wt-next { color: #fff; }
#wow-tech .wt-wordpress { color: #55c6f0; }
#wow-tech .wt-laravel { color: #ff6565; }
#wow-tech .wt-php { color: #a9a6ff; }

#wow-tech .wt-php .wt-tech-icon {
  width: 31px;
  height: 19px;
  margin: 4px 0 5px;
  border-radius: 50%;
  background: #777bb4;
  color: white;
  font-size: 10px;
  font-style: italic;
}

/* CENTER: ANIMATED CLOUD ENGINE */

#wow-tech .wt-engine {
  position: relative;
  min-width: 0;
  height: 143px;
  overflow: hidden;
  border: 1px solid rgba(184,255,0,.14);
  border-radius: 15px;
  background:
    radial-gradient(ellipse at 48% 43%,rgba(184,255,0,.12),transparent 54%),
    linear-gradient(135deg,rgba(3,24,25,.6),rgba(3,12,18,.55));
}

#wow-tech .wt-engine-grid {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(184,255,0,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(184,255,0,.14) 1px,transparent 1px);
  background-size: 17px 17px;
  mask-image: radial-gradient(ellipse,black,transparent 85%);
}

#wow-tech .wt-engine-caption {
  position: absolute;
  z-index: 6;
  left: 10px;
  top: 9px;
  color: #a8c0bd;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
}

#wow-tech .wt-engine-caption span { color: var(--lime); }

#wow-tech .wt-cloud {
  position: absolute;
  z-index: 4;
  top: 5px;
  left: 50%;
  width: 78px;
  height: 63px;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 9px rgba(184,255,0,.38));
  animation: wt-cloud-float 4s ease-in-out infinite;
}

#wow-tech .wt-cloud svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

#wow-tech .wt-cloud-stroke {
  fill: rgba(184,255,0,.08);
  stroke: var(--lime);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#wow-tech .wt-cloud-arrow {
  fill: none;
  stroke: var(--lime);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#wow-tech .wt-beam {
  position: absolute;
  z-index: 1;
  top: 60px;
  left: 50%;
  width: 1px;
  height: 47px;
  background: linear-gradient(var(--lime),transparent);
  box-shadow: 0 0 12px var(--lime);
  transform-origin: top;
  animation: wt-beam-pulse 2s ease-in-out infinite;
}

#wow-tech .wt-orbit {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 50%;
  width: 170px;
  height: 76px;
  border: 1px solid rgba(184,255,0,.18);
  border-radius: 50%;
  transform: translateX(-50%) rotate(-18deg);
}

#wow-tech .wt-orbit-two {
  width: 205px;
  height: 89px;
  border-color: rgba(0,229,255,.18);
  transform: translateX(-50%) rotate(22deg);
}

#wow-tech .wt-orbit-dot {
  position: absolute;
  top: 21%;
  left: 15%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 9px var(--cyan);
  animation: wt-dot-pulse 2s ease-in-out infinite;
}

#wow-tech .wt-orbit-dot-two {
  top: 76%;
  left: 83%;
  background: var(--lime);
  box-shadow: 0 0 9px var(--lime);
  animation-delay: -.9s;
}

/* Server stack */

#wow-tech .wt-server-stack {
  position: absolute;
  z-index: 4;
  right: 8%;
  bottom: 22px;
  width: 58px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: perspective(200px) rotateY(-8deg);
}

#wow-tech .wt-server {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 21px;
  padding: 0 5px;
  border: 1px solid rgba(184,255,0,.6);
  border-radius: 4px;
  background: linear-gradient(110deg,#122a25,#07151a);
  box-shadow: inset 0 0 9px rgba(184,255,0,.06),0 0 8px rgba(184,255,0,.08);
}

#wow-tech .wt-server::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 5px var(--lime);
}

#wow-tech .wt-server i {
  display: block;
  width: 25px;
  height: 2px;
  background: linear-gradient(90deg,var(--lime),rgba(184,255,0,.1));
}

#wow-tech .wt-server b {
  position: absolute;
  right: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 4px var(--cyan);
}

#wow-tech .wt-server:nth-child(2) { animation: wt-server-glow 2.5s infinite; }
#wow-tech .wt-server:nth-child(3) { animation: wt-server-glow 2.5s .7s infinite; }

/* Mini dashboard */

#wow-tech .wt-dashboard {
  position: absolute;
  z-index: 3;
  bottom: 17px;
  left: 50%;
  width: 118px;
  height: 59px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid rgba(184,255,0,.65);
  border-radius: 6px;
  background: linear-gradient(140deg,#0b2026,#02090d);
  box-shadow: 0 0 18px rgba(0,0,0,.5),0 0 13px rgba(184,255,0,.1);
  transform: translateX(-50%) perspective(180px) rotateX(4deg) rotateY(-5deg);
}

#wow-tech .wt-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(184,255,0,.2);
}

#wow-tech .wt-dashboard-head strong {
  color: #f3f8f7;
  font-size: 6px;
  letter-spacing: .5px;
}

#wow-tech .wt-dashboard-head span {
  color: var(--lime);
  font-size: 5px;
}

#wow-tech .wt-dashboard-body {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 5px;
  padding-top: 5px;
}

#wow-tech .wt-code-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#wow-tech .wt-code-lines i {
  display: block;
  width: 90%;
  height: 2px;
  border-radius: 3px;
  background: #3b93a1;
}

#wow-tech .wt-code-lines i:nth-child(2) { width: 65%; background: var(--lime); }
#wow-tech .wt-code-lines i:nth-child(3) { width: 80%; background: #b58aff; }
#wow-tech .wt-code-lines i:nth-child(4) { width: 50%; }
#wow-tech .wt-code-lines i:nth-child(5) { width: 75%; background: var(--lime); }

#wow-tech .wt-mini-chart {
  display: flex;
  align-items: end;
  justify-content: space-around;
  height: 29px;
  padding: 3px;
  border-bottom: 1px solid rgba(184,255,0,.22);
}

#wow-tech .wt-mini-chart i {
  width: 5px;
  height: 35%;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(var(--lime),rgba(184,255,0,.15));
  animation: wt-chart 1.8s ease-in-out infinite alternate;
}

#wow-tech .wt-mini-chart i:nth-child(2) { height: 70%; animation-delay: -.4s; }
#wow-tech .wt-mini-chart i:nth-child(3) { height: 48%; animation-delay: -.8s; }
#wow-tech .wt-mini-chart i:nth-child(4) { height: 95%; animation-delay: -1.2s; }
#wow-tech .wt-mini-chart i:nth-child(5) { height: 65%; animation-delay: -.5s; }

/* Floating labels */

#wow-tech .wt-float-tag {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(0,229,255,.35);
  border-radius: 5px;
  background: rgba(3,19,23,.95);
  color: #e7f7f8;
  font-size: 7px;
  font-weight: 800;
  box-shadow: 0 0 13px rgba(0,229,255,.06);
  animation: wt-tag-float 3.5s ease-in-out infinite;
}

#wow-tech .wt-float-tag b { color: var(--cyan); }
#wow-tech .wt-tag-left { left: 4%; top: 43px; }
#wow-tech .wt-tag-right { right: 4%; top: 39px; animation-delay: -1.6s; }

#wow-tech .wt-bottom-status {
  position: absolute;
  z-index: 6;
  right: 10px;
  bottom: 5px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b9d0ca;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .7px;
}

#wow-tech .wt-bottom-status i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 6px var(--lime);
}

#wow-tech .wt-bottom-status span {
  margin-left: auto;
  color: var(--lime);
}

/* RIGHT BENEFITS */

#wow-tech .wt-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-left: 13px;
  border-left: 1px solid rgba(184,255,0,.18);
}

#wow-tech .wt-benefit {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f1f5f4;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  transition: transform .25s ease,color .25s ease;
}

#wow-tech .wt-benefit:hover {
  color: var(--lime);
  transform: translateX(3px);
}

#wow-tech .wt-check {
  display: grid;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: #142000;
  font-size: 8px;
  font-weight: 900;
  box-shadow: 0 0 8px rgba(184,255,0,.12);
}

/* ANIMATIONS */

@keyframes wt-scan {
  from { left: -35%; }
  to { left: 120%; }
}

@keyframes wt-cloud-float {
  0%,100% { margin-top: 0; }
  50% { margin-top: -5px; }
}

@keyframes wt-beam-pulse {
  0%,100% { opacity: .3; transform: scaleY(.65); }
  50% { opacity: 1; transform: scaleY(1); }
}

@keyframes wt-dot-pulse {
  0%,100% { opacity: .35; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.35); }
}

@keyframes wt-server-glow {
  0%,100% { box-shadow: inset 0 0 8px rgba(184,255,0,.05); }
  50% { box-shadow: inset 0 0 12px rgba(184,255,0,.2),0 0 7px rgba(184,255,0,.1); }
}

@keyframes wt-chart {
  from { opacity: .45; }
  to { opacity: 1; }
}

@keyframes wt-tag-float {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

/* TABLET */

@media (min-width: 701px) and (max-width: 1050px) {
  #wow-tech .wt-container {
    grid-template-columns: 1.1fr 1fr;
    gap: 17px;
    padding: 20px 3%;
  }

  #wow-tech .wt-benefits {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(184,255,0,.18);
  }

  #wow-tech .wt-benefit { font-size: 10px; }
  #wow-tech .wt-title { font-size: 22px; }
  #wow-tech .wt-tech-name { font-size: 7px; }
}

/* MOBILE */

@media (max-width: 700px) {
  #wow-tech .wt-container {
    grid-template-columns: minmax(0,1fr);
    gap: 17px;
    padding: 23px 17px;
  }

  #wow-tech .wt-title {
    font-size: clamp(23px,6vw,30px);
  }

  #wow-tech .wt-description {
    max-width: 500px;
    font-size: 12px;
  }

  #wow-tech .wt-tech-list {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 6px;
  }

  #wow-tech .wt-tech {
    min-height: 62px;
    border-color: rgba(184,255,0,.13);
  }

  #wow-tech .wt-tech-name { font-size: 9px; }

  #wow-tech .wt-engine {
    width: 100%;
    height: 175px;
  }

  #wow-tech .wt-cloud {
    width: 80px;
    height: 65px;
  }

  #wow-tech .wt-dashboard {
    bottom: 23px;
    width: 130px;
    height: 62px;
  }

  #wow-tech .wt-server-stack {
    bottom: 28px;
    right: 7%;
  }

  #wow-tech .wt-bottom-status {
    bottom: 7px;
  }

  #wow-tech .wt-benefits {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px 10px;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(184,255,0,.22);
  }

  #wow-tech .wt-benefit { font-size: 11px; }
}

@media (max-width: 370px) {
  #wow-tech .wt-container {
    padding-right: 12px;
    padding-left: 12px;
  }

  #wow-tech .wt-tech-name { font-size: 8px; }

  #wow-tech .wt-benefit { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #wow-tech *,
  #wow-tech *::before,
  #wow-tech *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================
   CREATIVE PORTFOLIO SHOWCASE
   HTML + CSS + JavaScript | No Images
========================================= */

#creative-portfolio,
#creative-portfolio * {
  box-sizing: border-box;
}

#creative-portfolio {
  --lime: #baff00;
  --cyan: #42e9ff;
  --purple: #ae8bff;
  --orange: #ffb86b;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse at 75% 50%, rgba(38, 105, 50, .16), transparent 38%),
    linear-gradient(110deg, #020a0e, #031317 55%, #020a0e);
  border-top: 1px solid rgba(186,255,0,.8);
  border-bottom: 1px solid rgba(186,255,0,.25);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

#creative-portfolio .cp-inner {
  position: relative;
  width: 100%;
  max-width: 1500px;
  min-height: 170px;
  margin: auto;
  padding: 21px 5.4%;
  display: grid;
  grid-template-columns: .92fr 1.25fr;
  align-items: center;
  gap: 38px;
}

#creative-portfolio .cp-intro {
  min-width: 0;
}

#creative-portfolio .cp-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  color: #e9f2ee;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .9px;
}

#creative-portfolio .cp-eyebrow i {
  display: block;
  width: 23px;
  height: 5px;
  border-radius: 8px;
  background: var(--lime);
  box-shadow: 0 0 12px rgba(186,255,0,.35);
}

#creative-portfolio .cp-heading {
  margin: 0 0 7px;
  color: #f7f9f8;
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.7px;
}

#creative-portfolio .cp-heading span {
  color: var(--lime);
}

#creative-portfolio .cp-description {
  max-width: 390px;
  margin: 0;
  color: #c4d1d4;
  font-size: 11px;
  line-height: 1.65;
}

#creative-portfolio .cp-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

#creative-portfolio .cp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 34px;
  padding: 8px 14px;
  border: 1px solid var(--lime);
  border-radius: 30px;
  color: #111b00;
  background: var(--lime);
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: .25s ease;
}

#creative-portfolio .cp-button:hover {
  color: var(--lime);
  background: transparent;
  box-shadow: 0 0 20px rgba(186,255,0,.13);
}

#creative-portfolio .cp-button-arrow {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: #182500;
  color: var(--lime);
  font-size: 13px;
  transition: transform .25s ease;
}

#creative-portfolio .cp-button:hover .cp-button-arrow {
  transform: translateX(3px);
}

/* PROJECT SHOWCASE */

#creative-portfolio .cp-showcase {
  min-width: 0;
  position: relative;
}

#creative-portfolio .cp-gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#creative-portfolio .cp-gallery-label {
  color: #8da6a5;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.1px;
}

#creative-portfolio .cp-gallery-label span {
  color: var(--lime);
}

#creative-portfolio .cp-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

#creative-portfolio .cp-arrow {
  display: grid;
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  place-items: center;
  border: 1px solid rgba(159,197,193,.2);
  border-radius: 50%;
  background: #102126;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: .25s ease;
}

#creative-portfolio .cp-arrow:hover {
  color: #111900;
  border-color: var(--lime);
  background: var(--lime);
  transform: scale(1.06);
}

#creative-portfolio .cp-arrow:disabled {
  opacity: .3;
  cursor: default;
  transform: none;
}

#creative-portfolio .cp-track {
  display: grid;
  grid-auto-columns: calc((100% - 36px) / 4);
  grid-auto-flow: column;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px 1px 7px;
  scroll-behavior: smooth;
}

#creative-portfolio .cp-track::-webkit-scrollbar {
  display: none;
}

#creative-portfolio .cp-project {
  min-width: 0;
  position: relative;
  scroll-snap-align: start;
  cursor: pointer;
  outline: none;
  border-radius: 9px;
}

#creative-portfolio .cp-project:focus-visible .cp-preview {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

#creative-portfolio .cp-preview {
  position: relative;
  height: 72px;
  overflow: hidden;
  border: 1px solid rgba(133,181,177,.2);
  border-radius: 8px;
  background: #0b1c23;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

#creative-portfolio .cp-project:hover .cp-preview,
#creative-portfolio .cp-project:focus-visible .cp-preview {
  transform: translateY(-3px);
  border-color: var(--lime);
  box-shadow: 0 5px 22px rgba(186,255,0,.11);
}

/* MINI BROWSER MOCKUPS */

#creative-portfolio .cp-browser {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 5px;
}

#creative-portfolio .cp-browser-top {
  height: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 3px;
  border-radius: 3px 3px 0 0;
  background: rgba(255,255,255,.12);
}

#creative-portfolio .cp-browser-top i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ff7474;
}

#creative-portfolio .cp-browser-top i:nth-child(2) {
  background: #ffcf68;
}

#creative-portfolio .cp-browser-top i:nth-child(3) {
  background: #baff76;
}

#creative-portfolio .cp-browser-body {
  position: relative;
  height: calc(100% - 10px);
  overflow: hidden;
  padding: 7px 5px;
}

#creative-portfolio .cp-mock-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  margin-bottom: 6px;
}

#creative-portfolio .cp-mock-logo {
  width: 25px;
  height: 4px;
  border-radius: 4px;
  background: currentColor;
}

#creative-portfolio .cp-mock-links {
  display: flex;
  gap: 3px;
}

#creative-portfolio .cp-mock-links i {
  display: block;
  width: 9px;
  height: 2px;
  border-radius: 4px;
  background: rgba(255,255,255,.5);
}

#creative-portfolio .cp-mock-hero {
  position: relative;
  height: 31px;
  padding: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
}

#creative-portfolio .cp-mock-title {
  display: block;
  width: 53%;
  height: 5px;
  margin-bottom: 4px;
  border-radius: 2px;
  background: #fff;
}

#creative-portfolio .cp-mock-line {
  display: block;
  width: 44%;
  height: 2px;
  margin-bottom: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.5);
}

#creative-portfolio .cp-mock-btn {
  display: block;
  width: 24px;
  height: 7px;
  margin-top: 4px;
  border-radius: 3px;
  background: currentColor;
}

#creative-portfolio .cp-mock-art {
  position: absolute;
  top: 5px;
  right: 7px;
  width: 32%;
  height: 24px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 3px;
  background:
    linear-gradient(135deg, transparent 40%, rgba(255,255,255,.25) 41%, transparent 43%),
    linear-gradient(45deg, rgba(255,255,255,.1), transparent);
}

#creative-portfolio .cp-mock-bottom {
  display: flex;
  gap: 4px;
  margin-top: 5px;
}

#creative-portfolio .cp-mock-bottom i {
  flex: 1;
  height: 7px;
  border-radius: 2px;
  background: rgba(255,255,255,.11);
}

/* Distinct themes for each project */

#creative-portfolio .cp-business {
  color: #8cecff;
  background: linear-gradient(135deg,#102e40,#07131f 75%);
}

#creative-portfolio .cp-business .cp-mock-hero {
  background: linear-gradient(115deg,#17455c,#102637);
}

#creative-portfolio .cp-commerce {
  color: #ffc78c;
  background: linear-gradient(130deg,#3c281b,#111318 80%);
}

#creative-portfolio .cp-commerce .cp-mock-hero {
  background: linear-gradient(120deg,#67432a,#35251f);
}

#creative-portfolio .cp-learning {
  color: #a8f3c0;
  background: linear-gradient(135deg,#142f2a,#0b1720);
}

#creative-portfolio .cp-learning .cp-mock-hero {
  background: linear-gradient(120deg,#1b5a4d,#132e35);
}

#creative-portfolio .cp-portfolio {
  color: #d0b6ff;
  background: linear-gradient(135deg,#24204a,#10101d);
}

#creative-portfolio .cp-portfolio .cp-mock-hero {
  background: linear-gradient(120deg,#42316f,#181c36);
}

#creative-portfolio .cp-dashboard-theme {
  color: #c8ff77;
  background: linear-gradient(135deg,#12322d,#091518);
}

#creative-portfolio .cp-dashboard-theme .cp-mock-hero {
  background: linear-gradient(120deg,#164e3e,#0d292b);
}

/* TITLES & META */

#creative-portfolio .cp-project-info {
  padding: 7px 1px 0;
}

#creative-portfolio .cp-project-name {
  display: block;
  margin: 0 0 3px;
  color: #f2f6f5;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.3;
}

#creative-portfolio .cp-project-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  color: #91a8ac;
  font-size: 9px;
  line-height: 1.3;
}

#creative-portfolio .cp-project-category i {
  font-style: normal;
  color: var(--lime);
  opacity: 0;
  transform: translateX(-4px);
  transition: .25s ease;
}

#creative-portfolio .cp-project:hover .cp-project-category i {
  opacity: 1;
  transform: translateX(0);
}

/* Small progress indicator */

#creative-portfolio .cp-gallery-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}

#creative-portfolio .cp-progress {
  width: 60px;
  height: 2px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255,255,255,.12);
}

#creative-portfolio .cp-progress-fill {
  width: 25%;
  height: 100%;
  background: var(--lime);
  transition: width .25s ease;
}

#creative-portfolio .cp-progress-label {
  color: #738c8c;
  font-size: 8px;
  letter-spacing: .4px;
}

/* MOBILE */

@media (max-width: 900px) {
  #creative-portfolio .cp-inner {
    grid-template-columns: .85fr 1.15fr;
    gap: 23px;
    padding-right: 3%;
    padding-left: 3%;
  }

  #creative-portfolio .cp-track {
    grid-auto-columns: calc((100% - 24px) / 3);
    gap: 12px;
  }

  #creative-portfolio .cp-heading {
    font-size: 22px;
  }

  #creative-portfolio .cp-preview {
    height: 75px;
  }
}

@media (max-width: 600px) {
  #creative-portfolio .cp-inner {
    grid-template-columns: minmax(0,1fr);
    gap: 23px;
    padding: 24px 17px 20px;
  }

  #creative-portfolio .cp-heading {
    font-size: 27px;
  }

  #creative-portfolio .cp-description {
    font-size: 12px;
  }

  #creative-portfolio .cp-track {
    grid-auto-columns: calc((100% - 12px) / 2);
    gap: 12px;
  }

  #creative-portfolio .cp-preview {
    height: 100px;
  }

  #creative-portfolio .cp-browser {
    padding: 7px;
  }

  #creative-portfolio .cp-browser-body {
    padding: 9px 6px;
  }

  #creative-portfolio .cp-mock-hero {
    height: 46px;
    padding: 7px;
  }

  #creative-portfolio .cp-mock-title {
    height: 6px;
    margin-bottom: 5px;
  }

  #creative-portfolio .cp-mock-line {
    margin-bottom: 4px;
  }

  #creative-portfolio .cp-mock-art {
    height: 35px;
    width: 35%;
  }

  #creative-portfolio .cp-mock-bottom i {
    height: 10px;
  }

  #creative-portfolio .cp-project-name {
    font-size: 12px;
  }

  #creative-portfolio .cp-project-category {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #creative-portfolio *,
  #creative-portfolio *::before,
  #creative-portfolio *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ==========================================
   JASHCODE IT CTA SECTION
   Pure HTML + CSS + JavaScript
   No external images
========================================== */

#jash-cta,
#jash-cta * {
  box-sizing: border-box;
}

#jash-cta {
  --cta-lime: #baff00;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  color: #ffffff;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(ellipse at 8% 100%, rgba(64, 142, 22, .2), transparent 40%),
    radial-gradient(ellipse at 95% 0%, rgba(92, 167, 13, .16), transparent 35%),
    linear-gradient(100deg, #020b0e 0%, #031519 52%, #020c0e 100%);
  border-top: 2px solid transparent;
  border-image: linear-gradient(
    90deg, #baff00, #00d6a0, #baff00
  ) 1;
}

#jash-cta .cta-inner {
  width: 100%;
  max-width: 1500px;
  min-height: 88px;
  margin: 0 auto;
  padding: 13px 5.4%;
  display: grid;
  grid-template-columns: 1.08fr 1px .72fr .88fr;
  align-items: center;
  gap: 38px;
  position: relative;
  z-index: 2;
}

/* CSS MOUNTAIN GRAPHICS */

#jash-cta .cta-landscape {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 28%;
  overflow: hidden;
  pointer-events: none;
  opacity: .78;
}

#jash-cta .cta-mountain {
  position: absolute;
  bottom: -3px;
  left: -5%;
  width: 220px;
  height: 78px;
  background: linear-gradient(135deg, #173d2a, #071b1d 72%);
  clip-path: polygon(
    0 100%, 0 62%, 12% 43%, 19% 53%,
    35% 5%, 43% 24%, 53% 47%, 64% 34%,
    80% 68%, 91% 54%, 100% 75%, 100% 100%
  );
}

#jash-cta .cta-mountain::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg, transparent 31%, rgba(186,255,0,.65) 32%,
    transparent 34%, transparent 45%,
    rgba(38,143,84,.65) 46%, transparent 48%
  );
}

#jash-cta .cta-mountain-two {
  left: 65px;
  width: 190px;
  height: 65px;
  opacity: .6;
  transform: scaleX(-1);
  background: linear-gradient(135deg, #0d3429, #061315);
}

#jash-cta .cta-glow {
  position: absolute;
  left: 30px;
  bottom: 0;
  width: 150px;
  height: 2px;
  background: var(--cta-lime);
  filter: blur(5px);
  box-shadow: 0 0 20px 5px rgba(186,255,0,.2);
}

/* HEADING */

#jash-cta .cta-title {
  margin: 0;
  max-width: 300px;
  font-size: clamp(17px, 1.65vw, 24px);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.55px;
  color: #f8fbfa;
}

#jash-cta .cta-title span {
  color: var(--cta-lime);
  display: inline-block;
  transition: text-shadow .3s ease;
}

#jash-cta .cta-title span:hover {
  text-shadow: 0 0 16px rgba(186,255,0,.35);
}

/* VERTICAL SEPARATOR */

#jash-cta .cta-divider {
  width: 1px;
  height: 52px;
  background: linear-gradient(
    180deg, transparent, rgba(186,255,0,.7), transparent
  );
}

/* BENEFITS */

#jash-cta .cta-benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

#jash-cta .cta-benefits li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #edf3f2;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .25s ease;
}

#jash-cta .cta-benefits li:hover {
  transform: translateX(3px);
}

#jash-cta .cta-check {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cta-lime);
  color: #132000;
  font-size: 9px;
  font-weight: 900;
  box-shadow: 0 0 8px rgba(186,255,0,.18);
}

/* RIGHT CTA */

#jash-cta .cta-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

#jash-cta .cta-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  min-height: 34px;
  padding: 7px 13px 7px 17px;
  border: 1px solid var(--cta-lime);
  border-radius: 50px;
  background: var(--cta-lime);
  color: #101900;
  font-size: 10px;
  font-family: inherit;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 rgba(186,255,0,0);
  transition: background .25s ease, color .25s ease,
    box-shadow .25s ease, transform .25s ease;
}

#jash-cta .cta-button:hover {
  color: var(--cta-lime);
  background: #061014;
  box-shadow: 0 0 22px rgba(186,255,0,.18);
  transform: translateY(-2px);
}

#jash-cta .cta-button .cta-arrow {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cta-lime);
  background: #142100;
  font-size: 12px;
  transition: transform .25s ease;
}

#jash-cta .cta-button:hover .cta-arrow {
  transform: translateX(3px);
}

#jash-cta .cta-caption {
  margin: 0;
  color: #b9c9c7;
  font-size: 9px;
  line-height: 1.4;
}

/* SUBTLE DECORATIVE LINES */

#jash-cta .cta-line {
  position: absolute;
  right: 0;
  top: 0;
  height: 1px;
  width: 25%;
  background: linear-gradient(90deg, transparent, #baff00, transparent);
  animation: cta-line-glow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cta-line-glow {
  0%, 100% { opacity: .25; transform: translateX(10%); }
  50% { opacity: .9; transform: translateX(-20%); }
}

/* TABLET */

@media (max-width: 850px) {
  #jash-cta .cta-inner {
    grid-template-columns: 1fr 1px 1fr;
    gap: 22px;
    padding: 16px 4%;
  }

  #jash-cta .cta-action {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding-top: 5px;
  }

  #jash-cta .cta-title {
    font-size: 21px;
  }
}

/* MOBILE */

@media (max-width: 520px) {
  #jash-cta .cta-inner {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 24px 20px;
  }

  #jash-cta .cta-title {
    max-width: 320px;
    font-size: 25px;
  }

  #jash-cta .cta-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(
      90deg, transparent, rgba(186,255,0,.5), transparent
    );
  }

  #jash-cta .cta-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 8px;
  }

  #jash-cta .cta-benefits li {
    font-size: 11px;
    white-space: normal;
  }

  #jash-cta .cta-action {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding-top: 0;
  }

  #jash-cta .cta-landscape {
    width: 60%;
    opacity: .4;
  }
}

@media (prefers-reduced-motion: reduce) {
  #jash-cta *,
  #jash-cta *::before,
  #jash-cta *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* =====================================================
   JASHCODE IT — THE SOFTWARE UNIVERSE
   Premium creative hero | HTML + CSS + JavaScript
   No images | No external libraries
===================================================== */
#asu,#asu *{box-sizing:border-box}
#asu{
 --lime:#c6ff00;--cyan:#44f0e1;--violet:#a58bff;
 --pink:#ff77c8;--white:#f6faf8;
 position:relative;isolation:isolate;overflow:hidden;width:100%;
 background:#03080c;color:var(--white);
 font-family:Inter,"Segoe UI",Arial,sans-serif;
 border-top:1px solid #5d8e66;
}
#asu .asu-bg{
 position:absolute;inset:0;z-index:-3;pointer-events:none;
 background:
 radial-gradient(ellipse at 77% 44%,#123c2c80,transparent 32%),
 radial-gradient(ellipse at 96% 75%,#1a235e55,transparent 31%),
 radial-gradient(ellipse at 45% 0%,#06333b48,transparent 42%),
 #03080c;
}
#asu .asu-grid{
 position:absolute;inset:0;z-index:-2;pointer-events:none;
 opacity:.18;
 background-image:
 linear-gradient(#7ee7cb14 1px,transparent 1px),
 linear-gradient(90deg,#7ee7cb14 1px,transparent 1px);
 background-size:44px 44px;
 mask-image:linear-gradient(90deg,transparent 5%,#000 80%);
}
#asu .asu-grain{
 position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(110deg,transparent 40%,#4bffb707 75%,transparent);
}
#asu .asu-shell{
 max-width:1500px;margin:auto;padding:35px 5.2% 22px;
 display:grid;grid-template-columns:.88fr 1.12fr;
 gap:20px;align-items:center;min-height:390px;
}

/* LEFT — EDITORIAL TYPOGRAPHY */
#asu .asu-copy{position:relative;z-index:3}
#asu .asu-label{
 display:flex;align-items:center;gap:10px;margin-bottom:18px;
 color:#d4e5e0;font-size:9px;font-weight:800;
 letter-spacing:2px;text-transform:uppercase;
}
#asu .asu-label:before{
 content:"";width:28px;height:4px;background:var(--lime);
 border-radius:8px;box-shadow:0 0 15px #c6ff0088;
}
#asu .asu-head{
 margin:0;font-size:clamp(39px,4.45vw,64px);
 line-height:.98;letter-spacing:-3px;font-weight:850;
}
#asu .asu-head .asu-white{display:block;color:#f7faf9}
#asu .asu-head .asu-outline{
 display:block;color:transparent;
 -webkit-text-stroke:1px #8da69b;
}
#asu .asu-head .asu-lime{
 display:block;color:var(--lime);
 text-shadow:0 0 36px #c6ff0018;
}
#asu .asu-subtitle{
 margin:19px 0 10px;color:#f2f6f3;
 font-size:clamp(14px,1.35vw,18px);line-height:1.5;font-weight:700;
}
#asu .asu-desc{
 max-width:420px;margin:0;color:#9daeb1;
 font-size:12px;line-height:1.9;
}
#asu .asu-buttons{display:flex;flex-wrap:wrap;gap:11px;margin-top:23px}
#asu .asu-button{
 display:inline-flex;align-items:center;justify-content:center;gap:15px;
 min-height:43px;padding:10px 16px;border-radius:4px;
 background:var(--lime);border:1px solid var(--lime);
 color:#101700;text-decoration:none;font-size:11px;font-weight:850;
 transition:transform .25s,box-shadow .25s,background .25s,color .25s;
}
#asu .asu-button:hover{
 transform:translateY(-3px);
 box-shadow:0 10px 35px #c6ff0025;background:#e1ff80;
}
#asu .asu-button .asu-arrow{
 width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
 background:#172200;color:var(--lime);font-size:15px;
}
#asu .asu-button-alt{
 color:#e7f1ed;background:transparent;border-color:#455d5a;
}
#asu .asu-button-alt:hover{
 background:#10201d;color:var(--lime);border-color:var(--lime);
}
#asu .asu-micro{
 margin-top:21px;display:flex;align-items:center;gap:9px;
 color:#8da5a0;font-size:9px;letter-spacing:.25px;
}
#asu .asu-micro span{color:var(--lime);font-size:13px}

/* RIGHT — ABSTRACT SOFTWARE PLANET */
#asu .asu-universe{
 position:relative;width:100%;min-width:0;
 aspect-ratio:1.12;max-height:460px;perspective:1000px;
 display:grid;place-items:center;
}
#asu .asu-universe:before{
 content:"";position:absolute;width:75%;aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle,#c6ff0012,transparent 65%);
 filter:blur(12px);
}
#asu .asu-universe:after{
 content:"";position:absolute;inset:12%;border:1px solid #86d6bc12;
 border-radius:50%;pointer-events:none;
}
#asu .asu-svg{
 position:absolute;inset:0;width:100%;height:100%;overflow:visible;
}
#asu .asu-ring{
 fill:none;stroke-width:1.1;stroke-dasharray:3 8;
 transform-origin:300px 220px;
}
#asu .asu-ring-one{stroke:#c6ff0075;animation:asu-spin 28s linear infinite}
#asu .asu-ring-two{stroke:#44f0e14c;animation:asu-spin 22s linear infinite reverse}
#asu .asu-ring-three{stroke:#a58bff45;animation:asu-spin 36s linear infinite}
@keyframes asu-spin{to{transform:rotate(360deg)}}
#asu .asu-trail{
 fill:none;stroke-width:1.5;stroke-dasharray:2 13;
 stroke-linecap:round;animation:asu-trail 3s linear infinite;
}
#asu .asu-trail-a{stroke:var(--lime)}
#asu .asu-trail-b{stroke:var(--cyan);animation-delay:-1.2s}
#asu .asu-trail-c{stroke:var(--violet);animation-delay:-2s}
@keyframes asu-trail{to{stroke-dashoffset:-90}}
#asu .asu-planet{
 position:absolute;left:50%;top:49%;
 width:35%;aspect-ratio:1;border-radius:50%;
 transform:translate(-50%,-50%);
 display:grid;place-items:center;
 background:
 radial-gradient(circle at 29% 25%,#f5ffca 0%,#c6ff00 2%,transparent 8%),
 radial-gradient(circle at 34% 27%,#c6ff00 0%,#639d19 12%,transparent 38%),
 radial-gradient(circle at 64% 69%,#123d3b 0%,#07191b 45%,#020608 76%);
 box-shadow:
 0 0 12px #c6ff0060,
 0 0 45px #c6ff0030,
 0 0 100px #40e9d017,
 inset -17px -12px 35px #000c,
 inset 4px 4px 20px #d7ff7d28;
 border:1px solid #c6ff0075;
 animation:asu-planet-breathe 5s ease-in-out infinite;
}
@keyframes asu-planet-breathe{
 0%,100%{box-shadow:0 0 12px #c6ff0060,0 0 45px #c6ff0030,0 0 100px #40e9d017,inset -17px -12px 35px #000c}
 50%{box-shadow:0 0 19px #c6ff0090,0 0 65px #c6ff0040,0 0 125px #40e9d026,inset -17px -12px 35px #000c}
}
#asu .asu-planet:before{
 content:"";position:absolute;inset:11%;border-radius:50%;
 border:1px solid #e1ff7255;
 background:repeating-linear-gradient(135deg,transparent 0 11px,#c6ff0010 12px 13px);
}
#asu .asu-planet:after{
 content:"";position:absolute;width:130%;height:32%;
 border:2px solid #baff0080;border-left-color:#44f0e1;
 border-right-color:#a58bff;border-radius:50%;
 transform:rotate(-28deg);
 box-shadow:0 0 15px #c6ff0025;
}
#asu .asu-planet-content{
 position:relative;z-index:2;text-align:center;
}
#asu .asu-planet-symbol{
 font-size:clamp(28px,4vw,48px);font-weight:850;line-height:1;
 color:#edffb1;text-shadow:0 0 22px #c6ff00a0;
}
#asu .asu-planet-name{
 margin-top:9px;color:#fff;font-size:clamp(8px,1vw,12px);
 font-weight:850;letter-spacing:2px;
}
#asu .asu-planet-caption{
 margin-top:5px;color:#b8d4b3;font-size:7px;
 letter-spacing:1.4px;text-transform:uppercase;
}

/* FLOATING GLASS MODULES */
#asu .asu-module{
 position:absolute;z-index:4;
 display:flex;align-items:center;gap:9px;
 padding:10px 12px;min-width:125px;
 border:1px solid #ffffff26;border-radius:5px;
 background:linear-gradient(135deg,#132321f2,#071013f2);
 box-shadow:0 12px 35px #0006,inset 0 1px #ffffff08;
 backdrop-filter:blur(12px);
 animation:asu-hover 5s ease-in-out infinite;
 transition:border-color .25s,box-shadow .25s;
}
#asu .asu-module:hover{
 border-color:var(--lime);
 box-shadow:0 0 25px #c6ff0018,0 12px 35px #0008;
}
@keyframes asu-hover{
 0%,100%{translate:0 0}
 50%{translate:0 -9px}
}
#asu .asu-module-icon{
 width:30px;height:30px;flex-shrink:0;
 display:grid;place-items:center;border-radius:5px;
 font-size:20px;font-weight:850;background:#ffffff08;
}
#asu .asu-module-title{font-size:10px;font-weight:800;color:#f4faf7}
#asu .asu-module-sub{margin-top:4px;font-size:8px;color:#91aaa2}
#asu .asu-m1{left:0;top:11%;animation-delay:-.6s}
#asu .asu-m2{right:0;top:9%;animation-delay:-1.7s}
#asu .asu-m3{left:1%;bottom:13%;animation-delay:-2.1s}
#asu .asu-m4{right:0;bottom:12%;animation-delay:-1s}
#asu .asu-m1 .asu-module-icon{color:var(--lime)}
#asu .asu-m2 .asu-module-icon{color:var(--cyan)}
#asu .asu-m3 .asu-module-icon{color:#ffbb79}
#asu .asu-m4 .asu-module-icon{color:var(--violet)}

/* Tiny orbital satellites */
#asu .asu-satellite{
 position:absolute;z-index:3;width:11px;height:11px;border-radius:50%;
 background:var(--lime);box-shadow:0 0 15px currentColor;
}
#asu .asu-sat-a{left:22%;top:21%;color:var(--lime);animation:asu-satellite 6s ease-in-out infinite}
#asu .asu-sat-b{right:18%;top:36%;color:var(--cyan);background:var(--cyan);animation:asu-satellite 5s ease-in-out infinite reverse}
#asu .asu-sat-c{left:31%;bottom:18%;color:var(--violet);background:var(--violet);animation:asu-satellite 7s ease-in-out infinite}
@keyframes asu-satellite{
 0%,100%{transform:translate(0,0) scale(.8)}
 50%{transform:translate(10px,-15px) scale(1.3)}
}
#asu .asu-data{
 position:absolute;color:#8da9a1;font:8px Consolas,monospace;
 letter-spacing:.8px;
}
#asu .asu-data-a{right:12%;top:28%}
#asu .asu-data-b{left:18%;bottom:28%;color:#c6ff00}
#asu .asu-data-c{right:14%;bottom:25%;color:#44f0e1}
#asu .asu-scan{
 position:absolute;left:8%;right:8%;height:1px;top:20%;
 opacity:.6;pointer-events:none;
 background:linear-gradient(90deg,transparent,#c6ff00,transparent);
 box-shadow:0 0 10px #c6ff00;
 animation:asu-scan 6s ease-in-out infinite;
}
@keyframes asu-scan{
 0%,100%{top:17%;opacity:0}
 30%,70%{opacity:.7}
 50%{top:83%}
}

/* BOTTOM TECH LINE */
#asu .asu-bottom{
 display:flex;justify-content:space-between;align-items:center;
 gap:18px;max-width:1500px;margin:auto;padding:0 5.2% 24px;
}
#asu .asu-bottom-label{
 color:#829c96;font-size:8px;font-weight:800;
 letter-spacing:1.7px;white-space:nowrap;
}
#asu .asu-techs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
#asu .asu-tech{
 border:1px solid #d4fff01c;border-radius:3px;padding:7px 10px;
 background:#ffffff04;color:#c6d7d1;font-size:9px;
 transition:.2s;
}
#asu .asu-tech:hover{color:var(--lime);border-color:#c6ff0070}

/* RESPONSIVE */
@media(max-width:900px){
 #asu .asu-shell{padding:32px 4%;gap:12px;grid-template-columns:.9fr 1.1fr}
 #asu .asu-head{font-size:clamp(34px,4.4vw,48px);letter-spacing:-1.7px}
 #asu .asu-universe{min-height:300px}
 #asu .asu-module{min-width:105px;padding:8px;gap:6px}
 #asu .asu-module-icon{width:25px;height:25px;font-size:17px}
 #asu .asu-module-title{font-size:9px}
 #asu .asu-module-sub{font-size:7px}
 #asu .asu-bottom{padding-left:4%;padding-right:4%}
}
@media(max-width:620px){
 #asu .asu-shell{grid-template-columns:1fr;padding:29px 20px 12px;gap:5px}
 #asu .asu-head{font-size:clamp(39px,10vw,54px);letter-spacing:-2px}
 #asu .asu-subtitle{font-size:15px;margin-top:16px}
 #asu .asu-desc{font-size:12px}
 #asu .asu-universe{min-height:315px;aspect-ratio:1.1;margin-top:10px}
 #asu .asu-planet{width:37%}
 #asu .asu-planet-symbol{font-size:32px}
 #asu .asu-planet-name{font-size:8px;letter-spacing:1px}
 #asu .asu-module{min-width:0;max-width:116px;padding:7px;gap:6px}
 #asu .asu-module-icon{width:23px;height:23px;font-size:15px}
 #asu .asu-module-title{font-size:9px}
 #asu .asu-module-sub{font-size:7px}
 #asu .asu-m1{left:0;top:9%}
 #asu .asu-m2{right:0;top:8%}
 #asu .asu-m3{left:0;bottom:9%}
 #asu .asu-m4{right:0;bottom:8%}
 #asu .asu-bottom{flex-direction:column;align-items:flex-start;padding:12px 20px 22px;gap:10px}
 #asu .asu-techs{justify-content:flex-start}
 #asu .asu-grid{background-size:30px 30px}
}
@media(prefers-reduced-motion:reduce){
 #asu *,#asu *:before,#asu *:after{animation:none!important;transition:none!important}
}

/* ===== SOFTWARE DEVELOPMENT SERVICES ===== */
#sd-services,#sd-services *{box-sizing:border-box}
#sd-services{
 --lime:#c5ff00;--bg:#030a0d;--text:#f4f8f7;
 position:relative;isolation:isolate;overflow:hidden;width:100%;
 background:var(--bg);color:var(--text);
 font-family:Inter,"Segoe UI",Arial,sans-serif;
 border-top:1px solid #8da900;
 border-bottom:1px solid #8da900;
}
#sd-services:before{
 content:"";position:absolute;z-index:-1;inset:0;
 background:
 radial-gradient(ellipse at 77% 50%,#15351e75,transparent 44%),
 radial-gradient(ellipse at 5% 100%,#073d3525,transparent 40%);
}
#sd-services .sd-edge{
 position:absolute;left:0;right:0;height:2px;
 background:linear-gradient(90deg,transparent,#c5ff00,#5be9b5,#c5ff00,transparent);
 box-shadow:0 0 12px #c5ff0055;
}
#sd-services .sd-edge-top{top:0}
#sd-services .sd-edge-bottom{bottom:0}
#sd-services .sd-inner{
 max-width:1500px;margin:auto;padding:25px 5.2%;
 display:grid;grid-template-columns:.85fr 1.15fr;
 gap:42px;align-items:center;min-height:220px;
}
#sd-services .sd-intro{max-width:420px}
#sd-services .sd-eyebrow{
 display:flex;align-items:center;gap:9px;
 color:#dce6e1;font-size:9px;font-weight:800;
 letter-spacing:1.5px;margin-bottom:12px;
}
#sd-services .sd-eyebrow:before{
 content:"";width:26px;height:4px;background:var(--lime);
 border-radius:8px;box-shadow:0 0 12px #c5ff0070;
}
#sd-services .sd-heading{
 margin:0;font-size:clamp(23px,2.2vw,32px);
 line-height:1.15;letter-spacing:-.8px;font-weight:850;
}
#sd-services .sd-description{
 margin:10px 0 0;max-width:390px;
 color:#c2ceca;font-size:12px;line-height:1.7;
}
#sd-services .sd-cta{
 margin-top:14px;display:inline-flex;align-items:center;gap:17px;
 padding:9px 14px;border:1px solid var(--lime);border-radius:30px;
 background:transparent;color:var(--lime);text-decoration:none;
 font-size:10px;font-weight:750;transition:.25s;
}
#sd-services .sd-cta span{
 width:20px;height:20px;border-radius:50%;
 background:var(--lime);color:#101800;display:grid;place-items:center;
 font-size:13px;transition:transform .25s;
}
#sd-services .sd-cta:hover{
 color:#111900;background:var(--lime);
 box-shadow:0 0 25px #c5ff0025;
}
#sd-services .sd-cta:hover span{
 background:#142000;color:var(--lime);transform:translateX(3px);
}

/* 4 columns x 2 rows */
#sd-services .sd-grid{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
#sd-services .sd-item{
 position:relative;min-height:86px;padding:13px 6px 11px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 text-align:center;gap:7px;cursor:default;
 border-right:1px solid #c5ff0024;
 border-bottom:1px solid #c5ff001c;
 transition:background .25s,transform .25s;
}
#sd-services .sd-item:nth-child(4n){border-right:0}
#sd-services .sd-item:nth-child(n+5){border-bottom:0}
#sd-services .sd-item:before{
 content:"";position:absolute;inset:7px 5px;
 border:1px solid transparent;border-radius:7px;
 transition:.25s;pointer-events:none;
}
#sd-services .sd-item:hover:before,
#sd-services .sd-item:focus-visible:before{
 border-color:#c5ff005c;background:#c5ff0008;
 box-shadow:inset 0 0 20px #c5ff0009,0 0 18px #c5ff000a;
}
#sd-services .sd-icon{
 position:relative;width:32px;height:32px;
 display:grid;place-items:center;
 color:var(--lime);
 transition:transform .3s,filter .3s;
}
#sd-services .sd-icon svg{
 width:29px;height:29px;fill:none;stroke:currentColor;
 stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
 overflow:visible;
}
#sd-services .sd-item:hover .sd-icon{
 transform:translateY(-3px) scale(1.12);
 filter:drop-shadow(0 0 7px #c5ff0080);
}
#sd-services .sd-name{
 position:relative;max-width:125px;
 font-size:11px;font-weight:650;line-height:1.35;color:#f0f5f2;
}
#sd-services .sd-index{
 position:absolute;top:8px;right:10px;
 font-size:7px;letter-spacing:.5px;color:#53685b;
 opacity:0;transition:opacity .2s;
}
#sd-services .sd-item:hover .sd-index{opacity:1}
#sd-services .sd-item:nth-child(2) .sd-icon{color:#67e8d0}
#sd-services .sd-item:nth-child(3) .sd-icon{color:#d0ff63}
#sd-services .sd-item:nth-child(4) .sd-icon{color:#a5f3fc}
#sd-services .sd-item:nth-child(5) .sd-icon{color:#b5f56a}
#sd-services .sd-item:nth-child(6) .sd-icon{color:#8be9ff}
#sd-services .sd-item:nth-child(7) .sd-icon{color:#d1ff6b}
#sd-services .sd-item:nth-child(8) .sd-icon{color:#9bffd1}

/* Entrance animation */
#sd-services .sd-intro,
#sd-services .sd-item{
 animation:sd-enter .65s both;
}
#sd-services .sd-item:nth-child(2){animation-delay:.04s}
#sd-services .sd-item:nth-child(3){animation-delay:.08s}
#sd-services .sd-item:nth-child(4){animation-delay:.12s}
#sd-services .sd-item:nth-child(5){animation-delay:.16s}
#sd-services .sd-item:nth-child(6){animation-delay:.20s}
#sd-services .sd-item:nth-child(7){animation-delay:.24s}
#sd-services .sd-item:nth-child(8){animation-delay:.28s}
@keyframes sd-enter{
 from{opacity:0;transform:translateY(12px)}
 to{opacity:1;transform:translateY(0)}
}

/* Responsive */
@media(min-width:1200px){
 #sd-services .sd-inner{padding-top:26px;padding-bottom:26px}
 #sd-services .sd-item{min-height:92px}
}
@media(max-width:900px){
 #sd-services .sd-inner{gap:22px;padding:24px 4%}
 #sd-services .sd-heading{font-size:25px}
 #sd-services .sd-item{min-height:82px}
 #sd-services .sd-name{font-size:10px}
}
@media(max-width:620px){
 #sd-services .sd-inner{
  grid-template-columns:1fr;gap:23px;padding:28px 20px;
 }
 #sd-services .sd-intro{max-width:100%}
 #sd-services .sd-heading{font-size:29px}
 #sd-services .sd-description{font-size:12px}
 #sd-services .sd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #sd-services .sd-item{min-height:105px;border-right:1px solid #c5ff0024;border-bottom:1px solid #c5ff001c}
 #sd-services .sd-item:nth-child(2n){border-right:0}
 #sd-services .sd-item:nth-child(n+7){border-bottom:0}
 #sd-services .sd-icon{width:35px;height:35px}
 #sd-services .sd-icon svg{width:31px;height:31px}
 #sd-services .sd-name{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 #sd-services *,#sd-services *:before,#sd-services *:after{
  animation:none!important;transition:none!important;
 }
}

/* ==========================================
   JASHCODE IT | DEVELOPMENT JOURNEY
   Complete standalone HTML section styling
========================================== */
#dev-journey,#dev-journey *{box-sizing:border-box}
#dev-journey{
 --dj-lime:#c6ff00;
 --dj-cyan:#45eed1;
 --dj-purple:#ad91ff;
 --dj-orange:#ffbf73;
 --dj-bg:#03090d;
 position:relative;isolation:isolate;overflow:hidden;
 width:100%;color:#f7faf8;background:var(--dj-bg);
 font-family:Inter,"Segoe UI",Arial,sans-serif;
 border-top:1px solid #607d00;
 border-bottom:1px solid #607d00;
}
#dev-journey .dj-backdrop{
 position:absolute;inset:0;z-index:-3;pointer-events:none;
 background:
 radial-gradient(ellipse at 50% 100%,#133f291c,transparent 50%),
 radial-gradient(ellipse at 80% 0%,#153e2b4a,transparent 42%),
 linear-gradient(110deg,#03090d,#06110f 58%,#03090d);
}
#dev-journey .dj-grid-bg{
 position:absolute;inset:0;z-index:-2;pointer-events:none;
 background-image:
 linear-gradient(#a4ff0010 1px,transparent 1px),
 linear-gradient(90deg,#a4ff0010 1px,transparent 1px);
 background-size:32px 32px;
 opacity:.2;
 mask-image:linear-gradient(90deg,transparent,#000 45%,#000);
}
#dev-journey .dj-top-line,
#dev-journey .dj-bottom-line{
 position:absolute;left:-5%;width:110%;height:2px;
 background:linear-gradient(90deg,transparent,#9aff00,var(--dj-cyan),#c6ff00,transparent);
 box-shadow:0 0 14px #b9ff0066;
}
#dev-journey .dj-top-line{top:0;transform:rotate(.8deg)}
#dev-journey .dj-bottom-line{bottom:0;transform:rotate(-.8deg)}
#dev-journey .dj-inner{
 max-width:1500px;margin:auto;padding:27px 5.2%;
 display:grid;grid-template-columns:.8fr 2fr;gap:32px;align-items:center;
}
/* INTRO */
#dev-journey .dj-intro{max-width:355px}
#dev-journey .dj-eyebrow{
 display:flex;align-items:center;gap:9px;
 margin-bottom:11px;color:#e1eae6;
 font-size:9px;font-weight:800;letter-spacing:1.5px;
}
#dev-journey .dj-eyebrow:before{
 content:"";width:26px;height:4px;border-radius:6px;
 background:var(--dj-lime);box-shadow:0 0 12px #c6ff0080;
}
#dev-journey .dj-heading{
 margin:0;font-size:clamp(26px,2.7vw,38px);
 font-weight:850;line-height:1.08;letter-spacing:-1.4px;
}
#dev-journey .dj-heading em{
 color:var(--dj-lime);font-style:normal;
}
#dev-journey .dj-desc{
 margin:12px 0 0;max-width:310px;
 color:#b4c2bd;font-size:12px;line-height:1.75;
}
#dev-journey .dj-cta{
 margin-top:17px;display:inline-flex;align-items:center;gap:16px;
 border:1px solid var(--dj-lime);border-radius:30px;
 padding:9px 13px;background:#c6ff0008;color:var(--dj-lime);
 text-decoration:none;font-size:10px;font-weight:800;
 transition:background .25s,color .25s,box-shadow .25s;
}
#dev-journey .dj-cta .dj-arrow{
 width:21px;height:21px;border-radius:50%;
 display:grid;place-items:center;background:var(--dj-lime);
 color:#111900;font-size:14px;transition:transform .25s;
}
#dev-journey .dj-cta:hover{
 background:var(--dj-lime);color:#111900;
 box-shadow:0 0 25px #c6ff0025;
}
#dev-journey .dj-cta:hover .dj-arrow{
 transform:translateX(3px);background:#172000;color:var(--dj-lime);
}

/* TIMELINE */
#dev-journey .dj-timeline{
 position:relative;display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));
 gap:7px;align-items:stretch;
}
#dev-journey .dj-progress-track{
 position:absolute;top:28px;left:7%;right:7%;height:2px;
 background:#c6ff0021;z-index:0;
}
#dev-journey .dj-progress-fill{
 width:0%;height:100%;
 background:linear-gradient(90deg,var(--dj-lime),var(--dj-cyan));
 box-shadow:0 0 12px #c6ff00a0;
 transition:width .8s ease;
}
#dev-journey .dj-step{
 --dj-accent:var(--dj-lime);
 position:relative;min-width:0;z-index:1;
 padding:12px 10px 13px;
 border:1px solid #c6ff002b;border-radius:13px;
 background:linear-gradient(145deg,#0b1919ed,#050d10f2);
 overflow:hidden;cursor:pointer;text-align:left;
 color:inherit;font:inherit;
 transition:transform .3s,border-color .3s,background .3s,box-shadow .3s;
}
#dev-journey .dj-step:nth-of-type(2){--dj-accent:var(--dj-cyan)}
#dev-journey .dj-step:nth-of-type(3){--dj-accent:var(--dj-purple)}
#dev-journey .dj-step:nth-of-type(4){--dj-accent:#c6ff00}
#dev-journey .dj-step:nth-of-type(5){--dj-accent:var(--dj-orange)}
#dev-journey .dj-step:nth-of-type(6){--dj-accent:#70e7ff}
#dev-journey .dj-step:before{
 content:"";position:absolute;left:0;right:0;top:0;height:2px;
 background:linear-gradient(90deg,transparent,var(--dj-accent),transparent);
 opacity:.5;transition:opacity .3s;
}
#dev-journey .dj-step:after{
 content:"";position:absolute;width:100px;height:100px;
 top:-65px;right:-65px;border-radius:50%;
 background:var(--dj-accent);filter:blur(48px);
 opacity:.06;transition:opacity .3s;
}
#dev-journey .dj-step:hover,
#dev-journey .dj-step.dj-active{
 transform:translateY(-5px);
 border-color:var(--dj-accent);
 background:linear-gradient(145deg,#12231d,#071113);
 box-shadow:0 9px 28px #0005,0 0 18px #c6ff000b;
}
#dev-journey .dj-step:hover:before,
#dev-journey .dj-step.dj-active:before{opacity:1}
#dev-journey .dj-step:hover:after,
#dev-journey .dj-step.dj-active:after{opacity:.16}
#dev-journey .dj-step-head{
 display:flex;align-items:center;justify-content:space-between;
 gap:4px;position:relative;z-index:1;
}
#dev-journey .dj-iconbox{
 width:43px;height:43px;flex-shrink:0;border-radius:50%;
 display:grid;place-items:center;
 color:var(--dj-accent);border:1px solid var(--dj-accent);
 background:color-mix(in srgb,var(--dj-accent) 8%,transparent);
 box-shadow:inset 0 0 15px color-mix(in srgb,var(--dj-accent) 9%,transparent);
 transition:transform .35s,box-shadow .35s;
}
#dev-journey .dj-iconbox svg{
 width:24px;height:24px;fill:none;stroke:currentColor;
 stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
#dev-journey .dj-step:hover .dj-iconbox,
#dev-journey .dj-step.dj-active .dj-iconbox{
 transform:rotate(-8deg) scale(1.06);
 box-shadow:0 0 18px color-mix(in srgb,var(--dj-accent) 22%,transparent);
}
#dev-journey .dj-number{
 width:21px;height:21px;display:grid;place-items:center;
 border-radius:50%;background:#c6ff0014;color:var(--dj-accent);
 font-size:9px;font-weight:850;
}
#dev-journey .dj-title{
 position:relative;z-index:1;margin:10px 0 6px;
 color:#f6faf8;font-size:clamp(10px,.92vw,12px);
 font-weight:800;line-height:1.35;
}
#dev-journey .dj-text{
 position:relative;z-index:1;margin:0;
 color:#aabbb5;font-size:10px;line-height:1.6;
}
#dev-journey .dj-step-footer{
 position:relative;z-index:1;display:flex;align-items:center;
 justify-content:space-between;margin-top:12px;
}
#dev-journey .dj-status{
 font-size:7px;font-weight:800;letter-spacing:1px;
 color:var(--dj-accent);text-transform:uppercase;
}
#dev-journey .dj-open{
 width:19px;height:19px;border-radius:50%;
 border:1px solid #c6ff0047;color:var(--dj-accent);
 display:grid;place-items:center;font-size:12px;
 transition:background .25s,transform .25s;
}
#dev-journey .dj-step:hover .dj-open,
#dev-journey .dj-step.dj-active .dj-open{
 background:var(--dj-accent);color:#07100a;transform:rotate(45deg);
}

/* Interactive detail strip */
#dev-journey .dj-detail{
 display:grid;grid-template-columns:auto 1fr auto;
 align-items:center;gap:13px;margin-top:13px;padding:10px 13px;
 border:1px solid #c6ff0020;border-radius:8px;
 background:linear-gradient(90deg,#c6ff0009,transparent);
}
#dev-journey .dj-detail-mark{
 color:var(--dj-lime);font-size:18px;font-weight:900;
}
#dev-journey .dj-detail-title{
 margin:0 0 3px;font-size:10px;font-weight:800;color:#f4faf5;
}
#dev-journey .dj-detail-copy{
 margin:0;font-size:9px;line-height:1.5;color:#a8bdb4;
}
#dev-journey .dj-detail-count{
 color:#8ba09a;font:9px Consolas,monospace;white-space:nowrap;
}
#dev-journey .dj-bottom-note{
 display:flex;align-items:center;gap:8px;margin-top:12px;
 font-size:8px;color:#80968e;letter-spacing:.5px;
}
#dev-journey .dj-live-dot{
 width:6px;height:6px;border-radius:50%;background:var(--dj-lime);
 box-shadow:0 0 10px #c6ff00;animation:dj-pulse 1.8s infinite;
}
@keyframes dj-pulse{
 0%,100%{opacity:1;box-shadow:0 0 10px #c6ff00}
 50%{opacity:.45;box-shadow:0 0 3px #c6ff00}
}

/* Responsive */
@media(min-width:1200px){
 #dev-journey .dj-inner{padding-top:32px;padding-bottom:32px}
 #dev-journey .dj-step{padding:14px 12px 13px}
}
@media(max-width:1000px){
 #dev-journey .dj-inner{
  grid-template-columns:1fr;gap:23px;padding:28px 4%;
 }
 #dev-journey .dj-intro{max-width:650px}
 #dev-journey .dj-desc{max-width:520px}
 #dev-journey .dj-heading{font-size:32px}
 #dev-journey .dj-title{font-size:11px}
 #dev-journey .dj-text{font-size:10px}
}
@media(max-width:620px){
 #dev-journey .dj-inner{padding:27px 18px;gap:23px}
 #dev-journey .dj-heading{font-size:30px}
 #dev-journey .dj-timeline{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #dev-journey .dj-progress-track{display:none}
 #dev-journey .dj-step{padding:13px;min-height:165px}
 #dev-journey .dj-step:last-child{grid-column:1/-1;min-height:140px}
 #dev-journey .dj-iconbox{width:42px;height:42px}
 #dev-journey .dj-title{font-size:12px;margin-top:12px}
 #dev-journey .dj-text{font-size:11px}
 #dev-journey .dj-detail{grid-template-columns:auto 1fr;gap:10px}
 #dev-journey .dj-detail-count{display:none}
}
@media(prefers-reduced-motion:reduce){
 #dev-journey *,#dev-journey *:before,#dev-journey *:after{
  animation:none!important;transition:none!important;
 }
}

/* =========================================
   JASHCODE IT | TECHNOLOGY STACK
   Responsive + Animated + No External Images
========================================= */
#tech-stack,#tech-stack *{box-sizing:border-box}
#tech-stack{
 --lime:#c5ff00;--cyan:#45efd5;
 position:relative;isolation:isolate;overflow:hidden;width:100%;
 color:#f5faf7;background:#03090d;
 font-family:Inter,"Segoe UI",Arial,sans-serif;
 border-top:1px solid #819b00;border-bottom:1px solid #718c00;
}
#tech-stack:before{
 content:"";position:absolute;inset:0;z-index:-3;
 background:
 radial-gradient(ellipse at 90% 20%,#3a661b2e,transparent 36%),
 radial-gradient(ellipse at 8% 100%,#15592e36,transparent 37%),
 linear-gradient(110deg,#03090d,#06100f 60%,#03090d);
}
#tech-stack .ts-grid-bg{
 position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.17;
 background-image:linear-gradient(#c5ff0010 1px,transparent 1px),
 linear-gradient(90deg,#c5ff0010 1px,transparent 1px);
 background-size:30px 30px;
 mask-image:linear-gradient(90deg,transparent,#000);
}
#tech-stack .ts-glow{
 position:absolute;z-index:-1;width:300px;height:200px;
 border-radius:50%;filter:blur(80px);opacity:.09;
 background:#c5ff00;left:-100px;bottom:-120px;
 animation:ts-glowmove 8s ease-in-out infinite alternate;
}
@keyframes ts-glowmove{
 from{transform:translate(0,0)}
 to{transform:translate(140px,-40px)}
}
#tech-stack .ts-inner{
 max-width:1500px;margin:auto;padding:25px 5.2%;
 display:grid;grid-template-columns:.83fr 1.17fr;
 gap:36px;align-items:center;
}
/* LEFT INTRO */
#tech-stack .ts-intro{max-width:440px}
#tech-stack .ts-label{
 display:flex;align-items:center;gap:9px;margin-bottom:11px;
 font-size:9px;font-weight:800;letter-spacing:1.4px;
 color:#dce7e1;
}
#tech-stack .ts-label:before{
 content:"";height:4px;width:26px;border-radius:8px;
 background:var(--lime);box-shadow:0 0 13px #c5ff0080;
}
#tech-stack .ts-heading{
 margin:0;font-size:clamp(24px,2.4vw,34px);
 line-height:1.15;letter-spacing:-1px;font-weight:850;
}
#tech-stack .ts-heading span{color:var(--lime)}
#tech-stack .ts-desc{
 margin:11px 0 0;color:#b6c6bf;font-size:12px;line-height:1.8;
 max-width:380px;
}
#tech-stack .ts-btn{
 display:inline-flex;align-items:center;gap:13px;margin-top:16px;
 padding:9px 13px;border:1px solid var(--lime);
 border-radius:30px;background:var(--lime);color:#101700;
 text-decoration:none;font-size:10px;font-weight:850;
 transition:transform .25s,box-shadow .25s;
}
#tech-stack .ts-btn:hover{
 transform:translateY(-3px);box-shadow:0 7px 25px #c5ff0038;
}
#tech-stack .ts-btn i{
 width:20px;height:20px;display:grid;place-items:center;
 border-radius:50%;background:#142000;color:var(--lime);
 font-size:14px;font-style:normal;transition:transform .25s;
}
#tech-stack .ts-btn:hover i{transform:translateX(3px)}

/* TECHNOLOGY GRID */
#tech-stack .ts-cards{
 display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;
}
#tech-stack .ts-card{
 --accent:#c5ff00;
 position:relative;min-width:0;min-height:83px;
 border:1px solid #36504d80;border-radius:10px;
 display:flex;flex-direction:column;align-items:center;
 justify-content:center;gap:5px;padding:9px 4px;
 background:linear-gradient(145deg,#0b171bdf,#061013ed);
 overflow:hidden;isolation:isolate;
 cursor:default;
 transform-style:preserve-3d;
 transition:transform .3s,border-color .3s,box-shadow .3s,background .3s;
 animation:ts-arrive .65s both;
}
#tech-stack .ts-card:before{
 content:"";position:absolute;z-index:-1;inset:-1px;
 background:linear-gradient(130deg,transparent 25%,var(--accent) 50%,transparent 75%);
 opacity:0;transform:translateX(-110%);
 transition:transform .55s,opacity .3s;
}
#tech-stack .ts-card:after{
 content:"";position:absolute;z-index:-1;width:70px;height:70px;
 top:-42px;right:-40px;border-radius:50%;
 background:var(--accent);filter:blur(35px);opacity:0;
 transition:opacity .3s;
}
#tech-stack .ts-card:hover{
 transform:translateY(-5px) perspective(500px) rotateX(3deg);
 border-color:var(--accent);
 box-shadow:0 10px 24px #0007,0 0 18px color-mix(in srgb,var(--accent) 16%,transparent);
 background:linear-gradient(145deg,#10201f,#071013);
}
#tech-stack .ts-card:hover:before{
 opacity:.14;transform:translateX(110%);
}
#tech-stack .ts-card:hover:after{opacity:.2}
#tech-stack .ts-card:nth-child(1){--accent:#a78bfa}
#tech-stack .ts-card:nth-child(2){--accent:#f7b97b}
#tech-stack .ts-card:nth-child(3){--accent:#ffd84d}
#tech-stack .ts-card:nth-child(4){--accent:#80df8a}
#tech-stack .ts-card:nth-child(5){--accent:#55e7f4}
#tech-stack .ts-card:nth-child(6){--accent:#ff637b}
#tech-stack .ts-card:nth-child(7){--accent:#62d8b0}
#tech-stack .ts-card:nth-child(8){--accent:#c7a5ff}
#tech-stack .ts-card:nth-child(9){--accent:#5bd4ee}
#tech-stack .ts-card:nth-child(10){--accent:#88e5a4}
#tech-stack .ts-card:nth-child(11){--accent:#8bbaff}
#tech-stack .ts-card:nth-child(12){--accent:#ffb65e}

#tech-stack .ts-logo{
 height:38px;width:44px;display:flex;align-items:center;
 justify-content:center;position:relative;z-index:1;
 transition:transform .35s,filter .35s;
}
#tech-stack .ts-logo svg{
 width:100%;height:100%;overflow:visible;
}
#tech-stack .ts-card:hover .ts-logo{
 transform:translateY(-2px) scale(1.09);
 filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 45%,transparent));
}
#tech-stack .ts-name{
 position:relative;z-index:1;text-align:center;
 color:#edf4f0;font-size:10px;font-weight:750;line-height:1.2;
}
#tech-stack .ts-tag{
 position:relative;z-index:1;color:#7f9990;
 font-size:7px;letter-spacing:.65px;text-transform:uppercase;
}
#tech-stack .ts-card:nth-child(1) .ts-logo{animation:ts-float 4s ease-in-out infinite}
#tech-stack .ts-card:nth-child(5) .ts-logo{animation:ts-float 4.5s ease-in-out infinite}
#tech-stack .ts-card:nth-child(8) .ts-logo{animation:ts-float 5s ease-in-out infinite}
@keyframes ts-float{
 0%,100%{translate:0 0}
 50%{translate:0 -3px}
}
@keyframes ts-arrive{
 from{opacity:0;transform:translateY(12px)}
 to{opacity:1;transform:translateY(0)}
}
#tech-stack .ts-card:nth-child(2){animation-delay:.04s}
#tech-stack .ts-card:nth-child(3){animation-delay:.08s}
#tech-stack .ts-card:nth-child(4){animation-delay:.12s}
#tech-stack .ts-card:nth-child(5){animation-delay:.16s}
#tech-stack .ts-card:nth-child(6){animation-delay:.20s}
#tech-stack .ts-card:nth-child(7){animation-delay:.24s}
#tech-stack .ts-card:nth-child(8){animation-delay:.28s}
#tech-stack .ts-card:nth-child(9){animation-delay:.32s}
#tech-stack .ts-card:nth-child(10){animation-delay:.36s}
#tech-stack .ts-card:nth-child(11){animation-delay:.40s}
#tech-stack .ts-card:nth-child(12){animation-delay:.44s}

/* RESPONSIVE */
@media(max-width:1050px){
 #tech-stack .ts-inner{grid-template-columns:.8fr 1.2fr;gap:22px;padding:24px 4%}
 #tech-stack .ts-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
 #tech-stack .ts-heading{font-size:27px}
}
@media(max-width:650px){
 #tech-stack .ts-inner{grid-template-columns:1fr;gap:22px;padding:26px 18px}
 #tech-stack .ts-heading{font-size:29px}
 #tech-stack .ts-desc{font-size:12px}
 #tech-stack .ts-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #tech-stack .ts-card{min-height:88px;padding:8px 3px}
 #tech-stack .ts-logo{height:35px;width:40px}
 #tech-stack .ts-name{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 #tech-stack *,#tech-stack *:before,#tech-stack *:after{
  animation:none!important;transition:none!important;
 }
}
/* ====================================
   JASHCODE IT - BENEFITS SECTION
==================================== */
#jash-benefits,
#jash-benefits * {
  box-sizing: border-box;
}

#jash-benefits {
  --ab-lime: #c6ff00;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  color: #f7faf8;
  background: #030b0d;
  border-top: 2px solid var(--ab-lime);
  border-bottom: 1px solid #344d20;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

#jash-benefits::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 42% 0%, #234a3529, transparent 45%),
    radial-gradient(ellipse at 100% 100%, #1b471b2c, transparent 35%),
    linear-gradient(100deg, #02090c, #061310 55%, #02090c);
}

#jash-benefits .ab-grid-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  pointer-events: none;
  background-image:
    linear-gradient(#c6ff0010 1px, transparent 1px),
    linear-gradient(90deg, #c6ff0010 1px, transparent 1px);
  background-size: 34px 34px;
}

#jash-benefits .ab-inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 27px 5.2%;
  display: grid;
  grid-template-columns: 1.05fr 1.95fr;
  gap: 38px;
  align-items: center;
}

/* LEFT CONTENT */
#jash-benefits .ab-intro {
  max-width: 440px;
}

#jash-benefits .ab-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #dce8e0;
}

#jash-benefits .ab-eyebrow::before {
  content: "";
  width: 26px;
  height: 5px;
  border-radius: 8px;
  background: var(--ab-lime);
  box-shadow: 0 0 12px #c6ff0070;
}

#jash-benefits .ab-heading {
  margin: 0;
  font-size: clamp(24px, 2.1vw, 31px);
  line-height: 1.18;
  letter-spacing: -.8px;
  font-weight: 850;
}

#jash-benefits .ab-heading span {
  color: var(--ab-lime);
}

#jash-benefits .ab-description {
  margin: 12px 0 0;
  max-width: 390px;
  color: #c2cec8;
  font-size: 12px;
  line-height: 1.8;
}

/* BENEFIT CARDS */
#jash-benefits .ab-benefits {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

#jash-benefits .ab-card {
  --ab-accent: #c6ff00;
  position: relative;
  min-width: 0;
  min-height: 77px;
  padding: 9px 5px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #334c29a6;
  border-radius: 11px;
  background: linear-gradient(145deg, #061411e8, #061015ed);
  text-align: center;
  overflow: hidden;
  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
  animation: ab-appear .65s both;
}

#jash-benefits .ab-card:nth-child(2) {
  --ab-accent: #83f6c2;
}
#jash-benefits .ab-card:nth-child(3) {
  --ab-accent: #ffd166;
}
#jash-benefits .ab-card:nth-child(4) {
  --ab-accent: #7be7ff;
}
#jash-benefits .ab-card:nth-child(5) {
  --ab-accent: #bba0ff;
}

#jash-benefits .ab-card:nth-child(2) {
  animation-delay: .08s;
}
#jash-benefits .ab-card:nth-child(3) {
  animation-delay: .16s;
}
#jash-benefits .ab-card:nth-child(4) {
  animation-delay: .24s;
}
#jash-benefits .ab-card:nth-child(5) {
  animation-delay: .32s;
}

#jash-benefits .ab-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    130deg,
    transparent 15%,
    color-mix(in srgb, var(--ab-accent) 12%, transparent),
    transparent 85%
  );
  opacity: 0;
  transition: opacity .3s;
}

#jash-benefits .ab-card:hover {
  transform: translateY(-5px);
  border-color: var(--ab-accent);
  background: #0a1b17;
  box-shadow:
    0 8px 22px #0005,
    0 0 18px color-mix(in srgb, var(--ab-accent) 13%, transparent);
}

#jash-benefits .ab-card:hover::before {
  opacity: 1;
}

/* INLINE SVG ICONS */
#jash-benefits .ab-icon {
  position: relative;
  z-index: 1;
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ab-accent) 65%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ab-accent) 7%, transparent);
  color: var(--ab-accent);
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

#jash-benefits .ab-icon svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#jash-benefits .ab-card:hover .ab-icon {
  transform: rotate(-9deg) scale(1.1);
  box-shadow: 0 0 17px color-mix(in srgb, var(--ab-accent) 25%, transparent);
}

#jash-benefits .ab-title {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 110px;
  color: #f3f8f5;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.4;
}

@keyframes ab-appear {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* BOTTOM ACCENT */
#jash-benefits .ab-bottom-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg, transparent, #c6ff00, #55eed2, transparent
  );
  opacity: .75;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  #jash-benefits .ab-inner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px 4%;
  }

  #jash-benefits .ab-intro {
    max-width: 650px;
  }

  #jash-benefits .ab-heading {
    font-size: 29px;
  }

  #jash-benefits .ab-description {
    max-width: 540px;
  }
}

@media (max-width: 540px) {
  #jash-benefits .ab-inner {
    padding: 25px 16px;
    gap: 20px;
  }

  #jash-benefits .ab-heading {
    font-size: 27px;
  }

  #jash-benefits .ab-description {
    font-size: 12px;
  }

  #jash-benefits .ab-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #jash-benefits .ab-card {
    min-height: 98px;
    padding: 12px 7px;
  }

  #jash-benefits .ab-card:last-child {
    grid-column: 1 / -1;
  }

  #jash-benefits .ab-title {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #jash-benefits *,
  #jash-benefits *::before,
  #jash-benefits *::after {
    animation: none !important;
    transition: none !important;
  }
}

#alp-seo-signal {
      --lime: #c6ff00;
      --bg: #050b09;
      --white: #f5f7f2;
      --muted: #9ba79f;
      background: var(--bg);
      color: var(--white);
      font-family: inherit;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    #alp-seo-signal * { box-sizing: border-box; }

    #alp-seo-signal .ss-inner {
      width: 100%;
      max-width: 1440px;
      min-height: 420px;
      margin: auto;
      padding: 36px 5.2%;
      display: grid;
      grid-template-columns: 1fr 0.95fr;
      gap: 38px;
      align-items: center;
      position: relative;
    }

    #alp-seo-signal .ss-grid-bg {
      position: absolute;
      inset: 0;
      z-index: -2;
      opacity: .16;
      background-image:
        linear-gradient(#8ba18e24 1px, transparent 1px),
        linear-gradient(90deg, #8ba18e24 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
    }

    #alp-seo-signal .ss-glow {
      position: absolute;
      z-index: -1;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      right: 4%;
      top: 50%;
      transform: translateY(-50%);
      background: #baff0010;
      filter: blur(65px);
      pointer-events: none;
    }

    #alp-seo-signal .ss-copy {
      position: relative;
      z-index: 2;
    }

    #alp-seo-signal .ss-kicker {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--lime);
      font-size: 10px;
      letter-spacing: 2.8px;
      text-transform: uppercase;
      font-weight: 800;
      margin-bottom: 19px;
    }

    #alp-seo-signal .ss-kicker::before {
      content: "";
      width: 25px;
      height: 2px;
      background: var(--lime);
    }

    #alp-seo-signal .ss-title {
      font-size: clamp(39px, 4.5vw, 66px);
      line-height: .99;
      letter-spacing: -2.7px;
      font-weight: 850;
      text-transform: uppercase;
      margin: 0 0 19px;
      color: var(--white);
    }

    #alp-seo-signal .ss-title span {
      color: var(--lime);
      display: inline-block;
    }

    #alp-seo-signal .ss-description {
      max-width: 470px;
      margin: 0 0 22px;
      font-size: 13px;
      line-height: 1.8;
      color: var(--muted);
    }

    #alp-seo-signal .ss-actions {
      display: flex;
      align-items: center;
      gap: 22px;
      flex-wrap: wrap;
    }

    #alp-seo-signal .ss-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      min-height: 43px;
      padding: 0 17px;
      color: #080d05;
      background: var(--lime);
      font-size: 11px;
      font-weight: 850;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: .7px;
      transition: .25s ease;
    }

    #alp-seo-signal .ss-cta:hover {
      color: #080d05;
      transform: translateY(-3px);
      box-shadow: 0 8px 25px #c6ff0035;
    }

    #alp-seo-signal .ss-cta span {
      font-size: 17px;
    }

    #alp-seo-signal .ss-text-link {
      color: var(--white);
      font-size: 11px;
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid #6a766d;
      padding-bottom: 5px;
    }

    /* Visual scene */
    #alp-seo-signal .ss-scene {
      min-width: 0;
      height: 345px;
      position: relative;
      display: grid;
      place-items: center;
    }

    #alp-seo-signal .ss-radar {
      position: absolute;
      width: 290px;
      height: 290px;
      border: 1px solid #c6ff0025;
      border-radius: 50%;
    }

    #alp-seo-signal .ss-radar::before,
    #alp-seo-signal .ss-radar::after {
      content: "";
      position: absolute;
      border: 1px solid #c6ff001b;
      border-radius: 50%;
      inset: 30px;
    }

    #alp-seo-signal .ss-radar::after {
      inset: 68px;
    }

    #alp-seo-signal .ss-radar-line {
      position: absolute;
      width: 50%;
      height: 50%;
      left: 50%;
      top: 0;
      transform-origin: bottom left;
      background: linear-gradient(45deg, #c6ff0000, #c6ff0038);
      clip-path: polygon(0 100%, 0 0, 100% 0);
      animation: ssSweep 5s linear infinite;
    }

    #alp-seo-signal .ss-cross {
      position: absolute;
      background: #c6ff0030;
    }

    #alp-seo-signal .ss-cross-x {
      width: 100%;
      height: 1px;
      top: 50%;
    }

    #alp-seo-signal .ss-cross-y {
      height: 100%;
      width: 1px;
      left: 50%;
    }

    #alp-seo-signal .ss-node {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 15px #c6ff00a0;
      animation: ssPulse 2s ease-in-out infinite;
    }

    #alp-seo-signal .ss-node.n1 { top: 18%; left: 27%; }
    #alp-seo-signal .ss-node.n2 { top: 32%; right: 15%; animation-delay: .6s; }
    #alp-seo-signal .ss-node.n3 { bottom: 21%; left: 24%; animation-delay: 1s; }
    #alp-seo-signal .ss-node.n4 { bottom: 28%; right: 25%; animation-delay: 1.4s; }

    #alp-seo-signal .ss-core {
      width: 90px;
      height: 90px;
      border: 1px solid #c6ff0070;
      background: #111b0a;
      display: grid;
      place-items: center;
      position: relative;
      z-index: 2;
      transform: rotate(45deg);
      box-shadow: 0 0 45px #c6ff0010, inset 0 0 22px #c6ff000b;
    }

    #alp-seo-signal .ss-core-inner {
      transform: rotate(-45deg);
      text-align: center;
    }

    #alp-seo-signal .ss-core-icon {
      font-size: 27px;
      line-height: 1.2;
      color: var(--lime);
    }

    #alp-seo-signal .ss-core-label {
      font-size: 8px;
      letter-spacing: 1.5px;
      font-weight: 800;
      margin-top: 5px;
    }

    #alp-seo-signal .ss-tag {
      position: absolute;
      z-index: 3;
      background: #101712;
      border: 1px solid #334036;
      padding: 10px 12px;
      min-width: 125px;
      box-shadow: 0 12px 30px #0005;
    }

    #alp-seo-signal .ss-tag-top {
      top: 19px;
      right: 0;
    }

    #alp-seo-signal .ss-tag-bottom {
      left: 0;
      bottom: 22px;
    }

    #alp-seo-signal .ss-tag-label {
      color: #87958a;
      font-size: 8px;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      margin-bottom: 7px;
    }

    #alp-seo-signal .ss-tag-value {
      font-size: 17px;
      font-weight: 850;
      color: var(--white);
    }

    #alp-seo-signal .ss-tag-value em {
      font-size: 10px;
      font-style: normal;
      color: var(--lime);
      margin-left: 5px;
    }

    #alp-seo-signal .ss-rank {
      position: absolute;
      left: 5%;
      top: 34%;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #a5b0a7;
      font-size: 9px;
      letter-spacing: 1px;
    }

    #alp-seo-signal .ss-rank strong {
      color: var(--lime);
      font-size: 18px;
    }

    #alp-seo-signal .ss-chart {
      position: absolute;
      right: 4%;
      bottom: 16%;
      width: 105px;
      height: 48px;
      opacity: .8;
    }

    #alp-seo-signal .ss-chart path {
      fill: none;
      stroke: var(--lime);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      animation: ssDraw 2.4s .3s ease forwards;
    }

    #alp-seo-signal .ss-bottom-line {
      position: absolute;
      left: 5.2%;
      right: 5.2%;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, #c6ff0060, #c6ff0000);
    }

    @keyframes ssSweep {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes ssPulse {
      0%,100% { opacity: .45; transform: scale(.8); }
      50% { opacity: 1; transform: scale(1.35); }
    }

    @keyframes ssDraw {
      to { stroke-dashoffset: 0; }
    }

    @media (min-width: 1200px) {
      #alp-seo-signal .ss-inner { min-height: 420px; }
    }

    @media (max-width: 900px) {
      #alp-seo-signal .ss-inner {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 35px 4%;
      }

      #alp-seo-signal .ss-title {
        font-size: clamp(38px, 5vw, 53px);
        letter-spacing: -1.8px;
      }

      #alp-seo-signal .ss-scene { transform: scale(.92); }
      #alp-seo-signal .ss-radar { width: 250px; height: 250px; }
      #alp-seo-signal .ss-tag-top { right: -4px; }
      #alp-seo-signal .ss-tag-bottom { left: -4px; }
    }

    @media (max-width: 650px) {
      #alp-seo-signal .ss-inner {
        grid-template-columns: 1fr;
        padding: 45px 22px 28px;
        gap: 5px;
      }

      #alp-seo-signal .ss-title {
        font-size: clamp(42px, 12vw, 58px);
        letter-spacing: -2px;
      }

      #alp-seo-signal .ss-description { font-size: 13px; }
      #alp-seo-signal .ss-scene {
        height: 310px;
        transform: none;
        margin-top: 0;
      }

      #alp-seo-signal .ss-radar { width: 235px; height: 235px; }
      #alp-seo-signal .ss-tag-top { top: 5px; right: 0; }
      #alp-seo-signal .ss-tag-bottom { bottom: 3px; left: 0; }
      #alp-seo-signal .ss-rank { left: 0; top: 31%; }
      #alp-seo-signal .ss-chart { right: 0; bottom: 22%; width: 75px; }
      #alp-seo-signal .ss-bottom-line { left: 22px; right: 22px; }
    }

    @media (prefers-reduced-motion: reduce) {
      #alp-seo-signal *,
      #alp-seo-signal *::before,
      #alp-seo-signal *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }
    }

     #alp-seo-modern {
      --lime: #baff00;
      --bg: #020b0b;
      --white: #f4f7f6;
      --muted: #c0c8c7;
      background: var(--bg);
      color: var(--white);
      font-family: inherit;
      position: relative;
      overflow: hidden;
      border-top: 2px solid var(--lime);
      isolation: isolate;
    }

    #alp-seo-modern * { box-sizing: border-box; }

    #alp-seo-modern .seo-shell {
      max-width: 1440px;
      margin: auto;
      padding: 22px 5.8%;
      min-height: 260px;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      align-items: center;
      gap: 32px;
      position: relative;
    }

    #alp-seo-modern .seo-shell::before {
      content: "";
      position: absolute;
      width: 350px;
      height: 250px;
      top: -100px;
      left: 34%;
      background: #baff0009;
      filter: blur(50px);
      pointer-events: none;
    }

    /* LEFT: animated SEO visual */
    #alp-seo-modern .seo-visual {
      min-width: 0;
      height: 222px;
      position: relative;
      overflow: hidden;
      border: 1px solid #34453a;
      border-radius: 8px;
      background:
        radial-gradient(ellipse at 50% 48%, #20330b 0%, #0b1914 40%, #040c0c 78%);
      isolation: isolate;
    }

    #alp-seo-modern .seo-visual::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .26;
      background-image:
        linear-gradient(#baff0015 1px, transparent 1px),
        linear-gradient(90deg, #baff0015 1px, transparent 1px);
      background-size: 24px 24px;
      mask-image: radial-gradient(ellipse at center, #000, transparent 85%);
    }

    #alp-seo-modern .seo-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #020b0b20, transparent 50%, #020b0b35);
      pointer-events: none;
    }

    #alp-seo-modern .seo-visual-label {
      position: absolute;
      z-index: 4;
      top: 12px;
      left: 14px;
      display: flex;
      align-items: center;
      gap: 7px;
      color: #aab8ad;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 1.5px;
    }

    #alp-seo-modern .seo-visual-label i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 9px var(--lime);
      animation: seoBlink 1.6s infinite;
    }

    #alp-seo-modern .seo-orbit {
      position: absolute;
      width: 140px;
      height: 140px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #baff0047;
      border-radius: 50%;
      box-shadow: 0 0 24px #baff000b;
    }

    #alp-seo-modern .seo-orbit::before,
    #alp-seo-modern .seo-orbit::after {
      content: "";
      position: absolute;
      inset: 13px;
      border: 1px dashed #baff0038;
      border-radius: 50%;
    }

    #alp-seo-modern .seo-orbit::after {
      inset: -10px;
      border-style: solid;
      border-color: #baff0015;
    }

    #alp-seo-modern .seo-sweep {
      position: absolute;
      width: 50%;
      height: 50%;
      left: 50%;
      top: 0;
      transform-origin: bottom left;
      background: linear-gradient(45deg, transparent, #baff004b);
      clip-path: polygon(0 100%, 0 0, 100% 0);
      animation: seoSweep 5s linear infinite;
    }

    #alp-seo-modern .seo-cross {
      position: absolute;
      background: #baff0035;
    }

    #alp-seo-modern .seo-cross.x {
      width: 100%;
      height: 1px;
      left: 0;
      top: 50%;
    }

    #alp-seo-modern .seo-cross.y {
      width: 1px;
      height: 100%;
      top: 0;
      left: 50%;
    }

    #alp-seo-modern .seo-core {
      position: absolute;
      z-index: 3;
      width: 76px;
      height: 76px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid var(--lime);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle, #1a2d0b, #07100b);
      box-shadow: 0 0 15px #baff002c, inset 0 0 16px #baff0010;
    }

    #alp-seo-modern .seo-core strong {
      font-size: 25px;
      letter-spacing: -1px;
      color: var(--white);
      line-height: 1;
    }

    #alp-seo-modern .seo-core small {
      font-size: 7px;
      color: var(--lime);
      letter-spacing: 1.7px;
      margin-top: 5px;
    }

    #alp-seo-modern .seo-node {
      position: absolute;
      z-index: 3;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 12px #baff00a0;
      animation: seoPulse 2s infinite;
    }

    #alp-seo-modern .seo-node.n1 { top: 23%; left: 25%; }
    #alp-seo-modern .seo-node.n2 { top: 29%; right: 23%; animation-delay: .5s; }
    #alp-seo-modern .seo-node.n3 { bottom: 22%; left: 30%; animation-delay: 1s; }
    #alp-seo-modern .seo-node.n4 { bottom: 24%; right: 28%; animation-delay: 1.4s; }

    #alp-seo-modern .seo-link {
      position: absolute;
      z-index: 1;
      height: 1px;
      transform-origin: left center;
      background: linear-gradient(90deg, #baff0090, #baff0010);
    }

    #alp-seo-modern .seo-link.l1 {
      left: 28%;
      top: 28%;
      width: 65px;
      transform: rotate(28deg);
    }

    #alp-seo-modern .seo-link.l2 {
      left: 57%;
      top: 32%;
      width: 65px;
      transform: rotate(-25deg);
    }

    #alp-seo-modern .seo-link.l3 {
      left: 32%;
      top: 72%;
      width: 55px;
      transform: rotate(-27deg);
    }

    #alp-seo-modern .seo-link.l4 {
      left: 57%;
      top: 65%;
      width: 58px;
      transform: rotate(25deg);
    }

    #alp-seo-modern .seo-pill {
      position: absolute;
      z-index: 4;
      min-width: 92px;
      padding: 9px 10px;
      border: 1px solid #53663b;
      border-radius: 5px;
      background: #08120fef;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #eaf0eb;
      font-size: 8px;
      font-weight: 800;
      line-height: 1.4;
      letter-spacing: .35px;
      box-shadow: 0 6px 20px #0003;
      transition: border-color .3s, background .3s, transform .3s;
    }

    #alp-seo-modern .seo-pill b {
      font-size: 16px;
      color: var(--lime);
      font-weight: 500;
    }

    #alp-seo-modern .seo-pill.p1 { left: 4%; top: 22%; }
    #alp-seo-modern .seo-pill.p2 { right: 4%; top: 22%; }
    #alp-seo-modern .seo-pill.p3 { left: 4%; bottom: 15%; }
    #alp-seo-modern .seo-pill.p4 { right: 4%; bottom: 15%; }

    #alp-seo-modern .seo-pill.active {
      border-color: var(--lime);
      background: #17230e;
      transform: translateY(-2px);
    }

    #alp-seo-modern .seo-scanline {
      position: absolute;
      z-index: 2;
      left: 0;
      right: 0;
      top: 0;
      height: 1px;
      background: var(--lime);
      box-shadow: 0 0 12px var(--lime);
      opacity: .8;
      animation: seoScan 5s ease-in-out infinite;
    }

    #alp-seo-modern .seo-mini-chart {
      position: absolute;
      right: 12px;
      bottom: 8px;
      width: 58px;
      height: 24px;
      opacity: .65;
    }

    #alp-seo-modern .seo-mini-chart path {
      fill: none;
      stroke: var(--lime);
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 120;
      stroke-dashoffset: 120;
      animation: seoDraw 2s .3s forwards;
    }

    /* RIGHT: original compact content structure */
    #alp-seo-modern .seo-content {
      position: relative;
      z-index: 2;
      min-width: 0;
    }

    #alp-seo-modern .seo-eyebrow {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 8px;
      font-weight: 850;
      letter-spacing: 1.3px;
      color: #d6dfd9;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    #alp-seo-modern .seo-eyebrow::before {
      content: "";
      display: block;
      width: 24px;
      height: 4px;
      border-radius: 4px;
      background: var(--lime);
      box-shadow: 0 0 10px #baff0030;
    }

    #alp-seo-modern .seo-heading {
      margin: 0 0 8px;
      color: var(--white);
      font-family: inherit;
      font-size: clamp(21px, 2.2vw, 29px);
      font-weight: 850;
      line-height: 1.12;
      letter-spacing: -.8px;
    }

    #alp-seo-modern .seo-heading span {
      color: var(--lime);
      display: inline-block;
      position: relative;
    }

    #alp-seo-modern .seo-description {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.55;
      margin: 0 0 10px;
      max-width: 510px;
    }

    #alp-seo-modern .seo-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    #alp-seo-modern .seo-benefits {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 7px;
    }

    #alp-seo-modern .seo-benefits li {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 10px;
      line-height: 1.3;
      color: #edf1ed;
    }

    #alp-seo-modern .seo-check {
      flex: 0 0 14px;
      width: 14px;
      height: 14px;
      display: grid;
      place-items: center;
      background: var(--lime);
      color: #071006;
      border-radius: 50%;
      font-size: 9px;
      font-weight: 900;
      box-shadow: 0 0 9px #baff001b;
    }

    #alp-seo-modern .seo-button {
      flex: 0 0 auto;
      min-height: 37px;
      padding: 0 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: var(--lime);
      color: #071006;
      border: 1px solid var(--lime);
      border-radius: 30px;
      text-decoration: none;
      font-size: 10px;
      font-weight: 850;
      white-space: nowrap;
      transition: transform .25s, box-shadow .25s, background .25s;
    }

    #alp-seo-modern .seo-button:hover {
      color: #071006;
      background: #d5ff58;
      transform: translateY(-2px);
      box-shadow: 0 0 22px #baff0033;
    }

    #alp-seo-modern .seo-button span {
      font-size: 19px;
      line-height: 1;
      transition: transform .25s;
    }

    #alp-seo-modern .seo-button:hover span {
      transform: translateX(4px);
    }

    #alp-seo-modern .seo-content,
    #alp-seo-modern .seo-visual {
      animation: seoAppear .7s ease both;
    }

    #alp-seo-modern .seo-content { animation-delay: .12s; }

    @keyframes seoAppear {
      from { opacity: 0; transform: translateY(9px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes seoSweep {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes seoPulse {
      0%,100% { opacity: .5; transform: scale(.8); }
      50% { opacity: 1; transform: scale(1.3); }
    }

    @keyframes seoScan {
      0%,100% { top: 0; opacity: 0; }
      10% { opacity: .8; }
      90% { opacity: .8; }
      50% { top: 100%; }
    }

    @keyframes seoDraw { to { stroke-dashoffset: 0; } }
    @keyframes seoBlink { 50% { opacity: .35; } }

    @media (min-width: 1400px) {
      #alp-seo-modern .seo-shell { min-height: 275px; }
      #alp-seo-modern .seo-visual { height: 225px; }
    }

    @media (max-width: 900px) {
      #alp-seo-modern .seo-shell {
        padding: 22px 4%;
        gap: 22px;
        grid-template-columns: 1fr 1fr;
      }

      #alp-seo-modern .seo-visual { height: 205px; }
      #alp-seo-modern .seo-pill { min-width: 79px; padding: 7px; gap: 5px; font-size: 7px; }
      #alp-seo-modern .seo-pill b { font-size: 13px; }
      #alp-seo-modern .seo-orbit { width: 115px; height: 115px; }
      #alp-seo-modern .seo-core { width: 65px; height: 65px; }
      #alp-seo-modern .seo-core strong { font-size: 22px; }
      #alp-seo-modern .seo-heading { font-size: 22px; }
      #alp-seo-modern .seo-description { font-size: 10px; }
      #alp-seo-modern .seo-bottom { align-items: flex-start; flex-direction: column; }
    }

    @media (max-width: 620px) {
      #alp-seo-modern .seo-shell {
        grid-template-columns: 1fr;
        padding: 24px 18px;
        gap: 20px;
      }

      #alp-seo-modern .seo-visual { height: 220px; }
      #alp-seo-modern .seo-heading { font-size: 25px; }
      #alp-seo-modern .seo-description { font-size: 11px; }
      #alp-seo-modern .seo-bottom { flex-direction: row; align-items: center; }
      #alp-seo-modern .seo-benefits { gap: 7px; }
      #alp-seo-modern .seo-button { padding: 0 12px; gap: 7px; }
      #alp-seo-modern .seo-pill.p1 { left: 3%; }
      #alp-seo-modern .seo-pill.p2 { right: 3%; }
      #alp-seo-modern .seo-pill.p3 { left: 3%; }
      #alp-seo-modern .seo-pill.p4 { right: 3%; }
    }

    @media (max-width: 390px) {
      #alp-seo-modern .seo-bottom { align-items: flex-start; flex-direction: column; }
      #alp-seo-modern .seo-button { min-height: 36px; }
      #alp-seo-modern .seo-visual { height: 205px; }
      #alp-seo-modern .seo-pill { min-width: 73px; font-size: 6.5px; }
    }

    @media (prefers-reduced-motion: reduce) {
      #alp-seo-modern *,
      #alp-seo-modern *::before,
      #alp-seo-modern *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }
    }

    #alp-seo-process {
      --lime: #baff00;
      --bg: #020c0d;
      --panel: #041315;
      --border: #18383a;
      --text: #f3f6f5;
      --muted: #c1cbca;
      background: var(--bg);
      color: var(--text);
      font-family: inherit;
      position: relative;
      overflow: hidden;
      border-top: 2px solid var(--lime);
      border-bottom: 2px solid var(--lime);
      isolation: isolate;
    }

    #alp-seo-process * { box-sizing: border-box; }

    #alp-seo-process .sp-wrap {
      max-width: 1440px;
      min-height: 210px;
      margin: auto;
      padding: 18px 5.8%;
      display: grid;
      grid-template-columns: minmax(0, 2.6fr) minmax(230px, .95fr);
      gap: 22px;
      align-items: center;
      position: relative;
    }

    #alp-seo-process .sp-wrap::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background:
        radial-gradient(ellipse at 17% 100%, #baff0008, transparent 40%),
        radial-gradient(ellipse at 80% 0%, #0b555012, transparent 35%);
      pointer-events: none;
      z-index: -1;
    }

    /* LEFT PROCESS AREA */
    #alp-seo-process .sp-main {
      min-width: 0;
      position: relative;
      z-index: 1;
    }

    #alp-seo-process .sp-eyebrow {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 8px;
      line-height: 1;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      font-weight: 850;
      margin-bottom: 7px;
    }

    #alp-seo-process .sp-eyebrow::before {
      content: "";
      width: 24px;
      height: 5px;
      border-radius: 5px;
      background: var(--lime);
      box-shadow: 0 0 10px #baff0033;
    }

    #alp-seo-process .sp-heading {
      margin: 0 0 5px;
      color: var(--text);
      font-size: clamp(18px, 2vw, 25px);
      line-height: 1.15;
      letter-spacing: -.5px;
      font-weight: 850;
    }

    #alp-seo-process .sp-heading span {
      color: var(--lime);
    }

    #alp-seo-process .sp-intro {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
      max-width: 510px;
      margin: 0 0 10px;
    }

    #alp-seo-process .sp-steps {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 15px;
      align-items: stretch;
    }

    #alp-seo-process .sp-step {
      min-width: 0;
      min-height: 96px;
      position: relative;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: linear-gradient(145deg, #071719, #030e10);
      transition: border-color .25s, background .25s, transform .25s;
      cursor: default;
      overflow: visible;
    }

    #alp-seo-process .sp-step::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 12px;
      width: 22px;
      height: 1px;
      background: var(--lime);
      opacity: .65;
      transition: width .25s;
    }

    #alp-seo-process .sp-step:hover,
    #alp-seo-process .sp-step.sp-active {
      border-color: #4c7021;
      background: linear-gradient(145deg, #0c2018, #041012);
      transform: translateY(-3px);
    }

    #alp-seo-process .sp-step:hover::before,
    #alp-seo-process .sp-step.sp-active::before {
      width: calc(100% - 24px);
      opacity: 1;
    }

    #alp-seo-process .sp-icon {
      width: 35px;
      height: 35px;
      display: grid;
      place-items: center;
      margin-bottom: 5px;
      border: 1px solid #344d1e;
      border-radius: 9px;
      color: var(--lime);
      background: #baff000b;
      transition: background .25s, box-shadow .25s;
    }

    #alp-seo-process .sp-step:hover .sp-icon,
    #alp-seo-process .sp-step.sp-active .sp-icon {
      background: #baff0015;
      box-shadow: 0 0 15px #baff0015;
    }

    #alp-seo-process .sp-icon svg {
      width: 23px;
      height: 23px;
      display: block;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #alp-seo-process .sp-number {
      display: block;
      color: var(--lime);
      font-size: 9px;
      font-weight: 850;
      margin-bottom: 3px;
    }

    #alp-seo-process .sp-name {
      font-size: 10px;
      font-weight: 500;
      line-height: 1.45;
      color: var(--text);
      overflow-wrap: anywhere;
    }

    #alp-seo-process .sp-arrow {
      position: absolute;
      right: -13px;
      top: 34px;
      color: var(--lime);
      font-size: 24px;
      line-height: 1;
      font-weight: 300;
      z-index: 2;
      pointer-events: none;
      animation: spArrow 1.8s ease-in-out infinite;
    }

    /* RIGHT FEATURE PANEL */
    #alp-seo-process .sp-feature {
      position: relative;
      min-width: 0;
      min-height: 180px;
      height: 180px;
      border: 1px solid #304d23;
      border-radius: 13px;
      background:
        radial-gradient(ellipse at 100% 100%, #baff001c, transparent 53%),
        linear-gradient(130deg, #071719, #07110d);
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 105px;
      gap: 4px;
      padding: 10px 12px 10px 14px;
      align-items: start;
    }

    #alp-seo-process .sp-feature::before {
      content: "";
      position: absolute;
      width: 120px;
      height: 120px;
      right: -42px;
      top: -58px;
      transform: rotate(45deg);
      border: 1px solid #baff0024;
      background: linear-gradient(135deg, #baff0014, transparent);
    }

    #alp-seo-process .sp-feature-copy {
      position: relative;
      z-index: 2;
      min-width: 0;
    }

    #alp-seo-process .sp-feature-head {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 9px;
    }

    #alp-seo-process .sp-feature-icon {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      border: 1px solid #496326;
      border-radius: 9px;
      background: #baff000c;
      color: var(--lime);
      display: grid;
      place-items: center;
    }

    #alp-seo-process .sp-feature-icon svg {
      width: 25px;
      height: 25px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #alp-seo-process .sp-feature-title {
      margin: 0;
      font-size: 13px;
      line-height: 1.25;
      font-weight: 800;
      color: var(--text);
    }

    #alp-seo-process .sp-feature-desc {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.65;
      margin: 0;
      max-width: 190px;
    }

    #alp-seo-process .sp-feature-visual {
      align-self: end;
      height: 132px;
      min-width: 0;
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    #alp-seo-process .sp-search-orb {
      position: absolute;
      width: 78px;
      height: 78px;
      border: 1px solid var(--lime);
      border-radius: 50%;
      top: 4px;
      right: 0;
      display: grid;
      place-items: center;
      color: var(--lime);
      background: radial-gradient(circle, #baff0018, #06100b 72%);
      box-shadow: 0 0 22px #baff001e, inset 0 0 16px #baff0010;
      z-index: 2;
      animation: spGlow 2.8s ease-in-out infinite;
    }

    #alp-seo-process .sp-search-orb::before,
    #alp-seo-process .sp-search-orb::after {
      content: "";
      position: absolute;
      inset: -8px;
      border: 1px solid #baff0033;
      border-radius: 50%;
      animation: spRipple 3s ease-out infinite;
    }

    #alp-seo-process .sp-search-orb::after {
      animation-delay: 1.5s;
    }

    #alp-seo-process .sp-search-orb svg {
      width: 40px;
      height: 40px;
      fill: none;
      stroke: currentColor;
      stroke-width: 4;
      stroke-linecap: round;
    }

    #alp-seo-process .sp-bars {
      position: absolute;
      left: 1px;
      right: 0;
      bottom: 0;
      height: 48px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 5px;
      opacity: .9;
    }

    #alp-seo-process .sp-bars i {
      display: block;
      width: 10px;
      height: var(--h);
      background: linear-gradient(180deg, var(--lime), #507800);
      transform-origin: bottom;
      animation: spBar 1.6s ease-in-out infinite alternate;
      animation-delay: var(--delay);
      box-shadow: 0 0 8px #baff001b;
    }

    #alp-seo-process .sp-growth-line {
      position: absolute;
      width: 100%;
      height: 47px;
      bottom: 4px;
      left: -1px;
      z-index: 2;
      overflow: visible;
    }

    #alp-seo-process .sp-growth-line path {
      fill: none;
      stroke: var(--lime);
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 150;
      stroke-dashoffset: 150;
      animation: spDraw 2s .4s ease forwards;
    }

    @keyframes spArrow {
      0%,100% { transform: translateX(0); opacity: .65; }
      50% { transform: translateX(3px); opacity: 1; }
    }

    @keyframes spGlow {
      0%,100% { box-shadow: 0 0 18px #baff0018, inset 0 0 16px #baff0010; }
      50% { box-shadow: 0 0 29px #baff0037, inset 0 0 20px #baff0019; }
    }

    @keyframes spRipple {
      0% { transform: scale(.9); opacity: .7; }
      100% { transform: scale(1.3); opacity: 0; }
    }

    @keyframes spBar {
      from { transform: scaleY(.78); }
      to { transform: scaleY(1); }
    }

    @keyframes spDraw { to { stroke-dashoffset: 0; } }

    @media (min-width: 1200px) {
      #alp-seo-process .sp-wrap { min-height: 210px; }
    }

    @media (max-width: 900px) {
      #alp-seo-process .sp-wrap {
        grid-template-columns: 1fr;
        padding: 22px 4%;
        gap: 16px;
      }

      #alp-seo-process .sp-feature {
        max-width: 100%;
        min-height: 170px;
      }

      #alp-seo-process .sp-steps { gap: 12px; }
      #alp-seo-process .sp-step { padding: 8px; }
      #alp-seo-process .sp-arrow { right: -11px; }
    }

    @media (max-width: 580px) {
      #alp-seo-process .sp-wrap { padding: 22px 17px; }
      #alp-seo-process .sp-heading { font-size: 21px; }
      #alp-seo-process .sp-intro { font-size: 11px; }

      #alp-seo-process .sp-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      #alp-seo-process .sp-step { min-height: 105px; padding: 10px; }
      #alp-seo-process .sp-icon { width: 34px; height: 34px; }
      #alp-seo-process .sp-name { font-size: 11px; }
      #alp-seo-process .sp-arrow { display: none; }

      #alp-seo-process .sp-feature {
        grid-template-columns: 1fr 100px;
        padding: 12px;
        height: 175px;
      }

      #alp-seo-process .sp-feature-desc { font-size: 10px; }
      #alp-seo-process .sp-feature-title { font-size: 12px; }
    }

    @media (prefers-reduced-motion: reduce) {
      #alp-seo-process *,
      #alp-seo-process *::before,
      #alp-seo-process *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }
    }

     #alp-why-seo {
      --lime: #baff00;
      --bg: #020c0d;
      --panel: #061415;
      --border: #173638;
      --white: #f4f7f5;
      --muted: #c0c9c7;
      background: var(--bg);
      color: var(--white);
      font-family: inherit;
      position: relative;
      overflow: hidden;
      border-top: 2px solid var(--lime);
      isolation: isolate;
    }

    #alp-why-seo * { box-sizing: border-box; }

    #alp-why-seo .wy-wrap {
      max-width: 1440px;
      min-height: 210px;
      padding: 18px 5.8%;
      margin: auto;
      display: grid;
      grid-template-columns: minmax(0, 2.6fr) minmax(230px, .95fr);
      align-items: center;
      gap: 22px;
      position: relative;
    }

    #alp-why-seo .wy-wrap::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background:
        radial-gradient(ellipse at 15% 100%, #baff0008, transparent 40%),
        radial-gradient(ellipse at 100% 0%, #0b555015, transparent 40%);
      pointer-events: none;
    }

    /* Heading */
    #alp-why-seo .wy-main { min-width: 0; }

    #alp-why-seo .wy-eyebrow {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 8px;
      letter-spacing: 1.1px;
      font-weight: 850;
      text-transform: uppercase;
      margin-bottom: 7px;
    }

    #alp-why-seo .wy-eyebrow::before {
      content: "";
      width: 24px;
      height: 5px;
      border-radius: 5px;
      background: var(--lime);
      box-shadow: 0 0 10px #baff0033;
    }

    #alp-why-seo .wy-heading {
      color: var(--white);
      font-size: clamp(19px, 2vw, 25px);
      line-height: 1.15;
      font-weight: 850;
      letter-spacing: -.6px;
      margin: 0 0 5px;
    }

    #alp-why-seo .wy-heading span { color: var(--lime); }

    #alp-why-seo .wy-intro {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.55;
      margin: 0 0 10px;
      max-width: 500px;
    }

    /* Benefit cards */
    #alp-why-seo .wy-cards {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 17px;
    }

    #alp-why-seo .wy-card {
      min-width: 0;
      min-height: 90px;
      position: relative;
      padding: 7px 9px 9px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: linear-gradient(145deg, #071719, #030d0f);
      transition: .25s ease;
      overflow: visible;
    }

    #alp-why-seo .wy-card::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 11px;
      width: 22px;
      height: 1px;
      background: var(--lime);
      opacity: .7;
      transition: width .25s;
    }

    #alp-why-seo .wy-card:hover,
    #alp-why-seo .wy-card.wy-active {
      border-color: #536f25;
      background: linear-gradient(145deg, #0c2018, #041012);
      transform: translateY(-3px);
    }

    #alp-why-seo .wy-card:hover::before,
    #alp-why-seo .wy-card.wy-active::before {
      width: calc(100% - 22px);
      opacity: 1;
    }

    #alp-why-seo .wy-icon {
      width: 36px;
      height: 36px;
      margin-bottom: 5px;
      display: grid;
      place-items: center;
      color: var(--lime);
      border: 1px solid #344d1e;
      border-radius: 50%;
      background: #baff000b;
      transition: .25s ease;
    }

    #alp-why-seo .wy-card:hover .wy-icon,
    #alp-why-seo .wy-card.wy-active .wy-icon {
      background: #baff0018;
      box-shadow: 0 0 15px #baff0017;
    }

    #alp-why-seo .wy-icon svg {
      width: 23px;
      height: 23px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #alp-why-seo .wy-card-title {
      font-size: 10px;
      line-height: 1.45;
      color: var(--white);
      font-weight: 600;
    }

    #alp-why-seo .wy-arrow {
      position: absolute;
      right: -15px;
      top: 31px;
      color: var(--lime);
      font-size: 25px;
      font-weight: 300;
      z-index: 3;
      animation: wyArrow 1.8s ease-in-out infinite;
      pointer-events: none;
    }

    /* Right side success panel */
    #alp-why-seo .wy-feature {
      position: relative;
      min-width: 0;
      min-height: 160px;
      height: 160px;
      overflow: hidden;
      padding: 11px 12px 10px 14px;
      border: 1px solid #304d23;
      border-radius: 12px;
      background:
        radial-gradient(ellipse at 100% 100%, #baff0022, transparent 58%),
        linear-gradient(130deg, #071719, #07110d);
      display: grid;
      grid-template-columns: minmax(0, 1fr) 90px;
      gap: 5px;
      align-items: start;
    }

    #alp-why-seo .wy-feature::before {
      content: "";
      position: absolute;
      top: -44px;
      right: -39px;
      width: 105px;
      height: 105px;
      border: 1px solid #baff0030;
      transform: rotate(45deg);
      background: linear-gradient(135deg, #baff0014, transparent);
    }

    #alp-why-seo .wy-feature-copy {
      position: relative;
      z-index: 2;
      min-width: 0;
    }

    #alp-why-seo .wy-feature-heading {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 8px;
    }

    #alp-why-seo .wy-feature-icon {
      flex: 0 0 37px;
      width: 37px;
      height: 37px;
      color: var(--lime);
    }

    #alp-why-seo .wy-feature-icon svg {
      width: 100%;
      height: 100%;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #alp-why-seo .wy-feature-title {
      margin: 0;
      color: var(--white);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.25;
    }

    #alp-why-seo .wy-feature-title span {
      color: var(--lime);
    }

    #alp-why-seo .wy-feature-desc {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.6;
      margin: 0 0 8px;
    }

    #alp-why-seo .wy-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 28px;
      padding: 0 12px;
      border-radius: 30px;
      color: #071006;
      background: var(--lime);
      border: 1px solid var(--lime);
      text-decoration: none;
      font-size: 9px;
      font-weight: 850;
      white-space: nowrap;
      transition: .25s ease;
    }

    #alp-why-seo .wy-cta:hover {
      background: #d8ff63;
      color: #071006;
      transform: translateY(-2px);
      box-shadow: 0 5px 18px #baff0030;
    }

    #alp-why-seo .wy-cta span {
      font-size: 15px;
      line-height: 1;
    }

    /* Animated chart illustration */
    #alp-why-seo .wy-chart {
      position: relative;
      height: 123px;
      align-self: end;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding-bottom: 4px;
    }

    #alp-why-seo .wy-chart-box {
      position: absolute;
      bottom: 5px;
      right: 0;
      width: 78px;
      height: 52px;
      border: 1px solid #405b24;
      border-radius: 5px;
      background: #09150eaa;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 5px;
      padding: 8px 7px 6px;
    }

    #alp-why-seo .wy-chart-box i {
      width: 8px;
      height: var(--bar-height);
      background: linear-gradient(180deg, var(--lime), #4f7700);
      display: block;
      transform-origin: bottom;
      animation: wyBar 1.5s ease-in-out infinite alternate;
      animation-delay: var(--bar-delay);
      box-shadow: 0 0 7px #baff001a;
    }

    #alp-why-seo .wy-chart-line {
      position: absolute;
      bottom: 30px;
      right: 0;
      width: 90px;
      height: 53px;
      z-index: 2;
      overflow: visible;
    }

    #alp-why-seo .wy-chart-line path {
      fill: none;
      stroke: var(--lime);
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 150;
      stroke-dashoffset: 150;
      animation: wyDraw 2.2s .3s ease forwards;
    }

    #alp-why-seo .wy-chart-line circle {
      fill: var(--lime);
      animation: wyBlink 1.5s ease-in-out infinite;
    }

    @keyframes wyArrow {
      0%,100% { transform: translateX(0); opacity: .65; }
      50% { transform: translateX(3px); opacity: 1; }
    }

    @keyframes wyBar {
      from { transform: scaleY(.72); }
      to { transform: scaleY(1); }
    }

    @keyframes wyDraw { to { stroke-dashoffset: 0; } }

    @keyframes wyBlink {
      0%,100% { opacity: .6; }
      50% { opacity: 1; }
    }

    @media (max-width: 900px) {
      #alp-why-seo .wy-wrap {
        grid-template-columns: 1fr;
        padding: 22px 4%;
        gap: 15px;
      }

      #alp-why-seo .wy-feature {
        max-width: 100%;
        min-height: 155px;
      }

      #alp-why-seo .wy-cards { gap: 15px; }
    }

    @media (max-width: 580px) {
      #alp-why-seo .wy-wrap { padding: 22px 17px; }

      #alp-why-seo .wy-heading { font-size: 21px; }
      #alp-why-seo .wy-intro { font-size: 11px; }

      #alp-why-seo .wy-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      #alp-why-seo .wy-card {
        min-height: 100px;
        padding: 10px;
      }

      #alp-why-seo .wy-card-title { font-size: 11px; }
      #alp-why-seo .wy-arrow { display: none; }

      #alp-why-seo .wy-feature {
        grid-template-columns: minmax(0, 1fr) 85px;
        min-height: 165px;
        height: 165px;
      }

      #alp-why-seo .wy-feature-title { font-size: 12px; }
      #alp-why-seo .wy-feature-desc { font-size: 10px; }
    }

    @media (prefers-reduced-motion: reduce) {
      #alp-why-seo *,
      #alp-why-seo *::before,
      #alp-why-seo *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }
    }
     #alp-seo-tools {
      --lime: #baff00;
      --bg: #020c0d;
      --border: #183638;
      --white: #f4f7f5;
      --muted: #c1ccca;
      background: var(--bg);
      color: var(--white);
      font-family: inherit;
      position: relative;
      overflow: hidden;
      border-top: 2px solid var(--lime);
      border-bottom: 1px solid #183638;
      isolation: isolate;
    }

    #alp-seo-tools * { box-sizing: border-box; }

    #alp-seo-tools .st-wrap {
      max-width: 1440px;
      min-height: 155px;
      margin: auto;
      padding: 12px 5.8%;
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
      align-items: center;
      gap: 18px;
    }

    #alp-seo-tools .st-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(ellipse at 80% 60%, #baff0011, transparent 45%),
        radial-gradient(ellipse at 5% 100%, #0a4d291b, transparent 40%);
    }

    /* Heading */
    #alp-seo-tools .st-main {
      position: relative;
      z-index: 3;
      min-width: 0;
    }

    #alp-seo-tools .st-eyebrow {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--white);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    #alp-seo-tools .st-eyebrow::before {
      content: "";
      width: 24px;
      height: 5px;
      border-radius: 8px;
      background: var(--lime);
      box-shadow: 0 0 10px #baff0030;
    }

    #alp-seo-tools .st-title {
      color: var(--white);
      font-size: clamp(19px, 2vw, 25px);
      line-height: 1.1;
      font-weight: 850;
      letter-spacing: -.5px;
      margin: 0 0 5px;
    }

    #alp-seo-tools .st-description {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
      margin: 0 0 9px;
    }

    /* Tool cards */
    #alp-seo-tools .st-tools {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 9px;
    }

    #alp-seo-tools .st-tool {
      min-width: 0;
      height: 68px;
      padding: 7px 3px 5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      position: relative;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: linear-gradient(145deg, #071719, #030e10);
      transition: transform .25s ease, border-color .25s ease,
                  background .25s ease, box-shadow .25s ease;
      overflow: hidden;
    }

    #alp-seo-tools .st-tool::before {
      content: "";
      position: absolute;
      left: 15%;
      right: 15%;
      top: 0;
      height: 1px;
      background: var(--tool-color, var(--lime));
      opacity: .5;
      transition: opacity .25s, left .25s, right .25s;
    }

    #alp-seo-tools .st-tool:hover,
    #alp-seo-tools .st-tool.st-active {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--tool-color, var(--lime)) 55%, #173638);
      background: linear-gradient(145deg, #0b1c1b, #061011);
      box-shadow: 0 5px 18px #0005;
    }

    #alp-seo-tools .st-tool:hover::before,
    #alp-seo-tools .st-tool.st-active::before {
      left: 0;
      right: 0;
      opacity: 1;
    }

    #alp-seo-tools .st-logo {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      color: var(--tool-color, var(--lime));
      flex: 0 0 auto;
      transition: transform .25s ease, filter .25s ease;
    }

    #alp-seo-tools .st-tool:hover .st-logo {
      transform: scale(1.12);
      filter: drop-shadow(0 0 5px currentColor);
    }

    #alp-seo-tools .st-logo svg {
      width: 100%;
      height: 100%;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #alp-seo-tools .st-logo .st-fill {
      fill: currentColor;
      stroke: none;
    }

    #alp-seo-tools .st-tool-name {
      color: var(--white);
      text-align: center;
      font-size: 8px;
      line-height: 1.2;
      font-weight: 500;
      white-space: nowrap;
      max-width: 100%;
      letter-spacing: -.15px;
    }

    /* Brand wordmark logos */
    #alp-seo-tools .st-wordmark {
      font-weight: 900;
      font-size: 15px;
      line-height: 1;
      letter-spacing: -1px;
      white-space: nowrap;
    }

    #alp-seo-tools .st-wordmark.moz {
      color: #e8f7ff;
      text-shadow: 0 1px 0 #238ec7;
    }

    #alp-seo-tools .st-wordmark.ahrefs {
      color: #f15a24;
      font-size: 23px;
      letter-spacing: -2px;
    }

    #alp-seo-tools .st-wordmark.semrush {
      color: #ff642d;
      font-size: 20px;
      letter-spacing: -2px;
    }

    /* Right-side CSS/SVG illustration */
    #alp-seo-tools .st-visual {
      min-width: 0;
      height: 130px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 700px;
    }

    #alp-seo-tools .st-circuit {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      opacity: .8;
    }

    #alp-seo-tools .st-circuit path,
    #alp-seo-tools .st-circuit line {
      fill: none;
      stroke: #5c8b12;
      stroke-width: .8;
    }

    #alp-seo-tools .st-circuit circle {
      fill: var(--lime);
      filter: drop-shadow(0 0 5px var(--lime));
      animation: stPulse 2s ease-in-out infinite alternate;
    }

    #alp-seo-tools .st-laptop {
      position: relative;
      z-index: 2;
      width: 75%;
      max-width: 310px;
      margin-left: 12%;
      transform: rotateY(-7deg) rotateX(2deg);
      transform-style: preserve-3d;
      animation: stFloat 4s ease-in-out infinite;
    }

    #alp-seo-tools .st-screen {
      position: relative;
      height: 87px;
      padding: 6px;
      border: 2px solid #46594b;
      border-bottom-color: #829086;
      border-radius: 7px 7px 3px 3px;
      background: linear-gradient(140deg, #101d1a, #020807 70%);
      box-shadow: 0 0 18px #baff0015, inset 0 0 15px #000;
      overflow: hidden;
    }

    #alp-seo-tools .st-screen::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg, transparent 0 4px, #baff0007 5px 6px
      );
      pointer-events: none;
    }

    #alp-seo-tools .st-ui {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 6px;
      height: 100%;
    }

    #alp-seo-tools .st-sidebar {
      border-right: 1px solid #344b31;
      padding: 4px 3px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    #alp-seo-tools .st-sidebar i {
      display: block;
      height: 3px;
      border-radius: 4px;
      background: #4b6d31;
    }

    #alp-seo-tools .st-sidebar i:first-child {
      width: 90%;
      background: var(--lime);
    }

    #alp-seo-tools .st-dashboard {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
    }

    #alp-seo-tools .st-ui-top {
      display: flex;
      justify-content: space-between;
      gap: 5px;
      align-items: center;
    }

    #alp-seo-tools .st-ui-top i {
      width: 35%;
      height: 4px;
      background: #6b9828;
      border-radius: 5px;
    }

    #alp-seo-tools .st-ui-top i:last-child {
      width: 16%;
      background: var(--lime);
    }

    #alp-seo-tools .st-ui-bars {
      display: flex;
      align-items: flex-end;
      height: 25px;
      gap: 4px;
      border-bottom: 1px solid #38522c;
      padding: 0 3px;
    }

    #alp-seo-tools .st-ui-bars i {
      width: 9%;
      height: var(--bar);
      background: linear-gradient(180deg, #baff00, #3c6b0a);
      animation: stGrow 1.5s ease-in-out infinite alternate;
      animation-delay: var(--delay);
    }

    #alp-seo-tools .st-ui-lines {
      display: grid;
      gap: 4px;
      padding-top: 1px;
    }

    #alp-seo-tools .st-ui-lines i {
      height: 3px;
      background: #294832;
      border-radius: 5px;
    }

    #alp-seo-tools .st-ui-lines i:nth-child(2) { width: 70%; }
    #alp-seo-tools .st-ui-lines i:nth-child(3) { width: 85%; }

    #alp-seo-tools .st-screen-badge {
      position: absolute;
      z-index: 4;
      left: 27%;
      top: 35%;
      padding: 5px 13px;
      border: 1px solid var(--lime);
      border-radius: 7px;
      background: linear-gradient(120deg, #142719ed, #020908f5);
      color: var(--white);
      font-size: clamp(17px, 2.7vw, 28px);
      line-height: 1.15;
      font-weight: 900;
      letter-spacing: 1px;
      text-shadow: 0 0 12px #baff0044;
      box-shadow: 0 0 14px #baff001e;
      animation: stGlow 2.5s ease-in-out infinite;
    }

    #alp-seo-tools .st-base {
      height: 8px;
      margin: 0 -9px;
      background: linear-gradient(180deg, #66746a, #111a15 60%, #020706);
      clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
      border-radius: 0 0 6px 6px;
    }

    #alp-seo-tools .st-base::after {
      content: "";
      display: block;
      margin: 0 auto;
      width: 18%;
      height: 2px;
      background: #758477;
      border-radius: 0 0 5px 5px;
    }

    #alp-seo-tools .st-plant {
      position: absolute;
      z-index: 3;
      bottom: 8px;
      right: 1%;
      width: 34px;
      height: 54px;
      border-bottom: 2px solid #61721c;
    }

    #alp-seo-tools .st-plant::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 16px;
      width: 2px;
      height: 40px;
      background: #5b7c1b;
      transform: rotate(8deg);
    }

    #alp-seo-tools .st-plant i {
      position: absolute;
      width: 14px;
      height: 7px;
      background: linear-gradient(90deg, #426c0c, var(--lime));
      border-radius: 100% 0 100% 0;
    }

    #alp-seo-tools .st-plant i:nth-child(1) {
      left: 1px; bottom: 18px; transform: rotate(25deg);
    }

    #alp-seo-tools .st-plant i:nth-child(2) {
      left: 17px; bottom: 28px; transform: rotate(-35deg) scaleX(-1);
    }

    #alp-seo-tools .st-plant i:nth-child(3) {
      left: 2px; bottom: 37px; transform: rotate(25deg);
    }

    #alp-seo-tools .st-light {
      position: absolute;
      z-index: 1;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 12px 3px #baff0066;
      animation: stPulse 1.7s ease-in-out infinite alternate;
    }

    #alp-seo-tools .st-light.one { left: 15%; top: 25%; }
    #alp-seo-tools .st-light.two { right: 20%; top: 8%; animation-delay: .7s; }

    @keyframes stFloat {
      0%, 100% { transform: translateY(0) rotateY(-7deg) rotateX(2deg); }
      50% { transform: translateY(-3px) rotateY(-5deg) rotateX(2deg); }
    }

    @keyframes stGlow {
      0%, 100% { box-shadow: 0 0 12px #baff0016; }
      50% { box-shadow: 0 0 23px #baff0038; }
    }

    @keyframes stGrow {
      from { transform: scaleY(.72); transform-origin: bottom; }
      to { transform: scaleY(1); transform-origin: bottom; }
    }

    @keyframes stPulse {
      from { opacity: .45; }
      to { opacity: 1; }
    }

    @media (min-width: 1200px) {
      #alp-seo-tools .st-wrap { min-height: 155px; }
    }

    @media (max-width: 900px) {
      #alp-seo-tools .st-wrap {
        grid-template-columns: 1fr;
        padding: 20px 4%;
        gap: 10px;
      }

      #alp-seo-tools .st-visual {
        height: 180px;
      }

      #alp-seo-tools .st-laptop {
        width: 60%;
        max-width: 330px;
      }

      #alp-seo-tools .st-screen { height: 110px; }
      #alp-seo-tools .st-screen-badge { font-size: 29px; }
      #alp-seo-tools .st-tools { gap: 10px; }
    }

    @media (max-width: 580px) {
      #alp-seo-tools .st-wrap { padding: 20px 16px; }
      #alp-seo-tools .st-title { font-size: 22px; }
      #alp-seo-tools .st-description { font-size: 11px; }

      #alp-seo-tools .st-tools {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
      }

      #alp-seo-tools .st-tool { height: 75px; }
      #alp-seo-tools .st-tool-name { font-size: 9px; }
      #alp-seo-tools .st-logo { width: 30px; height: 30px; }

      #alp-seo-tools .st-visual { height: 155px; }
      #alp-seo-tools .st-laptop { width: 78%; }
      #alp-seo-tools .st-screen { height: 90px; }
      #alp-seo-tools .st-screen-badge { font-size: 23px; }
    }

    @media (prefers-reduced-motion: reduce) {
      #alp-seo-tools *,
      #alp-seo-tools *::before,
      #alp-seo-tools *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }
    }

    #alp-seo-portfolio {
      --lime: #baff00;
      --bg: #020c0d;
      --border: #183638;
      --white: #f5f8f6;
      --muted: #c0cbca;
      background: var(--bg);
      color: var(--white);
      font-family: inherit;
      border-top: 2px solid var(--lime);
      overflow: hidden;
      isolation: isolate;
    }

    #alp-seo-portfolio * { box-sizing: border-box; }

    #alp-seo-portfolio .pf-wrap {
      max-width: 1440px;
      min-height: 153px;
      margin: auto;
      padding: 17px 5.8%;
      display: grid;
      grid-template-columns: minmax(255px, .9fr) minmax(0, 1.7fr);
      align-items: center;
      gap: 25px;
    }

    /* Left content */
    #alp-seo-portfolio .pf-eyebrow {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 6px;
      color: var(--white);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .8px;
      text-transform: uppercase;
    }

    #alp-seo-portfolio .pf-eyebrow::before {
      content: "";
      width: 24px;
      height: 5px;
      border-radius: 6px;
      background: var(--lime);
      box-shadow: 0 0 10px #baff0025;
    }

    #alp-seo-portfolio .pf-heading {
      color: var(--white);
      font-size: clamp(20px, 2vw, 25px);
      line-height: 1.15;
      letter-spacing: -.5px;
      font-weight: 850;
      margin: 0 0 5px;
    }

    #alp-seo-portfolio .pf-description {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.55;
      margin: 0 0 10px;
      max-width: 310px;
    }

    #alp-seo-portfolio .pf-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 13px;
      min-height: 31px;
      padding: 0 13px;
      border-radius: 25px;
      background: var(--lime);
      color: #071006;
      text-decoration: none;
      font-size: 9px;
      font-weight: 850;
      transition: .25s ease;
    }

    #alp-seo-portfolio .pf-cta:hover {
      background: #d5ff68;
      color: #071006;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px #baff0026;
    }

    #alp-seo-portfolio .pf-cta-icon {
      display: grid;
      place-items: center;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #06100b;
      color: var(--lime);
      font-size: 12px;
      line-height: 1;
    }

    /* Portfolio carousel */
    #alp-seo-portfolio .pf-showcase {
      min-width: 0;
      position: relative;
      padding: 0 23px;
    }

    #alp-seo-portfolio .pf-track {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      min-width: 0;
    }

    #alp-seo-portfolio .pf-card {
      min-width: 0;
      padding: 5px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: linear-gradient(145deg, #071719, #030d0f);
      transition: border-color .25s ease, transform .25s ease,
                  background .25s ease;
      text-decoration: none;
      color: inherit;
      display: block;
      position: relative;
    }

    #alp-seo-portfolio .pf-card:hover {
      border-color: #779b28;
      background: #091817;
      transform: translateY(-3px);
    }

    /* Replace these visual placeholders with your own portfolio images */
    #alp-seo-portfolio .pf-thumb {
      position: relative;
      width: 100%;
      aspect-ratio: 1.6 / 1;
      overflow: hidden;
      border-radius: 4px;
      background: #12211f;
    }

    #alp-seo-portfolio .pf-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .45s ease;
    }

    #alp-seo-portfolio .pf-card:hover .pf-thumb img {
      transform: scale(1.06);
    }

    #alp-seo-portfolio .pf-thumb::after {
      content: "";
      position: absolute;
      inset: 45% 0 0;
      background: linear-gradient(transparent, #020c0d40);
      pointer-events: none;
    }

    #alp-seo-portfolio .pf-info {
      display: grid;
      grid-template-columns: 23px minmax(0, 1fr);
      gap: 5px;
      align-items: center;
      padding: 6px 1px 2px;
    }

    #alp-seo-portfolio .pf-icon {
      width: 22px;
      height: 22px;
      color: var(--lime);
      display: grid;
      place-items: center;
    }

    #alp-seo-portfolio .pf-icon svg {
      width: 100%;
      height: 100%;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #alp-seo-portfolio .pf-card-title {
      font-size: 8px;
      line-height: 1.25;
      font-weight: 750;
      color: var(--white);
      margin: 0 0 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #alp-seo-portfolio .pf-result {
      font-size: 7.5px;
      line-height: 1.25;
      color: var(--lime);
      margin: 0;
      white-space: nowrap;
    }

    #alp-seo-portfolio .pf-result strong { font-weight: 900; }

    /* Navigation */
    #alp-seo-portfolio .pf-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      width: 21px;
      height: 21px;
      border: 1px solid #244044;
      border-radius: 50%;
      background: #18282b;
      color: var(--white);
      display: grid;
      place-items: center;
      cursor: pointer;
      padding: 0;
      font-size: 17px;
      line-height: 1;
      transition: .2s ease;
    }

    #alp-seo-portfolio .pf-nav:hover {
      color: #071006;
      background: var(--lime);
      border-color: var(--lime);
    }

    #alp-seo-portfolio .pf-prev { left: -1px; }
    #alp-seo-portfolio .pf-next { right: -1px; }

    #alp-seo-portfolio .pf-progress {
      width: 12px;
      height: 4px;
      background: var(--lime);
      border-radius: 5px;
      margin: 8px auto 0;
      box-shadow: 0 0 8px #baff0040;
      transition: width .3s ease;
    }

    #alp-seo-portfolio .pf-showcase:hover .pf-progress {
      width: 28px;
    }

    @media (max-width: 1000px) {
      #alp-seo-portfolio .pf-wrap {
        grid-template-columns: 1fr;
        gap: 17px;
        padding: 22px 4%;
      }

      #alp-seo-portfolio .pf-description { max-width: 440px; }
      #alp-seo-portfolio .pf-track { gap: 14px; }
      #alp-seo-portfolio .pf-showcase { padding: 0 25px; }
      #alp-seo-portfolio .pf-card-title { font-size: 10px; }
      #alp-seo-portfolio .pf-result { font-size: 9px; }
    }

    @media (max-width: 600px) {
      #alp-seo-portfolio .pf-wrap { padding: 20px 15px; }
      #alp-seo-portfolio .pf-heading { font-size: 22px; }
      #alp-seo-portfolio .pf-description { font-size: 11px; }

      #alp-seo-portfolio .pf-showcase {
        padding: 0 22px;
      }

      #alp-seo-portfolio .pf-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 10px;
        padding: 2px 1px 6px;
      }

      #alp-seo-portfolio .pf-track::-webkit-scrollbar { display: none; }

      #alp-seo-portfolio .pf-card {
        flex: 0 0 calc(50% - 5px);
        scroll-snap-align: start;
      }

      #alp-seo-portfolio .pf-card-title { font-size: 9px; }
      #alp-seo-portfolio .pf-result { font-size: 8px; }
      #alp-seo-portfolio .pf-nav { width: 20px; height: 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      #alp-seo-portfolio *,
      #alp-seo-portfolio *::before,
      #alp-seo-portfolio *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
    }

        #alp-seo-cta {
      --lime: #baff00;
      --bg: #020b0c;
      --white: #f5f8f6;
      --muted: #d0d8d5;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: var(--bg);
      color: var(--white);
      font-family: inherit;
      border-top: 2px solid var(--lime);
      border-bottom: 1px solid #23402d;
    }

    #alp-seo-cta * { box-sizing: border-box; }

    #alp-seo-cta .cta-wrap {
      position: relative;
      max-width: 1440px;
      min-height: 88px;
      padding: 12px 7.5%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr) auto;
      align-items: center;
      gap: 20px;
    }

    /* Atmospheric mountain background, created with CSS/SVG */
    #alp-seo-cta .cta-landscape {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      pointer-events: none;
    }

    #alp-seo-cta .cta-overlay {
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, #020b0ce8 0%, #020b0cbf 38%,
          #020b0cae 68%, #020b0ce8 100%),
        radial-gradient(ellipse at 94% 0%, #baff0025, transparent 35%);
      pointer-events: none;
    }

    #alp-seo-cta .cta-glow {
      position: absolute;
      width: 220px;
      height: 100px;
      right: -40px;
      top: -45px;
      background: #baff0010;
      filter: blur(35px);
      border-radius: 50%;
      pointer-events: none;
    }

    /* Animated growth icon */
    #alp-seo-cta .cta-icon {
      width: 62px;
      height: 62px;
      position: relative;
      display: grid;
      place-items: center;
      color: var(--lime);
    }

    #alp-seo-cta .cta-icon svg {
      width: 56px;
      height: 56px;
      overflow: visible;
    }

    #alp-seo-cta .cta-icon .growth-bars {
      fill: var(--lime);
      transform-origin: bottom;
      animation: alpCtaBars 1.8s ease-in-out infinite alternate;
    }

    #alp-seo-cta .cta-icon .growth-arrow {
      fill: none;
      stroke: var(--lime);
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 60;
      stroke-dashoffset: 60;
      animation: alpCtaArrow 1.4s .2s ease forwards;
    }

    #alp-seo-cta .cta-icon::after {
      content: "";
      position: absolute;
      inset: 5px;
      border-radius: 50%;
      border: 1px solid #baff0030;
      opacity: 0;
      animation: alpCtaRing 2.8s ease-out infinite;
    }

    /* Copy */
    #alp-seo-cta .cta-copy {
      min-width: 0;
      position: relative;
    }

    #alp-seo-cta .cta-title {
      color: var(--white);
      font-size: clamp(18px, 2vw, 23px);
      line-height: 1.15;
      font-weight: 850;
      letter-spacing: -.45px;
      margin: 0 0 5px;
    }

    #alp-seo-cta .cta-title span {
      color: var(--lime);
    }

    #alp-seo-cta .cta-text {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
      margin: 0;
    }

    /* CTA button */
    #alp-seo-cta .cta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 13px;
      min-width: 145px;
      min-height: 34px;
      padding: 0 15px;
      background: var(--lime);
      color: #071006;
      border: 1px solid var(--lime);
      border-radius: 30px;
      text-decoration: none;
      font-size: 10px;
      font-weight: 850;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease,
                  background .25s ease;
    }

    #alp-seo-cta .cta-button::before {
      content: "";
      position: absolute;
      top: -40%;
      left: -55%;
      width: 35%;
      height: 180%;
      background: #ffffff60;
      transform: rotate(22deg);
      transition: left .55s ease;
    }

    #alp-seo-cta .cta-button:hover::before {
      left: 130%;
    }

    #alp-seo-cta .cta-button:hover {
      background: #d5ff69;
      color: #071006;
      transform: translateY(-2px);
      box-shadow: 0 5px 20px #baff0030;
    }

    #alp-seo-cta .cta-button .cta-arrow {
      width: 17px;
      height: 17px;
      flex: 0 0 17px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #071006;
      color: var(--lime);
      font-size: 12px;
      line-height: 1;
      transition: transform .25s ease;
    }

    #alp-seo-cta .cta-button:hover .cta-arrow {
      transform: translateX(2px);
    }

    /* Decorative circuit lines */
    #alp-seo-cta .cta-circuit {
      position: absolute;
      right: 0;
      top: 0;
      width: 21%;
      height: 100%;
      opacity: .65;
      pointer-events: none;
    }

    #alp-seo-cta .cta-circuit path {
      fill: none;
      stroke: #709e13;
      stroke-width: .8;
      stroke-dasharray: 5 5;
      animation: alpCtaCircuit 12s linear infinite;
    }

    #alp-seo-cta .cta-circuit circle {
      fill: var(--lime);
      filter: drop-shadow(0 0 4px var(--lime));
    }

    @keyframes alpCtaBars {
      from { transform: scaleY(.82); }
      to { transform: scaleY(1); }
    }

    @keyframes alpCtaArrow {
      to { stroke-dashoffset: 0; }
    }

    @keyframes alpCtaRing {
      0% { transform: scale(.75); opacity: .45; }
      100% { transform: scale(1.35); opacity: 0; }
    }

    @keyframes alpCtaCircuit {
      to { stroke-dashoffset: -100; }
    }

    @media (max-width: 700px) {
      #alp-seo-cta .cta-wrap {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
        padding: 15px 20px;
      }

      #alp-seo-cta .cta-icon,
      #alp-seo-cta .cta-icon svg {
        width: 45px;
        height: 45px;
      }

      #alp-seo-cta .cta-title { font-size: 19px; }
      #alp-seo-cta .cta-text { font-size: 10px; }

      #alp-seo-cta .cta-button {
        grid-column: 2;
        justify-self: start;
        min-height: 32px;
        margin-top: 2px;
      }

      #alp-seo-cta .cta-circuit { width: 38%; }
    }

    @media (max-width: 380px) {
      #alp-seo-cta .cta-wrap {
        padding: 14px;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
      }

      #alp-seo-cta .cta-icon,
      #alp-seo-cta .cta-icon svg {
        width: 38px;
        height: 38px;
      }

      #alp-seo-cta .cta-title { font-size: 17px; }
    }

    @media (prefers-reduced-motion: reduce) {
      #alp-seo-cta *,
      #alp-seo-cta *::before,
      #alp-seo-cta *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }

     #creative-motion-lab {
      --lime: #baff00;
      --bg: #020b0d;
      --white: #f7faf8;
      --muted: #c0cfcb;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: var(--bg);
      color: var(--white);
      font-family: inherit;
      border-top: 2px solid var(--lime);
    }

    #creative-motion-lab * { box-sizing: border-box; }

    #creative-motion-lab .cm-wrap {
      max-width: 1440px;
      min-height: 340px;
      padding: 32px 5.5%;
      margin: auto;
      display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
      align-items: center;
      gap: 25px;
    }

    #creative-motion-lab .cm-bg {
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(ellipse at 74% 50%, #baff0017, transparent 30%),
        radial-gradient(ellipse at 98% 5%, #1c4932a1, transparent 32%),
        linear-gradient(115deg, #020b0d 25%, #061514 100%);
    }

    #creative-motion-lab .cm-grid {
      position: absolute;
      z-index: -1;
      inset: 0;
      opacity: .17;
      background-image:
        linear-gradient(#7caa7a 1px, transparent 1px),
        linear-gradient(90deg, #7caa7a 1px, transparent 1px);
      background-size: 35px 35px;
      mask-image: linear-gradient(90deg, transparent, #000 65%, transparent);
      pointer-events: none;
    }

    /* Left-side typography */
    #creative-motion-lab .cm-copy {
      position: relative;
      z-index: 3;
    }

    #creative-motion-lab .cm-label {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 13px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    #creative-motion-lab .cm-label::before {
      content: "";
      width: 27px;
      height: 5px;
      border-radius: 10px;
      background: var(--lime);
      box-shadow: 0 0 13px #baff0060;
    }

    #creative-motion-lab .cm-title {
      color: var(--white);
      font-size: clamp(35px, 4.2vw, 55px);
      line-height: .99;
      letter-spacing: -2px;
      font-weight: 950;
      margin: 0;
    }

    #creative-motion-lab .cm-title .cm-outline {
      display: block;
      color: transparent;
      -webkit-text-stroke: 1px var(--lime);
      text-shadow: 0 0 20px #baff0010;
      margin-top: 7px;
    }

    #creative-motion-lab .cm-title .cm-solid {
      display: block;
      color: var(--lime);
      margin-top: 7px;
    }

    #creative-motion-lab .cm-subtitle {
      font-size: 15px;
      font-weight: 750;
      line-height: 1.4;
      margin: 17px 0 8px;
      color: var(--white);
    }

    #creative-motion-lab .cm-desc {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.7;
      max-width: 390px;
      margin: 0;
    }

    #creative-motion-lab .cm-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 18px;
    }

    #creative-motion-lab .cm-btn {
      min-height: 37px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      border-radius: 30px;
      padding: 0 15px;
      text-decoration: none;
      font-family: inherit;
      font-size: 10px;
      font-weight: 800;
      transition: .25s ease;
    }

    #creative-motion-lab .cm-btn-primary {
      background: var(--lime);
      color: #061006;
      border: 1px solid var(--lime);
    }

    #creative-motion-lab .cm-btn-secondary {
      color: var(--white);
      border: 1px solid #82928c;
      background: #081312;
    }

    #creative-motion-lab .cm-btn:hover {
      transform: translateY(-3px);
      background: #d8ff75;
      color: #071006;
      border-color: var(--lime);
      box-shadow: 0 5px 20px #baff0025;
    }

    #creative-motion-lab .cm-btn span {
      width: 18px;
      height: 18px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #071006;
      color: var(--lime);
      font-size: 12px;
    }

    /* Right-side kinetic artwork */
    #creative-motion-lab .cm-art {
      position: relative;
      height: 275px;
      min-width: 0;
      perspective: 900px;
    }

    #creative-motion-lab .cm-art::before {
      content: "";
      position: absolute;
      width: 64%;
      height: 65%;
      top: 18%;
      left: 18%;
      border-radius: 50%;
      background: #baff001c;
      filter: blur(45px);
    }

    #creative-motion-lab .cm-orbit {
      position: absolute;
      width: 85%;
      height: 77%;
      left: 7%;
      top: 11%;
      border: 1px solid #baff004d;
      border-radius: 50%;
      transform: rotate(-24deg);
      animation: cmOrbit 15s linear infinite;
    }

    #creative-motion-lab .cm-orbit.two {
      width: 68%;
      height: 95%;
      left: 16%;
      top: 2%;
      border-color: #baff0029;
      transform: rotate(35deg);
      animation: cmOrbitReverse 19s linear infinite;
    }

    #creative-motion-lab .cm-orbit::before,
    #creative-motion-lab .cm-orbit::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      background: var(--lime);
      border-radius: 50%;
      box-shadow: 0 0 16px var(--lime);
    }

    #creative-motion-lab .cm-orbit::before {
      left: 13%;
      top: 17%;
    }

    #creative-motion-lab .cm-orbit::after {
      right: 12%;
      bottom: 19%;
      width: 5px;
      height: 5px;
    }

    /* Large typographic art canvas */
    #creative-motion-lab .cm-canvas {
      position: absolute;
      left: 15%;
      top: 15%;
      width: 67%;
      height: 65%;
      border: 1px solid #6b8d2d;
      border-radius: 5px;
      background:
        linear-gradient(135deg, #13251cdb, #03100fed 65%),
        #06110e;
      transform: rotate(-5deg);
      overflow: hidden;
      box-shadow: 0 18px 45px #0009, 0 0 25px #baff0014;
      animation: cmCanvasFloat 5s ease-in-out infinite;
    }

    #creative-motion-lab .cm-canvas::before {
      content: "";
      position: absolute;
      width: 170px;
      height: 170px;
      right: -35px;
      top: -60px;
      border: 1px solid #baff0045;
      border-radius: 50%;
      box-shadow: 0 0 0 14px #baff0008, 0 0 0 28px #baff0005;
    }

    #creative-motion-lab .cm-canvas::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(115deg, #ffffff0a 0%, transparent 40%, #baff000b 100%);
    }

    #creative-motion-lab .cm-canvas-top {
      height: 24px;
      padding: 0 9px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #07110f;
      border-bottom: 1px solid #263b30;
      position: relative;
      z-index: 2;
    }

    #creative-motion-lab .cm-dots {
      display: flex;
      gap: 4px;
    }

    #creative-motion-lab .cm-dots i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #52645a;
    }

    #creative-motion-lab .cm-dots i:first-child { background: var(--lime); }

    #creative-motion-lab .cm-top-word {
      color: #c9d5cd;
      font-size: 7px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    #creative-motion-lab .cm-canvas-inner {
      height: calc(100% - 24px);
      padding: 14px 15px;
      position: relative;
      z-index: 1;
    }

    #creative-motion-lab .cm-big-word {
      position: relative;
      z-index: 3;
      font-size: clamp(26px, 3.6vw, 43px);
      line-height: .88;
      font-weight: 950;
      letter-spacing: -1.5px;
      color: var(--white);
    }

    #creative-motion-lab .cm-big-word em {
      display: block;
      color: var(--lime);
      font-style: normal;
    }

    #creative-motion-lab .cm-art-caption {
      position: absolute;
      bottom: 12px;
      left: 15px;
      color: #b8c8bd;
      font-size: 8px;
      letter-spacing: 1px;
      z-index: 3;
    }

    #creative-motion-lab .cm-art-number {
      position: absolute;
      right: 12px;
      bottom: 9px;
      color: var(--lime);
      font-size: 11px;
      font-weight: 900;
      z-index: 3;
    }

    /* Moving geometric artwork */
    #creative-motion-lab .cm-shape {
      position: absolute;
      z-index: 2;
      pointer-events: none;
    }

    #creative-motion-lab .cm-shape-square {
      width: 65px;
      height: 65px;
      right: 8%;
      top: 25%;
      border: 1px solid #baff00;
      transform: rotate(30deg);
      animation: cmShapeSpin 12s linear infinite;
    }

    #creative-motion-lab .cm-shape-square::after {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid #baff0080;
    }

    #creative-motion-lab .cm-shape-circle {
      width: 48px;
      height: 48px;
      right: 15%;
      bottom: 12%;
      border: 1px solid var(--lime);
      border-radius: 50%;
      box-shadow: inset 0 0 15px #baff0018, 0 0 15px #baff0018;
      animation: cmCirclePulse 3s ease-in-out infinite alternate;
    }

    #creative-motion-lab .cm-shape-circle::after {
      content: "";
      position: absolute;
      inset: 9px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 18px #baff0070;
    }

    #creative-motion-lab .cm-shape-triangle {
      left: 4%;
      bottom: 13%;
      width: 46px;
      height: 46px;
      border: 1px solid #baff00a6;
      clip-path: polygon(50% 0, 100% 100%, 0 100%);
      background: #baff000a;
      animation: cmTriangleFloat 4s ease-in-out infinite;
    }

    /* Floating labels */
    #creative-motion-lab .cm-chip {
      position: absolute;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      min-width: 116px;
      border: 1px solid #718c27;
      border-radius: 7px;
      background: #061311ef;
      box-shadow: 0 8px 20px #0005, inset 0 0 15px #baff0007;
      font-size: 10px;
      font-weight: 750;
      animation: cmChipFloat 4s ease-in-out infinite;
    }

    #creative-motion-lab .cm-chip svg {
      width: 21px;
      height: 21px;
      color: var(--lime);
      flex: 0 0 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #creative-motion-lab .cm-chip.brand {
      top: 2%;
      right: 0;
    }

    #creative-motion-lab .cm-chip.video {
      right: -1%;
      bottom: 7%;
      animation-delay: -1.5s;
    }

    #creative-motion-lab .cm-chip.content {
      left: 0;
      top: 58%;
      animation-delay: -.8s;
    }

    #creative-motion-lab .cm-chip.design {
      left: 3%;
      top: 4%;
      animation-delay: -2s;
    }

    #creative-motion-lab .cm-scribble {
      position: absolute;
      right: 14%;
      top: 3%;
      color: var(--lime);
      font-family: "Trebuchet MS", sans-serif;
      font-style: italic;
      font-size: 11px;
      font-weight: 800;
      transform: rotate(-9deg);
      opacity: .95;
      z-index: 4;
    }

    #creative-motion-lab .cm-scribble svg {
      display: block;
      width: 70px;
      height: 17px;
      overflow: visible;
    }

    #creative-motion-lab .cm-scribble path {
      fill: none;
      stroke: var(--lime);
      stroke-width: 1.5;
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      animation: cmDraw 2s 1s ease forwards;
    }

    /* Bottom moving light */
    #creative-motion-lab .cm-lightline {
      position: absolute;
      bottom: 0;
      left: -25%;
      width: 25%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--lime), transparent);
      box-shadow: 0 0 15px #baff0066;
      animation: cmLightLine 5s linear infinite;
    }

    @keyframes cmCanvasFloat {
      0%, 100% { transform: translateY(0) rotate(-5deg); }
      50% { transform: translateY(-7px) rotate(-3deg); }
    }

    @keyframes cmOrbit {
      to { transform: rotate(336deg); }
    }

    @keyframes cmOrbitReverse {
      to { transform: rotate(-325deg); }
    }

    @keyframes cmShapeSpin {
      to { transform: rotate(390deg); }
    }

    @keyframes cmCirclePulse {
      from { transform: scale(.88); opacity: .7; }
      to { transform: scale(1.12); opacity: 1; }
    }

    @keyframes cmTriangleFloat {
      0%, 100% { transform: translateY(0) rotate(0); }
      50% { transform: translateY(-10px) rotate(15deg); }
    }

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

    @keyframes cmDraw {
      to { stroke-dashoffset: 0; }
    }

    @keyframes cmLightLine {
      from { left: -25%; }
      to { left: 110%; }
    }

    @media (min-width: 1200px) {
      #creative-motion-lab .cm-wrap { min-height: 340px; }
    }

    @media (max-width: 900px) {
      #creative-motion-lab .cm-wrap {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 30px 5%;
      }

      #creative-motion-lab .cm-desc { max-width: 570px; }
      #creative-motion-lab .cm-art { height: 330px; }
      #creative-motion-lab .cm-canvas { width: 62%; height: 68%; left: 17%; }
      #creative-motion-lab .cm-big-word { font-size: 43px; }
    }

    @media (max-width: 560px) {
      #creative-motion-lab .cm-wrap {
        padding: 25px 17px 18px;
        gap: 15px;
      }

      #creative-motion-lab .cm-title {
        font-size: clamp(32px, 9vw, 43px);
        letter-spacing: -1.3px;
      }

      #creative-motion-lab .cm-subtitle { font-size: 14px; }
      #creative-motion-lab .cm-desc { font-size: 11px; }
      #creative-motion-lab .cm-art { height: 245px; }

      #creative-motion-lab .cm-canvas {
        width: 70%;
        height: 65%;
        left: 12%;
        top: 17%;
      }

      #creative-motion-lab .cm-canvas-inner { padding: 11px; }
      #creative-motion-lab .cm-big-word { font-size: clamp(27px, 8vw, 38px); }

      #creative-motion-lab .cm-chip {
        min-width: 0;
        padding: 6px 7px;
        gap: 5px;
        font-size: 9px;
      }

      #creative-motion-lab .cm-chip svg {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
      }

      #creative-motion-lab .cm-chip.brand { right: 0; top: 3%; }
      #creative-motion-lab .cm-chip.design { left: 0; top: 4%; }
      #creative-motion-lab .cm-chip.content { left: 0; top: 63%; }
      #creative-motion-lab .cm-chip.video { right: 0; bottom: 5%; }

      #creative-motion-lab .cm-scribble { right: 12%; top: 1%; font-size: 9px; }
      #creative-motion-lab .cm-shape-square { width: 42px; height: 42px; right: 8%; top: 30%; }
      #creative-motion-lab .cm-shape-circle { width: 33px; height: 33px; right: 12%; bottom: 12%; }
      #creative-motion-lab .cm-shape-triangle { width: 30px; height: 30px; left: 3%; bottom: 15%; }
    }

    @media (max-width: 360px) {
      #creative-motion-lab .cm-wrap { padding-left: 13px; padding-right: 13px; }
      #creative-motion-lab .cm-art { height: 220px; }
      #creative-motion-lab .cm-chip { font-size: 8px; }
      #creative-motion-lab .cm-big-word { font-size: 26px; }
    }

    @media (prefers-reduced-motion: reduce) {
      #creative-motion-lab *,
      #creative-motion-lab *::before,
      #creative-motion-lab *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }

    
/* LIVE DRAWING CANVAS */
#creative-motion-lab .cm-drawing-canvas {
  background: #0a1512;
  border: 1px solid #435b3b;
}

#creative-motion-lab .cm-draw-area {
  height: calc(100% - 24px);
  padding: 8px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 20px;
  gap: 7px;
  background: #101a17;
}

#creative-motion-lab .cm-draw-toolbar {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 9px;
  background: #17251f;
  color: #baff00;
  font-size: 12px;
}

#creative-motion-lab .cm-draw-toolbar span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid #304b35;
  border-radius: 3px;
}

#creative-motion-lab .cm-artwork {
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: #d8e9d4;
}

#creative-motion-lab .cm-draw-heading {
  position: absolute;
  z-index: 3;
  left: 8%;
  top: 12%;
  color: #102e23;
  font-size: clamp(17px, 2.1vw, 27px);
  line-height: .91;
  letter-spacing: -1px;
  font-weight: 950;
  pointer-events: none;
  animation: cmHeadingReveal 1s .6s both;
}

#creative-motion-lab .cm-draw-heading em {
  color: #487d36;
  font-style: normal;
}

#creative-motion-lab .cm-draw-heading span {
  color: #426e31;
  display: inline-block;
  margin-left: 4px;
  font-size: .65em;
}

#creative-motion-lab .cm-live-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#creative-motion-lab .cm-draw-path {
  stroke: #f0ffdd;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  animation: cmDrawShape 2.4s .2s ease forwards;
}

#creative-motion-lab .cm-mountain-front {
  animation-delay: .8s;
}

#creative-motion-lab .cm-snow {
  animation-delay: 1.7s;
}

#creative-motion-lab .cm-shadow-peak {
  animation-delay: 2s;
}

#creative-motion-lab .cm-front-detail {
  animation-delay: 2.2s;
}

#creative-motion-lab .cm-lower-peak {
  animation-delay: 2.4s;
}

#creative-motion-lab .cm-draw-line {
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  animation: cmDrawStroke 2s .4s ease forwards;
}

#creative-motion-lab .cm-detail-line {
  animation-delay: 2.5s;
}

#creative-motion-lab .cm-orbit-line {
  animation-delay: 2.8s;
}

#creative-motion-lab .cm-draw-sun {
  transform-box: fill-box;
  transform-origin: center;
  animation: cmSunAppear .8s 1.4s both;
}

#creative-motion-lab .cm-sun-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: cmRingPulse 3s 2s ease-in-out infinite;
}

#creative-motion-lab .cm-node {
  opacity: 0;
  animation: cmNodeAppear .4s 2.5s forwards;
}

#creative-motion-lab .cm-node:nth-of-type(2) {
  animation-delay: 2.9s;
}

#creative-motion-lab .cm-draw-corner {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 4;
  color: #183c2c;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1px;
  background: #e6f5d4d9;
  padding: 4px 5px;
}

#creative-motion-lab .cm-draw-status {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #c8d7c8;
  font-size: 7px;
  letter-spacing: .3px;
}

#creative-motion-lab .cm-status-dot {
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #baff00;
  box-shadow: 0 0 8px #baff00;
  animation: cmStatusBlink 1s infinite alternate;
}

#creative-motion-lab .cm-status-percent {
  margin-left: auto;
  color: #baff00;
  font-weight: 800;
}

@keyframes cmDrawShape {
  to { stroke-dashoffset: 0; }
}

@keyframes cmDrawStroke {
  to { stroke-dashoffset: 0; }
}

@keyframes cmSunAppear {
  from { opacity: 0; transform: scale(.2); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes cmRingPulse {
  0%, 100% { opacity: .25; transform: scale(.9); }
  50% { opacity: .8; transform: scale(1.1); }
}

@keyframes cmNodeAppear {
  to { opacity: 1; }
}

@keyframes cmHeadingReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cmStatusBlink {
  from { opacity: .35; }
  to { opacity: 1; }
}

@media (max-width: 560px) {
  #creative-motion-lab .cm-draw-area { padding: 5px; gap: 5px; }
  #creative-motion-lab .cm-draw-heading { font-size: 18px; }
  #creative-motion-lab .cm-draw-toolbar { gap: 7px; }
}

 #creative-why-us {
      --lime: #baff00;
      --bg: #020b0d;
      --border: #07566a;
      --white: #f7f8fa;
      --muted: #d2d9dc;
      background: var(--bg);
      color: var(--white);
      font-family: inherit;
      border-top: 2px solid var(--lime);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    #creative-why-us * {
      box-sizing: border-box;
    }

    #creative-why-us .cw-container {
      max-width: 1440px;
      min-height: 260px;
      margin: auto;
      padding: 28px 5.75%;
      display: grid;
      grid-template-columns: 0.92fr 1.95fr;
      align-items: center;
      gap: 6%;
    }

    #creative-why-us .cw-intro {
      min-width: 0;
    }

    #creative-why-us .cw-eyebrow {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 8px;
      color: var(--white);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .6px;
      text-transform: uppercase;
    }

    #creative-why-us .cw-eyebrow::before {
      content: "";
      width: 25px;
      height: 5px;
      border-radius: 10px;
      background: var(--lime);
      box-shadow: 0 0 10px #baff0035;
      flex-shrink: 0;
    }

    #creative-why-us .cw-heading {
      color: var(--white);
      font-size: clamp(24px, 2.45vw, 32px);
      line-height: 1.13;
      letter-spacing: -.75px;
      font-weight: 850;
      margin: 0 0 9px;
    }

    #creative-why-us .cw-heading span {
      color: var(--lime);
      display: block;
    }

    #creative-why-us .cw-description {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.55;
      max-width: 320px;
      margin: 0;
    }

    #creative-why-us .cw-cta {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 36px;
      margin-top: 19px;
      padding: 5px 10px 5px 17px;
      background: var(--lime);
      border: 1px solid var(--lime);
      border-radius: 28px;
      color: #071006;
      text-decoration: none;
      font-size: 10px;
      font-weight: 800;
      transition: .25s ease;
    }

    #creative-why-us .cw-cta:hover {
      background: #d6ff71;
      border-color: #d6ff71;
      color: #071006;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px #baff002b;
    }

    #creative-why-us .cw-cta-arrow {
      width: 19px;
      height: 19px;
      border-radius: 50%;
      background: #071006;
      color: var(--lime);
      display: grid;
      place-items: center;
      font-size: 13px;
      line-height: 1;
      flex-shrink: 0;
    }

    /* Service grid */
    #creative-why-us .cw-services {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 13px;
      min-width: 0;
    }

    #creative-why-us .cw-card {
      min-width: 0;
      height: 102px;
      padding: 12px 16px 10px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: linear-gradient(135deg, #031114 0%, #020c0e 100%);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      gap: 6px;
      position: relative;
      overflow: hidden;
      transition: border-color .25s ease, background .25s ease,
                  transform .25s ease, box-shadow .25s ease;
    }

    #creative-why-us .cw-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: -110%;
      width: 75%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--lime), transparent);
      transition: left .5s ease;
    }

    #creative-why-us .cw-card:hover {
      border-color: var(--lime);
      background: linear-gradient(135deg, #0b2019 0%, #041112 100%);
      transform: translateY(-3px);
      box-shadow: 0 7px 20px #0004, 0 0 13px #baff000b;
    }

    #creative-why-us .cw-card:hover::before {
      left: 130%;
    }

    #creative-why-us .cw-icon {
      width: 35px;
      height: 35px;
      color: var(--lime);
      flex-shrink: 0;
      transition: transform .3s ease, filter .3s ease;
    }

    #creative-why-us .cw-card:hover .cw-icon {
      transform: scale(1.1);
      filter: drop-shadow(0 0 5px #baff0066);
    }

    #creative-why-us .cw-icon svg {
      width: 100%;
      height: 100%;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #creative-why-us .cw-card-title {
      color: var(--white);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.35;
      margin: 0;
      overflow-wrap: anywhere;
    }

    @media (min-width: 1200px) {
      #creative-why-us .cw-container {
        min-height: 260px;
      }
    }

    @media (max-width: 1050px) {
      #creative-why-us .cw-container {
        grid-template-columns: .8fr 1.5fr;
        gap: 4%;
        padding-left: 4%;
        padding-right: 4%;
      }

      #creative-why-us .cw-services {
        gap: 9px;
      }

      #creative-why-us .cw-card {
        padding: 11px 10px;
        height: 100px;
      }

      #creative-why-us .cw-heading {
        font-size: 26px;
      }
    }

    @media (max-width: 760px) {
      #creative-why-us .cw-container {
        grid-template-columns: 1fr;
        gap: 23px;
        padding: 27px 5%;
      }

      #creative-why-us .cw-heading {
        font-size: clamp(27px, 5vw, 34px);
      }

      #creative-why-us .cw-description {
        max-width: 480px;
      }

      #creative-why-us .cw-services {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }

      #creative-why-us .cw-card {
        height: 100px;
        padding: 10px;
      }

      #creative-why-us .cw-card-title {
        font-size: 11px;
      }
    }

    @media (max-width: 520px) {
      #creative-why-us .cw-container {
        padding: 24px 16px;
        gap: 20px;
      }

      #creative-why-us .cw-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      #creative-why-us .cw-card {
        height: 105px;
        padding: 12px 14px;
      }

      #creative-why-us .cw-icon {
        width: 32px;
        height: 32px;
      }

      #creative-why-us .cw-card-title {
        font-size: 12px;
      }

      #creative-why-us .cw-cta {
        margin-top: 15px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #creative-why-us *,
      #creative-why-us *::before,
      #creative-why-us *::after {
        transition: none !important;
      }
    }

    #creative-process {
      --lime: #baff00;
      --bg: #020b0d;
      --white: #f6f8f7;
      --muted: #c5d0ce;
      --line: #244037;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: var(--bg);
      color: var(--white);
      font-family: inherit;
      border-top: 2px solid var(--lime);
    }

    #creative-process * { box-sizing: border-box; }

    #creative-process .cp-bg {
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(ellipse at 83% 50%, #aaff001c, transparent 32%),
        radial-gradient(ellipse at 5% 100%, #0c3025a8, transparent 35%),
        linear-gradient(100deg, #020b0d, #031110 70%, #06140c);
    }

    #creative-process .cp-grid {
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .13;
      pointer-events: none;
      background-image:
        linear-gradient(#4c7c52 1px, transparent 1px),
        linear-gradient(90deg, #4c7c52 1px, transparent 1px);
      background-size: 36px 36px;
      mask-image: linear-gradient(90deg, transparent, #000 65%, transparent);
    }

    #creative-process .cp-container {
      max-width: 1440px;
      min-height: 275px;
      padding: 25px 5.75%;
      margin: auto;
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(270px, .85fr);
      align-items: center;
      gap: 25px;
    }

    /* Heading */
    #creative-process .cp-label {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      color: var(--white);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .7px;
      text-transform: uppercase;
    }

    #creative-process .cp-label::before {
      content: "";
      height: 5px;
      width: 25px;
      border-radius: 10px;
      background: var(--lime);
      box-shadow: 0 0 12px #baff004c;
    }

    #creative-process .cp-heading {
      color: var(--white);
      font-size: clamp(25px, 2.6vw, 34px);
      line-height: 1.1;
      letter-spacing: -1px;
      font-weight: 850;
      margin: 0;
    }

    #creative-process .cp-heading span { color: var(--lime); }

    #creative-process .cp-intro {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.6;
      max-width: 480px;
      margin: 8px 0 22px;
    }

    /* Process timeline */
    #creative-process .cp-steps {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
    }

    #creative-process .cp-track {
      position: absolute;
      height: 1px;
      top: 30px;
      left: 8%;
      right: 8%;
      background: #355044;
      z-index: 0;
    }

    #creative-process .cp-track-fill {
      height: 2px;
      width: 0%;
      background: var(--lime);
      box-shadow: 0 0 9px var(--lime);
      transition: width .8s ease;
      position: relative;
    }

    #creative-process .cp-track-fill::after {
      content: "";
      position: absolute;
      right: -3px;
      top: -3px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 10px var(--lime);
    }

    #creative-process .cp-step {
      min-width: 0;
      position: relative;
      z-index: 1;
      cursor: pointer;
      outline: none;
      -webkit-tap-highlight-color: transparent;
    }

    #creative-process .cp-icon-ring {
      width: 61px;
      height: 61px;
      border-radius: 50%;
      border: 1px solid #76a900;
      background: #061310;
      color: var(--lime);
      display: grid;
      place-items: center;
      margin: 0 auto 8px 0;
      box-shadow: 0 0 0 6px #020b0d, inset 0 0 14px #baff000c;
      transition: .3s ease;
      position: relative;
    }

    #creative-process .cp-icon-ring::before {
      content: "";
      position: absolute;
      inset: -5px;
      border: 1px solid #baff0000;
      border-radius: 50%;
      transition: .3s ease;
    }

    #creative-process .cp-icon-ring svg {
      width: 31px;
      height: 31px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .3s ease;
    }

    #creative-process .cp-step:hover .cp-icon-ring,
    #creative-process .cp-step:focus-visible .cp-icon-ring,
    #creative-process .cp-step.active .cp-icon-ring {
      background: #15250b;
      border-color: var(--lime);
      box-shadow: 0 0 18px #baff0025, 0 0 0 5px #020b0d;
    }

    #creative-process .cp-step:hover .cp-icon-ring::before,
    #creative-process .cp-step.active .cp-icon-ring::before {
      border-color: #baff0060;
      transform: scale(1.12);
    }

    #creative-process .cp-step:hover .cp-icon-ring svg,
    #creative-process .cp-step.active .cp-icon-ring svg {
      transform: scale(1.1);
    }

    #creative-process .cp-step-number {
      display: inline-block;
      font-size: 10px;
      line-height: 1;
      color: #e7f5e9;
      background: #12332a;
      border-radius: 10px;
      padding: 3px 5px;
      margin-bottom: 5px;
    }

    #creative-process .cp-step-title {
      color: var(--white);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
      margin: 0;
      max-width: 120px;
    }

    #creative-process .cp-step-title span { display: block; }

    #creative-process .cp-step-arrow {
      position: absolute;
      top: 23px;
      right: -5px;
      z-index: 2;
      font-size: 20px;
      color: var(--lime);
      line-height: 1;
      animation: cpArrow 1.5s ease-in-out infinite;
    }

    #creative-process .cp-step:last-child .cp-step-arrow { display: none; }

    /* Right-side creative illustration */
    #creative-process .cp-visual {
      position: relative;
      height: 230px;
      min-width: 0;
      perspective: 800px;
    }

    #creative-process .cp-visual-glow {
      position: absolute;
      width: 70%;
      height: 70%;
      left: 15%;
      top: 15%;
      background: #baff0020;
      filter: blur(36px);
      border-radius: 50%;
      animation: cpGlow 4s ease-in-out infinite alternate;
    }

    #creative-process .cp-handwriting {
      position: absolute;
      top: 3%;
      left: 3%;
      z-index: 4;
      color: var(--lime);
      font-size: clamp(22px, 2.5vw, 31px);
      font-weight: 800;
      line-height: .98;
      font-style: italic;
      font-family: "Trebuchet MS", sans-serif;
      transform: rotate(-9deg);
      text-shadow: 0 0 15px #baff0024;
    }

    #creative-process .cp-handwriting span {
      display: block;
      margin-left: 12px;
    }

    #creative-process .cp-hand-line {
      width: 80px;
      height: 18px;
      margin-top: 4px;
      margin-left: 9px;
    }

    #creative-process .cp-hand-line path {
      fill: none;
      stroke: var(--lime);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      animation: cpDrawLine 2.5s .5s ease forwards;
    }

    #creative-process .cp-tablet {
      position: absolute;
      width: 91%;
      height: 49%;
      left: 5%;
      bottom: 4%;
      border: 1px solid #566d2b;
      border-radius: 9px;
      background: linear-gradient(145deg, #101f18, #020807 70%);
      transform: rotate(-9deg) skewX(-4deg);
      box-shadow: 0 14px 25px #0009, 0 0 20px #baff0013;
      overflow: hidden;
    }

    #creative-process .cp-tablet::before {
      content: "";
      position: absolute;
      inset: 7px;
      border: 1px solid #8aaf2a4a;
      border-radius: 5px;
      background:
        linear-gradient(#baff0008 1px, transparent 1px),
        linear-gradient(90deg, #baff0008 1px, transparent 1px);
      background-size: 19px 19px;
    }

    #creative-process .cp-tablet::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--lime), transparent);
      animation: cpScan 4s linear infinite;
    }

    #creative-process .cp-tablet-art {
      position: absolute;
      inset: 10px;
      display: grid;
      place-items: center;
    }

    #creative-process .cp-tablet-art svg {
      width: 70%;
      height: 90%;
      overflow: visible;
    }

    #creative-process .cp-art-line {
      fill: none;
      stroke: var(--lime);
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 450;
      stroke-dashoffset: 450;
      animation: cpDrawLine 3s .3s ease forwards;
    }

    #creative-process .cp-art-fill {
      fill: #baff0014;
      stroke: #baff00a1;
      stroke-width: 1.2;
      animation: cpFill 2s 1.5s ease both;
    }

    #creative-process .cp-bulb {
      position: absolute;
      right: 8%;
      top: 4%;
      width: 92px;
      height: 122px;
      z-index: 3;
      animation: cpBulbFloat 4s ease-in-out infinite;
    }

    #creative-process .cp-bulb svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    #creative-process .cp-bulb-outline {
      fill: #baff0008;
      stroke: var(--lime);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 6px #baff0080);
    }

    #creative-process .cp-bulb-rays {
      stroke: var(--lime);
      stroke-width: 1.5;
      stroke-linecap: round;
      transform-origin: 50% 38%;
      animation: cpRays 3s ease-in-out infinite alternate;
    }

    #creative-process .cp-brain {
      position: absolute;
      top: 28%;
      right: 35%;
      z-index: 4;
      width: 55px;
      height: 55px;
      color: var(--lime);
      filter: drop-shadow(0 0 7px #baff003d);
      animation: cpBrainPulse 3s ease-in-out infinite;
    }

    #creative-process .cp-brain svg {
      width: 100%;
      height: 100%;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #creative-process .cp-orbit {
      position: absolute;
      width: 65px;
      height: 65px;
      top: 25%;
      right: 32%;
      border: 1px solid #baff0070;
      border-radius: 50%;
      animation: cpOrbit 10s linear infinite;
    }

    #creative-process .cp-orbit::after {
      content: "";
      position: absolute;
      top: 0;
      left: 8px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 10px var(--lime);
    }

    #creative-process .cp-spark {
      position: absolute;
      color: var(--lime);
      font-size: 21px;
      animation: cpSpark 2s ease-in-out infinite alternate;
    }

    #creative-process .cp-spark.one { right: 0; top: 15%; }
    #creative-process .cp-spark.two { right: 27%; top: 4%; animation-delay: -1s; }
    #creative-process .cp-spark.three { left: 15%; bottom: 10%; animation-delay: -.5s; }

    #creative-process .cp-caption {
      position: absolute;
      right: 3%;
      bottom: 0;
      color: #c9d6c6;
      font-size: 8px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    #creative-process .cp-progress {
      height: 2px;
      position: absolute;
      bottom: 0;
      left: -30%;
      width: 30%;
      background: linear-gradient(90deg, transparent, var(--lime), transparent);
      box-shadow: 0 0 12px #baff0060;
      animation: cpProgress 6s linear infinite;
    }

    @keyframes cpArrow {
      0%, 100% { transform: translateX(0); opacity: .6; }
      50% { transform: translateX(4px); opacity: 1; }
    }

    @keyframes cpGlow {
      from { transform: scale(.85); opacity: .6; }
      to { transform: scale(1.1); opacity: 1; }
    }

    @keyframes cpDrawLine {
      to { stroke-dashoffset: 0; }
    }

    @keyframes cpFill {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes cpBulbFloat {
      0%, 100% { transform: translateY(0) rotate(0); }
      50% { transform: translateY(-7px) rotate(2deg); }
    }

    @keyframes cpRays {
      from { opacity: .45; transform: scale(.93); }
      to { opacity: 1; transform: scale(1.07); }
    }

    @keyframes cpBrainPulse {
      0%, 100% { opacity: .8; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.07); }
    }

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

    @keyframes cpSpark {
      from { opacity: .3; transform: scale(.7) rotate(0); }
      to { opacity: 1; transform: scale(1.1) rotate(25deg); }
    }

    @keyframes cpScan {
      from { transform: translateX(-100%); }
      to { transform: translateX(200%); }
    }

    @keyframes cpProgress {
      from { left: -30%; }
      to { left: 110%; }
    }

    @media (min-width: 1200px) {
      #creative-process .cp-container { min-height: 275px; }
    }

    @media (max-width: 1000px) {
      #creative-process .cp-container {
        grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr);
        gap: 15px;
        padding-left: 4%;
        padding-right: 4%;
      }

      #creative-process .cp-steps { gap: 6px; }
      #creative-process .cp-icon-ring { width: 52px; height: 52px; }
      #creative-process .cp-track { top: 25px; }
      #creative-process .cp-step-arrow { top: 18px; right: -4px; }
      #creative-process .cp-step-title { font-size: 11px; }
      #creative-process .cp-visual { height: 205px; }
      #creative-process .cp-bulb { width: 75px; height: 105px; }
    }

    @media (max-width: 720px) {
      #creative-process .cp-container {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 25px 5%;
      }

      #creative-process .cp-intro { margin-bottom: 18px; }
      #creative-process .cp-visual { height: 245px; max-width: 440px; width: 100%; margin: auto; }
      #creative-process .cp-heading { font-size: clamp(26px, 5vw, 34px); }
      #creative-process .cp-step-title { font-size: 12px; }
      #creative-process .cp-icon-ring { width: 58px; height: 58px; }
      #creative-process .cp-track { top: 29px; }
      #creative-process .cp-step-arrow { top: 21px; }
    }

    @media (max-width: 480px) {
      #creative-process .cp-container { padding: 22px 16px; }
      #creative-process .cp-steps { gap: 5px; }
      #creative-process .cp-icon-ring {
        width: 43px;
        height: 43px;
        margin-bottom: 8px;
        box-shadow: 0 0 0 4px #020b0d;
      }

      #creative-process .cp-icon-ring svg { width: 23px; height: 23px; }
      #creative-process .cp-track { top: 21px; }
      #creative-process .cp-step-arrow { top: 14px; font-size: 17px; right: -4px; }
      #creative-process .cp-step-number { font-size: 9px; padding: 3px 4px; }
      #creative-process .cp-step-title { font-size: 10px; overflow-wrap: normal; }
      #creative-process .cp-visual { height: 220px; }
      #creative-process .cp-handwriting { font-size: 23px; }
      #creative-process .cp-bulb { width: 70px; height: 94px; right: 6%; }
      #creative-process .cp-brain { width: 43px; height: 43px; right: 33%; }
      #creative-process .cp-orbit { width: 52px; height: 52px; right: 30%; }
    }

    @media (prefers-reduced-motion: reduce) {
      #creative-process *,
      #creative-process *::before,
      #creative-process *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }
  #creative-portfolio {
      --cp-lime: #baff00;
      --cp-bg: #020d10;
      --cp-border: #16343a;
      --cp-white: #f5f7f8;
      --cp-muted: #c6d0d4;
      background:
        radial-gradient(ellipse at 70% 35%, #06202380, transparent 48%),
        var(--cp-bg);
      color: var(--cp-white);
      font-family: inherit;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      border-top: 2px solid var(--cp-lime);
    }

    #creative-portfolio * {
      box-sizing: border-box;
    }

    #creative-portfolio .cp-bg-waves {
      position: absolute;
      inset: auto 0 0;
      width: 100%;
      height: 54%;
      z-index: -1;
      opacity: .7;
      pointer-events: none;
    }

    #creative-portfolio .cp-bg-waves svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    #creative-portfolio .cp-shell {
      width: 100%;
      max-width: 1440px;
      min-height: 260px;
      margin: auto;
      padding: 24px 5.75% 25px;
      display: grid;
      grid-template-columns: minmax(220px, .82fr) minmax(0, 2.18fr);
      gap: 35px;
      align-items: center;
    }

    /* Left content */
    #creative-portfolio .cp-intro {
      align-self: start;
      padding-top: 1px;
    }

    #creative-portfolio .cp-eyebrow {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 7px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
      color: var(--cp-white);
    }

    #creative-portfolio .cp-eyebrow::before {
      content: "";
      display: inline-block;
      width: 25px;
      height: 5px;
      border-radius: 20px;
      background: var(--cp-lime);
      box-shadow: 0 0 9px #baff0030;
      flex-shrink: 0;
    }

    #creative-portfolio .cp-heading {
      font-size: clamp(24px, 2.25vw, 31px);
      line-height: 1.12;
      letter-spacing: -.8px;
      font-weight: 850;
      margin: 0 0 7px;
      color: var(--cp-white);
    }

    #creative-portfolio .cp-heading span {
      color: var(--cp-lime);
    }

    #creative-portfolio .cp-description {
      color: var(--cp-muted);
      font-size: 11px;
      line-height: 1.55;
      margin: 0;
      max-width: 390px;
    }

    #creative-portfolio .cp-all-projects {
      margin-top: 29px;
      min-height: 35px;
      display: inline-flex;
      align-items: center;
      gap: 15px;
      padding: 5px 10px 5px 17px;
      border-radius: 30px;
      background: var(--cp-lime);
      color: #081006;
      text-decoration: none;
      font-size: 10px;
      font-weight: 800;
      transition: transform .25s, box-shadow .25s, background .25s;
    }

    #creative-portfolio .cp-all-projects:hover {
      color: #081006;
      background: #d5ff6d;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px #baff0025;
    }

    #creative-portfolio .cp-btn-arrow {
      width: 18px;
      height: 18px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #071006;
      color: var(--cp-lime);
      font-size: 13px;
      transition: transform .25s;
    }

    #creative-portfolio .cp-all-projects:hover .cp-btn-arrow {
      transform: translateX(3px);
    }

    /* Slider */
    #creative-portfolio .cp-gallery {
      position: relative;
      min-width: 0;
      padding: 4px 0 23px;
    }

    #creative-portfolio .cp-viewport {
      overflow: hidden;
      width: 100%;
    }

    #creative-portfolio .cp-track {
      display: flex;
      gap: 17px;
      transition: transform .55s cubic-bezier(.22,.75,.25,1);
      will-change: transform;
    }

    #creative-portfolio .cp-project {
      flex: 0 0 calc((100% - 51px) / 4);
      min-width: 0;
      cursor: pointer;
      color: var(--cp-white);
      text-decoration: none;
      display: block;
      outline: none;
    }

    #creative-portfolio .cp-project:focus-visible .cp-image {
      outline: 2px solid var(--cp-lime);
      outline-offset: 3px;
    }

    #creative-portfolio .cp-image {
      position: relative;
      width: 100%;
      aspect-ratio: 1.24 / 1;
      border: 1px solid #29454a;
      border-radius: 6px;
      overflow: hidden;
      background: #081719;
      transition: border-color .3s, transform .3s, box-shadow .3s;
    }

    #creative-portfolio .cp-image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .55s cubic-bezier(.2,.7,.3,1);
    }

    #creative-portfolio .cp-project:hover .cp-image {
      border-color: var(--cp-lime);
      transform: translateY(-3px);
      box-shadow: 0 7px 20px #0005, 0 0 13px #baff0010;
    }

    #creative-portfolio .cp-project:hover .cp-image img {
      transform: scale(1.07);
    }

    #creative-portfolio .cp-image::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, transparent 60%, #0005);
    }

    #creative-portfolio .cp-project-title {
      font-size: 12px;
      line-height: 1.35;
      font-weight: 650;
      color: var(--cp-white);
      margin: 7px 0 3px;
      white-space: normal;
    }

    #creative-portfolio .cp-project-meta {
      font-size: 9px;
      line-height: 1.45;
      color: var(--cp-muted);
      margin: 0;
      white-space: normal;
    }

    #creative-portfolio .cp-project-meta span {
      color: var(--cp-lime);
    }

    /* Video play button */
    #creative-portfolio .cp-play {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      transform: translate(-50%, -50%);
      width: 37px;
      height: 37px;
      border-radius: 50%;
      border: 1px solid #ffffffa8;
      background: #0710129c;
      backdrop-filter: blur(5px);
      display: grid;
      place-items: center;
      color: white;
      transition: .25s ease;
    }

    #creative-portfolio .cp-play svg {
      width: 14px;
      height: 14px;
      margin-left: 2px;
      fill: currentColor;
    }

    #creative-portfolio .cp-project:hover .cp-play {
      background: var(--cp-lime);
      border-color: var(--cp-lime);
      color: #061007;
      transform: translate(-50%, -50%) scale(1.12);
    }

    /* Controls */
    #creative-portfolio .cp-nav {
      position: absolute;
      top: 37%;
      z-index: 3;
      width: 27px;
      height: 27px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid #263a40;
      background: #142329;
      color: white;
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
      padding: 0 0 2px;
      transition: .2s ease;
    }

    #creative-portfolio .cp-nav:hover {
      background: var(--cp-lime);
      border-color: var(--cp-lime);
      color: #081006;
    }

    #creative-portfolio .cp-prev { left: -33px; }
    #creative-portfolio .cp-next { right: -30px; }

    #creative-portfolio .cp-dots {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #creative-portfolio .cp-dot {
      width: 8px;
      height: 6px;
      border: 0;
      border-radius: 8px;
      background: #36464c;
      padding: 0;
      cursor: pointer;
      transition: width .3s, background .3s;
    }

    #creative-portfolio .cp-dot.active {
      width: 25px;
      background: var(--cp-lime);
      box-shadow: 0 0 9px #baff0028;
    }

    #creative-portfolio .cp-dot:focus-visible,
    #creative-portfolio .cp-nav:focus-visible {
      outline: 2px solid white;
      outline-offset: 3px;
    }

    @media (min-width: 1200px) {
      #creative-portfolio .cp-shell { min-height: 260px; }
    }

    @media (max-width: 1050px) {
      #creative-portfolio .cp-shell {
        grid-template-columns: minmax(205px, .8fr) minmax(0, 2fr);
        gap: 29px;
        padding-left: 5%;
        padding-right: 5%;
      }

      #creative-portfolio .cp-track { gap: 12px; }

      #creative-portfolio .cp-project {
        flex-basis: calc((100% - 36px) / 4);
      }

      #creative-portfolio .cp-prev { left: -25px; }
      #creative-portfolio .cp-next { right: -25px; }
      #creative-portfolio .cp-heading { font-size: 26px; }
    }

    @media (max-width: 760px) {
      #creative-portfolio .cp-shell {
        grid-template-columns: 1fr;
        gap: 23px;
        padding: 24px 6% 27px;
      }

      #creative-portfolio .cp-description { max-width: 480px; }
      #creative-portfolio .cp-all-projects { margin-top: 15px; }

      #creative-portfolio .cp-gallery {
        margin: 0 15px;
      }

      #creative-portfolio .cp-track { gap: 14px; }

      #creative-portfolio .cp-project {
        flex-basis: calc((100% - 28px) / 3);
      }

      #creative-portfolio .cp-nav { top: 34%; }
      #creative-portfolio .cp-prev { left: -31px; }
      #creative-portfolio .cp-next { right: -31px; }
    }

    @media (max-width: 520px) {
      #creative-portfolio .cp-shell {
        padding: 22px 18px 27px;
        gap: 19px;
      }

      #creative-portfolio .cp-heading {
        font-size: 27px;
      }

      #creative-portfolio .cp-gallery {
        margin: 0 14px;
      }

      #creative-portfolio .cp-track { gap: 12px; }

      #creative-portfolio .cp-project {
        flex-basis: calc((100% - 12px) / 2);
      }

      #creative-portfolio .cp-project-title { font-size: 12px; }
      #creative-portfolio .cp-project-meta { font-size: 10px; }
      #creative-portfolio .cp-nav { top: 34%; }
      #creative-portfolio .cp-prev { left: -28px; }
      #creative-portfolio .cp-next { right: -28px; }
    }

    @media (prefers-reduced-motion: reduce) {
      #creative-portfolio *,
      #creative-portfolio *::before,
      #creative-portfolio *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }

      #creative-partner-cta {
      --lime: #baff00;
      --bg: #03100e;
      --white: #f7f8f7;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border-top: 2px solid var(--lime);
      background: #03100e;
      color: var(--white);
      font-family: inherit;
    }

    #creative-partner-cta * {
      box-sizing: border-box;
    }

    #creative-partner-cta .cpc-bg {
      position: absolute;
      inset: 0;
      z-index: -3;
      background:
        radial-gradient(ellipse at 76% 65%, #4d790c35, transparent 34%),
        linear-gradient(100deg, #020c0e 0%, #061713 55%, #10220c 100%);
    }

    #creative-partner-cta .cpc-glow {
      position: absolute;
      z-index: -2;
      width: 40%;
      height: 120%;
      right: 0;
      top: -40%;
      background: #baff0010;
      filter: blur(35px);
      transform: rotate(-15deg);
      pointer-events: none;
    }

    #creative-partner-cta .cpc-mountains {
      position: absolute;
      inset: auto 0 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      pointer-events: none;
      opacity: .8;
    }

    #creative-partner-cta .cpc-mountains svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    #creative-partner-cta .cpc-inner {
      max-width: 1440px;
      min-height: 150px;
      margin: auto;
      padding: 19px 5.75%;
      display: grid;
      grid-template-columns: minmax(260px, 1.65fr) minmax(340px, 1.7fr) auto;
      gap: 25px;
      align-items: center;
    }

    /* Heading */
    #creative-partner-cta .cpc-intro {
      min-width: 0;
    }

    #creative-partner-cta .cpc-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
      margin: 0 0 8px;
    }

    #creative-partner-cta .cpc-label::before {
      content: "";
      width: 25px;
      height: 5px;
      border-radius: 20px;
      background: var(--lime);
      box-shadow: 0 0 10px #baff0030;
      flex-shrink: 0;
    }

    #creative-partner-cta .cpc-heading {
      margin: 0;
      font-size: clamp(23px, 2.2vw, 30px);
      line-height: 1.2;
      font-weight: 850;
      letter-spacing: -.7px;
      color: var(--white);
    }

    #creative-partner-cta .cpc-heading span {
      color: var(--lime);
      display: block;
    }

    /* Benefits */
    #creative-partner-cta .cpc-benefits {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
      min-width: 0;
    }

    #creative-partner-cta .cpc-benefit {
      min-width: 0;
      min-height: 76px;
      padding: 0 9px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      text-align: center;
      border-right: 1px solid #9acb1c23;
      transition: background .3s ease;
    }

    #creative-partner-cta .cpc-benefit:last-child {
      border-right: 0;
    }

    #creative-partner-cta .cpc-benefit:hover {
      background: #baff0008;
    }

    #creative-partner-cta .cpc-icon {
      width: 29px;
      height: 29px;
      color: var(--lime);
      filter: drop-shadow(0 0 5px #baff0025);
      animation: cpcIconFloat 3s ease-in-out infinite;
    }

    #creative-partner-cta .cpc-benefit:nth-child(2) .cpc-icon {
      animation-delay: -.5s;
    }

    #creative-partner-cta .cpc-benefit:nth-child(3) .cpc-icon {
      animation-delay: -1s;
    }

    #creative-partner-cta .cpc-benefit:nth-child(4) .cpc-icon {
      animation-delay: -1.5s;
    }

    #creative-partner-cta .cpc-icon svg {
      display: block;
      width: 100%;
      height: 100%;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.1;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #creative-partner-cta .cpc-benefit-text {
      color: var(--white);
      font-size: 11px;
      line-height: 1.3;
      font-weight: 500;
      margin: 0;
    }

    /* CTA */
    #creative-partner-cta .cpc-action {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    #creative-partner-cta .cpc-button {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 13px;
      min-height: 39px;
      padding: 6px 10px 6px 18px;
      border-radius: 28px;
      background: var(--lime);
      border: 1px solid var(--lime);
      color: #081006;
      font-size: 11px;
      font-weight: 800;
      text-decoration: none;
      white-space: nowrap;
      transition: transform .25s ease, box-shadow .25s ease,
                  background .25s ease;
    }

    #creative-partner-cta .cpc-button:hover {
      color: #081006;
      background: #d6ff72;
      transform: translateY(-2px);
      box-shadow: 0 7px 22px #baff0035;
    }

    #creative-partner-cta .cpc-arrow {
      width: 21px;
      height: 21px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--lime);
      background: #071006;
      font-size: 14px;
      transition: transform .25s ease;
    }

    #creative-partner-cta .cpc-button:hover .cpc-arrow {
      transform: translateX(3px);
    }

    /* Animated green landscape lines */
    #creative-partner-cta .cpc-wave {
      stroke-dasharray: 9 8;
      animation: cpcWaveMove 16s linear infinite;
    }

    #creative-partner-cta .cpc-spark {
      transform-box: fill-box;
      transform-origin: center;
      animation: cpcSparkPulse 3s ease-in-out infinite;
    }

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

    @keyframes cpcWaveMove {
      to { stroke-dashoffset: -180; }
    }

    @keyframes cpcSparkPulse {
      0%, 100% { opacity: .4; transform: scale(.85); }
      50% { opacity: 1; transform: scale(1.1); }
    }

    @media (min-width: 1200px) {
      #creative-partner-cta .cpc-inner {
        min-height: 150px;
      }
    }

    @media (max-width: 1050px) {
      #creative-partner-cta .cpc-inner {
        grid-template-columns: minmax(220px, 1.2fr) minmax(320px, 1.6fr);
        gap: 20px;
        padding-left: 4%;
        padding-right: 4%;
      }

      #creative-partner-cta .cpc-action {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-top: -5px;
      }

      #creative-partner-cta .cpc-heading {
        font-size: 25px;
      }
    }

    @media (max-width: 680px) {
      #creative-partner-cta .cpc-inner {
        grid-template-columns: 1fr;
        gap: 19px;
        padding: 24px 5%;
      }

      #creative-partner-cta .cpc-heading {
        font-size: 28px;
      }

      #creative-partner-cta .cpc-benefits {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      #creative-partner-cta .cpc-benefit {
        padding: 0 4px;
        min-height: 75px;
      }

      #creative-partner-cta .cpc-benefit-text {
        font-size: 10px;
      }

      #creative-partner-cta .cpc-action {
        grid-column: auto;
        justify-content: flex-start;
        margin-top: 0;
      }
    }

    @media (max-width: 420px) {
      #creative-partner-cta .cpc-inner {
        padding: 22px 16px;
      }

      #creative-partner-cta .cpc-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      #creative-partner-cta .cpc-benefit {
        min-height: 83px;
        border: 1px solid #9acb1c23;
        border-radius: 8px;
        background: #03110f80;
      }

      #creative-partner-cta .cpc-benefit-text {
        font-size: 11px;
      }

      #creative-partner-cta .cpc-icon {
        width: 28px;
        height: 28px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #creative-partner-cta *,
      #creative-partner-cta *::before,
      #creative-partner-cta *::after {
        animation: none !important;
        transition: none !important;
      }
    }
    
    #dm-advanced{
  --lime:#baff00;
  --bg:#020d10;
  --line:#194047;
  --white:#f5f8f7;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--bg);
  color:var(--white);
  font-family:inherit;
  border-block:1px solid #16434a;
}
#dm-advanced *{box-sizing:border-box}
#dm-advanced .da-bg{
  position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(ellipse at 65% 48%,#baff0014,transparent 30%),
    radial-gradient(ellipse at 90% 10%,#0c777140,transparent 32%),
    linear-gradient(105deg,#02090c,#031515 60%,#07150c);
}
#dm-advanced .da-grid{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(#74c93b10 1px,transparent 1px),
    linear-gradient(90deg,#74c93b10 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(90deg,transparent,black 38%,black 92%,transparent);
}
#dm-advanced .da-light{
  position:absolute;z-index:-1;pointer-events:none;
  width:240px;height:240px;border-radius:50%;
  background:#baff0010;filter:blur(65px);
  left:56%;top:8%;
  animation:daLight 8s ease-in-out infinite alternate;
}
#dm-advanced .da-inner{
  width:100%;max-width:1440px;margin:auto;
  padding:28px 5.8%;
  min-height:310px;
  display:grid;
  grid-template-columns:minmax(260px,.94fr) minmax(0,1.55fr);
  align-items:center;gap:28px;
}

/* LEFT CONTENT */
#dm-advanced .da-copy{position:relative;z-index:2}
#dm-advanced .da-kicker{
  display:flex;align-items:center;gap:9px;
  font-size:9px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;margin:0 0 10px;
}
#dm-advanced .da-kicker:before{
  content:"";width:26px;height:5px;border-radius:9px;
  background:var(--lime);box-shadow:0 0 14px #baff0055;
}
#dm-advanced .da-title{
  color:var(--white);font-size:clamp(27px,3vw,40px);
  line-height:1.08;font-weight:850;letter-spacing:-1px;
  margin:0;
}
#dm-advanced .da-title span{display:block;color:var(--lime);margin-top:3px}
#dm-advanced .da-subtitle{
  font-size:15px;font-weight:750;line-height:1.4;
  margin:12px 0;color:#f4f7f7;
}
#dm-advanced .da-description{
  max-width:430px;font-size:11.5px;line-height:1.7;
  color:#c4d0d0;margin:0;
}
#dm-advanced .da-actions{
  display:flex;flex-wrap:wrap;gap:11px;margin-top:20px;
}
#dm-advanced .da-btn{
  min-height:38px;display:inline-flex;align-items:center;
  justify-content:space-between;gap:12px;
  padding:6px 10px 6px 16px;border-radius:28px;
  background:var(--lime);border:1px solid var(--lime);
  color:#091006;text-decoration:none;font-size:10px;
  font-weight:800;white-space:nowrap;transition:.3s ease;
}
#dm-advanced .da-btn:hover{
  color:#091006;background:#dcff86;transform:translateY(-3px);
  box-shadow:0 7px 25px #baff0038;
}
#dm-advanced .da-arrow{
  width:20px;height:20px;display:grid;place-items:center;
  border-radius:50%;background:#081006;color:var(--lime);
  transition:transform .3s;
}
#dm-advanced .da-btn:hover .da-arrow{transform:translateX(3px)}
#dm-advanced .da-outline{
  background:transparent;color:var(--white);border-color:#a9bbbb;
}
#dm-advanced .da-outline:hover{
  background:#ffffff08;color:var(--lime);border-color:var(--lime);
  box-shadow:none;
}

/* INFOGRAPHIC LAYOUT */
#dm-advanced .da-visual{
  position:relative;min-width:0;min-height:270px;
  display:grid;grid-template-columns:94px minmax(0,1fr) 94px;
  align-items:center;gap:10px;
}
#dm-advanced .da-nodes{
  position:relative;z-index:4;display:flex;flex-direction:column;gap:9px;
}
#dm-advanced .da-node{
  position:relative;display:flex;align-items:center;gap:7px;
  min-height:49px;padding:7px;
  border:1px solid #496b18;border-radius:9px;
  background:linear-gradient(130deg,#0b211d,#06100f);
  box-shadow:inset 0 0 15px #baff0008,0 0 15px #baff0008;
  transition:transform .3s,border-color .3s,box-shadow .3s;
  animation:daNodeFloat 4s ease-in-out infinite;
}
#dm-advanced .da-node:nth-child(2){animation-delay:-1s}
#dm-advanced .da-node:nth-child(3){animation-delay:-2s}
#dm-advanced .da-node:nth-child(4){animation-delay:-3s}
#dm-advanced .da-node:hover{
  transform:translateY(-3px) scale(1.035);
  border-color:var(--lime);
  box-shadow:0 0 20px #baff0025,inset 0 0 15px #baff000c;
}
#dm-advanced .da-ico{
  flex:0 0 26px;width:26px;height:26px;color:var(--lime);
  filter:drop-shadow(0 0 5px #baff0040);
}
#dm-advanced .da-ico svg{
  display:block;width:100%;height:100%;fill:none;
  stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}
#dm-advanced .da-node-label{
  font-size:9px;line-height:1.25;font-weight:700;color:#f5f7f7;
}

/* CENTRAL DASHBOARD */
#dm-advanced .da-core{position:relative;min-width:0;z-index:3}
#dm-advanced .da-halo{
  position:absolute;inset:-13px -8px;border-radius:20px;
  border:1px solid #baff0015;pointer-events:none;
  animation:daHalo 4s ease-in-out infinite;
}
#dm-advanced .da-dashboard{
  position:relative;overflow:hidden;border-radius:12px;
  border:1px solid #587d20;
  background:linear-gradient(145deg,#092522,#031010 75%);
  box-shadow:0 0 28px #baff0012,0 18px 40px #0008;
  transition:transform .4s,box-shadow .4s;
}
#dm-advanced .da-dashboard:hover{
  transform:translateY(-4px);
  box-shadow:0 0 35px #baff0025,0 18px 40px #0009;
}
#dm-advanced .da-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:28px;padding:0 10px;
  background:#0b211e;border-bottom:1px solid #1c4238;
  color:#c8d8d1;font-size:8px;
}
#dm-advanced .da-dots{display:flex;gap:4px}
#dm-advanced .da-dots i{
  width:5px;height:5px;border-radius:50%;background:var(--lime);
}
#dm-advanced .da-live{display:flex;align-items:center;gap:5px;color:var(--lime)}
#dm-advanced .da-live:before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 9px var(--lime);
  animation:daPulse 1.2s infinite;
}
#dm-advanced .da-content{padding:12px}
#dm-advanced .da-metrics{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;
}
#dm-advanced .da-metric{
  padding:7px 6px;border:1px solid #204239;
  border-radius:6px;background:#0a1b19;
  min-width:0;
}
#dm-advanced .da-metric small{
  display:block;font-size:7px;color:#9db3a9;margin-bottom:5px;
}
#dm-advanced .da-metric strong{
  font-size:13px;color:var(--lime);line-height:1.1;
}
#dm-advanced .da-metric em{
  display:block;font-size:7px;color:#b9d2ac;font-style:normal;margin-top:3px;
}
#dm-advanced .da-chart-wrap{position:relative;margin-top:10px}
#dm-advanced .da-chart-title{
  display:flex;justify-content:space-between;align-items:center;
  color:#dce8df;font-size:8px;margin-bottom:4px;
}
#dm-advanced .da-chart-title b{color:var(--lime);font-weight:700}
#dm-advanced .da-chart{
  width:100%;height:95px;display:block;overflow:visible;
}
#dm-advanced .da-chart-grid{
  stroke:#8ebf70;stroke-opacity:.15;stroke-width:.7;stroke-dasharray:3 4;
}
#dm-advanced .da-chart-area{fill:url(#daFill);opacity:.5}
#dm-advanced .da-chart-path{
  fill:none;stroke:var(--lime);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:450;stroke-dashoffset:450;
  animation:daDraw 2.6s ease forwards;
}
#dm-advanced .da-data-point{
  fill:var(--lime);stroke:#071511;stroke-width:2;
  transform-box:fill-box;transform-origin:center;
  animation:daPoint 2s ease-in-out infinite;
}
#dm-advanced .da-bars{
  display:flex;align-items:end;justify-content:space-between;
  gap:5px;height:43px;margin-top:8px;padding:0 4px;
  border-bottom:1px solid #34503a;
}
#dm-advanced .da-bar{
  flex:1;min-width:3px;max-width:18px;position:relative;
  height:var(--h);border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#caff20,#528b09);
  box-shadow:0 0 9px #baff0018;
  transform-origin:bottom;
  animation:daBarRise 1.5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:var(--delay);
}
#dm-advanced .da-bar:after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:#edffb2;opacity:.8;
}
#dm-advanced .da-channel-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:5px;margin-top:9px;padding-top:8px;
  border-top:1px solid #1b4038;
}
#dm-advanced .da-channel{
  display:grid;place-items:center;width:24px;height:24px;
  border-radius:6px;border:1px solid #315044;
  background:#0c2824;color:var(--lime);
  font-size:10px;font-weight:850;
  transition:transform .25s,background .25s;
}
#dm-advanced .da-channel:hover{transform:translateY(-3px);background:#25431d}
#dm-advanced .da-result{
  display:flex;align-items:center;justify-content:space-between;gap:5px;
  padding:7px 8px;margin-top:8px;border:1px solid #3d601c;
  border-radius:6px;background:#9acb0c0b;
  color:#d6e5d4;font-size:8px;
}
#dm-advanced .da-result strong{color:var(--lime)}

/* PARTICLES AND CONNECTIONS */
#dm-advanced .da-connections{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;overflow:visible;pointer-events:none;
}
#dm-advanced .da-wire{
  fill:none;stroke:#baff00;stroke-width:1;
  stroke-opacity:.6;stroke-dasharray:4 6;
  animation:daWire 8s linear infinite;
}
#dm-advanced .da-particle{
  fill:var(--lime);filter:drop-shadow(0 0 4px var(--lime));
}
#dm-advanced .da-particle.p1{animation:daTravel1 5s ease-in-out infinite}
#dm-advanced .da-particle.p2{animation:daTravel2 4s ease-in-out infinite}
#dm-advanced .da-particle.p3{animation:daTravel3 6s ease-in-out infinite}
#dm-advanced .da-orbit{
  position:absolute;z-index:1;pointer-events:none;
  width:68px;height:68px;right:7%;top:2%;
  border:1px dashed #baff003a;border-radius:50%;
  animation:daOrbit 15s linear infinite;
}
#dm-advanced .da-orbit:before{
  content:"";position:absolute;top:8px;left:7px;
  width:5px;height:5px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 10px var(--lime);
}
#dm-advanced .da-orbit:after{
  content:"";position:absolute;bottom:10px;right:2px;
  width:3px;height:3px;border-radius:50%;
  background:#e7ff9e;box-shadow:0 0 8px var(--lime);
}
#dm-advanced .da-scan{
  position:absolute;z-index:2;top:29px;left:0;right:0;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#baff0075,transparent);
  box-shadow:0 0 8px #baff0020;
  animation:daScan 5s linear infinite;
}
#dm-advanced .da-spark{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 8px var(--lime);
  animation:daSpark 3s ease-in-out infinite;
}
#dm-advanced .da-spark.s1{top:12%;left:45%}
#dm-advanced .da-spark.s2{top:76%;left:53%;animation-delay:-1s}
#dm-advanced .da-spark.s3{top:28%;right:3%;animation-delay:-2s}

@keyframes daNodeFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -4px}
}
@keyframes daPulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes daWire{to{stroke-dashoffset:-120}}
@keyframes daDraw{to{stroke-dashoffset:0}}
@keyframes daBarRise{from{transform:scaleY(.08);opacity:.3}to{transform:scaleY(1);opacity:1}}
@keyframes daPoint{0%,100%{transform:scale(.8);opacity:.65}50%{transform:scale(1.3);opacity:1}}
@keyframes daHalo{0%,100%{opacity:.4;transform:scale(.99)}50%{opacity:1;transform:scale(1.015)}}
@keyframes daLight{from{transform:translate(-20px,0)}to{transform:translate(50px,25px)}}
@keyframes daOrbit{to{transform:rotate(360deg)}}
@keyframes daScan{
  0%{top:28px;opacity:0}
  10%{opacity:.8}
  85%{opacity:.5}
  100%{top:95%;opacity:0}
}
@keyframes daSpark{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.5)}}
@keyframes daTravel1{0%{transform:translate(0,0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translate(95px,65px);opacity:0}}
@keyframes daTravel2{0%{transform:translate(0,0);opacity:0}25%{opacity:1}80%{opacity:1}100%{transform:translate(-90px,-45px);opacity:0}}
@keyframes daTravel3{0%{transform:translate(0,0);opacity:0}25%{opacity:1}80%{opacity:1}100%{transform:translate(75px,-65px);opacity:0}}

@media(max-width:1050px){
  #dm-advanced .da-inner{
    grid-template-columns:minmax(235px,.85fr) minmax(0,1.25fr);
    gap:20px;padding-inline:4%;
  }
  #dm-advanced .da-visual{
    grid-template-columns:76px minmax(0,1fr) 76px;gap:7px;
  }
  #dm-advanced .da-node{padding:6px;gap:5px}
  #dm-advanced .da-ico{flex-basis:22px;width:22px;height:22px}
  #dm-advanced .da-node-label{font-size:8px}
  #dm-advanced .da-title{font-size:30px}
}
@media(max-width:760px){
  #dm-advanced .da-inner{
    grid-template-columns:1fr;padding:25px 5%;gap:24px;
  }
  #dm-advanced .da-title{font-size:34px}
  #dm-advanced .da-description{max-width:560px}
  #dm-advanced .da-visual{
    min-height:260px;
    grid-template-columns:minmax(78px,.7fr) minmax(0,1.6fr) minmax(78px,.7fr);
    gap:9px;
  }
  #dm-advanced .da-node{min-height:47px}
  #dm-advanced .da-node-label{font-size:9px}
  #dm-advanced .da-ico{width:24px;height:24px;flex-basis:24px}
}
@media(max-width:480px){
  #dm-advanced .da-inner{padding:22px 15px;gap:20px}
  #dm-advanced .da-title{font-size:29px}
  #dm-advanced .da-subtitle{font-size:14px}
  #dm-advanced .da-description{font-size:12px}
  #dm-advanced .da-visual{
    grid-template-columns:minmax(62px,.7fr) minmax(0,1.6fr) minmax(62px,.7fr);
    gap:5px;min-height:220px;
  }
  #dm-advanced .da-nodes{gap:7px}
  #dm-advanced .da-node{min-height:42px;padding:4px;gap:4px;border-radius:7px}
  #dm-advanced .da-ico{width:18px;height:18px;flex-basis:18px}
  #dm-advanced .da-node-label{font-size:7.5px}
  #dm-advanced .da-content{padding:7px}
  #dm-advanced .da-topbar{font-size:7px;min-height:24px}
  #dm-advanced .da-metric{padding:6px 4px}
  #dm-advanced .da-metric strong{font-size:11px}
  #dm-advanced .da-metric small,#dm-advanced .da-metric em{font-size:6px}
  #dm-advanced .da-chart{height:76px}
  #dm-advanced .da-bars{height:32px}
  #dm-advanced .da-channel{width:20px;height:20px;font-size:8px}
  #dm-advanced .da-result{font-size:7px;padding:6px}
  #dm-advanced .da-orbit{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  #dm-advanced *,#dm-advanced *:before,#dm-advanced *:after{
    animation:none!important;transition:none!important;
  }
}

#dm-why-choose{
  --lime:#baff00;
  --cyan:#07505b;
  --bg:#020d10;
  --white:#f5f7f8;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 75% 50%,#07302c36,transparent 48%),
    linear-gradient(105deg,#020b0e,#021012 60%,#020a0c);
  color:var(--white);
  font-family:inherit;
  border-top:1px solid #94bd00;
  border-bottom:1px solid #14373b;
}
#dm-why-choose *{box-sizing:border-box}
#dm-why-choose:before{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,#baff0005 50%,transparent 75%);
  animation:dmwc-shimmer 9s linear infinite;
}
#dm-why-choose .dmwc-inner{
  max-width:1440px;
  margin:auto;
  padding:27px 6%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  align-items:center;
  gap:clamp(25px,5vw,75px);
}
#dm-why-choose .dmwc-copy{min-width:0}
#dm-why-choose .dmwc-label{
  display:flex;align-items:center;gap:9px;
  font-size:9px;font-weight:800;letter-spacing:.65px;
  margin:0 0 10px;text-transform:uppercase;
}
#dm-why-choose .dmwc-label:before{
  content:"";width:24px;height:5px;border-radius:10px;
  background:var(--lime);
  box-shadow:0 0 10px #baff0055;
}
#dm-why-choose .dmwc-title{
  color:var(--white);font-size:clamp(24px,2.5vw,34px);
  line-height:1.12;font-weight:800;letter-spacing:-.65px;
  margin:0 0 9px;
}
#dm-why-choose .dmwc-title span{
  display:block;color:var(--lime);
}
#dm-why-choose .dmwc-description{
  font-size:12px;line-height:1.58;
  color:#d2dada;max-width:430px;margin:0;
}
#dm-why-choose .dmwc-description em{
  color:var(--lime);font-style:normal;
}
#dm-why-choose .dmwc-cta{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:16px;padding:8px 10px 8px 18px;
  min-height:34px;border-radius:25px;
  background:var(--lime);color:#091005;
  font-size:10px;font-weight:800;text-decoration:none;
  transition:transform .25s,box-shadow .25s;
}
#dm-why-choose .dmwc-cta:hover{
  color:#091005;transform:translateY(-3px);
  box-shadow:0 7px 22px #baff0030;
}
#dm-why-choose .dmwc-arrow{
  width:19px;height:19px;display:grid;place-items:center;
  background:#071006;color:var(--lime);
  border-radius:50%;font-size:14px;
  transition:transform .25s;
}
#dm-why-choose .dmwc-cta:hover .dmwc-arrow{
  transform:translateX(3px);
}

/* BENEFIT CARDS */
#dm-why-choose .dmwc-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
#dm-why-choose .dmwc-card{
  position:relative;isolation:isolate;overflow:hidden;
  min-width:0;min-height:87px;
  display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:7px;
  padding:11px 12px;
  border:1px solid #07505b;
  border-radius:11px;
  background:linear-gradient(140deg,#031317,#020c0f 75%);
  transition:border-color .3s,transform .3s,box-shadow .3s;
  animation:dmwc-enter .65s both;
  animation-delay:var(--delay,0s);
}
#dm-why-choose .dmwc-card:before{
  content:"";position:absolute;z-index:-1;
  width:70px;height:70px;right:-35px;top:-35px;
  border-radius:50%;background:#baff0010;
  transition:transform .4s,background .4s;
}
#dm-why-choose .dmwc-card:after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;
  height:1px;background:var(--lime);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s;
}
#dm-why-choose .dmwc-card:hover{
  transform:translateY(-4px);
  border-color:#739b19;
  box-shadow:0 9px 22px #0004,0 0 17px #baff000b;
}
#dm-why-choose .dmwc-card:hover:before{
  transform:scale(2.1);background:#baff0018;
}
#dm-why-choose .dmwc-card:hover:after{transform:scaleX(1)}
#dm-why-choose .dmwc-icon{
  width:28px;height:28px;
  display:block;color:var(--lime);
  filter:drop-shadow(0 0 5px #baff0020);
  transition:transform .35s,filter .35s;
}
#dm-why-choose .dmwc-card:hover .dmwc-icon{
  transform:scale(1.12) rotate(-4deg);
  filter:drop-shadow(0 0 8px #baff0070);
}
#dm-why-choose .dmwc-icon svg{
  width:100%;height:100%;display:block;
  fill:none;stroke:currentColor;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round;
}
#dm-why-choose .dmwc-card-title{
  color:#f1f6f5;font-size:11px;font-weight:500;
  line-height:1.32;position:relative;z-index:1;
}

/* Subtle moving glow */
#dm-why-choose .dmwc-glow{
  position:absolute;pointer-events:none;
  width:190px;height:190px;border-radius:50%;
  background:#baff0009;filter:blur(45px);
  left:52%;top:10%;z-index:-1;
  animation:dmwc-float 7s ease-in-out infinite alternate;
}
@keyframes dmwc-enter{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes dmwc-float{
  from{translate:-15px 0}
  to{translate:25px 18px}
}
@keyframes dmwc-shimmer{
  from{transform:translateX(-70%)}
  to{transform:translateX(70%)}
}

@media(min-width:1400px){
  #dm-why-choose .dmwc-inner{padding-top:30px;padding-bottom:30px}
}
@media(max-width:1000px){
  #dm-why-choose .dmwc-inner{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:25px;padding-inline:4%;
  }
  #dm-why-choose .dmwc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #dm-why-choose .dmwc-card{min-height:76px}
  #dm-why-choose .dmwc-title{font-size:27px}
}
@media(max-width:650px){
  #dm-why-choose .dmwc-inner{
    grid-template-columns:1fr;gap:22px;padding:24px 20px;
  }
  #dm-why-choose .dmwc-title{font-size:29px}
  #dm-why-choose .dmwc-description{font-size:12px;max-width:520px}
  #dm-why-choose .dmwc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #dm-why-choose .dmwc-card{min-height:82px;padding:11px 13px}
}
@media(max-width:360px){
  #dm-why-choose .dmwc-inner{padding-inline:14px}
  #dm-why-choose .dmwc-card{padding:9px;min-height:78px}
  #dm-why-choose .dmwc-icon{width:25px;height:25px}
  #dm-why-choose .dmwc-card-title{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  #dm-why-choose *,#dm-why-choose:before{
    animation:none!important;transition:none!important;
  }
}

#wow-dm-services{
 --lime:#baff00;--cyan:#07515b;--bg:#020c0f;--white:#f5f8f7;
 position:relative;isolation:isolate;overflow:hidden;
 background:linear-gradient(105deg,#020b0e 0%,#021012 62%,#06150d 100%);
 color:var(--white);font-family:inherit;
 border-top:2px solid #a8df00;border-bottom:1px solid #123b3b;
}
#wow-dm-services *{box-sizing:border-box}
#wow-dm-services .ws-bg{
 position:absolute;inset:0;z-index:-2;pointer-events:none;
 background:
 radial-gradient(ellipse at 88% 65%,#baff0020,transparent 30%),
 radial-gradient(ellipse at 68% 15%,#00b8a516,transparent 35%);
}
#wow-dm-services .ws-gridbg{
 position:absolute;inset:0;z-index:-1;pointer-events:none;
 background-image:linear-gradient(#baff0008 1px,transparent 1px),
 linear-gradient(90deg,#baff0008 1px,transparent 1px);
 background-size:30px 30px;
 mask-image:linear-gradient(90deg,transparent 30%,#000 100%);
}
#wow-dm-services .ws-inner{
 max-width:1440px;margin:auto;padding:23px 6%;
 display:grid;grid-template-columns:minmax(0,1.55fr) minmax(230px,.85fr);
 align-items:center;gap:20px;
}
#wow-dm-services .ws-main{min-width:0;position:relative;z-index:3}
#wow-dm-services .ws-kicker{
 display:flex;align-items:center;gap:8px;margin:0 0 7px;
 color:#f4f8f5;font-size:9px;font-weight:800;
 text-transform:uppercase;letter-spacing:.5px;
}
#wow-dm-services .ws-kicker:before{
 content:"";width:24px;height:5px;border-radius:9px;
 background:var(--lime);box-shadow:0 0 12px #baff0050;
}
#wow-dm-services .ws-heading{
 color:var(--white);font-size:clamp(24px,2.25vw,32px);
 font-weight:850;letter-spacing:-.7px;line-height:1.15;
 margin:0 0 4px;
}
#wow-dm-services .ws-heading span{color:var(--lime)}
#wow-dm-services .ws-intro{
 margin:0 0 12px;color:#d0dddd;font-size:11.5px;
 line-height:1.55;max-width:470px;
}
#wow-dm-services .ws-cards{
 display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
}
#wow-dm-services .ws-card{
 position:relative;isolation:isolate;overflow:hidden;
 min-width:0;min-height:86px;padding:10px 12px;
 display:flex;flex-direction:column;align-items:flex-start;
 justify-content:center;gap:5px;
 border:1px solid #07505b;border-radius:11px;
 background:linear-gradient(140deg,#031619,#020c0f 80%);
 text-decoration:none;color:var(--white);
 transition:transform .3s,border-color .3s,box-shadow .3s;
 animation:wsAppear .7s both;
 animation-delay:var(--delay,0s);
}
#wow-dm-services .ws-card:before{
 content:"";position:absolute;z-index:-1;
 top:-45px;right:-40px;width:85px;height:85px;
 border-radius:50%;background:#baff000a;
 transition:transform .4s,background .4s;
}
#wow-dm-services .ws-card:after{
 content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;
 background:var(--lime);transform:scaleX(0);transform-origin:left;
 transition:transform .3s;
}
#wow-dm-services .ws-card:hover{
 transform:translateY(-5px);
 border-color:#8eae27;
 box-shadow:0 8px 22px #0005,0 0 18px #baff0010;
}
#wow-dm-services .ws-card:hover:before{
 transform:scale(2);background:#baff001b;
}
#wow-dm-services .ws-card:hover:after{transform:scaleX(1)}
#wow-dm-services .ws-icon{
 width:29px;height:29px;display:block;color:var(--lime);
 filter:drop-shadow(0 0 5px #baff0025);
 transition:transform .35s,filter .35s;
}
#wow-dm-services .ws-card:hover .ws-icon{
 transform:scale(1.13) rotate(-5deg);
 filter:drop-shadow(0 0 8px #baff0080);
}
#wow-dm-services .ws-icon svg{
 display:block;width:100%;height:100%;fill:none;stroke:currentColor;
 stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;
}
#wow-dm-services .ws-name{
 font-size:10.5px;font-weight:650;line-height:1.28;
 position:relative;z-index:1;
}
#wow-dm-services .ws-note{
 font-size:8.5px;line-height:1.3;color:#bdd0cf;
}
#wow-dm-services .ws-socials{display:flex;gap:4px;margin-bottom:1px}
#wow-dm-services .ws-socials span{
 width:18px;height:18px;display:grid;place-items:center;
 border:1px solid #476a37;border-radius:50%;
 font-size:10px;font-weight:800;color:#f4f8f3;
 background:#071c19;
}
#wow-dm-services .ws-socials span:nth-child(1){color:#baff00}
#wow-dm-services .ws-socials span:nth-child(2){color:#ff9a65}
#wow-dm-services .ws-socials span:nth-child(3){color:#65bfff}
#wow-dm-services .ws-socials span:nth-child(4){color:#fff}

/* TARGET INFOGRAPHIC */
#wow-dm-services .ws-art{
 min-width:0;position:relative;height:255px;
 display:grid;place-items:center;
 perspective:700px;
}
#wow-dm-services .ws-art:before{
 content:"";position:absolute;width:80%;height:70%;
 border-radius:50%;background:#baff0014;filter:blur(35px);
 animation:wsGlow 4s ease-in-out infinite alternate;
}
#wow-dm-services .ws-art svg.ws-scene{
 position:absolute;inset:0;width:100%;height:100%;overflow:visible;
}
#wow-dm-services .ws-growth-path{
 fill:none;stroke:#baff00;stroke-width:2;
 stroke-dasharray:6 8;animation:wsDash 8s linear infinite;
}
#wow-dm-services .ws-growth-line{
 fill:none;stroke:#7fb600;stroke-width:2.5;
 stroke-linecap:round;stroke-linejoin:round;
 stroke-dasharray:250;stroke-dashoffset:250;
 animation:wsDraw 2s .4s ease-out forwards;
}
#wow-dm-services .ws-growth-point{
 fill:var(--lime);filter:drop-shadow(0 0 5px #baff00);
 animation:wsBlink 1.5s infinite;
}
#wow-dm-services .ws-target{
 position:relative;width:190px;height:190px;z-index:2;
 transform:rotate(-12deg);
 animation:wsTargetFloat 5s ease-in-out infinite;
}
#wow-dm-services .ws-target svg{width:100%;height:100%;overflow:visible}
#wow-dm-services .ws-ring{
 transform-origin:100px 100px;
 animation:wsRingPulse 3s ease-in-out infinite;
}
#wow-dm-services .ws-ring.r2{animation-delay:.5s}
#wow-dm-services .ws-ring.r3{animation-delay:1s}
#wow-dm-services .ws-target-glow{
 fill:none;stroke:#baff00;stroke-width:2;
 filter:drop-shadow(0 0 8px #baff00);
}
#wow-dm-services .ws-arrow-art{
 position:absolute;width:155px;height:30px;z-index:4;
 left:47%;top:38%;transform:rotate(-42deg);
 transform-origin:12px 15px;
 filter:drop-shadow(0 0 6px #baff0080);
 animation:wsArrowHit 3.5s 1s cubic-bezier(.2,.7,.2,1) infinite;
}
#wow-dm-services .ws-arrow-art svg{width:100%;height:100%;overflow:visible}
#wow-dm-services .ws-handwrite{
 position:absolute;right:0;top:3px;z-index:4;
 color:var(--lime);font-size:clamp(14px,1.7vw,21px);
 font-weight:700;font-style:italic;line-height:1.08;
 transform:rotate(-9deg);
 text-shadow:0 0 12px #baff0025;
 animation:wsTextFloat 4s ease-in-out infinite;
}
#wow-dm-services .ws-handwrite:after{
 content:"";display:block;width:100%;height:3px;margin-top:5px;
 background:var(--lime);transform:skewY(-13deg);
 box-shadow:0 0 10px #baff0055;
}
#wow-dm-services .ws-mini-bars{
 position:absolute;right:2%;bottom:7%;height:70px;
 display:flex;align-items:end;gap:5px;z-index:1;
 opacity:.7;
}
#wow-dm-services .ws-mini-bars i{
 display:block;width:9px;height:var(--h);
 border:1px solid #9bc900;border-bottom:0;
 background:linear-gradient(0deg,#baff0010,#baff0050);
 transform-origin:bottom;
 animation:wsBar 2s ease-in-out infinite alternate;
 animation-delay:var(--delay);
}
#wow-dm-services .ws-particle{
 position:absolute;width:4px;height:4px;border-radius:50%;
 background:var(--lime);box-shadow:0 0 9px var(--lime);
 z-index:4;pointer-events:none;
 animation:wsParticle 3.5s ease-in-out infinite;
}
#wow-dm-services .ws-particle.p1{left:10%;top:30%}
#wow-dm-services .ws-particle.p2{left:27%;top:70%;animation-delay:-1s}
#wow-dm-services .ws-particle.p3{right:13%;top:45%;animation-delay:-2s}
#wow-dm-services .ws-sweep{
 position:absolute;inset:10% 0;pointer-events:none;z-index:3;
 background:linear-gradient(180deg,transparent,#baff000c,transparent);
 animation:wsSweep 5s linear infinite;
}

@keyframes wsAppear{
 from{opacity:0;translate:0 10px}
 to{opacity:1;translate:0 0}
}
@keyframes wsGlow{
 from{opacity:.45;scale:.9}
 to{opacity:1;scale:1.12}
}
@keyframes wsDash{to{stroke-dashoffset:-150}}
@keyframes wsDraw{to{stroke-dashoffset:0}}
@keyframes wsBlink{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes wsRingPulse{
 0%,100%{opacity:.7;scale:1}
 50%{opacity:1;scale:1.035}
}
@keyframes wsTargetFloat{
 0%,100%{translate:0 0;rotate:-2deg}
 50%{translate:0 -7px;rotate:1deg}
}
@keyframes wsTextFloat{
 0%,100%{translate:0 0}
 50%{translate:0 -5px}
}
@keyframes wsBar{
 from{transform:scaleY(.55);opacity:.5}
 to{transform:scaleY(1);opacity:1}
}
@keyframes wsParticle{
 0%,100%{transform:translate(0,0) scale(.7);opacity:.3}
 50%{transform:translate(9px,-13px) scale(1.5);opacity:1}
}
@keyframes wsSweep{
 0%{transform:translateY(-100%);opacity:0}
 20%{opacity:1}
 80%{opacity:.5}
 100%{transform:translateY(100%);opacity:0}
}
@keyframes wsArrowHit{
 0%,15%{translate:35px -25px;opacity:0}
 35%{translate:0 0;opacity:1}
 44%{translate:-5px 4px}
 50%{translate:0 0}
 65%{translate:0 0;opacity:1}
 75%,100%{translate:35px -25px;opacity:0}
}

@media(max-width:1050px){
 #wow-dm-services .ws-inner{
  grid-template-columns:minmax(0,1.5fr) minmax(190px,.75fr);
  gap:10px;padding-inline:4%;
 }
 #wow-dm-services .ws-cards{gap:8px}
 #wow-dm-services .ws-card{padding:9px;min-height:82px}
 #wow-dm-services .ws-name{font-size:9.5px}
 #wow-dm-services .ws-art{height:230px}
 #wow-dm-services .ws-target{width:155px;height:155px}
 #wow-dm-services .ws-arrow-art{width:125px}
}
@media(max-width:700px){
 #wow-dm-services .ws-inner{
  grid-template-columns:1fr;padding:23px 18px;gap:15px;
 }
 #wow-dm-services .ws-heading{font-size:27px}
 #wow-dm-services .ws-intro{max-width:530px}
 #wow-dm-services .ws-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
 #wow-dm-services .ws-card{min-height:84px;padding:10px}
 #wow-dm-services .ws-name{font-size:10px}
 #wow-dm-services .ws-art{height:240px;max-width:450px;width:100%;margin:auto}
 #wow-dm-services .ws-handwrite{right:4%;font-size:19px}
}
@media(max-width:430px){
 #wow-dm-services .ws-inner{padding:20px 13px}
 #wow-dm-services .ws-heading{font-size:25px}
 #wow-dm-services .ws-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 #wow-dm-services .ws-card{min-height:82px;padding:10px 12px}
 #wow-dm-services .ws-icon{width:27px;height:27px}
 #wow-dm-services .ws-name{font-size:10.5px}
 #wow-dm-services .ws-art{height:220px}
 #wow-dm-services .ws-target{width:150px;height:150px}
 #wow-dm-services .ws-arrow-art{width:120px}
}
@media(prefers-reduced-motion:reduce){
 #wow-dm-services *,#wow-dm-services *:before,#wow-dm-services *:after{
  animation:none!important;transition:none!important;
 }
}


/* =========================================
   SAME DESIGN - DIGITAL MARKETING PROCESS
   All classes isolated to this section
========================================= */

.same-dmp {
    --sd-lime: #c8ff00;
    --sd-cyan: #063c44;
    --sd-bg: #02090c;

    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 225px;
    padding: 22px 3.3% 8px 6.05%;
    overflow: hidden;

    background: var(--sd-bg);
    color: #ffffff;

    border-top: 2px solid var(--sd-lime);

    font-family: Arial, Helvetica, sans-serif;
}

.same-dmp,
.same-dmp * {
    box-sizing: border-box;
}

.same-dmp-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.same-dmp-bg-line {
    position: absolute;
    top: -80px;
    left: -65px;
    width: 125px;
    height: 200px;
    border-right: 1px solid rgba(200, 255, 0, .18);
    border-left: 1px solid rgba(200, 255, 0, .13);
    transform: rotate(43deg);
}

.same-dmp-bg-line::before,
.same-dmp-bg-line::after {
    content: "";
    position: absolute;
    inset: 0;
    border-right: 1px solid rgba(200, 255, 0, .15);
}

.same-dmp-bg-line::after {
    left: 24px;
}

.same-dmp-glow {
    position: absolute;
    top: 20px;
    left: -100px;
    width: 280px;
    height: 170px;
    background: rgba(89, 130, 0, .08);
    filter: blur(45px);
}

/* Main two-column layout */

.same-dmp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 218px;
    gap: 26px;
    align-items: center;

    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.same-dmp-main {
    min-width: 0;
}

/* Heading */

.same-dmp-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 3px;

    font-size: 9px;
    line-height: 1.3;
    font-weight: 700;
    color: #ffffff;
}

.same-dmp-dash {
    display: inline-block;
    width: 24px;
    height: 5px;
    flex-shrink: 0;

    background: var(--sd-lime);
    border-radius: 10px;
}

.same-dmp-title {
    margin: 0 0 4px;
    padding: 0;

    font-size: clamp(18px, 1.9vw, 21px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.55px;
    color: #ffffff;
}

.same-dmp-title span {
    color: var(--sd-lime);
}

.same-dmp-description {
    max-width: 480px;
    margin: 0 0 10px;
    padding: 0;

    font-size: 10px;
    line-height: 1.45;
    color: #e2e8e9;
}

/* Five cards and arrows */

.same-dmp-steps {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 14px
        minmax(0, 1fr) 14px
        minmax(0, 1fr) 14px
        minmax(0, 1fr) 14px
        minmax(0, 1fr);

    align-items: stretch;
    gap: 5px;

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

/* Connecting infographic */

.same-dmp-network {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100%;
    height: 46px;

    overflow: visible;
    pointer-events: none;
}

.same-dmp-track {
    fill: none;
    stroke: rgba(200, 255, 0, .14);
    stroke-width: 1.5;
}

.same-dmp-flow {
    fill: none;
    stroke: url(#sameDmpGradient);
    stroke-width: 1.5;
    stroke-dasharray: 4 9;

    animation: sameDmpFlow 8s linear infinite;
}

@keyframes sameDmpFlow {
    to {
        stroke-dashoffset: -104;
    }
}

/* Card */

.same-dmp-card {
    position: relative;
    min-width: 0;
    height: 94px;
    padding: 8px 9px 8px;

    overflow: hidden;

    background: rgba(2, 12, 15, .91);
    border: 1px solid #073c44;
    border-radius: 13px;

    color: #ffffff;
}

/* Top icon and number */

.same-dmp-card-top {
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 33px;
    margin-bottom: 3px;
}

.same-dmp-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 33px;
    height: 33px;
    flex-shrink: 0;

    color: var(--sd-lime);
}

.same-dmp-icon svg {
    display: block;
    width: 33px;
    height: 33px;
    overflow: visible;
}

.same-dmp-icon .same-dmp-hex {
    stroke: var(--sd-lime);
    stroke-width: 1.6;
    fill: rgba(200, 255, 0, .045);
}

.same-dmp-number {
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
}

.same-dmp-card h3 {
    margin: 0 0 3px;
    padding: 0;

    color: #ffffff;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
}

.same-dmp-card p {
    margin: 0;
    padding: 0;

    color: #e0e7e9;
    font-size: 9px;
    line-height: 1.4;
}

/* Chevron arrows */

.same-dmp-arrow {
    display: flex;
    justify-content: center;
    align-items: center;

    min-width: 0;
    color: var(--sd-lime);
}

.same-dmp-arrow svg {
    display: block;
    width: 12px;
    height: 24px;
    overflow: visible;

    animation: sameDmpArrow 1.8s ease-in-out infinite;
}

@keyframes sameDmpArrow {
    0%, 100% {
        opacity: .7;
    }
    50% {
        opacity: 1;
    }
}

/* Right CTA panel */

.same-dmp-cta {
    width: 100%;
    min-width: 0;

    padding: 13px 18px 10px;

    background:
        radial-gradient(
            ellipse at 90% 0%,
            rgba(110, 145, 0, .10),
            transparent 65%
        ),
        rgba(3, 14, 11, .95);

    border: 1px solid #b6e900;
    border-radius: 13px;
}

/* CTA icon and heading */

.same-dmp-cta-heading {
    display: grid;
    grid-template-columns: 47px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.same-dmp-chart {
    display: block;
    width: 47px;
    height: 47px;
}

.same-dmp-chart-bar {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: sameDmpBars 1.4s ease-in-out infinite alternate;
}

.same-dmp-chart-bar:nth-of-type(2) {
    animation-delay: .15s;
}

.same-dmp-chart-bar:nth-of-type(3) {
    animation-delay: .3s;
}

.same-dmp-chart-bar:nth-of-type(4) {
    animation-delay: .45s;
}

@keyframes sameDmpBars {
    from {
        transform: scaleY(.78);
    }
    to {
        transform: scaleY(1);
    }
}

.same-dmp-cta-heading h3 {
    margin: 0;
    padding: 0;

    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
}

/* Animated underline */

.same-dmp-cta-rule {
    position: relative;
    height: 2px;
    margin: 10px 0 11px 59px;

    background: rgba(200, 255, 0, .12);
    overflow: hidden;
}

.same-dmp-cta-rule span {
    display: block;
    width: 100%;
    height: 100%;

    background: var(--sd-lime);
    transform-origin: left;

    animation: sameDmpRule 3s ease-in-out infinite alternate;
}

@keyframes sameDmpRule {
    from {
        transform: scaleX(.72);
    }
    to {
        transform: scaleX(1);
    }
}

/* CTA text */

.same-dmp-cta > p {
    margin: 0 0 12px;
    padding: 0;

    color: #f0f2ed;
    font-size: 11px;
    line-height: 1.45;
}

/* Green pill button */

.same-dmp-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    width: 100%;
    min-height: 32px;
    padding: 6px 8px 6px 13px;

    color: #091000;
    text-decoration: none;

    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;

    background: var(--sd-lime);
    border-radius: 30px;

    transition: background .2s ease;
}

.same-dmp-button svg {
    display: block;
    flex-shrink: 0;
    width: 19px;
    height: 19px;

    transition: transform .2s ease;
}

.same-dmp-button:hover {
    color: #091000;
    background: #d9ff54;
}

.same-dmp-button:hover svg {
    transform: translateX(2px);
}

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

@media (max-width: 1100px) and (min-width: 768px) {

    .same-dmp {
        padding-left: 3%;
        padding-right: 3%;
    }

    .same-dmp-layout {
        grid-template-columns: minmax(0, 1fr) 195px;
        gap: 15px;
    }

    .same-dmp-steps {
        gap: 3px;
        grid-template-columns:
            minmax(0, 1fr) 11px
            minmax(0, 1fr) 11px
            minmax(0, 1fr) 11px
            minmax(0, 1fr) 11px
            minmax(0, 1fr);
    }

    .same-dmp-card {
        padding-left: 6px;
        padding-right: 6px;
        height: 100px;
    }

    .same-dmp-card-top {
        gap: 5px;
    }

    .same-dmp-icon,
    .same-dmp-icon svg {
        width: 28px;
        height: 28px;
    }

    .same-dmp-card h3 {
        font-size: 10px;
    }

    .same-dmp-card p {
        font-size: 8px;
    }

    .same-dmp-arrow svg {
        width: 10px;
    }

    .same-dmp-cta {
        padding: 12px;
    }

    .same-dmp-cta-heading {
        grid-template-columns: 39px minmax(0, 1fr);
        gap: 8px;
    }

    .same-dmp-chart {
        width: 39px;
        height: 39px;
    }

    .same-dmp-cta-heading h3 {
        font-size: 11px;
    }

    .same-dmp-cta-rule {
        margin-left: 47px;
    }
}

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

@media (max-width: 767px) {

    .same-dmp {
        min-height: 0;
        padding: 25px 16px 22px;
    }

    .same-dmp-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .same-dmp-title {
        font-size: clamp(22px, 5.5vw, 29px);
    }

    .same-dmp-description {
        max-width: 100%;
        font-size: 11px;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    .same-dmp-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .same-dmp-network {
        display: none;
    }

    .same-dmp-card {
        display: grid;
        grid-template-columns: 43px minmax(0, 1fr);
        grid-template-rows: auto auto;

        align-items: center;
        column-gap: 11px;

        height: auto;
        min-height: 79px;
        padding: 11px 12px;
    }

    .same-dmp-card-top {
        grid-column: 1;
        grid-row: 1 / 3;

        flex-direction: column;
        justify-content: center;
        gap: 4px;

        margin: 0;
    }

    .same-dmp-icon,
    .same-dmp-icon svg {
        width: 34px;
        height: 34px;
    }

    .same-dmp-number {
        font-size: 10px;
    }

    .same-dmp-card h3 {
        grid-column: 2;
        align-self: end;

        margin: 0 0 3px;
        font-size: 13px;
    }

    .same-dmp-card p {
        grid-column: 2;
        align-self: start;

        font-size: 10px;
        line-height: 1.5;
    }

    .same-dmp-arrow {
        height: 13px;
    }

    .same-dmp-arrow svg {
        width: 10px;
        height: 17px;
        transform: rotate(90deg);
    }

    .same-dmp-cta {
        padding: 19px;
    }

    .same-dmp-cta-heading {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 13px;
    }

    .same-dmp-chart {
        width: 46px;
        height: 46px;
    }

    .same-dmp-cta-heading h3 {
        font-size: 15px;
    }

    .same-dmp-cta-rule {
        margin-left: 61px;
    }

    .same-dmp-cta > p {
        font-size: 12px;
        line-height: 1.65;
    }

    .same-dmp-desktop {
        display: none;
    }

    .same-dmp-button {
        min-height: 39px;
        font-size: 12px;
        padding: 8px 11px 8px 14px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .same-dmp *,
    .same-dmp *::before,
    .same-dmp *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================
   DIGITAL MARKETING RESULTS
   Completely scoped CSS
========================================= */

.dm-results-section {
    width: 100%;
    height: 155px;
    background:
        radial-gradient(
            circle at 72% 50%,
            rgba(20, 58, 63, .45),
            transparent 35%
        ),
        linear-gradient(
            90deg,
            #020b0e 0%,
            #031216 100%
        );
    border-top: 2px solid #baff00;
    overflow: hidden;
    color: #fff;
}

.dm-results-wrap {
    width: 92%;
    max-width: 1400px;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 22px;
}

/* LEFT */

.dm-results-intro {
    width: 34%;
    min-width: 330px;
    flex-shrink: 0;
}

.dm-results-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .5px;
    margin-bottom: 5px;
}

.dm-results-label span {
    width: 25px;
    height: 4px;
    border-radius: 10px;
    background: #baff00;
}

.dm-results-intro h2 {
    margin: 0 0 3px;
    font-size: 17px;
    line-height: 20px;
    font-weight: 800;
}

.dm-results-intro h2 strong {
    color: #baff00;
}

.dm-results-intro p {
    width: 365px;
    margin: 0 0 9px;
    color: #cbd2d3;
    font-size: 8.5px;
    line-height: 12px;
}

.dm-view-btn {
    height: 34px;
    padding: 0 9px 0 15px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #071013;
    background: #baff00;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}

.dm-view-btn i {
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #071013;
    color: #baff00;
    font-style: normal;
    font-size: 12px;
}


/* SLIDER */

.dm-slider {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.dm-cards {
    width: 100%;
    display: flex;
    gap: 8px;
    overflow: hidden;
    padding: 0 25px;
}


/* CARD */

.dm-card {
    width: 132px;
    min-width: 132px;
    height: 110px;
    border: 1px solid rgba(91, 177, 196, .5);
    border-radius: 10px;
    background:
        linear-gradient(
            180deg,
            rgba(16, 39, 44, .88),
            rgba(4, 18, 21, .95)
        );
    overflow: hidden;
    box-shadow:
        inset 0 0 15px rgba(72, 184, 202, .08),
        0 0 8px rgba(0,0,0,.35);
}


/* BROWSER */

.dm-browser {
    width: 100%;
    height: 67px;
    padding: 5px 5px 0;
}

.dm-browser-top {
    height: 9px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 3px;
}

.dm-browser-top span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #75878a;
}

.dm-browser-top div {
    height: 3px;
    flex: 1;
    margin-left: 4px;
    border-radius: 3px;
    background: #263b3f;
}

.dm-web-layout {
    width: 100%;
    height: 53px;
    overflow: hidden;
    border-radius: 2px;
    background: #e9eeee;
}


/* ================================
   E-COMMERCE SVG INFOGRAPHIC
================================ */

.dm-web-nav {
    height: 9px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    color: #243033;
    font-size: 2.5px;
}

.dm-web-nav b {
    color: #16a3a1;
    margin-right: auto;
}

.dm-shop-body {
    height: 44px;
    display: flex;
    padding: 4px;
    background: linear-gradient(135deg,#eef9f5,#d9efeb);
}

.dm-shop-title {
    width: 44%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dm-shop-title small {
    font-size: 3px;
    color: #16a3a1;
}

.dm-shop-title b {
    color: #1c3031;
    font-size: 8px;
    line-height: 8px;
}

.dm-shop-title em {
    width: 30px;
    padding: 2px;
    background: #173536;
    color: #fff;
    font-size: 2.5px;
    font-style: normal;
    text-align: center;
}

.dm-product-grid {
    flex: 1;
    display: flex;
    gap: 3px;
    align-items: center;
}

.dm-product {
    width: 29px;
    height: 37px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.dm-product-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #d4a983;
}

.dm-product-circle.second {
    background: #7aa6a2;
}

.dm-product-circle.third {
    background: #d1d1ca;
}

.dm-product span {
    width: 13px;
    height: 2px;
    margin-top: 3px;
    background: #dce2e1;
}


/* ================================
   LOCAL BUSINESS INFOGRAPHIC
================================ */

.dm-map {
    position: relative;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(30deg,transparent 45%,#ccd9d5 46%,#ccd9d5 49%,transparent 50%),
        linear-gradient(-35deg,transparent 46%,#d5dfdc 47%,#d5dfdc 49%,transparent 50%),
        #edf2ef;
}

.dm-map-road {
    position: absolute;
    height: 3px;
    background: #fff;
    box-shadow: 0 0 0 1px #d7e0dc;
    transform: rotate(18deg);
}

.road1 {
    width: 90px;
    left: 0;
    top: 14px;
}

.road2 {
    width: 80px;
    left: 30px;
    top: 32px;
    transform: rotate(-25deg);
}

.road3 {
    width: 100px;
    left: 50px;
    top: 8px;
    transform: rotate(65deg);
}

.road4 {
    width: 70px;
    left: 20px;
    top: 44px;
    transform: rotate(8deg);
}

.dm-map-pin {
    position: absolute;
    left: 42%;
    top: 18px;
    width: 17px;
    height: 22px;
    z-index: 2;
}

.dm-map-pin svg {
    width: 100%;
    height: 100%;
    fill: #baff00;
    stroke: #15282b;
    stroke-width: 1.5;
}

.dm-location-card {
    position: absolute;
    left: 58px;
    top: 7px;
    width: 43px;
    padding: 4px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.dm-location-card b {
    display: block;
    font-size: 3.5px;
    color: #172d30;
}

.dm-location-card span {
    display: block;
    font-size: 3px;
    color: #6a7a7b;
}

.dm-location-card small {
    font-size: 4px;
    color: #efb900;
}


/* ================================
   SERVICE BUSINESS INFOGRAPHIC
================================ */

.dm-service {
    display: flex;
    background: #f2f5f5;
}

.dm-service-sidebar {
    width: 22px;
    background: #162e32;
    padding: 4px;
}

.dm-service-logo {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: #baff00;
    color: #152529;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    font-weight: bold;
    margin-bottom: 8px;
}

.dm-service-sidebar span {
    display: block;
    width: 11px;
    height: 2px;
    margin-bottom: 5px;
    border-radius: 2px;
    background: #50666a;
}

.dm-service-content {
    flex: 1;
    padding: 5px;
}

.dm-service-head small {
    display: block;
    font-size: 3px;
    color: #718084;
}

.dm-service-head b {
    font-size: 7px;
    color: #203235;
}

.dm-stat-row {
    display: flex;
    gap: 4px;
    margin-top: 5px;
}

.dm-stat-row div {
    flex: 1;
    padding: 4px;
    background: #fff;
    border-radius: 2px;
}

.dm-stat-row small {
    display: block;
    font-size: 3px;
    color: #879294;
}

.dm-stat-row b {
    font-size: 7px;
    color: #1f3739;
}

.dm-chart {
    margin-top: 4px;
    height: 22px;
    background: #e8eeee;
    border-radius: 2px;
}

.dm-chart svg {
    width: 100%;
    height: 100%;
}


/* ================================
   BRAND INFOGRAPHIC
================================ */

.dm-brand {
    position: relative;
    background:
        radial-gradient(
            circle at center,
            #314d51 0,
            #182c30 48%,
            #0c191c 100%
        );
    color: white;
}

.dm-brand-header {
    height: 12px;
    display: flex;
    align-items: center;
    padding: 3px 5px;
}

.dm-brand-logo {
    width: 8px;
    height: 8px;
    border: 1px solid #baff00;
    border-radius: 50%;
    color: #baff00;
    font-size: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-brand-menu {
    margin-left: auto;
    display: flex;
    gap: 2px;
}

.dm-brand-menu span {
    width: 8px;
    height: 1px;
    background: #829395;
}

.dm-brand-center {
    text-align: center;
    margin-top: 2px;
}

.dm-brand-circle {
    width: 22px;
    height: 22px;
    margin: auto;
    border-radius: 50%;
    border: 1px solid #baff00;
    color: #baff00;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-brand-center b {
    display: block;
    margin-top: 2px;
    font-size: 6px;
    line-height: 6px;
}

.dm-brand-center small {
    font-size: 2.5px;
    color: #9faeaf;
}

.dm-brand-bars {
    position: absolute;
    bottom: 4px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 3px;
}

.dm-brand-bars span {
    flex: 1;
    height: 2px;
    background: #385458;
}

.dm-brand-bars span:first-child {
    background: #baff00;
}


/* ================================
   CARD BOTTOM
================================ */

.dm-card-bottom {
    height: 43px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
}

.dm-card-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-card-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #baff00;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dm-card-bottom h3 {
    margin: 0 0 2px;
    color: #fff;
    font-size: 7px;
    line-height: 8px;
    font-weight: 700;
}

.dm-card-bottom p {
    margin: 0;
    color: #8d9a9b;
    font-size: 5.5px;
    line-height: 7px;
}

.dm-card-bottom p b {
    color: #baff00;
    font-size: 6px;
}


/* ARROWS */

.dm-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 23px;
    height: 23px;
    z-index: 10;
    border: 0;
    border-radius: 50%;
    background: #182a2e;
    color: #c9d1d2;
    font-size: 19px;
    line-height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s ease;
}

.dm-slider-arrow:hover {
    background: #baff00;
    color: #071013;
}

.dm-prev {
    left: 0;
}

.dm-next {
    right: 0;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .dm-results-intro {
        width: 38%;
        min-width: 280px;
    }

    .dm-card {
        width: 125px;
        min-width: 125px;
    }

}

@media (max-width: 700px) {

    .dm-results-section {
        height: auto;
        min-height: 300px;
        padding: 20px 0;
    }

    .dm-results-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .dm-results-intro {
        width: 100%;
    }

    .dm-slider {
        width: 100%;
        height: 125px;
    }

}

/* =========================================
   BOOST ONLINE PRESENCE SECTION
   Fully self contained
========================================= */

.boost-section {
    width: 100%;
    height: 94px;
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 55%,
            rgba(109, 255, 0, .16) 0%,
            rgba(40, 130, 20, .08) 25%,
            transparent 55%
        ),
        linear-gradient(
            90deg,
            #00130c 0%,
            #031d12 45%,
            #00150d 100%
        );

    border-top: 2px solid #baff00;
    border-bottom: 1px solid rgba(186,255,0,.35);

    color: #fff;
}


/* =========================================
   BACKGROUND DIGITAL GRID
========================================= */

.boost-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(134,255,0,.09) 40%,
            transparent 41%
        ),
        linear-gradient(
            165deg,
            transparent 0%,
            rgba(134,255,0,.07) 55%,
            transparent 56%
        );

    opacity: .7;
    pointer-events: none;
}


/* LEFT DIGITAL CURVES */

.boost-section::after {
    content: "";
    position: absolute;
    left: -100px;
    top: -55px;

    width: 360px;
    height: 180px;

    border: 1px solid rgba(150,255,0,.18);
    border-radius: 50%;

    box-shadow:
        0 0 15px rgba(130,255,0,.08),
        20px 10px 0 -2px rgba(130,255,0,.04),
        40px 20px 0 -4px rgba(130,255,0,.04);

    transform: rotate(-15deg);
}


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

.boost-inner {
    width: 82%;
    max-width: 850px;
    height: 100%;
    margin: auto;

    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;
}


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

.boost-icon {
    width: 78px;
    height: 78px;

    flex-shrink: 0;

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

.boost-icon svg {
    width: 62px;
    height: 62px;

    fill: none;
    stroke: #baff00;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(0 0 4px rgba(186,255,0,.65))
        drop-shadow(0 0 10px rgba(186,255,0,.25));
}

.boost-icon .boost-dot {
    fill: #baff00;
    stroke: none;
}


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

.boost-content {
    margin-left: 20px;
    min-width: 355px;
}

.boost-content h2 {
    margin: 0 0 5px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 20px;
    font-weight: 700;

    color: #ffffff;

    letter-spacing: -.25px;
}

.boost-content p {
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 14px;
    font-weight: 400;

    color: #ffffff;
}


/* =========================================
   GRAPH
========================================= */

.boost-graph {
    position: absolute;

    left: 380px;
    bottom: 0;

    width: 255px;
    height: 90px;

    opacity: .9;
}


/* GRAPH BARS */

.graph-bars {
    position: absolute;
    left: 25px;
    bottom: 0;

    height: 80px;

    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.graph-bars span {
    display: block;

    width: 8px;

    background:
        linear-gradient(
            to top,
            rgba(83,180,0,.25),
            #79d900
        );

    box-shadow:
        0 0 7px rgba(120,255,0,.25);
}


/* GRAPH LINE */

.graph-line {
    position: absolute;

    left: 0;
    top: 0;

    width: 255px;
    height: 90px;

    overflow: visible;
}

.graph-line polyline {
    fill: none;

    stroke: #a5f600;
    stroke-width: 1.5;

    filter:
        drop-shadow(0 0 3px rgba(170,255,0,.6));
}


/* GRAPH ARROW */

.graph-arrow {
    position: absolute;

    right: 0;
    top: 1px;

    width: 13px;
    height: 13px;

    border-top: 2px solid #baff00;
    border-right: 2px solid #baff00;

    transform: rotate(35deg);
}


/* =========================================
   QUOTE BUTTON
========================================= */

.boost-btn {
    position: absolute;

    right: 0;

    width: 166px;
    height: 39px;

    padding-left: 22px;
    padding-right: 7px;

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

    text-decoration: none;

    background: #baff00;
    color: #071208;

    border-radius: 22px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;

    box-shadow:
        0 0 12px rgba(186,255,0,.15);

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

.boost-btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 0 18px rgba(186,255,0,.35);
}


/* BUTTON CIRCLE */

.boost-btn i {
    width: 25px;
    height: 25px;

    border-radius: 50%;

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

    background: #071208;

    flex-shrink: 0;
}

.boost-btn i svg {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: #baff00;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================
   SMALL SCREEN
========================================= */

@media (max-width: 850px) {

    .boost-inner {
        width: 94%;
    }

    .boost-content {
        margin-left: 10px;
        min-width: 0;
    }

    .boost-content h2 {
        font-size: 14px;
    }

    .boost-content p {
        font-size: 8px;
    }

    .boost-graph {
        display: none;
    }

    .boost-btn {
        width: 140px;
        height: 35px;
        font-size: 8px;
    }

    .boost-icon {
        width: 58px;
    }

    .boost-icon svg {
        width: 48px;
        height: 48px;
    }
}

/* ==========================================================
   ADVANCED TECHNOLOGY BLOG HERO
   No external image
   No external library
========================================================== */

.adv-blog-hero {

    --green: #baff00;
    --green2: #78e600;
    --dark: #021419;

    position: relative;

    width: 100%;
    height: 275px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 76% 50%,
            rgba(155,255,0,.13),
            transparent 25%
        ),

        radial-gradient(
            circle at 55% 30%,
            rgba(0,160,120,.08),
            transparent 30%
        ),

        linear-gradient(
            90deg,
            #011116 0%,
            #02191e 50%,
            #011316 100%
        );

    border-top: 1px solid rgba(115,220,255,.35);

    border-bottom:
        2px solid var(--green);

    box-shadow:
        inset 0 -8px 35px rgba(135,255,0,.04);

    color: white;

    isolation: isolate;
}


/* ==========================================================
   DIGITAL GRID
========================================================== */

.adv-blog-grid {

    position: absolute;

    inset: 0;

    opacity: .23;

    background-image:

        linear-gradient(
            rgba(150,255,0,.07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(150,255,0,.07) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    transform:
        perspective(400px)
        rotateX(55deg)
        scale(1.6);

    transform-origin:
        bottom center;

    animation:
        gridMove 12s linear infinite;

    pointer-events: none;
}


@keyframes gridMove {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            0 42px,
            42px 0;
    }

}


/* ==========================================================
   NOISE / DIGITAL TEXTURE
========================================================== */

.adv-blog-noise {

    position: absolute;

    inset: 0;

    opacity: .035;

    background-image:

        radial-gradient(
            white .6px,
            transparent .6px
        );

    background-size: 5px 5px;

    pointer-events: none;
}


/* ==========================================================
   NEON BEAM
========================================================== */

.adv-blog-beam {

    position: absolute;

    width: 110px;

    height: 500px;

    top: -120px;

    left: 42%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(186,255,0,.16),
            rgba(186,255,0,.34),
            transparent
        );

    filter: blur(8px);

    transform: rotate(25deg);

    animation:
        beamMove 8s linear infinite;

    z-index: 2;

    pointer-events: none;
}


@keyframes beamMove {

    0% {
        left: -20%;
        opacity: 0;
    }

    15% {
        opacity: .7;
    }

    75% {
        opacity: .5;
    }

    100% {
        left: 115%;
        opacity: 0;
    }

}


/* ==========================================================
   CURSOR GLOW
========================================================== */

.adv-blog-cursor-glow {

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(186,255,0,.12),
            transparent 65%
        );

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

    pointer-events: none;

    z-index: 3;

    transition:
        left .15s ease,
        top .15s ease;
}


/* ==========================================================
   VISUAL
========================================================== */

.adv-blog-visual {

    position: absolute;

    right: 0;

    top: 0;

    width: 68%;

    height: 100%;

    z-index: 4;

    pointer-events: none;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            black 20%,
            black 100%
        );
}


.adv-blog-svg {

    width: 100%;

    height: 100%;

    display: block;

    transform:
        translate3d(0,0,0);

    transition:
        transform .25s ease-out;
}


/* ==========================================================
   NETWORK
========================================================== */

.adv-network {

    fill: none;

    stroke:
        rgba(170,255,0,.32);

    stroke-width: .8;

    stroke-dasharray:
        4 7;

    animation:
        networkFlow 5s linear infinite;
}


@keyframes networkFlow {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -70;
    }

}


/* ==========================================================
   NETWORK NODES
========================================================== */

.adv-network-nodes circle {

    fill: var(--green);

    animation:
        nodePulse 2s ease-in-out infinite;
}


.adv-network-nodes circle:nth-child(2) {
    animation-delay: .2s;
}

.adv-network-nodes circle:nth-child(3) {
    animation-delay: .4s;
}

.adv-network-nodes circle:nth-child(4) {
    animation-delay: .6s;
}

.adv-network-nodes circle:nth-child(5) {
    animation-delay: .8s;
}

.adv-network-nodes circle:nth-child(6) {
    animation-delay: 1s;
}


@keyframes nodePulse {

    0%,
    100% {
        opacity: .3;
        r: 2px;
    }

    50% {
        opacity: 1;
        r: 4px;
    }

}


/* ==========================================================
   PARTICLES
========================================================== */

.adv-particles circle {

    fill: var(--green);

    filter:
        drop-shadow(
            0 0 4px var(--green)
        );

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


.adv-particles circle:nth-child(2) {
    animation-delay: .4s;
}

.adv-particles circle:nth-child(3) {
    animation-delay: .8s;
}

.adv-particles circle:nth-child(4) {
    animation-delay: 1.2s;
}

.adv-particles circle:nth-child(5) {
    animation-delay: 1.6s;
}


@keyframes particleFloat {

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

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

}


/* ==========================================================
   LAPTOP
========================================================== */

.adv-laptop {

    transform-origin:
        570px 320px;

    animation:
        laptopHover 5s ease-in-out infinite;
}


@keyframes laptopHover {

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

    50% {
        transform:
            translateY(-5px)
            rotate(.3deg);
    }

}


/* ==========================================================
   SCREEN TEXT
========================================================== */

.adv-screen-text text {

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


@keyframes screenTextGlow {

    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }

}


/* ==========================================================
   SCREEN GRAPH
========================================================== */

.adv-screen-graph {

    stroke-dasharray:
        300;

    stroke-dashoffset:
        300;

    animation:
        graphDraw 3s ease-out forwards,
        graphGlow 2s ease-in-out 3s infinite;
}


@keyframes graphDraw {

    to {
        stroke-dashoffset: 0;
    }

}


@keyframes graphGlow {

    0%,
    100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

}


/* ==========================================================
   KEYBOARD
========================================================== */

.adv-keyboard {

    animation:
        keyboardPulse 2s ease-in-out infinite;
}


@keyframes keyboardPulse {

    0%,
    100% {
        opacity: .18;
    }

    50% {
        opacity: .6;
    }

}


/* ==========================================================
   GLOBE
========================================================== */

.adv-globe {

    transform-origin:
        755px 170px;

    animation:
        globePulse 4s ease-in-out infinite;
}


@keyframes globePulse {

    0%,
    100% {
        opacity: .5;
    }

    50% {
        opacity: 1;
    }

}


/* ==========================================================
   ORBIT
========================================================== */

.adv-orbit {

    transform-origin:
        755px 170px;

    animation:
        orbitRotate 9s linear infinite;
}


@keyframes orbitRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


/* ==========================================================
   TECH NODES
========================================================== */

.adv-tech-node {

    transform-box:
        fill-box;

    transform-origin:
        center;

    animation:
        techNodeFloat 4s ease-in-out infinite;
}


.adv-code-node {
    animation-delay: .4s;
}

.adv-chart-node {
    animation-delay: .8s;
}

.adv-bulb-node {
    animation-delay: 1.2s;
}

.adv-gear-node {
    animation-delay: 1.6s;
}


@keyframes techNodeFloat {

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

    50% {
        transform:
            translateY(-7px)
            scale(1.03);
    }

}


/* ==========================================================
   DATA CARDS
========================================================== */

.adv-data-card {

    animation:
        cardFloat 5s ease-in-out infinite;
}


.adv-card-two {

    animation-delay:
        1.2s;
}


@keyframes cardFloat {

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

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

}


/* ==========================================================
   SCAN LINE
========================================================== */

.adv-scan-line {

    opacity: 0;

    filter:
        drop-shadow(
            0 0 7px var(--green)
        );

    animation:
        scanLine 4s linear infinite;
}


@keyframes scanLine {

    0% {
        transform:
            translateY(0);

        opacity: 0;
    }

    10% {
        opacity: .7;
    }

    80% {
        opacity: .4;
    }

    100% {
        transform:
            translateY(250px);

        opacity: 0;
    }

}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.adv-blog-content {

    position: relative;

    z-index: 20;

    width: 88%;

    max-width: 1200px;

    height: 100%;

    margin: auto;

    padding-top: 21px;

    animation:
        contentReveal .9s cubic-bezier(.2,.8,.2,1) both;
}


@keyframes contentReveal {

    from {
        opacity: 0;

        transform:
            translateX(-25px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


/* ==========================================================
   BREADCRUMB
========================================================== */

.adv-blog-breadcrumb {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    color: #dce4e5;
}


.adv-blog-breadcrumb b {

    color:
        #69787b;

    font-size:
        12px;

    font-weight:
        400;
}


.adv-blog-breadcrumb strong {

    color:
        var(--green);
}


/* ==========================================================
   HOME SVG
========================================================== */

.adv-home {

    width: 12px;

    height: 12px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.adv-home svg {

    width: 11px;

    height: 11px;

    fill: none;

    stroke:
        white;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


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

.adv-blog-label {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 8px;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .4px;
}


.adv-blog-label span {

    width: 27px;

    height: 4px;

    border-radius:
        10px;

    background:
        var(--green);

    box-shadow:
        0 0 8px
        rgba(186,255,0,.8);

    animation:
        labelGlow 2s ease-in-out infinite;
}


@keyframes labelGlow {

    0%,
    100% {
        width: 27px;

        box-shadow:
            0 0 5px
            rgba(186,255,0,.4);
    }

    50% {
        width: 34px;

        box-shadow:
            0 0 15px
            rgba(186,255,0,1);
    }

}


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

.adv-blog-content h1 {

    margin:
        0 0 9px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        29px;

    line-height:
        34px;

    font-weight:
        800;

    letter-spacing:
        -.7px;

    color:
        #ffffff;
}


.adv-blog-content h1 span {

    color:
        var(--green);

    text-shadow:
        0 0 12px
        rgba(186,255,0,.18);
}


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

.adv-blog-content p {

    width:
        390px;

    margin:
        0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        11px;

    line-height:
        17px;

    color:
        #e5eded;
}


/* ==========================================================
   MINI STATS
========================================================== */

.adv-mini-stats {

    display:
        flex;

    gap:
        18px;

    margin-top:
        14px;
}


.adv-mini-stats div {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    opacity:
        .75;

    transition:
        .3s ease;
}


.adv-mini-stats div:hover {

    opacity:
        1;

    transform:
        translateY(-2px);
}


.adv-mini-stats strong {

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    color:
        var(--green);
}


.adv-mini-stats span {

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    color:
        #b7c3c4;
}


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

@media (max-width: 1000px) {

    .adv-blog-visual {

        width:
            70%;

        opacity:
            .8;
    }

}


@media (max-width: 700px) {

    .adv-blog-hero {

        height:
            340px;
    }


    .adv-blog-visual {

        width:
            100%;

        opacity:
            .32;
    }


    .adv-blog-content {

        width:
            88%;
    }


    .adv-blog-content h1 {

        font-size:
            25px;

        line-height:
            30px;
    }


    .adv-blog-content p {

        width:
            95%;

        font-size:
            10px;

        line-height:
            16px;
    }


    .adv-mini-stats {

        margin-top:
            12px;
    }

}

.blog-page {

    --blog-green: #b8ff00;
    --blog-green-dark: #75c900;
    --blog-bg: #021419;
    --blog-border: rgba(0,180,230,.35);
    --blog-text: #ffffff;
    --blog-muted: #c4d1d4;

    width: 100%;
    min-height: 100vh;

    padding: 28px 0 35px;

    background:
        radial-gradient(
            circle at 30% 10%,
            rgba(0,160,180,.06),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #010d12,
            #031a20 50%,
            #011014
        );

    color: var(--blog-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    position: relative;

    overflow: hidden;
}


/* TOP NEON LINE */

.blog-page::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

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

    box-shadow:
        0 0 10px var(--blog-green);

    animation:
        blogTopLine 4s linear infinite;
}


@keyframes blogTopLine {

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

    100% {
        transform: translateX(100%);
    }

}


/* CONTAINER */

.blog-container {

    width: 91.5%;

    max-width: 1200px;

    margin: auto;
}


/* =========================================================
   TOP BAR
========================================================= */

.blog-topbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 20px;
}


.blog-filters {

    display: flex;

    align-items: center;

    gap: 9px;

    flex-wrap: wrap;
}


.filter-btn {

    border: 1px solid
        rgba(0,150,190,.35);

    background:
        rgba(4,28,35,.55);

    color: #ffffff;

    border-radius: 22px;

    padding:
        8px 19px;

    font-size: 10px;

    cursor: pointer;

    transition:
        .3s ease;

    white-space: nowrap;
}


.filter-btn:hover {

    border-color:
        var(--blog-green);

    color:
        var(--blog-green);

    transform:
        translateY(-2px);

    box-shadow:
        0 0 14px
        rgba(184,255,0,.12);
}


.filter-btn.active {

    background:
        var(--blog-green);

    border-color:
        var(--blog-green);

    color:
        #071000;

    font-weight:
        700;

    box-shadow:
        0 0 16px
        rgba(184,255,0,.18);
}


/* =========================================================
   SEARCH
========================================================= */

.blog-search {

    width:
        235px;

    height:
        34px;

    border:
        1px solid
        rgba(0,160,210,.35);

    border-radius:
        20px;

    display:
        flex;

    align-items:
        center;

    background:
        rgba(4,23,30,.7);

    overflow:
        hidden;
}


.blog-search input {

    flex:
        1;

    min-width:
        0;

    height:
        100%;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        #fff;

    padding:
        0 14px;

    font-size:
        10px;
}


.blog-search input::placeholder {

    color:
        #809095;
}


.blog-search button {

    width:
        32px;

    height:
        32px;

    margin-right:
        1px;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--blog-green);

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.blog-search button svg {

    width:
        15px;

    height:
        15px;

    fill:
        none;

    stroke:
        #071000;

    stroke-width:
        2;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.blog-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0, 3fr)
        minmax(230px, 1fr);

    gap:
        18px;

    align-items:
        start;
}


/* =========================================================
   POSTS GRID
========================================================= */

.blog-posts {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        17px;

}


/* =========================================================
   BLOG CARD
========================================================= */

.blog-card {

    min-width:
        0;

    min-height:
        278px;

    border:
        1px solid
        rgba(0,175,220,.45);

    border-radius:
        9px;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            rgba(4,27,34,.95),
            rgba(1,18,23,.96)
        );

    box-shadow:
        inset 0 0 20px
        rgba(0,180,220,.025);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

    position:
        relative;

    animation:
        cardReveal .6s ease both;
}


.blog-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(184,255,0,.65);

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.4),

        0 0 20px
        rgba(184,255,0,.06);
}


@keyframes cardReveal {

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

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

}


/* =========================================================
   CARD VISUAL AREA
========================================================= */

.blog-image {

    height:
        113px;

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #052330;
}


/* subtle image-like lighting */

.blog-image::after {

    content: "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            120deg,
            transparent 25%,
            rgba(255,255,255,.06),
            transparent 65%
        );

    transform:
        translateX(-100%);

    animation:
        imageShine 5s ease-in-out infinite;
}


@keyframes imageShine {

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

    75%,
    100% {
        transform:
            translateX(100%);
    }

}


/* =========================================================
   WEB VISUAL
========================================================= */

.web-image {

    background:
        radial-gradient(
            circle at 70% 30%,
            #174d61,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #172d32,
            #04141a
        );
}


.visual-code {

    width:
        160px;

    height:
        88px;

    background:
        linear-gradient(
            145deg,
            #07191e,
            #102d34
        );

    border:
        2px solid
        #275963;

    border-radius:
        7px;

    transform:
        perspective(400px)
        rotateX(5deg)
        rotateY(-7deg)
        rotateZ(-3deg);

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


.code-top {

    height:
        15px;

    display:
        flex;

    gap:
        4px;

    align-items:
        center;

    padding-left:
        8px;

    border-bottom:
        1px solid
        #21414a;
}


.code-top span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #b8ff00;
}


.code-lines {

    position:
        relative;

    padding:
        12px;
}


.code-lines b {

    position:
        absolute;

    right:
        12px;

    top:
        14px;

    font-size:
        31px;

    color:
        #eafcff;

    text-shadow:
        0 0 12px #00aaff;
}


.code-lines i {

    display:
        block;

    width:
        55px;

    height:
        3px;

    margin:
        6px 0;

    background:
        #18a5cc;

    border-radius:
        5px;
}


/* =========================================================
   MARKETING VISUAL
========================================================= */

.marketing-image {

    background:
        radial-gradient(
            circle at center,
            #0751b3,
            #031d62 55%,
            #020d29
        );
}


.marketing-chart {

    width:
        150px;

    height:
        95px;

    position:
        relative;
}


.chart-bars {

    height:
        72px;

    position:
        absolute;

    bottom:
        5px;

    left:
        22px;

    display:
        flex;

    gap:
        8px;

    align-items:
        end;
}


.chart-bars span {

    width:
        14px;

    background:
        linear-gradient(
            to top,
            #15a5ff,
            #63ddff
        );

    border-radius:
        3px 3px 0 0;

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

    animation:
        chartGrow 2s ease-in-out infinite alternate;
}


.chart-bars span:nth-child(2) {
    animation-delay: .2s;
}

.chart-bars span:nth-child(3) {
    animation-delay: .4s;
}

.chart-bars span:nth-child(4) {
    animation-delay: .6s;
}

.chart-bars span:nth-child(5) {
    animation-delay: .8s;
}


@keyframes chartGrow {

    from {
        transform:
            scaleY(.7);
    }

    to {
        transform:
            scaleY(1);
    }

}


.chart-arrow {

    position:
        absolute;

    right:
        10px;

    top:
        2px;

    color:
        #ff6d60;

    font-size:
        55px;

    font-weight:
        800;

    text-shadow:
        0 0 12px
        #ff4d48;

    transform:
        rotate(-5deg);
}


.chart-icons {

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    display:
        flex;

    justify-content:
        space-between;

    color:
        #fff;

    font-size:
        14px;
}


/* =========================================================
   CLOUD
========================================================= */

.cloud-image {

    background:
        radial-gradient(
            circle at 50% 35%,
            #1660c5,
            #071d43 65%,
            #03101d
        );
}


.cloud-visual {

    position:
        relative;

    width:
        180px;

    height:
        100px;
}


.cloud-shape {

    position:
        absolute;

    left:
        35px;

    top:
        2px;

    font-size:
        72px;

    color:
        #4cc9ff;

    text-shadow:
        0 0 18px #008cff;

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


@keyframes cloudFloat {

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

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

}


.server-rack {

    position:
        absolute;

    bottom:
        2px;

    right:
        28px;

    width:
        45px;

    height:
        55px;

    background:
        linear-gradient(
            90deg,
            #0b1f3a,
            #1c4770
        );

    border:
        2px solid
        #3289c7;

    border-radius:
        4px;
}


.server-rack span {

    display:
        block;

    height:
        7px;

    margin:
        4px;

    background:
        #1687c7;

    box-shadow:
        0 0 5px
        #009cff;
}


/* =========================================================
   DESIGN VISUAL
========================================================= */

.design-image {

    background:
        linear-gradient(
            135deg,
            #4d6a1c,
            #07161c
        );
}


.design-screen {

    width:
        180px;

    height:
        90px;

    background:
        #eef0ef;

    border-radius:
        5px;

    position:
        relative;

    box-shadow:
        0 10px 20px
        rgba(0,0,0,.5);
}


.design-toolbar {

    height:
        14px;

    background:
        #25353b;
}


.design-layout {

    display:
        grid;

    grid-template-columns:
        35% 65%;

    height:
        76px;
}


.design-layout div {

    margin:
        8px;

    background:
        #a7c6bd;
}


.design-layout div:nth-child(2) {

    background:
        #ef7182;

    grid-column:
        2;
}


.design-layout div:nth-child(3) {

    background:
        #f6d15c;

    grid-column:
        2;
}


.design-screen strong {

    position:
        absolute;

    left:
        15px;

    bottom:
        14px;

    color:
        #1b2528;

    font-size:
        15px;
}


/* =========================================================
   SEO
========================================================= */

.seo-image {

    background:
        radial-gradient(
            circle at 50% 40%,
            #084b61,
            #021c26 65%
        );
}


.seo-screen {

    width:
        165px;

    height:
        88px;

    border:
        2px solid
        #345e69;

    border-radius:
        6px;

    background:
        linear-gradient(
            145deg,
            #06252d,
            #011116
        );

    position:
        relative;

    padding:
        12px;

    box-sizing:
        border-box;
}


.seo-screen strong {

    color:
        #4fc8e7;

    font-size:
        23px;
}


.seo-graph {

    position:
        absolute;

    left:
        50px;

    bottom:
        16px;

    width:
        80px;

    height:
        35px;

    border-bottom:
        2px solid
        #43e3f4;

    border-left:
        2px solid
        #43e3f4;

    transform:
        skewY(-25deg);
}


.seo-graph span {

    display:
        inline-block;

    width:
        7px;

    margin:
        0 4px;

    background:
        #51e8f0;

    box-shadow:
        0 0 7px
        #00d9ff;
}


.seo-graph span:nth-child(1) {
    height: 10px;
}

.seo-graph span:nth-child(2) {
    height: 16px;
}

.seo-graph span:nth-child(3) {
    height: 24px;
}

.seo-graph span:nth-child(4) {
    height: 32px;
}


.seo-screen > b {

    position:
        absolute;

    right:
        12px;

    top:
        5px;

    color:
        #b8ff00;

    font-size:
        35px;
}


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

.mobile-image {

    background:
        radial-gradient(
            circle,
            #174b72,
            #021523 70%
        );
}


.phone {

    width:
        57px;

    height:
        94px;

    border:
        3px solid
        #8ddcff;

    border-radius:
        10px;

    background:
        #06253a;

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

    padding:
        13px 6px 6px;

    position:
        relative;
}


.phone-notch {

    position:
        absolute;

    width:
        20px;

    height:
        4px;

    top:
        4px;

    left:
        17px;

    border-radius:
        5px;

    background:
        #1b627e;
}


.app-grid {

    display:
        grid;

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

    gap:
        7px;

    margin-top:
        9px;
}


.app-grid span {

    height:
        17px;

    border-radius:
        4px;

    background:
        linear-gradient(
            135deg,
            #13b8ff,
            #a8ecff
        );

    color:
        #06233b;

    font-size:
        9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


/* =========================================================
   SERVER
========================================================= */

.server-image {

    background:
        linear-gradient(
            90deg,
            #001523,
            #064a70,
            #00121e
        );
}


.server-room {

    width:
        220px;

    height:
        100px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        7px;

    transform:
        perspective(300px)
        rotateY(-10deg);
}


.server-row {

    height:
        19px;

    background:
        linear-gradient(
            90deg,
            #082c45,
            #0b5477,
            #061b2a
        );

    border:
        1px solid
        #1986ba;

    box-shadow:
        0 0 12px
        rgba(0,170,255,.2);

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    padding:
        0 10px;

    gap:
        6px;
}


.server-row span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #3eeaff;

    box-shadow:
        0 0 6px
        #00d9ff;
}


/* =========================================================
   EMAIL
========================================================= */

.email-image {

    background:
        radial-gradient(
            circle at 60% 40%,
            #145e7a,
            #03151e 70%
        );
}


.email-laptop {

    width:
        155px;

    height:
        75px;

    background:
        #0c303b;

    border:
        2px solid
        #437785;

    border-radius:
        6px;

    transform:
        perspective(400px)
        rotateX(4deg)
        rotateY(-5deg);

    position:
        relative;
}


.email-screen {

    position:
        absolute;

    inset:
        8px;

    background:
        linear-gradient(
            145deg,
            #062f40,
            #031a25
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #4bd7ff;

    font-size:
        42px;

    text-shadow:
        0 0 15px
        #00baff;
}


/* =========================================================
   BACKUP
========================================================= */

.backup-image {

    background:
        radial-gradient(
            circle at 60% 40%,
            #1a75d1,
            #04172a 70%
        );

    position:
        relative;
}


.backup-cloud {

    font-size:
        58px;

    color:
        #5ccfff;

    text-shadow:
        0 0 18px
        #008dff;

    position:
        relative;

    z-index:
        2;
}


.backup-cloud span {

    position:
        absolute;

    left:
        24px;

    top:
        23px;

    font-size:
        25px;

    color:
        white;
}


.backup-server {

    width:
        55px;

    height:
        50px;

    position:
        absolute;

    bottom:
        15px;

    right:
        35px;

    background:
        linear-gradient(
            90deg,
            #0a2c4a,
            #195d83
        );

    border:
        2px solid
        #3e9fd0;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.blog-card-content {

    padding:
        8px 12px 11px;
}


.blog-meta-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        5px;

    margin-bottom:
        7px;
}


.blog-category {

    display:
        inline-flex;

    align-items:
        center;

    background:
        var(--blog-green);

    color:
        #071000;

    padding:
        4px 9px;

    border-radius:
        12px;

    font-size:
        8px;

    font-weight:
        700;

    white-space:
        nowrap;

    max-width:
        65%;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.blog-date {

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

    font-size:
        7px;

    color:
        #d4dfe1;

    white-space:
        nowrap;
}


.blog-date svg {

    width:
        11px;

    height:
        11px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;
}


/* TITLE */

.blog-card h2 {

    margin:
        0 0 7px;

    color:
        #ffffff;

    font-size:
        13px;

    line-height:
        18px;

    font-weight:
        700;
}


/* DESCRIPTION */

.blog-card p {

    margin:
        0 0 9px;

    color:
        #d2dde0;

    font-size:
        9px;

    line-height:
        13px;
}


/* READ MORE */

.read-more {

    color:
        var(--blog-green);

    text-decoration:
        none;

    font-size:
        9px;

    font-weight:
        700;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    transition:
        .25s ease;
}


.read-more span {

    font-size:
        17px;

    line-height:
        10px;

    transition:
        .25s ease;
}


.read-more:hover {

    color:
        #d8ff69;
}


.read-more:hover span {

    transform:
        translateX(5px);
}


/* =========================================================
   SIDEBAR
========================================================= */

.blog-sidebar {

    min-width:
        0;
}


.sidebar-box {

    border:
        1px solid
        rgba(0,160,200,.35);

    border-radius:
        11px;

    background:
        linear-gradient(
            145deg,
            rgba(3,26,33,.75),
            rgba(1,17,22,.85)
        );

    padding:
        14px;

    margin-bottom:
        17px;

    box-shadow:
        inset 0 0 20px
        rgba(0,170,220,.025);
}


.sidebar-box h3 {

    margin:
        0 0 12px;

    color:
        var(--blog-green);

    font-size:
        16px;

    font-weight:
        700;
}


/* =========================================================
   CATEGORY LIST
========================================================= */

.category-list {

    list-style:
        none;

    padding:
        0;

    margin:
        0;
}


.category-list li {

    min-height:
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        7px;

    border-bottom:
        1px solid
        rgba(0,140,170,.25);

    font-size:
        9px;

    color:
        #e3eaec;
}


.category-list li:last-child {

    border-bottom:
        0;
}


.category-list li span {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    min-width:
        0;
}


.category-list li i {

    width:
        15px;

    color:
        var(--blog-green);

    font-style:
        normal;

    font-size:
        14px;

    text-align:
        center;
}


.category-list li b {

    color:
        #e7eef0;

    font-weight:
        400;
}


/* =========================================================
   POPULAR POSTS
========================================================= */

.popular-post {

    display:
        grid;

    grid-template-columns:
        58px 1fr;

    gap:
        9px;

    padding:
        9px 0;

    border-bottom:
        1px solid
        rgba(0,140,170,.25);
}


.popular-post:last-child {

    border-bottom:
        0;

    padding-bottom:
        0;
}


.popular-thumb {

    width:
        58px;

    height:
        49px;

    border-radius:
        5px;

    border:
        1px solid
        rgba(0,170,220,.4);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        17px;

    font-weight:
        800;

    color:
        white;

    overflow:
        hidden;
}


.web-thumb {

    background:
        linear-gradient(
            135deg,
            #0d3745,
            #07181e
        );

    color:
        #b8ff00;
}


.marketing-thumb {

    background:
        linear-gradient(
            135deg,
            #073a9c,
            #041530
        );

    color:
        #ff655d;

    font-size:
        31px;
}


.cloud-thumb {

    background:
        linear-gradient(
            135deg,
            #0a5db0,
            #03172b
        );

    color:
        #62d8ff;

    font-size:
        30px;
}


.seo-thumb {

    background:
        linear-gradient(
            135deg,
            #073f4e,
            #031820
        );

    color:
        #5ee6f5;

    font-size:
        13px;
}


.email-thumb {

    background:
        linear-gradient(
            135deg,
            #0a526a,
            #03151e
        );

    color:
        #6bddff;

    font-size:
        25px;
}


.popular-post h4 {

    margin:
        0 0 6px;

    font-size:
        8px;

    line-height:
        12px;

    color:
        #ffffff;

    font-weight:
        500;
}


.popular-post small {

    color:
        #aab9bd;

    font-size:
        7px;
}


/* =========================================================
   PAGINATION
========================================================= */

.blog-pagination {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-top:
        17px;
}


.blog-pagination button {

    width:
        28px;

    height:
        27px;

    border:
        1px solid
        rgba(0,160,200,.4);

    background:
        rgba(3,25,32,.8);

    color:
        #ffffff;

    border-radius:
        6px;

    cursor:
        pointer;

    font-size:
        10px;

    transition:
        .25s ease;
}


.blog-pagination button:hover {

    border-color:
        var(--blog-green);

    color:
        var(--blog-green);

    transform:
        translateY(-2px);
}


.blog-pagination .active {

    background:
        var(--blog-green);

    border-color:
        var(--blog-green);

    color:
        #071000;

    font-weight:
        700;

    box-shadow:
        0 0 12px
        rgba(184,255,0,.2);
}


/* =========================================================
   HIDDEN SEARCH
========================================================= */

.blog-card.search-hidden {

    display:
        none;
}


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

@media (max-width: 1050px) {

    .blog-posts {

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

}


@media (max-width: 800px) {

    .blog-topbar {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .blog-search {

        width:
            100%;
    }


    .blog-layout {

        grid-template-columns:
            1fr;
    }


    .blog-posts {

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

}


@media (max-width: 560px) {

    .blog-page {

        padding:
            20px 0;
    }


    .blog-container {

        width:
            92%;
    }


    .blog-filters {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding-bottom:
            5px;
    }


    .filter-btn {

        flex-shrink:
            0;
    }


    .blog-posts {

        grid-template-columns:
            1fr;
    }


    .blog-card {

        min-height:
            auto;
    }


    .blog-image {

        height:
            150px;
    }

}

/* =========================================================
   PREMIUM CONTACT SECTION
========================================================= */

.contact-section {

    --contact-green: #b8ff00;
    --contact-cyan: #00bde8;
    --contact-bg: #011217;
    --contact-card: rgba(3, 25, 32, .78);
    --contact-border: rgba(0, 180, 220, .32);
    --contact-text: #ffffff;
    --contact-muted: #9db0b5;

    position: relative;

    width: 100%;

    padding: 70px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 35%,
            rgba(0, 190, 225, .08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 65%,
            rgba(184, 255, 0, .06),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #010c11,
            #031920 50%,
            #010d12
        );

    color: var(--contact-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* TOP NEON LINE */

.contact-section::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--contact-green),
            var(--contact-cyan),
            transparent
        );

    box-shadow:
        0 0 15px
        var(--contact-green);

    animation:
        contactLine 5s linear infinite;
}


@keyframes contactLine {

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

    100% {
        transform: translateX(100%);
    }

}


/* GRID BACKGROUND */

.contact-grid-bg {

    position: absolute;

    inset: 0;

    opacity: .14;

    background-image:
        linear-gradient(
            rgba(0,190,230,.18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,190,230,.18) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            black 75%,
            transparent
        );

    pointer-events: none;
}


/* GLOW */

.contact-glow {

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

    animation:
        contactFloat 7s ease-in-out infinite alternate;
}


.contact-glow-1 {

    left: -150px;
    top: 25%;

    background:
        rgba(0, 190, 230, .12);
}


.contact-glow-2 {

    right: -150px;
    bottom: 10%;

    background:
        rgba(184, 255, 0, .09);

    animation-delay:
        2s;
}


@keyframes contactFloat {

    from {
        transform:
            translateY(-30px);
    }

    to {
        transform:
            translateY(30px);
    }

}


/* CONTAINER */

.contact-container {

    width: 91.5%;

    max-width: 1200px;

    margin: auto;

    position: relative;

    z-index: 2;
}


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

.contact-heading {

    max-width: 700px;

    margin:
        0 auto 45px;

    text-align:
        center;
}


.contact-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #dce8eb;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2px;

    margin-bottom:
        13px;
}


.contact-label span {

    width:
        35px;

    height:
        4px;

    border-radius:
        10px;

    background:
        var(--contact-green);

    box-shadow:
        0 0 10px
        var(--contact-green);

    animation:
        labelPulse 2s ease-in-out infinite;
}


@keyframes labelPulse {

    50% {
        width: 50px;
    }

}


.contact-heading :is(h1, h2) {

    margin:
        0;

    font-size:
        clamp(32px, 4vw, 51px);

    line-height:
        1.08;

    font-weight:
        800;

    letter-spacing:
        -1.5px;
}


.contact-heading :is(h1, h2) strong {

    color:
        var(--contact-green);

    text-shadow:
        0 0 20px
        rgba(184,255,0,.22);
}


.contact-heading p {

    max-width:
        620px;

    margin:
        17px auto 0;

    color:
        #afbec2;

    font-size:
        13px;

    line-height:
        21px;
}


/* =========================================================
   MAIN
========================================================= */

.contact-main {

    display:
        grid;

    grid-template-columns:
        .82fr 1.5fr;

    gap:
        25px;

    align-items:
        stretch;
}


/* =========================================================
   INFO SIDE
========================================================= */

.contact-info {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.contact-info-card {

    min-height:
        95px;

    padding:
        17px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        var(--contact-border);

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            rgba(5,35,43,.8),
            rgba(1,18,24,.9)
        );

    transition:
        .35s ease;
}


.contact-info-card::before {

    content: "";

    position:
        absolute;

    width:
        90px;
    height:
        90px;

    right:
        -45px;
    top:
        -45px;

    border-radius:
        50%;

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

    transition:
        .35s ease;
}


.contact-info-card:hover {

    transform:
        translateX(6px);

    border-color:
        rgba(184,255,0,.55);

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.25),
        0 0 20px
        rgba(184,255,0,.05);
}


.contact-info-card:hover::before {

    transform:
        scale(2.5);
}


.contact-icon {

    width:
        48px;

    height:
        48px;

    min-width:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        11px;

    background:
        rgba(184,255,0,.06);

    color:
        var(--contact-green);

    box-shadow:
        inset 0 0 15px
        rgba(184,255,0,.04);

    transition:
        .35s ease;
}


.contact-icon svg {

    width:
        22px;

    height:
        22px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;
}


.contact-info-card:hover
.contact-icon {

    background:
        var(--contact-green);

    color:
        #071000;

    transform:
        rotate(-5deg)
        scale(1.05);

    box-shadow:
        0 0 20px
        rgba(184,255,0,.25);
}


.contact-info-card span {

    display:
        block;

    color:
        var(--contact-green);

    font-size:
        8px;

    letter-spacing:
        1.5px;

    font-weight:
        700;

    margin-bottom:
        5px;
}


.contact-info-card h2 {

    margin:
        0 0 4px;

    font-size:
        14px;

    font-weight:
        700;

    color:
        #ffffff;
}


.contact-info-card p {

    margin:
        0;

    color:
        #8fa5aa;

    font-size:
        9px;

    line-height:
        14px;
}


.card-arrow {

    position:
        absolute;

    right:
        15px;

    top:
        15px;

    color:
        var(--contact-cyan);

    font-size:
        17px;

    transition:
        .3s ease;
}


.contact-info-card:hover
.card-arrow {

    color:
        var(--contact-green);

    transform:
        translate(3px,-3px);
}


/* =========================================================
   SOCIAL
========================================================= */

.contact-social {

    margin-top:
        auto;

    padding:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-top:
        1px solid
        rgba(0,170,210,.2);
}


.contact-social > span {

    color:
        #84999e;

    font-size:
        8px;

    letter-spacing:
        1.7px;

    font-weight:
        700;
}


.social-links {

    display:
        flex;

    gap:
        7px;
}


.social-links a {

    width:
        31px;

    height:
        31px;

    border:
        1px solid
        rgba(0,170,210,.4);

    border-radius:
        7px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #d8e4e7;

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        700;

    transition:
        .3s ease;
}


.social-links a:hover {

    background:
        var(--contact-green);

    border-color:
        var(--contact-green);

    color:
        #071000;

    transform:
        translateY(-4px);

    box-shadow:
        0 0 15px
        rgba(184,255,0,.2);
}


/* =========================================================
   FORM BOX
========================================================= */

.contact-form-box {

    padding:
        25px;

    border:
        1px solid
        rgba(0,190,230,.38);

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            rgba(5,31,39,.92),
            rgba(1,17,22,.96)
        );

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.25),
        inset 0 0 40px
        rgba(0,180,220,.025);

    position:
        relative;

    overflow:
        hidden;
}


.contact-form-box::after {

    content: "";

    position:
        absolute;

    width:
        220px;
    height:
        220px;

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

    border-radius:
        50%;

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

    box-shadow:
        0 0 0 25px
        rgba(184,255,0,.025),
        0 0 0 50px
        rgba(184,255,0,.015);

    pointer-events:
        none;
}


/* FORM TOP */

.form-top {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    margin-bottom:
        22px;

    padding-bottom:
        17px;

    border-bottom:
        1px solid
        rgba(0,160,200,.2);
}


.form-top > div:first-child span {

    color:
        var(--contact-green);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.7px;
}


.form-top h2 {

    margin:
        6px 0 0;

    font-size:
        24px;

    line-height:
        1.2;
}


.form-top h2 em {

    color:
        var(--contact-green);

    font-style:
        normal;
}


.form-status {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #8ea4a9;

    font-size:
        7px;

    letter-spacing:
        1px;
}


.form-status i {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #75ff00;

    box-shadow:
        0 0 8px
        #75ff00;

    animation:
        onlinePulse 1.5s infinite;
}


@keyframes onlinePulse {

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

}


/* =========================================================
   FORM
========================================================= */

.form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        15px;
}


.form-field {

    margin-bottom:
        15px;
}


.form-field label {

    display:
        block;

    color:
        #91a5aa;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        1.2px;

    margin-bottom:
        6px;
}


.input-wrap,
.textarea-wrap {

    display:
        flex;

    align-items:
        center;

    border:
        1px solid
        rgba(0,160,200,.3);

    border-radius:
        7px;

    background:
        rgba(1,18,24,.7);

    transition:
        .3s ease;

    overflow:
        hidden;
}


.input-wrap:focus-within,
.textarea-wrap:focus-within {

    border-color:
        var(--contact-green);

    box-shadow:
        0 0 15px
        rgba(184,255,0,.06);
}


.input-wrap svg,
.textarea-wrap svg {

    width:
        15px;

    height:
        15px;

    margin-left:
        11px;

    flex-shrink:
        0;

    fill:
        none;

    stroke:
        #6f929c;

    stroke-width:
        1.5;

    transition:
        .3s ease;
}


.input-wrap:focus-within svg,
.textarea-wrap:focus-within svg {

    stroke:
        var(--contact-green);
}


.input-wrap input,
.input-wrap select {

    width:
        100%;

    height:
        40px;

    padding:
        0 10px;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        #ffffff;

    font-size:
        10px;
}


.input-wrap select {

    appearance:
        none;

    cursor:
        pointer;
}


.input-wrap select option {

    background:
        #071a20;

    color:
        #fff;
}


.textarea-wrap {

    align-items:
        flex-start;
}


.textarea-wrap svg {

    margin-top:
        13px;
}


.textarea-wrap textarea {

    width:
        100%;

    resize:
        vertical;

    min-height:
        75px;

    padding:
        11px 10px;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        10px;

    line-height:
        16px;
}


.input-wrap input::placeholder,
.textarea-wrap textarea::placeholder {

    color:
        #536a70;
}


/* =========================================================
   BUDGET
========================================================= */

.budget-options {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.budget-option {

    margin:
        0 !important;

    position:
        relative;

    cursor:
        pointer;
}


.budget-option input {

    position:
        absolute;

    opacity:
        0;
}


.budget-option span {

    display:
        block;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(0,160,200,.3);

    border-radius:
        6px;

    color:
        #a7b9bd;

    font-size:
        8px;

    transition:
        .25s ease;
}


.budget-option input:checked + span {

    border-color:
        var(--contact-green);

    color:
        var(--contact-green);

    background:
        rgba(184,255,0,.06);

    box-shadow:
        0 0 10px
        rgba(184,255,0,.05);
}


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit {

    width:
        100%;

    height:
        45px;

    border:
        0;

    border-radius:
        7px;

    background:
        var(--contact-green);

    color:
        #071000;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    cursor:
        pointer;

    position:
        relative;

    overflow:
        hidden;

    transition:
        .3s ease;
}


.contact-submit::before {

    content: "";

    position:
        absolute;

    top:
        0;

    left:
        -100%;

    width:
        70%;

    height:
        100%;

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

    transform:
        skewX(-20deg);

    transition:
        .6s ease;
}


.contact-submit:hover::before {

    left:
        130%;
}


.contact-submit:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px
        rgba(184,255,0,.2);
}


.contact-submit b {

    width:
        24px;

    height:
        24px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #071000;

    color:
        var(--contact-green);

    font-size:
        15px;

    transition:
        .3s ease;
}


.contact-submit:hover b {

    transform:
        translateX(4px);
}


/* SUCCESS */

.form-success {

    display:
        none;

    margin-top:
        10px;

    padding:
        10px;

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

    border-radius:
        6px;

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

    color:
        var(--contact-green);

    font-size:
        9px;

    text-align:
        center;
}


.form-success.show {

    display:
        block;

    animation:
        successIn .4s ease;
}

.form-success.error {
    border-color: rgba(255, 105, 105, .4);
    background: rgba(255, 80, 80, .06);
    color: #ff9b9b;
}


@keyframes successIn {

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

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

}


/* =========================================================
   BOTTOM SERVICES
========================================================= */

.contact-services {

    margin-top:
        25px;

    display:
        grid;

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

    border:
        1px solid
        rgba(0,160,200,.25);

    border-radius:
        10px;

    overflow:
        hidden;

    background:
        rgba(3,23,29,.6);
}


.service-mini {

    min-height:
        70px;

    padding:
        12px 17px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    border-right:
        1px solid
        rgba(0,160,200,.2);

    transition:
        .3s ease;
}


.service-mini:last-child {

    border-right:
        0;
}


.service-mini:hover {

    background:
        rgba(184,255,0,.035);
}


.mini-icon {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        8px;

    color:
        var(--contact-green);

    font-size:
        17px;
}


.service-mini strong {

    display:
        block;

    color:
        #50666c;

    font-size:
        7px;

    margin-bottom:
        4px;
}


.service-mini span {

    color:
        #dce6e8;

    font-size:
        9px;

    font-weight:
        600;
}


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

@media (max-width: 900px) {

    .contact-main {

        grid-template-columns:
            1fr;
    }


    .contact-info {

        display:
            grid;

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


    .contact-social {

        grid-column:
            1 / -1;
    }


    .contact-services {

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


    .service-mini:nth-child(2) {

        border-right:
            0;
    }


    .service-mini:nth-child(-n+2) {

        border-bottom:
            1px solid
            rgba(0,160,200,.2);
    }

}


@media (max-width: 600px) {

    .contact-section {

        padding:
            50px 0;
    }


    .contact-container {

        width:
            92%;
    }


    .contact-heading h2 {

        font-size:
            31px;
    }


    .contact-heading p {

        font-size:
            11px;

        line-height:
            18px;
    }


    .contact-info {

        grid-template-columns:
            1fr;
    }


    .contact-social {

        grid-column:
            auto;
    }


    .form-row {

        grid-template-columns:
            1fr;

        gap:
            0;
    }


    .contact-form-box {

        padding:
            17px;
    }


    .form-top h2 {

        font-size:
            19px;
    }


    .contact-services {

        grid-template-columns:
            1fr;
    }


    .service-mini {

        border-right:
            0 !important;

        border-bottom:
            1px solid
            rgba(0,160,200,.2);
    }


    .service-mini:last-child {

        border-bottom:
            0;
    }

}

/* Shared theme surfaces and native controls */
html {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color var(--transition-base), color var(--transition-base);
}

::selection {
  background: var(--color-primary);
  color: var(--color-secondary);
}

a {
  color: var(--color-link);
}

button,
input,
select,
textarea {
  accent-color: var(--color-primary);
}

input,
select,
textarea {
  color: var(--color-text);
  background-color: var(--color-input);
  border-color: var(--color-border);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline-color: var(--color-focus);
}

table,
.table {
  color: var(--color-text);
  border-color: var(--color-border);
}

th,
td,
.table > :not(caption) > * > * {
  border-color: var(--color-border);
}

details,
summary {
  color: var(--color-text);
}

.modal-content,
.popover {
  color: var(--color-text);
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
  box-shadow: var(--shadow-soft);
}

.modal-header,
.modal-footer,
.popover-header {
  border-color: var(--color-border);
}

.theme-toggle {
  color: var(--color-primary);
  border-color: var(--color-border);
  background-color: var(--color-surface-muted);
  touch-action: manipulation;
}

.theme-toggle:hover {
  color: var(--color-secondary);
  background-color: var(--color-primary);
}

html[data-theme="light"] .site-header {
  background-color: var(--color-surface);
}

html[data-theme="light"] .main-nav,
html[data-theme="light"] .dropdown,
html[data-theme="light"] .mobile-menu-btn {
  color: var(--color-text);
}

html[data-theme="light"] .theme-toggle {
  color: var(--color-accent);
  border-color: var(--color-border);
  background-color: var(--color-surface-muted);
}

html[data-theme="light"] .theme-toggle:hover {
  color: var(--color-secondary);
  background-color: var(--color-primary);
}

html[data-theme="light"] body :is(
  [class*="card"],
  [class*="box"]
):not([class*="arrow"]):not([class*="screen"]):not([class*="code"]):not([class*="mockup"]):not([class*="logo"]) {
  background-color: var(--color-card);
  border-color: var(--color-border);
}

html[data-theme="light"] body :is(
  [class*="card"],
  [class*="box"]
):not([class*="arrow"]):not([class*="screen"]):not([class*="code"]):not([class*="mockup"]):not([class*="logo"]) :is(
  h1, h2, h3, h4, h5, h6, p, li, small, label, dt, dd
) {
  color: var(--color-text);
}

html[data-theme] body form :is(input, select, textarea) {
  color: var(--color-text);
  background-color: var(--color-input);
  border-color: var(--color-border);
  caret-color: var(--color-accent);
}

html[data-theme] body form :is(input, select, textarea)::placeholder {
  color: var(--color-placeholder);
}

html[data-theme] body form label {
  color: var(--color-text-soft);
}

html[data-theme="light"] body :is(table, .table) {
  color: var(--color-text);
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

html[data-theme="light"] :is(
  .asx-services,
  .alp-why-section,
  .gc-services,
  .gc-testimonials,
  .as-footer,
  .about
) {
  color: var(--color-text);
}

html[data-theme="light"] :is(
  .asx-services,
  .alp-why-section,
  .gc-services,
  .as-footer
) {
  --color-bg: #f4f7f9;
  --color-surface: #ffffff;
  --color-card: #ffffff;
  --color-text: #26353c;
  --color-text-soft: #46545d;
  --color-border: rgba(35, 55, 45, 0.16);
}

html[data-theme="light"] .gc-testimonials {
  --color-text: #25343b;
  --color-card: rgba(255, 255, 255, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

/* Responsive layout and touch-target safeguards */
@media (max-width: 991px) {
  .header-inner,
  .main-nav,
  .main-nav > ul,
  .main-nav > ul > li {
    min-width: 0;
  }

  .mobile-menu-btn {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    padding: 0;
  }

  .main-nav {
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .main-nav > ul > li > a,
  .dropdown li a,
  .quote-button,
  .theme-toggle {
    min-height: 44px;
  }

  .theme-toggle {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  main,
  section,
  article,
  .contact-main,
  .contact-info,
  .contact-info-card,
  .contact-form-box {
    min-width: 0;
  }

  h1,
  h2,
  h3,
  h4,
  p {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  body form :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea
  ) {
    min-height: 44px;
    font-size: 16px;
  }

  body form textarea {
    min-height: 120px;
  }

  .contact-form-box .input-wrap :is(input, select, textarea) {
    font-size: 16px;
  }

  .contact-info-card > div:nth-child(2) {
    min-width: 0;
  }

  .contact-info-card h2,
  .contact-info-card p {
    overflow-wrap: anywhere;
  }

  .contact-submit,
  .contact-form-box button[type="submit"] {
    min-height: 44px;
  }
}

 #asi-blog-page {
      --asi-bg: #001016;
      --asi-panel: #03151c;
      --asi-panel2: #061c24;
      --asi-border: #075365;
      --asi-green: #b5ff00;
      --asi-green2: #83c900;
      --asi-text: #f5f8fb;
      --asi-muted: #c1ced7;
      background: var(--asi-bg);
      color: var(--asi-text);
      font-family: inherit;
      font-size: 14px;
      line-height: 1.55;
      width: 100%;
      overflow: hidden;
      position: relative;
      isolation: isolate;
    }

    #asi-blog-page *,
    #asi-blog-page *::before,
    #asi-blog-page *::after {
      box-sizing: border-box;
    }

    #asi-blog-page a {
      color: inherit;
      text-decoration: none;
    }

    #asi-blog-page button,
    #asi-blog-page input {
      font: inherit;
    }

    #asi-blog-page .asi-container {
      max-width: 1250px;
      width: calc(100% - 48px);
      margin: 0 auto;
      padding: 10px 0 30px;
    }

    #asi-blog-page .asi-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.9fr) minmax(270px, .94fr);
      gap: 36px;
      align-items: start;
    }

    #asi-blog-page .asi-article,
    #asi-blog-page .asi-sidebar {
      min-width: 0;
    }

    /* HERO IMAGE */

    #asi-blog-page .asi-hero {
      min-height: 242px;
      border: 1px solid #155064;
      border-radius: 9px;
      overflow: hidden;
      position: relative;
      isolation: isolate;
      background:
        linear-gradient(90deg, rgba(0,9,16,.96) 0%, rgba(0,13,20,.77) 39%, rgba(0,12,17,.04) 100%),
        url("https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1400&q=85") center/cover;
      display: flex;
      align-items: center;
      padding: 22px;
      margin-bottom: 13px;
    }

    #asi-blog-page .asi-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(0deg, rgba(0,12,18,.55), transparent 60%);
    }

    #asi-blog-page .asi-hero-copy {
      max-width: 58%;
      position: relative;
      z-index: 2;
    }

    #asi-blog-page .asi-hero h1 {
      font-size: clamp(21px, 2.1vw, 29px);
      line-height: 1.08;
      letter-spacing: -.7px;
      font-weight: 800;
      text-transform: uppercase;
      margin: 0 0 12px;
      color: #fff;
    }

    #asi-blog-page .asi-hero h1 span {
      display: block;
      margin-top: 10px;
      color: var(--asi-green);
      font-size: .82em;
      line-height: 1.15;
    }

    #asi-blog-page .asi-hero-points {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      display: grid;
      gap: 14px;
      width: 120px;
      z-index: 2;
    }

    #asi-blog-page .asi-hero-point {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.3;
      text-shadow: 0 2px 5px #000;
    }

    #asi-blog-page .asi-mini-icon {
      width: 33px;
      height: 33px;
      flex: 0 0 33px;
      border: 1px solid var(--asi-green);
      color: var(--asi-green);
      background: rgba(0,18,21,.8);
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 18px;
      box-shadow: 0 0 14px rgba(181,255,0,.12);
    }

    /* ARTICLE CONTENT */

    #asi-blog-page .asi-intro {
      color: #e1e8ee;
      margin: 12px 0 17px;
      font-size: 13px;
      line-height: 1.55;
    }

    #asi-blog-page .asi-feature {
      display: grid;
      grid-template-columns: 38px 54px minmax(0,1fr);
      gap: 12px;
      align-items: start;
      margin: 15px 0 19px;
      scroll-margin-top: 25px;
    }

    #asi-blog-page .asi-number {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: linear-gradient(145deg, #6b9e00, #284900);
      color: white;
      font-size: 14px;
      font-weight: 800;
    }

    #asi-blog-page .asi-feature-icon {
      width: 50px;
      height: 50px;
      border: 1px solid #143c36;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 27px;
      color: var(--asi-green);
      background: radial-gradient(circle at 30% 20%, #16332d, #03151a 72%);
      box-shadow: inset 0 0 14px rgba(181,255,0,.04);
      transition: transform .3s ease, box-shadow .3s ease;
    }

    #asi-blog-page .asi-feature:hover .asi-feature-icon {
      transform: rotate(-8deg) scale(1.08);
      box-shadow: 0 0 20px rgba(181,255,0,.18);
    }

    #asi-blog-page .asi-feature h3 {
      font-size: 15px;
      font-weight: 750;
      margin: 3px 0 5px;
      color: #f5f8fb;
      line-height: 1.35;
    }

    #asi-blog-page .asi-feature p {
      color: var(--asi-muted);
      margin: 0;
      font-size: 12.5px;
      line-height: 1.55;
    }

    /* CTA */

    #asi-blog-page .asi-cta {
      display: grid;
      grid-template-columns: 85px minmax(0,1fr) auto;
      align-items: center;
      gap: 15px;
      padding: 17px 19px;
      border: 1px solid #668b00;
      border-radius: 9px;
      margin-top: 21px;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 0% 100%, rgba(181,255,0,.2), transparent 43%),
        linear-gradient(110deg, #081e20, #001017 62%, #152500);
    }

    #asi-blog-page .asi-cta::after {
      content: "";
      position: absolute;
      width: 220px;
      height: 160px;
      right: 5%;
      top: -120px;
      border: 1px solid rgba(181,255,0,.2);
      border-radius: 50%;
      box-shadow: 0 0 0 15px rgba(181,255,0,.025),
                  0 0 0 30px rgba(181,255,0,.025);
      pointer-events: none;
    }

    #asi-blog-page .asi-cta-art {
      font-size: 49px;
      color: var(--asi-green);
      text-align: center;
      line-height: 1;
      animation: asi-glow 3s ease-in-out infinite;
    }

    #asi-blog-page .asi-cta small {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: #e3eacb;
    }

    #asi-blog-page .asi-cta h3 {
      margin: 1px 0 2px;
      font-size: 21px;
      line-height: 1.25;
    }

    #asi-blog-page .asi-cta p {
      margin: 0;
      color: #e2e8ed;
      font-size: 12px;
    }

    #asi-blog-page .asi-btn {
      border: 0;
      border-radius: 30px;
      padding: 12px 16px;
      background: var(--asi-green);
      color: #081200;
      font-weight: 800;
      font-size: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      white-space: nowrap;
      transition: transform .25s, box-shadow .25s;
      position: relative;
      z-index: 2;
    }

    #asi-blog-page .asi-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 22px rgba(181,255,0,.25);
    }

    #asi-blog-page .asi-btn span {
      font-size: 17px;
      line-height: .8;
    }

    /* TAGS AND SOCIAL */

    #asi-blog-page .asi-tags {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      margin: 14px 0 16px;
      font-size: 11px;
    }

    #asi-blog-page .asi-tags strong {
      color: var(--asi-green);
      margin-right: 3px;
    }

    #asi-blog-page .asi-tag {
      border: 1px solid #164252;
      background: #041720;
      padding: 5px 10px;
      border-radius: 20px;
      color: #d2dde4;
      font-size: 10px;
      transition: border-color .2s, color .2s;
    }

    #asi-blog-page .asi-tag:hover {
      color: var(--asi-green);
      border-color: var(--asi-green);
    }

    #asi-blog-page .asi-share {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
    }

    #asi-blog-page .asi-share button {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid #155064;
      background: #03151d;
      color: var(--asi-green);
      cursor: pointer;
      display: grid;
      place-items: center;
      font-size: 12px;
      transition: background .2s, transform .2s;
    }

    #asi-blog-page .asi-share button:hover {
      background: #183000;
      transform: translateY(-3px);
    }

    /* SIDEBAR PANELS */

    #asi-blog-page .asi-side-card {
      border: 1px solid #075365;
      border-radius: 10px;
      background: linear-gradient(145deg, rgba(4,24,32,.95), rgba(0,13,19,.98));
      padding: 16px;
      margin-bottom: 12px;
      min-width: 0;
      position: relative;
      overflow: hidden;
    }

    #asi-blog-page .asi-side-card h3 {
      margin: 0 0 11px;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.3;
    }

    #asi-blog-page .asi-team {
      display: grid;
      grid-template-columns: 58px minmax(0,1fr);
      gap: 12px;
      align-items: start;
    }

    #asi-blog-page .asi-logo {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 1px solid var(--asi-green);
      background: radial-gradient(circle, #17362b, #001017 70%);
      color: white;
      font-size: 30px;
      font-weight: 900;
      box-shadow: 0 0 16px rgba(181,255,0,.12);
    }

    #asi-blog-page .asi-team h4 {
      margin: 1px 0 2px;
      font-size: 12px;
      font-weight: 800;
    }

    #asi-blog-page .asi-team .asi-role {
      color: #d3dce4;
      font-size: 10px;
      margin: 0 0 10px;
    }

    #asi-blog-page .asi-team p {
      color: #dce4e9;
      font-size: 12px;
      line-height: 1.5;
      margin: 0;
    }

    #asi-blog-page .asi-side-heading {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    #asi-blog-page .asi-side-heading .asi-heading-icon {
      font-size: 21px;
      color: var(--asi-green);
    }

    #asi-blog-page .asi-toc {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 8px;
    }

    #asi-blog-page .asi-toc a {
      display: flex;
      gap: 11px;
      align-items: center;
      color: #dce5eb;
      font-size: 12px;
      line-height: 1.4;
      transition: color .2s;
    }

    #asi-blog-page .asi-toc a:hover,
    #asi-blog-page .asi-toc a.is-active {
      color: var(--asi-green);
    }

    #asi-blog-page .asi-toc-num {
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
      border: 1px solid var(--asi-green);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--asi-green);
      font-size: 11px;
      font-weight: 700;
    }

    /* RELATED POSTS */

    #asi-blog-page .asi-related {
      display: grid;
      gap: 12px;
    }

    #asi-blog-page .asi-related-item {
      display: grid;
      grid-template-columns: 94px minmax(0,1fr);
      gap: 12px;
      align-items: center;
      border-radius: 7px;
      transition: transform .2s;
    }

    #asi-blog-page .asi-related-item:hover {
      transform: translateX(3px);
    }

    #asi-blog-page .asi-thumb {
      height: 62px;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #155064;
      background: #071c26;
      position: relative;
    }

    #asi-blog-page .asi-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .4s;
    }

    #asi-blog-page .asi-related-item:hover .asi-thumb img {
      transform: scale(1.08);
    }

    #asi-blog-page .asi-related-title {
      font-size: 11.5px;
      line-height: 1.35;
      color: #f3f7fa;
      display: block;
      margin-bottom: 5px;
    }

    #asi-blog-page .asi-meta {
      color: #bdcbd4;
      font-size: 9px;
      line-height: 1.4;
    }

    /* NEWSLETTER */

    #asi-blog-page .asi-newsletter {
      background:
        radial-gradient(circle at 0% 0%, rgba(181,255,0,.12), transparent 45%),
        linear-gradient(135deg, #051a22, #001016);
    }

    #asi-blog-page .asi-newsletter-head {
      display: grid;
      grid-template-columns: 43px minmax(0,1fr);
      align-items: center;
      gap: 11px;
      margin-bottom: 8px;
    }

    #asi-blog-page .asi-newsletter-head .asi-logo {
      width: 42px;
      height: 42px;
      font-size: 21px;
    }

    #asi-blog-page .asi-newsletter h3 {
      margin: 0;
      font-size: 15px;
    }

    #asi-blog-page .asi-newsletter p {
      font-size: 11.5px;
      color: #d2dde4;
      line-height: 1.5;
      margin: 8px 0 12px;
    }

    #asi-blog-page .asi-newsletter form {
      display: grid;
      gap: 8px;
    }

    #asi-blog-page .asi-newsletter input {
      width: 100%;
      min-width: 0;
      padding: 11px 13px;
      border-radius: 30px;
      border: 1px solid #155064;
      background: #00121a;
      color: white;
      font-size: 11px;
      outline: none;
    }

    #asi-blog-page .asi-newsletter input:focus {
      border-color: var(--asi-green);
      box-shadow: 0 0 0 2px rgba(181,255,0,.08);
    }

    #asi-blog-page .asi-newsletter .asi-btn {
      justify-self: start;
      padding: 10px 16px;
    }

    #asi-blog-page .asi-form-message {
      color: var(--asi-green);
      font-size: 11px;
      min-height: 15px;
      margin: 0;
    }

    @keyframes asi-glow {
      0%,100% { filter: drop-shadow(0 0 2px rgba(181,255,0,.2)); }
      50% { filter: drop-shadow(0 0 12px rgba(181,255,0,.65)); }
    }

    @keyframes asi-rise {
      from { opacity: 0; transform: translateY(15px); }
      to { opacity: 1; transform: translateY(0); }
    }

    #asi-blog-page .asi-reveal {
      animation: asi-rise .65s ease both;
    }

    /* TABLET */

    @media (max-width: 900px) {
      #asi-blog-page .asi-container {
        width: calc(100% - 32px);
      }

      #asi-blog-page .asi-layout {
        grid-template-columns: minmax(0,1fr) 280px;
        gap: 20px;
      }

      #asi-blog-page .asi-hero {
        min-height: 215px;
        padding: 17px;
      }

      #asi-blog-page .asi-hero-copy {
        max-width: 63%;
      }

      #asi-blog-page .asi-hero-points {
        right: 8px;
        width: 105px;
      }

      #asi-blog-page .asi-feature {
        grid-template-columns: 32px 43px minmax(0,1fr);
        gap: 9px;
      }

      #asi-blog-page .asi-feature-icon {
        width: 42px;
        height: 42px;
        font-size: 23px;
      }

      #asi-blog-page .asi-cta {
        grid-template-columns: 50px minmax(0,1fr);
      }

      #asi-blog-page .asi-cta-art {
        font-size: 38px;
      }

      #asi-blog-page .asi-cta .asi-btn {
        grid-column: 2;
        justify-self: start;
      }

      #asi-blog-page .asi-related-item {
        grid-template-columns: 75px minmax(0,1fr);
        gap: 9px;
      }

      #asi-blog-page .asi-thumb {
        height: 57px;
      }
    }

    /* MOBILE */

    @media (max-width: 680px) {
      #asi-blog-page .asi-container {
        width: calc(100% - 28px);
        padding-top: 10px;
      }

      #asi-blog-page .asi-layout {
        grid-template-columns: minmax(0,1fr);
        gap: 25px;
      }

      #asi-blog-page .asi-hero {
        min-height: 230px;
        padding: 18px;
        background-position: center;
      }

      #asi-blog-page .asi-hero-copy {
        max-width: 67%;
      }

      #asi-blog-page .asi-hero h1 {
        font-size: clamp(20px, 6vw, 29px);
      }

      #asi-blog-page .asi-hero-points {
        width: 100px;
        right: 7px;
        gap: 12px;
      }

      #asi-blog-page .asi-hero-point {
        font-size: 10px;
      }

      #asi-blog-page .asi-mini-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 15px;
      }

      #asi-blog-page .asi-intro {
        font-size: 13px;
      }

      #asi-blog-page .asi-feature {
        grid-template-columns: 32px 44px minmax(0,1fr);
        gap: 9px;
        margin: 19px 0;
      }

      #asi-blog-page .asi-feature h3 {
        font-size: 14px;
      }

      #asi-blog-page .asi-feature p {
        font-size: 12px;
      }

      #asi-blog-page .asi-cta {
        padding: 16px 13px;
        grid-template-columns: 43px minmax(0,1fr);
        gap: 10px;
      }

      #asi-blog-page .asi-cta-art {
        font-size: 35px;
      }

      #asi-blog-page .asi-cta h3 {
        font-size: 18px;
      }

      #asi-blog-page .asi-cta p {
        font-size: 11px;
      }

      #asi-blog-page .asi-cta .asi-btn {
        grid-column: 1 / -1;
        justify-self: start;
        margin-left: 53px;
      }

      #asi-blog-page .asi-sidebar {
        display: grid;
        gap: 12px;
      }

      #asi-blog-page .asi-side-card {
        margin-bottom: 0;
      }

      #asi-blog-page .asi-related-item {
        grid-template-columns: 100px minmax(0,1fr);
      }

      #asi-blog-page .asi-thumb {
        height: 65px;
      }
    }

    @media (max-width: 380px) {
      #asi-blog-page .asi-container {
        width: calc(100% - 20px);
      }

      #asi-blog-page .asi-hero {
        min-height: 210px;
        padding: 12px;
      }

      #asi-blog-page .asi-hero-copy {
        max-width: 66%;
      }

      #asi-blog-page .asi-hero-points {
        width: 92px;
      }

      #asi-blog-page .asi-hero-point {
        gap: 5px;
        font-size: 9px;
      }

      #asi-blog-page .asi-feature {
        grid-template-columns: 28px 38px minmax(0,1fr);
        gap: 7px;
      }

      #asi-blog-page .asi-number {
        width: 28px;
        height: 28px;
        font-size: 11px;
      }

      #asi-blog-page .asi-feature-icon {
        width: 37px;
        height: 37px;
        font-size: 20px;
      }

      #asi-blog-page .asi-cta .asi-btn {
        margin-left: 0;
      }
    }

      #asi-blog-page *,
      #asi-blog-page *::before,
      #asi-blog-page *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
      }
    }

    /* Post Navigation, Breadcrumbs & Rich Article Body */
    .asi-back-bar {
      margin-bottom: 18px;
    }
    .asi-back-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 14px;
      border-radius: 6px;
      background: #08161a;
      border: 1px solid #163c44;
      color: #92b8be;
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .asi-back-btn:hover {
      color: #baff00;
      border-color: #3b742a;
      background: #0d252a;
    }

    .asi-post-nav {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin: 28px 0;
      padding-top: 24px;
      border-top: 1px solid #163c44;
    }
    .asi-post-nav a {
      display: flex;
      flex-direction: column;
      padding: 16px;
      border-radius: 10px;
      background: #08171a;
      border: 1px solid #163c44;
      text-decoration: none;
      transition: all 0.25s ease;
    }
    .asi-post-nav a:hover {
      border-color: #baff00;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
    .asi-post-nav a small {
      color: #baff00;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      margin-bottom: 5px;
    }
    .asi-post-nav a span {
      color: #e2f1f2;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
    }
    .asi-nav-next {
      text-align: right;
    }

    .asi-article-body {
      color: #b7cbcd;
      font-size: 15px;
      line-height: 1.8;
      margin-bottom: 24px;
    }
    .asi-article-body h2,
    .asi-article-body h3,
    .asi-article-body h4 {
      color: #f1f7f6;
      font-weight: 700;
      margin: 28px 0 14px;
      line-height: 1.3;
    }
    .asi-article-body h2 { font-size: 22px; border-bottom: 1px solid #163c44; padding-bottom: 8px; }
    .asi-article-body h3 { font-size: 18px; color: #baff00; }
    .asi-article-body h4 { font-size: 16px; }
    .asi-article-body p { margin-bottom: 16px; }
    .asi-article-body a { color: #baff00; text-decoration: underline; }
    .asi-article-body blockquote {
      border-left: 3px solid #baff00;
      background: #07171a;
      margin: 20px 0;
      padding: 14px 20px;
      color: #cfdfe0;
      font-style: italic;
      border-radius: 0 8px 8px 0;
    }
    .asi-article-body pre {
      background: #051013;
      border: 1px solid #1a424a;
      border-radius: 8px;
      padding: 14px 18px;
      overflow-x: auto;
      font-family: monospace;
      color: #6ee7b7;
      margin: 18px 0;
    }
    .asi-article-body code {
      background: #091a1d;
      padding: 2px 6px;
      border-radius: 4px;
      color: #6ee7b7;
      font-size: 13px;
    }
    .asi-article-body table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
      font-size: 14px;
    }
    .asi-article-body th,
    .asi-article-body td {
      border: 1px solid #1b434b;
      padding: 10px 14px;
      text-align: left;
    }
    .asi-article-body th {
      background: #091c20;
      color: #baff00;
      font-weight: 700;
    }
    .asi-article-body img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
      margin: 18px 0;
      display: block;
      border: 1px solid #163c44;
    }
    .asi-article-body ul,
    .asi-article-body ol {
      padding-left: 24px;
      margin-bottom: 16px;
    }
    .asi-article-body li {
      margin-bottom: 6px;
    }

@supports (background-image: image-set(url("../images/testmonials.webp") type("image/webp"))) {
  .gc-testimonials {
    background-image:
      linear-gradient(90deg, rgba(3, 13, 20, .89), rgba(3, 12, 17, .64)),
      linear-gradient(0deg, rgba(1, 12, 9, .70), rgba(3, 13, 20, .28)),
      image-set(
        url("../images/testmonials.webp") type("image/webp"),
        url("../images/testmonials.png") type("image/png")
      );
  }

  html[data-theme="light"] .gc-testimonials {
    background-image:
      linear-gradient(90deg, rgba(247, 250, 252, .94), rgba(238, 244, 241, .9)),
      image-set(
        url("../images/testmonials.webp") type("image/webp"),
        url("../images/testmonials.png") type("image/png")
      );
  }
}

html[data-theme="light"] .contact-section .contact-heading :is(h1, h2),
html[data-theme="light"] .contact-section .contact-info-card h2 {
  color: #fff !important;
}